/*
Theme Name: Sirena Blu 21
Theme URI: https://sirenablu21.it
Description: Theme enfant de Hello Elementor pour l'Hotel Sirena Blu 21. Charte issue du logo.
Author: Quentin Pollet
Template: hello-elementor
Version: 2.0
Text Domain: sirena-blu
*/

/* ===========================================================================
   SIRENA BLU 21 — charte v2 « Riviera »
   Luxe editorial : Cormorant Garamond pour les titres, Jost pour le texte,
   cremes chaudes, marine profond, or. Cadres a double bord, boutons-pilules,
   vagues entre les sections marine, apparitions lentes et fluides.

   Ordre du fichier :
     1. jetons          6. images           11. bandeau et heros
     2. base, texte     7. cartes           12. en-tete
     3. surtitre, filet 8. services, listes 13. pied de page
     4. boutons         9. composants       14. formulaire
     5. sections       10. FAQ              15. mouvement
   Les « mecaniques Elementor » (poids des selecteurs, variables) sont commentees
   la ou elles vivent : chacune a coute une mesure.
   =========================================================================== */

/* ------------------------------------------------------------ 1. jetons */
:root{
  --marine:#064266;        /* 10,6:1 sur blanc */
  --marine-fonce:#04304B;
  --nuit:#021E30;          /* pied de page */
  --azur:#066696;          /* 6,3:1 sur blanc */
  --turchese:#2A9AC4;      /* decor seulement */
  --oro:#8F6036;           /* 5,6:1 sur blanc : filets, surtitres */
  --oro-vif:#B8894F;       /* decor seulement (ornements, degrades) */
  --oro-clair:#EBC391;     /* 8,3:1 sur marine */
  --sable:#F6F1E9;
  --creme:#FDFBF8;
  --perle:#FFFFFF;
  --encre:#1F2B33;
  --encre-doux:#4A5A66;
  --brume:#D6E3EC;         /* texte courant sur marine */

  --f-titre:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-texte:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-xs:8px;
  --r-s:14px;
  --r-m:22px;
  --r-l:30px;
  --r-pill:999px;

  /* ombres diffuses, teintees de marine : jamais de noir */
  --ombre-douce:0 1px 1px rgba(4,48,75,.04),0 14px 34px -16px rgba(4,48,75,.20);
  --ombre-profonde:0 2px 2px rgba(4,48,75,.05),0 34px 70px -30px rgba(4,48,75,.42);
  --anneau:0 0 0 1px rgba(4,48,75,.07);

  --ease:cubic-bezier(.16,1,.3,1);          /* sortie longue, sans rebond */
  --ease-ressort:cubic-bezier(.32,.72,0,1); /* masse et ressort */

  --marge-page:clamp(24px,5vw,72px);
  --bloc:clamp(84px,10vw,168px);
  --largeur:1320px;
  --entete:96px;

  /* Elementor donne 10 px de marge interieure a CHAQUE conteneur sans reglage : trois
     niveaux imbriques mangeaient 60 px en mobile (290 px de texte sur un ecran de 390). */
  --container-default-padding-top:0px;--container-default-padding-right:0px;
  --container-default-padding-bottom:0px;--container-default-padding-left:0px;
}
@media(max-width:1099px){:root{--entete:76px}}

/* ------------------------------------------------------ 2. base, texte */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete) + 16px)}
body{
  font-family:var(--f-texte);font-size:18px;font-weight:400;line-height:1.8;
  color:var(--encre);background:var(--creme);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-kerning:normal;
}
@media(max-width:600px){body{font-size:17px}}

h1,h2,h3,h4,.sb-titre{
  font-family:var(--f-titre);font-weight:500;color:var(--marine);
  line-height:1.06;letter-spacing:-.012em;margin:0 0 .45em;text-wrap:balance;
}
h1{font-size:clamp(2.9rem,1.7rem + 3.7vw,5.6rem)}
h2{font-size:clamp(2.35rem,1.5rem + 2.5vw,4rem)}
/* sous 360 px, un titre garde ses liaisons (« di amministrazione ») sans deborder */
@media(max-width:359px){h2{font-size:2.12rem}}
h3{font-size:clamp(1.55rem,1.25rem + .9vw,2.05rem);font-weight:600;line-height:1.12}
h4{font-size:clamp(1.2rem,1.05rem + .45vw,1.4rem);font-weight:600}
h1 em,h2 em,h3 em{font-style:italic;color:var(--oro)}
.sb-marine h1 em,.sb-marine h2 em{color:var(--oro-clair)}

p{margin:0 0 1.2em}
strong,b{font-weight:500;color:inherit}
a{color:var(--azur);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--marine)}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--oro-clair);color:var(--marine-fonce)}
:focus-visible{outline:2px solid var(--azur);outline-offset:4px;border-radius:4px}

/* Texte justifie, demande de Quentin. La cesure italienne (html lang="it-IT")
   evite les « rivieres » ; la derniere ligne reste naturelle. */
.elementor-widget-text-editor p,
.sb-carte__texte,.sb-fiche p,.sb-trio__item p,.sb-pilier p,.sb-formule__item p,
.sb-etapes p,.sb-encart p,.sb-coordonnees p,.sb-pied__marque p,
.sb-faq .elementor-tab-content p,.sb-liste li{
  text-align:justify;text-align-last:left;
  -webkit-hyphens:auto;hyphens:auto;
}
/* le dernier mot d'un paragraphe ne se coupe pas (francais, anglais : functions.php),
   ni par la cesure ni a son trait d'union (« rendez- / vous. »). display:contents : l'element
   ne cree aucune boite, sinon il devenait un element flex a part dans les surtitres (un
   ecart avant le dernier mot, et « Informations importantes » debordait de 26 px) ; son
   texte herite quand meme du nowrap. */
sb-fin{display:contents;white-space:nowrap}
/* cesure : le reglage de Chrome suit l'usage italien (2 lettres de part et d'autre).
   Un reglage plus strict (7 3 3) laissait des blancs de 17 px en mobile, mesure. */
/* une fiche d'identite ou une adresse ne se justifie pas : le numero de TVA creusait 26 px */
.sb-identite p,.sb-coordonnees p{text-align:start}
/* les puces sont des enumerations, pas du texte courant : justifiees, elles se
   coupaient en « richie- / sta » ou s'etiraient sur deux lignes */
.sb-liste li{text-align:start;hyphens:none}
/* L'intro centree sous un titre centre (2 ou 3 lignes) se compose comme lui : centree et
   equilibree. Justifiee avec la derniere ligne centree, elle se trouait (21 px mesures)
   ou finissait sur un mot seul (« misura. »). */
/* (0,2,1) : un simple .sb-intro-centre perdait face a .elementor-widget-text-editor p */
.elementor-widget-text-editor p.sb-intro-centre,.sb-centre .elementor-widget-text-editor p{text-align:center;text-align-last:center;text-wrap:balance}
/* 3 lignes et plus (compte fait par site.js) : justifiee, derniere ligne centree */
.elementor-widget-text-editor p.sb-centre-justifie{text-align:justify;text-align-last:center;text-wrap:wrap}
/* Colonne trop etroite pour justifier (moins de 32 signes par ligne, mesure par
   site.js) : la justification y creusait des trous de 20 a 41 px. Les coupures de
   ligne restent les memes, seul l'espacement change : rien ne saute a l'affichage. */
.sb-drapeau{text-align:start!important;text-align-last:auto!important}

/* papier : un grain tres fin, fixe, qui n'intercepte rien */
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------- 3. surtitre, filet */
.sb-surtitre{
  display:flex;width:fit-content;max-width:100%;align-items:flex-start;gap:.9rem;
  font-family:var(--f-texte);font-size:.74rem;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--oro);margin:0 0 1.1rem;line-height:1.5;
}
/* filets cales sur la PREMIERE ligne (milieu d'une ligne de 1,5em) : centres, ils
   flottaient entre deux lignes quand le surtitre passait a la ligne en mobile */
.sb-surtitre::before{content:"";flex:0 0 34px;height:1px;margin-top:calc(.75em - .5px);background:currentColor;opacity:.7}
@media(max-width:600px){.sb-surtitre__sep{display:none}.sb-surtitre__plus{display:block}}
.sb-surtitre--clair{color:var(--oro-clair)}
.sb-surtitre--centre,.sb-centre .sb-surtitre,.sb-cta .sb-surtitre{justify-content:center;text-align:center;margin-inline:auto}
.sb-surtitre--centre::after,.sb-centre .sb-surtitre::after,.sb-cta .sb-surtitre::after{
  content:"";flex:0 0 34px;height:1px;margin-top:calc(.75em - .5px);background:currentColor;opacity:.7
}

