/*
 * Page d'accueil.
 * Reprend la maquette images/maquette_accueil.png.
 * Toutes les valeurs viennent de fondations.css : aucune couleur en dur ici.
 */
main {
    display: flex;
    flex-direction: column;
    /*
     * `stretch` et non `center` : centrer les éléments leur fait prendre la
     * largeur de leur contenu, et les sections pleine largeur — bannière,
     * atelier, bandeau promo — se réduisaient à celle de leur texte.
     * Le centrage du contenu se fait dans chaque section, via `.contenu`.
     */
    align-items: stretch;
    margin-inline: auto;
    overflow: hidden;
}
.lien-evitement {
    position: absolute;
    left: -9999px;
    background: var(--bordeaux-vif);
    color: var(--texte-inverse);
    padding: var(--espace-2);
    z-index: 100;
}
.lien-evitement:focus {
    left: var(--espace-2);
    top: var(--espace-2);
}

/* — Bandeau d'annonce — */
.annonce {
    background: var(--bordeaux);
    color: var(--texte-inverse);
    font-size: var(--taille-xs);
}
.annonce__contenu {
    display: flex;
    gap: var(--espace-2);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* 43 px de haut relevés sur la maquette. */
    padding-block: 0.7rem;
}
.annonce__separateur { opacity: 0.5; }

/* — En-tête — */
.entete {
    background: var(--blanc-chaud);
    border-bottom: 1px solid var(--creme-sombre);
    position: sticky;
    top: 0;
    z-index: 50;
}

.entete__contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-3);
    /* L'emblème fait 58 px : ce padding ramène l'en-tête aux 79 px de la
       maquette. */
    padding-block: 0.65rem;
}
/*
 * L'emblème est un PNG noir sur fond transparent. On l'utilise en masque plutôt
 * qu'en image : la couleur vient alors du CSS, ce qui permet le bordeaux dans
 * l'en-tête et le crème sur le pied de page, à partir du même fichier.
 */
.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-1);
}
/* Sur la maquette, l'emblème domine le nom : il occupe presque toute la hauteur
   de l'en-tête, le texte reste plus discret à côté. */
.logo__embleme {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    /* Même encre que le nom : sur la maquette, emblème et texte sont du même
       gris-noir, c'est ce qui les fait lire comme un seul logo. */
    background: var(--encre);
    -webkit-mask: url("/images/rendus/logo-192.png") center / contain no-repeat;
    mask: url("/images/rendus/logo-192.png") center / contain no-repeat;
}
.logo__embleme--pied { background: var(--texte-inverse); }
.logo--pied { margin: 0 0 var(--espace-1); }

/*
 * Le nom de la marque est gris-noir dans l'en-tête, pas bordeaux : relevé sur
 * la maquette, où les pixels du texte sont neutres. Il passe au crème sur le
 * pied de page, où le fond est sombre.
 * Taille relevée : 312 × 46 px à 1440, soit environ 2,1 rem en Sacramento.
 */
.logo__marque {
    font-family: var(--police-signature);
    font-size: 2.1rem;
    font-weight: 700;
    /* Qwitcher Grypen a de longues hampes : un interligne serré ramène le bloc
       à la hauteur relevée sur la maquette sans rogner les lettres. */
    line-height: 0.82;
    color: var(--encre);
}
.navigation__liste {
    display: flex;
    gap: var(--espace-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.navigation__lien {
    font-size: var(--taille-s);
    padding-block: var(--espace-1);
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition);
}
.navigation__lien:hover,
.navigation__lien--actif { border-bottom-color: var(--bordeaux-vif); }

/* — Menu sur petit écran — */
/*
 * Le bouton n'existe qu'en dessous de 1025 px ; au-dessus, la navigation est
 * affichée en clair et ce bouton n'aurait rien à ouvrir.
 */
.bouton-menu {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--rayon-rond);
    background: var(--creme);
    color: var(--bordeaux-profond);
    cursor: pointer;
    place-items: center;
}
.bouton-menu__barres,
.bouton-menu__barres::before,
.bouton-menu__barres::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.bouton-menu__barres::before,
.bouton-menu__barres::after {
    content: "";
    position: relative;
}
.bouton-menu__barres::before { top: -6px; }
.bouton-menu__barres::after { top: 4px; }

/* Ouvert, les trois barres deviennent une croix. */
.bouton-menu[aria-expanded="true"] .bouton-menu__barres { background: transparent; }
.bouton-menu[aria-expanded="true"] .bouton-menu__barres::before { transform: translateY(6px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .bouton-menu__barres::after { transform: translateY(-4px) rotate(-45deg); }

.voile {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(100, 18, 28, 0.35);
}

.sans-defilement { overflow: hidden; }

.entete__actions { display: flex; gap: var(--espace-2); align-items: center; }
.action {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--rayon-rond);
    background: var(--creme);
    color: var(--bordeaux-profond);
    transition: background var(--transition);
}
.action:hover { background: var(--rose-pale); }
.action--panier { position: relative; }
.action__compteur {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: var(--rayon-rond);
    background: var(--bordeaux-vif);
    color: var(--texte-inverse);
    font-size: var(--taille-xs);
    display: grid;
    place-items: center;
}

/* — Boutons — */
.bouton {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-1);
    padding: 0.75rem var(--espace-3);
    border-radius: var(--rayon-rond);
    font-size: var(--taille-s);
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition);
}
.bouton--principal {
    background: var(--bordeaux-vif);
    color: var(--texte-inverse);
}

/*
 * Le bouton de la bannière est plus imposant que les autres : 390 × 67 px
 * relevés sur la maquette, contre 287 × 50 pour un bouton courant.
 */
.banniere .bouton--principal {
    
    
    gap: var(--espace-2);
}
.bouton--principal:hover:not(:disabled) { background: var(--bordeaux-profond); transform: translateY(-1px); }

/*
 * Un bouton fermé doit se voir fermé. Sans cela, « Continuer vers le paiement »
 * reste rouge plein tant qu'aucun point relais n'est choisi : la cliente clique,
 * rien ne se passe, et rien ne lui dit pourquoi.
 */
