/* Genere par tools/build-css.php - NE PAS EDITER.
   Source : assets/styles/app.css et ses 13 imports.
   Regenerer avec : composer build-css */

/* Feuille racine : uniquement des @import et les @font-face.
   Deux règles à respecter ici.
   1. Les @import doivent précéder toute autre règle (sauf @charset/@layer) :
      un @import placé après un @font-face est invalide et ignoré par le navigateur.
   2. L'ordre des @import fait la cascade. Aucune règle ne doit être écrite dans
      le corps de ce fichier : elle l'emporterait sur tous les partials importés,
      media queries comprises. C'est ce qui laissait les grilles en quatre
      colonnes sur téléphone. */

/* ===== ./vendor/bootstrap-icons.css ===== */
/*!
 * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/)
 * Copyright 2019-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 *
 * Sous-ensemble local limite aux icones reellement utilisees par le site.
 * Fichier genere : ne pas editer a la main, relancer tools/icons/build-icons.py.
 */
@font-face {
    font-display: block;
    font-family: bootstrap-icons;
    src: url("../fonts/bootstrap-icons.subset-W_yjpHV.woff2") format('woff2');
}

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bi-arrow-left::before {
    content: "\f12f";
}

.bi-arrow-right::before {
    content: "\f138";
}

.bi-award::before {
    content: "\f154";
}

.bi-book::before {
    content: "\f194";
}

.bi-bookmark::before {
    content: "\f1a2";
}

.bi-calculator::before {
    content: "\f1e0";
}

.bi-chat-dots::before {
    content: "\f24a";
}

.bi-check-circle::before {
    content: "\f26b";
}

.bi-check2::before {
    content: "\f272";
}

.bi-clock::before {
    content: "\f293";
}

.bi-cloud-arrow-up::before {
    content: "\f297";
}

.bi-cloud-slash::before {
    content: "\f2b8";
}

.bi-code-slash::before {
    content: "\f2c6";
}

.bi-cpu::before {
    content: "\f2d6";
}

.bi-diagram-3::before {
    content: "\f2ee";
}

.bi-envelope::before {
    content: "\f32f";
}

.bi-exclamation-triangle::before {
    content: "\f33b";
}

.bi-file-earmark-text::before {
    content: "\f38b";
}

.bi-gear-wide-connected::before {
    content: "\f3e3";
}

.bi-gear::before {
    content: "\f3e5";
}

.bi-geo-alt::before {
    content: "\f3e8";
}

.bi-gift::before {
    content: "\f3ec";
}

.bi-graph-up::before {
    content: "\f3f2";
}

.bi-grid-3x3::before {
    content: "\f3fa";
}

.bi-grid::before {
    content: "\f3fc";
}

.bi-hdd-network::before {
    content: "\f40d";
}

.bi-heart::before {
    content: "\f417";
}

.bi-house::before {
    content: "\f425";
}

.bi-key::before {
    content: "\f44f";
}

.bi-lightbulb::before {
    content: "\f46b";
}

.bi-lightning::before {
    content: "\f46f";
}

.bi-map::before {
    content: "\f47f";
}

.bi-pause-fill::before {
    content: "\f4c3";
}

.bi-pencil-square::before {
    content: "\f4ca";
}

.bi-people::before {
    content: "\f4d0";
}

.bi-play-fill::before {
    content: "\f4f4";
}

.bi-search::before {
    content: "\f52a";
}

.bi-shield-check::before {
    content: "\f52f";
}

.bi-shield-lock::before {
    content: "\f538";
}

.bi-signpost-split::before {
    content: "\f549";
}

.bi-sliders::before {
    content: "\f56b";
}

.bi-speedometer2::before {
    content: "\f580";
}

.bi-telephone::before {
    content: "\f5c1";
}

.bi-trophy::before {
    content: "\f5e7";
}

.bi-truck::before {
    content: "\f5ea";
}

.bi-unlock::before {
    content: "\f600";
}

.bi-check-lg::before {
    content: "\f633";
}

.bi-x-lg::before {
    content: "\f659";
}

.bi-graph-up-arrow::before {
    content: "\f673";
}

.bi-gpu-card::before {
    content: "\f6e2";
}

.bi-mortarboard::before {
    content: "\f6fe";
}

.bi-bag-heart::before {
    content: "\f705";
}

.bi-clipboard2-data::before {
    content: "\f727";
}

.bi-cup-hot::before {
    content: "\f7eb";
}

.bi-buildings::before {
    content: "\f87d";
}

.bi-database-lock::before {
    content: "\f8c0";
}


