/* Rabat TukTuk. Charte du kit (leads-kits/tuktuk/kit.png): Tuk-Tuk Blue, Kasbah White, Atlantic Sand,
   Night Ink, Hassan Ochre; Fraunces (titres, nav, prix, citations) + Manrope (texte, boutons).
   Signature: the white lattice of his tuk-tuk + the dotted ochre route. Shape lock: rounded (kit UI). */

@font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-italique.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/manrope.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --bleu: #1B467E;
  --bleu-f: #12355F;
  --blanc: #F7F4EC;
  --papier: #FFFDF8;
  --sable: #EBDCC4;
  --sable-c: #F2E8D7;
  --encre: #0F1C33;
  --ocre: #B8693A;
  --ocre-f: #9A5428;
  --gris: #4E5868;
  --filet: rgba(15, 28, 51, .14);
  --wa: #1F7A4D;
  --display: "Fraunces", Georgia, serif;
  --texte: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 78px;
  --r: 16px;
  --r-s: 10px;
  --wrap: 1200px;
  --gout: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --treillis-blanc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='42'%3E%3Cpath d='M0 0C0 12 15 10 15 21C15 32 0 30 0 42M30 0C30 12 15 10 15 21C15 32 30 30 30 42' fill='none' stroke='%23F7F4EC' stroke-width='2.4'/%3E%3C/svg%3E");
  --treillis-bleu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='42'%3E%3Cpath d='M0 0C0 12 15 10 15 21C15 32 0 30 0 42M30 0C30 12 15 10 15 21C15 32 30 30 30 42' fill='none' stroke='%231B467E' stroke-width='2.4'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--blanc); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.65; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 48, "SOFT" 60; color: var(--bleu); line-height: 1.08; margin: 0; letter-spacing: -.005em; }
h1 em, h2 em { font-style: italic; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--encre); color: var(--blanc); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.saut:focus { top: 12px; }
.ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lm { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--bleu); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nobr { white-space: nowrap; }

.wrap { width: min(var(--wrap), 100%); margin: 0 auto; padding: 0 var(--gout); }
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section--sable { background: var(--sable-c); }
.tete { max-width: 640px; margin-bottom: clamp(32px, 4vw, 52px); }
.tete--centre { margin-left: auto; margin-right: auto; text-align: center; }
.tete h2 { font-size: clamp(34px, 4.4vw, 52px); }
.tete p:not(.sur) { margin-top: 14px; color: var(--gris); font-size: 18px; }
.sur { font-family: var(--texte); font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--encre); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 12px; }
.sur::before { content: ""; width: 26px; height: 2px; background: var(--ocre); border-radius: 2px; }
.tete--centre .sur::after { content: ""; width: 26px; height: 2px; background: var(--ocre); border-radius: 2px; }
.sur--clair { color: var(--blanc); }

