/* Custom fixes on top of the Webflow export.
   Fix: on narrow viewports the mouse-parallax interaction on the homepage
   hero (.about-banner-content-area) can leave a leftover horizontal
   transform (from a stale/default cursor position on touch devices),
   pushing the heading and paragraph text off-screen so it looks clipped
   or overlapping the hero image. Neutralizing the transform below 768px
   removes the glitch without touching desktop behaviour. */
@media (max-width: 767px) {
  .about-banner-content-area {
    transform: none !important;
  }
}

/* Fix: on the "Soins et beauté" and "Yoga et Pilates" pages, the class
   cards (.class-image-wrap) reserve a min-height box for the photo, but
   the photo itself (.class-image-link > .class-image) was never
   constrained to that box — it rendered at its full natural aspect-ratio
   height instead, so tall portrait photos overflowed past the bottom of
   their box and spilled over the caption text below (the "élements qui
   se superposent" issue). This bug also exists on the live Webflow site.
   Fix: make the image absolutely fill its .class-image-wrap box and crop
   with object-fit, like the box's min-height clearly intended. */
.class-image-wrap {
  overflow: hidden;
}

.class-image-wrap .class-image-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.class-image-wrap .class-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Les résidents" page: the team collection used to be rendered as two
   separate .team-list-wrap containers (left column / right column,
   "team-two"), each its own vertical stack of members in CMS order.
   Round 16 (2nd pass): an earlier fix here flattened both wraps with
   display:contents and re-laid the cards out as a row-by-row 2-column
   CSS grid — that only worked while the team had exactly 4 members split
   2-and-2. When the team grew to 6 (3-and-3 across the two wraps),
   row-by-row flattening scrambled the pairing, so the fix at the time
   switched to keeping each .team-list-wrap as its own real column
   instead.
   Round 36sexies: two team members were removed (Marie put on standby,
   Vanessa gone), leaving the two hardcoded columns very unevenly split
   (3 in the first wrap, 1 in the second) — the two-column layout made
   the page look broken (a tall column of 3 next to a single card with a
   big empty gap below it), which is exactly the failure mode the round-16
   note warned never fully went away, just moved. The two-column split was
   never a meaningful grouping (no category difference between the two
   halves), it was just how the original Webflow CMS list happened to be
   paginated — so the real, size-proof fix is not to preserve two fixed
   columns at all: the equipe/index.html markup was flattened to a single
   list (all 4 team-item cards now live under one .w-dyn-items, in their
   natural order), and this becomes a genuine 2-per-row wrapping grid that
   self-adjusts to however many members exist, always pairing 2 per row
   when possible instead of assuming any fixed split. */
.team-list-area .team-list-wrap {
  /* The base theme caps .team-list-wrap at max-width:50% because it used
     to be one of two side-by-side columns — now there's only one wrap
     left in the DOM (see note above), so let it use the full row. */
  max-width: 100%;
}

.team-list-area .team-list-wrap .w-dyn-items {
  display: flex;
  flex-wrap: wrap;
  column-gap: 80px;
  row-gap: 60px;
}

.team-list-area .team-list-wrap .team-item {
  flex: 1 1 calc(50% - 40px);
  max-width: calc(50% - 40px);
}

@media (max-width: 767px) {
  .team-list-area .team-list-wrap .w-dyn-items {
    flex-direction: column;
  }

  .team-list-area .team-list-wrap .team-item {
    max-width: 100%;
    flex-basis: auto;
  }
}

/* ---------------------------------------------------------------
   Bandeau de gestion des cookies (RGPD)
   --------------------------------------------------------------- */
.nanna-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100%;
  z-index: 9999;
  /* Round 15 : le marron d'origine ne fait pas partie de la palette du
     site — remplacé par le bleu marine (--_nds---space-cadet), déjà
     utilisé ailleurs pour du texte/des accents. */
  background: #17183b;
  color: #f7f1e6;
  padding: 22px 24px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  transition: bottom 0.35s ease;
  font-family: var(--font--body, Nunito, sans-serif);
}

.nanna-cookie-banner.is-visible {
  bottom: 0;
}

.nanna-cookie-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.nanna-cookie-text {
  margin: 0;
  flex: 1 1 420px;
  font-size: 14px;
  line-height: 1.6;
}

.nanna-cookie-text a {
  color: #e9bc62;
  text-decoration: underline;
}

.nanna-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}

.nanna-cookie-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.nanna-cookie-btn-solid {
  background: #ee730c;
  color: #fff;
  border-color: #ee730c;
}

.nanna-cookie-btn-ghost {
  background: transparent;
  color: #f7f1e6;
  border-color: rgba(247, 241, 230, 0.4);
}

.nanna-cookie-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(23, 24, 59, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.nanna-cookie-modal-overlay.is-visible {
  display: flex;
}

.nanna-cookie-modal {
  background: #fff;
  color: #2b2420;
  max-width: 480px;
  width: 100%;
  border-radius: 16px;
  padding: 28px;
  font-family: var(--font--body, Nunito, sans-serif);
}

.nanna-cookie-modal h3 {
  margin: 0 0 18px;
  font-family: var(--font--heading, Italiana, serif);
  font-size: 22px;
}

.nanna-cookie-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #eee;
}

.nanna-cookie-row p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6a6058;
  line-height: 1.5;
}

.nanna-cookie-toggle-locked {
  font-size: 12px;
  font-weight: 700;
  color: #8a8078;
  white-space: nowrap;
  padding-top: 2px;
}

.nanna-cookie-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}

.nanna-cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.nanna-cookie-switch span {
  position: absolute;
  inset: 0;
  background: #ddd4c8;
  border-radius: 999px;
  transition: background 0.2s;
}

.nanna-cookie-switch span:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.nanna-cookie-switch input:checked + span {
  background: #ee730c;
}

.nanna-cookie-switch input:checked + span:before {
  transform: translateX(18px);
}

.nanna-cookie-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 600px) {
  /* Round 23 : le bandeau prenait plus de la moitié de l'écran sur
     téléphone (padding/police/gaps pensés pour desktop, jamais adaptés
     au mobile) — l'utilisateur l'a signalé avec une capture montrant le
     bandeau qui recouvrait quasiment toute la moitié basse de l'écran,
     ne laissant que très peu de place au contenu de la page derrière.
     Resserré spécifiquement en dessous de 600px : padding du bandeau,
     texte et boutons plus compacts, tout en gardant les 3 actions sur
     une seule ligne (pas d'empilement qui aurait ajouté de la hauteur). */
  .nanna-cookie-banner {
    padding: 14px 16px;
  }

  .nanna-cookie-inner {
    gap: 10px;
  }

  .nanna-cookie-text {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .nanna-cookie-actions {
    justify-content: stretch;
    gap: 8px;
  }

  .nanna-cookie-btn {
    flex: 1 1 auto;
    padding: 9px 8px;
    font-size: 12.5px;
    white-space: normal;
  }
}

/* ---------------------------------------------------------------
   Pages légales (Mentions légales / Politique de confidentialité)
   --------------------------------------------------------------- */
.nanna-legal-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 90px 20px 120px;
}

.nanna-legal-content h2 {
  font-family: var(--font--heading, Italiana, serif);
  font-size: 28px;
  margin-top: 46px;
  margin-bottom: 14px;
}

.nanna-legal-content h2:first-child {
  margin-top: 0;
}

.nanna-legal-content h3 {
  font-size: 19px;
  margin-top: 30px;
  margin-bottom: 10px;
}

.nanna-legal-content p,
.nanna-legal-content li {
  font-size: 15px;
  line-height: 1.7;
  color: #4a453f;
}

.nanna-legal-content ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.nanna-legal-content a {
  color: #de7c34;
}

.nanna-legal-content .nanna-legal-updated {
  color: #8a8078;
  font-size: 13px;
  margin-bottom: 30px;
}

.nanna-legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 26px;
  font-size: 14px;
}

.nanna-legal-content table th,
.nanna-legal-content table td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid #eee0d2;
  vertical-align: top;
}

