/* =====================================================================
   OUTILS BRICOLAGE — Feuille de style COMMUNE
   Thème : Botanical Garden
   =====================================================================
   PÉRIMÈTRE DE CE FICHIER (pour éviter tout conflit) :
   - Variables CSS globales (couleurs, ombres, rayons)
   - Éléments partagés par TOUTES les pages : topbar, navbar + hamburger,
     footer, bandeau cookies, boutons génériques (.btn-ob-*),
     messages flash, animations utilitaires génériques (.ob-anim-*)

   Chaque page a en plus SON PROPRE fichier CSS dans
   /assets/css/pages/<nom-page>.css, chargé APRÈS ce fichier.
   Règle : ce fichier ne doit JAMAIS définir de classes propres au
   contenu d'une page précise (.ob-hero-accueil, .ob-carte-produit...) ;
   ces classes vivent uniquement dans le CSS de la page concernée.
   ===================================================================== */

:root {
    /* Palette principale (couleurs vives demandées) */
    --ob-bleu-marine: #0B2545;
    --ob-bleu-marine-clair: #123863;
    --ob-bleu-vif: #1E88E5;
    --ob-orange-vif: #F5811F;
    --ob-orange-fonce: #D9670C;
    --ob-vert-jardin: #3C8D45;
    --ob-vert-clair: #E9F5E8;
    --ob-vert-tres-clair: #F3FAF2;
    --ob-gris-image: #E9E9EA;
    --ob-gris-clair: #F5F6F7;
    --ob-gris-bordure: #DFE3E6;
    --ob-texte: #1B1F23;
    --ob-texte-clair: #5B6670;
    --ob-blanc: #FFFFFF;

    /* Ombres & rayons */
    --ob-ombre-legere: 0 4px 14px rgba(11, 37, 69, 0.08);
    --ob-ombre-forte: 0 12px 32px rgba(11, 37, 69, 0.16);
    --ob-rayon: 14px;
    --ob-rayon-petit: 8px;

    /* Transition */
    --ob-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------
   RESET & BASE
   --------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Arial Narrow', Arial, sans-serif;
    color: var(--ob-texte);
    background-color: var(--ob-blanc);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    color: var(--ob-bleu-marine);
    letter-spacing: 0.5px;
}

a {
    text-decoration: none;
    transition: var(--ob-transition);
}

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

.img-fond-gris {
    background-color: var(--ob-gris-image);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ob-texte-clair);
    border-radius: var(--ob-rayon-petit);
}

/* Bandeau feuille décoratif (signature botanique) réutilisable */
.ob-separateur-feuilles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 1.5rem;
    color: var(--ob-vert-jardin);
    opacity: 0.85;
}
.ob-separateur-feuilles::before,
.ob-separateur-feuilles::after {
    content: "";
    height: 2px;
    width: 60px;
    background: linear-gradient(90deg, transparent, var(--ob-vert-jardin), transparent);
}

/* ---------------------------------------------------------------------
   BOUTONS
   --------------------------------------------------------------------- */