/* ----------------------------------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent; font-family: var(--texte); font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.btn .ico { transition: transform .3s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn--bleu { background: var(--bleu); color: var(--blanc); }
.btn--bleu:hover { background: var(--bleu-f); }
.btn--ligne { border-color: var(--bleu); color: var(--bleu); background: rgba(247, 244, 236, .7); }
.btn--ligne:hover { background: var(--bleu); color: var(--blanc); }
.btn--blanc { background: var(--blanc); color: var(--bleu); }
.btn--blanc:hover { background: var(--papier); }
.btn--ocre { background: var(--ocre); color: var(--papier); }
.btn--ocre:hover { background: var(--ocre-f); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #17633e; }
.lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--bleu); text-decoration: none; border-bottom: 1.5px solid var(--sable); padding-bottom: 2px; }
.lien:hover { border-color: var(--ocre); }
.lien .ico { transition: transform .3s var(--ease); }
.lien:hover .ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------------------------- nav */
/* Every page opens on a photo (hero or banner), so the nav sits on it, see-through, with a soft
   ink fade behind the links; it turns to paper once the page scrolls or the phone menu opens. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background-color .35s, border-color .35s; }
.nav::before { content: ""; position: absolute; inset: 0 0 -48px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(15, 28, 51, .52), rgba(15, 28, 51, 0)); transition: opacity .35s; }
.nav.est-solide, .nav.menu-open { background: var(--papier); border-bottom-color: var(--filet); }
.nav.est-solide::before, .nav.menu-open::before { opacity: 0; }
/* three tracks of which the outer two are equal, so the links sit on the true centre of the page */
.nav__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; height: var(--nav-h); width: min(1320px, 100%); margin: 0 auto; padding: 0 var(--gout); }
.nav__logo { display: inline-flex; align-items: center; justify-self: start; text-decoration: none; }
.nav__logo img { height: 56px; width: auto; }
.nav__liens { display: flex; justify-content: center; gap: clamp(22px, 3vw, 44px); }
.nav__liens a { font-family: var(--display); font-variation-settings: "opsz" 24, "SOFT" 60; font-size: 17px; font-weight: 500; color: var(--encre); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: color .3s; }
.nav__liens a:hover { color: var(--bleu); }
.nav__liens a.active { color: var(--bleu); border-bottom-color: var(--ocre); }
.nav__lang-mobile { display: none; }
.nav__actions { display: flex; align-items: center; justify-self: end; gap: 14px; }
.nav__lang { font-weight: 700; font-size: 14px; letter-spacing: .08em; text-decoration: none; color: var(--encre); padding: 8px 10px; border: 1px solid var(--filet); border-radius: 999px; transition: color .3s, border-color .3s; }
.nav__lang:hover { border-color: var(--bleu); color: var(--bleu); }
.nav__cta { min-height: 46px; padding: 0 22px; }
.nav__burger { display: none; width: 46px; height: 46px; border: 1px solid var(--filet); border-radius: 50%; background: var(--papier); position: relative; }
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--encre); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 26px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }
/* on the photo */
.nav:not(.est-solide):not(.menu-open) .nav__liens a { color: var(--blanc); }
.nav:not(.est-solide):not(.menu-open) .nav__liens a:hover { color: var(--sable); }
.nav:not(.est-solide):not(.menu-open) .nav__liens a.active { color: var(--blanc); border-bottom-color: var(--sable); }
.nav:not(.est-solide):not(.menu-open) .nav__lang { color: var(--blanc); border-color: rgba(247, 244, 236, .5); }
.nav:not(.est-solide):not(.menu-open) .nav__cta { background: var(--blanc); color: var(--bleu); }
.nav:not(.est-solide):not(.menu-open) .nav__burger { background: transparent; border-color: rgba(247, 244, 236, .55); }
.nav:not(.est-solide):not(.menu-open) .nav__burger span { background: var(--blanc); }

/* -------------------------------------------------------------------------------------------- hero */
/* Hero: the photo full screen, the name and one line at the foot, cream on an ink fade, then the date bar */
.hero { position: relative; min-height: max(640px, 100svh); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; color: var(--blanc); }
.hero__photo, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__photo { z-index: -2; overflow: hidden; }
.hero__photo img { object-fit: cover; object-position: 40% 50%; animation: pose 16s var(--ease) both; }
.hero__voile { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to top, rgba(15, 28, 51, .84) 0%, rgba(15, 28, 51, .5) 28%, rgba(15, 28, 51, .1) 56%, rgba(15, 28, 51, 0) 72%),
  linear-gradient(to right, rgba(15, 28, 51, .3), rgba(15, 28, 51, 0) 55%); }
.hero__in { width: min(1320px, 100%); margin: 0 auto; padding: calc(var(--nav-h) + 40px) var(--gout) clamp(28px, 4vw, 48px); }
.hero__txt { max-width: 820px; }
.hero__txt > *, .barre { animation: monte 1s var(--ease) both; }
.hero__txt > :nth-child(2) { animation-delay: .12s; }
.hero__txt > :nth-child(3), .barre { animation-delay: .24s; }
.hero h1 { color: var(--blanc); font-size: clamp(60px, 9vw, 136px); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 40; line-height: .92; letter-spacing: -.025em; }
.hero__lead { text-wrap: balance; margin-top: 18px; font-size: clamp(17px, 1.45vw, 20px); color: rgba(247, 244, 236, .9); }
.hero__ctas { display: none; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; }
.hero__lien { color: var(--blanc); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(247, 244, 236, .6); padding-bottom: 2px; }
/* the date bar, on paper, a pill like the buttons */
.barre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; width: min(860px, 100%); margin-top: clamp(28px, 3.6vw, 44px); padding: 8px 8px 8px 0; background: var(--papier); color: var(--encre); border-radius: 999px; }
.barre__champ { display: flex; flex-direction: column; gap: 2px; padding: 6px 22px 6px 30px; min-width: 0; }
.barre__champ + .barre__champ { border-left: 1px solid var(--filet); }
.barre__champ label { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.barre__champ input, .barre__champ select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 32px; padding: 0; border: 0; background: transparent; font-family: var(--display); font-variation-settings: "opsz" 24, "SOFT" 60; font-size: 19px; font-weight: 500; color: var(--encre); cursor: pointer; }
.barre__champ select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231B467E' stroke-width='1.6'/%3E%3C/svg%3E") right center / 12px 8px no-repeat; padding-right: 20px; }
.barre__champ input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.barre__champ input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.barre__champ :focus-visible { outline: 2px solid var(--ocre); outline-offset: 4px; border-radius: 4px; }
.barre__go { min-height: 58px; padding: 0 30px; }

