/* Sillon, orthodontie à Saint-Malo
   Couleurs du sable du Sillon à marée basse, encre des rochers, une seule teinte d'accent (caramel). */

@font-face { font-family: 'Switzer'; src: url('polices/switzer-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('polices/switzer-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('polices/switzer-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('polices/switzer-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('polices/plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('polices/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --fond: #fbf8f4;
  --fond-2: #f4eee6;
  --fond-3: #ece3d7;
  --trait: #e6dccf;
  --trait-fort: #d6c7b4;
  --sable: #e2cdb3;
  --sable-clair: #efe4d6;
  --caramel: #ad7d55;
  --caramel-fonce: #865b3a;
  --encre: #1d1915;
  --encre-2: #3a332c;
  --gris: #74685d;
  --gris-clair: #a6998c;
  --blanc: #fff;

  --texte: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --largeur: 1200px;
  --gouttiere: 24px;
  --rayon: 15px;
  --rayon-petit: 7.5px;
  --ombre-legere: 0 2px 2px rgba(29, 25, 21, 0.05);
  --courbe: cubic-bezier(0.22, 0.7, 0.18, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 16px/1.55 var(--texte);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { background: var(--fond-2); height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }
::selection { background: var(--sable); color: var(--encre); }
:target, section[id] { scroll-margin-top: 84px; }
:focus-visible { outline: 2px solid var(--caramel); outline-offset: 3px; border-radius: 4px; }

.conteneur { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.evitement:focus { top: 12px; }

/* ---------------------------------------------------------------- typographie */
.affiche {
  font-size: clamp(44px, 6.1vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
}
.titre {
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.028em;
}
.titre-m {
  font-size: clamp(24px, 2.3vw, 31px);
  line-height: 1.18;
  letter-spacing: -0.018em;
}
.titre-s { font-size: 21px; line-height: 1.25; letter-spacing: -0.012em; }
.chapo { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.45; color: var(--encre-2); letter-spacing: -0.009em; }
.texte-gris { color: var(--gris); }
.etiquette {
  font: 400 12.5px/1.4 var(--mono);
  letter-spacing: 0;
  color: var(--gris);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.etiquette::before {
  content: '';
  width: 14px; height: 9px;
  background:
    linear-gradient(var(--caramel), var(--caramel)) 0 100% / 2px 6px no-repeat,
    linear-gradient(var(--caramel), var(--caramel)) 4px 100% / 2px 8px no-repeat,
    linear-gradient(var(--caramel), var(--caramel)) 8px 100% / 2px 9px no-repeat,
    linear-gradient(var(--caramel), var(--caramel)) 12px 100% / 2px 7px no-repeat;
}
.etiquette--nue::before { display: none; }
.mono { font-family: var(--mono); letter-spacing: 0; }
mark, .surligne {
  background: linear-gradient(transparent 58%, rgba(173, 125, 85, 0.24) 58%, rgba(173, 125, 85, 0.24) 92%, transparent 92%);
  color: inherit;
  padding: 0 0.06em;
}

/* ---------------------------------------------------------------- boutons */
.bouton {
  --b-fond: var(--encre);
  --b-texte: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--b-fond);
  color: var(--b-texte);
  font: 500 15.5px/1 var(--texte);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.5s var(--courbe), background-color 0.3s;
}
.bouton svg { width: 11px; height: 11px; flex: none; transition: transform 0.45s var(--courbe); }
/* la lueur qui passe sur le bouton, comme le reflet du soleil sur le sable mouillé */
.bouton::after {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 246, 234, 0.34) 47%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 246, 234, 0.34) 53%, transparent 68%);
  transform: translateX(-115%);
  transition: transform 0s;
}
.bouton:hover::after { transform: translateX(115%); transition: transform 0.95s var(--courbe); }
.bouton:hover svg { transform: translate(2px, -2px); }
.bouton:active { transform: scale(0.98); }
.bouton--sable { --b-fond: var(--sable-clair); --b-texte: var(--encre); }
.bouton--sable::after { background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.6) 50%, transparent 68%); }
.bouton--blanc { --b-fond: #fff; --b-texte: var(--encre); }
.bouton--petit { min-height: 40px; padding: 0 16px; font-size: 14.5px; }

.lien {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.25s;
}
.lien:hover { text-decoration-color: currentColor; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; font-size: 15px; }
.lien-fleche span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--courbe); padding-bottom: 2px; }
.lien-fleche:hover span { background-size: 100% 1px; }
.lien-fleche svg { width: 10px; height: 10px; }

/* rangée de réassurance sous un bouton */
.rassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--gris);
}
.rassurance li { display: inline-flex; align-items: center; gap: 7px; }
.rassurance li::before {
  content: '';
  width: 13px; height: 13px; flex: none;
  border-radius: 4px;
  background: var(--encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M3.6 6.7l1.9 1.9 3.9-4.2' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------------------------------------------------------------- navigation flottante */
.nav {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 60;
  width: min(var(--largeur), 100% - 24px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 7px 7px 18px;
  border-radius: var(--rayon);
  background: var(--encre);
  color: #fff;
  box-shadow: 0 14px 34px -18px rgba(29, 25, 21, 0.55);
  transition: transform 0.6s var(--courbe), box-shadow 0.4s;
}
.nav.cachee { transform: translate(-50%, calc(-100% - 20px)); }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; }
.marque svg { width: 22px; height: 18px; color: var(--sable); }
.marque b { font-weight: 500; font-size: 19px; letter-spacing: -0.03em; }
.marque small { font: 400 11.5px/1 var(--mono); color: rgba(255, 255, 255, 0.5); padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.nav__liens { display: flex; gap: 2px; margin: 0 auto; padding: 0; list-style: none; }
.nav__liens a {
  display: block;
  padding: 9px 13px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  font-size: 14.5px;
  transition: color 0.25s, background-color 0.25s;
}
.nav__liens a:hover { color: #fff; }
.nav__liens a[aria-current='page'] { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav__tel { color: rgba(255, 255, 255, 0.72); text-decoration: none; font: 400 13px/1 var(--mono); padding: 0 12px; white-space: nowrap; }
.nav__tel:hover { color: #fff; }
.nav__menu { display: none; }
.nav .court { display: none; }

.feuille-menu { display: none; }

/* ---------------------------------------------------------------- gouttière 3D */
.gouttiere-3d {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.4s;
}
.place { pointer-events: none; }
.sans-3d .place { display: none; }

/* ---------------------------------------------------------------- accueil */
.accueil {
  position: relative;
  margin: 10px;
  min-height: calc(100svh - 20px);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(34% 40% at 50% 30%, rgba(250, 242, 233, 0.9) 0%, rgba(250, 242, 233, 0) 100%),
    radial-gradient(62% 78% at 57% 52%, #ead6c0 0%, #dfc3a4 30%, #cfa983 60%, #bf946b 85%, #b0845d 100%),
    #d2b18d;
}
.accueil::before { /* lumière qui suit la souris, comme le soleil sur le sable */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(28% 34% at var(--lx, 60%) var(--ly, 42%), rgba(255, 250, 243, 0.55), transparent 70%);
}
.accueil::after { /* grain du sable */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.accueil__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(248, 241, 233, 0.82) 0%, rgba(248, 241, 233, 0.45) 30%, rgba(248, 241, 233, 0) 52%);
}
.accueil__grille {
  position: relative;
  min-height: calc(100svh - 20px);
  width: min(1320px, 100% - 64px);
  margin-inline: auto;
  padding: 108px 0 30px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.5fr);
  grid-template-rows: 1fr auto auto;
  gap: 0 24px;
}
.accueil__texte { grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 2; }
.accueil__cta { grid-column: 1; grid-row: 2; padding: 28px 0 40px; position: relative; z-index: 2; }
.accueil__texte .etiquette { color: var(--encre-2); margin-bottom: 26px; }
.accueil__texte .affiche { margin-bottom: 26px; font-size: clamp(44px, 4.7vw, 72px); line-height: 1; letter-spacing: -0.034em; }
.accueil__texte .chapo { max-width: 480px; margin-bottom: 0; color: var(--encre-2); }
.accueil__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.accueil .rassurance { color: var(--encre-2); }

.place--accueil {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: center;
  width: min(100% + 80px, 660px);
  aspect-ratio: 1;
  margin-top: -30px;
}
.accueil__mots {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 60px;
  padding: 0;
  list-style: none;
}
.accueil__mots li {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 250, 244, 0.42);
  font-size: 13px;
  color: var(--encre-2);
}
.accueil__chiffres { grid-column: 1; grid-row: 3; display: flex; gap: 10px; align-self: end; position: relative; z-index: 2; }
.chiffre {
  width: 172px;
  padding: 12px 15px 13px;
  border-radius: 14px;
  background: rgba(255, 251, 246, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.chiffre:nth-child(2) { background: rgba(173, 125, 85, 0.22); border-color: rgba(255, 255, 255, 0.35); }
.chiffre b { display: block; font-weight: 400; font-size: 28px; letter-spacing: -0.03em; line-height: 1.05; margin: 10px 0 4px; }
.chiffre span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--encre-2); }
.chiffre svg { width: 18px; height: 18px; color: var(--encre-2); }

.accueil__equipe { grid-column: 3; grid-row: 3; align-self: end; justify-self: end; display: flex; gap: 10px; position: relative; z-index: 2; }
.carte-personne {
  position: relative;
  display: block;
  flex: none;
  width: var(--carte-grande, 148px);
  /* hauteur fixe : au survol seules les largeurs s'échangent, rien d'autre ne bouge dans l'accueil */
  height: calc(var(--carte-grande, 148px) * 4 / 3);
  transition: width 0.7s var(--courbe);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
.carte-personne img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.carte-personne:hover img { transform: scale(1.04); }
.carte-personne::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(29, 25, 21, 0.72)); }
.carte-personne figcaption, .carte-personne span.legende { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 1; font-size: 13.5px; line-height: 1.25; }
.carte-personne small { display: block; font-size: 11.5px; opacity: 0.78; margin-top: 2px; }
.carte-personne .legende { transition: opacity 0.35s 0.25s; white-space: nowrap; }
.carte-personne::after { transition: opacity 0.4s; }
.carte-personne--bord { width: var(--carte-petite, 52px); }
.carte-personne--bord .legende, .carte-personne--bord::after { opacity: 0; transition-delay: 0s; }
/* survol de la petite carte : les deux échangent leur taille */
.accueil__equipe:has(.carte-personne--bord:hover) .carte-personne:not(.carte-personne--bord) { width: var(--carte-petite, 52px); }
.accueil__equipe:has(.carte-personne--bord:hover) .carte-personne:not(.carte-personne--bord) .legende,
.accueil__equipe:has(.carte-personne--bord:hover) .carte-personne:not(.carte-personne--bord)::after { opacity: 0; transition-delay: 0s; }
.accueil__equipe:has(.carte-personne--bord:hover) .carte-personne--bord { width: var(--carte-grande, 148px); }
.accueil__equipe:has(.carte-personne--bord:hover) .carte-personne--bord .legende,
.accueil__equipe:has(.carte-personne--bord:hover) .carte-personne--bord::after { opacity: 1; transition-delay: 0.25s; }

.accueil__coord {
  position: absolute;
  right: 9px;
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font: 400 11px/1 var(--mono);
  color: rgba(29, 25, 21, 0.5);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- sections */
.section { padding: clamp(80px, 9vw, 130px) 0; position: relative; }
.section--fond { background: var(--fond-2); }
.entete-section { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
#deroule .entete-section { margin-bottom: 34px; }
.entete-section .etiquette { grid-column: 1 / -1; }
.entete-section .chapo { color: var(--gris); margin: 0; max-width: 470px; }
.entete-section--place { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.entete-section--place .chapo { margin-top: 22px; }
.place--entete { width: min(100%, 300px); aspect-ratio: 1; justify-self: center; margin: -40px 0; }
.place--invisible { position: absolute; left: 58%; top: 34%; width: 280px; aspect-ratio: 1; }
.place--equipe { width: 280px; aspect-ratio: 1; margin: -140px auto; position: relative; z-index: -1; }

/* bande photo plein écran */
.plein {
  position: relative;
  min-height: 94svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background: #3b332b;
}
.plein > img, .plein > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  background: #3b332b;
}
.plein::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 16, 12, 0.62) 0%, rgba(20, 16, 12, 0.28) 45%, rgba(20, 16, 12, 0) 70%),
    linear-gradient(0deg, rgba(20, 16, 12, 0.55) 0%, rgba(20, 16, 12, 0) 45%);
}
.plein__contenu { padding: 0 0 clamp(48px, 7vw, 90px); }
.plein .titre { max-width: 660px; margin-bottom: 22px; }
.plein .chapo { color: rgba(255, 255, 255, 0.82); max-width: 500px; }
.plein .etiquette { color: rgba(255, 255, 255, 0.75); margin-bottom: 20px; }
.plein .etiquette::before { filter: brightness(1.6); }
.plein__faits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(40px, 6vw, 80px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  list-style: none;
}
.plein__faits li { padding-right: 24px; font-size: 14.5px; color: rgba(255, 255, 255, 0.78); line-height: 1.4; }
.plein__faits b { display: block; font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); color: #fff; letter-spacing: -0.025em; margin-bottom: 6px; }

/* ---------------------------------------------------------------- étapes */
.etapes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(30px, 5vw, 80px); }
.etape { min-height: 64svh; display: flex; flex-direction: column; justify-content: center; padding: 30px 0; }
.etape:first-child { min-height: 0; justify-content: flex-start; padding-top: 0; }
.etape__num { font: 400 13px/1 var(--mono); color: var(--caramel-fonce); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.etape__num::after { content: ''; height: 1px; width: 48px; background: var(--trait-fort); }
.etape h3 { margin-bottom: 18px; max-width: 470px; }
.etape p { color: var(--gris); max-width: 460px; }
.etape p strong { color: var(--encre); font-weight: 500; }
.etape figure { margin: 22px 0 0; max-width: 360px; }
.etape figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--rayon); }
.etape figcaption { font: 400 12px/1.4 var(--mono); color: var(--gris-clair); margin-top: 10px; }
.etapes__scene { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 34px; gap: 10px; margin-top: -70px; }
.scene-boite { width: min(100%, 520px); height: min(400px, 46svh); }
.compteur { width: min(100%, 440px); }
.compteur__ligne { display: flex; justify-content: space-between; align-items: baseline; font: 400 12px/1 var(--mono); color: var(--gris); margin-bottom: 14px; }
.compteur__ligne b { font-weight: 500; color: var(--encre); font-size: 13px; }

