/* =========================================================================
   SAMATA-CI — Couche de marque
   -------------------------------------------------------------------------
   Chargée APRÈS bootstrap.min.css et style.css : ce fichier contient tout ce
   qui appartient à l'identité SAMATA-CI. Le gabarit d'origine reste intact.

   Palette, relevée directement dans le logo
     Vert            #0DCF45   toit central — couleur dominante
     Bleu marine     #051937   confiance, fonds sombres, texte de titre
     Bleu clair      #4896E0   toit de gauche — accent secondaire
     Rouge           #C00404   toit de droite — alerte, à doser
     Gris route      #888485   voirie, séparateurs
     Jaune           #F3C829   ligne médiane — signalétique, à doser
   ========================================================================= */

:root {
    /* Fonds sombres et titres. */
    --sam-navy: #051937;
    --sam-navy-soft: #0A2A4E;

    /* Accent dominant. --sam-bronze / --sam-bronze-dark conservent leur nom
       pour rester alignés sur les règles héritées du gabarit ; ils portent
       désormais le vert de la marque. */
    --sam-bronze: #0DCF45;
    --sam-bronze-dark: #0BA838;

    /* Couleurs secondaires du logo, réservées aux accents ponctuels. */
    --sam-bleu: #4896E0;
    --sam-rouge: #C00404;
    --sam-jaune: #F3C829;

    /* Vert assombri à 63 %, réservé au TEXTE et aux icônes sur fond clair.
       Le vert de marque n'y atteint que 2,09:1, très en dessous du seuil AA
       de 4,5:1 ; celui-ci tient 4,95:1 sur blanc et 4,61:1 sur #F4F7FC.
       Sur fond sombre c'est l'inverse : le vert de marque y monte à 8,35:1
       et reste donc la couleur des blocs marine. */
    --sam-vert-texte: #08822B;

    --sam-anthracite: #393E46;
    --sam-gris-route: #888485;
    --sam-light: #F4F7FC;
    --sam-border: rgba(5, 25, 55, .12);
}

/* ---------------------------------------------------------------- Base -- */
body {
    color: var(--sam-anthracite);
}

::selection {
    background: var(--sam-bronze);
    color: var(--sam-navy);
}

/* Accessibilité : lien d'évitement révélé au clavier. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 14px 24px;
    background: var(--sam-navy);
    color: #fff;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* Cible de focus visible et contrastée sur toute la page. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--sam-bronze);
    outline-offset: 2px;
    box-shadow: none;
}

/* ------------------------------------------------- Vert et lisibilité -- */
/* Le vert de marque sert de FOND (boutons, pastilles) et de couleur sur les
   blocs sombres. Dès qu'il devient texte ou icône sur fond clair, il passe
   au vert assombri, sans quoi le contraste tombe à 2,09:1. */
.text-primary,
.section-eyebrow,
.value-flow-index,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
    color: var(--sam-vert-texte) !important;
}

/* Le gris atténué de Bootstrap (#6C757D) passe sur blanc (4,69:1) mais échoue
   dès qu'on le pose sur les fonds de section clairs : 4,26:1 sur #F4F4F4.
   Trois pour cent plus sombre suffit à le rendre conforme partout. */
.text-muted {
    color: #697179 !important;
}

.bg-dark .text-muted,
.footer .text-muted,
.page-hero .text-muted {
    color: rgba(255, 255, 255, .72) !important;
}

/* Sur fond marine, le vert de marque reprend la main : 8,35:1. */
.bg-dark .text-primary,
.bg-dark .section-eyebrow,
.footer .text-primary,
.footer .section-eyebrow,
.page-hero .text-primary,
.page-hero .section-eyebrow,
.owl-carousel-inner .text-primary,
.owl-carousel-inner .section-eyebrow,
.cta-band .text-primary,
.cta-band .section-eyebrow {
    color: var(--sam-bronze) !important;
}

/* Filet de sécurité : si jQuery ne se charge pas (CDN injoignable, réseau
   filtré), le voile de chargement s'efface malgré tout au bout de 6 secondes
   au lieu de masquer le site indéfiniment. */
#spinner.show {
    animation: sam-spinner-failsafe 1ms linear 6s forwards;
}

@keyframes sam-spinner-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Le vert de la marque est une couleur claire : le texte des boutons passe en
   bleu marine pour conserver un ratio de contraste conforme AA. Du blanc sur
   ce vert tomberait à 2,1:1, très en dessous du seuil de 4,5:1. */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-outline-primary:hover {
    color: var(--sam-navy);
}

.btn.btn-primary:hover {
    background-color: var(--sam-bronze-dark);
    border-color: var(--sam-bronze-dark);
}

.btn-outline-light:hover {
    color: var(--sam-navy);
}

.bg-dark {
    background-color: var(--sam-navy) !important;
}

/* Les classes .display-* doivent porter la police de titre même lorsqu'elles
   sont appliquées à autre chose qu'un <h1>–<h6> — cas des slides 2 et 3 de la
   bannière, en <p> pour ne conserver qu'un seul <h1> par page (SEO). */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    line-height: 1.2;
}

/* Surtitre de section, en vert de marque. */
.section-eyebrow {
    font-family: 'Anton', sans-serif;
    letter-spacing: .18em;
    font-size: .8rem;
}

/* --------------------------------------------------------- Barre haute -- */
.topbar small {
    font-size: .8125rem;
}

.topbar a:hover {
    color: var(--sam-bronze) !important;
}

/* ---------------------------------------------------------- Navigation -- */
.navbar {
    box-shadow: 0 2px 24px rgba(5, 25, 55, .07);
}

.navbar .navbar-brand {
    padding-top: 8px;
    padding-bottom: 8px;
}

.navbar-logo {
    width: auto;
    height: 58px;
    max-width: 100%;
}

.navbar .navbar-cta {
    height: 75px;
}

.navbar .navbar-nav .nav-link {
    font-size: .95rem;
    letter-spacing: .03em;
}

.navbar .dropdown-item {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: .875rem;
    padding: 10px 20px;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item.active {
    background: var(--sam-navy);
    color: #fff;
}

@media (max-width: 991.98px) {
    .navbar-logo {
        height: 48px;
    }
}

/* ------------------------------------------------------ Bannière vidéo -- */
.hero-video {
    min-height: 620px;
    overflow: hidden;
}

.hero-video-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-video .owl-carousel-inner {
    background: linear-gradient(90deg, rgba(5, 25, 55, .85) 0%, rgba(5, 25, 55, .35) 70%);
}

/* Assombrissement du carrousel pour garantir la lisibilité du texte blanc. */
.owl-carousel-inner {
    background: linear-gradient(90deg, rgba(5, 25, 55, .82) 0%, rgba(5, 25, 55, .30) 75%);
}

.header-carousel .display-1 {
    font-size: clamp(2.25rem, 5vw, 5rem);
    line-height: 1.05;
}

/* Le gabarit d'origine impose « font-size: 16px !important » à tous les <p>
   du carrousel sous 768 px. Les titres des slides 2 et 3, en <p> pour ne
   garder qu'un seul <h1> par page, doivent échapper à cette règle. */
.header-carousel .owl-carousel-item p.display-1 {
    font-size: clamp(2.25rem, 5vw, 5rem) !important;
    line-height: 1.05;
}

.owl-carousel .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.owl-carousel .owl-dot span {
    display: block;
    width: 30px;
    height: 4px;
    background: rgba(255, 255, 255, .45);
    transition: .3s;
}

.owl-carousel .owl-dot.active span {
    background: var(--sam-bronze);
    width: 52px;
}

/* -------------------------------------------------- Bannière de page --- */
.page-hero {
    min-height: 380px;
    display: flex;
    align-items: center;
    background: var(--sam-navy);
}

.page-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .35;
}

