/* LA MISE EN PAGE D'UN ARTICLE — commune à tous les articles du journal.

   L'article tenait en six blocs identiques : un titre, trois paragraphes, six
   fois. Clair, mais sans aucun relief. Ce qui suit pose le relief, avec le
   vocabulaire du site : le numéro en orange des étapes de l'accueil, les fonds
   sombres des sections « nos expertises », et rien d'autre.

   RÈGLE D'ALIGNEMENT : le chapeau, l'image d'en-tête et le corps partagent le
   MÊME cadre. Avant, le texte était rentré de 70 px par rapport à l'image ;
   la page y perdait de la largeur sans rien y gagner. */

.reading-heading,.reading-cover,.reading-layout{
  max-width:1250px;margin-left:auto;margin-right:auto;
  padding-left:30px;padding-right:30px;box-sizing:border-box}
.reading-layout{padding-top:70px;padding-bottom:90px}
/* La grille était centrée sur ses deux colonnes fixes : 70 px de jeu de chaque
   côté, et le texte rentrait par rapport à l'image. Elle occupe maintenant
   toute la largeur du cadre. Le sommaire commence au bord gauche de l'image,
   le texte finit au bord droit, et la colonne de lecture gagne 80 px sans
   devenir illisible (830 px, une mesure de lecture confortable).

   ⚠ SOUS CONDITION DE LARGEUR, et ce n'est pas décoratif : posée sans
   @media, cette règle écrasait le retour à une colonne d'articles.css — qui,
   lui, est déclaré à 800 px et passait donc AVANT dans la feuille. Résultat :
   sur téléphone la grille restait « 280 px + le reste », le reste valait
   zéro, et le corps de l'article était invisible. Signalé par Jonas. */
@media(min-width:901px){
  .reading-layout{grid-template-columns:280px minmax(0,1fr);gap:80px;
    justify-content:stretch}
}

/* ── le chapeau ────────────────────────────────────────────────────────────
   Centré, comme les héros de /contact et de /realisations : c'est la
   convention du site, un article n'a pas de raison d'y échapper. Le corps,
   lui, reste aligné à gauche — l'image fait la coupure entre les deux. */