/* le filet devient un ornement : un trait, un losange d'or, un trait */
.sb-filet::after{
  content:"";display:block;width:96px;height:10px;margin:1.5rem 0 1.9rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 10'%3E%3Cpath d='M0 5h38M58 5h38' stroke='%238F6036' stroke-width='1'/%3E%3Cpath d='M48 1.2l3.8 3.8L48 8.8 44.2 5z' fill='%23B8894F'/%3E%3C/svg%3E") center/96px 10px no-repeat;
}
.sb-filet--centre::after,.sb-centre .sb-filet::after,.sb-centre.sb-filet::after{margin-inline:auto}
.sb-marine .sb-filet::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 10'%3E%3Cpath d='M0 5h38M58 5h38' stroke='%23EBC391' stroke-width='1'/%3E%3Cpath d='M48 1.2l3.8 3.8L48 8.8 44.2 5z' fill='%23EBC391'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- 4. boutons
   Pilule, et une fleche logee dans son propre cercle : le « bouton dans le
   bouton ». Le cercle est un pseudo-element, aucun balisage a changer. */
.sb-btn,.elementor-button.sb-btn{
  --btn-fond:var(--marine);--btn-texte:#fff;--btn-bord:var(--marine);--btn-cercle:rgba(255,255,255,.14);
  --fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h9M8.5 4l4 4-4 4'/%3E%3C/svg%3E");
  display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--f-texte);font-size:.8rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;line-height:1;white-space:nowrap;
  padding:.5em .5em .5em 1.7em;min-height:52px;border-radius:var(--r-pill);
  border:1px solid var(--btn-bord);background:var(--btn-fond);color:var(--btn-texte);
  cursor:pointer;
  transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),
             transform .5s var(--ease-ressort),box-shadow .5s var(--ease);
}
.sb-btn::after{
  content:"";flex:0 0 38px;width:38px;height:38px;border-radius:50%;
  background:var(--btn-cercle) var(--fleche) center/15px no-repeat;
  transition:transform .6s var(--ease-ressort),background-color .5s var(--ease);
}
.sb-btn:hover{transform:translateY(-2px);box-shadow:var(--ombre-douce);color:var(--btn-texte)}
.sb-btn:hover::after{transform:translateX(3px) scale(1.06)}
.sb-btn:active{transform:translateY(0) scale(.98)}

.sb-btn--or{--btn-fond:var(--oro);--btn-bord:var(--oro)}
.sb-btn--or:hover{--btn-fond:#7A5029;--btn-bord:#7A5029}
.sb-btn:not(.sb-btn--or):not(.sb-btn--ligne):not(.sb-btn--ligne-clair):hover{--btn-fond:var(--marine-fonce);--btn-bord:var(--marine-fonce)}
.sb-btn--ligne{
  --btn-fond:transparent;--btn-texte:var(--marine);--btn-bord:rgba(6,66,102,.35);--btn-cercle:rgba(6,66,102,.08);
  --fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23064266' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h9M8.5 4l4 4-4 4'/%3E%3C/svg%3E");
}
.sb-btn--ligne:hover{--btn-fond:var(--marine);--btn-texte:#fff;--btn-bord:var(--marine);--btn-cercle:rgba(255,255,255,.14);
  --fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h9M8.5 4l4 4-4 4'/%3E%3C/svg%3E")}
.sb-btn--ligne-clair{--btn-fond:transparent;--btn-texte:#fff;--btn-bord:rgba(255,255,255,.55);--btn-cercle:rgba(255,255,255,.12)}
.sb-btn--ligne-clair:hover{--btn-fond:#fff;--btn-texte:var(--marine);--btn-bord:#fff;--btn-cercle:rgba(6,66,102,.08);
  --fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23064266' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h9M8.5 4l4 4-4 4'/%3E%3C/svg%3E")}
.sb-btn--compact{min-height:44px;font-size:.72rem;letter-spacing:.18em;padding:.4em .4em .4em 1.35em;gap:.7rem}
.sb-btn--compact::after{flex-basis:32px;width:32px;height:32px;background-size:13px}

/* Hello souligne les liens de .page-content ; `.sb-marine a` repeint tous les
   liens en or clair : un bouton garde SA couleur, partout (mesure : 3,3:1). */
.page-content a.sb-btn,a.sb-btn{text-decoration:none}
.sb-marine a.sb-btn{color:var(--btn-texte)}

.sb-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin:2.4rem 0 0}
.sb-actions--centre{justify-content:center;text-align:center}
.sb-hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.sb-hero__actions--centre{justify-content:center}

/* --------------------------------------------------------- 5. sections */
.sb-sable{background:var(--sable)}
.sb-marine{
  background:
    radial-gradient(120% 80% at 85% 0%,rgba(42,154,196,.16),transparent 60%),
    radial-gradient(90% 70% at 0% 100%,rgba(235,195,145,.08),transparent 55%),
    var(--marine);
  color:#EAF1F6;
}
.sb-marine h1,.sb-marine h2,.sb-marine h3,.sb-marine h4{color:#fff}
.sb-marine a{color:var(--oro-clair)}
.sb-centre{text-align:center}
.sb-centre .elementor-heading-title{text-align:center}

/* Les sections marine entrent par une VAGUE, qui rappelle celles du logo.
   La section remonte de la hauteur de la vague sur la precedente : la partie
   transparente du masque laisse voir la section d'avant, quelle que soit sa couleur. */
.e-con.sb-marine{position:relative;z-index:1}
.e-con.sb-marine:not(:first-child){
  --vague:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V38C160 8 320 0 480 14s320 44 480 44 320-30 480-44v50z'/%3E%3C/svg%3E");
  --h-vague:28px; /* mobile : la meme courbe, ecrasee a 390 px de large elle serait abrupte a 64 */
  margin-top:calc(-1 * var(--h-vague));border-top:var(--h-vague) solid transparent;background-origin:border-box;
  -webkit-mask:var(--vague) top/100% var(--h-vague) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--h-vague) - 1px)/100% calc(100% - var(--h-vague) + 1px) no-repeat;
  mask:var(--vague) top/100% var(--h-vague) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--h-vague) - 1px)/100% calc(100% - var(--h-vague) + 1px) no-repeat;
}
@media(min-width:700px){.e-con.sb-marine:not(:first-child){--h-vague:64px}}

/* ------------------------------------------- mecaniques Elementor (largeurs)
   La largeur « boxed » s'ajoute au padding du parent : 1320 + 2 x 72 deborde un
   ecran de 1440. On borne a la place disponible, SANS ecraser la largeur propre
   des conteneurs plus etroits (860, 900), qu'Elementor pose dans --content-width. */
.e-con>.e-con-inner{max-width:min(var(--content-width,var(--largeur)),100%)}
.elementor-section.elementor-section-boxed>.elementor-container{max-width:var(--largeur)}

/* Deux colonnes. Elementor ecrit `width: var(--width)` a un poids qu'on ne bat
   pas : on pose la VARIABLE. Un conteneur « full » n'a pas de .e-con-inner. */
.sb-duo{--flex-wrap:wrap}
.sb-duo__a,.sb-duo__b{--width:100%}
@media(min-width:1000px){
  .sb-duo--54 .sb-duo__a{--width:54%} .sb-duo--54 .sb-duo__b{--width:calc(46% - 64px)}
  .sb-duo--52 .sb-duo__a{--width:52%} .sb-duo--52 .sb-duo__b{--width:calc(48% - 64px)}
  .sb-duo--50 .sb-duo__a{--width:50%} .sb-duo--50 .sb-duo__b{--width:calc(50% - 64px)}
  .sb-duo--48 .sb-duo__a{--width:48%} .sb-duo--48 .sb-duo__b{--width:calc(52% - 64px)}
  .sb-duo--56 .sb-duo__a{--width:56%} .sb-duo--56 .sb-duo__b{--width:calc(44% - 64px)}
  .sb-duo--44 .sb-duo__a{--width:44%} .sb-duo--44 .sb-duo__b{--width:calc(56% - 64px)}
}
/* En mobile, le duo « inverse » (image a gauche) remet le texte en premier.
   Les colonnes s'empilent par retour a la ligne : c'est wrap-REVERSE qui inverse
   l'ordre des lignes, pas flex-direction. */
@media(max-width:999px){.sb-duo.sb-duo--inverse{--flex-wrap:wrap-reverse}}

.sb-separateur{height:1px;background:linear-gradient(90deg,transparent,rgba(143,96,54,.35),transparent);margin:clamp(48px,6vw,88px) 0}

/* ----------------------------------------------------------- 6. images
   Double bord : la photo est posee dans un plateau (fond sable, anneau fin),
   comme une plaque dans son ecrin. Rayons concentriques. */