.page-hero-overlay {
    position: relative;
    width: 100%;
    padding: 90px 0;
    background: linear-gradient(90deg, rgba(5, 25, 55, .92) 0%, rgba(5, 25, 55, .55) 100%);
}

.page-hero .display-3 {
    font-size: clamp(1.9rem, 4vw, 3.6rem);
    line-height: 1.08;
}

.page-hero-eyebrow {
    font-family: 'Anton', sans-serif;
    letter-spacing: .2em;
    font-size: .8rem;
}

.page-hero .breadcrumb {
    font-size: .875rem;
}

.page-hero .breadcrumb-item a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.page-hero .breadcrumb-item a:hover {
    color: var(--sam-bronze);
}

.page-hero .breadcrumb-item.active {
    color: var(--sam-bronze);
}

.page-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .45);
}

/* ------------------------------------------------------- Chiffres clés -- */
.kpi-value {
    font-family: 'Anton', sans-serif;
    color: var(--sam-navy);
    line-height: 1;
}

/* --------------------------------------- Enchaînement de la chaîne ----- */
.value-flow {
    gap: 10px 14px;
}

.value-flow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--sam-border);
}

.value-flow-index {
    font-family: 'Anton', sans-serif;
    color: var(--sam-bronze);
    font-size: .85rem;
}

.value-flow-label {
    font-family: 'Anton', sans-serif;
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--sam-navy);
}

.value-flow-arrow {
    /* Chevron posé sur un fond clair : vert assombri, sinon 1,90:1. */
    color: var(--sam-vert-texte);
    font-size: .7rem;
}

/* -------------------------------------------------------------- Cartes -- */
.pillar-card,
.division-item,
.shipment-fact,
.quote-block {
    border-left: 3px solid var(--sam-bronze);
    box-shadow: 0 0 45px rgba(5, 25, 55, .06);
}

.service-item {
    background: #fff;
    transition: transform .4s, box-shadow .4s;
}

.service-item:hover,
.portfolio-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 50px rgba(5, 25, 55, .14);
}

.portfolio-inner {
    background: #fff;
    transition: transform .4s, box-shadow .4s;
}

.portfolio-cat {
    background: var(--sam-bronze);
}

.portfolio-cat .h5 {
    color: var(--sam-navy);
}

/* ------------------------------------ Schéma interactif chaîne de valeur */
.chain-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    margin-bottom: 0;
}

.chain-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 12px;
    border: 0;
    border-bottom: 4px solid var(--sam-border);
    background: var(--sam-light);
    color: var(--sam-navy);
    text-align: center;
    transition: .35s;
}

.chain-tab:hover {
    background: #fff;
    border-bottom-color: var(--sam-bronze);
}

.chain-tab.active {
    background: var(--sam-navy);
    color: #fff;
    border-bottom-color: var(--sam-bronze);
}

.chain-tab-step {
    font-family: 'Anton', sans-serif;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--sam-bronze);
}

.chain-tab-icon {
    font-size: 1.1rem;
    color: var(--sam-bronze);
}

.chain-tab-label {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .04em;
    line-height: 1.25;
}

.chain-panels {
    background: var(--sam-light);
    box-shadow: 0 0 45px rgba(5, 25, 55, .08);
}

.chain-panel-image {
    object-fit: cover;
    min-height: 320px;
}

@media (max-width: 991.98px) {
    .chain-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .chain-panel-image {
        min-height: 240px;
    }
}

@media (max-width: 575.98px) {
    .chain-nav {
        grid-template-columns: 1fr;
    }

    .chain-tab {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 14px 18px;
    }
}

/* ----------------------------------------------------------- Chronologie */
.chain-timeline {
    position: relative;
    padding-left: 0;
}

.chain-timeline-item {
    position: relative;
    display: flex;
    gap: 24px;
    padding-bottom: 36px;
}

.chain-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 56px;
    bottom: 0;
    width: 2px;
    background: var(--sam-border);
}

.chain-timeline-marker {
    flex: 0 0 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sam-navy);
    color: var(--sam-bronze);
    font-family: 'Anton', sans-serif;
    font-size: 1.15rem;
}

/* ------------------------------------------------- Blocs hérités du gabarit */
.shipment-track {
    position: relative;
}

.shipment-step {
    position: relative;
    display: flex;
    gap: 22px;
    padding-bottom: 30px;
}

.shipment-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 50px;
    bottom: 0;
    width: 2px;
    background: var(--sam-border);
}

.shipment-step-marker {
    flex: 0 0 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sam-border);
    background: #fff;
    color: var(--sam-anthracite);
    font-family: 'Anton', sans-serif;
}

.shipment-step--termine .shipment-step-marker {
    background: var(--sam-navy);
    border-color: var(--sam-navy);
    color: var(--sam-bronze);
}

.shipment-step--en-cours .shipment-step-marker {
    background: var(--sam-bronze);
    border-color: var(--sam-bronze);
    color: var(--sam-navy);
}

.shipment-step-badge {
    font-family: 'Anton', sans-serif;
    font-size: .68rem;
    letter-spacing: .08em;
    padding: 3px 10px;
    background: var(--sam-light);
    color: var(--sam-anthracite);
}

.shipment-step--termine .shipment-step-badge {
    background: var(--sam-navy);
    color: #fff;
}

.shipment-step--en-cours .shipment-step-badge {
    background: var(--sam-bronze);
    color: var(--sam-navy);
}

.shipment-step--a-venir .shipment-step-body {
    opacity: .65;
}

/* ------------------------------------------------------------- Bandeau -- */
.cta-band {
    background:
        linear-gradient(90deg, rgba(5, 25, 55, .96) 0%, rgba(5, 25, 55, .82) 100%),
        var(--sam-navy);
    border-top: 4px solid var(--sam-bronze);
}

/* -------------------------------------------------------- Formulaires -- */
.form-floating > label {
    /* Même correction que .text-muted : le gris Bootstrap échoue sur les
       fonds de section clairs, où sont posés la plupart des formulaires. */
    color: #697179;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sam-bronze);
    box-shadow: 0 0 0 .2rem rgba(13, 207, 69, .35);
}

/* Référence de dossier affichée après l'envoi du formulaire. */
.contact-reference {
    padding: 12px 18px;
    background: var(--sam-navy);
    border-left: 3px solid var(--sam-bronze);
    color: #fff;
}

.contact-reference span {
    color: var(--sam-bronze);
    font-family: 'Anton', sans-serif;
    letter-spacing: .12em;
}

.contact-reference strong {
    font-family: 'Anton', sans-serif;
    font-size: 1.15rem;
    letter-spacing: .05em;
}

/* Champ leurre : invisible à l'écran et pour les lecteurs d'écran. */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* -------------------------------------------------- Pages juridiques --- */
.legal-content h2 {
    color: var(--sam-navy);
}

