/* ==========================================================================
   Sanstudio — feuille de styles
   Design : Figma « Sanstudio » (Site) + Guidelines
   ========================================================================== */

/* ---------- Polices ---------- */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PicNic"; src: url("../fonts/PicNic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Typefesse Claire-Obscure"; src: url("../fonts/Typefesse_Claire-Obscure.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* Couleurs du site */
  --dark: #19202e;   /* dark blue */
  --cream: #e9e9e9;  /* cream */
  --grey: #d7d8da;   /* grey */
  --white: #ffffff;
  --black: #000000;
  --yellow: #f1ff54; /* accent : survol des liens texte sur fond dark blue */
  --text-on-dark: #d7d8da; /* texte sur fond dark blue : contraste plus doux (11,4:1, AAA) */

  /* Lignes : 1px — #19202e 100% sur fond clair, #e9e9e9 70% sur fond sombre */
  --line-on-light: #19202e;
  --line-on-dark: rgba(233, 233, 233, 0.7);

  /* Typographies */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "PicNic", "Inter", Georgia, serif;
  --font-illustration: "Typefesse Claire-Obscure", "PicNic", serif;

  /* Mise en page */
  --gutter: 16px;
  --banner-h: 45px;          /* 44px + ligne 1px */
  --menu-top: 16px;          /* espace sous la bannière */
  --pill-h: 36px;
  --radius-pill: 26px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-wave: cubic-bezier(.37, 0, .63, 1); /* ease-in-out doux (sinusoïdal) */
  --marquee-duration: 48s;

  /* Vague de remplissage des pills et du bouton : motif d'ondulation répété verticalement,
     bord avant d'une nappe qui avance de gauche à droite */
  --wave-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='28' viewBox='0 0 9 28'%3E%3Cpath fill='%2319202e' d='M4.5 0C8.5 4.7 8.5 9.3 4.5 14S.5 23.3 4.5 28H0V0z'/%3E%3C/svg%3E");
  --wave-v-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='28' viewBox='0 0 9 28'%3E%3Cpath fill='%23e9e9e9' d='M4.5 0C8.5 4.7 8.5 9.3 4.5 14S.5 23.3 4.5 28H0V0z'/%3E%3C/svg%3E");

  /* Thème par défaut (fond clair) */
  --page-bg: var(--cream);
  --page-fg: var(--dark);
  --line: var(--line-on-light);
}

/* Thèmes de page */
.theme-light { --page-bg: var(--cream); --page-fg: var(--dark); --line: var(--line-on-light); }
.theme-grey  { --page-bg: var(--grey);  --page-fg: var(--dark); --line: var(--line-on-light); }
.theme-dark  { --page-bg: var(--dark);  --page-fg: var(--text-on-dark); --line: var(--line-on-dark); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Fond de toutes les pages : beige (#E9E9E9). C'est ce que les navigateurs mobiles affichent
   au-dessus de la bannière (barre d'état) et sous le footer (rebond, barre flottante de Safari).
   Seul le contenu (entre la bannière et le footer) prend la couleur de la page : gris ou dark blue. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cream); }
main.page { background: var(--page-bg); }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--cream);
  color: var(--page-fg);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

::selection { background: var(--page-fg); color: var(--page-bg); }

:focus-visible { outline: 2px solid var(--page-fg); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 8px;
  z-index: 100;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--dark);
  color: var(--cream);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px)); /* totalement hors écran tant qu'il n'a pas le focus */
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* Lien (guidelines : Inter medium 14, souligné) */
.link {
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Remplissage jaune de gauche à droite au survol (liens texte + questions de la FAQ) :
   même courbe et mêmes durées que les pills, bord légèrement en diagonale.
   Le texte est peint par un dégradé (moitié jaune / moitié couleur du texte) qui glisse. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .link,
  .faq__q-text {
    --fill-gradient: linear-gradient(100deg, var(--yellow) 0 47%, var(--page-fg) 53% 100%);
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    transition: background-position .4s var(--ease-wave);   /* le jaune repart vers la gauche */
  }
  /* Lien : une couche pour les lettres, une couche de 1px pour le soulignement */
  .link {
    text-decoration: none;
    background-image: var(--fill-gradient), var(--fill-gradient);
    background-size: 220% 100%, 220% 1px;
    background-position: 100% 0, 100% calc(100% - 1px);
    -webkit-background-clip: text, border-box;
    background-clip: text, border-box;
  }
  .faq__q-text {
    background-image: var(--fill-gradient);
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
  }
  @media (hover: hover) {
    .link:hover {
      background-position: 0 0, 0 calc(100% - 1px);
      transition-duration: .5s;                              /* le jaune balaie vers la droite */
    }
    .faq summary:hover .faq__q-text {
      background-position: 0 0;
      transition-duration: .5s;
    }
  }
}
/* Navigateurs sans « background-clip: text » : simple changement de couleur */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (hover: hover) {
    .link:hover { color: var(--yellow); }
  }
}

