/* ===================================================================
   GROUPE SOLAVIH — V2 (refonte "Trust & Authority")
   Design system : jetons, typographie, composants partagés.
   =================================================================== */

:root
{
    /* Palette — charte SOLAVIH (gris, orange, blanc) posée sur un socle navy/charcoal */
    --color-primary: #0F172A;
    --color-primary-light: #1E293B;
    --color-on-primary: #FFFFFF;
    --color-secondary: #334155;
    --color-accent: #EF7618;
    --color-accent-dark: #C4600F;
    --color-accent-light: #FF8F3F;
    --color-accent-50: #FDF2E9;

    --color-background: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F1F5F9;
    --color-foreground: #020617;
    --color-text: #1E293B;
    --color-text-muted: #64748B;
    --color-text-on-dark: #F8FAFC;
    --color-text-on-dark-muted: #94A3B8;
    --color-border: #E2E8F0;
    --color-border-on-dark: rgba(248, 250, 252, 0.14);

    /* Typographie */
    --font-display: 'Bodoni Moda', Georgia, serif;
    --font-body: 'Jost', -apple-system, 'Segoe UI', sans-serif;

    /* Rayons / ombres */
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --shadow-sm: 0 2px 10px rgba(2, 6, 23, 0.06);
    --shadow-md: 0 18px 40px -16px rgba(2, 6, 23, 0.22);
    --shadow-lg: 0 32px 64px -20px rgba(2, 6, 23, 0.35);

    /* Rythme */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 14px;
    --space-4: 20px;
    --space-5: 28px;
    --space-6: 40px;
    --space-7: 56px;
    --space-8: 80px;
    --space-9: 56px;

    /* Mouvement */
    --dur-fast: 200ms;
    --dur-medium: 420ms;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    --header-height: 64px;
    --header-height-scrolled: 52px;
    --header-height-mobile: 60px;
}

/* ===================================================================
   COMMENT CHOISIR SOI-MÊME OÙ UN TITRE OU UN TEXTE PASSE À LA LIGNE
   ===================================================================
   Sur les gros titres et les textes d'intro (bandeaux en haut de page,
   bandeaux « Discutons de votre projet », etc.), le nombre de lignes
   n'est pas laissé au hasard : c'est un saut de ligne écrit à la main
   dans le fichier HTML, avec une seule classe pour ça sur tout le
   site : « saut-ligne ».

   Pour couper un titre ou un texte à un endroit précis, dans le
   fichier HTML de la page (pas ici) :

       <h1>Premier morceau<br class="saut-ligne" /> deuxième morceau</h1>

   - Le retour à la ligne apparaît à l'endroit du <br>.
   - Sur téléphone, ce retour à la ligne disparaît tout seul (chaque
     bandeau a son propre seuil, entre 720 et 1000 px de large selon
     la place disponible) : le texte revient alors à la ligne tout
     seul, là où il tient, sans jamais déborder.
   - Un seul <br class="saut-ligne" /> = deux lignes. Deux
     <br class="saut-ligne" /> dans le même texte = trois lignes.
   - Ça ne marche que si le titre ou le texte n'est pas déjà limité en
     largeur par ailleurs (ex. « max-width »). Les bandeaux du site qui
     utilisent déjà ce système (chercher leur nom de classe dans le
     fichier HTML de la page, sur la balise juste au-dessus du titre) :
     hero-nous (page « A propos »), hero-partenaires (pages
     « Partenaires » et « Partenaire commercial »), hero-services (les
     7 pages de service), section-head--wide (chapeaux de section sur
     l'accueil), cta-band--nous (bandeau du bas de « A propos »). Pour
     un titre ou un texte qui n'est pas encore dans cette liste, il n'y
     a pas encore de largeur libérée pour lui : demander l'ajout une
     fois, puis les sauts de ligne suivants sur ce même texte se
     modifient seul(e) en HTML.
   =================================================================== */

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

html { scroll-behavior: smooth; }

/* ---------- Transition douce entre les pages ----------
   Sans ceci, chaque clic de navigation recharge la page à froid :
   un instant de blanc, puis la bannière qui apparaît d'un coup. Cette
   règle (ignorée sans effet sur les navigateurs qui ne la supportent
   pas encore) fait fondre l'ancienne page dans la nouvelle.
   Nos pages n'ont pas toutes la même hauteur (l'accueil est bien plus
   long que la page Partenaires, par exemple) : par défaut, le navigateur
   étire la capture d'écran de l'ancienne page vers la taille de la
   nouvelle pendant le fondu, ce qui déforme le contenu et donne
   l'impression que tout "saute". object-fit:cover garde les proportions
   de chaque capture pendant cet étirement. L'en-tête (logo + menu) est
   lui rendu comme un élément persistant à part (voir #entete plus bas) :
   il ne fait donc plus partie de cette capture et ne bouge plus du tout
   d'une page à l'autre. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root)
{
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    object-fit: cover;
    object-position: top;
}

@media (prefers-reduced-motion: reduce)
{
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}
[id] { scroll-margin-top: calc(var(--header-height) + 20px); }

body
{
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4
{
    font-family: var(--font-display);
    color: var(--color-foreground);
    line-height: 1.15;
    font-weight: 600;
    margin: 0 0 var(--space-3);
}

h1 { font-weight: 700; }

p { margin: 0 0 var(--space-3); color: var(--color-text); }

a { color: var(--color-accent); text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible
{
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.eyebrow
{
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.eyebrow::before
{
    content: "";
    width: 28px;
    height: 1.5px;
    background: var(--color-accent);
}

.container
{
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.section { padding: var(--space-8) 0; }
.section--muted { background: var(--color-surface-muted); }
.section--dark { background: var(--color-primary); color: var(--color-text-on-dark); }
.section--dark h2, .section--dark h3 { color: var(--color-text-on-dark); }
.section--dark p { color: var(--color-text-on-dark-muted); }

/* Bloc gris « Qui peut devenir partenaire commercial ? » (Partenaire-Commercial.html) :
   moitié moins d'espace au-dessus et en dessous, et le titre se rapproche des vignettes
   en dessous — sans toucher aux autres .section--muted du site (Nous, Carrière, accueil). */
.section--compact { padding: var(--space-6) 0; }
.section--compact .section-head { margin-bottom: var(--space-5); }

.section-head { max-width: 640px; margin: 0 0 var(--space-6); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 2.4vw, 2.4rem); }
.section-head p { font-size: 1.05rem; color: var(--color-text-muted); }
.section--dark .section-head p { color: var(--color-text-on-dark-muted); }

/* Chapeau « Nos pôles de solutions » : sur ordinateur, une phrase par ligne (deux lignes
   en tout). Le titre garde sa largeur habituelle. Entre 920 et 1120 px, la taille du texte
   suit l'écran pour que chaque phrase tienne encore sur une ligne ; en dessous de 920 px,
   le saut de ligne disparaît et le texte passe à la ligne naturellement. */
.section-head--wide { max-width: 1120px; }
.section-head--wide h2 { max-width: 640px; margin-left: auto; margin-right: auto; }
.section-head--wide p:not(.eyebrow) { text-wrap: pretty; }

@media (min-width: 921px) and (max-width: 1119px)
{
    .section-head--wide p:not(.eyebrow) { font-size: max(0.92rem, 1.5vw); }
}

@media (max-width: 920px)
{
    .section-head--wide .saut-ligne { display: none; }
}

/* ---------- Boutons ---------- */

