/* ==================================================================================================
   Arcchester Technologies — feuille de style unique du site.

   Aucun framework : le site précédent embarquait Bootstrap, jQuery, Font Awesome, Ionicons,
   OwlCarousel, Isotope, Lightbox, WOW et Animate — près de trois mégaoctets pour une page
   d'une seule colonne. Tout est réécrit ici en CSS moderne (grid, custom properties, clamp),
   et les icônes sont des SVG en ligne dans le HTML.

   Le thème suit trois états, et l'ordre des blocs ci-dessous porte cette logique :
     1. `:root` définit le thème clair — c'est le défaut, jamais conditionnel ;
     2. `@media (prefers-color-scheme: dark)`, restreint à `:not([data-theme="light"])`,
        applique le thème sombre au visiteur qui n'a rien choisi mais dont le système est sombre ;
     3. `:root[data-theme="dark"]` applique le sombre à celui qui l'a explicitement demandé.
   Sans le `:not()` du point 2, un visiteur au système sombre ne pourrait pas revenir au clair.
   ================================================================================================== */

/* --- Jetons ------------------------------------------------------------------------------------- */

:root {
    /* Fonds et surfaces */
    --bg:             #ffffff;
    --bg-alt:         #f4f8fd;
    --surface:        #ffffff;
    --surface-2:      #eff5fc;
    --surface-hover:  #e7f0fb;

    /* Texte */
    --text:           #0b1524;
    --text-2:         #445770;
    --text-3:         #6a7c95;

    /* Traits */
    --border:         #dde6f3;
    --border-strong:  #c4d3e9;

    /* Marque. Le bleu vif du pictogramme (#1E9EFF) est superbe mais ne passe pas le contraste
       sur blanc : la version employée pour le texte et les aplats est assombrie, le vif reste
       pour les dégradés et les fonds sombres. */
    --primary:        #1467d8;
    --primary-hover:  #0f54b4;
    --primary-soft:   #e6f0fe;
    --primary-vivid:  #1e9eff;
    --on-primary:     #ffffff;
    --accent:         #dd2a30;      /* le trait rouge du logo */

    --focus-ring:     rgba(20, 103, 216, .45);
    --shadow-sm:  0 1px 2px rgba(11, 21, 36, .06), 0 1px 3px rgba(11, 21, 36, .04);
    --shadow-md:  0 4px 12px rgba(11, 21, 36, .07), 0 2px 4px rgba(11, 21, 36, .04);
    --shadow-lg:  0 18px 45px rgba(11, 21, 36, .10), 0 6px 14px rgba(11, 21, 36, .05);

    /* Mesures */
    --wrap:       1180px;
    --radius:     14px;
    --radius-lg:  22px;
    --radius-pill: 999px;

    --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', var(--font-body);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:             #070e1a;
        --bg-alt:         #0b1526;
        --surface:        #0f1c30;
        --surface-2:      #14243c;
        --surface-hover:  #1a2d49;

        --text:           #e9effa;
        --text-2:         #a2b3cb;
        --text-3:         #7f92ae;

        --border:         #1d2f4a;
        --border-strong:  #2a4166;

        --primary:        #58a6ff;
        --primary-hover:  #82bcff;
        --primary-soft:   rgba(88, 166, 255, .13);
        --primary-vivid:  #38b0ff;
        --on-primary:     #04101f;
        --accent:         #ff5f65;

        --focus-ring:     rgba(88, 166, 255, .5);
        --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
        --shadow-md:  0 4px 14px rgba(0, 0, 0, .45);
        --shadow-lg:  0 20px 50px rgba(0, 0, 0, .55);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg:             #070e1a;
    --bg-alt:         #0b1526;
    --surface:        #0f1c30;
    --surface-2:      #14243c;
    --surface-hover:  #1a2d49;

    --text:           #e9effa;
    --text-2:         #a2b3cb;
    --text-3:         #7f92ae;

    --border:         #1d2f4a;
    --border-strong:  #2a4166;

    --primary:        #58a6ff;
    --primary-hover:  #82bcff;
    --primary-soft:   rgba(88, 166, 255, .13);
    --primary-vivid:  #38b0ff;
    --on-primary:     #04101f;
    --accent:         #ff5f65;

    --focus-ring:     rgba(88, 166, 255, .5);
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md:  0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg:  0 20px 50px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

/* --- Remise à zéro ------------------------------------------------------------------------------ */

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

html {
    scroll-behavior: smooth;
    /* Les ancres du menu ne doivent pas passer sous l'en-tête collant. */
    scroll-padding-top: 92px;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.022em;
    margin: 0 0 .5em;
    color: var(--text);
}

h1 { font-size: clamp(2.35rem, 1.55rem + 3.4vw, 4.05rem); }
h2 { font-size: clamp(1.95rem, 1.45rem + 2.1vw, 2.9rem); }
h3 { font-size: clamp(1.12rem, 1.02rem + .45vw, 1.32rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.06rem, 1rem + .35vw, 1.22rem); color: var(--text-2); }

/* Lien d'évitement : premier élément focusable de la page, invisible tant qu'il n'a pas le focus. */
.skip {
    position: absolute; top: 0; left: 0; z-index: 200;
    width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
    background: var(--primary); color: var(--on-primary);
    padding: .7rem 1.1rem; border-radius: 0 0 10px 0; font-weight: 600;
}
.skip:focus {
    width: auto; height: auto; clip-path: none; overflow: visible;
    color: var(--on-primary);
}

/* --- Ossature ----------------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }

section { padding-block: clamp(3.75rem, 2.5rem + 5vw, 6.5rem); }
section.tinted { background: var(--bg-alt); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.section-head.centred { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-display);
    font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-soft);
    padding: .38rem .8rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1.1rem;
}

.grid { display: grid; gap: 1.5rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

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

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font-family: var(--font-display);
    font-weight: 600; font-size: .975rem; line-height: 1;
    padding: .92rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
    white-space: nowrap;
    max-width: 100%;
}
@media (max-width: 640px) {
    /* Sous cette largeur, mieux vaut un libellé sur deux lignes qu'une page qui défile de côté. */
    .btn { white-space: normal; text-align: center; }
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); box-shadow: var(--shadow-lg); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); border-color: var(--primary); }