/* les brise-lames : des troncs qui s'alignent un peu plus à chaque gouttière */
.brise-lames {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 64px;
  padding: 0 6px;
  -webkit-box-reflect: below 1px linear-gradient(transparent 52%, rgba(0, 0, 0, 0.22));
}
.brise-lames i {
  display: block;
  width: 9px;
  border-radius: 4.5px 4.5px 1px 1px;
  background:
    repeating-linear-gradient(0deg, rgba(60, 42, 28, 0) 0 5px, rgba(60, 42, 28, 0.12) 5px 6px),
    linear-gradient(90deg, #7d6450 0%, #a68d77 38%, #93795f 62%, #6c5442 100%);
  transform-origin: 50% 100%;
}
.brise-lames__sable { height: 22px; margin-top: 0; background: linear-gradient(180deg, rgba(226, 205, 179, 0.55), rgba(226, 205, 179, 0)); border-top: 1px solid var(--sable); }
.compteur__legende { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--gris); max-width: 400px; }

/* ---------------------------------------------------------------- pour qui */
.section--compacte { padding: clamp(56px, 6vw, 84px) 0; }
.section--compacte .entete-section { margin-bottom: 28px; }
.section--compacte .cas img { aspect-ratio: 2.35 / 1; }
.section--compacte .cas__texte li { padding: 5px 10px; font-size: 12.5px; }
.section--compacte .cas__texte { padding: 18px 22px 20px; }
.section--compacte .cas__texte ul { margin-top: 12px; }
.section--compacte .note-honnete { margin-top: 18px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cas { position: relative; border-radius: var(--rayon); overflow: hidden; background: var(--fond-2); display: flex; flex-direction: column; }
.cas img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.cas__texte { padding: 24px 26px 28px; }
.cas__texte h3 { margin-bottom: 10px; }
.cas__texte p { color: var(--gris); margin: 0; }
.cas__texte ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.cas__texte li { font-size: 13px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--trait-fort); color: var(--encre-2); }
.note-honnete { margin-top: 26px; display: flex; gap: 14px; align-items: flex-start; color: var(--gris); font-size: 15px; max-width: 760px; }
.note-honnete svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--caramel-fonce); }

