/* ============================================================================
   Couche de mise en page commune aux lead magnets Ampliris.
   Chargée APRÈS le <style> de chaque page, donc elle l'emporte à specificité
   égale. Une seule source pour les douze guides.
   ========================================================================= */

/* ---------- En-tête de chapitre ----------
   Les guides reprennent le sur-titre du site tel quel, celui de l'accueil :
   le numéro en serif, le filet de 44 px, le libellé en capitales espacées.
   La pastille ronde de 50 px qui tenait ce rôle avant venait d'une autre
   direction artistique et sonnait dur à côté du reste des pages. Tout le
   traitement vient maintenant de model.css, on n'écrase plus rien ici. */
.shead{max-width:760px;}
.shead h2{margin:0;}
.shead + .g-body,.shead + .v-code,.shead + .v-list,
.shead + .shot,.shead + .cmd-wrap{margin-top:0;}

/* ---------- Alignement ----------
   Le site est calé à gauche, y compris l'accueil (.shead n'a pas de marge
   automatique, il faut la classe .mid pour centrer). Les guides suivent la
   même arête gauche, figures comprises. */
.g-body,.v-list,.v-note,.v-code,.shead,.shot,.cx-toc,.g-somm{
  margin-left:0;margin-right:0;}
.g-body{max-width:760px;}
.v-list{max-width:760px;margin-top:24px;margin-bottom:22px;}
.v-code,.v-note{max-width:800px;}
.shot{max-width:800px;margin-top:26px;}
.shot.wide{max-width:920px;}
.shot.narrow{max-width:540px;}
.cmd-wrap,.cx-steps,.cmd-scroll{max-width:920px;margin-left:0;margin-right:0;}

/* ---------- Rythme des chapitres ----------
   Une dizaine de chapitres au traitement identique se lisent comme une seule
   masse. Un fond alterné redonne un début et une fin à chacun. */
#gated > section:nth-of-type(even){background:var(--bone);}
#gated > section{padding-top:92px;padding-bottom:92px;}
@media (max-width:760px){
  #gated > section{padding-top:60px;padding-bottom:60px;}
  body.pg main .shead .eyebrow .no,.shead .eyebrow .no{width:44px;height:44px;font-size:19px;}
}

/* ---------- Finitions ----------
   Les blocs copiables et les captures prennent le même arrondi et la même
   ombre portée que les cartes du reste du site. */
.v-code{border-radius:18px;box-shadow:0 18px 40px -34px rgba(28,26,23,.5);}
.v-code pre{padding:20px 22px;}
.shot img{border-radius:18px;}

/* ---------- Sommaire du guide ----------
   Dix chapitres sans point d'entrée obligent à faire défiler pour savoir où
   l'on va. Une seule carte, partagée par les douze guides, quel que soit le
   nom de classe hérité de la page. */
.cx-toc,.g-somm{max-width:800px;margin:0 0 8px;padding:28px 32px 24px;background:#fff;
  border:1px solid var(--mist);border-radius:22px;box-shadow:0 18px 40px -34px rgba(28,26,23,.5);}
.cx-toc .lab,.g-somm-t{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--clay-600);margin-bottom:16px;}
.cx-toc ol{list-style:none;counter-reset:cx;padding:0;margin:0;}
.cx-toc li{counter-increment:cx;border-top:1px solid var(--mist);}
.cx-toc li:first-child{border-top:none;}
.cx-toc li a{display:flex;gap:16px;align-items:baseline;padding:11px 0;
  text-decoration:none;color:var(--ink);font-size:15.5px;font-weight:500;transition:.15s;}
.cx-toc li a::before{content:counter(cx,decimal-leading-zero);flex:none;width:26px;
  font-family:var(--serif);font-size:15px;font-weight:400;color:var(--clay-600);}
.cx-toc li a:hover{color:var(--clay-700);}
.g-somm a{display:flex;gap:16px;align-items:baseline;padding:11px 0;text-decoration:none;
  border-top:1px solid var(--mist);color:inherit;transition:.15s;}
.g-somm a:first-of-type{border-top:none;}
.g-somm a:hover b{color:var(--clay-700);}
.g-somm a .n{flex:none;font-family:var(--serif);font-size:15px;color:var(--clay-600);width:26px;}
.g-somm a b{font-weight:600;font-size:15.5px;color:var(--ink);margin-right:10px;}
.g-somm a span:last-child{font-size:14.5px;color:var(--graphite);line-height:1.5;}
@media (max-width:560px){
  .cx-toc,.g-somm{padding:24px 22px 20px;}
  .g-somm a{flex-wrap:wrap;gap:8px 16px;}
}

/* ---------- Hero ----------
   Plus rien ici. Le hero des guides est celui des pages intérieures du site
   (.hero-dark, voir /programme), et il est défini une seule fois dans
   model.css sous `body.pg main > .hero-c`. Le serif italique que cette
   feuille posait le 13/09 donnait un titre bien plus haut que celui des
   autres pages, Maël l'a jugé « trop gros, pas professionnel » le 20/09. */