/* ══════════════════════════════════════════════════════════════
   ALLIANCE SOLAR HAÏTI — Système de design

   Toute la charte découle du logo : un soleil ambre et un triangle
   composé de sous-triangles en dégradé d'indigo. Trois règles en
   sortent, et elles ne se négocient pas :

     · l'indigo porte la STRUCTURE (navigation, pied de page,
       titres, aplats sombres) ;
     · l'ambre est un ACCENT : appels à l'action et chiffres clés,
       rien d'autre — un accent employé partout n'accentue plus ;
     · le blanc porte la RESPIRATION, généreusement.

   La tessellation triangulaire du logo est reprise comme motif
   propriétaire : puces en losange, séparateurs, fonds en filigrane.

   Sommaire
     1. Jetons          6. Navigation        11. Pied de page
     2. Base            7. Bandeau de page   12. Contact flottant
     3. Structure       8. Boutons           13. Apparition
     4. Titres          9. Cartes            14. Adaptatif
     5. Barre util.    10. Blocs éditoriaux  15. Impression
   ══════════════════════════════════════════════════════════════ */

/* ═══════════ 1. JETONS ═══════════ */

:root {
    /* Indigo — échantillonné dans le logo */
    --indigo-950: #14152E;
    --indigo-900: #23256B;
    --indigo-800: #2D2F86;
    --indigo-700: #34379A;
    --indigo-600: #4348A4;
    --indigo-500: #5258AE;
    --indigo-400: #7B78BB;
    --indigo-300: #A09ECD;
    --indigo-200: #C4C3E2;
    --indigo-100: #DCD8EF;
    --indigo-50:  #F0EFF9;

    /* Ambre — le soleil du logo.
       `--amber-600` ne sert qu'à écrire du petit texte sur fond clair :
       surtitres, « HAÏTI » sous le logo, étiquettes de fiche. À #D8871A il
       ne donnait que 2,84 de contraste sur blanc et 2,65 sur le gris des
       sections, là où la norme AA en exige 4,5 — illisible à 12 px, et plus
       encore en plein soleil. #9A6206 monte à 5,09 et 4,76 en restant de la
       même famille. Les aplats et les traits gardent l'ambre franc
       ci-dessous : sur une surface, le contraste ne se pose pas. */
    --amber-600: #9A6206;
    --amber-500: #F2A225;
    --amber-400: #FBB94C;
    --amber-100: #FCE0AE;
    --amber-50:  #FEF6E7;

    /* Neutres, légèrement biaisés vers l'indigo pour rester dans la famille */
    --ink:       #14152E;
    --body:      #3E4060;
    --muted:     #6B6D88;
    --rule:      #E1E1EE;
    --rule-soft: #EDEDF6;
    --surface:   #FFFFFF;
    --surface-2: #F6F7FB;
    --surface-3: #EFF0F8;

    --whatsapp:  #25D366;

    /* Typographie */
    --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;

    /* Rayons */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 30px;
    --r-pill: 999px;

    /* Ombres teintées d'indigo — jamais du noir pur, qui grise la couleur */
    --shadow-sm: 0 1px 2px rgba(35,37,107,.06), 0 2px 8px rgba(35,37,107,.05);
    --shadow-md: 0 4px 12px rgba(35,37,107,.08), 0 12px 32px rgba(35,37,107,.07);
    --shadow-lg: 0 12px 28px rgba(35,37,107,.12), 0 32px 64px rgba(35,37,107,.10);
    --shadow-amber: 0 8px 24px rgba(242,162,37,.32);

    /* Rythme */
    /* Le retrait s'ajoute des deux côtés : deux sections voisines étaient
       séparées de 208 px à 104, encore 168 à 84. Avec la moitié des blocs
       retirés, cet intervalle se lisait comme un trou plutôt que comme une
       respiration. À 72, il en reste 144 — assez pour séparer, trop peu
       pour qu'on se demande si la page est finie. */
    --section-y: 72px;
    --wrap: 1240px;
    --header-h: 85px;

    --ease: cubic-bezier(.22,.61,.36,1);
}

/* ═══════════ 2. BASE ═══════════ */

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

/* Le `[hidden] { display: none }` des navigateurs n'est qu'un sélecteur
   d'attribut : la moindre règle de classe posant un `display` le bat, et
   l'attribut cesse alors de masquer quoi que ce soit. Deux composants s'y
   étaient déjà laissé prendre — le panneau off-canvas, puis le bouton du
   carrousel, qui restait affiché sur les diapositives sans bouton. Ce
   rappel global rend l'attribut fiable partout. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    /* Compense la navigation collante lors des sauts d'ancre. */
    scroll-padding-top: calc(var(--header-h) + 16px);
    /* Le panneau de menu mobile, fermé, est décalé hors écran à droite et
       élargit la zone défilable du document. `clip` supprime ce défilement
       horizontal parasite — et, contrairement à `hidden`, n'établit pas de
       conteneur de défilement, ce qui laisse fonctionner position: sticky. */
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--body);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* `clip` et non `hidden`, pour la même raison qu'au-dessus sur <html> —
       et c'est bien ici que la précaution manquait. `hidden` fait du corps
       un conteneur de défilement, et la navigation collante s'accroche
       alors à lui plutôt qu'à la fenêtre : elle partait vers le haut dès
       qu'on faisait défiler la page. `clip` coupe le débordement sans
       créer ce conteneur. */
    overflow-x: clip;
}

