/* tuBarcelona — feuille de style unique.
   Mise en page : proportions de la maquette (800 u de large → 1 u = 0,125 vw, plafonné).
   Typographie : tailles « web » classiques (17–21 px de texte courant), lisibles sans zoom. */

@font-face { font-family: "Canbera"; src: url("/fonts/Canbera.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/Jost-var.woff2") format("woff2-variations"), url("/fonts/Jost-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/Jost-cyr.woff2") format("woff2-variations"), url("/fonts/Jost-cyr.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+2116; }   /* cyrillique : téléchargé seulement sur la page russe */

:root {
  --salmon: #e4957f;
  --orange: #efbc8d;
  --pink: #eec3d9;
  --rose: #db7e90;
  --ink: #575756;
  --black: #1d1d1b;
  --paper: #ffffff;
  --grey-1: #f6f6f6;
  --grey-2: #dfdfdf;
  --grey-3: #bcbcbb;
  --grey-4: #9d9d9c;
  --gold: #f6ae00;
  --blue: #459adb;              /* Costa Brava (maquette v2) */
  --sunny: #f9e64d;

  --display: "Canbera", "Cooper Black", Georgia, serif;
  --body: "Jost", "Futura", "Avenir Next", "Century Gothic", sans-serif;
  --cjk: sans-serif;

  --hs: max(0.79px, 0.125vw);             /* échelle de l’en-tête (vagues : jamais plafonnée pour garder leur forme) */
  --u: min(var(--hs), 2.3px);             /* échelle de la mise en page, plafonnée (≈ écran de 1 840 px) */
  --hh: calc(var(--hs) * 190);            /* hauteur de la bande d’en-tête */
  --radius: calc(var(--u) * 41.5);        /* coins des cartes */
  --gutter: calc(var(--u) * 30.6);        /* gouttière entre colonnes */
  --col: calc(var(--u) * 289.4);          /* largeur d’une colonne (carte, photo) */

  --t: clamp(18px, 0.62vw + 13px, 24px);  /* texte courant */
  --h2: clamp(32px, 1.8vw + 15px, 52px);  /* titres de section et des cartes (Canbera) */
  --h2l: clamp(28px, 1.55vw + 13px, 45px); /* complément de titre en Futura light */
}

/* Langues sans glyphes Canbera / Jost : les mots latins (tuBarcelona, tuDía…) restent en Canbera,
   le reste bascule sur Jost gras (russe) ou sur les polices système chinoises / japonaises. */
html[lang="ru"] { --display: "Canbera", "Jost", sans-serif; }
html[lang="zh"] { --cjk: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; --display: "Canbera", var(--cjk); --body: "Jost", var(--cjk); }
html[lang="ja"] { --cjk: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; --display: "Canbera", var(--cjk); --body: "Jost", var(--cjk); }
html[lang="ru"] :is(h2, h3, .tagline-display, .legal-page h1), html[lang="zh"] :is(h2, h3, .tagline-display, .legal-page h1), html[lang="ja"] :is(h2, h3, .tagline-display, .legal-page h1) { font-weight: 700; font-synthesis: none; }
html[lang="zh"] body, html[lang="ja"] body { line-height: 1.6; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }   /* défilement vertical uniquement, à toutes les largeurs (clip : ne casse pas position:sticky ; hidden en repli) */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-weight: 300; font-size: var(--t); line-height: 1.35;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
strong { font-weight: 500; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--black); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 16px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }

.container { width: min(calc(var(--u) * 610), calc(100% - 40px)); margin-inline: auto; }

/* ---------- En-tête : vagues + logo ---------- */
.site-header { position: absolute; inset: 0 0 auto 0; height: var(--hh); z-index: 5; pointer-events: none; }
.waves { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave-pink { mix-blend-mode: multiply; }
.logo {
  position: absolute; pointer-events: auto; text-decoration: none; color: #fff;
  left: calc(var(--hs) * 93.3); top: calc(var(--hs) * 32);
  font-family: var(--display); font-size: clamp(36px, calc(var(--hs) * 48), 112px); line-height: 1; letter-spacing: -0.01em;
}
.site-header--small { position: relative; }

/* ---------- Fleur + menu (langues / contact) ---------- */
.flor {
  position: fixed; z-index: 21; top: calc(var(--hs) * 45); right: calc(var(--hs) * 94.5);
  width: clamp(24px, calc(var(--hs) * 25), 56px); height: clamp(24px, calc(var(--hs) * 25), 56px);
  padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
  transition: transform .25s ease, color .25s ease, right .35s ease;
}
.flor svg { width: 100%; height: 100%; overflow: visible; fill: #fff; transition: fill .25s ease; }
.flor:hover, .flor[aria-expanded="true"] { transform: rotate(45deg); }
.flor.is-scrolled svg { fill: var(--salmon); }
.flor.is-scrolled { right: calc(var(--hs) * 30); }   /* une fois qu’on scrolle, la fleur se range à droite, hors de la colonne de texte */

/* Le menu n'a pas de boîte propre : ses trois éléments sont fixés séparément, pour que le disque « contact »
   puisse se fondre (multiply) avec le panneau des langues ET la vidéo, comme dans la maquette. */
.menu, .menu[hidden] { display: contents; }
.lang, .bubble, .bubble-bg { position: fixed; transition: opacity .35s ease, transform .35s ease; }
.menu:not(.is-open) .lang, .menu:not(.is-open) .bubble, .menu:not(.is-open) .bubble-bg,
.menu.at-contact .bubble, .menu.at-contact .bubble-bg { opacity: 0; transform: translateY(-8px); pointer-events: none; }   /* bulle inutile (et gênante) quand la section contact est à l'écran */
.lang {
  z-index: 18; right: calc(var(--hs) * 118.2); top: calc(var(--hs) * 68);
  min-height: calc(var(--hs) * 133.1); padding: calc(var(--hs) * 14) calc(var(--hs) * 20);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.58);   /* valeur de la maquette (relevée sur l'aplat orange) */
  border: 1px solid rgba(29,29,27,.07); box-shadow: 0 calc(var(--hs) * 4) calc(var(--hs) * 18) rgba(29,29,27,.18);   /* c'est le contour qui porte la lisibilité sur fond blanc, pas le remplissage */
  border-radius: calc(var(--hs) * 41.5);
  text-align: center;
}
.lang ul { display: grid; grid-template-columns: repeat(3, auto); column-gap: calc(var(--hs) * 12); row-gap: calc(var(--hs) * 4); }   /* 9 langues sur 3 × 3 */
.lang a { display: block; padding: .1em .35em; font-size: clamp(15px, calc(var(--hs) * 15), 30px); line-height: 1.3; text-decoration: none; color: var(--ink); white-space: nowrap; }
.lang a:hover, .lang a[aria-current="page"] { font-weight: 500; }
.bubble-bg, .bubble {
  right: calc(var(--hs) * 57.7); top: calc(var(--hs) * 156);
  width: calc(var(--hs) * 105); height: calc(var(--hs) * 105); border-radius: 50%;
}
.bubble-bg { z-index: 19; background: var(--pink); mix-blend-mode: multiply; }
.bubble {
  z-index: 20; display: grid; place-items: center; text-decoration: none; color: #fff;
  font-weight: 700; font-size: clamp(17px, calc(var(--hs) * 18.5), 36px);
}
.bubble:hover + .bubble-bg, .bubble-bg:hover { transform: scale(1.05); }

/* ---------- Héro vidéo (16/9 entière, comme dans la maquette) ---------- */
.hero { position: relative; margin-top: 0; height: calc(var(--hs) * 587.7); background: var(--paper); overflow: hidden; }
.hero-video, .hero-poster img { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--hs) * 138.7); width: 100%; height: calc(100% - var(--hs) * 138.7); object-fit: cover; object-position: 50% 0; }
.hero-poster img { z-index: 0; }
.hero-video { z-index: 1; }
.hero.is-playing .hero-poster { visibility: hidden; }
.tagline {
  position: absolute; z-index: 2; left: calc(var(--hs) * 347.9); top: calc(var(--hs) * 290);
  font-family: var(--body); font-weight: 300; font-size: clamp(26px, calc(var(--hs) * 30), 72px); line-height: 1; color: var(--ink);
  text-shadow: 0 0 24px rgba(255,255,255,.55);
}
.tagline-display { font-family: var(--display); font-weight: 400; font-size: 1.12em; line-height: 1; }