/* ===== ./_variables.css ===== */
:root {
    /* Background */
    --bg-primary: #0a0a1a;
    --bg-secondary: #0f0f2e;
    --bg-card: rgba(15, 15, 46, 0.6);
    --bg-card-hover: rgba(25, 25, 60, 0.8);

    /* Accent gradients */
    --accent-start: #6366f1;
    --accent-mid: #8b5cf6;
    --accent-end: #06b6d4;
    --gradient-main: linear-gradient(135deg, var(--accent-start), var(--accent-mid), var(--accent-end));
    --gradient-text: linear-gradient(135deg, var(--accent-start), var(--accent-end));

    /* Aplats portant du texte blanc : même distinction que --text-accent plus bas.
       --gradient-main va jusqu'au cyan #06b6d4, où le blanc tombe à 2,43:1 - très
       en dessous des 4,5:1 exigés. Il reste donc réservé au décor (traits, halos,
       bordures), jamais sous du texte. Les deux dégradés ci-dessous tiennent
       respectivement 6,29:1 et 5,70:1 au pire point de leur longueur. */
    --gradient-surface: linear-gradient(135deg, #4f46e5, #6d28d9);
    --gradient-btn: linear-gradient(135deg, #4f46e5, #7c3aed);
    /* Pendant du dégradé pour du texte violet sur fond clair : #6366f1 plafonnait
       à 4,47:1 sur blanc. */
    --accent-on-light: #4f46e5;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #e2e8f0;
    --text-muted: #94a3b8;
    /* Texte d'accent et aplats sont deux jetons distincts : --accent-mid (#8b5cf6)
       reste réservé aux dégradés, bordures et fonds. En texte il plafonne à 4,1:1
       sur les fonds de carte, sous le seuil RGAA de 4,5:1. Tout texte ou icône
       violet passe donc par --text-accent. */
    --text-accent: #a78bfa;

    /* Borders */
    --border-color: rgba(99, 102, 241, 0.2);
    --border-glow: rgba(139, 92, 246, 0.4);

    /* Glassmorphism */
    --glass-bg: rgba(15, 15, 46, 0.4);
    --glass-border: rgba(99, 102, 241, 0.15);
    --glass-blur: 20px;

    /* Shadows */
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 16px 48px rgba(99, 102, 241, 0.2);

    /* Typography */
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Space Grotesk', sans-serif;

    /* Spacing */
    --section-padding: 100px 0;
    --container-width: 1200px;
    --container-padding: 0 24px;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}


/* ===== ./_animations.css ===== */
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Particle animation for hero */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent-mid);
    border-radius: 50%;
    opacity: 0;
    animation: floatParticle linear infinite;
}

.particle:nth-child(1) { left: 10%; animation-duration: 8s; animation-delay: 0s; width: 3px; height: 3px; }
.particle:nth-child(2) { left: 20%; animation-duration: 10s; animation-delay: 1s; width: 5px; height: 5px; }
.particle:nth-child(3) { left: 30%; animation-duration: 7s; animation-delay: 2s; }
.particle:nth-child(4) { left: 40%; animation-duration: 9s; animation-delay: 0.5s; width: 6px; height: 6px; }
.particle:nth-child(5) { left: 50%; animation-duration: 11s; animation-delay: 1.5s; width: 3px; height: 3px; }
.particle:nth-child(6) { left: 60%; animation-duration: 8s; animation-delay: 3s; }
.particle:nth-child(7) { left: 70%; animation-duration: 10s; animation-delay: 2.5s; width: 5px; height: 5px; }
.particle:nth-child(8) { left: 80%; animation-duration: 7s; animation-delay: 0.8s; }
.particle:nth-child(9) { left: 90%; animation-duration: 9s; animation-delay: 1.2s; width: 3px; height: 3px; }
.particle:nth-child(10) { left: 15%; animation-duration: 12s; animation-delay: 3.5s; width: 4px; height: 4px; }
.particle:nth-child(11) { left: 25%; animation-duration: 6s; animation-delay: 0.3s; width: 2px; height: 2px; }
.particle:nth-child(12) { left: 35%; animation-duration: 8s; animation-delay: 2.2s; }
.particle:nth-child(13) { left: 45%; animation-duration: 10s; animation-delay: 1.8s; width: 5px; height: 5px; }
.particle:nth-child(14) { left: 55%; animation-duration: 7s; animation-delay: 0.7s; width: 3px; height: 3px; }
.particle:nth-child(15) { left: 65%; animation-duration: 9s; animation-delay: 2.8s; }
.particle:nth-child(16) { left: 75%; animation-duration: 11s; animation-delay: 1.1s; width: 4px; height: 4px; }
.particle:nth-child(17) { left: 85%; animation-duration: 8s; animation-delay: 3.2s; width: 2px; height: 2px; }
.particle:nth-child(18) { left: 95%; animation-duration: 10s; animation-delay: 0.6s; }
.particle:nth-child(19) { left: 5%; animation-duration: 7s; animation-delay: 2.1s; width: 5px; height: 5px; }
.particle:nth-child(20) { left: 48%; animation-duration: 9s; animation-delay: 1.4s; width: 3px; height: 3px; }
.particle:nth-child(21) { left: 8%; animation-duration: 11s; animation-delay: 0.4s; width: 3px; height: 3px; }
.particle:nth-child(22) { left: 18%; animation-duration: 7s; animation-delay: 1.7s; width: 2px; height: 2px; }
.particle:nth-child(23) { left: 28%; animation-duration: 9s; animation-delay: 3.1s; width: 4px; height: 4px; }
.particle:nth-child(24) { left: 38%; animation-duration: 6s; animation-delay: 0.9s; width: 3px; height: 3px; }
.particle:nth-child(25) { left: 52%; animation-duration: 10s; animation-delay: 2.4s; width: 5px; height: 5px; }
.particle:nth-child(26) { left: 62%; animation-duration: 8s; animation-delay: 0.2s; width: 2px; height: 2px; }
.particle:nth-child(27) { left: 72%; animation-duration: 12s; animation-delay: 1.9s; }
.particle:nth-child(28) { left: 82%; animation-duration: 7s; animation-delay: 3.4s; width: 4px; height: 4px; }
.particle:nth-child(29) { left: 92%; animation-duration: 9s; animation-delay: 0.7s; width: 3px; height: 3px; }
.particle:nth-child(30) { left: 3%; animation-duration: 10s; animation-delay: 2.6s; width: 2px; height: 2px; }
.particle:nth-child(31) { left: 13%; animation-duration: 8s; animation-delay: 1.3s; width: 5px; height: 5px; }
.particle:nth-child(32) { left: 23%; animation-duration: 11s; animation-delay: 0.1s; width: 3px; height: 3px; }
.particle:nth-child(33) { left: 33%; animation-duration: 6s; animation-delay: 2.9s; }
.particle:nth-child(34) { left: 43%; animation-duration: 9s; animation-delay: 1.6s; width: 4px; height: 4px; }
.particle:nth-child(35) { left: 57%; animation-duration: 7s; animation-delay: 3.7s; width: 2px; height: 2px; }
.particle:nth-child(36) { left: 67%; animation-duration: 10s; animation-delay: 0.5s; width: 3px; height: 3px; }
.particle:nth-child(37) { left: 77%; animation-duration: 8s; animation-delay: 2.3s; width: 5px; height: 5px; }
.particle:nth-child(38) { left: 87%; animation-duration: 11s; animation-delay: 1.0s; width: 2px; height: 2px; }
.particle:nth-child(39) { left: 97%; animation-duration: 7s; animation-delay: 3.0s; width: 4px; height: 4px; }
.particle:nth-child(40) { left: 42%; animation-duration: 9s; animation-delay: 0.3s; width: 3px; height: 3px; }
.particle:nth-child(41) { left: 6%; animation-duration: 8s; animation-delay: 1.8s; width: 2px; height: 2px; }
.particle:nth-child(42) { left: 16%; animation-duration: 10s; animation-delay: 0.3s; width: 4px; height: 4px; }
.particle:nth-child(43) { left: 22%; animation-duration: 6s; animation-delay: 2.7s; width: 3px; height: 3px; }
.particle:nth-child(44) { left: 34%; animation-duration: 11s; animation-delay: 1.1s; width: 5px; height: 5px; }
.particle:nth-child(45) { left: 46%; animation-duration: 7s; animation-delay: 3.3s; width: 2px; height: 2px; }
.particle:nth-child(46) { left: 54%; animation-duration: 9s; animation-delay: 0.8s; width: 3px; height: 3px; }
.particle:nth-child(47) { left: 64%; animation-duration: 12s; animation-delay: 2.0s; width: 4px; height: 4px; }
.particle:nth-child(48) { left: 74%; animation-duration: 6s; animation-delay: 1.5s; width: 2px; height: 2px; }
.particle:nth-child(49) { left: 84%; animation-duration: 8s; animation-delay: 3.6s; width: 5px; height: 5px; }
.particle:nth-child(50) { left: 94%; animation-duration: 10s; animation-delay: 0.6s; width: 3px; height: 3px; }
.particle:nth-child(51) { left: 11%; animation-duration: 7s; animation-delay: 2.2s; width: 4px; height: 4px; }
.particle:nth-child(52) { left: 26%; animation-duration: 9s; animation-delay: 0.9s; width: 2px; height: 2px; }
.particle:nth-child(53) { left: 36%; animation-duration: 11s; animation-delay: 3.8s; width: 3px; height: 3px; }
.particle:nth-child(54) { left: 44%; animation-duration: 6s; animation-delay: 1.4s; width: 5px; height: 5px; }
.particle:nth-child(55) { left: 58%; animation-duration: 8s; animation-delay: 2.5s; width: 2px; height: 2px; }
.particle:nth-child(56) { left: 66%; animation-duration: 10s; animation-delay: 0.1s; width: 4px; height: 4px; }
.particle:nth-child(57) { left: 78%; animation-duration: 7s; animation-delay: 1.7s; width: 3px; height: 3px; }
.particle:nth-child(58) { left: 88%; animation-duration: 12s; animation-delay: 3.2s; width: 2px; height: 2px; }
.particle:nth-child(59) { left: 2%; animation-duration: 9s; animation-delay: 0.4s; width: 5px; height: 5px; }
.particle:nth-child(60) { left: 50%; animation-duration: 8s; animation-delay: 2.8s; width: 3px; height: 3px; }