/* `height: auto` n'est pas décoratif, il est indispensable.

   Les vues posent `width` et `height` sur chaque image — ces attributs
   réservent la place avant le chargement et évitent que la page saute. Mais
   le navigateur les traduit aussi en styles de présentation
   (`width: 1280px; height: 960px`). Nos composants ne redéfinissent que la
   largeur et comptent sur `aspect-ratio` pour la hauteur : or
   `aspect-ratio` est ignoré dès que les deux dimensions sont définies. La
   hauteur de l'attribut l'emportait donc, et une photo au format portrait
   étirait son bloc sur toute sa longueur.

   Remettre la hauteur en `auto` rend la main à `aspect-ratio`. Les
   composants qui fixent réellement une hauteur passent tous par une
   classe, de spécificité supérieure : ils ne sont pas touchés. */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--amber-100); color: var(--indigo-950); }

:focus-visible {
    outline: 3px solid var(--amber-500);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Lien d'évitement : premier élément focusable, invisible tant qu'il n'a
   pas le focus. Indispensable pour la navigation au clavier. */
.skip {
    position: absolute;
    left: -9999px;
    z-index: 1000;
    padding: 14px 24px;
    background: var(--amber-500);
    color: var(--indigo-950);
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; top: 0; }

/* Texte réservé aux lecteurs d'écran.
   Dans une grille de cartes, répéter « Voir le produit » à l'identique est
   un bon choix visuel — la cohérence aide à balayer. Mais un lecteur
   d'écran qui liste les liens entend alors quatre fois la même chose sans
   pouvoir les distinguer. Ce complément invisible nomme la destination.
   Pas de `display: none` ni de `visibility: hidden` : l'un comme l'autre
   retireraient le texte de la restitution vocale, ce qu'on cherche
   précisément à éviter. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ═══════════ 3. STRUCTURE ═══════════ */

.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }

.section { padding: var(--section-y) 0; position: relative; }
.section--tint { background: var(--surface-2); }
.section--ink  { background: var(--indigo-950); color: rgba(232,232,244,.78); }
.section--ink h2,
.section--ink h3 { color: #fff; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Motif de triangles en filigrane, sur les aplats sombres uniquement. */
.tess {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.04) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,.04) 25%, transparent 25%);
    background-size: 56px 56px;
}

/* ═══════════ 4. TITRES ═══════════ */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.14;
    letter-spacing: -.02em;
    margin: 0 0 .55em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 4.8vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 600; }

p { margin: 0 0 1.1em; }

/* Surtitre : le trait qui le précède évoque un rayon du soleil du logo. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-display);
    font-size: .77rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber-600);
    margin: 0 0 18px;
}
.eyebrow::before {
    content: '';
    width: 26px; height: 2px;
    background: var(--amber-500);
    border-radius: 2px;
}
.section--ink .eyebrow { color: var(--amber-400); }

.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* Une tête réduite à son seul surtitre gardait la marge prévue pour un
   ensemble complet — 52 px de vide sous un mot, depuis que les titres ont
   été mis en commentaire. `:has()` détecte l'absence de titre ; là où il
   n'est pas reconnu, la marge normale s'applique, ce qui est sans gravité. */
.section-head:not(:has(h2)) { margin-bottom: 18px; }

/* `:not(.eyebrow)` est indispensable : le surtitre est lui aussi un <p>,
   et « .section-head p » (spécificité 0,1,1) l'emporterait sur « .eyebrow »
   (0,1,0), effaçant sa couleur ambre et sa petite taille. */
/* `max-width` en `ch` et non en pixels : l'unité suit la taille de police,
   donc la longueur de ligne reste la même quand le corps du texte change.
   Sans ce plafond le chapô atteignait 92 caractères par ligne — au-delà de
   ~80, l'œil perd le début de la ligne suivante. Le titre, lui, garde les
   720px du bloc : un intertitre long ne se lit pas en continu. */
.section-head p:not(.eyebrow) {
    font-size: 1.06rem;
    color: var(--muted);
    margin: 0;
    max-width: 58ch;
}
.section-head--center p:not(.eyebrow) { margin-inline: auto; }
.section--ink .section-head p:not(.eyebrow) { color: rgba(232,232,244,.72); }

.lead { font-size: 1.1rem; line-height: 1.72; }

/* — Longueur de ligne du texte suivi —
   Une colonne large n'est pas une colonne lisible : au-delà d'environ 80
   caractères, l'œil ne retrouve plus le début de la ligne suivante. Les
   blocs ci-dessous sont ceux qui, mesurés, dépassaient ce seuil sur grand
   écran — jusqu'à 139 caractères pour la mention sous le formulaire.

   Le plafond est en `ch` : l'unité suit la taille de police, la longueur de
   ligne reste donc constante quel que soit le corps du texte. Il reste sans
   effet partout où la colonne est déjà plus étroite — cartes, colonnes de
   grille, mobile — puisque c'est un maximum.

   `.section > .wrap > p` vise le paragraphe placé directement dans le
   conteneur de contenu : à cette position il est forcément du texte suivi,
   jamais un élément de composant. */
.stripe-body p,
.section > .wrap > p,
.field-hint,
.lead { max-width: 58ch; }

/* Plus serré sur les pages légales : ailleurs le texte est parcouru par
   blocs courts, ici il se lit d'une traite sur plusieurs écrans. Le bloc
   garde ses 800px pour le tableau d'identification, qui se consulte du
   regard au lieu de se lire.

   Le sélecteur reprend `.section > .wrap` : à spécificité inférieure, la
   règle générale ci-dessus l'emporterait et ce plafond resterait lettre
   morte. */
