/* ============================================================
   Cru « Nacre » — feuille de style du site public
   Direction : porcelaine et nacre. Fond presque blanc, encre bleu-noir,
   accent prune ; la seule « couleur » est l'irisation de la nacre, réservée
   aux mécanismes (miroir, sceaux, section finale). Bodoni Moda pour les
   titres (axe optique), Hanken Grotesk pour le texte. L'ellipse est la
   forme de la maison : boutons, camées, perles. Chaque section a son
   propre mécanisme. Mobile d'abord : les règles de base décrivent 390 px.
   Les noms de jetons (cuivre, creme, sable, nuit, encre…) sont ceux des
   autres crus pour que le tableau de bord, l'éditeur et ses palettes marchent.
   ============================================================ */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-normal.2c2bff3fe09a.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-italic.1871af2b0798.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-normal.a6b899943e31.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-italic.1edbd51f5ac7.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
    --creme: #faf8f6;            /* porcelaine : fond du site */
    --sable: #efeae6;            /* perle : fond secondaire */
    --encre: #1a1a21;            /* texte */
    --nuit: #1a1a21;             /* fond sombre */
    --cuivre: #4b2c4a;           /* prune : accent, boutons */
    --cuivre-fonce: #2f1a2f;
    --cuivre-clair: #e9cfcb;     /* rose de nacre */
    /* l'irisation : cinq reflets de nacre, jamais plus */
    --nacre-1: #f2d6d0;
    --nacre-2: #dcd3ec;
    --nacre-3: #d2e6df;
    --nacre-4: #f3e5c8;
    --nacre-5: #d6e2ef;
    --nacre: linear-gradient(115deg, var(--nacre-1) 0%, var(--nacre-2) 22%, var(--nacre-3) 44%, var(--nacre-4) 66%, var(--nacre-5) 85%, var(--nacre-1) 100%);
    --blanc: #ffffff;
    --gris: color-mix(in srgb, var(--encre), var(--creme) 52%);
    --gris-clair: color-mix(in srgb, var(--encre), var(--creme) 72%);
    --ligne: color-mix(in srgb, var(--encre), transparent 86%);
    --ligne-forte: color-mix(in srgb, var(--encre), transparent 60%);
    --ligne-claire: color-mix(in srgb, var(--creme), transparent 78%);
    --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
    --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
    --marge: clamp(20px, 5vw, 96px);
    --largeur: 1440px;
    --rayon: 0px;
    --sortie: cubic-bezier(0.16, 1, 0.3, 1);
    --entete: 76px;
    --mx: 50%;
    --my: 50%;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-weight: 350; font-size: 17px; line-height: 1.55; color: var(--encre); background: var(--creme); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.menu-ouvert { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--nacre-2); color: var(--encre); }
:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 4px; border-radius: 2px; }
.evitement { position: absolute; left: -9999px; top: 8px; background: var(--encre); color: var(--creme); padding: 8px 14px; z-index: 1000; }
.evitement:focus { left: 8px; }

/* ---------- typographie ---------- */
/* Le « courant » : une ligne d'introduction en italique Bodoni, à la place d'un surtitre en capitales. */
.surtitre { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--cuivre); margin-bottom: 14px; }
.titre-geant, .titre-page, .titre-section, .titre-bloc { font-family: var(--serif); font-weight: 400; line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; font-variation-settings: "opsz" 96; }
.titre-geant { font-size: clamp(64px, 16vw, 260px); line-height: 0.86; letter-spacing: -0.03em; }
.titre-page { font-size: clamp(44px, 8vw, 118px); }
.titre-section { font-size: clamp(34px, 5vw, 76px); }
.titre-bloc { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; font-variation-settings: "opsz" 36; }
.titre-page em, .titre-section em, .titre-bloc em, .titre-geant em { font-style: italic; font-weight: 400; }
.texte-grand { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; font-weight: 300; }
.texte-doux { color: var(--gris); }
.petit { font-size: 13px; line-height: 1.5; }
.prose { display: grid; gap: 16px; font-size: 17px; line-height: 1.65; max-width: 62ch; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin-top: 22px; line-height: 1.1; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose .a-completer { background: var(--nacre-4); padding: 0 4px; }
.lien-souligne { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 2px; transition: background-size 500ms var(--sortie); }
.lien-souligne:hover { background-size: 30% 1px; }
/* la perle : une petite ellipse qui sépare deux informations */
.perle { display: inline-block; width: 7px; height: 5px; border-radius: 50%; background: var(--nacre); vertical-align: middle; margin: 0 10px; box-shadow: inset 0 0 0 0.5px var(--ligne-forte); }
.tabulaire { font-variant-numeric: tabular-nums; }

/* ---------- boutons : des cabochons, ellipses tracées d'un filet ---------- */
.bouton {
    --fond: transparent; --texte: var(--encre); --bord: var(--encre);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 17px 34px; border-radius: 50%; border: 1px solid var(--bord);
    background: var(--fond); color: var(--texte); text-decoration: none; cursor: pointer;
    font-family: var(--sans); font-weight: 450; font-size: 14px; letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
    position: relative; isolation: isolate;
    transition: color 400ms, border-color 400ms, transform 700ms var(--sortie);
}
.bouton::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--nacre); background-size: 300% 300%; opacity: 0; z-index: -1; transition: opacity 500ms var(--sortie); }
.bouton:hover { border-color: transparent; color: var(--encre); }
.bouton:hover::before { opacity: 1; animation: irisation 6s linear infinite; }
.bouton-plein { --fond: var(--cuivre); --texte: var(--creme); --bord: var(--cuivre); }
.bouton-clair { --texte: var(--creme); --bord: var(--creme); }
.bouton-petit { padding: 11px 22px; font-size: 13px; }
.bouton[disabled] { opacity: 0.4; cursor: default; }
.bouton[disabled]::before { display: none; }
@keyframes irisation { to { background-position: 300% 0; } }

