/* ==========================================================================
   PML Events & Corporate — design system graphique/typographique
   Refonte complète : plus aucune photographie. Univers "invitation gravée" :
   aubergine profond + laiton champagne, halo de particules en canvas pour
   l'ambiance des heros.

   SYNTHÈSE "Apple" (jury de 3 propositions) : partage exactement le même
   système de tokens neutres que style.css (--space-*, --radius-*,
   --ease-* et --duration-*) pour une grammaire de composants prévisible d'une
   marque à l'autre — seules les couleurs et les ombres restent teintées
   PML (aubergine/or). La typographie passe à la pile système
   (-apple-system/SF Pro) sur titres ET corps, mais avec une voix
   délibérément DIFFÉRENTE de MLGS : légère et ouverte (300/500, tracking
   positif) plutôt que ferme et resserrée, pour préserver le caractère
   "invitation gravée" haut de gamme malgré l'abandon de la serif — de
   grandes tailles de titre (échelle .display-* en clamp(), façon hero
   Apple) mais sans la lourdeur de graisse, ce qui différencie clairement
   les deux marques tout en gardant la même ambition "page produit".
   Deux vrais trous de cohérence, déjà présents dans le HTML actuel sans y
   toucher, sont comblés ici : les dropdowns ("Nos solutions", "Nos
   marques") héritaient du blanc Bootstrap par défaut sur une navbar
   sombre, et .py-6 (utilisé sur la quasi-totalité des pages PML) n'avait
   aucune règle et donc aucun effet. Aucune variable ni sélecteur existant
   n'a été renommé ou supprimé.
   ========================================================================== */

:root {
    /* ---- Palette "Horizon" (pastel) ----
       Remplace la palette grise temporaire. PML bascule d'un thème sombre
       (aubergine + texte ivoire) vers un pastel CLAIR miroir de celui de
       MLGS (style.css) : papier ivoire + mauve poudré + touche champagne.
       Conséquence structurelle : --pml-ink et --pml-ivory sont maintenant
       INVERSÉS par rapport à ce que leur nom suggère — --pml-ink porte la
       valeur CLAIRE (fond de page/navbar/hero) et --pml-ivory porte la
       valeur SOMBRE (texte principal), afin que `body { background:
       var(--pml-ink); color: var(--pml-ivory); }` (plus bas) continue de
       fonctionner sans toucher au nom des variables ni aux gabarits. Même
       logique pour les alias --pml-black/--pml-charcoal/--pml-muted, qui
       suivent respectivement --pml-ink/--pml-ink-soft/--pml-smoke. Chaque
       paire texte/fond a été vérifiée AA (≥ 4.5:1) ; --pml-gold est utilisé
       à la fois comme fond de bouton (texte blanc dessus) et comme texte
       seul sur papier — vérifié dans les deux rôles. Le vert WhatsApp
       (#25D366) n'est pas concerné. */
    --pml-ink: #F9F5F3;       /* papier ivoire — fond de page/navbar/hero */
    --pml-ink-soft: #F3ECE8; /* ivoire légèrement plus soutenu — dégradé hero + fond du footer */
    --pml-ivory: #3B2F3D;     /* encre aubergine — texte principal, titres */
    --pml-smoke: #706670;    /* texte atténué (.lead, .text-muted, paragraphes) */
    --pml-gold: #965F73;     /* mauve poudré (foncé) — boutons, liens, icônes */
    --pml-gold-soft: #D8B7C4; /* mauve poudré (clair) — hover/outline/bordures */
    --pml-wine: #E8D2A0;      /* champagne pastel — accent chaud en bout de dégradé */
    --pml-line: #E7DADD;      /* liseré */
    --pml-card: #FFFFFF;      /* surface (cartes, dropdowns, champs) */
    --pml-black: #F9F5F3; /* alias conservé pour compatibilité — aligné sur --pml-ink */
    --pml-charcoal: #F3ECE8; /* alias conservé pour compatibilité — aligné sur --pml-ink-soft */
    --pml-muted: #706670; /* alias conservé pour compatibilité — aligné sur --pml-smoke */

    /* ---- Typographie système (façon Apple : SF Pro / -apple-system) ---- */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Consolas, monospace;

    /* ---- Échelle d'espacement — identique à style.css (MLGS) ---- */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-9: 6rem;     /* 96px */

    /* ---- Rayons — 3 paliers + pilule, identiques à style.css (MLGS) ---- */
    --radius-sm: 10px;   /* boutons, champs, puces de dropdown */
    --radius-md: 16px;   /* cartes, dropdowns, tuiles graphiques */
    --radius-lg: 22px;   /* grandes surfaces */
    --radius-pill: 980px; /* boutons d'appel à l'action, façon Apple */

    /* ---- Mouvement — courbes et durées, identiques à style.css (MLGS) ---- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* ---- Ombres — 3 paliers teintés encre + glow mauve ----
       Repassées de noir pur/forte opacité (calibrées pour se voir sur un
       fond déjà sombre) à une teinte encre douce et bien plus légère,
       cohérente avec les ombres de style.css (MLGS) sur son papier clair. */
    --pml-shadow-sm: 0 2px 10px rgba(59, 47, 61, 0.08);
    --pml-shadow-md: 0 16px 40px rgba(59, 47, 61, 0.12);
    --pml-shadow-lg: 0 30px 68px rgba(59, 47, 61, 0.16);
    --pml-shadow-glow: 0 22px 50px rgba(59, 47, 61, 0.14), 0 0 0 1px color-mix(in srgb, var(--pml-gold) 20%, transparent);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: var(--pml-ink);
    color: var(--pml-ivory);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    letter-spacing: 0;
}

