/* ═══════════════════════════════════════════════════════════
   FemzLab — DA « AI Notebook / Clean Explainer »
   Source de vérité : EDITOR/DA Femz/Charte Graphique.md
   Ratio visé : 70 % clair · 20 % noir · 7 % gris · 3 % bleu
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:"Montserrat";src:url("/fonts/Montserrat-800-latin.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-700-latin.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Caveat";src:url("/fonts/Caveat-700-latin.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#F7F7F4; --white:#fff; --ink:#050505; --charcoal:#1A1A1A;
  --g-dark:#3A3A3A; --g-mid:#777; --g-light:#D9D9D9;
  --grid:#E5E5E5; --grid-dark:#333;
  --blue:#4286F0; --blue-light:#8EB9F8;

  --titre:"Montserrat","Inter",system-ui,sans-serif;
  --texte:"Inter",system-ui,-apple-system,sans-serif;
  --main:"Caveat",cursive;

  --r-card:40px; --r-small:24px; --r-pill:999px;
  --ombre:0 16px 40px rgba(0,0,0,.14);
  --ombre-forte:0 24px 60px rgba(0,0,0,.22);
  --marge:clamp(1.25rem,5vw,4rem);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--texte);font-size:clamp(1rem,.97rem+.15vw,1.075rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-family:var(--titre);font-weight:800;letter-spacing:-.03em;line-height:1.03}
p{margin:0 0 1rem}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

.saut{position:absolute;left:-9999px;background:var(--ink);color:var(--bg);padding:.8rem 1.3rem;z-index:100;border-radius:var(--r-pill);font-weight:700}
.saut:focus{left:1rem;top:1rem}

/* ─────────── Barre ─────────── */
.barre{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:.75rem var(--marge);
  background:rgba(247,247,244,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--grid);
}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.logo__carre{
  display:grid;place-items:center;width:2rem;height:2rem;
  background:var(--ink);color:var(--bg);border-radius:9px;
  font-family:var(--titre);font-weight:800;font-size:1.05rem;
}
.logo__nom{font-family:var(--titre);font-weight:800;font-size:1.1rem;letter-spacing:-.03em}

.barre__nav{display:flex;gap:clamp(.9rem,2.2vw,1.8rem)}
.barre__nav a{text-decoration:none;font-size:.92rem;font-weight:700;color:var(--g-dark);transition:color .18s}
.barre__nav a:hover{color:var(--blue)}
@media(max-width:820px){.barre__nav{display:none}}

/* ─────────── Boutons pilule ─────────── */
.pill{
  display:inline-block;font-family:var(--texte);font-weight:700;font-size:.95rem;
  text-decoration:none;cursor:pointer;border-radius:var(--r-pill);
  padding:.85rem 1.7rem;border:2px solid transparent;
  transition:transform .15s,background .2s,color .2s,box-shadow .2s;
}
.pill:active{transform:translateY(1px)}
.pill--noir{background:var(--ink);color:var(--bg);padding:.6rem 1.25rem;font-size:.88rem}
.pill--noir:hover{background:var(--charcoal)}
.pill--bleu{background:var(--blue);color:#fff;box-shadow:0 8px 24px rgba(66,134,240,.3)}
.pill--bleu:hover{background:#2f74e0;box-shadow:0 12px 30px rgba(66,134,240,.4)}
.pill--bord{background:transparent;color:var(--ink);border-color:var(--ink)}
.pill--bord:hover{background:var(--ink);color:var(--bg)}
.pill--grand{padding:1.05rem 2.1rem;font-size:1.03rem}
.pill--large{width:100%;padding:1.1rem;font-size:1.03rem;border:0}

.lien-souligne{font-weight:700;font-size:.95rem;color:var(--g-dark);text-decoration:none;border-bottom:2px solid var(--g-light);padding-bottom:2px}
.lien-souligne:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ─────────── Étiquettes et titres ─────────── */
.etiquette{
  display:inline-block;font-family:var(--texte);font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g-mid);margin-bottom:1.1rem;
}
.etiquette--clair{color:var(--blue-light)}

.titre-geant{font-size:clamp(2.2rem,7.5vw,5rem);margin-bottom:1.5rem}
.titre-geant__et{color:var(--blue)}
.titre-gros{font-size:clamp(1.85rem,5.2vw,3.3rem);margin-bottom:1.1rem}

.chapo{max-width:44rem;font-size:clamp(1.02rem,2vw,1.15rem);color:var(--g-dark)}
.chapo--clair{color:rgba(247,247,244,.72)}

/* ─────────── Hero, papier quadrillé ─────────── */
.hero{
  padding:clamp(2.5rem,7vw,5rem) var(--marge) clamp(3rem,7vw,5rem);
  background-color:var(--bg);
  background-image:
    linear-gradient(to right,var(--grid) 2px,transparent 2px),
    linear-gradient(to bottom,var(--grid) 2px,transparent 2px);
  background-size:96px 96px;
}
.hero__dedans{max-width:var(--max);margin:0 auto}
.hero__sous{max-width:38rem;font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--g-dark);margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;margin-bottom:clamp(2.5rem,6vw,4.5rem)}

