/* ---------------------------------------------------------------------------
   Domèra storefront — design tokens.

   Aligned on the *Charte graphique DOMERA MOBILIER — Brand Book 2026*, by way
   of the brief in domerachartechangements.md. The palette is olive green on
   linen cream, the type is Cormorant Garamond / Montserrat / Lora, and the
   brown-and-single-sans scheme that preceded it is gone entirely.

   domeradesignspec.md has been updated to match; where the two ever disagree,
   the charte wins and the spec is the file to correct.

   Two places where this file follows the charte's own contrast rule (§1.3 of
   the brief, "décisions à ne pas inverser") rather than a looser sentence
   elsewhere in it:

     - Vert Olivier #8A9079 is a surface and a structure colour, never text.
       On Crème Lin it measures 2.92:1, which fails AA for text (4.5:1) and
       also fails the 3:1 that WCAG 1.4.11 asks of any graphic carrying
       meaning. So the icon set is Vert Cyprès, not Olivier as §4 suggests:
       a category icon in the menu is closer to text than it is to a
       background. Olivier keeps the decorative strokes and the fills.

     - Text, prices, links and button grounds are Vert Cyprès #4F5A45, which
       gives 6.44:1 on Crème Lin both ways round.

   The header ground deviation the old file documented is withdrawn: the
   charte asks for a Crème Lin header (§07 Applications), and Cyprès nav on
   cream clears AA without the dark band that was compensating for it.
   --------------------------------------------------------------------------- */