::selection { background: var(--pml-gold); color: var(--pml-ivory); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--pml-ivory);
}

/* Échelle affinée par niveau : même logique de gradation que style.css
   (plus la taille grandit, plus l'interlignage se resserre), mais une voix
   délibérément distincte — graisses légères et tracking ouvert plutôt que
   serré/gras — pour préserver l'élégance "invitation gravée" sans la
   police serif. */
h1 { font-weight: 300; letter-spacing: 0.012em; line-height: 1.1; }
h2 { font-weight: 300; letter-spacing: 0.01em; line-height: 1.15; }
h3 { font-weight: 500; letter-spacing: 0.006em; line-height: 1.2; }
h4, h5, h6 { font-weight: 500; letter-spacing: 0.004em; line-height: 1.25; }

/* ============== ÉCHELLE "HERO" (titres Bootstrap display-*) ==============
   Non stylée auparavant en taille : héritait du poids 300 de Bootstrap
   (déjà proche de la voix PML, mais sans échelle "hero"). Portée à une
   échelle haute façon page produit Apple, mais en gardant des graisses
   légères (300/500) plutôt que très grasses, pour rester fidèle à la voix
   PML — la taille impressionne, pas l'épaisseur. Les gabarits PML
   n'utilisent en pratique que .display-4, mais .display-1/2/3/5/6 sont
   couverts par cohérence et pour anticiper une page future. */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-sans);
    line-height: 1.08;
    color: var(--pml-ivory);
}
.display-1 { font-size: clamp(3rem, 6.2vw, 4.75rem); font-weight: 300; letter-spacing: 0.006em; }
.display-2 { font-size: clamp(2.7rem, 5.6vw, 4.2rem); font-weight: 300; letter-spacing: 0.006em; }
.display-3 { font-size: clamp(2.4rem, 4.8vw, 3.75rem); font-weight: 300; letter-spacing: 0.005em; }
.display-4 { font-size: clamp(2.1rem, 4.2vw, 3.25rem); font-weight: 300; letter-spacing: 0.004em; line-height: 1.12; }
.display-5 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 500; letter-spacing: 0.003em; line-height: 1.16; }
.display-6 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); font-weight: 500; letter-spacing: 0.002em; line-height: 1.2; }

/* Le vrai hero (accueil + pages internes) pousse la taille encore plus loin
   que l'échelle générique ci-dessus : c'est la ligne d'accroche
   principale. Vérifié dans les gabarits : toutes les pages PML utilisent
   .display-4 pour leur h1 de hero — .display-3 est couvert par cohérence
   avec MLGS et pour anticiper une page future. */
.pml-page-hero .display-3 { font-size: clamp(2.6rem, 5.6vw, 4rem); }
.pml-page-hero .display-4 { font-size: clamp(2.3rem, 5vw, 3.6rem); }

@media (max-width: 768px) {
    .pml-page-hero .display-4 { font-size: clamp(1.9rem, 8vw, 2.35rem); }
}

.lead { font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--pml-smoke); }