/* ─────────── Les trois cartes ─────────── */
.trio{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}

.carte{position:relative;padding:clamp(1.6rem,3.5vw,2.2rem);border-radius:var(--r-card);box-shadow:var(--ombre)}
.carte--claire{background:var(--white)}
.carte--noire{background:var(--ink);color:var(--bg)}
.carte__num{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:var(--r-pill);
  font-family:var(--titre);font-weight:800;font-size:1.1rem;margin-bottom:1.1rem;
  background:var(--bg);color:var(--ink);
}
.carte--noire .carte__num{background:var(--blue);color:#fff}
.carte__titre{font-size:1.5rem;margin-bottom:.7rem}
.carte p{margin:0;font-size:.98rem;color:var(--g-dark)}
.carte--noire p{color:rgba(247,247,244,.78)}

/* annotation manuscrite — à utiliser avec modération (charte) */
.note-main{
  position:absolute;font-family:var(--main);font-weight:700;
  font-size:1.5rem;color:var(--blue-light);
  right:1.5rem;bottom:.6rem;transform:rotate(-7deg);
}
.note-main--sombre{position:static;display:inline-block;color:var(--blue);margin-left:.5rem;transform:rotate(-3deg)}

/* ─────────── Blocs ─────────── */
.bloc{padding:clamp(3.5rem,8vw,6.5rem) var(--marge)}
.bloc--gris{background:var(--white)}
.bloc--noir{background:var(--ink);color:var(--bg)}
.entete{max-width:var(--max);margin:0 auto clamp(2.5rem,5vw,3.5rem)}

/* ─────────── Étapes ─────────── */
.etapes{max-width:var(--max);margin:0 auto;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.etape{background:var(--white);border-radius:var(--r-small);padding:1.6rem;border:2px solid var(--grid)}
.etape--fin{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.etape__temps{
  display:inline-block;font-weight:700;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.8rem;
}
.etape--fin .etape__temps{color:var(--blue-light)}
.etape h3{font-size:1.25rem;margin-bottom:.6rem}
.etape p{margin:0;font-size:.95rem;color:var(--g-dark)}
.etape--fin p{color:rgba(247,247,244,.75)}

/* ─────────── Prix ─────────── */
.prix{max-width:var(--max);margin:0 auto;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));align-items:start}

.offre{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg);border-radius:var(--r-card);
  padding:clamp(1.6rem,3.5vw,2.2rem);border:2px solid var(--grid);
}
.offre--phare{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:var(--ombre-forte)}
.offre__ruban{
  position:absolute;top:-.85rem;left:clamp(1.6rem,3.5vw,2.2rem);
  background:var(--blue);color:#fff;font-weight:700;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.35rem .9rem;border-radius:var(--r-pill);
}
.offre__nom{font-size:1.4rem;margin-bottom:1rem}
.offre__prix{display:flex;flex-direction:column;gap:.2rem;padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:2px solid var(--grid)}
.offre--phare .offre__prix{border-bottom-color:rgba(247,247,244,.16)}
.offre__prix b{font-family:var(--titre);font-weight:800;font-size:2.4rem;letter-spacing:-.04em}
.offre__prix span{font-size:.9rem;color:var(--g-mid)}
.offre--phare .offre__prix span{color:rgba(247,247,244,.6)}
.offre ul{display:grid;gap:.65rem;margin-bottom:1.6rem;flex:1}
.offre li{position:relative;padding-left:1.6rem;font-size:.95rem}
.offre li::before{
  content:"";position:absolute;left:0;top:.42em;width:.7rem;height:.7rem;
  border-radius:50%;background:var(--blue);
}
.offre--phare li{color:rgba(247,247,244,.88)}
.prix__pied{max-width:var(--max);margin:1.75rem auto 0;font-size:.88rem;color:var(--g-mid)}

