/* ════════════════════════════════════════════════════════════════
   DOMOTIC ECO — Feuille de styles principale
   Architecture : CSS Cascade Layers
   Layers : reset → base → layout → components → sections → animations → utilities → responsive
   ════════════════════════════════════════════════════════════════ */

@layer reset, base, layout, components, sections, animations, utilities, responsive;

/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Variables CSS globales
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Palette ── */
  --color-navy:        #0A1628;
  --color-navy-mid:    #0F1E38;
  --color-navy-light:  #162440;
  --color-blue:        #1E4DB7;
  --color-blue-light:  #2E62D9;
  --color-blue-pale:   #EBF0FC;
  --color-steel:       #4A5568;
  --color-steel-light: #718096;
  --color-muted:       #A0AEC0;
  --color-border:      #E2E8F0;
  --color-bg:          #F7F8FA;
  --color-white:       #FFFFFF;
  --color-gold:        #F59E0B;
  --color-gold-light:  #FCD34D;
  --color-gold-pale:   #FFFBEB;
  --color-success:     #10B981;
  --color-error:       #EF4444;

  /* ── Typographie ── */
  --font-heading: 'Barlow', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Tailles de police ── */
  --fs-xs:   0.6875rem;  /*  11px */
  --fs-sm:   0.8125rem;  /*  13px */
  --fs-base: 0.9375rem;  /*  15px */
  --fs-md:   1rem;       /*  16px */
  --fs-lg:   1.125rem;   /*  18px */
  --fs-xl:   1.25rem;    /*  20px */
  --fs-2xl:  1.5rem;     /*  24px */
  --fs-3xl:  2rem;       /*  32px */
  --fs-4xl:  2.5rem;     /*  40px */
  --fs-hero: clamp(2.4rem, 4.5vw, 3.75rem);
  --fs-display: clamp(1.25rem, 2vw, 1.5rem);

  /* ── Espacement ── */
  --space-xs:  0.375rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: clamp(4rem, 8vw, 7rem);

  /* ── Layout ── */
  --container-max:  1240px;
  --container-pad:  clamp(1rem, 4vw, 2.5rem);
  --nav-height:     76px;

  /* ── Bordures ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Ombres ── */
  --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.08), 0 1px 2px rgba(10, 22, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 22, 40, 0.10), 0 2px 4px rgba(10, 22, 40, 0.06);
  --shadow-lg: 0 10px 30px rgba(10, 22, 40, 0.12), 0 4px 8px rgba(10, 22, 40, 0.06);
  --shadow-xl: 0 20px 50px rgba(10, 22, 40, 0.15), 0 8px 16px rgba(10, 22, 40, 0.08);
  --shadow-blue: 0 8px 24px rgba(30, 77, 183, 0.30);
  --shadow-gold: 0 4px 16px rgba(245, 158, 11, 0.35);

  /* ── Transitions ── */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════
   @layer reset
   ════════════════════════════════════════════════════════════════ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
  }

  html {
    scroll-behavior:  smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:          optimizeLegibility;
  }

  img, svg, video {
    display:   block;
    max-width: 100%;
  }

  a           { color: inherit; text-decoration: none; }
  ul, ol      { list-style: none; }
  button      { cursor: pointer; border: none; background: none; font: inherit; }
  input, select, textarea { font: inherit; }
  fieldset    { border: none; }
  address     { font-style: normal; }
}

/* ════════════════════════════════════════════════════════════════
   @layer base
   ════════════════════════════════════════════════════════════════ */
@layer base {
  body {
    font-family:  var(--font-body);
    font-size:    var(--fs-base);
    color:        var(--color-steel);
    background:   var(--color-white);
    line-height:  1.7;
    overflow-x:   hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family:  var(--font-heading);
    font-weight:  700;
    color:        var(--color-navy);
    line-height:  1.2;
    letter-spacing: -0.02em;
  }

  p { line-height: 1.75; }

  strong { font-weight: 600; color: var(--color-navy); }

  a:focus-visible {
    outline:        2px solid var(--color-blue);
    outline-offset: 3px;
    border-radius:  var(--radius-sm);
  }

  ::selection {
    background: var(--color-blue-pale);
    color:      var(--color-navy);
  }
}

/* ════════════════════════════════════════════════════════════════
   @layer layout
   ════════════════════════════════════════════════════════════════ */
@layer layout {
  .container {
    max-width:    var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .section {
    padding-block: var(--space-section);
  }

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

  .section__eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    font-family:    var(--font-body);
    font-size:      var(--fs-xs);
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--color-blue);
    margin-bottom:  var(--space-md);
  }

  .section__eyebrow::before {
    content:    '';
    display:    block;
    width:      28px;
    height:     2px;
    background: var(--color-blue);
    flex-shrink: 0;
  }

  .section__title {
    font-size:    var(--fs-4xl);
    margin-bottom: var(--space-md);
    max-width:    700px;
  }

  .section__intro {
    font-size:    var(--fs-lg);
    color:        var(--color-steel-light);
    max-width:    640px;
    line-height:  1.75;
  }

  .section__header {
    margin-bottom: var(--space-2xl);
  }

  .section__header--center {
    text-align: center;
  }

  .section__header--center .section__eyebrow { justify-content: center; }
  .section__header--center .section__title   { margin-inline: auto; }
  .section__header--center .section__intro   { margin-inline: auto; }
}

