@font-face{font-family:"Playfair Display";src:url("/da/playfair-display-400-500.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/da/source-sans-3-400-600.woff2") format("woff2");font-weight:400 600;font-display:swap}
/* =============================================================================
   Design system repris à l'identique de gerauddellea.com/lavant-garde.
   Variables, polices et dorures inchangées : les pages doivent se lire comme
   un seul site.

   Note : les accents sont désormais autorisés partout. La page est servie par
   le VPS en UTF-8, plus par un bloc Custom Code GHL. Le piège du mojibake
   (GHL ignore le meta charset) ne s'applique plus ici.
   ========================================================================== */
:root{
  --da-vert:#12302A; --da-vert-2:#0D2520; --da-laiton:#A98A52; --da-laiton-2:#D9BE86; --da-laiton-3:#5C441B; --da-laiton-4:#6B5020;
  --da-papier:#E4DDCF; --da-pierre:#C9C6BC; --da-ardoise:#353537; --da-acajou:#4A1510; --da-encre:#1E1A15; --da-encre-2:#3F382E; --da-encre-3:#5A5244;
  --da-ivoire:#F0E8D9; --da-ivoire-2:#D9D1C2; --da-bouton:#C8A05A;

  --espresso:#E4DDCF; --espresso-2:#C9C6BC; --encre:#1E1A15; --creme:#1E1A15; --creme-soft:#3F382E; --ivoire:#1E1A15;
  --or:#5C441B; --or-clair:#6B5020; --terracotta:#4A1510; --taupe:#5A5244; --ligne:rgb(92 68 27 / .28);
  --pf:"Playfair Display","Times New Roman",serif; --cg:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--espresso);}
body{
  font-family:var(--cg);
  font-size:20px;
  line-height:1.6;
  color:var(--creme);
  background:var(--espresso);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  padding:34px 22px 64px;
}

.wrap{max-width:660px;margin:0 auto;}

/* ---- surtitres ---- */
.eyebrow{
  font-family:var(--cg);font-size:12px;font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--terracotta);margin-bottom:20px;
}
.eyebrow.muted{color:var(--taupe);letter-spacing:.3em;}

/* ---- titres ---- */
h1{
  font-family:var(--pf);font-weight:600;
  font-size:clamp(31px,7.4vw,54px);
  line-height:1.14;letter-spacing:.01em;
  color:var(--ivoire);margin-bottom:22px;
}
h1 em{font-style:italic;color:var(--or-clair);}
h2{
  font-family:var(--pf);font-weight:500;
  font-size:clamp(23px,5.4vw,33px);
  line-height:1.28;color:var(--creme);margin-bottom:26px;
}
.lead{color:var(--creme-soft);font-size:19px;margin-bottom:34px;}
.lead b{color:var(--creme);font-weight:500;}

/* ---- progression ---- */
.rail{height:1px;background:var(--ligne);margin:14px 0 30px;overflow:hidden;}
.rail i{display:block;height:100%;width:0;background:var(--or);transition:width .4s ease;}

/* ---- options ---- */
.opts{display:flex;flex-direction:column;gap:11px;}
.opt{
  width:100%;text-align:left;cursor:pointer;
  font-family:var(--cg);font-size:19px;line-height:1.45;
  color:var(--creme);
  background:var(--da-ivoire);
  border:1px solid var(--ligne);
  border-radius:2px;
  padding:17px 20px;
  transition:border-color .18s,background .18s,color .18s,padding-left .18s;
}
.opt:hover{
  border-color:var(--or);
  background:rgba(176,137,79,.10);
  color:var(--ivoire);
  padding-left:25px;
}
.opt:focus-visible{outline:1px solid var(--or-clair);outline-offset:3px;}

/* ---- bouton doré ---- */
.cta{
  display:block;width:100%;text-align:center;cursor:pointer;
  font-family:var(--cg);font-size:14px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--espresso);
  background:var(--or-clair);
  border:none;border-radius:2px;
  padding:19px 26px;text-decoration:none;
  transition:background .2s,letter-spacing .2s;
}
.cta:hover{background:var(--or);letter-spacing:.22em;}
.cta[disabled]{opacity:.5;cursor:default;}
.back{
  background:none;border:none;cursor:pointer;
  font-family:var(--cg);font-size:15px;color:var(--taupe);
  padding:20px 0 0;letter-spacing:.04em;
}
.back:hover{color:var(--creme);}

