/* ============================================================
   T DIGITAL AGENCY : Charte graphique unifiée (brand.css)
   Chargé APRÈS les styles de chaque page : il harmonise
   couleurs, typographie et logo sur tout le site.
   Palette alignée sur le logo : navy profond + orange vif.
   ============================================================ */

/* --- 1. Palette harmonisée (remplace le jaune-or par un ambre
       orangé tiré du dégradé du logo) --- */
:root {
    --dark: #050a12;
    --navy: #122142;          /* navy du logo, un peu plus bleu */
    --orange: #f97316;        /* orange principal du logo */
    --orange-bright: #ff8c1a;
    --orange-glow: rgba(249, 115, 22, 0.25);
    --gold: #ffa733;          /* ambre chaud, remplace le jaune #fbbf24 */
    --gradient-primary: linear-gradient(135deg, #f97316 0%, #ffa733 100%);
    --gradient-dark: linear-gradient(135deg, #050a12 0%, #122142 100%);
}

/* --- 2. Typographie : Montserrat (même esprit géométrique que le
       lettrage du logo) pour les titres et la marque, Inter pour le texte --- */
h1, h2, h3, h4, h5,
.logo-brand,
.footer-logo,
.price,
.slide-content h1,
.center-title h2 {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    letter-spacing: -0.3px;
}

.logo-brand,
.footer-logo {
    font-weight: 800;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    white-space: nowrap;   /* le nom de la marque ne se coupe jamais en deux lignes */
}

/* Les libelles de navigation et de boutons restent sur une ligne */
.pack-pill,
.btn-back,
.btn,
.btn-order,
.band-btn {
    white-space: nowrap;
}

/* --- 3. Badge logo uniforme sur toutes les pages :
       carré blanc arrondi, liseré orange, comme le header validé --- */
.logo-img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    padding: 4px;
    border: 2px solid var(--orange);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.35);
    object-fit: contain;
    filter: none !important;
}

/* Aucune rotation du logo : un logo qui tourne fait gadget, pas agence. */
.logo-img,
.logo-container:hover .logo-img {
    animation: none !important;
    transform: none !important;
}

.logo-container:hover .logo-img {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.6);
    filter: none !important;
}

/* --- 4. Détails d'harmonie --- */
.logo-brand span,
.footer-logo span { color: var(--gold); }

.badge-popular { background: var(--gold); color: #122142; }

::selection { background: rgba(249, 115, 22, 0.3); }

/* --- 5. Illustrations de marque -------------------------------
   Une illustration n'est pas une photo : elle ne doit jamais être
   rognée. On la pose entière sur un fond clair, dans le même cadre
   arrondi que les visuels du site. --------------------------- */
.hero-photo.illus {
    background: #f7f8fb;
    border-radius: 24px !important;
    overflow: hidden;
}

.hero-photo.illus img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    /* dégage le bas : la pastille de la page s'y superpose */
    padding: 6px 6px 44px;
}