/* ============================================================
   Cru « Tatouage » — feuille de style du site public
   Direction : la planche de flash. Papier en fond avec une grille pointée,
   encre pour le texte, violet du calque thermique pour l'accent, une bande
   de peaux pour séparer. IM Fell English (un caractère de presse ancienne,
   irrégulier) pour les titres, Familjen Grotesk pour le texte. Les cadres
   portent des repères d'imprimeur (croix aux coins), les photos sont en noir
   et blanc et passent en bichromie violette au survol, les tampons tournent.
   Chaque section a son propre mécanisme. Mobile d'abord. Les noms de jetons
   (cuivre, creme, sable, nuit, encre…) sont ceux des autres crus.
   ============================================================ */

@font-face { font-family: "IM Fell English"; src: url("../fonts/im-fell-english.72415626cdb5.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("../fonts/im-fell-english-italic.c480ab933bdb.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk.c5d0fcda30d9.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-italic.97baa97fffa7.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
    --creme: #f2efe6;            /* papier : fond du site */
    --sable: #e6e3da;            /* calque : fond secondaire */
    --nuit: #111111;             /* encre : fond sombre */
    --encre: #161616;            /* texte */
    --cuivre: #5b3d8f;           /* le violet du calque thermique */
    --cuivre-fonce: #3e2866;
    --cuivre-clair: #cfc2e6;
    --grille: 24px;
    --blanc: #fbfaf6;
    --gris: color-mix(in srgb, var(--encre), transparent 45%);
    --gris-clair: color-mix(in srgb, var(--encre), transparent 68%);
    --ligne: color-mix(in srgb, var(--encre), transparent 82%);
    --ligne-forte: var(--encre);
    --ligne-claire: color-mix(in srgb, var(--creme), transparent 78%);
    --serif: "IM Fell English", "Times New Roman", serif;
    --sans: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
    --marge: clamp(18px, 4.5vw, 80px);
    --largeur: 1440px;
    --rayon: 0px;
    --sortie: cubic-bezier(0.16, 1, 0.3, 1);
    --entete: 72px;
    /* les six peaux : la bande qui sépare les sections */
    --peau-1: #f4dcc6; --peau-2: #e8c19f; --peau-3: #c9956b; --peau-4: #a6693f; --peau-5: #6f4327; --peau-6: #3d2417;
    --peaux: linear-gradient(90deg, var(--peau-1) 0 16.66%, var(--peau-2) 0 33.33%, var(--peau-3) 0 50%, var(--peau-4) 0 66.66%, var(--peau-5) 0 83.33%, var(--peau-6) 0 100%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.55; color: var(--encre); background-color: var(--creme); background-image: radial-gradient(color-mix(in srgb, var(--encre), transparent 82%) 1px, transparent 1.2px); background-size: var(--grille) var(--grille); -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(--creme); }
: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; }

/* ---------- typographie ---------- */
.surtitre { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--cuivre); margin-bottom: 12px; }
.titre-geant, .titre-page, .titre-section, .titre-bloc { font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.titre-geant { font-size: clamp(48px, 9vw, 140px); line-height: 0.95; }
.titre-page { font-size: clamp(40px, 7vw, 108px); }
.titre-section { font-size: clamp(32px, 4.6vw, 70px); }
.titre-bloc { font-size: clamp(24px, 2.8vw, 38px); line-height: 1.05; }
.titre-page em, .titre-section em, .titre-bloc em, .titre-geant em { font-style: italic; color: var(--cuivre); }
.texte-grand { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; }
.texte-doux { color: var(--gris); }
.petit { font-size: 13px; line-height: 1.5; }
.prose { display: grid; gap: 16px; font-size: 17px; line-height: 1.65; max-width: 62ch; }
.prose h2 { font-family: var(--serif); font-size: 28px; margin-top: 18px; line-height: 1.05; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose .a-completer { background: var(--cuivre-clair); padding: 0 4px; }
.lien-souligne { text-decoration: none; border-bottom: 1.5px solid var(--encre); padding-bottom: 1px; transition: color 300ms, border-color 300ms; }
.lien-souligne:hover { color: var(--cuivre); border-color: var(--cuivre); }
.tabulaire { font-variant-numeric: tabular-nums; }
.etiquette { font-family: var(--sans); font-weight: 500; font-size: 13px; padding: 4px 10px; border: 1.5px solid var(--encre); white-space: nowrap; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
/* les repères d'imprimeur : une croix à chaque coin */
.reperes { position: relative; }
.reperes::before, .reperes::after, .reperes > .repere::before, .reperes > .repere::after { content: ""; position: absolute; width: 14px; height: 14px; background: linear-gradient(var(--encre), var(--encre)) center / 1.5px 100% no-repeat, linear-gradient(var(--encre), var(--encre)) center / 100% 1.5px no-repeat; pointer-events: none; }
.reperes::before { top: -7px; left: -7px; }
.reperes::after { top: -7px; right: -7px; }
.reperes > .repere::before { bottom: -7px; left: -7px; }
.reperes > .repere::after { bottom: -7px; right: -7px; }
.repere { position: absolute; inset: 0; pointer-events: none; }
/* la bande des peaux, à la place du filet */
.peaux { height: 10px; background: var(--peaux); }
/* le tampon : un cadre tourné qui vient s'imprimer */
.tampon { display: inline-block; font-family: var(--serif); font-size: 15px; letter-spacing: 0.06em; color: var(--cuivre); border: 2px solid var(--cuivre); padding: 6px 12px; transform: rotate(-4deg); mix-blend-mode: multiply; }
/* les photos : noir et blanc, bichromie violette au survol */
.duotone { position: relative; overflow: hidden; background: var(--sable); }
.duotone img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter 600ms, transform 1200ms var(--sortie); }
.duotone::after { content: ""; position: absolute; inset: 0; background: var(--cuivre); mix-blend-mode: screen; opacity: 0; transition: opacity 600ms; pointer-events: none; }
.duotone:hover::after, a:hover .duotone::after { opacity: 0.55; }
.duotone:hover img, a:hover .duotone img { transform: scale(1.03); }

/* ---------- boutons : des cartouches ---------- */
.bouton {
    --fond: transparent; --texte: var(--encre); --bord: var(--encre);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 24px; border: 1.5px solid var(--bord); background: var(--fond); color: var(--texte); text-decoration: none; cursor: pointer;
    font-family: var(--sans); font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap;
    box-shadow: 4px 4px 0 var(--bord); transition: transform 300ms var(--sortie), box-shadow 300ms var(--sortie), background 300ms, color 300ms;
}
.bouton:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--bord); }
.bouton:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--bord); }
.bouton-plein { --fond: var(--cuivre); --texte: var(--creme); --bord: var(--encre); }
.bouton-clair { --texte: var(--creme); --bord: var(--creme); }
.bouton-petit { padding: 10px 16px; font-size: 13px; }
.bouton[disabled] { opacity: 0.4; cursor: default; box-shadow: none; }

