/* CarnetWash — pages métier et tarifs (générées par scripts/generer-pages.php).
   Même direction artistique que l'accueil : carbone, blanc cassé, un seul bleu. */
:root{
  --bg:#0C0E11; --bg2:#07080A; --panel:#11141A; --ink:#F2F4F7; --soft:#98A1AE; --dim:#646D7A;
  --accent:#2F7BFF; --accent-soft:#6BA2FF; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --ok:#3DD68C;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:
    radial-gradient(1000px 560px at 50% -8%, rgba(47,123,255,.12), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color:var(--ink); font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 20px; }
.etroit{ max-width:780px; }

/* ---------- en-tête ---------- */
.tete{ position:sticky; top:0; z-index:5; background:rgba(12,14,17,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.tete .wrap{ display:flex; align-items:center; gap:22px; height:64px; }
.logo{ font-family:'Archivo',sans-serif; font-weight:800; letter-spacing:-.03em; font-size:1.1rem; text-decoration:none; display:inline-flex; align-items:center; gap:8px; margin-right:auto; }
.logo i{ width:9px; height:9px; border-radius:2px; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.logo span{ color:var(--soft); font-weight:600; }
.tete nav{ display:flex; gap:20px; font-size:.88rem; color:var(--soft); }
.tete nav a{ text-decoration:none; }
.tete nav a:hover, .tete nav a[aria-current]{ color:var(--ink); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:.92rem; text-decoration:none; white-space:nowrap; transition:transform .2s ease, background .2s ease; }
.btn-plein{ background:var(--accent); color:#fff; box-shadow:0 12px 30px -14px rgba(47,123,255,.6); }
.btn-plein:hover{ background:#3E88FF; transform:translateY(-1px); }
.btn-ligne{ border:1px solid var(--line-2); color:var(--ink); }
.btn-ligne:hover{ border-color:var(--soft); }
.tete .btn{ padding:9px 16px; font-size:.84rem; }
.tete .connexion{ font-size:.86rem; color:var(--soft); text-decoration:none; }
@media (max-width:860px){ .tete nav, .tete .connexion{ display:none; } }
/* Téléphone : un bouton ‹ au bord gauche (voir retour.js). Il revient à la
   page précédente du site, ou à l'accueil quand on arrive de Google. */
.tete-retour{ display:none; }
@media (max-width:860px){
  .tete .wrap{ gap:12px; }
  .tete-retour{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; height:40px;
    border-radius:12px; border:1px solid var(--line-2); background:rgba(255,255,255,.05); color:var(--ink);
    transition:background .15s ease, transform .15s ease;
  }
  .tete-retour:active{ transform:scale(.92); }
}

/* ---------- fil d'Ariane ---------- */
.fil{ font-size:.8rem; color:var(--dim); padding:22px 0 0; }
.fil a{ text-decoration:none; color:var(--soft); }
.fil a:hover{ color:var(--ink); }

/* ---------- héros ---------- */
.heros{ padding:44px 0 56px; }
.sur-titre{ display:inline-flex; align-items:center; gap:12px; font-family:'Roboto Mono',monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); }
.sur-titre::before{ content:""; width:26px; height:1px; background:var(--accent); }
h1, h2, h3{ font-family:'Archivo',sans-serif; font-weight:700; letter-spacing:-.03em; line-height:1.1; margin:0; }
h1{ font-size:clamp(2rem,5vw,3.4rem); margin:18px 0 18px; max-width:18ch; }
.chapo{ color:var(--soft); font-size:clamp(1rem,1.4vw,1.14rem); max-width:62ch; margin:0 0 28px; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; }
.rassurance{ margin:16px 0 0; font-size:.84rem; color:var(--dim); }

/* ---------- encadré ---------- */
.encadre{ border:1px solid var(--line-2); border-left:3px solid var(--accent); background:rgba(47,123,255,.06); border-radius:12px; padding:16px 20px; margin:0 0 40px; color:var(--soft); font-size:.94rem; }
.encadre strong{ color:var(--ink); }

/* ---------- sections ---------- */
.bloc{ padding:40px 0; border-top:1px solid var(--line); }
.bloc h2{ font-size:clamp(1.45rem,2.6vw,2rem); margin:0 0 16px; max-width:28ch; }
.bloc p{ color:var(--soft); margin:0 0 14px; max-width:68ch; }
.bloc p strong{ color:var(--ink); font-weight:600; }
.puces{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:10px; max-width:68ch; }
.puces li{ position:relative; padding-left:26px; color:var(--soft); }
.puces li::before{ content:""; position:absolute; left:0; top:.62em; width:12px; height:2px; background:var(--accent); }
.puces li strong{ color:var(--ink); font-weight:600; }
/* Étapes numérotées (guides pratiques) : le numéro remplace le tiret. */
ol.puces{ counter-reset:etape; }
ol.puces + p{ margin-top:16px; }
ol.puces li{ counter-increment:etape; padding-left:32px; }
ol.puces li::before{ content:counter(etape); top:.05em; width:22px; height:22px; border-radius:50%; background:rgba(47,123,255,.16); color:var(--ink); font-size:.78rem; font-weight:700; display:grid; place-items:center; }
.pro-seul{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:.7rem; font-weight:600; letter-spacing:.02em; background:rgba(47,123,255,.14); color:var(--accent-soft); vertical-align:2px; }

/* ---------- cartes (problèmes, étapes) ---------- */
.cartes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:6px 0 0; }
.carte{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; }
.carte h3{ font-size:1.05rem; margin:0 0 8px; letter-spacing:-.02em; }
.carte p{ font-size:.92rem; margin:0; }
.carte .num{ font-family:'Roboto Mono',monospace; font-size:.72rem; color:var(--accent); letter-spacing:.14em; display:block; margin-bottom:10px; }

/* ---------- formules ---------- */
.formules{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:8px; }
.formule{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px; display:flex; flex-direction:column; }
.formule.pro{ border-color:rgba(47,123,255,.55); box-shadow:0 30px 60px -40px rgba(47,123,255,.6); }
.formule .etiquette{ font-family:'Roboto Mono',monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); }
.formule .prix{ font-family:'Archivo',sans-serif; font-weight:800; font-size:2.6rem; letter-spacing:-.04em; margin:6px 0 2px; }
.formule .prix em{ font-style:normal; font-size:1rem; color:var(--soft); font-weight:600; letter-spacing:0; }
.formule .pour{ color:var(--soft); font-size:.9rem; margin:0 0 16px; }
.formule ul{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:9px; font-size:.92rem; }
.formule li{ position:relative; padding-left:24px; }
.formule li::before{ content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700; }
.formule li.non{ color:var(--dim); }
.formule li.non::before{ content:"–"; color:var(--dim); }
.formule .btn{ margin-top:auto; }
.note{ font-size:.82rem; color:var(--dim); margin:12px 0 0; }

/* ---------- tableau comparatif ---------- */
.tableau{ width:100%; border-collapse:collapse; font-size:.92rem; margin-top:8px; }
.tableau th, .tableau td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.tableau th{ color:var(--soft); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }
.tableau td:not(:first-child), .tableau th:not(:first-child){ text-align:center; white-space:nowrap; }
.tableau td:first-child{ color:var(--ink); }
.defile{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- FAQ ---------- */
.faq details{ border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary{ cursor:pointer; list-style:none; padding:14px 30px 14px 0; font-weight:600; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:10px; font-size:1.3rem; color:var(--accent); font-weight:400; }
.faq details[open] summary::after{ content:"−"; }
.faq details p{ color:var(--soft); margin:0 0 16px; max-width:70ch; }

/* ---------- liens connexes ---------- */
.connexes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.connexes a{ display:block; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; transition:border-color .2s ease; }
.connexes a:hover{ border-color:var(--accent); }
.connexes b{ display:block; font-family:'Archivo',sans-serif; letter-spacing:-.02em; margin-bottom:4px; }
.connexes span{ color:var(--soft); font-size:.88rem; }

/* ---------- appel final ---------- */
.appel{ text-align:center; padding:64px 0 72px; border-top:1px solid var(--line); }
.appel h2{ font-size:clamp(1.6rem,3.4vw,2.4rem); max-width:22ch; margin:0 auto 14px; }
.appel p{ color:var(--soft); margin:0 auto 26px; max-width:52ch; }
.appel .actions{ justify-content:center; }

/* ---------- pied de page ---------- */
.pied{ border-top:1px solid var(--line); padding:44px 0 36px; font-size:.88rem; color:var(--soft); }
.pied-grille{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px; }
.pied-grille p{ margin:10px 0 0; max-width:34ch; }
.pied h2{ font-family:'Roboto Mono',monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); font-weight:500; margin:0 0 14px; }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pied a{ text-decoration:none; }
.pied a:hover{ color:var(--ink); }
.pied-bas{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line); color:var(--dim); font-size:.8rem; }
@media (max-width:760px){ .pied-grille{ grid-template-columns:1fr 1fr; } .pied-grille > div:first-child{ grid-column:1 / -1; } }

/* ---------- guides (/guides, /guide-…) ---------- */
.guide-tete{ padding-bottom:28px; }
.guide-date{ margin:0; font-size:.84rem; color:var(--dim); }
.sommaire{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin:0 0 8px; }
.sommaire p{ margin:0 0 8px; font-family:'Roboto Mono',monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); }
.sommaire ol{ margin:0; padding-left:20px; display:grid; gap:4px; }
.sommaire a{ color:var(--soft); text-decoration:none; }
.sommaire a:hover{ color:var(--ink); text-decoration:underline; }
article .bloc p, article .bloc li{ max-width:70ch; }
article .bloc a{ color:var(--accent-soft); }
/* Dans un guide, les tableaux portent du texte : retour à la ligne et alignement à gauche. */
article .tableau td, article .tableau th, article .tableau td:not(:first-child), article .tableau th:not(:first-child){ white-space:normal; text-align:left; }
article .encadre p{ margin:0 0 8px; } article .encadre p:last-child{ margin:0; }

/* ---------- /nouveautes ---------- */
.nouveautes-jour h2{ font-family:'Roboto Mono', monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
.nouveautes-liste{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:12px; max-width:760px; }
.nouveaute{ padding:16px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); }
.nouveaute h3{ margin:8px 0 4px; font-size:1.02rem; }
.nouveaute p{ margin:0; color:var(--soft); line-height:1.55; }
.nouveaute-type{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:800; }
.nouveaute-type.nouveau{ background:rgba(47,123,255,.18); color:#BFD6FF; }
.nouveaute-type.amelioration{ background:rgba(74,222,128,.14); color:#86EFAC; }
.nouveaute-type.correction{ background:rgba(245,184,75,.14); color:#F8C870; }
.nouveaute-pro{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; font-size:.68rem; font-weight:800; color:#fff; background:linear-gradient(120deg, #2F7BFF, #8A5CFF); }