/* ============================================================
   Cru « Barbier » — feuille de style du site public
   Direction : le club. Bordeaux cuir en fond, ivoire pour le texte, ébène pour
   les murs sombres, « peau » pour les accents. Bricolage Grotesque (titres,
   axes largeur/graisse : condensé pour l'enseigne, large pour les étiquettes),
   Literata pour le texte. Le coin coupé au rasoir (biseau à 45°) est la forme
   de la maison ; la hachure à 45° remplace le filet. 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: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.ecbeb05e3a92.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-normal.0654051d6f2d.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-italic.26dffc89e686.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
    --creme: #4b171f;            /* bordeaux cuir : fond du site */
    --sable: #3a1017;            /* bordeaux profond : fond secondaire */
    --nuit: #120c0c;             /* ébène : murs sombres */
    --encre: #f1e6d6;            /* ivoire : texte */
    --cuivre: #f2d3ae;           /* peau : accent */
    --cuivre-fonce: #b8783e;     /* cuir */
    --cuivre-clair: #f8e7d2;
    --biseau: 14px;
    --blanc: #ffffff;
    --gris: color-mix(in srgb, var(--encre), transparent 42%);
    --gris-clair: color-mix(in srgb, var(--encre), transparent 65%);
    --ligne: color-mix(in srgb, var(--encre), transparent 82%);
    --ligne-forte: color-mix(in srgb, var(--encre), transparent 55%);
    --ligne-claire: var(--ligne);
    --sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --serif: "Literata", Georgia, serif;
    --marge: clamp(18px, 4.5vw, 80px);
    --largeur: 1480px;
    --rayon: 0px;
    --sortie: cubic-bezier(0.16, 1, 0.3, 1);
    --entete: 72px;
    /* le coin coupé : haut gauche et bas droit, comme un trait de rasoir */
    --coupe: polygon(var(--biseau) 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%, 0 var(--biseau));
    --hachure: repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 7px);
}

*, *::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(--serif); font-weight: 400; 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(--cuivre); color: var(--nuit); }
:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; }
.evitement { position: absolute; left: -9999px; top: 8px; background: var(--cuivre); color: var(--nuit); padding: 8px 14px; z-index: 1000; }
.evitement:focus { left: 8px; }

