/* =====================================================================
   Imperis — feuille de style principale
   Palette tirée du logo (ampoule low-poly multicolore) sur une base
   indigo profond. Aucune dépendance : pas de Bootstrap, pas de jQuery.
   ===================================================================== */

:root {
    /* Couleurs de marque (logo) */
    --c-violet: #5b3fa6;
    --c-rose: #e5245f;
    --c-orange: #f47c20;
    --c-jaune: #f9c80e;
    --c-cyan: #0ea5d9;
    --c-vert: #1fa64a;
    --c-vert-clair: #9ccc3c;
    --c-sarcelle: #0d9488;

    /* Couleurs d'interface */
    --c-primaire: #2b1f73;
    --c-primaire-vif: #4330b0;
    --c-encre: #14123a;
    --c-texte: #3c3f58;
    --c-doux: #656a84;
    --c-fond: #ffffff;
    --c-fond-doux: #f5f5fb;
    --c-ligne: #e4e4ef;

    --spectre: linear-gradient(90deg, var(--c-violet), var(--c-cyan), var(--c-vert), var(--c-jaune), var(--c-orange), var(--c-rose));

    --police: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rayon: 18px;
    --rayon-petit: 10px;
    --ombre: 0 1px 2px rgb(20 18 58 / 0.05), 0 10px 30px rgb(20 18 58 / 0.07);
    --ombre-forte: 0 2px 4px rgb(20 18 58 / 0.06), 0 24px 48px rgb(20 18 58 / 0.14);
    --largeur: 1200px;

    /* Échelle typographique (rapport ~1.25). Texte courant : 16 px minimum ; libellés : 12 px minimum */
    --fs-xs: .75rem;                                       /* 12 px : libellés, badges */
    --fs-sm: .875rem;                                      /* 14 px : mentions, métadonnées */
    --fs-base: 1rem;                                       /* 16 px : texte courant */
    --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);   /* 17 → 19 px : chapeaux */
    --fs-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);   /* 19 → 22 px */
    --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);      /* 28 → 44 px */
    --fs-h1: clamp(2.125rem, 1.45rem + 2.9vw, 3.5rem);     /* 34 → 56 px */
    --fs-display: clamp(2.125rem, 1.45rem + 3.5vw, 4rem);  /* 34 → 64 px : titre du hero */
    --lh-titre: 1.1;
    --lh-texte: 1.65;
    --mesure: 66ch;                                        /* longueur de ligne confortable */

    /* Mouvement : durées et courbes communes */
    --duree-rapide: .2s;                                   /* survols, focus */
    --duree-moyenne: .45s;                                 /* apparitions d'éléments */
    --duree-lente: .8s;                                    /* entrées de section */
    --courbe-sortie: cubic-bezier(.2, .8, .2, 1);          /* décélération naturelle */
    --gouttiere: 20px;
    --entete: 76px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 16px); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--police);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--c-texte);
    background: var(--c-fond);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--c-encre); line-height: var(--lh-titre); margin: 0 0 .5em; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--c-cyan); outline-offset: 3px; border-radius: 4px; }

.icone { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }

.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--c-primaire); color: #fff; }
.lien-evitement:focus { left: 12px; top: 12px; }

