/* ============================================================
   INSPECTION.CSS — Page "État des lieux" — DA "tech-luxe"
   Base : palette Alya étendue + 2 tokens dérivés + 4 sémantiques
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette homio base */
  --green-light: #bfd7ce;
  --green-mid:   #5e9b84;
  --green-dark:  #3a7060;
  --green-deep:  #1c3d33;
  --white: #f9faf8;
  --text: #1a2620;
  --muted: #6b8278;

  /* Palette Alya étendue (base de la DA tech-luxe) */
  --a-deep:       #1D4E3F;
  --a-mid:        #2A6B55;
  --a-sage:       #5A8F7B;
  --a-light-sage: #8AB5A1;
  --a-pale-sage:  #C5DDD2;
  --a-cream:      #F7F5F0;
  --a-warm-white: #FAFAF8;
  --a-text-dark:  #1A1A1A;
  --a-text-mid:   #4A4A4A;
  --a-text-light: #7A7A7A;
  --a-accent:     #2D8B6A;
  --a-border:     #E5E0D8;

  /* NOUVEAUX tokens dérivés (DA tech-luxe) */
  --i-night:        #0F3328;  /* vert nuit profond pour sections sombres */
  --i-night-grid:   rgba(197,221,210,0.08);  /* grille hairline sur fond nuit */
  --i-day-grid:     rgba(29,78,63,0.06);     /* grille hairline sur fond clair */

  /* 4 couleurs sémantiques d'état (douces, de la charte) */
  --i-state-vg:   #5A8F7B;  /* Très bon — sauge franc */
  --i-state-ok:   #8AB5A1;  /* Bon — sauge pâle */
  --i-state-mid:  #D4C9A8;  /* Correct — sable chaud (dérivé crème) */
  --i-state-bad:  #B87A5E;  /* Mauvais — terre cuite atténuée */
}

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--a-cream); color: var(--a-text-dark); overflow-x: hidden; }
html[lang="he"] body { font-family: 'DM Sans', 'Arial Hebrew', Arial, sans-serif; }

/* Mono pour micro-données tech */
.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.mono--lg { font-size: 13px; }
.mono--sm { font-size: 10px; letter-spacing: 0.1em; }

/* ── LANG SWITCHER ─────────────────────────────────────── */
.lang-dropdown { position: relative; }
.lang-toggle   { display: flex; align-items: center; gap: .35rem; background: none; border: 1.5px solid rgba(94,155,132,.25); border-radius: 8px; padding: .3rem .6rem; font-size: .78rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .2s; font-family: 'DM Sans', sans-serif; }
.lang-toggle:hover { border-color: var(--green-mid); color: var(--green-dark); }
.lang-toggle svg { transition: transform .2s; }
.lang-dropdown.open .lang-toggle { border-color: var(--green-mid); color: var(--green-dark); }
.lang-dropdown.open .lang-toggle svg { transform: rotate(180deg); }
.lang-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: rgba(249,250,248,.98); backdrop-filter: blur(12px); border: 1px solid rgba(94,155,132,.18); border-radius: 10px; box-shadow: 0 8px 24px rgba(30,60,50,.1); overflow: hidden; z-index: 200; min-width: 60px; }
html[dir="rtl"] .lang-menu { right: auto; left: 0; }
.lang-dropdown.open .lang-menu { display: flex; flex-direction: column; }
.lang-option { background: none; border: none; padding: .45rem 1rem; font-size: .78rem; font-weight: 600; color: var(--muted); cursor: pointer; text-align: center; font-family: 'DM Sans', sans-serif; transition: background .15s, color .15s; }
.lang-option:hover { background: rgba(94,155,132,.08); color: var(--green-dark); }
.lang-option.active { color: var(--green-mid); }

/* ── NAV ─────────────────────────────────────────────── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 5vw; background: rgba(249,250,248,.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(94,155,132,.12); gap: 1rem; }
.logo { font-family: 'League Spartan', sans-serif; font-size: 1.6rem; color: var(--green-dark); letter-spacing: -.02em; flex-shrink: 0; text-decoration: none; }
.logo span { color: var(--green-mid); }
.nav-right { display: flex; align-items: center; gap: 2rem; }
nav ul { list-style: none; display: flex; gap: 2rem; }
nav ul a { text-decoration: none; font-size: .9rem; font-weight: 500; color: var(--muted); transition: color .2s; white-space: nowrap; }
nav ul a:hover, nav ul a[aria-current="page"] { color: var(--green-dark); }
@media (max-width: 1280px) { nav ul, .nav-right { gap: 1.25rem; } }
.nav-cta { background: var(--green-mid); color: white !important; padding: .6rem 1.4rem; border-radius: 100px; font-weight: 600 !important; transition: background .2s !important; white-space: nowrap; }
.nav-cta:hover { background: var(--green-dark) !important; }
.nav-special { border: 1px solid rgba(94,155,132,.35) !important; border-radius: 4px; padding: 3px 9px !important; font-size: .82rem !important; white-space: nowrap; }
.nav-special:hover { background: rgba(94,155,132,.07) !important; border-color: rgba(94,155,132,.55) !important; color: var(--green-dark) !important; }
@media (max-width: 1080px) { .nav-special { border: none !important; padding: 0 !important; font-size: 1rem !important; } }

/* ── HAMBURGER ──────────────────────────────────────── */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--green-dark); border-radius: 2px; transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; position: fixed; top: 65px; left: 0; right: 0; background: rgba(249,250,248,.98); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(94,155,132,.12); padding: 1.5rem 5vw; flex-direction: column; gap: 1.2rem; z-index: 99; }
.mobile-menu.open { display: flex; }
.mobile-menu a { text-decoration: none; font-size: 1rem; font-weight: 500; color: var(--text); padding: .5rem 0; border-bottom: 1px solid rgba(191,215,206,.3); }
.mobile-menu a:last-child { border-bottom: none; background: var(--green-mid); color: white; text-align: center; border-radius: 100px; padding: .8rem; margin-top: .5rem; font-weight: 600; }

/* ── WHATSAPP FLOAT ─────────────────────────────────── */
.whatsapp-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 999; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); transition: transform .2s, box-shadow .2s; }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(37,211,102,.5); }
html[dir="rtl"] .whatsapp-float { right: auto; left: 2rem; }

/* ── FOOTER ─────────────────────────────────────────── */
footer { background: var(--green-deep); color: rgba(191,215,206,.6); padding: 3rem 5vw; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-logo { font-family: 'League Spartan', sans-serif; font-size: 1.4rem; color: white; }
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-links a { color: rgba(191,215,206,.6); text-decoration: none; font-size: .85rem; transition: color .2s; }
.footer-links a:hover { color: var(--green-light); }
footer small { font-size: .78rem; }

/* ── CONTAINER UTILITAIRE ──────────────────────────── */
.i-container { max-width: 1180px; margin: 0 auto; padding: 0 5vw; }
.i-container-sm { max-width: 920px; margin: 0 auto; padding: 0 5vw; }

/* ── PATTERNS JOUR / NUIT ──────────────────────────── */
.i-day   { background: var(--a-cream);     color: var(--a-text-dark); padding: 6rem 5vw; }
.i-day-2 { background: var(--a-warm-white); color: var(--a-text-dark); padding: 6rem 5vw; }
.i-night { background: var(--i-night);      color: var(--a-cream);     padding: 6rem 5vw; position: relative; overflow: hidden; }
.i-night::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--i-night-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--i-night-grid) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none; opacity: .6;
}
.i-night > * { position: relative; z-index: 1; }

/* ── TITRES ─────────────────────────────────────────── */
.i-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--a-sage); margin-bottom: 1.4rem; display: inline-block; }
.i-night .i-eyebrow { color: var(--a-light-sage); }
.i-h2 { font-family: 'League Spartan', sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; color: var(--a-deep); letter-spacing: -.03em; line-height: 1.15; margin-bottom: 1.2rem; }
.i-night .i-h2 { color: var(--a-cream); }
.i-sub { font-size: 1.02rem; color: var(--a-text-mid); max-width: 620px; line-height: 1.7; margin-bottom: 3rem; }
.i-sub strong { color: var(--a-deep); font-weight: 600; }
.i-night .i-sub { color: var(--a-pale-sage); }
.i-night .i-sub strong { color: var(--a-cream); font-weight: 600; }
.i-center { text-align: center; }
.i-center .i-sub { margin-left: auto; margin-right: auto; }

/* ── CHIPS SÉMANTIQUES (grille d'état) ─────────────── */
.i-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.i-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; display: block; }
.i-chip--vg  { background: rgba(90,143,123,.12);  color: var(--i-state-vg); }
.i-chip--vg::before  { background: var(--i-state-vg); }
.i-chip--ok  { background: rgba(138,181,161,.15); color: #4F7A68; }
.i-chip--ok::before  { background: var(--i-state-ok); }
.i-chip--mid { background: rgba(212,201,168,.22); color: #8A7A4D; }
.i-chip--mid::before { background: var(--i-state-mid); }
.i-chip--bad { background: rgba(184,122,94,.15);  color: var(--i-state-bad); }
.i-chip--bad::before { background: var(--i-state-bad); }

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 1 — HERO (nuit)                         ║
   ╚══════════════════════════════════════════════════╝ */
.i-hero { background: var(--i-night); color: var(--a-cream); padding: 140px 5vw 100px; position: relative; overflow: hidden; }
.i-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--i-night-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--i-night-grid) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none; opacity: .5;
}
.i-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.i-hero-text { max-width: 560px; }
.i-hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--a-light-sage); margin-bottom: 1.8rem; display: block; }
.i-hero h1 { font-family: 'League Spartan', sans-serif; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 600; color: var(--a-cream); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 1.6rem; }
.i-hero-sub { font-size: 1.05rem; font-weight: 300; color: var(--a-pale-sage); line-height: 1.75; margin-bottom: 2.6rem; max-width: 500px; }
.i-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.i-btn-primary { display: inline-block; background: var(--a-cream); color: var(--a-deep); font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 600; padding: 14px 30px; border-radius: 6px; text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 4px 20px rgba(0,0,0,.18); border: none; cursor: pointer; }
.i-btn-primary:hover { background: white; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.24); }
.i-btn-secondary { display: inline-flex; align-items: center; gap: .5rem; color: var(--a-pale-sage); font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 500; text-decoration: none; padding: 12px 4px; border-bottom: 1px solid rgba(197,221,210,.35); transition: color .2s, border-color .2s; }
.i-btn-secondary:hover { color: var(--a-cream); border-color: var(--a-cream); }
.i-hero-signature { margin-top: 2.4rem; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--a-pale-sage); }

/* Visuel hero : photo + scan line + tags */
.i-hero-visual { position: relative; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #2A5447 0%, #1D4E3F 100%); border: 1px solid rgba(197,221,210,.15); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.i-hero-visual::before {
  content: '';
  position: absolute; inset: 20px;
  border: 1px solid rgba(197,221,210,.18);
  border-radius: 4px;
  pointer-events: none;
}
/* Viseurs d'angle */
.i-corner { position: absolute; width: 18px; height: 18px; border: 1.5px solid var(--a-light-sage); pointer-events: none; z-index: 3; }
.i-corner--tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.i-corner--tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.i-corner--bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.i-corner--br { bottom: 14px; right: 14px; border-left: none; border-top: none; }

/* Image placeholder */
.i-hero-img { position: absolute; inset: 32px; background: rgba(10,30,24,.4); border-radius: 2px; display: flex; align-items: flex-end; padding: 1.5rem; overflow: hidden; }
.i-hero-img-caption { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; color: var(--a-pale-sage); text-transform: uppercase; opacity: .7; position: relative; z-index: 2; }
.i-hero-floorplan { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }

/* Scan line animation — boucle fluide */
.i-scan-line { position: absolute; left: 32px; right: 32px; height: 1.5px; background: linear-gradient(90deg, transparent 0%, rgba(197,221,210,.8) 50%, transparent 100%); box-shadow: 0 0 14px rgba(197,221,210,.45); animation: scanMove 5s ease-in-out infinite; z-index: 2; top: 32px; }
@keyframes scanMove {
  0%   { transform: translateY(0);        opacity: 0; }
  8%   { opacity: 1; }
  48%  { transform: translateY(360px);    opacity: 1; }
  56%  { opacity: 0; }
  100% { transform: translateY(0);        opacity: 0; }
}

/* Tags flottants sur la photo */
.i-tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; background: rgba(15,51,40,.85); backdrop-filter: blur(8px); border: 1px solid rgba(197,221,210,.25); color: var(--a-cream); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; padding: 5px 10px; border-radius: 3px; z-index: 3; opacity: 0; animation: tagFade 4.5s ease-in-out infinite; }
.i-tag::before { content: ''; width: 6px; height: 6px; background: var(--a-light-sage); border-radius: 50%; }
.i-tag--1 { top: 22%; left: 42px; animation-delay: 0.5s; }
.i-tag--2 { top: 48%; right: 42px; animation-delay: 1.2s; }
.i-tag--3 { bottom: 25%; left: 42px; animation-delay: 1.9s; }
@keyframes tagFade {
  0%, 10% { opacity: 0; transform: translateY(4px); }
  25%, 70% { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Carte flottante "rapport en cours" */
.i-hero-card { position: absolute; bottom: -18px; right: -18px; background: var(--a-cream); color: var(--a-deep); padding: 14px 18px; border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.3); max-width: 240px; z-index: 4; }
.i-hero-card-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--a-text-light); margin-bottom: 6px; }
.i-hero-card-main { font-family: 'League Spartan', sans-serif; font-size: 1rem; font-weight: 600; margin-bottom: 2px; }
.i-hero-card-meta { font-size: 11px; color: var(--a-text-mid); }
.i-hero-card-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--a-accent); margin-right: 6px; animation: pulseDot 2s infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 900px) {
  .i-hero { padding: 110px 5vw 80px; }
  .i-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .i-hero-visual { max-width: 480px; margin: 0 auto; aspect-ratio: 4/5; }
  .i-hero-card { right: 0; bottom: -14px; }
}

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 2 — L'ENJEU (clair)                     ║
   ╚══════════════════════════════════════════════════╝ */
.i-stakes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1rem; }
.i-stake { padding: 2rem 1.6rem; background: var(--a-warm-white); border: 1px solid var(--a-border); border-radius: 10px; position: relative; }
.i-stake-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .22em; color: var(--a-sage); margin-bottom: 1rem; display: block; }
.i-stake h3 { font-family: 'League Spartan', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--a-deep); line-height: 1.3; margin-bottom: .7rem; }
.i-stake p { font-size: .92rem; color: var(--a-text-mid); line-height: 1.65; }
.i-stakes-note { margin-top: 2.5rem; font-size: .95rem; color: var(--a-text-mid); line-height: 1.7; max-width: 700px; }
.i-stakes-note strong { color: var(--a-deep); font-weight: 600; }

/* Bloc statistiques — sous la grille des 3 bulles */
.i-stats { margin: 4rem auto 0; max-width: 980px; padding-top: 2.5rem; border-top: 1px solid rgba(29,78,63,.1); }
.i-stats-head { text-align: center; margin-bottom: 2rem; }
.i-stats-eyebrow { display: inline-block; }
.i-stats-scope { font-size: .78rem; color: var(--a-text-light); font-style: italic; max-width: 620px; margin: .5rem auto 0; line-height: 1.55; }
.i-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-bottom: 2rem; }
.i-stat { padding: 1.8rem 1.4rem 1.4rem; background: var(--a-warm-white); border: 1px solid var(--a-border); border-radius: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: box-shadow .25s, transform .15s; }
.i-stat:hover { box-shadow: 0 10px 28px rgba(29,78,63,.08); transform: translateY(-2px); }
.i-stat-num { font-family: 'League Spartan', sans-serif; font-size: 2.6rem; font-weight: 700; color: var(--a-deep); margin-bottom: .6rem; letter-spacing: -.02em; line-height: 1; }
.i-stat-label { font-size: .92rem; color: var(--a-text-mid); line-height: 1.55; margin-bottom: 1rem; flex: 1; max-width: 240px; }
.i-stat-label strong { color: var(--a-deep); font-weight: 600; }
.i-stat-src { font-size: 10px; color: var(--a-sage); text-decoration: none; border-bottom: 1px dotted rgba(90,143,123,.4); padding-bottom: 1px; letter-spacing: .04em; transition: color .2s, border-color .2s; }
.i-stat-src:hover { color: var(--a-accent); border-color: var(--a-accent); }
.i-stats-conclusion { text-align: center; max-width: 720px; margin: 0 auto; font-size: 1rem; color: var(--a-text-dark); line-height: 1.65; }
.i-stats-conclusion strong { color: var(--a-deep); font-weight: 600; }
@media (max-width: 760px) {
  .i-stats { margin-top: 3rem; padding-top: 2rem; }
  .i-stats-grid { grid-template-columns: 1fr; gap: 1rem; }
  .i-stat { padding: 1.5rem 1.2rem 1.2rem; }
  .i-stat-num { font-size: 2.1rem; }
}

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 3 — DEUX MISSIONS                        ║
   ╚══════════════════════════════════════════════════╝ */
.i-missions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 1rem; }
.i-mission { padding: 2.4rem 2rem; background: var(--a-warm-white); border: 1px solid var(--a-border); border-radius: 12px; transition: box-shadow .25s, border-color .25s; display: flex; flex-direction: column; }
.i-mission:hover { box-shadow: 0 20px 50px rgba(29,78,63,.08); border-color: var(--a-pale-sage); }
.i-mission-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .22em; color: var(--a-accent); margin-bottom: 1rem; display: block; }
.i-mission h3 { font-family: 'League Spartan', sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--a-deep); line-height: 1.2; margin-bottom: .8rem; }
.i-mission-sub { font-size: 1rem; color: var(--a-text-mid); line-height: 1.65; margin-bottom: 1.4rem; }
.i-mission ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
.i-mission li { font-size: .9rem; color: var(--a-text-dark); display: flex; align-items: flex-start; gap: .55rem; }
.i-mission li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--a-sage); margin-top: 8px; flex-shrink: 0; }
.i-mission-subhead { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .18em; color: var(--a-accent); text-transform: uppercase; margin-top: .9rem; margin-bottom: .5rem; display: block; }
.i-mission-option { font-size: .78rem; color: var(--a-text-light); font-style: italic; line-height: 1.5; margin: .3rem 0 1rem; padding-left: .7rem; border-left: 2px solid var(--a-pale-sage); }
html[dir="rtl"] .i-mission-option { padding-left: 0; padding-right: .7rem; border-left: none; border-right: 2px solid var(--a-pale-sage); }
.i-mission-link { font-family: 'DM Sans', sans-serif; font-size: .88rem; font-weight: 600; color: var(--a-accent); text-decoration: none; align-self: flex-start; border-bottom: 1px solid rgba(45,139,106,.3); padding-bottom: 2px; transition: border-color .2s; margin-top: auto; }
.i-mission-link:hover { border-color: var(--a-accent); }

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 4 — CE QUE COUVRE LE RELEVÉ             ║
   ╚══════════════════════════════════════════════════╝ */
.i-cover-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 2.5rem; }
.i-cover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.i-cover-item { padding: 1.3rem 1.2rem; background: var(--a-warm-white); border: 1px solid var(--a-border); border-radius: 8px; transition: border-color .25s, transform .15s; position: relative; overflow: hidden; cursor: default; }
.i-cover-item:hover { border-color: var(--a-pale-sage); transform: translateY(-2px); }
.i-cover-item-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; background: rgba(42,107,85,.1); border-radius: 6px; margin-bottom: .7rem; color: var(--a-mid); }
.i-cover-item h4 { font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 600; color: var(--a-deep); margin-bottom: .35rem; }
.i-cover-item p { font-size: .82rem; color: var(--a-text-mid); line-height: 1.5; }
.i-cover-item-example { position: absolute; left: 0; right: 0; bottom: 0; background: var(--i-night); color: var(--a-pale-sage); font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 8px 1.2rem; letter-spacing: .06em; text-transform: uppercase; transform: translateY(100%); transition: transform .3s; }
.i-cover-item:hover .i-cover-item-example { transform: translateY(0); }

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 5 — ENTRÉE ↔ SORTIE (nuit)             ║
   ╚══════════════════════════════════════════════════╝ */
.i-compare-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; margin-top: 1rem; }
.i-slider { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; user-select: none; cursor: ew-resize; background: #2A5447; border: 1px solid rgba(197,221,210,.2); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.i-slider-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.i-slider-img--before { background-color: rgba(197,221,210,.08); display: flex; align-items: center; justify-content: center; }
.i-slider-img--after  { background-color: rgba(45,139,106,.1); display: flex; align-items: center; justify-content: center; clip-path: inset(0 0 0 50%); }
.i-slider-placeholder { color: var(--a-pale-sage); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .65; }
/* Photos slider (si fichiers présents) — recouvrent les placeholders */
.i-slider-photo { position: absolute; inset: 0; z-index: 2; display: block; }
.i-slider-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.i-slider-label { position: absolute; top: 16px; background: rgba(15,51,40,.85); backdrop-filter: blur(8px); color: var(--a-cream); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; padding: 6px 12px; border-radius: 3px; text-transform: uppercase; z-index: 2; }
.i-slider-label--before { left: 16px; }
.i-slider-label--after  { right: 16px; }
.i-slider-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--a-cream); z-index: 3; transform: translateX(-50%); pointer-events: none; }
.i-slider-handle-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: var(--a-cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--a-deep); font-size: 18px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: ew-resize; pointer-events: all; }
.i-slider:focus { outline: 2px solid var(--a-light-sage); outline-offset: 4px; }
/* Avant/après en texte (remplace le curseur photo tant que images/comparaison/ est vide) */
.i-compare-card { aspect-ratio: 4/3; border-radius: 8px; background: #2A5447; border: 1px solid rgba(197,221,210,.2); box-shadow: 0 20px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; padding: 2rem; text-align: center; }
.i-compare-card-head { color: var(--a-cream); font-family: 'League Spartan', sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.i-compare-card-cols { display: flex; align-items: center; gap: 1.6rem; }
.i-compare-card-col { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.i-compare-card-label { color: var(--a-pale-sage); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.i-compare-card-arrow { color: var(--a-light-sage); font-size: 1.4rem; }
html[dir="rtl"] .i-compare-card-arrow { transform: scaleX(-1); }
.i-compare-card-ev { color: var(--a-cream); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

/* Table comparative */
.i-compare-table { background: rgba(197,221,210,.06); border: 1px solid rgba(197,221,210,.18); border-radius: 8px; overflow: hidden; }
.i-compare-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; padding: 1.1rem 1.2rem; border-bottom: 1px solid rgba(197,221,210,.1); font-size: .85rem; color: var(--a-cream); align-items: center; gap: .5rem; }
.i-compare-row:last-child { border-bottom: none; }
.i-compare-row--head { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--a-light-sage); background: rgba(15,51,40,.5); }
.i-compare-row--highlight { background: rgba(184,122,94,.12); }
.i-compare-cell-ok { color: var(--a-pale-sage); font-size: .82rem; }
.i-compare-recap { margin-top: 1.6rem; padding: 1rem 1.2rem; background: rgba(184,122,94,.1); border-left: 2px solid var(--i-state-bad); border-radius: 4px; }
html[dir="rtl"] .i-compare-recap { border-left: none; border-right: 2px solid var(--i-state-bad); }
.i-compare-recap p { color: var(--a-pale-sage); font-size: .9rem; line-height: 1.55; }
.i-compare-recap strong { color: var(--a-cream); }

@media (max-width: 900px) {
  .i-compare-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 6 — LE LIVRABLE                          ║
   ╚══════════════════════════════════════════════════╝ */
.i-report-grid { max-width: 680px; margin: 1rem auto 0; text-align: center; }
.i-report-grid .i-report-badges { justify-content: center; }

.i-report-side h3 { font-family: 'League Spartan', sans-serif; font-size: 1.6rem; color: var(--a-deep); margin-bottom: 1.2rem; letter-spacing: -.02em; }
.i-report-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.6rem; }
.i-report-badge { display: inline-block; padding: 5px 11px; background: rgba(45,139,106,.08); color: var(--a-accent); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; border-radius: 100px; text-transform: uppercase; }
.i-report-note { font-size: .92rem; color: var(--a-text-mid); line-height: 1.65; margin-bottom: 1.4rem; }
.i-btn-ghost { display: inline-flex; align-items: center; gap: .5rem; color: var(--a-deep); font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 600; text-decoration: none; padding: 10px 18px; border: 1px solid var(--a-sage); border-radius: 6px; background: transparent; cursor: pointer; transition: all .2s; }
.i-btn-ghost:hover { background: var(--a-sage); color: var(--a-cream); }
.i-btn-download { display: inline-flex; align-items: center; gap: .6rem; background: var(--a-deep); color: var(--a-cream); font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; padding: 16px 30px; border-radius: 6px; text-decoration: none; box-shadow: 0 8px 24px rgba(29,78,63,.18); transition: background .2s, transform .15s; }
.i-btn-download:hover { background: var(--a-mid); transform: translateY(-2px); }
.i-btn-download svg { flex-shrink: 0; }
.i-report-cta-sub { display: block; margin-top: .8rem; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; color: var(--a-text-light); text-transform: uppercase; }

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 7 — TIMELINE                             ║
   ╚══════════════════════════════════════════════════╝ */
.i-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 1rem; position: relative; }
.i-timeline::before {
  content: ''; position: absolute; top: 24px; left: calc(10% + 12px); right: calc(10% + 12px);
  height: 1px; background: linear-gradient(90deg, transparent, rgba(90,143,123,.4), rgba(90,143,123,.4), transparent);
  z-index: 0;
}
.i-step { text-align: center; position: relative; z-index: 1; padding: 0 .3rem; }
.i-step-num { display: flex; width: 48px; height: 48px; border-radius: 50%; background: var(--a-cream); border: 1.5px solid var(--a-sage); align-items: center; justify-content: center; margin: 0 auto 1rem; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--a-deep); }
.i-step h4 { font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 600; color: var(--a-deep); margin-bottom: .4rem; }
.i-step p { font-size: .82rem; color: var(--a-text-mid); line-height: 1.5; }
.i-step-meta { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; color: var(--a-sage); text-transform: uppercase; margin-top: .4rem; }
.i-timeline-note { margin-top: 2.4rem; padding: 1.2rem 1.4rem; background: var(--a-warm-white); border: 1px solid var(--a-border); border-radius: 8px; font-size: .95rem; color: var(--a-text-dark); line-height: 1.6; }
.i-timeline-note strong { color: var(--a-deep); }

@media (max-width: 900px) {
  .i-timeline { grid-template-columns: 1fr; gap: 1.4rem; }
  .i-timeline::before { display: none; }
  .i-step { text-align: left; padding-left: 60px; position: relative; }
  .i-step-num { position: absolute; left: 0; top: 0; margin: 0; }
  html[dir="rtl"] .i-step { text-align: right; padding-left: 0; padding-right: 60px; }
  html[dir="rtl"] .i-step-num { left: auto; right: 0; }
}

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 8 — ET APRÈS LE CONSTAT (funnel doux)   ║
   ╚══════════════════════════════════════════════════╝ */
.i-after { background: var(--a-cream); }
.i-after-intro { font-size: 1.02rem; color: var(--a-text-mid); line-height: 1.7; max-width: 640px; margin-bottom: 2.5rem; }
.i-after-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.i-after-card { padding: 2rem 1.6rem; background: var(--a-warm-white); border: 1px solid var(--a-border); border-radius: 12px; transition: box-shadow .25s, transform .15s; }
.i-after-card:hover { box-shadow: 0 14px 36px rgba(29,78,63,.08); transform: translateY(-2px); }
.i-after-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--a-sage); margin-bottom: 1rem; border: 1px solid var(--a-pale-sage); border-radius: 8px; }
.i-after-card h4 { font-family: 'League Spartan', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--a-deep); margin-bottom: .5rem; }
.i-after-card p { font-size: .9rem; color: var(--a-text-mid); line-height: 1.6; }
.i-after-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: var(--a-accent); font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(45,139,106,.3); padding-bottom: 2px; }
.i-after-link:hover { border-color: var(--a-accent); }

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 9 — POUR QUI                             ║
   ╚══════════════════════════════════════════════════╝ */
.i-profiles-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 1rem; }
.i-profile { padding: 1.6rem 1.2rem; background: var(--a-warm-white); border: 1px solid var(--a-border); border-radius: 10px; transition: border-color .25s, transform .15s; }
.i-profile:hover { border-color: var(--a-pale-sage); transform: translateY(-2px); }
.i-profile h4 { font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 600; color: var(--a-deep); margin-bottom: .4rem; line-height: 1.3; }
.i-profile p { font-size: .82rem; color: var(--a-text-mid); line-height: 1.55; }
@media (max-width: 900px) { .i-profiles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .i-profiles-grid { grid-template-columns: 1fr; } }

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 10 — POURQUOI HOMIO (comparatif, nuit) ║
   ╚══════════════════════════════════════════════════╝ */
.i-why-table { background: rgba(197,221,210,.06); border: 1px solid rgba(197,221,210,.18); border-radius: 10px; overflow: hidden; margin-top: 1rem; }
.i-why-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: .9rem 1.2rem; border-bottom: 1px solid rgba(197,221,210,.1); align-items: center; font-size: .88rem; }
.i-why-row:last-child { border-bottom: none; }
.i-why-row--head { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--a-light-sage); background: rgba(15,51,40,.5); padding: 1.1rem 1.2rem; }
.i-why-cell { color: var(--a-pale-sage); text-align: center; }
.i-why-cell:first-child { text-align: left; color: var(--a-cream); font-weight: 500; }
html[dir="rtl"] .i-why-cell:first-child { text-align: right; }
.i-why-cell--check { color: var(--a-light-sage); font-size: 1.1rem; }
.i-why-cell--dash  { color: rgba(197,221,210,.3); font-size: 1.1rem; }
.i-why-cell--highlight { color: var(--a-cream); font-weight: 600; }
.i-why-col-brand { text-align: center; color: var(--a-light-sage) !important; font-family: 'League Spartan', sans-serif; font-size: .9rem; letter-spacing: 0; }

@media (max-width: 760px) {
  .i-why-row { grid-template-columns: 1.4fr .9fr; }
  .i-why-col-hide-m { display: none; }
}

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 11 — FAQ                                 ║
   ╚══════════════════════════════════════════════════╝ */
.i-faq { max-width: 820px; margin: 0 auto; }
.i-faq-item { border-bottom: 1px solid var(--a-border); }
.i-faq-item:first-child { border-top: 1px solid var(--a-border); }
.i-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; background: none; border: none; cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; color: var(--a-deep); }
html[dir="rtl"] .i-faq-q { text-align: right; }
.i-faq-icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--a-sage); transition: transform .3s; }
.i-faq-item.open .i-faq-icon { transform: rotate(45deg); }
.i-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.i-faq-item.open .i-faq-a { max-height: 400px; }
.i-faq-a p { padding: 0 0 1.4rem; font-size: .95rem; color: var(--a-text-mid); line-height: 1.7; }

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 12 — CTA FINAL + FORMULAIRE             ║
   ╚══════════════════════════════════════════════════╝ */
.i-cta-final { background: var(--i-night); padding: 6rem 5vw; position: relative; overflow: hidden; }
.i-cta-final::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--i-night-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--i-night-grid) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none; opacity: .5;
}
.i-cta-inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
.i-cta-text .i-h2 { color: var(--a-cream); }
.i-cta-text .i-sub { color: var(--a-pale-sage); margin-bottom: 2rem; }
.i-cta-contacts { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.5rem; }
.i-cta-contact { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; background: rgba(197,221,210,.06); border: 1px solid rgba(197,221,210,.15); border-radius: 8px; color: var(--a-cream); text-decoration: none; transition: background .2s; }
.i-cta-contact:hover { background: rgba(197,221,210,.12); }
.i-cta-contact-icon { font-size: 1.2rem; }
.i-cta-contact-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .22em; color: var(--a-light-sage); text-transform: uppercase; margin-bottom: 2px; }
.i-cta-contact-value { font-size: .9rem; color: var(--a-cream); font-weight: 500; }

/* Formulaire */
.i-form { background: var(--a-cream); border-radius: 14px; padding: 2.2rem 2rem; }
.i-form-head { margin-bottom: 1.4rem; }
.i-form-head h3 { font-family: 'League Spartan', sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--a-deep); margin-bottom: .3rem; letter-spacing: -.02em; }
.i-form-head p { font-size: .85rem; color: var(--a-text-mid); }
.i-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .9rem; }
.i-form-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.i-form-group label { font-size: .78rem; font-weight: 600; color: var(--a-text-dark); font-family: 'DM Sans', sans-serif; }
.i-form-group input, .i-form-group select, .i-form-group textarea { width: 100%; min-width: 0; padding: .65rem .85rem; border: 1.5px solid var(--a-border); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: .88rem; color: var(--a-text-dark); background: white; outline: none; transition: border-color .2s; }
.i-form-group input:focus, .i-form-group select:focus, .i-form-group textarea:focus { border-color: var(--a-sage); }
.i-form-group textarea { resize: vertical; min-height: 70px; }
.i-form-check { display: flex; align-items: flex-start; gap: .55rem; padding: .7rem .9rem; background: rgba(45,139,106,.05); border: 1px solid rgba(45,139,106,.15); border-radius: 8px; margin-bottom: 1rem; cursor: pointer; }
.i-form-check input { margin-top: 3px; accent-color: var(--a-mid); flex-shrink: 0; }
.i-form-check label { font-size: .82rem; color: var(--a-text-dark); line-height: 1.4; cursor: pointer; font-weight: 500; }
.i-btn-form { width: 100%; background: var(--a-deep); color: var(--a-cream); padding: .9rem; border: none; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.i-btn-form:hover { background: var(--a-mid); }
.i-form-note { text-align: center; font-size: .72rem; color: var(--a-text-light); margin-top: .7rem; }
.i-form-success, .i-form-error { padding: .8rem 1rem; border-radius: 8px; font-size: .85rem; font-weight: 600; text-align: center; margin-bottom: 1rem; display: none; }
.i-form-success { background: rgba(45,139,106,.12); border: 1px solid var(--a-accent); color: var(--a-accent); }
.i-form-error { background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.3); color: #c0392b; }
.i-form-phone { display: flex; gap: .5rem; }
.i-form-phone select { flex: 0 0 auto; width: 108px; padding: .65rem .5rem; cursor: pointer; }
.i-form-phone input { flex: 1; }
/* Empêche les champs (largeur intrinsèque des input/select) d'élargir la grille sur mobile */
.i-cta-inner > *, .i-form-row > *, .i-form-solutions { min-width: 0; }

@media (max-width: 900px) {
  .i-cta-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .i-form-row { grid-template-columns: 1fr; }
}

/* ╔══════════════════════════════════════════════════╗
   ║  SCROLL ANIMATIONS                                ║
   ╚══════════════════════════════════════════════════╝ */
.i-fade-up { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.i-fade-up.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .i-fade-up { opacity: 1; transform: none; }
  .i-scan-line, .i-tag, .i-hero-card-dot { animation: none !important; opacity: 1 !important; }
}

/* ╔══════════════════════════════════════════════════╗
   ║  UTILS                                            ║
   ╚══════════════════════════════════════════════════╝ */
.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; }

/* ╔══════════════════════════════════════════════════╗
   ║  HERO — LIGNE D'ACCENT « une solution en 1 clic » ║
   ╚══════════════════════════════════════════════════╝ */
.i-hero-accent { display: inline-flex; align-items: center; gap: .5rem; margin: -1.4rem 0 2.2rem; padding: .5rem .9rem; background: rgba(197,221,210,.08); border: 1px solid rgba(197,221,210,.22); border-radius: 100px; font-size: .88rem; color: var(--a-cream); max-width: 100%; text-decoration: none; }
.i-hero-accent-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a-accent); flex-shrink: 0; animation: pulseDot 2s infinite; }
.i-hero-accent--link { cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.i-hero-accent--link:hover { background: rgba(197,221,210,.14); border-color: rgba(197,221,210,.35); transform: translateY(-1px); }
.i-hero-accent--link:hover .i-hero-accent-arrow { transform: translateY(2px); }
.i-hero-accent-arrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--a-light-sage); margin-left: .3rem; transition: transform .25s; display: inline-block; }
html[dir="rtl"] .i-hero-accent { flex-direction: row-reverse; }
html[dir="rtl"] .i-hero-accent-arrow { margin-left: 0; margin-right: .3rem; }

/* ╔══════════════════════════════════════════════════╗
   ║  INTRO FLOW — 3 PRINCIPES                         ║
   ╚══════════════════════════════════════════════════╝ */
.i-principles { background: var(--a-warm-white); padding-bottom: 5rem; }
.i-principles .i-h2 { margin-bottom: 2.5rem; }
.i-principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 980px; margin: 0 auto; }
.i-principle { padding: 1.6rem 1.4rem; background: var(--a-cream); border: 1px solid var(--a-border); border-radius: 10px; transition: box-shadow .25s, transform .15s, border-color .25s; }
.i-principle:hover { box-shadow: 0 10px 28px rgba(29,78,63,.06); transform: translateY(-2px); border-color: var(--a-pale-sage); }
.i-principle-num { display: inline-block; margin-bottom: .9rem; color: var(--a-accent); }
.i-principle h3 { font-family: 'League Spartan', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--a-deep); margin-bottom: .5rem; letter-spacing: -.01em; }
.i-principle p { font-size: .9rem; color: var(--a-text-mid); line-height: 1.65; }
.i-principles-disclaimer { max-width: 720px; margin: 2rem auto 0; text-align: center; font-size: .8rem; color: var(--a-text-light); font-style: italic; line-height: 1.55; }
@media (max-width: 900px) { .i-principles-grid { grid-template-columns: 1fr; gap: 1rem; } }

/* ╔══════════════════════════════════════════════════╗
   ║  SECTION 8 — FLOW DEMO (de A à Z)                ║
   ╚══════════════════════════════════════════════════╝ */
.i-flow .i-h2 { color: var(--a-cream); }
.i-flow .i-sub { color: var(--a-pale-sage); margin-left: auto; margin-right: auto; }

.i-flow-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; margin-top: 1.5rem; }
.i-flow-cards { display: flex; flex-direction: column; gap: 1rem; }
.i-flow-preview { color: var(--a-light-sage); opacity: .8; margin-bottom: .2rem; }

.i-flow-card { background: rgba(197,221,210,.07); border: 1px solid rgba(197,221,210,.18); border-radius: 10px; padding: 1.1rem 1.2rem; transition: background .25s, border-color .25s, opacity .25s; }
.i-flow-card.is-selected { background: rgba(45,139,106,.14); border-color: rgba(138,181,161,.4); }
.i-flow-card:not(.is-selected) { opacity: .72; }
.i-flow-card-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .7rem; }
.i-flow-cat { color: var(--a-light-sage); }

/* Switch accessible */
.i-flow-switch-wrap { position: relative; display: inline-block; cursor: pointer; flex-shrink: 0; }
.i-flow-switch { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.i-flow-switch-track { display: block; width: 42px; height: 24px; background: rgba(197,221,210,.2); border: 1px solid rgba(197,221,210,.3); border-radius: 100px; position: relative; transition: background .2s, border-color .2s; }
.i-flow-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--a-pale-sage); transition: transform .25s cubic-bezier(.4,0,.2,1), background .2s; }
.i-flow-switch:checked ~ .i-flow-switch-track { background: var(--a-accent); border-color: var(--a-accent); }
.i-flow-switch:checked ~ .i-flow-switch-track .i-flow-switch-knob { transform: translateX(18px); background: var(--a-cream); }
html[dir="rtl"] .i-flow-switch-knob { left: auto; right: 2px; }
html[dir="rtl"] .i-flow-switch:checked ~ .i-flow-switch-track .i-flow-switch-knob { transform: translateX(-18px); }
.i-flow-switch:focus-visible ~ .i-flow-switch-track { outline: 2px solid var(--a-light-sage); outline-offset: 3px; }

.i-flow-problem { display: flex; align-items: flex-start; gap: .55rem; color: var(--a-cream); font-size: .92rem; line-height: 1.45; margin-bottom: .5rem; }
.i-flow-problem .i-chip { padding: 0; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; display: inline-block; flex-shrink: 0; }
.i-flow-problem .i-chip::before { display: none; }
.i-flow-problem .i-chip--vg  { background: var(--i-state-vg); }
.i-flow-problem .i-chip--ok  { background: var(--i-state-ok); }
.i-flow-problem .i-chip--mid { background: var(--i-state-mid); }
.i-flow-problem .i-chip--bad { background: var(--i-state-bad); }

.i-flow-arrow { font-family: 'JetBrains Mono', monospace; color: var(--a-light-sage); font-size: 14px; margin: .2rem 0 .35rem 1.3rem; opacity: .7; }
html[dir="rtl"] .i-flow-arrow { margin-left: 0; margin-right: 1.3rem; transform: scaleX(-1); display: inline-block; }
.i-flow-solution { color: var(--a-cream); font-size: .95rem; font-weight: 500; line-height: 1.45; padding-left: 1.3rem; margin-bottom: .55rem; }
html[dir="rtl"] .i-flow-solution { padding-left: 0; padding-right: 1.3rem; }
.i-flow-decline { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--a-light-sage); text-decoration: none; padding: 2px 0 2px 1.3rem; border-bottom: 1px dashed rgba(138,181,161,.4); opacity: .75; transition: opacity .2s, color .2s; }
.i-flow-decline:hover { opacity: 1; color: var(--a-cream); }
html[dir="rtl"] .i-flow-decline { padding-left: 0; padding-right: 1.3rem; }

/* Panneau de sélection */
.i-flow-panel { background: rgba(15,51,40,.9); border: 1px solid rgba(197,221,210,.2); border-radius: 10px; padding: 1.4rem 1.2rem; position: sticky; top: 100px; display: flex; flex-direction: column; gap: .7rem; }
.i-flow-counter { display: flex; align-items: baseline; gap: .5rem; color: var(--a-cream); }
.i-flow-counter-num { color: var(--a-cream); font-weight: 600; font-size: 1.6rem; letter-spacing: 0; }
.i-flow-counter-text { color: var(--a-pale-sage); font-size: .82rem; }
.i-flow-send { background: var(--a-cream); color: var(--a-deep); border: none; padding: .85rem; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 700; cursor: pointer; transition: background .2s, transform .15s, opacity .2s; }
.i-flow-send:hover:not(:disabled) { background: white; transform: translateY(-1px); }
.i-flow-send:disabled { opacity: .4; cursor: not-allowed; }
.i-flow-send-sub { font-size: 11px; color: var(--a-light-sage); line-height: 1.45; opacity: .8; }

.i-flow-confirm { display: none; flex-direction: column; gap: .7rem; align-items: center; text-align: center; padding-top: .4rem; }
.i-flow-confirm[aria-hidden="false"] { display: flex; }
.i-flow.is-sent .i-flow-send,
.i-flow.is-sent .i-flow-send-sub { display: none; }
.i-flow-confirm-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--a-accent); color: var(--a-cream); display: flex; align-items: center; justify-content: center; animation: confirmPop .4s ease-out; }
@keyframes confirmPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.i-flow-confirm-text { color: var(--a-cream); font-family: 'League Spartan', sans-serif; font-size: 1rem; font-weight: 600; margin: 0; }
.i-flow-book { display: inline-block; width: 100%; padding: .75rem; background: var(--a-cream); color: var(--a-deep); font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 700; text-align: center; text-decoration: none; border-radius: 6px; transition: background .2s; }
.i-flow-book:hover { background: white; }
.i-flow-restart { background: none; border: 1px solid rgba(197,221,210,.3); color: var(--a-pale-sage); padding: .5rem .9rem; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: .78rem; cursor: pointer; transition: all .2s; }
.i-flow-restart:hover { border-color: var(--a-cream); color: var(--a-cream); }

/* Timeline A→Z sous les cartes */
.i-flow-timeline { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 3rem; position: relative; }
.i-flow-timeline::before { content: ''; position: absolute; top: 24px; left: calc(10% + 12px); right: calc(10% + 12px); height: 1px; background: linear-gradient(90deg, transparent, rgba(138,181,161,.3), rgba(138,181,161,.3), transparent); z-index: 0; }
.i-flow-timeline .i-step { text-align: center; position: relative; z-index: 1; padding: 0 .3rem; }
.i-flow-timeline .i-step-num { display: flex; width: 48px; height: 48px; border-radius: 50%; background: rgba(197,221,210,.08); border: 1.5px solid rgba(138,181,161,.4); align-items: center; justify-content: center; margin: 0 auto 1rem; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--a-pale-sage); transition: background .3s, color .3s, border-color .3s, transform .3s; }
.i-flow-timeline .i-step h4 { color: var(--a-cream); font-size: .95rem; font-weight: 600; margin-bottom: .4rem; }
.i-flow-timeline .i-step p { color: var(--a-pale-sage); font-size: .82rem; line-height: 1.5; }
.i-flow-timeline .i-step.is-lit .i-step-num { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-cream); transform: scale(1.08); }

.i-flow-disclaimer { margin-top: 2rem; max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; font-size: .78rem; color: var(--a-pale-sage); opacity: .65; line-height: 1.6; }

/* Responsive flow */
@media (max-width: 900px) {
  .i-flow-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .i-flow-panel { position: static; }
  .i-flow-timeline { grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: 2.5rem; }
  .i-flow-timeline::before { display: none; }
  .i-flow-timeline .i-step { padding: 0 .2rem; }
  .i-flow-timeline .i-step h4 { font-size: .78rem; }
  .i-flow-timeline .i-step p { font-size: .7rem; }
  .i-flow-timeline .i-step-num { width: 36px; height: 36px; font-size: 10px; }
}
@media (max-width: 640px) {
  /* Barre collée en bas uniquement quand section visible */
  .i-flow--visible .i-flow-panel { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; border-radius: 10px 10px 0 0; margin: 0; box-shadow: 0 -10px 30px rgba(0,0,0,.3); }
  .i-flow { padding-bottom: 180px; }
  .i-flow-timeline { grid-template-columns: 1fr; gap: 1rem; }
  .i-flow-timeline .i-step { text-align: left; padding-left: 56px; position: relative; }
  .i-flow-timeline .i-step-num { position: absolute; left: 0; top: 0; margin: 0; }
  html[dir="rtl"] .i-flow-timeline .i-step { text-align: right; padding-left: 0; padding-right: 56px; }
  html[dir="rtl"] .i-flow-timeline .i-step-num { left: auto; right: 0; }
}

/* ╔══════════════════════════════════════════════════╗
   ║  TIMELINE 6 ÉTAPES — "Comment ça se passe"       ║
   ╚══════════════════════════════════════════════════╝ */
.i-timeline { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) {
  .i-timeline { grid-template-columns: 1fr; }
}

/* ╔══════════════════════════════════════════════════╗
   ║  CTA FINAL — TAGLINE                              ║
   ╚══════════════════════════════════════════════════╝ */
.i-cta-tagline { color: var(--a-light-sage); font-family: 'League Spartan', sans-serif; font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; margin-bottom: 1rem; max-width: 580px; }

/* ╔══════════════════════════════════════════════════╗
   ║  FORMULAIRE — QUESTION MULTI-CHOIX              ║
   ╚══════════════════════════════════════════════════╝ */
.i-form-solutions { border: none; padding: .9rem 1rem; margin: 0 0 1rem; background: rgba(45,139,106,.05); border-radius: 8px; border: 1px solid rgba(45,139,106,.15); }
.i-form-solutions legend { font-size: .85rem; font-weight: 600; color: var(--a-text-dark); font-family: 'DM Sans', sans-serif; padding: 0 .3rem; }
.i-form-solutions-sub { font-size: .72rem; color: var(--a-text-light); margin: .2rem 0 .7rem; line-height: 1.4; }
.i-form-solutions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.i-form-solutions-grid label { display: flex; align-items: center; gap: .4rem; padding: .45rem .55rem; background: white; border: 1px solid var(--a-border); border-radius: 6px; cursor: pointer; font-size: .82rem; color: var(--a-text-dark); min-height: 44px; transition: border-color .2s, background .2s; }
.i-form-solutions-grid label:hover { border-color: var(--a-sage); }
.i-form-solutions-grid input[type="checkbox"] { accent-color: var(--a-mid); margin: 0; width: 16px; height: 16px; flex-shrink: 0; }
.i-form-solutions-grid label:has(input:checked) { border-color: var(--a-accent); background: rgba(45,139,106,.08); }
@media (max-width: 480px) {
  .i-form-solutions-grid { grid-template-columns: 1fr; }
}

/* ╔══════════════════════════════════════════════════╗
   ║  RESPONSIVE GLOBAL                                ║
   ╚══════════════════════════════════════════════════╝ */
/* Menu mobile dès 1080 px : 7 entrées sans retour à la ligne (FR, EN, HE) */
@media (max-width: 1080px) {
  nav ul { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 900px) {
  .i-day, .i-day-2, .i-night, .i-cta-final { padding: 4rem 5vw; }
  .i-stakes-grid, .i-cover-grid, .i-after-grid, .i-missions-grid { grid-template-columns: 1fr; }
  .i-why-row { grid-template-columns: 1.5fr .9fr; }
}
@media (max-width: 600px) {
  .i-hero h1 { font-size: 2rem; }
  .i-btn-primary { width: 100%; text-align: center; }
  .i-report-badges { gap: 6px; }
  .i-report-badge { font-size: 9px; }
  .i-hero-accent { margin-top: -.4rem; font-size: .82rem; }
  .i-hero-signature { margin-top: 1.8rem; font-size: 11px; letter-spacing: 0.16em; word-break: keep-all; }
}