/* ==========================================================================
   MERRYTTI - Site public
   Parti pris : une boutique de cadeaux en ligne. Bandeau d'information,
   barre de recherche au centre de l'en-tête, menu des rayons, vignettes
   produits en cartes blanches arrondies, pastilles rondes pour les
   univers, bandes de réassurance. Les couleurs restent celles de la
   marque : bordeaux, or et neutres teintés (base.css).
   ========================================================================== */

/* --- Ajustements du socle pour la vitrine ---------------------------------
   Les portails gardent leurs angles et leurs titres ; seul le site public
   adopte les coins arrondis et les titres en sans-serif gras d'une
   boutique en ligne. Playfair reste réservé à la carte cadeau et aux prix. */

.site-public {
    --rayon: 10px;
    --rayon-carte: 16px;
    --fond-gris: #F7F2F3;
    background: var(--blanc);
}

.site-public h1,
.site-public h2,
.site-public h3,
.site-public h4 {
    font-family: var(--sans);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.site-public h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.12; }
.site-public h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); line-height: 1.2; }
.site-public h3 { font-size: var(--t-l); line-height: 1.3; }
.site-public legend { font-family: var(--sans); font-weight: 800; font-size: var(--t-l); }

.site-public .bouton { border-radius: var(--rayon-pilule); padding-inline: var(--e-6); }
.site-public .bouton--petit { padding-inline: var(--e-4); }
.site-public .bouton--discret { padding-inline: var(--e-2); }
.site-public .bouton svg { flex: none; }

.site-public .prix { font-family: var(--sans); font-weight: 800; color: var(--bordeaux); }
.site-public .prix--barre { color: var(--encre-douce); font-weight: 500; }

/* Section de base */
.section { padding: var(--e-8) 0; }
.section--serree { padding: var(--e-7) 0; }
.section--voile { background: var(--fond-gris); }
.section--sombre { background: var(--bordeaux); color: var(--blanc); }
.section--sombre h2, .section--sombre h3 { color: var(--blanc); }
.section--sombre p { color: rgba(255, 255, 255, .82); }
.section--sombre .surtitre { color: var(--or); }
.section--sombre .filet { background: var(--or); }

.section__entete { max-width: 46rem; margin-bottom: var(--e-6); }
.section__entete p { color: var(--encre-douce); font-size: var(--t-l); margin-top: var(--e-3); }
.section--sombre .section__entete p { color: rgba(255, 255, 255, .78); }
.section__entete--rangee {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-4);
    max-width: none;
}
.section__entete--rangee p { margin-top: var(--e-2); }

/* Titre de section : gros titre, sous-titre discret, lien « voir tout ». */
.titre-section {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-3) var(--e-5);
    margin-bottom: var(--e-6);
}
.titre-section p { margin-top: var(--e-1); color: var(--encre-douce); }
.titre-section--centre { flex-direction: column; align-items: center; text-align: center; }
.titre-section--centre p { margin-inline: auto; }
.titre-section h2::after {
    /* Le filet or de la marque, devenu soulignement de titre. */
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: var(--e-3);
    border-radius: 3px;
    background: var(--or);
}
.titre-section--centre h2::after { margin-inline: auto; }

.lien-fleche {
    font-weight: 700;
    font-size: var(--t-s);
    color: var(--bordeaux);
    text-decoration: none;
    white-space: nowrap;
}
.lien-fleche:hover { color: var(--bordeaux-clair); }

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */

/* --- Bandeau d'information ------------------------------------------------ */

.bandeau-info {
    background: var(--bordeaux-fonce);
    color: rgba(255, 255, 255, .86);
    font-size: var(--t-xs);
}
.bandeau-info__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: 36px;
}
.bandeau-info__message {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    max-width: none;
}
.bandeau-info__message svg { color: var(--or); flex: none; }
.bandeau-info__message strong { color: var(--or); }
.bandeau-info__liens { display: flex; gap: var(--e-5); }
.bandeau-info__liens a { color: rgba(255, 255, 255, .86); text-decoration: none; white-space: nowrap; }
.bandeau-info__liens a:hover { color: var(--or); }

@media (max-width: 760px) {
    .bandeau-info__liens { display: none; }
    .bandeau-info__barre { justify-content: center; }
    .bandeau-info__message { min-width: 0; }
    .bandeau-info__message span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* --- Barre principale : logo, recherche, outils -------------------------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bordeaux);
    color: var(--blanc);
    box-shadow: 0 6px 18px -14px rgba(58, 0, 14, .55);
}

.entete__barre {
    display: flex;
    align-items: center;
    gap: var(--e-5);
    min-height: 80px;
}

/* La recherche occupe tout l'espace entre la marque et les outils. Le
   bouton or est posé à l'intérieur du champ blanc, avec une marge
   égale tout autour : il ne déborde plus de la pastille. */