/* ---- champs ---- */
.field{margin-bottom:16px;}
label{
  display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:9px;
}
input[type=text],input[type=email]{
  width:100%;font-family:var(--cg);font-size:19px;color:var(--creme);
  background:var(--da-ivoire);
  border:1px solid var(--ligne);border-radius:2px;
  padding:16px 18px;
}
input[type=text]:focus,input[type=email]:focus{outline:none;border-color:var(--or);}
.consent{
  display:flex;gap:12px;align-items:flex-start;
  font-size:15px;line-height:1.5;color:var(--taupe);
  margin:22px 0 26px;cursor:pointer;
}
.consent input{width:16px;height:16px;flex:0 0 16px;margin-top:5px;accent-color:var(--or);}
.err{color:var(--terracotta);font-size:16px;margin-bottom:14px;display:none;}

/* ---- résultat ---- */
.rule{width:52px;height:1px;background:var(--or);margin:0 0 24px;}
.body p{margin-bottom:19px;color:var(--creme-soft);font-size:19px;}
.body p.close{
  color:var(--ivoire);font-style:italic;font-size:21px;
  border-left:1px solid var(--or);padding-left:20px;margin-top:30px;
}
.sep{height:1px;background:var(--ligne);margin:38px 0 30px;}
.note{
  font-family:var(--cg);font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--taupe);
  text-align:center;margin-top:16px;
}

.screen{display:none;}
.screen.on{display:block;animation:rise .45s ease;}
@keyframes rise{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}

@media(min-width:760px){
  body{padding:78px 24px 96px;}
  .opt{padding:18px 22px;}
}

/* =============================================================================
   Ajouts propres à l'espace masterclass. Le reste vient du quiz, à l'identique.
   ========================================================================== */

/* ---- liste des sections ---- */
.sect{
  display:flex;align-items:baseline;gap:16px;
  padding:19px 20px;margin-bottom:11px;
  background:var(--da-ivoire);
  border:1px solid var(--ligne);border-radius:2px;
  text-decoration:none;color:var(--creme);
  transition:border-color .18s,background .18s,padding-left .18s;
}
a.sect:hover{
  border-color:var(--or);
  background:rgba(176,137,79,.10);
  padding-left:25px;
}
.sect-n{
  font-family:var(--pf);font-size:15px;color:var(--or-clair);
  flex:0 0 22px;
}
.sect-t{flex:1;font-size:19px;line-height:1.35;}
.sect-d{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);flex:0 0 auto;
}
.sect-off{opacity:.45;}
.sect-off .sect-d{color:var(--terracotta);}

/* ---- lecteur ---- */
.player{
  width:100%;display:block;
  background:#000;border:1px solid var(--ligne);border-radius:2px;
  margin-bottom:12px;
}

/* ---- bandeau d'information ---- */
.avis{
  border-left:1px solid var(--or);
  padding:2px 0 2px 20px;margin-bottom:30px;
  color:var(--creme-soft);font-size:18px;line-height:1.55;
}

/* ---- identifiants sur la page de remerciement ---- */
.creds{
  background:var(--da-ivoire);
  border:1px solid var(--ligne);border-radius:2px;
  padding:22px 24px;margin:8px 0 28px;
}
.creds dt{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:6px;
}
.creds dd{
  font-size:21px;color:var(--ivoire);margin-bottom:18px;
  font-family:var(--pf);letter-spacing:.04em;
}
.creds dd:last-child{margin-bottom:0;}

/* ---- barre du haut ---- */
.bar{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:26px;
}
.bar form{margin:0;}
.bar button{
  background:none;border:none;cursor:pointer;
  font-family:var(--cg);font-size:14px;color:var(--taupe);
  letter-spacing:.04em;padding:0;
}
.bar button:hover{color:var(--creme);}


/* ---- couverture d'espace (07/08) -----------------------------------------
   L'espace membre n'avait aucune image alors que tout l'univers de Géraud est
   visuel. Une bande en tête, la même facture que les heros des pages de vente :
   photo, voile chaud, filet doré. Le voile est volontairement lourd — sur les
   photos claires, le texte devenait illisible à 375 px (leçon du 03/08).      */
