/* ══════════════════════════════════════════════════════════════════════════
   Le corps d'article — la feuille que chargent la page publique du Blog ET
   l'aperçu de l'administration.

   La première moitié est RECOPIÉE À L'IDENTIQUE du <style> des douze articles
   écrits à la main : mêmes sélecteurs, mêmes valeurs. C'est volontaire — le
   rendu du Blog doit être indiscernable de celui des pages existantes, et ces
   douze pages ne sont pas modifiées. Corriger l'apparence du corps d'article,
   c'est corriger ici PUIS reporter dans les douze pages, pas l'inverse.

   La seconde moitié couvre les blocs que les pages écrites à la main n'ont
   jamais eus (citation, galerie, vidéo, appel à l'action, carte de voyage,
   sommaire) : elle prolonge le vocabulaire, elle ne le contredit pas.

   Dépend des variables de css/commun.css (--encre, --gris, --cat, --titre…) :
   cette feuille se charge APRÈS.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── recopié des douze articles : ne pas diverger ── */
/* 800 px jusqu’au 4 septembre 2026. Thomas : « chaque article et chaque
   dossier, qui ne sont pas larges par ailleurs ». Même largeur que les
   autres pages du site — le gabarit du blog l’élargit avec elle. */
.corps-art { max-width: min(1280px, 92vw); margin: 0 auto; padding: 0 24px; }
.corps-art h2 {
  font-family: var(--titre); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.28;
  color: var(--encre); margin: 40px 0 14px; scroll-margin-top: 90px;
}
.corps-art p { font-size: 17px; line-height: 1.78; color: #33415f; margin: 0 0 18px; }
.corps-art a { color: var(--lien, #1a4bb8); font-weight: 600; }
.corps-art a:hover { color: #b57f22; }
.corps-art ul { margin: 0 0 20px; padding-left: 0; list-style: none; }
.corps-art ul li {
  font-size: 16.5px; line-height: 1.72; color: #33415f; margin: 0 0 12px;
  padding-left: 28px; position: relative;
}
.corps-art ul li::before {
  content: ""; position: absolute; left: 6px; top: 11px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--cat);
}
.corps-art ul b { color: var(--encre); }
.encadre {
  background: rgba(16,39,90,.045); border-left: 3px solid var(--cat);
  border-radius: 0 14px 14px 0; padding: 20px 24px; margin: 28px 0;
}
/* LE SÉLECTEUR PASSE PAR `.corps-art`, ET IL LE FAUT. `.corps-art h3`, plus
   bas, est plus spécifique que `.encadre h3` : le titre d'un encadré prenait
   donc la taille d'un intertitre (19,5 px au lieu de 16) et sa marge du haut
   (30 px), qui s'ajoutait aux 20 px de rembourrage. L'encadré des aéroports
   de Moscou avait cinquante pixels de vide au-dessus de son titre, pour
   quatre lignes de texte. Signalé par Thomas le 1er septembre 2026. */
.corps-art .encadre h3, .encadre h3 {
  font-family: var(--titre); font-size: 16px; line-height: 1.35;
  margin: 0 0 8px; color: var(--encre); scroll-margin-top: 0;
}
.corps-art .encadre p, .encadre p { font-size: 15.5px; line-height: 1.68; margin: 0; color: var(--gris-fonce); }
.corps-art .encadre { padding: 18px 22px; }
.credit-photo { font-size: 12px; color: #8494b4; margin: 34px 0 0; font-style: italic; }

/* ── ce que le renderer ajoute ── */

/* Le bloc est une simple enveloppe : elle porte l'identifiant stable, pour
   que l'administration puisse surligner dans l'aperçu le bloc en cours
   d'édition. Elle ne doit rien changer à la mise en page. */
.corps-art .bloc { display: contents; }

.corps-art h3 {
  font-family: var(--titre); font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.32;
  color: var(--encre); margin: 30px 0 12px; scroll-margin-top: 90px;
}
.corps-art h4 {
  font-family: var(--titre); font-size: 1rem; line-height: 1.4;
  color: var(--gris-fonce); margin: 24px 0 10px; scroll-margin-top: 90px;
}
.corps-art ol { margin: 0 0 20px; padding-left: 22px; }
.corps-art ol li { font-size: 16.5px; line-height: 1.72; color: #33415f; margin: 0 0 12px; }

/* Le sommaire : discret, ancré, et absent quand il n'y a qu'un titre. */
.sommaire-art {
  background: rgba(16,39,90,.035); border: 1px solid var(--bordure);
  border-radius: 14px; padding: 18px 22px; margin: 0 0 30px;
}
.sommaire-art__titre {
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--gris); margin: 0 0 10px;
}
.sommaire-art ol { margin: 0; padding-left: 20px; }
.sommaire-art li { font-size: 15px; line-height: 1.6; margin: 0 0 6px; color: var(--gris-fonce); }
.sommaire-art a { color: var(--gris-fonce); font-weight: 500; }
.sommaire-art a:hover { color: var(--accent); }

.citation {
  margin: 30px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent);
}
.citation p { font-size: 18.5px; line-height: 1.7; color: var(--encre); font-style: italic; margin: 0; }
.citation cite {
  display: block; margin: 10px 0 0; font-size: 13px; font-style: normal;
  letter-spacing: .04em; color: var(--gris);
}

.hr.sep-art, hr.sep-art {
  border: 0; height: 1px; margin: 40px auto; max-width: 180px;
  background: linear-gradient(90deg, transparent, var(--bordure) 30%, var(--bordure) 70%, transparent);
}

.figure-art { margin: 30px 0; }
.figure-art img { width: 100%; height: auto; display: block; border-radius: 14px; }
.figure-art figcaption,
.video-art figcaption {
  font-size: 13px; line-height: 1.6; color: var(--gris); margin: 10px 2px 0;
}
.figure-art .credit, .video-art .credit { color: #8494b4; font-style: italic; }

.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 30px 0; }
.galerie__item { margin: 0; }
.galerie__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; border-radius: 12px; }
.galerie__item figcaption { font-size: 12.5px; color: var(--gris); margin: 8px 2px 0; }
@media (max-width: 640px) { .galerie { grid-template-columns: 1fr; } }

.video-art { margin: 30px 0; }
.video-art__cadre { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--espace); }
.video-art__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-art__lien {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; text-align: center; padding: 20px;
}

.cta-art {
  background: linear-gradient(170deg, var(--espace), #13306c); border-radius: 18px;
  padding: 26px 28px; margin: 34px 0; text-align: center;
}
.cta-art h3 { font-family: var(--titre); font-size: 1.15rem; color: #fff; margin: 0 0 10px; }
.cta-art p { font-size: 15.5px; line-height: 1.68; color: rgba(255,255,255,.86); margin: 0 0 18px; }
.cta-art .btn { margin: 0; }

/* La carte de voyage est le seul bloc qui vend : elle reprend l'ombre et le
   liseré des cartes du catalogue, pour qu'on la reconnaisse au premier coup
   d'œil comme une proposition et non comme un lien d'article. */
.carte-voyage {
  display: grid; grid-template-columns: 200px 1fr; gap: 0; margin: 34px 0;
  border: 1px solid var(--bordure); border-radius: 16px; overflow: hidden;
  background: var(--blanc); color: inherit; font-weight: 400;
  transition: box-shadow .2s ease, transform .2s ease;
}
.carte-voyage:hover { box-shadow: 0 12px 30px rgba(16,39,90,.12); transform: translateY(-2px); }
.carte-voyage__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-voyage__corps { padding: 20px 24px; }
.carte-voyage__oeil {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--accent); margin: 0 0 8px;
}
.carte-voyage h3 { font-family: var(--titre); font-size: 1.1rem; color: var(--encre); margin: 0 0 8px; }
.carte-voyage p { font-size: 15px; line-height: 1.62; color: var(--gris-fonce); margin: 0 0 10px; }
.carte-voyage__meta { font-size: 13px; color: var(--gris); }
@media (max-width: 640px) {
  .carte-voyage { grid-template-columns: 1fr; }
  .carte-voyage__photo img { aspect-ratio: 16 / 9; }
}

.lien-interne {
  border-left: 3px solid var(--bordure); padding: 2px 0 2px 16px; margin: 26px 0;
  font-size: 15.5px !important; line-height: 1.6 !important;
}
.lien-interne span { color: var(--gris); }

/* ─────────────────────────────────────── les réglages du schéma v3

   L'éditeur peut poser un alignement sur un paragraphe ou un titre, et une
   largeur sur une image. Le renderer ne rend ces classes que si le document
   les porte : sans elles, un article garde exactement l'aspect qu'il avait.

   PAS DE `float` POUR LES IMAGES, et c'est délibéré. Une image flottante à
   40 % est jolie sur un écran d'ordinateur et illisible sur un téléphone, où
   la colonne fait 330 px : il reste quatre mots par ligne à côté. L'image
   alignée reste donc dans le flux, et c'est sa marge qui la pousse d'un côté
   ou de l'autre. En dessous de 640 px, toute image reprend la pleine largeur. */
.al--gauche { text-align: left; }
.al--centre { text-align: center; }
.al--droite { text-align: right; }
.al--justifie { text-align: justify; }

.figure-art.fig--gauche { margin-left: 0; margin-right: auto; }
.figure-art.fig--centre { margin-left: auto; margin-right: auto; }
.figure-art.fig--droite { margin-left: auto; margin-right: 0; }
.figure-art.fig--centre figcaption { text-align: center; }

@media (max-width: 640px) {
  .figure-art[style] { width: 100% !important; }
}

/* LE TÉLÉPHONE, ET UN LECTEUR QUI N'A PLUS VINGT ANS — même bloc que
   css/commun.css, où il est expliqué en entier. Les articles se lisent au
   téléphone plus qu'ailleurs, et le public de l'agence est plutôt âgé. */
@media (max-width: 767px) {
  .article__corps p, .article__corps li, .encadre-art p,
  .carte-art .corps p, .carte-art p { font-size: 16px; line-height: 1.68; }
  .signes, .credit-photo, .news__note, .fil { font-size: 14px; }
  .filtres a, .rubriques a { min-height: 44px; align-items: center; }
  .missions p, .manque p, .etapes p, .lectures p, .porte-cli__boite > p,
  .porte-cli__essai, .porte-cli__retour, .voisines a p,
  .grille-liens a p { font-size: 16px; line-height: 1.62; }
  .porte-cli__intro, .aide-porte, .avis-maquette { font-size: 14px; }
  .fil a { padding: 9px 0; margin: -9px 0; }
}

/* ── LA LIGNE DE LA LETTRE, au milieu de l'article ──
   Thomas, 2 septembre 2026 : « une ligne qui rappelle qu'ils peuvent
   s'inscrire, vers le milieu de l'article ». Une ligne, pas une bande : le
   lecteur est en train de lire, on ne lui coupe pas la page en deux. */
.corps-art .lettre-ligne {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  margin: 34px 0; padding: 18px 22px;
  background: #f4f6fc; border: 1px solid rgba(224,163,60,.55); border-left: 4px solid var(--accent);
  border-radius: 14px;
}
.corps-art .lettre-ligne > p { flex: 1 1 280px; margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--encre); }
.corps-art .lettre-ligne > p b { color: var(--encre); }
.lettre-ligne__form { display: flex; gap: 8px; flex: 1 1 300px; }
.lettre-ligne__form input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(16,39,90,.25); background: #fff; color: var(--encre); font-family: var(--texte); font-size: 15px; }
.lettre-ligne__form .btn { border: none; cursor: pointer; padding: 11px 16px; white-space: nowrap; font-family: var(--texte); }
.corps-art .lettre-ligne .news__note { flex-basis: 100%; margin: 0; font-size: 13.5px; }
.corps-art .lettre-ligne .news__note--ok { color: #1f7a3a !important; }
.corps-art .lettre-ligne .news__note--ko { color: #b23a2c !important; }
@media (max-width: 560px) { .lettre-ligne__form { flex-wrap: wrap; } .lettre-ligne__form .btn { flex: 1 1 100%; } }