/* Page « Guides » (guides-neuf.html) : image + dégradé, tuiles des thèmes à cheval sur l'image, puis les guides. Couleur de chaque thème : --c1 / --c2 (donnees/rubriques.json). */

/* ---------- haut de page ---------- */
.gx-hero { position: relative; isolation: isolate; overflow: hidden; padding: 20px 0 104px; color: #fff; background: #0f2a3d; }
.gx-hero-img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.gx-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(95deg, rgb(15 42 61 / .94) 8%, rgb(15 42 61 / .72) 42%, rgb(28 125 179 / .12) 78%); }
.gx-hero .pmb-fil { margin-bottom: 8px; }
.gx-hero .pmb-fil, .gx-hero .pmb-fil a, .gx-hero .pmb-fil span { color: rgb(255 255 255 / .85); }
.gx-hero h1 { margin: 0; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.12; color: #fff; }
.gx-hero .tt-cle { font-style: italic; color: #fde68a; -webkit-text-fill-color: #fde68a; }
.gx-hero p { margin: 8px 0 16px; font-size: 16px; color: rgb(255 255 255 / .92); }
.gx-cherche { width: 100%; max-width: 440px; margin: 0; }

/* ---------- les tuiles des thèmes ---------- */
.gx-menu { padding: 0 0 26px; background: #fff; }
.gx-rangee-cadre { position: relative; z-index: 2; margin-top: -86px; }
.gx-rangee { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.gx-carte { position: relative; overflow: hidden; height: 172px; border-radius: 16px; color: #fff; text-decoration: none; box-shadow: 0 18px 34px -18px rgb(15 42 61 / .75); transition: transform .35s var(--courbe), box-shadow .35s; -webkit-tap-highlight-color: transparent; }
.gx-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--courbe); }
.gx-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 42 61 / .05) 25%, rgb(15 42 61 / .9)); }
.gx-carte:hover { transform: translateY(-5px); color: #fff; }
.gx-carte:hover img { transform: scale(1.08); }
.gx-carte.on { outline: 3px solid var(--c2); outline-offset: 2px; }
.gx-carte-t { position: absolute; z-index: 1; left: 12px; right: 10px; bottom: 11px; display: grid; gap: 1px; }
.gx-carte-t i { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; padding: 7px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 4px 10px -3px rgb(15 42 61 / .6); }
.gx-carte-t b { font-size: 15px; font-weight: 800; line-height: 1.15; }
.gx-carte-t small { font-size: 12px; font-weight: 600; color: rgb(255 255 255 / .85); }

/* flèches : seulement quand les tuiles défilent (téléphone, tablette) */
.gx-fl { display: none; }
.gx-fl[hidden] { display: none !important; }

/* ---------- les nouveautés ---------- */
.gx-nouv { --c1: #1c7db3; --c2: #28a3e6; padding: 6px 0 32px; background: #fff; }
.gx-nouv[hidden] { display: none; }
.gx-nouv-t { display: flex; align-items: center; gap: 14px; }
.gx-nouv-t > div { flex: 1; min-width: 0; }
.gx-nouv h2 { margin: 0; font-size: 27px; line-height: 1.15; color: var(--ink); }
.gx-nouv h2 .tt-cle { font-style: italic; }
.gx-nouv-t p { margin: 3px 0 0; font-size: 15px; color: #4c6172; }
.gx-nouv .cs-grille.hb-grille { margin-top: 20px; }
.gx-nouv .cs-fiche .cs-media { aspect-ratio: 16 / 9; }

/* ---------- les guides : une rangée par thème (carrousel .gdx du guide de l'accueil, sections.css), aux couleurs du thème ---------- */
.gx-liste { padding: 8px 0 34px; }
.gx-liste[hidden] { display: none; }
.gx-theme { padding: 22px 0 6px; scroll-margin-top: 12px; }
.gx-theme-t { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.gx-theme-t > div { flex: 1; min-width: 0; }
.gx-theme-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 11px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.gx-theme h2 { margin: 0; font-size: 27px; line-height: 1.15; color: var(--ink); }
.gx-theme h2 .tt-cle { font-style: italic; }
.gx-theme-t p { margin: 3px 0 0; font-size: 15px; color: #4c6172; }
.gx-tous { flex: none; }
.gx-theme .cs-guide .cs-tag { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.gx-theme .cs-guide h3 { min-height: 2.5em; -webkit-line-clamp: 2; font-size: 15.5px; }
.gx-theme .cs-guide .cs-corps { padding: 13px 16px 15px; }
.gx-theme .cs-guide .cs-lien { margin-top: 8px; color: var(--c1); }
.gx-theme .cs-guide:hover h3 { color: var(--c1); }
.gx-theme .gdx-fl { top: 92px; color: var(--c1); }
.gx-theme .gdx-fl:hover { color: #fff; background: linear-gradient(135deg, var(--c2), var(--c1)); }
.gx-theme .glisse-points button { padding: 0; border: 0; cursor: pointer; }
.gx-theme .glisse-points button.on { background: linear-gradient(90deg, var(--c2), var(--c1)); }

/* rangée qui tient à l'écran : pas de défilement, cartes centrées */
.gx-fixe .glisse-piste { justify-content: center; }
.gx-fixe .gdx-fl, .gx-fixe .glisse-points { display: none; }

/* entrée : l'icône du thème se pose, les cartes arrivent l'une après l'autre (guides.js : vu, puis pose) */
.js .gx-rang:not(.vu) .cs { opacity: 0; }
.js .gx-rang.vu:not(.pose) .cs { animation: cs-entre .9s var(--rebond) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
.js .gx-theme:has(.gx-rang:not(.vu)) .gx-theme-ic { scale: .4; rotate: -25deg; opacity: 0; }
.gx-theme-ic { transition: scale .7s var(--rebond), rotate .7s var(--rebond), opacity .4s; }

/* les adresses du thème : une ligne qui glisse */
.gx-adr { margin-top: 4px; }
.gx-theme .gx-h { margin: 6px 0 10px; }
.gx-adr-l { display: flex; gap: 10px; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 14px; scrollbar-width: none; scroll-snap-type: x proximity; }
.gx-adr-l::-webkit-scrollbar { display: none; }
.gx-adr-l .an-autre { flex: 0 0 auto; min-width: 210px; padding: 10px 14px; scroll-snap-align: start; }
.gx-theme .an-autre i, .gx-resultats .an-autre i { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.gx-theme .an-autre > svg, .gx-resultats .an-autre > svg { color: var(--c1); }

.gx-h { display: flex; align-items: center; gap: 8px; margin: 30px 0 14px; font-size: 15px; font-weight: 800; color: var(--ink); }
.gx-h svg { width: 18px; height: 18px; color: var(--c1); }

/* résultats de la recherche */
.gx-resultats { padding-top: 26px; }
.gx-resultats [hidden] { display: none !important; }
.gx-resultats .an-autres { margin-top: 18px; }
.gx-resultats .cs-fiche .cs-media { aspect-ratio: 16 / 10; }

.gx-derniers { list-style: none; }
.gx-act { margin: 28px 0 0; text-align: center; }


/* ---------- téléphone et tablette : les tuiles glissent, les flèches le montrent ---------- */
@media (max-width: 960px) {
  .gx-cherche { max-width: none; }
  .gx-hero { padding-bottom: 86px; }
  .gx-rangee-cadre { margin: -70px -16px 0; }
  .gx-rangee { display: flex; overflow-x: auto; padding: 0 16px 8px; scroll-snap-type: x proximity; scroll-padding-left: 16px; scrollbar-width: none; }
  .gx-rangee::-webkit-scrollbar { display: none; }
  .gx-carte { flex: none; width: 128px; height: 138px; scroll-snap-align: start; }
  .gx-fl { all: unset; box-sizing: border-box; position: absolute; z-index: 3; top: 10px; display: grid; place-items: center; width: 38px; height: 38px; padding: 10px; border-radius: 50%; color: var(--b1); background: #fff; box-shadow: 0 6px 16px -5px rgb(15 42 61 / .65); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .gx-fl svg { width: 100%; height: 100%; stroke-width: 2.6; }
  .gx-prec { left: 5px; }
  .gx-prec svg { transform: rotate(180deg); }
  .gx-suiv { right: 5px; }
  .gx-fl:focus-visible { outline: 2px solid var(--b1); outline-offset: 2px; }
}
@media (max-width: 600px) {
  .gx-theme h2, .gx-nouv h2 { font-size: 23px; }
  .gx-nouv-t { flex-wrap: wrap; }
  .gx-nouv-t .bouton { width: 100%; justify-content: center; }
  .gx-nouv .cs-fiche .cs-media { aspect-ratio: 16 / 8; }
  .gx-nouv .cs-fiche .cs-corps { margin-top: -36px; padding: 22px 18px 18px; }
  .gx-theme-t { flex-wrap: wrap; }
  .gx-tous { width: 100%; justify-content: center; }
  .gx-adr-l { margin: 0 -16px; padding: 2px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .gx-carte, .gx-carte img, .gx-theme-ic { transition: none; } }

/* ================= page d'un thème (theme-neuf.html) : bannière .pmb, guides à gauche, colonne .coB à droite ================= */
.gt .tt-sur, .gt .tt-cle { color: var(--c1); }
.gt .tt-trait { background: linear-gradient(90deg, var(--c2), var(--c1)); }
.gt-chiffres { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.gt-chiffres li { display: flex; align-items: baseline; gap: 6px; padding: 9px 16px; border-radius: 999px; background: #fff; box-shadow: 0 10px 22px -16px rgb(15 42 61 / .55);
  animation: cs-entre .8s var(--rebond) backwards; animation-delay: calc(.35s + var(--k, 0) * 120ms); }
.gt-chiffres li:nth-child(2) { --k: 1; } .gt-chiffres li:nth-child(3) { --k: 2; }
.gt-chiffres b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--c1); }
.gt-chiffres span { font-size: 14px; font-weight: 600; color: #4c6172; }
.gt .sv-photo { animation: gt-photo 1.1s var(--courbe) backwards .15s; }
@keyframes gt-photo { from { opacity: 0; translate: 40px 0; rotate: 3deg; } }

.gt-t { margin-bottom: 0; }
.gt .gx-theme-ic { color: #fff; }
.gt-grille.cs-grille.hb-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
.gt-grille .cs-fiche .cs-media { aspect-ratio: 16 / 9; }
.gt-grille .cs-date { color: var(--c1); }
.gt-grille .cs-fiche:hover h3 { color: var(--c1); }

.gt-pages { display: flex; justify-content: center; gap: 8px; margin: 30px 0 0; }
.gt-pg { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border-radius: 999px; font-weight: 800; color: var(--c1); text-decoration: none;
  background: #fff; box-shadow: 0 8px 18px -12px rgb(15 42 61 / .6); transition: transform .3s var(--rebond), color .3s, background .3s; }
.gt-pg:hover { transform: translateY(-2px); }
.gt-pg.on, .gt-pg:hover { color: #fff; background: linear-gradient(135deg, var(--c2), var(--c1)); }
.gt-pg svg { width: 16px; height: 16px; stroke-width: 2.6; }
.gt-pg-fl:first-child svg { transform: rotate(180deg); }

.gt-h { margin-top: 38px; }
.gt-adr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gt .an-autre i { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.gt .an-autre > svg { color: var(--c1); }
.gt-themes .an-autre b { color: var(--ink); }
.gt-themes .an-autre:hover b { color: var(--c1); }

@media (max-width: 600px) {
  .gt-grille.cs-grille.hb-grille, .gt-adr { grid-template-columns: minmax(0, 1fr); }
  .gt-grille .cs-fiche .cs-media { aspect-ratio: 16 / 8; }
  .gt-grille .cs-fiche .cs-corps { margin-top: -36px; padding: 22px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .gt-chiffres li, .gt .sv-photo { animation: none; } }

/* page d'un thème : tous les articles, en cartes compactes (.cs-guide du carrousel, posées en grille) */
.gt-t2 { margin-top: 46px; scroll-margin-top: 90px; }
.gt-articles.cs-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.gt-articles .cs-guide { width: auto; margin-bottom: 0; }
.gt-articles .cs-guide .cs-tag { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.gt-articles .cs-guide .cs-corps { padding: 12px 14px 14px; }
.gt-articles .cs-guide h3 { min-height: 3.75em; font-size: 14.5px; }
.gt-articles .cs-guide .cs-lien { margin-top: 6px; color: var(--c1); }
.gt-articles .cs-guide:hover h3 { color: var(--c1); }
.gt-articles .cs-guide .cs-corps::after { background: linear-gradient(90deg, var(--c1), var(--c2)); }
.gt-pg-trou { min-width: 24px; padding: 0; color: #8aa0b2; background: none; box-shadow: none; }
@media (max-width: 1080px) { .gt-articles.cs-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gt-articles.cs-grille { gap: 12px; } .gt-articles .cs-guide h3 { font-size: 13.5px; } }

/* page d'un thème : colonne fine (autres thèmes + test, collés) ; sur téléphone et tablette, tuiles qui glissent à la place */
.gt .pm { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; }
.gt-col .ar-colle { display: grid; gap: 14px; }
.gt-col .co-h { margin: 0; }
.gt-col .gt-themes { gap: 8px; }
.gt-col .an-autre.an-photo { padding-top: 10px; padding-bottom: 10px; }
.gt-menu { display: none; }
@media (max-width: 1080px) { .gt .pm { grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; } }
@media (max-width: 960px) {
  .gt-col { display: none; }
  .gt .pm { grid-template-columns: minmax(0, 1fr); }
  .gt-menu { display: block; padding: 4px 0 0; }
  .gt-menu .gx-rangee { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .gt-menu .gx-rangee::-webkit-scrollbar { display: none; }
  .gt-menu .gx-carte { flex: none; width: 112px; height: 104px; scroll-snap-align: start; }
  .gt-menu .gx-carte-t i { width: 28px; height: 28px; padding: 6px; margin-bottom: 4px; }
  .gt-menu .gx-carte-t b { font-size: 14px; }
}

/* tous les articles sur toute la largeur (4 colonnes) ; en page 1 la section suit « À la une » sans grand blanc */
.gt-tous.fs { padding-top: 20px; }
.gt-tous.gt-suite.fs { padding-top: 40px; }
.gt-tous .gt-articles.cs-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1080px) { .gt-tous .gt-articles.cs-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gt-tous .gt-articles.cs-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* pages 2 et suivantes : pas de colonne, les thèmes en tuiles sous la bannière, sur ordinateur aussi */
@media (min-width: 961px) {
  .gt-menu-tout { display: block; padding: 26px 0 0; }
  .gt-menu-tout .gx-rangee { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gt-menu-tout .gx-carte { height: 120px; }
}

/* « À la une » : 3 cartes par ligne, resserrées (photo moins haute, corps et textes plus serrés, texte gardé en entier jusqu'à 4 lignes) */
.gt-une.cs-grille.hb-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.gt-une .cs-fiche .cs-media { aspect-ratio: 4 / 3; border-radius: 16px; }
.gt-une .cs-fiche .cs-corps { margin: -30px 8px 0; padding: 16px 14px 14px; border-radius: 14px; }
.gt-une .cs-fiche h3 { font-size: 16px; line-height: 1.25; }
.gt-une .cs-fiche p { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
.gt-une .cs-fiche p span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gt-une .cs-fiche .cs-pied { margin-top: 10px; }
.gt-une .cs-fiche .cs-date { font-size: 12px; }
.gt-une .cs-fiche .cs-go { width: 32px; height: 32px; padding: 8px; }
.gt-une .cs-fiche .cs-corps::after { left: 14px; right: 14px; }
@media (max-width: 960px) { .gt-une.cs-grille.hb-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gt-une.cs-grille.hb-grille { grid-template-columns: minmax(0, 1fr); } .gt-une .cs-fiche .cs-media { aspect-ratio: 16 / 9; } }

/* les adresses sur toute la largeur, au-dessus de tous les articles (page 1) */
.gt-tous .gt-h { margin-top: 10px; }
.gt-tous .gt-adr { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 44px; }
.gt-tous .gt-adr .an-autre { padding: 12px 14px; }
@media (max-width: 1080px) { .gt-tous .gt-adr { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gt-tous .gt-adr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gt-tous .gt-adr { grid-template-columns: minmax(0, 1fr); } }
.gt-tous .gt-adr .an-autre { gap: 10px; } .gt-tous .gt-adr .an-autre b { font-size: 14px; }
/* thème avec 3 guides ou moins : pas de colonne, « À la une » sur toute la largeur */
.gt-sec .conteneur:not(.pm) { padding-top: 40px; }
.gt-sec .conteneur:not(.pm) .gt-une.cs-grille.hb-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; }
@media (max-width: 760px) { .gt-sec .conteneur:not(.pm) .gt-une.cs-grille.hb-grille { grid-template-columns: minmax(0, 1fr); } }

/* nouveautés : à part des rangées de thèmes (fond lagon, cartes larges, thème à sa couleur, description, pastille « Nouveau ») */
.gx-nouv.fs-lagon { padding: 34px 0 40px; background: linear-gradient(180deg, #e8f4fd, #bfe3f6); }
.gx-nouv .gdx { margin-top: 22px; }
.gx-nouv .cs-guide { width: calc((100% - 44px) / 3); }
.gx-nouv .cs-guide .cs-media { aspect-ratio: 16 / 9; }
.gx-nv .cs-tag { color: #0f2d40; background: #fde68a; }
.gx-nv-neuf { position: absolute; z-index: 3; top: 12px; right: 12px; padding: 4px 11px 4px 9px; font-size: 12px; color: #159753; background: #e6f6ee; box-shadow: 0 4px 12px rgb(15 45 64 / .15); }
.gx-nv .cs-corps { display: flex; flex-direction: column; gap: 6px; padding: 15px 18px 17px; }
.gx-nv-theme { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.gx-nv h3 { margin: 2px 0 0; min-height: 0; font-size: 17px; line-height: 1.3; }
.gx-nv .cs-corps > * { flex: none; }
.gx-nv:hover h3 { color: var(--c1); }
.gx-nv-texte { margin: 0; font-size: 14px; line-height: 1.5; color: #4c6172; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; }
.gx-nv .cs-lien { margin-top: 4px; color: var(--c1); }
.gx-nouv .gdx-fl { top: 110px; }
@media (max-width: 960px) { .gx-nouv .cs-guide { width: calc((100% - 22px) / 2); } }
@media (max-width: 600px) { .gx-nouv .cs-guide { width: 84%; } .gx-nouv.fs-lagon { padding: 26px 0 30px; } }
/* titre sur le lagon : le mot clé bleu disparaissait dans l'eau → jaune doré (demande de Julien), ombre bleu nuit pour le détacher du clair */
.gx-nouv.fs-lagon h2 .tt-cle { background: linear-gradient(180deg, #ffd23f, #f0a500); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgb(15 45 64 / .55)) drop-shadow(0 2px 6px rgb(15 45 64 / .25)); padding-right: 3px; }
.gx-nouv.fs-lagon .gx-nouv-t p { color: #23405a; font-weight: 500; }

/* toutes les publications (publications-neuf) : cartes des nouveautés, 3 par ligne, un titre par mois
   4 par ligne comme une page de thème, 1 sur téléphone ; 7 tuiles de thèmes (.gp) au lieu de 6 */
.gp-mois .gt-t { margin-top: 38px; }
.gp-mois .gt-t:first-child { margin-top: 0; }

.gt-articles.gp-grille .gx-nv .cs-media { aspect-ratio: 16 / 9; }
.gt-articles.gp-grille .gx-nv .cs-tag { color: #0f2d40; background: #fde68a; }
.gt-articles.gp-grille .gx-nv .cs-corps { padding: 15px 18px 17px; }
.gt-articles.gp-grille .gx-nv h3 { min-height: 0; font-size: 17px; }
.gt-articles.gp-grille .gx-nv .cs-lien { margin-top: 4px; }
@media (max-width: 600px) { .gt-tous .gt-articles.gp-grille { grid-template-columns: 1fr; gap: 16px; } .gt-articles.gp-grille .gx-nv h3 { font-size: 16px; } }
@media (min-width: 961px) { .gp .gt-menu-tout .gx-rangee { grid-template-columns: repeat(7, minmax(0, 1fr)); } }