/* ---------- l'en-tête ---------- */
.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), box-shadow 400ms; }
.entete.compacte { background: color-mix(in srgb, var(--creme), transparent 6%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1.5px 0 var(--encre); }
.entete.cachee { transform: translateY(-100%); }
.marque { text-decoration: none; display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-size: 26px; }
.marque-logo { height: 28px; width: auto; }
.marque-logo:not([src]), .marque-logo[src=""] { display: none; }
.marque small { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--cuivre); }
.navigation { display: none; gap: 26px; font-size: 15px; font-weight: 500; }
.navigation a { text-decoration: none; padding: 6px 0; border-bottom: 1.5px 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-size: 15px; font-variant-numeric: tabular-nums; }
.entete .bouton-reserver { padding: 10px 16px; font-size: 13px; }
.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: 1.5px; 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'encre, les pages en Fell */
.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; }
.menu-mobile::before { content: ""; position: absolute; left: 0; right: 0; top: var(--entete); height: 10px; background: var(--peaux); }
.menu-mobile nav { display: grid; align-content: center; gap: 8px; }
.menu-mobile nav a { text-decoration: none; font-family: var(--serif); font-size: clamp(38px, 9vw, 100px); line-height: 1; display: flex; align-items: baseline; gap: 16px; transition: color 300ms; }
.menu-mobile nav a:hover { color: var(--cuivre-clair); }
.menu-mobile nav a small { font-family: var(--sans); font-size: 12px; color: color-mix(in srgb, var(--creme), transparent 45%); font-variant-numeric: tabular-nums; }
.menu-mobile-reserver { margin-top: 14px; color: var(--cuivre-clair); }
.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: 12px 18px; font-size: 14px; background: var(--encre); color: var(--creme); text-align: center; border: 1.5px solid var(--encre); box-shadow: 4px 4px 0 var(--cuivre); }
.message-error { background: var(--cuivre-fonce); }

