/* ===========================================================================
   WESTPORTS — couche « premium » de la refonte Guinée + Côte d'Ivoire
   (oct. 2026). Chargée après responsive.css.

   Charte : marine profond #03182A / #06233A, bleu maritime #075985, blanc,
   orange sécurité #FF6B00, gris clair #F5F7FA ; vert réservé aux statuts
   24/7 / disponibilité. Les couleurs passent par les jetons de variables.css,
   à l'exception du vert de statut et des teintes de la carte, définis ici.

   Sommaire
     1. Jetons propres à la refonte
     2. Utilitaires : drapeau, point « live », icônes, boutons
     3. Header v2 et méga-menus
     4. Menu mobile v2
     5. Hero d'accueil
     6. Cartes pays, puces de ports
     7. Carte de l'Afrique de l'Ouest
     8. Grille de services
     9. Parcours crew change
    10. Bandeau de page (pays, port)
    11. Fiche coordonnées, services locaux, terminaux
    12. Ports, galerie, renvois
    13. Bandeau 24/7
    14. Footer v2
    15. Responsive
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Jetons
   --------------------------------------------------------------------------- */

:root {
    --wp-live:          #22c55e;
    --wp-live-soft:     rgba(34, 197, 94, 0.18);
    --wp-orange:        var(--wp-gold-500);
    --wp-orange-hover:  var(--wp-gold-400);
    --wp-map-sea:       #e8f1f8;
    --wp-map-land:      #d5dee8;
    --wp-map-border:    #ffffff;
    --wp-map-country:   var(--wp-navy-700);
    --wp-map-country-active: var(--wp-sea-700);
    --wp-map-label:     var(--wp-navy-900);
    --wp-map-muted-label: #7d8b99;
    --wp-header-height: 80px;
    --wp-header-height-scrolled: 68px;
}

/* Sur fond sombre, la carte passe en marine. */
.wp-inverse,
.wp-footer {
    --wp-map-sea:       rgba(255, 255, 255, 0.02);
    --wp-map-land:      rgba(255, 255, 255, 0.07);
    --wp-map-border:    rgba(255, 255, 255, 0.16);
    --wp-map-country:   #0f4a73;
    --wp-map-country-active: #0b6aa6;
    --wp-map-label:     #ffffff;
    --wp-map-muted-label: rgba(255, 255, 255, 0.42);
}

:root[data-theme='dark'] {
    --wp-map-sea:       #0a2236;
    --wp-map-land:      #12324d;
    --wp-map-border:    rgba(255, 255, 255, 0.14);
    --wp-map-country:   #0f4a73;
    --wp-map-country-active: #0b6aa6;
    --wp-map-label:     #ffffff;
    --wp-map-muted-label: rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------------------------
   2. Utilitaires
   --------------------------------------------------------------------------- */

.wp-flag {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 1.05em;
    line-height: 1;
    letter-spacing: 0;
}

.wp-flag--lg { font-size: 2rem; }

.wp-live-dot {
    position: relative;
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wp-live);
    box-shadow: 0 0 0 0 var(--wp-live-soft);
}

@media (prefers-reduced-motion: no-preference) {
    .wp-live-dot { animation: wp-live 2.2s var(--wp-ease) infinite; }
}

@keyframes wp-live {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.wp-icon { width: 24px; height: 24px; flex: none; }
.wp-icon--sm { width: 16px; height: 16px; }
.wp-icon--xs { width: 13px; height: 13px; }
.wp-icon__accent { stroke: var(--wp-orange); }

/* Orange sécurité : texte marine sur aplat orange (contraste 6,5:1). */
.wp-btn--accent {
    --btn-bg: var(--wp-orange);
    --btn-fg: var(--wp-navy-950);
}

.wp-btn--accent:hover { --btn-bg: var(--wp-orange-hover); }

.wp-btn--whatsapp {
    --btn-bg: rgba(34, 197, 94, 0.12);
    --btn-fg: var(--wp-white);
    --btn-border: rgba(34, 197, 94, 0.55);
}

.wp-btn--whatsapp:hover {
    --btn-bg: var(--wp-live);
    --btn-fg: var(--wp-navy-950);
    --btn-border: var(--wp-live);
}

.wp-btn--whatsapp-light {
    --btn-bg: transparent;
    --btn-fg: var(--wp-text-strong);
    --btn-border: color-mix(in srgb, var(--wp-live) 60%, transparent);
}

.wp-btn--whatsapp-light:hover {
    --btn-bg: var(--wp-live);
    --btn-fg: var(--wp-navy-950);
}

/* ---------------------------------------------------------------------------
   3. Header v2
   --------------------------------------------------------------------------- */

.wp-header--v2 {
    --wp-header-fg: var(--wp-white);
    --wp-header-bg: rgba(3, 24, 42, 0.94);
    --wp-header-bg-solid: var(--wp-navy-950);
    --wp-header-border: rgba(255, 255, 255, 0.10);

    color: var(--wp-white);
}

.wp-header--v2.wp-header--over-media:not(.is-scrolled) {
    background: linear-gradient(180deg, rgba(3, 24, 42, 0.72) 0%, rgba(3, 24, 42, 0) 100%);
}

.wp-header--v2.wp-header--solid,
.wp-header--v2.is-scrolled {
    background: var(--wp-header-bg);
    border-bottom-color: var(--wp-header-border);
    box-shadow: 0 10px 30px rgba(3, 24, 42, 0.18);
}

.wp-header--v2 .wp-header__inner { gap: var(--wp-space-4); }

.wp-logo__words { display: grid; gap: 4px; }

.wp-logo .wp-logo__text {
    font-size: 1.3rem;
    letter-spacing: 0.12em;
}

.wp-logo .wp-logo__sub {
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    opacity: 0.78;
    margin-top: 0;
}

.wp-logo .wp-logo__mark { height: 40px; }

.wp-nav--v2 { gap: clamp(var(--wp-space-3), 1.2vw, var(--wp-space-5)); }

.wp-header--v2 .wp-nav__link {
    color: rgba(255, 255, 255, 0.86);
    font-weight: 600;
    font-size: 0.875rem;
}

.wp-header--v2 .wp-nav__link:hover,
.wp-header--v2 .wp-nav__link[aria-current='page'] { color: var(--wp-white); }

.wp-header--v2 .wp-nav__link::after { background: var(--wp-orange); }

.wp-nav__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.wp-nav__toggle {
    display: grid;
    place-items: center;
    width: 22px;
    height: 32px;
    color: rgba(255, 255, 255, 0.7);
    transition: transform var(--wp-duration-fast) var(--wp-ease), color var(--wp-duration-fast) var(--wp-ease);
}

.wp-nav__toggle svg { width: 12px; height: 12px; }

.wp-nav__item:hover > .wp-nav__toggle,
.wp-nav__item.is-open > .wp-nav__toggle { color: var(--wp-orange); transform: rotate(180deg); }

/* Méga-menu : panneau blanc sous l'entrée. Le pont invisible (::before)
   évite que le survol se perde entre le lien et le panneau. */
.wp-mega {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    z-index: 5;
    width: max-content;
    max-width: min(760px, 92vw);
    padding: var(--wp-space-5);
    color: var(--wp-ink);
    background: var(--wp-white);
    border-radius: var(--wp-radius-lg);
    box-shadow: 0 30px 70px rgba(3, 24, 42, 0.28), 0 0 0 1px rgba(3, 24, 42, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity var(--wp-duration-fast) var(--wp-ease), transform var(--wp-duration-fast) var(--wp-ease), visibility var(--wp-duration-fast);
}

.wp-mega::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -20px;
    height: 20px;
}

.wp-mega::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--wp-white);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
}

