/* Le journal : la liste en cartes, l'article en colonne de lecture, un style par bloc.
   Même vocabulaire que site.css : filets d'un pixel, serif pour les titres, capitales espacées. */

/* ---------- la liste ---------- */
.journal-rubriques { margin-bottom: clamp(28px, 4vw, 48px); }
.journal-grille { display: grid; gap: 40px 28px; }
.journal-vide { max-width: 60ch; }
.article-carte { display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; }
.article-carte-image { aspect-ratio: 3 / 2; display: block; background: var(--sable); }
.article-carte-image img { width: 100%; height: 100%; object-fit: cover; }
.article-carte-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris); margin-top: 4px; }
.article-carte-rubrique { color: var(--cuivre); font-weight: 500; }
.article-carte-titre { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; text-wrap: balance; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size 900ms var(--sortie); display: inline; }
.article-carte:hover .article-carte-titre { background-size: 100% 1px; }
.article-carte-chapo { font-size: 15px; font-weight: 300; color: var(--gris); line-height: 1.6; }
.article-carte .bouton-lien { justify-self: start; margin-top: 2px; }
.journal-suite .entete-section { align-items: end; }
@media (min-width: 720px) { .journal-grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .journal-grille { grid-template-columns: repeat(3, 1fr); gap: 56px 40px; } }

/* ---------- l'article ---------- */
.article-tete { padding: clamp(48px, 8vw, 110px) var(--marge) 0; }
.article-tete-interieur { max-width: 980px; margin: 0 auto; display: grid; gap: 22px; }
.article-retour { text-decoration: none; }
.article-titre { font-size: clamp(34px, 5.2vw, 72px); max-width: 18ch; }
.article-chapo { font-size: clamp(17px, 1.5vw, 21px); max-width: 60ch; font-weight: 300; }
.article-meta { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.article-brouillon { color: #8a3b2a; }
.article-couverture { max-width: 1180px; margin: clamp(32px, 5vw, 64px) auto 0; }
.article-couverture .chapitre-image { aspect-ratio: 16 / 9; max-width: none !important; justify-self: stretch !important; }
.article-corps { max-width: 940px; margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--marge) clamp(24px, 4vw, 48px); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; font-weight: 300; }
.article-corps > * + * { margin-top: 1.4em; }
.article-corps h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; margin-top: 2.2em; text-wrap: balance; }
.article-corps h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.2; margin-top: 1.8em; }
.article-corps h2 + *, .article-corps h3 + * { margin-top: 0.7em; }
.article-corps p { margin-block: 0; }
.article-corps a { color: var(--cuivre); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: 1px; }
.article-corps strong { font-weight: 500; }
.article-liste { padding-left: 0; display: grid; gap: 10px; }
.article-liste li { position: relative; padding-left: 28px; }
.article-liste li::before { content: "—"; position: absolute; left: 0; color: var(--or); }
.article-liste-ordonnee { counter-reset: point; }
.article-liste-ordonnee li::before { counter-increment: point; content: counter(point, upper-roman); font-family: var(--serif); font-size: 13px; letter-spacing: 0.1em; top: 3px; }
.article-citation { margin: 2.2em 0; padding: 0 0 0 clamp(20px, 3vw, 36px); border-left: 1px solid var(--or); font-family: var(--italique); font-style: italic; font-size: clamp(21px, 2vw, 27px); line-height: 1.4; text-wrap: balance; }
.article-citation cite { display: block; margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gris); }
.article-encadre { position: relative; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--ligne-forte); background: var(--blanc); font-size: 0.95em; }
.article-encadre::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--ligne); pointer-events: none; }
.article-encadre-titre { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cuivre); margin-bottom: 10px !important; }
.article-encadre-attention { border-color: #8a3b2a; }
.article-encadre-attention .article-encadre-titre { color: #8a3b2a; }
.article-encadre-info { background: var(--sable); }
.article-etapes { padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ligne); }
.article-etapes li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.article-etape-num { font-family: var(--serif); color: var(--or); font-size: 22px; line-height: 1; padding-top: 4px; }
.article-etapes strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.15em; margin-bottom: 4px; }
.article-etapes p { color: var(--gris); font-size: 0.95em; }
.article-figure { margin: 2.2em 0; }
.article-figure img, .article-figure video, .article-figure iframe { width: 100%; height: auto; display: block; background: var(--sable); }
.article-figure figcaption { margin-top: 10px; font-size: 12px; letter-spacing: 0.06em; color: var(--gris); }
.article-figure-large { width: min(1240px, calc(100vw - 2 * var(--marge))); margin-left: 50%; transform: translateX(-50%); }
.article-video iframe, .article-video video { aspect-ratio: 16 / 9; border: 0; }
.article-bouton { margin-top: 2em; }
.article-separateur { border: 0; height: 1px; background: var(--ligne); margin: 2.6em auto; width: 120px; }
.article-questions { display: grid; }
.article-questions .question summary { grid-template-columns: 1fr auto; }
.article-questions .question summary .geste-titre { font-size: 1.15em; }
.article-questions .question > p { padding-left: 0; }
.article-prestation { display: grid; grid-template-columns: 1fr; text-decoration: none; color: inherit; border: 1px solid var(--ligne-forte); background: var(--blanc); margin: 2em 0; transition: border-color 500ms; }
.article-prestation:hover { border-color: var(--encre); }
.article-prestation-image { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sable); }
.article-prestation-image img { width: 100%; height: 100%; object-fit: cover; }
.article-prestation-texte { display: grid; gap: 6px; padding: 22px; align-content: center; }
.article-prestation-texte .surtitre { margin: 0; font-size: 10px; }
.article-prestation-nom { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.article-prestation-desc { font-size: 14px; color: var(--gris); }
.article-prestation-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--gris); }
.article-prestation-bas strong { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--encre); }
.article-prestation-bas .bouton-lien { margin-left: auto; color: var(--encre); }
@media (min-width: 720px) { .article-prestation { grid-template-columns: 220px 1fr; } .article-prestation-image { aspect-ratio: auto; } }