/* ---------- Intro ---------- */
.intro { margin-top: calc(var(--u) * 34); font-size: calc(var(--t) * 1.15); line-height: 1.35; color: var(--black); max-width: 34em; }
.intro strong { font-weight: 500; }

/* ---------- Cartes formules ---------- */
.offers { margin-top: calc(var(--u) * 40); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 27) var(--gutter); }
.card { --cpx: calc(var(--u) * 28.3); position: relative; border-radius: var(--radius); padding: calc(var(--u) * 24) calc(var(--u) * 36) calc(var(--u) * 26) var(--cpx); min-height: calc(var(--col) * 0.6); color: var(--ink); }
.card-dia { background: var(--pink); }
.card-semana { background: var(--orange); }
.card-mes { background: var(--salmon); }
.card-evento { background: var(--rose); }
.card h3 { position: relative; display: table; font-family: var(--display); font-weight: 400; font-size: var(--h2); line-height: 1; }   /* largeur = largeur du titre, pour que le trait s’aligne sur sa fin */
/* trait (cotes du PDF : épaisseur 5 u, bouts ronds, démarre 8 u avant le bord de la carte, s’arrête au bout du titre,
   centré 17,4 u sous la ligne de base d’un titre de 36 u → valeurs exprimées en em du titre) */
