/* ================================================================
   V3 — en-tete, bouton flottant et pied de page communs aux huit pages.
   Le bouton flottant renverse DECISIONS.md 2026-04-15 : voir l'entree du
   2026-08-28 qui documente ce renversement.
   ================================================================ */

/* --- EN-TETE : la marque seule a gauche, deux mots a droite --- */
/* WHY: plus de logo, plus de bouton telephone, plus de menu — la marque porte
   le premier ecran et les deux portes d'entree s'ecrivent en toutes lettres. */
.nav--v2 .nav__brand-sub { display: none; }
.nav--v2 .nav__tabs,
.nav--v2 .nav__phone-wrapper,
.nav--v2 .nav__hamburger,
.nav--v2 .nav__links { display: none !important; }

.nav--v2 .nav__inner { align-items: baseline; }
/* WHY: le lettrage collait au haut de la banniere — on le descend pour qu'il
   se pose au centre optique de la bande. Context: demande Sebastien 2026-08-28 */
.nav--v2 .nav__inner { padding-top: .55rem; }
.nav--v2 .nav__brand { align-self: baseline; }
.nav--v2 .nav__brand-full,
.nav--v2 .nav__brand-short { font-size: 1.5rem; font-weight: 600; letter-spacing: .005em; white-space: nowrap; }

.nav__mots { display: flex; align-items: baseline; gap: 1.15rem; margin-left: auto; }
.nav__mots a {
  position: relative;
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dark);
  text-decoration: none;
  padding-bottom: .35rem;
  transition: color .3s var(--v2-ease);
}
.nav__mots a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  transition: right .35s var(--v2-ease);
}
.nav__mots a:hover::after,
.nav__mots a:focus-visible::after { right: 0; }

/* La barre oblique separe deux portes distinctes ; un trait d'union les aurait
   soudees en une seule expression. */
