/* base.css : le systeme visuel, partage par toutes les pages.
 *
 * Aligné sur personal-brand-visual-os v0.2 : jetons de 06-design-tokens.css,
 * direction de 05-claude-code-page-brief, garde-fous de 08-validation-checklist.
 *
 * Test d'acceptation retenu : la page doit se rapprocher d'un magazine masculin
 * editorial ou d'une marque documentaire premium, pas d'un tunnel de coaching.
 *
 * Monde visuel unique, assume : obsidienne dominante. Pas de theme clair.
 * Ce n'est pas un oubli, c'est la marque.
 */

:root{
  --obsidian:#0B0B0B;
  --charcoal:#191817;
  --bone:#F0E9DD;
  --sand:#D8C9B3;
  --stone:#A89A83;
  --gold:#B58A3A;
  --terracotta:#A9573E;
  --sage:#61705F;

  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:Inter,"Helvetica Neue",Arial,sans-serif;

  --line:rgba(240,233,221,.18);
  --line-faible:rgba(240,233,221,.09);
  --overlay:rgba(11,11,11,.52);

  --page-pad:clamp(1.25rem,5vw,2.5rem);
  --mesure:38rem;

  --space-xs:.5rem; --space-sm:1rem; --space-md:2rem;
  --space-lg:4rem;  --space-xl:8rem;

  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--obsidian); color:var(--bone);
  font-family:var(--font-body); font-size:16px; line-height:1.68;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
[hidden]{display:none!important}
::selection{background:var(--gold); color:var(--obsidian)}

/* le grain : une seule couche, fixe, presque invisible */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
}

.page{max-width:var(--mesure); margin-inline:auto; padding-inline:var(--page-pad)}

h1,h2,h3{font-family:var(--font-display); font-weight:400; margin:0; text-wrap:balance}
h1{font-size:clamp(2.1rem,8.6vw,3.35rem); line-height:1.08; letter-spacing:-.012em}
h2{font-size:clamp(1.55rem,5.4vw,2.05rem); line-height:1.16}
h3{font-size:1.02rem; line-height:1.3}
p{margin:0 0 var(--space-sm)}

.eyebrow{
  font-family:var(--font-body); font-size:.66rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--stone);
}
.rule{width:3rem; height:1px; background:var(--gold); border:0; margin:var(--space-md) 0}

/* ─── ouverture ─── */
.ouverture{padding-block:clamp(3rem,12vw,5.5rem) clamp(2rem,7vw,3rem)}
.ouverture h1{margin-block:var(--space-sm) 0}
.ouverture h1 em{font-style:italic; color:var(--gold)}
.amorce{margin-top:var(--space-sm); color:var(--stone); font-size:1rem; max-width:32ch}

/* ─── visible / invisible : filets, pas cartes ─── */
.contraste{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md);
  margin-block:clamp(2rem,7vw,3rem);
  border-top:1px solid var(--line); padding-top:var(--space-md);
}
.contraste h2{
  font-family:var(--font-body); font-size:.62rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--stone);
  margin-bottom:var(--space-sm);
}
.contraste > div:last-child h2{color:var(--gold)}
.contraste ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.contraste li{font-size:1rem; line-height:1.3}
.contraste > div:first-child li{color:var(--stone)}
.contraste > div:last-child li{color:var(--bone)}

/* ─── image ou video, pleine largeur ─── */
.scene{
  margin-block:clamp(2rem,7vw,3rem); background:var(--charcoal);
  border-top:1px solid var(--line-faible); border-bottom:1px solid var(--line-faible);
}
.scene video{width:100%; height:auto}
.scene-vide{aspect-ratio:4/5; display:grid; place-content:center; padding:var(--space-md); text-align:center}
.scene-vide p{margin:0; color:var(--stone); font-size:.85rem; letter-spacing:.06em}
.plein{margin-inline:calc(var(--page-pad) * -1)}

/* ─── corps ─── */
.bloc{padding-block:clamp(2.2rem,8vw,3.6rem)}
.bloc p{color:var(--stone); font-size:1rem; max-width:36ch}
.bloc p strong{color:var(--bone); font-weight:500}
.bloc h2 + p{margin-top:var(--space-sm)}
.verdict{
  font-family:var(--font-display); font-size:clamp(1.3rem,5vw,1.7rem); line-height:1.24;
  color:var(--bone); max-width:26ch; margin:var(--space-md) 0;
  padding-left:var(--space-sm); border-left:1px solid var(--gold);
}