/* Texte centré optiquement (hauteur de capitale) dans les pills et boutons */
.pill__label,
.btn__label,
.lang__label {
  display: block;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

/* ==========================================================================
   Bannière « Sanstudio »
   ========================================================================== */
.banner {
  position: relative;
  display: block;
  flex: none;
  height: var(--banner-h);
  overflow: hidden;
  background: var(--cream);
  border-bottom: 1px solid var(--dark);
  color: var(--dark);
  text-decoration: none;
}
/* Défilement infini de droite à gauche (marquee) :
   la piste contient 2 groupes identiques et se décale de -50 %, ce qui boucle sans couture. */
.banner__track {
  position: absolute;
  top: 7px;
  left: 12px;
  display: flex;
  width: max-content;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 25px;
  white-space: nowrap;
  will-change: transform;
  animation: banner-marquee var(--marquee-duration) linear infinite;
}
.banner__group {
  display: flex;
  flex: none;
  gap: 12px;
  padding-right: 12px; /* même espacement entre les deux groupes */
}
.banner__group span {
  flex: none;
  width: 105px;
  height: 30px;
  text-align: center;
}
/* Au survol, le sens du défilement s'inverse (géré en JS : main.js › initMarquee) */

@keyframes banner-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Fondus gauche / droite (12px) : opacité 100 % contre le bord de la page,
   puis dégradé jusqu'à 0 % — le texte disparaît complètement au bord. */
.banner::before,
.banner::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  width: 12px;
  height: 100%;
  pointer-events: none;
}
.banner::before { left: 0;  background: linear-gradient(to right, var(--cream), rgba(233, 233, 233, 0)); }
.banner::after  { right: 0; background: linear-gradient(to left,  var(--cream), rgba(233, 233, 233, 0)); }
.banner:focus-visible { outline-offset: -4px; }

/* ==========================================================================
   Menu de navigation
   ========================================================================== */
.site-header {
  position: absolute;
  top: calc(var(--banner-h) + var(--menu-top));
  left: var(--gutter);
  right: var(--gutter);
  z-index: 20;
}
.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.menu__links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--pill-h);
  min-width: 86px;
  padding: 0 16px;
  border: 1px solid var(--dark);
  border-radius: var(--radius-pill);
  background-color: var(--cream);
  background-clip: padding-box; /* le fond crème ne passe pas sous le contour */
  color: var(--dark);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* le texte change de couleur quand la vague passe le milieu de la pill */
  transition: color .3s ease-in-out .18s, border-color .4s ease-in-out, background-color .2s ease-in-out;
}

/* Remplissage « vague » au survol (pills du menu + bouton principal) :
   une nappe balaie la pill de la gauche vers la droite ; son bord avant
   est légèrement en diagonale (skew) et ondule doucement.
   Pills : vague dark blue sur fond crème. Bouton : vague crème sur fond dark blue. */
.pill { --wave-img: var(--wave-v); --wave-fill: var(--dark); }
.pill::before,
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -4px;
  bottom: -4px;
  left: -20px;
  width: calc(100% + 40px);   /* marge pour la diagonale et l'ondulation */
  background:
    var(--wave-img) repeat-y 100% 0 / 9px 28px,
    linear-gradient(var(--wave-fill), var(--wave-fill)) no-repeat 0 0 / calc(100% - 8px) 100%;
  transform: translate3d(-100%, 0, 0) skewX(-18deg);
  transition: transform .8s var(--ease-wave);          /* la nappe repart vers la gauche */
  animation: pill-wave 1.6s linear infinite paused;    /* ondulation lente et continue du bord */
  pointer-events: none;
}
@keyframes pill-wave {
  to { background-position: 100% 28px, 0 0; }
}