@keyframes pose { from { transform: scale(1.03); } to { transform: none; } }
@keyframes monte { from { transform: translateY(18px); } to { transform: none; } }

/* ---------------------------------------------------------------------------------------- the ride */
.ride { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r); overflow: hidden; }
.ride__photo { overflow: hidden; }
.ride__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 1s var(--ease); }
.ride:hover .ride__photo img { transform: scale(1.04); }
.ride__info { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 22px; }
.ride__info h3 { font-size: clamp(28px, 3vw, 36px); }
.faits { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.faits li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.faits .ico { grid-row: span 2; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--sable-c); color: var(--bleu); }
.fait__l { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); font-weight: 700; }
.faits strong { font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 24, "SOFT" 60; font-size: 18px; color: var(--encre); line-height: 1.25; }
.prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid var(--filet); color: var(--gris); }
.prix strong { font-family: var(--display); font-size: 40px; font-weight: 600; font-variation-settings: "opsz" 48, "SOFT" 60; color: var(--bleu); line-height: 1; }
.ride__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.ride__tete { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* the other rides: small cards under the featured 3 h tour (home), all four on the tours page */
.autres { margin-top: clamp(28px, 4vw, 44px); }
.autres .arrets__t { margin-bottom: 18px; }
.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.formules--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.formule { position: relative; display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r); padding: clamp(20px, 2.4vw, 28px); transition: border-color .3s var(--ease); }
.formule--top { border: 1.5px solid var(--bleu); }
.formule__tete { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.formule__lm { width: 44px; height: 44px; padding: 8px; border-radius: 50%; background: var(--sable-c); }
.formule__duree { font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 24, "SOFT" 60; font-size: 19px; color: var(--encre); }
.formule__badge { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--ocre-f); color: var(--papier); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
/* on a card, the badge sits across the top border so the four titles stay on one line */
.formule > .formule__badge { position: absolute; top: 0; left: clamp(20px, 2.4vw, 28px); translate: 0 -50%; }
.formule h3, .formule h4 { margin-top: 18px; font-size: 24px; line-height: 1.15; }
.formule__ligne { margin: 8px 0 22px; color: var(--gris); font-size: 15.5px; line-height: 1.5; }
.formule__pied { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--filet); }
.formule__prix { display: flex; align-items: baseline; gap: 6px; color: var(--gris); font-size: 14px; }
.formule__prix strong { font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 48, "SOFT" 60; font-size: 28px; color: var(--bleu); line-height: 1; }
.formule__btn { background: none; border-width: 0 0 1.5px; padding: 0 0 2px; }
@media (hover: hover) { .formule:hover { border-color: var(--bleu); } }

.arrets { margin-top: clamp(48px, 6vw, 72px); }
.arrets__t { font-size: 26px; margin-bottom: 4px; }
.route { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: 8px; }
.route__ligne { fill: none; stroke: var(--ocre); stroke-width: 3; stroke-dasharray: .5 10; stroke-linecap: round; }
.route__mask { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .trace:not(.vu) .route__mask { stroke-dashoffset: 1; }
.trace.vu .route__mask { transition: stroke-dashoffset 3.4s cubic-bezier(.45, .05, .25, 1); }
.route__depart { fill: var(--ocre); }
.route__pin circle:first-child { fill: var(--papier); stroke: var(--ocre); stroke-width: 3; }
.route__pin-c { fill: var(--ocre); }
.route__tuk { visibility: hidden; }
.trace.vu .route__tuk { visibility: visible; }
.arrets__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.arret__photo { overflow: hidden; border-radius: var(--r); margin-bottom: 16px; }
.arret__photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; transition: transform 1s var(--ease); }
.arret__txt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.arret__n { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 19px; color: var(--ocre); }
.arret h4 { font-size: 21px; line-height: 1.2; }
.arret p { grid-column: 2; margin-top: 4px; color: var(--gris); font-size: 15px; line-height: 1.45; }

/* ------------------------------------------------------------------------------------ the platforms */
.confiance { padding: 0 0 clamp(64px, 9vw, 112px); }
.confiance__panneau { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 40px; align-items: center; background: var(--encre); color: var(--blanc); border-radius: calc(var(--r) + 8px); padding: clamp(32px, 5vw, 60px); }
.confiance__panneau::after { content: ""; position: absolute; z-index: -1; right: -40px; top: -40px; width: 300px; height: 300px; background: var(--treillis-blanc); opacity: .08; border-radius: 50%; }
.confiance__txt h2 { color: var(--blanc); font-size: clamp(32px, 3.6vw, 44px); }
.confiance__txt p:not(.sur) { margin: 16px 0 26px; color: rgba(247, 244, 236, .86); max-width: 470px; }
.confiance__plateformes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plat { position: relative; display: grid; place-items: center; height: 108px; padding: 16px 22px; border-radius: var(--r); background: var(--papier); text-decoration: none; transition: transform .35s var(--ease); }
a.plat:hover { transform: translateY(-3px); }
.plat img { height: var(--h); width: auto; max-width: 100%; object-fit: contain; }
.plat .ico { position: absolute; top: 12px; right: 12px; width: 15px; height: 15px; color: var(--gris); }

