@charset "UTF-8";
/* =========================================================================
   POLICES, hebergees avec le site.
   Bricolage Grotesque et Instrument Sans, licence SIL Open Font License 1.1
   (le texte des licences est dans assets/polices/). Rien n'est charge chez
   un tiers : la page se charge plus vite, et aucune adresse IP de visiteur
   n'est transmise a un service externe.
   ========================================================================= */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("polices/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  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: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("polices/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations");
  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: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("polices/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  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: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("polices/instrument-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  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;
}
/* L'italique editoriale. Elle ne sert qu'aux deux ou trois mots mis en valeur
   dans un grand titre : jamais un paragraphe, jamais un bouton. Instrument
   Serif, meme fonderie qu'Instrument Sans, licence SIL Open Font License 1.1. */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("polices/instrument-serif-latin-italic.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: "Instrument Serif";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("polices/instrument-serif-latin-ext-italic.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;
}

/* =========================================================================
   LES ESCAPADES DE JESSIE - feuille de style unique
   Direction v5 : editorial vegetal. Le vert forêt porte les grandes surfaces
   (ouverture, tarif, formulaire, pied de page), le creme et le vert pale les
   sections claires, la terre cuite les accents et le bouton principal : c'est
   la couleur des traces sur les cartes dessinees a la main.
   Typographies : Bricolage Grotesque (titres) + Instrument Sans (textes)
   + Instrument Serif italique, uniquement sur les mots mis en valeur.
   Aucun outil de build : ce fichier se lit tel quel.
   ========================================================================= */

/* ---------------------------------------------------------------- JETONS */
:root {
  /* Fonds et encres, mode clair */
  --fond:        #F3F6EF;   /* creme legerement verte                       */
  --fond-2:      #E3EFE1;   /* le vert pale des sections alternees          */
  --carte:       #FFFFFF;
  --encre:       #14231B;
  --encre-doux:  #44574C;
  --encre-clair: #566A5E;   /* AA sur le creme comme sur le vert pale  */

  /* Marque.  --foret est une GRANDE SURFACE SOMBRE : l'encre posee dessus
     (--sur-foret) est claire. Tout ce qui porte .ton-foret suit cette regle. */
  --foret:       #16301F;   /* vert forêt profond : le fond des grands blocs */
  --sur-foret:   #EDF3E8;   /* l'encre posee dessus : 14,2:1                 */
  --sur-foret-2: rgba(237, 243, 232, .84);
  --foret-2:     #2E6A42;   /* le vert des boutons : le blanc passe AA       */
  --foret-clair: #5E8F63;   /* les filets et les icones sur fond clair       */
  --btn-encre:   #ffffff;   /* l'encre du bouton vert                        */
  --btn-clair-encre: #16301F;  /* l'encre du bouton ivoire sur fond vert     */
  --mousse:      #A9C9A3;   /* les petits labels sur le vert : 7,9:1         */
  --trace:       #A8441F;   /* textes et liens : contraste AA sur fond clair  */
  --trace-vif:   #C0512A;   /* aplats : le blanc passe AA dessus             */
  --trace-pale:  #F0DFD5;

  --terre:       #DDE6D7;
  --terre-trait: #6E8874;
  --bordure:     rgba(20, 35, 27, .13);
  --bordure-2:   rgba(20, 35, 27, .07);
  --sur-foret-bord: rgba(237, 243, 232, .22);
  --voile:       rgba(20, 35, 27, .55);

  /* Typographie */
  --titre: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --texte: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Rythme vertical. Densite 3 : on respire. */
  --section:  clamp(56px, 6vw, 98px);
  --max:      1320px;
  --max-lire: 720px;
  --gouttiere: clamp(20px, 5vw, 56px);

  /* Formes. Une seule regle : cartes et images 16px, champs 12px,
     boutons en pilule. Elle s'applique partout, sans exception. */
  --r-carte: 16px;
  --r-champ: 12px;

  --sortie: cubic-bezier(.16, 1, .3, 1);
  --ombre:    0 1px 2px rgba(20, 35, 27, .04), 0 18px 44px -32px rgba(20, 35, 27, .5);
  --ombre-xl: 0 2px 4px rgba(20, 35, 27, .05), 0 42px 80px -48px rgba(20, 35, 27, .7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond:        #0F1A14;
    --fond-2:      #16241C;
    --carte:       #1A2A21;
    --encre:       #EAEFE8;
    --encre-doux:  #A9BBAF;
    --encre-clair: #8AA093;

    --foret:       #11241A;
    --sur-foret:   #EAF1E3;
    --sur-foret-2: rgba(234, 241, 227, .82);
    --foret-2:     #9CC47E;
    --foret-clair: #8FB894;
    --mousse:      #A8C48E;
    --btn-encre:       #0F1E14;   /* fond vert clair : encre foncee, 8,2:1 */
    --btn-clair-encre: #0F1E14;   /* fond ivoire    : encre foncee, 14:1   */
    --trace:       #E8875B;
    --trace-vif:   #C0512A;
    --trace-pale:  #2C2019;

    --terre:       #1D3227;
    --terre-trait: #4E6B58;
    --bordure:     rgba(234, 239, 232, .14);
    --bordure-2:   rgba(234, 239, 232, .07);
    --sur-foret-bord: rgba(234, 241, 227, .2);
    --voile:       rgba(8, 14, 11, .62);

    --ombre:    0 1px 2px rgba(0, 0, 0, .3), 0 18px 44px -32px rgba(0, 0, 0, .9);
    --ombre-xl: 0 2px 4px rgba(0, 0, 0, .35), 0 42px 80px -48px rgba(0, 0, 0, 1);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -.014em; }
h4 { font-size: 1.05rem; letter-spacing: -.008em; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--trace); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--encre); }

img, svg { max-width: 100%; }
img { display: block; height: auto; }

::selection { background: var(--trace-vif); color: #fff; }

:focus-visible {
  outline: 2px solid var(--trace-vif);
  outline-offset: 3px;
  border-radius: 4px;
}

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--foret-2); color: var(--btn-encre);
  padding: 14px 22px; border-radius: 0 0 var(--r-champ) 0;
  z-index: 200; font-weight: 600;
}
.saut-contenu:focus { left: 0; top: 0; color: var(--btn-encre); }

.cache-visuellement {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ STRUCTURE */
.bloc { padding-block: var(--section); position: relative; overflow: hidden; }
.bloc-court { padding-block: clamp(42px, 4.6vw, 72px); position: relative; overflow: hidden; }

.cadre {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.cadre-lire { max-width: calc(var(--max-lire) + var(--gouttiere) * 2); }

.ton-2    { background: var(--fond-2); }
.ton-foret { background: var(--foret); color: var(--sur-foret); }
.ton-foret h1, .ton-foret h2, .ton-foret h3 { color: var(--sur-foret); }
.ton-foret p { color: var(--sur-foret-2); }
.ton-foret a:not(.btn) { color: var(--sur-foret); }

/* ------------------------------------------------------------- ETIQUETTE */
/* Le petit label au-dessus d'un titre. Volontairement rare : deux sur toute
   la page d'accueil, pas un par section. */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--trace);
  margin-bottom: 20px;
}
.etiquette::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
}
.ton-foret .etiquette { color: var(--mousse); }

.intro {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--encre-doux);
  max-width: 54ch;
}
.ton-foret .intro { color: var(--sur-foret-2); }

.tete { margin-bottom: clamp(28px, 3vw, 46px); }
.tete p { margin-top: 4px; }

/* -------------------------------------------------------------- BOUTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--texte);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--sortie), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn:active { transform: scale(.975); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-plein { background: var(--foret-2); color: var(--btn-encre); }
.btn-plein:hover { background: var(--encre); color: var(--fond); transform: translateY(-2px); box-shadow: var(--ombre); }

.btn-trace { background: var(--trace-vif); color: #fff; }
.btn-trace:hover { background: var(--trace); color: #fff; transform: translateY(-2px); box-shadow: var(--ombre); }

.btn-ligne { background: transparent; color: var(--encre); border-color: var(--bordure); }
.btn-ligne:hover { background: var(--encre); color: var(--fond); border-color: var(--encre); transform: translateY(-2px); }

.btn-clair { background: var(--sur-foret); color: var(--btn-clair-encre); }
.btn-clair:hover { background: var(--foret-2); color: var(--btn-encre); transform: translateY(-2px); }

.btn-fantome { background: transparent; color: var(--sur-foret); border-color: var(--sur-foret-bord); }
.btn-fantome:hover { background: rgba(255, 255, 255, .12); color: var(--sur-foret); border-color: var(--sur-foret); transform: translateY(-2px); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
}
.lien-fleche svg { width: 15px; height: 15px; transition: transform .35s var(--sortie); }
.lien-fleche:hover svg { transform: translate(3px, -3px); }

/* ------------------------------------------------------------ NAVIGATION */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--fond) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .35s, background-color .35s;
}
.entete.posee {
  border-bottom-color: var(--bordure-2);
  background: color-mix(in srgb, var(--fond) 96%, transparent);
}
.entete-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--encre);
  line-height: 1.05;
  flex: none;
}
.marque-logo { flex: none; width: 46px; height: auto; display: block; }
.marque-texte { display: flex; flex-direction: column; }
.marque strong {
  font-family: var(--titre);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.marque-signature {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3em;
  letter-spacing: 0;
}
.marque-texte > span {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--encre-clair);
  margin-top: 3px;
}

