/*
 * Layout — Le Poids des Mots
 * Conteneurs, grilles génériques, utilitaires typographiques et fonds de section
 * réutilisés sur l'ensemble des pages. Pas de style de "carte" ici (voir
 * components/cartes.css) : uniquement de la structure.
 */

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

/* ---- utilitaires typographiques ---- */
.kicker{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sourdine);margin:0}
.lede{font-size:19px;line-height:1.6;max-width:62ch}
.sourdine{color:var(--sourdine)}
.pile{display:flex;flex-direction:column;gap:14px}

/* ---- rythme des sections ---- */
section{padding-block:clamp(44px,5.6vw,74px)}
.page-tete{padding-block:clamp(40px,5vw,66px) clamp(30px,3.6vw,44px);border-bottom:1px solid var(--filet)}
.page-tete .wrap{display:flex;flex-direction:column;gap:16px}
.page-tete h1{font-size:clamp(32px,4.6vw,54px);letter-spacing:-.012em;max-width:20ch}
.section-tete{max-width:64ch;display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(24px,3.2vw,40px)}
.section-tete h2{font-size:clamp(27px,3.4vw,40px)}

.fond-taupe{background:var(--surface)}
.fond-kaki{background:var(--kaki-pale)}
.fond-peche{background:var(--peche-pale)}

/* ---- grilles génériques ---- */
.situations{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:0}
.situation{padding:20px 18px 24px;border-top:2px solid var(--encre)}
.situation:not(:first-child){border-inline-start:1px solid var(--filet)}
.situation .num{font-family:var(--serif);font-size:15px;color:var(--peche-fonce);display:block;margin-bottom:8px}

.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:1px;background:var(--filet);border:1px solid var(--filet)}
.cartes-4{grid-template-columns:repeat(auto-fit,minmax(226px,1fr))}

.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:clamp(20px,3vw,34px)}
.etapes-six{grid-template-columns:repeat(auto-fit,minmax(298px,1fr))}
.etape{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--filet-fort)}
.etape .rang{font-family:var(--serif);font-size:30px;color:var(--peche-fonce);line-height:1}
.etape h3{font-size:20px;font-family:var(--sans);font-weight:600;letter-spacing:-.005em}
.etape p{font-size:15px;color:var(--sourdine)}

.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(22px,3vw,40px)}

.voies{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1px;background:var(--filet);border:1px solid var(--filet);margin-top:28px}

.ecrits{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:clamp(18px,2.4vw,26px);align-items:start}

.rangs{display:flex;flex-direction:column}
.rang-item{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(16px,3vw,38px);padding-block:22px;border-top:1px solid var(--filet)}
.rang-item h3{font-size:24px}
.rang-item p{font-size:15.5px}
.rang-item:last-child{border-bottom:1px solid var(--filet)}

.reassurance{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--filet);border:1px solid var(--filet)}
.reassurance div{background:var(--papier);padding:18px 20px;display:flex;flex-direction:column;gap:3px}
.reassurance strong{font-weight:600;font-size:15px;color:var(--encre)}
.reassurance span{font-size:13.5px;color:var(--sourdine)}

/* ---- preuves chiffrées ---- */
.preuves{display:flex;flex-wrap:wrap;gap:clamp(24px,4.6vw,60px);align-items:flex-start}
.preuve .chiffre{font-family:var(--serif);font-size:clamp(40px,5vw,60px);color:var(--encre);line-height:1;font-variant-numeric:tabular-nums}
.preuve .quoi{font-size:14.5px;color:var(--sourdine);margin-top:8px;max-width:22ch}
.certifs{margin-top:30px;padding-top:20px;border-top:1px solid var(--filet);display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:13.5px;color:var(--sourdine)}
.certifs strong{font-weight:600;color:var(--texte)}

@media (max-width:900px){
  /* .fondatrice est traité dans components/cartes.css : cette feuille est
     chargée avant, une règle ici serait silencieusement écrasée. */
  .situation:not(:first-child){border-inline-start:none}
  .rang-item{grid-template-columns:1fr;gap:10px}
}
@media (max-width:640px){
  .page-tete h1{max-width:none}
}