/* Compléments au design de la maquette pour les cas que les vraies données font apparaître (specs §5).
   Les feuilles de la maquette restent intactes ; tout écart est ici. */

/* Galerie de fiche : la maquette prévoit 5 photos. Avec 1 ou 3 photos, la grille se referme proprement. */
.galerie--1 figure { flex-basis: 100%; }
@media (min-width: 900px) {
  .galerie--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .galerie--1 .galerie__g { grid-row: auto; }
  .galerie--3 { grid-template-columns: 2fr 1fr; }
}

/* Carte d'une mission sans photo exploitable : illustration de sa cause, sur le fond menthe de la carte. */
.carte__img .carte__illustration { object-fit: contain; padding: 18%; opacity: .85; }
.carte:hover .carte__img .carte__illustration { transform: none; }

/* ---------- Le journal (liste et article) ---------- */
/* Ces deux pages n'existent pas dans la maquette : mêmes briques (section, guides, prose), un habillage minimal ici. */
.journal__tete { padding-bottom: 36px; }
.journal__tete h1 { margin: 6px 0 14px; }
.journal__chapo { max-width: 46em; font-size: 1.125rem; }
.journal__vide { color: var(--gris); font-size: 1.0625rem; }
.guide__illustration { object-fit: contain !important; padding: 16%; opacity: .85; background: var(--menthe-pale); }
@media (max-width: 639px) { .guides--page { display: grid; overflow: visible; margin-inline: 0; padding: 0; } .guides--page > * { flex: none; } }

.pilules { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pilule { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--r-pilule); background: var(--blanc); color: var(--marine);
  font-size: .9688rem; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: border-color .15s, background .2s; }
.pilule:hover { border-color: var(--marine); }
.pilule.est-actif { background: var(--marine); color: var(--blanc); }
.pilule .n { font-weight: 500; opacity: .6; font-size: .875rem; }

.pages { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.pages__n, .pages__cote { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pilule);
  font-weight: 700; text-decoration: none; color: var(--marine); background: var(--menthe-pale); }
.pages__n:hover, .pages__cote:hover { background: var(--peche); }
.pages__n.est-actif { background: var(--marine); color: var(--blanc); }
.pages__saut { color: var(--gris); padding: 0 4px; }

.art__tete { padding: 40px 0 8px; }
.art__fil { font-size: .9375rem; color: var(--gris); margin-bottom: 14px; }
.art__fil a { color: inherit; }
.art__tete h1 { max-width: 30em; }
.art__meta { color: var(--gris); font-size: .9688rem; margin-top: 12px; }
.art__chapo { max-width: 42em; font-size: 1.1875rem; line-height: 1.55; margin-top: 18px; }
.art__img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-img); margin: 28px 0 8px; }
/* padding-block, et non padding : le raccourci écrasait la gouttière de .wrap et décalait le corps de l'article. */
.art__corps { display: grid; gap: 32px; padding-block: 32px 56px; }
.art__corps .prose { font-size: 1.0625rem; line-height: 1.7; }
.art__aparte { background: var(--menthe-pale); border-radius: var(--r-carte); padding: 26px; display: grid; gap: 12px; align-content: start; align-self: start; }
.art__aparte .btn { margin-top: 6px; }
@media (min-width: 1040px) { .art__corps { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; } .art__aparte { position: sticky; top: 104px; } }

/* ---------- Pages-listes et destinations ---------- */
/* Une introduction, puis la grille de cartes de la liste des missions. */
.liste-tete { padding-bottom: 40px; }
.liste-tete__in { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .liste-tete__in { grid-template-columns: 1.15fr 1fr; gap: 48px; } }
.liste-tete__accroche { font-size: 1.125rem; margin-top: 14px; max-width: 42em; }
.liste-tete__compte { margin-top: 18px; color: var(--gris); font-size: .9688rem; }
.liste-tete__compte b { color: var(--marine); font: 700 1.125rem var(--titre); }
.liste-tete__img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-img); }
.liste-tete__ill { width: 160px; height: auto; justify-self: center; opacity: .9; }
.liste-tete__texte { margin-top: 28px; }
.liste-vide { font-size: 1.0625rem; max-width: 36em; margin-bottom: 20px; }
.liste-suite { margin-top: 36px; }