.card h3::after { content: ""; position: absolute; left: calc(-1 * var(--cpx) - .29em); right: -.07em; top: 1.24em; height: .14em; border-radius: 999px; background: var(--ink); }
.card-duration { font-weight: 700; font-size: var(--t); line-height: 1.3; margin-top: 1.4em; }
.card-text { font-size: var(--t); line-height: 1.35; margin-top: .3em; max-width: 17em; }

/* ---------- Titres de section ---------- */
h2 { font-family: var(--display); font-weight: 400; font-size: var(--h2); line-height: 1; color: var(--ink); }
.h2-light { font-family: var(--body); font-weight: 300; font-size: var(--h2l); }
section { margin-top: calc(var(--u) * 52); }

/* ---------- Avis / logos / galerie ---------- */
.reviews-head { position: relative; display: flex; align-items: center; min-height: calc(var(--u) * 50); }
.reviews-head h2 { display: block; width: 100%; padding-right: calc(var(--u) * 282); line-height: 1.05; }   /* titre à gauche, sous-titre calé à droite, près de la pastille Google */
.reviews-head .h2-light { display: block; text-align: right; }
.google-pill {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12);
  width: calc(var(--u) * 260); max-width: 100%; height: calc(var(--u) * 50); border-radius: 999px; background: var(--grey-1);
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.google-pill:hover { transform: translateY(calc(-50% - 2px)); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.google-pill img { width: calc(var(--u) * 76); height: auto; }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: calc(var(--u) * 18); height: auto; }

.logos { margin-top: calc(var(--u) * 28); position: relative; overflow: hidden; padding: calc(var(--u) * 10) 0; }
.logos::before, .logos::after { content: ""; position: absolute; top: 0; bottom: 0; width: max(2px, calc(var(--u) * 1.4)); background: var(--grey-3); z-index: 2; }
.logos::before { left: 0; } .logos::after { right: 0; }
.logos-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.logos:hover .logos-track, .logos:focus-within .logos-track { animation-play-state: paused; }
.logos-list { display: flex; align-items: center; gap: calc(var(--u) * 36); padding-right: calc(var(--u) * 36); }
.logos-list img { height: calc(var(--u) * 56); width: auto; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }   /* défilement vers la gauche */
@media (prefers-reduced-motion: reduce) {
  .logos { overflow-x: auto; }
  .logos-track { animation: none; }
  .logos-list[aria-hidden="true"] { display: none; }
}