.bouton:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.bouton--contour {
    background: transparent;
    border-color: var(--bordeaux-vif);
    color: var(--bordeaux-vif);
}
.bouton--contour:hover { background: var(--bordeaux-vif); color: var(--texte-inverse); }

/* — Bannière — */
/*
 * L'image occupe toute la hauteur de la section et se fond dans le fond rose
 * par un dégradé sur son bord gauche : sur la maquette, elle n'a ni bord net,
 * ni coin arrondi, ni marge. Le texte se place au-dessus.
 */
.banniere {
    position: relative;
    isolation: isolate;
    background: var(--rose-pale);
    /* 539 px relevés sur la maquette à 1440 px de large. */
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
    max-width: 1440px;
}

/*
 * La photo apparaît dès le quart gauche sur la maquette : elle occupe les trois
 * quarts de la bannière, le fondu se chargeant de la faire naître dans le rose.
 */
.banniere__image {
    position: absolute;
    inset: 0 0 0 32%;
    z-index: -1;
}
.banniere__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La photo est en paysage (1536 × 1024) : le cadrage centré garde la bougie
       entière, socle compris. */
    /* Cadrage bas : c'est le socle en bois qu'on perdrait en premier, et c'est
       lui qui pose la bougie dans le décor. */
    object-position: center 62%;
    /* Le fondu vers la gauche, qui remplace tout bord dessiné. */
    /* Fondu long : la moitié gauche reste assez claire pour que le texte et la
       note manuscrite s'y lisent sans surimpression. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 22%, #000 48%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 22%, #000 48%);
}

/*
 * La marge gauche suit la grille du contenu, mais ne descend jamais sous
 * --espace-6 : sans ce plancher, le texte se colle au bord dès que la fenêtre
 * atteint la largeur de contenu.
 */
.banniere__texte {
    position: relative;
    z-index: 1;
    box-sizing: content-box;
    width: min(40%, 556px);
    /*
     * Le fond est porté par le bloc texte, pas par la bannière : il ne couvre
     * que la zone de lecture et s'efface sur son bord droit. La photo reste
     * visible partout ailleurs — au-dessus, en dessous, et à droite.
     */
    background: linear-gradient(to right,
        var(--rose-pale) 0%,
        rgba(253, 227, 218, 0.94) 62%,
        rgba(253, 227, 218, 0) 100%);
    /* 67 px relevés sur la maquette : le texte de bannière est plus en retrait
       que les sections, qui s'alignent elles sur la grille du contenu. */
    padding-left: 50px;
    padding-block: var(--espace-5);
}

/* Le surtitre ne prend que la largeur de son contenu : étiré, ses tirets
   s'écartaient jusqu'au bord du bloc. */
.surtitre {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: var(--espace-2);
    font-size: 13px;
    /* Interligne ramené à 1 : hérité du corps de texte, il ajoutait 9 px de
       hauteur au surtitre et décalait tout le bloc. */
    line-height: 1;
    letter-spacing: 0.15em;
    /* Le surtitre déborde sur la photo dès que la bannière se resserre : il lui
       faut la teinte conforme, pas celle du texte courant. */
    color: var(--texte-doux-sur-photo);
    /* 9 px entre le surtitre et le titre sur la maquette. */
    margin: 0 0 0.55rem;
}
/* Les tirets qui encadrent le surtitre sur la maquette. */
.surtitre::before,
.surtitre::after {
    content: "";
    height: 1px;
    width: 28px;
    background: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
}
.surtitre::after { flex: 1; max-width: 28px; }
.surtitre strong { color: var(--texte); font-weight: 600; }

.banniere__titre {
    font-size: clamp(1.8rem, 10.2vw, 3.4rem);
    /* La maquette utilise Playfair Display en 900, pas en 700 : à la même
       taille, les lettres y sont nettement plus larges et plus serrées. */
    font-weight: 900;
    /* Interligne serré : sur la maquette les trois lignes se touchent presque,
       c'est ce qui donne au titre son allure de bloc. */
    line-height: 0.98;
    color: var(--bordeaux);
    /* 46 px entre le titre et l'introduction sur la maquette. */
    margin-bottom: 2.4rem;
}
/* « qui » est en romain sur la maquette, pas en italique : seule la couleur
   le distingue. */
.banniere__qui { color: var(--rose); }

/*
 * Trois relevés sur la maquette, que l'œil ne devine pas :
 *   - la deuxième ligne est décalée de 23 px à 1440, soit environ 0,35 em ;
 *   - « qui » et « bonheur » ne partagent pas le même rose ;
 *   - le corps du titre est le bordeaux vif, pas le bordeaux profond.
 */
.banniere__ligne-decalee { padding-left: 0.35em; }
.banniere__accent { color: var(--rose-bonheur); }
.banniere__coeur {
    width: 0.74em;
    height: 0.74em;
    color: var(--bordeaux);
    display: inline-block;
    vertical-align: 0.06em;
    margin-left: 0.15em;
}

/* Interligne plus serré que le corps de texte courant : relevé à environ 1,35
   sur la maquette, contre 1,6 hérité du réglage global. */
.banniere__introduction {
    font-size: clamp(0.95rem, 1.35vw, 1.2rem);
    line-height: 1.28;
    color: var(--texte-doux-sur-photo);
    margin-bottom: var(--espace-4);
    max-width: 22em;
}

/*
 * Coupures de ligne choisies, pour retrouver le découpage de la maquette :
 * « … coulées avec amour » / « … de chaque saison » / « un moment magique. »
 * Elles disparaissent sur petit écran, où la largeur disponible décide seule.
 */
.saut-large { display: none; }

@media (min-width: 1025px) {
    .saut-large { display: inline; }
}

/* Note manuscrite, posée entre le texte et l'image. */

