/* ═══════════════════════════════════════════════════════════════════════
   LE MOUVEMENT — questionnaire, calendrier, itinéraire
   ─────────────────────────────────────────────────────────────────────
   Charlotte, le 3 octobre : « le questionnaire de manière générale à
   moderniser… pareil dans le rendu de l'itinéraire… mets tes meilleures
   compétences motion design pour faire quelque chose de sublime ».

   Ce fichier ne change pas ce que les écrans FONT : il change comment
   ils arrivent, répondent et s'en vont. Trois principes :

     1. TOUT CE QUI APPARAÎT MONTE. Une carte qui devient active fait
        entrer son titre, puis ses options, l'une après l'autre (45 ms
        d'écart) : l'œil est conduit, rien ne surgit d'un bloc.
     2. CE QU'ON TOUCHE RÉPOND. Une option cochée se colore d'une teinte,
        pas d'un aplat ; la coche se dessine ; le bouton s'enfonce un
        rien. Rien ne dure plus de 400 ms : le mouvement sert la main,
        il ne la fait pas attendre.
     3. LE CALME EST LA RÈGLE. prefers-reduced-motion coupe tout
        (core.css) ; ici, aucune boucle, aucun clignotement.

   Les jetons sont ceux de da.css (accent saisonnier, rayons, ressort). */