.nanna-legal-content table th {
  background: #faf5ec;
}

/* Case à cocher de consentement RGPD sur le formulaire de contact.
   Round 31 fix : le texte + le lien "politique de confidentialité" sont
   désormais regroupés dans un <span class="nanna-consent-text"> unique.
   Avant ce fix, le label était en display:flex avec le texte ET le lien
   comme enfants directs — en flexbox, CHAQUE enfant (y compris un nœud de
   texte, qui devient un item flex anonyme) est un item flex séparé, donc
   le texte, le lien et le "." final se retrouvaient chacun dans leur
   propre boîte flex, d'où le lien qui semblait "flotter" isolé et le
   point qui atterrissait seul sur sa ligne. En les regroupant dans un seul
   span, le label garde 2 items flex (case + texte) et le texte s'écoule
   normalement en flux inline à l'intérieur de son propre span. */
.nanna-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #4a453f;
  margin: 18px 0;
  cursor: pointer;
}

.nanna-consent-check input {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.nanna-consent-text {
  flex: 1 1 auto;
}

.nanna-consent-check a {
  color: #de7c34;
  text-decoration: underline;
}

/* Round 37 (page EVJF) - liste/étapes en prose dans .contact-content-wrap,
   même typo que .section-content pour rester cohérent visuellement avec le
   reste de la section, juste avec des puces/numéros lisibles. */
.nanna-plain-list {
  color: var(--_nds---shadow-gray);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  padding-left: 22px;
}

.nanna-plain-list li {
  margin-bottom: 10px;
}

.nanna-plain-list li:last-child {
  margin-bottom: 0;
}

.nanna-steps-list {
  list-style: decimal;
}

/* Fil d'Ariane (breadcrumbs) - added for internal linking / SEO */
.breadcrumb-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 13px;
}
.breadcrumb-link {
  color: #525b76;
  text-decoration: none;
}
.breadcrumb-link:hover {
  color: #ee730c;
  text-decoration: underline;
}
.breadcrumb-sep {
  color: #525b76;
  opacity: 0.5;
}
.breadcrumb-current {
  /* Was the same orange (#ee730c) as the default hero background used on
     several pages (studio-yoga-pilates, institut, blog...), making the
     current-page breadcrumb text invisible there. Dark navy keeps good
     contrast against every hero color used site-wide (orange, pink, cream). */
  color: #17183b;
  font-weight: 600;
}

/* "Découvrez aussi" internal linking block on prestation pages */
.related-links-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.related-links-title {
  width: 100%;
  font-size: 14px;
  color: #525b76;
  margin-bottom: 4px;
}
.related-link-item {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 20px;
  background: #e9bc62;
  color: #17183b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.related-link-item:hover {
  background: #ee730c;
  color: #f9faef;
}

/* Fix: the site's own .nav-dropdown class carries `display: none` from
   the original (unused/dead) template "Pages" dropdown, which nobody
   noticed because that dropdown was low-value. We repurpose the same
   dropdown component for the real "Soins et beauté" / "Yoga et Pilates"
   submenus, so it needs to actually render inline like the other nav
   links instead of staying hidden. */
.nav-dropdown {
  display: inline-flex !important;
  align-items: center;
}

/* Fix: Webflow's dropdown widget initialized its position math while
   .nav-dropdown was still display:none (the original hidden "Pages"
   menu), so it baked a bogus negative top offset into an inline style
   on .w-dropdown-list, making the open panel float above/behind the nav
   bar instead of right below the toggle. Force the correct position. */
