/* ==========================================================================
   Terre Beldi — proposition de landing page
   Feuille de styles unique, commentée en français.
   Aide Numérique 37 · aidenumerique37.fr
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées (aucune requête vers Google)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/jost-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: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/jost-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;
}
/* Young Serif : une antique chaleureuse, aux empattements épais et légèrement
   rustiques. Elle évoque la main et la matière — c'est ce que vend la maison. */
@font-face {
  font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/young-serif-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: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/young-serif-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;
}

/* --------------------------------------------------------------------------
   2. Jetons de design
   Le bleu vient du logo (#0224CC) : c'est le bleu Majorelle de Marrakech.
   Les neutres sont chauds — terre cuite, sable, laine écrue.
   -------------------------------------------------------------------------- */
:root {
  --bleu:        #0224CC;
  --bleu-clair:  #2E4BE8;
  --bleu-nuit:   #060F3D;
  --sable:       #F6F1E8;
  --sable-fonce: #EBE2D3;
  --creme:       #FDFBF7;
  --terre:       #A94E2B;
  --or:          #B98A32;
  --encre:       #16130F;
  --encre-doux:  #57504A;
  --ligne:       #DFD5C4;
  --blanc:       #FFFFFF;

  --serif: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Échelle typographique fluide : jamais de texte sous 16 px. */
  --t-micro: 0.875rem;                /* 14 px — plancher des étiquettes secondaires */
  --t-petit: 1rem;                    /* 16 px — plancher du corps de texte */
  --t-corps: clamp(1.0625rem, 0.28vw + 1rem, 1.1875rem);
  --t-intro: clamp(1.1875rem, 0.6vw + 1.05rem, 1.5rem);
  --t-h3:    clamp(1.375rem, 0.8vw + 1.2rem, 1.75rem);
  --t-h2:    clamp(2rem, 3vw + 1.2rem, 3.75rem);
  --t-h1:    clamp(2.75rem, 7vw + 0.6rem, 6.5rem);

  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --large:     min(1240px, 100% - var(--gouttiere) * 2);
  --etroit:    min(760px, 100% - var(--gouttiere) * 2);
  --section:   clamp(4.5rem, 9vw, 9rem);

  --rayon:     14px;
  --rayon-l:   22px;
  --ombre:     0 1px 2px rgba(22,19,15,.05), 0 8px 24px -12px rgba(22,19,15,.18);
  --ombre-l:   0 2px 6px rgba(22,19,15,.06), 0 30px 60px -30px rgba(22,19,15,.34);
  --transition: 420ms cubic-bezier(.22,.68,.24,1);
  --ressort:    620ms cubic-bezier(.2,.9,.25,1.06);
}

/* --------------------------------------------------------------------------
   3. Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: 1.65;
  color: var(--encre);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }
:where(h1, h2, h3, h4) { line-height: 1.05; font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }
/* Sans cette règle, un display: flex/grid déclaré plus bas l'emporte sur
   l'attribut hidden et l'élément « caché » reste visible. */
[hidden] { display: none !important; }

/* Cible de focus toujours visible : exigence d'accessibilité. */
:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 4px;
}

.lecteur-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saut-contenu {
  position: absolute; left: 50%; translate: -50% -120%;
  z-index: 200; background: var(--bleu); color: #fff;
  padding: .9rem 1.5rem; border-radius: 0 0 var(--rayon) var(--rayon);
  transition: translate var(--transition);
}
.saut-contenu:focus { translate: -50% 0; }

/* --------------------------------------------------------------------------
   4. Le losange berbère, coupé en deux dans la verticalité
   La moitié droite du motif se cale sur le bord gauche du site, la moitié
   gauche sur le bord droit : les deux pointes rentrent vers le contenu.
   Fixe, décoratif, jamais cliquable, retiré sous 1100 px.
   -------------------------------------------------------------------------- */
.losange-bord {
  position: fixed;
  top: 50%;
  translate: 0 -50%;
  /* Assez étroit pour tenir dans la gouttière sur grand écran : le contenu
     est plafonné à 1240 px, la marge grandit avec la fenêtre. */
  width: clamp(80px, 8.5vw, 170px);
  color: var(--bleu);
  opacity: .10;
  /* Au-dessus des fonds de section, sous l'en-tête et les panneaux : le motif
     reste visible d'un bout à l'autre de la page, comme une image fixe. */
  z-index: 3;
  pointer-events: none;
  animation: losange-entree 1.5s var(--ressort) .5s both;

  /* Le motif est appliqué en masque, pas en image de contenu : un SVG chargé
     par une balise image ne peut pas hériter de la couleur du texte. En masque,
     la teinte reste pilotée par le CSS — et bascule en clair sur fond sombre. */
  aspect-ratio: 1 / 2;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
}
.losange-bord--gauche {
  left: 0; transform-origin: left center;
  -webkit-mask-image: url('losange-gauche.svg');
          mask-image: url('losange-gauche.svg');
}
.losange-bord--droite {
  right: 0; transform-origin: right center;
  -webkit-mask-image: url('losange-droite.svg');
          mask-image: url('losange-droite.svg');
}
.losange-bord--gauche { animation-name: losange-entree-g; }
.losange-bord--droite { animation-name: losange-entree-d; }

@keyframes losange-entree-g {
  from { opacity: 0; translate: -55% -50%; }
  to   { opacity: .10; translate: 0 -50%; }
}
@keyframes losange-entree-d {
  from { opacity: 0; translate: 55% -50%; }
  to   { opacity: .10; translate: 0 -50%; }
}
/* Sur les sections sombres, le motif passe en clair. */
.losange-bord.est-sombre { color: var(--sable); opacity: .16; }

@media (max-width: 1100px) { .losange-bord { display: none; } }

/* --------------------------------------------------------------------------
   5. Mise en page générique
   -------------------------------------------------------------------------- */
.enveloppe { width: var(--large); margin-inline: auto; }
.enveloppe-etroite { width: var(--etroit); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; z-index: 1; }
.section--sable { background: var(--sable); }
.section--nuit  { background: var(--bleu-nuit); color: var(--sable); }
.section--bleu  { background: var(--bleu); color: #fff; }

.oeil {                                    /* surtitre en petites capitales */
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terre);
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: 1.1rem;
}
.oeil::before {
  content: ''; width: 26px; height: 1px; background: currentColor; opacity: .5;
}
.section--nuit .oeil, .section--bleu .oeil, .voyage .oeil { color: var(--or); }

.titre-section {
  font-family: var(--serif);
  font-size: var(--t-h2);
  letter-spacing: -.015em;
  max-width: 20ch;
}
/* Young Serif n'a pas d'italique dessiné : l'accent se fait par la couleur,
   jamais par une italique synthétique — qui déforme les empattements. */