/* Envoi d'une demande : le message qui s'affiche si le serveur n'a pas pu l'enregistrer. */
.envoi-erreur { background: var(--peche-pale, #FDEFE6); border-left: 4px solid var(--ambre-fonce); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-size: .9688rem; }

/* ---------- Pages de contenu ---------- */
/* Un en-tête tenu par le gabarit : titre, chapô, image. Le reste vient des blocs. */
.contenu__tete { padding: 44px 0 4px; }
.contenu__tete h1 { max-width: 20em; }
.contenu__chapo { max-width: 44em; font-size: 1.1875rem; line-height: 1.55; margin-top: 18px; color: var(--gris-fonce, inherit); }
.contenu__img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-img); margin: 28px 0 4px; }
.contenu .section:first-of-type { padding-top: 36px; }

/* ---------- Destinations ---------- */
/* Tout vient de champs : bandeau, points forts, repères pratiques, frise des mois. */
.dest__tete { padding-bottom: 44px; }
.dest__tete__in { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .dest__tete__in { grid-template-columns: 1.1fr 1fr; gap: 52px; } }
.dest__accroche { font-size: 1.1875rem; line-height: 1.55; margin-top: 16px; max-width: 40em; }
.dest__compte { margin: 18px 0 20px; color: var(--gris); font-size: .9688rem; }
.dest__compte b { color: var(--marine); font: 700 1.25rem var(--titre); }
.dest__img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-img); }
.dest__ill { width: 200px; height: auto; justify-self: center; opacity: .9; }
.dest__intro { display: grid; gap: 32px; }
@media (min-width: 1040px) { .dest__intro { grid-template-columns: minmax(0, 1.4fr) 1fr; gap: 56px; } }
.dest__forts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: start; }
.dest__forts li { position: relative; padding-left: 34px; font-size: 1.0625rem; line-height: 1.5; }
.dest__forts li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23F2A233' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.dest__grille { display: grid; gap: 18px 28px; margin: 22px 0 0; }
@media (min-width: 700px) { .dest__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .dest__grille { grid-template-columns: repeat(3, 1fr); } }
.dest__grille dt { font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.dest__grille dd { margin: 4px 0 0; font-size: 1.0625rem; }
.dest__saison { margin-top: 34px; }
.frise { list-style: none; display: flex; gap: 4px; margin: 14px 0 10px; padding: 0; flex-wrap: wrap; }
.frise li { flex: 1 1 60px; text-align: center; font-size: .8438rem; padding: 8px 4px; border-radius: 10px; background: var(--blanc); color: var(--gris); }
.frise li.est-bon { background: var(--ambre); color: var(--marine-fonce); font-weight: 700; }

/* Image posée au milieu d'un texte : elle respire, et sa légende reste discrète. */
.bloc-image { padding: 8px 0; }
.bloc-image__in { margin: 0; }
.bloc-image__in img { display: block; width: 100%; height: auto; border-radius: var(--r-img); }
.bloc-image__in figcaption { margin-top: 10px; font-size: .9063rem; color: var(--gris); }
@media (min-width: 1040px) { .bloc-image__in:not(.bloc-image__in--large) { max-width: 46em; } }
/* Pages de contenu (charte, rôle de Freepackers…), 18/10/2026 : un bloc « titre + texte » se lit en deux colonnes sur
   ordinateur, le titre à gauche, resté visible pendant la lecture, et le texte à droite. Le grand vide à droite des
   paragraphes disparaît ; un filet ambre ouvre chaque titre. */
.contenu .section > .wrap > h2.t-2:has(+ .prose)::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--ambre); margin-bottom: 16px; }
.contenu .section > .wrap > h2.t-2 + .prose { margin-top: 18px; }
@media (min-width: 1040px) {
  .contenu .section > .wrap:has(> h2.t-2 + .prose:last-child) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .contenu .section > .wrap:has(> h2.t-2 + .prose:last-child) > h2 { position: sticky; top: 110px; margin: 0; }
  .contenu .section > .wrap:has(> h2.t-2 + .prose:last-child) > .prose { margin-top: 20px; max-width: 42em; font-size: 1.0625rem; line-height: 1.7; }
  /* Les photos entre deux blocs s'alignent sur la colonne du texte. */
  .contenu .bloc-image__in:not(.bloc-image__in--large) { max-width: none; margin-left: calc((100% - 72px) * 5 / 12 + 72px); }
  .contenu__img { aspect-ratio: 21/9; }
}

