@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-mono-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/courier-prime-latin-700-normal.woff2) format("woff2")}

:root{
  --anthracite:#2A2D2A;
  --creme:#F1EEE3;
  --laiton:#9A7B4F;        /* grands titres et décors seulement */
  --laiton-texte:#7A5F38;  /* petit texte laiton sur crème */
  --laiton-clair:#C9A876;  /* petit texte laiton sur anthracite */
  --gris-texte:#4A4740;
  --gris:#6E675C;
  --filet:#DAD4C4;
  --creme-sur-sombre:#D8D3C6;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --nom:"Courier Prime","Courier New",monospace;
  --gouttiere:16px;
  --largeur:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--anthracite);font-family:var(--mono);font-size:15px;line-height:1.6}
a{color:inherit}
:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}
.conteneur{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}
.rubrique{margin:0;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:1px;text-decoration:none;border:2px solid var(--laiton);white-space:nowrap}
.bouton-clair{background:var(--creme);color:var(--anthracite)}
.bouton-clair:hover{background:#fff}
.bouton-sombre{background:var(--anthracite);color:var(--creme)}
.bouton-sombre:hover{background:#3a3e3a}

/* Bandeaux anthracite avec repères de coupe laiton dans les angles */
.sombre{position:relative;background:var(--anthracite);color:var(--creme)}
.reperes{position:absolute;inset:12px;pointer-events:none}
.reperes::before,.reperes::after,.reperes>span::before,.reperes>span::after{content:"";position:absolute;width:22px;height:22px;border-color:var(--laiton);border-style:solid;border-width:0}
.reperes::before{top:0;left:0;border-top-width:2px;border-left-width:2px}
.reperes::after{top:0;right:0;border-top-width:2px;border-right-width:2px}
.reperes>span::before{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.reperes>span::after{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}

/* En-tête */
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;padding-bottom:28px}
.marque{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}
.marque>svg{flex-shrink:0;width:52px;height:52px}
.marque-texte{display:flex;flex-direction:column;gap:4px;min-width:0}
.nom{font-family:var(--nom);font-weight:700;font-size:20px;letter-spacing:5px;line-height:1.1}
.signature{font-size:10px;font-weight:500;letter-spacing:1.5px;line-height:1.45;color:var(--laiton-clair);text-transform:uppercase}
.entete .bouton{min-height:44px;padding:0 14px;font-size:13px}

/* Menu des sections, fixé en haut au défilement */
.menu{position:sticky;top:0;z-index:10;background:var(--creme);border-bottom:1px solid var(--anthracite)}
.menu ul{margin:0;padding:0;list-style:none;display:flex;gap:4px 24px;overflow-x:auto;scrollbar-width:none}
.menu ul::-webkit-scrollbar{display:none}
.menu a{display:flex;align-items:center;min-height:48px;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--gris-texte)}
.menu a:hover{color:var(--anthracite);text-decoration:underline;text-decoration-color:var(--laiton);text-underline-offset:6px}
.menu a.menu-rdv{color:var(--laiton-texte);font-weight:700}
.menu li:last-child{position:sticky;right:0;margin-left:auto;padding-left:16px;background:linear-gradient(to right,transparent,var(--creme) 16px)}
main section[id]{scroll-margin-top:56px}

/* Accueil */
.accueil{padding:48px 0 40px}
.accueil h1{margin:0;font-size:clamp(28px,7vw,48px);font-weight:600;line-height:1.2;letter-spacing:-0.5px}
.accueil h1 span{color:var(--laiton);display:block}
.accueil .explique{margin:20px 0 0;max-width:640px;font-size:16px;line-height:1.65;color:var(--gris-texte)}
.descripteur{margin:28px 0 0;padding-top:12px;border-top:1px solid var(--anthracite);display:flex;flex-direction:column;gap:4px 18px;list-style:none;padding-left:0;font-size:11.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gris)}
.descripteur li+li::before{content:none}

/* Vos outils, reliés */
.relies{padding:8px 0 40px}
.relies .rubrique{padding-bottom:10px;border-bottom:2px solid var(--laiton)}
.schema{margin:20px 0 0;display:grid;grid-template-columns:1fr;justify-items:stretch}
.outils{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.outil{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid var(--anthracite);border-radius:6px;font-size:14px;font-weight:600}
.etat{font-size:10.5px;font-weight:700;letter-spacing:1.5px;padding:2px 7px;border-radius:3px;white-space:nowrap}
.etat-relie{background:var(--laiton-texte);color:var(--creme)}
.etat-remplace{background:var(--filet);color:var(--anthracite)}
.etat-cree{background:var(--anthracite);color:var(--creme)}
.liens{display:flex;justify-content:center;height:28px}
.liens span{display:none}
.liens::before{content:"";border-left:2px dashed var(--laiton)}
.cerveau{margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:16px;border-radius:8px;background:var(--anthracite);color:var(--creme);text-align:center}
.cerveau strong{font-family:var(--nom);font-weight:700;font-size:17px;letter-spacing:2px}
.cerveau span{font-size:13px;line-height:1.45;color:var(--creme-sur-sombre)}
.legende{margin:14px 0 0;max-width:720px;font-size:13px;line-height:1.55;color:var(--gris)}

/* Ça vous parle ? */
.situations{padding:40px 0}
.situations ul{margin:12px 0 0;padding:12px 0 0;list-style:none;border-top:1px solid var(--anthracite);display:grid;grid-template-columns:1fr;column-gap:40px;row-gap:6px}
.situations li{font-size:14.5px;line-height:1.5}

/* Le constat */
.constat{padding:0 0 40px}
.constat-grille{margin-top:12px;display:grid;grid-template-columns:1fr;gap:20px}
.constat-grille>div{border-top:2px solid var(--laiton);padding-top:12px}
.constat h3{margin:0;font-size:15px;font-weight:700}
.constat p{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--gris-texte)}

