/* ==========================================================================
   SECTORWEB — Bibliothèque de sections
   Complément de styles-v2.css · composants de section réutilisables
   ========================================================================== */

/* ============ HEROS ============ */
.hero-c{padding:clamp(56px,7vw,84px) 0;text-align:center}
.hero-c h1{margin:0 auto 20px;max-width:17ch}
.hero-c .sub{font-size:16px;line-height:1.65;color:var(--slate);max-width:54ch;margin:0 auto 30px}
.hero-c .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.hero-split{padding:clamp(48px,6vw,72px) 0}
.hero-split .in{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero-split h1{max-width:15ch;margin:20px 0 18px}
.hero-split .sub{font-size:16px;line-height:1.65;color:var(--slate);max-width:50ch;margin-bottom:28px}
.hero-split .row{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:980px){.hero-split .in{grid-template-columns:minmax(0,1fr);gap:44px}}

.hero-edit{padding:clamp(56px,7vw,88px) 0;text-align:center}
.hero-edit .kicker{display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--f-mono);font-size:12px;color:var(--slate);margin-bottom:22px}
.hero-edit .kicker i{width:26px;height:1px;background:var(--gridline);display:block}
.hero-edit h1{max-width:14ch;margin:0 auto 18px}
.hero-edit .sub{font-size:16px;color:var(--slate);max-width:46ch;margin:0 auto}

.trust-line{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:36px;font-size:13px;color:var(--slate)}
.trust-line b{color:var(--ink);font-weight:500}
.trust-line .sep{width:1px;height:14px;background:var(--gridline);display:block}

/* Étiquettes techniques aux coins */
.corner-frame{position:relative}
.corner-tags{position:absolute;inset:0;pointer-events:none}
.corner-tags span{position:absolute;font-family:var(--f-mono);font-size:11px;color:var(--mist);letter-spacing:.04em}
.corner-tags .tl{top:14px;left:0}
.corner-tags .tr{top:14px;right:0}
.corner-tags .bl{bottom:14px;left:0}
.corner-tags .br{bottom:14px;right:0}
@media(max-width:820px){.corner-tags{display:none}}

/* ============ CARTE D'EXPERTISE (.card.exp) ============ */
.exp{display:flex;flex-direction:column;align-items:flex-start;gap:14px;transition:border-color .16s}
.exp:hover{border-color:var(--stone)}
.exp h3{font-size:16.5px;font-weight:500;line-height:1.3;letter-spacing:-.008em}
.exp p{font-size:14px;color:var(--slate);line-height:1.6}
.more{margin-top:auto;padding-top:4px;font-family:var(--f-mono);font-size:12.5px;color:var(--ember);display:inline-flex;align-items:center;gap:6px}
.exp:hover .more{color:var(--ember)}

/* ============ MENU DÉROULANT DE NAVIGATION ============ */
/* Le panneau se positionne sur .nav-in, pas sur l'onglet : il ne peut plus déborder. */
.nav-in{position:relative}
.has-menu{position:static}
.has-menu > a{display:inline-flex;align-items:center;gap:5px}
.has-menu > a::after{content:"⌄";font-size:11px;line-height:1;transform:translateY(-2px);color:var(--slate)}
.menu{position:absolute;top:calc(100% + 8px);left:var(--pad-x);right:var(--pad-x);width:auto;max-width:680px;background:var(--canvas);border:1px solid var(--gridline);border-radius:var(--r-card);box-shadow:var(--sh-lift);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility .16s;z-index:120}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu a{display:flex;gap:12px;padding:12px;border-radius:10px;align-items:flex-start}
.menu a:hover{background:var(--vellum);color:var(--ink)}
.menu .ico-circle{width:32px;height:32px}
.menu .ico-circle svg{width:15px;height:15px}
.menu .t{font-size:14px;font-weight:500;line-height:1.3}
.menu .d{font-size:12.5px;color:var(--slate);line-height:1.45;margin-top:3px}
@media(max-width:920px){.menu{display:none}}

/* ============ RÉSULTAT DE RECHERCHE (visuel de hero) ============ */
.serp{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--canvas);overflow:hidden;box-shadow:var(--sh-card)}
.serp-h{padding:14px 18px;border-bottom:1px solid var(--gridline);background:var(--vellum);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.serp-q{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:13px;color:var(--ink);min-width:0}
.serp-q .mag{color:var(--stone);font-size:12px;flex-shrink:0}
.serp-row{display:grid;grid-template-columns:26px 1fr 54px;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--gridline)}
.serp-row:last-of-type{border-bottom:0}
.serp-row .pos{font-family:var(--f-mono);font-size:12px;color:var(--mist);text-align:center}
.serp-row .u{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--slate)}
.serp-row .t{display:block;font-size:14px;color:var(--graphite);line-height:1.35;margin-top:3px}
.serp-row .bars{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.serp-row .bars i{display:block;height:3px;width:100%;border-radius:var(--r-pill);background:var(--gridline)}
.serp-row.top1{background:var(--vellum)}
.serp-row.top1 .pos{color:#fff;background:var(--ember);border-radius:var(--r-pill);padding:3px 0;font-weight:500}
.serp-row.top1 .t{color:var(--ink);font-weight:500}
.serp-row.top1 .u{color:var(--ember)}
.serp-row.top1 .bars i{background:var(--ember)}
.serp-foot{padding:13px 18px;border-top:1px solid var(--gridline);background:var(--vellum);font-family:var(--f-mono);font-size:11.5px;color:var(--slate);display:flex;align-items:center;gap:9px;line-height:1.5}
.serp-foot .d{width:5px;height:5px;border-radius:var(--r-pill);background:var(--ember);flex-shrink:0}

/* ============ PREUVE ============ */
.logo-marquee{border-top:1px solid var(--gridline);border-bottom:1px solid var(--gridline);background:var(--vellum);overflow:hidden;padding:20px 0}
.logo-marquee .lead-in{text-align:center;font-size:13.5px;color:var(--slate);margin-bottom:16px}
.logo-marquee .lead-in b{color:var(--ink);font-weight:500}
.lm-track{display:flex;width:max-content;animation:lm 42s linear infinite}
.lm-track > span{padding:0 26px;font-size:15px;font-weight:500;color:var(--ink);opacity:.5;white-space:nowrap}
@keyframes lm{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.lm-track{animation:none}}

.statband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--gridline);border-bottom:1px solid var(--gridline)}
.statband > div{padding:32px 24px;border-right:1px solid var(--gridline)}
.statband > div:last-child{border-right:0}
.statband .v{font-size:clamp(30px,3.4vw,42px);font-weight:500;letter-spacing:-.025em;line-height:1}
.statband .v em{font-style:normal;font-size:16px;color:var(--slate)}
.statband .v.hl{color:var(--ember)}
.statband .l{font-size:13px;color:var(--slate);margin-top:8px;line-height:1.45;max-width:22ch}
@media(max-width:860px){.statband{grid-template-columns:repeat(2,minmax(0,1fr))}.statband > div:nth-child(2n){border-right:0}.statband > div:nth-child(-n+2){border-bottom:1px solid var(--gridline)}}

/* Grille plutôt que colonnes CSS : avec « columns », les quatre avis se
   répartissent en cascade et de hauteurs inégales. Une grille les aligne,
   et les cartes d'une même rangée prennent la hauteur de la plus haute. */
.rev-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:640px){.rev-cols{grid-template-columns:minmax(0,1fr)}}
.revc{background:var(--vellum);border:1px solid var(--gridline);border-radius:var(--r-card);padding:22px;display:flex;flex-direction:column;gap:14px}
.revc .stars{color:var(--ember);font-size:12px;letter-spacing:1.5px}
.revc p{font-size:14px;line-height:1.65;color:var(--graphite)}
.revc .who{display:flex;align-items:center;gap:10px;margin-top:auto}
.revc .av{width:32px;height:32px;border-radius:var(--r-pill);background:var(--canvas);border:1px solid var(--gridline);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0}
.revc .nm{font-size:14px;font-weight:500;line-height:1.2}
.revc .src{font-family:var(--f-mono);font-size:11px;color:var(--ash)}