.recherche {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    max-width: 640px;
    height: 50px;
    margin-inline: auto;
    padding: 4px 4px 4px var(--e-5);
    background: var(--blanc);
    border-radius: var(--rayon-pilule);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
    transition: box-shadow var(--transition);
}
.recherche:focus-within { box-shadow: 0 0 0 3px var(--or); }
.recherche__loupe { flex: none; display: grid; color: #9C8C8F; }
.recherche__champ {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--encre);
    font-size: var(--t-s);
    /* Safari dessine sinon son propre champ de recherche, arrondi et
       grisé, par-dessus le nôtre. */
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.recherche__champ::placeholder { color: #9C8C8F; opacity: 1; }
.recherche__champ::-webkit-search-decoration,
.recherche__champ::-webkit-search-results-button { -webkit-appearance: none; }
.recherche__champ::-webkit-search-cancel-button { cursor: pointer; }
.recherche__bouton {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    height: 42px;
    padding: 0 var(--e-5);
    border: 0;
    border-radius: var(--rayon-pilule);
    background: var(--or);
    color: var(--bordeaux-fonce);
    font-size: var(--t-s);
    font-weight: 800;
    cursor: pointer;
    transition: background var(--transition);
}
.recherche__bouton:hover { background: #F7D68C; }
.recherche__bouton svg { flex: none; }

.entete__outils {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    flex: none;
}

/* Outil : icône au-dessus de son libellé, comme sur les boutiques en ligne. */
.outil {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 60px;
    padding: 6px var(--e-2);
    border-radius: var(--rayon);
    color: var(--blanc);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.outil:hover,
.outil:focus-visible,
.outil.est-actif { background: rgba(255, 255, 255, .08); color: var(--or); }
.outil__icone { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.outil__libelle { font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; }

.nav__compteur {
    position: absolute;
    top: -7px; right: -11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px; height: 19px;
    padding-inline: 5px;
    border-radius: var(--rayon-pilule);
    background: var(--or);
    color: var(--bordeaux-fonce);
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--bordeaux);
}

/* Le bloc « compte » est commun aux quatre en-têtes (base.css). Sur le
   site public, il prend la forme des deux autres outils : l'icône au-dessus,
   le libellé dessous, sans cadre ni rôle - trois boutons identiques. */
.entete .compte__declencheur {
    flex-direction: column;
    gap: 3px;
    min-width: 64px;
    max-width: 8.5rem;
    padding: 6px var(--e-2);
    border: 0;
    border-radius: var(--rayon);
    background: transparent;
    color: var(--blanc);
    text-align: center;
}
.entete .compte__declencheur:hover,
.entete .compte__declencheur:focus-visible,
.entete .compte__declencheur[aria-expanded="true"] { background: rgba(255, 255, 255, .08); color: var(--or); }
.entete .compte__pastille {
    width: 24px; height: 24px;
    background: var(--or);
    color: var(--bordeaux-fonce);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 800;
}
.entete .compte__pastille--vide {
    width: 24px; height: 24px;
    border: 0;
    background: transparent;
    color: inherit;
}
.entete .compte__pastille--vide svg { width: 22px; height: 22px; }
.entete .compte__texte { display: block; max-width: 100%; }
.entete .compte__nom {
    color: inherit;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}
.entete .compte__role,
.entete .compte__chevron { display: none; }
.entete .compte__panneau { color: var(--encre); top: calc(100% + 8px); }

/* --- Menu des rayons ------------------------------------------------------ */

.nav {
    background: var(--blanc);
    border-bottom: 1px solid var(--ligne);
    color: var(--encre);
}
.nav__barre {
    display: flex;
    align-items: stretch;
    gap: var(--e-1);
    overflow-x: auto;
    scrollbar-width: none;
}
.nav__barre::-webkit-scrollbar { display: none; }
.nav__secondaire { display: none; }

.nav__lien {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    min-height: 52px;
    padding: 0 var(--e-3);
    color: var(--encre);
    font-size: var(--t-s);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition);
}
.nav__lien svg { color: var(--bordeaux); flex: none; }
.nav__lien::after {
    content: "";
    position: absolute;
    left: var(--e-3); right: var(--e-3); bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--or);
    transform: scaleX(0);
    transition: transform var(--transition);
}
.nav__lien:hover,
.nav__lien:focus-visible,
.nav__lien.est-actif { color: var(--bordeaux); }
.nav__lien:hover::after,
.nav__lien:focus-visible::after,
.nav__lien.est-actif::after { transform: scaleX(1); }
.nav__lien--tout { color: var(--bordeaux); }
.nav__lien--accent { margin-left: auto; color: var(--or-encre); }

/* --- Bouton du menu mobile ------------------------------------------------- */

.nav__bascule {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--rayon);
    background: rgba(255, 255, 255, .06);
    color: var(--blanc);
    cursor: pointer;
    position: relative;
    flex: none;
}
.nav__bascule span,
.nav__bascule span::before,
.nav__bascule span::after {
    position: absolute;
    width: 18px; height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--transition), background var(--transition);
}
.nav__bascule span { top: calc(50% - 1px); left: calc(50% - 9px); }
.nav__bascule span::before { content: ""; top: -6px; left: 0; }
.nav__bascule span::after  { content: ""; top: 6px; left: 0; }
.nav__bascule[aria-expanded="true"] span { background: transparent; }
.nav__bascule[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__bascule[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Tablette et téléphone : la recherche passe sur sa propre ligne, le
   menu des rayons devient un panneau ouvert par le bouton. */
@media (max-width: 960px) {
    .entete__barre {
        flex-wrap: wrap;
        gap: var(--e-3);
        min-height: 0;
        padding-block: var(--e-3);
    }
    .nav__bascule { display: block; }
    .entete__outils { margin-left: auto; }
    .recherche { order: 5; flex-basis: 100%; max-width: none; height: 46px; }
    .recherche__bouton { height: 38px; }

    .nav {
        display: none;
        position: absolute;
        left: 0; right: 0; top: 100%;
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 200px);
        overflow-y: auto;
        box-shadow: var(--ombre-flottante);
    }
    .nav__secondaire {
        display: flex;
        flex-wrap: wrap;
        gap: var(--e-2) var(--e-4);
        padding-block: var(--e-4) var(--e-5);
        border-top: 1px solid var(--ligne);
    }
    .nav__secondaire a { color: var(--encre-douce); font-size: var(--t-s); font-weight: 700; }
    .nav__secondaire a:hover { color: var(--bordeaux); }
    .nav[data-ouvert="1"] { display: block; }
    .nav__barre { flex-direction: column; overflow: visible; padding-block: var(--e-2); }
    .nav__lien { min-height: 50px; border-bottom: 1px solid var(--ligne); padding-inline: var(--e-2); }
    .nav__lien:last-child { border-bottom: 0; }
    .nav__lien::after { display: none; }
    .nav__lien--accent { margin-left: 0; }
}

@media (max-width: 560px) {
    .outil { min-width: 0; padding-inline: 6px; }
    .outil__libelle,
    .entete .compte__texte { display: none; }
    .entete .compte__declencheur { min-width: 0; padding-inline: 6px; }
    .outil--verifier { display: none; }
    .recherche { padding-left: var(--e-4); }
    .recherche__bouton { width: 38px; padding: 0; }
    .recherche__bouton span { display: none; }
}

/* ==========================================================================
   ACCUEIL
   ========================================================================== */

/* --- Vitrine : grand bandeau et deux encarts ------------------------------ */

.vitrine {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: var(--e-4);
    padding-block: var(--e-5) var(--e-4);
}

.vitrine--seule { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
.vitrine__encart--haut { grid-row: 1 / 3; }
.vitrine__principale--sans-carte { grid-template-columns: minmax(0, 1fr); }
.vitrine__principale {
    grid-row: 1 / 3;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr);
    align-items: center;
    gap: var(--e-6);
    padding: var(--e-7) var(--e-7);
    border-radius: var(--rayon-carte);
    overflow: hidden;
    color: var(--blanc);
    /* La photo passe sous un voile bordeaux : le texte garde son
       contraste, la marque garde sa couleur. */
    background: var(--bordeaux);
    isolation: isolate;
}
/* La photo vit sur un calque à part : il peut s'agrandir au survol sans
   déplacer le texte. Le voile bordeaux garde le contraste. */
.vitrine__principale::before,
.vitrine__encart--photo::before,
.appel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--photo, none) center / cover no-repeat;
    transition: transform 900ms cubic-bezier(.2, .6, .3, 1);
}
.vitrine__principale::after,
.vitrine__encart--photo::after,
.appel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.vitrine__principale::after {
    background: linear-gradient(100deg, rgba(58, 0, 14, .96) 0%, rgba(93, 1, 23, .88) 45%, rgba(93, 1, 23, .55) 100%);
}
.vitrine__principale:hover::before,
.vitrine__encart--photo:hover::before,
.appel:hover::before { transform: scale(1.06); }
.vitrine__principale > * { position: relative; z-index: 1; }