/* h1..h6, .display-1..6 et .lead ci-dessus fixent une couleur explicite :
   ça bat l'héritage, donc un titre placé DANS un conteneur .text-white (les
   heros photo .pml-page-hero--photo, qui gardent un voile sombre + texte
   blanc quel que soit le thème du site) retombait en encre foncée sur voile
   sombre — quasi invisible. Même bug déjà corrigé côté MLGS (style.css). */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white .display-1, .text-white .display-2, .text-white .display-3,
.text-white .display-4, .text-white .display-5, .text-white .display-6,
.text-white .lead, .text-white p, .text-white li {
    color: inherit;
}

.badge { border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0.02em; }

p, li { color: var(--pml-smoke); }
a {
    color: var(--pml-gold);
    transition: color var(--duration-fast) var(--ease-standard);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Focus clavier visible, discret, cohérent avec l'identité or */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--pml-gold-soft);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.eyebrow {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pml-gold);
}

.rule {
    width: 60px;
    height: 1px;
    border-radius: 1px;
    background: var(--pml-gold);
    margin: 20px 0;
}

/* Étiquette de catégorie sur les cartes "Réalisations" */
.pml-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pml-gold);
    background: color-mix(in srgb, var(--pml-gold) 12%, transparent);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}
.rule.mx-auto { margin-left: auto; margin-right: auto; }

/* ============== SECTIONS ============== */
.bg-light { background: var(--pml-card) !important; }
.text-muted { color: var(--pml-smoke) !important; }
.section-alternate { background: var(--pml-card); border-top: 1px solid var(--pml-line); border-bottom: 1px solid var(--pml-line); }

/* ============== PARTENAIRES (preuve sociale) ============== */
/* Miroir de .partner-logo-img/.partner-logo-text côté MLGS (style.css) :
   même bandeau en niveaux de gris révélé en couleur au survol. */
.partner-logo-img {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter var(--duration-base) var(--ease-out),
                opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}
.partner-logo-img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-2px);
}

.partner-logo-text {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--pml-smoke);
    opacity: 0.75;
    transition: color var(--duration-base) var(--ease-out),
                opacity var(--duration-base) var(--ease-out);
}
.partner-logo-text:hover {
    color: var(--pml-ivory);
    opacity: 1;
}

/* Rythme vertical partagé avec MLGS (même token --space-8) : cette classe
   est utilisée sur la quasi-totalité des pages PML mais n'avait jusqu'ici
   aucune règle dans cette feuille (elle n'a pas d'équivalent Bootstrap
   natif au-delà de .py-5), donc aucun effet. */
.py-6 {
    padding-top: var(--space-8) !important;
    padding-bottom: var(--space-8) !important;
}

.pml-page-hero {
    position: relative;
    background: linear-gradient(160deg, var(--pml-ink) 0%, var(--pml-ink-soft) 60%, var(--pml-wine) 140%);
}
.pml-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(rgba(59,47,61,0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.pml-page-hero .container,
.pml-page-hero .container-fluid { position: relative; z-index: 2; }

/* ============== HERO PLEIN ÉCRAN AVEC PHOTO ==============
   Remplace le halo/la trame décorative par une vraie photo, à la demande
   du client — miroir exact du traitement MLGS (style.css) : la photo
   occupe toute la largeur ET la hauteur de l'écran, avec un voile sombre
   uniforme (contenu centré sur toutes les pages PML) pour la lisibilité,
   et sans la trame à points (faite pour un fond plat, pas pour une photo). */
.pml-page-hero--photo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: clamp(150px, 20vw, 210px);
    padding-bottom: clamp(64px, 9vw, 110px);
}
.pml-page-hero--photo::before {
    display: none;
}
.pml-page-hero--photo .hero-section__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    z-index: 0;
}
.pml-page-hero--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(12, 12, 12, 0.74);
}

/* Indicateur de défilement : signale aux visiteurs qui découvrent le site
   qu'il y a du contenu sous le hero, et sert de raccourci cliquable vers la
   section suivante (cf. script en bas de layouts/pml.blade.php). Toujours
   ancré en bas du hero, quelle que soit sa hauteur (plein écran ou bandeau
   court type "Mentions légales"). Miroir du traitement MLGS (style.css). */
.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    animation: hero-scroll-cue-bounce 2.2s ease-in-out infinite;
    transition: border-color var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}
