@import url("colors-0QCm4H8.css");
@import url("fonts-Sd8pMB4.css");

/* ==========================================================================
   0 · SOCLE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 5rem;
}

html, body { overflow-x: clip; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-body);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, blockquote {
    font-family: var(--serif);
    font-weight: 400;
    font-variation-settings: 'SOFT' 44, 'WONK' 1, 'opsz' 144;
    line-height: 0.95;
    letter-spacing: -0.012em;
    margin: 0;
}

p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
em { font-style: italic; }
i { font-style: normal; }
a { color: inherit; }

::selection { background: var(--blush); color: var(--ink); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.feuille { position: relative; z-index: 1; }

/* ==========================================================================
   1 · PAPIER : grain, repères de coupe, jauge
   ========================================================================== */

.grain {
    position: fixed;
    inset: 0;
    z-index: 95;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.38'/%3E%3C/svg%3E");
}

.reperes {
    position: fixed;
    inset: var(--cadre);
    z-index: 88;
    pointer-events: none;
}
.reperes i {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 0 solid var(--chrome-ink, var(--ink));
    opacity: 0.55;
    transition: border-color 0.9s var(--fondu);
}
.reperes i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.reperes i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.reperes i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.reperes i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.jauge {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 96;
    pointer-events: none;
}
.jauge span {
    display: block;
    height: 100%;
    background: var(--chrome-ink, var(--ink));
    opacity: 0.75;
    transform: scaleX(0);
    transform-origin: left;
}

/* La tache qui suit la souris — présente seulement sur pointeur fin. */
.sillage {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 94;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--blush);
    filter: blur(7px);
    mix-blend-mode: multiply;
    pointer-events: none;
    will-change: transform;
}

/* ==========================================================================
   2 · CHROME : titre courant, folio, sceau de réservation
   ========================================================================== */

.chrome {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 86;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: calc(var(--cadre) + 0.55rem) calc(var(--cadre) + 1.35rem);
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--chrome-ink, var(--ink));
    pointer-events: none;
    transition: color 0.9s var(--fondu);
}
.chrome__marque { pointer-events: auto; text-decoration: none; font-weight: 500; }
.chrome__folio {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    opacity: 0.72;
    text-align: right;
}
.chrome__folio-num { font-family: var(--serif); letter-spacing: 0.16em; }
.chrome__folio-num, .chrome__folio-nom { transition: opacity 0.35s var(--fondu), transform 0.35s var(--glisse); }
.chrome.est-tournee .chrome__folio-nom,
.chrome.est-tournee .chrome__folio-num { opacity: 0; transform: translateY(-0.45em); }

.chrome__carnet {
    position: fixed;
    right: calc(var(--cadre) + 1.1rem);
    bottom: calc(var(--cadre) + 1.1rem);
    z-index: 87;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.72rem 1.05rem;
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--chrome-ink, var(--ink));
    border: 1px solid currentColor;
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    backdrop-filter: blur(2px);
    transition: color 0.5s var(--fondu), background 0.5s var(--fondu);
}
.chrome__carnet svg {
    width: 1.1em; height: 1.1em;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.45s var(--glisse);
}
.chrome__carnet:hover { background: var(--ink); color: var(--paper); }
.chrome__carnet:hover svg { transform: translateX(3px); }
/* `translate` et non `transform` : en mobile la pastille est déjà centrée par transform. */
.chrome__carnet.est-rangee {
    opacity: 0;
    pointer-events: none;
    translate: 0 0.9rem;
}
.chrome__carnet { transition: color 0.5s var(--fondu), background 0.5s var(--fondu), opacity 0.45s var(--fondu), translate 0.45s var(--glisse); }

/* ==========================================================================
   3 · ATOMES
   ========================================================================== */

.tete-chapitre {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: clamp(1.6rem, 4vh, 3rem);
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    opacity: 0.62;
}
.tete-chapitre i { flex: 0 0 clamp(1.75rem, 5vw, 4.5rem); height: 1px; background: currentColor; }

.bouton {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: inline-block;
    padding: 0.9rem 1.6rem;
    font: inherit;
    font-size: var(--t-caps);
    font-weight: 400;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: color 0.4s var(--fondu);
}
.bouton::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s var(--glisse);
}
.bouton:hover { color: var(--paper); }
.bouton:hover::after { transform: scaleY(1); }
.bouton--fantome { border-color: var(--ink-hair); color: var(--ink-soft); }
.bouton--fantome:hover { color: var(--paper); }
.bouton--plein { color: var(--paper); }
.bouton--plein::after { transform: scaleY(1); }
.bouton--plein:hover { color: var(--ink); }
.bouton--plein:hover::after { transform: scaleY(0); }

/* ==========================================================================
   4 · LE CORNET (motif)
   ========================================================================== */

