:root{
    --ink:#0b0a09;
    --ink-soft:#15120f;
    --paper:#f5f1e9;
    --amber:#d6bd91;
    --line:rgba(245,241,233,0.13);

    /* Palette additionnelle pour les sections claires (alternance
       noir/ivoire) : les composants existants (boutons, inputs, tableaux,
       FAQ...) réutilisent tous --paper pour le texte et --line pour les
       bordures, donc les redéfinir localement dans .band.on-light suffit
       à retourner correctement toute la palette, sans dupliquer chaque
       règle de composant. */
    --dark-text:#171411;
    --dark-muted:#746d64;
    --line-on-light:rgba(23,20,17,0.14);
    --cream:#e9e0d3;
    --paper-light:#f1ece3;
  }
  *{box-sizing:border-box;}
  /* Ascenseurs aux couleurs du site plutôt que le gris par défaut du
     navigateur (Firefox + Chrome/Safari/Edge). */
  *{scrollbar-width:thin;scrollbar-color:var(--amber) var(--ink);}
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:var(--ink);}
  ::-webkit-scrollbar-thumb{background:rgba(214,189,145,0.5);border-radius:100px;border:2px solid var(--ink);}
  ::-webkit-scrollbar-thumb:hover{background:var(--amber);}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--ink);color:var(--paper);font-family:'Manrope',sans-serif;min-height:100vh;position:relative;overflow-x:hidden;}
  h1,h2,h3{font-family:'DM Serif Display', Georgia, serif;font-weight:400;margin:0;}
  .wrap{max-width:920px;margin:0 auto;padding:0 20px;position:relative;z-index:1;}

  /* Bandes de fond par section : porte le fond pleine largeur, .wrap à
     l'intérieur garde le contenu centré. .on-light retourne la palette
     texte/bordure localement pour tous les composants enfants. */
  .band{position:relative;}
  .band.on-light{
    background:var(--paper-light);color:var(--dark-text);
    --paper:var(--dark-text);
    --line:var(--line-on-light);
  }

  /* Grain de pellicule discret sur toute la page, façon studio photo */
  body::after{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:999;opacity:0.035;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");
  }

  /* Halos de couleur en fond, façon parallaxe (translatés au scroll via JS) */
  .glow-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
  .glow{position:absolute;border-radius:50%;filter:blur(110px);opacity:0.18;will-change:transform;transition:transform 0.9s cubic-bezier(.16,.84,.44,1);}
  .glow-1{width:600px;height:600px;background:#a4824a;top:-260px;right:-140px;}
  .glow-2{width:540px;height:540px;background:#5c2a2f;top:900px;left:-300px;}
  .glow-3{width:520px;height:520px;background:#d6bd91;top:1900px;left:-160px;}
  .glow-4{width:640px;height:460px;background:#a47d41;top:2800px;right:-140px;}

  .site-nav{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    height:104px;padding:0 5vw;
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
    background:rgba(11,10,9,0.72);border-bottom:1px solid rgba(245,241,233,0.08);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  }
  .beta-badge{
    background:#8a3b3b;color:var(--paper);font-size:9px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;
    padding:4px 9px;border-radius:3px;flex-shrink:0;
  }
  .home-banner{
    position:fixed; top:118px; left:50%; transform:translateX(-50%); z-index:999;
    display:inline-block; max-width:90vw; width:max-content;
    text-decoration:none; color:var(--paper);
    font-family:'DM Serif Display',serif; font-size:17px; font-weight:400; letter-spacing:0.02em;
    line-height:1.3; text-align:center; padding:8px 58px; border-radius:3px;
    background:rgba(23,20,17,0.55); backdrop-filter:blur(8px);
    border:1px solid rgba(245,241,233,0.18);
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    transition:opacity 0.4s ease;
  }
  .home-banner.banner-hidden{ opacity:0; pointer-events:none; }
  .home-banner:hover{ opacity:0.92; }
  .home-banner .marquee-track{ display:inline-flex; white-space:nowrap; }
  .home-banner .marquee-copy{ display:inline-block; }
  .home-banner:not(.scroll) .marquee-copy + .marquee-copy{ display:none; }
  .home-banner.scroll{
    text-align:left; width:min(90vw, 480px); max-width:90vw;
  }
  .home-banner.scroll .marquee-track{
    animation:home-banner-scroll 14s linear infinite;
  }
  .home-banner.scroll .marquee-copy{ padding-right:50px; }
  @keyframes home-banner-scroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
  }
  .site-nav .brand{
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    color:var(--paper);text-decoration:none;font-family:'Manrope',sans-serif;
    max-width:260px;overflow:hidden;
    margin-top:-8px;
  }
  .site-nav .brand img{height:52px;width:auto;max-width:260px;object-fit:contain;display:block;}
  .site-nav .brand-fallback{font-size:12px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;}
  .site-nav .brand-tagline{font-size:8px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--amber);white-space:nowrap;}
  .site-nav .nav-links{display:flex;gap:30px;flex-wrap:wrap;align-items:center;}
  .nav-mobile-actions:empty{display:none;}
  .site-nav .nav-links a{
    position:relative;color:rgba(245,241,233,0.6);text-decoration:none;
    font-size:10px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;
    transition:color 0.3s ease;
  }
  .site-nav .nav-links a::after{
    content:'';position:absolute;left:0;bottom:-8px;width:0;height:1px;background:var(--amber);
    transition:width 0.35s ease;
  }
  .site-nav .nav-links a:hover{color:var(--paper);}
  .site-nav .nav-links a:hover::after{width:100%;}
  .site-nav .nav-actions{display:flex;gap:10px;align-items:center;}
  .site-nav button{
    background:none;border:1px solid rgba(214,189,145,0.4);color:var(--paper);
    padding:10px 18px;border-radius:2px;font-size:10px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
    cursor:pointer;transition:background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    white-space:nowrap;
  }
  .site-nav button:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);}
  #langToggleBtn{width:38px;height:38px;padding:0;font-size:10px;font-weight:700;letter-spacing:0.05em;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:none;color:var(--paper);flex-shrink:0;transition:background 0.3s ease, border-color 0.3s ease, color 0.3s ease;}
  #langToggleBtn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);}
  .nav-hamburger{
    display:none;background:none;border:1px solid rgba(214,189,145,0.4);color:var(--paper);
    width:38px;height:38px;padding:0;cursor:pointer;flex-shrink:0;
  }
  @media (max-width:700px){
    .site-nav{padding:0 4vw;flex-wrap:nowrap;height:64px;}
    .home-banner{top:76px;font-size:13px;padding:9px 20px;}
    /* Logo réduit de moitié sur mobile pour laisser la place au burger */
    .site-nav .brand img{height:34px;max-width:170px;}
    .site-nav .brand{margin-top:0;}
    .beta-badge{font-size:8px;padding:3px 7px;}
    .site-nav .nav-actions{gap:6px;}
    /* Sur mobile, seuls le burger et le bouton de déconnexion (s'il est
       affiché) restent dans la barre du haut : EN/FR, Connexion et Mon
       espace sont déplacés en JS dans le panneau du menu (voir
       relocateNavActions). */
    .nav-hamburger{display:flex;align-items:center;justify-content:center;}
    .site-nav .nav-links{
      display:none;position:fixed;top:64px;left:0;right:0;z-index:999;
      flex-direction:column;gap:0;align-items:stretch;
      background:rgba(11,10,9,0.97);border-bottom:1px solid rgba(245,241,233,0.08);
      backdrop-filter:blur(20px);max-height:calc(100vh - 64px);overflow-y:auto;
    }
    .site-nav .nav-links.open{display:flex;}
    .site-nav .nav-links a{padding:18px 7vw;border-bottom:1px solid rgba(245,241,233,0.08);}
    .site-nav .nav-links a::after{display:none;}
    /* Boutons d'action relocalisés dans le panneau mobile : même gabarit
       que les liens, alignés à gauche, pleine largeur. */
    .nav-mobile-actions{display:flex;flex-direction:column;border-top:1px solid rgba(245,241,233,0.08);}
    .site-nav .nav-links .nav-mobile-actions button{
      display:block;width:100%;text-align:left;padding:18px 7vw;margin:0;
      border:none;border-bottom:1px solid rgba(245,241,233,0.08);border-radius:0;
      background:none;font-size:10px;
    }
    .site-nav .nav-links .nav-mobile-actions button:hover{background:rgba(245,241,233,0.06);color:var(--paper);}
    /* #langToggleBtn a ses propres largeur/hauteur fixes (bouton carré
       "EN" dans la barre desktop) : on les annule ici pour qu'il prenne
       la même ligne pleine largeur que les autres actions une fois
       déplacé dans le panneau mobile. */
    .nav-mobile-actions #langToggleBtn{
      width:100%;height:auto;justify-content:flex-start;padding:18px 7vw;
    }
    /* Idem pour le bouton déconnexion (icône ✕ carrée dans la barre du
       haut) : pleine largeur avec le texte "Déconnexion" une fois dans
       le panneau mobile, le texte est changé en JS (relocateNavActions). */
    .nav-mobile-actions #navLogoutBtn{
      width:100%;height:auto;justify-content:flex-start;padding:18px 7vw;font-size:10px;
    }
  }

  .hero{padding:190px 0 110px;position:relative;}
  /* Jamais de version mobile pour ce padding avant (statique comme
     slider) : sur un petit écran, ces 190px + 110px fixes deviennent
     proportionnellement énormes, d'où une hauteur de hero — et donc de
     slider, mesuré sur cette même hauteur — bien trop grande. */
  @media (max-width:700px){
    .hero{padding:130px 0 60px;}
  }
  /* Slider d'images en fond du bandeau d'accueil, configurable depuis
     l'admin (Configuration) — masqué par défaut, ne s'affiche que si
     au moins une diapositive existe en base (voir loadHeroSlider()).
     Défile réellement (l'image ET son texte glissent ensemble comme un
     seul panneau), sur le même principe que le carrousel des styles IA
     plus bas sur la page — plutôt qu'un simple fondu où seule l'image
     changeait et le texte sautait instantanément. */
  .hero-slider-viewport{
    position:relative;overflow:hidden;
    /* Valeur de repli seulement : écrasée par la vraie hauteur mesurée
       du hero statique dès que loadHeroSlider() s'exécute (voir JS) —
       jamais un chiffre deviné, la hauteur du slider colle exactement à
       celle du hero d'origine. */
    min-height:640px;
  }
  .hero-slider-track{display:flex;height:100%;transition:transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);}
  .hero-slide-panel{
    flex-shrink:0;width:100%;position:relative;background-size:cover;background-position:center;
    box-sizing:border-box;
  }
  .hero-slide-panel::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(11,10,9,0.55), rgba(11,10,9,0.88));
  }
  /* Volontairement PAS de padding raccourci ici (qui écraserait le
     padding-top/bottom de .hero, 190px/110px, dont cet élément hérite
     aussi via sa classe "hero") — seulement les contraintes horizontales
     de .wrap, dont ce panneau tient aussi le rôle puisqu'il n'y a pas de
     .wrap séparé à l'intérieur d'un panneau du slider. */
  .hero-slide-content{position:relative;z-index:1;width:100%;max-width:920px;margin:0 auto;padding-left:20px;padding-right:20px;box-sizing:border-box;}
  .hero-slider-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;z-index:2;}
  .hero-slider-dot{
    width:7px;height:7px;border-radius:50px;background:rgba(245,241,233,0.35);
    cursor:pointer;border:none;padding:0;transition:width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
  }
  .hero-slider-dot:hover{background:rgba(245,241,233,0.6);}
  .hero-slider-dot.active{width:26px;background:var(--amber);}
  .hero-slider-dot.active:hover{background:var(--amber);}
  #top .wrap{position:relative;z-index:1;}
  .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:26px;color:var(--amber);font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;}
  .eyebrow::before{content:'';width:32px;height:1px;background:var(--amber);}
  .hero h1{font-size:clamp(38px,6.5vw,64px);line-height:1.08;max-width:680px;letter-spacing:-0.01em;}
  .hero p{font-size:17px;line-height:1.7;max-width:520px;margin-top:22px;color:rgba(245,241,233,0.7);}
  .hero .cta{margin-top:36px;}
  .hero-signature{margin-top:48px;}
  .hero-signature img{height:64px;width:auto;display:block;}
  .hero-signature strong{display:block;color:var(--paper);font-size:13px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;}
  .hero-signature span{display:block;margin-top:8px;color:var(--amber);font-family:'DM Serif Display',serif;font-size:24px;}
  .cta-btn{
    background:var(--amber);color:var(--ink);border:none;font-size:11px;font-weight:700;
    letter-spacing:0.1em;text-transform:uppercase;padding:16px 30px;border-radius:2px;cursor:pointer;
    transition:filter 0.15s ease, transform 0.15s ease;
  }
  .cta-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}

  .intro{padding:100px 0;}
  .intro p{font-size:16px;line-height:1.8;opacity:0.9;max-width:640px;}
  .intro p + p{margin-top:16px;}
  .how-it-works{padding:100px 0;}
  .how-it-works h2{font-size:clamp(28px,4vw,38px);margin-bottom:28px;}
  .how-it-works-img{width:100%;max-width:900px;display:block;border:1px solid var(--line);}
  .how-it-works-text{font-size:15px;line-height:1.8;opacity:0.85;max-width:620px;margin-top:26px;}

  .advantages{padding:100px 0;}
  .advantages h2{font-size:clamp(28px,4vw,38px);margin-bottom:28px;}
  .advantages-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;}
  @media (max-width:640px){.advantages-list{grid-template-columns:1fr;}}
  .advantages-list li{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:1.5;opacity:0.9;}
  .advantages-list li::before{content:'-';color:var(--amber);font-weight:600;flex-shrink:0;}

  .usecases{padding:100px 0;}
  .usecases h2{font-size:clamp(28px,4vw,38px);margin-bottom:28px;}
  .usecase-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:28px;}
  @media (max-width:700px){.usecase-grid{grid-template-columns:1fr;}}
  @media (min-width:701px) and (max-width:1000px){.usecase-grid{grid-template-columns:repeat(2, 1fr);}}
  .usecase-card{
    padding:0 0 30px;background:var(--ink);position:relative;overflow:hidden;
    border:1px solid var(--line);border-radius:0;
    transition:box-shadow 0.3s ease;
  }
  .band.on-light .usecase-card{background:var(--paper-light);border-color:var(--line-on-light);}
  .usecase-card:hover{ box-shadow:inset 0 0 0 1px var(--amber); }
  .usecase-card .usecase-band{
    padding:22px 26px;background:var(--ink);width:100%;box-sizing:border-box;
  }
  .band.on-light .usecase-card .usecase-band{background:var(--dark-text);}
  .usecase-card .usecase-band h3{
    font-family:'DM Serif Display',serif;font-weight:400;font-size:26px;color:var(--amber);margin:0;
  }
  .usecase-card .usecase-body{padding:26px 26px 0;position:relative;}
  .usecase-card .usecase-body::before{
    content:'';position:absolute;top:0;left:26px;right:26px;height:1px;background:var(--amber);opacity:0.5;
  }
  .usecase-card p{font-size:14px;line-height:1.7;opacity:0.75;margin:0;}

  .examples{padding:100px 0;}
  .examples h2{font-size:clamp(28px,4vw,38px);margin-bottom:10px;}
  .examples-intro{font-size:15px;opacity:0.75;margin-bottom:32px;max-width:520px;}
  .examples-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:22px;max-width:1160px;margin:0 auto;}
  @media (max-width:1160px){.examples-grid{grid-template-columns:repeat(3, 1fr);max-width:900px;}}
  @media (max-width:900px){.examples-grid{grid-template-columns:repeat(2, 1fr);max-width:640px;}}
  @media (max-width:600px){.examples-grid{grid-template-columns:1fr;}}
  .example-tile{position:relative;background:var(--ink);aspect-ratio:528/608;overflow:hidden;border:1px solid rgba(214,189,145,0.45);border-radius:2px;display:flex;align-items:center;justify-content:center;transition:border-color 0.25s ease, box-shadow 0.25s ease;}
  .example-tile:hover{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber);}
  .band.on-light .example-tile{background:var(--paper-light);}
  .example-tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}
  .example-play-btn{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:52px;height:52px;border-radius:50%;
    background:rgba(11,10,9,0.55);border:1px solid rgba(245,241,233,0.5);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background 0.25s ease, border-color 0.25s ease;
  }
  .example-play-btn:hover{background:var(--amber);border-color:var(--amber);}
  .example-play-btn svg{width:18px;height:18px;fill:var(--paper);margin-left:2px;transition:fill 0.25s ease;}
  .example-play-btn:hover svg{fill:var(--ink);}
  .example-tile.playing .example-play-btn{display:none;}
  .example-tile video::-webkit-media-controls-overlay-play-button{display:none;}
  .examples-empty{font-size:13px;opacity:0.55;grid-column:1/-1;padding:20px 0;}
  .stats-counters{display:flex;gap:20px;justify-content:center;margin-top:70px;margin-bottom:40px;flex-wrap:wrap;}
  .stat-counter{
    text-align:center;border:1px solid var(--line);padding:32px 20px;
    width:150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .stat-counter-value{font-family:'DM Serif Display',serif;font-size:48px;color:var(--amber);}
  .stats-section{padding-top:90px;border-top:1px solid var(--line);margin-top:20px;}
  .stats-intro{font-size:15px;opacity:0.75;margin-top:10px;max-width:480px;}
  .stat-counter-label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;opacity:0.65;margin-top:6px;}

  .ai-credits-section{padding:100px 0;}
  .themes-showcase{padding:100px 0;}
  .ai-credits-section h2{font-size:clamp(28px,4vw,38px);margin-bottom:12px;}
  .ai-credits-intro{font-size:15px;opacity:0.8;margin-bottom:28px;max-width:560px;}
  .ai-pack-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:14px;}
  .themes-intro{max-width:640px;opacity:0.8;margin-bottom:32px;}
  .themes-carousel{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:20px;}
  .themes-viewport{overflow:hidden;max-width:900px;width:100%;}
  .themes-track{display:flex;transition:transform 0.5s ease;}
  .themes-grid{
    flex-shrink:0;width:100%;display:grid;grid-template-columns:repeat(4, 1fr);gap:16px;box-sizing:border-box;
  }
  /* Sur mobile, 4 colonnes rendait chaque vignette minuscule — 2 colonnes
     seulement, nettement plus grosses, quitte à ce qu'une "page" du
     carrousel s'étale sur plus de lignes qu'en version bureau. */
  @media (max-width:600px){
    .themes-grid{grid-template-columns:repeat(2, 1fr);}
  }
  .theme-showcase-item{text-align:center;}
  .theme-showcase-swatch{
    display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;margin:0 auto 10px;
    border:2px solid var(--amber);background:rgba(245,241,233,0.06);
  }
  .theme-showcase-name{font-size:12px;opacity:0.75;}
  .themes-arrow{
    flex-shrink:0;width:38px;height:38px;border-radius:50%;background:none;border:1.5px solid var(--amber);
    color:var(--amber);cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .themes-arrow:hover{background:var(--amber);color:var(--ink);}
  .themes-arrow:disabled{opacity:0.25;cursor:default;background:none;color:var(--amber);}
  .band.on-light .theme-showcase-swatch{border-color:var(--amber);}
  .ai-pack-card{
    border:1px solid var(--line);padding:24px 18px;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:6px;
  }
  .ai-pack-card .credits{font-family:'DM Serif Display',serif;font-size:42px;line-height:1;color:var(--amber);}
  .ai-pack-card .name{font-size:13px;opacity:0.8;}
  .ai-pack-card .price{font-size:15px;font-weight:600;margin-top:6px;}
  .ai-pack-card button{
    background:transparent;border:1px solid var(--line);color:var(--paper);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
    padding:11px 16px;cursor:pointer;width:100%;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .ai-pack-card button:hover{background:rgba(128,128,128,0.1);}
  .ai-pack-card button:disabled{opacity:0.5;cursor:default;}

  .faq{padding:100px 0;}
  .faq h2{font-size:clamp(28px,4vw,38px);margin-bottom:28px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-question{
    width:100%;background:none;border:none;color:var(--paper);text-align:left;
    font-family:'Manrope',sans-serif;font-size:15px;font-weight:500;padding:20px 0;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
  }
  .faq-question .chevron{transition:transform 0.2s ease;flex-shrink:0;opacity:0.5;color:var(--amber);}
  .faq-item.open .faq-question .chevron{transform:rotate(180deg);}
  .faq-answer{max-height:0;overflow:hidden;transition:max-height 0.25s ease;}
  .faq-answer p{font-size:15px;line-height:1.75;opacity:0.75;margin:0 0 20px;}
  .faq-item.open .faq-answer{max-height:400px;}

  .pricing{padding:100px 0;}
  .pricing h2{font-size:clamp(30px,4.5vw,44px);margin-bottom:8px;}

  .price-mode-toggle{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 24px;}
  .price-mode-label{font-size:12px;font-weight:600;letter-spacing:0.06em;opacity:0.45;transition:opacity 0.2s;}
  .price-mode-label.active{opacity:1;color:var(--amber);}
  .toggle-switch{
    position:relative;width:46px;height:26px;border-radius:100px;border:1.5px solid var(--line);
    background:transparent;cursor:pointer;padding:0;flex-shrink:0;
  }
  .toggle-switch .toggle-knob{
    position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
    background:var(--paper);transition:transform 0.2s ease, background 0.2s ease;
  }
  .toggle-switch[aria-checked="true"]{border-color:var(--amber);}
  .toggle-switch[aria-checked="true"] .toggle-knob{transform:translateX(20px);background:var(--amber);}

  .pricing-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .pricing-table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px;}
  .pricing-table th, .pricing-table td{padding:16px 12px;text-align:center;border-bottom:1px solid var(--line);}
  .pricing-table th{font-family:'DM Serif Display',serif;font-size:18px;font-weight:400;padding-bottom:4px;}
  .pricing-table .row-label{text-align:left;opacity:0.7;font-size:12px;letter-spacing:0.03em;white-space:nowrap;padding-right:20px;}
  .pricing-table .price-row td{font-family:'DM Serif Display',serif;font-size:22px;font-weight:400;border-bottom:2px solid var(--line);padding-top:0;}
  .pricing-table .price-row td .price-period{font-family:'Manrope',sans-serif;font-size:11px;font-weight:400;opacity:0.6;display:block;}
  .pricing-table .highlight-col{background:rgba(214,189,145,0.07);}
  .pricing-table th.highlight-col{color:var(--amber);}
  .pricing-table .cta-row td{border-bottom:none;padding-top:22px;}
  .table-cta{
    background:transparent;border:1px solid var(--line);color:var(--paper);
    padding:10px 16px;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease, filter 0.15s ease, transform 0.15s ease;
  }
  .table-cta:hover{background:rgba(128,128,128,0.1);}
  .highlight-col .table-cta{background:var(--amber);border-color:var(--amber);color:var(--ink);font-weight:700;}
  .highlight-col .table-cta:hover{filter:brightness(1.08);transform:translateY(-1px);background:var(--amber);}
  .table-cta:disabled{opacity:0.5;cursor:default;background:transparent;color:var(--paper);border-color:var(--line);}

  .auth-section{padding:100px 0 130px;}
  .auth-box{max-width:400px;margin:0 auto;}
  .auth-modal-overlay{
    display:none;position:fixed;inset:0;z-index:2000;background:rgba(11,10,9,0.85);
    align-items:center;justify-content:center;padding:20px;overflow-y:auto;
  }
  .auth-modal-overlay.open{display:flex;}
  .auth-modal-box{position:relative;background:var(--ink);border:1px solid var(--line);max-width:520px;width:100%;padding:36px 32px;max-height:90vh;overflow-y:auto;}
  .auth-modal-close{
    position:absolute;top:14px;right:14px;width:32px;height:32px;
    background:none;border:1px solid var(--line);color:var(--paper);cursor:pointer;font-size:14px;
  }
  .nav-logout-btn{
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    background:none;border:1px solid var(--line);color:var(--paper);cursor:pointer;font-size:13px;padding:0;
    transition:background 0.25s ease, border-color 0.25s ease;
  }
  .nav-logout-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
  .tabs{display:flex;gap:24px;margin-bottom:26px;justify-content:center;}
  .tabs button{background:none;border:none;font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;font-family:'Manrope',sans-serif;color:var(--paper);padding-bottom:8px;cursor:pointer;opacity:0.5;}
  .tabs button.active{opacity:1;border-bottom:2px solid var(--amber);}
  label{display:block;font-size:12px;letter-spacing:0.03em;opacity:0.7;margin:14px 0 6px;}
  .theme-picker{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;}
  .theme-swatch{
    width:44px;height:44px;border-radius:50%;cursor:pointer;
    border:3px solid #8a8a8a;
    transition:border-color 0.15s ease;
  }
  .theme-swatch.selected{border-color:var(--amber);}
  .theme-picker-label{font-size:11px;opacity:0.6;text-align:center;margin-top:4px;width:44px;}
  .theme-swatch-wrap{text-align:center;}
  input,select{
    width:100%;background:transparent;border:1px solid var(--line);border-radius:2px;
    color:var(--paper);font-family:'Manrope',sans-serif;font-size:15px;padding:11px 12px;
  }
  input::placeholder{color:rgba(128,128,128,0.6);}
  input[type="date"]{
    color-scheme:dark;cursor:pointer;font-size:17px;padding:14px 14px;
    border-width:1.5px;transition:border-color 0.15s ease;
  }
  input[type="date"]:hover, input[type="date"]:focus{border-color:var(--amber);}
  .band.on-light input[type="date"]{color-scheme:light;}
  input[type="date"]::-webkit-calendar-picker-indicator{
    cursor:pointer;padding:6px;opacity:0.9;
    /* Icône native agrandie : le seul morceau du calendrier qu'on peut
       vraiment styler, le reste (la grille de jours qui s'ouvre) est géré
       par le navigateur et hors de portée du CSS. */
    transform:scale(1.3);
  }
  .plan-choice{display:flex;gap:10px;margin-top:8px;}
  .plan-choice label{flex:1;border:1px solid var(--line);padding:12px;cursor:pointer;font-size:13px;margin:0;}
  .plan-choice input{width:auto;margin-right:6px;}
  button.primary{
    margin-top:22px;background:var(--amber);color:var(--ink);border:none;font-weight:700;
    font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:14px 22px;border-radius:2px;cursor:pointer;width:100%;
  }
  .google-btn{
    margin-top:14px;width:100%;background:transparent;border:1px solid var(--line);color:var(--paper);
    font-size:13px;padding:12px;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .divider{display:flex;align-items:center;gap:10px;margin:20px 0;font-size:12px;opacity:0.5;}
  .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line);}
  .error{
    color:#e0836a;font-size:13px;margin-top:14px;padding:14px 16px;border-radius:2px;
    border:1px solid rgba(224,131,106,0.4);background:rgba(224,131,106,0.08);text-align:center;
  }
  .notice{font-size:13px;background:rgba(214,189,145,0.1);border:1px solid rgba(214,189,145,0.35);padding:12px;border-radius:2px;margin-top:14px;}

  #eventForm{display:none;}

  .site-footer{border-top:1px solid var(--line);padding:36px 0 44px;position:relative;z-index:1;}

  /* Apparition douce au défilement */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.9s cubic-bezier(.16,.7,.3,1), transform 0.9s cubic-bezier(.16,.7,.3,1);}
  .reveal.visible{opacity:1;transform:translateY(0);}
  .reveal-stagger .reveal:nth-child(2){transition-delay:0.08s;}
  .reveal-stagger .reveal:nth-child(3){transition-delay:0.16s;}
  .reveal-stagger .reveal:nth-child(4){transition-delay:0.24s;}
  .reveal-stagger .reveal:nth-child(5){transition-delay:0.32s;}
  .reveal-stagger .reveal:nth-child(6){transition-delay:0.4s;}
  .footer-links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
  .footer-links a{color:var(--paper);opacity:0.6;font-size:12px;letter-spacing:0.03em;text-decoration:none;}
  .footer-links a:hover{opacity:1;}
  .footer-copy{text-align:center;font-size:11px;letter-spacing:0.05em;opacity:0.4;margin:0;}
  .footer-tagline{text-align:center;font-family:'DM Serif Display',serif;font-size:16px;color:var(--amber);margin:0 0 22px;}