.nav__sep { color: #C6BFCB; font-size: .8rem; font-weight: 300; user-select: none; }

.nav__mot--dent:hover { color: var(--v2-gold-text); }
.nav__mot--dent::after { background: var(--v2-gold-text); }
.nav__mot--esth:hover { color: #8B6CAE; }
.nav__mot--esth::after { background: #8B6CAE; }

.nav--v2.scrolled .nav__mots a { color: var(--lavender-light); }
.nav--v2.scrolled .nav__mot--dent:hover { color: var(--gold-light); }
.nav--v2.scrolled .nav__mot--dent::after { background: var(--gold-light); }
.nav--v2.scrolled .nav__mot--esth:hover { color: #C9B8E0; }
.nav--v2.scrolled .nav__mot--esth::after { background: #C9B8E0; }

/* WHY: a 400px, marque + deux mots + separateur depassaient le bord droit.
   On reduit les deux, la marque restant nettement dominante. */
/* Le nom complet est plus long que « Dre Katty » : il faut le reduire plus tot
   pour qu'il ne pousse pas les deux mots hors de l'ecran. */
@media (max-width: 860px) {
  .nav--v2 .nav__brand-full,
  .nav--v2 .nav__brand-short { font-size: 1.18rem; }
}
@media (max-width: 560px) {
  .nav--v2 .nav__brand-full,
  .nav--v2 .nav__brand-short { font-size: 1rem; }
  .nav__mots { gap: .55rem; }
  .nav__mots a { font-size: .6rem; letter-spacing: .09em; }
  .nav__sep { font-size: .68rem; }
}
@media (max-width: 380px) {
  .nav--v2 .nav__brand-full,
  .nav--v2 .nav__brand-short { font-size: .88rem; }
  .nav__mots a { font-size: .55rem; letter-spacing: .06em; }
}

/* --- BOUTON FLOTTANT : appel et prise de rendez-vous --- */
.fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 950;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .4s var(--v2-ease), transform .4s var(--v2-ease);
}
.fab.visible { opacity: 1; pointer-events: auto; transform: none; }
.fab__menu[hidden] { display: none; }

/* WHY: le bouton n'est plus un disque plein — l'icone calendrier translucide
   de la famille des bulles, seule, plus discrete et plus dans le ton.
   Context: demande Sebastien 2026-08-28 */
.fab__btn {
  width: 66px; height: 66px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 8px 18px rgba(56, 41, 78, .28));
  transition: transform .25s var(--v2-ease), filter .25s var(--v2-ease);
}
.fab__btn:hover { transform: translateY(-2px); filter: drop-shadow(0 12px 24px rgba(56, 41, 78, .36)); }
.fab__btn img { width: 100%; height: auto; display: block; }

.fab__menu {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 288px;
  background: var(--warm-white);
  border: 1px solid rgba(184, 151, 90, .35);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(45, 34, 53, .22);
  padding: .6rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.fab__appel {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem 1rem;
  font-size: .9rem; font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 151, 90, .22);
}
.fab__appel svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--gold-dark); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.fab__menu .v2-modal__choice { padding: .8rem 1rem; font-size: .9rem; border-radius: 13px; }
.fab__menu .v2-modal__icon { width: 28px; height: 28px; }

/* Fondu d'ouverture : la page entiere apparait doucement */
body.v2 { animation: page-fondu 1.1s var(--v2-ease) both; }
@keyframes page-fondu { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body.v2 { animation: none; }
  .fab, .fab__btn { transition: none; }
}

/* --- Icones de hero (pages dentisterie et esthetique) --- */
/* WHY: la dent et le visage translucides remplacent l'etoile, la feuille et le
   blob — la meme famille visuelle que les bulles de l'accueil. Elles arrivent
   en glissant doucement au chargement. Context: demande Sebastien 2026-08-28 */
/* WHY: plus aucune entree animee sur les pages de service — l'image est la,
   simplement. Seuls la video de l'accueil et les bulles de l'introduction
   bougent encore. Decision Sebastien 2026-08-28, pour un rendu plus pose.
   Context: DECISIONS.md 2026-08-28 */
.hero-icone {
  position: absolute;
  filter: drop-shadow(0 10px 20px rgba(62, 54, 72, .16));
  pointer-events: none;
}
/* WHY: sur les pages de service, l'icone EST le visuel du hero — la photo de
   Katty apparaissait sur trois ecrans de suite, ce qui tirait vers l'album
   personnel. La presence humaine reste portee par l'accueil et la page
   Dre Katty. Le halo diffus (::after) reste derriere l'icone.
   Context: decision Sebastien 2026-08-28 */
.v2-hero--page .v2-hero__blob { display: none; }
.v2-hero--page .v2-hero__media::before { display: none; }
.v2-hero--page .v2-hero__media { display: flex; align-items: center; justify-content: center; }
.hero-icone--dent, .hero-icone--visage { position: static; margin: auto; }
.hero-icone--dent { width: min(62%, 300px); }
/* WHY: meme principe que sur la carte de l'accueil — le profil regarde vers
   le texte, la chevelure part vers le bord. Un visage tourne vers le contenu
   y conduit l'oeil ; tourne vers l'exterieur, il l'en eloigne.
   Context: demande Sebastien 2026-08-28 */
.hero-icone--visage { width: min(66%, 320px); transform: scaleX(-1); }

/* --- Texture de fond : un lin tres discret --- */
/* WHY: le voile etait pose PAR-DESSUS toute la page (::after en z-index 3000)
   et grainait aussi les cartes, qui doivent rester nettes au premier plan. Il
   passe en ::before derriere le contenu : le lin ne touche plus que le fond.
   `position:relative; z-index:0` sur le corps force le contexte d'empilement,
   sans quoi un z-index negatif disparaitrait derriere le fond ivoire.
   Context: demande Sebastien 2026-08-28 */
body.v2 { position: relative; z-index: 0; }
body.v2::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    repeating-linear-gradient(0deg, rgba(62, 54, 72, .014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(62, 54, 72, .011) 0 1px, transparent 1px 3px);
}

/* --- Page esthetique : bloc « Mon approche » (remplace les 4 etapes) --- */
.approche-esth { display: flex; align-items: center; gap: 3.5rem; max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }
.approche-esth .v2-katty__media { width: 36%; }
.approche-esth__texte { flex: 1; display: flex; flex-direction: column; gap: 1.15rem; align-items: flex-start; text-align: left; }
.approche-esth__texte h2 { margin: 0; }
.approche-esth__texte p { margin: 0; line-height: 1.85; color: var(--text-body); }
@media (max-width: 900px) {
  .approche-esth { flex-direction: column; gap: 2.2rem; }
  .approche-esth .v2-katty__media { width: 74%; max-width: 340px; }
  .approche-esth__texte { align-items: center; text-align: center; }
}

/* Le resume des quatre etapes, en filigrane sous le recit */
.approche-esth__etapes { font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--v2-rose-text); margin-top: .4rem !important; }

/* --- Bas de page : plus etroit, plus sobre --- */
/* WHY: le logo n'y a plus sa place, l'Instagram non plus (compte peu actif —
   demande Sebastien 2026-08-28). Le telephone devient l'element le plus
   visible du bloc, le lien vers le site de la clinique reste en clair. */
.footer { padding-top: 2.6rem; padding-bottom: 1.6rem; }
.footer__identity { margin-bottom: .2rem; }
.footer__brand { font-size: 1.15rem; }
.footer__title { margin-bottom: 1rem; }
.footer__address { line-height: 1.7; }
.footer__contact-line { margin-top: .9rem; }
.footer__tel { font-size: 1.3rem; font-weight: 600; letter-spacing: .02em; display: inline-block; }
.footer__divider { margin: 1.4rem auto; }

/* --- Calendrier flottant : plus present, et il vibre un instant --- */
/* WHY: rappel discret toutes les 5 s — decision assumee de Sebastien
   (2026-08-28), consciente des conventions contraires. Coupe sous
   prefers-reduced-motion comme tout mouvement du site. */
.fab__btn { width: 78px; height: 78px; }
.fab.visible .fab__btn img { animation: fab-vibre 5s ease-in-out infinite; }
@keyframes fab-vibre {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(-5deg) scale(1.04); }
  92% { transform: rotate(4deg) scale(1.04); }
  94% { transform: rotate(-3deg); }
  96% { transform: rotate(2deg); }
  98% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fab.visible .fab__btn img { animation: none; }
}

