/* ============================================================
   style.css — Feuille de style unique du site (public + admin)
   Thème "Yooreed ProEvent" : bleu marine + or, cartes colorées.
   ============================================================ */

/* ---------- Variables & base ---------- */
:root {
    --navy:         #0d1b3f;   /* en-tête, titres, pied de page */
    --navy-clair:   #1d3f8f;
    --or:           #f2a71b;   /* couleur d'accent : logo, soulignements, boutons */
    --or-fonce:     #d18f0a;   /* or assombri (survol) */
    --or-texte:     #d97706;   /* or lisible sur fond blanc (prix, astérisques) */
    --violet:       #6a5ae8;   /* accent des titres de section ("catégories", "appréciés") */
    --creme:        #fbf2e0;   /* fond de la bannière d'accueil */
    --texte:        #1f2937;
    --texte-gris:   #6b7280;
    --bordure:      #e5e7eb;
    --fond:         #ffffff;   /* fond blanc exigé pour tout le site */
    --fond-clair:   #f9fafb;   /* juste pour les zones d'image et lignes de tableau */
    --rayon:        16px;
    --ombre:         0 1px 3px rgba(13, 27, 63, .07), 0 6px 18px rgba(13, 27, 63, .07);
    --ombre-survol:  0 12px 28px rgba(13, 27, 63, .16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: clip; }   /* le hero pleine largeur ne crée pas de scroll horizontal */

body {
    background: var(--fond);
    color: var(--texte);
    font-family: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { max-width: 100%; display: block; }
/* L'image aperçu des formulaires utilise l'attribut hidden : sans cette
   règle, le display:block ci-dessus l'emporterait et l'aperçu vide
   s'afficherait comme une image cassée. */
[hidden] { display: none !important; }
a   { color: inherit; text-decoration: none; }

main.principal     { flex: 1; padding-bottom: 2rem; }
main.conteneur-admin { flex: 1; padding-bottom: 3rem; }

.conteneur { width: min(1320px, 100% - 2rem); margin-inline: auto; }

.texte-gris { color: var(--texte-gris); }
.texte-succes { color: #16803c; }
.texte-danger { color: #c02636; }

/* ============================================================
   EN-TÊTE PUBLIC — barre bleu marine, logo or, recherche
   ============================================================ */
.entete-site {
    /* --entete-fond : couleur personnalisée (admin → Apparence) ;
       absente, la couleur bleu nuit par défaut du thème s'applique */
    background: var(--entete-fond, var(--navy));
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(13, 27, 63, .25);
}

.entete-inner {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: .75rem 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-right: auto;
    color: #fff;
    flex: none;
}
.logo-icone { width: 40px; height: 40px; flex: none; }
.logo-image {
    display: block;
    height: 48px;
    width: auto;
    flex: none;
}
.logo-texte {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: .5px;
    line-height: 1.1;
    border-left: 2px solid rgba(255, 255, 255, .25);
    padding-left: .7rem;
    white-space: nowrap;
}
.logo-texte em {
    font-family: "Caveat", "Segoe Script", "Brush Script MT", cursive;
    font-style: normal;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--or);
}

.nav-principale { display: flex; gap: 1.6rem; font-weight: 500; font-size: .97rem; }
.nav-principale a {
    display: flex;
    align-items: center;
    gap: .42rem;
    color: #d5deee;
    position: relative;
    padding: .3rem 0;
}
.nav-principale a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-principale a:hover { color: #fff; }
.nav-principale a.actif { color: #fff; font-weight: 600; }
.nav-principale a.actif::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 3px;
    border-radius: 2px;
    background: var(--or);
}

/* Barre de recherche de l'en-tête */
.recherche {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: .22rem .26rem .22rem 1rem;
}
.recherche input {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font: inherit;
    font-size: .9rem;
    width: 180px;
}
.recherche input::placeholder { color: #93a3c2; }
.recherche button {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--or);
    color: var(--navy);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s ease;
}
.recherche button:hover { background: var(--or-fonce); }
.recherche button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* Bouton hamburger (mobile et tablette uniquement) */
.bouton-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 9px;
    background: none;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px;
    cursor: pointer;
    flex: none;
}
.bouton-menu span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
/* Animation : les trois barres deviennent une croix quand le menu est ouvert */
.bouton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Réduction douce entre 1181 et 1320px :
   la barre complète (logo + menu + panier + recherche + compte)
   ne tient sur une seule ligne qu'avec ces mesures compactes ---------- */
@media (max-width: 1320px) {
    .entete-inner { gap: .9rem; }
    .nav-principale { gap: 1.1rem; }
    .logo-image { height: 44px; }
    .logo-texte { font-size: 1.3rem; padding-left: .6rem; }
    .recherche input { width: 150px; }
}

/* ---------- Mode compact (≤1180px) : logo + burger + panier + compte.
   Le menu (recherche comprise) s'ouvre en panneau déroulant. ---------- */
@media (max-width: 1180px) {
    .bouton-menu { display: flex; }
    .nav-principale {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem 1rem .9rem;
        border-top: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 12px 22px rgba(13, 27, 63, .3);
    }
    .nav-principale.ouvert { display: flex; }
    .nav-principale a { padding: .7rem .25rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .nav-principale a:last-of-type { border-bottom: none; }
    .nav-principale a.actif::after { display: none; }

    /* La barre de recherche du menu : pleine largeur */
    .nav-principale .recherche { margin: .55rem .1rem .15rem; padding: .25rem .25rem .25rem .9rem; }
    .nav-principale .recherche input { flex: 1; width: auto; min-width: 0; }

    /* Thème « event » : en-tête blanc → panneau blanc lui aussi,
       sinon les liens gris foncé deviennent illisibles sur bleu nuit */
    body.theme-event .nav-principale {
        background: #fff;
        border-top-color: rgba(0, 0, 0, .08);
        box-shadow: 0 12px 22px rgba(0, 0, 0, .14);
    }
    body.theme-event .nav-principale a { border-bottom-color: rgba(0, 0, 0, .08); }
    body.theme-event .nav-principale .recherche { border-color: rgba(0, 0, 0, .12); }
}

@media (max-width: 640px) {
    .entete-inner { gap: .6rem; padding: .55rem 0; }
    .logo { gap: .55rem; }
    .logo-image { height: 38px; }
    .logo-texte { font-size: 1.08rem; padding-left: .55rem; }
    .bouton-menu { width: 40px; height: 40px; padding: 8px; }
    .lien-panier, .lien-compte { width: 38px; height: 38px; }
    .nav-principale { padding: .4rem .9rem .8rem; }
}

/* Très petit écran : le nom du site cède sa place au logo image
   (qui porte déjà la marque) pour que la barre tienne sur une ligne */
@media (max-width: 460px) {
    .logo-texte { display: none; }
    .entete-inner { gap: .55rem; }
}

/* ============================================================
   PAGE D'ACCUEIL — cartes colorées à vague
   (le héros et le rail latéral sont définis en fin de fichier)
   ============================================================ */

.grille-categories,
.grille-produits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}
.grille-categories { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1.6rem; }

/* ---------- Cartes ---------- */
.carte {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
    transition: transform .15s ease, box-shadow .15s ease;
    display: flex;
    flex-direction: column;
}
.carte:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-survol);
}

/* Carte catégorie : sans bordure, image + bandeau coloré à vague */
.carte-categorie { border: none; }

.carte-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden; /* le carré garde ses dimensions même avec une image plus grande */
    background: #fff;
    border-bottom: 1px solid var(--bordure);
}
.carte-categorie .carte-image {
    aspect-ratio: 4 / 3;   /* proportion de la maquette : plus large que haut */
    border-bottom: none;
    background: var(--fond-clair);
}
.carte-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* image entière visible, sans recadrage */
    padding: .6rem;
}

/* Bandeau coloré du bas, avec vague qui mord sur l'image */
.carte-pied {
    position: relative;
    background: var(--couleur, var(--navy-clair));
    color: #fff;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .15rem .95rem .85rem;
}
.carte-vague {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 26px;
    color: var(--couleur, var(--navy-clair));
    display: block;
}
.carte-icone {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
    display: grid;
    place-items: center;
}
.carte-icone svg { width: 23px; height: 23px; }
.carte-texte { min-width: 0; }
.carte-texte h2 {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.carte-texte p { font-size: .84rem; color: rgba(255, 255, 255, .85); }
.carte-fleche {
    flex: none;
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .26);
    display: grid;
    place-items: center;
    transition: transform .15s ease, background .15s ease;
}
.carte-fleche svg { width: 18px; height: 18px; }
.carte-categorie:hover .carte-fleche {
    transform: translateX(3px);
    background: rgba(255, 255, 255, .42);
}

/* ---------- Vague colorée : habillage enrichi (thème par défaut) ----------
   Deux vagues superposées, bandeau dégradé, pastilles dépolies,
   compteur en pilule et zoom de l'image au survol. Portée à
   .theme-vague pour ne pas toucher aux autres styles d'affichage. */
.theme-vague .carte-categorie { border-radius: var(--rayon); }
.theme-vague .carte-image { background: radial-gradient(120% 90% at 50% 15%, #fff 55%, var(--fond-clair) 100%); }
.theme-vague .carte-image::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 38%;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--couleur, var(--navy-clair)) 30%, transparent));
    pointer-events: none;
}
.theme-vague .carte-image img { transition: transform .35s ease; }
.theme-vague .carte-categorie:hover .carte-image img { transform: scale(1.07) rotate(.4deg); }
.theme-vague .carte-vague { height: 34px; }
.theme-vague .vague-arriere { animation: vague-derive 7s ease-in-out infinite alternate; }
@keyframes vague-derive {
    from { transform: translateX(0); }
    to   { transform: translateX(18px); }
}
@media (prefers-reduced-motion: reduce) {
    .theme-vague .vague-arriere { animation: none; }
}
.theme-vague .carte-pied {
    padding: .3rem .95rem .95rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--couleur, var(--navy-clair)) 82%, #fff) 0%,
        var(--couleur, var(--navy-clair)) 100%);
    transition: filter .2s ease;
}
.theme-vague .carte-categorie:hover .carte-pied { filter: brightness(1.07) saturate(1.05); }
.theme-vague .carte-icone {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.theme-vague .carte-texte h2 { text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.theme-vague .carte-texte p {
    display: inline-flex;
    align-items: center;
    margin-top: .28rem;
    padding: .12rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.theme-vague .carte-fleche {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(4px);
    transition: transform .18s ease, background .18s ease, color .18s ease;
}
.theme-vague .carte-categorie:hover .carte-fleche {
    transform: translateX(4px);
    background: #fff;
    color: var(--couleur, var(--navy-clair));
    border-color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}

/* Petits accents « eau » animés sur le bandeau : reflet lumineux
   qui traverse l'eau + bulles qui remontent le long de la vague. */
.theme-vague .vague-reflet,
.theme-vague .vague-bulles {
    position: absolute;
    pointer-events: none;
}
.theme-vague .vague-reflet {
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(105deg,
        transparent 42%,
        rgba(255, 255, 255, .30) 50%,
        transparent 58%);
    transform: translateX(-130%);
    animation: reflet-eau 6.5s ease-in-out infinite;
}
@keyframes reflet-eau {
    0%, 58%  { transform: translateX(-130%); }
    100%     { transform: translateX(130%); }
}
.theme-vague .vague-bulles {
    left: 0; right: 0;
    top: -26px; bottom: 0;
}
.theme-vague .vague-bulles i {
    position: absolute;
    bottom: 4px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    opacity: 0;
    animation: bulle-monte 4.4s ease-in infinite;
}
.theme-vague .vague-bulles i:nth-child(1) { left: 16%; animation-delay: 0s; }
.theme-vague .vague-bulles i:nth-child(2) { left: 47%; width: 4px; height: 4px; animation-delay: 1.6s; animation-duration: 5.2s; }
.theme-vague .vague-bulles i:nth-child(3) { left: 76%; width: 5px; height: 5px; animation-delay: 3s; }
@keyframes bulle-monte {
    0%   { transform: translateY(0) translateX(0) scale(.5); opacity: 0; }
    14%  { opacity: .6; }
    72%  { opacity: .3; }
    100% { transform: translateY(-44px) translateX(7px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .theme-vague .vague-reflet,
    .theme-vague .vague-bulles i { animation: none; }
    .theme-vague .vague-reflet,
    .theme-vague .vague-bulles i { opacity: 0; }
}

.carte-corps { padding: .85rem 1rem 1rem; flex: 1; }
.carte-categorie h2 { font-size: 1.05rem; font-weight: 700; }
.carte-meta { color: var(--texte-gris); font-size: .88rem; }

.produit-titre {
    font-size: 1rem;
    font-weight: 600;
    min-height: 2.9em;      /* aligne les cartes même avec 1 ou 2 lignes de titre */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Prix & remises ---------- */
.produit-prix { margin-top: .35rem; }

.prix-final {
    color: var(--navy);
    font-weight: 700;
    font-size: 1.08rem;
}

.prix-barre {
    color: var(--texte-gris);
    text-decoration: line-through;
    font-size: .9rem;
    margin-right: .45rem;
}

.badge-remise {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: var(--or);
    color: var(--navy);
    font-size: .85rem;
    font-weight: 700;
    padding: .28rem .6rem;
    border-radius: 0 0 10px 0;
}

.badge-grand { font-size: 1rem; padding: .35rem .8rem; }

/* ============================================================
   FIL D'ARIANE / TITRES / ERREURS
   ============================================================ */
.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    color: var(--texte-gris);
    font-size: .9rem;
    padding-top: 1.25rem;
}
.fil-ariane a:hover { color: var(--or-texte); }

.titre-page {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: .6rem 0 1.4rem;
    letter-spacing: -.01em;
}

.bloc-erreur { text-align: center; padding: 4rem 0; }
.bloc-erreur h1 { font-size: 1.8rem; margin-bottom: .5rem; }
.bloc-erreur p  { color: var(--texte-gris); margin-bottom: 1.5rem; }

/* ============================================================
   PAGE PRODUIT (détail)
   ============================================================ */
.produit-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

@media (max-width: 800px) {
    .produit-detail { grid-template-columns: 1fr; gap: 1.5rem; }
}

.produit-detail-image {
    position: relative;
    background: var(--fond-clair);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.75rem;
}
.produit-detail-image img {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
}

.produit-detail-infos h1 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    letter-spacing: -.01em;
    margin: .2rem 0 .8rem;
}

.produit-categorie {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--texte-gris);
}

.produit-prix-detail { margin-bottom: 1.5rem; }
.produit-prix-detail .prix-final { font-size: 1.7rem; }
.remise-info {
    display: block;
    color: var(--or-texte);
    font-size: .85rem;
    margin-top: .25rem;
}

.produit-description h2 { font-size: 1.05rem; margin-bottom: .5rem; }
.produit-description p  { color: var(--texte); }
.produit-detail-infos > .bouton { margin-top: 2rem; }

/* ============================================================
   BOUTONS
   ============================================================ */
.bouton {
    display: inline-block;
    background: var(--or);
    color: var(--navy);
    border: none;
    border-radius: 10px;
    padding: .65rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
    text-align: center;
}
.bouton:hover { background: var(--or-fonce); color: var(--navy); }

.bouton-mini    { padding: .35rem .75rem; font-size: .87rem; border-radius: 7px; }
.bouton-large   { width: 100%; padding: .75rem; font-size: 1.05rem; }

.bouton-danger    { background: #dc2626; }
.bouton-danger:hover { background: #b91c1c; }

.bouton-blanc {
    background: #fff;
    color: var(--texte);
    border: 1px solid var(--bordure);
}
.bouton-blanc:hover { background: var(--fond-clair); color: var(--texte); }

/* ============================================================
   MESSAGES (flash, info, erreurs)
   ============================================================ */
.message {
    padding: .8rem 1rem;
    border-radius: 8px;
    border: 1px solid;
    margin: 1rem 0;
}
.message ul { margin: .4rem 0 0 1.2rem; }

.message-succes { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.message-erreur { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.message-info   { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* ============================================================
   FORMULAIRES (public + admin)
   ============================================================ */
.champ { margin-bottom: 1.1rem; }

.champ label {
    display: block;
    font-weight: 600;
    font-size: .93rem;
    margin-bottom: .35rem;
}

.obligatoire { color: var(--or-texte); }

.champ input,
.champ select,
.champ textarea {
    width: 100%;
    padding: .6rem .8rem;
    font: inherit;
    color: var(--texte);
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--or-texte);
    box-shadow: 0 0 0 3px rgba(242, 167, 27, .22);
}

.aide {
    color: var(--texte-gris);
    font-size: .82rem;
    margin-top: .3rem;
}

.grille-2-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 560px) {
    .grille-2-colonnes { grid-template-columns: 1fr; }
}

.actions-formulaire {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.formulaire-produit { padding: 1.5rem; }

.apercu-image {
    max-width: 260px;
    max-height: 260px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-clair);
    padding: .6rem;
    object-fit: contain;
}

/* ============================================================
   PARTIE ADMIN — barre du haut, tableau, connexion
   ============================================================ */
.barre-admin {
    /* Bleu vif de la charte admin (barre + panneau du menu mobile) */
    background: linear-gradient(135deg, #0f38a3 0%, #1546aa 100%);
    backdrop-filter: blur(8px);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 20px rgba(13, 27, 63, .30);
}

.barre-admin-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 0;
}

.logo-admin {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}
.logo-admin svg { width: 28px; height: 28px; flex: none; }
.logo-admin span { color: #94a3b8; font-weight: 500; font-size: .92rem; }

.nav-admin { display: flex; align-items: center; gap: .4rem; font-size: .88rem; flex-wrap: wrap; }
.nav-admin a {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: #cbd5e1;
    padding: .4rem .65rem;
    border-radius: 9px;
    transition: background .15s, color .15s;
    position: relative;
}
.nav-admin a svg { width: 14px; height: 14px; flex: none; opacity: .9; }
.nav-admin a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-admin a.actif { color: #fff; background: rgba(242,167,27,.16); border: 1px solid rgba(242,167,27,.22); }
.nav-admin a .badge-en-attente {
    background: var(--or);
    color: #0f172a;
    font-size: .70rem;
    font-weight: 800;
    padding: 0 .38rem;
    border-radius: 999px;
    line-height: 1.45;
    min-width: 18px;
    text-align: center;
}

.titre-admin {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    margin: 1.6rem 0 .4rem;
}
.sous-titre-admin {
    color: var(--texte-gris);
    font-size: .92rem;
    margin-bottom: 1.2rem;
}

/* ============================================================
   ADMIN DASHBOARD — Statistiques premium
   ============================================================ */
.conteneur-admin { background: #f8fafc; min-height: calc(100vh - 56px); }
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.2rem 0 1.4rem;
}
.admin-stat-card {
    --accent: #1e293b;
    --accent-clair: #475569;
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 18px;
    padding: 1.15rem 1.2rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-clair) 100%);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .16);
    transition: transform .2s ease, box-shadow .2s ease;
    animation: stat-arrivee .55s cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 95ms);
}
@keyframes stat-arrivee {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* halos lumineux décoratifs dans le dégradé */
.admin-stat-card::after {
    content: "";
    position: absolute;
    width: 170px; height: 170px;
    right: -50px; top: -60px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .25), transparent 70%);
    pointer-events: none;
}

/* reflet lumineux qui balaie la carte au survol */
.admin-stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
    transform: translateX(-130%);
    transition: transform .7s ease;
    pointer-events: none;
}
.admin-stat-card:hover::before { transform: translateX(130%); }
.admin-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .28);
}

