/* Sélecteurs portés sur #siteNav plutôt que sur `nav` : la documentation rend elle aussi
   des <nav> (barre latérale, sommaire) que ces règles écrasaient. */
/* En-tête et pied de page partagés — extrait du style en ligne de landing/home/en/index.html.
   SOURCE UNIQUE, chargée par la documentation (ilena-docs) et destinée à remplacer la copie
   en ligne de la landing. Ne dépend d'aucune variable définie ailleurs que dans le :root des
   flux — celui-ci est présent des deux côtés. */

/* Jetons requis par les règles ci-dessous. Déclarés ICI parce que la feuille est aussi
   chargée par la documentation, qui n'a pas le :root des flux : sans eux,
   `var(--border-muted)` devenait invalide et le bouton perdait sa bordure, le menu
   retombait au blanc. Valeurs identiques à foundations.md §7. */
/* Polices auto-hébergées, déclarées ICI pour la même raison que les jetons : la feuille
   est aussi chargée par la documentation, qui chargeait sinon Inter et Manrope depuis
   Google Fonts. Même nom, fichiers différents — le rendu divergeait légèrement.
   Douze fichiers, identiques à ceux de la landing. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/Inter-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/Inter-800.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/Manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/Manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/Manrope-800.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/EBGaramond-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/EBGaramond-600.woff2') format('woff2'); }

:root {
  --accent-light: #A688FF;
  --border-muted: rgba(201,185,222,.3);
  --divider: #28232F;
  --font-heading: 'Manrope', 'Inter', sans-serif;
  --glow: rgba(174,91,252,.4);
  --logo: #D8C8FF;
  --shadow-header: rgba(51,51,70,.45);
  --text: #FFFFFF;
  --text-lavender: #CDBBFF;
  --text-muted: #C9B9DE;
  --bg: #0E0E14;
  --accent: #7C5BFC;
  --surface: #21172A;
}

#siteNav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100px;
      padding: 0 clamp(1.5rem, 3.5vw, 4.4rem);
      position: sticky;
      top: 0;
      background: rgba(14, 14, 20, 0.92);
      backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 var(--shadow-header);
      z-index: 100;
    }
/* Écarts resserrés depuis #24 : la barre porte cinq déclencheurs plus « Sign In » et
   « Sign Up » là où elle portait quatre liens plats. Aux valeurs précédentes elle réclamait
   1402 px pour une fenêtre de 1280 — mesuré, pas estimé. */
.nav-left { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.8rem); flex: 1; }
/* text-decoration ici et pas seulement au survol (#52). Les pages de landing remettent
   `a { text-decoration: none }` dans leur style en ligne, ce qui masquait le manque ;
   ilena-docs, qui charge la même feuille, ne le fait pas — et doit garder ses liens de
   corps de texte soulignés. D'où une règle sur .brand, jamais un `a` global ici. */
.brand { display: flex; align-items: center; gap: 0.55rem; color: var(--logo); font-family: var(--font-heading); font-weight: 500; font-size: 3.7rem; line-height: 1; text-transform: lowercase; text-decoration: none; }
.brand img { height: 66px; width: auto; display: block; }
#siteNav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2vw, 1.9rem); align-items: center; }
#siteNav ul a {
      color: var(--text-muted);
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 500;
      transition: color 0.2s;
    }
#siteNav ul a:hover { color: var(--text); text-decoration: none; }
#siteNav .drawer-only { display: none; }
.nav-right { display: flex; align-items: center; gap: 1.1rem; }
.nav-cta {
      border: 2px solid var(--border-muted);
      color: var(--text);
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 500;
      padding: 0.78rem 2.2rem;
      border-radius: 999px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
.nav-cta:hover { border-color: var(--accent-light); box-shadow: 0 0 18px var(--glow); text-decoration: none; }
.lang-select { display: flex; align-items: center; gap: 0.35rem; }
.lang-globe { font-size: 0.95rem; line-height: 1; }
.lang-select select { background: transparent; border: 2px solid var(--border-muted); color: var(--text-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.3rem 0.45rem; border-radius: 999px; cursor: pointer; }
.lang-select select:hover { color: var(--text); border-color: var(--accent-light); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-burger span { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--text); margin: 5px 0; transition: transform .2s, opacity .2s; }
#siteNav.nav-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#siteNav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
#siteNav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ----- Menu déroulant (#24) -------------------------------------------------------------
   Toutes les règles sont portées sur #siteNav, jamais sur `nav` : voir l'en-tête du fichier.
   Le déclencheur est un <button>, pas un <a> — il ouvre son panneau et ne navigue nulle part,
   au doigt comme à la souris. Le comportement est dans /chrome.js, partagé lui aussi. */
#siteNav .nav-group { position: relative; }
#siteNav .nav-trigger {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
      color: var(--text-muted);
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 500;
      transition: color 0.2s;
    }
#siteNav .nav-trigger:hover, #siteNav .nav-trigger[aria-expanded="true"] { color: var(--text); }
#siteNav .nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .2s; }
#siteNav .nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
#siteNav .nav-panel {
      position: absolute;
      top: calc(100% + 0.9rem);
      left: 0;
      min-width: 15rem;
      background: #121318;
      border: 1px solid var(--divider);
      border-radius: 14px;
      box-shadow: 0 24px 40px rgba(0,0,0,.5);
      padding: 0.9rem 0.5rem;
      z-index: 110;
    }
