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

/* --- Debordement horizontal sur mobile, 10/10/2026 ------------------------ */
/* Sur telephone, la page glissait de gauche a droite : un element plus large
   que l'ecran suffit a elargir toute la page. Un balayage des 37 pages a 320,
   375, 390 et 414px a releve les causes corrigees ci-dessous, plus les listes
   de liens sans espace autour du point median (corrigees dans le balisage). */

/* Liens de maillage sous l'appel final (composant LiensMaillage, et le meme
   bloc en HTML sur /logiciel-sur-mesure). Remplace le style en ligne que
   chaque gabarit recopiait, a l'identique : `.final .liens-maillage` (0,2,0)
   doit battre `.final p` (0,1,1), qui imposerait 18px et une marge haute
   nulle. Le point median reprend les 6px de part et d'autre de l'ancienne
   marge des liens, l'espace qui le suit en fournissant une partie. */
.final .liens-maillage {
  margin-top: 30px;
  font-size: 14px;
  font-weight: 600;
}
.liens-maillage .sep {
  margin: 0 2px 0 6px;
}

/* Cartes de /ressources : le nombre de colonnes vient de `--colonnes`, posee
   par CartesRessources. Sous 701px, une seule colonne, comme `.val-list`. */
.val-list.cartes-ressources {
  grid-template-columns: repeat(var(--colonnes, 3), 1fr);
}
@media (max-width: 700px) {
  .val-list.cartes-ressources {
    grid-template-columns: 1fr;
  }
}

/* DeuxColonnes (/cto, /secteur, /logiciel) : meme piege, ses deux colonnes
   etaient figees en style en ligne et ne se repliaient jamais. */
.dcols.deux-colonnes {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) {
  .dcols.deux-colonnes {
    grid-template-columns: 1fr;
  }
}

/* La flamme du hero d'accueil depassait de 26px a droite de la video. Avec la
   marge laterale de 24px du `.wrap`, elle sortait de l'ecran. */
@media (max-width: 900px) {
  .orbit-flame {
    right: -12px;
  }
}

/* Les enfants d'une grille ne descendent pas sous la largeur de leur contenu
   (min-width: auto) : a 320px, les dossiers clients restaient a 300px dans
   272px disponibles. */
.dbody-grid > *,
.dcols > * {
  min-width: 0;
}

/* Chiffres cles des dossiers clients (accueil et pages ville) : deux blocs
   de 150px fixes, soit 300px qui ne tenaient plus dans un telephone. Ils
   gardent leurs 150px tant que la place existe (bureau inchange) et se
   resserrent ensemble en dessous, jusqu'a la largeur de leur plus long mot. */
.dbody-grid .lk {
  flex: 0 1 150px;
}
/* A l'accueil, le bloc est centre dans sa colonne par des marges automatiques
   (voir plus haut) : il prend alors la largeur de son contenu, 300px, et ne
   peut plus retrecir. Pleine largeur et contenu centre : meme position en
   bureau, et les chiffres peuvent se resserrer sur mobile. */
.dbody-grid .dcols > .lkpis {
  width: 100%;
  justify-content: center;
}

/* L'etiquette « 3 pans de votre metier > hors systeme » ne se coupe pas : a
   320px elle depasse de l'ecran. Sous 400px, elle passe sur deux lignes. */
@media (max-width: 400px) {
  .fit-status {
    white-space: normal;
    width: max-content;
    max-width: calc(100vw - 48px);
    text-align: center;
    line-height: 1.5;
  }
}

/* En-tete a 320px : logo, Contact et burger depassaient de 3px. */
@media (max-width: 359px) {
  .nav-inner {
    gap: 6px;
    padding: 10px 10px;
  }
  .nav-logo svg,
  .nav-logo img {
    height: 28px;
  }
  .nav-links {
    gap: 6px;
  }
}

/* Un mot plus large que sa ligne se coupe au lieu de deborder : l'adresse
   email saisie dans le diagnostic est reaffichee sur l'ecran de resultat, et
   une adresse longue poussait la page de 13px a 320px. Valable pour tout texte
   saisi ou colle (URL, email). `break-word` ne coupe que les mots qui ne
   tiennent pas, le reste du texte n'est pas touche.

   Pas de filet `overflow-x` ici : style.css pose deja `overflow-x: hidden` sur
   le body, et Safari iOS elargit malgre tout la page au contenu qui deborde.
   La seule protection fiable est que rien ne deborde, ce que tiennent
   lib/debordement-mobile.test.ts et LiensMaillage. */
body {
  overflow-wrap: break-word;
}