.banniere__emotion {
    position: absolute;
    left: 75%;
    margin-left: -1.5rem;
    top: 67%;
    z-index: 10;
    margin: 0;
    font-family: var(--police-manuscrite);
    font-size: var(--taille-l);
    line-height: 1.3;
    color: var(--rose);
    /* Elle repose sur le fondu : ce halo clair la détache de la photo. */
    text-shadow: 0 1px 8px rgba(253, 244, 237, 0.9);
    transform: rotate(-7deg);
    text-align: center;
    
}
.banniere__emotion p { margin: 0; }
.banniere__emotion-coeur { display: block; font-size: var(--taille-base); }

/* Pastille en forme de galet, en haut à droite. */
.pastille {
    position: absolute;
    top: var(--espace-4);
    right: var(--espace-4);
    z-index: 2;
    background: var(--creme);
    font-family: var(--police-manuscrite);
    font-size: var(--taille-m);
    line-height: 1.3;
    color: var(--bordeaux-profond);
    padding: var(--espace-3) var(--espace-4);
    border-radius: 42% 58% 54% 46% / 52% 44% 56% 48%;
    box-shadow: var(--ombre-flottante);
    text-align: center;
    margin: 0;
}

/* — Bande de réassurance — */
.reassurance { background: var(--creme); border-block: 1px solid var(--creme-sombre); }
.reassurance__liste {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 0;
    padding-block: var(--espace-2);
}
.reassurance__element {
    display: flex;
    align-items: center;
    gap: var(--espace-2);
    padding-inline: var(--espace-3);
    font-size: var(--taille-base);
    line-height: 1.3;
    color: var(--texte-doux);
}
/*
 * Séparateurs entre les engagements, comme sur la maquette. Ils suivent la
 * grille : un trait seulement entre deux colonnes voisines, jamais en début de
 * ligne — sinon il apparaît sous l'élément du dessus, sans rien séparer.
 */
.reassurance__element + .reassurance__element {
    border-left: 1px solid var(--creme-sombre);
}
.reassurance__element strong { color: var(--texte); font-weight: 600; }
.reassurance__icone {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--rayon-rond);
    background: var(--rose-pale);
    color: var(--bordeaux-vif);
}
.reassurance__icone svg { width: 24px; height: 24px; }

/* — Sections — */
/* Les sections se suivent de près sur la maquette : l'air vient des cartes,
   pas de grands vides entre les blocs. */
.section { padding-block: var(--espace-4); }
/* Le titre reste centré sur la page : les deux côtés occupent la même largeur,
   sinon le bouton de droite décale le titre vers la gauche. */

.section_famille{
    width: 100%;
}
.section_bougie{

    max-width: var(--largeur-contenu);
}
.section__entete {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--espace-3);
    margin-bottom: var(--espace-4);
}
.section__entete > :first-child { grid-column: 2; }
.section__entete > .bouton { grid-column: 3; justify-self: end; }
.section__titre {
    font-size: var(--taille-xl);
    color: var(--bordeaux-profond);
    text-align: center;
    flex: 1;
}
.section__titre--categories{
    margin-bottom: 50px;
}
.section__titre--centre { margin-bottom: var(--espace-4); }
.section__sous-titre {
    text-align: center;
    color: var(--texte-doux);
    font-size: var(--taille-s);
    margin: var(--espace-1) 0 0;
}

/* — Familles de produits — */
.familles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * Structure relevée sur la maquette : la carte est un cadre rose, la photo y
 * est posée avec une marge et ses propres coins arrondis, et le libellé occupe
 * une bande en bas. La photo ne sert pas de fond au texte — c'est ce qui donne
 * son allure de vignette plutôt que de bandeau.
 */
.famille {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 260 / 242;
    padding: 6px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--rose-pale);
}
.famille img {
    width: 100%;
    height: 68%;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.famille__lien {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-1);
    flex: 1;
    padding: 0 var(--espace-1) 0 var(--espace-2);
    font-family: var(--police-titre);
    font-size: var(--taille-base);
    font-weight: 600;
    line-height: 1.15;
    color: var(--bordeaux-profond);
}
.famille__fleche {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--rayon-rond);
    background: var(--bordeaux-vif);
    color: var(--texte-inverse);
    font-size: var(--taille-s);
    transition: transform var(--transition);
}
/* Étend le lien natif à la photo et à toute la surface de la carte. */
.famille__lien::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.famille:focus-within {
    outline: 3px solid var(--bordeaux-vif);
    outline-offset: 3px;
}
.famille:hover .famille__fleche { transform: translateX(2px); }
.familles__attente { grid-column: 1 / -1; color: var(--texte-doux); }

/* — Cartes produit — */
/*
 * Les produits défilent horizontalement : le catalogue en contient 146, une
 * vitrine de sept est une fenêtre, pas une liste. Le défilement est natif —
 * doigt, trackpad, clavier — et les flèches ne font que le piloter.
 */
.produits__cadre {
    display: flex;
    align-items: center;
    gap: var(--espace-2);
}
.produits {
    display: grid;
    grid-auto-flow: column;
    /* Sept cartes visibles à la largeur de la maquette, les suivantes à portée
       de défilement. */
    grid-auto-columns: calc((100% - 6 * 12px) / 7);
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: 2px var(--espace-2);

    /*
     * La piste occupe toute la largeur pour que les cartes défilent jusqu'aux
     * bords, mais son contenu reste aligné sur la grille du site.
     *
     * Un élément vide en tête de liste ne peut pas tenir ce rôle : le script
     * remplace tous les enfants de la piste au chargement des produits, et il
     * disparaîtrait. `scroll-padding` fait en plus respecter cette marge au
     * calage — sans lui, la carte suivante viendrait se coller au bord.
     */
    padding-inline: max(var(--marge-mobile), calc((100vw - var(--largeur-contenu)) / 2));
    scroll-padding-inline: max(var(--marge-mobile), calc((100vw - var(--largeur-contenu)) / 2));

    scrollbar-width: none;
}

.produits::-webkit-scrollbar { display: none; }
.carte-produit { scroll-snap-align: start; }

.produits__fleche {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--rayon-rond);
    background: var(--creme);
    color: var(--bordeaux-profond);
    font-size: var(--taille-l);
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}
.produits__fleche:hover { background: var(--rose-pale); }
.produits__fleche[disabled] { opacity: 0.3; cursor: default; }
.produits__attente,
.produits__erreur,
.produits__vide { grid-column: 1 / -1; color: var(--texte-doux); }
.produits__erreur { color: var(--bordeaux-vif); }