@media (hover: hover) {
    .wp-nav__item:hover > .wp-mega {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
}

.wp-nav__item:focus-within > .wp-mega,
.wp-nav__item.is-open > .wp-mega {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.wp-nav__item.is-closed > .wp-mega {
    opacity: 0;
    visibility: hidden;
}

.wp-mega__grid--services {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 2px var(--wp-space-3);
}

.wp-mega__service {
    display: flex;
    align-items: center;
    gap: var(--wp-space-3);
    padding: 0.6rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wp-navy-900);
    border-radius: var(--wp-radius-md);
    transition: background-color var(--wp-duration-fast) var(--wp-ease);
}

.wp-mega__service:hover { background: var(--wp-sand-50); }

.wp-mega__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--wp-navy-900);
    background: var(--wp-sea-50);
    border-radius: var(--wp-radius-md);
    flex: none;
}

.wp-mega__icon .wp-icon { width: 20px; height: 20px; }

.wp-mega__grid--countries {
    display: grid;
    grid-template-columns: repeat(var(--wp-cols, 2), minmax(240px, 1fr));
    gap: var(--wp-space-4);
}

.wp-mega__country {
    display: flex;
    flex-direction: column;
    gap: var(--wp-space-3);
    padding: var(--wp-space-4);
    background: var(--wp-sand-50);
    border-radius: var(--wp-radius-md);
}

.wp-mega__country-head {
    display: flex;
    align-items: center;
    gap: var(--wp-space-2);
    padding-bottom: var(--wp-space-3);
    font-family: var(--wp-font-display);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--wp-navy-900);
    border-bottom: 2px solid var(--wp-orange);
}

.wp-mega__country-head .wp-mega__arrow { margin-left: auto; }

.wp-mega__arrow { width: 14px; height: 14px; color: var(--wp-orange); flex: none; }

.wp-mega__ports {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px var(--wp-space-3);
    align-content: start;
    flex: 1;
}

.wp-mega__ports a {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.875rem;
    color: var(--wp-grey-700);
}

.wp-mega__ports a:hover { color: var(--wp-gold-700); }

.wp-mega__office {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wp-sea-700);
}

.wp-mega__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp-space-5);
    margin-top: var(--wp-space-4);
    padding-top: var(--wp-space-4);
    border-top: 1px solid rgba(3, 24, 42, 0.08);
    font-size: 0.8125rem;
    color: var(--wp-grey-600);
}

.wp-mega__more {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-weight: 700;
    color: var(--wp-navy-900);
    white-space: nowrap;
}

.wp-mega__title {
    margin-bottom: var(--wp-space-3);
    font-family: var(--wp-font-display);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp-grey-600);
}

/* Permanence 24/7 dans l'en-tête. */
.wp-ops .wp-mega {
    left: auto;
    right: 0;
    min-width: 320px;
    transform: translateY(8px);
}

.wp-ops .wp-mega::after { left: auto; right: 40px; transform: rotate(45deg); }

.wp-ops:focus-within > .wp-mega,
.wp-ops.is-open > .wp-mega { transform: translateY(0); }

@media (hover: hover) {
    .wp-ops:hover > .wp-mega { transform: translateY(0); }
}

.wp-btn--ops {
    --btn-bg: rgba(255, 255, 255, 0.06);
    --btn-fg: var(--wp-white);
    --btn-border: rgba(255, 255, 255, 0.28);
}

.wp-btn--ops:hover { --btn-border: var(--wp-live); }

.wp-ops__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--wp-space-2) var(--wp-space-4);
    padding: var(--wp-space-3) 0;
    border-top: 1px solid rgba(3, 24, 42, 0.08);
}

.wp-ops__country {
    grid-column: 1 / -1;
    font-weight: 700;
    color: var(--wp-navy-900);
}

.wp-ops__link {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--wp-sea-700);
}

.wp-ops__link--wa {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #15803d;
    background: rgba(34, 197, 94, 0.12);
    border-radius: var(--wp-radius-full);
}

.wp-header--v2 .wp-lang__item { color: rgba(255, 255, 255, 0.7); font-weight: 700; }
.wp-header--v2 .wp-lang__item[aria-current='true'] { color: var(--wp-orange); }
.wp-header--v2 .wp-lang__sep { color: rgba(255, 255, 255, 0.35); }
.wp-header--v2 .wp-theme-toggle { color: var(--wp-white); }

/* ---------------------------------------------------------------------------
   4. Menu mobile v2
   --------------------------------------------------------------------------- */

.wp-drawer--v2 {
    gap: var(--wp-space-5);
    background: var(--wp-navy-950);
}

.wp-drawer--v2 .wp-drawer__link { font-size: var(--wp-text-lg); }

/* Menu ouvert : l'en-tête passe au-dessus du panneau, sinon le bouton de
   fermeture (le burger devenu croix) est recouvert et inaccessible au doigt. */
body.is-locked .wp-header--v2 {
    z-index: calc(var(--wp-z-drawer) + 1);
    background: var(--wp-navy-950);
}

.wp-drawer__group > summary {
    list-style: none;
    cursor: pointer;
}

.wp-drawer__group > summary::-webkit-details-marker { display: none; }

.wp-drawer__group > summary::after {
    content: '';
    width: 9px;
    height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--wp-duration-fast) var(--wp-ease);
}

.wp-drawer__group[open] > summary::after { transform: rotate(-135deg); }
.wp-drawer__group[open] > summary { color: var(--wp-orange); }

.wp-drawer__sub {
    display: grid;
    gap: 2px;
    padding: var(--wp-space-3) 0 var(--wp-space-4);
}

.wp-drawer__sub a {
    display: block;
    padding: 0.45rem 0;
    color: rgba(255, 255, 255, 0.78);
}

.wp-drawer__all { color: var(--wp-orange) !important; font-weight: 700; }

.wp-drawer__countries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp-space-4);
    padding-top: var(--wp-space-3);
}

.wp-drawer__country {
    display: flex;
    align-items: center;
    gap: var(--wp-space-2);
    padding-bottom: var(--wp-space-2);
    font-family: var(--wp-font-display);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    border-bottom: 2px solid var(--wp-orange);
}

.wp-drawer__ops-title {
    display: flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.wp-drawer--v2 .wp-lang__item { color: rgba(255, 255, 255, 0.7); font-weight: 700; }
.wp-drawer--v2 .wp-lang__item[aria-current='true'] { color: var(--wp-orange); }

/* ---------------------------------------------------------------------------
   5. Hero d'accueil
   --------------------------------------------------------------------------- */

.wp-hero2 {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: min(100svh, 940px);
    padding-top: var(--wp-header-height);
    color: var(--wp-white);
    background: var(--wp-navy-950);
    overflow: hidden;
    isolation: isolate;
}

.wp-hero2__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 64%;
    z-index: -2;
}

.wp-hero2__media picture,
.wp-hero2__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 40%;
}

/* Fondu vers le marine côté texte ; léger assombrissement en bas, sous le
   bandeau des faits. */
.wp-hero2__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, var(--wp-navy-950) 0%, var(--wp-navy-950) 36%, rgba(3, 24, 42, 0.78) 48%, rgba(3, 24, 42, 0.18) 66%, rgba(3, 24, 42, 0) 82%),
        linear-gradient(180deg, rgba(3, 24, 42, 0) 55%, rgba(3, 24, 42, 0.85) 100%);
}

.wp-hero2__inner {
    flex: 1;
    display: flex;
    align-items: center;
    padding-block: clamp(var(--wp-space-8), 7vh, var(--wp-space-11));
}

.wp-hero2__content {
    display: grid;
    gap: var(--wp-space-5);
    max-width: 680px;
}

.wp-hero2__countries {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp-space-2);
}

.wp-geo-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--wp-white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--wp-radius-full);
    transition: border-color var(--wp-duration-fast) var(--wp-ease), background-color var(--wp-duration-fast) var(--wp-ease);
}