/* ---------------------------------------------------------------------------------------------- why */
.pourquoi { background: var(--sable-c); }
.pourquoi__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.pourquoi__tete h2 { font-size: clamp(34px, 4vw, 48px); }
.pourquoi__tete p { margin-top: 14px; color: var(--gris); font-size: 18px; }
.pourquoi__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.pourquoi__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--papier); color: var(--bleu); margin-bottom: 16px; }
.pourquoi__ico .ico { width: 30px; height: 30px; }
.pourquoi__liste h3 { font-size: 21px; line-height: 1.2; }
.pourquoi__liste p { margin-top: 8px; color: var(--gris); font-size: 15.5px; line-height: 1.5; }

/* ------------------------------------------------------------------------------------- photo strip */
.bande-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bande-photos figure { overflow: hidden; }
.bande-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }

/* ------------------------------------------------------------------------------------------ reviews */
.avis { background: var(--encre); color: var(--blanc); position: relative; isolation: isolate; overflow: hidden; }
.avis::before { content: ""; position: absolute; z-index: -1; right: -90px; top: -90px; width: 440px; height: 440px; border-radius: 50%; background: var(--treillis-blanc); opacity: .06; }
.avis__in { text-align: center; }
.avis h2 { color: var(--blanc); font-size: clamp(34px, 4.4vw, 52px); }
.avis__guill { display: block; height: 52px; margin-top: 36px; font-family: var(--display); font-size: 132px; line-height: .8; color: var(--ocre); }
.avis__liste { max-width: 940px; margin: 10px auto 0; }
.avis__item + .avis__item { margin-top: 48px; }
.avis__item blockquote { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 72, "SOFT" 80; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.3; color: var(--blanc); text-wrap: balance; }
.avis__qui { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin-top: 26px; }
.avis__qui strong { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.avis__qui span { color: rgba(247, 244, 236, .72); font-size: 14.5px; }
/* with JS the quotes take turns in one place; without it they stay listed */
.js .avis__liste { display: grid; }
.js .avis__item { grid-area: 1 / 1; align-self: center; margin: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s .8s; }
.js .avis__item.est-active { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s; }
.avis__nav { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 40px; }
.avis__nav[hidden] { display: none; }
.avis__fl { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(247, 244, 236, .35); background: transparent; color: var(--blanc); cursor: pointer; transition: background-color .3s, color .3s; }
.avis__fl:hover { background: var(--blanc); color: var(--encre); }
.avis__fl--prec .ico { transform: rotate(180deg); }
.avis__compte { min-width: 54px; font-size: 14px; letter-spacing: .14em; color: rgba(247, 244, 236, .72); }
.avis__compte b { color: var(--blanc); }

/* ---------------------------------------------------------------------------------------------- faq */
.faq__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq__grille > h2 { font-size: clamp(34px, 4vw, 48px); }
.faq { border-top: 1px solid var(--filet); }
.faq__q { border-bottom: 1px solid var(--filet); }
.faq__q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 24, "SOFT" 60; font-size: 20px; color: var(--encre); }
.faq__q summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1.5px solid var(--bleu); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 1.5px; background: var(--bleu); transition: transform .3s var(--ease); }
.faq__plus::after { transform: rotate(90deg); }
.faq__q[open] .faq__plus::after { transform: none; }
.faq__q p { padding: 0 48px 24px 0; color: var(--gris); }

/* --------------------------------------------------------------------------------------- closing band */
.appel { background: var(--encre); color: var(--blanc); padding: clamp(72px, 10vw, 128px) 0; overflow: hidden; }
.appel__in { width: min(var(--wrap), 100%); margin: 0 auto; padding: 0 var(--gout); display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3vw, 34px); text-align: center; }
.appel__ville { width: clamp(260px, 34vw, 460px); height: auto; fill: none; stroke: rgba(247, 244, 236, .42); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.appel__phrase { font-family: var(--display); font-style: italic; font-weight: 500; font-variation-settings: "opsz" 48, "SOFT" 100; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.12; color: var(--blanc); max-width: 18ch; text-wrap: balance; }
.js .appel__ville path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.6, .1, .2, 1); }
.js .appel__ville:not(.vu) path { stroke-dashoffset: 1; }