.titre-section em { font-style: normal; color: var(--bleu); }
.section--nuit .titre-section em, .section--bleu .titre-section em,
.voyage .titre-section em { color: var(--or); }

.chapeau {
  font-size: var(--t-intro);
  line-height: 1.5;
  color: var(--encre-doux);
  max-width: 56ch;
  margin-top: 1.3rem;
}
.section--nuit .chapeau, .section--bleu .chapeau,
.voyage .chapeau { color: rgba(246,241,232,.78); }

.entete-section { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */
.bouton {
  --fond: var(--bleu); --texte: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 54px;                        /* cible tactile confortable */
  padding: .95rem 1.9rem;
  background: var(--fond); color: var(--texte);
  border-radius: 100px;
  font-size: var(--t-petit); font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform 260ms var(--ressort), box-shadow var(--transition), background var(--transition);
  box-shadow: 0 1px 2px rgba(2,36,204,.2), 0 10px 24px -12px rgba(2,36,204,.5);
}
.bouton::after {                            /* halo qui balaie au survol */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  translate: -110% 0; transition: translate 720ms cubic-bezier(.3,.7,.2,1);
}
.bouton:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(2,36,204,.2), 0 18px 34px -14px rgba(2,36,204,.6); }
.bouton:hover::after { translate: 110% 0; }
.bouton:active { transform: translateY(0) scale(.985); }
.bouton--fantome {
  --fond: transparent; --texte: currentColor;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.bouton--fantome:hover { box-shadow: inset 0 0 0 1.5px currentColor; background: rgba(22,19,15,.05); }
.section--nuit .bouton--fantome:hover, .section--bleu .bouton--fantome:hover { background: rgba(255,255,255,.1); }
.bouton--clair { --fond: #fff; --texte: var(--bleu); box-shadow: 0 10px 30px -14px rgba(0,0,0,.5); }
.bouton--large { width: 100%; }

.lien-souligne {
  text-decoration: none; font-weight: 600; font-size: var(--t-petit);
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px;                        /* cible tactile confortable */
  padding-block: .6rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--transition);
}
.lien-souligne:hover { background-size: 30% 1.5px; }
.lien-souligne svg { transition: translate var(--transition); }
.lien-souligne:hover svg { translate: 4px 0; }

/* --------------------------------------------------------------------------
   7. En-tête
   -------------------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 90;
  background: rgba(253,251,247,.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.entete.est-collee { border-bottom-color: var(--ligne); }
.entete__grille {
  width: var(--large); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 86px;
}
.entete__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto;
  min-height: 44px; padding-block: .3rem; }
/* Le fichier a été recadré sur son lettrage : il portait 30 % de vide en haut
   et en bas, si bien qu'une hauteur de 46 px n'en montrait que 18. La hauteur
   déclarée ici est donc, à peu de chose près, celle de l'encre.

   Deux plafonds, et le plus bas gagne. En hauteur : 68 px dans une barre de
   86 px, marge comprise — au-delà, l'en-tête grandirait. En largeur : le menu
   et les boutons occupent 555 px qui ne se compriment pas, et l'enveloppe fait
   92vw dans cette plage ; d'où (92vw − 555px) ÷ 7,48, le rapport du fichier.
   Les 78 px retranchés couvrent aussi la barre de défilement, que `vw` compte
   et que la page n'a pas. Sans ce second plafond, le menu passe sur deux
   lignes vers 1000 px. */
.entete__logo img { width: auto; height: clamp(28px, 12.2vw - 78px, 68px); }
.entete__nav { display: flex; gap: .35rem; }
.entete__nav a {
  text-decoration: none; font-size: var(--t-petit); font-weight: 500;
  padding: .6rem .95rem; border-radius: 100px;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: background var(--transition), color var(--transition);
}
.entete__nav a:hover { background: var(--sable-fonce); }
.entete__actions { display: flex; align-items: center; gap: .4rem; }

.bouton-icone {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  transition: background var(--transition);
}
.bouton-icone:hover { background: var(--sable-fonce); }
.pastille {
  position: absolute; top: 4px; right: 2px;
  min-width: 20px; height: 20px; padding-inline: 5px;
  border-radius: 100px; background: var(--terre); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
  scale: 0; transition: scale var(--ressort);
}
.pastille.est-visible { scale: 1; }
.pastille.tressaute { animation: tressaut 520ms var(--ressort); }
@keyframes tressaut { 0%,100% { scale: 1 } 40% { scale: 1.45 } }

.entete__menu { display: none; }

/* --------------------------------------------------------------------------
   8. Premier écran
   -------------------------------------------------------------------------- */
.heros {
  position: relative;
  /* Abaissé pour que la ligne des preuves reste dans le premier écran une fois
     l'en-tête de 86 px retranché. */
  min-height: min(86svh, 800px);
  display: grid; align-items: end;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.heros__fond { position: absolute; inset: 0; z-index: -2; }
.heros__fond img { width: 100%; height: 100%; object-fit: cover; }
/* Deux voiles superposés : l'un remonte du bas pour asseoir le texte, l'autre
   vient de la gauche pour que le sur-titre doré tienne devant le ciel clair.
   La droite de la photo — la terrasse, la vue sur Marrakech — reste lisible. */
.heros__fond::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(6,15,61,.78) 0%, rgba(6,15,61,.42) 38%, rgba(6,15,61,0) 66%),
    linear-gradient(to top, rgba(6,15,61,.94) 0%, rgba(6,15,61,.6) 40%, rgba(6,15,61,.2) 70%, rgba(6,15,61,.45) 100%);
}
.heros__contenu {
  width: var(--large); margin-inline: auto;
  padding-block: clamp(1.75rem, 3.4vw, 3.25rem);
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 2.4vw, 2.4rem);
  align-items: end;
}

.heros__oeil {
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--or);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
  margin-bottom: 1rem;
}
.heros__oeil::before { content: ''; width: 30px; height: 1px; background: currentColor; }
.heros__titre {
  font-family: var(--serif);
  font-size: var(--t-h1);
  letter-spacing: -.02em;
  max-width: 15ch;
  text-shadow: 0 2px 30px rgba(6,15,61,.4);
}
.heros__titre em { font-style: normal; color: var(--or); }
.heros__texte {
  font-size: var(--t-intro); line-height: 1.5;
  max-width: 46ch; margin-top: 1.15rem; color: rgba(255,255,255,.9);
}
.heros__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.7rem; }
/* Quatre preuves étalées sur toute la largeur : chacune tient en deux lignes,
   la preuve en gras et ce à quoi elle correspond dessous. L'ancienne version
   empilait un chiffre de 48 px sur une légende ; elle coûtait 183 px de haut,
   celle-ci en coûte moitié moins, et le premier écran retrouve ses preuves. */