a.wp-geo-chip:hover { border-color: var(--wp-orange); background: rgba(255, 107, 0, 0.12); }
.wp-geo-chip--muted { color: rgba(255, 255, 255, 0.78); background: transparent; }

.wp-hero2__title {
    font-family: var(--wp-font-display);
    font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.9rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--wp-white);
    text-wrap: balance;
}

.wp-hero2__services {
    max-width: 58ch;
    font-size: var(--wp-text-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.wp-hero2__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp-space-3);
    margin-top: var(--wp-space-2);
}

.wp-hero2 .wp-btn--on-dark { --wp-btn-ghost-fg: var(--wp-white); }

.wp-hero2__facts {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(3, 24, 42, 0.72);
    backdrop-filter: blur(10px);
}

.wp-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wp-facts__item {
    display: grid;
    gap: 4px;
    padding: var(--wp-space-5) var(--wp-space-5) var(--wp-space-5) 0;
}

.wp-facts__item + .wp-facts__item {
    padding-left: var(--wp-space-5);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.wp-facts dt {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp-orange);
}

.wp-facts dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--wp-space-2);
    font-family: var(--wp-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--wp-white);
}

/* ---------------------------------------------------------------------------
   6. Cartes pays
   --------------------------------------------------------------------------- */

.wp-section-head--center {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
    justify-items: center;
}

.wp-country-grid {
    /* Les photos de terrain des cartes font environ 550 px de large : au-delà
       de 1180 px de grille, elles seraient agrandies et perdraient en netteté. */
    max-width: 1180px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(var(--wp-cols, 2), minmax(0, 1fr));
    gap: clamp(var(--wp-space-5), 2.5vw, var(--wp-space-7));
}

.wp-country-card {
    display: flex;
    flex-direction: column;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-xl);
    overflow: hidden;
    box-shadow: var(--wp-shadow-md);
    transition: transform var(--wp-duration-base) var(--wp-ease), box-shadow var(--wp-duration-base) var(--wp-ease);
}

.wp-country-card:hover { transform: translateY(-4px); box-shadow: var(--wp-shadow-lg); }

.wp-country-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--wp-navy-900);
}

.wp-country-card__media picture,
.wp-country-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--wp-duration-slow) var(--wp-ease-out);
}

.wp-country-card:hover .wp-country-card__media img { transform: scale(1.04); }

.wp-country-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 24, 42, 0) 45%, rgba(3, 24, 42, 0.72) 100%);
}

.wp-country-card__badge {
    position: absolute;
    left: var(--wp-space-5);
    bottom: var(--wp-space-5);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    padding: 0.5rem 1rem;
    font-family: var(--wp-font-display);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--wp-white);
    background: rgba(3, 24, 42, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--wp-radius-full);
    backdrop-filter: blur(6px);
}

.wp-country-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--wp-space-4);
    padding: clamp(var(--wp-space-5), 2.4vw, var(--wp-space-7));
}

.wp-country-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wp-space-4);
}

.wp-country-card__title {
    font-family: var(--wp-font-display);
    font-size: var(--wp-text-xl);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--wp-text-strong);
}

.wp-country-card__count {
    flex: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp-gold-700);
}

.wp-country-card__tagline { color: var(--wp-text-muted); }

/* Hauteur réservée à deux lignes de puces : deux ports et huit ports
   occupent la même surface, les cartes restent alignées. */
.wp-port-chips {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--wp-space-2);
}

.wp-country-card .wp-port-chips { min-height: 5.6rem; }

.wp-port-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wp-text-strong);
    background: var(--wp-bg-sunken);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-full);
    transition: border-color var(--wp-duration-fast) var(--wp-ease), color var(--wp-duration-fast) var(--wp-ease);
}

.wp-port-chip .wp-icon { color: var(--wp-orange); }
.wp-port-chip:hover { border-color: var(--wp-orange); color: var(--wp-gold-700); }

.wp-port-chip--country {
    color: var(--wp-white);
    background: var(--wp-navy-900);
    border-color: var(--wp-navy-900);
    letter-spacing: 0.04em;
}

.wp-country-card__cta { align-self: flex-start; margin-top: auto; }

/* ---------------------------------------------------------------------------
   7. Carte de l'Afrique de l'Ouest
   --------------------------------------------------------------------------- */

.wp-map { margin: 0; }

.wp-map__svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wp-radius-lg);
}

.wp-map__sea { fill: var(--wp-map-sea); }

.wp-map__neighbours path {
    fill: var(--wp-map-land);
    stroke: var(--wp-map-border);
    stroke-width: 1;
}

.wp-map__country {
    fill: var(--wp-map-country);
    stroke: var(--wp-map-border);
    stroke-width: 1.2;
    opacity: 0.55;
    transition: opacity var(--wp-duration-base) var(--wp-ease), fill var(--wp-duration-base) var(--wp-ease);
}

.wp-map__country.is-active { fill: var(--wp-map-country-active); opacity: 1; }

.wp-map__neighbour {
    font-family: var(--wp-font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    fill: var(--wp-map-muted-label);
    text-anchor: middle;
}

.wp-map__ocean {
    font-family: var(--wp-font-body);
    font-size: 13px;
    font-style: italic;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    fill: var(--wp-map-muted-label);
    text-anchor: middle;
}

.wp-map__country-label {
    font-family: var(--wp-font-display);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.16em;
    fill: #ffffff;
    text-anchor: middle;
    paint-order: stroke;
    stroke: rgba(3, 24, 42, 0.35);
    stroke-width: 3px;
}

.wp-map__country-link.is-muted { opacity: 0.6; }

.wp-map__dot {
    fill: var(--wp-orange);
    stroke: #ffffff;
    stroke-width: 1.6;
}

.wp-map__pulse { fill: rgba(255, 107, 0, 0.22); opacity: 0; }

.wp-map__port.is-active .wp-map__pulse,
.wp-map__port:hover .wp-map__pulse,
.wp-map__port:focus .wp-map__pulse { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
    .wp-map__port.is-active .wp-map__pulse {
        transform-box: fill-box;
        transform-origin: center;
        animation: wp-map-pulse 2.4s var(--wp-ease) infinite;
    }
}

@keyframes wp-map-pulse {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}

.wp-map__port.is-muted .wp-map__dot { fill: #9aa7b4; }

.wp-map__port-label {
    font-family: var(--wp-font-body);
    font-size: 12.5px;
    font-weight: 600;
    fill: var(--wp-map-label);
    paint-order: stroke;
    stroke: var(--wp-map-sea);
    stroke-width: 3.5px;
    stroke-linejoin: round;
}

.wp-map__port.is-active .wp-map__port-label { fill: var(--wp-orange); font-weight: 800; }
.wp-map__port:hover .wp-map__port-label { fill: var(--wp-orange); }

.wp-map__leader {
    fill: none;
    stroke: var(--wp-map-muted-label);
    stroke-width: 0.8;
}

.wp-map--large .wp-map__svg { border: 1px solid rgba(255, 255, 255, 0.08); }
.wp-map--light .wp-map__svg { border: 1px solid var(--wp-border); }

.wp-map--mini .wp-map__svg { border-radius: var(--wp-radius-md); }
.wp-map--mini .wp-map__neighbour,
.wp-map--mini .wp-map__ocean { display: none; }
.wp-map--mini .wp-map__country-label { font-size: 30px; }
.wp-map--mini .wp-map__dot { r: 7; }

.wp-region__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    align-items: center;
    gap: clamp(var(--wp-space-7), 5vw, var(--wp-space-11));
}

.wp-region .wp-h2 { color: var(--wp-white); }

.wp-region__lead {
    font-size: var(--wp-text-lg);
    line-height: var(--wp-leading-relaxed);
    color: rgba(255, 255, 255, 0.72);
}

.wp-region__countries {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp-space-5);
    margin-top: var(--wp-space-3);
}

