/* GÉNÉRÉ par build.py depuis src/css/style.css (px -> rem) — ne pas modifier ici. */
/* Clinique dentaire Smile Care — feuille SOURCE (valeurs en px, converties en rem par build.py).
   Maquette Figma « Accueil V02 – Livraison dev » : bureau 1920 px, mobile 390 px.
   Les tailles de texte sont interpolées entre les deux maquettes ; les espacements de section
   suivent le bureau (facteur --k) puis prennent les valeurs mobiles sous 768 px. */

/* ------------------------------------------------------------------ polices (auto-hébergées, OFL) */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); }

/* ------------------------------------------------------------------ tokens */
:root {
  /* couleurs relevées dans la maquette */
  /* Couleurs exactes de la maquette Figma (décision du client, 2026-10-21) */
  --c-sarcelle: #54bac4;        /* marque : titres, accents, boutons (bureau), fond de la FAQ */
  --c-sarcelle-fonce: #008991;  /* boutons pleins (mobile) ; survols (couleur de la palette Figma) */
  --c-marine: #15384e;          /* Nos traitements, pied de page */
  --c-encre: #1a1a1a;           /* texte */
  --c-teinte: #ddf1f3;          /* sarcelle à 20 % sur blanc : accueil, approche, dentiste */
  --c-blanc: #fff;
  --c-blanc-0: rgb(255 255 255 / 0);
  --c-filet: #000;              /* filets des listes (SVG noirs de la maquette) */
  --c-gris-carte: #e3e3e3;      /* emplacement de la carte */
  --c-gris-libelle: #8c8c8c;    /* libellés d'emplacements d'image */
  --btn-primaire: var(--c-sarcelle);
  --faq-filet: var(--c-blanc);

  --f: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* échelle typographique : 390 px (mobile) → 1920 px (bureau) */
  --t-h1: clamp(2.125rem, 1.7744rem + 1.438vw, 3.5rem);
  --t-h2: clamp(1.75rem, 1.5588rem + .7843vw, 2.5rem);
  --t-h2-dentiste: clamp(1.75rem, 1.6225rem + .5229vw, 2.25rem);
  --t-h3: clamp(1.25rem, 1.2181rem + .1307vw, 1.375rem);
  --t-texte: clamp(1rem, 0.9681rem + .1307vw, 1.125rem);
  --t-surtitre: clamp(0.8125rem, 0.7969rem + .0654vw, 0.875rem);
  --t-etiquette: clamp(0.75rem, 0.7344rem + .0654vw, 0.8125rem);
  --t-faq-q: clamp(1.0625rem, 1.015rem + .1961vw, 1.25rem);
  --t-faq-r: clamp(1rem, 0.9844rem + .0654vw, 1.0625rem);
  --t-faq-icone: clamp(1.5rem, 1.4363rem + .2614vw, 1.75rem);
  --lh-texte: 1.5rem;

  /* conteneur : 1640 px de contenu ; marge de 20 px à 390 et de 140 px à 1920 */
  --container: 102.5rem;
  --gutter: clamp(1.25rem, 7.8431vw - 0.6619rem, 8.75rem);
  --k: 1;                       /* facteur des espacements de section */
  --r-image: 1.5625rem;
  --entete-collant-hauteur: 6rem;
}

/* Au-delà de la maquette (1920 px), tout s'étire proportionnellement (1rem = 100vw / 120). */
@media (min-width: 1921px) { html { font-size: calc(100vw / 120); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--t-texte)/var(--lh-texte) var(--f); color: var(--c-encre); background: var(--c-blanc); }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f); font-weight: 600; margin: 0; }
p { margin: 0; }
/* Paragraphes justifiés à la demande de la cliente (2026-10-26) ; les blocs centrés et les aides de champ gardent leur alignement ; la césure évite les grands blancs en colonne étroite. */
main p { text-align: justify; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
main :is(.hero__texte, .tete--centre, .rdv, .page-tete--centre, .texte-centre, .field) p { text-align: inherit; }
strong, .fort { font-weight: 700; }
:focus-visible { outline: 0.1875rem solid var(--c-marine); outline-offset: 0.1875rem; }
.section--marine :focus-visible, .site-footer :focus-visible { outline-color: var(--c-blanc); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -6.25rem; padding: 0.5rem 0.875rem; background: var(--c-blanc); color: var(--c-encre); border-radius: 0.375rem; z-index: 1000; }
.skip-link:focus { top: 1rem; }

/* Marqueurs d'atelier : contenu à fournir (retirer avant la mise en ligne). */
.is-placeholder { color: #b23c3c; font-style: italic; background: #fff4f4; outline: 1px dashed #b23c3c; outline-offset: 0.125rem; }

/* ------------------------------------------------------------------ mise en page */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-top: calc(var(--pt, 7.5rem) * var(--k)); padding-bottom: calc(var(--pb, 7.5rem) * var(--k)); }
.section--teinte { background: var(--c-teinte); }
.section--marine { background: var(--c-marine); color: var(--c-blanc); }
/* fond sarcelle, texte blanc : choix du client (2,28:1, sous le seuil AA de 4,5:1) */
.section--sarcelle { background: var(--c-sarcelle); color: var(--c-blanc); }

.surtitre { font-weight: 600; font-size: var(--t-surtitre); line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; }
.titre-2 { font-size: var(--t-h2); line-height: 1.2; color: var(--c-sarcelle); }
.section--marine .titre-2, .section--sarcelle .titre-2 { color: var(--c-blanc); }

/* deux colonnes 674 / 812 avec 154 d'écart (dentiste, pourquoi, nous joindre) */
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 674fr) minmax(0, 812fr); column-gap: clamp(2.5rem, 8.0208vw, 9.625rem); }