.heros__repères {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem clamp(1.1rem, 2.4vw, 2.4rem);
  margin-top: clamp(1.2rem, 2.4vw, 2rem);
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.22);
}
.heros__repères li {
  font-size: var(--t-petit); line-height: 1.4;
  color: rgba(255,255,255,.74);
  text-wrap: balance;
}
/* L'indice « faire défiler » occupe le coin bas-droit. Le premier écran étant
   resserré, la dernière preuve venait buter dedans : on lui réserve sa place.
   Sous 861 px l'indice disparaît, la ligne reprend toute la largeur. */
@media (min-width: 861px) {
  .heros__repères { padding-right: 6rem; }
}
.heros__repères b {
  display: block; margin-bottom: .18rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.1rem, 1.35vw, 1.5rem);
  line-height: 1.15; color: #fff; letter-spacing: -.01em;
}

/* Animation d'entrée du premier écran, séquencée */
.heros .anime { opacity: 0; translate: 0 26px; animation: monte 900ms cubic-bezier(.2,.7,.25,1) forwards; }
.heros__texte-col .anime:nth-child(1) { animation-delay: .10s }
.heros__texte-col .anime:nth-child(2) { animation-delay: .20s }
.heros__texte-col .anime:nth-child(3) { animation-delay: .32s }
.heros__texte-col .anime:nth-child(4) { animation-delay: .44s }
.heros .cadre { animation-delay: .5s }
.heros__reperes-col .anime { animation-delay: .6s }
@keyframes monte { to { opacity: 1; translate: 0 0; } }

.indice-defilement {
  position: absolute; bottom: 1.4rem; right: var(--gouttiere);
  display: grid; place-items: center; gap: .55rem;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  writing-mode: vertical-rl;
}
.indice-defilement span { display: block; width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,.6), transparent); animation: filet 2.2s ease-in-out infinite; }
@keyframes filet { 0%,100% { transform: scaleY(.35); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } }

/* --- Le cadre à l'orientale ---
   Un cadre de tableau : double filet doré, et le losange berbère du logo aux
   quatre coins. Il se cale sur le titre, au-dessus de la ligne des repères. */
/* Élargi de 35 % : 300 px devenaient 405, et 24vw deviennent 32,4vw. La
   moulure et les cabochons suivent le même facteur, sinon un grand cadre
   se retrouverait bordé d'un filet de petit cadre. */