.btn-ob-orange {
    background-color: var(--ob-orange-vif);
    border: 2px solid var(--ob-orange-vif);
    color: var(--ob-blanc);
    font-weight: 700;
    padding: 0.7rem 1.8rem;
    border-radius: 50px;
    transition: var(--ob-transition);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.btn-ob-orange:hover {
    background-color: var(--ob-orange-fonce);
    border-color: var(--ob-orange-fonce);
    color: var(--ob-blanc);
    transform: translateY(-3px);
    box-shadow: var(--ob-ombre-forte);
}

.btn-ob-bleu {
    background-color: var(--ob-bleu-marine);
    border: 2px solid var(--ob-bleu-marine);
    color: var(--ob-blanc);
    font-weight: 700;
    padding: 0.7rem 1.8rem;
    border-radius: 50px;
    transition: var(--ob-transition);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.btn-ob-bleu:hover {
    background-color: var(--ob-bleu-vif);
    border-color: var(--ob-bleu-vif);
    color: var(--ob-blanc);
    transform: translateY(-3px);
    box-shadow: var(--ob-ombre-forte);
}

.btn-ob-contour {
    background-color: transparent;
    border: 2px solid var(--ob-blanc);
    color: var(--ob-blanc);
    font-weight: 700;
    padding: 0.65rem 1.7rem;
    border-radius: 50px;
    transition: var(--ob-transition);
}
.btn-ob-contour:hover {
    background-color: var(--ob-blanc);
    color: var(--ob-bleu-marine);
}

/* =====================================================================
   BARRE D'INFOS SUPÉRIEURE
   ===================================================================== */
.ob-topbar {
    background-color: var(--ob-bleu-marine);
    color: var(--ob-blanc);
    font-size: 0.85rem;
    padding: 0.45rem 0;
}
.ob-topbar a {
    color: var(--ob-blanc);
    opacity: 0.9;
}
.ob-topbar a:hover {
    opacity: 1;
    color: var(--ob-orange-vif);
}
.ob-topbar .separateur {
    opacity: 0.4;
    margin: 0 0.6rem;
}
.ob-topbar i {
    color: var(--ob-orange-vif);
    margin-right: 0.35rem;
}

/* =====================================================================
   NAVBAR PRINCIPALE
   ===================================================================== */
.ob-navbar {
    background-color: var(--ob-blanc);
    box-shadow: var(--ob-ombre-legere);
    padding: 0.7rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.ob-navbar .logo-site {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ob-bleu-marine);
}
.ob-navbar .logo-site .logo-icone {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ob-vert-jardin), var(--ob-bleu-vif));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ob-blanc);
    font-size: 1.3rem;
    box-shadow: var(--ob-ombre-legere);
}
.ob-navbar .logo-site .logo-texte-orange {
    color: var(--ob-orange-vif);
}

.ob-nav-link {
    color: var(--ob-bleu-marine) !important;
    font-weight: 700;
    padding: 0.55rem 0.9rem !important;
    border-radius: var(--ob-rayon-petit);
    position: relative;
}
.ob-nav-link i {
    color: var(--ob-vert-jardin);
    margin-right: 0.4rem;
}
.ob-nav-link:hover,
.ob-nav-link.active {
    color: var(--ob-orange-vif) !important;
    background-color: var(--ob-vert-clair);
}
.ob-nav-link:hover i,
.ob-nav-link.active i {
    color: var(--ob-orange-vif);
}

/* --- Menu principal desktop : liens séparés, sobres et animés --- */
.ob-nav-desktop {
    padding: 0 1.6rem;
    margin: 0 1.4rem;
    border-left: 1px solid var(--ob-gris-bordure);
    border-right: 1px solid var(--ob-gris-bordure);
}
.ob-nav-desktop .ob-nav-link {
    background-color: transparent !important;
    padding: 0.6rem 0.9rem !important;
    margin: 0 0.1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.ob-nav-desktop .ob-nav-link i {
    display: none;
}
.ob-nav-desktop .ob-nav-link::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--ob-vert-jardin), var(--ob-orange-vif));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ob-nav-desktop .ob-nav-link:hover,
.ob-nav-desktop .ob-nav-link.active {
    color: var(--ob-orange-vif) !important;
    background-color: transparent !important;
}
.ob-nav-desktop .ob-nav-link:hover::before,
.ob-nav-desktop .ob-nav-link.active::before {
    transform: scaleX(1);
}

