/* ==========================================================================
   MSM — feuille de style principale
   ==========================================================================

   Organisation du fichier (chercher les titres « ---- » pour naviguer):

     1.  Variables de couleur   — la palette, claire et sombre
     2.  Base                   — remise à zéro, typographie de fond
     3.  Mise en page           — conteneurs et sections
     4.  Titres et textes
     5.  Boutons et liens
     6.  Icônes
     7.  En-tête et navigation
     8.  Pied de page
     9.  Bannière d'accueil
     10. Bandeaux (chiffres, partenaires)
     11. Cartes
     12. Blocs de page
     13. Formulaires
     14. Bandeau témoins (cookies)
     15. Animations
     16. Utilitaires

   Règles de nommage: les classes décrivent le rôle de l'élément
   (.site-header, .card, .btn), jamais son apparence. Une variante s'écrit avec
   deux tirets: .btn--gold, .section--warm.

   Les couleurs ne sont jamais écrites en dur dans les composants: elles
   passent toujours par une variable de la section 1, ce qui permet au thème
   sombre de fonctionner sans dupliquer une seule règle.
   ========================================================================== */

@import url("fonts.css");

/* ----------------------------------------------------------------------
   1. Variables de couleur
   ----------------------------------------------------------------------

   Deux familles:
     - les couleurs de marque (navy, or) qui ne changent jamais, car elles
       habillent les fonds vidéo et les dégradés, sombres par conception;
     - les couleurs d'interface (fond, texte, bordure, carte…) qui basculent
       avec le thème.

   Pour modifier la charte, ne changer que les valeurs ci-dessous.
   -------------------------------------------------------------------- */

:root {
    color-scheme: light;

    --msm-navy: #0c1222;
    --msm-navy-light: #1a2332;
    --msm-gold: #c9952e;
    --msm-gold-light: #e8c56d;

    --background: #f5f3ef;
    --foreground: #0c1222;
    /* Titres et textes à fort contraste. */
    --heading: #0c1222;
    --muted: #5c6578;
    --border: #ddd8cf;
    /* Bande de section alternée, un cran à côté du fond de page. */
    --warm: #f0ece4;
    /* Surfaces en relief: cartes, menus déroulants, champs. */
    --card: #ffffff;
    /* Bandes sombres pleine largeur: pied de page, appel à l'action. */
    --panel: #0c1222;
    --panel-light: #1a2332;
    /* Boutons pleins à fort contraste. S'inversent en thème sombre. */
    --solid: #0c1222;
    --solid-hover: #1a2332;
    --solid-fg: #ffffff;
    /* Quadrillage « plan technique » derrière le schéma de la suite. */
    --grid-line: rgb(12 18 34 / 0.03);

    /* Rayons et ombres */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Largeur maximale du contenu, reprise par tous les conteneurs. */
    --content-width: 72rem;

    --font-sans: "Source Sans 3", system-ui, -apple-system, sans-serif;
    --font-display: "Instrument Serif", Georgia, serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

[data-theme="dark"] {
    color-scheme: dark;

    /* L'or est légèrement éclairci pour garder son contraste sur fond sombre. */
    --msm-gold: #dcaa45;
    --msm-gold-light: #f0d290;

    --background: #0f1419;
    --foreground: #c5cbd3;
    --heading: #f1f3f5;
    --muted: #99a2ad;
    --border: #2a3037;
    --warm: #11161a;
    --card: #1a2026;
    --panel: #161b20;
    --panel-light: #222a31;
    --solid: #e9e6e0;
    --solid-hover: #ffffff;
    --solid-fg: #0f1419;
    --grid-line: rgb(255 255 255 / 0.035);
}

/* ----------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

/* Toute règle `display: flex|grid` écrase le comportement natif de [hidden].
   Sans cette ligne, un élément masqué par JavaScript resterait visible. */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    /* L'en-tête fixe ne doit pas recouvrir la cible d'une ancre. */
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
    padding: 0;
}

::selection {
    background: color-mix(in srgb, var(--msm-gold) 30%, transparent);
}

:focus-visible {
    outline: 2px solid var(--msm-gold);
    outline-offset: 3px;
}

/* ----------------------------------------------------------------------
   3. Mise en page
   -------------------------------------------------------------------- */

/* Centre le contenu et applique les marges latérales. À utiliser dans
   chaque section. */
.container {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: 1rem;
}

.section {
    padding-block: 4rem;
}

/* Bande légèrement teintée, pour alterner avec le fond de page. */
.section--warm {
    background: var(--warm);
    border-block: 1px solid var(--border);
}

/* Bande sombre pleine largeur. */
.section--panel {
    background: var(--panel);
    color: #fff;
}

.section--card {
    background: var(--card);
    border-block: 1px solid var(--border);
}

.section--tight {
    padding-block: 0 4rem;
}

.stack > * + * {
    margin-top: var(--stack-gap, 1rem);
}

@media (min-width: 640px) {
    .container {
        padding-inline: 1.5rem;
    }

    .section {
        padding-block: 5rem;
    }

    .section--tight {
        padding-block: 0 5rem;
    }
}

/* ----------------------------------------------------------------------
   4. Titres et textes
   -------------------------------------------------------------------- */

.font-display {
    font-family: var(--font-display);
    font-weight: 400;
}

.font-product {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* Titre de section, le plus courant du site. */
.section-title {
    font-family: var(--font-display);
    font-size: 1.875rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--heading);
}

.section--panel .section-title {
    color: #fff;
}

.section-lead {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted);
}

.section--panel .section-lead {
    color: rgb(255 255 255 / 0.65);
}

