/* Direction : le réflexe pupillaire. La page s'ouvre dans une salle d'examen sombre,
   puis la lumière entre. Tout le reste du site vit dans cette lumière. */
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/alexandria-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Alexandria"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/alexandria-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("assets/fonts/atkinson-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("assets/fonts/atkinson-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("assets/fonts/funnel-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("assets/fonts/funnel-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-arabic-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-arabic-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/plex-arabic-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/plex-arabic-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/plex-arabic-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/plex-arabic-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Chiffres : le zéro barré d'Atkinson se lit comme un Ø dans un numéro de téléphone */
@font-face { font-family: "Chiffres"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("assets/fonts/funnel-latin.woff2") format("woff2"); unicode-range: U+30-39; }

:root {
  --nuit: #06201B;
  --sapin: #0B4A3D;
  --vert: #0F7A62;
  --vert-fonce: #0A5C49;
  --menthe: #A8E4CF;
  /* La lumière du cabinet : plâtre clair et éclairage indirect, le même ambre que l'iris */
  --lumiere: #F7F6F2;
  --brume: #ECEAE2;
  --ambre: #D9A441;
  --ambre-moyen: #A9761A;
  --ambre-fonce: #8A5A12;
  --ambre-voile: #F5E7C6;
  --blanc: #FFFFFF;
  --encre: #0E1F1B;
  --encre-douce: #4A5C56;
  --filet: #DAD7CC;

  --titre: "Funnel Display", "Segoe UI", sans-serif;
  --texte: "Chiffres", "Atkinson Hyperlegible Next", "Segoe UI", sans-serif;

  --marge: clamp(1rem, 4.5vw, 4.5rem);
  --section: clamp(3.25rem, 6vw, 6rem);
  --douce: cubic-bezier(.22, .8, .24, 1);
}

[dir="rtl"] {
  --titre: "Alexandria", "Segoe UI", sans-serif;
  --texte: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--lumiere);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, table, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg, canvas { display: block; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }

h1, h2, h3 { font-family: var(--titre); font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 1.3rem + 3.2vw, 4.25rem); line-height: 1.02; letter-spacing: -.028em; }
h2 { font-size: clamp(1.875rem, 1.25rem + 2.3vw, 3.25rem); line-height: 1.04; letter-spacing: -.024em; }
h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; letter-spacing: -.012em; }

[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] h1 { line-height: 1.22; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem); }
[dir="rtl"] h2 { line-height: 1.25; font-size: clamp(1.75rem, 1.25rem + 2vw, 2.875rem); }
[dir="rtl"] h3 { line-height: 1.4; }

.enveloppe { width: min(100%, 92rem); margin-inline: auto; padding-inline: var(--marge); }
.evitement {
  position: absolute; inset-inline-start: 1rem; top: -5rem; z-index: 40;
  background: var(--vert); color: #fff; padding: .75rem 1rem; border-radius: 8px;
}
.evitement:focus { top: 1rem; }

