/* ============================================================
   JOURNAL — SYSTÈME DE COMPOSITION DES ARTICLES (pilote : « Dîner à Carthage », 11/10/2026)
   Référence : SEO Villa Didon / direction-artistique-journal.md
   Pas de gabarit : chaque article pose ses éléments sur une grille de
   12 colonnes avec des réglages (classes), et pioche dans les gestes .g-*.
   Ce fichier est chargé APRÈS le <style> de la page : ses classes
   l'emportent sur les règles d'élément de la page (figure, figcaption, img, a)
   sans toucher aux classes .art-* des articles à l'ancien gabarit.

   Largeurs : < 760 px téléphone (empilement + décalages .m-*),
              760 à 1099 px tablette (grille, réglages .t-* facultatifs),
              ≥ 1100 px ordinateur (grille, réglages de base).

   RÉGLAGES PAR ÉLÉMENT (enfant direct d'une .jg)
   - colonnes      .cs-N (colonne de départ, 1 à 12)  .cw-N (largeur, 1 à 12)
                   .t-cs-N .t-cw-N : variante tablette (760 à 1099 px)
   - côté          se lit dans .cs-N ; .self-end pour pousser au bout de la ligne
   - décalage      .dy-N  (N × pas fluide, 20 px à 1440 px ; N de 0 à 16)
                   .pb-N  (marge basse, même pas ; N de 0 à 8)
                   .al-start .al-center .al-end : alignement vertical dans la ligne
   - sortie        .bleed-r .bleed-l : sort du bord de la page (ordinateur)
                   .m-bleed-r .m-bleed-l : idem sur téléphone
   - photo         .f-band (2:5) .f-tall (3:4) .f-portrait (2:3) .f-square (1:1) .f-rect (3:2)
   - cadrage       .fx-N .fy-N (N de 0 à 100, pas de 5) : point de cadrage en %
   - téléphone     .m-ml-N .m-mr-N (N × 22 px, 0 à 5) : retraits latéraux
                   .m-dy-N (N × 12 px, 0 à 8) : espace au-dessus
                   .m-o-N (1 à 9) : ordre d'affichage ; .m-end : poussé à droite
   - silence       .jg-sec (160 px / 88 px) ; .sil-s (140 / 84) ; .sil-l (180 / 96)
   - placement     .jg-flow : placement dans l'ordre du HTML (sans remplissage des trous),
                   pour les escaliers de blocs
   - téléphone     .m-f-tall : la photo passe en 3:4 sur téléphone
                   .m-hcap : la légende verticale redevient horizontale sur téléphone
   - cercle posé   .ring-at + .rx-N .ry-N (centre, en % de la photo) + .rd-N (diamètre,
                   en % de la largeur de la photo), dans un .g-ringbox
   ============================================================ */

