/* ==========================================================================
   Gouffy Surf Film — surcouche de assets/css/style.css.
   On garde les tokens, la typo (Caprasimo / Instrument Sans) et les boutons
   du site velo ; on repeint seulement le fond en bleu tres clair et on ajoute
   ce dont la page a besoin (reels verticaux, tarifs, QR).
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ ---
     Palette prelevee au pixel sur l'illustration de reference
     (~/Downloads/image-1790716259168.webp, 974x464). Les pixels ont ete
     regroupes par teinte et chaque valeur est la moyenne reelle de son
     groupe — ce ne sont plus des estimations a l'oeil.

       27,6 %  #879255  vert olive      23,3 %  #FBA74B  ambre
       20,7 %  #84AEF0  pervenche       11,6 %  #F77F60  corail
        3,6 %  #CFBF4C  citron                 #F6DDCC  fond du cadre
                                                #FCC5AD  peche
     ------------------------------------------------------------------ --- */
  --cream:      #F6DDCC;   /* le liseré entre les blocs */
  --cream-card: #FDF3EA;   /* cartes : un cran plus clair, pour qu'elles sortent */
  --olive:      #879255;
  --olive-dp:   #596235;   /* assombri : porte du texte creme a 4,9:1 */
  --olive-lt:   #9AA468;
  --coral:      #F77F60;
  --coral-dp:   #E05D3C;   /* les carres du damier */
  --amber:      #FBA74B;
  --peri:       #84AEF0;
  --peri-dp:    #5B84C8;   /* le meme, assombri, quand il faut porter du texte */
  --blush:      #FCC5AD;   /* la peche des silhouettes */
  --amber-vif:  #FFBE3D;   /* jaune franc : le verrou sur la video */
  --lime:       #CFBF4C;

  /* texte : brun chaud, jamais de noir */
  --brown:      #5A4028;
  --ink:        #5A4028;
  --ink-700:    #5A4028;
  --ink-500:    #5A4028;
  --soft-ink:   #5A4028;

  /* les titres heritent de --blue dans la feuille partagee */
  --blue:       #55612F;   /* assombri : le jaune du fond est tres clair */
  --blue-700:   #55612F;
  --blue-600:   #55612F;

  --line:       #EBD3C0;
  --page:       #F6DDCC;   /* le beige du liseré, en fond de page */
  --sky:        #F6DDCC;
  --sky-deep:   #F0D2BC;

  /* Les teintes ci-dessus sont celles de l'illustration : ce sont des
     couleurs de REMPLISSAGE. Posees telles quelles sur du texte elles tombent
     a 1,5-2,3:1. Ce qui porte du texte reprend donc les memes teintes,
     assombries — meme famille a l'oeil, lisible a l'usage. */
  --btn:        #84AEF0;   /* le bleu de l'illustration, tel quel */
  --btn-deep:   #6E9CE6;
  --price:      #84AEF0;   /* le meme bleu pour les chiffres */
  --coral-txt:  #C64A2C;   /* pastilles : blanc dessus a 4,8:1 */
  --apricot:    #FBA74B;
  --band:       #FCC5AD;
}

body { background: var(--page); color: var(--brown); }
.waband, .waband p { color: var(--brown); }


/* style.css ne connait que fr / en / nl — c'est le site velo qui parle
   neerlandais. Cette page parle aussi allemand et espagnol : on ajoute les
   deux regles ici plutot que de toucher a la feuille partagee. */
html[lang="de"] [data-l]:not([data-l="de"]),
html[lang="es"] [data-l]:not([data-l="es"]) { display: none !important; }

/* ---------- header ---------- */
/* L'en-tete n'est plus une barre : il flotte sur la video d'accueil, sans
   fond ni filet. Le hero remonte donc sous lui. Des qu'on descend, le fond
   pale revient — sinon le logo bleu se perdrait sur le contenu clair. */
.header {
  background: transparent; border-bottom: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .25s ease;
}
.shero--photo { margin-top: calc(var(--header-h) * -1); }

/* Tant que la barre flotte sur la video, le verrou passe au jaune franc —
   plus vif que l'ambre des prix, de la meme intensite que le corail : sur
   l'eau sombre il doit claquer, pas se fondre.
   Le logo n'est pas teinte par filtre — il n'existe pas de filtre CSS qui
   amene un trace vers une couleur precise — mais remplace par le meme trace
   deja recolore, comme la version vert fonce utilisee plus bas. */
.header:not(.is-stuck) .lockup img { content: url("../img/logo-surf-amber.png?v=2"); }
.header:not(.is-stuck) .lockup__rule { background: rgba(255,190,61,.5); }
.header:not(.is-stuck) .lockup__svc { color: var(--amber-vif); }
/* Une fois la barre posee sur la creme, le mot-marque bleu pale n'y tient
   plus (1,4:1) : c'est la version vert fonce du meme trace qui prend le
   relais — le fichier existe deja, c'est le logo recolore. */
