/* =====================================================================
   LES VITRINES — les bannières publicitaires du site (06/10/2026)

   ⚠️ LE MOT « VITRINE », ET PAS « PUB », « AD » NI « BANNER » : les
   bloqueurs de publicité masquent d'office tout élément, classe ou fichier
   qui porte ces noms — y compris les annonces vendues à la main par le site
   lui-même. Ne pas renommer.

   UN SEUL DESSIN pour toutes les pages (Water Start, Team, Réservation) :
   ce fichier et `vitrines.js`. Une page n'a qu'à poser ses emplacements
   (voir l'en-tête de `vitrines.js`) et à charger les deux fichiers.

   AUCUNE RÉGIE, AUCUN COOKIE, AUCUN PISTAGE : des liens simples, ouverts
   dans un nouvel onglet avec `rel="sponsored"`. La page Confidentialité
   n'a donc rien à dire de plus (elle le devrait si l'on comptait un jour
   les clics).

   DEUX FORMES :
     · les COLONNES (160 × 600, le format « skyscraper ») dans les marges,
       à gauche et à droite, à partir de 1 440 px d'écran — la colonne de
       contenu de Water Start fait 1 120 px, il reste alors 192 px par côté ;
     · les BANDEAUX horizontaux, posés dans le fil de la page, en dessous de
       1 440 px (portables, tablettes, téléphones).
   ===================================================================== */

:root{
  --v-buyest-fond:#0B1520;
  --v-buyest-texte:#E8F4FF;
  --v-buyest-cyan:#00D4B8;
  --v-buyest-or:#F0A500;
  --v-bleu:#0E3D52;
  --v-turquoise:#2E8FA6;
  --v-pale:#9CC6D1;
}

/* ---------- LES COLONNES ---------- */
.vitrine-colonne{display:none}
@media (min-width:1440px){
  .vitrine-colonne{
    display:block; position:fixed; z-index:5;
    /* Sous le bandeau collant de la page (96 px chez Water Start) : la page
       peut le régler par `--vitrine-haut`. */
    top:calc(var(--vitrine-haut, 96px) + 24px);
    width:160px; height:min(600px, calc(100vh - var(--vitrine-haut, 96px) - 48px));
  }
  /* DEUX CASES dans une colonne (demande d'Erwan du 06/10/2026) : elles se
     partagent la hauteur de l'écran, 12 px entre elles, et 420 px au plus
     chacune — de 295 à 400 px sur les écrans courants. */
  .vitrine-colonne:has(.vitrine-case + .vitrine-case){height:min(852px, calc(100vh - var(--vitrine-haut, 96px) - 48px))}
  .vitrine-colonne{display:flex; flex-direction:column; gap:12px}
  .vitrine-case{flex:1 1 0; min-height:0; container-type:size}
  /* Centrée dans la marge : la marge vaut (100vw − 1 120 px) / 2, plus les
     32 px de rembourrage de la colonne de contenu, moins 16 px d'air. */
  .vitrine-colonne.gauche{left:calc(((100vw - var(--vitrine-contenu, 1120px)) / 2 + 16px - 160px) / 2)}
  .vitrine-colonne.droite{right:calc(((100vw - var(--vitrine-contenu, 1120px)) / 2 + 16px - 160px) / 2)}
}

/* ---------- LES BANDEAUX ---------- */
.vitrine-bandeau{max-width:728px; height:104px; margin:28px auto; padding:0 16px; box-sizing:content-box}
@media (min-width:1440px){ .vitrine-bandeau{display:none} }
@media (max-width:560px){ .vitrine-bandeau{height:112px; margin:22px auto} }

/* ---------- LA VITRINE ELLE-MÊME ---------- */
.vitrine{
  position:relative; display:flex; box-sizing:border-box; width:100%; height:100%;
  overflow:hidden; border-radius:12px; text-decoration:none;
  font-family:"Public Sans","Helvetica Neue",Arial,sans-serif;
  transition:transform .25s, box-shadow .25s;
}
.vitrine:focus-visible{outline:3px solid var(--v-turquoise); outline-offset:3px}
@media (hover:hover){
  .vitrine:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(11,21,32,.28)}
}
/* La mention « Partenaire » (choix d'Erwan du 06/10/2026, à la place de
   « Publicité ») : une annonce se reconnaît comme telle. */
.v-mention{
  position:absolute; top:7px; left:10px; z-index:2;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.72;
}
.vitrine-bandeau .v-mention{top:5px; left:9px}

/* Le bouton : une cible de 44 px de haut sur téléphone. */
.v-bouton{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:8px 14px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.04em; white-space:nowrap;
}
@media (max-width:560px){ .v-bouton{min-height:44px} }
/* Dans les colonnes (160 px), « Devenir partenaire → » passe sur deux lignes
   plutôt que de toucher le cadre. */