@keyframes floatParticle {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

/* Glow effect */
.glow {
    position: relative;
}
.glow::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-main);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-normal);
    filter: blur(15px);
}
.glow:hover::before {
    opacity: 0.6;
}

/* Gradient border */
.gradient-border {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--gradient-main);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.3;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}
.gradient-border:hover::before {
    opacity: 0.7;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(90deg, var(--accent-start), var(--accent-mid), var(--accent-end), var(--accent-start));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-slide 4s ease infinite;
}

@keyframes gradient-slide {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Pulse animation */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.4);
    }
}

/* Float animation */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Grid background effect */
.grid-bg {
    position: relative;
}
.grid-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
    pointer-events: none;
}

/* Typing cursor */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.typing-cursor::after {
    content: '|';
    animation: blink 1s infinite;
    color: var(--text-accent);
}


/* ===== ./_reveal.css ===== */
/* Révélation au défilement (remplace AOS, voir assets/controllers/reveal_controller.js).
   Les blocs ne sont masqués que par le contrôleur : sans JavaScript, la page reste
   entièrement lisible et le contenu au-dessus de la ligne de flottaison s'affiche
   immédiatement. La transition ne porte pas sur l'opacité, pour ne pas être captée
   à mi-fondu par les mesures de contraste. */

.reveal-init {
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.reveal-init[data-aos='fade-up'] {
    transform: translate3d(0, 32px, 0);
}

.reveal-init[data-aos='fade-down'] {
    transform: translate3d(0, -32px, 0);
}

.reveal-init[data-aos='fade-right'] {
    transform: translate3d(-32px, 0, 0);
}

.reveal-init[data-aos='fade-left'] {
    transform: translate3d(32px, 0, 0);
}

.reveal-shown {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/* Sur téléphone, un bloc large décalé de 32 px sur le côté dépasse la largeur de
   la page tant qu'il n'est pas révélé. Les entrées latérales deviennent donc
   verticales sous 768 px. */
@media (max-width: 768px) {
    .reveal-init[data-aos='fade-right'],
    .reveal-init[data-aos='fade-left'] {
        transform: translate3d(0, 24px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-init {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ===== ./_hero.css ===== */
/* Hero sections */
.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 50%, var(--bg-secondary) 0%, var(--bg-primary) 70%);
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    padding: 0 24px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    color: var(--accent-end);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 32px;
    backdrop-filter: blur(var(--glass-blur));
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto 40px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Page hero (smaller variant) */
.hero-page {
    min-height: 50vh;
    padding-top: 120px;
}

.hero-page h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

/* Hero gradient orb */
.hero-orb {
    position: absolute;
    /* Borné au viewport : à 600 px fixes, l'orbe dépassait de 130 px de chaque
       côté sur téléphone et étirait la page au-delà de sa largeur. La marge tient
       compte de l'animation orbDrift, qui l'agrandit de 15 % et le décale. */
    width: min(600px, 60vw);
    height: min(600px, 60vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    animation: orbDrift 12s ease-in-out infinite;
}

@keyframes orbDrift {
    0%   { transform: translate(-50%, -50%) scale(1); }
    25%  { transform: translate(-35%, -55%) scale(1.15); }
    50%  { transform: translate(-55%, -45%) scale(0.9); }
    75%  { transform: translate(-45%, -55%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}


/* ===== ./_cards.css ===== */
/* Service cards */
.card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    backdrop-filter: blur(var(--glass-blur));
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--border-glow);
    box-shadow: var(--shadow-card-hover);
    background: var(--bg-card-hover);
}

.card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--gradient-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto 20px;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.card-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.card-link {
    display: inline-flex;
    align-items: center;
    /* 24 px de haut au minimum : seuil de cible tactile du WCAG 2.2 (2.5.8). */
    min-height: 24px;
    gap: 6px;
    color: var(--accent-end);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: gap var(--transition-normal);
}

.card-link:hover {
    gap: 12px;
}

/* Project cards */
.project-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    backdrop-filter: blur(var(--glass-blur));
}

.project-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-glow);
    box-shadow: var(--shadow-card-hover);
}

.project-card-image {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 3rem;
    position: relative;
    overflow: hidden;
}

/* Le conteneur est en flex : sans ceci, <picture> serait l'item flex et le
   height: 100% de l'image se resoudrait contre une boite sans hauteur. */
.project-card-image picture {
    display: contents;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card-body {
    padding: 24px;
}

.project-card-sector {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 50px;
    color: var(--accent-end);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 12px;
}

.project-card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.project-card-client {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

span.tech-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 10px !important;
    margin-bottom: 12px !important;
    background: rgba(139, 92, 246, 0.1) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: 50px !important;
    color: var(--text-accent) !important;
    font-family: var(--font-body) !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    cursor: default;
    text-decoration: none;
    box-shadow: none;
    transform: none;
    min-height: 0;
    min-width: 0;
    height: auto;
    width: auto;
}

.project-result {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-end);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Value cards */
.value-card {
    text-align: center;
    padding: 40px 24px;
}

.value-card .card-icon {
    margin: 0 auto 20px;
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
}

/* Stat cards */
.stat-card {
    text-align: center;
    padding: 32px;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.stat-source {
    color: var(--accent-end);
    font-size: 0.75rem;
    margin-top: 10px;
    opacity: 0.6;
    font-style: italic;
}

/* Cartes d'engagement (page services) : les trois façons d'entrer en relation,
   placées avant le catalogue technique. La carte du milieu est celle qu'on
   recommande, d'où le .glow posé dans le gabarit. */
.engagement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.engagement-card {
    position: relative;
    padding-top: 40px;
}

.engagement-step {
    position: absolute;
    top: -16px;
    left: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gradient-surface);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
}

.engagement-price {
    color: var(--text-accent);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.engagement-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.engagement-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.engagement-list li::before {
    content: "\f272"; /* bi-check2, déjà dans le sous-ensemble */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-end);
    font-size: 0.85rem;
}

.engagement-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 40px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Rappel de l'audit gratuit en page d'accueil : trois lignes plutôt que trois
   cartes, pour ne pas répéter la maquette du bloc complet de /contact et rester
   lisible juste au-dessus du carrousel. */
.audit-teaser {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.audit-teaser-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.audit-teaser-item i {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--accent-end);
    line-height: 1.5;
}

.audit-teaser-item strong {
    display: block;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.audit-teaser-item div {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ===== ./_footer.css ===== */
/* Footer */
.site-footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--glass-border);
    padding: 80px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

.footer-brand {
    max-width: 320px;
}

.footer-logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-logo .logo-ia {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition-normal);
    text-decoration: none;
    font-size: 1.1rem;
}

.footer-social a:hover {
    color: var(--text-primary);
    border-color: var(--accent-start);
    background: rgba(99, 102, 241, 0.1);
}

.footer-heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--accent-end);
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer-version {
    margin-left: 8px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.75;
    letter-spacing: 0.02em;
}

.footer-contact-item i {
    color: var(--text-accent);
    margin-top: 3px;
}

.footer-bottom {
    border-top: 1px solid var(--glass-border);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-bottom p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
    color: var(--accent-end);
}


/* ===== ./_search.css ===== */
/* Search button in navbar */
.nav-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-search-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-glow);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.25);
}