/* Boutons : le point intérieur s'ouvre comme une pupille au survol */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 3.5rem; padding: .75rem 1.625rem;
  border: 1.5px solid transparent; border-radius: 99px;
  font: 700 1.0625rem/1.2 var(--texte); text-decoration: none; text-align: center;
  transition: background-color .22s, color .22s, border-color .22s;
}
.bouton__point { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; transition: transform .35s var(--douce); }
.bouton:hover .bouton__point { transform: scale(1.7); }
.bouton--plein { background: var(--vert); color: #fff; }
.bouton--plein:hover { background: var(--vert-fonce); }
.bouton--clair { background: var(--lumiere); color: var(--nuit); }
.bouton--clair .bouton__point { background: var(--ambre-fonce); }
.bouton--clair:hover { background: var(--menthe); }
.bouton--contour { border-color: var(--vert); color: var(--vert-fonce); }
.bouton--contour:hover { background: var(--brume); }
.bouton--contour-clair { border-color: rgb(247 246 242 / .45); color: var(--lumiere); }
.bouton--contour-clair:hover { border-color: var(--lumiere); background: rgb(247 246 242 / .1); }
.bouton--petit { min-height: 2.75rem; padding: .375rem 1.125rem; font-size: 1rem; }

/* En-tête flottant, lisible sur la salle sombre comme sur la page claire */
body::before {
  content: ""; position: fixed; z-index: 29; inset: 0 0 auto; height: 2.75rem; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(#000 45%, transparent); -webkit-mask-image: linear-gradient(#000 45%, transparent);
}
.entete {
  position: fixed; z-index: 30; top: .75rem; inset-inline: max(.75rem, calc((100vw - 90rem) / 2));
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 3.75rem; padding: .5rem .5rem .5rem 1.125rem;
  background: var(--lumiere);
  border: 1px solid var(--filet);
  border-radius: 99px;
}
[dir="rtl"] .entete { padding: .5rem 1.125rem .5rem .5rem; }
.marque { display: flex; align-items: center; gap: .625rem; flex: none; text-decoration: none; }
.marque__logo { width: 2.75rem; height: auto; flex: none; }
.marque__nom { font: 500 1.125rem/1.1 var(--titre); letter-spacing: -.01em; white-space: nowrap; }
.nav { display: flex; gap: clamp(.25rem, 1vw, .875rem); margin-inline-start: auto; }
.nav a { position: relative; padding: .5rem .625rem; font-size: 1rem; text-decoration: none; white-space: nowrap; }
.nav a::after {
  content: ""; position: absolute; left: 50%; bottom: .125rem; width: .3125rem; height: .3125rem; margin-left: -.156rem;
  border-radius: 50%; background: var(--ambre-moyen); transform: scale(0); transition: transform .3s var(--douce);
}
.nav a:hover::after, .nav a.actif::after { transform: scale(1); }
/* Sélecteur de langue : menu déroulant */
.langue { position: relative; flex: none; font-size: 1rem; }
.langue summary {
  display: flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: .375rem .75rem;
  border: 1px solid var(--filet); border-radius: 99px; cursor: pointer; list-style: none; user-select: none;
  transition: background-color .2s, border-color .2s;
}
.langue summary::-webkit-details-marker { display: none; }
.langue[open] summary { background: var(--brume); border-color: var(--vert); }
@media (hover: hover) { .langue summary:hover { background: var(--brume); border-color: var(--vert); } }
.langue summary svg { flex: none; transition: transform .25s var(--douce); }
.langue[open] summary svg:last-child { transform: rotate(180deg); }
.langue ul {
  position: absolute; z-index: 40; inset-inline-end: 0; top: calc(100% + .5rem);
  min-width: 100%; margin: 0; padding: .375rem; list-style: none;
  background: var(--lumiere); border: 1px solid var(--filet); border-radius: 1rem;
  box-shadow: 0 .75rem 2rem rgb(6 32 27 / .16);
}
.langue li a {
  display: block; padding: .5rem .875rem; border-radius: .625rem; white-space: nowrap; text-decoration: none;
}
.langue li a:hover { background: var(--brume); }
.langue li a[aria-current="true"] { background: var(--vert); color: #fff; }

/* Menu : remplace la navigation dès qu'elle ne tient plus sur une ligne */
.menu { display: none; flex: none; }
.menu summary {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--filet); border-radius: 50%; cursor: pointer; list-style: none;
  transition: background-color .2s, border-color .2s;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--brume); border-color: var(--vert); }
@media (hover: hover) { .menu summary:hover { background: var(--brume); border-color: var(--vert); } }
.menu__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu summary path { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; transform-origin: 12px 12px; transition: transform .3s var(--douce); }
.menu[open] .menu__a { transform: translateY(4px) rotate(45deg); }
.menu[open] .menu__b { transform: translateY(-4px) rotate(-45deg); }
.menu nav {
  position: absolute; z-index: 40; top: calc(100% + .5rem); inset-inline-end: 0; width: min(100%, 22rem);
  max-height: calc(100svh - 6.5rem); overflow-y: auto; padding: .5rem;
  background: var(--lumiere); border: 1px solid var(--filet); border-radius: 1.5rem;
  box-shadow: 0 .75rem 2rem rgb(6 32 27 / .16);
}
.menu li a { display: flex; align-items: center; min-height: 3rem; padding-inline: 1rem; border-radius: .875rem; font: 500 1.25rem/1.2 var(--titre); text-decoration: none; }
.menu li a:hover { background: var(--brume); }
@media (max-width: 78rem) {
  .nav { display: none; }
  .menu { display: block; }
  .langue { margin-inline-start: auto; }
  .entete { gap: .625rem; }
}

/* Scène d'ouverture */
.scene { background: var(--nuit); color: var(--lumiere); }
.scene__plateau { position: relative; overflow: hidden; min-height: 100svh; --oeil: min(112svh, 60vw); --oeil-x: calc(100% - var(--oeil) * .33); --oeil-y: 50svh; background: radial-gradient(circle 70vmax at var(--oeil-x) var(--oeil-y), rgb(217 164 65 / .1), rgb(217 164 65 / 0)); }
[dir="rtl"] .scene__plateau { --oeil-x: calc(var(--oeil) * .33); }
.scene__lumiere { position: absolute; opacity: 0; }
/* La lumière naît derrière l'œil et s'étend : seul le transform est animé */
.mouvement .scene__lumiere {
  opacity: 1; width: 260vmax; height: 260vmax;
  top: calc(50svh - 130vmax); inset-inline-end: calc(var(--oeil) * -.17 + var(--oeil) / 2 - 130vmax);
  background: radial-gradient(closest-side, var(--lumiere) 80%, rgb(247 246 242 / 0) 100%);
  transform: scale(0); will-change: transform;
}

.oeil {
  position: absolute;
  width: var(--oeil); height: var(--oeil);
  top: calc((100svh - var(--oeil)) / 2);
  inset-inline-end: calc(var(--oeil) * -.17);
  background: radial-gradient(circle at center, #03100D 28%, #0B4A3D 46%, #0F7A62 62%, #06201B 70%, transparent 71%);
  border-radius: 50%;
}
.oeil.pret { background: none; }
.oeil canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.oeil__mire { position: absolute; inset: 0; width: 100%; height: 100%; color: #6FA894; overflow: visible; }
.oeil__mesure {
  position: absolute; bottom: 12%; inset-inline-end: 22%;
  padding: .375rem .875rem; border-radius: 99px;
  background: var(--lumiere); color: var(--encre);
  font-size: .9375rem; line-height: 1.3; white-space: nowrap;
}
.oeil__mesure b { color: var(--vert-fonce); font-weight: 700; font-variant-numeric: tabular-nums; margin-inline-start: .25rem; }

.scene__texte {
  position: relative; z-index: 2;
  width: min(100%, 92rem); margin-inline: auto; padding-inline: var(--marge);
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: 7rem clamp(2.5rem, 6vh, 4.5rem);
}
.scene__texte > * { max-width: min(46rem, 45vw); }
.scene__intro { margin-top: 1.5rem; max-width: 33rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.42; color: #DCE7DF; }
.scene__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.scene__infos { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin-top: 1.75rem; font-size: 1rem; color: #C5D6CC; }
.scene__infos a { text-underline-offset: .2em; }
.scene__urgence { color: var(--ambre); font-weight: 500; }

.scene__these { position: relative; z-index: 2; background: var(--lumiere); color: var(--encre); padding: var(--section) var(--marge); }
.scene__these p {
  max-width: 22em; margin-inline: auto;
  font: 500 clamp(1.5rem, 1.1rem + 1.7vw, 2.625rem)/1.16 var(--titre); letter-spacing: -.02em;
}
[dir="rtl"] .scene__these p { line-height: 1.5; font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem); }
.mot { display: inline-block; }

/* Avec le mouvement : la lumière entre dans le plateau, sans section épinglée par JavaScript */
.mouvement .scene { height: 230svh; }
/* Ouverture en CSS : elle démarre avec la page, sans attendre les bibliothèques */
@keyframes arrivee { from { opacity: 0; transform: translateY(16px); } }
@keyframes apparition { from { opacity: 0; } }
.mouvement .oeil { animation: apparition 1.1s ease-out both; }
.mouvement h1 { animation: arrivee .9s var(--douce) .1s both; }
.mouvement .scene__intro { animation: arrivee .7s var(--douce) .35s both; }
.mouvement .scene__actions { animation: arrivee .7s var(--douce) .45s both; }
.mouvement .scene__infos { animation: arrivee .7s var(--douce) .55s both; }
html.mouvement:not(.anime) #these { visibility: hidden; }
.mouvement .scene__plateau { position: sticky; top: 0; height: 100svh; }
.mouvement .scene__these {
  position: absolute; inset: 0; background: none;
  display: flex; align-items: center; padding: 6rem var(--marge) 3rem;
  pointer-events: none;
}
.mouvement .scene__these p { margin-inline: max(0px, calc((100vw - 92rem) / 2)) 0; max-width: min(19em, 50vw); }

/* Soins : la coupe de l'œil */
.soins { padding-block: var(--section) 0; }
.soins__tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.soins__tete p { color: var(--encre-douce); max-width: 30rem; }

.anatomie { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.anatomie__figure { background: var(--blanc); border: 1px solid var(--filet); border-radius: 28px; padding: clamp(1rem, 3vw, 2.5rem); }
#coupe { width: 100%; height: auto; overflow: visible; }
.trait { fill: none; stroke: #7C8F86; stroke-width: 2.5; stroke-linecap: round; transition: stroke .35s, fill .35s, stroke-width .35s; }
.trait--epais { stroke-width: 7; }
.trait--muscle { stroke-width: 13; }
.trait--retine { stroke-width: 7; }
.trait--cornee { stroke-width: 4; }
.trait--plein { fill: var(--brume); }
.partie { cursor: pointer; }
.partie:hover .trait { stroke: var(--vert); }
.partie.active .trait { stroke: var(--vert); }
.partie.active .trait--plein { fill: #BFE4D5; }
.rayons path { fill: none; stroke: var(--ambre-moyen); stroke-width: 1.5; }
.rayons circle { fill: var(--ambre-moyen); }

.onglets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.onglet {
  min-height: 2.75rem; padding: .375rem 1rem;
  border: 1.5px solid var(--filet); border-radius: 99px; background: none;
  color: var(--encre); font: 500 1rem/1.2 var(--texte); cursor: pointer;
  transition: background-color .22s, color .22s, border-color .22s;
}
.onglet:hover { border-color: var(--vert); }
.onglet[aria-selected="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.fiche { min-height: 17.5rem; }
.fiche h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.12; letter-spacing: -.018em; }
[dir="rtl"] .fiche h3 { line-height: 1.35; }
.fiche p { margin-top: 1rem; max-width: 34rem; color: var(--encre-douce); }
.pastilles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.pastilles li { padding: .25rem .875rem; background: var(--brume); border-radius: 99px; font-size: 1rem; color: var(--vert-fonce); font-weight: 500; }

/* Chirurgie */
.chirurgie { background: var(--sapin); color: var(--lumiere); padding-block: var(--section); border-radius: clamp(24px, 3vw, 44px); margin-inline: clamp(.5rem, 1.2vw, 1.25rem); }
.chirurgie__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 7vw, 7rem); align-items: start; }
.chirurgie__tete { grid-column: 1 / -1; }
.chirurgie__tete .titre { max-width: none; }
.operations { grid-column: 1 / -1; display: grid; grid-auto-rows: 1fr; }
.operations li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: .5rem clamp(2.5rem, 7vw, 7rem); align-items: center; }
.operations li > * { margin: 0; }
.chirurgie__tete p { margin-top: 1.25rem; max-width: 26rem; color: #CFE0D6; }
.operations li { position: relative; padding-block: clamp(1rem, 1.8vw, 1.5rem); padding-inline-start: 2.25rem; border-top: 1px solid rgb(247 246 242 / .24); }
.operations li:last-child { border-bottom: 1px solid rgb(247 246 242 / .24); }
.operations li::before {
  content: ""; position: absolute; inset-inline-start: .25rem; top: 50%; margin-top: -.3125rem;
  width: .625rem; height: .625rem; border-radius: 50%; border: 1.5px solid var(--ambre);
  transition: transform .4s var(--douce), background-color .3s;
}
.operations li:hover::before { transform: scale(1.5); background: var(--ambre); }
.operations h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.15; letter-spacing: -.018em; }
[dir="rtl"] .operations h3 { line-height: 1.4; }
.operations p { max-width: 34rem; color: #D7E5DC; }

/* Consultation : un cadran suit la progression */
.consultation { padding-block: var(--section) 0; }
.consultation__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 7vw, 7rem); align-items: start; }
.cadran-zone { position: sticky; top: 7rem; grid-row: span 2; }
.cadran { position: relative; width: min(100%, 22rem); margin-top: clamp(2rem, 4vw, 3.5rem); aspect-ratio: 1; }
.cadran svg { width: 100%; height: 100%; }
#cadran-graduations line { stroke: #A9BBB2; stroke-width: .6; }
.cadran__fond { fill: none; stroke: var(--brume); stroke-width: 4; }
.cadran__arc { fill: none; stroke: var(--ambre-moyen); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .8; transform: rotate(-90deg); transform-origin: center; }
html:not(.mouvement) .cadran { display: none; }
.cadran__chiffre { position: absolute; inset: 0; display: grid; place-items: center; font: 500 clamp(4rem, 8vw, 6.5rem)/1 var(--titre); color: var(--vert-fonce); font-variant-numeric: tabular-nums; }
.etape { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); padding-block: clamp(1.5rem, 2.6vw, 2.25rem); border-top: 1px solid var(--filet); }
.etape:last-child { border-bottom: 1px solid var(--filet); }
.mouvement .etape h3 { color: var(--encre-douce); transition: color .3s; }
.mouvement .etape.actif h3 { color: var(--encre); }
.etape__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font: 500 1.25rem/1 var(--titre); color: var(--vert-fonce); transition: background-color .3s, color .3s; }
.etape.actif .etape__num { background: var(--vert); color: #fff; }
.etape h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.14; letter-spacing: -.018em; }
[dir="rtl"] .etape h3 { line-height: 1.35; }
.etape p { margin-top: .75rem; max-width: 34rem; color: var(--encre-douce); }
.apporter { grid-column: 2; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--brume); border-radius: 22px; }
.apporter ul { margin-top: 1rem; }
.apporter li { padding-block: .625rem; border-top: 1px solid rgb(14 31 27 / .14); }
.apporter li:last-child { padding-bottom: 0; }