.vitrine__surtitre {
    display: inline-block;
    padding: 4px var(--e-3);
    border-radius: var(--rayon-pilule);
    background: rgba(240, 192, 100, .18);
    color: var(--or);
    font-size: var(--t-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.site-public .vitrine__titre {
    margin-top: var(--e-4);
    color: var(--blanc);
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    overflow-wrap: break-word;
}
.vitrine__intro {
    margin-top: var(--e-4);
    font-size: var(--t-m);
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
    max-width: 28rem;
}
.vitrine__actions,
.appel__actions {
    /* Deux boutons côte à côte, à toutes les tailles d'écran : sur un
       téléphone le libellé passe sur deux lignes plutôt que d'empiler
       les boutons. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: var(--e-3);
    margin-top: var(--e-6);
}
.vitrine__actions .bouton,
.appel__actions .bouton { padding-inline: var(--e-5); line-height: 1.2; text-align: center; }

/* Lien « Offrir à mon équipe », sous les deux boutons. */
.vitrine__lien-equipe {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin-top: var(--e-4);
    padding: var(--e-1) 0;
    color: rgba(255, 255, 255, .9);
    font-size: var(--t-s);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(240, 192, 100, .55);
    transition: color var(--transition), border-color var(--transition), gap var(--transition);
}
.vitrine__lien-equipe svg { color: var(--or); flex: none; }
.vitrine__lien-equipe:hover { color: var(--or); border-color: var(--or); gap: var(--e-3); }
.appel__actions { grid-column: 1 / -1; margin-top: 0; }

.vitrine__carte { margin: 0; transform: rotate(-4deg); }
.vitrine__carte .carte-cadeau { box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55); border-radius: 14px; }
.vitrine__carte figcaption {
    margin-top: var(--e-4);
    text-align: center;
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, .7);
    transform: rotate(4deg);
}

.vitrine__encart {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--e-1);
    padding: var(--e-5) var(--e-6);
    border-radius: var(--rayon-carte);
    text-decoration: none;
    color: var(--encre);
    transition: transform var(--transition), box-shadow var(--transition);
}
.vitrine__encart:hover { transform: translateY(-3px); box-shadow: var(--ombre-flottante); color: var(--encre); }
.vitrine__encart--or { background: linear-gradient(135deg, #F6D58F, var(--or)); color: var(--bordeaux-fonce); }
.vitrine__encart--voile { background: var(--bordeaux-voile); }
.vitrine__encart--photo {
    justify-content: flex-end;
    min-height: 220px;
    color: var(--blanc);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--bordeaux);
    transition: transform var(--transition), box-shadow var(--transition);
}
.vitrine__encart--photo::after {
    /* Voile assez dense sous le texte pour qu'il reste lisible quelle
       que soit la photo choisie au portail. */
    background: linear-gradient(to top, rgba(58, 0, 14, .96) 0%, rgba(58, 0, 14, .82) 50%, rgba(58, 0, 14, .35) 100%);
}
.vitrine__encart--photo > * { position: relative; z-index: 1; }
.vitrine__encart--photo:hover { color: var(--blanc); }
.vitrine__encart--photo .vitrine__encart-surtitre { color: var(--or); opacity: 1; }
.vitrine__encart--photo .vitrine__encart-lien { color: var(--or); }
.vitrine__encart--photo .vitrine__encart-picto { width: 44px; height: 44px; margin-bottom: auto; }
.vitrine__encart-picto {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin-bottom: var(--e-2);
    border-radius: 50%;
    background: var(--blanc);
    color: var(--bordeaux);
}
.vitrine__encart-surtitre { font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.vitrine__encart-titre { font-size: var(--t-l); font-weight: 800; line-height: 1.25; }
.vitrine__encart-lien { margin-top: var(--e-2); font-size: var(--t-s); font-weight: 800; color: var(--bordeaux); }

@media (max-width: 1080px) {
    .vitrine__principale { grid-template-columns: minmax(0, 1fr); padding: var(--e-6); }
    .vitrine__carte { max-width: 420px; transform: rotate(-2deg); }
}
@media (max-width: 820px) {
    .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
    .vitrine__principale { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
    .vitrine { grid-template-columns: minmax(0, 1fr); padding-top: var(--e-3); }
    .vitrine__principale { padding: var(--e-6) var(--e-5); }
    .vitrine__actions,
    .appel__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
    .vitrine__actions .bouton,
    .appel__actions .bouton { min-height: 50px; padding-inline: var(--e-3); font-size: var(--t-s); }
    .vitrine__encart { padding: var(--e-4) var(--e-5); }
}

/* --- Univers : pastilles rondes ------------------------------------------- */

.univers {
    display: grid;
    /* Colonnes plafonnées et centrées : trois catégories restent
       groupées au lieu de s'étaler sur toute la largeur. */
    grid-template-columns: repeat(auto-fit, minmax(110px, 180px));
    justify-content: center;
    gap: var(--e-5) var(--e-4);
}
.univers__lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-2);
    text-align: center;
    text-decoration: none;
    color: var(--encre);
}
.univers__rond {
    display: grid;
    place-items: center;
    width: 112px; height: 112px;
    border-radius: 50%;
    background: var(--bordeaux-voile);
    color: var(--bordeaux);
    border: 3px solid var(--blanc);
    box-shadow: 0 0 0 1px var(--ligne);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.univers__rond--plein { background: var(--bordeaux); color: var(--or); }
.univers__rond--photo { background: var(--bordeaux-voile); }
.univers__rond { overflow: hidden; }
.univers__rond img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.univers__lien:hover .univers__rond img { transform: scale(1.08); }
.univers__lien:hover .univers__rond {
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px var(--or), var(--ombre-flottante);
}
.univers__nom { font-weight: 800; font-size: var(--t-s); line-height: 1.3; }
.univers__lien:hover .univers__nom { color: var(--bordeaux); }
.univers__nombre { font-size: var(--t-xs); color: var(--encre-douce); margin-top: -4px; }

@media (max-width: 560px) {
    .univers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4) var(--e-2); }
    .univers__rond { width: 84px; height: 84px; }
    .univers__rond svg { width: 30px; height: 30px; }
    .univers__nom { font-size: var(--t-xs); }
}

/* --- Bande de réassurance -------------------------------------------------- */

.reassurance {
    background: var(--fond-gris);
    border-block: 1px solid var(--ligne);
}
.reassurance__liste {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.reassurance__item {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-5) var(--e-4);
    font-size: var(--t-xs);
    line-height: 1.45;
    color: var(--encre-douce);
}
.reassurance__item strong { display: block; font-size: var(--t-s); color: var(--encre); }
.reassurance__picto {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--bordeaux);
    box-shadow: inset 0 0 0 1px var(--ligne);
}

@media (max-width: 900px) {
    .reassurance__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .reassurance__liste { grid-template-columns: minmax(0, 1fr); }
    .reassurance__item { padding: var(--e-3) 0; }
}

/* --- Occasions : étiquettes cliquables ----------------------------------- */

.occasions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-3);
}
.occasion {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-5);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-pilule);
    background: var(--blanc);
    color: var(--encre);
    font-weight: 700;
    font-size: var(--t-s);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.occasion svg { color: var(--or-encre); }
.occasion:hover { border-color: var(--bordeaux); background: var(--bordeaux); color: var(--blanc); }
.occasion:hover svg { color: var(--or); }

/* --- Bannières côte à côte ------------------------------------------------ */

.banniere-duo {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--e-5);
}
.banniere {
    --marge: var(--e-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-3);
    padding: 0 var(--marge) var(--marge);
    border-radius: var(--rayon-carte);
    overflow: hidden;
}
.banniere-duo--seule { grid-template-columns: minmax(0, 1fr); }
.banniere__cadre {
    width: calc(100% + 2 * var(--marge));
    margin: 0 calc(-1 * var(--marge)) var(--e-3);
    aspect-ratio: 16 / 7;
    overflow: hidden;
}
.banniere__cadre--souple { flex: 1; aspect-ratio: auto; min-height: 240px; }
.banniere__photo {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 900ms cubic-bezier(.2, .6, .3, 1);
}
.banniere:hover .banniere__photo { transform: scale(1.07); }
.banniere__espace { display: block; height: var(--marge); }
.banniere > .bouton { margin-top: auto; }
.banniere__surtitre { font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.site-public .banniere__titre { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.banniere__texte { font-size: var(--t-s); line-height: 1.6; }
.banniere__picto {
    display: grid; place-items: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--bordeaux);
}

.banniere--sombre {
    color: var(--blanc);
    background:
        radial-gradient(circle at 100% 0%, rgba(240, 192, 100, .22), transparent 45%),
        var(--bordeaux);
}
.banniere--sombre .banniere__surtitre { color: var(--or); }
.banniere--sombre .banniere__titre { color: var(--blanc); }
.banniere--sombre .banniere__texte { color: rgba(255, 255, 255, .82); }
.banniere--claire { background: var(--bordeaux-voile); }
/* La bannière claire est moins chargée en texte : sa photo prend la
   hauteur laissée libre pour que les deux bannières finissent ensemble. */
.banniere--claire .banniere__surtitre { color: var(--or-encre); }
.banniere--claire .banniere__texte { color: var(--encre-douce); }

.jalons { display: grid; gap: var(--e-3); width: 100%; margin-block: var(--e-2) var(--e-4); }
.jalon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--e-3);
    align-items: start;
}
.jalon__numero {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--or);
    color: var(--bordeaux-fonce);
    font-weight: 800;
    font-size: var(--t-s);
}
.jalon strong { color: var(--blanc); font-size: var(--t-s); }
.jalon p { margin-top: 2px; font-size: var(--t-xs); line-height: 1.5; max-width: none; color: rgba(255, 255, 255, .75); }

@media (max-width: 860px) {
    .banniere-duo { grid-template-columns: minmax(0, 1fr); }
    .banniere { --marge: var(--e-5); }
}

/* --- Comment ça marche ---------------------------------------------------- */

