/* NMK Japan : site en aperçu. Piste « Ensō » autour de son vrai logo. Mobile d'abord (390 px), puis l'ordinateur.
   Deux fonds : le papier (accordé aux illustrations) et le blanc ; le sumi pour le guide, l'offre et le pied de page. */
:root {
  --papier: #FAF4E7; --papier-2: #F1E7D3; --blanc: #FFFFFF; --sumi: #1A1817; --sumi-2: #2A2624;
  --encre: #1A1817; --texte: #4A423C; --gris: #7A7068; --rouge: #D3261C; --rouge-f: #9E1A13; --rouge-pale: #FBE3DF;
  --rouge-clair: #FF6A5E; --or: #E9B949;
  --f: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --large: 118%;
  --ombre: 0 0 0 1px rgba(26, 24, 23, .07), 0 10px 26px rgba(26, 24, 23, .08);
  --g: 20px;                         /* gouttière */
  --haut-entete: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--papier); color: var(--texte); font: 400 16px/1.55 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { color: var(--encre); margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.visuel-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }   /* un bouton ou un texte masqué le reste, même s'il a son propre display */
/* deux modes, posés par le script du <head> : l'aperçu privé (apercu-…, copie locale) n'envoie ni ne vend rien ; le site
   servi par son Worker envoie les demandes et vend le guide. Sans script, c'est le site qui s'affiche. */
.mode-apercu [data-seul="site"], html:not(.mode-apercu) [data-seul="apercu"] { display: none !important; }
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; border-radius: 6px; }
.conteneur { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--g); position: relative; }
.s { position: relative; padding: 72px 0; }
.sombre { background: var(--sumi); color: rgba(255, 255, 255, .82); }
.sombre h2, .sombre h3 { color: #fff; }

/* deux sections papier qui se suivent : une seule marge entre elles (sinon un blanc de 200 px sur ordinateur) */
.s.papier + .s.papier { padding-top: 0; }
.heros-guide + .s.papier { padding-top: 24px; }

/* texture validée par Arthur (2026-10-12) : le papier washi sur les sections papier, et l'ensō de son logo sur deux
   sections par page au plus ; jamais sur les fonds sombres ni dans le pied de page */
.papier { background-color: var(--papier); background-image: url(img/fonds/washi.png); background-size: 384px 384px; }
.motif { position: relative; isolation: isolate; }
.motif::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--rouge); opacity: .12;
  -webkit-mask: url(img/fonds/motif-enso.png) 0 0 / 540px 540px repeat; mask: url(img/fonds/motif-enso.png) 0 0 / 540px 540px repeat; }

/* titres */
.kicker { font: 700 12px/1.2 var(--f); letter-spacing: .18em; text-transform: uppercase; color: var(--rouge); margin-bottom: 12px; }
.kicker-clair { color: #FFD9A0; }
.kicker-or { color: var(--or); }
.t { font: 800 32px/1.06 var(--f); font-stretch: var(--large); letter-spacing: -.012em; text-wrap: balance; }
.t em, h1 em { font-style: normal; color: var(--rouge); }
.sombre .t em { color: var(--rouge-clair); }
em.pinceau { color: var(--encre); padding: 0 .06em .02em; background: url(img/logo/trait-pinceau.svg) 0 100% / 100% .36em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.intro { margin-top: 14px; font-size: 17px; color: var(--texte); max-width: 620px; }
.tete-s { margin-bottom: 30px; }
.tete-s.centre { text-align: center; }
.tete-s.centre .intro { margin-left: auto; margin-right: auto; }

/* boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 22px; border-radius: 999px; border: 0; font: 700 16px/1.1 var(--f); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: translateY(2px); }
.btn-rouge { background: var(--rouge); color: #fff; box-shadow: 0 3px 0 var(--rouge-f); }
.btn-rouge:hover { background: #BF2117; }
.btn-contour { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
.btn-verre { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-sumi { background: var(--sumi); color: #fff; }
.btn-grand { min-height: 54px; padding: 16px 26px; font-size: 17px; }
.btn-plein { width: 100%; }
.btn-pj { background: #E7362B; color: #fff; font-family: 'Poppins', var(--f); box-shadow: 0 3px 0 #B9281F; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }


/* ------------------------------------------------------------------ en-tête */
.haut { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--haut-entete); transition: background .25s ease, box-shadow .25s ease; }
.haut .conteneur { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { display: block; position: relative; width: 76px; height: 57px; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .2s ease; }
.logo .lg-sombre { opacity: 0; }
.haut.sur-photo .logo .lg-clair { opacity: 0; }
.haut.sur-photo .logo .lg-sombre { opacity: 1; }
.haut.colle { background: rgba(250, 244, 231, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(26, 24, 23, .08); }
.haut.colle .logo .lg-clair { opacity: 1; }
.haut.colle .logo .lg-sombre { opacity: 0; }
.actions { display: flex; align-items: center; gap: 10px; }
.principale { display: none; }
.btn-entete { min-height: 42px; padding: 10px 18px; font-size: 15px; }
.burger { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--sumi); color: #fff; display: grid; place-items: center; cursor: pointer; }
.burger svg { width: 22px; height: 22px; }
.haut.sur-photo:not(.colle) .burger { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.haut .btn-entete { display: none; }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--papier); padding: 12px var(--g) 28px; display: flex; flex-direction: column; transform: translateY(-100%); visibility: hidden; transition: transform .3s ease, visibility .3s; overflow-y: auto; }
.menu.ouvert { transform: none; visibility: visible; }
.menu-ouvert { overflow: hidden; }
.tete-menu { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.tete-menu .logo .lg-clair { opacity: 1; } .tete-menu .logo .lg-sombre { opacity: 0; }
.menu ul { margin-top: 18px; }
.menu li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px; border-bottom: 1px solid rgba(26, 24, 23, .1); font: 800 22px/1.15 var(--f); font-stretch: var(--large); color: var(--encre); text-decoration: none; }
.menu li a small { font: 700 13px/1 var(--f); font-stretch: 100%; color: var(--rouge); background: var(--rouge-pale); padding: 7px 10px; border-radius: 999px; }
.menu li a svg { width: 18px; height: 18px; color: var(--rouge); }
.ctas-menu { display: grid; gap: 10px; margin-top: 24px; }
.masc-menu { width: 130px; margin: 18px auto 0; }

/* ------------------------------------------------------------------ héros */
/* téléphone : sa photo bord à bord en haut, sous l'en-tête transparent ; le texte commence sous son visage, sur le sumi.
   ordinateur : la photo dans un cadre à droite, cerclée de l'ensō de son logo ; le texte à gauche, jamais sur la photo. */
.heros { position: relative; color: #fff; background: var(--sumi); overflow-x: clip; }
.heros-in { padding-bottom: 34px; }
.heros-visuel { position: relative; margin: 0 calc(-1 * var(--g)); height: min(125vw, 72svh); }
.heros-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
.heros-visuel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 24, 23, .55) 0%, rgba(26, 24, 23, 0) 17%, rgba(26, 24, 23, 0) 72%, rgba(26, 24, 23, .86) 92%, var(--sumi) 100%); }
.hv-enso, .hv-masc, .hv-stk { display: none; }
.heros-tx { position: relative; z-index: 2; margin-top: -56px; }
.heros h1 { color: #fff; font: 800 clamp(40px, 7.4vw, 60px)/1.02 var(--f); font-stretch: var(--large); letter-spacing: -.015em; }
.heros h1 em { color: var(--rouge-clair); }
.heros .sous { margin-top: 14px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 560px; }
.heros .ctas { margin-top: 22px; }
.heros .ctas .btn { flex: 1 1 auto; }
.heros-carte { position: relative; margin-top: 98px; background: #fff; color: var(--texte); border-radius: 24px; padding: 20px 18px 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
.hc-masc { position: absolute; right: 10px; top: -86px; width: 100px; height: auto; pointer-events: none; }
.hc-titre { display: flex; align-items: center; gap: 10px; font: 800 20px/1.1 var(--f); font-stretch: var(--large); color: var(--encre); }
.hc-note { margin-top: 6px; font-size: 13px; color: var(--gris); }
.hc-liste { display: grid; gap: 8px; margin: 14px 0; }
.hc-choix { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--papier); text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--papier-2); }
.hc-stk { flex: none; width: 46px; height: 46px; object-fit: contain; }
.hc-choix > span { flex: 1; min-width: 0; }
.hc-choix b { display: block; font: 700 15px/1.2 var(--f); color: var(--encre); }
.hc-choix small { display: block; margin-top: 3px; font-size: 13px; color: var(--gris); }
.hc-choix em { font: 800 15px/1 var(--f); font-style: normal; color: var(--rouge); white-space: nowrap; }
.heros-carte .btn { width: 100%; }
/* le mur de ses voyageurs (Arthur, 2026-10-12) : leurs selfies avec lui défilent en diagonale, beaucoup à la fois */
.hv-zone { position: relative; margin: 0 calc(-1 * var(--g)); }
.hv-defile { position: absolute; inset: 0; overflow: hidden; background: var(--sumi); }
.hv-defile::before, .hv-defile::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.hv-defile::before { top: 0; height: 130px; background: linear-gradient(180deg, rgba(26, 24, 23, .8), rgba(26, 24, 23, 0)); }
.hv-defile::after { bottom: 0; height: 72px; background: linear-gradient(180deg, rgba(26, 24, 23, 0), var(--sumi)); }
.hv-defile img { display: block; max-width: none; }
.en-pause .mur-piste { animation-play-state: paused; }
.hv-pause { position: absolute; z-index: 3; right: 12px; bottom: 20px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(26, 24, 23, .74); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.hv-pause svg { width: 14px; height: 14px; }
.hv-pause .i-lecture, .hv-pause[aria-pressed="true"] .i-pause { display: none; }
.hv-pause[aria-pressed="true"] .i-lecture { display: block; }
.heros-preuve { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .78); }
.hp-avs { display: inline-flex; flex: none; }
.hp-avs img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--sumi); margin-left: -10px; }
.hp-avs img:first-child { margin-left: 0; }
/* A · le mur incliné : 12 colonnes qui montent et descendent, inclinées ; tourné autour du centre du cadre */
.mur { --tuile: 100px; --ecart: 9px; --P: calc(12 * (var(--tuile) + var(--ecart))); }
.mur-plan { position: absolute; left: 0; right: 0; top: 50%; height: calc(2 * var(--P)); margin-top: calc(var(--P) / -2); display: flex; justify-content: center; gap: var(--ecart);
  transform: rotate(-14deg); transform-origin: 50% calc(var(--P) / 2); }
