/* L'Hexagone décodé — rubrique « Questions » : une page = une question, une réponse sourcée.
   S'ajoute à css/atelier.css (mêmes couleurs, mêmes polices). */

.article { padding-block: 32px 64px; }
.article .page { display: grid; gap: 28px; }
.article-tete { max-width: 760px; }
.article-tete h1 { font-size: clamp(38px, 5vw, 60px); margin: 10px 0 14px; text-wrap: balance; }
.article-meta { color: var(--texte-3); font-size: 15px; margin: 0; }
.article-meta b { color: var(--texte-2); font-weight: 700; }

/* La réponse, tout de suite : un cartel ambré, comme une plaque de musée */
.reponse { max-width: 760px; background: var(--cartel); border-top: 4px solid var(--ambre); padding: 22px 24px; display: grid; gap: 10px; }
.reponse .reponse-mot { font: 600 15px/1 var(--f-signal); letter-spacing: .08em; text-transform: uppercase; color: var(--ambre); margin: 0; }
.reponse .reponse-chiffre { font: 700 clamp(56px, 9vw, 88px)/0.95 var(--f-signal); color: var(--texte); margin: 0; }
.reponse p { margin: 0; font-size: 19px; color: var(--texte); max-width: 60ch; }
.reponse .source { font-size: 14px; color: var(--texte-2); }

/* Texte courant : une colonne de lecture confortable */
.texte { max-width: 72ch; display: grid; gap: 14px; font-size: 18px; line-height: 1.6; }
.texte h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 26px 0 0; text-wrap: balance; }
.texte p { margin: 0; color: var(--texte-2); }
.texte strong { color: var(--texte); }
.texte ul { margin: 0; padding-left: 1.2em; color: var(--texte-2); display: grid; gap: 6px; }

/* Schéma : un pictogramme par avion */
.flotte { background: var(--plaque); border: 1px solid var(--trait-doux); padding: 20px; max-width: 900px; display: grid; gap: 14px; }
.flotte-titre { font: 600 18px/1.2 var(--f-signal); margin: 0; color: var(--texte); }
.flotte-ligne { display: grid; gap: 6px; }
.flotte-legende { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; color: var(--texte-2); }
.flotte-legende b { font: 700 24px/1 var(--f-signal); color: var(--texte); }
.avions { display: flex; flex-wrap: wrap; gap: 3px; }
.avions svg { width: 18px; height: 18px; display: block; }
.avions.air svg { fill: var(--ambre); }
.avions.marine svg { fill: var(--d-autre); }
.avions.mirage svg { fill: var(--d-gris); }
.flotte .source { margin: 0; }

/* Photos : cadre de musée, légende et crédit */
.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; max-width: 1000px; }
.photo-musee { margin: 0; background: var(--plaque); border: 1px solid var(--trait-doux); }
.photo-musee img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.photo-musee figcaption { padding: 12px 14px; display: grid; gap: 4px; font-size: 15px; color: var(--texte-2); }
.photo-musee figcaption b { color: var(--texte); font-family: var(--f-signal); font-size: 18px; font-weight: 600; }
.photo-musee .credit { font-size: 13px; color: var(--texte-3); }
.photo-musee .credit a { color: var(--texte-3); }

/* Tableau simple */
.tableau-simple { width: 100%; max-width: 640px; border-collapse: collapse; font-size: 16px; }
.tableau-simple th, .tableau-simple td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--trait-doux); }
.tableau-simple th { font-family: var(--f-signal); font-weight: 600; color: var(--texte); }
.tableau-simple td { color: var(--texte-2); }
.tableau-simple td.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--texte); }
.table-defile { overflow-x: auto; max-width: 100%; }

/* Encadré « à nuancer » */
.nuance { max-width: 72ch; border-left: 3px solid var(--d-moy); padding: 6px 0 6px 16px; color: var(--texte-2); font-size: 17px; }
.nuance b { color: var(--texte); }

/* Sources et liens de fin */
.sources-liste { max-width: 72ch; margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 15px; color: var(--texte-3); }
.sources-liste a { color: var(--texte-2); }
.pour-aller-plus-loin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; max-width: 1000px; list-style: none; padding: 0; margin: 0; }
.pour-aller-plus-loin a { display: grid; gap: 4px; padding: 16px; background: var(--plaque); border: 1px solid var(--trait-doux); color: var(--texte); text-decoration: none; height: 100%; }
.pour-aller-plus-loin a:hover strong, .pour-aller-plus-loin a:focus-visible strong { text-decoration: underline; }
.pour-aller-plus-loin strong { font: 600 19px/1.2 var(--f-signal); }
.pour-aller-plus-loin span { color: var(--texte-2); font-size: 15px; }

/* Page d'index des questions */
.questions-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 900px; }
.questions-liste a { display: grid; gap: 6px; padding: 18px 20px; background: var(--plaque); border: 1px solid var(--trait-doux); color: var(--texte); text-decoration: none; }
.questions-liste a:hover strong, .questions-liste a:focus-visible strong { text-decoration: underline; }
.questions-liste strong { font: 700 24px/1.15 var(--f-signal); }
.questions-liste span { color: var(--texte-2); }
.questions-liste .salle { font: 600 14px/1 var(--f-signal); letter-spacing: .06em; text-transform: uppercase; color: var(--ambre); }