.nav-dropdown-list {
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* Round 46bis : le "mega menu" du round 46 avait deux défauts remontés par
   l'utilisateur — (1) il ne touchait que le mobile (< 992px) alors que la
   demande visait surtout le rendu desktop, sur le modèle d'un vrai mega
   menu plein largeur façon O.K.R (bandeau clair pleine largeur sous le nav,
   liens en majuscules espacées, pas de cartes colorées) ; (2) sur mobile,
   `display: grid !important` sur `.nav-dropdown-list` ignorait l'état
   `.w--open` de Webflow et affichait les DEUX sections ("Soins et beauté"
   ET "Yoga et Pilates") grandes ouvertes en permanence dès qu'on ouvrait le
   hamburger, au lieu d'un accordéon où on ouvre la section qu'on veut. Ce
   bloc remplace entièrement l'ancien : un vrai accordéon repliable sur
   mobile, un vrai bandeau plein largeur au survol sur desktop, avec un même
   style de liste sobre (texte capitales espacées, pas de pastilles) sur les
   deux. */

/* Mobile (< 992px) : accordéon. On laisse Webflow gérer l'ouverture/la
   fermeture via `.w--open` (clic sur le libellé de section) — on ne fait
   que restyler le contenu, sans jamais forcer son affichage permanent. */
@media screen and (max-width: 991px) {
  /* Le panneau du menu mobile glisse en place via un `transform` posé en
     ligne par le script d'ouverture/fermeture de Webflow, calculé à partir
     de la hauteur du panneau au moment du clic sur le hamburger. Si cette
     hauteur mesurée devient fausse après coup (contenu qui change de
     taille), le panneau peut rester figé hors-écran. `data-nav-menu-open`
     est l'attribut posé par Webflow sur le panneau pendant qu'il est
     ouvert — on y neutralise son transform en `!important` (qui l'emporte
     sur le style en ligne) plutôt que de laisser son calcul de hauteur
     décider de la position. */
  .nav-menu-area[data-nav-menu-open] {
    transform: none !important;
  }

  .nav-dropdown {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(23, 24, 59, 0.1);
  }

  /* Le libellé de section ("Soins et beauté"/"Yoga et Pilates") reste le
     déclencheur tapable de l'accordéon (comportement Webflow standard,
     inchangé) — on ne touche qu'à sa typo pour l'aligner avec le reste. */
  .nav-dropdown .w-dropdown-toggle {
    font-weight: 600;
  }

  /* La liste reste cachée par défaut (règle Webflow globale
     `.w-dropdown-list { display: none }`) — on ne restyle que l'état
     ouvert, jamais l'affichage par défaut, pour que l'accordéon reste un
     vrai accordéon (une section à la fois). Sur mobile, le dropdown est
     imbriqué dans le menu hamburger (`.w-nav-menu`) : Webflow y gère
     l'ouverture au clic avec un jeu de classes différent de celui du
     survol desktop standard — `w--nav-dropdown-open` sur `.nav-dropdown`
     et `w--nav-dropdown-list-open` sur `.nav-dropdown-list` (confirmé en
     inspectant les classes réellement posées après un tap), pas `.w--open`
     comme sur desktop. */
  .nav-dropdown-list.w--nav-dropdown-list-open {
    position: static !important;
    width: auto;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
  }

  .nav-dropdown-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 4px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--_nds---shadow-gray);
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .nav-dropdown-link:hover,
  .nav-dropdown-link.w--current {
    color: var(--_nds---mandarine);
  }

  /* Premier lien de chaque section ("Toutes nos prestations"/"Tous nos
     cours") : légèrement distingué (plus sombre, plus gras) comme lien
     "voir tout", sans pastille ni bloc de couleur. */
  .nav-dropdown-link:first-child {
    color: var(--_nds---space-cadet);
    font-weight: 700;
  }

  /* The base site CSS centers nav link text (`.nav-menu-link { text-align:
     center }`), invisible on desktop where pills hug their text, but on
     mobile the "current page" pill (.w--current, cream background) and
     the dropdown toggles need to line up with the plain links above/below
     them, all flush left. */
  .nav-menu-link,
  .nav-dropdown .w-dropdown-toggle {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  /* Round 46ter : l'utilisateur remonte (captures d'écran) que le bouton
     "Contact" et le numéro de téléphone apparaissent centrés dans le menu
     mobile. Deux causes distinctes, aucune liée aux règles ci-dessus :

     1) Webflow bascule `.nav-menu-area` (le panneau du menu) en
        `display: block !important` dès qu'il porte l'attribut
        `[data-nav-menu-open]` (règle générique du thème, pas un fix
        custom) — le panneau n'est donc plus un conteneur flex pendant
        qu'il est ouvert, et son `text-align: center` (même règle
        générique) s'applique alors directement à tout descendant en
        boîte inline (comme `.nav-phone-link`, qui est `inline-flex`).
        Les liens `.nav-dropdown-link`/`.nav-menu-link` y échappent
        seulement parce qu'ils ont chacun leur propre `text-align: left`
        explicite ci-dessus, qui gagne toujours sur une valeur héritée. */
  .nav-menu-area {
    text-align: left;
  }

  /* 2) `.primary-button.large` (classe du bouton Contact) porte
        `margin-left/right: auto` dans le thème de base — pensé pour un
        CTA isolé qu'on centre dans son propre bloc, comme le "Devenir
        résident.e" déjà neutralisé plus bas pour la même raison. Ici le
        bouton est un item flex de `.nav-menu-button-wrap` : ces marges
        auto absorbent l'espace disponible et le centrent, quel que soit
        le `justify-content` du conteneur. On les retire dans ce contexte
        précis (bouton Contact du menu mobile) sans toucher aux ~25
        autres usages du bouton ailleurs sur le site. */
  .nav-menu-button-wrap .primary-button.large {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Desktop (>= 992px) : vrai mega menu plein largeur. Le survol de
   "Soins et beauté"/"Yoga et Pilates" (comportement `data-hover="true"`
   déjà géré par le script Webflow, inchangé) ouvre un bandeau clair qui
   déborde toute la largeur de l'écran sous le bandeau de nav, plutôt que
   la petite carte blanche arrondie flottante par défaut de Webflow.
   `.navbar-area` (le conteneur `.w-nav` racine, déjà pleine largeur) sert
   de repère de positionnement uniquement pour desktop — on ne touche pas
   à sa position sur mobile, où le panneau du menu se positionne
   différemment (voir bloc ci-dessus). */
@media screen and (min-width: 992px) {
  .navbar-area {
    position: relative;
  }

  /* `.nav-dropdown` (le conteneur `.w-dropdown` de chaque item de nav)
     est lui-même `position: relative` par défaut (règle Webflow globale,
     aussi utilisée par l'accordéon FAQ de /contact — on ne la touche donc
     que sur `.nav-dropdown`, jamais sur `.w-dropdown` en général). Tant
     qu'il reste "relative", le navigateur positionne `.nav-dropdown-list`
     par rapport à LUI (le petit bouton "Soins et beauté"), pas par rapport
     à `.navbar-area` : on obtient une carte étroite alignée sous le bouton
     au lieu d'un bandeau pleine largeur. En le repassant "static" ici,
     l'ancêtre positionné le plus proche redevient `.navbar-area`. */
  .nav-dropdown {
    position: static;
  }

  /* Scopé à `.w--open` uniquement (l'état que le script hover de Webflow
     bascule) : sans ça, restyler `.nav-dropdown-list` tout court écrase la
     règle Webflow globale `display: none` par défaut et affiche les DEUX
     bandeaux ("Soins et beauté" et "Yoga et Pilates") en permanence côte à
     côte, peu importe lequel est survolé — même piège que celui corrigé
     sur mobile ci-dessus. */
  /* Round 46ter : l'utilisateur demande d'appliquer la charte graphique
     du site au bandeau desktop (ex. donné : "rounded corner"), qui
     partait sur des angles droits (`border-radius: 0`) façon barre
     administrative. Le site arrondit systématiquement ses éléments
     "conteneur" (boutons pilule 40-70px, cartes 12-20px) — on reprend ce
     langage ici.

     Round 46quater : l'utilisateur demande d'arrondir aussi les deux
     angles du HAUT (round 46ter n'avait arrondi que le bas). Comme le
     bandeau démarre pile au ras du bas de la nav (`top: 100%`), arrondir
     le haut sans rien d'autre aurait laissé deux petits triangles crème
     qui dépassent du bord droit de la nav (l'angle carré de la nav vs
     l'angle arrondi du bandeau juste en dessous) — `margin-top` ajouté
     pour détacher légèrement le bandeau de la nav, ce qui rend la courbe
     du haut lisible plutôt que coupée. */
  .nav-dropdown-list.w--open {
    right: 0 !important;
    margin-top: 6px !important;
    background-color: var(--_nds---cream);
    border-radius: 28px;
    padding: 26px 24px 30px;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 40px;
    box-shadow: 0 20px 32px rgba(23, 24, 59, 0.1);
    border-bottom: 1px solid rgba(23, 24, 59, 0.06);
    z-index: 10;
  }

  /* Round 46quater : "il faut aller vite" pour attraper un lien du sous-
     menu, sinon il se referme. Cause : entre le bas du bouton "Soins et
     beauté"/"Yoga et Pilates" dans la nav et le haut du bandeau (qui
     démarre au ras du bas de `.navbar-area`, pas du bouton lui-même), il
     y a une bande morte d'environ 50px (le padding vertical de la nav)
     qui n'appartient à AUCUN des deux éléments — le survol de Webflow
     (`data-hover`/`data-delay="300"`) considère alors qu'on a quitté le
     menu dès qu'on traverse cette bande, et referme le bandeau avant
     qu'on ait pu atteindre un lien, à moins d'aller très vite. Corrigé
     sans toucher au script Webflow : un pseudo-élément invisible,
     enfant du bandeau lui-même (donc toujours "dans" le survol tant
     qu'on reste dessus), comble cette bande morte juste au-dessus de
     lui. */
  .nav-dropdown-list.w--open::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 60px;
  }

  .nav-dropdown-link {
    padding: 2px 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--_nds---shadow-gray);
    white-space: nowrap;
    transition: color 0.15s ease;
  }

  .nav-dropdown-link:hover,
  .nav-dropdown-link.w--current {
    color: var(--_nds---mandarine);
  }

  .nav-dropdown-link:first-child {
    color: var(--_nds---space-cadet);
    font-weight: 700;
  }
}

/* "Réserver" outline button on prestation cards (Soins et beauté / Yoga
   et Pilates overview pages) - makes it explicit you can click through
   to book, instead of relying on the card title/image being clickable. */
.book-outline-button {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 26px;
  background-color: #f9faef;
  color: #ee730c;
  border: 2px solid #ee730c;
  border-radius: 70px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.book-outline-button:hover {
  background-color: #ee730c;
  color: #f9faef;
}

/* Fix: on the "Soins et beauté" / "Yoga et Pilates" prestation-card
   grids, .class-category-wrap is a fixed 50px+margin box meant to hold
   a "mode"/"level" tag, but on this site those tags are never used
   (always w-condition-invisible/empty) — so every card reserved 60px of
   dead space between the image and the title. Collapse it. */
.class-category-wrap {
  display: none;
}

/* Blog sidebar cards (replaces the original template's fake e-commerce
   "Product Categories"/"Top Rated Product" widgets and dead /team link,
   with something useful: direct links to every prestation page, for
   internal linking / semantic-silo purposes). */
.blog-sidebar-card {
  background-color: #f2f4db;
  border-radius: 24px;
  padding: 30px;
  margin-bottom: 24px;
}
.blog-sidebar-title {
  font-family: var(--font--heading);
  color: #17183b;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 16px;
}
.blog-sidebar-group-title {
  color: #ee730c;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 18px;
  margin-bottom: 6px;
}
.blog-sidebar-group-title:first-of-type {
  margin-top: 0;
}
.blog-sidebar-link {
  display: block;
  color: #525b76;
  text-decoration: none;
  padding: 6px 0;
  font-size: 16px;
  transition: color 0.15s ease;
}
.blog-sidebar-link:hover {
  color: #ee730c;
}

/* Blog article pages: body wrapper + meta line, reusing the site's
   existing .section-title/.section-content typography for DA consistency. */
.article-meta {
  color: #8a8f7d;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  text-transform: uppercase;
  font-weight: 600;
}
.article-body-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.article-body-wrap .section-content {
  margin-bottom: 20px;
}
.article-body-wrap .section-content:last-child {
  margin-bottom: 0;
}
.article-body-wrap h2.section-title {
  font-size: 28px;
  margin-top: 36px;
  margin-bottom: 14px;
}
.article-body-wrap ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.article-body-wrap li {
  color: var(--_nds---shadow-gray);
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 8px;
}
.article-cta-wrap {
  margin: 8px 0 40px;
}

/* Webflow's scroll-triggered "fade/slide in" interactions (IX2) start
   every element they target at `style="opacity:0"` inline, then rely on
   webflow.js to animate it to opacity:1 once it scrolls into view. On
   this rebuilt static export that trigger doesn't reliably fire for
   every element — same root cause as the intermittent blank images on
   the infinite slider (see below): timing/observer setup that depended
   on the original Webflow page structure. When it fails, the element
   (a whole section title, image, or card) just stays invisible forever,
   which reads as "missing" or "moved" content rather than a fade-in
   that never played — e.g. reported as the "Le bien-être, version
   Nanna" section seeming to disappear from under "Un lieu unique à
   Pau". Since none of this content is meant to be hidden by default,
   neutralize the inline opacity:0 site-wide rather than patch it
   section by section. */
[style="opacity:0"] {
  opacity: 1 !important;
}

/* FAQ blocks (prestation + category pages) — native <details>/<summary>,
   no JS needed, styled to match the site's rounded/cream DA. */
.faq-wrap {
  max-width: 760px;
  margin: 0 auto;
}
/* Round 31 fix : /contact utilise un AUTRE composant FAQ (le dropdown
   Webflow d'origine, `.faq-dropdown w-dropdown`), qui partage par
   coïncidence la classe `.faq-wrap` avec le composant FAQ maison
   ci-dessus (round 9, <details>/<summary>). La règle `margin:0 auto`
   ci-dessus écrasait le `margin-top:60px` d'origine de Webflow pour
   `.faq-wrap` (nanna-pau.webflow.shared.css, chargé avant ce fichier),
   collant le titre "On a déjà des réponses pour toi !" directement à la
   première question. Réintroduit ici, scopé à `.contact-faq-section`
   pour ne pas ajouter d'espace sur les pages qui utilisent le vrai
   composant FAQ maison. */
.contact-faq-section .faq-wrap {
  margin-top: 60px;
}
.faq-item {
  background-color: #fff;
  border-radius: 18px;
  padding: 4px 26px;
  margin-bottom: 14px;
}
.faq-item[open] {
  background-color: #fff;
}
.faq-question {
  cursor: pointer;
  list-style: none;
  color: var(--_nds---space-cadet);
  font-family: var(--font--heading);
  font-size: 19px;
  font-weight: 400;
  padding: 18px 34px 18px 0;
  position: relative;
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  font-size: 24px;
  line-height: 1;
  color: #ee730c;
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-question::after {
  content: "\2212";
}
.faq-answer {
  color: var(--_nds---shadow-gray);
  font-size: 17px;
  font-weight: 300;
  margin: 0 0 20px;
  padding-right: 20px;
}

/* Nouveau slider "Nos prestations" (accueil, sous la hero) : cartes de même hauteur + nav flèches uniquement */
.products-image-wrap {
  height: 300px;
}
.products-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.products-nav {
  display: none;
}

/* Hero accueil : titre sur ~2 lignes, interligne resserré, moins de hauteur pour voir le CTA sans scroller */
.about-banner-title-wrap {
  max-width: 760px;
  margin-bottom: 20px;
}
.banner-title.mandarine-title {
  line-height: 1.1;
}
.about-banner-content-wrap {
  margin-bottom: 20px;
}
.about-banner-button-wrap {
  margin-top: 10px;
}

/* Round 21 : les deux boutons de la hero (Découvrir + téléphone) étaient
   simplement côte à côte en flux inline (aucun conteneur flex), sans
   espace entre eux et avec un alignement vertical bancal — un <a> en
   display:inline-block (Découvrir) et un <a> en inline-flex (téléphone,
   round 20) ne partagent pas le même alignement de baseline, ce qui
   donnait l'impression que le bouton téléphone était plus "grand"
   verticalement. Passer le conteneur en flex + align-items:center règle
   les deux problèmes d'un coup : espacement contrôlé via gap, et les
   deux boutons alignés sur leur centre plutôt que leur baseline
   respective, quel que soit leur display individuel. */
.about-banner-button-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Hero accueil, grand écran (>=1280px) : la photo était en position
   absolute, très grande (jusqu'à 1050px de large en >=1440px) et ancrée
   à ~40-46% depuis la gauche — pensé à l'origine pour un titre étroit
   (450px). Une fois le titre élargi à 760px pour tenir sur 2 lignes,
   la photo chevauchait le texte. On la réduit et on l'ancre en bas à
   droite, sans chevaucher la colonne de texte. */
@media screen and (min-width: 1280px) {
  .about-banner-image-area {
    width: 42%;
    max-width: 500px;
    min-width: 0;
    padding-top: 70px;
    padding-bottom: 80px;
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
  }

  /* Le badge circulaire décoratif ("nanna gang") est positionné en bas
     de son conteneur ; en réduisant les marges du hero au-dessus, il
     est remonté et se fait maintenant couper par la nav bar. On le
     redescend un peu. */
  .about-decor-image-wrap {
    transform: translateY(90px);
  }

  /* "self-care" / "pilates" : à l'origine un très grand texte décoratif
     en fond (144px), pensé pour une photo bien plus large (jusqu'à
     1050px) avec beaucoup de marge au-dessus/en dessous. Sur la photo
     réduite, ce texte géant chevauchait l'image. On le réduit pour
     qu'il tienne dans le padding-top/bottom ajouté ci-dessus, au-dessus
     et en dessous de la photo, sans la recouvrir. */
  .about-decor-title-wrap .page-title.about {
    font-size: 46px;
  }
  .about-decor-title-wrap {
    top: 12px;
  }
  .about-decor-title-wrap.bottom {
    bottom: 10px;
  }
}

/* Nouveau slider "Nos prestations" : plus d'espace entre l'image et le titre */
.products-content-area.post-area {
  margin-top: 18px;
}

/* Nouveau slider : empêche les flèches de se retrouver très loin des cartes sur grand écran */
.products-wrap.benefits-testimonial-area {
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

/* Nouveau slider : les flèches gauche/droite restaient "flottantes",
   séparées de la capsule décorative en dessous, au lieu d'être ancrées
   dedans comme sur l'ancien slider. En cause : `.w-slider` (dont hérite
   `.products-slider`) impose `position: relative`, donc les flèches
   (position: absolute) se positionnent par rapport au slider lui-même
   — qui a `overflow: hidden` et une hauteur propre — plutôt que par
   rapport à `.products-wrap` (le conteneur commun avec la capsule).
   L'ancien slider, lui, redéfinit `.benefits-slider` en
   `position: static`, ce qui fait remonter l'ancrage jusqu'à
   `.benefits-testimonial-area` (le conteneur commun) : c'est ce qui
   aligne naturellement ses flèches avec sa capsule. On applique le
   même correctif ici. */
.products-slider {
  position: static;
}

/* Round 15 : le slider "Nos prestations" utilisait le `.w-slider` du thème
   en mode "peek carousel" (`.products-mask { max-width: 265px; overflow:
   visible }`, plusieurs cartes visibles au-delà de la boîte du mask,
   rognées seulement par l'overflow:hidden du parent). Combiné au clonage
   de slides de `data-infinite="true"` (pensé pour une carte par page, pas
   pour un layout à plusieurs cartes visibles), la navigation finissait
   par afficher une carte suivie d'un grand vide au lieu des cartes
   suivantes — même famille de bug que le slider "avis clients" (round 10),
   déjà remplacé par un slider scroll-snap maison. Même traitement ici :
   remplace tout le mécanisme `w-slider` par un scroll-snap CSS classique
   + flèches en JS pur (`scrollBy`), qui n'a pas ces cas limites de
   transform/clonage et remplit toujours l'écran, quelle que soit la
   position. Résout aussi le placement des flèches sur mobile, puisqu'on
   ne dépend plus des règles responsive fragiles du thème pour
   `.w-slider-arrow-left/right`. */
.products-slider-custom {
  position: relative;
}

.products-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 4px 4px 12px;
  margin: 0 -4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.products-track::-webkit-scrollbar {
  display: none;
}

.products-track .products-item-card {
  flex: 0 0 min(265px, 78vw);
  scroll-snap-align: start;
  margin-bottom: 0;
}

.products-nav-custom {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.products-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: #f2f4db;
  color: #17183b;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.products-arrow:hover {
  background-color: #ee730c;
  color: white;
  transform: translateY(-1px);
}

@media screen and (max-width: 479px) {
  .products-track .products-item-card {
    flex-basis: 82vw;
  }
}

/* Titres de prestations (nouveau slider "Nos prestations") : passés en
   <h3> pour le SEO (sous les <h2> de titre de section) ; on neutralise
   le style de titre par défaut du navigateur/thème, .products-title-link
   porte déjà la bonne taille/couleur. */
.products-title-heading {
  margin: 0;
  font-weight: inherit;
}

/* Ancien slider "Nos rituels préférés" : plus d'espace avant le lien + flèche après le texte */
.benefits-link {
  margin-top: 20px;
}
.benefits-link .link-arrow {
  transition: transform 0.2s ease;
}
.benefits-link:hover .link-arrow {
  transform: translateX(4px);
}

/* Image à la une des articles de blog : même format (ratio + hauteur)
   sur toutes les pages article, quelle que soit la taille/le ratio
   d'origine de la photo utilisée (object-fit:cover recadre proprement). */
.article-featured-image-section {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: var(--_nds---cream);
}
.article-featured-image-wrap {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 7;
  border-radius: 24px;
  overflow: hidden;
}
.article-featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 767px) {
  .article-featured-image-wrap {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }
}

/* "Un lieu unique à Pau" / "Le bien-être, version Nanna" (homepage,
   section right after the products slider): the theme lays out its
   sibling content column (.about-home-content-area) as two full-width
   stacked rows (photo+text), which on this page runs ~1000px tall. The
   title column (.about-home-title-wrap) stretches to match that height
   and uses `justify-content: space-between`, so the eyebrow/title/CTA
   get spread across the full ~1000px instead of sitting together — the
   title ends up floating far below its own eyebrow. This is the
   original Webflow behavior (confirmed on the still-live Webflow site),
   not something introduced during the rebuild, but the user wants the
   title directly under "Un lieu unique à Pau" as in a normal heading
   block. Switch to flex-start with a normal gap so the three stack
   together at the top, and let the CTA follow right after instead of
   being pinned to the bottom of the tall column. */
.about-home-title-wrap {
  justify-content: flex-start;
  gap: 24px;
}

/* ---------------------------------------------------------------------
   CRO: Google rating badge + "Avis clients Google" section.
   Colors reused from the theme's own :root variables (see
   nanna-pau.webflow.shared*.css): mandarine #ee730c, golden-latte
   #e9bc62, space-cadet (navy) #17183b, cream #f2f4db, heading-color
   #3e332b, text-color #776a61. Markup is populated statically with the
   last verified snapshot (4,9/5 · 53 avis) and upgraded live by
   assets/js/google-rating-widget.js via the [data-google-rating-*]
   attribute contract — see that file for details. --------------------- */

.google-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #f2f4db;
  border-radius: 999px;
  padding: 10px 20px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(23, 24, 59, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.google-rating-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(23, 24, 59, 0.14);
}

.google-rating-badge-stars {
  color: #e9bc62;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
}

.google-rating-badge-text {
  color: #17183b;
  font-family: var(--font--content);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.google-rating-badge-value {
  color: #17183b;
  font-weight: 700;
}

/* "sur Google" + logo mark appended to the badge text (round 15). Pure
   black clashed with the rest of the site's warm palette more than the
   navy already used elsewhere for text/accents, so "noir" is read here
   as this near-black navy rather than #000. */
.google-rating-badge-google {
  font-weight: 600;
  white-space: nowrap;
}
.google-rating-badge-g {
  vertical-align: -2px;
  margin-right: 4px;
}

/* Hero placements (homepage + prestation pages): sit right below the
   primary CTA button, small margin-top so it reads as a trust signal
   right under the action. */
/* Badge moved above the H1 (round 14, on user request) — it's a direct
   sibling placed right before the title-wrap div in the hero markup, on
   both the homepage (.about-banner-content-area) and every prestation
   page (.banner-area). */
.about-banner-content-area > .google-rating-badge,
.banner-area > .google-rating-badge {
  margin-bottom: 18px;
}

@media screen and (max-width: 479px) {
  .google-rating-badge {
    padding: 8px 16px;
  }
  .google-rating-badge-text {
    font-size: 13px;
  }
}

/* "Avis clients Google" homepage section */
.google-reviews-section {
  padding: 90px 0;
  background-color: #f4efec;
}

.google-reviews-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 20px;
}

.google-reviews-badge-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 44px;
}

/* Slider (round 14): horizontal scroll-snap track, own arrow buttons —
   built custom rather than reusing the theme's .w-slider, since these
   review cards are injected/refreshed by JS after the page loads and
   Webflow's own slider JS only initializes elements present at load. */
.google-reviews-slider {
  position: relative;
}

.google-reviews-list {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 4px 4px 12px;
  margin: 0 -4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* Round 16: with only 4 cards, on wide viewports they don't fill the
     row and sit left-aligned with a visible gap on the right. Center
     them — but plain `justify-content:center` on an overflowing
     scroll container can push the first card past scrollLeft:0 with
     no way to scroll back to it, so use the "safe" variant (falls
     back to start-alignment instead of clipping when content
     overflows); the plain `center` line first is the fallback for
     browsers that don't understand `safe center` yet. */
  justify-content: center;
  justify-content: safe center;
}

.google-reviews-list::-webkit-scrollbar {
  display: none;
}

.google-review-card {
  flex: 0 0 min(340px, 82vw);
  scroll-snap-align: start;
  background-color: white;
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 4px 20px rgba(23, 24, 59, 0.06);
}

.google-reviews-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.google-reviews-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: #f2f4db;
  color: #17183b;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.google-reviews-arrow:hover {
  background-color: #ee730c;
  color: white;
  transform: translateY(-1px);
}

.google-review-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.google-review-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #ee730c;
  color: white;
  font-family: var(--font--heading);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.google-review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.google-review-author {
  color: #3e332b;
  font-family: var(--font--content);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.google-review-stars {
  color: #e9bc62;
  font-size: 13px;
  margin: 0;
}

.google-review-text {
  color: #776a61;
  font-family: var(--font--content);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

@media screen and (max-width: 479px) {
  .google-review-card {
    flex-basis: 86vw;
    padding: 22px 20px;
  }
}

@media screen and (max-width: 767px) {
  .google-reviews-section {
    padding: 60px 0;
  }
}

/* ---------------------------------------------------------------
   Adresse cliquable -> popover Google Maps / Waze / Plans (round 15)
   `.nanna-address-trigger` is `position: relative` so the popover
   (appended as its own child by address-link.js) anchors to it
   directly via `top: 100%`, regardless of what positioned ancestor
   the trigger itself happens to sit inside (a sibling insert would
   anchor to that ancestor instead, landing in the wrong spot). */
.nanna-address-trigger {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.nanna-address-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 8px;
  background-color: #fff;
  border-radius: 14px;
  padding: 8px;
  min-width: 180px;
  box-shadow: 0 8px 28px rgba(23, 24, 59, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nanna-address-popover-link {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: #17183b;
  font-family: var(--font--body, Nunito, sans-serif);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.nanna-address-popover-link:hover {
  background-color: #f2f4db;
  color: #ee730c;
}

/* On narrow columns (e.g. the footer's right-most contact column), a
   left-anchored popover could run past the right edge of the viewport;
   right-anchor it instead below 480px where columns are narrowest. */
@media screen and (max-width: 479px) {
  .nanna-address-popover {
    left: auto;
    right: 0;
  }
}

/* Round 16 : page "Les résidents" (/equipe) — les photos de l'équipe
   n'avaient aucune contrainte de taille/ratio dans le thème
   (`.team-card-image-wrap` n'a ni hauteur ni `object-fit`), donc
   chaque photo s'affichait à sa propre taille naturelle : les cartes
   n'avaient pas toutes la même hauteur, créant des décalages entre
   les lignes de la grille. Ratio fixe + recadrage cover, comme pour
   les autres grilles image du site (`.class-image-wrap` etc). */
.team-card-image-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.team-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Round 41 : /equipe devient dynamique (générée depuis la table
   practitioners) et affiche désormais aussi la bio courte de chaque
   praticienne quand elle est renseignée (colonne déjà prête depuis le
   round 37, jamais affichée jusqu'ici). Absente du markup si vide (voir
   teamCardHtml() dans admin/publicRender.js), donc pas d'espace vide sur
   les fiches sans bio. */
.team-bio-text {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--_nds---shadow-gray);
}

/* Round 41 : quand un·e praticien·ne n'a pas encore de photo_url
   renseignée côté dashboard, teamCardHtml() (admin/publicRender.js) met
   ce bloc à la place d'un <img src=""> (qui afficherait une icône
   "image cassée"). Remplit le même espace que .team-card-image
   (width/height 100%, hérite du ratio 4/5 de .team-card-image-wrap). */
.team-card-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--_nds---mandarine, #e08e45);
  color: var(--_nds---cream, #fff);
  font-family: var(--font--heading);
  font-size: 64px;
  font-weight: 500;
}

/* Round 16 (suite) : même bug, deuxième occurrence — la teaser "team"
   de l'accueil (section "nanna au quotidien", classes `.team-post-*`,
   entièrement distincte de `.team-card-*` ci-dessus) a le même défaut :
   `.team-post-image-link` (le rond) n'a que des `max-width`/`max-height`
   par breakpoint, et `.team-post-image` (la photo) n'a ni largeur ni
   hauteur ni `object-fit`. Une image capée par sa largeur et une autre
   par sa hauteur (selon leur ratio d'origine) ne remplissent pas le
   même espace réel : les ronds/cartes n'ont pas tous la même taille
   effective, d'où le décalage entre les lignes signalé par l'utilisateur.
   Fix : largeur ET hauteur fixes (pas seulement des max) sur le rond à
   chaque breakpoint, + recadrage cover sur la photo — même pattern que
   `.team-card-image-wrap` ci-dessus. */
.team-post-image-link {
  width: 120px;
  height: 120px;
}
.team-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 1280px) {
  .team-post-image-link {
    width: 130px;
    height: 130px;
  }
}
@media screen and (max-width: 991px) {
  .team-post-image-link {
    width: 100px;
    height: 100px;
  }
}
@media screen and (max-width: 479px) {
  .team-post-image-link {
    width: 80px;
    height: 80px;
  }
}

/* Round 24 : section "nanna au quotidien" (accueil) transformée en
   carrousel horizontal au scroll — jusque-là 2 lignes fixes de 3
   praticien·ne·s reliées par un pointillé décoratif (`.team-line-break`).
   Même pattern scroll-snap + flèches `scrollBy` déjà éprouvé sur les
   sliders "Nos prestations" (round 15) et avis Google (round 14) :
   fiable à n'importe quel nombre de cartes, pas de dépendance aux
   sliders `.w-slider` du thème. Le connecteur pointillé (pensé pour la
   grille 2 lignes) est retiré : il n'a plus de sens sur une seule ligne
   défilante. */
.team-post-slider-custom {
  position: relative;
}

.team-post-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 8px 4px 16px;
  margin: 0 -4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.team-post-track::-webkit-scrollbar {
  display: none;
}

.team-post-track .team-post-card-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Round 37bis : posée par team-post-slider.js dès que la rangée tient
   entière dans la largeur visible (pas de scroll nécessaire) — centre les
   cartes au lieu de les laisser collées à gauche (comportement par défaut
   d'un flex sans justify-content), sans dépendre d'un nombre de cartes ou
   d'un breakpoint particulier. Retirée automatiquement par le même script
   dès que le nombre de cartes ou la largeur d'écran fait à nouveau
   déborder la rangée (ex. mobile), pour repasser en slider normal. */
.team-post-track--centered {
  justify-content: center;
}

.team-post-nav-custom {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.team-post-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: #f2f4db;
  color: #17183b;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.team-post-arrow:hover {
  background-color: #ee730c;
  color: white;
  transform: translateY(-1px);
}

/* Round 37bis : deux photos de stock décoratives du thème Webflow
   d'origine (.footer-image-wrap, `footer-image-1.webp`/`footer-image-2
   .webp` — un homme et une femme génériques en posture de méditation,
   aucun rapport avec Nanna) sont posées en `display:none` par défaut et
   ne redeviennent visibles qu'à partir de 1280px de large — jamais
   couvertes par les vérifications visuelles précédentes de ce projet
   (faites à 1440px mais sans jamais scroller jusqu'au footer, ou sur
   mobile). Les calques `.footer-left-overlay`/`.footer-right-overlay`
   censés les teinter aux couleurs du site n'ont jamais eu de couleur de
   fond définie nulle part dans le thème (juste du positionnement) : les
   photos s'affichent donc brutes, sans aucune intégration visuelle avec
   le reste du footer. Plutôt que de construire l'habillage manquant pour
   un élément purement décoratif sans lien avec l'activité réelle de
   Nanna, on le masque — même logique que le nettoyage de code mort
   `.in-pause` des rounds 10/12/20. */
.footer-image-wrap {
  display: none !important;
}

/* Round 16 : section "Devenir résident.e" (page /institut-beaute-et-
   studio-pilates-pau) — le bouton "Devenir résident.e" est un enfant
   direct de `.about-home-title-wrap` (comme le titre juste au-dessus),
   mais `.primary-button.large` porte `margin-left/right: auto` dans le
   thème, pensé pour un bouton isolé dans un conteneur pleine largeur —
   ici ça le centre au lieu de l'aligner avec le titre. Neutralisé
   seulement pour ce contexte précis (bouton enfant direct de
   `.about-home-title-wrap`) : les ~25 autres usages de
   `.primary-button.large` ailleurs sur le site (CTA autonome en bas de
   page, dans son propre `.div-block`) restent centrés comme prévu. */
.about-home-title-wrap > .primary-button.large {
  margin-left: 0;
}

/* Round 16 : page /blog — tri par ordre antéchronologique (plus récent
   en premier) demandé, + tags de sujet (Pilates, Yoga, Massages, Soins
   du visage, Réflexologie) filtrables sans rechargement de page. */
.blog-tag-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.blog-tag-filter-btn {
  font-family: var(--font--content);
  font-size: 14px;
  font-weight: 600;
  color: #17183b;
  background-color: #fff;
  border: 1px solid #e1ddda;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.blog-tag-filter-btn:hover {
  border-color: #ee730c;
}

.blog-tag-filter-btn.is-active {
  background-color: #17183b;
  border-color: #17183b;
  color: #fff;
}

.blog-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.blog-tag-pill {
  font-family: var(--font--content);
  font-size: 12px;
  font-weight: 600;
  color: #17183b;
  background-color: #f2f4db;
  border-radius: 999px;
  padding: 3px 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Round 18 : page /blog — grille 2 colonnes sur PC, miniatures au format
   horizontal uniforme (quel que soit le ratio d'origine de la photo, comme
   déjà fait pour l'image à la une des articles au round 12 via
   .article-featured-image-wrap/.article-featured-image), et tag(s) de
   l'article affiché(s) en badge sur la photo (au lieu d'en dessous du
   texte) — le `.blog-tag-row` a été déplacé dans le HTML pour devenir un
   enfant de `.blog-image-link`, le filtre JS (blog-filter.js) continue de
   fonctionner sans changement car il lit uniquement l'attribut
   data-blog-tags sur le w-dyn-item, jamais ces pastilles visibles. */
.blog-post-area .w-dyn-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 48px;
}
.blog-post-area .blog-item-card {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .blog-post-area .w-dyn-items {
    grid-template-columns: 1fr;
  }
}

.blog-image-link {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
}
.blog-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-image-link .blog-tag-row {
  position: absolute;
  top: 12px;
  right: 12px;
  margin-bottom: 0;
  justify-content: flex-end;
  max-width: calc(100% - 24px);
}
.blog-image-link .blog-tag-pill {
  background-color: rgba(242, 244, 219, 0.95);
  box-shadow: 0 1px 4px rgba(23, 24, 59, 0.25);
}

/* Round 18 (suite) : titre + date trop grands sur les cartes désormais
   étroites (grille 2 colonnes desktop ~396px, 1 colonne mobile ~370-390px)
   — les tailles du thème (34-40px pour le titre, 18px pour la date)
   étaient pensées pour l'ancienne carte pleine largeur (~800px+). Réduites
   ici, scopées à .blog-post-area pour ne pas toucher .blog-title-link/
   .blog-date-wrap ailleurs sur le site (ces classes ne sont utilisées que
   sur cette page, mais on scope quand même par principe). */
.blog-post-area .blog-title-link {
  font-size: 22px;
  line-height: 1.3;
}
.blog-post-area .blog-date-wrap {
  font-size: 13px;
  padding: 3px 14px;
}
@media screen and (max-width: 767px) {
  .blog-post-area .blog-title-link {
    font-size: 20px;
  }
}
@media screen and (max-width: 479px) {
  .blog-post-area .blog-title-link {
    font-size: 19px;
  }
}

/* Round 20 : bouton téléphone dans la hero de l'accueil, à côté de
   "Découvrir". Couleurs volontairement différentes du bouton "Découvrir"
   (crème/mandarine) pour bien le distinguer comme un second CTA à part :
   fond navy (--_nds---space-cadet), texte crème — palette du site,
   contraste fort avec le fond doré de la hero et avec l'autre bouton. */
.phone-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--_nds---space-cadet);
  color: var(--_nds---cream);
  text-align: center;
  border-radius: 70px;
  margin-top: 0;
  /* Round 21 : padding horizontal aligné sur .secondary-button (40px) au
     lieu de 32px — même padding vertical (20px) que "Découvrir" depuis le
     round 20, donc les deux boutons faisaient déjà la même hauteur ; la
     vraie cause du "plus grand en haut et en bas" perçu était l'absence
     de flex/align-items sur le conteneur (voir .about-banner-button-wrap
     ci-dessus), pas un padding différent — corrigé ici quand même pour
     que les deux boutons matchent aussi en largeur de padding. */
  padding: 20px 40px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color .2s linear, color .2s linear;
}
.phone-cta-button:hover {
  background-color: var(--_nds---mandarine);
  color: var(--_nds---cream);
}
.phone-cta-icon {
  flex: none;
}
@media screen and (max-width: 479px) {
  .phone-cta-button {
    padding: 16px 24px;
    font-size: 16px;
  }
}

/* Round 24 : numéro de téléphone cliquable dans le menu (uniquement sur
   téléphone). Le lien vit dans le markup du menu nav (.nav-menu-area),
   qui est le même bloc affiché en ligne sur desktop ET en overlay
   plein écran sur mobile (le nav "medium/small/tiny" standard de
   Webflow) — donc il faut le masquer explicitement en desktop et ne le
   révéler qu'au breakpoint où le menu devient un overlay mobile
   (max-width: 991px, cf. .nav-menu-area ci-dessus dans le CSS Webflow). */
.nav-phone-link {
  display: none;
}
@media screen and (max-width: 991px) {
  .nav-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--_nds---space-cadet);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  .nav-phone-link .phone-cta-icon {
    flex: none;
  }
  .nav-phone-link:hover {
    color: var(--_nds---mandarine);
  }
}

/* Round 24 : pop-up exit-intent (CTA appel téléphonique). Markup injecté
   en JS par exit-intent.js — caché par défaut, affiché en ajoutant la
   classe .is-visible (transition fondu + léger scale, cohérent avec les
   autres animations d'apparition du site plutôt qu'un pop brutal). */
.exit-intent-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #1a1a2eb3;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.exit-intent-overlay.is-visible {
  display: flex;
  opacity: 1;
}
.exit-intent-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background-color: var(--_nds---cream, #fff);
  border-radius: 24px;
  padding: 48px 40px 40px;
  text-align: center;
  box-shadow: 0 20px 60px #00000040;
  transform: translateY(-12px);
  transition: transform 0.25s ease;
}
.exit-intent-overlay.is-visible .exit-intent-modal {
  transform: translateY(0);
}
.exit-intent-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--_nds---space-cadet);
  padding: 4px;
}
.exit-intent-eyebrow {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--_nds---mandarine);
}
.exit-intent-title {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.2;
  color: var(--_nds---space-cadet);
}
.exit-intent-text {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--_nds---space-cadet);
}
.exit-intent-phone-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--_nds---space-cadet);
  color: var(--_nds---cream);
  border-radius: 70px;
  padding: 18px 36px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s linear;
}
.exit-intent-phone-button:hover {
  background-color: var(--_nds---mandarine);
}
@media screen and (max-width: 479px) {
  .exit-intent-modal {
    padding: 40px 24px 32px;
  }
  .exit-intent-title {
    font-size: 24px;
  }
}