.admin-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.admin-stat-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    backdrop-filter: blur(4px);
    flex: none;
    transition: transform .25s ease;
}
.admin-stat-card:hover .admin-stat-icon { transform: scale(1.12) rotate(-6deg); }
.admin-stat-icon svg { width: 19px; height: 19px; }
.admin-stat-trend {
    font-size: .72rem;
    font-weight: 600;
    padding: .24rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .32);
    white-space: nowrap;
}
.admin-stat-trend.positif { background: rgba(52, 211, 153, .28); border-color: rgba(110, 231, 183, .55); color: #d1fae5; }
.admin-stat-trend.attente {
    background: rgba(251, 191, 36, .28);
    border-color: rgba(252, 211, 77, .55);
    color: #fef3c7;
}
.admin-stat-trend.attente::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fde047;
    margin-right: .32rem;
    vertical-align: middle;
    animation: point-clignote 1.6s ease-in-out infinite;
}
@keyframes point-clignote {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(253, 224, 71, .55); }
    50%      { opacity: .45; box-shadow: 0 0 0 4px rgba(253, 224, 71, 0); }
}
.admin-stat-valeur {
    font-size: 2.05rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    font-variant-numeric: tabular-nums;
}
.admin-stat-valeur .unite {
    font-size: .95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}