/* ---------- typographie ---------- */
.surtitre { font-family: var(--sans); font-weight: 500; font-stretch: 100%; font-size: 13px; letter-spacing: 0.04em; color: var(--cuivre); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.surtitre::before { content: ""; width: 26px; height: 8px; background: var(--hachure); color: var(--cuivre); }
.titre-geant, .titre-page, .titre-section, .titre-bloc { font-family: var(--sans); font-weight: 700; font-stretch: 78%; line-height: 0.92; letter-spacing: -0.015em; text-wrap: balance; text-transform: uppercase; }
.titre-geant { font-size: clamp(76px, 20vw, 300px); line-height: 0.82; font-weight: 800; font-stretch: 75%; letter-spacing: -0.02em; }
.titre-page { font-size: clamp(52px, 10vw, 150px); }
.titre-section { font-size: clamp(38px, 6vw, 92px); }
.titre-bloc { font-size: clamp(24px, 3vw, 44px); line-height: 1; }
.titre-page em, .titre-section em, .titre-bloc em { font-style: normal; color: var(--cuivre); }
.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; }
.italique { font-style: italic; }
.prose { display: grid; gap: 16px; font-size: 17px; line-height: 1.65; max-width: 62ch; font-weight: 300; }
.prose h2 { font-family: var(--sans); font-weight: 700; font-stretch: 85%; font-size: 26px; margin-top: 18px; text-transform: uppercase; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose .a-completer { background: color-mix(in srgb, var(--cuivre), transparent 60%); padding: 0 4px; }
.lien-souligne { text-decoration: none; border-bottom: 1px solid var(--cuivre); padding-bottom: 1px; transition: border-color 300ms, color 300ms; }
.lien-souligne:hover { color: var(--cuivre); }
.tabulaire { font-variant-numeric: tabular-nums; }
.hachure { height: 8px; color: var(--encre); background: var(--hachure); opacity: 0.35; }
.chiffre-sans { font-family: var(--sans); font-weight: 600; font-stretch: 90%; font-variant-numeric: tabular-nums; }
.etiquette { font-family: var(--sans); font-weight: 500; font-size: 12px; padding: 5px 10px; border: 1px solid var(--ligne-forte); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); white-space: nowrap; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- boutons : le coin coupé ---------- */
.bouton {
    --fond: var(--creme); --texte: var(--encre); --bord: var(--encre);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 26px; border: 0; background: var(--bord); color: var(--texte); text-decoration: none; cursor: pointer;
    font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; text-transform: uppercase;
    clip-path: var(--coupe); position: relative; isolation: isolate; transition: color 300ms, transform 500ms var(--sortie);
}
.bouton::before { content: ""; position: absolute; inset: 1px; background: var(--fond); clip-path: var(--coupe); z-index: -1; transition: inset 300ms var(--sortie); }
.bouton:hover::before { inset: 100% 0 0 0; }
.bouton:hover { color: var(--creme); }
.bouton-plein { --fond: var(--cuivre); --texte: var(--nuit); --bord: var(--cuivre); }
.bouton-plein:hover { color: var(--nuit); }
.bouton-plein::before { display: none; }
.bouton-plein:hover { background: var(--encre); }
.bouton-clair { --texte: var(--encre); --bord: var(--encre); }
.fond-nuit .bouton, .ticket .bouton, .carte-rdv .bouton, .recap-carte .bouton, .miroirs .bouton, .sabots .bouton, .fauteuil .bouton, .menu-mobile .bouton { --fond: var(--nuit); }
.fond-sable .bouton, .mur .bouton { --fond: var(--sable); }
.bouton-clair:hover { color: var(--nuit); }
.bouton-petit { padding: 10px 16px; font-size: 12px; }
.bouton[disabled] { opacity: 0.4; cursor: default; }

/* ---------- l'en-tête : la barre du club ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--entete); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--marge); color: var(--encre); transition: background 400ms, transform 500ms var(--sortie); }
.entete.compacte { background: color-mix(in srgb, var(--creme), transparent 8%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--ligne); }
.entete.cachee { transform: translateY(-100%); }
.marque { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-weight: 800; font-stretch: 78%; font-size: 26px; text-transform: uppercase; letter-spacing: -0.01em; }
.marque-logo { height: 28px; width: auto; }
.marque-logo:not([src]), .marque-logo[src=""] { display: none; }
.marque-lampe { width: 10px; height: 10px; border-radius: 50%; background: var(--gris-clair); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gris-clair), transparent 70%); }
.marque-lampe.ouvert { background: #7ee0a3; box-shadow: 0 0 0 3px rgba(126, 224, 163, 0.25), 0 0 14px rgba(126, 224, 163, 0.6); }
.navigation { display: none; gap: 24px; font-family: var(--sans); font-weight: 500; font-size: 14px; }
.navigation a { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 300ms; }
.navigation a:hover, .navigation a[aria-current="page"] { border-bottom-color: var(--cuivre); }
.entete-actions { display: flex; align-items: center; gap: 14px; }
.entete-tel { display: none; text-decoration: none; font-family: var(--sans); font-size: 14px; font-variant-numeric: tabular-nums; }
.entete .bouton-reserver { padding: 11px 18px; font-size: 12px; }
.burger { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; position: relative; margin-right: -10px; }
.burger span { position: absolute; width: 24px; height: 2px; background: currentColor; transition: transform 500ms var(--sortie); }
.burger span:first-child { transform: translateY(-5px); }
.burger span:last-child { transform: translateY(5px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* menu plein écran : le mur d'ébène, les pages en enseigne */
.menu-mobile { position: fixed; inset: 0; z-index: 80; background: var(--nuit); 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: 2px; }
.menu-mobile nav a { text-decoration: none; font-family: var(--sans); font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: clamp(44px, 11vw, 120px); line-height: 0.95; display: flex; align-items: baseline; gap: 16px; transition: color 300ms; }
.menu-mobile nav a:hover { color: var(--cuivre); }
.menu-mobile nav a small { font-family: var(--serif); font-weight: 400; font-size: 13px; text-transform: none; color: var(--gris); font-variant-numeric: tabular-nums; }
.menu-mobile-reserver { margin-top: 14px; color: var(--cuivre); }
.menu-mobile-pied { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.menu-mobile-pied a { text-decoration: none; }

/* ---------- 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(--cuivre); color: var(--nuit); clip-path: var(--coupe); text-align: center; }
.message-error { background: #d9a1a1; }

/* ---------- sections communes ---------- */
.section { padding: clamp(72px, 10vw, 150px) var(--marge); }
.section-interieur { max-width: var(--largeur); margin: 0 auto; }
.fond-nuit { background: var(--nuit); }
.fond-sable { background: var(--sable); }
.fond-blanc { background: var(--blanc); color: var(--nuit); }
[data-fond-texte="clair"] { color: var(--encre); }
[data-fond-texte="sombre"] { color: var(--nuit); --gris: color-mix(in srgb, var(--nuit), transparent 40%); --ligne: color-mix(in srgb, var(--nuit), transparent 84%); }
.entete-section { display: grid; gap: 8px; margin-bottom: clamp(32px, 5vw, 64px); }
.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(40px, 7vw, 100px)) var(--marge) clamp(36px, 5vw, 64px); }
.tete-page-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 22px; }
.tete-page .texte-grand { max-width: 56ch; }
.cadre { clip-path: var(--coupe); overflow: hidden; background: var(--sable); }
.cadre img { width: 100%; height: 100%; object-fit: cover; }

/* apparitions : une seule sorte, le coup de rasoir (révélé de gauche à droite) */
[data-apparition] { clip-path: inset(0 100% 0 0); transition: clip-path 1100ms var(--sortie); transition-delay: calc(var(--i, 0) * 100ms); }
[data-apparition].visible, body.mode-edition [data-apparition] { clip-path: inset(0 0 0 0); }

