/* ==========================================================================
   VAMPS · « Messe noire »
   Noir abyssal, os, sang. Gothique de rue, encre rongée, contours qui
   bouillonnent. Titres en UnifrakturCook, texte en Geist Mono,
   le pacte en IM Fell English.
   Sommaire :
   1. Polices         2. Jetons           3. Base             4. Utilitaires
   5. Boutons         6. En-tête          7. Menu mobile      8. Lune
   9. Accueil        10. Produits        11. Fiche produit   12. Journal
  13. Commentaires   14. Formulaires     15. Pages           16. Pied de page
  17. Curseur        18. Révélations     19. Transitions     20. Mouvement réduit
   ========================================================================== */


/* 1. Polices (auto-hébergées)
   ========================================================================== */

@font-face {
    font-family: 'UnifrakturCook';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../polices/unifrakturcook-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../polices/geist-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../polices/geist-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IM Fell English';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../polices/im-fell-english-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IM Fell English';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../polices/im-fell-english-italique-latin.woff2') format('woff2');
}


/* 2. Jetons
   Les couleurs passent par light-dark() et suivent color-scheme :
   la nuit par défaut, le jour en « négatif » de photocopie.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Couleurs (contrastes WCAG AA vérifiés) */
    --couleur-fond: light-dark(#E8E4DC, #060506);
    --couleur-surface: light-dark(#DCD7CE, #0F0C0E);
    --couleur-surface-forte: light-dark(#CFC9BF, #19141A);
    --couleur-texte: light-dark(#070607, #E8E3D9);
    --couleur-texte-doux: light-dark(#55505A, #8E878B);
    --couleur-accent: light-dark(#9E0D1C, #EA3A4A);
    --couleur-sur-accent: light-dark(#E8E4DC, #060506);
    --couleur-sang: #8A0A16;
    --couleur-sur-sang: #E8E3D9;
    --couleur-or: var(--couleur-texte-doux);
    --couleur-plaque: var(--couleur-surface);
    --couleur-filet: color-mix(in oklab, var(--couleur-texte) 16%, transparent);
    --couleur-filet-fort: color-mix(in oklab, var(--couleur-texte) 36%, transparent);
    --couleur-voile: color-mix(in oklab, var(--couleur-fond) 84%, transparent);
    --couleur-vignette: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.62));

    /* Papier de photocopie sur lequel sont tirées les photos */
    --papier: #D9D3C8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");

    /* Typographie fluide (320 px à 1920 px) */
    --police-titre: 'UnifrakturCook', 'Old English Text MT', 'Times New Roman', serif;
    --police-texte: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --texte-xs: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
    --texte-s: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --texte-m: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
    --texte-l: clamp(1rem, 0.94rem + 0.35vw, 1.25rem);
    --titre-s: clamp(1.75rem, 1.45rem + 1.4vw, 2.625rem);
    --titre-m: clamp(2.5rem, 1.8rem + 3.2vw, 4.75rem);
    --titre-l: clamp(3.25rem, 2rem + 5.8vw, 8rem);
    --titre-xl: clamp(4rem, 1.5rem + 11.5vw, 14rem);
    --interligne: 1.65;
    --interligne-serre: 0.95;
    --approche-capitales: 0.16em;

    /* Espacements et grille 12 colonnes */
    --espace-1: 0.25rem;
    --espace-2: 0.5rem;
    --espace-3: 0.75rem;
    --espace-4: 1rem;
    --espace-5: 1.5rem;
    --espace-6: 2rem;
    --espace-7: 3rem;
    --espace-8: clamp(3rem, 2rem + 4vw, 6rem);
    --espace-9: clamp(5rem, 3rem + 8vw, 11rem);
    --marge: clamp(1rem, 0.4rem + 3vw, 4rem);
    --goutiere: clamp(1rem, 0.6rem + 1.4vw, 2rem);
    --largeur-max: 1680px;
    --largeur-texte: 66ch;
    --hauteur-entete: 4.5rem;

    /* Formes : aucun arrondi, tout est tranché */
    --rayon-s: 0;
    --rayon-pilule: 0;
    --ombre-douce: 0 2.5rem 5rem -2rem rgb(0 0 0 / 0.7);

    /* Mouvement */
    --duree-rapide: 160ms;
    --duree-moyenne: 380ms;
    --duree-lente: 850ms;
    --courbe-sortie: cubic-bezier(0.16, 1, 0.3, 1);
    --courbe-douce: cubic-bezier(0.65, 0, 0.35, 1);
    --courbe-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root.mode-jour { color-scheme: light; }
:root.mode-nuit { color-scheme: dark; }

/* Navigateurs sans light-dark() : la nuit, toujours */
@supports not (color: light-dark(#000, #fff)) {
    :root {
        --couleur-fond: #060506;
        --couleur-surface: #0F0C0E;
        --couleur-surface-forte: #19141A;
        --couleur-texte: #E8E3D9;
        --couleur-texte-doux: #8E878B;
        --couleur-accent: #EA3A4A;
        --couleur-sur-accent: #060506;
        --couleur-vignette: rgb(0 0 0 / 0.62);
    }
}


/* 3. Base
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--hauteur-entete) + var(--espace-4));
    scrollbar-color: var(--couleur-sang) var(--couleur-fond);
    scrollbar-width: thin;
}

body {
    margin: 0;
    min-height: 100svh;
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: var(--police-texte);
    font-size: var(--texte-m);
    font-weight: 400;
    line-height: var(--interligne);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    transition: background-color var(--duree-moyenne) var(--courbe-douce), color var(--duree-moyenne) var(--courbe-douce);
}

/* Vignette : les bords de l'écran s'enfoncent dans le noir */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 89;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, var(--couleur-vignette) 100%);
}

/* Grain argentique lourd, qui grouille */
body::after {
    content: '';
    position: fixed;
    inset: -50%;
    z-index: 90;
    pointer-events: none;
    opacity: 0.11;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    animation: grouiller 0.9s steps(5) infinite;
}

@keyframes grouiller {
    0% { translate: 0 0; }
    20% { translate: -4% 3%; }
    40% { translate: 3% -5%; }
    60% { translate: -6% -2%; }
    80% { translate: 5% 4%; }
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--police-titre);
    font-weight: 700;
    line-height: var(--interligne-serre);
    letter-spacing: 0;
    text-wrap: balance;
}

/* La gothique n'a pas d'italique : l'emphase saigne en rouge */
h1 em, h2 em, h3 em, .heros__phrase em { font-style: normal; color: var(--couleur-accent); }

p { margin: 0; text-wrap: pretty; }

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    transition: color var(--duree-rapide) var(--courbe-douce);
}

img, svg, video, picture { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

:where(ul, ol)[role='list'] { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--couleur-sang); color: var(--couleur-sur-sang); }

:focus-visible {
    outline: 2px solid var(--couleur-accent);
    outline-offset: 3px;
}

.principal {
    display: block;
    padding-top: var(--hauteur-entete);
    outline: none;
}

.principal:has(> .heros) { padding-top: 0; }

.filtres-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Encre rongée sur les grands titres (grands écrans : le filtre coûte cher
   à calculer sur un téléphone), contours bouillonnants sur les géants */
@media (min-width: 1024px) and (hover: hover) {
    .page-entete__titre,
    .fiche-produit__titre,
    .article__titre,
    .page-simple__titre,
    .contact__titre,
    .commerce__titre,
    .vitrine__titre,
    .erreur-404__titre,
    .heros__phrase { filter: url('#vamps-encre'); }
}

.erreur-404__code { filter: url('#vamps-torsion'); }


/* 4. Utilitaires
   ========================================================================== */

.visuellement-cache,
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lien-evitement {
    position: fixed;
    top: var(--espace-3);
    left: var(--espace-3);
    z-index: 200;
    padding: var(--espace-3) var(--espace-5);
    background: var(--couleur-sang);
    color: var(--couleur-sur-sang);
    font-size: var(--texte-s);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--approche-capitales);
    translate: 0 -200%;
    transition: translate var(--duree-moyenne) var(--courbe-sortie);
}

.lien-evitement:focus { translate: 0 0; }

.screen-reader-text:focus {
    top: var(--espace-3);
    left: var(--espace-3);
    z-index: 200;
    width: auto;
    height: auto;
    padding: var(--espace-3) var(--espace-5);
    clip-path: none;
    background: var(--couleur-sang);
    color: var(--couleur-sur-sang);
}

.conteneur {
    width: min(100% - 2 * var(--marge), var(--largeur-max));
    margin-inline: auto;
}

.surtitre {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-3);
    margin: 0 0 var(--espace-5);
    font-family: var(--police-texte);
    font-size: var(--texte-xs);
    font-weight: 500;
    letter-spacing: var(--approche-capitales);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
}