.btn
{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 13px 26px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn::after
{
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: calc(var(--radius-sm) + 4px);
    padding: 1.5px;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent), var(--color-accent-dark));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--dur-medium) var(--ease);
    pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn--primary::after { background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.15)); }

/* Bordure fine, lumineuse et en rotation continue autour du bouton, comme autour des
   liens du menu (même dégradé conique, même animation) : visible au survol et au clavier. */
.btn--orbit::after
{
    inset: -3px;
    padding: 1.4px;
    border-radius: calc(var(--radius-sm) + 3px);
    background: conic-gradient(from var(--angle), transparent 0%, var(--orbit-color, var(--color-accent)) 12%, transparent 26%, transparent 100%);
    animation: offerBadgeSpin 3.6s linear infinite;
}
.btn--orbit:hover::after,
.btn--orbit:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce)
{
    .btn--orbit::after { animation: none; }
}

.btn--primary { background: var(--color-accent); color: #FFFFFF; }
.btn--primary:hover { background: var(--color-accent-light); }

/* Bouton WhatsApp : vert officiel de la marque (#25D366) et son logo ; l'anneau animé
   (voir .btn--orbit) prend la même teinte. */
.btn--whatsapp { --orbit-color: #1FA855; background: #1FA855; color: #FFFFFF; }
.btn--whatsapp:hover { background: #2BBE63; }
.btn-icon { flex: none; width: 20px; height: 20px; }

.btn--ghost-dark { background: transparent; border-color: var(--color-border-on-dark); color: var(--color-text-on-dark); }
.btn--ghost-dark:hover { border-color: var(--color-text-on-dark); background: rgba(248, 250, 252, 0.06); }

.btn--outline { background: transparent; border-color: var(--color-border); color: var(--color-primary); }
.btn--outline:hover { border-color: var(--color-primary); background: var(--color-surface-muted); }

/* ---------- En-tête ---------- */

#entete
{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
    background: rgba(248, 250, 252, 0.9);
    view-transition-name: site-header;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: height var(--dur-medium) var(--ease), background-color var(--dur-medium) var(--ease), border-color var(--dur-medium) var(--ease);
}

#entete.is-scrolled
{
    height: var(--header-height-scrolled);
    background: rgba(248, 250, 252, 0.97);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.header-inner
{
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

#logo { display: flex; align-items: center; gap: var(--space-2); }
#logo img { height: 48px; width: auto; transition: height var(--dur-medium) var(--ease); }
#entete.is-scrolled #logo img { height: 40px; }
#logo .logo-word { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-primary); letter-spacing: 0.01em; }
#logo .logo-word span { color: var(--color-accent); }

.separateur { width: 100%; height: var(--header-height); }

.site-nav .menu
{
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav .menu > li { position: relative; }

.site-nav .menu > li > a
{
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-secondary);
    padding: 3.5px 17px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.site-nav .menu > li > a:hover,
.site-nav .menu > li > a.is-active
{
    color: var(--color-primary);
    background: var(--color-accent-50);
}

/* --- Bordure fine, lumineuse, en rotation continue --- */
.site-nav .menu > li > a::after
{
    content: "";
    position: absolute;
    inset: -3px;
    z-index: -1;
    border-radius: inherit;
    padding: 1.4px;
    background: conic-gradient(from var(--angle), transparent 0%, var(--color-accent) 12%, transparent 26%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: offerBadgeSpin 3.6s linear infinite;
    animation-delay: calc(var(--nav-i, 0) * -0.5s);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
}
.site-nav .menu > li:nth-child(1) > a { --nav-i: 0; }
.site-nav .menu > li:nth-child(2) > a { --nav-i: 1; }
.site-nav .menu > li:nth-child(3) > a { --nav-i: 2; }
.site-nav .menu > li:nth-child(4) > a { --nav-i: 3; }
.site-nav .menu > li:nth-child(5) > a { --nav-i: 4; }
.site-nav .menu > li:nth-child(6) > a { --nav-i: 5; }

.site-nav .menu > li > a:hover::after { opacity: 1; }
.site-nav .menu > li.cta-item > a::after { display: none; }

@media (prefers-reduced-motion: reduce)
{
    .site-nav .menu > li > a::before { animation: none; }
}

.site-nav .menu > li.cta-item { margin-left: var(--space-2); }
.site-nav .menu > li.cta-item > a
{
    padding: 5px 24px;
    background: var(--color-primary);
    color: #FFFFFF;
    border-color: var(--color-primary);
    border-radius: 999px;
    font-weight: 600;
}
.site-nav .menu > li.cta-item > a:hover { background: var(--color-accent); border-color: var(--color-accent); }

.has-sub-menu > a
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.has-sub-menu > a::before
{
    content: "";
    order: 2;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease);
}

.has-sub-menu:hover > a::before,
.has-sub-menu:focus-within > a::before { transform: rotate(-135deg); }

/* .sub-menu est la zone survolable : elle démarre à ras du lien (aucun
   espace mort) et ajoute son propre padding-top comme "pont" invisible,
   pour que le curseur ne quitte jamais la zone active en descendant
   vers le panneau visible (.sub-menu-panel). */
.sub-menu
{
    position: absolute;
    top: 100%;
    left: 50%;
    width: max-content;
    padding-top: 14px;
    transform: translate(-50%, -6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}

.has-sub-menu:hover .sub-menu,
.has-sub-menu:focus-within .sub-menu
{
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.sub-menu-panel
{
    min-width: 340px;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.sub-menu-list { list-style: none; margin: 0; padding: 0; }
.sub-menu-panel li { margin: 0; }
.sub-menu-panel li > a
{
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease);
}
.sub-menu-panel li > a:hover { background: var(--color-accent-50); }

.sub-menu-icon
{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-accent-50);
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow var(--dur-fast) var(--ease);
}
.sub-menu-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sub-menu-panel li > a:hover .sub-menu-icon { box-shadow: 0 0 0 2px var(--color-accent); }

.sub-menu-text strong { display: block; font-size: 0.88rem; font-weight: 600; color: var(--color-text); }
.sub-menu-text small { display: block; font-size: 0.76rem; color: var(--color-text-muted); margin-top: 1px; white-space: normal; }
.sub-menu-panel li > a:hover .sub-menu-text strong { color: var(--color-accent-dark); }

.sub-menu-footer
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: 10px;
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease);
}
.sub-menu-footer svg { flex-shrink: 0; }
.sub-menu-footer:hover { background: var(--color-accent-50); }

.nav-toggle
{
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-primary); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop { display: none; }

/* ---------- Héro ---------- */

.hero
{
    position: relative;
    background: var(--color-primary);
    overflow: hidden;
}

/* Les trois diapositives occupent la même cellule de grille : le héro prend la
   hauteur de la plus haute (aucun texte coupé, quelle que soit la longueur des
   textes ou la largeur de l'écran) et toutes gardent la même hauteur, donc rien
   ne bouge d'une diapositive à l'autre. */
.hero-grid
{
    position: relative;
    display: grid;
    max-width: 1240px;
    margin: 0 auto;
}

.hero-slide
{
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
    align-items: center;
    min-height: 500px;
    /* 64 px en bas : place pour les points de navigation, qui ne chevauchent
       ainsi jamais les boutons. */
    padding: 44px var(--space-5) 64px;
    opacity: 0;
    transition: opacity 1100ms ease-in-out;
    pointer-events: none;
}

.hero-slide.is-active { opacity: 1; pointer-events: auto; }

.hero-copy
{
    /* Remplit la hauteur commune des diapositives et cale le texte en bas : les
       boutons restent au même endroit d'une diapositive à l'autre, quel que soit
       le nombre de lignes des textes. L'éventuel espace en trop se place au-dessus
       du bloc, où il ne se remarque pas. */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    /* Dégage la colonne de texte de la flèche gauche (positionnée en absolu
       sur le bord du héro), pour qu'un titre sur plusieurs lignes ne passe
       jamais derrière le bouton. */
    padding-left: 72px;
}

/* Accroche : lignes équilibrées, et petit trait aligné sur la première ligne
   (et non au milieu) quand elle passe sur deux lignes. */
.hero-copy .eyebrow { align-items: flex-start; text-wrap: balance; }
.hero-copy .eyebrow::before { margin-top: calc(0.825em - 0.75px); }

/* .hero-title : classe commune au titre des 3 diapositives du héro. Une seule est
   un vrai <h1> (la 1re, visible par défaut) ; les 2 autres sont des <h2> — même
   poids visuel, mais on évite 3 <h1> simultanés dans le DOM (les diapositives
   inactives restent présentes, juste en opacité 0 : un lecteur d'écran ou un
   moteur de recherche les « voit » quand même). Corrigé le 2026-09-28. */
.hero-copy h1,
.hero-copy .hero-title
{
    color: var(--color-text-on-dark);
    font-size: clamp(1.85rem, 2.8vw, 2.7rem);
    line-height: 1.15;
    margin-bottom: var(--space-3);
    text-wrap: balance; /* jamais un mot seul sur la dernière ligne */
}

.hero-copy p:not(.eyebrow)
{
    color: var(--color-text-on-dark-muted);
    font-size: 1.05rem;
    max-width: 54ch;
    margin-bottom: var(--space-4);
    text-wrap: pretty;
}

.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero-media
{
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 3.1;
}

.hero-media img
{
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(0.15) contrast(1.05) saturate(0.9);
    transform: scale(1.04);
    transition: transform 400ms var(--ease);
}

.hero-slide.is-active .hero-media img { animation: heroKenBurns 9s ease-in-out infinite alternate; }

@keyframes heroKenBurns
{
    from { transform: scale(1.04) translate(0, 0); }
    to   { transform: scale(1.12) translate(-1.5%, -1%); }
}

.hero-media::after
{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(239, 118, 24, 0.30), rgba(15, 23, 42, 0.05) 55%);
}

.hero-media .hero-badge
{
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    z-index: 2;
    background: rgba(248, 250, 252, 0.96);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-md);
    /* Assez large pour un titre d'une ligne (« Des partenaires engagés »), sans
       jamais dépasser de l'image sur petit écran. */
    width: min(300px, calc(100% - 2 * var(--space-4)));
}

/* Interligne resserré (le titre héritait de 1.65) et description réservée sur
   deux lignes : les trois badges ont la même hauteur. */
.hero-badge strong { display: block; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--color-primary); text-wrap: balance; }
.hero-badge span { display: block; margin-top: var(--space-1); font-size: 0.82rem; line-height: 1.45; color: var(--color-text-muted); min-height: 2.9em; text-wrap: balance; }

.hero-controls
{
    position: absolute;
    left: 0; right: 0; bottom: var(--space-4);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.hero-dot
{
    width: 8px; height: 8px;
    border-radius: 4px;
    background: rgba(248, 250, 252, 0.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width var(--dur-medium) var(--ease), background-color var(--dur-fast) var(--ease);
}
.hero-dot.is-active { width: 26px; background: var(--color-accent-light); }
.hero-dot:hover { background: rgba(248, 250, 252, 0.6); }

.hero-arrow
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid var(--color-border-on-dark);
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    color: var(--color-text-on-dark);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hero-arrow:hover { background: var(--color-accent); border-color: var(--color-accent); }
.hero-arrow--prev { left: var(--space-4); }
.hero-arrow--next { right: var(--space-4); }

/* En-tête simple (pages secondaires, sans hero deux colonnes) */

.page-hero
{
    position: relative;
    background: var(--color-primary);
    padding: calc(var(--header-height) + var(--space-7)) 0 var(--space-7);
    text-align: left;
    overflow: hidden;
}

.page-hero.hero-carriere
{
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.68) 42%, rgba(15, 23, 42, 0.32) 100%),
        url('images/Ban_Carrieres.png') center / cover no-repeat;
    padding-bottom: calc(var(--space-7) + var(--space-6));
}

.page-hero.hero-nous
{
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.68) 42%, rgba(15, 23, 42, 0.32) 100%),
        url('images/Ban01.png') center / cover no-repeat;
    padding-bottom: calc(var(--space-7) + var(--space-6));
}