/* avant / après : l'image d'après en fond, celle d'avant rognée par le curseur */
.comparaison-scene { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sable); --x: 50%; user-select: none; }
.comparaison-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparaison-avant { position: absolute; inset: 0; width: var(--x); overflow: hidden; }
.comparaison-avant img { width: calc(100% / (var(--x) / 100%)); max-width: none; }
.comparaison-poignee { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: var(--creme); box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.25); }
.comparaison-poignee::after { content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--creme); color: var(--encre); display: grid; place-items: center; font-size: 12px; letter-spacing: 0.1em; box-shadow: 0 4px 14px rgba(20, 20, 20, 0.25); }
.comparaison-etiquette { position: absolute; bottom: 14px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 7px 10px; background: rgba(20, 20, 20, 0.55); color: var(--creme); }
.comparaison-etiquette-avant { left: 14px; }
.comparaison-etiquette-apres { right: 14px; }
.comparaison-curseur { display: block; margin-top: 10px; }
.comparaison-curseur input { width: 100%; accent-color: var(--encre); cursor: ew-resize; }

/* pied de l'article */
.article-pied { max-width: 940px; margin: 0 auto; padding: 0 var(--marge) clamp(56px, 8vw, 110px); }
.article-partage { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 24px; border-top: 1px solid var(--ligne); }
.article-partage .surtitre { margin: 0; }
.article-partage button { border: 0; cursor: pointer; color: inherit; font-family: inherit; }

@media (max-width: 719px) {
    .article-titre { font-size: clamp(30px, 8.6vw, 38px); }
    .article-corps { padding-top: 32px; font-size: 16px; }
    .article-figure-large { width: calc(100% + 2 * var(--marge)); margin-left: calc(-1 * var(--marge)); transform: none; }
    .comparaison-curseur, .article-figure-large figcaption { padding: 0 var(--marge); }
    .article-etapes li { grid-template-columns: 32px 1fr; gap: 12px; }
    .article-encadre { padding: 18px; }
    .article-prestation-texte { padding: 16px; }
    .journal-grille { gap: 32px; }
}