/* Kaolin, atelier de céramique à la Croix-Rousse. Grès, biscuit, tenmoku, cobalt, céladon, feu.
   Young Serif (titres, une seule graisse, chaleureuse) + Instrument Sans (texte).
   Les formes viennent du métier : pièces tournées (arrondis), carreaux d'essai, pied de pot,
   étagère de séchage, courbe de cuisson, kintsugi, porte du four. Chaque section a son
   mécanisme (voir site.js). Mobile d'abord, points de rupture 720 / 1000 / 1280. */

@font-face { font-family: "Young Serif"; src: url("../fonts/youngserif.2e465c2f5f89.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans.e35fad09c70b.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans-italic.ba4ed4ed7590.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
    --cuivre: #2544a8;          /* cobalt : accent, boutons, émail signature */
    --cuivre-fonce: #17307a;
    --cuivre-clair: #b9cdbb;    /* céladon */
    --creme: #d8d2c6;           /* grès : fond du site, un ton moyen, pas un blanc */
    --sable: #ece8df;           /* biscuit : panneaux clairs */
    --nuit: #241d19;            /* tenmoku : sections sombres */
    --encre: #241d19;
    --feu: #e0662f;             /* le four */
    --serif: "Young Serif", Georgia, serif;
    --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --rayon: 18px;

    --blanc: #f7f4ee;
    --terre: #b99f84;           /* terre crue */
    --terre-sombre: #8c7259;
    --or: #c9a24a;              /* kintsugi */
    --gris: color-mix(in srgb, var(--encre) 60%, var(--creme));
    --ligne: color-mix(in srgb, var(--encre) 14%, transparent);
    --ligne-forte: color-mix(in srgb, var(--encre) 32%, transparent);
    --marge: clamp(18px, 4.5vw, 72px);
    --largeur: 1320px;
    --entete: 74px;
    --sortie: cubic-bezier(0.16, 1, 0.3, 1);
    --ombre: 0 30px 50px -30px color-mix(in srgb, var(--encre) 50%, transparent);
}

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

/* ---------- typographie ---------- */
.titre-page, .titre-section, .titre-bloc { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.titre-page { font-size: clamp(40px, 6.4vw, 88px); }
.titre-section { font-size: clamp(32px, 4.4vw, 60px); }
.titre-bloc { font-size: clamp(22px, 2.4vw, 30px); }
.titre-page em, .titre-section em, .titre-bloc em { font-style: normal; color: var(--cuivre); }
.fond-nuit .titre-section em { color: var(--cuivre-clair); }
.surtitre { font-size: 14px; font-weight: 600; color: var(--cuivre-fonce); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 10px; }
.surtitre::before { content: ""; width: 26px; height: 12px; border-radius: 3px 3px 8px 8px; background: linear-gradient(var(--cuivre), var(--cuivre-fonce)); flex: none; }
.fond-nuit .surtitre { color: var(--cuivre-clair); }
.fond-nuit .surtitre::before { background: linear-gradient(var(--cuivre-clair), color-mix(in srgb, var(--cuivre-clair) 60%, black)); }
.texte-grand { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; }
.texte-doux { color: var(--gris); }
.petit { font-size: 13px; }
.tabulaire { font-variant-numeric: tabular-nums; }
.lien-souligne { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lien-souligne:hover { text-decoration-color: var(--cuivre); text-decoration-thickness: 2px; }
.sep { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.4; margin: 0 10px; vertical-align: middle; }
.prose { max-width: 66ch; display: grid; gap: 16px; }
.prose h2 { font-family: var(--serif); font-size: 24px; margin-top: 18px; }

/* titres mot à mot */
[data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
[data-mots] .mot > span { display: inline-block; transform: translateY(110%); transition: transform 900ms var(--sortie); transition-delay: calc(var(--m, 0) * 55ms); }
[data-mots].mots-visibles .mot > span { transform: none; }
[data-ed][data-mots] .mot > span { transform: none; }

/* apparitions */
[data-apparition] { opacity: 0; transition: opacity 900ms ease, transform 1100ms var(--sortie); transition-delay: calc(var(--i, 0) * 70ms); }
[data-apparition="haut"] { transform: translateY(26px); }
[data-apparition="echelle"] { transform: scale(0.94); }
[data-apparition].visible { opacity: 1; transform: none; }
body.mode-edition [data-apparition] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-apparition], [data-mots] .mot > span { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}

/* ---------- boutons : la pièce trempée dans l'émail, le bas plus arrondi que le haut ---------- */
.bouton { --fond: transparent; --texte: var(--encre); --bord: var(--encre); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px 16px; border: 1.5px solid var(--bord); border-radius: 10px 10px 22px 22px; background: var(--fond); color: var(--texte); font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform 500ms var(--sortie), border-color 300ms, background 300ms, color 300ms, box-shadow 500ms; }
.bouton::after { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 40%; border-radius: 0 0 50% 50%; background: linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0)); z-index: -1; opacity: 0; transition: opacity 300ms; }
.bouton-plein::after { opacity: 1; }
.bouton:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--encre) 60%, transparent); }
.bouton:active { transform: translateY(0) scale(0.98); }
.bouton-plein { --fond: var(--cuivre); --bord: var(--cuivre); --texte: var(--blanc); }
.bouton-clair { --fond: var(--sable); --bord: var(--sable); --texte: var(--encre); }
.bouton-petit { padding: 10px 16px 11px; font-size: 13px; border-radius: 8px 8px 14px 14px; }
.bouton[disabled] { opacity: 0.4; cursor: default; transform: none; }
.fond-nuit .bouton:not(.bouton-plein):not(.bouton-clair) { --texte: var(--creme); --bord: var(--creme); }
.actions-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquette { display: inline-block; padding: 5px 11px 6px; font-size: 12px; font-weight: 500; border-radius: 6px 6px 12px 12px; background: var(--sable); }
.fond-nuit .etiquette { background: color-mix(in srgb, var(--creme) 14%, transparent); }
.pastille { display: inline-block; padding: 5px 11px 6px; font-size: 12px; font-weight: 600; border-radius: 6px 6px 12px 12px; background: var(--sable); }
.pastille-ok { background: #c8dcc4; color: #1f4a1a; }
.pastille-attente { background: #f0d9a8; color: #6b4a08; }
.pastille-non { background: #eecdc4; color: #6b1f1a; }

/* ---------- en-tête ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--entete); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 0 var(--marge); color: var(--encre); transition: background 400ms, color 400ms, transform 600ms var(--sortie); }
.entete::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--cuivre); transform-origin: left; transform: scaleX(var(--defile, 0)); }
.entete.compacte { background: color-mix(in srgb, var(--creme), transparent 8%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.entete.cachee { transform: translateY(-100%); }
.entete.menu-ouvert { color: var(--creme); background: transparent; backdrop-filter: none; }
.marque { grid-column: 1; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 24px; letter-spacing: -0.01em; }
.marque-nom { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.marque-sceau { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--sable) 0 28%, var(--terre) 30% 44%, var(--sable) 46% 60%, var(--cuivre) 62%); box-shadow: inset 0 0 0 1px var(--ligne-forte); }
.marque-logo { height: 30px; width: auto; }
.marque-logo:not([src]), .marque-logo[src=""] { display: none; }
.navigation { display: none; grid-column: 2; justify-content: center; gap: 30px; font-size: 14px; font-weight: 500; }
.navigation a { text-decoration: none; position: relative; padding: 6px 0; }
.navigation a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; border-radius: 0 0 3px 3px; background: var(--cuivre); 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: 11px 18px 12px; font-size: 13px; --fond: var(--cuivre); --bord: var(--cuivre); --texte: var(--blanc); white-space: nowrap; }
.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: 22px; height: 2px; border-radius: 2px; 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 : l'émail cobalt coule du haut */
.menu-mobile { position: fixed; inset: 0; z-index: 80; background: var(--nuit); color: var(--creme); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--entete) + 20px) var(--marge) 32px; overflow: hidden; }
.menu-mobile::before { content: ""; position: absolute; top: -10%; left: -10%; width: 120%; height: 62%; background: var(--cuivre); border-radius: 0 0 45% 55% / 0 0 30% 40%; transform-origin: top; animation: coulee 1100ms var(--sortie); }
@keyframes coulee { from { transform: scaleY(0); } }
.menu-mobile nav { position: relative; display: grid; align-content: center; gap: 4px; }
.menu-mobile nav a { text-decoration: none; font-family: var(--serif); font-size: clamp(36px, 8vw, 84px); 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-size: 13px; opacity: 0.6; }
.menu-mobile-reserver { margin-top: 18px; color: var(--cuivre-clair); }
.menu-mobile-pied { position: relative; 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(--encre); color: var(--creme); border-radius: 10px 10px 22px 22px; text-align: center; }
.message-error { background: #7a2b2b; }

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 140px) var(--marge); }
.section-interieur { max-width: var(--largeur); margin: 0 auto; }
.fond-nuit { background: var(--nuit); color: var(--creme); --gris: color-mix(in srgb, var(--creme) 62%, var(--nuit)); --ligne: color-mix(in srgb, var(--creme) 16%, transparent); --ligne-forte: color-mix(in srgb, var(--creme) 36%, transparent); }
.fond-sable { background: var(--sable); }
.fond-blanc { background: var(--blanc); }
.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; }
.entete-section .texte-grand { max-width: 52ch; }
.tete-page { padding: calc(var(--entete) + clamp(44px, 7vw, 110px)) var(--marge) clamp(36px, 5vw, 72px); }
.tete-page-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 22px; }
.tete-page .texte-grand { max-width: 56ch; }

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