/* Les couleurs du logo suivent le theme : pastille foncee sur fond clair,
   pastille claire en mode sombre et sur le pied de page vert. */
.logo-badge     { fill: var(--foret); }
.logo-j         { fill: var(--sur-foret); }
.logo-trace-fil { stroke: var(--trace-vif); }
.logo-trace     { fill: var(--trace-vif); }
.logo-point     { fill: var(--fond); }
@media (prefers-color-scheme: dark) {
  .logo-badge     { fill: var(--sur-foret); }
  .logo-j         { fill: var(--foret); }
  .logo-trace-fil { stroke: var(--trace); }
  .logo-trace     { fill: var(--trace); }
  .logo-point     { fill: var(--foret); }
}

.menu { display: flex; align-items: center; gap: 30px; }
.menu > a:not(.btn), .menu-bouton {
  position: relative;
  font-size: .88rem;
  font-weight: 500;
  color: var(--encre-doux);
  text-decoration: none;
  padding: 6px 0;
  background: none;
  border: 0;
  font-family: var(--texte);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.menu > a:not(.btn)::after, .menu-bouton::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--trace-vif);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--sortie);
}
.menu > a:not(.btn):hover, .menu-bouton:hover { color: var(--encre); }
.menu > a:not(.btn):hover::after, .menu-bouton:hover::after,
.menu > a.ici::after, .menu-bouton.ici::after { transform: scaleX(1); transform-origin: left; }
.menu > a:not(.btn).ici, .menu-bouton.ici { color: var(--encre); font-weight: 600; }
.menu .btn { font-size: .8rem; padding: 12px 22px; }
.menu-bouton svg { width: 13px; height: 13px; transition: transform .3s var(--sortie); }
.menu-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }

.deroulant { position: relative; display: flex; align-items: center; }
.panneau {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 360px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 34px;
  padding: 26px 28px 20px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-xl);
}
.panneau[hidden] { display: none; }
.panneau::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.panneau-titre {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--trace);
  margin-bottom: 10px;
}
.menu .panneau a {
  display: block;
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  padding: 5px 0;
}
.menu .panneau a::after { display: none; }
.menu .panneau a:hover { color: var(--trace); }
.menu .panneau .panneau-tout {
  grid-column: 1 / -1;
  border-top: 1px solid var(--bordure-2);
  padding-top: 13px;
  margin-top: 2px;
  font-family: var(--texte);
  font-size: .82rem;
  font-weight: 600;
  color: var(--encre-doux);
}

.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: transparent;
  position: relative;
  cursor: pointer;
}
.burger span, .burger span::before, .burger span::after {
  content: "";
  position: absolute;
  width: 16px; height: 1.5px;
  background: var(--encre);
  transition: transform .3s var(--sortie), opacity .2s;
}
.burger span { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.burger span::before { left: 0; top: -5px; }
.burger span::after  { left: 0; top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------- ICONES */
.ico { width: 20px; height: 20px; fill: currentColor; flex: none; }
.ico-sm { width: 16px; height: 16px; }

/* ----------------------------------------------------------------- HERO */
/* Ouverture sans image : c'est la typographie qui porte. Le texte est centre
   et cadre serre (20 caracteres), pour que le titre tienne sur deux lignes
   pleines plutot que de s'etaler sur toute la largeur. */
.hero-nu {
  padding-top: clamp(48px, 7vw, 104px);
  padding-bottom: clamp(44px, 5.5vw, 84px);
  text-align: center;
}
.hero-nu .cadre { max-width: 980px; }
.hero-nu h1 {
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 20ch;
  margin: 18px auto 26px;
}
.hero-nu .intro {
  max-width: 58ch;
  margin: 0 auto 36px;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
}
.hero-nu .actions { justify-content: center; }
/* Sur l'ouverture centree, le petit filet de l'etiquette se met devant le
   texte plutot que de le decaler vers la gauche. */
.hero-nu .etiquette { display: inline-flex; }
@media (max-width: 560px) {
  .hero-nu .etiquette::before { display: none; }
  .hero-nu .etiquette { letter-spacing: .1em; }
}

.hero-reperes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 48px);
  max-width: 660px;
  margin: clamp(46px, 5.5vw, 78px) auto 0;
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--bordure);
}
.hero-reperes dt {
  font-family: var(--titre);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--foret-2);
}
.hero-reperes dd {
  margin: 8px 0 0;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-clair);
}
@media (max-width: 560px) {
  .hero-reperes { gap: 20px 14px; }
  .hero-reperes dd { letter-spacing: .04em; font-size: .72rem; }
}

/* ------------------------------------------------------- BANDE DE PREUVE */
.preuve {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.preuve div { border-top: 1px solid var(--sur-foret-bord); padding-top: 22px; }
.preuve dt {
  font-family: var(--titre);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--sur-foret);
}
.preuve dd {
  margin: 10px 0 0;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mousse);
}

/* ------------------------------------------------------- DEUX COLONNES  */
.face-a-face {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
}
.face-a-face h3 {
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--bordure);
}
.liste-nette { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.liste-nette li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--encre-doux);
}
.liste-nette svg { width: 19px; height: 19px; margin-top: 2px; }
.oui svg { color: var(--foret-2); }
.non svg { color: var(--encre-clair); }
.non li { color: var(--encre-clair); }

/* ------------------------------------------------------- GRILLE DES PAYS */
.pays-grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
}
.pays-vignette { text-decoration: none; color: inherit; display: block; }
.pays-vignette figure { margin: 0; }
.pays-vignette .cadre-image {
  overflow: hidden;
  border-radius: var(--r-carte);
  background: var(--fond-2);
  margin-bottom: 16px;
}
.pays-vignette img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--fond-2);
  transition: transform .8s var(--sortie);
}
.pays-vignette:hover img { transform: scale(1.04); }
.pays-vignette figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.pays-vignette h3 { margin: 0; }
.pays-vignette .repere {
  min-width: 0;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-clair);
  flex: none;
}
.pays-vignette p { margin: 6px 0 0; font-size: .93rem; color: var(--encre-doux); }

/* Rythme : deux colonnes, la seconde decalee vers le bas. Quatre cartes,
   quatre cellules, aucune case vide. */
.pays-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 56px); }
.pays-grille > *:nth-child(even) { margin-top: clamp(28px, 6vw, 104px); }
.pays-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.pays-grille-3 > *:nth-child(even) { margin-top: 0; }

.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 22px;
  padding: 30px 0;
  border-top: 1px solid var(--bordure);
}
.etapes li:last-child { border-bottom: 1px solid var(--bordure); }
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--titre);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--trace);
  line-height: 1;
}
.etapes h3 { margin: 0 0 7px; }
.etapes p { margin: 0; color: var(--encre-doux); font-size: .97rem; }

/* ---------------------------------------------------------------- TARIF */
.tarif { text-align: center; }
.tarif-nombre {
  font-family: var(--titre);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--sur-foret);
  max-width: 20ch;
  margin: 0 auto;
}
.tarif-legende {
  font-size: .84rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mousse);
  margin: 22px 0 40px;
}
.tarif-exemples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--sur-foret-bord);
  border: 1px solid var(--sur-foret-bord);
  border-radius: var(--r-carte);
  overflow: hidden;
  max-width: 660px;
  margin: 0 auto 40px;
}
/* Les cases sont opaques : le filet clair du parent (le fond qui dessine les
   separations dans le gap) ne doit pas remonter sous le texte. En
   translucide, il eclaircissait le vert et les petits libelles tombaient a
   3,5:1. Opaques, ils passent a 6,9:1. */
.tarif-exemples div {
  background: var(--foret);
  background: color-mix(in srgb, var(--foret) 95%, #fff);
  padding: 24px 18px;
}
.tarif-exemples strong {
  display: block;
  font-family: var(--texte);
  font-size: .98rem;
  font-weight: 400;
  color: var(--sur-foret);
  line-height: 1.35;
}
.tarif-exemples span {
  display: block;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mousse);
  margin-bottom: 9px;
}
.tarif-inclus {
  list-style: none;
  margin: 0 auto 44px;
  padding: 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 32px;
  text-align: left;
}
.tarif-inclus li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: .95rem;
  color: var(--sur-foret-2);
}
.tarif-inclus svg { width: 18px; height: 18px; color: var(--mousse); margin-top: 2px; }
.tarif-mention {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--sur-foret-2);
  max-width: 52ch;
  margin: 0 auto 28px;
}