.etapes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-5);
    counter-reset: etape;
}
.etape {
    position: relative;
    padding: var(--e-6) var(--e-5) var(--e-5);
    border-radius: var(--rayon-carte);
    background: var(--blanc);
    box-shadow: var(--ombre-carte);
    text-align: center;
}
.etape__numero {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin: 0 auto var(--e-4);
    border-radius: 50%;
    background: var(--bordeaux);
    color: var(--or);
    font-size: var(--t-l);
    font-weight: 800;
}
.site-public .etape__titre { font-size: var(--t-l); }
.etape p { margin: var(--e-2) auto 0; color: var(--encre-douce); font-size: var(--t-s); }

@media (max-width: 860px) {
    .etapes { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
}

/* --- Avis ----------------------------------------------------------------- */

.temoignages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
@media (max-width: 860px) { .temoignages { grid-template-columns: minmax(0, 1fr); } }

.temoignage {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    margin: 0;
    padding: var(--e-5);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-carte);
    background: var(--blanc);
}
.temoignage__guillemet {
    font-family: var(--serif);
    font-size: 3.4rem;
    line-height: .6;
    height: 1.6rem;
    color: var(--or);
}
.temoignage blockquote { margin: 0; font-size: var(--t-s); line-height: 1.65; color: var(--encre); }
.temoignage figcaption {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-top: auto;
    padding-top: var(--e-3);
    border-top: 1px solid var(--ligne);
    font-size: var(--t-xs);
    color: var(--encre-douce);
}
.temoignage figcaption strong { display: block; color: var(--encre); font-size: var(--t-s); }
.temoignage__initiale {
    flex: none;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--bordeaux-voile);
    color: var(--bordeaux);
    font-weight: 800;
}

/* --- Appel final ---------------------------------------------------------- */

.appel {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--e-5) var(--e-7);
    align-items: center;
    margin-block: var(--e-4) var(--e-8);
    padding: var(--e-7);
    border-radius: var(--rayon-carte);
    color: var(--blanc);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--bordeaux);
}
.appel::after {
    background: linear-gradient(110deg, rgba(93, 1, 23, .95) 0%, rgba(58, 0, 14, .86) 60%, rgba(58, 0, 14, .7) 100%);
}
.appel > * { position: relative; z-index: 1; }
.appel__surtitre { color: var(--or); font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.appel h2 { color: var(--blanc); margin-top: var(--e-2); }
.appel__texte > p:last-child { margin-top: var(--e-3); color: rgba(255, 255, 255, .8); }
.appel__chiffres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-4);
    margin: 0;
}
.appel__chiffres dt { font-size: var(--t-2xl); font-weight: 800; color: var(--or); line-height: 1.1; }
.appel__chiffres dd { margin: 2px 0 0; font-size: var(--t-xs); color: rgba(255, 255, 255, .75); }

@media (max-width: 760px) {
    .appel { grid-template-columns: minmax(0, 1fr); padding: var(--e-6) var(--e-5); }
}

/* ==========================================================================
   VIGNETTES PRODUITS
   ========================================================================== */

.produits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: var(--e-5);
}
.produits--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.produits--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .produits--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .produits--4, .produits--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    .produits, .produits--4, .produits--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
    .produit__resume { display: none; }
    .produit__corps { padding: var(--e-3); }
    .site-public .produit__nom { font-size: var(--t-s); }
    .produit__action { width: 34px; height: 34px; }
}
@media (max-width: 340px) {
    .produits, .produits--4, .produits--3 { grid-template-columns: minmax(0, 1fr); }
}

.produit {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-carte);
    background: var(--blanc);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.produit:hover { box-shadow: var(--ombre-flottante); transform: translateY(-3px); border-color: transparent; }

.produit__lien { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.produit__image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bordeaux-voile);
}
.produit__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(.2, .6, .3, 1);
}
.produit:hover .produit__image img { transform: scale(1.05); }

/* Faute de photo : le pictogramme du rayon sur un dégradé de la marque. */
.produit__vide {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e-3);
    color: var(--bordeaux);
    background:
        radial-gradient(circle at 80% 15%, rgba(240, 192, 100, .45), transparent 45%),
        radial-gradient(circle at 15% 90%, rgba(93, 1, 23, .10), transparent 50%),
        var(--bordeaux-voile);
    transition: transform 400ms cubic-bezier(.2, .6, .3, 1);
}
.produit__vide span {
    font-size: var(--t-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--or-encre);
}
.produit:hover .produit__vide { transform: scale(1.04); }

.produit__pastilles {
    position: absolute;
    top: var(--e-3); left: var(--e-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1);
}
.pastille {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--rayon-pilule);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.pastille--promo { background: var(--bordeaux); color: var(--blanc); }
.pastille--or    { background: var(--or); color: var(--bordeaux-fonce); }
.pastille--grise { background: var(--expire); color: var(--blanc); }

.produit__corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--e-4);
}
.produit__partenaire {
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--or-encre);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
}
.site-public .produit__nom {
    margin-top: 2px;
    font-size: var(--t-m);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.produit:hover .produit__nom { color: var(--bordeaux); }
.produit__resume { margin-top: var(--e-2); font-size: var(--t-xs); line-height: 1.5; color: var(--encre-douce); }
.produit__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    margin-top: auto;
    padding-top: var(--e-3);
}
.produit__pied .prix { font-size: var(--t-l); line-height: 1.1; }
.produit__pied .prix--barre { display: block; margin: 2px 0 0; font-size: var(--t-xs); }
.produit__action {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bordeaux);
    color: var(--blanc);
    transition: background var(--transition), color var(--transition);
}
.produit:hover .produit__action { background: var(--or); color: var(--bordeaux-fonce); }

.produit--epuise .produit__image { filter: grayscale(.6); opacity: .8; }

/* ==========================================================================
   BOUTIQUE
   ========================================================================== */

.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    font-size: var(--t-xs);
    color: var(--encre-douce);
    margin-bottom: var(--e-4);
}
.fil-ariane a { color: var(--encre-douce); text-decoration: none; }
.fil-ariane a:hover { color: var(--bordeaux); }
.fil-ariane [aria-current] { color: var(--encre); font-weight: 700; }

/* Bandeau du rayon */
.rayon {
    padding-block: var(--e-5) var(--e-6);
    background: var(--fond-gris);
    border-bottom: 1px solid var(--ligne);
}
.rayon__entete { display: flex; align-items: center; gap: var(--e-5); }
.rayon__entete p { margin-top: var(--e-2); color: var(--encre-douce); max-width: 44rem; }
.rayon__picto {
    flex: none;
    display: grid; place-items: center;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--bordeaux);
    color: var(--or);
    overflow: hidden;
    box-shadow: 0 0 0 3px var(--blanc), 0 0 0 4px var(--ligne);
}
.rayon__picto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) {
    .rayon__picto { width: 56px; height: 56px; }
    .rayon__picto svg { width: 26px; height: 26px; }
    .rayon__entete { gap: var(--e-4); align-items: flex-start; }
}

.boutique {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--e-6);
    align-items: start;
    padding-block: var(--e-6) var(--e-8);
}

/* Colonne de filtres */
.boutique__filtres { position: sticky; top: 150px; }
.filtres-panneau {
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-carte);
    background: var(--blanc);
    overflow: hidden;
}
.filtres-panneau__titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--e-4) var(--e-4);
    background: var(--bordeaux);
    color: var(--blanc);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
.filtres-panneau__titre::-webkit-details-marker { display: none; }
.filtres-panneau__titre::after { content: "−"; font-size: var(--t-l); color: var(--or); line-height: 1; }
.filtres-panneau:not([open]) .filtres-panneau__titre::after { content: "+"; }