/* ---------- jetons ---------- */
.ja-page {
  --ja-ink: var(--ink, #1a2332);
  --ja-paper: var(--paper, #fafaf7);
  --ja-blue: var(--blue, #3664af);
  --ja-link: var(--blue-deep, #274f8a);
  --ja-mute: var(--mute, #636f70);
  --ja-line: rgba(26, 35, 50, 0.45);
  --ja-line-soft: rgba(26, 35, 50, 0.3);
  --ja-frame: rgba(26, 35, 50, 0.4);
  --ja-serif: var(--serif, 'Noto Serif Display', Georgia, serif);
  --ja-sans: var(--sans, 'Montserrat', 'Helvetica Neue', sans-serif);
  --ja-g: clamp(22px, 5.5vw, 60px);        /* gouttière de page : 22 px téléphone, 60 px ordinateur */
  --ja-col-gap: clamp(12px, 1.8vw, 24px);  /* entre colonnes de la grille */
  --ja-step: clamp(10px, 1.4vw, 20px);     /* pas des décalages verticaux .dy-N */
}

/* ---------- en-tête du site sur fond clair, lisible dès le haut ---------- */
.ja-page .nav:not(.scrolled) .nav-brand-logo { filter: none; }
.ja-page .nav:not(.scrolled) .nav-brand-text { color: var(--ja-ink); }
.ja-page .nav:not(.scrolled) .menu-trigger { color: var(--ja-ink); }
.ja-page .nav:not(.scrolled) .nav-cta { border-color: var(--ja-ink); color: var(--ja-ink); }
.ja-page .nav:not(.scrolled) .nav-langs a { color: #5a6472; }
.ja-page .nav:not(.scrolled) .nav-langs a:hover,
.ja-page .nav:not(.scrolled) .nav-langs a.active { color: var(--ja-ink); }

/* ---------- page d'article : coupe proprement ce qui sort du bord ---------- */
.ja { background: var(--ja-paper); color: var(--ja-ink); font-family: var(--ja-sans); overflow: hidden; }
.ja-inner { max-width: 1440px; margin: 0 auto; padding: 96px var(--ja-g) 88px; }
@media (min-width: 760px) { .ja-inner { padding-top: 132px; padding-bottom: 120px; } }
.ja a { color: var(--ja-link); text-decoration: underline; text-underline-offset: 3px; }
.ja a:hover { color: var(--ja-ink); }

/* ---------- sections et silences ---------- */
.jg-sec { margin-top: 88px; }
.jg-sec.sil-s { margin-top: 84px; }
.jg-sec.sil-l { margin-top: 96px; }
.jg-sec.sil-0 { margin-top: 0; }
@media (min-width: 760px) {
  .jg-sec { margin-top: 160px; }
  .jg-sec.sil-s { margin-top: 140px; }
  .jg-sec.sil-l { margin-top: 180px; }
  .jg-sec.sil-0 { margin-top: 0; }
}

/* ---------- la grille ---------- */
/* Téléphone : empilement, dans l'ordre du HTML ou selon .m-o-N. */
.jg { display: flex; flex-direction: column; position: relative; }
.ja .jg > *, .ja .jg-stack > * { min-width: 0; margin-top: calc(var(--mdy, 0) * 12px); margin-left: calc(var(--mml, 0) * 22px); margin-right: calc(var(--mmr, 0) * 22px); }
.ja .jg > .m-bleed-l, .ja .jg-stack > .m-bleed-l { margin-left: calc(-1 * var(--ja-g) + var(--mml, 0) * 22px); }
.ja .jg > .m-bleed-r, .ja .jg-stack > .m-bleed-r { margin-right: calc(-1 * var(--ja-g) + var(--mmr, 0) * 22px); }
.ja .jg > .m-end, .ja .jg-stack > .m-end { align-self: flex-end; }
.jg .jg-stack { display: contents; }
@media (min-width: 760px) {
  .jg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: var(--ja-col-gap); align-items: start; }
  .ja .jg > * { order: 0; margin: calc(var(--dy, 0) * var(--ja-step)) 0 0;
            grid-column: var(--tcs, var(--cs, 1)) / span var(--tcw, var(--cw, 12)); }
  .ja .jg > .bleed-r { margin-right: calc(-1 * var(--ja-g)); }
  .ja .jg > .bleed-l { margin-left: calc(-1 * var(--ja-g)); }
  .jg.jg-flow { grid-auto-flow: row; }
  .jg > .m-end { align-self: auto; }
  .jg .jg-stack { display: flex; flex-direction: column; }
  .ja .jg .jg-stack > * { margin: calc(var(--dy, 0) * var(--ja-step)) 0 0; order: 0; }
  .ja .jg .jg-stack > .bleed-l { margin-left: calc(-1 * var(--ja-g)); }
  .ja .jg .jg-stack > .bleed-r { margin-right: calc(-1 * var(--ja-g)); }
  .jg > .al-start { align-self: start; }
  .jg > .al-center { align-self: center; }
  .jg > .al-end { align-self: end; }
  .jg > .self-end { justify-self: end; }
}
@media (min-width: 1100px) {
  .ja .jg > * { grid-column: var(--cs, 1) / span var(--cw, 12); }
}

.cs-1 { --cs: 1; } .cw-1 { --cw: 1; }
.cs-2 { --cs: 2; } .cw-2 { --cw: 2; }
.cs-3 { --cs: 3; } .cw-3 { --cw: 3; }
.cs-4 { --cs: 4; } .cw-4 { --cw: 4; }
.cs-5 { --cs: 5; } .cw-5 { --cw: 5; }
.cs-6 { --cs: 6; } .cw-6 { --cw: 6; }
.cs-7 { --cs: 7; } .cw-7 { --cw: 7; }
.cs-8 { --cs: 8; } .cw-8 { --cw: 8; }
.cs-9 { --cs: 9; } .cw-9 { --cw: 9; }
.cs-10 { --cs: 10; } .cw-10 { --cw: 10; }
.cs-11 { --cs: 11; } .cw-11 { --cw: 11; }
.cs-12 { --cs: 12; } .cw-12 { --cw: 12; }
@media (min-width: 760px) and (max-width: 1099.98px) {
  .t-cs-1 { --tcs: 1; } .t-cw-1 { --tcw: 1; }
  .t-cs-2 { --tcs: 2; } .t-cw-2 { --tcw: 2; }
  .t-cs-3 { --tcs: 3; } .t-cw-3 { --tcw: 3; }
  .t-cs-4 { --tcs: 4; } .t-cw-4 { --tcw: 4; }
  .t-cs-5 { --tcs: 5; } .t-cw-5 { --tcw: 5; }
  .t-cs-6 { --tcs: 6; } .t-cw-6 { --tcw: 6; }
  .t-cs-7 { --tcs: 7; } .t-cw-7 { --tcw: 7; }
  .t-cs-8 { --tcs: 8; } .t-cw-8 { --tcw: 8; }
  .t-cs-9 { --tcs: 9; } .t-cw-9 { --tcw: 9; }
  .t-cs-10 { --tcs: 10; } .t-cw-10 { --tcw: 10; }
  .t-cs-11 { --tcs: 11; } .t-cw-11 { --tcw: 11; }
  .t-cs-12 { --tcs: 12; } .t-cw-12 { --tcw: 12; }
}
.dy-0 { --dy: 0; } .dy-1 { --dy: 1; } .dy-2 { --dy: 2; } .dy-3 { --dy: 3; } .dy-4 { --dy: 4; } .dy-5 { --dy: 5; } .dy-6 { --dy: 6; } .dy-7 { --dy: 7; } .dy-8 { --dy: 8; } .dy-9 { --dy: 9; } .dy-10 { --dy: 10; } .dy-11 { --dy: 11; } .dy-12 { --dy: 12; } .dy-13 { --dy: 13; } .dy-14 { --dy: 14; } .dy-15 { --dy: 15; } .dy-16 { --dy: 16; }
@media (min-width: 760px) { .pb-0 { padding-bottom: calc(0 * var(--ja-step)); } .pb-1 { padding-bottom: calc(1 * var(--ja-step)); } .pb-2 { padding-bottom: calc(2 * var(--ja-step)); } .pb-3 { padding-bottom: calc(3 * var(--ja-step)); } .pb-4 { padding-bottom: calc(4 * var(--ja-step)); } .pb-5 { padding-bottom: calc(5 * var(--ja-step)); } .pb-6 { padding-bottom: calc(6 * var(--ja-step)); } .pb-7 { padding-bottom: calc(7 * var(--ja-step)); } .pb-8 { padding-bottom: calc(8 * var(--ja-step)); } }
.m-ml-0 { --mml: 0; } .m-mr-0 { --mmr: 0; } .m-ml-1 { --mml: 1; } .m-mr-1 { --mmr: 1; } .m-ml-2 { --mml: 2; } .m-mr-2 { --mmr: 2; } .m-ml-3 { --mml: 3; } .m-mr-3 { --mmr: 3; } .m-ml-4 { --mml: 4; } .m-mr-4 { --mmr: 4; } .m-ml-5 { --mml: 5; } .m-mr-5 { --mmr: 5; }
.m-dy-0 { --mdy: 0; } .m-dy-1 { --mdy: 1; } .m-dy-2 { --mdy: 2; } .m-dy-3 { --mdy: 3; } .m-dy-4 { --mdy: 4; } .m-dy-5 { --mdy: 5; } .m-dy-6 { --mdy: 6; } .m-dy-7 { --mdy: 7; } .m-dy-8 { --mdy: 8; }
@media (max-width: 759.98px) { .jg .m-o-1 { order: 1; } .jg .m-o-2 { order: 2; } .jg .m-o-3 { order: 3; } .jg .m-o-4 { order: 4; } .jg .m-o-5 { order: 5; } .jg .m-o-6 { order: 6; } .jg .m-o-7 { order: 7; } .jg .m-o-8 { order: 8; } .jg .m-o-9 { order: 9; } }

/* ---------- photos : forme et cadrage ---------- */
.g-photo { margin: 0; }
.g-img { display: block; width: 100%; height: auto; border-radius: 0; object-fit: cover;
         object-position: var(--fx, 50%) var(--fy, 50%); }
.f-band     .g-img, .g-img.f-band     { aspect-ratio: 2 / 5; }
.f-tall     .g-img, .g-img.f-tall     { aspect-ratio: 3 / 4; }
.f-portrait .g-img, .g-img.f-portrait { aspect-ratio: 2 / 3; }
.f-square   .g-img, .g-img.f-square   { aspect-ratio: 1 / 1; }
.f-rect     .g-img, .g-img.f-rect     { aspect-ratio: 3 / 2; }

.fx-0 { --fx: 0%; } .fy-0 { --fy: 0%; } .fx-5 { --fx: 5%; } .fy-5 { --fy: 5%; } .fx-10 { --fx: 10%; } .fy-10 { --fy: 10%; } .fx-15 { --fx: 15%; } .fy-15 { --fy: 15%; } .fx-20 { --fx: 20%; } .fy-20 { --fy: 20%; } .fx-25 { --fx: 25%; } .fy-25 { --fy: 25%; } .fx-30 { --fx: 30%; } .fy-30 { --fy: 30%; } .fx-35 { --fx: 35%; } .fy-35 { --fy: 35%; } .fx-40 { --fx: 40%; } .fy-40 { --fy: 40%; } .fx-45 { --fx: 45%; } .fy-45 { --fy: 45%; } .fx-50 { --fx: 50%; } .fy-50 { --fy: 50%; } .fx-55 { --fx: 55%; } .fy-55 { --fy: 55%; } .fx-60 { --fx: 60%; } .fy-60 { --fy: 60%; } .fx-65 { --fx: 65%; } .fy-65 { --fy: 65%; } .fx-70 { --fx: 70%; } .fy-70 { --fy: 70%; } .fx-75 { --fx: 75%; } .fy-75 { --fy: 75%; } .fx-80 { --fx: 80%; } .fy-80 { --fy: 80%; } .fx-85 { --fx: 85%; } .fy-85 { --fy: 85%; } .fx-90 { --fx: 90%; } .fy-90 { --fy: 90%; } .fx-95 { --fx: 95%; } .fy-95 { --fy: 95%; } .fx-100 { --fx: 100%; } .fy-100 { --fy: 100%; }
@media (max-width: 759.98px) { .m-f-tall .g-img { aspect-ratio: 3 / 4; } }
.rx-0 { --rx: 0%; } .ry-0 { --ry: 0%; } .rd-0 { --rd: 0%; } .rx-5 { --rx: 5%; } .ry-5 { --ry: 5%; } .rd-5 { --rd: 5%; } .rx-10 { --rx: 10%; } .ry-10 { --ry: 10%; } .rd-10 { --rd: 10%; } .rx-15 { --rx: 15%; } .ry-15 { --ry: 15%; } .rd-15 { --rd: 15%; } .rx-20 { --rx: 20%; } .ry-20 { --ry: 20%; } .rd-20 { --rd: 20%; } .rx-25 { --rx: 25%; } .ry-25 { --ry: 25%; } .rd-25 { --rd: 25%; } .rx-30 { --rx: 30%; } .ry-30 { --ry: 30%; } .rd-30 { --rd: 30%; } .rx-35 { --rx: 35%; } .ry-35 { --ry: 35%; } .rd-35 { --rd: 35%; } .rx-40 { --rx: 40%; } .ry-40 { --ry: 40%; } .rd-40 { --rd: 40%; } .rx-45 { --rx: 45%; } .ry-45 { --ry: 45%; } .rd-45 { --rd: 45%; } .rx-50 { --rx: 50%; } .ry-50 { --ry: 50%; } .rd-50 { --rd: 50%; } .rx-55 { --rx: 55%; } .ry-55 { --ry: 55%; } .rd-55 { --rd: 55%; } .rx-60 { --rx: 60%; } .ry-60 { --ry: 60%; } .rd-60 { --rd: 60%; } .rx-65 { --rx: 65%; } .ry-65 { --ry: 65%; } .rd-65 { --rd: 65%; } .rx-70 { --rx: 70%; } .ry-70 { --ry: 70%; } .rd-70 { --rd: 70%; } .rx-75 { --rx: 75%; } .ry-75 { --ry: 75%; } .rd-75 { --rd: 75%; } .rx-80 { --rx: 80%; } .ry-80 { --ry: 80%; } .rd-80 { --rd: 80%; } .rx-85 { --rx: 85%; } .ry-85 { --ry: 85%; } .rd-85 { --rd: 85%; } .rx-90 { --rx: 90%; } .ry-90 { --ry: 90%; } .rd-90 { --rd: 90%; } .rx-95 { --rx: 95%; } .ry-95 { --ry: 95%; } .rd-95 { --rd: 95%; } .rx-100 { --rx: 100%; } .ry-100 { --ry: 100%; } .rd-100 { --rd: 100%; }

/* ============================================================
   GESTES — chacun s'emploie seul
   ============================================================ */

/* Ligne d'ouverture / filet de section : numéro, filet, rubrique */
.g-line { display: flex; align-items: center; gap: 14px; }
@media (min-width: 760px) { .g-line { gap: 18px; } }
.g-num { font-size: 12px; letter-spacing: 0.18em; font-weight: 600; color: var(--ja-blue); }
.g-rule { flex-grow: 1; height: 1px; background: var(--ja-line); }
.g-rubric { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--ja-mute); }
.g-label { margin: 0; font-family: var(--ja-sans); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; line-height: 1.4; }

/* Trois tailles : grand titre, texte courant, petits intitulés */
.g-h1 { margin: 0; font-family: var(--ja-serif); font-weight: 400; font-size: clamp(46px, 7.2vw, 106px); line-height: 1; letter-spacing: -0.012em; }
@media (min-width: 760px) { .g-h1 { line-height: 0.98; } }
.g-h2 { margin: 0; font-family: var(--ja-serif); font-weight: 400; font-size: clamp(29px, 3.2vw, 44px); line-height: 1.12; }
.g-chapo { margin: 0; font-family: var(--ja-serif); font-size: 20px; line-height: 1.5; }
@media (min-width: 760px) { .g-chapo { font-size: 22px; } }
.g-text { margin: 0; font-size: 16.5px; line-height: 1.75; }

/* Bloc de texte étroit (45 à 65 signes, 520 px au plus) */
.g-col { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
@media (min-width: 760px) { .g-col { gap: 22px; } }
.g-col.g-col-narrow { max-width: 440px; }

/* Sous-titre sous le grand titre */
.g-sub { margin: 0; font-family: var(--ja-serif); font-style: italic; font-size: 20px; line-height: 1.35; color: var(--ja-mute); }
@media (min-width: 760px) { .g-sub { font-size: 24px; } }

/* Sous-parties : intitulé en petites capitales, filet fin au-dessus */
.g-h3 { margin: 0; font-family: var(--ja-sans); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; line-height: 1.5; color: var(--ja-ink); }
.g-part { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--ja-line-soft); }
@media (min-width: 760px) { .g-part { gap: 14px; padding-top: 26px; } }

/* Signature */
.g-byline { margin: 8px 0 0; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.9; color: var(--ja-mute); }
@media (min-width: 760px) { .g-byline { margin-top: 12px; letter-spacing: 0.16em; } }

/* Légende horizontale */
.g-cap { margin: 12px 0 0; font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.6; color: var(--ja-mute); }
@media (min-width: 760px) { .g-cap { margin-top: 14px; letter-spacing: 0.2em; } }
.g-cap.g-cap-in { margin-left: var(--ja-g); }   /* légende d'une photo sortie du bord gauche */

/* Légende verticale, le long de la photo */
.g-vcap-fig { display: flex; gap: 12px; align-items: flex-end; }
.g-vcap-fig .g-img { flex: 1 1 0; min-width: 0; }
.g-vcap { margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ja-mute); white-space: nowrap; }
.g-only-wide { display: none; }
@media (min-width: 760px) { .g-vcap-fig { gap: 14px; } .g-vcap { letter-spacing: 0.2em; } .g-only-wide { display: inline; } }
@media (max-width: 759.98px) {
  .g-vcap-fig.m-hcap { flex-direction: column; align-items: stretch; gap: 0; }
  .m-hcap .g-img { flex: none; width: 100%; }
  .m-hcap .g-vcap { order: 2; margin-top: 12px; writing-mode: horizontal-tb; transform: none; white-space: normal; line-height: 1.6; }
}

/* Photo cadrée : cadre fin, marge entre le cadre et l'image */
.g-frame { padding: 10px; border: 1px solid var(--ja-frame); background: var(--ja-paper); }
@media (min-width: 760px) { .g-frame { padding: 14px; } }

/* Chiffre traité comme une image (décoratif : aria-hidden) */
.g-bignum { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.g-bignum-val { font-family: var(--ja-serif); font-weight: 300; font-size: 124px; line-height: 0.86; letter-spacing: -0.02em; white-space: nowrap; padding-bottom: 0.16em; } /* place pour les jambages (p, g, y) */
.g-bignum-cap { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ja-mute); text-align: right; }
@media (min-width: 760px) { .g-bignum { gap: 14px; } .g-bignum-val { font-size: clamp(96px, 15vw, 216px); } .g-bignum-cap { letter-spacing: 0.2em; } }

/* Note entre deux filets, serif italique */
.g-note { margin: 10px 0 0; padding: 22px 0; border-top: 1px solid var(--ja-ink); border-bottom: 1px solid var(--ja-ink); font-family: var(--ja-serif); font-style: italic; font-size: 19px; line-height: 1.55; }
@media (min-width: 760px) { .g-note { margin: 10px 0 0; padding: 26px 0; font-size: 21px; } }

/* Figure au trait : un cercle, une fois par article au plus.
   Téléphone : il passe derrière la photo (.g-ringed). Ordinateur : il se
   place par rapport à la section (.ring-r : à droite, sous le texte, la photo
   carrée posée à cheval sur son bord gauche). */
.g-ringed { position: relative; }
.g-ringed > .g-frame { position: relative; }
.g-ring { position: absolute; top: -72px; right: -176px; width: 340px; height: 340px; border: 1px solid var(--ja-line); border-radius: 50%; pointer-events: none; }
@media (min-width: 760px) {
  .jg > .g-ringed { position: static; }
  .g-ring.ring-r { top: 0; right: 3%; width: min(64vw, 800px); height: auto; aspect-ratio: 1 / 1; }
  .g-ring.ring-l { top: 0; left: 3%; right: auto; width: min(64vw, 800px); height: auto; aspect-ratio: 1 / 1; }
}

/* Cercle posé sur un point précis de la photo (.g-ringbox autour de l'image) */
.g-ringbox { position: relative; }
.g-ring.ring-at { top: var(--ry, 50%); left: var(--rx, 50%); right: auto; width: var(--rd, 60%); height: auto; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }

/* Lignes entre filets : liste (un intitulé par ligne) */
.g-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ja-ink); }
.g-row { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--ja-line-soft); }
.g-row:last-of-type { border-bottom-color: var(--ja-ink); }
.g-row-label { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ja-mute); }
@media (min-width: 760px) {
  .g-row { flex-direction: row; flex-wrap: wrap; gap: 8px 32px; padding: 24px 0; }
  .g-row-label { flex: 0 0 170px; padding-top: 5px; letter-spacing: 0.2em; }
  .g-row > .g-text { flex: 1 1 320px; min-width: 0; max-width: 520px; }
  .ja .g-rows-num .g-row-label { flex: 0 0 44px; }
}
.g-rows-num .g-row-label { flex: 0 0 auto; padding-top: 0; color: var(--ja-blue); font-weight: 600; }
.g-rows-num .g-row { flex-direction: row; align-items: baseline; gap: 18px; }