/* Ajoute pour le gabarit d'article seul (single.php). Le reste de ce
   fichier est repris tel quel de index.html, ceci est nouveau. */
.vs-article h1{font-size:36px;line-height:1.2;margin:0 0 16px;}
.vs-article-meta{opacity:0.55;font-size:13px;margin:0 0 40px;}
.vs-article-thumb{margin:0 0 40px;}
.vs-article-thumb img{width:100%;height:auto;border-radius:4px;display:block;}
.vs-article-body{font-size:17px;line-height:1.75;color:var(--paper);}
.vs-article-body p{margin:0 0 1.3em;}
.vs-article-body h2{font-family:'DM Serif Display',serif;font-weight:400;color:var(--amber);font-size:26px;margin:2em 0 0.7em;}
.vs-article-body h3{font-family:'DM Serif Display',serif;font-weight:400;color:var(--paper);font-size:21px;margin:1.8em 0 0.6em;}
.vs-article-body ul,.vs-article-body ol{margin:0 0 1.3em;padding-left:1.4em;}
.vs-article-body li{margin-bottom:0.5em;}
.vs-article-body a:not(.vs-btn){color:var(--amber);}
.vs-article-body img{max-width:100%;height:auto;border-radius:4px;margin:1.5em 0;}
.vs-article-body blockquote{border-left:2px solid var(--amber);margin:1.5em 0;padding:0.2em 0 0.2em 1.2em;opacity:0.85;font-style:italic;}
.vs-article-back{display:inline-block;margin-top:3em;color:var(--amber);text-decoration:none;font-size:13px;letter-spacing:0.03em;}
.vs-article-back:hover{text-decoration:underline;}