.admin-stat-label { font-size: .84rem; color: rgba(255, 255, 255, .88); font-weight: 500; margin-top: -.15rem; }
.admin-stat-foot {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .78);
    border-top: 1px dashed rgba(255, 255, 255, .28);
    padding-top: .6rem;
    margin-top: .15rem;
}
.admin-stat-foot a { color: #fff; font-weight: 600; }
.admin-stat-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.admin-stat-foot svg { width: 12px; height: 12px; flex: none; color: rgba(255, 255, 255, .78); }

@media (prefers-reduced-motion: reduce) {
    .admin-stat-card { animation: none; }
    .admin-stat-card::before { display: none; }
    .admin-stat-trend.attente::before { animation: none; }
    .repartition-seg { animation: none; }
}

@media (max-width: 960px) { .admin-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .admin-stats-grid { grid-template-columns: 1fr; } }

/* Deux colonnes : répartition + commandes récentes */
.admin-panels {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.admin-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.admin-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.1rem .9rem;
    border-bottom: 1px solid #f1f5f9;
}
.admin-card-head h3 {
    font-size: .92rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.admin-card-head h3 svg { width: 14px; height: 14px; color: #64748b; }
.admin-card-head a { font-size: .82rem; font-weight: 600; color: #334155; }
.admin-card-head a:hover { color: var(--navy); text-decoration: underline; }
.admin-card-body { padding: 1rem 1.1rem; flex: 1; }

/* ---------- Répartition par catégorie : donut interactif ----------
   Le donut (arcs SVG générés par statistiques.php) + sa légende.
   Survol / focus d'un segment ou d'une ligne : le segment pointé
   grossit, les autres s'estompent, le centre affiche la catégorie. */
.repartition-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    flex-wrap: wrap;
}
.repartition-donut {
    position: relative;
    width: 235px;
    max-width: 100%;
    flex: none;
    margin-inline: auto; /* centré quand la légende passe en dessous */
}
.repartition-donut-svg { display: block; width: 100%; height: auto; }
.repartition-seg {
    transition: opacity .18s ease, transform .18s ease;
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: donut-arrivee .55s cubic-bezier(.2, .7, .3, 1) backwards;
    animation-delay: calc(.15s + var(--i, 0) * .07s);
}
@keyframes donut-arrivee {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: scale(1); }
}
.repartition-donut-svg.est-estompe .repartition-seg:not(.est-active) { opacity: .26; }
.repartition-seg.est-active { transform: scale(1.045); }

/* Valeur au centre du donut (total, ou catégorie pointée) */
.repartition-centre {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    text-align: center;
    pointer-events: none;
    padding: 27%;
}
.rc-nom {
    font-size: .74rem;
    font-weight: 600;
    color: #64748b;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc-valeur {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.rc-sous { font-size: .74rem; color: #94a3b8; }

/* Légende synchronisée avec le donut */
.repartition-legende {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.repartition-leg {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem .6rem;
    border-radius: 10px;
    transition: background .15s ease;
    outline: none;
}
.repartition-leg:hover,
.repartition-leg:focus-visible { background: #f4f6fa; }
.repartition-leg.est-active { background: #fdf0c8; }
.repartition-puce {
    width: 11px;
    height: 11px;
    border-radius: 4px;
    background: var(--accent, #1d3f8f);
    flex: none;
}
.repartition-leg-nom {
    font-size: .85rem;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.repartition-leg-val {
    margin-left: auto;
    font-size: .82rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.repartition-leg-val small { font-weight: 500; color: #94a3b8; font-size: .74rem; }
@media (max-width: 560px) {
    .repartition-donut { width: 205px; }
}

/* Commandes récentes mini */
.mini-commandes { display: flex; flex-direction: column; gap: 0; }
.mini-commande {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    padding: .75rem 0;
    border-bottom: 1px dashed #eef2f7;
    align-items: center;
}
.mini-commande:last-child { border-bottom: none; }
.mini-commande strong { font-size: .88rem; color: #0f172a; }
.mini-commande small { display: block; color: #64748b; font-size: .78rem; margin-top: 1px; }
.mini-commande .prix { font-weight: 700; color: #0f172a; font-size: .88rem; white-space: nowrap; }

@media (max-width: 860px) { .admin-panels { grid-template-columns: 1fr; } }

/* Barre outils améliorée */
.admin-toolbar-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: .85rem .9rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    margin-bottom: 1rem;
}
.admin-search {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: .35rem .6rem;
    flex: 1;
    min-width: 180px;
    max-width: 320px;
}
.admin-search svg { width: 14px; height: 14px; color: #94a3b8; flex: none; }
.admin-search input {
    border: none;
    background: none;
    outline: none;
    font: inherit;
    font-size: .88rem;
    width: 100%;
    color: #0f172a;
}
.admin-search input::placeholder { color: #94a3b8; }

/* Barre d'outils au-dessus du tableau */
.barre-outils {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

.filtre-categorie {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .93rem;
}
.filtre-categorie select {
    padding: .45rem .6rem;
    font: inherit;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: #fff;
}

/* Tableau des produits */
.tableau-responsive {
    overflow-x: auto;   /* le tableau reste lisible sur mobile */
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

.table-admin {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: .93rem;
}

.table-admin th {
    background: var(--fond-clair);
    text-align: left;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texte-gris);
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--bordure);
    white-space: nowrap;
}

.table-admin td {
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}
.table-admin tr:last-child td { border-bottom: none; }
.table-admin tbody tr:hover { background: var(--fond-clair); }

/* ---------- Éditeur de texte inline des bannières (admin) ---------- */
.ban-texte {
    display: grid;
    gap: .55rem;
    min-width: 250px;
    max-width: 310px;
}
.ban-champ { display: block; }
.ban-champ > span {
    display: block;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: .22rem;
}
.ban-champ > span em {
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.ban-champ input[type="text"] {
    width: 100%;
    padding: .45rem .6rem;
    font: inherit;
    font-size: .86rem;
    color: var(--texte);
    background: #fff;
    border: 1.5px solid var(--bordure);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ban-champ input[type="text"]:hover { border-color: #c3cbd8; }
.ban-champ input[type="text"]:focus {
    outline: none;
    border-color: var(--or-texte);
    box-shadow: 0 0 0 3px rgba(242, 167, 27, .22);
}
.ban-ligne { display: flex; gap: .5rem; }
.ban-ligne .ban-champ { flex: 1; min-width: 0; }
.ban-fond {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .55rem;
    background: var(--fond-clair);
    border: 1px solid var(--bordure);
    border-radius: 8px;
}
.ban-fond input[type="color"] {
    width: 40px;
    height: 30px;
    padding: 2px;
    border: 1.5px solid var(--bordure);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.ban-fond label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}
.ban-texte .bouton { width: 100%; }
.ban-defaut { display: inline-block; margin-top: .5rem; }

/* ---------- Carte catégories du tableau de bord + modale de
   confirmation de suppression (catégorie + tous ses produits) ---------- */
.liste-categories-suppr { display: grid; gap: .45rem; }
.ligne-categorie {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .75rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.ligne-categorie:hover { border-color: #fca5a5; background: #fffafa; }
.ligne-categorie .nom { font-weight: 600; color: var(--navy); }
.ligne-categorie .compte {
    flex: none;
    font-size: .76rem;
    font-weight: 600;
    color: #475569;
    background: var(--fond-clair);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    padding: .12rem .55rem;
}
.ligne-categorie .bouton { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; }

.modale-danger-icone {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    display: grid;
    place-items: center;
    margin-bottom: .75rem;
    animation: modale-danger-pulse 2.2s ease-in-out infinite;
}
@keyframes modale-danger-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .28); }
    50%      { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); }
}
.modale-danger-icone svg { width: 27px; height: 27px; }
.modale-cible {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--navy);
    margin: .15rem 0 .7rem;
}
.modale-phrase { color: var(--texte); font-size: .93rem; line-height: 1.55; margin: 0 0 .4rem; }
.modale-alerte {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    color: #991b1b;
    border-radius: 10px;
    padding: .8rem .95rem;
    font-size: .87rem;
    line-height: 1.55;
    margin: .8rem 0 1.25rem;
}
.modale-alerte strong { display: inline-block; margin-bottom: .15rem; }
.modale-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.modale-actions form { margin: 0; }

.miniature {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--bordure);
    background: var(--fond-clair);
    padding: 3px;
}

.cellule-titre { font-weight: 600; }
.cellule-date  { color: var(--texte-gris); white-space: nowrap; }

.actions-cellule { display: flex; gap: .5rem; }

.carte-confirmation { padding: 1.5rem; max-width: 560px; }
.carte-confirmation h2 { margin-bottom: .7rem; }
.carte-confirmation p { margin-bottom: .7rem; }

/* ============================================================
   PAGES AUTH — Connexion / Inscription (premium redesign)
   ============================================================ */
.page-connexion,
.page-auth {
    justify-content: center;
    background:
        radial-gradient(820px 520px at 8% -10%, rgba(242,167,27,.14), transparent 60%),
        radial-gradient(720px 520px at 95% 0%, rgba(107,90,232,.10), transparent 60%),
        linear-gradient(to bottom, #fbf8ef 0%, #f7f8fc 42%, #ffffff 100%);
    min-height: 100vh;
}

.auth-wrapper {
    width: min(1060px, calc(100% - 2rem));
    margin: 2.2rem auto;
    padding: 1rem 0 2rem;
    display: grid;
    place-items: center;
    flex: 1;
}

.auth-card {
    width: 100%;
    display: grid;
    grid-template-columns: 440px 1fr;
    background: #fff;
    border: 1px solid #eceef3;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(13,27,63,.08),
        0 32px 80px rgba(13,27,63,.14);
    animation: auth-enter .5s ease;
}
@keyframes auth-enter {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Panneau gauche : branding --- */
.auth-brand {
    position: relative;
    background:
        radial-gradient(420px 320px at 15% 10%, rgba(242,167,27,.22), transparent 60%),
        radial-gradient(520px 420px at 95% 95%, rgba(107,90,232,.28), transparent 65%),
        linear-gradient(165deg, #0d1b3f 0%, #162a5e 55%, #1d3f8f 100%);
    color: #fff;
    padding: 2.6rem 2.4rem 2rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}
.auth-brand::before {
    content: "";
    position: absolute;
    width: 280px; height: 280px;
    right: -70px; top: -70px;
    border-radius: 50%;
    background: rgba(242,167,27,.12);
    border: 1px solid rgba(242,167,27,.18);
}
.auth-brand::after {
    content: "";
    position: absolute;
    width: 360px; height: 360px;
    left: -110px; bottom: -120px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

.auth-brand-logo {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .02em;
    position: relative;
    z-index: 1;
}
.auth-brand-logo svg { width: 30px; height: 30px; flex: none; }
.auth-brand-logo em {
    font-family: "Caveat", cursive;
    font-style: normal;
    font-weight: 700;
    color: var(--or);
    font-size: 1.2rem;
    margin-left: .15rem;
}
.auth-brand h2 {
    margin-top: 2.2rem;
    font-size: clamp(1.55rem, 2.6vw, 1.9rem);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.02em;
    position: relative;
    z-index: 1;
}
.auth-brand h2 em { font-style: normal; color: var(--or); }
.auth-brand-desc {
    margin-top: .7rem;
    color: #c7d2e5;
    font-size: .94rem;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}
.auth-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .95rem;
    margin-top: 1.9rem;
    position: relative;
    z-index: 1;
}
.auth-features li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    font-size: .92rem;
    line-height: 1.5;
}
.auth-features-icon {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    display: grid;
    place-items: center;
    color: var(--or);
    backdrop-filter: blur(6px);
}
.auth-features-icon svg { width: 14px; height: 14px; }
.auth-features li strong { color: #fff; font-weight: 600; display: block; font-size: .93rem; }
.auth-features li span { color: #a8b8d6; font-size: .84rem; }

.auth-brand-quote {
    margin-top: auto;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255,255,255,.12);
    position: relative;
    z-index: 1;
    display: flex;
    gap: .85rem;
    align-items: center;
}
.auth-quote-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--or), #f8c95c);
    display: grid;
    place-items: center;
    color: var(--navy);
    font-weight: 800;
    flex: none;
    font-size: .9rem;
}
.auth-brand-quote blockquote { font-size: .88rem; color: #dbe4f5; line-height: 1.5; }
.auth-brand-quote cite { display: block; margin-top: .25rem; font-style: normal; font-size: .8rem; color: #96a9cc; }

/* --- Panneau droit : formulaire --- */
.auth-form-side {
    padding: 2.4rem 2.6rem 2rem;
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
}

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--texte-gris);
    margin-bottom: 1.4rem;
    transition: color .15s;
}
.auth-back:hover { color: var(--navy); }
.auth-back svg { width: 14px; height: 14px; }

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--or-texte);
    background: #fff7e8;
    border: 1px solid #ffe4a8;
    padding: .32rem .65rem;
    border-radius: 999px;
    width: fit-content;
}
.auth-eyebrow svg { width: 11px; height: 11px; }

.auth-form-side h1 {
    margin-top: .85rem;
    font-size: clamp(1.45rem, 2.4vw, 1.75rem);
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.02em;
    line-height: 1.2;
}
.auth-subtitle {
    margin-top: .45rem;
    color: var(--texte-gris);
    font-size: .92rem;
    line-height: 1.5;
}

.auth-form { margin-top: 1.6rem; }

.auth-champ { margin-bottom: 1.05rem; }
.auth-champ label {
    display: block;
    font-size: .86rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: .38rem;
}
.auth-champ label .req { color: var(--or-texte); margin-left: .15rem; }
.auth-input-wrap { position: relative; }
.auth-input-wrap svg.auth-input-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: #9aa3b8;
    pointer-events: none;
}
.auth-champ input {
    width: 100%;
    padding: .72rem .9rem .72rem 2.2rem;
    font: inherit;
    font-size: .94rem;
    color: var(--texte);
    background: #fcfcfd;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.auth-champ input::placeholder { color: #aab1c2; }
.auth-champ input:hover { border-color: #d1d5db; background: #fff; }
.auth-champ input:focus {
    outline: none;
    background: #fff;
    border-color: var(--or);
    box-shadow: 0 0 0 4px rgba(242,167,27,.15);
}
.auth-champ input.input-error { border-color: #fca5a5; background: #fff5f5; }
.auth-input-wrap.has-toggle input { padding-right: 2.6rem; }
.auth-toggle-pass {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border: none;
    background: transparent;
    color: #9aa3b8;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.auth-toggle-pass:hover { background: #f3f4f6; color: var(--navy); }
.auth-toggle-pass svg { width: 14px; height: 14px; }

/* ---------- Vérification e-mail (code OTP) à l'inscription ---------- */
.otp-infos {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: rgba(242, 167, 27, .08);
    border: 1px solid rgba(242, 167, 27, .32);
    border-radius: 12px;
    padding: .75rem .9rem;
    font-size: .85rem;
    line-height: 1.5;
    color: #6a5a2e;
    margin-bottom: 1.05rem;
}
.otp-infos svg { width: 17px; height: 17px; flex: none; color: var(--or-texte); margin-top: .1rem; }
/* Grand champ du code : 6 chiffres très espacés */
.auth-champ input.otp-champ {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: .55em;
    text-align: center;
    padding-left: 2.2rem;
}
.auth-champ input.otp-champ::placeholder { letter-spacing: .55em; }
.otp-actions {
    display: flex;
    gap: .6rem;
    margin-top: .9rem;
}
.otp-lien {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .62rem .9rem;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: var(--navy);
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.otp-lien:hover { border-color: var(--or); background: #fffdf6; }
.otp-lien:disabled { opacity: .55; cursor: not-allowed; }
.otp-lien-neutre:hover { border-color: #9aa3b8; background: #f8f9fb; }

.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -.2rem 0 1.1rem;
    font-size: .84rem;
}
.auth-checkbox { display: flex; align-items: center; gap: .5rem; color: var(--texte-gris); cursor: pointer; user-select: none; }
.auth-checkbox input { accent-color: var(--navy); width: 16px; height: 16px; }
.auth-link { color: var(--navy-clair); font-weight: 600; }
.auth-link:hover { color: var(--or-texte); text-decoration: underline; text-underline-offset: 3px; }

.auth-aide {
    font-size: .8rem;
    color: var(--texte-gris);
    margin-top: .35rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.auth-aide svg { width: 12px; height: 12px; flex: none; }

.auth-submit {
    width: 100%;
    margin-top: .4rem;
    padding: .82rem 1.2rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--navy) 0%, #1d3f8f 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    box-shadow: 0 6px 18px rgba(13,27,63,.22);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(13,27,63,.28); filter: brightness(1.05); }
.auth-submit:active { transform: translateY(0); }
.auth-submit svg { width: 14px; height: 14px; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.35rem 0 1.1rem;
    color: #9aa3b8;
    font-size: .82rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eef0f4;
}

.auth-alt {
    text-align: center;
    font-size: .92rem;
    color: var(--texte-gris);
}
.auth-alt a {
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
    border-bottom: 2px solid rgba(242,167,27,.35);
    padding-bottom: 1px;
    transition: border-color .15s, color .15s;
}
.auth-alt a:hover { color: var(--or-texte); border-bottom-color: var(--or); }

.auth-legal {
    margin-top: 1.2rem;
    text-align: center;
    font-size: .76rem;
    color: #9aa3b8;
    line-height: 1.5;
}
.auth-legal a { color: var(--texte-gris); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal a:hover { color: var(--navy); }

/* Messages dans auth */
.auth-form-side .message { border-radius: 12px; font-size: .9rem; padding: .85rem 1rem; }
.auth-form-side .message-erreur { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.auth-form-side .message ul { margin-left: 1.1rem; }

/* Legacy carte-connexion kept for admin login etc. */
.carte-connexion {
    width: min(400px, 100% - 2rem);
    margin: 4.5rem auto;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 2rem;
}
.carte-connexion h1 { font-size: 1.4rem; margin-bottom: .3rem; }
.carte-connexion > p.texte-gris { margin-bottom: 1.2rem; font-size: .92rem; }
.aide-connexion {
    margin-top: 1.2rem;
    font-size: .82rem;
    color: var(--texte-gris);
    background: var(--fond-clair);
    border: 1px dashed var(--bordure);
    border-radius: 8px;
    padding: .6rem .8rem;
}
.carte-connexion > p:last-child { margin-top: 1rem; font-size: .9rem; }
.carte-connexion a:hover { color: var(--or-texte); }

/* Responsive auth */
@media (max-width: 880px) {
    .auth-card { grid-template-columns: 1fr; max-width: 520px; }
    .auth-brand { padding: 2rem 1.7rem 1.7rem; }
    .auth-brand h2 { margin-top: 1.4rem; }
    .auth-features { margin-top: 1.3rem; }
    .auth-brand-quote { display: none; }
}
@media (max-width: 560px) {
    .auth-wrapper { width: calc(100% - 1.2rem); margin: 1rem auto; }
    .auth-card { border-radius: 18px; }
    .auth-form-side { padding: 1.6rem 1.25rem 1.5rem; }
    .auth-brand { padding: 1.7rem 1.25rem 1.5rem; }
    .grille-2-colonnes { grid-template-columns: 1fr; }
}

/* 2-col grid inside auth */
.auth-form-side .grille-2-colonnes { gap: .9rem; }
.auth-form-side .grille-2-colonnes .auth-champ { margin-bottom: 0; }

/* ============================================================
   ADMIN LOGIN — Variante sombre premium
   ============================================================ */
.page-admin-auth {
    background:
        radial-gradient(700px 500px at 5% 0%, rgba(242,167,27,.10), transparent 55%),
        radial-gradient(800px 600px at 95% 100%, rgba(15,23,42,.12), transparent 60%),
        linear-gradient(to bottom, #f1f5f9 0%, #f8fafc 45%, #ffffff 100%);
    min-height: 100vh;
    justify-content: center;
}
.auth-admin.auth-card {
    border: 1px solid #e2e8f0;
    box-shadow:
        0 10px 36px rgba(15,23,42,.10),
        0 28px 72px rgba(15,23,42,.14);
    max-width: 1020px;
}
.auth-admin .auth-brand {
    background:
        radial-gradient(360px 280px at 20% 15%, rgba(242,167,27,.18), transparent 60%),
        radial-gradient(500px 400px at 85% 85%, rgba(255,255,255,.06), transparent 65%),
        linear-gradient(165deg, #0b1226 0%, #111c3f 48%, #0f172a 100%);
    padding: 2.5rem 2.3rem 2rem;
}
.auth-admin .auth-brand-logo { font-size: 1.18rem; }
.auth-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(242,167,27,.14);
    border: 1px solid rgba(242,167,27,.28);
    color: var(--or);
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: .35rem .7rem;
    border-radius: 999px;
    width: fit-content;
}
.auth-admin-badge svg { width: 11px; height: 11px; }
.auth-admin .auth-brand h2 { margin-top: 1.4rem; font-size: clamp(1.5rem, 2.4vw, 1.85rem); }
.auth-admin .auth-features-icon { background: rgba(242,167,27,.12); border-color: rgba(242,167,27,.20); color: var(--or); }
.auth-admin .auth-features li strong { color: #f1f5f9; }
.auth-admin .auth-features li span { color: #94a3b8; }

.auth-admin-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .7rem;
    margin-top: 1.7rem;
    position: relative;
    z-index: 1;
}
.auth-stat {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    padding: .85rem .75rem;
    text-align: center;
    backdrop-filter: blur(6px);
}
.auth-stat strong { display: block; font-size: 1.15rem; font-weight: 800; color: #fff; line-height: 1; }
.auth-stat span { font-size: .72rem; color: #94a3b8; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }

.auth-admin .auth-brand-quote { margin-top: 1.4rem; }

.auth-admin .auth-form-side { padding: 2.3rem 2.5rem 2rem; }
.auth-admin .auth-eyebrow { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
.auth-admin .auth-eyebrow svg { color: #64748b; }
.auth-admin-hint {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: .85rem .95rem;
    margin-top: 1.1rem;
    font-size: .82rem;
    line-height: 1.5;
    color: #475569;
}
.auth-admin-hint svg { width: 13px; height: 13px; flex: none; color: #64748b; margin-top: 1px; }
.auth-admin-hint code {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: .12rem .4rem;
    border-radius: 6px;
    font-size: .78rem;
    color: #0f172a;
    font-weight: 600;
}
.auth-admin .auth-submit {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #1e3a5f 100%);
    box-shadow: 0 8px 20px rgba(15,23,42,.22);
}
.auth-admin .auth-submit:hover { box-shadow: 0 12px 28px rgba(15,23,42,.28); }

@media (max-width: 880px) {
    .auth-admin-stats { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
    .auth-admin-stats { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
    .auth-stat { padding: .7rem .4rem; }
    .auth-stat strong { font-size: 1rem; }
}

/* ============================================================
   PIED DE PAGE PUBLIC — bleu marine
   ============================================================ */
.pied-site {
    margin-top: 3rem;
    padding: 1.4rem 0;
    color: #c7d2e5;
    font-size: .9rem;
    background: var(--navy);
}
.pied-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.pied-inner a:hover { color: var(--or); }

/* ============================================================
   SECTIONS DE LA PAGE D'ACCUEIL (maquette complète)
   ============================================================ */

/* Utilitaire : section qui s'étend sur toute la largeur de l'écran
   tout en étant dans le conteneur central */
.pleine-largeur {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* ---------- Diaporama du héros ---------- */
/* Les diapos sont empilées ; seule la diapo .active est visible,
   avec un léger fondu à chaque changement. */
.hero-diapos { position: relative; }
.hero-diapo { display: none; }
.hero-diapo.active { display: block; animation: fondu-hero .7s ease; }
@keyframes fondu-hero {
    from { opacity: .3; }
    to   { opacity: 1; }
}

/* Flèches précédent / suivant */
.hero-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(13, 27, 63, .45);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.hero-fleche:hover { background: var(--or); color: var(--navy); }
.hero-fleche svg { width: 22px; height: 22px; }
.hero-fleche-precedent { left: 14px; }
.hero-fleche-suivant { right: 14px; }

/* Points de navigation sous la bannière */
.hero-points {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: .45rem;
}
.hero-point {
    width: 11px;
    height: 11px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(13, 27, 63, .35);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.hero-point:hover { transform: scale(1.2); }
.hero-point.active { background: var(--or); }

@media (prefers-reduced-motion: reduce) {
    .hero-diapo.active { animation: none; }
}

/* ---------- En-têtes de section ---------- */
.entete-section { margin: 2.6rem 0 1.3rem; }
.libelle-section {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--or-texte);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.libelle-section svg { width: 15px; height: 15px; flex: none; }
.entete-section h2 {
    margin-top: .15rem;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.01em;
}
.entete-section h2 em { font-style: normal; color: var(--violet); }
.sous-titre-section { color: var(--texte-gris); }
.entete-section.ligne {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.lien-tous {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--violet);
    font-weight: 600;
    font-size: .95rem;
    padding-bottom: .3rem;
}
.lien-tous svg { width: 17px; height: 17px; transition: transform .15s ease; }
.lien-tous:hover svg { transform: translateX(3px); }

/* ---------- Bannière « Boostez votre visibilité » ---------- */
/* (styles définis en fin de fichier, section ACCUEIL) */

/* ---------- Produits populaires ---------- */
.section-populaires { margin-top: 2.7rem; }
.carte-corps-ligne {
    display: flex;
    align-items: center;
    gap: .7rem;
}
.carte-corps-ligne .carte-texte { min-width: 0; flex: 1; }
.carte-corps-ligne h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--texte);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.carte-corps-ligne .produit-prix { margin-top: .1rem; }
.carte-corps-ligne .prix-final { font-size: .98rem; color: var(--or-texte); }
.fleche-or {
    background: var(--or);
    color: var(--navy);
}
.carte-produit:hover .fleche-or { transform: translateX(3px); background: var(--or-fonce); }

/* ---------- Section À propos ---------- */
.section-apropos {
    margin-top: 2.8rem;
    padding: 2.8rem 0 3rem;
    background: #f7f8fc;
}
.apropos-inner {
    display: grid;
    grid-template-columns: 1.05fr 1.2fr .8fr;
    gap: 2.2rem;
    align-items: center;
}
.apropos-photo {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}
.apropos-texte h2 {
    margin: .3rem 0 .7rem;
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    font-weight: 800;
    color: var(--navy);
    line-height: 1.25;
}
.apropos-texte h2 em { font-style: normal; color: var(--violet); }
.apropos-texte > p { color: var(--texte-gris); font-size: .95rem; }
.apropos-texte .bouton {
    margin-top: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.apropos-texte .bouton svg { width: 16px; height: 16px; }
.apropos-atouts {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}
.apropos-atouts li { display: flex; align-items: center; gap: .9rem; }
.atout-icone {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--or);
    color: var(--or);
    display: grid;
    place-items: center;
    background: #fff;
}
.atout-icone svg { width: 22px; height: 22px; }
.apropos-atouts h3 { font-size: .95rem; color: var(--navy); line-height: 1.3; }
.apropos-atouts p { font-size: .82rem; color: var(--texte-gris); }

@media (max-width: 1020px) {
    .apropos-inner { grid-template-columns: 1fr 1fr; }
    .apropos-photo { grid-column: 1 / -1; max-height: 260px; }
}
@media (max-width: 640px) {
    .apropos-inner { grid-template-columns: 1fr; }
}

/* ---------- Pied de page enrichi ---------- */
.pied-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
}
.pied-nav { display: flex; gap: 1.8rem; font-size: .93rem; }
.pied-nav a { color: #c7d2e5; }
.pied-nav a:hover { color: var(--or); }
.pied-social { display: flex; gap: .6rem; }
.pied-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: grid;
    place-items: center;
    transition: background .15s ease, color .15s ease;
}
.pied-social a:hover { background: var(--or); color: var(--navy); }
.pied-social svg { width: 17px; height: 17px; }
.pied-copyright {
    text-align: center;
    color: #8fa0c0;
    font-size: .8rem;
    margin-top: 1.1rem;
}

/* ============================================================
   SUR COMMANDE + FENÊTRE MODALE (demande par e-mail)
   ============================================================ */

/* Petit bouton-orange « Sur commande » (dans les cartes produit) */
.sur-commande {
    display: inline-block;
    background: #fff7e8;
    border: 1px dashed var(--or);
    color: var(--or-texte);
    font-weight: 700;
    font-size: .85rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.sur-commande:hover { background: var(--or); color: var(--navy); }

/* Bouton visible sur la page produit */
.bouton-commande {
    display: inline-block;
    background: var(--or);
    color: var(--navy);
    border: none;
    border-radius: 10px;
    padding: .55rem 1.3rem;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.bouton-commande:hover { background: var(--or-fonce); }
.sur-commande-info {
    display: block;
    color: var(--texte-gris);
    font-size: .85rem;
    margin-top: .35rem;
}

/* Badge CLIGNOTANT « Sur commande » affiché quand le prix est 0,00 DT.
   Attention : ne PAS réutiliser la classe .sur-commande ci-dessus —
   son clic est intercepté par script.js pour ouvrir la fenêtre de devis. */
@keyframes clignoter {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}
.badge-sur-commande {
    display: inline-block;
    background: #fff7e8;
    border: 1px dashed var(--or);
    color: var(--or-texte);
    font-weight: 700;
    font-size: .78rem;
    padding: .12rem .55rem;
    border-radius: 999px;
    margin-left: .4rem;
    vertical-align: middle;
    white-space: nowrap;
    animation: clignoter 1.2s ease-in-out infinite;
}

/* Note d'explication sous le prix, sur la page produit */
.sur-commande-note {
    display: block;
    color: var(--texte-gris);
    font-size: .85rem;
    margin-top: .45rem;
    line-height: 1.5;
}
.sur-commande-note strong { color: var(--or-texte); }

/* Accessibilité : pas de clignotement pour ceux qui préfèrent
   réduire les animations */
@media (prefers-reduced-motion: reduce) {
    .badge-sur-commande { animation: none; }
}

/* ---------- Modale ---------- */
.modale { position: fixed; inset: 0; z-index: 200; }
.modale[hidden] { display: none; }
.modale-fond {
    position: absolute;
    inset: 0;
    background: rgba(13, 27, 63, .55);
    backdrop-filter: blur(2px);
}
.modale-contenu {
    position: relative;
    width: min(480px, calc(100% - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: #fff;
    border-radius: var(--rayon);
    box-shadow: 0 24px 60px rgba(13, 27, 63, .35);
    margin: 2rem auto 0;
    padding: 1.6rem 1.7rem 1.7rem;
    animation: modale-apparait .18s ease;
}
@keyframes modale-apparait {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.modale-contenu h2 { color: var(--navy); font-size: 1.25rem; }
.modale-produit {
    color: var(--or-texte);
    font-weight: 700;
    margin: .2rem 0 1rem;
}
.modale-fermer {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--fond-clair);
    color: var(--texte);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.modale-fermer:hover { background: #fee2e2; color: #991b1b; }
.modale-resultat {
    padding: .7rem .9rem;
    border-radius: 8px;
    font-size: .9rem;
    margin-bottom: 1rem;
}
.modale-resultat.succes { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.modale-resultat.erreur { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ---------- Admin : page paramètres e-mail ---------- */
.carte-parametres {
    max-width: 640px;
    padding: 1.6rem;
}
.aide-cpanel {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    border-radius: 8px;
    font-size: .87rem;
    padding: .8rem 1rem;
    margin-bottom: 1.3rem;
}
.aide-cpanel strong { display: block; margin-bottom: .25rem; }
.aide-cpanel ul { margin: .3rem 0 0 1.1rem; }

/* Variante pleine largeur (page bannières) */
.carte-parametres.carte-large { max-width: none; }

/* Aperçu de la bannière choisie avant l'ajout */
.apercu-banniere-cadre {
    border: 1px dashed var(--bordure);
    border-radius: 8px;
    padding: .8rem;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.apercu-banniere-cadre span {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}
.apercu-banniere-cadre img {
    width: 100%;
    aspect-ratio: 4 / 1;
    object-fit: cover;
    border-radius: 6px;
    background: #fff;
}

/* ============================================================
   COMPTE CLIENT, PANIER & COMMANDES
   ============================================================ */

/* ---------- Icône panier de l'en-tête (compteur inclus) ---------- */
.lien-panier {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #c7d2e5;
    background: rgba(255, 255, 255, .07);
    transition: background .2s, color .2s;
    flex: none;
}
.lien-panier:hover { background: var(--or); color: var(--navy); }
.lien-panier.actif { background: var(--or); color: var(--navy); }
.lien-panier > svg { width: 20px; height: 20px; }

.badge-panier {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--or);
    color: var(--navy);
    font-size: .72rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.badge-panier.vide { background: #93a3c2; color: #fff; }

/* ---------- Contrôle de quantité (+ / − / champ) ---------- */
.controle-quantite {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--bordure);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.controle-quantite input {
    width: 72px;
    border: none;
    text-align: center;
    font-weight: 600;
    font-size: .98rem;
    color: var(--texte);
    padding: .45rem .2rem;
    -moz-appearance: textfield;
    outline: none;
}
.controle-quantite input::-webkit-outer-spin-button,
.controle-quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-quantite {
    width: 38px;
    border: none;
    background: var(--fond-clair);
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.btn-quantite:hover { background: var(--or); color: var(--navy); }

/* ---------- Zone "Ajouter au panier" (page produit) ---------- */
.zone-ajout-panier {
    margin-top: 1.4rem;
    padding: 1.2rem;
    border: 1.5px dashed var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-clair);
}
.champ-quantite { display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
}
.champ-quantite label { margin: 0; font-size: .93rem; font-weight: 600; color: var(--navy); }
.bouton-panier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .2rem;
}
.bouton-panier svg { width: 18px; height: 18px; }

/* ---------- Page panier ---------- */
.panier-vide {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1.5px dashed var(--bordure);
    border-radius: var(--rayon);
    background: var(--fond-clair);
}
.panier-vide svg { width: 58px; height: 58px; margin: 0 auto 1rem; color: #cbd5e1; }
.panier-vide h2 { color: var(--navy); margin-bottom: .3rem; }
.panier-vide .bouton { margin-top: 1.4rem; }

.panier-corps {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}

.ligne-panier {
    display: grid;
    grid-template-columns: 86px 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: #fff;
    box-shadow: var(--ombre);
}
.panier-lignes { display: flex; flex-direction: column; gap: 1rem; }

.ligne-panier-image img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--bordure);
}
.ligne-panier-infos { min-width: 0; }
.ligne-panier-infos h2 { font-size: 1rem; color: var(--navy); }
.ligne-panier-infos h2 a:hover { color: var(--or-texte); }
.ligne-panier-categorie { font-size: .8rem; }
.ligne-panier-perso {
    font-size: .84rem;
    color: var(--texte);
    background: var(--fond-clair);
    border-left: 3px solid var(--or);
    border-radius: 0 8px 8px 0;
    padding: .35rem .6rem;
    margin-top: .35rem;
}
.ligne-panier-prix-unitaire { font-size: .82rem; color: var(--texte-gris); margin-top: .35rem; }

.ligne-panier-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}
.form-quantite-panier { display: flex; align-items: end; gap: .5rem; }
.form-quantite-panier label {
    display: block;
    font-size: .76rem;
    margin-bottom: .25rem;
    text-align: right;
}
.ligne-panier-sous-total {
    font-weight: 700;
    color: var(--or-texte);
    font-size: 1.02rem;
    white-space: nowrap;
}
.lien-retirer {
    background: none;
    border: none;
    color: #dc2626;
    font-size: .84rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.lien-retirer:hover { color: #b91c1c; }

/* Récapitulatif à droite du panier */
.panier-recap {
    position: sticky;
    top: 1rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: #fff;
    box-shadow: var(--ombre);
    padding: 1.4rem;
}
.panier-recap h2 { font-size: 1.1rem; color: var(--navy); margin-bottom: .9rem; }
.recap-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--bordure);
    font-size: .95rem;
}
.recap-total { font-size: 1.25rem; color: var(--or-texte); }
.recap-aide { font-size: .84rem; margin-top: .9rem; }
.recap-boutons { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.1rem; }
.form-valider { margin: 0; }

/* ---------- Panier — Header premium ---------- */
.panier-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background:
        radial-gradient(380px 200px at 85% 0%, rgba(242,167,27,.18), transparent 60%),
        linear-gradient(135deg, #0d1b3f 0%, #162a5e 55%, #1d3f8f 100%);
    color: #fff;
    border-radius: 18px;
    padding: 1.4rem 1.5rem 1.25rem;
    margin: 1rem 0 1.2rem;
    box-shadow: 0 8px 24px rgba(13,27,63,.18);
    position: relative;
    overflow: hidden;
}
.panier-page-header::after {
    content: "";
    position: absolute;
    width: 180px; height: 180px;
    right: -30px; top: -40px;
    border-radius: 50%;
    background: rgba(242,167,27,.10);
    border: 1px solid rgba(242,167,27,.15);
    pointer-events: none;
}
.panier-titre-bloc h1 {
    font-size: clamp(1.4rem, 2.6vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: .65rem;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}
.panier-titre-bloc h1 svg { width: 22px; height: 22px; flex: none; color: var(--or); }
.badge-panier-count {
    display: inline-flex;
    align-items: center;
    background: var(--or);
    color: var(--navy);
    font-size: .78rem;
    font-weight: 800;
    padding: .18rem .55rem;
    border-radius: 999px;
    letter-spacing: .02em;
}
.panier-titre-bloc p {
    margin-top: .35rem;
    color: #c7d2e5;
    font-size: .88rem;
    position: relative;
    z-index: 1;
}
.etapes-panier {
    display: flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: .35rem .45rem;
    font-size: .78rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(6px);
}
.etape-panier {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .32rem .7rem;
    border-radius: 999px;
    color: #94a3b8;
}
.etape-panier.active {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 2px 8px rgba(13,27,63,.15);
}
.etape-panier.active svg { color: var(--or-texte); }
.etape-panier svg { width: 12px; height: 12px; }
.etapes-sep { color: rgba(255,255,255,.35); font-weight: 400; }

@media (max-width: 640px) {
    .panier-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: .9rem;
        padding: 1.1rem 1rem 1rem;
        border-radius: 16px;
    }
    .panier-page-header::after { width: 140px; height: 140px; right: -20px; top: -30px; }
    .panier-titre-bloc h1 { font-size: 1.3rem; gap: .5rem; }
    .panier-titre-bloc h1 svg { width: 18px; height: 18px; }
    .badge-panier-count { font-size: .72rem; padding: .15rem .5rem; }
    .panier-titre-bloc p { font-size: .82rem; line-height: 1.45; max-width: 100%; overflow-wrap: anywhere; }
    .etapes-panier {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: .25rem;
        padding: .28rem;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    .etapes-panier::-webkit-scrollbar { display: none; }
    .etape-panier {
        white-space: nowrap;
        flex: none;
        padding: .26rem .55rem;
        font-size: .72rem;
    }
}
@media (max-width: 380px) {
    .panier-titre-bloc h1 { flex-wrap: wrap; }
    .etapes-panier { gap: .2rem; }
    .etape-panier { padding: .24rem .5rem; }
}

/* Panier vide premium */
.panier-vide.premium {
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(15,23,42,.06);
}
.panier-vide-illus {
    width: 72px; height: 72px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff7e8, #ffedd5);
    border: 1px solid #fde68a;
    display: grid;
    place-items: center;
    color: var(--or-texte);
}
.panier-vide-illus svg { width: 32px; height: 32px; }

/* Ligne panier premium tweaks */
.ligne-panier.premium {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: box-shadow .16s, transform .16s, border-color .16s;
}
.ligne-panier.premium:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
    transform: translateY(-1px);
}
.panier-recap.premium {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
}
.panier-recap-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: .9rem;
}
.panier-recap-head svg { width: 16px; height: 16px; color: var(--or-texte); }
.recap-secure {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .7rem .8rem;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    font-size: .78rem;
    color: #64748b;
}
.recap-secure svg { width: 14px; height: 14px; flex: none; color: #059669; }
.recap-avantages {
    display: flex;
    gap: .6rem;
    margin-top: .9rem;
    flex-wrap: wrap;
}
.recap-avantage {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: .3rem .55rem;
    border-radius: 999px;
}
.recap-avantage svg { width: 11px; height: 11px; }

/* ---------- Panier — Responsive (fix chevauchement & papier) ---------- */
@media (max-width: 920px) {
    .panier-corps {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .panier-recap {
        position: static;
        order: 2;
    }
    .panier-lignes { order: 1; }
}

@media (max-width: 720px) {
    .ligne-panier {
        grid-template-columns: 72px 1fr;
        gap: .85rem;
        padding: .85rem;
        align-items: start;
    }
    .ligne-panier-image img {
        width: 72px;
        height: 72px;
    }
    .ligne-panier-infos h2 { font-size: .95rem; line-height: 1.35; }
    .ligne-panier-perso {
        font-size: .82rem;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .ligne-panier-prix-unitaire { font-size: .8rem; }
    .ligne-panier-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: .7rem;
        width: 100%;
    }
    .form-quantite-panier {
        align-items: center;
        gap: .5rem;
        flex-wrap: wrap;
    }
    .form-quantite-panier label {
        margin: 0;
        font-size: .82rem;
        text-align: left;
        white-space: nowrap;
    }
    .controle-quantite input { width: 56px; font-size: .9rem; }
    .btn-quantite { width: 34px; }
    .ligne-panier-sous-total {
        grid-column: 1 / -1;
        text-align: right;
        border-top: 1px dashed var(--bordure);
        padding-top: .6rem;
        margin-top: .15rem;
        font-size: 1rem;
    }
    .ligne-panier-sous-total::before {
        content: "Sous-total : ";
        font-weight: 500;
        color: var(--texte-gris);
        font-size: .85rem;
        margin-right: .35rem;
    }
}

@media (max-width: 480px) {
    .ligne-panier { grid-template-columns: 64px 1fr; padding: .75rem; }
    .ligne-panier-image img { width: 64px; height: 64px; border-radius: 10px; }
    .controle-quantite input { width: 48px; }
    .panier-recap { padding: 1.1rem; }
    .recap-total { font-size: 1.15rem; }
    .panier-vide { padding: 2rem 1rem; }
}

/* ---------- Page succès « commande envoyée » ---------- */
.bloc-succes { text-align: center; padding: 2.5rem 0 1.5rem; }
.succes-rond {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #ecfdf5;
    border: 2px solid #a7f3d0;
    color: #059669;
    margin-bottom: 1.1rem;
}
.succes-rond svg { width: 36px; height: 36px; }
.bloc-succes h1 { font-size: 1.6rem; color: #065f46; }

.carte-recap-commande {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.carte-recap-commande h2 { font-size: 1.15rem; color: var(--navy); margin-bottom: 1rem; }
.table-recap td { vertical-align: top; }
.cellule-perso { font-size: .88rem; max-width: 260px; }
.cellule-quantite { font-weight: 600; }
.ligne-total td {
    border-top: 2px solid var(--navy);
    background: var(--fond-clair);
    font-size: 1.05rem;
}
.aide-commande { margin: 1rem 0 .4rem; font-size: .88rem; }

/* ---------- Badges de statut (client + admin) ---------- */
.statut {
    display: inline-block;
    padding: .22rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.statut-en_attente { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.statut-confirmee  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.statut-annulee    { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ---------- Admin : page commandes ---------- */
.filtres-statut { display: flex; gap: .6rem; flex-wrap: wrap; }
.filtres-statut a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border: 1.5px solid var(--bordure);
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--texte);
    transition: border-color .15s, background .15s;
}
.filtres-statut a:hover { border-color: var(--or); }
.filtres-statut a.actif {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
.filtres-statut .compteur {
    background: var(--or);
    color: var(--navy);
    border-radius: 999px;
    padding: 0 .45rem;
    font-size: .76rem;
    font-weight: 700;
}

/* ============================================================
   ADMIN UI V2 — barre navy pleine largeur + barre latérale
   blanche + en-tête de page à pastille dorée (design « tableau
   de bord boutique »).
   ============================================================ */
:root { --hauteur-barre-admin: 58px; }

/* ---------- Barre du haut ----------
   Une seule ligne : logo à gauche, puce profil + hamburger à droite.
   (Sur grand écran les liens vivent dans la barre latérale ; sur
   petit écran le hamburger ouvre le panneau .nav-admin.) */
.barre-admin-inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: .5rem 1.4rem;
    min-height: var(--hauteur-barre-admin);
    gap: 1rem;
    flex-wrap: nowrap;
}

.logo-admin { gap: .55rem; font-size: 1.12rem; white-space: nowrap; }
.logo-admin svg { width: 30px; height: 30px; }
.logo-admin-pill {
    background: #2563eb;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .12rem .6rem;
    border-radius: 999px;
    letter-spacing: .02em;
}

.nav-admin a.actif {
    background: var(--or);
    border: 1px solid var(--or);
    color: #10203f;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(242, 167, 27, .35);
}

.admin-profil {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    color: #e2e8f0;
    font-weight: 600;
    font-size: .9rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: .28rem .8rem .28rem .3rem;
    border-radius: 999px;
    white-space: nowrap;
    flex: none;
}
.admin-profil-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f7b733, var(--or));
    display: grid;
    place-items: center;
    color: #10203f;
    flex: none;
}
.admin-profil-avatar svg { width: 16px; height: 16px; }
.admin-profil > svg:last-child { width: 14px; height: 14px; opacity: .8; }

/* ---------- Compteur commun (nav + barre latérale) ---------- */
.badge-en-attente {
    background: var(--or);
    color: #10203f;
    font-size: .70rem;
    font-weight: 800;
    padding: 0 .4rem;
    border-radius: 999px;
    line-height: 1.5;
    min-width: 18px;
    text-align: center;
    display: inline-block;
}

/* ---------- Structure : latérale + contenu ---------- */
.admin-layout {
    display: flex;
    align-items: stretch;
    flex: 1;
    width: 100%;
}

.admin-sidebar {
    width: 242px;
    flex: none;
    background: #fff;
    border-right: 1px solid #e8edf4;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--hauteur-barre-admin);
    height: calc(100vh - var(--hauteur-barre-admin));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.1rem .8rem 0;
}

.admin-sidebar-nav { display: flex; flex-direction: column; gap: .18rem; }
.admin-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem .85rem;
    border-radius: 11px;
    color: #3b4a63;
    font-size: .93rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.admin-sidebar-nav a svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.admin-sidebar-nav a:hover { background: #f4f6fa; color: var(--navy); }
.admin-sidebar-nav a.actif {
    background: #fdf0c8;
    color: #10203f;
    font-weight: 700;
}
.admin-sidebar-nav a.actif svg { opacity: 1; }
.admin-sidebar-nav a .badge-en-attente { margin-left: auto; }

/* Zone décorative du bas de la barre latérale */
.admin-sidebar-bas {
    margin-top: auto;
    padding: 1.2rem .6rem 0;
    text-align: center;
}
.icone-panier-bas {
    width: 42px;
    height: 42px;
    margin: 0 auto .1rem;
    display: block;
    color: var(--or);
}
.admin-sidebar-devise {
    font-family: "Caveat", "Segoe Script", cursive;
    font-weight: 700;
    font-size: 1.42rem;
    line-height: 1.12;
    color: var(--navy);
    display: inline-block;
    transform: rotate(-3deg);
}
.devise-souligne { width: 82px; height: 12px; display: block; margin: .15rem auto 0; }
.admin-sidebar-vague {
    display: block;
    width: calc(100% + 1.6rem);
    margin: 1rem -.8rem 0;
    height: 78px;
    flex: none;
}

main.conteneur-admin {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 0 1.8rem 3rem;
    background: #f6f8fb;
    min-height: calc(100vh - var(--hauteur-barre-admin));
    position: relative;
}
/* Taches décoratives en haut à droite du contenu */
main.conteneur-admin::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 210px;
    background:
        radial-gradient(circle at 72% 18%, rgba(242, 167, 27, .16), transparent 58%),
        radial-gradient(circle at 96% 62%, rgba(37, 99, 235, .07), transparent 55%);
    pointer-events: none;
}

/* ---------- En-tête de page à pastille dorée ---------- */
.admin-page-head {
    display: flex;
    align-items: center;
    gap: 1.05rem;
    margin: 1.55rem 0 1.1rem;
    position: relative;
}
.admin-page-head-ico {
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 15px;
    background: linear-gradient(135deg, #f7b733, var(--or));
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 6px 14px rgba(242, 167, 27, .38);
}
.admin-page-head-ico svg { width: 26px; height: 26px; }
.admin-page-head h1 {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 800;
    color: #10203f;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.admin-page-head-sous { color: #64748b; font-size: .95rem; margin-top: .1rem; }

/* ---------- Messages avec icône + croix de fermeture ---------- */
.message:has(> .message-texte) {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border-radius: 12px;
    padding: .85rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.message-icone { flex: none; display: grid; place-items: center; margin-top: .12rem; }
.message-icone svg { width: 19px; height: 19px; }
.message-texte { flex: 1; min-width: 0; }
.message-texte a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.message-fermer {
    flex: none;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.2rem;
    line-height: 1;
    color: inherit;
    opacity: .55;
    padding: 0 .15rem;
}
.message-fermer:hover { opacity: 1; }

/* ---------- Bouton hamburger de l'admin ---------- */
.admin-bouton-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px;
    cursor: pointer;
    flex: none;
}
.admin-bouton-menu span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.admin-bouton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.admin-bouton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.admin-bouton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Responsive ---------- */
@media (min-width: 1081px) {
    /* La barre latérale porte déjà la navigation : la ligne du haut
       reste épurée (logo + profil) au lieu d'empiler trois rangées. */
    .nav-admin { display: none; }
}
@media (max-width: 1080px) {
    .admin-sidebar { display: none; }
    main.conteneur-admin { padding: 0 1.2rem 2.5rem; }

    /* La barre latérale disparaît : le hamburger prend le relais et
       ouvre les mêmes liens en panneau déroulant sous la barre navy. */
    .admin-bouton-menu { display: flex; }
    .nav-admin {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
        padding: .55rem .9rem .8rem;
        background: linear-gradient(160deg, #0f38a3 0%, #1546aa 100%);
        border-top: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 14px 26px rgba(13, 27, 63, .35);
    }
    .nav-admin.ouvert { display: flex; }
    .nav-admin a { width: 100%; padding: .6rem .75rem; }
    .nav-admin a .badge-en-attente { margin-left: auto; }
}
@media (max-width: 720px) {
    .barre-admin-inner { padding: .5rem .9rem; gap: .7rem; }
    main.conteneur-admin { padding: 0 .8rem 2rem; }
    .admin-page-head { gap: .75rem; }
    .admin-page-head-ico { width: 44px; height: 44px; border-radius: 12px; }
    .admin-page-head-ico svg { width: 22px; height: 22px; }
}
@media (max-width: 560px) {
    .logo-admin { font-size: .98rem; gap: .45rem; }
    .logo-admin svg { width: 26px; height: 26px; }
    .logo-admin-pill { font-size: .66rem; padding: .1rem .45rem; }
    .admin-profil { padding: .22rem .3rem; }
    .admin-profil-nom,
    .admin-profil > svg:last-child { display: none; }
}

/* ============================================================
   ACCUEIL — NOUVELLE MAQUETTE
   Rail latéral (menu catégories + carte qualité),
   héros bleu marine avec diaporama de fond,
   carte « Notre impact en chiffres »,
   bannière « Boostez votre visibilité ».
   ============================================================ */

/* ---------- Structure générale ---------- */
.accueil-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.3rem;
    margin-top: 1.4rem;
    align-items: stretch;
}
.accueil-colonne { min-width: 0; }
.accueil-haut {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.3rem;
    align-items: stretch;
}

/* Icône compte de l'en-tête (même style que le panier) */
.lien-compte {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #c7d2e5;
    background: rgba(255, 255, 255, .07);
    transition: background .2s, color .2s;
    flex: none;
}
.lien-compte:hover { background: var(--or); color: var(--navy); }
.lien-compte.actif { background: var(--or); color: var(--navy); }
.lien-compte svg { width: 20px; height: 20px; }

/* ---------- Rail latéral : menu des catégories ---------- */
.rail-accueil {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}
.menu-categories {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 16px;
    box-shadow: var(--ombre);
    overflow: hidden;
}
.menu-cat-entete {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem .9rem;
    background: linear-gradient(120deg, #f8c95c, #f2a71b);
    color: var(--navy);
    font-weight: 700;
    font-size: .9rem;
}
.menu-cat-entete svg { width: 17px; height: 17px; flex: none; }
.menu-cat-entete:hover { filter: brightness(1.04); }
.menu-cat-entete svg:last-child { width: 14px; margin-left: auto; }

.menu-cat-liste {
    /* 0 1 auto : la liste suit les catégories sans s'étirer,
       l'espace restant est absorbé par les bannières en dessous */
    flex: 0 1 auto;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d3dcea transparent;
}
.menu-cat-liste::-webkit-scrollbar { width: 5px; }
.menu-cat-liste::-webkit-scrollbar-thumb { background: #d3dcea; border-radius: 4px; }
.menu-cat-liste a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .8rem;
    border-bottom: 1px solid #f1f4f9;
    transition: background .15s ease;
}
.menu-cat-liste li:last-child a { border-bottom: none; }
.menu-cat-liste a:hover { background: #f6f8fd; }
.menu-cat-icone {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--couleur, var(--navy-clair));
    color: #fff;
    display: grid;
    place-items: center;
}
.menu-cat-icone svg { width: 16px; height: 16px; }
.menu-cat-nom {
    font-size: .88rem;
    font-weight: 600;
    color: #2a3652;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* « > » enfant direct du lien uniquement : sans le sélecteur enfant
   la règle retouchait aussi l'icône SVG rangée dans .menu-cat-icone,
   qui passait du blanc au gris et devenait illisible. */
.menu-cat-liste a > svg:last-child {
    width: 13px;
    height: 13px;
    margin-left: auto;
    flex: none;
    color: #9aa7c4;
    transition: transform .15s ease, color .15s ease;
}
.menu-cat-liste a:hover > svg:last-child { transform: translateX(2px); color: var(--or-texte); }

/* ---------- Menu horizontal des catégories (style en-tête) ----------
   Bandeau navy arrondi sous le héros : pastille dorée « Toutes les
   catégories » + pilules de catégorie défilables horizontalement.
   Le fond suit la couleur d'en-tête choisie dans admin → Apparence
   (--entete-fond). */
.menu-horizontal {
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    background: var(--entete-fond, var(--navy));
    border: none;
    border-radius: 16px;
    padding: .5rem .55rem;
    margin-bottom: 1.4rem;
    box-shadow: 0 10px 24px rgba(13, 27, 63, .22);
}
.menu-horizontal .menu-cat-entete {
    flex: none;
    border-radius: 999px;
    padding: .55rem 1rem;
    box-shadow: none;
}
.menu-horizontal .menu-cat-entete svg:last-child { display: none; }
.menu-horizontal .menu-cat-liste {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 2px;
}
.menu-horizontal .menu-cat-liste::-webkit-scrollbar { display: none; }
.menu-horizontal .menu-cat-liste::-webkit-scrollbar-thumb { background: none; }
.menu-horizontal .menu-cat-liste li { flex: none; }
.menu-horizontal .menu-cat-liste a {
    border-bottom: none;
    border-radius: 999px;
    padding: .4rem .8rem .4rem .45rem;
    box-shadow: none;
    transition: background .15s ease, filter .15s ease;
}
.menu-horizontal .menu-cat-liste a:hover {
    background: var(--entete-fond, var(--navy));
    filter: brightness(1.25);
}
.menu-horizontal .menu-cat-icone { width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .28); }
.menu-horizontal .menu-cat-icone svg { width: 13px; height: 13px; }
.menu-horizontal .menu-cat-nom { color: #fff; font-size: .84rem; }
.menu-horizontal .menu-cat-liste a:hover .menu-cat-nom { color: #fff; }
/* Placement sous la ligne héros / impact (styles non pleine largeur) :
   on respire un peu avant le bandeau */
.accueil-colonne .menu-horizontal { margin-top: 1.3rem; }

/* ---------- Rail latéral : bannières sous les catégories ---------- */
/* « Nouveautés » : les derniers produits ajoutés, en vignettes */
.menu-nouveautes {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem .8rem .3rem;
    border-top: 1px solid #f1f4f9;
}
.menu-nouveautes-titre {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8d9ab8;
}
.menu-nouveautes-titre svg { width: 12px; height: 12px; color: var(--or-texte); }
.menu-nouveaute {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 12px;
    padding: .4rem .55rem .4rem .4rem;
    box-shadow: 0 1px 3px rgba(13, 27, 63, .06);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.menu-nouveaute img {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    object-fit: cover;
    background: #eef2f9;
    flex: none;
}
.nouveaute-texte { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.nouveaute-texte strong {
    font-size: .8rem;
    font-weight: 600;
    color: #2a3652;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nouveaute-texte small { font-size: .72rem; color: #8d9ab8; }
.menu-nouveaute > svg {
    width: 12px;
    height: 12px;
    margin-left: auto;
    flex: none;
    color: #9aa7c4;
    transition: transform .15s ease, color .15s ease;
}
.menu-nouveaute:hover {
    border-color: rgba(242, 167, 27, .55);
    box-shadow: 0 3px 10px rgba(13, 27, 63, .09);
    transform: translateY(-1px);
}
.menu-nouveaute:hover > svg { transform: translateX(2px); color: var(--or-texte); }

/* Grande bannière « Sur commande » : absorbe l'espace restant du rail
   pour qu'aucun blanc ne subsiste sous les catégories */
.menu-promo {
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .35rem;
    min-height: 118px;
    margin: .55rem .8rem .85rem;
    padding: .95rem .95rem 1rem;
    border-radius: 14px;
    background: linear-gradient(150deg, #24479c 0%, #16295c 55%, #0d1b3f 100%);
    color: #fff;
    box-shadow: var(--ombre);
}
.menu-promo::before {
    content: '';
    position: absolute;
    top: -34px;
    right: -34px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 14px solid rgba(242, 167, 27, .18);
}
.menu-promo::after {
    content: '';
    position: absolute;
    bottom: -46px;
    right: 26px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}
.menu-promo-badge {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 999px;
    background: rgba(242, 167, 27, .16);
    border: 1px solid rgba(242, 167, 27, .45);
    color: #f8c95c;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.menu-promo strong { font-size: .95rem; line-height: 1.3; position: relative; }
.menu-promo small { font-size: .74rem; line-height: 1.4; color: #b9c6e2; position: relative; }
.menu-promo-fleche {
    margin-top: .55rem;
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--or);
    color: var(--navy);
    transition: transform .15s ease;
}
.menu-promo-fleche svg { width: 14px; height: 14px; }
.menu-promo:hover .menu-promo-fleche { transform: translateX(3px); }

/* ---------- Rail latéral : carte « Des produits de qualité » ---------- */
.carte-qualite {
    background: linear-gradient(160deg, #16295c, #0d1b3f);
    border-radius: 16px;
    padding: 1.15rem 1.05rem 1.25rem;
    color: #fff;
    box-shadow: var(--ombre);
}
.qualite-icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--or);
    color: var(--navy);
    margin-bottom: .7rem;
}
.qualite-icone svg { width: 22px; height: 22px; }
.carte-qualite h2 { font-size: 1.08rem; line-height: 1.25; margin-bottom: .35rem; }
.carte-qualite p { font-size: .82rem; color: #b9c6e2; margin-bottom: .9rem; }
.bouton-voir {
    border-radius: 999px;
    padding: .45rem .95rem;
    font-size: .86rem;
}
.bouton-voir svg { width: 15px; height: 15px; }

/* ---------- Héros bleu marine ---------- */
.hero-accueil {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 350px;
    padding: 1.7rem 1.8rem;
    border-radius: 20px;
    background: linear-gradient(115deg, #0c1a3d 0%, #122550 45%, #1d3f8f 100%);
    box-shadow: var(--ombre);
}
.hero-fond { position: absolute; inset: 0; }
.hero-fond .hero-diapos { position: absolute; inset: 0; }
.hero-fond .hero-diapo { position: absolute; inset: 0; }
.hero-fond .hero-diapo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 85% center;
}
/* Voile dégradé : couleur pleine à gauche (lisibilité du texte),
   transparent à droite (les produits restent visibles).
   --hero-voile : couleur personnalisée de la bannière active
   (admin → Bannières) ; absente, le bleu nuit du thème s'applique. */
.hero-fond::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(13, 27, 63, .4), transparent 32%),
        linear-gradient(90deg, var(--hero-voile, #0d1b3f) 0%, var(--hero-voile, #0d1b3f) 32%, rgba(13, 27, 63, .84) 48%, rgba(13, 27, 63, .28) 66%, rgba(13, 27, 63, .06) 82%, rgba(13, 27, 63, .32) 100%);
}
/* Navigateurs récents : toutes les transparences du voile suivent
   la couleur choisie (et plus seulement la partie opaque de gauche) */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
    .hero-fond::after {
        background:
            linear-gradient(0deg, color-mix(in srgb, var(--hero-voile, #0d1b3f) 40%, transparent), transparent 32%),
            linear-gradient(90deg, var(--hero-voile, #0d1b3f) 0%, var(--hero-voile, #0d1b3f) 32%,
                color-mix(in srgb, var(--hero-voile, #0d1b3f) 84%, transparent) 48%,
                color-mix(in srgb, var(--hero-voile, #0d1b3f) 28%, transparent) 66%,
                color-mix(in srgb, var(--hero-voile, #0d1b3f) 6%, transparent) 82%,
                color-mix(in srgb, var(--hero-voile, #0d1b3f) 32%, transparent) 100%);
    }
}

/* ---------- Styles de la bannière héros (admin → Apparence) ---------- */

/* Pleine largeur : la section est rendue hors du conteneur par le code
   (index.php). Mêmes dimensions verticales que le thème classique :
   le texte reste aligné sur la grille de la page. */
.theme-hero-plein {
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 1.4rem;
    padding-inline: max(1.8rem, calc((100% - 1320px) / 2 + 1.8rem));
}
/* Sans le héros à ses côtés, la carte « impact » devient une bande
   fine de confiance : 4 tuiles en ligne, sans le grand graphique
   (site de vente : les statistiques ne doivent pas dominer l'accueil) */
.accueil-haut-sans-hero { grid-template-columns: minmax(0, 1fr); }
.accueil-haut-sans-hero .impact-bas { display: none; }
@media (min-width: 900px) {
    .accueil-haut-sans-hero .impact-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Texte centré : voile uniforme, contenu au milieu de l'image */
.theme-hero-centre .hero-contenu {
    max-width: none;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.theme-hero-centre .hero-fond::after {
    background: linear-gradient(0deg, rgba(13, 27, 63, .6), rgba(13, 27, 63, .6));
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
    .theme-hero-centre .hero-fond::after {
        background: linear-gradient(0deg,
            color-mix(in srgb, var(--hero-voile, #0d1b3f) 60%, transparent),
            color-mix(in srgb, var(--hero-voile, #0d1b3f) 60%, transparent));
    }
}

/* Carte flottante : l'image reste bien visible, le texte est posé
   dans une carte translucide floue (effet verre) */
.theme-hero-carte .hero-contenu {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 18px;
    padding: 1.6rem 1.8rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px rgba(13, 27, 63, .28);
}
.theme-hero-carte .hero-fond::after {
    background: linear-gradient(0deg, rgba(13, 27, 63, .22), rgba(13, 27, 63, .22));
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
    .theme-hero-carte .hero-fond::after {
        background: linear-gradient(0deg,
            color-mix(in srgb, var(--hero-voile, #0d1b3f) 22%, transparent),
            color-mix(in srgb, var(--hero-voile, #0d1b3f) 22%, transparent));
    }
}
/* Sans bannière gérée en admin : collage des derniers produits */
.hero-collage { position: absolute; inset: 0; }
.hero-collage img {
    position: absolute;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, .16);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.hero-collage img:first-child { width: 42%; right: 6%; top: 50%; transform: translateY(-50%) rotate(2deg); }
.hero-collage img:last-child  { width: 30%; right: 41%; bottom: 9%; transform: rotate(-4deg); }

/* Décorations : grille de points + lueur dorée */
.hero-points-decor {
    position: absolute;
    top: 26px;
    right: 30px;
    width: 130px;
    height: 64px;
    background-image: radial-gradient(rgba(255, 255, 255, .38) 1.5px, transparent 1.6px);
    background-size: 15px 15px;
    z-index: 1;
}
.hero-lueur {
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 167, 27, .38), transparent 65%);
    z-index: 1;
    pointer-events: none;
}

.hero-contenu { position: relative; z-index: 2; max-width: 62%; }
.hero-marque {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .8rem;
}
.hero-marque svg { width: 24px; height: 24px; flex: none; }
.hero-marque-nom {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: .5px;
    color: #fff;
}
.hero-marque-nom em {
    font-family: "Caveat", "Segoe Script", "Brush Script MT", cursive;
    font-style: normal;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--or);
}
.hero-accueil h1 {
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.01em;
    color: #fff;
}
.hero-accueil h1 em { font-style: normal; color: var(--or); }

.hero-atouts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .8rem;
    margin: 1rem 0 1.25rem;
    padding: 0;
}
.hero-atouts li { display: flex; align-items: center; gap: .55rem; }
.atout-pastille {
    flex: none;
    width: 32px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    display: grid;
    place-items: center;
}
.atout-pastille svg { width: 15px; height: 15px; }
.atout-texte strong { display: block; font-size: .82rem; font-weight: 600; color: #fff; line-height: 1.3; }
.atout-texte small  { display: block; font-size: .72rem; color: #b9c6e2; line-height: 1.25; }

.hero-bouton {
    border-radius: 999px;
    padding: .6rem 1.25rem;
    font-size: .95rem;
    box-shadow: 0 6px 18px rgba(242, 167, 27, .35);
}
.hero-bouton svg { width: 17px; height: 17px; transition: transform .15s ease; }
.hero-bouton:hover svg { transform: translateX(3px); }

/* Flèches du diaporama : sur la moitié visuelle (droite) du héros */
.hero-accueil .hero-fleche {
    z-index: 3;
    width: 36px;
    height: 36px;
    background: rgba(13, 27, 63, .55);
}
.hero-accueil .hero-fleche svg { width: 18px; height: 18px; }
.hero-accueil .hero-fleche-precedent { left: auto; right: 42%; }
.hero-accueil .hero-fleche-suivant { right: 14px; }
.hero-accueil .hero-points { z-index: 3; }

/* ---------- Carte « Notre impact en chiffres » ---------- */
.carte-impact {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 18px;
    box-shadow: var(--ombre);
    padding: 1.05rem 1rem;
    display: flex;
    flex-direction: column;
}
.carte-impact h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: .75rem;
}
.impact-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}
.impact-tuile {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--tuile, #eef2f9);
    border-radius: 12px;
    padding: .55rem .6rem;
    min-width: 0;
}
.impact-icone {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--encre, var(--navy-clair));
    display: grid;
    place-items: center;
    box-shadow: 0 1px 4px rgba(13, 27, 63, .12);
}
.impact-icone svg { width: 16px; height: 16px; }
.impact-valeurs { min-width: 0; }
.impact-valeurs strong {
    display: block;
    font-size: .95rem;
    color: var(--navy);
    line-height: 1.15;
    white-space: nowrap;
}
.impact-valeurs small { display: block; font-size: .68rem; color: var(--texte-gris); line-height: 1.25; }

.impact-bas {
    margin-top: auto;
    padding-top: .8rem;
    display: flex;
    align-items: flex-end;
    gap: .4rem;
}
.impact-courbe { flex: 1; min-width: 0; height: auto; }
.impact-note {
    flex: none;
    font-family: "Caveat", "Segoe Script", "Brush Script MT", cursive;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1;
    color: var(--navy);
    text-align: center;
    transform: rotate(-4deg);
}
.impact-note svg { display: block; width: 92px; margin: 3px auto 0; }

/* ---------- Badges des cartes catégories ---------- */
.badge-carte {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    box-shadow: 0 2px 6px rgba(13, 27, 63, .28);
}
.badge-top-vente { background: linear-gradient(135deg, #fb923c, #ea580c); }
.badge-nouveau   { background: #2563eb; }

/* Grille des catégories sous le héros : pieds de carte compactés
   pour que les noms longs (« porte attestation ») restent lisibles */
.accueil-colonne .grille-categories { margin-top: 1.4rem; }
.accueil-colonne .carte-pied { gap: .55rem; padding: .15rem .8rem .8rem; margin-top: auto; }
.accueil-colonne .carte-texte h2 { white-space: normal; min-height: 2.35em; }
.accueil-colonne .carte-icone { width: 40px; height: 40px; }
.accueil-colonne .carte-icone svg { width: 18px; height: 18px; }
.accueil-colonne .carte-texte h2 { font-size: .95rem; }
.accueil-colonne .carte-fleche { width: 30px; height: 30px; }
.accueil-colonne .carte-fleche svg { width: 14px; height: 14px; }

/* ---------- Bannière « Boostez votre visibilité » ---------- */
.section-boost { margin-top: 1.7rem; }
.banniere-boost {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) auto;
    align-items: center;
    gap: 1.2rem;
    background: linear-gradient(110deg, #0c1a3d 0%, #16295c 55%, #1d3f8f 100%);
    border-radius: 22px;
    padding: 1.5rem 1.6rem;
    color: #fff;
    box-shadow: var(--ombre);
}
.banniere-boost::before {
    content: "";
    position: absolute;
    right: 26%;
    top: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 167, 27, .22), transparent 65%);
    pointer-events: none;
}
.boost-intro {
    display: flex;
    align-items: center;
    gap: .95rem;
    flex-wrap: wrap;
    position: relative;
}
.boost-icone {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(242, 167, 27, .15);
    border: 1.5px solid rgba(242, 167, 27, .5);
    color: var(--or);
    display: grid;
    place-items: center;
}
.boost-icone svg { width: 26px; height: 26px; }
.boost-titres h2 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.boost-titres p  { font-size: .85rem; color: #b9c6e2; }
.boost-intro .bouton {
    border-radius: 999px;
    font-size: .88rem;
    padding: .5rem 1rem;
    margin-left: auto;
}
.boost-intro .bouton svg { width: 15px; height: 15px; }

.boost-visuel {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    min-height: 110px;
}
.boost-produit {
    width: 118px;
    height: 96px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, .25);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .3);
    transform: rotate(-3deg);
}
.boost-graphique { width: 132px; height: 86px; margin-left: -.6rem; }

.boost-atouts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
    position: relative;
}
.boost-atouts li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    font-weight: 600;
    color: #e7edf8;
    white-space: nowrap;
}
.boost-atouts li span {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    display: grid;
    place-items: center;
}
.boost-atouts li span svg { width: 15px; height: 15px; }

/* ---------- Responsive de la maquette d'accueil ---------- */
@media (max-width: 1240px) {
    .accueil-layout { grid-template-columns: 1fr; }
    .rail-accueil { display: none; }
}
@media (max-width: 1150px) {
    .accueil-haut { grid-template-columns: 1fr; }
    .impact-grille { grid-template-columns: repeat(4, 1fr); }
    .impact-bas { display: none; }
}
@media (max-width: 900px) {
    .hero-contenu { max-width: 100%; }
    .hero-collage img { opacity: .45; }
    .hero-fond .hero-diapo img { object-position: center; }
    .hero-fond::after {
        background: linear-gradient(90deg, rgba(13, 27, 63, .93), rgba(13, 27, 63, .78));
    }
    .hero-points-decor, .hero-lueur { display: none; }
    .hero-accueil .hero-fleche-precedent { left: 14px; right: auto; }
    .banniere-boost { grid-template-columns: 1fr; }
    .boost-visuel { display: none; }
    .boost-atouts { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   THÈMES DES CARTES « CATÉGORIES » (choisis dans
   admin/apparence.php, classe .theme-{clé} sur la grille).
   Le thème par défaut « vague » est le style de base défini
   plus haut : aucune règle supplémentaire.
   ============================================================ */

/* ---------- Thème « superposition » : image plein cadre ---------- */
.theme-superposition .carte-categorie {
    position: relative;
    aspect-ratio: 5 / 5.6;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(13, 27, 63, .16);
}
.theme-superposition .carte-image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    background: #16295c;
}
.theme-superposition .carte-image img {
    object-fit: cover;
    padding: 0;
    transition: transform .35s ease;
}
.theme-superposition .carte-categorie:hover .carte-image img { transform: scale(1.05); }
.theme-superposition .carte-pied {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    padding: 2rem .95rem .9rem;
    background: linear-gradient(180deg,
        rgba(13, 27, 63, 0) 0%,
        rgba(13, 27, 63, .62) 38%,
        rgba(13, 27, 63, .94) 100%);
}
.theme-superposition .carte-vague { display: none; }
.theme-superposition .carte-icone {
    width: 38px;
    height: 38px;
    background: var(--couleur, var(--navy-clair));
    border: 1px solid rgba(255, 255, 255, .35);
}
.theme-superposition .carte-icone svg { width: 19px; height: 19px; }
.theme-superposition .carte-texte h2 { font-size: .98rem; }
.theme-superposition .carte-texte p { font-size: .8rem; color: rgba(255, 255, 255, .75); }
.theme-superposition .carte-fleche {
    width: 32px;
    height: 32px;
    background: var(--or);
    color: var(--navy);
}
.theme-superposition .carte-categorie:hover .carte-fleche {    background: #f8c95c;
    transform: translateX(3px);
}

/* ---------- Thème « minimal » : carte blanche, filet de couleur ---------- */
.theme-minimal .carte-categorie {
    border: 1px solid #e8ecf4;
    box-shadow: 0 4px 14px rgba(13, 27, 63, .06);
}
.theme-minimal .carte-categorie::before {
    content: '';
    flex: none;
    height: 5px;
    background: var(--couleur, var(--navy-clair));
}
.theme-minimal .carte-image {
    background: #f8fafd;
    border-bottom: 1px solid #eef1f7;
}
.theme-minimal .carte-image img { padding: 1rem; }
.theme-minimal .carte-pied {
    background: #fff;
    color: #1e2a47;
    padding: .85rem .95rem 1rem;
}
.theme-minimal .carte-vague { display: none; }
.theme-minimal .carte-icone {
    width: 40px;
    height: 40px;
    background: #fff;
    background: color-mix(in srgb, var(--couleur, #1d3f8f) 14%, #ffffff);
    color: var(--couleur, #1d3f8f);
    border: 1px solid color-mix(in srgb, var(--couleur, #1d3f8f) 35%, #ffffff);
}
.theme-minimal .carte-icone svg { width: 20px; height: 20px; }
.theme-minimal .carte-texte h2 { color: #1e2a47; }
.theme-minimal .carte-texte p { color: #8d9ab8; }
.theme-minimal .carte-fleche {
    background: #f1f4f9;
    color: var(--couleur, #1d3f8f);
}
.theme-minimal .carte-categorie:hover .carte-fleche {
    background: var(--couleur, var(--navy-clair));
    color: #fff;
    transform: translateX(3px);
}

/* ---------- Thème « nuit » → « Doré 3D » : carte blanche en relief,
     image encadrée d'or, animations (apparition, brillance, survol) ---------- */
.theme-nuit .carte-categorie {
    position: relative;
    background: #fff;
    border: 1px solid #efe3c8;
    border-radius: 18px;
    padding: .8rem .8rem .45rem;
    gap: .6rem;
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    box-shadow:
        0 2px 6px rgba(13, 27, 63, .05),
        0 26px 42px -24px rgba(180, 138, 22, .45);
    animation: carte-nuit-apparition .55s ease backwards;
}
/* Entrée en scène décalée, carte par carte */
.theme-nuit .carte-categorie:nth-child(1)  { animation-delay: .02s; }
.theme-nuit .carte-categorie:nth-child(2)  { animation-delay: .07s; }
.theme-nuit .carte-categorie:nth-child(3)  { animation-delay: .12s; }
.theme-nuit .carte-categorie:nth-child(4)  { animation-delay: .17s; }
.theme-nuit .carte-categorie:nth-child(5)  { animation-delay: .22s; }
.theme-nuit .carte-categorie:nth-child(6)  { animation-delay: .27s; }
.theme-nuit .carte-categorie:nth-child(7)  { animation-delay: .32s; }
.theme-nuit .carte-categorie:nth-child(8)  { animation-delay: .37s; }
.theme-nuit .carte-categorie:nth-child(9)  { animation-delay: .42s; }
.theme-nuit .carte-categorie:nth-child(10) { animation-delay: .47s; }
.theme-nuit .carte-categorie:nth-child(n + 11) { animation-delay: .52s; }
@keyframes carte-nuit-apparition {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
/* Survol : bascule 3D + ombre portée dorée */
.theme-nuit .carte-categorie:hover {
    border-color: rgba(242, 167, 27, .55);
    transform: perspective(700px) rotateX(4.5deg) rotateY(-4.5deg) translateY(-5px);
    box-shadow:
        0 4px 10px rgba(13, 27, 63, .07),
        0 34px 54px -24px rgba(180, 138, 22, .55);
}
.theme-nuit .carte-image {
    border-radius: 12px;
    background: linear-gradient(150deg, #fdf6e7, #f7ecd2);
    box-shadow:
        inset 0 0 0 1px rgba(242, 167, 27, .35),
        0 12px 20px -12px rgba(180, 138, 22, .55);
    transition: box-shadow .35s ease;
    animation: carte-nuit-flottement 5.5s ease-in-out infinite;
}
@keyframes carte-nuit-flottement {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}
.theme-nuit .carte-image img {
    padding: .9rem;
    transition: transform .45s ease;
}
.theme-nuit .carte-categorie:hover .carte-image img { transform: scale(1.07); }
/* Reflet doré qui balaie l'image au survol */
.theme-nuit .carte-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255, 255, 255, .55) 48%,
        rgba(242, 167, 27, .18) 54%,
        transparent 66%);
    transform: translateX(-130%);
    transition: transform .8s ease;
    pointer-events: none;
}
.theme-nuit .carte-categorie:hover .carte-image::after { transform: translateX(130%); }
.theme-nuit .carte-pied {
    background: transparent;
    padding: 0 .35rem .45rem;
}
.theme-nuit .carte-vague { display: none; }
.theme-nuit .carte-icone {
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #f8c95c, #f2a71b);
    border: 1px solid rgba(242, 167, 27, .5);
    color: #fff;
    box-shadow: 0 6px 12px -6px rgba(242, 167, 27, .8);
    animation: carte-nuit-pulse 2.6s ease-in-out infinite;
}
@keyframes carte-nuit-pulse {
    0%, 100% { box-shadow: 0 6px 12px -6px rgba(242, 167, 27, .8), 0 0 0 0 rgba(242, 167, 27, .35); }
    55%      { box-shadow: 0 6px 12px -6px rgba(242, 167, 27, .8), 0 0 0 7px rgba(242, 167, 27, 0); }
}
.theme-nuit .carte-icone svg { width: 20px; height: 20px; }
.theme-nuit .carte-texte h2 { color: #1e2a47; }
.theme-nuit .carte-texte p { color: #a58a3f; }
.theme-nuit .carte-fleche {
    background: linear-gradient(145deg, #f8c95c, #f2a71b);
    color: #fff;
    box-shadow: 0 6px 12px -6px rgba(242, 167, 27, .8);
}
.theme-nuit .carte-categorie:hover .carte-fleche {
    transform: translateX(4px) scale(1.06);
}
/* Accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
    .theme-nuit .carte-categorie,
    .theme-nuit .carte-image,
    .theme-nuit .carte-icone { animation: none !important; transition: none !important; }
}

/* ============================================================
   HÉROS : texte personnalisé par bannière + animations
   (le texte de chaque diapositive entre en cascade, l'image
   active zoom lentement)
   ============================================================ */
.hero-sous-titre {
    font-size: 1.02rem;
    color: #d9e2f5;
    max-width: 30rem;
    margin: -.5rem 0 1.2rem;
}
.hero-contenu.hero-anime .hero-marque { animation: heros-entree .5s ease both; }
.hero-contenu.hero-anime h1           { animation: heros-entree .65s ease .08s both; }
.hero-contenu.hero-anime .hero-sous-titre { animation: heros-entree .65s ease .18s both; }
.hero-contenu.hero-anime .hero-atouts { animation: heros-entree .7s ease .24s both; }
.hero-contenu.hero-anime .hero-bouton { animation: heros-pop .55s ease .34s both; }
@keyframes heros-entree {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes heros-pop {
    0%   { opacity: 0; transform: scale(.86); }
    70%  { transform: scale(1.04); }
    100% { opacity: 1; transform: none; }
}
/* Zoom lent (effet Ken Burns) sur l'image de la diapositive active ;
   redémarre à chaque affichage car la classe .active est retirée
   puis remise par le diaporama */
.hero-fond .hero-diapo.active img { animation: heros-zoom 8s ease-out both; }
@keyframes heros-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-contenu.hero-anime .hero-marque,
    .hero-contenu.hero-anime h1,
    .hero-contenu.hero-anime .hero-sous-titre,
    .hero-contenu.hero-anime .hero-atouts,
    .hero-contenu.hero-anime .hero-bouton,
    .hero-fond .hero-diapo.active img { animation: none !important; }
}

/* ---------- Thème « pastel » version épurée : fond blanc unique,
     image sur fond neutre doux, texte centré, aucune couleur criarde ---------- */
.theme-pastel .carte-categorie {
    position: relative;
    border-radius: 20px;
    box-shadow: 0 6px 16px rgba(13, 27, 63, .07);
}
.theme-pastel .carte-image {
    margin: .7rem .7rem 0;
    border-radius: 14px;
    aspect-ratio: 1 / 1;
    background: #f4f6fa;
}
.theme-pastel .carte-image img { padding: 1.15rem; }
.theme-pastel .carte-pied {
    position: static;
    background: transparent;
    color: #1e2a47;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: .35rem;
    padding: .7rem .8rem 1.05rem;
}
.theme-pastel .carte-vague { display: none; }
.theme-pastel .carte-icone { display: none; }
.theme-pastel .carte-texte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}
.theme-pastel .carte-texte h2 { font-size: 1rem; color: #1e2a47; }
.theme-pastel .carte-texte p { color: #9aa5bf; }
.theme-pastel .carte-fleche {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    margin-left: 0;
    width: 30px;
    height: 30px;
    background: #f1f4f9;
    color: #1e2a47;
    box-shadow: none;
}
.theme-pastel .carte-categorie:hover .carte-fleche {
    background: #1e2a47;
    color: #fff;
    transform: none;
}

/* ============================================================
   ADMIN : PAGE « APPARENCE » (admin/apparence.php)
   Miniatures des thèmes + choix en cartes radio.
   ============================================================ */
.titre-section-carte { margin: 0 0 .5rem; font-size: 1.08rem; color: #16295c; }
.grille-themes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin: 1.1rem 0 .3rem;
}
.theme-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .7rem .7rem .8rem;
    border: 2px solid #e8ecf4;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.theme-option:hover { border-color: #c9d4ea; }
.theme-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.theme-option-texte { display: flex; flex-direction: column; gap: .2rem; }
.theme-option-texte strong {
    font-size: .92rem;
    color: #16295c;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.theme-option-texte small { font-size: .76rem; line-height: 1.35; color: #6d7c9c; }
.theme-actif-tag {
    flex: none;
    font-style: normal;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--or);
    color: #fff;
}
/* Sélection : liseré doré + coche sur la miniature */
.theme-option:has(input:checked) { border-color: var(--or); box-shadow: 0 6px 16px rgba(242, 167, 27, .18); }
.theme-option:has(input:checked) .apercu::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--or);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* ---------- Miniatures (fausses cartes en pur CSS) ---------- */
.apercu {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4.4;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8ecf4;
    box-shadow: 0 4px 12px rgba(13, 27, 63, .08);
}
.apercu-visuel {
    position: absolute;
    inset: 0 0 34% 0;
    background: #f0f3fa;
    display: grid;
    place-items: center;
}
.apercu-produit {
    width: 42%;
    height: 58%;
    border-radius: 6px;
    background: linear-gradient(140deg, #f2a71b, #b9760d);
    box-shadow: 0 3px 8px rgba(13, 27, 63, .18);
}
.apercu-bandeau {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    background: #1d3f8f;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
}
.apercu-puce { flex: none; width: 15px; height: 15px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.apercu-texte { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.apercu-ligne { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .75); }
.apercu-ligne-titre { width: 70%; }
.apercu-texte .apercu-ligne:not(.apercu-ligne-titre) { width: 45%; background: rgba(255, 255, 255, .45); }
.apercu-fleche { flex: none; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .35); }

/* Vague suggérée par un arrondi inversé */
.apercu-vague .apercu-bandeau { border-radius: 26px 26px 0 0 / 12px 12px 0 0; }

/* Superposition : image plein cadre + dégradé */
.apercu-superposition { border: none; }
.apercu-superposition .apercu-visuel { inset: 0; background: #e7edfa; }
.apercu-superposition .apercu-produit { width: 52%; height: 66%; }
.apercu-superposition .apercu-bandeau {
    height: 48%;
    background: linear-gradient(180deg, rgba(13, 27, 63, 0), rgba(13, 27, 63, .92));
}
.apercu-superposition .apercu-fleche { background: var(--or); }

/* Minimaliste : carte blanche, filet haut */
.apercu-minimal .apercu-visuel {
    inset: 5px 5px 34% 5px;
    border-radius: 7px 7px 0 0;
    background: #f8fafd;
}
.apercu-minimal .apercu-bandeau { background: #fff; border-top: 3px solid #1d3f8f; }
.apercu-minimal .apercu-ligne { background: #2a3652; }
.apercu-minimal .apercu-texte .apercu-ligne:not(.apercu-ligne-titre) { background: #c3cddd; }
.apercu-minimal .apercu-puce,
.apercu-minimal .apercu-fleche { background: #f1f4f9; }

/* Doré 3D : carte blanche, image encadrée d'or */
.apercu-nuit {
    background: #fff;
    border: 1px solid #efe3c8;
    box-shadow:
        0 2px 5px rgba(13, 27, 63, .05),
        0 10px 16px -8px rgba(180, 138, 22, .45);
}
.apercu-nuit .apercu-visuel {
    inset: 5px 5px 34% 5px;
    border-radius: 6px;
    background: linear-gradient(150deg, #fdf6e7, #f7ecd2);
    border: 1px solid rgba(242, 167, 27, .45);
}
.apercu-nuit .apercu-bandeau { background: transparent; }
.apercu-nuit .apercu-ligne { background: #1e2a47; }
.apercu-nuit .apercu-texte .apercu-ligne:not(.apercu-ligne-titre) { background: #d5dbe8; }
.apercu-nuit .apercu-puce { background: linear-gradient(145deg, #f8c95c, #f2a71b); }
.apercu-nuit .apercu-fleche { background: var(--or); }

/* Pastel épuré : tout neutre, centré */
.apercu-pastel .apercu-visuel {
    inset: 5px 5px 36% 5px;
    border-radius: 8px;
    background: #f4f6fa;
}
.apercu-pastel .apercu-bandeau { background: transparent; justify-content: center; }
.apercu-pastel .apercu-texte { align-items: center; }
.apercu-pastel .apercu-ligne { background: #2a3652; }
.apercu-pastel .apercu-texte .apercu-ligne:not(.apercu-ligne-titre) { background: #d5dbe8; }
.apercu-pastel .apercu-puce { display: none; }
.apercu-pastel .apercu-fleche { position: absolute; top: 5px; right: 5px; background: #f1f4f9; }
@media (max-width: 620px) {
    .impact-grille { grid-template-columns: 1fr 1fr; }
    .hero-accueil { padding: 1.3rem 1.2rem; min-height: 300px; }
    .hero-atouts { gap: .5rem .9rem; }
    .boost-intro .bouton { margin-left: 0; }
}

/* ---------- Aperçus du choix du style du héros (admin → Apparence) ---------- */
.apercu-hero {
    display: block;
    height: 86px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(13, 27, 63, .55) 0%, rgba(13, 27, 63, .25) 45%, rgba(13, 27, 63, .05) 75%),
        linear-gradient(115deg, #223a6e 0%, #3c5a9e 55%, #6a86c4 100%);
}
.apercu-hero-scene { position: absolute; inset: 0; display: flex; align-items: center; }
.apercu-hero-texte { display: block; width: 46%; margin-left: 12%; }
.apercu-hero-texte i {
    display: block; height: 7px; border-radius: 4px;
    background: rgba(255, 255, 255, .88); margin-bottom: 6px;
}
.apercu-hero-texte i:last-child { width: 62%; background: rgba(255, 255, 255, .45); }
.apercu-hero--classique { padding: 10px; background: #fff; border: 1px solid #e8ecf4; }
.apercu-hero--classique .apercu-hero-scene { border-radius: 8px; }
.apercu-hero--plein { border-radius: 0; }
.apercu-hero--centre .apercu-hero-scene { justify-content: center; }
.apercu-hero--centre .apercu-hero-texte { margin: 0; text-align: center; }
.apercu-hero--centre .apercu-hero-texte i { margin-inline: auto; }
.apercu-hero--centre .apercu-hero-texte i:last-child { margin-inline: auto; }
.apercu-hero--carte .apercu-hero-texte {
    margin-left: 8%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 8px;
    padding: 10px 12px;
    backdrop-filter: blur(3px);
}

/* ============================================================
   CHARTE GRAPHIQUE « YOOREED EVENT » (admin → Apparence)
   Magenta / noir / blanc. La classe body.theme-event remappe
   les variables de couleur, puis retouche précisément les
   composants à couleurs figées (en-tête blanc, héros noir,
   cartes catégories, tuiles impact, pied de page...).
   ============================================================ */
body.theme-event {
    --navy: #101014;        /* titres, pied de page → noir */
    --navy-clair: #c0269f;  /* accents secondaires → magenta */
    --or: #c0269f;          /* accent principal → magenta */
    --or-fonce: #9c1b81;
    --or-texte: #c0269f;    /* prix, astérisques → magenta sur blanc */
    --violet: #c0269f;      /* mots accentués des titres → magenta */
    --creme: #fdf2f9;
}

/* --- En-tête blanc, liens sombres, accents magenta --- */
body.theme-event .entete-site {
    background: #ffffff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}
body.theme-event .logo-texte { color: #111; border-left-color: rgba(0, 0, 0, .18); }
body.theme-event .logo-texte em { color: #c0269f; }
body.theme-event .logo-icone path:nth-of-type(1) { fill: #c0269f; }
body.theme-event .logo-icone path:nth-of-type(2) { stroke: #111; }
body.theme-event .logo-icone path:nth-of-type(3) { fill: #111; }
body.theme-event .logo-icone path:nth-of-type(4) { stroke: #111; }
body.theme-event .nav-principale a { color: #333; }
body.theme-event .nav-principale a:hover,
body.theme-event .nav-principale a.actif { color: #c0269f; }
body.theme-event .nav-principale a.actif::after { background: #c0269f; }
body.theme-event .recherche { background: #f3f4f6; }
body.theme-event .recherche input { color: #111; }
body.theme-event .recherche input::placeholder { color: #9ca3af; }
body.theme-event .recherche button { color: #fff; }
body.theme-event .badge-panier { color: #fff; }
body.theme-event .lien-panier,
body.theme-event .lien-compte { color: #333; }
body.theme-event .lien-compte:hover,
body.theme-event .lien-compte.actif { color: #fff; }
body.theme-event .bouton-menu span { background: #111; }

/* --- Boutons : magenta à texte blanc --- */
body.theme-event .bouton { color: #fff; }
body.theme-event .bouton:hover { filter: brightness(1.08); }

/* --- Héros : fond noir, marque et lueur magenta --- */
body.theme-event .hero-accueil {
    background: linear-gradient(115deg, #050505 0%, #161616 55%, #43113c 100%);
    --hero-voile: #141414;
}
body.theme-event .hero-marque svg path:nth-of-type(1) { fill: #c0269f; }
body.theme-event .hero-marque svg path:nth-of-type(2) { stroke: #c0269f; }
body.theme-event .hero-marque svg path:nth-of-type(3) { fill: #c0269f; }
body.theme-event .hero-marque-nom em { color: #c0269f; }
body.theme-event .hero-lueur {
    background: radial-gradient(circle, rgba(192, 38, 159, .42), transparent 65%);
}

/* --- Menu horizontal : bandeau noir, pastille magenta --- */
body.theme-event .menu-horizontal { background: #0b0b0b; }
body.theme-event .menu-cat-entete { color: #fff; }

/* --- Cartes catégories (superposition) : voile noir → magenta --- */
body.theme-event .theme-superposition .carte-image { background: #141414; }
body.theme-event .theme-superposition .carte-pied {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .55) 38%,
        rgba(192, 38, 159, .94) 100%);
}
body.theme-event .theme-superposition .carte-fleche { color: #fff; }

/* --- Carte impact : tuiles roses, icônes magenta --- */
body.theme-event .impact-tuile { --tuile: #fde7f5 !important; --encre: #c0269f !important; }

/* --- Bannière « Boostez votre visibilité » : noir → magenta --- */
body.theme-event .banniere-boost {
    background: linear-gradient(110deg, #050505 0%, #1d1d1d 55%, #43113c 100%);
}

/* --- Pied de page noir + logo YOOREED Event --- */
body.theme-event .pied-site { background: #000; }

/* --- Pages connexion / inscription : charte Yooreed Event --- */
body.theme-event.page-auth {
    background:
        radial-gradient(820px 520px at 8% -10%, rgba(192, 38, 159, .10), transparent 60%),
        radial-gradient(720px 520px at 95% 0%, rgba(192, 38, 159, .07), transparent 60%),
        linear-gradient(to bottom, #fdf2f9 0%, #faf5fb 42%, #ffffff 100%);
}
body.theme-event .auth-brand {
    /* Panneau marque : noir profond + lueurs magenta, comme le logo */
    background:
        radial-gradient(420px 320px at 15% 10%, rgba(192, 38, 159, .30), transparent 60%),
        radial-gradient(520px 420px at 95% 95%, rgba(192, 38, 159, .16), transparent 65%),
        linear-gradient(165deg, #101014 0%, #17171d 55%, #2a1024 100%);
}
body.theme-event .auth-brand::before {
    background: rgba(192, 38, 159, .16);
    border-color: rgba(192, 38, 159, .28);
}
body.theme-event .auth-brand-logo svg path:nth-of-type(1) { fill: #c0269f; }
body.theme-event .auth-brand-logo svg path:nth-of-type(2) { stroke: #fff; }
body.theme-event .auth-brand-logo svg path:nth-of-type(3) { fill: #fff; }
body.theme-event .auth-brand-logo em,
body.theme-event .auth-brand h2 em { color: #e055b8; }
body.theme-event .auth-brand-desc { color: #d9c6de; }
body.theme-event .auth-features-icon { color: #e055b8; }
body.theme-event .auth-features li span { color: #b5a1bd; }
body.theme-event .auth-brand-quote blockquote { color: #ecdfee; }
body.theme-event .auth-brand-quote cite { color: #b39ab8; }
body.theme-event .auth-quote-avatar {
    background: linear-gradient(135deg, #c0269f, #e879c9);
    color: #fff;
}
body.theme-event .auth-eyebrow {
    color: #9c1b81;
    background: #fdf2f9;
    border-color: #f5c0e3;
}
body.theme-event .auth-checkbox input { accent-color: #c0269f; }
body.theme-event .auth-champ input:focus { box-shadow: 0 0 0 4px rgba(192, 38, 159, .15); }
body.theme-event .auth-submit {
    background: linear-gradient(135deg, #c0269f 0%, #9c1b81 100%);
    box-shadow: 0 6px 18px rgba(192, 38, 159, .25);
}
body.theme-event .auth-submit:hover { box-shadow: 0 10px 24px rgba(192, 38, 159, .32); }
body.theme-event .auth-alt a { border-bottom-color: rgba(192, 38, 159, .35); }
body.theme-event .otp-infos {
    background: rgba(192, 38, 159, .07);
    border-color: rgba(192, 38, 159, .30);
    color: #8a2472;
}
body.theme-event .otp-lien:hover { background: #fdf5fa; }

/* ---------- Aperçus du choix de charte graphique (admin) ---------- */
.apercu-charte {
    display: block;
    height: 86px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid #e8ecf4;
}
.apercu-charte .ac-band { display: block; height: 22px; }
.apercu-charte .ac-lignes {
    position: absolute; left: 12px; bottom: 30px;
    display: flex; flex-direction: column; gap: 5px;
}
.apercu-charte .ac-lignes i {
    display: block; width: 74px; height: 7px;
    border-radius: 4px; background: rgba(255, 255, 255, .9);
}
.apercu-charte .ac-lignes i:last-child { width: 52px; opacity: .6; }
.apercu-charte .ac-bout {
    position: absolute; left: 12px; bottom: 10px;
    width: 46px; height: 13px; border-radius: 999px;
}
.apercu-charte-classique {
    background: linear-gradient(115deg, #0c1a3d 0%, #122550 55%, #1d3f8f 100%);
    border: none;
}
.apercu-charte-classique .ac-band { background: #0d1b3f; }
.apercu-charte-classique .ac-bout { background: #f2a71b; }
.apercu-charte-event {
    background: linear-gradient(115deg, #050505 0%, #161616 55%, #43113c 100%);
    border: none;
}
.apercu-charte-event .ac-band { background: #fff; }
.apercu-charte-event .ac-bout { background: #c0269f; }