.esprit-h { margin-top: calc(var(--u) * 52); }   /* titre propre à la galerie : même hauteur d'encre que les autres h2 */
.gallery { margin-top: calc(var(--u) * 28); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 27) var(--gutter); }
.tile { border-radius: var(--radius); overflow: hidden; aspect-ratio: 289.4 / 252.5; background: var(--grey-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Spécial Costa Brava (maquette v2 : 1 pt de maquette = 1 u) ---------- */
.costabrava h2 { color: var(--blue); }
.cb-frame {                                    /* 1er trait : plein fin */
  position: relative; margin-top: calc(var(--u) * 26);
  border: calc(var(--u) * 2.4) solid var(--blue); border-radius: calc(var(--u) * 33);
  padding: calc(var(--u) * 8);
}
.cb-dots {                                     /* 2e trait : rangée de points */
  border: calc(var(--u) * 8.5) dotted var(--blue); border-radius: calc(var(--u) * 26);
  padding: calc(var(--u) * 7);
}
.cb-inner {                                    /* 3e trait : plein épais */
  position: relative; z-index: 1;
  border: calc(var(--u) * 7.2) solid var(--blue); border-radius: calc(var(--u) * 18);
  padding: calc(var(--u) * 15) calc(var(--u) * 14) calc(var(--u) * 25) calc(var(--u) * 40);
  display: grid; grid-template-columns: calc(var(--u) * 247) 1fr; gap: calc(var(--u) * 23); align-items: start;
}
.cb-sandclip { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--u) * 12); z-index: 0; pointer-events: none; }
.cb-sand {                                     /* une seule image carrée, tournée à 180°, coupée par le cadre */
  position: absolute; left: -1%; width: 102%; aspect-ratio: 1 / 1; bottom: 0;
  transform: translateY(23%) rotate(180deg);   /* 23 % de sa propre hauteur : le bas du tas passe sous le cadre, à toute échelle */
}
.cb-sand img { display: block; width: 100%; height: 100%; }
.cb-map {                                      /* polaroid : passe-partout large, débord à gauche, inclinaison de la maquette */
  margin: 0 0 0 calc(var(--u) * -132); width: calc(var(--u) * 379); position: relative; z-index: 2;
  background: #fbfbf8; padding: calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 27);
  box-shadow: calc(var(--u) * 1) calc(var(--u) * 7) calc(var(--u) * 6) rgba(29,29,27,.56);   /* ombre de papier : bas-droite, franche */
  transform: rotate(-2deg);
}
.cb-map img { display: block; width: 100%; height: auto; }
.cb-text { position: relative; z-index: 2; padding-top: calc(var(--u) * 18); font-size: var(--t); line-height: 1.35; color: var(--ink); }
.cb-lead { font-weight: 700; font-size: calc(var(--t) * 1.15); line-height: 1.25; }
.cb-body { margin-top: 1.1em; }
.cb-offer { margin-top: 1.1em; font-weight: 700; }
.cb-star {                                     /* pastille étoile « réserver » → section contact */
  position: absolute; z-index: 3; right: calc(var(--u) * -22); bottom: calc(var(--u) * 62);
  width: calc(var(--u) * 132); height: calc(var(--u) * 132);
  display: grid; place-items: center; text-align: center;
  background: var(--sunny); color: #fff; text-decoration: none;
  font-weight: 700; font-size: clamp(17px, calc(var(--hs) * 18.5), 36px); line-height: 1.1; padding: 0 .5em;   /* même taille que « contact » dans la bulle */
  clip-path: polygon(50.0% 0.0%, 54.5% 7.2%, 60.4% 1.1%, 63.3% 9.1%, 70.3% 4.3%, 71.5% 12.8%, 79.4% 9.5%, 78.8% 18.1%, 87.1% 16.7%, 84.8% 25.0%, 93.3% 25.5%, 89.3% 33.1%, 97.5% 35.4%, 92.1% 42.0%, 99.7% 46.1%, 93.2% 51.4%, 99.7% 57.0%, 92.1% 60.9%, 97.5% 67.6%, 89.3% 69.7%, 93.3% 77.5%, 84.8% 78.0%, 87.1% 86.3%, 78.8% 84.9%, 79.4% 93.5%, 71.5% 90.2%, 70.3% 98.7%, 63.3% 93.9%, 60.4% 101.9%, 54.5% 95.8%, 50.0% 103.0%, 45.5% 95.8%, 39.6% 101.9%, 36.7% 93.9%, 29.7% 98.7%, 28.5% 90.2%, 20.6% 93.5%, 21.2% 84.9%, 12.9% 86.3%, 15.2% 78.0%, 6.7% 77.5%, 10.7% 69.7%, 2.5% 67.6%, 7.9% 60.9%, 0.3% 57.0%, 6.8% 51.4%, 0.3% 46.1%, 7.9% 42.0%, 2.5% 35.4%, 10.7% 33.1%, 6.7% 25.5%, 15.2% 25.0%, 12.9% 16.7%, 21.2% 18.1%, 20.6% 9.5%, 28.5% 12.8%, 29.7% 4.3%, 36.7% 9.1%, 39.6% 1.1%, 45.5% 7.2%);
  transition: transform .2s ease;
}
.cb-star:hover, .cb-star:focus-visible { transform: scale(1.06); }
html[lang="ru"] .cb-star { font-size: clamp(12px, calc(var(--hs) * 14.3), 33px); }   /* « забронировать » : mot long, il doit tenir dans l'étoile */
@media (prefers-reduced-motion: reduce) { .cb-star { transition: none; } }