/* ---------------------------------------------------------------- journée */
.journee .titre { margin: 22px 0 22px; }
.journee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 90px); align-items: center; }
.cadran { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.cadran svg { width: 100%; height: 100%; overflow: visible; }
.cadran .place { position: absolute; inset: 22%; }
.cadran__heure { position: absolute; left: 0; right: 0; bottom: -46px; text-align: center; font: 400 12.5px/1.4 var(--mono); color: var(--gris); }
.cadran__heure b { color: var(--encre); font-weight: 500; }
.horaire { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.horaire li { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--trait); font-size: 15.5px; }
.horaire time, .horaire .h { font: 400 13px/1.6 var(--mono); color: var(--caramel-fonce); }
.horaire span { color: var(--encre-2); }

/* ---------------------------------------------------------------- tarifs */
.tarifs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 50px clamp(40px, 6vw, 90px); align-items: start; }
.tarifs__texte .titre { margin-bottom: 22px; }
.tarifs__texte .chapo { color: var(--gris); }
.carte-traitement {
  position: relative;
  border-radius: var(--rayon);
  background: #fff;
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-legere);
  padding: 10px;
}
.carte-traitement__visuel {
  position: relative;
  height: 210px;
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #b58561 url('img/rides-sable.webp') center / cover;
}
.carte-traitement__visuel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(88deg, rgba(120, 78, 46, 0.5), rgba(120, 78, 46, 0.05) 70%); }
.carte-traitement__visuel > * { position: relative; z-index: 1; }
.carte-traitement__visuel .marque-carte { display: flex; justify-content: space-between; font-size: 14px; }
.carte-traitement__visuel .marque-carte span { font: 400 11.5px/1 var(--mono); opacity: 0.85; }
.carte-traitement__prix { font-size: 40px; letter-spacing: -0.03em; line-height: 1; }
.carte-traitement__prix small { display: block; font-size: 13px; letter-spacing: 0; margin-top: 8px; opacity: 0.9; }
.carte-traitement__liste { margin: 0; padding: 22px 16px 10px; list-style: none; display: grid; gap: 12px; }
.carte-traitement__liste li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16px; line-height: 1.4; }
.carte-traitement__liste li::before {
  content: '';
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: var(--rayon-petit);
  background: var(--caramel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.7 2.7 5.4-5.8' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.carte-traitement__liste small { display: block; color: var(--gris); font-size: 13.5px; }
.carte-traitement__pied { padding: 8px 16px 16px; }
.carte-traitement__pied .rassurance { margin-top: 14px; }
.tarif-ado { margin-top: 18px; padding: 20px 22px; border-radius: var(--rayon); border: 1px solid var(--trait); display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: baseline; }
.tarif-ado b { font-weight: 400; font-size: 26px; letter-spacing: -0.025em; grid-row: span 2; }
.tarif-ado p { margin: 0; color: var(--gris); font-size: 14.5px; }
.tarif-ado strong { font-weight: 500; color: var(--encre); }
.place--tarifs { width: min(100%, 420px); aspect-ratio: 1; margin: 10px auto 0; }

/* ---------------------------------------------------------------- équipe */
.equipe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; max-width: 1060px; }
.personne { display: grid; grid-template-rows: auto 1fr; }
.personne img { width: 100%; aspect-ratio: 5 / 5.6; object-fit: cover; object-position: 50% 30%; border-radius: var(--rayon); }
.personne__texte { padding: 22px 4px 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; }
.personne__texte h3 { font-size: 24px; letter-spacing: -0.02em; }
.personne__texte .role { grid-column: 1; color: var(--gris); font-size: 15px; }
.personne__texte .mono { grid-row: 1; grid-column: 2; font-size: 12px; color: var(--gris-clair); align-self: center; }
.personne__texte p { grid-column: 1 / -1; color: var(--encre-2); margin: 12px 0 0; max-width: 520px; }

/* ---------------------------------------------------------------- questions */
.questions { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 40px clamp(40px, 6vw, 100px); align-items: start; }
.questions__tete { position: sticky; top: 110px; }
.questions__tete .titre { margin: 20px 0 18px; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.08; }
.questions__tete p { color: var(--gris); max-width: 330px; }
.place--questions { width: 300px; aspect-ratio: 1; margin-top: 10px; }
.question { border-bottom: 1px solid var(--trait); }
.question:first-child { border-top: 1px solid var(--trait); }
.question summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  font-size: clamp(21px, 2vw, 27px);
  letter-spacing: -0.018em;
  line-height: 1.22;
}
.question summary::-webkit-details-marker { display: none; }
.question summary span:last-child { flex: none; font-size: 13px; color: var(--gris); letter-spacing: 0; white-space: nowrap; transition: color 0.2s; }
.question summary:hover span:last-child { color: var(--encre); }
.question[open] summary span:last-child .ouvrir, .question:not([open]) summary span:last-child .fermer { display: none; }
.question__reponse { padding: 0 0 26px; color: var(--encre-2); max-width: 620px; font-size: 16.5px; }
.question__reponse p:last-child { margin: 0; }