/* --------------------------------------------------------------------------------------------- footer */
.treillis-bord { height: 22px; background: var(--treillis-blanc) var(--bleu); background-size: 22px 31px; background-position: center; }
.pied { background: var(--bleu); color: var(--blanc); }
.pied__in { width: min(var(--wrap), 100%); margin: 0 auto; padding: 64px var(--gout) 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; }
.pied__logo { display: inline-flex; text-decoration: none; }
.pied__logo img { height: 84px; width: auto; }
.pied__marque p { margin: 18px 0 22px; color: rgba(247, 244, 236, .82); max-width: 340px; }
.pied__t { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: rgba(247, 244, 236, .7); margin-bottom: 14px; }
.pied__col li { margin-bottom: 10px; }
.pied__col a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--blanc); border-bottom: 1px solid transparent; }
.pied__col a:hover { border-bottom-color: var(--sable); }
.pied__bas { width: min(var(--wrap), 100%); margin: 0 auto; padding: 22px var(--gout) 30px; border-top: 1px solid rgba(247, 244, 236, .18); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: 14px; color: rgba(247, 244, 236, .74); }
.pied__haut { color: rgba(247, 244, 236, .74); text-decoration: none; }
.pied__haut:hover { color: var(--blanc); }
.pied__credit { margin-left: auto; color: rgba(247, 244, 236, .74); text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; }
.pied__credit:hover { color: var(--blanc); }

/* --------------------------------------------------------------------------------------- page banner */
.bandeau { position: relative; min-height: clamp(380px, 56vh, 580px); padding-top: var(--nav-h); display: grid; align-items: end; overflow: hidden; isolation: isolate; color: var(--blanc); }
.bandeau__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; animation: pose 16s var(--ease) both; }
.bandeau__voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15, 28, 51, .8), rgba(15, 28, 51, .2) 60%, rgba(15, 28, 51, .08)); }
.bandeau__in { width: min(var(--wrap), 100%); margin: 0 auto; padding: 0 var(--gout) clamp(36px, 5vw, 56px); }
.bandeau h1 { color: var(--blanc); font-size: clamp(44px, 6vw, 76px); animation: monte 1s var(--ease) both; }
.bandeau p { margin-top: 10px; font-size: 19px; color: rgba(247, 244, 236, .92); animation: monte 1s .12s var(--ease) both; }

/* ---------------------------------------------------------------------------------------- tours map */
.carte { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r); padding: clamp(10px, 2vw, 24px); }
.carte svg { display: block; width: 100%; height: auto; }
.carte__ocean { fill: #DCE5EF; }
.carte__fleuve { fill: #DCE5EF; }
.carte__eau { font-family: var(--display); font-style: italic; font-size: 20px; fill: #7D93AE; }
.carte__ligne { stroke-width: 3.4; }
.carte__pin circle { fill: var(--papier); stroke: var(--ocre); stroke-width: 3; }
.carte__depart circle { fill: var(--ocre); }
.carte__num { font-family: var(--display); font-weight: 600; font-size: 14px; text-anchor: middle; fill: var(--ocre-f); }
.carte__nom { font-family: var(--texte); font-weight: 700; font-size: 17px; fill: var(--encre); paint-order: stroke; stroke: var(--papier); stroke-width: 5px; stroke-linejoin: round; }
.carte__mobile { fill: var(--bleu); stroke: var(--papier); stroke-width: 3; visibility: hidden; }
.trace.vu .carte__mobile { visibility: visible; }

.etapes { display: grid; gap: 0; max-width: 860px; }
.etape__trajet { display: flex; align-items: center; gap: 12px; padding: 14px 0 14px 18px; margin-left: 17px; border-left: 2px dotted var(--ocre); color: var(--gris); font-size: 14.5px; font-weight: 600; }
.etape__corps { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: center; background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r); padding: 14px; }
.etape:not(:first-child) .etape__corps { margin-top: 0; }
.etape + .etape:not(:has(.etape__trajet)) { margin-top: 14px; }
.etape__photo { overflow: hidden; border-radius: var(--r-s); }
.etape__photo img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: transform 1s var(--ease); }
.etape__txt { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 14px; padding-right: 16px; }
.etape__n { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ocre); color: var(--papier); font-family: var(--display); font-weight: 600; }
.etape__txt h3 { font-size: clamp(22px, 2.2vw, 28px); }
.etape__duree, .etape__note { grid-column: 1 / -1; }
.etape__duree { font-weight: 700; color: var(--bleu); margin-top: 6px; }
.etape__note { color: var(--gris); }