.filtre { margin: 0; padding: var(--e-4); border-bottom: 1px solid var(--ligne); }
.filtre:last-child { border-bottom: 0; }
.filtre__titre {
    display: block;
    margin-bottom: var(--e-3);
    padding: 0;
    font-family: var(--sans);
    font-size: var(--t-s);
    font-weight: 800;
    color: var(--encre);
}
.site-public legend.filtre__titre { font-size: var(--t-s); float: left; width: 100%; }
.site-public legend.filtre__titre + * { clear: both; }
.filtre__liste { display: grid; gap: 2px; }
.filtre__lien {
    display: flex;
    justify-content: space-between;
    gap: var(--e-2);
    padding: 7px var(--e-3);
    border-radius: 8px;
    color: var(--encre);
    font-size: var(--t-s);
    text-decoration: none;
}
.filtre__lien span {
    min-width: 26px;
    padding: 0 6px;
    border-radius: var(--rayon-pilule);
    background: var(--fond-gris);
    color: var(--encre-douce);
    font-size: var(--t-xs);
    text-align: center;
}
.filtre__lien:hover { background: var(--bordeaux-voile); color: var(--bordeaux); }
.filtre__lien.est-actif { background: var(--bordeaux-voile); color: var(--bordeaux); font-weight: 800; }
.filtre__option {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: 5px 0;
    font-size: var(--t-s);
    cursor: pointer;
}
.filtre__option input { width: 17px; height: 17px; accent-color: var(--bordeaux); flex: none; }
.filtre__prix { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); color: var(--encre-douce); }
.filtre .saisie { min-height: 40px; padding: var(--e-2) var(--e-3); font-size: var(--t-s); }
.filtre--actions { display: grid; gap: var(--e-2); }

/* Barre de tri au-dessus de la grille */
.barre-tri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--rayon);
    background: var(--fond-gris);
}
.barre-tri__total { font-size: var(--t-s); color: var(--encre-douce); max-width: none; }
.barre-tri__total strong { color: var(--encre); }
.barre-tri__choix { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-s); font-weight: 700; }
.barre-tri__choix .saisie {
    width: auto;
    min-height: 40px;
    padding: 0 var(--e-6) 0 var(--e-3);
    border-radius: var(--rayon-pilule);
    font-size: var(--t-s);
    appearance: none;
    background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235D0117' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
}

.filtres-actifs { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.filtre-actif {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 5px var(--e-3);
    border-radius: var(--rayon-pilule);
    background: var(--bordeaux-voile);
    color: var(--bordeaux);
    font-size: var(--t-xs);
    font-weight: 700;
    text-decoration: none;
}
.filtre-actif:hover { background: var(--bordeaux); color: var(--blanc); }

/* Résultat vide */
.vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-8) var(--e-5);
    border: 1px dashed var(--ligne);
    border-radius: var(--rayon-carte);
    text-align: center;
}
.vide p { color: var(--encre-douce); }
.vide__picto {
    display: grid; place-items: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--bordeaux-voile);
    color: var(--bordeaux);
}

@media (max-width: 900px) {
    .boutique { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); padding-top: var(--e-4); }
    .boutique__filtres { position: static; }
}

/* Pagination arrondie */
.site-public .pagination__lien { border-radius: var(--rayon-pilule); }

/* ==========================================================================
   FICHE PRODUIT
   ========================================================================== */

.fiche { padding-block: var(--e-5) var(--e-6); }

.fiche-produit {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--e-7);
    align-items: start;
}
@media (max-width: 900px) { .fiche-produit { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); } }

.galerie { position: sticky; top: 150px; }
@media (max-width: 900px) { .galerie { position: static; } }
.galerie__principale {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--rayon-carte);
    background: var(--bordeaux-voile);
}
.galerie__principale img { width: 100%; height: 100%; object-fit: cover; }
.galerie__principale .produit__vide span { font-size: var(--t-s); }
.galerie__pastille { position: absolute; top: var(--e-4); left: var(--e-4); font-size: var(--t-s); }
.galerie__vignettes { display: flex; gap: var(--e-2); margin-top: var(--e-3); flex-wrap: wrap; }
.galerie__vignette {
    width: 78px; height: 78px;
    padding: 0;
    border: 2px solid var(--ligne);
    border-radius: var(--rayon);
    background: none;
    cursor: pointer;
    overflow: hidden;
}
.galerie__vignette[aria-current="true"] { border-color: var(--bordeaux); }
.galerie__vignette img { width: 100%; height: 100%; object-fit: cover; }

/* Encart d'achat */
.achat__partenaire {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 5px var(--e-3);
    border-radius: var(--rayon-pilule);
    background: var(--bordeaux-voile);
    color: var(--bordeaux);
    font-size: var(--t-xs);
    font-weight: 800;
    max-width: none;
}
.site-public .achat__titre { margin-top: var(--e-3); font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.achat__resume { margin-top: var(--e-3); color: var(--encre-douce); font-size: var(--t-m); }

.fiche-produit__prix {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e-2) var(--e-3);
    margin: var(--e-5) 0 var(--e-3);
    padding-top: var(--e-4);
    border-top: 1px solid var(--ligne);
}
.fiche-produit__prix .prix { font-size: var(--t-3xl); line-height: 1; }
.fiche-produit__prix .prix--barre { font-size: var(--t-l); }

.disponibilite {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-4);
    font-size: var(--t-s);
    font-weight: 700;
    color: var(--valide);
    max-width: none;
}
.disponibilite span { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--valide-voile); }
.disponibilite--non { color: var(--expire); }
.disponibilite--non span { box-shadow: 0 0 0 4px var(--expire-voile); }

.achat__formulaire { margin-top: var(--e-4); }
.achat__options { margin-bottom: var(--e-5); }
.achat__options legend { font-size: var(--t-m); margin-bottom: var(--e-3); }
.achat__options .choix { border-radius: var(--rayon); }
.achat__options .choix__prix { font-family: var(--sans); font-weight: 800; color: var(--bordeaux); }
.achat__boutons { display: grid; gap: var(--e-3); }

.achat__garanties {
    display: grid;
    gap: var(--e-3);
    margin-top: var(--e-5);
    padding: var(--e-4) var(--e-5);
    border-radius: var(--rayon-carte);
    background: var(--fond-gris);
}
.achat__garanties li { display: flex; align-items: flex-start; gap: var(--e-3); font-size: var(--t-xs); color: var(--encre-douce); line-height: 1.45; }
.achat__garanties svg { flex: none; color: var(--bordeaux); margin-top: 2px; }
.achat__garanties strong { display: block; font-size: var(--t-s); color: var(--encre); }

/* Détails en accordéons, sans JavaScript */
.details {
    margin-top: var(--e-7);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-carte);
    overflow: hidden;
}
.details__bloc + .details__bloc { border-top: 1px solid var(--ligne); }
.details__bloc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--e-4) var(--e-5);
    font-weight: 800;
    font-size: var(--t-m);
    cursor: pointer;
    list-style: none;
}
.details__bloc summary::-webkit-details-marker { display: none; }
.details__bloc summary::after { content: "+"; font-size: var(--t-xl); line-height: 1; color: var(--bordeaux); }
.details__bloc[open] summary { background: var(--fond-gris); }
.details__bloc[open] summary::after { content: "−"; }
.details__bloc summary:hover { color: var(--bordeaux); }
.details__contenu { padding: var(--e-4) var(--e-5) var(--e-5); color: var(--encre-douce); }
.details__contenu p { max-width: 48rem; }

.mini-etapes { display: grid; gap: var(--e-2); counter-reset: mini; }
.mini-etapes li { display: flex; gap: var(--e-3); align-items: baseline; }
.mini-etapes li::before {
    counter-increment: mini;
    content: counter(mini);
    flex: none;
    display: grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--bordeaux);
    color: var(--or);
    font-size: var(--t-xs);
    font-weight: 800;
}
.mini-etapes strong { color: var(--encre); }

/* ==========================================================================
   AUTRES PAGES : FAQ, tunnel, panier, consultation, tuiles
   ========================================================================== */

/* --- Accordéon FAQ -------------------------------------------------------- */