.sb-image-cadre{position:relative;padding:10px;border-radius:var(--r-l);
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(246,241,233,.9));
  box-shadow:var(--anneau),var(--ombre-profonde)}
/* une seule proportion, 4:3 : les photos allaient de 2,28:1 (bande mince a cote d'une
   colonne de 600 px) a 1,15:1. Les arches et les portraits (.sb-portrait) en 4:5. */
.sb-image-cadre img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r-l) - 10px);display:block}
.sb-marine .sb-image-cadre{background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 34px 70px -30px rgba(0,0,0,.45)}
/* l'arche, pour les photos qui supportent un cadrage vertical */
.sb-arche img{aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px calc(var(--r-l) - 10px) calc(var(--r-l) - 10px)}
.sb-arche{border-radius:999px 999px var(--r-l) var(--r-l)}
.sb-portrait img{aspect-ratio:4/5}
/* un fin trait d'or decale derriere le cadre */
.sb-image-cadre::before{
  content:"";position:absolute;inset:26px -18px -18px 26px;z-index:-1;
  border:1px solid rgba(143,96,54,.38);border-radius:inherit;pointer-events:none;
}
@media(max-width:700px){.sb-image-cadre::before{inset:18px -8px -10px 18px}}

/* ----------------------------------------------------------- 7. cartes */
.sb-grille{display:grid;gap:clamp(20px,2.4vw,34px);width:100%}
@media(min-width:640px){.sb-grille{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){
  .sb-grille--3{grid-template-columns:repeat(3,1fr)}
  .sb-grille--4{grid-template-columns:repeat(4,1fr)}
}
.sb-carte{
  position:relative;height:100%;display:flex;flex-direction:column;
  padding:7px;border-radius:var(--r-l);
  background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(246,241,233,.85));
  box-shadow:var(--anneau),var(--ombre-douce);
  transition:transform .8s var(--ease-ressort),box-shadow .8s var(--ease);
}
.sb-carte:hover{transform:translateY(-6px);box-shadow:var(--anneau),var(--ombre-profonde)}
.sb-carte__image{overflow:hidden;border-radius:calc(var(--r-l) - 7px) calc(var(--r-l) - 7px) 6px 6px}
.sb-carte__image img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.4s var(--ease)}
.sb-carte:hover .sb-carte__image img{transform:scale(1.06)}
.sb-carte__corps{
  flex:1;display:flex;flex-direction:column;
  padding:1.5rem 1.55rem 1.7rem;margin-top:4px;background:var(--perle);
  border-radius:6px 6px calc(var(--r-l) - 7px) calc(var(--r-l) - 7px);
}
.sb-carte__corps h3{margin-bottom:.35rem;font-size:clamp(1.45rem,1.2rem + .6vw,1.8rem)}
.sb-carte__meta{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);font-weight:500;margin-bottom:.55rem}
.sb-carte__texte{color:var(--encre-doux);font-size:.98rem;line-height:1.75;margin:.4rem 0 1.2rem}
.sb-carte__lien{
  margin-top:auto;display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;color:var(--marine);padding-bottom:.35rem;
  background:linear-gradient(var(--oro),var(--oro)) left bottom/0 1px no-repeat;
  transition:background-size .6s var(--ease),color .4s var(--ease);
}
.page-content a.sb-carte__lien{text-decoration:none}
.sb-carte__lien::after{content:"\2192";font-size:1rem;letter-spacing:0;transition:transform .6s var(--ease-ressort)}
.sb-carte:hover .sb-carte__lien{background-size:100% 1px;color:var(--oro)}
.sb-carte:hover .sb-carte__lien::after{transform:translateX(5px)}
/* une carte sans image garde ses coins */
.sb-carte__corps:first-child{border-radius:calc(var(--r-l) - 7px)}

/* ---------------------------------------------------- 8. services, listes */
.sb-services{
  display:grid;gap:0;margin-top:.8rem;border-radius:var(--r-l);overflow:hidden;
  background:var(--perle);box-shadow:var(--anneau),var(--ombre-douce);
}
@media(min-width:700px){.sb-services{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.sb-services{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.sb-services--4{grid-template-columns:repeat(4,1fr)}}
.sb-service{
  display:flex;gap:1.1rem;align-items:flex-start;padding:2rem 1.8rem;position:relative;
  transition:background-color .6s var(--ease);
}
/* filets fins entre les cases, sans bordure de tableau */
.sb-service::after{content:"";position:absolute;left:1.8rem;right:1.8rem;bottom:0;height:1px;background:rgba(6,66,102,.08)}
.sb-service:hover{background:var(--creme)}
.sb-service svg{
  flex:0 0 44px;width:44px;height:44px;padding:10px;border-radius:50%;
  stroke:var(--oro);fill:none;stroke-width:1.2;background:rgba(143,96,54,.08);
  transition:transform .8s var(--ease-ressort),background-color .6s var(--ease);
}
.sb-service:hover svg{transform:rotate(-8deg) scale(1.06);background:rgba(143,96,54,.14)}
.sb-service b{display:block;font-family:var(--f-titre);font-size:1.3rem;font-weight:600;color:var(--marine);margin-bottom:.2rem;line-height:1.2}
.sb-service span{font-size:.95rem;color:var(--encre-doux);line-height:1.65;display:block}

.sb-liste{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.sb-liste li{position:relative;padding-left:1.7rem;color:var(--encre-doux);line-height:1.65}
.sb-liste li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--oro-vif);transform:rotate(45deg);
}
.sb-marine .sb-liste li{color:var(--brume)}
.sb-marine .sb-liste li::before{background:var(--oro-clair)}
.sb-liste--cadre{
  padding:2rem 2.1rem;border-radius:var(--r-l);background:var(--perle);
  box-shadow:var(--anneau),var(--ombre-douce);
}
@media(min-width:620px){.sb-liste--deux{grid-template-columns:1fr 1fr;column-gap:1.8rem}}

.sb-jetons{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0}
.sb-jetons li{
  border:1px solid rgba(143,96,54,.28);border-radius:var(--r-pill);padding:.55rem 1.15rem;
  font-size:.9rem;color:var(--marine);background:var(--perle);
  transition:background-color .5s var(--ease),border-color .5s var(--ease);
}
.sb-jetons li:hover{background:var(--creme);border-color:var(--oro)}

.sb-note{font-size:.95rem;color:var(--encre-doux);border-left:1px solid var(--oro);padding-left:1.2rem;margin-top:1.8rem;font-style:normal}
.sb-marine .sb-note,.sb-note--clair{color:var(--brume)}
.sb-intro-centre{max-width:62ch;margin-inline:auto;color:var(--encre-doux);font-size:1.06rem}
.sb-marine .sb-intro-centre,.sb-marine .sb-note{color:var(--brume)}

/* --------------------------------------------------------- 9. composants */
.sb-tarifs{width:100%;border-collapse:collapse;font-size:1.02rem}
.sb-tarifs th{
  text-align:left;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--oro);font-weight:500;padding:0 0 1rem;
}
.sb-tarifs th:last-child{text-align:right}
.sb-tarifs td{padding:1.15rem 0;border-top:1px solid rgba(6,66,102,.10);vertical-align:top}
.sb-tarifs td:first-child{font-family:var(--f-titre);font-size:1.25rem;font-weight:600;color:var(--marine);line-height:1.3}
.sb-tarifs td:last-child{text-align:right;white-space:nowrap;font-weight:500;color:var(--oro);letter-spacing:.04em}
.sb-tarifs small{display:block;font-family:var(--f-texte);color:var(--encre-doux);font-size:.86rem;font-weight:400;margin-top:.2rem}
.sb-tarifs tr{transition:background-color .5s var(--ease)}
.sb-tarifs tbody tr:hover{background:rgba(246,241,233,.7)}

.sb-accroche{font-family:var(--f-titre);font-style:italic;font-size:1.45rem;line-height:1.35;color:var(--azur);margin-bottom:1.1rem}
/* le sous-titre italique appartient au titre : il respire sous lui, et se compose comme
   lui (equilibre, pas justifie : justifie, il finissait sur un mot seul, « mare. ») */
.elementor-widget-text-editor p.sb-accroche{margin-top:.8rem;text-align:start;text-align-last:auto;text-wrap:balance;hyphens:manual}
.sb-capacite{
  display:inline-flex;align-items:baseline;gap:.6rem;font-weight:500;color:var(--marine);
  border:1px solid rgba(143,96,54,.32);border-radius:var(--r-pill);padding:.5rem 1.2rem;font-size:.95rem;
}
.sb-capacite span{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}