/* ─── la bascule : aujourd'hui vers la ou ca mene ─── */
.bascule{margin-top:var(--space-md); border-top:1px solid var(--line)}
.bascule .entete{
  display:grid; grid-template-columns:1fr 1.6rem 1fr; gap:var(--space-sm);
  padding-block:.8rem; border-bottom:1px solid var(--line-faible);
  font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--stone);
}
.bascule .entete span:last-child{color:var(--gold)}
.bascule .ligne{
  display:grid; grid-template-columns:1fr 1.6rem 1fr; gap:var(--space-sm);
  align-items:baseline; padding-block:.95rem;
  border-bottom:1px solid var(--line-faible); font-size:.95rem; line-height:1.36;
}
.bascule .de{color:var(--stone)}
.bascule .fleche{color:var(--gold); text-align:center; font-size:.85rem}
.bascule .vers{color:var(--bone)}
.honnete{margin-top:var(--space-sm); font-size:.82rem; color:var(--stone); max-width:42ch}

/* ─── le mécanisme ─── */
.etapes{list-style:none; margin:var(--space-md) 0 0; padding:0; display:grid; gap:var(--space-md)}
.etapes li{display:grid; grid-template-columns:2.4rem 1fr; gap:var(--space-sm); align-items:start}
.num{
  font-family:var(--font-body); font-size:.66rem; font-weight:500; letter-spacing:.14em;
  color:var(--gold); padding-top:.3rem; font-variant-numeric:tabular-nums;
}
.etapes h3{
  font-family:var(--font-body); font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bone); margin-bottom:.45rem;
}
.etapes p{margin:0; font-size:.95rem; color:var(--stone); max-width:38ch}
.ordre{margin-top:var(--space-md); font-size:.85rem; color:var(--stone); max-width:40ch}

/* ─── capture ─── */
.capture{border-top:1px solid var(--line); padding-top:var(--space-md)}
.capture h2{margin-bottom:.4rem}
.capture .aide{margin:0 0 var(--space-md); font-size:.92rem; color:var(--stone); max-width:38ch}
form{display:grid; gap:var(--space-sm); max-width:26rem}
label{font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--stone)}
.champ{display:grid; gap:.4rem}
input[type=email],input[type=text]{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--bone);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  border-radius:0; padding:.6rem 0; transition:border-color .2s ease;
}
input[type=email]:focus,input[type=text]:focus{outline:0; border-bottom-color:var(--gold)}
input:focus-visible,button:focus-visible{outline:1px solid var(--gold); outline-offset:3px}
.accord{display:grid; grid-template-columns:1rem 1fr; gap:.7rem; align-items:start;
        font-size:.8rem; color:var(--stone); line-height:1.45; margin-top:.3rem}
.accord input{margin:.25rem 0 0; accent-color:var(--gold)}
button{
  font-family:var(--font-body); font-weight:500; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
  background:transparent; color:var(--gold);
  border:1px solid var(--gold); border-radius:0; padding:1rem 1.6rem;
  margin-top:var(--space-xs); transition:background-color .25s ease, color .25s ease;
}
button:hover{background:var(--gold); color:var(--obsidian)}
button[disabled]{opacity:.45; cursor:progress}
.erreur{margin:0; font-size:.85rem; color:var(--terracotta)}

/* ─── le rendez-vous ─── */
.rdv{display:grid; gap:var(--space-sm); border-top:1px solid var(--line); padding-top:var(--space-md)}
.rdv p{margin:0; color:var(--stone); font-size:.95rem; max-width:38ch}
/* TidyCal injecte sa propre iframe : ni bordure, ni fond. Le widget se charge
   de sa hauteur, ce qu'une iframe posee a la main ne faisait pas. */
.rdv iframe{width:100%; min-height:620px; border:0; background:transparent}
.rdv .tidycal-embed{min-height:620px}
/* Le lien de secours, sous le widget : si le script TidyCal est bloque par un
   navigateur ou un bloqueur, le visiteur reserve quand meme. */