/* ---------- Virée spéciale (maquette v3) ---------- */
.viree-photos { margin-top: calc(var(--u) * 28); display: grid; grid-template-columns: var(--col) var(--col); gap: var(--gutter); }
.viree-photos .tile { margin: 0; }   /* <figure> : marges par défaut du navigateur */
.viree-text { margin-top: calc(var(--u) * 34); font-size: var(--t); line-height: 1.35; color: var(--ink); }
.viree-text strong { font-weight: 700; }

.tile--wide { grid-column: 1 / -1; aspect-ratio: 609.4 / 387.2; }   /* bandeau de tête de galerie (maquette v5) */

/* ---------- Nos bureaux (maquette v5) ---------- */
.bureaux-grid { margin-top: calc(var(--u) * 28); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 27) var(--gutter); }
.bureaux-grid .tile { margin: 0; }
.bureaux-grid > :nth-child(1) { grid-area: 1 / 1; }
.bureaux-grid > :nth-child(2) { grid-area: 2 / 1; }
.bureaux-grid > :nth-child(3) { grid-area: 1 / 2 / span 2 / 2; aspect-ratio: 289.4 / 532; }   /* double hauteur, à droite */

/* ---------- Vous cherchez ? ---------- */
.looking-list { margin-top: calc(var(--u) * 28); display: grid; gap: calc(var(--u) * 27); }
.looking-item { display: grid; grid-template-columns: var(--col) 1fr; gap: var(--gutter); align-items: center; }
.looking-img { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 289.4 / 162.2; }
.looking-img img { width: 100%; height: 100%; object-fit: cover; }
.looking-text h3 { font-weight: 700; font-size: calc(var(--t) * 1.15); line-height: 1.25; color: var(--ink); }
.looking-text p { margin-top: .4em; font-size: var(--t); line-height: 1.35; }

/* ---------- Que faire à Barcelone ---------- */
.events h2 .h2-light { white-space: nowrap; }
.events-box { margin-top: calc(var(--u) * 26); background: var(--grey-1); border-radius: var(--radius); padding: calc(var(--u) * 30) calc(var(--u) * 32); min-height: calc(var(--u) * 260); }
.events-intro { font-size: var(--t); line-height: 1.35; color: var(--ink); }
.events-updated { opacity: .7; }
.events-list { margin-top: calc(var(--u) * 22); }
.event { display: grid; grid-template-columns: 7.6em minmax(0, 1fr) calc(var(--u) * 190); gap: var(--gutter); align-items: start; padding: calc(var(--u) * 16) 0; border-top: 1px solid var(--grey-2); }
.event:first-child { border-top: 0; padding-top: 0; }
.event-date { font-weight: 700; color: var(--ink); font-size: var(--t); line-height: 1.3; }
.event-title { font-weight: 700; font-size: calc(var(--t) * 1.05); line-height: 1.3; color: var(--ink); }
.event-title a { text-decoration: none; }
.event-title a:hover { text-decoration: underline; text-decoration-color: var(--salmon); text-underline-offset: .15em; }
.event-meta { margin-top: .15em; font-size: calc(var(--t) * .92); line-height: 1.3; opacity: .7; }
.event-cat { font-weight: 500; }
.event-summary { margin-top: .4em; font-size: var(--t); line-height: 1.35; }
.event-img { display: block; border-radius: calc(var(--u) * 20); overflow: hidden; aspect-ratio: 3 / 2; background: var(--grey-2); }
.event-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.event:hover .event-img img { transform: scale(1.04); }
.events-ask { margin-top: calc(var(--u) * 22); padding-top: calc(var(--u) * 16); border-top: 1px solid var(--grey-2); font-size: var(--t); }
.events-ask a { font-weight: 700; color: var(--ink); text-decoration-color: var(--salmon); text-underline-offset: .15em; }
.events-empty { margin-top: 2em; text-align: center; opacity: .8; font-size: var(--t); }