.couv{
  position:relative;
  margin:0 -22px 30px;
  height:180px;
  background-size:cover;
  background-position:center 38%;
  border-bottom:1px solid rgba(176,137,79,.34);
}
.couv::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,11,7,.42) 0%,rgba(16,11,7,.72) 62%,var(--espresso) 100%);
}
.couv-t{
  position:absolute;left:22px;right:22px;bottom:16px;z-index:1;
  font-family:var(--pf);font-size:27px;line-height:1.15;color:var(--ivoire);
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.couv-t em{color:var(--or-clair);font-style:italic;}
@media(min-width:760px){
  .couv{height:260px;margin:0 -44px 38px;}
  .couv-t{left:44px;right:44px;bottom:24px;font-size:38px;}
}

/* Le lecteur vidéo, fichier local ou YouTube : même cadre doré. */
.cadre{
  position:relative;width:100%;aspect-ratio:16/9;margin:22px 0 6px;
  border:1px solid rgba(176,137,79,.34);background:#000;
}
.cadre iframe,.cadre video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* ---- le verrou : la suite du parcours, floutée, avec son cadenas ----------
   Le flou n'est qu'un rideau : ce qu'il cache, ce sont des titres, jamais du
   contenu. Les vidéos restent gardées côté serveur par `aAcces`.
   `pointer-events:none` sur les lignes floutées, sinon un doigt sur mobile
   croit pouvoir les ouvrir et ne déclenche rien : une frustration gratuite. */
/* 🔴 Le voile a été en `position:absolute; inset:0` pendant une heure. Ça ne
   tient que tant que la pile floutée est PLUS HAUTE que le voile : le jour où
   l'espace visé est passé de quatre vidéos à deux, le cadre est tombé à 142 px
   pour 209 px de contenu, et le texte est sorti par le bas, sur desktop comme
   sur mobile. Un bloc dont la hauteur dépend d'un contenu voisin est un piège.
   Depuis : la bande floutée est une bande, courte et bornée, le voile est un
   bloc normal posé dessous et remonté pour garder le fondu. Le cadre suit
   toujours son contenu, à n'importe quelle largeur et pour n'importe quel
   nombre de vidéos. Ne pas remettre `absolute`. */
.verrou{margin-top:4px;}
.verrou-flou{
  max-height:112px;overflow:hidden;
  filter:blur(5px);opacity:.55;user-select:none;pointer-events:none;
}
.verrou-flou .sect{margin-bottom:11px;}
.verrou-voile{
  position:relative;z-index:1;margin-top:-58px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 20px 6px;
  background:linear-gradient(180deg,rgb(228 221 207 / .62) 0%,rgb(228 221 207 / .94) 38%,var(--espresso) 74%);
}
.verrou-cadenas{color:var(--or-clair);margin-bottom:12px;flex:0 0 auto;}
.verrou-t{
  font-family:var(--pf);font-size:25px;line-height:1.2;
  color:var(--ivoire);margin-bottom:6px;
}
.verrou-s{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:14px;
}
.verrou-p{
  font-size:17px;line-height:1.5;color:var(--creme-soft);
  max-width:400px;margin:0 auto 20px;
}
.verrou-n{font-size:14px;color:var(--taupe);margin-top:14px;}
.verrou-voile .cta{margin:0;}

@media(max-width:480px){
  .verrou-flou{max-height:96px;}
  .verrou-voile{margin-top:-50px;padding:0 14px 6px;}
  .verrou-t{font-size:22px;}
  .verrou-p{font-size:16px;margin-bottom:18px;}
  /* « Débloquer la suite — 77 € » passait sur deux lignes à 375 px : on resserre
     l'interlettrage plutôt que de raccourcir la formule, qui porte le prix. */
  .verrou-voile .cta{letter-spacing:.1em;padding:17px 14px;}
}

/* ---- les fiches écrites (18/08) -------------------------------------------
   L'espace admin se lit, il ne se regarde pas. Même palette que le reste, mais
   du texte long : interlignage plus généreux, titres intermédiaires, et des
   blocs qui tiennent à 375 px avant de tenir sur un écran large.
   Le tableau déborde dans SON cadre (`overflow-x`), jamais la page.          */
.fiche{font-size:18px;line-height:1.62;color:var(--creme-soft);}
.fiche p{margin-bottom:17px;}
.fiche b,.fiche strong{color:var(--ivoire);font-weight:600;}
.fiche em{color:var(--creme);}
.fiche h3{
  font-family:var(--pf);font-weight:500;font-size:21px;line-height:1.25;
  color:var(--ivoire);margin:34px 0 14px;
}
.fiche h3:first-child{margin-top:0;}
.fiche ul,.fiche ol{margin:0 0 18px;padding-left:20px;}
.fiche li{margin-bottom:9px;}
.fiche li::marker{color:var(--or);}
.fiche a{color:var(--or-clair);text-decoration:none;border-bottom:1px solid rgba(176,137,79,.4);
  overflow-wrap:anywhere;}
.fiche a:hover{color:var(--ivoire);}
.fiche hr{border:none;height:1px;background:var(--ligne);margin:30px 0;}

/* Ce qui se dit mot à mot : la phrase à reprendre telle quelle au téléphone. */
.dire{
  border-left:1px solid var(--or);
  padding:2px 0 2px 20px;margin:0 0 20px;
  color:var(--ivoire);font-style:italic;font-size:19px;line-height:1.5;
}
/* Ce qui ne se dit jamais, ou ce qui casse si on le fait. */
.garde{
  border-left:1px solid var(--terracotta);
  padding:2px 0 2px 20px;margin:0 0 20px;
  color:var(--creme-soft);font-size:17px;line-height:1.55;
}
.garde b{color:var(--terracotta);}

/* Un cas et sa réponse, en bloc, pour qu'on retrouve le bon en balayant. */
.cas{
  background:var(--da-ivoire);
  border:1px solid var(--ligne);border-radius:2px;
  padding:18px 20px;margin-bottom:14px;
}
.cas p{margin-bottom:10px;}
.cas p:last-child{margin-bottom:0;}
.cas .q{
  font-family:var(--pf);font-size:18px;color:var(--ivoire);line-height:1.3;
}

.fiche .tab{overflow-x:auto;margin-bottom:20px;}
.fiche table{border-collapse:collapse;width:100%;min-width:420px;font-size:16px;}
.fiche th,.fiche td{
  text-align:left;padding:11px 14px 11px 0;
  border-bottom:1px solid var(--ligne);vertical-align:top;
}
.fiche th{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);font-weight:500;
}
.fiche td b{white-space:nowrap;}