.carte-produit { display: flex; flex-direction: column; }
.carte-produit__media {
    border-radius: var(--rayon-m);
    overflow: hidden;
    background: var(--creme-sombre);
    aspect-ratio: 1;
}
.carte-produit__media img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Photo détourée dans la vitrine : le panneau crème part du haut de la carte,
 * au même niveau que les autres, et s'arrête avant le bas ; le produit, photo
 * entière, en sort par le bas. Le ruban « Nouveau » reste au-dessus du
 * produit, dans le coin, comme sur les autres cartes.
 */
.carte-produit__media--detouree { background: transparent; overflow: visible; }
.carte-produit__media--detouree::before {
    content: "";
    position: absolute;
    inset: 0 0 12%;
    z-index: 0;
    border-radius: var(--rayon-m);
    background: var(--creme-sombre);
}
/* Posée par-dessus le cadre, la photo n'en change pas la taille : les titres
   des cartes restent alignés. */
.carte-produit__media img.carte-produit__photo--detouree {
    position: absolute;
    inset: 0 0 -6%;
    z-index: 2;
    width: 100%;
    height: 106%;
    object-fit: contain;
    padding: 0 6%;
    filter: drop-shadow(0 14px 14px rgb(100 18 28 / 20%));
}
.carte-produit__media--detouree .rubans-produit { inset: 0 0 12%; border-radius: var(--rayon-m); }
.carte-produit__media--detouree .ruban-produit--nouveau { z-index: 3; }
/*
 * Le nom est coupé à deux lignes, avec une ellipse.
 *
 * La coupure est faite par le navigateur, à la largeur réelle de la carte :
 * aucun mot n'est tranché au milieu, et rien n'est perdu — le nom entier reste
 * dans le document, donc lu par les lecteurs d'écran et affiché en entier sur
 * la fiche produit.
 *
 * Le plus long du catalogue fait 43 caractères : deux lignes suffisent partout
 * aujourd'hui. La coupure est là pour ce que Galou créera demain.
 */
.carte-produit__titre {
    font-family: var(--police-corps);
    font-size: var(--taille-s);
    font-weight: 600;
    text-align: center;
    margin: var(--espace-2) 0 var(--espace-1);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    /* Deux lignes réservées même pour un nom court : les prix et les boutons
       des cartes voisines restent alignés. */
    min-height: calc(2 * 1.6 * var(--taille-s));
}

/* Sur la fiche produit, le nom s'affiche en entier : c'est là qu'on le lit. */
.fiche-produit__titre {
    font-family: var(--police-titre);
    font-size: var(--taille-xl);
    color: var(--bordeaux-profond);
    margin-bottom: var(--espace-2);
}
.carte-produit__prix {
    text-align: center;
    color: var(--texte-doux);
    font-size: var(--taille-s);
    margin: 0 0 var(--espace-2);
}
.carte-produit__depuis { font-size: var(--taille-xs); }
.carte-produit__action { width: 100%; justify-content: center; }
.section_bougie .carte-produit {
    position: relative;
}
.section_bougie .carte-produit__action::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--rayon-m);
}
.section_bougie .carte-produit:focus-within {
    outline: 2px solid var(--bordeaux-vif);
    outline-offset: 2px;
    border-radius: var(--rayon-m);
}
.carte-produit__media,
.carte__media {
    position: relative;
    isolation: isolate;
}

/*
 * Statuts posés sur la photo. « Nouveau » est un ruban diagonal dans le coin
 * haut droit ; « Épuisé » une pastille dans le coin haut gauche. Chacun a son
 * coin : quand les deux s'appliquent, ils ne se croisent plus.
 */
/*
 * Le conteneur ne crée pas d'empilement à lui seul : chaque statut a son
 * propre niveau. Sur une photo détourée, le produit passe ainsi entre le ruban
 * « Nouveau » (derrière) et la pastille « Épuisé » (devant) — voir
 * boutique.css et produit.css.
 */
.rubans-produit {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.ruban-produit {
    position: absolute;
    font-family: var(--police-corps);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
}
.ruban-produit--nouveau {
    z-index: 1;
    top: 33px;
    right: -49px;
    width: 210px;
    padding: 7px 0;
    transform: rotate(45deg);
    background: #46604c;
    letter-spacing: 0.035em;
    text-align: center;
    box-shadow: 0 3px 6px rgb(0 0 0 / 20%);
}
.ruban-produit--indisponible {
    z-index: 4;
    top: var(--espace-1);
    left: var(--espace-1);
    padding: 5px 12px;
    border-radius: var(--rayon-rond);
    background: rgb(51 48 44 / 85%);
    color: var(--texte-inverse);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgb(0 0 0 / 14%);
}
/* La photo d'un produit épuisé s'efface un peu : on le voit sans lire. */
.produit-indisponible img {
    filter: grayscale(0.6);
    opacity: 0.75;
}

/* — Atelier — */
/* L'image part du bord gauche de l'écran, la citation touche le bord droit :
   c'est ce cadrage qui donne son rythme à la section sur la maquette. */
.atelier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.75fr);
    gap: var(--espace-4);
    align-items: center;
    background: var(--creme);
    padding-block: var(--espace-6);
    overflow: hidden;
}
.atelier__texte { padding-right: var(--espace-2); }
.atelier__image { position: relative; }
/*
 * `height: auto` est indispensable : sans lui, l'attribut height du HTML fixe
 * la hauteur et `aspect-ratio` est ignoré — l'image gardait ses 1218 px et
 * étirait la section à plus du double de sa hauteur utile.
 */
.atelier__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.86;
    object-fit: cover;
    border-radius: 0 var(--rayon-l) var(--rayon-l) 0;
}
/*
 * Note manuscrite posée sur la photo, comme sur la maquette : blanche, au
 * milieu de l'image et non en bas, légèrement inclinée, le cœur sur sa propre
 * ligne. L'ombre portée la détache du fond, qui est clair par endroits.
 */