/* Backdrop */
.search-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9998;
}

.search-backdrop.is-open {
    display: block;
}

/* Modal */
.search-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: 9999;
    width: 90%;
    max-width: 580px;
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.search-modal.is-open {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.search-modal-inner {
    background: rgba(15, 15, 46, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg);
    box-shadow:
        0 0 40px rgba(99, 102, 241, 0.15),
        0 24px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Input */
.search-input-wrapper {
    position: relative;
    border-bottom: 1px solid var(--glass-border);
}

.search-input-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 18px 20px 18px 50px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* Results */
.search-results {
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-glow) transparent;
}

.search-result-item {
    display: block;
    padding: 14px 20px;
    border-bottom: 1px solid var(--glass-border);
    transition: background var(--transition-fast);
    text-decoration: none;
    color: inherit;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(99, 102, 241, 0.1);
}

.search-result-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.search-result-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-no-result {
    padding: 24px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Footer */
.search-footer {
    padding: 10px 20px;
    border-top: 1px solid var(--glass-border);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

.search-shortcut-sep {
    margin: 0 6px;
}

kbd {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.4;
}


/* ===== ./_base.css ===== */
/* Socle : remises à zéro, mise en page et composants généraux.
   Sorti de app.css pour que _responsive.css, importé après, puisse écraser ces
   règles : une règle du corps d'une feuille l'emporte toujours sur celles de ses
   @import, media query comprise. Les grilles restaient donc en quatre colonnes
   sur téléphone. */

/* Reset & base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* La navbar est en position: fixed sur ~72 px de haut. Sans cette marge de
       défilement, l'élément qui reçoit le focus - après le lien d'évitement, ou
       en tabulant vers le haut d'une section - se retrouve caché dessous
       (WCAG 2.2, critère 2.4.11 « Focus Not Obscured »). */
    scroll-padding-top: 96px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Titre de section réservé aux lecteurs d'écran : conserve une hiérarchie de
   titres continue là où la maquette n'affiche pas d'intertitre. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip to content */
.skip-to-content {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    z-index: 10000;
}

.skip-to-content:focus {
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 24px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    top: 0;
    left: 16px;
    background: var(--accent-start);
    color: white;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Focus visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent-start);
    outline-offset: 2px;
    border-radius: 2px;
}

.btn:focus-visible {
    outline: 3px solid var(--accent-start);
    outline-offset: 3px;
}

img {
    max-width: 100%;
    height: auto;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--container-padding);
}

/* Sections */
.section {
    padding: var(--section-padding);
    position: relative;
}

.section-alt {
    background: var(--bg-secondary);
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 16px;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 60px;
    line-height: 1.7;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: all var(--transition-normal);
}

.navbar.scrolled {
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(20px);
    padding: 10px 0;
}

.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo .logo-ia {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-logo-img {
    height: 40px;
    width: auto;
}

.navbar.scrolled .nav-logo-img {
    height: 34px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color var(--transition-fast);
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-primary);
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-main);
    border-radius: 1px;
}