/* ---------- Contact ---------- */
.contact-grid { margin-top: calc(var(--u) * 26); display: grid; grid-template-columns: var(--col) 1fr; gap: var(--gutter); align-items: stretch; }   /* la photo prend exactement la hauteur du formulaire */
.contact-right { display: flex; flex-direction: column; min-width: 0; }
.contact-photo { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }   /* pas de hauteur propre : c’est la colonne de droite qui fixe la hauteur */
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.form-title { font-weight: 700; font-size: calc(var(--t) * 1.15); color: var(--ink); margin: 0 0 .7em; }
.field { margin-top: calc(var(--u) * 9); }
.field input, .field textarea {
  width: 100%; border: 0; background: #f0f0ef; border-radius: calc(var(--u) * 18);
  padding: .65em 1em; font: inherit; font-weight: 300; color: var(--black); font-size: var(--t); line-height: 1.3;
}
.field textarea { min-height: calc(var(--u) * 132); resize: vertical; }
.field textarea::-webkit-resizer { display: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink); opacity: .9; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--pink); }
.hp { position: absolute; left: -9999px; }
.form-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: calc(var(--u) * 8); }
.form-privacy { font-size: calc(var(--t) * .78); line-height: 1.3; opacity: .8; max-width: 26em; }
.form-privacy a { text-underline-offset: 2px; }
.btn-ok {
  flex: none; width: calc(var(--u) * 50); height: calc(var(--u) * 50); margin: calc(var(--u) * -34) calc(var(--u) * -20) 0 0;
  border: 0; border-radius: calc(var(--u) * 11); background: rgba(29, 29, 27, .24); color: #fff; -webkit-backdrop-filter: saturate(1.2); backdrop-filter: saturate(1.2);   /* aplat gris en transparence (maquette) : le champ message transparaît dessous */
  font: inherit; font-weight: 700; font-size: calc(var(--t) * 1.1); cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.btn-ok:hover { background: rgba(29, 29, 27, .4); transform: translateY(-2px); }
.btn-ok[disabled] { opacity: .6; cursor: wait; }
.form-status { margin-top: .8em; font-weight: 500; color: var(--black); font-size: var(--t); }
.form-status:empty { display: none; }
.form-status.is-error { color: #b23a3a; }
.contact-form.is-sent .field, .contact-form.is-sent .form-foot { display: none; }
.contact-form.is-sent .form-status { padding: 1em 1.2em; background: var(--pink); border-radius: calc(var(--u) * 18); }

.contact-line { margin-top: auto; padding-top: calc(var(--u) * 22); display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 4.6); font-weight: 700; font-size: clamp(16px, calc(var(--u) * 12.6), var(--t)); color: var(--black); white-space: nowrap; }   /* sur une ligne autant que possible : léger rétrécissement (plancher 16 px), puis retour à la ligne si la fenêtre est vraiment étroite */   /* en bas de la colonne de droite : la photo s’aligne sur l’ensemble */
.contact-line a { text-decoration: none; }
.contact-line a:hover { color: var(--salmon); }
.sep { flex: none; width: 2px; height: 1.5em; background: var(--black); }
.contact-line.is-wrapped .sep-social { visibility: hidden; }   /* réseaux passés à la ligne : pas de trait orphelin en fin de ligne (place conservée, donc pas de va-et-vient) */
.socials { display: flex; align-items: center; gap: inherit; flex: none; flex-wrap: nowrap; }   /* Instagram | LinkedIn : le trait et les deux logos restent solidaires et passent ensemble à la ligne */
.insta, .lkin { display: block; width: 1.38em; height: 1.38em; flex: none; }
.insta svg, .lkin svg { width: 100%; height: 100%; border-radius: 22%; transition: transform .2s ease; }
.insta:hover svg, .lkin:hover svg { transform: scale(1.08); }

.map { position: relative; margin: calc(var(--u) * 44) 0 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 9548 / 10462; background: var(--grey-1); }
.map-img { width: 100%; height: 100%; object-fit: cover; }
.loupe {
  position: absolute; pointer-events: none; width: 340px; height: 340px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 8px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.06);
  background-repeat: no-repeat; background-color: var(--grey-1);
  opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .18s ease, transform .18s ease;
  will-change: left, top;
}
.map.is-zooming .loupe { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none), (pointer: coarse) { .loupe { display: none; } }