.mur-col { flex: none; width: var(--tuile); }
.mur-piste { display: flex; flex-direction: column; transform: translateY(var(--decal, 0)); animation: mur-monte var(--d, 60s) linear var(--retard, 0s) infinite; will-change: transform; }
.mur-col.descend .mur-piste { animation-name: mur-descend; }
.mur-tuile { width: var(--tuile); height: var(--tuile); margin-bottom: var(--ecart); border-radius: 14px; object-fit: cover; }
@keyframes mur-monte { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes mur-descend { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hv-pause { display: none; } }
/* le titre sur le mur, sur téléphone et tablette (Arthur, 2026-10-12 : « on va garder le titre en bas ») : le mur sur tout
   l'écran, le titre et les boutons en bas sur un dégradé, la carte de réservation dessous ; sur ordinateur, la carte */
@media (max-width: 899px) {
  .heros--mur .heros-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "pile" "carte"; }
  .heros--mur .hv-zone { grid-area: pile; min-height: 100svh; }
  .heros--mur .heros-tx { grid-area: pile; align-self: end; z-index: 2; margin-top: 0; padding-bottom: 28px; }
  .heros--mur .heros-carte { grid-area: carte; }
  .heros--mur .hv-pause { top: calc(var(--haut-entete) + 8px); bottom: auto; }
  /* le titre a trois lignes : le surtitre remonte sur le haut du dégradé, un halo le garde lisible */
  .heros--mur .kicker-clair { text-shadow: 0 1px 10px rgba(26, 24, 23, .9), 0 0 2px rgba(26, 24, 23, .7); }
  .heros--mur .hv-defile::after { height: 66%; background: linear-gradient(180deg, rgba(26, 24, 23, 0) 0%, rgba(26, 24, 23, .8) 32%, rgba(26, 24, 23, .95) 56%, var(--sumi) 100%); }
}
}

/* ------------------------------------------------------------------ bandeau de preuves */
.bandeau-preuves { padding: 22px 0 6px; }
.bandeau-preuves .conteneur { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; }
.bandeau-preuves .conteneur::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 9px 14px 9px 9px; box-shadow: var(--ombre); font-size: 12.5px; line-height: 1.25; color: var(--gris); text-decoration: none; }
.chip > img { width: 36px; height: 36px; border-radius: 10px; }
.chip b { display: block; font: 800 16px/1.1 var(--f); font-stretch: 112%; color: var(--encre); }
.chip-avs { display: inline-flex; }
.chip-avs img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; margin-left: -8px; }
.chip-avs img:first-child { margin-left: 0; }
.chip-stk { width: 38px; height: 38px; object-fit: contain; }