.accordeon { display: grid; gap: var(--e-3); }
.accordeon__element {
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background: var(--blanc);
    overflow: hidden;
}
.accordeon__bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    width: 100%;
    padding: var(--e-4) var(--e-5);
    border: 0;
    background: none;
    font-family: var(--sans);
    font-size: var(--t-m);
    font-weight: 800;
    text-align: left;
    color: var(--encre);
    cursor: pointer;
}
.accordeon__bouton:hover { color: var(--bordeaux); }
.accordeon__bouton[aria-expanded="true"] { background: var(--fond-gris); color: var(--bordeaux); }
.accordeon__signe {
    flex: none;
    width: 28px; height: 28px;
    position: relative;
    border-radius: 50%;
    background: var(--bordeaux-voile);
}
.accordeon__signe::before,
.accordeon__signe::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background: var(--bordeaux);
    transition: transform var(--transition);
}
.accordeon__signe::after { transform: rotate(90deg); }
.accordeon__bouton[aria-expanded="true"] .accordeon__signe::after { transform: rotate(0deg); }
.accordeon__reponse { padding: var(--e-4) var(--e-5) var(--e-5); color: var(--encre-douce); }
.accordeon__reponse[hidden] { display: none; }

/* --- Tunnel de commande --------------------------------------------------- */

.etapes-tunnel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-4);
    margin-bottom: var(--e-6);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--rayon-pilule);
    background: var(--fond-gris);
    counter-reset: etape;
}
.etape-tunnel {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--encre-douce);
}
.etape-tunnel::before {
    counter-increment: etape;
    content: counter(etape);
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    font-size: var(--t-xs);
    font-weight: 800;
    color: var(--encre-douce);
}
.etape-tunnel[aria-current="step"] { color: var(--bordeaux); }
.etape-tunnel[aria-current="step"]::before { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--or); }
.etape-tunnel[data-fait="1"] { color: var(--valide); }
.etape-tunnel[data-fait="1"]::before { background: var(--valide); border-color: var(--valide); color: var(--blanc); content: "✓"; }

.tunnel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e-7); align-items: start; }
@media (max-width: 900px) { .tunnel { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); } }

.recapitulatif {
    position: sticky;
    top: 150px;
    padding: var(--e-5);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-carte);
    background: var(--fond-gris);
}
.recapitulatif .encart__titre,
.recapitulatif h2 { font-size: var(--t-l); }
.recapitulatif__ligne {
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-2) 0;
    font-size: var(--t-s);
}
.recapitulatif__total {
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    align-items: baseline;
    margin-top: var(--e-3);
    padding-top: var(--e-3);
    border-top: 2px solid var(--or);
    font-weight: 800;
}
.recapitulatif__total span:last-child { font-size: var(--t-xl); font-weight: 800; color: var(--bordeaux); }
@media (max-width: 900px) { .recapitulatif { position: static; } }

/* Ligne de panier */
.panier-ligne {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: var(--e-4);
    align-items: center;
    padding: var(--e-4);
    margin-bottom: var(--e-3);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-carte);
    background: var(--blanc);
}
.panier-ligne__image { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon); background: var(--bordeaux-voile); }
.site-public .panier-ligne__nom { font-family: var(--sans); font-size: var(--t-m); font-weight: 800; }
.panier-ligne__extras { font-size: var(--t-xs); color: var(--encre-douce); margin-top: var(--e-1); }
@media (max-width: 560px) {
    .panier-ligne { grid-template-columns: 72px minmax(0, 1fr); }
    .panier-ligne__image { width: 72px; }
    .panier-ligne > :last-child { grid-column: 1 / -1; text-align: right; }
}

/* Encarts et choix arrondis sur le site public */
.site-public .encart { border-radius: var(--rayon-carte); }
.site-public .choix { border-radius: var(--rayon); }
.site-public .alerte { border-radius: var(--rayon); }
.site-public .champ input,
.site-public .champ select,
.site-public .champ textarea,
.site-public .saisie { border-radius: var(--rayon); }

/* --- Consultation publique d'un cadeau ------------------------------------ */

.page-cadeau { padding-block: var(--e-7) var(--e-8); }
.page-cadeau__etat {
    display: flex;
    gap: var(--e-3);
    align-items: flex-start;
    padding: var(--e-4);
    margin-top: var(--e-5);
    border-radius: var(--rayon);
    border: 1px solid;
    border-left-width: 4px;
}

/* --- Tuiles de catégorie (pages secondaires) ------------------------------ */

.tuile {
    display: block;
    padding: var(--e-5);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-carte);
    background: var(--blanc);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition), transform var(--transition);
}
.tuile:hover { box-shadow: var(--ombre-flottante); transform: translateY(-3px); }
.tuile__titre { font-size: var(--t-l); font-weight: 800; }
.tuile:hover .tuile__titre { color: var(--bordeaux); }
.tuile__texte { font-size: var(--t-s); color: var(--encre-douce); margin-top: var(--e-2); }
.tuile__lien { font-size: var(--t-xs); font-weight: 700; color: var(--bordeaux); margin-top: var(--e-3); }

/* --- Anciennes classes de l'accueil, encore utilisées ailleurs ------------ */

.hero__preuve dt { font-size: var(--t-l); font-weight: 800; color: var(--bordeaux); line-height: 1.1; }
.hero__preuve dd { margin: var(--e-1) 0 0; font-size: var(--t-xs); line-height: 1.35; color: var(--encre-douce); }

.carte-cadeau--apercu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--e-6);
    aspect-ratio: 8 / 7;
    padding: var(--e-6);
}
.carte-cadeau--apercu .carte-cadeau__pour { margin-top: var(--e-4); }
.carte-cadeau--apercu .carte-cadeau__nom { font-size: var(--t-xl); }
.carte-cadeau--apercu .carte-cadeau__contenu { font-size: var(--t-m); margin-top: var(--e-3); }
.carte-cadeau--apercu .carte-cadeau__message { margin-top: var(--e-3); font-size: var(--t-xs); }
.carte-cadeau--apercu .carte-cadeau__code { font-size: var(--t-l); margin-top: 0; }
.vitrine .carte-cadeau--apercu { background: var(--bordeaux-fonce); }
@media (max-width: 1080px) {
    .carte-cadeau--apercu { aspect-ratio: auto; padding: var(--e-5); }
}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */

.pied { margin-top: var(--e-8); font-size: var(--t-s); }

.pied__reassurance { background: var(--bordeaux-voile); border-top: 1px solid var(--ligne); }
.pied__reassurance-liste {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-4);
    padding-block: var(--e-6);
}
.pied__argument { display: flex; align-items: center; gap: var(--e-3); }
.pied__argument p { font-size: var(--t-xs); line-height: 1.45; color: var(--encre-douce); }
.pied__argument strong { display: block; font-size: var(--t-s); color: var(--encre); }
.pied__picto {
    flex: none;
    display: grid; place-items: center;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--bordeaux);
    color: var(--or);
}
@media (max-width: 900px) { .pied__reassurance-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pied__reassurance-liste { grid-template-columns: minmax(0, 1fr); } }

.pied__principal {
    padding: var(--e-7) 0 var(--e-5);
    background: var(--bordeaux-fonce);
    color: rgba(255, 255, 255, .75);
}
.pied a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.pied a:hover { color: var(--or); }
.pied .bouton--entete { color: var(--bordeaux-fonce); margin-top: var(--e-4); }
.pied .bouton--entete:hover { color: var(--bordeaux-fonce); text-decoration: none; }

.pied__grille {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: var(--e-6);
}
.pied__marque p { margin-top: var(--e-3); max-width: 20rem; color: rgba(255, 255, 255, .7); }
@media (max-width: 1000px) {
    .pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pied__marque { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); } }
@media (max-width: 380px) { .pied__grille { grid-template-columns: minmax(0, 1fr); } }