@keyframes mv-monte{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes mv-pop{ 0%{ transform:scale(.6); opacity:0 } 60%{ transform:scale(1.08); opacity:1 } 100%{ transform:scale(1) } }
@keyframes mv-coche{ from{ transform:scale(.3) rotate(-12deg); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes mv-trait{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes mv-glisse-d{ from{ opacity:0; transform:translateX(22px) } to{ opacity:1; transform:none } }
@keyframes mv-glisse-g{ from{ opacity:0; transform:translateX(-22px) } to{ opacity:1; transform:none } }
@keyframes mv-fondu{ from{ opacity:0 } to{ opacity:1 } }/* Les variables :root de cette feuille vivent dans tokens.css (chantier B1). */

/* ══ 1. LE QUESTIONNAIRE ═══════════════════════════════════════════════ */

/* La carte : plus de grande ombre portée, une feuille posée. */
.dcard{
  border-radius:var(--r-xl);
  padding:22px 20px 20px;
  box-shadow:0 1px 2px var(--encre-a4), 0 28px 60px -34px var(--encre-a32);
  transition:transform var(--mv-lent) var(--mv-ressort), opacity var(--mv-normal) var(--mv-sortie);
}
.dcard .d-num{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:var(--t-micro); font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--accent-texte,var(--accent)); margin-bottom:8px;
}
.dcard .d-num::before{ content:''; width:18px; height:2px; border-radius:2px; background:currentColor; opacity:.55 }
.dcard .d-q{ font-size:var(--t-titre); letter-spacing:-.035em; line-height:1.08 }
.dcard .d-q em{ font-style:normal; color:var(--accent-texte,var(--accent)) }
.dcard .d-s{ font-size:var(--t-petit); line-height:1.5; margin-top:8px; color:var(--sub) }
.dcard .d-body{ margin-top:16px }

/* L'entrée en cascade : seulement quand la carte DEVIENT active
   (classe « entre », posée par positionDeck puis retirée). */
.dcard.entre .d-num, .dcard.entre .d-q, .dcard.entre .d-s{ animation:mv-monte var(--mv-lent) var(--mv-sortie) both }
.dcard.entre .d-q{ animation-delay:.05s }
.dcard.entre .d-s{ animation-delay:.1s }
.dcard.entre .d-body > *{ animation:mv-monte var(--mv-lent) var(--mv-sortie) both; animation-delay:calc(.14s + min(var(--i,0), 10) * 45ms) }
.dcard.entre :is(.pick-list, .occ-grid, .chips) > *{ animation:mv-monte var(--mv-lent) var(--mv-sortie) both; animation-delay:calc(.18s + min(var(--i,0), 12) * 35ms) }
.dcard.entre .d-foot{ animation:mv-monte var(--mv-lent) var(--mv-sortie) .32s both }

/* Les options : une surface claire, un filet, et une teinte quand c'est
   choisi — plus d'aplat rouge à texte blanc. */
.radio-it, .occ, .pick-it, .mode-btn{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 1px 0 var(--encre-a3);
  transition:transform var(--mv-rapide) var(--mv-ressort), border-color var(--mv-rapide) var(--mv-sortie), background var(--mv-rapide) var(--mv-sortie), box-shadow var(--mv-rapide) var(--mv-sortie);
}
.radio-it{ padding:16px 16px; margin-bottom:8px }
.occ{ padding:16px 16px }
.mode-btn{ padding:16px; margin-bottom:12px }
@media (hover:hover){
  .radio-it:hover, .occ:hover, .pick-it:hover, .mode-btn:hover{
    border-color:var(--line2); transform:translateY(-1px);
    box-shadow:0 12px 26px -20px var(--encre-a45);
  }
}
.radio-it:active, .occ:active, .pick-it:active, .mode-btn:active{ transform:scale(.985) }
.radio-it.on, .occ.on, .pick-it.on, .mode-btn.on{
  background:var(--accent-tint); border-color:var(--accent); color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.radio-it.on .ra-t, .occ.on .o-t, .radio-it.on .ra-d, .occ.on .o-d{ color:var(--ink) }
.radio-it.on .ra-d, .occ.on .o-d{ color:var(--ink-soft) }
.occ .o-d{ font-size:var(--t-micro) }
.radio-it .ra-dot{
  width:22px; height:22px; border:1.5px solid var(--line2); background:var(--surface);
  transition:background var(--mv-rapide) var(--mv-sortie), border-color var(--mv-rapide) var(--mv-sortie), box-shadow var(--mv-normal) var(--mv-ressort);
}
.radio-it.on .ra-dot{
  background:var(--accent); border-color:var(--accent);
  box-shadow:inset 0 0 0 4px var(--surface);
  animation:mv-pop var(--mv-lent) var(--mv-ressort);
}
.pick-it{ border-radius:var(--r-md); padding:12px 16px; min-height:var(--b-md) }
.pick-it .pk-box{
  width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line2);
  transition:background var(--mv-rapide) var(--mv-sortie), border-color var(--mv-rapide) var(--mv-sortie), transform var(--mv-normal) var(--mv-ressort);
}
.pick-it.on .pk-box{ background:var(--accent); border-color:var(--accent); transform:scale(1.05) }
.pick-it.on .pk-box svg{ animation:mv-coche var(--mv-normal) var(--mv-ressort) both; stroke:var(--blanc) }
.pick-it.pick-deduit .pk-box{ background:var(--accent); border-color:var(--accent) }

/* Les champs */
.dcard .input{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color var(--mv-rapide) var(--mv-sortie), box-shadow var(--mv-rapide) var(--mv-sortie);
}
.dcard .input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); outline:none }

/* Le compteur de voyageurs */
.stepper button{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  transition:transform var(--mv-rapide) var(--mv-ressort), border-color var(--mv-rapide) var(--mv-sortie), background var(--mv-rapide) var(--mv-sortie);
}
@media (hover:hover){ .stepper button:hover{ border-color:var(--accent); background:var(--accent-tint) } }
.stepper .st-n{ font-size:64px; letter-spacing:-.04em; transition:transform var(--mv-normal) var(--mv-ressort) }

/* La progression : une barre vivante, un compte lisible */
.deck-bar{ height:4px; border-radius:4px; background:var(--n-2) }
.deck-bar i{
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--blanc)));
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  transition:width var(--mv-lent) var(--mv-sortie);
}
.deck-back{ transition:transform var(--mv-rapide) var(--mv-ressort), opacity var(--mv-rapide) var(--mv-sortie) }

/* Le bouton du pied */
.dcard .d-foot .btn{
  transition:transform var(--mv-rapide) var(--mv-ressort), box-shadow var(--mv-normal) var(--mv-sortie), background var(--mv-rapide) var(--mv-sortie);
  box-shadow:0 14px 28px -16px color-mix(in srgb, var(--accent) 65%, transparent);
}
.dcard .d-foot .btn:active{ transform:scale(.98) }
@media (hover:hover){ .dcard .d-foot .btn:hover{ transform:translateY(-1px); box-shadow:0 18px 34px -16px color-mix(in srgb, var(--accent) 70%, transparent) } }