/* ------------------------------------------------------------------ FAQ */
.faq details {
  border-top: 1px solid var(--bordure);
  padding: 4px 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--bordure); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--titre);
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--trace);
  border-bottom: 1.5px solid var(--trace);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .35s var(--sortie);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details p { color: var(--encre-doux); padding-bottom: 26px; max-width: 62ch; }

/* ------------------------------------------------------------ FORMULAIRE */
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: start;
}
.form-carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  padding: clamp(26px, 3.2vw, 44px);
  box-shadow: var(--ombre);
}
.ton-foret .form-carte {
  background: rgba(255, 255, 255, .06);
  border-color: var(--sur-foret-bord);
}
.champ { margin-bottom: 18px; }
.champ label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-doux);
  margin-bottom: 8px;
}
.ton-foret .champ label { color: var(--sur-foret); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--r-champ);
  transition: border-color .25s, box-shadow .25s;
}
/* Sur fond vert, les champs sont volontairement clairs dans les deux themes :
   les couleurs sont donc fixes ici, et pas reprises des jetons. */
.ton-foret .champ input,
.ton-foret .champ select,
.ton-foret .champ textarea {
  background: #FBFBF8;
  color: #14231B;
  border-color: transparent;
}
.ton-foret .champ input::placeholder,
.ton-foret .champ textarea::placeholder { color: #5E7067; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--encre-clair); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--trace-vif);
  box-shadow: 0 0 0 3px rgba(192, 81, 42, .2);
}
.champ textarea { resize: vertical; min-height: 130px; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 18px; }

.rgpd {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--encre-doux);
  margin: 4px 0 20px;
  cursor: pointer;
}
.ton-foret .rgpd { color: var(--sur-foret-2); }
.rgpd input { width: auto; flex: none; margin-top: 3px; accent-color: var(--trace-vif); }
.retour-form {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--r-champ);
  background: var(--trace-pale);
  color: var(--trace);
  font-size: .88rem;
  font-weight: 500;
}
.ton-foret .retour-form { background: rgba(255, 255, 255, .12); color: var(--sur-foret); }

.contact-reperes { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 20px; }
.contact-reperes li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 15px; align-items: start; }
.contact-reperes svg { width: 21px; height: 21px; color: var(--trace); }
.contact-reperes .pastille {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--trace-pale);
  display: flex; align-items: center; justify-content: center;
}
.ton-foret .contact-reperes .pastille { background: rgba(255, 255, 255, .12); }
.ton-foret .contact-reperes svg { color: var(--sur-foret); }
.contact-reperes strong { display: block; font-weight: 600; margin-bottom: 2px; }
.contact-reperes span { font-size: .92rem; color: var(--encre-doux); }
.ton-foret .contact-reperes span { color: var(--sur-foret-2); }

/* ----------------------------------------------------- BANDEAU DE PAGE  */
.bandeau {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 46vh, 520px);
  overflow: hidden;
  background: var(--foret);
}
.bandeau img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bandeau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10, 22, 16, .92) 0%,
    rgba(10, 22, 16, .68) 42%,
    rgba(10, 22, 16, .3) 72%,
    rgba(10, 22, 16, .12) 100%);
}
.bandeau .cadre { position: relative; z-index: 2; padding-block: clamp(34px, 4.5vw, 58px); }
.bandeau h1 { color: #fff; margin-bottom: 14px; }
.bandeau .intro { color: rgba(255, 255, 255, .88); }
.bandeau .etiquette { color: #E9C9A4; }

/* .bandeau devant : la regle .fil des articles (plus bas) l'ecrasait */
.bandeau .fil {
  font-size: .8rem;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 16px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.bandeau .fil a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.bandeau .fil a:hover { color: #fff; text-decoration: underline; }

.entete-page { padding-block: clamp(54px, 6vw, 96px) clamp(30px, 3vw, 48px); }
.entete-page h1 { max-width: 16ch; }

/* ------------------------------------------------- FICHES D'INFORMATION */
/* Mosaique de paves arrondis, deux par ligne, teintes alternees en damier.
   Repris de l'infographie choisie par Othmane le 19/09/2026 : gros jeton
   rond vert fonce, titre en serif italique, plante du pays posee en angle.
   « Visa et vaccins » prend toute la largeur : deux colonnes de points et
   la note de source en pastille. */
.fiches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  --puce-fond: rgba(255, 255, 255, .72);
}
.fiche {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--fiche-teinte);
  border-radius: 40px 26px 40px 26px;
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 34px) clamp(28px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  transition: transform .45s var(--sortie), box-shadow .45s var(--sortie);
}
.fiche:nth-child(even) { border-radius: 26px 40px 26px 40px; }
.fiche:hover { transform: translateY(-3px); box-shadow: var(--ombre); }

/* Le decor. Deux dessins de assets/motifs/, poses en angle et rognes par le
   pave. z-index negatif : ils passent au-dessus du fond de la fiche mais
   sous son texte, sans jamais gener la lecture. */
.fiche-decor {
  position: absolute;
  z-index: -1;
  color: var(--fiche-accent);
  opacity: .24;
  pointer-events: none;
}
.fiche-decor svg { width: 100%; height: 100%; display: block; }
.fiche-decor-a { width: 132px; height: 132px; top: -26px; right: -24px; transform: rotate(16deg); }
.fiche-decor-b { width: 172px; height: 30px; left: -36px; bottom: 18px; transform: rotate(-8deg); }
.fiche:nth-child(even) .fiche-decor-a { top: auto; bottom: -32px; right: -28px; transform: rotate(-24deg); }
.fiche:nth-child(even) .fiche-decor-b { left: auto; right: -42px; top: 26px; bottom: auto; transform: rotate(9deg); }

.fiche-tete {
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.4vw, 18px);
  margin-bottom: 14px;
}
.fiche-jeton {
  flex: none;
  width: clamp(48px, 4.4vw, 58px);
  height: clamp(48px, 4.4vw, 58px);
  border-radius: 999px;
  background: var(--foret-2);
  color: var(--sur-foret);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(22, 48, 31, .22);
}
.fiche-jeton svg { width: 26px; height: 26px; }
.fiche-tete h2 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.12; }
.fiche-intro {
  margin: 0 0 clamp(18px, 2vw, 24px);
  max-width: 54ch;
  font-size: .99rem;
  line-height: 1.6;
  color: var(--encre-doux);
}
.fiche-corps { display: grid; grid-template-columns: minmax(0, 1fr); }

.points { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 15px; }
.points-1 { grid-template-columns: minmax(0, 1fr); }
.points li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.points .pastille {
  width: 24px; height: 24px;
  color: var(--fiche-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 2px;
}
.points .pastille svg { width: 21px; height: 21px; }
.points em {
  display: block;
  font-style: normal;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fiche-accent);
  margin-bottom: 4px;
}
.points strong { display: block; font-family: var(--titre); font-size: 1.06rem; font-weight: 500; line-height: 1.25; margin-bottom: 3px; }
.points span { display: block; font-size: .92rem; line-height: 1.55; color: var(--encre-doux); }
/* La note de source prend la forme des pastilles de conseil du modele. */
.note-source {
  grid-column: 1 / -1;
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  padding: 14px clamp(18px, 2vw, 24px);
  background: var(--puce-fond);
  border-radius: 20px;
  max-width: none;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--encre-doux);
}

@media (max-width: 860px) {
  .fiches { grid-template-columns: minmax(0, 1fr); }
  .fiche, .fiche:nth-child(even) { border-radius: 30px; }
}