.legal-content p,
.legal-content li {
    line-height: 1.75;
}

.legal-content ul {
    padding-left: 1.25rem;
}

.legal-content li {
    margin-bottom: .5rem;
}

/* ---------------------------------------------------------- Pied de page */
.footer-logo {
    width: auto;
    height: 96px;
    max-width: 100%;
}

.footer .footer-note {
    letter-spacing: .06em;
}

/* Bouton WhatsApp : vert officiel de la marque, conservé tel quel car c'est
   un repère visuel immédiatement identifiable par les visiteurs. */
.btn-whatsapp {
    background-color: #25D366;
    border-color: #25D366;
    color: #051937;
    line-height: 1.3;
    transition: .3s;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background-color: #1EBE5A;
    border-color: #1EBE5A;
    color: #051937;
}

.btn-whatsapp i {
    font-size: 1.15rem;
    vertical-align: -2px;
}

/* --------------------------------------- Sélecteur de langue (footer) --- */
.footer-translate {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-translate-label {
    display: block;
    margin-bottom: 10px;
    font-family: 'Anton', sans-serif;
    font-size: .78rem;
    letter-spacing: .08em;
    color: var(--sam-bronze);
}

/* Le commutateur injecté par GTranslate est présenté comme un champ de
   formulaire, pour qu'il ne passe pas pour un lien perdu dans le pied de page. */
.footer-translate .gt_switcher-popup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: .875rem;
    text-decoration: none;
    transition: .3s;
}

.footer-translate .gt_switcher-popup:hover,
.footer-translate .gt_switcher-popup:focus {
    border-color: var(--sam-bronze);
    background: rgba(13, 207, 69, .12);
    color: var(--sam-bronze);
}

.footer-translate .gt_switcher-popup img {
    display: inline-block;
    vertical-align: middle;
}

/* GTranslate impose « color:#666 » en style en ligne sur son chevron, ce qui
   donne 3,05:1 sur le marine du pied de page. Un style en ligne ne se bat
   qu'avec !important : c'est l'un des rares cas où il est justifié. */
.footer-translate .gt_switcher-popup span {
    color: rgba(255, 255, 255, .85) !important;
}

/* ------------------------------------------------- WhatsApp flottant --- */
/* Pastille fixe présente sur tous les écrans (voir partials/whatsapp-float).
   Sur ordinateur, elle se déploie au survol pour révéler son libellé. */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 98;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background-color: #25D366;
    color: #051937;
    font-size: 30px;
    text-decoration: none;
    box-shadow: 0 6px 22px rgba(5, 25, 55, .35);
    transition: background-color .3s, transform .3s;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
    background-color: #1EBE5A;
    color: #051937;
}

/* Libellé affiché en permanence sur ordinateur (masqué en mobile via d-none). */
.whatsapp-float-label {
    margin-left: 10px;
    font-family: 'Anton', sans-serif;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .whatsapp-float {
        width: auto;
        min-width: 56px;
        padding: 0 22px 0 18px;
    }
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    transform: translateY(-2px);
}

/* Le bouton « retour en haut » se place au-dessus de la pastille.
   Sélecteur volontairement plus spécifique que celui du gabarit d'origine
   (.back-to-top dans style.css), afin de l'emporter sans !important. */
.btn.back-to-top {
    right: 20px;
    bottom: 92px;
}

.footer address {
    font-style: normal;
}

.footer a:hover {
    color: var(--sam-bronze);
}

/* ------------------------------------------------------------ Confort -- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .topbar,
    .navbar,
    .cta-band,
    .back-to-top,
    .footer .btn,
    #spinner {
        display: none !important;
    }

    body {
        color: #000;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .8em;
    }
}

/* =========================================================================
   SAMATA-CI — Composants propres au site
   -------------------------------------------------------------------------
   Le site est conçu pour être complet SANS photographie : chaque bloc qui
   attend une image possède un traitement graphique de repli, bâti sur la
   palette et l'emblème. Dès qu'une photo est déposée dans img/photos/, elle
   prend sa place automatiquement (voir la fonction photo() dans helpers.php).
   ========================================================================= */

/* ------------------------------------------------ Bannière d'accueil ---- */
.hero-home-media {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--sam-navy);
}

.hero-home-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Repli sans photo : dégradé de marque et emblème en filigrane. */
.hero-home-graphic .hero-home-media {
    background:
        radial-gradient(120% 90% at 82% 18%, rgba(13, 207, 69, .22) 0%, rgba(13, 207, 69, 0) 58%),
        linear-gradient(135deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
}

.hero-home-emblem {
    position: absolute;
    right: -4%;
    bottom: -12%;
    width: min(56%, 720px);
    opacity: .12;
    pointer-events: none;
}

.hero-home-overlay {
    position: relative;
    width: 100%;
    background: linear-gradient(90deg, rgba(5, 25, 55, .88) 0%, rgba(5, 25, 55, .34) 78%);
}

.hero-home .display-1 {
    font-size: clamp(2.1rem, 5vw, 4.6rem);
    line-height: 1.06;
}

.hero-home-lead {
    max-width: 62ch;
}

.hero-home-badge {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    font-size: .9375rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
}

/* ------------------------------- Bannière de page, version graphique ---- */
.page-hero-graphic {
    background:
        radial-gradient(110% 120% at 88% 12%, rgba(13, 207, 69, .20) 0%, rgba(13, 207, 69, 0) 60%),
        linear-gradient(135deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
    overflow: hidden;
}

.page-hero-emblem {
    position: absolute;
    right: -2%;
    bottom: -34%;
    width: min(34%, 420px);
    opacity: .13;
    pointer-events: none;
}

/* --------------------------------------- Panneau chiffré (sans photo) --- */
.figure-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 40px;
    background:
        radial-gradient(90% 80% at 20% 15%, rgba(13, 207, 69, .18) 0%, rgba(13, 207, 69, 0) 62%),
        linear-gradient(160deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
    color: #fff;
}

.figure-panel-alt {
    background:
        radial-gradient(90% 80% at 80% 85%, rgba(72, 150, 224, .22) 0%, rgba(72, 150, 224, 0) 62%),
        linear-gradient(160deg, var(--sam-navy-soft) 0%, var(--sam-navy) 100%);
}

.figure-panel-value {
    font-family: 'Anton', sans-serif;
    font-size: clamp(4rem, 9vw, 7rem);
    line-height: 1;
    color: var(--sam-bronze);
}

.figure-panel-label {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 1rem;
    margin-top: 14px;
    color: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------- Cartes « métier » -- */
.service-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sam-border);
    transition: transform .3s ease, box-shadow .3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 46px rgba(5, 25, 55, .12);
}

.service-card-photo {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* Repli sans photo : aplat de marque portant l'icône et le numéro. */
.service-card-mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background:
        radial-gradient(80% 90% at 30% 20%, rgba(13, 207, 69, .22) 0%, rgba(13, 207, 69, 0) 65%),
        linear-gradient(150deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
    color: var(--sam-bronze);
    font-size: 3.25rem;
}

.service-card-number {
    position: absolute;
    right: 22px;
    bottom: 8px;
    font-family: 'Anton', sans-serif;
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(255, 255, 255, .12);
}

/* -------------------------------------------------- Cartes « étape » ---- */
.step-card {
    position: relative;
    padding: 40px 30px 32px;
    background: #fff;
    border: 1px solid var(--sam-border);
    border-top: 3px solid var(--sam-bronze);
}

.step-card-number {
    position: absolute;
    top: 14px;
    right: 22px;
    font-family: 'Anton', sans-serif;
    font-size: 3.25rem;
    line-height: 1;
    color: rgba(5, 25, 55, .07);
}

.step-card-icon {
    font-size: 1.9rem;
    color: var(--sam-vert-texte);
}

/* --------------------------------------------------- Cartes « zone » ---- */
.zone-card {
    padding: 26px 20px;
    text-align: center;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: border-color .3s ease, background .3s ease;
}

.zone-card:hover {
    background: rgba(255, 255, 255, .10);
    border-color: var(--sam-bronze);
}

.zone-card-pin {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--sam-bronze);
}

.zone-card-main {
    background: rgba(13, 207, 69, .14);
    border-color: var(--sam-bronze);
}

.zone-card p {
    color: rgba(255, 255, 255, .78);
}

/* --------------------------------------------- Cartes « application » -- */
.app-card {
    display: block;
    height: 100%;
    padding: 34px 30px;
    background: #fff;
    border: 1px solid var(--sam-border);
    border-left: 3px solid var(--sam-bronze);
    color: inherit;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.app-card:hover,
.app-card:focus {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(5, 25, 55, .12);
    color: inherit;
}

.app-card-icon {
    font-size: 1.75rem;
    color: var(--sam-vert-texte);
    margin-bottom: 16px;
    display: block;
}

/* ----------------------------------------------------------------- FAQ -- */
.faq-item {
    border: 1px solid var(--sam-border);
    margin-bottom: 14px;
    background: #fff;
}

.faq-item summary {
    padding: 20px 56px 20px 24px;
    position: relative;
    cursor: pointer;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .02em;
    list-style: none;
}

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

.faq-item summary::after {
    content: "\f067";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
    color: var(--sam-vert-texte);
}

.faq-item[open] summary::after {
    content: "\f068";
}

.faq-item .faq-answer {
    padding: 0 24px 22px;
    margin: 0;
}

/* -------------------------------------------------- Fiche de contact --- */
.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--sam-border);
    color: inherit;
    text-decoration: none;
    height: 100%;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.contact-card:hover,
.contact-card:focus {
    border-color: var(--sam-bronze);
    box-shadow: 0 14px 34px rgba(5, 25, 55, .10);
    color: inherit;
}

.contact-card-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sam-navy);
    color: var(--sam-bronze);
}