.nav-cta .btn-primary {
    padding: 10px 24px;
    font-size: 0.9rem;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition-normal);
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--transition-normal);
    text-decoration: none;
}

.btn-primary {
    background: var(--gradient-btn);
    color: white;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--accent-start);
    background: rgba(99, 102, 241, 0.05);
}

.btn-sm {
    padding: 10px 20px;
    font-size: 0.9rem;
}

/* Grids */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Timeline / Process */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}

.process-step {
    text-align: center;
    position: relative;
}

.process-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0 auto 20px;
    position: relative;
    z-index: 1;
}

.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(50% + 28px);
    width: calc(100% - 56px);
    height: 2px;
    background: var(--gradient-main);
    opacity: 0.3;
}

.process-step-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.process-step-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Carousel */
.carousel {
    position: relative;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide {
    min-width: 100%;
    padding: 0 16px;
}

.carousel-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    backdrop-filter: blur(var(--glass-blur));
    max-width: 800px;
    margin: 0 auto;
}

.carousel-quote {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 24px;
    font-style: italic;
}

.carousel-quote::before {
    content: '\201C';
    font-size: 3rem;
    color: var(--text-accent);
    line-height: 0;
    vertical-align: -0.5em;
    margin-right: 4px;
}

.carousel-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.carousel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 1.1rem;
}

.carousel-author-info strong {
    display: block;
    color: var(--text-primary);
    font-size: 1rem;
}

.carousel-author-info span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Puces et bouton pause sur une même ligne, le bouton légèrement détaché pour
   qu'il ne se lise pas comme une puce de plus. */
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 32px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    /* 14 px : avec des puces de 10 px, les zones tactiles de 24 px ne se
       chevauchent plus (WCAG 2.2, critère 2.5.8). */
    gap: 14px;
}

/* Bouton pause / lecture du carrousel (WCAG 2.2.2). Les deux glyphes sont dans
   le DOM et c'est la classe is-playing qui décide lequel s'affiche : pas de
   réécriture d'icône en JavaScript, donc rien à resynchroniser. */
.carousel-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.carousel-play:hover {
    color: var(--text-primary);
    border-color: var(--accent-start);
}

.carousel-play .bi-pause-fill { display: none; }
.carousel-play .bi-play-fill { display: block; }
.carousel-play.is-playing .bi-pause-fill { display: block; }
.carousel-play.is-playing .bi-play-fill { display: none; }

.carousel-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--glass-border);
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    padding: 0;
}

/* Étend la zone tactile à 24 px sans grossir la puce. */
.carousel-dot::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
}

