/* ==========================================================================
   CLOWN.FR — Design System Maison & Socle CSS Responsive
   Sans Bootstrap ni jQuery — 100% CSS standardisé, Grid, Flexbox et Variables
   ========================================================================== */

:root {
    /* Couleurs de marque Clown Montmartre */
    --clown-orange: #FF9127;
    --clown-orange-fonce: #FD6044;
    --clown-orange-clair: #FFA94D;
    --clown-orange-degrade: linear-gradient(to right, #FD9644, #FD6044);
    --clown-orange-degrade-h: linear-gradient(to right, #FD8C44 0%, #FD9644 100%);
    
    --clown-rose: #FF3D97;
    --clown-rose-fonce: #F4346C;
    --clown-rose-vif: #FF0999;
    --clown-rose-texte: #ae1955;
    --clown-rose-degrade: linear-gradient(to bottom, #FF3D97, #F4346C);
    /* Orange assombri pour du texte sur fond blanc (--clown-orange est trop clair : contraste ~2,25:1,
       sous le minimum AA de 4,5:1). #b45309 passait le contraste mais restait trop proche en luminosité de
       --clown-rose-texte pour bien se distinguer à côté (retour utilisateur) : remplacé par cette teinte plus
       vive, déjà utilisée ailleurs sur le site (survol des cartes produit, pastilles). */
    --clown-orange-texte: #c2410c;
    
    --clown-jaune: #FEE690;
    --clown-turquoise: #15A5BF;
    --clown-violet: #7B28DD;
    
    /* Neutres & Surfaces */
    --clown-fond: #fffaf6;
    --clown-surface: #ffffff;
    --clown-surface-alt: #f1f5f9;
    --clown-texte: #302832;
    --clown-texte-sombre: #271e28;
    --clown-texte-leger: #64748b;
    --clown-bordure: #e2e8f0;
    --clown-bordure-foncee: #cbd5e1;
    
    /* États */
    --clown-succes: #187348;
    --clown-danger: #b42332;
    --clown-rouge: var(--clown-danger);
    --clown-alerte: #f59e0b;
    --clown-info: #0284c7;
    
    /* Rayons */
    --clown-radius-sm: 6px;
    --clown-radius-md: 10px;
    --clown-radius-lg: 16px;
    --clown-radius-xl: 24px;
    --clown-radius-pilule: 9999px;
    
    /* Ombres */
    --clown-ombre-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --clown-ombre-md: 0 4px 14px rgba(15, 23, 42, 0.08);
    --clown-ombre-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
    --clown-ombre-hover: 0 10px 24px rgba(255, 145, 39, 0.22);
    
    /* Transitions */
    --clown-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Variables de compatibilité Bootstrap */
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
}

/* --------------------------------------------------------------------------
   1. Reset moderne & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--clown-texte);
    /* Fond jaune du site actuel (background.png), conserve pour l'identite de la marque ; le contenu
       est pose sur des cartes blanches pour rester clair et lisible. */
    /* Couleur du bas de l'image (mesurée : #fed57f) : là où l'image s'arrête (page longue, capture pleine page, mobile),
       le fond continue sans cassure nette. Avant #ffe58a, plus pâle : bande visible en milieu de page (05/10/2026). */
    background-color: #fed57f;
    background-image: url("../img/background.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.st-btn img,
.reassurance-img {
    display: inline-block !important;
    vertical-align: middle !important;
    height: 22px !important;
    max-height: 22px !important;
    width: auto !important;
    object-fit: contain !important;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--clown-transition);
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

ul, ol {
    list-style: none;
}

/* --------------------------------------------------------------------------
   2. Grille & Flexbox (Compatibilité Bootstrap + Utilitaires modernes)
   -------------------------------------------------------------------------- */
.container, .clown-container {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container-fluid, .clown-container-fluid {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.row, .clown-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
}

.row > *, .clown-row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
}

/* Colonnes mobiles par défaut */
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Écrans sm (>= 576px) */
@media (min-width: 576px) {
    .col-sm { flex: 1 0 0%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-sm-3 { flex: 0 0 auto; width: 25%; }
    .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
    .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-sm-9 { flex: 0 0 auto; width: 75%; }
    .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

/* Écrans md (>= 768px) */
@media (min-width: 768px) {
    .col-md { flex: 1 0 0%; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* Écrans lg (>= 992px) */
@media (min-width: 992px) {
    .col-lg { flex: 1 0 0%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* Écrans xl (>= 1200px) */
@media (min-width: 1200px) {
    .col-xl { flex: 1 0 0%; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-xl-3 { flex: 0 0 auto; width: 25%; }
    .col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-xl-6 { flex: 0 0 auto; width: 50%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-xl-9 { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* Écrans xxl (>= 1400px) */
@media (min-width: 1400px) {
    .col-xxl { flex: 1 0 0%; }
    .col-xxl-auto { flex: 0 0 auto; width: auto; }
    .col-xxl-1 { flex: 0 0 auto; width: 8.333333%; }
    .col-xxl-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-xxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxl-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-xxl-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-xxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxl-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-xxl-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-xxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxl-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-xxl-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-xxl-12 { flex: 0 0 auto; width: 100%; }
}

/* Grilles modernes CSS Grid */
.clown-grille {
    display: grid;
    gap: 1.25rem;
}
.clown-grille-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.clown-grille-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.clown-grille-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Utilitaires Display & Flex */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* Responsive display */
@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
}
@media (min-width: 576px) {
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline-block { display: inline-block !important; }
    /* Manquait entièrement : Title.razor l'utilise pour annuler son padding (.p-3) dès le bureau, qui
       restait donc toujours actif partout où <Title> est utilisé (trouvé sur la fiche produit, confirmé
       aussi visible sur le bandeau boutique/catégorie : fil d'Ariane collé au bouton "Parcourir les
       catégories" faute de cet espace prévu pour être neutre à cet endroit). */
    .p-sm-0 { padding: 0 !important; }
}
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
}
@media (min-width: 768px) {
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline-block { display: inline-block !important; }
}
@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
}
@media (min-width: 992px) {
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-inline-block { display: inline-block !important; }
}

/* --------------------------------------------------------------------------
   3. Espacements & Alignements (Compatibilité Bootstrap)
   -------------------------------------------------------------------------- */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.h-50 { height: 50% !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.top-0 { top: 0 !important; }
.end-0 { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.start-0 { left: 0 !important; }
.top-50 { top: 50% !important; }
.translate-middle-y { transform: translateY(-50%) !important; }
.z-3 { z-index: 1030 !important; }

/* --------------------------------------------------------------------------
   4. Typographie & Couleurs
   -------------------------------------------------------------------------- */
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }

.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }

.fs-1 { font-size: 2.25rem !important; }
.fs-2 { font-size: 1.75rem !important; }
.fs-3 { font-size: 1.4rem !important; }
.fs-4 { font-size: 1.2rem !important; }
.fs-5 { font-size: 1.05rem !important; }
.fs-6 { font-size: 0.95rem !important; }
.fs-7 { font-size: 0.82rem !important; }
.fs-8 { font-size: 0.72rem !important; }

.text-white { color: #ffffff !important; }
.text-muted { color: var(--clown-texte-leger) !important; }
.text-orange { color: var(--clown-orange) !important; }
.text-pink { color: var(--clown-rose-texte) !important; }
.text-success { color: var(--clown-succes) !important; }
.text-danger { color: var(--clown-danger) !important; }
.text-warning { color: var(--clown-alerte) !important; }
.bg-white { background-color: var(--clown-surface) !important; }
.bg-light { background-color: var(--clown-surface-alt) !important; }

.rounded { border-radius: var(--clown-radius-md) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: var(--clown-radius-pilule) !important; }
.shadow { box-shadow: var(--clown-ombre-md) !important; }
.shadow-sm { box-shadow: var(--clown-ombre-sm) !important; }
.shadow-lg { box-shadow: var(--clown-ombre-lg) !important; }
.pointer { cursor: pointer !important; }

.Titre {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--clown-texte-sombre);
    letter-spacing: -0.01em;
}

.Titre:not(:empty)::after {
    display: block;
    content: "";
    width: 50px;
    height: 4px;
    border-radius: var(--clown-radius-pilule);
    background: var(--clown-orange-degrade-h);
    margin-top: 0.5rem;
}

/* Titre + sous-titre de page (Title.razor) : le sous-titre se distinguait mal du titre
   (meme graisse, taille proche) - hierarchie visible : titre fort, sous-titre plus leger
   et attenue. */
.main-title {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--clown-texte-sombre);
    line-height: 1.15;
}
.sub-title {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 500;
    color: var(--clown-texte-leger);
    line-height: 1.4;
    max-width: 780px;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5. Boutons & Badges
   -------------------------------------------------------------------------- */
.btn, .clown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.6rem 1.4rem;
    border-radius: var(--clown-radius-pilule);
    border: 2px solid transparent;
    transition: var(--clown-transition);
    cursor: pointer;
    text-align: center;
    white-space: normal;
    min-height: 44px;
}

.btn:hover, .clown-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--clown-ombre-md);
}

.btn:active, .clown-btn:active {
    transform: translateY(0);
}

/* Bouton Orange Clown - texte blanc sur le degrade orange, comme les boutons "Voir le
   produit" du site actuel. */
/* « border-box » dans le raccourci background : le dégradé est calé sur la bordure transparente. Sans cela il est
   dessiné sous la bordure en se répétant, et le début orange réapparaît en liseré au bout droit du bouton (04/10/2026).
   À garder dans chaque redéfinition de « background » d'un bouton à bordure transparente (le raccourci le réinitialise). */
.btn-orange, .clown-btn-orange, .button-orange {
    background: var(--clown-orange-degrade) border-box;
    color: #ffffff !important;
    border-color: transparent;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.btn-orange:hover, .clown-btn-orange:hover {
    background: #ffffff;
    color: #b8500f !important;
    border-color: var(--clown-orange);
    text-shadow: none;
}

.btn-orange-outlined {
    background: #ffffff;
    color: #98400c !important;
    border-color: var(--clown-orange);
}
.btn-orange-outlined:hover {
    background: var(--clown-orange-degrade);
    color: var(--clown-texte-sombre) !important;
    border-color: transparent;
}

/* Bouton Rose Clown - texte blanc comme sur le site actuel (le texte sombre sur rose vif
   manquait de contraste et ne correspondait pas a la charte en place). */
.btn.btn-pink, .btn-pink, .clown-btn-rose {
    background: var(--clown-rose-degrade);
    color: #ffffff !important;
    border-radius: var(--clown-radius-md) !important;
    padding: 0.55rem 1.4rem !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.btn.btn-pink:hover, .btn-pink:hover, .clown-btn-rose:hover {
    background: linear-gradient(to bottom, #ff5ba9, #f9457d);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(255, 61, 151, 0.35);
}

.btn-sm {
    padding: 0.35rem 0.85rem !important;
    font-size: 0.85rem !important;
}

/* Panier & Boutons compacts */
.btn-cart {
    font-size: 0.85rem !important;
    padding: 0.5rem 1.25rem !important;
    background: var(--clown-orange-degrade);
    color: #ffffff !important;
}
.btn-cart-outlined {
    background: #ffffff;
    border: 1px solid var(--clown-orange);
    color: var(--clown-orange) !important;
}
.btn-cart-outlined:hover {
    background: var(--clown-orange-degrade);
    color: #ffffff !important;
}

/* Barre "Parcourir les categories" sous l'en-tete */
.clown-barre-categories {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0;
    margin-bottom: 1rem;
}
.clown-barre-categories .btn { padding: 0.45rem 1.1rem !important; }

/* Tri du catalogue */
.clown-tri label { color: var(--clown-texte-leger); font-size: 0.9rem; }
.clown-tri .form-select { min-width: 220px; border-radius: var(--clown-radius-md); }

/* Reference interne sur la fiche produit : info secondaire, ligne discrete */
.clown-produit-reference {
    font-size: 0.85rem;
    color: var(--clown-texte-leger);
}
.clown-produit-reference span {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    background: #fff4eb;
    border-radius: var(--clown-radius-sm);
    padding: 0.1rem 0.45rem;
    color: var(--clown-texte-sombre);
}

.btn-orange.btn-orange-cards, .btn-orange-cards {
    padding: 8px 45px !important;
    font-size: 13px !important;
    font-weight: bold;
}
.btn-orange.btn-orange-cards:hover, .btn-orange-cards:hover {
    padding: 7px 44px !important;
}

.btn.btn-cards-pink, .btn-cards-pink {
    background: linear-gradient(to bottom, #FF3D97, #F4346C) !important;
    color: #ffffff !important;
    padding: 14px 27px !important;
    border-radius: 0.5rem !important;
    font-weight: bold;
}

/* btn-warning (connexion, inscription, ajout panier) : jaune Bootstrap remplace par l'orange
   de la charte, texte blanc, pour rester coherent avec les autres boutons du site. */
.btn-warning {
    background: var(--clown-orange-degrade) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.btn-warning:hover {
    background: #ffffff !important;
    border-color: var(--clown-orange) !important;
    color: #b8500f !important;
    text-shadow: none;
}
.btn-warning:disabled { opacity: 0.55; }

.btn-outline-secondary {
    color: #6c757d !important;
    border: 1px solid #ced4da !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover {
    color: #ffffff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.btn-summary {
    padding: 8px 45px !important;
    cursor: pointer !important;
}
.btn-summary:hover {
    padding: 7px 44px !important;
}

/* Badges */
.badge, .clown-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--clown-radius-sm);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}
.badge-custom {
    font-size: 0.9rem !important;
    padding: 0.4em 0.8em !important;
    border-radius: var(--clown-radius-sm) !important;
}
.badge-promo {
    background-color: var(--clown-rose);
    color: #ffffff;
}
.badge-stock {
    background-color: #e0f2fe;
    color: #0369a1;
}

/* Couleurs de badges & arrière-plans Bootstrap */
.bg-primary { background-color: #0d6efd !important; color: #ffffff !important; }
.bg-secondary { background-color: #6c757d !important; color: #ffffff !important; }
.bg-success { background-color: #198754 !important; color: #ffffff !important; }
.bg-danger { background-color: #dc3545 !important; color: #ffffff !important; }
.bg-warning { background-color: #ffc107 !important; color: #000000 !important; }
.bg-info { background-color: #0dcaf0 !important; color: #000000 !important; }
.bg-info-subtle { background-color: #cff4fc !important; color: #055160 !important; }
.bg-body-secondary { background-color: #e9ecef !important; color: #212529 !important; }
.bg-light { background-color: #f8f9fa !important; color: #212529 !important; }
.bg-dark { background-color: #212529 !important; color: #ffffff !important; }

/* Thèmes & Catégories originaux de www.clown.fr */
#themes-cat {
  background: url("/img/icone-cat.png") 16px 50%/30px no-repeat, linear-gradient(to top, #15A5BF, #2BCBBA) 0% 0%/10px no-repeat;
}
#themes-cat::after {
  content: "Catégories";
  margin-inline-start: 45px;
  font-weight: bold;
}
#themes-cat-open {
  background: linear-gradient(to top, #15A5BF, #15A5BF) 0% 0%/10px no-repeat;
  padding-left: 10px;
}
#themes-cat-open a:hover, #themes-cat-open a.selection {
  color: #2BCBBA !important;
}
#themes-theme {
  background: url("/img/icone-theme.png") 16px 50%/30px no-repeat, linear-gradient(to top, #FD6044, #FD9644) 0% 0%/10px no-repeat;
}
#themes-theme::after {
  content: "Thèmes";
  margin-inline-start: 45px;
  font-weight: bold;
}
#themes-theme-open {
  background: linear-gradient(to top, #FD6044, #FD6044) 0% 0%/10px no-repeat;
  padding-left: 10px;
}
#themes-theme-open a:hover, #themes-theme-open a.selection {
  color: #FD9644 !important;
}
#themes-location {
  background: url("/img/icone-location.png") 16px 50%/30px no-repeat, linear-gradient(to top, #C027CD, #7B28DD) 0% 0%/10px no-repeat;
}
#themes-location::after {
  content: "Locations";
  margin-inline-start: 45px;
  font-weight: bold;
}
#themes-location-open {
  background: linear-gradient(to top, #C027CD, #C027CD) 0% 0%/10px no-repeat;
  padding-left: 10px;
}
#themes-location-open a:hover, #themes-location-open a.selection {
  color: #7B28DD !important;
}
#themes-event {
  background: url("/img/icone-event.png") 16px 50%/30px no-repeat, linear-gradient(to top, #FC5C65, #F8155B) 0% 0%/10px no-repeat;
}
#themes-event::after {
  content: "Événements";
  margin-inline-start: 45px;
  font-weight: bold;
}
#themes-event-open {
  background: linear-gradient(to top, #FC5C65, #FC5C65) 0% 0%/10px no-repeat;
  padding-left: 10px;
}
#themes-event-open a:hover, #themes-event-open a.selection {
  color: #F8155B !important;
}

.img-icon {
  width: 30px;
  height: auto;
  vertical-align: middle;
}
.img-hover:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

/* --------------------------------------------------------------------------
   6. Header, Navigation & Menu Mobile
   -------------------------------------------------------------------------- */
.clown-header {
    background: var(--clown-surface);
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Bandeau d'accroche jaune (haut de page, défile avec la page). Sur mobile, seule l'accroche reste, centrée. */
.clown-annonce-bar {
    background: var(--clown-jaune);
    color: var(--clown-texte-sombre);
    font-size: 0.84rem;
    font-weight: 600;
    padding: 0.5rem 0;
}
.clown-annonce-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}
.clown-annonce-liens { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0; }
.clown-annonce-liens > * + * { margin-left: 1.25rem; padding-left: 1.25rem; border-left: 1px solid rgba(39, 30, 40, 0.18); }
.clown-annonce-liens a,
.clown-annonce-liens span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--clown-texte-sombre);
    text-decoration: none;
}
.clown-annonce-liens a:hover { color: #c2410c; }
.clown-annonce-liens svg { width: 18px; height: 18px; flex: none; color: #e8801a; }
@media (max-width: 767.98px) {
    .clown-annonce-bar .container { justify-content: center; text-align: center; }
    .clown-annonce-liens { display: none; }
}

/* Ligne principale : logo | recherche | compte et panier. */
.clown-entete-ligne { display: flex; align-items: center; gap: 1.5rem; padding: 0.55rem 0; }
.clown-entete-logo { flex: none; display: flex; align-items: center; }
.clown-brand-logo { width: 340px; max-height: 68px; object-fit: contain; transition: transform 0.2s ease; }
.clown-brand-logo:hover { transform: scale(1.02); }
.clown-entete-recherche { flex: 1 1 auto; min-width: 0; }

/* Champ de recherche en pilule avec bouton rond rose. */
.clown-recherche-entete {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 640px;
    margin-inline: auto;
    padding: 4px 4px 4px 1.35rem;
    background: #ffffff;
    border: 1px solid #ecdfd0;
    border-radius: 9999px;
    box-shadow: 0 2px 10px rgba(80, 40, 0, 0.08);
    transition: var(--clown-transition);
}
.clown-recherche-entete:focus-within { border-color: var(--clown-rose); box-shadow: 0 0 0 3px rgba(255, 61, 151, 0.18); }
.clown-recherche-entete input { flex: 1 1 auto; min-width: 0; padding: 0.55rem 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.95rem; color: var(--clown-texte); }
.clown-recherche-entete input::placeholder { color: #8a8f9c; }
.clown-recherche-entete input::-webkit-search-cancel-button { display: none; }
.clown-recherche-entete > button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--clown-rose-vif);
    color: #ffffff;
    cursor: pointer;
    transition: var(--clown-transition);
}
.clown-recherche-entete > button:hover { background: var(--clown-rose-fonce); transform: scale(1.06); }
.clown-recherche-entete > button svg { width: 22px; height: 22px; }
.clown-recherche-mobile { display: none; padding-block: 0.6rem; }

/* Suggestions de produits sous le champ : visibles tant que le focus reste dans le formulaire. */
.clown-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid #ecdfd0;
    border-radius: 20px;
    box-shadow: 0 16px 30px rgba(60, 30, 0, 0.18);
}
.clown-recherche-entete:focus-within .clown-suggestions { display: block; }
.clown-suggestions ul { margin: 0; padding: 0; list-style: none; }
.clown-suggestions li a { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.6rem; border-radius: 12px; color: var(--clown-texte); text-decoration: none; }
.clown-suggestions li a:hover, .clown-suggestions li a:focus-visible { background: #fff4eb; }
.clown-suggestions img { flex: none; width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: #f4ecdc; }
.clown-sugg-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.clown-sugg-nom { font-size: 0.92rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clown-sugg-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.clown-sugg-tags:empty { display: none; }
.clown-sugg-tag { padding: 0 0.5rem; border-radius: 9999px; background: #eef1f6; color: #475569; font-size: 0.7rem; font-weight: 800; line-height: 1.6; }
.clown-sugg-tag--promo { background: #ffe0f0; color: #b0106a; }
.clown-sugg-tag--loc { background: #fff0c2; color: #8a5a00; }
.clown-sugg-prix { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 0.9rem; font-weight: 800; line-height: 1.2; color: #c2410c; }
.clown-sugg-prix s { font-size: 0.78rem; font-weight: 600; color: var(--clown-texte-leger); }
.clown-sugg-prix small { font-size: 0.72rem; font-weight: 600; color: var(--clown-texte-leger); }
.clown-suggestions li a.clown-sugg--indispo { opacity: 0.6; }
.clown-sugg-tout { display: block; width: 100%; margin-top: 0.35rem; padding: 0.65rem 1rem; border: 0; border-radius: 12px; background: var(--clown-rose-vif); color: #ffffff; font: inherit; font-weight: 800; cursor: pointer; }
.clown-sugg-tout:hover { background: var(--clown-rose-fonce); }
.clown-sugg-vide { margin: 0; padding: 0.75rem 1rem; color: var(--clown-texte-leger); }

/* Compte et panier : icône au-dessus d'un libellé, pastille orange pour la quantité. */
.clown-header-actions { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.clown-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.75rem;
    border: 0;
    border-radius: var(--clown-radius-md);
    background: transparent;
    color: var(--clown-texte-sombre);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--clown-transition);
}
.clown-action:hover { background: #fff4eb; color: #c2410c; }
.clown-action-icone { position: relative; display: inline-flex; }
.clown-action-icone svg { width: 30px; height: 30px; }
.clown-action-pastille {
    position: absolute;
    top: -6px;
    right: -11px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--clown-orange);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}

/* Catégories (bureau) : une ligne de liens, sous-menus au survol ou au clic sur la flèche. */
.clown-nav-categories { border-top: 1px solid #f1e6d6; }
.clown-nav-categories > ul { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.clown-nav-item { position: relative; display: flex; align-items: center; }
.clown-nav-lien { position: relative; padding: 0.8rem 0.35rem; font-size: 0.94rem; font-weight: 700; color: var(--clown-texte-sombre); white-space: nowrap; transition: var(--clown-transition); }
.clown-nav-lien:hover, .clown-nav-lien.activated { color: #c2410c; }
.clown-nav-lien::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; border-radius: 3px; background: var(--clown-orange-degrade-h); transform: translateX(-50%); transition: var(--clown-transition); }
.clown-nav-lien:hover::after, .clown-nav-lien.activated::after { width: 80%; }
.clown-nav-lien--promo, .clown-nav-lien--promo:hover { color: var(--clown-rose-vif); }
.clown-nav-chevron { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 30px; margin-left: -0.15rem; padding: 0; border: 0; background: transparent; color: var(--clown-texte-sombre); cursor: pointer; }
.clown-nav-chevron svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.clown-nav-item:hover .clown-nav-chevron svg, .clown-nav-item.ouvert .clown-nav-chevron svg { transform: rotate(180deg); }
.clown-nav-panneau {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    width: max-content;
    min-width: 230px;
    max-width: min(600px, 90vw);
    max-height: 70vh;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.1rem;
    background: #ffffff;
    border-top: 3px solid var(--clown-orange);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 30px rgba(60, 30, 0, 0.16);
}
.clown-nav-item:nth-last-child(-n+3) .clown-nav-panneau { left: auto; right: 0; }
.clown-nav-item.a-sous-menu:hover .clown-nav-panneau, .clown-nav-item.ouvert .clown-nav-panneau { display: block; }
.clown-nav-item.ferme .clown-nav-panneau { display: none !important; }
.clown-nav-panneau ul { margin: 0.5rem 0 0; padding: 0; list-style: none; columns: 2 12rem; column-gap: 1.75rem; }
.clown-nav-panneau li { break-inside: avoid; }
.clown-nav-panneau li a { display: block; padding: 0.3rem 0; font-size: 0.9rem; color: var(--clown-texte); }
.clown-nav-panneau li a:hover { color: #c2410c; }
.clown-nav-tout { font-weight: 800; color: #c2410c; }

/* Bouton hamburger mobile */
.clown-burger-btn { display: none; flex-direction: column; justify-content: space-around; width: 44px; height: 44px; padding: 10px 8px; background: transparent; border: none; cursor: pointer; }
.clown-burger-bar { width: 100%; height: 3px; background-color: var(--clown-texte-sombre); border-radius: 2px; transition: var(--clown-transition); }

.clown-mobile-drawer { display: none; }
.clown-nav-link { display: block; padding: 0.85rem 1rem; font-weight: 700; color: var(--clown-texte-sombre); border-radius: var(--clown-radius-md); }
.clown-nav-link:hover, .clown-nav-link.activated { color: #c2410c; }

/* Les neuf catégories tiennent sur une ligne dès 1200 px (un peu resserrées jusqu'à 1280 px) ; en dessous, tiroir mobile. */
@media (max-width: 1279.98px) {
    .clown-brand-logo { width: 300px; }
    .clown-entete-ligne { gap: 1rem; }
    .clown-nav-lien { font-size: 0.86rem; padding-inline: 0.2rem; }
}
@media (max-width: 1199.98px) {
    .clown-brand-logo { width: 250px; }
    .clown-nav-categories { display: none; }
    .clown-entete-recherche .clown-suggestions { right: auto; width: min(440px, calc(100vw - 2rem)); }
    .clown-burger-btn { display: flex; }
    .clown-action { padding-inline: 0.5rem; }
    .clown-mobile-drawer {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 0.5rem 1rem 1rem;
        background: var(--clown-surface);
        box-shadow: var(--clown-ombre-lg);
        border-top: 1px solid var(--clown-bordure);
    }
    .clown-mobile-drawer.show { display: block; }
    .clown-mobile-drawer > a, .clown-tiroir-groupe { border-bottom: 1px solid var(--clown-surface-alt); }
    .clown-tiroir-groupe summary { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; font-weight: 700; list-style: none; cursor: pointer; }
    .clown-tiroir-groupe summary::-webkit-details-marker { display: none; }
    .clown-tiroir-groupe summary::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; }
    .clown-tiroir-groupe[open] summary::after { transform: rotate(-135deg); }
    .clown-tiroir-groupe > a { display: block; padding: 0.55rem 1.75rem; font-size: 0.95rem; color: var(--clown-texte); }
    .clown-tiroir-groupe > a:first-of-type { font-weight: 800; color: #c2410c; }
}
@media (max-width: 991.98px) {
    .clown-brand-logo { width: 210px; }
}
@media (max-width: 767.98px) {
    .clown-entete-recherche { display: none; }
    .clown-recherche-mobile { display: block; background: var(--clown-jaune); }
    .clown-recherche-mobile .clown-recherche-entete { max-width: none; }
    .clown-action-libelle { display: none; }
    .clown-action-icone svg { width: 28px; height: 28px; }
}

/* Bandeau d'annonce */
#bandeau {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    width: min(90%, 750px);
    padding: 0.65rem 1.25rem;
    background: var(--clown-rose-degrade);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--clown-radius-md);
    box-shadow: 0 8px 24px rgba(255, 61, 151, 0.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#bandeau .close-btn {
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
    background: none;
    border: none;
    cursor: pointer;
}
#bandeau .close-btn:hover {
    opacity: 1;
    color: var(--clown-jaune);
}

/* --------------------------------------------------------------------------
   7. Carrousels tactiles modernes (CSS Scroll-Snap, sans jQuery)
   -------------------------------------------------------------------------- */
.clown-carrousel-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.clown-carrousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0.5rem 0.25rem 1rem 0.25rem;
}

/* Barre de defilement masquee : le defilement automatique et les fleches suffisent. */
.clown-carrousel { scrollbar-width: none; }
.clown-carrousel::-webkit-scrollbar { display: none; }

/* Vignette de famille (Promos, Deguisements...) a gauche du carrousel : meme hauteur que les cartes. */
.clown-carrousel-vignette {
    flex: 0 0 220px;
    align-self: stretch;
    margin: 0.5rem 0 1rem;
    border-radius: var(--clown-radius-lg);
    overflow: hidden;
    box-shadow: var(--clown-ombre-sm);
}
.clown-carrousel-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.clown-carrousel-vignette:hover img { transform: scale(1.04); }

.clown-carrousel-item {
    flex: 0 0 calc(25% - 0.75rem);
    min-width: 210px;
    scroll-snap-align: start;
}

@media (max-width: 991.98px) {
    .clown-carrousel-item {
        flex: 0 0 calc(33.333% - 0.67rem);
        min-width: 190px;
    }
}

@media (max-width: 575.98px) {
    .clown-carrousel-item {
        flex: 0 0 calc(50% - 0.5rem);
        min-width: 160px;
    }
}

/* Flèches de carrousel */
.clown-carrousel-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--clown-surface);
    box-shadow: var(--clown-ombre-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--clown-texte-sombre);
    cursor: pointer;
    z-index: 10;
    transition: var(--clown-transition);
    border: 1px solid var(--clown-bordure);
}

.clown-carrousel-fleche:hover {
    background: var(--clown-orange);
    color: #ffffff;
    border-color: var(--clown-orange);
    transform: translateY(-50%) scale(1.08);
}

.clown-carrousel-prev { left: -14px; }
.clown-carrousel-next { right: -14px; }

/* --------------------------------------------------------------------------
   8. Cartes & Univers d'accueil
   -------------------------------------------------------------------------- */
.clown-carte {
    background: var(--clown-surface);
    border-radius: var(--clown-radius-lg);
    border: 1px solid var(--clown-bordure);
    box-shadow: var(--clown-ombre-sm);
    padding: 1.25rem;
    transition: var(--clown-transition);
}

.clown-carte:hover {
    box-shadow: var(--clown-ombre-md);
    border-color: var(--clown-orange-clair);
}

.clown-tuile-univers {
    background: var(--clown-surface);
    border-radius: var(--clown-radius-lg);
    padding: 1rem;
    text-align: center;
    box-shadow: var(--clown-ombre-sm);
    border: 2px solid transparent;
    transition: var(--clown-transition);
    display: block;
}

.clown-tuile-univers img {
    margin: 0 auto;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 170px;
    object-fit: contain;
}

.clown-tuile-univers:hover {
    transform: translateY(-4px);
    box-shadow: var(--clown-ombre-md);
    border-color: var(--clown-orange);
}

.clown-tuile-univers:hover img {
    transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   9. Footer moderne
   -------------------------------------------------------------------------- */
.clown-footer {
    /* Bleu nuit de la maquette : le texte clair ressort, les logos de paiement restent sur pastilles blanches. */
    --clown-nuit: #1b2440;
    background: var(--clown-nuit);
    color: #cbd5e1;
    border-top: 4px solid var(--clown-orange);
    margin-top: auto;
    padding: 2.5rem 0 1.25rem;
}
.clown-footer a { color: #e2e8f0; text-decoration: none; }
.clown-footer a:hover { color: var(--clown-orange-clair); text-decoration: underline; text-underline-offset: 3px; }

/* Cinq colonnes comme la maquette : marque | univers | informations | aide | coordonnees */
.clown-footer-grille { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1.25fr; gap: 2rem; align-items: start; }
.clown-footer-logo { display: block; width: min(290px, 100%); height: auto; }
.clown-footer-accroche { margin: 0.9rem 0 1.1rem; font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-weight: 600; font-size: 1.6rem; line-height: 1.1; color: #ffffff; }
/* Petits téléphones : « 1975 » tombait seul sur sa ligne dans l'accroche manuscrite (05/10/2026). */
@media (max-width: 399.98px) { .clown-footer-accroche { font-size: 1.35rem; } }
.clown-footer-reseaux { display: flex; gap: 0.6rem; }
.clown-footer-reseaux a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: var(--clown-transition); }
.clown-footer-reseaux a:hover { background: var(--clown-orange); color: #ffffff; text-decoration: none; }
.clown-footer-titre { margin: 0 0 1rem; font-size: 1rem; font-weight: 800; color: #ffffff; }
.clown-footer-colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.92rem; }
/* Liens du pied de page : zone de clic agrandie verticalement (cibles tactiles trop serrées sur mobile). */
@media (max-width: 991.98px) {
    .clown-footer-colonne ul { gap: 0.15rem; }
    .clown-footer-colonne ul a { display: inline-block; padding-block: 0.3rem; }
    .clown-footer-seo a { padding-block: 0.25rem; }
}
.clown-footer-coordonnees li { display: flex; align-items: flex-start; gap: 0.6rem; }
.clown-footer-coordonnees i { color: var(--clown-orange-clair); margin-top: 0.15rem; }
.clown-footer-mot { margin: 1.3rem 0 0; font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-weight: 600; font-size: 1.5rem; line-height: 1.1; color: #ffffff; transform: rotate(-3deg); }
.clown-footer-mot svg { width: 1.3rem; height: 1.3rem; color: var(--clown-rose); vertical-align: -0.15rem; }

/* Transporteurs et moyens de paiement : pastilles blanches lisibles sur le fond sombre. */
.clown-footer-partenaires { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
/* Le groupe « Paiement sécurisé » prend toute la place restante à côté des transporteurs : sa largeur « naturelle »
   est sous-estimée par le navigateur (rangée à retour à la ligne), ce qui coupait la neuvième pastille sur une 2e rangée. */
.clown-footer-partenaires > div:last-child { flex-grow: 1; }
.clown-footer-etiquette { display: block; margin-bottom: 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; }
/* Écart et marges resserrés (0,75 → 0,5 rem ; 9 → 8 px) : neuf moyens de paiement depuis l'ajout de CB, Apple Pay et
   Google Pay, qui tiennent ainsi sur une seule rangée à côté des transporteurs sur grand écran. */
.clown-partenaires-grille { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.5rem; }
.clown-partenaires-grille img { max-height: 34px; width: auto; object-fit: contain; background: #ffffff; padding: 5px 8px; border-radius: 8px; transition: var(--clown-transition); }
.clown-partenaires-grille img:hover { transform: scale(1.05); }
.clown-footer-seo { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8rem; line-height: 1.75; }
.clown-footer-seo-liste { display: grid; gap: 0.6rem; }
.clown-footer-seo p { margin: 0; }
.clown-footer-seo summary { display: none; }
.clown-footer-seo .clown-footer-etiquette { display: inline-block; margin: 0 0.9rem 0 0; }
.clown-footer-seo a { display: inline-block; margin-right: 0.9rem; color: #b6c2d6; white-space: nowrap; }
.clown-footer-bas { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.85rem; color: #94a3b8; }
@media (max-width: 1199.98px) {
    .clown-footer-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .clown-footer-marque, .clown-footer-grille > .clown-footer-colonne:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .clown-footer-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
    .clown-footer-partenaires { flex-direction: column; }
    .clown-footer-seo { padding-top: 0.9rem; }
    .clown-footer-seo summary { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0; font-size: 0.95rem; font-weight: 700; color: #ffffff; list-style: none; cursor: pointer; }
    .clown-footer-seo summary::-webkit-details-marker { display: none; }
    .clown-footer-seo summary::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; }
    .clown-footer-seo[open] summary::after { transform: rotate(-135deg); }
    .clown-footer-seo-liste { margin-top: 0.75rem; }
}

/* --------------------------------------------------------------------------
   10. Module de Consentement RGPD Local (Règle 25)
   -------------------------------------------------------------------------- */
/* Refait le 26/09/2026 d'après la maquette « bannière cookies compacte » : cadre flottant (marge autour, coins arrondis), mascotte + étoiles décoratives, boutons en
   pilule. Le bleu nuit (--clown-nuit) est celui déjà utilisé par le pied de page (section 1). */
.clown-rgpd-banner {
    position: fixed;
    left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 2000;
    display: flex; align-items: center;
    max-width: 78rem; margin: 0 auto;
    padding: 1.1rem 1.6rem;
    border-radius: 22px;
    background: var(--clown-nuit, #1b2440);
    color: #ffffff;
    box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.5);
    animation: clown-slide-up 0.3s ease-out;
}

@keyframes clown-slide-up {
    from { transform: translateY(1.5rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .clown-rgpd-banner { animation: none !important; } }

/* Étoiles décoratives dans les coins du cadre (comme la maquette), masquées sur petit écran pour ne pas gêner la lecture. */
.clown-rgpd-etoile { display: none; position: absolute; z-index: -1; height: auto; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
@media (min-width: 992px) {
    .clown-rgpd-etoile { display: block; }
    .clown-rgpd-etoile--jaune { left: 2rem; bottom: 100%; width: 34px; margin-bottom: -0.6rem; transform: rotate(-10deg); }
    .clown-rgpd-etoile--rose { right: 2.5rem; top: 100%; width: 40px; margin-top: -0.8rem; transform: rotate(12deg); }
}

.clown-rgpd-contenu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem 1.6rem;
    width: 100%;
}

.clown-rgpd-mascotte { flex: none; width: 56px; height: 56px; }

.clown-rgpd-texte {
    flex: 1 1 420px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #cbd5e1;
}
.clown-rgpd-texte strong { display: block; margin-bottom: 0.25rem; font-size: 1.15rem; font-weight: 800; color: #ffffff; }
.clown-rgpd-texte p { margin: 0; }

.clown-rgpd-texte a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    color: var(--clown-orange);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.clown-rgpd-texte a i { font-size: 0.85rem; }
.clown-rgpd-texte a:hover, .clown-rgpd-texte a:focus-visible { color: #ffb35c; }

.clown-rgpd-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    flex: none;
    margin-left: auto;
}

.clown-rgpd-btn-accepter {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 3rem;
    padding: 0.6rem 1.5rem;
    border: 0;
    border-radius: var(--clown-radius-pilule);
    background: linear-gradient(90deg, #ff8a1f, #ff3b30);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px -10px rgba(255, 90, 30, 0.7);
    transition: var(--clown-transition);
}
.clown-rgpd-btn-accepter:hover { filter: brightness(1.06); transform: translateY(-1px); }
.clown-rgpd-btn-accepter:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.clown-rgpd-btn-refuser {
    min-height: 3rem;
    padding: 0.6rem 1.4rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--clown-radius-pilule);
    background: transparent;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--clown-transition);
}
.clown-rgpd-btn-refuser:hover { background: rgba(255, 255, 255, 0.12); }
.clown-rgpd-btn-refuser:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.clown-rgpd-btn-config {
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: #cbd5e1;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.clown-rgpd-btn-config:hover, .clown-rgpd-btn-config:focus-visible { color: #ffffff; }

/* Dans la fenêtre « Gestion des cookies » (fond blanc, pas le bandeau bleu nuit) : le bouton Annuler reprend le même contour mais en couleurs sombres, sinon il est invisible sur blanc. */
.clown-rgpd-modal .clown-rgpd-btn-refuser { border-color: #ddd6c8; color: #1b1f3b; }
.clown-rgpd-modal .clown-rgpd-btn-refuser:hover { background: #fff0f6; color: #a3074f; border-color: #f5b8d0; }
.clown-rgpd-modal .clown-rgpd-btn-refuser:focus-visible { outline-color: #1b1f3b; }

@media (max-width: 767.98px) {
    .clown-rgpd-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; padding: 1rem 1.1rem; border-radius: 18px; }
    .clown-rgpd-actions { width: 100%; }
    .clown-rgpd-btn-accepter, .clown-rgpd-btn-refuser { flex: 1 1 auto; justify-content: center; }
    .clown-rgpd-btn-config { flex: 0 0 100%; text-align: center; }
}

/* Modale de personnalisation RGPD */
.clown-rgpd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.clown-rgpd-modal {
    background: var(--clown-surface);
    border-radius: var(--clown-radius-lg);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.75rem;
    box-shadow: var(--clown-ombre-lg);
    color: var(--clown-texte);
}

.clown-rgpd-option {
    padding: 1rem;
    border-radius: var(--clown-radius-md);
    background: var(--clown-surface-alt);
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.clown-rgpd-option-titre {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--clown-texte-sombre);
}

.clown-rgpd-option-desc {
    font-size: 0.85rem;
    color: var(--clown-texte-leger);
}

/* Placeholders cliquables pour contenus bloqués en attente de consentement (Street View, Maps, Canva) */
.clown-consentement-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2.2rem 1.5rem;
    border: 2px dashed #ddd6c8;
    border-radius: 16px;
    background: #fffdf9;
    color: #3d3a4b;
    min-height: 240px;
    width: 100%;
    box-sizing: border-box;
    margin: 0.5rem 0;
}
.clown-consentement-placeholder-icone {
    font-size: 2.4rem;
    line-height: 1;
}
.clown-consentement-placeholder-texte strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #1b1f3b;
    margin-bottom: 0.25rem;
}
.clown-consentement-placeholder-texte p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #6b6880;
    max-width: 32rem;
}
.clown-consentement-placeholder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 42px;
    margin-top: 0.3rem;
    padding: 0.5rem 1.4rem;
    border: 0;
    border-radius: var(--clown-radius-pilule, 9999px);
    background: linear-gradient(90deg, #ff8a1f, #ff3b30);
    color: #ffffff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 18px -8px rgba(255, 90, 30, 0.6);
    transition: var(--clown-transition);
}
.clown-consentement-placeholder-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.clown-consentement-placeholder-btn:focus-visible {
    outline: 3px solid #1b1f3b;
    outline-offset: 2px;
}
/* Dans la colonne carte de la page Transport, le cadre bloqué occupe toute la hauteur de #map. */
#map > .clown-consentement-placeholder { height: 100%; margin: 0; }

/* --------------------------------------------------------------------------
   11. Modales natives, Collapses, & Fiches Produits (Sans Bootstrap)
   -------------------------------------------------------------------------- */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2050;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    padding: 1rem;
}

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* La modale porte elle-meme le voile (voir ouvrirModal dans clown-site.js). */
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    animation: clown-fade-in 0.2s ease-out;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2040;
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    animation: clown-fade-in 0.2s ease-out;
}

@keyframes clown-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: auto;
    pointer-events: auto;
    animation: clown-modal-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-dialog.modal-xl {
    max-width: 900px;
}

@keyframes clown-modal-pop {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--clown-surface);
    border-radius: var(--clown-radius-lg);
    box-shadow: var(--clown-ombre-lg);
    border: 1px solid var(--clown-bordure);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--clown-bordure);
}

.modal-header.bg-warning {
    background: var(--clown-orange-degrade-h) !important;
    color: #ffffff !important;
}

.modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

/* Seul le corps defile : la fenetre reste dans l'ecran (en-tete et pied toujours visibles),
   au lieu d'un double defilement (modale + corps) sur mobile. */
.modal-content {
    max-height: calc(100vh - 2rem);
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.25rem;
    overflow-y: auto;
    /* Les .row (marges negatives) depassaient de quelques pixels : barre horizontale inutile. */
    overflow-x: hidden;
}
.modal-body > .row { margin-inline: 0; }
@media (max-width: 576px) {
    .modal { padding: 0.5rem; }
    .modal-content { max-height: calc(100vh - 1rem); }
    .modal-header { padding: 0.75rem 1rem; }
    .modal-footer { padding: 0.6rem 1rem; }
    .clown-express { padding: 0.5rem !important; }
}
.clown-express { margin-inline: 0; }
.btn-secondary {
    background-color: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
    color: var(--clown-texte-sombre) !important;
}
.btn-secondary:hover {
    background-color: #cbd5e1 !important;
    border-color: #cbd5e1 !important;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--clown-bordure);
    background: var(--clown-surface-alt);
}

body.modal-open {
    overflow: hidden;
}

.btn-close {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    color: inherit;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover {
    opacity: 1;
}

.btn-close::before {
    content: "✕";
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: bold;
}

/* Accordéons & Collapses */
.collapse {
    display: none;
}
.collapse.show {
    display: block;
}

/* Fiches & Grille de la Boutique */
.card-hover {
    transition: var(--clown-transition);
    border-radius: var(--clown-radius-lg);
    background: #ffffff;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(255, 61, 151, 0.15) !important;
    border-color: var(--clown-rose) !important;
}

.bs-red {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f5f9;
}

.br-10 {
    border-radius: var(--clown-radius-lg) !important;
}

.price-old {
    text-decoration: line-through;
    color: var(--clown-texte-leger);
    font-size: 0.85em;
}

.badge-custom {
    font-size: 0.85rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--clown-radius-md);
}

.stock-info {
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
}

.quantity-input {
    max-width: 70px;
    display: inline-block;
}

/* La fiche et son aperçu ont une largeur variable : laisser les variantes se répartir. */
.clown-variante { margin-inline: 0; gap: .75rem; align-items: center; }
.clown-variante > div { width: auto; min-width: 0; flex: 1 1 95px; padding-inline: 0; }
.clown-variante > .clown-variante-quantite { flex: 0 0 154px; }
.clown-variante .badge { max-width: 100%; white-space: normal; }
.clown-variante .text-pink { white-space: nowrap; }
.clown-variante-quantite .input-group { flex-wrap: nowrap; }
.clown-variante-quantite .btn { flex: 0 0 44px; min-height: 44px; padding: .4rem; }
.clown-variante-quantite .quantity-input { flex: 1 1 64px; padding-inline: .25rem; }

/* Visionneuse photo plein écran (remplace Fancybox) */
.clown-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

.clown-lightbox.show {
    display: flex !important;
}

.clown-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(8px);
}

.clown-lightbox-content {
    position: relative;
    z-index: 3001;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: clown-modal-pop 0.25s ease-out;
}

.clown-lightbox-content img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--clown-radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    background: #ffffff;
}

.clown-lightbox-close {
    position: absolute;
    top: -42px;
    right: 0;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
}

.clown-lightbox-close:hover {
    opacity: 1;
    transform: scale(1.15);
    color: var(--clown-orange);
}

/* Loupe / Zoom produit */
.loupe-widget {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: crosshair;
}

.loupe-widget__loupe {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    display: none;
    background-repeat: no-repeat;
    z-index: 100;
}

.loupe-widget:hover .loupe-widget__loupe {
    display: block;
}

.apercu.active {
    border-color: var(--clown-orange) !important;
    box-shadow: 0 0 0 2px var(--clown-orange-clair);
}

/* --------------------------------------------------------------------------
   12. Offcanvas latéral (Panier et tiroirs sans Bootstrap)
   -------------------------------------------------------------------------- */
.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 2060;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--clown-texte-sombre);
    visibility: hidden;
    background-color: var(--clown-surface);
    background-clip: padding-box;
    outline: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.offcanvas-end {
    top: 0;
    right: 0;
    width: 440px;
    border-left: 1px solid var(--clown-bordure);
    transform: translateX(100%);
    box-shadow: var(--clown-ombre-lg);
}

@media (max-width: 575.98px) {
    .offcanvas-end {
        width: 100%;
    }
}

.offcanvas.show {
    transform: none !important;
    visibility: visible !important;
}

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    border-bottom: 1px solid var(--clown-bordure);
    background: var(--clown-surface-alt);
}

.offcanvas-body {
    flex-grow: 1;
    padding: 1.25rem;
    overflow-y: auto;
}

#PanierSticky {
    cursor: pointer;
    transition: var(--clown-transition);
    background: var(--clown-surface);
}

#PanierSticky:hover {
    transform: scale(1.08);
    box-shadow: var(--clown-ombre-lg) !important;
    border-color: var(--clown-orange) !important;
}

/* --------------------------------------------------------------------------
   13. Formulaires & Curseur de Prix (Boutique sans Bootstrap)
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    display: block;
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--clown-texte-sombre);
    background-color: var(--clown-surface);
    background-clip: padding-box;
    border: 1px solid var(--clown-bordure);
    border-radius: var(--clown-radius-md);
    transition: var(--clown-transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--clown-orange);
    outline: 0;
    box-shadow: 0 0 0 3px var(--clown-orange-clair);
}

.form-control-sm, .form-select-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    border-radius: var(--clown-radius-sm);
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control,
.input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group > :not(:last-child):not(.dropdown-menu) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > :not(:first-child):not(.dropdown-menu) {
    margin-left: -1px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Curseur double filtre de prix */
.range-slider {
    position: relative;
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
}

.range-slider input[type="range"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    z-index: 2;
}

.range-slider input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: transparent;
    border-radius: 3px;
}
.range-slider input[type="range"]::-moz-range-track { background: transparent; }
/* Rail gris avec le segment orange vers rose entre les deux poignées (--deb et --fin posées par filtrePrice.update) */
.range-slider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: linear-gradient(90deg, #e2e8f0 var(--deb, 0%), var(--clown-orange) var(--deb, 0%), var(--clown-rose-vif) var(--fin, 100%), #e2e8f0 var(--fin, 100%));
}

.range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clown-orange-degrade);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    pointer-events: auto;
    margin-top: -7px;
    transition: transform 0.15s;
}

.range-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.range-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clown-orange);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    pointer-events: auto;
}

/* La boîte de filtres (#filtre-box) est stylée par .clown-filtres, section 20 : tiroir latéral clown-offcanvas-filtres. */

/* --------------------------------------------------------------------------
   14. Tunnel de commande & Composants complémentaires (Sans Bootstrap)
   -------------------------------------------------------------------------- */

/* Fil d'Ariane (Breadcrumb) */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Jaune uni, un peu plus soutenu que le fond de page (--clown-jaune #FEE690 / fond de page #FFE58A) :
       donne au fil d'Ariane sa propre bande visible, plutôt que transparent (se fondait trop, alignement
       moins lisible) ou gris (bg-light d'origine, trop terne et coupé du reste de la page). */
    background: #f5d26b;
    padding: 0.5rem 1rem;
    margin: 0 0 1rem;
    border-radius: 9999px;
    list-style: none;
    gap: 0.5rem;
}

/* Cadre de la fiche produit un peu moins massif (padding 1.5rem → 1.1rem) : ressortait trop maintenant que
   le bandeau du haut est fin (retour utilisateur). Largeur resserrée (essai, à valider) : ne prend plus
   toute la largeur du container (1240px), pour paraître moins imposante — au prix d'être un peu différente
   des autres pages qui utilisent toutes la pleine largeur. */
/* Photo centrée verticalement par rapport à la colonne d'infos (souvent plus haute qu'elle avec tous ses
   blocs empilés), plutôt que collée en haut. */
.clown-fiche-produit-carte { padding: 1.1rem; max-width: 99.2%; margin-inline: auto; align-items: center; }

/* Bandeau fil d'Ariane + bouton catégories réunis (fiche produit) : fond en pleine largeur de page (même
   principe que .clown-annonce-bar de l'en-tête), un .container intérieur recentre le contenu pour qu'il
   s'aligne avec le reste de la page. Le fil d'Ariane perd son propre fond/pilule (repris par le bandeau),
   le bouton passe en version compacte pour tenir dans la barre. */
/* Même jaune que le fond de la page (#ffe58a, body), plutôt qu'une teinte plus foncée distincte : se fond
   avec la page au lieu de trancher. */
.clown-bandeau-nav { background: #ffe58a; margin-bottom: 0.3rem; }
.clown-bandeau-nav-contenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.35rem;
    /* Même resserrement que .clown-fiche-produit-carte (99,2%) : les bords du bandeau retombent sur ceux de
       la carte en dessous. En valeur fixe (pas 99,2% ici) car ce bloc est directement dans .clown-bandeau-nav
       (pleine largeur de page) : un pourcentage se calculerait sur la mauvaise largeur de référence (le
       viewport, pas le contenu de 1208px du container juste avant sa propre marge). */
    max-width: 1230px;
}
.clown-bandeau-nav .breadcrumb { background: none; padding: 0; margin: 0; border-radius: 0; flex: 1 1 auto; min-width: 0; }
.clown-bandeau-nav .clown-barre-categories { margin: 0; padding: 0; flex: none; }
/* min-height annulé : .btn impose 44px (cible tactile) partout ailleurs, bien plus haut que ce bouton
   compact n'en a besoin ici. */
.clown-bandeau-nav .clown-barre-categories .btn { min-height: 0; padding: 0.2rem 0.8rem !important; font-size: 0.78rem; line-height: 1.6; box-shadow: none; }
@media (max-width: 575.98px) {
    .clown-bandeau-nav-contenu { flex-direction: column; align-items: stretch; }
    /* Pleine largeur sur téléphone : la hauteur tactile de 44 px revient (26 px seulement avec le style compact). */
    .clown-bandeau-nav .clown-barre-categories .btn { width: 100%; min-height: 44px; }
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
}
/* Tout le fil d'Ariane en noir et gras sur le fond jaune (meilleure lisibilité/contraste que le gris
   discret utilisé sur fond blanc). */
.breadcrumb-item a { color: #1b1f2a; font-weight: 700; }
.breadcrumb-item a:hover { color: var(--clown-rose-vif); }
.breadcrumb-item-actuel { font-weight: 700; color: #1b1f2a; }

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    padding: 0 0.5rem;
    color: var(--clown-texte-leger);
    font-weight: bold;
}

/* Listes de lignes du Panier */
.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--clown-radius-lg);
    overflow: hidden;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 1rem 1.25rem;
    color: var(--clown-texte-sombre);
    background-color: var(--clown-surface);
    border: 1px solid var(--clown-bordure);
}

.list-group-item + .list-group-item {
    border-top-width: 0;
}

.list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.list-group-item:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Badges & Pastilles de statut */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35em 0.65em;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--clown-radius-sm);
    transition: var(--clown-transition);
}

.rounded-pill {
    border-radius: 50rem !important;
}

.bg-danger {
    background-color: var(--clown-rouge) !important;
    color: #ffffff !important;
}

.bg-warning {
    background-color: var(--clown-orange) !important;
    color: #ffffff !important;
}

.bg-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

.bg-secondary {
    background-color: #64748b !important;
    color: #ffffff !important;
}

.bg-light {
    background-color: var(--clown-surface-alt) !important;
}

.bg-white {
    background-color: #ffffff !important;
}

.bg-warning-subtle {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

/* Indicateurs de chargement (Spinners) */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent !important;
    border-radius: 50%;
    animation: 0.75s linear infinite clown-spinner;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.18em;
}

/* « Réduire les animations » (actif sur le poste du propriétaire) fige normalement toute rotation : sans cette exception, ce spinner reste bloqué en forme de
   « C » immobile (repéré sur la popup d'aperçu express du produit, 26/09/2026) au lieu de montrer qu'un chargement est en cours. Un battement d'opacité reste visible. */
@media (prefers-reduced-motion: reduce) {
    .spinner-border, .spinner-border-sm {
        border-color: var(--clown-rose-vif);
        border-right-color: var(--clown-rose-vif) !important;
        animation: clown-chargement-pulse 1.4s ease-in-out infinite !important;
    }
}

.spinner-grow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: 0.75s linear infinite clown-spinner-grow;
}

@keyframes clown-spinner {
    to { transform: rotate(360deg); }
}

@keyframes clown-spinner-grow {
    0% { transform: scale(0); }
    50% { opacity: 1; transform: none; }
}

.btn-outline-secondary {
    border: 1px solid var(--clown-bordure) !important;
    background: transparent !important;
    color: var(--clown-texte-sombre) !important;
    border-radius: var(--clown-radius-md);
    transition: var(--clown-transition);
}

.btn-outline-secondary:hover {
    background: var(--clown-surface-alt) !important;
    border-color: #cbd5e1 !important;
}

.btn-outline-danger {
    border: 1px solid var(--clown-rouge) !important;
    background: transparent !important;
    color: var(--clown-rouge) !important;
    border-radius: var(--clown-radius-md);
    transition: var(--clown-transition);
}

.btn-outline-danger:hover {
    background: var(--clown-rouge) !important;
    color: #ffffff !important;
}

.btn-outline-warning {
    border: 1px solid var(--clown-orange) !important;
    background: transparent !important;
    color: var(--clown-orange) !important;
    border-radius: var(--clown-radius-md);
    transition: var(--clown-transition);
}

.btn-outline-warning:hover {
    background: var(--clown-orange) !important;
    color: #ffffff !important;
}

/* Interrupteurs (Form Switch) */
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.6em;
    margin-bottom: 0.125rem;
}

.form-check .form-check-input {
    float: left;
    margin-left: -1.6em;
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
    vertical-align: top;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--clown-bordure);
    border-radius: 0.25em;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--clown-orange);
    border-color: var(--clown-orange);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-switch {
    padding-left: 2.8em;
}

.form-switch .form-check-input {
    width: 2.2em;
    height: 1.2em;
    margin-left: -2.8em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-color: var(--clown-orange);
    border-color: var(--clown-orange);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

/* Validation des formulaires */
.is-invalid {
    border-color: var(--clown-rouge) !important;
}

.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

.is-valid {
    border-color: #10b981 !important;
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clown-rouge);
}

/* Utilitaires de positionnement */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.top-0 { top: 0 !important; }
.start-50 { left: 50% !important; }
.translate-middle { transform: translate(-50%, -50%) !important; }
/* .sr-only : ancien nom utilisé par SpinnerButton (sans cette règle, « Chargement... » s'affichait à côté du spinner). */
.visually-hidden, .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Cartes de méthode de paiement */
[id^="payment-"] {
    transition: var(--clown-transition);
    cursor: pointer;
    border: 2px solid transparent !important;
}

[id^="payment-"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--clown-orange) !important;
}

.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }

/* Styles d'impression pour l'export PDF du catalogue */
@media print {
    header, footer, nav, .btn, #filtre-box, #clown-mobile-drawer, #clown-cookie-consent, .range-slider {
        display: none !important;
    }
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .catalogue-banner {
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        page-break-after: avoid;
    }
    .card-hover {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }
}

/* Boutons de connexion sociale */
.btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-weight: 600;
    border-radius: var(--clown-radius-md);
    transition: var(--clown-transition);
    text-decoration: none;
}

.btn-google {
    background: #ffffff !important;
    border: 1px solid #dadce0 !important;
    color: #3c4043 !important;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);
}

.btn-google:hover {
    background: #f8fafd !important;
    border-color: #c2c7d0 !important;
    color: #202124 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(60, 64, 67, 0.15) !important;
}

.social-login-separator {
    position: relative;
    border-bottom: 1px solid var(--clown-bordure);
    line-height: 0.1em;
    margin: 1.5rem 0;
}

.social-login-separator span {
    background: #ffffff;
}

.text-indigo {
    color: #5865F2 !important;
}

.text-primary {
    color: #1877F2 !important;
}

/* --------------------------------------------------------------------------
   15. Tableaux, Pagination & Éléments FAQ (Compte & Vitrine)
   -------------------------------------------------------------------------- */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--clown-texte);
    vertical-align: top;
    border-collapse: collapse;
}

.table th, .table td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--clown-bordure);
    text-align: left;
}