/* --- Reperes : une ligne unique au bas de la banniere --- */
/* WHY: ils encombraient la colonne de texte. Poses au pied du hero, sur une
   seule ligne repartie, ils ferment la banniere au lieu de la charger.
   Context: demande Sebastien 2026-08-28 */
.hero-reperes { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .8rem 2rem; list-style: none; margin: 2.8rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid rgba(184, 151, 90, .22); }
.hero-reperes li { display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; color: var(--text-body); }
.hero-reperes img { width: 26px; height: 26px; object-fit: contain; }
@media (max-width: 760px) {
  .hero-reperes { flex-direction: column; align-items: center; gap: .55rem; }
}

/* --- Boutons a degrade horizontal --- */
/* WHY: un degrade franc de gauche a droite, pas un aplat — c'est lui qui
   donne la profondeur. Les deux extremites sont choisies pour que le blanc
   garde au moins 4,9:1 sur la plus claire des deux.
   Context: demande Sebastien 2026-08-28 */
.v2-btn--or-verre { background: linear-gradient(90deg, #6B5531 0%, #866D3F 100%);
  color: #fff; border: 1px solid rgba(184, 151, 90, .45); }
.v2-btn--or-verre:hover { background: linear-gradient(90deg, #7A6238 0%, #9B7F49 100%);
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(107, 85, 49, .28); }




.v2-btn--mauve-verre { background: linear-gradient(90deg, #5B3E7E 0%, #7C5AA6 100%);
  color: #fff; border: 1px solid rgba(139, 108, 174, .45); }
.v2-btn--mauve-verre:hover { background: linear-gradient(90deg, #6A4A90 0%, #8D69B8 100%);
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(91, 62, 126, .30); }

/* --- Nav : la page courante, soulignee et affirmee --- */
.nav__mots a.nav__mot--actif { font-weight: 700; }
.nav__mots a.nav__mot--actif::after { right: 0; }
.nav__mot--dent.nav__mot--actif { color: var(--v2-gold-text); }
.nav__mot--esth.nav__mot--actif { color: #8B6CAE; }
.nav--v2.scrolled .nav__mot--dent.nav__mot--actif { color: var(--gold-light); }
.nav--v2.scrolled .nav__mot--esth.nav__mot--actif { color: #C9B8E0; }

/* La phrase d'accroche est posee, sans animation d'ecriture. */
.script-ecrit { font-family: var(--font-script, 'Dancing Script', cursive); font-size: 1.5rem;
  color: #8B6CAE; margin: .2rem 0 0; }

/* ================================================================
   BAS DE PAGE — colonnes fines, hierarchie discrete, filet de bas
   WHY: modele donne par Sebastien (le pied de page d'Apple) : du texte
   petit et calme, des titres de colonne en capitales espacees, un filet,
   puis une seule ligne de mentions legales separees par des barres.
   Rien n'y crie ; tout s'y trouve. Context: demande Sebastien 2026-08-28
   ================================================================ */
.footer { padding: 3rem 6vw 1.6rem; text-align: left; }

.footer__cols { display: grid; grid-template-columns: 1fr; gap: 2.2rem;
  max-width: 1180px; margin: 0 auto; }
@media (min-width: 760px) { .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 3rem; } }
/* Cinq colonnes : identite, contact, rendez-vous, formulaires, cabinet */
@media (min-width: 1040px) { .footer__cols { grid-template-columns: 1.2fr .85fr 1fr 1.05fr .95fr; gap: 2.6rem 2.2rem; } }

.footer__col { display: flex; flex-direction: column; align-items: flex-start; }

.footer__col-titre { margin: 0 0 .85rem; font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

.footer__identity { justify-content: flex-start; margin: 0 0 .15rem; }
.footer__brand { font-size: 1.05rem; }
.footer__title { margin: 0 0 .9rem; font-size: .78rem; }
.footer__address { margin: 0; font-size: .82rem; line-height: 1.75; }
.footer__address a { color: var(--gold); font-size: .82rem; text-decoration: none; }
.footer__address a:hover { text-decoration: underline; }

.footer__contact-line { display: flex; flex-direction: column; align-items: flex-start;
  gap: .45rem; margin: 0; }
.footer__contact-line .sep { display: none; }
.footer__tel { font-size: 1.12rem; font-weight: 600; letter-spacing: .01em; }
.footer__contact-line a[href^="mailto"] { font-size: .84rem; }

.footer__liens { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin: 0; }
.footer__liens a { font-size: .84rem; line-height: 1.5; color: var(--lavender-light); text-decoration: none; }
.footer__liens a:hover { color: #fff; text-decoration: underline; }

/* WHY: la mention clinique quitte la colonne de droite — a cote de l'adresse,
   qui est deja celle de la clinique, elle donnait l'impression de tout dire
   deux fois. Elle passe en une ligne discrete au-dessus des mentions legales.
   Le contenu reste intact : c'est une sentinelle ODQ.
   Context: demande Sebastien 2026-08-28 */
.footer__clinic-mention { max-width: 1180px; margin: 2.4rem auto 0; text-align: left;
  font-size: .72rem; line-height: 1.7; }

/* Le filet, puis la ligne unique des mentions legales */
.footer__divider { max-width: 1180px; margin: 1.3rem auto 1.1rem; width: 100%; }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem;
  max-width: 1180px; margin: 0 auto; font-size: .74rem; line-height: 1.9; text-align: left; }
.footer__legal-sep { opacity: .3; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; }

/* Toute la carte ouverte est cliquable pour la refermer (sauf ses liens). */
.carte-soin.ouverte { cursor: pointer; }
.carte-soin.ouverte a { cursor: pointer; }

/* ================================================================
   TEINTE DE MARQUE — le mauve du haut et du bas se rapproche de
   l'icone du visage plutot que de l'aubergine brune.
   WHY: mesure sur icone-visage-bulle.webp — mauve moyen #A96DCD,
   mauve profond #76329F. On retient #3D2A5E, sa version assombrie :
   franchement violette, et le blanc y garde 12,4:1.
   Context: demande Sebastien 2026-08-28
   ================================================================ */
.footer { background: #3D2A5E; }
.nav--v2.scrolled { background: rgba(61, 42, 94, .9); }
.nav--v2.scrolled .nav__inner { background: transparent; }

/* --- Voile de transition (js/v3-ui.js) --- */
.voile-transition {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(250, 246, 240, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--v2-ease);
}
.voile-transition.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .voile-transition { display: none; } }

/* --- Tout le reste est fixe (decision Sebastien 2026-08-28) --- */
/* WHY: les apparitions au defilement (.fade-in de main.js), la glissee du
   globe et celle de la bulle du portrait sont neutralisees. Le site ne bouge
   plus qu'a deux endroits : la video du hero et les bulles de l'introduction.
   La vibration du calendrier reste, elle : decision distincte du meme jour. */
.fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
.humaine-globe { opacity: 1 !important; transform: none !important; transition: none !important; }
.hero-bulle--une, .hero-bulle-ombre { opacity: 1 !important; transform: rotate(10deg) !important; transition: none !important; }
.hero-bulle-ombre { transform: none !important; }

/* ================================================================
   BAS DE PAGE DENTISTERIE — Soins + FAQ en deux colonnes, puis une
   vraie rupture mauve pour le rendez-vous.
   WHY: tout demandait le meme niveau d'attention. La hierarchie devient
   comprendre → questionner → demander un rendez-vous → questionnaire.
   Context: demande Sebastien 2026-08-28
   ================================================================ */
.bas-page { padding: 4.5rem 0 5rem; }
.bas-page__grille { display: grid; grid-template-columns: 1fr; gap: 3rem;
  max-width: 1120px; margin: 0 auto; padding: 0 6vw; }
@media (min-width: 900px) { .bas-page__grille { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }

.bas-page__titre { margin: 0 0 1.4rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--v2-gold-text); }

/* Lignes fines : plus de cartes, un filet et de l'air */
.liste-fine .accordion { border-bottom: 1px solid rgba(184, 151, 90, .18); background: none; }
.liste-fine .accordion:first-child { border-top: 1px solid rgba(184, 151, 90, .18); }
.liste-fine .accordion-header { padding: 1.15rem 0; font-size: .95rem; font-weight: 500;
  gap: .9rem; align-items: flex-start; }
.liste-fine .accordion-header:hover .accordion-title { color: #8B6CAE !important; }
/* L'icone decorative de gauche disparait : la ligne se suffit */
.liste-fine .accordion-icon { display: none; }
.liste-fine .accordion-title { line-height: 1.55; }
/* Le chevron devient un + discret qui pivote en − */
.liste-fine .accordion-chevron { position: relative; width: 13px; height: 13px; margin-top: .2rem; }
.liste-fine .accordion-chevron > * { display: none; }
.liste-fine .accordion-chevron::before,
.liste-fine .accordion-chevron::after {
  content: ''; position: absolute; left: 0; top: 6px; width: 13px; height: 1px;
  background: var(--v2-gold-text); transition: transform .35s var(--v2-ease);
}
.liste-fine .accordion-chevron::after { transform: rotate(90deg); }
.liste-fine .accordion-header[aria-expanded="true"] .accordion-chevron::after { transform: rotate(0deg); }
.liste-fine .accordion-content { padding: 0 0 1.25rem; font-size: .88rem; line-height: 1.8; }

/* --- La rupture mauve du rendez-vous --- */
.form-section--rupture { background: linear-gradient(170deg, #4A3470 0%, #3D2A5E 100%); padding: 4.5rem 1.5rem 5rem; }
.form-section--rupture .form-section__header { text-align: center; max-width: 34rem; margin: 0 auto 2.4rem; }
.form-section--rupture .form-section__header h2 { margin: 0; color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.25; }
.form-section--rupture .form-section__header h2 span { color: var(--gold-light); }
.form-section--rupture .form-intro__lead { margin: 1.1rem 0 .5rem; color: #fff; font-size: 1.02rem; }
.form-section--rupture .form-intro__suite { margin: 0; color: rgba(255, 255, 255, .72); font-size: .92rem; line-height: 1.8; }
/* Le formulaire flotte dans un panneau ivoire tres leger */
.form-section--rupture .form { max-width: 34rem; margin: 0 auto; background: rgba(250, 246, 240, .97);
  border-radius: 22px; padding: 2.2rem 2rem; box-shadow: 0 24px 60px rgba(20, 12, 34, .28); }

/* --- Questionnaire : un bouton editorial, plus une carte --- */
.zone-questionnaire { padding: 3.5rem 1.5rem 4rem; background: var(--v2-ivory); }
.questionnaire { display: flex; align-items: center; gap: 1.1rem; max-width: 30rem; margin: 0 auto;
  padding: 1.05rem 1.5rem; background: rgba(255, 253, 249, .7);
  border: 1px solid rgba(184, 151, 90, .38); border-radius: 60px; text-decoration: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .28s var(--v2-ease), border-color .28s var(--v2-ease), box-shadow .28s var(--v2-ease); }
.questionnaire:hover { transform: translateY(-2px); border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(45, 34, 53, .10); }
.questionnaire__icone { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.questionnaire__texte { display: flex; flex-direction: column; gap: .25rem; }
.questionnaire__titre { display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--v2-gold-text); }
.questionnaire__titre svg { width: 14px; height: 14px; }
.questionnaire__note { font-size: .78rem; color: var(--text-muted); }

/* La mention professionnelle sous le titre : un cran plus presente */
.v2-hero__mention { font-size: .95rem; color: var(--text-body); letter-spacing: .01em; }

/* --- Le disclaimer rejoint la zone du questionnaire --- */
/* WHY: il flottait seul sur une bande blanche entre le questionnaire et le
   pied de page, ce qui lui donnait autant de poids qu'une section. Pose sous
   la pastille, sur le meme fond de lin, il redevient une note de bas de bloc
   et laisse le questionnaire ressortir. Le texte est une sentinelle ODQ,
   inchange. Context: demande Sebastien 2026-08-28 */
.zone-questionnaire .disclaimer-bottom {
  max-width: 30rem;
  margin: 1.6rem auto 0;
  padding: 0 .5rem;
  font-size: .7rem;
  line-height: 1.65;
  color: rgba(100, 90, 110, .58);
}

/* --- Debordement horizontal sur telephone --- */
/* WHY: a 375 px le document faisait 390 px de large et se decalait
   lateralement. Coupable identifie par elimination : le drop-shadow de la
   photo de la section humaine, dont le flou de 28 px gonfle la largeur
   defilable. `clip` plutot que `hidden` : hidden sur un ancetre casserait le
   position:sticky de la scene d'ouverture. Context: audit 2026-08-28 */
.v2-humaine { overflow-x: clip; }
@supports not (overflow-x: clip) { .v2-humaine { overflow-x: hidden; } }

/* ================================================================
   CORRECTIFS ISSUS DE L'AUDIT DU 2026-08-28 (Lea) + demandes Sebastien
   ================================================================ */

/* --- 1. Boutons d'envoi des formulaires : contraste AA --- */
/* WHY: le submit de dentisterie etait en --gold (#B8975A), blanc dessus a
   2,4:1 ; celui d'esthetique en #8B6CAE a 4,0:1. Les deux echouaient AA.
   On reprend les degrades deja mesures (>= 4,9:1). */
body[data-page="dentisterie"] .form__submit,
.form-section--rupture .form__submit {
  background: linear-gradient(90deg, #6B5531 0%, #866D3F 100%) !important;
  color: #fff !important;
  border: none !important;
}
.form-section--esth .form__submit,
.form-section--rupture.form-section--esth .form__submit {
  background: linear-gradient(90deg, #5B3E7E 0%, #7C5AA6 100%) !important;
}
body[data-page="dentisterie"] .form__submit:hover,
.form-section--rupture .form__submit:hover {
  background: linear-gradient(90deg, #7A6238 0%, #9B7F49 100%) !important;
}
.form-section--esth .form__submit:hover {
  background: linear-gradient(90deg, #6A4A90 0%, #8D69B8 100%) !important;
}

/* --- 2. Page esthetique : son bandeau ne doit pas s'ecrire en or --- */
/* WHY: .form-section--esth n'avait aucune regle ; c'est la variante or de la
   dentisterie qui s'appliquait sur la page mauve. */
.form-section--esth .form-section__header h2 span { color: #D6C4EC; }

/* --- 3. Le fond de page porte la lumiere, pas les composants --- */
/* WHY: une seule source, en haut a gauche. Un degrade sur chaque element
   dissout le point de lumiere et fait perdre l'effet premium. */
body.v2 {
  background:
    radial-gradient(1200px 780px at 12% -8%, #FFFCF7 0%, rgba(255, 252, 247, 0) 62%),
    radial-gradient(900px 620px at 102% 4%, rgba(184, 169, 204, .13) 0%, rgba(184, 169, 204, 0) 66%),
    radial-gradient(1000px 700px at 50% 108%, rgba(184, 151, 90, .07) 0%, rgba(184, 151, 90, 0) 64%),
    var(--v2-ivory);
  background-attachment: fixed;
}
/* Les pages de service posaient un ivoire opaque par-dessus ce degrade. */
.v2-hero--page { background: transparent; }

/* --- 4. Photos : bord fondu, sans ombre qui redessine le contour --- */
/* WHY: une ombre portee retrace exactement le bord qu'on vient d'effacer. */
.v2-katty__photo {
  box-shadow: none;
  -webkit-mask-image: radial-gradient(118% 118% at 50% 46%, #000 56%, rgba(0, 0, 0, .45) 79%, transparent 97%);
  mask-image: radial-gradient(118% 118% at 50% 46%, #000 56%, rgba(0, 0, 0, .45) 79%, transparent 97%);
}

/* --- 5. Une variable pour le mauve, au lieu de 5 litteraux --- */
:root { --v2-mauve: #8B6CAE; }

/* --- Sélecteur de langue du pied de page --- */
/* WHY: le lien hreflang dit aux moteurs et aux assistants que les deux
   versions sont la meme page en deux langues, pas du contenu duplique. Le
   selecteur visible sert le visiteur ; les balises <link> servent les
   machines. Les deux sont necessaires. Context: demande Sebastien 2026-08-28 */
.footer__langue { display: flex; align-items: center; gap: .55rem; max-width: 1180px;
  margin: 2rem auto 0; font-size: .78rem; letter-spacing: .04em; }
.footer__langue strong { font-weight: 600; color: #fff; }
.footer__langue a { color: var(--lavender-light); text-decoration: none; }
.footer__langue a:hover { color: #fff; text-decoration: underline; }
.footer__langue span { opacity: .35; }