.scoreline{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;margin-bottom:38px}
.scoreline .big{font-size:44px;font-weight:500;letter-spacing:-.025em;line-height:1}
.scoreline .stars{color:var(--ember);font-size:16px;letter-spacing:2px}
.scoreline .sub{font-size:13px;color:var(--slate);margin-top:4px}

/* ============ BENTO DE FONCTIONNALITÉS ============ */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--gridline);border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden}
.bento .cell{background:var(--canvas);padding:26px 24px 0;display:flex;flex-direction:column;gap:10px;min-height:290px}
.bento .cell .ek{font-family:var(--f-mono);font-size:11.5px;color:var(--ember)}
.bento .cell h3{font-size:16px;font-weight:500;line-height:1.3}
.bento .cell p{font-size:14px;color:var(--slate);line-height:1.55}
.bento .cell .viz{margin-top:auto;padding-top:20px}
.bento .cell.wide{grid-column:span 2}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .cell.wide{grid-column:span 2}}
@media(max-width:600px){.bento{grid-template-columns:minmax(0,1fr)}.bento .cell.wide{grid-column:span 1}}

/* Micro-démos */
.d-chips{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:24px}
.d-chip{font-family:var(--f-mono);font-size:12px;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--gridline);background:var(--vellum);color:var(--slate)}
.d-chip.on{background:var(--ember);color:#fff;border-color:transparent}

.d-bars{display:flex;flex-direction:column;gap:9px;padding-bottom:24px}
.d-bars .r{display:grid;grid-template-columns:64px minmax(0,1fr) max-content;gap:12px;align-items:center;font-family:var(--f-mono);font-size:11.5px;color:var(--slate)}
/* La dernière colonne était figée à 42px : un libellé plus long que
   « moyenne » débordait et poussait la page entière sur mobile. max-content
   et non auto : face à une piste en fr, une piste auto retombe à sa largeur
   minimale et le libellé se coupe en deux. */
.d-bars .t{height:6px;border-radius:var(--r-pill);background:var(--gridline);overflow:hidden}
.d-bars .t i{display:block;height:100%;border-radius:var(--r-pill);background:var(--ember)}
.d-bars .r.dim .t i{background:var(--stone)}

.d-serp{border:1px solid var(--gridline);border-radius:10px;overflow:hidden;background:var(--vellum);margin-bottom:24px}
.d-serp .r{padding:11px 14px;border-bottom:1px solid var(--gridline);display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:center}
.d-serp .r:last-child{border-bottom:0}
.d-serp .p{font-family:var(--f-mono);font-size:11px;color:var(--mist);text-align:center}
.d-serp .u{display:block;font-family:var(--f-mono);font-size:11px;color:var(--slate)}
.d-serp .t2{display:block;font-size:13px;color:var(--graphite);line-height:1.3;margin-top:2px}
.d-serp .r.first{background:var(--canvas)}
.d-serp .r.first .p{background:var(--ember);color:#fff;border-radius:var(--r-pill);padding:2px 0;font-weight:500}
.d-serp .r.first .u{color:var(--ember)}
.d-serp .r.first .t2{color:var(--ink);font-weight:500}

.d-gauge{display:flex;align-items:flex-end;gap:5px;height:64px;padding-bottom:24px}
.d-gauge i{flex:1;background:var(--gridline);border-radius:3px 3px 0 0;display:block}
.d-gauge i.hl{background:var(--ember)}

.d-stack{display:flex;flex-direction:column;gap:7px;padding-bottom:24px}
.d-stack .l{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:12px;color:var(--slate)}
.d-stack .l .ok{width:15px;height:15px;border-radius:var(--r-pill);background:var(--ember-glow);color:var(--ember);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}

/* Mini navigateur */
.mockup{border:1px solid var(--gridline);border-radius:10px;overflow:hidden;background:var(--canvas);margin-bottom:24px}
.mockup .bar{height:30px;border-bottom:1px solid var(--gridline);display:flex;align-items:center;gap:6px;padding:0 11px;background:var(--vellum)}
.mockup .bar i{width:5px;height:5px;border-radius:var(--r-pill);background:var(--gridline);display:block}
.mockup .bar .url{margin-left:6px;font-family:var(--f-mono);font-size:10.5px;color:var(--slate)}
.mockup .canvas-in{padding:14px;display:flex;flex-direction:column;gap:7px}
.mockup .sk{height:7px;border-radius:var(--r-pill);background:var(--gridline);display:block}
.mockup .sk.o{background:var(--ember-glow)}

/* En-tête en deux colonnes : titre à gauche, texte à droite */
.split-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.split-head > h2{margin:0}
.split-head .txt{display:flex;flex-direction:column;gap:16px}
.split-head .txt p{font-size:16px;line-height:1.65;color:var(--slate);max-width:52ch}
.split-head .txt p strong{color:var(--ink);font-weight:500}
@media(max-width:820px){.split-head{grid-template-columns:minmax(0,1fr);gap:24px}}

/* Grille deux volets : contenu large + panneau latéral */
.split-report{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.split-side{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.split-side-rev{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.split-wide{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.split-report > *,.split-side > *,.split-side-rev > *,.split-wide > *{min-width:0}
.win{min-width:0}
.metric .v sup{font-size:.5em;top:-.4em}
@media(max-width:820px){
  .split-report,.split-side,.split-side-rev,.split-wide{grid-template-columns:minmax(0,1fr);gap:32px}
  .split-side-rev > *:first-child{order:2}
  .split-report .panel,.split-side .panel,.split-wide .panel{position:static}
}

/* Panneau de métriques (accompagne .win) */
.panel{background:var(--canvas);border:1px solid var(--gridline);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:22px}
.metric{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--gridline)}
.metric:last-of-type{border-bottom:0;padding-bottom:0}
.metric .v{font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.metric .v.up{color:var(--ember)}
.metric .l{font-size:13px;color:var(--slate);text-align:right;max-width:20ch;line-height:1.45}

/* ============ LIGNES ALTERNÉES ============ */
.alt-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:clamp(44px,5vw,64px) 0;border-bottom:1px solid var(--gridline)}
.alt-row:last-child{border-bottom:0}
.alt-row.flip .txt{order:2}
.alt-row .ek{font-family:var(--f-mono);font-size:12px;color:var(--ember);margin-bottom:14px;display:block}
.alt-row h3{font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:-.012em;line-height:1.2;margin-bottom:14px}
.alt-row p{font-size:15px;line-height:1.65;color:var(--slate);max-width:48ch}
.alt-row .pts{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:18px}
.alt-row .pts li{display:grid;grid-template-columns:16px 1fr;gap:11px;font-size:14px;color:var(--graphite);line-height:1.5}
.alt-row .pts li::before{content:"→";font-family:var(--f-mono);font-size:12px;color:var(--ember);line-height:1.6}
@media(max-width:880px){.alt-row{grid-template-columns:minmax(0,1fr);gap:32px}.alt-row.flip .txt{order:0}}

/* ============ LISTE NUMÉROTÉE ============ */
.numlist{display:flex;flex-direction:column}
.numlist .it{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--gridline)}
.numlist .it:first-child{border-top:1px solid var(--gridline)}
.numlist .n{font-family:var(--f-mono);font-size:12px;color:var(--ember);padding-top:3px}
.numlist h3{font-size:17px;font-weight:500;margin-bottom:8px}
.numlist p{font-size:14px;color:var(--slate);line-height:1.65;max-width:58ch}
.numlist p b{color:var(--ink);font-weight:500}

/* ============ ÉTAPES EN COLONNES ============ */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--vellum)}
.steps4 > div{padding:28px 22px 30px;border-right:1px solid var(--gridline);display:flex;flex-direction:column;gap:11px}
.steps4 > div:last-child{border-right:0}
.steps4 .n{font-family:var(--f-mono);font-size:12px;color:var(--ember)}
.steps4 h3{font-size:16px;font-weight:500;line-height:1.3}
.steps4 p{font-size:14px;color:var(--slate);line-height:1.55}
@media(max-width:900px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}.steps4 > div:nth-child(2n){border-right:0}.steps4 > div:nth-child(-n+2){border-bottom:1px solid var(--gridline)}}
@media(max-width:560px){.steps4{grid-template-columns:minmax(0,1fr)}.steps4 > div{border-right:0;border-bottom:1px solid var(--gridline)}.steps4 > div:last-child{border-bottom:0}}

/* ============ TABS + CODE ============ */
.tabcode{border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--canvas)}
.tabcode .head{padding:14px 18px;border-bottom:1px solid var(--gridline);display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--vellum);flex-wrap:wrap}
.tabcode .head .tabs{display:flex;gap:2px}
.tabcode .pane{display:none;padding:20px;font-family:var(--f-mono);font-size:13px;line-height:1.6;overflow-x:auto}
.tabcode .pane.on{display:block}