/* Surtitre dorén précédé du faucon. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--msm-gold);
}

.eyebrow__mark {
    height: 1.75rem;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.9;
}

/* Surtitre simple, sans le faucon. */
.eyebrow--plain {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

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

.text-gold {
    color: var(--msm-gold);
}

@media (min-width: 640px) {
    .section-title {
        font-size: 2.25rem;
    }

    .section-lead {
        font-size: 1rem;
    }
}

/* ----------------------------------------------------------------------
   5. Boutons et liens
   -------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius-md);
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}

/* Bouton principal doré, sur fond sombre. */
.btn--gold {
    background: var(--msm-gold);
    color: var(--msm-navy);
}

.btn--gold:hover {
    background: var(--msm-gold-light);
}

/* Bouton secondaire, contour clair sur fond sombre. */
.btn--outline-light {
    border: 1px solid rgb(255 255 255 / 0.25);
    color: #fff;
    font-weight: 500;
}

.btn--outline-light:hover {
    border-color: rgb(255 255 255 / 0.4);
    background: rgb(255 255 255 / 0.05);
}

/* Bouton contour doré, sur fond sombre (bannière d'accueil). */
.btn--outline-gold {
    border: 1px solid color-mix(in srgb, var(--msm-gold) 40%, transparent);
    color: var(--msm-gold);
    font-weight: 500;
    padding: 0.625rem 1.25rem;
}

.btn--outline-gold:hover {
    border-color: color-mix(in srgb, var(--msm-gold) 60%, transparent);
    background: color-mix(in srgb, var(--msm-gold) 10%, transparent);
}

/* Bouton plein à fort contraste, sur fond clair (formulaires). */
.btn--solid {
    background: var(--solid);
    color: var(--solid-fg);
    font-weight: 500;
}

.btn--solid:hover {
    background: var(--solid-hover);
}

.btn--solid:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.btn--quiet {
    color: rgb(255 255 255 / 0.7);
    font-weight: 500;
    padding: 0.625rem 1.25rem;
}

.btn--quiet:hover {
    color: #fff;
}

/* Rangée de boutons. Empilés sur mobile, côte à côte ensuite. */
.button-row {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.button-row--center {
    align-items: center;
}

@media (min-width: 640px) {
    .button-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .button-row--center {
        justify-content: center;
    }
}

/* Lien « en savoir plus », doré avec une flèche. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--msm-gold);
    transition: color 0.2s;
}

.link-arrow:hover {
    color: var(--heading);
}

.link-arrow .icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* ----------------------------------------------------------------------
   6. Icônes
   -------------------------------------------------------------------- */

/* Taille par défaut de toutes les icônes SVG (cf. partials/icons.php). */
.icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.icon-sm {
    width: 0.875rem;
    height: 0.875rem;
}

.icon-lg {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-xl {
    width: 2rem;
    height: 2rem;
}

/* ----------------------------------------------------------------------
   7. En-tête et navigation
   ----------------------------------------------------------------------

   L'en-tête est transparent au-dessus de la bannière, puis devient un
   bandeau navy fixe dès que la page défile (classe .is-affixed posée par
   assets/js/main.js).
   -------------------------------------------------------------------- */

.site-header {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 50;
    background: transparent;
    transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.site-header.is-affixed {
    position: fixed;
    background: var(--msm-navy);
    padding-block: 0.25rem;
    box-shadow: var(--shadow-md);
}

.site-header__bar {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 0.5rem 1rem;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding-block: 0.25rem;
    transition: opacity 0.2s;
}

.site-logo:hover {
    opacity: 0.9;
}

.site-logo img {
    max-height: 2.25rem;
    width: auto;
    object-fit: contain;
    object-position: left;
}

/* --- Navigation principale (bureau) --- */

.main-nav {
    display: none;
    align-items: center;
    gap: 0.125rem;
}

.main-nav__link {
    position: relative;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgb(255 255 255 / 0.9);
    transition: background-color 0.2s, color 0.2s;
}

.main-nav__link:hover {
    background: rgb(255 255 255 / 0.1);
    color: #fff;
}

/* Soulignement de la page courante. */
.main-nav__link.is-active {
    color: #fff;
}

.main-nav__link.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    bottom: 0.375rem;
    height: 1px;
    background: #fff;
}

/* --- Menu déroulant « Solutions » --- */

.nav-dropdown {
    position: relative;
}

/* Même soulignement que les autres entrées, y compris sur les pages filles. */
.nav-dropdown__trigger.is-active {
    color: #fff;
}

.nav-dropdown__trigger.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    bottom: 0.375rem;
    height: 1px;
    background: #fff;
}

.nav-dropdown__item.is-active {
    background: color-mix(in srgb, var(--msm-gold) 10%, transparent);
}

.nav-dropdown__item.is-active .nav-dropdown__label {
    color: var(--msm-gold);
}

.nav-dropdown__trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgb(255 255 255 / 0.9);
    transition: background-color 0.2s, color 0.2s;
}

.nav-dropdown__trigger:hover {
    background: rgb(255 255 255 / 0.1);
    color: #fff;
}

.nav-dropdown__trigger .icon {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.6;
}

.nav-dropdown__panel {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 50;
    width: 18rem;
    padding-top: 0.5rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}

/* Ouverture au survol et au focus clavier. */
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel {
    visibility: visible;
    opacity: 1;
}

.nav-dropdown__inner {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    padding: 0.5rem;
    box-shadow: var(--shadow-lg);
}

.nav-dropdown__item {
    display: block;
    border-radius: var(--radius-md);
    padding: 0.625rem 0.75rem;
    transition: background-color 0.2s;
}

.nav-dropdown__item:hover {
    background: color-mix(in srgb, var(--heading) 5%, transparent);
}

.nav-dropdown__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--heading);
}

.nav-dropdown__description {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--muted);
}

/* --- Actions de droite (téléphone, espace client, thème) --- */

.header-actions {
    display: none;
    align-items: center;
    gap: 0.75rem;
}

.header-phone {
    display: none;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.7);
    transition: color 0.2s;
}

