/*
 * Grade Master Sup — thème Bootstrap aligné sur la charte graphique v1.0
 * Teal #71A0A5 · Ambre #F9B233 · Texte #1A2535 · DM Sans + DM Serif Display
 *
 * Le teal du logo n'offre pas un contraste suffisant pour du texte blanc ou du texte
 * courant sur fond clair (charte § 5.5) : les textes et boutons utilisent sa
 * déclinaison foncée --gm-teal-700.
 */
:root {
    --gm-teal: #71a0a5;
    --gm-teal-700: #4e7c81;
    --gm-teal-900: #2f5559;
    --gm-teal-50: #eef4f5;
    --gm-amber: #f9b233;
    --gm-amber-700: #8a5a00;
    --gm-amber-50: #fef4e1;
    --gm-product: #00acac;
    --gm-product-700: #007a7a;
    --gm-text: #1a2535;
    --gm-text-2: #4a5568;
    --gm-text-3: #6b7686;
    --gm-border: #d7dce8;
    --gm-bg-alt: #f4f6fb;
    --gm-success: #3aaa5b;
    --gm-danger: #e06b6b;
    --gm-info: #4f83e0;
    --gm-radius: 8px;
    --gm-radius-lg: 12px;
    --gm-shadow: 0 1px 4px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .04);
    --gm-gradient: linear-gradient(135deg, var(--gm-teal-700) 0%, var(--gm-teal-900) 100%);

    --bs-body-font-family: 'DM Sans', system-ui, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--gm-text-2);
    --bs-body-bg: #fff;
    --bs-emphasis-color: var(--gm-text);
    --bs-heading-color: var(--gm-text);
    --bs-secondary-color: var(--gm-text-3);
    --bs-border-color: var(--gm-border);
    --bs-border-radius: var(--gm-radius);
    --bs-border-radius-lg: var(--gm-radius-lg);
    --bs-link-color: var(--gm-teal-700);
    --bs-link-color-rgb: 78, 124, 129;
    --bs-link-hover-color: var(--gm-teal-900);
    --bs-link-hover-color-rgb: 47, 85, 89;
    --bs-primary: var(--gm-teal-700);
    --bs-primary-rgb: 78, 124, 129;
    --bs-success-rgb: 58, 170, 91;
    --bs-danger-rgb: 224, 107, 107;
    --bs-info-rgb: 79, 131, 224;
    --bs-focus-ring-color: rgba(113, 160, 165, .35);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 { color: var(--gm-text); }
h2, .h2 { font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); letter-spacing: -.01em; }
h3, .h3 { font-weight: 600; font-size: clamp(1.125rem, 1.05rem + .3vw, 1.375rem); }
.font-display { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
.text-teal { color: var(--gm-teal-700) !important; }
.text-muted-2 { color: var(--gm-text-2) !important; }
.small-caption { font-size: .8125rem; color: var(--gm-text-3); }
.bg-alt { background-color: var(--gm-bg-alt); }
.section { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.section-sm { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

.eyebrow {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gm-teal-700);
    margin-bottom: .75rem;
}
.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-head p { font-size: 1.0625rem; }

/* Skip link */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; }
.skip-link:focus { top: 1rem; }

/* ---------- Boutons ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-font-size: .9375rem; --bs-btn-padding-y: .6875rem; --bs-btn-padding-x: 1.375rem; --bs-btn-border-radius: var(--gm-radius); }
.btn-sm { --bs-btn-padding-y: .4375rem; --bs-btn-padding-x: .875rem; --bs-btn-font-size: .875rem; }
.btn-brand {
    --bs-btn-color: #fff; --bs-btn-bg: var(--gm-teal-700); --bs-btn-border-color: var(--gm-teal-700);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--gm-teal-900); --bs-btn-hover-border-color: var(--gm-teal-900);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--gm-teal-900); --bs-btn-active-border-color: var(--gm-teal-900);
    --bs-btn-focus-shadow-rgb: 78, 124, 129;
}
.btn-amber {
    --bs-btn-color: var(--gm-text); --bs-btn-bg: var(--gm-amber); --bs-btn-border-color: var(--gm-amber);
    --bs-btn-hover-color: var(--gm-text); --bs-btn-hover-bg: #f3a514; --bs-btn-hover-border-color: #f3a514;
    --bs-btn-active-color: var(--gm-text); --bs-btn-active-bg: #e09612; --bs-btn-active-border-color: #e09612;
    --bs-btn-focus-shadow-rgb: 249, 178, 51;
}
.btn-outline-brand {
    --bs-btn-color: var(--gm-teal-700); --bs-btn-border-color: var(--gm-teal); --bs-btn-bg: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--gm-teal-700); --bs-btn-hover-border-color: var(--gm-teal-700);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--gm-teal-900); --bs-btn-active-border-color: var(--gm-teal-900);
}
.btn-outline-light-soft {
    --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .55); --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--gm-teal-900); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--gm-teal-900); --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #fff;
}
/* Teal « produit » (#00ACAC) réservé à l'accès à la plateforme (charte § 3.4) */
.btn-product {
    --bs-btn-color: #fff; --bs-btn-bg: var(--gm-product-700); --bs-btn-border-color: var(--gm-product-700);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #006363; --bs-btn-hover-border-color: #006363;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #006363; --bs-btn-active-border-color: #006363;
}
.btn-product .dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gm-product); box-shadow: 0 0 0 2px rgba(255,255,255,.6); margin-right: .375rem; vertical-align: middle; }

/* ---------- Logo ---------- */
/* Taille minimale lisible : 120 px de large (charte § 2.2) */
.brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 120px; }
.brand img { height: 28px; width: auto; max-width: 100%; }
/* Logo vertical de la pastille (64 px de haut, 50 px sur mobile) : la pastille s'ajuste à sa taille */
.brand-tab .brand { min-width: 0; }
.brand img.brand-vertical { height: 64px; }
.brand-light img { height: 24px; }

/* ---------- Navigation ----------
 * Barre fine ; le logo est posé dans une pastille blanche qui déborde sous la barre.
 */
.site-header { position: sticky; top: 0; z-index: 1030; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--gm-border); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 2px 12px rgba(26, 37, 53, .06); }
.site-header .navbar { --bs-navbar-padding-y: .375rem; min-height: 58px; }

.brand-tab {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    /* colle au haut de la barre et dépasse de 22 px en dessous */
    margin-top: calc(-1 * var(--bs-navbar-padding-y));
    /* pastille ≈ 84 px de haut moins la hauteur utile de la barre : elle dépasse d'environ 30 px */
    margin-bottom: -38px;
    padding: .5rem .875rem .625rem;
    background: #fff;
    border: 1px solid var(--gm-border);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 28px rgba(26, 37, 53, .14);
}