/* ---------- Vidéos de la chaîne ---------- */
/* La vignette est une image de la médiathèque : YouTube n'est appelé qu'au clic (page légère, rien n'est envoyé avant). */
.videos { display: grid; gap: 28px 24px; }
@media (min-width: 640px) { .videos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .videos { grid-template-columns: repeat(4, 1fr); gap: 32px 24px; } }
.video { display: grid; gap: 10px; text-align: left; align-content: start; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.video__img { position: relative; display: block; border-radius: var(--r-img); overflow: hidden; aspect-ratio: 16/9; background: var(--menthe-pale); }
.video__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.video:hover .video__img img { transform: scale(1.05); }
.video__lire { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%; background: var(--blanc);
  box-shadow: 0 10px 30px -10px rgba(8, 56, 89, .6); transition: transform .2s var(--ease), background .2s; }
.video__lire::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid;
  border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--marine); transform: translateX(2px); }
.video:hover .video__lire { transform: scale(1.08); background: var(--ambre); }
.video__duree { position: absolute; right: 10px; bottom: 10px; background: rgba(8, 56, 89, .85); color: var(--blanc);
  font-size: .8125rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pilule); }
.video b { font: 700 1.0625rem/1.3 var(--titre); letter-spacing: -.01em; text-wrap: pretty; }
.video:hover b { text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 3px; }
.video small { font-size: .9063rem; color: var(--gris); line-height: 1.45; }
.video--ouverte .video__img { aspect-ratio: 16/9; }
.video__img iframe { width: 100%; height: 100%; border: 0; }

/* Lien qui quitte le site : une petite flèche sortante, discrète, à la fin du libellé. */
.hors-site { width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; opacity: .65; flex: none; }
a:hover > .hors-site { opacity: 1; }

/* ------------------------------------------------------------------ *
 * Étapes numérotées, chiffres clés, points à icône (pages éditoriales)
 * ------------------------------------------------------------------ */

.pas-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: pas; }
@media (min-width: 900px) {
  .pas-liste { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
  /* Le fil qui relie les étapes : un trait pointillé derrière les pastilles. */
  .pas-liste { position: relative; }
  .pas-liste::before { content: ""; position: absolute; left: 10%; right: 10%; top: 46px; border-top: 2px dashed var(--brume); opacity: .55; }
}
.pas { position: relative; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-carte); padding: 28px 24px 24px; box-shadow: var(--ombre-douce); }
.section--blanc .pas { background: var(--peche-pale); border-color: transparent; box-shadow: none; }
.section--encre .pas { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); box-shadow: none; }
.pas__n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ambre); color: var(--marine); font: 800 1.25rem/1 var(--titre); margin-bottom: 14px; }
.pas__ico { display: block; width: 48px; height: 48px; margin: 0 0 10px; }
.pas h3 { margin: 0 0 8px; }
.pas p { margin: 0; color: var(--gris); }
.section--encre .pas p { color: rgba(255, 255, 255, .78); }