.compris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.compris__boite { background: var(--bleu); color: var(--blanc); border-radius: var(--r); padding: clamp(28px, 4vw, 44px); position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.compris__boite::after { content: ""; position: absolute; z-index: -1; inset: auto -30px -30px auto; width: 220px; height: 220px; background: var(--treillis-blanc); opacity: .12; border-radius: 50%; }
.compris__boite h2 { color: var(--blanc); font-size: clamp(28px, 3vw, 36px); }
.compris__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.compris__t { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: rgba(247, 244, 236, .75); margin-bottom: 10px; }
.compris__cols li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; line-height: 1.4; }
.compris__cols .ico { margin-top: 2px; }
.compris__oui .ico { color: #9FD3B3; }
.compris__non .ico { color: #F0B79A; }
.compris__boite .prix { border-top-color: rgba(247, 244, 236, .2); color: rgba(247, 244, 236, .8); width: 100%; }
.compris__boite .prix strong { color: var(--blanc); }
.compris__faq h2 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 18px; }

/* --------------------------------------------------------------------------------------------- about */
.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.duo--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.duo--inverse .duo__photo { order: 2; }
.duo__photo { overflow: hidden; border-radius: var(--r); }
.duo__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.duo__photo--portrait { width: 100%; max-width: 500px; justify-self: end; }
.duo__photo--portrait img { aspect-ratio: 4 / 5; }
.duo__txt h2 { font-size: clamp(34px, 4vw, 48px); margin-bottom: 20px; }
.duo__txt p { color: var(--gris); font-size: 18px; margin-bottom: 14px; max-width: 520px; }
.duo__txt .btn { margin-top: 14px; }
.section--treillis { background: var(--sable-c); position: relative; isolation: isolate; overflow: hidden; }
.section--treillis::before { content: ""; position: absolute; z-index: -1; left: -60px; top: 50%; translate: 0 -50%; width: 360px; height: 360px; border-radius: 50%; background: var(--treillis-bleu); opacity: .1; }

/* ------------------------------------------------------------------------------------------- contact */
.rdv { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.rdv__txt h2 { font-size: clamp(34px, 4vw, 48px); }
.rdv__lieu .lm { width: 46px; height: 46px; margin: 22px 0 10px; stroke: var(--ocre); }
.rdv__adresse li { font-size: 18px; }
.rdv__adresse li:first-child { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--bleu); font-variation-settings: "opsz" 24, "SOFT" 60; }
.rdv__adresse li:last-child { color: var(--gris); }
.rdv__tel { margin-top: 14px; }
.rdv__tel a { font-family: var(--display); font-variation-settings: "opsz" 24, "SOFT" 60; font-size: 22px; font-weight: 500; color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--filet); }
.rdv__tel a:hover { border-bottom-color: var(--ocre); }
.rdv__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.rdv__carte { border-radius: var(--r); overflow: hidden; border: 1px solid var(--filet); background: var(--sable-c); }
.rdv__carte iframe { display: block; }
.trouver { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.trouver li { background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r); padding: 28px; }
.trouver__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ocre); color: var(--papier); font-family: var(--display); font-weight: 600; font-size: 19px; margin-bottom: 18px; }
.trouver h3 { font-size: 22px; }
.trouver p { margin-top: 8px; color: var(--gris); }