/* ============ TARIFS ============ */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.plan{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--canvas);padding:26px 22px;display:flex;flex-direction:column;gap:16px}
.plan.reco{border-color:var(--ember);box-shadow:var(--sh-glow)}
.plan .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.plan h3{font-size:17px;font-weight:500}
.plan .desc{font-size:13.5px;color:var(--slate);line-height:1.5}
.plan .amt{font-size:30px;font-weight:500;letter-spacing:-.025em;line-height:1.15}
.plan .amt em{font-style:normal;font-size:14px;color:var(--slate);font-weight:400}
.plan .save{font-family:var(--f-mono);font-size:11.5px;color:var(--ember)}
.plan-feats{list-style:none;display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--gridline);margin-top:auto}
.plan-feats li{display:grid;grid-template-columns:15px 1fr;gap:10px;font-size:13.5px;color:var(--graphite);line-height:1.45}
.plan-feats li::before{content:"✓";font-family:var(--f-mono);font-size:11px;color:var(--ember);line-height:1.5}
.plan-feats li.off{color:var(--ash)}
.plan-feats li.off::before{content:"—";color:var(--stone)}
.plan .btn{width:100%}
@media(max-width:1040px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.plans{grid-template-columns:minmax(0,1fr)}}

.plans2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:760px){.plans2{grid-template-columns:minmax(0,1fr)}}

.slider-row{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--vellum);padding:26px;margin-bottom:32px}
.slider-row .top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.slider-row .amt{font-size:32px;font-weight:500;letter-spacing:-.025em;line-height:1}
.slider-row .amt em{font-style:normal;font-size:14px;color:var(--slate);font-weight:400}
.slider-row input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:var(--r-pill);background:var(--gridline);outline:none}
.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:var(--r-pill);background:var(--ember);border:3px solid var(--canvas);box-shadow:0 0 0 1px var(--gridline);cursor:pointer}
.slider-row input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:var(--r-pill);background:var(--ember);border:3px solid var(--canvas);cursor:pointer}
.slider-row .ticks{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--f-mono);font-size:11px;color:var(--ash)}

/* Conteneur défilant pour les tableaux étroits — aucune colonne n'est masquée */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll > *{min-width:640px}


.contact-band{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--vellum);padding:28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.contact-band h3{font-size:19px;font-weight:500;margin-bottom:6px}
.contact-band p{font-size:14px;color:var(--slate);max-width:52ch;line-height:1.55}

/* ============ FAQ ============ */
.faqbox{border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--canvas)}
details.qa{border-bottom:1px solid var(--gridline)}
details.qa:last-child{border-bottom:0}
details.qa summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:15.5px;font-weight:500}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary:hover{background:var(--vellum)}
details.qa .pm{font-family:var(--f-mono);font-size:15px;color:var(--slate);transition:transform .18s,color .18s;flex-shrink:0}
details.qa[open] .pm{transform:rotate(45deg);color:var(--ember)}
details.qa .ans{padding:0 22px 20px;font-size:14px;line-height:1.7;color:var(--slate);max-width:66ch}
details.qa .ans a{color:var(--ember);text-decoration:underline;text-underline-offset:2px}
.faq-cats{display:flex;gap:2px;margin-bottom:20px;flex-wrap:wrap}

/* ============ CTA ============ */
.cta-band{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--vellum);padding:clamp(40px,5vw,64px);text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 75%);opacity:.6}
.cta-band > *{position:relative}
.cta-band h2{max-width:18ch;margin:0 auto 16px}
.cta-band p{font-size:16px;color:var(--slate);max-width:50ch;margin:0 auto 28px}
.cta-band .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.cta-split{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--canvas)}
.cta-split .txt{padding:clamp(32px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:16px;border-right:1px solid var(--gridline)}
.cta-split .txt p{font-size:15px;color:var(--slate);line-height:1.65;max-width:44ch}
.cta-split .txt .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.cta-split .vis{background:var(--vellum);min-height:280px;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:12px;color:var(--stone);text-align:center;padding:24px;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:30px 30px}
@media(max-width:820px){.cta-split{grid-template-columns:minmax(0,1fr)}.cta-split .txt{border-right:0;border-bottom:1px solid var(--gridline)}}

/* ============ RÉALISATIONS ============ */
.projgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:900px){.projgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.projgrid{grid-template-columns:minmax(0,1fr)}}
.projc{border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--canvas);display:flex;flex-direction:column;transition:box-shadow .18s}
.projc:hover{box-shadow:var(--sh-card)}
.projc .shot{aspect-ratio:16/10;background:var(--vellum);border-bottom:1px solid var(--gridline);position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:12px;color:var(--stone);background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:28px 28px}
.projc .num{position:absolute;top:12px;left:12px;font-family:var(--f-mono);font-size:11px;background:var(--canvas);border:1px solid var(--gridline);border-radius:var(--r-pill);padding:3px 9px;color:var(--slate)}
.projc .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.projc .type{font-family:var(--f-mono);font-size:11.5px;color:var(--slate)}
.projc .nm{font-size:17px;font-weight:500;letter-spacing:-.005em}
.projc .go{margin-top:auto;padding-top:10px;font-family:var(--f-mono);font-size:12px;color:var(--slate);display:inline-flex;align-items:center;gap:7px}
.projc:hover .go{color:var(--ember)}
.projc.add{border-style:dashed;background:var(--vellum);align-items:center;justify-content:center;text-align:center;padding:40px 24px;gap:12px}
.projc.add .plus{width:40px;height:40px;border-radius:var(--r-pill);border:1px dashed var(--stone);display:flex;align-items:center;justify-content:center;color:var(--ember);font-size:19px}
.projc.add p{font-family:var(--f-mono);font-size:12px;color:var(--slate)}