.cornet { width: 100%; height: auto; display: block; overflow: visible; }
.cornet__aplats       { opacity: 0.92; mix-blend-mode: multiply; }
.cornet__aplat--cone  { fill: var(--caramel); }
.cornet__aplat--haut  { fill: var(--glacier); }
.cornet__aplat--bas   { fill: var(--blush); }
.cornet__goutte--ciel { fill: var(--glacier); }
.cornet__goutte--rose { fill: var(--blush); }
.cornet__ligne {
    fill: none;
    stroke: var(--ink);
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cornet__ligne--fine { stroke-width: 3.2; }

[data-tracer] .cornet__ligne {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tracer 1.05s var(--fondu) forwards;
    animation-delay: calc(var(--pas, 1) * 0.11s);
}
[data-tracer] .cornet__aplats { opacity: 0; animation: paraitre-aplat 0.9s var(--glisse) 0.74s forwards; }
[data-tracer] .cornet__gouttes { opacity: 0; animation: paraitre 0.9s var(--ressort) 0.86s forwards; }
.cornet__gouttes { transform-origin: 150px 220px; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes paraitre { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes paraitre-aplat { from { opacity: 0; } to { opacity: 0.92; } }

/* ==========================================================================
   5 · OUVERTURE
   ========================================================================== */

.overture {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--paper);
    clip-path: inset(0 0 0 0);
    animation: overture-lever 1s var(--glisse) 2.15s forwards;
}
.overture--passee { display: none; }
@keyframes overture-lever { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

.overture__scene {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    animation: overture-monte 1s var(--glisse) 2.05s forwards;
}
@keyframes overture-monte { to { transform: translateY(-2.5rem); opacity: 0.35; } }
.cornet--overture { width: clamp(150px, 25vmin, 240px); }
.overture__mot {
    display: flex;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 4.4vw, 2.8rem);
    letter-spacing: 0.42em;
    text-indent: 0.42em;
}
.overture__mot span {
    opacity: 0;
    transform: translateY(0.5em);
    animation: mot-monte 0.75s var(--glisse) forwards;
    animation-delay: calc(1.05s + var(--pas) * 0.075s);
}
@keyframes mot-monte { to { opacity: 1; transform: none; } }
.overture__pied {
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: 0;
    animation: mot-monte 0.9s var(--glisse) 1.55s forwards;
}
.overture__pied i { margin: 0 0.4em; }

/* ==========================================================================
   6 · LA MAISON
   ========================================================================== */

.maison {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    padding: clamp(5rem, 12vh, 8rem) var(--gouttiere) clamp(3.5rem, 9vh, 6rem);
    overflow: clip;
    --scene-ink: var(--ink);
}

.maison__champ { position: absolute; inset: -12%; pointer-events: none; }
.tache {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    mix-blend-mode: multiply;
    opacity: 0.8;
    will-change: transform;
}
.tache--ciel   { width: 38vmin; height: 38vmin; background: var(--glacier); top: 14%; left: 54%; animation: derive 19s ease-in-out infinite; }
.tache--rose   { width: 34vmin; height: 34vmin; background: var(--blush);   top: 48%; left: 26%; animation: derive 23s ease-in-out infinite reverse; }
.tache--menthe { width: 26vmin; height: 26vmin; background: var(--mint);    top: 66%; left: 66%; animation: derive 27s ease-in-out infinite; }
.tache--miel   { width: 22vmin; height: 22vmin; background: var(--caramel); top: 22%; left: 16%; animation: derive 31s ease-in-out infinite reverse; }
@keyframes derive {
    0%, 100% { translate: 0 0; }
    33%      { translate: 4vmin -3vmin; }
    66%      { translate: -3vmin 4vmin; }
}

.maison__marge {
    position: absolute;
    top: 50%;
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}
.maison__marge--g { left: 0; transform: translate(calc(-50% + var(--cadre) + 1.7rem), -50%) rotate(-90deg); }
.maison__marge--d { right: 0; transform: translate(calc(50% - var(--cadre) - 1.7rem), -50%) rotate(90deg); }
.maison__marge i { margin: 0 0.35em; }

.maison__scene { align-self: center; display: grid; place-items: center; }
.maison__titre { display: grid; justify-items: center; }

.maison__sur {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.7rem, 4.6vw, 3.8rem);
    color: var(--ink-soft);
    line-height: 1;
    opacity: 0;
    animation: mot-monte 1s var(--glisse) 2.35s forwards;
}
.maison__cornet {
    position: relative;
    z-index: 2;
    width: clamp(200px, 40vmin, 400px);
    /* Le cornet mord sur les deux mots : c'est ce qui fait la superposition. */
    margin-block: clamp(-3.5rem, -5vw, -1rem) clamp(-9rem, -13vw, -3rem);
    will-change: transform;
}
.cornet--monument .cornet__ligne { animation-delay: calc(2.2s + var(--pas, 1) * 0.11s); }
.cornet--monument .cornet__aplats { animation-delay: 2.9s; }
.cornet--monument .cornet__gouttes { animation-delay: 3s; }

.maison__nom {
    position: relative;
    z-index: 1;
    display: flex;
    font-family: var(--serif);
    font-variation-settings: 'SOFT' 44, 'WONK' 1, 'opsz' 144;
    font-weight: 400;
    font-size: var(--t-monument);
    line-height: 0.78;
    letter-spacing: 0.005em;
    mix-blend-mode: multiply;
}
.maison__lettre {
    display: inline-block;
    opacity: 0;
    filter: blur(14px);
    transform: translateY(0.16em);
    animation: lettre-nette 1.15s var(--glisse) forwards;
    animation-delay: calc(2.45s + var(--pas) * 0.075s);
    transition: transform 0.5s var(--ressort), color 0.5s var(--fondu);
}
.maison__lettre:hover { transform: translateY(-0.05em) rotate(-2.5deg); color: var(--gold); }
@keyframes lettre-nette { to { opacity: 1; filter: blur(0); transform: none; } }

.maison__accroche {
    align-self: end;
    max-width: 36ch;
    margin-top: clamp(1.5rem, 4vh, 3rem);
    text-align: center;
    font-size: var(--t-lead);
    line-height: 1.4;
    color: var(--ink-soft);
    opacity: 0;
    animation: mot-monte 1.1s var(--glisse) 3.05s forwards;
}
.maison__accroche i { font-family: var(--serif); font-style: italic; color: var(--ink); }

.sceau {
    position: absolute;
    left: calc(var(--cadre) + 2.5rem);
    bottom: calc(var(--cadre) + 2.2rem);
    width: clamp(84px, 10vw, 124px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0;
    animation: mot-monte 1.2s var(--glisse) 3.2s forwards;
}
.sceau svg { position: absolute; inset: 0; animation: tourne 30s linear infinite; }
.sceau text {
    font-family: var(--sans);
    font-size: 13.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    fill: var(--ink-soft);
}
.sceau__coeur { font-family: var(--serif); font-size: 0.78rem; letter-spacing: 0.06em; }
.sceau__coeur b { font-weight: 400; }
@keyframes tourne { to { transform: rotate(360deg); } }

.descendre {
    position: absolute;
    right: calc(var(--cadre) + 2.4rem);
    bottom: calc(var(--cadre) + 5.5rem);
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    opacity: 0;
    animation: mot-monte 1.2s var(--glisse) 3.35s forwards;
}
.descendre__fil { width: 1px; height: 3.4rem; background: linear-gradient(var(--ink-soft), transparent); }
.descendre__goutte {
    width: 7px; height: 7px;
    border-radius: 50% 50% 55% 55%;
    background: var(--blush);
    margin-top: -2.6rem;
    animation: goutter 2.6s var(--fondu) infinite;
}
@keyframes goutter {
    0%   { transform: translateY(-1rem) scale(0.5); opacity: 0; }
    28%  { transform: translateY(0) scale(1); opacity: 1; }
    72%  { transform: translateY(2.4rem) scaleY(1.5) scaleX(0.75); opacity: 1; }
    100% { transform: translateY(3.4rem) scale(0.3); opacity: 0; }
}

/* ==========================================================================
   7 · LE RUBAN
   ========================================================================== */

.ruban {
    position: relative;
    z-index: 4;
    margin: clamp(1rem, 5vh, 4rem) 0 clamp(3rem, 9vh, 7rem);
    user-select: none;
}
.ruban__bande {
    width: 112%;
    margin-left: -6%;
    overflow: hidden;
    padding: 0.7rem 0;
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}
.ruban__bande--menthe { background: var(--mint); color: var(--ink); transform: rotate(-1deg); }
.ruban__bande--encre  { background: var(--ink); color: var(--paper); transform: rotate(0.7deg); margin-top: 0.15rem; }
.ruban__piste {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    width: max-content;
    animation: defiler 46s linear infinite;
}
.ruban__piste--retour { animation-direction: reverse; }
.ruban__piste i { opacity: 0.45; }
@keyframes defiler { to { transform: translateX(-50%); } }

/* ==========================================================================
   8 · LE MANIFESTE
   ========================================================================== */

.manifeste {
    max-width: 1500px;
    margin-inline: auto;
    padding: var(--chapitre) max(var(--gouttiere), 6vw);
    --scene-ink: var(--ink);
}
.declaration {
    grid-area: dit;
    font-size: clamp(2.1rem, 4.9vw, 4.6rem);
    line-height: 1.02;
    max-width: 18ch;
}
.declaration__mot {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-right: 0.02em;
    margin-right: 0.2em;
}
.declaration__mot > span {
    display: inline-block;
    transform: translateY(108%);
    transition: transform 0.95s var(--glisse);
    transition-delay: calc(var(--pas, 0) * 38ms);
}
.est-revele .declaration__mot > span { transform: none; }

/* Citation à gauche sur deux rangs, colonne technique à droite —
   la mise en page d'un dossier de marque, pas d'une page produit. */
.manifeste__colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas: 'dit fiche' 'note fiche';
    gap: clamp(2.5rem, 6vh, 4.5rem) clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.manifeste__note { grid-area: note; }
.fiche { grid-area: fiche; }
.manifeste__texte { font-size: var(--t-lead); line-height: 1.5; max-width: 40ch; }
.lettrine {
    float: left;
    font-family: var(--serif);
    font-size: 3.6em;
    line-height: 0.76;
    padding: 0.06em 0.12em 0 0;
    color: var(--gold);
}
.manifeste__signature {
    margin-top: 1.6rem;
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
}
.manifeste__note, .fiche {
    opacity: 0;
    transform: translateY(1.6rem);
    transition: opacity 0.9s var(--fondu), transform 0.9s var(--glisse);
}
.manifeste__note.est-revele, .fiche.est-revele { opacity: 1; transform: none; }
.fiche { transition-delay: 0.14s; }
.fiche > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--ink-hair);
}
.fiche > div:last-child { border-bottom: 1px solid var(--ink-hair); }
.fiche dt { font-size: var(--t-caps); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.fiche dd { font-family: var(--serif); font-size: 1.08rem; text-align: right; }

/* ==========================================================================
   9 · LA TOUR
   ========================================================================== */

.tour {
    /* Un lavis de la teinte, jamais la teinte pure : sinon la boule
       du parfum courant disparaît dans son propre fond. */
    --scene: color-mix(in srgb, var(--teinte-scene, var(--paper)) 40%, var(--paper));
    position: relative;
    background: var(--scene);
    color: var(--scene-ink);
    transition: background-color 1.2s var(--fondu), color 1.2s var(--fondu);
    padding-top: var(--chapitre);
}
.tour__intro { max-width: 1500px; margin-inline: auto; padding: 0 max(var(--gouttiere), 6vw); }
.tour__titre { font-size: var(--t-display); margin-bottom: 1.4rem; }
.tour__titre em { color: color-mix(in srgb, currentColor 55%, transparent); }
.tour__dit { max-width: 38ch; font-size: var(--t-lead); line-height: 1.45; opacity: 0.82; }
.tour__invite {
    margin-top: clamp(2rem, 6vh, 4rem);
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    opacity: 0.55;
}

.tour__corps {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
    max-width: 1500px;
    margin-inline: auto;
    padding: 0 max(var(--gouttiere), 6vw);
}
.tour__scene {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    place-items: center;
    align-content: center;
}
.pile { height: min(86svh, 760px); width: auto; overflow: visible; }
.pile__monde {
    transform: translateY(calc(var(--dy, -223) * 1px)) scale(var(--s, 1.15));
    transform-origin: 160px 752px;
    transition: transform 1.1s var(--glisse);
}
.pile__aplat { fill: var(--caramel); opacity: 0.92; }
.pile__trait {
    fill: none;
    stroke: var(--scene-ink);
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 1.2s var(--fondu);
}
.pile__trait--fin { stroke-width: 3.2; }

.boule__corps { transform-origin: 0 0; }
.boule__aplat { fill: var(--teinte); opacity: 0.94; }
.boule__trait { fill: none; stroke: var(--scene-ink); stroke-width: 5.5; stroke-linejoin: round; transition: stroke 1.2s var(--fondu); }
.boule__eclats circle { fill: var(--teinte); opacity: 0; }

.tour--pret .boule__corps {
    opacity: 0;
    transform: translateY(-190px) scale(0.35) rotate(-24deg);
    transition: transform 0.95s var(--ressort), opacity 0.35s linear;
}
.tour--pret .boule.est-posee .boule__corps { opacity: 1; transform: rotate(var(--tour, 0deg)); }
.tour--pret .boule.est-posee .boule__eclats circle { animation: eclat 0.85s var(--glisse) 0.42s; }
@keyframes eclat {
    0%   { opacity: 0; transform: scale(0.2); }
    35%  { opacity: 0.95; }
    100% { opacity: 0; transform: scale(2.2) translateY(-14px); }
}

.tour__compteur {
    position: absolute;
    bottom: clamp(1.5rem, 5vh, 3.5rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    opacity: 0.6;
    white-space: nowrap;
}
.tour__compteur b { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; letter-spacing: 0; }

.tour__pas { display: block; }
.pas {
    min-height: 100svh;
    display: grid;
    align-content: center;
    gap: 0.7rem;
    padding-block: 4rem;
    opacity: 0.16;
    transition: opacity 0.7s var(--fondu);
}
.pas.est-lue { opacity: 1; }
.pas__folio { font-family: var(--serif); font-size: clamp(3rem, 8vw, 6.5rem); line-height: 0.8; opacity: 0.28; }
.pas__nom { font-size: var(--t-title); }
.pas__sous { font-family: var(--serif); font-style: italic; font-size: 1.15rem; opacity: 0.7; }
.pas__note { max-width: 30ch; font-size: var(--t-lead); line-height: 1.45; margin-top: 0.8rem; }
.pas__compo {
    max-width: 34ch;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid currentColor;
    font-size: var(--t-caps);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.72;
}
.pas__ref {
    display: flex;
    gap: 1.4rem;
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    opacity: 0.5;
}

.tour__chute {
    max-width: 1500px;
    margin-inline: auto;
    padding: clamp(3rem, 10vh, 7rem) max(var(--gouttiere), 6vw) var(--chapitre);
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--t-lead);
}
.tour__chute a { text-underline-offset: 0.28em; }

/* ==========================================================================
   10 · LE NUANCIER
   ========================================================================== */

.nuancier {
    background: var(--paper);
    padding: var(--chapitre) max(var(--gouttiere), 6vw);
    --scene-ink: var(--ink);
}
.planche { max-width: 1500px; margin: 0 auto clamp(2rem, 5vh, 3.5rem); }
.planche__marque {
    font-size: var(--t-caps);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    font-weight: 500;
}
.planche__filet { height: 1px; background: var(--ink); margin: 0.8rem 0 1rem; }
.planche__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
    gap: clamp(1rem, 4vw, 4rem);
    align-items: start;
}
.planche__objet { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 2rem); }
.planche__sous, .planche__legende, .planche__folio {
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: 1.9;
}
.planche__legende { text-transform: none; letter-spacing: 0.015em; font-size: 0.86rem; max-width: 46ch; line-height: 1.5; }
.planche__folio { white-space: nowrap; }