.wp-region__country {
    display: grid;
    gap: var(--wp-space-2);
    padding-top: var(--wp-space-4);
    border-top: 2px solid var(--wp-orange);
}

.wp-region__country-name {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-family: var(--wp-font-display);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--wp-white);
}

.wp-region__country p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.66); }

/* ---------------------------------------------------------------------------
   8. Grille de services
   --------------------------------------------------------------------------- */

.wp-svc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wp-space-4);
}

.wp-svc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--wp-space-3);
    padding: var(--wp-space-6) var(--wp-space-5);
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-lg);
    transition: border-color var(--wp-duration-base) var(--wp-ease), transform var(--wp-duration-base) var(--wp-ease), box-shadow var(--wp-duration-base) var(--wp-ease);
}

.wp-svc::before {
    content: '';
    position: absolute;
    left: var(--wp-space-5);
    right: var(--wp-space-5);
    top: -1px;
    height: 3px;
    background: var(--wp-orange);
    border-radius: 0 0 3px 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--wp-duration-base) var(--wp-ease);
}

.wp-svc:hover { transform: translateY(-3px); box-shadow: var(--wp-shadow-md); border-color: transparent; }
.wp-svc:hover::before { transform: scaleX(1); }

.wp-svc__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--wp-navy-900);
    background: var(--wp-sea-50);
    border-radius: var(--wp-radius-md);
}

:root[data-theme='dark'] .wp-svc__icon,
:root[data-theme='dark'] .wp-mega__icon { color: var(--wp-white); background: rgba(255, 255, 255, 0.06); }

.wp-svc__icon .wp-icon { width: 28px; height: 28px; }

.wp-svc__title {
    font-family: var(--wp-font-display);
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--wp-text-strong);
}

.wp-svc__text { font-size: 0.875rem; line-height: 1.6; color: var(--wp-text-muted); }

.wp-svc__more {
    margin-top: auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--wp-text-strong);
    border: 1px solid var(--wp-border);
    border-radius: 50%;
    transition: background-color var(--wp-duration-fast) var(--wp-ease), color var(--wp-duration-fast) var(--wp-ease);
}

.wp-svc__more svg { width: 14px; height: 14px; }
.wp-svc:hover .wp-svc__more { background: var(--wp-orange); border-color: var(--wp-orange); color: var(--wp-navy-950); }

/* ---------------------------------------------------------------------------
   9. Parcours crew change
   --------------------------------------------------------------------------- */

.wp-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--wp-space-4);
    margin-top: clamp(var(--wp-space-7), 4vw, var(--wp-space-9));
}

/* Le fil qui relie les étapes, derrière les pastilles. */
.wp-flow::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 40px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--wp-orange) 0 10px, transparent 10px 18px);
    opacity: 0.6;
}

.wp-flow__step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--wp-space-2);
    text-align: center;
}

.wp-flow__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    color: var(--wp-white);
    background: var(--wp-navy-900);
    border: 4px solid var(--wp-bg-alt);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(3, 24, 42, 0.18);
}

.wp-section:not(.wp-section--alt) .wp-flow__icon { border-color: var(--wp-bg); }

.wp-flow__icon .wp-icon { width: 32px; height: 32px; }

.wp-flow__num {
    position: absolute;
    top: -6px;
    left: calc(50% + 22px);
    z-index: 1;
    padding: 2px 7px;
    font-family: var(--wp-font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--wp-navy-950);
    background: var(--wp-orange);
    border-radius: var(--wp-radius-full);
}

.wp-flow__label {
    margin-top: var(--wp-space-2);
    font-family: var(--wp-font-display);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp-text-strong);
}

.wp-flow__text { font-size: 0.8125rem; color: var(--wp-text-muted); }

.wp-crew-figure {
    /* Photo source de 554 px : jamais affichée plus large. */
    justify-self: center;
    max-width: 554px;
    width: 100%;
    margin: 0;
    border-radius: var(--wp-radius-xl);
    overflow: hidden;
    box-shadow: var(--wp-shadow-lg);
}

.wp-crew-figure img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   10. Bandeau de page (pays, port)
   --------------------------------------------------------------------------- */

.wp-phero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(460px, 72vh, 720px);
    padding-top: var(--wp-header-height);
    color: var(--wp-white);
    background: var(--wp-navy-950);
    overflow: hidden;
    isolation: isolate;
}

.wp-phero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.wp-phero__media picture,
.wp-phero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wp-phero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(3, 24, 42, 0.92) 0%, rgba(3, 24, 42, 0.7) 45%, rgba(3, 24, 42, 0.2) 100%),
        linear-gradient(180deg, rgba(3, 24, 42, 0.5) 0%, rgba(3, 24, 42, 0) 30%, rgba(3, 24, 42, 0.6) 100%);
}

.wp-phero__inner {
    display: grid;
    gap: var(--wp-space-4);
    padding-block: clamp(var(--wp-space-8), 8vh, var(--wp-space-11));
}

.wp-phero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    justify-self: start;
    padding: 0.4rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--wp-radius-full);
}

.wp-phero__title {
    max-width: 18ch;
    font-family: var(--wp-font-display);
    font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--wp-white);
}

.wp-phero__subtitle {
    max-width: 52ch;
    font-size: var(--wp-text-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.84);
}

.wp-phero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp-space-3);
    margin-top: var(--wp-space-3);
}

.wp-phero .wp-btn--on-dark { --wp-btn-ghost-fg: var(--wp-white); }

/* Photo de terrain en médaillon : affichée à sa taille réelle ou moins,
   jamais étirée. Masquée sur petit écran, où elle reste visible dans la
   galerie du port. */
.wp-phero__inner { position: relative; }

.wp-phero__inset {
    position: absolute;
    right: var(--wp-gutter);
    bottom: clamp(var(--wp-space-8), 8vh, var(--wp-space-11));
    width: min(420px, 30vw);
    margin: 0;
    padding: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--wp-radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
}

.wp-phero__inset img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--wp-radius-lg) - 4px);
}

.wp-phero__inset figcaption {
    padding: var(--wp-space-2) var(--wp-space-2) 2px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1023.98px) {
    .wp-phero__inset { display: none; }
}

/* ---------------------------------------------------------------------------
   11. Coordonnées, services locaux, terminaux
   --------------------------------------------------------------------------- */

.wp-office {
    position: relative;
    display: grid;
    gap: var(--wp-space-5);
    padding: clamp(var(--wp-space-5), 2.4vw, var(--wp-space-7));
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-top: 4px solid var(--wp-orange);
    border-radius: var(--wp-radius-lg);
    box-shadow: var(--wp-shadow-lg);
}

.wp-office__status {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #15803d;
}

:root[data-theme='dark'] .wp-office__status { color: var(--wp-live); }

.wp-office__title {
    display: flex;
    align-items: center;
    gap: var(--wp-space-2);
    margin-top: var(--wp-space-2);
    font-family: var(--wp-font-display);
    font-size: var(--wp-text-xl);
    font-weight: 800;
    color: var(--wp-text-strong);
}

.wp-office__list { display: grid; gap: var(--wp-space-4); }

.wp-office__list li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--wp-space-3);
    align-items: start;
}

.wp-office__list .wp-icon { margin-top: 3px; color: var(--wp-sea-700); }

.wp-office__list a { font-weight: 600; color: var(--wp-text-strong); }
.wp-office__list a:hover { color: var(--wp-gold-700); }

.wp-office__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp-text-muted);
}

.wp-office__actions { display: grid; gap: var(--wp-space-3); }

.wp-local-services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--wp-space-4);
}

.wp-local-service {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--wp-space-4);
    height: 100%;
    padding: var(--wp-space-5);
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-lg);
    transition: border-color var(--wp-duration-fast) var(--wp-ease), transform var(--wp-duration-fast) var(--wp-ease);
}