.table th {
    font-weight: 700;
    color: var(--clown-texte-sombre);
    background-color: var(--clown-fond);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 107, 107, 0.05);
}

/* Pagination sans Bootstrap */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: var(--clown-radius-md);
    gap: 0.25rem;
    align-items: center;
}

.pagination-sm .page-link {
    padding: 0.35rem 0.65rem;
    font-size: 0.875rem;
}

.page-item .page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.85rem;
    color: var(--clown-orange);
    background-color: var(--clown-surface);
    border: 1px solid var(--clown-bordure);
    border-radius: var(--clown-radius-sm);
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    transition: var(--clown-transition);
}

.page-item .page-link:hover:not(:disabled) {
    color: #ffffff;
    background-color: var(--clown-orange);
    border-color: var(--clown-orange);
}

.page-item.active .page-link {
    z-index: 3;
    color: #ffffff !important;
    background-color: var(--clown-orange) !important;
    border-color: var(--clown-orange) !important;
}

.page-item.disabled .page-link,
.page-item button:disabled {
    color: #a0aec0 !important;
    pointer-events: none;
    background-color: #f7fafc !important;
    border-color: var(--clown-bordure) !important;
    cursor: not-allowed;
}

/* FAQ accordéon natif */
.faq-item {
    background: var(--clown-surface);
    transition: var(--clown-transition);
}

.faq-item[open] {
    border-color: var(--clown-orange) !important;
    box-shadow: var(--clown-ombre-sm);
}

.faq-item summary {
    user-select: none;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    float: right;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--clown-orange);
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
    content: "−";
    color: var(--clown-rose);
}

/* --------------------------------------------------------------------------
   16. Accessibilité (Skip-link) & Panier Sticky Responsive
   -------------------------------------------------------------------------- */
.clown-skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--clown-orange-degrade);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--clown-radius-pilule);
    z-index: 99999;
    box-shadow: var(--clown-ombre-lg);
    text-decoration: none;
    transition: top 0.2s ease-in-out;
}

.clown-skip-link:focus {
    top: 1rem;
    outline: 3px solid #000;
    outline-offset: 2px;
}

.clown-sticky-cart-wrap {
    position: fixed;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    z-index: 1030;
}