/* La croix : seule touche de rouge de la plupart des écrans */
.surtitre::before { content: '†'; font-size: 1.35em; line-height: 1; color: var(--couleur-accent); }

.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
    font-size: var(--texte-xs);
    font-weight: 500;
    letter-spacing: var(--approche-capitales);
    text-decoration: none;
    text-transform: uppercase;
    padding-block: var(--espace-2);
    background: linear-gradient(var(--couleur-accent), var(--couleur-accent)) 0 100% / 0 1px no-repeat;
    transition: background-size var(--duree-moyenne) var(--courbe-sortie), color var(--duree-rapide) var(--courbe-douce);
}

.lien-fleche:hover { background-size: 100% 1px; color: var(--couleur-accent); }

.lien-fleche .icone { width: 1.1em; height: 1.1em; transition: translate var(--duree-moyenne) var(--courbe-sortie); }

.lien-fleche:hover .icone { translate: 0.25em 0; }

/* Logo à l'encre : un masque qui prend la couleur du texte */
.logo-encre {
    display: block;
    aspect-ratio: 745 / 282;
    background-color: currentColor;
    -webkit-mask: url('../images/logo-encre.webp') center / contain no-repeat;
    mask: url('../images/logo-encre.webp') center / contain no-repeat;
}

.icone { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

@keyframes tressaillir {
    0% { translate: 2px -1px; }
    33% { translate: -2px 1px; }
    66% { translate: 1px 1px; }
    100% { translate: 0 0; }
}


/* 5. Boutons : tranchés, mono, ils saignent au survol
   ========================================================================== */

.bouton {
    --bouton-fond: transparent;
    --bouton-texte: var(--couleur-texte);
    --bouton-bord: var(--couleur-filet-fort);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-3);
    min-height: 3.25rem;
    padding: 0 var(--espace-6);
    border: 1px solid var(--bouton-bord);
    background: var(--bouton-fond);
    color: var(--bouton-texte);
    font-family: var(--police-texte);
    font-size: var(--texte-xs);
    font-weight: 500;
    letter-spacing: var(--approche-capitales);
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--duree-moyenne) var(--courbe-sortie), border-color var(--duree-moyenne) var(--courbe-sortie), translate var(--duree-lente) var(--courbe-sortie), scale var(--duree-rapide) var(--courbe-douce);
}

/* Le sang monte d'un coup, en biais */
.bouton::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: var(--couleur-sang);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path var(--duree-moyenne) var(--courbe-sortie);
}

.bouton:hover::before,
.bouton:focus-visible::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

.bouton:hover,
.bouton:focus-visible { --bouton-texte: var(--couleur-sur-sang); --bouton-bord: var(--couleur-sang); }

.bouton:hover .bouton__texte { animation: tressaillir 0.24s steps(3) 1; }

.bouton:active { scale: 0.97; }

.bouton .icone { width: 1.1em; height: 1.1em; transition: translate var(--duree-moyenne) var(--courbe-sortie); }

.bouton:hover .icone { translate: 0.25em 0; }

.bouton--principal { --bouton-fond: var(--couleur-texte); --bouton-texte: var(--couleur-fond); --bouton-bord: var(--couleur-texte); }

.bouton--contour { --bouton-fond: transparent; }

.bouton--large { width: 100%; min-height: 3.75rem; }

.bouton:disabled,
.bouton[aria-disabled='true'] { opacity: 0.4; cursor: not-allowed; }

.bouton:disabled::before { display: none; }

.bouton__texte { position: relative; display: inline-block; }

.bouton-icone {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    transition: color var(--duree-rapide) var(--courbe-douce);
}

.bouton-icone:hover { color: var(--couleur-accent); }


/* 6. En-tête
   ========================================================================== */

.entete {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    color: var(--couleur-texte);
    view-transition-name: entete;
    transition: translate var(--duree-lente) var(--courbe-sortie), background-color var(--duree-moyenne) var(--courbe-douce), box-shadow var(--duree-moyenne) var(--courbe-douce);
}

/* Au-dessus de la scène d'accueil, l'en-tête reste de nuit */
body:has(.heros) .entete:not(.entete--defile) { color-scheme: dark; }

.entete--defile {
    background: var(--couleur-voile);
    -webkit-backdrop-filter: blur(14px) saturate(0.6);
    backdrop-filter: blur(14px) saturate(0.6);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--couleur-sang) 70%, transparent);
}

.entete--masquee { translate: 0 -100%; }

.entete__barre {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--espace-5);
    height: var(--hauteur-entete);
    padding-inline: var(--marge);
}

.entete__logo { display: block; width: clamp(5.5rem, 4.6rem + 3vw, 7.25rem); color: inherit; transition: color var(--duree-rapide) var(--courbe-douce); }

.entete__logo:hover { color: var(--couleur-accent); animation: tressaillir 0.24s steps(3) 1; }

.entete__logo-visuel--image { width: 100%; height: auto; }

.entete__nav { display: none; justify-self: center; }

.navigation__liste { display: flex; gap: clamp(1.25rem, 0.5rem + 2vw, 3rem); margin: 0; padding: 0; list-style: none; }

.navigation__lien {
    position: relative;
    display: inline-block;
    padding: var(--espace-2) 0;
    font-size: var(--texte-xs);
    font-weight: 500;
    letter-spacing: var(--approche-capitales);
    text-transform: uppercase;
    text-decoration: none;
}

/* Au survol, un trait rouge raye le mot */
.navigation__lien::after {
    content: '';
    position: absolute;
    left: -0.2em;
    right: -0.2em;
    top: 52%;
    height: 1px;
    background: var(--couleur-accent);
    scale: 0 1;
    transform-origin: right;
    transition: scale var(--duree-moyenne) var(--courbe-sortie);
}

.navigation__lien:hover::after { scale: 1 1; transform-origin: left; }

.navigation__element--actif > .navigation__lien { color: var(--couleur-accent); }

.navigation__element--actif > .navigation__lien::before {
    content: '†';
    position: absolute;
    left: 50%;
    bottom: -0.9rem;
    translate: -50% 0;
    font-size: 0.8rem;
    color: var(--couleur-accent);
}

.entete__actions { display: flex; align-items: center; gap: var(--espace-1); justify-self: end; }

.entete__compte {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
    min-height: 2.75rem;
    padding: 0 var(--espace-3);
    font-size: var(--texte-xs);
    font-weight: 500;
    letter-spacing: var(--approche-capitales);
    text-transform: uppercase;
    text-decoration: none;
}

.entete__compte:hover { color: var(--couleur-accent); }

/* Sur mobile, le libellé reste lu par les lecteurs d'écran */
.entete__compte-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.bouton-theme__icone { grid-area: 1 / 1; display: grid; transition: opacity var(--duree-moyenne) var(--courbe-sortie), rotate var(--duree-lente) var(--courbe-sortie), scale var(--duree-lente) var(--courbe-sortie); }

.bouton-theme__icone--soleil,
.mode-nuit .bouton-theme__icone--lune { opacity: 0; rotate: -90deg; scale: 0.5; }

.mode-nuit .bouton-theme__icone--soleil { opacity: 1; rotate: 0deg; scale: 1; }

.panier-lien { color: inherit; }

.panier-lien__compteur {
    position: absolute;
    top: 0.3rem;
    right: 0.15rem;
    display: grid;
    place-items: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    background: var(--couleur-sang);
    color: var(--couleur-sur-sang);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
}

