/* Ajustements de largeur — 13/08/2026
 *
 * Charge apres style.css, qui n'est pas modifie : les regles d'origine restent
 * lisibles et cet ecart-ci est isole, donc reversible en retirant le <link>.
 *
 * Probleme corrige. Dans une meme section, jusqu'a quatre largeurs se
 * superposaient : conteneur a 1120px, titres a 820, prose entre 600 et 760,
 * listes et FAQ a 860. Les bords droits formaient un escalier, et le texte
 * paraissait tasse sous des titres deux fois plus larges. Un balayage des
 * 14 pages a releve 35 sections dans ce cas.
 *
 * Regle retenue : la colonne de texte adopte la largeur de son titre (820px),
 * et les blocs structures occupent toute la largeur de la section.
 *
 * 820px correspond a environ 90 signes par ligne, la limite haute du confort
 * de lecture. Aller au-dela alignerait tout au prix de la lisibilite.
 *
 * Seul `max-width` est redefini : les marges d'origine sont conservees, donc
 * les blocs centres (`margin: 0 auto`) le restent.
 *
 * Les selecteurs reprennent la specificite des regles d'origine — `.conv .sub`
 * (0,2,0) bat un simple `.sub` (0,1,0) quel que soit l'ordre de chargement.
 * Aucun !important n'est donc necessaire.
 */

/* --- Colonne de texte alignee sur la largeur des titres ------------------- */
.sys-p,
.os-lead,
.cmap-sub,
.apres-chute,
.what .lead,
.ahero p.lead,
.parcours .sub,
.apres .sub,
.team .sub,
.conv .sub,
.niveaux .sub,
.implic .sub,
.vals .sub,
.preuve .sub2,
.final p,
.pivot p,
.ia p,
.pain-sub,
.legal p,
.cmp-note,
.ia .punchline,
.implic-punch,
.ia p,
.pivot p {
  max-width: 820px;
}

/* Les titres de section sont en `text-align:center` et centres dans le
   conteneur. Une colonne de texte plus etroite calee a gauche ne se superposait
   donc pas a son titre : bord gauche a 185px sous un titre commencant a 330.
   Centrer la colonne la fait coincider avec le titre, sans toucher a la mesure
   de lecture. Les blocs qui occupent deja toute la largeur sont symetriques par
   construction et ne sont pas concernes. */
.sys-p,
.os-lead,
.cmap-sub,
.what .lead,
.parcours .sub,
.apres .sub,
.team .sub,
.conv .sub,
.niveaux .sub,
.implic .sub,
.vals .sub,
.preuve .sub2,
.pain-sub,
.legal p,
.lkpis,
.cmp-note,
.ia .punchline,
.implic-punch,
.ia p,
.pivot p {
  margin-left: auto;
  margin-right: auto;
}

/* Le bandeau de chiffres cles s'intercale entre deux paragraphes : il rejoint
   la meme colonne, sinon il repartait seul du bord gauche au milieu d'un bloc
   deja aligne sur le titre. */
.lkpis {
  max-width: 820px;
}

/* --- Blocs structures : pleine largeur de la section ---------------------- */
/* Listes numerotees, accordeons, echo du diagnostic : ce sont des objets, pas
   du texte courant. Les contraindre a la mesure de lecture les detachait
   visuellement du reste de la section. */
.implic-list,
.conv-list,
.sys-apres,
.faq-item .a,
.apres-echo {
  max-width: none;
}

/* Une reponse de FAQ redevient du texte courant une fois l'accordeon ouvert :
   elle garde donc une mesure de lecture, appliquee au paragraphe plutot qu'au
   conteneur, pour que le bandeau lui-meme reste pleine largeur. */
.faq-item .a > p {
  max-width: 820px;
}

/* --- Exception assumee ---------------------------------------------------- */
/* `.hero p.lead` (560px) reste etroit : c'est le chapeau du hero d'accueil,
   une composition isolee ou la respiration est voulue, et le balayage ne l'a
   pas signale comme desaligne. */

/* --- Coche invisible sur la derniere ligne du diagnostic ------------------ */
/* Defaut present a l'identique dans la maquette d'origine, pas introduit par
   le portage. Les rectangles du SVG de la ligne « Et au fond : tout repose sur
   vous » portent un fill="#FFFFFF" en dur, sans doute pose en supposant une
   case sombre. Or `.diag-row.dark .dbox` impose un fond blanc, comme sur les
   autres lignes : la coche etait donc blanche sur blanc, donc invisible.
   Elle reprend le corail des cinq autres lignes, deja utilise pour la bordure
   de cette meme case. La propriete CSS `fill` l'emporte sur l'attribut de
   presentation du SVG, il n'y a donc rien a changer dans le contenu. */
.diag-row.dark .dbox svg rect {
  fill: var(--corail);
}