.ob-nav-icones-action a {
    color: var(--ob-bleu-marine);
    font-size: 1.2rem;
    margin-left: 1.1rem;
    position: relative;
    transition: var(--ob-transition);
}
.ob-nav-icones-action a:hover {
    color: var(--ob-orange-vif);
    transform: translateY(-2px);
}
.ob-badge-panier {
    position: absolute;
    top: -8px;
    right: -12px;
    background-color: var(--ob-orange-vif);
    color: var(--ob-blanc);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50%;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Menu hamburger personnalisé --- */
.ob-hamburger {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--ob-vert-clair);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: var(--ob-transition);
}
.ob-hamburger:focus {
    box-shadow: 0 0 0 3px rgba(60, 141, 69, 0.35);
    outline: none;
}
.ob-hamburger span {
    display: block;
    width: 20px;
    height: 2.5px;
    background-color: var(--ob-bleu-marine);
    border-radius: 2px;
    transition: var(--ob-transition);
}
.ob-hamburger.actif {
    background-color: var(--ob-orange-vif);
}
.ob-hamburger.actif span {
    background-color: var(--ob-blanc);
}
.ob-hamburger.actif span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}
.ob-hamburger.actif span:nth-child(2) {
    opacity: 0;
}
.ob-hamburger.actif span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

@media (max-width: 991.98px) {
    .ob-menu-mobile {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(85%, 360px);
        height: 100vh;
        background-color: var(--ob-blanc);
        box-shadow: -8px 0 30px rgba(11, 37, 69, 0.2);
        z-index: 1050;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        padding: 1.5rem;
    }
    .ob-menu-mobile.ouvert {
        right: 0;
    }
    .ob-menu-mobile .ob-nav-link {
        display: block;
        padding: 0.9rem 1rem !important;
        border-bottom: 1px solid var(--ob-gris-bordure);
        border-radius: 0;
    }
    .ob-menu-mobile-entete {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 3px solid var(--ob-vert-clair);
    }
    .ob-overlay-menu {
        position: fixed;
        inset: 0;
        background: rgba(11, 37, 69, 0.55);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
    }
    .ob-overlay-menu.visible {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (min-width: 992px) {
    .ob-menu-mobile,
    .ob-menu-mobile-entete,
    .ob-overlay-menu {
        display: none !important;
    }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.ob-footer {
    background-color: var(--ob-bleu-marine);
    color: rgba(255,255,255,0.85);
    position: relative;
    overflow: hidden;
}
.ob-footer::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(60,141,69,0.35) 0%, transparent 70%);
}
.ob-footer h5 {
    color: var(--ob-blanc);
    font-weight: 700;
    margin-bottom: 1.1rem;
    position: relative;
    padding-bottom: 0.6rem;
}
.ob-footer h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: var(--ob-orange-vif);
    border-radius: 3px;
}
.ob-footer a {
    color: rgba(255,255,255,0.75);
}
.ob-footer a:hover {
    color: var(--ob-orange-vif);
    padding-left: 4px;
}
.ob-footer .ob-footer-icone-contact {
    color: var(--ob-orange-vif);
    width: 20px;
    text-align: center;
    margin-right: 0.5rem;
}
.ob-footer-reseaux a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}
.ob-footer-reseaux a:hover {
    background-color: var(--ob-orange-vif);
    color: var(--ob-blanc);
    transform: translateY(-4px);
}
.ob-footer-bas {
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 0.85rem;
    padding: 1.1rem 0;
}
.ob-footer-paiements span {
    background-color: rgba(255,255,255,0.1);
    padding: 0.35rem 0.7rem;
    border-radius: var(--ob-rayon-petit);
    margin-left: 0.4rem;
    font-size: 0.8rem;
}
.ob-footer-newsletter .form-control {
    border-radius: 50px 0 0 50px;
    border: none;
    padding: 0.65rem 1.2rem;
}
.ob-footer-newsletter .btn {
    border-radius: 0 50px 50px 0;
    background-color: var(--ob-orange-vif);
    color: var(--ob-blanc);
    border: none;
    font-weight: 700;
    padding: 0 1.4rem;
}
.ob-footer-newsletter .btn:hover {
    background-color: var(--ob-orange-fonce);
}

.ob-bouton-retour-haut {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--ob-vert-jardin);
    color: var(--ob-blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ob-ombre-forte);
    z-index: 1020;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: var(--ob-transition);
}
.ob-bouton-retour-haut.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ob-bouton-retour-haut:hover {
    background-color: var(--ob-orange-vif);
    color: var(--ob-blanc);
}