/* ---------- sections communes ---------- */
.section { padding: clamp(72px, 10vw, 150px) 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), transparent 42%); --ligne: var(--ligne-claire); --ligne-forte: var(--creme); }
.fond-nuit .surtitre, .fond-nuit .titre-section em { color: var(--cuivre-clair); }
.fond-nuit .reperes::before, .fond-nuit .reperes::after, .fond-nuit .reperes > .repere::before, .fond-nuit .reperes > .repere::after { background: linear-gradient(var(--creme), var(--creme)) center / 1.5px 100% no-repeat, linear-gradient(var(--creme), var(--creme)) center / 100% 1.5px no-repeat; }
.fond-sable { background: var(--sable); }
.fond-blanc { background: var(--blanc); }
[data-fond-texte="clair"] { color: var(--creme); --gris: color-mix(in srgb, var(--creme), transparent 42%); --ligne: var(--ligne-claire); }
[data-fond-texte="sombre"] { color: var(--encre); }
.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: 14px; 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; }

/* apparitions : une seule sorte, l'impression (l'encre qui prend) */
[data-apparition] { opacity: 0; filter: contrast(0.6); transition: opacity 900ms var(--sortie), filter 900ms var(--sortie); transition-delay: calc(var(--i, 0) * 90ms); }
[data-apparition].visible, body.mode-edition [data-apparition] { opacity: 1; filter: none; }
[data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.06em 0.04em 0.12em; margin: -0.06em -0.04em -0.12em; }
[data-mots] .mot > span { display: inline-block; opacity: 0; transition: opacity 600ms; transition-delay: calc(var(--m) * 80ms); }
[data-mots].mots-visibles .mot > span { opacity: 1; }

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

/* ---------- 1. la planche de flash : douze dessins prêts, un survol les passe au calque ---------- */
.planche { padding: calc(var(--entete) + 24px) var(--marge) 40px; max-width: var(--largeur); margin: 0 auto; display: grid; gap: 22px; }
.planche-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; font-size: 14px; font-weight: 500; padding-bottom: 12px; border-bottom: 1.5px solid var(--encre); }
.planche-tete .numero { font-family: var(--serif); font-size: 18px; }
.planche-titre { display: grid; gap: 6px; }
.planche-titre .titre-geant { line-height: 0.92; }
.planche-sous { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2vw, 26px); color: var(--gris); }
.flashs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px; background: var(--blanc); border: 1.5px solid var(--encre); }
.flash { display: grid; gap: 6px; justify-items: center; text-decoration: none; color: inherit; padding: 12px 6px 10px; position: relative; transition: background 300ms; }
.flash:hover { background: var(--cuivre-clair); }
.flash svg { width: 100%; max-width: 110px; aspect-ratio: 1; fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 300ms; }
.flash:hover svg { stroke: var(--cuivre); }
.flash-nom { font-family: var(--serif); font-size: 16px; line-height: 1.1; text-align: center; }
.flash-prix { font-size: 12px; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }
.flash:hover .flash-prix { color: var(--cuivre); }
.flash-note { font-size: 11px; color: var(--cuivre); opacity: 0; transition: opacity 300ms; position: absolute; bottom: 4px; }
.flash:hover .flash-note { opacity: 1; }
.planche-bas { display: grid; gap: 14px; font-size: 15px; }
.planche-bas p strong { font-weight: 600; }

