/* =========================================================================
   Connecti'Cloud — feuille de styles du site
   Thème clair par défaut (:root), thème sombre via [data-theme="dark"].
   ========================================================================= */

/* ---------- Jetons de thème ---------- */
:root {
    --violet: #56378A;
    --magenta: #A9398B;
    --plum: #3D0E4B;
    --grad: linear-gradient(90deg, #56378A 0%, #A9398B 100%);

    --bg: #FFFFFF;
    --bg2: #F7F5FA;
    --card: #FFFFFF;
    --card2: #F7F5FA;
    --ink: #1F1A2B;
    --body: #4A4458;
    --mut: #5E5870;
    --line: #E6E1EE;
    --line2: #ECE8F2;
    --eyebrow: #A9398B;
    --link: #56378A;
    --chip-bg: #EEEAF4;
    --chip-tx: #56378A;
    --band: #1C1325;
    --dots: #DDD5E8;
    --grad-text: linear-gradient(90deg, #56378A 0%, #A9398B 55%, #D0508F 100%);
    --grad-flow: linear-gradient(90deg, #56378A 0%, #A9398B 30%, #E0609E 50%, #A9398B 70%, #56378A 100%);
    --grad-btn: linear-gradient(90deg, #56378A 0%, #6F388B 12.5%, #8A398B 25%, #9D3A8C 37.5%, #AB3D8E 50%, #9D3A8C 62.5%, #8A398B 75%, #6F388B 87.5%, #56378A 100%);
    --ph1: #EEEAF4;
    --ph2: #F3EAF1;
    --ph3: #E9E6EE;
    --ic-bg: #EEEAF4;
    --ic: #56378A;
    --ic2: #A9398B;
    --belt: #2A2036;
    --ring-opacity: .15;
    --switch: #E6E1EE;

    --font-title: 'Quicksand', 'DM Sans', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --container: 1200px;
    --gutter: 24px;
    --radius: 24px;
    --shadow-soft: 0 10px 30px -18px rgba(61, 14, 75, .35);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #120C18;
    --bg2: #1A1222;
    --card: #1A1222;
    --card2: #231A2D;
    --ink: #F3EFF7;
    --body: #C9C1D6;
    --mut: #B3AAC2;
    --line: #33283F;
    --line2: #2C2238;
    --eyebrow: #D98BC4;
    --link: #B9A3E8;
    --chip-bg: #2A2038;
    --chip-tx: #B9A3E8;
    --band: #0B0710;
    --dots: #2A2036;
    --grad-text: linear-gradient(90deg, #B9A3E8 0%, #D98BC4 55%, #F2A7CB 100%);
    --grad-flow: linear-gradient(90deg, #B9A3E8 0%, #D98BC4 30%, #FFC2DE 50%, #D98BC4 70%, #B9A3E8 100%);
    --ph1: #2A2038;
    --ph2: #331E31;
    --ph3: #262033;
    --ic-bg: #2A2038;
    --ic: #B9A3E8;
    --ic2: #D98BC4;
    --belt: #4A3D5A;
    --ring-opacity: .32;
    --switch: #56378A;
}

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

html { scroll-behavior: smooth; }

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

h1, h2, h3 { font-family: var(--font-title); margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--eyebrow); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 6px; }
/* Titre focalisé automatiquement par FocusOnNavigate (accessibilité) : pas de cadre visible. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 100;
    background: var(--violet); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 700;
}
.skip-link:focus { top: 16px; color: #fff; }

/* ---------- Texte en dégradé ---------- */
.grad {
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* Dégradé animé : la teinte « coule » en continu (dégradé symétrique répété → boucle sans à-coup). */
.grad--shimmer {
    background-image: var(--grad-flow);
    background-size: 200% 100%;
    animation: cc-grad-flow 6s linear infinite;
}
@keyframes cc-grad-flow { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

/* ---------- Boutons, liens, étiquettes ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1;
    padding: 14px 22px; border: 2px solid transparent; white-space: nowrap; cursor: pointer;
    font-family: inherit; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 12px 20px; font-size: 15px; }
.btn--lg { padding: 17px 28px; font-size: 17px; }
.btn--primary { background: var(--grad) border-box; border-color: transparent; color: #fff; box-shadow: 0 12px 30px -12px rgba(169, 57, 139, .55); }
/* « border-box » : le dégradé passe aussi sous la bordure transparente (sinon il se répète sur les bords → liseré). */
.btn--primary:hover { color: #fff; }
.btn--outline { background: var(--card); color: var(--link); border-color: var(--link); }
.btn--white { background: #fff; color: var(--plum); }
.btn--white:hover { color: var(--plum); }
.btn--ghost-light { color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); background: transparent; align-self: flex-start; }
.btn--ghost-light:hover { color: #fff; border-color: rgba(255, 255, 255, .7); }

.link-strong { font-weight: 700; color: var(--link); white-space: nowrap; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--link); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
    font-size: 12px; font-weight: 700; color: var(--chip-tx); background: var(--chip-bg);
    padding: 6px 11px; border-radius: 999px; align-self: flex-start;
}
.badge {
    align-self: flex-start; font-size: 12px; font-weight: 700; color: #fff; background: var(--grad);
    padding: 5px 11px; border-radius: 999px;
}

.icon-tile {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: var(--grad); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 26px -12px rgba(169, 57, 139, .6);
}

/* Bordure en dégradé */
.gborder {
    border: 1.5px solid transparent;
    background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box;
}

/* ---------- En-tête ---------- */
/* En-tête fixe (sticky) : reste visible au défilement ; la bande de fond s'efface dès qu'on défile. */
html { scroll-padding-top: 110px; }
.site-header-wrap {
    background: var(--bg2); padding: 20px var(--gutter) 0;
    position: sticky; top: 0; z-index: 50;
    transition: background-color .25s ease, padding .25s ease;
}
.site-header-wrap.is-scrolled { background: transparent; padding-top: 10px; }
/* Effet « glass » : fond translucide, flou + saturation de l'arrière-plan, liseré lumineux. */
.site-header-wrap.is-scrolled .site-header {
    background: color-mix(in srgb, var(--card) 62%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
    border-color: rgba(255, 255, 255, .55);
    box-shadow: 0 10px 34px rgba(31, 21, 48, .16), inset 0 1px 0 rgba(255, 255, 255, .7);
}
[data-theme="dark"] .site-header-wrap.is-scrolled .site-header {
    background: color-mix(in srgb, var(--card) 55%, transparent);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Menu mobile déroulé : quasi opaque (un flou imbriqué dans un parent flouté n'est pas fiable selon les navigateurs). */
@media (max-width: 980px) {
    .site-header-wrap.is-scrolled .site-nav { background: color-mix(in srgb, var(--card) 96%, transparent); }
}
.site-header {
    max-width: var(--container); margin: 0 auto; height: 72px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 0 12px 0 28px; background: var(--card); border: 1px solid var(--line);
    border-radius: 999px; box-shadow: var(--shadow-soft); position: relative;
    transition: box-shadow .25s ease, background-color .25s ease;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand__logo { height: 44px; width: auto; }
.brand__logo--dark { display: none; }
[data-theme="dark"] .brand__logo--light { display: none; }
[data-theme="dark"] .brand__logo--dark { display: block; }

.site-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.site-nav__link { color: var(--ink); font-size: 15px; font-weight: 500; }
.site-nav__link.active { color: var(--eyebrow); }
.site-nav__cta { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 14px; }

.theme-toggle {
    position: relative; width: 56px; height: 30px; flex-shrink: 0; padding: 0;
    border: none; border-radius: 999px; background: var(--switch); cursor: pointer;
}
.theme-toggle__knob {
    position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .2s ease; color: var(--magenta);
}
.theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__knob { left: 29px; color: var(--violet); }
[data-theme="dark"] .theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: block; }

.menu-toggle {
    display: none; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--grad); color: #fff; align-items: center; justify-content: center;
}

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden;
    background-color: var(--bg2);
    background-image: radial-gradient(var(--dots) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
    padding: 48px 0 64px;
    /* Le halo occupe toute la hauteur visible sous l'en-tête (92 px), contenu centré verticalement.
       Plafonné à 1080 px pour les très grands écrans ; svh = hauteur réelle sur mobile (barres du navigateur). */
    --header-h: 92px;
    min-height: min(calc(100vh - var(--header-h)), 1080px);
    min-height: min(calc(100svh - var(--header-h)), 1080px);
    display: flex; flex-direction: column; justify-content: center;
}
.hero > .container { width: 100%; }
.hero__rings .ring { position: absolute; width: 640px; height: 640px; border-radius: 50%; opacity: var(--ring-opacity); pointer-events: none; will-change: transform; }
.ring--magenta { right: -170px; top: -210px; border: 78px solid var(--magenta); }
/* Anneaux séparés sur toutes les pages : magenta en haut à droite, violet en bas à gauche. */
.ring--violet { left: -310px; bottom: -400px; border: 78px solid var(--violet); }
.hero__inner { position: relative; display: flex; gap: 64px; align-items: flex-start; }
.hero__text { flex: 1 1 600px; max-width: 600px; display: flex; flex-direction: column; gap: 26px; }
.pill-badge {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
    font-size: 14px; font-weight: 600; color: var(--body);
}
.pill-badge__tag { background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.hero__title { font-size: 70px; line-height: 1.02; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.hero__title--page { font-size: 56px; }
.hero__lead { font-size: 20px; line-height: 1.55; color: var(--body); }
.hero__lead strong { font-weight: 600; color: var(--ink); }
.nowrap { white-space: nowrap; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.hero__trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; color: var(--body); }
.hero__trust li { display: flex; align-items: center; gap: 8px; }
.hero__trust svg { color: var(--eyebrow); }
.hero__visual { flex: 0 0 auto; padding-top: 12px; }
.hero-anim { width: 560px; }
.hero--page { padding: 96px 0 112px; min-height: 0; }
.hero--page .container { display: flex; flex-direction: column; gap: 24px; max-width: 900px; margin: 0; margin-left: max(0px, calc((100% - var(--container)) / 2 - var(--gutter))); }
/* Bureau : le texte du hero est centré verticalement face à l'animation. */
@media (min-width: 1241px) { .hero__inner { align-items: center; } .hero__visual { padding-top: 0; } }
/* Écrans peu hauts (portables 13") : on resserre pour que tout tienne sans défiler. */
@media (min-width: 1241px) and (max-height: 780px) {
    .hero { padding: 28px 0 36px; }
    .hero__text { gap: 20px; }
    .hero__title { font-size: 60px; }
    .hero-anim { zoom: .88; }
}
@media (min-width: 1241px) and (max-height: 680px) {
    .hero__title { font-size: 52px; }
    .hero__lead { font-size: 18px; }
    .hero-anim { zoom: .78; }
}

/* ---------- Sections ---------- */
.section { padding: 112px 0; background: var(--bg); position: relative; --pad-top: 112px; }
.section--tight-top { padding-top: 72px; --pad-top: 72px; }
.section--alt { background: var(--bg2); }
.section--cta { padding-top: 0; }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; margin-bottom: 44px; }
.section-head__main { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.section-title { font-size: 48px; line-height: 1.1; font-weight: 700; color: var(--ink); }
.section-title--sm { font-size: 40px; }
#expertises .section-title .grad { display: inline-block; } /* la partie en dégradé reste groupée sur sa ligne */
.section-intro { max-width: 400px; font-size: 17px; line-height: 1.6; color: var(--body); }

.chapter { display: inline-flex; align-items: center; gap: 14px; position: relative; }
.chapter__num {
    font-family: var(--font-title); font-size: 15px; font-weight: 700; color: var(--eyebrow);
    padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--eyebrow);
}
.chapter__label { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }

/* Fil rouge : ligne en dégradé dans la marge gauche, un point par chapitre (écrans larges). */
@media (min-width: 1400px) {
    .thread::before {
        content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
        left: calc(50% - var(--container) / 2 - 56px);
        background: linear-gradient(180deg, var(--violet), var(--magenta)); opacity: .5;
    }
    .thread--start::before { top: calc(var(--pad-top) + 16px); }
    .thread--end::before { bottom: auto; height: calc(var(--pad-top) + 16px); }
    .thread .chapter::before {
        content: ""; position: absolute; left: -65px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px;
        border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 6px var(--section-bg, var(--bg));
    }
    .section--alt { --section-bg: var(--bg2); }
    .band { --section-bg: var(--band); }
}

/* ---------- Cartes expertise ---------- */
.xp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; }
.xp-card {
    border-radius: 28px; padding: 26px 26px 36px; display: flex; flex-direction: column; gap: 28px;
    color: var(--ink); transition: transform .2s ease, box-shadow .2s ease;
}
.xp-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(86, 55, 138, .55); }
.xp-card__visual { min-width: 0; }
.xp-visual { width: 100%; }
.xp-card__body { padding: 0 12px; display: flex; flex-direction: column; gap: 18px; }
.xp-card__head { display: flex; align-items: center; gap: 14px; }
.xp-card__head h3 { font-size: 26px; line-height: 1.2; font-weight: 700; }
/* Numéro de l'expertise : pastille bien lisible, dans l'esprit des pastilles de chapitre. */
.xp-card__num {
    margin-left: auto; flex-shrink: 0; font-family: var(--font-title); font-size: 18px; font-weight: 700; line-height: 1;
    color: var(--eyebrow); padding: 8px 14px; border-radius: 999px;
    background: color-mix(in srgb, var(--eyebrow) 12%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--eyebrow) 45%, transparent);
}
.xp-card__body p { font-size: 16px; line-height: 1.65; color: var(--body); }
.xp-card__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xp-card__foot .link-arrow { margin-left: auto; }

/* Animations des visuels */
.cc-flow-dot { animation: cc-flow 2.4s linear infinite; }
@keyframes cc-flow { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.cc-typing span { animation: cc-typing 1.2s ease-in-out infinite; }
.cc-typing span:nth-child(2) { animation-delay: .15s; }
.cc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cc-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.cc-progress { width: 45%; animation: cc-prog 5s ease-in-out infinite alternate; }
@keyframes cc-prog { 0% { width: 35%; } 100% { width: 85%; } }
.cc-wave, .cc-beam { animation: cc-wave 1.6s ease-in-out infinite; }
@keyframes cc-wave { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.cc-led { animation: cc-led 1.1s steps(2, end) infinite; }
@keyframes cc-led { 0% { opacity: 1; } 100% { opacity: .25; } }
.cc-belt-items { animation: cc-belt 3s linear infinite; }
@keyframes cc-belt { 0% { transform: translateX(0); } 100% { transform: translateX(50px); } }
.cc-belt-line { animation: cc-belt-line .6s linear infinite; }
@keyframes cc-belt-line { 0% { stroke-dashoffset: 12; } 100% { stroke-dashoffset: 0; } }
.cc-gear { transform-box: fill-box; transform-origin: center; animation: cc-gear 1.5s linear infinite; }
@keyframes cc-gear { 100% { transform: rotate(360deg); } }

/* ---------- Grilles de cartes ---------- */
.card-grid { display: grid; gap: 28px; }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ph1 { background: var(--ph1); }
.ph2 { background: var(--ph2); }
.ph3 { background: var(--ph3); }

.project-card {
    display: flex; flex-direction: column; border-radius: 24px; overflow: hidden;
    background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: transform .2s ease;
}
.project-card:hover { color: var(--ink); transform: translateY(-3px); }
.project-card__media { height: 210px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--chip-tx); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; }
.project-card__body { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.project-card__body h3 { font-size: 24px; font-weight: 700; }
.project-card__body p { font-size: 15px; line-height: 1.55; color: var(--body); }

.article-card {
    display: flex; gap: 18px; align-items: center; padding: 16px; border-radius: 20px;
    background: var(--card); border: 1px solid var(--line); color: var(--ink);
}
.article-card:hover { color: var(--ink); border-color: var(--link); }
.article-card__thumb { width: 96px; height: 96px; flex-shrink: 0; border-radius: 14px; }
.article-card__body { display: flex; flex-direction: column; gap: 8px; }
.article-card__body h3 { font-size: 17px; line-height: 1.35; font-weight: 700; }

/* ---------- Qui sommes-nous (bande sombre dans les deux thèmes) ---------- */
.band {
    background: var(--band); color: #fff; overflow: hidden;
    --grad-text: linear-gradient(90deg, #B9A3E8 0%, #D98BC4 55%, #F2A7CB 100%);
    --grad-flow: linear-gradient(90deg, #B9A3E8 0%, #D98BC4 30%, #FFC2DE 50%, #D98BC4 70%, #B9A3E8 100%);
    --eyebrow: #D98BC4;
}
.band .section-title { color: #fff; }
.band .chapter__num { color: #D98BC4; border-color: #D98BC4; }
.team { display: flex; gap: 64px; align-items: center; }
.team__text { flex: 0 0 520px; display: flex; flex-direction: column; gap: 24px; }
.team__lead { font-size: 18px; line-height: 1.65; color: #D8D1E3; }
.stats { display: flex; gap: 28px; margin: 0; }
.stats__item { padding-right: 28px; border-right: 1px solid rgba(255, 255, 255, .14); }
.stats__item:last-child { border-right: none; padding-right: 0; }
.stats dt { font-family: var(--font-title); font-size: 44px; line-height: 1; font-weight: 700; }
.stats dd { margin: 4px 0 0; font-size: 13.5px; color: #CFC8DA; }
.team__people { flex: 1; display: flex; gap: 22px; }
.person { flex: 1; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); }
.person__photo {
    position: relative; height: 270px; overflow: hidden;
    background: linear-gradient(160deg, var(--plum), var(--violet) 55%, var(--magenta));
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .75);
}
.person__photo::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border: 30px solid rgba(255, 255, 255, .12); border-radius: 50%; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__body { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.person__body h3 { font-size: 24px; font-weight: 700; color: #fff; }
.person__role { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #D98BC4; }
.person__body p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: #CFC8DA; }

/* ---------- Appel final ---------- */
.cta {
    position: relative; overflow: hidden; border-radius: 36px; padding: 80px 88px;
    background: linear-gradient(120deg, var(--plum) 0%, var(--violet) 45%, var(--magenta) 100%);
    display: flex; align-items: center; justify-content: space-between; gap: 48px;
}
.cta::before, .cta::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.cta::before { right: -90px; top: -170px; width: 420px; height: 420px; border: 60px solid rgba(255, 255, 255, .12); }
.cta::after { right: 180px; bottom: -230px; width: 380px; height: 380px; border: 56px solid rgba(255, 255, 255, .08); }
.cta__text { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 600px; }
.cta__eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F2C6E0; }
.cta h2 { font-size: 52px; line-height: 1.05; font-weight: 700; color: #fff; }
.cta__text p { font-size: 19px; line-height: 1.55; color: #EDE5F5; }
.cta__form {
    position: relative; width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); border-radius: 24px; padding: 22px;
}
.cta__form label { font-size: 14px; font-weight: 700; color: #fff; }
.cta__form input {
    height: 52px; border-radius: 14px; border: none; padding: 0 16px;
    font-size: 15px; font-family: inherit; color: var(--ink); background: #fff;
}
[data-theme="dark"] .cta__form input { color: #1F1A2B; }
.cta__form .btn { height: 52px; width: 100%; }
.cta__form a { text-align: center; font-size: 14px; font-weight: 600; color: #F2C6E0; text-decoration: underline; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--band); color: #CFC8DA; padding: 72px 0 40px; font-size: 15px; }
.site-footer a { color: #CFC8DA; }
.site-footer a:hover { color: #fff; }
.site-footer__top { display: flex; justify-content: space-between; gap: 48px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 20px; width: 340px; }
.site-footer__brand img { height: 54px; width: auto; align-self: flex-start; object-fit: contain; }
.site-footer__brand address { font-style: normal; line-height: 1.6; }
.site-footer__cols { display: flex; gap: 72px; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col h2 { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.site-footer__bottom {
    margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px;
    display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: #A79FB5;
}
.site-footer__bottom a { color: #A79FB5; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 24px; }

/* =========================================================================
   Adaptation aux écrans
   ========================================================================= */
@media (max-width: 1240px) {
    .site-nav { gap: 18px; }
    .hero__inner { flex-direction: column; gap: 40px; }
    .hero__text { max-width: 720px; flex: none; } /* en colonne, la base de 600 px deviendrait une hauteur */
    .hero__visual { align-self: center; }
    .team { flex-direction: column; align-items: stretch; }
    .team__text { flex: none; }
    .cta { flex-direction: column; align-items: stretch; padding: 56px; }
    .cta__form { width: 100%; }
}

@media (max-width: 1100px) {
    .xp-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .card-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .article-card__thumb { width: 76px; height: 76px; }
}

/* Navigation repliée */
@media (max-width: 980px) {
    .site-header { height: 62px; padding: 0 8px 0 20px; }
    .brand__logo { height: 36px; }
    .site-header__cta { display: none; }
    .menu-toggle { display: inline-flex; }
    .site-nav {
        display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px);
        flex-direction: column; align-items: stretch; gap: 4px; padding: 14px;
        background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft);
    }
    .site-header.is-open .site-nav { display: flex; }
    .site-nav__link { padding: 12px 14px; border-radius: 14px; font-size: 16px; }
    .site-nav__link:hover { background: var(--bg2); }
    .site-nav__cta { display: inline-flex; margin-top: 6px; }
}

@media (max-width: 760px) {
    :root { --gutter: 20px; }
    .site-header-wrap { padding-top: 14px; }
    .hero { --header-h: 76px; }
    .site-header-wrap.is-scrolled { padding-top: 8px; }
    html { scroll-padding-top: 90px; }
    .hero { padding: 32px 0 44px; background-size: 22px 22px; }
    .ring--violet { display: none; }
    .ring--magenta { width: 300px; height: 300px; right: -150px; top: 60px; border-width: 40px; }
    .hero__text { gap: 22px; }
    .hero__title { font-size: 42px; }
    .hero__title--page { font-size: 38px; }
    .hero__lead { font-size: 17px; }
    .hero__actions { flex-direction: column; gap: 10px; }
    .hero__actions .btn { width: 100%; }
    .hero__trust { font-size: 14px; gap: 8px 18px; margin-top: 4px; }
    .hero__visual { align-self: stretch; padding-top: 0; }
    .hero-anim { zoom: .62; }

    .section { padding: 52px 0 56px; --pad-top: 52px; }
    .section--tight-top { padding-top: 52px; }
    .section--cta { padding-top: 8px; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
    .section-title { font-size: 32px; line-height: 1.12; }
    .section-title--sm { font-size: 30px; }
    .section-intro { font-size: 16px; }

    .xp-card { padding: 14px 14px 22px; gap: 16px; border-radius: 24px; }
    .xp-visual { width: 544px; zoom: .58; }
    .xp-card__body { padding: 0 6px; gap: 12px; }
    .xp-card__head h3 { font-size: 21px; }
    .xp-card__num { font-size: 15px; padding: 6px 11px; }
    .icon-tile { width: 42px; height: 42px; border-radius: 13px; }
    .xp-card__body p { font-size: 15px; }
    .xp-card__foot .link-arrow { margin-left: 0; width: 100%; margin-top: 4px; }

    .project-card__media { height: 170px; }
    .project-card__body { padding: 20px; }
    .project-card__body h3 { font-size: 21px; }

    .team { gap: 28px; }
    .team__lead { font-size: 16px; }
    .team__people { gap: 12px; }
    .person { border-radius: 20px; }
    .person__photo { height: 150px; font-size: 11px; text-align: center; padding: 0 8px; }
    .person__body { padding: 14px; }
    .person__body h3 { font-size: 19px; }
    .person__role { font-size: 10.5px; }
    .person__body p { font-size: 13px; }
    .stats { gap: 10px; }
    .stats__item { flex: 1; padding-right: 0; border-right: none; }
    .stats dt { font-size: 30px; }
    .stats dd { font-size: 12px; }
    .btn--ghost-light { align-self: stretch; }

    .cta { border-radius: 28px; padding: 32px 22px; gap: 20px; }
    .cta h2 { font-size: 32px; line-height: 1.08; }
    .cta__text p { font-size: 15.5px; }
    .cta__form { background: transparent; border: none; padding: 0; }

    .site-footer { padding: 44px 0 32px; }
    .site-footer__top { flex-direction: column; gap: 30px; }
    .site-footer__brand { width: auto; gap: 14px; }
    .site-footer__brand img { height: 44px; }
    .site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .site-footer__bottom { flex-direction: column; margin-top: 30px; font-size: 13px; }
    .site-footer__legal { gap: 16px; }
}

@media (max-width: 400px) {
    .hero-anim { zoom: .56; }
    .xp-visual { zoom: .52; }
    .hero__title { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .grad--shimmer, .cc-flow-dot, .cc-typing span, .cc-progress, .cc-wave, .cc-beam, .cc-led,
    .cc-belt-items, .cc-belt-line, .cc-gear { animation: none; }
    .cc-progress { width: 70%; }
    .btn, .xp-card, .project-card { transition: none; }
}

/* ---------- Bouton « Haut de page » ---------- */
.back-to-top {
    position: fixed; right: 28px; bottom: 28px; z-index: 60;
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, var(--violet), var(--magenta));
    box-shadow: 0 10px 28px rgba(86, 55, 138, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s, box-shadow .25s ease;
}
.back-to-top.is-visible {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s, box-shadow .25s ease;
}
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(169, 57, 139, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.back-to-top svg { transition: transform .25s ease; }
.back-to-top:hover svg { transform: translateY(-2px); }
.back-to-top:focus-visible { outline-offset: 4px; border-radius: 50%; }
@media (max-width: 760px) { .back-to-top { right: 18px; bottom: 18px; width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .back-to-top, .back-to-top svg { transition: none; } }

/* =========================================================================
   Finitions et effets
   Tous désactivés si l'utilisateur limite les animations (prefers-reduced-motion).
   ========================================================================= */

/* Typographie : coupures de lignes équilibrées, sélection aux couleurs de la charte. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(169, 57, 139, .22); color: inherit; }

/* Bascule de thème en fondu (classe posée ~0,4 s par site.js pendant le changement). */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease, box-shadow .4s ease !important;
}

/* --- Navigation : soulignement en dégradé au survol / page active --- */
@media (min-width: 981px) {
    .site-nav__link { position: relative; padding: 6px 0; transition: color .2s ease; }
    .site-nav__link::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
        background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    }
    .site-nav__link:hover { color: var(--link); }
    .site-nav__link:hover::after, .site-nav__link.active::after { transform: scaleX(1); }
}

/* --- Boutons : reflet lumineux qui balaie le bouton au survol --- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s ease;
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 16px 34px -12px rgba(169, 57, 139, .7); }
.btn--outline { transition: transform .15s ease, background-color .2s ease, color .2s ease; }
.btn--outline:hover { background: var(--link); color: #fff; }
[data-theme="dark"] .btn--outline:hover { color: #1A1222; }
.btn svg, .link-arrow svg { transition: transform .25s ease; }
.btn:hover svg, a:hover .link-arrow svg { transform: translateX(4px); }

/* --- Hero : apparition échelonnée au chargement (CSS pur) et anneaux qui flottent --- */
@keyframes cc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero__text > *, .hero__visual { animation: cc-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.hero__text > :nth-child(1) { animation-delay: .05s; }
.hero__text > :nth-child(2) { animation-delay: .15s; }
.hero__text > :nth-child(3) { animation-delay: .25s; }
.hero__text > :nth-child(4) { animation-delay: .35s; }
.hero__text > :nth-child(5) { animation-delay: .45s; }
.hero__visual { animation-delay: .3s; animation-duration: 1s; }
@keyframes cc-float-a { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-38px, 30px) scale(1.05); } 66% { transform: translate(-12px, 52px) scale(.97); } }
@keyframes cc-float-b { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(36px, -26px) scale(1.06); } 66% { transform: translate(54px, 8px) scale(.98); } }
.ring--magenta { animation: cc-float-a 18s ease-in-out infinite; }
.ring--violet { animation: cc-float-b 22s ease-in-out infinite; }
/* Halo lumineux discret derrière l'animation */
.hero__visual { position: relative; isolation: isolate; }
.hero__visual::before {
    content: ""; position: absolute; inset: 10% 5% 5%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(169, 57, 139, .18), transparent); filter: blur(30px);
}

/* --- Apparition des blocs au défilement (site.js ajoute .reveal-ready sur <html>, puis .is-in) --- */
.reveal-ready [data-reveal] {
    opacity: 0; transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
/* Une fois apparu, site.js retire data-reveal : chaque bloc retrouve ses transitions de survol. */

/* Fil rouge : le point du chapitre s'illumine quand la section apparaît. */
@keyframes cc-dot-pulse { 0% { box-shadow: 0 0 0 6px var(--section-bg, var(--bg)), 0 0 0 6px rgba(169, 57, 139, .5); } 100% { box-shadow: 0 0 0 6px var(--section-bg, var(--bg)), 0 0 0 22px rgba(169, 57, 139, 0); } }
@media (min-width: 1400px) {
    .thread .is-in .chapter::before { animation: cc-dot-pulse 1.4s ease-out .3s 2; }
}

/* --- Cartes expertise : halo lumineux qui suit le curseur + visuel qui s'anime légèrement --- */
.xp-card { position: relative; isolation: isolate; }
.xp-card__visual { border-radius: 18px; overflow: hidden; }
.xp-card__visual .xp-visual { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.xp-card:hover .xp-card__visual .xp-visual { transform: scale(1.02); }
.xp-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -32px rgba(86, 55, 138, .6); }
[data-theme="dark"] .xp-card:hover { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8), 0 0 0 1px rgba(217, 139, 196, .25); }
.icon-tile { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.xp-card:hover .icon-tile { transform: rotate(-6deg) scale(1.06); }
@media (hover: hover) {
    .xp-card::before {
        content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
        background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(169, 57, 139, .10), transparent 60%);
        opacity: 0; transition: opacity .3s ease;
    }
    [data-theme="dark"] .xp-card::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 139, 196, .14), transparent 60%); }
    .xp-card:hover::before { opacity: 1; }
}

/* --- Cartes réalisations : visuel d'attente soigné, zoom doux au survol --- */
.project-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.project-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--link) 35%, var(--line)); box-shadow: 0 26px 50px -30px rgba(86, 55, 138, .55); }
.project-card__media { position: relative; overflow: hidden; }
.project-card__media img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__placeholder {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background-image: radial-gradient(color-mix(in srgb, var(--chip-tx) 22%, transparent) 1.2px, transparent 1.2px);
    background-size: 18px 18px; transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.project-card__placeholder::before, .project-card__placeholder::after {
    content: ""; position: absolute; border-radius: 50%; border: 26px solid var(--magenta); opacity: .08;
}
.project-card__placeholder::before { width: 220px; height: 220px; right: -70px; top: -90px; }
.project-card__placeholder::after { width: 160px; height: 160px; left: -60px; bottom: -80px; border-color: var(--violet); }
[data-theme="dark"] .project-card__placeholder::before, [data-theme="dark"] .project-card__placeholder::after { opacity: .2; }
.project-card__icon {
    position: relative; width: 72px; height: 72px; border-radius: 22px; background: var(--grad); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 18px 36px -14px rgba(169, 57, 139, .65); transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.project-card:hover .project-card__placeholder { transform: scale(1.05); }
.project-card:hover .project-card__icon { transform: translateY(-4px) rotate(-5deg); }
.project-card .link-arrow { transition: gap .25s ease; }
.project-card:hover .link-arrow { gap: 12px; }

/* --- Articles : vignette illustrée, léger soulèvement --- */
.article-card { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.article-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(86, 55, 138, .5); }
.article-card__thumb { display: flex; align-items: center; justify-content: center; color: var(--chip-tx); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.article-card:hover .article-card__thumb { transform: scale(1.06) rotate(-3deg); }

/* --- Bande équipe : lueur d'ambiance --- */
.band::after {
    content: ""; position: absolute; width: 700px; height: 700px; right: -220px; top: -260px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(169, 57, 139, .22), transparent);
}
.band > .container { position: relative; z-index: 1; }
.person { transition: transform .3s ease, border-color .3s ease; }
.person:hover { transform: translateY(-4px); border-color: rgba(217, 139, 196, .4); }
.stats dt { font-variant-numeric: tabular-nums; }
.person__initial {
    position: relative; z-index: 1; font-family: var(--font-title); font-size: 96px; font-weight: 700; line-height: 1;
    color: rgba(255, 255, 255, .9); text-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.person__photo img, .person__initial { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.person:hover .person__photo img, .person:hover .person__initial { transform: scale(1.06); }
@media (max-width: 760px) { .person__initial { font-size: 60px; } }

/* Pastille du hero : l'étiquette ne se coupe jamais en deux lignes. */
.pill-badge, .pill-badge__tag { white-space: nowrap; }
@media (max-width: 400px) {
    .pill-badge { font-size: 12.5px; gap: 8px; padding-right: 12px; }
    .pill-badge__tag { font-size: 11px; padding: 4px 8px; }
}

/* --- Appel final : dégradé qui ondule lentement, anneaux qui tournent --- */
@keyframes cc-cta-grad { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.cta { background-size: 180% 180%; animation: cc-cta-grad 12s ease-in-out infinite alternate; }
@keyframes cc-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-24px, 18px); } }
.cta::before { animation: cc-drift 16s ease-in-out infinite; }
.cta::after { animation: cc-drift 20s ease-in-out infinite reverse; }
.cta__form input { transition: box-shadow .2s ease; }
.cta__form input:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }

/* --- Pied de page : liens qui glissent légèrement --- */
.site-footer__col a { transition: color .2s ease, transform .2s ease; }
.site-footer__col a:hover { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .hero__text > *, .hero__visual, .ring--magenta, .ring--violet, .cta, .cta::before, .cta::after,
    .thread .is-in .chapter::before { animation: none !important; }
    .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
    .btn--primary::after { display: none; }
    .xp-card, .project-card, .article-card, .person, .icon-tile, .project-card__placeholder, .project-card__icon,
    .xp-card__visual .xp-visual, .article-card__thumb { transition: none !important; }
}

/* ---------- En-tête sur petits écrans : tout reste dans le cadre ---------- */
@media (max-width: 980px) {
    .site-header { gap: 12px; }
    .brand { flex-shrink: 1; min-width: 0; }
    .brand__logo { max-width: 100%; object-fit: contain; object-position: left center; }
    .menu-toggle, .theme-toggle { flex-shrink: 0; }
}
@media (max-width: 420px) {
    .site-header { padding: 0 7px 0 16px; gap: 10px; }
    .site-header__actions { gap: 10px; }
    .brand__logo { height: 30px; }
}
@media (max-width: 350px) {
    .site-header { padding-left: 12px; }
    .brand__logo { height: 26px; }
    .theme-toggle { width: 50px; }
    [data-theme="dark"] .theme-toggle__knob { left: 23px; }
    .menu-toggle { width: 40px; height: 40px; }
    /* Illustrations à largeur fixe : on réduit encore pour tenir dans 320 px. */
    .hero-anim { zoom: .5; }
    .xp-visual { zoom: .45; }
}

/* ---------- Boutons en dégradé animé (même mouvement que les titres) ---------- */
.btn--primary, .menu-toggle, .back-to-top {
    background: var(--grad-btn) border-box;
    /* Dégradé étiré sur 3 largeurs : le bouton n'en montre qu'un tiers → transitions très douces. */
    background-size: 300% 100%;
    animation: cc-grad-flow-btn 7s linear infinite;
}
@keyframes cc-grad-flow-btn { from { background-position: 0% 50%; } to { background-position: 150% 50%; } }
.btn--primary { text-shadow: 0 1px 2px rgba(61, 14, 75, .35); } /* lisibilité quand la bande claire passe */
@media (prefers-reduced-motion: reduce) {
    .btn--primary, .menu-toggle, .back-to-top { animation: none; }
}

/* >>> Visuel logiciel (généré) */
/* ---------- Visuel « Logiciel sur-mesure » : construction brique par brique (cycle 12 s) ---------- */
.sw {
    position: relative; height: 236px; border-radius: 20px; padding: 14px 20px; box-sizing: border-box; overflow: hidden;
    background-color: var(--card2); background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 18px 18px;
    border: 1px solid var(--line);
}
.sw-window {
    height: 100%; border-radius: 12px; background: var(--card); border: 1px solid var(--line); overflow: hidden;
    display: flex; flex-direction: column; box-shadow: 0 14px 30px -18px rgba(61, 14, 75, .45);
}
.sw-chrome { flex-shrink: 0; background: #DFE3EA; }
[data-theme="dark"] .sw-chrome { background: #2B2533; }
.sw-tabs { height: 26px; display: flex; align-items: flex-end; gap: 8px; padding: 0 12px 0 14px; }
.sw-tab {
    position: relative; width: 168px; height: 21px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 9px; box-sizing: border-box;
    background: var(--card); border-radius: 8px 8px 0 0; color: var(--mut); font-size: 9.5px; font-weight: 600;
}
.sw-tab::before, .sw-tab::after { content: ""; position: absolute; bottom: 0; width: 8px; height: 8px; }
.sw-tab::before { left: -8px; background: radial-gradient(circle at 0 0, transparent 8px, var(--card) 8.5px); }
.sw-tab::after { right: -8px; background: radial-gradient(circle at 100% 0, transparent 8px, var(--card) 8.5px); }
.sw-tab img { width: 12px; height: 12px; }
.sw-tab span { flex: 1; white-space: nowrap; color: var(--ink); }
.sw-newtab { align-self: center; color: var(--mut); margin-top: 3px; margin-left: 2px; }
.sw-win { margin-left: auto; align-self: center; display: flex; gap: 14px; color: var(--mut); margin-top: 2px; }
.sw-bar-top { height: 28px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: var(--card); border-bottom: 1px solid var(--line); }
.sw-nav { display: flex; gap: 8px; color: var(--mut); }
.sw-omni {
    flex: 1; height: 19px; display: flex; align-items: center; gap: 5px; padding: 0 3px 0 10px; border-radius: 999px;
    background: var(--card2); font-size: 9.5px; font-weight: 500; color: var(--ink);
}
.sw-menu { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.sw-menu i { width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--mut); }
.sw-status { position: relative; margin-left: auto; width: 100px; height: 13px; font-size: 8.5px; font-weight: 700; }
.sw-status > span { position: absolute; right: 0; top: 0; height: 13px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sw-status__build { color: var(--mut); padding-right: 5px; animation: sw-build 12s linear infinite both; }
.sw-caret { animation: sw-caret 1s ease-in-out infinite; }
.sw-status__done { color: #fff; background: #2E9E6B; padding: 0 7px 0 5px; height: 15px !important; top: -1px !important; border-radius: 999px; animation: sw-badge 12s ease-in-out infinite both; }
.sw-body { flex-grow: 1; display: flex; min-height: 0; }
.sw-main { flex-grow: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sw-kpis { display: flex; gap: 6px; height: 42px; flex-shrink: 0; }
.sw-lower { flex-grow: 1; display: flex; gap: 10px; min-height: 0; }
.sw-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }

/* Emplacement en pointillés (la « brique » à poser) */
.sw-slot { position: relative; border-radius: 8px; }
.sw-slot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px dashed color-mix(in srgb, var(--mut) 35%, transparent); }
.sw-slot--side { width: 70px; flex-shrink: 0; border-radius: 0; }
.sw-slot--side::before { inset: 4px; border-radius: 6px; }
.sw-slot--kpi { flex: 1; }
.sw-slot--chart { flex: 1.3; }
.sw-slot--row { height: 16px; border-radius: 5px; }

/* Brique posée : recouvre son emplacement */
.sw-brick {
    position: absolute; inset: 0; border-radius: inherit;
    animation-duration: 12s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-iteration-count: infinite; animation-fill-mode: both;
}
.sw-side { background: #3D0E4B; padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; }
.sw-side span { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.sw-side .sw-side__active { height: 7px; border-radius: 4px; background: #A9398B; }
.sw-kpi { background: var(--card); border: 1px solid var(--line); padding: 6px 8px; box-shadow: 0 6px 14px -10px rgba(61, 14, 75, .5); }
.sw-kpi__label { font-size: 9px; font-weight: 700; color: var(--mut); }
.sw-kpi__value { font-family: var(--font-title); font-size: 15px; font-weight: 700; line-height: 1.2; }
.sw-chart { background: var(--card); border: 1px solid var(--line); padding: 8px; display: flex; align-items: flex-end; justify-content: space-between; box-shadow: 0 6px 14px -10px rgba(61, 14, 75, .5); }
.sw-bar {
    width: 16px; border-radius: 4px 4px 1px 1px;
    animation-duration: 12s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-iteration-count: infinite; animation-fill-mode: both;
}
.sw-row { display: flex; align-items: center; gap: 6px; padding: 0 4px; background: var(--card); border-bottom: 1px solid var(--line); border-radius: 0; }
.sw-row__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sw-row__line { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.sw-row__chip { width: 26px; height: 5px; border-radius: 3px; background: var(--chip-bg); }

@keyframes sw-b1 { 0%, 8% { opacity: 0; transform: translateY(-12px) scale(.96); } 10.5% { opacity: 1; transform: translateY(1px); } 11.5%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes sw-b2 { 0%, 15% { opacity: 0; transform: translateY(-12px) scale(.96); } 17.5% { opacity: 1; transform: translateY(1px); } 18.5%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes sw-b3 { 0%, 19% { opacity: 0; transform: translateY(-12px) scale(.96); } 21.5% { opacity: 1; transform: translateY(1px); } 22.5%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes sw-b4 { 0%, 23% { opacity: 0; transform: translateY(-12px) scale(.96); } 25.5% { opacity: 1; transform: translateY(1px); } 26.5%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes sw-b5 { 0%, 30% { opacity: 0; transform: translateY(-12px) scale(.96); } 32.5% { opacity: 1; transform: translateY(1px); } 33.5%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes sw-bar1 { 0%, 35.0% { height: 0; } 39.0%, 100% { height: 40%; } }
@keyframes sw-bar2 { 0%, 36.8% { height: 0; } 40.8%, 100% { height: 64%; } }
@keyframes sw-bar3 { 0%, 38.6% { height: 0; } 42.6%, 100% { height: 52%; } }
@keyframes sw-bar4 { 0%, 40.4% { height: 0; } 44.4%, 100% { height: 80%; } }
@keyframes sw-bar5 { 0%, 42.2% { height: 0; } 46.2%, 100% { height: 70%; } }
@keyframes sw-bar6 { 0%, 44.0% { height: 0; } 48.0%, 100% { height: 92%; } }
@keyframes sw-bar7 { 0%, 45.8% { height: 0; } 49.8%, 100% { height: 76%; } }
@keyframes sw-bar8 { 0%, 47.6% { height: 0; } 51.6%, 100% { height: 58%; } }
@keyframes sw-b6 { 0%, 52% { opacity: 0; transform: translateY(-12px) scale(.96); } 54.5% { opacity: 1; transform: translateY(1px); } 55.5%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes sw-b7 { 0%, 55% { opacity: 0; transform: translateY(-12px) scale(.96); } 57.5% { opacity: 1; transform: translateY(1px); } 58.5%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes sw-b8 { 0%, 58% { opacity: 0; transform: translateY(-12px) scale(.96); } 60.5% { opacity: 1; transform: translateY(1px); } 61.5%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes sw-b9 { 0%, 61% { opacity: 0; transform: translateY(-12px) scale(.96); } 63.5% { opacity: 1; transform: translateY(1px); } 64.5%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes sw-badge { 0%, 66% { opacity: 0; transform: scale(.6); } 68.5% { opacity: 1; transform: scale(1.08); } 70%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes sw-build { 0%, 6% { opacity: 1; } 64% { opacity: 1; } 66%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes sw-caret { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
    .sw *, .sw *::before { animation: none !important; }
    .sw-status__build { opacity: 0; }
}
/* <<< Visuel logiciel */

/* >>> Visuel IA (généré) */
/* ---------- Visuel « Intelligence artificielle » : conversation animée (cycle 16 s) ---------- */
.ai {
    position: relative; height: 236px; border-radius: 20px; padding: 20px; box-sizing: border-box; overflow: hidden;
    background-color: var(--card2); background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 18px 18px;
    border: 1px solid var(--line); display: flex; gap: 14px;
}
.ai-panel {
    width: 140px; flex-shrink: 0; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
    padding: 12px 10px; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px;
}
.ai-panel__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ai-panel__logo {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(90deg, #56378A, #A9398B);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -6px rgba(169, 57, 139, .7);
}
.ai-panel__name { display: flex; flex-direction: column; font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.ai-online { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; color: #2E9E6B; }
.ai-online::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2E9E6B; animation: cc-wave 1.6s ease-in-out infinite; }
.ai-panel__eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--eyebrow); }
.ai-cap {
    display: flex; align-items: center; gap: 6px; padding: 3px 4px; margin: 0 -4px; border-radius: 6px;
    font-size: 10.5px; color: var(--body);
    animation-duration: 16s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both;
}
.ai-cap__ic {
    width: 14px; height: 14px; flex-shrink: 0; border-radius: 4px; background: var(--chip-bg); color: var(--chip-tx);
    display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700;
    animation-duration: 16s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both;
}
.ai-chat { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ai-slot { position: relative; display: flex; flex-direction: column; }
.ai-msg {
    max-width: 92%; padding: 6px 10px; font-size: 11px; line-height: 1.38;
    animation-duration: 16s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-iteration-count: infinite; animation-fill-mode: both;
}
.ai-msg--user { align-self: flex-end; max-width: 88%; background: #56378A; color: #fff; border-radius: 12px 12px 3px 12px; transform-origin: right bottom; }
.ai-msg--bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 12px 12px 12px 3px; transform-origin: left bottom; }
.ai-msg--typing { position: absolute; left: 0; top: 0; padding: 8px 10px; }
.ai-typing { display: flex; gap: 3px; }
.ai-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--mut); animation: cc-typing 1.2s ease-in-out infinite; }
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
.ai-actions { display: flex; gap: 6px; animation: ai-btns 16s ease-in-out infinite both; }
.ai-btn { position: relative; font-size: 10.5px; font-weight: 700; color: var(--chip-tx); background: var(--chip-bg); padding: 5px 10px; border-radius: 999px; }
.ai-btn--primary { color: #fff; background: linear-gradient(90deg, #56378A, #A9398B); animation: ai-press 16s ease-in-out infinite both; }
.ai-cursor { position: absolute; right: 8px; bottom: -9px; animation: ai-cursor 16s ease-in-out infinite both; }
.ai-done {
    position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; color: #fff; background: #2E9E6B; padding: 5px 10px; border-radius: 999px;
    animation-duration: 16s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-iteration-count: infinite; animation-fill-mode: both;
}

@keyframes ai-u1 { 0%, 4% { opacity: 0; transform: translateY(8px) scale(.96); } 6% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes ai-t1 { 0%, 9% { opacity: 0; transform: scale(.9); } 10%, 16.5% { opacity: 1; transform: none; } 17%, 100% { opacity: 0; transform: none; } }
@keyframes ai-a1 { 0%, 17% { opacity: 0; transform: translateY(8px) scale(.96); } 19% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes ai-u2 { 0%, 26% { opacity: 0; transform: translateY(8px) scale(.96); } 28% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes ai-t2 { 0%, 31% { opacity: 0; transform: scale(.9); } 32%, 39.5% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: none; } }
@keyframes ai-a2 { 0%, 40% { opacity: 0; transform: translateY(8px) scale(.96); } 42% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes ai-btns { 0%, 49% { opacity: 0; transform: translateY(8px); } 51% { opacity: 1; transform: none; } 60.5% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes ai-press { 0%, 57% { transform: none; box-shadow: none; } 58.2% { transform: scale(.9); box-shadow: 0 0 0 4px rgba(169, 57, 139, .25); } 59.5%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(169, 57, 139, 0); } }
@keyframes ai-cursor { 0%, 52% { opacity: 0; transform: translate(40px, 26px); } 54% { opacity: 1; } 57% { opacity: 1; transform: translate(0, 0); } 58.2% { transform: translate(0, 0) scale(.85); } 59.5% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; transform: none; } }
@keyframes ai-done { 0%, 62% { opacity: 0; transform: translateY(8px) scale(.96); } 64% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes ai-h1 { 0%, 9% { background: transparent; } 10.5%, 22% { background: var(--chip-bg); } 24%, 100% { background: transparent; } }
@keyframes ai-h1-ic { 0%, 9% { transform: none; background: var(--chip-bg); color: var(--chip-tx); } 10.5% { transform: scale(1.25); background: #A9398B; color: #fff; } 12%, 22% { transform: none; background: #A9398B; color: #fff; } 24%, 100% { transform: none; background: var(--chip-bg); color: var(--chip-tx); } }
@keyframes ai-h2 { 0%, 31% { background: transparent; } 32.5%, 45% { background: var(--chip-bg); } 47%, 100% { background: transparent; } }
@keyframes ai-h2-ic { 0%, 31% { transform: none; background: var(--chip-bg); color: var(--chip-tx); } 32.5% { transform: scale(1.25); background: #A9398B; color: #fff; } 34%, 45% { transform: none; background: #A9398B; color: #fff; } 47%, 100% { transform: none; background: var(--chip-bg); color: var(--chip-tx); } }
@keyframes ai-h3 { 0%, 58% { background: transparent; } 59.5%, 74% { background: var(--chip-bg); } 76%, 100% { background: transparent; } }
@keyframes ai-h3-ic { 0%, 58% { transform: none; background: var(--chip-bg); color: var(--chip-tx); } 59.5% { transform: scale(1.25); background: #A9398B; color: #fff; } 61%, 74% { transform: none; background: #A9398B; color: #fff; } 76%, 100% { transform: none; background: var(--chip-bg); color: var(--chip-tx); } }

@media (prefers-reduced-motion: reduce) {
    .ai *, .ai *::before { animation: none !important; }
    .ai-msg--typing, .ai-done, .ai-cursor { display: none; }
}
/* <<< Visuel IA */

/* >>> Visuel WinDev (généré) */
/* ---------- Visuel « WinDev / WebDev » : conversion animée vers .NET (cycle 14 s) ---------- */
.wd {
    position: relative; height: 236px; border-radius: 20px; padding: 20px; box-sizing: border-box; overflow: hidden;
    background-color: var(--card2); background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 18px 18px;
    border: 1px solid var(--line); display: flex; align-items: center; gap: 12px;
}
.wd-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wd-label { font-size: 11px; font-weight: 700; color: var(--mut); }
.wd-label--new { position: relative; width: 100%; height: 16px; color: var(--chip-tx); }
.wd-label--new > span { position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 4px; }
.wd-label__done { color: var(--chip-tx); }
.wd-label__done svg { color: #2E9E6B; }
.wd-label--new > span, .wd-old__hl, .wd-new, .wd-new__row, .wd-new__st, .wd-pct > span {
    animation-duration: 14s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-iteration-count: infinite; animation-fill-mode: both;
}

/* Écran WinDev (style Windows classique) */
.wd-old { width: 100%; border: 1px solid #9A9A9A; background: #ECECEC; box-shadow: 2px 2px 0 rgba(0, 0, 0, .15); font-family: Arial, sans-serif; }
.wd-old__title { height: 16px; background: linear-gradient(90deg, #2B4F8C, #5B7FBF); display: flex; align-items: center; justify-content: space-between; padding: 0 5px; font-size: 8px; font-weight: 700; color: #fff; }
.wd-old__btns { display: flex; gap: 2px; }
.wd-old__btns i { width: 8px; height: 7px; background: #D9D9D9; }
.wd-old__btns .wd-x { background: #C0504D; }
.wd-old__body { padding: 5px; }
.wd-old__tools { display: flex; gap: 3px; margin-bottom: 4px; }
.wd-old__tools span { font-size: 7.5px; padding: 1px 4px; border: 1px solid #8E8E8E; background: linear-gradient(#FDFDFD, #DCDCDC); color: #222; }
.wd-old__table { border: 1px solid #8E8E8E; background: #fff; }
.wd-old__rows { position: relative; }
.wd-old__row { position: relative; display: flex; border-bottom: 1px solid #C9C9C9; }
.wd-old__row span { position: relative; flex: 1; padding: 2px 4px; font-size: 8px; color: #333; border-right: 1px solid #DADADA; white-space: nowrap; overflow: hidden; }
.wd-old__row .wd-c2 { flex: 1.6; }
.wd-old__row--head { background: #D6D6D6; }
.wd-old__row--head span { font-weight: 700; color: #222; border-right-color: #BDBDBD; }
.wd-old__row .wd-old__hl { position: absolute; inset: 0; padding: 0; border: 0; background: rgba(169, 57, 139, .16); box-shadow: inset 2px 0 0 #A9398B; }
.wd-scan {
    position: absolute; left: -2px; right: -2px; top: 0; height: 2px; margin-top: -1px; background: #A9398B;
    box-shadow: 0 0 8px 2px rgba(169, 57, 139, .55); animation: wd-scan 14s linear infinite both;
}

/* Flèche de conversion */
.wd-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 4px; }
.wd-arrow {
    position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(90deg, #56378A, #A9398B); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 22px -10px rgba(169, 57, 139, .7); animation: wd-arrow 14s ease-in-out infinite both;
}
.wd-arrow__spin {
    position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: #A9398B; border-right-color: #A9398B;
    animation: wd-spin .9s linear infinite, wd-spin-show 14s linear infinite both;
}
.wd-pct { position: relative; width: 40px; height: 12px; font-size: 9.5px; font-weight: 700; color: var(--chip-tx); font-variant-numeric: tabular-nums; }
.wd-pct > span { position: absolute; left: 0; right: 0; text-align: center; animation-timing-function: linear; }

/* Écran .NET reconstruit */
.wd-new-wrap { position: relative; width: 100%; height: 134px; }
.wd-ghost {
    position: absolute; inset: 0; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--mut) 40%, transparent);
    display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--mut);
    animation: wd-ghost 14s ease-in-out infinite both;
}
.wd-new {
    position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid #E6E1EE;
    box-shadow: 0 14px 28px -16px rgba(61, 14, 75, .5); display: flex;
}
.wd-new__side { width: 26px; background: #3D0E4B; padding: 6px 5px; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px; }
.wd-new__side i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.wd-new__side .wd-on { height: 5px; border-radius: 3px; background: #A9398B; }
.wd-new__main { flex-grow: 1; min-width: 0; padding: 9px 7px; display: flex; flex-direction: column; gap: 5px; }
.wd-new__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1px; }
.wd-new__head span:first-child { font-family: var(--font-title); font-size: 10px; font-weight: 700; color: #1F1A2B; }
.wd-new__add { font-size: 7.5px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #56378A, #A9398B); padding: 2px 7px; border-radius: 999px; }
.wd-new__row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; background: #F7F5FA; }
.wd-new__row:nth-of-type(odd) { background: #fff; }
.wd-new__num { font-size: 8.5px; font-weight: 700; color: #56378A; width: 38px; white-space: nowrap; }
.wd-new__cli { flex: 1; min-width: 0; font-size: 8.5px; color: #1F1A2B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-new__st { font-size: 7.5px; font-weight: 700; padding: 1px 5px; border-radius: 999px; }
.wd-new__st--ok { color: #1E7A50; background: #E3F4EC; }
.wd-new__st--sent { color: #56378A; background: #EEEAF4; }
.wd-new__st--draft { color: #5E5870; background: #F1EEF5; }

@keyframes wd-hl1 { 0%, 18% { opacity: 0; } 19%, 25% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes wd-r1 { 0%, 22% { opacity: 0; transform: translate(-10px, 0px); } 24.5% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes wd-c1 { 0%, 54% { opacity: 0; transform: scale(.5); } 55.5% { opacity: 1; transform: scale(1.15); } 56.5%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes wd-hl2 { 0%, 26% { opacity: 0; } 27%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes wd-r2 { 0%, 30% { opacity: 0; transform: translate(-10px, 0px); } 32.5% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes wd-c2 { 0%, 56% { opacity: 0; transform: scale(.5); } 57.5% { opacity: 1; transform: scale(1.15); } 58.5%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes wd-hl3 { 0%, 34% { opacity: 0; } 35%, 41% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes wd-r3 { 0%, 38% { opacity: 0; transform: translate(-10px, 0px); } 40.5% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes wd-c3 { 0%, 58% { opacity: 0; transform: scale(.5); } 59.5% { opacity: 1; transform: scale(1.15); } 60.5%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes wd-hl4 { 0%, 42% { opacity: 0; } 43%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes wd-r4 { 0%, 46% { opacity: 0; transform: translate(-10px, 0px); } 48.5% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes wd-c4 { 0%, 60% { opacity: 0; transform: scale(.5); } 61.5% { opacity: 1; transform: scale(1.15); } 62.5%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes wd-frame { 0%, 13% { opacity: 0; transform: translate(0px, 6px); } 15.5% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes wd-ghost { 0%, 12% { opacity: 1; } 15%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes wd-scan { 0%, 18% { opacity: 0; top: 0%; } 19% { opacity: 1; top: 0%; } 49% { opacity: 1; top: 100%; } 50%, 100% { opacity: 0; top: 100%; } }
@keyframes wd-spin-show { 0%, 16% { opacity: 0; } 18%, 50% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes wd-spin { to { transform: rotate(360deg); } }
@keyframes wd-arrow { 0%, 18% { transform: none; } 20% { transform: scale(1.12); } 22%, 100% { transform: none; } }
@keyframes wd-p0 { 0%, 16% { opacity: 0; } 17%, 25% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes wd-p1 { 0%, 26% { opacity: 0; } 27%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes wd-p2 { 0%, 34% { opacity: 0; } 35%, 41% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes wd-p3 { 0%, 42% { opacity: 0; } 43%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes wd-p4 { 0%, 50% { opacity: 0; } 51%, 91% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes wd-lw { 0%, 60% { opacity: 1; } 62%, 93% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes wd-ld { 0%, 62% { opacity: 0; transform: scale(.5); } 63.5% { opacity: 1; transform: scale(1.15); } 64.5%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .wd *, .wd *::before { animation: none !important; }
    .wd-old__hl, .wd-scan, .wd-arrow__spin, .wd-ghost, .wd-label__wait { display: none; }
    .wd-pct > span { opacity: 0; }
    .wd-pct > span:last-child { opacity: 1; }
}
/* <<< Visuel WinDev */

/* >>> Equipe et chaîne de la donnée (généré) */
/* ---------- Qui sommes-nous : photo des associés ---------- */
.team__photo {
    flex: 1; min-width: 0; margin: 0; position: relative; border-radius: 28px; overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .12);
}
.team__photo::after { /* léger voile de marque en bas de photo pour la légende */
    content: ""; position: absolute; inset: 55% 0 0 0; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(28, 19, 37, .55));
}
/* Traitement photo « lumière » : tons légèrement adoucis, halo de lumière douce venant du haut,
   vignettage discret sur les bords ; au survol, la photo retrouve son rendu naturel avec un léger zoom. */
.team__photo img {
    width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
    filter: saturate(.8) contrast(1.06) brightness(1.04);
    transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .6s ease;
}
.team__photo::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(120% 90% at 22% 0%, rgba(255, 244, 236, .38) 0%, rgba(255, 244, 236, 0) 55%),
        radial-gradient(70% 60% at 100% 100%, rgba(169, 57, 139, .22) 0%, rgba(169, 57, 139, 0) 70%),
        radial-gradient(140% 120% at 50% 45%, transparent 55%, rgba(18, 12, 24, .45) 100%);
    mix-blend-mode: normal; opacity: 1; transition: opacity .6s ease;
}
.team__photo:hover img { transform: scale(1.03); filter: none; }
.team__photo:hover::before { opacity: 0; }
.team__photo figcaption {
    position: absolute; z-index: 1; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 2px;
    padding: 10px 16px 11px; border-radius: 16px; background: rgba(18, 12, 24, .55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .14);
}
.team__names { font-family: var(--font-title); font-size: 18px; font-weight: 700; color: #fff; }
.team__role { font-size: 12.5px; font-weight: 600; color: #F2C6E0; }

/* ---------- La chaîne de la donnée : frise en 4 étapes, flux animé ---------- */
.pipeline { position: relative; margin-top: 80px; padding-top: 56px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pipeline__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.pipeline__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #D98BC4; }
.pipeline__title { font-size: 30px; line-height: 1.15; font-weight: 700; color: #fff; }
.pipeline__body { position: relative; }
.pipeline__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
/* Ligne reliant le centre du 1er nœud à celui du dernier */
.pipeline__track {
    position: absolute; top: 31px; height: 2px; left: 32px; right: calc((100% - 96px) / 4 - 32px);
    background: linear-gradient(90deg, rgba(185, 163, 232, .45), rgba(217, 139, 196, .45)); overflow: hidden; border-radius: 2px;
}
.pipeline__pulse {
    position: absolute; top: -1px; left: 0; width: 90px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, transparent, #F2A7CB, #fff, transparent); box-shadow: 0 0 12px 2px rgba(242, 167, 203, .6);
    animation: cc-pipeline-x 3.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes cc-pipeline-x { from { left: -90px; } to { left: 100%; } }
.pipeline__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pipeline__node {
    position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, #56378A, #A9398B);
    box-shadow: 0 0 0 8px var(--band), 0 0 0 9px rgba(217, 139, 196, .35), 0 18px 34px -14px rgba(169, 57, 139, .9);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.pipeline__step:hover .pipeline__node { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 0 8px var(--band), 0 0 0 9px rgba(242, 167, 203, .75), 0 22px 40px -14px rgba(169, 57, 139, 1); }
.pipeline__num { font-family: var(--font-title); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #D98BC4; }
.pipeline__label { font-family: var(--font-title); font-size: 22px; font-weight: 700; color: #fff; }
.pipeline__text { font-size: 15px; line-height: 1.55; color: #CFC8DA; max-width: 260px; }

/* Tablette et mobile : frise verticale */
@media (max-width: 980px) {
    .pipeline { margin-top: 56px; padding-top: 40px; }
    .pipeline__title { font-size: 24px; }
    .pipeline__steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .pipeline__step { padding-left: 84px; min-height: 64px; justify-content: center; }
    .pipeline__node { position: absolute; left: 0; top: 0; margin: 0; width: 56px; height: 56px; }
    /* En vertical : un trait relie chaque nœud au suivant (la ligne s'arrête au dernier nœud). */
    .pipeline__track { display: none; }
    .pipeline__step:not(:last-child)::before {
        content: ""; position: absolute; left: 27px; top: 28px; width: 2px; height: calc(100% + 28px);
        background: linear-gradient(180deg, rgba(185, 163, 232, .5), rgba(217, 139, 196, .5));
    }
    .pipeline__text { max-width: none; }
}
@media (max-width: 760px) {
    .team__photo { border-radius: 22px; }
    .team__photo figcaption { left: 12px; bottom: 12px; padding: 8px 12px; }
    .team__names { font-size: 15px; }
    .team__role { font-size: 11px; }
    .pipeline__label { font-size: 19px; }
    .pipeline__text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .pipeline__pulse { display: none; }
    .team__photo img, .pipeline__node { transition: none; }
}
/* <<< Equipe et chaîne de la donnée */

/* >>> Page contact (généré) */
/* =========================================================================
   Page Contact
   En-tête en 2 colonnes : accroche + animation (gauche, fixe au défilement) | formulaire (droite).
   Grille commune : --c-gap entre colonnes, cartes de 24 px de rayon, pas vertical de 8 px.
   ========================================================================= */
.contact-hero {
    --c-gap: 56px;
    min-height: 0; padding: 64px 0 88px;
    overflow: clip; /* « clip » et non « hidden » : la colonne de gauche peut rester fixe (sticky) */
}
.contact-hero .ring--violet { top: 400px; bottom: auto; } /* section très haute : l'anneau reste visible à l'arrivée */
.contact-hero__inner { display: grid; grid-template-columns: 515px minmax(0, 1fr); gap: var(--c-gap); align-items: start; }

/* Colonne de gauche */
.contact-hero__text { position: sticky; top: 128px; display: flex; flex-direction: column; align-items: flex-start; }
.contact-hero__text .pill-badge { margin-bottom: 20px; }
.contact-hero .hero__title--page { font-size: 52px; line-height: 1.05; margin-bottom: 16px; }
.contact-hero .hero__lead { font-size: 18px; line-height: 1.55; max-width: 460px; margin-bottom: 32px; }
.contact-visual { position: relative; }
.contact-hero .ccv { width: 515px; }
.contact-hero__place { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--body); }
.contact-hero__place svg { color: var(--eyebrow); }
.contact-hero__place span { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* Cartes */
.contact__main { position: relative; z-index: 1; min-width: 0; }
.contact-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 40px 80px -44px rgba(61, 14, 75, .45); }

/* ---------- Formulaire ---------- */
.contact-form { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.contact-form__trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.contact-form__head h2 { font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.contact-form__head p { font-size: 15px; line-height: 1.5; color: var(--body); }
.contact-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-field > label, .contact-field > legend { font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--ink); padding: 0; }
.contact-field > legend { margin-bottom: 8px; }
.contact-req { color: var(--eyebrow); }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-field input[type="text"], .contact-field input[type="email"], .contact-field input[type="tel"], .contact-field textarea {
    width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line);
    background: var(--bg); color: var(--ink); font: inherit; font-size: 15.5px; line-height: 1.5;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.contact-field textarea { resize: vertical; min-height: 132px; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: var(--mut); opacity: .75; }
.contact-field input:hover, .contact-field textarea:hover { border-color: color-mix(in srgb, var(--link) 35%, var(--line)); }
.contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 18%, transparent); background: var(--card); }
.contact-field [aria-invalid="true"] { border-color: #D14B6A !important; box-shadow: 0 0 0 4px rgba(209, 75, 106, .12); }
.contact-error { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: #D14B6A; }
[data-theme="dark"] .contact-error { color: #FF8FA8; }
[data-theme="dark"] .contact-field [aria-invalid="true"] { border-color: #FF8FA8 !important; }

/* Sujets : pastilles radio */
.contact-subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-subject { position: relative; cursor: pointer; }
.contact-subject input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.contact-subject span {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 12px; border-radius: 999px;
    border: 1.5px solid var(--line); background: var(--bg); font-size: 13.5px; font-weight: 600; color: var(--body); white-space: nowrap;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.contact-subject:hover span { border-color: color-mix(in srgb, var(--link) 40%, var(--line)); color: var(--ink); }
.contact-subject input:checked + span { border-color: transparent; color: #fff; background: linear-gradient(90deg, #56378A, #A9398B); box-shadow: 0 10px 22px -12px rgba(169, 57, 139, .8); }
.contact-subject input:focus-visible + span { outline: 3px solid var(--magenta); outline-offset: 3px; }

/* Consentement */
.contact-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--body) !important; cursor: pointer; }
.contact-consent input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #A9398B; cursor: pointer; }
.contact-consent a { font-weight: 600; text-decoration: underline; }

/* Pied : bouton + mention */
.contact-form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 4px; }
.contact-form__note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--mut); }
.contact-form__note svg { color: #2E9E6B; flex-shrink: 0; }
.contact-submit { position: relative; min-width: 232px; }
.contact-submit__label { display: inline-flex; align-items: center; gap: 8px; }
.contact-submit__busy { display: none; align-items: center; gap: 10px; }
.contact-submit.is-busy { pointer-events: none; opacity: .92; }
.contact-submit.is-busy .contact-submit__label { display: none; }
.contact-submit.is-busy .contact-submit__busy { display: inline-flex; }
.contact-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: cc-gear .8s linear infinite; }

/* Retours : alerte et confirmation (amenées à l'écran par site.js) */
[data-scroll-focus], .contact-field [aria-invalid="true"] { scroll-margin-top: 130px; }
[data-scroll-focus]:focus { outline: none; }
.contact-alert {
    padding: 14px 16px; border-radius: 12px; background: rgba(209, 75, 106, .1); border: 1px solid rgba(209, 75, 106, .35);
    color: #B2334F; font-size: 14px; font-weight: 600; animation: cc-alert-in .4s ease both;
}
[data-theme="dark"] .contact-alert { color: #FF8FA8; }
@keyframes cc-alert-in { 0% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } 100% { transform: none; } }
.contact-success { padding: 64px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.contact-success__icon {
    width: 72px; height: 72px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2E9E6B, #3FBF86); box-shadow: 0 18px 36px -14px rgba(46, 158, 107, .7);
    animation: cc-success-pop .6s cubic-bezier(.2, .8, .2, 1.4) both;
}
@keyframes cc-success-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.contact-success h2 { font-size: 30px; line-height: 1.15; }
.contact-success p { max-width: 460px; color: var(--body); font-size: 16px; line-height: 1.6; }
.contact-success__ref { font-size: 14.5px !important; color: var(--mut) !important; }
.contact-success__ref strong { font-family: ui-monospace, Consolas, monospace; color: var(--link); letter-spacing: .04em; }
.contact-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ---------- Sections suivantes : même en-tête de section (surtitre + titre) ---------- */
.contact-how__head, .contact-where__text { display: flex; flex-direction: column; gap: 16px; }
.contact-how__head { margin-bottom: 44px; }
.contact-how__eyebrow { color: var(--eyebrow); }

/* « Comment ça se passe ? » : 3 cartes reliées */
.contact-how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.contact-how__step {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 24px;
    background: var(--card); border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.contact-how__step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--link) 35%, var(--line)); box-shadow: 0 26px 50px -32px rgba(86, 55, 138, .6); }
.contact-how__step:not(:last-child)::after { /* flèche vers l'étape suivante, centrée dans la gouttière */
    content: ""; position: absolute; z-index: 1; right: -20px; top: 46px; width: 10px; height: 10px;
    border-top: 2.5px solid var(--eyebrow); border-right: 2.5px solid var(--eyebrow); transform: rotate(45deg);
}
.contact-how__num { position: absolute; right: 26px; top: 26px; font-family: var(--font-title); font-size: 44px; font-weight: 700; line-height: 48px; color: color-mix(in srgb, var(--eyebrow) 18%, transparent); }
.contact-how__icon {
    width: 48px; height: 48px; border-radius: 14px; margin-bottom: 12px; color: #fff; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #56378A, #A9398B); box-shadow: 0 12px 26px -12px rgba(169, 57, 139, .7);
}
.contact-how__step strong { font-family: var(--font-title); font-size: 20px; line-height: 1.25; color: var(--ink); }
.contact-how__step > span:last-child { font-size: 15px; line-height: 1.6; color: var(--body); }

/* « Où nous trouver » : mêmes colonnes que l'en-tête (515 px | reste) */
.contact-where__inner { display: grid; grid-template-columns: 515px minmax(0, 1fr); gap: 56px; align-items: center; }
.contact-where__text { align-items: flex-start; }
.contact-place__address { display: flex; gap: 12px; margin: 8px 0; font-style: normal; font-size: 16px; line-height: 1.6; color: var(--body); }
.contact-place__address svg { flex-shrink: 0; margin-top: 3px; color: var(--eyebrow); }
.contact-map { position: relative; height: 340px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--card2); box-shadow: 0 30px 60px -36px rgba(61, 14, 75, .45); }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.75) contrast(1.02); }
[data-theme="dark"] .contact-map iframe { filter: invert(.92) hue-rotate(180deg) saturate(.6) brightness(.95); }

/* ---------- Adaptation ---------- */
/* Écrans peu hauts : on resserre pour garder le formulaire bien visible à l'arrivée */
@media (min-width: 1041px) and (max-height: 640px) { .contact-hero { padding-top: 40px; } .contact-hero__text { top: 112px; } }
@media (max-width: 1240px) {
    .contact-hero { --c-gap: 40px; }
    .contact-hero__inner, .contact-where__inner { grid-template-columns: 453px minmax(0, 1fr); gap: 40px; }
    .contact-hero .ccv { zoom: .88; }
    .contact-hero .hero__title--page { font-size: 46px; }
}
@media (max-width: 1040px) {
    .contact-hero { padding-bottom: 64px; }
    .contact-hero__inner, .contact-where__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .contact-hero__text { position: static; }
    .contact-visual { display: none; }
    .contact-hero .hero__lead { margin-bottom: 0; max-width: 560px; }
    .contact-hero__place { margin-top: 20px; }
    .contact-how__steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .contact-how__step:not(:last-child)::after { display: none; }
}
@media (max-width: 760px) {
    .contact-hero { padding: 28px 0 48px; }
    .contact-hero .hero__title--page { font-size: 38px; }
    .contact-hero .hero__lead { font-size: 16px; }
    .contact-form { padding: 22px 18px; gap: 18px; }
    .contact-form__head h2 { font-size: 22px; }
    .contact-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .contact-submit { width: 100%; }
    .contact-how__head { margin-bottom: 28px; }
    .contact-how__step { padding: 22px; }
    .contact-map { height: 260px; }
    .contact-success { padding: 40px 22px; }
    .contact-success h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .contact-success__icon, .contact-alert, .contact-spinner { animation: none; }
    .contact-how__step { transition: none; }
}
/* <<< Page contact */

/* >>> Visuel contact (généré) */
/* ---------- Illustration animée de la page Contact (cycle 14 s) ---------- */
.ccv { position: relative; height: 440px; }
.ccv * { animation-duration: 14s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
/* Emplacements des cartes à venir (en pointillés) : la composition reste lisible à tout moment du cycle */
.ccv-ghost {
    position: absolute; box-sizing: border-box; border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--mut) 35%, transparent);
    display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--mut) 70%, transparent);
    animation: none !important;
}
.ccv-ghost--reply { right: 0; top: 152px; width: 250px; height: 124px; }
.ccv-ghost--doc { left: 0; top: 290px; width: 260px; height: 72px; }
.ccv-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ccv-trail path { stroke-dasharray: 4 6; animation: ccv-trail 14s linear infinite both; }
.ccv-card {
    position: absolute; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line);
    box-shadow: 0 28px 56px -30px rgba(61, 14, 75, .5);
}
.ccv-form { left: 0; top: 0; width: 270px; display: flex; flex-direction: column; gap: 10px; }
.ccv-form__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.ccv-dot { width: 8px; height: 8px; border-radius: 50%; background: #A9398B; box-shadow: 0 0 0 4px rgba(169, 57, 139, .15); }
.ccv-chips { display: flex; gap: 6px; }
.ccv-chip { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 10.5px; font-weight: 600; color: var(--body); white-space: nowrap; }
.ccv-chip--sel { animation-timing-function: ease; }
.ccv-textarea { min-height: 52px; padding: 9px 11px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); display: flex; flex-direction: column; gap: 3px; }
.ccv-line { position: relative; font-size: 12px; line-height: 1.35; color: var(--ink); white-space: nowrap; width: max-content; }
.ccv-caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 2px; vertical-align: -2px; background: #A9398B; animation-timing-function: steps(1); }
.ccv-btn {
    position: relative; align-self: flex-start; height: 30px; width: 152px; border-radius: 999px; color: #fff; font-size: 11.5px; font-weight: 700;
    background: linear-gradient(90deg, #56378A, #A9398B); animation: ccv-btn 14s ease infinite both, ccv-press 14s ease infinite both;
}
.ccv-btn > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; animation-timing-function: ease; }
.ccv-plane {
    position: absolute; left: 0; top: 0; offset-path: path("M178 104 C 235 104, 262 118, 292 152"); offset-rotate: auto;
    animation: ccv-fly 14s ease-in-out infinite both;
}
.ccv-reply { right: 0; top: 152px; width: 250px; display: flex; flex-direction: column; gap: 9px;
    border: 1.5px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #56378A, #A9398B) border-box; }
.ccv-reply__head { display: flex; align-items: center; gap: 9px; }
.ccv-reply__head div { display: flex; flex-direction: column; line-height: 1.25; }
.ccv-reply__head strong { font-size: 12.5px; color: var(--ink); }
.ccv-reply__head div span { font-size: 10.5px; color: var(--mut); }
.ccv-avatar { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.ccv-avatar img { width: 18px; height: 18px; }
.ccv-reply__body { position: relative; min-height: 18px; }
.ccv-reply__body p { font-size: 12px; line-height: 1.4; color: var(--body); }
.ccv-typing { position: absolute; left: 0; top: 0; display: inline-flex; gap: 3px; padding: 6px 9px; border-radius: 999px; background: var(--chip-bg); }
.ccv-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--chip-tx); animation: cc-typing 1.2s ease-in-out infinite !important; }
.ccv-typing span:nth-child(2) { animation-delay: .15s !important; }
.ccv-typing span:nth-child(3) { animation-delay: .3s !important; }
.ccv-cal { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--chip-bg); color: var(--chip-tx); font-size: 11px; font-weight: 700; }
.ccv-doc { left: 0; top: 290px; width: 260px; display: flex; align-items: center; gap: 12px; }
.ccv-doc__icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #56378A, #A9398B); }
.ccv-doc__txt { display: flex; flex-direction: column; line-height: 1.3; }
.ccv-doc__txt strong { font-size: 12.5px; color: var(--ink); }
.ccv-doc__txt span { font-size: 11px; color: var(--mut); }
.ccv-doc__ok { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #2E9E6B; color: #fff; display: flex; align-items: center; justify-content: center; }
.ccv-steps { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccv-steps__track { position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 13px; height: 2px; background: color-mix(in srgb, var(--mut) 25%, transparent); border-radius: 2px; }
.ccv-steps__fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #56378A, #A9398B); animation: ccv-fill 14s ease infinite both; }
.ccv-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--body); }
.ccv-step i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--line); background: var(--card); color: var(--mut); animation-timing-function: ease; }

@keyframes ccv-chip { 0%, 4% { background: var(--bg); color: var(--body); border-color: var(--line); } 5.5%, 92% { background: linear-gradient(90deg, #56378A, #A9398B); color: #fff; border-color: transparent; } 96%, 100% { background: var(--bg); color: var(--body); border-color: var(--line); } }
@keyframes ccv-l1 { 0%, 8% { clip-path: inset(0 100% 0 0); } 19%, 92% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes ccv-l2 { 0%, 19.5% { clip-path: inset(0 100% 0 0); } 29%, 92% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes ccv-caret { 0%, 7% { opacity: 0; } 8%, 29.5% { opacity: 1; } 30.5%, 100% { opacity: 0; } }
@keyframes ccv-press { 0%, 31% { transform: none; } 32.2% { transform: scale(.92); } 33.4%, 100% { transform: none; } }
@keyframes ccv-send { 0%, 33% { opacity: 1; } 34%, 95% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ccv-sent { 0%, 33.5% { opacity: 0; } 34.5%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ccv-btn { 0%, 33.5% { background: linear-gradient(90deg, #56378A, #A9398B); } 34.5%, 92% { background: linear-gradient(90deg, #2E9E6B, #2E9E6B); } 96%, 100% { background: linear-gradient(90deg, #56378A, #A9398B); } }
@keyframes ccv-fly { 0%, 34% { offset-distance: 0%; opacity: 0; } 35% { opacity: 1; } 43% { offset-distance: 100%; opacity: 1; } 44.5%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ccv-trail { 0%, 34% { stroke-dashoffset: 260; opacity: 0; } 35% { opacity: 1; } 43% { stroke-dashoffset: 0; opacity: 1; } 50%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ccv-b { 0%, 43.5% { opacity: 0; transform: translateY(10px) scale(.96); } 45.5%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes ccv-bt { 0%, 45.5% { opacity: 0; } 46.5%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes ccv-bm { 0%, 51% { opacity: 0; } 53%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ccv-bc { 0%, 55.5% { opacity: 0; transform: translateY(10px) scale(.96); } 57.5%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes ccv-c { 0%, 63% { opacity: 0; transform: translateY(10px) scale(.96); } 65%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes ccv-co { 0%, 70% { opacity: 0; transform: translateY(10px) scale(.96); } 72%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes ccv-s1 { 0%, 43% { background: linear-gradient(135deg, #56378A, #A9398B); color: #fff; } 44%, 92% { background: #3D0E4B; color: #fff; } 96%, 100% { background: linear-gradient(135deg, #56378A, #A9398B); color: #fff; } }
@keyframes ccv-s2 { 0%, 43% { background: var(--card); color: var(--mut); } 44%, 62% { background: linear-gradient(135deg, #56378A, #A9398B); color: #fff; } 63%, 92% { background: #3D0E4B; color: #fff; } 96%, 100% { background: var(--card); color: var(--mut); } }
@keyframes ccv-s3 { 0%, 62% { background: var(--card); color: var(--mut); } 63%, 92% { background: linear-gradient(135deg, #56378A, #A9398B); color: #fff; } 96%, 100% { background: var(--card); color: var(--mut); } }
@keyframes ccv-fill { 0%, 43% { width: 0; } 45%, 62% { width: 50%; } 64%, 92% { width: 100%; } 96%, 100% { width: 0; } }

@media (prefers-reduced-motion: reduce) {
    .ccv *, .ccv-trail path { animation-delay: -12s !important; animation-play-state: paused !important; }
    .ccv-plane { display: none; }
}
/* <<< Visuel contact */

/* >>> Page en préparation (généré) */
/* ---------- Page « en préparation » : la page se construit sous vos yeux (cycle 10 s) ---------- */
.soon { min-height: min(calc(100svh - var(--header-h)), 900px); padding: 56px 0 80px; }
.soon__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.soon__text { display: flex; flex-direction: column; gap: 24px; }
.soon .hero__lead { max-width: 560px; }

.sb { position: relative; height: 450px; }
.sb-window, .sb-term, .sb-progress { animation-name: sb-float; animation-timing-function: ease-in-out !important; animation-duration: 8s !important; }
.sb-term { animation-delay: -2.5s; } .sb-progress { animation-delay: -5s; }
@keyframes sb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.sb * { animation-duration: 10s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* Fenêtre de navigateur */
.sb-window {
    position: absolute; right: 0; top: 0; width: 480px; height: 360px; border-radius: 16px; overflow: hidden;
    background: #fff; border: 1px solid #E6E1EE; box-shadow: 0 40px 80px -40px rgba(61, 14, 75, .5);
    display: flex; flex-direction: column;
}
.sb-tabs { height: 28px; flex-shrink: 0; display: flex; align-items: flex-end; padding: 0 12px; background: #DFE3EA; }
.sb-tab { position: relative; height: 23px; width: 190px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 8px 8px 0 0; background: #fff; font-size: 10.5px; font-weight: 600; color: #3C4043; }
.sb-tab__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-spinner { width: 11px; height: 11px; flex-shrink: 0; border-radius: 50%; border: 2px solid #E6E1EE; border-top-color: #A9398B; animation: cc-gear .8s linear infinite !important; }
.sb-win { margin-left: auto; align-self: center; display: flex; gap: 12px; margin-top: 2px; }
.sb-win i { width: 8px; height: 1.6px; background: #5F6368; border-radius: 1px; }
.sb-bar { height: 32px; flex-shrink: 0; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid #ECE8F2; }
.sb-omni { flex: 1; height: 21px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: #F1F3F4; font-size: 10.5px; color: #3C4043; }
.sb-omni svg { color: #56378A; }
.sb-page { position: relative; flex: 1; padding: 12px 18px 16px; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto 1fr; gap: 12px 16px; background: #FBFAFD; }
.sb-nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 999px; background: #fff; border: 1px solid #ECE8F2; }
.sb-nav img { width: 15px; height: 15px; margin-right: auto; }
.sb-nav i { width: 34px; height: 6px; border-radius: 3px; background: #E3DCEC; }
.sb-nav span { width: 46px; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #56378A, #A9398B); }
.sb-hero { display: flex; flex-direction: column; gap: 8px; }
.sb-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Blocs « squelette » qui se posent un à un, puis scintillent */
.sb-block {
    display: block; border-radius: 6px; position: relative; overflow: hidden;
    background: #ECE7F3; animation-name: sb-in;
}
.sb-block::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: sb-shimmer 1.6s ease-in-out infinite !important;
}
.sb-pill { width: 70px; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #56378A, #A9398B); }
.sb-title { width: 92%; height: 16px; background: #D9CFE8; }
.sb-title--short { width: 64%; background: linear-gradient(90deg, #C9A9DA, #E3B6D3); }
.sb-text { width: 100%; height: 8px; margin-top: 4px; }
.sb-text--short { width: 76%; margin-top: 0; }
.sb-btn { width: 92px; height: 22px; border-radius: 999px; margin-top: 6px; background: linear-gradient(90deg, #56378A, #A9398B); }
.sb-visual { position: relative; border-radius: 12px; background: radial-gradient(circle at 50% 50%, #fff 0%, #F3ECF8 55%, #EEE2F3 100%); display: flex; align-items: center; justify-content: center; }
.sb-visual img { position: relative; z-index: 1; width: 62px; height: 62px; filter: drop-shadow(0 10px 18px rgba(169, 57, 139, .35)); animation: sb-logo 3.2s ease-in-out infinite !important; }
@keyframes sb-logo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
/* Orbite : un point de donnée tourne autour du logo */
.sb-orbit { position: absolute; width: 104px; height: 104px; border-radius: 50%; border: 1.5px dashed rgba(169, 57, 139, .35); animation: cc-gear 7s linear infinite !important; }
.sb-orbit i { position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: linear-gradient(135deg, #56378A, #A9398B); box-shadow: 0 0 10px rgba(169, 57, 139, .7); }
.sb-visual.sb-block::after { display: none; }
.sb-card { height: 64px; border-radius: 10px; background: #fff; border: 1px solid #ECE8F2; padding: 10px; }
.sb-card i { display: block; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #56378A, #A9398B); }

.sb-b0 { animation-name: sb-in0; } .sb-b1 { animation-delay: 0s; } .sb-b2 { animation-name: sb-in2; } .sb-b3 { animation-name: sb-in3; } .sb-b4 { animation-name: sb-in4; }
.sb-b5 { animation-name: sb-in5; } .sb-b6 { animation-name: sb-in6; } .sb-b7 { animation-name: sb-in7; } .sb-b8 { animation-name: sb-in8; }
.sb-b9 { animation-name: sb-in9; } .sb-b10 { animation-name: sb-in10; }
@keyframes sb-in0  { 0%, 1%  { opacity: 0; transform: translateY(-8px) scale(.96); } 4%,  88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-in   { 0%, 4%  { opacity: 0; transform: translateY(-8px) scale(.96); } 7%,  88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-in2  { 0%, 9%  { opacity: 0; transform: translateY(-8px) scale(.96); } 12%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-in3  { 0%, 13% { opacity: 0; transform: translateY(-8px) scale(.96); } 16%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-in4  { 0%, 18% { opacity: 0; transform: translateY(-8px) scale(.96); } 21%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-in5  { 0%, 21% { opacity: 0; transform: translateY(-8px) scale(.96); } 24%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-in6  { 0%, 26% { opacity: 0; transform: translateY(-8px) scale(.9); }  30%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-in7  { 0%, 32% { opacity: 0; transform: scale(.9); }                   37%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-in8  { 0%, 42% { opacity: 0; transform: translateY(10px); }            46%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-in9  { 0%, 46% { opacity: 0; transform: translateY(10px); }            50%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-in10 { 0%, 50% { opacity: 0; transform: translateY(10px); }            54%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes sb-shimmer { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* Terminal */
.sb-term {
    position: absolute; left: 0; bottom: 34px; width: 300px; padding: 12px 14px 14px; border-radius: 14px;
    background: #1C1325; box-shadow: 0 30px 60px -24px rgba(28, 19, 37, .7); border: 1px solid rgba(255, 255, 255, .08);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 10.5px; line-height: 1.7; color: #E9E3F2;
    display: flex; flex-direction: column;
}
[data-theme="dark"] .sb-term { background: #261B33; border-color: rgba(217, 139, 196, .28); }
.sb-term__head { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-family: var(--font-body); font-size: 10px; color: #8B82A0; }
.sb-term__head i { width: 7px; height: 7px; border-radius: 50%; background: #3A3047; }
.sb-term__head span { margin-left: 6px; }
.sb-line { white-space: nowrap; overflow: hidden; width: max-content; max-width: 100%; text-overflow: clip; }
.sb-line b { color: #D98BC4; font-weight: 700; margin-right: 6px; }
.sb-ok { color: #6FD3A2; }
.sb-l1 { animation: sb-type1 10s steps(26, end) infinite both; }
.sb-l2 { animation: sb-type2 10s steps(16, end) infinite both; }
.sb-l3 { animation: sb-type3 10s steps(1, end) infinite both; }
.sb-l4 { animation: sb-type4 10s steps(18, end) infinite both; }
@keyframes sb-type1 { 0%, 3%  { clip-path: inset(0 100% 0 0); } 14%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 94%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes sb-type2 { 0%, 18% { clip-path: inset(0 100% 0 0); } 26%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 94%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes sb-type3 { 0%, 34% { clip-path: inset(0 100% 0 0); } 35%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 94%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes sb-type4 { 0%, 42% { clip-path: inset(0 100% 0 0); } 52%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 94%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }

/* Barre de progression */
.sb-progress {
    position: absolute; right: 24px; bottom: 0; width: 260px; padding: 12px 16px 14px; border-radius: 16px;
    background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 48px -28px rgba(61, 14, 75, .5);
    display: flex; flex-direction: column; gap: 9px;
}
.sb-progress__label { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.sb-progress__label svg { color: var(--eyebrow); }
.sb-progress__bar { height: 8px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; }
.sb-progress__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #56378A, #A9398B); animation-name: sb-progress; animation-timing-function: ease-in-out; }
@keyframes sb-progress { 0%, 4% { width: 4%; } 30% { width: 38%; } 55% { width: 71%; } 80%, 88% { width: 92%; } 94%, 100% { width: 4%; } }

@media (max-width: 1100px) {
    .soon { min-height: 0; }
    .soon__inner { grid-template-columns: minmax(0, 1fr); }
    .sb { display: none; }
}
/* Raccourcis « En attendant » */
.soon-links { padding-top: 24px; }
.soon-links__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.soon-links__eyebrow { color: var(--eyebrow); }
.soon-links__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.soon-link {
    display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 20px; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.soon-link:hover { color: var(--ink); transform: translateY(-4px); border-color: color-mix(in srgb, var(--link) 35%, var(--line)); box-shadow: 0 24px 46px -30px rgba(86, 55, 138, .6); }
.soon-link__icon { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 6px; color: #fff; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #56378A, #A9398B); box-shadow: 0 12px 24px -12px rgba(169, 57, 139, .7); }
.soon-link__title { font-family: var(--font-title); font-size: 18px; font-weight: 700; }
.soon-link__text { flex: 1; font-size: 14px; line-height: 1.55; color: var(--body); }
.soon-link .link-arrow { margin-top: 6px; font-size: 14px; }
@media (max-width: 1100px) { .soon-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .soon { padding: 36px 0 56px; }
    .soon-links__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .soon-link { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; }
    .soon-link__icon { grid-row: 1 / span 2; margin: 0; }
    .soon-link .link-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sb *, .sb *::after { animation-delay: -8.5s !important; animation-play-state: paused !important; }
    .soon-link { transition: none; }
}
/* <<< Page en préparation */

/* >>> Pages expertise (généré) */
/* ---------- Pages expertise (modèle commun : classes xpp-*) ---------- */
.xpp-hero { min-height: 0; padding: 72px 0 96px; overflow: clip; }
.xpp-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.xpp-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.xpp-hero .hero__title--page { font-size: 54px; line-height: 1.06; }
.xpp-hero .hero__lead { max-width: 560px; }
.xpp-hero__visual {
    border-radius: 28px; padding: 18px; background: var(--card); border: 1px solid var(--line);
    box-shadow: 0 44px 80px -52px rgba(86, 55, 138, .65); display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.xpp-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.xpp-head { display: flex; flex-direction: column; gap: 16px; max-width: 800px; margin-bottom: 44px; }
.xpp-head--flush { margin-bottom: 0; }
.xpp-head p { font-size: 18px; line-height: 1.6; color: var(--body); max-width: 680px; }
.xpp-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.xpp-icon {
    width: 44px; height: 44px; border-radius: 13px; color: #fff; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #56378A, #A9398B); box-shadow: 0 12px 24px -12px rgba(169, 57, 139, .7);
}

.xpp-signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.xpp-sign {
    display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 22px;
    background: var(--card); border: 1px solid var(--line);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.xpp-sign:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--link) 35%, var(--line)); box-shadow: 0 24px 46px -30px rgba(86, 55, 138, .6); }
.xpp-sign h3 { font-family: var(--font-title); font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--ink); margin-top: 6px; }
.xpp-sign p { font-size: 15px; line-height: 1.6; color: var(--body); }

.xpp-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.xpp-format { display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: 26px; transition: transform .25s ease, box-shadow .25s ease; }
.xpp-format:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -32px rgba(86, 55, 138, .6); }
.xpp-format__head { display: flex; align-items: center; gap: 14px; }
.xpp-format__head h3 { font-family: var(--font-title); font-size: 23px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.xpp-format > p { font-size: 15.5px; line-height: 1.6; color: var(--body); }
.xpp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.xpp-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.xpp-list svg { flex-shrink: 0; color: var(--link); }

.xpp-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
.xpp-benefits li { display: flex; gap: 14px; align-items: flex-start; }
.xpp-benefits li > div { display: flex; flex-direction: column; gap: 6px; }
.xpp-benefits strong { font-family: var(--font-title); font-size: 19px; line-height: 1.3; color: #fff; }
.xpp-benefits span { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.xpp-check {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; margin-top: 1px; color: #fff !important;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #7B5CC4, #C9529F); box-shadow: 0 10px 22px -10px rgba(217, 139, 196, .9);
}

.band .xpp-head p { color: rgba(255, 255, 255, .74); }

/* Chapitre « Le chemin » : deux parcours (agile, forfait), chacun dans sa carte avec sa timeline. */
.xpp-paths { display: flex; flex-direction: column; gap: 28px; }
.xpp-path { padding: 34px 36px 36px; border-radius: 28px; display: flex; flex-direction: column; gap: 34px; }
.xpp-path__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.xpp-path__title { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.xpp-path__tag { align-self: flex-start; font-size: 12px; font-weight: 700; color: #fff; background: var(--grad); padding: 5px 12px; border-radius: 999px; }
.xpp-path__title h3 { font-family: var(--font-title); font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--ink); }
.xpp-path__title p { font-size: 16px; line-height: 1.6; color: var(--body); }
.xpp-path__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; text-align: right; }
.xpp-path__meta .xpp-tl__out { margin-top: 0; }
.xpp-path__ideal { font-size: 14px; line-height: 1.5; color: var(--body); max-width: 260px; }
.xpp-path__ideal strong { color: var(--ink); font-weight: 700; }

/* Emblème, séparateur « ou » et vignettes d'étape. */
.xpp-path__head { justify-content: flex-start; gap: 20px; }
.xpp-path__title { flex: 1; }
.xpp-path__meta { margin-left: auto; }
.xpp-path__emblem {
    width: 60px; height: 60px; flex-shrink: 0; border-radius: 18px; color: #fff; background: var(--grad);
    display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 16px 28px -14px rgba(169, 57, 139, .8);
}
.xpp-path:first-child .xpp-path__emblem svg { animation: xpp-spin 9s linear infinite; }
.xpp-path { transition: transform .3s ease, box-shadow .3s ease; }
.xpp-path:hover { box-shadow: 0 34px 60px -40px rgba(86, 55, 138, .7); }
.xpp-or { display: flex; align-items: center; gap: 18px; margin: -6px 0; }
.xpp-or::before, .xpp-or::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent); }
.xpp-or span {
    width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--link); background: var(--card); border: 1.5px solid var(--line);
}
.xpp-sa {
    position: relative; width: 100%; height: 96px; margin-bottom: 8px; border-radius: 14px; box-sizing: border-box; overflow: hidden;
    background-color: var(--card2); background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 14px 14px;
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.xpp-sa u { display: block; text-decoration: none; }
.xpp-sa i { font-style: normal; }
.xpp-sa__badge {
    position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; white-space: nowrap; color: var(--chip-tx); background: var(--card); border: 1px solid var(--line);
}
.xpp-sa__badge--loop { right: auto; left: 8px; top: 8px; bottom: auto; padding: 5px; color: #fff; background: var(--grad); border: none; }
.xpp-sa__badge--loop svg { animation: xpp-spin 4s linear infinite; }
.xpp-sa__badge--live i { width: 7px; height: 7px; border-radius: 50%; background: #2EBD85; box-shadow: 0 0 0 3px rgba(46, 189, 133, .22); }
/* Mini-fenêtre : blocs pleins = fonctions livrées, pointillés = à venir. */
.xpp-mw { width: 118px; border-radius: 8px; overflow: hidden; background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 14px 22px -16px rgba(40, 20, 70, .8); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.xpp-tl__step:hover .xpp-mw, .xpp-tl__step:hover .xpp-doc, .xpp-tl__step:hover .xpp-code, .xpp-tl__step:hover .xpp-list { transform: translateY(-3px) scale(1.04); }
.xpp-mw__bar { height: 11px; display: flex; align-items: center; gap: 3px; padding: 0 6px; background: var(--chip-bg); }
.xpp-mw__bar i { width: 4px; height: 4px; border-radius: 50%; background: var(--eyebrow); opacity: .7; }
.xpp-mw__body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 7px; }
.xpp-mw__body i { height: 17px; border-radius: 4px; background: var(--grad); }
.xpp-mw__body i:nth-child(even) { opacity: .7; }
.xpp-mw__body i.ph { background: none; border: 1.5px dashed var(--line); box-sizing: border-box; opacity: 1; }
.xpp-mw--wire { border-style: dashed; border-color: var(--body); box-shadow: none; }
.xpp-mw--wire .xpp-mw__body i.ph { border-color: var(--body); opacity: .5; }
/* Liste de priorités, cahier des charges, code. */
.xpp-list.xpp-list, .xpp-doc, .xpp-code { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.xpp-sa .xpp-list { width: 108px; flex: none; gap: 6px; padding: 9px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 22px -16px rgba(40, 20, 70, .8); box-sizing: border-box; }
.xpp-sa .xpp-list u { position: relative; height: 6px; margin-left: 13px; border-radius: 3px; background: var(--line); }
.xpp-sa .xpp-list u::before { content: ""; position: absolute; left: -13px; top: -1px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line); box-sizing: border-box; }
.xpp-sa .xpp-list u.on { background: var(--grad); }
.xpp-sa .xpp-list u.on::before { border: none; background: var(--magenta); }
.xpp-sa .xpp-list u:nth-child(2) { width: 62%; } .xpp-sa .xpp-list u:nth-child(4) { width: 52%; } .xpp-sa .xpp-list u:nth-child(5) { width: 68%; }
.xpp-doc { position: relative; width: 62px; height: 76px; padding: 9px 8px; box-sizing: border-box; border-radius: 6px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 22px -14px rgba(40, 20, 70, .8); display: flex; flex-direction: column; gap: 5px; }
.xpp-doc b { height: 7px; width: 70%; border-radius: 3px; background: var(--grad); }
.xpp-doc u { height: 4px; border-radius: 2px; background: var(--line); }
.xpp-doc u:nth-of-type(2) { width: 82%; } .xpp-doc u:nth-of-type(4) { width: 60%; }
.xpp-doc__ok { position: absolute; right: -9px; bottom: -8px; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--grad); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 14px -6px rgba(169, 57, 139, .9); }
.xpp-code { width: 118px; padding: 10px 10px 11px; box-sizing: border-box; border-radius: 8px; background: #1F1530; border: 1px solid #3A2A52; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 14px 22px -14px rgba(40, 20, 70, .9); }
.xpp-code u { height: 5px; border-radius: 3px; background: #6E5A8C; }
.xpp-code u.a { margin-left: 12px; background: #D98BC4; } .xpp-code u.b { margin-left: 24px; background: #B9A3E8; }
@keyframes xpp-type { 0%, 15% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
.xpp-code u:last-child { transform-origin: left; animation: xpp-type 2.6s ease-in-out infinite alternate; }

/* Encart sur le rôle de l'IA. */
.xpp-ai {
    margin-top: 28px; display: flex; flex-direction: column; gap: 22px; padding: 30px 34px; border-radius: 24px;
    background: var(--bg2); border: 1px dashed color-mix(in srgb, var(--link) 40%, var(--line));
}
.xpp-ai__head { display: flex; gap: 18px; align-items: center; }
.xpp-ai h3 { font-family: var(--font-title); font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.xpp-ai p { font-size: 16px; line-height: 1.6; color: var(--body); }
.xpp-ai__head p { margin-top: 4px; }
.xpp-ai__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.xpp-ai__col { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.xpp-ai__col--own { border: 1.5px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; }
.xpp-ai__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.xpp-ai__col p { font-size: 15px; }

/* Timeline : 4 étapes sur une ligne qui se remplit à l'apparition. */
.xpp-tl { position: relative; }
.xpp-tl__track { position: absolute; left: 22px; right: calc(25% - 46px); top: 21px; z-index: 0; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.xpp-tl__fill { display: block; height: 100%; background: var(--grad); transform-origin: left center; transition: transform 2.2s cubic-bezier(.4, 0, .2, 1) .35s; }
.xpp-tl__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.xpp-tl__step { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.xpp-tl__node {
    position: relative; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 14px; color: #fff; background: var(--grad) border-box;
    display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 18px; font-weight: 700;
    box-shadow: 0 0 0 7px var(--card), 0 14px 26px -12px rgba(169, 57, 139, .8);
    transition: transform .5s cubic-bezier(.2, .9, .3, 1.3), opacity .4s ease;
}
.xpp-tl__label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.xpp-tl__step h4 { margin: 0; font-family: var(--font-title); font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--ink); }
.xpp-tl__step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }
.xpp-tl__out {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 13px; border-radius: 999px;
    font-size: 13px; font-weight: 700; color: var(--chip-tx); background: var(--chip-bg);
}
.xpp-tl__out svg { color: var(--link); flex-shrink: 0; }
/* Avant l'apparition : ligne vide et pastilles en retrait, puis elles s'allument une à une. */
.xpp-tl__step:nth-child(1) .xpp-tl__node { transition-delay: .35s; }
.xpp-tl__step:nth-child(2) .xpp-tl__node { transition-delay: .95s; }
.xpp-tl__step:nth-child(3) .xpp-tl__node { transition-delay: 1.55s; }
.xpp-tl__step:nth-child(4) .xpp-tl__node { transition-delay: 2.15s; }
@media (prefers-reduced-motion: reduce) { .xpp-tl__fill, .xpp-tl__node { transition: none; } .xpp-path__emblem svg, .xpp-sa__badge--loop svg, .xpp-code u:last-child { animation: none !important; } }
@media (max-width: 980px) {
    /* Timeline verticale : la ligne passe à gauche, les étapes s'empilent. */
    .xpp-tl__track { display: none; }
    .xpp-tl__step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: -34px; width: 3px; background: var(--grad); opacity: .55; }
    .xpp-tl__steps { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .xpp-tl__step { position: relative; padding-left: 68px; }
    .xpp-tl__node { position: absolute; left: 0; top: 0; margin: 0; }
    .xpp-sa { max-width: 340px; }
}

/* ---------- Habillage illustré (héros, situations, formats, boucle agile, chiffres) ---------- */
.xpp-hero__visual { position: relative; }
.xpp-float { position: absolute; z-index: 2; }
@keyframes xpp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.xpp-float--badge {
    left: 34px; top: -18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink);
    box-shadow: 0 18px 34px -18px rgba(86, 55, 138, .7); animation: xpp-bob 6s ease-in-out infinite;
}
.xpp-float--badge i { width: 9px; height: 9px; border-radius: 50%; background: #2EBD85; box-shadow: 0 0 0 4px rgba(46, 189, 133, .22); }
.xpp-float--phone {
    right: -26px; bottom: 34px; width: 104px; height: 196px; border-radius: 20px; padding: 18px 10px 10px; box-sizing: border-box;
    background: var(--card); border: 3px solid var(--ink); display: flex; flex-direction: column; gap: 7px;
    box-shadow: 0 30px 50px -24px rgba(40, 20, 70, .75); animation: xpp-bob 7s ease-in-out -2s infinite;
}
.xpp-phone__notch { position: absolute; top: 6px; left: 50%; width: 34px; height: 5px; margin-left: -17px; border-radius: 4px; background: var(--ink); opacity: .8; }
.xpp-float--phone b { display: block; height: 10px; width: 60%; border-radius: 4px; background: var(--grad); }
.xpp-float--phone u { display: block; height: 5px; border-radius: 3px; background: var(--line); text-decoration: none; }
.xpp-phone__card { display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 8px; background: var(--card2); border: 1px solid var(--line); }
.xpp-phone__card i { width: 14px; height: 14px; border-radius: 4px; background: var(--grad); flex-shrink: 0; opacity: .85; }
.xpp-phone__card u { flex: 1; }
.xpp-phone__btn { margin-top: auto; height: 18px; border-radius: 9px; background: var(--grad); }

/* Vignettes des situations (chapitre 01) : une petite scène par carte. */
.xpp-art {
    position: relative; height: 164px; margin: -8px -8px 6px; border-radius: 16px; overflow: hidden; box-sizing: border-box; padding: 14px;
    background-color: var(--card2); background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 16px 16px;
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 10px;
    --bad: #D6456B;
}
.xpp-art u, .xpp-art s { text-decoration: none; }
.xpp-art i { font-style: normal; }
.xpp-art__tag, .xpp-art__chip {
    padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
    color: var(--chip-tx); background: var(--card); border: 1px solid var(--line);
}
.xpp-art__tag { position: absolute; left: 10px; bottom: 10px; }
@keyframes xpp-blink { 0%, 60%, 100% { opacity: 1; } 75% { opacity: .35; } }

/* 1. Excel : une feuille avec des erreurs, et les versions du fichier qui s'empilent. */
.xpp-art--xls { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 12px; }
.xpp-sheet { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--card); box-shadow: 0 12px 20px -16px rgba(40, 20, 70, .6); }
.xpp-sheet__head, .xpp-sheet__row { display: grid; grid-template-columns: 20px repeat(3, 1fr); }
.xpp-sheet__head i, .xpp-sheet__row i { font-size: 9px; font-weight: 700; line-height: 17px; text-align: center; color: var(--body); background: var(--chip-bg); border-right: 1px solid var(--line); }
.xpp-sheet__head i { background: #1F7A4D; color: #fff; border-right-color: rgba(255, 255, 255, .25); }
.xpp-sheet__row { border-top: 1px solid var(--line); }
.xpp-sheet__row u { position: relative; height: 17px; border-right: 1px solid var(--line); }
.xpp-sheet__row u:last-child { border-right: none; }
.xpp-sheet__row u:not(.err)::after { content: ""; position: absolute; left: 6px; right: 34%; top: 6px; height: 5px; border-radius: 3px; background: var(--line); }
.xpp-sheet__row u.err { font-size: 9.5px; font-weight: 700; line-height: 17px; text-align: center; color: #fff; background: var(--bad); animation: xpp-blink 2.4s ease-in-out infinite; }
.xpp-files { position: relative; height: 62px; }
.xpp-files span {
    position: absolute; left: 0; top: 0; padding: 4px 9px 4px 22px; border-radius: 7px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
    color: var(--ink); background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 14px -12px rgba(40, 20, 70, .7);
}
.xpp-files span::before { content: ""; position: absolute; left: 7px; top: 6px; width: 9px; height: 11px; border-radius: 2px; background: #1F7A4D; }
.xpp-files span:nth-child(2) { left: 18px; top: 20px; }
.xpp-files span:nth-child(3) { left: 36px; top: 40px; }

/* 2. Logiciel standard : une fenêtre remplie de modules nommés, dont un seul sert vraiment. */
.xpp-art--std { flex-direction: column; gap: 8px; padding: 10px 12px; }
.xpp-feat { width: 100%; border-radius: 10px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 22px -16px rgba(40, 20, 70, .7); }
.xpp-feat__bar { height: 18px; display: flex; align-items: center; gap: 4px; padding: 0 8px; background: var(--chip-bg); }
.xpp-feat__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--body); opacity: .35; }
.xpp-feat__bar span { margin-left: 6px; font-size: 9.5px; font-weight: 700; color: var(--body); }
.xpp-feat__mods { position: relative; display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; height: 76px; overflow: hidden; box-sizing: content-box; }
/* La liste continue sous le bord : fondu vers le bas. */
.xpp-feat__mods::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(180deg, transparent, var(--card)); z-index: 2; }
.xpp-feat__mods span {
    position: relative; padding: 0 7px 0 18px; height: 20px; line-height: 19px; border-radius: 6px; box-sizing: border-box;
    font-size: 9.5px; font-weight: 700; white-space: nowrap; color: var(--body); background: var(--card2); border: 1px dashed var(--line); opacity: .6;
}
.xpp-feat__mods span::before { content: ""; position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 2px; background: var(--body); opacity: .3; }
@keyframes xpp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(169, 57, 139, .55); transform: scale(1); } 50% { box-shadow: 0 0 0 6px rgba(169, 57, 139, 0); transform: scale(1.1); } }
.xpp-feat__mods span.on { color: #fff; background: var(--grad); border: none; opacity: 1; z-index: 1; animation: xpp-pulse 2.4s ease-in-out infinite; }
.xpp-feat__mods span.on::before { width: 7px; height: 4px; margin-top: -4px; border-radius: 0; background: none; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); opacity: 1; }
.xpp-feat__note { font-size: 12px; font-weight: 700; color: var(--body); }
.xpp-feat__note b { color: var(--link); font-size: 14px; }

/* 3. Licences : le coût cumulé de l'abonnement monte et finit par croiser celui du sur-mesure. */
.xpp-art--lic { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; padding: 12px 14px 18px; }
.xpp-lic__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xpp-lic__users { display: flex; align-items: center; }
@media (max-width: 400px) { .xpp-lic__top .xpp-art__chip { font-size: 9.5px; padding: 4px 7px; } }
.xpp-lic__users i { width: 22px; height: 22px; margin-right: -7px; border-radius: 50%; background: var(--grad); border: 2px solid var(--card2); box-sizing: border-box; position: relative; overflow: hidden; }
.xpp-lic__users i::before { content: ""; position: absolute; left: 50%; top: 3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.xpp-lic__users i::after { content: ""; position: absolute; left: 50%; top: 12px; width: 14px; height: 11px; margin-left: -7px; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.xpp-lic__users b { margin-left: 12px; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.xpp-lic__plot { position: relative; flex: 1; min-height: 0; }
.xpp-lic__chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xpp-lic__chart * { vector-effect: non-scaling-stroke; }
.xpp-lic__axis { fill: none; stroke: var(--line); stroke-width: 1.5; }
.xpp-lic__grid { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; opacity: .8; }
.xpp-lic__under { fill: url(#xpp-lic-fill); stroke: none; }
.xpp-lic__custom { fill: none; stroke: url(#xpp-lic-custom); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .xpp-lic__custom { stroke: #B9A3E8; }
.xpp-lic__sub { fill: none; stroke: url(#xpp-lic-sub); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 5px rgba(214, 69, 107, .35)); }
.xpp-lic__over { fill: var(--bad); stroke: none; opacity: .2; animation: xpp-over 5s ease-in-out infinite; }
.xpp-lic__gap { fill: none; stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 2 3; }
@keyframes xpp-over { 0%, 100% { opacity: .12; } 50% { opacity: .3; } }
@keyframes xpp-ring { 0%, 20% { transform: scale(1); opacity: 0; } 26% { opacity: .9; } 60%, 100% { transform: scale(3.2); opacity: 0; } }
.xpp-lic__dot, .xpp-lic__end { position: absolute; border-radius: 50%; box-sizing: border-box; }
.xpp-lic__dot { left: 70.83%; top: 51.04%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--card); border: 3px solid var(--bad); }
.xpp-lic__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--bad); animation: xpp-ring 5s ease-out infinite; }
.xpp-lic__end { left: 96.67%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 2px solid var(--card2); }
.xpp-lic__end--sub { top: 8.33%; background: var(--bad); }
.xpp-lic__end--custom { top: 48.44%; background: #B14A9A; }
.xpp-lic__lab { position: absolute; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.xpp-lic__lab--custom { left: 18px; top: 78px; color: var(--link); }
.xpp-lic__lab--sub { left: 18px; top: 106px; color: var(--bad); }
.xpp-lic__lab--gap { right: 50px; top: 42px; padding: 2px 8px; border-radius: 999px; font-size: 9.5px; color: #fff; background: var(--bad); box-shadow: 0 6px 12px -6px rgba(214, 69, 107, .9); }
.xpp-lic__lab--y1, .xpp-lic__lab--y5 { bottom: 4px; font-size: 9.5px; color: var(--body); opacity: .8; }
.xpp-lic__lab--y1 { left: 18px; } .xpp-lic__lab--y5 { right: 18px; }

/* 4. Outils qui ne communiquent pas : la même information ressaisie dans trois logiciels. */
.xpp-art--link { gap: 0; align-items: flex-start; padding-top: 18px; }
.xpp-app { flex: 1; min-width: 0; border-radius: 9px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 20px -16px rgba(40, 20, 70, .7); display: flex; flex-direction: column; gap: 5px; padding-bottom: 8px; }
.xpp-app b { padding: 4px 7px; font-size: 10px; font-weight: 700; color: #fff; background: var(--grad); }
.xpp-app span { margin: 2px 6px 0; padding: 3px 5px; border-radius: 4px; font-size: 9.5px; font-weight: 700; white-space: nowrap; overflow: hidden; color: var(--ink); background: var(--chip-bg); }
.xpp-app:last-of-type span { color: #fff; background: var(--bad); animation: xpp-blink 2.4s ease-in-out infinite; }
.xpp-app u { margin: 0 6px; height: 5px; width: 55%; border-radius: 3px; background: var(--line); }
.xpp-art--link s { position: relative; flex: 0 0 22px; align-self: flex-start; margin-top: 32px; height: 0; border-top: 2px dashed var(--bad); }
.xpp-art--link s::after { content: "✕"; position: absolute; left: 50%; top: -9px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 8.5px; font-weight: 700; line-height: 15px; text-align: center; }

/* 5. Logiciel vieilli : une fenêtre d'un autre âge, et ce qu'elle ne sait pas faire. */
.xpp-art--old { justify-content: space-between; gap: 12px; }
.xpp-art__win { flex: 1; max-width: 170px; border-radius: 3px; background: #D9D5CB; border: 2px solid #8C887E; padding: 24px 8px 9px; position: relative; display: flex; flex-direction: column; gap: 6px; filter: saturate(.6); box-shadow: 4px 4px 0 rgba(0, 0, 0, .12); }
.xpp-art__win span { position: absolute; left: 0; right: 0; top: 0; height: 17px; padding: 0 6px; background: #5B6B93; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; }
.xpp-art__win em { position: absolute; right: 5px; top: 0; font-style: normal; font-size: 8px; line-height: 17px; color: #fff; letter-spacing: 2px; }
.xpp-art__win i { height: 9px; background: #fff; border: 1px solid #A8A498; }
.xpp-art__win i:nth-of-type(2) { width: 70%; } .xpp-art__win i:nth-of-type(3) { width: 85%; }
.xpp-old__no { display: flex; flex-direction: column; gap: 6px; }
.xpp-old__no span { position: relative; padding: 4px 9px 4px 24px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--body); background: var(--card); border: 1px solid var(--line); text-decoration: line-through; text-decoration-color: var(--bad); }
.xpp-old__no span::before { content: "✕"; position: absolute; left: 6px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 8px; line-height: 13px; text-align: center; }

/* 6. Idée à commercialiser : une idée, un produit à votre nom, des clients. */
.xpp-art--idea { gap: 8px; }
.xpp-art__bulb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--link); background: var(--card); border: 2px dashed color-mix(in srgb, var(--link) 55%, transparent); }
.xpp-art--idea s { position: relative; flex: 0 1 30px; min-width: 16px; height: 3px; border-radius: 3px; background: var(--grad); }
.xpp-art--idea s::after { content: ""; position: absolute; right: -2px; top: -3px; width: 9px; height: 9px; border-top: 3px solid var(--magenta); border-right: 3px solid var(--magenta); transform: rotate(45deg); box-sizing: border-box; }
.xpp-prod { width: 96px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; box-shadow: 0 16px 26px -14px rgba(169, 57, 139, .75); animation: xpp-bob 5s ease-in-out infinite; }
.xpp-prod b { padding: 5px 8px; font-size: 10px; font-weight: 700; color: #fff; background: var(--grad); }
.xpp-prod u { margin: 0 8px; height: 6px; border-radius: 3px; background: var(--line); }
.xpp-prod u:last-child { width: 50%; }
.xpp-clients { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 62px; flex-shrink: 0; }
.xpp-clients i { width: 17px; height: 17px; border-radius: 50%; background: var(--grad); opacity: .85; }
.xpp-clients span { width: 100%; text-align: center; font-size: 10px; font-weight: 700; color: var(--body); margin-top: 2px; }
.xpp-sign { padding: 22px 22px 26px; }
.xpp-sign h3 { margin-top: 8px; }

/* Appareils des formats (chapitre 02). */
.xpp-dev {
    position: relative; height: 150px; margin: -10px -10px 2px; border-radius: 18px; overflow: hidden;
    background-color: var(--card2); background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 16px 16px;
    border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.xpp-dev__frame { background: var(--card); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 22px 36px -22px rgba(40, 20, 70, .7); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.xpp-format:hover .xpp-dev__frame { transform: translateY(-4px) scale(1.03); }
.xpp-dev__bar { height: 16px; display: flex; align-items: center; gap: 4px; padding: 0 7px; background: var(--chip-bg); }
.xpp-dev__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--eyebrow); opacity: .7; }
.xpp-dev__bar span { flex: 1; height: 7px; margin-left: 6px; border-radius: 4px; background: var(--card); }
.xpp-dev__body { display: flex; gap: 7px; padding: 8px; height: 100%; box-sizing: border-box; }
.xpp-dev__body b { width: 26%; border-radius: 5px; background: var(--grad); }
.xpp-dev__body div { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.xpp-dev u { display: block; text-decoration: none; height: 8px; border-radius: 4px; background: var(--line); }
.xpp-dev__body u:first-child { height: 22px; background: color-mix(in srgb, var(--link) 22%, var(--card2)); }
.xpp-dev--web .xpp-dev__frame { width: 190px; height: 104px; }
.xpp-dev--desk .xpp-dev__frame { width: 170px; height: 96px; border-width: 5px; border-radius: 8px; }
.xpp-dev__foot { width: 64px; height: 12px; margin-top: 0; background: var(--ink); clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%); }
.xpp-dev--mob { flex-direction: row; align-items: flex-end; gap: 0; padding-bottom: 20px; box-sizing: border-box; }
.xpp-dev__frame--tab { width: 150px; height: 104px; border-width: 4px; border-radius: 12px; }
.xpp-dev__frame--phone { width: 56px; height: 104px; margin-left: -22px; border-width: 3px; border-radius: 12px; padding: 12px 6px 6px; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px; position: relative; z-index: 1; }
.xpp-dev__frame--phone u { height: 6px; }
.xpp-dev__frame--phone u:first-child { height: 14px; background: var(--grad); }
.xpp-dev__frame--phone em { margin-top: auto; height: 12px; border-radius: 6px; background: var(--grad); }

/* Chemin agile : l'étape « Itérations » tourne en boucle. */
@keyframes xpp-spin { to { transform: rotate(360deg); } }
.xpp-tl__node--loop::after {
    content: ""; position: absolute; inset: -9px; border-radius: 50%;
    border: 2.5px dashed color-mix(in srgb, var(--magenta) 70%, transparent); border-right-color: transparent;
    animation: xpp-spin 5s linear infinite;
}

/* Chiffres clés sous les engagements. */
.xpp-stats { margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .12); gap: 56px; }
.xpp-stats .stats__item { padding-right: 56px; }
.xpp-stats dt { font-size: 52px; }
.xpp-stats dd { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .xpp-float, .xpp-prod, .xpp-feat__mods span.on, .xpp-lic__over, .xpp-lic__dot::after, .xpp-sheet__row u.err, .xpp-app:last-of-type span, .xpp-tl__node--loop::after { animation: none; } }
@media (max-width: 1240px) { .xpp-float--phone { right: -8px; } }
@media (max-width: 760px) {
    .xpp-float--phone { width: 70px; height: 132px; right: 4px; bottom: 74px; padding: 14px 7px 7px; border-radius: 15px; gap: 5px; }
    .xpp-phone__card:last-of-type { display: none; }
    .xpp-float--badge { left: 16px; top: -15px; font-size: 12px; padding: 7px 11px; }
    .xpp-stats { gap: 20px; margin-top: 40px; padding-top: 30px; }
    .xpp-stats .stats__item { padding-right: 0; }
    .xpp-stats dt { font-size: 34px; }
}

/* ---------- Sélecteur de chemin interactif (radios masqués + :checked, sans JavaScript) ---------- */
.xpp-choose { position: relative; }
.xpp-choose__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.xpp-choose__hint { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--body); }
.xpp-choose__hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); animation: xpp-blink 2s ease-in-out infinite; }
.xpp-choose__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.xpp-opt {
    position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 22px; cursor: pointer;
    background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.xpp-opt:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--link) 45%, var(--line)); box-shadow: 0 22px 40px -30px rgba(86, 55, 138, .7); }
.xpp-opt .xpp-path__emblem { width: 54px; height: 54px; border-radius: 16px; color: var(--link); background: var(--chip-bg); box-shadow: none; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.xpp-opt .xpp-path__emblem svg { animation: none; }
.xpp-opt__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.xpp-opt__kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.xpp-opt__title { font-family: var(--font-title); font-size: 23px; line-height: 1.2; font-weight: 700; }
.xpp-opt__chip { margin-top: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--chip-tx); background: var(--chip-bg); }
.xpp-opt__radio { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; position: relative; transition: border-color .25s ease, background .25s ease; }
.xpp-opt__radio::after { content: ""; position: absolute; left: 7px; top: 6px; width: 9px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
/* Chemin sélectionné : bordure en dégradé, emblème plein, coche, et une pointe vers le déroulé. */
#xpp-path-1:checked ~ .xpp-choose__tabs .xpp-opt--1,
#xpp-path-2:checked ~ .xpp-choose__tabs .xpp-opt--2 {
    border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box;
    box-shadow: 0 26px 46px -30px rgba(169, 57, 139, .75);
}
#xpp-path-1:checked ~ .xpp-choose__tabs .xpp-opt--1 .xpp-path__emblem,
#xpp-path-2:checked ~ .xpp-choose__tabs .xpp-opt--2 .xpp-path__emblem { color: #fff; background: var(--grad); box-shadow: 0 14px 24px -12px rgba(169, 57, 139, .8); }
#xpp-path-1:checked ~ .xpp-choose__tabs .xpp-opt--1 .xpp-path__emblem svg { animation: xpp-spin 9s linear infinite; }
#xpp-path-1:checked ~ .xpp-choose__tabs .xpp-opt--1 .xpp-opt__radio,
#xpp-path-2:checked ~ .xpp-choose__tabs .xpp-opt--2 .xpp-opt__radio { border-color: transparent; background: var(--grad); }
#xpp-path-1:checked ~ .xpp-choose__tabs .xpp-opt--1 .xpp-opt__radio::after,
#xpp-path-2:checked ~ .xpp-choose__tabs .xpp-opt--2 .xpp-opt__radio::after { transform: rotate(-45deg) scale(1); }
#xpp-path-1:checked ~ .xpp-choose__tabs .xpp-opt--1::after,
#xpp-path-2:checked ~ .xpp-choose__tabs .xpp-opt--2::after {
    content: ""; position: absolute; left: 50%; bottom: -12px; width: 20px; height: 20px; margin-left: -10px; border-radius: 0 0 5px 0;
    background: var(--card); border-right: 1.5px solid var(--magenta); border-bottom: 1.5px solid var(--magenta); transform: rotate(45deg);
}
#xpp-path-1:focus-visible ~ .xpp-choose__tabs .xpp-opt--1,
#xpp-path-2:focus-visible ~ .xpp-choose__tabs .xpp-opt--2 { outline: 3px solid color-mix(in srgb, var(--link) 60%, transparent); outline-offset: 3px; }
/* Déroulé : un seul panneau visible ; son apparition rejoue les animations. */
.xpp-panel { display: none; margin-top: 26px; padding: 34px 36px 36px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 34px 60px -44px rgba(86, 55, 138, .7); }
#xpp-path-1:checked ~ .xpp-panel--1, #xpp-path-2:checked ~ .xpp-panel--2 { display: block; animation: xpp-panel-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes xpp-panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.xpp-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 32px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.xpp-panel__head h3 { font-family: var(--font-title); font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.xpp-panel__head p { font-size: 16px; line-height: 1.6; color: var(--body); max-width: 640px; }
.xpp-panel__head .xpp-panel__ideal { flex-shrink: 0; max-width: 250px; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; background: var(--card2); border: 1px solid var(--line); }
.xpp-panel__ideal strong { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 2px; }
/* Timeline animée par images-clés : rejouée à chaque sélection, en attente tant que le bloc n'est pas apparu. */
@keyframes xpp-fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes xpp-node-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes xpp-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.xpp-panel .xpp-tl__fill { transition: none; animation: xpp-fill-x 1.8s cubic-bezier(.4, 0, .2, 1) .25s both; }
.xpp-panel .xpp-tl__node { transition: none; animation: xpp-node-in .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.xpp-panel .xpp-tl__step > :not(.xpp-tl__node) { animation: xpp-step-in .55s ease both; }
.xpp-panel .xpp-tl__step:nth-child(1) > * { animation-delay: .25s; }
.xpp-panel .xpp-tl__step:nth-child(2) > * { animation-delay: .75s; }
.xpp-panel .xpp-tl__step:nth-child(3) > * { animation-delay: 1.25s; }
.xpp-panel .xpp-tl__step:nth-child(4) > * { animation-delay: 1.75s; }
.reveal-ready .xpp-choose:not(.is-in) .xpp-panel * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .xpp-panel, .xpp-panel * { animation: none !important; } }
@media (max-width: 980px) {
    .xpp-panel__head { flex-direction: column; gap: 18px; }
    .xpp-panel__head .xpp-panel__ideal { max-width: none; }
}
@media (max-width: 760px) {
    .xpp-choose__tabs { gap: 10px; }
    .xpp-opt { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 14px; border-radius: 18px; }
    .xpp-opt .xpp-path__emblem { width: 42px; height: 42px; border-radius: 13px; }
    .xpp-opt .xpp-path__emblem svg { width: 21px; height: 21px; }
    .xpp-opt__title { font-size: 17px; }
    .xpp-opt__kicker { font-size: 11px; }
    .xpp-opt__chip { font-size: 10.5px; padding: 3px 8px; }
    .xpp-opt__radio { position: absolute; right: 12px; top: 14px; width: 22px; height: 22px; }
    .xpp-opt__radio::after { left: 5px; top: 4px; }
    .xpp-panel { margin-top: 22px; padding: 24px 20px 26px; border-radius: 22px; }
    .xpp-panel__head { margin-bottom: 26px; padding-bottom: 22px; }
    .xpp-panel__head h3 { font-size: 21px; }
    .xpp-choose__hint { font-size: 11.5px; }
}

/* ---------- Finitions globales : progression de lecture, sommaire, numéros de chapitre, cartes de verre ---------- */
.xpp-progress { display: none; }
@supports (animation-timeline: scroll()) {
    .xpp-progress {
        display: block; position: fixed; left: 0; top: 0; z-index: 1200; width: 100%; height: 3px; pointer-events: none;
        background: var(--grad); transform-origin: left center; transform: scaleX(0);
        animation: xpp-progress linear both; animation-timeline: scroll(root);
    }
}
@keyframes xpp-progress { to { transform: scaleX(1); } }

.xpp-toc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--line); }
.xpp-toc__label { margin-right: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--body); }
.xpp-toc a {
    display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink);
    background: color-mix(in srgb, var(--card) 78%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.xpp-toc a b { min-width: 28px; padding: 3px 0; border-radius: 999px; text-align: center; font-family: var(--font-title); font-size: 12px; color: #fff; background: var(--grad); }
.xpp-toc a:hover { transform: translateY(-3px); color: var(--link); border-color: color-mix(in srgb, var(--link) 45%, var(--line)); box-shadow: 0 16px 28px -18px rgba(86, 55, 138, .7); }
.xpp-hero { padding-bottom: 56px; }

.xpp-chapter > .container { position: relative; }
.xpp-chapter [id], .xpp-chapter { scroll-margin-top: 96px; }
.xpp-ghost {
    position: absolute; right: 0; top: -46px; z-index: 0; font-family: var(--font-title); font-size: 210px; line-height: 1; font-weight: 700; letter-spacing: -.04em;
    color: color-mix(in srgb, var(--link) 8%, transparent); pointer-events: none; user-select: none;
}
.band .xpp-ghost { color: rgba(255, 255, 255, .06); }
.xpp-chapter > .container > :not(.xpp-ghost) { position: relative; z-index: 1; }
.xpp-chapter--glow { background-image: radial-gradient(760px 380px at 100% 0%, color-mix(in srgb, var(--magenta) 8%, transparent), transparent 70%); }
.xpp-more { display: flex; justify-content: center; margin-top: 44px; }

/* Engagements : cartes de verre sur la bande sombre. */
.xpp-benefits { gap: 20px; }
.xpp-benefits li {
    padding: 24px; border-radius: 20px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
    transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.xpp-benefits li:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .08); border-color: rgba(217, 139, 196, .45); box-shadow: 0 28px 50px -34px rgba(217, 139, 196, .8); }
.xpp-benefits li:hover .xpp-check { transform: scale(1.12) rotate(-6deg); }
.xpp-check { transition: transform .3s cubic-bezier(.2, .9, .3, 1.4); }

/* Survols un peu plus vivants sur les cartes claires. */
.xpp-sign:hover .xpp-art { border-color: color-mix(in srgb, var(--link) 30%, var(--line)); }
.xpp-art, .xpp-dev { transition: border-color .3s ease; }
@media (max-width: 1240px) { .xpp-ghost { font-size: 150px; top: -30px; } }
@media (max-width: 980px) { .xpp-ghost { display: none; } }
@media (max-width: 760px) {
    .xpp-toc { gap: 8px; padding-top: 22px; }
    .xpp-toc__label { width: 100%; margin: 0 0 2px; }
    .xpp-toc a { font-size: 13px; padding: 7px 13px 7px 8px; }
    .xpp-benefits { gap: 14px; }
    .xpp-benefits li { padding: 20px 18px; }
    .xpp-more { margin-top: 30px; }
    .xpp-more .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .xpp-progress { animation: none; display: none; } }

/* ---------- Gabarit commun : déroulé unique (sans sélecteur) et grille de deux réalisations ---------- */
.xpp-panel--solo { display: block; margin-top: 0; animation: xpp-panel-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.xpp-panel__ideal strong { display: block; }
.xpp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .xpp-grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Page Industrie : vignettes et illustrations (classes xpi-*) ---------- */
.xpi-cab, .xpi-box, .xpi-clip { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
/* Armoire électrique vue de face : coffret en tôle sur socle, porte avec poignée, pictogramme de danger,
   voyants, interrupteur-sectionneur jaune et rouge, ouïes d'aération. */
.xpi-cab {
    --steel: #E4E1DA; --steel-line: #B9B5AB;
    position: relative; width: 64px; height: 88px; flex-shrink: 0; box-sizing: border-box; padding: 7px 14px 8px 8px; margin-bottom: 7px;
    border-radius: 4px; background: linear-gradient(100deg, #F1EFE9 0%, var(--steel) 55%, #D3CFC6 100%); border: 2px solid var(--ink);
    display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 16px 24px -16px rgba(40, 20, 70, .8);
}
[data-theme="dark"] .xpi-cab { --steel: #4A4556; --steel-line: #6A6478; background: linear-gradient(100deg, #5A5468 0%, var(--steel) 55%, #3B3746 100%); }
/* feuillure de la porte */
.xpi-cab::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--steel-line); border-radius: 2px; pointer-events: none; }
/* socle */
.xpi-cab::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -9px; height: 7px; background: var(--ink); border-radius: 0 0 2px 2px; opacity: .9; }
.xpi-cab i { display: block; font-style: normal; }
.xpi-cab__warn { width: 19px; height: 17px; flex-shrink: 0; }
.xpi-cab__leds { display: flex; gap: 4px; }
.xpi-cab__leds i { width: 7px; height: 7px; border-radius: 50%; background: #2EBD85; border: 1px solid rgba(0, 0, 0, .35); box-sizing: border-box; }
.xpi-cab__leds i:nth-child(2) { background: #E0A030; animation: xpp-blink 1.6s ease-in-out infinite; }
.xpi-cab__leds i:nth-child(3) { background: #D6456B; }
/* interrupteur-sectionneur : platine jaune, manette rouge */
.xpi-cab__sw { width: 22px; height: 22px; flex-shrink: 0; border-radius: 3px; background: #F2C230; border: 1.5px solid #1D1626; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.xpi-cab__sw i { width: 12px; height: 12px; border-radius: 50%; background: #D32F3C; border: 1.5px solid #1D1626; box-sizing: border-box; position: relative; }
.xpi-cab__sw i::after { content: ""; position: absolute; left: 50%; top: -4px; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 1.5px; background: #1D1626; transform: rotate(35deg); transform-origin: 50% 85%; }
/* poignée de porte */
.xpi-cab__handle { position: absolute; right: 5px; top: 50%; width: 4px; height: 20px; margin-top: -10px; border-radius: 2px; background: var(--ink); }
.xpi-cab__handle::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; border: 1px solid var(--ink); box-sizing: border-box; }
/* ouïes d'aération */
.xpi-cab__vent { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.xpi-cab__vent i { height: 2px; border-radius: 1px; background: var(--steel-line); }
.xpp-tl__step:hover .xpi-cab, .xpp-format:hover .xpi-cab, .xpp-format:hover .xpi-box { transform: translateY(-3px) scale(1.04); }

/* 1. Relevés à la main : une feuille de relevé, puis la ressaisie au clavier. */
.xpi-art--paper { gap: 12px; }
.xpi-art--paper s { position: relative; width: 26px; height: 3px; border-radius: 3px; background: var(--grad); flex-shrink: 0; }
.xpi-art--paper s::after { content: ""; position: absolute; right: -2px; top: -3px; width: 9px; height: 9px; border-top: 3px solid var(--magenta); border-right: 3px solid var(--magenta); transform: rotate(45deg); box-sizing: border-box; }
.xpi-clip { position: relative; width: 108px; padding: 16px 10px 10px; box-sizing: border-box; border-radius: 6px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 22px -14px rgba(40, 20, 70, .8); display: flex; flex-direction: column; gap: 8px; transform: rotate(-3deg); }
.xpi-clip > i { position: absolute; left: 50%; top: -6px; width: 34px; height: 11px; margin-left: -17px; border-radius: 4px; background: var(--body); opacity: .7; }
.xpi-clip span { display: flex; align-items: flex-end; gap: 6px; }
.xpi-clip b { font-size: 9px; font-weight: 700; color: var(--body); }
.xpi-clip u { flex: 1; height: 7px; border-bottom: 2px solid var(--violet); border-radius: 0 0 60% 40% / 0 0 100% 100%; opacity: .75; }
[data-theme="dark"] .xpi-clip u { border-bottom-color: #B9A3E8; }
.xpi-clip span:nth-child(3) u { margin-right: 14px; } .xpi-clip span:nth-child(4) u { margin-right: 6px; }
.xpi-keys { width: 74px; flex-shrink: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 7px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.xpi-keys i { height: 12px; border-radius: 3px; background: var(--chip-bg); border: 1px solid var(--line); box-sizing: border-box; }
@keyframes xpi-key { 0%, 100% { background: var(--chip-bg); } 50% { background: var(--magenta); } }
.xpi-keys i:nth-child(2) { animation: xpi-key 1.8s steps(1) infinite; } .xpi-keys i:nth-child(7) { animation: xpi-key 1.8s steps(1) -.6s infinite; } .xpi-keys i:nth-child(5) { animation: xpi-key 1.8s steps(1) -1.2s infinite; }
/* 2. Atelier et bureau qui ne communiquent pas. */
.xpi-art--gap .xpp-app:last-of-type span { color: var(--ink); background: var(--chip-bg); animation: none; }
.xpi-art--gap s { flex: 0 0 56px; }
.xpi-art--gap .xpp-app { flex: 0 1 110px; }
.xpi-art--gap { justify-content: center; }
/* 3. Dérive vue trop tard : la courbe franchit le seuil bien avant l'alerte. */
.xpi-art--late { flex-direction: column; align-items: stretch; padding: 14px 14px 30px; }
.xpi-late__limit { fill: none; stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 4 4; }
.xpi-late__zone { fill: var(--bad); opacity: .16; animation: xpp-over 5s ease-in-out infinite; }
.xpi-late__curve { fill: none; stroke: var(--violet); stroke-width: 3; stroke-linecap: round; }
[data-theme="dark"] .xpi-late__curve { stroke: #B9A3E8; }
.xpi-late__dot { position: absolute; left: 56%; top: 35.4%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; box-sizing: border-box; background: var(--card); border: 3px solid var(--bad); }
.xpi-late__bell { position: absolute; left: 96.67%; top: 6.2%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; animation: xpp-pulse 2.4s ease-in-out infinite; }
.xpi-late__lab { left: 18px; top: 34px; color: var(--bad); }
/* 4. Contrôle à l'œil : une loupe passe sur les pièces, un défaut échappe. */
.xpi-art--eye { flex-direction: column; }
.xpi-parts { display: flex; gap: 9px; }
.xpi-parts i { position: relative; display: block; width: 30px; height: 30px; border-radius: 8px; background: var(--card); border: 2px solid var(--line); box-sizing: border-box; box-shadow: 0 8px 14px -12px rgba(40, 20, 70, .8); }
.xpi-parts i::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid var(--line); }
.xpi-parts i.ko::after { content: ""; position: absolute; right: 4px; bottom: 5px; width: 9px; height: 3px; border-radius: 2px; background: var(--bad); transform: rotate(-35deg); }
@keyframes xpi-scan { 0%, 100% { transform: translateX(-104px); } 50% { transform: translateX(104px); } }
.xpi-lens { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -31px 0 0 -23px; border-radius: 50%; border: 3px solid var(--link); box-sizing: border-box; background: color-mix(in srgb, var(--link) 9%, transparent); animation: xpi-scan 5s ease-in-out infinite; }
.xpi-lens::after { content: ""; position: absolute; right: -11px; bottom: -9px; width: 14px; height: 4px; border-radius: 2px; background: var(--link); transform: rotate(45deg); }
/* 5. Essais réglés à la main : des curseurs qui ne sont jamais deux fois au même endroit. */
.xpi-art--knobs { align-items: flex-start; }
.xpi-knobs { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.xpi-knobs span { display: flex; align-items: center; gap: 10px; }
.xpi-knobs b { width: 74px; flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--body); }
.xpi-knobs u { position: relative; flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.xpi-knobs u i { position: absolute; top: -5px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--grad); box-shadow: 0 6px 10px -5px rgba(169, 57, 139, .9); }
@keyframes xpi-k1 { 0%, 100% { left: 22%; } 35% { left: 61%; } 70% { left: 38%; } }
@keyframes xpi-k2 { 0%, 100% { left: 70%; } 40% { left: 30%; } 75% { left: 82%; } }
@keyframes xpi-k3 { 0%, 100% { left: 45%; } 30% { left: 18%; } 65% { left: 66%; } }
.xpi-knobs span:nth-child(1) i { animation: xpi-k1 6s ease-in-out infinite; }
.xpi-knobs span:nth-child(2) i { animation: xpi-k2 7s ease-in-out infinite; }
.xpi-knobs span:nth-child(3) i { animation: xpi-k3 5s ease-in-out infinite; }
/* 6. Procédé à automatiser : l'armoire prend la place du produit. */
.xpp-art--idea .xpi-cab { animation: xpp-bob 5s ease-in-out infinite; }

/* Illustrations des trois domaines. */
.xpi-dev--cab .xpi-cab { zoom: 1.28; }
.xpi-dev--box { flex-direction: row; gap: 0; }
.xpi-sens { display: flex; flex-direction: column; gap: 12px; }
.xpi-sens i { display: block; position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 2.5px solid var(--link); box-sizing: border-box; }
.xpi-sens i::after { content: ""; position: absolute; left: 100%; top: 50%; width: 30px; height: 0; margin-top: -1px; border-top: 2px dashed var(--eyebrow); opacity: .7; }
.xpi-box { position: relative; width: 62px; height: 84px; margin: 0 30px 0 32px; border-radius: 14px; background: var(--grad); box-shadow: 0 18px 28px -14px rgba(169, 57, 139, .85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.xpi-box span { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: xpp-blink 1.8s ease-in-out infinite; }
.xpi-box b { width: 30px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .75); }
.xpi-box u { width: 20px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .45); }
@keyframes xpi-wave { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.xpi-cloud { position: relative; width: 44px; height: 60px; }
.xpi-cloud i { position: absolute; left: 0; top: 50%; border-radius: 50%; border: 2.5px solid transparent; border-right-color: var(--magenta); animation: xpi-wave 2.4s ease-out infinite; }
.xpi-cloud i:nth-child(1) { width: 18px; height: 18px; margin: -9px 0 0 -12px; }
.xpi-cloud i:nth-child(2) { width: 36px; height: 36px; margin: -18px 0 0 -18px; animation-delay: .35s; }
.xpi-cloud i:nth-child(3) { width: 56px; height: 56px; margin: -28px 0 0 -26px; animation-delay: .7s; }
.xpi-dev--dash .xpp-dev__frame { width: 196px; height: 108px; }
.xpi-dash { display: flex; align-items: center; gap: 12px; padding: 10px 12px; height: calc(100% - 16px); box-sizing: border-box; }
.xpi-gauge { position: relative; width: 66px; height: 33px; flex-shrink: 0; overflow: hidden; }
.xpi-gauge::before { content: ""; position: absolute; left: 0; top: 0; width: 66px; height: 66px; border-radius: 50%; box-sizing: border-box; border: 9px solid var(--line); border-top-color: var(--magenta); border-left-color: var(--violet); transform: rotate(45deg); }
@keyframes xpi-needle { 0%, 100% { transform: rotate(-50deg); } 50% { transform: rotate(38deg); } }
.xpi-gauge i { position: absolute; left: 50%; bottom: 0; width: 3px; height: 25px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); transform-origin: bottom center; animation: xpi-needle 5s ease-in-out infinite; }
.xpi-bars { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 5px; }
.xpi-bars i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--grad); }
.xpi-bars i:nth-child(1) { height: 45%; opacity: .6; } .xpi-bars i:nth-child(2) { height: 70%; opacity: .75; } .xpi-bars i:nth-child(3) { height: 55%; opacity: .65; } .xpi-bars i:nth-child(4) { height: 90%; } .xpi-bars i:nth-child(5) { height: 78%; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .xpi-keys i, .xpi-lens, .xpi-knobs i, .xpi-cloud i, .xpi-gauge i, .xpi-box span, .xpi-late__bell, .xpi-late__zone, .xpi-cab__leds i { animation: none !important; } }

/* Chapitre « chemin + résultat » sur bande sombre : le panneau clair retrouve les couleurs du thème, puis trois gains. */
.band .xpp-panel { --eyebrow: var(--magenta); color: var(--ink); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); }
[data-theme="dark"] .band .xpp-panel { --eyebrow: #D98BC4; }
.band .xpp-choose { margin-bottom: 0; }
.xpp-gain-title { display: flex; align-items: center; gap: 16px; margin: 56px 0 24px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #D98BC4; }
.xpp-gain-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(217, 139, 196, .5), transparent); }
.xpp-benefits--gain li { flex-direction: column; gap: 16px; padding: 28px; }
.xpp-benefits--gain strong { font-size: 21px; }
.xpp-benefits--gain .icon-tile { transition: transform .3s cubic-bezier(.2, .9, .3, 1.4); }
.xpp-benefits--gain li:hover .icon-tile { transform: scale(1.1) rotate(-6deg); }
@media (max-width: 1100px) { .xpp-benefits--gain { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .xpp-gain-title { margin: 40px 0 18px; } .xpp-benefits--gain li { padding: 22px 20px; } }

/* ---------- Page Industrie, finitions : alerte flottante, frise de la chaîne, études de cas ---------- */
.xpi-alert {
    right: 26px; top: -24px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--line); box-shadow: 0 22px 38px -20px rgba(86, 55, 138, .75); animation: xpp-bob 7s ease-in-out -3s infinite;
}
.xpi-alert > span { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; background: #D6456B; color: #fff; font-size: 15px; font-weight: 700; line-height: 28px; text-align: center; animation: xpp-pulse 2.4s ease-in-out infinite; }
.xpi-alert b { display: block; font-size: 13px; line-height: 1.2; color: var(--ink); }
.xpi-alert em { display: block; font-style: normal; font-size: 11px; color: var(--body); }
.xpi-run { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); flex-shrink: 0; }
.xpi-run i { width: 8px; height: 8px; border-radius: 50%; background: #2EBD85; box-shadow: 0 0 0 3px rgba(46, 189, 133, .22); animation: xpp-blink 1.8s ease-in-out infinite; }

.xpi-chain { position: relative; list-style: none; margin: 0 0 36px; padding: 26px 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.xpi-chain::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 51px; height: 2px; background: repeating-linear-gradient(90deg, var(--eyebrow) 0 6px, transparent 6px 13px); opacity: .55; }
@keyframes xpi-flow { 0% { left: 12.5%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 87.5%; opacity: 0; } }
.xpi-chain::after { content: ""; position: absolute; top: 46px; left: 12.5%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 5px rgba(169, 57, 139, .2); animation: xpi-flow 5s cubic-bezier(.5, 0, .5, 1) infinite; }
.xpi-chain li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.xpi-chain__node { width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--link); background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 0 0 6px var(--card); transition: transform .3s cubic-bezier(.2, .9, .3, 1.4), color .3s ease, background .3s ease; }
.xpi-chain li:hover .xpi-chain__node { transform: scale(1.1); color: #fff; background: var(--grad) border-box; }
.xpi-chain b { font-family: var(--font-title); font-size: 18px; color: var(--ink); }
.xpi-chain em { font-style: normal; font-size: 13.5px; color: var(--body); }

.xpi-cases { display: flex; flex-direction: column; gap: 24px; }
.xpi-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: 26px; overflow: hidden; background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.xpi-case--alt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.xpi-case--alt .xpi-case__media { order: 2; }
.xpi-case:hover { color: var(--ink); transform: translateY(-4px); border-color: color-mix(in srgb, var(--link) 35%, var(--line)); box-shadow: 0 34px 60px -40px rgba(86, 55, 138, .7); }
.xpi-case__media { height: auto; min-height: 250px; }
.xpi-case__body { padding: 36px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.xpi-case__body h3 { font-family: var(--font-title); font-size: 30px; line-height: 1.15; font-weight: 700; }
.xpi-case__body p { font-size: 16px; line-height: 1.6; color: var(--body); }
.xpi-case__facts { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.xpi-case__facts li { display: flex; flex-direction: column; min-width: 92px; padding: 10px 14px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--body); }
.xpi-case__facts b { font-family: var(--font-title); font-size: 26px; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xpi-case .link-arrow { margin-top: 4px; }
@media (max-width: 980px) {
    .xpi-case, .xpi-case--alt { grid-template-columns: minmax(0, 1fr); }
    .xpi-case--alt .xpi-case__media { order: 0; }
    .xpi-case__media { min-height: 180px; }
}
@media (max-width: 760px) {
    .xpi-alert { right: 8px; top: -30px; padding: 7px 10px 7px 7px; }
    .xpi-alert b { font-size: 12px; }
    .xpp-hero__visual { margin-top: 16px; }
    .xpi-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding: 22px 16px; margin-bottom: 26px; }
    .xpi-chain::before, .xpi-chain::after { display: none; }
    .xpi-case__body { padding: 24px 22px 26px; }
    .xpi-case__body h3 { font-size: 24px; }
    .xpi-case__facts li { min-width: 0; flex: 1 1 40%; }
}
@media (prefers-reduced-motion: reduce) { .xpi-alert, .xpi-alert > span, .xpi-chain::after, .xpi-run i { animation: none !important; } }

/* Étape « Conception » : un schéma électrique posé devant la maquette d'écran. */
.xpi-plan { position: relative; width: 176px; height: 80px; flex-shrink: 0; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.xpi-plan .xpp-mw { position: absolute; right: 0; top: 10px; width: 104px; }
.xpi-plan .xpp-mw__body i { height: 13px; }
.xpi-schema { position: absolute; left: 0; top: 0; width: 98px; height: 80px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 22px -14px rgba(40, 20, 70, .8); transform: rotate(-3deg); }
.xpi-schema .w { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; opacity: .8; }
.xpi-schema .c { stroke: var(--magenta); stroke-width: 1.8; fill: color-mix(in srgb, var(--magenta) 10%, var(--card)); }
.xpi-schema .k { stroke: var(--line); stroke-width: 1.2; }
.xpi-schema text { font-family: var(--font-body, inherit); font-size: 8px; font-weight: 700; fill: var(--magenta); text-anchor: middle; }
.xpi-schema text.l { font-size: 6.5px; fill: var(--body); }
/* Étape « Réalisation » : armoire, colonne lumineuse et pupitre avec son logiciel. */
.xpi-build { display: flex; align-items: flex-end; gap: 12px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.xpi-build .xpi-cab { zoom: .86; margin-bottom: 8px; }
.xpi-build .xpi-tower, .xpi-build .xpi-desk { margin-bottom: 1px; }
.xpi-tower { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.xpi-tower i { display: block; width: 15px; height: 12px; margin-bottom: 2px; border-radius: 3px; border: 1.5px solid var(--ink); box-sizing: border-box; }
.xpi-tower i:nth-child(1) { background: color-mix(in srgb, #D6456B 30%, var(--card)); border-radius: 7px 7px 3px 3px; }
.xpi-tower i:nth-child(2) { background: color-mix(in srgb, #E0A030 30%, var(--card)); }
@keyframes xpi-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 189, 133, .55); } 50% { box-shadow: 0 0 0 6px rgba(46, 189, 133, 0); } }
.xpi-tower i:nth-child(3) { background: #2EBD85; animation: xpi-glow 2s ease-in-out infinite; }
.xpi-tower b { display: block; width: 5px; height: 22px; background: var(--ink); border-radius: 0 0 2px 2px; position: relative; }
.xpi-tower b::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 19px; height: 4px; margin-left: -9.5px; border-radius: 2px; background: var(--ink); }
.xpi-desk { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.xpi-desk__screen { width: 70px; height: 44px; padding: 5px; box-sizing: border-box; border-radius: 6px; background: var(--card); border: 2px solid var(--ink); display: flex; flex-direction: column; gap: 4px; }
.xpi-desk__screen u { display: block; height: 5px; width: 55%; border-radius: 3px; background: var(--grad); }
.xpi-desk__screen span { flex: 1; display: flex; align-items: flex-end; gap: 3px; }
.xpi-desk__screen span i { display: block; flex: 1; border-radius: 2px 2px 0 0; background: var(--grad); opacity: .75; }
.xpi-desk__screen span i:nth-child(1) { height: 50%; } .xpi-desk__screen span i:nth-child(2) { height: 100%; opacity: 1; } .xpi-desk__screen span i:nth-child(3) { height: 70%; }
.xpi-desk__base { width: 84px; height: 17px; margin-top: 3px; background: var(--ink); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); display: flex; align-items: center; justify-content: center; gap: 6px; }
.xpi-desk__base i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #2EBD85; }
.xpi-desk__base i:nth-child(2) { background: #D6456B; } .xpi-desk__base i:nth-child(3) { background: #E0A030; }
.xpp-tl__step:hover .xpi-plan, .xpp-tl__step:hover .xpi-build { transform: translateY(-3px) scale(1.04); }
.xpp-tl__step:hover .xpi-build .xpi-cab { transform: none; }
@media (prefers-reduced-motion: reduce) { .xpi-tower i { animation: none !important; } }

/* Résultat en miroir du constat : tableau « avant / après » sur la bande sombre. */
.xpi-shift { margin-top: 64px; }
.xpi-shift__head { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin-bottom: 28px; }
.xpi-shift__head h3 { font-family: var(--font-title); font-size: 32px; line-height: 1.15; font-weight: 700; color: #fff; }
.xpi-shift__head p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.xpi-shift__table { border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.xpi-shift__cols, .xpi-shift__table li { display: grid; grid-template-columns: minmax(0, 5fr) 44px minmax(0, 7fr); align-items: center; gap: 20px; padding: 0 28px; }
.xpi-shift__cols { padding-top: 16px; padding-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .04); }
.xpi-shift__cols span:first-child { color: rgba(255, 255, 255, .5); }
.xpi-shift__cols span:last-child { color: #D98BC4; }
.xpi-shift__table ul { list-style: none; margin: 0; padding: 0; }
.xpi-shift__table li { padding-top: 20px; padding-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, .08); transition: background .3s ease; }
.xpi-shift__table li:hover { background: rgba(255, 255, 255, .05); }
.xpi-shift__before { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; font-style: italic; color: rgba(255, 255, 255, .62); }
.xpi-shift__before::before { content: "✕"; font-style: normal; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: rgba(214, 69, 107, .2); color: #F08CA6; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; text-decoration: none; }
.xpi-shift__arrow { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: transform .3s ease, background .3s ease; }
.xpi-shift__table li:hover .xpi-shift__arrow { transform: translateX(4px); background: linear-gradient(135deg, #7B5CC4, #C9529F); }
.xpi-shift__after { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .74); }
.xpi-shift__after strong { display: block; font-family: var(--font-title); font-size: 19px; line-height: 1.3; color: #fff; }
.xpi-shift__after .xpp-check { width: 26px; height: 26px; margin-top: 0; }
.xpi-shift__team { display: flex; align-items: center; gap: 18px; margin: 24px 0 0; padding: 20px 26px; border-radius: 20px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .78); border: 1.5px solid transparent; background: linear-gradient(var(--band), var(--band)) padding-box, linear-gradient(90deg, #7B5CC4, #C9529F) border-box; }
.xpi-shift__team strong { color: #fff; }
.xpi-shift__team .icon-tile { width: 44px; height: 44px; border-radius: 13px; }
@media (max-width: 760px) {
    .xpi-shift { margin-top: 44px; }
    .xpi-shift__head h3 { font-size: 25px; }
    .xpi-shift__cols { display: none; }
    .xpi-shift__table li { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 18px; }
    .xpi-shift__table li:first-child { border-top: none; }
    .xpi-shift__arrow { width: 26px; height: 26px; margin-left: 30px; transform: rotate(90deg); }
    .xpi-shift__table li:hover .xpi-shift__arrow { transform: rotate(90deg); }
    .xpi-shift__before { font-size: 15px; }
    .xpi-shift__team { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
}

/* ---------- Page Intelligence artificielle : vignettes et illustrations (classes xpa-*) ---------- */
.band .xpp-ai { --eyebrow: var(--magenta); border-style: solid; border-color: transparent; }
[data-theme="dark"] .band .xpp-ai { --eyebrow: #D98BC4; border-color: var(--line); }
/* Bulles de conversation : question (dégradé, à droite) et réponse (carte, à gauche). */
.xpa-b { display: block; box-sizing: border-box; font-size: 11px; font-weight: 700; line-height: 1.35; }
.xpa-b--q { align-self: flex-end; padding: 7px 11px; border-radius: 12px 12px 3px 12px; color: #fff; background: var(--grad); box-shadow: 0 10px 18px -12px rgba(169, 57, 139, .9); }
.xpa-b--a { align-self: flex-start; padding: 8px 11px; border-radius: 12px 12px 12px 3px; color: var(--ink); background: var(--card); border: 1px solid var(--line); }
.xpa-b u { display: block; text-decoration: none; height: 5px; border-radius: 3px; background: var(--line); margin: 3px 0; width: 70px; }
.xpa-b--q u { background: rgba(255, 255, 255, .8); width: 52px; }
.xpa-b--a u:last-child { width: 44px; }
.xpa-count { position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--grad); box-shadow: 0 8px 14px -8px rgba(169, 57, 139, .9); }
.xpa-count--bad { background: #D6456B; box-shadow: 0 8px 14px -8px rgba(214, 69, 107, .9); animation: xpp-pulse 2.4s ease-in-out infinite; }

/* 1. Copier-coller vers une IA grand public. */
.xpa-art--paste { padding-bottom: 34px; }
.xpa-art--paste .xpp-prod { animation: none; width: 104px; }
.xpa-ext { position: relative; }
.xpa-ext b { background: var(--body); }
.xpa-ext em { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; border-radius: 50%; background: #D6456B; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; animation: xpp-blink 2.4s ease-in-out infinite; }
.xpa-art--paste s { border-radius: 0; background: repeating-linear-gradient(90deg, var(--magenta) 0 5px, transparent 5px 9px); }
/* 2. La réponse perdue dans une pile de documents. */
.xpa-docs { position: relative; width: 104px; height: 96px; }
.xpa-docs .xpp-doc { position: absolute; left: 0; top: 0; width: 68px; height: 84px; }
.xpa-docs .xpp-doc:nth-child(1) { transform: rotate(-9deg); opacity: .65; }
.xpa-docs .xpp-doc:nth-child(2) { left: 16px; top: 4px; transform: rotate(-3deg); opacity: .85; }
.xpa-docs .xpp-doc:nth-child(3) { left: 34px; top: 8px; transform: rotate(4deg); }
.xpp-doc u.hit { background: var(--magenta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 22%, transparent); }
.xpa-art--docs .xpi-lens { margin: -20px 0 0 14px; animation: xpa-seek 5s ease-in-out infinite; }
@keyframes xpa-seek { 0%, 100% { transform: translate(-46px, -14px); } 35% { transform: translate(8px, 18px); } 70% { transform: translate(-20px, 10px); } }
/* 3. La même question, encore et encore. */
.xpa-rep { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; width: 100%; }
.xpa-rep span { padding: 7px 12px; border-radius: 12px 12px 12px 3px; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 14px -12px rgba(40, 20, 70, .7); }
.xpa-rep span:nth-child(2) { margin-left: 22px; opacity: .72; }
.xpa-rep span:nth-child(3) { margin-left: 44px; opacity: .45; }
/* 4. Une pile de tâches à traiter. */
.xpa-art--inbox { align-items: flex-start; }
.xpa-inbox { width: 74%; display: flex; flex-direction: column; gap: 6px; }
.xpa-inbox span { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.xpa-inbox i { display: block; width: 12px; height: 9px; border-radius: 2px; border: 1.5px solid var(--link); box-sizing: border-box; flex-shrink: 0; }
.xpa-inbox u { display: block; text-decoration: none; flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.xpa-inbox span:nth-child(2) u { margin-right: 22%; } .xpa-inbox span:nth-child(4) u { margin-right: 35%; }
.xpa-inbox span:nth-child(n+3) { opacity: .6; }
/* 5. Une base de données endormie. */
.xpa-db { display: flex; flex-direction: column; gap: 3px; }
.xpa-db i { display: block; width: 74px; height: 22px; border-radius: 50% / 9px; background: var(--card); border: 2px solid var(--body); box-sizing: border-box; opacity: .7; }
.xpa-zzz { position: absolute; left: 50%; top: 22px; margin-left: 40px; display: flex; align-items: flex-end; gap: 3px; font-family: var(--font-title); font-weight: 700; color: var(--link); }
@keyframes xpa-zz { 0%, 100% { opacity: .2; transform: translateY(3px); } 50% { opacity: 1; transform: translateY(-3px); } }
.xpa-zzz b { animation: xpa-zz 2.6s ease-in-out infinite; }
.xpa-zzz b:nth-child(1) { font-size: 13px; } .xpa-zzz b:nth-child(2) { font-size: 18px; animation-delay: .3s; } .xpa-zzz b:nth-child(3) { font-size: 24px; animation-delay: .6s; }
/* 6. Une démonstration restée en pause. */
.xpa-art--demo .xpp-mw { opacity: .8; }
.xpa-pause { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -30px 0 0 -21px; border-radius: 50%; background: var(--card); border: 2px solid var(--link); box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 5px; box-shadow: 0 12px 20px -12px rgba(40, 20, 70, .8); }
.xpa-pause i { display: block; width: 5px; height: 15px; border-radius: 2px; background: var(--link); }

/* Illustrations des trois briques. */
.xpa-dev--agent { flex-direction: row; gap: 14px; padding: 0 16px; box-sizing: border-box; }
.xpa-dev--agent .xpa-b--q { align-self: center; }
@keyframes xpa-think { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(90deg); } }
.xpa-core { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; color: #fff; background: var(--grad); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px color-mix(in srgb, var(--magenta) 16%, transparent); animation: xpa-think 4s ease-in-out infinite; }
.xpa-acts { display: flex; flex-direction: column; gap: 5px; }
.xpa-acts span { position: relative; padding: 4px 9px 4px 22px; border-radius: 7px; font-size: 10.5px; font-weight: 700; white-space: nowrap; color: var(--ink); background: var(--card); border: 1px solid var(--line); }
.xpa-acts span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 4px; margin-top: -4px; border-left: 2px solid #2EBD85; border-bottom: 2px solid #2EBD85; transform: rotate(-45deg); }
.xpa-acts span:last-child::before { border-color: #E0A030; }
.xpa-dev--doc { flex-direction: row; gap: 16px; }
.xpa-dev--doc .xpp-doc { width: 70px; height: 88px; flex-shrink: 0; }
.xpa-ans { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.xpa-ans em { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; color: var(--chip-tx); background: var(--chip-bg); }
/* Serveur MCP : l'IA au centre, reliée à trois logiciels. */
.xpa-hub { position: relative; width: 190px; height: 104px; flex-shrink: 0; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.xpa-hub__ai { position: absolute; left: 0; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; color: #fff; background: var(--grad); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px color-mix(in srgb, var(--magenta) 16%, transparent), 0 14px 22px -12px rgba(169, 57, 139, .9); z-index: 1; }
.xpa-hub b { position: absolute; right: 0; width: 56px; padding: 6px 0; border-radius: 8px; text-align: center; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--card); border: 1.5px solid var(--ink); box-sizing: border-box; }
.xpa-hub .n1 { top: 0; } .xpa-hub .n2 { top: 50%; margin-top: -14px; } .xpa-hub .n3 { bottom: 0; }
.xpa-hub i { position: absolute; left: 44px; top: 50%; width: 92px; height: 0; border-top: 2px dashed var(--eyebrow); transform-origin: left center; opacity: .8; }
.xpa-hub .l1 { transform: rotate(-23deg); } .xpa-hub .l3 { transform: rotate(23deg); }
@keyframes xpa-pkt { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.xpa-hub i::after { content: ""; position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); animation: xpa-pkt 2.4s ease-in-out infinite; }
.xpa-hub .l2::after { animation-delay: .8s; } .xpa-hub .l3::after { animation-delay: 1.6s; }
.xpp-sa .xpa-hub { zoom: .82; }
.xpa-chat { display: flex; flex-direction: column; gap: 6px; width: 132px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.xpp-tl__step:hover .xpa-chat, .xpp-tl__step:hover .xpa-hub, .xpp-format:hover .xpa-hub { transform: translateY(-3px) scale(1.04); }

/* Chapitre « En pratique » : trois exemples sous forme d'échange. */
.xpa-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.xpa-case { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.xpa-case:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--link) 35%, var(--line)); box-shadow: 0 30px 54px -36px rgba(86, 55, 138, .7); }
.xpa-case__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.xpa-case__who { font-family: var(--font-title); font-size: 21px; font-weight: 700; color: var(--ink); }
.xpa-case .xpa-b { margin: 0; font-size: 15px; line-height: 1.5; }
.xpa-case .xpa-b--q { max-width: 92%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; font-weight: 600; }
.xpa-case .xpa-b--a { position: relative; max-width: 96%; padding: 14px 16px 14px 44px; border-radius: 18px 18px 18px 4px; font-weight: 400; color: var(--body); background: var(--card2); flex: 1; }
.xpa-case__ai { position: absolute; left: 12px; top: 13px; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--grad); display: inline-flex; align-items: center; justify-content: center; }
.xpa-case__gain { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.xpa-case__gain svg { flex-shrink: 0; margin-top: 2px; color: var(--link); }
@media (max-width: 1100px) { .xpa-cases { grid-template-columns: minmax(0, 1fr); } .xpa-case { max-width: 640px; } }
@media (max-width: 760px) { .xpa-case { padding: 22px 18px; } .xpa-dev--agent { gap: 8px; padding: 0 8px; } .xpa-dev--agent .xpa-b--q { font-size: 10px; padding: 6px 8px; } }
@media (prefers-reduced-motion: reduce) { .xpa-core, .xpa-hub i::after, .xpa-zzz b, .xpa-count--bad, .xpa-ext em, .xpa-art--docs .xpi-lens { animation: none !important; } }

/* ---------- Page IA, finitions : liens constat → brique, « + » entre les briques, illustrations animées, échanges qui se jouent ---------- */
.xpp-format .tags { margin-top: auto; }
.xpp-sign > p { flex: 1; }
.xpa-to { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 6px; padding: 7px 12px 7px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--link); background: var(--chip-bg); transition: transform .25s ease, background .25s ease, color .25s ease; }
.xpa-to span { white-space: nowrap; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--grad); }
.xpa-to svg { transition: transform .25s ease; }
.xpa-to:hover { color: #fff; background: var(--violet); transform: translateY(-2px); }
.xpa-to:hover svg { transform: translateX(3px); }
.xpa-plus .xpp-format { position: relative; }
.xpa-plus .xpp-format:not(:last-child)::after {
    content: "+"; position: absolute; right: -30px; top: 50%; z-index: 2; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
    font-family: var(--font-title); font-size: 20px; font-weight: 700; line-height: 30px; text-align: center; color: var(--link);
    background: var(--card); border: 1.5px solid color-mix(in srgb, var(--link) 40%, var(--line)); box-sizing: border-box; box-shadow: 0 10px 18px -12px rgba(86, 55, 138, .8);
}
.xpa-src { right: 22px; bottom: -22px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(86, 55, 138, .75); animation: xpp-bob 7s ease-in-out -3s infinite; }
.xpa-src svg { color: #2EBD85; }
/* L'agent coche ses actions une à une ; la réponse de l'assistant s'écrit ligne à ligne. */
@keyframes xpa-step1 { 0%, 12% { opacity: 0; transform: translateX(-6px); } 20%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes xpa-step2 { 0%, 32% { opacity: 0; transform: translateX(-6px); } 40%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes xpa-step3 { 0%, 52% { opacity: 0; transform: translateX(-6px); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.xpa-acts span:nth-child(1) { animation: xpa-step1 6s ease-in-out infinite; }
.xpa-acts span:nth-child(2) { animation: xpa-step2 6s ease-in-out infinite; }
.xpa-acts span:nth-child(3) { animation: xpa-step3 6s ease-in-out infinite; }
@keyframes xpa-w1 { 0%, 8% { transform: scaleX(0); } 25%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes xpa-w2 { 0%, 28% { transform: scaleX(0); } 45%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes xpa-w3 { 0%, 48% { transform: scaleX(0); } 62%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.xpa-ans .xpa-b--a u { transform-origin: left center; }
.xpa-ans .xpa-b--a u:nth-child(1) { animation: xpa-w1 6s ease-in-out infinite; }
.xpa-ans .xpa-b--a u:nth-child(2) { animation: xpa-w2 6s ease-in-out infinite; }
.xpa-ans .xpa-b--a u:nth-child(3) { animation: xpa-w3 6s ease-in-out infinite; }
@keyframes xpa-cite { 0%, 62% { opacity: 0; } 72%, 92% { opacity: 1; } 100% { opacity: 0; } }
.xpa-ans em { animation: xpa-cite 6s ease-in-out infinite; }
/* Exemples : la question arrive, puis la réponse. */
@keyframes xpa-say { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.xpa-case .xpa-b--q { transform-origin: right bottom; animation: xpa-say .5s cubic-bezier(.2, .8, .2, 1) .35s both; }
.xpa-case .xpa-b--a { transform-origin: left bottom; animation: xpa-say .5s cubic-bezier(.2, .8, .2, 1) 1.15s both; }
.xpa-case:nth-child(2) .xpa-b--q { animation-delay: .65s; } .xpa-case:nth-child(2) .xpa-b--a { animation-delay: 1.45s; }
.xpa-case:nth-child(3) .xpa-b--q { animation-delay: .95s; } .xpa-case:nth-child(3) .xpa-b--a { animation-delay: 1.75s; }
.reveal-ready .xpa-case:not(.is-in) .xpa-b { animation-play-state: paused; }
.xpa-case { position: relative; padding-top: 22px; }
.xpa-case__top { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
@media (max-width: 980px) {
    .xpa-plus .xpp-format:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -30px; margin: 0 0 0 -16px; }
}
@media (max-width: 760px) { .xpa-src { right: 10px; font-size: 11px; padding: 6px 10px; } }
@media (prefers-reduced-motion: reduce) { .xpa-acts span, .xpa-ans .xpa-b--a u, .xpa-ans em, .xpa-case .xpa-b, .xpa-src { animation: none !important; } }

/* ---------- Page WinDev / WebDev : vignettes et illustrations (classes xpw-*) ---------- */
/* 1. L'auteur de l'application a disparu. */
.xpw-art--who { gap: 16px; }
.xpw-art--who .xpp-art__win { flex: 0 0 150px; }
.xpw-who { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 24px; font-weight: 700; color: var(--link); background: var(--card); border: 2px dashed color-mix(in srgb, var(--link) 60%, transparent); animation: xpp-bob 5s ease-in-out infinite; }
/* 2. Une ligne de code que plus personne n'ose toucher. */
.xpw-art--risk .xpp-code { width: 170px; padding: 14px; gap: 8px; }
.xpw-art--risk .xpp-code u { height: 6px; }
.xpp-code u.ko { margin-left: 12px; background: #D6456B; box-shadow: 0 0 0 3px rgba(214, 69, 107, .3); animation: xpp-blink 2.4s ease-in-out infinite; }
/* 3. Des postes à pourvoir. */
.xpw-seats { display: flex; gap: 10px; }
.xpw-seats i { display: block; position: relative; width: 38px; height: 38px; border-radius: 50%; box-sizing: border-box; border: 2px dashed var(--body); opacity: .55; overflow: hidden; }
.xpw-seats i.on { border: none; background: var(--grad); opacity: 1; }
.xpw-seats i::before { content: ""; position: absolute; left: 50%; top: 8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--body); opacity: .5; }
.xpw-seats i::after { content: ""; position: absolute; left: 50%; top: 23px; width: 24px; height: 18px; margin-left: -12px; border-radius: 50%; background: var(--body); opacity: .5; }
.xpw-seats i.on::before, .xpw-seats i.on::after { background: rgba(255, 255, 255, .9); opacity: 1; }
.xpw-art--seek { padding-bottom: 40px; }
/* 6. Maintenir ou migrer ? */
.xpw-art--fork { flex-direction: column; gap: 12px; }
.xpw-fork__q { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 22px; font-weight: 700; color: #fff; background: var(--grad); box-shadow: 0 12px 20px -10px rgba(169, 57, 139, .9); }
.xpw-fork { display: flex; gap: 46px; position: relative; }
.xpw-fork::before { content: ""; position: absolute; left: 50%; top: -12px; width: 2px; height: 12px; margin-left: -1px; background: var(--eyebrow); opacity: .6; }
.xpw-fork::after { content: ""; position: absolute; left: 22%; right: 22%; top: -1px; height: 14px; border: 2px solid var(--eyebrow); border-bottom: none; border-radius: 10px 10px 0 0; opacity: .6; box-sizing: border-box; }
.xpw-fork span { position: relative; z-index: 1; margin-top: 14px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 16px -12px rgba(40, 20, 70, .8); }
@keyframes xpw-pick { 0%, 45%, 100% { color: var(--ink); background: var(--card); } 55%, 90% { color: #fff; background: var(--violet); } }
.xpw-fork span:first-child { animation: xpw-pick 6s ease-in-out infinite; }
.xpw-fork span:last-child { animation: xpw-pick 6s ease-in-out -3s infinite; }

/* Illustrations des trois services. */
.xpw-dev--audit .xpp-doc { width: 74px; height: 92px; }
.xpw-dev--audit .xpi-lens { margin: -20px 0 0 -6px; animation: xpa-seek 5s ease-in-out infinite; }
.xpw-dev--keep { position: relative; }
.xpw-dev--keep .xpp-mw { width: 150px; }
.xpw-dev--keep .xpp-mw__body i { height: 22px; }
.xpw-dev--keep .xpp-sa__badge--loop { left: 50%; top: auto; bottom: 14px; margin-left: 58px; padding: 7px; }
/* Conversion : du WLangage (à gauche) au C# (à droite). */
.xpw-conv { display: flex; align-items: center; gap: 10px; flex-shrink: 0; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.xpw-conv__side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.xpw-conv__side em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--body); }
.xpw-conv .xpp-code { width: 86px; padding: 9px; gap: 5px; }
.xpw-code--old { background: #D9D5CB; border-color: #8C887E; filter: saturate(.6); }
.xpw-code--old u { background: #8C887E; } .xpw-code--old u.a { background: #5B6B93; }
.xpw-conv__arrow { position: relative; width: 30px; height: 3px; margin-bottom: 20px; border-radius: 3px; background: var(--grad); flex-shrink: 0; }
.xpw-conv__arrow::after { content: ""; position: absolute; right: -2px; top: -3px; width: 9px; height: 9px; border-top: 3px solid var(--magenta); border-right: 3px solid var(--magenta); transform: rotate(45deg); box-sizing: border-box; }
.xpp-sa .xpw-conv { zoom: .86; }
.xpp-tl__step:hover .xpw-conv, .xpp-format:hover .xpw-conv, .xpp-tl__step:hover .xpw-plan { transform: translateY(-3px) scale(1.04); }
/* Migration par étapes : les modules basculent un à un. */
.xpw-plan { display: grid; grid-template-columns: repeat(4, 26px); gap: 7px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.xpw-plan i { display: block; height: 34px; border-radius: 7px; background: #D9D5CB; border: 1.5px solid #8C887E; box-sizing: border-box; filter: saturate(.6); }
.xpw-plan i.done { background: var(--grad); border: none; filter: none; box-shadow: 0 10px 16px -10px rgba(169, 57, 139, .9); }
.xpw-legal { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--body); opacity: .85; text-align: center; }
@media (prefers-reduced-motion: reduce) { .xpw-who, .xpp-code u.ko, .xpw-fork span, .xpw-dev--audit .xpi-lens { animation: none !important; } }

/* Sélecteur de chemin posé sur la bande sombre : les cartes gardent les couleurs du thème. */
.band .xpp-choose__hint { color: rgba(255, 255, 255, .7); }
.band .xpp-opt { --eyebrow: var(--magenta); }
[data-theme="dark"] .band .xpp-opt { --eyebrow: #D98BC4; }

/* ---------- Page WinDev, finitions : enchaînement des services, conversion et modules animés ---------- */
.xpw-flow .xpp-format:nth-child(1)::after { content: "→"; font-size: 17px; line-height: 28px; }
.xpw-flow .xpp-format:nth-child(2)::after { content: "ou"; font-size: 12px; line-height: 29px; }
@keyframes xpw-write { 0%, 10% { transform: scaleX(0); } 40%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.xpw-conv__side:last-child .xpp-code u { transform-origin: left center; animation: xpw-write 5s ease-in-out infinite; }
.xpw-conv__side:last-child .xpp-code u:nth-child(2) { animation-delay: .35s; }
.xpw-conv__side:last-child .xpp-code u:nth-child(3) { animation-delay: .7s; }
@keyframes xpw-pull { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
.xpw-conv__arrow { animation: xpw-pull 2.4s ease-in-out infinite; }
/* Les modules basculent un à un de l'ancien vers le nouveau. */
.xpw-plan i { position: relative; overflow: hidden; }
.xpw-plan i:not(.done)::after { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: 0; }
@keyframes xpw-mod { 0%, 30% { opacity: 0; } 45%, 88% { opacity: 1; } 100% { opacity: 0; } }
.xpw-plan i:nth-child(3)::after { animation: xpw-mod 6s ease-in-out infinite; }
.xpw-plan i:nth-child(4)::after { animation: xpw-mod 6s ease-in-out 1s infinite; }
@media (max-width: 980px) { .xpw-flow .xpp-format:nth-child(1)::after { content: "↓"; } }
@media (prefers-reduced-motion: reduce) { .xpw-conv__side:last-child .xpp-code u, .xpw-conv__arrow, .xpw-plan i::after { animation: none !important; } }

/* ---------- Page À propos (classes xab-*) ---------- */
.xab-photo { margin: 0; min-width: 0; }
.xab-story { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.xab-story::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--violet), var(--magenta)); opacity: .35; }
.xab-story li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.xab-story__when { position: relative; z-index: 1; padding: 8px 16px; margin-bottom: 14px; border-radius: 999px; font-family: var(--font-title); font-size: 16px; font-weight: 700; color: #fff; background: var(--grad); box-shadow: 0 0 0 7px var(--bg), 0 14px 24px -12px rgba(169, 57, 139, .8); }
.xab-story h3 { font-family: var(--font-title); font-size: 24px; font-weight: 700; color: var(--ink); }
.xab-story p { font-size: 16px; line-height: 1.6; color: var(--body); }
.xab-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.xab-person { display: flex; gap: 22px; align-items: flex-start; padding: 30px; border-radius: 26px; transition: transform .3s ease, box-shadow .3s ease; }
.xab-person:hover { transform: translateY(-4px); box-shadow: 0 28px 52px -34px rgba(86, 55, 138, .65); }
.xab-person__initial { width: 68px; height: 68px; flex-shrink: 0; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 32px; font-weight: 700; color: #fff; background: var(--grad); box-shadow: 0 16px 28px -14px rgba(169, 57, 139, .85); }
.xab-person h3 { font-family: var(--font-title); font-size: 24px; font-weight: 700; color: var(--ink); }
.xab-person__role { display: block; margin: 4px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.xab-person p { font-size: 15.5px; line-height: 1.6; color: var(--body); }
.xab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xab-values li { gap: 18px; padding: 26px; }
.xab-values strong { font-size: 20px; }
.xab-place { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: center; }
.xab-place__card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 30px; border-radius: 26px; }
.xab-place__card address { font-style: normal; font-size: 18px; line-height: 1.6; font-weight: 600; color: var(--ink); }
@media (max-width: 980px) {
    .xab-story { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .xab-story::before { display: none; }
    .xab-story li { padding-left: 22px; border-left: 3px solid color-mix(in srgb, var(--magenta) 35%, transparent); }
    .xab-story__when { box-shadow: none; margin-bottom: 6px; }
    .xab-people, .xab-place { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
    .xab-values { grid-template-columns: minmax(0, 1fr); }
    .xab-person { flex-direction: column; gap: 16px; padding: 24px 22px; }
}

/* ---------- Page À propos, version illustrée : vidéo, frise en images, photo de Bliiida ---------- */
.xab-fig { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: var(--card2); border: 1px solid var(--line); box-shadow: 0 30px 54px -36px rgba(86, 55, 138, .7); }
.xab-fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.xab-fig:hover img { transform: scale(1.04); }
.xab-fig figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #fff; background: rgba(29, 22, 38, .72); backdrop-filter: blur(6px); }
.xab-video { padding-bottom: 96px; }
.xab-video__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.xab-video__text { display: flex; flex-direction: column; gap: 14px; }
.xab-video__text p { font-size: 18px; line-height: 1.6; color: var(--body); }
.xab-video__frame { border-radius: 26px; overflow: hidden; background: #000; border: 1.5px solid transparent; background: linear-gradient(#000, #000) padding-box, var(--grad) border-box; box-shadow: 0 44px 80px -48px rgba(86, 55, 138, .85); }
.xab-video__frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Frise : une ligne centrale, le texte et les photos alternent de part et d'autre. */
.xab-tl { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 72px; }
.xab-tl::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: linear-gradient(180deg, var(--violet), var(--magenta)); opacity: .3; }
.xab-tl__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: center; }
.xab-tl__item::before { content: ""; position: absolute; left: 50%; top: 50%; width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 7px var(--bg2); }
.xab-tl__item:nth-child(even) .xab-tl__text { order: 2; }
.xab-tl__text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.xab-tl__item:nth-child(odd) .xab-tl__text { align-items: flex-end; text-align: right; }
.xab-tl__text .xab-story__when { margin-bottom: 6px; box-shadow: 0 14px 24px -12px rgba(169, 57, 139, .8); }
.xab-tl__text h3 { font-family: var(--font-title); font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--ink); }
.xab-tl__text p { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 440px; }
.xab-tl__media { display: grid; gap: 14px; }
.xab-tl__media--1 .xab-fig { aspect-ratio: 16 / 10; }
.xab-tl__media--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xab-tl__media--2 .xab-fig { aspect-ratio: 4 / 5; }
.xab-tl__media--2 .xab-fig:nth-child(2) { margin-top: 36px; }
/* Paire « portrait étroit + paysage entier » : la photo large garde ses proportions, l'autre épouse sa hauteur. */
.xab-tl__media--wide { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); align-items: stretch; }
.xab-tl__media--wide .xab-fig { aspect-ratio: auto; }
.xab-tl__media--wide .xab-fig:nth-child(2) { margin-top: 0; aspect-ratio: 1082 / 706; }
.xab-tl__media--wide .xab-fig:nth-child(1) img { object-position: 40% 35%; }
.xab-tl__item:nth-child(3) .xab-fig { aspect-ratio: 710 / 430; background: #fff; }
.xab-tl__item:nth-child(3) .xab-fig img { object-fit: contain; }
.xab-tl__item:nth-child(3) .xab-fig figcaption { position: static; width: auto; max-width: none; border-radius: 0; text-align: center; color: var(--ink); background: var(--card2); backdrop-filter: none; }
.xab-tl__item:nth-child(3) .xab-fig { aspect-ratio: auto; }
.xab-place { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); row-gap: 28px; }
.xab-place__photo { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
.xab-place__card { grid-column: 1; flex-direction: row; align-items: center; flex-wrap: wrap; }
.xab-place__card address { flex: 1; min-width: 160px; }
@media (max-width: 980px) {
    .xab-video__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .xab-tl { gap: 52px; }
    .xab-tl::before { left: 9px; margin-left: 0; }
    .xab-tl__item { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-left: 40px; }
    .xab-tl__item::before { left: 0; top: 14px; margin: 0; }
    .xab-tl__item:nth-child(even) .xab-tl__text { order: 0; }
    .xab-tl__item:nth-child(odd) .xab-tl__text { align-items: flex-start; text-align: left; }
    .xab-tl__text h3 { font-size: 25px; }
    .xab-place { grid-template-columns: minmax(0, 1fr); }
    .xab-place__photo, .xab-place__card { grid-column: 1; grid-row: auto; }
}
@media (max-width: 760px) {
    .xab-video { padding-bottom: 64px; }
    .xab-tl__item { padding-left: 32px; }
    .xab-tl__media--2 .xab-fig:nth-child(2) { margin-top: 20px; }
    .xab-tl__media--wide { grid-template-columns: minmax(0, 1fr); }
    .xab-tl__media--wide .xab-fig:nth-child(1) { aspect-ratio: 4 / 3; order: 2; }
    .xab-tl__media--wide .xab-fig:nth-child(2) { margin-top: 0; }
    .xab-fig figcaption { font-size: 11.5px; padding: 5px 10px; }
    .xab-video__frame { border-radius: 18px; }
}

/* ---------- Page À propos, finitions : repères, bouton de son, photos façon tirages, ligne qui se remplit ---------- */
.xab-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.xab-facts li { display: flex; align-items: baseline; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--body); background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.xab-facts b { font-family: var(--font-title); font-size: 19px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xab-video__frame { position: relative; }
.xab-video__sound { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: none; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: rgba(29, 22, 38, .72); backdrop-filter: blur(8px); transition: background .25s ease, transform .25s ease; }
.xab-video__sound:hover { background: var(--violet); transform: translateY(-1px); }
.xab-video__sound .on { display: none; }
.xab-video__sound[aria-pressed="true"] .on { display: inline; }
.xab-video__sound[aria-pressed="true"] .off { display: none; }
.xab-video__frame { transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; }
.xab-video__frame:hover { transform: translateY(-4px); box-shadow: 0 54px 90px -48px rgba(169, 57, 139, .9); }
/* Photos de la frise : légèrement inclinées, comme des tirages posés ; elles se redressent au survol. */
.xab-tl .xab-fig { transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; border: 5px solid var(--card); }
.xab-tl__item:nth-child(odd) .xab-fig:nth-child(1) { transform: rotate(1.4deg); }
.xab-tl__item:nth-child(even) .xab-fig:nth-child(1) { transform: rotate(-1.6deg); }
.xab-tl .xab-fig:nth-child(2) { transform: rotate(1.2deg); }
.xab-tl .xab-fig:hover { transform: rotate(0) scale(1.03); z-index: 2; box-shadow: 0 40px 66px -36px rgba(86, 55, 138, .85); }
.xab-tl__item::before { transition: transform .5s cubic-bezier(.2, .9, .3, 1.4) .2s; }
.reveal-ready .xab-tl__item[data-reveal]:not(.is-in)::before { transform: scale(0); }
.xab-tl__text .xab-story__when { font-size: 18px; padding: 9px 18px; }
/* La ligne se colore au fil de la lecture (navigateurs récents). */
@supports (animation-timeline: view()) {
    .xab-tl::after { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: linear-gradient(180deg, var(--violet), var(--magenta)); transform-origin: top center; transform: scaleY(0); animation: xab-grow linear both; animation-timeline: view(); animation-range: cover 10% cover 70%; }
    @keyframes xab-grow { to { transform: scaleY(1); } }
}
.xab-tl__item { z-index: 1; }
.xab-person { position: relative; overflow: hidden; }
.xab-person::after { content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; border: 22px solid color-mix(in srgb, var(--magenta) 9%, transparent); pointer-events: none; }
@media (max-width: 980px) { .xab-tl::after { left: 9px; margin-left: 0; } .xab-tl .xab-fig { transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .xab-tl::after { animation: none; display: none; } }

/* ---------- Réalisations : page d'ensemble et fiches (classes xre-*) ---------- */
.xre-hero { padding-bottom: 72px; }
.xre-hero .xpp-hero__text { max-width: 820px; }
.xre-hero .xpp-hero__inner .xpp-hero__text { max-width: none; }
.xre-filter { position: relative; }
.xre-filter__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.xre-tab { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink); background: var(--card); border: 1.5px solid var(--line); transition: transform .25s ease, border-color .25s ease, background .25s ease, color .25s ease; }
.xre-tab b { min-width: 24px; padding: 2px 7px; border-radius: 999px; text-align: center; font-family: var(--font-title); font-size: 12px; color: var(--chip-tx); background: var(--chip-bg); }
.xre-tab:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--link) 45%, var(--line)); }
#xre-all:checked ~ .xre-filter__tabs .xre-tab--all,
#xre-logiciel:checked ~ .xre-filter__tabs .xre-tab--logiciel,
#xre-industrie:checked ~ .xre-filter__tabs .xre-tab--industrie { color: #fff; background: var(--grad) border-box; border-color: transparent; box-shadow: 0 14px 26px -14px rgba(169, 57, 139, .85); }
#xre-all:checked ~ .xre-filter__tabs .xre-tab--all b,
#xre-logiciel:checked ~ .xre-filter__tabs .xre-tab--logiciel b,
#xre-industrie:checked ~ .xre-filter__tabs .xre-tab--industrie b { color: var(--violet); background: #fff; }
#xre-all:focus-visible ~ .xre-filter__tabs .xre-tab--all,
#xre-logiciel:focus-visible ~ .xre-filter__tabs .xre-tab--logiciel,
#xre-industrie:focus-visible ~ .xre-filter__tabs .xre-tab--industrie { outline: 3px solid color-mix(in srgb, var(--link) 60%, transparent); outline-offset: 3px; }
#xre-logiciel:checked ~ .xre-grid .xre-card:not(.xre-card--logiciel),
#xre-industrie:checked ~ .xre-grid .xre-card:not(.xre-card--industrie) { display: none; }
.xre-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.xre-card h2 { font-family: var(--font-title); font-size: 24px; font-weight: 700; }
.xre-card .project-card__body { flex: 1; }
.xre-card .project-card__body p { flex: 1; }
.xre-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xre-card__year { font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--body); }
.xre-card--soon { cursor: default; }
.xre-card--soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.xre-card--soon .project-card__media { filter: saturate(.55); opacity: .85; }
.xre-card__soon { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--body); border: 1px dashed var(--body); }
/* Fiche */
.xre-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--link); }
.xre-back svg { transform: rotate(180deg); transition: transform .25s ease; }
.xre-back:hover svg { transform: rotate(180deg) translateX(4px); }
.xre-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.xre-facts div { padding: 12px 18px; border-radius: 16px; background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.xre-facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.xre-facts dd { margin: 3px 0 0; font-family: var(--font-title); font-size: 17px; font-weight: 700; color: var(--ink); }
.xre-cover { height: auto; aspect-ratio: 4 / 3; border-radius: 28px; border: 1px solid var(--line); box-shadow: 0 44px 80px -52px rgba(86, 55, 138, .7); }
.xre-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.xre-block { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); }
.xre-block--main { box-shadow: 0 34px 60px -44px rgba(169, 57, 139, .75); }
.xre-block__num { font-family: var(--font-title); font-size: 15px; font-weight: 700; color: var(--eyebrow); padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--eyebrow); align-self: flex-start; }
.xre-block h2 { font-family: var(--font-title); font-size: 25px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.xre-block > p { font-size: 16px; line-height: 1.65; color: var(--body); }
.xre-block .xpp-list li { align-items: flex-start; font-weight: 500; line-height: 1.45; }
.xre-block .xpp-list svg { margin-top: 3px; }
.xre-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.xre-gallery .xab-fig { aspect-ratio: 16 / 10; }
.xre-gallery .xab-fig img { object-fit: contain; background: #fff; }
.xre-cover img { object-fit: contain; background: #fff; }
.xre-card .project-card__media img, .xre-others .project-card__media img { object-position: center top; }
.xre-others { background: var(--bg); }
.project-card__media img { object-position: center top; }
.xpi-case__media { position: relative; }
.xpi-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xre-others { padding-top: 88px; }
@media (max-width: 1100px) { .xre-story { grid-template-columns: minmax(0, 1fr); } .xre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .xre-grid, .xre-gallery { grid-template-columns: minmax(0, 1fr); }
    .xre-tab { font-size: 14px; padding: 8px 14px; }
    .xre-block { padding: 24px 22px; }
    .xre-hero { padding-bottom: 48px; }
}

/* Diaporama de l'en-tête des réalisations : n images, 3,5 s chacune, la suivante glisse par-dessus. */
.xre-show { --d: 3.5s; position: relative; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 44px 80px -52px rgba(86, 55, 138, .7); min-width: 0; }
.xre-show__bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 26px 26px 0 0; background: var(--chip-bg); }
.xre-show__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--eyebrow); opacity: .6; }
.xre-show__bar span { flex: 1; max-width: 240px; height: 14px; margin-left: 12px; border-radius: 7px; background: var(--card); }
.xre-show__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.xre-show__slide { position: absolute; inset: 0; margin: 0; opacity: 0; animation: xre-slide calc(var(--n) * var(--d)) calc(var(--i) * var(--d)) infinite both; }
.xre-show__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.xre-show__slide figcaption { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; border-radius: 14px; color: #fff; background: rgba(29, 22, 38, .78); backdrop-filter: blur(6px); }
.xre-show__slide figcaption b { font-family: var(--font-title); font-size: 16px; }
.xre-show__slide figcaption span { font-size: 12px; opacity: .85; }
/* Chaque image occupe 1/n du cycle : entrée en glissant, tenue, sortie en fondu. */
@keyframes xre-slide { 0% { opacity: 0; transform: translateX(6%) scale(1.03); } 4% { opacity: 1; transform: none; } 20% { opacity: 1; transform: scale(1.03); } 24%, 100% { opacity: 0; transform: scale(1.05); } }
.xre-show__dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0; }
.xre-show__dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--line); animation: xre-dot calc(var(--n) * var(--d)) calc(var(--i) * var(--d)) infinite; }
@keyframes xre-dot { 0%, 20% { width: 26px; background: var(--magenta); } 24%, 100% { width: 8px; background: var(--line); } }
.xre-show .xpp-float--badge { left: auto; right: 26px; top: -18px; }
.xre-hero .xab-facts { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .xre-show__slide { animation: none; } .xre-show__slide:first-child { opacity: 1; } .xre-show__dots i { animation: none; } }

/* Fiche réalisation : récit en trois étapes le long d'un fil. */
.xre-path { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 56px; }
.xre-step:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 54px; bottom: -56px; width: 3px; background: linear-gradient(180deg, var(--violet), var(--magenta)); opacity: .3; }
.xre-step { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 32px; align-items: start; }
.xre-step__node { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--link); background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 0 0 8px var(--bg); }
.xre-step--result .xre-step__node { color: #fff; background: var(--grad) border-box; box-shadow: 0 0 0 8px var(--bg), 0 16px 28px -12px rgba(169, 57, 139, .9); }
.xre-step__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.xre-step__label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.xre-step h2 { font-family: var(--font-title); font-size: 32px; line-height: 1.15; font-weight: 700; color: var(--ink); }
.xre-step__lead { max-width: 820px; font-size: 19px; line-height: 1.65; color: var(--body); }
.xre-feats { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.xre-feats li { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.xre-feats li::after { content: ""; position: absolute; right: -34px; top: -34px; width: 96px; height: 96px; border-radius: 50%; border: 14px solid color-mix(in srgb, var(--magenta) 8%, transparent); }
.xre-feats li:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--link) 35%, var(--line)); box-shadow: 0 24px 44px -30px rgba(86, 55, 138, .7); }
.xre-feats b { font-family: var(--font-title); font-size: 26px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; align-self: flex-start; }
.xre-feats span { font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.xre-result { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 36px 40px; border-radius: 28px; color: #fff; background: linear-gradient(120deg, #4A2A78 0%, #56378A 45%, #A9398B 100%); box-shadow: 0 40px 70px -40px rgba(169, 57, 139, .85); }
.xre-result::before, .xre-result::after { content: ""; position: absolute; border-radius: 50%; border: 34px solid rgba(255, 255, 255, .09); }
.xre-result::before { width: 260px; height: 260px; right: -80px; top: -120px; }
.xre-result::after { width: 180px; height: 180px; right: 120px; bottom: -130px; }
.xre-result .xre-step__label { color: #F2C4E2; }
.xre-result p { position: relative; z-index: 1; max-width: 820px; font-family: var(--font-title); font-size: 26px; line-height: 1.35; font-weight: 700; }
@media (max-width: 1100px) { .xre-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .xre-path { gap: 40px; }
    .xre-step:not(:last-child)::before { left: 20px; top: 44px; bottom: -40px; }
    .xre-step { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
    .xre-step__node { width: 44px; height: 44px; box-shadow: 0 0 0 6px var(--bg); }
    .xre-step h2 { font-size: 25px; }
    .xre-step__lead { font-size: 16.5px; }
    .xre-feats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .xre-feats li { flex-direction: row; align-items: baseline; padding: 16px 18px; }
    .xre-result { padding: 26px 22px; border-radius: 22px; }
    .xre-result p { font-size: 20px; }
}

/* Réalisations, finitions : carte vedette, mots-clés, galerie cliquable, navigation entre fiches. */
.xre-card .tags { margin-top: 2px; }
.xre-card .tag { font-size: 11.5px; padding: 5px 10px; }
.xre-card .project-card__media { height: 230px; }
.xre-card--lead { grid-column: span 2; flex-direction: row; }
.xre-card--lead .project-card__media { flex: 0 0 58%; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
.xre-card--lead .project-card__body { justify-content: center; padding: 34px; gap: 14px; }
.xre-card--lead h2 { font-size: 32px; }
.xre-card--lead .project-card__media { background: #fff; }
.xre-card--lead .project-card__media img { object-fit: contain; object-position: center; }
.xre-card--lead .project-card__body p { flex: 0; font-size: 16.5px; }
#xre-industrie:checked ~ .xre-grid .xre-card--industrie:first-of-type { grid-column: auto; }
.xre-cover { transition: transform .6s cubic-bezier(.2, .8, .2, 1); transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.xre-cover:hover { transform: none; }
.xre-shot { display: block; cursor: zoom-in; color: inherit; }
.xre-shot__cap { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #fff; background: rgba(29, 22, 38, .72); backdrop-filter: blur(6px); }
.xre-shot__zoom { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; background: var(--grad); opacity: 0; transform: scale(.7); transition: opacity .25s ease, transform .25s ease; }
.xre-shot:hover .xre-shot__zoom { opacity: 1; transform: none; }
.xre-gallery .xre-shot:first-child:not(.xre-shot--tall) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.xre-gallery .xre-shot--tall { aspect-ratio: 16 / 10; }
.xre-nav { padding: 0 0 72px; background: var(--bg); }
.xre-nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; }
.xre-nav__link { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 22px; color: var(--ink); background: var(--card); border: 1px solid var(--line); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.xre-nav__link:hover { color: var(--ink); transform: translateY(-3px); border-color: color-mix(in srgb, var(--link) 40%, var(--line)); box-shadow: 0 24px 44px -30px rgba(86, 55, 138, .7); }
.xre-nav__link svg { flex-shrink: 0; color: var(--link); }
.xre-nav__link:not(.xre-nav__link--next) svg { transform: rotate(180deg); }
.xre-nav__link--next { justify-content: flex-end; text-align: right; }
.xre-nav__link span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xre-nav__link em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.xre-nav__link b { font-family: var(--font-title); font-size: 20px; }
.xre-nav__all { display: inline-flex; align-items: center; padding: 0 22px; border-radius: 22px; font-weight: 700; color: var(--link); border: 1.5px solid var(--line); }
.xre-nav__all:hover { color: #fff; background: var(--violet); border-color: var(--violet); }
.xre-others { padding-bottom: 72px; }
@media (max-width: 1100px) { .xre-card--lead { grid-column: 1 / -1; } }
@media (max-width: 760px) {
    .xre-card--lead { flex-direction: column; }
    .xre-card--lead .project-card__media { flex: none; min-height: 0; height: 210px; }
    .xre-card--lead .project-card__body { padding: 26px; }
    .xre-card--lead h2 { font-size: 24px; }
    .xre-cover { transform: none; }
    .xre-nav__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .xre-nav__all { display: none; }
    .xre-nav__link { padding: 16px; gap: 10px; }
    .xre-nav__link b { font-size: 16px; }
    .xre-nav__link em { font-size: 10.5px; }
}

@media (max-width: 1100px) {
    .xpp-hero__inner { gap: 40px; }
    .xpp-hero .hero__title--page { font-size: 46px; }
    .xpp-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xpp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .xpp-hero { padding: 48px 0 64px; }
    .xpp-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .xpp-hero__visual { max-width: 620px; }
    .xpp-formats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .xpp-path { padding: 24px 22px 26px; gap: 26px; border-radius: 22px; }
    .xpp-path__head { flex-direction: column; gap: 16px; }
    .xpp-path__meta { align-items: flex-start; text-align: left; margin-left: 0; }
    .xpp-path__title h3 { font-size: 24px; }
    .xpp-ai { padding: 24px 20px; gap: 18px; }
    .xpp-ai__cols { grid-template-columns: minmax(0, 1fr); }
    .xpp-ai__col { padding: 18px; }
    .xpp-path__emblem { width: 48px; height: 48px; border-radius: 14px; }
    .xpp-hero { padding: 28px 0 48px; }
    .xpp-hero .hero__title--page { font-size: 36px; }
    .xpp-hero__visual { padding: 10px; border-radius: 22px; align-items: center; }
    .xpp-head { margin-bottom: 30px; }
    .xpp-head p { font-size: 16px; }
    .xpp-signs, .xpp-benefits { grid-template-columns: minmax(0, 1fr); }
    .xpp-benefits { gap: 26px; }
    .xpp-format { padding: 24px; }
}
/* <<< Pages expertise */

/* >>> Harmonisation (généré) */
/* Titre h1 : même taille sur toutes les pages intérieures (expertises, à propos, réalisations, contact, pages à venir). */
.hero__title--page, .contact-hero .hero__title--page, .xpp-hero .hero__title--page { font-size: 54px; line-height: 1.06; }
@media (max-width: 1240px) { .contact-hero .hero__title--page { font-size: 46px; } }
@media (max-width: 1100px) { .hero__title--page, .xpp-hero .hero__title--page { font-size: 46px; } }
@media (max-width: 760px) {
    .hero__title--page, .contact-hero .hero__title--page, .xpp-hero .hero__title--page { font-size: 36px; }
    .contact-hero .hero__lead { font-size: 17px; }
    /* Boutons du hero en pleine largeur, comme sur l'accueil. */
    .xpp-hero .hero__actions { align-self: stretch; }
    /* Même rythme vertical que les autres sections sur mobile. */
    .xre-others { padding-top: 52px; padding-bottom: 56px; }
}

/* Chiffres en dégradé : variante lisible en thème sombre. */
.xpi-case__facts b, .xab-facts b, .xre-feats b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Titres de cartes : interligne serré quand le nom passe sur deux lignes. */
.project-card__body h3, .xre-card h2 { line-height: 1.2; }

/* Sur-titres : même interlettrage partout. */
.chapter__label, .cta__eyebrow { letter-spacing: .1em; }

/* Cartes : un seul rayon (24px) pour les cartes de contenu. */
.xpp-opt, .xpp-sign, .xab-fig, .xab-person, .xab-place__card, .xab-video__frame, .xpi-case, .xpp-format { border-radius: 24px; }

/* Visionneuse d'images : popup dans la page (galeries des réalisations). */
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 56px 84px 24px; border: 0; background: transparent; display: none; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox[open] { display: flex; animation: lightbox-in .22s ease both; }
.lightbox::backdrop { background: rgba(20, 12, 30, .88); backdrop-filter: blur(6px); }
.lightbox__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 0; }
.lightbox__img { display: block; max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; border-radius: 16px; background: #fff; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); cursor: default; }
.lightbox__cap { font-size: 15px; font-weight: 600; color: #fff; text-align: center; cursor: default; }
.lightbox__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0 0 4px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 700 30px/1 var(--font-title); cursor: pointer; transition: background-color .2s ease, transform .15s ease; }
.lightbox__btn:hover { background: rgba(255, 255, 255, .28); transform: scale(1.06); }
.lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 50%; }
.lightbox__close { top: 16px; right: 20px; }
.lightbox__nav { top: 50%; margin-top: -24px; }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
.lightbox--single .lightbox__nav { display: none; }
html.has-lightbox { overflow: hidden; }
@keyframes lightbox-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
    .lightbox { padding: 64px 12px 84px; }
    .lightbox__nav { top: auto; bottom: 20px; margin-top: 0; }
    .lightbox__nav--prev { left: calc(50% - 60px); }
    .lightbox__nav--next { right: calc(50% - 60px); }
    .lightbox__img { max-height: calc(100dvh - 210px); border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }
/* <<< Harmonisation */

/* >>> Page 404 (généré) */
.nf { min-height: 0; padding: 72px 0 72px; overflow: clip; }
.nf__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.nf__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.nf .hero__lead { max-width: 540px; }
.nf-art { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 44px 28px 36px; border-radius: 28px; background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(86, 55, 138, .55); backdrop-filter: blur(8px); }
.nf-code { display: flex; align-items: center; justify-content: center; gap: 14px; }
.nf-digit { font-family: var(--font-title); font-size: 190px; font-weight: 700; line-height: .9; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf-digit:first-child { animation: nf-float 5s ease-in-out infinite; }
.nf-digit:last-child { animation: nf-float 5s ease-in-out -2.5s infinite; }
.nf-zero { position: relative; width: 150px; height: 150px; flex: none; }
.nf-zero__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #56378A, #A9398B, #E0609E, #A9398B, #56378A); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 63%); mask: radial-gradient(closest-side, transparent 62%, #000 63%); animation: nf-spin 9s linear infinite; }
.nf-zero__orbit { position: absolute; inset: -16px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--link) 35%, transparent); animation: nf-spin 14s linear infinite reverse; }
.nf-zero__orbit i { position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 5px color-mix(in srgb, var(--magenta) 22%, transparent); }
.nf-chain { display: flex; align-items: center; gap: 10px; width: min(100%, 360px); }
.nf-node { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--line); background: var(--card); }
.nf-node--ok { border-color: var(--link); background: var(--link); }
.nf-wire { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--link), var(--magenta)); background-size: 200% 100%; animation: nf-flow 2.4s linear infinite; }
.nf-wire--off { background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); animation: none; }
.nf-cut { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding-bottom: 2px; border-radius: 50%; font-size: 20px; font-weight: 700; line-height: 1; color: #fff; background: var(--magenta); animation: nf-pulse 2.4s ease-in-out infinite; }
.nf-url { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--body); background: var(--card2); border: 1px solid var(--line); }
.nf-url__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--magenta); }
.nf-url b { color: var(--link); animation: nf-blink 1.2s steps(2, jump-none) infinite; }
@keyframes nf-spin { to { transform: rotate(360deg); } }
@keyframes nf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes nf-flow { to { background-position: -200% 0; } }
@keyframes nf-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--magenta) 45%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
@keyframes nf-blink { 0% { opacity: 1; } 100% { opacity: .15; } }
@media (max-width: 1100px) {
    .nf-digit { font-size: 150px; }
    .nf-zero { width: 120px; height: 120px; }
}
@media (max-width: 900px) {
    .nf { padding: 48px 0 56px; }
    .nf__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .nf-art { max-width: 560px; }
}
@media (max-width: 760px) {
    .nf { padding: 28px 0 44px; }
    .nf .hero__actions { align-self: stretch; }
    .nf-art { padding: 32px 16px 26px; border-radius: 22px; gap: 18px; }
    .nf-code { gap: 8px; }
    .nf-digit { font-size: 104px; }
    .nf-zero { width: 84px; height: 84px; }
    .nf-zero__orbit { inset: -11px; }
    .nf-zero__orbit i { width: 11px; height: 11px; top: -6px; margin-left: -5px; }
}
@media (prefers-reduced-motion: reduce) {
    .nf-digit, .nf-zero__ring, .nf-zero__orbit, .nf-wire, .nf-cut, .nf-url b { animation: none !important; }
}
/* <<< Page 404 */

/* >>> Menu mobile (généré) */
@media (max-width: 980px) {
    /* Voile sombre sur la page quand le menu est ouvert : le panneau se détache nettement. */
    .site-header-wrap::before {
        content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background: rgba(24, 14, 36, .58); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
        opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
    }
    html.menu-open .site-header-wrap::before { opacity: 1; visibility: visible; pointer-events: auto; }
    html.menu-open { overflow: hidden; }
    /* L'en-tête redevient opaque : pas de transparence « verre » sous le menu ouvert. */
    html.menu-open .site-header-wrap, html.menu-open .site-header-wrap.is-scrolled { background: transparent; }
    html.menu-open .site-header, html.menu-open .site-header-wrap.is-scrolled .site-header { background: var(--card); border-color: var(--line); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .55); }

    .site-nav, .site-header-wrap.is-scrolled .site-nav {
        top: calc(100% + 12px); gap: 0; padding: 10px 10px 12px;
        background: var(--card); border: 1px solid color-mix(in srgb, var(--link) 22%, var(--line)); border-radius: 26px;
        box-shadow: 0 34px 70px -22px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04);
        max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain;
    }
    .site-header.is-open .site-nav { animation: menu-in .26s cubic-bezier(.2, .8, .2, 1) both; }
    .site-nav__link {
        position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 15px 14px; border-radius: 14px; font-family: var(--font-title); font-size: 18px; font-weight: 700; color: var(--ink);
    }
    /* Filet entre les lignes et chevron à droite. */
    .site-nav__link + .site-nav__link { background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 28px) 1px no-repeat; }
    .site-nav__link::after {
        content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
        border-right: 2.4px solid var(--link); border-top: 2.4px solid var(--link); border-radius: 1px;
        transform: rotate(45deg); opacity: .55; transition: transform .2s ease, opacity .2s ease;
    }
    .site-nav__link:hover, .site-nav__link:active { background: var(--bg2); }
    .site-nav__link:hover::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
    .site-nav__link.active, .site-nav__link.active + .site-nav__link { background-image: none; }
    .site-nav__link.active { color: var(--link); background-color: color-mix(in srgb, var(--link) 9%, transparent); }
    .site-nav__link.active::after { opacity: 1; }
    .site-nav__cta { margin-top: 12px; min-height: 54px; font-size: 17px; }

    /* Le bouton menu devient une croix quand le menu est ouvert. */
    .menu-toggle { position: relative; }
    .site-header.is-open .menu-toggle svg { display: none; }
    .site-header.is-open .menu-toggle::before, .site-header.is-open .menu-toggle::after {
        content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2.4px; margin: -1.2px 0 0 -9px; border-radius: 2px; background: #fff;
    }
    .site-header.is-open .menu-toggle::before { transform: rotate(45deg); }
    .site-header.is-open .menu-toggle::after { transform: rotate(-45deg); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-header.is-open .site-nav { animation: none; } .site-header-wrap::before { transition: none; } }
/* <<< Menu mobile */

/* >>> Mobile : visuel d’abord (généré) */
@media (max-width: 980px) {
    /* Ordre sur mobile et tablette : sur-titre + titre, puis le visuel, puis le texte et les boutons.
       Le bloc de texte est « dissous » (display: contents) pour pouvoir intercaler le visuel entre ses enfants. */
    .hero__text, .xpp-hero__text { display: contents; }
    .hero__text > *, .xpp-hero__text > * { order: 3; }
    .hero__text > .pill-badge, .hero__text > .hero__title,
    .xpp-hero__text > .xre-back, .xpp-hero__text > .pill-badge, .xpp-hero__text > .hero__title { order: 1; }
    .hero__inner > .hero__visual,
    .xpp-hero__inner > .xpp-hero__visual, .xpp-hero__inner > .team__photo,
    .xpp-hero__inner > .xre-show, .xpp-hero__inner > .xre-cover { order: 2; margin-top: 0; }
    .xpp-hero__inner > .xpp-toc { order: 4; }
    .hero__inner, .xpp-hero__inner { gap: 22px; }
    .xpp-hero__text > .pill-badge, .xpp-hero__text > .xre-back { justify-self: start; }
    .hero__text > .hero__lead, .xpp-hero__text > .hero__lead { max-width: 640px; }
    .hero__visual { animation-delay: .15s; }
    /* Marge pour les étiquettes qui dépassent en haut de l'illustration. */
    .xpp-hero__inner > .xpp-hero__visual, .xpp-hero__inner > .xre-show { margin-top: 20px; }
}
@media (max-width: 900px) {
    .nf__text { display: contents; }
    .nf__text > * { order: 3; }
    .nf__text > .pill-badge, .nf__text > .hero__title { order: 1; }
    .nf__inner > .nf-art { order: 2; }
    .nf__inner { gap: 22px; }
    .nf__text > .pill-badge { justify-self: start; }
}
@media (max-width: 760px) {
    .hero__inner, .xpp-hero__inner, .nf__inner { gap: 20px; }
    .hero__text > .hero__actions { align-self: stretch; }
}
/* <<< Mobile : visuel d’abord */

/* >>> Transition de thème (généré) */
/* Changement de thème : fondu enchaîné doux de toute la page (déclenché par site.js). */
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation-duration: .95s; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
/* L'interrupteur sort du fondu : il reste net et s'anime lui-même (glissement, soleil qui devient lune). */
.theme-toggle { view-transition-name: theme-toggle; transition: background-color .8s ease; }
html.theme-vt::view-transition-old(theme-toggle) { display: none; }
html.theme-vt::view-transition-new(theme-toggle) { animation: none; }
.theme-toggle__knob { transition: left .8s cubic-bezier(.45, 0, .55, 1), color .8s ease; }
.theme-toggle__sun, .theme-toggle__moon, [data-theme="dark"] .theme-toggle__sun, [data-theme="dark"] .theme-toggle__moon {
    display: block; position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -7px;
    transition: opacity .5s ease, transform .8s cubic-bezier(.45, 0, .55, 1);
}
.theme-toggle__sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle__moon { opacity: 0; transform: rotate(-120deg) scale(.4); }
[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(120deg) scale(.4); }
[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: rotate(0deg) scale(1); }
@media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle__knob, .theme-toggle__sun, .theme-toggle__moon { transition: none !important; } }
/* <<< Transition de thème */

/* >>> Blog (généré) */
/* ---------- Blog : liste des articles et page article ---------- */
.blg-hero { padding-bottom: 64px; }
.blg-hero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.blg-hero__inner > .hero__title { max-width: 820px; }
.blg-hero .hero__lead { max-width: 680px; }
/* Même colonne de lecture que le corps de l'article. */
.blg-hero--post .blg-hero__inner, .blg-post__inner { max-width: calc(760px + 2 * var(--gutter)); }
.blg-hero--post .hero__title--page { font-size: 46px; line-height: 1.1; }
.blg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; color: var(--body); }
.blg-read { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--body); }

.blg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.blg-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.blg-card:hover { color: var(--ink); transform: translateY(-4px); border-color: color-mix(in srgb, var(--link) 35%, var(--line)); box-shadow: 0 30px 56px -36px rgba(86, 55, 138, .6); }
.blg-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); }
.blg-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.blg-card:hover .blg-card__media img { transform: scale(1.04); }
.blg-card__icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 20px; color: #fff; background: var(--grad); box-shadow: 0 18px 30px -14px rgba(86, 55, 138, .7); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.blg-card:hover .blg-card__icon { transform: scale(1.08) rotate(-4deg); }
.blg-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 24px; }
.blg-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--body); }
.blg-card h2, .blg-card h3 { font-family: var(--font-title); font-size: 22px; line-height: 1.25; font-weight: 700; }
/* Un seul article en ligne : une grande carte horizontale. */
.blg-grid--single { grid-template-columns: minmax(0, 1fr); }
.blg-grid--single .blg-card { flex-direction: row; }
.blg-grid--single .blg-card__media { flex: 0 0 54%; aspect-ratio: 16 / 9; border-bottom: 0; border-right: 1px solid var(--line); }
.blg-grid--single .blg-card__body { justify-content: center; gap: 16px; padding: 36px; }
.blg-grid--single .blg-card h2, .blg-grid--single .blg-card h3 { font-size: 32px; }
.blg-grid--single .blg-card p { flex: 0; font-size: 17px; }
.blg-card p { flex: 1; margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }
.blg-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }

.blg-post__lead { margin: 0 0 8px; font-size: 21px; line-height: 1.55; font-weight: 500; color: var(--ink); }
.blg-post h2 { margin: 44px 0 14px; font-family: var(--font-title); font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.blg-post p { margin: 0 0 16px; font-size: 18px; line-height: 1.7; color: var(--body); }
.blg-post ul { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.blg-post li { position: relative; padding-left: 30px; font-size: 18px; line-height: 1.65; color: var(--body); }
.blg-post li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); }
.blg-fig { margin: 30px 0 34px; }
.blg-fig img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(86, 55, 138, .6); }
.blg-fig figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--body); text-align: center; }
.blg-fig--cover { margin: 26px 0 8px; }
.article-card__thumb { overflow: hidden; }
.article-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blg-more { display: flex; align-items: center; gap: 18px; margin-top: 48px; padding: 22px 24px; border-radius: 24px; color: var(--ink); transition: transform .3s ease, box-shadow .3s ease; }
.blg-more:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 26px 50px -34px rgba(86, 55, 138, .6); }
.blg-more > svg { flex: none; color: var(--link); transition: transform .25s ease; }
.blg-more:hover > svg { transform: translateX(4px); }
.blg-more .icon-tile { flex: none; }
.blg-more__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.blg-more__text em { font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.blg-more__text b { font-family: var(--font-title); font-size: 19px; line-height: 1.25; }
.blg-more__text span { font-size: 15px; line-height: 1.5; color: var(--body); }
.blg-others { padding-top: 88px; padding-bottom: 72px; }
.blg-others .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .blg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blg-grid--single { grid-template-columns: minmax(0, 1fr); }
    .blg-grid--single .blg-card h2, .blg-grid--single .blg-card h3 { font-size: 26px; }
    .blg-grid--single .blg-card__body { padding: 26px; }
    .blg-others .card-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .blg-hero--post .hero__title--page { font-size: 40px; }
}
@media (max-width: 760px) {
    .blg-hero { padding-bottom: 40px; }
    .blg-hero__inner { gap: 18px; }
    .blg-hero--post .hero__title--page { font-size: 30px; }
    .blg-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .blg-card__body { padding: 20px; }
    .blg-card h2, .blg-card h3, .blg-grid--single .blg-card h2, .blg-grid--single .blg-card h3 { font-size: 20px; }
    .blg-grid--single .blg-card { flex-direction: column; }
    .blg-grid--single .blg-card__media { flex: none; border-right: 0; border-bottom: 1px solid var(--line); }
    .blg-grid--single .blg-card__body { padding: 20px; gap: 12px; }
    .blg-grid--single .blg-card p { font-size: 15px; }
    .blg-post__lead { font-size: 19px; }
    .blg-post h2 { margin-top: 34px; font-size: 24px; }
    .blg-post p, .blg-post li { font-size: 17px; }
    .blg-more { align-items: flex-start; gap: 14px; padding: 18px; margin-top: 36px; }
    .blg-more > svg { display: none; }
    .blg-others { padding-top: 52px; padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) { .blg-card, .blg-card__icon, .blg-more, .blg-more > svg { transition: none; } }
/* <<< Blog */

/* >>> Menu sept liens (généré) */
/* Menu à sept liens : sur les écrans d'ordinateur étroits, tout tient sur une ligne. */
.site-nav__link { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1120px) {
    .site-header { gap: 14px; padding-left: 20px; }
    .brand__logo { height: 36px; }
    .site-nav { gap: 13px; }
    .site-nav__link { font-size: 14px; }
    .site-header__actions { gap: 10px; }
    .site-header__cta { padding: 11px 16px; font-size: 14px; }
}
/* <<< Menu sept liens */

/* >>> Pages légales (généré) */
/* ---------- Pages légales (mentions légales, confidentialité) : même colonne de lecture que les articles ---------- */
.lgl-hero { padding-bottom: 48px; }
.lgl h2 { scroll-margin-top: 110px; }
.lgl p a, .lgl li a, .lgl dd a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lgl-toc { margin-bottom: 8px; padding: 20px 24px; border-radius: 20px; background: var(--card2); border: 1px solid var(--line); }
.lgl-toc span { display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); }
.lgl-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.lgl-toc li { padding: 0; font-size: 15px; line-height: 1.3; }
.lgl-toc li::before { display: none; }
.lgl .lgl-toc a { display: inline-block; text-decoration: none; padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; color: var(--ink); transition: border-color .2s ease, color .2s ease; }
.lgl .lgl-toc a:hover { color: var(--link); border-color: var(--link); }
.lgl-card { margin: 0 0 18px; padding: 6px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.lgl-card div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; padding: 14px 0; }
.lgl-card div + div { border-top: 1px solid var(--line); }
.lgl-card dt { font-size: 14px; font-weight: 700; color: var(--body); }
.lgl-card dd { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .lgl-hero { padding-bottom: 32px; }
    .lgl-toc { padding: 16px; }
    .lgl-card { padding: 4px 18px; }
    .lgl-card div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
    .lgl-card dd { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .lgl-toc a { transition: none; } }
/* <<< Pages légales */

/* >>> Encart confidentialité (généré) */
.section--alt .xpp-ai--plain { background: var(--bg); }
/* <<< Encart confidentialité */

/* >>> Mobile : lisibilité et zones tactiles (généré) */
@media (max-width: 760px) {
    /* Aucun texte utile sous 12px (hors illustrations décoratives). */
    .pill-badge__tag, .team__role, .xpp-choose__hint, .xpp-opt__kicker, .xpp-opt__chip,
    .xpa-to span, .tag, .xab-fig figcaption, .xre-facts dt, .xre-nav__link em { font-size: 12px; }
    /* Zones tactiles d'au moins 44px de haut. */
    .brand { min-height: 44px; }
    .theme-toggle::after { content: ""; position: absolute; inset: -8px -4px; }
    .link-strong, .xre-back { display: inline-flex; align-items: center; min-height: 44px; }
    .xpa-to, .xab-video__sound { min-height: 44px; }
    .site-footer__col { gap: 0; }
    .site-footer__col h2 { margin-bottom: 8px; }
    .site-footer__col a, .site-footer__legal a { display: inline-block; padding: 11px 0; }
    .site-footer__legal { gap: 0 24px; align-items: center; }
    .site-footer__legal span { flex-basis: 100%; }
    /* 16px dans les champs : évite le zoom automatique d'iOS à la saisie. */
    .contact-field input[type="text"], .contact-field input[type="email"], .contact-field input[type="tel"], .contact-field textarea { font-size: 16px; }
}
/* <<< Mobile : lisibilité et zones tactiles */

/* >>> Photos 2025 (généré) */
.team__credit { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.xab-person__photo { width: 104px; height: 104px; flex-shrink: 0; border-radius: 26px; object-fit: cover; box-shadow: 0 16px 30px -18px rgba(86, 55, 138, .75); }
.xab-credit { margin-top: 14px; text-align: right; font-size: 12.5px; color: var(--body); opacity: .85; }
.xab-work { margin-top: 28px; aspect-ratio: 1600 / 727; }
@media (max-width: 760px) {
    .xab-person__photo { width: 88px; height: 88px; border-radius: 22px; }
    .xab-credit { text-align: left; font-size: 12px; }
    .xab-work { margin-top: 20px; aspect-ratio: 3 / 2; }
}
/* <<< Photos 2025 */

/* >>> Animations hors écran (généré) */
/* Classe posée par site.js sur les sections qui ne sont pas à l'écran. */
.anim-paused, .anim-paused *, .anim-paused *::before, .anim-paused *::after { animation-play-state: paused !important; }
/* <<< Animations hors écran */