/* Fichier assemblé par scripts/assembler-css.mjs : ne pas modifier à la main. */
/* ---- fp.css ---- */
/* Freepackers — maquette, DA v2 : couleurs réelles de la marque, lumineuse, arrondie, amicale. Voir DESIGN.md */
/* Polices (fonts2.css recopié ici : un @import ajoutait un aller-retour avant le premier affichage).
   Bricolage réduite aux graisses 600 à 800 et aux largeurs 84 à 96 %, Caveat à la graisse 600 : ce que le site utilise. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 84% 96%;
  font-display: swap;
  src: url(../fonts/BricolageGrotesque-normal-latin-ext-v3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 84% 96%;
  font-display: swap;
  src: url(../fonts/BricolageGrotesque-normal-latin-v3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Caveat-normal-latin-ext-v2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Caveat-normal-latin-v3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/Figtree-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/Figtree-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/Figtree-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/Figtree-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* palette relevée sur freepackers.com (couleurs globales du site actuel) */
  --marine: #083859;
  --marine-fonce: #052740;
  --ambre: #FFB956;
  --ambre-fonce: #F2A233;
  --brume: #81AEC6;
  --menthe: #CAE2E1;
  --menthe-pale: #EAF4F3;
  --peche: #FFEDCB;
  --peche-pale: #FFF7E8;
  --foret: #2F5233;
  --blanc: #FFFFFF;
  --gris: #586A78;
  --trait: #DFE8EE;
  --alerte: #B3261E;

  /* alias conservés pour les écrans liste / fiche / demande */
  --encre: var(--marine); --encre-70: var(--gris); --papier: var(--blanc); --balise: var(--ambre); --orange: var(--ambre); --orange-fonce: var(--marine);
  --abricot: var(--peche); --filet: var(--trait); --carbone: var(--brume); --lichen: var(--foret); --vert: var(--foret);
  --sable: var(--peche-pale); --sable-fort: var(--peche); --ciel: var(--menthe-pale); --soleil: var(--ambre);

  --titre: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --texte: "Figtree", "Segoe UI", sans-serif;
  --main: "Caveat", "Segoe Print", cursive;

  --r-img: 20px; --r-carte: 26px; --r-outil: 14px; --r-pilule: 999px;
  --ombre: 0 24px 60px -24px rgba(8, 56, 89, .45);
  --ombre-douce: 0 10px 28px -14px rgba(8, 56, 89, .35);
  --gouttiere: 18px; --max: 1280px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 720px) { :root { --gouttiere: 36px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 130px; scroll-padding-bottom: 96px; }
/* Une fiche mission empile deux barres collantes : l'en-tête, puis la barre d'ancres (posée à 72 px du haut,
   86 px au-dessus de 1080 px de large, pour environ 58 px de haut). Le saut vers une ancre doit s'arrêter sous
   les deux, sinon le titre de la section visée reste caché dessous. La règle vit ici plutôt que dans fiche.css :
   React hisse les feuilles des pages avant celle-ci, où elles perdraient à spécificité égale. */
html:has(.ancres) { scroll-padding-top: 142px; }
@media (min-width: 1080px) { html:has(.ancres) { scroll-padding-top: 156px; } }
body { margin: 0; background: var(--blanc); color: var(--marine); font: 400 1.0625rem/1.6 var(--texte); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ambre-fonce); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gouttiere); }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }

/* ---------- Typographie ---------- */
.t-affiche, .t-1, .t-2, .t-3, .t-4 { font-family: var(--titre); font-weight: 800; font-stretch: 92%; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
.t-affiche { font-size: clamp(2.375rem, 5.6vw, 4.25rem); line-height: 1.04; }
.t-1 { font-size: clamp(2rem, 4.4vw, 3.125rem); line-height: 1.06; }
.t-2 { font-size: clamp(1.625rem, 3.2vw, 2.25rem); line-height: 1.12; }
.t-3 { font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.t-4 { font-size: 1.125rem; line-height: 1.3; font-weight: 700; letter-spacing: -.005em; }
.chapo { font-size: 1.1875rem; line-height: 1.55; max-width: 38em; }
.petit { font-size: .9375rem; line-height: 1.5; }
.discret { color: var(--gris); }
.donnee { font-weight: 600; }
.main { font: 600 1.625rem/1.1 var(--main); color: var(--marine); }
.feutre { background: linear-gradient(transparent 55%, var(--ambre) 55% 92%, transparent 92%); padding-inline: .12em; }
.pinceau { position: relative; white-space: nowrap; z-index: 0; }
/* Long passage sur petit écran : le trait suit chaque ligne (dessiné en fond, recopié ligne par ligne). */
@media (max-width: 699px) {
  .pinceau--long { white-space: normal; padding-bottom: .12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15c38-8 79-11 121-9 46 2 88 1 171-2-52 6-98 9-141 10-47 1-95 4-148 9' fill='none' stroke='%23FFB956' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left bottom / 100% .36em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .pinceau--long::after { display: none; }
}
.pinceau::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.14em; height: .36em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15c38-8 79-11 121-9 46 2 88 1 171-2-52 6-98 9-141 10-47 1-95 4-148 9' fill='none' stroke='%23FFB956' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; z-index: -1; }
.prose { max-width: 40em; }
.prose h3 { margin: 1.8em 0 .5em; }
.prose ul { padding-left: 1.15em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--ambre-fonce); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 54px; padding: 0 1.625rem; border-radius: var(--r-pilule);
  border: 2px solid var(--marine); background: transparent; cursor: pointer; font: 700 1.0625rem/1 var(--texte); text-decoration: none; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.btn:hover { background: var(--marine); color: var(--blanc); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--plein { background: var(--ambre); border-color: var(--ambre); color: var(--marine-fonce); box-shadow: none; }
.btn--plein:hover { background: var(--marine); border-color: var(--marine); color: var(--blanc); box-shadow: none; }
.btn--marine { background: var(--marine); color: var(--blanc); }
/* Sur téléphone, un long bouton du contenu (« Télécharger le guide des aides (PDF) ») passe à la ligne au lieu d'élargir la page. */
@media (max-width: 479px) { main .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; max-width: 100%; } }
.btn--marine:hover { background: var(--marine-fonce); }
.btn--blanc { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }
.btn--large { width: 100%; white-space: normal; text-align: center; }
/* Dans une grille (tête de section sur mobile), le lien ne s'étire plus sur toute la largeur avec son soulignement. */
.lien-fort { font-weight: 700; text-decoration: none; border-bottom: 2.5px solid var(--ambre); padding-bottom: 2px; transition: border-color .2s; width: fit-content; }
.lien-fort:hover { border-color: var(--marine); }
.fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
/* Une icône posée dans un bouton : sans taille, un SVG sans dimensions prend toute la place qu'on lui laisse
   (une flèche de 650 px de côté sur la fiche d'un article). La règle vaut pour tous les boutons du site. */
.btn > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.btn:hover > svg { transform: translateX(4px); }
.fleche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.fleche:hover svg { transform: translateX(5px); }

/* ---------- Bandeau maquette ---------- */
.maq { background: #03192A; color: #A9BFD0; font-size: .8125rem; }
.maq .wrap { display: flex; gap: 16px; align-items: center; overflow-x: auto; padding-block: 6px; white-space: nowrap; scrollbar-width: none; }
.maq a { text-decoration: none; padding: 2px 0; border-bottom: 1px solid transparent; }
.maq a[aria-current] { color: var(--blanc); border-color: var(--ambre); }
.maq b { color: var(--blanc); font-weight: 600; margin-right: 6px; }

/* ---------- Barre de preuves ---------- */
.preuves { background: var(--marine); color: #D5E4EE; font-size: .8125rem; }
.preuves .wrap { display: flex; align-items: center; gap: 18px; min-height: 40px; }
.preuves ul { display: flex; gap: 0 16px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; align-items: center; flex: 1; }
.preuves li { display: flex; align-items: center; gap: 8px; }
.preuves li svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--ambre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.preuves li + li { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 16px; }
.preuves b { color: var(--blanc); font-weight: 700; }
.preuves__wa { display: none; align-items: center; gap: 8px; color: var(--blanc); text-decoration: none; font-weight: 600; white-space: nowrap; }
.preuves__wa svg { width: 18px; height: 18px; fill: var(--ambre); }
@media (min-width: 1080px) { .preuves__wa { display: inline-flex; } }

/* ---------- En-tête et méga-menus ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--trait); }
.entete > .wrap { display: flex; align-items: center; gap: 4px; min-height: 64px; }
/* Logo (20/10/2026) : les deux pieds sont centrés sur la ligne du texte, et non plus posés au-dessus. Le pied du bas
   descend comme le jambage du « p », et son « e » tombe à la hauteur des minuscules : « fr-ee-packers » se lit d'un trait. */
.logo { display: inline-flex; align-items: center; text-decoration: none; font: 700 1.5625rem/1 var(--titre); font-stretch: 96%; letter-spacing: -.03em; margin-right: auto; color: var(--marine); }
.logo svg { width: 22px; height: auto; margin: 0 2px; transform: translateY(1px); }
.nav { display: none; }
.ico-btn { width: 48px; height: 48px; display: inline-grid; place-items: center; background: none; border: 0; border-radius: 50%; cursor: pointer; position: relative; color: var(--marine); transition: background .2s; }
.ico-btn:hover { background: var(--menthe-pale); }
.ico-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico-btn .compte { position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--ambre); color: var(--marine-fonce); font: 700 .6875rem/19px var(--texte); text-align: center; padding: 0 4px; }
.ico-btn .compte:empty { display: none; }
.entete .btn { display: none; min-height: 46px; padding-inline: 1.375rem; }

@media (min-width: 1080px) {
  .entete > .wrap { min-height: 76px; }
  .logo { margin-right: 28px; }
  .nav { display: flex; align-items: stretch; align-self: stretch; margin-right: auto; }
  .nav__item { display: flex; align-items: stretch; }
  .nav__lien { display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; background: none; border: 0; cursor: pointer; font: 600 1rem var(--texte); color: var(--marine); text-decoration: none; position: relative; }
  .nav__lien::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 18px; height: 3px; border-radius: 3px; background: var(--ambre); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
  .nav__item:hover .nav__lien::after, .nav__item:focus-within .nav__lien::after, .nav__item.ouvert .nav__lien::after { transform: scaleX(1); }
  .nav__lien svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s var(--ease); }
  .nav__item:hover .nav__lien svg, .nav__item.ouvert .nav__lien svg { transform: rotate(180deg); }
  .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--blanc); border-top: 1px solid var(--trait); box-shadow: 0 40px 60px -30px rgba(8, 56, 89, .4); border-radius: 0 0 28px 28px;
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .24s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
  .nav__item:hover .mega, .nav__item:focus-within .mega, .nav__item.ouvert .mega { opacity: 1; visibility: visible; transform: none; transition-delay: .06s, .06s, 0s; }
  .mega__in { max-width: var(--max); margin: 0 auto; padding: 34px var(--gouttiere) 40px; display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; gap: 36px; }
  .mega__in--2 { grid-template-columns: 1.4fr 1fr 1.25fr; }
  .mega h3 { font: 700 .9375rem var(--texte); color: var(--gris); margin: 0 0 12px; }
  .mega__populaires { display: flex; align-items: center; gap: 6px; }
  .flamme { width: 18px; height: 18px; flex: none; fill: #F26B3A; }
  .flamme__coeur { fill: var(--ambre); }
  .mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .mega li a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-inline: -10px; border-radius: 12px; text-decoration: none; font-weight: 600; transition: background .18s, transform .18s var(--ease); }
  .mega li a:hover { background: var(--peche-pale); transform: translateX(4px); }
  .mega li img { width: 38px; height: 38px; object-fit: contain; flex: none; }
  .mega li small { display: block; font-weight: 400; color: var(--gris); font-size: .875rem; }
  .mega li .n { margin-left: auto; font-weight: 500; color: var(--gris); font-size: .875rem; }
  .mega__vedette { position: relative; border-radius: var(--r-img); overflow: hidden; min-height: 230px; display: flex; align-items: flex-end; color: var(--blanc); text-decoration: none; }
  /* Cadrée sur le panneau B Corp que tient l'équipe : centrée, la photo le coupait sur le bord droit. */
  .mega__vedette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 0; transition: transform .6s var(--ease); }
  .mega__vedette:hover img { transform: scale(1.05); }
  .mega__vedette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(5, 39, 64, .85)); }
  .mega__vedette span { position: relative; z-index: 1; padding: 18px 20px; font: 700 1.25rem/1.2 var(--titre); }
  .mega__vedette small { display: block; font: 500 .9063rem var(--texte); opacity: .9; margin-top: 4px; }
  /* apparition en cascade des colonnes */
  .mega__in > * { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .35s var(--ease); }
  .nav__item:hover .mega__in > *, .nav__item:focus-within .mega__in > *, .nav__item.ouvert .mega__in > * { opacity: 1; transform: none; }
  .mega__in > :nth-child(2) { transition-delay: .05s; } .mega__in > :nth-child(3) { transition-delay: .1s; } .mega__in > :nth-child(4) { transition-delay: .15s; }
  .entete .btn { display: inline-flex; margin-left: 8px; }
  .ico-btn--menu { display: none; }
}
@media (max-width: 1079px) { .mega { display: none; } .nav { display: none; } }