/* ---------- le tour : la pièce se tourne sous la main ---------- */
.tour { position: relative; min-height: min(100svh, 980px); padding: calc(var(--entete) + 28px) var(--marge) clamp(40px, 6vw, 72px); display: grid; align-content: center; overflow: hidden; }
.tour-interieur { max-width: var(--largeur); margin: 0 auto; width: 100%; display: grid; gap: 34px; align-items: center; }
.tour-texte { display: grid; gap: 22px; }
.tour-titre { font-family: var(--serif); font-size: clamp(40px, 6vw, 86px); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
.tour-titre em { font-style: normal; color: var(--cuivre); }
.tour-offre { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; max-width: 46ch; }
.tour-offre strong { font-weight: 600; }
.tour-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.prochaine { display: grid; gap: 2px; font-size: 14px; line-height: 1.3; }
.prochaine strong { font-weight: 600; }
.prochaine .temoin { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--feu); box-shadow: 0 0 0 0 color-mix(in srgb, var(--feu) 50%, transparent); animation: temoin 2.4s ease-out infinite; margin-right: 8px; vertical-align: middle; }
@keyframes temoin { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tour-plateau { position: relative; aspect-ratio: 5 / 6; max-height: 66vh; width: 100%; justify-self: center; background: var(--sable); border-radius: var(--rayon) var(--rayon) 44% 44% / var(--rayon) var(--rayon) 20% 20%; display: grid; place-items: end center; padding: 8% 10% 6%; cursor: crosshair; overflow: hidden; }
.tour-plateau::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 40% at 50% 100%, color-mix(in srgb, var(--terre) 40%, transparent), transparent 70%); }
.tour-plateau svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.piece { fill: url(#email); stroke: var(--cuivre-fonce); stroke-width: 1.5; filter: drop-shadow(0 18px 20px rgba(36,29,25,0.28)); }
.piece-reflet { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 6; stroke-linecap: round; }
.girelle { fill: var(--terre-sombre); }
.girelle-haut { fill: var(--terre); }
.anneaux line { stroke: rgba(255,255,255,0.35); stroke-width: 1.2; stroke-dasharray: 6 9; animation: file 1.6s linear infinite; }
@keyframes file { to { stroke-dashoffset: -30; } }
.tour-indice { position: absolute; left: 16px; top: 14px; font-size: 12px; font-weight: 500; color: var(--gris); display: none; }
.tour-cotes { position: absolute; right: 16px; top: 14px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--gris); display: none; }
.tour-cotes b { font-weight: 600; color: var(--encre); }
.tour-pas { max-width: var(--largeur); margin: clamp(28px, 4vw, 48px) auto 0; width: 100%; display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--ligne-forte); }
.pas { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.4; }
.pas b { font-family: var(--serif); font-size: 24px; line-height: 1; color: var(--cuivre); }
.pas strong { display: block; font-weight: 600; }
.pas span { color: var(--gris); }
@media (min-width: 720px) { .tour-pas { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (min-width: 1000px) {
    .tour-interieur { grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 80px); }
    .tour-plateau { max-height: none; height: min(66vh, 640px); aspect-ratio: auto; }
    .tour-indice, .tour-cotes { display: block; }
}

/* ---------- les émaux : les techniques sur des carreaux d'essai ---------- */
.emaux { padding: clamp(64px, 9vw, 130px) var(--marge); }
.emaux-interieur { max-width: var(--largeur); margin: 0 auto; }
.carreaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 2.4vw, 28px); }
.carreau { --email: var(--cuivre); --texte: var(--blanc); position: relative; text-decoration: none; color: var(--texte); min-height: 300px; border-radius: 8px 8px 14px 14px; padding: 44px 20px 20px; display: grid; align-content: end; gap: 10px; background: linear-gradient(175deg, color-mix(in srgb, var(--email) 80%, white) 0%, var(--email) 36%, color-mix(in srgb, var(--email) 84%, black) 100%); box-shadow: var(--ombre), inset 0 1px 0 rgba(255,255,255,0.35); overflow: hidden; transform: translateY(-14px); opacity: 0; transition: transform 1000ms var(--sortie), opacity 800ms, box-shadow 500ms; }
.carreau.visible, body.mode-edition .carreau { transform: none; opacity: 1; }
.carreau:nth-child(2) { --email: var(--cuivre-clair); --texte: var(--encre); transition-delay: 100ms; }
.carreau:nth-child(3) { --email: #3a2a22; transition-delay: 200ms; }
.carreau:nth-child(4) { --email: var(--feu); transition-delay: 300ms; }
.carreau:nth-child(5) { --email: var(--terre); --texte: var(--encre); transition-delay: 400ms; }
.carreau:nth-child(6) { --email: #7a8f6b; transition-delay: 500ms; }
.carreau:hover { transform: translateY(-8px); box-shadow: 0 40px 60px -30px color-mix(in srgb, var(--encre) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.35); }
.carreau::before { content: ""; position: absolute; top: 14px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--creme); transform: translateX(-50%); box-shadow: inset 0 2px 3px rgba(0,0,0,0.35); }
.carreau::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: radial-gradient(60% 100% at 30% 100%, rgba(255,255,255,0.18), transparent 70%), radial-gradient(40% 80% at 80% 100%, rgba(0,0,0,0.18), transparent 70%); pointer-events: none; }
.carreau > * { position: relative; z-index: 1; }
@media (min-width: 720px) { .carreau { aspect-ratio: 3 / 4; min-height: 0; } }
.carreau-num { position: absolute; top: 12px; right: 16px; font-family: var(--serif); font-size: 13px; opacity: 0.7; z-index: 1; }
.carreau-nom { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.02; }
.carreau-texte { font-size: 14px; line-height: 1.45; opacity: 0.92; }
.carreau-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--texte) 30%, transparent); font-size: 13px; }
.carreau-bas strong { font-family: var(--serif); font-size: 20px; }

