/* 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-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 84% 96%;
  font-display: swap;
  src: url(../fonts/BricolageGrotesque-normal-latin-v2.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-v2.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: 0 12px 26px -14px rgba(242, 162, 51, .95); }
.btn--plein:hover { background: var(--marine); border-color: var(--marine); color: var(--blanc); box-shadow: var(--ombre-douce); }
.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; }
.lien-fort { font-weight: 700; text-decoration: none; border-bottom: 2.5px solid var(--ambre); padding-bottom: 2px; transition: border-color .2s; }
.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__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: start; }
.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;
}