.nuancier__bandes {
    display: flex;
    gap: 5px;
    height: clamp(330px, 56vh, 520px);
    max-width: 1500px;
    margin-inline: auto;
}
.bande {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.1rem 1rem;
    background: var(--teinte);
    color: var(--encre);
    overflow: hidden;
    cursor: crosshair;
    transition: flex-grow 0.85s var(--glisse);
}
.nuancier__bandes:hover .bande,
.nuancier__bandes:focus-within .bande { flex-grow: 0.68; }
.bande:hover, .bande:focus { flex-grow: 3.4; }
.bande__marque {
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    opacity: 0.65;
}
.bande__note {
    position: absolute;
    inset: auto 1rem 9rem 1rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.5rem);
    line-height: 1.25;
    opacity: 0;
    transform: translateY(0.8rem);
    transition: opacity 0.5s var(--fondu), transform 0.6s var(--glisse);
}
.bande:hover .bande__note, .bande:focus .bande__note { opacity: 0.92; transform: none; transition-delay: 0.25s; }
.bande__nom {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.6vw, 1.6rem);
    line-height: 1.05;
    margin-bottom: 0.7rem;
}
.bande__fiche { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.bande__fiche > div {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.24rem 0;
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.45s var(--fondu), transform 0.5s var(--glisse);
    transition-delay: calc(var(--r, 0) * 45ms);
}
.bande__fiche > div:nth-child(2) { --r: 1; }
.bande__fiche > div:nth-child(3) { --r: 2; }
.bande__fiche > div:nth-child(4) { --r: 3; }
.bande:hover .bande__fiche > div, .bande:focus .bande__fiche > div { opacity: 0.78; transform: none; }
.bande__fiche dt { opacity: 0.62; }

.encart {
    max-width: 1500px;
    margin: clamp(2rem, 6vh, 4rem) auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--ink-hair);
}
.encart__label, .encart__date {
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
}
.encart__nom {
    position: relative;
    z-index: 0;
    isolation: isolate;
    padding: 0 0.18em;
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    line-height: 1;
}
.encart__nom::before {
    content: '';
    position: absolute;
    inset: 14% -0.05em 10%;
    background: var(--teinte);
    z-index: -1;
    mix-blend-mode: multiply;
}