/* Sélecteur de langue FR | EN */
.lang-switch { display: inline-flex; padding: 3px; border: 1px solid var(--gm-border); border-radius: 999px; background: var(--gm-bg-alt); }
.lang-switch a { min-width: 2.25rem; padding: .25rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-align: center; color: var(--gm-text-3); text-decoration: none; transition: background-color .2s, color .2s; }
.lang-switch a:hover { color: var(--gm-teal-700); }
.lang-switch a[aria-current="true"] { background: var(--gm-teal-700); color: #fff; }
.lang-switch a:focus-visible { outline: 3px solid var(--bs-focus-ring-color); outline-offset: 1px; }

@media (max-width: 991.98px) {
    /* le menu déplié passe sous la pastille */
    .site-header .navbar-collapse { padding-top: 2.5rem; }
}
@media (max-width: 575.98px) {
    .brand img { height: 24px; }
    .brand img.brand-vertical { height: 50px; }
    .brand-tab { margin-bottom: -24px; padding: .375rem .625rem .5rem; border-radius: 0 0 12px 12px; }
    .site-header .navbar-collapse { padding-top: 1.75rem; }
}
.site-header .nav-link { color: var(--gm-text); font-weight: 500; font-size: .9375rem; padding-inline: .875rem !important; border-radius: var(--gm-radius); }
.site-header .nav-link:hover { color: var(--gm-teal-700); }
.site-header .nav-link.active { color: var(--gm-teal-700); font-weight: 600; }
@media (min-width: 992px) {
    .site-header .nav-link.active { position: relative; }
    .site-header .nav-link.active::after { content: ''; position: absolute; left: .875rem; right: .875rem; bottom: .125rem; height: 2px; border-radius: 2px; background: var(--gm-amber); }
}
.navbar-toggler { border: 1px solid var(--gm-border); padding: .5rem .625rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }

/* ---------- Hero ---------- */
.hero { background: var(--gm-gradient); color: #fff; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 85% 15%, rgba(249, 178, 51, .18), transparent 40%), radial-gradient(circle at 10% 90%, rgba(255, 255, 255, .08), transparent 45%); pointer-events: none; }
.hero > .container { position: relative; }
.hero h1 { color: #fff; font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.5rem); line-height: 1.1; }
.hero .lead { color: rgba(255, 255, 255, .9); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); max-width: 36rem; }
.hero-home { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.hero-page { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
/* laisse la place à la pastille du logo qui descend sur le bandeau */
.hero-page { padding-top: clamp(4rem, 3.25rem + 2vw, 5.25rem); }
.hero-page h1 { font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.375rem); }

/* ---------- En-tête moderne des pages intérieures ----------
 * Dégradé de marque + halos de couleur qui dérivent, grille en filigrane, fil d'Ariane en verre
 * dépoli, titre souligné d'ambre, tuile d'icône flottante et bas en vague.
 */
.hero-modern { padding-bottom: clamp(5rem, 4rem + 3vw, 7rem); }
.hero-modern-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.hero-blob-amber { width: 26rem; height: 26rem; right: 6%; top: -9rem; background: rgba(249, 178, 51, .55); animation: gm-blob 18s ease-in-out infinite alternate; }
.hero-blob-teal { width: 30rem; height: 30rem; left: -8rem; bottom: -14rem; background: rgba(113, 160, 165, .8); animation: gm-blob 22s ease-in-out infinite alternate-reverse; }
@keyframes gm-blob {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-3rem, 2rem) scale(1.12); }
    100% { transform: translate(2rem, -1rem) scale(.95); }
}
/* grille fine, visible surtout au centre */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 65% 40%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 65% 40%, #000 0%, transparent 70%);
}
.hero-modern > .container { position: relative; z-index: 1; }

/* fil d'Ariane en pastille de verre dépoli */
.hero-crumb {
    display: inline-flex;
    padding: .375rem .875rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: .8125rem;
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, .55);
    --bs-breadcrumb-item-active-color: #fff;
}
.hero-crumb a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.hero-crumb a:hover { color: #fff; text-decoration: underline; }

/* titre souligné d'un trait ambre qui se dessine */
.hero-modern-title { margin-bottom: 1.25rem; }
.hero-modern-title::after {
    content: '';
    display: block;
    width: 4.5rem;
    height: 4px;
    margin-top: 1rem;
    border-radius: 4px;
    background: var(--gm-amber);
    transform-origin: left;
    animation: gm-underline .9s cubic-bezier(.2, .7, .2, 1) .2s both;
}
@keyframes gm-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* tuile d'icône en verre dépoli, qui flotte, avec deux points en orbite */
.hero-tile {
    position: relative;
    display: grid;
    place-items: center;
    width: 10rem;
    height: 10rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 30px 60px rgba(8, 25, 30, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
    transform: rotate(-6deg);
    animation: gm-tile-float 7s ease-in-out infinite;
}
.hero-tile .bi { font-size: 4rem; color: var(--gm-amber); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .2)); }
.hero-tile-dot { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .15); }
.hero-tile-dot-1 { width: .75rem; height: .75rem; top: -.375rem; right: 1.5rem; animation: gm-dot-pulse 2.6s ease-in-out infinite; }
.hero-tile-dot-2 { width: .5rem; height: .5rem; bottom: 1.25rem; left: -.25rem; background: var(--gm-amber); box-shadow: 0 0 0 5px rgba(249, 178, 51, .2); animation: gm-dot-pulse 2.6s ease-in-out 1.3s infinite; }
@keyframes gm-tile-float {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(-3deg) translateY(-14px); }
}
@keyframes gm-dot-pulse { 50% { transform: scale(1.5); opacity: .7; } }

/* bas de l'en-tête en vague, de la couleur de la section suivante */
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; width: 100%; height: clamp(2.5rem, 5vw, 4.5rem); color: #fff; }
.hero-wave.is-alt { color: var(--gm-bg-alt); }