@media (hover: hover) {
  /* Une fois la nappe arrivée, le fond passe lui aussi à la couleur de remplissage :
     plus aucun liseré entre le remplissage et le contour. */
  .pill:hover {
    color: var(--cream);
    background-color: var(--dark);
    transition: color .3s ease-in-out .4s, border-color .4s ease-in-out .3s, background-color .2s ease-in-out .82s;
  }
  .pill:hover::before,
  .btn:hover::before {
    transform: translate3d(0, 0, 0) skewX(-18deg);
    transition: transform 1s var(--ease-wave);         /* la nappe balaie vers la droite */
    animation-play-state: running;
  }
  .btn:hover {
    color: var(--dark);
    background-color: var(--cream);
    transition: color .3s ease-in-out .4s, background-color .2s ease-in-out .82s;
  }
  .theme-dark .pill:hover { border-color: var(--cream); }
}

/* Pill sélectionnée */
.pill[aria-current="page"] {
  background-color: var(--dark);
  color: var(--cream);
  border-color: var(--dark);
}
.pill[aria-current="page"]::before { display: none; }
.theme-dark .pill[aria-current="page"] { border-color: var(--cream); }

/* Pills à icône (maison, langue) */
.pill--icon { min-width: 56px; }

/* ---------- Pill « maison » (accueil) — toujours affichée ---------- */
.pill--home .house {
  display: block;
  flex: none;
  width: 19px;
  height: 18px;
}

/* ---------- Sélecteur de langue ---------- */
.lang { position: relative; flex: none; }

.pill--lang { padding: 0 14px 0 16px; }
.pill--lang .chevron {
  flex: none;
  width: 8px;
  height: 5px;
  transition: transform .25s var(--ease);
}
.lang.is-open .pill--lang {
  color: var(--cream);
  background-color: var(--dark);
  transition: color .3s ease-in-out .4s, border-color .4s ease-in-out .3s, background-color .2s ease-in-out .82s;
}
.lang.is-open .pill--lang::before {
  transform: translate3d(0, 0, 0) skewX(-18deg);
  transition: transform 1s var(--ease-wave);
  animation-play-state: running;
}
.theme-dark .lang.is-open .pill--lang { border-color: var(--cream); }
.lang.is-open .chevron { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--dark);
  border-radius: 22px;
  background: var(--cream);
  color: var(--dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transform-origin: top right;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.lang.is-open .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.lang__option {
  display: flex;
  align-items: center;
  width: 100%;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--dark);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.lang__option:hover,
.lang__option:focus-visible { background: var(--grey); outline: none; }
.lang__option[aria-checked="true"] { background: var(--dark); color: var(--cream); }
.lang__option[aria-checked="true"]:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

/* ==========================================================================
   Footer — toujours sous la ligne de flottaison (voir .page)
   ========================================================================== */
.site-footer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 20px var(--gutter);
  border-top: 1px solid var(--line);
  font-weight: 400;
  font-size: 14px;
  line-height: 15px;
  color: var(--page-fg);
  background: transparent;
}
.theme-light .site-footer,
.theme-grey .site-footer { background: var(--cream); color: var(--dark); border-top-color: var(--line-on-light); }

.site-footer__copy { white-space: nowrap; }
/* Signe © d'Inter : même taille et même alignement que le texte du footer */
.copy-sign { font-weight: 400; }
.site-footer__links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-footer__links a {
  font-weight: 500; /* Inter Medium */
  text-decoration: none;
  white-space: nowrap;
  text-underline-offset: 3px;
}
.site-footer__links a:hover,
.site-footer__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; }

/* ==========================================================================
   Pages
   Chaque page occupe au moins un écran sous la bannière : le footer
   n'apparaît donc qu'au défilement.
   ========================================================================== */