.cadre { margin: 0; grid-area: cadre; justify-self: end; align-self: center; display: none; width: min(405px, 32.4vw); }
.cadre__bord {
  position: relative;
  padding: 15px;
  border-radius: 3px;
  background: linear-gradient(148deg, #E8CE8C 0%, var(--or) 38%, #8E6522 72%, #D8B767 100%);
  box-shadow:
    0 0 0 1px rgba(70,48,10,.55),           /* arête extérieure */
    0 26px 54px -26px rgba(6,15,61,.95);
}
.cadre__interieur {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bleu-nuit);
  /* Le filet intérieur : un liseré clair, puis une ombre portée douce. */
  box-shadow:
    0 0 0 1px rgba(232,206,140,.85),
    inset 0 0 22px rgba(6,15,61,.5);
}
.cadre__video, .cadre__interieur img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Le losange du logo, en cabochon aux quatre angles. */
.cadre__coin {
  position: absolute; width: 32px; height: 32px;
  background: linear-gradient(150deg, #F0DCA6, var(--or) 55%, #8E6522);
  -webkit-mask: url('losange.svg') no-repeat center/contain;
          mask: url('losange.svg') no-repeat center/contain;
  filter: drop-shadow(0 1px 1px rgba(70,48,10,.6));
}
.cadre__coin--hg { top: -9px; left: -9px; }
.cadre__coin--hd { top: -9px; right: -9px; }
.cadre__coin--bg { bottom: -9px; left: -9px; }
.cadre__coin--bd { bottom: -9px; right: -9px; }

.cadre__legende {
  margin-top: 1.1rem; text-align: center; white-space: nowrap;
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* ── Écrans bas ─────────────────────────────────────────────────────────────
   Un portable de 13 pouces n'offre que 800 px de haut, dont 86 pour l'en-tête.
   Le premier écran doit alors se resserrer, sinon la ligne des preuves passe
   sous la ligne de flottaison — et une preuve qu'on ne voit pas ne prouve rien.
   On rogne sur les respirations et sur le corps du texte, jamais sur le titre
   au point de le rendre timide. */
@media (min-width: 861px) and (max-height: 880px) {
  .heros__contenu { padding-block: 1.5rem; gap: 1.5rem; }
  .heros__oeil    { margin-bottom: .7rem; }
  .heros__titre   { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
  .heros__texte   { font-size: 1.0625rem; margin-top: .9rem; max-width: 54ch; }
  .heros__actions { margin-top: 1.2rem; }
  .heros__repères { margin-top: 1rem; padding-top: .9rem; }
}

/* Écrans étroits : quatre colonnes de 80 px ne se lisent pas. Deux colonnes,
   deux rangées, et le premier écran se resserre pour que les preuves restent
   au-dessus de la ligne de flottaison sur un téléphone courant. */
@media (max-width: 860px) {
  .heros__repères {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem 1.25rem;
  }
  .heros__contenu { padding-block: 1.25rem; gap: 1.1rem; }
  .heros__oeil    { margin-bottom: .65rem; }
  .heros__texte   { margin-top: .8rem; }
  .heros__actions { margin-top: 1.1rem; }
  .heros__repères { margin-top: .9rem; padding-top: .85rem; }
}
@media (max-width: 620px) {
  .heros__titre      { font-size: clamp(2.25rem, 9.5vw, 3rem); }
  .heros__texte      { font-size: 1.0625rem; }
  .heros__repères b  { font-size: 1.0625rem; }
  .heros__repères li { font-size: .9375rem; }
}

/* Tablette ou téléphone posé en paysage : peu de hauteur, et le premier écran
   doit encore montrer ses preuves. */
@media (max-width: 860px) and (max-height: 780px) {
  .heros__contenu { padding-block: 1rem; gap: .9rem; }
  .heros__titre   { font-size: clamp(2rem, 6.5vw, 2.75rem); }
  .heros__texte   { font-size: 1rem; margin-top: .65rem; }
  .heros__actions { margin-top: .9rem; }
  .heros__repères { margin-top: .75rem; padding-top: .75rem; }
}

/* Plus bas encore — un 1280 × 720, un portable posé sur un dock. Le cadre lui
   aussi doit céder : à 539 px de haut, il ne reste pas de quoi loger le texte
   et les preuves sous un en-tête de 86 px. */
@media (min-width: 861px) and (max-height: 780px) {
  .heros__contenu { padding-block: 1.1rem; gap: 1.1rem; }
  .heros__titre   { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
  .heros__texte   { font-size: 1rem; margin-top: .7rem; }
  .heros__actions { margin-top: .95rem; }
  .heros__repères { margin-top: .8rem; padding-top: .8rem; }
  .cadre          { width: min(330px, 26vw); }
  .cadre__legende { margin-top: .6rem; }
}

/* Le cadre n'apparaît que là où il y a la place — et la bande passante. */
@media (min-width: 1000px) {
  .heros__contenu {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "texte   cadre"
      "reperes reperes";
  }
  .heros__texte-col   { grid-area: texte; min-width: 0; }
  .heros__reperes-col { grid-area: reperes; }
  .cadre { display: block; }
}

/* --------------------------------------------------------------------------
   9. Bandeau de réassurance
   -------------------------------------------------------------------------- */
.reassurance { background: var(--bleu); color: #fff; padding-block: 1.4rem; position: relative; z-index: 2; }
.reassurance__liste {
  width: var(--large); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.reassurance li { display: flex; align-items: center; gap: .75rem; font-size: var(--t-petit); }
.reassurance svg { flex: none; opacity: .85; }
.reassurance b { font-weight: 600; }
.reassurance span { color: rgba(255,255,255,.72); font-size: var(--t-micro); display: block; }

/* --------------------------------------------------------------------------
   10. Le voyage — cheminement interactif du Maroc à la France
   -------------------------------------------------------------------------- */
/* `clip` et non `hidden` : `overflow: hidden` ferait de la section un conteneur
   de défilement, et la carte ne pourrait plus se fixer pendant la traversée. */
.voyage { background: var(--bleu-nuit); color: var(--sable); overflow: clip; position: relative; }
.voyage::before {                          /* trame de losanges en fond */
  content: ''; position: absolute; inset: 0; opacity: .028;
  background-image:
    linear-gradient(45deg, var(--sable) 25%, transparent 25%, transparent 75%, var(--sable) 75%),
    linear-gradient(45deg, var(--sable) 25%, transparent 25%, transparent 75%, var(--sable) 75%);
  background-size: 46px 46px; background-position: 0 0, 23px 23px;
  pointer-events: none;
}
/* --- La scène ---
   La hauteur de la scène est la longueur de défilement disponible : une
   « marche » par étape. Le bloc collant reste à l'écran pendant toute la
   traversée, si bien que le défilement fait avancer le colis au lieu de faire
   glisser la carte. La course utile vaut donc hauteur de scène moins hauteur
   d'écran — c'est exactement ce que recalcule le script. */
.voyage__scene {
  --pas: 62vh;
  height: calc(100svh + var(--etapes, 5) * var(--pas));
  position: relative;
}
.voyage__collant {
  position: sticky; top: 0;
  min-height: 100svh;
  /* La grille s'étire sur toute la hauteur : chaque colonne se centre alors
     pour son compte, et la carte ne bouge plus quand le texte de l'étape
     courante est plus court ou plus long que le précédent. */
  display: grid;
  /* En haut, la place de l'en-tête qui reste collé lui aussi. */
  padding-block: clamp(4.5rem, 9vh, 5.5rem) clamp(.75rem, 2vh, 1.5rem);
}
/* L'enveloppe est ici un simple relais : elle doit transmettre la hauteur du
   bloc collant à la grille, sinon celle-ci se règle sur son contenu. */
.voyage__collant > .enveloppe { display: grid; }
.voyage__grille {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  position: relative;
}

/* --- La carte --- */
.carte-voyage { position: relative; }
.carte-voyage svg { max-height: min(66svh, 600px); margin-inline: auto; }
.carte-voyage svg { width: 100%; height: auto; overflow: visible; }
/* Les terres : un aplat très sourd, un liseré un peu plus net pour le trait
   de côte. La carte doit rester un fond, jamais concurrencer le tracé. */
.carte__terre {
  fill: rgba(246,241,232,.13);
  stroke: rgba(246,241,232,.34);
  stroke-width: 1; stroke-linejoin: round;
}
.carte__mention {
  font-family: var(--sans); font-size: 15px; font-weight: 400;
  fill: rgba(246,241,232,.34); letter-spacing: .04em;
}
.carte__mention--fin { fill: rgba(185,138,50,.72); font-weight: 500; }
.carte__route  {
  fill: none; stroke: rgba(246,241,232,.28);
  stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 9 11;
}
/* Aucune transition sur l'avancée ni sur le colis : leur position est
   recalculée à chaque image par le script, qui lisse lui-même le mouvement.
   Une transition CSS par-dessus ne ferait qu'ajouter du retard. */
.carte__progression {
  fill: none; stroke: var(--or); stroke-width: 3.4; stroke-linecap: round;
  filter: drop-shadow(0 0 9px rgba(185,138,50,.75));
}
.carte__etiquette {
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  fill: rgba(246,241,232,.52); letter-spacing: .13em;
}

.jalon { cursor: pointer; }
/* Zone de clic invisible : sur mobile la carte est réduite, les pastilles
   dessinées ne feraient plus que 16 px. */
.jalon__zone { fill: transparent; }
.jalon__halo   { fill: var(--or); opacity: 0; transform-box: fill-box; transform-origin: center; }
.jalon__disque { fill: var(--bleu-nuit); stroke: rgba(246,241,232,.4); stroke-width: 2; transition: stroke var(--transition), fill var(--transition); }
.jalon__num    { font-family: var(--sans); font-size: 16px; font-weight: 700; fill: rgba(246,241,232,.65); text-anchor: middle; dominant-baseline: central; transition: fill var(--transition); }
.jalon:hover .jalon__disque { stroke: var(--or); }
.jalon.est-atteint .jalon__disque { fill: var(--or); stroke: var(--or); }
.jalon.est-atteint .jalon__num { fill: var(--bleu-nuit); }
.jalon.est-active .jalon__halo { opacity: .28; animation: pulsation 2.4s ease-out infinite; }
@keyframes pulsation {
  0%   { transform: scale(1);   opacity: .34; }
  70%  { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Le colis qui voyage le long du tracé */
.colis { transition: opacity 400ms ease; }
.colis__corps { fill: var(--or); }
.colis__ombre { fill: rgba(0,0,0,.35); }
/* Arrivé à Saché, le gros colis s'efface : six petits partent à sa place. */
.colis.est-parti { opacity: 0; }

/* --- L'éventail français, cinquième étape --- */
.rameau__voie {
  fill: none; stroke: rgba(246,241,232,.2);
  stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 5 8;
}
.rameau__avance {
  fill: none; stroke: var(--or); stroke-width: 2.4; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(185,138,50,.6));
}
.colis--mini { opacity: 0; transition: opacity 260ms ease; }
.colis--mini.est-visible { opacity: 1; }
.colis--mini .colis__corps { filter: drop-shadow(0 0 5px rgba(185,138,50,.8)); }

.destination { cursor: pointer; }
.destination__zone { fill: transparent; }
.destination__halo {
  fill: var(--or); opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.destination__point {
  fill: var(--bleu-nuit); stroke: rgba(246,241,232,.32); stroke-width: 2;
  transition: fill var(--transition), stroke var(--transition);
}
.destination__nom {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  fill: rgba(246,241,232,.42); letter-spacing: .02em;
  transition: fill var(--transition);
}
.destination:hover .destination__point { stroke: var(--or); }
.destination.est-livre .destination__point { fill: var(--or); stroke: var(--or); }
.destination.est-livre .destination__nom  { fill: var(--sable); }
.destination.est-livre .destination__halo { opacity: .3; animation: pulsation 2.4s ease-out infinite; }

/* --- Les étapes ---
   La colonne a une hauteur fixée : sans elle, le texte plus ou moins long de
   l'étape en cours ferait monter et descendre la carte à chaque changement. */
.etapes {
  display: grid; gap: clamp(.35rem, .8vh, .6rem);
  align-content: center;
}
.etape {
  display: grid; grid-template-columns: auto 1fr; gap: 1.15rem;
  padding: clamp(.7rem, 1.6vh, 1.15rem) 1.3rem;
  border-radius: var(--rayon);
  background: transparent;
  border: 1px solid transparent;
  text-align: left; width: 100%;
  transition: background var(--transition), border-color var(--transition);
}
.etape:hover { background: rgba(246,241,232,.05); }
.etape.est-active { background: rgba(246,241,232,.08); border-color: rgba(185,138,50,.42); }
.etape__num {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  font-size: var(--t-petit); font-weight: 700;
  background: rgba(246,241,232,.1); color: rgba(246,241,232,.65);
  transition: background var(--transition), color var(--transition);
}
.etape.est-active .etape__num { background: var(--or); color: var(--bleu-nuit); }
/* Les deux libellés sont des <span> : sans passage en bloc, le lieu et le
   titre s'enchaînent sur la même ligne. */
.etape__titre { display: block; font-size: var(--t-h3); font-family: var(--serif); line-height: 1.15; }
.etape__lieu {
  display: block;
  font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase;
  color: var(--or); font-weight: 600; margin-bottom: .35rem;
}
/* Le repli/dépli passe par grid-template-rows : c'est la seule façon d'animer
   une hauteur « auto » sans toucher aux propriétés de mise en page. */
.etape__texte {
  color: rgba(246,241,232,.72); font-size: var(--t-petit);
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--transition), opacity var(--transition);
}
.etape__texte > span { padding-top: .5rem; }
.etape__texte > span { overflow: hidden; }
.etape.est-active .etape__texte { grid-template-rows: 1fr; opacity: 1; }

.voyage__pied {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem; border-top: 1px solid rgba(246,241,232,.16);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; justify-content: space-between;
}
.voyage__delai { display: flex; align-items: center; gap: .8rem; font-size: var(--t-petit); color: rgba(246,241,232,.75); }

/* --------------------------------------------------------------------------
   11. Catalogue
   -------------------------------------------------------------------------- */
.filtres {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-bottom: 2.5rem;
}
.filtre {
  min-height: 46px; padding: .55rem 1.25rem;
  border-radius: 100px; background: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--ligne);
  font-size: var(--t-petit); font-weight: 500;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background var(--transition), box-shadow var(--transition), color var(--transition);
}
.filtre:hover { box-shadow: inset 0 0 0 1px var(--encre); }
.filtre.est-actif { background: var(--bleu); color: #fff; box-shadow: none; }
.filtre__compte { opacity: .55; font-variant-numeric: tabular-nums; }

.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
}

/* Sur les pages de gamme, le nombre de colonnes est arrêté à la construction :
   cinq tapis dans une grille de quatre laisseraient une carte seule en bas de
   page. Au-dessous de 1080 px, la grille reprend son comportement fluide.
   La classe est doublée pour passer devant `.piliers`, déclaré plus bas. */
@media (min-width: 1081px) {
  .grille-produits.grille-produits--calee,
  .piliers.piliers--calee {
    grid-template-columns: repeat(var(--colonnes, 4), minmax(0, 1fr));
  }
}

.carte-produit {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--blanc);
  border-radius: var(--rayon-l);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform var(--ressort), box-shadow var(--transition), opacity 380ms ease;
}
.carte-produit:hover { transform: translateY(-6px); box-shadow: var(--ombre-l); }
.carte-produit.est-masquee { display: none; }

.carte-produit__visuel {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sable-fonce);
}
/* Les exemplaires d'une même collection sont empilés : au survol, ils défilent
   l'un après l'autre. La rareté devient visible sans avoir à ouvrir la fiche. */
.carte-produit__vue {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 460ms ease, transform 900ms cubic-bezier(.2,.7,.25,1);
}
.carte-produit__vue.est-visible { opacity: 1; }
.carte-produit:hover .carte-produit__vue.est-visible { transform: scale(1.045); }

.carte-produit__points {
  position: absolute; left: 50%; bottom: .8rem; translate: -50% 0; z-index: 2;
  display: flex; gap: 5px;
  padding: 5px 8px; border-radius: 100px;
  background: rgba(22,19,15,.34); backdrop-filter: blur(6px);
}
.carte-produit__points span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.45);
  transition: background var(--transition), width var(--transition);
}
.carte-produit__points span.est-actif { background: #fff; width: 14px; }

.etiquette {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  padding: .35rem .8rem; border-radius: 100px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  background: rgba(253,251,247,.94); color: var(--encre);
  backdrop-filter: blur(6px);
}
.etiquette--unique { background: var(--bleu); color: #fff; }
.etiquette--rupture { background: var(--encre); color: #fff; }

.carte-produit__corps { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; gap: .55rem; }
.carte-produit__gamme { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--terre); font-weight: 600; }
.carte-produit__nom { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.12; }
.carte-produit__nom a { text-decoration: none; }
.carte-produit__nom a::after { content: ''; position: absolute; inset: 0; }  /* toute la carte devient cliquable */
.carte-produit__accroche { font-size: var(--t-petit); color: var(--encre-doux); line-height: 1.5; }
.carte-produit__pied { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.prix { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.prix small { font-size: var(--t-micro); font-weight: 400; color: var(--encre-doux); }
.carte-produit__cta {
  position: relative; z-index: 3;
  min-height: 44px; padding: .55rem 1.1rem; border-radius: 100px;
  background: var(--sable); font-size: var(--t-petit); font-weight: 600;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background var(--transition), color var(--transition);
}
.carte-produit__cta:hover { background: var(--bleu); color: #fff; }

.compte-pieces {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t-micro); color: var(--encre-doux);
}
.compte-pieces b { color: var(--bleu); font-weight: 600; }

/* --- Aperçu par gamme, sur l'accueil --- */
.gammes {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
}
.gamme {
  display: flex; flex-direction: column;
  text-decoration: none; border-radius: var(--rayon-l); overflow: hidden;
  background: var(--blanc); box-shadow: var(--ombre);
  transition: transform var(--ressort), box-shadow var(--transition);
}
.gamme:hover { transform: translateY(-6px); box-shadow: var(--ombre-l); }
.gamme__visuel { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sable-fonce); }
.gamme__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2,.7,.25,1); }
.gamme:hover .gamme__visuel img { transform: scale(1.05); }
.gamme__corps { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .35rem; }
.gamme__nom { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.15; }
.gamme__compte { font-size: var(--t-micro); color: var(--encre-doux); }

/* --- En-tête de la page boutique --- */
.entete-boutique { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.entete-boutique .titre-section { max-width: 22ch; }

/* Le chemin parcouru, en tête des pages de gamme : elles vivent sous la
   boutique, il faut pouvoir y remonter d'un clic. */
.fil-ariane {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--t-micro); color: var(--encre-doux);
  margin-bottom: 1.1rem;
}
.fil-ariane a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ligne); }
.fil-ariane a:hover { color: var(--bleu); border-bottom-color: currentColor; }
.fil-ariane [aria-current] { color: var(--encre); font-weight: 500; }

/* Les trois chiffres qui résument une gamme, sous le chapeau. */
.reperes-gamme {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--ligne);
  font-size: var(--t-petit); color: var(--encre-doux);
}
.reperes-gamme b { color: var(--encre); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. Fiche produit (panneau modal)
   -------------------------------------------------------------------------- */
.voile {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6,15,61,.55);
  backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.voile.est-ouvert { opacity: 1; visibility: visible; }

.fiche {
  position: fixed; z-index: 101;
  inset-block: 0; right: 0;
  width: min(920px, 100%);
  background: var(--creme);
  display: grid; grid-template-rows: auto 1fr;
  translate: 100% 0;
  transition: translate var(--ressort);
  box-shadow: var(--ombre-l);
}
.fiche.est-ouverte { translate: 0 0; }
.fiche__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1.2rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--ligne);
  background: rgba(253,251,247,.9); backdrop-filter: blur(10px);
}
.fiche__corps { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.fiche__grille { display: grid; grid-template-columns: 1.05fr 1fr; }
.fiche__galerie { background: var(--sable-fonce); position: relative; }
.fiche__image { aspect-ratio: 4/5; }
.fiche__image img { width: 100%; height: 100%; object-fit: cover; }
.fiche__vignettes { display: flex; gap: .5rem; padding: .8rem; flex-wrap: wrap; }
.fiche__vignette {
  width: 58px; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--transition); flex: none;
}
.fiche__vignette img { width: 100%; height: 100%; object-fit: cover; }
.fiche__vignette.est-active { box-shadow: inset 0 0 0 2px var(--bleu); }
.fiche__detail { padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1.2rem; }
.fiche__nom { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.08; }
.fiche__prix { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fiche__texte { font-size: var(--t-petit); color: var(--encre-doux); line-height: 1.62; }

.selecteur { display: grid; gap: .6rem; }
.selecteur__intitule { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--encre-doux); }
.selecteur__options { display: flex; flex-wrap: wrap; gap: .5rem; }
.piece {
  min-height: 46px; padding: .5rem 1rem; border-radius: 10px;
  background: var(--blanc); box-shadow: inset 0 0 0 1px var(--ligne);
  font-size: var(--t-petit); text-align: left;
  transition: box-shadow var(--transition), background var(--transition);
}
.piece:hover { box-shadow: inset 0 0 0 1px var(--encre); }
.piece.est-active { box-shadow: inset 0 0 0 2px var(--bleu); background: rgba(2,36,204,.05); }
.piece.est-epuisee { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.piece small { display: block; color: var(--encre-doux); font-size: 12px; }

.attributs { display: grid; gap: .1rem; border-top: 1px solid var(--ligne); padding-top: 1.1rem; }
.attributs div { display: grid; grid-template-columns: 128px 1fr; gap: 1rem; padding-block: .5rem; font-size: var(--t-petit); }
.attributs dt { color: var(--encre-doux); }
.attributs dd { margin: 0; font-weight: 500; }

.fiche__rassure { display: grid; gap: .6rem; background: var(--sable); border-radius: var(--rayon); padding: 1.1rem 1.2rem; }
.fiche__rassure li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-petit); }
.fiche__rassure svg { flex: none; margin-top: 3px; color: var(--bleu); }