/* ---------- 2. sur la peau : six peaux, le même dessin, ce qui change ---------- */
.peau-section { padding: clamp(72px, 10vw, 150px) var(--marge); }
.peau-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 30px; }
.peau-tete { display: grid; gap: 10px; }
.peau-tete .titre-section { max-width: 16ch; }
.peau-scene { display: grid; gap: 24px; }
.peau-carre { aspect-ratio: 1; background: var(--peau, var(--peau-2)); display: grid; place-items: center; transition: background 600ms; border: 1.5px solid var(--encre); }
.peau-carre svg { width: 70%; fill: none; stroke: var(--encre-tatouage, #1c1a1a); stroke-width: var(--epaisseur, 1.4); stroke-linecap: round; stroke-linejoin: round; transition: stroke-width 400ms; }
.peau-carre svg .fin { opacity: var(--fins, 1); transition: opacity 400ms; }
.peau-carre svg .blanc { stroke: #fff; opacity: var(--blancs, 1); transition: opacity 400ms; }
.peau-choix { display: grid; gap: 16px; align-content: start; }
.peau-nuancier { display: flex; gap: 6px; }
.peau-nuancier button { flex: 1; height: 44px; border: 1.5px solid var(--encre); cursor: pointer; background: var(--t); transition: transform 300ms var(--sortie), box-shadow 300ms; }
.peau-nuancier button:hover { transform: translateY(-3px); }
.peau-nuancier button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--creme), 0 0 0 3.5px var(--cuivre); transform: translateY(-3px); }
.peau-lecture { display: grid; gap: 8px; }
.peau-lecture h3 { font-family: var(--serif); font-size: 26px; line-height: 1.05; }
.peau-lecture p { color: var(--gris); font-size: 15px; max-width: 48ch; }
.peau-lecture > * { display: none; }
.peau-lecture > .actif { display: grid; gap: 8px; }

/* ---------- 3. le trait : un dessin qui se trace avec la page ---------- */
.trait { padding: clamp(72px, 10vw, 150px) var(--marge); background: var(--nuit); color: var(--creme); overflow: hidden; }
.trait-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 30px; align-items: center; }
.trait-tete { display: grid; gap: 10px; }
.trait-tete .surtitre { color: var(--cuivre-clair); }
.trait-tete .titre-section em { color: var(--cuivre-clair); }
.trait-tete .texte-doux { color: color-mix(in srgb, var(--creme), transparent 42%); max-width: 44ch; }
.trait-dessin { width: min(80vw, 520px); margin: 0 auto; }
.trait-dessin svg { width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--creme); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trait-dessin path { stroke-dasharray: var(--l, 2000); stroke-dashoffset: calc(var(--l, 2000) * (1 - var(--p, 0))); }
.trait-dessin .violet { stroke: var(--cuivre-clair); }

/* ---------- 4. les artistes : des cartes à repères ---------- */
.artistes { padding: clamp(72px, 10vw, 150px) var(--marge); }
.artistes-interieur { max-width: var(--largeur); margin: 0 auto; }
.artistes-tete { display: grid; gap: 10px; margin-bottom: 44px; }
.artistes-liste { display: grid; gap: 40px 28px; }
.carte-artiste { text-decoration: none; color: inherit; display: grid; gap: 12px; }
.carte-artiste figure { aspect-ratio: 4 / 5; }
.carte-artiste-nom { font-family: var(--serif); font-size: 32px; line-height: 1; margin-top: 8px; }
.carte-artiste-titre { font-size: 14px; color: var(--gris); }
.carte-artiste .etiquettes { margin-top: 4px; }
.carte-artiste-prochain { font-size: 14px; padding-top: 10px; border-top: 1.5px solid var(--encre); }
.carte-artiste-prochain strong { font-weight: 600; }