.bouton-menu {
    display: inline-grid;
    place-content: center;
    gap: 6px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.bouton-menu__trait { display: block; width: 1.5rem; height: 1px; background: currentColor; transition: width var(--duree-moyenne) var(--courbe-sortie); }

.bouton-menu__trait:last-of-type { width: 1rem; justify-self: end; background: var(--couleur-accent); }

.bouton-menu:hover .bouton-menu__trait:last-of-type { width: 1.5rem; }

@media (min-width: 640px) {
    .entete__compte-texte { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

@media (min-width: 900px) {
    .entete__nav { display: block; }
    .bouton-menu { display: none; }
}


/* 7. Menu mobile (élément <dialog> : focus piégé et Échap natifs)
   ========================================================================== */

.menu-mobile {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: opacity var(--duree-moyenne) var(--courbe-douce), clip-path var(--duree-lente) var(--courbe-sortie), overlay var(--duree-moyenne) allow-discrete, display var(--duree-moyenne) allow-discrete;
}

.menu-mobile[open] { opacity: 1; clip-path: inset(0 0 0 0); }

@starting-style {
    .menu-mobile[open] { opacity: 0; clip-path: inset(0 0 100% 0); }
}

.menu-mobile::backdrop { background: transparent; }

.menu-mobile__panneau {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    padding: 0 var(--marge) var(--espace-6);
    background: radial-gradient(circle at 80% 110%, color-mix(in oklab, var(--couleur-sang) 35%, transparent), transparent 55%);
}

.menu-mobile__haut { display: flex; align-items: center; justify-content: space-between; height: var(--hauteur-entete); }

.menu-mobile__logo { width: 5.5rem; }

.menu-mobile__nav { align-self: center; }

.menu-mobile__liste { margin: 0; padding: 0; list-style: none; counter-reset: rubrique; }

.menu-mobile__element { counter-increment: rubrique; border-bottom: 1px solid var(--couleur-filet); }

.menu-mobile__lien {
    display: flex;
    align-items: baseline;
    gap: var(--espace-4);
    padding: var(--espace-3) 0;
    font-family: var(--police-titre);
    font-size: clamp(2.75rem, 2rem + 7vw, 4.75rem);
    line-height: 1.05;
    text-decoration: none;
}

.menu-mobile__lien::before {
    content: counter(rubrique, upper-roman) '.';
    min-width: 2.5rem;
    font-family: var(--police-texte);
    font-size: var(--texte-xs);
    letter-spacing: var(--approche-capitales);
    color: var(--couleur-texte-doux);
}

.menu-mobile__element--actif .menu-mobile__lien { color: var(--couleur-accent); }

.menu-mobile[open] .menu-mobile__element { opacity: 1; translate: 0 0; transition: opacity var(--duree-lente) var(--courbe-sortie), translate var(--duree-lente) var(--courbe-sortie); }

@starting-style {
    .menu-mobile[open] .menu-mobile__element { opacity: 0; translate: -1.5rem 0; }
}

.menu-mobile__element:nth-child(2) { transition-delay: 60ms; }
.menu-mobile__element:nth-child(3) { transition-delay: 120ms; }
.menu-mobile__element:nth-child(4) { transition-delay: 180ms; }
.menu-mobile__element:nth-child(5) { transition-delay: 240ms; }
.menu-mobile__element:nth-child(6) { transition-delay: 300ms; }

.menu-mobile__pied { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--espace-5); }

.menu-mobile__comptes { display: flex; flex-direction: column; gap: var(--espace-2); }

.menu-mobile__compte { font-size: var(--texte-xs); text-decoration: none; letter-spacing: var(--approche-capitales); text-transform: uppercase; }

.menu-mobile__compte:hover { color: var(--couleur-accent); }


/* 8. Lune (phase réelle calculée en JS)
   ========================================================================== */

.lune { display: inline-flex; align-items: center; gap: var(--espace-3); }

.lune[hidden] { display: none; }

.lune__visuel { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }

.lune__disque { fill: color-mix(in oklab, var(--couleur-texte) 8%, transparent); stroke: color-mix(in oklab, var(--couleur-accent) 55%, transparent); stroke-width: 2; }

.lune__lumiere { fill: var(--couleur-texte); }

.lune__texte { display: flex; flex-direction: column; font-size: var(--texte-xs); line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--couleur-texte-doux); }

.lune__heure { color: var(--couleur-texte); font-variant-numeric: tabular-nums; }


/* 9. Accueil
   ========================================================================== */

/* 9.1 La scène : le logo se recompose et saigne dans la brume,
   le défilement le fait éclater. */
.heros {
    --progression: 0;
    position: relative;
    height: 100svh;
    color-scheme: dark;
    background: #060506;
    color: var(--couleur-texte);
}

/* La course de défilement n'existe que si le JavaScript pilote la scène */
.js .heros { height: 160svh; }

/* Une lueur rouge à peine visible, immobile, derrière le logo */
.heros__scene {
    position: sticky;
    top: 0;
    display: grid;
    place-items: center;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse 70% 55% at 50% 45%, #1A070C 0, #060506 70%);
}

/* Vignette lourde par-dessus la scène */
.heros__scene::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgb(0 0 0 / 0.8) 100%);
}

/* Brume qui rampe au ras du sol */
.heros__brume {
    --hauteur-brume: 48svh;
    --format-brume: 3;
    position: absolute;
    inset: auto 0 0;
    z-index: 0;
    height: var(--hauteur-brume);
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, #000 30%, transparent);
    mask-image: linear-gradient(to top, #000 30%, transparent);
    opacity: calc(0.75 - var(--progression) * 0.5);
}

/* Deux tuiles côte à côte, chacune garde à peu près le format 3:1 de la
   brume : sur un écran étroit elle déborde en largeur au lieu de s'écraser */
.heros__nappe {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(2 * max(100vw, var(--hauteur-brume) * var(--format-brume)));
    background: url('../images/brume.webp') repeat-x left bottom / 50% 100%;
    animation: deriver 70s linear infinite;
}

.heros__nappe--lente { opacity: 0.6; scale: 1 1.3; transform-origin: bottom; animation-duration: 120s; animation-direction: reverse; }

@keyframes deriver { to { translate: -50% 0; } }

/* En portrait, une tuile un peu plus serrée montre plusieurs nuages à la fois */
@media (orientation: portrait) {
    .heros__brume { --hauteur-brume: 42svh; --format-brume: 2.2; opacity: calc(0.7 - var(--progression) * 0.45); }
}

.heros__titre { --largeur-logo: min(94vw, 74rem); position: relative; z-index: 1; margin: 0; width: var(--largeur-logo); }

@media (min-width: 640px) {
    .heros__titre { --largeur-logo: min(88vw, 74rem); }
}

/* Le double rouge suit la taille du logo ; la torsion fine sert aux petits écrans */
.heros__logo {
    --double: max(2px, var(--largeur-logo) * 0.005);
    position: relative;
    display: block;
    aspect-ratio: 787 / 304;
    color: #E8E3D9;
    scale: calc(1 + var(--progression) * 0.25);
    filter: url('#vamps-torsion-fine') drop-shadow(var(--double) 0 0 rgb(234 58 74 / 0.55));
    will-change: transform;
}

@media (min-width: 900px) {
    .heros__logo { filter: url('#vamps-torsion') drop-shadow(var(--double) 0 0 rgb(234 58 74 / 0.55)); }
}

.heros--defile .heros__logo { filter: drop-shadow(var(--double) 0 0 rgb(234 58 74 / 0.5)); }

.heros__fragment {
    --dx: 0vw;
    --dy: 0svh;
    --rot: 0deg;
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask: var(--masque) center / 100% 100% no-repeat;
    mask: var(--masque) center / 100% 100% no-repeat;
    transform: translate(calc(var(--dx) * var(--progression)), calc(var(--dy) * var(--progression))) rotate(calc(var(--rot) * var(--progression)));
    opacity: calc(1 - var(--progression) * 1.6);
    animation: assembler 1.05s var(--courbe-ressort) backwards;
    animation-delay: calc(0.3s + var(--rang) * 0.07s);
    will-change: transform, opacity;
}

.heros__fragment--1 { --masque: url('../images/fragment-1.webp'); --dx: -42vw; --dy: -36svh; --rot: -18deg; --ix: -22vw; --iy: -18svh; --rang: 0; }
.heros__fragment--2 { --masque: url('../images/fragment-2.webp'); --dx: 8vw; --dy: -48svh; --rot: 8deg; --ix: 6vw; --iy: -26svh; --rang: 2; }
.heros__fragment--3 { --masque: url('../images/fragment-3.webp'); --dx: -6vw; --dy: 44svh; --rot: 14deg; --ix: -3vw; --iy: 24svh; --rang: 4; }
.heros__fragment--4 { --masque: url('../images/fragment-4.webp'); --dx: 44vw; --dy: -30svh; --rot: 16deg; --ix: 22vw; --iy: -16svh; --rang: 1; }
.heros__fragment--5 { --masque: url('../images/fragment-5.webp'); --dx: -38vw; --dy: 38svh; --rot: -10deg; --ix: -20vw; --iy: 20svh; --rang: 3; }
.heros__fragment--6 { --masque: url('../images/fragment-6.webp'); --dx: 38vw; --dy: 42svh; --rot: 20deg; --ix: 20vw; --iy: 22svh; --rang: 5; }

@keyframes assembler {
    from { translate: var(--ix) var(--iy); rotate: 25deg; opacity: 0; }
    60% { opacity: 1; }
}

/* Le logo saigne : des coulures naissent sous les pointes des lettres */
.heros__sang { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--progression) * 3); }