/* --------------------------------------------------------------------------
   13. Panier
   -------------------------------------------------------------------------- */
.panier {
  position: fixed; z-index: 101; inset-block: 0; right: 0;
  width: min(440px, 100%);
  background: var(--creme);
  display: grid; grid-template-rows: auto 1fr auto;
  translate: 100% 0;
  transition: translate var(--ressort);
  box-shadow: var(--ombre-l);
}
.panier.est-ouvert { translate: 0 0; }
.panier__barre { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--ligne); }
.panier__titre { font-family: var(--serif); font-size: 1.6rem; }
.panier__liste { overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.3rem; display: grid; gap: 1rem; align-content: start; }
.panier__vide { display: grid; place-items: center; gap: 1rem; text-align: center; padding: 3rem 1.5rem; color: var(--encre-doux); }
.panier__vide svg { opacity: .3; }

.ligne-panier {
  display: grid; grid-template-columns: 74px 1fr auto; gap: .9rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--ligne);
  animation: ligne-entre 420ms var(--ressort) both;
}
@keyframes ligne-entre { from { opacity: 0; translate: 14px 0 } to { opacity: 1; translate: 0 0 } }
/* Le retrait glisse vers la droite puis se replie ; le repli est porté par
   grid-template-rows sur l'enveloppe, jamais par la hauteur de la ligne. */