/* ---------------------------------------------------------------- fin de page */
.final { min-height: 100svh; align-items: center; }
.final .plein__contenu { padding: 140px 0 60px; }
.final__grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; }
.final .titre { margin-bottom: 20px; }
.final .chapo { margin-bottom: 30px; }
.place--final { width: min(100%, 420px); aspect-ratio: 1; justify-self: center; }
.infos-pratiques {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.8);
}
.infos-pratiques h3 { font: 400 12px/1.4 var(--mono); color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; }
.infos-pratiques p { margin: 0; }
.infos-pratiques a { color: #fff; text-decoration: none; }
.ouvert { display: inline-flex; align-items: center; gap: 8px; }
.ouvert::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--etat, #9fbf8e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--etat, #9fbf8e) 30%, transparent); }

.pied { background: var(--encre); color: rgba(255, 255, 255, 0.7); padding: 64px 0 30px; font-size: 14.5px; }
.pied__grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.pied .marque { color: #fff; margin-bottom: 14px; }
.pied h2 { font: 400 12px/1.4 var(--mono); color: rgba(255, 255, 255, 0.45); margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.pied a:hover { color: #fff; }
.pied__bas { margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font: 400 12px/1.5 var(--mono); color: rgba(255, 255, 255, 0.4); }

/* barre d'action du téléphone */
.barre-action { display: none; }

/* ---------------------------------------------------------------- pages intérieures */
.tete-page {
  position: relative;
  margin: 10px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  padding: 150px 0 70px;
  background: radial-gradient(70% 90% at 75% 40%, #f3e7da 0%, #e5cfb6 40%, #cfac88 85%, #c29c77 100%);
}
.tete-page::after, .appel::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.3; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.tete-page__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 30px; align-items: end; }
.tete-page .etiquette { color: var(--encre-2); margin-bottom: 22px; }
.tete-page .affiche { font-size: clamp(42px, 5.4vw, 76px); margin-bottom: 24px; }
.tete-page .chapo { max-width: 520px; margin: 0; }
.tete-page .place { width: min(100%, 400px); aspect-ratio: 1; justify-self: end; margin: -60px 0 -30px; }

.colonnes { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px clamp(40px, 6vw, 100px); align-items: start; }
.colonnes__tete { position: sticky; top: 110px; }
.colonnes__tete .titre { margin: 20px 0 18px; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.08; }
.colonnes__tete p { color: var(--gris); max-width: 380px; }
.texte-long { font-size: 17px; color: var(--encre-2); max-width: 640px; }
.texte-long h3 { font-size: 22px; letter-spacing: -0.015em; color: var(--encre); margin: 40px 0 12px; }
.texte-long h3:first-child { margin-top: 0; }
.texte-long ul { padding-left: 0; list-style: none; margin: 0 0 1em; display: grid; gap: 10px; }
.texte-long ul li { padding-left: 22px; position: relative; }
.texte-long ul li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 2px; background: var(--caramel); }

.liste-faits { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--trait); }
.liste-faits li { padding: 22px 24px 24px 0; border-bottom: 1px solid var(--trait); }
.liste-faits li:nth-child(odd) { border-right: 1px solid var(--trait); }
.liste-faits li:nth-child(even) { padding-left: 24px; }
.liste-faits b { display: block; font-weight: 400; font-size: 27px; letter-spacing: -0.025em; margin-bottom: 6px; }
.liste-faits span { color: var(--gris); font-size: 15px; }

.photo-fondue { position: relative; }
.photo-fondue img { width: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%); border-radius: 0 var(--rayon) var(--rayon) 0; }

.galerie { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; object-fit: cover; border-radius: var(--rayon); }
.galerie figure:first-child { grid-row: span 2; }
.galerie figcaption { font: 400 12px/1.4 var(--mono); color: var(--gris-clair); margin-top: 9px; }

.citation-nom { padding: clamp(60px, 7vw, 100px) 0; }
.citation-nom .titre { max-width: 900px; }
.citation-nom p { color: var(--gris); max-width: 560px; margin-top: 24px; }

/* rendez-vous */
.rdv { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px clamp(30px, 5vw, 70px); align-items: start; }
.agenda { border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; box-shadow: var(--ombre-legere); overflow: hidden; }
.agenda__etapes { display: flex; border-bottom: 1px solid var(--trait); font: 400 12px/1 var(--mono); color: var(--gris-clair); }
.agenda__etapes li { flex: 1; list-style: none; padding: 16px 18px; border-right: 1px solid var(--trait); }
.agenda__etapes li:last-child { border-right: 0; }
.agenda__etapes li[aria-current='step'] { color: var(--encre); background: var(--fond); }
.agenda__etapes { margin: 0; padding: 0; }
.agenda__corps { padding: 26px; }
.agenda__corps h2 { font-size: 22px; letter-spacing: -0.015em; margin-bottom: 18px; }
.choix { display: grid; gap: 10px; }
.choix button, .creneaux button {
  text-align: left;
  border: 1px solid var(--trait);
  background: var(--fond);
  border-radius: 12px;
  padding: 15px 16px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.choix button:hover, .creneaux button:hover { border-color: var(--trait-fort); background: #fff; }
.choix button[aria-pressed='true'], .creneaux button[aria-pressed='true'] { border-color: var(--encre); background: #fff; box-shadow: 0 0 0 1px var(--encre) inset; }
.choix b { display: block; font-weight: 500; font-size: 16px; }
.choix span { display: block; color: var(--gris); font-size: 14px; margin-top: 2px; }
.jours { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; scrollbar-width: thin; }
.jours button { flex: none; width: 72px; padding: 10px 0; border-radius: 12px; border: 1px solid var(--trait); background: var(--fond); cursor: pointer; text-align: center; }
.jours button small { display: block; font: 400 11px/1.3 var(--mono); color: var(--gris); }
.jours button b { display: block; font-weight: 400; font-size: 21px; letter-spacing: -0.02em; }
.jours button[aria-pressed='true'] { background: var(--encre); color: #fff; border-color: var(--encre); }
.jours button[aria-pressed='true'] small { color: rgba(255, 255, 255, 0.7); }
.jours button:disabled { opacity: 0.4; cursor: default; }
.creneaux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.creneaux button { text-align: center; font: 400 14px/1 var(--mono); padding: 13px 0; }
.champ { display: grid; gap: 6px; margin-bottom: 14px; }
.champ label { font-size: 14px; color: var(--encre-2); }
.champ input { font: inherit; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--trait-fort); background: var(--fond); }
.champ input:focus { outline: 2px solid var(--caramel); outline-offset: 0; border-color: transparent; }
.agenda__pied { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 26px; border-top: 1px solid var(--trait); background: var(--fond); }
.agenda__pied .retour { background: none; border: 0; color: var(--gris); cursor: pointer; padding: 8px 0; }
.agenda__pied .retour[hidden] { display: block; visibility: hidden; }
.recap { font: 400 12.5px/1.5 var(--mono); color: var(--gris); }
.avertissement-demo { font: 400 12px/1.5 var(--mono); color: var(--gris); margin-top: 14px; }
.confirmation { text-align: left; }
.confirmation svg { width: 40px; height: 40px; color: var(--caramel); margin-bottom: 14px; }

.bloc-infos { display: grid; gap: 14px; }
.bloc { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 22px 22px 20px; background: #fff; }
.bloc h2, .bloc h3 { font: 400 12px/1.4 var(--mono); color: var(--gris); margin-bottom: 12px; }
.bloc p { margin: 0 0 8px; }
.bloc .grand { font-size: 26px; letter-spacing: -0.025em; text-decoration: none; display: block; margin-bottom: 4px; }
.heures { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.heures li { display: flex; justify-content: space-between; gap: 12px; }
.heures li.aujourdhui { font-weight: 500; }
.heures li span:last-child { font-family: var(--mono); font-size: 13.5px; color: var(--encre-2); }
.plan { margin: 0; position: relative; }
.plan img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(75% 75% at 50% 50%, #000 55%, transparent 100%); background: none; }
.plan figcaption { font: 400 11px/1.4 var(--mono); color: var(--gris-clair); margin-top: 6px; }
.urgences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.urgences article { border-top: 1px solid var(--trait-fort); padding-top: 18px; }
.urgences h3 { margin-bottom: 10px; }
.urgences p { color: var(--gris); font-size: 15.5px; }


/* page gouttières */
.place--colonne { width: min(100%, 340px); aspect-ratio: 1; margin-top: 18px; }
.figure-petite { margin: 36px 0 0; max-width: 460px; }
.figure-petite img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); }
.figure-petite figcaption { font: 400 12px/1.45 var(--mono); color: var(--gris-clair); margin-top: 10px; }
.liste-faits--texte b { font-size: 21px; letter-spacing: -0.015em; margin-bottom: 8px; }
.gestes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; }
.gestes article { border-top: 1px solid var(--trait-fort); padding-top: 18px; }
.gestes h3 { margin-bottom: 10px; }
.gestes p { color: var(--gris); font-size: 15.5px; margin: 0; }
.tableau-prix { width: 100%; border-collapse: collapse; margin: 30px 0 0; font-size: 15.5px; }
.tableau-prix th, .tableau-prix td { text-align: left; padding: 15px 0; border-bottom: 1px solid var(--trait); vertical-align: baseline; font-weight: 400; }
.tableau-prix thead th { font: 400 12px/1.4 var(--mono); color: var(--gris); padding-top: 0; }
.tableau-prix td { text-align: right; white-space: nowrap; font-size: 17px; letter-spacing: -0.01em; }
.tableau-prix thead th:last-child { text-align: right; }
.tableau-prix small { display: block; color: var(--gris); font-size: 13.5px; }
.tarif-ado + .tarif-ado { margin-top: 12px; }
.appel { margin: 10px; border-radius: 24px; padding: clamp(70px, 8vw, 110px) 0; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 90% at 78% 50%, #ecdac6 0%, #dcc0a0 40%, #c9a37e 80%, #bd946c 100%); }
.appel__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 30px; align-items: center; }
.appel .titre { margin: 22px 0 20px; }
.appel .chapo { max-width: 500px; margin-bottom: 30px; }
.appel .etiquette { color: var(--encre-2); }
.place--appel { width: min(100%, 380px); aspect-ratio: 1; justify-self: center; }

/* page cabinet */
.parcours { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.parcours li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--trait); font-size: 15px; color: var(--encre-2); }
.parcours .h { font: 400 12.5px/1.6 var(--mono); color: var(--caramel-fonce); }
.portrait-long { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 30px clamp(40px, 6vw, 90px); align-items: start; }
.portrait-long + .portrait-long { margin-top: clamp(70px, 8vw, 110px); }
.portrait-long img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--rayon); }
.portrait-long h3 { font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 8px; }
.portrait-long .role { color: var(--gris); margin-bottom: 22px; }
.portrait-long p { color: var(--encre-2); max-width: 560px; }
.portrait-long--inverse > :first-child { order: 2; }
.langues { display: inline-flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.langues span { font-size: 13px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--trait-fort); color: var(--encre-2); }
.nom-sillon { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px clamp(40px, 6vw, 90px); align-items: center; }
.nom-sillon .titre { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.12; letter-spacing: -0.022em; }
.nom-sillon img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
.nom-sillon figcaption { font: 400 12px/1.45 var(--mono); color: var(--gris-clair); margin-top: 10px; }
.nom-sillon figure { margin: 0; }
.nom-sillon .chapo { margin-top: 24px; }
.traitements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--trait); }
.traitements article { padding: 26px 0 28px; border-bottom: 1px solid var(--trait); display: grid; grid-template-columns: 54px 1fr; gap: 6px 10px; }
.traitements .mono { grid-row: span 2; font-size: 12.5px; color: var(--caramel-fonce); padding-top: 6px; }
.traitements h3 { font-size: 22px; letter-spacing: -0.015em; }
.traitements p { color: var(--gris); margin: 6px 0 0; font-size: 15.5px; }