.header.is-stuck .lockup img { content: url("../img/logo-surf-dark.png"); }
.header.is-stuck {
  background: rgba(246,221,204,.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

/* Verrou du lockup : le mot-marque puis un filet, puis le nom du service.
   Sur petit ecran le filet et le service disparaissent, le logo suffit. */
.lockup { display: flex; align-items: center; gap: 12px; }
/* La taille vit ici et non dans un attribut style sur la balise : en ligne,
   elle passait devant la regle telephone, qui ne s'appliquait donc jamais. */
.lockup img { height: 30px; width: auto; }
.lockup__rule { width: 1px; height: 26px; background: var(--line); }
.lockup__svc {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue-700); line-height: 1.25; max-width: 7em;
}

/* ---------- bouton WhatsApp ---------- */
/* Le bleu est la seule couleur froide de la page : c'est ce qui detache les
   boutons de tous les aplats chauds, y compris du corail du dernier bloc, ou
   la difference de teinte fait le travail que la luminosite ne fait pas. */
.btn--wa { background: var(--btn); color: #fff; font-weight: 700; box-shadow: var(--shadow-sm); }
.btn--wa:hover { background: var(--btn-deep); box-shadow: var(--shadow-md); }
.btn--wa svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn__ico { display: inline-flex; align-items: center; gap: 10px; }

/* Celui de l'en-tete est corail et non bleu : pose sur l'image d'accueil il
   doit se distinguer du gros bouton bleu juste en dessous — deux boutons
   identiques a quelques centimetres l'un de l'autre s'annulent. */
.header .btn--wa { padding: 11px 18px; font-size: 14.5px; background: var(--coral); }
.header .btn--wa:hover { background: var(--coral-dp); }

/* Le menu a disparu avec le passage en prospectus, et c'est lui qui poussait
   ce bloc vers la droite. On le repousse donc explicitement, et les drapeaux
   ferment la marche, apres le bouton WhatsApp. */
.header__tools { margin-left: auto; }
.header__tools .btn--wa { order: 1; }
.header__tools .langswitch { order: 2; }

/* ---------- selecteur de langue ---------- */
/* A cinq langues, cinq drapeaux en rang mangeaient la barre : on n'affiche
   que le drapeau courant, et le reste tombe dans un menu.
   Les selecteurs sont volontairement doubles (.langswitch .lang__…) : la
   feuille partagee vise « .langswitch button », plus specifique qu'une
   simple classe, et ecraserait sinon l'affichage et la taille des SVG. */
/* Le selecteur n'a plus aucun fond ni contour, a aucun moment : la feuille
   partagee lui dessine une pastille blanche cerclee, on l'annule ici pour de
   bon — ce n'est plus un bouton, c'est un drapeau pose sur la barre. */
.langswitch {
  position: relative; padding: 0;
  border: 0 !important; background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* Rien autour : le drapeau et le chevron, nus. La pastille blanche faisait
   un troisieme bouton dans une barre qui n'en demandait pas. */
.langswitch .lang__toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 4px; border: 0; background: transparent; border-radius: 6px;
  cursor: pointer; line-height: 0; color: var(--brown);
}
.langswitch .lang__flag { display: block; line-height: 0; }
.langswitch .lang__flag svg {
  width: 24px; height: 16px; border-radius: 3px; display: block;
  opacity: 1; box-shadow: none;
}
.langswitch .lang__chev {
  width: 10px; height: 6px; flex: 0 0 auto;
  opacity: 1; box-shadow: none; transition: rotate .2s ease;
}
.langswitch.is-open .lang__chev { rotate: 180deg; }

.langswitch .lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; min-width: 178px;
  display: grid; gap: 2px;
}
.langswitch .lang__menu[hidden] { display: none; }
.langswitch .lang__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; background: transparent; border-radius: 8px;
  font: 600 14px/1.2 var(--text); color: var(--brown); cursor: pointer; text-align: left;
}
.langswitch .lang__menu button svg {
  width: 22px; height: 15px; border-radius: 2px; flex: 0 0 auto;
  opacity: 1; box-shadow: none;
}
.langswitch .lang__menu button:hover { background: rgba(90,64,40,.08); }
.langswitch .lang__menu button[aria-pressed="true"] { background: rgba(90,64,40,.12); }

/* Sur la video, seul le chevron change de couleur — le drapeau se suffit. */
.header:not(.is-stuck) .langswitch .lang__toggle { color: #fff; }

/* ---------- hero photo ---------- */
/* Plein cadre, texte blanc pose directement sur la photo : ni voile, ni ombre
   portee. La lisibilite tient au seul cadrage. Les deux images d'accueil sont
   decoupees dans la moitie basse de la photo d'origine, la ou l'eau est assez
   sombre pour porter du blanc (mesure : 5 a 7 pour 1 sous le texte). */
/* Le hero est de nouveau une image : la video aerienne sur ordinateur, la
   photo verticale sur telephone. Le jaune ne sert plus que de fond d'attente,
   le temps que le fichier arrive. Le bloc monte en hauteur — pres d'un ecran
   plein — pour que le plan large respire. */
.shero--photo {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--amber);
  color: #fff; display: flex; align-items: flex-end;
  min-height: min(88vh, 840px);
}
/* <picture> ne doit pas s'interposer entre le hero et l'image positionnee. */
.shero--photo picture { display: contents; }
.shero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  background: var(--amber);   /* le temps que le fichier arrive */
}
/* Aucun zoom : chaque montage est montre en entier, dans son propre sens —
   le plan paysage sur ordinateur, la tranche verticale sur telephone. Un
   agrandissement vers un bord, meme leger, faisait lire le plan large comme
   une bande verticale : ce n'est plus le cadrage du drone qu'on voyait, mais
   une tranche de celui-ci. */
/* Le grain, pose par-dessus l'image : un bruit genere en SVG, sans fichier a
   charger. En « soft-light » il se pose sans assombrir, ce qui preserve le
   contraste du texte clair. */
.shero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .16; mix-blend-mode: soft-light;
}
@media (prefers-reduced-motion: reduce) { .shero__grain { opacity: .10; } }
.shero__in {
  position: relative; width: 100%;
  padding-top: calc(var(--header-h) + clamp(18px, 4vw, 44px));
  /* Le texte est remonte, mais pas jusqu'en haut : le plan a du ciel clair
     sur son tiers superieur et de l'ecume sur son tiers inferieur. Le bloc
     est cale entre les deux, sur la mer sombre. Trop bas il tombait dans
     l'ecume (jaune a 1,1:1), trop haut il montait dans le ciel. C'est du
     cadrage, pas un voile. */
  padding-bottom: clamp(70px, 11vw, 150px);
}
.shero__in > *:not(.shotby) { max-width: 620px; }
/* Le titre prend le meme jaune franc que le verrou : plus clair que l'ambre
   des prix, il gagne un demi-point de contraste sur l'eau sombre (3,0:1 au
   lieu de 2,5) et les deux jaunes de la premiere section n'en font qu'un. */