.ob-bouton-whatsapp {
    position: fixed;
    bottom: 160px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #25D366;
    color: var(--ob-blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: var(--ob-ombre-forte);
    z-index: 1020;
    transition: var(--ob-transition);
    animation: obWhatsappPulse 2.4s ease-in-out infinite;
}
.ob-bouton-whatsapp:hover {
    background-color: #1EBE5A;
    color: var(--ob-blanc);
    transform: scale(1.08);
}
@keyframes obWhatsappPulse {
    0%, 100% { box-shadow: var(--ob-ombre-forte), 0 0 0 0 rgba(37, 211, 102, 0.5); }
    50% { box-shadow: var(--ob-ombre-forte), 0 0 0 8px rgba(37, 211, 102, 0); }
}

@media (max-width: 575.98px) {
    .ob-bouton-whatsapp {
        bottom: 150px;
    }
}

/* =====================================================================
   BANDEAU COOKIES
   ===================================================================== */
.ob-cookies-banniere {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ob-blanc);
    box-shadow: 0 -8px 30px rgba(11, 37, 69, 0.18);
    z-index: 1100;
    padding: 1.3rem 0;
    transform: translateY(120%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid var(--ob-vert-jardin);
}
.ob-cookies-banniere.visible {
    transform: translateY(0);
}
.ob-cookies-icone {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--ob-vert-clair);
    color: var(--ob-vert-jardin);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.ob-cookies-banniere h6 {
    color: var(--ob-bleu-marine);
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.ob-cookies-banniere p {
    font-size: 0.9rem;
    color: var(--ob-texte-clair);
    margin-bottom: 0;
}
.ob-cookies-banniere a {
    color: var(--ob-bleu-vif);
    font-weight: 700;
}
.ob-cookies-boutons .btn {
    white-space: nowrap;
}
.btn-ob-cookies-refuser {
    background: transparent;
    border: 2px solid var(--ob-gris-bordure);
    color: var(--ob-texte-clair);
    font-weight: 700;
    padding: 0.55rem 1.3rem;
    border-radius: 50px;
}
.btn-ob-cookies-refuser:hover {
    border-color: var(--ob-bleu-marine);
    color: var(--ob-bleu-marine);
}

/* =====================================================================
   MESSAGES FLASH
   ===================================================================== */
.alert-flash {
    position: fixed;
    top: 100px;
    right: 24px;
    z-index: 1200;
    min-width: 300px;
    max-width: 420px;
    padding: 1rem 1.4rem;
    border-radius: var(--ob-rayon-petit);
    box-shadow: var(--ob-ombre-forte);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
}
.alert-flash-success { background-color: #E9F5E8; color: #2C6B31; border-left: 5px solid var(--ob-vert-jardin); }
.alert-flash-erreur   { background-color: #FBEAE5; color: #A8371F; border-left: 5px solid #D9421F; }
.alert-flash-info     { background-color: #E7F1FB; color: #12518C; border-left: 5px solid var(--ob-bleu-vif); }
.alert-flash-fermer {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}
.alert-flash-fermer:hover { opacity: 1; }

/* =====================================================================
   ANIMATIONS UTILITAIRES
   ===================================================================== */
@keyframes ob-flotter {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.ob-anim-flotter {
    animation: ob-flotter 3.5s ease-in-out infinite;
}

@keyframes ob-pulse-vert {
    0% { box-shadow: 0 0 0 0 rgba(60, 141, 69, 0.5); }
    70% { box-shadow: 0 0 0 12px rgba(60, 141, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(60, 141, 69, 0); }
}
.ob-anim-pulse {
    animation: ob-pulse-vert 2s infinite;
}

@keyframes ob-feuille-balance {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}
.ob-anim-feuille {
    display: inline-block;
    animation: ob-feuille-balance 2.4s ease-in-out infinite;
    transform-origin: bottom center;
}

/* =====================================================================
   COMPOSANT PARTAGÉ : étapes du tunnel de commande
   Utilisé par panier.php, commande-etape1.php, commande-etape2.php
   et commande-confirmation.php — c'est un composant commun aux 4
   pages du tunnel d'achat, il vit donc ici plutôt que d'être dupliqué.
   ===================================================================== */
.ob-pn-etapes {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 2.5rem;
}
.ob-pn-etape {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ob-texte-clair);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
}
.ob-pn-etape span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ob-gris-bordure);
    color: var(--ob-blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.ob-pn-etape-active,
.ob-pn-etape-validee {
    color: var(--ob-bleu-marine);
}
.ob-pn-etape-active span {
    background: var(--ob-orange-vif);
}
.ob-pn-etape-validee span {
    background: var(--ob-vert-jardin);
}

/* =====================================================================
   COMPOSANT PARTAGÉ : structure du tunnel de commande
   Utilisé par commande-etape1.php, commande-etape2.php et
   commande-confirmation.php (structure identique des 3 pages d'un
   même parcours). Le contenu SPÉCIFIQUE à chaque étape reste dans
   le CSS propre de cette page (commande-etapeX.css).
   ===================================================================== */
.ob-cm-section {
    padding: 3rem 0 5rem;
    background-color: var(--ob-gris-clair);
    min-height: 60vh;
}
.ob-cm-carte {
    background: var(--ob-blanc);
    border-radius: var(--ob-rayon);
    box-shadow: var(--ob-ombre-legere);
    padding: 1.8rem;
}
.ob-cm-carte h4 {
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
}
.ob-cm-carte h4 i {
    color: var(--ob-orange-vif);
    margin-right: 0.5rem;
}
.ob-cm-formulaire label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ob-bleu-marine);
    margin-bottom: 0.3rem;
    display: block;
}
.ob-cm-formulaire .form-control {
    border-radius: var(--ob-rayon-petit);
    border-color: var(--ob-gris-bordure);
    padding: 0.6rem 0.9rem;
}
.ob-cm-formulaire .form-control:focus {
    border-color: var(--ob-vert-jardin);
    box-shadow: 0 0 0 3px rgba(60,141,69,0.15);
}
.ob-cm-carte-radio {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 2px solid var(--ob-gris-bordure);
    border-radius: var(--ob-rayon-petit);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.8rem;
    cursor: pointer;
    transition: var(--ob-transition);
}
.ob-cm-carte-radio:hover {
    border-color: var(--ob-vert-jardin);
}
.ob-cm-carte-radio input:checked ~ span,
.ob-cm-carte-radio:has(input:checked) {
    border-color: var(--ob-vert-jardin);
}
.ob-cm-carte-radio:has(input:checked) {
    background-color: var(--ob-vert-tres-clair);
}
.ob-cm-carte-radio span {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    color: var(--ob-texte);
}
.ob-cm-carte-radio span i {
    color: var(--ob-vert-jardin);
    margin-right: 0.4rem;
}
.ob-cm-carte-radio em {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--ob-texte-clair);
}
.ob-cm-carte-radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--ob-vert-jardin);
}
.ob-cm-retour {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--ob-texte-clair);
    font-weight: 700;
}
.ob-cm-retour:hover {
    color: var(--ob-orange-vif);
}