/* ---------- 5. les tampons : le déroulé d'un projet, cinq tampons qui s'impriment ---------- */
.tampons { padding: clamp(72px, 10vw, 150px) var(--marge); background: var(--sable); }
.tampons-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 34px; }
.tampons-tete { display: grid; gap: 10px; }
.tampons-liste { display: grid; gap: 22px; counter-reset: etape; }
.etape-tampon { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start; padding-top: 18px; border-top: 1.5px solid var(--encre); }
.etape-tampon .tampon { transform: rotate(-6deg) scale(1.5); opacity: 0; transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms; }
.etape-tampon.visible .tampon, body.mode-edition .etape-tampon .tampon { transform: rotate(-4deg) scale(1); opacity: 1; }
.etape-tampon h3 { font-family: var(--serif); font-size: 26px; line-height: 1.05; }
.etape-tampon p { grid-column: 2; font-size: 15px; color: var(--gris); max-width: 52ch; }

/* ---------- 6. la cicatrisation : quatorze jours, un calendrier ---------- */
.cicatrisation { padding: clamp(72px, 10vw, 150px) var(--marge); }
.cicatrisation-interieur { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 30px; }
.cicatrisation-tete { display: grid; gap: 10px; }
.jours-cica { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.jour-cica { aspect-ratio: 1; border: 1.5px solid var(--encre); background: var(--blanc); display: grid; place-items: center; font-family: var(--serif); font-size: clamp(16px, 2.4vw, 28px); cursor: pointer; transition: background 300ms, color 300ms; }
.jour-cica[data-phase="1"] { background: var(--cuivre-clair); }
.jour-cica:hover, .jour-cica.actif { background: var(--cuivre); color: var(--creme); }
.cica-lecture > * { display: none; }
.cica-lecture > .actif { display: grid; gap: 8px; }
.cica-lecture h3 { font-family: var(--serif); font-size: 28px; line-height: 1.05; }
.cica-lecture p { color: var(--gris); font-size: 15px; max-width: 56ch; }

/* ---------- 7. les cicatrisés : la galerie en noir et blanc ---------- */
.galerie-section { padding: 0 var(--marge) clamp(72px, 10vw, 150px); }
.galerie-interieur { max-width: var(--largeur); margin: 0 auto; }
.galerie-tete { display: grid; gap: 10px; margin-bottom: 30px; }
.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.galerie figure { aspect-ratio: 4 / 5; }

/* ---------- 8. le rendez-vous : la section finale ---------- */
.rendezvous { padding: clamp(90px, 12vw, 180px) var(--marge); background: var(--nuit); color: var(--creme); text-align: center; position: relative; }
.rendezvous::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--peaux); }
.rendezvous-interieur { max-width: 900px; margin: 0 auto; display: grid; justify-items: center; gap: 22px; }
.rendezvous-titre { font-family: var(--serif); font-size: clamp(40px, 8vw, 120px); line-height: 0.95; }
.rendezvous-titre em { font-style: italic; color: var(--cuivre-clair); }
.rendezvous .texte-grand { max-width: 40ch; color: color-mix(in srgb, var(--creme), transparent 20%); }
.rendezvous-prochain { font-size: 15px; color: var(--cuivre-clair); }
.rendezvous-note { font-size: 13px; color: color-mix(in srgb, var(--creme), transparent 45%); }

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