.chiffres { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) {
  .chiffres--3 { grid-template-columns: repeat(3, 1fr); }
  .chiffres--4 { grid-template-columns: repeat(4, 1fr); }
}
.chiffre { background: var(--blanc); border-radius: var(--r-carte); padding: 26px 20px; text-align: center; box-shadow: var(--ombre-douce); }
.section--blanc .chiffre { background: var(--menthe-pale); box-shadow: none; }
.chiffre b { display: block; font: 800 clamp(2rem, 5vw, 2.75rem)/1 var(--titre); font-stretch: 84%; color: var(--marine); }
.chiffre span { display: block; margin-top: 8px; font-weight: 700; }
.chiffre small { display: block; margin-top: 6px; color: var(--gris); font-size: .9375rem; }
.chiffres__note { margin: 20px auto 0; max-width: 62ch; text-align: center; color: var(--gris); font-size: .9375rem; }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 760px) {
  .points--2 { grid-template-columns: repeat(2, 1fr); }
  .points--3 { grid-template-columns: repeat(3, 1fr); }
}
.point { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-carte); padding: 22px; }
.section--blanc .point { background: var(--peche-pale); border-color: transparent; }
.section--menthe .point, .section--peche .point { border-color: transparent; }
.section--encre .point { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); }
.point__ico { width: 56px; height: 56px; }
.point h3 { margin: 0 0 6px; }
.point p { margin: 0; color: var(--gris); }
.section--encre .point p { color: rgba(255, 255, 255, .78); }
/* Sur fond marine, les cartes restent blanches : leur texte doit repasser en encre, sinon il disparaît. */
.section--encre .chiffre { color: var(--marine); }
.section--encre .chiffre b { color: var(--marine); }
.section--encre .chiffre span { color: var(--marine); }
.section--encre .chiffre small { color: var(--gris); }
.section--encre .chiffres__note { color: rgba(255, 255, 255, .8); }
.section--encre .pas__n { background: var(--ambre); color: var(--marine); }
.section--encre .pas-liste::before { border-color: rgba(255, 255, 255, .3); }

/* Le titre « Questions fréquentes » respire avant la première question. */
#questions .faq { margin-top: 28px; }

/* ------------------------------------------------------------------ *
 * Objectifs de développement durable : les pastilles officielles ONU
 * ------------------------------------------------------------------ */
.odd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 900px) { .odd { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.odd__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border-radius: var(--r-img); overflow: hidden; }
@media (max-width: 520px) { .odd__grille { grid-template-columns: repeat(2, 1fr); } }
.odd__grille img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
/* Les pastilles de l'ONU sont carrées : « contain » garantit qu'une image d'un autre format soit
   posée entière dans sa case plutôt qu'étirée, numéro et titre compris. */
.odd__txt h2 { margin: 0 0 14px; }
.odd__txt .chapo { margin: 0 0 22px; max-width: 42em; }

/* ------------------------------------------------------------------ *
 * Témoignages : étoiles, note d'ensemble, cartes de hauteur égale
 * ------------------------------------------------------------------ */
.etoiles { display: inline-flex; gap: 2px; color: var(--ambre); vertical-align: middle; }
.etoiles svg { width: 17px; height: 17px; fill: currentColor; }
.etoiles svg.vide { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .5; }

.temoins__note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 26px; color: var(--blanc); }
.temoins__note b { font: 800 1.375rem/1 var(--titre); font-stretch: 84%; }
.temoins__note span { color: rgba(255, 255, 255, .78); font-size: .9688rem; }
.temoins__note a { color: var(--blanc); font-weight: 600; font-size: .9688rem; }

/* La carte se remplit du haut : le nom et la mission restent en bas, alignés d'une carte à l'autre. */
.temoin { display: flex; flex-direction: column; }
.temoin blockquote { flex: 1; }
.temoin .etoiles { margin-bottom: 10px; }
.temoin figcaption span { display: block; color: var(--gris); font-size: .9375rem; margin-top: 2px; }

/* Le petit mot manuscrit reprend la couleur de la marque : sur fond marine, il devenait invisible. */
.section--encre .main,
.section--encre .section__tete .main { color: var(--ambre); }