/* Téléphone et petite tablette : bulle masquée. En bas à gauche, elle recouvrait titres, prix et champs au défilement, et l'icône panier
   de l'en-tête (collant, avec le même badge) reste toujours visible. Revue responsive du 05/10/2026. */
@media (max-width: 768px) {
    .clown-sticky-cart-wrap {
        display: none;
    }
}

/* Le choix des cookies reste accessible, même quand le chat est chargé. */
body:has(.clown-rgpd-banner) div:has(> iframe[title="Widget de chat"]),
body:has(.clown-rgpd-banner) div:has(> iframe[title="Visiter tawk.to"]) {
    display: none !important;
}
body:has(.clown-rgpd-banner) .clown-sticky-cart-wrap {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   17. Impression & Export Catalogue (@media print)
   -------------------------------------------------------------------------- */
@media print {
    /* Masquage des éléments de navigation, widgets et bandeaux interactifs */
    .clown-header-haut,
    .clown-topbar,
    .clown-navbar,
    .clown-footer,
    .clown-sticky-cart-wrap,
    .clown-skip-link,
    .consentement-overlay,
    .btn,
    .modal,
    .modal-backdrop,
    #recherche-container,
    .pagination,
    nav {
        display: none !important;
    }

    /* Réinitialisation de la mise en page pour l'impression A4 */
    body {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 10pt;
    }

    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .catalogue-banner {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        background: #fff !important;
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Éviter de couper une fiche produit au milieu d'une page */
    article,
    .card,
    .catalogue-banner,
    .row {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Suppression des ombres pour un rendu propre à l'encre */
    .shadow,
    .shadow-sm,
    .shadow-lg {
        box-shadow: none !important;
    }
}

/* --------------------------------------------------------------------------
   18. Présentation du catalogue et de l'accueil
   -------------------------------------------------------------------------- */
.clown-produit-carte {
    /* Bordure/ombre déplacées dans l'autre règle .clown-produit-carte (section 19, ~ligne 2840) : elles y
       sont redéfinies de toute façon (border:0, ombre sans décalage), les garder ici en double ne servait
       qu'à créer la confusion notée depuis plusieurs sessions. Le reste (mise en page) reste ici. */
    display: flex; flex-direction: column; height: 100%; min-width: 0;
    gap: .8rem; padding: 1rem; background: #fff;
}
/* Enveloppe de la carte dans les grilles (boutique, produits associés) : toute la hauteur de la colonne, l'écart
   vertical passe en marge intérieure. Avant, une simple « mb-3 » : la carte gardait sa hauteur naturelle et les
   boutons ne tombaient pas au même niveau dans une rangée (pastille de location, nom sur 3 lignes). */
.clown-produit-cellule { height: 100%; padding-bottom: 1rem; }
.clown-produit-carte img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.clown-produit-nom { min-height: 3em; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; text-align: left; }
/* Hauteur réservée pour 2 lignes (prix + éventuelle ligne « ou X € en location ») : sans ça, les cartes
   sans location avaient un prix plus haut et un bouton qui ne tombait pas à la même hauteur d'une carte à
   l'autre dans la même rangée. */
.clown-produit-prix { min-height: 2.5rem; color: var(--clown-rose-texte); font-weight: 750; font-size: 1.1rem; white-space: normal; text-align: left; }
/* Produit achetable ET louable (étiquette « Aussi en location ») : le prix de vente restait seul affiché,
   sans aucune mention de la location pourtant proposée. Deuxième ligne avec le prix week-end.
   Produit UNIQUEMENT en location (étiquette « Location ») : .clown-produit-prix--location sur le prix
   principal lui-même (il n'y a pas de vente du tout, donc pas de rose).
   Les deux en pastille à fond orange clair (comme les étiquettes de la carte) plutôt qu'un simple texte
   coloré à côté du rose : un simple changement de teinte entre deux couleurs sombres ne se voyait pas assez
   (retour utilisateur), une forme différente (pastille) se distingue même sans bien percevoir la couleur. */
.clown-produit-prix-location, .clown-produit-prix--location {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    background: #fff1e0;
    font-weight: 700;
    color: var(--clown-orange-texte);
}
.clown-produit-prix-location { margin-top: 0.3rem; font-size: 0.78rem; }
.clown-produit-prix--location { font-size: 0.95rem; }
.clown-produit-action { margin-top: auto; }
.clown-produit-action .btn { width: 100%; padding: .65rem .4rem; }
/* Petits téléphones : « Voir le produit » passait sur deux lignes dans les cartes à 2 colonnes (cartes très allongées). */
@media (max-width: 399.98px) {
    .clown-produit-action .btn { white-space: nowrap; font-size: 0.85rem; gap: 0.35rem; padding-inline: 0.3rem; }
    .clown-produit-carte .clown-produit-action .btn svg { width: 15px; height: 15px; }
}
/* ----------------------------------------------------------------------------
   Accueil d'apres la maquette : banniere, univers, selections, reassurance
   ---------------------------------------------------------------------------- */
.clown-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
    align-items: center;
    min-height: clamp(360px, 33vw, 460px);
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3.5rem);
    border-radius: 28px;
    overflow: hidden;
    /* Petits confettis dispersés (SVG), halo clair en haut à gauche, dégradé jaune de la maquette. */
    background:
        url("../img/maquette/confetti-hero.svg") center / cover no-repeat,
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.85) 0, transparent 40%),
        linear-gradient(115deg, #fff7d6 0%, #ffeaa8 50%, #ffd873 100%);
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 16px 28px -14px rgba(120, 70, 0, 0.32);
}
.clown-hero-texte { position: relative; z-index: 2; min-width: 0; }
.clown-hero-surtitre { margin: 0 0 0.6rem; color: var(--clown-rose-vif); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.clown-hero h1 { margin: 0 0 1rem; font-size: clamp(1.9rem, 3.5vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; color: #1b1f3b; }
.clown-hero h1 span { display: block; color: var(--clown-rose-vif); }
.clown-hero-br { display: inline; }
.clown-hero-intro { max-width: 34rem; margin: 0 0 1.4rem; font-size: 1.05rem; color: #33314a; }
.clown-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.clown-hero-actions .btn.btn-pink { padding: 0.85rem 1.6rem !important; }
.clown-btn-blanc {
    padding: 0.85rem 1.6rem;
    background: #ffffff;
    color: var(--clown-texte-sombre) !important;
    border: 1px solid #e6dcc4;
    border-radius: 9999px;
    font-weight: 700;
}
.clown-btn-blanc:hover { background: #fff7e8; }
.clown-hero-atouts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.88rem; font-weight: 600; color: #3c3a55; }
.clown-hero-atouts i { margin-right: 0.35rem; color: var(--clown-rose-vif); }
.clown-hero-atouts li:nth-child(2) i { color: #2563eb; }
/* Personnages : ils occupent la moitié droite sur toute la hauteur et débordent du cadre (rognés en bas comme la maquette). */
.clown-hero-visuel { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; pointer-events: none; z-index: 1; }
.clown-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 18%; }
.clown-hero-legende { position: absolute; left: -17%; top: 3%; width: 26%; margin: 0; font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-weight: 600; font-size: clamp(1.3rem, 2.1vw, 1.95rem); line-height: 1.02; text-align: center; color: var(--clown-rose-vif); transform: rotate(-9deg); }
.clown-hero-coeur { position: absolute; left: 1.5%; top: 29%; width: clamp(20px, 2.2vw, 30px); color: var(--clown-rose-vif); transform: rotate(8deg); }
.clown-hero-sticker { position: absolute; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); }
.clown-hero-sticker--sourires { right: 1%; bottom: 6%; width: 22%; transform: rotate(5deg); }
.clown-hero-disco { position: absolute; top: -4px; right: 10px; z-index: 2; width: clamp(64px, 8vw, 112px); height: auto; pointer-events: none; }
/* Mobile et petite tablette : comme la maquette, texte à gauche et personnages à droite dans un bandeau compact,
   un seul bouton (la location reste dans les bannières plus bas), sans les atouts ni la bulle. */
@media (max-width: 767.98px) {
    .clown-hero { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); min-height: 330px; padding: 1.25rem 0.5rem 1.25rem 1.1rem; border-radius: 22px; }
    .clown-hero-br { display: none; }
    .clown-hero-surtitre { margin-bottom: 0.4rem; font-size: 0.66rem; }
    .clown-hero h1 { margin-bottom: 0.6rem; font-size: clamp(1.25rem, 5.5vw, 2rem); }
    .clown-hero-intro { margin-bottom: 0.9rem; font-size: 0.82rem; line-height: 1.35; }
    .clown-hero-actions { margin-bottom: 0; }
    .clown-hero-actions .clown-btn-blanc, .clown-hero-atouts, .clown-hero-sticker--sourires { display: none; }
    .clown-hero-actions .btn.btn-pink { padding: 0.65rem 0.95rem !important; font-size: 0.8rem; }
    .clown-hero-visuel { width: 50%; }
    .clown-hero-photo { object-position: 74% 32%; }
    .clown-hero-legende { left: 22%; top: 1%; width: 40%; font-size: 1rem; }
    .clown-hero-coeur { left: -6%; top: 30%; }
    .clown-hero-disco { width: 54px; }
}

/* Confettis de la planche de la maquette : purement decoratifs (aria-hidden, sans clic), ranges derriere le contenu. */
.clown-confetti { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(120, 70, 0, 0.15)); }
.clown-section-decor { position: relative; }
.clown-confetti--titre { top: -14px; right: 14px; width: 96px; transform: rotate(-6deg); }
.clown-magasin { position: relative; }
.clown-confetti--carte { top: -34px; right: 12px; width: 110px; transform: rotate(8deg); z-index: 2; }
@media (max-width: 767.98px) {
    .clown-confetti--titre { width: 70px; }
    .clown-confetti--carte { width: 76px; top: -26px; right: 14px; }
}

/* Neuf pastilles d'univers dans un panneau blanc */
/* Ces cartes ont leur propre padding, qui remplace celui du conteneur : sans cette largeur, leur bord dépasse de 1 rem
   celui de l'en-tête et des autres blocs. */
.container.clown-hero-carrousel, .container.clown-recherche, .container.clown-magasin { width: calc(100% - 2rem); max-width: calc(1240px - 2rem); }
.container.clown-hero-carrousel { padding-inline: 0; }

/* Carrousel d'accueil : le hero puis les Canva actifs. La piste défile en scroll-snap ; sa marge de 2 rem en bas laisse voir
   l'ombre des cartes malgré overflow ; sa hauteur suit la diapositive affichée (clown-site.js) car un Canva est bien plus bas que le hero. */
.clown-hero-carrousel { position: relative; margin-top: 1rem; }
.clown-hero-piste { box-sizing: content-box; display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 0 2rem; margin: -6px 0 -2rem; transition: height 0.3s ease; }
.clown-hero-piste::-webkit-scrollbar { display: none; }
.clown-hero-diapo { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.clown-canva { position: relative; overflow: hidden; border-radius: 28px; background: #ffffff; border: 2px solid rgba(255, 255, 255, 0.8); box-shadow: 0 16px 28px -14px rgba(120, 70, 0, 0.32); }
.clown-canva-cadre { position: relative; height: 0; padding-top: 27.0833%; }
.clown-canva-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clown-canva-image { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.clown-canva-appel { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 10; text-align: center; }
.clown-canva-appel h2 { display: none; margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 800; color: #ffffff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
@media (min-width: 768px) { .clown-canva-appel h2 { display: block; } }
@media (max-width: 767.98px) {
    .clown-canva { border-radius: 22px; }
    .clown-canva-appel { position: static; padding: 0.6rem 0.75rem 0.7rem; }
    .clown-canva-appel .btn { padding: 0.45rem 1rem !important; font-size: 0.8rem; }
}
.clown-hero-points { display: flex; align-items: center; justify-content: center; margin-top: 0.7rem; }
.clown-hero-point { width: 28px; height: 28px; padding: 9px; border: 0; border-radius: 9999px; background: #ffffff; background-clip: content-box; cursor: pointer; transition: width 0.25s ease, background-color 0.25s ease; }
.clown-hero-point.actif { width: 42px; background-color: var(--clown-rose-vif); }
.clown-hero-pause { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 0.6rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: #6b4a00; cursor: pointer; }
.clown-hero-pause svg { width: 12px; height: 12px; }
.clown-hero-pause .clown-icone-lecture, .clown-hero-pause[aria-pressed="true"] .clown-icone-pause { display: none; }
.clown-hero-pause[aria-pressed="true"] .clown-icone-lecture { display: inline; }
.clown-univers { margin-top: 1.25rem; }
.clown-univers-liste {
    list-style: none;
    margin: 0;
    padding: 1.25rem 1rem;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 0.75rem;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 34px rgba(120, 70, 0, 0.12);
}
.clown-univers-liste a { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; text-decoration: none; transition: transform 0.2s ease; }
.clown-univers-liste a:hover { transform: translateY(-4px); }
.clown-univers-liste img { width: 100%; max-width: 104px; height: auto; aspect-ratio: 1; filter: drop-shadow(0 4px 8px rgba(60, 20, 90, 0.12)); }
.clown-univers-nom { font-weight: 800; font-size: 0.92rem; line-height: 1.15; }
.clown-univers-nom--orange { color: #d9480f; }
.clown-univers-nom--rose { color: #d6136f; }
.clown-univers-nom--violet { color: #6d28d9; }
.clown-univers-nom--turquoise { color: #0b7f8a; }
.clown-univers-nom--bleu { color: #4338ca; }
@media (min-width: 576px) and (max-width: 991.98px) {
    .clown-univers-liste { display: flex; flex-wrap: wrap; justify-content: center; }
    .clown-univers-liste li { flex: 0 0 calc((100% - 3rem) / 5); }
}
@media (max-width: 575.98px) { .clown-univers-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 1rem 0.5rem; } .clown-univers-nom { font-size: 0.8rem; } }

/* Selections du moment (visuels avec texte integre) */
/* Les 4 images ont la meme carte (1100 x 312) au centre d une marge transparente de 36 px / 50 px : les cartes restent alignees, ballons et autocollants debordent. */
.clown-bannieres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; margin-top: 2rem; overflow-x: clip; }
.clown-banniere { display: block; border-radius: 22px; transition: transform 0.25s ease; }
.clown-banniere img { display: block; width: 106.55%; max-width: none; height: auto; margin: -4.55% -3.27%; filter: drop-shadow(0 10px 18px rgba(80, 40, 0, 0.18)); }
.clown-banniere:hover { transform: translateY(-4px) scale(1.01); }
.clown-bannieres > .clown-banniere:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 0.5rem); justify-self: center; }
@media (max-width: 767.98px) {
    .clown-bannieres { grid-template-columns: minmax(0, 1fr); }
    .clown-bannieres > .clown-banniere:last-child:nth-child(odd) { width: auto; }
}

/* Bandeau de reassurance */
.clown-reassurance { margin-top: 2rem; }
.clown-reassurance-liste {
    list-style: none;
    margin: 0;
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 8px 28px rgba(120, 70, 0, 0.1);
}
.clown-reassurance-liste li { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.clown-reassurance-liste img { width: 56px; height: 56px; flex-shrink: 0; }
.clown-reassurance-liste strong { display: block; font-size: 0.95rem; color: var(--clown-texte-sombre); }
.clown-reassurance-liste span { font-size: 0.82rem; line-height: 1.3; color: var(--clown-texte-leger); }
.clown-reassurance-liste a { color: inherit; font-weight: 700; }
@media (max-width: 1199.98px) { .clown-reassurance-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .clown-reassurance-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .clown-reassurance-liste { grid-template-columns: minmax(0, 1fr); } }
.clown-recherche { padding: 1.25rem; background: #fff; border: 1px solid #eadfe2; border-radius: 16px; box-shadow: 0 6px 20px rgb(48 30 40 / 4%); margin-block: 1.5rem; }
.clown-recherche input { min-height: 48px; }
/* Section boutique de l'accueil : carte blanche, lisere orange, photo arrondie, infos en puces. */
.clown-magasin { padding: clamp(1rem, 2.2vw, 1.6rem) !important; border: 1px solid #f1e3c8 !important; }
/* Bloc boutique de la maquette : facade | texte | photos en polaroids, dans une seule carte. */
.clown-magasin-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.95fr); gap: 1.75rem; align-items: center; }
.clown-magasin-grille--sans-photos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.clown-magasin-facade { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 26px rgba(120, 70, 0, 0.16); }
.clown-btn-contour { padding: 0.6rem 1.4rem; background: #ffffff; color: #c2410c !important; border: 2px solid #f9c9a0; border-radius: 9999px; font-weight: 800; }
.clown-btn-contour:hover { background: #fff4eb; border-color: var(--clown-orange); }
@media (max-width: 991.98px) {
    .clown-magasin-grille, .clown-magasin-grille--sans-photos { grid-template-columns: minmax(0, 1fr); }
    .clown-magasin-facade { max-width: 560px; margin-inline: auto; }
}
.clown-magasin .clown-magasin-surtitre { color: var(--clown-rose-texte); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 800; }
.clown-magasin h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; }
.clown-magasin-infos { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.clown-magasin-infos li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.clown-magasin-infos i { width: 34px; height: 34px; border-radius: 50%; background: #fff4eb; color: var(--clown-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
/* Police manuscrite des legendes (Caveat, licence OFL, servie localement : voir fonts/LICENCE-Caveat.txt) */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/caveat-600-latin.woff2") format("woff2"); }

/* Polaroids : boite creme, trois photos qui se chevauchent, legendes manuscrites roses */
.clown-polaroids {
    position: relative;
    min-height: 300px;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(160deg, #fff3d1, #ffe8b0);
}
.clown-legende { position: absolute; margin: 0; font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-weight: 600; line-height: 1.05; color: var(--clown-rose-vif); }
.clown-legende--haut { top: 8%; left: 6%; width: 33%; font-size: 1.7rem; transform: rotate(-8deg); }
.clown-legende--bas { bottom: 3%; right: 4%; width: 30%; font-size: 1.25rem; text-align: right; transform: rotate(-4deg); }
.clown-legende-sourire { position: absolute; left: 7%; top: 33%; width: 56px; color: var(--clown-rose-vif); transform: rotate(-8deg); }
.clown-polaroid { position: absolute; margin: 0; padding: 6px 6px 22px; background: #ffffff; box-shadow: 0 8px 20px rgba(60, 30, 0, 0.25); transition: transform 0.25s ease; }
.clown-polaroid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f4ecdc; }
.clown-polaroid--1 { top: 6%; right: 4%; width: 58%; transform: rotate(3deg); }
.clown-polaroid--2 { bottom: 9%; left: 8%; width: 52%; transform: rotate(-4deg); }
.clown-polaroid--3 { top: 37%; right: 2%; width: 48%; transform: rotate(5deg); }
.clown-polaroid:hover { transform: rotate(0) scale(1.06); z-index: 5; }
@media (max-width: 991.98px) { .clown-polaroids { min-height: 360px; max-width: 460px; width: 100%; margin-inline: auto; } }
.clown-tuile-univers { height: 100%; border: 1px solid #eee2e6; }
.clown-tuile-univers img { width: auto; max-width: 100%; height: 170px; }
.clown-mobile-drawer { max-height: calc(100dvh - 120px); overflow-y: auto; }
:focus-visible { outline: 3px solid #7243b5; outline-offset: 4px; }
#main-content { scroll-margin-top: 140px; }

/* Règles encore utilisées de l'ancienne feuille, sans ses styles concurrents. */
.apercu { max-height: 50px; max-width: 50px; }
.price-current { font-weight: 700; color: var(--clown-succes); }
.alert-message { color: var(--clown-danger); font-size: .9rem; margin-top: .5rem; }
.menuTree { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.menuTree ul { position: absolute; top: 0; padding: 0; margin: 0; }
.menuTree > ul { position: relative; }
.menuTree li { padding: 3px 5px; list-style: none; }
.menuTree li a { display: inline-flex; max-width: 100%; overflow-wrap: anywhere; }
.menuTree li i { margin-right: 4px; padding: 2px 4px; border-radius: 20px; background: #f0e8eb; }
.fixed-element { position: fixed; bottom: 5%; right: 5%; width: min(90%, 360px); z-index: 1030; }
#updateMessagesContainer { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1050; display: flex; flex-direction: column-reverse; gap: 10px; width: min(90vw, 600px); }
.update-message { opacity: 0; border: 2px solid var(--clown-succes); border-radius: 10px; }
.update-message.show { opacity: 1; }

@media (max-width: 575.98px) {
    .clown-produit-carte { padding: .6rem; gap: .6rem; border-radius: 12px; }
    .clown-produit-nom { font-size: .875rem; }
    .clown-produit-prix { font-size: 1rem; }
    .clown-tuile-univers { padding: .75rem; }
    .clown-tuile-univers img { height: 145px; }
    .clown-carrousel-fleche { display: none; }
    .clown-brand-logo { width: 190px; max-height: 52px; }
    .clown-entete-ligne { gap: 0.25rem; }
    .clown-recherche { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
    .clown-header, .clown-rgpd-banner, .clown-rgpd-overlay, .clown-recherche { display: none !important; }
    .clown-produit-carte { box-shadow: none; break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   19. Page boutique d'après la maquette : bandeau, barre d'outils, cartes
   Favoris et lettre d'information de la maquette : non repris (décision du 19/09/2026).
   -------------------------------------------------------------------------- */
.clown-boutique { padding-top: 1rem; }
.clown-boutique .container { width: 100%; max-width: none; padding-inline: 0; }

/* Bandeau de page : mêmes confettis et dégradé jaune que le hero de l'accueil */
.clown-boutique-tete {
    position: relative;
    overflow: hidden;
    /* Marge haut/bas augmentée (1rem → 1.75rem en haut) : le fil d'Ariane, collé au bord, tombait dans la
       partie la plus pâle du dégradé (#fff7d6, presque blanc) et donnait l'impression d'une bande grise
       séparée plutôt que du même bandeau jaune. */
    padding: 1.75rem 1.5rem 2rem;
    border-radius: 28px;
    text-align: center;
    background:
        url("../img/maquette/confetti-hero.svg") center / cover no-repeat,
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.85) 0, transparent 40%),
        linear-gradient(115deg, #fff7d6 0%, #ffeaa8 50%, #ffd873 100%);
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 16px 28px -14px rgba(120, 70, 0, 0.32);
}
/* Téléphone et petite tablette : le SVG de confettis, étiré (« cover ») sur un bandeau étroit, posait ses morceaux sur
   le sous-titre (« accessoires », « occasions »). Dégradé seul, sans confettis (05/10/2026). */
@media (max-width: 768px) {
    .clown-boutique-tete {
        background:
            radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.85) 0, transparent 40%),
            linear-gradient(115deg, #fff7d6 0%, #ffeaa8 50%, #ffd873 100%);
    }
}
.clown-boutique-tete nav { text-align: left; }
/* Fond/marge déjà neutres par défaut (bg-light retiré de Previous.razor) : ne reste que la taille, plus
   discrète dans ce bandeau. */
/* Transparent ici (contrairement au fond jaune uni par défaut du fil d'Ariane, .breadcrumb) : déjà dans le
   bandeau jaune de la page boutique, une deuxième pastille jaune par-dessus faisait double emploi. */
.clown-boutique-tete .breadcrumb { margin: 0; padding: 0; background: transparent; border-radius: 0; font-size: 0.85rem; }
.clown-boutique-titre { margin-top: 0.4rem !important; padding: 0 !important; }
.clown-boutique-titre .main-title { margin: 0 0 0.6rem; font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 800; color: #1b1f3b; }
.clown-boutique-titre .sub-title { max-width: 60rem; margin-inline: auto; font-size: 0.95rem; font-weight: 500; line-height: 1.5; color: #4a4560; }
.clown-pastilles a {
    display: inline-block;
    margin: 0.15rem 0.1rem;
    padding: 0.2rem 0.85rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.88);
    color: #7a2e00;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(120, 70, 0, 0.12);
    transition: var(--clown-transition);
}
.clown-pastilles a:hover { background: #ffffff; color: #c2410c; transform: translateY(-1px); }
.clown-boutique-note { display: none; margin: 0; font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-weight: 600; font-size: 1.7rem; line-height: 1.05; color: var(--clown-rose-vif); text-align: center; }
@media (min-width: 1200px) {
    .clown-boutique-note { display: block; position: absolute; top: 1.4rem; right: 2rem; width: 10rem; transform: rotate(-7deg); }
}

/* Barre d'outils : bouton des catégories, recherche dans la sélection, titre de la liste, tri */
.clown-boutique-outils {
    display: grid;
    /* Boutons en premier, alignés à gauche avec le fil d'Ariane au-dessus (même schéma que la fiche
       produit, où le bouton catégories est flush à gauche) : le titre ne peut plus partager cette ligne
       sans le décaler, il repasse donc sur sa propre ligne, avec le tri. Les étiquettes de recherche
       restent sur une ligne à part : vide la plupart du temps, elle ne prend alors aucune hauteur. */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cat cat" "rech rech" "titre tri";
    gap: 1rem;
    align-items: center;
    margin-top: 1.25rem;
    /* Même retrait que .clown-boutique-tete (1.5rem) : le bandeau jaune a son propre padding, cette barre
       est directement dans le container (padding-inline: 0) donc décalée de 24px sans ce réglage. */
    padding-inline: 1.5rem;
}
.clown-boutique-outils > .clown-boutique-boutons { grid-area: cat; display: flex; gap: 0.75rem; justify-self: start; }
.clown-boutique-boutons .clown-barre-categories { margin: 0; padding: 0; }
/* Réinitialisation complète (pas seulement margin/padding) : la règle de base .clown-recherche (ligne ~2670,
   utilisée sur l'accueil et la fiche produit) pose aussi une bordure, un fond et une ombre sur les 4 côtés ;
   sans cela, la zone – vide la plupart du temps depuis que la recherche par mot est dans le tiroir – restait
   visible comme un simple trait fin (bordure de 1px sans contenu). */
.clown-boutique-outils > .clown-recherche { grid-area: rech; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.clown-boutique-outils > .clown-boutique-liste-titre { grid-area: titre; margin: 0; justify-self: start; text-align: left; }
.clown-boutique-liste-titre small { font-size: 0.9rem; font-weight: 600; color: var(--clown-texte-leger); }
.clown-boutique-outils > .clown-tri { grid-area: tri; }
.clown-boutique-boutons .btn { padding: 0.6rem 1.35rem !important; box-shadow: 0 6px 16px -8px rgba(253, 96, 68, 0.6); }
.clown-cat-court { display: none; }

/* Tri en pilule */
.clown-boutique-outils > .clown-tri { flex-wrap: nowrap; }
.clown-tri label { flex: none; white-space: nowrap; }
.clown-tri .form-select { min-width: 190px; border-color: #ecdfd0; border-radius: 9999px; background-color: #ffffff; }

/* Cartes produit : étiquettes en haut à gauche de la photo, bouton avec chariot */
/* Carte : pas de bordure (une bordure crème sur le fond jaune faisait un double trait), une ombre douce à la place.
   Au survol ou au focus clavier : léger soulèvement, une fine bordure rose apparaît (box-shadow, pas un élément
   séparé) et la photo grossit un peu. Versions précédentes essayées et abandonnées : un anneau dégradé multicolore
   posé derrière la carte (::before) — trop voyant pour l'utilisateur (« trop agressif ») et laissait par endroits un
   fragment visible après le survol (un pseudo-élément en z-index négatif + isolation + transform anime moins
   proprement que le survol simple de la carte elle-même sur certains rendus). Un box-shadow, propriété unique de la
   carte, n'a pas ce risque : rien à laisser derrière. */
.clown-produit-carte {
    position: relative;
    border: 0;
    border-radius: 20px;
    /* Ombre déjà présente au repos (pas seulement au survol) : elle avait elle aussi un décalage vers le bas
       (« 0 10px »), donc ce « cadre » qui semble déborder était visible sur TOUTES les cartes, tout le temps,
       pas seulement celle survolée. Sans décalage désormais, comme celle du survol. */
    box-shadow: 0 1px 2px rgba(120, 70, 0, 0.06), 0 0 14px rgba(120, 70, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.clown-produit-carte:hover, .clown-produit-carte:focus-within {
    transform: translateY(-4px);
    /* Ombre SANS décalage vertical (0 0, pas « 0 16px ») : une ombre décalée vers le bas s'étale toujours davantage
       en dessous qu'au-dessus (c'est ce qui donnait cet aspect de débordement, revu trois fois de suite). Une ombre
       purement centrée (flou seul) entoure la carte de façon égale, comme la bordure. */
    box-shadow: 0 0 0 3px #ff85ab, 0 0 18px rgba(120, 70, 0, 0.28);
}
.clown-produit-carte:hover .clown-produit-prix { color: #e11d74; }
.clown-produit-carte:hover .clown-produit-prix-location, .clown-produit-carte:hover .clown-produit-prix--location { color: #9a3412; }
.clown-produit-carte:hover .clown-produit-nom a { color: #c2410c; }
.clown-produit-carte > .position-relative, .clown-produit-carte > a:first-child { display: block; overflow: hidden; border-radius: 14px; }
.clown-produit-carte > .position-relative { display: flex; }
.clown-produit-carte img { transition: transform 0.35s ease; }
.clown-apercu {
    position: absolute;
    left: 50%;
    bottom: 0.7rem;
    padding: 0.4rem 1.1rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.96);
    color: #c2410c;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 8px 18px -8px rgba(120, 70, 0, 0.5);
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s ease;
}
@media (hover: hover) {
    .clown-produit-carte:hover .clown-apercu, .clown-produit-carte:focus-within .clown-apercu { opacity: 1; transform: translate(-50%, 0); }
}
.clown-produit-carte:hover img { transform: scale(1.04); }
.clown-produit-etiquettes { position: absolute; top: 0.1rem; left: 0.1rem; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.3rem; max-width: calc(100% - 0.2rem); pointer-events: none; }
.clown-etiquette { padding: 0.1rem 0.6rem; border-radius: 9px; font-size: 0.72rem; font-weight: 800; line-height: 1.6; color: #ffffff; }
.clown-etiquette--nouveau { background: #10b981; }
.clown-etiquette--promo { background: #e11d48; }
.clown-etiquette--location { background: #f59e0b; color: #422006; }
.clown-etiquette--indispo { background: #64748b; }
.clown-produit-action .btn svg { width: 18px; height: 18px; flex: none; }
.clown-charger-plus { padding: 0.75rem 2rem; box-shadow: 0 8px 20px -10px rgba(255, 9, 153, 0.7); }
.clown-charger-plus svg { width: 18px; height: 18px; }

/* Tiroir des catégories : coins arrondis, un peu plus large */
.offcanvas-start { top: 0; left: 0; bottom: 0; border-right: 1px solid var(--clown-bordure); transform: translateX(-100%); box-shadow: var(--clown-ombre-lg); }
#offcanvasMenu { width: min(340px, 92vw); border-radius: 0 24px 24px 0; overflow: hidden; }
#offcanvasMenu .menuTree li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-block: 5px; }
#offcanvasMenu .menuTree li > a { flex: 1 1 auto; }
#offcanvasMenu .menuTree li > i.icon-right-open { order: 2; flex: none; margin: 0; cursor: pointer; }
#offcanvasMenu .offcanvas-header { background: #fff7d6; }
#offcanvasMenu .offcanvas-title { font-weight: 800; }

/* Tiroir des filtres (à droite) : mêmes codes que le tiroir des catégories, sections empilées sur une colonne. */
#offcanvasFiltres { width: min(400px, 92vw); border-radius: 24px 0 0 24px; overflow-y: auto; }
#offcanvasFiltres .offcanvas-header { background: #fff7d6; }
#offcanvasFiltres .offcanvas-title { font-weight: 800; }
/* #filtre-box (id) ajouté au sélecteur : la carte crème de la section 20 (#filtre-box.clown-filtres, même
   spécificité, plus bas dans le fichier) regagnait la main par ordre de source et laissait un « cadre »
   visible à l'intérieur du tiroir malgré cette remise à zéro. */
#offcanvasFiltres #filtre-box.clown-filtres { grid-template-columns: 1fr; margin-top: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
#offcanvasFiltres .clown-filtres-prix { grid-column: auto; }
#offcanvasFiltres .clown-filtres-effacer { justify-self: stretch; text-align: center; }

/* Tablette : pas de bouton géant, recherche pleine largeur */
@media (max-width: 991.98px) {
    .clown-boutique-tete { padding-inline: 1rem; }
}

/* Mobile : catégories, filtres et tri sur une ligne (comme la maquette) ; la recherche se fait depuis l'en-tête */
@media (max-width: 767.98px) {
    .clown-boutique { padding-top: 0.5rem; }
    .clown-boutique-tete { padding: 1.1rem 0.9rem 1.25rem; border-radius: 22px; }
    .clown-boutique-outils { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-inline: 0.9rem; }
    .clown-boutique-outils > .clown-boutique-boutons { flex: 1 1 100%; order: 0; }
    .clown-boutique-boutons .btn { flex: 1 1 0; width: auto; padding: 0.6rem 0.5rem !important; }
    .clown-boutique-outils > .clown-recherche { order: 1; flex: 0 0 100%; margin: 0; }
    .clown-boutique-outils > .clown-tri { flex: 1.2 1 0; order: 2; }
    .clown-boutique-outils > .clown-tri .form-select { min-width: 0; width: 100%; }
    .clown-boutique-outils > .clown-boutique-liste-titre { flex: 0 0 100%; order: 3; margin-top: 0.5rem; }
    .clown-cat-long { display: none; }
    .clown-cat-court { display: inline; }
    .clown-tri-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* Sous-catégories : une seule ligne qui défile, le bandeau reste compact */
    .clown-boutique-titre .sub-title { max-width: none; }
    .clown-pastilles { display: flex; flex-wrap: nowrap; gap: 0.35rem; margin-inline: -0.9rem; padding: 0 0.9rem 0.3rem; overflow-x: auto; text-align: left; scrollbar-width: none; }
    .clown-pastilles::-webkit-scrollbar { display: none; }
    .clown-pastilles a { flex: none; margin: 0; }
}

/* --------------------------------------------------------------------------
   20. Boutons et filtres d'après la maquette (boutique) : « Voir le produit » orange vers rose, panneau de filtres
   par sections avec cases roses, bascule grille / liste.
   -------------------------------------------------------------------------- */
/* Ombre resserrée : la précédente (flou 16, décalage 8) débordait visiblement du cadre arrondi de la carte quand on
   survolait celle-ci (le bouton n'a pas de survol propre à ce moment-là, seule son ombre au repos est visible) ;
   celle-ci reste bien à l'intérieur du padding de la carte (1 rem). */
.clown-produit-action .btn-orange { background: linear-gradient(90deg, #ff9f43 0%, #ff4b7d 100%) border-box; border-color: transparent; color: #ffffff !important; box-shadow: 0 3px 8px -4px rgba(255, 75, 125, 0.55); }
.clown-produit-action .btn-orange:hover { background: linear-gradient(90deg, #ff8a2b 0%, #ff2f6f 100%) border-box; border-color: transparent; color: #ffffff !important; box-shadow: 0 5px 12px -5px rgba(255, 47, 111, 0.6); transform: translateY(-1px); }

#filtre-box.clown-filtres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 0.75rem;
    padding: 1.4rem 1.6rem;
    text-align: left;
    background: #fffaf1;
    border: 1px solid #f3e6cf;
    border-radius: 22px;
    box-shadow: none;
}
.clown-filtres-groupe h3 { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 800; color: var(--clown-texte-sombre); }
.clown-filtres-groupe .form-select { border-color: #ecdfd0; border-radius: 12px; }
.clown-filtres-prix { grid-column: span 2; }
.clown-filtre-mot-champ { display: flex; gap: 0.5rem; }
.clown-filtre-mot-champ .form-control { padding: 0.55rem 1.1rem; border: 1px solid #ecdfd0; border-radius: 9999px; }
.clown-filtre-mot-champ .btn { flex: none; width: 44px; height: 44px; padding: 0 !important; border-radius: 9999px; background: var(--clown-rose-vif); }
.clown-filtre-mot-champ .btn:hover { background: var(--clown-rose-fonce); }
.clown-prix-bornes { display: flex; justify-content: space-between; margin-top: 0.15rem; font-size: 0.85rem; color: var(--clown-texte-leger); }
.clown-case { position: relative; display: flex; align-items: center; gap: 0.65rem; padding: 0.3rem 0; font-size: 0.92rem; font-weight: 500; cursor: pointer; }
.clown-case input { position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; }
.clown-case-boite { flex: none; width: 20px; height: 20px; border: 2px solid #cbd5e1; border-radius: 6px; background: #ffffff; transition: var(--clown-transition); }
.clown-case:hover .clown-case-boite { border-color: var(--clown-rose); }
.clown-case input:checked + .clown-case-boite { border-color: var(--clown-rose-vif); background: var(--clown-rose-vif) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.clown-case input:focus-visible + .clown-case-boite { outline: 3px solid #7243b5; outline-offset: 2px; }
.clown-filtres-effacer { align-self: end; justify-self: start; padding: 0.5rem 1.25rem; background: #ffffff; color: #c2410c !important; border: 2px solid #f9c9a0; }
.clown-filtres-effacer:hover { background: #fff4eb; border-color: var(--clown-orange); }
@media (max-width: 767.98px) {
    .clown-filtres { gap: 1rem; padding: 1.1rem; }
    .clown-filtres-prix { grid-column: 1 / -1; }
}

/* Bascule grille / liste (bureau et tablette) */
.clown-vues { display: inline-flex; gap: 0.35rem; margin-left: 0.5rem; }
.clown-vue { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: #ffffff; color: #64748b; box-shadow: 0 2px 8px -4px rgba(120, 70, 0, 0.4); cursor: pointer; transition: var(--clown-transition); }
.clown-vue svg { width: 20px; height: 20px; }
.clown-vue:hover { color: var(--clown-rose-vif); }
.clown-vue[aria-pressed="true"] { background: var(--clown-rose-vif); color: #ffffff; }
@media (max-width: 767.98px) { .clown-vues { display: none; } }
@media (min-width: 768px) {
    [data-vue="liste"] .clown-boutique section .row > div { flex: 0 0 100%; width: 100%; max-width: 100%; }
    [data-vue="liste"] .clown-boutique .clown-produit-carte { display: grid; grid-template-columns: 170px minmax(0, 1fr) 220px; grid-template-areas: "image nom action" "image prix action"; align-items: center; gap: 0.2rem 1.5rem; height: auto; }
    [data-vue="liste"] .clown-boutique .clown-produit-carte > .position-relative, [data-vue="liste"] .clown-boutique .clown-produit-carte > a:first-child { grid-area: image; }
    [data-vue="liste"] .clown-boutique .clown-produit-nom { grid-area: nom; align-self: end; min-height: 0; font-size: 1.05rem; }
    [data-vue="liste"] .clown-boutique .clown-produit-prix { grid-area: prix; align-self: start; font-size: 1.2rem; }
    [data-vue="liste"] .clown-boutique .clown-produit-action { grid-area: action; margin: 0; }
}

/* --------------------------------------------------------------------------
   21. Fiche produit d'après la maquette (22/09/2026) : badges d'état, prix avec réduction,
   pastilles de taille/couleur (remplace la liste d'une ligne par variante), galerie avec flèches,
   onglets Description/Location/Livraison/Sécurité (remplacent les blocs empilés).
   -------------------------------------------------------------------------- */
/* Titre + sous-titre déplacés dans la colonne de droite (à côté de l'image, plus dans une bande à part au-dessus) :
   Title.razor centre son h1/h2 en dur (.text-center !important) pour ses autres usages sur le site, donc
   remis à gauche seulement ici via ce sélecteur descendant, avec la même priorité. */
/* Même sélecteur descendant : .main-title/.sub-title (h1/h2) gardaient leur marge de navigateur par défaut
   (jamais remise à zéro ailleurs sur le site), d'où le grand espace au-dessus du prix. */
/* !important nécessaire : le h1 porte aussi .mb-3 en dur dans Title.razor (margin-bottom: 1rem !important),
   repéré seulement maintenant (la vraie cause du dernier écart restant). */
.clown-titre-fiche .main-title { text-align: left !important; margin: 0 !important; }
.clown-titre-fiche .sub-title { text-align: left !important; margin: 0 0 0.2rem; }
/* .p-sm-0 (utilisé par Title.razor pour annuler .p-3 dès le bureau) n'existe nulle part dans ce fichier :
   le padding de 16px restait donc toujours appliqué, sur toutes les pages utilisant <Title>. Corrigé ici,
   localement, pour ne pas modifier l'espacement des autres pages sans les revérifier une à une. */
.clown-titre-fiche { margin-bottom: 0.35rem !important; padding: 0 !important; }
/* Cadre léger autour de la photo, comme la maquette (jusque-là la photo flottait sans bordure propre). */
.clown-galerie-cadre { padding: 0.6rem; border: 1px solid #eadfe2; border-radius: 18px; background: #fff; }
/* Badges d'état en haut à droite de la colonne d'info, au niveau du titre (comme la maquette) : la colonne
   sert de repère de positionnement, les badges passent en absolu pour ne pas pousser le titre vers le bas. */
.clown-colonne-info { position: relative; }
.clown-produit-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.clown-produit-badges--haut-droite { position: absolute; top: 0; right: 0; margin-bottom: 0; justify-content: flex-end; max-width: 55%; }
.clown-titre-fiche .main-title { padding-right: 11rem; }
@media (max-width: 767.98px) {
    .clown-produit-badges--haut-droite { position: static; margin-bottom: 0.75rem; max-width: none; }
    .clown-titre-fiche .main-title { padding-right: 0; }
}
.clown-badge-etat { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.8rem; border-radius: 9999px; font-size: 0.82rem; font-weight: 700; }
.clown-badge-etat--dispo { background: #dcfce7; color: #15803d; }
.clown-badge-etat--indispo { background: #f1f5f9; color: #64748b; }
.clown-badge-etat--location { background: #fff1e0; color: var(--clown-orange-texte); }

.clown-prix-fiche { margin: 0 0 0.35rem; font-size: 1.9rem; font-weight: 800; color: var(--clown-rose-texte); display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.clown-prix-fiche-principal--location { color: var(--clown-orange-texte); }
.clown-prix-fiche .price-old { font-size: 1.1rem; }
.clown-prix-fiche-reduc { padding: 0.15rem 0.55rem; border-radius: 9999px; background: var(--clown-rose-vif); color: #ffffff; font-size: 0.85rem; font-weight: 800; }

/* Étiquette et pastilles sur une seule ligne (au lieu de l'étiquette au-dessus). Pastilles toujours en
   contour (jamais de fond plein) : gris non sélectionné, rose sélectionné — seule la couleur du contour et
   du texte change, pas le remplissage. */
.clown-choix-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.clown-choix-label { font-weight: 700; font-size: 0.9rem; }
.clown-pastilles-choix { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.clown-pastille-choix { padding: 0.5rem 1rem; border: 2px solid #cbd5e1; border-radius: 10px; background: #ffffff; font-weight: 700; color: #64748b; cursor: pointer; transition: var(--clown-transition); }
.clown-pastille-choix:hover { border-color: var(--clown-rose); color: var(--clown-rose); }
.clown-pastille-choix.active { border-color: var(--clown-rose-vif); background: #ffffff; color: var(--clown-rose-vif); }

.clown-produit-qte { display: inline-flex; flex: none; align-items: center; gap: 0.75rem; padding: 0.3rem 0.5rem; border: 2px solid #ecdfd0; border-radius: 9999px; }
/* 40 px (et non 32) : cible tactile confortable au doigt (revue responsive du 05/10/2026). */
.clown-produit-qte button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff4eb; font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.clown-produit-qte span { min-width: 1.5rem; text-align: center; font-weight: 800; }

/* Quantité, bouton et confirmation « dans votre panier » sur une seule ligne. */
.clown-ligne-achat { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }

/* Message de rupture de stock : invite à contacter la boutique plutôt qu'un simple badge muet. */
.clown-rupture-stock { padding: 0.75rem 1rem; margin-bottom: 0.75rem; background: #f1f5f9; border-radius: 12px; font-size: 0.9rem; color: #475569; }
.clown-rupture-stock p + p { margin-top: 0.3rem; }
.clown-rupture-stock-lien { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--clown-rose-vif); text-decoration: underline; cursor: pointer; }
.clown-rupture-stock-lien:hover { color: var(--clown-rose-fonce); }
.clown-ajouter-panier { display: inline-flex; align-items: center; gap: 0.5rem; width: auto; padding: 0.75rem 1.5rem; font-size: 1.05rem; }
.clown-ajouter-panier svg { width: 20px; height: 20px; flex: none; }

/* Alignées à gauche, comme le reste de la colonne (titre, prix, pastilles, bouton) : l'ancien centrage
   venait d'une bande pleine largeur sous les deux colonnes, qui n'existe plus depuis que ce bloc est dans
   la colonne de droite — centré là, il flottait au milieu, décalé du reste au-dessus. */
.clown-reassurance-fiche { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.1rem 0 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--clown-texte-leger); }
.clown-reassurance-fiche img { margin-right: 0.3rem; vertical-align: -3px; }

.clown-produit-utilitaires { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Contour rose, fond blanc, comme la maquette (au lieu du orange plein utilisé ailleurs pour les CTA). */
/* Pas de redéfinition ici : .clown-btn-contour existe déjà en orange (règle plus haut dans ce fichier),
   utilisée aussi par Magasin.razor. La fiche produit (Imprimer / Poser une question) reprend ce même style,
   ce qui réduit aussi la dominante rose de la page (prix, pastilles actives, bouton Ajouter au panier...). */

/* Galerie photo : étiquette Nouveau, loupe décorative (le clic est déjà géré par le lien fancybox
   existant, l'icône n'est qu'un repère visuel), flèches précédent/suivant (Tree.js déjà en place pour
   les vignettes, activeImageDelta dans loupe.js réutilise la même logique). */
.clown-galerie { position: relative; }
.clown-galerie-etiquette { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; }
.clown-galerie-zoom { position: absolute; right: 0.75rem; bottom: 0.75rem; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); font-size: 1.1rem; }
.clown-galerie-fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); font-size: 1.3rem; line-height: 1; cursor: pointer; z-index: 2; }
.clown-galerie-fleche--prev { left: 0.5rem; }
.clown-galerie-fleche--suiv { right: 0.5rem; }

/* Onglets de la fiche produit : remplacent les blocs Description/Location/GPSR empilés. Bascule en JS
   pur (clown-site.js, même convention que les tiroirs/modales), pas de dépendance externe. */
/* Pas de contour dur (retiré sur demande), mais une ombre douce à la place : sans rien du tout, la carte se
   fond entièrement dans son parent (lui aussi blanc), sans séparation visible. */
.clown-onglets-produit { margin-top: 2rem; padding: 1.5rem; background: #ffffff; border-radius: 16px; box-shadow: 0 0 14px rgba(120, 70, 0, 0.1); }
.clown-onglets-barre { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; border-bottom: 2px solid #f1e3c8; margin-bottom: 1.25rem; }
/* Icône Bootstrap Icons devant chaque libellé : elle prend la couleur du texte (grise, rose sur l'onglet actif). */
.clown-onglet { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0; border: 0; border-bottom: 3px solid transparent; background: transparent; font-weight: 700; color: var(--clown-texte-leger); cursor: pointer; }
.clown-onglet i { font-size: 1.2em; line-height: 1; }
.clown-onglet:hover { color: var(--clown-texte-sombre); }
.clown-onglet.active { color: var(--clown-rose-vif); border-bottom-color: var(--clown-rose-vif); }
.clown-onglet-panneau { line-height: 1.6; }
.clown-partage { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #f1e3c8; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; }
/* Icônes de réseaux (comme la maquette) : pas de bouton/contour, icône colorée + libellé en ligne. */
.clown-partage-lien { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem 0; color: var(--clown-texte-leger); font-weight: 600; font-size: .9rem; text-decoration: none; background: none; border: 0; font-family: inherit; cursor: pointer; }
.clown-partage-lien.clown-partage-natif i { color: var(--clown-rose-vif); }
.clown-partage-lien:hover { color: var(--clown-texte-sombre); }
.clown-partage-lien i { font-size: 1.15rem; }
.clown-partage-lien[data-network="facebook"] i { color: #1877f2; }
.clown-partage-lien[data-network="whatsapp"] i { color: #25d366; }
.clown-partage-lien[data-network="pinterest"] i { color: #e60023; }
.clown-partage-lien[data-network="twitter"] i { color: #1b1f2a; }
.clown-partage-lien[data-network="email"] i { color: #64748b; }
@media (max-width: 767.98px) {
    .clown-onglets-produit { padding: 1.1rem; }
    .clown-onglets-barre { gap: 0.4rem 1rem; }
}

/* « Réduire les animations » : le soulèvement et le zoom restent instantanés, mais la bordure rose et l'étiquette
   apparaissent en fondu (ce n'est pas un mouvement), pour que l'effet reste visible et agréable. */
@media (prefers-reduced-motion: reduce) {
    .clown-produit-carte { transition: box-shadow 0.3s ease !important; }
    .clown-apercu { transition: opacity 0.3s ease !important; }
    /* Tiroir des catégories : sur demande explicite de l'utilisateur, le glissement entre niveaux (Tree.js,
       MenuDeplacer) reste un vrai déplacement même avec « réduire les animations » actif — exception
       délibérée à la règle générale ci-dessus, uniquement pour ce repère de navigation. */
    .menuTree ul { transition-duration: 500ms !important; }
}

/* --------------------------------------------------------------------------
   22. Pages « vitrine » : Infos pratiques (maquette du 24/09/2026) et socle commun (.clown-vitrine-*, .clown-fil-page)
   Les blocs .clown-info-bloc / -titre-bloc / -coordonnees servent aussi à la page Contact (Magasin.razor).
   -------------------------------------------------------------------------- */
.clown-vitrine-page { position: relative; padding-bottom: 2.5rem; overflow-x: clip; }

/* Fil d'Ariane posé directement sur le fond de page (sans pastille), avec la petite maison devant « Accueil ». */
.clown-fil-page { padding-top: 0.9rem; }
.clown-fil-page .breadcrumb { margin: 0; padding: 0; background: transparent; border-radius: 0; font-size: 0.85rem; }
.clown-fil-page .breadcrumb-item a { font-weight: 600; }
.clown-fil-page .breadcrumb-item-actuel { font-weight: 500; color: var(--clown-texte-leger); }
.clown-fil-page .breadcrumb-item:first-child a::before {
    content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.4rem; vertical-align: -0.15em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-5h4v5h5v-8h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Titre : mêmes marges neutralisées que .clown-boutique-titre (mt-4 / mb-3 du composant Title sont en !important). */
.clown-vitrine-titre { margin-top: 0.6rem !important; padding: 0 !important; }
.clown-vitrine-titre .main-title { margin: 0 0 0.5rem !important; font-size: clamp(2.1rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; color: #1b1f3b; }
.clown-vitrine-titre .sub-title { max-width: 60rem; margin: 0 auto 1.5rem; font-size: 1rem; font-weight: 500; color: #2b2a33; }

/* Étoiles décoratives autour du titre et de la carte (sans rôle, masquées sur mobile). */
.clown-vitrine-deco { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(120, 70, 0, 0.18)); }
.clown-vitrine-deco--orange { left: 9%; top: 4.6rem; width: 46px; transform: rotate(-12deg); }
.clown-vitrine-deco--bleue { right: 17%; top: 4.2rem; width: 36px; transform: rotate(14deg); }
.clown-vitrine-deco--rose { right: 24%; top: 2.6rem; width: 22px; transform: rotate(20deg); }
.clown-vitrine-deco--jaune { right: 4.5%; top: 11rem; width: 24px; transform: rotate(8deg); }

/* Grande carte blanche : deux colonnes séparées par un filet, puis façade, visite et plan pleine largeur. */
.clown-info-carte { position: relative; padding: clamp(1.1rem, 2.6vw, 2rem); background: #ffffff; border-radius: 22px; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-info-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.clown-info-col-boutique { padding-right: clamp(1rem, 3vw, 2.2rem); }
.clown-info-col-coordonnees { padding-left: clamp(1rem, 3vw, 2.2rem); border-left: 1px solid #f1e3c8; }

.clown-info-titre-bloc { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.1rem; font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -0.01em; color: #1b1f3b; }
.clown-info-titre-bloc img { flex: none; width: auto; height: 3.3rem; }
/* Petit trait jaune sous le titre (sous le texte, pas sous l'icône). */
.clown-info-titre-bloc span { position: relative; padding-bottom: 0.55rem; }
.clown-info-titre-bloc span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.6rem; height: 4px; border-radius: 4px; background: #ffc61a; }
.clown-info-bloc p { margin: 0 0 0.75rem; font-size: 0.95rem; line-height: 1.6; color: #3d3a4b; }

.clown-info-coordonnees { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.clown-info-coordonnees li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; font-size: 0.95rem; color: #3d3a4b; }
.clown-info-coordonnees a { font-weight: 500; color: #3d3a4b; text-decoration: none; }
.clown-info-coordonnees a:hover { color: var(--clown-rose-vif); }
.clown-info-puce { flex: none; width: 26px; height: auto; }
.clown-info-transport { padding-left: 0.4rem; }
.clown-info-transport strong { font-weight: 700; color: #2b2a33; }
.clown-info-pastilles { display: inline-flex; flex: none; align-items: center; gap: 0.3rem; }
.clown-info-pastilles img { width: auto; height: 24px; }

/* Façade : la photo, le post-it manuscrit qui la chevauche à droite et les ballons qui dépassent de la carte. */
.clown-info-facade { position: relative; margin-top: 1.6rem; }
.clown-info-facade-img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 22px rgba(40, 25, 10, 0.25); }
.clown-info-note {
    position: relative; width: min(320px, 92%); margin: -2rem 0.6rem 0 auto; padding: 1.3rem 1.2rem 1.5rem; text-align: center;
    background: linear-gradient(160deg, #fffaf0, #fff2cf); border-radius: 6px; box-shadow: 0 10px 22px rgba(60, 30, 0, 0.28); transform: rotate(-3deg);
    font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-weight: 600; font-size: 1.45rem; line-height: 1.08; color: #2b2a33;
}
.clown-info-note p { margin: 0 0 0.7rem; }
.clown-info-note p:last-child { margin-bottom: 0; }
.clown-info-note-rose { color: #e0157a; }
/* Coin replié en bas à droite. */
.clown-info-note::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; border-top-left-radius: 8px; background: linear-gradient(315deg, #f3d989 50%, transparent 50%); box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.12); }
.clown-info-note-etoile { position: absolute; top: -14px; right: -10px; width: 34px; height: auto; transform: rotate(12deg); }
.clown-info-ballons { display: none; }
@media (min-width: 992px) {
    .clown-info-facade-img { width: 86%; }
    .clown-info-note { position: absolute; top: 10%; right: -5%; width: 26%; min-width: 210px; margin: 0; transform: rotate(-5deg); }
    .clown-info-ballons { position: absolute; z-index: 2; top: -30%; right: -6.5%; display: block; width: 9%; min-width: 70px; height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(60, 30, 0, 0.2)); }
}

/* Visite Street View (bandeau + bouton plein écran par-dessus) et plan Google. */
.clown-info-panorama, .clown-info-plan { position: relative; margin-top: 1.4rem; overflow: hidden; border-radius: 18px; background: #efe6d2; box-shadow: 0 8px 22px rgba(40, 25, 10, 0.2); }
.clown-info-panorama { height: clamp(280px, 36vw, 440px); }
.clown-info-plan { height: clamp(260px, 30vw, 380px); }
.clown-info-panorama iframe, .clown-info-plan iframe { display: block; width: 100%; height: 100%; border: 0; }
.clown-info-panorama:fullscreen { height: 100vh; border-radius: 0; }
.clown-info-visite { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; align-items: center; gap: 0.8rem; max-width: calc(100% - 5.5rem); padding: 0.7rem 1.2rem 0.7rem 0.8rem; background: #ffffff; border-radius: 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); pointer-events: none; }
.clown-info-visite-icone { display: grid; flex: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--clown-rose-vif); color: #ffffff; }
.clown-info-visite-icone svg { width: 24px; height: 24px; }
.clown-info-visite strong { display: block; font-size: 1rem; font-weight: 800; color: #1b1f3b; }
.clown-info-visite small { display: block; font-size: 0.8rem; color: #6b6880; }
.clown-info-plein-ecran { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: #ffffff; color: #1b1f3b; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); cursor: pointer; }
.clown-info-plein-ecran:hover { color: var(--clown-rose-vif); }
.clown-info-plein-ecran svg { width: 20px; height: 20px; }

@media (max-width: 767.98px) {
    .clown-vitrine-deco { display: none; }
    .clown-info-grille { grid-template-columns: 1fr; }
    .clown-info-col-boutique { padding-right: 0; }
    .clown-info-col-coordonnees { margin-top: 1.4rem; padding: 1.4rem 0 0; border-top: 1px solid #f1e3c8; border-left: 0; }
}

/* --------------------------------------------------------------------------
   23. Page Sécurité (maquette du 24/09/2026)
   Fil d'Ariane (.clown-fil-page), titre (.clown-vitrine-titre) et étoiles (.clown-vitrine-deco) sont partagés avec la
   page Infos pratiques (section 22). Ici : trait rose + confettis sous le titre, carte à trois moyens de paiement.
   -------------------------------------------------------------------------- */
.clown-vitrine-titre--pastilles { position: relative; }
/* Petit trait rose sous le titre : commun aux pages Sécurité et FAQ (classe .clown-vitrine-titre--barre). */
.clown-vitrine-titre--barre .main-title::after { content: ""; display: block; width: 2.4rem; height: 4px; margin: 0.5rem auto 0; border-radius: 4px; background: var(--clown-rose-vif); }
.clown-vitrine-titre--pastilles::before, .clown-vitrine-titre--pastilles::after { content: ""; position: absolute; top: 1.1rem; width: 22px; height: 9px; border-radius: 9px; }
.clown-vitrine-titre--pastilles::before { left: calc(50% - var(--ecart-pastilles, 190px)); background: #2c9be6; transform: rotate(50deg); }
.clown-vitrine-titre--pastilles::after { right: calc(50% - var(--ecart-pastilles, 190px)); background: #ff8a1f; transform: rotate(-40deg); }

.clown-secu-carte { padding: 0 clamp(1.1rem, 3vw, 2.4rem); background: #ffffff; border-radius: 22px; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-secu-bloc { display: grid; grid-template-columns: clamp(7rem, 13vw, 9.5rem) minmax(0, 1fr) auto; column-gap: clamp(1rem, 2.4vw, 2rem); align-items: start; padding: 1.7rem 0; border-top: 1px solid #f1e3c8; }
.clown-secu-bloc:first-child { border-top: 0; }
.clown-secu-bloc--sans-droite { grid-template-columns: clamp(7rem, 13vw, 9.5rem) minmax(0, 1fr); }

/* Colonne de gauche : pastille numérotée en haut à gauche, dessin en bas à droite. Le jaune du « 3 » prend un chiffre
   sombre (blanc sur jaune : contraste insuffisant). */
.clown-secu-gauche { position: relative; min-height: 9.5rem; }
.clown-secu-num { position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; color: #ffffff; font-size: 1.5rem; font-weight: 800; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
.clown-secu-num--1 { background: #e8650c; }
.clown-secu-num--2 { background: var(--clown-rose-vif); }
.clown-secu-num--3 { background: #f6b40e; color: #3a2a00; }
.clown-secu-dessin { position: absolute; right: 0; bottom: 0; width: 100%; height: auto; }
.clown-secu-dessin--paypal { right: 14%; bottom: 10%; width: 56%; }

.clown-secu-titre-bloc { margin: 0 0 0.6rem; font-size: clamp(1.1rem, 1.7vw, 1.3rem); font-weight: 800; line-height: 1.25; }
.clown-secu-titre-bloc--orange { color: #dc5a0a; }
.clown-secu-titre-bloc--rose { color: #e00e85; }
.clown-secu-corps p { margin: 0 0 0.8rem; font-size: 0.95rem; line-height: 1.55; color: #3d3a4b; }
.clown-secu-liste { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.93rem; line-height: 1.5; color: #3d3a4b; }
.clown-secu-liste li { position: relative; padding-left: 2rem; }
.clown-secu-liste strong { color: #1b1f3b; }
/* Coche rose : rond + coche blanche dessinée en SVG (data-URI), pas d'image à charger. */
.clown-secu-liste li::before {
    content: ""; position: absolute; left: 0; top: 0.2em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
    background: var(--clown-rose-vif) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.clown-secu-adresse { display: block; margin-top: 0.15rem; font-style: normal; }

/* Colonne de droite : logos Visa / Mastercard (section 1), cadre bleu clair avec le logo PayPal (section 2). */
.clown-secu-droite { align-self: start; }
/* Deux rangées comme la maquette (CB, Visa, Mastercard / Apple Pay, Google Pay) ; les hauteurs sont réglées logo par
   logo pour que les marques aient un poids visuel comparable (Visa est un mot très allongé, Mastercard deux ronds). */
.clown-secu-logos { display: grid; gap: 0.9rem; justify-items: end; }
.clown-secu-rang { display: flex; align-items: center; gap: 1.3rem; }
.clown-secu-logos img { width: auto; }
.clown-secu-logo--cb { height: 2.4rem; }
.clown-secu-logo--visa { height: 1.4rem; }
.clown-secu-logo--mastercard { height: 2.4rem; }
.clown-secu-logo--applepay, .clown-secu-logo--googlepay { height: 2.1rem; }
.clown-secu-logo--amex { height: 2rem; }
/* Grand écran : les logos flottent en haut à droite (comme la maquette) et seuls le titre et l'introduction leur
   laissent la place, la liste à coches reprend toute la largeur en dessous. */
@media (min-width: 1100px) {
    .clown-secu-bloc--logos-haut { position: relative; grid-template-columns: clamp(7rem, 13vw, 9.5rem) minmax(0, 1fr); }
    .clown-secu-bloc--logos-haut .clown-secu-logos { position: absolute; top: 1.5rem; right: 0; }
    .clown-secu-bloc--logos-haut .clown-secu-titre-bloc, .clown-secu-bloc--logos-haut .clown-secu-corps > p { margin-right: 16rem; }
}
.clown-secu-paypal { display: grid; place-items: center; width: 12.5rem; height: 6.4rem; border-radius: 14px; background: #eaf3fc; }
.clown-secu-paypal img { width: 8.5rem; height: auto; }

@media (max-width: 767.98px) {
    .clown-vitrine-titre--pastilles::before, .clown-vitrine-titre--pastilles::after { display: none; }
    .clown-secu-bloc, .clown-secu-bloc--sans-droite { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; padding: 1.4rem 0; }
    .clown-secu-gauche { min-height: 5.6rem; }
    .clown-secu-dessin { right: auto; bottom: auto; top: 0; left: 3.7rem; width: 6.8rem; }
    .clown-secu-dessin--paypal { left: 4rem; width: 4.2rem; }
    .clown-secu-logos { justify-items: start; }
    .clown-secu-paypal { width: 100%; max-width: 14rem; }
}

/* --------------------------------------------------------------------------
   24. Page FAQ (maquette du 24/09/2026)
   Fil d'Ariane, titre, trait rose et carte réutilisent le socle « vitrine » (sections 22 et 23). Accordéon = <details> natif.
   -------------------------------------------------------------------------- */
.clown-faq-titre .sub-title { max-width: 28rem; font-size: 1.15rem; line-height: 1.5; color: #55536f; }

/* Bulles et ampoule autour du titre, étoiles sur les côtés (décor, masqué sur mobile). */
.clown-faq-deco { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(120, 70, 0, 0.2)); }
.clown-faq-deco--question { left: 5%; top: 4.2rem; width: 112px; transform: rotate(-6deg); }
.clown-faq-deco--points { left: calc(5% + 84px); top: 7.2rem; width: 94px; }
.clown-faq-deco--ampoule { right: 8%; top: 4.6rem; width: 92px; }
.clown-faq-etoile--gauche { left: 3%; top: 27rem; width: 30px; transform: rotate(-10deg); }
.clown-faq-etoile--droite { right: 3%; top: 34rem; width: 38px; transform: rotate(12deg); }

.clown-faq-carte { margin: 0; padding: 0.3rem clamp(1rem, 3vw, 2rem); list-style: none; background: #ffffff; border-radius: 22px; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-faq-carte > li + li { border-top: 1px solid #f3e6cf; }
.clown-faq-item summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.05rem 0; list-style: none; cursor: pointer; }
.clown-faq-item summary::-webkit-details-marker { display: none; }
.clown-faq-item summary:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; border-radius: 10px; }
/* Pastille numérotée jaune-orange ; chiffre foncé (le blanc de la maquette ne passe pas le contraste sur le jaune). */
.clown-faq-num { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffd45a 0, #ffb81f 55%, #f6a20a 100%); color: #3a2400; font-size: 1.15rem; font-weight: 800; box-shadow: 0 0 0 3px #fff3cf, 0 4px 8px rgba(200, 120, 0, 0.25); }
.clown-faq-question { font-size: 1.05rem; font-weight: 800; line-height: 1.35; color: #1b1f3b; }
.clown-faq-item summary:hover .clown-faq-question { color: var(--clown-rose-vif); }
/* « + » / « − » roses dessinés en CSS : la barre verticale disparaît quand l'élément est ouvert. */
.clown-faq-bascule { position: relative; width: 1.1rem; height: 1.1rem; }
.clown-faq-bascule::before, .clown-faq-bascule::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 2px; background: var(--clown-rose-vif); transform: translate(-50%, -50%); }
.clown-faq-bascule::before { width: 100%; height: 2px; }
.clown-faq-bascule::after { width: 2px; height: 100%; }
.clown-faq-item[open] .clown-faq-bascule::after { display: none; }

/* Réponse : alignée sur le texte de la question ; avec illustration, l'image passe sous la pastille et le texte se décale. */
.clown-faq-reponse { margin: 0 2.4rem 1.3rem 3.6rem; font-size: 0.95rem; line-height: 1.6; color: #55536f; }
.clown-faq-reponse p { margin: 0 0 0.35rem; }
.clown-faq-reponse p:last-child { margin-bottom: 0; }
.clown-faq-reponse--illustre { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 1.3rem; align-items: center; margin-left: 0; }
.clown-faq-reponse--illustre img { width: 100%; height: auto; }

/* Décor : les bulles et l'ampoule chevauchent le titre et le sous-titre sous 992 px, les étoiles la carte sous 1200 px. */
@media (max-width: 1199.98px) { .clown-faq-etoile { display: none; } }
@media (max-width: 991.98px) { .clown-faq-deco { display: none; } }
@media (max-width: 767.98px) {
    .clown-faq-num { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
    .clown-faq-item summary { gap: 0.75rem; }
    .clown-faq-reponse { margin: 0 0 1.1rem; }
    .clown-faq-reponse--illustre { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.9rem; }
}

/* --------------------------------------------------------------------------
   25. Page Conditions générales de vente (maquette du 25/09/2026)
   Fil d'Ariane, titre, pastilles et carte : socle « vitrine » (sections 22 à 24). Carte plus étroite (1100 px) : lignes de texte
   plus courtes à lire, et marges libres de chaque côté pour le décor.
   -------------------------------------------------------------------------- */
/* Titre long : taille réduite, et pastilles écartées de la moitié de sa largeur (≈ 29 signes × 0,5 em ÷ 2) + 30 px. */
.clown-cgv-titre { --ecart-pastilles: calc(7.25 * clamp(1.7rem, 3.6vw, 2.6rem) + 30px); }
.clown-cgv-titre .main-title { margin-bottom: 1.6rem !important; font-size: clamp(1.7rem, 3.6vw, 2.6rem); }

.clown-cgv-carte { max-width: 1100px; margin: 0 auto; padding: 0.3rem clamp(1rem, 3vw, 2.2rem); background: #ffffff; border-radius: 22px; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-cgv-article { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: 1.4rem; align-items: start; padding: 1.4rem 0; }
.clown-cgv-article + .clown-cgv-article { border-top: 1px solid #f3e6cf; }
/* Rond crème avec l'icône en trait orange (orange assombri : contraste 3:1 minimum pour un pictogramme). */
.clown-cgv-icone { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: #fff1df; color: #d9640a; font-size: 1.7rem; }
.clown-cgv-icone svg { width: 1.8rem; height: 1.8rem; }
.clown-cgv-titre-article { margin: 0 0 0.85rem; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; color: #1b1f3b; }
.clown-cgv-titre-article span { position: relative; display: inline-block; padding-bottom: 0.5rem; }
.clown-cgv-titre-article span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.2rem; height: 3px; border-radius: 3px; background: #f47a20; }
.clown-cgv-corps p { margin: 0 0 0.45rem; font-size: 0.9rem; line-height: 1.6; color: #3d3a4b; }
.clown-cgv-corps p:last-child { margin-bottom: 0; }

/* Décor dans les marges de la carte (demi-largeur de la carte = 550 px) : ballons et étoiles à gauche, ruban et étoiles à droite. */
.clown-cgv-deco { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(120, 70, 0, 0.18)); }
.clown-cgv-deco--ballons { right: calc(50% + 560px); top: 3.4rem; width: 105px; }
.clown-cgv-deco--ruban { left: calc(50% + 564px); top: 24rem; width: 64px; }
.clown-cgv-deco--etoile-g1 { right: calc(50% + 570px); top: 27rem; width: 34px; transform: rotate(-12deg); }
.clown-cgv-deco--etoile-g2 { right: calc(50% + 592px); top: 47rem; width: 30px; transform: rotate(10deg); }
.clown-cgv-deco--etoile-d1 { left: calc(50% + 578px); top: 36rem; width: 32px; transform: rotate(14deg); }
.clown-cgv-deco--etoile-d2 { left: calc(50% + 566px); top: 52rem; width: 38px; transform: rotate(-8deg); }
@media (max-width: 1299.98px) { .clown-cgv-deco { display: none; } }

@media (max-width: 767.98px) {
    .clown-cgv-article { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.9rem; padding: 1.2rem 0; }
    .clown-cgv-icone { width: 3rem; height: 3rem; font-size: 1.25rem; }
    .clown-cgv-icone svg { width: 1.35rem; height: 1.35rem; }
}

/* --------------------------------------------------------------------------
   26. Page Mentions légales (maquette du 25/09/2026)
   Fil d'Ariane, titre, trait rose, étoiles et carte : socle « vitrine » (sections 22 à 25).
   -------------------------------------------------------------------------- */
.clown-legal-carte { padding: 0.3rem clamp(1rem, 3vw, 2.2rem); background: #ffffff; border-radius: 22px; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-legal-article { display: grid; grid-template-columns: 3.4rem 2rem minmax(0, 1fr); column-gap: 0.8rem; align-items: start; padding: 1.5rem 0; }
.clown-legal-article + .clown-legal-article { border-top: 1px solid #f3e6cf; }

/* Icône colorée (pleine, pas de rond) puis pastille rose numérotée ; l'icône et la pastille sont décoratives (le numéro est dans le titre). */
.clown-legal-icone { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; font-size: 2.5rem; line-height: 1; }
.clown-legal-icone svg { width: 2.4rem; height: 2.4rem; }
.clown-legal-icone--jaune { color: #f6a90c; }
.clown-legal-icone--rose { color: #ff2d8f; }
.clown-legal-icone--bleu { color: #2f7de1; }
.clown-legal-icone--rouge { color: #e8402f; }
.clown-legal-num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-top: 0.15rem; border-radius: 50%; background: var(--clown-rose-vif); color: #ffffff; font-size: 0.9rem; font-weight: 800; }

.clown-legal-titre-article { margin: 0 0 0.5rem; font-size: 1.2rem; font-weight: 800; line-height: 1.3; color: #1b1f3b; }
.clown-legal-corps p { margin: 0 0 0.5rem; font-size: 0.92rem; line-height: 1.6; color: #4a4760; }
.clown-legal-corps p:last-child { margin-bottom: 0; }
.clown-legal-corps a { color: #1b1f3b; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.clown-legal-corps a:hover { color: var(--clown-rose-vif); }
.clown-legal-infos { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; line-height: 1.55; color: #4a4760; }
.clown-legal-infos strong { color: #1b1f3b; }

/* Décor du haut : mégaphone à gauche, ballons à droite (masqués sous 992 px, ils chevauchent le titre). */
.clown-legal-deco { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(120, 70, 0, 0.2)); }
.clown-legal-deco--megaphone { left: 5%; top: 3.4rem; width: 118px; transform: rotate(-8deg); }
.clown-legal-deco--ballons { right: 5%; top: 2.6rem; width: 82px; }
@media (max-width: 991.98px) { .clown-legal-deco { display: none; } }

@media (max-width: 767.98px) {
    .clown-legal-article { grid-template-columns: 2.4rem 1.7rem minmax(0, 1fr); column-gap: 0.55rem; padding: 1.2rem 0; }
    .clown-legal-icone { width: 2.4rem; height: 2.4rem; font-size: 1.8rem; }
    .clown-legal-icone svg { width: 1.7rem; height: 1.7rem; }
    .clown-legal-num { width: 1.6rem; height: 1.6rem; font-size: 0.8rem; }
    .clown-legal-titre-article { font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   27. Plan du site (refait le 25/09/2026, sans maquette : même habillage « vitrine » que les sections 22 à 26)
   -------------------------------------------------------------------------- */
.clown-plan-carte { padding: clamp(1.1rem, 2.6vw, 2rem); background: #ffffff; border-radius: 22px; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-plan-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2.2rem 2.4rem; }
.clown-plan-bloc { min-width: 0; }
/* Les deux grandes listes (catégories de la boutique, thèmes) prennent toute la largeur et se répartissent en colonnes. */
.clown-plan-bloc--large { grid-column: 1 / -1; padding-top: 1.7rem; border-top: 1px solid #f3dfa8; }
.clown-plan-bloc--large > .clown-plan-liste { column-width: 16rem; column-gap: 2.4rem; display: block; }
.clown-plan-bloc--large > .clown-plan-liste > li { break-inside: avoid; }

.clown-plan-titre-bloc { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: #1b1f3b; }
/* Pastille ronde pâle avec l'icône de la maquette dedans (PNG 96 px, transparent). */
.clown-plan-disque { display: grid; flex: none; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; }
.clown-plan-disque img { width: 100%; height: 100%; object-fit: contain; }
.clown-plan-disque--bleu { background: #e0eeff; }
.clown-plan-disque--rose { background: #ffe1ef; }
.clown-plan-disque--orange { background: #ffe8c9; }
.clown-plan-disque--jaune { background: #fff0b8; }
/* Petit trait jaune sous le titre (sous le texte, pas sous l'icône), comme la page Infos pratiques. */
.clown-plan-titre-texte { position: relative; padding-bottom: 0.5rem; }
.clown-plan-titre-texte::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.4rem; height: 4px; border-radius: 4px; background: #ffc61a; }

.clown-plan-liste { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.clown-plan-liste ul { margin: 0.1rem 0 0.5rem 0.35rem; padding-left: 1rem; border-left: 2px solid #f6c24a; }
.clown-plan-liste a, .clown-plan-lien-bouton { display: inline-block; padding: 0.22rem 0; border: 0; background: none; font: inherit; font-size: 0.92rem; color: #3d3a4b; text-decoration: none; cursor: pointer; }
.clown-plan-liste a:hover, .clown-plan-lien-bouton:hover { color: var(--clown-rose-vif); text-decoration: underline; text-underline-offset: 2px; }
.clown-plan-liste .clown-plan-tout { font-weight: 700; color: #1b1f3b; }
.clown-plan-liste .clown-plan-tout:hover { color: var(--clown-rose-vif); }
/* Rubrique qui se déplie : chevron rose à gauche du nom (pas de triangle du navigateur). */
.clown-plan-liste summary { display: flex; align-items: center; gap: 0.55rem; padding: 0.22rem 0; font-size: 0.92rem; font-weight: 600; color: #1b1f3b; list-style: none; cursor: pointer; }
.clown-plan-liste summary::-webkit-details-marker { display: none; }
.clown-plan-liste summary::before { content: ""; flex: none; width: 0.42rem; height: 0.42rem; margin: 0 0.1rem 0.1rem 0.15rem; border-right: 2px solid var(--clown-rose-vif); border-bottom: 2px solid var(--clown-rose-vif); transform: rotate(-45deg); transition: transform 0.15s ease; }
.clown-plan-liste details[open] > summary::before { transform: rotate(45deg); margin-bottom: 0.25rem; }
.clown-plan-liste summary:hover { color: var(--clown-rose-vif); }
.clown-plan-liste summary:focus-visible, .clown-plan-liste a:focus-visible, .clown-plan-lien-bouton:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; border-radius: 6px; }

/* Chevron rose devant chaque rubrique du premier niveau (les liens simples ; les rubriques repliables ont déjà le leur, qui pivote à l'ouverture). */
.clown-plan-bloc > .clown-plan-liste > li > a:not(.clown-plan-tout), .clown-plan-bloc > .clown-plan-liste > li > .clown-plan-lien-bouton { display: inline-flex; align-items: center; gap: 0.55rem; }
.clown-plan-bloc > .clown-plan-liste > li > a:not(.clown-plan-tout)::before, .clown-plan-bloc > .clown-plan-liste > li > .clown-plan-lien-bouton::before { content: ""; flex: none; width: 0.42rem; height: 0.42rem; margin: 0 0.1rem 0.1rem 0.15rem; border-right: 2px solid var(--clown-rose-vif); border-bottom: 2px solid var(--clown-rose-vif); transform: rotate(-45deg); }
.clown-plan-liste ul a { font-size: 0.88rem; }

/* Décor dans les marges de la carte (demi-largeur de la carte = 604 px) : ballons à droite, ruban à gauche ; masqué sous 1440 px. */
.clown-plan-deco { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(120, 70, 0, 0.2)); }
.clown-plan-deco--ballons { left: calc(50% + 612px); top: 20rem; width: 96px; }
.clown-plan-deco--ruban { right: calc(50% + 620px); top: 15rem; width: 46px; transform: rotate(-10deg); }
@media (max-width: 1439.98px) { .clown-plan-deco { display: none; } }

/* --------------------------------------------------------------------------
   28. Page Contact (maquette du 25/09/2026)
   Fil d'Ariane, titre, trait rose et pastilles de titre : socle « vitrine » (sections 22 à 27). Le bloc « Coordonnées » (cartes) est
   rendu par Magasin.razor (type "Contact").
   -------------------------------------------------------------------------- */
/* Titre court : les deux petits traits sont rapprochés de « Contact » (moitié de sa largeur ≈ 1,95 em, puis le trait et un écart). */
.clown-contact-titre { --ecart-pastilles: calc(1.95 * clamp(2.1rem, 4.6vw, 3.1rem) + 36px); }
.clown-contact-titre .sub-title { max-width: 44rem; margin-inline: auto; padding-inline: 1rem; color: #55536f; }

/* Ballons de chaque côté du titre (décor, masqué sous 1200 px : ils chevauchent la carte). */
.clown-contact-ballon { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(120, 70, 0, 0.2)); }
.clown-contact-ballon--rose { left: 3%; top: 3.6rem; width: 84px; }
.clown-contact-ballon--bleu { right: 3%; top: 3.2rem; width: 74px; }
@media (max-width: 1199.98px) { .clown-contact-ballon { display: none; } }

.clown-contact-page-carte { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #ffffff; border-radius: 22px; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-contact-form { padding: clamp(1.2rem, 2.8vw, 2.2rem); }
.clown-contact-coord { padding: clamp(1.2rem, 2.8vw, 2.2rem); border-left: 1px solid #f3e6cf; }

/* Titre de bloc : icône rose à gauche, texte avec un double trait rose et orange dessous. */
.clown-contact-titre-bloc { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.6rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; color: #1b1f3b; }
.clown-contact-titre-bloc > svg, .clown-contact-titre-bloc > i { flex: none; width: 2.4rem; height: 2.4rem; font-size: 2.4rem; line-height: 1; color: var(--clown-rose-vif); }
.clown-contact-titre-texte { position: relative; padding-bottom: 0.6rem; }
.clown-contact-titre-texte::before, .clown-contact-titre-texte::after { content: ""; position: absolute; bottom: 0; height: 4px; border-radius: 4px; }
.clown-contact-titre-texte::before { left: 0; width: 1.6rem; background: var(--clown-rose-vif); }
.clown-contact-titre-texte::after { left: 1.85rem; width: 1.6rem; background: #ff9f1a; }

/* Formulaire : libellé à gauche, champ à droite (une colonne sur mobile). */
.clown-contact-legende { margin: -0.6rem 0 1rem; font-size: 0.82rem; color: #6b6880; }
.clown-contact-requis { color: var(--clown-rose-vif); font-weight: 800; }
.clown-contact-champ { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: start; gap: 0.4rem 1rem; margin-bottom: 0.95rem; }
.clown-contact-champ label { padding-top: 0.6rem; font-size: 0.92rem; font-weight: 700; color: #1b1f3b; }
.clown-contact-champ input, .clown-contact-champ select, .clown-contact-champ textarea { width: 100%; min-height: 44px; padding: 0.55rem 0.85rem; border: 1px solid #e4ddd0; border-radius: 10px; background: #ffffff; font: inherit; font-size: 0.92rem; color: #1b1f3b; }
.clown-contact-champ textarea { min-height: 8.5rem; resize: vertical; }
.clown-contact-champ input:focus, .clown-contact-champ select:focus, .clown-contact-champ textarea:focus { border-color: var(--clown-rose-vif); outline: 3px solid rgba(255, 9, 153, 0.18); }
.clown-contact-champ ::placeholder { color: #8e8ba0; }

.clown-contact-envoi { display: flex; justify-content: flex-start; margin-left: 9.5rem; margin-top: 1.3rem; }
.clown-contact-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-width: 15rem; min-height: 52px; padding: 0.7rem 1.6rem; border: 0; border-radius: 12px; background: linear-gradient(90deg, #ff2d8f, #f5117c); color: #ffffff; font-size: 1.2rem; font-weight: 800; box-shadow: 0 10px 20px -8px rgba(245, 17, 124, 0.7); cursor: pointer; transition: var(--clown-transition); }
.clown-contact-bouton svg { width: 1.3rem; height: 1.3rem; }
.clown-contact-bouton:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.clown-contact-bouton:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 3px; }
.clown-contact-bouton:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.clown-contact-erreur { margin: 0.5rem 0 0.4rem 9.5rem; padding: 0.7rem 1rem; border-radius: 10px; background: #fee2e2; color: #991b1b; font-size: 0.92rem; }
.clown-contact-succes { display: grid; place-items: center; gap: 0.8rem; min-height: 16rem; text-align: center; color: #15803d; }
.clown-contact-succes i { font-size: 3.2rem; }
.clown-contact-succes p { margin: 0; font-size: 1.25rem; font-weight: 800; }

/* Coordonnées : une carte crème par information. */
.clown-contact-cartes { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.clown-contact-carte-info { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 4.4rem; padding: 0.7rem 1rem; border-radius: 16px; background: #fdf6ea; }
.clown-contact-disque { display: grid; flex: none; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; color: #ffffff; font-size: 1.35rem; }
.clown-contact-disque--rose { background: var(--clown-rose-vif); }
.clown-contact-disque--orange { background: #ff9f1a; }
.clown-contact-picto { flex: none; width: 2.9rem; height: 2.9rem; }
.clown-contact-velib { flex: none; width: 2.9rem; height: auto; }
.clown-contact-texte { display: block; min-width: 0; font-size: 0.9rem; line-height: 1.4; color: #4a4760; }
.clown-contact-texte strong { display: block; font-size: 0.98rem; font-weight: 800; color: #1b1f3b; }
.clown-contact-texte a { color: inherit; text-decoration: none; }
.clown-contact-texte a:hover strong { color: var(--clown-rose-vif); }
.clown-contact-lignes { display: inline-flex; flex: none; align-items: center; gap: 0.35rem; margin-left: auto; }
.clown-contact-lignes img { width: auto; height: 1.7rem; }
.clown-contact-lignes--bus { margin: 0 0 0.25rem; }
.clown-contact-lignes--bus img { height: 1.5rem; }
.clown-contact-deco-droite { flex: none; margin-left: auto; opacity: 0.85; }
.clown-contact-eiffel { width: 1.9rem; height: 2.8rem; color: #6ea8f7; }
.clown-contact-velo { width: 2.7rem; height: auto; }

/* Petit mot manuscrit sur fond rose pâle, avec le cotillon qui déborde à droite. */
.clown-contact-mot { position: relative; display: flex; align-items: center; min-height: 6.6rem; margin-top: 1rem; padding: 1rem 8rem 1rem 1.6rem; border-radius: 16px; background: #ffe6f1; }
.clown-contact-mot p { margin: 0; font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-size: 1.7rem; font-weight: 600; line-height: 1.1; color: #2b2a33; transform: rotate(-4deg); }
.clown-contact-coeur { margin-left: 0.5rem; color: var(--clown-rose-vif); }
.clown-contact-mot img { position: absolute; right: 0.6rem; bottom: -0.4rem; width: 6.6rem; height: auto; pointer-events: none; }

@media (max-width: 991.98px) {
    .clown-contact-page-carte { grid-template-columns: 1fr; }
    .clown-contact-coord { border-left: 0; border-top: 1px solid #f3e6cf; }
}
@media (max-width: 767.98px) {
    .clown-contact-champ { grid-template-columns: 1fr; gap: 0.3rem; }
    .clown-contact-champ label { padding-top: 0; }
    .clown-contact-envoi, .clown-contact-erreur { margin-left: 0; }
    .clown-contact-bouton { width: 100%; }
    .clown-contact-mot { padding-right: 6.2rem; }
    .clown-contact-mot p { font-size: 1.45rem; }
}

/* --------------------------------------------------------------------------
   29. Pages « Erreur » et « Page introuvable » (maquette du 25/09/2026, Composants/PageErreur.razor)
   -------------------------------------------------------------------------- */
.clown-erreur-hero { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 1rem 2rem; min-height: 22rem; padding-block: 1.5rem 3.5rem; }
.clown-erreur-clown { justify-self: center; width: min(100%, 26rem); height: auto; filter: drop-shadow(0 10px 12px rgba(120, 70, 0, 0.18)); }
.clown-erreur-texte { text-align: center; }
.clown-erreur-texte h1 { margin: 0 0 1rem; line-height: 1.12; letter-spacing: -0.02em; }
.clown-erreur-ligne1 { display: block; font-size: clamp(2.5rem, 5.4vw, 3.9rem); font-weight: 800; color: #1b1f3b; }
/* Trait ondulé rose sous « mais... » (SVG en data-URI : rien à charger). */
.clown-erreur-souligne { position: relative; display: inline-block; }
.clown-erreur-souligne::after { content: ""; position: absolute; left: 0; right: 0.4em; bottom: -0.2em; height: 0.28em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c12-8 22-8 34-2s22 2 34-3 20-2 28 0' fill='none' stroke='%23ff0999' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.clown-erreur-ligne2 { display: block; max-width: 25rem; margin: 0.7rem auto 0; font-size: clamp(1.7rem, 3.3vw, 2.5rem); font-weight: 800; color: #e0157a; }
.clown-erreur-texte p { margin: 0 0 1.6rem; font-size: 1.1rem; line-height: 1.55; color: #2b2a33; }
.clown-erreur-bouton { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 56px; padding: 0.8rem 2.2rem; border-radius: 9999px; background: linear-gradient(90deg, #ff2d8f, #f5117c); color: #ffffff; font-size: 1.25rem; font-weight: 800; text-decoration: none; box-shadow: 0 12px 22px -10px rgba(245, 17, 124, 0.75); transition: var(--clown-transition); }
.clown-erreur-bouton svg { width: 1.4rem; height: 1.4rem; }
.clown-erreur-bouton:hover { color: #ffffff; transform: translateY(-2px); filter: brightness(1.06); }
.clown-erreur-bouton:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 3px; }

/* Ballons sur les côtés (décor ; masqués sous 1200 px où ils chevaucheraient le contenu). */
.clown-erreur-ballons { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(120, 70, 0, 0.2)); }
.clown-erreur-ballons--gauche { left: 4%; top: 6.5rem; width: 120px; }
.clown-erreur-ballons--droite-orange { right: 6%; top: 6rem; width: 84px; }
.clown-erreur-ballons--droite-bleu { right: 2.5%; top: 11rem; width: 74px; }
@media (max-width: 1199.98px) { .clown-erreur-ballons { display: none; } }

@media (max-width: 767.98px) {
    .clown-erreur-hero { grid-template-columns: 1fr; min-height: 0; padding-bottom: 2.5rem; }
    .clown-erreur-clown { width: min(80%, 17rem); }
    .clown-erreur-bouton { width: 100%; justify-content: center; padding-inline: 1.2rem; }
}

/* Pied de page : petit trait rose sous chaque titre de colonne (« Nos univers », « Informations », « Besoin d'aide ? », « Nos coordonnées »), comme la maquette. */
.clown-footer-titre::after { content: ""; display: block; width: 1.7rem; height: 3px; margin-top: 0.5rem; border-radius: 3px; background: var(--clown-rose-vif); }

/* --------------------------------------------------------------------------
   30. Fiche produit, onglet Location : deux encadrés roses (en boutique / à distance), comme la maquette — demande du propriétaire du 25/09/2026
   -------------------------------------------------------------------------- */
/* Cadre « warning » en tête d'onglet : ambre, icône triangle, « À noter » puis « pas encore en ligne » (texte foncé sur fond ambre pâle : contraste ≥ 7:1). */
.clown-location-alerte { display: flex; align-items: flex-start; gap: 0.8rem; margin: 0 0 1rem; padding: 0.9rem 1.1rem; border: 1px solid #f1c96b; border-left: 5px solid #f59e0b; border-radius: 12px; background: #fff6dd; color: #4a3200; font-size: 0.93rem; line-height: 1.55; }
.clown-location-alerte > i { flex: none; margin-top: 0.05rem; font-size: 1.35rem; color: #c2410c; }
.clown-location-alerte p { margin: 0 0 0.45rem; }
.clown-location-alerte p:last-child { margin-bottom: 0; }
.clown-location-alerte b { color: #2b1c00; }

/* Encadré : fond rose pâle, coins arrondis, grande icône rose à gauche (contour, comme la maquette), titre rose foncé (contraste ≥ 4,5:1). */
.clown-location-mode { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 1.1rem; margin-bottom: 1rem; padding: 1.2rem 1.4rem; border-radius: 16px; background: #fff0f4; }
.clown-location-icone { font-size: 2.4rem; line-height: 1; color: var(--clown-rose-vif); }
.clown-location-titre { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: #c2075f; }
.clown-location-corps p { margin: 0 0 0.6rem; font-size: 0.93rem; line-height: 1.6; color: #3d3a4b; }
.clown-location-corps p:last-of-type { margin-bottom: 0; }
.clown-location-corps b { color: #1b1f3b; }

/* Tarif à distance : une ligne blanche par poste. */
.clown-location-tarif { display: grid; gap: 0.35rem; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.clown-location-tarif li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 0.45rem 0.8rem; border-radius: 10px; background: #ffffff; font-size: 0.93rem; }
.clown-location-tarif li span { min-width: 12rem; font-weight: 600; color: #3d3a4b; }
.clown-location-tarif small { flex-basis: 100%; color: #6b6880; font-size: 0.85rem; }
.clown-location-paiement { display: grid; gap: 0.4rem; margin: 0 0 0.9rem; padding-left: 1.6rem; list-style: decimal; font-size: 0.93rem; line-height: 1.6; color: #3d3a4b; }
.clown-location-paiement li::marker { font-weight: 800; color: var(--clown-rose-vif); }
.clown-location-demande { margin-top: 0.9rem; }
/* Deuxième encadré (à distance) en bleu, pour le distinguer du rose de la boutique : fond bleu pâle, icône et titre bleus (titre : contraste ≥ 5:1). */
.clown-location-mode--distance { background: #eef5ff; }
.clown-location-mode--distance .clown-location-icone { color: #2f7de1; }
.clown-location-mode--distance .clown-location-titre { color: #1d5fbf; }
.clown-location-mode--distance .clown-location-paiement li::marker { color: #2f7de1; }
@media (max-width: 575.98px) {
    .clown-location-mode { grid-template-columns: 2rem minmax(0, 1fr); gap: 0 0.7rem; padding: 1rem; }
    .clown-location-icone { font-size: 1.9rem; }
}

/* --------------------------------------------------------------------------
   31. Indicateur de chargement du site public (Composants/Chargement.razor) : carte ronde au centre + anneau aux couleurs du site
   -------------------------------------------------------------------------- */
.clown-chargement { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; pointer-events: none; }
/* Bordure dégradé orange → rose de 3 px (demande du propriétaire, 26/09/2026) : fond blanc en padding-box, dégradé en border-box, coins arrondis conservés. */
.clown-chargement-carte { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; min-width: 9.5rem; padding: 1.5rem 2rem; border: 3px solid transparent; border-radius: 22px; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, #ff9f1a, #f5117c) border-box; box-shadow: 0 20px 46px -12px rgba(120, 70, 0, 0.5); animation: clown-fade-in 0.2s ease; }
.clown-chargement-anneau { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 5px solid #ffe1ef; border-top-color: var(--clown-rose-vif); border-right-color: #ff9f1a; animation: clown-spinner 0.85s linear infinite; }
.clown-chargement-texte { font-size: 0.92rem; font-weight: 800; color: #1b1f3b; }
@keyframes clown-chargement-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* « Réduire les animations » : pas de rotation, mais un battement d'opacité qui reste visible (exception voulue à la règle générale). */
@media (prefers-reduced-motion: reduce) {
    .clown-chargement-carte { animation: none !important; }
    .clown-chargement-anneau { border-color: var(--clown-rose-vif); animation: clown-chargement-pulse 1.4s ease-in-out infinite !important; animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
}

/* --------------------------------------------------------------------------
   32. Fenêtre « Question sur l'article » (maquette du 25/09/2026) : Modal Festif + formulaire à pastilles d'icônes
   -------------------------------------------------------------------------- */
.clown-dialogue-question { max-width: 640px; }
.clown-modal-festif .modal-content { border: 0; border-radius: 26px; }
/* En-tête : dégradé orange → rose, titre blanc, décor de fête à droite ; le corps blanc remonte sur le bas de l'en-tête (coins arrondis). */
.clown-modal-entete-festif { position: relative; padding: 1.5rem 1.7rem 2.9rem; border: 0; background: linear-gradient(100deg, #ff9f1a 0%, #ff5a3c 55%, #f5117c 100%); color: #ffffff; }
.clown-modal-entete-festif .modal-title { position: relative; z-index: 2; font-size: clamp(1.4rem, 3.4vw, 1.85rem); font-weight: 800; letter-spacing: -0.01em; text-shadow: 0 2px 6px rgba(120, 30, 0, 0.25); }
.clown-modal-entete-festif .btn-close { position: relative; z-index: 2; align-self: flex-start; width: 2.4rem; height: 2.4rem; font-size: 1.35rem; color: #ffffff; opacity: 0.95; }
.clown-modal-entete-festif .btn-close:hover { background: rgba(255, 255, 255, 0.2); border-radius: 50%; }
.clown-modal-entete-festif .btn-close:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; border-radius: 50%; }
.clown-modal-decor { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.clown-modal-decor img { position: absolute; height: auto; filter: drop-shadow(0 3px 5px rgba(120, 30, 0, 0.3)); }
.clown-modal-decor-etoile--jaune { right: 36%; top: 24%; width: 22px; transform: rotate(-12deg); }
.clown-modal-decor-etoile--rose { right: 24%; top: 10%; width: 20px; transform: rotate(14deg); }
.clown-modal-decor-cotillon { right: 13%; bottom: 0.9rem; width: 62px; }
.clown-modal-festif .modal-body { position: relative; z-index: 3; margin-top: -1.5rem; padding: 1.7rem 1.7rem 1.9rem !important; border-radius: 24px 24px 0 0; background: #ffffff; }

.clown-question-form { display: block; }
.clown-question-champ { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; align-items: start; margin-bottom: 1.15rem; }
.clown-question-disque { display: grid; place-items: center; width: 3rem; height: 3rem; margin-top: 0.15rem; border-radius: 50%; font-size: 1.35rem; }
.clown-question-disque--orange { background: #fff0df; color: #ff8a1f; }
.clown-question-disque--rose { background: #ffe3ee; color: #f5117c; }
.clown-question-disque--violet { background: #efe9ff; color: #6d4bd8; }
.clown-question-champ label { display: block; margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 800; color: #1b1f3b; }
.clown-question-champ input, .clown-question-champ textarea { width: 100%; min-height: 46px; padding: 0.6rem 0.95rem; border: 1px solid #e4ddd0; border-radius: 12px; background: #ffffff; box-shadow: 0 1px 2px rgba(60, 40, 0, 0.06); font: inherit; font-size: 0.98rem; color: #1b1f3b; }
.clown-question-champ textarea { min-height: 6.6rem; resize: vertical; }
.clown-question-champ input:focus, .clown-question-champ textarea:focus { border-color: var(--clown-rose-vif); outline: 3px solid rgba(255, 9, 153, 0.18); }
.clown-question-champ ::placeholder { color: #8e8ba0; }
.clown-question-envoi { display: flex; justify-content: flex-end; margin-top: 1.3rem; }
.clown-question-succes { display: grid; place-items: center; gap: 0.8rem; min-height: 13rem; padding: 1rem; text-align: center; color: #15803d; }
.clown-question-succes i { font-size: 3rem; }
.clown-question-succes p { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.4; }
@media (max-width: 575.98px) {
    .clown-modal-entete-festif { padding: 1.1rem 1.1rem 2.5rem; }
    .clown-modal-decor-cotillon { right: 4.2rem; width: 50px; }
    .clown-modal-decor-etoile--jaune { right: 40%; }
    .clown-modal-festif .modal-body { padding: 1.4rem 1.1rem 1.5rem !important; }
    .clown-question-champ { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 0.7rem; }
    .clown-question-disque { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
    .clown-question-envoi .clown-contact-bouton { width: 100%; }
}

/* --------------------------------------------------------------------------
   33. Panier latéral (tiroir #offcanvasPanier, maquette « panier compact » du 25/09/2026) — Composants/LePanier.razor, mode OffCanvas
   -------------------------------------------------------------------------- */
.clown-panier-lateral { width: 460px; padding: 0 0 0.9rem; border-left: 0; border-radius: 26px 0 0 26px; overflow: hidden; }
@media (max-width: 575.98px) { .clown-panier-lateral { width: 100%; border-radius: 0; } }

/* En-tête : titre, pastille rouge du nombre d'articles, sous-titre ; le sac souriant (SVG) à droite ; croix en haut à droite. */
.clown-panier-entete { position: relative; flex: none; padding: 1.4rem 1.5rem 1rem; }
.clown-panier-entete .btn-close { position: absolute; top: 0.9rem; right: 1rem; z-index: 2; width: 2.2rem; height: 2.2rem; color: #1b1f3b; font-size: 1.3rem; }
.clown-panier-entete h2 { margin: 0.2rem 0 0.15rem; font-size: 1.65rem; font-weight: 800; letter-spacing: -0.01em; color: #1b1f3b; }
.clown-panier-compteur { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 0.45rem; margin-left: 0.3rem; border-radius: 9999px; background: #c81e3a; color: #ffffff; font-size: 1rem; font-weight: 800; vertical-align: 0.15em; }
.clown-panier-entete p { margin: 0; font-size: 0.95rem; color: #6b6880; }
.clown-panier-sac { position: absolute; top: 0.4rem; right: 3.6rem; width: 5.6rem; height: auto; pointer-events: none; }

/* Carte « Total » jaune pâle + bouton Commander. */
.clown-panier-total { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 0.8rem; margin: 0 1.1rem; padding: 0.9rem 1rem; border-radius: 16px; background: #fff3c9; }
.clown-panier-total > div { display: grid; }
.clown-panier-total span { font-size: 0.95rem; font-weight: 700; color: #1b1f3b; }
.clown-panier-total strong { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: #e0157a; }

/* Boutons : rose plein (Commander) ou contour rose (Voir le panier). Texte 1,05 rem gras = « grand » : contraste blanc sur rose ≥ 3:1. */
.clown-panier-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.6rem 1.3rem; border: 2px solid transparent; border-radius: 12px; background: linear-gradient(90deg, #ff2d8f, #f5117c) border-box; color: #ffffff; font-size: 1.1rem; font-weight: 800; text-decoration: none; box-shadow: 0 8px 16px -8px rgba(245, 17, 124, 0.7); transition: var(--clown-transition); }
.clown-panier-bouton:hover { color: #ffffff; filter: brightness(1.06); transform: translateY(-1px); }
.clown-panier-bouton:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }
.clown-panier-bouton--contour { border-color: #f5117c; background: #ffffff; color: #d10a6b; box-shadow: none; }
.clown-panier-bouton--contour:hover { color: #a3074f; background: #fff0f6; }

/* Liste des articles : c'est elle qui défile (l'en-tête, le total et le bas restent visibles). */
.clown-panier-liste { flex: 1 1 auto; min-height: 6rem; margin: 0.7rem 0 0; padding: 0 1.4rem; overflow-y: auto; }
.clown-panier-ligne { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto; grid-template-areas: "photo infos suppr" "photo infos prix"; gap: 0.2rem 0.9rem; padding: 0.95rem 0; border-bottom: 1px solid #efe6d6; }
.clown-panier-ligne:last-child { border-bottom: 0; }
.clown-panier-photo { grid-area: photo; width: 4.4rem; height: 4.4rem; border: 1px solid #eee5d6; border-radius: 12px; background: #f7f4ee; object-fit: contain; }
.clown-panier-infos { grid-area: infos; min-width: 0; }
.clown-panier-infos h3 { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.25; color: #1b1f3b; }
.clown-panier-ref { margin: 0.1rem 0 0.35rem; font-size: 0.85rem; color: #6b6880; }
.clown-panier-puces { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin: 0 0 0.5rem; font-size: 0.85rem; color: #4a4760; }
.clown-panier-puces span { padding: 0.12rem 0.65rem; border-radius: 9999px; background: #e6f1ff; }
.clown-panier-puces b { color: #1d5fbf; }
.clown-panier-qte { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem; border: 2px solid #e4ddd0; border-radius: 9999px; }
.clown-panier-qte button { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: #ffffff; font-size: 1.15rem; font-weight: 800; line-height: 1; color: #1b1f3b; cursor: pointer; }
.clown-panier-qte button:hover { background: #fff0f6; color: #d10a6b; }
.clown-panier-qte button:focus-visible { outline: 3px solid #1b1f3b; }
.clown-panier-qte input { width: 2.6rem; min-height: 0; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 800; text-align: center; color: #1b1f3b; -moz-appearance: textfield; }
.clown-panier-qte input::-webkit-outer-spin-button, .clown-panier-qte input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.clown-panier-alerte { margin: 0.4rem 0 0; font-size: 0.82rem; font-weight: 600; color: #b42318; }
.clown-panier-suppr { grid-area: suppr; align-self: start; justify-self: end; width: 2.4rem; height: 2.4rem; border: 1px solid #f5b8d0; border-radius: 10px; background: #fff5f9; color: #d10a6b; cursor: pointer; }
.clown-panier-suppr:hover { background: #ffe3ee; }
.clown-panier-suppr:focus-visible { outline: 3px solid #1b1f3b; }
.clown-panier-prix { grid-area: prix; align-self: end; justify-self: end; font-size: 1.1rem; font-weight: 800; color: #e0157a; }

/* Rappels : trois colonnes sur fond rose pâle. Masqués sur écran bas pour laisser la place à la liste. */
.clown-panier-rappels { display: grid; flex: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0.4rem 1.1rem 0; padding: 0.8rem 0.3rem; list-style: none; border-radius: 14px; background: #fff0f5; }
.clown-panier-rappels li { display: grid; align-content: start; gap: 0.1rem; padding: 0 0.6rem; font-size: 0.75rem; line-height: 1.3; color: #55536f; }
.clown-panier-rappels li + li { border-left: 1px solid #f5d3e2; }
.clown-panier-rappels i { font-size: 1.5rem; line-height: 1.2; color: #ff8a1f; }
.clown-panier-rappels b { font-size: 0.8rem; color: #1b1f3b; }
@media (max-height: 760px) { .clown-panier-rappels { display: none; } }

/* Récapitulatif + boutons du bas. */
.clown-panier-resume { flex: none; display: grid; gap: 0.5rem; margin: 0.7rem 1.1rem 0; padding: 0.9rem 1.1rem; border: 1px solid #efe6d6; border-radius: 14px; background: #ffffff; }
.clown-panier-resume > div { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-size: 0.95rem; color: #3d3a4b; }
.clown-panier-resume em { font-style: normal; color: #6b6880; }
.clown-panier-resume strong { font-weight: 800; color: #e0157a; }
.clown-panier-total-ttc { margin-top: 0.2rem; padding-top: 0.7rem; border-top: 1px solid #efe6d6; }
.clown-panier-total-ttc span { font-size: 1.1rem; font-weight: 800; color: #1b1f3b; }
.clown-panier-total-ttc strong { font-size: 1.45rem; }
.clown-panier-aide { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-left: 0.3rem; border-radius: 50%; background: #e7eaf3; font-size: 0.8rem; font-style: normal; font-weight: 800; color: #4a4760; cursor: help; }
.clown-panier-actions { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0.7rem; margin: 0.8rem 1.1rem 0; }
.clown-panier-actions--seul { grid-template-columns: 1fr; }
/* Visiteur non connecté : pas de « Commander » ; la carte Total n'a plus de bouton (le total reste à gauche). */

.clown-panier-vide { display: grid; flex: 1 1 auto; align-content: center; justify-items: center; gap: 0.8rem; padding: 2rem 1.5rem; text-align: center; color: #4a4760; }
.clown-panier-vide p { margin: 0; font-size: 1.05rem; font-weight: 700; }

@media (max-width: 575.98px) {
    .clown-panier-sac { right: 3.2rem; width: 4.6rem; }
    .clown-panier-entete h2 { font-size: 1.45rem; }
}

/* --------------------------------------------------------------------------
   34. Fenêtre « Se connecter » (maquette « connexion » du 26/09/2026) — Composants/Login.razor, sur Modal Festif (section 32)
   -------------------------------------------------------------------------- */
.clown-dialogue-connexion { max-width: 600px; }
/* text-align: left : la fenêtre est incluse dans un bloc « text-center » sur la page Panier, ses libellés seraient sinon centrés. */
.clown-connexion { display: block; text-align: left; }

/* Phrase d'accroche centrée, avec trois petits losanges de fête (décoratifs). */
.clown-connexion-intro { position: relative; margin: 0 0 1.3rem; padding: 0 1.7rem; text-align: center; font-size: 1.05rem; line-height: 1.6; color: #3d3a4b; }
.clown-connexion-losange { position: absolute; display: block; transform: rotate(45deg); }
.clown-connexion-losange--jaune { left: 0.1rem; top: 0.25rem; width: 0.45rem; height: 0.45rem; background: #ffc21a; }
.clown-connexion-losange--orange { left: 0.9rem; top: 1.7rem; width: 0.75rem; height: 0.75rem; background: #ff8a1f; }
.clown-connexion-losange--rose { right: 0.3rem; top: 1.55rem; width: 0.7rem; height: 0.7rem; background: #f5117c; }

/* Champs : icône à gauche, fond jaune pâle, coins très arrondis. */
/* Resserré le 03/10/2026 : la fenêtre ouverte depuis le panier débordait de 135 px sur un portable 1366 x 768. */
.clown-connexion-champ { margin-bottom: 0.8rem; }
.clown-connexion-champ label { display: block; margin: 0 0 0.3rem; font-size: 1rem; font-weight: 600; color: #1b1f3b; }
.clown-connexion-titre { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 800; color: #1b1f3b; }
.clown-connexion-saisie { position: relative; }
.clown-connexion-saisie i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.35rem; line-height: 1; color: #6f7488; pointer-events: none; }
.clown-connexion-saisie input { width: 100%; min-height: 50px; padding: 0.7rem 1rem 0.7rem 3.3rem; border: 1px solid #e3d78a; border-radius: 16px; background: #fffbd6; box-shadow: inset 0 1px 2px rgba(120, 90, 0, 0.06); font: inherit; font-size: 1.08rem; color: #1b1f3b; }
.clown-connexion-saisie input:focus { border-color: var(--clown-rose-vif); outline: 3px solid rgba(255, 9, 153, 0.18); background: #fffde9; }
/* Le remplissage automatique du navigateur (bleuté) garde le fond jaune pâle. */
.clown-connexion-saisie input:-webkit-autofill { -webkit-text-fill-color: #1b1f3b; box-shadow: 0 0 0 100px #fffbd6 inset; }
.clown-connexion-oubli { margin-top: 0.3rem; text-align: right; }
.clown-connexion-oubli button { padding: 0.2rem 0; border: 0; background: none; font: inherit; font-size: 0.98rem; font-weight: 600; color: #d10a6b; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.clown-connexion-oubli button:hover { color: #a3074f; }
.clown-connexion-oubli button:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; border-radius: 4px; }

/* Bouton pilule dégradé orange → rose, entre deux petits jeux de traits colorés. Texte blanc gras 1,3 rem = « grand » : contraste ≥ 3:1 sur la zone du texte (vérifié à l'écran). */
.clown-connexion-action { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem; align-items: center; gap: 0.3rem; margin-top: 0.9rem; }
.clown-connexion-action img { width: 100%; height: auto; }
.clown-connexion-bouton { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 56px; padding: 0.6rem 3.4rem; border: 0; border-radius: 9999px; background: linear-gradient(90deg, #ff9f1a 0%, #ff4d5e 26%, #f5117c 62%, #e6009f 100%); color: #ffffff; font-size: 1.3rem; font-weight: 800; text-shadow: 0 1px 3px rgba(110, 10, 40, 0.35); box-shadow: 0 12px 22px -10px rgba(245, 17, 124, 0.75); cursor: pointer; transition: var(--clown-transition); }
.clown-connexion-bouton > i { position: absolute; right: 1.7rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; line-height: 1; }
.clown-connexion-bouton:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.clown-connexion-bouton:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 3px; }
.clown-connexion-bouton:disabled { opacity: 0.55; box-shadow: none; cursor: not-allowed; }

/* Messages d'erreur / de confirmation (remplacent les alertes Bootstrap). */
.clown-connexion-message { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.98rem; font-weight: 600; line-height: 1.4; }
.clown-connexion-message--erreur { background: #fdecef; color: #a3162d; }
.clown-connexion-message--succes { background: #e8f7ee; color: #146c3a; }
/* Action dans un message (ex. « Se connecter » sur Transport quand l'e-mail a déjà un compte). */
.clown-connexion-message button { margin-left: auto; padding: 0.35rem 0.9rem; border: 2px solid currentColor; border-radius: 9999px; background: #ffffff; font: inherit; font-weight: 700; color: inherit; cursor: pointer; white-space: nowrap; }
.clown-connexion-message button:hover { background: #fff6f7; }
.clown-connexion-message button:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }

/* Boutons secondaires : connexion sociale, « Créer un compte », « Continuer sans compte », « Revenir à la connexion ». */
.clown-connexion-ou { display: flex; align-items: center; gap: 0.8rem; margin: 1rem 0 0; font-size: 0.95rem; color: #6b6880; }
.clown-connexion-ou::before, .clown-connexion-ou::after { content: ""; flex: 1; height: 1px; background: #e4ddd0; }
.clown-connexion-alternatives { display: grid; gap: 0.6rem; margin-top: 1.1rem; }
.clown-connexion-secondaire { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.55rem 1.2rem; border: 2px solid #f5b8d0; border-radius: 9999px; background: #ffffff; font: inherit; font-size: 1.02rem; font-weight: 700; color: #d10a6b; text-decoration: none; cursor: pointer; transition: var(--clown-transition); }
.clown-connexion-secondaire:hover { background: #fff0f6; color: #a3074f; }
.clown-connexion-secondaire:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }
.clown-connexion-secondaire i { margin-right: 0.6rem; font-size: 1.2rem; line-height: 1; }
/* « Continuer sans créer de compte » (fenêtre du panier) : le bouton le plus voyant, pilule dégradé pleine largeur (texte blanc gras 1,2 rem : contraste ≥ 3:1). */
.clown-connexion-invite { display: flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 3.7rem; padding: 0.6rem 1.4rem; border: 0; border-radius: 9999px; background: linear-gradient(90deg, #f5117c 0%, #ff3d6a 55%, #ff6e28 100%); color: #ffffff; font-size: 1.2rem; font-weight: 800; line-height: 1.25; text-align: center; text-shadow: 0 1px 3px rgba(110, 10, 40, 0.3); box-shadow: 0 10px 22px -10px rgba(245, 17, 124, 0.8); cursor: pointer; transition: var(--clown-transition); }
.clown-connexion-invite:hover { filter: brightness(1.06); transform: translateY(-1px); }
.clown-connexion-invite:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 3px; }
.clown-connexion-invite i { font-size: 1.3rem; line-height: 1; }
/* Depuis le panier, « Continuer sans créer de compte » suit le formulaire, sous le séparateur « ou ». */
.clown-connexion-ou + .clown-connexion-invite { width: 100%; margin-top: 0.8rem; }

/* « Créer un compte » : accordéon replié (<details> natif, comme la FAQ), car le propriétaire ne veut pas pousser à la création de compte. */
.clown-connexion-creer { margin-top: 1rem; border-top: 1px solid #efe6d6; }
.clown-connexion-creer summary { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 0.2rem 0.2rem; font-size: 1.02rem; font-weight: 700; color: #d10a6b; list-style: none; cursor: pointer; }
.clown-connexion-creer summary::-webkit-details-marker { display: none; }
.clown-connexion-creer summary i { margin-right: 0.5rem; font-size: 1.15rem; }
.clown-connexion-creer summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 0.3rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; }
.clown-connexion-creer[open] summary::after { transform: rotate(-135deg); }
.clown-connexion-creer summary:hover { color: #a3074f; }
.clown-connexion-creer summary:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; border-radius: 6px; }
.clown-connexion-creer-aide { margin: 0.5rem 0 0.7rem; font-size: 0.92rem; line-height: 1.45; color: #6b6880; }
.clown-connexion-sociaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin-bottom: 0.6rem; }
.clown-connexion-creer > .clown-connexion-secondaire { width: 100%; }
@media (max-width: 575.98px) {
    .clown-connexion-intro { padding: 0 1.2rem; font-size: 1rem; }
    .clown-connexion-saisie input { min-height: 48px; }
    .clown-connexion-action { grid-template-columns: 1.6rem minmax(0, 1fr) 1.6rem; gap: 0.2rem; }
    .clown-connexion-bouton { min-height: 54px; padding: 0.6rem 2.6rem; font-size: 1.2rem; }
    .clown-connexion-bouton > i { right: 1.2rem; }
}

/* --------------------------------------------------------------------------
   35. Page « Nouveau mot de passe » (maquette « mot de passe » du 26/09/2026) — Pages/Compte/Reinitialiser.razor
   -------------------------------------------------------------------------- */
.clown-mdp-page { min-height: 34rem; }

/* Décor : boîte de 1000 px centrée derrière la carte (confettis en fond SVG + quatre étoiles), masquée sous 1100 px. */
.clown-mdp-decor { position: absolute; top: 3.2rem; left: 50%; z-index: 0; width: 1000px; height: 520px; margin-left: -500px; background: url("/img/mdp-confettis.svg") center / 100% 100% no-repeat; pointer-events: none; }
.clown-mdp-etoile { position: absolute; height: auto; filter: drop-shadow(0 3px 4px rgba(120, 70, 0, 0.18)); }
.clown-mdp-etoile--rose { left: 126px; top: 80px; width: 46px; transform: rotate(-10deg); }
.clown-mdp-etoile--bleue-g { left: 112px; top: 294px; width: 44px; transform: rotate(12deg); }
.clown-mdp-etoile--bleue-d { left: 810px; top: 142px; width: 44px; transform: rotate(-8deg); }
.clown-mdp-etoile--jaune { left: 862px; top: 312px; width: 40px; transform: rotate(10deg); }
@media (max-width: 1099.98px) { .clown-mdp-decor { display: none; } }

/* Carte blanche centrée. */
.clown-mdp-carte { position: relative; z-index: 1; max-width: 560px; margin: 1.2rem auto 0; padding: 1.5rem 1.7rem 1.6rem; border-radius: 22px; background: #ffffff; box-shadow: 0 16px 36px -16px rgba(120, 70, 0, 0.4); }
.clown-mdp-cadenas { display: grid; place-items: center; width: 200px; height: 64px; margin: 0 auto; background: url("/img/mdp-tirets.svg") center / 100% 100% no-repeat; }
.clown-mdp-cadenas span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #ffe08a; font-size: 1.7rem; color: #e07a00; }
.clown-mdp-carte h1 { margin: 0.5rem 0 0.4rem; text-align: center; font-size: clamp(1.7rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: #1b1f3b; }
.clown-mdp-intro { margin: 0 0 1.3rem; text-align: center; font-size: 1rem; line-height: 1.6; color: #3d3a4b; }

/* Champs : icône cadenas à gauche, œil à droite (celui, natif, d'Edge est masqué pour ne pas doubler le nôtre). */
.clown-mdp-champ { margin-bottom: 1rem; }
.clown-mdp-champ label { display: block; margin: 0 0 0.4rem; font-size: 1rem; font-weight: 800; color: #1b1f3b; }
.clown-mdp-saisie { position: relative; }
.clown-mdp-saisie > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; line-height: 1; color: #55536f; pointer-events: none; }
.clown-mdp-saisie input { width: 100%; min-height: 54px; padding: 0.6rem 3.3rem 0.6rem 3rem; border: 1px solid #ddd6c8; border-radius: 14px; background: #ffffff; box-shadow: 0 1px 2px rgba(60, 40, 0, 0.06); font: inherit; font-size: 1rem; color: #1b1f3b; }
.clown-mdp-saisie input::placeholder { color: #6b6880; }
.clown-mdp-saisie input::-ms-reveal { display: none; }
.clown-mdp-saisie input:focus { border-color: var(--clown-rose-vif); outline: 3px solid rgba(255, 9, 153, 0.18); }
.clown-mdp-oeil { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: transparent; font-size: 1.25rem; color: #55536f; cursor: pointer; }
.clown-mdp-oeil:hover { background: #fff0f6; color: #d10a6b; }
.clown-mdp-oeil:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 1px; }
.clown-mdp-indice { margin: 0.4rem 0 0; font-size: 0.9rem; font-weight: 600; color: #a3162d; }

/* Encadré des règles : fond crème, bouclier jaune, quatre lignes sur deux colonnes ; coche verte quand la règle est respectée. */
.clown-mdp-regles { display: flex; gap: 0.8rem; margin: 1.1rem 0 1.2rem; padding: 0.9rem 1rem; border-radius: 14px; background: #fff6e4; }
.clown-mdp-regles-icone { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #ffd25e; font-size: 1.05rem; color: #7a4a00; }
.clown-mdp-regles p { margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 800; color: #1b1f3b; }
.clown-mdp-regles ul { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 0.3rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.clown-mdp-regles li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #55536f; }
.clown-mdp-regles li i { font-size: 1.05rem; color: #8e8ba0; }
.clown-mdp-regle--ok { color: #1b1f3b; }
.clown-mdp-regles .clown-mdp-regle--ok i { color: #1f9d4c; }

/* Boutons : « Enregistrer » dégradé rose → orange (texte blanc gras 1,2 rem, contraste ≥ 3:1 sous le texte) et « Annuler » blanc en pilule. */
.clown-mdp-actions { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0.9rem; margin-top: 1.2rem; }
.clown-mdp-actions--seul { grid-template-columns: 1fr; }
.clown-mdp-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 54px; padding: 0.6rem 1.3rem; border: 0; border-radius: 9999px; background: linear-gradient(90deg, #f5117c 0%, #ff3d6a 55%, #ff6e28 100%); color: #ffffff; font-size: 1.2rem; font-weight: 800; text-decoration: none; text-shadow: 0 1px 3px rgba(110, 10, 40, 0.3); box-shadow: 0 10px 20px -10px rgba(245, 17, 124, 0.7); cursor: pointer; transition: var(--clown-transition); }
.clown-mdp-bouton:hover:not(:disabled) { color: #ffffff; filter: brightness(1.06); transform: translateY(-1px); }
.clown-mdp-bouton:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 3px; }
.clown-mdp-bouton:disabled { opacity: 0.55; box-shadow: none; cursor: not-allowed; }
.clown-mdp-annuler { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0.6rem 1.3rem; border-radius: 9999px; background: #ffffff; box-shadow: 0 4px 14px -4px rgba(60, 40, 0, 0.3), 0 0 0 1px #eee5d6; font-size: 1.1rem; font-weight: 800; color: #1b1f3b; text-decoration: none; transition: var(--clown-transition); }
.clown-mdp-annuler:hover { background: #fff0f6; color: #a3074f; }
.clown-mdp-annuler:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 3px; }

/* Messages (lien expiré, succès, erreur). */
.clown-mdp-message { margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: 12px; font-size: 0.98rem; font-weight: 600; line-height: 1.5; }
.clown-mdp-message--succes { background: #e8f7ee; color: #146c3a; }
.clown-mdp-message--attention { background: #fff3cd; color: #6b4a00; }
.clown-mdp-message--erreur { background: #fdecef; color: #a3162d; }

@media (max-width: 575.98px) {
    .clown-mdp-carte { margin-top: 0.6rem; padding: 1.2rem 1.1rem 1.3rem; }
    .clown-mdp-regles ul { grid-template-rows: none; grid-auto-flow: row; }
    .clown-mdp-actions { grid-template-columns: 1fr; }
    .clown-mdp-page { min-height: 0; }
}

/* --------------------------------------------------------------------------
   36. Visionneuse photo de la fiche produit : flèches précédent / suivant et compteur (clown-site.js, sous « Visionneuse photo plein écran »)
   -------------------------------------------------------------------------- */
.clown-lightbox-fleche { position: absolute; top: 50%; z-index: 3002; display: grid; place-items: center; width: 54px; height: 54px; padding: 0 0 0.25rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); font-size: 2rem; line-height: 1; color: #1b1f3b; cursor: pointer; transform: translateY(-50%); transition: var(--clown-transition); }
.clown-lightbox-fleche:hover { background: #ffffff; color: var(--clown-rose-vif); transform: translateY(-50%) scale(1.08); }
.clown-lightbox-fleche:focus-visible, .clown-lightbox-close:focus-visible { outline: 3px solid #ffc21a; outline-offset: 3px; }
.clown-lightbox-fleche--prev { left: 1.2rem; }
.clown-lightbox-fleche--suiv { right: 1.2rem; }
.clown-lightbox-compteur { position: absolute; bottom: 1.2rem; left: 50%; z-index: 3002; margin: 0; padding: 0.3rem 1rem; border-radius: 9999px; background: rgba(15, 23, 42, 0.75); font-size: 0.95rem; font-weight: 700; color: #ffffff; transform: translateX(-50%); }
.clown-lightbox--seule .clown-lightbox-fleche, .clown-lightbox--seule .clown-lightbox-compteur { display: none; }
@media (max-width: 575.98px) {
    .clown-lightbox-fleche { width: 44px; height: 44px; font-size: 1.7rem; }
    .clown-lightbox-fleche--prev { left: 0.5rem; }
    .clown-lightbox-fleche--suiv { right: 0.5rem; }
}

/* --------------------------------------------------------------------------
   37. Page Panier (maquette « page panier » du 26/09/2026) : étapes (Breadcom.razor), tableau des articles et carte « Total » (LePanier.razor,
   modes Edition et Normal), bouton « Valider » et décor (Pages/Tunnel/Panier.razor)
   -------------------------------------------------------------------------- */

/* Étapes : barre arrondie crème ; l'étape en cours a un disque rose et son numéro en badge orange (chiffre foncé : le blanc sur orange ne passe pas le contraste). */
.clown-etapes-conteneur { margin-top: 1.1rem; }
.clown-etapes { padding: 0.75rem 1.2rem; border-radius: 22px; background: #fff6df; box-shadow: 0 6px 20px -10px rgba(120, 70, 0, 0.35); }
.clown-etapes ol { display: flex; align-items: center; justify-content: center; gap: 0.4rem 0.9rem; margin: 0; padding: 0; list-style: none; }
.clown-etape { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; color: #55536f; }
/* Trait de liaison entre deux étapes : rose après une étape faite (maquette « checkout transport »), gris sinon. */
.clown-etape + .clown-etape::before { content: ""; flex: none; width: 3.2rem; height: 2px; margin-right: 0.5rem; border-radius: 2px; background: #d6d0e3; }
.clown-etape--faite + .clown-etape::before { background: #f5117c; }
.clown-etape-disque { position: relative; display: grid; flex: none; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #ece8f2; font-size: 1.2rem; color: #3d3a4b; }
.clown-etape-numero { display: none; }
.clown-etape--actuelle .clown-etape-disque { width: 3rem; height: 3rem; margin-right: 0.5rem; background: linear-gradient(135deg, #ff2d8f, #f5117c); color: #ffffff; box-shadow: 0 6px 14px -6px rgba(245, 17, 124, 0.8); }
.clown-etape--actuelle .clown-etape-numero { position: absolute; right: -0.85rem; top: 50%; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #ffa62b; font-size: 0.8rem; font-weight: 800; line-height: 1; color: #1b1f3b; transform: translateY(-50%); }
.clown-etape--actuelle .clown-etape-libelle { font-weight: 800; color: #d10a6b; }
/* Tablette : les 4 libellés + traits de 3,2 rem débordaient à 768 px (« Confirmation » contre le bord, disque rose rogné à gauche). Revue responsive du 05/10/2026. */
@media (max-width: 991.98px) {
    .clown-etapes ol { gap: 0.3rem 0.6rem; }
    .clown-etape { gap: 0.45rem; font-size: 0.95rem; }
    .clown-etape + .clown-etape::before { width: 1.6rem; margin-right: 0.3rem; }
}
/* Téléphone : disques et traits plus petits, sinon le 4e disque était rogné à 360 px. */
@media (max-width: 575.98px) {
    .clown-etapes { padding: 0.6rem 0.8rem; }
    .clown-etapes ol { gap: 0.3rem 0.4rem; }
    .clown-etape:not(.clown-etape--actuelle) .clown-etape-libelle { display: none; }
    .clown-etape + .clown-etape::before { width: 0.8rem; margin-right: 0.2rem; }
    .clown-etape-disque { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
    .clown-etape--actuelle .clown-etape-disque { width: 2.5rem; height: 2.5rem; }
}

/* Tableau des articles : en-tête gris clair, une ligne (grille) par article. Colonnes de droite fixes (quantité 15 rem, prix 8,5 rem) pour que l'en-tête s'aligne sur les lignes. */
.clown-page-panier { position: relative; z-index: 1; padding-top: 1.4rem; padding-bottom: 3rem; }
.clown-panier-table { padding: 0.8rem; border-radius: 20px; background: #ffffff; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-panier-table-entete { display: grid; grid-template-columns: minmax(0, 1fr) 15rem 8.5rem; column-gap: 1.4rem; padding: 0.85rem 1.4rem; border-radius: 12px; background: #f7f4ee; font-weight: 800; color: #1b1f3b; }
.clown-panier-table-entete span:nth-child(2) { text-align: center; }
.clown-panier-table-entete span:nth-child(3) { text-align: right; }
.clown-article { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) 15rem 8.5rem; align-items: center; column-gap: 1.4rem; padding: 1rem 1.4rem; border-bottom: 1px solid #efe6d6; }
.clown-article:last-child { border-bottom: 0; }
.clown-article--sans-photo { grid-template-columns: minmax(0, 1fr) 15rem 8.5rem; }
.clown-article-photo button { display: block; padding: 0; border: 0; border-radius: 14px; background: none; cursor: pointer; }
.clown-article-photo button:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }
.clown-article-photo img { display: block; width: 6.6rem; height: 6.6rem; padding: 0.3rem; border: 1px solid #eee5d6; border-radius: 14px; background: #f7f4ee; object-fit: contain; }
.clown-article-infos h3 { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 800; color: #1b1f3b; }
.clown-article-infos p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #6b6880; }
.clown-article-infos b { color: #1b1f3b; }
.clown-article-quantite { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.7rem; }
.clown-article-lecture { font-weight: 800; color: #1b1f3b; }
.clown-article-etiquette { display: none; font-weight: 600; color: #6b6880; }
/* Quantité − 1 + : une seule boîte à filets, puis la corbeille rose à part. */
.clown-article-qte { display: inline-flex; overflow: hidden; border: 1px solid #ddd6c8; border-radius: 12px; background: #ffffff; }
.clown-article-qte button { width: 2.8rem; height: 2.8rem; border: 0; background: #ffffff; font-size: 1.3rem; font-weight: 800; line-height: 1; color: #1b1f3b; cursor: pointer; }
.clown-article-qte button:hover { background: #fff0f6; color: #d10a6b; }
.clown-article-qte button:focus-visible { position: relative; outline: 3px solid #1b1f3b; outline-offset: -3px; }
.clown-article-qte input { width: 3.3rem; min-height: 0; padding: 0; border: 0; border-inline: 1px solid #ddd6c8; border-radius: 0; background: #ffffff; font: inherit; font-weight: 800; text-align: center; color: #1b1f3b; -moz-appearance: textfield; }
.clown-article-qte input::-webkit-outer-spin-button, .clown-article-qte input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.clown-article-qte input:focus-visible { position: relative; outline: 3px solid #1b1f3b; outline-offset: -3px; }
.clown-article-suppr { width: 2.8rem; height: 2.8rem; border: 2px solid #f5117c; border-radius: 12px; background: #ffffff; font-size: 1.1rem; color: #d10a6b; cursor: pointer; }
.clown-article-suppr:hover { background: #fff0f6; }
.clown-article-suppr:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }
.clown-article-alerte { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.82rem; font-weight: 700; line-height: 1.4; text-align: center; color: #b42318; }
.clown-article-prix { text-align: right; font-size: 1.15rem; font-weight: 800; color: #1b1f3b; }

/* Carte « Total » : sous-total, texte sur les frais de transport, total en rose ; « Valider » chevauche le bas de la carte (mode Edition). */
.clown-panier-cout-zone { display: flex; justify-content: flex-end; margin-top: 1.4rem; }
.clown-panier-cout { position: relative; width: min(100%, 560px); padding: 1.3rem 1.6rem; border-radius: 20px; background: #ffffff; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-panier-cout--edition { margin-bottom: 2.4rem; padding-bottom: 2.9rem; }
.clown-panier-cout-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0.35rem 0; font-size: 1.05rem; color: #1b1f3b; }
.clown-panier-cout-ligne span { font-weight: 700; }
.clown-panier-cout-ligne b { font-weight: 800; }
.clown-panier-cout-info { display: flex; align-items: flex-start; gap: 0.8rem; margin: 0.8rem 0 0.9rem; padding-bottom: 1rem; border-bottom: 1px solid #efe6d6; font-size: 0.9rem; line-height: 1.5; color: #3d3a4b; }
.clown-panier-cout-info i { flex: none; font-size: 1.6rem; line-height: 1; color: #e07a00; }
.clown-panier-cout-total { margin-top: 0.7rem; font-size: 1.3rem; }
.clown-panier-cout-total strong { font-size: 1.7rem; font-weight: 800; color: #e0157a; }
.clown-panier-cout-actions { position: absolute; left: 50%; bottom: -1.8rem; z-index: 2; display: flex; align-items: center; transform: translateX(-50%); }
.clown-panier-cout-actions::after { content: ""; flex: none; width: 2.6rem; height: 4rem; margin-left: 0.5rem; background: url("/img/connexion-tirets-droite.svg") center / contain no-repeat; }

/* Bouton « Valider » : pilule dégradé rose → orange (texte blanc gras 1,4 rem, contraste ≥ 3:1 sous le texte, comme « Enregistrer »). */
.clown-valider { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 17rem; min-height: 3.7rem; padding: 0.6rem 2rem; border: 0; border-radius: 9999px; background: linear-gradient(90deg, #f5117c 0%, #ff3d6a 55%, #ff6e28 100%); color: #ffffff; font-size: 1.4rem; font-weight: 800; text-decoration: none; text-shadow: 0 1px 3px rgba(110, 10, 40, 0.3); box-shadow: 0 10px 22px -10px rgba(245, 17, 124, 0.8), 0 0 0 4px #ffffff; cursor: pointer; transition: var(--clown-transition); }
.clown-valider:hover { color: #ffffff; filter: brightness(1.06); transform: translateY(-1px); }
.clown-valider:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 4px; }

/* Décor de la page Panier : ballons en haut à droite, étoiles, cotillon et slogan en bas à gauche. Uniquement sur grand écran (≥ 1200 px). */
.clown-tunnel-fond { position: relative; overflow-x: clip; }
.clown-tunnel-decor { display: none; }
@media (min-width: 1200px) {
    .clown-tunnel-decor { display: block; }
    .clown-tunnel-decor > * { position: absolute; z-index: 0; margin: 0; pointer-events: none; }
    .clown-tunnel-ballons { top: 5rem; right: -3.2rem; width: 190px; height: auto; transform: rotate(8deg); }
    .clown-tunnel-etoile { height: auto; filter: drop-shadow(0 3px 4px rgba(120, 70, 0, 0.18)); }
    .clown-tunnel-etoile--orange { top: 13rem; left: 1.5%; width: 44px; transform: rotate(-12deg); }
    .clown-tunnel-etoile--jaune { top: 28rem; right: 1.2%; width: 34px; transform: rotate(10deg); }
    .clown-tunnel-etoile--bleue { bottom: 15rem; left: 3.5%; width: 34px; transform: rotate(14deg); }
    .clown-tunnel-cotillon { bottom: 4rem; left: 1%; width: 120px; height: auto; }
    .clown-tunnel-slogan { bottom: 7.5rem; left: 12%; font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-size: 2rem; font-weight: 600; line-height: 1.05; color: #2b2a33; transform: rotate(-6deg); }
    .clown-tunnel-slogan span { color: var(--clown-rose-vif); }
}

/* Sous 992 px : chaque article devient une carte (photo + infos, puis quantité + prix) et l'en-tête du tableau disparaît. */
@media (max-width: 991.98px) {
    .clown-panier-table-entete { display: none; }
    .clown-article, .clown-article--sans-photo { grid-template-columns: 5rem minmax(0, 1fr) auto; grid-template-areas: "photo infos infos" "qte qte prix"; gap: 0.8rem 1rem; padding: 1rem 0.6rem; }
    .clown-article--sans-photo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "infos infos" "qte prix"; }
    .clown-article-photo { grid-area: photo; }
    .clown-article-photo img { width: 5rem; height: 5rem; }
    .clown-article-infos { grid-area: infos; }
    .clown-article-quantite { grid-area: qte; justify-content: flex-start; }
    .clown-article-prix { grid-area: prix; align-self: end; }
    .clown-article-etiquette { display: inline; }
    .clown-article-alerte { text-align: left; }
    .clown-panier-cout-zone { justify-content: stretch; }
    .clown-panier-cout { width: 100%; }
}
@media (max-width: 575.98px) {
    .clown-page-panier { padding-bottom: 2rem; }
    .clown-panier-table { padding: 0.4rem; }
    .clown-panier-cout { padding: 1.1rem 1.1rem; }
    .clown-panier-cout--edition { margin-bottom: 0; padding-bottom: 1.2rem; }
    .clown-panier-cout-actions { position: static; margin-top: 1.1rem; transform: none; }
    .clown-panier-cout-actions::after { display: none; }
    .clown-panier-cout-actions .clown-valider { width: 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   38. Inscription et formulaires de coordonnées (maquette « inscription » du 26/09/2026) : page Pages/Compte/Inscription-Edition.razor,
   colonnes et titres de Composants/Coordonnes.razor, champs de Composants/Champs.razor (aussi utilisés par la page Transport et le suivi de commande)
   -------------------------------------------------------------------------- */
.clown-inscription-page { padding-bottom: 3rem; }
.clown-inscription-entete { padding: 0.6rem 0 1.6rem; text-align: center; }
.clown-inscription-entete h1 { margin: 0 0 0.6rem; font-size: clamp(2.1rem, 4.6vw, 3rem); font-weight: 800; letter-spacing: -0.02em; color: #1b1f3b; }
.clown-inscription-entete p { max-width: 42rem; margin: 0 auto; font-size: 1.1rem; line-height: 1.6; color: #3d3a4b; }
.clown-inscription-carte { position: relative; z-index: 1; padding: 1.8rem 2rem; border-radius: 22px; background: #ffffff; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }

/* Décor : ballons en haut à droite et quatre étoiles, seulement à partir de 1200 px. */
.clown-inscription-decor { display: none; }
@media (min-width: 1200px) {
    .clown-inscription-decor { display: block; }
    .clown-inscription-decor > * { position: absolute; z-index: 0; height: auto; pointer-events: none; }
    .clown-inscription-ballons { top: 3.5rem; right: -2.6rem; width: 150px; transform: rotate(6deg); }
    .clown-inscription-etoile { filter: drop-shadow(0 3px 4px rgba(120, 70, 0, 0.18)); }
    .clown-inscription-etoile--rose { top: 8.5rem; left: 7%; width: 40px; transform: rotate(-12deg); }
    .clown-inscription-etoile--orange { top: 6rem; right: 24%; width: 40px; transform: rotate(10deg); }
    .clown-inscription-etoile--jaune { top: 24rem; left: 2.5%; width: 30px; transform: rotate(8deg); }
    .clown-inscription-etoile--bleue { top: 27rem; right: 3%; width: 34px; transform: rotate(-10deg); }
}

/* Deux colonnes séparées par un filet ; titres à pastille orange et petit trait dégradé dessous. */
.clown-coord { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.clown-coord-col { min-width: 0; padding-right: 2rem; }
.clown-coord-col--droite { display: flex; flex-direction: column; padding: 0 0 0 2rem; border-left: 1px solid #efe6d6; }
.clown-coord-titre { position: relative; display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.3rem; padding-bottom: 0.9rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; color: #1b1f3b; }
.clown-coord-titre::after { content: ""; position: absolute; left: 3.9rem; bottom: 0; width: 2.6rem; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #ff9f1a, #f5117c); }
.clown-coord-pastille { display: grid; flex: none; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, #ffb13b, #ff8a1f); font-size: 1.4rem; color: #ffffff; }
/* Variante rose (maquette « détail commande » du 29/09/2026) : Paiement et Coordonnées, en alternance avec l'orange par défaut. */
.clown-coord-pastille--rose { background: linear-gradient(135deg, #ff5ec4, #e0157a); }
.clown-coord-envoi { margin-top: 1rem; }
.clown-coord-envoi--pleine { grid-column: 1 / -1; margin-top: 1.6rem; text-align: center; }
.clown-coord-succes { margin: 0.8rem 0 0; font-weight: 800; color: #146c3a; }
.clown-coord-mascotte { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; margin: auto -0.5rem -1.8rem 0; padding-top: 1rem; }
.clown-coord-mascotte img { width: 262px; max-width: 58%; height: auto; }
.clown-coord-mascotte p { margin: 0 0.5rem 1.6rem 0; font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-size: 1.7rem; font-weight: 600; line-height: 1.05; color: #2b2a33; transform: rotate(-5deg); }
.clown-coord-mascotte span { color: var(--clown-rose-vif); }

/* Champ : libellé au-dessus, icône à gauche, état invalide (fond rose, « ! », message) et valide (coche verte). */
.clown-champ { margin-bottom: 1rem; }
.clown-champ > label { display: block; margin: 0 0 0.35rem; font-size: 0.92rem; font-weight: 700; color: #1b1f3b; }
.clown-champ-saisie { position: relative; }
.clown-champ-icone { position: absolute; left: 0.95rem; top: 50%; z-index: 1; transform: translateY(-50%); font-size: 1.15rem; line-height: 1; color: #6b6880; pointer-events: none; }
.clown-champ-saisie input, .clown-champ-saisie textarea, .clown-champ-saisie select { width: 100%; min-height: 50px; padding: 0.6rem 2.8rem 0.6rem 1rem; border: 1px solid #ddd6c8; border-radius: 12px; background-color: #ffffff; box-shadow: 0 1px 2px rgba(60, 40, 0, 0.05); font: inherit; font-size: 0.98rem; font-weight: 700; color: #1b1f3b; }
.clown-champ--icone .clown-champ-saisie input, .clown-champ--icone .clown-champ-saisie textarea, .clown-champ--icone .clown-champ-saisie select { padding-left: 2.9rem; }
.clown-champ--mdp .clown-champ-saisie input { padding-right: 5.6rem; }
.clown-champ-saisie textarea { min-height: 6rem; resize: vertical; }
/* Saisie en gras (demande du propriétaire, 26/09/2026) ; les textes d'exemple (placeholder) restent en graisse normale. */
.clown-champ-saisie input::placeholder, .clown-champ-saisie textarea::placeholder { font-weight: 400; color: #6b6880; }
.clown-champ-saisie input[readonly] { background-color: #f7f4ee; }
.clown-champ-saisie input:focus, .clown-champ-saisie textarea:focus, .clown-champ-saisie select:focus { border-color: var(--clown-rose-vif); outline: 3px solid rgba(255, 9, 153, 0.18); }
.clown-champ-saisie input::-ms-reveal { display: none; }
.clown-champ-saisie select { appearance: none; padding-right: 2.6rem; font-weight: 700; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b1f3b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; }
.clown-champ-fin { position: absolute; top: 0; right: 0.6rem; bottom: 0; display: flex; align-items: center; gap: 0.3rem; pointer-events: none; }
.clown-champ-fin > * { pointer-events: auto; }
.clown-champ-alerte, .clown-champ-coche { font-size: 1.3rem; line-height: 1; pointer-events: none; }
.clown-champ-alerte { color: #d92d3a; }
.clown-champ-coche { color: #1f9d4c; }
.clown-champ-oeil { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: transparent; font-size: 1.15rem; color: #55536f; cursor: pointer; }
.clown-champ-oeil:hover { background: #fff0f6; color: #d10a6b; }
.clown-champ-oeil:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 1px; }
.clown-champ--invalide .clown-champ-saisie input, .clown-champ--invalide .clown-champ-saisie textarea { border-color: #d92d3a; background-color: #fdecef; }
.clown-champ--valide .clown-champ-saisie input { border-color: #8fd0a6; }
.clown-champ-erreur { margin: 0.35rem 0 0; font-size: 0.85rem; font-weight: 600; line-height: 1.4; color: #b42318; }

/* Bouton d'envoi des formulaires (« S'inscrire », « Mettre à jour le mot de passe ») : pilule dégradé rose → orange, texte blanc gras 1,25 rem. */
.clown-bouton-formulaire { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 15rem; min-height: 3.4rem; padding: 0.6rem 2rem; border: 0; border-radius: 9999px; background: linear-gradient(90deg, #f5117c 0%, #ff3d6a 55%, #ff6e28 100%); color: #ffffff; font-size: 1.25rem; font-weight: 800; text-shadow: 0 1px 3px rgba(110, 10, 40, 0.3); box-shadow: 0 10px 22px -10px rgba(245, 17, 124, 0.8); cursor: pointer; transition: var(--clown-transition); }
.clown-bouton-formulaire:hover { filter: brightness(1.06); transform: translateY(-1px); }
.clown-bouton-formulaire:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 3px; }
/* Grisé tant que le formulaire est incomplet (inscription, vérification de commande). */
.clown-bouton-formulaire:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.35); transform: none; box-shadow: none; }
.clown-coord-aide { margin: 0.7rem auto 0; max-width: 32rem; font-size: 0.9rem; color: #55536f; }

@media (max-width: 991.98px) {
    .clown-coord { grid-template-columns: 1fr; }
    .clown-coord-col { padding-right: 0; }
    .clown-coord-col--droite { margin-top: 1.2rem; padding: 1.4rem 0 0; border-top: 1px solid #efe6d6; border-left: 0; }
    .clown-coord-mascotte { display: none; }
}
@media (max-width: 575.98px) {
    .clown-inscription-carte { padding: 1.3rem 1.1rem; }
    .clown-coord-titre { font-size: 1.3rem; }
    .clown-bouton-formulaire { width: 100%; }
}

/* --------------------------------------------------------------------------
   39. Autocomplétion d'adresse Google, nouveau composant <gmp-place-autocomplete> (posé par Map.js dans le conteneur vide .clown-champ-google de Champs.razor)
   Tant que le composant est là (conteneur non vide), le champ texte d'origine et son icône sont masqués ; s'il est retiré (repli sur l'ancien widget), ils réapparaissent.
   -------------------------------------------------------------------------- */
.clown-champ-google:empty { display: none; }
.clown-champ-google:not(:empty) ~ input, .clown-champ-google:not(:empty) ~ .clown-champ-icone { display: none; }
.clown-champ-google gmp-place-autocomplete { display: block; width: 100%; min-height: 50px; border: 1px solid #ddd6c8; border-radius: 12px; background: #ffffff; box-shadow: 0 1px 2px rgba(60, 40, 0, 0.05); color-scheme: light; }
.clown-champ-google gmp-place-autocomplete:focus-within { border-color: var(--clown-rose-vif); outline: 3px solid rgba(255, 9, 153, 0.18); }
.clown-champ--invalide .clown-champ-google gmp-place-autocomplete { border-color: #d92d3a; background: #fdecef; }

/* --------------------------------------------------------------------------
   40. Page « Panier vide » (maquette « panier vide » du 26/09/2026) — Composants/PanierVide.razor
   -------------------------------------------------------------------------- */
.clown-vide { position: relative; display: grid; place-items: center; min-height: 34rem; padding: 2.4rem 1rem 3rem; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 50% 30%, #ffeaa6 0%, rgba(255, 234, 166, 0) 70%); }
/* Nuages blancs arrondis en bas de chaque côté (formes CSS, décoratives). */
.clown-vide::before, .clown-vide::after { content: ""; position: absolute; bottom: -7rem; width: 22rem; height: 14rem; border-radius: 50%; background: rgba(255, 246, 214, 0.75); box-shadow: 8rem -3rem 0 -1rem rgba(255, 246, 214, 0.75), 3rem -4rem 0 1rem rgba(255, 246, 214, 0.75); pointer-events: none; }
.clown-vide::before { left: -6rem; }
.clown-vide::after { right: -6rem; transform: scaleX(-1); }
.clown-vide-decor { display: none; }
.clown-vide-carte { position: relative; z-index: 1; width: min(100%, 680px); padding: 1.2rem 1.6rem 1.3rem; border-radius: 28px; background: radial-gradient(ellipse at 50% 12%, #ffffff 0%, #fff7df 75%); box-shadow: 0 18px 40px -16px rgba(120, 70, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.7); text-align: center; }
.clown-vide-chariot { display: block; width: min(470px, 94%); height: auto; margin: 0 auto 0.2rem; }
.clown-vide-carte h1 { margin: 0 0 0.4rem; font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; color: #1b1f3b; }
.clown-vide-accroche { margin: 0 0 1.2rem; font-size: 1.1rem; line-height: 1.5; color: #3d3a4b; }
.clown-vide-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-width: 18rem; min-height: 3.2rem; padding: 0.6rem 2rem; border-radius: 9999px; background: linear-gradient(90deg, #ff2d8f, #f5117c); color: #ffffff; font-size: 1.15rem; font-weight: 800; text-decoration: none; box-shadow: 0 10px 22px -10px rgba(245, 17, 124, 0.8); transition: var(--clown-transition); }
.clown-vide-bouton:hover { color: #ffffff; filter: brightness(1.06); transform: translateY(-1px); }
.clown-vide-bouton:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 3px; }
.clown-vide-arguments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.4rem 0 0; padding: 0; list-style: none; }
.clown-vide-arguments li { display: grid; justify-items: center; align-content: start; gap: 0.35rem; padding: 0 0.6rem; font-size: 0.88rem; line-height: 1.3; color: #3d3a4b; }
.clown-vide-arguments li + li { border-left: 1px solid #efe1c0; }
.clown-vide-arguments i { font-size: 1.9rem; line-height: 1; color: #ff8a1f; }

/* Décor (grand écran) : guirlandes de fanions dans les coins du haut, étoiles ; les confettis sont en fond de la bande. */
@media (min-width: 992px) {
    .clown-vide { background: url("/img/panier-vide-confettis.svg") center top / min(1400px, 100%) auto no-repeat, radial-gradient(ellipse 60% 55% at 50% 30%, #ffeaa6 0%, rgba(255, 234, 166, 0) 70%); }
    .clown-vide-decor { display: block; }
    .clown-vide-decor > * { position: absolute; z-index: 1; height: auto; pointer-events: none; } /* au-dessus des nuages (::before / ::after) */
    .clown-vide-guirlande { top: 0; width: min(28vw, 420px); }
    .clown-vide-guirlande--g { left: 0; }
    .clown-vide-guirlande--d { right: 0; }
    .clown-vide-etoile { filter: drop-shadow(0 3px 4px rgba(120, 70, 0, 0.18)); }
    .clown-vide-etoile--jaune-g { left: calc(50% - 440px); top: 13rem; width: 46px; transform: rotate(-12deg); }
    .clown-vide-etoile--orange-g { left: 10%; bottom: 5rem; width: 44px; transform: rotate(8deg); }
    .clown-vide-etoile--jaune-d { right: 14%; top: 13rem; width: 40px; transform: rotate(10deg); }
    .clown-vide-etoile--orange-d { right: 7%; bottom: 6rem; width: 48px; transform: rotate(-8deg); }
}
@media (max-width: 575.98px) {
    .clown-vide { min-height: 0; padding: 1.2rem 0.6rem 2rem; }
    .clown-vide-carte { padding: 1rem 1rem 1.1rem; border-radius: 22px; }
    .clown-vide-bouton { width: 100%; min-width: 0; }
    .clown-vide-arguments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0; }
    .clown-vide-arguments li:nth-child(3) { border-left: 0; }
}

/* --------------------------------------------------------------------------
   41. Page Transport (maquette « checkout transport » du 26/09/2026) — Pages/Tunnel/Transport.razor, Composants/LeTransport.razor
   -------------------------------------------------------------------------- */
.clown-transport-page { padding-bottom: 3rem; background: url("/img/panier-vide-confettis.svg") center top / 1400px 520px repeat-y; }
.clown-carte-tunnel { position: relative; z-index: 1; margin-top: 1.4rem; padding: 1.8rem 2rem 2rem; border-radius: 22px; background: #ffffff; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }

/* Titres de section : icône orange, titre gras, petit trait dégradé dessous (Livraison, Message, Récapitulatif). */
.clown-section-titre { position: relative; display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.1rem; padding-bottom: 0.8rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: #1b1f3b; }
.clown-section-titre i { font-size: 1.8rem; line-height: 1; color: #ff8a1f; }
.clown-section-titre::after { content: ""; position: absolute; left: 2.5rem; bottom: 0; width: 2.6rem; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #ff9f1a, #f5117c); }
.clown-transport-section { margin-top: 1.8rem; }

/* Cartes de transporteurs : bouton radio, carte choisie bordée de rose. */
.clown-transport-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; }
.clown-transport-carte { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 5.8rem; padding: 0.8rem 0.8rem 0.8rem 2.3rem; border: 2px solid #e4ddd0; border-radius: 14px; background: #ffffff; font: inherit; color: #1b1f3b; text-align: center; cursor: pointer; transition: var(--clown-transition); }
.clown-transport-carte img { max-width: 100%; max-height: 2.6rem; object-fit: contain; }
.clown-transport-carte:hover { border-color: #f5b8d0; }
.clown-transport-carte:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }
.clown-transport-carte--choisie { border-color: #f5117c; background: #fff0f6; box-shadow: 0 6px 16px -8px rgba(245, 17, 124, 0.5); }
.clown-transport-radio { position: absolute; left: 0.8rem; bottom: 0.8rem; width: 1.2rem; height: 1.2rem; border: 2px solid #b9b3c7; border-radius: 50%; background: #ffffff; }
.clown-transport-carte--choisie .clown-transport-radio { border-color: #f5117c; background: #f5117c; box-shadow: inset 0 0 0 3px #ffffff; }
.clown-transport-delai { font-size: 0.9rem; font-weight: 600; color: #3d3a4b; }
/* Affichage d'une commande (LaCommande) : carte simple, sans radio. */
.clown-transport-carte--fixe { padding-left: 0.8rem; cursor: default; }
.clown-transport-carte--fixe:hover { border-color: #e4ddd0; }
.clown-transport-suivi { padding: 0.3rem 0.9rem; border-radius: 9999px; background: #fff0f6; font-size: 0.85rem; font-weight: 700; color: #a3074f; text-decoration: none; }
.clown-transport-horaire { font-size: 0.85rem; line-height: 1.4; color: #3d3a4b; }

/* Choix de la prestation (liste déroulante) et interrupteur « adresse de livraison différente ». */
.clown-transport-prestation { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.clown-transport-prestation label { flex: none; font-weight: 600; color: #1b1f3b; }
.clown-select { flex: 1; min-height: 50px; padding: 0.6rem 2.6rem 0.6rem 1rem; border: 1px solid #ddd6c8; border-radius: 12px; appearance: none; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b1f3b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center / 1rem; font: inherit; font-weight: 700; color: #1b1f3b; }
.clown-select:focus { border-color: var(--clown-rose-vif); outline: 3px solid rgba(255, 9, 153, 0.18); }
.clown-transport-interrupteur { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 1.3rem 0; }
.clown-transport-interrupteur label { font-weight: 700; color: #1b1f3b; cursor: pointer; }
.clown-interrupteur { position: relative; flex: none; width: 2.9rem; height: 1.6rem; border: 0; border-radius: 9999px; appearance: none; background: #d6d0e3; cursor: pointer; transition: var(--clown-transition); }
.clown-interrupteur::before { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: var(--clown-transition); }
.clown-interrupteur:checked { background: #f5117c; }
.clown-interrupteur:checked::before { transform: translateX(1.3rem); }
.clown-interrupteur:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }

/* Point relais : carte crème, barre de recherche, liste et carte. */
.clown-relais { margin-top: 1.4rem; padding: 1rem; border: 1px solid #efe6d6; border-radius: 16px; background: #fffaf0; }
/* Titre, recherche, liste, carte et bulle : voir section 43, plus bas dans ce fichier (maquette « sélection relais » du 26/09/2026). */

/* Message facultatif avec compteur. */
.clown-transport-message { display: block; width: 100%; min-height: 5rem; padding: 0.8rem 1rem; border: 1px solid #ddd6c8; border-radius: 12px; background: #ffffff; font: inherit; font-weight: 700; color: #1b1f3b; resize: vertical; }
.clown-transport-message::placeholder { font-weight: 400; color: #6b6880; }
.clown-transport-message:focus { border-color: var(--clown-rose-vif); outline: 3px solid rgba(255, 9, 153, 0.18); }
.clown-transport-compteur { margin: 0.3rem 0 0; text-align: right; font-size: 0.85rem; color: #6b6880; }

/* Récapitulatif dans la carte : le tableau et la carte « Total » perdent leur ombre portée et leur marge de page (sur la page Panier ils posent seuls) ; « Total : » en rose en lecture seule. */
.clown-carte-tunnel .clown-page-panier { max-width: none; padding: 0; }
.clown-carte-tunnel .clown-panier-table, .clown-carte-tunnel .clown-panier-cout { box-shadow: 0 0 0 1px #efe6d6, 0 6px 18px -12px rgba(120, 70, 0, 0.3); }
.clown-panier-cout:not(.clown-panier-cout--edition) .clown-panier-cout-total span { color: #e0157a; }

/* Message d'erreur et bouton Valider (grisé tant que le formulaire est incomplet). */
.clown-transport-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }
.clown-transport-actions .clown-valider { min-width: 14rem; margin-left: auto; font-size: 1.25rem; }
.clown-transport-erreur { margin: 0; font-size: 0.9rem; font-weight: 700; line-height: 1.4; color: #b42318; }
.clown-valider:disabled { opacity: 0.55; box-shadow: none; cursor: not-allowed; transform: none; filter: none; }

@media (max-width: 991.98px) {
    .clown-carte-tunnel { padding: 1.4rem 1.2rem 1.6rem; }
}
@media (max-width: 575.98px) {
    .clown-carte-tunnel { padding: 1.1rem 0.9rem 1.3rem; }
    .clown-transport-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .clown-transport-prestation { flex-direction: column; align-items: stretch; gap: 0.4rem; }
    .clown-transport-interrupteur { justify-content: flex-start; }
    .clown-transport-actions { flex-direction: column-reverse; align-items: stretch; }
    .clown-transport-actions .clown-valider { width: 100%; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   42. Résumé du total qui suit le défilement, page Transport (id="DetailPanier", classe .fixed-element posée par FixedDetailPanier() dans clown-site.js selon la
   visibilité de la vraie carte « Total »). Redessiné le 26/09/2026 : l'ancien cadre flottant (simple carte, style Bootstrap d'origine) ne s'affichait plus après la
   refonte, la nouvelle carte .clown-panier-cout imposant sa propre position: relative qui l'emportait sur .fixed-element à spécificité égale. Sélecteur par id :
   l'emporte sans ambiguïté, quel que soit l'ordre des règles dans le fichier.
   -------------------------------------------------------------------------- */
#DetailPanier.fixed-element {
    position: fixed; left: auto; top: auto; right: 1.1rem; bottom: 1.1rem;
    width: auto; max-width: 21rem; margin: 0; padding: 0.9rem 1.3rem;
    border-radius: 16px;
    box-shadow: 0 16px 34px -12px rgba(120, 70, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.6);
    animation: clown-flottant-entree 0.25s ease;
}
/* Bande dégradée en haut du cadre, comme les autres cartes du site. */
#DetailPanier.fixed-element::before { content: ""; position: absolute; top: 0; left: 1.1rem; right: 1.1rem; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #ff9f1a, #f5117c); }
/* Le détail complet (sous-total, transport, total) reste visible, comme demandé ; seul le texte d'aide (long paragraphe, mode Edition uniquement, absent sur Transport) est masqué pour ne pas alourdir le cadre. */
#DetailPanier.fixed-element .clown-panier-cout-info { display: none; }
#DetailPanier.fixed-element .clown-panier-cout-ligne { font-size: 0.92rem; margin: 0.25rem 0; }
#DetailPanier.fixed-element .clown-panier-cout-total { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #efe6d6; font-size: 1rem; }
#DetailPanier.fixed-element .clown-panier-cout-total strong { font-size: 1.4rem; }
/* Téléphone : le cadre occupait 136 px (un sixième de l'écran) par-dessus le formulaire de livraison. Le détail complet
   reste visible (choix du propriétaire, ci-dessus), mais resserré : marges et polices réduites (05/10/2026). */
@media (max-width: 575.98px) {
    #DetailPanier.fixed-element { bottom: 0.6rem; padding: 0.5rem 1rem 0.55rem; }
    #DetailPanier.fixed-element .clown-panier-cout-ligne { font-size: 0.82rem; margin: 0.05rem 0; }
    #DetailPanier.fixed-element .clown-panier-cout-total { margin-top: 0.25rem; padding-top: 0.25rem; font-size: 0.95rem; }
    #DetailPanier.fixed-element .clown-panier-cout-total strong { font-size: 1.2rem; }
}
@keyframes clown-flottant-entree { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #DetailPanier.fixed-element { animation: none !important; } }

@media (max-width: 575.98px) {
    /* Sur mobile, une bande pleine largeur en bas de l'écran est plus lisible et plus facile à toucher qu'une petite carte flottante dans un coin. */
    #DetailPanier.fixed-element { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; max-width: none; }
}

/* --------------------------------------------------------------------------
   43. Sélection d'un point relais (maquette « sélection relais » du 26/09/2026), page Transport — remplace le style d'origine de .clown-relais (section 41)
   -------------------------------------------------------------------------- */

/* Titre : icône du transporteur + « Sélectionnez votre Point Relais » + phrase d'accroche, centrés. */
.clown-relais-entete { display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid #efe6d6; text-align: left; }
.clown-relais-entete img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.clown-relais-entete h3 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: #1b1f3b; }
.clown-relais-entete p { margin: 0.15rem 0 0; font-size: 0.92rem; color: #6b6880; }

/* Recherche : icône dans le champ, bouton « Chercher » en pilule rose avec loupe. */
.clown-relais-recherche { display: flex; gap: 0.7rem; margin-top: 1.1rem; }
.clown-relais-recherche-champ { position: relative; flex: 1; min-width: 0; }
.clown-relais-recherche-champ i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: #6b6880; pointer-events: none; }
.clown-relais-recherche input[type="text"] { width: 100%; min-height: 50px; padding: 0.6rem 1rem 0.6rem 2.8rem; border: 1px solid #ddd6c8; border-radius: 12px; background: #fffbe9; font: inherit; font-weight: 700; color: #1b1f3b; }
.clown-relais-recherche input[type="text"]::placeholder { font-weight: 400; color: #8e8ba0; }
.clown-relais-recherche input[type="text"]:focus { border-color: var(--clown-rose-vif); outline: 3px solid rgba(255, 9, 153, 0.18); }
.clown-relais-chercher { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 50px; padding: 0 1.6rem; border: 0; border-radius: 9999px; background: linear-gradient(90deg, #ff2d8f, #f5117c); font-size: 1rem; font-weight: 800; color: #ffffff; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 20px -10px rgba(245, 17, 124, 0.7); transition: var(--clown-transition); }
.clown-relais-chercher:hover:not(:disabled) { filter: brightness(1.06); }
.clown-relais-chercher:disabled { opacity: 0.7; cursor: wait; }
.clown-relais-chercher:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }

/* Deux colonnes : liste des relais (défile) à gauche, carte à droite. */
.clown-relais-grille { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 1.1rem; margin-top: 1.3rem; }
.clown-relais-liste { display: flex; flex-direction: column; gap: 0.8rem; height: 500px; padding-right: 0.3rem; overflow-y: auto; }
.clown-relais-carte-map { position: relative; }
#map { height: 500px; border-radius: 16px; overflow: hidden; }

/* Carte d'un relais : pin, nom + distance, adresse, puis bouton ou badge « sélectionné ». Bordée de rose et cochée quand active (cliquée dans la liste ou sur la carte). */
.clown-relais-carte { display: flex; gap: 0.7rem; padding: 0.9rem 1rem; border: 2px solid #e4ddd0; border-radius: 14px; background: #ffffff; cursor: pointer; transition: var(--clown-transition); }
.clown-relais-carte:hover { border-color: #f5b8d0; }
.clown-relais-carte.active, .clown-relais-carte--choisie { position: relative; border-color: #22b86b; background: #edfcf3; }
.clown-relais-carte-pin { flex: none; margin-top: 0.15rem; font-size: 1.2rem; color: #ff8a1f; }
.clown-relais-carte.active .clown-relais-carte-pin, .clown-relais-carte--choisie .clown-relais-carte-pin { color: #22b86b; }
.clown-relais-carte-corps { min-width: 0; }
.clown-relais-carte-nom { margin: 0 0 0.2rem; font-size: 1rem; font-weight: 800; color: #1b1f3b; }
.clown-relais-carte-nom span { font-weight: 600; color: #6b6880; }
.clown-relais-carte-adresse { margin: 0; font-size: 0.88rem; line-height: 1.4; color: #6b6880; }
.clown-relais-carte-choisir { margin-top: 0.6rem; min-height: 36px; padding: 0.3rem 1rem; border: 2px solid #f5b8d0; border-radius: 9999px; background: #ffffff; font: inherit; font-size: 0.88rem; font-weight: 700; color: #d10a6b; cursor: pointer; transition: var(--clown-transition); }
.clown-relais-carte-choisir:hover { background: #fff0f6; }
.clown-relais-carte-choisir:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }
.clown-relais-carte-badge { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.6rem; padding: 0.3rem 0.8rem; border-radius: 9999px; background: #d4f7e2; font-size: 0.85rem; font-weight: 800; color: #146c3a; }
.clown-relais-carte-coche { position: absolute; top: 0.9rem; right: 0.9rem; font-size: 1.3rem; color: #22b86b; }

/* Bulle de la carte (Leaflet), même contenu que la carte de la liste. */
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { margin: 0.9rem 1rem; min-width: 15rem; }
.clown-relais-popup-nom { margin: 0 0 0.3rem; font-size: 1rem; font-weight: 800; color: #1b1f3b; }
.clown-relais-popup-nom span { font-weight: 600; color: #6b6880; }
.clown-relais-popup-adresse { margin: 0 0 0.6rem; font-size: 0.88rem; line-height: 1.4; color: #6b6880; }
/* Horaires : texte fourni tel quel par le transporteur (table jour / heures) ; police réduite et lignes resserrées (capture du propriétaire, 26/09/2026 : trop
   grand et trop espacé). Règles génériques (table, div, p, li) pour s'adapter à la mise en forme réellement renvoyée, sans dépendre de sa structure exacte. */
.clown-relais-popup-horaire { margin: 0 0 0.7rem; padding-top: 0.6rem; border-top: 1px solid #efe6d6; font-size: 0.78rem; line-height: 1.5; color: #3d3a4b; }
.clown-relais-popup-horaire table { width: 100%; border-collapse: collapse; font-size: inherit; }
.clown-relais-popup-horaire td, .clown-relais-popup-horaire th { padding: 0.1rem 0; font-size: inherit; font-weight: 400; text-align: left; }
.clown-relais-popup-horaire tr :first-child { font-weight: 700; text-transform: capitalize; }
.clown-relais-popup-horaire tr :last-child { text-align: right; }
.clown-relais-popup-horaire p, .clown-relais-popup-horaire div { margin: 0.05rem 0; font-size: inherit; }
.clown-relais-popup-bouton { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; border: 0; border-radius: 9999px; background: linear-gradient(90deg, #ff8a1f, #ff5a3c); font: inherit; font-size: 0.92rem; font-weight: 800; color: #ffffff; cursor: pointer; transition: var(--clown-transition); }
.clown-relais-popup-bouton:hover { filter: brightness(1.06); }
.clown-relais-popup-badge { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0; padding: 0.5rem; border-radius: 9999px; background: #d4f7e2; font-size: 0.92rem; font-weight: 800; color: #146c3a; }
.clown-relais-popup-badge::before { content: "\2713"; }

@media (max-width: 991.98px) {
    .clown-relais-grille { grid-template-columns: 1fr; }
    .clown-relais-liste { height: auto; max-height: 60vh; }
}
@media (max-width: 575.98px) {
    .clown-relais-entete { flex-direction: column; text-align: center; }
    .clown-relais-recherche { flex-direction: column; }
}


/* --------------------------------------------------------------------------
   44. Page Paiement (maquette « checkout paiement » du 27/09/2026) — Pages/Tunnel/Paiement.razor
   -------------------------------------------------------------------------- */
.clown-paiement-entete { margin-bottom: 1.6rem; text-align: center; }
.clown-paiement-entete h1 { margin: 0 0 0.5rem; font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 800; letter-spacing: -0.01em; color: #1b1f3b; }
.clown-paiement-entete p { max-width: 40rem; margin: 0 auto; font-size: 1rem; line-height: 1.6; color: #3d3a4b; }
.clown-paiement-entete strong { color: #e0157a; }

.clown-paiement-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; margin-bottom: 1.8rem; }
.clown-paiement-carte { display: flex; flex-direction: column; align-items: center; padding: 1.6rem 1.3rem; border: 1px solid #efe6d6; border-radius: 18px; background: #ffffff; text-align: center; box-shadow: 0 10px 24px -16px rgba(120, 70, 0, 0.3); }
.clown-paiement-icone { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; margin-bottom: 1rem; border-radius: 50%; font-size: 1.9rem; }
.clown-paiement-icone--rose { background: #ffe3ee; color: #d10a6b; }
.clown-paiement-icone--bleu { background: #e1eefc; color: #0070ba; }
.clown-paiement-icone--orange { background: #fff0df; color: #e07a00; }
.clown-paiement-carte h2 { margin: 0 0 0.2rem; font-size: 1.15rem; font-weight: 800; color: #1b1f3b; }
.clown-paiement-carte p { margin: 0 0 0.4rem; font-size: 0.9rem; color: #6b6880; }
.clown-paiement-savoir { padding: 0.2rem 0; border: 0; background: none; font: inherit; font-size: 0.9rem; font-weight: 700; color: #1d5fbf; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.clown-paiement-savoir:hover, .clown-paiement-savoir:focus-visible { color: #0d3f8a; }
.clown-paiement-payer, .clown-paiement-attente { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 10rem; min-height: 3rem; margin-top: 1.1rem; padding: 0.5rem 1.4rem; border-radius: 9999px; font-size: 1rem; font-weight: 800; }
.clown-paiement-payer { border: 0; background: linear-gradient(90deg, #ff2d8f, #f5117c); color: #ffffff; cursor: pointer; box-shadow: 0 10px 20px -10px rgba(245, 17, 124, 0.7); transition: var(--clown-transition); }
.clown-paiement-payer:hover { filter: brightness(1.06); transform: translateY(-1px); }
.clown-paiement-payer:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }
.clown-paiement-attente { background: #fff3c9; color: #7a4a00; }

.clown-paiement-cgv { margin: 1.2rem 0 0; text-align: center; font-size: 0.92rem; color: #3d3a4b; }
.clown-paiement-cgv a { color: #1b1f3b; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 575.98px) {
    .clown-paiement-cartes { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   45. Popup « Aperçu express » du produit (maquette « popup produit » du 27/09/2026) — Composants/LeProduit.razor
   En-tête festif (dégradé, décor) et bouton « Fermer » en pied de page : déjà fournis par Modal.razor (Festif="true", AvecFermer par défaut), rien à ajouter ici.
   -------------------------------------------------------------------------- */
.clown-express-chargement { display: grid; place-items: center; gap: 0.6rem; min-height: 12rem; }
.clown-express { position: relative; }
/* La ligne de réassurance du popup réutilise .clown-reassurance-fiche (section produit) ; seule l'icône Bootstrap change (l'original utilise des img). */
.clown-reassurance-fiche i { margin-right: 0.35rem; color: var(--clown-rose-vif); }

/* --------------------------------------------------------------------------
   46. Page Mon compte (maquette « Mon compte » du 28/09/2026) — Pages/Compte/Compte.razor, affichage lecture seule de
   Composants/Coordonnes.razor (Version.Affichage, aussi utilisé par Composants/LaCommande.razor).
   -------------------------------------------------------------------------- */
.clown-compte-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.clown-compte-entete h1 { position: relative; display: inline-block; margin: 0; padding-bottom: 0.7rem; font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 800; color: #1b1f3b; }
.clown-compte-entete h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.2rem; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #ff9f1a, #f5117c); }
.clown-compte-deconnexion { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.3rem; border: 2px solid #efe6d6; border-radius: 9999px; background: #ffffff; font: inherit; font-weight: 700; color: #1b1f3b; cursor: pointer; transition: var(--clown-transition); }
.clown-compte-deconnexion:hover { border-color: var(--clown-rose-vif); color: var(--clown-rose-vif); }

.clown-compte-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.4rem; align-items: start; margin-bottom: 2rem; }
.clown-compte-carte { padding: 1.8rem 2rem 2rem; border-radius: 22px; background: #ffffff; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }

.clown-compte-table { border: 1px solid #efe6d6; border-radius: 14px; overflow: hidden; margin-bottom: 1.3rem; }
.clown-compte-ligne { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0.8rem 1.1rem; }
.clown-compte-ligne:nth-child(even) { background: #fff8ec; }
.clown-compte-label { flex: 0 0 9rem; font-weight: 700; color: #1b1f3b; }
.clown-compte-valeur { flex: 1; min-width: 10rem; color: #2b2a33; }
.clown-compte-modifier { min-width: 0; min-height: 2.8rem; padding: 0.5rem 1.6rem; font-size: 1rem; text-decoration: none; gap: 0.5rem; }

.clown-compte-resume { margin: -0.4rem 0 1rem; font-size: 0.92rem; font-weight: 700; color: #6b6880; }

.clown-compte-historique-table { width: 100%; border-collapse: collapse; }
.clown-compte-historique-table th { padding: 0.7rem 0.5rem; border-bottom: 2px solid #efe6d6; text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b6880; }
.clown-compte-historique-table td { padding: 0.9rem 0.5rem; border-bottom: 1px solid #f4efe3; vertical-align: middle; }
.clown-compte-historique-ligne { cursor: pointer; transition: var(--clown-transition); }
.clown-compte-historique-ligne:hover { background: #fff8ec; }
.clown-compte-historique-numero { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: var(--clown-rose-vif); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.clown-compte-historique-numero:hover { color: #c2006f; }
.clown-compte-historique-numero:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; border-radius: 4px; }
.clown-compte-vide { padding: 1rem 0; color: #6b6880; }

.clown-compte-suivi { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.8rem; font-weight: 700; color: #1d5fbf; text-decoration: underline; text-underline-offset: 2px; }
.clown-compte-suivi:hover { color: #0d3f8a; }
.clown-compte-actions { display: flex; gap: 0.4rem; }
.clown-compte-facture, .clown-compte-action { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 2px solid #efe6d6; border-radius: 50%; background: #ffffff; color: #1b1f3b; font-size: 1.05rem; cursor: pointer; transition: var(--clown-transition); }
.clown-compte-facture:hover, .clown-compte-action:hover { border-color: var(--clown-rose-vif); color: var(--clown-rose-vif); }
.clown-compte-facture:focus-visible, .clown-compte-action:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }
.clown-compte-facture:disabled, .clown-compte-action:disabled { cursor: wait; opacity: 0.6; }
.clown-chargement-anneau--petit { width: 1.1rem; height: 1.1rem; border-width: 2px; }

.clown-statut-pill { display: inline-flex; align-items: center; padding: 0.4rem 1rem; border-radius: 9999px; font-size: 0.82rem; font-weight: 700; color: #ffffff; white-space: nowrap; }
.clown-statut-pill--succes { background: #16a34a; }
.clown-statut-pill--danger { background: #dc2626; }
.clown-statut-pill--attente { background: #f59e0b; }
.clown-statut-pill--info { background: #94a3b8; }

/* Sur mobile et petite tablette, les deux blocs (Coordonnées / Historique, et ceux de la page Commande) s'empilent toujours. */
@media (max-width: 767.98px) {
    .clown-compte-grille { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .clown-compte-label { flex-basis: 100%; }

    /* Tableau Historique en cartes empilées : chaque <td> devient une ligne étiquetée par data-label, comme le fait déjà
       le style des lignes fournisseur d'Admin.css pour le même besoin (28/09/2026). */
    .clown-compte-historique-table thead { display: none; }
    .clown-compte-historique-table, .clown-compte-historique-table tbody, .clown-compte-historique-table tr, .clown-compte-historique-table td { display: block; width: 100%; }
    .clown-compte-historique-ligne { margin-bottom: 0.8rem; padding: 0.4rem 0.2rem; border: 1px solid #efe6d6; border-radius: 14px; }
    .clown-compte-historique-table td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.9rem; border-bottom: 1px dashed #f4efe3; }
    .clown-compte-historique-table td:last-child { border-bottom: 0; }
    .clown-compte-historique-table td::before { content: attr(data-label); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #6b6880; }
}

/* Page Commande (Composants/LaCommande.razor), relookee le 28/09/2026 sur le meme habillage que Mon compte/Transport. */
.clown-commande-statut-grande { display: inline-flex; padding: 0.55rem 1.3rem; font-size: 0.95rem; }
.clown-commande-livraison { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0; font-weight: 700; color: #1b1f3b; }
.clown-commande-facture { display: inline-flex; width: auto; height: auto; padding: 0.5rem 1rem; border-radius: 9999px; gap: 0.5rem; font-size: 0.9rem; font-weight: 700; margin-top: 1rem; }

.clown-commande-paiement { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.clown-commande-paiement img { max-width: 65px; max-height: 63px; }
.clown-commande-paiement-nom { font-weight: 800; font-size: 1.1rem; color: #1b1f3b; }
.clown-commande-payer { min-width: 0; min-height: 2.8rem; padding: 0.5rem 1.6rem; font-size: 1rem; margin-left: auto; }

.clown-commande-cheque { margin-top: 1.1rem; padding: 1.1rem 1.3rem; border-radius: 14px; background: #fff8ec; border: 1px solid #ffe3b0; }
.clown-commande-cheque p { margin: 0 0 0.8rem; font-size: 0.92rem; line-height: 1.55; color: #2b2a33; }
.clown-commande-cheque p:last-child { margin-bottom: 0; }
.clown-commande-adresse-cheque { padding: 0.8rem 1rem; border-radius: 10px; background: #ffffff; border: 1px dashed #efe6d6; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }

.clown-commande-carte-transport { height: 22vh; min-height: 12rem; margin-top: 0.9rem; border-radius: 14px; border: 1px solid #efe6d6; overflow: hidden; }
.clown-commande-message { margin: 0; padding: 1rem 1.2rem; border-radius: 14px; background: #fff8ec; border: 1px solid #efe6d6; font-style: italic; color: #2b2a33; }

/* En-tête "Commande N°X" + date (maquette « détail commande » du 29/09/2026), rendu par LaCommande.razor elle-même : même
   filet rose que .clown-compte-entete. Bouton facture/devis remonté ici le 30/09/2026 (au lieu d'être caché dans la
   carte "Statut", cf. .clown-commande-facture-confirmation pour la variante confirmation, sans titre). */
.clown-commande-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.clown-commande-entete h1 { position: relative; display: inline-block; margin: 0 0 0.6rem; padding-bottom: 0.7rem; font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 800; color: #1b1f3b; }
.clown-commande-entete h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.2rem; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #ff9f1a, #f5117c); }
.clown-commande-entete p { margin: 0; font-size: 1rem; font-weight: 600; color: #6b6880; }
.clown-commande-entete .clown-commande-facture { margin-top: 0; }
.clown-commande-facture-confirmation { display: flex; justify-content: flex-end; margin-bottom: 1.6rem; }

/* Frise simplifiée Validée/En préparation/Expédiée (30/09/2026) : remplace la pastille de statut pour les commandes
   qui suivent ce parcours (pas pour "en attente de paiement"/"annulé", qui gardent la pastille simple). */
.clown-commande-etapes { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.clown-commande-etape { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; font-size: 0.85rem; font-weight: 700; color: #a9a6b8; }
.clown-commande-etape:not(:last-child)::after { content: ""; position: absolute; top: 1.1rem; left: 50%; width: 100%; height: 3px; background: #efe6d6; z-index: 0; }
.clown-commande-etape--fait:not(:last-child)::after { background: linear-gradient(90deg, #ff9f1a, #f5117c); }
.clown-commande-etape-point { position: relative; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #efe6d6; color: #6b6880; font-size: 1rem; }
.clown-commande-etape--fait .clown-commande-etape-point { background: linear-gradient(135deg, #ff9f1a, #f5117c); color: #ffffff; }
.clown-commande-etape--active { color: #1b1f3b; }
.clown-commande-etape--active .clown-commande-etape-point { outline: 3px solid #ffe3ee; }
.clown-commande-colis { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0; font-weight: 700; color: #1b1f3b; }
.clown-commande-colis a { color: var(--clown-rose-vif); }

@media (max-width: 575.98px) {
    .clown-commande-payer { margin-left: 0; width: 100%; }
    .clown-commande-etape { font-size: 0.72rem; }
}

/* --------------------------------------------------------------------------
   47. Formulaire « Vérifier ma commande » (maquette du 28/09/2026) — Pages/Compte/Commande.razor (visiteur non connecté)
   -------------------------------------------------------------------------- */
.clown-verif-commande-entete { margin-bottom: 2rem; text-align: center; }
.clown-verif-commande-entete h1 { position: relative; display: inline-block; margin: 0 0 0.9rem; padding-bottom: 0.7rem; font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 800; color: #1b1f3b; }
.clown-verif-commande-entete h1::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 3.2rem; height: 4px; border-radius: 4px; transform: translateX(-50%); background: linear-gradient(90deg, #ff9f1a, #f5117c); }
.clown-verif-commande-entete p { margin: 0; font-size: 1.1rem; color: #3d3a4b; }

.clown-verif-commande-carte { max-width: 34rem; margin: 0 auto 2.5rem; padding: 2rem 2.2rem 2.2rem; border-radius: 22px; background: #ffffff; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-verif-commande-carte .clown-bouton-formulaire { display: flex; margin: 0.7rem 0 0 auto; }

@media (max-width: 575.98px) {
    .clown-verif-commande-carte .clown-bouton-formulaire { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   48. Page Confirmation (Pages/Tunnel/Confirmation.razor) : états non réussis (maquette « confirmation paiement » du
   29/09/2026) et carte de réussite jaune festive (image de référence du 30/09/2026).
   -------------------------------------------------------------------------- */
.clown-confirmation-reussite { max-width: 40rem; margin: 0 auto 2.5rem; padding: 2.2rem 2rem; border-radius: 22px; background: var(--clown-jaune); text-align: center; }
.clown-confirmation-reussite img { margin-bottom: 0.8rem; }
.clown-confirmation-reussite h1 { margin: 0 0 0.9rem; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800; color: #1b1f3b; }
.clown-confirmation-reussite p { margin: 0 0 0.3rem; color: #3d3a4b; }
.clown-confirmation-reussite strong { color: var(--clown-rose-vif); }

.clown-confirmation-titre { margin: 0 0 1.6rem; text-align: center; font-size: clamp(1.7rem, 3.6vw, 2.3rem); font-weight: 800; color: #1b1f3b; }

.clown-confirmation-carte { display: flex; align-items: center; gap: 2rem; max-width: 50rem; margin: 0 auto 2.5rem; padding: 2.2rem 2.5rem; border-radius: 22px; background: #ffffff; box-shadow: 0 14px 34px -14px rgba(120, 70, 0, 0.35); }
.clown-confirmation-icone { display: grid; flex: none; place-items: center; width: 6.5rem; height: 6.5rem; border-radius: 50%; background: #ffe3ee; font-size: 2.4rem; }
.clown-confirmation-icone--echec { color: #f43535; }
.clown-confirmation-icone--attente { color: var(--clown-rose-vif); }
.clown-confirmation-texte { flex: 1; padding-left: 2rem; border-left: 1px solid #efe6d6; }
.clown-confirmation-texte h2 { margin: 0 0 0.5rem; font-size: 1.4rem; font-weight: 800; color: #1b1f3b; }
.clown-confirmation-texte p { margin: 0 0 0.3rem; color: #3d3a4b; }
.clown-confirmation-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.3rem; }
.clown-confirmation-actions .clown-bouton-formulaire { min-width: 0; min-height: 3.4rem; }
.clown-confirmation-secondaire { display: inline-flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: 0.6rem 2rem; border: 2px solid var(--clown-rose-vif); border-radius: 9999px; background: #ffffff; color: var(--clown-rose-vif); font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: var(--clown-transition); }
.clown-confirmation-secondaire:hover { background: #fff0f6; }
.clown-confirmation-secondaire:focus-visible { outline: 3px solid #1b1f3b; outline-offset: 2px; }

@media (max-width: 575.98px) {
    .clown-confirmation-carte { flex-direction: column; text-align: center; padding: 1.6rem; }
    .clown-confirmation-texte { padding-left: 0; border-left: 0; }
    .clown-confirmation-actions { justify-content: center; }
}