.page-hero.hero-services
{
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.68) 42%, rgba(15, 23, 42, 0.32) 100%),
        url('images/Ban2.png') center / cover no-repeat;
    padding-bottom: calc(var(--space-7) + var(--space-6));
}

.page-hero.hero-partenaires
{
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.68) 42%, rgba(15, 23, 42, 0.32) 100%),
        url('images/Ban3.png') center / cover no-repeat;
    padding-bottom: calc(var(--space-7) + var(--space-6));
}

.page-hero::before,
.page-hero::after
{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
}

.page-hero::before
{
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(239, 118, 24, 0.30), transparent 70%);
    top: -220px; right: -100px;
    animation: heroBlobDrift 16s ease-in-out infinite alternate;
}

.page-hero::after
{
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(148, 163, 184, 0.22), transparent 70%);
    bottom: -160px; left: 8%;
    animation: heroBlobDrift 12s ease-in-out infinite alternate-reverse;
}

@keyframes heroBlobDrift
{
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-30px, 24px) scale(1.15); }
}

.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--color-accent-light); }
.page-hero .eyebrow::before { background: var(--color-accent-light); }
.page-hero h1 { color: var(--color-text-on-dark); font-size: clamp(1.9rem, 3vw, 2.7rem); max-width: 20ch; }
.page-hero p { color: var(--color-text-on-dark-muted); font-size: 1.05rem; max-width: 60ch; }

/* Bandeau « Nos Partenaires » : accroche sur une seule ligne, titre sur deux lignes.
   Les tailles suivent la largeur de l'écran pour que chaque ligne tienne ; sur téléphone,
   le saut de ligne du titre est retiré et le texte passe à la ligne naturellement. */

.hero-partenaires .eyebrow
{
    max-width: none;
    white-space: nowrap;
    font-size: clamp(0.7rem, calc((100vw - 120px) / 43), 1.05rem);
}

.hero-partenaires h1
{
    max-width: none;
    font-size: clamp(1.5rem, calc((100vw - 3.5rem) / 25), 2.7rem);
}

/* Texte explicatif sous le titre (Partenaires.html et Partenaire-Commercial.html partagent
   cette classe) : libéré des 60 caractères habituels pour que le saut de ligne placé dans
   le texte tombe au bon endroit. Sous 1000 px, le saut disparaît et le texte s'enchaîne
   naturellement (il peut alors occuper 3 à 4 lignes selon le texte de la page). */
.hero-partenaires h1 ~ p { max-width: 1100px; }

@media (max-width: 1000px)
{
    .hero-partenaires p .saut-ligne { display: none; }
}

@media (max-width: 720px)
{
    .hero-partenaires .saut-ligne { display: none; }
    .hero-partenaires h1 { font-size: clamp(1.6rem, 6.6vw, 1.9rem); }
}

@media (max-width: 599px)
{
    .hero-partenaires .eyebrow { white-space: normal; font-size: 0.8rem; }
}