/* ------------------------------------------------------------------ visites */
.visites { padding-top: 56px; }
.stk { position: absolute; pointer-events: none; height: auto; }
.stk-visites { right: 10px; top: 26px; width: 64px; transform: rotate(10deg); }
.stk-visites ~ .conteneur .tete-s .t { padding-right: 60px; }
.grille-visites { display: grid; gap: 18px; }
.carte-visite { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.cv-im { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cv-im img { width: 100%; height: 100%; object-fit: cover; }
.duree { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; background: rgba(26, 24, 23, .82); color: #fff; font: 600 12.5px/1 var(--f); padding: 8px 12px; border-radius: 999px; }
.duree svg { width: 14px; height: 14px; }
.cv-corps { padding: 18px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.tag { font: 700 11.5px/1.2 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--rouge); }
.carte-visite h3 { margin-top: 8px; font: 800 22px/1.1 var(--f); font-stretch: 112%; color: var(--encre); }
.points { margin: 12px 0 16px; display: grid; gap: 7px; }
.points li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.4; }
.points li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); }
.cv-bas { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cv-prix { font-size: 14px; color: var(--gris); }
.cv-prix b { font: 800 24px/1 var(--f); font-stretch: 112%; color: var(--encre); }
.cv-prix small { display: block; margin-top: 5px; font-size: 12.5px; }
/* la grille de ses prix, sous les cartes : seul, à 2 ou 3, dès 4 */
.tarifs { margin-top: 18px; background: #fff; border-radius: 24px; box-shadow: var(--ombre); padding: 18px 16px 8px; }
.tarifs table { width: 100%; border-collapse: collapse; }
.tarifs caption { text-align: left; padding: 0 2px 10px; font: 800 20px/1.1 var(--f); font-stretch: 112%; color: var(--encre); }
.tarifs th, .tarifs td { padding: 12px 4px; text-align: right; vertical-align: top; }
.tarifs thead th { padding-top: 4px; font: 700 11px/1.2 var(--f); letter-spacing: .04em; text-transform: uppercase; color: var(--rouge); white-space: nowrap; }
.tarifs thead small, .tarifs tbody small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--f); letter-spacing: 0; text-transform: none; color: var(--gris); }
.tarifs thead small { white-space: nowrap; }
.tarifs tbody th { text-align: left; font: 700 14.5px/1.3 var(--f); color: var(--encre); }
.tarifs tbody td { font: 800 18px/1.2 var(--f); font-stretch: 112%; color: var(--encre); white-space: nowrap; }
.tarifs tbody tr { border-top: 1px solid rgba(26, 24, 23, .1); }
.carte-sejour { position: relative; margin-top: 18px; display: grid; background: var(--sumi); color: rgba(255, 255, 255, .82); border-radius: 24px; overflow: hidden; text-decoration: none; }
.cs-im { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.cs-im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-tx { position: relative; isolation: isolate; padding: 22px 20px 24px; display: grid; gap: 10px; font-size: 15px; }
.cs-tx .tag { color: var(--or); }
.cs-tx b { font: 800 26px/1.08 var(--f); font-stretch: 112%; color: #fff; }
/* la route : un exemple d'itinéraire, le shinkansen au départ */
.cs-route { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 46px 0 4px; }
.cs-route::before { content: ""; position: absolute; left: 10%; right: 10%; top: 6px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--rouge-clair) 0 10px, transparent 10px 16px); }
.cs-arret { position: relative; display: grid; justify-items: center; gap: 9px; font: 700 12.5px/1.2 var(--f); color: #fff; text-align: center; }
.cs-arret i { width: 15px; height: 15px; border-radius: 50%; background: var(--sumi); box-shadow: inset 0 0 0 3px var(--rouge-clair); }
.cs-arret:first-of-type i, .cs-arret:last-of-type i { background: var(--rouge-clair); }
.cs-train { position: absolute; z-index: 1; left: 3%; top: -48px; width: 82px; height: auto; transform: rotate(-3deg); pointer-events: none; }
.cs-note { font-size: 13.5px; color: rgba(255, 255, 255, .62); }
.cs-bas { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 8px; }
.cs-devis { font: 700 14px/1 var(--f); color: var(--or); }

/* ------------------------------------------------------------------ étapes */
.etapes-s { background: var(--blanc); }
.etapes { display: grid; gap: 14px; counter-reset: e; }
.etape { position: relative; background: var(--papier); border-radius: 24px; padding: 20px 20px 20px 116px; min-height: 128px; }
.et-masc { position: absolute; left: 10px; bottom: 8px; width: 96px; height: auto; }
.et-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--rouge); color: #fff; font: 800 14px/1 var(--f); }
.etape h3 { margin-top: 10px; font: 800 19px/1.1 var(--f); font-stretch: 112%; }
.etape p { margin-top: 6px; font-size: 15px; line-height: 1.45; }
.transparence { margin-top: 22px; display: flex; align-items: center; gap: 14px; background: var(--rouge-pale); border-radius: 20px; padding: 16px 18px; font-size: 15px; line-height: 1.45; color: var(--encre); }
.tr-stk { width: 56px; height: auto; flex: none; }