/* Résumé panier (sidebar, partiel commande_resume_panier.php) */
.ob-cm-recap-panier {
    background: var(--ob-blanc);
    border-radius: var(--ob-rayon);
    box-shadow: var(--ob-ombre-legere);
    padding: 1.6rem;
    position: sticky;
    top: 100px;
}
.ob-cm-recap-panier h5 {
    font-size: 1rem;
    margin-bottom: 1.1rem;
}
.ob-cm-recap-panier h5 i {
    color: var(--ob-orange-vif);
    margin-right: 0.4rem;
}
.ob-cm-liste-articles {
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding-right: 4px;
}
.ob-cm-article {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}
.ob-cm-article-image {
    width: 48px;
    height: 48px;
    border-radius: var(--ob-rayon-petit);
    flex-shrink: 0;
    color: #B9BEC2;
    overflow: hidden;
}
.ob-cm-article-image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: cover;
}
.ob-cm-article-infos {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
}
.ob-cm-article-infos em {
    font-style: normal;
    color: var(--ob-texte-clair);
    font-size: 0.72rem;
}
.ob-cm-article strong {
    font-size: 0.82rem;
    color: var(--ob-bleu-marine);
}
.ob-cm-recap-ligne {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--ob-texte-clair);
    margin-bottom: 0.6rem;
}
.ob-cm-recap-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: var(--ob-bleu-marine);
    font-size: 1.15rem;
    border-top: 2px solid var(--ob-gris-bordure);
    padding-top: 0.8rem;
    margin-top: 0.4rem;
}
.ob-cm-modifier-panier {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--ob-bleu-vif);
    font-weight: 700;
}