.sb-piliers{display:grid;gap:2.4rem;margin:.6rem 0 0}
@media(min-width:860px){.sb-piliers{grid-template-columns:repeat(3,1fr);gap:3.4rem}}
.sb-pilier{position:relative;padding-top:1.8rem;border-top:1px solid rgba(235,195,145,.32)}
.sb-pilier__lettre{
  display:block;font-family:var(--f-titre);font-style:italic;font-size:2.4rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--oro-clair);margin-bottom:.6rem;line-height:1;
}
.sb-pilier h3{color:#fff;margin-bottom:.5em}
.sb-pilier p{color:var(--brume);margin-bottom:0;font-size:1rem}

.sb-fiches{--gap-fiches:clamp(18px,2vw,28px);display:grid;gap:var(--gap-fiches);margin:0}
@media(min-width:760px){.sb-fiches{grid-template-columns:1fr 1fr}}
/* trois colonnes : une rangee incomplete se CENTRE (8 soins = 3 + 3 + 2, et la derniere
   rangee laissait un trou a droite). En flex, la fiche perd son height:100%, sinon elle
   n'est plus etiree a la hauteur de sa rangee. */
@media(min-width:1180px){
  .sb-fiches{display:flex;flex-wrap:wrap;justify-content:center}
  .sb-fiches > *{flex:0 0 calc((100% - 2 * var(--gap-fiches)) / 3)}
  .sb-fiches > .sb-fiche{height:auto}
  .sb-fiches--2 > *{flex-basis:calc((100% - var(--gap-fiches)) / 2)}
}
.sb-fiche{
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:2.1rem 2rem 1.9rem;border-radius:var(--r-l);background:var(--perle);
  box-shadow:var(--anneau),var(--ombre-douce);
  transition:transform .8s var(--ease-ressort),box-shadow .8s var(--ease);
}
.sb-fiche:hover{transform:translateY(-4px);box-shadow:var(--anneau),var(--ombre-profonde)}
.sb-fiche::before{
  content:"";position:absolute;left:2rem;right:2rem;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--oro),var(--oro-clair),transparent);opacity:.55;
}
/* le prix toujours SOUS le titre : a cote ou dessous selon la longueur du titre, les
   etiquettes ne s'alignaient plus d'une fiche a l'autre */
.sb-fiche__haut{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:.9rem}
.sb-fiche h3{font-size:clamp(1.4rem,1.2rem + .5vw,1.7rem);margin:0;min-width:0}
.sb-fiche__prix{
  font-weight:500;font-size:.9rem;letter-spacing:.06em;color:var(--oro);white-space:nowrap;
  border:1px solid rgba(143,96,54,.3);border-radius:var(--r-pill);padding:.3rem .9rem;
}
.sb-fiche__duree{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--encre-doux);margin:0 0 .9rem}
.sb-fiche p{color:var(--encre-doux);font-size:.98rem}
.sb-fiche__avertissement{margin-top:auto;padding-top:1rem;border-top:1px solid rgba(6,66,102,.08);font-size:.88rem;margin-bottom:0}
@media(max-width:420px){.sb-fiche{padding:1.7rem 1.4rem}.sb-fiche__prix{font-size:.84rem;padding:.25rem .7rem}}

.sb-encart{
  position:relative;padding:2.2rem 2.4rem;border-radius:var(--r-l);background:var(--perle);
  box-shadow:var(--anneau),var(--ombre-douce);
}
.sb-encart::before{content:"";position:absolute;left:0;top:2rem;bottom:2rem;width:2px;border-radius:2px;background:linear-gradient(var(--oro),var(--oro-clair))}
.sb-encart p{color:var(--encre-doux);font-size:.98rem}
.sb-encart p:last-child{margin-bottom:0}

.sb-formule{display:grid;gap:clamp(14px,1.6vw,22px);margin:.6rem 0 0}
@media(min-width:720px){.sb-formule{grid-template-columns:1fr 1fr}}
@media(min-width:1120px){.sb-formule{grid-template-columns:repeat(4,1fr)}}
.sb-formule__item{
  padding:2.2rem 1.9rem;border-radius:var(--r-l);
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(235,195,145,.18);
  transition:transform .8s var(--ease-ressort),background-color .6s var(--ease),box-shadow .6s var(--ease);
}
.sb-formule__item:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(235,195,145,.4)}
.sb-formule__numero{display:block;font-family:var(--f-titre);font-style:italic;font-size:2.6rem;color:var(--oro-clair);margin-bottom:.8rem;line-height:1}
.sb-formule__item h3{color:#fff;font-size:1.45rem;margin-bottom:.45em}
.sb-formule__item p{color:var(--brume);font-size:.96rem;margin-bottom:0}

.sb-trio{display:grid;gap:2.6rem;margin:.4rem 0 0}
@media(min-width:900px){.sb-trio{grid-template-columns:repeat(3,1fr);gap:3.4rem}}
.sb-trio__item{padding-top:1.8rem;border-top:1px solid rgba(143,96,54,.3)}
.sb-trio__item h3{font-size:clamp(1.45rem,1.2rem + .5vw,1.75rem);margin-bottom:.5em}
.sb-trio__item p{color:var(--encre-doux);font-size:.98rem;margin-bottom:1.2rem}

.sb-etapes{list-style:none;counter-reset:etape;padding:0;margin:2.6rem 0 0;display:grid;gap:1.8rem}
@media(min-width:820px){.sb-etapes{grid-template-columns:repeat(4,1fr);gap:2rem}}
.sb-etapes li{counter-increment:etape;position:relative;padding-top:4.2rem;text-align:left}
.sb-etapes li::before{
  content:counter(etape,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--f-titre);font-style:italic;font-size:2.6rem;line-height:1;color:var(--oro);
}
.sb-etapes li::after{content:"";position:absolute;top:3.2rem;left:0;width:40px;height:1px;background:var(--oro)}
.sb-etapes span{display:block;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);margin-bottom:.5rem}
.sb-etapes p{color:var(--encre-doux);font-size:.98rem;margin-bottom:0}

.sb-coordonnees{padding:2.3rem;border-radius:var(--r-l);background:var(--perle);box-shadow:var(--anneau),var(--ombre-profonde);font-style:normal}
.sb-coordonnees__nom{font-family:var(--f-titre);font-size:1.7rem;font-weight:600;color:var(--marine);margin-bottom:.5rem;line-height:1.1}
.sb-coordonnees p{color:var(--encre-doux)}
.sb-coordonnees ul{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.9rem}
.sb-coordonnees li{display:flex;flex-direction:column;gap:.15rem;padding-top:.9rem;border-top:1px solid rgba(6,66,102,.08)}
.sb-coordonnees li a{font-weight:500;color:var(--marine);text-decoration:none;font-size:1.05rem}
.sb-coordonnees li a:hover{color:var(--oro)}
.sb-coordonnees li span{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--oro)}
.sb-contact{display:flex;flex-direction:column;gap:.3rem;margin-top:1rem}
.sb-contact a{font-weight:500;color:var(--marine);text-decoration:none;font-size:.98rem}
.sb-contact a:hover{color:var(--oro)}

/* ------------------------------------------------------------ 10. FAQ */
.sb-faq .elementor-accordion-item{border:0;border-top:1px solid rgba(6,66,102,.12);background:transparent}
.sb-faq .elementor-accordion-item:last-child{border-bottom:1px solid rgba(6,66,102,.12)}
.sb-faq .elementor-tab-title{padding:1.5rem 0;background:transparent;display:flex;align-items:center;gap:1rem}
.sb-faq .elementor-tab-title a{font-family:var(--f-titre);font-size:1.45rem;font-weight:600;color:var(--marine);text-decoration:none;transition:color .4s var(--ease)}
.sb-faq .elementor-tab-title:hover a,.sb-faq .elementor-tab-title.elementor-active a{color:var(--oro)}
.sb-faq .elementor-tab-content{padding:0 0 1.6rem;border:0;color:var(--encre-doux);max-width:70ch}
.sb-faq .elementor-accordion-icon{
  color:var(--oro);width:34px;height:34px;border-radius:50%;flex:0 0 34px;order:2;margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(143,96,54,.35);
  font-size:.75rem;transition:transform .6s var(--ease-ressort),background-color .4s var(--ease);
}
.sb-faq .elementor-accordion-icon svg{display:none}
.sb-faq .elementor-accordion-icon{position:relative}
.sb-faq .elementor-accordion-icon::before,.sb-faq .elementor-accordion-icon::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--oro);
  transform:translate(-50%,-50%);transition:transform .6s var(--ease-ressort)}
.sb-faq .elementor-accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.sb-faq .elementor-tab-title.elementor-active .elementor-accordion-icon{background:rgba(143,96,54,.08)}
.sb-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::after{transform:translate(-50%,-50%) rotate(0)}

