/* Expédition 2027 — adaptation mobile (≤ 760 px).
   Ne touche à aucun visuel : mêmes ornements, mêmes couleurs, mêmes typos.
   Réorganise seulement la mise en page pour le pouce et l'écran vertical.
   Chargé avant le <style> du canevas : chaque règle est préfixée « html body »
   pour passer devant ses !important. */

@media (max-width: 760px) {

  /* ── Nav du haut : seulement le monogramme et FR/ES ── */
  html body #site-nav { padding: 6px 14px !important; }
  html body [data-navwrap] { flex-direction: row !important; justify-content: center !important; position: relative; }
  html body [data-navwrap] > [data-navlinks] { display: none !important; }
  /* Le menu ☰ fait double emploi avec la barre d'onglets : retiré. */
  html body #nav-toggle { display: none !important; }
  html body [data-navcrest] img { height: 44px !important; }
  html body [data-langswitch] { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0 !important; }
  html body [data-hero] { padding-top: 92px !important; min-height: calc(100svh - 64px) !important; }

  /* ── Barre d'onglets du bas (créée par js/mobile.js) ── */
  html body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
    padding: 0 4px env(safe-area-inset-bottom); background: rgba(48,10,78,0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(193,162,99,0.36); box-shadow: 0 -12px 30px rgba(8,3,16,0.35); }
  .m-tabbar::before { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: linear-gradient(90deg, transparent, rgba(193,162,99,0.35), transparent); }
  .m-tabbar a { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
    font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 10.5px; letter-spacing: 0.9px; text-transform: uppercase; color: rgba(246,239,225,0.62); -webkit-tap-highlight-color: transparent; }
  .m-tabbar a { position: relative; gap: 5px !important; font-size: 11px !important; letter-spacing: 1.2px !important; }
  .m-tabbar a svg { color: rgba(193,162,99,0.7); transition: color 300ms ease, transform 300ms ease; }
  .m-tabbar a::before { content: ''; position: absolute; top: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; transform: rotate(45deg) scale(0); background: #C1A263; transition: transform 300ms ease; }
  .m-tabbar a[aria-current="true"] { color: #E9D9AE; }
  .m-tabbar a[aria-current="true"] svg { color: #E8C888; transform: translateY(-1px); }
  .m-tabbar a[aria-current="true"]::before { transform: rotate(45deg) scale(1); }
  html body section[id] { scroll-margin-top: 58px; }

  /* ── Rythme vertical resserré ── */
  html body #bienvenue, html body #programme, html body #lieux, html body #infos, html body #tenue, html body #rsvp, html body #cadeaux {
    padding-top: 56px !important; padding-bottom: 56px !important; }

  /* ── I Programme : frise verticale, losange à gauche, texte à droite — tout tient dans l'écran ── */
  html body #prog-trail { display: block !important; }
  html body [data-prog] { padding: 0 4px !important; max-width: 100% !important; box-sizing: border-box; }
  html body [data-progrow] { display: grid !important; grid-template-columns: 116px minmax(0,1fr) !important; align-items: center !important; gap: 16px !important;
    margin: 0 !important; width: 100% !important; box-sizing: border-box; }
  html body [data-progicon] { order: 0 !important; grid-column: 1; flex: none !important; width: 116px !important; min-width: 0 !important; display: flex !important; justify-content: center !important; }
  html body [data-progrow][data-step] [data-progicon] { left: 0 !important; }
  html body [data-progicon] > div { width: 116px !important; height: auto !important; aspect-ratio: 148/200 !important; }
  html body [data-progicon] img { width: 54% !important; height: auto !important; }
  html body [data-progtext] { order: 1 !important; grid-column: 2; flex: none !important; min-width: 0 !important; max-width: none !important; padding: 0 !important; gap: 4px !important;
    text-align: left !important; align-items: flex-start !important; overflow-wrap: anywhere; }
  html body [data-progtext] > div:nth-child(1) { font-size: 24px !important; letter-spacing: 2px !important; }
  html body [data-progtext] > div:nth-child(2) { font-size: 15.5px !important; letter-spacing: 1.2px !important; }
  html body [data-progtext] > div:nth-child(3) { font-size: 15px !important; line-height: 1.55 !important; }
  html body [data-progrow]:not(:last-child) { margin-bottom: 0 !important; }
  /* Alternance : losange à droite pour le cocktail et le bal */
  html body [data-progrow][data-step="1"], html body [data-progrow][data-step="3"] { grid-template-columns: minmax(0,1fr) 116px !important; }
  html body [data-progrow][data-step="1"] [data-progicon], html body [data-progrow][data-step="3"] [data-progicon] { grid-column: 2; grid-row: 1; }
  html body [data-progrow][data-step="1"] [data-progtext], html body [data-progrow][data-step="3"] [data-progtext] { grid-column: 1; grid-row: 1; text-align: right !important; align-items: flex-end !important; }
  html body [data-progrow][data-step="0"] [data-progtext], html body [data-progrow][data-step="2"] [data-progtext], html body [data-progrow][data-step="4"] [data-progtext] { text-align: left !important; align-items: flex-start !important; }
  /* Espace pour que le chemin pointillé serpente d'un losange à l'autre */
  html body [data-progconn] { display: block !important; position: relative; width: 100%; height: 96px !important; margin: 0 !important; }
  html body [data-progconn]::before { content: none; }
  html body [data-progrow] { position: relative; z-index: 2; }

  /* ── II Lieux : aquarelle pleine largeur, texte en pied ── */
  html body [data-venue] { min-height: 470px !important; align-items: flex-end !important; justify-content: flex-start !important; }
  html body [data-venue] > div:nth-child(2) { background: linear-gradient(0deg, rgba(20,9,30,0.97) 0%, rgba(20,9,30,0.86) 42%, rgba(20,9,30,0.25) 78%, rgba(20,9,30,0.05) 100%) !important; }
  html body [data-venue-body] { max-width: none !important; padding: 26px 22px !important; text-align: left !important; align-items: flex-start !important; }
  html body [data-venue] + [data-venue] { border-top: 1px solid rgba(193,162,99,0.45); }
  /* Asymétrie : 1er lieu texte en bas à gauche, 2nd lieu texte en haut à droite */
  html body [data-venue] [data-venue-body] { max-width: 84% !important; margin-right: auto !important; box-sizing: border-box; }
  html body [data-venue] + [data-venue] { align-items: flex-start !important; }
  html body [data-venue] + [data-venue] > div:nth-child(2) { background: linear-gradient(180deg, rgba(20,9,30,0.97) 0%, rgba(20,9,30,0.86) 42%, rgba(20,9,30,0.25) 78%, rgba(20,9,30,0.05) 100%) !important; }
  html body [data-venue] + [data-venue] [data-venue-body] { margin-left: auto !important; margin-right: 0 !important; text-align: right !important; align-items: flex-end !important; }

  /* ── III Informations : les quatre miroirs empilés, chacun entier dans l'écran ── */
  html body #infos [data-mirrors] { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 22px !important;
    margin: 0 !important; padding: 6px 0 0 !important; overflow: visible !important; }
  html body #infos [data-mirrors] > [data-mirror] { grid-area: auto !important; width: min(290px, 80vw) !important; flex: none !important; margin: 0 !important; }
  html body #infos [data-mirrors] > [data-mirror]:nth-child(odd) { transform: rotate(-1.2deg) !important; }
  html body #infos [data-mirrors] > [data-mirror]:nth-child(even) { transform: rotate(1deg) !important; }
  html body #infos [data-mirrors] > [data-mirror] > div:first-child { max-width: none !important; width: 100% !important; }
  html body #infos [data-mirrors] > [data-mirror] > div:first-child > div > div:first-child { font-size: 22px !important; }
  html body #infos [data-mirrors] > [data-mirror] > div:first-child > div > div:last-child { font-size: 16px !important; }
  .m-hint { display: none !important; }

  /* ── IV Dresscode : les deux croquis l'un sous l'autre, sans débord ── */
  html body #tenue { padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box; overflow: hidden; }
  html body #tenue > div:nth-child(5) { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 58px !important;
    margin: 0 0 48px !important; padding: 30px 7px 8px !important; overflow: visible !important; }
  html body #tenue > div:nth-child(5) > [data-ornate] { max-width: none !important; min-width: 0 !important; padding: 14px 8px 16px !important; }
  html body #tenue > div:nth-child(5) > [data-ornate] > div:nth-child(2) { padding: 10px 10px 16px !important; }
  html body #tenue > div:nth-child(5) > [data-ornate] > div:nth-child(2) > div:first-child { aspect-ratio: auto !important; height: 470px !important; }
  html body #tenue > div:nth-child(5) > [data-ornate] > div:nth-child(2) > div:last-child > div:last-child { font-size: 16.5px !important; line-height: 1.55 !important; }

  /* Palette : 3 + 2 velours, tous visibles */
  html body #tenue [style*="flex-wrap: wrap"] { flex-wrap: wrap !important; justify-content: center !important; overflow: visible !important;
    margin: 0 !important; padding: 18px 0 6px !important; gap: 26px 14px !important; }
  html body #tenue [style*="flex-wrap: wrap"] > div { flex: 0 0 96px !important; width: 96px; }
  html body #tenue [style*="flex-wrap: wrap"] > div > div:first-child { width: 80px !important; }
  html body #tenue [style*="flex-wrap: wrap"] [data-aged] { min-width: 0 !important; width: 96px; box-sizing: border-box; padding: 7px 4px 8px !important; }
  html body #tenue [style*="flex-wrap: wrap"] [data-aged] > div { font-size: 10px !important; letter-spacing: 1.2px !important; line-height: 1.25; }

  /* ── V RSVP / VI Cadeaux : cibles tactiles confortables ── */
  html body #open-letter { display: inline-flex; min-height: 44px; align-items: center; }
  html body #rsvp [data-letter] { padding: 38px 22px 34px !important; }
  html body #cadeaux a[href*="millemercis"] { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; }
  /* Pied de page : même police que le titre */
  html body footer [data-gardien="ensemble-tendresse"] { font-family: Tangerine, cursive !important; font-weight: 700 !important; font-size: 64px !important; line-height: 1 !important; }
}