/* ═══════════════════════════════════════════════════════════════════════
   LA GRAMMAIRE DE BUREAU, 2 — les écrans ouverts sont des PAGES
   ─────────────────────────────────────────────────────────────────────
   Charlotte, le 3 octobre : « je trouve que l'app web fait encore trop
   app mobile, j'aime pas du tout ».

   Le relevé à 1 440 px lui donne raison, et dit où :
     · un itinéraire ouvert RECOUVRAIT l'en-tête du site : plus de
       marque, plus de menu — on n'était plus sur un site ;
     · la photo prenait 1 440 px de large, le volet remontait dessus avec
       une POIGNÉE de feuille à tirer, et chaque carte de journée courait
       sur 1 400 px ;
     · le prix vivait dans une barre collée en bas avec une bulle de
       conversation ronde — la grammaire du pouce ;
     · une fiche destination finissait sur un bouton de 1 392 px ;
     · « Vous » empilait, sur une seule colonne, la carte du compte puis
       la liste des voyages ;
     · la connexion montait du bas de l'écran comme une feuille d'iPhone.

   Quatre règles, dans l'esprit de la première grammaire (core.css) :
     1. L'EN-TÊTE RESTE. Une page qui s'ouvre se place SOUS lui.
     2. DEUX COLONNES. Le document à gauche (772 px), ce qu'on en fait à
        droite (360 px, collé au défilement) : le prix et la conversation
        pour un itinéraire, « composer » pour une destination.
     3. LES FEUILLES DEVIENNENT DES FENÊTRES. Une connexion, un réglage,
        s'ouvrent au centre, sur un voile — pas depuis le bord bas.
     4. « VOUS » SE LIT EN DEUX COLONNES : le compte à gauche, les
        voyages à droite.

   Rien ici ne touche à l'app native (html:not(.native-app)) ni aux
   écrans de moins de 1 024 px : au téléphone, le web garde la grammaire
   du pouce, qui y est la bonne.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width:1024px){
  html:not(.native-app){
    --bureau-mesure:1180px;
    --bureau-aside:360px;
    --bureau-gout:max(24px, calc((100% - var(--bureau-mesure)) / 2));
    --bureau-colonne:900px;
  }

  /* ── 1. L'en-tête reste ─────────────────────────────────────────────
     .ov couvrait la fenêtre entière (core.css : position:fixed). Il
     commence maintenant sous l'en-tête, qui garde la marque et le menu.
     La poignée de feuille (glisser pour fermer) n'a pas de sens à la
     souris. */
  html:not(.native-app) .ov{ top:var(--entete); padding-top:0 }
  html:not(.native-app) .ov-prise,
  html:not(.native-app) .carte-handle-wrap{ display:none }

  /* ── Les pages : la fenêtre défile, pas une boîte dedans ────────────
     Au téléphone, .ov est une boîte et .ov-scroll défile à l'intérieur.
     Une page de site défile en entier, avec sa barre latérale collée.
     On rend donc le défilement à .ov, et .ov-scroll redevient un simple
     bloc. La barre du navigateur est visible : une zone qui défile le
     dit. */
  html:not(.native-app) .ov[data-ov="itinerary"],
  html:not(.native-app) .ov[data-ov="destination"],
  html:not(.native-app) .ov[data-ov="day"],
  html:not(.native-app) .ov[data-ov="gems"],
  html:not(.native-app) .ov[data-ov="booking"],
  html:not(.native-app) .ov[data-ov="allbookings"],
  html:not(.native-app) .ov[data-ov="itn"],
  html:not(.native-app) .ov[data-ov="amis"],
  html:not(.native-app) .ov[data-ov="envie"],
  html:not(.native-app) .ov[data-ov="help"],
  html:not(.native-app) .ov[data-ov="notifications"]{
    overflow-y:auto; scrollbar-width:thin; display:block;
  }
  html:not(.native-app) .ov[data-ov="itinerary"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="destination"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="day"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="gems"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="booking"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="allbookings"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="itn"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="amis"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="envie"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="help"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="notifications"] .ov-scroll{
    overflow:visible; flex:none; height:auto; min-height:0;
    scroll-behavior:auto;
    /* Le fondu du bas (data-defile, core.css) est un MASQUE posé sur la
       boîte : tout ce qui déborde de la boîte devient invisible. Sur une
       page qui ne défile plus dans sa boîte, c'est la page entière qui
       disparaissait sous « Jour par jour » — mesuré avant de comprendre.
       Pas de masque, et la boîte grandit avec son contenu. */
    -webkit-mask-image:none; mask-image:none;
    align-self:start;
  }
  /* Une page simple (journée, pépites, réservations…) : une colonne de
     900 px, et son pied d'action sur la même mesure — plus de bouton de
     1 392 px. */
  html:not(.native-app) .ov[data-ov="day"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="gems"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="booking"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="allbookings"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="itn"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="amis"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="envie"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="help"] .ov-scroll,
  html:not(.native-app) .ov[data-ov="notifications"] .ov-scroll{
    padding-inline:max(20px, calc((100% - var(--bureau-colonne)) / 2));
  }
  html:not(.native-app) .ov:not(.modal) .ov-foot{
    left:max(20px, calc((100% - var(--bureau-colonne)) / 2));
    right:max(20px, calc((100% - var(--bureau-colonne)) / 2));
  }

  /* ── 2. L'itinéraire : le document et sa colonne ──────────────────── */
  html:not(.native-app) .ov[data-ov="itinerary"]{
    display:grid;
    grid-template-columns:minmax(0, 1fr) var(--bureau-aside);
    grid-template-rows:auto auto;
    column-gap:48px; align-content:start;
    padding-inline:var(--bureau-gout);
  }
  /* La barre d'actions n'est plus posée SUR la photo : elle devient la
     première ligne de la page — retour, titre, actions. Toujours lisible,
     puisqu'elle n'a plus de photo à laisser voir. */
  html:not(.native-app) .ov[data-ov="itinerary"] .itn-topbar{
    position:static; grid-column:1 / -1;
    padding:18px 0 12px; pointer-events:auto;
    background:none; border-bottom:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  html:not(.native-app) .ov[data-ov="itinerary"] .itn-topbar-t{
    opacity:1; transform:none; font-size:17px; max-width:none;
  }
  html:not(.native-app) .ov[data-ov="itinerary"] .itn-topbar .ihx-btn{
    background:var(--surface); border-color:var(--line); color:var(--ink); box-shadow:none;
  }
  html:not(.native-app) .ov[data-ov="itinerary"] .itn-topbar .ihx-btn svg{ stroke:var(--ink); filter:none }
  html:not(.native-app) .ov[data-ov="itinerary"] .ov-scroll{
    grid-column:1; grid-row:2; padding-bottom:96px;
  }
  /* La photo : dans la colonne, arrondie, à hauteur d'une image de site. */
  html:not(.native-app) .ov[data-ov="itinerary"] .itn-hero-photo.dd-hero{
    border-radius:28px; min-height:400px; padding-top:22px;
  }
  /* Le volet ne remonte plus sur la photo : il n'y a plus de feuille. */
  html:not(.native-app) .ov[data-ov="itinerary"] .dd-volet{
    margin-top:0; border-radius:0; background:none; padding-top:22px;
  }
  html:not(.native-app) .ov[data-ov="itinerary"] .itn-body{ padding-inline:0 }
  /* Les sauts de journée se collent au haut de la page, sans le dégradé
     de rail — tout tient sur la ligne. */
  html:not(.native-app) .ov[data-ov="itinerary"] .itn-sauts{
    top:0; margin:0 0 6px; padding:12px 0; overflow:visible; flex-wrap:wrap;
    -webkit-mask-image:none; mask-image:none;
  }
  /* La colonne de droite : le prix et la conversation, dans une carte
     qui suit le défilement. C'était la barre du bas. */
  html:not(.native-app) .ov[data-ov="itinerary"] .ov-foot{
    position:sticky; top:12px; grid-column:2; grid-row:2; align-self:start;
    left:auto; right:auto; bottom:auto;
    background:none; padding:0; margin:0; z-index:5;
  }
  html:not(.native-app) .ov[data-ov="itinerary"] .foot-price{
    flex-direction:column; align-items:stretch; gap:18px;
    width:auto; height:auto;
    background:var(--surface); border:1px solid var(--line);
    border-radius:24px; padding:24px; box-shadow:var(--sh-1, 0 10px 30px rgba(20,17,14,.06));
  }
  html:not(.native-app) .ov[data-ov="itinerary"] .foot-price > div:first-child{ width:auto }
  html:not(.native-app) .ov[data-ov="itinerary"] .fa-chat{
    width:100%; height:48px; border-radius:14px; gap:10px;
    font-family:var(--serif); font-weight:600; font-size:14px;
  }
  html:not(.native-app) .ov[data-ov="itinerary"] .fa-chat::after{ content:"Poser une question" }

  /* ── 2 bis. La destination : la fiche et l'invitation ─────────────── */
  html:not(.native-app) .ov[data-ov="destination"]{
    display:grid;
    grid-template-columns:minmax(0, 1fr) var(--bureau-aside);
    grid-template-rows:auto auto;
    column-gap:48px; align-content:start;
    padding-inline:var(--bureau-gout);
  }
  html:not(.native-app) .ov[data-ov="destination"] .itn-hd{
    grid-column:1; grid-row:1; padding:18px 0 0;
  }
  html:not(.native-app) .ov[data-ov="destination"] .itn-hd .dd-hero{
    border-radius:28px; min-height:440px; padding-top:18px;
  }
  html:not(.native-app) .ov[data-ov="destination"] .ov-scroll{
    grid-column:1; grid-row:2; padding-inline:0; padding-bottom:96px;
  }
  html:not(.native-app) .ov[data-ov="destination"] .dd-volet{
    margin-top:0; border-radius:0; background:none; padding-top:22px;
  }
  html:not(.native-app) .ov[data-ov="destination"] .ov-foot{
    position:sticky; top:18px; grid-column:2; grid-row:1 / 3; align-self:start;
    left:auto; right:auto; bottom:auto; margin:0;
    background:var(--surface); border:1px solid var(--line);
    border-radius:24px; padding:24px; box-shadow:var(--sh-1, 0 10px 30px rgba(20,17,14,.06));
    display:flex; flex-direction:column; gap:14px; z-index:5;
  }
  html:not(.native-app) .ov[data-ov="destination"] .ov-foot::before{
    content:"Envie d'y aller ?";
    font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:-.3px; color:var(--ink);
  }
  html:not(.native-app) .ov[data-ov="destination"] .ov-foot::after{
    content:"Dites quand et avec qui : l'itinéraire jour par jour est composé pour vous en deux minutes.";
    order:1; font-size:13px; line-height:1.5; color:var(--sub);
  }
  html:not(.native-app) .ov[data-ov="destination"] .ov-foot .btn.dd-cta{ order:2; width:100% }

  /* ── 3. Les feuilles deviennent des fenêtres ───────────────────────
     Une feuille monte du bas ; une fenêtre se pose au centre, sur un
     voile. L'ombre très étendue EST le voile : pas d'élément à ajouter,
     et il part avec la fenêtre. */
  html:not(.native-app) .ov.modal{
    top:50%; left:50%; right:auto; bottom:auto;
    width:min(540px, calc(100vw - 48px));
    height:auto; max-height:min(88vh, 920px);
    border-radius:28px; overflow:hidden;
    transform:translate(-50%, -50%) translateY(28px); opacity:0;
    box-shadow:0 0 0 100vmax rgba(12,10,8,.46), 0 30px 80px rgba(12,10,8,.35);
    transition:transform .32s var(--ease-out), opacity .32s ease;
  }
  html:not(.native-app) .ov.modal.in{ transform:translate(-50%, -50%); opacity:1 }
  html:not(.native-app) .ov.modal.closing{
    transform:translate(-50%, -50%) translateY(28px); opacity:0;
    transition:transform .24s var(--ease-in-out), opacity .24s ease;
  }
  /* Les formules de prix, l'accueil guidé : plus larges. */
  html:not(.native-app) .ov.modal[data-ov="premium"],
  html:not(.native-app) .ov.modal[data-ov="onboarding"],
  html:not(.native-app) .ov.modal[data-ov="welcome"]{ width:min(720px, calc(100vw - 48px)) }
  html:not(.native-app) .ov.modal .ov-scroll{ max-height:min(88vh, 920px) }

  /* ── 4. « Vous » en deux colonnes ──────────────────────────────────
     Le compte à gauche (400 px, suit le défilement), les voyages à
     droite. Pas de conteneur à créer : les flottants savent faire ça
     depuis toujours, et le DOM reste celui du téléphone. */
  html:not(.native-app) .tabview[data-tab="moi"]{ --mesure:1180px }
  html:not(.native-app) .tabview[data-tab="moi"] .ref-volet[data-soc-pane="vous"]{ display:flow-root }
  html:not(.native-app) .tabview[data-tab="moi"] .ref-volet[data-soc-pane="vous"] > .pf-carte,
  html:not(.native-app) .tabview[data-tab="moi"] .ref-volet[data-soc-pane="vous"] > [data-pf-photo],
  html:not(.native-app) .tabview[data-tab="moi"] .ref-volet[data-soc-pane="vous"] > [data-pf-publier]{
    float:left; clear:left; width:400px; margin-right:48px;
  }
  html:not(.native-app) .tabview[data-tab="moi"] .ref-volet[data-soc-pane="vous"] > .pf-entete,
  html:not(.native-app) .tabview[data-tab="moi"] .ref-volet[data-soc-pane="vous"] > .pf-filtres,
  html:not(.native-app) .tabview[data-tab="moi"] .ref-volet[data-soc-pane="vous"] > [data-trips]{
    margin-left:448px;
  }
  html:not(.native-app) .tabview[data-tab="moi"] .ref-volet[data-soc-pane="vous"] > .pf-entete{ margin-top:0 }

  /* ── Détails relevés sur les captures ──────────────────────────────── */
  /* Les deux boutons ronds du globe (recherche, cloche) : la grammaire de
     bureau étire tous les enfants de .ref-ecran à 100 % — eux aussi, et
     ils se retrouvaient collés au bord GAUCHE de l'écran, le premier à
     moitié dehors. Ils reprennent leur largeur, à droite. */
  html:not(.native-app) .ref-ecran > .monde-actions{
    width:auto; left:auto; right:calc(22px + max(0px, (100% - 1440px) / 2));
  }
  /* Un bouton dans un écran vide centré se centre aussi : « Composer un
     itinéraire » et « Réessayer » partaient au fer à gauche sous trois
     lignes centrées. */
  html:not(.native-app) .ecran-vide .btn,
  html:not(.native-app) .ecran-vide .btn-ghost{ display:inline-flex; margin-inline:auto }
}
/* Entre 1 024 et 1 199 px, la colonne de droite se resserre pour laisser
   au document au moins 600 px. */
@media (min-width:1024px) and (max-width:1199px){
  html:not(.native-app){ --bureau-aside:300px }
}