/* ════════════════════════════════════════════════════════════════════
   Gabarit de LECTURE (pages d'atterrissage, mentions légales, recrutement,
   404), dérivé du gabarit d'article : même en-tête nuit, même feuille
   blanche avec sommaire collant et colonne de lecture, même CTA. Chargé
   après v3-article.css. Ce qui s'ajoute : un en-tête sans photo, des
   grilles de cartes pour les listes de services, des étapes numérotées,
   des encadrés, des jauges de cas clients, les boutons du corps.
   ════════════════════════════════════════════════════════════════════ */

/* ── en-tête sans photo d'en-tête ── */
.head-lecture{padding-bottom:clamp(3rem,7vw,5.2rem)}
.head-lecture .head-row{align-items:start}
.head-lecture .chapo{max-width:44rem}
.head-cote{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;max-width:22rem}
.head-cote .note-tete{font:500 .86rem/1.55 var(--man);color:var(--t3)}
.head-cote .note-tete a{color:var(--t2);text-decoration:underline;text-underline-offset:3px}
.head-cite{display:flex;flex-wrap:wrap;gap:.45rem}
.head-cite p{display:inline-flex;align-items:center;gap:.45rem;margin:0;padding:.42rem .8rem .42rem .55rem;border-radius:var(--r-pill);border:1px solid rgba(147,197,253,.28);background:rgba(37,99,235,.1);
  font:600 .76rem/1 var(--man);color:var(--t2)}
.head-cite p b{font-weight:700;color:var(--t1)}
.head-cite p strong{color:var(--bleu-4)}
.head-cite p::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bleu-3);box-shadow:0 0 10px rgba(96,165,250,.9)}
.head-cite .con-note{flex-basis:100%;padding:0;border:0;background:none;font:550 .72rem/1.4 var(--man);letter-spacing:.02em;color:var(--t3)}
.head-cite .con-note::before{content:none}
.sheet-lecture{padding:clamp(3rem,6vw,4.6rem) 0 clamp(4rem,8vw,6.5rem)}
.lecture-plan{margin:0}

/* ── l'introduction : les paragraphes de l'en-tête de référence qui suivent le chapeau ── */
.art-corps .intro>p:first-child{font-size:1.24rem;line-height:1.66;color:var(--encre)}

/* ── surlignage (« 8 % des visites ») : un trait de marqueur ── */
.art-corps .hl{background:linear-gradient(rgba(147,197,253,.45),rgba(147,197,253,.45)) 0 88%/100% 38% no-repeat;font-weight:650;color:var(--encre)}