.reading-heading{padding-top:130px;padding-bottom:46px;text-align:center}
.reading-heading>a{display:inline-block;margin-bottom:4px}
.reading-heading h1{margin-left:auto;margin-right:auto;max-width:950px}
/* le chapô ne dépasse pas une largeur lisible, même si le cadre fait 1190 px */
.reading-heading>p:last-of-type{max-width:640px;margin-left:auto;margin-right:auto;
  font-size:18px;line-height:1.62;color:#2c3c41}

/* ── une partie : son numéro, son titre, son texte ─────────────────────── */
.reading-body>section{position:relative;padding-top:54px}
.reading-body>section:first-child{padding-top:0}
.reading-body>section>h2{position:relative;padding-top:6px}

/* le numéro : au-dessus du titre sur une ligne à lui, comme « 01 — COMPRENDRE » */
.reading-body>section[data-num]>h2:before{content:attr(data-num);display:block;
  margin-bottom:12px;font-size:12px;letter-spacing:.22em;font-weight:700;
  color:#ff7526}

/* le premier paragraphe de l'article entre en plus grand */
.reading-body>section:first-child>p:first-of-type{font-size:18px;line-height:1.68;
  color:#1c2c31}

/* ── la fiche d'un outil ───────────────────────────────────────────────── */
.fiche-outil{margin:26px 0 6px;border-top:2px solid #101719;
  border-bottom:1px solid #10171922;padding:18px 0 16px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px}
.fiche-outil>div>dt{margin:0 0 5px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:#7b8a8f}
.fiche-outil>div>dd{margin:0;font-size:14px;line-height:1.5;color:#101719}
.fiche-outil .fiche-prix dd{font-weight:700}
.fiche-lien{grid-column:1/-1;margin:2px 0 0}
.fiche-lien a{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  font-weight:700;letter-spacing:.02em;color:#125469;text-decoration:none;
  border-bottom:2px solid #ff7526;padding-bottom:2px;transition:color .2s}
.fiche-lien a:hover{color:#ff7526}
.fiche-lien a:after{content:"↗";font-weight:400}

/* ── l'épreuve d'une règle ─────────────────────────────────────────────────
   Le pendant de la fiche d'un outil, pour un article de conseils : sous
   chaque règle, la vérification que le lecteur peut faire lui-même. Une
   règle qu'on ne sait pas vérifier n'est qu'un avis. */
.epreuve{margin:24px 0 6px;border-left:3px solid #125469;background:#12546910;
  padding:16px 20px 15px}
.epreuve dt{margin:0 0 6px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:#125469}
.epreuve dd{margin:0;font-size:15px;line-height:1.6;color:#101719;text-align:left}

/* ── la signature d'un outil cité ─────────────────────────────────────────
   Quand un article parle d'un produit qu'on assume, son logo a sa place dans
   le texte. Une bande sombre, la marque, une ligne, un lien. Pas un encart
   publicitaire clignotant : un cartouche, comme une légende de photo. */
.signature{margin:32px 0 8px;background:#101719;color:#f8f5ed;padding:30px 32px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.signature img{display:block;width:210px;height:auto;flex:none}
.signature p{margin:0;flex:1 1 240px;font-size:15px;line-height:1.6;
  color:#cfd6d8;text-align:left}
.signature a{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;
  color:#f8f5ed;text-decoration:none;border-bottom:2px solid #ff7526;
  padding-bottom:2px;transition:color .2s}
.signature a:hover{color:#ff7526}

/* ── le tableau de mesures ─────────────────────────────────────────────────
   Une affirmation chiffrée se montre, elle ne se raconte pas. Trois colonnes :
   ce qu'on mesure, avant, après, et le rapport en orange. */
.mesures{width:100%;border-collapse:collapse;margin:26px 0 8px;font-size:15px}
.mesures caption{caption-side:top;text-align:left;margin-bottom:12px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:#7b8a8f}
.mesures th,.mesures td{text-align:left;padding:11px 14px 11px 0;
  border-bottom:1px solid #10171914;vertical-align:baseline}
.mesures thead th{border-bottom:2px solid #101719;padding-bottom:9px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#101719}
.mesures tbody th{font-weight:400;color:#2c3c41}
.mesures td{color:#101719;white-space:nowrap}
.mesures td:last-child{padding-right:0;font-weight:700;color:#ff7526;text-align:right}
.mesures tbody tr:last-child th,.mesures tbody tr:last-child td{border-bottom:0}

/* ── la phrase sortie du texte ─────────────────────────────────────────── */
/* le corps est justifié ; une phrase mise en avant, non : les blancs entre
   les mots s'y voient tout de suite. */
.reading-body .parole,.reading-body .fiche-outil dd,.reading-bande figcaption{
  text-align:left;hyphens:none}
.reading-body .parole{margin:30px 0;padding:0 0 0 22px;border-left:3px solid #ff7526;
  font-size:23px;line-height:1.38;letter-spacing:-.01em;font-weight:700;
  color:#125469}

/* ── un bandeau d'image, à la largeur du corps ─────────────────────────── */
.reading-bande{margin:38px 0 4px}
.reading-bande img{display:block;width:100%;height:auto;border-radius:5px;
  aspect-ratio:2.6}
.reading-bande figcaption{margin-top:10px;font-size:12px;letter-spacing:.02em;
  color:#7b8a8f}

/* ── la dernière partie change de terrain ──────────────────────────────
   Elle ferme la page : plus rien après. Le formulaire de contact et les
   articles liés en sont sortis, ils diluaient l'action. Deux sorties, pas
   dix : écrire, ou revenir au blog. */
.reading-fin{background:#101719;color:#f8f5ed;margin-top:96px;padding:88px 5.3% 88px}
.reading-fin-cadre{max-width:1250px;margin:0 auto;padding:0 30px;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:70px;align-items:center}
.reading-fin p.eyebrow{margin:0 0 20px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:#ff7526}
.reading-fin h2{margin:0 0 26px;font-size:clamp(30px,3.4vw,44px);line-height:1.08;
  letter-spacing:-.02em;font-weight:700}
.reading-fin-texte p{margin:0 0 16px;font-size:17px;line-height:1.72;color:#cfd6d8;
  text-align:justify;hyphens:auto}
.reading-fin-texte h2,.reading-fin p.eyebrow{text-align:left}
.reading-fin-image{margin:0}
/* l'image ne dicte pas la hauteur de la bande : sans ce plafond elle fait
   620 px et la conclusion devient plus haute qu'une section entière. */
.reading-fin-image img{display:block;width:100%;height:auto;max-height:470px;
  object-fit:cover;object-position:center;border-radius:5px}

/* les deux seules actions de la page */
.reading-fin-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-top:30px}
.reading-fin .reading-cta{display:inline-block;padding:17px 32px;background:#ff7526;
  color:#101719;font-weight:700;font-size:15px;text-decoration:none;border:0;
  transition:background .2s}
.reading-fin .reading-cta:hover{background:#f8f5ed}
.reading-fin .reading-retour{display:inline-block;padding:17px 0;color:#f8f5ed;
  font-weight:700;font-size:15px;text-decoration:none;
  border-bottom:2px solid #ffffff33;transition:border-color .2s}
.reading-fin .reading-retour:hover{border-bottom-color:#ff7526}

@media(max-width:900px){
  .reading-heading,.reading-cover,.reading-layout,.reading-fin-cadre{
    padding-left:6%;padding-right:6%}
  .reading-heading{padding-top:92px;padding-bottom:30px}
  .reading-heading h1{max-width:none}
  .reading-layout{padding-top:34px;padding-bottom:54px;display:block}
  /* Le sommaire ne sert à rien sur un téléphone : empilé au-dessus du texte,
     il repousse l'article de 300 px sans qu'on s'en serve, puisqu'on scrolle.
     Les ancres restent dans la page, donc Google peut toujours les proposer
     dans ses résultats. */
  .reading-toc{display:none}
  .reading-heading>p:last-of-type{font-size:17px}
  .reading-body>section{padding-top:38px}
  /* le texte justifié tient sur 830 px, pas sur 343 : sur téléphone il creuse
     des rivières blanches entre les mots. Drapeau à droite. */
  .reading-body p{text-align:left;hyphens:none}
  .fiche-outil{grid-template-columns:1fr;gap:14px;padding:16px 0 14px}
  /* 10 px passe sur un écran de bureau, pas sur un téléphone ; et le lien de
     l'outil doit faire 44 px de haut comme tous les liens du site. */
  .fiche-outil>div>dt{font-size:12px;letter-spacing:.14em}
  .fiche-outil>div>dd{font-size:15px}
  .fiche-lien a{padding:12px 0;font-size:14px}
  .epreuve{padding:14px 16px 13px;margin:20px 0 4px}
  .epreuve dt{font-size:12px}
  /* les étiquettes en capitales : 11 px passe sur un écran de bureau,
     pas sur un téléphone. */
  .reading-heading .eyebrow,.reading-toc>p,.reading-fin p.eyebrow{font-size:12px}
  .reading-heading>a{padding:10px 0}
  .epreuve dd{font-size:15px}
  /* le tableau ne tient pas sur 343 px : il défile dans son propre cadre
     plutôt que de pousser la page. */
  .mesures{display:block;overflow-x:auto;white-space:nowrap;font-size:14px}
  .mesures th,.mesures td{padding-right:18px}
  .signature{flex-direction:column;align-items:flex-start;gap:18px;
    padding:24px 22px;margin:26px 0 6px}
  .signature img{width:180px}
  .signature a{padding:10px 0 4px}
  .reading-body .parole{font-size:20px;margin:24px 0;padding-left:16px}
  .reading-bande{margin:28px 0 2px}
  .reading-fin{margin-top:54px;padding:56px 0 52px}
  .reading-fin-cadre{grid-template-columns:1fr;gap:32px}
  /* l'image passe sous le texte, mais AVANT les boutons : les deux actions
     doivent rester la dernière chose de la page. */
  .reading-fin-image{order:-1}
  .reading-fin h2{font-size:28px}
  .reading-fin-texte p{font-size:16px;text-align:left;hyphens:none}
  .reading-fin-actions{margin-top:24px;gap:10px}
  .reading-fin .reading-cta,.reading-fin .reading-retour{width:100%;
    text-align:center;box-sizing:border-box}
  .reading-fin .reading-retour{padding:15px 0}
}