.worklist{border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--canvas)}
.worklist .w{display:grid;grid-template-columns:48px 1fr auto auto;gap:20px;align-items:center;padding:20px 24px;border-bottom:1px solid var(--gridline);transition:background .15s}
.worklist .w:last-child{border-bottom:0}
.worklist .w:hover{background:var(--vellum)}
.worklist .n{font-family:var(--f-mono);font-size:12px;color:var(--mist)}
.worklist .nm{font-size:16px;font-weight:500}
.worklist .nm em{display:block;font-style:normal;font-size:13px;color:var(--slate);font-weight:400;margin-top:2px}
.worklist .tags{display:flex;gap:6px;flex-wrap:wrap}
.worklist .go{font-family:var(--f-mono);font-size:12px;color:var(--slate);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.worklist .w:hover .go{color:var(--ember)}
@media(max-width:760px){.worklist .w{grid-template-columns:36px 1fr;gap:8px 14px}.worklist .tags,.worklist .go{grid-column:2}}

/* ============ ARTICLES ============ */
.artgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:900px){.artgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.artgrid{grid-template-columns:minmax(0,1fr)}}
.artc{border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--canvas);display:flex;flex-direction:column;transition:box-shadow .18s}
.artc:hover{box-shadow:var(--sh-card)}
.artc .cover{aspect-ratio:16/9;background:var(--vellum);border-bottom:1px solid var(--gridline);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11.5px;color:var(--stone);background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:26px 26px}
.artc .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.artc .meta{font-family:var(--f-mono);font-size:11.5px;color:var(--ash);display:flex;align-items:center;gap:9px}
.artc .meta .d{width:3px;height:3px;border-radius:var(--r-pill);background:var(--stone)}
.artc h3{font-size:16.5px;font-weight:500;line-height:1.3}
.artc p{font-size:14px;color:var(--slate);line-height:1.55}
.artc .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--gridline);display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:11.5px;color:var(--ash)}
.artc:hover .foot .go{color:var(--ember)}

.artfeat{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--canvas)}
.artfeat .cover{min-height:300px;background:var(--vellum);border-right:1px solid var(--gridline);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:12px;color:var(--stone);background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:30px 30px}
.artfeat .body{padding:clamp(28px,3.5vw,40px);display:flex;flex-direction:column;justify-content:center;gap:14px}
.artfeat h3{font-size:clamp(22px,2.6vw,32px);font-weight:500;letter-spacing:-.015em;line-height:1.2}
.artfeat p{font-size:15px;color:var(--slate);line-height:1.65;max-width:46ch}
@media(max-width:820px){.artfeat{grid-template-columns:minmax(0,1fr)}.artfeat .cover{border-right:0;border-bottom:1px solid var(--gridline);min-height:220px}}

/* ============ ÉQUIPE ============ */
.teamgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:820px){.teamgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.teamgrid{grid-template-columns:minmax(0,1fr)}}
.person{border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--canvas)}
.person .ph{aspect-ratio:4/5;background:var(--vellum);border-bottom:1px solid var(--gridline);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11.5px;color:var(--stone);background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:28px 28px}
.person .body{padding:18px 20px 20px}
.person .nm{font-size:16px;font-weight:500}
.person .role{font-family:var(--f-mono);font-size:11.5px;color:var(--ember);margin-top:3px}
.person p{font-size:13.5px;color:var(--slate);line-height:1.55;margin-top:10px}

/* ============ FORMULAIRE ============ */
.formbox{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--canvas);overflow:hidden}
.formbox .head{padding:20px 24px;border-bottom:1px solid var(--gridline);background:var(--vellum)}
.formbox .head h3{font-size:18px;font-weight:500}
.formbox .head p{font-size:13.5px;color:var(--slate);margin-top:4px}
.formbox .body{padding:24px}
.fld{margin-bottom:16px}
.fld label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--slate);margin-bottom:7px}
.fld input,.fld textarea,.fld select{width:100%;padding:12px 14px;border:1px solid var(--gridline);border-radius:var(--r-input);background:var(--vellum);font-family:var(--f-sans);font-size:14.5px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--ember);box-shadow:0 0 0 3px var(--ember-glow)}
.fld textarea{resize:vertical;min-height:110px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld-row .fld{margin-bottom:0}
@media(max-width:560px){.fld-row{grid-template-columns:minmax(0,1fr)}}
.pickers{display:flex;gap:6px;flex-wrap:wrap}
.picker{position:relative}
.picker input{position:absolute;opacity:0;pointer-events:none}
.picker label{display:inline-block;font-size:13.5px;padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--gridline);background:var(--vellum);cursor:pointer;transition:all .15s;margin:0}
.picker label:hover{border-color:var(--stone)}
.picker input:checked + label{background:var(--ember);color:#fff;border-color:transparent}

.channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;background:var(--canvas)}
.channels > a{padding:24px 20px;border-right:1px solid var(--gridline);display:flex;flex-direction:column;gap:9px;transition:background .15s}
.channels > a:last-child{border-right:0}
.channels > a:hover{background:var(--vellum)}
.channels .lb{font-family:var(--f-mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--slate)}
.channels .vl{font-size:16px;font-weight:500;line-height:1.3;color:var(--ink)}
.channels .hint{font-family:var(--f-mono);font-size:11.5px;color:var(--ash)}
@media(max-width:880px){.channels{grid-template-columns:repeat(2,minmax(0,1fr))}.channels > a:nth-child(2n){border-right:0}.channels > a:nth-child(-n+2){border-bottom:1px solid var(--gridline)}}

/* ============ COMPARATIF ============ */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vs > div{border:1px solid var(--gridline);border-radius:var(--r-card);padding:26px 24px;background:var(--canvas)}
.vs > div.good{border-color:var(--ember);background:var(--vellum)}
.vs .lb{font-family:var(--f-mono);font-size:11.5px;color:var(--slate);margin-bottom:14px;display:block}
.vs > div.good .lb{color:var(--ember)}
.vs h3{font-size:18px;font-weight:500;margin-bottom:16px}
.vs ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.vs li{display:grid;grid-template-columns:16px 1fr;gap:11px;font-size:14px;line-height:1.5;color:var(--graphite)}
.vs > div:not(.good) li::before{content:"✕";font-family:var(--f-mono);font-size:11px;color:var(--stone);line-height:1.5}
.vs > div.good li::before{content:"✓";font-family:var(--f-mono);font-size:11px;color:var(--ember);line-height:1.5}
@media(max-width:760px){.vs{grid-template-columns:minmax(0,1fr)}}

