/* ==========================================================================
   Le Silicone Valley · couche site (kit DA, 26 octobre 2026)

   À charger APRÈS sv-tokens.css (le design system 1.0, figé le 2 octobre 2026, jamais modifié) :
     <link rel="stylesheet" href="css/sv-tokens.css">
     <link rel="stylesheet" href="css/sv-site.css">

   Le design system prévoyait le site « plus tard » : jetons prêts (u = 1 px), aucun gabarit. Cette couche ajoute
   seulement ce qu'un site demande en plus : largeur et gouttières, échelle typographique fluide (mobile vers bureau),
   sections nuit et jour, navigation, boutons et leurs états, liens, grilles, formulaires, pied de page, mouvement
   de l'interface. Aucune couleur, police, ombre ni rayon nouveau : tout vient des jetons.
   ========================================================================== */

/* -------------------------------------------------------------------------- 1. Jetons du site */
:root, .sv-site {
  --verre-angle: 135deg;                 /* une seule direction de lumière par page : en haut à gauche */
  --largeur: 1200px;                     /* contenu */
  --gouttiere: clamp(20px, 4vw, 48px);   /* marge latérale */
  --section: clamp(72px, 9vw, 136px);    /* respiration verticale d'une section */
  --pile: clamp(28px, 3.4vw, 48px);      /* entre deux blocs d'une section */

  /* Échelle fluide : de 375 px (mobile) à 1440 px (bureau). Le maximum est l'échelle « site » du DS (A5). */
  --fs-display: clamp(44px, 29.9px + 3.756vw, 84px);
  --fs-titre:   clamp(34px, 26.25px + 2.066vw, 56px);
  --fs-sous:    clamp(24px, 20.48px + .939vw, 34px);
  --fs-carte:   clamp(21px, 19.24px + .469vw, 26px);
  --fs-chapo:   clamp(18px, 16.94px + .282vw, 21px);
  --fs-texte: 17px; --fs-etiquette: 14px; --fs-mention: 13px; --fs-valeur: 18px;
  --fs-prix-xl: clamp(52px, 44.96px + 1.878vw, 72px);
  --fs-prix-l:  clamp(38px, 34.48px + .939vw, 48px);
  --fs-prix-m: 32px;

  /* Mouvement (D2) : ressorts critiques, aucun rebond, aucun linear. */
  --sv-ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* entrées, sorties, survols */
  --sv-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* fondus, révélation d'une photo */
  --sv-ease-soft: cubic-bezier(0.33, 0, 0.2, 1);       /* ambiance (anneaux, lumière) */
  --d-vif: .3s;        /* pastille, champ, petit élément */
  --d-standard: .4s;   /* un élément qui voyage */
  --d-titre: .5s;      /* titres, mots */
  --d-surface: .6s;    /* verre, carte, billet qui se pose */
  --d-sortie: .3s;     /* toute sortie */
  --goutte-w: 36px; --goutte-h: 24px;   /* la goutte du curseur, à l'échelle du site */
}

/* -------------------------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--sv-casse); color: var(--sv-encre);
  font: 440 var(--fs-texte)/1.5 "Switzer", sans-serif; letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
::selection { background: rgb(242 168 29 / .35); color: inherit; }

.sv-conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; position: relative; }
.sv-conteneur--etroit { --largeur: 760px; }

/* Une section est une « scène » : un seul thème, une seule lumière au plus.
   Rien sur la section qui casserait la lumière (A3, règle 3) : ni transform, ni opacity, ni filter, ni isolation. */
.sv-section { position: relative; overflow: hidden; padding-block: var(--section); }
.sv-section.nuit, .sv-section.jour { background-attachment: scroll; }
.sv-section > .sv-conteneur { position: relative; }   /* jamais de z-index : il isolerait la lumière posée dessous */
.sv-section--sous-nav { padding-top: calc(var(--section) + 72px); }   /* première section, sous la barre fixe */

/* La pile verticale d'un bloc de texte : surtitre, titre, chapô, actions */
.sv-entete { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.sv-entete--centre { margin-inline: auto; align-items: center; text-align: center; }
.sv-entete .t-sous { color: var(--c-titre); }
.sv-entete .t-chapo { color: var(--c-texte-2); max-width: 62ch; }
.sv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.sv-entete--centre .sv-actions { justify-content: center; }

/* -------------------------------------------------------------------------- 3. Grilles */
.sv-grille { display: grid; gap: var(--pile); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 320px)), 1fr)); }
.sv-deux { display: grid; gap: var(--pile); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sv-deux { grid-template-columns: 1fr 1fr; } .sv-deux--photo-a-droite > :first-child { order: 0; } }