/* Tableau typographique entre filets (distances, capacités) */
.g-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ja-ink); border-bottom: 1px solid var(--ja-ink); font-size: 15px; }
.g-table th, .g-table td { padding: 16px 16px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ja-line-soft); }
.g-table thead th { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--ja-mute); border-bottom-color: var(--ja-ink); }
.g-table tbody tr:last-child td { border-bottom: 0; }
.g-table td:first-child { font-family: var(--ja-serif); font-size: 18px; }

/* Tableau traité comme l'image de la section : distances en très grand */
.g-table-big { font-size: 14px; }
.g-table-big th, .g-table-big td { padding: 18px 12px 18px 0; vertical-align: middle; }
.g-table-big td:first-child { font-size: 17px; line-height: 1.3; }
.g-table-big td:nth-child(2) { font-family: var(--ja-serif); font-weight: 300; font-size: 30px; line-height: 1; white-space: nowrap; }
.g-table-big td:nth-child(3) { color: var(--ja-mute); line-height: 1.5; }
@media (min-width: 760px) {
  .g-table-big { font-size: 15px; }
  .g-table-big th, .g-table-big td { padding: 26px 24px 26px 0; }
  .g-table-big td:first-child { font-size: 22px; }
  .g-table-big td:nth-child(2) { font-size: clamp(40px, 4.6vw, 66px); }
}