.wp-local-service:hover { border-color: var(--wp-orange); transform: translateY(-2px); }

.wp-local-service__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--wp-white);
    background: var(--wp-navy-900);
    border-radius: var(--wp-radius-md);
}

.wp-local-service__body { display: grid; gap: 2px; }

.wp-local-service__title {
    font-family: var(--wp-font-display);
    font-weight: 800;
    color: var(--wp-text-strong);
}

.wp-local-service__text { font-size: 0.8125rem; color: var(--wp-text-muted); }
.wp-local-service__arrow { width: 16px; height: 16px; color: var(--wp-orange); }

.wp-terminals {
    padding: var(--wp-space-5);
    background: var(--wp-bg-sunken);
    border-radius: var(--wp-radius-lg);
}

.wp-terminals__title {
    margin-bottom: var(--wp-space-3);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp-text-muted);
}

.wp-terminals__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--wp-space-3);
}

.wp-terminals__list li {
    display: flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-weight: 600;
    color: var(--wp-text-strong);
}

.wp-terminals__list .wp-icon { color: var(--wp-sea-700); }

/* ---------------------------------------------------------------------------
   12. Ports, galerie, renvois
   --------------------------------------------------------------------------- */

.wp-country-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(var(--wp-space-6), 3vw, var(--wp-space-8));
}

.wp-country-layout__map { position: sticky; top: calc(var(--wp-header-height-scrolled) + var(--wp-space-5)); }

.wp-port-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp-space-4);
}

.wp-port-card {
    display: grid;
    grid-template-columns: 112px 1fr;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-lg);
    overflow: hidden;
    transition: border-color var(--wp-duration-fast) var(--wp-ease), transform var(--wp-duration-fast) var(--wp-ease), box-shadow var(--wp-duration-fast) var(--wp-ease);
}

.wp-port-card:hover { border-color: var(--wp-orange); transform: translateY(-2px); box-shadow: var(--wp-shadow-md); }

.wp-port-card__media { position: relative; background: var(--wp-navy-900); }

.wp-port-card__media picture,
.wp-port-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wp-port-card__body { display: grid; gap: 2px; padding: var(--wp-space-4); }

.wp-port-card__country {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp-gold-700);
}

.wp-port-card__city {
    font-family: var(--wp-font-display);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--wp-text-strong);
}

.wp-port-card__text { font-size: 0.8125rem; line-height: 1.5; color: var(--wp-text-muted); }

.wp-local-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--wp-space-3);
}

.wp-local-gallery__item {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--wp-radius-md);
    cursor: zoom-in;
}

.wp-local-gallery__item picture,
.wp-local-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--wp-duration-slow) var(--wp-ease-out);
}

.wp-local-gallery__item:hover img { transform: scale(1.05); }

.wp-port-geo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--wp-space-6), 3vw, var(--wp-space-8));
    align-items: start;
}

.wp-port-geo--map-only { grid-template-columns: minmax(0, 1fr); max-width: 980px; }

.wp-siblings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp-space-3) var(--wp-space-5);
    margin-top: var(--wp-space-8);
    padding-top: var(--wp-space-6);
    border-top: 1px solid var(--wp-border);
}

.wp-siblings__label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp-text-muted);
}

.wp-also { display: grid; gap: var(--wp-space-4); }

.wp-also__card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--wp-space-5);
    padding: var(--wp-space-6);
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-lg);
    transition: border-color var(--wp-duration-fast) var(--wp-ease);
}

.wp-also__card:hover { border-color: var(--wp-orange); }

.wp-also__card > span:nth-child(2) { display: grid; gap: 2px; }

.wp-also__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp-text-muted);
}

.wp-also__title {
    font-family: var(--wp-font-display);
    font-size: var(--wp-text-xl);
    font-weight: 800;
    color: var(--wp-text-strong);
}

.wp-also__ports { color: var(--wp-text-muted); }
.wp-also__arrow { width: 20px; height: 20px; color: var(--wp-orange); }

.wp-directory {
    display: grid;
    grid-template-columns: repeat(var(--wp-cols, 2), minmax(0, 1fr));
    gap: clamp(var(--wp-space-6), 3vw, var(--wp-space-9));
}

.wp-directory__country {
    display: flex;
    align-items: center;
    gap: var(--wp-space-2);
    padding-bottom: var(--wp-space-3);
    font-family: var(--wp-font-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--wp-text-strong);
    border-bottom: 3px solid var(--wp-orange);
}

.wp-directory__list li { border-bottom: 1px solid var(--wp-border); }

.wp-directory__list a {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--wp-space-4);
    padding: var(--wp-space-4) 0;
    transition: padding-left var(--wp-duration-fast) var(--wp-ease);
}

.wp-directory__list a:hover { padding-left: var(--wp-space-2); }

.wp-directory__city { font-family: var(--wp-font-display); font-weight: 800; color: var(--wp-text-strong); }
.wp-directory__tag { font-size: 0.875rem; color: var(--wp-text-muted); }

/* ---------------------------------------------------------------------------
   13. Bandeau 24/7
   --------------------------------------------------------------------------- */

.wp-ops-band {
    position: relative;
    padding-block: clamp(var(--wp-space-9), 7vw, var(--wp-space-12));
    color: var(--wp-white);
    background:
        radial-gradient(1200px 400px at 85% 0%, rgba(7, 89, 133, 0.55), transparent 60%),
        var(--wp-navy-950);
    overflow: hidden;
}

.wp-ops-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(var(--wp-space-7), 5vw, var(--wp-space-10));
}

.wp-ops-band__intro { display: grid; gap: var(--wp-space-4); }

.wp-ops-band__status {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--wp-live);
}

.wp-ops-band__title {
    font-family: var(--wp-font-display);
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
    font-weight: 800;
    line-height: 1.12;
    color: var(--wp-white);
}

.wp-ops-band__body { color: rgba(255, 255, 255, 0.72); font-size: var(--wp-text-lg); }

.wp-ops-band__actions { display: flex; flex-wrap: wrap; gap: var(--wp-space-3); margin-top: var(--wp-space-3); }
.wp-ops-band .wp-btn--on-dark { --wp-btn-ghost-fg: var(--wp-white); }

.wp-ops-band__desks {
    display: grid;
    grid-template-columns: repeat(var(--wp-cols, 2), minmax(0, 1fr));
    gap: var(--wp-space-4);
}

.wp-ops-desk {
    display: grid;
    gap: var(--wp-space-3);
    padding: var(--wp-space-6);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--wp-radius-lg);
}

.wp-ops-desk__country {
    display: flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.78);
}

.wp-ops-desk__phone {
    font-family: var(--wp-font-display);
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
    font-weight: 800;
    color: var(--wp-white);
    white-space: nowrap;
}

.wp-ops-desk__phone:hover { color: var(--wp-orange); }

.wp-ops-desk__links { display: grid; gap: var(--wp-space-2); }

.wp-ops-desk__links a {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.78);
    overflow-wrap: anywhere;
}

.wp-ops-desk__links a:hover { color: var(--wp-white); }

/* ---------------------------------------------------------------------------
   14. Footer v2
   --------------------------------------------------------------------------- */

.wp-footer--v2 {
    --wp-footer-bg: var(--wp-navy-950);

    background:
        radial-gradient(900px 300px at 10% 0%, rgba(7, 89, 133, 0.25), transparent 60%),
        var(--wp-navy-950);
}

.wp-footer__grid--v2 {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(200px, 1fr) repeat(var(--wp-country-cols, 2), minmax(150px, 0.85fr)) minmax(240px, 1.15fr);
    gap: 0;
    padding-block: clamp(var(--wp-space-8), 6vw, var(--wp-space-10));
}