/* -------------------------------------------------------------------------- 4. Navigation
   Une barre de verre collée en haut. Le mot-logo à gauche (jamais retapé), des liens, UN bouton or. */
.sv-nav { position: fixed; top: 12px; left: var(--gouttiere); right: var(--gouttiere); z-index: 50; }
.sv-nav__barre {
  max-width: calc(var(--largeur) + 48px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 8px 8px 8px 22px;
}
.sv-nav__barre.verre { border-radius: 999px; --verre-coeur: 6; --verre-flou: 18; }
.sv-nav [data-mot-logo] { --cap: 14px; color: var(--sv-navy); }
.sv-nav a:has(> [data-mot-logo]) { display: inline-flex; padding: 12px 0; }
.sv-nav__liens { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.sv-nav__liens a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  font: 520 15px/1 "Switzer", sans-serif; letter-spacing: -0.004em; color: var(--c-texte); text-decoration: none;
  transition: background-color var(--d-vif) var(--sv-ease-out);
}
.sv-nav__liens a:hover { background: var(--c-filet); }
.sv-nav__liens a[aria-current="page"] { color: var(--c-titre); font-weight: 620; }
.sv-nav__menu { display: none; }
@media (max-width: 899px) {
  .sv-nav__liens, .sv-nav__barre > .bouton-or { display: none; }
  .sv-nav__menu { display: block; position: relative; }
  .sv-nav__menu summary { list-style: none; cursor: pointer; }
  .sv-nav__menu summary::-webkit-details-marker { display: none; }
  .sv-nav__menu[open] .sv-nav__panneau { display: flex; }
  .sv-nav__panneau {
    display: none; position: absolute; right: 0; top: calc(100% + 10px); width: min(86vw, 320px);
    flex-direction: column; gap: 4px; padding: 14px; border-radius: 24px;
    /* un aplat, pas un second verre : la barre est déjà en verre (A4, règle 1) */
    background: var(--sv-casse); box-shadow: 0 1px 2px rgb(44 40 60 / .10), 0 12px 32px rgb(44 40 60 / .22);
  }
  .sv-nav__panneau .sv-nav__liens { display: flex; flex-direction: column; align-items: stretch; }
  .sv-nav__panneau .bouton-or { margin-top: 8px; }
}

/* -------------------------------------------------------------------------- 5. Boutons
   Le DS garde .bouton-or et .bouton-trait « pour le site » (B6). Sur le site seulement : jamais sur Instagram.
   Un seul bouton or par section (l'action principale) ; le reste en bouton trait ou en lien. */
.bouton-or, .bouton-trait {
  min-height: 48px; padding: 0 22px; font-size: 15px; text-decoration: none; cursor: pointer; border: 0;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform var(--d-vif) var(--sv-ease-out), filter var(--d-vif) var(--sv-ease-out), background-color var(--d-vif) var(--sv-ease-out);
}
.bouton-trait { background: transparent; }
.bouton-or:hover { filter: brightness(1.05) saturate(1.05); }
.bouton-trait:hover { background: var(--c-filet); }
.bouton-or:active, .bouton-trait:active { transform: scale(.97); }
.bouton--petit { min-height: 44px; padding: 0 18px; font-size: 14px; }
.bouton-or .fleche, .bouton-trait .fleche { transition: transform var(--d-vif) var(--sv-ease-out); }
.bouton-or:hover .fleche, .bouton-trait:hover .fleche { transform: translateX(3px); }

/* Focus clavier : visible, dans la couleur des titres du thème */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--c-titre, var(--sv-navy)); outline-offset: 3px; border-radius: 999px; }
:where(input, select, textarea):focus-visible { border-radius: var(--r-s); }

