/* groupe-cd.fr : réseau de lignes. Plan et raisons dans references/design.md du projet. */

@font-face {
    font-family: "Archivo";
    src: url("polices/archivo-wdth.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("polices/source-serif-4.woff2") format("woff2");
    font-weight: 200 900;
    font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("polices/source-serif-4-italique.woff2") format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Doto";
    src: url("polices/doto.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --gcd-quai: #0F1B1D;
    --gcd-quai-haut: #172729;
    --gcd-quai-bas: #0A1314;
    --gcd-filet: #26393B;
    --gcd-craie: #ECF0EA;
    --gcd-lichen: #A7BBB5;
    --gcd-plan: #E4E9E1;
    --gcd-encre: #11201F;
    --gcd-encre-douce: #46605A;
    --gcd-ambre: #F4B23E;
    --gcd-l1: #56BFE0;
    --gcd-l2: #F26A43;
    --gcd-l3: #4DBA82;
    --gcd-l4: #D98BD0;

    --gcd-large: 1240px;
    --gcd-lecture: 43rem;
    --gcd-r: 6px;
    --gcd-marge: max(20px, calc((100% - var(--gcd-large)) / 2));

    --gcd-titre: "Archivo", "Arial Narrow", Arial, sans-serif;
    --gcd-texte: "Source Serif 4", Georgia, "Times New Roman", serif;
    --gcd-points: "Doto", "Courier New", monospace;
}

/* Texte posé sur une couleur de ligne : sombre, tiré de la ligne elle-même. */
.gcd-l1 { --l: var(--gcd-l1); --l-encre: #05303D; }
.gcd-l2 { --l: var(--gcd-l2); --l-encre: #3B0F02; }
.gcd-l3 { --l: var(--gcd-l3); --l-encre: #06301B; }
.gcd-l4 { --l: var(--gcd-l4); --l-encre: #3A0F34; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-color: #2E4547 var(--gcd-quai); }

body.gcd {
    margin: 0;
    background: var(--gcd-quai);
    color: var(--gcd-craie);
    font: 400 18px/1.6 var(--gcd-texte);
    font-optical-sizing: auto;
    caret-color: var(--gcd-ambre);
    -webkit-font-smoothing: antialiased;
}

.gcd ::selection { background: var(--gcd-ambre); color: var(--gcd-quai-bas); }
.gcd :focus-visible { outline: 2px solid var(--gcd-ambre); outline-offset: 3px; border-radius: 2px; }
.gcd a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.gcd img { max-width: 100%; height: auto; }
.gcd time, .gcd-pastille, .gcd-departs, .gcd-bandeau__compte, .gcd-pied small { font-variant-numeric: tabular-nums; }

.gcd-invisible, .gcd-evitement:not(:focus) {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.gcd-evitement:focus { position: absolute; z-index: 20; top: 8px; left: 8px; padding: 10px 14px; background: var(--gcd-ambre); color: var(--gcd-quai-bas); font: 700 15px var(--gcd-titre); }

/* pastille de ligne */
.gcd-pastille {
    display: inline-grid; place-items: center; flex: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--l, var(--gcd-lichen)); color: var(--l-encre, var(--gcd-quai));
    font: 800 12px/1 var(--gcd-titre);
}
.gcd-pastille--grande { width: 44px; height: 44px; font-size: 21px; }
.gcd-pastille .gcd-icone { width: 62%; height: 62%; stroke-width: 1.9px; }
.gcd-pastille--grande .gcd-icone { stroke-width: 2.4px; }

.gcd-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 0 0 12px;
    font: 550 13.5px/1.3 var(--gcd-titre);
    color: var(--gcd-lichen);
}
.gcd-meta a { color: var(--gcd-craie); text-decoration: none; }
.gcd-meta a:hover { text-decoration: underline; text-decoration-color: var(--gcd-ambre); }
.gcd-meta > span:not(:first-child):not(.gcd-pastille)::before {
    content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 0 0;
    border-radius: 50%; background: currentColor; vertical-align: middle; opacity: .6;
}
.gcd-meta > .gcd-pastille + a { margin-left: -2px; }

/* soulignement qui se trace au survol, sur les titres d'aperçu */
.gcd-une h2 a, .gcd-arret h4 a, .gcd-station h2 a, .gcd-voisins h3 a {
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    transition: background-size .25s ease-out;
}
.gcd-une:hover h2 a, .gcd-arret:hover h4 a, .gcd-station:hover h2 a, .gcd-voisins li:hover h3 a { background-size: 100% 2px; }

.gcd-une__image, .gcd-arret__image, .gcd-station__image, .gcd-voisins__image {
    display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--gcd-quai-haut);
}
.gcd-une__image img, .gcd-arret__image img, .gcd-station__image img, .gcd-voisins__image img, .gcd-trajet__image img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    filter: contrast(1.04) saturate(.96);
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.gcd-une:hover .gcd-une__image img, .gcd-arret:hover img, .gcd-station:hover img, .gcd-voisins li:hover img { transform: scale(1.045); }
.gcd-sans-image { display: block; width: 100%; height: 100%; background: var(--l, var(--gcd-quai-haut)); }

/* ---------- en-tête ---------- */

.gcd-entete {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 16px var(--gcd-marge);
    border-bottom: 1px solid var(--gcd-filet);
    font-family: var(--gcd-titre);
}
.gcd-marque {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--gcd-craie); text-decoration: none;
    font: 800 23px/1 var(--gcd-titre); font-stretch: 125%; letter-spacing: -.02em;
}
.gcd-marque__trait { width: 36px; height: 14px; color: var(--gcd-ambre); }
.gcd-entete__ouvrir {
    display: none; margin-left: auto; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 14px;
    background: var(--gcd-quai-haut); color: var(--gcd-craie);
    border: 1px solid var(--gcd-filet); border-radius: var(--gcd-r);
    font: 650 15px var(--gcd-titre); cursor: pointer;
}
.gcd-entete__barres { display: grid; gap: 3px; width: 18px; }
.gcd-entete__barres i { display: block; height: 3px; border-radius: 2px; }
.gcd-entete__barres i:nth-child(1) { background: var(--gcd-l1); }
.gcd-entete__barres i:nth-child(2) { background: var(--gcd-l2); }
.gcd-entete__barres i:nth-child(3) { background: var(--gcd-l3); }
.gcd-entete__barres i:nth-child(4) { background: var(--gcd-l4); }

.gcd-entete__panneau { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.gcd-menu { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.gcd-menu__lien {
    display: flex; align-items: center; gap: 8px; min-height: 44px;
    font: 620 15.5px/1 var(--gcd-titre); font-stretch: 108%;
    text-decoration: none; color: var(--gcd-craie);
    background: linear-gradient(var(--l), var(--l)) 30px 100% / 0 3px no-repeat;
    transition: background-size .2s ease-out;
}
.gcd-menu__lien:hover, .gcd-menu__lien[aria-current] { background-size: calc(100% - 30px) 3px; }
.gcd-menu__long { display: none; }

.gcd-recherche { position: relative; }
.gcd-recherche input {
    width: 210px; height: 42px; padding: 0 42px 0 14px;
    background: var(--gcd-quai-haut); color: var(--gcd-craie);
    border: 1px solid var(--gcd-filet); border-radius: var(--gcd-r);
    font: 500 15px var(--gcd-titre);
    -webkit-appearance: none; appearance: none;
}
.gcd-recherche input::placeholder { color: #7E948E; }
.gcd-recherche input:focus { border-color: var(--gcd-ambre); outline: none; }
.gcd-recherche button {
    position: absolute; top: 0; right: 0; width: 42px; height: 42px;
    display: grid; place-items: center;
    background: none; border: 0; color: var(--gcd-lichen); cursor: pointer;
}
.gcd-recherche button:hover { color: var(--gcd-ambre); }

@media (max-width: 999px) {
    .gcd-entete__ouvrir { display: inline-flex; }
    .gcd-entete__panneau { display: none; width: 100%; margin: 0; padding: 8px 0 12px; flex-direction: column; align-items: stretch; gap: 16px; }
    .gcd-entete.est-ouvert .gcd-entete__panneau { display: flex; }
    .gcd-menu { flex-direction: column; gap: 2px; }
    .gcd-menu__lien { font-size: 17px; padding: 6px 0; background: none; }
    .gcd-menu__lien[aria-current] .gcd-menu__long { text-decoration: underline 3px var(--l); text-underline-offset: 6px; }
    .gcd-menu__court { display: none; }
    .gcd-menu__long { display: inline; }
    .gcd-menu .gcd-pastille { width: 30px; height: 30px; font-size: 15px; }
    .gcd-recherche input { width: 100%; height: 46px; font-size: 16px; }
    .gcd-recherche button { height: 46px; }
}

/* ---------- accueil, scène 1 : le quai ---------- */

.gcd-quai {
    position: relative;
    display: grid;
    grid-template-columns: minmax(20px, 1fr) repeat(12, minmax(0, calc(var(--gcd-large) / 12))) minmax(20px, 1fr);
    padding: clamp(32px, 5vw, 64px) 0 170px;
    overflow: clip;
}
.gcd-accroche {
    grid-column: 2 / 11; grid-row: 1; z-index: 2;
    max-width: 23ch; margin: 0;
    font: 700 clamp(26px, 3.1vw, 42px)/1.08 var(--gcd-titre); font-stretch: 112%;
    letter-spacing: -.02em; text-wrap: balance;
}
.gcd-affiche {
    grid-column: 2 / -1; grid-row: 2; z-index: 0;
    margin: .04em 0 0 -.05em;
    font: 800 clamp(92px, 21vw, 340px)/.8 var(--gcd-titre); font-stretch: 125%;
    letter-spacing: -.045em; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 2px #5B7975;
    user-select: none; pointer-events: none;
}
.gcd-une { display: contents; }
.gcd-une__image {
    grid-column: 1 / 9; grid-row: 3; z-index: 1;
    margin-top: calc(-1 * clamp(24px, 4vw, 64px));
    border-radius: 0 var(--gcd-r) var(--gcd-r) 0;
}
.gcd-une__texte {
    grid-column: 5 / 10; grid-row: 3; align-self: end; z-index: 2;
    margin-bottom: -48px; padding: 26px 30px 24px;
    background: var(--gcd-quai);
    box-shadow: 0 -1px 0 var(--gcd-filet), 0 18px 40px rgba(3, 9, 10, .45);
    border-radius: var(--gcd-r);
}
.gcd-une h2 {
    margin: 0 0 12px;
    font: 750 clamp(24px, 2.5vw, 36px)/1.1 var(--gcd-titre); font-stretch: 106%;
    letter-spacing: -.02em; text-wrap: balance;
}
.gcd-une__chapo { margin: 0; color: var(--gcd-lichen); font-size: 17px; line-height: 1.5; }

.gcd-departs {
    grid-column: 10 / 14; grid-row: 3; align-self: start; z-index: 2;
    margin-top: calc(-1 * clamp(24px, 4vw, 64px));
    padding: 18px 20px 6px;
    background-color: var(--gcd-quai-bas);
    background-image: radial-gradient(rgba(244, 178, 62, .085) 1px, transparent 1.5px);
    background-size: 6px 6px;
    border: 1px solid var(--gcd-filet); border-radius: var(--gcd-r);
}
.gcd-departs__titre {
    margin: 0 0 12px;
    font: 800 27px/1 var(--gcd-points); letter-spacing: .02em;
    color: var(--gcd-ambre);
}
.gcd-departs__colonnes, .gcd-departs__liste li {
    display: grid; grid-template-columns: 58px 1fr 56px; gap: 12px; align-items: center;
}
.gcd-departs__colonnes {
    margin: 0; padding: 0 0 8px; border-bottom: 1px solid var(--gcd-filet);
    font: 650 11px/1 var(--gcd-titre); letter-spacing: .08em; text-transform: uppercase; color: #7E948E;
}
.gcd-departs__colonnes span:last-child, .gcd-departs__liste .gcd-pastille { justify-self: center; text-align: center; }
.gcd-departs__liste { margin: 0; padding: 0; list-style: none; }
.gcd-departs__liste li { padding: 12px 0; border-bottom: 1px dashed #223436; }
.gcd-departs__liste li:last-child { border-bottom: 0; }
.gcd-departs__liste time { font: 700 20px/1 var(--gcd-points); color: var(--gcd-ambre); }
.gcd-departs__liste a {
    font: 560 15px/1.3 var(--gcd-titre); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gcd-departs__liste a:hover { color: var(--gcd-ambre); }

/* bord de quai : bande d'éveil que les quatre tracés traversent */
.gcd-quai__bord {
    position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
    background:
        radial-gradient(circle, #3C5557 2.3px, transparent 2.8px) 3px 50% / 12px 12px repeat-x,
        var(--gcd-quai-haut);
    border-top: 2px solid #2C4244;
}

@media (prefers-reduced-motion: no-preference) {
    .gcd-departs__liste li {
        transform-origin: 50% 0;
        animation: gcd-volet .6s cubic-bezier(.16, 1, .3, 1) backwards;
        animation-delay: calc(var(--i) * 85ms + 200ms);
    }
    @keyframes gcd-volet {
        from { opacity: 0; transform: perspective(420px) rotateX(-78deg); }
    }
}

@media (max-width: 999px) {
    .gcd-quai { display: block; padding: 28px 0 130px; }
    .gcd-accroche { margin: 0 20px; }
    .gcd-affiche { margin: 14px 0 0 12px; font-size: 25vw; }
    .gcd-une { display: block; }
    .gcd-une__image { margin-top: -3vw; border-radius: 0; position: relative; }
    .gcd-une__texte { position: relative; margin: -48px 14px 0; padding: 20px 20px 18px; }
    .gcd-departs { margin: 36px 14px 0; }
}

/* ---------- accueil, scène 2 : le plan ---------- */

.gcd-plan {
    position: relative;
    padding: 76px var(--gcd-marge) 112px;
    background: var(--gcd-plan); color: var(--gcd-encre);
}
/* le titre passe par-dessus les tracés, comme un nom de quartier imprimé sur le plan */
.gcd-plan__titre { position: relative; z-index: 1; }
.gcd-plan__titre {
    margin: 0 0 64px;
    font: 800 clamp(34px, 4.6vw, 64px)/1 var(--gcd-titre); font-stretch: 118%;
    letter-spacing: -.035em;
}
.gcd-plan__lignes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; }

.gcd-ligne { position: relative; --montee: 0px; }
.gcd-ligne::before {
    content: ""; position: absolute; left: 19px; width: 6px;
    top: calc(22px - var(--montee)); bottom: 20px;
    background: var(--l); border-radius: 3px;
}
.gcd-ligne__tete {
    position: relative;
    display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-content: center;
    min-height: 62px;
}
.gcd-ligne__tete .gcd-pastille { grid-row: 1 / 3; box-shadow: 0 0 0 5px var(--gcd-plan); }
.gcd-ligne__tete h3 { margin: 0; font: 750 18px/1.15 var(--gcd-titre); font-stretch: 104%; }
.gcd-ligne__tete h3 a { text-decoration: none; }
.gcd-ligne__tete h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.gcd-ligne__tete p { margin: 0; font: 550 13px var(--gcd-titre); color: var(--gcd-encre-douce); }

.gcd-ligne__arrets { margin: 26px 0 0; padding: 0; list-style: none; }
.gcd-arret { position: relative; padding: 0 0 28px 58px; }
.gcd-arret::before {
    content: ""; position: absolute; left: 11px; top: 12px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 5px solid var(--l);
}
.gcd-arret__image { background: #D3DBD1; border-radius: var(--gcd-r); box-shadow: 0 1px 0 rgba(17, 32, 31, .08); }
.gcd-arret__date { margin: 10px 0 4px; font: 550 12.5px var(--gcd-titre); color: var(--gcd-encre-douce); }
.gcd-arret h4 { margin: 0; font: 700 17px/1.25 var(--gcd-titre); text-wrap: pretty; }

.gcd-butoir { position: relative; padding: 4px 0 0 58px; min-height: 40px; }
.gcd-butoir::before {
    content: ""; position: absolute; left: 8px; top: 12px;
    width: 28px; height: 7px; border-radius: 2px; background: var(--gcd-encre);
}
.gcd-butoir a {
    font: 700 14.5px var(--gcd-titre);
    text-decoration: underline; text-decoration-color: var(--l); text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.gcd-butoir a:hover { text-decoration-color: var(--gcd-encre); }

@media (max-width: 1179px) {
    .gcd-plan__lignes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .gcd-plan { padding-top: 60px; }
    .gcd-plan__lignes { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

/* ---------- accueil, scène 3 : le terminus ---------- */

.gcd-terminus {
    position: relative;
    margin-top: -64px;
    padding: 124px var(--gcd-marge) 84px;
    background: var(--gcd-quai);
    /* coude à 45°, la grammaire des plans de réseau */
    clip-path: polygon(0 64px, 58% 64px, calc(58% + 64px) 0, 100% 0, 100% 100%, 0 100%);
}
.gcd-terminus h2 {
    margin: 0 0 44px;
    font: 800 clamp(30px, 3.6vw, 48px)/1 var(--gcd-titre); font-stretch: 118%; letter-spacing: -.03em;
}
.gcd-terminus__signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.gcd-signature-bloc { display: grid; grid-template-columns: 124px 1fr; gap: 26px; align-items: start; }
.gcd-signature-bloc h3 { margin: 4px 0 8px; font: 750 23px/1.1 var(--gcd-titre); font-stretch: 108%; }
.gcd-signature-bloc p:not(.gcd-meta) { margin: 0 0 14px; color: var(--gcd-lichen); font-size: 16.5px; line-height: 1.55; }
.gcd-portrait {
    padding: 5px; border-radius: 50%;
    background: conic-gradient(from -90deg, var(--a) 0 50%, var(--b) 0 100%);
}
.gcd-portrait img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid var(--gcd-quai); }

.gcd-lien-fleche {
    font: 650 15px var(--gcd-titre); text-decoration: underline;
    text-decoration-color: var(--gcd-ambre); text-decoration-thickness: 2px;
}
.gcd-lien-fleche::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .2s ease-out; }
.gcd-lien-fleche:hover::after { transform: translateX(4px); }

@media (max-width: 799px) {
    .gcd-terminus { clip-path: polygon(0 40px, 40% 40px, calc(40% + 40px) 0, 100% 0, 100% 100%, 0 100%); margin-top: -40px; padding-top: 88px; }
    .gcd-terminus__signatures { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .gcd-signature-bloc { grid-template-columns: 84px 1fr; gap: 18px; }
}

/* ---------- pied ---------- */

.gcd-pied {
    padding: 52px var(--gcd-marge) 30px;
    border-top: 1px solid var(--gcd-filet);
    font-family: var(--gcd-titre);
}
.gcd-pied__haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; }
.gcd-pied__marque .gcd-marque { font-size: 20px; }
.gcd-pied__marque p { max-width: 40ch; margin: 14px 0 0; color: var(--gcd-lichen); font: 400 15px/1.55 var(--gcd-texte); }
.gcd-pied__lignes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; margin: 0; padding: 0; list-style: none; }
.gcd-pied__lignes a {
    display: flex; align-items: center; gap: 12px; min-height: 48px;
    border-bottom: 1px solid var(--gcd-filet); text-decoration: none;
    font: 600 15px/1.2 var(--gcd-titre);
}
.gcd-pied__lignes a:hover span { text-decoration: underline; text-decoration-color: var(--l); text-decoration-thickness: 2px; }
.gcd-pied__lignes small { margin-left: auto; color: var(--gcd-lichen); font-size: 12.5px; font-weight: 500; }
.gcd-pied__bas {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--gcd-filet);
    font-size: 13px; color: var(--gcd-lichen);
}
.gcd-pied__bas nav { display: flex; gap: 20px; }
.gcd-pied__bas a { text-decoration: none; }
.gcd-pied__bas a:hover { color: var(--gcd-craie); text-decoration: underline; }

@media (max-width: 799px) {
    .gcd-pied__haut, .gcd-pied__lignes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- article ---------- */

.gcd-trajet__tete {
    max-width: 920px; margin: 0 auto;
    padding: clamp(36px, 6vw, 76px) 20px 34px;
    text-align: center;
}
.gcd-trajet__tete h1 {
    margin: 0 0 18px;
    font: 780 clamp(31px, 4.5vw, 58px)/1.05 var(--gcd-titre); font-stretch: 112%;
    letter-spacing: -.028em; text-wrap: balance;
}
.gcd-chapo {
    max-width: 38em; margin: 0 auto 28px;
    font: italic 400 clamp(19px, 1.7vw, 22px)/1.45 var(--gcd-texte);
    color: var(--gcd-lichen); text-wrap: pretty;
}
.gcd-signature { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.gcd-signature__photo img { display: block; width: 50px; height: 50px; border-radius: 50%; }
.gcd-signature p { margin: 0; }
.gcd-signature__nom { display: block; margin-bottom: 4px; font: 700 16px var(--gcd-titre); text-decoration: none; }
.gcd-signature__nom:hover { text-decoration: underline; text-decoration-color: var(--gcd-ambre); }
.gcd-signature .gcd-meta { margin: 0; }

.gcd-trajet__image { max-width: 1120px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--gcd-r); }

.gcd-trajet__corps {
    --voie: 33px; --retrait: 76px;
    --voie-fond: color-mix(in srgb, var(--l, var(--gcd-lichen)) 26%, var(--gcd-quai));
    position: relative;
    max-width: calc(var(--gcd-lecture) + var(--retrait) + 20px);
    margin: 52px auto 0; padding: 0 20px 0 var(--retrait);
}
.gcd-trajet__corps::before, .gcd-trajet__avance {
    content: ""; position: absolute; top: 0; bottom: 0; left: var(--voie);
    width: 6px; border-radius: 3px;
}
.gcd-trajet__corps::before { background: var(--voie-fond); }
.gcd-trajet__avance {
    background: var(--l, var(--gcd-ambre));
    transform-origin: 50% 0; transform: scaleY(var(--avance, 0));
}

.gcd-itineraire {
    margin: 0 0 44px; padding: 22px 26px 20px;
    background: var(--gcd-quai-haut); border-radius: var(--gcd-r);
    font-family: var(--gcd-titre);
}
.gcd-itineraire__titre { margin: 0 0 12px; font: 750 17px/1.2 var(--gcd-titre); font-stretch: 108%; }
.gcd-itineraire ol { margin: 0; padding: 0; list-style: none; }
.gcd-itineraire li { position: relative; padding: 6px 0 6px 30px; }
.gcd-itineraire li::before {
    content: ""; position: absolute; z-index: 1; left: 0; top: 11px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--gcd-quai-haut); border: 4px solid var(--l, var(--gcd-ambre));
}
.gcd-itineraire li:not(:last-child)::after {
    content: ""; position: absolute; left: 5px; top: 20px; bottom: -11px;
    width: 4px; background: var(--l, var(--gcd-ambre));
}
.gcd-itineraire a { font: 560 16px/1.35 var(--gcd-titre); text-decoration: none; }
.gcd-itineraire a:hover { color: var(--gcd-ambre); }

.gcd-texte { font-size: 19px; line-height: 1.65; }
.gcd-texte > * { margin-top: 0; margin-bottom: 1.1em; }
.gcd-texte a { text-decoration-color: var(--gcd-ambre); text-decoration-thickness: 2px; }
.gcd-texte a:hover { color: var(--gcd-ambre); }
.gcd-texte strong { font-weight: 680; color: #fff; }
.gcd-texte h2 {
    position: relative; scroll-margin-top: 24px;
    margin: 2.1em 0 .6em;
    font: 760 clamp(25px, 2.4vw, 32px)/1.15 var(--gcd-titre); font-stretch: 110%; letter-spacing: -.015em;
    text-wrap: balance;
}
.gcd-texte h2::before {
    content: ""; position: absolute; top: .2em;
    left: calc(var(--voie) - var(--retrait) + 3px - 12px);
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--gcd-quai); border: 5px solid var(--voie-fond);
    transition: border-color .25s ease-out, background-color .25s ease-out;
}
.gcd-texte h2.est-atteinte::before { border-color: var(--l, var(--gcd-ambre)); background: var(--gcd-craie); }
.gcd-texte h3 { margin: 1.8em 0 .5em; font: 720 21px/1.25 var(--gcd-titre); font-stretch: 104%; }
.gcd-texte ul, .gcd-texte ol { padding-left: 1.25em; }
.gcd-texte li { margin-bottom: .35em; }
.gcd-texte li::marker { color: var(--l, var(--gcd-ambre)); font-weight: 700; }
.gcd-texte blockquote {
    margin: 2em 0; padding: 0;
    font-style: italic; font-size: 21px; line-height: 1.5;
}
.gcd-texte blockquote::before {
    content: "«"; display: block; margin-bottom: 2px;
    font: 800 60px/.8 var(--gcd-titre); font-style: normal; color: var(--l, var(--gcd-ambre));
}
.gcd-texte blockquote p { margin: 0 0 .5em; }
.gcd-texte blockquote cite { font: normal 550 13.5px var(--gcd-titre); color: var(--gcd-lichen); }
.gcd-texte figure { margin: 1.8em 0; }
.gcd-texte figure img { border-radius: var(--gcd-r); }
.gcd-texte figcaption { margin-top: 8px; font: 500 13.5px/1.4 var(--gcd-titre); color: var(--gcd-lichen); }

/* tableaux : la figure (ou .gcd-defile posé par le script) défile, jamais la table */
.gcd-texte .wp-block-table, .gcd-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gcd-texte table {
    width: 100%; min-width: 480px; border-collapse: collapse;
    font: 500 15.5px/1.4 var(--gcd-titre); font-variant-numeric: tabular-nums;
}
.gcd-texte th {
    text-align: left; padding: 11px 14px;
    background: var(--gcd-quai-haut); font-weight: 700;
    border-bottom: 2px solid var(--l, var(--gcd-ambre));
}
.gcd-texte th, .gcd-texte td { border: 0; }
.gcd-texte td { padding: 11px 14px; border-bottom: 1px solid var(--gcd-filet); vertical-align: top; }
.gcd-texte .wp-block-table thead { border-bottom: 0; }
.gcd-texte .wp-block-table figcaption { text-align: left; }

/*
 * Encarts (classe posée sur un bloc Groupe). Pas de filet à gauche : chaque
 * encart est une correspondance branchée sur le tracé de l'article, marquée
 * sur la voie par la gélule des plans de réseau.
 */
.gcd-encart {
    --branche: var(--l, var(--gcd-lichen));
    position: relative;
    margin: 2em 0; padding: 20px 24px;
    background: var(--gcd-quai-haut); border-radius: var(--gcd-r);
    font-size: 17.5px; line-height: 1.6;
}
.gcd-encart > :last-child { margin-bottom: 0; }
.gcd-encart:not(.gcd-encart--fiche) > p:first-child > strong:first-child {
    font: 750 17.5px/1.25 var(--gcd-titre); font-stretch: 108%; color: var(--gcd-craie);
}
.gcd-trajet__corps .gcd-encart::before {
    content: ""; position: absolute; top: 28px;
    left: calc(var(--voie) + 3px - var(--retrait)); width: calc(var(--retrait) - var(--voie) - 3px);
    height: 4px; background: var(--branche);
}
.gcd-trajet__corps .gcd-encart::after {
    content: ""; position: absolute; z-index: 1; top: 14px;
    left: calc(var(--voie) + 3px - var(--retrait) - 11px);
    width: 22px; height: 32px; border-radius: 11px;
    background: var(--gcd-craie); border: 4px solid var(--gcd-quai-bas);
    box-shadow: 0 0 0 2px var(--branche);
}

/* info : bandeau plein à la couleur de la ligne ; l'avertissement reprend la même bande, hachurée */
.gcd-encart:not(.gcd-encart--essentiel):not(.gcd-encart--fiche) {
    padding-top: 30px;
    background:
        linear-gradient(var(--branche), var(--branche)) 0 0 / 100% 8px no-repeat,
        var(--gcd-quai-haut);
}
.gcd-trajet__corps .gcd-encart:not(.gcd-encart--essentiel):not(.gcd-encart--fiche)::before { top: 36px; }
.gcd-trajet__corps .gcd-encart:not(.gcd-encart--essentiel):not(.gcd-encart--fiche)::after { top: 22px; }

/* avertissement : bandeau hachuré de perturbation */
.gcd-encart.gcd-encart--attention:not(.gcd-encart--fiche) {
    --branche: var(--gcd-ambre);
    background:
        repeating-linear-gradient(-45deg, var(--gcd-ambre) 0 9px, var(--gcd-quai-bas) 9px 18px) 0 0 / 100% 8px no-repeat,
        var(--gcd-quai-haut);
}
.gcd-trajet__corps .gcd-encart--attention::before { top: 36px; }
.gcd-trajet__corps .gcd-encart--attention::after { top: 22px; }

/* fiche formation / dispositif : une grille horaire, champ à gauche, valeur à droite */
.gcd-encart--fiche { padding-top: 10px; padding-bottom: 10px; }
.gcd-encart--fiche > p {
    display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px; align-items: baseline;
    margin: 0; padding: 10px 0;
    border-bottom: 1px dashed #2E4547;
    font-variant-numeric: tabular-nums;
}
.gcd-encart--fiche > p:last-child { border-bottom: 0; }
.gcd-encart--fiche > p > strong:first-child {
    display: block; margin: 0;
    font: 650 14px/1.3 var(--gcd-titre); color: var(--gcd-lichen);
}

/* l'essentiel, en tête d'article : un billet clair, talon à la couleur de la ligne, encoches de poinçon */
.gcd-encart--essentiel {
    --talon: 58px;
    margin: 0 0 40px; padding: 22px 26px 20px calc(var(--talon) + 26px);
    background: var(--gcd-plan); color: var(--gcd-encre);
    border-radius: 8px;
    font-size: 17.5px;
    -webkit-mask:
        radial-gradient(circle at var(--talon) 0, #0000 10px, #000 10.5px) top / 100% 51% no-repeat,
        radial-gradient(circle at var(--talon) 100%, #0000 10px, #000 10.5px) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle at var(--talon) 0, #0000 10px, #000 10.5px) top / 100% 51% no-repeat,
        radial-gradient(circle at var(--talon) 100%, #0000 10px, #000 10.5px) bottom / 100% 51% no-repeat;
}
.gcd-trajet__corps .gcd-encart--essentiel::before {
    top: 0; bottom: 0; left: 0; width: var(--talon); height: auto;
    background: var(--l, var(--gcd-ambre));
    border-right: 2px dashed rgba(17, 32, 31, .45);
}
.gcd-trajet__corps .gcd-encart--essentiel::after { display: none; }
.gcd-encart.gcd-encart--essentiel > p:first-child > strong:first-child {
    display: block; margin-bottom: 6px;
    font: 800 20px/1.2 var(--gcd-titre); font-stretch: 115%; letter-spacing: -.01em; color: var(--gcd-encre);
}
.gcd-encart--essentiel strong { color: var(--gcd-encre); }
.gcd-encart--essentiel ul { margin: 0; padding-left: 1.1em; }
.gcd-encart--essentiel li { margin-bottom: .3em; }
.gcd-encart--essentiel li::marker { color: var(--gcd-encre); }
.gcd-encart--essentiel a { text-decoration-color: currentColor; }
.gcd-encart--essentiel a:hover { color: var(--gcd-encre-douce); }

@media (max-width: 799px) {
    .gcd-encart { padding: 18px 18px; }
    .gcd-encart--attention { padding-top: 28px; }
    .gcd-encart--fiche > p { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .gcd-encart--essentiel { --talon: 34px; padding: 20px 18px 18px calc(var(--talon) + 18px); }
}

.gcd-trajet__fin { max-width: 1120px; margin: 72px auto 0; padding: 0 20px 88px; }
.gcd-auteur {
    display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start;
    max-width: calc(var(--gcd-lecture) + 76px); margin: 0 auto; padding: 24px 0;
    border-top: 1px solid var(--gcd-filet); border-bottom: 1px solid var(--gcd-filet);
}
.gcd-auteur img { width: 64px; height: 64px; border-radius: 50%; }
.gcd-auteur p { margin: 0; color: var(--gcd-lichen); font-size: 16px; line-height: 1.55; }
.gcd-auteur .gcd-auteur__nom { margin-bottom: 4px; color: var(--gcd-craie); font: 750 18px var(--gcd-titre); }
.gcd-auteur__nom a { text-decoration: none; }
.gcd-voisins h2 { margin: 60px 0 22px; font: 780 28px/1.1 var(--gcd-titre); font-stretch: 112%; letter-spacing: -.02em; }
.gcd-voisins ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.gcd-voisins__image { border-radius: var(--gcd-r); }
.gcd-voisins .gcd-arret__date { color: var(--gcd-lichen); }
.gcd-voisins h3 { margin: 0; font: 700 18px/1.25 var(--gcd-titre); }

@media (max-width: 799px) {
    .gcd-trajet__image { border-radius: 0; }
    .gcd-trajet__corps { --voie: 14px; --retrait: 44px; margin-top: 36px; padding-right: 18px; }
    .gcd-texte { font-size: 18px; }
    .gcd-texte h2::before { width: 20px; height: 20px; left: calc(var(--voie) - var(--retrait) + 3px - 10px); border-width: 4px; }
    .gcd-itineraire { padding: 18px 18px 16px; }
    .gcd-voisins ol { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- archives : rubrique, auteur, recherche ---------- */

.gcd-bandeau {
    position: relative; overflow: hidden;
    padding: clamp(48px, 7vw, 96px) var(--gcd-marge) clamp(64px, 8vw, 116px);
    background: var(--l, var(--gcd-quai-haut)); color: var(--l-encre, var(--gcd-craie));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 96px 100%, 0 calc(100% - 96px));
}
.gcd-bandeau--auteur { --l-encre: var(--gcd-craie); background: var(--gcd-quai-haut); }
.gcd-bandeau--recherche { background: var(--gcd-ambre); color: #3A2700; }
.gcd-bandeau__numero {
    position: absolute; right: -4vw; top: 50%;
    width: clamp(260px, 36vw, 520px); aspect-ratio: 1;
    transform: translateY(-50%) rotate(-8deg);
    color: color-mix(in srgb, var(--l-encre) 42%, transparent);
    pointer-events: none;
}
.gcd-bandeau__numero .gcd-icone { display: block; width: 100%; height: 100%; stroke-width: 2px; }
.gcd-bandeau__texte { position: relative; max-width: 760px; }
.gcd-bandeau h1 {
    max-width: 13ch; margin: 0 0 16px;
    font: 800 clamp(38px, 6vw, 82px)/.98 var(--gcd-titre); font-stretch: 118%;
    letter-spacing: -.035em; text-wrap: balance;
}
.gcd-bandeau--recherche h1 { max-width: 20ch; font-size: clamp(32px, 4.4vw, 60px); }
.gcd-bandeau__desc { max-width: 46ch; font-size: 19px; line-height: 1.5; }
.gcd-bandeau__desc p { margin: 0 0 .6em; }
.gcd-bandeau__compte { margin: 18px 0 0; font: 700 14px var(--gcd-titre); }
.gcd-bandeau .gcd-recherche { max-width: 440px; margin-top: 22px; }
.gcd-bandeau .gcd-recherche input { width: 100%; height: 50px; font-size: 16px; background: #fff7e6; color: var(--gcd-quai-bas); border-color: #C98A1A; }
.gcd-bandeau .gcd-recherche input::placeholder { color: #8A6A2A; }
.gcd-bandeau .gcd-recherche button { height: 50px; color: #3A2700; }
.gcd-bandeau__portrait { position: relative; width: 120px; margin-bottom: 22px; }
.gcd-bandeau__portrait img { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }

.gcd-stations {
    --voie: 20px;
    position: relative;
    max-width: 1040px; margin: 0 auto; padding: 60px 20px 24px;
    list-style: none;
}
.gcd-stations::before {
    content: ""; position: absolute; top: -80px; bottom: 44px; left: calc(20px + var(--voie) - 3px);
    width: 6px; border-radius: 3px;
    background: var(--l, #36504F);
    box-shadow: 0 0 0 3px var(--gcd-quai);
}
.gcd-rubrique:has(.gcd-bandeau.gcd-l1) .gcd-stations { --l: var(--gcd-l1); }
.gcd-rubrique:has(.gcd-bandeau.gcd-l2) .gcd-stations { --l: var(--gcd-l2); }
.gcd-rubrique:has(.gcd-bandeau.gcd-l3) .gcd-stations { --l: var(--gcd-l3); }
.gcd-rubrique:has(.gcd-bandeau.gcd-l4) .gcd-stations { --l: var(--gcd-l4); }

.gcd-station {
    position: relative;
    display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start;
    padding: 0 0 46px 70px;
}
.gcd-station::before {
    content: ""; position: absolute; z-index: 1; left: calc(var(--voie) - 12px); top: 22px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--gcd-craie); border: 5px solid var(--l, var(--gcd-lichen));
}
.gcd-station::after {
    content: ""; position: absolute; left: var(--voie); top: 31px;
    width: calc(70px - var(--voie)); height: 6px; background: var(--l, var(--gcd-lichen));
}
.gcd-station__image { border-radius: var(--gcd-r); }
.gcd-station h2 {
    margin: 0 0 8px;
    font: 760 clamp(21px, 2vw, 27px)/1.15 var(--gcd-titre); font-stretch: 106%; letter-spacing: -.015em;
    text-wrap: balance;
}
.gcd-station__texte > p:not(.gcd-meta) { margin: 0; color: var(--gcd-lichen); font-size: 17px; line-height: 1.5; }

.gcd-pagination {
    display: flex; flex-wrap: wrap; gap: 8px;
    max-width: 1040px; margin: 0 auto; padding: 0 20px 88px 90px;
    font: 700 15px var(--gcd-titre);
}
.gcd-pagination a, .gcd-pagination span {
    display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px;
    background: var(--gcd-quai-haut); border-radius: var(--gcd-r); text-decoration: none;
}
.gcd-pagination a:hover { background: #22383A; }
.gcd-pagination .current { background: var(--gcd-ambre); color: var(--gcd-quai-bas); }
.gcd-vide { max-width: 1040px; margin: 0 auto; padding: 60px 20px 100px 90px; color: var(--gcd-lichen); }

@media (max-width: 799px) {
    .gcd-bandeau { clip-path: polygon(0 0, 100% 0, 100% 100%, 56px 100%, 0 calc(100% - 56px)); }
    .gcd-bandeau__numero { width: 62vw; right: -14vw; top: 60%; }
    .gcd-stations { --voie: 12px; padding: 44px 16px 16px; }
    .gcd-stations::before { left: calc(16px + var(--voie) - 3px); top: -50px; }
    .gcd-station { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 0 38px 40px; }
    .gcd-station::after { width: calc(40px - var(--voie)); }
    .gcd-pagination, .gcd-vide { padding-left: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .gcd *, .gcd *::before, .gcd *::after { transition: none !important; animation: none !important; }
}

/* ---------- pages fixes : à propos, légales, contact ---------- */

.gcd-bandeau--page { background: var(--gcd-quai-haut); --l-encre: var(--gcd-craie); }
.gcd-bandeau--page h1 { max-width: 16ch; }
.gcd-bandeau--page .gcd-bandeau__compte { color: var(--gcd-lichen); font-weight: 550; }
.gcd-faisceau {
    position: absolute; right: 0; bottom: 0;
    width: min(440px, 42vw); height: auto;
    pointer-events: none;
}
.gcd-trajet--page .gcd-trajet__corps { margin-top: 56px; padding-bottom: 96px; }
.gcd-trajet--page .gcd-texte h2 { font-size: clamp(22px, 2vw, 27px); }

/* contact : le texte à gauche, le formulaire en panneau à droite */
.gcd-trajet--formulaire .gcd-trajet__corps { max-width: calc(1120px + var(--retrait)); }
.gcd-trajet--formulaire .gcd-texte {
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 0 56px; align-items: start;
}
.gcd-trajet--formulaire .gcd-texte > :not(.wpforms-container) { grid-column: 1; }
.gcd-trajet--formulaire .gcd-texte > .wpforms-container { grid-column: 2; grid-row: 1 / span 20; }

.gcd .wpforms-container {
    margin: 0; padding: 30px 30px 28px;
    background: var(--gcd-quai-haut); border-radius: var(--gcd-r);
    box-shadow: inset 0 3px 0 var(--gcd-ambre);
    font-family: var(--gcd-titre);
}
.gcd .wpforms-field { padding: 0 0 20px; }
.gcd .wpforms-field-label {
    display: block; margin: 0 0 8px;
    font: 650 15px/1.3 var(--gcd-titre); color: var(--gcd-craie);
}
.gcd .wpforms-required-label { color: var(--gcd-ambre); margin-left: 2px; }
.gcd .wpforms-form input[type="text"], .gcd .wpforms-form input[type="email"], .gcd .wpforms-form textarea {
    display: block; width: 100%; height: 50px; padding: 0 14px;
    background: var(--gcd-quai-bas); color: var(--gcd-craie);
    border: 1px solid #2C4244; border-radius: var(--gcd-r);
    font: 450 16px/1.4 var(--gcd-titre);
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
    -webkit-appearance: none; appearance: none;
}
.gcd .wpforms-form textarea { height: 190px; padding: 12px 14px; resize: vertical; font-family: var(--gcd-texte); font-size: 17px; line-height: 1.55; }
.gcd .wpforms-form input:focus, .gcd .wpforms-form textarea:focus {
    outline: none; border-color: var(--gcd-ambre); box-shadow: 0 0 0 3px rgba(244, 178, 62, .22);
}
.gcd .wpforms-form .wpforms-error, .gcd .wpforms-form input.wpforms-error, .gcd .wpforms-form textarea.wpforms-error { border-color: #F07A6A; }
.gcd .wpforms-form em.wpforms-error, .gcd .wpforms-form label.wpforms-error {
    display: block; margin-top: 6px; font: normal 550 13.5px var(--gcd-titre); color: #F4A094;
}
.gcd .wpforms-submit-container { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.gcd .wpforms-submit {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 0 24px;
    background: var(--gcd-ambre); color: var(--gcd-quai-bas);
    border: 0; border-radius: var(--gcd-r);
    font: 750 16px var(--gcd-titre); font-stretch: 106%;
    cursor: pointer; transition: background-color .15s ease-out;
}
.gcd .wpforms-submit::after { content: "\2192"; transition: transform .2s ease-out; }
.gcd .wpforms-submit:hover { background: #FFC45C; }
.gcd .wpforms-submit:hover::after { transform: translateX(4px); }
.gcd .wpforms-submit:focus-visible { outline: 2px solid var(--gcd-craie); outline-offset: 3px; }
.gcd .wpforms-submit-spinner { width: 22px; height: 22px; filter: invert(1); }
.gcd .wpforms-confirmation-container-full, .gcd .wpforms-confirmation-container {
    padding: 22px 24px;
    background: var(--gcd-plan); color: var(--gcd-encre); border-radius: var(--gcd-r);
    box-shadow: inset 0 6px 0 var(--gcd-l3);
    font: 400 17px/1.55 var(--gcd-texte);
}
.gcd .wpforms-confirmation-container-full p { margin: 0; }
.gcd .wpforms-confirmation-container-full strong { font-family: var(--gcd-titre); }
.gcd #wpforms-error-noscript, .gcd .wpforms-error-noscript { color: #F4A094; font: 550 14px var(--gcd-titre); }

@media (max-width: 899px) {
    .gcd-trajet--formulaire .gcd-texte { display: block; }
    .gcd .wpforms-container { margin-top: 12px; padding: 22px 18px 20px; }
    .gcd-faisceau { width: 46vw; opacity: .9; }
}

.gcd-trajet--formulaire .gcd-trajet__corps::before, .gcd-trajet--formulaire .gcd-trajet__avance { display: none; }
.gcd-trajet--formulaire .gcd-trajet__corps { padding-left: 20px; }