/* Un tableau à trois colonnes ne tient pas à 375 px : le laisser défiler
   marche, mais personne ne devine qu'il faut pousser du doigt, et la colonne
   utile est justement la dernière. Sous 620 px, chaque ligne devient un bloc
   et chaque cellule porte son libellé par `data-l`. Rien à défiler.        */
@media(max-width:619px){
  .fiche table{min-width:0;}
  .fiche table,.fiche tbody,.fiche tr,.fiche td{display:block;width:auto;}
  .fiche th{display:none;}
  .fiche tr{border-bottom:1px solid var(--ligne);padding:14px 0;}
  .fiche tr:last-child{border-bottom:none;}
  .fiche td{border:none;padding:3px 0;}
  .fiche td[data-l]::before{
    content:attr(data-l);
    display:block;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--taupe);margin-bottom:2px;
  }
  .fiche td b{white-space:normal;}
}

@media(min-width:760px){
  .fiche{font-size:19px;}
}


/* DA du 05/11/2026 : mêmes tokens que l'accueil. Ce bloc gagne sur tout ce qui précède. */
html,body{background:var(--da-papier) url("/da/grain.png")}
body{padding:0 0 64px;color:var(--da-encre);font-size:clamp(1.0625rem,1.03rem + .15vw,1.1875rem)}
.wrap{padding:0 22px;max-width:760px}
.page-da{padding-top:34px}
h1,h2{font-weight:400;text-transform:uppercase;letter-spacing:.04em;text-wrap:balance}
h1{font-size:clamp(1.875rem,1.45rem + 2.4vw,3.75rem);line-height:1.12}
h2{font-size:clamp(1.625rem,1.4rem + 1.2vw,2.625rem);line-height:1.12}
h1 em,.couv-t em,.fiche em,.body p.close,.dire{font-style:normal}
.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:none;color:var(--da-laiton-3)}
.eyebrow.muted{letter-spacing:.14em;color:var(--da-encre-3)}
.bar{margin:0 -22px 0;padding:0 22px;min-height:44px;align-items:center;background:var(--da-vert)}
.bar .eyebrow{color:var(--da-ivoire);font-weight:400}
.bar button{color:var(--da-ivoire);font-size:.8125rem;letter-spacing:.14em;min-height:44px}
.bar button:hover{color:var(--da-laiton-2)}
label{font-size:1rem;letter-spacing:0;text-transform:none;color:var(--da-encre-2)}
input[type=text],input[type=email]{background:var(--da-ivoire);border:1px solid var(--da-encre-3);color:var(--da-encre);border-radius:0;min-height:52px;font-size:1.0625rem}
input[type=text]:focus,input[type=email]:focus{outline:2px solid var(--da-laiton-3);outline-offset:2px}
.cta{background:var(--da-laiton-3);color:var(--da-ivoire);border-radius:0;font-size:.8125rem;letter-spacing:.14em;min-height:52px;padding:16px 26px}
.cta:hover{background:var(--da-laiton-4);letter-spacing:.14em}
.note{font-size:.9375rem;letter-spacing:0;text-transform:none;color:var(--da-encre-3)}
.sect,.opt,.creds,.cas{border-radius:0;border-color:var(--ligne)}
.sect-d,.creds dt,.fiche th,.verrou-s{letter-spacing:.14em;text-transform:none;font-size:.8125rem}
.fiche td[data-l]::before{letter-spacing:.14em;text-transform:none;font-size:.8125rem}
.screen.on{animation:none}
.couv{margin:0 -22px 30px;height:220px;border-bottom:3px solid var(--da-laiton)}
.couv::after{background:rgb(20 8 5 / .62)}
.couv-t{color:var(--da-ivoire);text-shadow:none;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.625rem,1.4rem + 1.2vw,2.625rem);font-weight:400}
.couv-t em{color:var(--da-laiton-2)}
.verrou-voile{background:linear-gradient(180deg,rgb(228 221 207 / .62) 0%,rgb(228 221 207 / .94) 38%,var(--da-papier) 74%)}
.verrou-t{text-transform:uppercase;letter-spacing:.04em;font-weight:400}
.pied-da{margin-top:52px;padding:0}
@media(min-width:760px){
  body{padding:0 0 96px}
  .couv{margin:0 calc(50% - 50vw) 38px;height:300px}
  .couv-t{left:calc(50vw - 358px);right:44px}
  .bar{margin:0 calc(50% - 50vw);padding:0 calc(50vw - 358px)}
}