/* ==========================================================================
   11 · L'ATELIER
   ========================================================================== */

.atelier {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 0.7fr);
    grid-template-areas: 'tete scene ticket' 'dire scene ticket';
    grid-template-rows: auto auto;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding: var(--chapitre) max(var(--gouttiere), 6vw);
    background: var(--paper-pale);
    --scene-ink: var(--ink);
}
.atelier__tete { grid-area: tete; align-self: end; }
.atelier__dire { grid-area: dire; align-self: start; }
.atelier__scene { grid-area: scene; }
.ticket { grid-area: ticket; }
.atelier__titre { font-size: clamp(2.2rem, 5vw, 4.4rem); margin-bottom: 1.2rem; }
.atelier__titre em { color: var(--gold); }
.atelier__regle { max-width: 36ch; color: var(--ink-soft); margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'p n' 'p s';
    align-items: center;
    gap: 0 0.7rem;
    padding: 0.5rem 1rem 0.5rem 0.55rem;
    font: inherit;
    text-align: left;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink-hair);
    cursor: pointer;
    transition: background 0.4s var(--fondu), border-color 0.4s var(--fondu), transform 0.4s var(--ressort);
}
.chip:hover { border-color: var(--ink); transform: translateY(-2px); }
/* Sur une teinte sombre (Noir Absolu), l'encre du parfum reprend la main. */
.chip.est-choisi { background: var(--teinte); border-color: var(--ink); color: var(--encre); }
.chip.est-choisi .chip__sous { color: currentColor; opacity: 0.65; }
.chip[disabled] { opacity: 0.3; cursor: not-allowed; transform: none; }
.chip__pastille {
    grid-area: p;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: var(--teinte);
    border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.chip__nom { grid-area: n; font-size: 0.95rem; line-height: 1.15; }
.chip__sous {
    grid-area: s;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.chip--secret { border-style: dashed; }

.atelier__commandes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.atelier__chuchote {
    margin-top: 1rem;
    min-height: 1.6em;
    font-family: var(--serif);
    font-style: italic;
    color: var(--gold);
    opacity: 0;
    transition: opacity 0.5s var(--fondu);
}
.atelier__chuchote.est-dit { opacity: 1; }

.atelier__scene { position: relative; display: grid; place-items: center; }
.cornet-vide { width: min(100%, 330px); height: auto; overflow: visible; }
.flaque {
    fill: var(--caramel);
    opacity: 0.5;
    transform: scale(0);
    transform-origin: 162px 574px;
    transition: transform 1.1s var(--glisse);
}
.atelier__vide {
    position: absolute;
    bottom: -0.6rem;
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-faint);
    transition: opacity 0.5s var(--fondu);
}
.atelier__vide.est-cache { opacity: 0; }

/* Rotation, chute et fonte vivent toutes sur le même élément :
   c'est la seule façon que « fondre » descende bien à la verticale. */
.atelier .boule__corps {
    transform-origin: 0 0;
    transform: rotate(var(--tour, 0deg));
    animation: boule-tombe 0.85s var(--ressort) backwards;
}
@keyframes boule-tombe { from { opacity: 0; transform: translateY(-170px) scale(0.4) rotate(-24deg); } }
.atelier.est-fondue .boule__corps {
    transform: translateY(var(--fonte, 120px)) scale(1.6, 0.16);
    opacity: 0.9;
    transition: transform 1.5s cubic-bezier(0.55, 0, 0.35, 1) calc(var(--i, 0) * 0.1s), opacity 1.5s linear;
}
.atelier.est-fondue .flaque { transform: scale(1); transition-delay: 0.55s; }

.ticket { display: grid; justify-items: center; }
.ticket__papier {
    --dent: 9px;
    width: min(100%, 320px);
    padding: 1.6rem 1.4rem 2.6rem;
    background: #FFFCF6;
    color: var(--ink);
    transform: rotate(-1.6deg);
    box-shadow: 0 26px 48px -34px rgba(63, 45, 33, 0.65);
    mask:
        radial-gradient(var(--dent) at 50% 0, #0000 99%, #000 101%) 0 100% / calc(2 * var(--dent)) var(--dent) repeat-x,
        linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--dent) + 1px) no-repeat;
}
.ticket__enseigne {
    font-family: var(--serif);
    font-size: 1.5rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
}
.ticket__adresse, .ticket__merci, .ticket__code {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink-soft);
}
.ticket__adresse i, .ticket__merci i { margin: 0 0.3em; }
.ticket__filet { height: 1px; background: var(--ink-hair); margin: 0.9rem 0; }
.ticket__filet--pointille { height: 0; border-top: 1px dashed var(--ink-hair); background: none; }
.ticket__lignes { display: grid; gap: 0.45rem; }
.ticket__ligne {
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.82rem;
    animation: mot-monte 0.45s var(--glisse) backwards;
}
.ticket__ligne span:first-child { color: var(--ink-faint); }
.ticket__ligne span:last-child { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-soft); }
.ticket__ligne--creuse { color: var(--ink-faint); font-style: italic; }
.ticket__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.72rem;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}
.ticket__total span:last-child { font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.02em; text-transform: none; }
.ticket__verdict {
    margin: 0.9rem 0 0.2rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.35;
    color: var(--gold);
    min-height: 2.7em;
}
.ticket__code { margin-top: 0.5rem; opacity: 0.5; }