/* Le panneau Solutions porte des entrées à la première personne — la plus longue, en
   français, fait 43 caractères — d'où ses 22 rem (352 px) contre les panneaux ordinaires.
   Il était ancré à droite parce qu'il est le quatrième déclencheur des cinq et qu'un
   panneau de cette largeur était jugé sortir de la fenêtre. Il s'aligne désormais sur son
   déclencheur comme les quatre autres (#51), et la contrainte de débordement — la vraie
   raison de l'ancrage — est reprise par max-width, qui la garantit par construction
   plutôt que par mesure. Ne pas retirer max-width en croyant nettoyer. */
#siteNav .nav-panel-wide { min-width: 22rem; max-width: calc(100vw - 2rem); left: 0; right: auto; }
#siteNav .nav-panel ul { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
#siteNav .nav-panel li { width: 100%; }
#siteNav .nav-panel a { display: block; padding: 0.5rem 0.9rem; border-radius: 9px; font-size: 1rem; line-height: 1.35; }
#siteNav .nav-panel a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
/* Intitulés d'organisation : ni liens, ni cibles de tabulation. Un titre qui a l'air
   cliquable sans l'être est pire qu'un titre qui n'en a pas l'air. */
#siteNav .nav-grouping { margin: 0.9rem 0 0.3rem; padding: 0 0.9rem; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint, #827D89); }
#siteNav .nav-panel > .nav-grouping:first-child { margin-top: 0; }
#siteNav .nav-signin {
      color: var(--text-muted);
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 500;
      padding: 0.78rem 1.2rem;
      transition: color 0.2s;
    }
#siteNav .nav-signin:hover { color: var(--text); text-decoration: none; }

/* Bande 768-1099 px. Au-dessus de 768 px le contenu passe à 66 % tandis que la barre de
   navigation garde sa taille naturelle (décision du 2026-08-01). Or elle réclame ~1030 px :
   sous 1100 px elle débordait horizontalement de la fenêtre. Sur cette seule bande, on lui
   applique la même réduction qu'au contenu — elle occupe alors ~680 px et retrouve ses
   proportions internes, plutôt que de comprimer ses libellés jusqu'au chevauchement.

   La règle vivait dans le <style> en ligne de landing/home/<langue>/index.html et a disparu
   lors du passage à l'en-tête partagé ; seul son commentaire est resté, orphelin. Elle est
   ici parce que l'en-tête est partagé : les pages légales et les pages de contenu subissaient
   le même débordement sans jamais avoir porté la règle. Portée sur #siteNav et non sur `nav`,
   pour la raison indiquée en tête de fichier. */
/* Plafond porté de 1099 à 1279 px par #24 : la barre porte désormais cinq déclencheurs plus
   deux boutons, et en français comme en espagnol elle débordait encore entre 1100 et 1250 px
   — mesuré page par page, pas estimé. Au-dessus de 768 px le contenu est déjà à 66 % ; la
   barre y rejoint donc simplement son échelle. */
@media (min-width: 768px) and (max-width: 1279px) {
  #siteNav { zoom: 0.66; }
}

footer {
      padding: 4rem 2rem 1.6rem;
      color: var(--text-lavender);
      font-size: 1rem;
      background:
        url('/assets/landing/footer-castle.webp') bottom center / 100% auto no-repeat,
        radial-gradient(ellipse 70% 45% at 50% 115%, rgba(124,91,252,.14), transparent 70%),
        #121318;
    }
.footer-inner {
      max-width: 1470px;
      margin: 0 auto clamp(5rem, 10vh, 8rem);
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 3rem;
    }
.footer-brand .footer-brand-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.footer-brand img { height: 66px; width: auto; display: block; }
.footer-word { font-family: var(--font-heading); font-weight: 500; font-size: 3.9rem; color: var(--logo); line-height: 1; text-transform: lowercase; }
.footer-brand p { font-size: 1rem; color: var(--text-lavender); line-height: 1.65; max-width: 340px; }
/* Les trois marques sociales, sous le paragraphe de marque (#50). Les SVG sont posés en ligne
   avec fill="currentColor" : c'est ce qui leur permet de suivre la couleur du lien au survol,
   ce qu'un <img> ne peut pas faire. */