/* Menu mobile plein écran */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--peche-pale); display: flex; flex-direction: column; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.menu.ouvert { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu__tete { display: flex; align-items: center; justify-content: space-between; padding: 8px var(--gouttiere); min-height: 64px; }
.menu nav { padding: 4px var(--gouttiere); }
.menu details { border-bottom: 1px solid #F2DDB6; }
.menu summary { display: flex; justify-content: space-between; align-items: center; min-height: 64px; cursor: pointer; list-style: none; font: 800 1.625rem/1.1 var(--titre); letter-spacing: -.02em; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 12px; height: 12px; border-right: 2.5px solid var(--marine); border-bottom: 2.5px solid var(--marine); transform: rotate(45deg); transition: transform .25s var(--ease); margin-right: 6px; }
.menu details[open] summary::after { transform: rotate(-135deg); }
.menu details ul { list-style: none; margin: 0; padding: 0 0 16px; display: grid; gap: 2px; }
.menu details a { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; font-weight: 600; font-size: 1.0625rem; }
.menu details img { width: 34px; height: 34px; object-fit: contain; }
/* Le sous-titre sous le titre de l'entrée (« Solo et adultes » puis « Partez quand vous voulez »), 20/10/2026. */
.menu details small { display: block; font-weight: 400; font-size: .875rem; color: var(--gris); line-height: 1.3; }
/* Menu mobile complet (22/10/2026) : les mêmes rubriques que le grand menu de l'ordinateur, groupées par intertitres. */
.menu__groupe { display: flex; align-items: center; gap: 6px; margin: 14px 0 4px; font: 700 .8125rem/1.2 var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.menu__groupe:first-child { margin-top: 2px; }
.menu details a .n { margin-left: auto; padding-left: 12px; color: var(--gris); font-weight: 600; }
.menu__groupe .flamme { width: 16px; height: 16px; flex: none; fill: #F26B3A; }
.menu__groupe .flamme__coeur { fill: var(--ambre); }
.menu__simple { display: flex; min-height: 64px; align-items: center; border-bottom: 1px solid #F2DDB6; text-decoration: none; font: 800 1.625rem/1.1 var(--titre); letter-spacing: -.02em; }
.menu__pied { margin-top: auto; padding: 24px var(--gouttiere) 28px; display: grid; gap: 12px; }

/* ---------- Photo légendée ---------- */
.photo { margin: 0; }
.photo img { width: 100%; object-fit: cover; background: var(--menthe-pale); border-radius: var(--r-img); }
.photo figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; font-size: .875rem; line-height: 1.4; color: var(--gris); }
.photo figcaption span:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: var(--marine); }

/* ---------- Carte de mission ---------- */
.grille-cartes { display: grid; gap: 36px 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grille-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grille-cartes { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; } }
.carte { position: relative; display: flex; flex-direction: column; }
.carte__img { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--menthe-pale); border-radius: var(--r-img); order: -1; }
.carte__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.carte:hover .carte__img img { transform: scale(1.05); }
.carte__cause { position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border-radius: var(--r-pilule); background: var(--blanc); font-size: .8438rem; font-weight: 700; }
.carte__lieu { display: flex; align-items: center; gap: 6px; font-size: .9375rem; color: var(--gris); margin: 14px 0 4px; }
.carte__lieu svg { width: 15px; height: 15px; flex: none; fill: var(--ambre); stroke: var(--marine); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.carte__lieu b { color: var(--marine); font-weight: 700; }
.carte__titre { font: 700 1.25rem/1.22 var(--titre); letter-spacing: -.012em; margin: 0 0 12px; text-wrap: pretty; }
.carte__titre a { text-decoration: none; background: linear-gradient(var(--ambre), var(--ambre)) 0 100% / 0 3px no-repeat; transition: background-size .3s var(--ease); }
.carte:hover .carte__titre a { background-size: 100% 3px; }
.carte__titre a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-img); }
.carte__titre a:focus-visible { outline: none; }
.carte:has(.carte__titre a:focus-visible) { outline: 3px solid var(--ambre-fonce); outline-offset: 8px; border-radius: var(--r-img); }
.faits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.faits div { display: inline-flex; gap: 5px; align-items: center; min-height: 30px; padding: 0 11px; border-radius: var(--r-pilule); background: var(--menthe-pale); font-size: .875rem; }
.faits dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.faits dd { margin: 0; font-weight: 600; white-space: nowrap; }
.faits .ico { width: 15px; height: 15px; margin-left: -2px; }
/* Icônes des repères d'une mission (gabarits.ts, ICO_*) : aplat ambre, trait marine, comme le repère de lieu. */
.ico { flex: none; fill: var(--ambre); stroke: var(--marine); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.carte__bas { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.carte__prix { font-size: .9688rem; color: var(--gris); margin: 0; }
.carte__prix b { font: 800 1.4375rem/1 var(--titre); color: var(--marine); letter-spacing: -.01em; }
.coeur { position: absolute; z-index: 2; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--blanc); border: 0; border-radius: 50%; cursor: pointer; box-shadow: var(--ombre-douce); transition: transform .2s var(--ease); }
.coeur:hover { transform: scale(1.1); }
.coeur svg { width: 22px; height: 22px; fill: none; stroke: var(--marine); stroke-width: 1.9; transition: transform .2s var(--ease); }
.coeur[aria-pressed="true"] svg { fill: var(--ambre); stroke: var(--marine); transform: scale(1.1); }
.action__bas .coeur { position: static; box-shadow: none; background: var(--menthe-pale); }

/* ---------- Pastilles ---------- */
.pastille { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pilule); border: 1.5px solid var(--marine); background: var(--blanc); font-size: .9375rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pastille--retirer { background: var(--peche); border-color: transparent; }
.pastille--retirer::after { content: "×"; font-size: 1.25rem; line-height: 1; margin-left: 2px; }

/* ---------- Champs ---------- */
.champ { display: grid; gap: 6px; }
.champ > label, .champ > .lbl, fieldset > legend { font-weight: 700; font-size: 1rem; padding: 0; }
.champ .aide { font-size: .9063rem; color: var(--gris); margin: -2px 0 2px; }
.champ .facultatif { font-weight: 400; color: var(--gris); font-size: .875rem; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 54px; padding: 12px 16px; border: 1.5px solid #B5C6D2; border-radius: var(--r-outil); background: var(--blanc); font-size: 1.0625rem; appearance: none; transition: border-color .15s; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--marine); }
.champ select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23083859' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 12px; padding-right: 44px; }
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--ambre-fonce); outline-offset: 0; border-color: var(--marine); }
.champ .erreur { display: none; color: var(--alerte); font-weight: 600; font-size: .9375rem; }
.champ.invalide .erreur { display: flex; gap: 6px; align-items: flex-start; }
.champ.invalide .erreur::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--alerte); color: #fff; font: 700 .75rem/18px var(--texte); text-align: center; margin-top: 2px; }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea { border-color: var(--alerte); border-width: 2px; }
.choix { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.choix legend { margin-bottom: 8px; }
.choix label { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 16px; border: 1.5px solid #B5C6D2; border-radius: var(--r-outil); background: var(--blanc); cursor: pointer; }
.choix label:has(input:checked) { background: var(--peche); border-color: var(--ambre-fonce); }
.choix input { width: 22px; height: 22px; accent-color: var(--marine); flex: none; min-height: 0; }
.choix--ligne { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ---------- Sections ---------- */
.section { padding-block: 64px; }
.section--peche { background: var(--peche-pale); }
.section--menthe { background: var(--menthe-pale); }
.section--blanc { background: var(--blanc); }
.section--encre { background: var(--marine); color: var(--blanc); }
.section__tete { display: grid; gap: 14px; margin-bottom: 32px; }
.section__tete--centre { text-align: center; justify-items: center; }
.section__tete--centre .chapo { margin-inline: auto; }
.section__tete .main { margin: 0 0 -6px; }
@media (min-width: 900px) {
  .section { padding-block: 100px; }
  .section__tete { grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 52px; }
  .section__tete--centre { grid-template-columns: 1fr; }
}
.note { background: var(--peche-pale); border-radius: var(--r-outil); padding: 16px 18px; font-size: .9688rem; line-height: 1.5; }
.note b { display: inline-block; margin-bottom: 2px; }

@media (max-width: 639px) {
  .rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) 12px; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 82%; scroll-snap-align: center; }
}

/* Apparition douce à l'entrée dans l'écran (une seule fois, sans JS requis pour lire le contenu) */
@media (prefers-reduced-motion: no-preference) {
  .js .apparait { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
  .js .apparait.vu { opacity: 1; transform: none; }
}

/* ---------- Newsletter ---------- */
.lettre { background: var(--ambre); border-radius: var(--r-carte); padding: 32px 24px; display: grid; gap: 24px; position: relative; overflow: hidden; }
.lettre__ill { width: 150px; justify-self: center; }
.lettre h2 { margin-bottom: 8px; }
.lettre form { display: grid; gap: 10px; }
.lettre input[type=email] { min-height: 56px; border-radius: var(--r-pilule); border: 2px solid var(--marine); padding: 0 22px; font-size: 1.0625rem; background: var(--blanc); width: 100%; }
.lettre .petit { color: #4A3508; }
@media (min-width: 900px) {
  .lettre { grid-template-columns: 190px 1fr 1.1fr; align-items: center; padding: 44px 56px; gap: 40px; }
  .lettre__ill { width: 190px; }
  .lettre form { grid-template-columns: 1fr auto; }
  .lettre form .petit { grid-column: 1 / -1; }
}

/* ---------- Bas de page illustré ---------- */
.horizon { background: var(--peche-pale); padding-top: 88px; text-align: center; position: relative; overflow: hidden; }
.horizon__raison { max-width: 26em; margin: 0 auto; padding-inline: var(--gouttiere); display: grid; gap: 14px; justify-items: center; }
.horizon__raison .main { font-size: 1.875rem; margin-bottom: -6px; }
.horizon__raison .btn { margin-top: 10px; }
.horizon__sol { display: block; width: 100%; height: clamp(44px, 7vw, 110px); margin-top: 36px; margin-bottom: -1px; }
.horizon__scene { position: relative; background: var(--marine); padding: 0 8px; }
/* La lueur du ciel naît en fondu sous les montagnes : coupée net en haut de la scène, elle traçait une ligne (20/10/2026). */
.horizon__scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 84% 30%, rgba(255, 185, 86, .16), transparent 70%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
/* Le soleil (20/10/2026) : une lueur dégradée, centrée dans le soleil dessiné, au lieu d'un disque plein décalé
   derrière l'acacia qui faisait rupture. Position et décalage se comptent sur le dessin (1 760 px au plus) : il suit à toute largeur. */
.horizon__soleil { position: absolute; right: calc(50% - min(50%, 880px) + min(8.9%, 156.6px)); top: 14.5%; width: min(6.2%, 110px); aspect-ratio: 1; border-radius: 50%; transform: translate(70%, -45%); background: radial-gradient(circle closest-side, rgba(255, 201, 120, .95) 0%, rgba(255, 185, 86, .75) 45%, rgba(255, 185, 86, .3) 75%, rgba(255, 185, 86, 0) 100%); }
.horizon__soleil::before { content: ""; position: absolute; inset: -70%; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(255, 185, 86, .26), rgba(255, 185, 86, .08) 55%, rgba(255, 185, 86, 0)); }
.horizon__pano { display: block; width: 100%; max-width: 1760px; margin: 0 auto; position: relative; }
.pied { background: var(--marine); color: #C9DCE9; padding: 20px 0 120px; font-size: .9688rem; }
.pied a { text-decoration: none; transition: color .15s; } .pied a:hover { color: var(--ambre); }
.pied__haut { display: grid; gap: 28px; padding-bottom: 36px; border-bottom: 1px solid #1F5479; }
.pied__marque p { max-width: 30em; margin-top: 14px; }
.pied__contact { display: grid; gap: 8px; margin-top: 18px; }
.pied__contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--blanc); font-weight: 600; }
.pied__contact svg { width: 20px; height: 20px; fill: var(--ambre); flex: none; }
.pied__badges { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; }
.pied__badges img { height: 74px; width: auto; }
.pied__badges img.large { height: 36px; }
.pied__grille { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 36px; }
/* La colonne « Suivez-nous » porte la newsletter : pleine largeur tant que le pied n'a pas ses cinq colonnes. Sans
   cela, le champ et son bouton élargissaient la grille et toute la page défilait de côté sur mobile (20/10/2026). */
.pied__grille > div:last-child { grid-column: 1 / -1; }
.pied h2 { font: 700 1.0625rem var(--titre); color: var(--blanc); margin: 0 0 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.reseaux { display: flex; gap: 10px; flex-wrap: wrap; }
.reseaux a { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid #3F7197; display: grid; place-items: center; transition: background .2s, transform .2s var(--ease), border-color .2s; }
.reseaux a:hover { background: var(--ambre); border-color: var(--ambre); transform: translateY(-3px); }
.reseaux a:hover svg { fill: var(--marine-fonce); }
.reseaux svg { width: 20px; height: 20px; fill: var(--blanc); }
/* La newsletter du pied (20/10/2026). */
.pied__lettre { margin-top: 24px; display: grid; gap: 10px; }
.pied__lettre label { font-weight: 600; color: var(--blanc); }
.pied__lettre div { display: flex; gap: 6px; background: var(--blanc); border-radius: var(--r-pilule); padding: 4px; }
.pied__lettre input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; font: inherit; color: var(--marine); min-height: 44px; }
.pied__lettre input:focus { outline: none; }
.pied__lettre div:focus-within { box-shadow: 0 0 0 3px var(--ambre); }
.pied__lettre .btn { min-height: 44px; padding: 0 18px; white-space: nowrap; }
.pied__lettre, .pied__lettre > div { min-width: 0; }
@media (max-width: 359px) { .pied__lettre input { padding: 0 10px; } .pied__lettre .btn { padding: 0 12px; } }
/* Fil d'Ariane : la zone de toucher dépasse le texte (44 px de haut) sans rien décaler. */
.ariane a { display: inline-block; padding-block: 11px; margin-block: -11px; }
.pied__lettre .petit { color: #C9DCE9; margin: 0; }
.pied__legal { border-top: 1px solid #1F5479; margin-top: 40px; padding-top: 20px; font-size: .8438rem; color: #94B2C8; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.pied .logo, .pied .logo svg { color: var(--blanc); }
@media (min-width: 900px) {
  .pied__haut { grid-template-columns: 1fr 1.2fr; align-items: center; }
  .pied__badges { justify-content: flex-end; }
  .pied__grille { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr); }
  .pied__grille > div:last-child { grid-column: auto; }
  .pied { padding-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Sélecteur de langue (bandeau du haut et pied) ---------- */
/* Bâti sur « details » : ouverture au clic et au clavier sans script. Le triangle natif est retiré.
   Même dessin aux deux endroits, seule la taille change : le bandeau du haut est une barre de service. */
.langues { position: relative; }
.langues > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.langues > summary::-webkit-details-marker { display: none; }
.langues > summary::marker { content: ""; }
.langues > summary:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; }
.langues > summary > svg:last-child { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .28s var(--ease); }
.langues[open] > summary > svg:last-child { transform: rotate(180deg); }
/* Le drapeau : un rectangle net, légèrement bordé pour que le blanc du drapeau français se détache. */
.drapeau { display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(8, 56, 89, .18); }
.langues__pop { position: absolute; z-index: 60; min-width: 196px; padding: 8px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-outil); box-shadow: var(--ombre);
  display: grid; gap: 2px; }
.langues__pop a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--marine); text-decoration: none; font: 600 .9375rem var(--texte); white-space: nowrap; }
.langues__pop a:hover { background: var(--menthe-pale); color: var(--marine); }
.langues__pop a[aria-current] { background: var(--menthe-pale); }
.langues__coche { width: 17px; height: 17px; margin-left: auto; fill: none; stroke: var(--foret); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; }

/* Dans le bandeau du haut : à côté de WhatsApp, à la taille de la barre. */
.langues--bandeau { flex: none; }
.langues--bandeau > summary { gap: 7px; color: var(--blanc); font: 600 .8125rem var(--texte); }
/* Le drapeau seul : le bandeau est une barre de service étroite, et écrire « Français » à côté repoussait
   la dernière preuve hors de l'écran. Le nom complet de chaque langue est dans le menu, juste en dessous. */
.langues--bandeau > summary > span { display: none; }
.langues--bandeau > summary > svg:last-child { width: 9px; height: 9px; opacity: .8; }
.langues--bandeau .langues__pop { top: calc(100% + 8px); right: 0; }

/* Dans le pied : une pastille claire sur le fond marine, qui annonce la langue en cours. */
.langues--pied { display: inline-block; margin-top: 20px; }
.langues--pied > summary { gap: 9px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid rgba(255, 255, 255, .34); border-radius: var(--r-pilule); color: var(--blanc);
  font: 600 .9375rem var(--texte); transition: border-color .2s, background .2s; }
.langues--pied > summary:hover, .langues--pied[open] > summary { border-color: var(--blanc); background: rgba(255, 255, 255, .08); }
.langues--pied > summary > svg:last-child { width: 11px; height: 11px; }
/* Le pied est en bas de page : le panneau s'ouvre vers le haut, sinon il sort de l'écran. */
.langues--pied .langues__pop { bottom: calc(100% + 10px); left: 0; }
.langues--pied .langues__pop a { color: var(--marine); }

/* Apercu du back-office : l'endroit que l'on est en train d'ecrire est surligne un instant. */
.apercu-vise {
  animation: apercu-vise 1.8s ease-out;
  border-radius: 8px;
}
@keyframes apercu-vise {
  0% { box-shadow: 0 0 0 4px rgba(226, 155, 58, 0.6); }
  100% { box-shadow: 0 0 0 4px rgba(226, 155, 58, 0); }
}
.apercu-attente {
  margin: 48px auto;
  max-width: 520px;
  padding: 24px;
  border-radius: 12px;
  background: #f3f6f8;
  color: #4b5a66;
  text-align: center;
  font-size: 1.0625rem;
}

/* Le pied de page (illustration, colonnes de liens) n'est mis en page qu'à l'approche du bas de la page. */
.pied { content-visibility: auto; contain-intrinsic-size: auto 1100px; }


/* ---- listes.css ---- */
/* Listes déroulantes maison (voir assets/js/listes.js). Le calque est en position fixe au niveau du <body>, z-index 1000 :
   il passe au-dessus de l'en-tête collant (50), des tiroirs (70) et n'est rogné par aucun conteneur. */
.liste-natif { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.a-liste { position: relative; }
.liste-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 12px 16px; border: 1.5px solid #B5C6D2; border-radius: var(--r-outil); background: var(--blanc); color: var(--marine); font-size: 1.0625rem; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .2s, background .2s; }
.liste-btn:hover { border-color: var(--marine); }
.liste-btn.est-ouvert { border-color: var(--marine); box-shadow: 0 0 0 3px var(--ambre); }
.liste-btn.est-vide .liste-btn__txt { font-weight: 500; }
.liste-btn__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.liste-btn svg { flex: none; width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s var(--ease); }
.liste-btn.est-ouvert svg { transform: rotate(180deg); }

.liste-pop { position: fixed; z-index: 1000; background: var(--blanc); border-radius: 18px; padding: 8px; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 28px 70px -20px rgba(8, 56, 89, .5), 0 0 0 1px rgba(8, 56, 89, .08);
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center; transition: opacity .18s var(--ease), transform .22s var(--ease);
  scrollbar-width: thin; scrollbar-color: var(--brume) transparent; outline: none; }
.liste-pop.vers-haut { transform-origin: bottom center; transform: translateY(8px) scale(.98); }
.liste-pop.visible { opacity: 1; transform: none; }
.liste-pop[hidden] { display: none; }
.liste-pop__groupe { padding: 14px 14px 6px; font-size: .8438rem; font-weight: 700; color: var(--gris); position: sticky; top: -8px; background: var(--blanc); z-index: 1; }
.liste-pop__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 14px; border-radius: 12px; cursor: pointer; font-weight: 500; line-height: 1.3; color: var(--marine); }
.liste-pop__opt.est-actif { background: var(--peche-pale); }
.liste-pop__opt[aria-selected="true"] { font-weight: 700; background: var(--peche); }
.liste-pop__opt[aria-selected="true"]::after { content: ""; flex: none; width: 18px; height: 18px; 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='%23083859' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Moteur de l'accueil : le bouton reprend la forme de la case, libellé au-dessus */
.hero { z-index: 5; }
.moteur__champ .liste-btn { min-height: 64px; padding: 28px 18px 8px; border: 0; background: transparent; font-weight: 700; box-shadow: none; }
.moteur__champ .liste-btn.est-ouvert { box-shadow: none; }
.moteur__champ:has(.est-ouvert) { background: var(--blanc); box-shadow: 0 0 0 3px var(--ambre-fonce); }
.moteur__champ .liste-btn svg { margin-top: -18px; }
.moteur__champ label { cursor: pointer; pointer-events: auto; }

/* Tri de la liste : version compacte */
.barre__tri .liste-btn { min-height: 44px; border: 0; background: transparent; padding: 0 10px 0 14px; font-size: .9688rem; font-weight: 700; width: auto; gap: 8px; box-shadow: none; border-radius: var(--r-pilule); }
.barre__tri .liste-btn:hover, .barre__tri .liste-btn.est-ouvert { background: var(--menthe-pale); box-shadow: none; }

.liste-pop__sep { height: 1px; margin: 6px 12px; background: currentColor; opacity: .15; }


/* ---- complements.css ---- */
/* 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: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--trait); }
.pages__numeros { display: flex; align-items: center; gap: 4px; }
.pages__n { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 8px; border-radius: var(--r-pilule);
  font-weight: 700; color: var(--marine); text-decoration: none; transition: background .2s; }
.pages__n:hover { background: var(--menthe-pale); }
.pages__n.est-actif { background: var(--marine); color: var(--blanc); }
.pages__saut { color: var(--gris); padding: 0 2px; }
.pages__cote { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--trait); border-radius: var(--r-pilule);
  font-weight: 700; color: var(--marine); text-decoration: none; transition: border-color .2s, background .2s; }
.pages__cote:hover { border-color: var(--marine); }
.pages__cote svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
a.pages__cote[rel=prev]:hover svg { transform: translateX(-3px); }
a.pages__cote[rel=next]:hover svg { transform: translateX(3px); }
.pages__cote.est-inactif { opacity: .35; }
@media (max-width: 639px) {
  .pages { gap: 6px; }
  .pages__cote { padding: 0 12px; }
  .pages__cote span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pages__n { min-width: 36px; }
  .pages__n--loin { display: none; }
}

.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: 1.5px 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; }
/* Page sans image en tête : la première section colorée ne vient plus se coller au chapô (Répartition des coûts, Avis). */
.contenu__tete + .section:not(.section--blanc) { margin-top: 36px; }
.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__img.contenu__img--entiere { aspect-ratio: auto; object-fit: contain; width: auto; max-width: 100%; max-height: 560px; margin-inline: auto; border-radius: 0; }
.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:not(.contenu--lecture) .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:not(.contenu--lecture) .section > .wrap:has(> h2.t-2 + .prose:last-child) > h2 { position: sticky; top: 110px; margin: 0; }
  .contenu:not(.contenu--lecture) .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:not(.contenu__img--entiere) { aspect-ratio: 21/9; }
}
/* Deux sections de contenu voisines sur le même fond : une seule marge entre elles, pas deux bout à bout (le trou de
   Planeta First, retour de Justine du 22/10/2026). */
.contenu .section--blanc + .section--blanc,
.contenu .section--peche + .section--peche,
.contenu .section--menthe + .section--menthe { padding-top: 0; }

/* « Titre + texte » suivi d'une photo (retour de Justine du 22/10/2026) : la photo rejoint la colonne du titre au lieu de
   flotter seule sous le texte, à droite d'un grand vide. Sur téléphone : titre, texte, puis photo. */
.texte-photo__cote h2.t-2::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--ambre); margin-bottom: 16px; }
.texte-photo .prose { margin-top: 18px; }
.texte-photo__img { margin: 0; }
.texte-photo__img img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-img); }
.texte-photo__img figcaption { margin-top: 10px; font-size: .9063rem; line-height: 1.45; color: var(--gris); }
.texte-photo__img--logo img { width: auto; max-width: 190px; max-height: 120px; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
@media (max-width: 1039px) {
  .texte-photo > .wrap { display: flex; flex-direction: column; }
  .texte-photo__cote { display: contents; }
  .texte-photo .prose { order: 1; }
  .texte-photo__img { order: 2; margin-top: 28px; }
}
@media (min-width: 1040px) {
  .texte-photo > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .texte-photo__cote { position: sticky; top: 110px; }
  .texte-photo__cote h2 { margin: 0; }
  .texte-photo__img { margin-top: 32px; }
  .texte-photo .prose { margin-top: 20px; max-width: 42em; font-size: 1.0625rem; line-height: 1.7; }
}

/* ---------- 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, minmax(0, 1fr)); }
  /* Trois colonnes seulement quand elles ont la place (06/11/2026 : à 768 px, « About » anglais débordait de 33 px). */
  .points--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .points--3 { grid-template-columns: repeat(3, minmax(0, 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); }
/* Carte cliquable (retour de Numan du 22/10/2026, « on ne voit pas qu'on peut cliquer, mais pas un truc de base ») : un
   coin de page corné, en bas à droite. Le coin est découpé en biais et laisse voir le rabat, comme une page qu'on
   s'apprête à tourner  ; au survol, le coin se soulève un peu plus. Toujours visible, donc lisible aussi au doigt. */
@property --coin { syntax: '<length>'; inherits: true; initial-value: 20px; }
.points .point--lien { --coin: 20px; position: relative; border-bottom-right-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coin)), calc(100% - var(--coin)) 100%, 0 100%);
  transition: --coin .3s var(--ease), border-color .2s, opacity .7s var(--ease), transform .8s var(--ease); }