/* -------------------------------------------------------------------------- 6. Texte courant et liens */
.sv-texte { max-width: 66ch; }
/* Le titre rempli de lumière (A1) : le titre des Silicone Awards seulement (--or-gala). Hors .scene sur le site. */
.en-lumiere { background: var(--or-texte); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.en-lumiere--gala { background-image: var(--or-gala); }
.sv-texte p { margin: 0 0 1em; font: 440 var(--fs-texte)/1.55 "Switzer", sans-serif; text-wrap: pretty; }
.sv-texte h2 { font: var(--g-clash, 560) var(--fs-sous)/1.05 "Clash Grotesk", sans-serif; letter-spacing: -0.02em; color: var(--c-titre); margin: 1.6em 0 .5em; text-wrap: balance; }
.sv-texte h3 { font: var(--g-clash, 560) var(--fs-carte)/1.1 "Clash Grotesk", sans-serif; letter-spacing: -0.014em; color: var(--c-titre); margin: 1.4em 0 .4em; }
.sv-texte ul { padding-left: 1.1em; } .sv-texte li { margin: .3em 0; }
.sv-lien, .sv-texte a {
  color: var(--c-titre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--d-vif) var(--sv-ease-out);
}
.sv-lien:hover, .sv-texte a:hover { text-decoration-color: currentColor; }

/* -------------------------------------------------------------------------- 7. Cartes et photos
   Les composants du DS s'emploient tels quels : .verre .verre--carte, .verre--billet, .verre--pastille, .prix,
   .formules, .jauge, .curseur, .pastille. Ici, seulement leur mise en page dans une page qui défile. */
.sv-carte { padding: 34px 32px 30px; border-radius: var(--r-xl); display: flex; flex-direction: column; gap: 16px; }
.sv-carte > .t-carte { color: var(--c-titre); }
.sv-carte__pied { margin-top: auto; padding-top: 6px; }

/* La photo du lieu : coins continus, jamais voilée, jamais en noir et blanc (A8, C6). En flux (le DS la pose en absolu). */
.sv-photo { position: relative; overflow: hidden; border-radius: var(--r-xl); aspect-ratio: var(--ratio, 4 / 5); background: #2a2d55;
  box-shadow: 0 1px 2px rgb(var(--ombre-rgb, 44 40 60) / .10), 0 10px 26px rgb(var(--ombre-rgb, 44 40 60) / .18); }
.nuit .sv-photo { box-shadow: 0 0 0 1px rgb(255 244 222 / .22); }
.sv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
.sv-photo.arche { border-radius: 999px 999px var(--r-m) var(--r-m); }

/* La carte de verre qui chevauche le bas d'une photo de 40 à 60 px (B2) : la lentille courbe le mobilier. */
.sv-photo-carte { display: grid; }
.sv-photo-carte > .sv-photo { grid-area: 1 / 1; }
.sv-photo-carte > .verre { grid-area: 2 / 1; margin: -56px 20px 0; position: relative; }

/* Le billet dans une page : largeur bornée, encoches à la bonne hauteur */
.sv-billet { width: 100%; max-width: 420px; }
.sv-billet .verre--billet { --billet-coupe: var(--coupe, 62%); }
.billet--couche { --billet-coupe: var(--coupe-x, 118px); min-height: 200px; }
@media (max-width: 599px) {
  /* Sous 600 px, le billet couché garde sa forme, en plus serré. */
  .billet--couche .billet__souche { padding: 0 10px; }
  .billet--couche .billet__corps { padding: 16px 16px 16px 18px; }
  .billet--couche .ligne { flex-wrap: wrap; gap: 10px 18px; }
  .billet--couche .champ__v { white-space: normal; }
}

/* Les formules d'une carte : sur mobile étroit, la rangée de trois reste lisible (C5) */
@media (max-width: 420px) { .formules { --fs-prix-l: 32px; } }

/* -------------------------------------------------------------------------- 8. Faits et rail de trajet */
.sv-faits { display: grid; gap: 22px 28px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sv-fait { display: flex; flex-direction: column; gap: 6px; }
.sv-fait b { font: var(--g-clash, 560) var(--fs-prix-m)/1 "Clash Grotesk", sans-serif; letter-spacing: -0.03em; color: var(--c-accent); }
.sv-fait span { font: 520 var(--fs-etiquette)/1.3 "Switzer", sans-serif; color: var(--c-texte-2); }
.sv-rail { position: relative; height: 6px; border-radius: 999px; background: var(--c-rail);
  box-shadow: inset 0 .5px 1.2px rgb(var(--ombre-rgb, 44 40 60) / .22); margin: 22px 0 14px; }
.sv-rail::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--valeur, 100%); border-radius: inherit;
  background: linear-gradient(90deg, #F8C552, #F2A81D 60%, #EC8620); }
.sv-rail .goutte { position: absolute; left: var(--valeur, 100%); top: 50%; --goutte-w: 36px; --goutte-h: 24px;
  transform: translate(-100%, -50%); }

/* -------------------------------------------------------------------------- 9. Formulaires */
.sv-champ { display: flex; flex-direction: column; gap: 8px; }
.sv-champ label { font: 520 var(--fs-etiquette)/1.2 "Switzer", sans-serif; color: var(--c-texte-2); }
.sv-champ :is(input, select, textarea) {
  font: 450 16px/1.4 "Switzer", sans-serif; color: var(--c-texte); width: 100%;
  min-height: 48px; padding: 12px 16px; border: 0; border-radius: var(--r-s);
  background: rgb(255 255 255 / .72); box-shadow: inset 0 0 0 1px var(--c-filet), inset 0 1px 2px rgb(var(--ombre-rgb, 44 40 60) / .06);
  transition: box-shadow var(--d-vif) var(--sv-ease-out);
}
.nuit .sv-champ :is(input, select, textarea) { background: rgb(245 242 234 / .08); }
.sv-champ textarea { min-height: 128px; resize: vertical; }
.sv-champ :is(input, select, textarea):focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--c-titre); }
.sv-champ small { font: 520 var(--fs-mention)/1.3 "Switzer", sans-serif; color: var(--c-texte-3); }
.sv-formulaire { display: grid; gap: 18px; }
@media (min-width: 700px) { .sv-formulaire--deux { grid-template-columns: 1fr 1fr; } .sv-formulaire--deux > .sv-plein { grid-column: 1 / -1; } }