/* ── boutons dans le corps (« Demandez votre pré-audit gratuit ») ── */
.art-corps .cta-bouton{margin:1.6rem 0}
.art-corps .cta-bouton a,.art-corps a.bouton{display:inline-flex;align-items:center;height:3.1rem;padding:0 1.5rem;border-radius:var(--r-pill);color:#fff;text-decoration:none;font:650 .92rem/1 var(--man);
  background:linear-gradient(180deg,#3B7BF5 0%,#2563EB 52%,#1F56D8 100%);box-shadow:var(--glow-btn);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.art-corps .cta-bouton a:hover,.art-corps a.bouton:hover{transform:translateY(-1px);box-shadow:var(--glow-btn-on);background:linear-gradient(180deg,#3B7BF5 0%,#2563EB 52%,#1F56D8 100%);color:#fff}
.art-corps .note{font-size:.98rem;color:var(--e2);font-style:italic}
.art-corps .signature{margin-top:2.2rem;padding-top:1rem;border-top:1px solid var(--pl);font:500 .88rem/1.6 var(--man);color:var(--e3)}
.art-corps .signature strong{color:var(--encre)}

/* ── grilles de cartes : listes de services, secteurs, arrondissements, raisons ── */
.art-corps .cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.8rem 0 2.2rem}
.art-corps .carte{position:relative;margin:0;padding:1.35rem 1.4rem 1.2rem;border-radius:var(--r-m);background:var(--papier);border:1px solid var(--pl);
  transition:border-color .4s,box-shadow .5s var(--ease-out),transform .5s var(--ease-out)}
.art-corps .carte:hover{border-color:rgba(37,99,235,.28);box-shadow:0 26px 50px -36px rgba(29,78,216,.45);transform:translateY(-2px)}
.art-corps .carte::before{content:"";position:absolute;left:1.4rem;top:0;width:2.2rem;height:2px;border-radius:0 0 2px 2px;background:var(--bleu)}
.art-corps .carte h3{margin:.2rem 0 .6rem;font-size:1.08rem;line-height:1.3}
.art-corps .carte p,.art-corps .carte li{font-size:.95rem;line-height:1.65}
.art-corps .carte p{margin:0 0 .75em}
.art-corps .carte>:last-child{margin-bottom:0}
.art-corps .carte ul{margin:.4rem 0 .8rem}
/* cartes larges (longs textes) : une colonne, la carte en pleine mesure */
.art-corps .cartes.une-col{grid-template-columns:minmax(0,1fr)}
/* la carte mise en avant (le 16e, où Triaina est installée) */
.art-corps .carte.plaque-or{background:linear-gradient(165deg,#EAF2FF,#F4F8FF);border-color:rgba(37,99,235,.28)}
/* cas clients : un dossier par carte, la jauge du résultat */
.art-corps .jauge{position:relative;height:6px;margin:.8rem 0 1rem;border-radius:3px;background:var(--papier-2);overflow:hidden}
.art-corps .jauge::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v,0)*1%);border-radius:3px;background:linear-gradient(90deg,#93C5FD,#2563EB)}

/* ── étapes : des pastilles reliées par un fil ── */
.art-corps .etapes{counter-reset:etape;margin:1.8rem 0 2.2rem}
.art-corps .etape{position:relative;counter-increment:etape;margin:0;padding:0 0 1.6rem 3.1rem}
.art-corps .etape::before{content:counter(etape);position:absolute;left:0;top:.05rem;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:1px solid rgba(37,99,235,.45);background:#fff;
  font:700 .78rem/1 var(--man);color:var(--bleu-1);font-variant-numeric:tabular-nums}
.art-corps .etape:not(:last-child)::after{content:"";position:absolute;left:1rem;top:2.25rem;bottom:.2rem;width:1px;background:linear-gradient(var(--pl-3),var(--pl))}
.art-corps .etape h3{margin:.2rem 0 .5rem;font-size:1.12rem}
.art-corps .etape p{margin-bottom:.7em}
.art-corps .etape>:last-child{margin-bottom:0}

/* ── listes de moteurs, de signaux, de médias : des lignes nettes ── */
.art-corps .moteurs,.art-corps .signaux{margin:1.4rem 0 1.8rem;border-top:1px solid var(--pl)}
.art-corps .moteurs>p,.art-corps .signal{margin:0;padding:.95rem 0;border-bottom:1px solid var(--pl)}
.art-corps .signal p{margin:0}
.art-corps .medias-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:1.2rem 0 1.6rem}
.art-corps .medias-grille>li{margin:0;padding:.8rem 1rem .8rem 1rem;border-radius:12px;background:var(--papier);border:1px solid var(--pl);font-size:.93rem;line-height:1.5}
.art-corps .medias-grille>li::before{content:none}
.art-corps .fiche-tarif,.art-corps p.fiche{padding:.9rem 1.1rem;border-radius:12px;background:var(--ciel);border:1px solid rgba(37,99,235,.16);font-size:.95rem}

/* ── le plan des arrondissements (en-tête de /agence-seo-paris) : la spirale des 20, le 16e allumé ── */
.head-cote figure.plan{margin:0;align-self:center}
.head-cote figure.plan svg{width:min(17rem,62vw);height:auto;overflow:visible}
.plan .pl-trace{fill:none;stroke:rgba(147,197,253,.45);stroke-width:1.2;stroke-linecap:round}
.plan .arr circle{fill:#101A33;stroke:rgba(96,165,250,.55);stroke-width:1}
.plan .arr text{fill:rgba(234,242,255,.8);font:700 8.5px/1 var(--man);text-anchor:middle}
.plan .arr-or circle{fill:#2563EB;stroke:#93C5FD;stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(96,165,250,.8))}
.plan .arr-or text{fill:#fff}
.plan figcaption{margin-top:.6rem;text-align:center;font:600 .72rem/1.4 var(--man);letter-spacing:.04em;color:var(--t3)}

/* grand écran : les grilles de cartes s'étendent dans la marge droite, comme les tableaux */
@media (min-width:1240px){
  .art-corps .cartes,.art-corps .medias-grille{margin-right:calc(-1*(var(--side) + var(--col-gap)))}
}
@media (max-width:700px){
  .art-corps .cartes,.art-corps .medias-grille{grid-template-columns:minmax(0,1fr)}
  .art-corps .carte{padding:1.15rem 1.1rem 1rem}
  .art-corps .carte::before{left:1.1rem}
  .head-cote{max-width:none}
}

/* page sans H2 (recrutement) : pas de sommaire, la colonne reste à sa place */
.art-grid.sans-toc>.prose{grid-column:2}
@media (max-width:1023px){.art-grid.sans-toc>.prose{grid-column:auto}}
/* 404 : les destinations en tuiles */
.art-corps .cartes-liens{list-style:none;padding:0}
.art-corps .cartes-liens>li{margin:0;padding:0}
.art-corps .cartes-liens>li::before{content:none}
.art-corps .cartes-liens a{display:block;padding:1rem 1.2rem;border-radius:var(--r-m);border:1px solid var(--pl);background:var(--papier);text-decoration:none;font-weight:650;color:var(--encre);
  transition:border-color .4s,transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.art-corps .cartes-liens a:hover{border-color:rgba(37,99,235,.35);transform:translateY(-2px);box-shadow:0 22px 40px -30px rgba(29,78,216,.5);background:var(--papier)}

/* ── Formulaire de pré-audit des pages services (audit du 15/10/2026) ── */
.pa-form{margin-top:clamp(1.4rem,3vh,2rem);max-width:46rem}
.pa-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.5rem;padding:.5rem;border-radius:var(--r-l);background:rgba(11,20,40,.55);border:1px solid rgba(234,242,255,.16);transition:border-color .5s,box-shadow .5s}
.pa-fields.is-ready{border-color:rgba(147,197,253,.5);box-shadow:0 0 0 1px rgba(59,130,246,.3),0 0 44px -8px rgba(59,130,246,.45)}
.pa-field{display:flex;flex-direction:column;gap:.38rem;padding:.6rem .95rem .62rem;border-radius:var(--r-m);background:rgba(11,20,40,.8);border:1px solid rgba(234,242,255,.1)}
.pa-field:focus-within{border-color:rgba(96,165,250,.7);box-shadow:0 0 0 4px rgba(37,99,235,.22)}
.pa-field label{font:700 .6rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:rgba(234,242,255,.66)}
.pa-field input{width:100%;padding:0;border:0;outline:0;background:none;color:#F1F6FF;font:400 .98rem/1.4 var(--man)}
.pa-field input::placeholder{color:rgba(234,242,255,.42)}
.pa-btn{margin:0;width:auto;height:auto;min-height:3.3rem;white-space:nowrap;border-radius:calc(var(--r-l) - .5rem)}
.pa-btn:disabled{opacity:.6;cursor:progress}
.pa-ok,.pa-ko{margin-top:.7rem;font-size:.92rem}
.pa-ok{color:#93C5FD}.pa-ko{color:#FCA5A5}.pa-ko a{color:inherit;border-bottom:1px solid currentColor}
/* dans le bloc final (fond clair) */
.cta-r-form{align-items:stretch;min-width:min(100%,30rem)}
.cta-r-form .pa-form{margin-top:0;max-width:none}
.cta-r-form .pa-fields{grid-template-columns:minmax(0,1fr);background:#0B1428}
.cta-r-form .pa-ok{color:#1D4ED8}.cta-r-form .pa-ko{color:#B91C1C}
@media (max-width:760px){.pa-fields{grid-template-columns:minmax(0,1fr)}.pa-btn{width:100%}}