/* ------------------------------------------------------------- Mobile -- */
@media (max-width: 991.98px) {
    .hero-home-media {
        min-height: 520px;
    }

    .hero-home-overlay {
        background: linear-gradient(180deg, rgba(5, 25, 55, .82) 0%, rgba(5, 25, 55, .92) 100%);
    }

    .hero-home-emblem {
        width: 88%;
        right: -18%;
        bottom: -18%;
    }

    .figure-panel {
        padding: 40px 28px;
    }
}

/* =========================================================================
   Correctifs de lisibilité relevés à l'audit de contraste
   ========================================================================= */

/* --- 1. Liens du contenu -------------------------------------------------
   Bootstrap colore tous les <a> avec le vert de marque, qui ne tient que
   2,09:1 sur blanc. Les liens courants passent donc au vert assombri ; sur
   fond sombre, le vert de marque reprend la main (8,35:1). */
a {
    color: var(--sam-vert-texte);
}

a:hover,
a:focus {
    color: var(--sam-navy);
}

/* Les boutons sont exclus : ils portent déjà leurs propres couleurs, et les
   recolorer ici rendait invisible le texte de .btn-outline-light posé sur le
   bandeau vert. */
.bg-dark a:not(.btn),
.footer a:not(.btn),
.topbar a:not(.btn),
.cta-band a:not(.btn),
.page-hero a:not(.btn),
.hero-home-overlay a:not(.btn),
.figure-panel a:not(.btn),
.alert a:not(.btn) {
    color: var(--sam-bronze);
}

.bg-dark a:not(.btn):hover,
.footer a:not(.btn):hover,
.topbar a:not(.btn):hover,
.cta-band a:not(.btn):hover,
.page-hero a:not(.btn):hover,
.hero-home-overlay a:not(.btn):hover {
    color: #fff;
}

/* --- 2. Cartes « zone » --------------------------------------------------
   Elles vivent sur le fond marine : sans cette règle, le titre hérite du
   bleu marine des <h3> et devient invisible (ratio 1,00). */
.zone-card h3,
.zone-card .h5 {
    color: #fff;
}

/* --- 3. Sélecteur de langue GTranslate -----------------------------------
   Le widget ouvre sa liste dans son propre panneau blanc, injecté hors de
   notre pied de page. Ses liens y héritaient du vert de marque : 2,09:1. */
.gt_white_content .gt_languages a.glink,
.gt_white_content .gt_languages a.glink span {
    color: var(--sam-navy) !important;
}

.gt_white_content .gt_languages a.glink:hover,
.gt_white_content .gt_languages a.glink:hover span {
    color: var(--sam-vert-texte) !important;
}

/* =========================================================================
   SAMATA-CI — Terrains, activités, personnel et direction
   -------------------------------------------------------------------------
   RÉPARTITION DES COULEURS DU LOGO
   Le logo porte trois toits : bleu à gauche, vert au centre, rouge à droite.
   Les trois métiers reprennent cette logique, ce qui fait entrer le bleu et
   le rouge sans décoration gratuite :

     Lotissement               vert    #0DCF45   (toit central, dominant)
     Aménagement foncier       bleu    #4896E0   (toit de gauche)
     Sécurisation de parcelles rouge   #C00404   (toit de droite)

   Le jaune #F3C829 — la ligne médiane de la route — sert de quatrième accent
   sur la frise des étapes et le métier des conducteurs d'engins.

   RÈGLE DE LISIBILITÉ, mesurée : ces couleurs vives ne passent pas en texte
   sur fond clair. Chacune a sa variante assombrie, conforme AA sur blanc et
   sur #F4F7FC. Le rouge fait exception : il est déjà à 6,44:1.
   ========================================================================= */

:root {
    --sam-bleu-texte: #3875AF;   /* 4,85:1 sur blanc — 4,51:1 sur #F4F7FC */
    --sam-jaune-texte: #866E17;  /* 4,93:1 sur blanc — 4,59:1 sur #F4F7FC */
    /* --sam-rouge #C00404 tient déjà 6,44:1 : pas de variante nécessaire. */
}

/* ------------------------------------------- Accents par métier / étape -- */
.service-vert  { border-top: 3px solid var(--sam-bronze); }
.service-bleu  { border-top: 3px solid var(--sam-bleu); }
.service-rouge { border-top: 3px solid var(--sam-rouge); }