/* ---------- l'en-tête : marque au centre, fil de nacre qui mesure le défilement ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--entete); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--marge); color: var(--encre); transition: background 500ms, color 500ms, transform 600ms var(--sortie), box-shadow 500ms; }
.entete::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--nacre); transform-origin: left; transform: scaleX(var(--defile, 0)); }
.entete.compacte { background: color-mix(in srgb, var(--creme), transparent 12%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.entete.cachee { transform: translateY(-100%); }
.entete.sur-image:not(.compacte) { color: var(--creme); }
.entete.menu-ouvert { color: var(--encre); background: transparent; backdrop-filter: none; }
.marque { grid-column: 2; text-decoration: none; display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-size: 28px; letter-spacing: 0.02em; font-variation-settings: "opsz" 36; }
.marque-logo { height: 30px; width: auto; }
.marque-logo:not([src]) , .marque-logo[src=""] { display: none; }
.navigation { display: none; grid-column: 1; gap: 28px; font-size: 14px; font-weight: 450; }
.navigation a { text-decoration: none; position: relative; padding: 6px 0; }
.navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--sortie); }
.navigation a:hover::after, .navigation a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.entete-actions { grid-column: 3; display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.entete-tel { display: none; text-decoration: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.entete .bouton-reserver { padding: 12px 22px; font-size: 13px; }
.entete.sur-image:not(.compacte) .bouton-reserver { --texte: var(--creme); --bord: var(--creme); }
.burger { width: 44px; height: 44px; display: grid; place-items: center; gap: 0; background: none; border: 0; cursor: pointer; position: relative; margin-right: -10px; }
.burger span { position: absolute; width: 22px; height: 1px; background: currentColor; transition: transform 500ms var(--sortie); }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* menu plein écran : la nacre entière, et les pages en italique géant */
.menu-mobile { position: fixed; inset: 0; z-index: 80; background: var(--nacre); background-size: 400% 400%; animation: irisation-lente 14s ease-in-out infinite alternate; color: var(--encre); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--entete) + 20px) var(--marge) 32px; }
.menu-mobile nav { display: grid; align-content: center; gap: 4px; }
.menu-mobile nav a { text-decoration: none; font-family: var(--serif); font-style: italic; font-size: clamp(40px, 9vw, 96px); line-height: 1.05; display: flex; align-items: baseline; gap: 18px; transition: transform 600ms var(--sortie); }
.menu-mobile nav a:hover { transform: translateX(12px); }
.menu-mobile nav a small { font-family: var(--sans); font-style: normal; font-size: 12px; color: color-mix(in srgb, var(--encre), transparent 45%); font-variant-numeric: tabular-nums; }
.menu-mobile-reserver { margin-top: 18px; }
.menu-mobile-pied { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.menu-mobile-pied a { text-decoration: none; }
@keyframes irisation-lente { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---------- messages ---------- */
.messages { position: fixed; top: calc(var(--entete) + 8px); left: 50%; transform: translateX(-50%); z-index: 95; display: grid; gap: 6px; width: min(520px, calc(100vw - 32px)); }
.message { padding: 14px 18px; font-size: 14px; background: var(--encre); color: var(--creme); border-radius: 999px; text-align: center; }
.message-error { background: #7a2b2b; }

/* ---------- sections communes ---------- */
.section { padding: clamp(80px, 11vw, 160px) var(--marge); }
.section-interieur { max-width: var(--largeur); margin: 0 auto; }
.fond-nuit { background: var(--nuit); color: var(--creme); --ligne: var(--ligne-claire); --gris: color-mix(in srgb, var(--creme), transparent 45%); }
.fond-sable { background: var(--sable); }
.fond-blanc { background: var(--blanc); }
[data-fond-texte="clair"] { color: var(--creme); --ligne: var(--ligne-claire); --gris: color-mix(in srgb, var(--creme), transparent 45%); }
[data-fond-texte="sombre"] { color: var(--encre); }
.entete-section { display: grid; gap: 8px; margin-bottom: clamp(36px, 5vw, 72px); }
.entete-section-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tete-page { padding: calc(var(--entete) + clamp(48px, 8vw, 120px)) var(--marge) clamp(40px, 6vw, 80px); }
.tete-page-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 22px; }
.tete-page .texte-grand { max-width: 56ch; }

/* apparitions (une seule sorte : l'encre qui monte) — uniquement hors édition */
[data-apparition] { opacity: 0; transform: translateY(18px); transition: opacity 1200ms var(--sortie), transform 1200ms var(--sortie); transition-delay: calc(var(--i, 0) * 90ms); }
[data-apparition="echelle"] { transform: scale(0.96); }
[data-apparition].visible, body.mode-edition [data-apparition] { opacity: 1; transform: none; }

/* titres mot à mot : chaque mot remonte derrière un cache */
[data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.08em 0.06em 0.12em; margin: -0.08em -0.06em -0.12em; }
[data-mots] .mot > span { display: inline-block; transform: translateY(110%); transition: transform 1400ms var(--sortie); transition-delay: calc(var(--m) * 70ms); }
[data-mots].mots-visibles .mot > span { transform: none; }

/* ============================================================
   ACCUEIL
   ============================================================ */

/* ---------- 1. le miroir : l'image est éteinte, le cercle qui suit la main la rallume ---------- */
.miroir { position: relative; height: 100svh; min-height: 620px; max-height: 1100px; overflow: hidden; background: var(--nuit); color: var(--creme); display: grid; align-items: end; }
.miroir-image, .miroir-reflet { position: absolute; inset: 0; }
.miroir-image img, .miroir-reflet img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.miroir-image img { filter: grayscale(1) contrast(1.05) brightness(0.62); transform: scale(1.04); }
.miroir-reflet { clip-path: circle(var(--r, 0px) at var(--mx) var(--my)); transition: clip-path 120ms linear; }
.miroir-reflet::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent calc(var(--r, 0px) - 3px), color-mix(in srgb, var(--creme), transparent 30%) calc(var(--r, 0px) - 1px), transparent var(--r, 0px)); }
.miroir-voile { position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(to top, color-mix(in srgb, var(--nuit), transparent 15%), transparent); pointer-events: none; }
.miroir-interieur { position: relative; z-index: 2; padding: 0 var(--marge) clamp(28px, 4vw, 56px); display: grid; gap: 22px; }
.miroir-nom { display: block; text-align: center; color: var(--creme); }
.miroir-nom .mot > span { transition-duration: 1800ms; }
.miroir-ligne { display: grid; gap: 14px; font-size: 14px; border-top: 1px solid var(--ligne-claire); padding-top: 18px; }
.miroir-ligne p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.miroir-ligne strong { font-weight: 500; }
.miroir-ligne .bouton { justify-self: start; }
.miroir-indice { position: absolute; z-index: 2; top: calc(var(--entete) + 12px); left: 50%; transform: translateX(-50%); font-size: 12px; color: color-mix(in srgb, var(--creme), transparent 30%); display: none; letter-spacing: 0.02em; }
.miroir-indice i { display: inline-block; width: 14px; height: 10px; border: 1px solid currentColor; border-radius: 50%; vertical-align: middle; margin-right: 8px; }