/* Deux teintes seulement, posees en damier : miel puis vert. */
.f-saison     { --fiche-teinte: #F6DE9C; --fiche-accent: #7C520C; }
.f-lieux      { --fiche-teinte: #DDEBDC; --fiche-accent: #2C6141; }
.f-transport  { --fiche-teinte: #DDEBDC; --fiche-accent: #2C6141; }
.f-argent     { --fiche-teinte: #F6DE9C; --fiche-accent: #7C520C; }
.f-visa       { --fiche-teinte: #F6DE9C; --fiche-accent: #7C520C; }
.f-sante      { --fiche-teinte: #DDEBDC; --fiche-accent: #2C6141; }
.f-itineraire { --fiche-teinte: #FAE6DC; --fiche-accent: #A8441F; }

@media (prefers-color-scheme: dark) {
  .fiches { --puce-fond: rgba(255, 255, 255, .09); }
  .f-saison     { --fiche-teinte: #2A2116; --fiche-accent: #E5AE5C; }
  .f-lieux      { --fiche-teinte: #17281D; --fiche-accent: #77BC90; }
  .f-transport  { --fiche-teinte: #17281D; --fiche-accent: #77BC90; }
  .f-argent     { --fiche-teinte: #2A2116; --fiche-accent: #E5AE5C; }
  .f-visa       { --fiche-teinte: #2A2116; --fiche-accent: #E5AE5C; }
  .f-sante      { --fiche-teinte: #17281D; --fiche-accent: #77BC90; }
  .f-itineraire { --fiche-teinte: #2C1D16; --fiche-accent: #E8875B; }
}

/* ------------------------------------------------------- CARTE DU VOYAGE */
/* ---------------------------------------------------------- PIED DE PAGE */
.pied { background: var(--foret); color: var(--sur-foret); padding-block: clamp(54px, 6vw, 86px) 34px; }
.pied a:not(.btn) { color: var(--sur-foret-2); text-decoration: none; }
.pied a:not(.btn):hover { color: var(--sur-foret); text-decoration: underline; }
.pied .marque { color: var(--sur-foret); }
.pied .marque-texte > span { color: var(--sur-foret-2); }
.pied .logo-badge     { fill: var(--sur-foret); }
.pied .logo-j         { fill: var(--foret); }
.pied .logo-trace-fil { stroke: #E58A62; }
.pied .logo-trace     { fill: #E58A62; }
.pied .logo-point     { fill: var(--foret); }
.pied-phrase {
  margin-top: 18px;
  max-width: 32ch;
  font-size: .93rem;
  color: var(--sur-foret-2);
}
.pied-grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: 44px;
}
.pied h4 {
  font-family: var(--texte);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mousse);
  margin-bottom: 16px;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .93rem; }
.pied-bas {
  border-top: 1px solid var(--sur-foret-bord);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: var(--sur-foret-2);
}
.pied-bas ul { display: flex; flex-wrap: wrap; gap: 22px; font-size: .82rem; }

/* ------------------------------------------------------ BARRE MOBILE CTA */
.barre-pouce {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  gap: 10px;
  padding: 11px var(--gouttiere) calc(11px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fond) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--bordure);
}
.barre-pouce .btn { flex: 1; padding: 14px 12px; font-size: .82rem; }

/* ------------------------------------------------------- PAGES DE TEXTE */
.texte-legal { max-width: 74ch; }
.texte-legal h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 2em; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal ul { padding-left: 1.1em; color: var(--encre-doux); }
.texte-legal li { margin-bottom: .5em; }
.texte-legal mark { background: var(--trace-pale); color: var(--trace); padding: 1px 6px; border-radius: 4px; }
.mention { font-size: .85rem; color: var(--encre-clair); }

/* ------------------------------------------------------------- CALENDLY */
.calendly-cadre {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  overflow: hidden;
  box-shadow: var(--ombre);
  min-height: 640px;
}
.calendly-repli { padding: clamp(40px, 6vw, 80px) var(--gouttiere); text-align: center; }
.calendly-repli h2 { margin-bottom: 14px; }
.calendly-repli p { margin-inline: auto; }

/* --------------------------------------------------------------- 404 */
.page-404 { text-align: center; padding-block: clamp(80px, 12vw, 170px); }
.page-404 .code {
  font-family: var(--titre);
  font-size: clamp(6rem, 20vw, 15rem);
  font-weight: 500;
  line-height: .8;
  letter-spacing: -.05em;
  /* Le nombre est enorme, mais il reste du texte : il doit donc passer le
     seuil de 3:1 des grands caracteres, et non rester un filigrane. */
  color: var(--foret-clair);
  margin-bottom: 20px;
}
.page-404 .actions { justify-content: center; }
.page-404-liens { margin-top: 22px; font-size: .92rem; color: var(--encre-clair); }

/* L'adresse email est un seul mot de 31 signes : sur un telephone etroit,
   elle debordait de sa colonne. On l'autorise a se couper n'importe ou. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ------------------------------------------------- BANDEAU DES COOKIES */
/* Pose en bas a gauche sur grand ecran, en pleine largeur sur telephone,
   par-dessus la barre d'appel. Les deux boutons sont identiques : refuser
   doit etre aussi simple et aussi visible qu'accepter. */
.cookies {
  position: fixed;
  left: var(--gouttiere);
  bottom: var(--gouttiere);
  z-index: 120;
  width: min(440px, calc(100vw - 2 * var(--gouttiere)));
  padding: 22px 22px 20px;
  background: var(--carte);
  color: var(--encre);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-xl);
}
.cookies[hidden] { display: none; }
.cookies-titre {
  margin: 0 0 6px;
  font-family: var(--titre);
  font-size: 1.05rem;
  font-weight: 600;
}
.cookies-texte { margin: 0 0 16px; font-size: .88rem; line-height: 1.5; color: var(--encre-doux); }
.cookies-actions { display: flex; gap: 10px; }
.btn-choix {
  flex: 1;
  padding: 13px 18px;
  background: var(--foret-2);
  color: var(--btn-encre);
}
.btn-choix:hover { background: var(--encre); color: var(--fond); }
@media (max-width: 820px) {
  .cookies {
    left: 0; right: 0; bottom: 0;
    width: auto;
    border-radius: var(--r-carte) var(--r-carte) 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* Un bouton qui a l'allure d'un lien : « Gerer les cookies », en pied de
   page et dans la politique de confidentialite. */
.lien-bouton {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.texte-legal .lien-bouton { color: var(--trace); }

/* ------------------------------------- SERVICES TIERS EN ATTENTE D'ACCORD */
.tiers.en-attente > :not(.tiers-attente) { display: none; }
.tiers-attente { padding: clamp(18px, 2.4vw, 32px); font-size: .95rem; }
.tiers-attente p { margin: 0 0 14px; }
.tiers-attente p:last-child { margin-bottom: 0; }
.calendly-cadre:has(.en-attente),
.tally-cadre:has(.en-attente) { min-height: 0; }
.calendly-cadre .tiers-attente { text-align: center; padding-block: clamp(40px, 6vw, 80px); }

/* ------------------------------------------------------------ APPARITION */
/* L'etat cache n'existe QUE sous la classe « js », posee par une ligne dans
   l'en-tete de chaque page. Si le JavaScript ne part pas, aucune de ces
   regles ne s'applique et la page s'affiche entiere : une page sans
   animation vaut toujours mieux qu'une page vide. */
.js .apparait {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--sortie), transform .8s var(--sortie);
  transition-delay: var(--retard, 0s);
}
.js .apparait.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .apparait { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 1080px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero-grille { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero-visuel { max-width: 440px; }
  .hero-appoint { left: auto; right: -8%; bottom: -6%; width: 42%; }
  .contact-grille { grid-template-columns: minmax(0, 1fr); }
  .fiche-corps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .face-a-face { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  body { font-size: 16px; padding-bottom: 74px; }

  .menu {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gouttiere) 26px;
    background: var(--fond);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre-xl);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .menu.ouvert { display: flex; }
  .menu > a:not(.btn), .menu-bouton {
    padding: 15px 0;
    border-bottom: 1px solid var(--bordure-2);
    font-size: .98rem;
    justify-content: space-between;
  }
  .menu > a:not(.btn)::after, .menu-bouton::after { display: none; }
  .menu .btn { margin-top: 18px; padding: 15px 22px; font-size: .88rem; }
  .deroulant { display: block; }
  .panneau, .panneau[hidden] {
    display: block;
    position: static;
    transform: none;
    min-width: 0;
    padding: 14px 0 16px 14px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bordure-2);
    border-radius: 0;
    box-shadow: none;
  }
  .panneau-groupe + .panneau-groupe { margin-top: 18px; }
  .menu .panneau a { padding: 7px 0; }
  .menu .panneau .panneau-tout { margin-top: 12px; }
  .burger { display: block; }
  .barre-pouce { display: flex; }
  body:has(.menu.ouvert) .barre-pouce { display: none; }
  /* Sur la page de reservation, la barre menerait... a cette meme page. */
  body:has(#calendly) .barre-pouce { display: none; }

  .preuve { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .preuve dt { font-size: 2.6rem; }
  .tarif-exemples { grid-template-columns: minmax(0, 1fr); }
  .pied-grille { grid-template-columns: minmax(0, 1fr); }
  .etapes li { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 760px) {
  .pays-grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .pays-grille, .pays-grille-3 { grid-template-columns: minmax(0, 1fr); }
  .pays-grille > *:nth-child(even) { margin-top: 0; }
  .hero-appoint { width: 44%; right: 0; bottom: -4%; }
  .points { grid-template-columns: minmax(0, 1fr); }
  .fiche-tete { padding-inline: 18px; }
  .pied-bas { flex-direction: column; align-items: flex-start; }
}

@media print {
  .entete, .barre-pouce, .actions, .form-carte { display: none; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------ TABLEAUX LEGAUX */
.tableau-defilant {
  overflow-x: auto;
  margin: 1.7em 0;
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
}
.texte-legal table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .92rem; }
.texte-legal th, .texte-legal td {
  text-align: left;
  padding: 13px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--bordure-2);
}
.texte-legal tr:last-child td { border-bottom: 0; }
.texte-legal thead th {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--encre-clair);
  background: var(--fond-2);
  border-bottom-color: var(--bordure);
}

/* =========================================================================
   V5 - RECIT, CARTE INTERACTIVE, MOTIFS FLORAUX
   ========================================================================= */

.bloc > .cadre, .bloc-court > .cadre, .entete-page > .cadre { position: relative; z-index: 1; }

/* ------------------------------------------------------- LE RECIT ------ */
.bloc-recit { padding-block: var(--section); position: relative; overflow: hidden; }
.tete-recit { margin-bottom: clamp(30px, 3.4vw, 52px); max-width: 44ch; }

.volets { display: grid; gap: clamp(22px, 2.6vw, 40px); position: relative; z-index: 1; }

.volet {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  overflow: hidden;
  transition: transform .5s var(--sortie), box-shadow .5s var(--sortie);
}
.volet:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.volet-droite { grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); }
.volet-droite .volet-image { order: 2; }
.volet-droite .volet-texte { order: 1; }

.volet-image { overflow: hidden; align-self: stretch; }
.volet-image img {
  width: 100%; height: 100%;
  min-height: clamp(230px, 30vw, 380px);
  object-fit: cover;
  transition: transform .9s var(--sortie);
}
.volet:hover .volet-image img { transform: scale(1.04); }

.volet-texte { padding: clamp(24px, 3vw, 46px) clamp(22px, 3vw, 44px); }
.volet-lieu {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--trace);
  margin-bottom: 10px;
}
.volet-texte h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: 0 0 12px; }
.volet-texte p { color: var(--encre-doux); margin-bottom: 18px; font-size: .98rem; }

@media (max-width: 860px) {
  .volet, .volet-droite { grid-template-columns: minmax(0, 1fr); }
  .volet-droite .volet-image { order: 0; }
  .volet-droite .volet-texte { order: 1; }
  .volet-image img { min-height: 220px; }
}

/* ------------------------------------------------- L'ITINERAIRE -------- */
/* Les etapes l'une sous l'autre, reliees par un filet vertical qui part du
   centre des pastilles. Le filet s'arrete a la derniere : d'ou le ::before
   pose sur chaque <li> sauf le dernier, plutot qu'un trait sur la liste. */
.itineraire-tete {
  max-width: 52ch;
  margin-bottom: clamp(30px, 3.6vw, 52px);
}
.itineraire-tete h2 { margin-bottom: 14px; }

/* Les photos a gauche, les etapes a droite. La colonne de photos suit le
   defilement des etapes : une image sous l'autre, comme le fil de la route. */
.itineraire-duo {
  display: grid;
  /* La colonne de photos est un peu plus etroite que celle des etapes :
     sinon elle devient beaucoup plus haute et laisse un vide a droite. */
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
  position: relative;
  z-index: 1;
}
.itineraire-photos {
  display: grid;
  gap: clamp(18px, 2.4vw, 34px);
}
.vue {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-carte);
  background: var(--fond-2);
  box-shadow: var(--ombre);
}
.vue img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .9s var(--sortie);
}
.vue:hover img { transform: scale(1.04); }
/* Un leger decalage alterne : la colonne respire au lieu d'empiler
   quatre rectangles identiques. */
.vue:nth-child(even) { margin-left: clamp(0px, 2.4vw, 34px); }

@media (max-width: 900px) {
  .itineraire-duo { grid-template-columns: minmax(0, 1fr); }
  .itineraire-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vue:nth-child(even) { margin-left: 0; }
}
@media (max-width: 560px) {
  .itineraire-photos { grid-template-columns: minmax(0, 1fr); }
}

.itineraire {
  list-style: none;
  margin: 0;
  padding: 0;
}
.etape {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 20px;
  position: relative;
  padding-bottom: clamp(30px, 3.8vw, 58px);
}
.etape:last-child { padding-bottom: 0; }
.etape:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 46px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--trace-pale), var(--bordure));
}
.etape-puce {
  width: 46px; height: 46px;
  border-radius: 999px;
  background: var(--trace-vif);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.etape-corps { padding-top: 3px; }
.etape-jours {
  display: block;
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--trace);
  margin-bottom: 5px;
}
.etape-corps h3 {
  font-family: var(--titre);
  font-size: clamp(1.18rem, 1.9vw, 1.42rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 8px;
}
.etape-corps p { margin: 0; font-size: .97rem; line-height: 1.62; color: var(--encre-doux); }
.etape-vol {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--trace-pale);
  color: var(--trace);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.etape-vol svg { fill: currentColor; }

@media (max-width: 620px) {
  .etape { grid-template-columns: 38px minmax(0, 1fr); gap: 0 14px; }
  .etape-puce { width: 38px; height: 38px; font-size: 1rem; }
  .etape:not(:last-child)::before { left: 18px; top: 38px; }
}

.apres-carte {
  margin-top: clamp(30px, 3.4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.apres-carte p { margin: 0; font-size: .94rem; color: var(--encre-clair); max-width: 46ch; }

.faq-suite {
  margin: 28px 0 0;
  text-align: center;
  font-size: .95rem;
  color: var(--encre-clair);
}

/* ----------------------------------------------------- BANDE APPEL ----- */
.bande-appel { background: var(--trace-pale); position: relative; overflow: hidden; }
@media (prefers-color-scheme: dark) { .bande-appel { background: #241A14; } }
.bande-appel-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 3.4vw, 60px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.bande-appel-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bande-appel-actions .mention { margin: 4px 0 0; }
.btn-grand { padding: 18px 36px; font-size: .96rem; }
@media (max-width: 860px) { .bande-appel-grille { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------- TALLY ----- */
/* Le formulaire Tally ecrit toujours en encre sombre, et il n'a pas de
   theme sombre. Pose en transparence sur le vert foret, ses libelles
   devenaient illisibles (moins de 2:1). Son cadre est donc toujours clair,
   avec des couleurs fixes, en mode clair comme en mode sombre. */
.tally-cadre {
  --encre-tally: #14231B;
  background: #FBFBF8;
  color: var(--encre-tally);
  border: 1px solid rgba(20, 35, 27, .13);
  border-radius: var(--r-carte);
  padding: clamp(14px, 1.8vw, 26px);
  min-height: 420px;
  box-shadow: var(--ombre);
}
.tally-cadre iframe { display: block; width: 100%; border: 0; }
.tally-secours,
.tally-cadre .mention {
  margin: 10px 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: #44574C;
}
.ton-foret .tally-cadre p { color: var(--encre-tally); }
.ton-foret .tally-cadre .tally-secours,
.ton-foret .tally-cadre .mention { color: #44574C; }
.tally-cadre a,
.ton-foret .tally-cadre a { color: #A8441F; }
.tally-repli {
  padding: clamp(18px, 2.4vw, 32px);
  font-size: .95rem;
  line-height: 1.6;
}
.tally-repli code {
  font-size: .86em;
  background: #E3EFE1;
  padding: 2px 6px;
  border-radius: 5px;
}

/* =========================================================================
   V5 - DIRECTION EDITORIALE VEGETALE
   Tout ce qui suit a ete ajoute lors de la refonte du 18 septembre 2026.
   Les composants d'origine restent intacts au-dessus : les pages legales,
   ecrites a la main, continuent de fonctionner sans retouche.
   ========================================================================= */

/* ------------------------------------------------- L'ITALIQUE EDITORIALE */
/* Deux ou trois mots par titre, jamais plus. Le <em> est vise SANS classe :
   les <em> qui ont deja un role dans un composant (.etape-jours, les
   intitules des fiches) gardent le leur et ne deviennent pas des serifs. */
h1 > em:not([class]), h2 > em:not([class]), h3 > em:not([class]),
.serif-italique {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.07em;
  letter-spacing: -.005em;
}

/* ------------------------------------------------------- TETE CENTREE -- */
/* Le bloc titre du modele : petite etiquette, grand titre, une phrase.
   Centre, cadre court, beaucoup d'air en dessous. */
.tete-centre {
  max-width: 24ch;
  margin: 0 auto clamp(34px, 4vw, 62px);
  text-align: center;
}
.tete-centre h2 { margin-bottom: 16px; }
.tete-centre .intro { max-width: 62ch; margin-inline: auto; }
.tete-centre .etiquette::before { display: none; }
.tete-centre.large { max-width: 34ch; }

/* ----------------------------------------------------- OUVERTURE PHOTO - */
.hero-photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 84vh, 760px);
  overflow: hidden;
  background: var(--foret);
  isolation: isolate;
}
.hero-photo > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 20, 13, .93) 0%, rgba(8, 20, 13, .72) 34%,
                    rgba(8, 20, 13, .34) 66%, rgba(8, 20, 13, .28) 100%);
}
.hero-photo .cadre {
  position: relative;
  padding-block: clamp(46px, 6vw, 84px);
  width: 100%;
}
.hero-photo .etiquette { color: #E9C9A4; }
.hero-photo h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 17ch;
  margin: 0 0 22px;
}
.hero-photo .intro {
  color: rgba(255, 255, 255, .88);
  max-width: 50ch;
  margin-bottom: 34px;
}
.hero-photo .actions { margin-bottom: clamp(34px, 4vw, 54px); }

.hero-chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 46px);
  max-width: 720px;
  margin: 0;
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, .26);
}
.hero-chiffres dt {
  font-family: var(--titre);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
.hero-chiffres dd {
  margin: 8px 0 0;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}
@media (max-width: 560px) {
  .hero-photo { min-height: 620px; }
  .hero-photo .actions { flex-direction: column; align-items: stretch; }
  .hero-chiffres { gap: 16px 12px; }
  .hero-chiffres dd { letter-spacing: .03em; font-size: .68rem; }
}

/* --------------------------------------------- LES CARTES DESTINATION -- */
/* La brique du modele : une photo, un titre, trois preuves, un prix, un
   bouton. La carte entiere est le lien ; le « bouton » a l'interieur est un
   <span> et non un <a>, pour ne pas imbriquer deux liens. */
.cartes-dest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(18px, 2vw, 26px);
  align-items: stretch;
}
.carte-dest {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  overflow: hidden;
  transition: transform .5s var(--sortie), box-shadow .5s var(--sortie),
              border-color .5s;
}
.carte-dest:hover {
  transform: translateY(-4px);
  border-color: var(--foret-clair);
  box-shadow: var(--ombre);
}
.carte-dest-image { position: relative; overflow: hidden; }
.carte-dest-image img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform .9s var(--sortie);
}
.carte-dest:hover .carte-dest-image img { transform: scale(1.05); }

/* La plante signature du pays, a cote de son nom : noir, trait fin. */
.carte-dest-plante {
  display: inline-flex;
  flex: none;
  width: clamp(22px, 2vw, 27px);
  height: clamp(22px, 2vw, 27px);
  color: #14231B;
}
.carte-dest-plante svg { width: 100%; height: 100%; display: block; }

.carte-dest-corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2vw, 26px);
}
.carte-dest-corps h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
}
.carte-dest-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--encre-clair);
}
.carte-dest-meta svg { width: 15px; height: 15px; color: var(--foret-2); flex: none; }
.carte-dest-corps > p { margin: 0 0 18px; font-size: .95rem; color: var(--encre-doux); }
.carte-dest-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 18px 0 0;
  border-top: 1px solid var(--bordure-2);
  display: grid;
  gap: 11px;
}
.carte-dest-points li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--encre-doux);
}
.carte-dest-points svg { width: 16px; height: 16px; margin-top: 2px; color: var(--foret-2); }
.carte-dest-pied {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--bordure-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.carte-dest .faux-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .3s, color .3s, border-color .3s;
}
.carte-dest:hover .faux-btn {
  background: var(--foret-2);
  color: var(--btn-encre);
  border-color: var(--foret-2);
}
.carte-dest .faux-btn svg { width: 15px; height: 15px; }