.header-phone:hover {
    color: #fff;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgb(255 255 255 / 0.25);
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(255 255 255 / 0.85);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.header-btn:hover {
    border-color: rgb(255 255 255 / 0.4);
    background: rgb(255 255 255 / 0.05);
    color: #fff;
}

.header-btn--gold {
    border-color: color-mix(in srgb, var(--msm-gold) 45%, transparent);
    background: color-mix(in srgb, var(--msm-gold) 10%, transparent);
    color: #fff;
}

.header-btn--gold:hover {
    border-color: color-mix(in srgb, var(--msm-gold) 70%, transparent);
    background: color-mix(in srgb, var(--msm-gold) 20%, transparent);
}

.header-btn--gold.is-active {
    border-color: color-mix(in srgb, var(--msm-gold) 70%, transparent);
    background: color-mix(in srgb, var(--msm-gold) 25%, transparent);
}

/* Bouton de bascule clair/sombre. */
.theme-toggle {
    display: inline-flex;
    border-radius: var(--radius-sm);
    border: 1px solid rgb(255 255 255 / 0.25);
    padding: 0.5rem;
    color: rgb(255 255 255 / 0.85);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.theme-toggle:hover {
    border-color: rgb(255 255 255 / 0.4);
    background: rgb(255 255 255 / 0.05);
    color: #fff;
}

/* Une seule des deux icônes est visible, selon le thème actif. */
.theme-toggle__sun {
    display: none;
}

[data-theme="dark"] .theme-toggle__sun {
    display: block;
}

[data-theme="dark"] .theme-toggle__moon {
    display: none;
}

/* --- Barre mobile et tiroir --- */

.header-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.burger {
    border-radius: var(--radius-sm);
    border: 1px solid rgb(255 255 255 / 0.5);
    padding: 0.5rem;
    color: #fff;
    transition: background-color 0.2s, border-color 0.2s;
}

.burger:hover {
    border-color: rgb(255 255 255 / 0.8);
    background: rgb(255 255 255 / 0.1);
}

.burger__close {
    display: none;
}

.burger.is-open .burger__close {
    display: block;
}

.burger.is-open .burger__open {
    display: none;
}

.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #0f1419;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    overflow-y: auto;
    padding: 5rem 0 2rem;
}

.mobile-drawer.is-open {
    transform: translateX(0);
}

.mobile-drawer__link {
    display: block;
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
    padding: 1rem 1.75rem;
    font-size: 1.0625rem;
    font-weight: 500;
    color: #fff;
    transition: background-color 0.2s;
}

.mobile-drawer__link:hover {
    background: rgb(255 255 255 / 0.04);
}

.mobile-drawer__link.is-active {
    color: var(--msm-gold);
}

.mobile-drawer__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
    padding: 1rem 1.75rem;
    text-align: left;
    font-size: 1.0625rem;
    font-weight: 500;
    color: #fff;
}

.mobile-drawer__toggle .icon {
    transition: transform 0.2s;
}

.mobile-drawer__toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

.mobile-drawer__submenu {
    display: none;
    background: rgb(255 255 255 / 0.03);
}

.mobile-drawer__submenu.is-open {
    display: block;
}

.mobile-drawer__subitem {
    display: block;
    border-bottom: 1px solid rgb(255 255 255 / 0.04);
    padding: 0.75rem 1.75rem 0.75rem 2.75rem;
    transition: background-color 0.2s;
}

.mobile-drawer__subitem:hover {
    background: rgb(255 255 255 / 0.04);
}

.mobile-drawer__subitem strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
}

.mobile-drawer__subitem span {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: rgb(255 255 255 / 0.45);
}

.mobile-drawer__actions {
    margin-top: 1rem;
    padding-inline: 1.5rem;
    display: grid;
    gap: 0.75rem;
}

.mobile-drawer__actions .header-btn,
.mobile-drawer__actions .header-phone {
    display: flex;
    justify-content: center;
    padding-block: 0.75rem;
}

/* Empêche le défilement de la page quand le tiroir est ouvert. */
body.is-locked {
    overflow: hidden;
}

@media (min-width: 640px) {
    .site-header__bar {
        padding-inline: 1.5rem;
    }

    .site-logo img {
        max-height: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .main-nav,
    .header-actions {
        display: flex;
    }

    .header-mobile,
    .mobile-drawer {
        display: none;
    }
}

@media (min-width: 1280px) {
    .header-phone {
        display: flex;
    }
}

/* ----------------------------------------------------------------------
   8. Pied de page
   -------------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--panel);
    color: #fff;
}

.site-footer__inner {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 3rem 1rem;
}

.site-footer__grid {
    display: grid;
    gap: 2.5rem;
}

.site-footer__logo img {
    max-height: 2.75rem;
    width: auto;
    object-fit: contain;
    object-position: left;
}

.site-footer__tagline {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgb(255 255 255 / 0.7);
}

.site-footer__heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--msm-gold);
}

.site-footer__list {
    margin-top: 1rem;
    display: grid;
    gap: 0.5rem;
}

.site-footer__list a,
.site-footer address a {
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.7);
    transition: color 0.2s;
}

.site-footer__list a:hover,
.site-footer address a:hover {
    color: #fff;
}

.site-footer address {
    margin-top: 1rem;
    display: grid;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-style: normal;
    color: rgb(255 255 255 / 0.7);
}

.site-footer__bottom {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    padding-top: 2rem;
}

.site-footer__copyright {
    font-size: 0.75rem;
    color: rgb(255 255 255 / 0.5);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.site-footer__legal a {
    font-size: 0.75rem;
    color: rgb(255 255 255 / 0.5);
    transition: color 0.2s;
}

.site-footer__legal a:hover {
    color: rgb(255 255 255 / 0.8);
}

@media (min-width: 640px) {
    .site-footer__inner {
        padding-inline: 1.5rem;
    }

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

    .site-footer__bottom {
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ----------------------------------------------------------------------
   9. Bannière d'accueil
   -------------------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background: var(--msm-navy);
}

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

/* Voile dégradé: sombre à gauche pour la lisibilité du texte, transparent à
   droite pour laisser voir la vidéo. */
.hero__scrim {
    position: absolute;
    inset: 0;
}

.hero__scrim--main {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--msm-navy) 95%, transparent) 0%,
        color-mix(in srgb, var(--msm-navy) 70%, transparent) 40%,
        color-mix(in srgb, var(--msm-navy) 20%, transparent) 100%
    );
}

.hero__scrim--vertical {
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--msm-navy) 50%, transparent),
        transparent,
        color-mix(in srgb, var(--msm-navy) 30%, transparent)
    );
}

.hero__scrim--glow {
    background: radial-gradient(ellipse at 80% 20%, rgb(201 149 46 / 0.1) 0%, transparent 55%);
}