.service-vert  .service-card-mark { color: var(--sam-bronze); }
.service-bleu  .service-card-mark { color: var(--sam-bleu); }
.service-rouge .service-card-mark { color: #E8756F; }

.service-vert  .service-puce { color: var(--sam-vert-texte); }
.service-bleu  .service-puce { color: var(--sam-bleu-texte); }
.service-rouge .service-puce { color: var(--sam-rouge); }

.step-card-vert  { border-top-color: var(--sam-bronze); }
.step-card-bleu  { border-top-color: var(--sam-bleu); }
.step-card-jaune { border-top-color: var(--sam-jaune); }
.step-card-rouge { border-top-color: var(--sam-rouge); }

.step-card-vert  .step-card-icon { color: var(--sam-vert-texte); }
.step-card-bleu  .step-card-icon { color: var(--sam-bleu-texte); }
.step-card-jaune .step-card-icon { color: var(--sam-jaune-texte); }
.step-card-rouge .step-card-icon { color: var(--sam-rouge); }

/* Pastilles des engagements : trois couleurs du logo, texte toujours lisible. */
.pastille-vert  { background: var(--sam-bronze); color: var(--sam-navy); }
.pastille-bleu  { background: var(--sam-bleu);   color: var(--sam-navy); }
.pastille-rouge { background: var(--sam-rouge);  color: #fff; }

.section-eyebrow-rouge {
    color: var(--sam-rouge) !important;
}

/* ------------------------------------------------- Bannière à diapositives */
.hero-slide {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--sam-navy);
}

.hero-slide-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Replis graphiques : une teinte différente par diapositive, prise dans le
   logo, pour que le défilement reste lisible même sans photographie. */
.hero-slide-graphic {
    background:
        radial-gradient(120% 90% at 82% 18%, rgba(13, 207, 69, .22) 0%, rgba(13, 207, 69, 0) 58%),
        linear-gradient(135deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
}

.hero-slide-graphic-1 {
    background:
        radial-gradient(120% 90% at 78% 22%, rgba(72, 150, 224, .26) 0%, rgba(72, 150, 224, 0) 58%),
        linear-gradient(135deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
}

.hero-slide-graphic-2 {
    background:
        radial-gradient(120% 90% at 82% 18%, rgba(13, 207, 69, .24) 0%, rgba(13, 207, 69, 0) 58%),
        linear-gradient(135deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
}

.hero-slide-graphic-3 {
    background:
        radial-gradient(120% 90% at 80% 20%, rgba(192, 4, 4, .30) 0%, rgba(192, 4, 4, 0) 58%),
        linear-gradient(135deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
}

.hero-slide-emblem {
    position: absolute;
    right: -4%;
    bottom: -12%;
    width: min(56%, 720px);
    opacity: .12;
    pointer-events: none;
}

.hero-slide-overlay {
    position: relative;
    width: 100%;
    background: linear-gradient(90deg, rgba(5, 25, 55, .88) 0%, rgba(5, 25, 55, .34) 78%);
}

.hero-slide .display-1 {
    font-size: clamp(2.1rem, 5vw, 4.6rem);
    line-height: 1.06;
}

.hero-slide-lead {
    max-width: 62ch;
}

.hero-slide-badge {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    font-size: .9375rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
}

.hero-slide-eyebrow {
    font-family: 'Anton', sans-serif;
    letter-spacing: .14em;
    font-size: .82rem;
    color: var(--sam-bronze);
}

/* Les puces du carrousel doivent flotter au-dessus des diapositives. */
.hero-carousel .owl-dots {
    z-index: 3;
}

/* ------------------------------------------------------ Cartes terrain -- */
.terrain-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sam-border);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.terrain-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 46px rgba(5, 25, 55, .14);
}

/* 16/9 plutôt que 16/10 : l'image reste lisible mais la carte perd une
   trentaine de pixels de haut. Sur une page qui affichera des dizaines de
   terrains, c'est le poste le plus coûteux en hauteur. */
.terrain-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.terrain-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.terrain-card-repli {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--sam-bronze);
    background:
        radial-gradient(80% 90% at 30% 20%, rgba(13, 207, 69, .22) 0%, rgba(13, 207, 69, 0) 65%),
        linear-gradient(150deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
}

.terrain-card-corps {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 18px;
}

/* Titre borné à deux lignes : sans cela, un intitulé long fait gonfler
   toute la rangée, puisque les cartes s'alignent sur la plus haute. Le
   titre complet reste lisible sur la fiche du terrain. */
.terrain-card-corps h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.05rem;
    line-height: 1.25;
}

.terrain-card-lieu {
    color: #697179;
    font-size: .875rem;
}

.terrain-card-faits {
    display: flex;
    gap: 20px;
    margin: 0 0 12px;
    padding: 10px 0;
    border-top: 1px solid var(--sam-border);
    border-bottom: 1px solid var(--sam-border);
}

.terrain-card-faits dt,
.fiche-terrain-faits dt {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #697179;
    margin-bottom: 2px;
}

.terrain-card-faits dd,
.fiche-terrain-faits dd {
    margin: 0;
    font-family: 'Anton', sans-serif;
    font-size: 1.05rem;
    color: var(--sam-navy);
}

.terrain-card-prix,
.fiche-terrain-prix {
    font-family: 'Anton', sans-serif;
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--sam-vert-texte);
}

.fiche-terrain-prix {
    font-size: 2.2rem;
}

.terrain-card-note,
.fiche-terrain-note {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #697179;
}

/* ------------------------------------------------------------ Pastilles -- */
.badge-flash,
.badge-flash-plein {
    display: inline-flex;
    align-items: center;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .74rem;
    padding: 6px 12px;
    background: var(--sam-rouge);
    color: #fff;                      /* 6,44:1 sur ce rouge */
}

.badge-flash {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.badge-statut {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 12px;
    background: rgba(255, 255, 255, .94);
}

.badge-statut-plein {
    display: inline-flex;
    align-items: center;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    padding: 7px 14px;
}

.statut-disponible { color: var(--sam-vert-texte); }
.statut-reserve    { color: var(--sam-jaune-texte); }
.statut-vendu      { color: #697179; }

.badge-statut-plein.statut-disponible { background: rgba(13, 207, 69, .14); }
.badge-statut-plein.statut-reserve    { background: rgba(243, 200, 41, .20); }
.badge-statut-plein.statut-vendu      { background: rgba(5, 25, 55, .08); }

/* --------------------------------------------- Exemples de démonstration -- */
.bandeau-exemple {
    padding: 16px 20px;
    background: rgba(243, 200, 41, .16);
    border-left: 4px solid var(--sam-jaune);
    color: var(--sam-navy);
}

.bandeau-exemple code {
    color: var(--sam-rouge);
    background: rgba(255, 255, 255, .6);
    padding: 1px 5px;
}

.etiquette-exemple {
    display: inline-block;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .68rem;
    padding: 3px 9px;
    margin-bottom: 10px;
    background: var(--sam-jaune);
    color: var(--sam-navy);           /* 10,91:1 */
}

/* ---------------------------------------------------- Fiche d'un terrain -- */
.fiche-terrain {
    position: sticky;
    top: 100px;
    padding: 32px 28px;
    background: #fff;
    border: 1px solid var(--sam-border);
    border-top: 3px solid var(--sam-bronze);
}

.fiche-terrain-faits > div {
    padding: 12px 0;
    border-bottom: 1px solid var(--sam-border);
}

.fiche-terrain-faits > div:last-child {
    border-bottom: 0;
}

/* ------------------------------------------------------------- Galerie --- */
.galerie-terrain {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.galerie-terrain-item {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.galerie-terrain-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.galerie-terrain-item:hover img {
    transform: scale(1.06);
}

/* La première image occupe toute la largeur : c'est la vue d'ensemble. */
.galerie-terrain-principale {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}

.galerie-terrain-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    aspect-ratio: 16 / 9;
    text-align: center;
    padding: 30px;
    color: rgba(255, 255, 255, .88);
    background:
        radial-gradient(80% 90% at 30% 20%, rgba(13, 207, 69, .20) 0%, rgba(13, 207, 69, 0) 65%),
        linear-gradient(150deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
}

.galerie-terrain-vide i {
    font-size: 2.6rem;
    color: var(--sam-bronze);
}

.galerie-terrain-vide code {
    color: var(--sam-jaune);
    background: rgba(255, 255, 255, .08);
    padding: 1px 5px;
}

/* ------------------------------------------------- Autres offres (mini) -- */
.terrain-mini {
    display: block;
    height: 100%;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--sam-border);
    color: inherit;
    text-decoration: none;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.terrain-mini:hover {
    border-color: var(--sam-bronze);
    box-shadow: 0 14px 34px rgba(5, 25, 55, .10);
    color: inherit;
}

.terrain-mini-prix {
    font-family: 'Anton', sans-serif;
    color: var(--sam-vert-texte);
}

/* ----------------------------------------------------- Cartes activité --- */
.activite-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sam-border);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.activite-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(5, 25, 55, .12);
}

.activite-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.activite-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activite-card-repli {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    color: var(--sam-jaune);
    background:
        radial-gradient(80% 90% at 70% 25%, rgba(72, 150, 224, .24) 0%, rgba(72, 150, 224, 0) 65%),
        linear-gradient(150deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
}

.activite-card-lieu {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 12px;
    background: rgba(5, 25, 55, .88);
    color: #fff;
}

/* ------------------------------------------------ Métiers du personnel -- */
.poste-card {
    padding: 28px 24px;
    height: 100%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-left: 3px solid var(--sam-bronze);
    color: #fff;
}

/* Les <h3> portent le bleu marine par défaut : sur ce fond sombre ils
   deviendraient invisibles (ratio 1,00). Même piège que les cartes de zone. */
.poste-card h3,
.poste-card .h5 {
    color: #fff;
}

.poste-card p {
    color: rgba(255, 255, 255, .78);
}

/* Variante posée sur un fond clair. */
.poste-card-clair {
    background: #fff;
    border: 1px solid var(--sam-border);
    border-left: 3px solid var(--sam-bronze);
    color: var(--sam-anthracite);
}

.poste-card-clair h3,
.poste-card-clair .h5 {
    color: var(--sam-navy);
}

.poste-card-clair p {
    color: var(--sam-anthracite);
}

.poste-vert  { border-left-color: var(--sam-bronze); }
.poste-bleu  { border-left-color: var(--sam-bleu); }
.poste-jaune { border-left-color: var(--sam-jaune); }
.poste-rouge { border-left-color: var(--sam-rouge); }

.poste-card-icon {
    font-size: 1.7rem;
    color: var(--sam-bronze);
}

.poste-bleu  .poste-card-icon { color: var(--sam-bleu); }
.poste-jaune .poste-card-icon { color: var(--sam-jaune); }
.poste-rouge .poste-card-icon { color: #E8756F; }

/* Sur fond clair, les icônes passent à leur variante lisible. */
.poste-card-clair .poste-card-icon        { color: var(--sam-vert-texte); }
.poste-card-clair.poste-bleu  .poste-card-icon { color: var(--sam-bleu-texte); }
.poste-card-clair.poste-jaune .poste-card-icon { color: var(--sam-jaune-texte); }
.poste-card-clair.poste-rouge .poste-card-icon { color: var(--sam-rouge); }

/* ------------------------------------------------ Mot de la direction --- */
.portrait-direction {
    width: 190px;
    height: 190px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--sam-bronze);
}

.portrait-direction-repli {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.4rem;
    color: var(--sam-bronze);
    background: rgba(255, 255, 255, .06);
}

.portrait-direction-nom {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
}

.portrait-direction-fonction {
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sam-bronze);
}

.citation-direction {
    position: relative;
    padding-left: 54px;
}

.citation-direction i {
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 2rem;
    color: var(--sam-bronze);
}

.citation-direction p {
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    line-height: 1.65;
    color: #fff;
}

/* ------------------------------------------------------------- Mobile --- */
@media (max-width: 991.98px) {
    .hero-slide {
        min-height: 540px;
    }

    .hero-slide-overlay {
        background: linear-gradient(180deg, rgba(5, 25, 55, .82) 0%, rgba(5, 25, 55, .93) 100%);
    }

    .hero-slide-emblem {
        width: 92%;
        right: -20%;
        bottom: -16%;
    }

    .fiche-terrain {
        position: static;
    }

    .galerie-terrain {
        grid-template-columns: repeat(2, 1fr);
    }

    .citation-direction {
        padding-left: 0;
        padding-top: 44px;
    }

    .citation-direction i {
        top: 0;
    }
}

/* Mention légale du pied de page : forme juridique, capital, RCCM, NCC. */
.footer .footer-mentions {
    padding-top: 22px;
    font-size: .8125rem;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .72);
}

/* Pastille du nom de lotissement, sur les diapositives d'activité.
   Reprend exactement l'aspect de l'étiquette « exemple » — jaune de la
   ligne médiane du logo, texte marine à 10,91:1. */
.etiquette-lotissement {
    display: inline-block;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .68rem;
    padding: 3px 9px;
    background: var(--sam-jaune);
    color: var(--sam-navy);
    vertical-align: middle;
}

/* =========================================================================
   Page détaillée d'une activité
   -------------------------------------------------------------------------
   Le visuel occupe toute la largeur : c'est ce que le visiteur vient voir.
   Sans mise en forme, la balise <video> s'affichait à sa taille native au
   milieu d'une colonne trop large — d'où le flottement.
   ========================================================================= */

.activite-scene {
    background:
        radial-gradient(90% 120% at 80% 0%, rgba(13, 207, 69, .12) 0%, rgba(13, 207, 69, 0) 55%),
        linear-gradient(160deg, var(--sam-navy) 0%, var(--sam-navy-soft) 100%);
}

.activite-video-cadre {
    margin: 0;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .12);
    overflow: hidden;
}

.activite-video {
    display: block;
    width: 100%;
    /* height:auto, et RIEN d'autre : le format d'origine décide seul.
       Toute contrainte de hauteur — même généreuse — finit par rogner la
       vidéo et poser des bandes noires sur les côtés, ce qui donne
       l'impression qu'elle flotte au milieu du bloc. Une vidéo verticale
       sera haute : c'est le cadrage du tournage qui le décide, pas la
       feuille de style. */
    height: auto;
    background: #000;
}

.activite-video-legende {
    padding: 12px 18px;
    font-size: .84rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    background: rgba(0, 0, 0, .55);
}

.activite-video-legende i {
    color: var(--sam-bronze);
}

/* La galerie posée sur le fond marine a besoin d'un léger contour pour ne
   pas se fondre dedans. */
.activite-scene .galerie-terrain-item {
    border: 1px solid rgba(255, 255, 255, .14);
}

/* ------------------------------------------------- Fiche de repères ----- */
.fiche-activite {
    position: sticky;
    top: 100px;
    padding: 28px 26px;
    background: #fff;
    border: 1px solid var(--sam-border);
    border-top: 3px solid var(--sam-bronze);
}

.fiche-activite h2 {
    color: var(--sam-navy);
}

@media (max-width: 991.98px) {
    .fiche-activite {
        position: static;
    }

    .activite-video {
        max-height: none;
    }
}

/* =========================================================================
   Recherche de terrains
   -------------------------------------------------------------------------
   Barre de filtres au-dessus de la liste. Elle fonctionne sans JavaScript
   — c'est un formulaire GET ordinaire — et se contente d'être accélérée
   quand le script est disponible.
   ========================================================================= */

.recherche-terrains {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px 18px;
    align-items: end;
    padding: 26px 28px;
    margin-bottom: 20px;
    background: var(--sam-light);
    border: 1px solid var(--sam-border);
    border-left: 3px solid var(--sam-bronze);
}

/* Le champ libre est celui que l'on utilise le plus : il prend deux colonnes
   dès que la place le permet. */
.recherche-champ-large {
    grid-column: span 2;
}

.recherche-champ label {
    display: block;
    margin-bottom: 6px;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
    color: var(--sam-navy);
}

.recherche-champ input,
.recherche-champ select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sam-border);
    border-radius: 0;
    background: #fff;
    font: inherit;
    font-size: .95rem;
    color: var(--sam-anthracite);
}