.points .point--lien::after { content: ""; position: absolute; right: 0; bottom: 0; width: var(--coin); height: var(--coin); pointer-events: none;
  background: linear-gradient(-45deg, transparent 50%, var(--ambre) 50%); border-top-left-radius: 4px; opacity: .75;
  box-shadow: -2px -2px 5px rgba(8, 56, 89, .12); }
.points .point--lien:hover, .points .point--lien:focus-within { --coin: 30px; }
.section--encre .point--lien::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .points .point--lien { transition: border-color .2s; } }
.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; }
.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; }

/* Missions posées dans le texte d'un article (27/10/2026) : la grille sort de la colonne de lecture sans la casser. */
.prose .art__missions { margin: 28px 0 36px; gap: 32px 20px; }
.prose .art__missions .carte__titre { margin: 0 0 12px; font-size: 1.125rem; }
@media (min-width: 640px) { .prose .art__missions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Recherche (30/10/2026) : la boîte de la loupe et la page /recherche/ (js/recherche.js) ----------
   Une seule boîte, posée sans animation sous l'en-tête ; plein écran sur téléphone. Les mots trouvés sont passés au
   feutre ambre, comme les mots qui comptent ailleurs sur le site. */
html.cherche-ouverte { overflow: hidden; }
.cherche { position: fixed; inset: 0; z-index: 120; }
.cherche[hidden] { display: none; }
.cherche__fond { position: absolute; inset: 0; background: rgba(5, 39, 64, .42); }
.cherche__boite { position: relative; margin: 72px auto 0; width: min(780px, calc(100% - 32px)); max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); display: flex; flex-direction: column; background: var(--blanc); border-radius: var(--r-carte); box-shadow: var(--ombre); overflow: hidden; }
.cherche__barre { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--trait); }
.cherche__barre > svg, .recherche-page__form > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--marine); stroke-width: 2; stroke-linecap: round; }
.cherche__barre input, .recherche-page__form input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--marine); font: 600 1.1875rem/1.3 var(--texte); padding: 10px 0; -webkit-appearance: none; appearance: none; }
.cherche__barre input::placeholder, .recherche-page__form input::placeholder { color: var(--gris); font-weight: 400; opacity: .85; }
.cherche__barre input::-webkit-search-cancel-button, .recherche-page__form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cherche__fermer { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--marine); cursor: pointer; }
.cherche__fermer:hover { background: var(--menthe-pale); }
.cherche__fermer svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cherche__corps { overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 14px; }
.cherche__aide { display: none; margin: 0; padding: 9px 22px; border-top: 1px solid var(--trait); font-size: .8125rem; color: var(--gris); }
@media (hover: hover) and (min-width: 700px) { .cherche__aide { display: block; } }
@media (max-width: 699px) {
  .cherche__fond { display: none; }
  .cherche__boite { margin: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; }
  .cherche__barre { padding: 8px 6px 8px 16px; }
  .cherche__barre input { font-size: 1.0625rem; }
}