.wp-footer__grid--v2 > * {
    padding-inline: clamp(var(--wp-space-4), 2vw, var(--wp-space-6));
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-footer__grid--v2 > :first-child { padding-left: 0; border-left: 0; }
.wp-footer__grid--v2 > :last-child { padding-right: 0; }

.wp-footer__brand { display: grid; align-content: start; gap: var(--wp-space-5); }

.wp-footer__tagline { max-width: 34ch; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }

.wp-footer__ops {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px var(--wp-space-3);
    padding: var(--wp-space-4) var(--wp-space-5);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--wp-radius-md);
    transition: border-color var(--wp-duration-fast) var(--wp-ease);
}

.wp-footer__ops:hover { border-color: var(--wp-live); }

.wp-footer__ops-title {
    font-family: var(--wp-font-display);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp-white);
}

.wp-footer__ops-note {
    grid-column: 2 / 3;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.62);
}

.wp-footer__ops .wp-footer__chev { grid-column: 3; grid-row: 1 / span 2; width: 16px; height: 16px; }

.wp-social--v2 { display: flex; gap: var(--wp-space-3); }

.wp-social--v2 .wp-social__item {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--wp-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: border-color var(--wp-duration-fast) var(--wp-ease), color var(--wp-duration-fast) var(--wp-ease);
}

.wp-social--v2 .wp-social__item svg { width: 20px; height: 20px; }
.wp-social--v2 .wp-social__item:hover { color: var(--wp-orange); border-color: var(--wp-orange); }

.wp-footer--v2 .wp-footer__title {
    position: relative;
    margin-bottom: var(--wp-space-6);
    padding-bottom: var(--wp-space-3);
    font-family: var(--wp-font-display);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp-white);
}

.wp-footer--v2 .wp-footer__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 3px;
    background: var(--wp-orange);
    border-radius: 2px;
}

.wp-footer--v2 .wp-footer__title a { display: inline-flex; align-items: center; gap: var(--wp-space-2); color: inherit; }

.wp-footer--v2 .wp-footer__list { display: grid; gap: var(--wp-space-1); }

.wp-footer--v2 .wp-footer__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp-space-3);
    padding: 0.32rem 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.78);
    transition: color var(--wp-duration-fast) var(--wp-ease);
}

.wp-footer--v2 .wp-footer__list a:hover { color: var(--wp-white); }

.wp-footer__chev { width: 14px; height: 14px; flex: none; opacity: 0.6; }

.wp-footer__contact { display: grid; align-content: start; gap: var(--wp-space-4); }

.wp-footer__office { display: grid; gap: 6px; }

.wp-footer__office-name {
    display: flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-weight: 700;
    color: var(--wp-white);
}

.wp-footer__office a,
.wp-footer__sales {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.78);
    overflow-wrap: anywhere;
}

.wp-footer__office .wp-icon,
.wp-footer__sales .wp-icon { color: var(--wp-orange); }

.wp-footer__office a:hover,
.wp-footer__sales:hover { color: var(--wp-white); }

.wp-footer__mini-map {
    display: block;
    margin-top: var(--wp-space-2);
    padding: var(--wp-space-2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--wp-radius-md);
    transition: border-color var(--wp-duration-fast) var(--wp-ease);
}

.wp-footer__mini-map:hover { border-color: rgba(255, 255, 255, 0.32); }

.wp-footer--v2 .wp-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.72);
}

/* ---------------------------------------------------------------------------
   15. Responsive
   --------------------------------------------------------------------------- */

/* Le menu complet tient à partir de 1280 px ; en dessous, le burger. */
@media (min-width: 1100px) and (max-width: 1279.98px) {
    .wp-nav { display: none; }
    .wp-burger { display: grid; }
}


@media (max-width: 1279.98px) {
    .wp-header--v2 .wp-ops,
    .wp-header--v2 .wp-header__actions > .wp-lang { display: none; }

    .wp-footer__grid--v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--wp-space-8) 0;
    }

    .wp-footer__grid--v2 > * { border-left: 0; padding-inline: 0 var(--wp-space-5); }
    .wp-footer__brand { grid-column: 1 / -1; }

    .wp-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023.98px) {
    .wp-hero2__media { width: 100%; }

    .wp-hero2__veil {
        background:
            linear-gradient(180deg, rgba(3, 24, 42, 0.72) 0%, rgba(3, 24, 42, 0.86) 55%, var(--wp-navy-950) 100%);
    }

    .wp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wp-facts__item:nth-child(3) { padding-left: 0; border-left: 0; }
    .wp-facts__item:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.12); }

    .wp-region__grid,
    .wp-country-layout,
    .wp-ops-band__inner,
    .wp-port-geo { grid-template-columns: minmax(0, 1fr); }

    .wp-country-layout__map { position: static; }

    .wp-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .wp-flow { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: var(--wp-space-3); }
}

@media (max-width: 767.98px) {
    .wp-header--v2 .wp-header__cta { display: none; }

    .wp-logo .wp-logo__text { font-size: 1.1rem; }
    .wp-logo .wp-logo__mark { height: 34px; }

    .wp-hero2 { min-height: auto; }
    .wp-hero2__actions .wp-btn { flex: 1 1 100%; }

    .wp-facts__item { padding: var(--wp-space-4) var(--wp-space-3) var(--wp-space-4) 0; }
    .wp-facts__item + .wp-facts__item { padding-left: var(--wp-space-3); }
    .wp-facts dd { font-size: 0.9375rem; }

    .wp-country-grid,
    .wp-directory,
    .wp-ops-band__desks { grid-template-columns: minmax(0, 1fr); }

    .wp-country-card .wp-port-chips { min-height: 0; }
    .wp-country-card__cta { align-self: stretch; white-space: normal; text-align: center; }

    .wp-port-grid { grid-template-columns: minmax(0, 1fr); }

    .wp-svc-grid { grid-template-columns: minmax(0, 1fr); }
    .wp-svc { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--wp-space-4); }
    .wp-svc__icon { width: 44px; height: 44px; }
    .wp-svc__title { flex: 1; }
    .wp-svc__text { flex-basis: 100%; }
    .wp-svc__more { display: none; }

    /* Parcours vertical sur téléphone : le fil devient une colonne. */
    .wp-flow { grid-template-columns: minmax(0, 1fr); overflow: visible; gap: var(--wp-space-5); }
    .wp-flow::before { left: 39px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--wp-orange) 0 10px, transparent 10px 18px); }
    .wp-flow__step { grid-template-columns: 80px 1fr; justify-items: start; text-align: left; column-gap: var(--wp-space-4); }
    .wp-flow__icon { grid-row: 1 / span 2; }
    .wp-flow__num { left: 58px; }
    .wp-flow__label { align-self: end; margin-top: 0; }
    .wp-flow__text { align-self: start; }

    .wp-region__countries { grid-template-columns: minmax(0, 1fr); }

    .wp-directory__list a { grid-template-columns: minmax(0, 1fr); gap: 2px; }

    .wp-footer__grid--v2 { grid-template-columns: minmax(0, 1fr); }
    .wp-footer__grid--v2 > * { padding-inline: 0; }

    .wp-phero { min-height: 520px; }
    .wp-phero__actions .wp-btn { flex: 1 1 100%; }
}

/* Bandeaux existants (services, à propos…) : la balise <picture> générée par
   photo() doit occuper tout le bandeau, sinon l'image garde son ratio natif
   et laisse une bande vide en bas sur les écrans hauts. */
.wp-hero__media picture {
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------------
   16. Film « Offshore & Marine Operations »
   --------------------------------------------------------------------------- */

.wp-film__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    align-items: center;
    gap: clamp(var(--wp-space-7), 5vw, var(--wp-space-10));
}

.wp-film .wp-h2 { color: var(--wp-text-strong); }