.page {
  flex: 1 0 auto;
  width: 100%;
  min-height: calc(100vh - var(--banner-h));
  min-height: calc(100svh - var(--banner-h));
  padding: 122px var(--gutter) 160px;
}

/* H1 (guidelines : PicNic 36) */
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  text-align: center;
}

/* ---------- Accueil ---------- */
.page--home {
  position: relative;
  display: flex;
  padding: 0;
  overflow: hidden;
}
/* Vidéo d'accueil : plein cadre, recadrée au centre (sans son, en boucle) */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--dark);
}

.wa-card {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: auto;
  min-width: 301px;  /* largeur de la maquette ; la carte s'élargit si le titre est plus long */
  padding: 16px;
  border: 1px solid var(--dark);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--dark);
  text-align: center;
}
.wa-card .btn { max-width: none; }
.wa-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wa-card__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 25px;
  white-space: nowrap;   /* le titre tient sur une ligne */
}
.wa-card__subtitle {
  font-weight: 300;
  font-size: 14px;
  line-height: 25px;
  color: var(--black);
}

/* Bouton principal — même effet de vague que les pills, couleurs inversées */
.btn {
  --wave-img: var(--wave-v-cream);
  --wave-fill: var(--cream);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 267px;
  height: 40px;
  padding: 0 24px;
  border: 1px solid var(--dark);
  border-radius: var(--radius-pill);
  background-color: var(--dark);
  background-clip: padding-box;
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s ease-in-out .18s, background-color .2s ease-in-out;
}
.btn:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

/* ---------- À propos ---------- */
.about {
  max-width: 550px;
  margin: 33px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about__lead { font-weight: 500; }
/* Illustration « a » (Typefesse Claire-Obscure) — même position que la maquette ;
   la boîte épouse le glyphe pour que le survol ne concerne que le dessin. */
.about__illustration {
  display: block;
  width: fit-content;
  margin: 17.5px auto -9.5px;
  font-family: var(--font-illustration);
  font-size: 108px;
  line-height: 1;
  text-align: center;
  color: var(--dark);
  user-select: none;
  transform-origin: 48.1% 54.9%;   /* centre visuel du glyphe */
  transition: transform .7s cubic-bezier(.34, 1.45, .64, 1);
}
/* Au survol : rotation de 70°, avec un léger rebond */
@media (hover: hover) {
  .about__illustration:hover { transform: rotate(70deg); }
}

/* Carte WhatsApp de la page À propos
   - Grand écran : elle reste en bas à droite pendant la lecture, puis se pose 16px au-dessus du footer.
   - Écrans plus étroits (elle masquerait le texte) et mobile : elle reste dans le flux, en fin de page. */
.page.page--about {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--gutter);
}
.about__wa {
  margin-top: auto;
  padding-top: 56px;
  display: flex;
  justify-content: flex-end;
}
.about__wa .wa-card { position: static; }
@media (min-width: 1280px) {
  .about__wa {
    position: sticky;
    bottom: var(--gutter);
    z-index: 2;
    padding-top: 144px;          /* 160px sous l'illustration, comme avant */
    pointer-events: none;        /* la zone vide ne bloque pas le texte dessous */
  }
  .about__wa .wa-card {
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: auto;
  }
}
@media (max-width: 720px) {
  .about__wa .wa-card { flex: 1 1 auto; }
}

/* ---------- FAQ : accordéon (details / summary) ---------- */
.faq {
  max-width: 500px;
  margin: 14px auto 0;
}
.faq details { position: relative; }
/* Ligne de séparation dessinée en pseudo-élément (net pendant l'animation) */
.faq details::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform-origin: bottom;
  pointer-events: none;
}
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 23px 0;
  color: var(--page-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: 4px; border-radius: 4px; }
.faq__q-text {
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
}
/* Survol d'une question : le texte se remplit de jaune (voir .link), puis le « + / – » passe en jaune */
.faq summary { transition: color .3s ease-in-out; }
@media (hover: hover) {
  .faq summary:hover { color: var(--yellow); transition: color .2s ease-in-out .3s; }
}