.rdv .secours{margin-top:var(--space-sm); font-size:.85rem}
.rdv .secours a{
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid var(--gold); padding-bottom:1px;
}
.rdv .secours a:hover{color:var(--bone); border-bottom-color:var(--bone)}

footer{
  border-top:1px solid var(--line-faible); margin-top:var(--space-lg);
  padding-block:var(--space-md) var(--space-lg);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone); display:flex; flex-wrap:wrap; gap:.7rem 1.6rem;
}

/* ─── entrée retenue ─── */
/* Sans JavaScript, tout est visible : l'opacite n'est retiree que si `js` est pose. */
html.js .entre{opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform .7s ease}
html.js .entre.vu{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .entre{opacity:1; transform:none; transition:none}
  *{transition:none!important; animation:none!important}
}

/* ─── l'urgence : le compte des annees ─── */
.urgence{border-top:1px solid var(--line); padding-top:var(--space-md); margin-top:var(--space-md)}
.urgence .compte{
  font-family:var(--font-display); font-size:clamp(1.6rem,6vw,2.2rem); line-height:1.18;
  color:var(--bone); max-width:24ch; margin-bottom:var(--space-sm);
}
.urgence ul{list-style:none; margin:var(--space-sm) 0 0; padding:0; display:grid; gap:.7rem; max-width:40ch}
.urgence li{
  display:grid; grid-template-columns:.75rem 1fr; gap:.8rem; align-items:baseline;
  font-size:.95rem; line-height:1.4; color:var(--stone);
}
/* Un filet court, pas un tiret cadratin : la regle de REGLES_REDACTION vaut
   aussi pour les caracteres que le CSS injecte dans la page. */
.urgence li::before{
  content:""; width:.75rem; height:1px; background:var(--terracotta);
  display:block; transform:translateY(-.35em);
}
.urgence .cout{
  margin-top:var(--space-md); font-family:var(--font-display);
  font-size:clamp(1.15rem,4.6vw,1.45rem); line-height:1.3;
  color:var(--terracotta); max-width:30ch;
}

/* ─── l'onde : ce qui bouge autour ─── */
.onde{display:grid; gap:var(--space-sm); margin-top:var(--space-md)}
.onde > div{
  display:grid; grid-template-columns:7.5rem 1fr; gap:var(--space-sm);
  align-items:baseline; padding-block:.8rem; border-bottom:1px solid var(--line-faible);
}
.onde dt, .onde .quoi{
  font-family:var(--font-body); font-size:.62rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.onde .comment{font-size:.95rem; line-height:1.4; color:var(--stone)}

/* ─── l'offre ─── */
.offre{
  border:1px solid var(--line); padding:var(--space-md) var(--space-sm);
  margin-top:var(--space-md); background:var(--charcoal);
}
.offre .nom{
  font-family:var(--font-display); font-size:clamp(1.5rem,5.6vw,2rem);
  line-height:1.16; color:var(--bone); margin-bottom:.5rem;
}
.offre .quoi{
  font-size:.62rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:var(--space-sm);
  font-family:var(--font-body); display:block;
}
.offre p{color:var(--stone); font-size:.96rem; max-width:40ch}
.offre .piliers{list-style:none; margin:var(--space-md) 0 0; padding:0; display:grid; gap:var(--space-sm)}
.offre .piliers li{display:grid; grid-template-columns:6.5rem 1fr; gap:var(--space-sm); align-items:baseline}
.offre .piliers b{
  font-family:var(--font-body); font-size:.62rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bone);
}
.offre .piliers span{font-size:.93rem; line-height:1.4; color:var(--stone)}
.offre .format{
  margin-top:var(--space-md); padding-top:var(--space-sm); border-top:1px solid var(--line-faible);
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--stone);
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
}
.offre .etapes-audit{list-style:none; margin:var(--space-md) 0 0; padding:0; display:grid; gap:.75rem; counter-reset:a}
.offre .etapes-audit li{
  display:grid; grid-template-columns:1.6rem 1fr; gap:.8rem; align-items:baseline;
  font-size:.95rem; line-height:1.4; color:var(--stone); counter-increment:a;
}
.offre .etapes-audit li::before{
  content:counter(a,decimal-leading-zero); color:var(--gold);
  font-family:var(--font-body); font-size:.66rem; letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
}