.carousel-dot.active {
    background: var(--accent-mid);
    width: 32px;
    border-radius: 5px;
}

/* CTA Banner */
.cta-section {
    background: var(--gradient-surface);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
}

.cta-section h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.cta-section p {
    /* Blanc opaque : à 1,15 rem c'est du texte normal, donc seuil de 4,5:1.
       L'ancien blanc à 85 % tombait à 3,53:1 même sur le dégradé assombri. */
    color: #ffffff;
    font-size: 1.15rem;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.cta-section .btn {
    background: white;
    /* --accent-start plafonnait à 4,47:1 sur blanc, sous le seuil. */
    color: var(--accent-on-light);
    position: relative;
    z-index: 1;
}

.cta-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* Contact form */
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: start;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color var(--transition-fast);
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent-start);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.form-group select option {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.form-error {
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 6px;
}

.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.contact-info-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    backdrop-filter: blur(var(--glass-blur));
    margin-bottom: 24px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.contact-info-text strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.contact-info-text span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* About page */
.about-profile {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 48px;
    align-items: start;
}

.profile-image {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 4rem;
    overflow: hidden;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.profile-role {
    color: var(--accent-end);
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 24px;
}

.profile-bio {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
}

/* Listes des pages legales : meme rythme de lecture que .profile-bio, avec une
   puce discrete a l'accent plutot que le disque par defaut. */
.legal-list {
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0 0 16px;
    padding-left: 22px;
    list-style: none;
}

.legal-list li {
    position: relative;
    margin-bottom: 10px;
}

.legal-list li::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-end);
}

/* Team section */
.team-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 48px;
    text-align: center;
    backdrop-filter: blur(var(--glass-blur));
}

/* Service detail page */
.service-detail-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 40px;
}

.service-detail-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    background: var(--gradient-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    flex-shrink: 0;
}

.service-detail-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 48px;
    align-items: start;
}

.service-content h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 32px 0 16px;
}

/* h3 et h4 partagent la même apparence : le niveau du titre suit la hiérarchie
   du document, pas la taille voulue à l'écran. */
.service-content h3,
.service-content h4 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 32px 0 16px;
}

.service-content p,
.service-content li {
    color: var(--text-secondary);
    line-height: 1.8;
}

.service-content ul {
    list-style: none;
    padding: 0;
}

.service-content ul li {
    padding: 8px 0 8px 24px;
    position: relative;
}

.service-content ul li::before {
    content: '\f26a';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    color: var(--accent-end);
}

.service-sidebar {
    position: sticky;
    top: 100px;
}

.service-benefits {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-bottom: 24px;
}

.service-benefits h3,
.service-benefits h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.service-benefits li {
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.service-benefits li:last-child {
    border-bottom: none;
}

.service-benefits li i {
    color: var(--accent-end);
}

/* Realisation detail */
.realisation-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.realisation-detail-image {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 3rem;
    overflow: hidden;
}

/* Meme raison que sur .project-card-image : le conteneur est en flex. */
.realisation-detail-image picture {
    display: contents;
}

.realisation-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.realisation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.realisation-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 48px 0;
}

.result-item {
    text-align: center;
    padding: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.result-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.result-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Contact direct, à défaut de grille tarifaire */
.contact-direct {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.contact-direct-note {
    margin: 24px auto 0;
    max-width: 640px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Note de confidentialité sous les études de cas */
.case-study-note {
    margin-top: 32px;
    padding: 16px 20px;
    border-left: 2px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.7;
    max-width: 760px;
}

/* Testimonial box in realisation */
.testimonial-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-top: 32px;
}

.testimonial-box blockquote {
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
    font-size: 1.05rem;
}

.testimonial-box blockquote::before {
    content: '\201C';
    font-size: 2.5rem;
    color: var(--text-accent);
    line-height: 0;
    vertical-align: -0.4em;
    margin-right: 4px;
}

.testimonial-box cite {
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.9rem;
}

/* Legal pages */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-content h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 40px 0 16px;
}

.legal-content h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 24px 0 12px;
}

.legal-content p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
}

.legal-content ul {
    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: 24px;
    margin-bottom: 16px;
}

/* Flash messages */
.flash-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    padding: 16px 24px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.flash-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 16px 24px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