.vitrine-colonne .v-bouton{white-space:normal; text-align:center; line-height:1.25; max-width:128px; padding:8px 12px}

/* ===== BUYEST — aux couleurs de la marque (relevées dans le code de
   buyest.io : fond #0B1520, « BUY » #E8F4FF, « EST » #00D4B8, « .io »
   #F0A500, police Michroma, la maison du logo). ===== */
.v-buyest{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(0,212,184,.18), transparent 60%),
    radial-gradient(90% 50% at 50% 100%, rgba(240,165,0,.14), transparent 65%),
    var(--v-buyest-fond);
  color:var(--v-buyest-texte);
  border:1px solid rgba(0,212,184,.35);
}
.v-buyest .v-globe{position:absolute; inset:auto -40px -40px -40px; height:300px; opacity:.22; pointer-events:none}
.v-buyest .v-maison{width:58px; height:58px; flex:none}
.v-buyest .v-logo{font-family:"Michroma",sans-serif; font-size:21px; line-height:1; white-space:nowrap}
.v-buyest .v-logo .est{color:var(--v-buyest-cyan)}
.v-buyest .v-logo .io{color:var(--v-buyest-or); font-size:14px}
.v-buyest .v-accroche{font-size:15px; line-height:1.35; font-weight:600; color:#fff}
.v-buyest .v-accroche em{font-style:normal; color:var(--v-buyest-cyan)}
.v-buyest .v-bouton{background:var(--v-buyest-cyan); color:var(--v-buyest-fond)}
@media (hover:hover){ .v-buyest:hover .v-bouton{background:#33E0C9} }

/* colonne : tout s'empile, du logo au bouton */
.vitrine-colonne .v-buyest{flex-direction:column; align-items:center; justify-content:space-between; text-align:center; padding:40px 12px 26px}
.vitrine-colonne .v-buyest .v-haut{display:flex; flex-direction:column; align-items:center; gap:16px}
.vitrine-colonne .v-buyest .v-accroche{font-size:17px; margin:0 4px}
/* bandeau : en ligne */
.vitrine-bandeau .v-buyest{align-items:center; gap:14px; padding:16px 18px 12px}
.vitrine-bandeau .v-buyest .v-haut{display:flex; align-items:center; gap:12px; flex:none}
.vitrine-bandeau .v-buyest .v-maison{width:46px; height:46px}
.vitrine-bandeau .v-buyest .v-accroche{flex:1 1 auto}
.vitrine-bandeau .v-buyest .v-globe{inset:-60px -40px auto auto; width:300px}
/* Sur téléphone : deux lignes. En haut la maison, le logo et le bouton ;
   en dessous l'accroche. Sur une seule ligne, le bouton sortait du cadre. */
@media (max-width:560px){
  .vitrine-bandeau .v-buyest{flex-wrap:wrap; align-content:center; padding:20px 12px 10px; gap:4px 10px}
  .vitrine-bandeau .v-buyest .v-haut{gap:8px; flex:1 1 auto}
  .vitrine-bandeau .v-buyest .v-maison{width:32px; height:32px}
  .vitrine-bandeau .v-buyest .v-logo{font-size:16px}
  .vitrine-bandeau .v-buyest .v-bouton{padding:8px 14px}
  .vitrine-bandeau .v-buyest .v-accroche{order:3; flex:1 1 100%; font-size:13.5px}
}

/* ===== « VOTRE MARQUE ICI » — l'emplacement à vendre. Le mot change
   (marque, boutique, piscine…) ; il ne bouge pas pour qui a demandé à
   réduire les animations. ===== */
.v-annonceur{
  background:
    repeating-linear-gradient(135deg, rgba(46,143,166,.06) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #FFFFFF 0%, #EEF6F8 100%);
  color:var(--v-bleu);
  border:2px dashed var(--v-turquoise);
}
.v-annonceur .v-mention{color:var(--v-bleu)}
.v-annonceur .v-titre{font-family:"Newsreader",Georgia,serif; line-height:1.02; color:var(--v-bleu)}
.v-annonceur .v-mot{
  display:block; font-style:italic; color:var(--v-turquoise);
  transition:opacity .35s, transform .35s;
}
.v-annonceur .v-mot.sort{opacity:0; transform:translateY(-8px)}
.v-annonceur .v-texte{font-size:12.5px; line-height:1.45; color:#3E5C66}
.v-annonceur .v-bouton{background:var(--v-bleu); color:#fff}
@media (hover:hover){ .v-annonceur:hover .v-bouton{background:var(--v-turquoise)} }

/* LES TEINTES des emplacements à vendre (`data-teinte`). Pas de rouge ni de
   jaune : chez Water Start, ils sont réservés au pavillon du logotype et au
   bouton de la bannière de réservation. */
.v-annonceur.v-t-nuit{
  background:
    repeating-linear-gradient(135deg, rgba(156,198,209,.07) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #0E3D52 0%, #0A2E3F 100%);
  border:2px dashed var(--v-pale); color:#fff;
}
.v-annonceur.v-t-nuit .v-mention, .v-annonceur.v-t-nuit .v-titre{color:#fff}
.v-annonceur.v-t-nuit .v-mot{color:var(--v-pale)}
.v-annonceur.v-t-nuit .v-texte{color:#CFE3E9}
.v-annonceur.v-t-nuit .v-vague path{stroke:var(--v-pale)}
.v-annonceur.v-t-nuit .v-bouton{background:#fff; color:var(--v-bleu)}
@media (hover:hover){ .v-annonceur.v-t-nuit:hover .v-bouton{background:var(--v-pale)} }

.v-annonceur.v-t-sable{
  background:
    repeating-linear-gradient(135deg, rgba(138,109,31,.06) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #FFFDF7 0%, #F4EEDD 100%);
  border:2px dashed #B8963E;
}
.v-annonceur.v-t-sable .v-mot{color:#8A6D1F}
.v-annonceur.v-t-sable .v-vague path{stroke:#B8963E}
.v-annonceur.v-t-sable .v-texte{color:#5C5444}

.v-annonceur.v-t-ecume{
  background:
    repeating-linear-gradient(135deg, rgba(14,61,82,.05) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #E4F2F5 0%, #CFE6EC 100%);
  border:2px dashed var(--v-bleu);
}
.v-annonceur.v-t-ecume .v-mot{color:#1F6F84}
.v-annonceur.v-t-ecume .v-texte{color:#2F4E58}

.vitrine-colonne .v-annonceur{flex-direction:column; align-items:center; justify-content:space-between; text-align:center; padding:44px 12px 26px}
.vitrine-colonne .v-annonceur .v-titre{font-size:38px}
.vitrine-colonne .v-annonceur .v-mot{font-size:36px; min-height:1.1em}
.vitrine-colonne .v-annonceur .v-vague{width:110px; height:24px}
.vitrine-bandeau .v-annonceur{align-items:center; gap:16px; padding:14px 18px 10px}
/* Le titre a une largeur FIXE : le mot qui change ne pousse pas le reste ;
   « ici » suit le mot, sans trou. */
.vitrine-bandeau .v-annonceur .v-titre{font-size:28px; flex:none; width:290px}
.vitrine-bandeau .v-annonceur .v-mot{display:inline; font-size:28px}
.vitrine-bandeau .v-annonceur .v-texte{flex:1 1 auto}
.vitrine-bandeau .v-annonceur .v-vague{display:none}
@media (max-width:560px){
  .vitrine-bandeau .v-annonceur{flex-wrap:wrap; gap:4px 10px; padding:18px 12px 10px; align-content:center}
  .vitrine-bandeau .v-annonceur .v-titre{width:auto; flex:1 1 100%}
  .vitrine-bandeau .v-annonceur .v-titre, .vitrine-bandeau .v-annonceur .v-mot{font-size:23px}
  .vitrine-bandeau .v-annonceur .v-texte{display:none}
  .vitrine-bandeau .v-annonceur .v-bouton{margin-left:auto}
}

/* (placées en fin de fichier : elles doivent l'emporter sur les tailles ci-dessus) */
/* Une case peu haute (deux bannières sur un écran de portable) : on serre,
   le globe se replie, l'accroche secondaire disparaît. */
@container (max-height:420px){
  .vitrine-colonne .v-buyest{padding:30px 10px 16px}
  .vitrine-colonne .v-buyest .v-haut{gap:10px}
  .vitrine-colonne .v-buyest .v-maison{width:44px; height:44px}
  .vitrine-colonne .v-buyest .v-logo{font-size:19px}
  .vitrine-colonne .v-buyest .v-accroche{font-size:15px}
  .vitrine-colonne .v-annonceur{padding:30px 10px 16px}
  .vitrine-colonne .v-annonceur .v-titre{font-size:32px}
  .vitrine-colonne .v-annonceur .v-mot{font-size:30px}
}
@container (max-height:330px){
  .vitrine-colonne .v-annonceur .v-texte{display:none}
  .vitrine-colonne .v-buyest .v-globe{height:200px}
}

/* Le texte lu par les lecteurs d'écran, invisible à l'œil. */
.v-lu{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .vitrine, .v-annonceur .v-mot{transition:none}
}