/* ============ ZONES / MAILLAGE ============ */
.zones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--gridline);border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden}
.zones > a{background:var(--canvas);padding:18px 20px;font-size:14.5px;color:var(--ink);transition:background .15s;display:flex;align-items:center;justify-content:space-between;gap:10px}
.zones > a:hover{background:var(--vellum);color:var(--ember)}
.zones > a .ar{font-family:var(--f-mono);font-size:11px;color:var(--stone)}
.zones > a:hover .ar{color:var(--ember)}
@media(max-width:820px){.zones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.zones{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   BLOG — index
   ========================================================================== */
.blog-head{padding:clamp(40px,5vw,64px) 0 0}
.blog-head h1{font-size:clamp(32px,4.4vw,54px);font-weight:500;letter-spacing:-.022em;line-height:1.04;margin-top:18px}
.blog-head p{font-size:16px;color:var(--slate);line-height:1.6;max-width:52ch;margin-top:14px}
.cat-rail{display:flex;gap:2px;overflow-x:auto;padding:20px 0 4px;scrollbar-width:none}
.cat-rail::-webkit-scrollbar{display:none}
.cat-rail a{flex-shrink:0;font-size:13.5px;font-weight:500;color:var(--slate);padding:8px 14px;border-radius:var(--r-pill);white-space:nowrap;transition:background .15s,color .15s}
.cat-rail a:hover{background:var(--vellum);color:var(--ink)}
.cat-rail a.on{background:var(--ink);color:#fff}

.byline{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--slate)}
.byline .av{width:26px;height:26px;border-radius:var(--r-pill);background:var(--vellum);border:1px solid var(--gridline);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:500;color:var(--ink);flex-shrink:0}
.byline .who{font-weight:500;color:var(--ink)}
.byline .sp{width:3px;height:3px;border-radius:var(--r-pill);background:var(--stone);flex-shrink:0}

.postlist{border-top:1px solid var(--gridline)}
.postlist .p{display:grid;grid-template-columns:104px 1fr auto;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--gridline);transition:padding-left .18s}
.postlist .p:hover{padding-left:12px}
.postlist .d{font-family:var(--f-mono);font-size:12px;color:var(--ash)}
.postlist h3{font-size:16.5px;font-weight:500;line-height:1.35;margin-bottom:4px}
.postlist .p:hover h3{color:var(--ember)}
.postlist .ex{font-size:13.5px;color:var(--slate);line-height:1.5;max-width:72ch}
.postlist .cat{font-family:var(--f-mono);font-size:11.5px;color:var(--slate);white-space:nowrap}
@media(max-width:760px){.postlist .p{grid-template-columns:1fr;gap:6px}.postlist .cat{display:none}}

.nl-band{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--vellum);padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.nl-band h3{font-size:clamp(20px,2.2vw,26px);font-weight:500;letter-spacing:-.012em;line-height:1.2;margin-bottom:8px}
.nl-band p{font-size:14.5px;color:var(--slate);line-height:1.6;max-width:46ch}
.nl-band form{display:flex;gap:8px;flex-wrap:wrap}
.nl-band input{padding:12px 16px;border:1px solid var(--gridline);border-radius:var(--r-pill);background:var(--canvas);font-family:var(--f-sans);font-size:14.5px;color:var(--ink);outline:none;min-width:240px;transition:border-color .15s,box-shadow .15s}
.nl-band input:focus{border-color:var(--ember);box-shadow:0 0 0 3px var(--ember-glow)}
@media(max-width:820px){.nl-band{grid-template-columns:minmax(0,1fr);gap:22px}}

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.art-head{padding:clamp(32px,4vw,52px) 0 clamp(28px,3.5vw,40px);border-bottom:1px solid var(--gridline)}
.art-head h1{font-size:clamp(30px,4vw,50px);font-weight:500;letter-spacing:-.022em;line-height:1.08;max-width:30ch;margin:14px 0 18px}
.art-head .stand{font-size:17px;color:var(--slate);line-height:1.6;max-width:58ch}
.art-head .rail{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:28px}
.share{display:flex;gap:6px}
.share a{width:32px;height:32px;border-radius:var(--r-pill);border:1px solid var(--gridline);background:var(--canvas);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11px;color:var(--slate);transition:border-color .15s,color .15s}
.share a:hover{border-color:var(--ember);color:var(--ember)}

.art-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,64px);padding:clamp(36px,5vw,56px) 0}
.toc-side{position:sticky;top:88px;align-self:start}
.toc-side .lb{font-family:var(--f-mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--ash);margin-bottom:14px;display:block}
.toc-side ol{list-style:none;display:flex;flex-direction:column;gap:2px;counter-reset:t}
.toc-side li{counter-increment:t}
.toc-side a{display:flex;gap:10px;font-size:13.5px;line-height:1.45;color:var(--slate);padding:6px 10px;border-radius:var(--r-sm);border-left:2px solid transparent}
.toc-side a::before{content:counter(t,decimal-leading-zero);font-family:var(--f-mono);font-size:11px;color:var(--stone);flex-shrink:0;padding-top:2px}
.toc-side a:hover{background:var(--vellum);color:var(--ink)}
.toc-side a.on{color:var(--ember);border-left-color:var(--ember);background:var(--vellum)}
.toc-side a.on::before{color:var(--ember)}
@media(max-width:900px){.art-body{grid-template-columns:minmax(0,1fr)}.toc-side{position:static;padding-bottom:24px;border-bottom:1px solid var(--gridline)}}

/* Corps rédactionnel */
.prose{max-width:70ch;font-size:16.5px;line-height:1.72;color:var(--graphite)}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(22px,2.4vw,29px);font-weight:500;letter-spacing:-.015em;line-height:1.24;color:var(--ink);margin-top:2.1em;padding-top:.3em;scroll-margin-top:90px}
.prose h3{font-size:19px;font-weight:500;line-height:1.3;color:var(--ink);margin-top:1.7em;scroll-margin-top:90px}
.prose p strong{color:var(--ink);font-weight:500}
.prose a{color:var(--ember);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose ul,.prose ol{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.55em}
.prose ul > li{display:grid;grid-template-columns:18px 1fr;gap:12px}
.prose ul > li::before{content:"—";font-family:var(--f-mono);font-size:13px;color:var(--ember);line-height:1.7}
.prose ol{counter-reset:p}
.prose ol > li{display:grid;grid-template-columns:24px 1fr;gap:12px;counter-increment:p}
.prose ol > li::before{content:counter(p) ".";font-family:var(--f-mono);font-size:13px;color:var(--ember);line-height:1.7}
.prose blockquote{border-left:2px solid var(--ember);padding:2px 0 2px 22px;margin-left:0;font-size:18px;line-height:1.6;color:var(--ink)}
.prose blockquote cite{display:block;font-style:normal;font-family:var(--f-mono);font-size:12px;color:var(--ash);margin-top:12px}
.prose code{font-family:var(--f-mono);font-size:14px;background:var(--vellum);border:1px solid var(--gridline);border-radius:4px;padding:1px 5px;color:var(--ink)}
.prose figure{margin:2em 0}
.prose figure .ph{aspect-ratio:16/9;background:var(--vellum);border:1px solid var(--gridline);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:12px;color:var(--stone);background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:30px 30px}
.prose figcaption{font-family:var(--f-mono);font-size:11.5px;color:var(--ash);margin-top:10px;line-height:1.5}
.prose table{width:100%;border-collapse:collapse;border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden;font-size:14.5px}
.prose thead th{background:var(--vellum);text-align:left;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--slate);font-weight:400;padding:12px 16px;border-bottom:1px solid var(--gridline)}
.prose tbody td{padding:12px 16px;border-bottom:1px solid var(--gridline);color:var(--graphite)}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody td:first-child{font-weight:500;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--gridline);margin:2.4em 0}

.callout{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--vellum);padding:20px 22px;display:grid;grid-template-columns:28px 1fr;gap:14px;font-size:15px;line-height:1.6}
.callout .ic{width:28px;height:28px;border-radius:var(--r-pill);background:var(--canvas);border:1px solid var(--gridline);color:var(--ember);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:13px;flex-shrink:0}
.callout strong{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}
.callout.warn{border-color:var(--ember-glow);background:#fff8f4}

.inline-cta{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--canvas);padding:26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:var(--sh-card)}
.inline-cta h4{font-size:17px;font-weight:500;margin-bottom:6px}
.inline-cta p{font-size:14px;color:var(--slate);line-height:1.55;max-width:44ch}

.author-card{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--vellum);padding:24px;display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start}
.author-card .av{width:56px;height:56px;border-radius:var(--r-pill);background:var(--canvas);border:1px solid var(--gridline);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;color:var(--ink)}
.author-card .nm{font-size:16px;font-weight:500}
.author-card .role{font-family:var(--f-mono);font-size:11.5px;color:var(--ember);margin-top:3px}
.author-card p{font-size:14px;color:var(--slate);line-height:1.6;margin-top:10px}

.prev-next{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--gridline);padding-top:32px}
.prev-next a{border:1px solid var(--gridline);border-radius:var(--r-card);background:var(--canvas);padding:22px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .18s}
.prev-next a:hover{box-shadow:var(--sh-card)}
.prev-next .lb{font-family:var(--f-mono);font-size:11.5px;color:var(--ash)}
.prev-next .ti{font-size:15.5px;font-weight:500;line-height:1.35;color:var(--ink)}
.prev-next a:hover .ti{color:var(--ember)}
.prev-next a.next{text-align:right;align-items:flex-end}
@media(max-width:660px){.prev-next{grid-template-columns:minmax(0,1fr)}.prev-next a.next{text-align:left;align-items:flex-start}}