/* ==========================================================================
   12 · LE SALON
   ========================================================================== */

.salon {
    --feston: 26px;
    --scene-ink: var(--ink);
    position: relative;
    background: var(--paper-warm);
    padding: calc(var(--chapitre) + var(--feston)) max(var(--gouttiere), 6vw) var(--chapitre);
    mask:
        radial-gradient(var(--feston) at 50% var(--feston), #000 99%, #0000 101%) 0 0 / calc(2 * var(--feston)) var(--feston) repeat-x,
        linear-gradient(#000 0 0) 0 var(--feston) / 100% calc(100% - var(--feston)) no-repeat;
}
.salon__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    max-width: 1500px;
    margin-inline: auto;
}
.salon__titre { font-size: var(--t-display); margin-bottom: 1.6rem; }
.salon__titre em { color: var(--gold); }
.salon__texte { max-width: 42ch; font-size: var(--t-lead); line-height: 1.45; color: var(--ink-soft); }
.heures { margin-top: clamp(2rem, 5vh, 3.2rem); max-width: 34rem; }
.heures > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--ink-hair);
}
.heures > div:last-child { border-bottom: 1px solid var(--ink-hair); }
.heures dt { font-size: var(--t-caps); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
.heures dd { font-family: var(--serif); font-size: 1.06rem; text-align: right; }
.heures em { color: var(--gold); }

.vitrine {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 50% 50% 6px 6px / 42% 42% 6px 6px;
    background: linear-gradient(178deg, var(--glacier) 0%, var(--blush-pale) 52%, var(--paper-pale) 100%);
    border: 1px solid var(--ink);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.planete { position: absolute; border-radius: 50%; mix-blend-mode: multiply; will-change: transform; }
.planete--a { width: 27%; aspect-ratio: 1; background: var(--blush);   top: 12%; left: 8%;   animation: derive 21s ease-in-out infinite; }
.planete--b { width: 17%; aspect-ratio: 1; background: var(--mint);    top: 32%; right: 6%;  animation: derive 26s ease-in-out infinite reverse; }
.planete--c { width: 11%; aspect-ratio: 1; background: var(--caramel); top: 62%; left: 14%;  animation: derive 31s ease-in-out infinite; }
.planete--d { width: 8%;  aspect-ratio: 1; background: var(--glacier); top: 20%; right: 26%; animation: derive 24s ease-in-out infinite reverse; }
.vitrine__cornet { position: relative; z-index: 2; width: 58%; margin-top: 8%; }
.vitrine__sol { position: absolute; inset: auto 0 0 0; height: 14%; background: var(--caramel); opacity: 0.55; }
.vitrine__cartouche {
    margin-top: 0.9rem;
    text-align: center;
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ==========================================================================
   13 · LA VISITE
   ========================================================================== */

.visite {
    position: relative;
    z-index: 2;
    background: var(--noir);
    color: var(--paper);
    padding: var(--chapitre) max(var(--gouttiere), 6vw) calc(var(--cadre) + 5.5rem);
    --scene-ink: var(--paper-pale);
    --ink-hair: rgba(246, 237, 225, 0.2);
}
.visite__mot {
    display: flex;
    justify-content: space-between;
    font-family: var(--serif);
    font-size: clamp(3.6rem, 19vw, 15rem);
    line-height: 0.8;
    margin-bottom: clamp(2.5rem, 8vh, 6rem);
}
.visite__mot span {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    transition: transform 1s var(--glisse), opacity 0.7s var(--fondu), color 0.4s var(--fondu);
    transition-delay: calc(var(--pas) * 65ms);
}
.visite.est-revele .visite__mot span { opacity: 1; transform: none; }
.visite__mot span:hover { color: var(--blush); }

.visite__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: start;
}
.visite__adresse {
    font-family: var(--serif);
    font-style: normal;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.15;
    margin-bottom: 1.4rem;
}
.visite__adresse span { letter-spacing: 0.08em; }
.visite__itineraire { max-width: 34ch; color: color-mix(in srgb, var(--paper) 68%, transparent); }
.visite__contact {
    margin-top: 1.6rem;
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    line-height: 2.4;
}
.visite__contact a { text-decoration: none; border-bottom: 1px solid var(--ink-hair); transition: border-color 0.4s var(--fondu); }
.visite__contact a:hover { border-color: var(--blush); }

.carnet__titre { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 0.7rem; }
.carnet__dire { max-width: 38ch; color: color-mix(in srgb, var(--paper) 66%, transparent); margin-bottom: 1.8rem; }
.carnet__reponse {
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.4rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
}
.carnet__reponse--oui { background: var(--mint); color: var(--noir); }
.carnet__reponse--non { background: var(--blush); color: var(--noir); }

.carnet__form { display: grid; gap: 1.4rem; max-width: 30rem; }
.champ { display: grid; gap: 0.4rem; }
.champ label {
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 55%, transparent);
}
.champ input, .champ select {
    font: inherit;
    font-size: 1.02rem;
    color: var(--paper);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ink-hair);
    border-radius: 0;
    padding: 0.55rem 0;
    transition: border-color 0.4s var(--fondu);
}
.champ input::placeholder { color: rgba(246, 237, 225, 0.3); }
.champ input:focus, .champ select:focus { outline: none; border-bottom-color: var(--blush); }
.champ select option { background: var(--noir); color: var(--paper); }
.visite .bouton { justify-self: start; border-color: var(--paper); color: var(--noir); }
.visite .bouton::after { background: var(--paper); }
.visite .bouton--plein:hover { color: var(--paper); }