/* ------------------------------------------------- LE PARCOURS EN 4 TEMPS */
/* Damier : une case de texte, une case verte avec une icone, en alternance.
   C'est le bloc « comment ca marche » du modele. */
.parcours {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--bordure);
  border-radius: var(--r-carte);
  overflow: hidden;
  background: var(--bordure);
  gap: 1px;
}
.parcours-case {
  background: var(--carte);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  min-height: clamp(200px, 20vw, 262px);
}
.parcours-case .rang {
  font-family: var(--titre);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--trace);
  margin-bottom: 14px;
}
.parcours-case h3 { margin: 0 0 12px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.parcours-case p { margin: auto 0 0; font-size: .91rem; line-height: 1.55; color: var(--encre-doux); }
.parcours-image {
  background: var(--foret);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.parcours-image svg { width: clamp(52px, 6vw, 82px); height: auto; fill: none;
  stroke: var(--mousse); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.parcours-image .ico { width: clamp(46px, 5.4vw, 72px); height: auto; fill: var(--mousse); stroke: none; }
@media (max-width: 1040px) { .parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .parcours { grid-template-columns: minmax(0, 1fr); }
  .parcours-image { min-height: 128px; padding: 18px; }
  .parcours-case { min-height: 0; }
}

/* ============================================================== LA ROUTE */
/* L'itineraire se lit par les images : une photo par etape, reliees entre
   elles par un fil pointille qui descend le long de la page. Les photos
   alternent de part et d'autre du fil, et le numero de l'etape est pose
   dessus, a la jonction. */
.route { list-style: none; margin: 0; padding: 0; position: relative; }

/* Le fil. Il part du centre de la premiere pastille et s'arrete au centre
   de la derniere : d'ou les deux ecarts en haut et en bas. */
.route::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(86px, 9vw, 130px);
  bottom: clamp(86px, 9vw, 130px);
  width: 0;
  border-left: 2px dashed var(--trace-vif);
  opacity: .5;
}

.route-etape {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(76px, 9vw, 120px) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding-bottom: clamp(30px, 4vw, 62px);
  position: relative;
}
.route-etape:last-child { padding-bottom: 0; }
/* Une etape sans photo garde sa place sur le fil, mais ne reserve pas la
   hauteur d'une image : sinon un itineraire de quatorze etapes dont dix
   sans photo laisserait de grands vides. */
.route-etape.sans-photo { padding-bottom: clamp(22px, 2.6vw, 38px); }

.route-photo { grid-column: 1; grid-row: 1; margin: 0; position: relative; }
.route-texte  { grid-column: 3; grid-row: 1; padding-left: clamp(4px, 1.4vw, 20px); }
.route-etape:nth-child(even) .route-photo { grid-column: 3; }
.route-etape:nth-child(even) .route-texte {
  grid-column: 1;
  padding-left: 0;
  padding-right: clamp(4px, 1.4vw, 20px);
  text-align: right;
}

.route-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-carte);
  background: var(--fond-2);
  box-shadow: var(--ombre);
  transition: transform .8s var(--sortie);
}
.route-etape:hover .route-photo img { transform: scale(1.02); }