/* Examens */
.examens { padding-block: var(--section) 0; }
.examens__titre { max-width: 15em; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.examens__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.875rem, 1.6vw, 1.5rem); }
.examen { background: var(--blanc); border: 1px solid var(--filet); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.examen--large { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; background: var(--nuit); border-color: var(--nuit); color: var(--lumiere); }
.examen--large h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -.018em; }
.examen--large .examen__texte p { color: #DCE7DF; margin-top: 1rem; max-width: 26rem; }
.examen__visuel { aspect-ratio: 10 / 7; display: grid; place-items: center; background: var(--brume); overflow: hidden; }
.examen__visuel svg { width: 76%; height: auto; overflow: visible; }
.examen__visuel--retine { aspect-ratio: 10 / 7; background: var(--nuit); }
.examen__visuel--retine img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.85); transition: transform 1.2s var(--douce); }
.examen--large:hover img { transform: scale(1.035); }
.examen__texte { padding: clamp(1.25rem, 2.4vw, 2.25rem); }
.examen__texte p { margin-top: .5rem; color: var(--encre-douce); }
.anneaux ellipse, .couches path, .eventail path { fill: none; stroke: var(--vert); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.anneaux { transform-origin: 100px 70px; transition: transform .8s var(--douce); }
.examen:hover .anneaux { transform: rotate(18deg) scale(1.05); }
.couches path { transition: transform .7s var(--douce); }
.examen:hover .couches path:nth-child(1) { transform: translateY(-7px); }
.examen:hover .couches path:nth-child(2) { transform: translateY(-4px); }
.examen:hover .couches path:nth-child(4) { transform: translateY(4px); }
.examen:hover .couches path:nth-child(5) { transform: translateY(7px); }
.eventail path { transition: opacity .4s; }
.examen:hover .eventail path:nth-child(3) { opacity: .45; }

/* Médecin */
.medecin { padding-block: var(--section) 0; }
.medecin__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 7vw, 7rem); align-items: stretch; }
.parcours { display: flex; flex-direction: column; }
.medecin__tete { display: contents; }
.medecin__tete .titre { grid-column: 1 / -1; }
.medecin__intro { grid-column: 1 / -1; margin-top: -1.25rem; max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.42; color: var(--encre-douce); }
.medecin__photo { margin: 0; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 22px; background: var(--brume); }
.medecin__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 78%; }
.parcours__bloc { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1.25rem, 2vw, 1.75rem); border-top: 1px solid var(--filet); }
.parcours__bloc:last-child { border-bottom: 1px solid var(--filet); }
.parcours__bloc h3 { color: var(--vert-fonce); }
.parcours__bloc ul { margin-top: .75rem; display: grid; gap: .375rem; }