/* ---------- la cuisson : la courbe du four monte avec la page ---------- */
.cuisson { position: relative; background: var(--nuit); color: var(--creme); padding: clamp(64px, 9vw, 130px) var(--marge); overflow: hidden; --p: 0; }
.cuisson::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 78% 45%, color-mix(in srgb, var(--feu) 55%, transparent), transparent 70%); opacity: var(--p); transition: opacity 300ms; pointer-events: none; }
.cuisson-interieur { position: relative; max-width: var(--largeur); margin: 0 auto; display: grid; gap: clamp(24px, 3vw, 40px); }
.cuisson-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.cuisson-tete .texte-grand { max-width: 48ch; color: color-mix(in srgb, var(--creme) 78%, var(--nuit)); }
.thermometre { font-family: var(--serif); font-size: clamp(48px, 7vw, 110px); line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--feu); display: flex; align-items: baseline; gap: 6px; }
.thermometre small { font-family: var(--sans); font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--creme) 70%, var(--nuit)); }
.courbe { position: relative; }
.courbe svg { width: 100%; height: auto; display: block; overflow: visible; }
.courbe .grille { stroke: color-mix(in srgb, var(--creme) 14%, transparent); stroke-width: 1; }
.courbe .trace-fond { fill: none; stroke: color-mix(in srgb, var(--creme) 18%, transparent); stroke-width: 2; }
.courbe .trace { fill: none; stroke: var(--feu); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--l, 2000); stroke-dashoffset: calc(var(--l, 2000) * (1 - var(--p))); }
.courbe .point { fill: var(--nuit); stroke: color-mix(in srgb, var(--creme) 40%, transparent); stroke-width: 2; transition: fill 400ms, stroke 400ms, r 400ms; }
.courbe .point.passe { fill: var(--feu); stroke: var(--creme); }
.courbe .degre { fill: color-mix(in srgb, var(--creme) 55%, var(--nuit)); font-size: 13px; font-family: var(--sans); }
.etapes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
.etape { display: grid; gap: 4px; padding-top: 12px; border-top: 2px solid color-mix(in srgb, var(--creme) 18%, transparent); transition: border-color 500ms, color 500ms; color: color-mix(in srgb, var(--creme) 50%, var(--nuit)); }
.etape.passe { border-color: var(--feu); color: var(--creme); }
.etape-temp { font-family: var(--serif); font-size: 20px; }
.etape strong { font-weight: 600; font-size: 15px; }
.etape p { font-size: 13px; line-height: 1.4; }
@media (min-width: 720px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .etapes { grid-template-columns: repeat(6, 1fr); } }