/* ════════════════════════════════════════════════════════════════
   @layer components
   ════════════════════════════════════════════════════════════════ */
@layer components {

  /* ── BOUTONS ── */
  .btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.875rem 2rem;
    border-radius:   var(--radius-md);
    font-family:     var(--font-body);
    font-size:       var(--fs-sm);
    font-weight:     600;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    transition:      background var(--duration-base) ease,
                     box-shadow var(--duration-base) ease,
                     transform  var(--duration-fast) ease,
                     color      var(--duration-base) ease;
    white-space:     nowrap;
    user-select:     none;
  }

  .btn:active { transform: translateY(1px); }

  .btn--primary {
    background:  var(--color-blue);
    color:       var(--color-white);
    box-shadow:  var(--shadow-blue);
  }

  .btn--primary:hover {
    background:  var(--color-blue-light);
    box-shadow:  0 10px 30px rgba(30, 77, 183, 0.40);
    transform:   translateY(-1px);
  }

  .btn--gold {
    background:  var(--color-gold);
    color:       var(--color-navy);
    box-shadow:  var(--shadow-gold);
  }

  .btn--gold:hover {
    background:  var(--color-gold-light);
    box-shadow:  0 8px 24px rgba(245, 158, 11, 0.45);
    transform:   translateY(-1px);
  }

  .btn--outline {
    background:  transparent;
    color:       var(--color-white);
    border:      1.5px solid rgba(255,255,255,0.35);
  }

  .btn--outline:hover {
    background:  rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.6);
  }

  .btn--outline-blue {
    background:  transparent;
    color:       var(--color-blue);
    border:      1.5px solid var(--color-blue);
  }

  .btn--outline-blue:hover {
    background:  var(--color-blue-pale);
  }

  .btn svg { flex-shrink: 0; }

  /* ── TAG / BADGE ── */
  .badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.35rem;
    padding:        0.3rem 0.75rem;
    border-radius:  var(--radius-full);
    font-size:      var(--fs-xs);
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .badge--blue {
    background: var(--color-blue-pale);
    color:      var(--color-blue);
  }

  .badge--gold {
    background: rgba(245, 158, 11, 0.12);
    color:      var(--color-gold);
  }

  .badge--green {
    background: rgba(16, 185, 129, 0.10);
    color:      #059669;
  }

  /* ── FORMULAIRE ── */
  .form-group {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
  }

  .form-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-md);
  }

  .form-group label {
    font-size:   var(--fs-sm);
    font-weight: 600;
    color:       var(--color-navy);
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding:       0.75rem 1rem;
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size:     var(--fs-sm);
    color:         var(--color-navy);
    background:    var(--color-white);
    transition:    border-color var(--duration-base) ease,
                   box-shadow   var(--duration-base) ease;
    width:         100%;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    outline:      none;
    border-color: var(--color-blue);
    box-shadow:   0 0 0 3px rgba(30, 77, 183, 0.12);
  }

  .form-group input.is-invalid,
  .form-group select.is-invalid,
  .form-group textarea.is-invalid {
    border-color: var(--color-error);
    box-shadow:   0 0 0 3px rgba(239, 68, 68, 0.10);
  }

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

  .form-group select {
    appearance:      none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5568' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 1rem center;
    padding-right:   2.5rem;
  }

  .form-error {
    font-size:  var(--fs-xs);
    color:      var(--color-error);
    min-height: 1.2em;
    line-height: 1.4;
  }

  .form-char-count {
    font-size:  var(--fs-xs);
    color:      var(--color-muted);
    text-align: right;
  }

  .form-checkbox {
    display:     flex;
    align-items: flex-start;
    gap:         0.625rem;
    font-size:   var(--fs-xs);
    color:       var(--color-steel-light);
    cursor:      pointer;
    line-height: 1.6;
  }

  .form-checkbox input[type="checkbox"] {
    width:        18px;
    height:       18px;
    flex-shrink:  0;
    margin-top:   1px;
    accent-color: var(--color-blue);
    cursor:       pointer;
  }

  .form-checkbox a {
    color:       var(--color-blue);
    text-decoration: underline;
  }

  .form-success {
    display:        none;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    text-align:     center;
    gap:            var(--space-md);
    padding:        var(--space-xl);
  }

  .form-success__icon {
    width:        64px;
    height:       64px;
    border-radius: var(--radius-full);
    background:   rgba(16, 185, 129, 0.12);
    display:      flex;
    align-items:  center;
    justify-content: center;
    color:        var(--color-success);
  }

  .form-success h3 {
    font-size:     var(--fs-xl);
    color:         var(--color-navy);
  }

  .form-success p {
    font-size:  var(--fs-sm);
    color:      var(--color-steel-light);
    max-width:  340px;
  }

  .rate-limit-msg {
    display:    none;
    padding:    0.75rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border:     1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    color:      var(--color-error);
    font-size:  var(--fs-sm);
  }

  /* ── NAV ── */
  .navbar {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    900;
    height:     var(--nav-height);
    background: transparent;
    transition: background var(--duration-slow) ease,
                box-shadow  var(--duration-slow) ease,
                transform   var(--duration-slow) ease;
  }

  .navbar.nav--scrolled {
    background: rgba(10, 22, 40, 0.97);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .nav__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          var(--nav-height);
  }

  .nav__logo {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
  }

  .nav__logo-mark {
    width:           38px;
    height:          38px;
    background:      var(--color-blue);
    border-radius:   var(--radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
  }

  .nav__logo-text {
    display:        flex;
    flex-direction: column;
    line-height:    1;
  }

  .nav__logo-name {
    font-family:  var(--font-heading);
    font-size:    var(--fs-lg);
    font-weight:  700;
    color:        var(--color-white);
    letter-spacing: -0.01em;
  }

  .nav__logo-tagline {
    font-size:      0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.45);
    font-weight:    500;
  }

  .nav__menu {
    display:     flex;
    align-items: center;
    gap:         var(--space-lg);
  }

  .nav__link {
    font-size:      var(--fs-sm);
    font-weight:    500;
    color:          rgba(255,255,255,0.70);
    letter-spacing: 0.03em;
    transition:     color var(--duration-base) ease;
    position:       relative;
    padding-bottom: 2px;
  }

  .nav__link::after {
    content:    '';
    position:   absolute;
    bottom:     -2px;
    left:       0;
    width:      0;
    height:     1.5px;
    background: var(--color-gold);
    transition: width var(--duration-base) ease;
  }

  .nav__link:hover,
  .nav__link--active {
    color: var(--color-white);
  }

  .nav__link:hover::after,
  .nav__link--active::after { width: 100%; }

  .nav__link--cta {
    padding:      0.5rem 1.25rem;
    background:   var(--color-blue);
    color:        var(--color-white);
    border-radius: var(--radius-md);
    font-weight:  600;
    transition:   background var(--duration-base) ease, transform var(--duration-fast) ease;
  }

  .nav__link--cta::after { display: none; }

  .nav__link--cta:hover {
    background: var(--color-blue-light);
    transform:  translateY(-1px);
  }

  .nav__burger {
    display:        none;
    flex-direction: column;
    justify-content: center;
    align-items:    center;
    width:          44px;
    height:         44px;
    gap:            6px;
    z-index:        1100;
    position:       relative;
  }

  .nav__burger-line {
    display:       block;
    width:         24px;
    height:        2px;
    background:    var(--color-white);
    border-radius: var(--radius-full);
    transition:    transform var(--duration-base) var(--ease-out-expo),
                   opacity   var(--duration-base) ease;
    transform-origin: center;
  }

  .nav__burger--open .nav__burger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav__burger--open .nav__burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav__burger--open .nav__burger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ════════════════════════════════════════════════════════════════
   @layer sections
   ════════════════════════════════════════════════════════════════ */