.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
    border-color: var(--pml-gold);
    background: rgba(255, 255, 255, 0.16);
    color: var(--pml-gold-soft);
    animation-play-state: paused;
}
.hero-scroll-cue:focus-visible {
    outline: 2px solid var(--pml-gold);
    outline-offset: 3px;
}

/* Le hero "court" sans --photo (aujourd'hui : Mentions légales PML) hérite
   du dégradé clair de la page plutôt que du voile sombre des heros --photo
   — le halo blanc ci-dessus y serait quasi invisible. On y bascule sur
   l'encre foncée utilisée pour le texte courant. */
.pml-page-hero:not(.pml-page-hero--photo) .hero-scroll-cue {
    border-color: color-mix(in srgb, var(--pml-ivory) 45%, transparent);
    background: color-mix(in srgb, var(--pml-ivory) 8%, transparent);
    color: var(--pml-ivory);
}
.pml-page-hero:not(.pml-page-hero--photo) .hero-scroll-cue:hover,
.pml-page-hero:not(.pml-page-hero--photo) .hero-scroll-cue:focus-visible {
    border-color: var(--pml-gold);
    background: color-mix(in srgb, var(--pml-ivory) 16%, transparent);
    color: var(--pml-gold);
}
@keyframes hero-scroll-cue-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* ============== ACCESSIBILITÉ : LIEN D'ÉVITEMENT ============== */
/* Permet aux utilisateurs clavier de sauter directement au contenu sans
   traverser la navbar (dropdown "Nos solutions" + sélecteur de marque). */
.skip-link {
    position: absolute;
    top: -60px;
    left: 0.5rem;
    z-index: 2000;
    background: var(--pml-ink);
    color: var(--pml-gold) !important;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--pml-gold);
    transition: top var(--duration-base, 0.2s) var(--ease-out, ease);
}

.skip-link:focus {
    top: 0.5rem;
    outline: 2px solid var(--pml-gold-soft);
    outline-offset: 2px;
}

/* ============== NAVBAR ============== */
/* Même ton que le haut du hero : pas de barre distincte, pas de flou/ombre,
   mais un fond plein pour rester lisible sur les pages sans hero sombre. */
.navbar.navbar-floating {
    background: var(--pml-ink) !important;
    border-bottom: none;
    box-shadow: none !important;
}

/* Navbar transparente flottant sur la photo du hero (pages avec
   .pml-page-hero--photo, cf. .navbar-overlay) : redevient pleine dès qu'on
   quitte le hero, pour rester lisible sur les sections claires en dessous.
   Miroir du traitement MLGS (style.css). */
.navbar.navbar-floating.navbar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    transition: background-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.navbar.navbar-floating.navbar-overlay.is-scrolled {
    background: var(--pml-ink) !important;
    box-shadow: var(--pml-shadow-md) !important;
}

/* Tant que la navbar est transparente sur la photo (voile sombre), la
   marque et les liens doivent rester clairs quel que soit le thème du
   site — comme le reste du contenu en .text-white superposé au hero photo.
   Dès .is-scrolled la navbar redevient pleine/claire et les couleurs
   --pml-ivory/--pml-smoke habituelles (plus bas) s'appliquent normalement. */
.navbar-overlay:not(.is-scrolled) .navbar-brand,
.navbar-overlay:not(.is-scrolled) .navbar-brand span,
.navbar-overlay:not(.is-scrolled) .navbar-brand .accent,
.navbar-overlay:not(.is-scrolled) .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar .nav-link {
    color: var(--pml-smoke) !important;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: var(--radius-pill);
    position: relative;
    transition: color var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out);
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
    color: var(--pml-gold) !important;
}

/* Fond en pastille au survol (façon "sites vitrine" classiques, en miroir
   du traitement MLGS) : exclu du rond WhatsApp qui a son propre traitement. */
.navbar .nav-link:not(.whatsapp-nav-link):hover {
    background-color: rgba(59,47,61,0.06);
}

/* Icône WhatsApp de la navbar : couleur/forme figées, pas de soulignement
   animé hérité de .nav-link (non pertinent pour un bouton rond). */
.navbar .nav-link.whatsapp-nav-link,
.navbar .nav-link.whatsapp-nav-link:hover {
    color: #ffffff !important;
}
.navbar .nav-link.whatsapp-nav-link::after { content: none; }