/* ---------- les formats : la taille en vrai ---------- */
.familles { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 30px; position: sticky; top: var(--entete); z-index: 5; padding: 12px 0; background: var(--creme); }
.familles::-webkit-scrollbar { display: none; }
.familles a { flex: none; text-decoration: none; font-weight: 600; font-size: 14px; padding: 9px 16px; border: 1.5px solid var(--encre); transition: background 300ms, color 300ms; }
.familles a:hover, .familles a.actif { background: var(--encre); color: var(--creme); }
.famille { display: grid; gap: 22px; scroll-margin-top: calc(var(--entete) + 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.famille-tete { display: grid; gap: 6px; }
.formats { display: grid; gap: 0; }
.format { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: start; align-content: start; padding: 22px 0; border-top: 1.5px solid var(--encre); text-decoration: none; color: inherit; }
.format:last-child { border-bottom: 1.5px solid var(--encre); }
.taille { width: min(var(--cm) * 1cm, 34vw); height: min(var(--cm) * 1cm, 34vw); border: 1.5px dashed var(--cuivre); position: relative; grid-row: span 3; display: grid; place-items: end start; }
.taille span { font-size: 11px; color: var(--cuivre); font-weight: 600; padding: 4px; white-space: nowrap; }
.format-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.format-nom { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.05; transition: color 300ms; }
.format:hover .format-nom { color: var(--cuivre); }
.format-prix { font-weight: 600; font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.format-prix small { font-size: 12px; color: var(--gris); margin-right: 4px; font-weight: 400; }
.format-texte { font-size: 15px; color: var(--gris); max-width: 56ch; }
.format-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--gris); align-items: center; }
.format-meta img { width: 24px; height: 30px; object-fit: cover; filter: grayscale(1); }
.appel { text-align: center; display: grid; justify-items: center; gap: 22px; }
.appel .titre-section { max-width: 18ch; }

/* ---------- les artistes (page) ---------- */
.galerie-artistes { display: grid; gap: 44px; }
.fiche { display: grid; gap: 22px; text-decoration: none; color: inherit; }
.fiche figure { aspect-ratio: 4 / 5; }
.fiche-texte { display: grid; gap: 12px; align-content: start; }
.fiche-nom { font-family: var(--serif); font-size: clamp(36px, 5vw, 64px); line-height: 0.95; }
.fiche-nom em { font-style: italic; color: var(--cuivre); }
.fiche-titre { font-size: 15px; }
.fiche-bio { font-size: 16px; color: var(--gris); max-width: 52ch; }
.semaine-cases { display: flex; gap: 5px; }
.semaine-cases span { width: 30px; height: 30px; border: 1.5px solid var(--encre); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--gris); }
.semaine-cases span.present { background: var(--encre); color: var(--creme); }
.semaine-cases span.aujourd-hui { box-shadow: 0 0 0 2px var(--creme), 0 0 0 3.5px var(--cuivre); }
.fiche-bas { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; font-size: 14px; padding-top: 12px; border-top: 1.5px solid var(--encre); }