/* Cabinet : photos des locaux */
.cabinet { padding-block: var(--section) var(--section); background: linear-gradient(rgb(217 164 65 / 0), rgb(217 164 65 / .1) 12rem, rgb(217 164 65 / 0) 36rem); }
.cabinet__tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem clamp(2.5rem, 7vw, 7rem); align-items: end; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.cabinet__intro { max-width: 30rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.42; color: var(--encre-douce); }
.cabinet__grille { --rang: clamp(13rem, 22vw, 21rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--rang); gap: clamp(.625rem, 1.2vw, 1rem); }
.cabinet__photo { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: var(--brume); grid-column: span 4; }
.cabinet__photo--grande { grid-column: 1 / span 7; grid-row: span 2; }
.cabinet__photo--haut { grid-column: 8 / span 5; }
.cabinet__photo--bas { grid-column: span 6; }
.cabinet__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--douce); }
.cabinet__photo:hover img { transform: scale(1.035); }
.cabinet__photo figcaption { position: absolute; inset-inline-start: .75rem; bottom: .75rem; padding: .375rem .75rem; border-radius: 999px; background: rgb(6 32 27 / .72); color: var(--lumiere); font-size: .9375rem; line-height: 1.2; backdrop-filter: blur(6px); }
@media (max-width: 68rem) {
  .cabinet__tete { grid-template-columns: minmax(0, 1fr); }
  .cabinet__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .cabinet__photo, .cabinet__photo--grande, .cabinet__photo--haut, .cabinet__photo--bas { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .cabinet__photo--grande { grid-column: 1 / -1; }
}
@media (max-width: 44rem) {
  .cabinet__grille { grid-template-columns: minmax(0, 1fr); }
  .cabinet__photo--grande { grid-column: auto; }
}

/* Avis : piste horizontale */
.avis { padding-top: var(--section); }
.avis__tete { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 1.25rem clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.avis__resume { display: flex; align-items: center; gap: 1rem; }
.avis__chiffre { font: 500 clamp(3rem, 2.2rem + 2.4vw, 4.25rem)/.9 var(--titre); letter-spacing: -.03em; color: var(--vert); }
.avis__etoiles { font-size: 1.125rem; letter-spacing: .08em; color: var(--ambre-fonce); line-height: 1.2; }
.avis__source { max-width: 17rem; font-size: .9375rem; line-height: 1.35; color: var(--encre-douce); }
.avis__commandes { display: flex; gap: .5rem; }
.avis__fleche { display: grid; place-items: center; width: 3rem; height: 3rem; background: none; border: 1.5px solid var(--vert); border-radius: 50%; color: var(--vert-fonce); cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.avis__fleche:hover:not(:disabled) { background: var(--vert); color: #fff; }
.avis__fleche:disabled { opacity: .3; cursor: default; }
[dir="rtl"] .avis__fleche svg { transform: scaleX(-1); }
.avis__piste {
  display: flex; gap: clamp(.75rem, 1.4vw, 1.25rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--vert) var(--brume);
  padding: .25rem max(var(--marge), calc((100vw - 92rem) / 2 + var(--marge))) 1.25rem;
  scroll-padding-inline: max(var(--marge), calc((100vw - 92rem) / 2 + var(--marge)));
}
.avis__piste:focus-visible { outline-offset: -3px; }
.avis-carte { flex: none; display: flex; flex-direction: column; gap: .75rem; width: min(78vw, 19rem); min-height: 11rem; padding: 1rem 1.125rem; cursor: pointer; background: var(--blanc); border: 1px solid var(--filet); border-radius: 22px; scroll-snap-align: start; }
.avis-carte h3 { color: var(--vert-fonce); }
.avis-carte__etoiles { color: var(--ambre-fonce); letter-spacing: .08em; }
.avis-carte__texte { flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-size: .9375rem; line-height: 1.45; overflow: hidden; }
.avis-carte__texte--complet { display: block; overflow: visible; }
.avis-carte__auteur { display: flex; flex-direction: column; font-size: .9375rem; color: var(--encre-douce); }
.avis-carte__auteur b, .avis-carte__auteur a { color: var(--encre); font-weight: 700; }
.avis-carte--lien { justify-content: center; align-items: center; width: min(60vw, 12rem); text-align: center; cursor: pointer; background: var(--vert); border-color: var(--vert); color: #fff; font: 500 1.25rem/1.25 var(--titre); text-decoration: none; transition: background-color .2s; }
.avis-carte--lien:hover { background: var(--vert-fonce); }
.avis__themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); }
.avis__themes li { padding-block: clamp(1rem, 1.6vw, 1.5rem); border-top: 1px solid var(--filet); font: 500 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.2 var(--titre); letter-spacing: -.012em; color: var(--vert-fonce); }
.avis__lien { margin-top: clamp(1rem, 2vw, 1.75rem); }
.avis__mention { margin-top: .75rem; font-size: .9375rem; color: var(--encre-douce); }

/* Urgences */
.urgence { padding-block: var(--section); }
.urgence__carte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2.5rem, 6vw, 6rem); padding: clamp(1.75rem, 5vw, 4.5rem); background: var(--ambre-voile); border-radius: 28px; }
.urgence .bouton--plein { background: var(--nuit); }
.urgence .bouton--plein:hover { background: var(--sapin); }
.urgence__tete h2 { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem); }
.urgence__tete p { margin-block: 1.25rem 1.75rem; max-width: 24rem; color: #3D4A45; }
.urgence__liste li { padding-block: .875rem; border-top: 1px solid rgb(14 31 27 / .16); font-weight: 500; }
.urgence__liste li:first-child { border-top: 0; padding-top: 0; }
.urgence__liste li:last-child { padding-bottom: 0; }

/* Contact : on revient dans la salle */
.contact { background: var(--nuit); color: var(--lumiere); padding-top: clamp(2.25rem, 4vw, 3.5rem); border-radius: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0 0; }
.contact__haut { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: center; }
.contact__plan { display: flex; flex-direction: column; align-items: center; }
.contact__plan .carte { max-width: 28rem; }
.contact__intro { margin-top: 1rem; max-width: 30rem; color: #DCE7DF; }
.contact__tel { display: block; width: fit-content; margin-top: clamp(1rem, 2vw, 1.75rem); font: 500 clamp(2.25rem, 1rem + 3.2vw, 3.75rem)/1.05 var(--titre); letter-spacing: -.03em; color: var(--ambre); text-decoration: none; white-space: nowrap; }
.contact__tel:hover { color: var(--lumiere); }
.contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(.875rem, 1.6vw, 1.25rem); }

.carte { position: relative; width: 100%; aspect-ratio: 1000 / 560; }
.carte__oeil { position: absolute; inset: 0; overflow: hidden; clip-path: url(#forme-oeil); background: var(--sapin); }
.carte__oeil iframe { position: absolute; left: -25%; top: -25%; display: block; width: 150%; height: 150%; border: 0; filter: saturate(.8) contrast(1.02); }
.carte__oeil::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 52%, rgb(8 47 39 / .55) 100%); box-shadow: inset 0 0 0 1px rgb(247 246 242 / .1); }
.carte__iris { position: absolute; top: 50%; left: 50%; height: 62%; aspect-ratio: 1; border: 2px solid var(--ambre); border-radius: 50%; outline: 1px solid rgb(217 164 65 / .4); outline-offset: 7px; transform: translate(-50%, -50%); pointer-events: none; }
.carte__paupieres { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.carte__paupieres path { fill: none; stroke: var(--menthe); stroke-width: 3; }
.carte__lien { margin-top: .5rem; font-size: .9375rem; text-align: center; }
.carte__lien a { color: var(--ambre); font-weight: 700; text-underline-offset: .2em; }

.contact__infos { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 1rem clamp(2rem, 5vw, 5rem); margin-top: clamp(1rem, 2vw, 1.5rem); padding-top: clamp(1rem, 1.6vw, 1.25rem); font-size: .9375rem; line-height: 1.45; border-top: 1px solid rgb(247 246 242 / .2); }
.contact__infos h3 { font: 700 .875rem/1.3 var(--texte); letter-spacing: 0; color: var(--ambre); margin-bottom: .25rem; }
.contact__liens { display: grid; gap: .25rem; }
.contact__liens a { text-underline-offset: .2em; }
.contact__mail { overflow-wrap: anywhere; }
.horaires { width: 100%; border-collapse: collapse; }
.horaires th { font-weight: 400; text-align: start; padding-block: .125rem; padding-inline-end: 1rem; }
.horaires td { text-align: end; padding-block: .125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pied { margin-top: clamp(.75rem, 1.5vw, 1rem); font-size: .875rem; color: #B7C9BF; }
.pied__haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 2rem; padding-block: .625rem .25rem; padding-inline-end: 4rem; border-top: 1px solid rgb(247 246 242 / .2); }
.pied__marque { display: flex; align-items: center; gap: .75rem; text-decoration: none; line-height: 1.3; }
.pied__marque img { flex: none; width: 2.5rem; height: auto; filter: brightness(0) invert(1); opacity: .9; }
.pied__marque span { display: flex; flex-direction: column; }
.pied__marque b { font: 500 1rem/1.2 var(--titre); color: var(--lumiere); }
.pied__nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.pied__nav a { text-decoration: none; color: var(--lumiere); padding-block: .25rem; }
.pied__nav a:hover { text-decoration: underline; text-underline-offset: .2em; }
.pied__mentions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .125rem 2rem; padding-block: .25rem .75rem; padding-inline-end: 4rem; font-size: .75rem; border-top: 0; border-top: 1px solid rgb(247 246 242 / .12); }

/* Retour en haut */
.retour {
  position: fixed; z-index: 25; bottom: 1.25rem; inset-inline-end: 1.25rem;
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  background: var(--vert); color: #fff;
  border: 2px solid var(--lumiere); border-radius: 50%;
  transition: opacity .25s, transform .3s var(--douce), visibility .25s, background-color .2s;
}
.retour:hover { background: var(--vert-fonce); transform: translateY(-3px); }
.retour:focus-visible { outline-color: var(--menthe); }
.retour.cache { opacity: 0; visibility: hidden; transform: translateY(10px); }

.barre { display: none; }

/* Tablette */
@media (max-width: 68rem) {
  .soins__tete, .anatomie, .chirurgie__grille, .consultation__grille, .medecin__grille, .urgence__carte, .contact__haut { grid-template-columns: minmax(0, 1fr); }
  .cadran-zone { position: static; }
  .operations li { grid-template-columns: minmax(0, 1fr); }
  .apporter { grid-column: 1; }
  .medecin__photo { max-width: none; aspect-ratio: 4 / 3; }
  .cadran { display: none; }
  .fiche { min-height: 19rem; }
  .examens__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avis__themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .examen--large { grid-template-columns: minmax(0, 1fr); }
  .avis__tete { grid-template-columns: minmax(0, 1fr) auto; }
  .avis__tete h2 { grid-column: 1 / -1; }
  .contact__infos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact__infos > :first-child { grid-column: 1 / -1; }
}

/* Téléphone et écrans étroits : l'œil au-dessus, le texte en dessous */
@media (max-width: 68rem), (max-aspect-ratio: 1/1) {
  .scene__plateau, [dir="rtl"] .scene__plateau { --oeil: min(118vw, 56svh); --oeil-x: 50%; --oeil-y: calc(-8svh + var(--oeil) / 2); }
  .mouvement .scene__lumiere { top: calc(-8svh + var(--oeil) / 2 - 130vmax); inset-inline-end: calc(50vw - 130vmax); }
  .oeil { top: -8svh; inset-inline-end: calc((100vw - var(--oeil)) / 2); }
  .oeil__mesure { bottom: 16%; inset-inline-end: 50%; translate: 50% 0; }
  [dir="rtl"] .oeil__mesure { translate: -50% 0; }
  .scene__texte > * { max-width: 40rem; }
  .scene__texte { padding-block: 0 2rem; }
  .mouvement .scene__these { align-items: center; padding: calc(var(--oeil) * .62) var(--marge) 6rem; }
  .mouvement .scene__these p { max-width: 40rem; margin-inline: 0; }
}

@media (max-width: 44rem) {
  .entete { gap: .5rem; padding-inline-start: .875rem; }
  [dir="rtl"] .entete { padding-inline: .875rem .5rem; }
  html { scroll-padding-bottom: 5.5rem; }
  body { padding-bottom: 4.25rem; }
  .entete .bouton { display: none; }
  .langue summary { width: 2.75rem; padding: 0; justify-content: center; }
  .langue summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .langue summary svg:last-child { display: none; }
  .avis__themes { grid-template-columns: minmax(0, 1fr); }
  .avis__lien .bouton { width: 100%; }
  .barre {
    position: fixed; z-index: 25; inset: auto 0 0; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: .375rem;
    padding: .5rem max(.5rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left));
    background: var(--lumiere); border-top: 1px solid var(--filet);
    transition: transform .3s var(--douce), visibility .3s;
  }
  .barre.cache { transform: translateY(100%); visibility: hidden; }
  .barre a { display: grid; place-items: center; min-height: 3rem; padding-inline: .25rem; border: 1.5px solid var(--vert); border-radius: 99px; color: var(--vert-fonce); font-weight: 700; font-size: 1rem; text-align: center; text-decoration: none; }
  .barre .barre__principal { background: var(--vert); color: #fff; }
  .marque { gap: .375rem; }
  .marque__nom { font-size: .9375rem; }
  .marque__logo { width: 2.25rem; height: auto; }
  .scene__actions .bouton { flex: 1 1 100%; }
  .scene__infos { flex-direction: column; }
  h1 { font-size: 2.375rem; }
  [dir="rtl"] h1 { font-size: 2.125rem; }
  .scene__intro { font-size: 1.0625rem; margin-top: 1rem; }
  .scene__actions { margin-top: 1.25rem; }
  .scene__actions .bouton { min-height: 3.125rem; }
  .scene__infos { margin-top: 1rem; font-size: .9375rem; }
  .examens__grille { grid-template-columns: minmax(0, 1fr); }
  .retour { display: none; }
  .pied__mentions { padding-inline-end: 0; }
  .contact__infos { grid-template-columns: minmax(0, 1fr); }
  .contact__infos > :first-child { grid-column: auto; }
  .avis__fleche { width: 2.75rem; height: 2.75rem; }
  .onglets { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge); padding-bottom: .25rem; scrollbar-width: none; }
  .onglet { flex: none; }
  .fiche { min-height: 22rem; }
  .contact__actions .bouton { flex: 1 1 100%; }
}

/* Petits téléphones : l'appel à l'action reste visible sans défiler */
@media (max-width: 44rem) and (max-height: 800px) {
  .scene__infos li:last-child { display: none; }
}
@media (max-width: 44rem) and (max-height: 720px) {
  .scene__intro, .scene__infos { display: none; }
}
@media (max-width: 23rem) {
  [dir="rtl"] .marque__logo { display: none; }
}
@media (max-width: 23rem) {
  .contact__tel { font-size: 2rem; }
}
@media (max-width: 21rem) {
  .marque__logo { display: none; }
  .marque__nom { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}