/* Chevron des menus déroulants ("Nos solutions", "Nos marques") toujours
   sur la même ligne que le libellé, à droite. */
.navbar .nav-link.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.navbar .nav-link.dropdown-toggle::after {
    flex-shrink: 0;
    margin-left: 0.4em;
}

/* Soulignement animé au survol/actif, en miroir du traitement MLGS : exclu
   des .dropdown-toggle, qui utilisent déjà ::after pour leur chevron
   Bootstrap — un élément ne peut avoir qu'un seul ::after, les deux
   traitements ne peuvent donc pas coexister sur le même lien (bug identifié
   et corrigé côté MLGS, appliqué ici en miroir). */
.navbar .nav-link:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 50%;
    background-color: var(--pml-gold);
    transition: width var(--duration-base) var(--ease-out);
    transform: translateX(-50%);
}
.navbar .nav-link:not(.dropdown-toggle):hover::after,
.navbar .nav-link.active:not(.dropdown-toggle)::after { width: 55%; }

.navbar-brand {
    color: var(--pml-ivory) !important;
    letter-spacing: 0.01em;
}
.navbar-brand span,
.navbar-brand .accent {
    color: var(--pml-gold) !important;
}

.navbar-toggler {
    border-color: var(--pml-line);
    /* L'icône ☰ venait de navbar-dark (Bootstrap) puis était inversée au
       filtre pour rester visible sur la navbar sombre. La navbar est
       maintenant claire une fois pleine (scrollée ou hors hero photo) : on
       fixe directement la couleur de l'icône via la variable interne de
       Bootstrap plutôt que de rejouer un filtre. Le hex est en dur (une
       data-URI ne peut pas référencer var()) — à resynchroniser si
       --pml-ivory change de valeur. */
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233B2F3D' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Sur le hero photo, la navbar reste transparente et flotte sur une image
   sombre (voile 74% noir, cf. .pml-page-hero--photo::after) tant qu'on n'a
   pas scrollé : l'icône doit y rester claire, comme le reste du contenu en
   .text-white superposé à la photo. Dès que .is-scrolled (ou qu'il n'y a
   pas de hero photo) la navbar redevient pleine et claire, où l'icône
   sombre ci-dessus s'applique normalement. */
.navbar-overlay:not(.is-scrolled) .navbar-toggler {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Menus déroulants ("Nos solutions", sélecteur "Nos marques") : jusqu'ici
   non stylés dans cette feuille (fond blanc Bootstrap par défaut, hors
   charte sur un site sombre) — alignés ici sur la même mécanique de
   rayon/ombre/transition que le reste du système, avec la palette PML. */
.dropdown-menu {
    background: var(--pml-card);
    border: 1px solid var(--pml-line);
    border-radius: var(--radius-md);
    box-shadow: var(--pml-shadow-lg);
    margin-top: 12px;
    padding: 0.5rem;
}

.dropdown-item {
    color: var(--pml-ivory);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
    margin: 2px 6px;
    width: calc(100% - 12px);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: color-mix(in srgb, var(--pml-gold) 14%, transparent);
    color: var(--pml-gold);
}
.dropdown-item.active,
.dropdown-item.active-page {
    background: color-mix(in srgb, var(--pml-gold) 18%, transparent) !important;
    border-left: 3px solid var(--pml-gold);
    padding-left: calc(1rem - 3px) !important;
    color: var(--pml-ivory) !important;
}
.dropdown-item-text { color: var(--pml-smoke); }
.dropdown-divider { border-color: var(--pml-line); }

/* ============== BOUTONS ============== */
/* .btn-warning / .btn-outline-warning reçoivent un rayon pilule façon
   Apple (CTA) ; le .btn Bootstrap générique (.btn-dark, .btn-light déjà
   présents dans les vues PML) n'est volontairement pas touché ici, pour
   ne pas modifier des boutons hors-sujet. */
.btn-warning {
    background-color: var(--pml-gold);
    border-color: var(--pml-gold);
    border-radius: var(--radius-pill);
    /* --pml-gold est désormais le mauve FONCÉ (fond sombre) : texte noir
       n'y passe plus l'AA (4.18:1) — blanc à la place. Au survol le fond
       passe au mauve CLAIR (--pml-gold-soft) où c'est l'inverse : blanc y
       est illisible (1.83:1), donc le texte bascule sur l'encre foncée. */
    color: #fff;
    font-weight: 600;
    transition: background-color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--pml-gold-soft);
    border-color: var(--pml-gold-soft);
    color: var(--pml-ivory);
    transform: translateY(-2px);
    box-shadow: var(--pml-shadow-md);
}
.bg-warning { background-color: var(--pml-gold) !important; }

.btn-outline-warning {
    color: var(--pml-gold);
    border-color: var(--pml-gold);
    border-radius: var(--radius-pill);
    transition: background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.btn-outline-warning:hover {
    background: var(--pml-gold);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--pml-shadow-md);
}

.btn[style*="c9a24d"]:hover,
.btn[style*="C9A24D"]:hover,
.btn[style*="c9a15f"]:hover {
    filter: brightness(0.92);
}

/* ============== CARTES ============== */
.card {
    background: var(--pml-card);
    border: 1px solid var(--pml-line);
    color: var(--pml-ivory);
    border-radius: var(--radius-md);
    box-shadow: var(--pml-shadow-sm);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pml-shadow-glow);
    border-color: var(--pml-gold);
}