/* Les résultats, dans la boîte comme sur la page. */
.cherche__groupe h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 16px 12px 6px; font: 700 .75rem/1 var(--texte); letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.cherche__groupe h2 span { font-weight: 600; letter-spacing: 0; color: var(--brume); }
.cherche__groupe ul { list-style: none; margin: 0; padding: 0; }
.cherche__res { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 12px; border-radius: 14px; color: var(--marine); text-decoration: none; }
.cherche__res--sans-image { grid-template-columns: minmax(0, 1fr); padding-block: 10px; }
.cherche__res img { width: 72px; height: 54px; object-fit: cover; border-radius: 10px; background: var(--menthe-pale); }
.cherche__res--d img { width: 54px; height: 54px; border-radius: 50%; justify-self: center; }
.cherche__res:hover, .cherche__res.est-actif { background: var(--menthe-pale); }
.cherche__res:focus-visible { outline: 2px solid var(--ambre-fonce); outline-offset: -2px; }
.cherche__txt { display: grid; gap: 3px; min-width: 0; }
.cherche__txt b { font: 600 1rem/1.3 var(--texte); }
.cherche__txt mark, .cherche__extrait mark { color: inherit; background: linear-gradient(transparent 58%, rgba(255, 185, 86, .7) 58% 92%, transparent 92%); padding-inline: .04em; }
/* Les repères, séparés d'un filet. Le filet déborde à gauche de son repère : quand la ligne se coupe, celui qui ouvre la
   ligne suivante tombe hors du cadre et disparaît (overflow), au lieu de commencer la ligne par un trait. */