/* Bandeau « À propos » : titre sur quatre lignes (sauts de ligne placés dans le texte), sur toute
   la largeur au lieu des 20 caractères habituels. Sous 760 px, les sauts disparaissent et le titre
   passe à la ligne naturellement, de façon équilibrée. */
.hero-nous h1 { max-width: none; text-wrap: balance; }
/* Texte explicatif sous le titre : la première phrase tient sur une seule ligne (largeur portée à
   940 px au lieu de 60 caractères) et la suite sur deux lignes ; les sauts de ligne sont placés dans
   le texte. L'ombre douce garde le texte lisible là où la photo est plus claire. En dessous de
   1000 px, la première phrase ne tient plus sur une ligne : les sauts disparaissent et le texte est
   réparti sur trois lignes équilibrées. */
.hero-nous h1 ~ p { max-width: 940px; text-wrap: balance; text-shadow: 0 1px 10px rgba(2, 6, 23, 0.7); }

@media (max-width: 1000px)
{
    .hero-nous h1 ~ p { max-width: 780px; }
    .hero-nous p .saut-ligne { display: none; }
}

@media (max-width: 760px)
{
    .hero-nous h1 .saut-ligne { display: none; }
}

/* Bandeaux « Service » (7 pages) : titre libéré des 20 caractères habituels ; les titres
   longs ont leur saut de ligne placé dans le texte à un endroit choisi, les titres courts
   tiennent naturellement sur une ligne. Le paragraphe garde sa coupure après les deux
   points (quand il en a une) pour ne pas isoler « : » en fin de ligne. Sous 760 px, tous
   les sauts disparaissent et le texte passe à la ligne naturellement. */
.hero-services h1 { max-width: none; }
.hero-services p { max-width: 900px; text-wrap: pretty; }

@media (max-width: 760px)
{
    .hero-services .saut-ligne { display: none; }
}

/* Sur téléphone, le texte dépasse six lignes et ne peut plus être équilibré : on évite au moins
   qu'un mot reste seul sur la dernière ligne. */
@media (max-width: 600px)
{
    .hero-nous h1 ~ p { text-wrap: pretty; }
}

/* ---------- Bandeau de preuve ---------- */

.proof-strip { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.proof-grid
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    padding: 22px 0;
}
.proof-item { position: relative; text-align: center; }
.proof-item + .proof-item::before
{
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 36px;
    background: var(--color-border);
}
.proof-item strong
{
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1;
    color: var(--color-primary);
}
.proof-item strong::after
{
    content: "";
    position: absolute;
    left: 50%; bottom: -10px;
    transform: translateX(-50%);
    width: 26px; height: 3px;
    border-radius: 2px;
    background: var(--color-accent);
    transition: width var(--dur-medium) var(--ease);
}
.proof-item:hover strong::after { width: 42px; }
.proof-item span { display: block; margin-top: 16px; font-size: 0.85rem; color: var(--color-text-muted); }

.proof-grid > *:nth-child(1) { transition-delay: 0ms; }
.proof-grid > *:nth-child(2) { transition-delay: 90ms; }
.proof-grid > *:nth-child(3) { transition-delay: 180ms; }
.proof-grid > *:nth-child(4) { transition-delay: 270ms; }

.logo-row
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-7);
    padding: var(--space-5) 0;
}
.logo-row img { height: 40px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.logo-row img:hover { filter: grayscale(0); opacity: 1; transform: translateY(-3px) scale(1.05); }

/* Bandeau défilant (logos partenaires) */

.logo-marquee
{
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    padding: var(--space-5) 0;
}

.logo-track
{
    display: flex;
    align-items: center;
    gap: var(--space-7);
    width: max-content;
    animation: logoMarquee 26s linear infinite;
}

.logo-marquee:hover .logo-track { animation-play-state: paused; }

.logo-track img { height: 44px; width: auto; object-fit: contain; opacity: 0.92; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); flex-shrink: 0; }
.logo-track img:hover { opacity: 1; transform: translateY(-3px) scale(1.06); }

/* Témoignages (Partenaires.html) : dans .card-grid pour profiter du même
   comportement réactif (3 → 2 → 1 colonne) que les autres grilles de cartes. */