/* ---------- Éléments réutilisables ---------- */
.surtitre {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
    font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--c-primaire-vif);
}
.surtitre--clair { color: #c9c3ff; }

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 22px;
    border: 2px solid transparent; border-radius: 999px;
    font: 600 .95rem/1.2 var(--police);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.bouton .icone { transition: transform .2s; }
.bouton:hover .icone { transform: translateX(3px); }
.bouton--grand { padding: 15px 28px; font-size: 1rem; }
.bouton--primaire { background: var(--c-primaire); color: #fff; box-shadow: 0 6px 18px rgb(43 31 115 / .25); }
.bouton--primaire:hover { background: var(--c-primaire-vif); transform: translateY(-1px); }
.bouton--contour { border-color: var(--c-ligne); color: var(--c-encre); background: #fff; }
.bouton--contour:hover { border-color: var(--c-primaire); color: var(--c-primaire); }

.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-primaire-vif); }
.lien-fleche .icone { transition: transform .2s; }
.lien-fleche:hover .icone, .produit:hover .lien-fleche .icone { transform: translateX(4px); }

.etiquette {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: .75rem; font-weight: 700; letter-spacing: .02em;
    background: color-mix(in srgb, var(--accent, var(--c-violet)) 12%, white);
    color: color-mix(in srgb, var(--accent, var(--c-violet)) 75%, black);
}

.liste-check li { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; font-size: .95rem; }
.liste-check .icone { margin-top: 4px; color: var(--accent, var(--c-vert)); }

.section { padding-block: clamp(64px, 9vw, 112px); }
.section--douce { background: var(--c-fond-doux); }

.titre-section { max-width: 680px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.titre-section p:last-child { max-width: var(--mesure); margin: 0 auto; color: var(--c-doux); font-size: var(--fs-lead); }
.titre-section--ligne { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; text-align: left; }
.titre-section--ligne h2 { margin: 0; max-width: 640px; }

/* Accent de couleur par pôle */
.pole--reseaux,       .projet--reseaux       { --accent: var(--c-cyan); }
.pole--cybersecurite, .projet--cybersecurite { --accent: var(--c-rose); }
.pole--securite,      .projet--securite      { --accent: var(--c-vert); }
.pole--logiciels,     .projet--logiciels     { --accent: var(--c-violet); }
.pole--ia,            .projet--ia            { --accent: var(--c-sarcelle); }
.pole--energie,       .projet--energie       { --accent: var(--c-orange); }

/* ---------- Barre d'information ---------- */
.barre-info { background: var(--c-encre); color: #c8c9dc; font-size: .85rem; }
.barre-info__contenu { display: flex; justify-content: space-between; align-items: center; min-height: 42px; gap: 16px; }
.barre-info__liens, .barre-info__reseaux { display: flex; align-items: center; gap: 24px; }
.barre-info a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.barre-info a:hover { color: #fff; }
.barre-info__reseaux { gap: 14px; }

/* ---------- En-tête ---------- */
.entete {
    position: sticky; top: 0; z-index: 50;
    background: rgb(255 255 255 / .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}
.entete.est-defile { border-color: var(--c-ligne); box-shadow: 0 6px 24px rgb(20 18 58 / .06); }
.entete__contenu { display: flex; align-items: center; justify-content: space-between; height: var(--entete); gap: 24px; }

.marque { display: inline-flex; align-items: center; gap: 10px; }
.marque__nom { display: flex; align-items: baseline; gap: .3em; font-weight: 800; font-size: 1.3rem; letter-spacing: .04em; color: var(--c-encre); line-height: 1; white-space: nowrap; }
.marque__nom span { color: var(--c-primaire-vif); }   /* « GROUP » : même taille qu'IMPERIS, couleur de marque */
.marque--clair .marque__nom { color: #fff; }
.marque--clair .marque__nom span { color: #c9c3ff; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__liste { display: flex; gap: 4px; }
.nav__liste a {
    position: relative; display: block; padding: 8px 12px;
    font-weight: 600; font-size: .95rem; color: var(--c-encre); border-radius: 8px;
    transition: color .2s, background-color .2s;
}
.nav__liste a:hover { color: var(--c-primaire-vif); background: var(--c-fond-doux); }
.nav__liste a[aria-current="page"] { color: var(--c-primaire-vif); }
.nav__liste a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--c-primaire-vif); }
/* Écrans moyens (avant le menu mobile) : en-tête compacté pour que menu et « IMPERIS GROUP » tiennent sur une ligne */
.nav__liste a, .nav__cta { white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1280px) {
    .entete__contenu { gap: 16px; }
    .marque__nom { font-size: 1.15rem; }
    .nav { gap: 14px; }
    .nav__liste { gap: 0; }
    .nav__liste a { padding: 8px 8px; font-size: .9rem; }
    .nav__liste a[aria-current="page"]::after { left: 8px; right: 8px; }
    .nav__cta { padding-inline: 18px; }
}

.entete__menu { display: none; width: 46px; height: 46px; border: 1px solid var(--c-ligne); border-radius: 12px; background: #fff; color: var(--c-encre); cursor: pointer; align-items: center; justify-content: center; }
.entete__menu .icone { width: 22px; height: 22px; }
.icone--fermer { display: none; }
.entete__menu[aria-expanded="true"] .icone--ouvrir { display: none; }
.entete__menu[aria-expanded="true"] .icone--fermer { display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--c-fond-doux), #fff); padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 112px); }
.hero__motif { position: absolute; top: -60px; right: -120px; width: min(640px, 60vw); opacity: .13; pointer-events: none; }
.hero__grille { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero__intro { max-width: 34em; margin-bottom: 32px; color: var(--c-doux); font-size: var(--fs-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.hero__preuves { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .92rem; font-weight: 500; }
.hero__preuves li { display: flex; align-items: center; gap: 8px; }
.hero__preuves .icone { color: var(--c-vert); }

.hero__visuel { position: relative; padding: 28px 0 28px 28px; }
.hero__photo { position: relative; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 24px; box-shadow: var(--ombre-forte); }

.carte-flottante { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border-radius: 16px; box-shadow: var(--ombre-forte); }
.carte-flottante strong { display: block; color: var(--c-encre); font-size: 1.05rem; line-height: 1.2; }
.carte-flottante span { font-size: .82rem; color: var(--c-doux); line-height: 1.3; }
.carte-flottante--haut { top: 0; right: -12px; flex-direction: column; align-items: flex-start; gap: 0; }
.carte-flottante--haut strong { font-size: 2rem; font-weight: 800; color: var(--c-primaire); }
.carte-flottante--bas { bottom: 0; left: 0; }
.carte-flottante__icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--c-cyan) 14%, white); color: var(--c-cyan); }

/* ---------- Clients ---------- */
.clients { border-block: 1px solid var(--c-ligne); }
.clients__contenu { display: flex; align-items: center; gap: 40px; padding-block: 26px; }
.clients__titre { flex-shrink: 0; margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-doux); }
.clients__liste { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.clients__liste img { width: auto; height: 48px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.clients__liste img:hover { filter: none; opacity: 1; }
.clients__nom { font-weight: 800; font-size: .95rem; color: #9a9db3; letter-spacing: .02em; }

/* ---------- Pôles ---------- */
.poles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pole { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-ligne); border-radius: var(--rayon); overflow: hidden; transition: box-shadow .25s, transform .25s, border-color .25s; }
.pole:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); border-color: transparent; }
.pole__image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-encre); }
.pole__image img { width: 100%; height: 100%; object-fit: cover; }
.pole__icone { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgb(0 0 0 / .2); }
.pole__icone .icone { width: 24px; height: 24px; }
.pole__corps { display: flex; flex-direction: column; flex: 1; align-items: flex-start; padding: 24px 24px 22px; }
.pole__corps > p { color: var(--c-doux); font-size: .95rem; }
.pole .liste-check { flex: 1; margin-bottom: 18px; }
.pole__titre { display: flex; align-items: center; gap: 12px; }
.pole__titre .pole__icone { position: static; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; box-shadow: none; }
.pole__titre .pole__icone .icone { width: 20px; height: 20px; }

/* ---------- Chiffres ---------- */
.chiffres { position: relative; background: var(--c-primaire); color: #d6d3f5; padding-block: 56px; }
.chiffres::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--spectre); }
.chiffres__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.chiffre { padding-left: 20px; border-left: 1px solid rgb(255 255 255 / .16); }
.chiffre strong { display: block; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chiffre span { font-size: .95rem; }

/* ---------- Réalisations ---------- */
.projets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.projet { background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); transition: box-shadow .25s, transform .25s; }
.projet:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.projet__image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-ligne); }
.projet__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.projet:hover .projet__image img { transform: scale(1.05); }
.projet__image--logo { display: grid; place-items: center; padding: 24px; background: #fff; }
.projet__image--logo img { width: auto; max-width: 70%; height: 100%; object-fit: contain; }
/* Photo trop petite : affichée entière à sa taille réelle sur un fond flou tiré d'elle-même (pas d'agrandissement) */
.projet__image--petite { position: relative; display: grid; place-items: center; }
.projet__image--petite::before { content: ""; position: absolute; inset: -24px; background: var(--fond) center / cover; filter: blur(20px) saturate(1.15) brightness(.85); }
.projet__image--petite img { position: relative; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 12px 30px rgb(0 0 0 / .3); }
.projet__corps { padding: 22px 24px 26px; }
.projet__corps .etiquette { margin-bottom: 12px; }
.projet__corps h3 { margin-bottom: 6px; }
.projet__corps p { margin: 0; color: var(--c-doux); font-size: .95rem; }

/* ---------- Produits (défilement horizontal) ---------- */
.defilement {
    --marge-defilement: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge-defilement);
    scrollbar-width: thin; padding-block: 8px 24px;
}
.produits { display: flex; gap: 20px; width: max-content; padding-inline: var(--marge-defilement); }
.produits li { scroll-snap-align: start; }
.produit { display: flex; flex-direction: column; width: 290px; height: 100%; padding: 18px; background: #fff; border: 1px solid var(--c-ligne); border-radius: var(--rayon); transition: box-shadow .25s, border-color .25s, transform .25s; }
.produit:hover { box-shadow: var(--ombre-forte); border-color: transparent; transform: translateY(-3px); }
.produit__image { aspect-ratio: 16 / 11; margin-bottom: 18px; border-radius: 12px; overflow: hidden; background: var(--c-fond-doux); }
.produit__image img { width: 100%; height: 100%; object-fit: cover; }
.produit .etiquette { align-self: flex-start; margin-bottom: 10px; }
.produit h3 { margin-bottom: 6px; }
.produit p { flex: 1; color: var(--c-doux); font-size: .92rem; }

/* ---------- Méthode / à propos ---------- */
.apropos { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.apropos__visuel { position: relative; }
.apropos__visuel img { width: 100%; max-height: 560px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; box-shadow: var(--ombre-forte); }
.apropos__badge { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; white-space: nowrap; background: #fff; border-radius: 999px; box-shadow: var(--ombre-forte); font-weight: 700; font-size: .9rem; color: var(--c-encre); }
.apropos__badge .icone { color: var(--c-rose); }
.apropos__intro { max-width: var(--mesure); margin-bottom: 32px; color: var(--c-doux); font-size: var(--fs-lead); }

.etapes { display: grid; gap: 4px; counter-reset: etape; }
.etapes li { position: relative; display: flex; gap: 18px; padding-bottom: 22px; }
.etapes li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 0; width: 2px; background: var(--c-ligne); }
.etapes__icone { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--c-primaire-vif); box-shadow: var(--ombre); }
.etapes h3 { font-size: 1.05rem; margin: 4px 0 2px; }
.etapes p { margin: 0; color: var(--c-doux); font-size: .95rem; }

/* ---------- Témoignages ---------- */
.temoignages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.temoignage { position: relative; display: flex; flex-direction: column; margin: 0; padding: 64px 28px 26px; background: var(--c-fond-doux); border-radius: var(--rayon); }
.temoignage::before { content: "“"; position: absolute; top: 4px; left: 26px; font-size: 5.5rem; line-height: 1; font-weight: 800; background: var(--spectre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.temoignage blockquote { flex: 1; margin: 0 0 24px; color: var(--c-encre); font-size: 1.02rem; }
.temoignage blockquote p { margin: 0; }
.temoignage figcaption { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--c-ligne); }
.temoignage figcaption img { width: 48px; height: 48px; object-fit: contain; padding: 4px; border-radius: 12px; background: #fff; }
.temoignage strong { display: block; color: var(--c-encre); }
.temoignage figcaption span { font-size: .85rem; color: var(--c-doux); }

/* ---------- Contact ---------- */
.contact { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 112px); background: radial-gradient(circle at 85% 10%, #3d2ca0 0, transparent 45%), var(--c-primaire); color: #d6d3f5; }
.contact::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--spectre); }
.contact__grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact h2 { color: #fff; }
.contact__texte > p { font-size: var(--fs-lead); }
.contact__coordonnees { display: grid; gap: 14px; margin-top: 32px; }
.contact__coordonnees a { display: inline-flex; align-items: center; gap: 14px; font-weight: 600; color: #fff; }
.contact__coordonnees a span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgb(255 255 255 / .1); transition: background-color .2s; }
.contact__coordonnees a:hover span { background: rgb(255 255 255 / .2); }
.contact__whatsapp { display: flex; align-items: center; gap: 14px; }
.contact__whatsapp > span { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: rgb(31 170 83 / .25); color: #7ee2a8; }
.contact__whatsapp small { display: block; font-size: .78rem; color: #b9b5e8; line-height: 1.2; }
.contact__coordonnees .contact__whatsapp a { display: inline; font-weight: 600; color: #fff; }
.contact__whatsapp a:hover { text-decoration: underline; text-underline-offset: 3px; }

.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: clamp(24px, 4vw, 40px); background: #fff; border-radius: 24px; box-shadow: var(--ombre-forte); color: var(--c-texte); }
.champ { display: grid; gap: 6px; }
.champ--large, .alerte { grid-column: 1 / -1; }
.champ label { font-weight: 600; font-size: .9rem; color: var(--c-encre); }
.champ label span { font-weight: 400; color: var(--c-doux); }
.champ input, .champ select, .champ textarea {
    width: 100%; padding: 12px 14px;
    font: inherit; color: var(--c-encre);
    background: var(--c-fond-doux); border: 1.5px solid var(--c-ligne); border-radius: var(--rayon-petit);
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; background: #fff; border-color: var(--c-primaire-vif); box-shadow: 0 0 0 4px rgb(67 48 176 / .12); }
.formulaire__piege { position: absolute; left: -9999px; }
.alerte { margin: 0; padding: 12px 16px; border-radius: var(--rayon-petit); font-weight: 600; font-size: .95rem; }
.alerte--ok { background: #e6f6ec; color: #13662f; }
.alerte--erreur { background: #fde8ee; color: #a3123f; }

/* ---------- Pied de page ---------- */
.pied { background: var(--c-encre); color: #a6a8c6; padding-top: 72px; font-size: .95rem; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr; gap: 40px; padding-bottom: 56px; }
.pied__marque p { margin: 20px 0; max-width: 300px; }
.pied__titre { color: #fff; font-size: 1rem; margin-bottom: 18px; letter-spacing: 0; }
.pied__liste { display: grid; gap: 10px; }
.pied__liste a { transition: color .2s; }
.pied__liste a:hover { color: #fff; }
.pied__contact li { display: flex; gap: 10px; align-items: flex-start; }
.pied__contact .icone { margin-top: 4px; color: var(--c-cyan); }
.pied__reseaux { display: flex; gap: 10px; }
.pied__reseaux a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(255 255 255 / .07); transition: background-color .2s, color .2s; }
.pied__reseaux a:hover { background: var(--c-primaire-vif); color: #fff; }
.pied__bas { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px; border-top: 1px solid rgb(255 255 255 / .08); font-size: .88rem; }
.pied__bas p { margin: 0; }
.pied__bas a:hover { color: #fff; }

/* ---------- Bouton WhatsApp flottant ---------- */
.whatsapp { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; background: #1faa53; color: #fff; font-weight: 700; border-radius: 999px; box-shadow: 0 10px 28px rgb(31 170 83 / .4); transition: transform .2s, background-color .2s; }
.whatsapp:hover { background: #178a43; transform: translateY(-2px); }
.whatsapp .icone { width: 24px; height: 24px; }

/* =====================================================================
   Pages intérieures
   ===================================================================== */

.bouton--clair { background: #fff; color: var(--c-primaire); }
.bouton--clair:hover { background: #eeeaff; transform: translateY(-1px); }
[hidden] { display: none !important; }

/* ---------- Bandeau de titre ---------- */
.bandeau { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 88px); background: linear-gradient(180deg, var(--c-fond-doux), #fff); border-bottom: 1px solid var(--c-ligne); }
.bandeau__motif { position: absolute; top: 0; right: -80px; width: min(560px, 55vw); opacity: .12; pointer-events: none; }
.bandeau__contenu { position: relative; }
.bandeau h1 { max-width: 18em; font-size: var(--fs-h1); }
.bandeau__intro { max-width: var(--mesure); margin: 0; color: var(--c-doux); font-size: var(--fs-lead); }
.ariane { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; font-size: .88rem; color: var(--c-doux); }
.ariane li:not(:last-child)::after { content: "/"; margin-left: 6px; color: #b5b7cc; }
.ariane a:hover { color: var(--c-primaire-vif); }
.ariane [aria-current] { color: var(--c-encre); font-weight: 600; }

/* ---------- Appel à l'action (bas des pages) ---------- */
.appel { padding-block: clamp(56px, 8vw, 104px); }
.appel__boite {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .95fr); gap: clamp(28px, 4vw, 56px); align-items: center;
    padding: clamp(32px, 5vw, 64px); border-radius: 32px; color: #cfcbf3;
    background:
        radial-gradient(70% 90% at 100% 0%, rgb(14 165 217 / .32), transparent 60%),
        radial-gradient(60% 80% at 0% 100%, rgb(229 36 95 / .2), transparent 60%),
        radial-gradient(50% 70% at 30% 0%, rgb(91 63 166 / .55), transparent 70%),
        linear-gradient(135deg, #241a68, #140f42);
    box-shadow: 0 40px 80px -30px rgb(20 18 58 / .55);
}
.appel__boite::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--spectre); z-index: 1; }
.appel__boite::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 20% 30%, #000 20%, transparent 70%); }
.appel__facettes { position: absolute; z-index: -1; width: 440px; left: -110px; bottom: -150px; opacity: .14; pointer-events: none; }

.appel__surtitre { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px 7px 11px; border: 1px solid rgb(255 255 255 / .12); border-radius: 999px; background: rgb(255 255 255 / .06); color: #e6e4ff; font-size: var(--fs-sm); font-weight: 700; }
.appel h2 { margin: 0 0 14px; color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); letter-spacing: -.035em; }
.appel__intro { max-width: 34em; margin: 0; color: #c3bfeb; font-size: var(--fs-lead); }
.appel__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; }
.appel__actions .bouton--clair { box-shadow: 0 14px 32px -10px rgb(0 0 0 / .55); }
.appel__whatsapp { display: inline-flex; align-items: center; gap: 10px; padding: 12px 4px; color: #fff; font-weight: 700; border-bottom: 2px solid rgb(126 226 168 / .45); transition: border-color .2s, color .2s; }
.appel__whatsapp .icone { width: 22px; height: 22px; color: #7ee2a8; }
.appel__whatsapp:hover { color: #7ee2a8; border-color: #7ee2a8; }

.appel__preuves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgb(255 255 255 / .1); }
.appel__preuves li { display: grid; gap: 2px; }
.appel__preuves strong { color: #fff; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.appel__preuves span { color: #a9a5d8; font-size: var(--fs-xs); font-weight: 600; max-width: 13ch; line-height: 1.35; }

.appel__contact { display: grid; gap: 12px; padding: 24px; border-radius: 24px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
.appel__contact-titre { margin: 0 0 4px; color: #fff; font-weight: 800; font-size: 1.05rem; }
.appel__bureau { display: flex; gap: 14px; padding: 14px; border-radius: 16px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .06); transition: background-color .2s, border-color .2s; }
.appel__bureau:hover { background: rgb(255 255 255 / .09); border-color: rgb(255 255 255 / .14); }
.appel__pays { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--c-violet), var(--c-cyan)); color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .06em; }
.appel__bureau > div { display: grid; gap: 4px; min-width: 0; }
.appel__bureau strong { color: #fff; font-size: 1rem; }
.appel__bureau strong small { margin-left: 4px; color: #a9a5d8; font-size: .78rem; font-weight: 600; }
.appel__adresse, .appel__tels { display: flex; align-items: flex-start; gap: 8px; color: #c3bfeb; font-size: var(--fs-sm); }
.appel__adresse .icone, .appel__tels .icone { width: 15px; height: 15px; margin-top: 3px; color: #8f87e8; flex-shrink: 0; }
.appel__adresse:hover { color: #fff; }
.appel__tels a { color: #fff; font-weight: 700; white-space: nowrap; }
.appel__tels a:hover { color: #7ee2a8; }
.appel__ligne { display: flex; align-items: center; gap: 12px; padding: 4px 2px; color: #fff; font-weight: 700; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.appel__ligne span { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; background: rgb(255 255 255 / .08); transition: background-color .2s; }
.appel__ligne .icone { width: 17px; height: 17px; }
.appel__ligne:hover span { background: rgb(255 255 255 / .16); }
.appel__ligne--whatsapp span { background: rgb(31 170 83 / .22); color: #7ee2a8; }

/* ---------- Services ---------- */
.sommaire { position: sticky; top: var(--entete); z-index: 20; background: rgb(255 255 255 / .95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-ligne); }
.sommaire__liste { display: flex; gap: 8px; overflow-x: auto; padding-block: 12px; scrollbar-width: none; }
.sommaire__lien { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--c-encre); border: 1px solid var(--c-ligne); transition: border-color .2s, background-color .2s; }
.sommaire__lien .icone { color: var(--accent); }
.sommaire__lien:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, white); }
.service { scroll-margin-top: calc(var(--entete) + 64px); }
.service__grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.service--inverse .service__visuel { order: 2; }
.service__visuel { position: relative; }
.service__visuel img { width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; border-radius: 24px; box-shadow: var(--ombre-forte); }
.service__visuel .pole__icone { top: 20px; left: 20px; width: 56px; height: 56px; }
.service .surtitre { color: color-mix(in srgb, var(--accent) 70%, black); }
.service__resume { max-width: var(--mesure); margin-bottom: 28px; color: var(--c-doux); font-size: var(--fs-lead); }
.prestations { display: grid; gap: 18px; margin-bottom: 28px; }
.prestations li { display: flex; gap: 14px; }
.prestations__puce { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 14%, white); color: color-mix(in srgb, var(--accent) 80%, black); }
.prestations__puce .icone { width: 16px; height: 16px; }
.prestations h3 { font-size: 1.02rem; margin: 2px 0; }
.prestations p { margin: 0; color: var(--c-doux); font-size: .95rem; }
.service__references { padding: 14px 18px; border-radius: var(--rayon-petit); background: #fff; border: 1px solid var(--c-ligne); font-size: .92rem; margin-bottom: 28px; }
.service__references strong { color: var(--c-encre); }
.service__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ---------- Réalisations : filtres ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filtre { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1.5px solid var(--c-ligne); border-radius: 999px; background: #fff; font: 600 .92rem var(--police); color: var(--c-encre); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.filtre .icone { color: var(--accent, var(--c-primaire-vif)); }
.filtre span { padding: 1px 8px; border-radius: 999px; background: var(--c-fond-doux); font-size: .78rem; color: var(--c-doux); }
.filtre:hover { border-color: var(--accent, var(--c-primaire-vif)); }
.filtre[aria-pressed="true"] { background: var(--c-primaire); border-color: var(--c-primaire); color: #fff; }
.filtre[aria-pressed="true"] .icone { color: #fff; }
.filtre[aria-pressed="true"] span { background: rgb(255 255 255 / .18); color: #fff; }

/* ---------- Produits ---------- */
.catalogue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.produit--grille { width: auto; }
.produit__nom { font-size: 1.2rem; margin-bottom: 6px; }
.fiche { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.fiche__visuel { position: sticky; top: calc(var(--entete) + 24px); }
.fiche__visuel img { width: 100%; border-radius: 24px; box-shadow: var(--ombre-forte); }
.fiche__description { max-width: var(--mesure); color: var(--c-doux); font-size: var(--fs-lead); }
.fiche__sous-titre { margin-top: 32px; }
.fiche__fonctions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
.fiche__fonctions li { display: flex; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--c-fond-doux); font-weight: 600; font-size: .94rem; color: var(--c-encre); }
.fiche__fonctions .icone { margin-top: 3px; color: var(--c-vert); }
.fiche__cible { display: flex; gap: 14px; padding: 18px 20px; margin-bottom: 32px; border-left: 4px solid var(--c-violet); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--c-violet) 6%, white); }
.fiche__cible > .icone { width: 24px; height: 24px; color: var(--c-violet); }
.fiche__cible strong { color: var(--c-encre); }
.fiche__cible p { margin: 2px 0 0; }
.video { max-width: 900px; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; box-shadow: var(--ombre-forte); background: var(--c-encre); }
.video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Énergie solaire ---------- */
.avantages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.avantage { padding: 28px 24px; border-radius: var(--rayon); border: 1px solid var(--c-ligne); }
.avantage__numero { display: inline-block; margin-bottom: 16px; font-weight: 800; font-size: 1.5rem; background: linear-gradient(90deg, var(--c-orange), var(--c-jaune)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.avantage p { margin: 0; color: var(--c-doux); font-size: .95rem; }
.categorie + .categorie { margin-top: 64px; }
.categorie__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--c-ligne); }
.categorie__entete h3 { font-size: 1.5rem; margin: 0; }
.categorie__entete p { margin: 0; color: var(--c-doux); }
.equipements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.equipement { display: flex; flex-direction: column; background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); transition: box-shadow .25s, transform .25s; }
.equipement:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.equipement__image { aspect-ratio: 1 / .8; background: #111; overflow: hidden; }
.equipement__image img { width: 100%; height: 100%; object-fit: cover; }
.equipement__corps { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.equipement h4 { margin: 0 0 14px; font-size: 1.08rem; color: var(--c-encre); }
.specs { flex: 1; margin: 0 0 18px; font-size: .9rem; }
.specs div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--c-ligne); }
.specs dt { color: var(--c-doux); }
.specs dd { margin: 0; font-weight: 700; color: var(--c-encre); text-align: right; }

/* ---------- À propos ---------- */
.valeurs { display: grid; gap: 20px; }
.valeurs li { display: flex; gap: 16px; }
.valeurs__icone { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: var(--c-fond-doux); color: var(--c-primaire-vif); }
.valeurs h3 { font-size: 1.05rem; margin: 4px 0 2px; }
.valeurs p { margin: 0; color: var(--c-doux); font-size: .95rem; }
.poles-compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pole-compact { display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--rayon); background: #fff; border-top: 4px solid var(--accent); box-shadow: var(--ombre); transition: box-shadow .25s, transform .25s; }
.pole-compact:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.pole-compact .pole__icone { position: static; margin-bottom: 18px; }
.pole-compact p { flex: 1; color: var(--c-doux); font-size: .94rem; }

/* ---------- Contact ---------- */
.canaux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.canal { display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--rayon); border: 1px solid var(--c-ligne); transition: box-shadow .25s, transform .25s, border-color .25s; }
.canal:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); border-color: transparent; }
.canal__icone { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 14px; background: color-mix(in srgb, var(--c-primaire-vif) 10%, white); color: var(--c-primaire-vif); }
.canal__icone--whatsapp { background: #e3f6ea; color: #1faa53; }
.canal__icone .icone { width: 24px; height: 24px; }
.canal h2 { font-size: 1.1rem; margin-bottom: 4px; }
.canal p { flex: 1; color: var(--c-doux); overflow-wrap: anywhere; }

/* ---------- Mentions légales ---------- */
.legal { display: grid; grid-template-columns: 260px 1fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.legal__sommaire { position: sticky; top: calc(var(--entete) + 24px); padding: 24px; border-radius: var(--rayon); background: var(--c-fond-doux); font-size: .92rem; }
.legal__sommaire p { margin-bottom: 12px; font-weight: 700; color: var(--c-encre); }
.legal__sommaire ol { display: grid; gap: 8px; list-style: decimal inside; color: var(--c-doux); }
.legal__sommaire a:hover { color: var(--c-primaire-vif); }
.prose { max-width: 760px; }
.prose h2 { font-size: 1.45rem; margin-top: 48px; scroll-margin-top: calc(var(--entete) + 24px); }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.prose a { color: var(--c-primaire-vif); text-decoration: underline; text-underline-offset: 3px; }
.legal__infos { display: grid; margin: 0; border: 1px solid var(--c-ligne); border-radius: var(--rayon); overflow: hidden; }
.legal__infos div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 14px 20px; }
.legal__infos div:nth-child(odd) { background: var(--c-fond-doux); }
.legal__infos dt { font-weight: 600; color: var(--c-encre); }
.legal__infos dd { margin: 0; }

/* ---------- Pages d'erreur ---------- */
.erreur { padding-block: clamp(64px, 10vw, 128px); background: linear-gradient(180deg, var(--c-fond-doux), #fff); text-align: center; }
.erreur__contenu { max-width: 720px; }
.erreur .erreur__code { margin: 0; font-size: clamp(6rem, 18vw, 10rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; background: var(--spectre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.erreur p { color: var(--c-doux); font-size: var(--fs-lead); }
.erreur .hero__actions { justify-content: center; }
.erreur__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-weight: 600; }
.erreur__liens a:hover { color: var(--c-primaire-vif); }

/* =====================================================================
   Animations & studio logiciel
   Tout ce qui bouge est dans le bloc « prefers-reduced-motion: no-preference »
   plus bas : sans JS ou avec « réduire les animations », tout s'affiche à l'état final.
   ===================================================================== */


/* ---------- Boutons : reflet au survol ---------- */
.bouton--primaire, .bouton--clair { position: relative; overflow: hidden; isolation: isolate; }
.bouton--primaire::after, .bouton--clair::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s ease;
}
.bouton--clair::after { background: linear-gradient(110deg, transparent 30%, rgb(67 48 176 / .14) 50%, transparent 70%); }
.bouton--primaire:hover::after, .bouton--clair:hover::after { transform: translateX(120%); }
.bouton--fantome { border-color: rgb(255 255 255 / .25); color: #fff; }
.bouton--fantome:hover { border-color: rgb(255 255 255 / .55); background: rgb(255 255 255 / .06); }

/* ---------- Cartes : halo lumineux qui suit la souris ---------- */
:is(.pole, .projet, .produit, .equipement, .canal, .pole-compact, .avantage) { position: relative; }
:is(.pole, .projet, .produit, .equipement, .canal, .pole-compact, .avantage)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .35s;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent, var(--c-primaire-vif)) 16%, transparent), transparent 60%);
}
:is(.pole, .projet, .produit, .equipement, .canal, .pole-compact, .avantage):hover::after { opacity: 1; }

/* ---------- Fenêtres de code (terminal du hero, éditeur du studio) ---------- */
.fenetre__barre { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgb(255 255 255 / .04); border-bottom: 1px solid rgb(255 255 255 / .07); font: 500 .75rem var(--police); color: #8d90b5; white-space: nowrap; overflow: hidden; }
.fenetre__barre i { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--c-rose); }
.fenetre__barre i:nth-child(2) { background: var(--c-jaune); }
.fenetre__barre i:nth-child(3) { background: var(--c-vert); }
.fenetre__barre > span { margin-left: 8px; }

.code { --curseur: var(--c-cyan); margin: 0; padding: 14px 16px 16px; overflow: hidden; font: 400 .8rem/1.75 "JetBrains Mono", ui-monospace, Consolas, monospace; color: #e4e3f7; }
.code code { display: block; font: inherit; }
.t-ligne { display: block; overflow: hidden; white-space: pre; }
.c-prompt { color: var(--c-vert-clair); }
.c-ok { color: #4ade80; }
.c-info { color: var(--c-cyan); }
.c-com { color: #7f84a8; font-style: italic; }
.c-var { color: #7dd3fc; }
.c-fn { color: #fde68a; }
.c-cls { color: #c4b5fd; }
.c-str { color: #86efac; }
.c-mot { color: #f9a8d4; }

/* ---------- Hero : terminal ---------- */
.hero__motif { opacity: .17; }
.carte-flottante--bas { top: 34%; bottom: auto; left: -24px; }
.terminal { position: absolute; right: -28px; bottom: -8px; z-index: 2; width: min(330px, 72%); background: #0f0d2b; border: 1px solid rgb(255 255 255 / .08); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 48px rgb(20 18 58 / .35); }

/* ---------- Studio logiciel ---------- */
.studio { position: relative; overflow: hidden; padding-block: clamp(72px, 10vw, 128px); background: var(--c-encre); color: #b9bad6; }
.studio::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgb(255 255 255 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .045) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0, transparent 70%);
    mask-image: radial-gradient(ellipse at 70% 50%, #000 0, transparent 70%);
}
.studio::after { content: ""; position: absolute; top: 50%; right: -120px; width: 640px; height: 640px; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle, rgb(91 63 166 / .5), transparent 65%); pointer-events: none; }
.studio__grille { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.studio h2 { color: #fff; }
.studio__code-mot { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; letter-spacing: -0.04em; background: var(--spectre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.studio__intro { max-width: var(--mesure); margin-bottom: 28px; font-size: var(--fs-lead); }
.studio__liste { display: grid; gap: 12px; margin-bottom: 36px; }
.studio__liste li { display: flex; align-items: center; gap: 12px; color: #e4e3f7; font-weight: 500; }
.studio__liste .icone { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgb(255 255 255 / .07); color: var(--c-cyan); }

.studio__scene { position: relative; padding-bottom: 270px; }
.editeur { background: #0f0d2b; border: 1px solid rgb(255 255 255 / .1); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px rgb(0 0 0 / .45); }
.editeur__onglet { padding: 4px 12px; border-radius: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; }
.editeur__onglet--actif { margin-left: 12px; background: rgb(255 255 255 / .08); color: #e4e3f7; }
.editeur__corps { display: flex; min-height: 300px; }
.editeur__numeros { margin: 0; padding: 14px 0 16px 16px; list-style: none; text-align: right; font: .84rem/1.75 "JetBrains Mono", ui-monospace, monospace; color: #4b4d72; user-select: none; }
.editeur .code { flex: 1; font-size: .84rem; }
.editeur__statut { display: flex; justify-content: space-between; gap: 12px; padding: 7px 16px; background: var(--c-primaire-vif); color: #fff; font: .75rem "JetBrains Mono", ui-monospace, monospace; }
.editeur__etat { display: grid; }
.editeur__etat > span { grid-area: 1 / 1; }
.editeur__compile { display: none; }

.apercu { position: absolute; right: -24px; bottom: 0; z-index: 2; width: min(340px, 78%); padding: 18px; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px rgb(0 0 0 / .45); color: var(--c-texte); }
.apercu__entete { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.apercu__entete img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.apercu__entete strong { display: block; color: var(--c-encre); font-size: .95rem; line-height: 1.2; }
.apercu__entete small { font-size: .75rem; color: var(--c-doux); }
.apercu__direct { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #e6f6ec; color: #13662f; font-size: .75rem; font-weight: 700; }
.apercu__direct::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-vert); }
.apercu__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.apercu__kpis div { padding: 8px 10px; border-radius: 10px; background: var(--c-fond-doux); }
.apercu__kpis small { display: block; font-size: .75rem; color: var(--c-doux); line-height: 1.3; }
.apercu__kpis b { font-size: 1.05rem; color: var(--c-encre); }
.apercu__barres { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-bottom: 10px; padding-inline: 2px; border-bottom: 1px solid var(--c-ligne); }
.apercu__barres i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--c-primaire-vif), var(--c-violet)); transform-origin: bottom; }
.apercu__barres i:last-child { background: linear-gradient(180deg, var(--c-cyan), var(--c-primaire-vif)); }
.apercu__liste li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: .78rem; color: var(--c-encre); }
.apercu__liste li + li { border-top: 1px dashed var(--c-ligne); }
.puce { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-style: normal; font-weight: 700; }
.puce--vert { background: #e6f6ec; color: #13662f; }
.puce--jaune { background: #fff4d1; color: #7a5a00; }
.puce--violet { background: #efeaff; color: var(--c-primaire-vif); }

/* ---------- Mouvements (uniquement si le visiteur les accepte) ---------- */
@media (prefers-reduced-motion: no-preference) {
    /* Hero : entrée en cascade */
    .js .hero__texte > * { animation: monter .8s cubic-bezier(.2, .8, .2, 1) both; }
    .js .hero__texte > :nth-child(2) { animation-delay: .08s; }
    .js .hero__texte > :nth-child(3) { animation-delay: .16s; }
    .js .hero__texte > :nth-child(4) { animation-delay: .24s; }
    .js .hero__texte > :nth-child(5) { animation-delay: .32s; }
    .js .hero__visuel { animation: monter 1s .2s cubic-bezier(.2, .8, .2, 1) both; }

    /* Hero : les facettes du logo s'assemblent, puis l'ensemble flotte et suit la souris */
    .js .hero__motif polygon { transform-box: fill-box; transform-origin: center; animation: assembler 1.4s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 90ms + 200ms); }
    .js .hero__motif { animation: flotter 9s ease-in-out 2s infinite; }
    .hero__motif { translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 18px); transition: translate .8s cubic-bezier(.2, .8, .2, 1); }
    .js .carte-flottante--haut { animation: flotter 6s ease-in-out 1.2s infinite; }
    .js .carte-flottante--bas { animation: flotter 7s ease-in-out 2s infinite; }

    /* Code tapé : chaque ligne s'élargit caractère par caractère, curseur clignotant à la fin */
    .js .t-ligne { width: 0; }
    .js .est-visible .t-ligne { animation: taper calc(var(--n) * var(--v)) steps(var(--n)) var(--d) forwards; }
    .js .est-visible .t-ligne--derniere {
        animation: taper calc(var(--n) * var(--v)) steps(var(--n)) var(--d) forwards,
                   clignoter 1s steps(1) calc(var(--d) + var(--n) * var(--v)) infinite;
    }

    /* Studio : une fois le code tapé, ça « compile » et l'application apparaît */
    .js .editeur__compile { display: inline; }
    .js .editeur__ok { opacity: 0; }
    .js .est-visible .editeur__ok { animation: fondu .3s var(--fin) forwards; }
    .js .est-visible .editeur__compile { animation: effacer .3s var(--fin) forwards; }
    .js .est-visible .editeur__statut { animation: statut-ok .4s var(--fin) forwards; }
    .js .apercu { opacity: 0; transform: translateY(30px) scale(.96); }
    .js .est-visible .apercu { animation: compiler .7s cubic-bezier(.2, .8, .2, 1) var(--fin) forwards; }
    .js .apercu__barres i { transform: scaleY(0); }
    .js .est-visible .apercu__barres i { animation: barre .7s cubic-bezier(.2, .8, .2, 1) calc(var(--fin) + 300ms + var(--k) * 70ms) forwards; }
    .apercu__direct::before { animation: pouls 1.8s ease-out infinite; }
    .studio::after { animation: lueur 14s ease-in-out infinite alternate; }
    .studio__code-mot { background-size: 200% 100%; animation: defiler 6s linear infinite; }
}

@keyframes monter { from { opacity: 0; transform: translateY(24px); } }
@keyframes assembler { from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.3); } }
@keyframes flotter { 50% { transform: translateY(-10px); } }
@keyframes taper {
    0%     { width: 0; box-shadow: inset -2px 0 var(--curseur); }
    99.9%  { box-shadow: inset -2px 0 var(--curseur); }
    100%   { width: calc((var(--n) + 1) * 1ch); box-shadow: none; }
}
@keyframes clignoter { 0% { box-shadow: inset -2px 0 var(--curseur); } 50% { box-shadow: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes effacer { to { opacity: 0; } }
@keyframes statut-ok { to { background-color: #178a43; } }
@keyframes compiler { to { opacity: 1; transform: none; } }
@keyframes barre { to { transform: scaleY(1); } }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgb(31 166 74 / .6); } 70%, 100% { box-shadow: 0 0 0 8px rgb(31 166 74 / 0); } }
@keyframes lueur { to { translate: -160px -40%; } }
@keyframes defiler { to { background-position: -200% 0; } }

/* ---------- Téléphones multiples ---------- */
.canal__numeros { font-weight: 600; line-height: 1.9; }
.canal__numeros a { color: var(--c-encre); transition: color .2s; }
.canal__numeros a:hover { color: var(--c-primaire-vif); }

/* ---------- Pied de page : liens légaux ---------- */
.pied__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.pied__cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pied__cookies:hover { color: #fff; }

/* ---------- Contenus tiers (carte, vidéo) en attente de consentement ---------- */
.tiers { position: relative; width: 100%; height: 100%; }
.tiers--carte { height: 420px; }
.tiers iframe { display: block; width: 100%; height: 100%; border: 0; }
.tiers__invite {
    display: grid; place-content: center; justify-items: center; gap: 14px;
    height: 100%; padding: 32px 24px; text-align: center; line-height: 1.5;
    background: radial-gradient(circle at 50% 0, rgb(67 48 176 / .1), transparent 60%), var(--c-fond-doux);
}
.video .tiers__invite { background: radial-gradient(circle at 50% 0, rgb(91 63 166 / .55), transparent 65%), var(--c-encre); color: #c9c8e6; }
.tiers__icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; color: var(--c-primaire-vif); box-shadow: var(--ombre); }
.tiers__icone .icone { width: 26px; height: 26px; }
.tiers__invite p { max-width: 420px; margin: 0; font-size: .95rem; }
.tiers__actions { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.video .lien-fleche { color: #c9c3ff; }

/* ---------- Popup de consentement ---------- */
.consentement {
    position: fixed; left: 20px; bottom: 20px; z-index: 70;
    display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
    width: min(580px, calc(100% - 40px)); padding: 22px 24px;
    background: #fff; border: 1px solid var(--c-ligne); border-radius: 20px; box-shadow: var(--ombre-forte);
}
.consentement[hidden] { display: none; }
.consentement__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--c-vert) 12%, white); color: var(--c-vert); }
.consentement__icone .icone { width: 22px; height: 22px; }
.consentement__titre { margin: 2px 0 4px; font-weight: 800; color: var(--c-encre); }
.consentement__texte p:last-child { margin: 0; font-size: .9rem; line-height: 1.55; }
.consentement__actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.consentement__plus { margin-right: auto; font-size: .9rem; font-weight: 600; color: var(--c-primaire-vif); text-decoration: underline; text-underline-offset: 3px; }
.consentement .bouton { padding: 10px 20px; }

@media (prefers-reduced-motion: no-preference) {
    .consentement { animation: monter .5s cubic-bezier(.2, .8, .2, 1); }
    .consentement.se-ferme { animation: descendre .35s ease forwards; }
}
@keyframes descendre { to { opacity: 0; transform: translateY(24px); } }

/* ---------- Pile technique ---------- */
.lecteur-ecran { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.tech { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 10px 18px; border-radius: 999px; white-space: nowrap; font-weight: 600; font-size: .92rem; transition: background-color .25s, border-color .25s, color .25s; }
.tech__logo { width: 20px; height: 20px; flex-shrink: 0; transition: color .25s, opacity .25s; }

/* Studio (fond sombre) : logos blancs, couleur de marque au survol */
.stack { position: relative; z-index: 1; margin-top: clamp(56px, 8vw, 96px); }
.stack__titre { display: flex; align-items: center; gap: 16px; max-width: var(--largeur); margin: 0 auto 24px; padding-inline: var(--gouttiere); font: 700 .78rem var(--police); letter-spacing: .14em; text-transform: uppercase; color: #8d90b5; }
.stack__titre::before, .stack__titre::after { content: ""; flex: 1; height: 1px; background: rgb(255 255 255 / .1); }
.stack__rangees { display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defile { overflow: hidden; }
.defile__piste, .defile__copie { display: flex; gap: 14px; }
.defile__piste { width: max-content; }
.studio .tech { background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); color: #d9d8ef; }
.studio .tech__logo { color: #fff; opacity: .85; }
.studio .tech:hover { background: color-mix(in srgb, var(--marque-sombre) 14%, transparent); border-color: color-mix(in srgb, var(--marque-sombre) 55%, transparent); color: #fff; }
.studio .tech:hover .tech__logo { color: var(--marque-sombre); opacity: 1; }

/* Page Services (fond clair) : logos en couleur de marque, classés par domaine */
.stack-groupes { display: grid; gap: 12px; margin-bottom: 28px; padding: 20px; border: 1px solid var(--c-ligne); border-radius: var(--rayon); background: var(--c-fond-doux); }
.stack-groupes__ligne { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; }
.stack-groupes__domaine { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-doux); }
.stack-groupes__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-groupes .tech { padding: 6px 14px 6px 10px; gap: 8px; font-size: .85rem; background: #fff; border: 1px solid var(--c-ligne); color: var(--c-encre); }
.stack-groupes .tech__logo { width: 18px; height: 18px; color: var(--marque); }
.stack-groupes .tech:hover { border-color: var(--marque); }

@media (prefers-reduced-motion: no-preference) {
    /* La piste contient 2 copies identiques : décaler d'une copie (50 % + la moitié de l'écart) boucle sans saut */
    .defile__piste { animation: defilement 50s linear infinite; }
    .defile--inverse .defile__piste { animation-direction: reverse; animation-duration: 58s; }
    .stack__rangees:hover .defile__piste { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
    /* Sans mouvement : une seule rangée, statique et centrée */
    .defile--inverse, .defile__copie + .defile__copie { display: none; }
    .defile__piste, .defile__copie { width: auto; flex-wrap: wrap; justify-content: center; }
    .stack__rangees { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gouttiere); }
}
@keyframes defilement { to { transform: translateX(calc(-50% - 7px)); } }

/* ---------- Nouveaux pôles : badge, illustrations ---------- */
.badge-nouveau { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 4px 10px 4px 8px; border-radius: 999px; background: linear-gradient(90deg, var(--c-rose), var(--c-violet)); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 12px rgb(229 36 95 / .3); }
.badge-nouveau .icone { width: 13px; height: 13px; }
.surtitre + .badge-nouveau { margin: 0 0 14px 12px; vertical-align: top; }
.sommaire__lien em { padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pole--nouveau { border-color: color-mix(in srgb, var(--accent) 35%, var(--c-ligne)); }
.illu { display: block; width: 100%; height: 100%; }
.service__visuel--illu > .illu { aspect-ratio: 4 / 3.6; border-radius: 24px; overflow: hidden; box-shadow: var(--ombre-forte); }

/* ---------- Section « Nouvelles expertises » (accueil) ---------- */
.nouveautes { background: linear-gradient(180deg, #fff, var(--c-fond-doux)); }
.nouveautes__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.nouveaute { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--c-ligne); border-radius: 24px; box-shadow: var(--ombre); transition: box-shadow .25s, transform .25s; }
.nouveaute:hover { box-shadow: var(--ombre-forte); transform: translateY(-4px); }
.nouveaute__visuel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-encre); }
.nouveaute__visuel .illu { position: absolute; inset: 0; }
.nouveaute__corps { display: flex; flex-direction: column; flex: 1; align-items: flex-start; padding: 28px 30px 30px; }
.nouveaute h3 { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; }
.nouveaute h3 .pole__icone { position: static; width: 44px; height: 44px; border-radius: 12px; box-shadow: none; }
.nouveaute__corps > p { color: var(--c-doux); }
.nouveaute .liste-check { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; flex: 1; align-content: start; margin-bottom: 24px; }

/* Scène cybersécurité : statuts qui se valident */
.statuts { position: absolute; left: 16px; bottom: 18px; display: grid; gap: 6px; }
.statuts li { display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 6px 12px 6px 7px; border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; background: rgb(20 18 58 / .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: .78rem; font-weight: 600; }
.statuts .icone { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--c-vert); color: #fff; }

/* Scène IA : question, l'assistant « écrit », puis répond */
.chat { position: absolute; right: 16px; bottom: 18px; left: 38%; display: grid; gap: 8px; }
.chat__bulle { margin: 0; padding: 9px 13px; border-radius: 14px; font-size: .78rem; line-height: 1.4; }
.chat__bulle--question { justify-self: end; border-bottom-right-radius: 4px; background: var(--c-sarcelle); color: #fff; }
.chat__bulle--reponse { display: grid; justify-self: start; border-bottom-left-radius: 4px; background: #fff; color: var(--c-encre); box-shadow: 0 8px 20px rgb(0 0 0 / .25); }
.chat__bulle--reponse > span { grid-area: 1 / 1; }
.chat__texte { display: flex; align-items: flex-start; gap: 6px; }
.chat__texte .icone { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; color: var(--c-sarcelle); }
.chat__saisie { display: none; align-items: center; gap: 4px; }
.chat__saisie i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-doux); }

/* Illustrations : état final (sans animation) */
.illu__menace { fill: var(--c-vert); }

@media (prefers-reduced-motion: no-preference) {
    /* Cybersécurité : le radar tourne, les menaces apparaissent puis sont neutralisées, le bouclier respire */
    .illu__balayage { transform-box: view-box; transform-origin: 200px 150px; animation: radar 4s linear infinite; }
    .illu__menace { transform-box: fill-box; transform-origin: center; opacity: 0; animation: menace 5.2s ease-in-out infinite; }
    .illu__bouclier { transform-box: fill-box; transform-origin: center; animation: respirer 4s ease-in-out infinite; }

    /* IA : l'information circule dans le réseau, les neurones s'allument */
    .illu__flux { stroke-dasharray: 14 120; animation: flux 2.4s linear infinite; }
    .illu__noeud { animation: noeud 2.6s ease-in-out infinite; }
    .illu__etincelle { transform-box: fill-box; transform-origin: center; animation: etincelle 2s ease-in-out infinite; }

    /* Scènes déclenchées à l'écran */
    .js .statuts li { opacity: 0; transform: translateX(-12px); }
    .js .est-visible .statuts li { animation: surgir .5s cubic-bezier(.2, .8, .2, 1) calc(.6s + var(--k) * .7s) forwards; }
    .js .chat__bulle { opacity: 0; transform: translateY(10px); }
    .js .est-visible .chat__bulle--question { animation: surgir .5s cubic-bezier(.2, .8, .2, 1) .5s forwards; }
    .js .est-visible .chat__bulle--reponse { animation: surgir .5s cubic-bezier(.2, .8, .2, 1) 1.3s forwards; }
    .js .chat__saisie { display: flex; }
    .js .chat__texte { opacity: 0; }
    .js .est-visible .chat__saisie { animation: effacer .2s 3s forwards; }
    .js .est-visible .chat__texte { animation: fondu .4s 3.1s forwards; }
    .chat__saisie i { animation: rebond 1s ease-in-out infinite; }
    .chat__saisie i:nth-child(2) { animation-delay: .15s; }
    .chat__saisie i:nth-child(3) { animation-delay: .3s; }
}
@keyframes radar { to { transform: rotate(360deg); } }
@keyframes menace {
    0%       { opacity: 0; fill: var(--c-rose); transform: scale(.4); }
    10%      { opacity: 1; fill: var(--c-rose); transform: scale(1.5); }
    25%, 40% { fill: var(--c-rose); transform: scale(1); }
    50%, 80% { opacity: 1; fill: var(--c-vert); transform: scale(1); }
    100%     { opacity: 0; fill: var(--c-vert); }
}
@keyframes respirer { 50% { transform: scale(1.04); } }
@keyframes flux { from { stroke-dashoffset: 134; } to { stroke-dashoffset: 0; } }
@keyframes noeud { 50% { fill: #0ea5d9; } }
@keyframes etincelle { 50% { opacity: .45; transform: scale(.7) rotate(45deg); } }
@keyframes surgir { to { opacity: 1; transform: none; } }
@keyframes rebond { 50% { transform: translateY(-3px); opacity: .5; } }

/* ---------- Implantations (Mali, Côte d'Ivoire) ---------- */
.barre-info__bureau { display: inline-flex; align-items: center; gap: 8px; }
.barre-info__bureau strong { color: #fff; font-weight: 600; }

.pied__bureau div { line-height: 1.6; }
.pied__bureau strong { display: block; color: #fff; font-weight: 600; }
.pied__bureau + .pied__bureau { margin-top: 6px; }

.contact__bureau { display: flex; align-items: center; gap: 14px; }
.contact__bureau > span { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: rgb(255 255 255 / .1); }
.contact__bureau small { display: block; font-size: .78rem; color: #b9b5e8; line-height: 1.2; }
.contact__coordonnees .contact__bureau a { display: inline; font-weight: 600; color: #fff; }
.contact__bureau a:hover { text-decoration: underline; text-underline-offset: 3px; }

.bureaux { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.bureau { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--c-ligne); border-radius: 24px; box-shadow: var(--ombre); }
.bureau__entete { display: flex; align-items: center; gap: 16px; padding: 26px 28px 0; }
.bureau__code { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: var(--c-primaire); color: #fff; font-weight: 800; letter-spacing: .04em; }
.bureau__entete h3 { margin: 0; font-size: 1.35rem; }
.bureau__entete p { margin: 0; color: var(--c-doux); font-size: .92rem; }
.bureau__infos { display: grid; gap: 14px; padding: 22px 28px 26px; }
.bureau__infos li { display: flex; gap: 12px; align-items: flex-start; }
.bureau__infos > li > .icone { flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; color: var(--c-primaire-vif); }
.bureau__whatsapp > .icone { color: #1faa53 !important; }
.bureau__infos small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-doux); }
.bureau__infos a { font-weight: 600; color: var(--c-encre); }
.bureau__infos a:hover { color: var(--c-primaire-vif); }
.bureau__carte { margin-top: auto; border-top: 1px solid var(--c-ligne); }
.bureau__carte .tiers--carte { height: 280px; }
.bureau__carte iframe { filter: grayscale(.3); }

/* ---------- Illustrations des pôles : réseaux, vidéosurveillance, logiciels, solaire ---------- */
@media (prefers-reduced-motion: no-preference) {
    /* Réseaux : voyants du switch */
    .illu__led { animation: clignoter-led 1.6s steps(1) infinite; }
    /* Vidéosurveillance : le champ de la caméra balaie, la personne est détectée puis identifiée */
    .illu__cone { transform-box: view-box; transform-origin: 133px 103px; animation: balayer 5s ease-in-out infinite alternate; }
    .illu__detection { animation: detecter 5s ease-in-out infinite; }
    .illu__rec { animation: clignoter-led 1.2s steps(1) infinite; }
    /* Logiciels : le code s'écrit ligne par ligne, les graphiques bougent, le déploiement est notifié */
    .illu__code { transform-box: fill-box; transform-origin: left center; animation: coder 6s ease-out infinite; }
    .illu__barre-app { transform-box: fill-box; transform-origin: bottom; animation: graphique 3s ease-in-out infinite; }
    .illu__notif { transform-box: fill-box; transform-origin: center; animation: notifier 6s ease-in-out infinite; }
    /* Solaire : les rayons tournent, la lumière descend vers le panneau, la batterie se charge */
    .illu__rayons { transform-box: view-box; transform-origin: 85px 80px; animation: radar 24s linear infinite; }
    .illu__faisceau { stroke-dasharray: 4 10; animation: faisceau 1.2s linear infinite; }
    .illu__charge { transform-box: fill-box; transform-origin: bottom; animation: charger 4s ease-in-out infinite; }
}
@keyframes clignoter-led { 50% { opacity: .25; } }
@keyframes balayer { from { transform: rotate(-7deg); } to { transform: rotate(5deg); } }
@keyframes detecter { 0%, 30% { opacity: 0; } 40%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes coder { 0% { transform: scaleX(0); } 12%, 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes graphique { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes notifier { 0%, 45% { opacity: 0; transform: translateY(10px) scale(.92); } 55%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes faisceau { to { stroke-dashoffset: -14; } }
@keyframes charger { 0% { transform: scaleY(.12); } 75%, 100% { transform: scaleY(1); } }

/* =====================================================================
   Écran d'accueil animé (splash) — 3,5 s, à chaque chargement de page (réglage SITE['splash'])
   Chronologie : 0,15 s secteurs en orbite · 0,35 s liaisons · 0,65 s logo ·
                 1,05 s « IMPERIS » · 1,5 s « GROUP » · 1,8 s secteurs · 2,75 s rideau
   ===================================================================== */
.splash { display: none; }
.splash-actif body { overflow: hidden; }
.splash-actif .splash {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-content: center; justify-items: center; gap: clamp(20px, 4vh, 36px);
    padding: 24px; overflow: hidden; color: #fff;
    background: radial-gradient(circle at 50% 40%, #2f2380 0, #1a1650 38%, var(--c-encre) 72%);
    animation: splash-sortie .75s cubic-bezier(.7, 0, .3, 1) 2.75s forwards;
}
.splash.splash--sortie { animation: splash-sortie .45s cubic-bezier(.7, 0, .3, 1) forwards; }

.splash__scene { --taille: min(320px, 66vw, 42vh); position: relative; width: var(--taille); aspect-ratio: 1; animation: splash-recul .75s cubic-bezier(.7, 0, .3, 1) 2.7s forwards; }
.splash__liens, .splash__orbite { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: splash-orbite 3.4s linear forwards; }
.splash__cercle { fill: none; stroke: rgb(255 255 255 / .12); stroke-width: 1.5; stroke-dasharray: 3 7; }
.splash__lien { stroke: rgb(255 255 255 / .3); stroke-width: 1.5; stroke-dasharray: 150; stroke-dashoffset: 150; animation: splash-trait .6s var(--courbe-sortie) calc(.35s + var(--i) * .07s) forwards; }

.splash__secteur {
    --r: calc(var(--taille) * .375);
    position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
    width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 16px;
    background: var(--accent); color: #fff;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent);
    opacity: 0; transform: rotate(var(--angle)) translate(var(--r)) rotate(calc(-1 * var(--angle))) scale(.2);
    animation: splash-secteur .55s cubic-bezier(.34, 1.56, .64, 1) calc(.15s + var(--i) * .08s) forwards;
}
.splash__secteur .icone { width: 24px; height: 24px; animation: splash-contre 3.4s linear forwards; }

.splash__logo { position: absolute; inset: 0; display: grid; place-items: center; }
.splash__logo::before { content: ""; position: absolute; width: 40%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgb(255 255 255 / .06), 0 20px 60px rgb(0 0 0 / .45); opacity: 0; transform: scale(.4); animation: splash-logo .8s cubic-bezier(.34, 1.56, .64, 1) .55s forwards; }
.splash__logo img { position: relative; width: 27%; height: auto; opacity: 0; transform: scale(.4) rotate(-14deg); animation: splash-logo .9s cubic-bezier(.34, 1.56, .64, 1) .65s forwards; }
.splash__halo { position: absolute; width: 40%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgb(255 255 255 / .55); opacity: 0; animation: splash-halo 1.1s ease-out 1s 2; }

.splash__texte { text-align: center; animation: splash-recul .75s cubic-bezier(.7, 0, .3, 1) 2.7s forwards; }
.splash__nom { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; margin: 0; font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); font-weight: 800; letter-spacing: .08em; line-height: 1.05; }
.splash__lettre { display: inline-block; overflow: hidden; }
.splash__lettre > span { display: inline-block; transform: translateY(110%); animation: splash-lettre .6s var(--courbe-sortie) calc(1.05s + var(--i) * .05s) forwards; }
.splash__group { margin-left: .3em; color: #c9c3ff; opacity: 0; animation: splash-group .8s var(--courbe-sortie) 1.5s forwards; }
.splash__secteurs { max-width: min(560px, 90vw); margin: 14px auto 0; color: #b9b8d9; font-size: var(--fs-sm); letter-spacing: .03em; opacity: 0; transform: translateY(8px); animation: splash-apparaitre .6s var(--courbe-sortie) 1.8s forwards; }
.splash__progression { display: block; width: 160px; height: 3px; margin: 22px auto 0; overflow: hidden; border-radius: 3px; background: rgb(255 255 255 / .12); }
.splash__progression > span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-cyan), #fff); transform-origin: left; transform: scaleX(0); animation: splash-progression 2.5s linear .2s forwards; }

.splash__passer { position: absolute; right: 20px; bottom: 20px; padding: 10px 18px; border: 1px solid rgb(255 255 255 / .25); border-radius: 999px; background: rgb(255 255 255 / .06); color: #fff; font: 600 var(--fs-sm) var(--police); cursor: pointer; transition: background-color var(--duree-rapide); }
.splash__passer:hover { background: rgb(255 255 255 / .14); }

/* Le contenu de la page attend la fin de l'écran d'accueil pour jouer ses propres entrées */
.splash-actif main * { animation-play-state: paused !important; }
.splash-actif main .apparition { opacity: 0 !important; transform: translateY(18px) !important; }

@keyframes splash-sortie { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes splash-recul { to { opacity: 0; transform: scale(1.06) translateY(-12px); } }
@keyframes splash-orbite { to { transform: rotate(24deg); } }
@keyframes splash-contre { to { transform: rotate(-24deg); } }
@keyframes splash-trait { to { stroke-dashoffset: 0; } }
@keyframes splash-secteur { to { opacity: 1; transform: rotate(var(--angle)) translate(var(--r)) rotate(calc(-1 * var(--angle))) scale(1); } }
@keyframes splash-logo { to { opacity: 1; transform: none; } }
@keyframes splash-halo { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes splash-lettre { to { transform: none; } }
@keyframes splash-group { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .08em; } }
@keyframes splash-apparaitre { to { opacity: 1; transform: none; } }
@keyframes splash-progression { to { transform: scaleX(1); } }

/* =====================================================================
   Hero de l'accueil
   ===================================================================== */
.marque img { object-fit: contain; }
.hero__aurore { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__aurore i { position: absolute; width: 40vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .14; }
.hero__aurore i:nth-child(1) { top: -25%; left: -12%; background: var(--c-cyan); }
.hero__aurore i:nth-child(2) { top: 5%; right: -14%; background: var(--c-violet); opacity: .12; }
.hero__aurore i:nth-child(3) { bottom: -40%; left: 28%; background: var(--c-rose); opacity: .08; }

.hero__pastille { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 7px 16px 7px 12px; border: 1px solid var(--c-ligne); border-radius: 999px; background: rgb(255 255 255 / .8); box-shadow: var(--ombre); color: var(--c-encre); font-size: var(--fs-sm); font-weight: 600; }
.point-vivant { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--c-vert); }

.hero__titre { margin-bottom: 24px; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.035em; }
.rotateur { display: grid; }
.rotateur__mot {
    grid-area: 1 / 1; padding-bottom: .06em;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--c-violet)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rotateur__mot:not(.est-actif) { opacity: 0; transform: translateY(.3em); }
.rotateur__mot.est-sortant { opacity: 0; transform: translateY(-.3em); }
.hero__titre-fin { display: block; color: var(--c-encre); }

.hero__stats { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 48px); max-width: 34em; margin: 0; padding-top: 28px; border-top: 1px solid var(--c-ligne); }
.hero__stats div { display: flex; flex-direction: column-reverse; }
.hero__stats dd { margin: 0; color: var(--c-encre); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.hero__stats dt { margin-top: 6px; color: var(--c-doux); font-size: var(--fs-sm); }

/* =====================================================================
   Normes d'animation
   - Boucles décoratives en pause hors de l'écran (.hors-ecran, posée par main.js)
   - Bouton « Mettre en pause les animations » (WCAG 2.2.2), mémorisé dans le navigateur
   ===================================================================== */
.hors-ecran, .hors-ecran * { animation-play-state: paused !important; }
.animations-pause :is(.illu, .illu *, .carte *, .scene *, .appli__squelette, .mosaique__badge, .eventail__badge, .defile__piste, .hero__motif, .hero__aurore i, .carte-flottante, .studio__code-mot, .chat__saisie i, .point-vivant),
.animations-pause .studio::after,
.animations-pause .apercu__direct::before { animation-play-state: paused !important; }

@media (prefers-reduced-motion: no-preference) {
    .hero__aurore i { animation: aurore 20s ease-in-out infinite alternate; }
    .hero__aurore i:nth-child(2) { animation-duration: 26s; animation-delay: -6s; }
    .hero__aurore i:nth-child(3) { animation-duration: 23s; animation-delay: -12s; }
    .point-vivant { animation: pouls 2s ease-out infinite; }
    .rotateur__mot { transition: opacity var(--duree-moyenne) var(--courbe-sortie), transform var(--duree-moyenne) var(--courbe-sortie); }
}
@keyframes aurore { to { transform: translate(5vw, 4vw) scale(1.12); } }

/* =====================================================================
   Page À propos
   ===================================================================== */

/* ---------- Hero : texte + mosaïque de photos ---------- */
.hero--apropos h1 { max-width: 15em; }
.hero--apropos .ariane { margin-bottom: 20px; }
.mosaique { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap: 16px; aspect-ratio: 1 / .92; }
.mosaique__tuile { margin: 0; overflow: hidden; border-radius: 22px; box-shadow: var(--ombre-forte); }
.mosaique__tuile--grande { grid-row: 1 / 3; }
.mosaique__tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--courbe-sortie); }
.mosaique__tuile:hover img { transform: scale(1.04); }
.mosaique__badge { top: 28px; left: -22px; flex-direction: column; align-items: flex-start; gap: 0; }
.mosaique__badge strong { font-size: 2rem; font-weight: 800; color: var(--c-primaire); letter-spacing: -0.03em; }
.mosaique__badge--pays { top: auto; bottom: 30px; left: auto; right: -18px; flex-direction: row; align-items: center; gap: 12px; }
.mosaique__badge--pays strong { font-size: 1.05rem; color: var(--c-encre); }

/* ---------- Mission / vision ---------- */
.manifeste { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.manifeste__carte { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 44px); border-radius: 24px; }
.manifeste__carte p { margin: 18px 0 0; font-size: clamp(1.25rem, 1rem + .9vw, 1.65rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; }
.manifeste__carte--mission { background: radial-gradient(circle at 100% 0, #3d2ca0 0, transparent 55%), var(--c-primaire); color: #fff; }
.manifeste__carte--mission strong { color: #9ee6ff; }
.manifeste__carte--vision { background: var(--c-fond-doux); border: 1px solid var(--c-ligne); color: var(--c-encre); }
.manifeste__carte--vision strong { color: var(--c-primaire-vif); }
.manifeste__etiquette { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.engagements li { padding: 28px 26px; border: 1px solid var(--c-ligne); border-radius: var(--rayon); background: #fff; transition: box-shadow var(--duree-rapide), transform var(--duree-rapide); }
.engagements li:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.engagements__icone { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: color-mix(in srgb, var(--c-primaire-vif) 10%, white); color: var(--c-primaire-vif); }
.engagements h3 { margin-bottom: 6px; }
.engagements p { margin: 0; color: var(--c-doux); }

/* ---------- Parcours (frise) ---------- */
.parcours-grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.parcours-grille__titre { position: sticky; top: calc(var(--entete) + 32px); }
.parcours-grille__titre p:not(.surtitre) { color: var(--c-doux); font-size: var(--fs-lead); }
.parcours { position: relative; display: grid; gap: 22px; padding-left: 40px; }
.parcours::before, .parcours::after { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; }
.parcours::before { background: var(--c-ligne); }
.parcours::after { background: linear-gradient(180deg, var(--c-primaire-vif), var(--c-cyan)); transform-origin: top; }
.parcours__etape { position: relative; padding: 22px 26px; border-radius: 18px; background: #fff; box-shadow: var(--ombre); }
.parcours__etape::before { content: ""; position: absolute; top: 26px; left: -36px; width: 16px; height: 16px; border: 3px solid var(--c-primaire-vif); border-radius: 50%; background: #fff; }
.parcours__repere { display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c-primaire-vif) 10%, white); color: var(--c-primaire-vif); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.parcours__etape h3 { margin-bottom: 6px; }
.parcours__etape p { margin: 0; color: var(--c-doux); }
.parcours__etape--actuelle { background: var(--c-primaire); }
.parcours__etape--actuelle::before { border-color: var(--c-cyan); background: var(--c-cyan); box-shadow: 0 0 0 6px rgb(14 165 217 / .2); }
.parcours__etape--actuelle h3 { color: #fff; }
.parcours__etape--actuelle p { color: #d6d3f5; }
.parcours__etape--actuelle .parcours__repere { background: rgb(255 255 255 / .12); color: #9ee6ff; }

/* ---------- Implantations (carte) ---------- */
.implantations { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 112px); background: radial-gradient(circle at 15% 30%, #2b1f73 0, transparent 55%), var(--c-encre); color: #b9bad6; }
.implantations__grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.implantations h2 { color: #fff; }
.implantations__intro { max-width: var(--mesure); font-size: var(--fs-lead); }
.implantations__carte { padding: 16px; border: 1px solid rgb(255 255 255 / .08); border-radius: 24px; background: rgb(255 255 255 / .03); }
.carte { display: block; width: 100%; height: auto; }
.carte__terre circle { fill: rgb(255 255 255 / .16); }
.carte__terre .carte__pays--ml { fill: var(--c-cyan); fill-opacity: .8; }
.carte__terre .carte__pays--ci { fill: var(--c-orange); fill-opacity: .85; }
.carte__liaison-fond { fill: none; stroke: rgb(255 255 255 / .18); stroke-width: 2; }
.carte__liaison { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 12; }
.carte__onde { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 2; }
.implantations__bureaux { display: grid; gap: 14px; margin: 26px 0 30px; }
.implantations__bureaux li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid rgb(255 255 255 / .1); border-radius: 16px; background: rgb(255 255 255 / .04); }
.implantations__bureaux .bureau__code { background: rgb(255 255 255 / .1); }
.implantations__bureaux strong { display: block; color: #fff; }
.implantations__bureaux span:not(.bureau__code) { display: block; font-size: var(--fs-sm); }
.implantations__bureaux a { color: #fff; }

/* Cartes de pôles cliquables (À propos) */
a.pole { color: inherit; }
a.pole .lien-fleche { margin-top: auto; }
a.pole .pole__corps > p { margin-bottom: 16px; }

@media (prefers-reduced-motion: no-preference) {
    .js .hero--apropos .mosaique { animation: monter 1s var(--courbe-sortie) .2s both; }
    .js .mosaique__badge { animation: flotter 6s ease-in-out 1.2s infinite; }
    .js .mosaique__badge--pays { animation-duration: 7s; animation-delay: 2s; }
    /* Frise : la ligne se dessine, puis les étapes apparaissent l'une après l'autre */
    .js .parcours::after { transform: scaleY(0); }
    .js .parcours.est-visible::after { transition: transform 1.6s var(--courbe-sortie); transform: scaleY(1); }
    .js .parcours__etape { opacity: 0; transform: translateX(-14px); }
    .js .parcours.est-visible .parcours__etape { animation: surgir .6s var(--courbe-sortie) forwards; }
    .js .parcours.est-visible .parcours__etape:nth-child(2) { animation-delay: .2s; }
    .js .parcours.est-visible .parcours__etape:nth-child(3) { animation-delay: .4s; }
    .js .parcours.est-visible .parcours__etape:nth-child(4) { animation-delay: .6s; }
    .js .parcours.est-visible .parcours__etape:nth-child(5) { animation-delay: .8s; }
    /* Carte : l'information circule entre les bureaux, les épingles émettent des ondes */
    .carte__liaison { animation: liaison 1.4s linear infinite; }
    .carte__onde { transform-box: fill-box; transform-origin: center; animation: onde-epingle 2.4s ease-out infinite; }
    .carte__epingle:nth-of-type(2) .carte__onde { animation-delay: 1.2s; }
}
@keyframes liaison { to { stroke-dashoffset: -18; } }
@keyframes onde-epingle { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(3); } }

/* =====================================================================
   Page Services
   ===================================================================== */

/* ---------- Hero : message + mosaïque des pôles ---------- */
.hero--services h1 { max-width: 13em; }
.hero--services .ariane { margin-bottom: 20px; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bento__tuile { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1.05; border-radius: 18px; background: var(--c-encre); box-shadow: var(--ombre); transition: transform var(--duree-rapide) var(--courbe-sortie), box-shadow var(--duree-rapide); }
.bento__tuile:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.bento__visuel { position: absolute; inset: 0; }
.bento__libelle { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 12px; background: rgb(255 255 255 / .94); color: var(--c-encre); font-size: .8125rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.bento__numero { flex-shrink: 0; color: color-mix(in srgb, var(--accent) 80%, black); font: 600 var(--fs-xs) "JetBrains Mono", ui-monospace, monospace; }

/* ---------- Sommaire : le pôle en cours de lecture est surligné ---------- */
.sommaire__lien[aria-current="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.sommaire__lien[aria-current="true"] .icone { color: #fff; }
.sommaire__lien[aria-current="true"] em { background: #fff; color: var(--accent); }

/* ---------- Un pôle ---------- */
.service__entete { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 32px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.service__numero { font-size: clamp(4.5rem, 2.8rem + 6vw, 8.5rem); font-weight: 800; line-height: .78; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--accent) 60%, transparent); user-select: none; }
.service__entete h2 { margin-bottom: 10px; }
.service__entete .service__resume { margin-bottom: 0; }
.service__grille { align-items: start; }
.service__visuel { position: sticky; top: calc(var(--entete) + 84px); }
.service__contenu { min-width: 0; }

.prestations { grid-template-columns: 1fr 1fr; gap: 14px; }
.prestations li { display: block; padding: 20px; border: 1px solid var(--c-ligne); border-radius: 16px; background: #fff; transition: border-color var(--duree-rapide), box-shadow var(--duree-rapide); }
.prestations li:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--c-ligne)); box-shadow: var(--ombre); }
.prestations__puce { margin-bottom: 12px; }
.prestations h3 { margin: 0 0 4px; font-size: 1.0625rem; }

.service__bloc { margin-bottom: 28px; }
.service__bloc-titre { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--c-doux); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.service__bloc-titre .icone { color: var(--accent); }
.service__techs .tech { gap: 8px; padding: 7px 14px 7px 10px; border: 1px solid var(--c-ligne); background: #fff; color: var(--c-encre); font-size: var(--fs-sm); }
.service__techs .tech__logo { width: 18px; height: 18px; color: var(--marque); }
.service__techs .tech:hover { border-color: var(--marque); }

.references { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reference { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--c-ligne); border-radius: 14px; background: #fff; transition: transform var(--duree-rapide), box-shadow var(--duree-rapide); }
.reference:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.reference__image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-fond-doux); }
.reference__image img { width: 100%; height: 100%; object-fit: cover; }
.reference__image--logo { display: grid; place-items: center; padding: 10px; background: #fff; }
.reference__image--logo img { width: auto; max-width: 70%; object-fit: contain; }
.reference__texte { padding: 10px 12px 12px; }
.reference__texte strong { display: block; color: var(--c-encre); font-size: var(--fs-sm); line-height: 1.3; }
.reference__texte span { color: var(--c-doux); font-size: var(--fs-xs); }

/* ---------- Méthode ---------- */
.methode { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 112px); background: radial-gradient(circle at 85% 0, #3d2ca0 0, transparent 50%), var(--c-primaire); color: #d6d3f5; }
.methode h2 { color: #fff; }
.methode .titre-section p:last-child { color: #c9c8e6; }
.methode__etapes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.methode__etapes::before { content: ""; position: absolute; top: 28px; left: 28px; right: 28px; height: 2px; background: rgb(255 255 255 / .16); }
.methode__etapes li { position: relative; }
.methode__icone { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; color: var(--c-primaire); box-shadow: 0 10px 24px rgb(0 0 0 / .25); }
.methode__icone .icone { width: 24px; height: 24px; }
.methode__numero { display: block; margin: 18px 0 6px; color: #9ee6ff; font: 600 var(--fs-xs) "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; }
.methode h3 { margin-bottom: 6px; color: #fff; }
.methode li p { margin: 0; color: #c9c8e6; }

@media (prefers-reduced-motion: no-preference) {
    .js .bento__tuile { animation: monter .7s var(--courbe-sortie) calc(.15s + var(--i) * .07s) both; }
    .js .methode__etapes li { opacity: 0; transform: translateY(16px); }
    .js .methode__etapes.est-visible li { animation: surgir .6s var(--courbe-sortie) forwards; }
    .js .methode__etapes.est-visible li:nth-child(2) { animation-delay: .15s; }
    .js .methode__etapes.est-visible li:nth-child(3) { animation-delay: .3s; }
    .js .methode__etapes.est-visible li:nth-child(4) { animation-delay: .45s; }
}

/* =====================================================================
   Page Réalisations
   ===================================================================== */
.hero--projets h1 { max-width: 12em; }
.hero--projets .ariane { margin-bottom: 20px; }
.etiquette .icone { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }

/* ---------- Projet à la une ---------- */
.une { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.une__media { position: relative; overflow: hidden; border-radius: 24px; box-shadow: var(--ombre-forte); }
.une__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--courbe-sortie); }
.une__media:hover img { transform: scale(1.03); }
.une__ruban { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; border-radius: 999px; background: linear-gradient(90deg, var(--c-rose), var(--c-violet)); color: #fff; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 16px rgb(229 36 95 / .35); }
.une__ruban .icone { width: 14px; height: 14px; }
.une__texte .etiquette { margin-bottom: 14px; }
.une__resume { color: var(--c-doux); font-size: var(--fs-lead); }
.une__fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 30px; }
.une__fiche div { padding: 12px 16px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--c-fond-doux); }
.une__fiche dt { color: var(--c-doux); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.une__fiche dd { margin: 2px 0 0; color: var(--c-encre); font-weight: 700; }

/* ---------- Portfolio ---------- */
.compteur { margin: 0; color: var(--c-doux); }
.compteur strong { color: var(--c-encre); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.filtres--collants {
    position: sticky; top: calc(var(--entete) + 12px); z-index: 10;
    flex-wrap: nowrap; justify-content: flex-start; width: fit-content; max-width: 100%; margin: 0 auto 32px; padding: 8px;
    overflow-x: auto; scrollbar-width: none;
    border-radius: 999px; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--ombre);
}
.filtres--collants .filtre { flex-shrink: 0; border-color: transparent; }

.portfolio { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 330px; grid-auto-flow: dense; gap: 20px; }
.realisation { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--ombre); transition: box-shadow var(--duree-rapide), transform var(--duree-rapide) var(--courbe-sortie); }
.realisation:hover { box-shadow: var(--ombre-forte); transform: translateY(-4px); }
.realisation--grande { grid-column: span 2; }
.realisation h3 { margin: 10px 0 6px; font-size: 1.1875rem; }
.realisation p { margin: 0; font-size: var(--fs-sm); }

/* Carte photo : image pleine carte, texte en surimpression */
.realisation--photo .realisation__media { position: absolute; inset: 0; }
.realisation--photo .realisation__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--courbe-sortie); }
.realisation--photo:hover .realisation__media img { transform: scale(1.06); }
.realisation--photo .realisation__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgb(20 18 58 / .55) 58%, rgb(20 18 58 / .94) 100%); }
.realisation--photo .realisation__texte { position: relative; z-index: 1; margin-top: auto; padding: 22px 24px; color: #d6d3f5; }
.realisation--photo h3 { color: #fff; }
.realisation--photo .etiquette { background: rgb(255 255 255 / .16); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.realisation--grande h3 { font-size: 1.5rem; }

/* Carte logo : logo centré sur fond clair, texte dessous */
.realisation--logo .realisation__media { display: grid; flex: 1; place-items: center; min-height: 0; padding: 22px; background: linear-gradient(180deg, #fff, var(--c-fond-doux)); }
.realisation--logo .realisation__media img { width: auto; max-width: 62%; max-height: 120px; object-fit: contain; transition: transform .5s var(--courbe-sortie); }
.realisation--logo:hover .realisation__media img { transform: scale(1.06); }
.realisation--logo .realisation__texte { padding: 16px 22px 20px; border-top: 1px solid var(--c-ligne); }
.realisation--logo p { color: var(--c-doux); }

@media (prefers-reduced-motion: no-preference) {
    .realisation.vient-apparaitre { animation: carte-entree .45s var(--courbe-sortie); }
}
@keyframes carte-entree { from { opacity: 0; transform: scale(.96) translateY(8px); } }

/* =====================================================================
   Page Produits
   ===================================================================== */
.hero--produits h1 { max-width: 12em; }
.hero--produits .ariane { margin-bottom: 20px; }

/* ---------- Hero : éventail d'écrans de logiciels ---------- */
.eventail { position: relative; aspect-ratio: 1 / .84; }
.eventail__carte {
    --r: 0deg; --dx: 0%; --dy: 0%;
    position: absolute; top: 50%; left: 50%; width: 64%; margin: 0; overflow: hidden;
    border-radius: 20px; background: #fff; box-shadow: var(--ombre-forte);
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--r));
    transition: transform .6s var(--courbe-sortie);
}
.eventail__carte:nth-of-type(1) { --r: -10deg; --dx: -30%; --dy: -7%; }
.eventail__carte:nth-of-type(2) { --r: 9deg; --dx: 28%; --dy: -3%; }
.eventail__carte:nth-of-type(3) { --dy: 8%; }
.eventail:hover .eventail__carte:nth-of-type(1) { --r: -13deg; --dx: -36%; }
.eventail:hover .eventail__carte:nth-of-type(2) { --r: 12deg; --dx: 34%; }
.eventail:hover .eventail__carte:nth-of-type(3) { --dy: 4%; }
.eventail__carte img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; background: var(--c-encre); }
.eventail__carte figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.eventail__carte strong { color: var(--c-encre); }
.eventail__carte:not(:last-of-type) figcaption { visibility: hidden; }  /* légende sur la carte de devant seulement */
.eventail__carte figcaption span { color: var(--c-doux); font-size: var(--fs-xs); }
.eventail__badge { top: 4%; left: 0; z-index: 4; }

/* ---------- Produit phare ---------- */
.phare { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.phare__visuel { position: relative; display: block; overflow: hidden; border-radius: 24px; background: var(--c-encre); box-shadow: var(--ombre-forte); }
.phare__visuel img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform .8s var(--courbe-sortie); }
.phare__visuel:hover img { transform: scale(1.03); }
.phare .etiquette { margin-bottom: 14px; }
.phare__description { color: var(--c-doux); font-size: var(--fs-lead); }
.phare__fonctions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 18px; }
.phare__fonctions li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--c-fond-doux); color: var(--c-encre); font-size: .9375rem; font-weight: 600; }
.phare__fonctions .icone { flex-shrink: 0; margin-top: 3px; color: var(--c-vert); }
.phare .logiciel__cible { margin-bottom: 26px; }

/* ---------- Catalogue ---------- */
.logiciels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.logiciel { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--ombre); transition: box-shadow var(--duree-rapide), transform var(--duree-rapide) var(--courbe-sortie); }
.logiciel:hover { box-shadow: var(--ombre-forte); transform: translateY(-4px); }
.logiciel__visuel { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-encre); }
.logiciel__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--courbe-sortie); }
.logiciel:hover .logiciel__visuel img { transform: scale(1.05); }
.logiciel__corps { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px 24px 18px; }
.logiciel h3 { margin: 12px 0 6px; }
.logiciel h3 a:hover { color: var(--c-primaire-vif); }
.logiciel__accroche { color: var(--c-doux); }
.logiciel__fonctions { display: grid; gap: 6px; margin-bottom: 16px; }
.logiciel__fonctions li { display: flex; gap: 8px; color: var(--c-encre); font-size: var(--fs-sm); }
.logiciel__fonctions .icone { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--c-vert); }
.logiciel__cible { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--c-doux); font-size: var(--fs-sm); }
.logiciel__cible .icone { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--c-violet); }
.logiciel__corps .logiciel__cible { width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--c-ligne); }
.logiciel__pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px 18px; border-top: 1px solid var(--c-ligne); }
.logiciel__demo { color: var(--c-doux); font-size: var(--fs-sm); font-weight: 600; transition: color var(--duree-rapide); }
.logiciel__demo:hover { color: var(--c-primaire-vif); }

/* ---------- Atouts ---------- */
.atouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.atouts li { padding: 28px 24px; border: 1px solid var(--c-ligne); border-radius: var(--rayon); background: #fff; transition: box-shadow var(--duree-rapide), transform var(--duree-rapide); }
.atouts li:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.atouts__icone { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; background: linear-gradient(135deg, var(--c-violet), var(--c-primaire-vif)); color: #fff; }
.atouts h3 { margin-bottom: 6px; }
.atouts p { margin: 0; color: var(--c-doux); }

@media (prefers-reduced-motion: no-preference) {
    .js .hero--produits .eventail { animation: monter 1s var(--courbe-sortie) .2s both; }
    .js .eventail__badge { animation: flotter 6s ease-in-out 1.4s infinite; }
}

/* =====================================================================
   Page Énergie solaire
   ===================================================================== */
.hero--solaire h1 { max-width: 12em; }
.hero--solaire .ariane { margin-bottom: 20px; }
.hero__accent-solaire { background: linear-gradient(90deg, var(--c-orange), var(--c-jaune)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Scène jour / nuit (état par défaut : plein jour, batterie chargée) ---------- */
.scene { position: relative; overflow: hidden; aspect-ratio: 4 / 3.4; border-radius: 28px; background: #7cc8f2; box-shadow: var(--ombre-forte); }
.scene__svg { display: block; width: 100%; height: 100%; }
.scene__nuit, .scene__ciel-nuit, .scene__fenetres, .scene__flux--nuit { opacity: 0; }
.scene__flux { stroke-dasharray: 6 8; }
.scene__tableau { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.scene__moment, .scene__mesure { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgb(255 255 255 / .94); box-shadow: 0 6px 16px rgb(0 0 0 / .15); color: var(--c-encre); font-size: var(--fs-sm); font-weight: 600; transition: background-color .4s, color .4s; }
.scene__moment .icone, .scene__mesure .icone { width: 16px; height: 16px; color: var(--c-orange); }
.scene__mesure strong { font-variant-numeric: tabular-nums; }
.scene__moment.est-nuit { background: #1a1650; color: #fff; }
.scene__moment.est-nuit .icone { color: #fde68a; }
.scene__mention { position: absolute; top: 12px; right: 14px; padding: 4px 10px; border-radius: 999px; background: rgb(20 18 58 / .55); color: #fff; font-size: var(--fs-xs); }

/* ---------- Avantages ---------- */
.atouts--solaire .atouts__icone { background: linear-gradient(135deg, var(--c-jaune), var(--c-orange)); }

/* ---------- Simulateur d'économies ---------- */
.simulateur { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: stretch; }
.simulateur__formulaire { padding: clamp(28px, 4vw, 40px); border-radius: 24px; background: #fff; box-shadow: var(--ombre); }
.simulateur__champ { margin-top: 26px; }
.simulateur__champ label { display: block; margin-bottom: 10px; color: var(--c-encre); font-weight: 600; }
.simulateur__saisie { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.simulateur__saisie input[type="range"] { width: 100%; accent-color: var(--c-orange); cursor: pointer; }
.simulateur__saisie output { min-width: 9.5em; color: var(--c-encre); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.simulateur__note { display: flex; gap: 10px; margin: 28px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--c-fond-doux); color: var(--c-doux); font-size: var(--fs-sm); }
.simulateur__note .icone { flex-shrink: 0; margin-top: 2px; color: var(--c-orange); }
.simulateur__resultat {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: clamp(28px, 4vw, 44px); border-radius: 24px; color: #fff; box-shadow: var(--ombre-forte);
    background: radial-gradient(circle at 100% 0, rgb(249 200 14 / .5), transparent 55%), linear-gradient(135deg, #f47c20, #c2410c 60%, #7c2d12);
}
.simulateur__libelle { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.simulateur__principal { margin: 6px 0 20px; font-size: 1.25rem; font-weight: 700; }
.simulateur__principal strong { font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.simulateur__principal span { opacity: .8; }
.simulateur__details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin: 0 0 26px; }
.simulateur__details div { padding: 14px 16px; border-radius: 14px; background: rgb(255 255 255 / .15); }
.simulateur__details dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.simulateur__details dd { margin: 2px 0 0; }
.simulateur__details strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* ---------- Onglets du catalogue ---------- */
.onglets__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.onglets__bouton { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1.5px solid var(--c-ligne); border-radius: 999px; background: #fff; color: var(--c-encre); font: 600 .9375rem var(--police); cursor: pointer; transition: background-color var(--duree-rapide), color var(--duree-rapide), border-color var(--duree-rapide); }
.onglets__bouton .icone { color: var(--c-orange); }
.onglets__bouton:hover { border-color: var(--c-orange); }
.onglets__bouton[aria-selected="true"] { border-color: var(--c-primaire); background: var(--c-primaire); color: #fff; }
.onglets__bouton[aria-selected="true"] .icone { color: var(--c-jaune); }
.onglets__resume { margin-bottom: 24px; color: var(--c-doux); text-align: center; }
.onglets__panneau:focus-visible { outline-offset: 8px; }

/* ---------- Processus (version solaire) ---------- */
.methode--solaire { background: radial-gradient(circle at 85% 0, rgb(244 124 32 / .5) 0, transparent 50%), radial-gradient(circle at 0 100%, rgb(249 200 14 / .16), transparent 45%), #1f1640; }
.methode--solaire .methode__icone { color: var(--c-orange); }
.methode--solaire .methode__numero { color: #fde68a; }

@media (prefers-reduced-motion: no-preference) {
    /* Cycle de 12 s : jour (0–45 %), crépuscule, nuit (50–90 %), aube */
    .scene__nuit { animation: scene-nuit 12s linear infinite; }
    .scene__ciel-nuit, .scene__fenetres { animation: scene-lumieres 12s linear infinite; }
    .scene__soleil { transform-box: view-box; transform-origin: 200px 330px; animation: scene-soleil 12s linear infinite; }
    .scene__charge { transform-box: fill-box; transform-origin: bottom; animation: scene-charge 12s linear infinite; }
    .scene__flux--jour { animation: liaison 1.2s linear infinite, scene-jour 12s linear infinite; }
    .scene__flux--nuit { animation: liaison 1.2s linear infinite, scene-flux-nuit 12s linear infinite; }
    .js .hero--solaire .scene { animation: monter 1s var(--courbe-sortie) .2s both; }
    .onglets__panneau:not([hidden]) { animation: carte-entree .4s var(--courbe-sortie); }
}
@keyframes scene-nuit { 0%, 38% { opacity: 0; } 50%, 88% { opacity: .72; } 100% { opacity: 0; } }
@keyframes scene-lumieres { 0%, 44% { opacity: 0; } 54%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes scene-soleil { 0% { transform: rotate(-62deg); opacity: 1; } 46% { transform: rotate(62deg); opacity: 1; } 48%, 98% { transform: rotate(62deg); opacity: 0; } 100% { transform: rotate(-62deg); opacity: 0; } }
@keyframes scene-charge { 0% { transform: scaleY(.3); } 45%, 52% { transform: scaleY(1); } 100% { transform: scaleY(.3); } }
@keyframes scene-jour { 0%, 42% { opacity: 1; } 48%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes scene-flux-nuit { 0%, 48% { opacity: 0; } 54%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* =====================================================================
   Fiche produit
   ===================================================================== */
.fiche-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 72px) clamp(64px, 8vw, 104px); background: radial-gradient(circle at 80% 20%, #3a2a9a 0, transparent 50%), var(--c-encre); color: #c9c8e6; }
.fiche-hero__lueurs i { position: absolute; width: 40vw; max-width: 520px; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .35; pointer-events: none; }
.fiche-hero__lueurs i:first-child { top: -20%; left: -10%; background: var(--c-violet); }
.fiche-hero__lueurs i:last-child { bottom: -35%; right: 5%; background: var(--c-cyan); opacity: .22; }
.fiche-hero__grille { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ariane--clair { color: #a6a8c6; }
.ariane--clair [aria-current] { color: #fff; }
.ariane--clair a:hover { color: #fff; }
.ariane--clair li:not(:last-child)::after { color: #5b5d85; }
.hero__pastille--sombre { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .07); color: #fff; box-shadow: none; }
.fiche-hero h1 { margin-bottom: 18px; color: #fff; font-size: var(--fs-display); letter-spacing: -0.04em; }
.fiche-hero__accroche { max-width: 30em; margin-bottom: 30px; font-size: var(--fs-lead); }
.fiche-hero__publics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.fiche-hero__publics li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgb(255 255 255 / .12); border-radius: 999px; background: rgb(255 255 255 / .05); color: #e4e3f7; font-size: var(--fs-sm); }
.fiche-hero__publics .icone { width: 14px; height: 14px; color: #7ee2a8; }

/* Maquette d'application inclinée en 3D (suit la souris) */
.appli-scene { position: relative; perspective: 1400px; }
.appli { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 50px 100px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .1); transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -12deg)); transform-style: preserve-3d; transition: transform .6s var(--courbe-sortie); }
.appli .fenetre__barre { background: #f3f2f9; border-bottom: 1px solid var(--c-ligne); }
.appli__url { display: inline-flex; flex: 1; align-items: center; gap: 6px; margin-left: 12px !important; padding: 4px 12px; border: 1px solid var(--c-ligne); border-radius: 999px; background: #fff; color: var(--c-doux); font: var(--fs-xs) "JetBrains Mono", ui-monospace, monospace; }
.appli__url .icone { width: 12px; height: 12px; color: var(--c-vert); }
.appli__corps { display: grid; grid-template-columns: 172px 1fr; min-height: 320px; }
.appli__menu { padding: 14px 10px; background: var(--c-encre); color: #b9bad6; }
.appli__marque { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 0 6px; color: #fff; font-size: var(--fs-sm); }
.appli__marque img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.appli__menu li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; overflow: hidden; border-radius: 8px; font-size: var(--fs-xs); white-space: nowrap; text-overflow: ellipsis; }
.appli__menu li .icone { flex-shrink: 0; width: 14px; height: 14px; }
.appli__menu li.est-actif { background: rgb(255 255 255 / .1); color: #fff; }
.appli__contenu { display: grid; align-content: start; gap: 12px; padding: 16px; background: var(--c-fond-doux); }
.appli__entete { display: flex; align-items: center; justify-content: space-between; }
.appli__entete strong { color: var(--c-encre); font-size: var(--fs-sm); }
.appli__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.appli__kpis div { padding: 8px 10px; border-radius: 10px; background: #fff; }
.appli__kpis small { display: block; color: var(--c-doux); font-size: var(--fs-xs); }
.appli__kpis b { display: block; color: var(--c-encre); font-size: 1.05rem; }
.appli__kpis em { color: var(--c-vert); font-size: var(--fs-xs); font-style: normal; font-weight: 700; }
.appli__graphe { padding: 8px; border-radius: 10px; background: #fff; }
.appli__graphe svg { display: block; width: 100%; height: 80px; }
.appli__lignes { display: grid; gap: 6px; }
.appli__lignes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #fff; }
.appli__squelette { display: block; width: var(--l); height: 8px; border-radius: 4px; background: linear-gradient(90deg, #e4e4ef, #f1f0f7); }
.appli__notification { position: absolute; right: -14px; bottom: 30px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: var(--ombre-forte); }
.appli__notification > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e6f6ec; color: var(--c-vert); }
.appli__notification strong { display: block; color: var(--c-encre); font-size: var(--fs-sm); }
.appli__notification small { color: var(--c-doux); font-size: var(--fs-xs); }

/* Fonctionnalités en mosaïque */
.fonctions-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fonctions-bento li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 180px; padding: 24px 22px; border: 1px solid var(--c-ligne); border-radius: 20px; background: #fff; transition: box-shadow var(--duree-rapide), transform var(--duree-rapide); }
.fonctions-bento li:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.fonctions-bento li:first-child { background: var(--c-primaire); border-color: var(--c-primaire); }
.fonctions-bento li:first-child h3 { color: #fff; }
.fonctions-bento li:first-child .fonctions-bento__numero { color: #9ee6ff; }
.fonctions-bento__numero { position: absolute; top: 18px; right: 20px; color: var(--c-doux); font: 600 var(--fs-xs) "JetBrains Mono", ui-monospace, monospace; }
.fonctions-bento__icone { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: auto; border-radius: 14px; background: linear-gradient(135deg, var(--c-violet), var(--c-primaire-vif)); color: #fff; }
.fonctions-bento h3 { margin: 20px 0 0; font-size: 1.125rem; }

@media (prefers-reduced-motion: no-preference) {
    .js .appli-scene { animation: monter 1s var(--courbe-sortie) .2s both; }
    .js .appli .appli__courbe { stroke-dasharray: 1; stroke-dashoffset: 1; }
    .js .appli.est-visible .appli__courbe { animation: dessiner 1.6s ease .4s forwards; }
    .js .appli .appli__aire { opacity: 0; }
    .js .appli.est-visible .appli__aire { animation: fondu .8s ease 1.2s forwards; }
    .js .appli__notification { opacity: 0; transform: translateY(12px) scale(.95); animation: surgir .6s var(--courbe-sortie) 1.8s forwards; }
    .appli__squelette { background-size: 200% 100%; animation: miroiter 2.4s ease-in-out infinite; }
}
@keyframes dessiner { to { stroke-dashoffset: 0; } }
@keyframes miroiter { 50% { background-position: 100% 0; } }

/* =====================================================================
   Page Contact
   ===================================================================== */
.hero--contact h1 { max-width: 11em; }
.hero--contact .ariane { margin-bottom: 20px; }

/* ---------- Contact express ---------- */
.express { padding: 24px; border-radius: 28px; background: radial-gradient(circle at 100% 0, #3d2ca0 0, transparent 55%), var(--c-encre); color: #c9c8e6; box-shadow: var(--ombre-forte); }
.express__titre { margin: 4px 8px 14px; color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.express__liste { display: grid; gap: 8px; }
.express__lien { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgb(255 255 255 / .08); border-radius: 16px; background: rgb(255 255 255 / .04); transition: background-color var(--duree-rapide), border-color var(--duree-rapide), transform var(--duree-rapide) var(--courbe-sortie); }
.express__lien:hover { border-color: rgb(255 255 255 / .2); background: rgb(255 255 255 / .09); transform: translateX(4px); }
.express__icone { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--c-primaire); }
.express__icone--whatsapp { background: #1faa53; color: #fff; }
.express__texte { flex: 1; min-width: 0; }
.express__texte small { display: block; font-size: var(--fs-xs); }
.express__texte strong { display: block; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.express__fleche { color: #8d90b5; transition: transform var(--duree-rapide), color var(--duree-rapide); }
.express__lien:hover .express__fleche { color: #fff; transform: translateX(3px); }
.express__heure { display: flex; align-items: center; gap: 8px; margin: 16px 8px 4px; font-size: var(--fs-sm); }
.express__heure .icone { color: var(--c-cyan); }
.express__heure strong { color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- Formulaire en 3 étapes ---------- */
.assistant-grille { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.assistant-grille__titre { position: sticky; top: calc(var(--entete) + 32px); }
.assistant-grille__titre p:not(.surtitre) { color: var(--c-doux); font-size: var(--fs-lead); }
.assistant-grille__garanties { display: grid; gap: 10px; margin-top: 26px; }
.assistant-grille__garanties li { display: flex; align-items: center; gap: 10px; color: var(--c-encre); font-weight: 600; }
.assistant-grille__garanties .icone { color: var(--c-vert); }

.assistant { padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: #fff; box-shadow: var(--ombre-forte); }
.assistant__entete { margin-bottom: 28px; }
.assistant__etapes { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 14px; color: var(--c-doux); font-size: var(--fs-sm); font-weight: 600; }
.assistant__etapes li { display: flex; align-items: center; gap: 8px; }
.assistant__etapes span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-fond-doux); font-size: var(--fs-xs); font-weight: 800; transition: background-color var(--duree-rapide), color var(--duree-rapide); }
.assistant__etapes .est-actif { color: var(--c-encre); }
.assistant__etapes .est-actif span, .assistant__etapes .est-fait span { background: var(--c-primaire); color: #fff; }
.assistant__progression { height: 6px; overflow: hidden; border-radius: 6px; background: var(--c-fond-doux); }
.assistant__progression span { display: block; width: 33.4%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--c-primaire-vif), var(--c-cyan)); transition: width var(--duree-moyenne) var(--courbe-sortie); }
.assistant__etape { min-width: 0; margin: 0; padding: 0; border: 0; }
.assistant__etape + .assistant__etape { margin-top: 36px; }
.js .assistant__etape + .assistant__etape { margin-top: 0; }
.assistant__etape legend { display: block; margin-bottom: 22px; padding: 0; color: var(--c-encre); font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.015em; }
.assistant__etape legend:focus { outline: none; }
.assistant__etape legend span { display: block; margin-bottom: 4px; color: var(--c-primaire-vif); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.choix-poles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.choix-pole { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--c-ligne); border-radius: 16px; cursor: pointer; transition: border-color var(--duree-rapide), background-color var(--duree-rapide), box-shadow var(--duree-rapide); }
.choix-pole input { position: absolute; opacity: 0; pointer-events: none; }
.choix-pole:hover { border-color: color-mix(in srgb, var(--accent, var(--c-primaire-vif)) 50%, var(--c-ligne)); }
.choix-pole:has(input:checked) { border-color: var(--accent, var(--c-primaire-vif)); background: color-mix(in srgb, var(--accent, var(--c-primaire-vif)) 7%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--c-primaire-vif)) 18%, transparent); }
.choix-pole:has(input:focus-visible) { outline: 3px solid var(--c-cyan); outline-offset: 2px; }
.choix-pole__icone { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--accent, var(--c-primaire-vif)); color: #fff; }
.choix-pole--autre { --accent: var(--c-doux); }
.choix-pole__texte strong { display: block; color: var(--c-encre); font-size: .9375rem; }
.choix-pole__texte small { color: var(--c-doux); font-size: var(--fs-xs); }

.assistant .champ { margin-bottom: 16px; }
.champ__libelle { color: var(--c-encre); font-size: .9rem; font-weight: 600; }
.assistant__ligne { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.assistant__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pastilles-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles-choix label { position: relative; cursor: pointer; }
.pastilles-choix input { position: absolute; opacity: 0; }
.pastilles-choix span { display: inline-block; padding: 9px 14px; border: 1.5px solid var(--c-ligne); border-radius: 999px; color: var(--c-encre); font-size: var(--fs-sm); font-weight: 600; transition: background-color var(--duree-rapide), border-color var(--duree-rapide), color var(--duree-rapide); }
.pastilles-choix input:checked + span { border-color: var(--c-primaire); background: var(--c-primaire); color: #fff; }
.pastilles-choix input:focus-visible + span { outline: 3px solid var(--c-cyan); outline-offset: 2px; }

.assistant__recap { margin: 6px 0 4px; padding: 16px 18px; border-radius: 16px; background: var(--c-fond-doux); }
.assistant__recap > p { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--c-encre); font-weight: 700; }
.assistant__recap > p .icone { color: var(--c-vert); }
.assistant__recap dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.assistant__recap dt { color: var(--c-doux); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.assistant__recap dd { margin: 2px 0 0; color: var(--c-encre); font-size: var(--fs-sm); font-weight: 600; }
.assistant__navigation { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
/* Sans JS : un seul formulaire continu, seul le bouton d'envoi final est utile */
.assistant [data-suivant], .assistant [data-precedent] { display: none; }
.js .assistant [data-suivant], .js .assistant [data-precedent] { display: inline-flex; }

.assistant--merci { display: grid; justify-items: center; text-align: center; padding-block: clamp(40px, 6vw, 64px); }
.assistant--merci p { max-width: 30em; color: var(--c-doux); }
.assistant--merci a:not(.bouton) { color: var(--c-primaire-vif); font-weight: 700; }
.assistant__coche { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 50%; background: var(--c-vert); color: #fff; box-shadow: 0 0 0 10px rgb(31 166 74 / .15); }
.assistant__coche .icone { width: 34px; height: 34px; }

/* ---------- FAQ ---------- */
.faq-grille { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.faq-grille header p:not(.surtitre) { color: var(--c-doux); font-size: var(--fs-lead); }
.lien-souligne { color: var(--c-primaire-vif); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.faq { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--c-ligne); border-radius: 18px; background: #fff; transition: box-shadow var(--duree-rapide); }
.faq__item[open] { box-shadow: var(--ombre); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; color: var(--c-encre); font-weight: 700; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__signe { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--c-fond-doux); }
.faq__signe::before, .faq__signe::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--c-primaire-vif); transition: transform var(--duree-moyenne) var(--courbe-sortie); }
.faq__signe::after { transform: rotate(90deg); }
.faq__item[open] .faq__signe::after { transform: rotate(0deg); }
.faq__item p { margin: 0; padding: 0 22px 20px; color: var(--c-doux); }

@media (prefers-reduced-motion: no-preference) {
    .js .assistant__etape:not([hidden]) { animation: etape-entree .45s var(--courbe-sortie); }
    .assistant__coche { animation: coche .7s cubic-bezier(.34, 1.56, .64, 1) both; }
    .faq__item[open] p { animation: surgir-doux .35s var(--courbe-sortie); }
}
@keyframes etape-entree { from { opacity: 0; transform: translateX(18px); } }
@keyframes coche { from { opacity: 0; transform: scale(.3); } }
@keyframes surgir-doux { from { opacity: 0; transform: translateY(-6px); } }

/* =====================================================================
   Page Mentions légales
   ===================================================================== */
.hero--legal .ariane { margin-bottom: 20px; }
.hero--legal .hero__intro { margin-bottom: 0; }

/* ---------- En bref ---------- */
.en-bref { padding: 28px; border-radius: 28px; background: radial-gradient(circle at 100% 0, #3d2ca0 0, transparent 55%), var(--c-encre); color: #c9c8e6; box-shadow: var(--ombre-forte); }
.en-bref__titre { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.en-bref__titre .icone { color: #7ee2a8; }
.en-bref ul { display: grid; gap: 14px; margin-bottom: 24px; }
.en-bref li { display: flex; align-items: flex-start; gap: 12px; }
.en-bref li > .icone { flex-shrink: 0; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgb(31 170 83 / .25); color: #7ee2a8; }
.en-bref strong { color: #fff; }

/* ---------- Sommaire : section en cours surlignée + progression de lecture ---------- */
.legal__sommaire { background: #fff; box-shadow: var(--ombre); }
.legal__sommaire ol { gap: 4px; list-style: none; }
.legal__sommaire a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--c-texte); transition: background-color var(--duree-rapide), color var(--duree-rapide); }
.legal__sommaire a .icone { flex-shrink: 0; width: 16px; height: 16px; color: var(--c-doux); }
.legal__sommaire a:hover { background: var(--c-fond-doux); }
.legal__sommaire a[aria-current="true"] { background: var(--c-primaire); color: #fff; }
.legal__sommaire a[aria-current="true"] .icone { color: #fff; }
.legal__lecture { height: 4px; margin-top: 16px; overflow: hidden; border-radius: 4px; background: var(--c-fond-doux); }
.legal__lecture span { display: block; width: 0; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c-primaire-vif), var(--c-cyan)); }

/* ---------- Sections en cartes ---------- */
.legal__contenu { display: grid; gap: 20px; }
.legal-section { max-width: none; padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: #fff; box-shadow: var(--ombre); scroll-margin-top: calc(var(--entete) + 24px); }
.legal-section__entete { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.legal-section__icone { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--c-violet), var(--c-primaire-vif)); color: #fff; }
.legal-section__entete h2 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.legal-section__numero { order: 3; margin-left: auto; color: var(--c-doux); font: 600 var(--fs-xs) "JetBrains Mono", ui-monospace, monospace; }
.legal-section > p:last-child { margin-bottom: 0; }

.legal-question { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 4vw, 36px); border-radius: 24px; background: radial-gradient(circle at 100% 0, #3d2ca0 0, transparent 55%), var(--c-primaire); color: #d6d3f5; }
.legal-question h2 { margin: 0 0 4px; color: #fff; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.legal-question p { margin: 0; }
.legal-question__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ---------- Apparition au défilement (activée seulement si JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .js .apparition { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
    .js .apparition.est-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0s !important; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1080px) {
    .fiche-hero__grille { grid-template-columns: 1fr; }
    .appli-scene { max-width: 640px; }
    .fonctions-bento { grid-template-columns: 1fr 1fr; }
    .logiciels, .atouts { grid-template-columns: 1fr 1fr; }
    .portfolio { grid-template-columns: 1fr 1fr; }
    .service__visuel { position: static; }
    .methode__etapes { grid-template-columns: 1fr 1fr; row-gap: 36px; }
    .methode__etapes::before { display: none; }
    .engagements { grid-template-columns: 1fr 1fr; }
    .engagements li:last-child { grid-column: 1 / -1; }
    .studio__grille { grid-template-columns: 1fr; }
    .studio__scene { max-width: 640px; }
    .apercu { right: 0; }
    .service__grille, .fiche { grid-template-columns: 1fr; }
    .service--inverse .service__visuel { order: 0; }
    .service__visuel, .fiche__visuel { max-width: 560px; }
    .fiche__visuel { position: static; }
    .avantages, .poles-compact, .canaux { grid-template-columns: 1fr 1fr; }
    .legal { grid-template-columns: 1fr; }
    .legal__sommaire { position: static; }
    .entete__menu { display: inline-flex; }
    .nav {
        position: fixed; inset: var(--entete) 0 auto 0; z-index: 49;
        flex-direction: column; align-items: stretch; gap: 16px;
        padding: 16px var(--gouttiere) 24px;
        background: #fff; border-bottom: 1px solid var(--c-ligne); box-shadow: 0 24px 48px rgb(20 18 58 / .12);
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity .2s, transform .2s, visibility .2s;
    }
    .nav.est-ouvert { opacity: 1; visibility: visible; transform: none; }
    .nav__liste { flex-direction: column; }
    .nav__liste a { padding: 12px; font-size: 1.05rem; }
    .nav__liste a[aria-current="page"] { background: var(--c-fond-doux); }
    .nav__liste a[aria-current="page"]::after { display: none; }

    .poles { grid-template-columns: 1fr 1fr; }
    .pied__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .en-bref { max-width: 560px; }
    .assistant-grille, .faq-grille { grid-template-columns: 1fr; }
    .assistant-grille__titre { position: static; }
    .express { max-width: 560px; }
    .simulateur { grid-template-columns: 1fr; }
    .scene { max-width: 600px; }
    .phare { grid-template-columns: 1fr; }
    .eventail { width: 100%; max-width: 520px; margin-top: 12px; }
    .une { grid-template-columns: 1fr; }
    .bento { max-width: 560px; }
    .references { grid-template-columns: 1fr 1fr; }
    .mosaique { max-width: 600px; }
    .parcours-grille, .implantations__grille { grid-template-columns: 1fr; }
    .parcours-grille__titre { position: static; }
    .bureaux { grid-template-columns: 1fr; }
    .nouveautes__grille { grid-template-columns: 1fr; }
    .terminal { right: 0; }
    .carte-flottante--bas { left: 0; }
    .catalogue, .equipements { grid-template-columns: 1fr 1fr; }
    .barre-info__liens a:last-child { display: none; }
    .hero__grille, .apropos, .contact__grille { grid-template-columns: 1fr; }
    .hero__visuel { max-width: 560px; }
    .clients__contenu { flex-direction: column; align-items: flex-start; gap: 18px; }
    .clients__liste { justify-content: flex-start; gap: 24px 32px; }
    .projets, .temoignages { grid-template-columns: 1fr 1fr; }
    .chiffres__grille { grid-template-columns: 1fr 1fr; row-gap: 32px; }
    .apropos__visuel { max-width: 420px; }
}

@media (max-width: 640px) {
    .legal-section__entete { flex-wrap: wrap; }
    .choix-poles, .assistant__ligne, .assistant__grille, .assistant__recap dl { grid-template-columns: 1fr; }
    .assistant__etapes li { font-size: 0; gap: 0; }
    .assistant__etapes span { font-size: var(--fs-xs); }
    .appli__corps { grid-template-columns: 1fr; }
    .appli__menu { display: none; }
    .appli__notification { right: 8px; bottom: -16px; }
    .fonctions-bento { grid-template-columns: 1fr; }
    .fonctions-bento li { min-height: 140px; }
    .simulateur__saisie { grid-template-columns: 1fr; gap: 6px; }
    .simulateur__saisie output { text-align: left; }
    .simulateur__details { grid-template-columns: 1fr; }
    .logiciels, .atouts, .phare__fonctions { grid-template-columns: 1fr; }
    .eventail__carte { width: 66%; }
    .eventail__carte:nth-of-type(1), .eventail:hover .eventail__carte:nth-of-type(1) { --dx: -15%; --r: -7deg; }
    .eventail__carte:nth-of-type(2), .eventail:hover .eventail__carte:nth-of-type(2) { --dx: 15%; --r: 7deg; }
    .portfolio { grid-template-columns: 1fr; grid-auto-rows: 300px; }
    .realisation--grande { grid-column: auto; }
    .une__fiche { grid-template-columns: 1fr; }
    .filtres--collants { border-radius: 16px; }
    .bento { grid-template-columns: 1fr 1fr; }
    .prestations, .methode__etapes { grid-template-columns: 1fr; }
    .service__entete { grid-template-columns: 1fr; gap: 0; }
    .service__numero { font-size: 4rem; }
    .manifeste, .engagements { grid-template-columns: 1fr; }
    .engagements li:last-child { grid-column: auto; }
    .mosaique__badge { left: 8px; top: 12px; padding: 10px 14px; }
    .mosaique__badge strong { font-size: 1.5rem; }
    .mosaique__badge--pays { right: 8px; bottom: 12px; left: auto; top: auto; }
    .parcours { padding-left: 32px; }
    .parcours__etape::before { left: -28px; }
    .parcours::before, .parcours::after { left: 7px; }
    .bureau__entete { padding: 22px 20px 0; }
    .bureau__infos { padding: 18px 20px 22px; }
    .nouveaute .liste-check { grid-template-columns: 1fr; }
    .nouveaute__corps { padding: 24px 20px; }
    .chat { left: 16px; }
    .surtitre + .badge-nouveau { margin-left: 0; }
    .stack-groupes__ligne { grid-template-columns: 1fr; gap: 6px; }
    .tech { padding: 8px 14px; font-size: .85rem; }
    .consentement { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px; }
    .consentement__actions .bouton { flex: 1; }
    .consentement__plus { width: 100%; margin: 0 0 4px; }
    .tiers--carte { height: 320px; }
    .terminal { position: relative; right: auto; bottom: auto; width: auto; margin: -40px 8px 0 20px; }
    .carte-flottante--bas { bottom: auto; top: 46%; }
    .studio__scene { padding-bottom: 0; }
    .apercu { position: relative; right: auto; width: auto; margin: -12px 8px 0 20px; }
    .editeur .code, .editeur__numeros { font-size: .75rem; }
    .editeur__onglet:not(.editeur__onglet--actif) { display: none; }
    .catalogue, .equipements, .avantages, .poles-compact, .canaux, .fiche__fonctions { grid-template-columns: 1fr; }
    .legal__infos div { grid-template-columns: 1fr; gap: 2px; }
    .appel__actions .bouton { width: 100%; }
    .appel__preuves { grid-template-columns: 1fr 1fr; }
    .appel__contact { padding: 18px; }
    .appel__bureau { padding: 12px; }
    :root { --gouttiere: 16px; --entete: 66px; }
    .barre-info { display: none; }
    .marque img { width: 38px; height: 38px; }
    .marque__nom { font-size: 1.15rem; }
    .hero__actions .bouton { width: 100%; }
    .hero__visuel { padding: 18px 0 30px 12px; }
    .carte-flottante--haut { right: 0; }
    .carte-flottante--haut strong { font-size: 1.6rem; }
    .poles, .projets, .temoignages { grid-template-columns: 1fr; }
    .formulaire { grid-template-columns: 1fr; }
    .pied__grille { grid-template-columns: 1fr; }
    .whatsapp { padding: 14px; }
    .whatsapp span { display: none; }
    .titre-section--ligne .bouton { width: 100%; }
}

/* =====================================================================
   Contenus dynamiques (base de données) : blog, événements, campagnes, newsletter
   ===================================================================== */

.section--serree { padding-block: clamp(40px, 6vw, 72px); }
.conteneur--etroit { max-width: 820px; }
.vide { max-width: 560px; margin: 0 auto; padding: 48px 24px; text-align: center; }
.vide__icone { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 20px; background: color-mix(in srgb, var(--c-violet) 10%, white); color: var(--c-primaire-vif); }
.vide__icone .icone { width: 28px; height: 28px; }
.vide p { color: var(--c-doux); }
.vide .hero__actions { justify-content: center; margin: 24px 0 0; }
.etiquette--alerte { --accent: var(--c-rose); }

/* ---------- Blog : filtres, cartes, article à la une, pagination ---------- */
.filtre[aria-current="page"] { background: var(--c-primaire); border-color: var(--c-primaire); color: #fff; }
.filtre[aria-current="page"] span { background: rgb(255 255 255 / .18); color: #fff; }
.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.article-carte { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c-ligne); border-radius: var(--rayon); background: #fff; transition: box-shadow var(--duree-rapide), transform var(--duree-rapide); }
.article-carte:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.article-carte__image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-fond-doux); }
.article-carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--courbe-sortie); }
.article-carte:hover .article-carte__image img { transform: scale(1.04); }
.article-carte__motif { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 80% 10%, #3d2ca0 0, transparent 55%), var(--c-primaire); color: #c9c3ff; }
.article-carte__motif .icone { width: 44px; height: 44px; }
.article-carte__corps { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
.article-carte__corps .etiquette { align-self: flex-start; }
.article-carte h3 { margin: 0; font-size: 1.15rem; }
.article-carte h3 a:hover { color: var(--c-primaire-vif); }
.article-carte__corps > p:not(.article-carte__meta) { margin: 0; color: var(--c-doux); font-size: .95rem; }
.article-carte__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: auto 0 0; padding-top: 8px; color: var(--c-doux); font-size: var(--fs-sm); }
.article-carte__meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-carte__meta .icone { width: 15px; height: 15px; }

.article-une { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; margin-bottom: 48px; padding: 16px; border: 1px solid var(--c-ligne); border-radius: 24px; background: #fff; box-shadow: var(--ombre); }
.article-une__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; }
.article-une__image img { width: 100%; height: 100%; object-fit: cover; }
.article-une__corps { padding: 8px 16px 8px 0; }
.article-une__corps .article-carte__meta { margin: 0 0 14px; padding: 0; }
.article-une h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.article-une h2 a:hover { color: var(--c-primaire-vif); }
.article-une p { color: var(--c-doux); }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid var(--c-ligne); border-radius: 12px; font-weight: 700; }
.pagination a:hover { border-color: var(--c-primaire-vif); color: var(--c-primaire-vif); }
.pagination a[aria-current="page"] { background: var(--c-primaire); border-color: var(--c-primaire); color: #fff; }

/* ---------- Lecture d'un article ---------- */
.lecture__entete { padding-block: clamp(40px, 6vw, 72px) 32px; background: linear-gradient(180deg, var(--c-fond-doux), #fff); }
.lecture__entete h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.lecture__chapeau { margin-bottom: 20px; color: var(--c-doux); font-size: var(--fs-lead); }
.lecture__entete .article-carte__meta { padding: 0; }
.lecture__image { max-width: 1040px; margin-bottom: 40px; }
.lecture__image img { width: 100%; max-height: 560px; object-fit: cover; border-radius: 24px; box-shadow: var(--ombre-forte); }
.lecture__contenu { max-width: none; font-size: 1.0625rem; }
.lecture__contenu h2 { margin-top: 1.8em; }
.lecture__contenu h3 { margin-top: 1.5em; }
.lecture__contenu ol { list-style: decimal; padding-left: 22px; margin-bottom: 1em; }
.lecture__contenu li { margin-bottom: .35em; }
.lecture__contenu blockquote { margin: 1.5em 0; padding: 16px 22px; border-left: 4px solid var(--c-primaire-vif); border-radius: 0 12px 12px 0; background: var(--c-fond-doux); color: var(--c-encre); font-size: 1.1rem; }
.lecture__contenu blockquote p { margin: 0; }
.lecture__contenu figure { margin: 2em 0; }
.lecture__contenu figure img { width: 100%; border-radius: 16px; }
.lecture__contenu figcaption { margin-top: 8px; color: var(--c-doux); font-size: var(--fs-sm); text-align: center; }
.lecture__contenu code { padding: 2px 6px; border-radius: 6px; background: var(--c-fond-doux); font: .92em "JetBrains Mono", monospace; }
.lecture__contenu hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--c-ligne); }
.lecture__etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; }
.partage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 32px 0; padding: 18px 0; border-block: 1px solid var(--c-ligne); }
.partage p { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 0 0; font-weight: 700; color: var(--c-encre); }
.partage a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--c-fond-doux); color: var(--c-encre); transition: background-color .2s, color .2s; }
.partage a:hover { background: var(--c-primaire); color: #fff; }

/* ---------- Commentaires ---------- */
.commentaires { padding-bottom: clamp(48px, 7vw, 88px); }
.commentaires > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; }
.commentaire { padding: 18px 20px; margin-bottom: 14px; border-radius: var(--rayon-petit); background: var(--c-fond-doux); }
.commentaire p { margin: 0; }
.commentaire .commentaire__auteur { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.commentaire__auteur strong { color: var(--c-encre); }
.commentaire__auteur time { color: var(--c-doux); font-size: var(--fs-sm); }
.commentaire--reponse { margin: 14px 0 0 24px; border-left: 3px solid var(--c-primaire-vif); background: #fff; }
.formulaire--clair { margin-top: 32px; box-shadow: none; border: 1px solid var(--c-ligne); }
.formulaire--clair h2, .formulaire--clair h3 { margin: 0; font-size: 1.3rem; }
.formulaire__mention { margin: 0; color: var(--c-doux); font-size: var(--fs-sm); }
.formulaire__mention a { color: var(--c-primaire-vif); text-decoration: underline; }
.case { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; cursor: pointer; }
.case input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-primaire-vif); flex-shrink: 0; }

/* ---------- Événements ---------- */
.evenements { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.evenement-carte { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; padding: 24px; border: 1px solid var(--c-ligne); border-radius: var(--rayon); background: #fff; transition: box-shadow var(--duree-rapide), transform var(--duree-rapide); }
.evenement-carte:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.evenement-carte__date { display: grid; place-content: center; width: 76px; height: 84px; border-radius: 16px; background: radial-gradient(circle at 80% 0, #3d2ca0 0, transparent 60%), var(--c-primaire); color: #fff; text-align: center; line-height: 1.1; }
.evenement-carte__date strong { font-size: 1.9rem; font-weight: 800; }
.evenement-carte__date span { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #c9c3ff; }
.evenement-carte--passe .evenement-carte__date { background: var(--c-fond-doux); color: var(--c-doux); }
.evenement-carte--passe .evenement-carte__date span { color: var(--c-doux); }
.evenement-carte__corps h3 { margin: 8px 0; font-size: 1.15rem; }
.evenement-carte__corps h3 a:hover { color: var(--c-primaire-vif); }
.evenement-carte__corps > p:not([class]) { margin: 0 0 10px; color: var(--c-doux); font-size: .95rem; }
.evenement-carte__type { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.evenement-carte__infos { display: grid; gap: 4px; margin: 0; color: var(--c-texte); font-size: var(--fs-sm); }
.evenement-carte__infos span { display: inline-flex; align-items: center; gap: 8px; }
.evenement-carte__infos .icone { width: 15px; height: 15px; color: var(--c-primaire-vif); }
.evenement-carte__lien { grid-column: 1 / -1; margin-top: 12px; }

.evenement-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 80px); background: linear-gradient(180deg, var(--c-fond-doux), #fff); }
.evenement-hero__grille { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.evenement-hero__grille > div:only-child { grid-column: 1 / -1; max-width: 860px; }
.evenement-hero h1 { margin-top: 14px; }
.evenement-hero__infos { display: grid; gap: 14px; margin: 0 0 28px; }
.evenement-hero__infos li { display: flex; align-items: flex-start; gap: 14px; }
.evenement-hero__infos .icone { flex-shrink: 0; width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: var(--ombre); color: var(--c-primaire-vif); }
.evenement-hero__infos strong { color: var(--c-encre); }
.evenement-hero__infos span { color: var(--c-doux); font-size: .95rem; }
.evenement-hero__image { margin: 0; }
.evenement-hero__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: var(--ombre-forte); }
.evenement-corps { display: grid; grid-template-columns: 1fr 400px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.evenement-corps .prose { font-size: 1.0625rem; }
.evenement-inscription { position: sticky; top: calc(var(--entete) + 24px); display: grid; gap: 16px; }
.evenement-inscription .formulaire { margin: 0; }
.formulaire--simple { grid-template-columns: 1fr; }
.evenement-inscription__ferme { padding: 32px; border-radius: var(--rayon); background: var(--c-fond-doux); text-align: center; }

/* ---------- Campagnes ---------- */
.campagne--violet { --campagne: var(--c-primaire-vif); }
.campagne--orange { --campagne: var(--c-orange); }
.campagne--vert   { --campagne: var(--c-vert); }
.campagne--rose   { --campagne: var(--c-rose); }
.campagne--cyan   { --campagne: var(--c-cyan); }
.campagne--bandeau { position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--campagne) 80%, black), var(--campagne)); color: #fff; }
.campagne__contenu { display: flex; align-items: center; gap: 14px; min-height: 52px; padding-block: 8px; }
.campagne__contenu p { flex: 1; margin: 0; font-size: .95rem; }
.campagne__contenu p span { opacity: .9; }
.campagne__icone { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: rgb(255 255 255 / .16); }
.campagne__icone .icone { width: 17px; height: 17px; }
.campagne__vignette { flex-shrink: 0; width: 88px; height: 56px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 2px rgb(255 255 255 / .25), 0 6px 16px rgb(0 0 0 / .25); }
.campagne__bouton { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 7px 16px; border-radius: 999px; background: #fff; color: var(--c-encre); font-weight: 700; font-size: .88rem; transition: transform .2s; }
.campagne__bouton:hover { transform: translateY(-1px); }
.campagne__fermer { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.campagne__fermer:hover { background: rgb(255 255 255 / .16); }
.campagne__fermer .icone { width: 18px; height: 18px; }

.campagne--encart { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 4vw, 40px); margin-bottom: 48px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: radial-gradient(circle at 90% 0, color-mix(in srgb, var(--campagne) 70%, white) 0, transparent 55%), color-mix(in srgb, var(--campagne) 70%, black); color: rgb(255 255 255 / .9); }
.campagne--encart::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--spectre); }
.campagne--encart.campagne--sans-image { grid-template-columns: 1fr; }
.campagne--encart .campagne__image { width: clamp(140px, 22vw, 260px); aspect-ratio: 1; object-fit: cover; border-radius: 20px; }
.campagne--encart .campagne__titre { margin: 0 0 8px; color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.campagne--encart p { max-width: 60ch; }
.campagne--encart .badge-nouveau { background: rgb(255 255 255 / .18); box-shadow: none; }

.campagne--popup { position: fixed; z-index: 60; right: 20px; bottom: 90px; overflow: hidden; width: min(380px, calc(100vw - 32px)); border-radius: 22px; background: #fff; box-shadow: 0 30px 60px rgb(20 18 58 / .3); }
.campagne--popup::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 4px; background: var(--spectre); }
.campagne--popup .campagne__fermer { position: absolute; top: 10px; right: 10px; z-index: 1; background: rgb(255 255 255 / .9); color: var(--c-encre); }
.campagne--popup .campagne__image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.campagne--popup .campagne__corps { padding: 22px 24px 24px; }
.campagne--popup .campagne__titre { margin: 0 0 6px; padding-right: 30px; color: var(--c-encre); font-size: 1.2rem; font-weight: 800; }
.campagne--popup p { color: var(--c-doux); font-size: .95rem; }
@media (prefers-reduced-motion: no-preference) {
    .campagne--popup:not([hidden]) { animation: campagne-entree .5s var(--courbe-sortie); }
    @keyframes campagne-entree { from { opacity: 0; transform: translateY(24px); } }
}

/* ---------- Newsletter (pied de page) ---------- */
.newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-bottom: 8px; padding-block: 28px; border-top: 1px solid rgb(255 255 255 / .08); }
.newsletter__texte { max-width: 460px; }
.newsletter__texte .pied__titre { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.newsletter__texte .icone { color: var(--c-cyan); }
.newsletter__texte p { margin: 0; font-size: .92rem; }
.newsletter__formulaire { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; max-width: 520px; }
.newsletter__formulaire input[type="email"] { flex: 1; min-width: 220px; padding: 12px 18px; border: 1.5px solid rgb(255 255 255 / .14); border-radius: 999px; background: rgb(255 255 255 / .06); color: #fff; font: inherit; }
.newsletter__formulaire input[type="email"]::placeholder { color: #8b8db0; }
.newsletter__formulaire input[type="email"]:focus { outline: none; border-color: var(--c-cyan); background: rgb(255 255 255 / .1); }
.newsletter__formulaire .alerte { flex-basis: 100%; }

@media (max-width: 1080px) {
    .articles { grid-template-columns: 1fr 1fr; }
    .evenement-corps { grid-template-columns: 1fr; }
    .evenement-inscription { position: static; }
}
@media (max-width: 900px) {
    .article-une, .evenement-hero__grille { grid-template-columns: 1fr; }
    .article-une__corps { padding: 0 8px 8px; }
    .campagne--encart { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .articles { grid-template-columns: 1fr; }
    .campagne__contenu { flex-wrap: wrap; }
    .campagne__contenu p { flex-basis: calc(100% - 90px); }
    .campagne__bouton { margin-left: 46px; }
    .campagne__vignette { width: 64px; height: 44px; }
    .campagne__vignette ~ .campagne__bouton { margin-left: 78px; }
    .campagne--popup { right: 16px; bottom: 80px; }
    .commentaire--reponse { margin-left: 8px; }
    .evenement-carte { grid-template-columns: 1fr; }
    .newsletter__formulaire .bouton { width: 100%; }
}

/* Appel à l'action : une colonne sur tablette et mobile */
@media (max-width: 1080px) {
    .appel__boite { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .appel__boite { border-radius: 24px; }
    .appel__preuves { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Assistant en ligne (bulle de discussion, toutes les pages publiques)
   ===================================================================== */
.discussion__lanceur {
    position: fixed; right: 20px; bottom: 84px; z-index: 45;
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px;
    border: 0; border-radius: 999px; cursor: pointer;
    font: 700 1rem var(--police); color: #fff;
    background: linear-gradient(135deg, var(--c-primaire-vif), var(--c-primaire));
    box-shadow: 0 10px 28px rgb(43 31 115 / .4);
    transition: transform var(--duree-rapide), box-shadow var(--duree-rapide);
}
.discussion__lanceur:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgb(43 31 115 / .5); }
.discussion__lanceur .icone { width: 24px; height: 24px; }
.discussion__lanceur .icone--fermer, .discussion.est-ouvert .discussion__lanceur .icone--ouvrir { display: none; }
.discussion.est-ouvert .discussion__lanceur .icone--fermer { display: block; }
.discussion.est-ouvert .discussion__lanceur-texte { display: none; }
.discussion.est-ouvert .discussion__lanceur { padding: 14px; }

.discussion__fenetre {
    position: fixed; right: 20px; bottom: 148px; z-index: 65;
    display: flex; flex-direction: column;
    width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 176px)); min-height: 360px;
    overflow: hidden; background: #fff; border: 1px solid var(--c-ligne); border-radius: 22px;
    box-shadow: 0 30px 60px rgb(20 18 58 / .25);
}
.discussion__fenetre[hidden] { display: none; }

.discussion__entete {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 18px;
    color: #fff; background: linear-gradient(135deg, var(--c-primaire-vif), var(--c-primaire));
}
.discussion__entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--spectre); }
.discussion__entete > div { flex: 1; min-width: 0; }
.discussion__avatar { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: #fff; }
.discussion__titre { margin: 0; font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.discussion__statut { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: var(--fs-xs); color: #d4d0f5; }
.discussion__statut .point-vivant { background: #4ade80; }
.discussion__action { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; color: #fff; background: rgb(255 255 255 / .12); cursor: pointer; transition: background-color var(--duree-rapide); }
.discussion__action:hover { background: rgb(255 255 255 / .24); }
.discussion__action .icone { width: 18px; height: 18px; }

.discussion__fil { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; overflow-y: auto; overscroll-behavior: contain; background: var(--c-fond-doux); }
.discussion__message { max-width: 88%; padding: 11px 15px; border-radius: 16px; font-size: .94rem; line-height: 1.55; overflow-wrap: anywhere; }
.discussion__message p, .discussion__message ul { margin: 0 0 .55em; }
.discussion__message > :last-child { margin-bottom: 0; }
.discussion__message ul { padding-left: 1.1em; list-style: disc; }
.discussion__message li + li { margin-top: .25em; }
.discussion__message a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.discussion__message--bot { align-self: flex-start; color: var(--c-texte); background: #fff; border: 1px solid var(--c-ligne); border-bottom-left-radius: 6px; }
.discussion__message--bot a { color: var(--c-primaire-vif); }
.discussion__message--bot strong { color: var(--c-encre); }
.discussion__message--visiteur { align-self: flex-end; color: #fff; background: var(--c-primaire-vif); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.discussion__message--erreur { border-color: color-mix(in srgb, var(--c-rose) 35%, white); }

.discussion__ecrit { display: inline-flex; gap: 5px; padding: 15px 16px; }
.discussion__ecrit i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-doux); opacity: .35; }

.discussion__suggestions { display: flex; gap: 8px; padding: 10px 14px 0; overflow-x: auto; scrollbar-width: none; background: #fff; }
.discussion__suggestions:empty { display: none; }
.discussion__suggestion { flex-shrink: 0; padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--c-primaire-vif) 30%, white); border-radius: 999px; font: 600 var(--fs-sm) var(--police); color: var(--c-primaire-vif); background: #fff; cursor: pointer; transition: background-color var(--duree-rapide); }
.discussion__suggestion:hover { background: color-mix(in srgb, var(--c-primaire-vif) 8%, white); }

.discussion__saisie { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px 8px; background: #fff; }
.discussion__saisie textarea {
    flex: 1; min-height: 44px; max-height: 120px; padding: 11px 14px; resize: none;
    font: 1rem/1.4 var(--police); color: var(--c-encre);
    border: 1px solid var(--c-ligne); border-radius: 14px; background: var(--c-fond-doux);
}
.discussion__saisie textarea:focus { outline: none; border-color: var(--c-primaire-vif); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primaire-vif) 18%, transparent); }
.discussion__envoyer { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; color: #fff; background: var(--c-primaire-vif); cursor: pointer; transition: background-color var(--duree-rapide), opacity var(--duree-rapide); }
.discussion__envoyer:hover { background: var(--c-primaire); }
.discussion__envoyer:disabled { opacity: .45; cursor: wait; }
.discussion__envoyer .icone { width: 20px; height: 20px; }
.discussion__mention { margin: 0; padding: 0 16px 12px; font-size: var(--fs-xs); line-height: 1.45; color: var(--c-doux); background: #fff; }
.discussion__mention a { color: var(--c-primaire-vif); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
    .discussion__fenetre:not([hidden]) { animation: monter .35s var(--courbe-sortie); transform-origin: bottom right; }
    .discussion__message { animation: monter .3s var(--courbe-sortie); }
    .discussion__ecrit i { animation: discussion-ecrit 1.2s infinite ease-in-out; }
    .discussion__ecrit i:nth-child(2) { animation-delay: .15s; }
    .discussion__ecrit i:nth-child(3) { animation-delay: .3s; }
}
@keyframes discussion-ecrit { 30% { opacity: 1; transform: translateY(-3px); } 60%, 100% { opacity: .35; transform: none; } }

@media (max-width: 640px) {
    .discussion__lanceur { bottom: 82px; padding: 14px; }
    .discussion__lanceur-texte { display: none; }
    /* Plein écran sur mobile : le lanceur et le bouton WhatsApp s'effacent pendant la discussion */
    .discussion__fenetre { inset: 0; width: auto; height: 100dvh; min-height: 0; border: 0; border-radius: 0; z-index: 80; }
    .discussion.est-ouvert .discussion__lanceur { display: none; }
    .discussion.est-ouvert ~ .whatsapp { display: none; }
}
@media print { .discussion { display: none; } }