/* ============ SECTEURS ACCOMPAGNÉS ============ */
/* Ajouté le 2026-09-03 : présent dans la sections.css du projet Claude Design,
   absent de l'export du 2026-09-02 sur lequel le thème a été construit. */
.sectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--gridline);border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden}
.sectors > div{background:var(--canvas);padding:22px;display:flex;flex-direction:column;gap:7px}
.sectors .k{font-size:15.5px;font-weight:500;color:var(--ink)}
.sectors .w{font-size:13.5px;color:var(--slate);line-height:1.5}
.sectors .v{font-size:13.5px;color:var(--slate);line-height:1.55}
.sectors .v b{color:var(--graphite);font-weight:500}
@media(max-width:640px){.sectors{grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------------------------------
   CORRECTION (2026-09-03) — menu déroulant
   .menu .t et .menu .d sont des <span>, donc en ligne : l'intitulé et sa
   description se suivent sans retour ligne (« Création de site webVitrine… »).
   Le margin-top de .d n'a d'ailleurs aucun effet sur un élément en ligne.
   On les passe en bloc, ce qui rétablit l'intention du design.
   À reporter dans sections.css côté projet.
   -------------------------------------------------------------------------- */
.menu .t{ display:block }
.menu .d{ display:block }
.menu a > span:last-child{ min-width:0 }

/* --------------------------------------------------------------------------
   AJUSTEMENT (2026-09-03) — taille du logo
   La maquette pose .mark à 22 px de haut. Passé à 26 px, en-tête et pied de
   page, sur demande. Le ratio est conservé par aspect-ratio, la hauteur de
   la barre de navigation (64 px) absorbe l'écart sans décaler les liens.
   -------------------------------------------------------------------------- */
.mark{ height:26px }

/* ==========================================================================
   CORRECTION (2026-09-06) — largeur du bandeau chiffré
   La maquette pose `.statband` en pleine largeur d'écran alors que toutes les
   autres sections vivent dans `.wrap` (1200 px centrés). On lui donne le même
   gabarit, et on aplatit le rembourrage des cellules de rive pour que les
   chiffres s'alignent exactement sur les titres des sections voisines.
   À reporter dans la maquette.
   ========================================================================== */
.statband{
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.statband > div:first-child{
  padding-left:0;
}
.statband > div:last-child{
  padding-right:0;
}

/* En deux colonnes, ce sont les cellules de rive de chaque rangée qui doivent
   s'aplatir, pas seulement la première et la dernière du bandeau. */
@media(max-width:860px){
  .statband > div:nth-child(2n+1){ padding-left:0 }
  .statband > div:nth-child(2n){ padding-right:0 }
}

/* ==========================================================================
   CORRECTION (2026-09-07) — bandeau de canaux en mobile
   À deux colonnes, une adresse email dépasse sa cellule et chevauche la
   voisine. Passage à une colonne sur les petits écrans, et césure autorisée
   sur les valeurs longues.
   À reporter dans la maquette.
   ========================================================================== */
.channels .vl{
  overflow-wrap:anywhere;
}
@media(max-width:620px){
  .channels{
    grid-template-columns:minmax(0,1fr);
  }
  .channels > a{
    border-right:0;
    border-bottom:1px solid var(--gridline);
  }
  .channels > a:last-child{
    border-bottom:0;
  }
}

/* ==========================================================================
   CORRECTION (2026-09-07) — en-tête en mobile
   Les liens et le numéro sont déjà masqués sous 920 px. Restent le logo, le
   bouton de thème et l'appel à l'action : à 360 px la ligne débordait faute
   de place. On resserre la gouttière et on laisse le bouton se compresser.
   ========================================================================== */
@media(max-width:920px){
  .nav-in{
    gap:12px;
  }
  .nav-right{
    gap:4px;
    min-width:0;
  }
  .nav-right .btn{
    white-space:nowrap;
    padding-inline:16px;
  }
}
@media(max-width:400px){
  .nav-right .btn{
    font-size:13.5px;
    padding-inline:13px;
  }
}

/* ==========================================================================
   MENU MOBILE (2026-09-07)
   La maquette n'en prévoit aucun : sous 920 px les liens disparaissaient sans
   remplacement, la navigation devenait impossible. Bouton dans la barre,
   panneau déroulant sous elle, mêmes entrées que le menu de bureau.
   ========================================================================== */
/* Sans cadre ni fond : à côté de la pastille orange, un cercle blanc bordé
   attirait l'œil autant que l'appel à l'action. La zone tactile reste à
   40 px, les trois barres sont centrées dedans. */
.burger{
  display:none;
  width:40px;
  height:40px;
  border:0;
  background:none;
  cursor:pointer;
  padding:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4.5px;
  color:var(--ink);
}
.burger span{
  display:block;
  width:19px;
  height:1.75px;
  background:currentColor;
  border-radius:2px;
  transition:transform .2s, opacity .15s;
}
.burger:hover{
  color:var(--ember);
}
.burger[aria-expanded="true"]{
  color:var(--ember);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.25px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.25px) rotate(-45deg) }

.menu-mobile{
  border-top:1px solid var(--gridline);
  background:var(--page);
  padding:14px var(--pad-x) 24px;
  max-height:calc(100dvh - 64px);
  overflow-y:auto;
}
.menu-mobile ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.menu-mobile a{
  display:block;
  padding:11px 12px;
  border-radius:10px;
  font-size:16px;
  font-weight:500;
  color:var(--ink);
}
.menu-mobile a:hover,
.menu-mobile a.on{
  background:var(--vellum);
  color:var(--ember);
}
/* Les familles du menu de bureau deviennent des groupes titrés. */
.menu-mobile .groupe{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid var(--gridline);
}
.menu-mobile .titre{
  display:block;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ash);
  padding:0 12px 6px;
}
.menu-mobile .groupe a{
  font-size:15px;
  font-weight:400;
  color:var(--graphite);
}
.menu-mobile .tel-mobile{
  display:block;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--gridline);
  font-family:var(--f-mono);
  font-size:15px;
  color:var(--ink);
  text-align:center;
}

@media(max-width:920px){
  .burger{ display:flex }
  /* L'appel à l'action quitte la barre : la barre fixe du bas porte déjà
     « Appeler » et « Devis gratuit », et le menu donne accès à la page
     contact. Trois boutons dans 360 px, c'était un de trop. */
  .nav-right > .btn{ display:none }
}
@media(min-width:921px){
  /* Le panneau n'existe que sur petit écran, quel que soit son état. */
  .menu-mobile{ display:none !important }
}
@media(prefers-reduced-motion:reduce){
  .burger span{ transition:none }
}

/* ==========================================================================
   CORRECTION (2026-09-07) — listes de .prose
   `.prose ul > li` et `.prose ol > li` sont en grille à deux colonnes. Dès
   qu'un item contient une balise en ligne — un <strong> suivi de texte, comme
   dans les mentions légales — cela fait trois items de grille : le texte
   retombe dans la colonne de la puce, large de 18 px, et s'affiche un mot par
   ligne. Puce en absolu, contenu en flux normal.
   À reporter dans la maquette.
   ========================================================================== */
.prose ul > li,
.prose ol > li{
  display:block;
  position:relative;
  padding-left:30px;
}
.prose ol > li{
  padding-left:36px;
}
.prose ul > li::before,
.prose ol > li::before{
  position:absolute;
  left:0;
  top:0;
}

/* ==========================================================================
   TABLEAUX COMPARATIFS (2026-09-07)
   `.cmp` et `.duel` étaient définis six fois, dans six feuilles de page,
   chacune issue du <style> de sa maquette — avec des dérives : rembourrage
   à 15 ou 16 px, première colonne en mono ici mais pas là, et une page où
   la règle de mise en gras manquait, laissant le texte accentué en gris.
   Définition unique ici. Les feuilles de page ne gardent que le nombre de
   colonnes, qui varie légitimement d'un tableau à l'autre.
   Référence : le comparatif SEO / SEA de la page référencement naturel.
   ========================================================================== */