/* Round 41 : pop-up d'avertissement avant redirection vers une
   plateforme de réservation tierce (Eversports pour Morgane, Calendly
   pour Maia). Même langage visuel que .exit-intent-* ci-dessus, pour
   rester cohérent — markup injecté en JS par
   external-booking-notice.js. */
.external-booking-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #1a1a2eb3;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.external-booking-overlay.is-visible {
  display: flex;
  opacity: 1;
}
.external-booking-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background-color: var(--_nds---cream, #fff);
  border-radius: 24px;
  padding: 48px 40px 40px;
  text-align: center;
  box-shadow: 0 20px 60px #00000040;
  transform: translateY(-12px);
  transition: transform 0.25s ease;
}
.external-booking-overlay.is-visible .external-booking-modal {
  transform: translateY(0);
}
.external-booking-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--_nds---space-cadet);
  padding: 4px;
}
.external-booking-eyebrow {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--_nds---mandarine);
}
.external-booking-title {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--_nds---space-cadet);
}
.external-booking-text {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--_nds---space-cadet);
}
.external-booking-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.external-booking-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--_nds---space-cadet);
  color: var(--_nds---cream);
  border-radius: 70px;
  padding: 16px 36px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s linear;
}
.external-booking-continue:hover {
  background-color: var(--_nds---mandarine);
}
.external-booking-cancel {
  background: none;
  border: none;
  font-size: 15px;
  text-decoration: underline;
  color: var(--_nds---space-cadet);
  cursor: pointer;
  padding: 4px;
}
@media screen and (max-width: 479px) {
  .external-booking-modal {
    padding: 40px 24px 32px;
  }
  .external-booking-title {
    font-size: 22px;
  }
}