/* Certificats : une fiche par norme (en-tête avec logo, puis intitulé et valeur ligne à ligne).
   Téléphone : les fiches l'une sous l'autre, intitulé au-dessus de chaque valeur.
   Ordinateur : un seul tableau entre filets, une colonne d'intitulés puis une colonne par norme ;
   les intitulés de la deuxième fiche restent lus par les lecteurs d'écran, hors de la vue.
   Chaque ligne porte sa place : .r-1 à .r-8. */
.g-certs { display: flex; flex-direction: column; gap: 56px; }
.g-cert-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 20px; }
.g-cert-logo { display: block; width: auto; height: 56px; filter: brightness(0); opacity: 0.78; }  /* marques claires, faites pour fond sombre : passées à l'encre sur le papier */
.g-cert-logo[src*="9001"] { height: 49px; }  /* même calage que Le Banquet : le pavé du 9001 est plus plein */
.g-cert-name { margin: 0; font-family: var(--ja-serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.g-cert-list { margin: 0; border-top: 1px solid var(--ja-ink); border-bottom: 1px solid var(--ja-ink); }
.g-cert-row { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid var(--ja-line-soft); }
.g-cert-row:first-child { border-top: 0; }
.g-cert-row dt { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ja-mute); }
.g-cert-row dd { margin: 0; font-family: var(--ja-serif); font-size: 19px; line-height: 1.35; }
.ja .g-cert-row dd a { font-family: var(--ja-sans); font-size: 12px; letter-spacing: 0.18em; font-weight: 600; text-transform: uppercase; text-underline-offset: 6px; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 760px) {
  .g-certs { display: grid; grid-template-columns: minmax(150px, 0.8fr) 1fr 1fr; column-gap: clamp(20px, 3vw, 48px); row-gap: 0; position: relative; }
  .g-cert, .g-cert-list, .g-cert-row { display: contents; }
  .g-cert:nth-child(1) .g-cert-head { grid-column: 2; grid-row: 1; }
  .g-cert:nth-child(2) .g-cert-head { grid-column: 3; grid-row: 1; }
  .g-cert-head { align-self: end; padding-bottom: 24px; }
  .g-cert-logo { height: 64px; }
  .g-cert-logo[src*="9001"] { height: 56px; }
  .g-cert-row > dt, .g-cert-row > dd { padding: 20px 0; border-top: 1px solid var(--ja-line-soft); }
  .g-cert-row:first-child > dt, .g-cert-row:first-child > dd { border-top: 1px solid var(--ja-ink); }
  .g-cert-row:last-child > dt, .g-cert-row:last-child > dd { border-bottom: 1px solid var(--ja-ink); }
  .g-cert-row > dt { grid-column: 1; padding-top: 24px; letter-spacing: 0.2em; }
  .g-cert:nth-child(1) .g-cert-row > dd { grid-column: 2; }
  .g-cert:nth-child(2) .g-cert-row > dd { grid-column: 3; }
  .g-cert:nth-child(2) .g-cert-row > dt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .g-cert-row dd { font-size: 21px; }
}
@media (min-width: 760px) { .g-cert-row.r-1 > * { grid-row: 2; } }
@media (min-width: 760px) { .g-cert-row.r-2 > * { grid-row: 3; } }
@media (min-width: 760px) { .g-cert-row.r-3 > * { grid-row: 4; } }
@media (min-width: 760px) { .g-cert-row.r-4 > * { grid-row: 5; } }
@media (min-width: 760px) { .g-cert-row.r-5 > * { grid-row: 6; } }
@media (min-width: 760px) { .g-cert-row.r-6 > * { grid-row: 7; } }
@media (min-width: 760px) { .g-cert-row.r-7 > * { grid-row: 8; } }
@media (min-width: 760px) { .g-cert-row.r-8 > * { grid-row: 9; } }

/* Bande « L'essentiel » : repères pratiques entre deux filets */
.g-ess .g-label { padding-bottom: 14px; }
.g-ess-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; border-top: 1px solid var(--ja-ink); border-bottom: 1px solid var(--ja-ink); padding: 24px 0 28px; }
.g-ess-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.g-ess-item dt { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ja-mute); }
.g-ess-item dd { margin: 0; font-family: var(--ja-serif); font-size: 18px; line-height: 1.3; }
@media (min-width: 760px) {
  .g-ess .g-label { padding-bottom: 16px; }
  .g-ess-list { gap: 28px 40px; padding: 28px 0 32px; }
  .g-ess-item { gap: 10px; }
  .g-ess-item dt { letter-spacing: 0.2em; }
  .g-ess-item dd { font-size: 21px; }
}
@media (min-width: 960px) { .g-ess-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Actions : bouton plein et lien (44 px au moins pour le doigt) */
.g-actions { display: flex; flex-direction: column; gap: 14px; padding-top: 30px; }
.ja .g-btn { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 16px; text-align: center; background: var(--ja-ink); color: var(--ja-paper); font-size: 12px; letter-spacing: 0.2em; font-weight: 600; text-transform: uppercase; text-decoration: none; transition: background 300ms; }
.ja .g-btn:hover { background: var(--ja-link); color: var(--ja-paper); }
.ja .g-link { display: flex; align-items: center; justify-content: center; min-height: 48px; font-size: 12px; letter-spacing: 0.2em; font-weight: 600; text-transform: uppercase; text-underline-offset: 6px; }
@media (min-width: 760px) {
  .g-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 36px; }
  .ja .g-btn { display: inline-flex; min-height: 52px; padding: 0 30px; }
  .ja .g-link { display: inline-flex; min-height: 44px; }
}