/* ---------- les marques : le pied de chaque pièce porte le cachet de son céramiste ---------- */
.marques { padding: clamp(64px, 9vw, 130px) var(--marge); }
.marques-interieur { max-width: var(--largeur); margin: 0 auto; }
.marques-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(22px, 3vw, 44px); }
.marque-carte { text-decoration: none; color: inherit; display: grid; gap: 16px; justify-items: center; text-align: center; }
.cachet { --email: var(--cuivre); position: relative; width: min(100%, 230px); aspect-ratio: 1; perspective: 900px; }
.cachet-int { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 900ms var(--sortie); }
.marque-carte:hover .cachet-int, .marque-carte:focus-visible .cachet-int, .cachet.retourne .cachet-int { transform: rotateY(180deg); }
.cachet-face, .cachet-dos { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cachet-face { background: radial-gradient(circle, var(--sable) 0 40%, var(--terre) 41% 52%, var(--sable) 53% 66%, var(--email) 67% 100%); box-shadow: var(--ombre), inset 0 0 0 1px var(--ligne); display: grid; place-items: center; }
.cachet-face span { font-family: var(--serif); font-size: 44px; color: var(--terre-sombre); letter-spacing: -0.04em; text-shadow: 1px 1px 0 rgba(255,255,255,0.7), -1px -1px 0 rgba(0,0,0,0.18); }
.cachet-dos { transform: rotateY(180deg); overflow: hidden; background: var(--terre); box-shadow: var(--ombre); }
.cachet-dos img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.marque-legende { display: grid; gap: 8px; justify-items: center; }
.marque-nom { font-family: var(--serif); font-size: 24px; line-height: 1; }
.marque-titre { font-size: 13px; color: var(--gris); }
.marque-bas { display: grid; gap: 8px; justify-items: center; font-size: 13px; padding-top: 10px; border-top: 1px solid var(--ligne); width: 100%; }
.jours { display: inline-flex; gap: 4px; }
.jours i { width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 600; border-radius: 50%; background: var(--sable); color: var(--gris); }
.jours i.present { background: var(--encre); color: var(--creme); }
.jours i.aujourd-hui { outline: 2px solid var(--cuivre); outline-offset: 1px; }
.prochain strong { font-weight: 600; }
.marque-carte .lien-souligne { font-size: 13px; }

/* ---------- l'étagère : les ateliers signature sèchent sur deux planches ---------- */
.etagere { background: var(--sable); padding: clamp(64px, 9vw, 130px) 0; overflow: hidden; }
.etagere-tete { max-width: var(--largeur); margin: 0 auto clamp(20px, 3vw, 36px); padding: 0 var(--marge); }
.planches { display: grid; gap: 34px; }
.planche { position: relative; padding: 0 var(--marge) 26px; }
.planche::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(#b8926a, #8c6a48 60%, #6e5238); box-shadow: 0 12px 20px -8px rgba(36,29,25,0.5); }
.planche-int { display: flex; gap: clamp(18px, 3vw, 40px); align-items: flex-end; width: max-content; transform: translateX(var(--d, 0px)); will-change: transform; padding: 0 4px; }
.piece-etagere { width: 200px; text-decoration: none; color: inherit; display: grid; gap: 10px; justify-items: center; text-align: center; }
.piece-etagere figure { width: 168px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; position: relative; box-shadow: 0 16px 20px -12px rgba(36,29,25,0.55), inset 0 -6px 12px rgba(0,0,0,0.25); transition: transform 700ms var(--sortie); }
.piece-etagere figure::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 10px rgba(255,255,255,0.28), inset 0 0 0 11px rgba(0,0,0,0.12); }
.piece-etagere img { width: 100%; height: 100%; object-fit: cover; }
.piece-etagere:hover figure { transform: translateY(-8px) rotate(-3deg); }
.piece-nom { font-family: var(--serif); font-size: 18px; line-height: 1.1; }
.piece-meta { font-size: 13px; color: var(--gris); }
.piece-meta strong { color: var(--encre); font-family: var(--serif); font-size: 16px; }
.etagere-pied { max-width: var(--largeur); margin: 20px auto 0; padding: 0 var(--marge); font-size: 13px; color: var(--gris); }

/* ---------- le kintsugi : les tessons d'un bol, recollés à l'or ---------- */
.kintsugi { padding: clamp(64px, 9vw, 130px) var(--marge); }
.kintsugi-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.bol { position: relative; }
.bol svg { width: 100%; height: auto; overflow: visible; }
.tesson { fill: var(--sable); stroke: none; cursor: pointer; transition: fill 500ms, transform 700ms var(--sortie); transform-box: fill-box; transform-origin: center; }
.tesson:hover { fill: var(--cuivre-clair); }
.tesson.actif { fill: var(--cuivre); }
.joint { fill: none; stroke: var(--or); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.bol.visible .joint, body.mode-edition .joint { animation: or 1600ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.bol.visible .joint:nth-of-type(2) { animation-delay: 500ms; }
@keyframes or { to { stroke-dashoffset: 0; } }
.kintsugi-textes { display: grid; gap: 20px; }
.avis { display: none; gap: 16px; }
.avis.actif { display: grid; }
.avis-texte { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; max-width: 24ch; }
.avis-qui { font-size: 14px; color: var(--gris); }
.avis-qui strong { color: var(--encre); font-weight: 600; }
.kintsugi-nav { display: flex; gap: 8px; }
.kintsugi-nav button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ligne-forte); background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--gris); }
.kintsugi-nav button[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: var(--encre); }
body.mode-edition .avis { display: grid; padding: 12px 0; border-top: 1px dashed var(--ligne-forte); }
@media (min-width: 1000px) { .kintsugi-interieur { grid-template-columns: 1fr 1fr; } }