.pied__titre {
    margin-bottom: var(--e-3);
    font-size: var(--t-s);
    font-weight: 800;
    color: var(--or);
}
.pied__liste li + li { margin-top: var(--e-2); }
.pied__liste--contact a { display: inline-flex; align-items: center; gap: var(--e-2); overflow-wrap: anywhere; }
/* Téléphone : la colonne contact prend toute la largeur, l'adresse
   email tient sur une ligne au lieu d'être coupée en deux. */
@media (max-width: 600px) {
    .pied__grille > div:has(.pied__liste--contact) { grid-column: 1 / -1; }
    .pied__liste--contact a { overflow-wrap: normal; word-break: normal; }
}
.pied__liste--contact svg { flex: none; color: var(--or); }

.pied__bas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
    justify-content: space-between;
    margin-top: var(--e-7);
    padding-top: var(--e-4);
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   Une seule séquence animée, à l'ouverture de l'accueil.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .accueil [data-entree] {
        opacity: 0;
        transform: translateY(14px);
        animation: entree 620ms cubic-bezier(.2, .7, .3, 1) forwards;
    }
    .accueil [data-entree="1"] { animation-delay: 60ms; }
    .accueil [data-entree="2"] { animation-delay: 180ms; }
    .accueil [data-entree="3"] { animation-delay: 280ms; }
}

@keyframes entree {
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   PAIEMENT EN LIGNE : MonCash et NatCash
   ========================================================================== */

.paiement-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
@media (max-width: 520px) { .paiement-choix { grid-template-columns: minmax(0, 1fr); } }

.paiement-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border: 2px solid var(--ligne);
    border-radius: var(--rayon-carte);
    background: var(--blanc);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.paiement-option:hover { border-color: #D9A0AC; }
.paiement-option input { position: absolute; opacity: 0; pointer-events: none; }
.paiement-option img { flex: none; width: 52px; height: 52px; border-radius: 12px; }
.paiement-option__texte { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.paiement-option__texte strong { font-size: var(--t-m); }
.paiement-option__texte span { font-size: var(--t-xs); color: var(--encre-douce); }
.paiement-option__coche {
    flex: none;
    width: 22px; height: 22px;
    border: 2px solid var(--ligne);
    border-radius: 50%;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.paiement-option:has(input:checked) { border-color: var(--bordeaux); box-shadow: 0 10px 24px -18px rgba(93, 1, 23, .8); }
.paiement-option:has(input:checked) .paiement-option__coche { border-color: var(--bordeaux); box-shadow: inset 0 0 0 4px var(--blanc), inset 0 0 0 12px var(--bordeaux); }
.paiement-option:has(input:focus-visible) { outline: 2px solid var(--bordeaux); outline-offset: 2px; }

.paiement-ussd { margin-top: var(--e-4); border-radius: var(--rayon); background: var(--fond-gris); }
.paiement-ussd summary { padding: var(--e-3) var(--e-4); font-size: var(--t-s); font-weight: 700; cursor: pointer; }
.paiement-ussd__corps { padding: 0 var(--e-4) var(--e-4); }

.paiement-securite {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-top: var(--e-3);
    font-size: var(--t-xs);
    color: var(--encre-douce);
    max-width: none;
}
.paiement-securite svg { color: var(--valide); flex: none; }

.page-paiement { padding-block: var(--e-7) var(--e-8); }
.page-paiement--centre { text-align: center; display: grid; justify-items: center; gap: var(--e-4); }
.page-paiement--centre p { margin-inline: auto; }
.page-paiement__logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: var(--ombre-flottante); }

.paiement-montant {
    display: grid;
    gap: 2px;
    margin-top: var(--e-4);
    padding: var(--e-5);
    border-radius: var(--rayon-carte);
    color: var(--blanc);
    background: linear-gradient(120deg, var(--bordeaux), var(--bordeaux-fonce));
}
.paiement-montant span { font-size: var(--t-xs); color: rgba(255, 255, 255, .75); }
.paiement-montant strong { font-size: var(--t-3xl); font-weight: 800; line-height: 1.1; }
.paiement-montant small { color: var(--or); }

.paiement-etat {
    display: flex;
    gap: var(--e-4);
    align-items: flex-start;
    margin-top: var(--e-5);
    padding: var(--e-4) var(--e-5);
    border-radius: var(--rayon-carte);
    background: var(--fond-gris);
}
.paiement-etat strong { display: block; font-size: var(--t-m); }
.paiement-etat p { margin-top: var(--e-1); font-size: var(--t-s); color: var(--encre-douce); max-width: none; }
.paiement-etat__picto {
    flex: none;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--bordeaux);
}
.paiement-etat--ok { background: var(--valide-voile); }
.paiement-etat--ok .paiement-etat__picto { color: var(--valide); }
.paiement-etat--attente { background: var(--attente-voile); }
.paiement-etat--attente .paiement-etat__picto { color: var(--attente); }
@media (prefers-reduced-motion: no-preference) {
    .paiement-etat__picto--tourne svg { animation: rotation 2.4s linear infinite; }
}

.paiement-formulaire { margin-top: var(--e-5); }
.site-public .paiement-formulaire__titre { font-size: var(--t-l); margin-bottom: var(--e-4); }

/* ==========================================================================
   AGRANDISSEMENT DES PHOTOS AU SURVOL
   Chaque photo vit dans un cadre qui coupe ce qui dépasse : l'image
   grandit sans bousculer la mise en page. Désactivé si l'utilisateur
   demande moins d'animations (base.css ramène les durées à zéro).
   ========================================================================== */

.produit:hover .produit__image img { transform: scale(1.1); }

.rayon__picto img { transition: transform 600ms cubic-bezier(.2, .6, .3, 1); }
.rayon__picto:hover img { transform: scale(1.12); }

/* Fiche produit : la photo s'agrandit sous le curseur, qui choisit la
   zone à regarder de près (main.js règle transform-origin). */
.galerie__principale { cursor: zoom-in; }
.galerie__principale img { transition: transform 450ms cubic-bezier(.2, .6, .3, 1); }
@media (hover: hover) and (pointer: fine) {
    .galerie__principale:hover img { transform: scale(1.8); }
}

/* Page « Accompagnement » : des cartes, photo carrée en tête. */
.attentions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: var(--e-5);
}
.attention {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-carte);
    background: var(--blanc);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.attention:hover { box-shadow: var(--ombre-flottante); transform: translateY(-3px); }
.attention__image { aspect-ratio: 1; overflow: hidden; background: var(--bordeaux-voile); }
.attention__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2, .6, .3, 1); }
.attention:hover .attention__image img { transform: scale(1.1); }
.attention__corps { display: grid; gap: var(--e-2); padding: var(--e-4); }
.site-public .attention__nom { font-size: var(--t-l); }
.attention__texte { font-size: var(--t-s); color: var(--encre-douce); }
.attention .prix { font-size: var(--t-l); }
@media (max-width: 620px) {
    .attentions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
    .attention__corps { padding: var(--e-3); }
    .site-public .attention__nom { font-size: var(--t-m); }
    .attention__texte { font-size: var(--t-xs); }
}

/* ==========================================================================
   MENU MOBILE OUVERT : la page ne défile plus derrière
   main.js pose .menu-ouvert sur <html> ; seul le panneau du menu défile.
   ========================================================================== */

html.menu-ouvert .nav { touch-action: pan-y; overscroll-behavior: contain; }

.nav-voile { display: none; }
@media (max-width: 960px) {
    html.menu-ouvert .nav-voile {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(36, 20, 23, .45);
    }
}

/* Grand écran : les deux boutons de la vitrine tiennent sur une ligne. */
@media (min-width: 1081px) {
    .vitrine__actions .bouton { white-space: nowrap; padding-inline: var(--e-5); }
}

/* ==========================================================================
   CARTE D'EXEMPLE DE LA VITRINE
   Toutes les mesures suivent la largeur de la carte (unités cqi) : elle
   garde ses proportions dans la colonne d'un grand écran comme sur un
   téléphone. Les textes saisis au portail sont coupés proprement au-delà
   de quelques lignes : rien ne déborde du cadre.
   ========================================================================== */