/* ------------------------------------------------ 11. bandeau et heros */
.sb-bandeau{display:flex;align-items:flex-end;color:#fff;overflow:hidden}
/* Le voile des bandeaux est pose ICI, pas dans Elementor : il doit etre diagonal
   sur grand ecran (sombre sous le texte en bas a gauche, leger en haut a droite,
   pour que la photo respire) et vertical en mobile, ou le texte prend toute la
   largeur. Calcule pour que le texte le plus a droite reste sous 0,94. */
.e-con.sb-bandeau::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(65deg,rgba(4,48,75,.95) 44%,rgba(4,48,75,.55) 72%,rgba(4,48,75,.12) 100%);
}
@media(max-width:999px){
  .e-con.sb-bandeau::before{background:linear-gradient(180deg,rgba(4,48,75,.16) 0%,rgba(4,48,75,.95) 34%)}
}
.sb-bandeau > .e-con{position:relative;z-index:2}
.sb-bandeau h1{color:#fff;max-width:16ch;margin-bottom:.3em;text-shadow:0 2px 30px rgba(4,48,75,.35)}
.sb-bandeau .sb-bandeau__chapo{max-width:56ch;color:#E6EFF5;font-size:clamp(1.04rem,.98rem + .3vw,1.22rem);margin-bottom:0;font-weight:300}
/* le bandeau garde une vague d'ecume en bas : il se fond dans la page */
@media(min-width:700px){
  .e-con.sb-bandeau{
    -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 47px) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v20c-180 22-360 28-540 18S540 6 360 12 120 38 0 30z'/%3E%3C/svg%3E") bottom/100% 48px no-repeat;
    mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 47px) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v20c-180 22-360 28-540 18S540 6 360 12 120 38 0 30z'/%3E%3C/svg%3E") bottom/100% 48px no-repeat;
  }
}

/* Heros de l'accueil en deux parts : le texte sur l'aplat, la photo intacte.
   Un conteneur « full » n'a pas de .e-con-inner : c'est lui qui porte le flex,
   et sa regle de page pese TROIS classes. */
.sb-hero-duo{
  align-items:stretch;overflow:hidden;
  background:radial-gradient(120% 90% at 0% 100%,rgba(235,195,145,.10),transparent 55%),
             radial-gradient(90% 80% at 100% 0%,rgba(42,154,196,.18),transparent 60%),var(--marine);
}
.sb-hero-duo__texte{justify-content:center;color:#EAF1F6;position:relative}
.sb-hero-duo__texte h1{color:#fff;font-size:clamp(2.7rem,1.5rem + 3vw,4.6rem);max-width:15ch;margin-bottom:.4em;line-height:1.03}
.sb-hero-duo__texte .sb-hero-intro{max-width:42ch;color:var(--brume);font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);font-weight:300;margin-bottom:0}
.sb-hero-duo__texte .sb-hero__actions{margin-top:2.6rem}
/* l'enseigne « SIRENA BLU 21 » est a droite de la photo : on ancre le cadrage
   sur elle, sinon elle etait coupee de 1024 a 1440 px */
.sb-hero-duo__image{background-color:var(--marine-fonce);background-position:80% center!important;position:relative;overflow:hidden}
.sb-hero-duo__image .sb-kb{transform-origin:80% 62%}
@media(min-width:1000px){
  .sb-hero-duo__texte{--width:46%}
  .sb-hero-duo__image{--width:54%;border-radius:0 0 0 180px}
}
@media(max-width:999px){
  body .elementor-element.e-con.sb-hero-duo{--flex-direction:column-reverse}
  .sb-hero-duo__texte,.sb-hero-duo__image{--width:100%}
}

/* ---------------------------------------------------------- 12. en-tete
   Au repos : une barre creme pleine largeur. Des qu'on defile : une ile
   flottante, detachee du haut, arrondie, voilee. Le <header id="masthead">
   garde une hauteur FIXE : sans cela, le changement de taille ferait sauter
   la page sous l'ecran. */
body.ehf-header #masthead{position:sticky;top:0;z-index:99;height:var(--entete);pointer-events:none}
.sb-entete{
  position:static;pointer-events:auto;
  margin:0 auto;max-width:100%;min-height:var(--entete);
  background:rgba(253,251,248,.96);
  border-bottom:1px solid rgba(6,66,102,.08);
  transition:margin .7s var(--ease-ressort),max-width .7s var(--ease-ressort),min-height .7s var(--ease-ressort),
             border-radius .7s var(--ease-ressort),background-color .6s var(--ease),box-shadow .6s var(--ease);
}
.a-defile .sb-entete{
  margin:12px auto 0;max-width:min(1380px,calc(100% - 24px));min-height:72px;
  border-radius:var(--r-pill);border-bottom-color:transparent;
  background:rgba(253,251,248,.9);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 0 0 1px rgba(4,48,75,.06),0 18px 40px -18px rgba(4,48,75,.28);
}
@media(max-width:1099px){.a-defile .sb-entete{margin-top:8px;max-width:calc(100% - 16px);min-height:62px;border-radius:22px}}
.sb-entete > .e-con-inner,.sb-entete .e-con-boxed{max-width:100%}
.sb-entete .e-con-inner{--flex-wrap:nowrap;align-items:center}
.sb-entete{overflow-x:clip}

/* logo : entier, jamais rogne, et qui retrecit avec l'ile */
.sb-entete .elementor-widget{--width:auto}
.sb-entete .elementor-widget-image{line-height:0}
.sb-entete .sb-logo img{width:auto;height:64px;max-width:none;object-fit:contain;transition:height .7s var(--ease-ressort)}
.a-defile .sb-entete .sb-logo img{height:50px}
@media(max-width:1099px){.sb-entete .sb-logo img{height:50px}.a-defile .sb-entete .sb-logo img{height:44px}}

/* menu. Le trait d'or nait au milieu du MOT et s'etire jusqu'a ses deux bords.
   Centre sur la boite du lien, il debordait le mot de 3 px a gauche et de 5 px a
   droite (mesure le 23/09) : la boite porte l'espacement de la derniere lettre, et
   la marge interieure de HFE (15 px, imprimee par Elementor en (0,5,1), qui ecrasait
   la mienne). D'ou (0,5,2) ici, et des bords cales sur les glyphes : --pad a gauche,
   --pad + --ls a droite. */
.sb-entete .sb-menu{flex:0 1 auto;min-width:0}
.sb-entete .hfe-nav-menu{flex-wrap:nowrap}
.sb-entete .elementor-widget-navigation-menu{--width:auto}
.sb-entete .hfe-nav-menu__layout-horizontal .menu-item{margin-inline:.1rem}
.sb-entete .sb-menu .hfe-nav-menu li.menu-item a.hfe-menu-item{
  --pad:.85rem;--ls:.2em;
  position:relative;font-family:var(--f-texte);font-size:.76rem;font-weight:500;letter-spacing:var(--ls);
  text-transform:uppercase;color:var(--marine);padding:.85rem var(--pad);white-space:nowrap;
  transition:color .4s var(--ease);
}
.sb-entete .sb-menu .hfe-nav-menu li.menu-item a.hfe-menu-item::after{
  content:"";position:absolute;left:var(--pad);right:calc(var(--pad) + var(--ls));bottom:.5rem;height:1px;
  background:var(--oro);transform:scaleX(0);transition:transform .6s var(--ease);
}
.sb-entete .sb-menu .hfe-nav-menu li.menu-item a.hfe-menu-item:is(:hover,:focus-visible){color:var(--oro)}
.sb-entete .sb-menu .hfe-nav-menu li.menu-item a.hfe-menu-item:is(:hover,:focus-visible)::after{transform:scaleX(1)}
/* la page en cours : un point d'or sous le milieu du mot, meme calcul */
.sb-entete .sb-menu .hfe-nav-menu li.current-menu-item a.hfe-menu-item::after{
  left:calc(50% - var(--ls) / 2 - 2px);right:auto;width:4px;height:4px;border-radius:50%;bottom:.3rem;transform:none;
}
/* compact jusqu'a 1439 px : a 1280, le menu pleine taille et le telephone se chevauchaient (23/09) ;
   a 1366, le menu francais (plus long) touchait le selecteur de langue (23/09) */
@media(max-width:1439px){.sb-entete .sb-menu .hfe-nav-menu li.menu-item a.hfe-menu-item{--pad:.5rem;--ls:.14em;font-size:.7rem}}
/* l'ile flottante est plus etroite que la barre (1380 px au plus) : menu compact a toutes les
   largeurs, sinon le francais n'y laissait que 14 px entre le menu et les actions */
.a-defile .sb-entete .sb-menu .hfe-nav-menu li.menu-item a.hfe-menu-item{--pad:.5rem;--ls:.14em;font-size:.7rem}

/* actions : telephone, reservation, burger */
.sb-entete__actions{display:flex;align-items:center;gap:1.1rem}
.sb-tel{
  display:inline-flex;align-items:center;gap:.55rem;font-size:.84rem;font-weight:500;letter-spacing:.06em;
  color:var(--marine);text-decoration:none;white-space:nowrap;transition:color .4s var(--ease);
}
.sb-tel svg{width:17px;height:17px;stroke:var(--oro);fill:none;stroke-width:1.3}
.sb-tel:hover{color:var(--oro)}
@media(max-width:1279px){.sb-tel{display:none}}

/* selecteur de langue (functions.php) : un bouton discret « IT » qui deplie les trois
   langues ecrites dans leur propre langue. En dessous de 1100 px, pas de place dans la
   barre : la liste est dans le panneau du menu (site.js) et dans le pied de page. */
.sb-lingue{position:relative}
.sb-lingue summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;min-height:40px;
  padding:0 .35rem 0 .55rem;border-radius:var(--r-pill);
  font-family:var(--f-texte);font-size:.72rem;font-weight:500;letter-spacing:.18em;color:var(--marine);
  transition:color .4s var(--ease);
}
.sb-lingue summary::-webkit-details-marker{display:none}
.sb-lingue summary::after{
  content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .5s var(--ease-ressort);
}
.sb-lingue[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.sb-lingue summary:hover,.sb-lingue[open] summary{color:var(--oro)}
.sb-lingue__liste{
  position:absolute;top:calc(100% + 12px);right:-8px;z-index:5;min-width:168px;
  display:flex;flex-direction:column;padding:.45rem;border-radius:18px;
  background:var(--perle);box-shadow:var(--anneau),var(--ombre-profonde);
}
.sb-lingue[open] .sb-lingue__liste{animation:sb-deplie .45s var(--ease)}
@keyframes sb-deplie{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sb-lingue__liste a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .9rem;border-radius:12px;
  font-size:.92rem;color:var(--marine);text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease);
}
.sb-lingue__liste a:hover,.sb-lingue__liste a:focus-visible{background:var(--sable);color:var(--oro)}
.sb-lingue__liste a[aria-current]{color:var(--oro)}
.sb-lingue__liste a[aria-current]::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
@media(prefers-reduced-motion:reduce){.sb-lingue[open] .sb-lingue__liste{animation:none}}
@media(max-width:1099px){.sb-entete .sb-lingue{display:none}}