.testimonial-card
{
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Citation en police courante (Jost), pas en police à empattements (Bodoni Moda,
   réservée aux titres) : demandé le 2026-09-28, la même police que le nom/rôle un
   peu plus bas plaisait davantage que l'empattée d'origine. Taille et interligne
   resserrés en même temps, pour des cartes plus compactes (d'autres témoignages
   s'ajouteront par la suite). */
.testimonial-card p { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.45; color: var(--color-foreground); margin: 0; }
/* .testimonial-meta et non <footer> : le site a une règle globale "footer { background:
   ...navy }" pour le pied de page tout en bas — un <footer> ici aurait hérité de ce
   fond sombre, sur du texte resté sombre lui aussi (illisible). Vu et corrigé le
   2026-09-27 avant toute mise en ligne. */
.testimonial-card .testimonial-meta { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
/* Rond contenant le logo du partenaire (les témoignages sont réels depuis le
   2026-09-27 — voir le commentaire au-dessus de la section dans Partenaires.html).
   Fond blanc + "contain" : quelle que soit la forme du logo (rond, écusson,
   rectangle…), il apparaît en entier, jamais recadré. */
.testimonial-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #FFFFFF; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.testimonial-meta strong { display: block; font-size: 0.92rem; font-weight: 600; color: var(--color-foreground); }
.testimonial-meta span { display: block; font-size: 0.85rem; color: var(--color-text-muted); }

@keyframes logoMarquee
{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- Cartes services ---------- */

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--5 { grid-template-columns: repeat(5, 1fr); }

.card-grid > *:nth-child(1) { transition-delay: 0ms; }
.card-grid > *:nth-child(2) { transition-delay: 70ms; }
.card-grid > *:nth-child(3) { transition-delay: 140ms; }
.card-grid > *:nth-child(4) { transition-delay: 210ms; }
.card-grid > *:nth-child(5) { transition-delay: 280ms; }
.card-grid > *:nth-child(6) { transition-delay: 350ms; }
.card-grid > *:nth-child(7) { transition-delay: 420ms; }

.service-card
{
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --tilt-lift: 0px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--tilt-lift));
    transition: transform 420ms var(--ease), box-shadow var(--dur-medium) var(--ease), border-color var(--dur-medium) var(--ease);
}

.service-card:hover { --tilt-lift: -8px; box-shadow: var(--shadow-md); border-color: transparent; }

.service-card .service-icon
{
    position: relative;
    width: 64px; height: 64px;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-3);
}

.service-icon-corner { position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--color-accent); transition: border-color var(--dur-medium) var(--ease); }
.service-icon-corner.tl { top: 5px; left: 5px; border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.service-icon-corner.tr { top: 5px; right: 5px; border-left: none; border-bottom: none; border-top-right-radius: 4px; }
.service-icon-corner.bl { bottom: 5px; left: 5px; border-right: none; border-top: none; border-bottom-left-radius: 4px; }
.service-icon-corner.br { bottom: 5px; right: 5px; border-left: none; border-top: none; border-bottom-right-radius: 4px; }
.service-card:hover .service-icon-corner { border-color: var(--color-accent-light); }

.service-icon-photo
{
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(248, 250, 252, 0.85);
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.35);
    transition: box-shadow var(--dur-medium) var(--ease), border-color var(--dur-medium) var(--ease);
}
.service-icon-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card:hover .service-icon-photo { border-color: #FFFFFF; box-shadow: 0 8px 20px rgba(2, 6, 23, 0.45); }

.service-card h3 { font-size: 1.1rem; margin-bottom: 6px; }

/* Cartes « Qui peut devenir partenaire commercial ? » (Partenaire-Commercial.html) :
   ce ne sont que des intitulés, sans icône ni texte — la police des titres (Bodoni
   Moda) y tranchait avec le reste de la page. Texte courant (Jost), comme les
   étapes juste au-dessus (« Comment ça marche ») ou le pied de page. */
.card-grid--profils .service-card h3 { font-family: var(--font-body); }
.service-card p { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.service-card .card-link { font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
.service-card .card-link svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.service-card:hover .card-link svg { transform: translateX(4px); }

/* ---------- Séparateur Mission / Vision ---------- */

.mv-grid { position: relative; }
.mv-grid::before
{
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    background: var(--color-border-on-dark);
    transform: translateX(-50%);
}

/* ---------- Nos valeurs : couleur pleine au survol ---------- */

#valeurs .service-card
{
    transition: transform var(--dur-medium) var(--ease), box-shadow var(--dur-medium) var(--ease), background-color var(--dur-medium) var(--ease), border-color var(--dur-medium) var(--ease);
}
#valeurs .service-card h3,
#valeurs .service-card p
{
    position: relative; z-index: 1;
    transition: color var(--dur-medium) var(--ease);
}
#valeurs .service-card:nth-child(1):hover { background: #2E7BE8; border-color: #2E7BE8; }
#valeurs .service-card:nth-child(2):hover { background: var(--color-secondary); border-color: var(--color-secondary); }
#valeurs .service-card:nth-child(3):hover { background: var(--color-accent); border-color: var(--color-accent); }
#valeurs .service-card:nth-child(4):hover { background: var(--color-primary); border-color: var(--color-primary); }
#valeurs .service-card:hover h3 { color: #FFFFFF; }
#valeurs .service-card:hover p { color: rgba(248, 250, 252, 0.82); }

/* ---------- Bloc texte + image ---------- */

.split
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}
.split--reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }

/* Image (ou diaporama) volontairement plus petite que sa colonne, centrée dans
   l'espace restant : bloc « Notre projet d'entreprise » (Nous.html) et visuel
   d'intro des 7 pages de service (diaporama .media-diapo). */
.split-media--sm img { display: block; width: 80%; margin: 0 auto; }
.split-media--sm .media-diapo { width: 80%; margin: 0 auto; }

/* Bloc « Pourquoi le Groupe SOLAVIH » (accueil) : colonne de texte 12 % plus large
   (1fr → 1,12fr) ; l'image, réduite d'autant (1fr → 0,88fr), garde ses proportions.
   Placé avant la règle « une seule colonne » du mode tablette/téléphone, qui reste prioritaire. */
.split--text-wide { grid-template-columns: 1.12fr 0.88fr; }

/* Bloc « Pourquoi nous rejoindre » (Carrières) : le texte est plus riche que sur les
   autres pages (intro + 4 mini-cartes + phrase de conclusion) et reste la colonne la
   plus haute même avec .split--text-wide ; ici la colonne de texte prend deux fois la
   largeur de l'image, avec une 3e piste étroite entre les deux pour le séparateur
   vertical (.split-divider, un simple <div> vide dans le HTML). Placé avant la règle
   « une seule colonne » du mode tablette/téléphone (plus bas dans ce fichier), qui
   reste prioritaire — le séparateur y est aussi masqué (inutile sur un empilement). */
.split--divided-wide { grid-template-columns: 2fr auto 1fr; }
.split-divider { width: 2px; align-self: stretch; background: var(--color-accent); border-radius: 1px; }
@media (max-width: 1080px) { .split-divider { display: none; } }

/* Image de .split (bloc « Pourquoi nous rejoindre », Carrières) : cadre à coins
   arrondis + ombre prononcée. La photo s'affiche EN ENTIER, à ses proportions
   naturelles (3 : 2) : surtout pas d'aspect-ratio + object-fit ici, qui la
   recadreraient (3 oct. 2026, demande de l'utilisateur : « toute l'image doit être
   visible » — l'ancien cadrage 4 / 3,4 coupait les personnes placées aux deux
   extrémités de la photo, à gauche et à droite).
   Remarque 2026-09-28 : ne pas ajouter d'aplat de couleur décoratif ici — testé, mais
   avec une photo qui a déjà une dominante orange (halo derrière la carte d'Afrique,
   intégré à l'image elle-même, pas retirable en CSS), ça surchargeait plutôt que
   d'ajouter du raffinement. */
.split-media--elevated { position: relative; }
.split-media--elevated img { width: 100%; height: auto; box-shadow: var(--shadow-lg); transition: transform var(--dur-medium) var(--ease); }
.split-media--elevated:hover img { transform: translateY(-4px); }

/* Les 4 valeurs citées dans le texte d'intro (confiance, discipline, apprentissage,
   accompagnement) reprises en mini-cartes plutôt qu'en simple liste, pour une lecture
   plus rapide et plus soignée qu'un bloc de texte dense. Reste dans .split-copy, donc
   contraint à la largeur de la colonne de texte — 2 colonnes, 1 seule sur petit écran.
   Marge et padding resserrés (2026-09-28) pour que tout le bloc, intro + 4 cartes +
   conclusion, tienne sur un écran 14 pouces sans défilement. */
.pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }
.pillar-card {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: box-shadow var(--dur-medium) var(--ease), transform var(--dur-medium) var(--ease);
}
.pillar-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.pillar-card .pillar-mark { display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--color-accent); margin-bottom: var(--space-2); }
.pillar-card strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--color-primary); margin-bottom: 2px; }
.pillar-card span { display: block; font-size: 0.86rem; line-height: 1.4; color: var(--color-text-muted); }
@media (max-width: 600px) { .pillar-grid { grid-template-columns: 1fr; } }

/* Dernière phrase du bloc « Pourquoi nous rejoindre », mise en avant façon citation
   (au lieu d'un 3e paragraphe de même poids que les autres) : plus grande, en police
   à empattements, avec un filet d'accent — conclut le bloc avec plus d'élégance. */
.split-copy .lead-emphasis {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.45;
    color: var(--color-primary);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-accent);
    margin: 0;
}

/* ---------- Diaporama miniature (visuels de service) ---------- */

.media-diapo
{
    position: relative;
    aspect-ratio: 4 / 3.3;
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
    overflow: hidden;
    box-shadow:
        0 2px 5px rgba(2, 6, 23, 0.10),
        0 30px 55px -18px rgba(2, 6, 23, 0.40),
        0 14px 30px -14px rgba(239, 118, 24, 0.28);
    transition: box-shadow var(--dur-medium) var(--ease);
}
.media-diapo:hover
{
    box-shadow:
        0 2px 5px rgba(2, 6, 23, 0.10),
        0 40px 70px -18px rgba(2, 6, 23, 0.46),
        0 18px 36px -12px rgba(239, 118, 24, 0.36);
}
.media-diapo img
{
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    box-shadow: none;
    border-radius: 0;
    opacity: 0;
    transition: opacity 900ms ease-in-out;
}
.media-diapo img.is-active { opacity: 1; }