.recherche-champ input:focus,
.recherche-champ select:focus {
    outline: 3px solid var(--sam-bronze);
    outline-offset: 1px;
    border-color: var(--sam-bronze);
}

.recherche-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.recherche-actions .btn {
    white-space: nowrap;
}

.recherche-reinit {
    font-size: .88rem;
    white-space: nowrap;
}

/* --------------------------------------------------------------- Bilan -- */
.recherche-bilan {
    margin: 0 0 26px;
    font-size: .95rem;
    color: var(--sam-anthracite);
}

.recherche-bilan strong {
    font-family: 'Anton', sans-serif;
    font-size: 1.25rem;
    color: var(--sam-vert-texte);
    vertical-align: -1px;
}

.recherche-note {
    display: block;
    margin-top: 4px;
    font-size: .84rem;
    color: #697179;
}

/* ------------------------------------------------------ Fiches masquées -- */
/* Une seule classe pour les deux niveaux de filtrage — serveur et
   navigateur — de sorte qu'ils ne puissent jamais se contredire. */
.terrain-masque {
    display: none !important;
}

@media (max-width: 575.98px) {
    .recherche-terrains {
        grid-template-columns: 1fr;
        padding: 20px 18px;
    }

    .recherche-champ-large {
        grid-column: span 1;
    }

    .recherche-actions .btn {
        width: 100%;
    }
}