/* ---------- 2. la palette : les univers, cinq lames de nacre qui s'ouvrent ---------- */
.palette { display: grid; grid-auto-rows: 84px; gap: 6px; padding: clamp(60px, 8vw, 120px) var(--marge) 0; max-width: var(--largeur); margin: 0 auto; }
.palette-tete { grid-column: 1 / -1; display: grid; gap: 10px; align-content: end; padding-bottom: 28px; }
.palette-tete .titre-section { max-width: 16ch; }
.palette-lame { position: relative; overflow: hidden; text-decoration: none; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 22px; color: var(--encre); background: linear-gradient(120deg, var(--teinte-a), var(--teinte-b)); transition: flex 900ms var(--sortie), filter 500ms; --teinte-a: var(--nacre-1); --teinte-b: var(--nacre-2); }
.palette-lame:nth-child(5n+2) { --teinte-a: var(--nacre-2); --teinte-b: var(--nacre-5); }
.palette-lame:nth-child(5n+3) { --teinte-a: var(--nacre-3); --teinte-b: var(--nacre-4); }
.palette-lame:nth-child(5n+4) { --teinte-a: var(--nacre-4); --teinte-b: var(--nacre-1); }
.palette-lame:nth-child(5n) { --teinte-a: var(--nacre-5); --teinte-b: var(--nacre-3); }
.palette-lame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at var(--px, 50%) 50%, rgba(255, 255, 255, 0.55), transparent 70%); opacity: 0; transition: opacity 500ms; pointer-events: none; }
.palette-lame:hover::after, .palette-lame:focus-visible::after { opacity: 1; }
.palette-nom { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 34px); line-height: 1; font-variation-settings: "opsz" 36; }
.palette-compte { font-size: 13px; color: color-mix(in srgb, var(--encre), transparent 30%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.palette-detail { display: none; }

/* ---------- 3. le rituel : la partition d'un soin, une aiguille qui avance avec la page ---------- */
.rituel { padding: clamp(90px, 12vw, 170px) var(--marge); }
.rituel-interieur { max-width: var(--largeur); margin: 0 auto; }
.rituel-tete { display: grid; gap: 10px; margin-bottom: 40px; }
.rituel-tete .titre-section { max-width: 18ch; }
.regle { position: relative; height: 34px; margin: 0 0 12px; }
.regle::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ligne-forte); }
.regle-ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; }
.regle-ticks i { width: 1px; height: 10px; background: var(--ligne-forte); align-self: center; }
.regle-ticks i:nth-child(5n+1) { height: 22px; }
.aiguille { position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 100%); width: 1px; background: var(--cuivre); transition: left 300ms linear; }
.aiguille::before { content: ""; position: absolute; top: -6px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--cuivre); }
.aiguille::after { content: attr(data-minute); position: absolute; top: -32px; left: 8px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cuivre); }
.aiguille.fin::after { left: auto; right: 8px; }
.moments { display: grid; gap: 22px; margin-top: 30px; }
.moment { display: grid; grid-template-columns: 54px 1fr; gap: 6px 18px; align-items: start; padding-top: 18px; border-top: 1px solid var(--ligne); opacity: 0.38; transition: opacity 600ms; }
.moment.passe { opacity: 1; }
.moment-minute { font-family: var(--serif); font-size: 24px; line-height: 1; font-variation-settings: "opsz" 36; font-variant-numeric: tabular-nums; }
.moment-minute small { display: block; font-family: var(--sans); font-size: 11px; color: var(--gris); margin-top: 4px; }
.moment-titre { font-size: 20px; font-weight: 400; }
.moment-texte { grid-column: 2; font-size: 15px; color: var(--gris); max-width: 46ch; }
.moment figure { grid-column: 2; aspect-ratio: 4 / 3; overflow: hidden; margin-top: 8px; border-radius: 50% / 12%; }
.moment figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1400ms var(--sortie); }
.moment.passe figure img { transform: none; }