/* ------------------------------------------------------------------ *
 * Citation : une parole, un visage
 * ------------------------------------------------------------------ */
.citation { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 46em; margin: 0 auto; }
@media (min-width: 820px) {
  .citation { grid-template-columns: 180px 1fr; gap: 40px; justify-items: start; text-align: left; max-width: 62em; align-items: center; }
}
.citation__portrait { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 5px solid var(--ambre); }
.citation blockquote { margin: 0; font-size: 1.1875rem; line-height: 1.6; position: relative; }
.citation blockquote::before { content: "\201C"; font: 800 4rem/1 var(--titre); color: var(--ambre); display: block; margin-bottom: -18px; }
.citation figcaption { display: grid; gap: 2px; }
.citation figcaption b { font: 700 1.0625rem var(--titre); }
.citation figcaption span { color: var(--gris); font-size: .9375rem; }
@media (min-width: 820px) {
  .citation blockquote { grid-column: 2; }
  .citation figcaption { grid-column: 2; }
  .citation__portrait { grid-row: 1 / span 2; }
}

/* Un point qui porte un lien se clique en entier : c'est le lien qui porte la grille, sinon la colonne
   de texte se retrouve imbriquée deux fois et se replie mot à mot. */
.point--lien { padding: 0; display: block; }
.point--lien a { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 22px; text-decoration: none; color: inherit; border-radius: var(--r-carte); }
.point--lien:hover { border-color: var(--ambre); }
.point--lien a:hover h3 { text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 3px; }