/* listes séparées par des filets (approche, pourquoi) */
.liste-filets { margin: 0; padding: 0; list-style: none; }
.liste-filets > * { padding-block: var(--filet-espace, 1.6875rem); }
.liste-filets > * + * { border-top: 1px solid var(--c-filet); }
.liste-filets > :first-child { padding-top: 0; }
.liste-filets > :last-child { padding-bottom: 0; }

/* ------------------------------------------------------------------ boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.75rem; border: 0; border-radius: 62.4375rem; font: 600 1rem/1.5rem var(--f); text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn--primaire { background: var(--btn-primaire); color: var(--c-blanc); }
.btn--primaire:hover { background: var(--c-sarcelle-fonce); }
.btn--contour { border: 0.125rem solid var(--c-sarcelle); background: transparent; color: var(--c-sarcelle); }
.btn--contour:hover { border-color: var(--c-sarcelle-fonce); background: var(--c-sarcelle-fonce); color: var(--c-blanc); }
.btn--contour-blanc { border: 0.125rem solid var(--c-blanc); padding-inline: 1.5rem; background: transparent; color: var(--c-blanc); }
.btn--contour-blanc:hover { background: var(--c-blanc); color: var(--c-marine); }
.boutons { display: flex; flex-wrap: wrap; gap: var(--boutons-gap, 0.75rem); }

/* ------------------------------------------------------------------ en-tête (transparent, superposé à l'accueil) */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 100; }
.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav brand actions"; align-items: start; padding-top: 1.4375rem; }
.brand { grid-area: brand; display: block; }
.brand img { width: 14.5rem; }   /* 203 dans la maquette, agrandi à la demande du client (2026-10-23) */
.site-nav { grid-area: nav; display: flex; align-items: center; min-height: 3.25rem; margin-top: 2.3125rem; }
.site-nav__list { display: flex; align-items: center; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-nav__link { display: inline-block; font-size: 1rem; line-height: 1.5rem; color: var(--c-encre); text-decoration: none; }
.site-nav__link:hover { color: var(--c-sarcelle-fonce); }
.site-nav__link[aria-current] { font-weight: 700; }
/* sous-menu « Nos services » (mécanique : js/main.js) : panneau au survol / au clavier, chevron pour le tactile */
.site-nav__item { position: relative; display: flex; align-items: center; gap: 0.125rem; }
.site-nav__more { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.5rem; padding: 0; border: 0; background: none; color: var(--c-encre); cursor: pointer; }
.site-nav__more::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-right: 0.125rem solid currentColor; border-bottom: 0.125rem solid currentColor; transform: translateY(-0.125rem) rotate(45deg); transition: transform .2s ease; }
.site-nav__item.is-open .site-nav__more::before { transform: translateY(0.125rem) rotate(-135deg); }
.site-nav__sub { position: absolute; top: calc(100% + 0.625rem); left: -1.25rem; z-index: 10; min-width: 20rem; margin: 0; padding: 0.625rem 0; list-style: none; border-radius: 1rem; background: var(--c-blanc); box-shadow: 0 0.875rem 2.25rem rgb(21 56 78 / .16); opacity: 0; visibility: hidden; transform: translateY(0.375rem); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.site-nav__sub::before { content: ""; position: absolute; inset: -0.75rem 0 auto; height: 0.75rem; }   /* pont : le survol ne se perd pas entre l'onglet et le panneau */
.site-nav__item:hover .site-nav__sub, .site-nav__item:focus-within .site-nav__sub, .site-nav__item.is-open .site-nav__sub { opacity: 1; visibility: visible; transform: none; }
.site-nav__item.is-ferme:not(.is-open) .site-nav__sub { opacity: 0; visibility: hidden; transform: translateY(0.375rem); }   /* refermé avec Échap (main.js) */
.site-nav__sub a { display: block; padding: 0.625rem 1.25rem; font-size: 0.9375rem; line-height: 1.4; color: var(--c-encre); text-decoration: none; white-space: nowrap; }
.site-nav__sub a:hover, .site-nav__sub a[aria-current="page"] { background: var(--c-teinte); color: var(--c-sarcelle-fonce); }
.site-nav__rdv, .btn--appeler, .nav-toggle { display: none; }
.site-header__actions { grid-area: actions; justify-self: end; display: flex; gap: 0.75rem; margin-top: 2.3125rem; }
.btn--tel { padding-inline: 1.5625rem; }

/* menu collant compact (mécanique : module animations-web) : 80 px pour 184 px au repos */
.site-header.is-stuck .site-header__inner { align-items: center; padding-block: 0.5rem; }
.site-header.is-stuck .brand img { width: 5.75rem; }
.site-header.is-stuck .site-nav, .site-header.is-stuck .site-header__actions { margin-top: 0; }
.site-header.is-stuck .site-header__actions .btn { min-height: 2.75rem; }

/* bouton du menu mobile : trois traits de 24 × 2 */
.nav-toggle { position: relative; width: 2.75rem; height: 3rem; padding: 0; border: 0; background: transparent; color: var(--c-encre); cursor: pointer; }
.nav-toggle span:first-child, .nav-toggle span:first-child::before, .nav-toggle span:first-child::after { position: absolute; left: 0.625rem; width: 1.5rem; height: 0.125rem; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle span:first-child { top: 1.4375rem; }
.nav-toggle span:first-child::before { content: ""; top: -0.5rem; left: 0; }
.nav-toggle span:first-child::after { content: ""; top: 0.5rem; left: 0; }
.nav-toggle[aria-expanded="true"] span:first-child { background: transparent; }
.nav-toggle[aria-expanded="true"] span:first-child::before { background: var(--c-encre); transform: translateY(0.5rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:first-child::after { background: var(--c-encre); transform: translateY(-0.5rem) rotate(-45deg); }

/* ------------------------------------------------------------------ 01 accueil */
.hero { background: linear-gradient(-4.15deg, var(--c-blanc-0) 14.94%, var(--c-blanc) 77.33%) top / 100% 105.9% no-repeat, var(--c-teinte); }
.hero__texte { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__texte .surtitre { margin-bottom: 1.125rem; }
.hero h1 { max-width: 14.5em; margin-bottom: 0.875rem; font-size: var(--t-h1); line-height: 1.1; color: var(--c-sarcelle); }
.hero__chapeau { max-width: 57.8125rem; margin-bottom: 2rem; }
.hero__texte .boutons { justify-content: center; }
.hero__images { display: grid; grid-template-columns: minmax(0, 812fr) minmax(0, 802fr); grid-template-rows: auto auto; gap: 1.25rem 1.5625rem; margin-top: 5.6875rem; }
.hero__image { position: relative; overflow: hidden; border-radius: var(--r-image); }
.hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__image--principale { grid-row: 1 / span 2; aspect-ratio: 812 / 845; }
.hero__logo-rond { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero__image .hero__logo-rond img { position: static; width: auto; height: var(--logo-rond-h, 69.6%); object-fit: contain; }

/* ------------------------------------------------------------------ 02 notre approche */
.tete--centre { text-align: center; }
.approche .tete .surtitre { margin-bottom: 0.75rem; }
.approche__grille { display: grid; grid-template-columns: minmax(0, 779fr) minmax(0, 672fr); column-gap: clamp(2.5rem, 9.9479vw, 11.9375rem); align-items: start; margin-top: 6.25rem; }
.approche__texte { padding-top: 1.25rem; }
.approche__texte .btn { margin-top: 3.0625rem; }
.approche__image { overflow: hidden; border-radius: var(--r-image); aspect-ratio: 672 / 608.6; }
.approche__image img { width: 100%; height: 100%; object-fit: cover; }
/* logotype « Smile Care » : réduit à environ 75 % et centré à la demande de la cliente (2026-10-23 ; pleine largeur dans la maquette) */
.logotype { width: 75%; margin: 4.875rem auto 0; }

/* ------------------------------------------------------------------ 03 nos traitements */
.traitements .tete .surtitre { margin-bottom: 1rem; }
.traitements .titre-2 { max-width: 49.6875rem; }
.tete__chapeau { max-width: 50.625rem; margin-top: 1rem; }
.traitements__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2.875rem 0 0; padding: 0; list-style: none; }
.traitement { display: flex; flex-direction: column; }
.traitement__image { overflow: hidden; border-radius: var(--r-image); aspect-ratio: 536 / 475; }
.traitement__image img { width: 100%; height: 100%; object-fit: cover; }
.traitement__corps { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 3.125rem 1.5rem 0; }
.traitement h3 { margin-bottom: 1.1875rem; font-size: var(--t-h3); line-height: 1.3; color: var(--c-sarcelle); }
.traitement h3 .precision { font-weight: 400; }
.traitement p { margin-bottom: 2.875rem; }
.traitement .btn { margin-top: auto; }
/* « Quel traitement vous convient ? » : texte du client sous les cartes, sur la grille 674 / 812 */
.traitements__conseil { align-items: baseline; margin-top: 6rem; padding-top: 3rem; border-top: 1px solid rgb(255 255 255 / .3); }
.traitements__conseil h3 { font-size: var(--t-h2-dentiste); line-height: 1.2; color: var(--c-sarcelle); }
.traitements__conseil p { max-width: 48.6875rem; }

/* ------------------------------------------------------------------ 04 bandeau rendez-vous */
.rdv { text-align: center; }
.rdv .titre-2 { max-width: 68rem; margin-inline: auto; line-height: 1.5; }
.rdv p { max-width: 47.1875rem; margin: 1.1875rem auto 0; }
.rdv .boutons { --boutons-gap: 1.0625rem; justify-content: center; margin-top: 2.5rem; }
.btn--tel-large { min-width: 13.25rem; padding-inline: 1.5625rem; }

/* ------------------------------------------------------------------ 05 notre dentiste */
.dentiste .deux-colonnes { grid-template-columns: minmax(0, 560fr) minmax(0, 926fr); align-items: center; }
/* photo verticale entière (choix du client, 2026-10-23) au lieu du cadre 674 × 536 de la maquette */
.dentiste__portrait { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-image); background: var(--c-blanc); }
.dentiste__portrait img { width: 100%; height: 100%; object-fit: cover; }
.dentiste__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; max-width: 50.75rem; }
.dentiste__texte .tete { display: flex; flex-direction: column; gap: 1.25rem; }
.dentiste__texte .surtitre { font-weight: 500; }
.dentiste .titre-2 { font-size: var(--t-h2-dentiste); }

/* ------------------------------------------------------------------ 06 pourquoi Smile Care */
.pourquoi .titre-2 { max-width: 35.1875rem; }
.pourquoi__intro .fort { margin-top: 1.25rem; }
.pourquoi__liste { --filet-espace: 1.375rem; max-width: 48.6875rem; margin-top: -0.125rem; }
.pourquoi__liste li { line-height: 1.5; }

/* ------------------------------------------------------------------ 07 questions fréquentes */
.faq__inner { max-width: 68rem; }
.faq .titre-2 { margin-bottom: 2.5rem; line-height: 1.5; }
.faq__item { padding-block: 1.5rem; border-bottom: 1px solid var(--faq-filet); }
.faq__titre { font: inherit; }
.faq__question { display: flex; align-items: center; gap: 1.5rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: 600 var(--t-faq-q)/1.4 var(--f); text-align: left; cursor: pointer; }
.faq__question > span:first-child { flex: 1; }
.faq__icone { flex-shrink: 0; font-weight: 400; font-size: var(--t-faq-icone); line-height: 1.5; }
.faq__icone::before { content: "+"; }
.faq__question[aria-expanded="true"] .faq__icone::before { content: "–"; }
.faq__reponse { margin-top: 0.75rem; font-size: var(--t-faq-r); line-height: 1.6; }

/* ------------------------------------------------------------------ 08 nous trouver et nous joindre */
.joindre .deux-colonnes { align-items: center; }
.joindre__coord { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.joindre .titre-2 { color: var(--c-encre); }
.joindre__nom { font-weight: 600; font-size: var(--t-h3); line-height: 1.5; color: var(--c-sarcelle); }
.joindre__liste { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; }
.joindre__liste div { display: flex; flex-direction: column; gap: 0.25rem; }
.joindre__liste dt { font-weight: 500; font-size: var(--t-etiquette); line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; }
.joindre__liste dd { margin: 0; line-height: 1.5; }
.joindre__tel, .joindre__courriel { font-weight: 700; text-decoration: none; }
.joindre__accent { color: var(--c-sarcelle); }
.carte { position: relative; aspect-ratio: 811 / 460; background: var(--c-gris-carte); }   /* gris pendant le chargement de la carte Google */
.carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ 09 pied de page */
.site-footer { padding-block: 1.5625rem; background: var(--c-marine); color: var(--c-blanc); font-size: 1rem; line-height: 1.5rem; }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.site-footer__logo { justify-self: start; }
.site-footer__logo img { width: 12.5rem; }
.site-footer__coord, .site-footer__mentions { padding-top: 1.25rem; }
.site-footer__coord { text-align: center; }
.site-footer__mentions { justify-self: end; white-space: nowrap; }
.site-footer a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------------ points de rupture (px réels) */
@media (max-width: 1439px) {
  :root { --k: .8; }
  .site-footer__inner { grid-template-columns: 1fr; justify-items: center; gap: 0.75rem; text-align: center; }
  .site-footer__logo, .site-footer__mentions { justify-self: center; }
  .site-footer__coord, .site-footer__mentions { padding-top: 0; }
}
@media (max-width: 1499px) {
  .brand img { width: 11.5625rem; }
  .site-nav__list { gap: 0.625rem; }
  .site-nav__link { font-size: 0.9375rem; }
  .site-header__actions { gap: 0.5rem; }
  .site-header__actions .btn { padding-inline: 1.25rem; font-size: 0.9375rem; }
}
@media (max-width: 1349px) {
  .brand img { width: 10.9375rem; }   /* garde ≥ 20 px entre le menu (avec sous-menu) et le logo */
}
@media (max-width: 1279px) {
  /* en-tête compact : logo, Appeler, menu */
  .site-header__inner { grid-template-columns: auto 1fr auto auto; grid-template-areas: "brand . appeler toggle" "nav nav nav nav"; align-items: center; column-gap: 0.5rem; padding-block: 1rem; }
  .brand img, .site-header.is-stuck .brand img { width: 7.25rem; }
  .btn--appeler { grid-area: appeler; display: inline-flex; min-height: 2.8125rem; padding-inline: 0.875rem; font-size: 0.875rem; line-height: 1.3125rem; }
  .nav-toggle { grid-area: toggle; display: block; }
  .site-header__actions { display: none; }
  .site-nav { display: block; min-height: 0; margin-top: 0.5rem; }
  .site-nav[hidden] { display: none; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 1rem; }
  .site-nav__link { display: block; padding: 0.875rem 0; border-bottom: 1px solid var(--c-teinte); font-size: 1.125rem; font-weight: 600; }
  .site-nav__link[aria-current] { color: var(--c-sarcelle-fonce); }
  /* sous-menu en accordéon dans le menu mobile */
  .site-nav__item { flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--c-teinte); }
  .site-nav__item > .site-nav__link { flex: 1; border-bottom: 0; }
  .site-nav__more { width: 2.75rem; height: 2.75rem; }
  .site-nav__sub { position: static; display: none; flex-basis: 100%; min-width: 0; padding: 0 0 0.625rem 1rem; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .site-nav__sub::before { content: none; }
  .site-nav__item.is-open .site-nav__sub { display: block; }
  .site-nav__sub a { padding: 0.625rem 0; font-size: 1rem; white-space: normal; }
  .site-nav__sub a:hover, .site-nav__sub a[aria-current="page"] { background: none; }
  .site-nav__rdv { display: block; padding-top: 1.25rem; }
  .site-nav__rdv .btn { width: 100%; }
  .site-header.is-open { background: var(--c-blanc); box-shadow: 0 0.75rem 2rem rgb(21 56 78 / .12); }
  .site-header.is-stuck .site-header__inner { padding-block: 0.5rem; }
  :root { --entete-collant-hauteur: 5rem; }
}
@media (max-width: 1439px) {
  /* sous 1440, le retrait de 24 px ne laisse plus la place au bouton le plus long (342 px) */
  .traitement__corps { padding-inline: 0; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* cartes horizontales : photo à gauche, texte à droite */
  .traitements__grille { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .traitement { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 2.5rem; align-items: center; }
  .traitement__corps { padding: 0; }
  .traitement p { margin-bottom: 1.5rem; }
}
@media (max-width: 1023px) {
  :root { --k: .65; }
  .deux-colonnes, .approche__grille { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .approche__image { aspect-ratio: 350 / 320; max-height: 35rem; width: 100%; }
  .dentiste .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
  .dentiste__portrait { width: 100%; max-width: 30rem; }
  .carte { aspect-ratio: 350 / 260; }
}
@media (max-width: 767px) {
  .traitements__grille { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .traitement__image { aspect-ratio: 350 / 240; }
  .traitement__corps { padding: 1rem 0 0; }
  .traitement h3 { margin-bottom: 1rem; }
  .traitement p { margin-bottom: 1.5rem; }
}
@media (max-width: 767px) {
  :root { --btn-primaire: var(--c-sarcelle-fonce); --faq-filet: rgb(255 255 255 / .6); --r-image: 1.25rem; --entete-collant-hauteur: 4.5rem; }
  .section { padding-top: var(--pt-m, 4rem); padding-bottom: var(--pb-m, 4rem); }
  .btn { width: 100%; }
  .btn--contour, .btn--contour-blanc { min-height: 3.5rem; padding-inline: 1.25rem; }
  .boutons { flex-direction: column; flex-wrap: nowrap; width: 100%; }

  .brand img, .site-header.is-stuck .brand img { width: 5.25rem; }
  .site-header.is-stuck .brand img { width: 3.75rem; }
  .btn--appeler { width: auto; min-height: 2.8125rem; padding-inline: 0.875rem; }

  .hero { background: linear-gradient(180deg, var(--c-blanc) 0%, var(--c-blanc-0) 100%), var(--c-teinte); }
  .hero__texte .surtitre, .hero h1 { margin-bottom: 1.25rem; }
  .hero h1 { line-height: 1.15; }
  .hero__chapeau { margin-bottom: 1.25rem; }
  .hero__images { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0.75rem; margin-top: 2rem; }
  .hero__image--principale { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 350 / 380; }
  .hero__image:not(.hero__image--principale) { aspect-ratio: 169 / 170; }
  .hero__logo-rond { --logo-rond-h: 67.3%; }

  .approche .tete .surtitre { margin-bottom: 1.25rem; }
  .approche__grille { row-gap: 1.25rem; margin-top: 1.75rem; }
  .approche__texte { padding-top: 0; }
  .liste-filets { --filet-espace: 1.25rem; }
  .approche__texte .btn { margin-top: 1.75rem; }
  .approche__image { max-height: none; }
  .logotype { width: 80%; margin: 1.25rem auto 0; }

  .traitements .tete .surtitre { margin-bottom: 1rem; }
  .traitements__grille { margin-top: 2.5rem; }
  .traitements__conseil { margin-top: 3rem; padding-top: 2rem; }

  .rdv .titre-2 { line-height: 1.2; }
  .rdv p { margin-top: 1rem; line-height: 1.6; }
  .rdv .boutons { --boutons-gap: 0.75rem; margin-top: 1.5rem; }
  .btn--tel-large { min-width: 0; }

  .deux-colonnes { row-gap: 1rem; }
  .dentiste__portrait { max-width: none; }
  .dentiste__texte { gap: 1rem; }
  .dentiste__texte .tete { gap: 0.75rem; padding-top: 1rem; }
  .dentiste__texte .surtitre { font-weight: 600; }
  .dentiste__texte .btn { margin-top: 0.5rem; }

  .pourquoi__intro .fort { margin-top: 1rem; }
  .pourquoi__liste { --filet-espace: 1rem; margin-top: 1rem; }

  .faq .titre-2 { margin-bottom: 1.5rem; }
  .faq__item { padding-block: 1.25rem; }
  .faq__question { align-items: flex-start; gap: 1rem; }

  .joindre__coord, .joindre__liste { gap: 1rem; }
  .joindre__coord .btn { margin-top: 0.5rem; }
  .carte { aspect-ratio: auto; height: 16.25rem; }

  .site-footer { padding-block: 2.5rem; font-size: 0.875rem; line-height: 1.6; }
  .site-footer__inner { gap: 1rem; }
  .site-footer__logo img { width: 6.875rem; }
  .site-footer__sep { display: none; }
  .site-footer__coord a { display: block; }
  .site-footer__mentions { font-size: 0.8125rem; white-space: normal; }
}
@media print {
  .site-header, .nav-toggle, .btn, .carte { display: none; }
  .hero, .section--teinte, .section--marine, .section--sarcelle, .site-footer { background: none; color: #000; }
  .section--marine .titre-2, .section--sarcelle .titre-2 { color: #000; }
}

/* ------------------------------------------------------------------ 10 pages intérieures
   Aucune maquette pour ces pages (2026-10-21) : composées avec les jetons et les blocs de l'accueil
   (surtitre, titre-2, deux-colonnes, liste-filets, FAQ, bandeau rdv, boutons, carte Google).
   À faire valider par la designer. Espacements de bureau en px, repris par --k puis --pt-m / --pb-m. */
:root {
  --c-erreur: #b3261e;              /* erreurs du formulaire : 6,54:1 sur blanc, 5,59:1 sur la teinte */
  --c-bord-champ: #888888;          /* bordure des champs, gris clair demandé par le client (2026-10-22) : le plus clair
                                       qui garde 3:1 sur la teinte du formulaire (3,03:1) et sur blanc (3,55:1) */
}

/* tête de page : teinte sous un voile blanc (comme l'accueil mobile), texte à gauche, image à droite */
.page-tete { background: linear-gradient(180deg, var(--c-blanc) 0%, var(--c-blanc-0) 100%), var(--c-teinte); }
.page-tete__grille { display: grid; grid-template-columns: minmax(0, 779fr) minmax(0, 672fr); column-gap: clamp(2.5rem, 9.9479vw, 11.9375rem); align-items: center; }
.page-tete__grille .dentiste__portrait { width: 100%; max-width: 33.75rem; justify-self: end; }
.page-tete__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.page-tete h1 { font-size: var(--t-h1); line-height: 1.1; color: var(--c-sarcelle); }
.page-tete__accroche { font-weight: 600; font-size: var(--t-h3); line-height: 1.4; }
.page-tete__texte .boutons { margin-top: 0.75rem; }
.page-tete__image { overflow: hidden; border-radius: var(--r-image); aspect-ratio: 536 / 475; }
.page-tete__image img { width: 100%; height: 100%; object-fit: cover; }
.page-tete--centre .page-tete__texte { align-items: center; max-width: 57.8125rem; margin-inline: auto; text-align: center; }
.page-tete--centre .fil-ariane ol, .page-tete--centre .boutons { justify-content: center; }
.page-tete--seule { min-height: 100vh; }   /* pages de retour du formulaire : le pied reste sous la ligne de flottaison */

/* fil d'Ariane, à la place du surtitre */
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.625rem; margin: 0; padding: 0; list-style: none; font-weight: 600; font-size: var(--t-surtitre); line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; }
.fil-ariane li + li::before { content: "/"; content: "/" / ""; margin-right: 0.625rem; font-weight: 400; }
.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { color: var(--c-sarcelle-fonce); text-decoration: underline; }
.fil-ariane [aria-current] { color: var(--c-sarcelle); }

/* texte courant : paragraphes espacés */
.prose > * + * { margin-top: 1.25rem; }

/* intro à gauche, liste à filets à droite (comme « Pourquoi consulter ») */
.bloc-intro .titre-2 { margin-bottom: 1.5rem; }
.liste-filets--points { --filet-espace: 1.375rem; }
.liste-filets--points li { line-height: 1.5; }
.apres-liste { margin-top: 1.6875rem; padding-top: 1.6875rem; border-top: 1px solid var(--c-filet); }

/* titre à gauche, texte à droite ; blocs successifs séparés par un filet */
.titre-texte { align-items: start; }
.titre-texte + .titre-texte { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--c-filet); }

/* deux encadrés blancs sur la teinte */
.encadres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5625rem; }
.encadre { padding: 4rem 3.5rem; border-radius: var(--r-image); background: var(--c-blanc); }
.encadre .titre-2 { margin-bottom: 1.5rem; font-size: var(--t-h2-dentiste); }

/* trois cartes d'information (orthodontie fixe) */
.infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2.875rem 0 0; padding: 0; list-style: none; }
.info { padding: 2.5rem 2rem; border-radius: var(--r-image); background: var(--c-teinte); }
.info h3 { margin-bottom: 1rem; font-size: var(--t-h3); line-height: 1.3; color: var(--c-sarcelle); }
.infos__suite { max-width: 50.625rem; margin-top: 2.5rem; }

/* texte centré */
.texte-centre { text-align: center; }
.texte-centre .titre-2 { margin-bottom: 1.5rem; }
.texte-centre p { max-width: 56.25rem; margin-inline: auto; }
.texte-centre p + p { margin-top: 1.25rem; }

/* nous joindre : coordonnées et carte à gauche, formulaire à droite */
.contact { display: grid; grid-template-columns: minmax(0, 674fr) minmax(0, 812fr); grid-template-areas: "coord formulaire" "carte formulaire"; column-gap: clamp(2.5rem, 8.0208vw, 9.625rem); row-gap: 3rem; align-items: start; }
.contact__coord { grid-area: coord; display: flex; flex-direction: column; gap: 2.5rem; }
.contact__coord section { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.contact .carte { grid-area: carte; }
.formulaire { grid-area: formulaire; padding: 3.5rem 3rem; border-radius: var(--r-image); background: var(--c-teinte); }
.formulaire .titre-2 { margin-bottom: 1rem; }
.formulaire__intro { margin-bottom: 2rem; }
.formulaire .btn[type="submit"] { margin-top: 2rem; }

/* champs du formulaire */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .choix legend { font-weight: 600; font-size: 1rem; line-height: 1.5rem; }
.field__facultatif { font-weight: 400; }
.field__aide { font-size: 0.875rem; line-height: 1.5; }
.field input:not([type="radio"]):not([type="checkbox"]), .field textarea { width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem; border: 1px solid var(--c-bord-champ); border-radius: 0.75rem; background: var(--c-blanc); color: var(--c-encre); font: 400 1rem/1.5rem var(--f); }
.field textarea { min-height: 8.75rem; resize: vertical; }
/* focus des champs : sarcelle foncée plutôt que marine (3,6:1 sur la teinte, 4,2:1 sur blanc) */
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--c-sarcelle-fonce); }
.field input[type="radio"], .field input[type="checkbox"] { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--c-sarcelle); }
.choix { min-width: 0; margin: 0; padding: 0; border: 0; }
.choix legend { margin-bottom: 0.25rem; padding: 0; }
.choix__options { display: flex; flex-wrap: wrap; gap: 0 2rem; }
.choix__option { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; cursor: pointer; }
.field--case { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.field--case input[type="checkbox"] { margin-top: 0.125rem; }
.field--case label { font-size: 0.9375rem; line-height: 1.5; cursor: pointer; }
.field.is-invalid input:not([type="radio"]):not([type="checkbox"]), .field.is-invalid textarea { border: 0.125rem solid var(--c-erreur); }
.field__erreur { width: 100%; color: var(--c-erreur); font-weight: 600; font-size: 0.875rem; line-height: 1.5; }
.field--case .field__erreur { flex-basis: 100%; }
.field--case.is-invalid { flex-wrap: wrap; }
.hp { position: absolute !important; left: -625rem; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 1.25rem; padding: 0.875rem 1.125rem; border-left: 0.25rem solid var(--c-sarcelle); border-radius: 0.75rem; background: var(--c-blanc); font-size: 0.9375rem; line-height: 1.5; }
.form-note[hidden] { display: none; }
.form-note--erreur { border-left-color: var(--c-erreur); color: var(--c-erreur); }
form.is-sending [type="submit"] { opacity: .7; cursor: progress; }

@media (min-width: 1024px) and (max-width: 1279px) {
  /* colonne du formulaire trop étroite pour deux champs côte à côte */
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .page-tete__grille { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
  .page-tete__grille .dentiste__portrait { justify-self: start; }
  .page-tete__image { aspect-ratio: 350 / 240; }
  .encadres, .infos { grid-template-columns: minmax(0, 1fr); }
  .titre-texte + .titre-texte { margin-top: 3rem; padding-top: 3rem; }
  .contact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "coord" "formulaire" "carte"; row-gap: 2.5rem; }
}
@media (max-width: 767px) {
  .page-tete__texte { gap: 1rem; }
  .page-tete__texte .boutons { margin-top: 0.5rem; }
  .page-tete__grille { row-gap: 2rem; }
  .bloc-intro .titre-2, .encadre .titre-2, .texte-centre .titre-2 { margin-bottom: 1rem; }
  .liste-filets--points { --filet-espace: 1rem; }
  .apres-liste { margin-top: 1rem; padding-top: 1rem; }
  .titre-texte + .titre-texte { margin-top: 2rem; padding-top: 2rem; }
  .encadres { gap: 1rem; }
  .encadre { padding: 2rem 1.25rem; }
  .info { padding: 1.75rem 1.25rem; }
  .infos { margin-top: 2rem; }
  .infos__suite { margin-top: 1.5rem; }
  .contact__coord { gap: 2rem; }
  .contact__coord section { gap: 1rem; }
  .formulaire { padding: 2rem 1.25rem; }
  .formulaire__intro { margin-bottom: 1.5rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .formulaire .btn[type="submit"] { margin-top: 1.5rem; }
}
@media print {
  .page-tete, .encadre, .info, .formulaire { background: none; }
  .fil-ariane, .formulaire form { display: none; }
}

/* ------------------------------------------------------------------ 11 politique de confidentialité
   Blocs titre / texte des pages intérieures, titres réduits et listes à puces pour un texte long. */
.legal .titre-2 { font-size: var(--t-h2-dentiste); }
.legal .titre-texte + .titre-texte { margin-top: 3rem; padding-top: 3rem; }
.legal__maj { font-size: 0.875rem; }
.prose ul { margin: 0; padding-left: 1.25em; }
.prose li + li { margin-top: 0.375rem; }
@media (max-width: 767px) {
  .legal .titre-texte + .titre-texte { margin-top: 2rem; padding-top: 2rem; }
}

/* <animations-web> — module global, ne pas modifier ici : relancer installer.py */
/* version 1.2 (2026-09-30) */
/* Module animations-web — CSS. Sans bibliothèque. À insérer dans la feuille source du projet par
   scripts/installer.py (bloc entre marqueurs, remplacé à chaque mise à jour : ne pas le modifier dans le projet ;
   régler plutôt les variables --anim-* dans :root du projet, après ce bloc).

   Principe : rien n'est caché si JavaScript est absent, si le module ne s'est pas chargé en 3 s (classe html.anim
   retirée par le script en ligne du <head>) ou si la personne a demandé de réduire les animations. */

:root {
  --anim-duree: .75s;                         /* durée d'une apparition */
  --anim-courbe: cubic-bezier(.22, 1, .36, 1); /* départ vif, arrivée douce */
  --anim-distance: 1.75rem;                      /* déplacement de départ */
  --anim-pas: 90ms;                           /* décalage entre deux éléments d'une cascade */
  --anim-levee: -0.375rem;                         /* soulèvement des cartes au survol */
  --anim-ombre: 0 1.125rem 2.5rem rgba(20, 16, 40, .12);
}

@media (prefers-reduced-motion: no-preference) {
  /* ---- apparitions au défilement : data-anim="monter | descendre | gauche | droite | zoom | fondu" */
  html.anim [data-anim],
  html.anim [data-anim-cascade] > * {
    opacity: 0;
    transition: opacity var(--anim-duree) var(--anim-courbe), transform var(--anim-duree) var(--anim-courbe);
    transition-delay: calc(var(--anim-i, 0) * var(--anim-pas));
  }
  html.anim [data-anim="monter"],
  html.anim [data-anim-cascade] > * { transform: translateY(var(--anim-distance)); }
  html.anim [data-anim="descendre"] { transform: translateY(calc(var(--anim-distance) * -1)); }
  html.anim [data-anim="gauche"] { transform: translateX(calc(var(--anim-distance) * -1)); }
  html.anim [data-anim="droite"] { transform: translateX(var(--anim-distance)); }
  html.anim [data-anim="zoom"] { transform: scale(.94); }
  html.anim [data-anim].is-visible,
  html.anim [data-anim-cascade].is-visible > * { opacity: 1; transform: none; }

  /* ---- survol des cartes (souris et clavier) */
  .anim-survol { transition: transform .35s var(--anim-courbe), box-shadow .35s var(--anim-courbe); }
  .anim-survol:hover, .anim-survol:focus-within { transform: translateY(var(--anim-levee)); box-shadow: var(--anim-ombre); }

  /* ---- image qui s'agrandit doucement dans son cadre au survol du parent .anim-survol */
  .anim-image { overflow: hidden; }
  .anim-image > img, .anim-image > picture { transition: transform .8s var(--anim-courbe); }
  .anim-survol:hover .anim-image > img, .anim-survol:hover .anim-image > picture { transform: scale(1.04); }

  /* ---- lien souligné qui se trace au survol */
  .anim-lien { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .35s var(--anim-courbe); }
  .anim-lien:hover, .anim-lien:focus-visible { background-size: 100% 1px; }

  /* ---- bandeau défilant infini : data-defilant sur le conteneur, la piste .defilant__piste est doublée par le JS */
  [data-defilant] { overflow: hidden; }
  [data-defilant] .defilant__piste { display: flex; width: max-content; animation: anim-defiler var(--defilant-duree, 40s) linear infinite; }
  [data-defilant]:hover .defilant__piste, [data-defilant]:focus-within .defilant__piste { animation-play-state: paused; }

  /* ---- éléments décoratifs qui flottent doucement (data-flotte) */
  html.anim [data-flotte] { animation: anim-flotter var(--flotte-duree, 9s) ease-in-out infinite alternate; }
}

/* ---- menu collant compact : data-entete-collant sur <header>, classe is-stuck posée par le JS.
   Le module fournit la mécanique (fixe, fond, flou, ombre, arrivée) ; la COMPACITÉ (logo, marges, taille du menu)
   se règle dans le CSS du projet sur « .site-header.is-stuck … » : hauteur ≤ 60 % de l'en-tête normal. */
[data-entete-collant].is-stuck {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--entete-collant-fond, rgba(255, 255, 255, .92));
  -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem);
  box-shadow: var(--entete-collant-ombre, 0 0.375rem 1.5rem rgba(20, 16, 40, .08));
}
@media (prefers-reduced-motion: no-preference) {
  [data-entete-collant].is-stuck { animation: anim-entete-arrivee .35s var(--anim-courbe); }
}
/* Les ancres (#section) ne passent pas sous le menu collant. */
html { scroll-padding-top: var(--entete-collant-hauteur, 5rem); }
@keyframes anim-entete-arrivee { from { transform: translateY(-100%); } }

@keyframes anim-defiler { to { transform: translateX(-50%); } }
@keyframes anim-flotter { from { translate: 0 0; } to { translate: 0 -0.875rem; } }

/* Parallaxe (data-parallaxe) : le JS pose --parallaxe ; translate (et non transform) pour ne pas écraser un transform existant. */
[data-parallaxe] { translate: 0 var(--parallaxe, 0); will-change: translate; }

/* Compteurs : la valeur finale reste lisible par les lecteurs d'écran, la valeur qui défile est cachée pour eux. */
.anim-compteur__nombre { font-variant-numeric: tabular-nums; }
/* </animations-web> */

/* Projet, après le module d'animations : sous 768 px la gouttière (20 px) est plus étroite que le
   déplacement des entrées latérales ; elles deviennent verticales pour ne pas créer de défilement horizontal. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.anim [data-anim="gauche"], html.anim [data-anim="droite"] { transform: translateY(var(--anim-distance)); }
}