/* ---------- 4. les flacons : les soins signature, cartes hautes qui s'inclinent sous la main ---------- */
.flacons { padding: 0 0 clamp(90px, 12vw, 170px); overflow: hidden; }
.flacons-tete { padding: 0 var(--marge) 34px; max-width: var(--largeur); margin: 0 auto; display: grid; gap: 10px; }
.flacons-tete .texte-doux { max-width: 48ch; }
.flacons-piste { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px var(--marge) 24px; scrollbar-width: none; perspective: 1400px; cursor: grab; }
.flacons-piste::-webkit-scrollbar { display: none; }
.flacons-piste.saisi { cursor: grabbing; scroll-snap-type: none; }
.flacon { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; aspect-ratio: 3 / 4.4; position: relative; display: grid; grid-template-rows: auto 1fr auto; padding: 22px 22px 24px; text-decoration: none; color: var(--encre); background: var(--blanc); border: 1px solid var(--ligne); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 500ms var(--sortie), box-shadow 500ms; }
.flacon:hover { box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--encre), transparent 70%); }
.flacon-index { font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; }
.flacon-visuel { align-self: center; justify-self: center; width: 72%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; position: relative; margin: 18px 0; box-shadow: inset 0 0 0 1px var(--ligne); }
.flacon-visuel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--nacre); mix-blend-mode: soft-light; opacity: 0.9; }
.flacon-visuel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6); transition: filter 600ms, transform 1200ms var(--sortie); }
.flacon:hover .flacon-visuel img { filter: saturate(1); transform: scale(1.06); }
.flacon-nom { font-family: var(--serif); font-size: 26px; line-height: 1.05; font-variation-settings: "opsz" 36; text-align: center; }
.flacon-bas { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ligne); font-size: 13px; color: var(--gris); }
.flacon-prix { font-family: var(--serif); font-size: 22px; color: var(--encre); font-variation-settings: "opsz" 36; }
.flacon-prix small { font-family: var(--sans); font-size: 11px; color: var(--gris); margin-right: 4px; }
.flacons-pied { padding: 8px var(--marge) 0; max-width: var(--largeur); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--gris); }
.flacons-jauge { flex: 1; height: 1px; background: var(--ligne); position: relative; max-width: 240px; }
.flacons-jauge i { position: absolute; top: -2px; height: 5px; width: 24%; border-radius: 3px; background: var(--cuivre); left: calc(var(--p, 0) * 76%); transition: left 200ms; }

/* ---------- 5. les camées : les praticiennes en médaillons, chacun suit un peu la main ---------- */
.camees { padding: clamp(90px, 12vw, 170px) var(--marge); background: var(--sable); }
.camees-interieur { max-width: var(--largeur); margin: 0 auto; }
.camees-tete { display: grid; gap: 10px; margin-bottom: 44px; }
.camees-liste { display: grid; gap: 40px 24px; }
.camee { display: grid; justify-items: center; text-align: center; gap: 12px; text-decoration: none; color: inherit; transform: translateY(calc(var(--d, 0) * 1px)); }
.camee-cadre { width: min(62vw, 230px); aspect-ratio: 3 / 4; position: relative; will-change: transform; }
.camee-cadre::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--ligne-forte); transition: transform 900ms var(--sortie), border-color 500ms; }
.camee-cadre::after { content: ""; position: absolute; inset: -17px; border-radius: 50%; border: 1px solid var(--ligne); }
.camee-cadre figure { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--nacre); }
.camee-cadre img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85); transition: filter 700ms, transform 1400ms var(--sortie); }
.camee:hover img { filter: grayscale(0); transform: scale(1.04); }
.camee:hover .camee-cadre::before { transform: scale(1.05); border-color: var(--cuivre); }
.camee-nom { font-family: var(--serif); font-size: 30px; line-height: 1; font-variation-settings: "opsz" 36; margin-top: 12px; }
.camee-titre { font-size: 13px; color: var(--gris); }
.camee-jours { display: flex; gap: 5px; margin-top: 4px; }
.camee-jours i { width: 10px; height: 7px; border-radius: 50%; border: 1px solid var(--ligne-forte); }
.camee-jours i.present { background: var(--cuivre); border-color: var(--cuivre); }
.camee-jours i.aujourd-hui { box-shadow: 0 0 0 2px var(--sable), 0 0 0 3px var(--cuivre); }
.camee-prochain { font-size: 13px; }
.camee-prochain strong { font-weight: 500; }

/* ---------- 6. le manifeste : le texte s'encre au fil du défilement ---------- */
.manifeste { padding: clamp(100px, 14vw, 200px) var(--marge); }
.manifeste-interieur { max-width: 1100px; margin: 0 auto; display: grid; gap: 34px; }
.manifeste-texte { font-family: var(--serif); font-size: clamp(28px, 4.6vw, 66px); line-height: 1.12; font-variation-settings: "opsz" 72; letter-spacing: -0.01em; text-wrap: pretty; }
.manifeste-texte .mot-encre { color: color-mix(in srgb, var(--encre), transparent 82%); transition: color 400ms; }
.manifeste-texte .mot-encre.encre { color: var(--encre); }
.manifeste-texte em { font-style: italic; }
.manifeste-signature { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--gris); }
.manifeste-signature::before { content: ""; width: 48px; height: 1px; background: var(--ligne-forte); }