/* ------------------------------------------------------------------ avis */
.avis { padding-bottom: 40px; }
.avis-grille { display: grid; gap: 26px; justify-items: center; }
.avis-tx { width: 100%; position: relative; }
.masc-avis { position: absolute; right: -4px; top: -30px; width: 92px; height: auto; }
.avis-tx .t { padding-right: 70px; }
/* téléphone TikTok */
.tel { position: relative; width: min(330px, 100%); aspect-ratio: 680 / 1386; margin: 0; }
.tel-cadre { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.tel-ecran { position: absolute; left: 5.4%; right: 5.4%; top: 2.6%; bottom: 2.6%; border-radius: 34px; overflow: hidden; background: #000; display: flex; flex-direction: column; z-index: 1; }
.tt-video { position: relative; height: 47%; flex: none; overflow: hidden; }
.tt-cadre, .tt-im { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tt-etat { position: absolute; top: 9px; left: 18px; right: 18px; z-index: 2; display: flex; justify-content: space-between; font: 700 11px/1 var(--f); color: #fff; }
.tt-ics { display: inline-flex; gap: 3px; }
.tt-ics i { width: 13px; height: 8px; border-radius: 2px; background: #fff; opacity: .9; }
.tt-rail { position: absolute; right: 8px; bottom: 12px; z-index: 2; display: grid; gap: 10px; justify-items: center; color: #fff; font: 700 10px/1 var(--f); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.tt-rail li { display: grid; gap: 3px; justify-items: center; }
.tt-rail svg { width: 22px; height: 22px; fill: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.tt-av img { width: 34px; height: 34px; border-radius: 50%; background: var(--sumi); padding: 3px; box-shadow: 0 0 0 2px #fff; }
.tt-leg { position: absolute; left: 10px; right: 50px; bottom: 10px; z-index: 2; color: #fff; font-size: 10.5px; line-height: 1.35; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.tt-leg b { font-size: 11.5px; }
.tt-son { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.tt-son svg { width: 11px; height: 11px; fill: #fff; }
.tt-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55)); z-index: 1; }
.tt-feuille { flex: 1; background: #fff; border-radius: 14px 14px 0 0; margin-top: -10px; position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; }
.tt-tete { text-align: center; font: 700 11.5px/1 var(--f); color: #161823; padding: 12px 0 8px; position: relative; }
.tt-x { position: absolute; right: 12px; top: 9px; }
.tt-x svg { width: 14px; height: 14px; color: #161823; }
.tt-liste { flex: 1; overflow: hidden; padding: 0 12px; display: grid; align-content: start; gap: 9px; -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent); mask-image: linear-gradient(180deg, #000 85%, transparent); }
.com { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; }
.com.rep { margin-left: 34px; grid-template-columns: 20px 1fr auto; }
.av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.com.rep .av { width: 20px; height: 20px; }
.nom { font: 600 9.5px/1.2 var(--f); color: #8A8B91; display: flex; align-items: center; gap: 5px; }
.badge-cr { background: #FE2C55; color: #fff; font-size: 8px; padding: 2px 5px; border-radius: 3px; }
.txt { font-size: 10.5px; line-height: 1.35; color: #161823; }
.meta { margin-top: 3px; font-size: 9px; color: #8A8B91; }
.like { display: grid; justify-items: center; gap: 1px; font-size: 9px; color: #8A8B91; }
.like svg { width: 12px; height: 12px; fill: none; stroke: #8A8B91; stroke-width: 2; }
.plus-rep { margin: -3px 0 0 34px; font: 600 9.5px/1 var(--f); color: #8A8B91; }
.tt-saisie { margin: 0 10px 10px; background: #F1F1F2; border-radius: 999px; padding: 9px 12px; font-size: 10.5px; color: #8A8B91; }
.galerie { margin-top: 40px; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 0 var(--g) 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galerie::-webkit-scrollbar { display: none; }
.g-it { flex: none; width: 46vw; max-width: 220px; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; scroll-snap-align: start; box-shadow: var(--ombre); }
.g-it img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ le guide (accueil) */
.guide-grille { display: grid; gap: 30px; }
.guide-livre { position: relative; display: grid; place-items: center; padding: 10px 0 30px; }
.livre { position: relative; width: min(232px, 62vw); aspect-ratio: 3 / 4; }
.livre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px 12px 12px 6px; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
.livre .p1 { transform: translate(16%, 3%) rotate(6deg); transform-origin: 30% 100%; }
.livre .p2 { transform: translate(-15%, 4%) rotate(-6deg); transform-origin: 70% 100%; }
.livre .couv { position: relative; }
.motion .livre[data-eventail] .page { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.motion .livre[data-eventail]:not(.deploye) .page { transform: none; }
.prix-rond { position: absolute; display: grid; place-items: center; align-content: center; gap: 3px; text-align: center; width: 92px; height: 92px; border-radius: 50%; background: var(--rouge); color: #fff; box-shadow: 0 4px 0 var(--rouge-f); }
.prix-rond::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.6px dashed rgba(255, 255, 255, .75); }
.prix-rond small { display: block; font: 700 10px/1 var(--f); letter-spacing: .2em; text-transform: uppercase; }
.prix-rond b { display: block; font: 800 25px/1 var(--f); font-stretch: 112%; }
.pr-accueil { left: 0; bottom: 6px; transform: rotate(-9deg); }
.guide-tx .intro { color: rgba(255, 255, 255, .78); }
.blague { margin: 18px 0 0; padding: 16px 18px; border-radius: 18px; background: var(--sumi-2); font: 700 18px/1.35 var(--f); color: #fff; }
.blague cite { display: block; margin-top: 6px; font: 600 12.5px/1 var(--f); font-style: normal; color: var(--or); letter-spacing: .06em; }
.g-liste { margin-top: 18px; display: grid; gap: 10px; }
.g-liste li { display: flex; align-items: center; gap: 12px; background: var(--sumi-2); border-radius: 16px; padding: 10px 14px 10px 10px; }
.g-stk { width: 44px; height: 44px; object-fit: contain; flex: none; }
.g-liste b { display: block; font: 700 15.5px/1.2 var(--f); color: #fff; }
.g-liste small { display: block; margin-top: 2px; font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.g-note { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.guide-s .btn-verre { color: #fff; }

/* ------------------------------------------------------------------ qui je suis */
.moi-grille { display: grid; gap: 30px; }
.moi-photos { position: relative; height: 380px; }
.moi-photos figure { position: absolute; border-radius: 24px; overflow: hidden; box-shadow: 0 16px 34px rgba(26, 24, 23, .18); }
.moi-photos figure img { width: 100%; height: 100%; object-fit: cover; }
.mp-1 { left: 0; top: 0; width: 64%; height: 330px; }
.mp-2 { right: 0; bottom: 0; width: 46%; height: 230px; border: 6px solid var(--papier); }
.stk-moi { left: 52%; top: -6px; width: 70px; transform: rotate(-12deg); z-index: 2; }
.moi-tx p { margin-top: 14px; font-size: 16.5px; }
.moi-tx p b { color: var(--encre); }
.cit { margin: 18px 0 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--rouge); font: 700 18px/1.4 var(--f); color: var(--encre); }
.moi-chiffres { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.moi-chiffres li { background: #fff; border-radius: 14px; padding: 10px 14px; font-size: 12.5px; color: var(--gris); box-shadow: var(--ombre); }
.moi-chiffres b { display: block; font: 800 18px/1.1 var(--f); font-stretch: 112%; color: var(--encre); }

/* ------------------------------------------------------------------ eSIM PlanJapon */
.esim { background: var(--blanc); }
.boite { background: var(--papier); border-radius: 28px; padding: 24px 20px; display: grid; gap: 22px; }
.duo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.duo-nmk { width: 72px; height: auto; }
.duo .x { font: 700 18px/1 var(--f); color: var(--gris); }
.duo img:last-child { width: 150px; height: auto; }
.esim-mot { margin-top: 12px; font-size: 16.5px; }
.esim-offre { position: relative; margin-top: 4px; background: #fff; border-radius: 22px; padding: 18px; box-shadow: var(--ombre); display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 16px 12px; }
.masc-pj { width: 78px; height: auto; }
.esim-offre .btn-pj, .esim-offre .petit { grid-column: 1 / -1; }
.code { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; border: 2px dashed #E7362B; border-radius: 16px; padding: 12px 14px; }
.code span { display: block; font-size: 12px; color: var(--gris); }
.code b { display: block; font: 800 clamp(17px, 5vw, 24px)/1 var(--f); letter-spacing: .04em; color: var(--encre); }   /* NMKJAPAN tient à 360 px */
.code-note { font: 700 11px/1.25 var(--f) !important; color: #E7362B !important; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.code-note br { display: none; }
.petit { font-size: 12.5px; color: var(--gris); text-align: center; }
.pj-glisser { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font: 600 13px/1 var(--f); color: var(--gris); }
.pj-glisser svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ FAQ */
.faq-grille { display: grid; gap: 22px; }
.faq-tete { position: relative; }
.masc-faq { display: none; }
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border-radius: 18px; box-shadow: var(--ombre); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 18px; font: 700 16.5px/1.3 var(--f); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.plus { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--rouge-pale); flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--rouge); transform: translate(-50%, -50%); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
details[open] .plus::after { transform: translate(-50%, -50%) rotate(0); }
.faq .r { padding: 0 18px 18px; font-size: 15.5px; }

/* ------------------------------------------------------------------ appel final */
.final { text-align: center; padding: 70px 0 0; overflow: hidden; }
.final-decor, .journee-decor { display: block; position: relative; left: 50%; transform: translateX(-50%); width: min(1100px, 170vw); max-width: none; margin-top: 18px; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 26%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 26%); mask-composite: intersect; }
.masc-final { width: 120px; margin: 0 auto 10px; }
.final .ctas { justify-content: center; }

/* ------------------------------------------------------------------ pied de page */
.pied { background: var(--sumi); color: rgba(255, 255, 255, .72); padding: 54px 0 calc(110px + env(safe-area-inset-bottom)); }
.pied-haut { display: grid; gap: 28px; }
.logo.logo-xl { width: 190px; height: auto; position: static; }
.logo.logo-xl img { position: static; width: 100%; height: auto; }
.presente { margin-top: 14px; font-size: 15.5px; max-width: 460px; }
.reseaux { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.reseaux a { display: inline-flex; align-items: center; gap: 10px; background: var(--sumi-2); border-radius: 14px; padding: 8px 14px 8px 8px; text-decoration: none; font-size: 12px; line-height: 1.2; }
.reseaux img { width: 32px; height: 32px; border-radius: 9px; }
.reseaux b { display: block; font: 800 15px/1.1 var(--f); color: #fff; }
.pied-produits { display: grid; gap: 10px; }
.pied-carte { display: grid; grid-template-columns: 64px 1fr 20px; align-items: center; gap: 14px; background: var(--sumi-2); border-radius: 18px; padding: 10px 14px 10px 10px; text-decoration: none; }
.pc-im { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; }
.pc-im img { width: 100%; height: 100%; object-fit: cover; }
.pc-livre img { object-fit: contain; background: var(--papier); }
.pc-tx small { display: block; font: 700 11px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.pc-tx b { display: block; margin-top: 5px; font: 800 17px/1.15 var(--f); font-stretch: 112%; color: #fff; }
.pc-tx em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; }
.pc-fl { width: 18px; height: 18px; color: var(--rouge-clair); }
.pied-liens { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; }
.pied-liens nav { display: grid; gap: 10px; align-content: start; }
.pied-liens nav b { font: 800 13px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.pied-liens nav a { text-decoration: none; font-size: 15px; }
.pied-liens nav a:hover { color: #fff; }
.pied-salut { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 12px; }
.pied-masc { width: 92px; height: auto; flex: none; }
.bulle-salut { position: relative; background: #fff; color: var(--encre); border-radius: 18px 18px 18px 4px; padding: 14px 16px; font: 700 14.5px/1.4 var(--f); }
.bulle-salut small { display: block; margin-top: 6px; font: 600 12px/1 var(--f); color: var(--rouge); }
.pied-bas { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.haut-page { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; color: #fff; }
.haut-page svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ barre d'achat */
.barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 244, 231, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -1px 0 rgba(26, 24, 23, .1); transform: translateY(110%); transition: transform .3s ease; }
.barre.visible { transform: none; }
.barre-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.barre-tx { flex: 1; min-width: 0; }
.barre-tx b { display: block; font: 800 15px/1.15 var(--f); font-stretch: 112%; color: var(--encre); }
.barre-tx small { display: block; font-size: 12.5px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre .btn { min-height: 46px; padding: 12px 20px; }
.barre-livre { width: 40px; flex: none; }
.barre-livre img { border-radius: 3px 6px 6px 3px; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 70; background: var(--sumi); color: #fff; padding: 14px 18px; border-radius: 16px; font-size: 14.5px; max-width: calc(100vw - 32px); opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ page des visites */
.sejour-s { background: var(--blanc); }
.sejour-grille { display: grid; gap: 26px; }
.sejour-im { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; }
.sejour-im > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.stk-sejour { right: 12px; bottom: 12px; width: 120px; }
.sejour-s p { margin: 14px 0 0; font-size: 16.5px; }
/* « Deux semaines au Japon pour moins de 2 000 € ? » : ses mots (WhatsApp du 2026-10-14), la préparation reste incluse */
.sejour-budget { margin-top: 20px; padding: 18px 20px; border-radius: 20px; background: var(--rouge-pale); color: var(--encre); }
.sejour-budget b { display: block; font: 800 19px/1.2 var(--f); font-stretch: 112%; }
.sejour-s .sejour-budget p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; }
.sejour-budget small { display: block; margin-top: 8px; font-size: 13px; color: var(--rouge-f); }
.liste-coches { margin: 18px 0 22px; display: grid; gap: 10px; }
.liste-coches li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15.5px; line-height: 1.45; }
.liste-coches svg { width: 22px; height: 22px; }
.grille-exp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exp { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--ombre); }
.exp img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.exp span { display: block; padding: 12px 12px 14px; font-size: 13.5px; line-height: 1.35; }
.exp b { display: block; font: 800 15px/1.2 var(--f); color: var(--encre); margin-bottom: 4px; }
.journee { overflow: hidden; padding-bottom: 0; }
.reserver { background: var(--blanc); }
.journee-grille { display: grid; gap: 22px; }
.masc-jour { width: 110px; margin-top: 12px; }
.frise { display: grid; gap: 0; border-left: 3px solid var(--rouge); margin-left: 8px; }
.frise li { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 10px; padding: 0 0 22px 18px; }
.frise li::before { content: ""; position: absolute; left: -9px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--rouge); }
.frise .h { font: 800 16px/1.2 var(--f); color: var(--rouge); }
.frise b { display: block; font: 800 17px/1.2 var(--f); font-stretch: 112%; color: var(--encre); }
.frise span:not(.h) { display: block; margin-top: 4px; font-size: 15px; }
.reserver-grille { display: grid; gap: 22px; }
.r-tx p { margin-top: 12px; font-size: 16.5px; }
.masc-ecris { width: 110px; margin-top: 16px; }
.boite-form { background: #fff; border-radius: 26px; padding: 22px 18px; box-shadow: var(--ombre); position: relative; }
.form { display: grid; gap: 14px; }
.champ { display: grid; gap: 7px; }
.champ span { font: 700 14px/1.2 var(--f); color: var(--encre); }
.champ small { font-weight: 500; color: var(--gris); }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 50px; border-radius: 14px; border: 0; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--papier-2); padding: 12px 14px; font: 500 16px/1.3 var(--f); color: var(--encre); appearance: none; -webkit-appearance: none; }
.champ select { background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rouge); }
.deux { display: grid; gap: 14px; }
.estim { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; background: var(--rouge-pale); border-radius: 16px; padding: 14px 16px; }
.e-l { font: 700 12px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); }
.estim b { grid-row: span 2; font: 800 26px/1 var(--f); font-stretch: 112%; color: var(--encre); text-align: right; }
.estim small { font-size: 13px; color: var(--texte); }
.f-note { font-size: 12.5px; color: var(--gris); text-align: center; }
.envoye { display: none; text-align: center; padding: 20px 6px; }
.fait .form { display: none; }
.fait .envoye { display: block; }
.env-masc { width: 120px; margin: 0 auto 10px; }
.envoye .env-ref { margin: -6px 0 18px; font-size: 14px; color: var(--gris); }
.envoye .env-ref b { color: var(--encre); letter-spacing: .06em; }
.champ [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--rouge); }
.envoye h3 { font: 800 24px/1.1 var(--f); font-stretch: 112%; }
.envoye p { margin: 10px 0 18px; }

/* ------------------------------------------------------------------ page du guide */
.heros-guide { position: relative; padding: calc(var(--haut-entete) + 30px) 0 50px; overflow: hidden; background: var(--papier); }
.hg-grille { display: grid; gap: 28px; position: relative; }
.hg-livre { position: relative; display: grid; place-items: center; padding: 8px 0 26px; }
.livre-heros { width: min(240px, 60vw); }
.pr-heros { right: 4%; bottom: 0; transform: rotate(8deg); }
.heros-guide h1 { font: 800 40px/1.04 var(--f); font-stretch: var(--large); letter-spacing: -.015em; }
.heros-guide .sous { margin-top: 14px; font-size: 17px; }
.heros-guide .g-note { color: var(--gris); }
.liseuse .piste { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 6px var(--g) 18px; scrollbar-width: none; }
.liseuse .piste::-webkit-scrollbar { display: none; }
.pg { flex: none; width: 74vw; max-width: 330px; scroll-snap-align: center; border-radius: 10px; overflow: hidden; box-shadow: var(--ombre); position: relative; background: #fff; }
.pg img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.verrou { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; background: var(--sumi); color: #fff; padding: 12px 16px; border-radius: 999px; font: 700 14px/1 var(--f); white-space: nowrap; }
.verrou svg { width: 16px; height: 16px; }
.ls-ctrl { display: flex; align-items: center; gap: 12px; }
.ls-ctrl button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sumi); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.ls-ctrl button:disabled { opacity: .3; cursor: default; }
.ls-ctrl .prec svg { transform: rotate(180deg); }
.ls-ctrl button svg { width: 16px; height: 16px; }
.ls-ctrl input[type=range] { flex: 1; accent-color: var(--rouge); }
.ls-ctrl output { font: 700 13px/1 var(--f); color: var(--gris); white-space: nowrap; }
.dedans { background: var(--blanc); }
.dedans-grille { display: grid; gap: 22px; }
.masc-dedans { width: 110px; margin-top: 14px; display: none; }
.chapitres { display: grid; gap: 10px; }
.chapitres li { display: grid; grid-template-columns: 44px 30px 1fr; align-items: center; gap: 10px; background: var(--papier); border-radius: 18px; padding: 12px 14px 12px 10px; }
.ch-stk { width: 44px; height: 44px; object-fit: contain; }
.ch-n { font: 800 15px/1 var(--f); color: var(--rouge); }
.chapitres b { display: block; font: 800 15.5px/1.2 var(--f); color: var(--encre); }
.chapitres small { display: block; margin-top: 3px; font-size: 13.5px; }
.grille-profils { display: grid; gap: 14px; }
.profil { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--ombre); }
.profil img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.profil h3 { padding: 16px 16px 0; font: 800 19px/1.15 var(--f); font-stretch: 112%; }
.profil p { padding: 6px 16px 18px; font-size: 15px; }
.offre-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.offre-livre { display: grid; place-items: center; padding: 10px 0 20px; }
.livre-offre { width: min(220px, 56vw); }
.carte-offre { background: #fff; color: var(--texte); border-radius: 26px; padding: 24px 20px; }
.carte-offre .t { color: var(--encre); font-size: 26px; }
.prix-offre { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; }
.prix-offre b { font: 800 46px/1 var(--f); font-stretch: 112%; color: var(--encre); }
.prix-offre small { font-size: 13.5px; color: var(--gris); }
.prix-offre .bientot { align-self: center; display: inline-flex; padding: 7px 12px; border-radius: 999px; background: var(--rouge-pale); color: var(--rouge); font: 700 12px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.offre-note { margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--gris); text-align: center; }
.offre-note a { color: var(--encre); font-weight: 700; }

/* ------------------------------------------------------------------ le guide complet : itinéraires et contenu */
/* les quatre itinéraires (Arthur, visio du 2026-10-12), chaque durée dans l'ensō de son logo */
.itin { margin-top: 20px; }
.itin-tete { margin-bottom: 10px; font: 700 12px/1.2 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
.durees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.durees li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 4px 12px; border-radius: 16px; background: var(--sumi-2); text-align: center; }
.du-n { display: grid; place-items: center; width: 56px; height: 56px; background: url(img/logo/enso.svg) 50% 50% / contain no-repeat; font: 800 21px/1 var(--f); font-stretch: var(--large); color: #fff; }
.du-u { font: 700 13px/1.1 var(--f); color: rgba(255, 255, 255, .82); }
.itin-clair { margin-top: 0; }
.itin-clair .itin-tete { color: var(--rouge); }
.itin-clair .durees li { background: var(--papier); }
.itin-clair .du-n { color: var(--encre); }
.itin-clair .du-u { color: var(--texte); }
.dedans-corps { display: grid; gap: 14px; min-width: 0; }
.contenus { display: grid; gap: 10px; }
.contenus li { display: flex; align-items: center; gap: 12px; background: var(--papier); border-radius: 18px; padding: 10px 14px 10px 10px; }
.contenus b { display: block; font: 800 15.5px/1.2 var(--f); color: var(--encre); }
.contenus small { display: block; margin-top: 3px; font-size: 13.5px; }

/* ------------------------------------------------------------------ préparer ton voyage : les liens partenaires */
/* trains, avions, hôtels, activités (Arthur, visio du 2026-10-12) : /go/<id>, sobres, avec la mention « liens partenaires » */
.preparer { margin-top: 22px; background: var(--papier); border-radius: 24px; padding: 20px 16px 16px; }
.pr-tete h3 { font: 800 21px/1.1 var(--f); font-stretch: 112%; color: var(--encre); }
.preparer .pr-tete p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
.pr-liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.pr-liens li { min-width: 0; }
.pr-liens li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pr-lien { position: relative; display: grid; align-content: start; gap: 10px; height: 100%; padding: 14px 12px; border-radius: 18px; background: #fff; box-shadow: var(--ombre); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.pr-lien:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(26, 24, 23, .08), 0 14px 30px rgba(26, 24, 23, .12); }
.pr-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--rouge-pale); color: var(--rouge); }
.pr-ic svg { width: 22px; height: 22px; }
.pr-tx b { display: block; font: 800 16px/1.15 var(--f); font-stretch: 112%; color: var(--encre); }
.pr-tx small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--gris); }
.pr-fl { position: absolute; right: 12px; top: 14px; width: 14px; height: 14px; color: var(--gris); }
.preparer .pr-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--gris); }
.sejour-s .preparer { margin-top: 34px; }
.attente .preparer { background: #fff; box-shadow: var(--ombre); }
.attente .pr-lien { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--papier-2); }
.attente-ctas { justify-content: center; margin-top: 26px; }

/* ------------------------------------------------------------------ les avis de ses voyageurs (avis-clients.json) */
.blanc { background: var(--blanc); }
.avis-cl.blanc + .reserver { padding-top: 0; }
.ac-tete { position: relative; }
.masc-ac { display: none; }
.ac-liste { display: grid; gap: 14px; align-items: start; }
.ac-carte { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: #fff; border-radius: 22px; padding: 16px 18px 16px; box-shadow: var(--ombre); }
.ac-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
.ac-guil { display: block; font: 800 38px/1 var(--f); color: var(--rouge); }
.ac-etoiles { display: inline-flex; gap: 2px; }
.ac-etoiles svg { width: 18px; height: 18px; }
.ac-etoiles .on { fill: var(--or); }
.ac-etoiles .off { fill: #E7DCC8; }
.ac-src { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 11px 4px 4px; border-radius: 999px; background: var(--papier); font: 700 12.5px/1 var(--f); color: var(--encre); text-decoration: none; white-space: nowrap; }
.ac-src img { width: 24px; height: 24px; border-radius: 7px; }
.ac-src svg { width: 11px; height: 11px; color: var(--gris); }
span.ac-src { padding-left: 11px; }
span.ac-src:has(img) { padding-left: 4px; }
.ac-texte { margin: 0; font: 600 16.5px/1.5 var(--f); color: var(--encre); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.ac-texte p + p { margin-top: 8px; }
.ac-carte.ouvert .ac-texte { display: block; -webkit-line-clamp: none; overflow: visible; }
.ac-lire { align-self: flex-start; margin-top: -6px; min-height: 32px; padding: 0; border: 0; background: none; font: 700 14px/1 var(--f); color: var(--rouge); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ac-qui { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--papier-2); }
.ac-ini { display: grid; place-items: center; flex: none; width: 44px; height: 44px; background: url(img/logo/enso.svg) 50% 50% / contain no-repeat; font: 800 17px/1 var(--f); font-stretch: var(--large); color: var(--encre); }
.ac-qui b { display: block; font: 800 15.5px/1.2 var(--f); color: var(--encre); }
.ac-qui small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.3; color: var(--gris); }
.pj-glisser.ac-glisser, .ac-plus { display: none; }
/* sur un fond blanc (page des visites), les cartes passent sur le papier, comme les étapes */
.avis-cl.blanc .ac-carte { background: var(--papier); box-shadow: none; }
.avis-cl.blanc .ac-src { background: #fff; }

/* ------------------------------------------------------------------ demande de visite : créneau, champ piège, erreur */
.creneaux { margin: 0; padding: 0; border: 0; min-width: 0; }
.creneaux legend { padding: 0; margin-bottom: 7px; font: 700 14px/1.2 var(--f); color: var(--encre); }
.creneaux legend small { font-weight: 500; color: var(--gris); }
.cr-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.cr { position: relative; display: inline-flex; }
.cr input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cr span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--papier-2); font: 600 15px/1 var(--f); color: var(--encre); transition: background .15s ease, color .15s ease; }
.cr input:checked + span { background: var(--sumi); color: #fff; box-shadow: none; }
.cr input:focus-visible + span { outline: 3px solid var(--rouge); outline-offset: 2px; }
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.f-erreur { padding: 12px 14px; border-radius: 14px; background: var(--rouge-pale); color: var(--rouge-f); font: 600 14.5px/1.4 var(--f); }
.btn[disabled] { opacity: .65; cursor: progress; }

/* ------------------------------------------------------------------ achat du guide (Worker de production : POST /acheter) */
.achat { display: grid; gap: 12px; margin-top: 2px; }
.accord { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.45; color: var(--texte); cursor: pointer; }
.accord input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; background: var(--papier); box-shadow: inset 0 0 0 1.5px rgba(26, 24, 23, .32); cursor: pointer; }
.accord input:checked { background: var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.2l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 20px no-repeat; box-shadow: none; }
.accord input:focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; }
.accord a { color: var(--encre); font-weight: 700; }
.achat .btn { margin-top: 4px; }

/* ------------------------------------------------------------------ pages légales (mentions, confidentialité, CGV) */
.s.legal { padding-top: calc(var(--haut-entete) + 40px); }
.doc { max-width: 820px; }
.doc .maj { margin-top: 12px; font-size: 14px; color: var(--gris); }
.doc .intro { max-width: none; }
.doc section { margin-top: 34px; padding-top: 28px; border-top: 1.5px dashed var(--papier-2); }
.doc h2 { font: 800 21px/1.2 var(--f); font-stretch: 112%; color: var(--encre); }
.doc h3 { margin-top: 22px; font: 700 16.5px/1.3 var(--f); color: var(--encre); }
.doc p, .doc ul, .doc dl { margin-top: 12px; }
.doc ul { padding-left: 1.2em; list-style: disc; }
.doc li + li { margin-top: 6px; }
.doc strong { color: var(--encre); }
.doc a { color: var(--rouge-f); text-underline-offset: 3px; }
.fiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 20px; margin: 14px 0 0; padding: 16px 18px; border-radius: 20px; background: #fff; box-shadow: var(--ombre); }
.fiche dt { margin-top: 10px; font: 700 11.5px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.fiche dt:first-child { margin-top: 0; }
.fiche dd { margin: 0; color: var(--encre); overflow-wrap: anywhere; }
mark.todo { padding: 1px 8px; border-radius: 6px; background: var(--rouge-pale); color: var(--rouge-f); font-weight: 700; font-size: .92em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.note-vente { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--rouge-pale); color: var(--encre); font-weight: 600; }
.pied-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pied-legal a { padding: 6px 0; text-decoration: none; }
.pied-legal a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------ pages d'aperçu des liens partenaires (go/<id>/) */
.s.final.go-page { min-height: 70vh; padding: calc(var(--haut-entete) + 70px) 0 80px; }
.go-tx { max-width: 520px; margin: 14px auto 0; font-size: 16.5px; }

/* ------------------------------------------------------------------ tablette */
@media (min-width: 600px) {
  :root { --g: 28px; }
  .t { font-size: 38px; }
  .grille-visites { grid-template-columns: 1fr 1fr; }
  .tarifs { margin-top: 24px; padding: 26px 30px 12px; }
  .tarifs caption { font-size: 24px; padding-bottom: 12px; }
  .tarifs th, .tarifs td { padding: 14px 12px; }
  .tarifs tbody th { font-size: 16px; }
  .tarifs tbody td { font-size: 22px; }
  .carte-sejour { grid-template-columns: 1fr 1fr; }
  .cs-im { aspect-ratio: auto; min-height: 100%; }
  .cs-tx { padding: 30px 28px; align-content: center; }
  .grille-exp { grid-template-columns: repeat(4, 1fr); }
  .grille-profils { grid-template-columns: repeat(3, 1fr); }
  .deux { grid-template-columns: 1fr 1fr; }
  .g-it { width: 220px; }
  .heros-carte { max-width: 460px; }
  .livre .p1 { transform: translate(28%, 4%) rotate(9deg); }
  .livre .p2 { transform: translate(-26%, 5%) rotate(-9deg); }
}

/* ------------------------------------------------------------------ ordinateur */
@media (min-width: 900px) {
  :root { --haut-entete: 78px; }
  .s { padding: 104px 0; }
  .t { font-size: 46px; }
  .logo { width: 92px; height: 69px; }
  .principale { display: flex; gap: 26px; margin-right: 10px; }
  .principale a { text-decoration: none; font: 600 15.5px/1 var(--f); color: var(--encre); padding: 8px 0; position: relative; }
  .principale a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--rouge); }
  .haut.sur-photo:not(.colle) .principale a { color: #fff; }
  .haut .btn-entete { display: inline-flex; }
  .burger { display: none; }
  .heros-in { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 36vw, 520px); grid-template-areas: "tx visuel" "carte carte"; column-gap: clamp(40px, 5vw, 72px); align-items: center; padding-top: calc(var(--haut-entete) + 44px); padding-bottom: 0; }
  .heros-visuel { grid-area: visuel; margin: 0; height: auto; aspect-ratio: 1 / 1; isolation: isolate; }
  .heros-visuel::after { display: none; }
  .heros-photo { z-index: 1; inset: auto; left: 15%; top: 50%; width: 70%; height: auto; aspect-ratio: 4 / 5; transform: translateY(-50%); border-radius: 28px; box-shadow: 0 28px 60px rgba(0, 0, 0, .45); }
  .hv-enso { display: block; position: absolute; z-index: 0; left: 50%; top: 50%; width: 112%; max-width: none; height: auto; transform: translate(-50%, -50%); pointer-events: none; }
  .hv-masc { display: block; position: absolute; z-index: 2; left: 2%; bottom: 0; width: 27%; height: auto; pointer-events: none; }
  .hv-stk { display: block; position: absolute; z-index: 2; right: 5%; top: 1%; width: 20%; height: auto; transform: rotate(10deg); pointer-events: none; }
  .heros-tx { grid-area: tx; margin-top: 0; }
  .heros h1 { font-size: clamp(54px, 5.4vw, 76px); }
  .heros .sous { font-size: 19px; }
  .heros .ctas .btn { flex: none; }
  .heros-carte { grid-area: carte; z-index: 3; margin: 64px 0 -58px; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tete btn" "liste liste"; gap: 16px 24px; align-items: center; padding: 22px 22px 22px 28px; }
  .hc-masc { display: none; }
  .hc-tete { grid-area: tete; }
  .hc-liste { grid-area: liste; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
  .heros-carte .btn { grid-area: btn; width: auto; }
  .heros-page .heros-in { grid-template-areas: "tx visuel"; padding-bottom: 96px; }
  /* le mur de ses voyageurs en plein fond, le titre dans une carte sumi (les quatre propositions) */
  .heros-preuve { font-size: 15px; margin-top: 22px; }
  .heros--mur { min-height: 860px; }
  .heros--mur .heros-in { position: static; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); grid-template-areas: "tx ." "carte carte"; padding-top: calc(var(--haut-entete) + 70px); }
  .heros--mur .hv-zone { position: absolute; inset: 0; margin: 0; height: auto; }
  .heros--mur .hv-defile::before { height: 190px; }
  .heros--mur .hv-defile::after { height: 120px; }
  .heros--mur .hv-pause { right: max(var(--g), calc((100vw - 1240px) / 2 + var(--g))); bottom: 128px; }
  .heros--mur .heros-tx { position: relative; z-index: 2; padding: 42px 46px 36px; border-radius: 32px; background: var(--sumi); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
  .heros--mur h1 { font-size: clamp(50px, 4.6vw, 64px); }
  .heros--mur .heros-carte { position: relative; }
  .mur { --tuile: 172px; --ecart: 14px; }
  .mur-tuile { border-radius: 20px; }
  .bandeau-preuves { padding-top: 92px; }
  .bandeau-preuves .conteneur { justify-content: center; overflow: visible; }
  .grille-visites { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .stk-visites { right: 40px; top: 60px; width: 96px; }
  .stk-visites ~ .conteneur .tete-s .t { padding-right: 0; }
  .carte-sejour { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: 440px; margin-top: 24px; }
  .cs-tx { padding: 44px 52px 44px 48px; gap: 12px; }
  .cs-tx b { font-size: 34px; }
  .cs-desc { font-size: 16.5px; max-width: 520px; }
  .cs-route { margin: 52px 0 6px; max-width: 540px; }
  .cs-arret { font-size: 13.5px; }
  .cs-train { width: 96px; top: -56px; }
  .etapes { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .etape { padding: 120px 20px 22px; text-align: center; }
  .et-masc { left: 50%; top: -22px; bottom: auto; transform: translateX(-50%); width: auto; height: 128px; }
  .transparence { max-width: 820px; margin: 30px auto 0; }
  .avis-grille { grid-template-columns: 1fr 380px; align-items: center; gap: 70px; justify-items: stretch; }
  .avis-tx .t { padding-right: 0; font-size: 52px; }
  .masc-avis { position: static; width: 150px; margin-top: 26px; }
  .tel { width: 380px; justify-self: center; }
  .galerie { justify-content: center; margin-top: 56px; }
  .guide-grille { grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; }
  .livre { width: 300px; }
  /* éventail plus serré et livre réduit entre 900 et 1300 px : les pages déployées restaient sous le titre (jusqu'à 77 px à 900 px) */
  .livre-accueil { width: clamp(250px, 12vw + 130px, 300px); }
  .livre .p1 { transform: translate(19%, 3%) rotate(6deg); }
  .livre .p2 { transform: translate(-19%, 4%) rotate(-6deg); }
  .pr-accueil { left: 6%; bottom: 10px; width: 110px; height: 110px; }
  .pr-accueil b { font-size: 30px; }
  .moi-grille { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
  .moi-photos { height: 560px; }
  .mp-1 { height: 480px; }
  .mp-2 { height: 300px; }
  .boite { grid-template-columns: 1.15fr 1fr; padding: 44px; gap: 40px; align-items: center; }
  .esim-offre { margin-top: 74px; padding: 22px 18px 18px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .masc-pj { position: absolute; right: 6px; top: -64px; width: 96px; }
  .code { flex-wrap: nowrap; }
  .code-note { text-align: right; }
  .code-note br { display: inline; }
  .pj-glisser { display: none; }
  .faq-grille { grid-template-columns: 380px 1fr; gap: 60px; align-items: start; }
  .faq-tete { position: sticky; top: 110px; }
  .masc-faq { display: block; width: 150px; margin-top: 24px; }
  .final { padding: 110px 0 0; }
  .masc-final { width: 140px; }
  .pied-haut { grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; }
  .logo.logo-xl { width: 240px; }
  .pied-liens { grid-template-columns: repeat(3, 1fr) 1.6fr; gap: 30px; }
  .pied-salut { grid-column: auto; }
  .sejour-grille { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .journee-grille { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
  .reserver-grille { grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
  .boite-form { padding: 32px 30px; }
  .hg-grille { grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; min-height: clamp(420px, 40vw, 560px); }
  .livre-heros { width: clamp(250px, 16vw + 100px, 330px); }
  .pr-heros { right: 10%; width: 112px; height: 112px; }
  .heros-guide h1 { font-size: 66px; }
  .heros-guide { padding: calc(var(--haut-entete) + 50px) 0 80px; }
  .pg { width: 300px; scroll-snap-align: start; }
  .liseuse .piste { padding-left: max(var(--g), calc((100vw - 1240px) / 2 + var(--g))); }
  .dedans-grille { grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; }
  .masc-dedans { display: block; width: 150px; }
  .chapitres { grid-template-columns: 1fr 1fr; }
  .offre-grille { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
  .livre-offre { width: 300px; }
  .carte-offre { padding: 34px 32px; }
}
@media (min-width: 1200px) {
  .tarifs thead th, .tarifs tbody td { width: 150px; }
  .t { font-size: 50px; }
}
/* ------------------------------------------------------------------ guide complet, avis, liens partenaires : au-delà du téléphone */
@media (max-width: 899px) {
  /* plus de trois avis : carrousel horizontal, la carte suivante dépasse (la page ne doit jamais paraître infinie) */
  .ac-defile { grid-auto-flow: column; grid-auto-columns: min(86%, 420px); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--g)); padding: 4px var(--g) 14px; scroll-padding: 0 var(--g); scrollbar-width: none; }
  .ac-defile::-webkit-scrollbar { display: none; }
  .ac-defile .ac-carte { scroll-snap-align: start; }
  .pj-glisser.ac-glisser { display: flex; margin-top: 4px; }
}
@media (max-width: 639px) {
  /* téléphone : des tuiles en ligne, l'icône à gauche (deux rangées de deux, pas une colonne de quatre cartes) */
  .pr-lien { grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px 10px; }
  .pr-ic { width: 34px; height: 34px; }
  .pr-ic svg { width: 18px; height: 18px; }
  .pr-tx b { font-size: 14.5px; font-stretch: 100%; }
  .pr-tx small { margin-top: 2px; font-size: 12px; line-height: 1.3; }
  .pr-fl { display: none; }
}
@media (min-width: 640px) {
  .pr-liens { grid-template-columns: repeat(var(--nb, 4), minmax(0, 1fr)); }
  .pr-liens li:last-child:nth-child(odd) { grid-column: auto; }
  .durees { gap: 10px; }
}
@media (min-width: 640px) {
  .fiche { grid-template-columns: 200px minmax(0, 1fr); padding: 20px 24px; }
  .fiche dt { margin-top: 0; padding-top: 4px; }
  .fiche dt, .fiche dd { padding-block: 6px; }
}
@media (min-width: 900px) {
  .s.legal { padding-top: calc(var(--haut-entete) + 64px); }
  .doc h2 { font-size: 24px; }
  .du-n { width: 62px; height: 62px; font-size: 23px; }
  .itin-clair .du-n { width: 74px; height: 74px; font-size: 28px; }
  .itin-clair .du-u { font-size: 14px; }
  .itin-clair .durees li { padding: 14px 6px 16px; gap: 6px; }
  .contenus li { padding: 12px 16px 12px 12px; }
  .dedans-corps { gap: 18px; }
  .preparer { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-areas: "tete liens" "note liens"; grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 12px; align-items: start; padding: 30px 30px 30px 34px; margin-top: 30px; }
  .pr-tete { grid-area: tete; }
  .pr-tete h3 { font-size: 24px; }
  .pr-liens { grid-area: liens; margin-top: 0; gap: 12px; }
  .preparer .pr-note { grid-area: note; margin-top: 0; align-self: end; }
  .pr-lien { padding: 18px 16px; gap: 14px; }
  .sejour-s .preparer { margin-top: 64px; }
  .ac-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .masc-ac { display: block; flex: none; width: 128px; height: auto; margin-bottom: -6px; }
  /* ordinateur : une grille, cartes d'une même rangée à la même hauteur et pieds alignés (les longs avis sont coupés à 7 lignes) */
  .ac-liste { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; align-items: stretch; }
  .ac-qui { margin-top: auto; }
  .ac-n1 { max-width: 720px; }
  .ac-liste:not(.tout) > .ac-carte:nth-child(n + 7) { display: none; }
  .ac-plus { display: flex; width: fit-content; margin: 24px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}