.ligne-panier { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 260ms ease 240ms; }
.ligne-panier > * { min-width: 0; }
.ligne-panier.sort { grid-template-rows: 0fr; border-bottom-color: transparent; }
.ligne-panier.sort .ligne-panier__contenu { animation: ligne-sort 260ms ease forwards; }
@keyframes ligne-sort { to { opacity: 0; translate: 30px 0; } }
.ligne-panier img { width: 74px; aspect-ratio: 4/5; object-fit: cover; border-radius: 8px; }
.ligne-panier__nom { font-weight: 500; font-size: var(--t-petit); line-height: 1.3; }
.ligne-panier__piece { font-size: var(--t-micro); color: var(--encre-doux); }
.ligne-panier__prix { font-weight: 600; font-variant-numeric: tabular-nums; }
.quantite { display: inline-flex; align-items: center; gap: .1rem; margin-top: .5rem; background: var(--sable); border-radius: 100px; }
.quantite button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; transition: background var(--transition); }
.quantite button:hover:not(:disabled) { background: var(--sable-fonce); }
.quantite button:disabled { opacity: .3; cursor: not-allowed; }
.quantite span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--t-petit); }
.retirer { font-size: var(--t-micro); color: var(--encre-doux); text-decoration: underline; margin-top: .35rem; }
.retirer:hover { color: var(--terre); }