/* ---------- 7. le carnet : trois mots laissés en cabine, posés de travers ---------- */
.carnet { padding: 0 var(--marge) clamp(90px, 12vw, 170px); }
.carnet-interieur { max-width: var(--largeur); margin: 0 auto; }
.carnet-tete { margin-bottom: 36px; display: grid; gap: 8px; }
.carnet-liste { display: grid; gap: 22px; }
.mot-cabine { position: relative; background: var(--blanc); padding: 34px 28px 28px; border: 1px solid var(--ligne); transform: rotate(calc(var(--a, 0) * 1deg)); transition: transform 800ms var(--sortie), box-shadow 800ms var(--sortie); display: grid; gap: 16px; }
.mot-cabine:nth-child(3n+1) { --a: -1.6; }
.mot-cabine:nth-child(3n+2) { --a: 1.1; }
.mot-cabine:nth-child(3n) { --a: -0.6; }
.mot-cabine:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 30px 50px -34px color-mix(in srgb, var(--encre), transparent 60%); }
.mot-cabine::before { content: ""; position: absolute; top: -8px; left: 50%; width: 22px; height: 15px; margin-left: -11px; border-radius: 50%; background: var(--nacre); box-shadow: inset 0 0 0 1px var(--ligne-forte); }
.mot-cabine blockquote { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; font-variation-settings: "opsz" 36; }
.mot-cabine cite { font-style: normal; font-size: 13px; color: var(--gris); }

/* ---------- 8. la nacre : la section finale, le reflet suit la main ---------- */
.nacre { position: relative; padding: clamp(110px, 16vw, 240px) var(--marge); background: var(--nacre); background-size: 300% 300%; background-position: calc(var(--mx) * 1) calc(var(--my) * 1); color: var(--encre); overflow: hidden; text-align: center; }
.nacre::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 60% at var(--mx) var(--my), rgba(255, 255, 255, 0.7), transparent 70%); pointer-events: none; transition: opacity 400ms; }
.nacre-interieur { position: relative; max-width: 900px; margin: 0 auto; display: grid; justify-items: center; gap: 26px; }
.nacre-titre { font-family: var(--serif); font-size: clamp(44px, 9vw, 130px); line-height: 0.95; letter-spacing: -0.02em; }
.nacre-titre em { font-style: italic; }
.nacre .texte-grand { max-width: 40ch; }
.nacre-note { font-size: 13px; color: color-mix(in srgb, var(--encre), transparent 30%); }

/* ============================================================
   PAGES
   ============================================================ */

/* ---------- prestations : le nuancier ---------- */
.sablier { display: grid; gap: 14px; padding: 26px 0 8px; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); margin-bottom: 40px; }
.sablier-question { font-family: var(--serif); font-size: 24px; line-height: 1.1; font-variation-settings: "opsz" 36; }
.sablier-question output { font-style: italic; color: var(--cuivre); font-variant-numeric: tabular-nums; }
.sablier input[type="range"] { width: 100%; accent-color: var(--cuivre); height: 24px; }
.sablier-echelle { display: flex; justify-content: space-between; font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; }
.sablier-note { font-size: 13px; color: var(--gris); }
.nuancier { display: grid; gap: 40px; }
.onglets-index { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--entete); background: var(--creme); z-index: 5; padding: 10px 0; }
.onglets-index::-webkit-scrollbar { display: none; }
.onglets-index a { flex: none; text-decoration: none; padding: 9px 16px; border-radius: 50%; border: 1px solid var(--ligne); font-size: 13px; white-space: nowrap; transition: background 400ms, color 400ms, border-color 400ms; }
.onglets-index a:hover, .onglets-index a.actif { background: var(--encre); color: var(--creme); border-color: var(--encre); }
.categorie { display: grid; gap: 18px; scroll-margin-top: calc(var(--entete) + 60px); }
.categorie-tete { display: grid; gap: 6px; padding-top: 22px; border-top: 1px solid var(--encre); }
.categorie-tete .titre-bloc { font-size: clamp(30px, 4vw, 54px); }
.liste-prestations { display: grid; }
.prestation-ligne { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom prix" "meta meta" "detail detail"; gap: 4px 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--ligne); text-decoration: none; color: inherit; position: relative; cursor: pointer; transition: opacity 500ms, padding 500ms var(--sortie); }
.prestation-ligne.hors-temps { opacity: 0.25; }
.prestation-nom { grid-area: nom; font-family: var(--serif); font-size: 22px; line-height: 1.1; font-variation-settings: "opsz" 36; display: flex; align-items: baseline; gap: 12px; }
.prestation-nom .avatars { display: none; }
.prestation-prix { grid-area: prix; font-family: var(--serif); font-size: 20px; font-variation-settings: "opsz" 36; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prestation-prix small { font-family: var(--sans); font-size: 11px; color: var(--gris); margin-right: 4px; }
.prestation-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 13px; color: var(--gris); align-items: center; }
.prestation-detail { grid-area: detail; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms var(--sortie); }
.prestation-detail > div { overflow: hidden; display: grid; gap: 12px; }
.prestation-ligne.ouverte .prestation-detail { grid-template-rows: 1fr; }
.prestation-description { font-size: 15px; color: var(--gris); max-width: 60ch; padding-top: 10px; }
.prestation-qui { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.avatars { display: inline-flex; }
.avatar { width: 30px; height: 38px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--creme); margin-left: -8px; background: var(--nacre); display: inline-grid; place-items: center; font-size: 11px; font-family: var(--serif); }
.avatar:first-child { margin-left: 0; }
.prestation-reserver { justify-self: start; margin: 6px 0 8px; }
.appel { text-align: center; display: grid; justify-items: center; gap: 22px; }
.appel .titre-section { max-width: 18ch; }

/* ---------- l'équipe : la galerie des camées, une fiche par rangée ---------- */
.galerie { display: grid; gap: 0; }
.fiche-equipe { display: grid; gap: 22px; padding: 44px 0; border-top: 1px solid var(--encre); text-decoration: none; color: inherit; justify-items: start; text-align: left; transform: none; }
.fiche-equipe:last-child { border-bottom: 1px solid var(--encre); }
.fiche-equipe .camee-cadre { width: min(50vw, 200px); }
.fiche-equipe-texte { display: grid; gap: 12px; align-content: start; }
.fiche-equipe-nom { font-family: var(--serif); font-size: clamp(38px, 6vw, 84px); line-height: 0.95; font-variation-settings: "opsz" 72; }
.fiche-equipe-nom em { font-style: italic; color: var(--gris); }
.fiche-equipe-titre { font-size: 14px; }
.fiche-equipe-bio { font-size: 16px; color: var(--gris); max-width: 52ch; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquette { font-size: 12px; padding: 5px 12px; border: 1px solid var(--ligne-forte); border-radius: 50%; white-space: nowrap; }
.fiche-equipe-bas { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; font-size: 14px; padding-top: 8px; }
.fiche-equipe-bas .camee-jours { margin: 0; }

/* ---------- une praticienne : le semainier ---------- */
.praticienne-tete { display: grid; gap: 28px; align-items: start; }
.praticienne-tete .camee-cadre { width: min(70vw, 300px); }
.praticienne-infos { display: grid; gap: 18px; }
.semainier { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.semainier-jour { display: grid; gap: 8px; justify-items: center; font-size: 12px; color: var(--gris); }
.semainier-jour.aujourd-hui { color: var(--cuivre); }
.semainier-barre { width: 100%; height: 110px; position: relative; background: var(--blanc); border-radius: 50% / 8%; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ligne); }
.semainier-barre i { position: absolute; left: 0; right: 0; background: var(--cuivre); top: calc(var(--de) * 1%); height: calc(var(--a) * 1%); }
.semainier-barre.absent { background: repeating-linear-gradient(-45deg, transparent 0 4px, var(--ligne) 4px 5px); }
.semainier-heures { display: flex; justify-content: space-between; font-size: 11px; color: var(--gris); font-variant-numeric: tabular-nums; margin-top: 4px; }
.tarifs-praticienne { display: grid; gap: 34px; }
.tarifs-categorie { display: grid; gap: 4px; align-content: start; }
.tarifs-categorie h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; padding-bottom: 12px; border-bottom: 1px solid var(--encre); margin-bottom: 8px; font-variation-settings: "opsz" 36; }
.tarifs-categorie li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.tarifs-categorie li span:last-child { font-family: var(--serif); font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; font-variation-settings: "opsz" 36; }
.autres-camees { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px 16px; }
.autres-camees .camee-cadre { width: min(40vw, 150px); }
.autres-camees .camee-nom { font-size: 22px; }

/* ---------- l'institut : la visite en salles, puis le cadran, puis la lettre ---------- */
.visite { overflow: hidden; padding-bottom: clamp(80px, 11vw, 160px); }
.visite-piste { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--marge) 20px; scrollbar-width: none; }
.visite-piste::-webkit-scrollbar { display: none; }
.salle { flex: 0 0 min(84vw, 560px); scroll-snap-align: start; display: grid; gap: 12px; }
.salle figure { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% / 6%; background: var(--sable); }
.salle figure img { width: 100%; height: 100%; object-fit: cover; }
.salle-legende { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.salle-legende span:first-child { font-family: var(--serif); font-size: 18px; font-variant-numeric: tabular-nums; }
.visite-pied { padding: 0 var(--marge); max-width: var(--largeur); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--gris); }
.video-salon { aspect-ratio: 16 / 9; width: 100%; border-radius: 50% / 4%; overflow: hidden; }
.video-salon video, .video-salon iframe { width: 100%; height: 100%; display: block; }

.cadran-section { display: grid; gap: 44px; align-items: center; }
.cadran { width: min(78vw, 360px); aspect-ratio: 1; margin: 0 auto; position: relative; }
.cadran svg { width: 100%; height: 100%; overflow: visible; }
.cadran .fond { fill: none; stroke: var(--ligne-forte); stroke-width: 1; }
.cadran .ouvert { fill: none; stroke: var(--cuivre); stroke-width: 5; stroke-linecap: butt; }
.cadran .tick { stroke: var(--ligne-forte); stroke-width: 1; }
.cadran .chiffre { font-family: var(--serif); font-size: 9px; fill: currentColor; text-anchor: middle; dominant-baseline: middle; }
.cadran .aig-h { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cadran .aig-m { stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.cadran .axe { fill: currentColor; }
.cadran-legende { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); font-size: 12px; color: var(--gris); text-align: center; white-space: nowrap; }
.cadran-legende strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--encre); font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 36; }
.horaires { display: grid; gap: 0; }
.horaires li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; font-variant-numeric: tabular-nums; }
.horaires li.aujourd-hui { color: var(--cuivre); font-weight: 500; }
.horaires li.aujourd-hui span:first-child::after { content: ""; display: inline-block; width: 7px; height: 5px; border-radius: 50%; background: var(--cuivre); margin-left: 10px; vertical-align: middle; }
.infos { display: grid; gap: 40px; }
.infos-bloc { display: grid; gap: 14px; align-content: start; }
.infos-bloc .titre-bloc { font-size: clamp(24px, 3vw, 40px); }