/* La pastille numerotee, au centre, posee sur le fil. Les deux tirets qui
   en partent sont la « connexion » entre le fil et la photo. */
.route-numero {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  position: relative;
  z-index: 2;
  width: clamp(44px, 4.6vw, 56px);
  height: clamp(44px, 4.6vw, 56px);
  border-radius: 999px;
  background: var(--trace-vif);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--titre);
  font-size: 1.08rem;
  font-weight: 600;
  box-shadow: 0 0 0 8px var(--fond);
}
.route-numero::before, .route-numero::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(12px, 2.4vw, 34px);
  border-top: 2px dashed var(--trace-vif);
  opacity: .5;
}
.route-numero::before { right: 100%; }
.route-numero::after  { left: 100%; }

.route-jours {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--trace);
  margin-bottom: 6px;
}
.route-texte h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  margin: 0 0 10px;
}
.route-texte p { margin: 0; font-size: .97rem; line-height: 1.62; color: var(--encre-doux); max-width: 42ch; }
.route-etape:nth-child(even) .route-texte p { margin-left: auto; }
.route-etape:nth-child(even) .etape-vol { justify-content: center; }

/* En dessous de 900 px le fil passe a gauche et tout s'aligne dessous. */
@media (max-width: 900px) {
  .route::before { left: clamp(21px, 5vw, 27px); transform: none; top: 40px; bottom: 40px; }
  .route-etape {
    grid-template-columns: clamp(44px, 10vw, 56px) minmax(0, 1fr);
    align-items: start;
    gap: 0 clamp(16px, 3vw, 26px);
    padding-bottom: 34px;
  }
  .route-photo, .route-etape:nth-child(even) .route-photo { grid-column: 2; grid-row: 1; }
  .route-texte, .route-etape:nth-child(even) .route-texte {
    grid-column: 2; grid-row: 2;
    text-align: left;
    padding: 18px 0 0;
  }
  .route-etape:nth-child(even) .route-texte p { margin-left: 0; }
  .route-etape:nth-child(even) .etape-vol { justify-content: flex-start; }
  .route-numero { grid-column: 1; grid-row: 1; justify-self: start; }
  .route-numero::before { display: none; }
  .route-numero::after { width: clamp(14px, 3vw, 24px); }
  .route-photo img { aspect-ratio: 16 / 10; }
}

/* ----------------------------------------------------------- FAQ EN DUO */
.faq-duo {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(28px, 4.4vw, 76px);
  align-items: start;
}