.atelier__manuscrit {
    position: absolute;
    left: 9%;
    top: 50%;
    transform: translateY(-50%) rotate(-4deg);
    margin: 0;
    font-family: var(--police-manuscrite);
    font-size: clamp(1.25rem, 1.9vw, 1.7rem);
    line-height: 1.0;
    color: #fff;
    text-shadow: 0 2px 10px rgba(60, 25, 10, 0.55);
    pointer-events: none;
}
.atelier__coeur {
    display: block;
    margin-top: var(--espace-1);
    /* Le cœur est centré sous le bloc, pas aligné sur la dernière ligne. */
    text-align: center;
}
.atelier__coeur svg {
    width: 1.5em;
    height: 1.5em;
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(60, 25, 10, 0.5));
}
.atelier__titre { font-size: var(--taille-xl); color: var(--bordeaux-profond); margin-bottom: var(--espace-2); }
.atelier__texte p { color: var(--texte-doux); margin-bottom: var(--espace-3); }
/*
 * Dessin au trait, posé en filigrane entre le texte et la citation.
 * `multiply` fait disparaître son fond blanc dans le crème de la section :
 * sans lui, il faudrait un PNG détouré. Purement décoratif, donc alt vide.
 */
.atelier__dessin img {
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
    opacity: 0.85;
}

.atelier__citation blockquote {
    font-family: var(--police-manuscrite);
    font-size: var(--taille-l);
    color: var(--bordeaux-profond);
    background: var(--peche);
    padding: var(--espace-4) var(--espace-3);
    border-radius: var(--rayon-s);
    margin: 0 0 0 auto;
    max-width: 320px;
    box-shadow: var(--ombre-carte);
    transform: rotate(-1.5deg);
}

/* — Bandeau promotionnel — */
/*
 * Deux photos, une à chaque extrémité, et une bande claire au centre pour le
 * texte : c'est la composition de la maquette. Une seule image étirée sur toute
 * la largeur ne la reproduit pas — le sujet finit au milieu, là où doit se
 * trouver l'offre.
 *
 * Chacune se fond vers le centre par un masque, ce qui évite tout bord net.
 */
.promotion {
    position: relative;
    isolation: isolate;
    background: var(--peche);
    overflow: hidden;
    /* 233 px relevés sur la maquette à 1440 px de large. */
    min-height: 233px;
    display: flex;
    align-items: center;
}
.promotion::before,
.promotion::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    /* Un quart de chaque côté : au-delà, la photo remonte sous l'offre. */
    width: 25%;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.promotion::before {
    left: 0;
    background-image: url("/images/rendus/promo-gauche-760.webp");
    -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
    mask-image: linear-gradient(to right, #000 52%, transparent 100%);
}
.promotion::after {
    right: 0;
    background-image: url("/images/rendus/promo-droite-760.webp");
    -webkit-mask-image: linear-gradient(to left, #000 52%, transparent 100%);
    mask-image: linear-gradient(to left, #000 52%, transparent 100%);
}

.promotion__contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-4);
    flex-wrap: wrap;
    width: 100%;
    padding-block: var(--espace-3);
    /* Le titre démarre à 230 px du bord sur la maquette : la citrouille occupe
       tout le premier sixième du bandeau. */
    padding-inline: clamp(var(--espace-3), 16vw, 230px) clamp(var(--espace-3), 4.5vw, 64px);
}
.promotion__titre {
    font-family: var(--police-manuscrite);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.15;
    /* Blanc sur la photo, comme la maquette : le titre est posé sur les
       citrouilles, hors du voile clair. */
    color: #fff;
    text-shadow: 0 2px 12px rgba(80, 30, 10, 0.55);
    margin: 0;
}
/*
 * L'échéance coiffe le « −15 % », et le détail se place à sa droite : c'est la
 * disposition de la maquette. Une grille nommée l'obtient sans rien changer au
 * balisage, qui garde son ordre de lecture naturel.
 */
.promotion__offre {
    display: grid;
    grid-template-areas:
        "echeance echeance"
        "remise   detail";
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: var(--espace-2);
    row-gap: 2px;
}
.promotion__echeance { grid-area: echeance; justify-self: center; }
.promotion__remise { grid-area: remise; }
.promotion__detail { grid-area: detail; }
.promotion__contenu { gap: var(--espace-3); }
.promotion__remise {
    font-family: var(--police-titre);
    font-weight: 700;
    /* Le « −15 % » domine le bandeau : 112 px de chiffre relevés sur la
       maquette, soit un corps d'environ 7 rem. */
    font-size: clamp(2.8rem, 6.4vw, 5.6rem);
    color: var(--bordeaux-vif);
    margin: 0;
    line-height: 0.92;
}
.promotion__remise span { font-size: 0.45em; }
.promotion__echeance,
.promotion__detail { font-size: var(--taille-s); color: var(--texte-doux); margin: 0; line-height: 1.35; }
.promotion__detail strong { color: var(--bordeaux-profond); }

/* — Avis — */
/*
 * Les avis défilent horizontalement en grand écran, et s'empilent en dessous :
 * une carte par ligne se lit mieux au pouce qu'un défilement latéral, et la
 * boutique n'en publie pas assez pour qu'un carrousel ait du sens.
 */
.avis {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: var(--espace-3);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.avis::-webkit-scrollbar { display: none; }

/* Un seul avis publié : il se centre au lieu de s'étirer sur toute la largeur. */
.avis--seul {
    grid-auto-columns: min(520px, 100%);
    justify-content: center;
}

.avis__carte {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--espace-1);
    background: var(--blanc-chaud);
    border: 1px solid var(--creme-sombre);
    border-radius: var(--rayon-m);
    padding: var(--espace-3);
    text-align: center;
}
.avis__etoiles { color: #e8a020; margin: 0; letter-spacing: 0.1em; }
.avis__carte blockquote {
    margin: 0;
    font-size: var(--taille-s);
    line-height: 1.5;
    color: var(--texte-doux);
}
.avis__auteur { font-size: var(--taille-xs); font-weight: 600; margin: 0; }
.avis__produit {
    font-size: var(--taille-xs);
    color: var(--texte-doux);
    font-style: italic;
    margin: 0;
}
.avis__attente { color: var(--texte-doux); text-align: center; }

/* — Infolettre — */
.infolettre { background: var(--rose-tres-pale); }
.infolettre__contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-4);
    flex-wrap: wrap;
    padding-block: var(--espace-4);
}
.infolettre__manuscrit {
    font-family: var(--police-manuscrite);
    font-size: var(--taille-l);
    color: var(--bordeaux-vif);
    margin: 0;
}
.infolettre__titre { font-size: var(--taille-m); color: var(--bordeaux-profond); }
.infolettre__texte p { font-size: var(--taille-s); color: var(--texte-doux); margin: var(--espace-1) 0 0; }
.infolettre__formulaire { display: flex; gap: var(--espace-1); }
.infolettre__formulaire input {
    padding: 0.75rem var(--espace-2);
    border: 1px solid var(--creme-sombre);
    border-radius: var(--rayon-rond);
    font: inherit;
    min-width: 240px;
}

