/* 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;
}

/* --- Articles : une seule arete gauche ------------------------------------ */
/* Les regles ci-dessus centrent la colonne de texte pour la faire coincider
   avec des titres centres. Sur une page de landing, ou une bande porte un titre
   et un paragraphe, ca marche. Dans un article, la meme bande porte en plus des
   listes et des tableaux qui passent en pleine largeur : trois bords gauches
   differents se retrouvaient dans une seule section (titre au bord du wrap,
   texte 126px plus loin, listes au bord du wrap). C'est l'escalier que ce
   fichier existe pour supprimer, reapparu par un autre chemin.

   Dans un article, tout part donc du meme bord gauche. La mesure de lecture de
   820px est conservee sur le texte courant : c'est la largeur qui change, pas
   l'alignement. Un texte long se lit mieux fer a gauche, un titre centre au
   dessus d'un paragraphe fer a gauche ne se lit pas.

   La specificite est calculee pour battre `section>.wrap>.sys-h2` (0,2,1) de
   style.css, d'ou le selecteur en trois crans plutot qu'un simple `.article-corps
   .sys-h2`. Aucun !important n'est necessaire. */
/* `margin-left` et `margin-right` autant que `text-align` : style.css centre la
   boite du titre (`section>.wrap>h2`, margin auto sur 820px) en plus d'en
   centrer le texte. Ne corriger que l'alignement laissait le titre 126px plus
   loin que tout le reste. */
section.article-corps > .wrap > .kicker,
section.article-corps > .wrap > .sys-h2,
section.article-corps > .wrap > h2 {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.article-corps .sys-p,
.article-corps .cmp-note,
.article-corps .implic-punch {
  margin-left: 0;
  margin-right: 0;
}

/* Le verbatim est borne a 480px dans la maquette, ou il sert de legende a cote
   d'un dossier client. Dans un article, c'est une citation de plein droit : elle
   rejoint la mesure du texte courant. */
.article-corps .lquote q {
  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);
}