/* Méthode */
.methode{padding:40px 0 48px}
.etapes{margin:12px 0 0;padding:0;list-style:none;border-top:1px solid var(--anthracite)}
.etape{display:grid;grid-template-columns:1fr;gap:10px;padding:20px 0;border-bottom:1px solid var(--filet)}
.etape-titre{display:flex;align-items:baseline;gap:12px}
.numero{font-family:var(--nom);font-weight:700;font-size:26px;color:var(--laiton);line-height:1}
.etape h3{margin:0;font-size:17px;font-weight:700}
.colonne-titre{display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gris)}
.etape p{margin:0;font-size:14px;line-height:1.55;color:var(--gris-texte)}
.etape p.obtenez{font-weight:600;color:var(--anthracite)}
.etape p.obtenez strong{color:var(--laiton-texte)}
.demo{margin:20px 0 0;display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--gris)}
.demo::before{content:"";flex-shrink:0;width:9px;height:9px;margin-top:5px;background:var(--laiton);transform:rotate(45deg)}

/* Pourquoi moi */
.pourquoi{padding:8px 0 48px}
.pourquoi .rubrique{padding-bottom:10px;border-bottom:2px solid var(--laiton)}
.pourquoi-grille{margin-top:16px;display:grid;grid-template-columns:1fr;gap:24px}
.pourquoi p{margin:0;font-size:14px;line-height:1.6;color:var(--gris-texte)}
.pourquoi p+p{margin-top:12px}
.pourquoi p.fort{font-weight:600;color:var(--anthracite)}
.resultats{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.resultats li{padding-left:12px;border-left:2px solid var(--laiton);font-size:14px;line-height:1.5;color:var(--gris-texte)}

/* Faire le point */
.rendez-vous{padding:56px 0}
.rendez-vous h2{margin:0;font-size:clamp(26px,6vw,36px);font-weight:600;line-height:1.2}
.rendez-vous p{margin:16px 0 0;max-width:620px;font-size:16px;line-height:1.65;color:var(--creme-sur-sombre)}
.rdv-choix{margin-top:28px;display:grid;grid-template-columns:1fr;gap:12px;max-width:620px}
.rdv{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:12px 20px;background:var(--creme);color:var(--anthracite);border:2px solid var(--laiton);font-size:15px;font-weight:600;letter-spacing:.5px;text-decoration:none}
.rdv span{font-size:12px;font-weight:500;letter-spacing:1px;color:var(--laiton-texte)}
.rdv:hover{background:#fff}
.rendez-vous p.rdv-contact{margin:28px 0 0;padding:16px 0 0;border-top:1px solid #4A4D4A;font-size:14px}
.rdv-contact a{color:var(--creme);text-underline-offset:3px;text-decoration-color:var(--laiton)}
.rdv-contact a:hover{color:#fff}

/* Pied de page */
.pied{padding:28px 0 12px}
.pied-ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;border-top:2px solid var(--laiton);padding-top:14px}
.pied-signature{display:flex;align-items:center;gap:14px;font-size:11.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase}
.pied-signature svg{flex-shrink:0}
.pied a{font-size:13px;color:var(--gris);text-underline-offset:3px}
.pied a:hover{color:var(--anthracite)}

/* Mentions légales */
.mentions{padding:24px 0 48px;font-size:12.5px;line-height:1.6;color:var(--gris-texte)}
.mentions h1,.mentions h2{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--anthracite)}
.mentions h3{margin:14px 0 2px;font-size:12.5px;font-weight:700;color:var(--anthracite)}
.mentions p{margin:0;max-width:720px}

@media (min-width:720px){
  :root{--gouttiere:40px}
  .entete .conteneur{padding-top:36px;padding-bottom:36px}
  .marque>svg{width:64px;height:64px}
  .nom{font-size:24px}
  .signature{font-size:11px;letter-spacing:2px}
  .entete .bouton{min-height:48px;padding:0 22px;font-size:14px}
  .accueil{padding:72px 0 56px}
  .descripteur{flex-direction:row;flex-wrap:wrap}
  .descripteur li+li::before{content:"·";margin-right:18px;color:var(--laiton-texte)}
  .situations ul{grid-template-columns:1fr 1fr}
  .constat-grille{grid-template-columns:repeat(3,1fr);gap:24px}
  .etape{grid-template-columns:200px 1fr 1fr;gap:24px}
  .etape-titre{flex-direction:column;gap:6px}
  .rendez-vous{padding:80px 0}
  .rdv-choix{grid-template-columns:1fr 1fr}
  .schema{grid-template-columns:minmax(0,1fr) 40px 230px 40px minmax(0,1fr);align-items:stretch}
  .liens{height:auto;flex-direction:column;justify-content:space-around}
  .liens::before{content:none}
  .liens span{display:block;border-top:2px dashed var(--laiton)}
  .pourquoi-grille{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:479px){
  .entete .bouton{display:none}
  .entete .conteneur{padding-left:28px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}