.heros__goutte {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 0.6%;
    height: 0;
    translate: -50% -12%;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(#4A030A, #A3101C);
    opacity: 0;
    animation: couler var(--duree) cubic-bezier(0.45, 0, 0.55, 1) var(--delai) infinite both;
}

/* La goutte qui se détache et tombe */
.heros__goutte::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 180%;
    aspect-ratio: 0.78;
    translate: -50% -60%;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 40% 30%, #D0343C, var(--couleur-sang) 70%);
    opacity: 0;
    scale: 0;
    animation: tomber var(--duree) linear var(--delai) infinite both;
}

.heros__goutte--1 { --x: 20.3%; --y: 95.7%; --longueur: 19%; --duree: 20s; --delai: 4.5s; }
.heros__goutte--2 { --x: 37.4%; --y: 89.8%; --longueur: 15%; --duree: 23s; --delai: 8s; }
.heros__goutte--3 { --x: 84%; --y: 84.2%; --longueur: 17%; --duree: 21s; --delai: 11.5s; }
.heros__goutte--4 { --x: 8.9%; --y: 90.8%; --longueur: 12%; --duree: 25s; --delai: 15s; }
.heros__goutte--5 { --x: 49.3%; --y: 78.9%; --longueur: 10%; --duree: 24s; --delai: 19s; }
.heros__goutte--6 { --x: 29.4%; --y: 79.3%; --longueur: 8%; --duree: 27s; --delai: 23s; }

/* Le sang suinte d'abord, très lentement, puis s'immobilise et sèche */
@keyframes couler {
    0% { height: 0; opacity: 0; }
    5% { opacity: 1; }
    50% { height: var(--longueur); }
    88% { height: var(--longueur); opacity: 1; }
    100% { height: var(--longueur); opacity: 0; }
}

/* La goutte se forme au bout de la coulure, s'alourdit, puis se détache */
@keyframes tomber {
    0%, 42% { translate: -50% -60%; opacity: 0; scale: 0; }
    56% { translate: -50% -45%; opacity: 1; scale: 0.85; }
    66% { translate: -50% -25%; scale: 1 1.18; }
    68% { scale: 1.08 0.92; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
    84% { translate: -50% 1000%; opacity: 0.85; scale: 0.8 1.25; }
    86%, 100% { translate: -50% 1000%; opacity: 0; scale: 0; }
}

.heros__phrase,
.heros__bas {
    position: absolute;
    z-index: 4;
    opacity: calc(1 - var(--progression) * 3.5);
    animation: apparaitre 1.2s var(--courbe-sortie) 1s backwards;
}

@keyframes apparaitre { from { opacity: 0; translate: 0 0.75rem; } }

.heros__phrase {
    left: var(--marge);
    bottom: calc(var(--espace-7) + 3rem);
    max-width: 12ch;
    font-family: var(--police-titre);
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
    line-height: 1;
    /* Halo noir serré : la brume s'assombrit juste derrière les lettres */
    text-shadow: 0 0 0.12em rgb(6 5 6 / 0.95), 0 0 0.35em rgb(6 5 6 / 0.9), 0 0.1em 0.9em rgb(6 5 6 / 0.85);
}

.heros__bas {
    left: var(--marge);
    right: var(--marge);
    bottom: var(--espace-6);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espace-4);
    /* Gris un peu plus clair qu'ailleurs : il doit rester AA par-dessus la brume */
    --couleur-texte-doux: #9C9598;
    text-shadow: 0 0 0.2em rgb(6 5 6), 0 0 0.5rem rgb(6 5 6 / 0.95), 0 0 1.2rem rgb(6 5 6 / 0.85);
}

.heros__indice {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-3);
    font-size: var(--texte-xs);
    letter-spacing: var(--approche-capitales);
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
}

.heros__indice-trait { position: relative; width: 3rem; height: 1px; overflow: hidden; background: var(--couleur-filet); }

.heros__indice-trait::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--couleur-accent);
    animation: glisser 2s var(--courbe-douce) infinite;
}

@keyframes glisser {
    from { translate: -100% 0; }
    to { translate: 100% 0; }
}

@media (min-width: 900px) {
    .heros__phrase { left: auto; right: var(--marge); bottom: calc(var(--espace-7) + 2.5rem); text-align: right; font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem); }
}

/* Téléphone à l'horizontale : le logo se règle sur la hauteur, le slogan
   tient sur une ligne en bas à droite, rien ne se chevauche */
@media (orientation: landscape) and (max-height: 540px) {
    .heros__titre { --largeur-logo: min(88vw, 74rem, (100svh - 10rem) * 2.59); }
    .heros__brume { opacity: calc(0.6 - var(--progression) * 0.4); }
    .heros__indice { display: none; }
    .heros__phrase { left: auto; right: var(--marge); bottom: calc(var(--espace-6) + 0.5rem); max-width: none; font-size: clamp(1.125rem, 0.8rem + 1.4vw, 1.5rem); text-align: right; }
}

/* 9.2 Le pacte : un carton de film muet, cadre double et lettrine */
.manifeste { padding-block: var(--espace-9); }

.manifeste__carton {
    position: relative;
    max-width: 56rem;
    margin-inline: auto;
    padding: clamp(2.75rem, 1.5rem + 5vw, 6rem) clamp(1.5rem, 0.75rem + 4.5vw, 5.5rem);
    border: 1px solid var(--couleur-filet-fort);
    outline: 1px solid var(--couleur-filet);
    outline-offset: -0.75rem;
    background: radial-gradient(ellipse at center, color-mix(in oklab, var(--couleur-sang) 14%, var(--couleur-fond)) 0, var(--couleur-fond) 72%);
    text-align: center;
}

.manifeste__carton::before,
.manifeste__carton::after {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    padding: 0 var(--espace-4);
    background: var(--couleur-fond);
    color: var(--couleur-accent);
    font-size: 1.5rem;
    line-height: 1;
}

.manifeste__carton::before { content: '\2720'; top: -0.75rem; }

.manifeste__carton::after { content: '\2766'; bottom: -0.75rem; rotate: 180deg; translate: 50% 0; }

.manifeste__surtitre { margin-bottom: var(--espace-6); font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); }

.manifeste__texte {
    max-width: 34ch;
    margin-inline: auto;
    font-family: 'IM Fell English', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    font-size: clamp(1.5rem, 1rem + 1.8vw, 2.375rem);
    font-style: italic;
    line-height: 1.38;
    text-align: left;
}

/* Lettrine : une capitale droite et lisible, os sur sang */
.manifeste__texte::first-letter {
    float: left;
    margin: 0.12em 0.32em 0 0;
    padding: 0.14em 0.2em 0.06em;
    border: 1px solid color-mix(in oklab, #EFE6D6 45%, transparent);
    background: radial-gradient(circle at 40% 35%, #A3101C, var(--couleur-sang) 70%);
    color: #EFE6D6;
    font-size: 2.9em;
    font-style: normal;
    line-height: 0.9;
}

/* Le premier mot (et sa lettrine) n'est jamais éteint */
.manifeste__texte .manifeste__mot:first-child { opacity: 1; }

.manifeste__texte a { color: var(--couleur-accent); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 95% / 100% 1px no-repeat; }

.manifeste__texte a:hover { color: var(--couleur-texte); }

/* 0.45 : même éteint, un mot garde le contraste AA des grands textes (3:1) */
.manifeste__mot { opacity: 0.45; transition: opacity 0.7s var(--courbe-douce); }

.manifeste__texte a .manifeste__mot { opacity: 0.82; }

.manifeste__mot--allume,
.manifeste__texte a .manifeste__mot--allume { opacity: 1; }

.manifeste__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espace-4); margin-top: var(--espace-7); }

/* 9.3 Vitrine */
.vitrine { padding-block: var(--espace-8) var(--espace-9); }

.vitrine__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--espace-5);
    padding-bottom: var(--espace-5);
    margin-bottom: var(--espace-7);
    border-bottom: 1px solid var(--couleur-filet);
}

.vitrine__titre { font-size: var(--titre-l); }

.vitrine__liste { display: grid; gap: var(--espace-7) var(--goutiere); margin: 0; padding: 0; list-style: none; counter-reset: piece; }

.vitrine__element { counter-increment: piece; }

@media (min-width: 640px) {
    .vitrine__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .vitrine__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; column-gap: clamp(1.5rem, 3vw, 4rem); }
    .vitrine__element:nth-child(2) { margin-top: var(--espace-9); }
    .vitrine__element:nth-child(3) { margin-top: var(--espace-8); }
}