.lettre { max-width: 760px; margin: 0 auto; background: var(--blanc); border: 1px solid var(--ligne); padding: clamp(28px, 5vw, 64px); position: relative; }
.lettre::before { content: ""; position: absolute; top: 22px; right: 22px; width: 54px; height: 54px; border-radius: 50%; background: var(--nacre); box-shadow: inset 0 0 0 1px var(--ligne-forte), inset 0 0 0 6px var(--blanc), inset 0 0 0 7px var(--ligne); }
.contact .formulaire-titre { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; }
.formulaire { display: grid; gap: 18px; }
.formulaire-intro { color: var(--gris); max-width: 52ch; }
.champ, .formulaire-champ { display: grid; gap: 6px; }
.champ label, .formulaire-champ label { font-size: 13px; color: var(--gris); }
.champ input, .champ textarea, .champ select, .formulaire-champ input, .formulaire-champ textarea, .formulaire-champ select {
    font: inherit; font-size: 16px; color: var(--encre); background: transparent; border: 0; border-bottom: 1px solid var(--ligne-forte); padding: 10px 0; width: 100%; border-radius: 0; transition: border-color 300ms;
}
.champ textarea, .formulaire-champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ textarea:focus, .formulaire-champ input:focus, .formulaire-champ textarea:focus { outline: none; border-color: var(--cuivre); }
.champ-case, .formulaire-case { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--gris); }
.champ-case input, .formulaire-case input { accent-color: var(--cuivre); width: 16px; height: 16px; margin-top: 3px; flex: none; }
.formulaire-erreur { font-size: 13px; color: #8a3b2a; }
.formulaire-merci { font-family: var(--serif); font-size: 24px; }
.formulaire-piege { position: absolute; left: -9999px; }
.formulaire-aide { font-size: 13px; color: var(--gris); }

/* ---------- gestion d'un rendez-vous : le billet ---------- */
.billet { max-width: 720px; margin: 0 auto; display: grid; gap: 0; }
.billet-partie { background: var(--blanc); border: 1px solid var(--ligne); padding: clamp(24px, 4vw, 40px); display: grid; gap: 18px; position: relative; }
.billet-partie + .billet-partie { border-top: 0; }
.billet-partie + .billet-partie::before { content: ""; position: absolute; left: 12px; right: 12px; top: -1px; border-top: 1px dashed var(--ligne-forte); }
.billet-partie + .billet-partie::after, .billet-partie + .billet-partie > .dent { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--creme); border: 1px solid var(--ligne); }
.billet-partie + .billet-partie::after { left: -10px; }
.billet-partie + .billet-partie > .dent { right: -10px; }
.pastille { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 14px; border-radius: 50%; border: 1px solid var(--ligne-forte); justify-self: start; }
.pastille::before { content: ""; width: 8px; height: 6px; border-radius: 50%; background: var(--gris); }
.pastille-ok::before { background: #4d8b5c; }
.pastille-attente::before { background: #c78d2a; }
.pastille-non::before { background: #a13b3b; }
.recap-date { font-family: var(--serif); font-size: clamp(28px, 4vw, 40px); line-height: 1.05; font-variation-settings: "opsz" 36; }
.recap-date em { font-style: italic; }
.recap-lignes { display: grid; }
.recap-lignes li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.recap-lignes li span:last-child { font-family: var(--serif); font-size: 18px; font-variant-numeric: tabular-nums; }
.recap-lignes .recap-total { border-bottom: 0; font-weight: 500; }
.recap-lignes .recap-total span:last-child { font-size: 24px; }
.choix-creneaux { display: grid; gap: 22px; }
.jour-creneaux { display: grid; gap: 10px; }
.jour-creneaux h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; }
.heures { display: flex; flex-wrap: wrap; gap: 8px; }
.heure { padding: 10px 16px; border-radius: 50%; border: 1px solid var(--ligne-forte); background: transparent; font-size: 14px; cursor: pointer; font-variant-numeric: tabular-nums; transition: background 300ms, color 300ms, border-color 300ms; text-align: center; }
.heure:hover { border-color: var(--encre); }
.heure.choisie { background: var(--encre); color: var(--creme); border-color: var(--encre); }

/* ---------- pied de page : la carte de visite gravée ---------- */
.pied { padding: clamp(80px, 11vw, 160px) var(--marge) 32px; }
.pied-carte { max-width: 820px; margin: 0 auto; text-align: center; padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px); border: 1px solid var(--encre); position: relative; display: grid; gap: 22px; justify-items: center; }
.pied-carte::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--ligne); pointer-events: none; }
.pied-nom { font-family: var(--serif); font-size: clamp(40px, 7vw, 84px); line-height: 0.95; letter-spacing: 0.01em; }
.pied-baseline { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--gris); max-width: 36ch; }
.pied-lignes { display: grid; gap: 8px; font-size: 14px; }
.pied-lignes a { text-decoration: none; }
.pied-lignes p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0; }
.pied-horaires { display: grid; gap: 4px; font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; width: 100%; max-width: 320px; margin: 6px auto 0; }
.pied-horaires li { display: flex; justify-content: space-between; gap: 12px; }
.pied-horaires li.aujourd-hui { color: var(--encre); }
.pied-bas { max-width: var(--largeur); margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 12px; color: var(--gris); }
.pied-bas nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.pied-bas a { text-decoration: none; }
.pied-bas a:hover { color: var(--encre); }