.hero__scrim--mark {
    background: radial-gradient(ellipse at 58% 50%, rgb(12 18 34 / 0.55) 0%, transparent 55%);
}

.hero__watermark {
    position: absolute;
    right: 4rem;
    top: 50%;
    height: min(50vw, 300px);
    width: auto;
    transform: translateY(-50%);
    opacity: 0.18;
    filter: drop-shadow(0 0 40px rgb(12 18 34 / 0.7));
    pointer-events: none;
    user-select: none;
}

.hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 6rem 1rem;
}

.hero__content {
    max-width: 42rem;
}

.hero__kicker {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--msm-gold);
}

.hero__title {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
}

.hero__title em {
    font-style: normal;
    color: var(--msm-gold);
}

.hero__lead {
    margin-top: 1.5rem;
    max-width: 32rem;
    font-size: 1rem;
    line-height: 1.7;
    color: rgb(255 255 255 / 0.75);
}

.hero__actions {
    margin-top: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero__facts {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    padding-top: 2rem;
}

.hero__fact {
    display: inline-flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.5);
}

.hero__fact strong {
    font-weight: 600;
    color: var(--msm-gold);
}

.hero__fact strong.is-plain {
    color: rgb(255 255 255 / 0.8);
}

.hero__separator {
    display: none;
    width: 1px;
    height: 1rem;
    background: rgb(255 255 255 / 0.2);
}

@media (min-width: 640px) {
    .hero__inner {
        padding: 7rem 1.5rem;
    }

    .hero__title {
        font-size: 3rem;
    }

    .hero__lead {
        font-size: 1.125rem;
    }

    .hero__actions {
        flex-direction: row;
        align-items: center;
    }

    .hero__separator {
        display: block;
    }

    .hero__watermark {
        right: 6rem;
    }
}

@media (min-width: 1024px) {
    .hero__title {
        font-size: 3.5rem;
    }

    .hero__watermark {
        right: 9rem;
        opacity: 0.22;
    }
}

/* ----------------------------------------------------------------------
   10. Bandeaux (chiffres, partenaires)
   -------------------------------------------------------------------- */

.stats {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}

.stats__inner {
    position: relative;
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 3rem 1rem;
}

.stats__grid {
    display: grid;
    gap: 2rem;
}

.stats__value {
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--msm-gold);
}

.stats__label {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

.stats__detail {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgb(255 255 255 / 0.5);
}

@media (min-width: 640px) {
    .stats__inner {
        padding: 3.5rem 1.5rem;
    }

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

    .stats__value {
        font-size: 3rem;
    }

    /* Filet de séparation entre les colonnes. */
    .stats__item + .stats__item {
        border-left: 1px solid rgb(255 255 255 / 0.1);
        padding-left: 2rem;
    }
}

@media (min-width: 1024px) {
    .stats__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .stats__item + .stats__item {
        padding-left: 1.5rem;
    }
}

/* --- Bandeau partenaires --- */

.partners {
    border-bottom: 1px solid var(--border);
    background: var(--warm);
}

.partners__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: var(--content-width);
    margin-inline: auto;
    padding: 2rem 1rem;
}

.partners__list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.5rem;
}

.partners__name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--heading);
}

@media (min-width: 640px) {
    .partners__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2.5rem;
        padding: 2.5rem 1.5rem;
    }

    .partners__list {
        justify-content: flex-end;
    }

    .partners__item + .partners__item {
        border-left: 1px solid var(--border);
        padding-left: 2.5rem;
    }

    .partners__name {
        font-size: 1.5rem;
    }
}

/* ----------------------------------------------------------------------
   11. Cartes
   -------------------------------------------------------------------- */

.card-grid {
    margin-top: 3rem;
    display: grid;
    gap: 1.5rem;
}

.card-grid--2 {
    grid-template-columns: 1fr;
}

.card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    padding: 1.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.card:hover {
    border-color: color-mix(in srgb, var(--msm-gold) 30%, transparent);
    box-shadow: var(--shadow-md);
}

/* Grand numéro décoratif des cartes « Pourquoi MSM ». */
.card__number {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    color: color-mix(in srgb, var(--msm-gold) 20%, transparent);
    transition: color 0.2s;
}

.card:hover .card__number {
    color: color-mix(in srgb, var(--msm-gold) 30%, transparent);
}

.card__title {
    margin-top: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading);
}

.card__text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted);
}

/* --- Cartes « solutions », avec image de fond --- */

.solution-grid {
    margin-top: 3rem;
    display: grid;
    gap: 1.25rem;
}

.solution-card {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    min-height: 17.5rem;
}

.solution-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}

.solution-card:hover .solution-card__image {
    transform: scale(1.03);
}

.solution-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--msm-navy),
        color-mix(in srgb, var(--msm-navy) 55%, transparent),
        color-mix(in srgb, var(--msm-navy) 15%, transparent)
    );
}

.solution-card__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
}

.solution-card__body .icon-xl {
    color: var(--msm-gold);
}

.solution-card__title {
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}

.solution-card__text {
    margin-top: 0.5rem;
    max-width: 28rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgb(255 255 255 / 0.75);
}

.solution-card__more {
    margin-top: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--msm-gold);
}

.solution-card:hover .solution-card__more .icon {
    transform: translateX(2px);
}

.solution-card__more .icon {
    transition: transform 0.2s;
}

/* Variante compacte: image à gauche, dégradé horizontal. */
.solution-card--compact {
    min-height: 7.5rem;
    border-radius: var(--radius-lg);
}

.solution-card--compact .solution-card__scrim {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--msm-navy) 90%, transparent),
        color-mix(in srgb, var(--msm-navy) 75%, transparent),
        color-mix(in srgb, var(--msm-navy) 35%, transparent)
    );
}

.solution-card--compact .solution-card__body {
    justify-content: center;
    padding: 1.25rem;
}

.solution-card--compact .solution-card__title {
    margin-top: 0.5rem;
    font-size: 1rem;
}