/* ---------- le four : la porte s'ouvre en descendant ---------- */
.four { position: relative; background: var(--nuit); color: var(--creme); padding: clamp(72px, 10vw, 150px) var(--marge); overflow: hidden; --o: 0; }
.four-interieur { max-width: 980px; margin: 0 auto; display: grid; gap: 28px; justify-items: center; text-align: center; }
.four-porte { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 60vh; border-radius: var(--rayon); overflow: hidden; background: #0c0806; box-shadow: inset 0 0 0 6px #3a2f28, var(--ombre); }
.four-feu { position: absolute; inset: 6px; border-radius: calc(var(--rayon) - 4px); background: radial-gradient(70% 80% at 50% 70%, #ffd29a 0%, var(--feu) 30%, #7a1f0a 65%, #1a0906 100%); opacity: calc(0.35 + var(--o) * 0.65); display: grid; place-items: center; }
.four-feu::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 40% at 50% 60%, rgba(255,255,255,0.35), transparent 70%); animation: braise 3s ease-in-out infinite alternate; }
@keyframes braise { to { opacity: 0.5; transform: scale(1.06); } }
.four-contenu { position: relative; display: grid; gap: 14px; justify-items: center; padding: 20px; opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 20px)); }
.four-contenu .prochaine { color: #fff3e0; text-align: center; }
.four-contenu .prochaine strong { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 30px); font-weight: 400; }
.battant { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, #3d322b, #2a211c 60%, #1e1713); box-shadow: inset 0 0 0 2px #4a3d34; transition: transform 100ms linear; }
.battant.gauche { left: 0; transform: translateX(calc(var(--o) * -100%)); border-right: 3px solid #14100d; }
.battant.droite { right: 0; transform: translateX(calc(var(--o) * 100%)); border-left: 3px solid #14100d; }
.battant::after { content: ""; position: absolute; top: 50%; width: 14px; height: 60px; border-radius: 7px; background: #6b5a4c; transform: translateY(-50%); box-shadow: inset 0 2px 4px rgba(255,255,255,0.2); }
.battant.gauche::after { right: 18px; } .battant.droite::after { left: 18px; }
.four-note { font-size: 13px; color: color-mix(in srgb, var(--creme) 60%, var(--nuit)); }

/* ======================================================================
   LES ATELIERS
   ====================================================================== */
.pourqui { display: flex; flex-wrap: wrap; gap: 8px; }
.pourqui a { text-decoration: none; padding: 10px 16px 11px; border: 1.5px solid var(--ligne-forte); border-radius: 8px 8px 16px 16px; font-size: 14px; font-weight: 500; transition: background 300ms, color 300ms, border-color 300ms; }
.pourqui a.actif, .pourqui a:hover { background: var(--encre); border-color: var(--encre); color: var(--creme); }
.familles { display: grid; gap: clamp(48px, 7vw, 96px); }
.famille { display: grid; gap: 24px; scroll-margin-top: calc(var(--entete) + 24px); }
.famille-tete { display: grid; gap: 8px; max-width: 60ch; }
.ateliers { display: grid; border-top: 1px solid var(--ligne-forte); }
.atelier { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--ligne); cursor: pointer; position: relative; }
.cone { --pente: 8; width: 64px; height: 64px; display: grid; place-items: end center; }
.cone svg { width: 40px; height: 56px; overflow: visible; transform-origin: 50% 100%; transform: rotate(calc(var(--pente) * 1deg)); transition: transform 900ms var(--sortie); }
.atelier:hover .cone svg { transform: rotate(calc(var(--pente) * 1deg + 6deg)); }
.cone path { fill: var(--terre); stroke: var(--terre-sombre); stroke-width: 1.5; }
.cone .cone-pointe { fill: var(--feu); stroke: none; }
.atelier-nom { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.05; }
.atelier-meta { grid-column: 2; font-size: 13px; color: var(--gris); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.atelier-meta b { font-weight: 600; color: var(--encre); }
.atelier-prix { grid-column: 3; grid-row: 1 / span 2; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); text-align: right; white-space: nowrap; }
.atelier-prix small { display: block; font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--gris); }
.atelier-detail { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--sortie); }
.atelier-detail > div { overflow: hidden; display: grid; gap: 12px; }
.atelier.ouverte .atelier-detail { grid-template-rows: 1fr; }
.atelier.ouverte .atelier-detail > div { padding-top: 10px; }
.atelier-description { max-width: 62ch; font-size: 15px; }
.atelier-qui { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.avatars { display: inline-flex; margin-left: 4px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--creme); margin-left: -8px; background: var(--terre); display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; }
.atelier-options { font-size: 13px; color: var(--gris); display: grid; gap: 4px; }
.atelier-reserver { justify-self: start; }
body.mode-edition .atelier-detail { grid-template-rows: 1fr; }
.grille-tarifs-note { font-size: 14px; color: var(--gris); max-width: 60ch; }
.appel { display: grid; gap: 22px; justify-items: start; }
.appel .titre-section { max-width: 18ch; }

/* ======================================================================
   LES CÉRAMISTES, LA FICHE
   ====================================================================== */
.galerie-marques { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(26px, 4vw, 56px); }
.galerie-marques .cachet { width: min(100%, 260px); }
.galerie-marques .marque-bio { font-size: 14px; line-height: 1.45; max-width: 34ch; }
.ceramiste-tete { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.ceramiste-tete .cachet { width: min(100%, 340px); justify-self: center; }
.ceramiste-infos { display: grid; gap: 20px; }
.sechoir { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; padding: 0 8px 22px; position: relative; }
.sechoir::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(#b8926a, #8c6a48 60%, #6e5238); box-shadow: 0 10px 18px -8px rgba(36,29,25,0.5); border-radius: 2px; }
.bol-jour { display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 12px; }
.bol-jour .bol-forme { --email: var(--cuivre); width: 100%; max-width: 74px; aspect-ratio: 1 / 0.7; border-radius: 8px 8px 40px 40px / 8px 8px 46px 46px; background: var(--terre); position: relative; overflow: hidden; box-shadow: inset 0 -6px 10px rgba(0,0,0,0.18), 0 10px 14px -8px rgba(36,29,25,0.6); }
.bol-jour .bol-forme i { position: absolute; left: 0; right: 0; top: var(--de); height: var(--a); background: var(--email); }
.bol-jour .bol-forme::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 2px 0 rgba(255,255,255,0.35); }
.bol-jour.absent .bol-forme { opacity: 0.5; }
.bol-jour b { font-family: var(--serif); font-weight: 400; font-size: 14px; }
.bol-jour.aujourd-hui b { color: var(--cuivre); }
.tarifs-ceramiste { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tarifs-categorie h3 { font-family: var(--serif); font-size: 20px; margin-bottom: 12px; }
.tarifs-categorie li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.tarifs-categorie li .prix { font-family: var(--serif); white-space: nowrap; }
.autres-marques { display: flex; flex-wrap: wrap; gap: 28px; }
.autres-marques .marque-carte { width: 150px; }
.autres-marques .marque-nom { font-size: 18px; }
@media (min-width: 1000px) { .ceramiste-tete { grid-template-columns: 340px 1fr; } }

/* ======================================================================
   L'ATELIER
   ====================================================================== */
.plan-section { background: var(--sable); padding: clamp(64px, 9vw, 130px) var(--marge); }
.plan-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 56px); }
.plan { position: relative; background: var(--creme); border-radius: var(--rayon); padding: 3%; }
.plan svg { width: 100%; height: auto; display: block; overflow: visible; }
.plan .mur { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linejoin: round; }
.plan .sol { fill: var(--sable); }
.plan .verriere { stroke: var(--cuivre); stroke-width: 6; stroke-dasharray: 18 8; }
.poste { cursor: pointer; }
.poste .forme { fill: var(--terre); stroke: var(--terre-sombre); stroke-width: 1.5; transition: fill 300ms, transform 500ms var(--sortie); transform-box: fill-box; transform-origin: center; }
.poste.four-plan .forme { fill: #4a3a30; stroke: #241d19; }
.poste.table-plan .forme { fill: var(--cuivre-clair); stroke: #7f9982; }
.poste.etagere-plan .forme { fill: var(--blanc); stroke: var(--terre-sombre); }
.poste:hover .forme, .poste.actif .forme { fill: var(--cuivre); stroke: var(--cuivre-fonce); transform: scale(1.06); }
.poste text { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--encre); pointer-events: none; }
.poste.four-plan text { fill: var(--blanc); }
.plan-legende { display: grid; gap: 10px; align-content: center; }
.plan-legende button { text-align: left; padding: 12px 14px; border: 1.5px solid var(--ligne); border-radius: 8px 8px 16px 16px; background: transparent; cursor: pointer; transition: border-color 300ms, background 300ms; display: grid; gap: 2px; }
.plan-legende button strong { font-weight: 600; font-size: 15px; }
.plan-legende button span { font-size: 13px; color: var(--gris); }
.plan-legende button.actif, .plan-legende button:hover { border-color: var(--cuivre); background: color-mix(in srgb, var(--cuivre) 8%, transparent); }
.plan-titre { font-family: var(--serif); font-size: 22px; margin-bottom: 8px; }
@media (min-width: 1000px) { .plan-interieur { grid-template-columns: 1.5fr 0.7fr; align-items: center; } }

.visite { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.visite figure { position: relative; overflow: hidden; background: var(--sable); border-radius: 10px 10px 22px 22px; }
.visite figure > figure { aspect-ratio: 4 / 3; border-radius: 0; }
.visite img { width: 100%; height: 100%; object-fit: cover; }
.visite figcaption { padding: 10px 14px 12px; font-size: 13px; display: flex; gap: 10px; align-items: baseline; }
.visite figcaption span:first-child { font-family: var(--serif); color: var(--cuivre-fonce); }
.visite figure:first-child { grid-column: 1 / -1; }
.visite figure:first-child > figure { aspect-ratio: 16 / 8; }
@media (min-width: 720px) { .visite { grid-template-columns: repeat(4, 1fr); } .visite figure:first-child { grid-column: span 2; grid-row: span 2; } .visite figure:first-child > figure { aspect-ratio: auto; height: calc(100% - 44px); } }
.video-salon { margin-top: 24px; }
.horaires { display: grid; max-width: 420px; }
.horaires li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.horaires li.aujourd-hui { font-weight: 600; }
.horaires li.aujourd-hui span:first-child::after { content: "aujourd'hui"; font-weight: 500; font-size: 11px; color: var(--cuivre-fonce); margin-left: 8px; }
.ouvert-maintenant { display: grid; grid-template-columns: 10px 1fr; gap: 2px 10px; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.ouvert-maintenant i { width: 10px; height: 10px; border-radius: 50%; background: #3fae4a; }
.ouvert-maintenant.ferme i { background: var(--feu); }
.ouvert-maintenant .texte-doux { grid-column: 2; font-weight: 400; font-size: 13px; }
.infos { display: grid; gap: clamp(28px, 4vw, 56px); }
.infos-bloc { display: grid; gap: 14px; align-content: start; }
.infos-bloc .texte-doux { max-width: 46ch; }
@media (min-width: 720px) { .infos { grid-template-columns: repeat(3, 1fr); } }
.contact { max-width: 720px; }

/* formulaire de contact de l'éditeur */
.formulaire-bloc { display: grid; gap: 18px; padding: clamp(24px, 4vw, 48px); background: var(--sable); border-radius: var(--rayon) var(--rayon) 40px 40px; }
.formulaire-titre { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); line-height: 1; }
.formulaire-intro { color: var(--gris); max-width: 56ch; }
.formulaire { display: grid; gap: 18px; }
.formulaire-champ { display: grid; gap: 6px; }
.formulaire-champ label, .champ label { font-size: 13px; font-weight: 600; }
.formulaire input:not([type=checkbox]), .formulaire select, .formulaire textarea, .champ input, .champ textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--ligne-forte); border-radius: 8px 8px 14px 14px; background: var(--blanc); transition: border-color 300ms; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus, .champ input:focus, .champ textarea:focus { outline: none; border-color: var(--cuivre); }
.formulaire textarea, .champ textarea { min-height: 120px; resize: vertical; }
.formulaire-case, .champ-case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.formulaire-case input, .champ-case input { margin-top: 4px; accent-color: var(--cuivre); }
.formulaire-piege, .champ-piege { position: absolute; left: -9999px; }
.formulaire-aide { font-size: 12px; color: var(--gris); }
.formulaire-erreur, .erreur-formulaire { font-size: 13px; color: #a3311d; }
.formulaire-merci { padding: 18px; background: var(--cuivre-clair); border-radius: 10px 10px 22px 22px; }
.formulaire-actions { display: flex; }

/* ======================================================================
   GESTION D'UN ATELIER, DÉPLACEMENT : la fiche de cuisson
   ====================================================================== */
.billet { max-width: 720px; margin: 0 auto; display: grid; background: var(--sable); border-radius: var(--rayon) var(--rayon) 40px 40px; box-shadow: var(--ombre); }
.billet-partie { padding: clamp(24px, 4vw, 40px); display: grid; gap: 16px; position: relative; }
.billet-partie + .billet-partie { border-top: 2px dashed var(--ligne-forte); }
.dent { display: none; }
.recap-date { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); line-height: 1; }
.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: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 15px; }
.recap-lignes .recap-total { font-weight: 700; border-bottom: 0; }
.choix-creneaux { display: grid; gap: 22px; }
.jour-creneaux h3 { font-family: var(--serif); font-size: 18px; margin-bottom: 10px; }
.heures { display: flex; flex-wrap: wrap; gap: 8px; }
.heure { padding: 9px 14px 10px; border: 1.5px solid var(--ligne-forte); border-radius: 8px 8px 14px 14px; background: transparent; cursor: pointer; font-size: 14px; font-variant-numeric: tabular-nums; transition: background 250ms, color 250ms, border-color 250ms; }
.heure:hover { border-color: var(--cuivre); }
.heure.choisie { background: var(--cuivre); border-color: var(--cuivre); color: var(--blanc); font-weight: 600; }

/* ======================================================================
   PIED : la marque au fond de la pièce
   ====================================================================== */
.pied { background: var(--nuit); color: var(--creme); padding: clamp(56px, 8vw, 110px) var(--marge) 28px; }
.pied-carte { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 28px; padding-bottom: 40px; border-bottom: 1px solid color-mix(in srgb, var(--creme) 16%, transparent); }
.pied-nom { font-family: var(--serif); font-size: clamp(44px, 8vw, 120px); line-height: 0.95; letter-spacing: -0.02em; color: var(--cuivre-clair); }
.pied-baseline { max-width: 40ch; color: color-mix(in srgb, var(--creme) 70%, var(--nuit)); }
.pied-lignes { display: grid; gap: 8px; font-size: 14px; }
.pied-lignes a { text-decoration: none; }
.pied-lignes a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied-horaires { display: grid; gap: 4px; font-size: 13px; max-width: 320px; }
.pied-horaires li { display: flex; justify-content: space-between; gap: 12px; color: color-mix(in srgb, var(--creme) 70%, var(--nuit)); }
.pied-horaires li.aujourd-hui { color: var(--cuivre-clair); font-weight: 600; }
.pied-bas { max-width: var(--largeur); margin: 22px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 12px; color: color-mix(in srgb, var(--creme) 55%, var(--nuit)); }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied-bas a { text-decoration: none; }
.pied-bas a:hover { color: var(--creme); }
@media (min-width: 720px) { .pied-carte { grid-template-columns: 1fr 1fr; } .pied-nom { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .pied-carte { grid-template-columns: 2fr 1fr 1fr auto; align-items: start; } .pied-nom { grid-column: 1 / -1; } }

/* ---------- points de rupture communs ---------- */
@media (min-width: 1000px) { .navigation { display: flex; } .burger { display: none; } .entete-tel { display: inline; } }
@media (max-width: 719px) {
    .entete { gap: 12px; }
    .entete .bouton-reserver { padding: 10px 12px 11px; font-size: 12px; }
    .atelier { grid-template-columns: 48px 1fr; }
    .cone { width: 48px; height: 52px; }
    .atelier-prix { grid-column: 2; grid-row: auto; text-align: left; }
    .atelier-meta { grid-column: 2; }
    .atelier-detail { grid-column: 1 / -1; }
}