@layer sections {

  /* ── HERO ── */
  .hero {
    position:   relative;
    min-height: 100vh;
    display:    flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-navy);
    overflow:   hidden;
    padding-top: var(--nav-height);
  }

  .hero__bg {
    position:   absolute;
    inset:      0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='rgba(30,77,183,0.07)' stroke-width='1'%3E%3Crect x='0.5' y='0.5' width='79' height='79'/%3E%3Cline x1='20' y1='0' x2='20' y2='80'/%3E%3Cline x1='40' y1='0' x2='40' y2='80'/%3E%3Cline x1='60' y1='0' x2='60' y2='80'/%3E%3Cline x1='0' y1='20' x2='80' y2='20'/%3E%3Cline x1='0' y1='40' x2='80' y2='40'/%3E%3Cline x1='0' y1='60' x2='80' y2='60'/%3E%3Ccircle cx='20' cy='20' r='2' fill='rgba(30,77,183,0.12)'/%3E%3Ccircle cx='40' cy='40' r='2' fill='rgba(30,77,183,0.12)'/%3E%3Ccircle cx='60' cy='20' r='2' fill='rgba(30,77,183,0.12)'/%3E%3Ccircle cx='20' cy='60' r='2' fill='rgba(30,77,183,0.12)'/%3E%3Ccircle cx='60' cy='60' r='2' fill='rgba(30,77,183,0.12)'/%3E%3C/g%3E%3C/svg%3E");
    opacity:    1;
    pointer-events: none;
  }

  .hero__gradient {
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(30, 77, 183, 0.18) 0%, transparent 65%),
                radial-gradient(ellipse 50% 50% at 10% 80%, rgba(10, 22, 40, 0.8) 0%, transparent 60%);
    pointer-events: none;
  }

  .hero__inner {
    position:  relative;
    z-index:   1;
    padding-block: var(--space-3xl) 6rem;
  }

  .hero__content { max-width: 760px; }

  .hero__label {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    font-size:      var(--fs-xs);
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--color-gold);
    margin-bottom:  var(--space-lg);
  }

  .hero__label-dot {
    width:        6px;
    height:       6px;
    border-radius: var(--radius-full);
    background:   var(--color-gold);
    animation:    pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
  }

  .hero__title {
    font-size:     var(--fs-hero);
    color:         var(--color-white);
    margin-bottom: var(--space-lg);
    max-width:     680px;
    letter-spacing: -0.025em;
    line-height:   1.1;
  }

  .hero__title em {
    font-style: normal;
    color:      var(--color-blue-light);
  }

  .hero__subtitle {
    font-size:     var(--fs-display);
    color:         rgba(255,255,255,0.60);
    margin-bottom: var(--space-xl);
    max-width:     560px;
    line-height:   1.65;
  }

  .hero__ctas {
    display:     flex;
    gap:         var(--space-md);
    flex-wrap:   wrap;
    margin-bottom: var(--space-2xl);
  }

  .hero__trust {
    display:     flex;
    align-items: center;
    gap:         var(--space-lg);
    flex-wrap:   nowrap;
    padding-top: var(--space-xl);
    border-top:  1px solid rgba(255,255,255,0.08);
  }

  .trust-badge {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    padding-left: var(--space-lg);
    border-left: 1px solid rgba(245, 158, 11, 0.25);
  }

  .trust-badge:first-child { padding-left: 0; border-left: none; }

  .trust-badge__label {
    font-size:      var(--fs-xs);
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.85);
    line-height:    1.3;
  }

  .trust-badge__sub {
    font-size:  0.65rem;
    color:      rgba(255,255,255,0.38);
    letter-spacing: 0.05em;
  }

  .hero__scroll {
    position:   absolute;
    bottom:     1rem;
    left:       50%;
    transform:  translateX(-50%);
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap:         var(--space-xs);
    color:      rgba(255,255,255,0.30);
    font-size:  var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .hero__scroll-mouse {
    width:         22px;
    height:        34px;
    border:        1.5px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-full);
    position:      relative;
    overflow:      hidden;
  }

  .hero__scroll-line {
    width:         2px;
    height:        8px;
    background:    var(--color-gold);
    border-radius: var(--radius-full);
    position:      absolute;
    top:           6px;
    left:          50%;
    transform:     translateX(-50%);
    animation:     scrollPulse 2s ease-in-out infinite;
  }

  /* ── STATS / CRÉDIBILITÉ ── */
  .stats { background: var(--color-navy-mid); }

  .stats__inner {
    display:     flex;
    align-items: center;
    gap:         var(--space-3xl);
    flex-wrap:   wrap;
  }

  .stats__text { flex: 1; min-width: 280px; }

  .stats__text .section__title  { color: var(--color-white); }
  .stats__text .section__intro  { color: rgba(255,255,255,0.55); }
  .stats__text .section__eyebrow { color: var(--color-gold); }
  .stats__text .section__eyebrow::before { background: var(--color-gold); }

  .stats__grid {
    flex:                  2;
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1px;
    background:            rgba(255,255,255,0.06);
    border:                1px solid rgba(255,255,255,0.06);
    border-radius:         var(--radius-lg);
    overflow:              hidden;
    min-width:             400px;
  }

  .stat-card {
    background: var(--color-navy-light);
    padding:    var(--space-xl) var(--space-lg);
    text-align: center;
    transition: background var(--duration-base) ease;
  }

  .stat-card:hover { background: rgba(30, 77, 183, 0.15); }

  .stat-card__number {
    font-family:  var(--font-heading);
    font-size:    clamp(2rem, 3.5vw, 2.75rem);
    font-weight:  700;
    color:        var(--color-white);
    line-height:  1;
    margin-bottom: var(--space-xs);
    letter-spacing: -0.03em;
  }

  .stat-card__label {
    font-size:   var(--fs-xs);
    font-weight: 600;
    color:       var(--color-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
  }

  /* ── EXPERTISES ── */
  .expertises__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-lg);
  }

  .expertise-card {
    background:    var(--color-white);
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-xl);
    transition:    border-color var(--duration-base) ease,
                   box-shadow   var(--duration-base) ease,
                   transform    var(--duration-base) ease;
    position:      relative;
    overflow:      hidden;
  }

  .expertise-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     3px;
    background: var(--color-blue);
    transform:  scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-slow) ease;
  }

  .expertise-card:hover {
    border-color: var(--color-blue);
    box-shadow:   var(--shadow-lg);
    transform:    translateY(-4px);
  }

  .expertise-card:hover::before { transform: scaleX(1); }

  .expertise-card__icon {
    width:         52px;
    height:        52px;
    background:    var(--color-blue-pale);
    border-radius: var(--radius-md);
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--color-blue);
    margin-bottom: var(--space-md);
    transition:    background var(--duration-base) ease, color var(--duration-base) ease;
  }

  .expertise-card:hover .expertise-card__icon {
    background: var(--color-blue);
    color:      var(--color-white);
  }

  .expertise-card__title {
    font-size:     var(--fs-lg);
    font-weight:   700;
    color:         var(--color-navy);
    margin-bottom: var(--space-sm);
  }

  .expertise-card__desc {
    font-size:   var(--fs-sm);
    color:       var(--color-steel-light);
    line-height: 1.75;
    margin-bottom: var(--space-md);
  }

  .expertise-card__benefits {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
  }

  .expertise-card__benefit {
    display:     flex;
    align-items: flex-start;
    gap:         0.5rem;
    font-size:   var(--fs-xs);
    color:       var(--color-steel);
    font-weight: 500;
  }

  .expertise-card__benefit::before {
    content:    '→';
    color:      var(--color-blue);
    flex-shrink: 0;
    font-weight: 700;
    margin-top:  0;
  }

  /* ── TIMELINE / MÉTHODOLOGIE ── */
  .timeline {
    position: relative;
    display:  flex;
    flex-direction: column;
    gap:      var(--space-2xl);
    max-width: 860px;
    margin-inline: auto;
  }

  .timeline::before {
    content:    '';
    position:   absolute;
    left:       34px;
    top:        52px;
    bottom:     52px;
    width:      2px;
    background: linear-gradient(to bottom, var(--color-blue), rgba(30, 77, 183, 0.1));
  }

  .timeline__step {
    display:     flex;
    gap:         var(--space-xl);
    align-items: flex-start;
  }

  .timeline__left {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    flex-shrink:    0;
  }

  .timeline__number {
    width:           68px;
    height:          68px;
    border-radius:   var(--radius-full);
    background:      var(--color-blue);
    color:           var(--color-white);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-heading);
    font-size:       var(--fs-xl);
    font-weight:     700;
    flex-shrink:     0;
    box-shadow:      var(--shadow-blue);
    position:        relative;
    z-index:         1;
  }

  .timeline__content { padding-top: 0.875rem; }

  .timeline__title {
    font-size:     var(--fs-xl);
    font-weight:   700;
    color:         var(--color-navy);
    margin-bottom: var(--space-sm);
    display:       flex;
    align-items:   center;
    gap:           var(--space-sm);
  }

  .timeline__desc {
    font-size:   var(--fs-base);
    color:       var(--color-steel-light);
    line-height: 1.8;
    max-width:   620px;
  }

  .timeline__tag {
    font-size:      var(--fs-xs);
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--color-blue-light);
    background:     var(--color-blue-pale);
    padding:        0.2rem 0.6rem;
    border-radius:  var(--radius-sm);
  }

  /* ── RÉALISATIONS ── */
  .projects__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-lg);
  }

  .project-card {
    background:    var(--color-white);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    var(--shadow-md);
    border:        1px solid var(--color-border);
    transition:    box-shadow var(--duration-slow) ease,
                   transform  var(--duration-slow) ease;
  }

  .project-card:hover {
    box-shadow: var(--shadow-xl);
    transform:  translateY(-5px);
  }

  .project-card__header {
    padding:          var(--space-lg) var(--space-xl);
    background:       var(--color-navy);
    position:         relative;
    overflow:         hidden;
    min-height:       130px;
    display:          flex;
    flex-direction:   column;
    justify-content:  flex-end;
  }

  .project-card__header::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='rgba(30,77,183,0.12)' stroke-width='0.5'%3E%3Crect x='0.5' y='0.5' width='59' height='59'/%3E%3Cline x1='20' y1='0' x2='20' y2='60'/%3E%3Cline x1='40' y1='0' x2='40' y2='60'/%3E%3Cline x1='0' y1='20' x2='60' y2='20'/%3E%3Cline x1='0' y1='40' x2='60' y2='40'/%3E%3C/g%3E%3C/svg%3E");
  }

  .project-card__type {
    font-size:      var(--fs-xs);
    font-weight:    700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--color-gold);
    margin-bottom:  var(--space-xs);
    position:       relative;
    z-index:        1;
  }

  .project-card__name {
    font-size:    var(--fs-xl);
    font-weight:  700;
    color:        var(--color-white);
    line-height:  1.25;
    position:     relative;
    z-index:      1;
  }

  .project-card__body {
    padding: var(--space-xl);
  }

  .project-card__meta {
    display:       flex;
    gap:           var(--space-sm);
    flex-wrap:     wrap;
    margin-bottom: var(--space-md);
  }

  .project-card__body p {
    font-size:   var(--fs-sm);
    line-height: 1.75;
    color:       var(--color-steel-light);
    margin-bottom: var(--space-md);
  }

  .project-card__result {
    display:       flex;
    align-items:   flex-start;
    gap:           0.5rem;
    padding:       var(--space-md);
    background:    rgba(16, 185, 129, 0.06);
    border:        1px solid rgba(16, 185, 129, 0.15);
    border-radius: var(--radius-md);
    font-size:     var(--fs-xs);
    font-weight:   600;
    color:         #059669;
  }

  .project-card__result::before {
    content:    '✓';
    font-weight: 700;
    flex-shrink: 0;
  }

  /* ── CONFORMITÉ ── */
  .conformite__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-2xl);
    align-items:           start;
  }

  .conformite__text .section__eyebrow { color: var(--color-blue); }

  .conformite__intro {
    font-size:   var(--fs-lg);
    color:       var(--color-steel-light);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
  }

  .certif-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-sm);
  }

  .certif-item {
    display:       flex;
    align-items:   center;
    gap:           var(--space-md);
    padding:       var(--space-md) var(--space-lg);
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition:    border-color var(--duration-base) ease,
                   box-shadow   var(--duration-base) ease;
  }

  .certif-item:hover {
    border-color: var(--color-blue);
    box-shadow:   var(--shadow-sm);
  }

  .certif-item__icon {
    width:           40px;
    height:          40px;
    border-radius:   var(--radius-sm);
    background:      var(--color-blue-pale);
    color:           var(--color-blue);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
  }

  .certif-item__code {
    font-family:  var(--font-mono);
    font-size:    var(--fs-sm);
    font-weight:  700;
    color:        var(--color-navy);
    line-height:  1.2;
  }

  .certif-item__label {
    font-size:  var(--fs-xs);
    color:      var(--color-steel-light);
    line-height: 1.4;
  }

  .conformite__engagements {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-lg);
  }

  .engagement-card {
    display:       flex;
    gap:           var(--space-lg);
    padding:       var(--space-xl);
    background:    var(--color-white);
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition:    border-color var(--duration-base) ease,
                   box-shadow   var(--duration-base) ease;
  }

  .engagement-card:hover {
    border-color: var(--color-blue);
    box-shadow:   var(--shadow-md);
  }

  .engagement-card__icon {
    width:           52px;
    height:          52px;
    background:      var(--color-blue-pale);
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-blue);
    flex-shrink:     0;
  }

  .engagement-card__title {
    font-size:     var(--fs-lg);
    font-weight:   700;
    color:         var(--color-navy);
    margin-bottom: var(--space-xs);
  }

  .engagement-card__desc {
    font-size:   var(--fs-sm);
    color:       var(--color-steel-light);
    line-height: 1.7;
  }

  /* ── DIFFÉRENCIATEURS ── */
  .differentiators__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-lg);
  }

  .diff-card {
    display:       flex;
    gap:           var(--space-lg);
    padding:       var(--space-xl);
    background:    var(--color-white);
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition:    border-color var(--duration-base) ease,
                   box-shadow   var(--duration-base) ease,
                   transform    var(--duration-base) ease;
  }

  .diff-card:hover {
    border-color: var(--color-blue);
    box-shadow:   var(--shadow-lg);
    transform:    translateY(-3px);
  }

  .diff-card__icon {
    width:           56px;
    height:          56px;
    background:      var(--color-blue-pale);
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-blue);
    flex-shrink:     0;
    transition:      background var(--duration-base) ease, color var(--duration-base) ease;
  }

  .diff-card:hover .diff-card__icon {
    background: var(--color-blue);
    color:      var(--color-white);
  }

  .diff-card__title {
    font-size:     var(--fs-xl);
    font-weight:   700;
    color:         var(--color-navy);
    margin-bottom: var(--space-xs);
  }

  .diff-card__desc {
    font-size:   var(--fs-base);
    color:       var(--color-steel-light);
    line-height: 1.75;
  }

  /* ── CONTACT ── */
  .contact { background-color: var(--color-navy); }

  .contact .section__eyebrow        { color: var(--color-gold); }
  .contact .section__eyebrow::before { background: var(--color-gold); }
  .contact .section__title          { color: var(--color-white); }
  .contact .section__intro          { color: rgba(255,255,255,0.55); }

  .contact__inner {
    display:               grid;
    grid-template-columns: 1fr 1.4fr;
    gap:                   var(--space-2xl);
    align-items:           start;
  }

  .contact__info-intro {
    color:         rgba(255,255,255,0.60);
    font-size:     var(--fs-base);
    line-height:   1.8;
    margin-bottom: var(--space-xl);
  }

  .contact__address {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-md);
    margin-bottom:  var(--space-xl);
  }

  .contact__address-item {
    display:     flex;
    gap:         var(--space-sm);
    align-items: flex-start;
    font-size:   var(--fs-sm);
    color:       rgba(255,255,255,0.55);
    line-height: 1.6;
  }

  .contact__address-item svg     { flex-shrink: 0; color: var(--color-gold); margin-top: 1px; }
  .contact__address-item strong  { color: var(--color-white); display: block; }
  .contact__address-item a       { color: var(--color-gold); transition: color var(--duration-base) ease; }
  .contact__address-item a:hover { color: var(--color-gold-light); }

  .contact__map-placeholder {
    height:          160px;
    background:      rgba(255,255,255,0.03);
    border:          1px solid rgba(255,255,255,0.08);
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
  }

  .contact__map-content {
    text-align: center;
    color:      rgba(255,255,255,0.30);
    font-size:  var(--fs-sm);
  }

  .contact__map-content svg { margin-inline: auto; margin-bottom: var(--space-xs); }

  .contact__form-wrap {
    background:    var(--color-white);
    border-radius: var(--radius-lg);
    padding:       var(--space-xl);
    box-shadow:    var(--shadow-xl);
  }

  .contact__form-title {
    font-size:     var(--fs-xl);
    font-weight:   700;
    color:         var(--color-navy);
    margin-bottom: var(--space-xs);
  }

  .contact__form-sub {
    font-size:     var(--fs-sm);
    color:         var(--color-steel-light);
    margin-bottom: var(--space-xl);
  }

  .contact__form {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-md);
  }

  /* Honeypot — caché visuellement */
  .form__honeypot {
    position:   absolute;
    left:       -9999px;
    top:        -9999px;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    opacity:    0;
  }

  /* ── FOOTER ── */
  .footer { background: #060e1a; }

  .footer__main {
    padding-block: var(--space-2xl) var(--space-xl);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .footer__inner {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap:                   var(--space-xl);
    align-items:           start;
  }

  .footer__logo {
    display:       flex;
    align-items:   center;
    gap:           0.625rem;
    margin-bottom: var(--space-sm);
  }

  .footer__logo-name {
    font-family:  var(--font-heading);
    font-size:    var(--fs-xl);
    font-weight:  700;
    color:        var(--color-white);
    letter-spacing: -0.01em;
  }

  .footer__tagline {
    font-size:      var(--fs-xs);
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--color-gold);
    margin-bottom:  var(--space-sm);
  }

  .footer__address {
    font-size:   var(--fs-sm);
    line-height: 1.75;
    color:       rgba(255,255,255,0.38);
    margin-bottom: var(--space-xs);
  }

  .footer__siret {
    font-size: var(--fs-xs);
    color:     rgba(255,255,255,0.22);
  }

  .footer__heading {
    font-size:      var(--fs-xs);
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--color-gold);
    margin-bottom:  var(--space-md);
  }

  .footer__nav ul {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-sm);
  }

  .footer__nav a {
    font-size:  var(--fs-sm);
    color:      rgba(255,255,255,0.42);
    transition: color var(--duration-base) ease;
  }

  .footer__nav a:hover { color: var(--color-white); }

  .footer__contact-col address {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-sm);
  }

  .footer__contact-col p {
    font-size:  var(--fs-sm);
    color:      rgba(255,255,255,0.42);
  }

  .footer__contact-col a {
    color:      rgba(255,255,255,0.60);
    transition: color var(--duration-base) ease;
  }

  .footer__contact-col a:hover { color: var(--color-gold); }

  .footer__certifs ul {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
  }

  .footer__certifs li {
    font-size:    var(--fs-xs);
    color:        rgba(255,255,255,0.32);
    padding-left: 1rem;
    position:     relative;
  }

  .footer__certifs li::before {
    content:  '▸';
    position: absolute;
    left:     0;
    color:    var(--color-blue-light);
    font-size: 0.55rem;
    top:      2px;
  }

  .footer__bottom {
    padding-block: var(--space-md);
  }

  .footer__bottom .container {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             var(--space-md);
    flex-wrap:       wrap;
  }

  .footer__bottom p,
  .footer__bottom a {
    font-size: var(--fs-xs);
    color:     rgba(255,255,255,0.25);
    transition: color var(--duration-base) ease;
  }

  .footer__bottom a:hover  { color: var(--color-gold); }
  .footer__back-top { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
}