.section > .wrap.legal-prose > p,
.wrap.legal-prose li { max-width: 46ch; }

/* ═══════════ 6. NAVIGATION ═══════════ */

.nav {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule);
    transition: box-shadow .3s var(--ease);
}
.nav.is-stuck { box-shadow: var(--shadow-md); }

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 60px; width: auto; }
/* `margin-left: auto` pousse le menu contre la droite.

   `justify-content: space-between` répartit trois éléments : la marque, le
   menu, et le bloc d'actions. Ce dernier ne contenant plus que le bouton
   d'ouverture du panneau — masqué au-dessus de 1024px — il reste un
   élément de largeur nulle collé au bord droit, et le menu se retrouvait
   centré avec 250 px de vide à sa droite. La marge automatique le ramène
   là où on l'attend. */
.nav-menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.nav-link {
    position: relative;
    display: block;
    padding: 10px 14px;
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 500;
    color: var(--body);
    border-radius: var(--r-sm);
    transition: color .22s var(--ease), background-color .22s var(--ease);
}
.nav-link:hover { color: var(--indigo-700); background: var(--indigo-50); }
.nav-link.is-active { color: var(--indigo-700); font-weight: 600; }
/* Trait ambre sous le lien courant : même signal que le surtitre. */
.nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 3px;
    height: 2px; border-radius: 2px;
    background: var(--amber-500);
}

.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.nav-toggle {
    display: none;
    width: 46px; height: 46px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.nav-toggle span {
    width: 20px; height: 2px;
    background: var(--indigo-700);
    border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s 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); }

/* ═══════════ 6 bis. PANNEAU OFF-CANVAS ═══════════

   Le panneau et son voile sont des enfants directs de <body> : `.nav`
   porte un `backdrop-filter`, qui ferait de l'entête le bloc conteneur de
   tout descendant en `position: fixed`. Placés à l'intérieur, ils se
   réduisaient à la hauteur de la barre.

   L'attribut [hidden] est posé par le script à la fermeture, après la
   transition : il retire le panneau du parcours au clavier et de l'arbre
   d'accessibilité, ce que `translateX` seul ne fait pas — on tabulait
   sinon dans des liens hors écran. */

.oc-scrim {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(20,21,46,.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.oc-scrim.is-open { opacity: 1; }

.oc {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 250;
    width: min(340px, 88vw);
    display: flex;
    flex-direction: column;
    padding: 20px 0 28px;
    background: var(--surface);
    box-shadow: -18px 0 48px rgba(20,21,46,.22);
    transform: translateX(100%);
    transition: transform .32s var(--ease);
    overflow-y: auto;
    /* Le défilement s'arrête au bord du panneau au lieu de se propager à
       la page derrière lui. */
    overscroll-behavior: contain;
}
.oc.is-open { transform: none; }

/* Le masquage par [hidden] — indispensable ici, sans quoi l'on tabulerait
   dans les liens d'un panneau pourtant hors écran — est assuré par la
   règle globale posée en tête de feuille. */

.oc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px 18px;
    border-bottom: 1px solid var(--rule);
}
.oc-head .brand img { height: 40px; }
.oc-close {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--indigo-50);
    border: 0;
    border-radius: var(--r-sm);
    color: var(--indigo-700);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.oc-close:hover { background: var(--indigo-700); color: #fff; }

.oc-nav { display: flex; flex-direction: column; padding: 14px 12px 0; }

.oc-link {
    display: flex;
    align-items: center;
    /* 52px de haut : au-dessus des 44px recommandés pour une cible
       tactile, sans allonger la liste au point de la faire défiler. */
    min-height: 52px;
    padding: 0 14px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--body);
    border-radius: var(--r-md);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.oc-link:hover { background: var(--indigo-50); color: var(--indigo-700); }

/* Page courante : fond teinté plus barre ambre à gauche. Le trait seul,
   comme en version bureau, se perd dans une liste verticale. */
.oc-link.is-active {
    position: relative;
    background: var(--indigo-50);
    color: var(--indigo-700);
    font-weight: 600;
}
.oc-link.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--amber-500);
}

.oc-cta { padding: 18px 20px 0; }
.oc-cta .btn { display: inline-flex; width: 100%; justify-content: center; }

.oc-contact {
    list-style: none;
    margin: 20px 20px 0;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    display: grid;
    font-size: .9rem;
}
.oc-contact li { display: flex; align-items: center; gap: 11px; }
.oc-contact i { width: 17px; text-align: center; color: var(--indigo-500); }
/* Le lien occupe toute la ligne et non ses seuls caractères : appeler ou
   écrire depuis le menu sont les deux gestes les plus probables sur
   mobile, et 44px est la hauteur minimale d'une cible tactile. */
.oc-contact a {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--body);
}
.oc-contact a:hover { color: var(--indigo-700); }

.oc-social { display: flex; gap: 8px; margin: 16px 20px 0; }
.oc-social a {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--indigo-50);
    border-radius: 50%;
    color: var(--indigo-700);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.oc-social a:hover { background: var(--amber-500); color: var(--indigo-950); }

/* Au-dessus du point de bascule, le panneau n'a plus lieu d'être : la
   barre affiche tous les liens. Il reste masqué même si un script laissait
   traîner la classe. */
@media (min-width: 1025px) {
    .oc, .oc-scrim { display: none !important; }
}

/* ═══════════ 7. BANDEAU DE PAGE ═══════════ */

/* Entête des pages intérieures : plus court que le hero d'accueil, il
   situe la page sans lui voler la vedette. */