/* Vignettes de fin : « À lire aussi » */
.g-next-list { display: flex; flex-direction: column; gap: 30px; margin-top: 32px; }
.ja .g-next-item { display: flex; gap: 20px; align-items: flex-end; color: var(--ja-ink); text-decoration: none; }
.ja .g-next-item:hover .g-next-title { color: var(--ja-link); }
.g-next-item .g-img { flex: 0 0 96px; width: 96px; aspect-ratio: 3 / 4; }
.g-next-meta { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; min-width: 0; }
.g-next-kicker { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ja-mute); }
.g-next-title { font-family: var(--ja-serif); font-size: 24px; line-height: 1.15; transition: color 300ms; }
.ja .g-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 44px; font-size: 12px; letter-spacing: 0.2em; font-weight: 600; text-transform: uppercase; text-underline-offset: 6px; }
@media (min-width: 760px) {
  .g-next-list { flex-direction: row; flex-wrap: wrap; gap: 40px clamp(24px, 6vw, 96px); margin-top: 44px; }
  .ja .g-next-item { flex: 1 1 340px; min-width: 0; gap: 26px; }
  .g-next-item .g-img { flex-basis: 132px; width: 132px; }
  .g-next-meta { gap: 12px; padding-bottom: 6px; }
  .g-next-kicker { letter-spacing: 0.2em; }
  .g-next-title { font-size: 30px; }
  .ja .g-back { margin-top: 64px; }
}