/* =========================================================================
   CARTE DES ZONES D'INTERVENTION
   -------------------------------------------------------------------------
   Le fond de carte est un aplat marine : le vert de marque y monte à 8,35:1,
   il sert donc de couleur de point et de trait. Dès qu'un texte repasse sur
   fond clair (fiches, puces), c'est --sam-vert-texte qui prend le relais.

   Les points sont des boutons HTML posés en pourcentage au-dessus du SVG :
   voir app/views/partials/carte-zones.php pour le pourquoi.
   ========================================================================= */

.carte-zones-plan {
    position: relative;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--sam-border);
}

.carte-zones-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------- Fond de carte */
.carte-zones-pays {
    stroke: var(--sam-bronze);
    stroke-width: 2;
    stroke-linejoin: round;
}

.carte-zones-mer path {
    fill: none;
    stroke: rgba(72, 150, 224, .35);
    stroke-width: 3;
    stroke-linecap: round;
}

.carte-zones-liens line {
    stroke: rgba(13, 207, 69, .45);
    stroke-width: 2;
    stroke-dasharray: 5 9;
    stroke-linecap: round;
}

.carte-zones-reperes text {
    fill: var(--sam-gris-route);
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: 3px;
}

.carte-zones-reperes .carte-zones-ocean {
    fill: var(--sam-bleu-texte);
}

.carte-zones-nord {
    fill: var(--sam-navy);
}

.carte-zones-nord-texte,
.carte-zones-echelle-texte {
    fill: var(--sam-anthracite);
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.carte-zones-echelle-texte {
    font-size: 21px;
    font-weight: 600;
}

.carte-zones-echelle {
    stroke: var(--sam-anthracite);
    stroke-width: 3;
}

/* ----------------------------------------------------------------- Points -- */
.carte-zones-points {
    position: absolute;
    inset: 10px;
}

.carte-zones-point {
    /* Écart entre le bord du bouton et le nom : 4 px de dégagement autour
       d'une pastille de 14 px logée dans un bouton de 30 px. */
    --carte-ecart: 4px;
    position: absolute;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: 0;
    transform: translate(-50%, -50%);
    cursor: pointer;
    /* Le point survolé passe au-dessus de ses voisins : au centre du pays,
       les zones de clic se recouvrent forcément. */
    z-index: 2;
}

.carte-zones-point:hover,
.carte-zones-point:focus-visible {
    z-index: 4;
}

.carte-zones-point:focus-visible {
    outline: 3px solid var(--sam-navy);
    outline-offset: 2px;
    border-radius: 50%;
}

.carte-zones-pastille {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--sam-bronze);
    box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(5, 25, 55, .45);
    transition: transform .25s ease, box-shadow .25s ease;
}

.carte-zones-point:hover .carte-zones-pastille,
.carte-zones-point[aria-current="true"] .carte-zones-pastille {
    transform: scale(1.35);
    box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(13, 207, 69, .45);
}

/* Le bureau principal : pastille plus large, halo permanent et battement
   lent — c'est le seul point qui bouge sur la carte. */
/* Le bureau passe au-dessus de ses voisins, mais sa zone de clic est resserrée
   à 24 px : sinon elle recouvrirait le centre de Kossou, à 25 km de là, qui
   deviendrait impossible à atteindre. Sa pastille, elle, reste la plus large.
   L'écart négatif sort le nom du bouton, pour qu'il ne se pose pas sur
   l'auréole. */
.carte-zones-point-bureau {
    --carte-ecart: -6px;
    width: 24px;
    height: 24px;
    z-index: 3;
}

.carte-zones-point-bureau .carte-zones-pastille {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    /* Halo volontairement contenu : Kossou n'est qu'à 25 km, son point
       toucherait celui du bureau si l'auréole était plus large. */
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(13, 207, 69, .40), 0 2px 6px rgba(5, 25, 55, .5);
}

.carte-zones-point-bureau::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid var(--sam-bronze);
    animation: carte-zones-battement 2.8s ease-out infinite;
}