.solution-card--compact .solution-card__text {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    /* Deux lignes maximum, le reste est coupé. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgb(255 255 255 / 0.65);
}

.solution-card__secondary {
    display: grid;
    gap: 1.25rem;
}

/* En-tête de section avec un lien aligné à droite. */
.section-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-head__text {
    max-width: 36rem;
}

/* --- Encart « secteurs desservis » --- */

.tag-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--panel);
    padding: 2rem;
}

.tag-panel__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.tag-panel__title {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: #fff;
}

.tag-panel__text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.6);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    border: 1px solid rgb(255 255 255 / 0.15);
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.05);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(255 255 255 / 0.8);
}

@media (min-width: 640px) {
    .card-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solution-card {
        min-height: 20rem;
    }

    .solution-card--compact {
        min-height: 6.875rem;
    }

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

    .section-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .tag-panel {
        padding: 2.5rem;
    }

    .tag-panel__title {
        font-size: 1.875rem;
    }
}

@media (min-width: 1024px) {
    .solution-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .solution-card--featured {
        grid-column: span 7;
        height: 100%;
    }

    .solution-card__secondary {
        grid-column: span 5;
        grid-template-columns: 1fr;
    }

    .solution-card--compact {
        min-height: 6.75rem;
    }

    .tag-panel__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .tag-list {
        max-width: 28rem;
        justify-content: flex-end;
    }
}

/* --- Régions: carrousel horizontal --- */

.region-scroller {
    margin-top: 2.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    /* Barre de défilement masquée: le geste reste possible, le visuel est propre. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.region-scroller::-webkit-scrollbar {
    display: none;
}

.region-scroller__track {
    display: flex;
    width: max-content;
    gap: 1rem;
    padding-inline: 1rem;
}

.region-card {
    position: relative;
    width: 13.75rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 1;
}

.region-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.region-card:hover img {
    transform: scale(1.04);
}

.region-card figcaption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--msm-navy) 85%, transparent),
        color-mix(in srgb, var(--msm-navy) 20%, transparent),
        transparent
    );
}

/* --- Secteurs: grille de cartes illustrées --- */

.sector-grid {
    margin-top: 3rem;
    display: grid;
    gap: 1.25rem;
}

.sector-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sector-card:hover {
    border-color: color-mix(in srgb, var(--msm-gold) 35%, transparent);
    box-shadow: var(--shadow-md);
}

.sector-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    /* Filet doré en bas de l'image. */
    border-bottom: 4px solid var(--msm-gold);
}

.sector-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.sector-card:hover .sector-card__media img {
    transform: scale(1.03);
}

.sector-card__body {
    padding: 1.25rem;
}

/* --- Schéma de la suite (MSM-CENTRAL et ses modules) --- */

.product-hub {
    position: relative;
    overflow: hidden;
}

/* Quadrillage « plan technique » en fond. */
.product-hub__grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
}

.product-hub__layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.product-hub__intro {
    max-width: 28rem;
}

.product-hub__diagram {
    position: relative;
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
}

.product-hub__circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

.product-hub__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: color-mix(in srgb, var(--msm-gold) 25%, transparent);
}

.hub-core {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    border: 2px solid var(--msm-gold);
    border-radius: 50%;
    background: var(--panel);
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s;
}

.hub-core:hover {
    transform: scale(1.03);
}

.hub-core__label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--msm-gold);
}

.hub-core__name {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.hub-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

/* Satellites: centrés sur leur point d'orbite. */
.hub-node {
    position: absolute;
    z-index: 10;
    transform: translate(-50%, -50%);
}

.hub-node__box {
    display: flex;
    max-width: 5.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    padding: 0.5rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--heading);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hub-node:hover .hub-node__box {
    border-color: color-mix(in srgb, var(--msm-gold) 50%, transparent);
    box-shadow: var(--shadow-md);
}

@media (min-width: 640px) {
    .region-scroller__track {
        padding-inline: 1.5rem;
    }

    .region-card {
        width: 15rem;
    }

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

    .hub-core {
        width: 8rem;
        height: 8rem;
    }

    .hub-core__label {
        font-size: 0.75rem;
    }

    .hub-core__name {
        font-size: 0.875rem;
    }

    .hub-node__box {
        max-width: 6rem;
        padding: 0.625rem;
        font-size: 0.625rem;
    }
}

@media (min-width: 1024px) {
    .sector-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-hub__layout {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .product-hub__intro {
        padding-top: 1rem;
    }

    .product-hub__diagram {
        margin-inline: 0;
        max-width: 32rem;
    }

    .region-scroller__track {
        max-width: var(--content-width);
        margin-inline: auto;
    }
}

/* --- Partenaires, version détaillée --- */

.partners__featured {
    margin-top: 3rem;
    display: grid;
    gap: 2rem;
}

.partners__featured-item {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
}

@media (min-width: 640px) {
    .partners__featured {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem;
    }
}

/* --- Appel à l'action --- */

.cta-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 24rem;
    width: auto;
    transform: translate(-50%, -50%);
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
}

.cta-actions {
    margin-top: 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .cta-actions {
        flex-direction: row;
    }
}

/* ----------------------------------------------------------------------
   12. Blocs de page
   ----------------------------------------------------------------------

   Les motifs qui reviennent d'une page à l'autre: bandeau de titre, bloc
   image + texte, listes cochées, grilles de cartes à icône, texte long,
   puis les blocs propres à une famille de pages.
   -------------------------------------------------------------------- */

/* --- Bandeau de titre des pages intérieures --- */

.page-header {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--msm-navy-light);
    background: var(--msm-navy);
}

.page-header__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.page-header__scrim {
    position: absolute;
    inset: 0;
}

.page-header__scrim--h {
    background: linear-gradient(
        to right,
        var(--msm-navy),
        color-mix(in srgb, var(--msm-navy) 90%, transparent),
        color-mix(in srgb, var(--msm-navy) 55%, transparent)
    );
}

.page-header__scrim--v {
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--msm-navy) 70%, transparent),
        transparent,
        color-mix(in srgb, var(--msm-navy) 40%, transparent)
    );
}

.page-header__scrim--glow {
    background: radial-gradient(ellipse at 90% 0%, rgb(201 149 46 / 0.1) 0%, transparent 50%);
}