.shero--photo .h1 { color: var(--amber-vif); margin-block: 16px 20px; }
.shero--photo .eyebrow { color: rgba(255,255,255,.92); }
/* Ni orange sur le chiffre, ni trait sous « et » : la phrase se lit d'un
   seul blanc, sans rien qui accroche l'oeil au milieu. */
.shero--photo .lede em { font-style: normal; text-decoration: none; }
.shero--photo .lede b { color: inherit; }
/* Le jaune est reserve au titre. Le paragraphe et la ligne des spots restent
   blancs : sur ce plan le blanc tient a 2,6:1 la ou le jaune tombait a 1,6 —
   c'est le texte courant, celui qu'on lit vraiment. */
.shero--photo .lede { color: #fff; font-weight: 500; max-width: 42ch; }
.shero--photo .h1 b { color: var(--amber-vif); }
/* Deux fleurs du logo posees au bout du titre, en blanc, qui tournent — la
   meme idee que celle du bloc drone. Elles sont ecrites APRES les cinq
   variantes de langue, donc elles suivent toujours la ligne visible.
   Les tailles sont en « em » : elles suivent le corps du titre, et restent
   donc proportionnees du telephone au grand ecran. */
/* La fleur est posee HORS du flux : en ligne, un element plus haut que la
   lettre agrandit sa ligne, et les deux lignes du titre s'ecartaient a mesure
   qu'on la grossissait. Le conteneur garde donc une hauteur nulle et la fleur
   flotte dedans — on peut la grossir autant qu'on veut sans toucher au titre.
   Une seule variable pilote les deux. */
.h1__marks {
  --s: 1.18em;
  display: inline-block; position: relative;
  width: var(--s); height: 0; margin-left: .30em; vertical-align: baseline;
}
.h1__marks .mark {
  position: absolute; left: 0; bottom: calc(var(--s) * -.18);
  width: var(--s); height: var(--s);
  background-color: #fff;
  -webkit-mask: url("../img/fleur.png") center / contain no-repeat;
          mask: url("../img/fleur.png") center / contain no-repeat;
}
/* Une seule fleur, et elle fait deux choses a la fois : elle tourne, et elle
   derive doucement. Les deux animations ne se marchent pas dessus parce
   qu'elles visent des proprietes distinctes — « rotate » et « translate » —
   la ou un double « transform » se serait ecrase. */
.mark--lg {
  animation: gouffy-spin 28s linear infinite, gouffy-float 11s ease-in-out infinite;
}
/* La derive est exprimee en pourcentage de l'element : elle s'adapte donc a
   la taille de chaque fleur, du petit signe du titre au grand motif bleu. */
@keyframes gouffy-float {
  50% { translate: 26% -20%; }
}
@media (prefers-reduced-motion: reduce) { .h1__marks .mark { animation: none; } }

.shero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.shero--photo .btn--ghost { border-color: rgba(255,255,255,.72); color: #fff; }
.shero--photo .btn--ghost:hover { background: rgba(255,255,255,.14); }

/* La photo : epinglee a droite sur grand ecran, posee sous les boutons sur
   telephone. Sans legende — on voit bien ce que c'est.
   Le cadre est en 2:3 et non plus en 4:5 : plus haut, donc plus serre sur
   elle, et la mise a l'echelle acheve de couper le ciel vide et le sable du
   bas. L'arrondi passe sur la figure, seule a pouvoir rogner une image
   agrandie. */
/* Sur telephone la photo est centree sous les boutons, pas callee a gauche :
   c'est le seul element de la colonne qui n'est pas du texte. */
.shotby {
  margin: 30px auto 0; width: min(66%, 260px);
  aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.shotby img {
  width: 100%; height: 100%; object-fit: cover;
  /* Le cadre ne bouge que de 54 px sur 324 : c'est tout ce que « cover »
     laisse deborder. A 6 % il est cale a gauche, ce qui amene son corps
     exactement au milieu du cadre — le trepied tient encore dans le bord.
     L'agrandissement ne deplace pas ce centre, il ne fait que resserrer
     autour : on peut le relacher sans decadrer. */
  object-position: 6% 50%;
}
/* Sur grand ecran elle n'est plus posee sur le bas du bloc : son milieu
   s'aligne sur celui de la colonne de texte, a gauche. */
@media (min-width: 861px) {
  .shotby {
    position: absolute; right: var(--gut); top: 50%; translate: 0 -50%;
    /* Entre les deux essais : 380 px mangeait le plan, 215 px la faisait
       disparaitre dedans. */
    width: clamp(190px, 21vw, 290px); margin: 0;
  }
}

/* Le bas du hero est decoupe en vague, comme les bords de section des sites
   de surf : la vague est un SVG de la couleur du fond, pose par-dessus la
   video. Pas d'image a charger, et ca s'etire a n'importe quelle largeur. */
.shero--photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  height: clamp(34px, 5vw, 70px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2070%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C34%20C160%2C66%20280%2C66%20420%2C44%20C560%2C22%20640%2C6%20780%2C14%20C920%2C22%201020%2C54%201160%2C58%20C1280%2C62%201360%2C44%201440%2C30%20L1440%2C70%20L0%2C70%20Z%27%20fill%3D%27%23596235%27%2F%3E%3C%2Fsvg%3E") bottom center / 100% 100% no-repeat;
}

/* ---------- fleurs du logo, en decor ---------- */
/* La marque du logo, semee dans les fonds. Le fichier d'origine avait quatre
   petales coupes net par le bord de l'image (et le logo complet aussi) : la
   fleur a ete regeneree par symetrie a partir d'un petale intact, puis posee
   en MASQUE — ce qui permet de la colorer depuis le CSS. */
.fleur {
  position: absolute; z-index: 0; pointer-events: none;
  background-color: var(--fleur-couleur, var(--cream));
  -webkit-mask: url("../img/fleur.png") center / contain no-repeat;
          mask: url("../img/fleur.png") center / contain no-repeat;
}
.fleur--xl { width: clamp(170px, 20vw, 300px); aspect-ratio: 1; opacity: .17; }
.fleur--l  { width: clamp(110px, 13vw, 190px); aspect-ratio: 1; opacity: .20; }
.fleur--s  { width: clamp(52px, 6vw, 84px);   aspect-ratio: 1; opacity: .26; }
/* Il ne reste que les fleurs qui ont une raison d'etre la : a cote d'un titre,
   ou accrochee a une image. Celles qui flottaient dans les coins ont ete
   retirees — elles n'ajoutaient rien et finissaient par faire du bruit.
   Les classes de couleur qui les servaient sont parties avec elles. */
/* Celle-ci n'est pas un filigrane mais une marque : bleu plein, opaque,
   posee a cote du titre des tarifs. Meme traitement que la fleur blanche du
   titre d'accueil — elle tourne et derive doucement, sur des durees
   differentes pour que les deux ne battent jamais ensemble. */
.fleur--solid {
  --fleur-couleur: var(--peri); opacity: 1;
  width: clamp(88px, 11vw, 168px);
  animation: gouffy-spin 34s linear infinite reverse,
             gouffy-float 13s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .fleur--solid { animation: none; } }
@media (max-width: 760px) { .fleur--xl, .fleur--l { display: none; } }

/* ---------- reels verticaux ---------- */
/* Les clips restent en rang, cote a cote, et defilent horizontalement — a
   toutes les largeurs. La grille qui repliait tout en deux colonnes sur
   ecran moyen cassait la bande ; ici elle ne fait que deborder et se
   parcourir, comme un fil Instagram. La rangee s'etend jusqu'aux bords de
   l'ecran : le dernier clip ne doit pas sembler s'arreter net dans la marge. */
.reels {
  display: flex; gap: clamp(12px, 1.6vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }
.reel {
  flex: 0 0 clamp(200px, 23vw, 300px); scroll-snap-align: center;
  position: relative; aspect-ratio: 9 / 16;
  border-radius: 50% 50% var(--radius) var(--radius) / 24% 24% var(--radius) var(--radius);
  overflow: hidden; background: var(--sky-deep); box-shadow: var(--shadow-md);
  border: 0; margin: 0; padding: 0; width: 100%; display: block; cursor: pointer;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.reel:hover { transform: translateY(-4px); }
.reel video {
  width: 100%; height: 100%; object-fit: cover;
  /* meme arche que la carte : une video composee a part ignore le
     « overflow: hidden » du parent */
  border-radius: inherit;
}
/* ---------- bande de videos ---------- */
/* Les reels arrivent juste sous le titre, sans intertitre : c'est l'argument
   de vente, il n'a pas besoin qu'on l'annonce. */
/* La bande de vignettes est un aplat blush : le hero y tombe par sa vague,
   et elle se referme sur la creme par une autre. C'est le rythme de la
   reference — des blocs de couleur separes par des ondulations. */
/* Le hero est compose a part (il porte un calque en « soft-light ») et son
   bord bas tombe sur une demi-hauteur de pixel : le fond creme de la page
   transparaissait dessous et dessinait un trait clair en travers de la vague.
   La bande verte remonte donc de deux pixels et le recouvre — des deux cotes
   du joint c'est le meme vert, rien ne bouge a l'oeil. */
.strip {
  position: relative; background: var(--olive-dp);
  margin-top: -2px;
  padding-block: clamp(20px, 3vw, 40px) clamp(56px, 7vw, 92px);
}
.strip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: clamp(28px, 4vw, 56px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2070%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C34%20C160%2C66%20280%2C66%20420%2C44%20C560%2C22%20640%2C6%20780%2C14%20C920%2C22%201020%2C54%201160%2C58%20C1280%2C62%201360%2C44%201440%2C30%20L1440%2C70%20L0%2C70%20Z%27%20fill%3D%27%23F6DDCC%27%2F%3E%3C%2Fsvg%3E") bottom center / 100% 100% no-repeat;
}
.strip > .wrap { position: relative; z-index: 1; }

/* ---------- tarifs ---------- */
/* Le titre porte deja son propre retour a la ligne : il ne faut pas en plus
   l'enfermer dans une largeur etroite, sinon il se casse en escalier. */
.plans__head {
  max-width: 860px; margin-bottom: clamp(26px, 3.2vw, 40px);
  position: relative; z-index: 1;   /* devant la fleur, devenue opaque */
}
/* Jaune ambre, comme le titre d'accueil. Sur le beige de la page il ne tient
   qu'a 1,5:1 — c'est un choix assume, la lettre est large et tres grasse. */
.plans__head .h2 { color: var(--amber); }
.plans__lede { margin-top: 16px; font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-700); max-width: 44ch; }

/* auto-fit plutot qu'un nombre de colonnes fige : trois cartes en grand, deux
   sur tablette, une sur telephone, sans une seule requete media. */
.plans {
  display: grid; gap: 20px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
/* Les cartes reprennent le vert fonce de la bande de videos plus haut : les
   tarifs cessent d'etre une zone claire posee au milieu d'une page claire.
   Dessus tout s'ecrit en clair — vert citron pour les noms de palier, creme
   pour le reste — et les prix gardent les couleurs qu'ils avaient. */
.plan {
  background: var(--olive-dp); border: 1px solid rgba(246,221,204,.18);
  border-radius: var(--radius-lg);
  padding: 30px 26px 30px; box-shadow: var(--shadow-md); position: relative;
  display: flex; flex-direction: column;
}
/* Le solo n'est pas « le plus vendu », c'est le haut de gamme. Pas de
   contour a lui : un vert legerement eclairci et une ombre plus profonde
   suffisent a le detacher. */
.plan--solo {
  background: linear-gradient(170deg, #667042 0%, #596235 62%);
  box-shadow: var(--shadow-lg);
}
/* Le trio est le palier vers lequel on pousse. Son prix passe au jaune et
   non au rouge : entre deux prix bleus il accroche tout autant, sans le ton
   d'avertissement que prend un chiffre rouge sur une carte.
   Autour de la carte, pas d'etiquette de promotion : un filet corail et un
   halo de la meme teinte — une ombre portee, mais en couleur. */
/* Solo et Duo affichent leur prix a l'ambre ; le trio est le seul en bleu,
   entoure de son filet jaune. C'est le palier vers lequel on pousse : une
   couleur froide au milieu de deux chaudes se voit plus qu'une nuance de
   plus dans la meme famille. Le prix de la Surf Week est bleu lui aussi —
   elle ne fait pas partie des trois paliers. */
.plan .plan__price { color: var(--amber); }
.plan--trio .plan__price { color: var(--price); }
/* Le trio garde le vert des deux autres cartes : un simple filet jaune —
   l'ambre du dernier bloc — et le halo de la meme teinte en dessous. Ont ete
   essayes ici, et ecartes : le damier en cadre (trop charge sur une carte
   deja pleine de texte) et le fond jaune (le bleu du prix y tombait a
   1,15:1, le chiffre disparaissait). */
.plan--trio {
  box-shadow: 0 0 0 2px var(--amber), 0 16px 36px -12px rgba(251,167,75,.60);
}
/* La pastille du pack sejour : jaune et texte brun, comme les boutons de la
   page — elle annonce une offre, pas une alerte. */
.plan__flag {
  position: absolute; top: -16px; left: 26px;
  background: var(--amber); color: var(--brown); border-radius: 999px;
  padding: 8px 18px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: lowercase;
}
/* Solo, Duo, Trio, Surf Week : le vert clair de l'illustration, pas le vert
   fonce des titres de section — les noms de palier se lisent comme des
   etiquettes, pas comme des titres. */
/* Tout le texte des cartes est vert clair, le prix excepte : le citron pur
   pour le nom du palier, sa version plus pale pour le reste — le citron ne
   tient qu'a 3,5:1 en petit corps, le pale monte a 4,9. */
.plan h3 { font-family: var(--display); font-size: 26px; color: var(--lime); }
.plan__who { font-size: 13.5px; color: #E4E0A0; margin-top: 5px; }
.plan__price {
  font-family: var(--display); font-size: clamp(42px, 4.4vw, 52px); line-height: 1;
  color: var(--price); margin-top: 18px;
}
.plan__unit { font-family: var(--text); font-size: 15px; font-weight: 500; color: #E4E0A0; }
.plan__total { font-size: 14.5px; color: #E4E0A0; margin-top: 8px; }

/* L'economie est dite en clair, mais posee dans une pastille discrete : on
   vend une experience, pas une promotion. Sur le vert, la pastille n'est
   plus un aplat creme — elle s'eclaircirait trop — mais un voile. */
.save {
  align-self: flex-start; margin-top: 14px;
  background: rgba(228,224,160,.13); border-radius: 999px; padding: 6px 13px;
  font-size: 13px; color: #E4E0A0;
}
.save b { color: var(--price); font-weight: 700; }

.plans__note {
  margin-top: 22px; font-size: 14px; line-height: 1.7;
  color: var(--ink-500); max-width: 76ch;
}
.plans__note b { color: var(--soft-ink); font-weight: 600; }

/* ---------- surf week ---------- */
/* Meme famille visuelle que la carte Solo — fond creme, contour orange — pour
   dire « haut de gamme » et non « soldes ». Couchee plutot que dressee : elle
   se distingue des trois paliers sans changer de langage. */
/* Meme vert que les trois paliers : elle appartient a la meme famille, elle
   ne peut pas rester le seul bloc creme au milieu d'eux. Le contour ambre,
   lui, reste : c'est ce qui dit « offre » sans etiquette de solde. */
.week {
  /* L'ecart doit loger la pastille, qui deborde de 16 px au-dessus du bord :
     a 16 px de marge elle venait toucher la carte du dessus. */
  position: relative; margin-top: 46px;
  background: linear-gradient(160deg, #667042 0%, #596235 58%);
  border: 2px solid var(--apricot); border-radius: var(--radius-lg);
  padding: clamp(36px, 3.8vw, 50px) clamp(28px, 3.2vw, 40px) clamp(30px, 3.4vw, 42px);
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(22px, 3.4vw, 52px); align-items: center;
}
.week .plan__flag { left: clamp(28px, 3.2vw, 40px); }
.week h3 { font-family: var(--display); font-size: clamp(28px, 3.2vw, 40px); color: var(--lime); }
.week__sub {
  margin-top: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #E4E0A0;
}
.week__lede { margin-top: 14px; font-size: clamp(16px, 1.5vw, 18px); color: #E4E0A0; max-width: 40ch; }
.week__note { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: #E4E0A0; max-width: 46ch; }

/* La colonne de droite : le prix barre, le prix reel, l'economie, le bouton.
   Alignee a droite sur grand ecran, elle redevient un bloc plein sur telephone. */
.week__offer {
  display: grid; justify-items: end; text-align: right;
  gap: 4px; min-width: 232px;
}
.was { font-size: 14px; color: #E4E0A0; }
.was s { text-decoration-thickness: 2px; text-decoration-color: var(--apricot); }
.week__offer .plan__price { margin-top: 2px; font-size: clamp(50px, 5.4vw, 64px); }
.save--week { margin-top: 6px; }
/* Le bouton de la Surf Week est ambre et non bleu : sur sa carte verte, il
   repond aux trois prix et ferme la section sur la meme couleur chaude.
   Texte brun — du blanc sur cet ambre ne donnerait que 1,9:1. */
.week__cta {
  margin-top: 18px; width: 100%; justify-content: center;
  background: var(--amber); color: var(--brown);
}
.week__cta:hover { background: #F1941F; color: var(--brown); }
/* ---------- la formule sur mesure ---------- */
/* En orange, titre rouge : c'est le seul bloc chaud de la section, et le seul
   sans chiffre — son prix se discute. La couleur le detache des cartes vertes
   au-dessus sans en faire une promotion de plus.
   Sur cet ambre clair, le texte passe au brun : le vert clair des cartes y
   tomberait a 1,3:1. Meme regle que le bloc de contact, sur le meme ambre. */
.pack {
  margin-top: 30px; background: var(--amber);
  border: 1px solid rgba(90,64,40,.18); border-radius: var(--radius-lg);
  padding: clamp(34px, 3.6vw, 46px) clamp(26px, 2.9vw, 38px) clamp(28px, 3.1vw, 40px);
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(20px, 3vw, 40px); align-items: center;
}
.pack h3 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 32px); color: var(--coral-txt); }
.pack p {
  margin-top: 10px; font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6; color: #fff; max-width: 56ch;
}
/* La pente du tarif, en gras : c'est le seul chiffre que cette carte donne,
   meme sans chiffre. Blanc comme le paragraphe, pas rouge — le clin d'oeil
   juste en dessous garde le rouge pour lui. */
.pack .pack__more { margin-top: 12px; font-weight: 700; }
/* Selecteur double : « .pack p » plus haut est plus specifique et imposait
   son brun a cette ligne. */
.pack .pack__wink {
  margin-top: 8px; font-size: 14px; font-weight: 600;
  color: var(--coral-txt);
}
.pack__cta { white-space: nowrap; }
@media (max-width: 760px) {
  .pack { grid-template-columns: 1fr; }
  .pack__cta { width: 100%; justify-content: center; }
}

.extra { margin-top: 20px; font-size: 14px; color: var(--ink-500); }
.extra + .extra { margin-top: 8px; }
.extra b { color: var(--soft-ink); font-weight: 600; }
.extra a { color: var(--soft-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- sessions ouvertes ---------- */
/* Le calendrier est habille comme le bloc « Dis-moi le spot et le jour » :
   fond ambre, texte brun, accents rouges. Les deux font la meme chose — ils
   ouvrent une conversation — et se repondent d'un bout a l'autre de la page.
   Sur cet ambre clair, tout le texte passe au brun : le vert citron des
   versions vertes y tombait a 1,3:1. */
.cal {
  display: grid; gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  align-items: start;
}
.cal__panel, .slot__detail {
  background: var(--amber); border: 1px solid rgba(90,64,40,.18);
  border-radius: var(--radius-lg); padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--shadow-md);
}

/* la barre du mois */
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal__month {
  font-family: var(--display); font-size: clamp(19px, 2vw, 24px);
  color: var(--coral-txt); text-transform: capitalize;
}
.cal__nav {
  border: 1px solid rgba(90,64,40,.30); background: transparent;
  color: var(--brown); width: 32px; height: 32px; border-radius: 50%;
  font-size: 19px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .2s ease;
}
.cal__nav:hover:not(:disabled) { background: rgba(90,64,40,.12); }
.cal__nav:disabled { opacity: .28; cursor: default; }

.cal__heads, .cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal__heads {
  margin-top: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(90,64,40,.62); text-align: center;
}
.cal__grid { margin-top: 6px; }

/* Une case par jour. Les jours sans session sont la pour donner le repere du
   mois, mais rien de plus : ni bouton, ni contraste. */
.cal__day {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 0; background: transparent; padding: 0;
  font: 600 14px/1 var(--text); color: rgba(90,64,40,.55);
  border-radius: 50%;
}
.cal__day.is-out { opacity: .22; }
.cal__day.is-past { opacity: .4; text-decoration: line-through; }
/* Tous les jours a venir sont reservables : les peindre tous ne dirait plus
   rien. Ils restent sobres, et c'est le jour CHOISI qui s'allume — en rouge
   plein, la seule teinte qui claque sur l'ambre. */
.cal__day.is-open {
  color: var(--brown); cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.cal__day.is-open:hover { background: rgba(90,64,40,.14); }
.cal__day.is-pick, .cal__day.is-pick:hover {
  background: var(--coral-txt); color: #fff; font-weight: 700;
}

/* le detail du jour choisi */
.slot__prompt { font-size: 15px; line-height: 1.6; color: var(--brown); }
.slot__cue {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(90,64,40,.72);
}
.slot__drop { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--brown); }
.slot__day {
  font-family: var(--display); font-size: clamp(20px, 2.1vw, 25px);
  color: var(--coral-txt); text-transform: capitalize; line-height: 1.15;
}
.slot__time { font-size: 14px; color: var(--brown); margin-top: 4px; }
.slot__cta { margin-top: 16px; width: 100%; justify-content: center; }

@media (max-width: 860px) {
  .cal { grid-template-columns: 1fr; }
  .cal__day { font-size: 15px; }
}

/* ---------- bandes de couleur ---------- */
/* Les sections ne sont plus toutes sur le meme fond : elles alternent creme
   et blush, separees par des vagues. C'est ce qui donne le rythme de la
   reference. La vague est un SVG plein, pose en haut ou en bas de la bande. */
.band-soft {
  position: relative; background: var(--olive-dp);
  margin-block: clamp(40px, 6vw, 80px);
}
.band-soft::before, .band-soft::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: clamp(28px, 4vw, 56px); pointer-events: none;
}
.band-soft::before {
  top: -1px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2070%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C34%20C160%2C66%20280%2C66%20420%2C44%20C560%2C22%20640%2C6%20780%2C14%20C920%2C22%201020%2C54%201160%2C58%20C1280%2C62%201360%2C44%201440%2C30%20L1440%2C70%20L0%2C70%20Z%27%20fill%3D%27%23F6DDCC%27%20transform%3D%27scale%281%2C-1%29%20translate%280%2C-70%29%27%2F%3E%3C%2Fsvg%3E") top center / 100% 100% no-repeat;
}
.band-soft::after {
  bottom: -1px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%2070%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C34%20C160%2C66%20280%2C66%20420%2C44%20C560%2C22%20640%2C6%20780%2C14%20C920%2C22%201020%2C54%201160%2C58%20C1280%2C62%201360%2C44%201440%2C30%20L1440%2C70%20L0%2C70%20Z%27%20fill%3D%27%23F6DDCC%27%2F%3E%3C%2Fsvg%3E") bottom center / 100% 100% no-repeat;
}
.band-soft > .wrap { position: relative; z-index: 1; }

/* Damier, en filet : il ferme la page juste avant le pied. */
/* Celui des tarifs descend : il se decolle de la vague verte au-dessus. La
   marge negative sur la section qui suit evite qu'il pousse le titre. */
.checker--low { margin-top: clamp(20px, 3vw, 38px); }
.checker--low + .section { margin-top: clamp(-38px, -3vw, -20px); }

/* Le damier revient plusieurs fois dans la page : c'est le motif qui ramene
   le rouge. Un seul carreau sur deux est peint — le rouge ; l'autre est laisse
   vide, donc c'est le fond de la page qui passe au travers. */
/* Deux rangees, chacune un seul degrade qui court sur toute la largeur.
   C'etait une image SVG pavee : mise a l'echelle, chaque tuile s'arrondissait
   a une fraction de pixel et laissait un liseré clair entre les carreaux. Ici
   il n'y a plus de tuiles, donc plus de joints — et les arrets sont nets
   (deux bornes identiques), ce qui donne des bords francs. */
.checker {
  height: 20px;
  display: flex; flex-direction: column;
}
.checker::before, .checker::after {
  content: ""; display: block; flex: 1 1 0;
  background-image: repeating-linear-gradient(to right,
    var(--coral) 0 10px, rgba(0,0,0,0) 10px 20px);
}
.checker::after { background-position-x: 10px; }

/* Sur la bande verte, tout passe en creme — du brun sur l'olive tombe a
   1,8:1. Le bouton garde son corail, qui ressort tres bien sur le vert. */
.band-soft .h2, .band-soft h2 { color: var(--lime) !important; }
/* Vert clair sur le vert fonce. Le corps de texte prend une version plus
   pale que le titre : le citron pur n'y tient qu'a 3,4:1. */
.band-soft p { color: #E4E0A0 !important; }
/* Le « + 15 € » du drone passe au bleu : c'est un prix, il prend la couleur
   des prix, et le bleu est la seule note froide sur cette bande verte. */
.band-soft .drone__price { color: var(--price) !important; }

/* ---------- drone ---------- */
/* Deux colonnes, rien d'autre : la video a gauche, une phrase et un bouton a
   droite. Pas de carte, pas de cadre — le bloc doit respirer. */
.drone {
  display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.drone { position: relative; }
.drone__film {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: var(--sky-deep); display: block;
}
/* La marque du logo, en orange, dans le coin haut droit de la video.
   Le decalage de 45 % de sa propre taille sur chaque axe laisse exactement
   trois dixiemes de sa surface derriere le cadre (0,55 x 0,55 = 0,30) : on en
   voit 70 %. Elle tourne lentement — la rotation passe par la propriete
   « rotate » et non par « transform », qui porte deja le decalage. */
.drone__vid { position: relative; }
.drone__mark {
  --fleur-couleur: var(--amber);
  opacity: 1; z-index: 0;
  top: 0; right: 0; left: auto;
  width: clamp(110px, 14vw, 190px); aspect-ratio: 1;
  transform: translate(45%, -45%);
  animation: gouffy-spin 26s linear infinite;
}
@keyframes gouffy-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .drone__mark { animation: none; } }
/* Deux classes, pas une : « .drone__say p » plus bas est plus specifique et
   ecrasait la taille du chiffre. */
/* Ce n'est plus un chiffre mais une phrase : elle demande moins de corps
   qu'un prix, sinon elle occupe toute la colonne. */
.drone__say .drone__price {
  font-family: var(--display); font-size: clamp(32px, 3.4vw, 44px); line-height: 1.05;
  color: var(--price); margin-top: 14px;
}
/* La limite de vol, juste sous le prix : c'est une contrainte, elle se lit
   avec le chiffre et non perdue dans le paragraphe. */
/* Plus de capitales ici : « JUSQU'A 30 MIN DE VOL » sonnait comme une clause
   de contrat. En bas de casse, c'est une precision, pas une restriction. */
.drone__say .drone__cap {
  margin-top: 8px; font-size: 15px; font-weight: 600;
  color: var(--lime);
}
.drone__say .drone__ps { font-size: 14px; color: rgba(228,224,160,.82); margin-top: 12px; }
.drone__say p { margin-top: 16px; font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-700); max-width: 42ch; }
.drone__say .btn { margin-top: 26px; }

/* ---------- bande WhatsApp + QR ---------- */
.waband {
  position: relative;
  background: var(--amber); color: var(--brown); border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 48px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
/* Tampon rond, comme les sceaux des marques de surf : le texte court sur un
   cercle en SVG, la marque du logo au centre. Purement decoratif, donc
   aria-hidden — un lecteur d'ecran n'a rien a en tirer. */
/* Le tampon est bleu : anneaux et texte circulaire prennent tous les deux la
   couleur du bloc via currentColor. C'est le bleu assombri de la palette —
   le bleu pastel, pose sur l'ambre, ne se verrait pas (1,2:1). Seule la
   marque au centre garde ses couleurs : c'est une image. */
.seal {
  position: absolute; top: -34px; left: clamp(24px, 4vw, 46px); z-index: 2;
  width: clamp(84px, 9vw, 112px); aspect-ratio: 1; color: var(--peri-dp);
  display: grid; place-items: center;
}
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal__txt {
  font-family: var(--text); font-size: 9.4px; font-weight: 700;
  letter-spacing: .13em; fill: currentColor;
}
.seal img { width: 38%; height: auto; position: relative; }
@media (max-width: 620px) { .seal { display: none; } }

/* Retour au corail. C'est celui de la palette prevu pour porter du texte et
   non le corail de remplissage : ce dernier, pose sur l'ambre, tombe a 1,3:1
   et disparait — celui-ci tient a 2,4:1. */
.waband h2 { color: var(--coral-txt) !important; }
.waband p { color: var(--brown); margin-top: 14px; max-width: 46ch; }
.waband .btn { margin-top: 26px; }
/* Les langues parlees, dites juste au-dessus de l'adresse : la page se lit
   en cinq langues, la conversation n'en tient que trois. */
.waband__langs { font-size: 14.5px; margin-top: 18px; }
.waband__langs b { font-weight: 700; }
.waband__mail { font-size: 14.5px; margin-top: 8px; }
.waband__mail a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.qr {
  background: #fff; border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow-md); text-align: center; width: 196px;
}
.qr img { width: 164px; height: 164px; margin-inline: auto; }
.qr span {
  display: block; margin-top: 10px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500);
}

/* ---------- footer ---------- */
/* Pied de page clair : l'aplat noir d'origine faisait tache sous une page
   entierement pastel. Le logo reprend donc sa couleur, sans inversion. */
.footer--surf { background: var(--olive-dp); color: rgba(246,221,204,.92); }
.footer--surf a:hover { color: #fff; }
.footer--surf .footer__logo img { filter: brightness(0) invert(1) opacity(.92); }
/* Deux signatures dans le pied de page, deux traitements : le compte
   Instagram en bleu — c'est un lien, il doit se voir comme tel — et le nom
   du studio en blanc, un cran au-dessus du creme qui l'entoure. */
.iglink {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--peri);
}
.iglink svg { width: 19px; height: 19px; }
.iglink:hover { color: #A6C4F5; }
/* La ligne de signature entiere passe au blanc, et non le seul nom du
   studio : couper la phrase en deux tons la faisait lire en deux morceaux. */
.footer--surf .footer__sig { color: #fff; }
.ferox { color: #fff; font-weight: 600; }
.footer--surf .footer__in {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  justify-content: space-between; align-items: center;
}
.footer--surf .footer__links { display: flex; flex-wrap: wrap; gap: 22px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .waband { grid-template-columns: 1fr; justify-items: start; }
  .lockup__rule, .lockup__svc { display: none; }
}
/* Sur un ecran etroit, la photo n'est plus rognee en hauteur mais en largeur :
   le cadrage de bureau montrerait le ciel clair, et le texte blanc s'y
   perdrait. On glisse donc vers la gauche, sur la falaise sombre. */
@media (max-width: 860px) {
  .shero__bg { object-position: 50% 50%; }
  /* La fleur est dimensionnee en « em », donc elle retrecit avec le titre.
     Sur telephone le titre est deja petit : elle finissait en pastille.
     On la remonte a 0,8 em pour qu'elle pese autant qu'en grand ecran. */
  .h1__marks { --s: 1.45em; }
  /* Sur telephone le second bouton reste un contour, mais dans le bleu du
     bouton WhatsApp pose a cote : les deux se lisent alors comme une paire,
     l'un plein, l'autre creux. Filet de 2 px — a 1 px il se perdait sur le
     sable clair du bas du plan. */
  .shero--photo .btn--ghost {
    background: transparent; border-color: var(--btn);
    border-width: 2px; color: var(--btn);
  }
  .shero--photo .btn--ghost:hover { background: rgba(132,174,240,.14); }
  .shero--photo .lede { max-width: none; }
}

@media (max-width: 640px) {
  /* Barre etroite : le mot-marque ne doit jamais etre ecrase par le bouton
     WhatsApp. On le retrecit, on lui interdit de retrecir davantage, et le
     bouton tombe a sa seule icone — le mot « WhatsApp » n'apprend rien que
     le logo vert ne dise deja. */
  .lockup img { height: 24px; }
  .lockup { flex: 0 0 auto; }
  .header .btn--wa { padding: 0; width: 42px; height: 42px; border-radius: 50%; justify-content: center; }
  .header .btn--wa .btn__ico > span { display: none; }
  .header .btn--wa svg { width: 21px; height: 21px; }

  .header__in { gap: 10px; }
}

@media (max-width: 760px) {
  .drone { grid-template-columns: 1fr; }
  .drone__film { max-width: 300px; }

  /* Sur telephone la colonne de droite passe sous le texte et devient un
     encart a part entiere : prix barre, prix, economie, bouton pleine largeur. */
  .week { grid-template-columns: 1fr; }
  .week__offer {
    justify-items: start; text-align: left; min-width: 0;
    background: rgba(246,221,204,.10); border: 1px solid rgba(246,221,204,.20);
    border-radius: var(--radius);
    padding: 20px 20px 22px;
  }
  .week__offer .plan__price { font-size: 52px; }

  }

@media (max-width: 720px) {
  /* Sur telephone les clips s'elargissent : deux a l'ecran plutot que trois
     minuscules, et le suivant qui depasse dit qu'il y en a d'autres. */
  .reel { flex-basis: 63%; }
  .shero__cta .btn { width: 100%; justify-content: center; }
  .form__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reel, .reel:hover { transition: none; transform: none; }
}

/* La feuille du site velo ajoute une barre d'achat collante sous 900px et
   reserve 84px en bas du body pour elle. Cette page n'a pas de barre : on
   rend ces 84px au contenu. */
@media (max-width: 900px) { body { padding-bottom: 0; } }