.porte{position:relative;isolation:isolate;display:grid;align-content:center;min-height:clamp(13rem,32svh,22rem);border-bottom:3px solid var(--da-laiton);color:var(--da-ivoire)}
.porte__bois{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--da-acajou)}
.porte__bois::after{content:"";position:absolute;inset:0;background:rgb(20 8 5 / .62)}
.porte__bois img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 42%}
.porte__rideau,.porte__pilastre{display:none}
.porte__texte{padding:34px 22px;display:grid;justify-items:start;row-gap:14px;max-width:52rem}
.porte__texte h1{color:var(--da-ivoire);margin:0}
@media(min-width:48em){
  .porte{align-content:stretch;grid-template-columns:15% .75rem minmax(0,1fr)}
  .porte__rideau{display:block;grid-column:1;grid-row:1;background:repeating-linear-gradient(90deg,var(--da-vert) 0 1.25rem,var(--da-vert-2) 1.25rem 2.1rem)}
  .porte__pilastre{display:block;grid-column:2;grid-row:1;background:var(--da-laiton)}
  .porte__bois{inset:0 0 0 calc(15% + .75rem)}
  .porte__texte{grid-column:3;grid-row:1;align-self:center;padding:34px 52px}
}
.porte h1 em{color:var(--da-laiton-2)}
.bar{margin-bottom:34px}
.bar + .couv{margin-top:-34px}
.sect-off{opacity:.75}
@media(min-width:760px){.bar{margin-bottom:34px}}
html,body{overflow-x:clip}