/* 10. Produits
   ========================================================================== */

.page-entete { position: relative; padding-block: var(--espace-8) var(--espace-7); }

.page-entete__titre { font-size: var(--titre-xl); line-height: 0.85; }

.page-entete--recherche .page-entete__titre { font-size: var(--titre-l); }

.page-entete__compte { margin-top: var(--espace-5); font-size: var(--texte-xs); letter-spacing: var(--approche-capitales); text-transform: uppercase; color: var(--couleur-texte-doux); font-variant-numeric: tabular-nums; }

.page-entete__description { margin-top: var(--espace-5); max-width: 56ch; color: var(--couleur-texte-doux); }

.page-entete__recherche { margin-top: var(--espace-6); max-width: 32rem; }

.page-entete--video { overflow: hidden; color-scheme: dark; background: #060506; color: var(--couleur-texte); padding-block: var(--espace-9) var(--espace-8); }

.page-entete__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    mix-blend-mode: screen;

    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
    mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

.page-entete__contenu { position: relative; }

/* Couche à part : la vidéo dessous ne force plus le titre filtré à se repeindre */
.page-entete--video .page-entete__contenu { will-change: transform; }

.galerie-produits { padding-block: var(--espace-8) var(--espace-9); }

.galerie-produits__liste { display: grid; gap: var(--espace-8) var(--goutiere); margin: 0; padding: 0; list-style: none; counter-reset: piece; }

.galerie-produits__element { counter-increment: piece; }

@media (min-width: 640px) {
    .galerie-produits__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .galerie-produits__element:nth-child(even) { margin-top: var(--espace-8); }
}

@media (min-width: 1024px) {
    .galerie-produits__liste { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
    .galerie-produits__element { grid-column: span 4; }
    .galerie-produits__element:nth-child(even) { margin-top: 0; }
    /* Rythme éditorial sur un cycle de six pièces */
    .galerie-produits__element:nth-child(6n + 1) { grid-column: 1 / span 6; }
    .galerie-produits__element:nth-child(6n + 2) { grid-column: 8 / span 5; margin-top: 18%; }
    .galerie-produits__element:nth-child(6n + 3) { grid-column: 2 / span 4; }
    .galerie-produits__element:nth-child(6n + 4) { grid-column: 6 / span 3; margin-top: 30%; }
    .galerie-produits__element:nth-child(6n + 5) { grid-column: 9 / span 4; margin-top: 10%; }
    .galerie-produits__element:nth-child(6n + 6) { grid-column: 4 / span 6; }
}

.galerie-produits__vide { padding-block: var(--espace-8); font-family: var(--police-titre); font-size: var(--titre-s); }

/* Carte produit : un tirage photocopié aux bords déchirés, qui reprend
   ses couleurs au survol */
.carte-produit { container-type: inline-size; }

.carte-produit__lien { display: block; color: inherit; text-decoration: none; }

.carte-produit__media { position: relative; aspect-ratio: 4 / 5; }

.carte-produit__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 9%;
    background: var(--papier);
    -webkit-mask: url('../images/bord-dechire-1.webp') center / 100% 100% no-repeat;
    mask: url('../images/bord-dechire-1.webp') center / 100% 100% no-repeat;
    filter: grayscale(1) contrast(1.3) brightness(0.92);
    transition: filter var(--duree-lente) var(--courbe-sortie), scale 1.2s var(--courbe-sortie);
}

:is(.galerie-produits__element, .vitrine__element):nth-child(even) .carte-produit__image {
    -webkit-mask-image: url('../images/bord-dechire-2.webp');
    mask-image: url('../images/bord-dechire-2.webp');
}

.carte-produit__lien:hover .carte-produit__image,
.carte-produit__lien:focus-visible .carte-produit__image { filter: grayscale(0) contrast(1.06); scale: 1.02; }

.carte-produit__lien:hover .carte-produit__media { animation: tressaillir 0.24s steps(3) 1; }

/* Numéro de pièce, tamponné sur le tirage */
:is(.galerie-produits__element, .vitrine__element) .carte-produit__media::after {
    content: 'N°' counter(piece, decimal-leading-zero);
    position: absolute;
    left: 6%;
    bottom: 6%;
    padding: 0.2rem 0.45rem;
    background: #060506;
    color: #E8E3D9;
    font-family: var(--police-texte);
    font-size: 0.75rem;
    letter-spacing: var(--approche-capitales);
}

.carte-produit__badge {
    position: absolute;
    top: 7%;
    left: 4%;
    z-index: 1;
    padding: 0.3rem 0.7rem;
    background: var(--couleur-sang);
    color: var(--couleur-sur-sang);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--approche-capitales);
    text-transform: uppercase;
    rotate: -6deg;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.5);
}

/* Épuisé : un tampon à l'encre rouge */
.carte-produit__badge--epuise {
    left: auto;
    right: 6%;
    top: 40%;
    padding: 0.35rem 0.8rem;
    border: 2px solid #C8202F;
    background: transparent;
    color: #C8202F;
    font-size: 1rem;
    rotate: 12deg;
    box-shadow: none;
    mix-blend-mode: multiply;
}

.carte-produit__infos { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espace-4); margin-top: var(--espace-4); }

.carte-produit__titre {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    line-height: 1;
    transition: color var(--duree-rapide) var(--courbe-douce);
}

.carte-produit__lien:hover .carte-produit__titre { color: var(--couleur-accent); }

.carte-produit__prix { flex-shrink: 0; font-size: var(--texte-s); font-variant-numeric: tabular-nums; color: var(--couleur-texte-doux); }

.carte-produit__prix del { opacity: 0.6; margin-right: var(--espace-2); }

.carte-produit__prix ins { text-decoration: none; color: var(--couleur-accent); }

.carte-produit__extrait {
    margin-top: var(--espace-2);
    font-size: var(--texte-xs);
    color: var(--couleur-texte-doux);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@container (max-width: 20rem) {
    .carte-produit__infos { flex-direction: column; gap: var(--espace-1); }
}


/* 11. Fiche produit
   ========================================================================== */

.fil-ariane { display: flex; flex-wrap: wrap; gap: var(--espace-2); font-size: var(--texte-xs); letter-spacing: var(--approche-capitales); text-transform: uppercase; color: var(--couleur-texte-doux); }

.fil-ariane__lien { text-decoration: none; }

.fil-ariane__lien:hover { color: var(--couleur-accent); }

.fil-ariane__separateur { color: var(--couleur-accent); }

.fil-ariane__courant { color: var(--couleur-texte); }

.fiche-produit { display: grid; gap: var(--espace-7); padding-block: var(--espace-6) var(--espace-9); }

.fiche-produit__galerie {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    gap: var(--espace-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--marge) * -1);
    padding-inline: var(--marge);
}

.fiche-produit__galerie:has(> .fiche-produit__media:only-child) { grid-auto-columns: 100%; }

.fiche-produit__media { position: relative; margin: 0; aspect-ratio: 4 / 5; scroll-snap-align: center; }

.fiche-produit__media--principal { view-transition-name: produit-media; }

.fiche-produit__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7%;
    background: var(--papier);
    -webkit-mask: url('../images/bord-dechire-1.webp') center / 100% 100% no-repeat;
    mask: url('../images/bord-dechire-1.webp') center / 100% 100% no-repeat;
    filter: contrast(1.08) saturate(0.9);
}

.fiche-produit__media:nth-child(even) .fiche-produit__image { -webkit-mask-image: url('../images/bord-dechire-2.webp'); mask-image: url('../images/bord-dechire-2.webp'); }

.fiche-produit__infos { display: flex; flex-direction: column; gap: var(--espace-5); }

.fiche-produit__titre { font-size: var(--titre-m); line-height: 0.95; }

.fiche-produit__prix { font-size: var(--texte-l); font-variant-numeric: tabular-nums; }

.fiche-produit__prix del { opacity: 0.55; margin-right: var(--espace-2); }

.fiche-produit__prix ins { text-decoration: none; color: var(--couleur-accent); }

.fiche-produit__stock { display: inline-flex; align-items: center; gap: var(--espace-2); font-size: var(--texte-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--couleur-texte-doux); }

.fiche-produit__pastille { width: 0.5rem; height: 0.5rem; background: var(--couleur-texte); box-shadow: 0 0 0 0.25rem var(--couleur-filet); }

.fiche-produit__stock--epuise .fiche-produit__pastille { background: var(--couleur-accent); box-shadow: 0 0 0 0.25rem color-mix(in oklab, var(--couleur-accent) 25%, transparent); }