.banner {
    position: relative;
    padding: 68px 0 60px;
    background: linear-gradient(120deg, var(--indigo-950) 0%, var(--indigo-900) 58%, var(--indigo-700) 100%);
    color: #fff;
    overflow: hidden;
}
.banner-inner { position: relative; z-index: 2; }
.banner h1 { color: #fff; margin-bottom: 12px; }
/* 48ch et non 66 : `ch` mesure le chiffre « 0 », plus large que la moyenne
   des lettres, si bien que 66ch laissait passer 92 caractères par ligne.
   Valeur calée sur le texte rendu, pas sur l'unité. */
.banner p { color: rgba(255,255,255,.8); max-width: 60ch; margin: 0; }

/* Halo ambre évoquant le soleil, hors cadre à droite. */
.banner::after {
    content: '';
    position: absolute;
    top: -180px; right: -120px;
    width: 440px; height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,162,37,.3) 0%, transparent 68%);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: .84rem;
    color: rgba(255,255,255,.62);
}
.crumbs a:hover { color: var(--amber-400); }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; opacity: .5; }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs [aria-current] { color: #fff; }

/* ═══════════ 8. BOUTONS ═══════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: var(--font-display);
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: -.01em;
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease),
                background-color .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Ambre : le seul bouton qui « appelle » vraiment. */
.btn-primary {
    background: var(--amber-500);
    color: var(--indigo-950);
    box-shadow: var(--shadow-amber);
}
.btn-primary:hover { background: var(--amber-400); box-shadow: 0 12px 30px rgba(242,162,37,.42); }

.btn-outline { border-color: var(--indigo-200); color: var(--indigo-700); }
.btn-outline:hover { border-color: var(--indigo-600); background: var(--indigo-50); }

/* Appel à l'action de la navigation : discret, pour ne pas écraser le
   menu ni le logo. C'est un repère permanent, pas le bouton principal
   de la page — celui-là vit dans le hero. */
.nav-actions .btn {
    padding: 9px 16px;
    font-size: .8rem;
    gap: 7px;
}
.nav-actions .btn i { font-size: .88em; }
.btn-block { width: 100%; }

/* Lien fléché : la flèche avance au survol pour signaler la continuité. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .93rem;
    /* Même indigo que les autres liens de texte. Deux nuances voisines
       cohabitaient sans que rien ne les distingue : c'était une décision à
       reprendre à chaque nouvelle page. */
    color: var(--indigo-700);
}
.link-arrow i { transition: transform .25s var(--ease); }
.link-arrow:hover i { transform: translateX(5px); }
.section--ink .link-arrow { color: var(--amber-400); }

/* ═══════════ 9. CARTES ═══════════ */

/* — Service — */
.card-service {
    position: relative;
    padding: 34px 30px 30px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* Liseré qui se déploie au survol, dans la teinte propre au service. */
.card-service::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: var(--tint, var(--amber-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}
.card-service:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card-service:hover::before { transform: scaleX(1); }

.card-icon {
    width: 56px; height: 56px;
    margin-bottom: 20px;
    display: grid; place-items: center;
    font-size: 1.35rem;
    color: var(--tint, var(--indigo-600));
    background: color-mix(in srgb, var(--tint, #4348A4) 11%, #fff);
    border-radius: var(--r-md);
    transition: transform .3s var(--ease);
}
.card-service:hover .card-icon { transform: scale(1.08) rotate(-4deg); }
.card-service p { color: var(--muted); font-size: .94rem; margin-bottom: 16px; }

/* — Produit — */
.card-product {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card-product:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Le filet du bas n'est pas décoratif : les photos produits du
   constructeur sont détourées sur fond blanc et se fondaient dans la
   carte, blanche elle aussi — le haut de la carte semblait vide. */
.card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-3);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card-product:hover .card-media img { transform: scale(1.06); }

.card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body p { font-size: .91rem; color: var(--muted); margin-bottom: 14px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--indigo-700);
    background: var(--indigo-50);
    border-radius: var(--r-pill);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }

.badge {
    position: absolute;
    top: 13px;
    padding: 5px 12px;
    font-family: var(--font-display);
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: var(--r-pill);
}

.badge-brand { right: 13px; color: var(--indigo-950); background: var(--amber-500); }

/* — Réalisation — */
.card-project {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--indigo-950);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card-project:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-project img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.card-project:hover img { transform: scale(1.07); }
.card-project::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20,21,46,.95) 12%, rgba(23,24,69,.5) 48%, transparent 78%);
}
.card-project-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 26px 24px; color: #fff; }
.card-project-body h3 { color: #fff; font-size: 1.1rem; margin-bottom: 12px; }
.card-project .chip {
    color: #fff;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.18);
}

/* — Solution — */
.card-solution {
    position: relative;
    padding: 32px 28px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card-solution:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

/* Puce en losange : écho direct de la tessellation du logo. */
.bullets { display: grid; gap: 7px; margin: 0 0 18px; }
.bullets li { position: relative; padding-left: 19px; font-size: .9rem; }
.bullets li::before {
    content: '';
    position: absolute;
    left: 1px; top: .6em;
    width: 6px; height: 6px;
    background: var(--amber-500);
    transform: rotate(45deg);
}

/* ═══════════ 10. BLOCS ÉDITORIAUX ═══════════ */

/* — Accordéon — */
.accordion { display: grid; gap: 12px; max-width: 840px; }
.accordion-item {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.accordion-item.is-open { border-color: var(--indigo-200); box-shadow: var(--shadow-sm); }

.accordion-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 25px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    color: var(--ink);
    background: transparent;
    border: none;
    cursor: pointer;
}
.accordion-q i { color: var(--indigo-500); flex-shrink: 0; transition: transform .3s var(--ease); }
.accordion-item.is-open .accordion-q { color: var(--indigo-700); }
.accordion-item.is-open .accordion-q i { transform: rotate(180deg); color: var(--amber-500); }

/* L'ouverture anime grid-template-rows : aucune hauteur codée en dur,
   donc aucune réponse longue n'est coupée. */
.accordion-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--ease);
}
.accordion-item.is-open .accordion-a { grid-template-rows: 1fr; }
.accordion-a > div { overflow: hidden; }
/* Le bandeau de question occupe les 840px du bloc, mais la réponse est du
   texte suivi : laissée libre elle se lisait sur 118 caractères par ligne.
   Le blanc à droite du paragraphe est voulu — il vaut mieux qu'une ligne
   que l'œil ne sait plus raccrocher. */