.faq-duo h2 { margin-bottom: 16px; max-width: 14ch; }
.faq-duo .intro { margin-bottom: 26px; max-width: 38ch; }
@media (max-width: 900px) {
  .faq-duo { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------- LA BANDE D'APPEL, PHOTO */
.bande-photo {
  position: relative;
  overflow: hidden;
  background: var(--foret);
  text-align: center;
  padding-block: clamp(66px, 8vw, 118px);
  isolation: isolate;
}
.bande-photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.bande-photo::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8, 20, 13, .66), rgba(8, 20, 13, .84));
}
.bande-photo .cadre { position: relative; max-width: 820px; }
.bande-photo .etiquette { color: #E9C9A4; }
.bande-photo .etiquette::before { display: none; }
.bande-photo h2 { color: #fff; margin-bottom: 18px; }
.bande-photo .intro { color: rgba(255, 255, 255, .86); margin: 0 auto 32px; max-width: 48ch; }
.bande-photo .actions { justify-content: center; }
.bande-photo .mention { color: rgba(255, 255, 255, .62); margin-top: 22px; }
.bande-photo .mention a { color: rgba(255, 255, 255, .84); }

/* ========================================================= LES FLORAISONS */
/* Le filigrane : un feuillage tres pale, pose derriere les sections claires.
   Il est porte par un ::before pour que son opacite se regle sans toucher
   au fond de la section, et qu'il ne gene aucun texte (aria-hidden par
   nature : c'est du CSS, il n'existe pas pour un lecteur d'ecran). */
.fleuri { position: relative; }
.fleuri::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("motifs/feuillage.svg");
  background-size: 460px auto;
  background-repeat: repeat;
  opacity: .5;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) { .fleuri::before { opacity: .22; } }
.fleuri > .cadre { position: relative; z-index: 1; }

/* Le filet floral : une brindille qui separe deux sections. Rare, comme les
   etiquettes : au plus deux sur une page. */
.filet-floral {
  display: block;
  width: clamp(180px, 22vw, 260px);
  height: auto;
  margin: 0 auto clamp(26px, 3vw, 40px);
  color: var(--foret-clair);
  opacity: .85;
}
.ton-foret .filet-floral, .bande-photo .filet-floral { color: var(--mousse); }

/* La plante signature, en grand, derriere le titre d'une page pays. */
.plante-signature {
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 26vw, 360px);
  height: auto;
  color: var(--foret-clair);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 760px) { .plante-signature { opacity: .1; width: 220px; right: -60px; } }

/* La plante en petit, a cote d'un titre de section de page pays. */
.plante-titre {
  display: block;
  width: clamp(44px, 5vw, 62px);
  height: auto;
  margin: 0 auto 16px;
  color: var(--trace);
}

/* --------------------------------------------------- RETOUCHES DE DETAIL */
/* Sur fond vert sombre, le bouton ivoire devient le bouton principal. */
.ton-foret .btn-clair:hover, .bande-photo .btn-clair:hover {
  background: #fff;
  color: var(--btn-clair-encre);
  transform: translateY(-2px);
}
.bande-photo .btn-ligne {
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
}
.bande-photo .btn-ligne:hover { background: #fff; color: var(--foret); border-color: #fff; }

/* L'entete du modele : marque a gauche, liens au centre, bouton vert a
   droite. Le bouton reste vert dans les deux themes. */
.menu .btn-plein { background: var(--foret-2); color: var(--btn-encre); }

/* Sur fond vert, le fil de l'itineraire et les pastilles restent lisibles. */
.ton-foret .route::before,
.ton-foret .route-numero::before,
.ton-foret .route-numero::after { border-color: var(--mousse); }

/* Le bouton secondaire, pose sur une photo : blanc, contour blanc. */
.hero-photo .btn-ligne { color: #fff; border-color: rgba(255, 255, 255, .42); }
.hero-photo .btn-ligne:hover { background: #fff; color: var(--foret); border-color: #fff; }

/* La plante signature sur le bandeau d'une page pays : blanche et discrete,
   parce que le fond y est une photo sombre et non le creme du site. */
.bandeau .cadre { position: relative; }
.bandeau .plante-signature { color: #fff; opacity: .15; }

/* Le filet floral d'une tete centree prend la place de l'etiquette. */
.tete-centre .filet-floral + h2 { margin-top: 4px; }

/* =========================================================================
   LE BANDEAU DE PHOTOS QUI DEFILE   (accueil, apres « comment on travaille »)
   =========================================================================
   Sans JavaScript, c'est une bande d'images que l'on fait glisser au doigt.
   Avec, la photo du centre passe devant et les voisines reculent : le meme
   geste que dans un livre d'images qu'on tourne. Rien d'essentiel n'y est
   ecrit, donc rien ne se perd si l'animation ne part pas. */
.defile-bloc .tete-centre { margin-bottom: clamp(30px, 3.4vw, 48px); }

.defile {
  overflow-x: auto;                 /* le repli : on fait defiler a la main */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.defile::-webkit-scrollbar { display: none; }

.defile-piste {
  position: relative;               /* repere des calculs de position       */
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  margin: 0;
  padding-inline: var(--gouttiere);
  list-style: none;
}

.defile-vue {
  flex: none;
  width: clamp(260px, 62vw, 620px);
  scroll-snap-align: center;
}
.defile-vue img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-carte);
  background: var(--terre);         /* le temps que la photo arrive         */
}

/* --- ce que le JavaScript ajoute --------------------------------------- */
.defile.anime { overflow: hidden; }
.defile.anime .defile-piste {
  padding-inline: 0;
  will-change: transform;
  transition: transform .85s var(--sortie);
}
.defile.anime .defile-vue {
  transform: scale(.72);
  opacity: .5;
  transition: transform .85s var(--sortie), opacity .85s var(--sortie);
}
.defile.anime .defile-vue.est-actif { transform: none; opacity: 1; }
.defile.anime .defile-vue.est-actif img { box-shadow: var(--ombre-xl); }

/* --- les commandes ------------------------------------------------------ */
.defile-barre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(22px, 2.4vw, 34px);
}
.defile-points { display: flex; gap: 2px; }

/* La pastille visible fait 9 px, mais la cible tactile en fait 24 : on ne
   demande a personne de viser juste. */
.defile-point {
  width: 24px; height: 24px;
  padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%;
}
.defile-point::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bordure);
  transition: background .4s, transform .4s var(--sortie);
}
.defile-point:hover::before { background: var(--encre-clair); }
.defile-point.est-actif::before { background: var(--foret-2); transform: scale(1.25); }

.defile-pause, .defile-precedent, .defile-suivant {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0; cursor: pointer;
  color: var(--encre-doux);
  background: none;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  transition: color .4s, border-color .4s, background .4s;
}
.defile-pause:hover, .defile-precedent:hover, .defile-suivant:hover {
  color: var(--encre); border-color: var(--encre-clair);
}
.defile-pause svg, .defile-precedent svg, .defile-suivant svg { width: 14px; height: 14px; }
.defile-pause .ico-play { display: none; }
.defile-pause.est-arrete .ico-play { display: block; }
.defile-pause.est-arrete .ico-pause { display: none; }
.defile-precedent svg { transform: scaleX(-1); }   /* meme fleche, retournee */

/* =========================================================================
   LES APPARITIONS, DANS LE DETAIL
   =========================================================================
   Regle de fabrication, a respecter pour toute apparition ajoutee ici :
   on n'ecrit JAMAIS d'etat cache au repos. Tout part d'une animation
   accrochee a « .vu », la classe que le JavaScript pose quand le bloc
   arrive a l'ecran. Si le JavaScript ne part pas, aucune de ces regles ne
   s'applique et la page reste entiere : c'est la difference entre un effet
   et une panne.

   Les animations elles-memes sont neutralisees plus bas, en une fois, si
   la personne a demande moins de mouvement. */

@keyframes monte-doux   { from { opacity: 0; transform: translateY(14px); } }
@keyframes vient-serif  { from { opacity: 0; transform: translateY(7px); } }
@keyframes se-devoile   { from { clip-path: inset(0 0 0 100% round 16px); } }
@keyframes glisse-cote  { from { opacity: 0; transform: translateX(-16px); } }

/* --- Le bloc titre s'ecrit de haut en bas ------------------------------- */
/* Etiquette (ou filet floral), puis titre, puis phrase : trois temps de
   moins d'un dixieme de seconde, ce qui suffit a donner une lecture. */
.tete-centre.vu > * { animation: monte-doux .72s var(--sortie) both; }
.tete-centre.vu > *:nth-child(1) { animation-delay: .04s; }
.tete-centre.vu > *:nth-child(2) { animation-delay: .13s; }
.tete-centre.vu > *:nth-child(3) { animation-delay: .24s; }

/* Les deux ou trois mots en serif arrivent apres le reste du titre :
   c'est l'accent de la phrase, il se pose en dernier. */
.vu h1 > em:not([class]),
.vu h2 > em:not([class]) {
  display: inline-block;
  animation: vient-serif .8s var(--sortie) .34s both;
}

/* --- Les listes s'egrenent, ligne apres ligne --------------------------- */
.vu .liste-nette li,
.vu .carte-dest-points li,
.vu .tarif-inclus li,
.vu .faq details {
  animation: glisse-cote .55s var(--sortie) both;
}
.vu .liste-nette li:nth-child(1), .vu .carte-dest-points li:nth-child(1),
.vu .tarif-inclus li:nth-child(1), .vu .faq details:nth-of-type(1) { animation-delay: .18s; }
.vu .liste-nette li:nth-child(2), .vu .carte-dest-points li:nth-child(2),
.vu .tarif-inclus li:nth-child(2), .vu .faq details:nth-of-type(2) { animation-delay: .27s; }
.vu .liste-nette li:nth-child(3), .vu .carte-dest-points li:nth-child(3),
.vu .tarif-inclus li:nth-child(3), .vu .faq details:nth-of-type(3) { animation-delay: .36s; }
.vu .liste-nette li:nth-child(4), .vu .tarif-inclus li:nth-child(4),
.vu .faq details:nth-of-type(4) { animation-delay: .45s; }
.vu .liste-nette li:nth-child(5), .vu .tarif-inclus li:nth-child(5),
.vu .faq details:nth-of-type(5) { animation-delay: .54s; }
.vu .liste-nette li:nth-child(n+6), .vu .tarif-inclus li:nth-child(n+6),
.vu .faq details:nth-of-type(n+6) { animation-delay: .63s; }