/* Index des destinations (audit SEO du 17/10/2026) : le nombre de pays d'un continent, sous son titre. */
.dest-compte { margin: 0; color: var(--encre-70); font-weight: 600; }
.liens-pays { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.liens-pays a { display: inline-block; padding: 6px 14px; border-radius: var(--r-pilule); background: var(--menthe-pale); color: var(--marine); font-weight: 600; text-decoration: none; }
.liens-pays a:hover { background: var(--menthe); }
.liste-suite .btn { white-space: normal; text-align: center; }
.tuile--dessin { background: var(--marine); }
.tuile--dessin .tuile__photo { object-fit: contain; padding: 22%; opacity: .55; }

/* Consentement aux cookies (v5, 18/10/2026) : une barre pleine largeur aux couleurs du site, dont le contenu suit la
   grille des pages (mêmes bords que le logo et le texte). Sur ordinateur, tout tient sur une ligne : le cookie, le
   texte, puis les trois choix alignés à droite. « J'accepte » est le seul bouton plein ; « Continuer sans accepter »
   est un lien blanc souligné, lisible, juste à côté (forme de refus admise par la CNIL). */
.cookies { position: fixed; z-index: 90; inset: auto 0 0 0; background: var(--marine); color: var(--blanc); border-top: 3px solid var(--ambre); box-shadow: 0 -14px 40px rgba(5, 39, 64, .28); padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px)); animation: cookies-monte .4s var(--ease, ease-out) both; }
@keyframes cookies-monte { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }
.cookies__dedans { max-width: var(--max); margin: 0 auto; padding-inline: var(--gouttiere); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 20px; }
.cookies__icone { width: 48px; height: 48px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.cookies__texte { margin: 0; max-width: 68ch; font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.cookies__accroche { display: block; margin-bottom: 3px; font: 800 1.1875rem/1.25 var(--titre); font-stretch: 92%; color: var(--blanc); }
.cookies__boutons { display: flex; align-items: center; gap: 12px; margin-left: 24px; }
.cookies__btn { min-height: 50px; padding: 0 24px; font-size: 1rem; font-weight: 700; box-shadow: none; white-space: nowrap; }
.cookies__btn:hover { transform: none; }
.cookies__btn--perso { background: transparent; border: 2px solid rgba(255, 255, 255, .5); color: var(--blanc); }
.cookies__btn--perso:hover { background: rgba(255, 255, 255, .1); border-color: var(--blanc); color: var(--blanc); }
.cookies__btn--oui { min-width: 190px; box-shadow: 0 10px 26px -10px rgba(255, 185, 86, .95); }
.cookies .btn--plein:hover, .cookies-fenetre .btn--plein:hover { background: #FFC877; border-color: #FFC877; color: var(--marine-fonce); }
.cookies__coche { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cookies__sans { order: -1; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--blanc); font: 600 .9375rem var(--texte); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 4px; white-space: nowrap; cursor: pointer; }
.cookies__sans:hover { text-decoration-color: var(--blanc); }
.cookies__sans svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cookies button:focus-visible { outline: 3px solid var(--ambre); outline-offset: 3px; }
/* Ordinateur moyen : les choix passent sous le texte, alignés sur lui. */
@media (max-width: 1180px) {
  .cookies__dedans { grid-template-columns: auto minmax(0, 1fr); row-gap: 14px; }
  .cookies__texte { max-width: none; }
  .cookies__boutons { grid-column: 2; margin-left: 0; }
}
/* Mobile : le texte à côté du cookie, puis les deux boutons côte à côte, puis le lien de refus centré dessous. */
@media (max-width: 640px) {
  .cookies { padding-top: 18px; }
  .cookies__dedans { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 16px; align-items: start; }
  .cookies__icone { width: 38px; height: 38px; margin-top: 2px; }
  .cookies__texte { font-size: .875rem; }
  .cookies__accroche { font-size: 1.0625rem; }
  .cookies__boutons { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; }
  .cookies__btn { min-width: 0; min-height: 50px; padding: 0 12px; }
  .cookies__sans { order: 1; grid-column: 1 / -1; justify-self: center; min-height: 36px; font-size: .875rem; }
}

/* La fenêtre de réglages */
html.cookies-ouvert { overflow: hidden; }
.cookies-fond { position: fixed; inset: 0; z-index: 95; background: rgba(5, 39, 64, .55); display: grid; place-items: center; padding: 16px; animation: cookies-fond .2s ease-out both; }
@keyframes cookies-fond { from { opacity: 0; } }
.cookies-fenetre { position: relative; width: min(500px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--blanc); color: var(--marine); border-radius: var(--r-carte); box-shadow: 0 24px 60px rgba(5, 39, 64, .35); padding: 26px 24px 22px; }
.cookies-fenetre__fermer { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--marine); cursor: pointer; }
.cookies-fenetre__fermer:hover { background: #EEF3F7; }
.cookies-fenetre__fermer:focus-visible { outline: 3px solid var(--ambre-fonce); outline-offset: 0; }
.cookies-fenetre__fermer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cookies-fenetre__titre { display: flex; align-items: center; gap: 10px; margin: 0 44px 6px 0; font: 800 1.375rem/1.2 var(--titre); font-stretch: 92%; }
.cookies-fenetre__titre .cookies__icone { width: 30px; height: 30px; }
.cookies-fenetre__texte { margin: 0 0 14px; color: var(--gris); font-size: .9375rem; line-height: 1.5; }
.cookies-fenetre__liste { border-top: 1px solid #E3EAF0; }
.reglage { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #E3EAF0; cursor: pointer; }
.reglage__texte { flex: 1; display: grid; gap: 3px; }
.reglage__texte b { font-size: 1rem; }
.reglage__texte small { color: var(--gris); font-size: .8438rem; line-height: 1.4; }
.reglage input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.reglage__bascule { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; background: #C3D1DC; transition: background .2s; }
.reglage__bascule::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--blanc); box-shadow: 0 1px 3px rgba(5, 39, 64, .3); transition: transform .2s; }
.reglage input:checked + .reglage__bascule { background: var(--marine); }
.reglage input:checked + .reglage__bascule::after { transform: translateX(20px); }
.reglage input:disabled + .reglage__bascule { opacity: .5; }
.reglage:has(input:disabled) { cursor: default; }
.reglage input:focus-visible + .reglage__bascule { outline: 3px solid var(--ambre-fonce); outline-offset: 2px; }
.cookies-fenetre__boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cookies-fenetre__boutons .cookies__btn { flex: 1 1 120px; min-width: 0; }
.cookies-fenetre .cookies__btn--non { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.cookies-fenetre .cookies__btn--non:hover { background: var(--marine-fonce); border-color: var(--marine-fonce); color: var(--blanc); }
.cookies__btn--ligne { background: var(--blanc); border: 2px solid var(--marine); color: var(--marine); }
.cookies__btn--ligne:hover { background: #EEF3F7; color: var(--marine); }
.pied__cookies { background: none; border: 0; padding: 11px 0; margin-block: -11px; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* Page introuvable (404), 18/10/2026 */
.introuvable { padding-block: clamp(48px, 9vw, 120px); }
.introuvable__in { display: grid; gap: 28px; align-items: center; }
.introuvable__ill { width: 160px; height: auto; }
.introuvable .chapo { max-width: 34em; margin-top: 16px; }
.introuvable__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.introuvable__suite { margin: 18px 0 0; color: var(--gris); }
.introuvable__suite a { color: var(--marine); font-weight: 600; }
@media (min-width: 900px) { .introuvable__in { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; } .introuvable__ill { width: 240px; } }

/* Page contact : trois façons de joindre l'équipe (18/10/2026) */
.contact-cartes { padding-block: 28px 8px; }
.contact-cartes__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-carte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border-radius: var(--r-carte); background: var(--menthe-pale); }
.contact-carte img { width: 52px; height: 52px; }
.contact-carte h2 { margin: 4px 0 0; }
.contact-carte p { margin: 0; color: var(--gris); flex: 1; }
.contact-carte--principale { background: var(--peche-pale); border: 1.5px solid #F2DDB6; }
.contact-carte .btn { margin-top: 6px; }
.contact-carte__lien { margin-top: 6px; font: 700 1.125rem var(--titre); color: var(--marine); text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (min-width: 700px) { .contact-cartes__liste { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media (min-width: 1100px) { .contact-cartes__liste { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

/* Sous les tuiles des causes de l'accueil : les hubs, en pastilles (audit SEO du 18/10/2026). */
.causes__hubs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin: 32px 0 0; }
.causes__hubs span { width: 100%; text-align: center; font: 600 .9375rem var(--texte); color: rgba(255, 255, 255, .75); }
.causes__hubs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pilule); border: 1.5px solid rgba(255, 255, 255, .45); color: var(--blanc); font-weight: 700; text-decoration: none; transition: background .2s, border-color .2s; }
.causes__hubs a:hover { background: rgba(255, 255, 255, .12); border-color: var(--blanc); }
@media (min-width: 900px) { .causes__hubs span { width: auto; margin-right: 6px; } }

/* Note des participants (chantier avis du 18/10/2026) : au bout de la ligne du lieu sur les cartes, à côté du lieu
   sur la fiche. */
.etoile { width: 15px; height: 15px; flex: none; fill: var(--ambre); stroke: var(--ambre-fonce); stroke-width: 1; stroke-linejoin: round; }
.carte__note { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--marine); font-size: .875rem; }
.carte__note b { font-weight: 700; }
.carte__note small { color: var(--gris); font-size: .8125rem; }
.tete__note { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--trait); color: var(--marine); text-decoration: none; white-space: nowrap; }
.tete__note .etoile { width: 18px; height: 18px; }
.tete__note b { font-weight: 800; }
.tete__note span { color: var(--gris); }
a.tete__note:hover span { text-decoration: underline; }
@media (max-width: 479px) { .tete__lieu { flex-wrap: wrap; row-gap: 4px; } .tete__note { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; } }
/* La note n'hérite pas du soulignement ambre des liens du lieu. */
.tete__lieu a.tete__note { text-decoration: none; }
.tete__lieu a.tete__note:hover span { text-decoration: underline; text-decoration-color: currentColor; }