/* — Pied de page — */
.pied { background: var(--bordeaux-profond); color: var(--texte-inverse); }
.pied__contenu {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr;
    gap: var(--espace-4);
    padding-block: var(--espace-6);
}
.logo__marque--pied { color: var(--texte-inverse); }
.pied__titre { font-family: var(--police-corps); font-size: var(--taille-s); margin-bottom: var(--espace-2); }
.pied__colonne ul { list-style: none; margin: 0; padding: 0; display: grid; }
/*
 * Les liens du pied sont espacés pour offrir une cible tactile confortable :
 * sur téléphone, 17 px de hauteur se rataient une fois sur deux.
 */
.pied__colonne a, .pied__reseaux a {
    display: inline-block;
    padding-block: 0.2rem;
    font-size: var(--taille-s);
    opacity: 0.85;
}
/*
 * Les cibles passent à 44 px sur les écrans tactiles seulement : à la souris,
 * ce même espacement étirerait le pied de page bien au-delà de la maquette.
 */
@media (pointer: coarse) {
    .pied__colonne a, .pied__reseaux a { padding-block: 0.7rem; }
}
.pied__colonne a:hover, .pied__reseaux a:hover { opacity: 1; text-decoration: underline; }
.pied__reseaux { display: flex; gap: var(--espace-2); margin-bottom: var(--espace-2); }
.pied__reseaux svg { width: 22px; height: 22px; }
.pied__marque p, .pied__colonne p { font-size: var(--taille-s); opacity: 0.85; }
.pied__garanties {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--espace-2);
    font-size: var(--taille-s);
    opacity: 0.9;
}
.pied__garanties li { display: flex; align-items: center; gap: var(--espace-2); }
.pied__icone { display: grid; place-items: center; flex-shrink: 0; }
.pied__icone svg { width: 20px; height: 20px; }
.pied__bas {
    display: flex;
    justify-content: space-between;
    gap: var(--espace-2);
    flex-wrap: wrap;
    padding-block: var(--espace-2);
    border-top: 1px solid var(--bordeaux-clair);
    font-size: var(--taille-xs);
    opacity: 0.8;
}
.pied__signature { font-family: var(--police-manuscrite); font-size: var(--taille-base); }

/* — Adaptation aux petits écrans — */
/*
 * Nombre de cartes visibles selon la largeur. Chaque palier vise une carte
 * d'au moins 180 px : en dessous, le nom se hache et le bouton casse.
 */