/* Round 21 : flèche animée dans le bouton "Découvrir" de la hero (à côté
   du bouton téléphone), grossit légèrement au survol. Scopé à
   .about-banner-button-wrap .secondary-button pour ne pas ajouter la
   flèche aux ~25 autres usages de .secondary-button ailleurs sur le
   site. */
.about-banner-button-wrap .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.about-banner-button-wrap .secondary-button::after {
  content: "\2192";
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.about-banner-button-wrap .secondary-button:hover::after {
  transform: scale(1.3);
}

/* Round 29 : horaires d'ouverture ajoutés sous le texte d'intro du footer
   (27 pages). Même style que .footer-intro (hérite couleur/famille de
   police), juste un peu plus petit/discret pour rester secondaire par
   rapport au texte de présentation. */
.footer-hours {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.85;
}
/* Round 31 : précision ajoutée après les horaires — les résidentes sont
   indépendantes et gèrent leur propre planning, donc les horaires
   affichés sont ceux du lieu, pas une garantie de disponibilité de
   chaque praticienne à tout moment. Affichée en retrait (display:block +
   opacité réduite) pour rester lisible comme une note secondaire plutôt
   que de rallonger la ligne d'horaires elle-même. */
.footer-hours-note {
  display: block;
  margin-top: 4px;
  font-style: italic;
  opacity: 0.8;
}

/* Round 30 : bouton "Voir ses services" sur la carte d'Alexia, page
   /equipe — pousse vers sa page de réservation Fresha, où sont vraiment
   listées toutes ses prestations (le site n'affiche encore que 6 soins
   visage). Scopé à `.team-content-wrap--cta` (seule la carte d'Alexia
   porte cette classe pour l'instant) pour ne pas transformer la mise en
   page des 5 autres cartes équipe, qui restent un simple bloc empilé
   nom/rôle. Même bouton que "Réserver" sur les pages prestation
   (`.secondary-button`), juste mis en ligne à côté du nom plutôt qu'en
   dessous. */
.team-content-wrap--cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.team-service-cta-button {
  flex-shrink: 0;
  white-space: nowrap;
}
@media screen and (max-width: 479px) {
  .team-service-cta-button {
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* Round 30 : pages hub prestations (Soins du visage enrichi, Épilation
   Femme, Épilation Homme). Deux formats, choisis selon le volume de
   prestations à afficher :
   - `.service-price-tag` : ligne "Dès X€ · durée" insérée dans les
     cartes photo `.class-item-card` existantes (grille 3 colonnes déjà
     utilisée ailleurs sur le site) — adapté aux 6 soins visage, peu
     nombreux et chacun avec un vrai texte descriptif.
   - `.service-list` : liste compacte en lignes (nom / durée / prix /
     bouton), sans photo par ligne — adapté aux pages épilation (13+3 et
     7+1 prestations), où une carte photo par ligne serait à la fois
     répétitive (mêmes visuels génériques réutilisés) et trop lourde
     pour des prestations aussi courtes (5-35min). */
.class-content-area.no-image {
  margin-top: 0;
  padding: 32px 28px;
  background-color: var(--_nds---cream);
  border-radius: 24px;
  min-height: 100%;
  box-sizing: border-box;
}
.service-price-tag {
  color: var(--_nds---mandarine);
  font-weight: 700;
  margin-bottom: 8px;
}
.service-price-tag .service-duration {
  color: var(--_nds---shadow-gray);
  font-weight: 400;
}

/* Round 32 fix: the prestation cards inside each tab pane (.class-tab, used on
   /nanna-soins-beaute-et-massages-a-pau and /studio-yoga-pilates-centre-pau) sit in
   Webflow's classic float-based grid (.w-dyn-items.w-row > .w-col.w-col-4). Float
   layout is not a real grid: when the cards don't all have exactly the same height
   (which they don't — descriptions vary in length), the next row's card slots into
   whichever column has the most vertical room instead of starting a clean new row —
   a "masonry" artifact that's invisible with a card count that fills whole rows
   evenly, but breaks visibly with 5 cards (3 + 2) like the new "Tout" tab. Switching
   the row to flexbox with wrap forces every row to align at a shared top edge
   regardless of card height differences. */
.class-tab .w-dyn-items.w-row {
  display: flex;
  flex-wrap: wrap;
}
.class-tab .w-dyn-items.w-row > .w-col-4 {
  float: none;
}

.service-list-group-title {
  font-family: var(--font--heading);
  color: var(--_nds---space-cadet);
  font-size: 22px;
  margin: 48px 0 8px;
}
.service-list-group-note {
  color: var(--_nds---shadow-gray);
  margin-bottom: 20px;
}
.service-list-group-title:first-child {
  margin-top: 0;
}
.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(23, 24, 59, 0.1);
}
.service-row-name {
  color: var(--_nds---space-cadet);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 4px;
}
/* Round 31 : .class-title-link (cartes soins du visage) enveloppé dans un
   <h3 class="class-title-heading"> pour le référencement (hiérarchie de
   titres) — reset pour ne rien changer visuellement, le style reste sur
   .class-title-link lui-même. */
.class-title-heading {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}
.service-row-duration {
  color: var(--_nds---shadow-gray);
  font-size: 14px;
}
.service-row-save {
  color: #5a9367;
  font-size: 13px;
  font-weight: 600;
  margin-left: 8px;
}
.service-row-price-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.service-row-price {
  color: var(--_nds---mandarine);
  font-weight: 700;
  white-space: nowrap;
}
.service-row-book {
  margin-top: 0;
  padding: 8px 20px;
  font-size: 14px;
  white-space: nowrap;
}
@media screen and (max-width: 479px) {
  .service-row-book {
    padding: 7px 16px;
    font-size: 13px;
  }
}

/* Round 33: barre de copyright en bas du footer, sur les 31 pages
   (footer-copyright-year mis à jour par cookie-consent.js à chaque
   chargement, voir ce fichier). */
.footer-copyright-bar {
  width: 100%;
  padding: 20px 0 0;
  margin-top: 20px;
  border-top: 1px solid rgba(242, 244, 219, 0.15);
  text-align: center;
  font-size: 12.5px;
  color: var(--_nds---cream);
  opacity: 0.75;
}
.footer-copyright-link {
  color: var(--_nds---cream);
  text-decoration: underline;
  opacity: 1;
}
.footer-copyright-link:hover {
  color: var(--_nds---golden-latte);
}

/* Round 44 (suite) : liste des prestations d'une praticienne, injectée sur
   sa page dédiée par renderPractitionerServicesInto()
   (admin/publicRender.js) — même esprit que .class-item-card (grille des
   pages "Soins et beauté"/"Yoga et Pilates") mais sans les onglets/l'image,
   puisqu'ici il s'agit d'une seule praticienne sur sa propre page plutôt
   que d'un catalogue multi-praticiennes. */
.prestation-list-section {
  padding: 40px 0;
}
.prestation-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.prestation-item-card {
  background-color: var(--_nds---cream, #f2f4db);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prestation-item-title {
  font-size: 18px;
  margin: 0;
  color: var(--_nds---space-cadet);
}
.prestation-item-meta {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--_nds---mandarine, #e08e45);
}
.prestation-item-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--_nds---shadow-gray);
  flex-grow: 1;
}
.prestation-item-card .book-outline-button {
  align-self: flex-start;
  margin-top: 8px;
}

/* 15/10/2026 : carte Google Maps de /contact (remplace le widget Webflow mort).
   Le bloc a une hauteur fixe car il n'a pas de contenu propre avant le chargement. */
.nanna-map {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background-color: var(--_nds---ivory, #f9faef);
}
.nanna-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.nanna-map-facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px;
  text-align: center;
  color: var(--_nds---space-cadet, #17183b);
}
.nanna-map-address {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
}
.nanna-map-load {
  cursor: pointer;
  border: 0;
  border-radius: 100px;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: var(--_nds---mandarine, #ee730c);
  transition: background-color 0.2s ease;
}
.nanna-map-load:hover,
.nanna-map-load:focus-visible {
  background-color: var(--_nds---mandarine-hover, #f69b51);
}
.nanna-map-note {
  margin: 0;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--_nds---shadow-gray, #525b76);
}
.nanna-map-link {
  font-size: 14px;
  color: var(--_nds---space-cadet, #17183b);
  text-decoration: underline;
}
@media (max-width: 767px) {
  .nanna-map { min-height: 320px; }
}