/* Breadcrumb — masqué visuellement, visible pour SEO et lecteurs d'écran */
.breadcrumb {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ===== ./_schema.css ===== */
/* Schémas d'intégration des réalisations (voir templates/_partials/_schema*.twig).

   Trois rôles, trois traitements, et c'est la couleur qui porte le propos :
   l'existant en gris bleuté neutre parce qu'il ne bouge pas, le noyau en
   violet, l'humain en cyan - la seule teinte qui n'appartienne qu'à lui, pour
   qu'il ne se lise pas comme un composant technique de plus.

   Tout est animé en CSS : aucun script, donc rien à autoriser dans la CSP. */

.schema-frame {
    /* Le schéma défile dans son propre cadre plutôt que d'élargir la page :
       c'est ce qui garantit l'absence de débordement horizontal à 320 px. */
    overflow-x: auto;
    margin-bottom: 48px;
}

.schema {
    display: block;
    width: 100%;
    height: auto;
    /* En dessous de cette largeur le texte du SVG devient illisible : mieux
       vaut faire défiler le cadre que réduire indéfiniment. */
    min-width: 520px;
    max-width: 760px;
    margin-inline: auto;
}

/* Même traitement que .case-study-note : les deux disent au lecteur ce qu'il
   ne doit pas surinterpréter, elles doivent se lire pareil. */
.schema-note {
    margin: -24px 0 48px;
    padding: 16px 20px;
    border-left: 2px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.7;
    max-width: 760px;
}

/* ---- Typographie interne ---- */
.s-label {
    font-family: var(--font-body);
    font-size: 12.5px;
    fill: var(--text-secondary);
}

.s-label--sm {
    font-family: var(--font-body);
    font-size: 11px;
    fill: var(--text-muted);
}

.s-titre {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    fill: var(--text-primary);
}

.s-coeur {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    fill: #fff;
}

.s-eyebrow {
    font-family: var(--font-body);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    fill: var(--text-muted);
}

.s-chiffre {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    fill: var(--text-primary);
}

/* ---- Les quatre rôles ---- */
.s-existant rect {
    fill: rgba(148, 163, 184, 0.07);
    stroke: rgba(148, 163, 184, 0.28);
}

.s-titre--socle {
    fill: var(--text-secondary);
}

.s-couche > rect {
    fill: rgba(139, 92, 246, 0.12);
    stroke: rgba(139, 92, 246, 0.45);
}

.s-fonction rect {
    fill: rgba(139, 92, 246, 0.1);
    stroke: rgba(139, 92, 246, 0.4);
}

.s-humain rect {
    fill: rgba(6, 182, 212, 0.1);
    stroke: rgba(6, 182, 212, 0.5);
}

.s-humain .s-titre {
    fill: #67e8f9;
}

.s-benef rect {
    fill: rgba(99, 102, 241, 0.08);
    stroke: rgba(99, 102, 241, 0.3);
}

/* ---- Flux ---- */
.s-flux {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 9;
    animation: schemaFlux 1.2s linear infinite;
}

.s-flux--neutre {
    stroke: rgba(148, 163, 184, 0.55);
}

.s-flux--accent {
    stroke: url(#schemaFlux);
}

/* Sens inverse : ce flux remonte vers le noyau, il ne descend pas. */
.s-flux--humain {
    stroke: rgba(6, 182, 212, 0.7);
    animation-direction: reverse;
}

@keyframes schemaFlux {
    to { stroke-dashoffset: -24; }
}

/* ---- Le noyau ---- */
.s-noyau {
    transform-box: fill-box;
    transform-origin: center;
    animation: schemaRespire 4s ease-in-out infinite;
}

@keyframes schemaRespire {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

.s-anneau {
    transform-box: fill-box;
    transform-origin: center;
    animation: schemaAnneau 3.4s ease-out infinite;
}

.s-anneau--2 {
    animation-delay: 1.7s;
}

@keyframes schemaAnneau {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.75); opacity: 0; }
}

.s-flotte {
    transform-box: fill-box;
    transform-origin: center;
    animation: schemaFlotte 5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.4s);
}

@keyframes schemaFlotte {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Même règle que pour le reste du site : l'animation est un agrément, jamais
   une condition de lecture. Les flux restent visibles, simplement immobiles. */
@media (prefers-reduced-motion: reduce) {
    .s-flux,
    .s-noyau,
    .s-anneau,
    .s-flotte {
        animation: none;
    }

    .s-flux {
        stroke-dasharray: none;
        opacity: 0.55;
    }

    .s-anneau {
        opacity: 0.25;
    }
}


/* ===== ./_sovereignty.css ===== */
/* Souveraineté : sections qui portent le positionnement (traitements internalisés,
   pas de fuite vers un tiers, IA qui appartient au client).

   La section d'accueil a son propre fond au lieu de suivre l'alternance
   section / section-alt : elle doit se détacher du reste de la page, et
   l'insérer dans l'alternance aurait décalé toutes les sections suivantes. */
.sovereignty {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.12), transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(6, 182, 212, 0.10), transparent 55%),
        var(--bg-primary);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.sovereignty-lead {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
}

.sovereignty-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Encart qui traite l'objection performance. Bordure d'accent à gauche pour le
   distinguer des cartes sans en faire une cinquième. */
.sovereignty-answer {
    margin-top: 48px;
    padding: 32px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent-mid);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--glass-blur));
}

.sovereignty-answer h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.sovereignty-answer h3 i {
    color: var(--text-accent);
}

.sovereignty-answer p {
    color: var(--text-secondary);
    line-height: 1.8;
}

.sovereignty-answer p + p {
    margin-top: 16px;
}

/* Comparaison en deux colonnes : le modèle courant face au nôtre. */
.contrast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.contrast-col {
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
}

.contrast-col--ours {
    border-color: var(--border-color);
    background:
        linear-gradient(160deg, rgba(99, 102, 241, 0.10), transparent 60%),
        var(--glass-bg);
}

.contrast-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.contrast-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contrast-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.contrast-list li:last-child {
    border-bottom: none;
}

.contrast-list i {
    flex-shrink: 0;
    margin-top: 4px;
    font-size: 0.85rem;
}

/* #f87171 et non le rouge d'erreur #ef4444 : 3,1:1 sur le fond de carte, sous le
   seuil des 4,5:1. Le rouge clair passe à 5,8:1. */
.contrast-col--theirs .contrast-list i {
    color: #f87171;
}

.contrast-col--ours .contrast-list i {
    color: var(--accent-end);
}

/* Modes d'exécution, page services : trois options ordonnées par préférence. */
.deployment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.deployment-card {
    position: relative;
}

/* Filigrane purement décoratif : le rang est déjà porté par l'ordre de lecture.
   Généré en CSS et non écrit dans le gabarit, pour qu'un chiffre à 1,9:1 ne soit
   pas analysé comme du texte par un audit de contraste. */
.deployment-card::after {
    content: attr(data-rank);
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-start);
    opacity: 0.3;
}