.media-diapo-dots
{
    position: absolute;
    left: 0; right: 0; bottom: var(--space-3);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.media-diapo-dots button
{
    width: 7px; height: 7px;
    border-radius: 50%;
    border: none;
    background: var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: width var(--dur-medium) var(--ease), background-color var(--dur-fast) var(--ease);
}
.media-diapo-dots button.is-active { width: 20px; border-radius: 4px; background: var(--color-accent); }
.media-diapo-dots button:hover { background: var(--color-accent-light); }
.split-copy ul { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.split-copy ul li
{
    position: relative;
    padding-left: 28px;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}
.split-copy ul li::before
{
    content: "";
    position: absolute; left: 0; top: 8px;
    width: 14px; height: 14px;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
}

/* ---------- Vignette de pôle sans photo (icône à la place d'un diaporama) ---------- */

.media-showcase
{
    aspect-ratio: 4 / 3.3;
    border-radius: var(--radius-lg);
    background: linear-gradient(155deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)) 100%);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6);
    text-align: center;
}
.media-showcase-icon { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35); border: 2px solid rgba(248, 250, 252, 0.85); }
.media-showcase p { color: var(--color-text-on-dark-muted); font-size: 0.95rem; max-width: 30ch; margin: 0; }

/* ---------- Bandeau CTA ---------- */

.cta-band
{
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.cta-band h2 { color: var(--color-text-on-dark); font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: var(--space-2); max-width: 26ch; }
.cta-band p { color: var(--color-text-on-dark-muted); margin: 0; }
.cta-band-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.cta-band.cta-band--nous { flex-direction: column; align-items: center; text-align: center; padding-top: var(--space-5); padding-bottom: var(--space-5); }
.cta-band--nous h2 { max-width: none; }
.cta-band--nous .cta-band-actions { justify-content: center; }
@media (min-width: 861px) { .cta-band--nous h2 { white-space: nowrap; } }

/* Bandeau « Discutons de votre projet » (accueil) : le texte à gauche, le bouton à droite,
   séparés par un filet vertical et centrés l'un par rapport à l'autre. Fond navy avec un
   reflet froid en haut à droite, une fine arête orange sur le bord supérieur, un filet
   clair autour de la carte et un trait orange au-dessus du titre. Le bandeau de « A propos »
   (cta-band--nous) garde son style centré. */

.cta-band--projet
{
    flex-wrap: nowrap;
    gap: var(--space-7);
    padding: var(--space-7);
    background:
        linear-gradient(90deg, transparent 4%, rgba(239, 118, 24, 0.8) 50%, transparent 96%) top / 100% 1px no-repeat,
        radial-gradient(640px 360px at 100% 0%, rgba(148, 163, 184, 0.12), transparent 70%),
        linear-gradient(135deg, var(--color-primary) 0%, #131D35 100%);
    background-origin: border-box;
    border: 1px solid rgba(248, 250, 252, 0.08);
    box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.07), var(--shadow-md);
}

.cta-band--projet .cta-band-copy { flex: 1 1 0; min-width: 0; }

.cta-band--projet .cta-band-copy::before
{
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin-bottom: var(--space-4);
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
}

.cta-band--projet .cta-band-copy h2
{
    max-width: none;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    margin-bottom: var(--space-3);
    text-wrap: balance;
}

.cta-band--projet .cta-band-copy p { max-width: 62ch; line-height: 1.7; text-wrap: pretty; }

.cta-band--projet .cta-band-actions
{
    flex: none;
    align-self: stretch;
    align-items: center;
    padding-left: var(--space-7);
    border-left: 1px solid rgba(248, 250, 252, 0.1);
}

.cta-band--projet .btn { padding: 16px 30px; font-size: 1rem; box-shadow: 0 12px 28px -14px rgba(31, 168, 85, 0.55); }
.cta-band--projet .btn:hover { transform: translateY(-2px); }

/* En dessous de 1040 px, le texte puis le bouton s'empilent ; le filet devient horizontal. */
@media (max-width: 1040px)
{
    .cta-band--projet { flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); }
    .cta-band--projet .cta-band-copy { flex: none; width: 100%; }
    .cta-band--projet .cta-band-actions { align-self: auto; width: 100%; padding: var(--space-5) 0 0; border-left: 0; border-top: 1px solid rgba(248, 250, 252, 0.1); }
}

/* Sur téléphone, le libellé du bouton doit tenir sur une seule ligne (dès 360 px de large). */
@media (max-width: 480px)
{
    .cta-band--projet { padding: var(--space-5) var(--space-4); }
    .cta-band--projet .btn { padding: 14px 12px; font-size: 0.82rem; text-align: center; text-wrap: balance; }
}

/* ---------- Offres GSN (formules d'accompagnement) ---------- */

.offer-guarantees
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
    margin: 0 0 var(--space-6);
}
.offer-guarantee { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted); }
.offer-guarantee svg { color: var(--color-accent); flex-shrink: 0; }

.offer-grid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}

.offer-card
{
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, var(--color-primary) 0%, color-mix(in srgb, var(--badge-color) 62%, var(--color-primary)) 100%);
    border: 1px solid color-mix(in srgb, var(--badge-color) 45%, var(--color-primary));
    border-radius: var(--radius-lg);
    padding: 64px var(--space-5) var(--space-5);
    transition: transform var(--dur-medium) var(--ease), box-shadow var(--dur-medium) var(--ease), border-color var(--dur-medium) var(--ease);
}
.offer-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }

.offer-card:nth-child(1) { --badge-color: #2563EB; }
.offer-card:nth-child(2) { --badge-color: var(--color-accent); }
.offer-card:nth-child(3) { --badge-color: #0EA968; }

.offer-card::before
{
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--badge-color) 55%, transparent), transparent 60%);
    pointer-events: none;
}
.offer-card--featured:hover { box-shadow: var(--shadow-lg); }

.offer-ribbon
{
    position: absolute;
    top: var(--space-4); right: var(--space-4);
    z-index: 1;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}

@property --angle
{
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.offer-badge
{
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: #FFFFFF;
    background: var(--badge-color);
    margin-bottom: 10px;
    transition: box-shadow var(--dur-medium) var(--ease);
}
.offer-card:nth-child(3) .offer-badge { color: var(--color-text-on-dark); background: var(--color-primary-light); }
.offer-card:hover .offer-badge { box-shadow: 0 8px 20px -6px var(--badge-color); }

.offer-badge::before
{
    content: "";
    position: absolute;
    inset: -3px;
    z-index: -1;
    border-radius: inherit;
    padding: 1.4px;
    background: conic-gradient(from var(--angle), transparent 0%, var(--badge-color) 12%, transparent 26%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: offerBadgeSpin 3.2s linear infinite;
    pointer-events: none;
}

@keyframes offerBadgeSpin { to { --angle: 360deg; } }

@media (prefers-reduced-motion: reduce)
{
    .offer-badge::before { animation: none; }
}

.offer-tagline
{
    position: relative; z-index: 1;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--color-text-on-dark-muted);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-on-dark);
    /* Réserve la hauteur du texte le plus long des 3 cartes, pour que le
       séparateur du bas tombe à la même hauteur sur les 3 offres. */
    min-height: 143px;
}

.offer-list
{
    position: relative; z-index: 1;
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    /* La liste la plus longue des 3 offres fixe la hauteur des autres, pour
       que le haut du bloc SLA et la zone de remise tombent au même endroit. */
    min-height: 467px;
}
.offer-list li
{
    position: relative;
    padding-left: 24px;
    margin-bottom: 11px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-on-dark-muted);
}
.offer-list li::before
{
    content: "";
    position: absolute; left: 0; top: 7px;
    width: 12px; height: 12px;
    border: 2px solid var(--badge-color);
    border-radius: 50%;
}