/* titres mot à mot : chaque mot arrive coupé par le bas */
[data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.06em 0.04em 0.1em; margin: -0.06em -0.04em -0.1em; }
[data-mots] .mot > span { display: inline-block; transform: translateY(105%); transition: transform 1100ms var(--sortie); transition-delay: calc(var(--m) * 60ms); }
[data-mots].mots-visibles .mot > span { transform: none; }

/* le cadre à ampoules : une bordure de points qui se mettent à courir au survol */
.ampoules { position: relative; padding: 16px; background: radial-gradient(circle, var(--cuivre) 2.2px, transparent 3px) 8px 8px / 20px 20px; transition: background-position 0s; }
.ampoules > * { position: relative; background: var(--nuit); }
.ampoules:hover, .ampoules.allume { animation: chasse 700ms steps(2) infinite; }
@keyframes chasse { to { background-position: 28px 8px; } }

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

/* ---------- 1. l'enseigne : le nom coupé en deux se réaligne, et le shop en direct ---------- */
.enseigne { min-height: min(100svh, 1100px); padding: calc(var(--entete) + 24px) var(--marge) 32px; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; position: relative; overflow: hidden; }
.enseigne-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--gris); }
.enseigne-nom { position: relative; align-self: center; text-align: center; }
.enseigne-nom .nom-reel { display: block; opacity: 0; }
.enseigne-nom .moitie { position: absolute; inset: 0; display: block; pointer-events: none; transition: transform 1600ms var(--sortie); }
.enseigne-nom .moitie-haut { clip-path: inset(0 0 50% 0); transform: translateX(-4%); }
.enseigne-nom .moitie-bas { clip-path: inset(50% 0 0 0); transform: translateX(4%); }
.enseigne-nom.aligne .moitie { transform: none; }
.enseigne-nom::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--cuivre); transform: scaleX(0); transform-origin: left; transition: transform 1400ms var(--sortie) 300ms; }
.enseigne-nom.aligne::after { transform: scaleX(1); }
.enseigne-nom.aligne.fini::after { opacity: 0; transition: opacity 600ms; }
body.mode-edition .enseigne-nom .nom-reel { opacity: 1; }
body.mode-edition .enseigne-nom .moitie, body.mode-edition .enseigne-nom::after { display: none; }
.enseigne-bas { display: grid; gap: 18px; border-top: 1px solid var(--ligne); padding-top: 18px; }
.direct { display: grid; gap: 6px; font-size: 15px; }
.direct-titre { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; color: var(--cuivre); display: flex; align-items: center; gap: 8px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-clair); }
.pulse.ouvert { background: #7ee0a3; box-shadow: 0 0 0 0 rgba(126, 224, 163, 0.6); animation: battement 2s ease-out infinite; }
@keyframes battement { to { box-shadow: 0 0 0 10px rgba(126, 224, 163, 0); } }
.direct-lignes { display: grid; gap: 2px; }
.direct-lignes li { display: flex; gap: 10px; align-items: baseline; }
.direct-lignes strong { font-family: var(--sans); font-weight: 600; min-width: 64px; }
.enseigne-photo { display: none; }

/* ---------- 2. les sabots : choisissez la longueur, le dégradé suit ---------- */
.sabots { padding: clamp(72px, 10vw, 150px) var(--marge); background: var(--nuit); }
.sabots-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 34px; }
.sabots-tete { display: grid; gap: 10px; }
.sabots-tete .titre-section { max-width: 16ch; }
.sabots-rangee { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.sabot { flex: 1; min-width: 0; height: calc(44px + var(--mm) * 6px); border: 0; padding: 0 0 12px; cursor: pointer; background: linear-gradient(var(--sable), var(--sable)) top / 100% calc(100% - 8px) no-repeat, repeating-linear-gradient(90deg, var(--sable) 0 3px, transparent 3px 7px) bottom / 100% 8px no-repeat; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); display: grid; align-content: end; justify-items: center; font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--encre); transition: background 300ms, color 300ms, transform 400ms var(--sortie); }
.sabot:hover { transform: translateY(-4px); }
.sabot[aria-pressed="true"] { background: linear-gradient(var(--cuivre), var(--cuivre)) top / 100% calc(100% - 8px) no-repeat, repeating-linear-gradient(90deg, var(--cuivre) 0 3px, transparent 3px 7px) bottom / 100% 8px no-repeat; color: var(--nuit); }
.sabots-lecture { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; align-items: end; }
.sabots-mm { font-family: var(--sans); font-weight: 800; font-stretch: 75%; font-size: clamp(64px, 12vw, 150px); line-height: 0.85; color: var(--cuivre); font-variant-numeric: tabular-nums; }
.sabots-mm small { font-size: 0.32em; font-weight: 600; font-stretch: 100%; margin-left: 6px; color: var(--encre); }
.sabots-nom { font-family: var(--sans); font-weight: 600; font-size: clamp(18px, 2.4vw, 30px); line-height: 1.1; }
.sabots-texte { grid-column: 1 / -1; font-size: 15px; color: var(--gris); max-width: 56ch; }
.degrade { grid-column: 1 / -1; display: flex; height: 22px; gap: 2px; }
.degrade i { flex: 1; background: var(--sable); transition: background 400ms; }
.degrade i.plein { background: var(--cuivre); }
.degrade i.plein:nth-child(odd) { background: color-mix(in srgb, var(--cuivre), var(--encre) 30%); }
.sabots-note { font-size: 13px; color: var(--gris); }