.footer-social { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; gap: 1rem; }
.footer-social a { display: inline-flex; color: var(--text-lavender); transition: color 0.2s; }
.footer-social a:hover { color: var(--text); }
.footer-social svg { width: 22px; height: 22px; display: block; }
.footer-col h4 {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 1rem;
    }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col ul li a { color: var(--text-lavender); font-size: 1rem; transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--text); text-decoration: none; }
.footer-bottom {
      max-width: 1470px;
      margin: 0 auto;
      padding-top: 1.5rem;
      border-top: 1px solid var(--divider);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
      font-size: 0.95rem;
      color: var(--text-lavender);
    }
.footer-bottom strong { color: var(--text); font-weight: 800; }
.footer-bottom a { color: var(--text-lavender); text-decoration: none; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--text); }
@media (max-width: 767px) {
      #siteNav { height: 78px; padding: 0 1.4rem; }
      .brand { font-size: 2.2rem; }
      .brand img { height: 44px; }
      #siteNav ul { display: none; }
      .nav-cta, .lang-select, #siteNav .nav-signin { display: none; }
      .nav-burger { display: block; }
      /* Dans le tiroir, un panneau ouvert se déplie dans le flux plutôt que de flotter
         au-dessus : il n'a ni place ni contexte pour être positionné en absolu. */
      #siteNav .nav-trigger { justify-content: center; width: 100%; padding: 0.85rem 1.4rem; font-size: 1.05rem; }
      #siteNav .nav-panel { position: static; border: 0; border-radius: 0; box-shadow: none; background: rgba(255,255,255,.03); min-width: 0; padding: 0.4rem 0; }
      #siteNav .nav-panel-wide { min-width: 0; }
      #siteNav .nav-panel a { text-align: center; padding: 0.7rem 1.4rem; }
      #siteNav .nav-grouping { text-align: center; }
      #siteNav.nav-open ul {
        display: flex; flex-direction: column; gap: 0;
        position: absolute; top: 100%; left: 0; right: 0;
        background: #121318; border-bottom: 1px solid var(--divider);
        box-shadow: 0 24px 40px rgba(0,0,0,.5); padding: 0.6rem 0 1rem;
      }
      #siteNav.nav-open ul li { width: 100%; text-align: center; }
      #siteNav.nav-open ul a { display: block; padding: 0.85rem 1.4rem; font-size: 1.05rem; }
      #siteNav .drawer-only { display: none; }
      #siteNav.nav-open .drawer-only { display: block; }
      .drawer-cta { color: var(--accent-light) !important; font-weight: 700 !important; }
      .drawer-lang a { display: inline-block !important; padding: 0.6rem 0.8rem !important; }

      .hero { padding: 3.4rem 1.4rem 0; }
      .hero p { font-size: 1rem; }
      .product-stage { padding: 0 1rem 3rem; }
      .hero-actions { order: 3; margin: 1.8rem 0 0; width: 100%; flex-direction: column; }
      .hero-actions a { width: 100%; text-align: center; }
      .hero-stage-row { order: 1; gap: 0.4rem; }
      .carousel-dots { order: 2; margin-top: 1.2rem; }
      .carousel-caption { order: 4; font-size: 1.1rem; }
      .hero-chips { flex-direction: column; flex-basis: auto; gap: 1.1rem; }
      .hero-chips.right { order: 0; }
      .hero-chip { width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; border-width: 2px; }
      .hero-chip img { width: 26px; height: 26px; }
      .hero-chip .chip-label { display: none; }
      .laptop-shell { width: 100%; min-width: 0; }
      .carousel-nav { width: 30px; height: 30px; font-size: 1rem; }

      section, .problem-section, .cred-section { padding: 3.6rem 1.4rem; }

      /* Sur une colonne unique, le retrait de 10rem réservé à l'icône ne laissait
         que ~127 px de texte — moins que la largeur minimale d'un mot long comme
         « desaparecido », qui forçait la carte hors de la fenêtre (débordement de
         9 px en espagnol à 360 px). Icône et retrait réduits en conséquence. */
      .pain { padding-left: 6rem; }
      .pain::before { width: 64px; height: 64px; left: 1rem; }
      .manifesto-section { padding: 5rem 1.4rem; }
      .steps { grid-template-columns: 1fr; }
      .compare-col.us { padding: 2.2rem 1.8rem; }
      .compare-col.us h4 { font-size: 2rem; }
      .compare-col.us .compare-list li { font-size: 1.05rem; }
      .footer-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
      .footer-brand .footer-brand-row { justify-content: center; }
      .footer-brand p { margin: 0 auto; }
      .footer-bottom { flex-direction: column; text-align: center; }
    }