.vitrine__carte {
    container-type: inline-size;
    width: 100%;
    max-width: 440px;
    margin: 0;
    justify-self: center;
    transform: rotate(-3deg);
}
.vitrine__carte figcaption { transform: rotate(3deg); }

.apercu {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5cqi;
    min-height: 62cqi;
    padding: 8cqi 8cqi 7cqi;
    border-radius: 4.5cqi;
    color: var(--blanc);
    background:
        radial-gradient(circle at 100% 0%, rgba(240, 192, 100, .22), transparent 45%),
        linear-gradient(150deg, #4A0414 0%, var(--bordeaux-fonce) 55%, #2A050D 100%);
    box-shadow: 0 28px 50px -22px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(240, 192, 100, .18);
    overflow: hidden;
}
.apercu::after {
    content: "";
    position: absolute;
    inset: 2.6cqi;
    border: 1px solid rgba(240, 192, 100, .75);
    border-radius: 3cqi;
    pointer-events: none;
}
.apercu > * { position: relative; z-index: 1; }

.apercu__haut { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; }
.apercu__marque {
    font-size: 3.4cqi;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--or);
}
.apercu__etiquette {
    padding: .8cqi 2.6cqi;
    border-radius: var(--rayon-pilule);
    background: rgba(240, 192, 100, .16);
    color: var(--or);
    font-size: 2.8cqi;
    font-weight: 700;
    white-space: nowrap;
}

.apercu__corps { display: grid; gap: 1.6cqi; flex: 1; align-content: start; }
.apercu__corps p,
.apercu__bas p { max-width: none; margin: 0; overflow-wrap: anywhere; }
.apercu__de {
    font-size: 3.4cqi;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.apercu__de span,
.apercu__pour { font-size: 3.2cqi; font-weight: 700; letter-spacing: .04em; color: var(--or); }
.apercu__de + .apercu__pour { margin-top: 1.2cqi; }
.apercu__nom {
    font-family: var(--serif);
    font-size: 8.4cqi;
    font-weight: 600;
    line-height: 1.08;
    color: var(--blanc);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.apercu__contenu {
    font-family: var(--serif);
    font-size: 4.6cqi;
    line-height: 1.3;
    color: rgba(255, 255, 255, .92);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.apercu__message {
    font-size: 3.3cqi;
    font-style: italic;
    line-height: 1.45;
    color: var(--or);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.apercu__bas {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4cqi;
    padding-top: 3.6cqi;
    border-top: 1px solid rgba(240, 192, 100, .35);
}
.apercu__infos { display: grid; gap: .8cqi; min-width: 0; }
.apercu__code {
    font-family: var(--serif);
    font-size: 5.2cqi;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--or);
    white-space: nowrap;
}
.apercu__lieu,
.apercu__validite { font-size: 2.9cqi; color: rgba(255, 255, 255, .78); }
.apercu__qr {
    flex: none;
    display: grid;
    place-items: center;
    width: 15cqi;
    aspect-ratio: 1;
    border-radius: 2.4cqi;
    background: var(--blanc);
    color: var(--bordeaux-fonce);
}
.apercu__qr svg { width: 72%; height: auto; }

/* Tablette : la carte passe sous le texte, à gauche. */
@media (max-width: 1080px) {
    .vitrine__carte { justify-self: start; max-width: 400px; transform: rotate(-2deg); }
    .vitrine__carte figcaption { transform: rotate(2deg); text-align: left; }
}
/* Téléphone : la carte reste visible, sous les boutons, centrée. */
@media (max-width: 560px) {
    .vitrine__carte { justify-self: center; max-width: 340px; margin-top: var(--e-2); transform: rotate(-1.5deg); }
    .vitrine__carte figcaption { transform: none; text-align: center; }
}

/* ==========================================================================
   NOTRE HISTOIRE
   Le récit se lit comme une lettre : colonne étroite, première phrase
   mise en avant, citation encadrée d'or, signature en bas.
   ========================================================================== */

.histoire__entete {
    position: relative;
    padding-block: var(--e-8) var(--e-7);
    background:
        radial-gradient(circle at 85% 10%, rgba(240, 192, 100, .2), transparent 40%),
        linear-gradient(150deg, var(--bordeaux) 0%, var(--bordeaux-fonce) 100%);
    color: var(--blanc);
    text-align: center;
}
.histoire__entete .surtitre { color: var(--or); }
.site-public .histoire__titre {
    max-width: 22ch;
    margin: var(--e-3) auto 0;
    color: var(--blanc);
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.histoire__corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: var(--e-7);
    align-items: start;
    padding-block: var(--e-7) var(--e-8);
}
.histoire__recit { max-width: 42rem; font-size: 1.08rem; line-height: 1.8; color: var(--encre); }
.histoire__recit p { margin: 0 0 var(--e-4); max-width: none; }
.histoire__recit > p:first-child {
    font-family: var(--serif);
    font-size: clamp(1.25rem, 2.6vw, 1.55rem);
    line-height: 1.45;
    color: var(--bordeaux);
}
.histoire__recit h2,
.histoire__recit h3 {
    margin: var(--e-6) 0 var(--e-4);
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2.8vw, 1.7rem);
    color: var(--bordeaux);
}
.histoire__recit blockquote {
    margin: var(--e-6) 0;
    padding: var(--e-5) var(--e-6);
    border-left: 3px solid var(--or);
    border-radius: 0 var(--rayon-carte) var(--rayon-carte) 0;
    background: var(--bordeaux-voile);
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--bordeaux-fonce);
}
.histoire__devise {
    margin-top: var(--e-6);
    font-family: var(--serif);
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    font-style: italic;
    color: var(--bordeaux);
}
.histoire__signature {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-top: var(--e-4);
    font-size: var(--t-s);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--or-fonce, #8A5A0F);
}
.histoire__signature::before { content: ""; width: 40px; height: 1px; background: currentColor; }
.histoire__aside { position: sticky; top: calc(var(--hauteur-entete, 140px) + var(--e-4)); }

@media (max-width: 900px) {
    .histoire__corps { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
    .histoire__aside { position: static; }
}
@media (max-width: 560px) {
    .histoire__entete { padding-block: var(--e-7) var(--e-6); text-align: left; }
    .site-public .histoire__titre { margin-inline: 0; }
    .histoire__corps { padding-block: var(--e-6); }
    .histoire__recit { font-size: 1.02rem; line-height: 1.75; }
    .histoire__recit blockquote { padding: var(--e-4) var(--e-5); font-size: 1.08rem; }
}

/* ==========================================================================
   MISES EN PAGE PARTAGÉES AVEC LES ESPACES PRIVÉS
   Ces classes servent aussi sur le site public (contact, vérification
   d'une carte, confirmation de commande) : sans elles, la colonne de
   droite tombait sous le formulaire, collée à son bouton.
   ========================================================================== */

.colonnes { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--e-7); align-items: start; }
@media (max-width: 1000px) { .colonnes { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); } }

.saisie-code {
    width: 100%;
    min-height: 56px;
    padding: var(--e-3);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    font-family: var(--serif);
    font-size: var(--t-xl);
    font-weight: 600;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}
.saisie-code:focus { outline: none; border-color: var(--bordeaux); box-shadow: 0 0 0 3px rgba(93, 1, 23, .12); }

.code-carte {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--t-xs);
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--bordeaux);
    font-weight: 700;
}

/* Encart d'une colonne étroite : libellé au-dessus de la valeur, la
   valeur garde toute la largeur au lieu de s'écrire mot par mot. */
aside .paire { grid-template-columns: minmax(0, 1fr); gap: 2px; }

/* Un bouton ne touche jamais le bloc qui le suit ou le précède. */
form > .bouton:last-child,
form > .rangee:last-child { margin-top: var(--e-5); }
.encart .rangee,
.encart > .bouton { margin-top: var(--e-5); }