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

   Palette
     Bleu nuit / pétrole   #0B192C   rigueur, gouvernance suisse, énergie
     Bronze mat            #C5A880   terre, mine, métaux précieux, lithium
     Gris anthracite       #393E46   texte courant
     Blanc épuré           #FFFFFF   respiration et contraste
   ========================================================================= */

:root {
    --spr-navy: #0B192C;
    --spr-navy-soft: #142338;
    --spr-bronze: #C5A880;
    --spr-bronze-dark: #A78A63;
    --spr-anthracite: #393E46;
    --spr-light: #F4F4F4;
    --spr-border: rgba(11, 25, 44, .12);
}

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

::selection {
    background: var(--spr-bronze);
    color: var(--spr-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(--spr-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(--spr-bronze);
    outline-offset: 2px;
    box-shadow: none;
}

.text-primary {
    color: var(--spr-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: spr-spinner-failsafe 1ms linear 6s forwards;
}

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

/* Le bronze est une couleur claire : le texte des boutons passe en bleu nuit
   pour conserver un ratio de contraste conforme AA. */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-outline-primary:hover {
    color: var(--spr-navy);
}

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

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

.bg-dark {
    background-color: var(--spr-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 bronze. */
.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(--spr-bronze) !important;
}

/* ---------------------------------------------------------- Navigation -- */
.navbar {
    box-shadow: 0 2px 24px rgba(11, 25, 44, .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(--spr-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(11, 25, 44, .85) 0%, rgba(11, 25, 44, .35) 70%);
}

/* Assombrissement du carrousel pour garantir la lisibilité du texte blanc. */
.owl-carousel-inner {
    background: linear-gradient(90deg, rgba(11, 25, 44, .82) 0%, rgba(11, 25, 44, .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(--spr-bronze);
    width: 52px;
}

/* -------------------------------------------------- Bannière de page --- */
.page-hero {
    min-height: 380px;
    display: flex;
    align-items: center;
    background: var(--spr-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(11, 25, 44, .92) 0%, rgba(11, 25, 44, .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(--spr-bronze);
}

.page-hero .breadcrumb-item.active {
    color: var(--spr-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(--spr-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(--spr-border);
}

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

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

.value-flow-arrow {
    color: var(--spr-bronze);
    font-size: .7rem;
}

/* -------------------------------------------------------------- Cartes -- */
.pillar-card,
.division-item,
.shipment-fact,
.quote-block {
    border-left: 3px solid var(--spr-bronze);
    box-shadow: 0 0 45px rgba(11, 25, 44, .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(11, 25, 44, .14);
}

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

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

.portfolio-cat .h5 {
    color: var(--spr-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(--spr-border);
    background: var(--spr-light);
    color: var(--spr-navy);
    text-align: center;
    transition: .35s;
}

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

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

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

.chain-tab-icon {
    font-size: 1.1rem;
    color: var(--spr-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(--spr-light);
    box-shadow: 0 0 45px rgba(11, 25, 44, .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(--spr-border);
}

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

/* --------------------------------------------------- Suivi de cargaison */
.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(--spr-border);
}

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

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

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

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

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

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

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

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

/* -------------------------------------------------------- Formulaires -- */
.form-floating > label {
    color: #6c757d;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--spr-bronze);
    box-shadow: 0 0 0 .2rem rgba(197, 168, 128, .35);
}

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

.contact-reference span {
    color: var(--spr-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(--spr-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: #0B192C;
    line-height: 1.3;
    transition: .3s;
}

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

.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(--spr-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(--spr-bronze);
    background: rgba(197, 168, 128, .12);
    color: var(--spr-bronze);
}

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

/* ------------------------------------------------- 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: #0B192C;
    font-size: 30px;
    text-decoration: none;
    box-shadow: 0 6px 22px rgba(11, 25, 44, .35);
    transition: background-color .3s, transform .3s;
}

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

/* 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(--spr-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;
    }
}