.cherche__meta { display: flex; flex-wrap: wrap; align-items: center; overflow: hidden; font-size: .875rem; line-height: 1.35; color: var(--gris); }
.cherche__meta span { position: relative; margin-right: 17px; }
.cherche__meta span + span::before { content: ""; position: absolute; left: -9px; top: .22em; width: 1px; height: .95em; background: var(--trait); }
.cherche__res--m .cherche__meta span:first-child { color: var(--marine); font-weight: 600; }
.cherche__extrait { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: .875rem; color: var(--gris); }
.cherche__tout { display: block; margin: 10px 12px 0; padding: 12px; border: 1px solid var(--trait); border-radius: 14px; text-align: center; font-weight: 700; color: var(--marine); text-decoration: none; }
.cherche__tout:hover { background: var(--menthe-pale); }
.cherche__note { margin: 0; padding: 12px; font-size: .9375rem; color: var(--gris); }
.cherche__vide { padding: 14px 12px 6px; }
.cherche__surtitre { margin: 0 0 10px; font: 700 .75rem/1 var(--texte); letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.cherche__puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cherche__puce { padding: 8px 15px; border: 1px solid var(--trait); border-radius: var(--r-pilule); background: var(--blanc); color: var(--marine); font: 600 .9375rem/1.2 var(--texte); cursor: pointer; }
.cherche__puce:hover, .cherche__puce:focus-visible { border-color: var(--ambre); background: var(--peche-pale); outline: none; }
.cherche__rien { padding: 16px 12px 4px; }
.cherche__rien p { margin: 0 0 6px; }
.cherche__rien p:first-child { font-weight: 600; font-size: 1.0625rem; }
.cherche__lien { padding: 0; border: 0; background: none; color: var(--marine); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.cherche__equipe { margin: 12px; padding: 20px 22px; border-radius: 20px; background: var(--peche-pale); }
.cherche__equipe p { margin: 0; }
.cherche__equipe-titre { font: 700 1.125rem/1.25 var(--titre); margin-bottom: 4px !important; }
.cherche__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px !important; }

/* La page /recherche/ : le même moteur, en pleine page. */
.recherche-page .wrap { max-width: 860px; }
.recherche-page__form { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 6px 6px 6px 20px; border: 1px solid var(--trait); border-radius: var(--r-pilule); background: var(--blanc); box-shadow: var(--ombre-douce); }
.recherche-page__form:focus-within { border-color: var(--marine); }
.recherche-page__form .btn { min-height: 48px; }
@media (max-width: 479px) { .recherche-page__form .btn { display: none; } .recherche-page__form { padding-right: 14px; } }
.recherche-page__resultats { margin-top: 18px; }
.recherche-page__resultats .cherche__groupe h2 { padding-top: 22px; }

/* ---------- Programmes jeunes (30/10/2026, src/site/fp/jeunes.ts) ----------
   Trois cartes qui se comparent d'un coup d'œil : mêmes repères, dans le même ordre, et le prix toujours en bas.
   Toute la carte mène à la section du programme, plus bas. */
.programmes { display: grid; gap: 22px; }
@media (min-width: 900px) { .programmes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .programmes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; } }
.programme { display: grid; grid-template-rows: auto 1fr; background: var(--blanc); border-radius: var(--r-carte); overflow: hidden; color: var(--marine); text-decoration: none; box-shadow: var(--ombre-douce); transition: box-shadow .25s var(--ease); }
.programme:hover { box-shadow: var(--ombre); }
.programme:focus-visible { outline: 3px solid var(--ambre-fonce); outline-offset: 4px; }
.programme__img { position: relative; aspect-ratio: 16 / 10; background: var(--menthe-pale); }
.programme__img img { width: 100%; height: 100%; object-fit: cover; }
.programme__age { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--r-pilule); background: var(--ambre); color: var(--marine-fonce); font: 700 .9063rem/1 var(--texte); }
.programme__corps { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 20px 22px 22px; }
.programme__nom { font: 800 1.375rem/1.15 var(--titre); letter-spacing: -.01em; }
.programme__resume { color: var(--gris); }
.programme__faits { margin: 4px 0 0; display: grid; gap: 8px; align-content: start; }
.programme__faits div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; padding-top: 8px; border-top: 1px solid var(--trait); font-size: .9375rem; line-height: 1.35; }
.programme__faits dt { color: var(--gris); }
.programme__faits dd { margin: 0; font-weight: 600; }
.programme__bas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 2px solid var(--ambre); font-size: .9375rem; color: var(--gris); }
.programme__bas b { font: 800 1.3125rem/1 var(--titre); color: var(--marine); }
.programme-section { scroll-margin-top: 90px; }
.programme-section + .programme-section { padding-top: 0; }