/* ------------------------------------------------------------------- about: how it works + the photos */
/* the three steps are linked by the kit's dotted ochre route, as on the ride */
.deroule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); text-align: center; }
.deroule li { position: relative; display: flex; flex-direction: column; align-items: center; }
.deroule li:not(:last-child)::after { content: ""; position: absolute; top: 36px; left: calc(50% + 52px); width: calc(100% - 104px + clamp(28px, 4vw, 56px)); height: 4px; background: radial-gradient(circle, var(--ocre) 1.6px, transparent 2px) 0 50% / 11px 4px repeat-x; }
.deroule__ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--sable-c); color: var(--bleu); }
.deroule__ico .ico { width: 32px; height: 32px; }
.deroule__n { margin-top: 18px; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 19px; color: var(--ocre); }
.deroule h3 { margin-top: 4px; font-size: clamp(22px, 2.2vw, 26px); }
.deroule p { margin-top: 10px; color: var(--gris); max-width: 32ch; }
.galerie-sec { padding-top: 0; }
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(220px, 25vw, 320px)); gap: clamp(10px, 1.4vw, 16px); }
.galerie figure { overflow: hidden; border-radius: var(--r); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.galerie figure:first-child { grid-row: span 2; }
.galerie figure:nth-child(2) { grid-column: span 2; }

/* ------------------------------------------------------------------------------- hover (pointers only) */
@media (hover: hover) {
  .arret:hover .arret__photo img, .etape:hover .etape__photo img, .bande-photos figure:hover img, .galerie figure:hover img { transform: scale(1.05); }
}

/* ------------------------------------------------------------------- booking window (booking-modal.md) */
.rsv{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-start;justify-content:center;
  padding:24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.rsv[hidden] { display: none; }
.rsv__backdrop { position: fixed; inset: 0; background: rgba(15, 28, 51, .62); }
.rsv__card{position:relative;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:minmax(0,1fr);
  width:min(940px,calc(100vw - 40px));margin:auto;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  overflow:hidden}
.rsv__aside{min-height:0;overflow-y:auto}
.rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
.rsv__body > *{flex-shrink:0}
.rsv__card { background: var(--papier); border-radius: var(--r); }
.rsv__aside { background: var(--bleu); color: var(--blanc); display: flex; flex-direction: column; }
.rsv__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 64%; }
.rsv__aside-txt { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 10px; position: relative; isolation: isolate; flex: 1; }
.rsv__aside-txt::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--treillis-blanc); background-size: 26px 36px; opacity: .07; }
.rsv__aside-h { font-family: var(--display); font-weight: 600; font-size: 28px; font-variation-settings: "opsz" 24, "SOFT" 80; line-height: 1.1; }
.rsv__aside-txt p { color: rgba(247, 244, 236, .88); }
.rsv__perk { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 14px 16px; border-radius: var(--r-s); background: rgba(247, 244, 236, .1); color: var(--blanc) !important; font-weight: 600; line-height: 1.4; }
.rsv__perk .ico { color: #F2C9A9; margin-top: 2px; }
.rsv__body { padding: 30px 32px 28px; gap: 6px; }
.rsv__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.rsv__top h2 { font-size: 32px; }
.rsv__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filet); background: var(--papier); display: grid; place-items: center; }
.rsv__close .ico { width: 20px; height: 20px; }
.rsv__l { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--gris); margin: 14px 0 8px; }
.rsv__packs { display: grid; gap: 8px; }
.rsv__pack { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 2px 12px; padding: 14px 16px; border-radius: var(--r-s); border: 1.5px solid var(--filet); background: var(--papier); transition: background-color .2s, border-color .2s; }
.rsv__pack:hover { border-color: var(--bleu); }
.rsv__pack[aria-pressed="true"] { border-color: var(--bleu); background: rgba(27, 70, 126, .07); }
.rsv__pack-nom { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--bleu); }
.rsv__pack-meta { grid-column: 1; color: var(--gris); font-size: 14.5px; }
.rsv__tick { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--bleu); width: 24px; height: 24px; visibility: hidden; }
.rsv__pack[aria-pressed="true"] .rsv__tick { visibility: visible; }
.rsv__compte { font-size: 13px; color: var(--gris); min-height: 4px; }
.rsv__grille { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.rsv__field { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rsv__field label { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--gris); }
.rsv__field input, .rsv__field select { font: inherit; font-size: 16px; color: var(--encre); min-height: 48px; padding: 0 14px; border: 1px solid var(--filet); border-radius: var(--r-s); background: var(--blanc); width: 100%; }
.rsv__field input[type="date"]{-webkit-appearance:none;appearance:none;
  min-height:48px;line-height:1.3;padding:0 14px;
  background:var(--blanc);border:1px solid var(--filet)}
.rsv__field input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.rsv__field input[type="date"]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.rsv__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rsv__chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--filet); background: var(--blanc); font-weight: 600; font-size: 15px; transition: background-color .2s, border-color .2s, color .2s; }
.rsv__chip:hover { border-color: var(--bleu); }
.rsv__chip[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.rsv__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); }
.rsv__total span:first-child { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--gris); }
.rsv__total strong { font-family: var(--display); font-size: 30px; font-weight: 600; color: var(--bleu); }
.rsv__total-detail { color: var(--gris); font-size: 14.5px; }
.rsv__hint { min-height: 22px; color: var(--ocre-f); font-weight: 600; font-size: 14.5px; }
.rsv__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.rsv__ctas .btn { flex: 1 1 200px; min-width: 0; }
.rsv__ctas .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.rsv__note { margin-top: 12px; font-size: 14px; color: var(--gris); }
@media (max-width:1020px){
  .rsv__card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);
    max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
  .rsv__photo { display: none; }
  .rsv__aside-txt { padding: 18px 24px; }
  .rsv__aside-txt > p:not(.rsv__perk):not(.rsv__aside-h) { display: none; }
  .rsv__aside-h { font-size: 22px; }
  .rsv__perk { margin-top: 0; padding: 10px 12px; font-size: 14.5px; }
}
@media (max-width:680px){
  .rsv{padding:0}
  .rsv__card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);width:100vw;margin:0;
    height:100vh;max-height:100vh;height:100dvh;max-height:100dvh}
  .rsv__packs{max-height:none}
  .rsv__card { border-radius: 0; }
  .rsv__body { padding: 22px 20px 26px; }
  .rsv__top h2 { font-size: 26px; }
  .rsv__grille { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .nav__liens { gap: 18px; }
  .nav__liens a { font-size: 16px; }
  .pourquoi__grille { grid-template-columns: 1fr; }
  .formules--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  :root { --nav-h: 68px; }
  .barre__champ { padding: 6px 14px 6px 22px; }
  .barre__champ input, .barre__champ select { font-size: 17px; }
  .barre__go { padding: 0 22px; }
  .nav__in { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .nav__logo img { height: 50px; }
  .nav__burger { display: block; }
  .nav__liens { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px var(--gout) calc(var(--nav-h) + 24px); background: var(--papier); overflow-y: auto; visibility: hidden; transform: translateY(-10px); transition: transform .35s var(--ease), visibility 0s .35s; }
  .nav__liens.nav-open { visibility: visible; transform: none; transition: transform .35s var(--ease), visibility 0s; }
  .nav__liens a { font-size: 34px; padding: 6px 0; border-bottom: 2px solid transparent; color: var(--encre); }
  .nav__liens a.active { border-bottom-color: var(--ocre); }
  .nav__lang-mobile { display: block; font-family: var(--texte) !important; font-size: 17px !important; font-weight: 700 !important; color: var(--bleu) !important; border-bottom: 0 !important; margin-top: 26px; }
  .ride { grid-template-columns: 1fr; }
  .arrets__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route { display: none; }
  .confiance__panneau { grid-template-columns: 1fr; }
  .pied__in { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
  .faq__grille, .compris, .rdv, .duo, .duo--inverse { grid-template-columns: 1fr; }
  .duo--inverse .duo__photo { order: 0; }
  .duo__photo--portrait { justify-self: start; }
  .trouver { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { min-height: max(560px, 100svh); }
  .hero__photo img { object-position: 50% 50%; }
  .hero__voile { background: linear-gradient(to top, rgba(15, 28, 51, .88) 0%, rgba(15, 28, 51, .55) 30%, rgba(15, 28, 51, .08) 58%, rgba(15, 28, 51, 0) 70%); }
  .hero__in { padding-bottom: 34px; }
  .hero h1 { font-size: clamp(54px, 15.5vw, 76px); }
  .hero__lead { font-size: 17px; margin-top: 14px; }
  .hero__ctas { display: flex; }
  .barre { display: none; }
  .formules, .formules--4 { grid-template-columns: 1fr; }
  .pourquoi__liste { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .bande-photos { grid-template-columns: 1fr 1fr; }
  .bande-photos figure:first-child { grid-column: 1 / -1; }
  .confiance__plateformes { gap: 10px; }
  .plat { height: 92px; }
  .faits { grid-template-columns: 1fr; }
  .etape__corps { grid-template-columns: 1fr; padding: 12px; }
  .deroule { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .deroule li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-items: start; padding-bottom: 30px; }
  .deroule li:last-child { padding-bottom: 0; }
  .deroule li:not(:last-child)::after { top: 72px; left: 30px; width: 4px; height: calc(100% - 80px); background: radial-gradient(circle, var(--ocre) 1.6px, transparent 2px) 50% 0 / 4px 11px repeat-y; }
  .deroule__ico { grid-row: span 3; width: 64px; height: 64px; }
  .deroule__ico .ico { width: 28px; height: 28px; }
  .deroule__n { margin-top: 2px; }
  .deroule p { margin-top: 6px; }
  .galerie { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 190px 190px; }
  .galerie figure:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .galerie figure:first-child { grid-column: 1; grid-row: 2 / span 2; }
  .galerie figure:nth-child(3) { grid-column: 2; grid-row: 2; }
  .galerie figure:nth-child(4) { grid-column: 2; grid-row: 3; }
  .etape__txt { padding: 4px 6px 10px; }
  .compris__cols { grid-template-columns: 1fr; }
  .pied__in { grid-template-columns: 1fr; padding-top: 48px; }
  .pied__credit { margin-left: 0; }
  .carte__nom { font-size: 22px; }
}
@media (max-width: 560px) {
  .nav__lang { display: none; }
  .nav__cta { min-height: 42px; padding: 0 16px; font-size: 15px; }
  .nav__logo img { height: 46px; }
  .arrets__liste { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .arret h4 { font-size: 18px; }
  .arret p { font-size: 14px; }
  .arret__photo { margin-bottom: 12px; }
  .faq__q summary { font-size: 18px; }
  .faq__q p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .trace:not(.vu) .route__mask { stroke-dashoffset: 0; }
}