.fiche-produit__description { color: var(--couleur-texte-doux); padding-top: var(--espace-5); border-top: 1px solid var(--couleur-filet); }

.fiche-produit__formulaire { display: flex; flex-direction: column; gap: var(--espace-5); }

.fiche-produit__actions { display: grid; gap: var(--espace-3); }

.fiche-produit__garanties {
    display: grid;
    gap: var(--espace-2);
    padding-top: var(--espace-5);
    border-top: 1px solid var(--couleur-filet);
    font-size: var(--texte-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
}

.fiche-produit__garanties li { display: flex; gap: var(--espace-3); }

.fiche-produit__garanties li::before { content: '†'; color: var(--couleur-accent); }

@media (min-width: 768px) {
    .fiche-produit { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--goutiere); align-items: start; }
    .fiche-produit__galerie { grid-column: 1 / span 6; grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: var(--goutiere); }
    .fiche-produit__infos { grid-column: 7 / span 6; position: sticky; top: calc(var(--hauteur-entete) + var(--espace-6)); }
}

@media (min-width: 1024px) {
    .fiche-produit__galerie { grid-column: 1 / span 7; }
    .fiche-produit__infos { grid-column: 9 / span 4; }
}

.choix-taille { margin: 0; padding: 0; border: 0; min-width: 0; }

.choix-taille__legende { margin-bottom: var(--espace-3); padding: 0; font-size: var(--texte-xs); font-weight: 500; letter-spacing: var(--approche-capitales); text-transform: uppercase; color: var(--couleur-texte-doux); }

.choix-taille__options { display: flex; flex-wrap: wrap; gap: var(--espace-2); }

.choix-taille__option { position: relative; }

.choix-taille__entree { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.choix-taille__libelle {
    display: grid;
    place-items: center;
    min-width: 3.25rem;
    height: 3.25rem;
    padding: 0 var(--espace-3);
    border: 1px solid var(--couleur-filet-fort);
    font-size: var(--texte-s);
    font-weight: 500;
    text-transform: uppercase;
    transition: background-color var(--duree-rapide) var(--courbe-douce), color var(--duree-rapide) var(--courbe-douce), border-color var(--duree-rapide) var(--courbe-douce);
}

.choix-taille__option:hover .choix-taille__libelle { border-color: var(--couleur-accent); color: var(--couleur-accent); }

.choix-taille__entree:checked + .choix-taille__libelle { background: var(--couleur-sang); color: var(--couleur-sur-sang); border-color: var(--couleur-sang); }

.choix-taille__entree:focus-visible + .choix-taille__libelle { outline: 2px solid var(--couleur-accent); outline-offset: 3px; }

.choix-taille__entree:disabled { cursor: not-allowed; }

.choix-taille__entree:disabled + .choix-taille__libelle { opacity: 0.35; text-decoration: line-through; text-decoration-color: var(--couleur-accent); }

.choix-taille__aide { margin-top: var(--espace-3); font-size: var(--texte-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--couleur-accent); }

.choix-taille--erreur .choix-taille__libelle { border-color: var(--couleur-accent); animation: tressaillir 0.3s steps(3) 2; }


/* 12. Journal
   ========================================================================== */

.liste-articles { padding-block: var(--espace-6) var(--espace-9); }

.liste-articles__grille { display: grid; gap: var(--espace-8) var(--goutiere); }

@media (min-width: 640px) {
    .liste-articles__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .liste-articles__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .liste-articles__element:nth-child(3n + 2) { margin-top: var(--espace-8); }
}

.liste-articles__vide { display: grid; justify-items: start; gap: var(--espace-4); padding-block: var(--espace-7); font-size: var(--texte-l); text-transform: uppercase; }

.carte-article__lien { display: block; color: inherit; text-decoration: none; }

.carte-article__media { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; }

.carte-article__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--papier);
    -webkit-mask: url('../images/bord-dechire-2.webp') center / 100% 100% no-repeat;
    mask: url('../images/bord-dechire-2.webp') center / 100% 100% no-repeat;
    filter: grayscale(1) contrast(1.35) brightness(0.88);
    transition: filter var(--duree-lente) var(--courbe-sortie), scale 1.2s var(--courbe-sortie);
}

.carte-article__lien:hover .carte-article__image { filter: grayscale(0.2) contrast(1.1); scale: 1.02; }

.carte-article__vide { width: 40%; color: var(--couleur-filet-fort); }

.carte-article__corps { display: grid; gap: var(--espace-2); margin-top: var(--espace-4); }

.carte-article__type { font-size: var(--texte-xs); letter-spacing: var(--approche-capitales); text-transform: uppercase; color: var(--couleur-accent); }

.carte-article__titre { font-size: var(--titre-s); transition: color var(--duree-rapide) var(--courbe-douce); }

.carte-article__lien:hover .carte-article__titre { color: var(--couleur-accent); }

.carte-article__extrait { font-size: var(--texte-s); color: var(--couleur-texte-doux); }

.carte-article__date { font-size: var(--texte-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--couleur-texte-doux); }

.meta-article { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espace-2); font-size: var(--texte-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--couleur-texte-doux); }

.meta-article__separateur { color: var(--couleur-accent); }

.article__entete { display: grid; justify-items: center; gap: var(--espace-5); max-width: 66rem; padding-block: var(--espace-8) var(--espace-7); text-align: center; }

.article__titre { font-size: var(--titre-l); line-height: 0.95; }

.article__media { margin-block: 0 var(--espace-8); max-width: 75rem; }

.article__image {
    width: 100%;
    max-height: 80svh;
    object-fit: cover;
    background: var(--papier);
    -webkit-mask: url('../images/bord-dechire-1.webp') center / 100% 100% no-repeat;
    mask: url('../images/bord-dechire-1.webp') center / 100% 100% no-repeat;
    filter: grayscale(0.4) contrast(1.15);
}

.article__contenu,
.page-simple__contenu { width: min(100% - 2 * var(--marge), var(--largeur-texte)); margin-inline: auto; padding-bottom: var(--espace-8); }

.article__pied { width: min(100% - 2 * var(--marge), var(--largeur-texte)); margin: 0 auto var(--espace-8); }

.etiquettes { display: flex; flex-wrap: wrap; gap: var(--espace-2); }

.etiquettes a { display: inline-block; padding: var(--espace-1) var(--espace-3); border: 1px solid var(--couleur-filet-fort); font-size: var(--texte-xs); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }

.etiquettes a::before { content: '#'; color: var(--couleur-accent); }

.etiquettes a:hover { border-color: var(--couleur-accent); color: var(--couleur-accent); }

/* Progression de lecture : animation pilotée par le défilement (CSS natif) */
.progression-lecture { display: none; }

@supports (animation-timeline: scroll()) {
    .progression-lecture {
        display: block;
        position: fixed;
        inset: 0 0 auto;
        z-index: 70;
        height: 3px;
        background: var(--couleur-sang);
        transform-origin: left;
        animation: lire linear both;
        animation-timeline: scroll(root);
    }
}

@keyframes lire { from { scale: 0 1; } to { scale: 1 1; } }

.navigation-articles { padding-block: var(--espace-7); border-top: 1px solid var(--couleur-filet); }

.navigation-articles .nav-links { display: grid; gap: var(--espace-5); }

.navigation-articles a { display: grid; gap: var(--espace-1); text-decoration: none; }

.navigation-articles__sens { font-size: var(--texte-xs); letter-spacing: var(--approche-capitales); text-transform: uppercase; color: var(--couleur-texte-doux); }

.navigation-articles__titre { font-family: var(--police-titre); font-size: var(--titre-s); line-height: 1; }

.navigation-articles a:hover .navigation-articles__titre { color: var(--couleur-accent); }

@media (min-width: 640px) {
    .navigation-articles .nav-links { grid-template-columns: 1fr 1fr; }
    .navigation-articles .nav-next { grid-column: 2; text-align: right; }
}

.pagination { margin-top: var(--espace-8); }

.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espace-2); }

.pagination .page-numbers { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 var(--espace-3); border: 1px solid var(--couleur-filet); font-size: var(--texte-xs); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; }

.pagination .page-numbers.current { background: var(--couleur-sang); color: var(--couleur-sur-sang); border-color: var(--couleur-sang); }

.pagination a.page-numbers:hover { border-color: var(--couleur-accent); color: var(--couleur-accent); }

/* Contenu riche (éditeur WordPress) */
.contenu-riche { font-size: var(--texte-m); line-height: 1.75; }

.contenu-riche > * + * { margin-top: 1.25em; }

.contenu-riche h2 { margin-top: 2em; font-size: var(--titre-s); }

.contenu-riche h3 { margin-top: 1.8em; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }

.contenu-riche h4 { margin-top: 1.6em; font-family: var(--police-texte); font-size: var(--texte-s); font-weight: 600; letter-spacing: var(--approche-capitales); text-transform: uppercase; }

.contenu-riche a { color: var(--couleur-texte); text-decoration-color: var(--couleur-accent); }

.contenu-riche a:hover { color: var(--couleur-accent); }

.contenu-riche ul, .contenu-riche ol { padding-left: 1.5em; }

.contenu-riche li + li { margin-top: 0.4em; }

.contenu-riche ul li::marker { content: '†  '; color: var(--couleur-accent); }

.contenu-riche ol li::marker { color: var(--couleur-accent); font-weight: 600; }

.contenu-riche blockquote {
    margin: 2em 0;
    padding: var(--espace-4) 0 var(--espace-4) var(--espace-5);
    border-left: 3px solid var(--couleur-sang);
    font-family: var(--police-titre);
    font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
    line-height: 1.1;
}

.contenu-riche blockquote cite { display: block; margin-top: var(--espace-3); font-family: var(--police-texte); font-size: var(--texte-xs); font-style: normal; letter-spacing: var(--approche-capitales); text-transform: uppercase; color: var(--couleur-texte-doux); }

.contenu-riche img { height: auto; filter: contrast(1.08); }

.contenu-riche figure { margin-inline: 0; }

.contenu-riche figcaption { margin-top: var(--espace-2); font-size: var(--texte-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--couleur-texte-doux); }

.contenu-riche hr { border: 0; height: auto; margin-block: 3em; text-align: center; overflow: visible; }

.contenu-riche hr::after { content: '†  †  †'; color: var(--couleur-accent); letter-spacing: 0.4em; }

.contenu-riche table { width: 100%; border-collapse: collapse; font-size: var(--texte-s); }

.contenu-riche th, .contenu-riche td { padding: var(--espace-3); border-bottom: 1px solid var(--couleur-filet); text-align: left; }

.contenu-riche code { padding: 0.1em 0.35em; background: var(--couleur-surface-forte); font-size: 0.9em; }

.contenu-riche .alignwide { width: min(100vw - 2 * var(--marge), 64rem); margin-inline: 50%; translate: -50% 0; }

.contenu-riche .alignfull { width: 100vw; margin-inline: 50%; translate: -50% 0; max-width: none; }

.contenu-riche .aligncenter { margin-inline: auto; }


/* 13. Commentaires
   ========================================================================== */

.commentaires { max-width: var(--largeur-texte); padding-block: var(--espace-7) var(--espace-9); border-top: 1px solid var(--couleur-filet); }

.commentaires__titre { font-size: var(--titre-s); margin-bottom: var(--espace-6); }

.commentaires__liste, .commentaires__liste .children { margin: 0; padding: 0; list-style: none; }

.commentaires__liste .children { margin-left: var(--espace-5); padding-left: var(--espace-5); border-left: 1px solid var(--couleur-sang); }

.commentaire__corps { padding-block: var(--espace-5); border-bottom: 1px solid var(--couleur-filet); }

.commentaire__entete { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--espace-3); align-items: center; }

.commentaire__avatar { grid-row: span 2; width: 2.75rem; height: 2.75rem; filter: grayscale(1) contrast(1.3); }

.commentaire__auteur { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--texte-s); }

.commentaire__date { font-size: var(--texte-xs); color: var(--couleur-texte-doux); text-decoration: none; }

.commentaire__texte { margin-top: var(--espace-3); font-size: var(--texte-s); }

.commentaire__attente { margin-top: var(--espace-2); font-size: var(--texte-xs); color: var(--couleur-accent); }

.commentaire__repondre { margin-top: var(--espace-3); font-size: var(--texte-xs); letter-spacing: var(--approche-capitales); text-transform: uppercase; }

.commentaire__repondre a { text-decoration: none; color: var(--couleur-texte-doux); }

.commentaire__repondre a:hover { color: var(--couleur-accent); }

.formulaire-commentaire { margin-top: var(--espace-7); }

.formulaire-commentaire__titre { font-size: var(--titre-s); margin-bottom: var(--espace-4); }

.formulaire-commentaire__titre small { display: block; margin-top: var(--espace-2); font-family: var(--police-texte); font-size: var(--texte-xs); }

.commentaires__fermes { margin-top: var(--espace-5); color: var(--couleur-texte-doux); }


/* 14. Formulaires
   ========================================================================== */

.formulaire { display: grid; gap: var(--espace-5); }

.formulaire__ligne { display: grid; gap: var(--espace-5); }

@media (min-width: 640px) {
    .formulaire__ligne { grid-template-columns: 1fr 1fr; }
}

.formulaire__aide { font-size: var(--texte-xs); color: var(--couleur-texte-doux); }

.formulaire .comment-form-cookies-consent { display: flex; gap: var(--espace-3); align-items: flex-start; font-size: var(--texte-xs); color: var(--couleur-texte-doux); }

.formulaire .form-submit { margin: 0; }

.champ { display: grid; gap: var(--espace-1); margin: 0; }

.champ__libelle { font-size: var(--texte-xs); font-weight: 500; letter-spacing: var(--approche-capitales); text-transform: uppercase; color: var(--couleur-texte-doux); transition: color var(--duree-rapide) var(--courbe-douce); }

.champ:focus-within .champ__libelle { color: var(--couleur-accent); }

.champ:focus-within .champ__libelle::before { content: '† '; }

.champ__entree {
    width: 100%;
    min-height: 3rem;
    padding: var(--espace-3) 0;
    border: 0;
    border-bottom: 1px solid var(--couleur-filet-fort);
    border-radius: 0;
    background: transparent;
    font-size: var(--texte-m);
    transition: border-color var(--duree-rapide) var(--courbe-douce), box-shadow var(--duree-rapide) var(--courbe-douce);
}

.champ__entree:hover { border-color: var(--couleur-texte); }

.champ__entree:focus,
.champ__entree:focus-visible { outline: none; border-color: var(--couleur-accent); box-shadow: 0 1px 0 0 var(--couleur-accent); }

.champ__entree:user-invalid { border-color: var(--couleur-accent); }

.champ__entree--zone { min-height: 9rem; resize: vertical; line-height: 1.6; }

.message {
    padding: var(--espace-4) var(--espace-5);
    border-left: 3px solid var(--couleur-sang);
    background: var(--couleur-surface);
    font-size: var(--texte-s);
}

.message--succes { border-left-color: var(--couleur-texte); }

.formulaire-recherche { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--couleur-filet-fort); transition: border-color var(--duree-rapide) var(--courbe-douce); }

.formulaire-recherche:focus-within { border-color: var(--couleur-accent); }

.formulaire-recherche__champ { flex: 1; min-width: 0; min-height: 3rem; padding: var(--espace-2) 0; border: 0; background: transparent; font-size: var(--texte-s); }

.formulaire-recherche__champ:focus { outline: none; }

.formulaire-recherche__champ::placeholder { color: var(--couleur-texte-doux); opacity: 1; }

.formulaire-recherche__champ::-webkit-search-cancel-button { filter: grayscale(1); }

.formulaire-recherche__bouton { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; }

.formulaire-recherche__bouton .icone { transition: translate var(--duree-moyenne) var(--courbe-sortie); }

.formulaire-recherche__bouton:hover .icone { translate: 0.25rem 0; color: var(--couleur-accent); }

.formulaire__captcha { min-height: 78px; }


/* 15. Pages : page simple, contact, 404
   ========================================================================== */

.page-simple__entete { width: min(100% - 2 * var(--marge), var(--largeur-texte)); margin-inline: auto; padding-block: var(--espace-8) var(--espace-7); }

.page-simple__titre { font-size: var(--titre-l); line-height: 0.92; max-width: 14ch; }

.page-simple__media { margin-block: 0 var(--espace-8); }

.page-simple__image { width: 100%; }

.contact { display: grid; gap: var(--espace-8); padding-block: var(--espace-8) var(--espace-9); }

.contact__titre { font-size: var(--titre-l); line-height: 0.92; }

.contact__intro { margin-top: var(--espace-5); max-width: 44ch; font-size: var(--texte-l); color: var(--couleur-texte-doux); }

.contact__points { display: grid; gap: var(--espace-2); margin-top: var(--espace-6); }

.contact__point { display: flex; gap: var(--espace-3); font-size: var(--texte-xs); letter-spacing: 0.06em; text-transform: uppercase; }

.contact__point::before { content: '†'; color: var(--couleur-accent); }

/* Le logo 3D (modèle de 8,7 Mo) est réservé aux écrans à partir de la tablette */
.contact__scene { display: none; height: clamp(14rem, 10rem + 16vw, 24rem); margin-top: var(--espace-6); cursor: grab; }

@media (min-width: 768px) {
    .contact__scene { display: block; }
}

.contact__scene canvas { width: 100% !important; height: 100% !important; }

.contact__formulaire { display: grid; gap: var(--espace-5); align-content: start; }

@media (min-width: 1024px) {
    .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--goutiere); }
    .contact__infos { grid-column: 1 / span 6; }
    .contact__formulaire { grid-column: 8 / span 5; padding-top: var(--espace-8); }
}

.erreur-404 { display: grid; gap: var(--espace-6); align-items: center; min-height: calc(100svh - var(--hauteur-entete)); padding-block: var(--espace-7); }

.erreur-404__code {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--police-titre);
    font-size: clamp(8rem, 4rem + 24vw, 24rem);
    line-height: 0.8;
}

/* Le zéro devient une lune de sang, éclipsée */
.erreur-404__zero { position: relative; color: transparent; }

.erreur-404__zero::before {
    content: '';
    position: absolute;
    inset: 14% 2% 10%;
    margin: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #F0605E, #8A0A16 62%, #3A0409 100%);
    box-shadow: 0 0 5rem rgb(234 58 74 / 0.35), 0 0 12rem rgb(138 10 22 / 0.4);
    animation: eclipse 7s var(--courbe-douce) infinite alternate;
}

.erreur-404__zero::after {
    content: '';
    position: absolute;
    inset: 14% 2% 10%;
    margin: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--couleur-fond);
    translate: 40% -8%;
    animation: ombre-portee 7s var(--courbe-douce) infinite alternate;
}

@keyframes eclipse { to { box-shadow: 0 0 7rem rgb(234 58 74 / 0.5), 0 0 16rem rgb(138 10 22 / 0.55); } }

@keyframes ombre-portee { to { translate: 16% -3%; } }

.erreur-404__titre { font-size: var(--titre-m); line-height: 0.95; }

.erreur-404__message { margin-top: var(--espace-4); max-width: 42ch; color: var(--couleur-texte-doux); }

.erreur-404__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); margin-top: var(--espace-6); }

.erreur-404__recherche { margin-top: var(--espace-6); max-width: 28rem; }

@media (min-width: 1024px) {
    .erreur-404 { grid-template-columns: 7fr 5fr; }
}


/* 16. Pied de page
   ========================================================================== */

.pied { position: relative; overflow: hidden; border-top: 1px solid var(--couleur-filet); background: var(--couleur-fond); }

.pied__colonnes { display: grid; gap: var(--espace-7) var(--goutiere); padding-block: var(--espace-7); }

@media (min-width: 640px) {
    .pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .pied__colonnes { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
}

.pied__colonne--marque { display: grid; gap: var(--espace-4); align-content: start; }

.pied__logo { width: 7rem; }

.pied__slogan { max-width: 32ch; font-size: var(--texte-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--couleur-texte-doux); }

.pied__titre { margin-bottom: var(--espace-4); font-family: var(--police-texte); font-size: var(--texte-xs); font-weight: 500; letter-spacing: var(--approche-capitales); text-transform: uppercase; color: var(--couleur-accent); }

.pied__liste { display: grid; gap: var(--espace-2); margin: 0; padding: 0; list-style: none; }

.pied__lien { font-size: var(--texte-s); text-decoration: none; }

.pied__lien:hover { color: var(--couleur-accent); text-decoration: line-through; }

.pied__bas {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-4);
    padding-block: var(--espace-5);
    border-top: 1px solid var(--couleur-filet);
    font-size: var(--texte-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
}

.pied-legal__liste { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-5); margin: 0; padding: 0; list-style: none; }

.pied-legal__lien { text-decoration: none; }

.pied-legal__lien:hover { color: var(--couleur-accent); }

.pied__reseaux { display: flex; gap: var(--espace-2); margin: 0; padding: 0; list-style: none; }

.pied__reseau { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--couleur-filet-fort); text-decoration: none; letter-spacing: 0.06em; color: var(--couleur-texte); }

.pied__reseau:hover { border-color: var(--couleur-sang); background: var(--couleur-sang); color: var(--couleur-sur-sang); }

.pied__haut { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: 2.75rem; text-decoration: none; }

.pied__haut .icone { width: 1rem; height: 1rem; transition: translate var(--duree-moyenne) var(--courbe-sortie); }

.pied__haut:hover { color: var(--couleur-accent); }

.pied__haut:hover .icone { translate: 0 -0.2rem; }


/* 17. Curseur : une mire fine qui suit la souris (le curseur natif reste)
   ========================================================================== */

.curseur { display: none; }

@media (hover: hover) and (pointer: fine) {
    .js .curseur {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        display: block;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--duree-moyenne) var(--courbe-douce);
    }

    .curseur--actif { opacity: 1; }

    .curseur__anneau {
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 2.25rem;
        margin: -1.125rem 0 0 -1.125rem;
        border: 1px solid color-mix(in oklab, var(--couleur-texte) 40%, transparent);
        rotate: 45deg;
        translate: var(--anneau-x, -100px) var(--anneau-y, -100px);
        transition: width var(--duree-moyenne) var(--courbe-sortie), height var(--duree-moyenne) var(--courbe-sortie), margin var(--duree-moyenne) var(--courbe-sortie), background-color var(--duree-moyenne) var(--courbe-sortie), border-color var(--duree-moyenne) var(--courbe-sortie), rotate var(--duree-moyenne) var(--courbe-sortie);
    }

    .curseur__point {
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 5px;
        margin: -2.5px 0 0 -2.5px;
        background: var(--couleur-accent);
        translate: var(--point-x, -100px) var(--point-y, -100px);
    }

    .curseur__texte { rotate: -45deg; font-size: 0.75rem; font-weight: 600; letter-spacing: var(--approche-capitales); text-transform: uppercase; color: var(--couleur-sur-sang); opacity: 0; transition: opacity var(--duree-rapide) var(--courbe-douce); }

    .curseur--survol .curseur__anneau { width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem; border-color: var(--couleur-accent); rotate: 0deg; }

    .curseur--texte .curseur__anneau { width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem; border-color: transparent; background: var(--couleur-sang); }

    .curseur--texte .curseur__texte { opacity: 1; }

    .curseur--texte .curseur__point { opacity: 0; }
}


/* 18. Révélations au défilement (IntersectionObserver)
   ========================================================================== */

.js [data-revelation] {
    opacity: 0;
    translate: 0 2rem;
    filter: blur(6px);
    transition: opacity 0.9s var(--courbe-sortie) var(--delai, 0s), translate 1.1s var(--courbe-sortie) var(--delai, 0s), filter 0.9s var(--courbe-sortie) var(--delai, 0s);
}

.js [data-revelation].est-visible { opacity: 1; translate: 0 0; filter: none; }


/* 19. Transitions entre les pages (View Transitions API, natif)
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: 320ms steps(4) both quitter-page; }

::view-transition-new(root) { animation: 560ms var(--courbe-sortie) 80ms both entrer-page; }

::view-transition-group(produit-media) { animation-duration: 700ms; animation-timing-function: var(--courbe-sortie); }

/* La page s'arrache par bandes, la suivante remonte de l'ombre */
@keyframes quitter-page {
    0% { clip-path: inset(0 0 0 0); }
    50% { clip-path: inset(18% 0 30% 0); translate: -8px 0; }
    100% { clip-path: inset(50% 0 50% 0); opacity: 0; }
}

@keyframes entrer-page { from { opacity: 0; filter: brightness(0.2) blur(4px); } }

/* Bascule jour / nuit : un cercle part du bouton (voir main.js) */
.transition-theme::view-transition-old(root),
.transition-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

.transition-theme .entete,
.transition-theme .fiche-produit__media--principal { view-transition-name: none; }


/* 20. Mouvement réduit : tout reste lisible, rien ne bouge
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    @view-transition { navigation: none; }

    body::after { animation: none; }

    .js [data-revelation] { opacity: 1; translate: none; filter: none; }

    .heros, .js .heros { height: 100svh; --progression: 0; }

    .heros__scene { position: relative; }

    .heros__goutte { height: var(--longueur); opacity: 1; animation: none; }

    .heros__goutte::after { animation: none; opacity: 0; }

    .heros__nappe { animation: none; }

    .manifeste__mot { opacity: 1; }
}