/* ---------- Planeta First : le billet des fiches mission (30/10/2026, src/site/fp/planeta.ts) ----------
   Un talon violet au logo, une ligne de perforation, puis les circuits. Le billet dit « voyage » sans un mot et sépare
   visuellement l'offre Planeta First des missions. Aucune animation. */
:root { --pf-nuit: #301A74; --pf-indigo: #4828A8; --pf-magenta: #A228A8; --pf-lavande: #FBF7FE; --pf-trait: #DCCDF0; --pf-encre: #1E1340; --pf-doux: #6A5A8C; }
.billet { --encoche: 16px; --talon: 180px; position: relative; display: grid; grid-template-columns: var(--talon) minmax(0, 1fr); margin: 8px 0 40px; border-radius: 20px; background: var(--pf-lavande); border: 1px solid var(--pf-trait); color: var(--pf-encre); }
.billet__talon { position: relative; display: grid; align-content: space-between; gap: 14px; padding: 22px 18px; background: var(--pf-nuit); color: #FFFFFF; border-radius: 19px 0 0 19px; }
.billet__talon .pf-logo { width: 132px; height: auto; }
.billet__talon p { margin: 0; font-size: .8438rem; line-height: 1.35; color: #E8DDFA; }
.billet__talon::after { content: ""; position: absolute; right: -1px; top: 14px; bottom: 14px; border-right: 2px dashed #B9A3E6; }
.billet__corps { display: grid; gap: 16px; padding: 20px 22px; min-width: 0; }
.billet__accroche { display: grid; gap: 4px; }
.billet__accroche .main { margin: 0; color: var(--pf-magenta); font-size: 1.4rem; }
.billet__accroche h2 { margin: 0; font: 800 1.3125rem/1.2 var(--titre); color: var(--pf-nuit); text-wrap: balance; }
.billet__accroche p { margin: 0; font-size: .9375rem; color: #4A3D6B; }
.billet__circuits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.billet__circuit { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E7DCF6; color: inherit; text-decoration: none; transition: border-color .2s; }
.billet__circuit:hover { border-color: var(--pf-indigo); }
.billet__circuit:focus-visible { outline: 3px solid var(--pf-magenta); outline-offset: 2px; }
.billet__circuit img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }
.billet__circuit b { display: block; font: 600 .9688rem/1.25 var(--texte); color: var(--pf-nuit); }
.billet__circuit small { display: block; font-size: .8438rem; color: var(--pf-doux); }
.billet__circuit em { font-style: normal; font-weight: 700; color: var(--pf-nuit); }
.billet__pied { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 0; font-size: .875rem; color: var(--pf-doux); }
.billet__pied a { font-weight: 700; color: var(--pf-indigo); text-decoration: underline; text-decoration-color: var(--pf-magenta); text-underline-offset: 3px; }
@media (max-width: 700px) {
  .billet { grid-template-columns: 1fr; }
  .billet__talon { grid-auto-flow: column; align-items: center; justify-content: space-between; border-radius: 19px 19px 0 0; padding: 16px 18px; }
  .billet__talon .pf-logo { width: 116px; }
  .billet__talon p { max-width: 14em; text-align: right; }
  .billet__talon::after { left: 14px; right: 14px; top: auto; bottom: -1px; border-right: 0; border-bottom: 2px dashed #B9A3E6; }
}
.btn--pf { background: var(--pf-indigo); border-color: var(--pf-indigo); color: #FFFFFF; }
.btn--pf:hover { background: var(--pf-nuit); border-color: var(--pf-nuit); color: #FFFFFF; }
/* L'option Planeta First du formulaire : un bandeau à la marque, puis de vraies photos à cocher, comme le choix du pays. */
.pf-option { margin: 22px 0 0; padding: 0 0 14px; border: 0; border-radius: var(--r-img); overflow: hidden; background: var(--pf-lavande); color: var(--marine); }
.pf-option legend { float: left; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; width: 100%; padding: 12px 16px; background: var(--pf-nuit); color: #FFFFFF; font-weight: 700; }
.pf-option legend img { width: 104px; height: auto; }
.pf-option legend .facultatif { margin-left: auto; font-weight: 400; color: #E8DDFA; }
.pf-option .aide { clear: both; margin: 0; padding: 12px 16px 10px; font-size: .9375rem; color: var(--pf-encre); }
.pf-option__choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; padding-inline: 16px; }
.pf-option label { position: relative; display: block; cursor: pointer; }
.pf-option label[hidden] { display: none; }
.pf-option input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.pf-option__carte { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; height: 100%; padding: 8px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--pf-trait); transition: box-shadow .15s, background .15s; }
.pf-option__carte img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.pf-option__carte b { display: block; font-size: .9688rem; line-height: 1.2; color: var(--pf-nuit); }
.pf-option__carte small { display: block; margin-top: 2px; font-size: .8438rem; color: var(--pf-doux); }
.pf-option__carte em { display: block; margin-top: 2px; font-style: normal; font-weight: 700; font-size: .9063rem; color: var(--pf-nuit); }
.pf-option label:hover .pf-option__carte { box-shadow: inset 0 0 0 1.5px var(--pf-indigo); }
.pf-option input:checked + .pf-option__carte { background: #EFE7FB; box-shadow: inset 0 0 0 2px var(--pf-indigo); }
.pf-option input:focus-visible + .pf-option__carte { outline: 3px solid var(--pf-magenta); outline-offset: 2px; }

/* Planeta First dans le site (31/10/2026) : son entrée de menu, son panneau violet, le badge de la recherche, le billet. */
.billet--pays { margin: 0; }
/* Planeta First sur l'accueil : une bannière photo, bas de page, juste avant le journal. */
.pf-banniere { padding-block: 56px 16px; }
.pf-banniere__in { position: relative; display: grid; align-content: center; justify-items: start; gap: 8px; min-height: 340px; padding: 32px 26px; border-radius: var(--r-carte); overflow: hidden; background: var(--pf-nuit); color: #FFFFFF; }
.pf-banniere__in > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-banniere__in::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(48, 26, 116, .95) 0, rgba(48, 26, 116, .82) 42%, rgba(48, 26, 116, .12) 80%); }
.pf-banniere__in > :not(img:first-child) { position: relative; z-index: 2; }
.pf-banniere .pf-logo { width: 170px; height: auto; }
.pf-banniere h2 { margin: 6px 0 0; max-width: 13em; font: 800 clamp(1.75rem, 3.4vw, 2.5rem)/1.08 var(--titre); letter-spacing: -.02em; color: #FFFFFF; text-wrap: balance; }
.pf-banniere p { margin: 0 0 10px; max-width: 30em; color: #F1EAFC; }
@media (max-width: 759px) { .pf-banniere__in::before { background: linear-gradient(180deg, rgba(48, 26, 116, .92) 0, rgba(48, 26, 116, .86) 60%, rgba(48, 26, 116, .55) 100%); } }
@media (min-width: 900px) { .pf-banniere__in { padding: 44px 52px; } }
@media (min-width: 1080px) {
  .nav__item--pf .nav__lien { color: var(--pf-indigo); }
  .nav__item--pf .nav__lien::after { background: var(--pf-magenta); }
  .mega--pf { background: var(--pf-nuit); color: #FFFFFF; border-top: 0; box-shadow: 0 40px 60px -30px rgba(48, 26, 116, .7); }
  .mega__in--pf { grid-template-columns: 1.15fr 1.25fr .85fr 1.15fr; }
  .mega--pf h3 { color: #CDBDEB; }
  .mega--pf li a { color: #FFFFFF; }
  .mega--pf li a:hover { background: rgba(255, 255, 255, .1); }
  .mega--pf li small, .mega--pf li .n { color: #CDBDEB; }
  .mega-pf__marque { display: grid; gap: 8px; align-content: start; justify-items: start; }
  .mega-pf__marque img { width: 170px; height: auto; }
  .mega-pf__marque .main { margin: 2px 0 0; color: #E8DDFA; }
  .mega-pf__marque p:not(.main) { margin: 0 0 8px; font-size: .9375rem; color: #E8DDFA; }
  .mega-pf__marque .btn { min-height: 46px; background: var(--ambre); border-color: var(--ambre); color: var(--marine-fonce); }
  .mega-pf__marque .btn:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--pf-nuit); }
}
.menu-pf > summary { color: var(--pf-indigo); }
.cherche__badge { display: inline-block; justify-self: start; width: fit-content; margin-bottom: 3px; padding: 2px 8px; border-radius: 6px; background: var(--pf-nuit); color: #FFFFFF; font: 700 .6875rem/1.3 var(--texte); letter-spacing: .03em; }
.cherche__res--c .cherche__meta span:first-child { color: var(--pf-nuit); font-weight: 600; }
.cherche__res--c:hover, .cherche__res--c.est-actif { background: var(--pf-lavande); }

/* Le menu : cinq rubriques sur une ligne, la dernière regroupe l'équipe, les preuves et le budget (31/10/2026). */
@media (min-width: 1080px) {
  .nav__lien { white-space: nowrap; }
  .mega__in--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Le texte des pages-listes (31/10/2026) : une accroche, deux colonnes, replié sur téléphone derrière « Lire la suite ». */
.li { padding-block: 40px 0; background: var(--blanc); }
.li__in { display: grid; gap: 14px; }
.li__accroche p { margin: 0; font: 700 1.3125rem/1.25 var(--titre); letter-spacing: -.01em; color: var(--marine); text-wrap: pretty; }
.li__suite { max-width: none; font-size: 1rem; line-height: 1.6; color: var(--gris); }
.li__suite p { margin: 0 0 12px; break-inside: avoid; }
.li__suite > :last-child { margin-bottom: 0; }
.li__plus { display: none; }
.li + .section { padding-top: 36px; }
@media (min-width: 900px) {
  .li__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
  .li__in > .li__texte:only-child { grid-column: 1 / -1; }
  .li__suite { columns: 2; column-gap: 40px; }
}
@media (max-width: 759px) {
  .li { padding-top: 24px; }
  .li__accroche p { font-size: 1.1875rem; }
  .li__suite { display: none; }
  #li-suite:checked ~ .li__suite { display: block; }
  .li__plus { display: inline-block; font-weight: 700; color: var(--marine); text-decoration: underline; text-decoration-color: var(--ambre-fonce); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
  #li-suite:checked ~ .li__plus { display: none; }
  #li-suite:focus-visible ~ .li__plus { outline: 3px solid var(--ambre-fonce); outline-offset: 3px; }
  .li + .section { padding-top: 24px; }
}

/* Passe sur tout le site (31/10/2026) : plus de barres d'accent au-dessus ou à gauche, plus de petits intitulés en
   capitales espacées, et les surtitres ne mordent plus sur leur titre. */
.contenu .section > .wrap > h2.t-2:has(+ .prose)::before, .texte-photo__cote h2.t-2::before { display: none; }
.section__tete .main { margin: 0 0 4px; }
.dest__grille dt { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: .9375rem; color: var(--marine); }
.cherche__groupe h2, .cherche__surtitre, .menu__groupe { text-transform: none; letter-spacing: 0; }

/* Le texte d'une destination : deux colonnes sur toute la largeur, replié sur téléphone. */
.dest__intro .li__suite { columns: auto; }
@media (min-width: 900px) { .dest__intro--seul { display: block; } .dest__intro--seul .li__suite { columns: 2; column-gap: 40px; } }

/* Une longue adresse écrite dans un texte passe à la ligne au lieu d'élargir la page (fiche Australie). */
.prose, .prose li, .prose p, .prose a { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ *
 * Pages de contenu en lecture (retour de Justine du 06/11/2026)
 * Les pages surtout faites de texte se lisent comme un article : titre et chapô, photo, puis un sommaire collant à
 * gauche et une seule colonne de lecture. Les intertitres reviennent au-dessus de leur texte : plus de colonne de
 * titre vide pendant des écrans entiers. Mêmes mesures que l'article du journal (css/journal.css).
 * ------------------------------------------------------------------ */
/* Aucune apparition au défilement sur les pages de contenu : une section ne reste jamais vide le temps d'un effet. */
.js .contenu .apparait { opacity: 1; transform: none; transition: none; }

.lec-tete { padding-top: 34px; }
.lec-tete__txt { max-width: 900px; margin: 0 auto 26px; }
.lec-tete__txt h1 { margin: 0; font: 800 clamp(2rem, 4.4vw, 3.25rem)/1.08 var(--titre); font-stretch: 92%; letter-spacing: -.02em; text-wrap: balance; color: var(--marine); }
.lec-tete__chapo { margin: 16px 0 0; font: 400 clamp(1.125rem, 1.8vw, 1.3125rem)/1.5 var(--texte); color: #2F5570; }
.lec-tete__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-img); }
.lec-tete__img--entiere { aspect-ratio: auto; object-fit: contain; width: auto; max-width: 100%; max-height: 420px; margin-inline: auto; border-radius: 0; }

.lec { display: grid; gap: 22px; padding-block: 40px 56px; }
.lec__cote { min-width: 0; }
.lec__sommaire { padding: 14px 18px; border-radius: 18px; background: var(--menthe-pale); }
.lec__sommaire summary { font: 700 1.0625rem var(--titre); color: var(--marine); cursor: pointer; }
.lec__sommaire ol { list-style: none; margin: 12px 0 2px; padding: 0 0 0 16px; position: relative; display: grid; gap: 8px; }
.lec__sommaire ol::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; border-left: 2px dashed var(--brume); }
.lec__sommaire li { position: relative; }
.lec__sommaire a { display: block; font-size: .9375rem; line-height: 1.3; color: var(--gris); text-decoration: none; }
.lec__sommaire a:hover { color: var(--marine); }
.lec__sommaire li.est-actif a { color: var(--marine); font-weight: 700; }

.lec__corps { min-width: 0; font-size: 1.125rem; line-height: 1.72; }
/* Chaque bloc perd son fond plein écran et ses grandes marges : il devient un passage de la colonne. */
.lec__corps .section { padding: 0; background: none; color: inherit; }
.lec__corps .section + .section { margin-top: 2.6rem; }
/* Un texte sans intertitre qui suit un texte continue le même passage. */
.lec__corps .section + .section:not(:has(h2)):not(.section--menthe):not(.section--peche):not(.section--encre) { margin-top: 0; }
.lec__corps .wrap { max-width: none; margin: 0; padding-inline: 0; }
.lec__corps h2 { scroll-margin-top: 110px; }
.lec__corps .section > .wrap > h2,
.lec__corps .texte-photo__cote h2,
.lec__corps .section__tete h2 { margin: 0 0 .6em; max-width: none; font: 800 clamp(1.5rem, 2.6vw, 1.875rem)/1.16 var(--titre); font-stretch: 92%; letter-spacing: -.015em; text-wrap: balance; color: var(--marine); }
.lec__corps .section > .wrap > h2 + .prose { margin-top: 0; }
.lec__corps .prose { max-width: none; margin: 0; font-size: inherit; line-height: inherit; }
.lec__corps .prose p { margin: 0 0 1.05em; }
.lec__corps .prose > :last-child { margin-bottom: 0; }
.lec__corps .prose h3 { margin: 1.6em 0 .4em; font: 700 1.25rem/1.25 var(--titre); color: var(--marine); }
/* Un intertitre écrit dans le texte (un pays, une question) : un cran sous le titre de la partie. */
.lec__corps .prose h2 { margin: 1.6em 0 .45em; font: 700 1.3125rem/1.25 var(--titre); letter-spacing: 0; color: var(--marine); }
.lec__corps .prose > h2:first-child, .lec__corps .prose > h3:first-child { margin-top: 0; }
.lec__corps .prose > p:empty { display: none; }
.lec__corps .prose a:not(.btn) { font-weight: 600; text-decoration-color: var(--ambre-fonce); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lec__corps .prose ul, .lec__corps .prose ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.lec__corps .prose li { margin-bottom: .4em; }
.lec__corps .prose blockquote { margin: 1.6em 0; padding: 0; font: 700 1.3125rem/1.4 var(--titre); color: var(--marine); }
.lec__corps .prose img { border-radius: var(--r-img); height: auto; max-width: 100%; }
.lec__corps .prose p.lec__action { margin: 1.4em 0 1.05em; }
.lec__corps .prose p.lec__action:last-child { margin-bottom: 0; }

/* Un passage mis en avant dans le back-office (fond menthe, pêche ou encre) : un encadré dans la colonne. */
.lec__corps .section--menthe, .lec__corps .section--peche, .lec__corps .section--encre { padding: 28px 30px; border-radius: 20px; }
.lec__corps .section--menthe { background: var(--menthe-pale); }
.lec__corps .section--peche { background: var(--peche-pale); }
.lec__corps .section--encre { background: var(--marine); color: var(--blanc); }
.lec__corps .section--encre h2, .lec__corps .section--encre .prose h3 { color: var(--blanc); }

/* Les blocs riches, à la largeur de la colonne. */
.lec__corps .section__tete, .lec__corps .section__tete--centre { text-align: left; justify-items: start; gap: 6px; margin-bottom: 20px; }
.lec__corps .section__tete h2 { margin: 0; }
.lec__corps .section__tete .chapo { margin: 4px 0 0; max-width: none; font-size: 1.0625rem; }
@media (min-width: 640px) { .lec__corps .grille-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; } }
@media (min-width: 760px) {
  .lec__corps .points--3, .lec__corps .points--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lec__corps .chiffres--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lec__corps .pas-liste::before { display: none; }
.lec__corps .chiffres__note { text-align: left; margin-left: 0; }
.lec__corps .odd { grid-template-columns: minmax(0, 1fr); }
.lec__corps .citation { max-width: none; margin: 0; }
@media (min-width: 820px) { .lec__corps .citation { grid-template-columns: 120px 1fr; gap: 28px; } }
.lec__corps .citation__portrait { width: 120px; height: 120px; }
.lec__corps .bloc-image { padding: 0; }
.contenu--lecture .lec__corps .bloc-image__in, .contenu--lecture .lec__corps .bloc-image__in:not(.bloc-image__in--large) { margin: 0; max-width: none; }
/* Titre, texte puis photo, dans la colonne. */
.lec__corps .texte-photo > .wrap { display: flex; flex-direction: column; gap: 0; }
.lec__corps .texte-photo__cote { display: contents; position: static; }
.lec__corps .texte-photo .prose { order: 1; margin-top: 0; }
.lec__corps .texte-photo__img { order: 2; margin-top: 22px; }

/* L'invitation de fin, alignée sur la colonne de lecture. */
.lec-fin { padding-block: 0 56px; }
.lec-fin__in { display: grid; gap: 14px; align-items: center; max-width: calc(250px + 56px + 44rem); margin-inline: auto; padding: 26px; border-radius: var(--r-carte); background: var(--marine); color: var(--blanc); }
.lec-fin__in img { width: 72px; height: 72px; }
.lec-fin__in .main { margin: 0 0 2px; color: var(--ambre); }
.lec-fin__in p { margin: 0; }
@media (min-width: 760px) { .lec-fin__in { grid-template-columns: auto 1fr auto; gap: 24px; padding: 26px 34px; } }

@media (min-width: 1040px) {
  .lec-tete__img:not(.lec-tete__img--entiere) { aspect-ratio: 2 / 1; }
  .lec { grid-template-columns: 250px minmax(0, 44rem); gap: 56px; justify-content: center; align-items: start; }
  .lec--seul { grid-template-columns: minmax(0, 44rem); }
  .lec__cote { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
  .lec__sommaire summary { list-style: none; cursor: default; pointer-events: none; }
  .lec__sommaire summary::-webkit-details-marker { display: none; }
}
@media (max-width: 639px) {
  .lec-tete { padding-top: 22px; }
  .lec { padding-top: 26px; }
  .lec__corps { font-size: 1.0625rem; }
  .lec__corps .section--menthe, .lec__corps .section--peche, .lec__corps .section--encre { padding: 22px 20px; }
}
/* Une carte de point ne s'élargit jamais au-delà de sa colonne (mots longs, titres anglais). */
.point > div { min-width: 0; overflow-wrap: anywhere; }