/* page rendez-vous */
.tete-page--courte { padding-bottom: 50px; }
.tete-page--courte .place { width: min(100%, 300px); margin: -40px 0 -20px; }
.section--serree { padding-top: 50px; }
.acces { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px clamp(40px, 6vw, 90px); align-items: center; }
.acces .titre { margin: 22px 0 10px; }
.acces .horaire li { grid-template-columns: 120px 1fr; }
.place--acces { width: 220px; aspect-ratio: 1; margin: 20px 0 0; }
.plan__repere { position: absolute; left: 39.6%; top: 40.6%; transform: translate(-7px, -7px); display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--texte); background: var(--encre); color: #fff; padding: 7px 10px 7px 7px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(29, 25, 21, 0.6); }
.plan__repere i { width: 10px; height: 10px; border-radius: 50%; background: var(--sable); box-shadow: 0 0 0 4px rgba(226, 205, 179, 0.35); }
.galerie figure { display: flex; flex-direction: column; }
.galerie img { height: auto; }
.galerie figure:first-child img { flex: 1; min-height: 0; aspect-ratio: auto; height: 100%; }
.galerie figure:not(:first-child) img { aspect-ratio: 16 / 10; }


/* avant / après à curseur */
.avant-apres { margin-top: 24px; max-width: 460px; }
.avant-apres__choix { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.avant-apres__choix button { border: 1px solid var(--trait-fort); background: transparent; border-radius: 999px; padding: 7px 13px; font-size: 13px; color: var(--encre-2); cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.avant-apres__choix button[aria-selected='true'] { background: var(--encre); border-color: var(--encre); color: #fff; }
.comparer { position: relative; aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; background: var(--fond-2); user-select: none; touch-action: pan-y; }
.comparer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparer__avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparer__poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.25); pointer-events: none; }
.comparer__poignee::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 14l-6 6 6 6M24 14l6 6-6 6' fill='none' stroke='%231d1915' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 40px no-repeat; box-shadow: 0 4px 14px rgba(29, 25, 21, 0.25); }
.comparer__curseur { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.comparer__etiquette { position: absolute; top: 12px; font: 400 11.5px/1 var(--mono); color: #fff; background: rgba(29, 25, 21, 0.55); padding: 6px 9px; border-radius: 999px; pointer-events: none; }
.comparer__etiquette--avant { left: 12px; }
.comparer__etiquette--apres { right: 12px; }
.avant-apres__note { font: 400 11.5px/1.45 var(--mono); color: var(--gris-clair); margin: 10px 0 0; }

/* le matériel en photos */
.materiel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
.materiel figure { margin: 0; }
.materiel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
.materiel figcaption { margin-top: 12px; font-size: 15px; color: var(--gris); line-height: 1.45; }
.materiel figcaption b { display: block; font-weight: 400; font-size: 20px; letter-spacing: -0.015em; color: var(--encre); margin-bottom: 4px; }


/* ---------------------------------------------------------------- ouverture du site
   Les brise-lames sortent du sable de travers, se redressent et forment le logo ; puis le rideau
   de sable se retire vers le haut pendant que l'accueil et la gouttière arrivent. Un seul mouvement. */
.ouverture { display: none; }
.avec-ouverture .ouverture {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 90;
  align-items: center;
  justify-content: center;
  background: radial-gradient(60% 70% at 50% 45%, #efe0cf 0%, #dcc0a0 45%, #c49b74 100%);
  clip-path: inset(0 0 0 0);
  animation: rideau 1s cubic-bezier(0.76, 0, 0.18, 1) 1.25s forwards;
}
.ouverture__centre { display: flex; flex-direction: column; align-items: center; animation: ouverture-sort 0.9s cubic-bezier(0.6, 0, 0.3, 1) 1.2s forwards; }
.ouverture__troncs { display: flex; align-items: flex-end; gap: 11px; height: 104px; overflow: hidden; padding: 6px 14px 0; border-bottom: 1px solid rgba(29, 25, 21, 0.25); }
.ouverture__troncs i {
  display: block;
  width: 14px;
  height: var(--h);
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(90deg, #5e4836, #8c725c 40%, #7a6049 65%, #503c2c);
  transform-origin: 50% 100%;
  animation: tronc-se-redresse 1.05s cubic-bezier(0.22, 0.9, 0.2, 1) var(--d) both;
}
.ouverture__nom { margin: 22px 0 6px; font-size: 46px; letter-spacing: -0.035em; line-height: 1; color: var(--encre); animation: ouverture-mot 0.9s var(--courbe) 0.55s both; }
.ouverture__lieu { margin: 0; font: 400 12px/1 var(--mono); color: var(--encre-2); animation: ouverture-mot 0.9s var(--courbe) 0.7s both; }
@keyframes tronc-se-redresse {
  0% { transform: translateY(calc(var(--h) + 10px)) rotate(var(--r0)) scaleY(var(--s0)); }
  45% { transform: translateY(var(--y0)) rotate(var(--r0)) scaleY(var(--s0)); }
  100% { transform: none; }
}
@keyframes ouverture-mot { from { opacity: 0; transform: translateY(14px); } }
@keyframes ouverture-sort { to { opacity: 0; transform: translateY(-46px); } }
@keyframes rideau { to { clip-path: inset(0 0 100% 0); } }
.avec-ouverture .accueil__texte > *, .avec-ouverture .accueil__cta, .avec-ouverture .accueil__mots li,
.avec-ouverture .accueil__chiffres .chiffre, .avec-ouverture .accueil__equipe, .avec-ouverture .nav {
  animation: accueil-arrive 1.1s var(--courbe) both;
}
.avec-ouverture .nav { animation-name: nav-arrive; animation-delay: 1.5s; }
.avec-ouverture .accueil__texte > :nth-child(1) { animation-delay: 1.45s; }
.avec-ouverture .accueil__texte > :nth-child(2) { animation-delay: 1.52s; }
.avec-ouverture .accueil__texte > :nth-child(3) { animation-delay: 1.62s; }
.avec-ouverture .accueil__cta { animation-delay: 1.72s; }
.avec-ouverture .accueil__mots li { animation-delay: 1.8s; }
.avec-ouverture .accueil__chiffres .chiffre { animation-delay: 1.85s; }
.avec-ouverture .accueil__equipe { animation-delay: 1.95s; }
@keyframes accueil-arrive { from { opacity: 0; transform: translateY(28px); } }
@keyframes nav-arrive { from { opacity: 0; transform: translate(-50%, -24px); } }

/* ---------------------------------------------------------------- apparitions */
.monte { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--courbe), transform 1.1s var(--courbe); }
.monte.vu { opacity: 1; transform: none; }
.fondu-photo { opacity: 0; transform: scale(1.05); filter: blur(6px); transition: opacity 1.4s var(--courbe), transform 1.8s var(--courbe), filter 1.4s var(--courbe); }
.fondu-photo.vu { opacity: 1; transform: none; filter: none; }
.retard-1 { transition-delay: 0.08s; }
.retard-2 { transition-delay: 0.16s; }
.retard-3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .monte, .fondu-photo { opacity: 1; transform: none; filter: none; transition: none; }
  .bouton::after { display: none; }
}


/* ordinateurs à écran bas (portables 1280 × 720, 1366 × 768) : l'accueil tient dans un écran */
@media (min-width: 861px) and (max-height: 820px) {
  .accueil__grille { padding: 92px 0 22px; }
  .accueil__texte .etiquette { margin-bottom: 18px; }
  .accueil__texte .affiche { font-size: clamp(44px, 4.3vw, 62px); margin-bottom: 18px; }
  .accueil__texte .chapo { font-size: 16px; }
  .accueil__cta { padding: 20px 0 24px; }
  .accueil .rassurance { margin-top: 12px; }
  .chiffre { padding: 10px 13px 11px; }
  .chiffre b { font-size: 24px; margin: 6px 0 2px; }
  .chiffre span { font-size: 12px; }
  .accueil__equipe { --carte-grande: 124px; --carte-petite: 44px; }
  .accueil__mots { margin-bottom: 30px; }
  .carte-personne .legende { font-size: 12px; left: 10px; right: 8px; bottom: 9px; }
  .carte-personne small { font-size: 10.5px; }
}

/* ================================================================= tablette */
@media (max-width: 1100px) {
  .nav__liens a { padding: 9px 9px; font-size: 14px; }
  .nav__tel { display: none; }
  .accueil__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); width: min(100%, 100% - 48px); }
  .accueil__mots { display: none; }
  .place--accueil { grid-column: 2; }
  .accueil__equipe { grid-column: 2; }
}

/* ================================================================= téléphone */
@media (max-width: 860px) {
  :root { --gouttiere: 18px; }
  .nav { padding: 6px 6px 6px 14px; top: 10px; width: calc(100% - 20px); }
  .nav__liens, .nav .bouton--sable .long { display: none; }
  .nav .court { display: inline; }
  .marque small { display: none; }
  .nav__menu {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
  }
  .nav__menu i { display: block; width: 16px; height: 1.5px; background: #fff; box-shadow: 0 5px 0 #fff; transform: translateY(-2.5px); }
  .feuille-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--encre);
    color: #fff;
    padding: 96px 22px 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
  }
  .feuille-menu.ouverte { opacity: 1; visibility: visible; }
  .feuille-menu ul { list-style: none; margin: 0; padding: 0; }
  .feuille-menu li a { display: block; padding: 12px 0; font-size: 34px; letter-spacing: -0.03em; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .feuille-menu p { margin-top: 30px; font: 400 13px/1.6 var(--mono); color: rgba(255, 255, 255, 0.6); }
  .feuille-menu p a { color: #fff; }

  .accueil { margin: 8px; border-radius: 20px; min-height: auto; }
  .accueil__voile { background: linear-gradient(180deg, rgba(248, 241, 233, 0.7) 0%, rgba(248, 241, 233, 0.15) 50%, rgba(248, 241, 233, 0) 100%); }
  .accueil__grille { display: flex; flex-direction: column; min-height: auto; padding: 96px 0 18px; width: calc(100% - 36px); }
  .accueil__texte { padding: 0; }
  .accueil__texte .etiquette { margin-bottom: 18px; }
  .accueil__texte .affiche { font-size: clamp(40px, 11.4vw, 54px); margin-bottom: 18px; }
  .accueil__texte .chapo { font-size: 16.5px; margin-bottom: 0; }
  .place--accueil { width: min(100%, 340px); aspect-ratio: 1.25; margin: 6px auto 0; order: 2; }
  .accueil__cta { order: 3; padding: 0; }
  .accueil__cta .accueil__actions { gap: 14px 18px; }
  .entete-section--place .place--entete { width: 200px; margin: 0 auto; }
  .place--invisible { left: 50%; top: 20%; width: 200px; transform: translateX(-50%); }
  .accueil__chiffres { order: 4; margin-top: 22px; }
  .chiffre { flex: 1; width: auto; }
  .accueil__equipe { order: 5; margin-top: 10px; justify-self: stretch; width: 100%; }
  .carte-personne, .carte-personne--bord { flex: 1; width: auto; height: auto; aspect-ratio: 4 / 4.4; }
  .carte-personne--bord .legende, .carte-personne--bord::after { opacity: 1; }
  .accueil__coord { display: none; }

  .entete-section { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .plein { min-height: 88svh; }
  .plein::before { background: linear-gradient(0deg, rgba(20, 16, 12, 0.78) 0%, rgba(20, 16, 12, 0.3) 55%, rgba(20, 16, 12, 0.1) 100%); }
  .plein__faits { grid-template-columns: 1fr; gap: 14px; }
  .plein__faits li { display: flex; align-items: baseline; gap: 12px; }
  .plein__faits b { margin: 0; font-size: 22px; min-width: 110px; }

  .etapes { display: flex; flex-direction: column; }
  .etapes__scene { order: -1; }
  .etapes__scene {
    position: sticky;
    top: 0;
    z-index: 3;
    height: auto;
    padding: 66px 0 6px;
    margin-top: 0;
    background: var(--fond);
    gap: 4px;
  }
  .etapes__scene::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 36px; background: linear-gradient(var(--fond), rgba(251, 248, 244, 0)); pointer-events: none; }
  .scene-boite { width: 220px; height: 170px; }
  .compteur__legende { font-size: 12px; }
  .compteur { width: 100%; }
  .brise-lames { height: 38px; }
  .brise-lames i { width: 5px; }
  .etape, .etape:first-child { min-height: 68svh; padding: 26px 0; }
  .etapes__textes { position: relative; z-index: 1; }

  .materiel { grid-template-columns: 1fr; }
  .duo, .equipe, .journee, .tarifs, .questions, .colonnes, .rdv, .final__grille, .tete-page__grille, .galerie, .urgences, .gestes, .appel__grille, .portrait-long, .nom-sillon, .traitements { grid-template-columns: 1fr; }
  .portrait-long--inverse > :first-child { order: 0; }
  .place--colonne { width: 200px; margin: 10px auto 0; }
  .place--appel { width: 220px; }
  .appel { margin: 8px; border-radius: 20px; }
  .parcours li { grid-template-columns: 92px 1fr; }
  .acces { grid-template-columns: 1fr; }
  .place--acces { display: none; }
  .acces .horaire li { grid-template-columns: 100px 1fr; }
  .tete-page--courte .place { width: 170px; margin: -6px auto -26px; }
  .galerie figure:first-child { grid-row: auto; }
  .cadran { width: min(100%, 360px); }
  .questions__tete, .colonnes__tete { position: static; }
  .place--questions, .place--tarifs { width: 180px; margin: 0 auto; }
  .question summary { padding: 20px 0; }
  .question summary span:last-child { display: none; }
  .tete-page { margin: 8px; border-radius: 20px; padding: 108px 0 40px; }
  .tete-page .place { width: 230px; justify-self: center; margin: 0; }
  .liste-faits { grid-template-columns: 1fr; }
  .liste-faits li:nth-child(odd) { border-right: 0; }
  .liste-faits li:nth-child(even) { padding-left: 0; }
  .infos-pratiques { grid-template-columns: 1fr; }
  .place--final { width: 240px; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__grille > div:first-child { grid-column: 1 / -1; }
  .creneaux { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agenda__etapes li { padding: 13px 10px; font-size: 11px; }
  .agenda__corps { padding: 20px 18px; }
  .agenda__pied { padding: 14px 18px; }

  .barre-action {
    display: flex;
    position: fixed;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 50;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: var(--encre);
    box-shadow: 0 12px 30px -14px rgba(29, 25, 21, 0.6);
    transform: translateY(140%);
    transition: transform 0.5s var(--courbe);
  }
  .barre-action.visible { transform: none; }
  .barre-action a { flex: 1; justify-content: center; min-height: 46px; }
  .barre-action .appeler { flex: 0 0 auto; color: #fff; background: rgba(255, 255, 255, 0.08); }
  body { padding-bottom: 0; }
}

/* Téléphone (29/10/2026) : la page ne devient jamais plus large que l'écran. Une photo inclinée,
   un décor animé ou une ouverture qui entre par le côté élargissait la page de quelques pixels
   (jusqu'à 100 px pendant l'ouverture de Ricochet) : elle glissait de côté et la barre du bas
   était coupée. « clip » ne crée pas de zone de défilement : les en-têtes collants restent collants.
   Le corps est aussi coupé, et devient le repère des éléments posés en absolu : sans lui, un élément
   ajouté après le chargement (une mouette) élargissait encore la page et la barre du bas. */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: clip; position: relative; }

/* Téléphone (29/10/2026) : étapes du rendez-vous, légendes et étiquettes avant/après à 12 px minimum. */
@media (max-width: 699px) {
  .agenda__etapes li, .legende, .comparer__etiquette, .avant-apres__note { font-size: 12px; }
}