.accordion-a p {
    margin: 0;
    padding: 0 25px 22px;
    font-size: .95rem;
    color: var(--muted);
    max-width: 58ch;
}

/* — Tableau de spécifications — */
.specs { width: 100%; border-collapse: collapse; }
.specs th, .specs td { padding: 13px 0; text-align: left; border-bottom: 1px solid var(--rule-soft); }
.specs th { font-weight: 500; color: var(--muted); font-size: .9rem; }
.specs td { font-family: var(--font-mono); font-size: .88rem; color: var(--ink); text-align: right; }

/* ═══════════ 10 bis. SECTIONS DE L'ACCUEIL ═══════════ */

/* — Partenaires —
   Les logos seuls, sous le carrousel. Aucun cadre, aucun fond : une
   pastille autour d'un logotype le fait ressembler à un bouton, et ces
   images ne mènent nulle part. */
.partners-band { padding-top: 48px; padding-bottom: 48px; }

/* Défilement continu des logos, pleine largeur. Chaque copie de la liste
   fait au moins la largeur de l'écran ; la piste en porte deux et glisse de
   la moitié de sa largeur, puis recommence. */
.partners-slide {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.partners-track {
    display: flex;
    width: max-content;
    animation: partners-defile 28s linear infinite;
}
.partners-slide:hover .partners-track { animation-play-state: paused; }
@keyframes partners-defile { to { transform: translateX(-50%); } }

.partners {
    display: flex;
    flex: 0 0 auto;
    min-width: 100vw;
    justify-content: space-around;
    align-items: center;
    gap: 28px 72px;
    list-style: none;
    margin: 0;
    padding: 0 36px;
}

/* Les éléments de flex sont les `li` : c'est là que se règle la mise en
   rangée, pas sur l'image. */
.partners > li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }

/* Mention discrète sous le logo. */
.partner-label {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Deux plafonds, pas un seul.

   Le logo LuxPowerTek fait 1030 x 186, soit un rapport de 5,5 : borné par
   la seule hauteur, il s'étalerait sur plus de 300 px de large. Un futur
   logo carré borné par la seule largeur deviendrait, lui, un pavé. Les
   deux bornes ensemble inscrivent chaque logotype dans une même boîte,
   quelle que soit sa forme, et `object-fit: contain` l'y fait tenir
   entier.

   `height: auto` neutralise l'attribut `height` émis par les vues, qui
   sinon écraserait ce dimensionnement. */
.partners img {
    max-width: 240px;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 560px) {
    .partners img { max-width: 200px; max-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .partners-track { animation: none; }
}

/* — Carrousel de hero — */

.hero {
    position: relative;
    /* La hauteur découle entièrement du rapport déclaré ici : à 1440 le
       bandeau vaut 572 px, à 1920 il en vaut 765.

       Il n'y a volontairement plus de `min-height`. Celle qui s'y trouvait
       — `clamp(640px, 990px)` — était invalide : `clamp()` attend trois
       valeurs, et avec deux le navigateur écarte la déclaration entière.
       Elle ne produisait donc aucun effet, et la retirer ne change rien à
       l'affichage. La laisser aurait entretenu l'illusion d'un plancher
       actif et masqué la règle qui décide réellement.

       `width: 100%` n'est pas décoratif : sans largeur définie, le rapport
       se résout dans l'autre sens et c'est la largeur qui se déduit de la
       hauteur — le bandeau était sorti à 1537 px dans une fenêtre de 1425,
       débordement masqué par `overflow-x: clip` donc invisible à l'œil,
       mais le contenu s'en trouvait décentré. */
    width: 100%;
    aspect-ratio: 2241 / 900;
    display: flex;
    align-items: center;
    background: var(--indigo-950);
    overflow: hidden;
}

/* `overflow: hidden` ici et pas seulement sur .hero : le zoom lent
   agrandit l'image de 6 %, qui dépasse alors de sa vue. Compter sur le
   rognage d'un ancêtre marche tant que personne n'y touche — autant
   contenir le débordement là où il naît. */
.hero-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    /* 700 ms : le carrousel change de vue toutes les 4,2 s, un fondu d'une
       seconde y occupait près du quart du cycle et donnait une impression
       de flottement. */
    transition: opacity .7s var(--ease);
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }

.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Zoom très lent sur la vue active : donne de la vie sans distraire
   de la lecture, et s'arrête dès que l'animation est réduite. */
.hero-slide.is-active img { animation: hero-zoom 14s linear forwards; }
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Double voile : dégradé latéral pour la lisibilité du texte, voile
   indigo global pour ancrer la photo dans la charte. */
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Voile allégé, mais pas uniformément : c'est lui qui porte la
       lisibilité du titre et du sous-titre, qui sont en blanc.

       La densité est donc maintenue sur la moitié gauche, là où le texte
       se trouve, puis s'effondre à droite où la photo est seule — elle y
       est deux fois plus visible qu'avant. Un allègement uniforme à .46
       faisait tomber le sous-titre à 3,48 de contraste, mesuré sur les
       pixels de la photo : sous le seuil AA de 4,5 qui s'applique à sa
       taille. Le titre, lui, relève du gros texte et du seuil de 3.

       Les paliers ci-dessous sont calés sur l'étendue réelle du texte :
       il court jusqu'à environ 50 % de la largeur du bandeau. */
    background:
        linear-gradient(100deg,
            rgba(20,21,46,.78) 0%,
            rgba(20,21,46,.70) 32%,
            rgba(23,24,69,.38) 64%,
            rgba(45,47,134,.12) 100%),
        linear-gradient(to top, rgba(20,21,46,.38), transparent 52%);
}