/* ─────────── Raisons ─────────── */
.raisons{max-width:var(--max);margin:0 auto;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.raison{background:var(--charcoal);border-radius:var(--r-card);padding:clamp(1.6rem,3.5vw,2.2rem)}
.raison h3{font-size:1.3rem;margin-bottom:.9rem;color:var(--bg)}
.raison p{font-size:.97rem;color:rgba(247,247,244,.8)}
.raison__appui{
  margin:0;padding-top:1rem;border-top:1px solid rgba(247,247,244,.14);
  font-size:.9rem;color:var(--blue-light)
}

/* ─────────── Audit ─────────── */
.audit{max-width:var(--max);margin:0 auto}
.audit__boite{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;
  background:var(--white);border-radius:var(--r-card);
  padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--ombre);
}
.champ{display:flex;flex-direction:column;gap:.45rem;flex:1 1 12rem}
.champ--large{flex:3 1 17rem}
.champ--court{flex:1 1 8rem}
.champ>span{font-weight:700;font-size:.78rem;letter-spacing:.06em;color:var(--g-dark)}
.champ i{font-style:normal;font-weight:400;color:var(--g-mid)}
.champ input,.champ textarea{
  font-family:var(--texte);font-size:1rem;padding:.85rem 1rem;width:100%;
  border:2px solid var(--g-light);border-radius:var(--r-small);
  background:var(--bg);color:var(--ink);
}
.champ input:focus,.champ textarea:focus{border-color:var(--blue);background:#fff;outline:none}
.champ textarea{resize:vertical}
.audit__boite .pill{flex:0 0 auto;height:3.2rem;border:0}
.audit__note{margin:1rem 0 0;font-size:.86rem;color:var(--g-mid);max-width:44rem}

/* fiche de résultat */
#audit-sortie{max-width:var(--max);margin:1.5rem auto 0}
.fiche{
  background:var(--white);border-radius:var(--r-card);
  padding:clamp(1.5rem,3.5vw,2.3rem);box-shadow:var(--ombre);
  border-left:8px solid var(--blue);
  animation:monte .4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fiche__tete{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;justify-content:space-between;padding-bottom:1rem;margin-bottom:1.25rem;border-bottom:2px solid var(--grid)}
.fiche__nom{font-family:var(--titre);font-weight:800;font-size:clamp(1.3rem,3.4vw,1.8rem)}
.fiche__meta{font-size:.8rem;color:var(--g-mid);margin:0}
.fiche__note{font-family:var(--titre);font-weight:800;font-size:1rem;padding:.4rem .9rem;border-radius:var(--r-pill);white-space:nowrap}
.note--rouge{background:#FBE9E3;color:#A8390F}
.note--ambre{background:#FCF3DC;color:#7A5A12}
.note--vert{background:#E4F0EA;color:#1D6B4E}
.constats{display:grid;gap:.9rem;margin-bottom:1.5rem}
.constat-ligne{display:flex;gap:.85rem;align-items:flex-start;font-size:.97rem}
.constat-ligne__marque{
  flex:0 0 auto;width:1.4rem;height:1.4rem;margin-top:.15rem;border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;font-weight:700;color:#fff;
}
.marque--ko{background:#C4451B}.marque--ok{background:#1D6B4E}.marque--info{background:var(--g-mid)}
.fiche__pied{padding-top:1.25rem;border-top:2px solid var(--grid);display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.fiche__pied p{margin:0;font-size:.95rem;color:var(--g-dark);flex:1 1 16rem}

.chargement{display:flex;align-items:center;gap:.8rem;font-size:.92rem;color:var(--g-mid);padding:1.5rem 0}
.chargement::before{content:"";width:1rem;height:1rem;border:3px solid var(--g-light);border-top-color:var(--blue);border-radius:50%;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.erreur-audit{background:#FCF3DC;border-radius:var(--r-small);padding:1.2rem 1.4rem;font-size:.95rem;color:#6B531A}
.erreur-audit p:last-child{margin:0}

/* ─────────── Preuves ─────────── */
.preuves{max-width:var(--max);margin:0 auto 2rem;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.chiffre{background:var(--bg);border-radius:var(--r-card);padding:clamp(1.6rem,3.5vw,2.2rem);border:2px solid var(--grid)}
.chiffre b{display:block;font-family:var(--titre);font-weight:800;font-size:clamp(2.6rem,7vw,3.8rem);letter-spacing:-.05em;line-height:1;margin-bottom:.8rem}
.chiffre span{font-size:.97rem;color:var(--g-dark)}
.chiffre a{color:var(--blue);font-weight:700}

.travaux{max-width:var(--max);margin:0 auto;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.travaux li{background:var(--bg);border-radius:var(--r-small);padding:1.2rem 1.4rem;border:2px solid var(--grid)}
.travaux a{display:block;font-family:var(--titre);font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none;margin-bottom:.25rem}
.travaux a:hover{color:var(--blue)}
.travaux span{font-size:.9rem;color:var(--g-mid)}
.preuves__note{max-width:var(--max);margin:1.5rem auto 0;font-size:.92rem;color:var(--g-mid)}

/* ─────────── FAQ ─────────── */
.faq{max-width:52rem;margin:0 auto}
.qr{background:var(--white);border-radius:var(--r-small);margin-bottom:.75rem;border:2px solid var(--grid)}
.qr summary{
  cursor:pointer;list-style:none;padding:1.2rem 3rem 1.2rem 1.4rem;position:relative;
  font-family:var(--titre);font-weight:800;font-size:clamp(1rem,2.4vw,1.15rem);letter-spacing:-.02em;
}
.qr summary::-webkit-details-marker{display:none}
.qr summary::after{
  content:"+";position:absolute;right:1.3rem;top:50%;transform:translateY(-50%);
  font-family:var(--titre);font-weight:800;font-size:1.5rem;color:var(--blue);
}
.qr[open] summary::after{content:"−"}
.qr[open]{border-color:var(--blue)}
.qr p{margin:0;padding:0 1.4rem 1.4rem;font-size:.97rem;color:var(--g-dark)}

/* ─────────── Contact ─────────── */
.contact{max-width:44rem;margin:0 auto;text-align:center}
.contact .entete,.contact .chapo{margin-inline:auto}
.contact__form{text-align:left;margin-top:2.5rem}
.contact__grille{display:grid;gap:1rem;margin-bottom:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.contact__form>.champ{margin-bottom:1.4rem}
.contact__form .champ>span{color:var(--blue-light)}
.contact__form input,.contact__form textarea{
  background:var(--charcoal);border-color:#2E2E2E;color:var(--bg);
}
.contact__form input::placeholder,.contact__form textarea::placeholder{color:#6A6A6A}
.contact__form input:focus,.contact__form textarea:focus{background:#212121;border-color:var(--blue)}
.rgpd{font-size:.83rem;color:var(--g-mid);margin:1rem 0 0}
.rgpd a{color:var(--blue-light)}
.contact__direct{margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(247,247,244,.14);font-size:.95rem;color:rgba(247,247,244,.7)}
.contact__direct a{color:var(--blue-light);font-weight:700}
.a-remplir{opacity:.5;font-style:italic}
.merci{background:var(--charcoal);border-radius:var(--r-card);padding:2.2rem;text-align:center;animation:monte .4s cubic-bezier(.2,.7,.3,1) both}
.merci h3{font-size:1.6rem;color:var(--bg);margin-bottom:.8rem}
.merci p{color:rgba(247,247,244,.8);margin:0}
.merci a{color:var(--blue-light)}

/* ─────────── Pied ─────────── */
.pied{background:var(--ink);color:rgba(247,247,244,.6);padding:clamp(2.5rem,6vw,4rem) var(--marge);border-top:1px solid rgba(247,247,244,.1)}
.pied__dedans{max-width:var(--max);margin:0 auto}
.pied .logo{margin-bottom:1rem}
.pied .logo__carre{background:var(--bg);color:var(--ink)}
.pied .logo__nom{color:var(--bg)}
.pied p{font-size:.92rem;margin:0 0 1.25rem}
.pied nav{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.5rem}
.pied nav a{color:rgba(247,247,244,.75);text-decoration:none;font-size:.9rem;font-weight:700}
.pied nav a:hover{color:var(--blue-light)}
.pied__sources{font-size:.76rem;line-height:1.7;color:rgba(247,247,244,.35)}

/* ─────────── Révélation ─────────── */
.reveler{opacity:0;transform:translateY(20px)}
.reveler.vu{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveler{opacity:1;transform:none}
}