/* Ajoute par le theme WordPress : tailles de texte augmentees pour les
   pages secondaires (blog, articles, pages), qui n'avaient quasiment
   aucune taille fixee et heritaient donc des tailles par defaut du
   navigateur, trop petites. Le reste de ce fichier est repris tel
   quel de index.html, ceci est nouveau. */
body{font-size:17px;line-height:1.7;}
.band h1{font-size:44px;line-height:1.15;}
.band h2:not(.vs-blog-card-title){font-size:30px;}
.vs-article-body{font-size:18px;line-height:1.8;}

/* Ajoute par le theme WordPress : classes attendues par le contenu
   genere par Basile (articles et pages), qui ne peut pas embarquer de
   <script>, de <style> ni d'attributs onclick (WordPress les filtre
   systematiquement au moment de l'enregistrement via l'API REST).
   Reprend les vraies variables du thème (--ink, --paper, --amber,
   --line), pas de nouvelle variable inventee. */

/* Bouton d'appel a l'action, meme gabarit que .cta-btn utilise sur la
   home page, adapte pour fonctionner aussi bien en <a> qu'en <button>. */
.vs-btn{
  display:inline-block;text-decoration:none;text-align:center;
  font-weight:700;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  padding:16px 30px;border-radius:2px;cursor:pointer;
  transition:filter 0.15s ease, transform 0.15s ease;
}
.vs-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.vs-btn-primary{background:var(--amber);color:var(--ink);border:none;}