/* Pas de `width` ici : l'élément porte aussi la classe .wrap, et une
   largeur déclarée plus bas dans la feuille l'écraserait — le contenu
   se collerait alors au bord de l'écran. Les marges automatiques de
   .wrap suffisent à le centrer dans le conteneur flex du hero. */
.hero-inner { position: relative; z-index: 3; padding: 108px 0 92px; }
.hero-content { max-width: 690px; color: #fff; }
.hero-content h1 { color: #fff; margin-bottom: 20px; }
/* Blanc plein et non 85 % : sur un fond uni, l'atténuation adoucissait le
   sous-titre sans rien coûter. Sur une photographie, elle lui retirait le
   contraste dont il manque déjà. */
.hero-content .lead { color: #fff; max-width: 58ch; margin-bottom: 32px; }
/* Pastilles de navigation du carrousel. */
/* — Flèches de navigation —
   Posées sur la photo, elles doivent rester lisibles quel que soit le
   cliché : d'où le fond translucide sombre plutôt qu'une icône nue, dont
   le contraste dépendrait de ce qui se trouve derrière. */
.hero-fleche {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: rgba(20,21,46,.42);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background-color .25s var(--ease), border-color .25s var(--ease),
                transform .25s var(--ease);
}
.hero-fleche--prec { left: 18px; }
.hero-fleche--suiv { right: 18px; }

.hero-fleche:hover {
    background: var(--amber-500);
    border-color: var(--amber-500);
    color: var(--indigo-950);
}
/* Le décalage part du centrage : l'omettre replacerait la flèche d'une
   demi-hauteur vers le bas au moindre survol. */
.hero-fleche--prec:hover { transform: translateY(-50%) translateX(-3px); }
.hero-fleche--suiv:hover { transform: translateY(-50%) translateX(3px); }

.hero-fleche:focus-visible {
    outline: 3px solid var(--amber-400);
    outline-offset: 3px;
}

.hero-dots {
    position: absolute;
    left: 0; right: 0; bottom: 16px;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 2px;
}

/* Le trait visible ne fait que 4 px de haut, ce qui serait impossible à
   viser au doigt. Le rembourrage porte la zone cliquable à 44 px sans
   épaissir le trait : `background-clip: content-box` limite la peinture
   à la zone de contenu. */
.hero-dot {
    width: 32px; height: 4px;
    padding: 20px 6px;
    box-sizing: content-box;
    border: none;
    background: rgba(255,255,255,.34);
    background-clip: content-box;
    cursor: pointer;
    transition: background-color .3s var(--ease), width .3s var(--ease);
}
.hero-dot.is-active { background: var(--amber-500); background-clip: content-box; width: 50px; }

/* Conservée à part : la page Technologie s'en sert encore pour ses
   pastilles d'icône, alors que le reste de la famille `.why-*` ne
   concernait que la section neutralisée sur l'accueil. */
.why-item-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    font-size: 1.1rem;
    color: var(--amber-500);
    background: rgba(242,162,37,.13);
    border-radius: var(--r-md);
}

/* — Processus en étapes — */

.steps { display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: etape; }
.step { position: relative; padding: 0 20px; counter-increment: etape; }

/* Filet reliant les étapes : la ligne raconte la progression.
   Il part du centre de la pastille — soit le retrait (20 px) plus le
   rayon (27 px) — et court jusqu'au centre de la suivante. Les colonnes
   étant de largeur égale, `width: 100%` tombe exactement dessus. */
.step::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 47px;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--indigo-200) 0 7px, transparent 7px 14px);
}
.step:last-child::before { display: none; }

.step-num {
    position: relative;
    z-index: 1;
    width: 54px; height: 54px;
    margin-bottom: 20px;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 800;
    color: #fff;
    background: var(--indigo-600);
    border: 5px solid var(--surface-2);
    border-radius: 50%;
}
.step-num::after { content: counter(etape, decimal-leading-zero); }
/* La dernière étape passe à l'ambre : elle marque l'aboutissement. */
.step:last-child .step-num { background: var(--amber-500); color: var(--indigo-950); }

.step h3 { font-size: 1rem; margin-bottom: 6px; }
.step p { font-size: .9rem; color: var(--muted); margin: 0; }

/* — Monitoring — */

.monitor-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }

.monitor-panel {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}
.monitor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rule-soft);
}
.monitor-head b { font-family: var(--font-display); font-size: .95rem; color: var(--ink); }