/* ---------- un artiste ---------- */
.artiste-tete { display: grid; gap: 28px; align-items: start; }
.artiste-tete figure { aspect-ratio: 4 / 5; width: min(74vw, 340px); }
.artiste-infos { display: grid; gap: 18px; }
.semaine-grande { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.semaine-grande div { display: grid; gap: 6px; padding: 14px 6px; border: 1.5px solid var(--encre); background: var(--blanc); text-align: center; font-size: 12px; min-height: 110px; align-content: start; }
.semaine-grande div.absent { background: transparent; border-style: dashed; color: var(--gris-clair); }
.semaine-grande div.aujourd-hui { box-shadow: 4px 4px 0 var(--cuivre); }
.semaine-grande b { font-family: var(--serif); font-size: 20px; font-weight: 400; }
.semaine-grande span { font-variant-numeric: tabular-nums; line-height: 1.3; }
.semaine-grande small { color: var(--gris); }
.tarifs-artiste { display: grid; gap: 30px; }
.tarifs-categorie { display: grid; align-content: start; }
.tarifs-categorie h3 { font-family: var(--serif); font-size: 26px; line-height: 1.05; padding-bottom: 12px; border-bottom: 1.5px solid var(--encre); 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-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.autres-artistes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }

/* ---------- l'atelier ---------- */
.atelier-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atelier-collage figure { aspect-ratio: 1; }
.atelier-collage figure:nth-child(3n+1) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.video-salon { aspect-ratio: 16 / 9; width: 100%; border: 1.5px solid var(--encre); }
.video-salon video, .video-salon iframe { width: 100%; height: 100%; display: block; }
.hygiene { display: grid; gap: 12px; }
.hygiene li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.hygiene li .tampon { font-size: 12px; padding: 3px 8px; flex: none; }
.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-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(22px, 3vw, 36px); }
.demande { max-width: 760px; margin: 0 auto; background: var(--blanc); border: 1.5px solid var(--encre); padding: clamp(28px, 5vw, 60px); box-shadow: 8px 8px 0 var(--cuivre-clair); }
.contact .formulaire-titre { font-family: var(--serif); font-size: clamp(30px, 4vw, 48px); line-height: 1.02; }
.formulaire { display: grid; gap: 18px; }
.formulaire-intro { color: var(--gris); max-width: 52ch; }
.champ, .formulaire-champ { display: grid; gap: 6px; }
.champ label, .formulaire-champ label { font-size: 13px; font-weight: 600; }
.champ input, .champ textarea, .champ select, .formulaire-champ input, .formulaire-champ textarea, .formulaire-champ select {
    font: inherit; font-size: 16px; color: var(--encre); background: var(--creme); border: 1.5px solid var(--encre); padding: 12px 14px; width: 100%; border-radius: 0; transition: box-shadow 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; box-shadow: 4px 4px 0 var(--cuivre); }