.btn-sm { padding: .62rem 1.05rem; font-size: .9rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

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

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}
.site-header.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }

.header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 74px; }

.brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.brand img { height: 34px; width: auto; }
/* Le logo est un PNG dont le mot-symbole est bleu foncé : lisible sur blanc, éteint sur fond
   nuit. Deux fichiers plutôt qu'un filtre CSS — un `brightness()` délave aussi le trait rouge. */
.brand .logo-dark { display: none; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark  { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand .logo-light { display: none; }
    :root:not([data-theme="light"]) .brand .logo-dark  { display: block; }
}

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
    font-family: var(--font-display);
    font-size: .93rem; font-weight: 500;
    color: var(--text-2);
    padding: .5rem .78rem; border-radius: 9px;
    transition: color .16s, background-color .16s;
}
.nav a:hover { color: var(--text); background: var(--surface-hover); }
.nav a.current { color: var(--primary); background: var(--primary-soft); }

.header-tools { display: flex; align-items: center; gap: .45rem; flex: none; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    background: transparent; color: var(--text-2);
    border: 1.5px solid var(--border); border-radius: 11px;
    cursor: pointer; transition: color .16s, border-color .16s, background-color .16s;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-hover); }
.icon-btn svg { width: 19px; height: 19px; }

/* Bascule de thème : la lune et le soleil vivent dans le même bouton, un seul est rendu. */
.icon-btn .icon-sun { display: none; }
:root[data-theme="dark"] .icon-btn .icon-sun  { display: block; }
:root[data-theme="dark"] .icon-btn .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon-btn .icon-sun  { display: block; }
    :root:not([data-theme="light"]) .icon-btn .icon-moon { display: none; }
}

.lang-switch {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--border); border-radius: 11px; overflow: hidden;
}
.lang-switch a {
    font-family: var(--font-display);
    font-size: .8rem; font-weight: 600; letter-spacing: .03em;
    color: var(--text-3); padding: .5rem .62rem; line-height: 1.2;
    transition: color .16s, background-color .16s;
}
.lang-switch a:hover { color: var(--text); background: var(--surface-hover); }
.lang-switch a[aria-current="true"] { color: var(--on-primary); background: var(--primary); }

.nav-toggle { display: none; }

@media (max-width: 960px) {
    .nav-toggle { display: inline-flex; }
    .nav {
        position: fixed; inset: 74px 0 auto; z-index: 99;
        flex-direction: column; align-items: stretch; gap: .15rem;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        padding: .85rem 1.5rem 1.35rem;
        max-height: calc(100dvh - 74px); overflow-y: auto;
        display: none;
    }
    .nav.open { display: flex; }
    .nav a { padding: .8rem .7rem; font-size: 1rem; }
    .header-cta { display: none; }
}