.cmp,
.duel,
.ctable{
  border:1px solid var(--gridline);
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--canvas);
}
.cmp .r,
.duel .r,
.ctable .r{
  display:grid;
  border-bottom:1px solid var(--gridline);
}
.cmp .r:last-child,
.duel .r:last-child,
.ctable .r:last-child{
  border-bottom:0;
}
/* « > * » et non « > div » : une cellule qui ne contient que du texte est
   rendue en <p> par le convertisseur, et n'aurait aucun style. */
.cmp .r > *,
.duel .r > *,
.ctable .r > *{
  padding:15px 20px;
  border-right:1px solid var(--gridline);
  font-size:14px;
  line-height:1.55;
  display:flex;
  align-items:center;
  color:var(--slate);
}
.cmp .r > *:last-child,
.duel .r > *:last-child,
.ctable .r > *:last-child{
  border-right:0;
}

/* Ligne d'en-tête : fond vélin, intitulés de colonnes en sans. */
.cmp .r.head > *,
.duel .r.head > *,
.ctable .r.head > *{
  background:var(--vellum);
  font-size:15px;
  font-weight:500;
  color:var(--ink);
}

/* Première colonne : le critère, en mono majuscules — en-tête comme corps. */
.cmp .r > *:first-child,
.duel .r > *:first-child,
.ctable .r > *:first-child{
  font-family:var(--f-mono);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--slate);
}

/* Mise en avant : colonne entière, ou valeur isolée. */
.cmp .hl-col,
.duel .hl-col,
.ctable .hl-col{
  background:var(--vellum);
}
.cmp .r b,
.cmp .r strong,
.duel .r b,
.duel .r strong,
.ctable .r b,
.ctable .r strong{
  color:var(--ink);
  font-weight:500;
}
.cmp .r span.dim,
.duel .r span.dim,
.ctable .r span.dim{
  color:var(--ash);
}
.cmp .r span.sm,
.duel .r span.sm,
.ctable .r span.sm{
  color:var(--graphite);
}
.cmp .r .price,
.duel .r .price,
.ctable .r .price{
  font-size:22px;
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--ink);
}
/* La première colonne porte un critère, sauf quand la cellule est marquée
   .nm — c'est alors un nom d'offre, qui se lit en sans. */
.cmp .r .nm,
.duel .r .nm,
.ctable .r .nm{
  font-family:var(--f-sans);
  font-size:14.5px;
  text-transform:none;
  letter-spacing:0;
  color:var(--ink);
  font-weight:500;
}
.cmp .lbl,
.duel .lbl,
.ctable .lbl{
  font-family:var(--f-mono);
  font-size:12px;
  color:var(--slate);
}
.cmp .val,
.duel .val,
.ctable .val{
  font-family:var(--f-mono);
  font-size:14px;
  color:var(--ember);
}

/* Un tableau ne se compresse pas : sous sa largeur utile il défile. */
.table-scroll{
  overflow-x:auto;
}
.table-scroll > .cmp,
.table-scroll > .duel,
.table-scroll > .ctable{
  min-width:640px;
}

/* ==========================================================================
   FORMULAIRES — états communs (2026-09-07)
   Écrits d'abord dans la feuille de la page contact, ils sont partagés avec
   la page audit : le piège à robots y restait visible et le bouton d'envoi
   n'occupait pas toute la largeur. Définition unique ici.
   ========================================================================== */
.formbox .form-erreur{
  margin-bottom:18px;
  padding:12px 16px;
  border:1px solid var(--ember);
  border-radius:10px;
  background:var(--ember-glow);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
}
/* Piège à robots : invisible à l'œil, mais pas retiré du DOM — un automate
   qui lit le HTML le remplit, un lecteur d'écran l'ignore (aria-hidden). */
.formbox .piege{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.formbox fieldset{ border:0; margin:0; padding:0 }
.formbox legend{
  display:block;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ash);
  margin-bottom:8px;
  padding:0;
}
.formbox .envoyer{ width:100% }
.formbox .apres-envoi{ margin-top:14px }

/* Accusé de réception */
.formbox .recu-ic{
  width:44px; height:44px; border-radius:var(--r-pill);
  background:var(--ember-glow); color:var(--ember);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; margin-bottom:18px;
}
.formbox .recu-t{ font-size:20px; font-weight:500; letter-spacing:-.01em; margin-bottom:10px }
.formbox .recu-p{ font-size:15px; line-height:1.7; color:var(--slate); max-width:46ch; margin-bottom:20px }

/* Bouton « rouvrir les préférences cookies » posé dans un paragraphe : il doit
   se lire comme un lien, pas comme un contrôle de formulaire égaré. */
.prose .swb-cmp__rouvrir{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:var(--ember);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.prose .swb-cmp__rouvrir:hover{
  color:var(--ink);
}

/* ==========================================================================
   CONVICTIONS, SECTEURS, LISTES À FLÈCHES, PAIRE DE CHIFFRES
   Composants de la bibliothèque du projet Claude Design, repris ici parce que
   plusieurs pages locales les emploient (Saint-Étienne, Auxerre).
   ========================================================================== */

/* Convictions — grille deux colonnes, filets partagés */
.creed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--gridline);border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden}
.creed > div{background:var(--canvas);padding:28px 26px;display:flex;flex-direction:column;gap:11px}
.creed .n{font-family:var(--f-mono);font-size:11.5px;color:var(--ember)}
.creed h3{font-size:17.5px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.creed p{font-size:14px;color:var(--slate);line-height:1.65}
.creed p b{color:var(--ink);font-weight:500}
@media(max-width:640px){.creed{grid-template-columns:minmax(0,1fr)}}

/* Secteurs accompagnés */
.sectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--gridline);border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden}
.sectors > div{background:var(--canvas);padding:22px;display:flex;flex-direction:column;gap:7px}
.sectors .k{font-size:15.5px;font-weight:500;color:var(--ink)}
.sectors .w{font-size:13.5px;color:var(--slate);line-height:1.5}
.sectors .v{font-size:13.5px;color:var(--slate);line-height:1.55}
.sectors .v b{color:var(--graphite);font-weight:500}
@media(max-width:640px){.sectors{grid-template-columns:minmax(0,1fr)}}

/* Liste à flèches */
.factors{list-style:none;display:flex;flex-direction:column;gap:11px;padding-left:0}
.factors li{position:relative;padding-left:28px;font-size:14.5px;color:var(--slate);line-height:1.6}
.factors li::before{content:"\2192";position:absolute;left:0;top:0;font-family:var(--f-mono);font-size:12px;color:var(--ember);line-height:1.7}
.factors li b{color:var(--ink);font-weight:500}

/* Paire de chiffres, calée en bas de carte */
.kpi-line{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--gridline)}
.kpi-line .k{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.kpi-line .k .v{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--ember);white-space:nowrap}
.kpi-line .k .l{font-size:12.5px;color:var(--slate);text-align:right;line-height:1.4;max-width:28ch;text-wrap:pretty}

/* ==========================================================================
   UTILITAIRES DE MISE EN PAGE
   Les maquettes portaient ces réglages en style en ligne ; un bloc ne peut pas
   les emporter, ils vivent donc ici sous des noms explicites.
   ========================================================================== */