/* ---------- 3. le mur des affiches : les prestations phares, prix qui claquent comme un panneau à volets ---------- */
.mur { padding: clamp(72px, 10vw, 150px) var(--marge); background: var(--sable); }
.mur-interieur { max-width: var(--largeur); margin: 0 auto; }
.mur-tete { display: grid; gap: 10px; margin-bottom: 36px; }
.affiches { display: grid; gap: 10px; }
.affiche { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px 18px 16px; min-height: 240px; text-decoration: none; color: var(--encre); background: var(--nuit); clip-path: var(--coupe); position: relative; overflow: hidden; transition: color 300ms; }
.affiche::before { content: ""; position: absolute; inset: 0; background: var(--cuivre); transform: translateY(101%); transition: transform 600ms var(--sortie); }
.affiche:hover::before { transform: none; }
.affiche:hover { color: var(--nuit); }
.affiche > * { position: relative; }
.affiche-tete { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--gris); transition: color 300ms; }
.affiche:hover .affiche-tete { color: color-mix(in srgb, var(--nuit), transparent 35%); }
.affiche-nom { font-family: var(--sans); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(36px, 4.4vw, 64px); line-height: 0.88; letter-spacing: -0.01em; align-self: end; }
.affiche-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid var(--ligne); font-family: var(--sans); font-size: 13px; }
.affiche:hover .affiche-bas { border-top-color: color-mix(in srgb, var(--nuit), transparent 75%); }
.affiche-prix { font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; perspective: 300px; }
.affiche-prix small { font-size: 12px; font-weight: 500; margin-right: 4px; }
.affiche-prix .volet { display: inline-block; transform: rotateX(-90deg); opacity: 0; transition: transform 500ms var(--sortie), opacity 300ms; transition-delay: calc(var(--i) * 90ms); transform-origin: 50% 100%; }
.affiche.visible .affiche-prix .volet, body.mode-edition .affiche-prix .volet { transform: none; opacity: 1; }
.mur-pied { margin-top: 24px; display: flex; justify-content: flex-end; }

/* ---------- 4. le mur des miroirs : les barbiers dans leur cadre à ampoules, en direct ---------- */
.miroirs { padding: clamp(72px, 10vw, 150px) var(--marge); background: var(--nuit); }
.miroirs-interieur { max-width: var(--largeur); margin: 0 auto; }
.miroirs-tete { display: grid; gap: 10px; margin-bottom: 40px; }
.miroirs-liste { display: grid; gap: 28px; }
.miroir { text-decoration: none; color: var(--encre); display: grid; gap: 14px; }
.miroir figure { aspect-ratio: 3 / 4; overflow: hidden; }
.miroir figure img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05); transition: transform 1200ms var(--sortie); }
.miroir:hover figure img { transform: scale(1.04); }
.miroir-fauteuil { font-family: var(--sans); font-weight: 600; font-size: 12px; color: var(--cuivre); letter-spacing: 0.04em; }
.miroir-nom { font-family: var(--sans); font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 46px); line-height: 0.95; }
.miroir-titre { font-size: 14px; color: var(--gris); }
.miroir-etat { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; padding-top: 10px; border-top: 1px solid var(--ligne); }
.miroir-etat .pulse { flex: none; }
.miroir-etat .pulse.occupe { background: var(--cuivre); }
.miroir-etat strong { font-weight: 600; }

/* ---------- 5. le fade : le manifeste sur un dégradé en paliers ---------- */
.fade { position: relative; padding: clamp(90px, 12vw, 170px) var(--marge); color: var(--encre); background: linear-gradient(to bottom, var(--nuit) 0 20%, color-mix(in srgb, var(--nuit), var(--creme) 40%) 20% 40%, var(--creme) 40% 60%, color-mix(in srgb, var(--creme), var(--cuivre) 30%) 60% 80%, color-mix(in srgb, var(--creme), var(--cuivre) 60%) 80% 100%); }
.fade-interieur { max-width: 1100px; margin: 0 auto; display: grid; gap: 40px; }
.fade-texte { font-family: var(--sans); font-weight: 700; font-stretch: 82%; text-transform: uppercase; font-size: clamp(30px, 5.2vw, 78px); line-height: 0.95; letter-spacing: -0.01em; text-wrap: pretty; }
.fade-texte em { font-style: normal; color: var(--cuivre); }
.chiffres { display: grid; gap: 18px; }
.chiffre { display: grid; gap: 4px; padding: 16px 0 0; border-top: 1px solid var(--ligne-forte); }
.chiffre strong { font-family: var(--sans); font-weight: 800; font-stretch: 78%; font-size: clamp(40px, 6vw, 84px); line-height: 0.9; font-variant-numeric: tabular-nums; }
.chiffre span { font-size: 14px; color: var(--gris); }
.fade [data-fond-texte] .chiffre { border-top-color: currentColor; }