/* ════════════════════════════════════════════════════════════════
   @layer animations
   ════════════════════════════════════════════════════════════════ */
@layer animations {
  .fade-up {
    opacity:    0;
    transform:  translateY(36px);
    transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo);
  }

  .fade-in {
    opacity:    0;
    transition: opacity 0.75s ease;
  }

  .slide-right {
    opacity:    0;
    transform:  translateX(-40px);
    transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo);
  }

  .fade-up.is-visible,
  .fade-in.is-visible,
  .slide-right.is-visible {
    opacity:   1;
    transform: none;
  }

  /* Stagger via --delay custom property */
  [style*="--delay: 1"] { transition-delay: 100ms; }
  [style*="--delay: 2"] { transition-delay: 200ms; }
  [style*="--delay: 3"] { transition-delay: 300ms; }
  [style*="--delay: 4"] { transition-delay: 400ms; }
  [style*="--delay: 5"] { transition-delay: 500ms; }

  @keyframes scrollPulse {
    0%   { opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: top; }
    40%  { opacity: 1; transform: translateX(-50%) scaleY(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(14px) scaleY(0.5); }
  }

  /* Respect reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .fade-up, .fade-in, .slide-right {
      opacity:    1 !important;
      transform:  none !important;
      transition: none !important;
    }

    .hero__scroll-line,
    .hero__label-dot { animation: none !important; }

    * {
      animation-duration:        0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration:       0.01ms !important;
    }
  }
}

/* ════════════════════════════════════════════════════════════════
   @layer utilities
   ════════════════════════════════════════════════════════════════ */
@layer utilities {
  .sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
  }

  .text-center { text-align: center; }
  .text-gold   { color: var(--color-gold); }
  .text-blue   { color: var(--color-blue); }
  .text-white  { color: var(--color-white); }
}