@media (max-width: 420px) {
    .wrap { padding-inline: 1.1rem; }
    .header-inner { gap: .6rem; min-height: 64px; }
    .brand img { height: 27px; }
    .header-tools { gap: .3rem; }
    .icon-btn { width: 36px; height: 36px; border-radius: 9px; }
    .lang-switch a { padding: .45rem .5rem; font-size: .74rem; }
    .nav { inset-block-start: 64px; }
}

/* --- Héros -------------------------------------------------------------------------------------- */

.hero {
    position: relative; overflow: hidden;
    padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem) clamp(3rem, 2rem + 4vw, 5rem);
}
/* Halo de marque : deux taches de couleur très diluées, posées derrière le contenu. Elles
   remplacent l'image de fond de 48 Ko du gabarit précédent. */
.hero::before {
    content: ''; position: absolute; inset: -30% -10% auto -10%; height: 130%;
    background:
        radial-gradient(52rem 32rem at 78% 8%,  color-mix(in srgb, var(--primary-vivid) 17%, transparent), transparent 68%),
        radial-gradient(40rem 28rem at 4% 92%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 70%);
    pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid {
    display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4rem);
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: .55rem; }
.hero h1 .hl {
    background: linear-gradient(100deg, var(--primary) 10%, var(--primary-vivid) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { max-width: 34rem; margin-bottom: 2rem; }

.hero-figure { position: relative; }
.hero-figure svg { width: 100%; height: auto; filter: drop-shadow(var(--shadow-lg)); }
@media (max-width: 940px) { .hero-figure { max-width: 30rem; margin-inline: auto; } }

/* Bandeau de chiffres sous le héros */
.stats {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(2.75rem, 2rem + 3vw, 4rem);
    padding-top: clamp(2rem, 1.5rem + 2vw, 2.75rem);
    border-top: 1px solid var(--border);
}
.stat .num {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.85rem, 1.5rem + 1.5vw, 2.5rem);
    line-height: 1; color: var(--text); letter-spacing: -.03em;
}
.stat .lbl { font-size: .92rem; color: var(--text-3); margin-top: .45rem; }
@media (max-width: 620px) { .stats { grid-template-columns: 1fr; gap: 1.5rem; } }

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

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    display: flex; flex-direction: column;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-2); font-size: .975rem; margin: 0; }

.card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-bottom: 1.15rem;
    border-radius: 13px;
    background: var(--primary-soft); color: var(--primary);
    flex: none;
}
.card-icon svg { width: 23px; height: 23px; }

/* --- Produits ----------------------------------------------------------------------------------- */

.product {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    display: flex; flex-direction: column; gap: .85rem;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.product:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.product-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.product-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    background: var(--primary-soft); color: var(--primary);
}
.product-icon svg { width: 21px; height: 21px; }

.price {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    color: var(--text); white-space: nowrap;
}
.price small { display: block; font-weight: 500; font-size: .72rem; color: var(--text-3); letter-spacing: .02em; }

.product h3 { font-size: 1.1rem; margin: 0; }
.product p { color: var(--text-2); font-size: .95rem; margin: 0; flex: 1; }

.product-foot { display: flex; align-items: center; gap: .75rem; margin-top: .35rem; flex-wrap: wrap; }
.tag {
    font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-3); border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: .25rem .6rem;
}
.product-link {
    font-family: var(--font-display); font-weight: 600; font-size: .93rem;
    display: inline-flex; align-items: center; gap: .35rem; margin-left: auto;
}
.product-link svg { width: .95em; height: .95em; transition: transform .18s; }
.product:hover .product-link svg { transform: translateX(3px); }

/* --- Piliers (deux colonnes texte + liste) ------------------------------------------------------ */