.wp-film__lead {
    font-size: var(--wp-text-lg);
    line-height: var(--wp-leading-relaxed);
    color: var(--wp-text-muted);
}

.wp-film__points { display: grid; gap: var(--wp-space-3); }

.wp-film__points li {
    display: flex;
    align-items: center;
    gap: var(--wp-space-3);
    font-weight: 600;
}

.wp-film__points .wp-icon { color: var(--wp-orange); }

.wp-film__player {
    position: relative;
    border-radius: var(--wp-radius-xl);
    overflow: hidden;
    background: var(--wp-navy-950);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.wp-film__video {
    display: block;
    width: 100%;
    height: auto;
    background: var(--wp-navy-950);
}

.wp-film__video--h { aspect-ratio: 16 / 9; }
.wp-film__video--v { display: none; aspect-ratio: 9 / 16; }

@media (max-width: 1023.98px) {
    .wp-film__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Téléphone : le montage vertical, plein cadre. */
@media (max-width: 767.98px) {
    .wp-film__video--h { display: none; }
    .wp-film__video--v { display: block; max-height: 80svh; margin-inline: auto; width: auto; max-width: 100%; }
    .wp-film__player { justify-self: center; }
}


/* ---------------------------------------------------------------------------
   17. Thème clair / sombre
   Le bouton de l'en-tête est visible à toutes les largeurs ; le menu mobile
   reçoit en plus une bascule libellée « Clair / Sombre ». Les composants de la
   refonte qui nommaient une couleur fixe (panneaux blancs des menus, textes
   orange foncé, icônes bleu foncé) reçoivent ici leur version sombre.
   --------------------------------------------------------------------------- */

.wp-header--v2 .wp-theme-toggle {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
}

.wp-header--v2 .wp-theme-toggle:hover { border-color: var(--wp-orange); }

/* Entre 1280 et 1440 px l'en-tête est plein : on resserre plutôt que de
   masquer une commande. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
    .wp-nav--v2 { gap: var(--wp-space-3); }
    .wp-header--v2 .wp-nav__link { font-size: 0.8125rem; }
    .wp-header--v2 .wp-header__inner { gap: var(--wp-space-3); }
    .wp-btn--ops { padding-inline: 0.85rem; }
}

.wp-drawer__prefs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp-space-4);
}

.wp-theme-switch {
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
    padding: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--wp-radius-full);
}

.wp-theme-switch__opt {
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    border-radius: var(--wp-radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--wp-duration-fast) var(--wp-ease), color var(--wp-duration-fast) var(--wp-ease);
}

.wp-theme-switch__opt:hover { color: var(--wp-white); }

/* Option active : posée par theme.js (aria-pressed), et dès le premier rendu
   par l'attribut data-theme-mode qu'écrit le script d'amorçage. */
.wp-theme-switch__opt[aria-pressed='true'],
:root[data-theme-mode='auto'] .wp-theme-switch__opt[data-theme-set='auto'],
:root[data-theme-mode='light'] .wp-theme-switch__opt[data-theme-set='light'],
:root[data-theme-mode='dark'] .wp-theme-switch__opt[data-theme-set='dark'] {
    color: var(--wp-navy-950);
    background: var(--wp-orange);
}

:root[data-theme='dark'] {
    --wp-map-country-active: #1683c4;
}

/* Méga-menus : panneau sombre au lieu du blanc. */
:root[data-theme='dark'] .wp-mega,
:root[data-theme='dark'] .wp-mega::after {
    color: var(--wp-white);
    background: var(--wp-navy-850);
}

:root[data-theme='dark'] .wp-mega {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

:root[data-theme='dark'] .wp-mega__service,
:root[data-theme='dark'] .wp-mega__country-head,
:root[data-theme='dark'] .wp-mega__more,
:root[data-theme='dark'] .wp-ops__country { color: var(--wp-white); }

:root[data-theme='dark'] .wp-mega__service:hover,
:root[data-theme='dark'] .wp-mega__country { background: rgba(255, 255, 255, 0.05); }

:root[data-theme='dark'] .wp-mega__ports a { color: rgba(255, 255, 255, 0.75); }
:root[data-theme='dark'] .wp-mega__foot,
:root[data-theme='dark'] .wp-mega__title { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.1); }
:root[data-theme='dark'] .wp-ops__row { border-color: rgba(255, 255, 255, 0.1); }

/* Textes et icônes trop foncés sur fond sombre. */
:root[data-theme='dark'] .wp-country-card__count,
:root[data-theme='dark'] .wp-port-card__country,
:root[data-theme='dark'] .wp-mega__ports a:hover,
:root[data-theme='dark'] .wp-port-chip:hover,
:root[data-theme='dark'] .wp-office__list a:hover { color: var(--wp-gold-400); }

:root[data-theme='dark'] .wp-mega__office,
:root[data-theme='dark'] .wp-ops__link,
:root[data-theme='dark'] .wp-office__list .wp-icon,
:root[data-theme='dark'] .wp-terminals__list .wp-icon { color: var(--wp-sea-400); }

:root[data-theme='dark'] .wp-local-service__icon,
:root[data-theme='dark'] .wp-flow__icon {
    background: var(--wp-navy-700);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

:root[data-theme='dark'] .wp-port-chip--country {
    color: var(--wp-navy-950);
    background: var(--wp-orange);
    border-color: var(--wp-orange);
}

:root[data-theme='dark'] .wp-country-card,
:root[data-theme='dark'] .wp-office { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.45); }

/* Menu mobile : corrections relevées au contrôle du thème clair. */

/* Le sélecteur de langue est masqué sous 390 px dans l'en-tête… mais il doit
   rester visible dans le menu, qui est justement là pour le reprendre. */
.wp-drawer .wp-lang { display: flex; }

/* Le panneau est toujours marine : ses boutons secondaires doivent être
   blancs, quel que soit le thème (sinon texte marine sur fond marine). */
.wp-drawer--v2 { --wp-btn-ghost-fg: var(--wp-white); }

/* Menu ouvert : en-tête opaque, sinon la liste défile visiblement dessous. */
body.is-locked .wp-header.wp-header--v2,
body.is-locked .wp-header.wp-header--v2.wp-header--over-media:not(.is-scrolled) {
    background: var(--wp-navy-950);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Boutons marine posés sur une carte marine en thème sombre : sans ce
   relèvement, le bouton se confond avec la carte. */
:root[data-theme='dark'] .wp-btn--dark {
    --btn-bg: var(--wp-navy-700);
    --btn-fg: var(--wp-white);
    --btn-border: rgba(255, 255, 255, 0.22);
}

:root[data-theme='dark'] .wp-btn--dark:hover {
    --btn-bg: var(--wp-orange);
    --btn-fg: var(--wp-navy-950);
    --btn-border: var(--wp-orange);
}

/* ---------------------------------------------------------------------------
   18. Repris du site en ligne : slogan, « Pourquoi WESTPORTS », bureaux du
       contact, réseau international
   --------------------------------------------------------------------------- */

.wp-hero2__slogan {
    max-width: 46ch;
    padding-left: var(--wp-space-4);
    font-family: var(--wp-font-display);
    font-size: var(--wp-text-lg);
    font-weight: 600;
    line-height: 1.45;
    color: var(--wp-white);
    border-left: 3px solid var(--wp-orange);
}

.wp-why__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: clamp(var(--wp-space-7), 5vw, var(--wp-space-10));
    align-items: start;
}

.wp-why__lead {
    padding: var(--wp-space-4) var(--wp-space-5);
    color: var(--wp-text-muted);
    background: var(--wp-bg-sunken);
    border-left: 3px solid var(--wp-orange);
    border-radius: 0 var(--wp-radius-md) var(--wp-radius-md) 0;
}

.wp-why__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp-space-4);
}

.wp-why__item {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--wp-space-3);
    padding: var(--wp-space-6);
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-lg);
}