/* -------------------------------------------------------------------------- 10. Pied de page (nuit) */
.sv-pied { padding-block: 72px 40px; }
.sv-pied [data-mot-logo] { --cap: 18px; }
.sv-pied__grille { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sv-pied h2 { font: 520 var(--fs-etiquette)/1.2 "Switzer", sans-serif; color: var(--c-texte-2); margin: 0 0 12px; }
.sv-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-pied a { color: var(--c-texte); text-decoration: none; font-size: 15px; }
.sv-pied a:hover { text-decoration: underline; text-underline-offset: .22em; }
.sv-pied__bas { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--c-filet); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }

/* -------------------------------------------------------------------------- 11. Mouvement de l'interface
   « L'objet » du DS (glisse, se pose, se transforme), traduit pour une page : les éléments se posent quand ils
   entrent à l'écran. Aucun rebond, aucun lettre à lettre, aucun compteur qui part de 0, rien qui palpite. */
/* Masqué seulement quand sv-site.js tourne (classe sv-js sur <html>) : sans JavaScript, tout reste visible. */
.sv-js .sv-apparait:not(.est-pose) { opacity: 0; transform: translateY(18px); }
.sv-js .verre.sv-apparait:not(.est-pose) { transform: scale(.96); }                   /* la matière se condense (geste sePose) */
.sv-apparait.est-pose {
  opacity: 1; transform: none;
  transition: opacity var(--d-titre) var(--sv-ease-out), transform var(--d-titre) var(--sv-ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);                     /* cascade de 60 ms entre cartes et champs */
}
.verre.sv-apparait.est-pose { transition-duration: var(--d-surface); }
/* La photo se révèle du bas vers le haut (0,7 s) en passant de l'échelle 1,06 à 1. Le cadre reste visible pour
   l'observateur : la découpe va sur l'image, jamais sur l'élément observé. */