@media (max-width: 1400px) {
    .produits { grid-auto-columns: calc((100% - 5 * 12px) / 6); }
    .familles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (max-width: 1200px) {
    .produits { grid-auto-columns: calc((100% - 4 * 12px) / 5); }
}

@media (max-width: 1000px) {
    .produits { grid-auto-columns: calc((100% - 3 * 12px) / 4); }
}

@media (max-width: 820px) {
    .produits { grid-auto-columns: calc((100% - 2 * 12px) / 3); }
}

@media (max-width: 1024px) {
    /*
     * La bannière garde sa disposition à toutes les tailles : texte à gauche,
     * photo à droite derrière son fondu. Empiler les deux ferait perdre le
     * cadrage de la maquette. Ce qui s'adapte, c'est la part de largeur prise
     * par chacun et la taille des textes.
     */
    .banniere { min-height: 460px; }
    .banniere__image { inset: 0 0 0 38%; }
    .banniere__texte { width: 60%; padding-inline: var(--espace-4); }
    /*
     * Sous cette largeur, il n'y a plus d'espace libre entre le texte et la
     * photo : la note quitte le positionnement absolu et reprend sa place dans
     * le flux, sous le bouton. Elle reste visible, sans rien recouvrir.
     */
    .banniere__emotion {
        position: relative;
        margin-top: var(--espace-3);
        top: 20px;
        left: -20%;
        transform-origin: left center;
    }
    
    .pastille { top: var(--espace-2); right: var(--espace-2); font-size: var(--taille-base); }
    /* Les avis s'empilent : un par ligne, dans l'ordre de lecture. */
    .avis {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow-x: visible;
    }
    .avis--seul { grid-auto-columns: auto; }
    /*
     * Même principe que la bannière : plutôt que d'empiler photo, texte et
     * citation sur 970 px, la photo devient le fond de la section et le texte
     * se pose dessus. Un fond remonte en dégradé depuis le bas pour garantir
     * la lecture, en laissant respirer le haut de l'image.
     */
    .atelier {
        position: relative;
        /*
         * Grille en deux zones : le texte occupe toute la largeur, puis le
         * dessin et la citation se partagent la rangée du bas — le même
         * voisinage qu'en grand écran.
         */
        display: grid;
        grid-template-columns: 0.75fr 1.25fr;
        grid-template-areas:
            "texte  texte"
            "dessin citation";
        min-height: 620px;
        padding-block: 0;
        isolation: isolate;
    }

    /*
     * Un seul fond pour toute la moitié basse, posé par-dessus la photo.
     * Le donner élément par élément laissait réapparaître des bandes d'image
     * entre eux : la grille répartit l'espace libre où elle veut.
     */
    .atelier::after {
        content: "";
        position: absolute;
        inset: 190px 0 0 0;
        z-index: -1;
        background: linear-gradient(to bottom,
            rgba(253, 244, 237, 0) 0%,
            rgba(253, 244, 237, 0.96) 9%,
            var(--creme) 16%);
        pointer-events: none;
    }
    .atelier__image {
        position: absolute;
        inset: 0;
        z-index: -2;
    }
    .atelier__image img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        /* Cadrage haut : c'est la coulée et les verres qui racontent la scène,
           et ils occupent le tiers supérieur de la photo. */
        object-position: bottom 8%;
        border-radius: 50px;
    }
    /* La note remonte dans la partie de la photo restée visible. */
    .atelier__manuscrit {
        top: 80px;
        left: 15%;
        font-size: 35px;
        transform: rotate(-4deg);
    }
    .atelier__texte {
        grid-area: texte;
        position: relative;
        margin-top: 230px;
        padding: var(--espace-6) var(--espace-3) var(--espace-3);
    }
    /*
     * Dessin et citation partagent le même fond, qui prolonge celui du texte :
     * sans cela, une bande de photo réapparaissait entre les deux rangées.
     */
    .atelier__citation {
        grid-area: citation;
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 var(--espace-3) var(--espace-4) 0;
    }
    .atelier__citation blockquote { max-width: none; margin: 0; }

    /* Le dessin garde sa place auprès de la citation, comme en grand écran. */
    .atelier__dessin {
        grid-area: dessin;
        display: flex;
        align-items: center;
        padding: 0 var(--espace-1) var(--espace-4) var(--espace-3);
    }
    .pied__contenu { grid-template-columns: repeat(2, 1fr); }
    /*
     * Deux colonnes : le trait ne sépare que les paires, pas les rangées.
     * L'annulation reprend le sélecteur « + » de la règle de base : une règle
     * de spécificité moindre ne l'aurait pas emporté, et un trait serait resté
     * au début de la seconde rangée.
     */
    .reassurance__liste { grid-template-columns: repeat(2, 1fr); }
    .reassurance__element + .reassurance__element { border-left: 0; }
    .reassurance__element { padding-block: var(--espace-2); }
    .reassurance__element:nth-child(2n) { border-left: 1px solid var(--creme-sombre); }

    /* La navigation devient un panneau, ouvert par le bouton. Elle n'est jamais
       simplement masquée : sans elle, le site n'est plus navigable. */
    .bouton-menu { display: grid; }
    .navigation {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 45;
        width: min(320px, 82vw);
        padding: var(--espace-8) var(--espace-4) var(--espace-4);
        background: var(--blanc-chaud);
        box-shadow: var(--ombre-flottante);
        transform: translateX(100%);
        transition: transform var(--transition);
        overflow-y: auto;
    }
    .navigation--ouverte { transform: translateX(0); }
    .navigation__liste { flex-direction: column; gap: 0; }
    .navigation__lien {
        display: block;
        padding: var(--espace-2) 0;
        font-size: var(--taille-m);
        border-bottom: 1px solid var(--creme-sombre);
    }
    .navigation__lien:hover,
    .navigation__lien--actif { border-bottom-color: var(--bordeaux-vif); }
}

/* Aucune animation pour qui demande à ne pas en voir. */
@media (prefers-reduced-motion: reduce) {
    .navigation,
    .bouton-menu__barres,
    .bouton-menu__barres::before,
    .bouton-menu__barres::after,
    .bouton { transition: none; }
}

@media (max-width: 768px) {
    .banniere { min-height: 420px; }
    /* La photo recule encore : sous cette largeur, c'est le texte qui prime. */
    .banniere__image { inset: 0 0 0 46%; }
    .banniere__texte { width: 68%; }
    /* Fondu plus court, pour que la zone de lecture reste claire. */
    .banniere__image img {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 16%, #000 40%);
        mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 16%, #000 40%);
    }
}

@media (max-width: 560px) {
    .banniere { min-height: 380px; }
    .banniere__image { inset: 0 0 0 48%; }
    .banniere__texte {
        width: 74%;
        padding-inline: var(--espace-3);
        padding-block: var(--espace-4);
        /* Fondu plus court qu'en grand écran : le bloc occupe déjà les trois
           quarts de la largeur, la photo a besoin du reste pour exister. */
        background: linear-gradient(to right,
            var(--rose-pale) 0%,
            rgba(253, 227, 218, 0.95) 48%,
            rgba(253, 227, 218, 0) 92%);
    }

    /* Le nom en entier casse sur quatre lignes à côté de l'emblème : on ne
       garde que l'emblème, le nom reste lisible par l'aria-label du lien. */
    .logo__marque { display: none; }
    .logo__embleme { width: 48px; height: 48px; }

    /* La pastille recouvrait le titre : plus de place pour elle à cette
       largeur. */
    .pastille { display: none; }

    /* Le bandeau d'annonce occupait trois lignes : une seule promesse suffit. */
    .annonce__contenu > :not(:first-child):not(:nth-child(2)) { display: none; }

    /* Les tirets décoratifs poussaient le surtitre à se couper mal. */
    .surtitre { display: block; }
    .surtitre::before, .surtitre::after { content: none; }

    /* Le titre de section et son bouton se superposaient en colonnes étroites. */
    .section__entete { grid-template-columns: 1fr; justify-items: center; }
    .section__entete > :first-child { grid-column: 1; }
    .section__entete > .bouton { grid-column: 1; justify-self: center; }
    .section__titre { font-size: var(--taille-base); }
    /*
     * Un engagement par ligne : à deux colonnes, « Cire de soja naturelle » se
     * coupait sur quatre lignes et les blocs se chevauchaient. Les traits
     * passent à l'horizontale, seule orientation qui sépare encore quelque
     * chose.
     */
    .reassurance__liste { grid-template-columns: 1fr; }
    .reassurance__element {
        padding-inline: 0;
        padding-block: 0.7rem;
    }
    .reassurance__element:nth-child(2n) { border-left: 0; }
    .reassurance__element + .reassurance__element {
        border-left: 0;
        border-top: 1px solid var(--creme-sombre);
    }

    .familles { grid-template-columns: repeat(2, 1fr); }
    /*
     * Une carte et trois quarts : à 2,4 cartes, chacune tombait à 133 px et
     * « Voir le produit » cassait sur deux lignes. La carte coupée à droite
     * suffit à signaler qu'on peut faire défiler.
     */
    .produits { grid-auto-columns: calc((100% - 12px) / 1.75); }
    .produits__fleche { display: none; }
    /* Bouton plus compact : à cette largeur, chaque pixel de marge compte. */
    .carte-produit__action { padding-inline: var(--espace-2); }
    .promotion__contenu { flex-direction: column; text-align: center; }
    .promotion__offre { justify-content: center; }
    .pied__contenu { grid-template-columns: 1fr; }
    .infolettre__formulaire { width: 100%; }
    .infolettre__formulaire input { min-width: 0; flex: 1; }
}