/* ---------- 6. avant / après : le trait du rasoir, à glisser ---------- */
.rasoir-section { padding: clamp(72px, 10vw, 150px) var(--marge); }
.rasoir-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 30px; }
.rasoir-tete { display: grid; gap: 10px; }
.rasoir { position: relative; aspect-ratio: 4 / 5; overflow: hidden; clip-path: var(--coupe); background: var(--nuit); --x: 50%; touch-action: pan-y; }
.rasoir figure { position: absolute; inset: 0; margin: 0; }
.rasoir figure img { width: 100%; height: 100%; object-fit: cover; }
.rasoir-avant img { filter: grayscale(1) contrast(1.05); }
.rasoir-apres { clip-path: inset(0 0 0 var(--x)); }
.rasoir-lame { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--encre); pointer-events: none; }
.rasoir-lame::before { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); background: var(--cuivre); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.rasoir-lame::after { content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--nuit); font-size: 11px; font-family: var(--sans); font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; }
.rasoir input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.rasoir-legende { position: absolute; bottom: 14px; font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 6px 10px; background: color-mix(in srgb, var(--nuit), transparent 30%); pointer-events: none; }
.rasoir-legende.avant { left: 14px; }
.rasoir-legende.apres { right: 14px; }

/* ---------- 7. la platine : ce qui tourne au shop ---------- */
.platine { padding: 0 var(--marge) clamp(72px, 10vw, 150px); }
.platine-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 30px; align-items: center; }
.disque { width: min(70vw, 340px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; position: relative; background: repeating-radial-gradient(circle at 50%, #0a0707 0 1px, #1a1212 1px 3px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--ligne); cursor: pointer; }
.disque::before { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--cuivre); }
.disque::after { content: ""; position: absolute; inset: 49%; border-radius: 50%; background: var(--nuit); }
.disque-etiquette { position: absolute; inset: 34%; border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: var(--sans); font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: 12px; color: var(--nuit); padding: 18%; line-height: 1.05; }
.disque:hover, .disque.tourne { animation: tourner 3.6s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }
.platine-textes { display: grid; gap: 10px; }
.pistes { display: grid; margin-top: 10px; }
.piste { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--ligne); font-size: 15px; }
.piste:last-child { border-bottom: 1px solid var(--ligne); }
.piste small { font-family: var(--sans); color: var(--gris); font-variant-numeric: tabular-nums; }
.piste em { font-style: italic; color: var(--gris); }

/* ---------- 8. le fauteuil : la section finale, avec le compte des places du jour ---------- */
.fauteuil { padding: clamp(90px, 12vw, 180px) var(--marge); background: var(--nuit); text-align: center; }
.fauteuil-interieur { max-width: 980px; margin: 0 auto; display: grid; justify-items: center; gap: 24px; }
.fauteuil-compte { font-family: var(--sans); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(52px, 11vw, 170px); line-height: 0.85; }
.fauteuil-compte em { font-style: normal; color: var(--cuivre); }
.fauteuil .texte-grand { max-width: 40ch; }
.fauteuil-note { font-size: 13px; color: var(--gris); }

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

/* ---------- la carte : la grille des prix, une colonne par barbier ---------- */
.familles { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 26px; }
.familles::-webkit-scrollbar { display: none; }
.familles a { flex: none; text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 10px 16px; background: var(--sable); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background 300ms, color 300ms; }
.familles a:hover, .familles a.actif { background: var(--cuivre); color: var(--nuit); }
.grille-prix-defilement { overflow-x: auto; scrollbar-width: thin; }
.grille-prix { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.grille-prix th, .grille-prix td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.grille-prix thead th { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--gris); border-bottom: 1px solid var(--ligne-forte); position: sticky; top: var(--entete); background: var(--creme); z-index: 2; }
.grille-prix thead th.barbier-colonne { text-align: center; }
.grille-prix thead th.barbier-colonne a { text-decoration: none; display: grid; justify-items: center; gap: 6px; color: var(--encre); }
.grille-prix thead th.barbier-colonne img { width: 44px; height: 54px; object-fit: cover; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.grille-prix thead th.barbier-colonne small { font-family: var(--serif); font-weight: 400; font-size: 11px; color: var(--gris); }
.grille-prix .famille-ligne th { padding-top: 40px; font-family: var(--sans); font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--encre); border-bottom: 0; position: static; background: transparent; }
.grille-prix .famille-ligne small { display: block; font-family: var(--serif); font-weight: 400; font-size: 13px; text-transform: none; color: var(--gris); margin-top: 6px; letter-spacing: 0; font-stretch: 100%; }
.grille-prix td.nom { font-weight: 500; }
.grille-prix td.nom small { display: block; font-size: 12px; color: var(--gris); font-weight: 400; }
.grille-prix td.duree { font-family: var(--sans); font-size: 13px; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grille-prix td.prix { text-align: center; }
.grille-prix td.prix a { display: inline-block; text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; padding: 8px 12px; min-width: 64px; background: var(--sable); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: background 300ms, color 300ms; }
.grille-prix td.prix a:hover { background: var(--cuivre); color: var(--nuit); }
.grille-prix td.prix a small { font-size: 11px; font-weight: 500; margin-right: 3px; }
.grille-prix td.prix span { color: var(--gris-clair); }
.grille-prix .categorie-ancre { scroll-margin-top: calc(var(--entete) + 80px); }
.appel { text-align: center; display: grid; justify-items: center; gap: 22px; }
.appel .titre-section { max-width: 18ch; }

/* ---------- les barbiers : des cartes qui se retournent ---------- */
.cartes-barbiers { display: grid; gap: 22px; }
.carte-barbier { perspective: 1600px; min-height: 480px; cursor: pointer; }
.carte-barbier-int { position: relative; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; transition: transform 900ms var(--sortie); }
.carte-barbier.retournee .carte-barbier-int { transform: rotateY(180deg); }
.carte-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; }
.carte-face.recto { grid-template-rows: 1fr auto; background: var(--nuit); clip-path: var(--coupe); }
.carte-face.recto figure { overflow: hidden; }
.carte-face.recto figure img { width: 100%; height: 100%; object-fit: cover; }
.carte-face.recto .carte-bas { padding: 16px 18px; display: grid; gap: 4px; border-top: 1px solid var(--ligne); }
.carte-face.verso { transform: rotateY(180deg); background: var(--cuivre); color: var(--nuit); clip-path: var(--coupe); padding: 22px; gap: 14px; align-content: start; --gris: color-mix(in srgb, var(--nuit), transparent 35%); --ligne: color-mix(in srgb, var(--nuit), transparent 80%); --ligne-forte: color-mix(in srgb, var(--nuit), transparent 60%); }
.carte-face.verso .bouton { --fond: var(--nuit); --texte: var(--cuivre); --bord: var(--nuit); justify-self: start; }
.carte-face.verso .bouton:hover { color: var(--cuivre); }
.carte-face.verso .bouton::before { display: none; }
.carte-face.verso .bouton:hover { background: var(--creme); }
.carte-indice { font-family: var(--sans); font-size: 12px; color: var(--gris); }
.semaine-cellules { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.semaine-cellules span { display: grid; gap: 3px; justify-items: center; font-family: var(--sans); font-size: 11px; padding: 8px 2px; background: color-mix(in srgb, currentColor, transparent 92%); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); color: var(--gris); }
.semaine-cellules span.present { color: inherit; background: color-mix(in srgb, currentColor, transparent 85%); }
.semaine-cellules span.aujourd-hui { outline: 1px solid currentColor; outline-offset: -1px; }
.semaine-cellules b { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- un barbier : son fauteuil ---------- */
.barbier-tete { display: grid; gap: 28px; align-items: start; }
.barbier-numero { font-family: var(--sans); font-weight: 800; font-stretch: 75%; font-size: clamp(90px, 22vw, 320px); line-height: 0.8; color: var(--cuivre); letter-spacing: -0.03em; }
.barbier-numero small { display: block; font-size: 13px; font-weight: 600; font-stretch: 100%; letter-spacing: 0.04em; color: var(--encre); margin-bottom: 8px; }
.barbier-infos { display: grid; gap: 18px; }
.barbier-photo { aspect-ratio: 3 / 4; }
.semaine-grande { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.semaine-grande div { display: grid; gap: 8px; padding: 14px 6px; background: var(--sable); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); text-align: center; font-family: var(--sans); font-size: 12px; min-height: 120px; align-content: start; }
.semaine-grande div.absent { background: transparent; box-shadow: inset 0 0 0 1px var(--ligne); color: var(--gris-clair); }
.semaine-grande div.aujourd-hui { box-shadow: inset 0 0 0 1px var(--cuivre); }
.semaine-grande b { font-size: 18px; font-weight: 700; }
.semaine-grande span { font-variant-numeric: tabular-nums; line-height: 1.3; }
.semaine-grande small { color: var(--gris); }
.tarifs-barbier { display: grid; gap: 30px; }
.tarifs-categorie { display: grid; gap: 0; align-content: start; }
.tarifs-categorie h3 { font-family: var(--sans); font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: 28px; line-height: 1; padding-bottom: 12px; border-bottom: 1px solid var(--ligne-forte); margin-bottom: 4px; }
.tarifs-categorie li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.tarifs-categorie li span:last-child { font-family: var(--sans); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.autres-barbiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }
.autres-barbiers .miroir figure { aspect-ratio: 3 / 4; }

/* ---------- le shop : le plan, la pellicule, la carte de rendez-vous ---------- */
.plan-section { display: grid; gap: 36px; align-items: center; }
.plan { width: 100%; max-width: 640px; }
.plan svg { width: 100%; height: auto; display: block; }
.plan .mur { fill: none; stroke: var(--ligne-forte); stroke-width: 1.2; }
.plan .sol { fill: var(--sable); }
.plan .meuble { fill: none; stroke: var(--gris-clair); stroke-width: 1; stroke-dasharray: 3 3; }
.plan .fauteuil-plan { cursor: pointer; }
.plan .fauteuil-plan rect { fill: var(--nuit); stroke: var(--ligne-forte); stroke-width: 1; transition: fill 300ms, stroke 300ms; }
.plan .fauteuil-plan text { font-family: var(--sans); font-weight: 800; font-size: 14px; fill: var(--encre); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.plan .fauteuil-plan:hover rect, .plan .fauteuil-plan.actif rect { fill: var(--cuivre); }
.plan .fauteuil-plan:hover text, .plan .fauteuil-plan.actif text { fill: var(--nuit); }
.plan .legende-plan { font-family: var(--sans); font-size: 9px; fill: var(--gris); }
.plan-legende { display: grid; gap: 0; }
.plan-legende a { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--ligne); text-decoration: none; transition: color 300ms; }
.plan-legende a:last-child { border-bottom: 1px solid var(--ligne); }
.plan-legende a:hover, .plan-legende a.actif { color: var(--cuivre); }
.plan-legende b { font-family: var(--sans); font-weight: 800; font-size: 24px; }
.plan-legende small { font-size: 13px; color: var(--gris); }
.pellicule { overflow: hidden; padding-bottom: clamp(72px, 10vw, 150px); }
.pellicule-piste { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px var(--marge) 14px; scrollbar-width: none; background: var(--nuit); border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-image: repeating-linear-gradient(90deg, var(--nuit) 0 12px, var(--sable) 12px 20px) 10; }
.pellicule-piste::-webkit-scrollbar { display: none; }
.vue { flex: 0 0 min(84vw, 520px); scroll-snap-align: start; display: grid; gap: 8px; }
.vue figure { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sable); }
.vue figure img { width: 100%; height: 100%; object-fit: cover; }
.vue-legende { display: flex; justify-content: space-between; gap: 12px; font-family: var(--sans); font-size: 12px; color: var(--gris); }
.vue-legende span:first-child { font-variant-numeric: tabular-nums; }
.pellicule-pied { padding: 12px var(--marge) 0; max-width: var(--largeur); margin: 0 auto; font-size: 13px; color: var(--gris); }
.video-salon { aspect-ratio: 16 / 9; width: 100%; clip-path: var(--coupe); overflow: hidden; }
.video-salon video, .video-salon iframe { width: 100%; height: 100%; display: block; }
.horaires { display: grid; }
.horaires li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.horaires li.aujourd-hui { color: var(--cuivre); font-weight: 600; }
.infos { display: grid; gap: 40px; }
.infos-bloc { display: grid; gap: 14px; align-content: start; }
.infos-bloc .titre-bloc { font-size: clamp(24px, 3vw, 40px); }

.carte-rdv { max-width: 760px; margin: 0 auto; background: var(--nuit); clip-path: var(--coupe); padding: clamp(28px, 5vw, 64px); position: relative; }
.carte-rdv::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; color: var(--cuivre); background: var(--hachure); }
.contact .formulaire-titre { font-family: var(--sans); font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: clamp(30px, 4vw, 48px); line-height: 0.95; }
.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-family: var(--sans); 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: color-mix(in srgb, var(--encre), transparent 94%); border: 0; border-bottom: 1px solid var(--ligne-forte); padding: 12px; width: 100%; border-radius: 0; transition: border-color 300ms, background 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); background: color-mix(in srgb, var(--encre), transparent 90%); }
.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: #e9a7a7; }
.formulaire-merci { font-family: var(--sans); font-weight: 700; font-size: 24px; }
.formulaire-piege { position: absolute; left: -9999px; }
.formulaire-aide { font-size: 13px; color: var(--gris); }