/* --- Les photos se decouvrent, de gauche a droite ----------------------- */
/* On decoupe l'image (clip-path) plutot que de poser un volet colore :
   l'effet est le meme sur le creme de l'accueil comme sur le vert sombre
   d'une page pays, et le survol garde le transform pour lui. */
.vu .route-photo img,
.vu .carte-dest-image img,
.vu .defile-vue img { animation: se-devoile 1.05s var(--sortie) .1s both; }

/* --- La profondeur, pour qui a un navigateur qui sait la calculer ------- */
/* Animation pilotee par le defilement : aucune ecoute, aucun calcul en
   JavaScript, et rien du tout sur les navigateurs qui ne connaissent pas.
   C'est un supplement, jamais une condition de lecture. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes derive { from { transform: scale(1.08) translateY(-1.6%); }
                          to { transform: scale(1.08) translateY(1.6%); } }
    .hero-photo > img,
    .bande-photo > img {
      animation: derive linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* --- Moins de mouvement : tout ce qui precede s'arrete ------------------ */
@media (prefers-reduced-motion: reduce) {
  .tete-centre.vu > *,
  .vu h1 > em:not([class]), .vu h2 > em:not([class]),
  .vu .liste-nette li, .vu .carte-dest-points li,
  .vu .tarif-inclus li, .vu .faq details,
  .vu .route-photo img, .vu .carte-dest-image img, .vu .defile-vue img,
  .hero-photo > img, .bande-photo > img {
    animation: none !important;
  }
}


/* =========================================================================
   ARTICLES  (ajoute le 16 octobre 2026)
   Page liste : reprend les cartes destination. Page article : une colonne
   de lecture, des blocs courts et visuels (comparatif, check-list, cartes).
   ========================================================================= */
.art-tete { padding-block: clamp(46px, 5vw, 80px) clamp(24px, 3vw, 40px); }
.art-tete h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 24ch; margin-bottom: 20px; }
.art-tete .intro { max-width: 58ch; }
.art-meta {
  display: flex; align-items: center; gap: 8px;
  margin: 22px 0 0; font-size: .88rem; color: var(--encre-clair);
}
.art-meta svg { width: 15px; height: 15px; color: var(--foret-2); flex: none; }

.fil {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 26px; font-size: .86rem; color: var(--encre-clair);
}
.fil a { color: var(--encre-doux); text-decoration: none; }
.fil a:hover { color: var(--encre); text-decoration: underline; }

.art-hero { max-width: 1040px; padding-bottom: clamp(30px, 4vw, 56px); }
.art-hero img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-carte);
}
/* Photo en portrait : affichee entiere, centree, sans recadrage */
.art-hero-portrait img {
  aspect-ratio: 3 / 4; max-width: 460px; margin: 0 auto;
}

.art-corps { padding-bottom: clamp(48px, 6vw, 88px); }
.art-bloc { margin-top: clamp(40px, 5vw, 64px); }
.art-bloc h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); margin-bottom: 16px; }
.art-bloc p, .art-note p { color: var(--encre-doux); line-height: 1.65; margin: 0 0 14px; }
.art-bloc a, .art-note a { color: var(--foret-2); text-decoration: underline; text-underline-offset: 3px; }
.art-bloc a:hover { color: var(--encre); }

.art-essentiel {
  background: var(--fond-2);
  border-radius: var(--r-carte);
  padding: clamp(22px, 3vw, 32px);
}
.art-essentiel h2 { font-size: 1.25rem; margin: 0 0 16px; }
.art-essentiel li svg { color: var(--foret-2); }

.art-liste { margin-top: 20px; gap: 18px; }
.art-liste li { font-size: 1.02rem; }
.art-liste li strong { color: var(--encre); }
.art-liste svg { color: var(--foret-2); }

.art-photo { margin: clamp(40px, 5vw, 64px) 0 0; }
.art-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-carte);
}
.art-photo figcaption { margin-top: 10px; font-size: .86rem; color: var(--encre-clair); }

/* Galerie de photos carrees (contenu du sac) : 2 colonnes, 1 sur mobile */
.art-galerie-grille {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2.4vw, 24px); margin-top: 20px;
}
.art-galerie-grille figure { margin: 0; }
.art-galerie-grille img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-carte);
}
.art-galerie-grille figcaption { margin-top: 8px; font-size: .86rem; color: var(--encre-clair); }
@media (max-width: 520px) { .art-galerie-grille { grid-template-columns: 1fr; } }

/* Les icones rondes, reprises des fiches */
.art-jeton {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--foret); color: var(--sur-foret);
}
.art-jeton svg { width: 20px; height: 20px; }

.art-cartes {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.art-carte {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--r-carte); padding: 22px;
}
.art-carte h3 { font-size: 1.12rem; margin: 14px 0 8px; }
.art-carte p { margin: 0; font-size: .95rem; }

.art-groupes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.art-groupe {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--r-carte); padding: 22px;
}
.art-groupe:last-child:nth-child(odd) { grid-column: 1 / -1; }
.art-groupe h3 { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; margin: 0 0 16px; }
.art-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.art-groupe li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px;
  font-size: .95rem; line-height: 1.5; color: var(--encre-doux);
}
.art-groupe li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--foret-2); }

.art-comparatif {
  width: 100%; margin-top: 22px; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--bordure); border-radius: var(--r-carte); overflow: hidden;
  background: var(--carte); font-size: .95rem;
}
.art-comparatif thead th {
  background: var(--foret); color: var(--sur-foret);
  text-align: left; font-weight: 600; padding: 14px 18px;
}
.art-comparatif tbody th, .art-comparatif td {
  text-align: left; vertical-align: top; padding: 14px 18px;
  border-top: 1px solid var(--bordure-2); line-height: 1.45;
}
.art-comparatif tbody th { color: var(--encre); font-weight: 600; width: 22%; }
.art-comparatif td { color: var(--encre-doux); }
.art-comparatif tbody tr:nth-child(even) { background: var(--fond); }

.art-note {
  margin-top: clamp(40px, 5vw, 64px);
  border-left: 3px solid var(--trace-vif);
  background: var(--trace-pale); color: #3a2418;
  border-radius: 0 var(--r-carte) var(--r-carte) 0;
  padding: 22px 24px;
}
.art-note h2 { font-size: 1.15rem; margin: 0 0 8px; color: #3a2418; }
.art-note p { margin: 0; color: #3a2418; }

.art-pas { list-style: none; counter-reset: pas; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.art-pas li {
  counter-increment: pas; position: relative;
  padding: 4px 0 4px 62px; min-height: 44px;
}
.art-pas li::before {
  content: counter(pas);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--trace-vif); color: #fff; font-weight: 600;
}
.art-pas h3 { font-size: 1.08rem; margin: 0 0 4px; }
.art-pas p { margin: 0; font-size: .95rem; }

@media (max-width: 720px) {
  .art-cartes, .art-groupes { grid-template-columns: minmax(0, 1fr); }
  .art-comparatif, .art-comparatif tbody, .art-comparatif tr,
  .art-comparatif th, .art-comparatif td { display: block; width: auto; }
  .art-comparatif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .art-comparatif tbody th { background: var(--fond-2); width: auto; border-top: 1px solid var(--bordure); }
  .art-comparatif td { border-top: 0; padding-block: 8px; }
  .art-comparatif td::before {
    content: attr(data-label); display: block;
    font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--encre-clair); margin-bottom: 2px;
  }
  .art-comparatif tbody tr:nth-child(even) { background: transparent; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .art-note,
  :root:not([data-theme="light"]) .art-note h2,
  :root:not([data-theme="light"]) .art-note p { color: var(--encre); }
  :root:not([data-theme="light"]) .art-note { background: rgba(192, 81, 42, .16); }
}

/* Menu deroulant « Articles » : une seule colonne, aligne sur le bord droit */
@media (min-width: 821px) {
  .panneau-simple { grid-template-columns: 1fr; min-width: 270px; gap: 2px; padding: 18px 24px 14px; left: auto; right: -24px; transform: none; }
  .panneau-simple a { white-space: nowrap; }
  .panneau-simple .panneau-tout { margin-top: 6px; }
}

/* Page « Articles » : les cartes doivent apparaitre sans defiler */
.entete-page-court { padding-block: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 26px); }
.entete-page-court h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 22ch; }
.entete-page-court .intro { margin-bottom: 0; }
.bloc-haut { padding-top: clamp(14px, 2vw, 24px); }