.sv-js .sv-photo.sv-apparait:not(.est-pose) { opacity: 1; transform: none; }
.sv-js .sv-photo.sv-apparait:not(.est-pose) img { clip-path: inset(100% 0 0 0); transform: scale(1.06); }
.sv-photo.sv-apparait.est-pose img { clip-path: inset(0); transform: scale(1);
  transition: clip-path .7s var(--sv-ease-in-out), transform 1.2s var(--sv-ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .sv-apparait, .sv-photo.sv-apparait img { opacity: 1; transform: none; clip-path: none; }
}

/* -------------------------------------------------------------------------- 12. Composants de page
   Repris par toutes les pages du site (accueil, offres...). Une seule définition ici, jamais recopiée dans une page. */

/* Bandeau d'information au-dessus de la barre */
.sv-bandeau { background: var(--sv-abysse); color: rgb(245 242 234 / .82); text-align: center; padding: 9px var(--gouttiere);
  font: 520 13px/1.3 "Switzer", sans-serif; letter-spacing: .004em; }
.sv-bandeau a { color: inherit; }

/* Barre flottante sous un bandeau : elle chevauche la première section puis reste en haut au défilement */
.sv-nav--flottante { position: sticky; left: auto; right: auto; margin: 12px var(--gouttiere) -84px; }
.sv-nav__droite { display: flex; align-items: center; gap: 8px; }
@media (max-width: 899px) { .sv-nav__droite > .bouton-or { display: none; } }
.bouton--rond { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
.bouton--rond svg { width: 18px; height: 18px; }
.fleche--ext { width: .9em; height: .9em; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* En-tête de section avec son lien à droite */
.sv-entete-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(32px, 4vw, 56px); }

/* Accès rapides : UNE surface de verre partagée en cases (jamais un verre par case) */
.sv-acces { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); padding: 6px; }
.sv-acces a { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; color: inherit; text-decoration: none;
  border-radius: calc(var(--r-xl) - 6px); transition: background-color var(--d-vif) var(--sv-ease-out); }
.sv-acces a + a { box-shadow: -1px 0 0 var(--c-filet); }
.sv-acces a:hover { background: var(--c-filet); }
.sv-acces b { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: var(--g-clash, 560) var(--fs-carte)/1.05 "Clash Grotesk", sans-serif; letter-spacing: -0.014em; color: var(--c-titre); }
.sv-acces span { font: 520 var(--fs-etiquette)/1.3 "Switzer", sans-serif; color: var(--c-texte-2); }
.sv-acces em { font-style: normal; font-weight: 620; color: var(--c-texte); }
.sv-acces .fleche { width: 18px; height: 18px; transition: transform var(--d-vif) var(--sv-ease-out); }
.sv-acces a:hover .fleche { transform: translateX(3px); }
@media (max-width: 899px) { .sv-acces { grid-template-columns: 1fr 1fr; } .sv-acces a:nth-child(odd) { box-shadow: none; } .sv-acces a:nth-child(n+3) { box-shadow: 0 -1px 0 var(--c-filet); } .sv-acces a:nth-child(even):nth-child(n+3) { box-shadow: -1px 0 0 var(--c-filet), 0 -1px 0 var(--c-filet); } }
@media (max-width: 520px) { .sv-acces { grid-template-columns: 1fr; } .sv-acces a { border-radius: 0; } .sv-acces a + a { box-shadow: 0 -1px 0 var(--c-filet) !important; } }

/* Bande de réassurance : des faits courts, côte à côte, sans verre */
.sv-reassurance { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.sv-reassurance li { display: flex; align-items: center; gap: 10px; font: 560 var(--fs-etiquette)/1.3 "Switzer", sans-serif; color: var(--c-texte-2); }

/* Liste à puces d'une offre (le point or désigne ce qui est compris) */
.sv-liste { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 9px; }
.sv-liste li { display: flex; gap: 11px; align-items: baseline; font: 450 15px/1.4 "Switzer", sans-serif; }
.sv-liste .point-or { transform: translateY(-1px); }

/* Questions fréquentes : <details> natif */
.sv-faq { display: grid; gap: 10px; max-width: 860px; }
.sv-faq details { border-radius: var(--r-l); background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px var(--c-filet); }
.nuit .sv-faq details { background: rgb(245 242 234 / .06); }
.sv-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font: var(--g-clash, 560) 19px/1.2 "Clash Grotesk", sans-serif; letter-spacing: -0.012em; color: var(--c-titre); }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: "+"; font: 400 24px/1 "Switzer", sans-serif; color: var(--c-texte-2); transition: transform var(--d-vif) var(--sv-ease-out); }
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq details p { margin: 0; padding: 0 22px 20px; font: 450 16px/1.55 "Switzer", sans-serif; color: var(--c-texte-2); max-width: 70ch; }

/* Sous-navigation des ancres d'une longue page (offres) : une capsule de verre qui reste sous la barre */
.sv-ancres { position: sticky; top: 84px; z-index: 30; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  width: max-content; max-width: 100%; margin: 0 auto; padding: 5px; border-radius: 999px; }
.sv-ancres::-webkit-scrollbar { display: none; }
.sv-ancres a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  font: 560 14px/1 "Switzer", sans-serif; color: var(--c-texte); text-decoration: none; transition: background-color var(--d-vif) var(--sv-ease-out); }
.sv-ancres a:hover { background: var(--c-filet); }
[id] { scroll-margin-top: 150px; }

/* Bouton flottant (WhatsApp) : une pastille de verre navy en bas à droite */
.sv-flottant { position: fixed; right: 18px; bottom: 18px; z-index: 40; text-decoration: none; height: 52px; padding: 0 20px 0 16px; }
.sv-flottant svg { width: 20px; height: 20px; fill: currentColor; }
.sv-flottant span { font: 600 14px/1 "Switzer", sans-serif; }
@media (max-width: 599px) { .sv-flottant span { display: none; } .sv-flottant { width: 52px; padding: 0; justify-content: center; } }

/* Étiquette de mise en avant (« Recommandé », « Le plus vendu ») : un aplat, posable dans un verre (jamais un verre sur un verre) */
.sv-badge { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
  background: rgb(44 53 135 / .08); color: var(--sv-navy); font: 600 13px/1 "Switzer", sans-serif; letter-spacing: -0.004em; }
.nuit .sv-badge:not(.verre *) { background: rgb(245 242 234 / .12); color: var(--sv-casse); }