.champ-case, .formulaire-case { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--gris); }
.champ-case input, .formulaire-case input { accent-color: var(--cuivre); width: 16px; height: 16px; margin-top: 3px; flex: none; }
.formulaire-erreur { font-size: 13px; color: #8a2b2b; }
.formulaire-merci { font-family: var(--serif); font-size: 24px; }
.formulaire-piege { position: absolute; left: -9999px; }
.formulaire-aide { font-size: 13px; color: var(--gris); }

/* ---------- gestion d'un rendez-vous : le bon de séance ---------- */
.bon { max-width: 680px; margin: 0 auto; background: var(--blanc); border: 1.5px solid var(--encre); padding: clamp(24px, 4vw, 44px); display: grid; gap: 20px; box-shadow: 8px 8px 0 var(--cuivre-clair); }
.bon + .bon { margin-top: 24px; }
.pastille { display: inline-block; font-family: var(--serif); font-size: 15px; letter-spacing: 0.06em; padding: 5px 12px; border: 2px solid var(--encre); transform: rotate(-3deg); justify-self: start; }
.pastille-ok { color: var(--cuivre); border-color: var(--cuivre); }
.pastille-attente { color: #8a6a1e; border-color: #8a6a1e; }
.pastille-non { color: #8a2b2b; border-color: #8a2b2b; }
.recap-date { font-family: var(--serif); font-size: clamp(28px, 4.5vw, 46px); line-height: 1; }
.recap-date em { font-style: italic; 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-weight: 600; font-variant-numeric: tabular-nums; }
.recap-lignes .recap-total { border-bottom: 0; }
.recap-lignes .recap-total span:last-child { font-family: var(--serif); font-size: 24px; font-weight: 400; }
.choix-creneaux { display: grid; gap: 22px; }
.jour-creneaux { display: grid; gap: 10px; }
.jour-creneaux h3 { font-family: var(--serif); font-size: 20px; }
.heures { display: flex; flex-wrap: wrap; gap: 8px; }
.heure { padding: 10px 14px; border: 1.5px solid var(--encre); background: transparent; font-weight: 600; font-size: 14px; cursor: pointer; font-variant-numeric: tabular-nums; transition: background 300ms, color 300ms, box-shadow 300ms; color: inherit; }
.heure:hover { box-shadow: 3px 3px 0 var(--cuivre); }
.heure.choisie { background: var(--cuivre); color: var(--creme); border-color: var(--cuivre); }

/* ---------- pied de page : le cartouche ---------- */
.pied { padding: clamp(72px, 10vw, 150px) var(--marge) 32px; }
.pied-cartouche { max-width: 880px; margin: 0 auto; background: var(--blanc); border: 1.5px solid var(--encre); padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px); display: grid; gap: 20px; justify-items: center; text-align: center; box-shadow: 10px 10px 0 var(--cuivre); }
.pied-nom { font-family: var(--serif); font-size: clamp(44px, 8vw, 110px); line-height: 0.95; }
.pied-baseline { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--gris); max-width: 40ch; }
.pied-lignes { display: grid; gap: 6px; font-size: 14px; }
.pied-lignes a { text-decoration: none; }
.pied-horaires { display: grid; gap: 3px; font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; width: 100%; max-width: 320px; margin: 4px auto 0; }
.pied-horaires li { display: flex; justify-content: space-between; gap: 12px; }
.pied-horaires li.aujourd-hui { color: var(--cuivre); font-weight: 600; }
.pied-bas { max-width: var(--largeur); margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 12px; color: var(--gris); }
.pied-bas nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.pied-bas a { text-decoration: none; }
.pied-bas a:hover { color: var(--encre); }

/* ---------- réglages d'accessibilité et d'édition ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
    .trait-dessin path { stroke-dashoffset: 0; }
}
body.mode-edition .peau-lecture > *, body.mode-edition .cica-lecture > * { display: grid; }
body.mode-edition .trait-dessin path { stroke-dashoffset: 0; }

/* ============================================================
   ÉCRANS PLUS LARGES
   ============================================================ */
@media (min-width: 700px) {
    .flashs { grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 24px; }
    .planche-bas { grid-template-columns: 1fr 1fr auto; align-items: center; }
    .peau-scene { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
    .trait-interieur { grid-template-columns: 1fr 1fr; gap: 56px; }
    .artistes-liste { grid-template-columns: repeat(2, 1fr); }
    .etape-tampon { grid-template-columns: 180px auto 1fr; }
    .etape-tampon p { grid-column: 3; }
    .cicatrisation-interieur { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
    .cicatrisation-tete { grid-column: 1 / -1; }
    .galerie { grid-template-columns: repeat(3, 1fr); }
    .galerie-artistes { grid-template-columns: repeat(2, 1fr); }
    .fiche { grid-template-columns: 220px 1fr; gap: 30px; }
    .artiste-tete { grid-template-columns: 340px 1fr; gap: 56px; }
    .tarifs-artiste { grid-template-columns: 1fr 1fr; }
    .infos { grid-template-columns: repeat(3, 1fr); }
    .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; }
    .planche { grid-template-columns: 1fr 1.5fr; grid-template-areas: "tete tete" "titre flashs" "bas bas"; gap: 24px 48px; }
    .planche-tete { grid-area: tete; }
    .planche-titre { grid-area: titre; align-self: end; }
    .flashs { grid-area: flashs; grid-template-columns: repeat(4, 1fr); }
    .planche-bas { grid-area: bas; grid-template-columns: 1fr 1fr 1fr auto; }
    .peau-scene { grid-template-columns: 1.1fr 1fr; gap: 64px; }
    .artistes-liste { grid-template-columns: repeat(4, 1fr); }
    .galerie { grid-template-columns: repeat(4, 1fr); }
    .famille { grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
    .famille-tete { position: sticky; top: calc(var(--entete) + 80px); }
    .famille-tete .titre-section { font-size: clamp(28px, 3vw, 44px); }
    .format { grid-template-columns: auto 1fr; }
    .tete-page-interieur { grid-template-columns: 1fr 1fr; align-items: end; }
    .pied-lignes { grid-template-columns: repeat(3, auto); }
}