/* ════════════════════════════════════════════════════════════════
   @layer responsive
   ════════════════════════════════════════════════════════════════ */
@layer responsive {

  @media (min-width: 1400px) {
    :root { --container-max: 1280px; }
  }

  @media (max-width: 1200px) {
    .stats__grid         { grid-template-columns: repeat(2, 1fr); }
    .expertises__grid    { grid-template-columns: repeat(2, 1fr); }
    .projects__grid      { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
    .footer__inner       { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  }

  @media (max-width: 1024px) {
    .stats__inner { flex-direction: column; gap: var(--space-2xl); }
    .stats__grid  { min-width: 0; width: 100%; grid-template-columns: repeat(4, 1fr); }
  }

  @media (max-width: 900px) {
    .conformite__inner      { grid-template-columns: 1fr; gap: var(--space-xl); }
    .differentiators__grid  { grid-template-columns: 1fr; }
    .contact__inner         { grid-template-columns: 1fr; gap: var(--space-xl); }
    .timeline::before       { left: 22px; }
    .timeline__number       { width: 44px; height: 44px; font-size: var(--fs-sm); }
    .hero__ctas             { flex-direction: column; align-items: flex-start; }
  }

  @media (max-width: 768px) {
    :root { --nav-height: 64px; }

    .hero__inner { padding-bottom: var(--space-3xl); }
    .hero__scroll { bottom: var(--space-lg); }
    .hero__trust { flex-wrap: wrap; }

    .nav__burger { display: flex; }

    .nav__menu {
      display:         flex;
      position:        fixed;
      top:             0;
      left:            0;
      right:           0;
      bottom:          0;
      width:           100vw;
      height:          100vh;
      height:          100dvh;
      z-index:         1000;
      background:      #0A1628;
      background-color: #0A1628;
      flex-direction:  column;
      justify-content: center;
      align-items:     center;
      gap:             var(--space-xl);
      transform:       translateX(100%);
      transition:      transform 0.45s var(--ease-out-expo);
      padding:         var(--space-2xl);
      overflow-y:      auto;
    }

    .nav__menu--open { transform: translateX(0); }

    .nav__menu .nav__link {
      font-size:   var(--fs-2xl);
      color:       rgba(255,255,255,0.90);
      padding:     var(--space-sm) 0;
      display:     block;
      text-align:  center;
    }

    .nav__menu .nav__link:hover {
      color: var(--color-white);
    }

    .nav__menu .nav__link--cta {
      font-size:  var(--fs-sm);
      padding:    0.875rem 2.5rem;
      margin-top: var(--space-md);
      display:    inline-flex;
    }

    .section__title  { font-size: var(--fs-3xl); }

    .stats__grid          { grid-template-columns: 1fr 1fr; }
    .expertises__grid     { grid-template-columns: 1fr; }
    .differentiators__grid { grid-template-columns: 1fr; }
    .form-row             { grid-template-columns: 1fr; }

    .footer__inner {
      grid-template-columns: 1fr;
      gap:                   var(--space-lg);
    }

    .footer__bottom .container {
      flex-direction: column;
      text-align:     center;
    }

    .timeline::before { display: none; }
    .timeline__step   { flex-direction: column; gap: var(--space-sm); }
    .timeline__number { width: 40px; height: 40px; }
  }

  @media (max-width: 480px) {
    :root { --fs-hero: clamp(1.9rem, 9vw, 2.5rem); }

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

    .hero__trust    { flex-direction: column; flex-wrap: wrap; gap: var(--space-sm); }

    .trust-badge {
      border-left:  none;
      padding-left: 0;
      border-top:   1px solid rgba(245,158,11,0.2);
      padding-top:  var(--space-xs);
    }

    .trust-badge:first-child { border-top: none; padding-top: 0; }
  }
}