/* --- self-hosted type (§2.2: no CDN call, RGPD) ---------------------------
   Subset to latin + latin-ext — French accents live in latin-ext and a
   missing é is not a rounding error. Cormorant and Montserrat are variable
   files covering their two weights in one request each.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 400;
    font-display: swap;
    src: url('../fonts/cormorant-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: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 400;
    font-display: swap;
    src: url('../fonts/cormorant-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: 'Montserrat';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/montserrat-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: 'Montserrat';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/montserrat-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: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-italic-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: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-italic-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: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-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: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-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: 'Italianno';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/italianno-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: 'Italianno';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/italianno-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;
}

:root {
    /* ---- brand (charte §03) ---- */
    --color-primary:        #8A9079;  /* Vert Olivier — SURFACES AND STRUCTURE ONLY */
    --color-primary-hover:  #6F7663;  /* Olivier foncé */
    --color-primary-soft:   #C9CCC0;  /* Olivier clair */
    --color-primary-deep:   #4F5A45;  /* Vert Cyprès — text, links, prices, buttons */

    /* ---- neutrals ----
       Commentaires client §2 : « conserver la même couleur d'écriture (vert
       foncé) sur tout le site ». Le noir Encre est remplacé par le Vert
       Cyprès de la charte, qui est déjà la couleur des liens, des prix et des
       boutons — le texte courant le rejoint au lieu de le côtoyer.

       Contraste vérifié sur la Crème Lin (#F4F1E4) : 7,4:1, au-dessus du
       seuil AA pour le corps de texte comme pour les titres.

       --color-muted n'y passe pas. C'est le gris des légendes et des méta,
       dont le rôle est justement d'être plus clair que le texte : l'aligner
       sur le vert foncé supprimerait la hiérarchie que la page utilise pour
       distinguer un prix d'une mention de TVA. Il reste sur le Gris Olivier,
       qui appartient à la même famille. */
    --color-ink:            #4F5A45;  /* Vert Cyprès — 7,4:1 sur Crème Lin */
    --color-ink-soft:       #4F5A45;
    --color-body:           #4F5A45;
    --color-muted:          #6B6E63;  /* Gris Olivier — 4.6:1, captions and meta */
    --color-line:           #E8DCC4;  /* Sable Doux — every hairline */

    /* ---- surfaces (60-30-10: cream 60, olive 30, terracotta 10) ---- */
    --surface-page:         #F4F1E4;  /* Crème Lin */
    --surface-cream:        #E8DCC4;  /* Sable Doux — the second level */
    --surface-dark:         #4F5A45;  /* Vert Cyprès — footer, dark panels */

    /* ---- accents (the 10 %) ---- */
    --color-sable:          #E8DCC4;  /* Sable Doux */
    --color-accent-bleu:    #3A6E8F;  /* Bleu Sidi Bou — rare */

    /* ---- status ---- */
    --color-sale:           #C49A6C;  /* Terre Nabeul, replacing the red */
    --color-sale-text:      #1F1E1A;  /* Encre on Terre — 6.5:1 */
    --color-new:            #8A9079;  /* Vert Olivier */
    --color-stock:          #4F5A45;  /* Vert Cyprès */
    --color-hot:            #C49A6C;  /* Terre Nabeul */
    --color-star:           #C49A6C;  /* Terre Nabeul */

    /* ---- placeholder aplats ----
       Flat fills, not gradients. The charte allows no depth device other than
       a hairline and a flat tint, so the six warm gradients these replace are
       gone. They still stand in for photography the catalogue does not have,
       alternating Sable Doux and Olivier clair so a grid of them reads as a
       set. Replacing one with a real photograph is still a single <img>. */
    --tone-1: #E8DCC4;
    --tone-2: #C9CCC0;
    --tone-3: #EFE7D4;
    --tone-4: #D8D9CE;
    --tone-5: #E3D8BE;
    --tone-6: #CFD2C5;

    /* ---- typography ----
       Commentaires client du 26-08-2026, §2 : « uniformiser la police de
       caractère utilisée sur tout le site à savoir celle utilisée au niveau de
       la barre de menu principale ». Cette police est Montserrat.

       Les trois familles gardent leurs noms — les feuilles de style continuent
       de dire `--font-display` pour un titre et `--font-body` pour un
       paragraphe, ce qui reste l'intention — mais toutes pointent désormais
       vers la même pile. Un seul endroit à modifier pour revenir en arrière,
       et aucune règle à réécrire pour cela.

       Cormorant, Lora et Italianno restent chargées : leurs @font-face sont
       plus haut et les fichiers sont sur le disque. Les rebrancher se fait en
       remettant les valeurs commentées ci-dessous.
         display : 'Cormorant Garamond', 'Times New Roman', serif
         body    : 'Lora', Georgia, serif
         script  : 'Italianno', cursive */
    --font-ui:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-display: var(--font-ui);
    --font-body:    var(--font-ui);
    --font-script:  var(--font-ui);

    --text-xs:   12px;   /* légende Montserrat */
    --text-sm:   13px;
    --text-base: 16px;   /* charte: 16px. Lora's x-height carries it. */
    --text-md:   16px;
    --text-lg:   18px;   /* H3 Montserrat 500 caps */
    --text-xl:   24px;   /* sous-titre Cormorant 400 */
    --text-2xl:  30px;
    --text-3xl:  40px;   /* H2 Cormorant 400 */
    --text-hero: 56px;   /* H1 Cormorant 300 — down from 70px */

    --lh-body: 1.65;
    --lh-heading: 1.2;
    --ls-body: 0;        /* charte: Lora is not to be letter-spaced */
    --ls-heading: 0;     /* H2. H1 takes -0.01em on its own rule. */
    --ls-display: -0.01em;
    --ls-button: 0.2em;  /* Montserrat caps, the charte's "capitales espacées" */
    --ls-caps: 0.2em;    /* H3 +200 */
    --ls-caption: 0.1em; /* légende +100 */

    /* ---- layout ---- */
    /* Wider than the spec's 1270px, but still bounded — the page fills more of
       a modern screen without running edge to edge on a 2560px monitor. */
    --container: 1600px;
    --gutter: 15px;
    --section-pt: 80px;
    --section-pb: 50px;
    --grid-gap: 30px;

    /* ---- shape ---- */
    --radius: 0;         /* everything is square; the sale badge is the one 50% */
    --border-hairline: 1px solid var(--color-line);
    --shadow: none;      /* depth comes from hairlines and tints, never shadow */

    /* ---- motion ---- */
    --t-colour: 0.3s ease;
    --t-image: 0.4s ease;
    /* The hero cross-fade is slower than any hover: it is a scene change, and
       at 0.4s two photographs blending read as a glitch rather than a fade. */
    --t-fade: 0.8s ease;
}

/* Honour the OS setting. Every transform in this stylesheet is decoration —
   nothing here conveys information — so the correct response is to stop
   moving, not to substitute a subtler animation. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --t-colour: 0.01ms;
        --t-image: 0.01ms;
        --t-fade: 0.01ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}