/* les langues en toutes lettres : pied de page et panneau du menu mobile */
.sb-lingues{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.sb-lingues a{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.sb-pied .sb-lingues a{color:#8FA8BA}
.sb-pied .sb-lingues a:hover,.sb-pied .sb-lingues a[aria-current]{color:var(--oro-clair)}
.sb-menu-mobile__pied .sb-lingues a:not(.sb-btn){color:var(--brume);font-size:.74rem;letter-spacing:.2em}
.sb-menu-mobile__pied .sb-lingues a:not(.sb-btn)[aria-current]{color:var(--oro-clair)}

.sb-burger{
  display:none;position:relative;width:46px;height:46px;border-radius:50%;flex:0 0 46px;
  border:1px solid rgba(6,66,102,.18);background:transparent;cursor:pointer;padding:0;
  transition:background-color .5s var(--ease),border-color .5s var(--ease);
}
.sb-burger span{
  position:absolute;left:14px;right:14px;height:1.5px;border-radius:2px;background:var(--marine);
  transition:transform .6s var(--ease-ressort),top .6s var(--ease-ressort),background-color .4s var(--ease);
}
.sb-burger span:nth-child(1){top:18px}
.sb-burger span:nth-child(2){top:26px}
/* Hello Elementor peint tout bouton survole ou focalise en rose (#c36), en
   `button:focus` (0,1,1) : le bouton du menu garde ses propres couleurs. */
.sb-burger:hover,.sb-burger:focus{background:transparent;color:inherit;border-color:rgba(6,66,102,.35)}
html.menu-ouvert .sb-burger{background:var(--marine);border-color:var(--marine)}
html.menu-ouvert .sb-burger span{background:#fff}
.menu-ouvert .sb-burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-ouvert .sb-burger span:nth-child(2){top:22px;transform:rotate(-45deg)}

@media(max-width:1099px){
  .sb-entete .sb-menu{display:none}
  .sb-burger{display:inline-block}
  .sb-entete > .e-con-inner{justify-content:space-between;gap:12px}
  .sb-entete .sb-logo{flex:0 0 auto;margin-right:auto}
  .sb-entete__actions-widget{flex:0 0 auto}
  .sb-entete__actions{gap:.6rem}
}
@media(max-width:420px){
  .sb-entete .sb-btn--compact{padding-left:1rem;letter-spacing:.14em;font-size:.66rem}
  .sb-entete .sb-btn--compact::after{flex-basis:30px;width:30px;height:30px}
}

/* le panneau de navigation mobile, construit par site.js a partir du menu */
.sb-menu-mobile{
  position:fixed;inset:0;z-index:98;display:flex;flex-direction:column;
  padding:calc(var(--entete) + 28px) var(--marge-page) 32px;overflow-y:auto;
  background:radial-gradient(120% 70% at 100% 0%,rgba(42,154,196,.22),transparent 60%),
             radial-gradient(90% 60% at 0% 100%,rgba(235,195,145,.12),transparent 60%),var(--nuit);
  color:#fff;visibility:hidden;opacity:0;
  transition:opacity .6s var(--ease),visibility 0s linear .6s;
}
.menu-ouvert .sb-menu-mobile{visibility:visible;opacity:1;transition:opacity .6s var(--ease),visibility 0s}
.menu-ouvert{overflow:hidden}
.menu-ouvert .sb-entete{background:rgba(253,251,248,.96)}
.sb-menu-mobile nav{display:flex;flex-direction:column;gap:.2rem;margin-bottom:auto}
.sb-menu-mobile nav a{
  font-family:var(--f-titre);font-size:clamp(2rem,8vw,2.8rem);font-weight:500;line-height:1.25;
  color:#fff;text-decoration:none;display:flex;align-items:baseline;gap:1rem;padding:.25rem 0;
  opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease),transform .9s var(--ease-ressort),color .4s var(--ease);
}
.sb-menu-mobile nav a small{font-family:var(--f-texte);font-size:.68rem;letter-spacing:.24em;color:var(--oro-clair);min-width:1.8rem}
.sb-menu-mobile nav a:hover,.sb-menu-mobile nav a[aria-current="page"]{color:var(--oro-clair)}
.menu-ouvert .sb-menu-mobile nav a{opacity:1;transform:none}
.sb-menu-mobile__pied{
  margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid rgba(235,195,145,.2);
  display:flex;flex-direction:column;gap:1rem;opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease) .35s,transform .9s var(--ease-ressort) .35s;
}
.menu-ouvert .sb-menu-mobile__pied{opacity:1;transform:none}
.sb-menu-mobile__pied a:not(.sb-btn){color:var(--brume);text-decoration:none;font-size:1rem;letter-spacing:.04em}
.sb-menu-mobile__pied .sb-btn{align-self:flex-start}
@media(min-width:1100px){.sb-menu-mobile{display:none}}

/* ------------------------------------------------------ 13. pied de page
   Resserre le 23/09 (Quentin : « trop gros ») : 933 px de haut en bureau, 1 494 en
   mobile, la devise ne commencait qu'a 248 px du haut. Elle tient maintenant sur une
   ligne, le bouton en face, sur TOUTES les pages. */
.sb-pied{
  position:relative;color:#B9CCD9;padding:clamp(2.4rem,4vw,3.6rem) var(--marge-page) 1.8rem;
  background:radial-gradient(100% 60% at 100% 0%,rgba(42,154,196,.14),transparent 60%),
             radial-gradient(80% 50% at 0% 100%,rgba(235,195,145,.08),transparent 60%),var(--nuit);
}
/* le pied entre par une vague, en mobile aussi (28 px) ; z-index 2 : les sections marine
   (z-index 1) se peignaient par-dessus ses 64 px de vague, qui disparaissait derriere
   chaque section d'appel */
.e-con.sb-pied{
  --vague:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V26c200 26 380 34 560 20s360-44 520-44 260 18 360 30v32z'/%3E%3C/svg%3E");
  --h-vague:28px;z-index:2;
  margin-top:calc(-1 * var(--h-vague));border-top:var(--h-vague) solid transparent;background-origin:border-box;
  -webkit-mask:var(--vague) top/100% var(--h-vague) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--h-vague) - 1px)/100% calc(100% - var(--h-vague) + 1px) no-repeat;
  mask:var(--vague) top/100% var(--h-vague) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--h-vague) - 1px)/100% calc(100% - var(--h-vague) + 1px) no-repeat;
}
@media(min-width:700px){.e-con.sb-pied{--h-vague:64px}}
.sb-pied a{color:#C9D9E4;text-decoration:none;transition:color .4s var(--ease)}
.sb-pied a:hover{color:var(--oro-clair)}
/* la devise et le bouton : face a face tant qu'ils tiennent sur une ligne, l'un sous
   l'autre ensuite (flex-wrap, sans point de rupture a deviner) */
.sb-pied__haut{
  max-width:var(--largeur);margin:0 auto clamp(2.2rem,4vw,3rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem 2.5rem;
  padding-bottom:clamp(1.8rem,3vw,2.4rem);border-bottom:1px solid rgba(235,195,145,.16);
}
.sb-pied .sb-pied__devise{font-family:var(--f-titre);font-weight:500;font-size:clamp(1.9rem,1.25rem + 1.3vw,2.6rem);line-height:1.1;color:#fff;margin:0}
.sb-pied__devise em{font-style:italic;color:var(--oro-clair)}
/* en mobile, deux lignes voulues : « Il mare, il riposo » / « e la cura di sé. » */
@media(max-width:767px){.sb-pied__devise em{display:block}}
/* mobile : la marque et les coordonnees en pleine largeur, les deux listes cote a cote ;
   tablette : la marque en bandeau (logo | texte), les trois colonnes dessous ; quatre
   colonnes a partir de 1180 px seulement. A 800 et 1024 px, quatre colonnes coupaient
   « Contatti e / preventivi » et laissaient « (RN) » seul (mesure le 23/09). */
.sb-pied__grille{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem 1rem;max-width:var(--largeur);margin:0 auto}
.sb-pied__marque,.sb-pied__coord{grid-column:1 / -1}
.sb-pied__logo{display:block;width:200px;height:auto;margin-bottom:1.1rem}
@media(min-width:700px){
  .sb-pied__grille{grid-template-columns:repeat(3,1fr);gap:2.6rem 2rem}
  .sb-pied__coord{grid-column:auto}
  .sb-pied__marque{display:flex;align-items:center;gap:2.4rem}
  .sb-pied__marque .sb-pied__logo{flex:0 0 auto;margin:0}
  .sb-pied .sb-pied__marque p{margin:0;max-width:52ch}
}
@media(min-width:1180px){
  .sb-pied__grille{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:3rem}
  .sb-pied__marque{grid-column:auto;display:block}
  .sb-pied__marque .sb-pied__logo{margin-bottom:1.1rem}
  .sb-pied .sb-pied__marque p{max-width:36ch}
}
.sb-pied__marque p{font-size:.94rem;line-height:1.7;color:#AFC4D3;max-width:36ch}
/* h2 et non h4 : le pied suit le contenu, un h4 y faisait sauter deux niveaux (audit du 23/09) */
.sb-pied .sb-pied__titre{
  font-family:var(--f-texte);font-size:.7rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--oro-clair);margin:0 0 1.1rem;
}
.sb-pied p{font-size:.94rem;line-height:1.7;margin-bottom:.8rem}
.sb-pied__liens{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;font-size:.94rem}
.sb-pied__liens a{background:linear-gradient(var(--oro-clair),var(--oro-clair)) left bottom/0 1px no-repeat;padding-bottom:2px;transition:background-size .6s var(--ease),color .4s var(--ease)}
.sb-pied__liens a:hover{background-size:100% 1px}
/* « Gestisci cookie » : un bouton (Complianz rouvre sa banniere sur button.cmplz-manage-consent), habille en lien */
.sb-pied__liens button.cmplz-manage-consent{font:inherit;letter-spacing:inherit;color:#C9D9E4;border:0;border-radius:0;padding:0 0 2px;cursor:pointer;text-align:left;
  background:linear-gradient(var(--oro-clair),var(--oro-clair)) left bottom/0 1px no-repeat;transition:background-size .6s var(--ease),color .4s var(--ease)}
.sb-pied__liens button.cmplz-manage-consent:hover{color:var(--oro-clair);background-size:100% 1px}
.sb-pied__bas{
  max-width:var(--largeur);margin:clamp(2.2rem,4vw,3rem) auto 0;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.8rem;justify-content:space-between;
  font-size:.8rem;letter-spacing:.04em;color:#8FA8BA;
}
.sb-haut{
  display:inline-flex;align-items:center;gap:.7rem;color:#C9D9E4;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
}
.sb-haut::after{
  content:"";width:40px;height:40px;border-radius:50%;border:1px solid rgba(235,195,145,.4);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23EBC391' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12.5v-9M4 7.5l4-4 4 4'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .6s var(--ease-ressort),background-color .4s var(--ease);
}
.sb-haut:hover::after{transform:translateY(-3px);background-color:rgba(235,195,145,.08)}

/* --------------------------------------------------------- 14. formulaire
   Forminator en design « none » n'apporte AUCUNE feuille : la grille et les
   champs sont a nous. Les colonnes viennent de forminator-col-N / -md-N. */
.sb-formulaire{padding:clamp(1.6rem,3vw,2.6rem);border-radius:var(--r-l);background:var(--perle);box-shadow:var(--anneau),var(--ombre-profonde)}
.sb-formulaire .forminator-ui.forminator-custom-form[data-design=none]{font-family:var(--f-texte)}
.sb-formulaire .forminator-row{display:flex;flex-wrap:wrap;gap:0 1.2rem;margin-bottom:1.2rem}
.sb-formulaire .forminator-col{flex:1 1 100%;min-width:0}
.sb-formulaire .forminator-field{margin-bottom:0}
@media(min-width:620px){
  .sb-formulaire .forminator-col-6,.sb-formulaire .forminator-col-md-6{flex:1 1 calc(50% - .6rem)}
  .sb-formulaire .forminator-col-4,.sb-formulaire .forminator-col-md-4{flex:1 1 calc(33.333% - .8rem)}
}
.sb-formulaire .forminator-label{display:block;margin-bottom:.5rem;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--marine)}
.sb-formulaire .forminator-input,.sb-formulaire .forminator-textarea,
.sb-formulaire select.forminator-select,.sb-formulaire select{
  width:100%;min-height:52px;padding:.8rem 1.1rem;background:var(--creme);
  border:1px solid rgba(6,66,102,.16);border-radius:var(--r-s);
  color:var(--encre);font-family:var(--f-texte);font-size:1rem;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),background-color .4s var(--ease);
}
.sb-formulaire .forminator-input:focus,.sb-formulaire .forminator-textarea:focus,.sb-formulaire select:focus{
  border-color:var(--oro);background:var(--perle);box-shadow:0 0 0 4px rgba(143,96,54,.12);outline:none}
.sb-formulaire .forminator-textarea{min-height:150px}
.sb-formulaire .forminator-button-submit{
  display:inline-flex;align-items:center;min-height:54px;padding:.5em 2.2em;border:0;border-radius:var(--r-pill);
  background:var(--oro);color:#fff;font-family:var(--f-texte);font-size:.8rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;transition:background-color .5s var(--ease),transform .5s var(--ease-ressort)}
.sb-formulaire .forminator-button-submit:hover{background:#7A5029;transform:translateY(-2px)}
.sb-formulaire .forminator-description,.sb-formulaire .forminator-consent label{color:var(--encre-doux);font-size:.93rem}
.sb-formulaire .forminator-required{color:#B3261E}
.sb-formulaire .forminator-checkbox,.sb-formulaire .forminator-consent{display:flex;align-items:flex-start;gap:.7rem;line-height:1.55}
.sb-formulaire input[type=checkbox],.sb-formulaire input[type=radio]{width:20px;height:20px;margin:.15rem 0 0;accent-color:var(--oro);flex:0 0 auto}
.sb-formulaire .forminator-consent + .forminator-description,.sb-formulaire .forminator-consent__label{margin:0}
.sb-formulaire .forminator-checkbox-label,.sb-formulaire .forminator-radio-label{color:var(--encre-doux)}
.sb-formulaire .forminator-radio{display:inline-flex;align-items:center;gap:.6rem;margin-right:1.4rem}

/* ----------------------------------------------------------- 15. mouvement
   Les apparitions ne s'arment que si le script est la (html.js) : sans lui,
   tout reste visible. Montee lente, flou qui se dissipe, cascade dans les grilles. */
@media (prefers-reduced-motion:no-preference){
  .js .sb-rev{
    opacity:0;transform:translateY(34px);filter:blur(6px);
    transition:opacity 1.1s var(--ease),transform 1.3s var(--ease),filter 1.1s var(--ease);
    transition-delay:calc(var(--i,0) * 110ms);
  }
  .js .sb-rev.est-vu{opacity:1;transform:none;filter:none}

  /* les photos s'ouvrent comme un rideau, puis se posent */
  .js .sb-image-cadre.sb-rev{filter:none}
  .js .sb-image-cadre.sb-rev img{clip-path:inset(100% 0 0 0 round calc(var(--r-l) - 10px));transform:scale(1.12);
    transition:clip-path 1.5s var(--ease),transform 2.2s var(--ease);transition-delay:calc(var(--i,0) * 110ms + 120ms)}
  .js .sb-image-cadre.sb-rev.est-vu img{clip-path:inset(0 0 0 0 round calc(var(--r-l) - 10px));transform:none}
  .js .sb-arche.sb-rev img{clip-path:inset(100% 0 0 0 round 999px 999px calc(var(--r-l) - 10px) calc(var(--r-l) - 10px))}
  .js .sb-arche.sb-rev.est-vu img{clip-path:inset(0 0 0 0 round 999px 999px calc(var(--r-l) - 10px) calc(var(--r-l) - 10px))}

  /* bandeaux et heros : la photo avance doucement vers le visiteur */
  .sb-kb{position:absolute;inset:0;z-index:0;background:inherit;background-size:cover;animation:sb-kb 14s var(--ease) both;pointer-events:none}
  @keyframes sb-kb{from{transform:scale(1.12)}to{transform:scale(1)}}

  /* titres des bandeaux : entree a l'ouverture de la page */
  .js .sb-bandeau h1,.js .sb-bandeau .sb-surtitre,.js .sb-bandeau .sb-bandeau__chapo,
  .js .sb-hero-duo__texte h1,.js .sb-hero-duo__texte .sb-surtitre,.js .sb-hero-duo__texte .sb-hero-intro,.js .sb-hero-duo__texte .sb-hero__actions{
    animation:sb-monte 1.4s var(--ease) both;
  }
  .js .sb-bandeau h1,.js .sb-hero-duo__texte h1{animation-delay:.12s}
  .js .sb-bandeau .sb-bandeau__chapo,.js .sb-hero-duo__texte .sb-hero-intro{animation-delay:.26s}
  .js .sb-hero-duo__texte .sb-hero__actions{animation-delay:.4s}
  @keyframes sb-monte{from{opacity:0;transform:translateY(30px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* cascade : les enfants des grilles d'icones, des piliers et des etapes
   entrent un par un quand leur bloc apparait */
@media (prefers-reduced-motion:no-preference){
  .js .sb-cascade > *{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 85ms + 150ms)}
  .js .est-vu .sb-cascade > *,.js .sb-cascade.est-vu > *{opacity:1;transform:none}
}

/* Le reset de Hello Elementor pose sur TOUT tableau des lignes zebrees et une
   bordure grise, en `table tbody>tr:nth-child(odd)>td` (0,1,4) : la grille des
   tarifs doit peser plus lourd (0,2,3) pour rester nette. */
.sb-tarifs tbody tr:nth-child(n)>td,.sb-tarifs thead tr:nth-child(n)>th{
  border:0;border-top:1px solid rgba(6,66,102,.10);background:transparent;padding-inline:0;
}
.sb-tarifs thead tr:nth-child(n)>th{border-top:0;padding:0 0 1rem}
.sb-tarifs tbody tr:nth-child(n):hover>td{background:rgba(246,241,233,.7)}
.sb-tarifs td:first-child{padding-left:.4rem}
.sb-tarifs td:last-child{padding-right:.4rem}
/* anneau de focus a la charte, au lieu du noir et blanc de Hello */
.sb-burger:focus-visible,.sb-btn:focus-visible,.sb-formulaire .forminator-button-submit:focus-visible{
  outline:2px solid var(--oro);outline-offset:3px;box-shadow:none;
}

/* Forminator remplace ses listes par un composant Select2 : la <select> reste
   cachee, c'est .select2-selection qui se voit. Meme habit que les autres champs. */
.sb-formulaire .select2-container{width:100%!important}
.sb-formulaire .select2-container .select2-selection--single{
  display:flex;align-items:center;min-height:52px;height:auto;padding:0 2.8rem 0 1.1rem;
  background:var(--creme);border:1px solid rgba(6,66,102,.16);border-radius:var(--r-s);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),background-color .4s var(--ease);
}
.sb-formulaire .select2-container .select2-selection__rendered{padding:0;line-height:1.4;color:var(--encre);font-size:1rem}
.sb-formulaire .select2-container .select2-selection__arrow{position:absolute;top:0;right:1rem;height:100%;display:flex;align-items:center}
.sb-formulaire .select2-container .select2-selection__arrow b{border-color:var(--oro) transparent transparent}
.sb-formulaire .select2-container--open .select2-selection--single,
.sb-formulaire .select2-container--focus .select2-selection--single{border-color:var(--oro);background:var(--perle);box-shadow:0 0 0 4px rgba(143,96,54,.12)}
.select2-container--open .select2-dropdown{border:1px solid rgba(6,66,102,.14);border-radius:var(--r-s);overflow:hidden;box-shadow:var(--ombre-douce);font-family:var(--f-texte)}
.select2-container .select2-results__option{padding:.7rem 1.1rem;color:var(--encre)}
.select2-container .select2-results__option--highlighted,.select2-container .select2-results__option[aria-selected=true]{background:var(--sable);color:var(--marine)}

/* case a cocher et son texte sur une meme ligne : le texte est un FRERE du label */
.sb-formulaire .forminator-checkbox__wrapper{display:flex;align-items:flex-start;gap:.85rem}
.sb-formulaire .forminator-checkbox__wrapper .forminator-consent__label{margin:0;line-height:1.6}
.sb-formulaire .forminator-consent__label a{color:var(--marine);text-decoration-color:var(--oro)}
/* listes natives : la fleche du navigateur remplacee par un chevron d'or */
.sb-formulaire select{
  -webkit-appearance:none;appearance:none;padding-right:3rem;cursor:pointer;
  background:var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238F6036' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 1.1rem center/15px no-repeat;
}

/* Un bouton garde SA couleur de libelle partout : `.sb-pied a` et `.sb-marine a`
   repeignent tous les liens (mesure au pied : or clair sur or, 3,7:1). */
:is(.sb-pied,.sb-marine,.sb-menu-mobile) a.sb-btn,
:is(.sb-pied,.sb-marine,.sb-menu-mobile) a.sb-btn:hover{color:var(--btn-texte)}

/* En mobile, un libelle long passe a la ligne au lieu de pousser la page :
   « Ricevi un preventivo personalizzato » debordait de 83 px a 360 px. */
.sb-btn{max-width:100%}
@media(max-width:600px){
  .sb-btn{white-space:normal;line-height:1.35;letter-spacing:.14em;text-align:left;padding-block:.45em}
  .sb-actions,.sb-hero__actions{gap:.7rem}
}

/* 360 px : logo, reservation et bouton du menu ne tenaient pas (le bouton
   depassait de 8 px, rogne par l'en-tete). On resserre sans rien retirer. */
@media(max-width:400px){
  .sb-entete .sb-logo img,.a-defile .sb-entete .sb-logo img{height:40px}
  .sb-entete > .e-con-inner{gap:8px}
  .sb-entete__actions{gap:.4rem}
  .sb-burger{width:42px;height:42px;flex-basis:42px}
  .sb-burger span{left:12px;right:12px}
  .sb-burger span:nth-child(1){top:16px}
  .sb-burger span:nth-child(2){top:24px}
  html.menu-ouvert .sb-burger span:nth-child(1),html.menu-ouvert .sb-burger span:nth-child(2){top:20px}
}
/* 320 px : il manquait 24 px. Le bouton de reservation perd son cercle-fleche,
   le libelle reste ; le panneau du menu garde, lui, le grand bouton complet. */
@media(max-width:380px){
  .sb-entete .sb-btn--compact{padding:.4em 1.1em;gap:0;min-height:40px;font-size:.64rem;letter-spacing:.16em}
  .sb-entete .sb-btn--compact::after{display:none}
}

/* ------------------------------------------------------------ 16. page 404
   template-parts/404.php : un titre, une phrase, trois sorties et l'appel a
   reserver, dans la langue de l'adresse demandee. */
.sb-404{max-width:var(--largeur);margin:0 auto;text-align:center;padding:clamp(3.5rem,8vw,6.5rem) var(--marge-page) var(--bloc)}
.sb-404 h1{margin-bottom:1.3rem}
.sb-404__liens{
  list-style:none;padding:0;margin:2.2rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2.2rem;
  font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.sb-404__liens a{color:var(--marine);text-decoration:none;padding-bottom:3px;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat}
.sb-404__liens a:hover{color:var(--oro)}