.offer-sla
{
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-4);
    border-top: 1px solid var(--color-border-on-dark);
}
.offer-sla div { text-align: center; }
.offer-sla strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--badge-color); white-space: nowrap; }
.offer-sla span { display: block; font-size: 0.68rem; line-height: 1.3; color: var(--color-text-on-dark-muted); margin-top: 2px; }

.offer-discount
{
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #FFFFFF;
    background: color-mix(in srgb, var(--badge-color) 22%, transparent);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: var(--space-5);
}

.offer-card .btn { position: relative; z-index: 1; justify-content: center; margin-top: auto; }

@media (max-width: 900px)
{
    .offer-grid { grid-template-columns: 1fr; }
    .offer-card--featured { order: -1; }
    .offer-ribbon { left: 50%; right: auto; transform: translateX(-50%); }
}

/* ---------- Pied de page ---------- */

footer { background: var(--color-foreground); color: var(--color-text-on-dark-muted); line-height: 1.45; }
.footer-grid
{
    display: grid;
    grid-template-columns: 1.54fr 1.11fr 0.82fr 1.03fr;
    gap: var(--space-6);
    padding: var(--space-6) 0 var(--space-4);
}
.footer-brand .logo-word { color: var(--color-text-on-dark); font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.footer-brand .logo-word span { color: var(--color-accent-light); }
.footer-brand p { color: var(--color-text-on-dark-muted); font-size: 0.9rem; margin-top: var(--space-2); line-height: 1.5; }

.footer-col h3 { color: var(--color-text-on-dark); font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-1); }
.footer-col a { color: var(--color-text-on-dark-muted); font-size: 0.92rem; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--color-text-on-dark); }

.footer-bottom
{
    border-top: 1px solid var(--color-border-on-dark);
    padding: var(--space-3) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: 0.82rem;
}

/* ---------- Apparitions au défilement ---------- */

.js-enabled [data-reveal]
{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}

.js-enabled [data-reveal="left"]  { transform: translateX(-42px); }
.js-enabled [data-reveal="right"] { transform: translateX(42px); }
.js-enabled [data-reveal="scale"] { transform: translateY(16px) scale(0.92); }
.js-enabled [data-reveal="pop"]
{
    transform: scale(0.6);
    transition: opacity 550ms var(--ease), transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.js-enabled [data-reveal].is-visible { opacity: 1; transform: translate(0, 0) scale(1); }

/* ---------- Interactions curseur ---------- */

.cursor-follow
{
    position: fixed;
    top: 0; left: 0;
    width: 14px; height: 14px;
    border: 1.5px solid var(--color-accent-light);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 200ms var(--ease), width 300ms var(--ease), height 300ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.cursor-follow.is-active { opacity: 1; }
.cursor-follow.is-hover { width: 26px; height: 26px; background: rgba(239, 118, 24, 0.12); border-color: var(--color-accent); }
.cursor-follow.is-press { width: 11px; height: 11px; }

@media (hover: none), (pointer: coarse)
{
    .cursor-follow { display: none; }
}

/* ---------- Utilitaires ---------- */

.tag
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-accent-50);
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 600;
}

.breadcrumb { font-size: 0.85rem; color: var(--color-text-on-dark-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--color-text-on-dark-muted); }
.breadcrumb a:hover { color: var(--color-text-on-dark); }

/* ===================================================================
   Réactif
   =================================================================== */

@media (max-width: 1080px)
{
    /* Une colonne : le texte prend la place restante et l'image reste calée en bas,
       donc elle ne bouge pas d'une diapositive à l'autre (plus de défilement interne). */
    .hero-slide { grid-template-columns: 1fr; grid-template-rows: 1fr auto; min-height: 0; padding-top: var(--space-6); gap: var(--space-5); }
    .hero-copy { padding-left: 0; }
    .hero-media { max-width: 480px; aspect-ratio: 16 / 10; }
    /* Flèches en bas, de part et d'autre des points : au milieu, elles passaient sur le texte. */
    .hero-arrow { top: auto; bottom: 7px; transform: none; width: 34px; height: 34px; font-size: 1rem; }
    .proof-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
    .card-grid, .card-grid--4, .card-grid--5 { grid-template-columns: repeat(2, 1fr); }
    .split, .split--reverse .split-media { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px)
{
    .nav-toggle { display: flex; }

    .site-nav
    {
        position: fixed;
        top: 0; right: 0;
        height: 100vh;
        width: min(340px, 88vw);
        background: var(--color-surface);
        box-shadow: var(--shadow-lg);
        padding: calc(var(--header-height-mobile) + var(--space-6)) var(--space-5) var(--space-6);
        transform: translateX(100%);
        transition: transform var(--dur-medium) var(--ease);
        z-index: 999;
        overflow-y: auto;
    }
    .site-nav.is-open { transform: translateX(0); }

    .site-nav .menu { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .site-nav .menu > li > a { display: block; padding: var(--space-3) 0; border: none; border-radius: 0; background: none; }
    .site-nav .menu > li > a.is-active { background: none; }
    .site-nav .menu > li > a::after { display: none; }
    .site-nav .menu > li.cta-item { margin-left: 0; margin-top: var(--space-3); }
    .site-nav .menu > li.cta-item > a { display: block; text-align: center; }

    .has-sub-menu > a::before { order: 0; margin-right: 6px; }
    .sub-menu
    {
        position: static;
        width: auto;
        padding-top: 0;
        opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    }
    .sub-menu-panel
    {
        box-shadow: none; border-color: transparent; background: var(--color-surface-muted);
        min-width: 0; margin-top: var(--space-2);
    }

    .nav-backdrop
    {
        display: block;
        position: fixed; inset: 0;
        background: rgba(2, 6, 23, 0.5);
        opacity: 0; pointer-events: none;
        transition: opacity var(--dur-medium) var(--ease);
        z-index: 998;
    }
    .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

    #entete, #entete.is-scrolled { height: var(--header-height-mobile); }
    #logo img, #entete.is-scrolled #logo img { height: 40px; }
    .separateur { height: var(--header-height-mobile); }
    .page-hero { padding-top: calc(var(--header-height-mobile) + var(--space-6)); }

    .proof-grid { grid-template-columns: repeat(2, 1fr); }
    .card-grid, .card-grid--4, .card-grid--5 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
    .cta-band { flex-direction: column; align-items: flex-start; }
    .logo-row { gap: var(--space-5); }
}

@media (max-width: 480px)
{
    .proof-grid { grid-template-columns: 1fr 1fr; }
    .hero-actions, .cta-band-actions { width: 100%; }
    .hero-actions .btn, .cta-band-actions .btn { flex: 1; justify-content: center; }
    /* Boutons du héro l'un sous l'autre : côte à côte, leurs libellés se coupaient sur deux lignes. */
    .hero-copy .hero-actions { flex-direction: column; }
    .hero-copy .hero-actions .btn { flex: none; }
    /* Titre un peu plus petit sur les téléphones étroits (4 lignes à 360 px sinon). */
    .hero-copy h1, .hero-copy .hero-title { font-size: clamp(1.6rem, 7.2vw, 1.85rem); }
}

/* ---------- Connexion / Espace client ---------- */

.auth-wrap
{
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-side
{
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    padding: calc(var(--header-height) + var(--space-6)) var(--space-7) var(--space-7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.auth-side::after
{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(239, 118, 24, 0.35), transparent 60%);
}

.auth-side > * { position: relative; z-index: 1; }
.auth-side h1 { color: var(--color-text-on-dark); font-size: clamp(1.8rem, 2.6vw, 2.4rem); max-width: 14ch; }
.auth-side p { color: var(--color-text-on-dark-muted); max-width: 40ch; }

.auth-form-side
{
    padding: calc(var(--header-height) + var(--space-6)) var(--space-6) var(--space-7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card { width: 100%; max-width: 400px; }

.auth-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.auth-tab
{
    flex: 1;
    background: none; border: none;
    padding: var(--space-3) 0;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.auth-tab.is-active { color: var(--color-primary); border-color: var(--color-accent); }

.auth-panel { display: none; }
.auth-panel.is-active { display: block; }

.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.field input
{
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--color-surface);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-50); }

.field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); font-size: 0.85rem; }
.field-row a { color: var(--color-accent); }

.auth-submit { width: 100%; justify-content: center; }

.form-note
{
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-accent-50);
    color: var(--color-accent);
    font-size: 0.85rem;
    text-align: center;
}

@media (max-width: 860px)
{
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-side { padding-top: calc(var(--header-height-mobile) + var(--space-6)); }
    .auth-form-side { padding-top: var(--space-6); }
}

/* ---------- Formulaire d'inscription GSN ---------- */
.container--narrow { max-width: 760px; }

.gsn-form-section { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.gsn-form-section:first-child { padding-top: 0; }
.gsn-form-section:last-of-type { border-bottom: none; }
.gsn-form-step { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2); }
.gsn-form-section h2 { margin-bottom: var(--space-2); }
.gsn-form-hint { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.gsn-form-hint a { color: var(--color-accent); }
.gsn-form-hint--center { text-align: center; }
.gsn-form-sub { margin-top: var(--space-4); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.field-grid .field { grid-column: span 1; }

.field select,
.field textarea
{
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field select:focus, .field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-50); }
.field textarea { resize: vertical; }

.offer-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.offer-pick-card
{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.offer-pick-card:hover { border-color: var(--color-accent-light); }
.offer-pick-card:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-50); }
.offer-pick-card input
{
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: var(--space-4); right: var(--space-4);
    width: 22px; height: 22px;
    margin: 0;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease);
}
.offer-pick-card input::before
{
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--color-accent);
    transform: scale(0);
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.offer-pick-card input:checked { border-color: var(--color-accent); }
.offer-pick-card input:checked::before { transform: scale(1); }
.offer-pick-card--featured { background: var(--color-accent-50); }
.offer-pick-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-primary); padding-right: var(--space-5); }
.offer-pick-desc { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; }