/* FAQ en accordeon natif <details>/<summary>, sans JS : c'est le bon
   choix pour du contenu injecte via l'API REST, qui ne peut pas
   compter sur un script pour gerer l'ouverture/fermeture. */
.vs-faq-item{
  background:rgba(245,241,233,0.04);border:1px solid var(--line);
  border-radius:2px;margin-bottom:12px;overflow:hidden;
}
.vs-faq-item summary{
  padding:18px 20px;cursor:pointer;font-weight:700;color:var(--paper);
  list-style:none;position:relative;
}
.vs-faq-item summary::-webkit-details-marker{display:none;}
.vs-faq-item summary::after{
  content:"+";position:absolute;right:20px;top:16px;color:var(--amber);
  font-size:20px;line-height:1;transition:transform 0.2s ease;
}
.vs-faq-item[open] summary::after{transform:rotate(45deg);}
.vs-faq-item p{
  padding:0 20px 20px;margin:0;color:var(--paper);opacity:0.75;
  font-size:16px;line-height:1.75;
}

/* Ajoute par le theme WordPress : grille de cartes pour la liste du
   blog (index.php). Le reste de ce fichier est repris tel quel de
   index.html, ceci est nouveau. */
.vs-blog-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:32px;
}
.vs-blog-card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:rgba(245,241,233,0.03);
  transition:box-shadow 0.3s ease, transform 0.2s ease;
}
.vs-blog-card:hover{box-shadow:inset 0 0 0 1px var(--amber);transform:translateY(-2px);}
.vs-blog-card-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ink-soft);}
.vs-blog-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.vs-blog-card-thumb-fallback{width:100%;height:100%;background:linear-gradient(135deg, var(--ink-soft), var(--ink));}
.vs-blog-card-body{padding:18px 20px 20px;}
.vs-blog-card-category{
  display:inline-block;color:var(--amber);font-size:11px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px;
}
.vs-blog-card-title{
  font-family:'DM Serif Display',serif;font-weight:400;color:var(--paper);
  font-size:16px;line-height:1.4;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.vs-blog-card-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--amber);
}
.vs-blog-card:hover .vs-blog-card-cta{text-decoration:underline;}

/* Bouton Connexion / Mon espace des pages secondaires : reprend a
   l'identique le style de .site-nav button sur la home page (meme
   bordure, meme radius, meme typo), au lieu d'un lien texte brut. */
.vs-nav-auth-btn{
  display:inline-block;text-decoration:none;
  background:none;border:1px solid rgba(214,189,145,0.4);color:var(--paper);
  padding:10px 18px;border-radius:2px;font-size:10px;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;white-space:nowrap;
  transition:background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.vs-nav-auth-btn:hover{background:rgba(214,189,145,0.1);}

/* Ajoute par le theme WordPress : boutons de filtre par categorie,
   au-dessus de la grille du blog (index.php). Le reste de ce fichier
   est repris tel quel de index.html, ceci est nouveau. */
.vs-blog-filters{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;
}
.vs-blog-filter-btn{
  display:inline-block;text-decoration:none;
  background:none;border:1px solid rgba(214,189,145,0.4);color:var(--paper);
  padding:9px 16px;border-radius:2px;font-size:10px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.vs-blog-filter-btn:hover{background:rgba(214,189,145,0.1);}
.vs-blog-filter-btn.is-active{background:var(--amber);border-color:var(--amber);color:var(--ink);}