@media (prefers-reduced-motion: reduce) {
    .hero-blob, .hero-tile, .hero-tile-dot, .hero-modern-title::after { animation: none; }
}
.hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.hero-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); font-size: .8125rem; font-weight: 500; color: #fff; }
.hero-badge .bi { color: var(--gm-amber); }
.breadcrumb-light { --bs-breadcrumb-divider-color: rgba(255,255,255,.6); --bs-breadcrumb-item-active-color: rgba(255,255,255,.85); font-size: .875rem; }
.breadcrumb-light a { color: #fff; }

/* Captures de la plateforme dans un cadre de navigateur */
.app-preview { background: #fff; border-radius: var(--gm-radius-lg); box-shadow: 0 24px 60px rgba(10, 30, 35, .35); overflow: hidden; color: var(--gm-text); }
.app-preview-bar { display: flex; align-items: center; gap: .375rem; padding: .625rem .875rem; background: var(--gm-bg-alt); border-bottom: 1px solid var(--gm-border); }
.app-preview-bar span { width: .625rem; height: .625rem; border-radius: 50%; background: var(--gm-border); }
.app-preview-bar .url { flex: 1; margin-left: .5rem; height: 1.25rem; border-radius: 6px; background: #fff; border: 1px solid var(--gm-border); font-size: .6875rem; color: var(--gm-text-3); padding-inline: .5rem; line-height: 1.15rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-preview-shot { display: block; width: 100%; height: auto; }
/* Légère perspective pour la capture de la section « La plateforme » (grand écran seulement) */
@media (min-width: 992px) {
    .app-preview-tilt { transform: perspective(1800px) rotateY(-7deg) rotateX(2deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
    .app-preview-tilt:hover { transform: none; }
}

/* ---------- Arrière-plan animé du bandeau d'accueil ----------
 * Carte d'Afrique (Niger en ambre, liaisons lumineuses Niamey → capitales d'Afrique de
 * l'Ouest) et icônes scolaires qui flottent. Couleurs très atténuées : le texte reste lisible.
 */
.hero > .container { z-index: 1; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Sur grand écran, la carte est décalée à droite pour que le Niger (en ambre) sorte de la
 * zone du titre centré ; elle peut déborder du bord droit. */
.hero-map {
    position: absolute;
    top: clamp(.5rem, 2vw, 2rem);
    right: max(calc(50% - 56rem), -20vw);
    width: clamp(440px, 46vw, 680px);
    height: auto;
}
.hero-centered h1 { text-shadow: 0 2px 24px rgba(10, 30, 35, .35); }
@media (max-width: 991.98px) {
    .hero-map { right: auto; left: 50%; width: 92vw; transform: translateX(-50%); opacity: .5; }
}
.map-country { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .18); stroke-width: .8; stroke-linejoin: round; }
.map-country.is-west { fill: rgba(255, 255, 255, .085); stroke: rgba(255, 255, 255, .26); }
.map-country.is-niger { fill: rgba(249, 178, 51, .3); stroke: rgba(249, 178, 51, .85); stroke-width: 1.2; animation: gm-niger-glow 4s ease-in-out infinite; }
.map-arc {
    fill: none;
    stroke: var(--gm-amber);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 16 84;
    stroke-dashoffset: 100;
    opacity: .8;
    animation: gm-arc-flow 3.6s linear infinite;
    animation-delay: calc(var(--i) * -.4s);
}
.map-city { fill: #fff; opacity: .55; transform-box: fill-box; transform-origin: center; animation: gm-city-blink 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
.map-hub { fill: var(--gm-amber); }
.map-ping { fill: none; stroke: var(--gm-amber); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: gm-ping 2.8s cubic-bezier(.2, .7, .2, 1) infinite; }
.map-ping-2 { animation-delay: 1.4s; }

@keyframes gm-arc-flow { to { stroke-dashoffset: 0; } }
@keyframes gm-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(5.5); opacity: 0; } }
@keyframes gm-niger-glow { 50% { fill: rgba(249, 178, 51, .5); } }
@keyframes gm-city-blink { 0%, 70%, 100% { opacity: .45; transform: scale(1); } 85% { opacity: 1; transform: scale(1.8); } }

.hero-icons i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-size: var(--s, 2rem);
    line-height: 1;
    color: rgba(255, 255, 255, .13);
    animation: gm-icon-float var(--t, 14s) ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
.hero-icons i.is-amber { color: rgba(249, 178, 51, .3); }
@keyframes gm-icon-float {
    0%, 100% { transform: translate(0, 0) rotate(-8deg); }
    33% { transform: translate(6px, -16px) rotate(4deg); }
    66% { transform: translate(-5px, -6px) rotate(8deg); }
}

@media (max-width: 767.98px) {
    .hero-map { width: 115vw; top: 3rem; opacity: .45; }
    .hero-icons .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-bg *, .hero-bg *::before { animation: none !important; }
    .map-arc { stroke-dasharray: none; opacity: .35; }
}

/* ---------- Bandeau d'accueil centré + composition multi-écrans ---------- */
.hero-centered.hero-home { padding-top: clamp(2.75rem, 1.5rem + 4vw, 5rem); padding-bottom: 0; }
/* sur mobile : espace pour la pastille du logo au-dessus des badges */
@media (max-width: 575.98px) { .hero-centered.hero-home { padding-top: 3.25rem; } }
.hero-centered .hero-intro { max-width: 60rem; }
.hero-centered h1 { font-size: clamp(2rem, 1.6rem + 3.2vw, 3.5rem); }
.hero-centered .hero-intro h1 { font-family: 'Satoshi', 'DM Sans', system-ui, sans-serif; font-weight: 700; letter-spacing: -.025em; }
.hero-centered .lead { max-width: 40rem; }

.hero-devices {
    position: relative;
    max-width: 1100px;
    margin: clamp(2.75rem, 6vw, 4.5rem) auto calc(-1 * clamp(2rem, 6vw, 5rem));
    padding-inline: 10%;
}
.device { margin: 0; will-change: transform; }
.device img { display: block; width: 100%; height: auto; }
.device-desktop { position: relative; z-index: 1; }
.device-desktop .app-preview { box-shadow: 0 30px 80px rgba(8, 25, 30, .45); }
.device-tablet { position: absolute; z-index: 2; left: 0; bottom: 18%; width: 31%; }
.device-phone { position: absolute; z-index: 3; right: 1.5%; bottom: 10%; width: 15%; }

/* Cadres d'appareils (bord foncé, coins arrondis) */
.device-frame { position: relative; background: #121a26; box-shadow: 0 28px 60px rgba(8, 25, 30, .5), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.device-frame img { border-radius: inherit; }
.device-tablet .device-frame { padding: 3.2%; border-radius: 22px; }
.device-tablet .device-frame img { border-radius: 10px; }
.device-phone .device-frame { padding: 5%; border-radius: 30px; }
.device-phone .device-frame img { border-radius: 22px; }
.device-phone .device-frame::before { content: ''; position: absolute; z-index: 1; top: 2.6%; left: 50%; width: 28%; height: 2.2%; border-radius: 999px; background: #121a26; transform: translateX(-50%); }

/* Entrée au chargement : texte en cascade, puis ordinateur, tablette et smartphone.
 * L'animation porte sur l'intérieur des appareils : le parallaxe (contrôleur hero-devices)
 * déplace l'appareil lui-même, les deux transformations ne se gênent pas. */
@keyframes gm-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes gm-rise { from { opacity: 0; transform: translateY(80px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gm-from-left { from { opacity: 0; transform: translate(-70px, 50px) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes gm-from-right { from { opacity: 0; transform: translate(70px, 50px) rotate(8deg); } to { opacity: 1; transform: none; } }
.hero-centered .hero-intro > * { animation: gm-fade-up .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-centered .hero-intro > :nth-child(2) { animation-delay: .08s; }
.hero-centered .hero-intro > :nth-child(3) { animation-delay: .16s; }
.hero-centered .hero-intro > :nth-child(4) { animation-delay: .24s; }
.device-desktop > .app-preview { animation: gm-rise 1.1s .3s cubic-bezier(.2, .7, .2, 1) both; }
.device-tablet > .device-frame { animation: gm-from-left 1.1s .7s cubic-bezier(.2, .7, .2, 1) both; }
.device-phone > .device-frame { animation: gm-from-right 1.1s .9s cubic-bezier(.2, .7, .2, 1) both; }

@media (max-width: 767.98px) {
    .hero-devices { padding-inline: 0 12%; }
    .device-tablet { display: none; }
    .device-phone { right: 0; bottom: 14%; width: 30%; }
    .device-phone .device-frame { border-radius: 20px; }
    .device-phone .device-frame img { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-centered .hero-intro > *, .device > * { animation: none; }
}

/* ---------- Cartes ---------- */
.card-gm { background: #fff; border: 1px solid var(--gm-border); border-radius: var(--gm-radius-lg); box-shadow: var(--gm-shadow); height: 100%; }
a.card-gm { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.card-gm:hover { border-color: var(--gm-teal); transform: translateY(-2px); }
a.card-gm:focus-visible { outline: 3px solid var(--bs-focus-ring-color); outline-offset: 2px; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--gm-radius); background: var(--gm-teal-50); color: var(--gm-teal-700); font-size: 1.375rem; flex-shrink: 0; }
.card-number { font-size: .8125rem; font-weight: 700; color: var(--gm-text-3); letter-spacing: .06em; }
.card-link { font-weight: 600; font-size: .9375rem; color: var(--gm-teal-700); }
.card-link .bi { transition: transform .15s; }
a.card-gm:hover .card-link .bi { transform: translateX(3px); }

/* Badges d'état (fond pastel + texte foncé, charte § 5) */
.badge-gm { display: inline-block; padding: .25rem .5rem; border-radius: 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--gm-amber-50); color: var(--gm-amber-700); }
.badge-gm.is-info { background: #e8effc; color: #2a5bb5; }

/* Chiffres clés (grille « bento ») */
.figure-card { padding: 1.75rem; }
.figure-card .value { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.875rem); line-height: 1; color: var(--gm-teal-700); }
.figure-card .label { font-weight: 700; color: var(--gm-text); text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; }
.figure-card.is-accent { background: var(--gm-gradient); border-color: transparent; color: rgba(255,255,255,.88); }
.figure-card.is-accent .value, .figure-card.is-accent .label { color: #fff; }
.figure-card.is-accent .icon-tile { background: rgba(255,255,255,.14); color: var(--gm-amber); }

/* Liste à puces des fonctionnalités */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.check-list li { position: relative; padding-left: 1.625rem; }
.check-list li::before { content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: 0; color: var(--gm-teal-700); font-weight: 700; }

/* Surlignage ambre d'un mot clé dans un titre */
.mark-gm { padding: 0 .1em; color: inherit; background: linear-gradient(transparent 60%, rgba(249, 178, 51, .5) 60%); }

/* ---------- Pile de modules (accueil) ----------
 * Sans JavaScript : simple liste de cartes.
 * Avec le contrôleur module-stack (.is-pinned) : la scène se fige à l'écran et chaque
 * carte monte du bas pour se poser, légèrement inclinée, sur la pile — comme des copies
 * posées sur un bureau. Les cartes du dessous reculent et dépassent en éventail.
 */
.module-stack { max-width: 1120px; margin-inline: auto; }
.stack-deck { display: grid; gap: 1.75rem; }
.stack-nav { display: none; }
.stack-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    min-height: 440px;
    padding: clamp(1.75rem, 4.2vw, 3.5rem);
    border: 1px solid var(--gm-border);
    border-radius: 24px;
    background: #fff;
    color: var(--gm-text-2);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(26, 37, 53, .14), var(--gm-shadow);
}
.stack-card:focus-visible { outline: 3px solid var(--gm-amber); outline-offset: 3px; }

.stack-index { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-bottom: 1.125rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gm-teal-700); }
.stack-audience { opacity: .75; font-weight: 600; }
.stack-card h3 { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--gm-text); }
.stack-card p { max-width: 30rem; margin: 1rem 0 0; font-size: 1rem; }
.stack-features { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .4rem; font-size: .9375rem; }
.stack-features li { position: relative; padding-left: 1.5rem; }
.stack-features li::before { content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--gm-teal-700); }
.stack-more { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.75rem; font-size: .9375rem; font-weight: 700; color: var(--gm-text); }
.stack-arrow { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid currentColor; border-radius: 50%; transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
.stack-card:hover .stack-arrow, .stack-card:focus-visible .stack-arrow { transform: rotate(-45deg) scale(1.07); }

.stack-visual { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--gm-teal-50); box-shadow: 0 28px 60px rgba(26, 37, 53, .18); }
.stack-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.stack-card:hover .stack-visual img { transform: scale(1.045); }

/* Illustration de secours (fenêtre d'application stylisée) */
.stack-illustration { position: absolute; inset: 9% 8%; display: flex; flex-direction: column; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(26, 37, 53, .12); overflow: hidden; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.stack-card:hover .stack-illustration { transform: scale(1.03) translateY(-4px); }
.stack-window-bar { display: flex; gap: .3rem; padding: .55rem .75rem; background: var(--gm-bg-alt); border-bottom: 1px solid var(--gm-border); }
.stack-window-bar span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gm-border); }
.stack-window-body { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 1rem 1.25rem; align-items: center; padding: clamp(1rem, 2.5vw, 1.75rem); }
.stack-icon { display: grid; place-items: center; width: clamp(3.75rem, 7vw, 5rem); aspect-ratio: 1; border-radius: 16px; background: var(--gm-gradient); color: #fff; font-size: clamp(1.75rem, 3.2vw, 2.375rem); }
.stack-lines { display: grid; gap: .5rem; }
.stack-lines strong { font-size: .875rem; color: var(--gm-text); margin-bottom: .125rem; }
.stack-lines i { display: block; height: .5rem; border-radius: 4px; background: var(--gm-bg-alt); }
.stack-progress { grid-column: 1 / -1; height: .625rem; border-radius: 999px; background: var(--gm-bg-alt); overflow: hidden; }
.stack-progress i { display: block; height: 100%; border-radius: inherit; background: var(--gm-amber); }

/* Thème teal (dégradé de marque) */
.stack-card.theme-teal { background: var(--gm-gradient); border-color: transparent; color: rgba(255, 255, 255, .86); }
.stack-card.theme-teal h3, .stack-card.theme-teal .stack-more { color: #fff; }
.stack-card.theme-teal .stack-index, .stack-card.theme-teal .stack-features li::before { color: var(--gm-amber); }
.stack-card.theme-teal .stack-audience { color: #fff; }
.stack-card.theme-teal .stack-visual { background: rgba(255, 255, 255, .12); box-shadow: 0 28px 60px rgba(0, 0, 0, .28); }
/* Thème ambre (texte foncé pour le contraste) */
.stack-card.theme-amber { background: var(--gm-amber); border-color: transparent; color: #3b2a07; }
.stack-card.theme-amber h3, .stack-card.theme-amber .stack-more, .stack-card.theme-amber .stack-index { color: var(--gm-text); }
.stack-card.theme-amber .stack-features li::before { color: var(--gm-text); }
.stack-card.theme-amber .badge-gm { background: #fff; }
.stack-card.theme-amber .stack-visual { background: rgba(255, 255, 255, .35); }

/* Scène figée (la hauteur de .module-stack est fixée par le contrôleur) */
.module-stack.is-pinned .stack-stage {
    position: sticky;
    top: var(--header-h, 72px);
    height: calc(100svh - var(--header-h, 72px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: clip;
}
.module-stack.is-pinned .stack-deck { position: relative; display: block; width: calc(100% - 3rem); max-width: 1040px; height: var(--deck-h, 440px); margin-inline: auto; }
.module-stack.is-pinned .stack-card {
    position: absolute;
    inset: 0;
    transform: translate3d(0, var(--ty, 0px), 0) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
    will-change: transform;
}
/* Voile qui assombrit les cartes recouvertes */
.module-stack.is-pinned .stack-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gm-text);
    opacity: var(--dim, 0);
    pointer-events: none;
}

/* Compteur 01 → 06 : indique la carte du dessus et permet d'y aller directement */
.module-stack.is-pinned .stack-nav { position: relative; z-index: 20; display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: clamp(1.75rem, 4vh, 2.75rem); }
.stack-nav button {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--gm-border);
    border-radius: 50%;
    background: #fff;
    color: var(--gm-text-3);
    font-size: .8125rem;
    font-weight: 700;
    transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.stack-nav button:hover { border-color: var(--gm-teal); color: var(--gm-teal-700); }
.stack-nav button:focus-visible { outline: 3px solid var(--bs-focus-ring-color); outline-offset: 2px; }
.stack-nav button[aria-current="true"] { background: var(--gm-teal-700); border-color: var(--gm-teal-700); color: #fff; transform: scale(1.12); }

@media (max-width: 991.98px) {
    .stack-card { grid-template-columns: 1fr; min-height: 0; }
    .stack-visual { max-width: 30rem; }
}
/* Sur mobile, la carte doit tenir dans l'écran une fois posée sur la pile */
@media (max-width: 767.98px) {
    .stack-card { border-radius: 18px; padding: 1.75rem 1.5rem; }
    .stack-visual { display: none; }
    .module-stack.is-pinned .stack-deck { width: calc(100% - 1rem); }
    .stack-nav button { width: 2.125rem; height: 2.125rem; }
}

/* ---------- Plateformes (Secondaire / Supérieur) ---------- */
.platform-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--gm-border);
    border-radius: 20px;
    box-shadow: var(--gm-shadow);
    overflow: hidden;
}
/* bandeau de couleur en haut de la carte : ambre pour l'une, teal pour l'autre */
.platform-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--gm-gradient); }
.platform-card.is-amber::before { background: var(--gm-amber); }
.platform-card.is-amber .icon-tile { background: var(--gm-amber-50); color: var(--gm-amber-700); }
.platform-audience { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gm-teal-700); }
.platform-name { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); margin-bottom: .75rem; }
.platform-intro { max-width: 48rem; font-size: 1.125rem; line-height: 1.7; }
.specific-card { border-top: 3px solid var(--gm-amber); }

/* Survol d'une carte plateforme : elle se soulève, l'icône pivote, la flèche avance */
.platform-card { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.platform-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(26, 37, 53, .12); }
.platform-card .icon-tile { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.platform-card:hover .icon-tile { transform: rotate(-8deg) scale(1.08); }
.platform-arrow { display: inline-block; transition: transform .25s; }
.platform-card .btn:hover .platform-arrow { transform: translateX(4px); }

/* Entrée au défilement (contrôleur reveal) : les cartes montent l'une après l'autre,
 * le bandeau de couleur se dessine, l'icône apparaît, les points forts arrivent en cascade. */
.reveal-ready .platform-col { opacity: 0; transform: translateY(48px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal-ready .platform-col:nth-child(2) { transition-delay: .18s; }
.reveal-ready .platform-card::before { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .7, .2, 1) .35s; }
.reveal-ready .platform-col:nth-child(2) .platform-card::before { transition-delay: .53s; }
.reveal-ready .platform-card .icon-tile { opacity: 0; transform: scale(.5) rotate(-20deg); transition: opacity .5s .45s, transform .6s cubic-bezier(.34, 1.56, .64, 1) .45s; }
.reveal-ready .platform-col:nth-child(2) .icon-tile { transition-delay: .63s; }
.reveal-ready .platform-card .check-list li { opacity: 0; transform: translateX(-14px); transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.55s + var(--i, 0) * .09s); }
.reveal-ready .platform-col:nth-child(2) .check-list li { transition-delay: calc(.73s + var(--i, 0) * .09s); }

.reveal-ready.is-revealed .platform-col,
.reveal-ready.is-revealed .platform-card .check-list li { opacity: 1; transform: none; }
.reveal-ready.is-revealed .platform-card::before { transform: scaleX(1); }
.reveal-ready.is-revealed .platform-card .icon-tile { opacity: 1; transform: none; }
/* Une fois entrée, l'icône retrouve la transition rapide du survol */
.reveal-ready.is-revealed .platform-card:hover .icon-tile { transform: rotate(-8deg) scale(1.08); transition-delay: 0s; }

/* ---------- Galerie « La plateforme en images » ----------
 * Carrousel Bootstrap (fondu) dans un cadre de navigateur + liste des écrans à côté.
 * La liste reprend la classe .carousel-indicators pour que Bootstrap y marque l'écran actif. */
.screens-gallery .app-preview { box-shadow: 0 30px 70px rgba(26, 37, 53, .18); }
.screens-nav {
    position: static;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
}
.screens-nav [data-bs-target] {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    padding: .625rem .875rem;
    text-indent: 0;
    text-align: left;
    border: 1px solid transparent;
    border-radius: var(--gm-radius-lg);
    background: transparent;
    opacity: 1;
    color: var(--gm-text-2);
    transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.screens-nav [data-bs-target]:hover { background: var(--gm-bg-alt); }
.screens-nav [data-bs-target].active { background: #fff; border-color: var(--gm-border); box-shadow: var(--gm-shadow); }
.screens-nav [data-bs-target]:focus-visible { outline: 3px solid var(--bs-focus-ring-color); outline-offset: 2px; }
.screens-nav strong { display: block; font-size: .9375rem; color: var(--gm-text); }
.screens-nav small { display: block; margin-top: .125rem; font-size: .78125rem; line-height: 1.45; color: var(--gm-text-3); }
.screens-nav-index { flex-shrink: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--gm-teal-50); color: var(--gm-teal-700); font-size: .75rem; font-weight: 700; transition: background-color .25s, color .25s; }
.screens-nav .active .screens-nav-index { background: var(--gm-teal-700); color: #fff; }
/* barre de progression sous l'écran actif, au rythme du défilement automatique (6 s) */
.screens-nav .active strong::after { content: ''; display: block; height: 2px; margin-top: .375rem; border-radius: 2px; background: var(--gm-amber); transform-origin: left; animation: gm-screen-progress 6s linear; }
@keyframes gm-screen-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 991.98px) {
    /* sur mobile : liste horizontale qui défile, sans légende */
    .screens-nav { flex-direction: row; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
    .screens-nav [data-bs-target] { flex: 0 0 auto; width: auto; align-items: center; scroll-snap-align: start; }
    .screens-nav small { display: none; }
}

/* ---------- Documents officiels : feuilles posées, agrandissables ---------- */
.documents-stack { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.5rem; align-items: center; }
.document-sheet { margin: 0; }
.document-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #fff; border-radius: 6px; box-shadow: 0 18px 40px rgba(26, 37, 53, .18); overflow: hidden; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.document-sheet:nth-child(odd) .document-open { transform: rotate(-2.5deg); }
.document-sheet:nth-child(even) .document-open { transform: rotate(1.5deg); }
.document-open:hover, .document-open:focus-visible { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 0 28px 60px rgba(26, 37, 53, .24); }
.document-open:focus-visible { outline: 3px solid var(--bs-focus-ring-color); outline-offset: 3px; }
.document-open img { display: block; width: 100%; height: auto; }
.document-zoom { position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--gm-teal-700); color: #fff; opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; }
.document-open:hover .document-zoom, .document-open:focus-visible .document-zoom { opacity: 1; transform: none; }
.document-sheet figcaption { margin-top: 1rem; text-align: center; font-size: .875rem; color: var(--gm-text-3); }
.document-sheet figcaption strong { display: block; color: var(--gm-text); font-size: .9375rem; }
@media (max-width: 767.98px) { .documents-stack { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .screens-nav .active strong::after { animation: none; } }

/* Étiquette de plateforme sur les cartes de la pile (accueil) */
.stack-platform { padding: .125rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid currentColor; font-size: .6875rem; letter-spacing: .08em; }
.stack-card.theme-light .stack-platform { background: var(--gm-teal-50); border-color: transparent; }
.stack-card.theme-amber .stack-platform { background: rgba(255, 255, 255, .45); border-color: transparent; }

/* Onglets des offres sur l'accueil */
.offer-tabs { gap: .375rem; padding: .3125rem; width: fit-content; margin-inline: auto; border: 1px solid var(--gm-border); border-radius: 999px; background: #fff; }
.offer-tabs .nav-link { padding: .5rem 1.25rem; border: 0; border-radius: 999px; font-weight: 600; font-size: .9375rem; color: var(--gm-text-2); }
.offer-tabs .nav-link:hover { color: var(--gm-teal-700); }
.offer-tabs .nav-link.active { background: var(--gm-teal-700); color: #fff; }
.offer-tabs .nav-link:focus-visible { outline: 3px solid var(--bs-focus-ring-color); outline-offset: 2px; }

/* Page Fonctionnalités */
.module-nav { position: sticky; top: 96px; }
.module-nav .nav-link { color: var(--gm-text-2); padding: .375rem .75rem; border-left: 2px solid var(--gm-border); border-radius: 0; font-size: .9375rem; }
.module-nav .nav-link:hover { color: var(--gm-teal-700); border-left-color: var(--gm-teal); }
.module-card { padding: 1.75rem; scroll-margin-top: 96px; }

/* Offres */
.offer-card { padding: 2rem; display: flex; flex-direction: column; position: relative; }
.offer-card.is-highlighted { border: 2px solid var(--gm-teal); box-shadow: 0 12px 32px rgba(47, 85, 89, .14); }
.offer-ribbon { position: absolute; top: -.8rem; left: 2rem; background: var(--gm-amber); color: var(--gm-text); font-size: .75rem; font-weight: 700; padding: .25rem .75rem; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }
.offer-price { font-family: 'DM Serif Display', Georgia, serif; font-size: 2.25rem; color: var(--gm-text); line-height: 1.1; }
.offer-card .check-list { flex: 1; align-content: start; }
.offer-includes { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-text-3); }
/* Pastille de réduction (ex. −45 %) dans le coin de la carte */
.offer-discount {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: var(--gm-amber);
    color: var(--gm-text);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.02em;
    box-shadow: 0 8px 20px rgba(249, 178, 51, .4);
    transform: rotate(-8deg);
}
.offer-discount-text { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 6px; background: var(--gm-amber-50); color: var(--gm-amber-700); font-size: .875rem; font-weight: 700; }

/* Accordéon FAQ */
.accordion-gm { --bs-accordion-border-color: var(--gm-border); --bs-accordion-border-radius: var(--gm-radius-lg); --bs-accordion-inner-border-radius: var(--gm-radius-lg); --bs-accordion-btn-color: var(--gm-text); --bs-accordion-active-color: var(--gm-teal-900); --bs-accordion-active-bg: var(--gm-teal-50); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); --bs-accordion-btn-padding-y: 1.125rem; }
.accordion-gm .accordion-button { font-weight: 600; }

/* Bandeau d'appel à l'action */
.cta-band { background: var(--gm-gradient); color: rgba(255,255,255,.9); border-radius: var(--gm-radius-lg); padding: clamp(2rem, 1.5rem + 2vw, 3.5rem); position: relative; overflow: hidden; }
.cta-band::after { content: ''; position: absolute; right: -4rem; top: -4rem; width: 16rem; height: 16rem; border-radius: 50%; background: rgba(249, 178, 51, .16); }
.cta-band h2 { color: #fff; }
.cta-band > * { position: relative; z-index: 1; }

/* Contenu éditorial (pages gérées dans le back-office) */
.prose { font-size: 1.0625rem; line-height: 1.75; max-width: 46rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.25rem; margin-bottom: .75rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .375rem; }

/* Formulaire */
.form-card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.form-label { font-weight: 600; font-size: .9375rem; color: var(--gm-text); }
.form-label.required::after { content: ' *'; color: #b54747; }
.form-control, .form-select { border-radius: var(--gm-radius); border-color: var(--gm-border); padding: .6875rem .875rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--gm-teal); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--gm-teal-700); border-color: var(--gm-teal-700); }
.invalid-feedback, .form-error-message { color: #b54747; }
.contact-item { display: flex; gap: 1rem; padding: 1.25rem; }
.contact-item + .contact-item { border-top: 1px solid var(--gm-border); }

/* Alertes (couleurs fonctionnelles de la charte) */
.alert { border-radius: var(--gm-radius); }
.alert-success { --bs-alert-color: #1f6b37; --bs-alert-bg: #e7f6ec; --bs-alert-border-color: #bfe5cb; }
.alert-danger { --bs-alert-color: #8f3434; --bs-alert-bg: #fcecec; --bs-alert-border-color: #f2c7c7; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--gm-teal-900); color: rgba(255, 255, 255, .78); font-size: .9375rem; }
.site-footer h2 { color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8125rem; color: rgba(255,255,255,.65); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* ==========================================================================
   Bandeau d'accueil « Vitrine » : fond clair, texte à gauche, capture à droite
   ========================================================================== */
.hero-showcase { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 5vw, 6rem); background: linear-gradient(180deg, var(--gm-teal-50) 0%, #fff 85%); }
.hero-showcase::before { content: ''; position: absolute; width: 38rem; height: 38rem; right: -12rem; top: -14rem; border-radius: 50%; background: radial-gradient(circle, rgba(249, 178, 51, .22), transparent 65%); pointer-events: none; }
.hero-showcase-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(78, 124, 129, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 124, 129, .07) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%); pointer-events: none; }
.hero-showcase > .container { position: relative; }
.hero-showcase h1 { font-size: clamp(2.375rem, 1.7rem + 2.6vw, 3.5rem); line-height: 1.1; margin-bottom: 1.25rem; color: var(--gm-text); }
.hero-showcase .lead { color: var(--gm-text-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); max-width: 34rem; margin-bottom: 1.75rem; }
.hero-showcase-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; padding: .375rem .875rem; border-radius: 999px; background: #fff; border: 1px solid var(--gm-border); box-shadow: var(--gm-shadow); font-size: .8125rem; font-weight: 600; color: var(--gm-teal-900); }
.hero-showcase-eyebrow .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gm-amber); box-shadow: 0 0 0 0 rgba(249, 178, 51, .6); animation: showcase-pulse 2s infinite; }
@keyframes showcase-pulse { 70% { box-shadow: 0 0 0 .5rem rgba(249, 178, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 178, 51, 0); } }

.hero-showcase-platforms { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.hero-showcase-platforms a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border-radius: var(--gm-radius); background: #fff; border: 1px solid var(--gm-border); color: var(--gm-text); font-weight: 600; text-decoration: none; transition: border-color .2s, transform .2s; }
.hero-showcase-platforms a .bi:first-child { color: var(--gm-teal-700); }
.hero-showcase-platforms a .bi:last-child { font-size: .875rem; color: var(--gm-text-3); transition: transform .2s; }
.hero-showcase-platforms a:hover { border-color: var(--gm-teal); transform: translateY(-1px); }
.hero-showcase-platforms a:hover .bi:last-child { transform: translateX(3px); color: var(--gm-teal-700); }
.hero-showcase-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--gm-text-3); }
.hero-showcase-trust .bi { margin-right: .375rem; color: var(--gm-teal-700); }

.hero-showcase-visual { position: relative; padding: 1.5rem 0 2rem; perspective: 1600px; }
.hero-showcase-window { overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--gm-border); box-shadow: 0 30px 60px -20px rgba(26, 37, 53, .35), 0 12px 24px -12px rgba(26, 37, 53, .2); transform: rotateY(-8deg) rotateX(3deg); transform-origin: left center; transition: transform .6s; }
.hero-showcase-visual:hover .hero-showcase-window { transform: none; }
.hero-showcase-bar { display: flex; align-items: center; gap: .375rem; padding: .625rem .875rem; background: var(--gm-bg-alt); border-bottom: 1px solid var(--gm-border); }
.hero-showcase-bar span { width: .625rem; height: .625rem; border-radius: 50%; background: #e06b6b; }
.hero-showcase-bar span:nth-child(2) { background: var(--gm-amber); }
.hero-showcase-bar span:nth-child(3) { background: var(--gm-success); }
.hero-showcase-bar em { margin-left: .75rem; padding: .125rem .75rem; border-radius: 999px; background: #fff; font-size: .75rem; font-style: normal; color: var(--gm-text-3); }
.hero-showcase-window img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.hero-showcase-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--gm-gradient); color: rgba(255, 255, 255, .5); font-size: 4rem; }

.hero-showcase-chips .chip { position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .625rem .875rem; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px -8px rgba(26, 37, 53, .3); font-size: .875rem; font-weight: 600; color: var(--gm-text); white-space: nowrap; opacity: 0; animation: showcase-chip 9s ease-in-out infinite; }
.hero-showcase-chips .chip .bi { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 8px; background: var(--gm-teal-50); color: var(--gm-teal-700); }
.hero-showcase-chips .is-1 { left: -1.5rem; top: 18%; }
.hero-showcase-chips .is-2 { right: -1rem; top: 46%; animation-delay: -6s; }
.hero-showcase-chips .is-2 .bi { background: var(--gm-amber-50); color: var(--gm-amber-700); }
.hero-showcase-chips .is-3 { left: 8%; bottom: .25rem; animation-delay: -3s; }
@keyframes showcase-chip {
    0%, 100% { opacity: 0; transform: translateY(12px) scale(.96); }
    8%, 30% { opacity: 1; transform: translateY(0) scale(1); }
    38% { opacity: 0; transform: translateY(-8px) scale(.98); }
}
@media (max-width: 991.98px) {
    .hero-showcase-window { transform: none; }
    .hero-showcase-chips .is-1 { left: .5rem; }
    .hero-showcase-chips .is-2 { right: .5rem; }
}
@media (max-width: 575.98px) {
    .hero-showcase-chips .chip { font-size: .75rem; padding: .5rem .625rem; }
}

/* ==========================================================================
   Bandeau d'accueil « Immersif » : fond sombre animé, mot qui change, défilé des modules
   ========================================================================== */
.hero-immersive { position: relative; overflow: hidden; padding-top: clamp(3.5rem, 2rem + 6vw, 7rem); background: #15222b; color: #fff; }
.hero-immersive-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-immersive-bg span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: immersive-float 18s ease-in-out infinite alternate; }
.hero-immersive-bg span:nth-child(1) { width: 34rem; height: 34rem; left: -10rem; top: -12rem; background: var(--gm-teal-700); }
.hero-immersive-bg span:nth-child(2) { width: 26rem; height: 26rem; right: -8rem; top: 10%; background: var(--gm-amber); opacity: .3; animation-duration: 22s; animation-delay: -6s; }
.hero-immersive-bg span:nth-child(3) { width: 30rem; height: 30rem; left: 35%; bottom: -18rem; background: var(--gm-product-700); animation-duration: 26s; animation-delay: -12s; }
.hero-immersive-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(180deg, #000, transparent 85%); }
@keyframes immersive-float {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(6rem, 3rem) scale(1.12); }
    100% { transform: translate(-3rem, 5rem) scale(.95); }
}
.hero-immersive > .container { position: relative; max-width: 58rem; }
.hero-immersive .hero-badge { display: inline-flex; }
.hero-immersive h1 { color: #fff; font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); line-height: 1.05; margin-bottom: 1.25rem; }
.hero-immersive .lead { color: rgba(255, 255, 255, .78); max-width: 38rem; margin-bottom: 2rem; }

.hero-rotator { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .25rem .625rem; margin-bottom: 1.5rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 500; color: rgba(255, 255, 255, .85); }
/* Tous les mots occupent la même cellule : la largeur suit le plus long, rien ne saute */
.hero-rotator-words { display: inline-grid; overflow: hidden; padding-bottom: .125rem; }
.hero-rotator-word { grid-area: 1 / 1; font-weight: 700; color: var(--gm-amber); opacity: 0; transform: translateY(100%); transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .55s; }
.hero-rotator-word.is-active { opacity: 1; transform: none; }
.hero-rotator-word.is-leaving { opacity: 0; transform: translateY(-100%); }

.hero-marquee { position: relative; margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-block: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hero-marquee-track { display: flex; width: max-content; animation: immersive-marquee 40s linear infinite; }
.hero-marquee:hover .hero-marquee-track { animation-play-state: paused; }
.hero-marquee ul { display: flex; gap: .75rem; margin: 0; padding: 0 .375rem; list-style: none; }
.hero-marquee a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.hero-marquee a:hover { background: rgba(249, 178, 51, .15); border-color: rgba(249, 178, 51, .5); }
.hero-marquee a .bi { color: var(--gm-amber); }
.hero-marquee small { font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .5); }
@keyframes immersive-marquee { to { transform: translateX(-33.3333%); } }

@media (prefers-reduced-motion: reduce) {
    .hero-showcase-eyebrow .dot, .hero-immersive-bg span { animation: none; }
    .hero-showcase-chips .chip { animation: none; opacity: 1; }
    .hero-marquee-track { animation: none; }
    .hero-marquee { overflow-x: auto; }
}

/* ---------- Menu : onglet déroulant « Plateformes » ---------- */
.nav-platforms .nav-caret { display: inline-block; margin-left: .375rem; font-size: .6875rem; vertical-align: .05em; transition: transform .2s; }
.nav-platforms .nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-platforms .dropdown-menu { min-width: 17rem; padding: .5rem; border: 1px solid var(--gm-border); border-radius: var(--gm-radius-lg); box-shadow: 0 18px 40px -12px rgba(26, 37, 53, .25); }
.nav-platforms .dropdown-item { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--gm-radius); white-space: normal; }
.nav-platforms .dropdown-item strong { display: block; color: var(--gm-text); font-weight: 600; }
.nav-platforms .dropdown-item small { display: block; color: var(--gm-text-3); font-size: .8125rem; line-height: 1.3; }
.nav-platforms .dropdown-item:hover, .nav-platforms .dropdown-item:focus { background: var(--gm-teal-50); }
.nav-platforms .dropdown-item.active, .nav-platforms .dropdown-item:active { background: var(--gm-teal-50); }
.nav-platforms .dropdown-item.active strong { color: var(--gm-teal-700); }
.nav-platform-icon { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 10px; font-size: 1.125rem; }
.nav-platform-icon.is-amber { background: var(--gm-amber-50); color: var(--gm-amber-700); }
.nav-platform-icon.is-teal { background: var(--gm-teal-50); color: var(--gm-teal-700); }
@media (min-width: 992px) {
    /* Sur grand écran, le menu s'ouvre aussi au survol */
    .nav-platforms .dropdown-menu { margin-top: 0; }
    .nav-platforms:hover > .dropdown-menu { display: block; }
    .nav-platforms:hover .nav-caret { transform: rotate(180deg); }
    .nav-platforms::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: .5rem; }
}
@media (max-width: 991.98px) {
    .nav-platforms .dropdown-menu { border: 0; box-shadow: none; padding: 0 0 .5rem .5rem; }
}

/* ==========================================================================
   Bandeau « Appareils + étudiants » : les utilisateurs de Grade Master sur le Niger (élèves et
   étudiants qui consultent leurs notes, enseignants qui les saisissent, administrateur à son poste).
   Calque de même boîte que .hero-map ; chacun apparaît 3 s à son tour (6 personnes, cycle 18 s).
   ========================================================================== */
.hero-students { aspect-ratio: 600 / 640; }
.hero-student { position: absolute; left: var(--x); top: var(--y); opacity: 0; animation: gm-student 18s ease-in-out infinite; animation-delay: var(--d); }
.hero-student-avatar { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: var(--gm-teal-700); font-size: .9375rem; box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25), 0 6px 14px rgba(10, 30, 35, .35); }
.hero-student-avatar::after { content: ''; position: absolute; inset: -.25rem; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: gm-student-ring 18s ease-out infinite; animation-delay: var(--d); }
/* Enseignant en ambre, administrateur en turquoise produit, élève en blanc */
.hero-student.is-teacher .hero-student-avatar { background: var(--gm-amber); color: var(--gm-text); }
.hero-student.is-teacher .hero-student-avatar::after { border-color: var(--gm-amber); }
.hero-student.is-admin .hero-student-avatar { background: var(--gm-product); color: #fff; }
.hero-student.is-admin .hero-student-avatar::after { border-color: var(--gm-product); }
.hero-student.is-teacher .hero-student-who .bi { color: var(--gm-amber-700); }
.hero-student.is-admin .hero-student-who .bi { color: var(--gm-product-700); }
/* Bulle de note, sous l'avatar : au-dessus, elle masquerait la fin du titre */
.hero-student-card { position: absolute; left: 0; top: 1.375rem; display: block; min-width: 9.5rem; padding: .5rem .625rem; transform: translateX(-50%); border-radius: 10px; background: #fff; box-shadow: 0 14px 30px -10px rgba(10, 30, 35, .5); text-align: left; white-space: nowrap; }
.hero-student-card::after { content: ''; position: absolute; left: 50%; top: -.3125rem; width: .625rem; height: .625rem; transform: translateX(-50%) rotate(45deg); background: #fff; }
/* À l'est du Niger, la bulle part vers la gauche pour ne pas sortir de l'écran */
.hero-student.is-east .hero-student-card { transform: translateX(-82%); }
.hero-student.is-east .hero-student-card::after { left: 82%; }
.hero-student-who { display: flex; align-items: center; gap: .25rem; font-size: .6875rem; color: var(--gm-text-3); }
.hero-student-who .bi { color: var(--gm-teal-700); }
.hero-student-grade { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: .125rem; font-size: .8125rem; font-weight: 600; color: var(--gm-text); }
.hero-student-grade strong { font-size: 1.0625rem; font-weight: 800; color: var(--gm-success); }
.hero-student-grade small { font-size: .6875rem; font-weight: 600; color: var(--gm-text-3); }
.hero-student-grade strong.is-progress { color: var(--gm-amber-700); }
.hero-student-grade strong.is-done { font-size: .9375rem; color: var(--gm-product-700); }
.hero-student-progress { display: block; height: .3125rem; margin-top: .375rem; border-radius: 999px; background: var(--gm-bg-alt); overflow: hidden; }
.hero-student-progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gm-amber); animation: gm-student-progress 18s ease-out infinite; animation-delay: var(--d); }
.hero-student-note { display: block; margin-top: .125rem; font-size: .6875rem; color: var(--gm-success); }
@keyframes gm-student {
    0% { opacity: 0; transform: translateY(8px) scale(.85); }
    3%, 14% { opacity: 1; transform: none; }
    16.5%, 100% { opacity: 0; transform: translateY(-6px) scale(.95); }
}
@keyframes gm-student-ring {
    0%, 2% { opacity: 0; transform: scale(.8); }
    4% { opacity: .9; }
    11%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes gm-student-progress {
    0%, 3% { width: 0; }
    13%, 100% { width: var(--p); }
}
/* En dessous de 1200 px, la carte passe derrière le titre : les étudiants gêneraient la lecture */
@media (max-width: 1199.98px) {
    .hero-students { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-student, .hero-student-avatar::after { animation: none; }
    .hero-student-progress > span { animation: none; width: var(--p); }
    .hero-student:first-child { opacity: 1; }
}