/* Vraiment caché, pas seulement hors écran : un champ hors écran reste « visible »
   pour la saisie automatique des navigateurs, qui le remplit. Les robots, eux,
   lisent le HTML sans appliquer cette feuille. */
.pot-de-miel { display: none; }

.visite__bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.8rem 2rem;
    margin-top: clamp(3rem, 9vh, 6rem);
    padding-top: 1.4rem;
    border-top: 1px solid var(--ink-hair);
    font-size: var(--t-caps);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 52%, transparent);
}
.visite__bas i { margin: 0 0.35em; }
.visite__remonter { text-decoration: none; }
.visite__remonter:hover { color: var(--blush); }

/* ==========================================================================
   14 · RÉGLAGES D'ÉCRAN
   ========================================================================== */

@media (max-width: 1080px) {
    .atelier {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: 'tete scene' 'dire scene' 'ticket ticket';
    }
    .ticket { justify-items: start; }
    .ticket__papier { transform: rotate(-1deg); }
    .planche__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .planche__folio { grid-column: 2; text-align: right; }
}

@media (max-width: 860px) {
    :root { --chapitre: clamp(3.5rem, 9vh, 6rem); }

    .maison__marge { display: none; }
    .maison__cornet { width: clamp(150px, 38vmin, 230px); }
    .sceau { left: 50%; transform: translateX(-50%); bottom: calc(var(--cadre) + 0.4rem); width: 76px; }
    .descendre { display: none; }
    .maison__accroche { margin-bottom: 5.5rem; }

    .manifeste__colonnes {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'dit' 'note' 'fiche';
        gap: 2.5rem;
    }
    .declaration { max-width: 13ch; }

    /* Le cornet reste collé en haut ; le texte doit commencer sous lui,
       sinon le titre du parfum se cache derrière la tour. */
    .tour__corps { grid-template-columns: minmax(0, 1fr); }
    .tour__scene { position: sticky; top: 0; height: 46svh; z-index: 3; }
    .tour__scene::after {
        content: '';
        position: absolute;
        inset: 0 -8vw -1.5rem;
        z-index: -1;
        background: linear-gradient(var(--scene) 82%, transparent);
    }
    .pile { height: 37svh; margin-top: 2.5rem; }
    .tour__compteur { bottom: 0.2rem; }
    .pas {
        min-height: 100svh;
        align-content: start;
        padding-top: calc(46svh + 1.75rem);
        padding-bottom: 2.5rem;
    }
    .pas__folio { font-size: clamp(2.4rem, 13vw, 4rem); }

    .nuancier__bandes { flex-direction: column; height: auto; gap: 3px; }
    .bande { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 1rem; min-height: 4.4rem; padding: 0.9rem 1rem; }
    .nuancier__bandes:hover .bande, .nuancier__bandes:focus-within .bande { flex-grow: 0; }
    .bande:hover, .bande:focus { flex-grow: 0; min-height: 13rem; }
    .bande__marque { writing-mode: horizontal-tb; align-self: flex-start; }
    .bande__note { inset: auto 1rem 5.5rem 1rem; }
    .bande__pied { margin-left: auto; text-align: right; }
    .bande__nom { margin-bottom: 0; }
    /* Repliée, la fiche ne doit pas gonfler la bande. */
    .bande__fiche { max-height: 0; overflow: hidden; transition: max-height 0.7s var(--glisse); }
    .bande:hover .bande__fiche, .bande:focus .bande__fiche { max-height: 9rem; }
    .bande:hover .bande__nom, .bande:focus .bande__nom { margin-bottom: 0.6rem; }
    .bande__fiche > div { justify-content: flex-end; }

    /* En mobile les parfums passent avant le cornet : on choisit d'abord,
       et la tour se remplit juste en dessous, sous les yeux. */
    .atelier {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'tete' 'dire' 'scene' 'ticket';
        align-items: start;
        gap: clamp(1.75rem, 5vh, 2.75rem);
    }
    /* Le haut du cadre SVG est la place réservée aux boules : on la resserre un peu. */
    .atelier__scene { margin-top: -2rem; }
    .cornet-vide { width: min(64%, 230px); }
    .ticket { justify-items: center; }

    .salon__grille { grid-template-columns: minmax(0, 1fr); }
    .salon__vitrine { max-width: 24rem; margin-inline: auto; }

    .visite__grille { grid-template-columns: minmax(0, 1fr); }
    .visite__mot { font-size: clamp(3.2rem, 21vw, 8rem); }
}

@media (max-width: 560px) {
    .chrome__folio-nom { display: none; }
    /* Le sceau et la pastille « Réserver » se disputent le bas de l'écran : le sceau cède. */
    .sceau { display: none; }
    .tache { filter: blur(30px); }
    .ruban__bande--encre { margin-top: -0.5rem; }
    .chrome__carnet { right: 50%; transform: translateX(50%); bottom: calc(var(--cadre) + 0.5rem); }
    .visite { padding-bottom: calc(var(--cadre) + 6rem); }
}

@media (hover: none) {
    .bande:hover { flex-grow: 1; }
    .bande:focus { flex-grow: 3.4; }
    .chip:hover { transform: none; }
}

/* ==========================================================================
   15 · MOUVEMENT RÉDUIT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Les délais aussi : sans ça, un tracé retardé de 2 s reste invisible pour toujours. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0.01ms !important;
    }
    .cornet__ligne { stroke-dashoffset: 0 !important; }
    .cornet__aplats { opacity: 0.92 !important; }
    .cornet__gouttes { opacity: 1 !important; }
    .overture { display: none; }
    .maison__lettre, .maison__sur, .maison__accroche, .sceau, .descendre,
    .overture__mot span, .overture__pied, .manifeste__note, .fiche, .visite__mot span {
        opacity: 1;
        filter: none;
        transform: none;
    }
    .declaration__mot > span { transform: none; }
    .tour--pret .boule__corps { opacity: 1; transform: rotate(var(--tour, 0deg)); }
    .atelier .boule__corps { animation: none; }
}