/* ============================================================
   leplanretraite.fr : grille modulaire (Müller-Brockmann)
   Une seule source de vérité : les variables :root ci-dessous
   servent au contenu ET au calque de grille (touche G).
   12 colonnes, ligne de base 8 px, interlignage 24 px.
   ============================================================ */
:root{
  --cols:12;
  --bl:8px;                 /* unité de ligne de base */
  --lh:24px;                /* interlignage = 3 x ligne de base */
  --gutter:24px;
  --margin:72px;
  --pad:96px;               /* marge haute et basse d'une planche (12 x 8) */
  --maxw:1296px;

  /* Palette Épargne Plurielle (bleu nuit et or), papier blanc */
  --paper:#FFFFFF;
  --paper-2:#FAF7F2;
  --ink:#111315;
  --ink-soft:#5B6066;
  --navy:#0E2444;
  --navy-2:#1F3A66;
  --gold:#B89860;
  --gold-deep:#8B6F3D;
  --gold-pale:#F1E9D8;
  --line:#D9D4C7;
  --red:#BE2518;
  --green:#2F8F6B;
  --accent:var(--gold);

  /* Calque de grille */
  --g-col:rgba(184,152,96,.10);
  --g-edge:rgba(184,152,96,.55);
  --g-base:rgba(14,36,68,.22);
  --g-base-min:rgba(14,36,68,.08);
}
@media (max-width:1024px){ :root{ --margin:32px; --pad:64px; } }
@media (max-width:640px){ :root{ --margin:16px; --pad:48px; } }

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:var(--lh);
  font-feature-settings:"kern","liga","calt","ss01","cv11";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img,svg{display:block;max-width:100%;}

/* ---- planche + grille (une seule source de vérité) ---- */
.spread{position:relative;width:100%;}
.wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding:var(--pad) var(--margin);}
.wrap.tight{padding-top:calc(var(--bl) * 3);padding-bottom:calc(var(--bl) * 3);}
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);
  column-gap:var(--gutter);row-gap:var(--lh);}
/* une bande occupe toutes les colonnes et les ré-expose à ses enfants (subgrid) */
.band{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;
  column-gap:var(--gutter);row-gap:var(--lh);align-items:start;}
@supports not (grid-template-columns:subgrid){
  .band{grid-template-columns:repeat(var(--cols),1fr);}
}
.band.mid{align-items:center;}
.band.end{align-items:end;}
.band.gap0{row-gap:0;}

/* placement par ligne de colonne */
.s1-13{grid-column:1 / 13;} .s1-7{grid-column:1 / 7;} .s7-13{grid-column:7 / 13;}
.s1-5{grid-column:1 / 5;} .s5-9{grid-column:5 / 9;} .s9-13{grid-column:9 / 13;}
.s1-4{grid-column:1 / 4;} .s4-7{grid-column:4 / 7;} .s7-10{grid-column:7 / 10;} .s10-13{grid-column:10 / 13;}
.s1-9{grid-column:1 / 9;} .s5-13{grid-column:5 / 13;} .s1-6{grid-column:1 / 6;} .s6-13{grid-column:6 / 13;}
.s1-8{grid-column:1 / 8;} .s8-13{grid-column:8 / 13;} .s2-12{grid-column:2 / 12;} .s3-11{grid-column:3 / 11;}
.s4-10{grid-column:4 / 10;} .s2-8{grid-column:2 / 8;} .s8-12{grid-column:8 / 12;} .s4-13{grid-column:4 / 13;}
.s1-10{grid-column:1 / 10;} .s10-13{grid-column:10 / 13;} .s1-3{grid-column:1 / 3;} .s3-13{grid-column:3 / 13;}
.s3-7{grid-column:3 / 7;} .s7-11{grid-column:7 / 11;} .s9-13{grid-column:9 / 13;} .s2-6{grid-column:2 / 6;}
.s6-10{grid-column:6 / 10;} .s6-9{grid-column:6 / 9;} .s5-13{grid-column:5 / 13;}
@media (max-width:1024px){
  .band > [class*="s"]{grid-column:1 / -1;}
  .band > .t1-7{grid-column:1 / 7;} .band > .t7-13{grid-column:7 / 13;}
  .band > .t1-5{grid-column:1 / 5;} .band > .t5-9{grid-column:5 / 9;} .band > .t9-13{grid-column:9 / 13;}
}
@media (max-width:640px){
  .band > *{grid-column:1 / -1 !important;}
}

/* ---- calque de grille (même boîte de contenu : les colonnes coïncident) ---- */
.guides{position:absolute;inset:0;pointer-events:none;z-index:60;opacity:0;transition:opacity .26s ease;}
body.grid-on .guides{opacity:1;}
.guides .cols{position:absolute;top:0;bottom:0;left:var(--margin);right:var(--margin);
  display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--gutter);}
.guides .col{background:var(--g-col);box-shadow:inset 1px 0 0 var(--g-edge),inset -1px 0 0 var(--g-edge);position:relative;}
.guides .col span{position:absolute;top:32px;left:0;right:0;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1;color:var(--gold-deep);}
.guides .rows{position:absolute;left:var(--margin);right:var(--margin);top:var(--pad);bottom:0;
  background-image:
    repeating-linear-gradient(to bottom,var(--g-base) 0 1px,transparent 1px var(--lh)),
    repeating-linear-gradient(to bottom,var(--g-base-min) 0 1px,transparent 1px var(--bl));}
.guides .mline{position:absolute;top:0;bottom:0;width:1px;background:var(--g-edge);}
.guides .mline.l{left:var(--margin);} .guides .mline.r{right:var(--margin);}

/* bouton d'affichage de la grille : discret, dans le pied de page (et touche G) */
.toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;color:inherit;border:0;cursor:pointer;
  font:inherit;font-size:12px;line-height:24px;letter-spacing:.12em;text-transform:uppercase;padding:0;}
.toggle .dot{width:8px;height:8px;border-radius:50%;background:var(--line);}
body.grid-on .toggle .dot{background:var(--gold);}