.page-header__watermark {
    position: absolute;
    right: -3rem;
    top: 50%;
    height: 16rem;
    width: auto;
    transform: translateY(-50%);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
}

.page-header__inner {
    padding-top: 6rem;
    padding-bottom: 3.5rem;
}

.page-header__title {
    margin-top: 1rem;
    max-width: 48rem;
    font-family: var(--font-display);
    font-size: 1.875rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

.page-header__text {
    margin-top: 1rem;
    max-width: 42rem;
    font-size: 1rem;
    line-height: 1.7;
    color: rgb(255 255 255 / 0.65);
}

@media (min-width: 640px) {
    .page-header__inner {
        padding-top: 7rem;
        padding-bottom: 4rem;
    }

    .page-header__title {
        font-size: 2.25rem;
    }

    .page-header__watermark {
        height: 20rem;
    }
}

@media (min-width: 1024px) {
    .page-header__inner {
        padding-top: 8rem;
        padding-bottom: 5rem;
    }

    .page-header__title {
        font-size: 2.75rem;
    }

    .page-header__watermark {
        right: -1rem;
    }
}

/* --- Bloc image + texte, alterné --- */

.image-feature {
    display: grid;
    align-items: center;
    gap: 2.5rem;
}

.image-feature__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    aspect-ratio: 4 / 5;
    /* Filet doré en pied d'image, signature visuelle du site. */
    border-bottom: 4px solid var(--msm-gold);
}

.image-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-feature--landscape .image-feature__media {
    aspect-ratio: 16 / 10;
}

.image-feature--square .image-feature__media {
    aspect-ratio: 1;
}

/* Variante « contain »: l'image est un visuel produit, pas une photo
   d'ambiance; on la pose sur une carte au lieu de la rogner. */
.image-feature--contain .image-feature__media {
    border: 1px solid var(--border);
    border-bottom-width: 4px;
    border-bottom-color: var(--msm-gold);
    background: var(--card);
}

.image-feature--contain .image-feature__media img {
    object-fit: contain;
    padding: 1rem;
}

@media (min-width: 1024px) {
    .image-feature {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .image-feature__media {
        grid-column: span 5;
    }

    .image-feature__body {
        grid-column: span 7;
    }

    /* Image à droite. */
    .image-feature--reverse .image-feature__media {
        order: 2;
    }

    .image-feature--reverse .image-feature__body {
        order: 1;
    }
}

/* --- Listes à puces cochées --- */

.check-list {
    display: grid;
    gap: 0.75rem;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted);
}

.check-list .icon {
    margin-top: 0.25rem;
    color: var(--msm-gold);
}

/* --- Grille de cartes à icône --- */

.feature-grid {
    margin-top: 3rem;
    display: grid;
    gap: 1.25rem;
}

.feature-card {
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    padding: 1.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
    border-color: color-mix(in srgb, var(--msm-gold) 30%, transparent);
    box-shadow: var(--shadow-md);
}

.feature-card .icon-lg {
    color: var(--msm-gold);
}

@media (min-width: 640px) {
    .feature-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-grid--3,
    .feature-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .feature-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

/* --- Contenu rédactionnel long (pages légales) --- */

.prose {
    max-width: 48rem;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--muted);
}

/* Titres volontairement sobres: sur une page de conditions, une longue suite
   de gros titres hache la lecture plus qu'elle ne l'aide. */
.prose h2 {
    margin-top: 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading);
}

.prose h3 {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--muted);
}

.prose p,
.prose ul {
    margin-top: 1rem;
}

.prose ul {
    display: grid;
    gap: 0.5rem;
    padding-left: 1.25rem;
    list-style: disc;
}

.prose a {
    color: var(--msm-gold);
    text-underline-offset: 2px;
}

.prose a:hover {
    text-decoration: underline;
}

.prose strong {
    color: var(--heading);
}

/* --- Catalogue — produits, tarifs, solutions --- */

/* --- Liste de produits (page Produits) ---------------------------------
   Une carte pleine largeur par module: bandeau illustré souligné d'or,
   puis le nom du module, sa promesse et sa description. */

.product-stack {
    display: grid;
    gap: 1.25rem;
}

.product-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.product-card:hover {
    border-color: color-mix(in srgb, var(--msm-gold) 30%, transparent);
    box-shadow: var(--shadow-md);
}

.product-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    /* Filet doré en pied d'image, signature visuelle du site. */
    border-bottom: 4px solid var(--msm-gold);
}

.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.product-card:hover .product-card__media img {
    transform: scale(1.03);
}

.product-card__body {
    padding: 1.5rem;
}

.product-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--heading);
}

.product-card__tagline {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--msm-gold);
}

.product-card__text {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted);
}

/* --- Formules d'abonnement (page Tarifs) -------------------------------
   Trois cartes de même hauteur; celle qui est recommandée se distingue par
   sa bordure dorée et son fond légèrement teinté. */

.pricing-grid {
    display: grid;
    gap: 1.5rem;
}

.pricing-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    padding: 1.5rem;
}

.pricing-card--highlighted {
    border-color: var(--msm-gold);
    background: color-mix(in srgb, var(--msm-gold) 5%, var(--card));
    box-shadow: var(--shadow-md);
}

.pricing-card__badge {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--msm-gold);
}

.pricing-card__name {
    margin-top: 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading);
}

.pricing-card__price {
    margin-top: 1rem;
}

.pricing-card__amount {
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--heading);
}

.pricing-card__period {
    font-size: 0.875rem;
    color: var(--muted);
}

.pricing-card__extra {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--muted);
}

/* Pousse la liste et le bouton en bas, quelle que soit la longueur du texte. */
.pricing-card__ideal {
    margin-top: 1rem;
    flex: 1;
    font-size: 0.875rem;
    color: var(--muted);
}

.pricing-card__features {
    margin-top: 1.5rem;
    gap: 0.5rem;
}

.pricing-card__action {
    margin-top: 1.5rem;
    width: 100%;
    padding-block: 0.625rem;
}