@keyframes carte-zones-battement {
    0%   { transform: scale(1);   opacity: .75; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .carte-zones-point-bureau::before {
        animation: none;
        opacity: .5;
    }
}

/* --------------------------------------------------------------- Étiquettes
   --carte-ecart : distance entre le bord du bouton (30 px) et le nom. La
   pastille du bureau étant plus large, ce bouton écarte son nom davantage —
   une seule variable à changer, les huit placements suivent. */
.carte-zones-nom {
    position: absolute;
    top: 50%;
    left: calc(100% - var(--carte-ecart));
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 3px 7px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    /* Pastille marine derrière le nom. Sans elle, un nom proche de la
       frontière — Grand-Bassam, dont l'étiquette part vers l'est — s'écrirait
       en blanc sur le fond blanc de la page. Sur ce marine à 88 %, posé sur
       blanc comme sur la terre, le blanc tient au moins 10:1. */
    background: rgba(5, 25, 55, .88);
    border-radius: 3px;
}

.carte-zones-etiquette-gauche .carte-zones-nom {
    left: auto;
    right: calc(100% - var(--carte-ecart));
}

.carte-zones-etiquette-haut .carte-zones-nom {
    top: auto;
    left: 50%;
    bottom: calc(100% - var(--carte-ecart));
    transform: translateX(-50%);
}

.carte-zones-etiquette-bas .carte-zones-nom {
    top: calc(100% - var(--carte-ecart));
    left: 50%;
    transform: translateX(-50%);
}

/* Placements en diagonale : indispensables au centre du pays, où quatre
   localités tiennent dans moins de cinquante kilomètres. */
.carte-zones-etiquette-haut-gauche .carte-zones-nom,
.carte-zones-etiquette-haut-droite .carte-zones-nom,
.carte-zones-etiquette-bas-gauche .carte-zones-nom,
.carte-zones-etiquette-bas-droite .carte-zones-nom {
    transform: none;
}

.carte-zones-etiquette-haut-gauche .carte-zones-nom,
.carte-zones-etiquette-haut-droite .carte-zones-nom {
    top: auto;
    bottom: calc(100% - var(--carte-ecart));
}

.carte-zones-etiquette-bas-gauche .carte-zones-nom,
.carte-zones-etiquette-bas-droite .carte-zones-nom {
    top: calc(100% - var(--carte-ecart));
}

.carte-zones-etiquette-haut-gauche .carte-zones-nom,
.carte-zones-etiquette-bas-gauche .carte-zones-nom {
    left: auto;
    right: calc(100% - var(--carte-ecart));
}

.carte-zones-etiquette-haut-droite .carte-zones-nom,
.carte-zones-etiquette-bas-droite .carte-zones-nom {
    left: calc(100% - var(--carte-ecart));
    right: auto;
}

.carte-zones-point-bureau .carte-zones-nom {
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ---------------------------------------------------------------- Légende -- */
.carte-zones-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 18px 0 0;
    font-size: .86rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sam-anthracite);
}

.carte-zones-legende li {
    display: flex;
    align-items: center;
    gap: 9px;
}

.carte-zones-legende-pastille {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sam-bronze);
    box-shadow: 0 0 0 2px rgba(5, 25, 55, .12);
}

.carte-zones-legende-bureau {
    width: 18px;
    height: 18px;
    box-shadow: 0 0 0 3px rgba(13, 207, 69, .35);
}

/* ------------------------------------------------------ Choix des localités */
.carte-zones-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.carte-zones-puce {
    padding: 8px 16px;
    font-size: .86rem;
    font-weight: 600;
    background: #fff;
    color: var(--sam-navy);
    border: 1px solid var(--sam-border);
    border-radius: 999px;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.carte-zones-puce:hover {
    border-color: var(--sam-bronze);
}

.carte-zones-puce[aria-current="true"] {
    background: var(--sam-navy);
    border-color: var(--sam-navy);
    color: #fff;
}

.carte-zones-puce-bureau::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--sam-bronze);
    vertical-align: 1px;
}

/* ------------------------------------------------------------------ Fiche -- */
.carte-zones-fiche {
    padding: 30px 28px;
    background: #fff;
    border: 1px solid var(--sam-border);
    border-top: 3px solid var(--sam-bronze);
}

.carte-zones-fiche + .carte-zones-fiche {
    margin-top: 20px;
}

.carte-zones-fiche-statut {
    margin-bottom: 10px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--sam-gris-route);
}

.carte-zones-fiche-statut-bureau {
    color: var(--sam-vert-texte);
}

.carte-zones-fiche-titre {
    margin-bottom: 14px;
    font-size: 1.7rem;
    color: var(--sam-navy);
}

.carte-zones-fiche-situation,
.carte-zones-fiche-adresse {
    margin-bottom: 14px;
    font-size: .92rem;
    color: var(--sam-anthracite);
}

.carte-zones-fiche-situation i,
.carte-zones-fiche-adresse i {
    color: var(--sam-vert-texte);
}

.carte-zones-fiche-texte {
    margin-bottom: 22px;
}

.carte-zones-fiche-intitule {
    margin-bottom: 10px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--sam-navy);
}

.carte-zones-fiche-services {
    margin-bottom: 24px;
}

.carte-zones-fiche-services li + li {
    margin-top: 4px;
}

.carte-zones-fiche-services a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    color: var(--sam-navy);
    background: var(--sam-light);
    transition: background .25s ease, color .25s ease;
}

.carte-zones-fiche-services a:hover {
    background: var(--sam-navy);
    color: #fff;
}

.carte-zones-fiche-services i {
    color: var(--sam-vert-texte);
    width: 18px;
    text-align: center;
}

.carte-zones-fiche-services a:hover i {
    color: var(--sam-bronze);
}

/* --------------------------------------------------------------- Compteurs */
.carte-zones-chiffres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}

.carte-zones-chiffre {
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--sam-border);
    border-left: 3px solid var(--sam-bronze);
}

.carte-zones-chiffre-valeur {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--sam-navy);
}

.carte-zones-chiffre-texte {
    display: block;
    margin-top: 8px;
    font-size: .92rem;
    color: var(--sam-anthracite);
}

/* Le compteur dont la « valeur » est une phrase (les grandes zones
   couvertes) : même bloc, mais une taille qui accepte plusieurs mots. */
.carte-zones-chiffre-mots .carte-zones-chiffre-valeur {
    font-size: 1.5rem;
    line-height: 1.25;
    text-transform: uppercase;
}

/* ------------------------------------------------------------- Téléphones -- */
@media (max-width: 991.98px) {
    /* Sur un écran étroit, sept noms côte à côte deviendraient illisibles :
       les points restent, les noms passent dans la liste sous la carte. */
    .carte-zones-nom {
        display: none;
    }

    /* Sur une carte de 330 px, Yamoussoukro et Kossou — 25 km d'écart — ne
       sont plus qu'à neuf pixels l'un de l'autre. Les pastilles rétrécissent
       pour qu'on distingue encore deux points ; pour les atteindre, c'est la
       liste de localités ci-dessous qui sert, avec ses cibles de 38 px. */
    .carte-zones-pastille {
        width: 11px;
        height: 11px;
        margin: -5.5px 0 0 -5.5px;
    }

    .carte-zones-point-bureau .carte-zones-pastille {
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
        box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(13, 207, 69, .40), 0 2px 6px rgba(5, 25, 55, .5);
    }

    .carte-zones-point-bureau::before {
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
    }

    .carte-zones-choix {
        margin-top: 26px;
    }
}

@media (max-width: 767.98px) {
    .carte-zones-chiffres {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .carte-zones-fiche {
        padding: 24px 20px;
    }
}