.infolettre__formulaire { flex-wrap: wrap; }
.infolettre__accord, .infolettre__formulaire [role="status"] { flex-basis: 100%; font-size: var(--taille-s); }
.infolettre__accord input[type="checkbox"] { flex: none; width: 18px; height: 18px; min-width: 18px; padding: 0; margin-right: var(--espace-1); }
.infolettre__formulaire button:disabled { opacity: .65; cursor: not-allowed; }

/* Sélection de l’accueil : cartes compactes et aperçu de la suivante. */
.section_bougie .section__entete {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 20px;
    padding-inline: var(--marge-mobile);
}
.section_bougie .section__entete > :first-child,
.section_bougie .section__entete > .bouton {
    grid-column: 1;
    justify-self: center;
    min-width: 0;
}
.section_bougie .section__entete > .bouton {
    white-space: nowrap;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 22px;
    border-width: 1px;
    background: var(--blanc-chaud);
}
.section_bougie .section__entete > .bouton:hover {
    background: var(--bordeaux-vif);
}
.section_bougie .produits {
    grid-auto-columns: calc((100% - 80px) / 4.6);
    gap: 24px;
    padding-block: 6px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--bordeaux-clair) transparent;
}
.section_bougie .produits::-webkit-scrollbar { display: block; height: 5px; }
.section_bougie .produits::-webkit-scrollbar-thumb {
    background: var(--bordeaux-clair);
    border-radius: 8px;
}
.section_bougie .carte-produit { min-width: 0; }
.section_bougie .carte-produit__titre {
    display: block;
    overflow: visible;
    font-size: 1rem;
    line-height: 1.5;
    min-height: 3em;
    margin-top: 16px;
}
.section_bougie .carte-produit__prix {
    margin-top: auto;
    padding-top: 8px;
    color: var(--bordeaux-profond);
    font-size: 1.125rem;
    font-weight: 700;
}
.section_bougie .carte-produit__action { margin-top: 8px; }
@media (max-width: 1000px) {
    .section_bougie .produits { grid-auto-columns: calc((100% - 40px) / 2.8); gap: 20px; }
}
@media (max-width: 600px) {
    .section_bougie .produits { grid-auto-columns: 70%; gap: 14px; }
}

/* Quatre portes d’entrée permanentes dans la boutique. */
.section_famille > .bouton { margin-top: 24px; }
.section_famille .familles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.section_famille .famille { aspect-ratio: auto; padding: 8px 8px 20px; }
.section_famille .famille img { height: auto; aspect-ratio: 6 / 5; }
.section_famille .famille__lien { flex: none; min-height: 64px; padding: 12px 8px; font-size: 1.125rem; text-decoration: none; }
.famille__description { margin: 0; padding: 0 8px; color: var(--texte-doux); font-size: 0.9rem; line-height: 1.5; }
.saison {
    width: calc(100% - var(--marge-mobile) - var(--marge-mobile));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin-block: 24px 56px;
    padding: clamp(24px, 4vw, 56px);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 82% 48%, var(--rose-pale), transparent 65%),
        radial-gradient(ellipse at 35% 65%, var(--rose-tres-pale), transparent 70%);
    color: var(--bordeaux-profond);
}
.saison > div { max-width: 620px; min-width: 0; }
.saison__repere { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; }
.saison h2 { font-family: var(--police-titre); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; }
.saison p { margin: 0 0 20px; }
.saison__mot {
    flex: 0 1 340px;
    padding: 28px 24px;
    border: 1px solid rgb(143 72 80 / 25%);
    border-radius: 48% 48% 16px 16px;
    background: rgb(255 254 251 / 35%);
    color: var(--bordeaux-clair);
    min-width: 0;
    max-width: 100%;
    font-family: var(--police-manuscrite);
    font-size: clamp(1.75rem, 3vw, 3rem);
    line-height: 1.3;
    text-align: center;
}
.saison .bouton--principal { background: var(--bordeaux-vif); color: var(--blanc-chaud); border-color: var(--bordeaux-vif); }
.saison .bouton--principal:hover { background: var(--bordeaux-profond); }
.saison .bouton:focus-visible { outline: 3px solid var(--bordeaux-clair); outline-offset: 4px; }
@media (max-width: 1000px) {
    .section_famille .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 600px) {
    .section_famille .famille__lien { font-size: 1rem; gap: 6px; padding-inline: 0; }
    .section_famille .famille__fleche { width: 28px; height: 28px; }
    .famille__description { padding-inline: 0; font-size: 0.8rem; }
    .saison { margin-inline: auto; flex-direction: column; gap: 24px; padding: 28px 18px; }
    .saison > div { width: 100%; }
    .saison__mot { display: block; flex: none; width: 100%; padding: 20px; font-size: 2rem; }
    .saison .bouton { width: 100%; justify-content: center; text-align: center; }
    .section_bougie .carte-produit__titre { font-size: 0.9375rem; margin-top: 12px; }
}