/* --- Encart d'information (page Tarifs) --------------------------------
   Carte sobre, sans survol, pour un rappel de ce qui est toujours compris. */

.info-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    padding: 1.5rem;
}

.info-panel__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--heading);
}

.info-panel__note {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.info-panel__note a {
    font-weight: 500;
    color: var(--msm-gold);
    text-underline-offset: 2px;
}

.info-panel__note a:hover {
    text-decoration: underline;
}

/* Liste cochée sur deux colonnes (voir .check-list). */
.check-list--2 {
    grid-template-columns: 1fr;
}

/* --- Solutions en rangée (page Solutions) ------------------------------
   Vignette à gauche, texte et lien « En savoir plus » à droite. */

.solution-list {
    display: grid;
    gap: 1.5rem;
}

.solution-row {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.solution-row:hover {
    border-color: color-mix(in srgb, var(--msm-gold) 40%, transparent);
    box-shadow: var(--shadow-md);
}

.solution-row__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-bottom: 4px solid var(--msm-gold);
}

.solution-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.solution-row:hover .solution-row__media img {
    transform: scale(1.03);
}

.solution-row__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
}

.solution-row__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading);
}

.solution-row__text {
    margin-top: 0.5rem;
    max-width: 42rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted);
}

.solution-row .link-arrow .icon {
    transition: transform 0.2s;
}

.solution-row:hover .link-arrow .icon {
    transform: translateX(2px);
}

@media (min-width: 640px) {
    .product-card__media {
        aspect-ratio: 21 / 9;
    }

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

    .info-panel {
        padding: 2rem;
    }

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

    /* Le filet doré passe de dessous l'image à son bord gauche. */
    .solution-row {
        grid-template-columns: 12.5rem minmax(0, 1fr);
    }

    .solution-row__media {
        aspect-ratio: auto;
        min-height: 8.75rem;
        border-bottom: 0;
        border-left: 4px solid var(--msm-gold);
    }

    .solution-row__body {
        flex-direction: row;
        align-items: center;
    }
}

/* --- Pages solution --- */

/* --- Étiquette sur fond clair -------------------------------------------
   Variante de .tag pour une carte claire: le contour blanc de la version
   posée sur fond sombre y serait invisible. */

.tag--soft {
    border-color: color-mix(in srgb, var(--heading) 12%, transparent);
    background: color-mix(in srgb, var(--heading) 5%, transparent);
    color: var(--heading);
}

/* --- Questions fréquentes -----------------------------------------------
   Liste de définitions: une question, sa réponse, un filet de séparation.
   Volontairement non interactive, il n'y a donc aucun script associé. */

.faq-list {
    margin-top: 2rem;
    display: grid;
    gap: 1.5rem;
}

.faq-list__item {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.5rem;
}

.faq-list__question {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--heading);
}

.faq-list__answer {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted);
}

/* --- Bloc de détail titré ------------------------------------------------
   Petit titre doré suivi d'un paragraphe, empilés à côté d'une image. */

.detail-block + .detail-block {
    margin-top: 1.25rem;
}

.detail-block__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--msm-gold);
}

.detail-block__text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted);
}

/* --- Liste « mot-clé + explication » -------------------------------------
   Le mot-clé doré reste sur la même ligne que son explication. */

.label-list {
    display: grid;
    gap: 0.5rem;
}

.label-list li {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted);
}

.label-list__key {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--msm-gold);
}

/* --- Page agroalimentaire --- */

/* --- Citation client encadrée --- */

.quote-panel {
    border: 1px solid color-mix(in srgb, var(--msm-gold) 30%, transparent);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--msm-gold) 5%, transparent);
    padding: 1.5rem;
}

.quote-panel .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--msm-gold);
}

.quote-panel__text {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--heading);
}

.quote-panel__author {
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
}

@media (min-width: 640px) {
    .quote-panel {
        padding: 2rem;
    }

    .quote-panel__text {
        font-size: 1.125rem;
    }
}

/* --- Titres à l'intérieur d'un bloc image + texte --- */
/* Plus discrets que .section-title: le bloc est déjà dans une section. */

.image-feature__title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--heading);
}

.image-feature__subtitle {
    margin-top: 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--heading);
}

/* --- Cartes secteur, variante visuel produit --- */
/* Une photo d'ambiance se rogne; un équipement doit rester entier. */

.sector-card--contain .sector-card__media {
    background: color-mix(in srgb, var(--heading) 5%, transparent);
}

.sector-card--contain .sector-card__media img {
    object-fit: contain;
    padding: 1rem;
}

.sector-card--contain:hover .sector-card__media img {
    transform: none;
}

/* --- Liste cochée en cases, sur deux colonnes --- */

.check-grid {
    display: grid;
    gap: 0.75rem;
}

.check-grid li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted);
}

.check-grid .icon {
    margin-top: 0.25rem;
    color: var(--msm-gold);
}

/* Variante posée sur une bande déjà blanche (.section--card). */
.check-grid--warm li {
    background: var(--warm);
}

@media (min-width: 640px) {
    .check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Pages support, carrière, à propos --- */

/* --- Pastille ronde autour d'une icône (moyens de joindre le support) --- */

.icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-inline: auto;
    border-radius: 50%;
    background: color-mix(in srgb, var(--msm-gold) 10%, transparent);
    color: var(--msm-gold);
}

/* --- Avantages de la page Carrière ---------------------------------------
   Petites cartes à icône, sur deux colonnes dès le mobile puis quatre.
   Plus serrée que .feature-grid--4, qui empile sur une seule colonne. */

.perk-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .perk-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --- Emblème (page À propos) ---------------------------------------------
   Le texte à gauche, le faucon encadré et éclairé à droite. */

.emblem {
    display: grid;
    align-items: center;
    gap: 2.5rem;
}

/* Faucon en filigrane, débordant sur la gauche de la bande. */
.emblem__watermark {
    position: absolute;
    left: -4rem;
    top: 50%;
    height: 18rem;
    width: auto;
    transform: translateY(-50%);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
}

.emblem__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--panel);
    padding: 2.5rem;
}

/* Halo doré derrière le faucon. */
.emblem__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--msm-gold) 15%, transparent) 0%,
        transparent 70%
    );
}

