/* ═══════════════════════════════════════════════════════════════════════
   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 } }

:root{ --mv-sortie:cubic-bezier(.2,.7,.2,1); --mv-ressort:var(--spring, cubic-bezier(.34,1.56,.64,1)); }

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

/* La carte : plus de grande ombre portée, une feuille posée. */
.dcard{
  border-radius:28px;
  padding:22px 20px 18px;
  box-shadow:0 1px 2px rgba(31,26,20,.04), 0 28px 60px -34px rgba(31,26,20,.32);
  transition:transform .55s var(--mv-ressort), opacity .35s ease;
}
.dcard .d-num{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:11.5px; 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:28px; 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:13.5px; line-height:1.5; margin-top:6px; 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 .55s 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 .6s 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 .55s var(--mv-sortie) both; animation-delay:calc(.18s + min(var(--i,0), 12) * 35ms) }
.dcard.entre .d-foot{ animation:mv-monte .5s 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:18px;
  box-shadow:0 1px 0 rgba(31,26,20,.03);
  transition:transform .18s var(--mv-ressort), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.radio-it{ padding:15px 16px; margin-bottom:9px }
.occ{ padding:15px 14px }
.mode-btn{ padding:16px; margin-bottom:10px }
@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 rgba(31,26,20,.45);
  }
}
.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:11.5px }
.radio-it .ra-dot{
  width:22px; height:22px; border:1.5px solid var(--line2); background:var(--surface);
  transition:background .2s ease, border-color .2s ease, box-shadow .25s 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 .4s var(--mv-ressort);
}
.pick-it{ border-radius:16px; padding:12px 14px }
.pick-it .pk-box{
  width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line2);
  transition:background .2s ease, border-color .2s ease, transform .25s 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 .35s var(--mv-ressort) both; stroke:#fff }
.pick-it.pick-deduit .pk-box{ background:var(--accent); border-color:var(--accent) }
.mode-btn .m-i{ background:var(--accent-tint); color:var(--accent-texte,var(--accent)); border-radius:14px; transition:transform .25s var(--mv-ressort) }
.mode-btn:hover .m-i{ transform:scale(1.06) }

/* Les champs */
.dcard .input{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.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 .18s var(--mv-ressort), border-color .2s ease, background .2s ease;
}
@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 .25s 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%, #fff));
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  transition:width .65s var(--mv-sortie);
}
.deck-count{ font-family:var(--serif); font-size:12px; font-weight:600; letter-spacing:0; color:var(--ink-soft) }
.deck-back{ transition:transform .18s var(--mv-ressort), opacity .2s ease }

/* Le bouton du pied */
.dcard .d-foot .btn{
  transition:transform .18s var(--mv-ressort), box-shadow .25s ease, background .2s ease;
  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:14px }
.hscal-vite{
  flex:1 1 auto; min-height:44px; padding:9px 12px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--mv-ressort), border-color .2s ease, background .2s ease, color .2s ease;
}
.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,#fff) }
.hscal-tete{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px }
.hscal-t{ font-family:var(--serif); font-weight:700; font-size:16px; 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 .18s var(--mv-ressort), border-color .2s ease, background .2s ease, opacity .2s ease;
}
.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 .32s var(--mv-sortie) }
.hscal-feuille.glisse-g{ animation:mv-glisse-g .32s var(--mv-sortie) }
.hscal-mois-t{ display:none; font-family:var(--serif); font-weight:600; font-size:14px; color:var(--ink); margin:2px 0 6px }
.hscal-mois-t span{ color:var(--ink-faint); font-weight:500 }
.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:6px }
.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:11px; font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--ink-faint); padding:6px 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:500; font-size:14px; font-feature-settings:"tnum" 1; color:var(--ink);
  transition:background .18s ease, color .18s ease, transform .22s var(--mv-ressort), box-shadow .2s ease;
}
@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:#fff }
.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,#fff); 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 .38s var(--mv-ressort) }
.hscal-r{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-soft); animation:mv-fondu .3s ease;
}
.hscal-r b{ font-family:var(--serif); font-weight:600; color:var(--ink); font-size:14px }
.hscal-nuits{ padding:4px 10px; border-radius:var(--r-pill); background:var(--accent-tint); color:var(--accent-texte,var(--accent)); font-weight:600; font-size:12.5px }
.hscal-suite{ color:var(--sub) }
.hscal-vider{ margin-left:auto; border:none; background:none; color:var(--sub); font:inherit; font-size:12.5px; 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 .2s ease }
.itn-tab.on::after{ animation:mv-trait .35s var(--mv-sortie) both; transform-origin:left center }
/* Les sauts de journée répondent */
.itn-saut.on{ animation:mv-pop .35s 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:24px; transition:box-shadow .3s ease }
.itn-day.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--mv-sortie), transform .7s var(--mv-sortie);
}
.itn-day.reveal.in{ opacity:1; transform:none }
@media (hover:hover){ .itn-day:hover{ box-shadow:0 22px 44px -32px rgba(31,26,20,.5) } }
/* Le bandeau : la photo respire quand la carte est survolée */
.itn-dhead{ overflow:hidden }
.itn-dhead .itn-dph.has-photo{ transition:opacity .55s ease, 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 .45s 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 .4s var(--mv-ressort), background .2s ease }
.itn-day-chev{ transition:color .2s ease }
@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 6px; font-size:11.5px; width:max-content; line-height:1.4 }
/* L'hébergement répond au doigt */
.itn-stay{ transition:transform .2s var(--mv-ressort), background .2s ease }
.itn-stay:active{ transform:scale(.99) }