/* =====================================================================
   COMPOSANT PARTAGÉ : carte d'authentification
   Utilisé par connexion.php et inscription.php (même famille de page :
   une carte centrée avec icône, titre, formulaire). Le contenu propre
   à chaque formulaire reste dans le CSS de la page correspondante.
   ===================================================================== */
.ob-au-section {
    padding: 4rem 0 6rem;
    background: linear-gradient(180deg, var(--ob-vert-tres-clair) 0%, var(--ob-gris-clair) 100%);
    min-height: 70vh;
}
.ob-au-carte {
    background: var(--ob-blanc);
    border-radius: var(--ob-rayon);
    box-shadow: var(--ob-ombre-forte);
    padding: 2.4rem;
    text-align: center;
}
.ob-au-icone {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--ob-vert-clair);
    color: var(--ob-vert-jardin);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
}
.ob-au-carte h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.ob-au-sous-titre {
    color: var(--ob-texte-clair);
    font-size: 0.9rem;
    margin-bottom: 1.8rem;
}
.ob-au-formulaire {
    text-align: left;
}
.ob-au-formulaire label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ob-bleu-marine);
    margin-bottom: 0.35rem;
    display: block;
}
.ob-au-formulaire .form-control,
.ob-au-formulaire .form-select {
    border-radius: var(--ob-rayon-petit);
    border-color: var(--ob-gris-bordure);
    padding: 0.65rem 0.9rem;
}
.ob-au-formulaire .form-control:focus,
.ob-au-formulaire .form-select:focus {
    border-color: var(--ob-vert-jardin);
    box-shadow: 0 0 0 3px rgba(60,141,69,0.15);
}
.ob-au-champ-icone {
    position: relative;
}
.ob-au-champ-icone > i:first-child {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ob-texte-clair);
}
.ob-au-champ-icone input {
    padding-left: 2.6rem;
}
.ob-au-bas-carte {
    margin-top: 1.6rem;
    font-size: 0.88rem;
    color: var(--ob-texte-clair);
}
.ob-au-bas-carte a {
    color: var(--ob-orange-vif);
    font-weight: 700;
}
.ob-au-rassurance {
    margin-top: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}
.ob-au-rassurance div {
    font-size: 0.8rem;
    color: var(--ob-texte-clair);
}
.ob-au-rassurance i {
    color: var(--ob-vert-jardin);
    margin-right: 0.4rem;
}
.ob-au-rassurance a {
    color: var(--ob-bleu-vif);
    font-weight: 700;
}

/* =====================================================================
   UTILITAIRES PARTAGÉS : en-têtes de section
   Réutilisés par plusieurs pages (accueil, garanties-sav, à-propos...) :
   un sous-titre de section et une "eyebrow" (petit label au-dessus d'un titre).
   ===================================================================== */
.ob-sous-titre-section {
    max-width: 620px;
    margin: 0.5rem auto 0;
    color: var(--ob-texte-clair);
}
.ob-eyebrow-orange {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ob-orange-vif);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 0.6rem;
}
.ob-eyebrow-blanc {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ob-blanc);
    background: rgba(255,255,255,0.12);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}
.ob-eyebrow-blanc i {
    color: var(--ob-orange-vif);
}

/* =====================================================================
   FIN DU FICHIER COMMUN
   ===================================================================== */

/* Responsive : réduction des animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}