/* ══ 2. LE CALENDRIER ══════════════════════════════════════════════════ */
.hscal{ margin-top:4px; --hc:44px }  /* 44 : la portée du doigt (banc-zone-tactile) */
.hscal-raccourcis{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px }
.hscal-vite{
  flex:1 1 auto; height:var(--b-md); padding:0 12px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-petit); font-weight:600; cursor:pointer; white-space:nowrap;
  transition:transform var(--mv-rapide) var(--mv-ressort), border-color var(--mv-rapide) var(--mv-sortie), background var(--mv-rapide) var(--mv-sortie), color var(--mv-rapide) var(--mv-sortie);
}
.hscal-vite:active{ transform:scale(.96) }
@media (hover:hover){ .hscal-vite:hover{ border-color:var(--accent); color:var(--accent-texte,var(--accent)) } }
.hscal-vite.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.hscal-tete{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px }
.hscal-t{ font-family:var(--serif); font-weight:700; font-size:var(--t-carte); letter-spacing:-.02em; text-transform:none; color:var(--ink) }
.hscal-b{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; padding:0;
  transition:transform var(--mv-rapide) var(--mv-ressort), border-color var(--mv-rapide) var(--mv-sortie), background var(--mv-rapide) var(--mv-sortie), opacity var(--mv-rapide) var(--mv-sortie);
}
.hscal-b svg{ width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.hscal-b:active{ transform:scale(.92) }
@media (hover:hover){ .hscal-b:hover{ border-color:var(--accent); background:var(--accent-tint) } }
.hscal-b.off{ opacity:.28; pointer-events:none }
.hscal-feuille{ display:grid; grid-template-columns:1fr; gap:22px; touch-action:pan-y }
.hscal-feuille[data-mois="2"]{ grid-template-columns:1fr 1fr; gap:28px }
.hscal-feuille.glisse-d{ animation:mv-glisse-d var(--mv-normal) var(--mv-sortie) }
.hscal-feuille.glisse-g{ animation:mv-glisse-g var(--mv-normal) var(--mv-sortie) }
.hscal-mois-t{ display:none; font-family:var(--serif); font-weight:600; font-size:var(--t-corps); color:var(--ink); margin:2px 0 8px }
.hscal-mois-t span{ color:var(--ink-faint); font-weight:600 }
.hscal-feuille[data-mois="2"] .hscal-mois-t{ display:block }
/* À deux mois, chaque mois porte son nom : le titre commun ne reste que
   pour les lecteurs d'écran et le banc. */
.hscal-t.double{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.hscal-tete:has(.hscal-t.double){ justify-content:space-between; margin-bottom:8px }
.hscal-wk{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px }
.hscal-wk span{ text-align:center; font-family:var(--sans); font-size:var(--t-micro); font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--ink-faint); padding:8px 0 }
.hscal-g{ display:grid; grid-template-columns:repeat(7,1fr); row-gap:2px }
.hscal-c{
  position:relative; height:var(--hc); display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; background:none; padding:0; font:inherit; color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.hscal-c.vide, .hscal-c.passe{ cursor:default }
.hscal-n{
  position:relative; z-index:2; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:var(--t-corps); font-feature-settings:"tnum" 1; color:var(--ink);
  transition:background var(--mv-rapide) var(--mv-sortie), color var(--mv-rapide) var(--mv-sortie), transform var(--mv-normal) var(--mv-ressort), box-shadow var(--mv-rapide) var(--mv-sortie);
}
@media (hover:hover){ .hscal-c:not(.passe):not(.vide):hover .hscal-n{ background:var(--n-2) } }
.hscal-c.passe .hscal-n{ color:var(--ink-faint); opacity:.4 }
.hscal-c.auj .hscal-n::after{ content:''; position:absolute; bottom:3px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--accent) }
.hscal-c.deb.auj .hscal-n::after, .hscal-c.fin.auj .hscal-n::after{ background:var(--blanc) }
.hscal-band{ position:absolute; top:4px; bottom:4px; left:0; right:0; display:none; background:var(--accent-tint) }
.hscal-c.dans .hscal-band, .hscal-c.apercu .hscal-band{ display:block }
.hscal-c.apercu .hscal-band{ opacity:.55 }
.hscal-c.deb .hscal-band{ display:block; left:50%; border-radius:0 }
.hscal-c.fin .hscal-band, .hscal-c.apercu-fin .hscal-band{ display:block; right:50% }
.hscal-c.apercu-fin .hscal-band{ opacity:.55 }
.hscal-c.deb:not(.fin) .hscal-band{ display:block }
.hscal-c.deb.fin .hscal-band{ display:none }
/* Le départ seul n'a pas encore de bande : rien à sa droite. */
.hscal-c.deb.seule .hscal-band{ display:none }
.hscal-c.deb .hscal-n, .hscal-c.fin .hscal-n{ background:var(--accent); color:var(--accent-ink); font-weight:600; box-shadow:0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent) }
.hscal-c.apercu-fin .hscal-n{ box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent-texte,var(--accent)) }
.hscal-c.pop .hscal-n{ animation:mv-pop var(--mv-lent) var(--mv-ressort) }
.hscal-r{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  font-size:var(--t-petit); color:var(--ink-soft); animation:mv-fondu var(--mv-normal) var(--mv-sortie);
}
.hscal-r b{ font-family:var(--serif); font-weight:600; color:var(--ink); font-size:var(--t-corps) }
.hscal-nuits{ padding:4px 12px; border-radius:var(--r-pill); background:var(--accent-tint); color:var(--accent-texte,var(--accent)); font-weight:600; font-size:var(--t-petit) }
.hscal-suite{ color:var(--sub) }
.hscal-vider{ margin-left:auto; border:none; background:none; color:var(--sub); font:inherit; font-size:var(--t-petit); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:4px 0 }
.hscal-vider:hover{ color:var(--ink) }

/* ══ 3. L'ITINÉRAIRE ═══════════════════════════════════════════════════ */

/* La photo suit le défilement un peu moins vite que la page (--defile
   posé par hsItinParallaxe, app.js) : elle a de la profondeur. */
.ov[data-ov="itinerary"] .itn-hero-photo.dd-hero{
  transform:translateY(calc(var(--defile, 0) * .32px));
  will-change:transform;
}
/* Les onglets : le trait se tire, il n'apparaît pas */
.itn-tab{ transition:color var(--mv-rapide) var(--mv-sortie) }
.itn-tab.on::after{ animation:mv-trait var(--mv-normal) var(--mv-sortie) both; transform-origin:left center }
/* Les sauts de journée répondent */
.itn-saut.on{ animation:mv-pop var(--mv-normal) var(--mv-ressort) }
/* Les cartes de journée arrivent en montant. Le flou qui les
   accompagnait s'en va (5 octobre) : un filtre animé se repeint à chaque
   image sur iPhone, et il tombait pile pendant l'ouverture du voyage. */
.itn-day{ border-radius:var(--r-lg); transition:box-shadow var(--mv-normal) var(--mv-sortie) }
.itn-day.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--mv-lent) var(--mv-sortie), transform var(--mv-lent) var(--mv-sortie);
}
.itn-day.reveal.in{ opacity:1; transform:none }
@media (hover:hover){ .itn-day:hover{ box-shadow:0 22px 44px -32px var(--encre-a50) } }
/* Le bandeau : la photo respire quand la carte est survolée */
.itn-dhead{ overflow:hidden }
.itn-dhead .itn-dph.has-photo{ transition:opacity var(--mv-lent) var(--mv-sortie), transform 6s ease }
@media (hover:hover){ .itn-day:hover .itn-dph.has-photo{ transform:scale(1.05) } }
/* Le programme s'ouvre : les lignes arrivent l'une après l'autre */
.itn-day.open .itn-day-prog > *{ animation:mv-monte var(--mv-lent) var(--mv-sortie) both }
.itn-day.open .itn-day-prog > :nth-child(2){ animation-delay:.05s }
.itn-day.open .itn-day-prog > :nth-child(3){ animation-delay:.1s }
.itn-day.open .itn-day-prog > :nth-child(4){ animation-delay:.15s }
.itn-day.open .itn-day-prog > :nth-child(5){ animation-delay:.2s }
.itn-day.open .itn-day-prog > :nth-child(n+6){ animation-delay:.25s }
.itn-day-chev svg{ transition:transform var(--mv-lent) var(--mv-ressort), background var(--mv-rapide) var(--mv-sortie) }
.itn-day-chev{ transition:color var(--mv-rapide) var(--mv-sortie) }
@media (hover:hover){ .itn-day-main:hover .itn-day-chev svg{ background:var(--accent-tint) } }
/* Les heures du résumé : des étiquettes, pas du texte nu */
.itn-dmo{ grid-template-columns:52px 20px 1fr }
/* … sauf la ligne « +1 moment », qui n'a ni heure ni icône : chargée
   après da.css, la règle ci-dessus la remettait en trois colonnes et
   « moment » passait à la ligne sous « +1 » (audit du 7 octobre). */
.itn-dmo.itn-dmo-plus{ grid-template-columns:1fr; white-space:nowrap }
.itn-dmo-h{ display:inline-block; background:var(--n-2); border-radius:7px; padding:2px 8px; font-size:var(--t-micro); width:max-content; line-height:1.4 }
/* L'hébergement répond au doigt */
.itn-stay{ transition:transform var(--mv-rapide) var(--mv-ressort), background var(--mv-rapide) var(--mv-sortie) }
.itn-stay:active{ transform:scale(.99) }