.service-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
.service-pick--compact { margin-top: var(--space-2); }
.service-pick-item
{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.service-pick-item:hover { border-color: var(--color-accent-light); }
.service-pick-item:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-50); }
.service-pick-item input
{
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 20px; height: 20px;
    margin-top: 2px;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.service-pick-item input::before
{
    content: '';
    position: absolute;
    top: 3px; left: 6px;
    width: 6px; height: 10px;
    border-right: 2.5px solid var(--color-surface);
    border-bottom: 2.5px solid var(--color-surface);
    transform: rotate(45deg) scale(0);
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.service-pick-item input:checked { background: var(--color-accent); border-color: var(--color-accent); }
.service-pick-item input:checked::before { transform: rotate(45deg) scale(1); }

.gsn-form-submit { position: relative; width: 100%; justify-content: center; margin-top: var(--space-6); }
.gsn-form-submit.is-loading { color: transparent; pointer-events: none; }
.gsn-form-submit.is-loading::after
{
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gsnFormSpin 700ms linear infinite;
}
@keyframes gsnFormSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce)
{
    .gsn-form-submit.is-loading::after { animation-duration: 1400ms; }
}

@media (max-width: 640px)
{
    .field-grid, .offer-pick, .service-pick { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce)
{
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =================================================================== */

/* ============================================================
   Programme de Récompenses Partenaires — page « Devenir partenaire commercial »
   ============================================================ */
.prp-principle {
    margin: 0 0 var(--space-4);
    padding: 0 0 0 var(--space-4);
    border-left: 3px solid var(--color-accent);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    line-height: 1.35;
    color: var(--color-text-on-dark);
}

.prp-benefits, .prp-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
/* « Bon à savoir » (Partenaire-Commercial.html) : chaque règle sur une seule ligne
   au lieu de deux — la phrase la plus longue a besoin de 760px, d'où ce plafond à
   820px (marge confortable) plutôt que la largeur pleine du conteneur (1240px),
   pour ne pas laisser un grand vide à droite de chaque ligne. Centré comme le titre
   au-dessus (voir .container sans --narrow sur cette section, ligne HTML). */
.prp-rules--large { max-width: 820px; margin-left: auto; margin-right: auto; }
/* Le "nowrap" est réservé à partir de 900px : en dessous, le conteneur devient plus
   étroit que le texte et forcer une seule ligne ferait déborder la page sur tablette
   et téléphone. Sous 900px, chaque règle repasse sur 2-3 lignes normalement. */
@media (min-width: 900px) {
    .prp-rules--large li { white-space: nowrap; }
}
.prp-benefits li, .prp-rules li { position: relative; padding-left: 28px; line-height: 1.5; }
.prp-benefits li::before, .prp-rules li::before {
    content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 8px;
    border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
    transform: rotate(-45deg) translateY(-50%);
}
.section--dark .prp-benefits li { color: var(--color-text-on-dark-muted); }

/* Bloc « Deux formes de partenariat » (Partenaires.html, section sombre) : deux
   panneaux « verre dépoli » posés sur le fond marine, plutôt qu'un bloc de texte à
   côté d'une photo. Fond et bordure translucides = mêmes teintes que .btn--ghost-dark
   (rgba(248,250,252, …)), pour rester dans le vocabulaire visuel déjà utilisé sur
   fond sombre ailleurs sur le site. */
.partner-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.partner-mode-card {
    padding: var(--space-6);
    background: rgba(248, 250, 252, 0.05);
    border: 1px solid var(--color-border-on-dark);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    transition: background-color var(--dur-medium) var(--ease), border-color var(--dur-medium) var(--ease), transform var(--dur-medium) var(--ease);
}
.partner-mode-card:hover { background: rgba(248, 250, 252, 0.08); border-color: rgba(248, 250, 252, 0.28); transform: translateY(-4px); }
.partner-mode-tag {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-accent-light);
    padding: 4px 10px;
    border: 1px solid rgba(255, 143, 63, 0.4);
    border-radius: 999px;
    margin-bottom: var(--space-4);
}
.partner-mode-card h3 { margin-bottom: var(--space-3); }
.partner-mode-card p { flex-grow: 1; margin-bottom: var(--space-5); }
.partner-mode-card .btn { align-self: flex-start; }
@media (max-width: 760px) { .partner-modes { grid-template-columns: 1fr; } }

.prp-steps {
    counter-reset: prp-step;
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.prp-steps li {
    counter-increment: prp-step;
    position: relative;
    padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 56px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.prp-steps li::before {
    content: counter(prp-step);
    position: absolute; left: var(--space-5); top: var(--space-5);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-accent); color: #FFFFFF;
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
}
.prp-steps strong { display: block; margin-bottom: var(--space-1); color: var(--color-primary); font-size: 1.05rem; }
.prp-steps span { color: var(--color-text-muted); font-size: 0.95rem; }

@media (max-width: 900px) { .prp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .prp-steps { grid-template-columns: 1fr; } }

/* Champ piège anti-robot du formulaire GSN : hors écran, jamais visible ni annoncé. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }