/* =============================================================================
   OMYRIA — design-system.css
   Tokens + composants + utilitaires. Esthétique : noir d'encre / blanc cassé,
   rouge signal en accent UNIQUE, mise en page à plat (zéro dégradé criard),
   beaucoup d'espace, typographie millimétrée. « On ne décore pas, on réduit. »
   -----------------------------------------------------------------------------
   ⚠️ TOUJOURS utiliser les variables ci-dessous, jamais de valeurs en dur.
   Compatible avec assets/js/core.js (reveal .is-visible, .kinetic .word>span…).
   ============================================================================= */

:root{
  /* ---------- Couleurs ---------- */
  --ink:#0B0B0F;            /* noir d'encre — base */
  --ink-soft:#16161B;       /* surfaces sombres légèrement levées */
  --ink-700:#1F1F26;        /* cartes sur fond noir */
  --paper:#FBFBF9;          /* blanc cassé — fond clair dominant */
  --paper-2:#F3F3EF;        /* surface claire alternée */
  --paper-3:#ECECE6;        /* surface claire plus marquée */
  --red:#E8344E;            /* rouge signal — accent unique (le méridien) */
  --red-ink:#C01F38;        /* rouge assombri, lisible en texte sur clair */
  --blue:#1B4DE4;           /* bleu de France — secondaire, très rare */

  --line:#E4E4DD;           /* filets sur fond clair */
  --line-soft:#EEEEE8;      /* filets discrets sur fond clair */
  --line-dark:rgba(255,255,255,.10); /* filets sur fond noir */
  --line-dark-soft:rgba(255,255,255,.06);

  --ink-body:#2B2B32;       /* texte courant sur clair */
  --muted:#6E6E76;          /* texte secondaire sur clair */
  --faint:#9A9A92;          /* texte ténu / légendes sur clair */
  --on-dark:#FBFBF9;        /* texte sur fond noir */
  --on-dark-muted:#A6A6AE;  /* secondaire sur fond noir */
  --on-dark-faint:#6E6E76;  /* ténu sur fond noir */

  /* Alias hérités (utilisés en ligne par l'estimateur) → mappés sur l'accent */
  --cyan:var(--red);
  --cyan-ink:var(--red-ink);
  --cyan-bright:var(--red);

  /* ---------- Typographie ---------- */
  --font-display:'Sora',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-mono:'Space Grotesk','Inter',ui-monospace,monospace;

  --fs-display:clamp(2.6rem,1.6rem + 4.4vw,4.4rem);
  --fs-h1:clamp(2rem,1.4rem + 2.6vw,3rem);
  --fs-h2:clamp(1.6rem,1.2rem + 1.7vw,2.3rem);
  --fs-h3:clamp(1.2rem,1.05rem + .7vw,1.45rem);
  --fs-lead:clamp(1.05rem,1rem + .4vw,1.22rem);
  --fs-body:1rem;
  --fs-sm:.92rem;
  --fs-xs:.8rem;
  --fs-eyebrow:.73rem;

  /* ---------- Espacements ---------- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem;   --sp-7:3rem;  --sp-8:4rem;   --sp-9:6rem;  --sp-10:8rem;
  --section-y:clamp(4rem,2rem + 8vw,8rem);
  --gutter:clamp(1.25rem,.5rem + 3vw,2.5rem);

  /* ---------- Layout ---------- */
  --container:1200px;
  --container-wide:1360px;
  --container-narrow:760px;
  --header-h:72px;

  /* ---------- Rayons & ombres ---------- */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(11,11,15,.05);
  --sh:0 18px 48px -28px rgba(11,11,15,.30);
  --sh-lg:0 40px 90px -50px rgba(11,11,15,.45);

  /* ---------- Mouvement ---------- */
  --t-fast:.18s; --t:.4s; --t-slow:.8s;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --ease-spring:cubic-bezier(.2,.85,.25,1);
}

/* =============================================================================
   RESET & BASE
   ============================================================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;}
html.no-scroll,body.no-scroll{overflow:hidden;}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink-body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
ul[role="list"]{list-style:none;}
::selection{background:var(--red);color:#fff;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px;}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;}
p{text-wrap:pretty;}

/* Lien d'évitement */
.skip-link{position:absolute;left:1rem;top:-100px;z-index:2000;background:var(--ink);color:var(--paper);
  padding:.7em 1.1em;border-radius:var(--r-sm);transition:top var(--t) var(--ease-out);}
.skip-link:focus{top:1rem;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* =============================================================================
   LAYOUT — container & section
   ============================================================================= */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.container--wide{max-width:var(--container-wide);}
.container--narrow{max-width:var(--container-narrow);}

.section{padding-block:var(--section-y);position:relative;}
.section--soft{background:var(--paper-2);}
.section--dark{background:var(--ink);color:var(--on-dark);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--on-dark);}
.section--dark .lead,.section--dark p{color:var(--on-dark-muted);}

.section-head{max-width:680px;margin-bottom:clamp(2.5rem,1.5rem + 3vw,4.5rem);}
.section-head--center{margin-inline:auto;text-align:center;}
.section-head h2{font-size:var(--fs-h2);margin-top:var(--sp-3);}
.section-head .lead{margin-top:var(--sp-4);}

/* =============================================================================
   TYPOGRAPHIE — utilitaires
   ============================================================================= */
.display{font-family:var(--font-display);font-weight:600;font-size:var(--fs-display);line-height:1.05;letter-spacing:-.025em;color:var(--ink);text-wrap:balance;}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--muted);font-weight:400;}
.muted{color:var(--muted);}
.faint{color:var(--faint);}
.caps{text-transform:uppercase;letter-spacing:.14em;}
.text-red{color:var(--red);}
.mono{font-family:var(--font-mono);}

/* Eyebrow : sur-titre technique avec point rouge signature */
.eyebrow{
  display:inline-flex;align-items:center;gap:.65em;
  font-family:var(--font-mono);font-weight:500;
  font-size:var(--fs-eyebrow);letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;}
.section--dark .eyebrow{color:var(--on-dark-faint);}

/* =============================================================================
   BOUTONS
   ============================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-body);font-weight:500;font-size:var(--fs-sm);line-height:1;
  padding:.95em 1.45em;border-radius:var(--r-md);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast),
             color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn--primary{background:var(--ink);color:var(--paper);}
.btn--primary:hover{background:var(--ink-soft);box-shadow:var(--sh);}
.btn--cyan{background:var(--ink);color:var(--paper);}          /* alias estimateur */
.btn--cyan:hover{background:var(--ink-soft);box-shadow:var(--sh);}
.btn--light{background:var(--paper);color:var(--ink);}
.btn--light:hover{background:#fff;box-shadow:var(--sh-lg);}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink);}
.btn--ghost:hover{border-color:var(--ink);}
.section--dark .btn--ghost,.btn--ghost.on-dark{border-color:var(--line-dark);color:var(--on-dark);}
.section--dark .btn--ghost:hover,.btn--ghost.on-dark:hover{border-color:var(--on-dark);}
.btn--lg{font-size:var(--fs-body);padding:1.1em 1.8em;}
.btn--block{display:flex;width:100%;}
.btn__icon{display:inline-flex;align-items:center;transition:transform var(--t-fast) var(--ease-out);}
.btn:hover .btn__icon{transform:translateX(3px);}

/* Lien fléché */
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:500;color:var(--ink);
  border-bottom:1px solid transparent;transition:gap var(--t-fast),border-color var(--t-fast);}
.link-arrow:hover{gap:.8em;border-color:currentColor;}
.section--dark .link-arrow{color:var(--on-dark);}

/* =============================================================================
   CARTES
   ============================================================================= */
.card{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-6);
  transition:transform var(--t) var(--ease-out),border-color var(--t),box-shadow var(--t);
}
.card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:var(--sh);}
.section--dark .card{background:var(--ink-700);border-color:var(--line-dark);}
.section--dark .card:hover{border-color:var(--on-dark-muted);box-shadow:none;}
.card__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:var(--r-md);border:1px solid var(--line);color:var(--ink);margin-bottom:var(--sp-4);}
.section--dark .card__icon{border-color:var(--line-dark);color:var(--on-dark);}
.card__icon svg{width:22px;height:22px;}
.card h3{font-size:var(--fs-h3);margin-bottom:var(--sp-2);}

/* =============================================================================
   DIVERS — chip, filet, badge FR
   ============================================================================= */
.chip{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);
  font-size:var(--fs-xs);letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.4em .85em;}
.section--dark .chip{border-color:var(--line-dark);color:var(--on-dark-muted);}

.rule{height:1px;background:var(--line);border:0;}
.section--dark .rule{background:var(--line-dark);}

.badge-fr{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-mono);
  font-size:var(--fs-xs);letter-spacing:.08em;color:var(--muted);}
.flag-fr{width:18px;height:12px;border-radius:2px;overflow:hidden;display:inline-grid;
  grid-template-columns:1fr 1fr 1fr;border:1px solid var(--line);flex:none;}
.flag-fr i{display:block;}
.flag-fr i:nth-child(1){background:#1B4DE4;}
.flag-fr i:nth-child(2){background:#fff;}
.flag-fr i:nth-child(3){background:var(--red);}

/* =============================================================================
   FORMULAIRES
   ============================================================================= */
.field{display:flex;flex-direction:column;gap:.5em;margin-bottom:var(--sp-4);}
.field label{font-size:var(--fs-sm);font-weight:500;color:var(--ink);}
.input,.select,.textarea{
  width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:.85em 1em;font-size:var(--fs-body);color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--faint);}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,11,15,.08);}
.textarea{min-height:130px;resize:vertical;}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6E76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;padding-right:2.6em;}
.hint{font-size:var(--fs-xs);color:var(--faint);}

/* =============================================================================
   EN-TÊTE / NAVIGATION  (piloté par core.js : [data-header], .is-scrolled…)
   ============================================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:1000;height:var(--header-h);
  display:flex;align-items:center;color:var(--on-dark);
  transition:background var(--t),color var(--t),border-color var(--t),backdrop-filter var(--t);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(251,251,249,.82);backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  color:var(--ink);border-bottom-color:var(--line);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);}
.brand{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-display);
  font-weight:600;font-size:1.1rem;letter-spacing:.14em;color:inherit;}
.brand svg{width:26px;height:26px;color:inherit;}
.nav{display:flex;align-items:center;gap:var(--sp-6);}
.nav a{font-size:var(--fs-sm);color:inherit;opacity:.82;transition:opacity var(--t-fast);position:relative;}
.nav a:hover,.nav a.is-active{opacity:1;}
.nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--red);}
.header-cta{display:flex;align-items:center;gap:var(--sp-4);}

/* Bouton menu mobile */
.nav-toggle{display:none;width:42px;height:42px;border:1px solid currentColor;border-radius:var(--r-md);
  align-items:center;justify-content:center;color:inherit;opacity:.85;}
.nav-toggle svg{width:20px;height:20px;}

@media (max-width:900px){
  .nav-toggle{display:inline-flex;position:relative;z-index:1200;}
  .nav{
    position:fixed;inset:0;background:var(--ink);color:var(--on-dark);
    flex-direction:column;justify-content:center;gap:var(--sp-6);
    font-size:1.4rem;opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity var(--t),transform var(--t),visibility var(--t);z-index:1100;
  }
  .nav a{opacity:.9;font-family:var(--font-display);}
  [data-header].nav-open .nav{opacity:1;visibility:visible;transform:none;}
  [data-header].nav-open .nav-toggle{color:var(--on-dark);}
  .header-cta .btn:not(.nav-toggle){display:none;}
}

/* =============================================================================
   PIED DE PAGE (structure générique)
   ============================================================================= */
.site-footer{background:var(--ink);color:var(--on-dark-muted);padding-block:var(--sp-8) var(--sp-6);}
.site-footer a{color:var(--on-dark-muted);transition:color var(--t-fast);}
.site-footer a:hover{color:var(--on-dark);}

/* =============================================================================
   RÉVÉLATION AU SCROLL  (core.js ajoute .is-visible)
   ============================================================================= */
[data-reveal]{opacity:0;transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-spring),clip-path var(--t-slow) var(--ease-out);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform;}
[data-reveal="up"]{transform:translateY(30px);}
[data-reveal="fade"]{transform:none;}
[data-reveal="left"]{transform:translateX(-30px);}
[data-reveal="right"]{transform:translateX(30px);}
[data-reveal="scale"]{transform:scale(.96);}
[data-reveal="clip"]{clip-path:inset(0 0 100% 0);transform:none;}
[data-reveal].is-visible{opacity:1;transform:none;clip-path:inset(0 0 0 0);}

/* Texte cinétique : mots qui montent (core.js découpe en .word>span[--w]) */
.kinetic{display:inline-block;}
.kinetic .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em;}
.kinetic .word>span{display:inline-block;transform:translateY(118%);transition:transform var(--t-slow) var(--ease-spring);transition-delay:calc(var(--w,0)*70ms);}
.kinetic.is-visible .word>span{transform:translateY(0);}

/* Barre de progression de lecture */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1500;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear;will-change:transform;}

/* =============================================================================
   GRILLES UTILITAIRES
   ============================================================================= */
.grid{display:grid;gap:var(--sp-5);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}

.text-center{text-align:center;}
.mx-auto{margin-inline:auto;}
.relative{position:relative;}
.hidden{display:none!important;}

/* =============================================================================
   PRÉFÉRENCE « MOINS D'ANIMATIONS »
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal],[data-reveal].is-visible{opacity:1;transform:none;clip-path:none;transition:none;}
  .kinetic .word>span{transform:none;transition:none;}
  .btn:hover{transform:none;}
  .scroll-progress{display:none;}
}

/* =============================================================================
   ÉCHELLE « AÉRIENNE » — minimalisme exagéré + grille suisse (home immersive)
   Titres surdimensionnés, espace négatif massif, full-bleed, mesure de lecture.
   ============================================================================= */
:root{
  --measure:640px;                                 /* largeur de lecture max d'un bloc texte */
  --fs-mega:clamp(2.8rem, 1rem + 6.6vw, 6.4rem);   /* titres héros surdimensionnés */
  --fs-xl:clamp(2rem, 1.2rem + 3.4vw, 4.2rem);     /* titres de section ambitieux */
  --space-air:clamp(6rem, 4rem + 9vw, 13rem);      /* respiration verticale ample */
  --instrument-w:clamp(48px, 6vw, 104px);
}
.section--air{padding-block:var(--space-air);}
.bleed{width:100%;padding-inline:clamp(1.5rem, 5vw, 7rem);}
.bleed-grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:clamp(1rem, 2vw, 2.5rem);}
.measure{max-width:var(--measure);}
.display-mega{font-family:var(--font-display);font-weight:600;font-size:var(--fs-mega);line-height:1.0;letter-spacing:-.035em;color:var(--ink);}
@media (max-width:760px){ .bleed-grid{grid-template-columns:repeat(6, 1fr);} }

/* ---------- Explicatifs dépliables (data-explainer + .x-panel) ---------- */
.x-toggle{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-mono);
  font-size:var(--fs-sm);color:var(--ink);background:transparent;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.55em 1.1em;cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast);}
.x-toggle:hover{border-color:var(--ink);}
.x-toggle__ic{display:inline-flex;font-size:1.15em;line-height:1;transition:transform var(--t) var(--ease-spring);}
.x-toggle[aria-expanded="true"] .x-toggle__ic{transform:rotate(45deg);}
.x-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t) var(--ease-out);}
.x-panel__in{overflow:hidden;}
.x-toggle[aria-expanded="true"] + .x-panel{grid-template-rows:1fr;}
.x-panel__in p{padding-top:var(--sp-4);color:var(--muted);max-width:var(--measure);line-height:1.75;}
.section--dark .x-toggle{color:var(--on-dark);border-color:var(--line-dark);}
.section--dark .x-toggle:hover{border-color:var(--on-dark);}
.section--dark .x-panel__in p{color:var(--on-dark-muted);}