.panier__pied { padding: 1.2rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--ligne); background: var(--sable); display: grid; gap: .9rem; }
.panier__ligne { display: flex; justify-content: space-between; font-size: var(--t-petit); }
.panier__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.3rem; font-weight: 600; }
.jauge-port { display: grid; gap: .4rem; font-size: var(--t-micro); }
.jauge-port__piste { height: 6px; border-radius: 100px; background: var(--sable-fonce); overflow: hidden; }
/* La jauge se remplit par mise à l'échelle horizontale : aucune propriété de
   mise en page n'est animée, la barre reste fluide même sur un mobile modeste. */
.jauge-port__barre {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--bleu), var(--bleu-clair));
  border-radius: 100px;
  transform-origin: left center;
  transform: scaleX(var(--avancement, 0));
  transition: transform 620ms var(--ressort);
}

/* --------------------------------------------------------------------------
   14. Blocs éditoriaux
   -------------------------------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.duo__media { border-radius: var(--rayon-l); overflow: hidden; position: relative; box-shadow: var(--ombre-l); }
.duo__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

.piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.pilier { display: grid; gap: .8rem; align-content: start; }
.pilier__icone {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--bleu); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(2,36,204,.8);
}
.pilier h3 { font-family: var(--serif); font-size: var(--t-h3); }
.pilier p { font-size: var(--t-petit); color: var(--encre-doux); }
.section--nuit .pilier p { color: rgba(246,241,232,.72); }

.citation { font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.3; }
.citation__auteur { font-family: var(--sans); font-size: var(--t-petit); color: var(--encre-doux); margin-top: 1.2rem; letter-spacing: .06em; }
.section--nuit .citation__auteur { color: rgba(246,241,232,.65); }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.35rem 3rem 1.35rem 0; position: relative;
  font-size: var(--t-h3); font-family: var(--serif); line-height: 1.2;
  transition: color var(--transition);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--bleu); }
.faq summary::after {
  content: ''; position: absolute; right: .4rem; top: 50%;
  width: 13px; height: 13px; translate: 0 -50%;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; transition: rotate var(--transition);
}
.faq details[open] summary::after { rotate: -135deg; }
.faq__reponse { padding-bottom: 1.5rem; color: var(--encre-doux); font-size: var(--t-petit); max-width: 68ch; }
.faq details[open] .faq__reponse { animation: monte 420ms ease both; }

/* Appel final */
.final { text-align: center; display: grid; justify-items: center; gap: 1.6rem; }
.final .titre-section { max-width: 18ch; }

/* --------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */
.pied { background: var(--encre); color: rgba(246,241,232,.72); padding-block: clamp(3.5rem, 6vw, 5.5rem) 0; }
.pied__grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(1.8rem, 4vw, 3.5rem); }
.pied h3 { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--sable); margin-bottom: 1.1rem; font-weight: 600; }
.pied ul { display: grid; gap: 0; }
.pied a {
  text-decoration: none; font-size: var(--t-petit);
  transition: color var(--transition);
  min-height: 44px; display: inline-flex; align-items: center;
}
.pied a:hover { color: var(--or); }
/* 22 px après recadrage du fichier : le lettrage garde exactement la taille
   qu'il avait au pied de page avant que les marges vides ne soient retirées. */
.pied__logo img { height: 22px; width: auto; margin-bottom: 1.1rem; }
.pied__texte { font-size: var(--t-petit); max-width: 34ch; }
.pied__contact { display: grid; gap: .5rem; font-size: var(--t-petit); font-style: normal; }
.pied__contact a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; }

.pied__bas {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(246,241,232,.14);
  padding-block: 1.6rem calc(1.6rem + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
  font-size: var(--t-micro);
}
/* Signature Aide Numérique 37 */
.signature-an37 {
  display: inline-flex; align-items: center; gap: .75rem;
  text-decoration: none; padding: .5rem .9rem .5rem .5rem;
  border-radius: 100px;
  background: rgba(246,241,232,.06);
  transition: background var(--transition), transform var(--transition);
}
.signature-an37:hover { background: rgba(246,241,232,.12); transform: translateY(-1px); }
.signature-an37 img { height: 30px; width: auto; border-radius: 6px; }
.signature-an37 span { font-size: var(--t-micro); line-height: 1.3; }
.signature-an37 b { display: block; color: var(--sable); font-weight: 600; }

/* --- Réseaux sociaux --- */
.reseaux { display: flex; gap: .6rem; margin-top: 1.4rem; }
.reseaux a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .55rem 1rem;
  border-radius: 100px; text-decoration: none;
  background: rgba(246,241,232,.07);
  font-size: var(--t-micro); font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.reseaux a:hover { background: rgba(246,241,232,.16); color: var(--or); }
.entete__reseau { color: inherit; text-decoration: none; }
.menu-mobile__reseaux {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .7rem; margin-top: 1.6rem;
  max-width: 100%; padding-inline: var(--gouttiere);
}
/* Sélecteur renforcé : la règle générale « .menu-mobile a » vient plus bas
   dans la feuille et impose sinon sa typographie de 30 px. */
.menu-mobile .menu-mobile__reseaux a {
  font-family: var(--sans); font-size: var(--t-petit); font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.2rem; border-radius: 100px;
  background: var(--sable); color: var(--encre);
  opacity: 1; translate: none; animation: none;
}

/* --- Bloc « les arrivages » ---
   Un encart plutôt qu'une section pleine largeur : il se place aussi bien après
   une bande sombre (l'accueil) qu'après une grille claire (la boutique), sans
   se confondre avec sa voisine. */
.arrivages {
  display: grid; grid-template-columns: 1.35fr auto;
  gap: clamp(1.8rem, 4vw, 4rem); align-items: center;
  background: var(--bleu-nuit); color: var(--sable);
  border-radius: var(--rayon-l);
  padding: clamp(2rem, 4vw, 3.4rem);
  position: relative; overflow: hidden;
}
.arrivages::before {                       /* trame de losanges, comme le voyage */
  content: ''; position: absolute; inset: 0; opacity: .04; pointer-events: none;
  background-image:
    linear-gradient(45deg, var(--sable) 25%, transparent 25%, transparent 75%, var(--sable) 75%),
    linear-gradient(45deg, var(--sable) 25%, transparent 25%, transparent 75%, var(--sable) 75%);
  background-size: 44px 44px; background-position: 0 0, 22px 22px;
}
.arrivages > * { position: relative; }
.arrivages .oeil { color: var(--or); }
.arrivages .titre-section em { font-style: normal; color: var(--or); }
.arrivages .chapeau { color: rgba(246,241,232,.78); }
.arrivages__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.arrivages .titre-section { max-width: 17ch; }

/* --------------------------------------------------------------------------
   16. Révélation au défilement
   -------------------------------------------------------------------------- */
.reveler { opacity: 0; translate: 0 30px; transition: opacity 800ms cubic-bezier(.2,.7,.25,1), translate 800ms cubic-bezier(.2,.7,.25,1); }
.reveler.est-visible { opacity: 1; translate: 0 0; }
.reveler[data-retard="1"] { transition-delay: 90ms }
.reveler[data-retard="2"] { transition-delay: 180ms }
.reveler[data-retard="3"] { transition-delay: 270ms }
.reveler[data-retard="4"] { transition-delay: 360ms }

/* Notification discrète après ajout au panier */
.toast {
  position: fixed; z-index: 120;
  left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom));
  translate: -50% 150%;
  background: var(--encre); color: var(--sable);
  padding: .9rem 1.4rem; border-radius: 100px;
  font-size: var(--t-petit); font-weight: 500;
  display: flex; align-items: center; gap: .65rem;
  box-shadow: var(--ombre-l);
  transition: translate var(--ressort);
  max-width: calc(100% - 2rem);
}
.toast.est-visible { translate: -50% 0; }
.toast svg { color: #6ee7a8; flex: none; }

/* --------------------------------------------------------------------------
   17. Adaptations écran
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .gammes { grid-template-columns: repeat(2, 1fr); }
  .arrivages { grid-template-columns: 1fr; }
  .voyage__grille { grid-template-columns: 1fr; gap: 1.5rem; }
  .carte-voyage { order: -1; }
  .carte-voyage svg { max-height: 38svh; }
  /* Écran étroit : les cinq étapes ne tiennent pas côte à côte avec la carte
     dans une seule hauteur d'écran. On les empile donc dans la même case, et
     seule celle en cours est visible. */
  .etapes { grid-template-areas: 'pile'; align-content: start; }
  .etape {
    grid-area: pile; opacity: 0; pointer-events: none;
    transition: opacity 320ms ease;
  }
  .etape.est-active { opacity: 1; pointer-events: auto; }
  /* Toutes gardent leur texte déplié, y compris celles qu'on ne voit pas : la
     case se règle alors sur la plus longue une fois pour toutes, et la carte
     ne remonte plus d'une étape à l'autre. */
  .etapes .etape__texte { grid-template-rows: 1fr; opacity: 1; }
  .fiche__grille { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr; }
  .duo__media { max-width: 520px; }
}