/* ---------- réglages d'accessibilité et d'édition ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
    .miroir-reflet { clip-path: none; opacity: 0.35; }
}
body.mode-edition .miroir-reflet { clip-path: circle(28% at 50% 45%); }
body.mode-edition .manifeste-texte .mot-encre { color: inherit; }
body.mode-edition .moment { opacity: 1; }

/* ============================================================
   ÉCRANS PLUS LARGES
   ============================================================ */
@media (min-width: 700px) {
    .miroir-ligne { grid-template-columns: 1fr 1fr auto; align-items: center; }
    .palette { grid-auto-rows: auto; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto 300px; }
    .palette-lame { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: start; padding: 20px 18px; }
    .palette-compte { align-self: end; }
    .moments { grid-template-columns: repeat(2, 1fr); }
    .camees-liste { grid-template-columns: repeat(2, 1fr); }
    .carnet-liste { grid-template-columns: repeat(3, 1fr); align-items: start; }
    .mot-cabine:nth-child(2) { margin-top: 40px; }
    .infos { grid-template-columns: repeat(3, 1fr); }
    .cadran-section { grid-template-columns: auto 1fr; gap: 64px; }
    .fiche-equipe { grid-template-columns: 220px 1fr; gap: 40px; }
    .praticienne-tete { grid-template-columns: 300px 1fr; gap: 56px; }
    .tarifs-praticienne { grid-template-columns: 1fr 1fr; }
    .prestation-nom .avatars { display: inline-flex; }
    .semainier-barre { height: 150px; }
}

@media (min-width: 1000px) {
    :root { --entete: 84px; }
    .navigation { display: flex; }
    .entete-tel { display: inline; }
    .burger { display: none; }
    .menu-mobile { display: none; }
    .miroir-indice { display: block; }
    .palette { display: flex; height: 460px; padding-top: 0; }
    .palette-tete { flex: 0 0 300px; padding: 0 30px 0 0; }
    .palette-lame { flex: 1; min-width: 0; grid-template-rows: auto 1fr auto; transition: flex 900ms var(--sortie); }
    .palette-lame:hover, .palette-lame:focus-visible { flex: 2.6; }
    .palette-nom { writing-mode: vertical-rl; transform: rotate(180deg); align-self: end; justify-self: start; font-size: 30px; transition: transform 700ms var(--sortie); }
    .palette-lame:hover .palette-nom, .palette-lame:focus-visible .palette-nom { writing-mode: horizontal-tb; transform: none; }
    .palette-detail { display: block; grid-row: 2; align-self: end; font-size: 14px; color: color-mix(in srgb, var(--encre), transparent 20%); max-width: 32ch; opacity: 0; transform: translateY(8px); transition: opacity 500ms 200ms, transform 700ms var(--sortie) 200ms; }
    .palette-lame:hover .palette-detail, .palette-lame:focus-visible .palette-detail { opacity: 1; transform: none; }
    .moments { grid-template-columns: repeat(5, 1fr); gap: 20px; }
    .moment { grid-template-columns: 1fr; padding-top: 22px; }
    .moment-texte, .moment figure { grid-column: 1; }
    .camees-liste { grid-template-columns: repeat(4, 1fr); align-items: start; }
    .camee:nth-child(2) { --d: 60; }
    .camee:nth-child(3) { --d: 20; }
    .camee:nth-child(4) { --d: 90; }
    .manifeste-interieur { grid-template-columns: 1fr; }
    .nuancier { grid-template-columns: 200px 1fr; gap: 0 60px; align-items: start; }
    .onglets-index { flex-direction: column; align-items: flex-start; position: sticky; top: calc(var(--entete) + 24px); padding: 0; background: transparent; gap: 4px; }
    .onglets-index a { border: 0; padding: 6px 0; border-radius: 0; background: none !important; color: var(--gris); font-size: 15px; }
    .onglets-index a:hover, .onglets-index a.actif { color: var(--encre) !important; }
    .onglets-index a.actif::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--cuivre); vertical-align: middle; margin-right: 10px; }
    .nuancier-corps { display: grid; gap: 64px; }
    .prestation-ligne { grid-template-columns: 1fr 200px auto; grid-template-areas: "nom meta prix" "detail detail detail"; padding: 22px 0; }
    .prestation-meta { justify-content: flex-start; }
    .fiche-equipe { grid-template-columns: 260px 1fr 1fr; gap: 56px; }
    .fiche-equipe-bas { align-self: end; }
    .visite-piste { padding-left: max(var(--marge), calc((100vw - var(--largeur)) / 2 + var(--marge))); }
    .tete-page-interieur { grid-template-columns: 1fr 1fr; align-items: end; }
    .pied-lignes { grid-template-columns: repeat(3, auto); gap: 32px; }
}

@media (min-width: 1300px) {
    .miroir-ligne { grid-template-columns: 1fr 1fr 1fr auto; }
}