.split { display: grid; gap: clamp(2.25rem, 1rem + 4vw, 3.75rem); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.pillars { display: grid; gap: 1.35rem; }
.pillar { display: flex; gap: 1.1rem; }
.pillar-num {
    font-family: var(--font-display); font-weight: 700; font-size: .85rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    background: var(--primary); color: var(--on-primary);
}
.pillar h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.pillar p { color: var(--text-2); font-size: .97rem; margin: 0; }

/* --- Clients ------------------------------------------------------------------------------------ */

.logos {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* 8 logos = deux rangées pleines */
}
@media (max-width: 780px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Le fond des cellules reste clair dans les deux thèmes, et les logos gardent leurs couleurs.
   La première version les désaturait sur la surface du thème — élégant sur le papier, illisible
   en pratique : trois de ces huit logos sont un aplat de couleur (le carré orange d'Orange, le
   pavé magenta d'inwi, le bloc jaune et rouge d'Attijariwafa), et un filtre `grayscale` les
   réduit à des rectangles gris. En thème sombre, `brightness` finissait de les effacer.
   Une plaque claire est ce que fait n'importe quel mur de logos sérieux : chaque marque est
   rendue telle que son propriétaire l'a dessinée. */
.logo-cell {
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.4rem 1.15rem; min-height: 7rem;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.logo-cell:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.logo-cell img { max-height: 3.3rem; width: auto; object-fit: contain; }

/* --- Équipe ------------------------------------------------------------------------------------- */

.people { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.person { text-align: center; }

/* Photo et monogramme partagent exactement le même gabarit : même diamètre, même anneau, même
   ombre. C'est ce qui permet de mélanger les deux dans une même rangée sans que l'un ait l'air
   d'un trou à la place de l'autre. */
.person img,
.person .avatar-mono {
    width: 148px; height: 148px; border-radius: 50%;
    margin: 0 auto 1.1rem;
    border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--border), var(--shadow-md);
}
.person img { object-fit: cover; }

/* Monogramme, employé quand nous n'avons pas de photographie de la personne.
   Un portrait fabriqué serait pire que pas de portrait du tout : sur la page « équipe » d'une
   société de services, un visage qui n'existe pas est précisément ce qu'un prospect méfiant
   cherche — et il se repère. Des initiales n'affirment rien. */
.person .avatar-mono {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-vivid) 100%);
    color: #fff;
    font-family: var(--font-display); font-weight: 700;
    font-size: 2.6rem; letter-spacing: .04em; line-height: 1;
    user-select: none;
}
.person h3 { font-size: 1.08rem; margin-bottom: .15rem; }
.person .role { color: var(--primary); font-size: .9rem; font-weight: 600; font-family: var(--font-display); }

/* --- Contact ------------------------------------------------------------------------------------ */

.contact-grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { display: grid; gap: .9rem; list-style: none; margin: 0; padding: 0; }
.contact-item {
    display: flex; gap: 1rem; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.15rem 1.25rem;
    transition: border-color .2s, background-color .2s;
}
.contact-item:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.contact-item .card-icon { width: 40px; height: 40px; margin: 0; border-radius: 11px; }
.contact-item .card-icon svg { width: 19px; height: 19px; }
.contact-item .k { font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.contact-item .v { color: var(--text); font-weight: 500; word-break: break-word; }
a.contact-item { color: inherit; }
a.contact-item:hover .v { color: var(--primary); }


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

.cta-band {
    background: linear-gradient(115deg, var(--primary) 0%, color-mix(in srgb, var(--primary-vivid) 78%, var(--primary)) 100%);
    border-radius: var(--radius-lg);
    padding: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    color: #fff;
    display: grid; gap: 1.75rem; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    box-shadow: var(--shadow-lg);
}
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } }
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band p { color: rgba(255, 255, 255, .9); margin: 0; }
.cta-band .btn-primary { background: #fff; color: var(--primary); }
.cta-band .btn-primary:hover { background: rgba(255, 255, 255, .9); color: var(--primary); }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }

.contact-grid .cta-band { grid-template-columns: 1fr; }

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

.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding-block: 3.25rem 2rem; }
.footer-grid {
    display: grid; gap: 2.25rem;
    grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(9rem, 1fr));
    margin-bottom: 2.5rem;
}
.site-footer .brand { margin: 0 0 1rem; }
.site-footer p { color: var(--text-2); font-size: .95rem; max-width: 26rem; }
.footer-col h4 {
    font-family: var(--font-display); font-size: .8rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-bottom: .9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--text-2); font-size: .95rem; }
.footer-col a:hover { color: var(--primary); }

.social { display: flex; gap: .55rem; margin-top: 1.25rem; }
.social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1.5px solid var(--border); color: var(--text-2);
    transition: color .16s, border-color .16s, background-color .16s;
}
.social a:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.social svg { width: 18px; height: 18px; }

.footer-bar {
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
    padding-top: 1.75rem; border-top: 1px solid var(--border);
    color: var(--text-3); font-size: .88rem;
}
.footer-bar nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bar a { color: var(--text-3); }
.footer-bar a:hover { color: var(--primary); }

/* --- Pages de texte (mentions, politique de confidentialité) ------------------------------------ */

.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); margin-top: 2.5rem; }
.prose h2:first-of-type { margin-top: 0; }
.prose ul { padding-left: 1.25rem; color: var(--text-2); }
.prose li { margin-bottom: .5rem; }
.prose p { color: var(--text-2); }

/* --- Apparition au défilement -------------------------------------------------------------------- */

/* Piloté par JS : la classe `reveal` n'est posée que si le script tourne, de sorte qu'un
   visiteur sans JavaScript voit la page entière plutôt qu'une page vide. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.shown { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; }
}