/*
 * Jetons de design — la source unique.
 * Couleurs relevées sur images/maquette_accueil.png le 16 septembre 2026.
 * Une couleur qui n'est pas ici n'existe pas : aucune valeur en dur ailleurs.
 */

:root {
    /* Bordeaux — l'identité de la marque */
    --bordeaux-profond: #64121c;   /* pied de page, bandeau d'annonce */
    --bordeaux: #8c0e1f;
    --bordeaux-vif: #940e21;       /* boutons principaux */
    --bordeaux-clair: #8f4850;

    /* Roses — les accents */
    --rose: #c94f5d;               /* mots mis en valeur dans les titres */
    --rose-bonheur: #e04e69;       /* « bonheur » du titre d'accueil, relevé sur la maquette */
    --rose-vif: #e1435a;           /* badges */
    --rose-pale: #fde3da;
    --rose-tres-pale: #ffede8;     /* section newsletter */

    /* Neutres chauds — les fonds */
    --creme: #fdf4ed;              /* fond général */
    --creme-sombre: #f3e4da;       /* cartes catégories */
    --blanc-chaud: #fffefb;
    --peche: #ffd7bb;              /* bandeau promotionnel */

    /* Textes */
    --encre: #33302c;              /* nom de la marque dans l'en-tête, relevé sur la maquette */
    --texte: #3b2a24;
    --texte-doux: #7a625a;
    /* Version assombrie du précédent, pour le texte qui repose sur une photo :
       #7a625a ne donne que 3,16:1 sur les tons chauds de l'image, sous le seuil
       AA de 4,5. Celui-ci tient à 4,92:1 — ENF-03. */
    --texte-doux-sur-photo: #584741;
    --texte-inverse: #fdf4ed;

    /* Typographie
       Deux familles : une serif pour les titres, une sans-serif pour le corps.
       Jeu latin uniquement — ENF-09. */
    --police-titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --police-corps: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Deux écritures distinctes sur la maquette : une main courante pour les
       notes posées sur les photos, et une signature pour le nom de la marque. */
    --police-manuscrite: 'Caveat', 'Brush Script MT', cursive;
    --police-signature: 'Qwitcher Grypen', 'Snell Roundhand', cursive;

    /* Échelle typographique — rapport 1,25 */
    --taille-xs: 0.75rem;
    --taille-s: 0.875rem;
    --taille-base: 1rem;
    --taille-m: 1.25rem;
    --taille-l: 1.563rem;
    --taille-xl: 1.953rem;
    --taille-xxl: 2.441rem;
    --taille-geante: 3.815rem;

    /* Espacements — multiples de 8 */
    --espace-1: 0.5rem;
    --espace-2: 1rem;
    --espace-3: 1.5rem;
    --espace-4: 2rem;
    --espace-5: 2.5rem;
    --espace-6: 3rem;
    --espace-8: 4rem;
    --espace-12: 6rem;

    /* Rayons */
    --rayon-s: 6px;
    --rayon-m: 12px;
    --rayon-l: 20px;
    --rayon-rond: 999px;

    /* Ombres — discrètes : les photos portent le regard */
    --ombre-carte: 0 2px 12px rgba(100, 18, 28, 0.06);
    --ombre-flottante: 0 4px 20px rgba(100, 18, 28, 0.12);

    /* Grille */
    /* Relevé sur la maquette : le contenu occupe presque toute la largeur,
       avec une marge d'environ 24 px à 1440 px. */
    --largeur-contenu: 100%;
    --marge-mobile: 1.5rem;

    /* Transitions */
    --transition: 180ms ease;
}

/* Réinitialisation minimale */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--police-corps);
    font-size: var(--taille-base);
    line-height: 1.6;
    color: var(--texte);
    background: var(--creme);
}

h1, h2, h3 {
    font-family: var(--police-titre);
    line-height: 1.15;
    margin: 0;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/*
 * Focus visible en permanence : le parcours d'achat doit être faisable au
 * clavier sans jamais perdre le curseur — ENF-01.
 */
:focus-visible {
    outline: 3px solid var(--rose-vif);
    outline-offset: 2px;
}

/* Contenu réservé aux lecteurs d'écran */
.hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contenu {
    /*
     * `width: 100%` n'est pas redondant avec `max-width`.
     *
     * Quand `.contenu` est l'enfant direct d'un `main` en flex — la fiche
     * produit et le panier — son `margin-inline: auto` absorbe l'espace libre
     * et annule le `stretch` du conteneur : la boîte se réduit alors à la
     * largeur de son contenu. Le panier vide s'affichait ainsi dans une
     * colonne de 460 px, titre compris, alors que le panier rempli tenait
     * toute la largeur. La largeur ne doit pas dépendre de ce qu'il y a dedans.
     */
    width: 100%;
    max-width: var(--largeur-contenu);
    margin-inline: auto;
    padding-inline: var(--marge-mobile);
}

/* — Fil d'Ariane — partagé par la fiche produit et le panier — */
.fil { background: var(--creme); border-bottom: 1px solid var(--creme-sombre); }
.fil__liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-1);
    list-style: none;
    margin: 0;
    padding-block: var(--espace-2);
    font-size: var(--taille-xs);
    color: var(--texte-doux);
}
.fil__liste li + li::before {
    content: "›";
    margin-right: var(--espace-1);
    opacity: 0.6;
}
.fil__liste a:hover { color: var(--bordeaux-vif); text-decoration: underline; }
.fil__liste [aria-current] { color: var(--texte); font-weight: 600; }


/*
 * L'attribut `hidden` doit vraiment cacher.
 *
 * Le navigateur applique `[hidden] { display: none }` dans sa propre feuille,
 * de spécificité (0,1,0). Toute règle d'auteur de même spécificité l'emporte
 * sur elle : `.panier { display: grid }` suffit à faire réapparaître un élément
 * qu'on vient de masquer. Le panier affichait ainsi « Chargement… » au-dessus
 * de son propre contenu.
 *
 * Le `!important` contourne cette règle du navigateur — c'est le seul moyen de
 * garantir que l'attribut gagne sans avoir à le prévoir composant par composant.
 */
[hidden] { display: none !important; }