@media (max-width: 860px) {
  /* Le menu disparaît : la barre se dégage entièrement, il ne reste que deux
     boutons à droite. Le lettrage reprend la place que le calcul ci-dessus,
     taillé pour un menu visible, lui refusait. */
  .entete__logo img { height: 56px; }
  .entete__nav { display: none; }
  .entete__reseau { display: none; }   /* repris dans le menu plein écran */
  .entete__menu { display: grid; }
  .reassurance__liste { grid-template-columns: repeat(2, 1fr); gap: .9rem 1.2rem; }
  .heros { min-height: min(88svh, 720px); }
  .indice-defilement { display: none; }
}

@media (max-width: 760px) {
  .carte__etiquette { font-size: 26px; }
  .carte__mention   { font-size: 22px; }
  .carte__mention:not(.carte__mention--fin) { display: none; }
  .jalon__num       { font-size: 24px; }
  .jalon__disque, .jalon__halo { r: 22px; }
  .destination__nom   { font-size: 23px; }
  .destination__point { r: 8px; }
  .destination__halo  { r: 13px; }
}

@media (max-width: 620px) {
  .gammes { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .gamme__nom { font-size: 1.125rem; }
  /* Sur téléphone, la largeur restante après les boutons menu et panier fixe
     la limite : au-delà, le lettrage les pousserait hors de l'écran. 30 px est
     le plancher mesuré sur un écran de 390 px. */
  .entete__logo img { height: clamp(30px, 7.7vw, 56px); }
  .grille-produits { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .carte-produit__corps { padding: .9rem .9rem 1.1rem; gap: .4rem; }
  .carte-produit__nom { font-size: 1.125rem; }
  .carte-produit__accroche { display: none; }
  .carte-produit__pied { flex-direction: column; align-items: stretch; gap: .55rem; }
  .carte-produit__cta { justify-content: center; }
  .prix { font-size: 1.125rem; }
  .pied__grille { grid-template-columns: 1fr; }
  .reassurance__liste { grid-template-columns: 1fr; }
  .heros__repères { gap: 1.5rem 2rem; }
  .fiche__vignette { width: 50px; }
  .attributs div { grid-template-columns: 1fr; gap: 0; padding-block: .45rem; }
  .attributs dt { font-size: var(--t-micro); }
}

/* Le menu de navigation en plein écran, sur mobile */
.menu-mobile {
  position: fixed; inset: 0; z-index: 95;
  background: var(--creme);
  display: grid; align-content: center; justify-items: center; gap: .4rem;
  opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
}
.menu-mobile.est-ouvert { opacity: 1; visibility: visible; }
.menu-mobile a {
  font-family: var(--serif); font-size: clamp(2rem, 8vw, 3rem);
  text-decoration: none; padding: .35rem 1rem; min-height: 56px;
  display: grid; align-items: center;
  opacity: 0; translate: 0 20px;
}
.menu-mobile.est-ouvert a { animation: monte 520ms cubic-bezier(.2,.7,.25,1) forwards; }
.menu-mobile.est-ouvert a:nth-child(1) { animation-delay: .06s }
.menu-mobile.est-ouvert a:nth-child(2) { animation-delay: .12s }
.menu-mobile.est-ouvert a:nth-child(3) { animation-delay: .18s }
.menu-mobile.est-ouvert a:nth-child(4) { animation-delay: .24s }
.menu-mobile.est-ouvert a:nth-child(5) { animation-delay: .30s }
.menu-mobile__fermer { position: absolute; top: 1rem; right: var(--gouttiere); }

/* --------------------------------------------------------------------------
   18. Respect des préférences système
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveler { opacity: 1; translate: none; }
  .heros .anime { opacity: 1; translate: none; }
  .losange-bord { opacity: .10; }
  /* Plus de scène : la carte redevient un bloc ordinaire, et les étapes se
     parcourent au clic. Rien ne bouge tant qu'on ne le demande pas. */
  .voyage__scene { height: auto; }
  .voyage__collant { position: static; min-height: 0; padding-block: 0; }
}

@media print {
  .entete, .panier, .fiche, .voile, .losange-bord, .indice-defilement, .toast { display: none !important; }
  body { background: #fff; }
}