/* Étiquette d'exemple : le brief interdit d'inventer des statistiques,
   cette mention évite toute lecture comme donnée réelle du client. */
.monitor-tag {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--amber-600);
    background: var(--amber-50);
    border: 1px solid var(--amber-100);
    padding: 3px 9px;
    border-radius: var(--r-pill);
}

.monitor-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.monitor-stat { padding: 13px 15px; background: var(--surface-2); border-radius: var(--r-sm); }
.monitor-stat span { display: block; font-size: .74rem; color: var(--muted); margin-bottom: 3px; }
.monitor-stat b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.02rem;
    color: var(--indigo-700);
}
.monitor-chart { width: 100%; height: auto; }

/* ═══════════ 10 ter. CATALOGUE & FICHE PRODUIT ═══════════ */

/* — Barre de filtres —
   Ce sont de vrais liens, pas des boutons JavaScript : chaque famille a
   son adresse, donc elle est indexable, partageable, et le bouton
   « précédent » du navigateur fonctionne. */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 38px;
}
.filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 500;
    color: var(--body);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    transition: color .22s var(--ease), background-color .22s var(--ease),
                border-color .22s var(--ease);
}
.filter:hover { border-color: var(--indigo-300); color: var(--indigo-700); }
.filter.is-active {
    color: #fff;
    background: var(--indigo-600);
    border-color: var(--indigo-600);
}

/* — Fiche produit — */
.product-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
/* Comme `.why-item p` : sans plafond, le passage sur une colonne en dessous
   de 1080px étirait la description du produit sur 965px. */
.product-sheet p { max-width: 58ch; }

.sheet-media {
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-xl);
    overflow: hidden;
}
.sheet-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.sheet-family {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber-600);
}
.sheet-lead { font-size: 1.04rem; color: var(--body); }

/* Chiffres clés du produit : la police à chasse fixe les rend comparables
   d'une fiche à l'autre, ce qui est exactement ce qu'un acheteur fait. */
.sheet-key {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 24px 0 28px;
}
.sheet-key div {
    padding: 14px 16px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
}
.sheet-key span { display: block; font-size: .75rem; color: var(--muted); margin-bottom: 3px; }
.sheet-key b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: .95rem;
    color: var(--indigo-700);
}

.sheet-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

.sheet-note {
    display: flex;
    gap: 11px;
    padding: 14px 17px;
    background: var(--indigo-50);
    border-radius: var(--r-sm);
    font-size: .88rem;
    color: var(--ink-soft, var(--body));
}
.sheet-note i { color: var(--indigo-500); margin-top: 3px; }

/* ═══════════ 10 quinquies. FICHE PRESTATION ═══════════ */

/* Texte à gauche, encart des livrables à droite. L'encart suit le
   défilement : sur une fiche longue, « ce que vous recevez » est
   justement ce qu'on veut garder sous les yeux. */
.service-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
    align-items: start;
}
/* Même raison que `.why-item p` : en dessous de 900px la colonne principale
   occupe toute la largeur, et le texte de la prestation dépassait alors 100
   caractères par ligne. */
.service-layout p { max-width: 58ch; }

@media (max-width: 900px) {
    .service-layout { grid-template-columns: 1fr; gap: 34px; }
    /* Épinglé sur une seule colonne, l'encart resterait collé en haut
       pendant qu'on lit le texte au-dessus de lui. */
    .service-layout aside { position: static !important; }
}

/* ═══════════ 10 quater. BANDES ALTERNÉES ═══════════ */

/* Bloc texte + visuel, employé sur les pages Solutions et À propos.
   L'ordre s'inverse une bande sur deux : le regard repart du côté
   opposé et la page échappe à la monotonie d'un empilement. */
.stripe {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
}
.stripe + .stripe { margin-top: 80px; }

.stripe--flip .stripe-media { order: 2; }

.stripe-media { display: block; border-radius: var(--r-xl); overflow: hidden; }
.stripe-media img {
    width: 100%;
    aspect-ratio: 4 / 3.1;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
a.stripe-media:hover img { transform: scale(1.04); }

.stripe-body h2 { margin-bottom: 14px; }
.stripe-body > p:last-of-type { margin-bottom: 0; }

/* ═══════════ 10 sexies. CARTE DE CONTACT ═══════════ */

.field-hint { font-size: .82rem; color: var(--muted); }

.form-card {
    padding: 34px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

/* Encart rappelant le produit ou la solution d'où vient le visiteur. */
.form-context {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    margin-bottom: 22px;
    background: var(--indigo-50);
    border-radius: var(--r-sm);
    font-size: .9rem;
}
.form-context i { color: var(--indigo-600); }

/* — Coordonnées — */
.contact-list { display: grid; gap: 20px; }
.contact-item { display: flex; gap: 15px; }
.contact-item-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    color: var(--indigo-600);
    background: var(--indigo-50);
    border-radius: var(--r-sm);
}
.contact-item b {
    display: block;
    font-family: var(--font-display);
    font-size: .92rem;
    color: var(--ink);
    margin-bottom: 3px;
}
.contact-item span,
.contact-item a { font-size: .93rem; color: var(--muted); line-height: 1.6; }
.contact-item a:hover { color: var(--indigo-600); }

@media (max-width: 720px) {
    .form-card { padding: 24px 20px; }
}

/* ═══════════ 11. PIED DE PAGE ═══════════ */

.footer {
    padding: 74px 0 0;
    background: var(--indigo-950);
    color: rgba(232,232,244,.7);
    font-size: .92rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 40px;
    padding-bottom: 52px;
}
.footer h3 {
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand img { height: 50px; width: auto; }
.footer-brand strong { display: block; font-family: var(--font-display); font-size: 1.06rem; color: #fff; }
.footer-brand small {
    font-size: .64rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--amber-500);
}
.footer-about { line-height: 1.75; margin-bottom: 20px; }

.footer-links { display: grid; gap: 10px; }
.footer-links a { transition: color .22s var(--ease), padding-left .22s var(--ease); }
.footer-links a:hover { color: var(--amber-400); padding-left: 5px; }

.footer-contact { display: grid; gap: 13px; }
.footer-contact li { display: flex; gap: 12px; line-height: 1.55; }
.footer-contact i { color: var(--amber-500); margin-top: 5px; flex-shrink: 0; }
.footer-contact a:hover { color: var(--amber-400); }

.footer-social { display: flex; gap: 9px; margin-top: 18px; }
.footer-social a {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.07);
    border-radius: var(--r-sm);
    transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.footer-social a:hover { background: var(--amber-500); color: var(--indigo-950); transform: translateY(-3px); }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.09);
    font-size: .86rem;
}
.footer-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--amber-400); }