/* ---------- gestion d'un rendez-vous : le ticket ---------- */
.ticket { max-width: 640px; margin: 0 auto; background: var(--nuit); position: relative; padding: 8px 0 14px; }
.ticket::before, .ticket::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; color: var(--cuivre); background: var(--hachure); }
.ticket::before { top: 0; }
.ticket::after { bottom: 0; opacity: 0.4; }
.ticket-partie { padding: clamp(22px, 4vw, 36px); display: grid; gap: 16px; }
.ticket-partie + .ticket-partie { border-top: 1px dashed var(--ligne-forte); }
.pastille { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 6px 12px; background: var(--sable); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); justify-self: start; }
.pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gris); }
.pastille-ok::before { background: #7ee0a3; }
.pastille-attente::before { background: #e9c46a; }
.pastille-non::before { background: #e07a7a; }
.recap-date { font-family: var(--sans); font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: clamp(30px, 5vw, 48px); line-height: 0.95; }
.recap-date em { font-style: normal; color: var(--cuivre); }
.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(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }
.recap-lignes .recap-total { border-bottom: 0; }
.recap-lignes .recap-total span:last-child { font-size: 22px; font-weight: 800; }
.choix-creneaux { display: grid; gap: 22px; }
.jour-creneaux { display: grid; gap: 10px; }
.jour-creneaux h3 { font-family: var(--sans); font-weight: 700; font-size: 18px; }
.heures { display: flex; flex-wrap: wrap; gap: 6px; }
.heure { padding: 10px 14px; border: 0; background: var(--sable); font-family: var(--sans); font-weight: 600; font-size: 14px; cursor: pointer; font-variant-numeric: tabular-nums; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: background 300ms, color 300ms; text-align: center; color: var(--encre); }
.heure:hover { background: color-mix(in srgb, var(--cuivre), transparent 60%); }
.heure.choisie { background: var(--cuivre); color: var(--nuit); }

/* ---------- pied de page : l'enseigne du shop ---------- */
.pied { padding: clamp(72px, 10vw, 150px) var(--marge) 32px; }
.pied-enseigne { max-width: 960px; margin: 0 auto; }
.pied-enseigne > div { padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 48px); display: grid; gap: 20px; justify-items: center; text-align: center; }
.pied-nom { font-family: var(--sans); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(56px, 12vw, 150px); line-height: 0.85; letter-spacing: -0.02em; }
.pied-lampe { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; }
.pied-baseline { font-style: italic; font-size: 18px; color: var(--gris); max-width: 40ch; }
.pied-lignes { display: grid; gap: 6px; font-size: 14px; font-family: var(--sans); }
.pied-lignes a { text-decoration: none; }
.pied-horaires { display: grid; gap: 3px; font-family: var(--sans); font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; width: 100%; max-width: 340px; margin: 4px auto 0; }
.pied-horaires li { display: flex; justify-content: space-between; gap: 12px; }
.pied-horaires li.aujourd-hui { color: var(--cuivre); }
.pied-bas { max-width: var(--largeur); margin: 36px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-family: var(--sans); 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; }
    .pulse.ouvert { animation: none; }
}
body.mode-edition .ampoules { animation: none; }
body.mode-edition .carte-barbier .carte-barbier-int { transform: none; }

/* ============================================================
   ÉCRANS PLUS LARGES
   ============================================================ */
@media (min-width: 700px) {
    .enseigne-bas { grid-template-columns: 1fr auto; align-items: end; }
    .affiches { grid-template-columns: repeat(2, 1fr); }
    .miroirs-liste { grid-template-columns: repeat(2, 1fr); }
    .chiffres { grid-template-columns: repeat(3, 1fr); }
    .rasoir { aspect-ratio: 16 / 10; }
    .platine-interieur { grid-template-columns: auto 1fr; gap: 56px; }
    .cartes-barbiers { grid-template-columns: repeat(2, 1fr); }
    .barbier-tete { grid-template-columns: auto 1fr; gap: 48px; }
    .tarifs-barbier { grid-template-columns: 1fr 1fr; }
    .infos { grid-template-columns: repeat(3, 1fr); }
    .plan-section { grid-template-columns: 1fr 1fr; gap: 56px; }
    .pied-lignes { grid-template-columns: repeat(2, auto); gap: 10px 32px; }
}

@media (min-width: 1000px) {
    :root { --entete: 80px; }
    .navigation { display: flex; }
    .entete-tel { display: inline; }
    .burger { display: none; }
    .menu-mobile { display: none; }
    .enseigne { grid-template-columns: 1fr minmax(260px, 30%); grid-template-areas: "tete tete" "nom photo" "bas bas"; column-gap: 40px; }
    .enseigne-tete { grid-area: tete; }
    .enseigne-nom { grid-area: nom; text-align: left; }
    .enseigne-photo { grid-area: photo; display: block; align-self: center; aspect-ratio: 3 / 4; max-height: 52vh; clip-path: var(--coupe); }
    .enseigne-photo img { width: 100%; height: 100%; object-fit: cover; }
    .enseigne-bas { grid-area: bas; }
    .sabots-rangee { height: 200px; gap: 10px; }
    .sabot { height: calc(60px + var(--mm) * 9px); font-size: 15px; }
    .affiches { grid-template-columns: repeat(4, 1fr); }
    .affiche { min-height: 300px; }
    .miroirs-liste { grid-template-columns: repeat(4, 1fr); }
    .fade-interieur { grid-template-columns: 1fr; }
    .cartes-barbiers { grid-template-columns: repeat(4, 1fr); }
    .carte-barbier { min-height: 520px; }
    .barbier-tete { grid-template-columns: auto 320px 1fr; gap: 56px; }
    .tete-page-interieur { grid-template-columns: 1fr 1fr; align-items: end; }
    .pellicule-piste { padding-left: max(var(--marge), calc((100vw - var(--largeur)) / 2 + var(--marge))); }
    .pied-lignes { grid-template-columns: repeat(3, auto); }
}

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