.swb-tete{margin-bottom:40px}
.swb-tete-serree{margin-bottom:32px}
.swb-dernier{border-bottom:0}
.swb-colle{position:sticky;top:88px}
.swb-legende{margin-bottom:14px}
.swb-corps{font-size:14.5px;color:var(--slate);line-height:1.7}
.swb-note{font-size:13.5px;color:var(--slate);line-height:1.6}
.swb-tableau{margin-bottom:32px}
.swb-apres{margin-top:16px}
.swb-titre-carte{margin-bottom:10px}
.swb-secteurs{margin-bottom:24px}
.swb-faq{max-width:840px;margin:0 auto}
.swb-badge-cta{margin-bottom:20px}
.cta-band .swb-liste-cta{max-width:400px;margin:0 auto 28px;text-align:left}
.swb-centre{justify-content:center;margin-top:32px}
.swb-pile{display:flex;flex-direction:column;gap:14px}
.swb-creme{background:var(--vellum)}
.swb-formulaire{max-width:720px;margin:0 auto}

/* ==========================================================================
   PAGES D'AGENCE SEO LOCALE
   Deux pages partagent ces composants (Saint-Étienne, Auxerre).
   ========================================================================== */

/* Cartes de levier : le lien de bas de carte est plaqué en pied. */
.lever{display:flex;flex-direction:column;gap:12px}
.lever h3{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.008em}
.lever p{font-size:14px;color:var(--slate);line-height:1.65}
.lever .more{margin-top:auto;padding-top:4px;font-family:var(--f-mono);font-size:12.5px;color:var(--ember)}
.lever .more a{color:inherit}
.lever .more a:hover{text-decoration:underline;text-underline-offset:3px}
.swb-carte-ouverte{background:var(--canvas);border-style:dashed}

/* Diagnostic : un symptôme, puis la réponse apportée. */
.diag{display:flex;flex-direction:column}
.diag > div{display:grid;grid-template-columns:34px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--gridline)}
.diag > div:first-child{border-top:1px solid var(--gridline)}
.diag .n{font-family:var(--f-mono);font-size:12px;color:var(--ember);padding-top:4px}
.diag h3{font-size:17.5px;font-weight:500;line-height:1.3;letter-spacing:-.01em;margin-bottom:10px}
.diag p{font-size:14.5px;color:var(--slate);line-height:1.7;max-width:62ch}
.diag p + p{margin-top:12px}
@media(max-width:560px){.diag > div{grid-template-columns:minmax(0,1fr);gap:8px}}


/* Blocs de suivi mensuel, en grille à filets partagés. */
.report-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--gridline);border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden}
.report-grid > div{background:var(--canvas);padding:22px;display:flex;flex-direction:column;gap:7px}
.report-grid .k{font-size:15px;font-weight:500;color:var(--ink)}
.report-grid .w{font-size:13.5px;color:var(--slate);line-height:1.55}
@media(max-width:860px){.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.report-grid{grid-template-columns:minmax(0,1fr)}}

/* Réglages repris des styles en ligne des maquettes. */
.swb-suite{margin-top:-12px}
.swb-mention{margin-top:26px;font-family:var(--f-mono);font-size:12px;color:var(--ash);letter-spacing:.03em}
.swb-encart{margin-bottom:28px}
.swb-legende-suivi{margin:44px 0 20px}
.swb-note-zones{margin-top:18px;max-width:76ch}
.swb-note-zones a{color:var(--ember)}
.swb-apres-liste{margin-top:28px}
/* Filet au-dessus des chiffres quand le panneau mêle une liste et des métriques. */
.swb-metriques{border-top:1px solid var(--gridline);padding-top:18px}
/* Panneau de bilan : un intitulé en gras suivi de son explication, sans le
   grand chiffre des .metric habituelles. */
.metric.swb-bilan{align-items:flex-start}
.metric.swb-bilan .l{text-align:left;max-width:none}
.metric.swb-bilan .l b{display:block;color:var(--ink);font-weight:500;font-size:15px;margin-bottom:3px}
.swb-titre-bande{max-width:30ch;margin:0 auto 18px}
.cta-band .swb-titre-bande ~ p{max-width:64ch}
/* Cinquième carte de la grille des convictions : elle prend toute la largeur. */
.creed .swb-large{grid-column:1/-1}

@media(max-width:1040px){.swb-colle{position:static}}

/* Dernière cellule des secteurs : une invitation, pas un secteur. */
.sectors .swb-secteur-ouvert{background:var(--vellum)}
.sectors .swb-secteur-ouvert .w a{color:var(--ember)}

/* La fiche auteur accepte une photo à la place des initiales. */
.author-card img.av{object-fit:cover;padding:0;display:block}

/* ==========================================================================
   PAGE INTROUVABLE
   Reprise de 404.html. Les styles vivent ici et non dans une feuille de page :
   la 404 est un gabarit, elle n'a pas de slug auquel accrocher une feuille.
   ========================================================================== */
.e404{padding:clamp(56px,7vw,88px) 0 clamp(44px,5vw,64px);text-align:center}
.e404 .code{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--slate);border:1px solid var(--gridline);background:var(--vellum);border-radius:var(--r-pill);padding:6px 16px 6px 8px;margin-bottom:26px}
.e404 .code b{display:inline-flex;align-items:center;justify-content:center;background:var(--ember);color:#fff;font-family:var(--f-mono);font-size:12px;font-weight:500;border-radius:var(--r-pill);padding:3px 10px}
.e404 h1{max-width:16ch;margin:0 auto 18px}
.e404 .sub{font-size:16px;line-height:1.65;color:var(--slate);max-width:52ch;margin:0 auto 30px}
.e404 .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Barre d'adresse cassée */
.brk{max-width:560px;margin:0 auto 34px;border:1px solid var(--gridline);border-radius:var(--r-win);overflow:hidden;background:var(--canvas);box-shadow:var(--sh-ring)}
.brk .bar{height:34px;border-bottom:1px solid var(--gridline);background:var(--vellum);display:flex;align-items:center;gap:6px;padding:0 12px}
.brk .bar i{width:5px;height:5px;border-radius:var(--r-pill);background:var(--gridline);display:block}
.brk .bar .u{margin-left:8px;font-family:var(--f-mono);font-size:11.5px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brk .bar .u s{color:var(--ash);text-decoration-color:var(--ember)}
.brk .body{padding:22px 20px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.brk .sk{height:8px;border-radius:var(--r-pill);background:var(--gridline);display:block}
.brk .sk.o{background:var(--ember-glow)}
.brk .sk--cta{background:var(--ember);height:14px}

/* Deux pistes de reprise */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--gridline);border:1px solid var(--gridline);border-radius:var(--r-card);overflow:hidden}
.paths--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.paths > a{background:var(--canvas);padding:26px 24px;display:flex;flex-direction:column;gap:11px;transition:background .15s}
.paths > a:hover{background:var(--vellum)}
.paths .n{font-family:var(--f-mono);font-size:11.5px;color:var(--ember)}
.paths h3{font-size:16.5px;font-weight:500;line-height:1.3;letter-spacing:-.008em;color:var(--ink)}
.paths p{font-size:14px;color:var(--slate);line-height:1.6}
.paths .go{margin-top:auto;padding-top:6px;font-family:var(--f-mono);font-size:12px;color:var(--slate)}
.paths > a:hover .go{color:var(--ember)}
@media(max-width:820px){.paths,.paths--2{grid-template-columns:minmax(0,1fr)}}

/* Plan du site */
.useful{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.useful h4{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--slate);margin-bottom:14px;font-weight:400}
.useful ul{list-style:none;display:flex;flex-direction:column;gap:9px;padding-left:0;margin:0}
.useful li a{font-size:14.5px;color:var(--graphite)}
.useful li a:hover{color:var(--ember)}
@media(max-width:820px){.useful{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.useful{grid-template-columns:1fr}}

/* Pagination des archives */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--gridline);border-radius:var(--r-pill);background:var(--canvas);font-family:var(--f-mono);font-size:13px;color:var(--graphite)}
.pagination .page-numbers:hover{border-color:var(--stone);color:var(--ink)}
.pagination .page-numbers.current{background:var(--ember);border-color:transparent;color:#fff}