/* « + » dessiné en deux traits : à l'ouverture, le trait vertical pivote et se couche → « – » */
.faq__icon {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 4px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -.75px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.faq__icon::after { transform: rotate(90deg); }
.faq details.is-open .faq__icon::after { transform: rotate(0deg); }

/* Le contenu s'ouvre et se referme en douceur (hauteur + fondu), animé en JS au pixel près */
.faq__a { overflow: hidden; }
.faq__a-body {
  padding-bottom: 28px;
  font-weight: 300;
  font-size: 14px;
  line-height: 25px;
}
.faq__a-body .link {
  display: inline-block;
  margin-top: 4px;
}

/* ---------- Contact ---------- */
.contact {
  margin-top: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  line-height: 23px;
}
.contact .link { line-height: 23px; }

/* ---------- Lignes fines (0,5px) sur fond dark blue : accordéon FAQ et footer ---------- */
.theme-dark .faq details::after { transform: scaleY(.5); }  /* 0,5px */
.theme-dark .site-footer { border-top-width: .5px; background: var(--dark); }

/* ---------- Page 404 : même mise en page que Contact (.contact) ---------- */

/* ---------- Mentions légales / CGV ---------- */
.page--legal { padding-top: 145px; }
.legal {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 500px;
  margin-left: clamp(0px, calc(11.25vw - 16px), 146px); /* 162px à 1440px */
}
.legal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 36px;
}
.legal__section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* H2 (guidelines : Inter semi bold 16) */
.legal__section h2 {
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
}
.legal__body > * + * { margin-top: 25px; }
.legal__body > * + .legal__list { margin-top: 4px; } /* liste annoncée par « : » */
.legal__body strong { font-weight: 500; }
.legal__list ul {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.legal__list li::marker { color: currentColor; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  /* Page un peu plus haute que l'écran : les barres flottantes du mobile
     ne laissent jamais apparaître le footer trop tôt. */
  .page {
    min-height: calc(100vh - var(--banner-h) + 64px + env(safe-area-inset-bottom, 0px));
    min-height: calc(100lvh - var(--banner-h) + 64px + env(safe-area-inset-bottom, 0px));
  }
  /* La carte Whatsapp reste ancrée en bas de la zone visible */
  .wa-card {
    bottom: calc(var(--gutter) + 64px + env(safe-area-inset-bottom, 0px));
    bottom: calc(var(--gutter) + 64px + env(safe-area-inset-bottom, 0px) + 100lvh - 100svh);
  }
  /* Safari iOS 26+ : la zone visible s'arrête déjà 16px au-dessus de la barre flottante,
     on ne rajoute donc pas de marge : 16px entre la carte et la barre, comme sur les côtés */
  .ios-floating-bar .wa-card {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 100lvh - 100svh);
  }
}

@media (max-width: 720px) {
  .page { padding-top: 112px; padding-bottom: 96px; }
  .page--home { padding: 0; }
  .page--legal { padding-top: 120px; }
  .legal { margin-left: 0; }
  .page-title { font-size: 32px; line-height: 36px; }
  .about { margin-top: 28px; }
  .contact { margin-top: 32px; }

  .wa-card {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    min-width: 0;
  }
  .wa-card__title { white-space: normal; }
  .btn { max-width: none; }

  /* Footer centré sur deux lignes */
  .site-footer {
    justify-content: center;
    text-align: center;
    gap: 12px 16px;
  }

  /* « + / – » de la FAQ calé sur le bord droit du menu */
  .faq__icon { margin-right: 0; }
}

/* Marges latérales de 16px conservées sur mobile (contenu, menu, footer) :
   les pills se resserrent pour que le menu tienne sur une ligne dès 360px. */
@media (max-width: 440px) {
  .menu { gap: 6px; }
  .menu__links { gap: 5px; }
  .pill { min-width: 0; padding: 0 11px; }
  .pill--icon { min-width: 44px; }
  .pill--lang { min-width: 50px; padding: 0 10px 0 12px; }
}
@media (max-width: 380px) {
  .pill { padding: 0 10px; }
  .pill--icon { min-width: 42px; }
  .pill--lang { min-width: 48px; padding: 0 9px 0 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .banner__track,
  .pill::before,
  .btn::before { animation: none; }
}