/* yachtparade.com — MISE EN PAGE TABLETTE & PC (François 30/09/2026 : « sur PC c'est nul, bien utiliser l'espace, en colonnes,
   attention aux espacements ; luxe à fond + lisibilité ; mobile 0 modif »). Chargée avec media="(min-width:768px)" : sous 768 px
   le navigateur n'applique rien de ce fichier. Les pages portent une classe sur <body> : p-home, p-family, p-yard, p-range,
   p-model, p-parade. Aucune image n'est modifiée : uniquement de la réorganisation. */

/* ————— TABLETTE (≥ 768) : conteneur plus large, marges fixes, titres un cran au-dessus ————— */
@media (min-width:768px){
  :root{--gut:48px;--wrap:1180px}
  body:not(.p-parade){overflow-x:clip}   /* la scène du bateau déborde jusqu'aux bords de la fenêtre (50vw compte la barre de défilement) */
  .wrap{max-width:var(--wrap);padding:calc(30px + env(safe-area-inset-top)) var(--gut) 120px}
  .logo{font-size:16px}
  .crumbs{margin:44px 0 18px;font-size:11px}
  .meta{font-size:11.5px}
  .lead{font-size:17px;line-height:1.6;max-width:62ch}
  th,td{padding:16px 0;font-size:15px} th{font-size:11px}
  ul.l li{padding:16px 0;font-size:15px} ul.l li span{font-size:13.5px}
  .hl li,.yard-list li{font-size:15px} .yard-sum{font-size:16px;line-height:1.65;max-width:62ch}
  .note{max-width:70ch}
  /* ANNUAIRE (accueil, pages famille) : les chantiers en deux colonnes équilibrées */
  .p-home .dir{max-width:var(--wrap);padding:20px var(--gut) 120px}
  .p-home .dir h2{font-size:28px;margin-bottom:26px}
  .p-home .search{max-width:560px;margin:0 auto 10px}
  .p-home .none,.p-home .more{max-width:560px;margin-left:auto;margin-right:auto}
  .p-home .dir .cols,.p-family .cols{columns:2;column-gap:72px}
  .p-home .dir .cols .b,.p-family .cols .b{break-inside:avoid;page-break-inside:avoid}
  .p-home .hero h1{font-size:clamp(40px,6vw,92px);letter-spacing:.24em}
  .p-home .start{padding:12px 34px;font-size:12px}
  .p-home .go{gap:16px;margin-top:34px}
  /* FICHE MODÈLE : la scène ciel/mer sur toute la largeur de la fenêtre, le bateau borné à 1040 px au centre */
  .p-model .scene{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:max(0px,calc(50vw - min(380px,36vw)));padding-right:max(0px,calc(50vw - min(380px,36vw)))}   /* bateau borné à 760 px (François 30/09 : « réduire encore les bateaux sur PC ») */
  .p-model h1{font-size:clamp(44px,6vw,84px);letter-spacing:.05em}
  .p-model .scene .acts{right:max(var(--gut),calc(50% - var(--wrap) / 2 + var(--gut)))}
  .p-model .scene .acts.acts-l{right:auto;left:max(var(--gut),calc(50% - var(--wrap) / 2 + var(--gut)))}   /* cœur + partage sur le MÊME bord droit que les boutons m/ft et jour/nuit du haut (François 1/10) */
  .p-model .cta{margin-top:-28px;gap:14px;justify-content:center;position:relative;z-index:2}   /* boutons remontés sur le bas de la mer et CENTRÉS (François 30/09) */
  .btn{padding:12px 24px;font-size:11.5px}
  /* UNE SEULE LIGNE sur PC (François 1/10 : « aligner tous les boutons sur une seule ligne », « là ça flotte ») : flèche à gauche,
     Compare + Brochure au centre, compteur + cœur + partage à droite — centres sur le même axe. Les icônes (38 px) sont à 14 px
     du bas de la scène → axe à 33 px au-dessus ; boutons de hauteur FIXE 40 px → remontés de 33 + 20 = 53 px. */
  @media (min-width:1024px){
    .p-model .scene + .cta{margin-top:-53px}   /* seulement sous une scène (fiches sans visuel : inchangées) */
    .p-model .scene + .cta{pointer-events:none} .p-model .scene + .cta .btn{pointer-events:auto}   /* la rangée (pleine largeur) passe AU-DESSUS des icônes : elle laisse passer les clics, seuls ses boutons les captent (François 1/10 : cœur, partage, flèche non cliquables) */
    .p-model .cta .btn{box-sizing:border-box;height:40px;line-height:14px;display:inline-flex;align-items:center}
  }
  .p-model ul.l{columns:2;column-gap:72px} .p-model ul.l li{break-inside:avoid}
  /* ÉTOILES GRAND ÉCRAN (François 30/09 : « sur PC/tablette les étoiles sont très grosses ») : tuile dédiée, 6× plus d'étoiles, 3× plus fines
     (media/stars-wide.svg, même géométrie 1000×400 que le SVG mobile) ; la vidéo HDR des étoiles et le scintillement, calés sur la tuile
     mobile, sont coupés à cette taille (ils grossissaient avec la largeur) */
  .p-model .stars{background-image:url(/media/stars-wide.svg)}
  .p-model .scene .stars2{background-image:url(/media/stars-wide.svg)}
  body.skyhdr.p-model .stars{background-image:url(/media/stars-wide.svg)}
  body.skyhdr.p-model .scene .stars2{background-image:url(/media/stars-wide.svg),linear-gradient(to bottom,#091a2c 0,#091a2c 45%,#0c2238 72%,#122c48 90%,#1b3857 100%)}
  .p-model .stars video.skyv,.p-model .scene .stars2 video.skyv,.p-model .stars .tw{display:none!important}
  .p-parade .sea::after{background:url(/media/stars-wide.svg) center/cover no-repeat,linear-gradient(to bottom,#091a2c 0,#0d2440 70%,#1b3857 100%)}
  /* PARADE : en-tête centré, borné */
  .p-parade .top{left:50%;right:auto;width:min(calc(100% - 20px),1120px);box-sizing:border-box;transform:translateX(-50%)}
  .p-parade .modal .sheet{padding-left:40px;padding-right:40px}
  .p-parade .modal .x{right:calc(50% - 280px + 40px)}
  .p-parade .modal .foot{padding-left:40px;padding-right:40px}
  body .lf-modal{padding-left:var(--gut);padding-right:var(--gut)} body .lf-x{right:max(var(--gut),calc(50% - 320px))}   /* « body » : ces styles sont déclarés après cette feuille (module lead-form) */
}

/* ————— PC & tablette paysage (≥ 1024) : colonnes ————— */
@media (min-width:1024px){
  /* FICHE MODÈLE : sous le bateau, deux colonnes — à gauche les caractéristiques, les points forts et le chantier ;
     à droite la vidéo puis la demande de brochure (la lecture d'un côté, l'action de l'autre) */
  .p-model .cols{display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:88px;align-items:start;margin-top:44px}
  .p-model .cols .c1{grid-column:1;grid-row:1/3}
  .p-model .cols .c2{grid-column:2;grid-row:1}
  body.p-model:not(.sunset) .boat-h1{background:none;color:#f7f4ea;-webkit-text-fill-color:#f7f4ea}   /* titre BLANC uni en midi et nuit sur PC (François 30/09) ; le dégradé orangé du couchant reste */
  .p-model .cols .lf .send{display:inline-block;width:auto;padding:14px 34px}   /* bouton d'envoi à la largeur de son texte, aligné à gauche (François 30/09) */
  .p-model .cols .lf{grid-column:2;grid-row:2;margin-top:28px;position:sticky;top:32px;align-self:start}   /* formulaire de brochure COLLANT une fois arrivé près du haut (François 30/09) ; il suit la lecture de la colonne de gauche */
  /* sans vidéo, la 1re ligne est vide (hauteur 0) : le formulaire monte de lui-même en haut de la colonne de droite */
  .p-model .cols .c1 > table{margin-top:0} .p-model .cols .c2 > .video{margin-top:0}   /* les deux colonnes démarrent au même niveau */
  .p-model .yard{margin-top:56px}
  .p-model .wrap > h2{margin-top:80px}   /* « Also in the … » ; les h2 du chantier et du formulaire gardent les leurs */
  /* FICHE SUR PC (François 30/09 : « ne pas afficher les infos directement, il faut un premier scroll ») : au chargement, seulement le titre,
     le ciel, le bateau et ses boutons (visibles d'emblée, François 30/09) ; vidéo, caractéristiques, chantier et brochure apparaissent au premier défilement (body.scrolled, > 40 px) */
  .p-model .cols,.p-model .wrap > h2,.p-model .wrap > ul.l,.p-model .note{transition:opacity .9s ease-out,transform .9s cubic-bezier(.2,.7,.2,1)}
  body.p-model:not(.scrolled) .cols,body.p-model:not(.scrolled) .wrap > h2,body.p-model:not(.scrolled) .wrap > ul.l,body.p-model:not(.scrolled) .note{opacity:0;transform:translateY(22px);pointer-events:none}
  /* PAGES CHANTIER & GAMME : l'en-tête (nom, repères, boutons) reste à gauche pendant que les gammes défilent à droite */
  .p-yard .wrap,.p-range .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:96px;align-items:start}
  .p-yard .wrap > .top,.p-range .wrap > .top,.p-yard .wrap > .crumbs,.p-range .wrap > .crumbs,.p-yard .wrap > .note,.p-range .wrap > .note{grid-column:1/-1}
  .p-yard .head,.p-range .head{grid-column:1;position:sticky;top:48px}
  .p-yard .body,.p-range .body{grid-column:2}
  .p-yard .body > h2:first-child,.p-range .body > ul.l:first-child{margin-top:0}
  .p-yard .body > h2,.p-range .body > h2{margin-top:56px}
  .p-yard h1,.p-range h1{font-size:clamp(44px,5vw,72px)}
  .p-yard .cta,.p-range .cta{flex-direction:column;align-items:flex-start;gap:10px}
  .p-yard .note,.p-range .note{margin-top:80px}
  /* PAGES FAMILLE & ACCUEIL : trois colonnes dès 1280 px (plus bas) */
  /* PARADE : bateau borné à 1080 px, fiche recomposée sur deux colonnes sous le bateau */
  /* YACHTS PLUS PETITS sur grand écran (François 30/09 : « on a de la place, réduire les yachts pour ne pas avoir le toit coupé par le header ») :
     largeur de carte bornée aussi par la HAUTEUR d'écran (--cw), carte centrée à 40 % de la hauteur, fiche juste dessous */
  .p-parade{--cw:min(90vw,1080px,86lvh)}
  .p-parade .card{width:var(--cw);left:calc(50% - var(--cw) / 2);top:calc(40lvh - var(--cw) * .2)}
  .p-parade .info{top:auto;bottom:calc(34px + env(safe-area-inset-bottom));width:max(var(--cw),min(90vw,980px));left:50%;right:auto;padding:0 0 40px;transform:translateX(-50%) translateZ(0)}
  .p-parade.builder .card{top:calc(46lvh - var(--cw) * .2)} .p-parade.builder .info{top:calc(46lvh + var(--cw) * .2 + 34px)}
  .p-parade:not(.builder) .info{display:grid;grid-template-columns:auto auto minmax(0,1fr) minmax(320px,38%);grid-template-areas:"name plus . grid" "sub sub . grid" "row row . grid";column-gap:22px;align-items:start}
  .p-parade:not(.builder) .info .name{grid-area:name;padding-right:0!important}
  .p-parade:not(.builder) .info .vbtn{grid-area:plus;position:static;align-self:center}   /* « + » juste à droite du nom (François 30/09 : « très mal placé ») */
  .p-parade:not(.builder) .info .sub{grid-area:sub}
  .p-parade:not(.builder) .info .grid{grid-area:grid;align-self:center;margin-top:0;margin-left:44px}
  .p-parade:not(.builder) .info .grid,.p-parade:not(.builder) .info .grid.g2{grid-template-columns:1fr 1fr;gap:12px 32px;text-align:left;padding:0;border:0}   /* plus de filets autour des 4 infos (François 30/09) */
  .p-parade:not(.builder) .info .grid > div span{left:0}
  .p-parade:not(.builder) .info .row{grid-area:row;justify-content:flex-start;gap:40px;margin-top:22px}
  .p-parade:not(.builder) .info .okbtn{grid-column:1/-1;justify-self:start}
  /* FORMULAIRE DE LA PARADE sur PC (François 30/09 : « améliorer ça ») : bloc CENTRÉ verticalement, bouton d'envoi juste sous le consentement
     (plus collé en bas de l'écran), à la largeur de son texte */
  .p-parade .modal{flex-direction:column;align-items:center;justify-content:center}
  .p-parade .modal .sheet{height:auto;max-height:calc(100% - 150px);flex:0 1 auto;padding-top:36px;padding-bottom:4px}
  .p-parade .modal .foot{position:static;width:100%;max-width:560px;background:none;padding:20px 40px 40px;box-sizing:border-box}
  .p-parade .modal .send{display:inline-block;width:auto;padding:14px 34px}
  .p-parade .modal.thanks .sheet{padding-bottom:36px}
  /* FENÊTRE (François 06/10/2026 : « ridicule d'avoir ça en aussi grand, fait un modal propre ») : la parade reste visible derrière,
     voilée et floutée ; le formulaire et son bouton forment UNE carte centrée aux coins arrondis. */
  body.lead-open.p-parade .stage,body.lead-open.p-parade .info,body.lead-open.p-parade .top{visibility:visible}
  .p-parade .modal{background:rgba(4,18,32,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .p-parade .modal .sheet{width:560px;max-width:92vw;height:auto!important;margin-top:0!important;max-height:calc(100% - 170px);background:var(--sea);border-radius:22px 22px 0 0;box-shadow:none;padding:34px 40px 4px}
  .p-parade .modal .foot{width:560px;max-width:92vw;background:var(--sea);border-radius:0 0 22px 22px;box-shadow:0 40px 80px rgba(0,0,0,.45);padding:18px 40px 32px;margin-top:-1px;bottom:auto!important}   /* même fond que le haut, 1 px de recouvrement : aucune ligne à la jonction (François 06/10) */
  /* REFLET DU CIEL sur grand écran (François 06/10 : « le bas du fond ne touche pas le bas de l'écran ») : le voile et le reflet s'arrêtaient à
     hauteur fixe (rapport 560/1536 de l'image) ; sur un écran large et haut, ils descendent désormais jusqu'en bas. */
  .p-parade body .sea::before,body.p-parade .sea::before{background-size:100% 70px,var(--pkw,100vw) auto,100% max(calc(var(--pkw,100vw) * 560 / 1536),calc(100% - var(--hz))),var(--pkw,100vw) max(calc(var(--pkw,100vw) * 560 / 1536),calc(100% - var(--hz))),100% calc(100% - var(--hz))}
  .p-parade .modal .x{right:24px;top:24px}
  .p-parade .modal .foot{transform:translateY(-24px);transition:transform .35s ease} .p-parade .modal.on .foot{transform:none}   /* le pied glisse AVEC le haut à l'ouverture : plus de fond sombre entre les deux pendant l'animation (06/10) */
  .p-parade .modal.thanks .sheet{border-radius:22px;padding:56px 40px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
  .p-parade .modal.thanks .done{padding:0}
  /* EN-TÊTE sur PC (François 06/10 : « pas beau sur PC, juste sur fond transparent ») : plus de capsule, le texte garde son ombre. */
  .p-parade .top{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .p-parade.builder .bmark{right:max(10px,calc(50% - 540px + 10px))}
  .p-parade .hint{bottom:34px}
}

/* TRANSITION DE PAGE sur PC (François 30/09 : « quand je reviens, le bateau fonce à la vitesse de l'éclair ») : sur grand écran le bateau
   parcourt une longue distance entre la fiche et la parade → glissement deux fois plus long, départ et arrivée plus doux */
@media (min-width:1024px){
  ::view-transition-group(yp-boat),::view-transition-group(yp-name){animation-duration:1.1s!important;animation-timing-function:cubic-bezier(.45,.05,.25,1)!important}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.6s}
}

/* ————— GRAND ÉCRAN (≥ 1280) : marges plus généreuses, annuaire en trois colonnes ————— */
@media (min-width:1280px){
  :root{--gut:64px}
  .p-home .dir .cols,.p-family .cols{columns:3;column-gap:64px}
  .p-model .cols{column-gap:112px}
  .p-yard .wrap,.p-range .wrap{column-gap:128px}
}