/* ═══════════ 12. CONTACT FLOTTANT ═══════════ */

/* En Haïti, WhatsApp est le canal de contact réel : il mérite d'être
   permanent, pas enterré dans le pied de page. */
.wa-float {
    position: fixed;
    right: 22px; bottom: 22px;
    z-index: 150;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    font-size: 1.5rem;
    color: #fff;
    background: var(--whatsapp);
    border-radius: 50%;
    box-shadow: 0 8px 26px rgba(37,211,102,.42);
    transition: transform .25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }

/* Barre d'action mobile : les trois gestes utiles, toujours au pouce. */
/* ═══════════ 13. APPARITION ═══════════ */

/* Les éléments marqués montent en fondu à l'entrée dans le champ. Ils
   partent d'un état VISIBLE : si le script ne tourne pas, la page reste
   entièrement lisible. La classe .js-reveal n'est posée que par le script. */
.js-reveal[data-reveal] { opacity: 0; transform: translateY(24px); }
.js-reveal[data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* ═══════════ 14. ADAPTATIF ═══════════ */

@media (max-width: 1180px) {
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    :root { --section-y: 74px; }

        /* `.why-grid` est retiré de la liste : sa section est en commentaire.
       Les trois autres sélecteurs restent actifs. */
    /* .why-grid, */ .monitor-grid, .product-sheet, .stripe { grid-template-columns: 1fr; gap: 40px; }
    /* En une seule colonne, le visuel repasse toujours au-dessus du texte :
       l'inversion n'a plus de sens et casserait l'ordre de lecture. */
    .stripe--flip .stripe-media { order: 0; }
    .stripe + .stripe { margin-top: 56px; }
        .steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
    .step:nth-child(3)::before { display: none; }

    /* La barre cède la place au bouton : les liens et l'appel à l'action
       passent dans le panneau off-canvas, défini plus haut hors de
       toute requête de média puisqu'il n'existe qu'ici. */
    .nav-menu { display: none; }
    .nav-toggle { display: flex; }
    .nav-actions .btn { display: none; }

    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    /* Les flèches ne tiennent sur les côtés que tant que la colonne de
       texte laisse une marge. En dessous de 1025px elle occupe presque
       toute la largeur — mesuré à 1024px : le texte commence à 22px, une
       flèche posée à 18px lui passait dessus. Plutôt que de les reléguer
       dans un coin, on les retire : les puces suffisent à naviguer, et
       elles restent les cibles tactiles les mieux placées. */
    .hero-fleche { display: none; }
}

@media (max-width: 860px) {
    /* La barre d'action fixe en bas d'écran a été retirée à la demande du
       client. Le bouton WhatsApp flottant reprend donc son rôle sur
       mobile, en format réduit pour ne pas masquer le contenu. */
    .wa-float { width: 50px; height: 50px; font-size: 1.3rem; right: 16px; bottom: 16px; }
}

@media (max-width: 720px) {
    :root { --section-y: 58px; --header-h: 68px; }

    .wrap { width: calc(100% - 34px); }

        .brand img { height: 42px; }
        .banner { padding: 48px 0 44px; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; text-align: center; }

    .card-project { aspect-ratio: 4 / 3.5; }

    /* `auto` laissait le contenu seul décider de la hauteur : sans les
       boutons, le bandeau se tassait. Une hauteur plancher lui garde sa
       présence, sans jamais remplir l'écran — il reste de quoi deviner la
       suite sous la ligne de flottaison. */
    .hero { min-height: 72vh; }

    .hero-inner { padding: 74px 0 78px; }
    .hero-dots { bottom: 18px; }

            .steps { grid-template-columns: 1fr; row-gap: 30px; }
    .step { padding: 0; }
    .step::before { display: none; }
    .step-num { margin-bottom: 12px; }

        .monitor-stats { grid-template-columns: 1fr; }
}

/* Le zoom lent du hero et le tiret du schéma sont décoratifs : ils
   s'effacent si le visiteur a demandé à réduire les animations. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide.is-active img { animation: none; transform: none; }
    }

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .js-reveal[data-reveal] { opacity: 1; transform: none; }
}

/* ═══════════ 15. IMPRESSION ═══════════ */

@media print {
    .nav, .oc, .oc-scrim, .wa-float, .footer-social { display: none !important; }
    body { color: #000; background: #fff; padding: 0; }
    a { color: #000; }
    }