.emblem__mark {
    position: relative;
    height: 12rem;
    width: auto;
    margin-inline: auto;
    object-fit: contain;
    opacity: 0.9;
}

@media (min-width: 640px) {
    .emblem__frame {
        padding: 3.5rem;
    }

    .emblem__mark {
        height: 14rem;
    }
}

@media (min-width: 1024px) {
    .emblem {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ----------------------------------------------------------------------
   13. Formulaires
   ---------------------------------------------------------------------- */

.form-grid {
    display: grid;
    gap: 1.25rem;
}

.form-row {
    display: grid;
    gap: 1.25rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--heading);
}

.form-field {
    margin-top: 0.375rem;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--card);
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-field:focus {
    outline: none;
    border-color: var(--msm-gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--msm-gold) 20%, transparent);
}

.form-note {
    font-size: 0.75rem;
    color: var(--muted);
}

/* Champ piège à robots: invisible pour les visiteurs. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-alert {
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.form-alert--error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.form-alert--success {
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-xl);
    background: #f0fdf4;
    padding: 2rem;
    text-align: center;
}

.form-alert--success h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #166534;
}

.form-alert--success p {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #15803d;
}

[data-theme="dark"] .form-alert--error {
    border-color: #7f1d1d;
    background: rgb(69 10 10 / 0.4);
    color: #fca5a5;
}

[data-theme="dark"] .form-alert--success {
    border-color: #14532d;
    background: rgb(5 46 22 / 0.4);
}

[data-theme="dark"] .form-alert--success h2 {
    color: #86efac;
}

[data-theme="dark"] .form-alert--success p {
    color: rgb(134 239 172 / 0.9);
}

@media (min-width: 640px) {
    .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Page contact: formulaire + coordonnées --- */

.contact-layout {
    display: grid;
    gap: 3rem;
}

.contact-address {
    margin-top: 1rem;
    display: grid;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-style: normal;
    color: var(--muted);
}

.contact-address a {
    color: var(--msm-gold);
}

.contact-address a:hover {
    text-decoration: underline;
}

.contact-address strong {
    font-weight: 500;
    color: var(--heading);
}

.contact-directions {
    margin-top: 1.5rem;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--msm-gold);
}

.contact-directions:hover {
    text-decoration: underline;
}

@media (min-width: 1024px) {
    .contact-layout {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .contact-layout__form {
        grid-column: span 3;
    }

    .contact-layout__aside {
        grid-column: span 2;
    }
}

/* --- Page espace client --- */

.login-panel {
    margin-inline: auto;
    max-width: 36rem;
}

/* Encadré expliquant que le portail n'est pas encore ouvert. */
.login-notice {
    display: flex;
    gap: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--msm-gold) 40%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--msm-gold) 10%, transparent);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--heading);
}

.login-notice .icon {
    margin-top: 0.125rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--msm-gold);
}

.login-notice a {
    font-weight: 500;
    color: var(--msm-gold);
}

.login-notice a:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------------------
   14. Bandeau témoins (cookies)
   ---------------------------------------------------------------------- */

.cookie-banner {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    border-top: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-lg);
}

/* Masqué tant que le script n'a pas vérifié le choix déjà enregistré. */
.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__inner {
    max-width: var(--content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.cookie-banner__text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted);
}

.cookie-banner__text a {
    font-weight: 500;
    color: var(--msm-gold);
    text-underline-offset: 2px;
}

.cookie-banner__text a:hover {
    text-decoration: underline;
}

.cookie-banner__actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.75rem;
}

.cookie-banner__actions .btn {
    padding: 0.5rem 1.25rem;
}

@media (min-width: 640px) {
    .cookie-banner__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
    }
}

/* ----------------------------------------------------------------------
   15. Animations
   ----------------------------------------------------------------------

   Tout est conditionné à prefers-reduced-motion: les visiteurs qui ont
   demandé moins d'animations voient le contenu immédiatement, sans état
   initial masqué.
   -------------------------------------------------------------------- */

/* Grain photographique, posé en surimpression sur les fonds sombres. */
.grain::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Mise en place du schéma de la suite: les traits se dessinent, le cœur
   apparaît, puis les satellites glissent en orbite. */
@keyframes hub-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes hub-core-in {
    from {
        opacity: 0;
        transform: scale(0.82);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hub-settle {
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes hub-pulse {
    from {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--msm-gold) 35%, transparent);
    }
    to {
        box-shadow: 0 0 0 18px transparent;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Entrée en cascade de la bannière, décalée par --enter-delay. */
    .hero-enter {
        opacity: 0;
        animation: rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: var(--enter-delay, 0ms);
    }

    /* Apparition au défilement: .reveal-visible est ajoutée par
       assets/js/main.js quand l'élément entre dans l'écran. */
    .reveal {
        opacity: 0;
        transform: translateY(14px);
    }

    .reveal-visible {
        opacity: 1;
        transform: none;
        transition:
            opacity 0.7s ease,
            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
    }

    /* Le schéma s'assemble quand sa section entre dans l'écran. */
    .hub-line {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }

    .reveal-visible .hub-line {
        animation: hub-draw 0.8s ease forwards;
        animation-delay: calc(250ms + var(--hub-i, 0) * 80ms);
    }

    .hub-core {
        opacity: 0;
    }

    .reveal-visible .hub-core {
        animation: hub-core-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: 100ms;
    }

    .reveal-visible .hub-ring {
        animation: hub-pulse 3.2s ease-out 1.6s infinite;
    }

    .hub-node {
        opacity: 0;
        transform: translate(calc(-50% + var(--hub-dx, 0px)), calc(-50% + var(--hub-dy, 0px)))
            scale(0.6);
    }

    .reveal-visible .hub-node {
        animation: hub-settle 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(450ms + var(--hub-i, 0) * 80ms);
    }
}

/* ----------------------------------------------------------------------
   16. Utilitaires
   ---------------------------------------------------------------------- */

/* Visible uniquement pour les lecteurs d'écran. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center {
    text-align: center;
}

.mx-auto {
    margin-inline: auto;
}

.relative {
    position: relative;
}