.card .text-muted { color: var(--pml-smoke) !important; }

/* Icônes : cercle fin doré, pas de fond plein */
.pml-icon,
.icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--pml-gold);
    color: var(--pml-gold);
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}
.icon-circle.icon-lg { width: 64px; height: 64px; font-size: 1.35rem; }

/* Micro-interaction : l'icône respire légèrement quand la carte parente est survolée */
.card:hover .pml-icon,
.card:hover .icon-circle {
    transform: scale(1.08);
    border-color: var(--pml-gold-soft);
}

.card .bi.text-primary { color: var(--pml-gold) !important; }

/* ============== FRISE "COMMENT ÇA MARCHE" ============== */
/* Parcours en 4 étapes numérotées (ex : page Nos Solutions). Pas de trait de
   liaison entre les cercles : il passait au-dessus des icônes au lieu de
   rester derrière, donc on l'a retiré plutôt que de bricoler le z-index. */
.steps-frise { position: relative; }
.steps-frise .step-item { position: relative; }
.step-marker {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pml-card);
    border: 1.5px solid var(--pml-gold);
    color: var(--pml-gold);
    font-size: 1.35rem;
    position: relative;
    z-index: 2;
    transition: transform var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}
.step-item:hover .step-marker {
    transform: scale(1.08);
    border-color: var(--pml-gold-soft);
}

/* Vignette graphique générique (remplace les photos dans les grilles réalisations/services) */
.graphic-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, var(--pml-ink) 0%, var(--pml-wine) 130%);
    color: var(--pml-gold);
    font-size: 2.2rem;
    border-bottom: 1px solid var(--pml-line);
    overflow: hidden;
}

/* La photo est dans un <picture>, élément inline sans hauteur propre : un simple
   width/height:100% sur l'<img> ne se résout pas de façon fiable dans ce contexte
   (le flex-item picture ne "stretch" pas puisque align-items est en "center"), ce qui
   laissait apparaître le fond dégradé de la tuile en haut/bas des photos plus larges
   que 4/3 (Location de Matériel, Coordination, Wedding Planner...). Le positionnement
   absolu force la photo à occuper toute la tuile, bord à bord, quel que soit son ratio. */
.graphic-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Recadrages ciblés : quelques photos très panoramiques ou en portrait serré
   laissent trop de vide (ciel, route) ou coupent le sujet une fois recadrées
   en 4/3 par défaut (centrage). On zoome/décale sur le sujet au cas par cas. */
.graphic-tile img[src$="location-camry.jpeg"] {
    transform: scale(1.6);
    transform-origin: 50% 58%;
}
.graphic-tile img[src$="hero-visa.jpeg"] {
    object-position: center 75%;
}
.graphic-tile img[src$="img9.jpeg"],
.graphic-tile img[src$="img10.jpeg"] {
    object-position: center 20%;
}
.graphic-tile img[src$="hero-import-export.jpeg"] {
    transform: scale(1.1);
    transform-origin: 52% 58%;
}
.graphic-tile:not([style]) img[src$="about.jpeg"],
.graphic-tile:not([style]) img[src$="img2.jpeg"] {
    transform: scale(1.1);
    transform-origin: 50% 55%;
}
.graphic-tile:not([style]) img[src$="img1.jpeg"] {
    transform: scale(1.1);
    transform-origin: 50% 50%;
}
.graphic-tile[style*="21/9"] img[src$="img1.jpeg"] {
    object-position: center 30%;
}