@media (max-width: 1024px) {
    .sovereignty-grid,
    .deployment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sovereignty-grid,
    .deployment-grid,
    .contrast-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== ./_glossaire.css ===== */
/* Glossaire et ressources.
   Les fiches sont des cartes-liens : toute la surface est cliquable, avec un
   focus visible sur le bloc entier plutôt que sur un lien interne. */

.glossaire-groupe {
    margin-bottom: 56px;
}

.glossaire-categorie {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-accent);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.glossaire-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.glossaire-card {
    display: block;
    padding: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(var(--glass-blur));
    transition: all var(--transition-normal);
    text-decoration: none;
}

.glossaire-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-glow);
    box-shadow: var(--shadow-card-hover);
}

.glossaire-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(99, 102, 241, 0.12);
    color: var(--text-accent);
    font-size: 1.05rem;
    margin-bottom: 14px;
}

.glossaire-card-term {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.glossaire-card-full {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Fil d'Ariane visible de la fiche */
.glossaire-fil {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 32px;
}

.glossaire-fil a {
    color: var(--accent-end);
}

.glossaire-fil a:hover {
    text-decoration: underline;
}

/* Bloc de définition : mis en avant parce que c'est le fragment destiné à être
   cité, et qu'il doit se lire seul. */
.glossaire-definition {
    background: var(--glass-bg);
    border: 1px solid var(--border-glow);
    border-left: 3px solid var(--accent-end);
    border-radius: var(--radius-md);
    padding: 32px;
    backdrop-filter: blur(var(--glass-blur));
}

.glossaire-definition h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.glossaire-definition p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1.05rem;
}

.glossaire-aka {
    margin-top: 16px;
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
    font-style: italic;
}

.glossaire-question {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.glossaire-retenir {
    margin-top: 48px;
    padding: 28px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.glossaire-retenir h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.glossaire-retenir h2 i {
    color: var(--accent-end);
}

/* Liens vers les services concernés */
.glossaire-liens {
    display: grid;
    gap: 12px;
}

.glossaire-lien {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.glossaire-lien:hover {
    border-color: var(--border-glow);
    transform: translateX(3px);
}

.glossaire-lien i {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--text-accent);
    line-height: 1.5;
}

.glossaire-lien span {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.glossaire-lien strong {
    display: block;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

/* Articles de fond : une liste plutôt qu'une grille de cartes. Le chapô est le
   vrai argument de clic, il doit être lisible en entier - le tronquer pour
   aligner trois colonnes ferait perdre exactement ce qui donne envie de lire. */
.articles-liste {
    display: grid;
    gap: 16px;
    max-width: 860px;
    margin: 0 auto;
}

.article-carte {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(var(--glass-blur));
    transition: all var(--transition-normal);
}

.article-carte:hover {
    border-color: var(--border-glow);
    transform: translateX(4px);
    box-shadow: var(--shadow-card-hover);
}

.article-carte-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(99, 102, 241, 0.12);
    color: var(--text-accent);
    font-size: 1.2rem;
}

.article-carte-corps strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.article-carte-chapo {
    display: block;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}

.article-carte-duree {
    display: block;
    margin-top: 12px;
    color: var(--accent-end);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Corps d'un article */
.article-chapo {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-secondary);
    padding-left: 20px;
    border-left: 3px solid var(--accent-end);
    margin-bottom: 48px;
}

.article-section {
    margin-bottom: 40px;
}

/* En dernier : ses media queries doivent l'emporter sur tout ce qui précède. */

/* ===== ./_responsive.css ===== */
/* Responsive styles */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .engagement-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .glossaire-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-profile {
        grid-template-columns: 1fr;
    }
    .contact-grid,
    .contact-page-grid {
        grid-template-columns: 1fr;
    }
    .service-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px 0;
    }

    .container {
        padding: 0 16px;
    }

    /* Navbar mobile */
    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 10, 26, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 32px;
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        font-size: 1.25rem;
    }

    .nav-toggle {
        display: flex !important;
    }

    .nav-cta {
        display: none;
    }

    /* Hero */
    .hero {
        min-height: 80vh;
        padding-top: 100px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Grids */
    .services-grid,
    .projects-grid,
    .values-grid,
    .engagement-grid,
    .audit-teaser,
    .glossaire-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Résultats d'une réalisation : à trois colonnes, les libellés ne tiennent
       pas dans 110 px et poussent la page au-delà de sa largeur. */
    .realisation-results {
        grid-template-columns: 1fr;
    }

    /* Timeline */
    .timeline {
        padding-left: 30px;
    }

    .timeline-item::before {
        left: -30px;
    }

    .timeline::before {
        left: 0;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Carousel */
    .carousel-track {
        flex-direction: column;
    }

    .carousel-slide {
        min-width: 100%;
    }

    /* Service detail */
    .service-detail-header {
        flex-direction: column;
        text-align: center;
    }

    .section-title {
        font-size: 2rem;
    }

    /* Process steps */
    .process-grid {
        grid-template-columns: 1fr;
    }

    /* Le trait de liaison entre étapes est calculé pour une rangée horizontale :
       en colonne unique il dépasse de la moitié de la largeur de la page. */
    .process-step:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }

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

    .stat-number {
        font-size: 2.5rem;
    }

    .card {
        padding: 24px;
    }
}


/* --- Polices auto-hébergées (perf + RGPD : suppression du render-blocking Google Fonts) ---
   Polices variables : un seul woff2 par famille couvre tout l'axe de graisse. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-nGRWUQe.woff2") format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/space-grotesk-mseFfv3.woff2") format('woff2');
}