/* ---------- Pied de page ---------- */
.site-footer { margin-top: calc(var(--u) * 30); padding: 0 0 calc(var(--u) * 50); font-size: calc(var(--t) * .8); }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-left: calc(var(--u) * 6); }
.footer-inner a { text-decoration: none; }
.footer-inner a:hover { text-decoration: underline; }
.footer-langs { display: flex; flex-wrap: wrap; gap: .45em 1.2em; }   /* 9 langues : elles passent à la ligne plutôt que d'élargir la page */
.footer-langs a[aria-current="page"] { font-weight: 500; }

/* ---------- Bandeau cookies (uniquement si GTM est configuré) ---------- */
.consent {
  position: fixed; z-index: 30; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 760px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 20px;
  background: #fff; color: var(--ink); border-radius: 22px; box-shadow: 0 10px 40px rgba(0,0,0,.18);
  font-size: 15px; line-height: 1.4;
}
.consent[hidden] { display: none; }   /* l'attribut hidden doit l'emporter sur display:flex */
.consent-text { flex: 1 1 320px; margin: 0; }
.consent-text a { text-underline-offset: 2px; }
.consent-actions { display: flex; gap: 10px; }
.consent-btn { font: inherit; font-weight: 700; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.consent-btn:hover { border-color: var(--salmon); color: var(--salmon); }   /* deux boutons de même poids (RGPD) */
@media (max-width: 760px) {
  .viree-photos { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .bureaux-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .bureaux-grid > :nth-child(1), .bureaux-grid > :nth-child(2), .bureaux-grid > :nth-child(3) { grid-area: auto; }
  .bureaux-grid > :nth-child(3) { aspect-ratio: 289.4 / 400; }   /* sinon la photo occupe tout l'écran */
  .viree-text { margin-top: 22px; } .consent { left: 8px; right: 8px; bottom: 8px; padding: 14px 16px; } .consent-actions { width: 100%; } .consent-btn { flex: 1; } }

/* ---------- Pages légales ---------- */
.legal-page { padding-top: calc(var(--u) * 36); max-width: 780px; font-size: var(--t); line-height: 1.45; }
.legal-page h1 { font-family: var(--display); font-weight: 400; font-size: var(--h2); }
.legal-page h2 { font-size: calc(var(--t) * 1.3); margin-top: 1.6em; }
.legal-page p { margin-top: .8em; }
.legal-page .credits { margin-top: .6em; padding-left: 1.2em; list-style: disc; font-size: calc(var(--t) * .9); }
.legal-page .credits li { margin-top: .25em; }
.legal-page .back { margin-top: 3em; }

/* ---------- Petits écrans : une colonne ---------- */
@media (max-width: 760px) {
  :root { --u: 0.8px; --t: 17px; --h2: 30px; --h2l: 26px; --hh: clamp(150px, 40vw, 200px); --gutter: 16px; --radius: 30px; }
  .container { width: calc(100% - 12vw); }
  .logo { left: 6vw; top: calc(var(--hh) * 0.21); font-size: clamp(30px, 10vw, 48px); }
  .flor { right: 6vw; top: calc(var(--hh) * 0.2); width: 30px; height: 30px; }
  .lang { right: 6vw; top: calc(var(--hh) * 0.48); min-height: 0; padding: 13px 14px 28px; border-radius: 40px; background: rgba(255,255,255,.75); }   /* un peu plus couvrant que sur grand écran : sur un petit écran le panneau se lit sur le texte qu'il recouvre */   /* le retrait du bas dégage le coin où vient mordre la pastille, comme sur grand écran */
  .lang ul { column-gap: 10px; row-gap: 3px; }
  .lang a { font-size: 17px; padding: .15em .3em; }
  .bubble, .bubble-bg { right: 6vw; top: calc(var(--hh) * 0.48 + 103px); width: 108px; height: 108px; }
  .bubble-bg { background: #e8b7d1; }   /* rose un peu plus soutenu : le multiply sur fond blanc donnait une pastille trop pâle */
  .bubble { box-shadow: 0 4px 18px rgba(29,29,27,.18); }
  .bubble { font-size: 21px; }
  .hero { height: calc(var(--hh) * 0.88 + 100vw * 0.5625); }   /* bande d'en-tête + vidéo 16/9 entière : le plongeur et la Sagrada Família restent visibles */
  .hero-video, .hero-poster img { top: calc(var(--hh) * 0.63); height: calc(100vw * 0.5625 + var(--hh) * 0.25); object-fit: contain; object-position: 50% 100%; background: #cfd0ca; }   /* image calée en bas (le plongeur reste visible) ; la bande au-dessus reprend la couleur du ciel, sous les vagues */
  html.is-menu-open .tagline { opacity: 0; }   /* le panneau des langues et la bulle contact occupent ce coin du ciel */
  .tagline { transition: opacity .25s ease; left: auto; right: 6vw; max-width: 62vw; text-align: right; top: auto; bottom: 29.5vw;
    font-size: clamp(22px, 6.6vw, 34px); text-shadow: 0 0 18px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.95); }   /* dans le ciel, calé à droite : ni sur le plongeur, ni sur les toits */
  .intro { margin-top: 32px; font-size: 19px; }
  .offers { margin-top: 36px; }
  section { margin-top: 48px; }
  .cards, .looking-item, .contact-grid { grid-template-columns: 1fr; }
  .cards { gap: 16px; }
  .card { --cpx: 24px; min-height: 0; padding: 24px 24px 26px var(--cpx); }
  .card h3::after { left: calc(-1 * var(--cpx) - .29em); }
  .card-text { max-width: none; }
  .reviews-head { min-height: 0; flex-direction: column; align-items: flex-start; }
  .reviews-head h2 { padding-right: 0; }
  .reviews-head .h2-light { text-align: left; }
  .google-pill { position: static; transform: none; margin-top: 18px; width: auto; height: 56px; padding: 0 26px; gap: 12px; }
  .google-pill img { width: 90px; } .stars svg { width: 20px; }
  .logos { margin-top: 24px; padding: 10px 0; } .logos-list { gap: 32px; padding-right: 32px; } .logos-list img { height: 48px; }
  .gallery { margin-top: 24px; gap: 12px; }
  .looking-list { margin-top: 24px; gap: 28px; } .looking-img { aspect-ratio: 3 / 2; }
  .events-box { padding: 22px 20px; min-height: 0; }
  .event { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
  .event-img { order: -1; border-radius: 16px; }
  .field { margin-top: 10px; } .field textarea { min-height: 120px; }
  .form-foot { flex-direction: column-reverse; align-items: flex-end; }
  .btn-ok { width: 52px; height: 52px; margin: -35px 22px 0 0; border-radius: 14px; font-size: 20px; }   /* à cheval sur le champ message (44 % de la hauteur) et rentré de 22 px pour que les bords droits ne s'alignent pas */
  .form-privacy { align-self: flex-start; font-size: 13px; }
  .contact-photo { aspect-ratio: 1 / 1; }
  .contact-line { padding-top: 18px; gap: 12px; font-size: 17px; flex-wrap: wrap; } .sep { height: 26px; }
  .map { margin-top: 28px; }
  .loupe { display: none; }
  .site-footer { font-size: 13px; padding-bottom: 32px; }
}
@media (max-width: 760px) {
  .cb-frame { border-width: 2px; border-radius: 26px; padding: 6px; margin-top: 18px; }
  .cb-dots { border-width: 7px; border-radius: 20px; padding: 5px; }
  .cb-inner { border-width: 5px; border-radius: 14px; padding: 18px 16px 150px; grid-template-columns: 1fr; gap: 22px; justify-items: center; }
  .cb-sandclip { border-radius: 10px; }
  .cb-sand { left: -2%; width: 104%; }
  .cb-map { margin: 0; width: 84%; padding: 14px 14px 16px; transform: rotate(-2deg); box-shadow: 1px 5px 5px rgba(29,29,27,.5); }
  .cb-text { padding-top: 0; }
  .cb-star { right: 6px; bottom: 16px; width: 104px; height: 104px; font-size: 17px; }   /* même taille de libellé que la bulle contact (17 px) */
  html[lang="ru"] .cb-star { width: 118px; height: 118px; font-size: 12px; }   /* « забронировать » : étoile un peu plus grande sur mobile */
  html[lang="nl"] .cb-star { font-size: 15px; }
}

@media (max-width: 420px) {
  .contact-line > .sep { display: none; }   /* le trait entre les deux réseaux reste, lui */
  .contact-line a { display: block; }
}