/* ============== FORMULAIRE DE CONTACT ============== */
.pml-contact-form input,
.pml-contact-form select,
.pml-contact-form textarea {
    background: var(--pml-card);
    border: 1px solid var(--pml-gold);
    border-radius: var(--radius-sm);
    color: var(--pml-ivory);
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.pml-contact-form input::placeholder,
.pml-contact-form textarea::placeholder { color: var(--pml-smoke); }

/* Chevron du <select> remplacé par un chevron mauve via la variable interne
   de Bootstrap 5.3 plutôt que par une image de fond entière. Hex en dur (une
   data-URI ne peut pas référencer var()) — à resynchroniser si --pml-gold
   change de valeur. */
.pml-contact-form select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23965F73' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}

.pml-contact-form select option { background: var(--pml-card); color: var(--pml-ivory); }

/* Sans règle de focus dédiée, ces champs retombaient sur l'anneau bleu par
   défaut de Bootstrap, en rupture avec la palette aubergine/or. */
.pml-contact-form input:focus,
.pml-contact-form select:focus,
.pml-contact-form textarea:focus {
    border-color: var(--pml-gold-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pml-gold) 22%, transparent);
    outline: none;
}

.pml-contact-form button { margin-top: var(--space-4); }

/* ============== FOOTER ============== */
footer {
    background: var(--pml-ink-soft);
    border-top: 1px solid var(--pml-line);
    /* Respire symétriquement avec le pt-5 posé sur le footer, au lieu de
       coller le dernier bloc au bord de la fenêtre. */
    padding-bottom: 3rem;
}

/* Accent doré répété sur les titres/icônes/liens sociaux du footer :
   factorisé depuis les style="color: var(--pml-gold);" identiques qui se
   répétaient en inline. */
.footer-accent-color {
    color: var(--pml-gold);
}

/* Titres de colonne du footer (Solutions / Studio / Nous contacter) */
.footer-heading {
    color: var(--pml-gold);
    font-size: 0.95rem;
}

/* Icônes de la colonne "Nous contacter" : couleur dorée + léger décalage
   vertical pour s'aligner avec la première ligne du texte à côté. */
.footer-contact-icon {
    color: var(--pml-gold);
    margin-top: 0.15em;
}

/* Sous xl, le bouton WhatsApp flottant (.whatsapp-float, d-xl-none) est fixé
   en bas à droite de l'écran et peut recouvrir le lien "Mentions légales" du
   bas de footer une fois la page défilée jusqu'en bas : on réserve encore
   plus de place pour qu'il flotte au-dessus du contenu au lieu de le masquer. */
@media (max-width: 1199.98px) {
    footer { padding-bottom: 6rem; }
}

/* ============== WHATSAPP — bouton flottant mobile ============== */
/* Vert officiel WhatsApp conservé tel quel (pas de teinte aubergine/or) :
   c'est un repère de canal reconnaissable, pas un élément de marque PML. */
.whatsapp-float {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 1040;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 1.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.whatsapp-float:hover,
.whatsapp-float:focus {
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
}

/* ============== BACK TO TOP — bouton flottant retour en haut ============== */
/* Toujours en bas à droite. Sous xl, le bouton WhatsApp flottant occupe déjà
   ce coin (cf. .whatsapp-float) : on remonte celui-ci d'une largeur de bouton
   pour les empiler sans chevauchement. */
.back-to-top {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 1035;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--pml-gold);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                visibility var(--duration-base) var(--ease-out);
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus {
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
}
@media (max-width: 1199.98px) {
    .back-to-top { bottom: calc(var(--space-4) + 56px + 0.75rem); }
}

/* ============== MENTIONS LÉGALES ============== */
/* Miroir du traitement MLGS (style.css) : repère visuel pour les champs
   juridiques (RCCM, hébergeur...) que l'entreprise doit compléter avec ses
   informations réelles avant mise en ligne définitive. */
.legal-placeholder {
    background: var(--pml-ink);
    border: 1px dashed var(--pml-line);
    border-radius: var(--radius-sm, 6px);
    padding: 2px 8px;
    color: var(--pml-smoke);
    font-style: italic;
    font-size: 0.95em;
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}