.wp-why__num {
    position: absolute;
    top: var(--wp-space-5);
    right: var(--wp-space-5);
    font-family: var(--wp-font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wp-orange);
    opacity: 0.25;
}

.wp-why__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--wp-white);
    background: var(--wp-navy-900);
    border-radius: var(--wp-radius-md);
}

:root[data-theme='dark'] .wp-why__icon { background: var(--wp-navy-700); }

.wp-why__title {
    font-family: var(--wp-font-display);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--wp-text-strong);
}

.wp-why__text { font-size: 0.9375rem; line-height: 1.6; color: var(--wp-text-muted); }

.wp-contact-desks__ports {
    margin-top: calc(-1 * var(--wp-space-3));
    padding-inline: var(--wp-space-2);
    font-size: 0.8125rem;
    color: var(--wp-text-muted);
}

.wp-network {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--wp-space-4);
}

.wp-network__card {
    display: grid;
    gap: var(--wp-space-2);
    padding: var(--wp-space-6);
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-top: 3px solid var(--wp-sea-700);
    border-radius: var(--wp-radius-lg);
}

.wp-network__region {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp-gold-700);
}

:root[data-theme='dark'] .wp-network__region { color: var(--wp-gold-400); }

.wp-network__city {
    font-family: var(--wp-font-display);
    font-size: var(--wp-text-xl);
    font-weight: 800;
    color: var(--wp-text-strong);
}

.wp-network__name { font-weight: 700; color: var(--wp-text-strong); }
.wp-network__address { font-size: 0.875rem; color: var(--wp-text-muted); }

.wp-network__card a {
    display: inline-flex;
    align-items: center;
    gap: var(--wp-space-2);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wp-link);
}

@media (max-width: 1023.98px) {
    .wp-why__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599.98px) {
    .wp-why__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   19. Rythme vertical resserré (retour client, oct. 2026)
   Les marges de section atteignaient 8rem (128 px) sur grand écran, soit
   ~256 px de vide entre deux blocs. On divise environ par deux, partout,
   en agissant sur les jetons plutôt que section par section.
   --------------------------------------------------------------------------- */

:root {
    --wp-section-y:       clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
    --wp-section-y-tight: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

@media (min-width: 1440px) {
    :root { --wp-section-y: 4.5rem; }
}

.wp-section-head { margin-bottom: var(--wp-space-6); gap: var(--wp-space-3); }
.wp-stack--lg { gap: var(--wp-space-4); }

.wp-ops-band { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.wp-footer__grid--v2 { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.wp-footer--v2 .wp-footer__title { margin-bottom: var(--wp-space-4); }
.wp-flow { margin-top: clamp(var(--wp-space-6), 3vw, var(--wp-space-7)); }
.wp-hero2__inner { padding-block: clamp(var(--wp-space-7), 5vh, var(--wp-space-9)); }
.wp-phero { min-height: clamp(420px, 60vh, 600px); }
.wp-phero__inner { padding-block: clamp(var(--wp-space-7), 6vh, var(--wp-space-9)); }
.wp-siblings { margin-top: var(--wp-space-6); padding-top: var(--wp-space-5); }
.wp-country-card__body { gap: var(--wp-space-3); }
.wp-svc { padding: var(--wp-space-5); }
.wp-why__item { padding: var(--wp-space-5); }
.wp-ops-desk { padding: var(--wp-space-5); }

/* Libellés de permanence : désormais traduits, mis en capitales par le CSS. */
.wp-ops-band__status,
.wp-ops-desk__country { text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   20. Formulaire « Demander une escale ou une assistance »
   --------------------------------------------------------------------------- */

.wp-port-other { margin-top: var(--wp-space-2); }
.wp-port-other[hidden] { display: none; }

.wp-quote-aside { position: sticky; top: calc(var(--wp-header-height-scrolled) + var(--wp-space-5)); }

.wp-quote-urgent {
    display: grid;
    gap: var(--wp-space-3);
    padding: var(--wp-space-5);
    color: var(--wp-white);
    background: var(--wp-navy-950);
    border-top: 4px solid var(--wp-orange);
    border-radius: var(--wp-radius-lg);
}

.wp-quote-urgent .wp-office__status { color: var(--wp-live); }
.wp-quote-urgent p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.72); }

.wp-quote-urgent__desk {
    display: grid;
    gap: 4px;
    padding-top: var(--wp-space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.wp-quote-urgent__country {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.wp-quote-urgent__phone {
    font-family: var(--wp-font-display);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--wp-white);
}

.wp-quote-urgent__phone:hover { color: var(--wp-orange); }

.wp-quote-urgent__wa {
    justify-self: start;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wp-live);
    border: 1px solid rgba(34, 197, 94, 0.5);
    border-radius: var(--wp-radius-full);
}

.wp-quote-next__list { display: grid; gap: var(--wp-space-3); margin-top: var(--wp-space-3); }

.wp-quote-next__list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--wp-space-3);
    font-size: 0.9rem;
    color: var(--wp-text-muted);
}

.wp-quote-next__list strong { color: var(--wp-text-strong); }

.wp-quote-next__num {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-weight: 800;
    font-size: 0.8125rem;
    color: var(--wp-navy-950);
    background: var(--wp-orange);
    border-radius: 50%;
}

@media (max-width: 1023.98px) {
    .wp-quote-aside { position: static; }
}

/* Lignes de champs alignées en haut : une aide sous un champ ne décale plus
   les champs voisins. */
.wp-field-row--top { align-items: start; }

/* ---------------------------------------------------------------------------
   21. Avis clients
   --------------------------------------------------------------------------- */

.wp-reviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--wp-space-4);
    margin-bottom: var(--wp-space-7);
}

.wp-review {
    display: grid;
    align-content: start;
    gap: var(--wp-space-3);
    margin: 0;
    padding: var(--wp-space-5);
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius-lg);
}

.wp-review__stars { font-size: 1.1rem; letter-spacing: 2px; color: var(--wp-orange); }
.wp-review__stars-off { color: var(--wp-border-strong); }
.wp-review__quote { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--wp-text-strong); }

.wp-review__author { display: grid; gap: 2px; font-size: 0.875rem; color: var(--wp-text-muted); }
.wp-review__author strong { color: var(--wp-text-strong); }
.wp-review__place { font-weight: 600; }
.wp-review__source { font-weight: 600; color: var(--wp-link); }

.wp-review-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--wp-space-6);
    padding: clamp(var(--wp-space-5), 3vw, var(--wp-space-7));
    color: var(--wp-white);
    background:
        radial-gradient(600px 200px at 100% 0%, rgba(255, 107, 0, 0.18), transparent 70%),
        var(--wp-navy-900);
    border-radius: var(--wp-radius-xl);
}

.wp-review-cta__stars { font-size: 1.25rem; letter-spacing: 3px; color: var(--wp-orange); }

.wp-review-cta__title {
    margin: var(--wp-space-2) 0;
    font-family: var(--wp-font-display);
    font-size: var(--wp-text-xl);
    font-weight: 800;
    color: var(--wp-white);
}

.wp-review-cta p { color: rgba(255, 255, 255, 0.75); }

.wp-review-cta__actions { display: grid; gap: var(--wp-space-3); justify-items: stretch; }
.wp-review-cta .wp-btn { white-space: normal; text-align: center; }
.wp-review-cta .wp-btn--on-dark { --wp-btn-ghost-fg: var(--wp-white); }

@media (max-width: 1023.98px) {
    .wp-review-cta { grid-template-columns: minmax(0, 1fr); }
}

/* Champs date + heure : jamais plus larges que leur colonne (Chrome leur
   donne une largeur minimale propre qui débordait sur le champ voisin). */
.wp-input { min-width: 0; max-width: 100%; }
input[type="datetime-local"].wp-input { display: block; }