/* site.css : généré par tools/assemble.mjs (src/css/*.css triés par nom). Ne pas éditer à la main. */

/* == 00-tokens.css == */
/* ============================================================================
   00-tokens.css — T3 (21/09/2026). Variables globales : palette (PLAN §2), polices
   (D5), échelle fluide portée de GetMaply (getmaply.css, formules Webflow
   « viewport-min 20rem → viewport-max 90rem » pré-calculées en clamp() plat),
   rayons, ombres et jetons de la barre de navigation (MakeItSales, nav_2).
   Convention : les noms courts (--fs-*, --sp-*, --section-*, --radius-*) sont ceux
   de la synthèse du critique (critique-synthese.json), que toutes les sections lisent.
   Valeur non citée d'une référence → commentaire CHOSEN.
   ============================================================================ */

:root {
  color-scheme: light;

  /* --- Palette Pinterest (PLAN §2, image 7) -------------------------------- */
  --white: #FFFFFF;
  --navy: #04044A;      /* Navy */
  --royal: #000875;     /* Dark Royal Blue */
  --sky: #00A4FF;       /* Sky Blue */
  --deep: #0A6FFB;      /* fin du dégradé « Panel » #00A4FF → #0A6FFB */
  --neon: #00E7FF;      /* Neon Blue : marques décoratives + anneaux de focus sur fond sombre, jamais du texte */
  --ink-2: #4A5270;     /* Encre atténuée (ajout, contraste 7,7:1 sur blanc) */
  --paper: #F4F7FB;     /* Papier (ajout) : fond des fonctionnalités */

  /* --- Dérivés ------------------------------------------------------------- */
  --brand: var(--sky);
  --ink: var(--navy);
  --ink-3: #5B6B9A;                                        /* CHOSEN: encre tertiaire (mentions « Propulsé par… », notes), 5,3:1 sur blanc */
  --line: color-mix(in srgb, var(--navy) 12%, transparent); /* CHOSEN: filet 1 px (GetMaply utilise --swatch--dark-900-o20 = 20 % ; 12 % de navy rend le même gris sur blanc) */
  --light-200: #ebebeb;                                    /* GetMaply --swatch--light-200 (bord de la pastille hero) */
  --g-panel: linear-gradient(135deg, #00A4FF, #0A6FFB);   /* « Panel (dégradé) » de la palette ; CHOSEN: angle 135deg */
  --g-deep: linear-gradient(180deg, #000875, #04044A);    /* PLAN §3b : carte 3:2 des fonctionnalités */

  /* --- Hero shader (D16, point de départ du 21/09 — à revoir avec Sacha) --- */
  --shader-1: #0a60ff;  /* color1 */
  --shader-2: #3ddbdb;  /* color2 */
  --shader-3: #77e1d6;  /* color3 */
  --hero-veil: rgba(4, 4, 74, .2); /* A8 / §3b : voile navy 20 % sous le texte du hero */

  /* --- Polices (D5 : remplaçables ici sans toucher au reste) --------------- */
  --font-display: "Instrument Serif", "Instrument Serif Fallback", serif;
  --font-sans: "Bricolage Grotesque", "Bricolage Grotesque Fallback", sans-serif;
  --font-serif: var(--font-display); /* CHOSEN: alias — critique-synthese.json nomme la police de titre --font-serif */
  --weight-bold: 600;                /* GetMaply --_typography---font--primary-bold: 600 */
  --weight-medium: 500;              /* GetMaply --_typography---font--primary-medium: 450 → CHOSEN 500 (axe wght de Bricolage, valeur ronde) */
  --tracking-tight: -.05em;          /* GetMaply --_typography---letter-spacing--tight */
  --tracking-serif: -.02em;          /* CHOSEN: -.05em est réglé pour Geist 600 ; un serif 400 se serre moins */

  /* --- Rayons (GetMaply --radius--*) ----------------------------------------- */
  --radius-small: .5rem;
  --radius-main: 1rem;
  --radius-little: 2rem;
  --radius-large: 3rem;
  --radius-big: 5rem;
  --radius-round: 100vw;

  /* --- Échelle typographique fluide (GetMaply --_typography---font-size--*) --
     Formule Webflow : clamp(min, (min − (max−min)/70 × 20) rem + (max−min)/70 × 100 vw, max),
     viewport 20rem (320 px) → 90rem (1440 px). Pré-calculée ci-dessous (4 décimales).
     Contrôle : --fs-h2 = 32 px à 320 px, 64 px à 1440 px ; --fs-h1 = 80 px à 1440 px. */
  --fs-display: clamp(4rem, 3.2857rem + 3.5714vw, 6.5rem);
  --fs-h1: clamp(3rem, 2.4286rem + 2.8571vw, 5rem);
  --fs-h2: clamp(2rem, 1.4286rem + 2.8571vw, 4rem);
  --fs-h3: clamp(1.875rem, 1.5536rem + 1.6071vw, 3rem);
  --fs-h4: clamp(1.75rem, 1.6786rem + .3571vw, 2rem);
  --fs-h5: clamp(1.375rem, 1.3393rem + .1786vw, 1.5rem);
  --fs-h6: clamp(1rem, .9643rem + .1786vw, 1.125rem);
  --fs-large: clamp(1.125rem, 1.0893rem + .1786vw, 1.25rem);
  --fs-main: clamp(1rem, .9643rem + .1786vw, 1.125rem);
  --fs-small: clamp(.875rem, .8393rem + .1786vw, 1rem);
  --fs-small-special: clamp(.875rem, .8214rem + .2679vw, 1.0625rem);
  --fs-mini: clamp(.75rem, .7143rem + .1786vw, .875rem);
  --fs-tiny: clamp(.625rem, .6071rem + .0893vw, .6875rem);

  /* GetMaply --_typography---line-height--* */
  --lh-little: .9;
  --lh-small: 1;
  --lh-medium: 1.2;
  --lh-large: 1.3;
  --lh-huge: 1.5;

  /* --- Espacements fluides (GetMaply --_spacing---space--1…8) ---------------- */
  --sp-1: clamp(.375rem, .3393rem + .1786vw, .5rem);
  --sp-2: clamp(.625rem, .5893rem + .1786vw, .75rem);
  --sp-3: clamp(.875rem, .8393rem + .1786vw, 1rem);
  --sp-4: clamp(1.25rem, 1.1786rem + .3571vw, 1.5rem);
  --sp-5: clamp(1.75rem, 1.6786rem + .3571vw, 2rem);
  --sp-6: clamp(2rem, 1.8571rem + .7143vw, 2.5rem);
  --sp-7: clamp(2.25rem, 2.0357rem + 1.0714vw, 3rem);
  --sp-8: clamp(2.5rem, 2.0714rem + 2.1429vw, 4rem);

  /* --- Espacements de section (GetMaply --_spacing---section-space--*) ------- */
  --section-none: 0px;
  --section-small: clamp(3rem, 2.4286rem + 2.8571vw, 5rem);
  --section-main: clamp(4rem, 3.1429rem + 4.2857vw, 7rem);
  --section-large: clamp(5.5rem, 4.2143rem + 6.4286vw, 10rem);
  --section-page-top: clamp(10rem, 8.8571rem + 5.7143vw, 14rem);

  /* --- Grille / conteneur (GetMaply --site--*, --max-width--*) --------------- */
  --site-margin: clamp(1rem, .4286rem + 2.8571vw, 3rem);  /* --site--margin : 16 px à 320, 48 px à 1440 */
  --gutter: clamp(1rem, .7143rem + 1.4286vw, 2rem);       /* --site--gutter */
  --column-count: 12;                                      /* --site--column-count */
  --max-width: 90rem;                                      /* --max-width--main = viewport-max × 1rem */
  --max-width-small: 50rem;                                /* --max-width--small */

  /* --- Ombres GetMaply (getmaply.css) ---------------------------------------
     --shadow-layers : les 19 couches communes à .hero_label-content, .integration_grid-center,
     .hero_h1-icon, .nav_desktop_background (citées telles quelles). Les deux composés
     ci-dessous = 20 couches chacun, exactement comme dans la source. */
  --shadow-layers: 0 0 #0000, 0 0 #00000006, 0 0 #00000007, 0 .2px .1px #00000008, 0 .4px .2px #00000009, 0 .9px .3px #00000009, 0 1.7px .6px #0000000a, 0 2.9px 1px #0000000a, 0 4.6px 1.6px #0000000a, 0 7.1px 2.5px #0000000b, 0 10.7px 3.8px #0000000b, 0 15.7px 5.5px #0000000b, 0 22.7px 7.9px #0000000b, 0 32.5px 11.4px #0000000b, 0 46.3px 16.2px #0000000c, 0 66.5px 23.3px #0000000c, 0 97px 34px #0000000c, 0 147.1px 51.5px #0000000d, 0 244.4px 85.5px #0000000e;
  --shadow-label: inset 0 3px 20px #fcfdff40, var(--shadow-layers);     /* .hero_label-content */
  --shadow-center: 0 -8px 40px 10px #00000040, var(--shadow-layers);    /* .integration_grid-center */

  /* --- Focus (GetMaply --focus--*, --border-width--main) --------------------- */
  --focus-width: .125rem;
  --focus-offset-outer: .1875rem;
  --focus-offset-inner: calc(var(--focus-width) * -1);
  --border-width-main: .094rem;

  /* --- Navigation (MakeItSales : inline :root de makeitsales-karam_webflow_io.html
         + mis_all.css). Noms conservés pour diff avec la référence. ------------ */
  --nav_2--height: 4rem;
  --nav_2--radius: .5rem;                          /* var(--radius--small) */
  --nav_2--spacing-inner-horizontal: 2rem;         /* var(--_spacing---space--5) = 2rem chez MakeItSales */
  --nav_2--container: 90rem;                       /* var(--container--main) */
  --nav_2--spacing-outer-vertical: 20px;           /* .nav_2_wrap.is-desktop{margin-top:20px} (la variable de la réf vaut --site--margin = 0px ; la valeur rendue est 20px) */
  --swatch--backdrop-color: #d9d9d91a;
  --swatch--backdrop-filters: 30px;
  --inner--x: 34.97px;
  --inner--y: -34.97px;
  --inner--blur: 34.97px;
  --outside--x: -34.97px;
  --outside--y: 34.97px;
  --outside--blur: 34.97px;
  --color-inner--outside: #a5a5a51a;
  --shadow-nav: inset var(--inner--x) var(--inner--y) var(--inner--blur) 0 var(--color-inner--outside), var(--outside--x) var(--outside--y) var(--outside--blur) 0 var(--color-inner--outside);
  --nav-h: var(--nav_2--height);
  --nav-offset: 6rem;                              /* nav 4rem + 20px de marge + marge de respiration ≈ 96 px : scroll-padding-top, scroll-margin-top, Lenis anchors offset -96 */
}

/* == 01-fonts.css == */
/* ============================================================================
   01-fonts.css — T1 (21/09/2026). Polices auto-hébergées (D5, A7) : 3 woff2 dans
   site/fonts/, aucune requête tierce (pas de Google Fonts).
   Fichiers (noms exacts, vérifiés par `ls node_modules/…/files`) :
     - instrument-serif-latin-400-normal.woff2   @fontsource/instrument-serif 5.3.0, OFL-1.1
     - instrument-serif-latin-400-italic.woff2   @fontsource/instrument-serif 5.3.0, OFL-1.1
     - bricolage-grotesque-latin-wght-normal.woff2  @fontsource-variable/bricolage-grotesque 5.3.0, OFL-1.1
   unicode-range : valeurs Fontsource (unicode.json « latin », identiques pour les deux
   familles) ; le sous-ensemble latin couvre œ/Œ (U+0152-0153) et € (U+20AC) → pas de latin-ext.
   Les faces « … Fallback » sont les replis métriques générés par fontpie 0.3.0
   (`npx fontpie <woff2> --name … --fallback serif|sans-serif`) : le swap ne bouge aucune ligne (CLS 0).
   Règles : Instrument Serif jamais en font-weight > 400 (pas de fichier gras) ;
   Bricolage Grotesque = variable 200–800 (déclarer la plage, sinon gras synthétique).
   ============================================================================ */

/* --- Instrument Serif 400 (titres) ------------------------------------------ */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-serif-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-serif-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Bricolage Grotesque variable 200–800 (accroches, chiffres, boutons) ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2-variations'),
       url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Replis métriques fontpie (sortie fontpie 0.3.0 recopiée telle quelle) --- */
/* fontpie site/fonts/instrument-serif-latin-400-normal.woff2 --name "Instrument Serif" --fallback serif */
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Times New Roman'), local('Liberation Serif'); /* CHOSEN: Liberation Serif = clone métrique de Times New Roman, présent sur Linux (machine de test) où local('Times New Roman') échoue */
  ascent-override: 117.87%;
  descent-override: 36.91%;
  line-gap-override: 0.00%;
  size-adjust: 83.99%;
}

/* fontpie site/fonts/instrument-serif-latin-400-italic.woff2 --name "Instrument Serif" --fallback serif --style italic */
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: italic;
  font-weight: 400;
  src: local('Times New Roman Italic'), local('Liberation Serif Italic'); /* CHOSEN: idem, italique */
  ascent-override: 110.50%;
  descent-override: 34.60%;
  line-gap-override: 0.00%;
  size-adjust: 89.60%;
}

/* fontpie site/fonts/bricolage-grotesque-latin-wght-normal.woff2 --name "Bricolage Grotesque" --fallback sans-serif */
@font-face {
  font-family: 'Bricolage Grotesque Fallback';
  font-style: normal;
  font-weight: 200 800; /* CHOSEN: fontpie sort « 400 » ; étendu à la plage variable pour qu'un titre en 800 tombe aussi sur le repli (Arial gras synthétisé) au lieu d'Arial nu */
  src: local('Arial'), local('Liberation Sans'); /* CHOSEN: Liberation Sans = clone métrique d'Arial, présent sur Linux */
  ascent-override: 82.39%;
  descent-override: 23.92%;
  line-gap-override: 0.00%;
  size-adjust: 112.88%;
}

/* --- Alias : mêmes replis sous les noms courts de la synthèse du critique ------
   critique-synthese.json (00-tokens) écrit `--font-serif: 'Instrument Serif','Instrument Fallback',…`
   et `--font-sans: 'Bricolage Grotesque','Bricolage Fallback',…`. La tâche T1 impose les noms
   longs ci-dessus. CHOSEN: on déclare les deux noms pour que 00-tokens fonctionne quel que
   soit celui retenu par T3 ; à supprimer une fois le nom tranché. */
@font-face {
  font-family: 'Instrument Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Times New Roman'), local('Liberation Serif'); /* CHOSEN: Liberation Serif = clone métrique de Times New Roman, présent sur Linux (machine de test) où local('Times New Roman') échoue */
  ascent-override: 117.87%;
  descent-override: 36.91%;
  line-gap-override: 0.00%;
  size-adjust: 83.99%;
}

@font-face {
  font-family: 'Instrument Fallback';
  font-style: italic;
  font-weight: 400;
  src: local('Times New Roman Italic'), local('Liberation Serif Italic'); /* CHOSEN: idem, italique */
  ascent-override: 110.50%;
  descent-override: 34.60%;
  line-gap-override: 0.00%;
  size-adjust: 89.60%;
}

@font-face {
  font-family: 'Bricolage Fallback';
  font-style: normal;
  font-weight: 200 800; /* CHOSEN: voir 'Bricolage Grotesque Fallback' */
  src: local('Arial'), local('Liberation Sans'); /* CHOSEN: Liberation Sans = clone métrique d'Arial, présent sur Linux */
  ascent-override: 82.39%;
  descent-override: 23.92%;
  line-gap-override: 0.00%;
  size-adjust: 112.88%;
}

/* == 02-base.css == */
/* ============================================================================
   02-base.css — T3 (21/09/2026). Reset, html/body, lenis.css (1.2.3) recopié,
   utilitaires GetMaply (.u-container, .u-section, .u-section-spacer, .u-content-wrapper,
   .u-text-style-*, .u-eyebrow-*, .u-color-faded…), lien d'évitement, anneaux de focus,
   ancres. Noms de classes = ceux de getmaply.css ; les variantes Webflow
   « :where(.w-variant-…) » deviennent des modificateurs lisibles « .is-… ».
   Règles Lenis (synthèse) : jamais overflow:hidden ni height:100% sur html/body.
   ============================================================================ */

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;          /* getmaply.css html{} */
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-offset);   /* 6rem : les ancres atterrissent sous la barre flottante (sans Lenis) */
  scroll-behavior: smooth;                 /* sans Lenis (?nolenis=1, tactile, reduced-motion → 03-motion remet auto) */
}

html,
body {
  overflow-x: clip;                        /* clip, PAS hidden : hidden ferait de body le conteneur de défilement et casserait Lenis / position:sticky */
}

body {
  margin: 0;                               /* getmaply.css body{margin:0} */
  min-height: 100svh;                      /* CHOSEN: footer Karam en 100svh en bas d'une page toujours au moins aussi haute que l'écran */
  background: var(--white);
  color: var(--ink);
  font: 400 var(--fs-main) / 1.5 var(--font-sans); /* CHOSEN: interligne 1.5 pour le corps de texte (GetMaply : 1.2 sur ses utilitaires, voir plus bas) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } /* CHOSEN: chaque section pose ses marges explicitement (spec du critique) */

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
svg { fill: currentColor; } /* CHOSEN: icônes inline colorées par le texte ; les logos tiers (A10) portent leurs propres fill */
svg[fill="none"] { fill: none; }

a { color: inherit; }                      /* CHOSEN: aucune référence ne laisse le bleu navigateur ; chaque lien est stylé dans sa section */

button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;              /* iOS : pas de délai de double-tap sur les boutons (checklist iOS de la synthèse) */
}

/* CHOSEN (T14, intégration) : la synthèse demandait `html{scroll-padding-top}` ET
   `[id]{scroll-margin-top}` — en scroll natif les deux s'ADDITIONNENT et l'ancre atterrit à
   192 px au lieu de 96 (mesuré sur #faq avec ?nolenis=1, rapport T5). On garde le seul
   scroll-padding-top de <html> : il couvre les ancres, `scrollIntoView()` et le défilement
   provoqué par le focus clavier. Ne pas rétablir la règle [id] ci-dessous sans re-mesurer.
   [id] { scroll-margin-top: var(--nav-offset); } */

/* --- lenis.css 1.2.3 (site/vendor/lenis.css, recopié tel quel, dépendance de la synthèse) --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-smooth { scroll-behavior: auto !important; } /* CHOSEN: ligne des lenis.css ≥ 1.1.14 (absente du fichier 1.2.3) : sans elle, le scroll-behavior:smooth de html double l'inertie de Lenis sur les ancres */

/* --- Conteneurs (getmaply.css) --------------------------------------------- */
.u-container {
  max-width: var(--max-width);
  gap: var(--sp-8);
  width: calc(100% - var(--site-margin) * 2);
  flex-flow: column;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  container-type: inline-size;
}

.u-container-small {
  z-index: 1;
  max-width: var(--max-width-small);
  gap: var(--sp-8);
  width: calc(100% - var(--site-margin) * 2);
  flex-flow: column;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  container-type: inline-size;
}

.u-section {
  padding-top: var(--section-main);
  padding-bottom: var(--section-main);
  background-color: transparent;
  color: inherit;                          /* réf : var(--_theme---text) */
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  display: flex;
  position: relative;
}

.u-min-height-screen { min-height: 100svh; } /* getmaply.css */

/* Espaceurs : réf .u-section-spacer + variantes Webflow (:where(.w-variant-…)) → .is-* */
.u-section-spacer { height: var(--section-none); }
.u-section-spacer.is-small { height: var(--section-small); }
.u-section-spacer.is-main { height: var(--section-main); }
.u-section-spacer.is-large { height: var(--section-large); }
.u-section-spacer.is-page-top { height: var(--section-page-top); }
.u-section-spacer.is-margin { height: var(--site-margin); }

/* Enveloppe de contenu : réf .u-content-wrapper + variantes center / end / start */
.u-content-wrapper {
  width: 100%;
  text-align: inherit;
  align-items: inherit;
  justify-content: inherit;
}
.u-content-wrapper.is-center {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;                           /* CHOSEN: la réf hérite du flex parent ; on le rend explicite pour centrer les enfants seuls */
  flex-direction: column;
}
.u-content-wrapper.is-start { text-align: start; justify-content: start; align-items: start; }
.u-content-wrapper.is-end { text-align: end; justify-content: end; align-items: end; }

.u-display-contents { align-items: inherit; justify-content: inherit; text-align: inherit; display: contents; }

/* --- Styles de texte (getmaply.css .u-text-style-*) -------------------------
   Réf : primary-family Geist 600 pour display/h1–h6, 400 pour les corps ; interligne
   little .9 / small 1 / medium 1.2 ; tracking tight -.05em sur display/h1/h2/h3.
   Nôtre (D5) : titres h1/h2/h3 en Instrument Serif 400 (pas de graisse > 400 : aucun
   fichier gras), display (chiffres D3) en Bricolage 800. */
.u-text-style-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-little);
  font-weight: 800;                        /* CHOSEN: réf 600 (Geist) ; Bricolage 800 = graisse « chiffres / filigrane » de la synthèse */
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  display: flow-root;
}

.u-text-style-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-medium);
  font-weight: 400;                        /* Instrument Serif n'existe qu'en 400 */
  letter-spacing: var(--tracking-serif);   /* CHOSEN: -.02em au lieu de -.05em (serif) */
  text-wrap: balance;
  display: flow-root;
}
.u-text-style-h1.u-heading-accent { line-height: 1; }

.u-text-style-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-small);
  font-weight: 400;
  letter-spacing: var(--tracking-serif);
  text-wrap: balance;
  display: flow-root;
}

.u-text-style-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-medium);
  font-weight: 400;
  letter-spacing: var(--tracking-serif);
  text-wrap: balance;
  display: flow-root;
}

.u-text-style-h4,
.u-text-style-h5,
.u-text-style-h6 {
  font-family: var(--font-sans);
  line-height: var(--lh-medium);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-wrap: balance;
  display: flow-root;
}
.u-text-style-h4 { font-size: var(--fs-h4); }
.u-text-style-h5 { font-size: var(--fs-h5); }
.u-text-style-h6 { font-size: var(--fs-h6); }

.u-text-style-large,
.u-text-style-main,
.u-text-style-small,
.u-text-style-small-special,
.u-text-style-mini,
.u-text-style-tiny {
  font-family: var(--font-sans);
  line-height: var(--lh-medium);
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: pretty;
  display: flow-root;
}
.u-text-style-large { font-size: var(--fs-large); }
.u-text-style-main { font-size: var(--fs-main); }
.u-text-style-small { font-size: var(--fs-small); }
.u-text-style-small-special { font-size: var(--fs-small-special); } /* réf : secondary-family Akkurat → chez nous la même sans */
.u-text-style-mini { font-size: var(--fs-mini); }
.u-text-style-tiny { font-size: var(--fs-tiny); }

/* --- Petits utilitaires GetMaply ------------------------------------------- */
.u-color-faded { color: var(--ink-2); }                       /* réf : color-mix(in srgb,currentColor 70%,transparent) → CHOSEN : l'encre atténuée de la palette (7,7:1) */
.u-theme-dark .u-color-faded { color: color-mix(in srgb, currentColor 70%, transparent); } /* getmaply.css, valable sur fond sombre */
.u-uppercase,
.u-text-transform-uppercase { text-transform: uppercase; }
.u-weight-bold { font-family: var(--font-sans); font-weight: var(--weight-bold); }
.u-weight-medium { font-weight: var(--weight-medium); }
.u-margin-bottom-0 { margin-bottom: 0; }
.u-zindex-1 { z-index: 1; position: relative; }

/* Thème sombre local (MakeItSales .u-theme-dark sur la FAQ, GetMaply idem) */
.u-theme-dark {
  background-color: var(--royal);          /* réf : var(--_theme---background) = dark-900 → chez nous le bleu roi (D10 : FAQ sur bloc bleu) */
  color: var(--white);
}

/* --- Eyebrow (getmaply.css : carré + texte en capitales, section Intégrations) --- */
.u-eyebrow-wrapper {
  margin-bottom: var(--sp-5);
  justify-content: inherit;
  display: flex;
}
.u-eyebrow-layout {
  gap: var(--sp-3);
  vertical-align: baseline;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
}
.u-eyebrow-marker {
  aspect-ratio: 1;
  background-color: var(--sky);            /* réf : var(--swatch--brand-300) → notre bleu ciel */
  border-radius: 2px;
  flex: none;
  width: .7rem;
  height: .7rem;
  padding-bottom: 0;
  padding-right: 0;
}
.u-eyebrow-text {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: var(--weight-bold);         /* CHOSEN: réf 400 (Akkurat) ; 600 pour tenir en capitales sur papier */
  color: var(--royal);                     /* CHOSEN: réf hérite (variante brand-orig) */
}
.u-eyebrow-text.u-text-style-small-special {
  letter-spacing: 0;                       /* réf : var(--_typography---letter-spacing--normal) */
  text-transform: uppercase;
}
.u-eyebrow-text p { margin: 0; }
.u-theme-dark .u-eyebrow-text { color: var(--white); }
.u-theme-dark .u-eyebrow-marker { background-color: var(--neon); }

/* --- Lien d'évitement (getmaply.css .nav_skip_wrap ; la synthèse le nomme .skip) --- */
.skip,
.nav_skip_wrap {
  z-index: 1001;                           /* CHOSEN: réf 2 ; au-dessus de la barre fixe (z 1000) */
  border: var(--border-width-main) solid var(--line);
  border-radius: var(--radius-small);      /* var(--nav--radius) */
  background-color: var(--white);
  color: var(--ink);
  outline-offset: var(--focus-offset-inner);
  pointer-events: auto;
  margin: .5rem;
  padding: .5rem 1rem;                     /* CHOSEN (T14) : réf .5rem ; élargi pour la cible de 44 px ci-dessous */
  min-height: 44px;                        /* CHOSEN (T14, a11y) : mesuré 126×39 px → sous la cible de 44 px exigée par le plan §3 */
  align-items: center;
  display: inline-flex;
  position: absolute;
  inset: 0 auto auto 0;
  transform: translate(-200%);
  text-decoration: none;
  font-size: var(--fs-small);
}
.skip:focus,
.nav_skip_wrap:focus { transform: translate(0%); }

/* --- Focus visible (GetMaply --focus--width .125rem / offset .1875rem) --- */
:focus-visible {
  outline: var(--focus-width) solid var(--royal);
  outline-offset: var(--focus-offset-outer);
}
.u-theme-dark :focus-visible,
.u-theme-dark:focus-visible { outline-color: var(--neon); } /* neon sur fond sombre (a11y de la synthèse) */

/* --- Lecteurs d'écran (getmaply.css .u-sr-only) ---------------------------- */
.u-sr-only {
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  width: 1px;
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
}

/* == 03-motion.css == */
/* ============================================================================
   03-motion.css — T3 (21/09/2026). Portes de mouvement + calques de grain (D17).
   - prefers-reduced-motion: reduce → animations/transitions tuées, scroll natif.
   - [data-reveal] : visible par défaut (sans JS, la page est entière). Caché
     seulement quand html porte .js ET .motion (posées par 00-core.js quand le
     mouvement est autorisé : ni reduced-motion, ni ?static=1) ; 35-reveal.js les
     fait apparaître via ScrollTrigger. Jamais sur un h1 (LCP).
   - Grain : body::after (tuile site/img/noise-256.png, T4b), opacité .05 ;
     .u-grain-strong::after (#hero, #faq) opacité .12. Statique → reste en reduced-motion.
   - La tuile n'est demandée qu'APRÈS la première image peinte : 00-core.js pose html.grain
     (double requestAnimationFrame) et c'est cette classe qui définit --grain-tile. Sans elle
     le calque existe mais vaut `none` (fix round 3, voir le bloc « Grain de page »).
   ============================================================================ */

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

/* État initial des révélations : visible tant que le JS ne l'a pas pris en charge */
[data-reveal] { opacity: 1; }
html.js.motion [data-reveal] {
  opacity: 0;
  visibility: hidden;                      /* GSAP autoAlpha pose opacity + visibility en inline → prime sur cette règle */
}
/* Le h1 (LCP) n'est jamais caché, même marqué par erreur */
html.js.motion h1[data-reveal],
html.js.motion [data-reveal]:has(h1),
html.js.motion [data-reveal] h1 {
  opacity: 1;
  visibility: visible;
}

/* --- Grain de page (D17, PLAN §3b) ------------------------------------------ */
/* CHOSEN (fix round 3, LCP) : la tuile (33 Ko, 2e plus gros fichier du premier écran) était
   demandée par body::after dès le calcul des styles, en priorité High (calque plein écran),
   et finissait avant le h1 → Lighthouse la comptait dans le chemin critique du LCP
   (2 526 ms > 2 500). La tuile est désormais définie par --grain-tile, que seul html.grain
   fournit ; 00-core.js pose cette classe après la première image peinte (double rAF).
   Un décor à 5 % d'opacité qui apparaît une image plus tard ne se voit pas ; sans JS, pas de
   grain (décoratif). Les autres calques de grain (ex. .hw-noise des fonctionnalités) peuvent
   lire le même jeton : `background: var(--grain-tile, none) repeat 0 0 / 256px 256px`. */
html.grain { --grain-tile: url(/img/noise-256.png); } /* tuile 256×256 générée par tools/noise.py (T4b) */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--grain-tile, none) repeat 0 0 / 256px 256px;
  opacity: .05;
  mix-blend-mode: overlay;
  z-index: 2147483000;                     /* CHOSEN: au-dessus de tout (nav 1000) : un voile, pas un élément */
}

/* Variante forte : à poser sur #hero et sur le panneau bleu de la FAQ.
   Le calque s'arrête au bord de l'élément qui porte la classe : pour la FAQ, la
   mettre sur le fond bleu, pas sur la carte des réponses (lisibilité, PLAN §3b). */
.u-grain-strong {
  position: relative;
  isolation: isolate;                      /* le blend ne dépasse pas la section */
}
.u-grain-strong::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--grain-tile, none) repeat 0 0 / 256px 256px; /* même jeton que body::after (posé par html.grain) */
  opacity: .12;
  mix-blend-mode: overlay;
  z-index: 1;                              /* CHOSEN: au-dessus du fond/canvas ; un enfant à sortir du grain se place en position:relative; z-index:2 */
  border-radius: inherit;
}

/* == 05-button.css == */
/* ============================================================================
   05-button.css — T3 (21/09/2026). Bouton magnétique GetMaply (Osmo « Button 037 »).
   Port au mot près de : (1) le bloc inline « :root{--button-037-…} » + règles
   .button-037 de getmaply_com.html (lignes 466-518), (2) les règles .button-037*
   de getmaply.css, (3) .u-button-wrapper de getmaply.css.
   Couleurs (décision du critique, D1) : fond --royal, texte blanc, survol --navy
   (réf : fond blanc, texte #131313, variante « base » fond --swatch--brand-orig #2f6ecf).
   Statique sur mobile (D1) : la porte média (hover:hover) and (pointer:fine) coupe
   le scale de survol ; le magnétisme JS (05-button.js) a la même porte.
   ============================================================================ */

/* Jetons (inline :root de getmaply_com.html), posés sur le composant pour rester locaux */
.button-037 {
  --button-037-color: var(--white);                       /* réf #131313 → texte blanc sur bleu roi (16,3:1) */
  --button-037-color-background: var(--royal);            /* réf #fff → bleu roi */
  --button-037-color-background-hover: var(--navy);       /* CHOSEN: survol → navy (décision du critique) */
  --button-037-color-focus: var(--navy);                  /* réf #000 */
  --button-037-padding: 0.75em 1em;
  --button-037-border-radius: 2.5em;
  --button-037-focus-inset: -0.125em;
  --button-037-hover-scale: 1.065 1.095;
  --button-037-click-scale: 0.955, 0.925;
  --button-037-focus-scale: 1.165 1.195;
  --button-037-ease-click: cubic-bezier(0.4, 0, 0.2, 1);
  --button-037-ease-hover: cubic-bezier(0.34, 2.27, 0.64, 1);
  --button-037-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}
.u-theme-dark .button-037 { --button-037-color-focus: var(--neon); } /* CHOSEN: anneau neon sur fond sombre (a11y de la synthèse) */

/* getmaply.css .button-037 */
.button-037 {
  border-radius: var(--radius-little);                    /* réf : 4 coins var(--radius--little) = 2rem */
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  color: var(--button-037-color);
  background-color: transparent;                          /* réf #0000 */
  outline-style: none;                                    /* le focus est dessiné par ::after */
  padding: 0;
  line-height: 1;
  text-decoration: none;
  display: inline-grid;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;               /* inline getmaply_com.html */
  touch-action: manipulation;                             /* CHOSEN: iOS, pas de délai de double-tap */
  min-height: 44px;                                       /* CHOSEN: cible tactile ≥ 44 px (règle a11y du PLAN §3) ; la grille étire __bg et __inner */
  font-family: var(--font-sans);                          /* CHOSEN: le <a> hérite sinon du parent (titre serif possible) */
  width: fit-content;                                     /* CHOSEN: largeur intrinsèque même dans un flex colonne (align-items:stretch) — la réf enveloppe toujours le bouton dans .u-button-wrapper ; « jamais pleine largeur » (architecte pixel) */
  max-width: 100%;                                        /* CHOSEN: ne déborde jamais d'un conteneur étroit */
}

/* getmaply.css .button-037__bg + transition inline */
.button-037__bg {
  background-color: var(--button-037-color-background);  /* réf var(--swatch--brand-orig) */
  pointer-events: none;
  width: 100%;
  height: 100%;
  color: var(--white);                                    /* réf var(--swatch--light-100) */
  border-radius: var(--button-037-border-radius);
  grid-area: 1 / 1;
  padding: 0;
  transition: scale 0.4s var(--button-037-ease-hover), transform 0.15s var(--button-037-ease-click), background-color .3s; /* background-color .3s : CHOSEN (fondu du survol navy) */
}

/* getmaply.css .button-037__inner */
.button-037__inner {
  gap: var(--sp-1);                                       /* réf grid-column/row-gap var(--_spacing---space--1) */
  pointer-events: none;
  width: 100%;
  height: 100%;
  padding: var(--button-037-padding);
  z-index: 1;
  grid-area: 1 / 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

/* getmaply.css .button-037__text */
.button-037__text {
  color: var(--white);                                    /* réf var(--swatch--light-100) */
  font-size: var(--fs-small);                             /* var(--_typography---font-size--text-small) */
  font-weight: var(--weight-bold);                        /* var(--_typography---font--primary-bold) = 600 */
  white-space: nowrap;                                    /* CHOSEN: « Recevoir mon diagnostic gratuit » ne se coupe pas dans la pilule */
}

/* getmaply.css .button-037__icon (1.5rem puis surchargé 1.25rem) ; filter:invert() retiré :
   notre icône éventuelle est un SVG inline en currentColor (décision du critique) */
.button-037__icon {
  aspect-ratio: 1;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  display: flex;
}
.button-037__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; transition: translate .35s var(--button-037-ease-hover); } /* CHOSEN: micro-mouvement de la flèche (synthèse) */

/* inline getmaply_com.html : clic */
.button-037:active .button-037__bg {
  transform: scale(var(--button-037-click-scale));
}

/* inline getmaply_com.html : anneau de focus */
.button-037::after {
  content: '';
  display: block;
  position: absolute;
  inset: var(--button-037-focus-inset);
  border-radius: var(--button-037-border-radius);
  transition: box-shadow 0.3s var(--button-037-ease-focus), scale 0.4s var(--button-037-ease-hover);
  pointer-events: none;
  z-index: 1;
}
.button-037:is(:focus-visible)::after {
  box-shadow: 0 0 0 0.125em var(--button-037-color-focus);
  scale: var(--button-037-hover-scale);
  transition: box-shadow 0.3s var(--button-037-ease-focus), scale 0.425s 0.05s var(--button-037-ease-hover);
}

/* inline getmaply_com.html : survol, porte média (D1 : statique sur mobile) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button-037:is(:hover, :focus-visible) .button-037__bg,
  [data-hover]:is(:hover, :focus-visible) .button-037 .button-037__bg {
    scale: var(--button-037-hover-scale);
    background-color: var(--button-037-color-background-hover); /* CHOSEN: survol navy */
    transition: scale 0.425s 0.05s var(--button-037-ease-hover), transform 0.15s var(--button-037-ease-click), background-color .3s;
  }
  .button-037:hover .button-037__icon svg { translate: .15em 0; } /* CHOSEN */
}

/* getmaply.css .u-button-wrapper */
.u-button-wrapper {
  margin-top: var(--sp-3);
  gap: var(--sp-2);
  align-content: center;
  align-items: center;
  justify-content: inherit;
  flex-flow: wrap;
  display: flex;
}

/* == 10-nav.css == */
/* ============================================================================
   10-nav.css — T5 (21/09/2026). Barre flottante « pilule » (A4), clone de MakeItSales
   nav_2 : mis_all.css (.nav, .nav_2_wrap, .nav_2_contain.is-desktop, .nav_2_logo_wrap,
   .nav_2_desktop_layout, .nav_2_links_wrap, .nav_2_links_item, .nav_2_links_link,
   .nav_2_links_text, .nav_2_actions_wrap, .nav_2_buttons_item) + jetons inline :root
   {--nav_2--…, --swatch--backdrop-*, --inner--*, --outside--*} déjà posés dans 00-tokens.css.
   Couleurs (CHOSEN, brief T5) : pilule blanche translucide rgba(255,255,255,.72) + flou 30 px,
   texte navy — lisible à la fois sur le shader du hero (D16 : navy sur ≈ #BAD2FF, > 10:1) et
   sur les sections blanches, sans bascule JS de couleur (la réf a .nav.nav_second{color:#000},
   non reprise). Bouton = composant button-037 (05-button.css) en variante .is-nav, plus petit.
   Pas de JS : ancres via Lenis anchors{offset:-96} (00-core.js) ou scroll-padding-top 6rem
   (02-base.css). Mobile (A4) : logo + bouton, pas de hamburger.
   ============================================================================ */

/* mis_all.css .nav */
.nav {
  z-index: 1000;
  pointer-events: none;                      /* hors pilule, les clics traversent vers le hero */
  background-color: transparent;             /* réf #0000 */
  position: fixed;
  inset: 0 0 auto;                           /* réf inset: 0% 0% auto */
  color: var(--navy);                        /* CHOSEN: texte navy sur pilule blanche (réf : hérite, .nav_second → noir) */
  isolation: isolate;                        /* CHOSEN: checklist iOS (backdrop-filter) */
  /* réf : container-type: inline-size — ne sert qu'à ses @container (bascule desktop/mobile,
     hamburger) ; A4 n'a pas de menu mobile → non repris (CHOSEN) */
}

/* mis_all.css .nav_2_wrap + .nav_2_wrap.is-desktop (son display:none est levé : la réf
   l'affiche via @container ≥ 65em, nous l'affichons toujours) */
.nav_2_wrap.is-desktop {
  z-index: 1;
  position: relative;
  display: block;
  background-color: transparent;
  margin-top: max(var(--nav_2--spacing-outer-vertical), env(safe-area-inset-top, 0px)); /* réf 20px ; CHOSEN: max() avec l'encoche iOS (viewport-fit=cover), vaut 20px partout ailleurs */
  padding: 0 var(--site-margin);             /* CHOSEN: la réf a --site--margin:0px mais sa capture montre la pilule en retrait ; marge de site GetMaply/Karam (16 px à 320, 48 px à 1440) */
}

/* mis_all.css .nav_2_contain + .nav_2_contain.is-desktop */
.nav_2_contain.is-desktop {
  pointer-events: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;                       /* CHOSEN: la réf étire (défaut) ; centre logo et bouton sur 4rem */
  column-gap: var(--sp-3);                   /* réf grid-column-gap var(--_spacing---space--3) */
  width: 100%;
  max-width: var(--nav_2--container);        /* 90rem */
  height: var(--nav_2--height);              /* 4rem */
  margin: 0 auto;
  padding: 0 .9rem 0 var(--nav_2--spacing-inner-horizontal); /* réf : padding-right .9rem, padding-left 2rem */
  border: 1px solid var(--line);             /* réf 1px solid var(--swatch--light-faded) = #0f9e7333 (vert Webflow par défaut) → filet navy 12 % (CHOSEN) */
  border-radius: var(--radius-round);        /* réf var(--radius--round) = 100vw */
  background-color: rgba(255, 255, 255, .72); /* CHOSEN: réf #d9d9d91a (gris 10 %) invisible sur blanc, illisible sur le shader → blanc 72 % */
  box-shadow: var(--shadow-nav);             /* réf : inset 34.97px -34.97px 34.97px 0 #a5a5a51a, -34.97px 34.97px 34.97px 0 #a5a5a51a */
  -webkit-backdrop-filter: blur(var(--swatch--backdrop-filters));
  backdrop-filter: blur(var(--swatch--backdrop-filters)); /* 30px */
  transform: translateZ(0);                  /* CHOSEN: checklist iOS : couche propre pour le flou */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav_2_contain.is-desktop { background-color: rgba(255, 255, 255, .96); } /* CHOSEN: sans flou, presque opaque pour rester lisible */
}

/* mis_all.css .nav_2_logo_wrap (width 12rem) */
.nav_2_logo_wrap {
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 12rem;
  height: 100%;                              /* CHOSEN: le lien occupe toute la hauteur de la pilule → cible tactile ≥ 44 px (le logo seul fait 28 px) */
  outline-offset: var(--focus-offset-inner); /* réf var(--focus--offset-inner) */
}
.nav_2_logo {
  height: 1.75rem;                           /* CHOSEN: 28 px — le mot-marque « Sam » (214×71, 3:1) à 12rem de large ferait 63 px, toute la pilule ; le logo MakeItSales (4,8:1) rend ≈ 40 px à 12rem */
  width: auto;
  max-width: 100%;
}

/* mis_all.css .nav_2_desktop_layout */
.nav_2_desktop_layout {
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;                 /* CHOSEN: ≤ 991px les liens sont cachés, le bouton reste à droite (sans effet quand les liens, flex:1, sont là) */
  min-width: 0;                              /* CHOSEN */
  height: 100%;                              /* CHOSEN: les liens (height:100 %) prennent la hauteur de la pilule → cible ≥ 44 px */
}

/* mis_all.css .nav_2_links_wrap + .nav_2_links_wrap.is-desktop (+ .w-list-unstyled) */
.nav_2_links_wrap.is-desktop {
  flex: 1;
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav_2_links_item { display: flex; }        /* mis_all.css */

/* mis_all.css .nav_2_links_link + .nav_2_links_link.is-desktop */
.nav_2_links_link {
  z-index: 2;
  position: relative;
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  column-gap: var(--sp-2);                   /* réf grid-column-gap var(--_spacing---space--2) */
  width: 100%;
  padding: var(--sp-2) 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;                     /* CHOSEN: la réf l'enlève via .w-inline-block */
  font-size: var(--fs-small);                /* CHOSEN: la réf hérite du corps (Poppins) ; clamp(.875rem, …, 1rem) = échelle GetMaply (architecte pixel) */
  outline-offset: var(--focus-offset-inner); /* réf (avec !important, inutile ici) */
}
.nav_2_links_link.is-desktop {
  height: 100%;
  padding: 0 var(--sp-3);                    /* réf 0px var(--_spacing---space--3) */
  transition: all .2s;                       /* réf ; Bricolage est variable → la graisse glisse */
}
.nav_2_links_link.is-desktop:hover { font-weight: var(--weight-bold); } /* réf : var(--_typography---font--primary-semi_bold) = 600 */

/* mis_all.css .nav_2_links_text + fantôme gras (CHOSEN, architecte pixel) : un double du texte
   en 600, invisible et de hauteur nulle, réserve la largeur → la graisse change au survol sans
   que les voisins ne bougent. */
.nav_2_links_text {
  display: inline-block;
  text-align: center;
  pointer-events: auto;                      /* réf */
}
.nav_2_links_text::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: var(--weight-bold);
  pointer-events: none;
}

/* mis_all.css .nav_2_actions_wrap + .is-desktop (+ .w-list-unstyled) */
.nav_2_actions_wrap.is-desktop {
  flex: none;
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* mis_all.css .nav_2_buttons_item */
.nav_2_buttons_item {
  z-index: 2;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}

/* Bouton D2 : composant button-037 (05-button.css) en taille réduite (PLAN : « même composant,
   plus petit »). Repères : GetMaply nav = button-037 tel quel (padding .75em 1em, text-small) ;
   MakeItSales .button.alternative = 9px 30px, text-small. */
.button-037.is-nav {
  --button-037-padding: .75em 1.25em;        /* CHOSEN: entre GetMaply (1em) et MakeItSales (30px ≈ 2,3em) ; la hauteur est tenue par min-height 44px */
}
.button-037.is-nav .button-037__text {
  font-size: var(--fs-mini);                 /* CHOSEN: un cran sous --fs-small du bouton D1 : 14 px à 1440, 12,1 px à 390 (relevé à 13 px ≤ 479 ci-dessous) */
}

/* mis_all.css @media (max-width: 991px) : .nav_2_logo_wrap{width:8rem} */
@media (max-width: 991px) {
  .nav_2_logo_wrap { width: 8rem; }
  .nav_2_links_wrap.is-desktop { display: none; }  /* A4 : logo + bouton seulement, pas de hamburger */
  .nav_2_contain.is-desktop { padding: 0 .5rem 0 1.25rem; } /* CHOSEN: 2rem / .9rem trop larges pour une pilule étroite */
}

/* CHOSEN: checklist iOS (synthèse) : flou ≤ 12 px sous 768 px — un flou de 30 px sur une
   surface fixe pleine largeur repeint à chaque frame */
@media (max-width: 767px) {
  .nav_2_contain.is-desktop {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* mis_all.css @media (max-width: 479px) : .nav_2_logo_wrap{width:7rem} ; .nav_2_mobile_contain{height:3.5rem} */
@media (max-width: 479px) {
  .nav_2_logo_wrap { width: 7rem; }
  .nav_2_logo { height: 1.5rem; }            /* CHOSEN: 24 px, proportion de la réf à 7rem (4,8:1 → 23 px) ; tient à 320 px à côté du bouton */
  .nav_2_contain.is-desktop {
    height: 3.5rem;                          /* réf : hauteur de sa barre mobile .nav_2_mobile_contain (--size--3-5rem) */
    padding: 0 .375rem 0 1rem;               /* CHOSEN: 6 px à droite (le bouton de 44 px dans 56 px), 16 px à gauche */
  }
  .button-037.is-nav .button-037__text { font-size: .8125rem; } /* réf .button ≤ 991 : text-small, plafond .8125rem (13 px) ; respecte le plancher 12 px du budget */
}

/* == 20-chiffres.css == */
/* ============================================================================
   20-chiffres.css — T7 (21/09/2026). Section « chiffres » (D3), clone de la
   .pourquoi_section de GetMaply. Règles citées de getmaply.css (variables Webflow
   → jetons de 00-tokens.css : space--2 = --sp-2, space--3 = --sp-3, space--5 = --sp-5,
   radius--large = --radius-large). Valeur non citée → CHOSEN.

   Écart assumé (mesuré, Playwright 1440×900, polices chargées) : nos textes sont bien
   plus longs que ceux de la réf (« ×2 », « +45% », « +30 ») : avec préfixe/suffixe en
   h2 (64 px) les 3 cartes font 524 + 370 + 507 = 1 401 px, plus que le conteneur
   (1 344 px) — en h3 (48 px) : 465 + 312 + 450 = 1 227 px, tient en 100 % (pas en 90 %).
   D'où : préfixes/suffixes en .u-text-style-h3, grille à 100 %, une seule rangée
   seulement ≥ 1280 px (1 170 px pour 1 193 disponibles), pile en dessous.
   ============================================================================ */

/* getmaply.css : aucune règle propre à la section (fond blanc du body) ; posé explicitement (A8 : « chiffres blancs ») */
.pourquoi_section {
  background-color: var(--white);
  color: var(--navy);
}

/* getmaply.css .pourquoi_content.u-container{justify-content:center;align-items:center} */
.pourquoi_content.u-container {
  justify-content: center;
  align-items: center;
  row-gap: 0;                              /* CHOSEN: .u-container pose gap --sp-8 (64 px) entre ses enfants ; la note de bas de section (D3) se règle avec sa propre marge (--sp-4) */
}

/* getmaply.css .pourquoi_grid{justify-content:space-between;align-items:center;width:90%;display:flex} */
.pourquoi_grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;                             /* CHOSEN: réf 90 % ; nos 3 cartes (1 227 px à 1440) ne tiennent pas dans 90 % (1 210 px), voir en-tête */
  list-style: none;                        /* CHOSEN: <ul> sémantique (3 éléments annoncés) ; la réf est une <div> */
  margin: 0;
  padding: 0;
}

/* getmaply.css .pourquoi_card{gap:space--2;border-radius:var(--radius--large);flex-flow:column;justify-content:center;align-items:flex-start;padding:2rem;display:flex;overflow:hidden} */
.pourquoi_card {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-2);
  border-radius: var(--radius-large);      /* 3rem = 48 px */
  padding: 2rem;
  overflow: hidden;
}

/* getmaply.css .pourquoi_card-text{justify-content:flex-start;align-items:flex-end;display:flex} */
.pourquoi_card-text {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;                   /* CHOSEN: réf flex-end + marge sous le symbole (bien pour « % », « × ») ; nos suffixes sont des mots (« millions », « h/24 ») → même ligne de base que le nombre, quelle que soit la police (D5) */
  flex-wrap: wrap;                         /* CHOSEN: un texte trop long passe à la ligne au lieu de déborder de la carte */
  column-gap: .5rem;                       /* CHOSEN: respiration nombre ↔ mot (la réf n'a pas d'espace : « ×2 », « +45% ») */
}

/* Nombre animé : réf .fs-numbercount_number (Finsweet ; aucune règle dans getmaply.css). 20-counters.js
   mesure la valeur finale et pose min-width (en em) pendant le comptage, puis la retire : « 1ch » ne
   convenait pas (zéro proportionnel 70 px ≠ chiffre tabulaire 65 px en Bricolage 800 → trou de 30 px). */
.pourquoi_card .u-text-style-display {
  font-variant-numeric: tabular-nums;      /* CHOSEN: tous les chiffres ont la même largeur → la valeur finale est la plus large possible, aucun saut pendant le comptage */
}
.fs-numbercount_number {
  display: inline-block;
  text-align: right;                       /* CHOSEN: le nombre grandit vers la gauche, collé à son suffixe ; le « + » avant lui reste fixe grâce à la largeur réservée */
}

/* Préfixe / suffixe : réf = variante h2 de .u-text (Geist 600, interligne 1, tracking -.05em).
   Chez nous .u-text-style-h3 est en Instrument Serif (titres, D5) → dans la carte on revient à la
   sans grasse (D5 : Bricolage pour les chiffres et accroches). Taille h3 : voir l'en-tête (mesure). */
.pourquoi_card .u-text-style-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);         /* 600 (réf primary-bold) */
  line-height: var(--lh-small);            /* 1 (réf line-height--small de la variante h2) */
  letter-spacing: var(--tracking-tight);   /* -.05em (réf) */
  color: var(--royal);                     /* synthèse du critique : mots en bleu roi, nombre en navy */
}

/* Le signe « + » monte au centre optique des chiffres : réf .u-margin-bottom-3 (space--3) sous flex-end ;
   sous align-items:baseline la même levée de --sp-3 se fait en position relative (pas d'effet sur la ligne) */
.pourquoi_sign {
  position: relative;
  top: calc(var(--sp-3) * -1);
}

.pourquoi_sep { margin: 0 .15em; }         /* CHOSEN: point médian entre « h/24 » et « 7 » */

.pourquoi_card p { margin: 0; }            /* 02-base.css le fait déjà ; explicite (la réf enveloppe le texte dans .u-rich-text) */

/* getmaply.css sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative} sup{top:-.5em} */
.pourquoi_card sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
  top: -.5em;
}

/* Note de bas de section (D3 : « * estimation sur nos tests ») — pas dans la réf */
.pourquoi_note {
  margin-top: var(--sp-4);                 /* CHOSEN: 24 px sous la grille (synthèse du critique) */
  align-self: center;                      /* CHOSEN: la synthèse dit flex-start ; centrée comme la grille, la note commence au même bord */
  width: 100%;                             /* même largeur que .pourquoi_grid */
  padding-left: 2rem;                      /* CHOSEN: = padding de la carte → le texte de la note est aligné sur celui des cartes */
}

/* Pile verticale sous 1280 px : règle citée de getmaply.css @media (max-width:479px){.pourquoi_grid{gap:space--5;
   flex-flow:column;justify-content:space-between;align-items:flex-start}} — CHOSEN: appliquée dès 1279 px
   (3 cartes en rangée = 1 170 px à 1280, 1 142 px à 1200 pour 1 118 disponibles : ça ne tient plus) */
@media screen and (max-width: 1279px) {
  .pourquoi_grid {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-5);
  }
  .pourquoi_card { width: 100%; }          /* CHOSEN: chaque carte empilée occupe toute la largeur (align-items:flex-start la réduirait à son contenu) */
}

/* getmaply.css @media (max-width:767px){.pourquoi_card{padding:1rem}} */
@media screen and (max-width: 767px) {
  .pourquoi_card { padding: 1rem; }
  .pourquoi_note { padding-left: 1rem; }   /* CHOSEN: suit le padding de la carte */
}

/* == 20-hero.css == */
/* ============================================================================
   20-hero.css — T6 (21/09/2026). Hero (PLAN A5, A8, D1, D12, D16, D17).
   Structure et espacements : GetMaply <section id="Hero" class="hero_section …">
   (getmaply.css, règles citées : .hero_content.u-container, .hero_label,
   .hero_label-content, .hero_h1{margin-bottom:1.5rem} ; les espaceurs page-top / small
   sont ceux de 02-base.css). Fond : shader D16 plein écran (.hero_bg → poster LCP +
   canvas T6b + voile navy A8), texte blanc par-dessus, grain fort .u-grain-strong
   (03-motion.css, ::after en z-index 1).
   Calques (la section isole son contexte via .u-grain-strong) :
     .hero_bg z0 (poster → canvas → voile) → grain z1 → .hero_content z4 (cité GetMaply).
   Couleurs : la palette GetMaply (dark-900 / light-100 / light-200) devient --royal /
   --white / blanc translucide ; chaque valeur non citée porte un CHOSEN.
   ============================================================================ */

/* --- Section ---------------------------------------------------------------- */
.hero_section {
  position: relative;                        /* aussi posé par .u-grain-strong */
  display: flex;                             /* GetMaply .u-section : flex column, justify center (le hero
                                                n'a pas .u-section : les espaceurs remplacent son padding) */
  flex-flow: column;
  justify-content: center;
  min-height: 100vh;                         /* repli iOS < 15.4 (checklist iOS de la synthèse) */
  min-height: 100svh;                        /* A8 plein écran ; GetMaply .u-min-height-screen{min-height:100svh} */
  color: var(--white);                       /* A8 : texte blanc sur le shader */
  background-color: var(--royal);            /* CHOSEN: sous .hero_bg, jamais de blanc derrière du texte blanc si tout manque */
}
.hero_section .button-037 { --button-037-color-focus: var(--neon); } /* CHOSEN: anneau de focus neon sur fond sombre (a11y de la synthèse, comme .u-theme-dark) */

/* --- Fond D16 : poster (LCP) → canvas (T6b) → voile (A8) --------------------- */
.hero_bg {
  position: absolute;
  inset: 0;
  overflow: clip;
  z-index: 0;
  background: linear-gradient(135deg, #0a60ff, #3ddbdb 60%, #77e1d6); /* repli tant que /img/hero-poster.jpg n'existe pas (T6b) : color1/2/3 de D16, angle et 60 % = tâche T6 */
}
.hero_poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;                              /* 02-base pose img{height:auto} */
  object-fit: cover;
  object-position: 50% 50%;                  /* CHOSEN: centre du shader */
}
.hero_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 400ms ease;            /* PLAN §3b : « le canvas fond dessus en 400 ms quand il est prêt » ; CHOSEN: ease */
}
.hero_canvas.is-ready { opacity: 1; }
.hero_canvas[hidden] { display: none; }      /* CHOSEN: 02-base pose canvas{display:block}, ce qui neutraliserait l'attribut hidden */
.hero_veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 48% at 50% 52%, rgba(4, 4, 74, .38) 0 60%, rgba(4, 4, 74, 0) 100%), /* CHOSEN: renfort centré derrière le bloc de texte (≈ 50 % de navy cumulés avec le voile). Calcul WCAG : le voile 20 % seul donne 2,4:1 sur #77e1d6 et 2,6:1 sur #3ddbdb pour du texte blanc ; le renfort donne 5,2:1 et 5,6:1 (exigence T6 / PLAN §5 🟠 ≥ 4,5:1). Les bords du hero gardent le 20 % de A8. */
    var(--hero-veil);                        /* A8 / §3b : rgba(4,4,74,.2) uniforme */
}

/* --- Contenu (getmaply.css cité) --------------------------------------------- */
.hero_content.u-container {
  z-index: 4;
  grid-column-gap: var(--sp-7);              /* var(--_spacing---space--7) : 36 → 48 px */
  grid-row-gap: var(--sp-7);
  gap: var(--sp-7);                          /* même valeur, propriété courte (la réf écrit grid-*-gap) */
  justify-content: center;
  align-items: center;
}

.hero_label {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.hero_label-content {
  border: 1px solid rgba(255, 255, 255, .2); /* réf : 1px solid var(--swatch--light-200) #ebebeb sur page blanche → CHOSEN: blanc 20 % sur le shader */
  border-radius: var(--radius-main);         /* réf var(--radius--main) = 1rem → 16 px */
  background-color: var(--royal);            /* réf var(--swatch--dark-900) #1f1d1e → bleu roi (même bleu que le bouton) */
  color: var(--white);                       /* réf var(--swatch--light-100) */
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: .75rem 1.5rem;                    /* 12 px 24 px */
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-label);           /* inset 0 3px 20px #fcfdff40 + les 19 couches citées (00-tokens) */
}
.hero_label-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .75rem;                         /* CHOSEN: 12 px fixes (tâche T6 ; --fs-mini monterait à 14 px à 1440) */
  line-height: 1.2;                          /* var(--_typography---line-height--medium) */
  font-weight: var(--weight-bold);           /* .u-weight-bold = 600 */
  letter-spacing: .08em;                     /* CHOSEN: tâche T6 (capitales) ; réf 0 */
  text-transform: uppercase;
  white-space: nowrap;                       /* CHOSEN: une pastille = une ligne (28 caractères, tient à 320 px) */
}

.hero_h1 {
  margin: 0 0 1.5rem;                        /* réf .hero_h1{margin-bottom:1.5rem} */
  text-align: center;                        /* réf */
  font-weight: 400;                          /* Instrument Serif : jamais gras (aucun fichier > 400) */
  line-height: 1.05;                         /* CHOSEN: réf 1.2 réglé pour Geist 600 ; un serif 400 se serre (critique) */
  max-width: 20ch;                           /* CHOSEN: ≤ 2 lignes à 1440 (critique) */
  color: var(--white);
}

.hero_sub {
  max-width: 52ch;                           /* CHOSEN: critique */
  margin: 0;
  line-height: 1.5;                          /* CHOSEN: critique (02-base : 1.2 sur .u-text-style-main) */
  color: rgba(255, 255, 255, .85);           /* CHOSEN: tâche T6 « blanc 85 % » */
}

.hero_powered {
  margin-top: var(--sp-2);                   /* critique : var(--_spacing---space--2) = 10 → 12 px */
  color: rgba(255, 255, 255, .7);            /* tâche T6 / D12 « blanc 70 % » */
}

/* --- Entrée du bouton et de la ligne D12 (CHOSEN) --------------------------------
   Pas de data-reveal (35-reveal.js) : son ScrollTrigger « clamp(top 85%) » borne le start à 0
   pour un élément visible au chargement = scroll courant → progress 0, le tween ne joue pas et
   le bouton resterait invisible jusqu'au premier défilement (mesuré Playwright 1440 / 390).
   Ici : animation CSS jouée une fois au chargement, seulement quand 00-core.js a posé html.js.motion
   (ni ?static=1, ni reduced-motion : 03-motion.css ramène de toute façon toute animation à .01 ms).
   `backwards` : l'état de départ ne s'applique que pendant le délai, aucun style résiduel après. */
@keyframes hero_rise {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
html.js.motion .hero_rise {
  animation: hero_rise .8s cubic-bezier(.22, 1, .36, 1) .15s backwards; /* CHOSEN: .8 s / 16 px = valeurs de la spec des révélations (critique), courbe ≈ power3.out */
}
html.js.motion .hero_powered.hero_rise { animation-delay: .3s; }

/* --- Mobile (point de rupture GetMaply @media (max-width:479px) sur .hero_h1-line-one) --- */
@media (max-width: 479px) {
  .hero_h1 {
    font-size: 3rem;                         /* CHOSEN: 48 px fixes sous 480 px (la formule clamp de --fs-h1 donne 50 px à 390) */
    max-width: none;                         /* critique mobile : « max-width none » */
  }
  .hero_veil {
    background:
      radial-gradient(ellipse 80% 52% at 50% 52%, rgba(4, 4, 74, .38) 0 64%, rgba(4, 4, 74, 0) 100%), /* CHOSEN: sur un écran étroit le texte occupe toute la largeur → plateau élargi (mesuré : 4,37:1 au bord droit du bloc h1 avec l'ellipse 70 % ; ≥ 4,5:1 exigé partout dans le bloc) */
      var(--hero-veil);
  }
}

/* == 30-fonctionnalites.css == */
/* ============================================================================
   30-fonctionnalites.css — T8 (21/09/2026). Section « Fonctionnalités » ×6 (D6).
   Mise en page Hermes « Features » (hermes-agent_nousresearch_com.html #features : les styles
   inline sont cités ; les variables CSS Next.js --hw-teams-… et --hpv2-… n'ont pas été sauvegardées
   → valeurs MESURÉES sur site-assets/references/hermes-features-mobile.png, cadre ≈ 552 px,
   reprises de critique-synthese.json et marquées CHOSEN).
   Carte 3:2 façon « Tarifs » GetMaply (D14, PLAN §3b) : dégradé 180deg #000875 → #04044A,
   rayon --radius-main, filigrane haut-droit (.tarifs_card-icon / .tarifs_card_icon-fade /
   .u-svg.tarifs cités de getmaply.css), icône animée 96 px bas-gauche, grain D17.
   Tant que les JSON Lordicon manquent (D19) : texte « Icône à venir », pas de filigrane.
   Desktop : grille 3 × 2 à partir de 75em, 2 colonnes dès 48em, 1 colonne en dessous
   (choix du critique — la grille desktop Hermes n'a pas été capturée ; mobile = la capture).
   ============================================================================ */

/* --- Section --------------------------------------------------------------- */
.landing-features {
  background: var(--paper);                 /* A8 : features papier #F4F7FB (Hermes : paper #f2f2f2) */
  color: var(--navy);                       /* Hermes : encre sur papier */
  padding-block: var(--section-main);       /* CHOSEN: --section-main (GetMaply) ; Hermes non mesuré */
  position: relative;
  overflow: clip;                           /* Hermes .hw-feature-panel overflow-hidden → clip (jamais hidden : règle Lenis) */
}

.features_contain {
  --pad-x: clamp(var(--site-margin), 6vw, 3rem); /* Hermes px-[--hw-teams-pad-x] : 33/552 = 6vw (23 px à 390) ; CHOSEN: borné par --site-margin / 3rem pour que le bord gauche tombe sur celui de .u-container des sections voisines (48 px à 1440) */
  width: 100%;
  max-width: var(--max-width);              /* CHOSEN: 90rem comme .u-container (Hermes --hw-teams-col non sauvegardé) */
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* --- Titre de section -------------------------------------------------------- */
.landing-section-title {
  display: flex;                            /* Hermes : flex w-full items-start gap-2.5 */
  flex-direction: column;                   /* CHOSEN: eyebrow au-dessus du h2 (Hermes : h2 + icône 24 px côte à côte ; icône retirée, D19 « pas d'icône pour le moment ») */
  align-items: flex-start;
  margin-bottom: clamp(3rem, 6vw, 6rem);    /* CHOSEN: 100 px mesurés titre → #1 sur la capture (≈ 6vw à 1440) */
}
.landing-section-title .u-eyebrow-wrapper { margin-bottom: var(--sp-4); } /* CHOSEN: réf --sp-5 ; resserré sous un h2 en interligne 1 */

.features_h2 {
  font-family: var(--font-serif);           /* D5 : Instrument Serif (Hermes : Rules Gothic Condensed) */
  font-weight: 400;                         /* Hermes heading : font-weight 400 */
  font-size: clamp(2.75rem, 1.75rem + 4.5vw, 5rem); /* CHOSEN: « Features » = cap 55 px sur 552 (un mot) ; notre titre fait cinq mots → 45 px à 390 (2 lignes), 80 px à 1440 (1 ligne) */
  line-height: 1;                           /* Hermes heading : line-height 1 */
  letter-spacing: -.02em;                   /* Hermes heading : letter-spacing -0.02em */
  text-wrap: balance;
}

/* --- Grille ----------------------------------------------------------------- */
.landing-feature-grid {
  display: grid;
  grid-template-columns: 1fr;               /* mobile : 1 colonne (capture) */
  gap: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 3vw, 2.5rem); /* CHOSEN: 66 px mesurés entre blocs → plancher 48 px à 390, 72 px à 1440 ; colonnes 32 → 40 px */
}
@media (min-width: 48em) { .landing-feature-grid { grid-template-columns: repeat(2, 1fr); } } /* CHOSEN (critique) */
@media (min-width: 75em) { .landing-feature-grid { grid-template-columns: repeat(3, 1fr); } } /* CHOSEN (critique) : 3 × 2 à 1440 */

.landing-feature {
  display: flex;
  flex-direction: column;
  min-width: 0;                             /* CHOSEN: un mot long ne force jamais la colonne */
}
.landing-feature-heading {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                             /* CHOSEN: 20 px mesurés meta → h3 */
}

.feature_meta {
  font-family: var(--font-sans);            /* Hermes : --hpv2-font-meta (mono) → notre sans (D5) */
  font-weight: var(--weight-medium);        /* CHOSEN: 500 (Hermes 400, mono) */
  font-size: .75rem;                        /* PLAN §2 : « #N VERBE » 12 px majuscules (11 px de capitales mesurés) */
  line-height: 1.5;                         /* Hermes info : line-height 1.5 */
  letter-spacing: .06em;                    /* CHOSEN: Hermes 0 (mono) ; des capitales en sans respirent à .06em */
  text-transform: uppercase;                /* Hermes info : text-transform uppercase */
  color: var(--royal);                      /* CHOSEN: accent bleu roi (Hermes : encre pleine) */
}

.feature_title {
  font-family: var(--font-serif);           /* Hermes subheading : --font-display 500 → Instrument Serif 400 (D5, jamais > 400) */
  font-weight: 400;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); /* CHOSEN: cap 26 px mesuré ≈ 2.3rem sur 552 → 28 px à 390, 40 px à 1440 */
  line-height: 1.1;                         /* Hermes subheading : line-height 1.1 */
  letter-spacing: 0;                        /* Hermes subheading : letter-spacing 0 */
  text-wrap: balance;
}

.landing-feature-description {
  font-family: var(--font-sans);
  font-weight: 400;                         /* Hermes copy : font-weight 400 */
  font-size: 1.0625rem;                     /* CHOSEN: 17 px mesurés */
  line-height: 1.6;                         /* Hermes copy : line-height 1.6 */
  margin: 1.375rem 0 1.25rem;               /* CHOSEN: 22 px au-dessus, 20 px en dessous (mesurés) */
  max-width: 60ch;                          /* CHOSEN */
  color: var(--ink-2);                      /* CHOSEN: encre atténuée 7,7:1 (Hermes : encre pleine) */
}

.landing-feature-art { margin-top: auto; } /* CHOSEN: dans une rangée, les cartes s'alignent en bas quels que soient les textes */

/* --- Carte 3:2 (D14, PLAN §3b) ---------------------------------------------- */
.feature_card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;                      /* Hermes : plaque 480 × 320 mesurée ; PLAN §3b « carte 3:2 » */
  margin: 0;
  overflow: hidden;                         /* repli des navigateurs sans overflow: clip */
  overflow: clip;                           /* Hermes figure : overflow-clip */
  border-radius: var(--radius-main);        /* PLAN §3b : rayon GetMaply --radius--main (1rem) ; Hermes rounded-t-md abandonné */
  background: var(--g-deep);                /* PLAN §3b : linear-gradient(180deg, #000875, #04044A) */
  color: var(--white);
  isolation: isolate;                       /* le blend du grain reste dans la carte */
  transform: translateZ(0);                 /* CHOSEN: iOS/Safari découpe les coins arrondis même sur les enfants transformés (parallaxe) */
}

/* Grain (D17 « conservé » sur les cartes) : même tuile que body::after (03-motion.css) */
.hw-noise {
  position: absolute;
  inset: 0;
  z-index: 0;                               /* CHOSEN: sous l'icône et le texte (lisibilité) ; Hermes le met sur l'image */
  pointer-events: none;
  background: url(/img/noise-256.png) repeat 0 0 / 256px 256px;
  opacity: .12;                             /* CHOSEN: comme .u-grain-strong (03-motion.css) ; le critique proposait .14 en feTurbulence */
  mix-blend-mode: overlay;
}

/* Calque parallaxe (Hermes .hw-parallax : yPercent ±6 au scroll, 30-features.js, desktop seulement) */
.hw-parallax {
  position: absolute;
  inset: 0;                                 /* CHOSEN: calque transparent, le dégradé reste sur la carte → rien à masquer aux bords */
  z-index: 1;
}

/* Filigrane haut-droit : getmaply.css .tarifs_card-icon (cité) */
.tarifs_card-icon {
  z-index: 0;
  pointer-events: none;
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 70%;                              /* CHOSEN: réf 30 % sur une carte Tarifs verticale ; sur notre carte 3:2 (paysage) 30 % donnerait un filigrane de 67 px, plus petit que l'icône animée (96 px) — 70 % → filigrane ≈ 56 % de la hauteur de la carte (D14 « la même icône en grand ») */
  display: flex;
  position: absolute;
  inset: 0% 0% auto auto;
}
/* = getmaply.css .u-svg.tarifs (cité) : opacity .3, height 80 %, object-fit contain */
.feature_watermark {
  opacity: .3;
  pointer-events: none;
  object-fit: contain;
  height: 80%;
  aspect-ratio: 1;                          /* CHOSEN: le SVG Lottie est carré (réf : <img> en width 100 %) */
  margin-right: 1.25rem;                    /* CHOSEN: retrait du coin ; la réf laisse l'icône déborder */
}
.feature_watermark:empty { display: none; }
/* = getmaply.css .tarifs_card_icon-fade (cité) : brand-orig 34 % → transparent 82 % ; brand → notre bleu roi = haut du dégradé de la carte */
.tarifs_card_icon-fade {
  z-index: 1;
  background-image: linear-gradient(180deg, var(--royal) 34%, #fff0 82%);
  width: 100%;
  height: 130%;
  position: absolute;
  inset: 0% 0% auto auto;
  pointer-events: none;
}
.feature_card:not(.has-watermark) .tarifs_card_icon-fade { display: none; } /* PLAN §3b : sans filigrane, pas de fondu */

/* Icône animée : 96 px, bas-gauche, padding 2 rem (PLAN §3b) */
.feature_icon {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  width: 6rem;
  height: 6rem;
  z-index: 2;
}
.feature_icon svg,
.feature_watermark svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;                               /* CHOSEN: 02-base pose svg{fill:currentColor} ; Lottie porte ses propres fills (#FFFFFF, export Lordicon) */
}

/* Texte de remplacement tant que le JSON manque (PLAN §3b : Bricolage 500, 12 px, blanc 60 %) */
.feature_placeholder {
  position: absolute;
  left: 2rem;                               /* même ancre que l'icône : la mise en page ne bouge pas quand le JSON arrive */
  bottom: 2rem;
  z-index: 2;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);        /* Bricolage 500 */
  font-size: .75rem;                        /* 12 px */
  line-height: 1.5;
  letter-spacing: .04em;                    /* CHOSEN */
  color: rgba(255, 255, 255, .6);           /* blanc 60 % */
}
.feature_card.is-loaded .feature_placeholder { display: none; }

/* == 40-cta.css == */
/* ============================================================================
   40-cta.css — T9 (21/09/2026). Bandeau CTA (D1), inclus deux fois (#cta-1 après
   les fonctionnalités, #cta-2 après la FAQ). Référence : la vraie section
   <section id="CTA" class="cta_section"> de getmaply_com.html + getmaply.css
   (.cta_section, .u-heading, .u-text, .u-rich-text, .u-display-contents,
   .u-button-wrapper, et le bloc inline « [data-number="N"]{--number:N} »).
   Différences assumées : la réf ouvre le panneau SOMBRE .cta_footer (texte blanc,
   coins arrondis 3rem) ; chez nous c'est un bandeau BLANC autonome (synthèse : le
   dégradé du footer part de transparent juste après #cta-2, la FAQ bleue est juste
   au-dessus) → encre navy, fond blanc explicite, espaceurs symétriques.
   Aucun JS propre : 05-button.js (aimant) et 35-reveal.js ([data-reveal]) suffisent.
   ============================================================================ */

/* getmaply.css : .cta_section{z-index:1;color:var(--swatch--light-100);padding-top:2rem;position:relative} */
.cta_section {
  z-index: 1;
  position: relative;
  color: var(--navy);                       /* CHOSEN: réf var(--swatch--light-100) (blanc sur panneau sombre) → encre navy sur bandeau blanc */
  background-color: var(--white);           /* CHOSEN: blanc explicite (synthèse) — #cta-2 DOIT rester blanc uni : le dégradé du footer commence transparent */
  /* padding-top:2rem (4rem ≤767px, 2rem ≤479px) de la réf NON repris — CHOSEN: il compense les coins
     arrondis du panneau .cta_footer ; ici les deux .u-section-spacer.is-small donnent un bandeau symétrique */
}

/* Bandeau 1 seulement : halo bleu ciel radial, très léger (tâche T9 : « subtle sky radial glow »).
   CHOSEN: ellipse 60 % × 80 % centrée, --sky à 12 % puis transparent à 70 % du rayon ; posé en
   background-image → la background-color reste rgb(255,255,255). #cta-2 n'a rien (blanc uni). */
.cta_section[data-cta="1"] {
  background-image: radial-gradient(ellipse 60% 80% at 50% 50%, color-mix(in srgb, var(--sky) 12%, transparent), transparent 70%);
}

/* .cta_content : classe présente dans le HTML de la réf, sans règle propre dans getmaply.css (conservée pour le diff) */

/* getmaply.css .u-heading / .u-text : « min-width:100%; margin-bottom:var(--_text-style---margin-bottom);
   justify-content:center; align-items:inherit; max-width:calc(var(--number)*1ch); flex-flow:column; display:flex ».
   Portés ici sous .cta_section (les utilitaires génériques appartiennent à 02-base, non éditable par T9). */
.cta_section .u-heading,
.cta_section .u-text {
  justify-content: center;
  align-items: inherit;
  flex-flow: column;
  display: flex;
  /* min-width:100% de la réf NON repris — CHOSEN: dans la réf, min-width l'emporte sur max-width et la mesure
     n'est jamais limitée (sa phrase tient en une ligne) ; nos textes sont plus longs → la limite en ch doit agir */
}
.cta_section .u-heading > h2,
.cta_section .u-text > p {
  max-width: calc(var(--number) * 1ch);     /* réf : max-width:calc(var(--number)*1ch), déplacé sur l'élément texte pour que le ch soit celui de SA police */
}

/* Inline getmaply_com.html : [data-number="24"]{--number:24} … [data-number="50"]{--number:50} (bloc généré 0…100) */
.cta_section [data-number="24"] { --number: 24; }   /* CHOSEN: réf 15 sur le titre (Geist 80 px, phrase courte) ; 24 ch en Instrument Serif 64 px ≈ 2 lignes équilibrées */
.cta_section [data-number="50"] { --number: 50; }   /* réf : data-number="50" sur le paragraphe */

/* Titre : variante h2 de GetMaply (--_text-style---margin-bottom: space--5) ; le style de texte vient de
   .u-text-style-h2 (02-base : Instrument Serif 400, --fs-h2, interligne 1, -.02em, text-wrap:balance).
   CHOSEN: la réf utilise la variante h1 (80 px) car son CTA est le seul de la page ; ici le bandeau
   revient deux fois et le h1 reste unique (hero) → taille h2 (64 px à 1440, 32 px à 320). */
.cta_section .u-heading {
  margin-bottom: var(--sp-5);               /* réf : --_text-style---margin-bottom = var(--_spacing---space--5) sur la variante h2 */
}
.cta_section .u-heading > h2 {
  margin: 0;                                /* réf : .u-rich-text h2{margin-top/bottom} portés par l'enveloppe .u-heading, pas par le h2 */
  text-align: center;
}

/* Paragraphe : variante « inherit » (texte principal) ; :root de la réf → text-main / line-height medium / margin-bottom space--4 */
.cta_section .u-text {
  margin-bottom: var(--sp-4);               /* réf : .u-text{margin-bottom:var(--_text-style---margin-bottom)} = space--4 */
  font-size: var(--fs-main);                /* réf : --_text-style---font-size = text-main */
  line-height: var(--lh-huge);              /* CHOSEN: réf 1.2 (medium) pour une phrase d'une ligne ; 1.5 pour nos 2–3 lignes */
  font-weight: 400;                         /* réf : primary-regular */
  text-wrap: pretty;                        /* réf : --_text-style---text-wrap: pretty */
}
.cta_section .u-text > p {
  margin: 0;                                /* réf : .u-rich-text p{margin} portés par l'enveloppe */
  text-align: center;
}

/* .u-button-wrapper : getmaply.css (05-button.css) → margin-top space--3, gap space--2, flex wrap, justify-content:inherit (center).
   Mesuré sur getmaply.com live (1440) : écart p → bouton = 24 px = la marge basse de .u-text (space--4) FUSIONNÉE avec
   le margin-top space--3 du wrapper (l'enveloppe de la réf est un bloc). Notre .u-content-wrapper.is-center est flex
   (02-base, T3) → pas de fusion → CHOSEN: margin-top 0 ici, l'écart rendu reste 24 px comme la réf. */
.cta_section .u-button-wrapper {
  margin-top: 0;
  justify-content: center;                  /* réf : inherit depuis .u-content-wrapper (center) ; explicite car .u-display-contents s'intercale */
}

/* Mobile : la réf ne change rien de spécifique au CTA hors padding-top (non repris) ; les clamp() font le travail
   (h2 32 px, espaceurs 3rem, bouton largeur intrinsèque centré). Sous 479 px la limite en ch du titre est levée :
   24 ch à 32 px ≈ 380 px > conteneur (358 px) → inutile, mais garde la mesure fluide si le titre change. */
@media screen and (max-width: 479px) {
  .cta_section .u-heading > h2 { max-width: none; } /* CHOSEN: pleine largeur du conteneur (architecte pixel : « max-width none under 479px ») */
}

/* == 50-integrations.css == */
/* ============================================================================
   50-integrations.css — T10 (21/09/2026). Section Intégrations (PLAN D8, A10),
   clonée de GetMaply .integration_* (getmaply.css, règles citées telles quelles ;
   les variables --swatch-- et --_spacing-- de la réf deviennent nos jetons de
   00-tokens.css : --sp-2 = space--2, --radius-main = radius--main,
   --light-200 = swatch--light-200 #ebebeb, --shadow-center = les 20 couches).
   Ce qui n'est pas cité porte un commentaire CHOSEN.
   Mouvement : le défilement des 4 rangées est chez GetMaply une interaction Webflow
   IX3 (webflow.js, non sauvegardée) → ici deux @keyframes CSS (mq-left / mq-right)
   qui translatent chaque rangée de ±(100 % + gap) : la rangée fait exactement une
   ligne de large et contient deux lignes identiques, la translation d'une ligne
   + un gap retombe donc sur le clone → boucle sans couture, quel que soit le viewport
   (le % de translate se rapporte à la largeur de la rangée elle-même).
   Portes : .is-paused (posée par 50-marquee.js hors écran / onglet caché),
   html.no-motion (00-core.js : ?static=1 ou reduced-motion), prefers-reduced-motion.
   Clip : sur .integration_grid-relative (overflow:clip + contain:paint), JAMAIS sur
   .integration_grid — un overflow ≠ visible y forcerait transform-style:flat (GetMaply
   lui-même repasse la grille en overflow:visible ≤ 991 px). Aucune perspective sur un
   ancêtre : le rendu « isométrique plat » de la réf en dépend (rotateX/Y ne font
   qu'écraser : cos 15° = .966, cos 7° = .993).
   ============================================================================ */

.integration_section {
  background-color: var(--white);           /* CHOSEN: rythme des fonds du PLAN (CTA blanc → intégrations blanc → FAQ bleue) */
  color: var(--navy);
  position: relative;
}

/* --- Titre ------------------------------------------------------------------ */
.integration_heading {
  z-index: 1;                               /* getmaply.css .integration_heading */
  position: relative;
}
.integration_content.u-container {
  gap: var(--sp-8);                         /* .u-container (02-base) ; la réf resserre ≤ 767 / ≤ 479, voir plus bas */
}
.integration_h2 {
  max-width: 26ch;                          /* réf : .u-heading{max-width:calc(var(--number)*1ch)} avec data-number="26" */
  margin: 0 0 var(--sp-5);                  /* CHOSEN: --_text-style---margin-bottom de la réf non lisible → space--5, même valeur que l'eyebrow */
}
.integration_p {
  max-width: 50ch;                          /* réf : .u-text avec data-number="50" */
  margin: 0;
  font-size: var(--fs-main);
  line-height: 1.5;                         /* CHOSEN: interligne du corps de texte (spec du critique) ; réf 1.2 */
}

/* --- Scène 3D ---------------------------------------------------------------- */
.integration_grid-relative {
  position: relative;                       /* getmaply.css .integration_grid-relative */
  overflow: clip;                           /* CHOSEN: clip rectangulaire ici (jamais sur la grille preserve-3d) : la grille scale(1.2) déborde de 10 % par côté */
  contain: paint;                           /* CHOSEN: le navigateur peut ignorer les 40 carrés hors cadre */
  padding-block: 10vw;                      /* CHOSEN: hauteur du débord vertical de la grille = scale 1.2 (≈ 8 vw) + skewY 3° (≈ 1,5 vw) → les rangées haute et basse restent entières */
  padding-inline: var(--site-margin);       /* CHOSEN: la grille de la réf mesure la largeur du conteneur (getmaply.com live à 1440 : grille 1344 px, carré 259 px, centre 429 px) ; le débord scale(1.2) va jusqu'au bord de l'écran, où le clip le coupe */
  margin-top: -3vw;                         /* CHOSEN: la réf laisse la grille agrandie remonter sous le titre (≈ 45 px entre le paragraphe et les premiers carrés à 1440) ; .integration_heading garde z-index:1 */
}

.integration_grid {
  --gap: var(--sp-2);                       /* réf : grid-column-gap/grid-row-gap var(--_spacing---space--2) */
  gap: var(--gap);
  width: 100%;
  min-width: 100%;
  transform-style: preserve-3d;
  flex-flow: column;
  display: flex;
  position: relative;
  transform: scale(1.2) skew(-9deg, 3deg) rotateX(-15deg) rotateY(-7deg) rotate(0); /* cité tel quel */
  /* réf : overflow:hidden (≥ 992) / visible (≤ 991) → ici jamais posé : le clip est sur .integration_grid-relative */
}

.integration_line-one {
  gap: var(--gap);                          /* réf : var(--_spacing---space--2) */
  display: flex;
  width: 100%;                              /* CHOSEN: explicite (stretch du flex colonne) : la rangée = exactement une ligne de large, base du calcul ±(100 % + gap) */
  will-change: transform;                   /* CHOSEN: seules les 4 rangées (checklist iOS du PLAN §3) */
  animation: mq-left 40s linear infinite;   /* CHOSEN: 40 s par ligne sur PC (IX3 de la réf non sauvegardée) */
}
.integration_line-one.second {
  flex-flow: row-reverse;                   /* getmaply.css .integration_line-one.second */
  animation-name: mq-right;
}
/* CHOSEN: décalage de phase des rangées 3 et 4 pour que les colonnes ne restent pas alignées
   (la réf montre des rangées désynchronisées, getmaply-integrations-mobile.png) */
.integration_line-one:nth-child(3) { animation-delay: -13s; }
.integration_line-one:nth-child(4) { animation-delay: -27s; }

@keyframes mq-left {
  to { transform: translate3d(calc(-100% - var(--gap)), 0, 0); }
}
@keyframes mq-right {
  to { transform: translate3d(calc(100% + var(--gap)), 0, 0); }
}

.integration_grid-line {
  gap: var(--gap);                          /* réf : var(--_spacing---space--2) */
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  min-width: 100%;
  display: grid;
  flex: none;                               /* CHOSEN: la 2e ligne ne doit pas rétrécir : elle déborde de la rangée (c'est le clone de la boucle) */
}

.integration_square {
  aspect-ratio: 1;
  border: 1px solid var(--light-200);       /* réf : var(--swatch--light-200) = #ebebeb */
  border-radius: var(--radius-main);        /* réf : var(--radius--main) = 1rem */
  background-color: var(--white);           /* réf : var(--swatch--light-100) */
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: .25rem;
  display: flex;
  backface-visibility: hidden;              /* CHOSEN: checklist iOS du PLAN §3 (40 carrés dans une scène preserve-3d) */
}
.integration_square-image {
  object-fit: contain;                      /* réf */
  width: 56%;                               /* CHOSEN: réf height:100% (ses SVG de marques avaient leur propre marge) ; les simple-icons sont pleins bord à bord → 56 % du carré */
  height: 56%;
}

/* Carré central : gradient royal → sky (le brand → brand-600 de la réf), 20 couches d'ombre citées */
.integration_grid-center {
  z-index: 4;
  aspect-ratio: 1;
  border-radius: var(--radius-main);
  background-image: linear-gradient(180deg, var(--royal), var(--sky)); /* réf : linear-gradient(180deg, brand-orig, brand-600) → CHOSEN : royal → sky (PLAN §2 palette) */
  height: 40%;
  color: var(--white);                      /* réf : var(--swatch--light-100) */
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: .3rem;
  display: flex;
  position: absolute;
  inset: 50% 0% 0% 50%;
  translate: -50% -50%;                     /* réf : transform:translate(-50%,-50%) → CHOSEN : propriété `translate` séparée, pour que le transform posé par GSAP (35-reveal.js, data-reveal) ne l'écrase pas */
  box-shadow: var(--shadow-center);         /* 0 -8px 40px 10px #00000040 + les 19 couches citées (00-tokens.css) */
}
.integration_grid-content {
  border-radius: var(--radius-main);
  background-image: linear-gradient(180deg, var(--sky), var(--royal)); /* réf : dégradé inverse de l'extérieur (brand-600 → brand-orig) */
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
  display: flex;
}
.integration_grid-logo {
  width: 70%;                               /* CHOSEN: le « S » (sam-mark-white.svg) occupe 62 % de son carré → 70 % du contenu ≈ 43 % du carré central */
  height: auto;
  aspect-ratio: 1;
}

/* --- Mention A10 -------------------------------------------------------------- */
.integration_footnote {
  margin-top: var(--sp-4);                  /* CHOSEN */
  align-items: center;
  text-align: center;
}
.integration_note { margin: 0; }            /* couleur --ink-2 via .u-color-faded (02-base) */

/* --- Portes de mouvement ------------------------------------------------------ */
.integration_grid-relative.is-paused .integration_line-one { animation-play-state: paused; } /* 50-marquee.js : hors écran / onglet caché */
html.no-motion .integration_line-one,                                                    /* 00-core.js : ?static=1 ou reduced-motion → état t = 0 exact */
.integration_grid-relative.is-static .integration_line-one { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .integration_line-one { animation: none; }
}

/* --- Points de rupture (getmaply.css, cités) ---------------------------------- */
@media screen and (max-width: 991px) {
  /* réf : .integration_grid{overflow:visible} — sans objet ici (jamais d'overflow sur la grille) */
}
@media screen and (max-width: 767px) {
  .integration_content.u-container { gap: var(--sp-4); }
  .integration_grid { gap: var(--sp-2); }
  .integration_square { width: 100%; height: 100%; padding: .125rem; }
  .integration_grid-center { padding: .5rem; }
  .integration_line-one { animation-duration: 26s; } /* CHOSEN: rangée plus courte → même vitesse perçue (spec du critique) */
}
@media screen and (max-width: 479px) {
  .integration_content.u-container { gap: var(--sp-2); }
  .integration_square { padding: .25rem; }
  .integration_grid-center { border-radius: var(--radius-main); padding: .25rem; }
  .integration_grid-content { border-radius: var(--radius-main); padding: .125rem; }
}

/* == 60-faq.css == */
/* ============================================================================
   60-faq.css — T11 (21/09/2026). FAQ MakeItSales (PLAN D7, D10, D17).
   Valeurs citées de site-assets/references/html/mis_all.css (.section-faq.u-theme-dark,
   .g_visual_wrap, .g_visual_img, .u-cover-absolute, .u-grid-autofit, .faq-heading,
   .head-section*, .container.faq-container, .faq-*) ; couleurs recadrées sur la palette
   (--swatch--brand-2 #97c0ff → --neon ; --swatch--light → blanc). Toute valeur non citée
   porte un CHOSEN. Le fond « vagues » (mis_bg.svg, PNG 1,1 Mo propriétaire) est remplacé par
   le dégradé .faq_bg : une seule règle à changer quand Sacha revoit le fond (D10).
   ============================================================================ */

/* --- Section : transparente, la page reste blanche autour du panneau arrondi --- */
.section-faq.u-theme-dark {
  position: relative;                              /* mis_all.css .section-faq.u-theme-dark */
  min-height: 100svh;                              /* mis_all.css */
  display: flex;                                   /* CHOSEN: colonne centrée (la réf hérite du flex de son parent Webflow) */
  flex-direction: column;
  align-items: center;
  background-color: transparent;                   /* réf : --_theme---background: var(--swatch--transparent) ; prime sur .u-theme-dark (fond --royal) */
  color: var(--white);                             /* réf : --_theme---text: var(--swatch--light) */
  isolation: isolate;                              /* CHOSEN: les z-index 0/1/2 restent locaux à la section */
}

/* --- Panneau bleu : calque absolu en retrait de 10 px, coins 1rem ----------- */
.section-faq .u-cover-absolute {
  position: absolute;                              /* mis_all.css .u-cover-absolute */
  inset: 0;
  width: 100%;
  height: 100%;
}
.section-faq .g_visual_wrap {
  padding: 10px;                                   /* mis_all.css .g_visual_wrap.u-position-relative */
  border-radius: var(--radius-main);               /* var(--radius--main) = 1rem */
  min-height: 100svh;
  z-index: 0;                                      /* CHOSEN: sous la grille (z 1) et la carte (z 2) */
}
.section-faq .g_visual_img {
  width: 100%;                                     /* CHOSEN: la réf est un <img> ; un <div> a besoin d'une largeur explicite */
  height: 100%;                                    /* mis_all.css .g_visual_img : height 100%, min/max-height 100% */
  min-height: 100%;
  max-height: 100%;
  border-radius: var(--radius-main);               /* mis_all.css : 4 coins var(--radius--main) */
}
/* Fond D10 (remplace mis_bg.svg). Dégradé de la tâche T11 : navy → bleu roi (45 %) → --deep.
   Le coin le plus clair (#0A6FFB) est en bas à droite, hors des textes ; le blanc y garde ≥ 4,5:1
   sous la carte (mesuré dans la preuve T11). Le grain fort (.u-grain-strong, 03-motion.css) est
   porté par cet élément : il s'arrête au bord du panneau et ne touche pas la carte des réponses. */
.faq_bg {
  background: linear-gradient(135deg, #04044A, #000875 45%, #0A6FFB);
}

/* --- Grille : titre à gauche, carte à droite ------------------------------ */
.section-faq .u-grid-autofit {
  position: relative;                              /* CHOSEN: au-dessus du panneau */
  z-index: 1;
  display: grid;                                   /* mis_all.css .u-grid-autofit */
  /* Réf : repeat(auto-fit, minmax(min(100%, 13rem), 1fr)) → deux colonnes égales ; la carte
     n'atteint 900 px qu'à partir d'un écran de 1 832 px. CHOSEN: colonne de carte plafonnée à
     900 px (preuve PLAN §4 T11 « carte 900 px » à 1440), le titre prend le reste. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 900px);
  gap: 1rem;                                       /* mis_all.css : grid-column/row-gap var(--site--gutter) = 1rem */
  padding: 0 var(--site-margin) 2rem;              /* padding-bottom 2rem cité ; CHOSEN: marges latérales = --site-margin (48 px à 1440, 16 px à 320), comme .u-container */
  width: 100%;                                     /* CHOSEN */
  max-width: var(--max-width);                     /* CHOSEN: 90rem, même plafond que le reste de la page */
}

/* Colonne titre : collante pendant qu'on parcourt les questions */
.faq-heading {
  position: sticky;                                /* mis_all.css .faq-heading */
  top: 20vw;
  width: auto;
  height: auto;
  align-self: start;                               /* CHOSEN: obligatoire pour que sticky agisse dans une cellule de grille */
}
.head-section {
  display: flex;                                   /* mis_all.css .head-section */
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.head-section.u-alignment-center.u-gap-row-4 {
  position: relative;                              /* mis_all.css */
  row-gap: 1.5rem;                                 /* .u-gap-row-4 : var(--_spacing---space--4) = var(--size--1-5rem) */
  text-align: center;                              /* CHOSEN: .u-alignment-center (variable Webflow --align--center) */
}

/* Pastille « VOS QUESTIONS » */
.head-section-circle {
  display: flex;                                   /* mis_all.css .head-section-circle */
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  flex: 0 auto;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--white);                  /* réf : var(--swatch--light) */
  border-radius: 40px;
  text-decoration: none;
}
.head-section-circle_text {
  margin: 0;                                       /* mis_all.css .head-section-circle_text */
  font-family: var(--font-sans);                   /* CHOSEN: Bricolage (réf Poppins) */
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;                           /* CHOSEN: capitales 12 px un peu aérées (réf 0) */
}

/* Titre et paragraphe */
.faq_h2 {
  font-size: clamp(1.75rem, 1.1786rem + 2.8571vw, 3.75rem); /* mis_all.css --_typography---font-size--h2 (1.75 → 3.75rem, aplati) ; .u-text-style-h2 (02-base) donne la police D5, 400, interligne 1, -.02em */
  max-width: 40ch;                                 /* réf .u-max-width-40ch */
  margin: 0;
}
.faq_p {
  max-width: 50ch;                                 /* réf .u-max-width-50ch */
  margin: 0;
  line-height: 1.5;                                /* réf .u-text-style-main : line-height var(--_typography---line-height--1-5) */
  opacity: .9;                                     /* CHOSEN: le paragraphe s'efface un peu sous le titre (capture MakeItSales) */
}
.faq_p strong { font-weight: 700; }                /* CHOSEN: Bricolage 700 pour <strong> (réf Poppins 700) */

/* --- Carte translucide -------------------------------------------------- */
.container.faq-container {
  position: relative;                              /* CHOSEN */
  z-index: 2;                                      /* mis_all.css .container */
  width: 100%;
  max-width: 900px;                                /* mis_all.css .container.faq-container */
  margin: 0 auto;                                  /* mis_all.css .container : margin-left/right auto */
  padding: 60px 5vw 80px;                          /* padding-top 60px / bottom 80px (.faq-container) ; padding-left/right 5vw (.container) */
  border-radius: var(--radius-main);               /* var(--radius--main) */
  background-color: var(--swatch--backdrop-color); /* #d9d9d91a (00-tokens, cité de MakeItSales) */
  -webkit-backdrop-filter: blur(var(--swatch--backdrop-filters)); /* 30px */
  backdrop-filter: blur(var(--swatch--backdrop-filters));
  box-shadow: 0 0 50px #2d3e500f;                  /* mis_all.css */
  isolation: isolate;                              /* CHOSEN: checklist iOS (synthèse) : flou fiable dans Safari */
  transform: translateZ(0);                        /* CHOSEN: idem, calque composité */
}
@supports not (backdrop-filter: blur(1px)) {
  .container.faq-container { background-color: rgba(4, 4, 74, .55); } /* CHOSEN: sans flou, un voile navy garde les textes lisibles */
}

/* --- Un item ---------------------------------------------------------------- */
.faq-wrap { margin-bottom: 0; }                    /* mis_all.css : aucune marge sur desktop, la rangée de 90 px espace déjà (capture MakeItSales : ≈ 91 px entre deux questions) */

.faq-question-h {
  margin: 0;                                       /* CHOSEN: le <h3> est un simple conteneur sémantique */
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.faq-question {
  display: flex;                                   /* mis_all.css .faq-question */
  align-items: center;
  min-height: 90px;                                /* réf : height 90px → CHOSEN min-height (une question sur deux lignes ne déborde pas) */
  cursor: pointer;
  width: 100%;                                     /* CHOSEN: toute la rangée est cliquable */
  text-align: left;                                /* CHOSEN: un <button> centre par défaut */
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  touch-action: manipulation;                      /* iOS : pas de délai de double-tap */
}
.faq-question:focus-visible {
  outline-offset: 4px;                             /* CHOSEN: anneau (couleur --neon via .u-theme-dark :focus-visible, 02-base) décollé de la rangée */
  border-radius: 8px;
}

/* Le « + » : barre horizontale 20×5 et barre verticale 5×20 (seule la verticale tourne) */
.faq-plus-wrap {
  position: relative;                              /* mis_all.css .faq-plus-wrap */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-right: 25px;
  flex: none;                                      /* CHOSEN: ne rétrécit jamais devant une longue question */
}
.faq-plus {
  display: block;                                  /* CHOSEN: <span> (le <button> n'accepte pas de <div>) */
  width: 20px;                                     /* mis_all.css .faq-plus */
  height: 5px;
  border-radius: 3px;
  background-color: var(--neon);                   /* réf var(--swatch--brand-2) #97c0ff → Neon Blue (usage décoratif, PLAN §3) */
}
.faq-plus-l {
  display: block;
  position: absolute;                              /* mis_all.css .faq-plus-l */
  width: 5px;
  height: 20px;
  border-radius: 3px;
  background-color: var(--neon);
  transform-origin: 50% 50%;                       /* CHOSEN */
  transition: transform .35s ease;                 /* CHOSEN: même durée que la réponse (350 ms, décision de la tâche) */
}
.faq-wrap.is-open .faq-plus-l { transform: rotate(90deg); } /* inventaire PLAN §2 : « la verticale tourne » → les deux barres à plat = « − » */

.faq-q-text {
  font-size: clamp(.875rem, .7679rem + .5357vw, 1.25rem); /* mis_all.css --_typography---font-size--text-large (.875 → 1.25rem, aplati) */
  font-weight: 600;                                /* --_typography---font--primary-semi_bold: 600 */
  line-height: 1.3;                                /* CHOSEN: --lh-large ; une question sur deux lignes reste compacte */
}

/* Réponse : hauteur animée par grid-template-rows 0fr → 1fr (350 ms) */
.faq-answer {
  display: grid;                                   /* CHOSEN: remplace l'animation Webflow IX3 (height) par une transition CSS */
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
  overflow: hidden;                                /* mis_all.css .faq-answer */
  padding-left: 45px;
  border-bottom: 1px solid #2d3e501f;              /* mis_all.css : rgba(45,62,80,.12) */
}
.faq-answer.last-faq-answer { border-bottom-width: 0; } /* mis_all.css */
.faq-answer-inner {
  min-height: 0;                                   /* CHOSEN: indispensable pour que 0fr replie vraiment la rangée */
  overflow: hidden;
  visibility: hidden;                              /* CHOSEN: replié = hors de l'arbre d'accessibilité et hors tabulation (le lien de Q7 n'est atteignable qu'ouvert) */
  transition: visibility 0s .35s;                  /* CHOSEN: disparaît à la fin du repli */
}
.faq-wrap.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-wrap.is-open .faq-answer-inner { visibility: visible; transition-delay: 0s; }
/* Sans JavaScript (html sans .js posée par 00-core) : toutes les réponses lisibles */
html:not(.js) .faq-answer { grid-template-rows: 1fr; }             /* CHOSEN: repli sans JS */
html:not(.js) .faq-answer-inner { visibility: visible; }
/* ?static=1 ou prefers-reduced-motion (html.no-motion) : ouverture instantanée */
html.no-motion .faq-answer,
html.no-motion .faq-answer-inner,
html.no-motion .faq-plus-l { transition: none; }                    /* CHOSEN */

.faq-answer-text {
  margin: 0 0 30px;                                /* mis_all.css .faq-answer-text : margin-bottom 30px */
  padding-top: 10px;                               /* mis_all.css */
  font-size: .9375rem;                             /* CHOSEN (synthèse) : la réf --text-small = 10–13 px est illisible pour des artisans de 50 ans → 15 px */
  line-height: 1.6;                                /* CHOSEN */
  color: rgba(255, 255, 255, .9);                  /* CHOSEN: blanc légèrement adouci, ≥ 4,5:1 sur la carte */
}
.faq-answer-text strong { font-weight: 700; }      /* CHOSEN */
/* Lien de la réponse 7 (diagnostic gratuit, A1) : cible tactile ≥ 44 px, soulignement neon */
.faq-answer-link {
  display: flex;                                   /* CHOSEN: sur sa propre ligne, largeur du texte */
  width: fit-content;
  align-items: center;
  min-height: 44px;                                /* CHOSEN: cible ≥ 44 px (a11y PLAN §3) */
  margin-top: .25rem;
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--neon);              /* CHOSEN: le neon signale le lien sans servir de couleur de texte */
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}
.faq-answer-link:hover { text-decoration-color: var(--white); } /* CHOSEN */

/* --- Espaceurs MakeItSales -------------------------------------------------- */
.section-faq .g_section_space { height: 0; }       /* mis_all.css .g_section_space : var(--_spacing---section-space--none) */
.section-faq .g_section_space.is-main { height: var(--section-main); } /* réf variante « main » = var(--size--7rem) → CHOSEN: --section-main (7rem à 1440, 4rem à 320) pour respirer moins sur téléphone */

/* --- Tablette ≤ 991 -------------------------------------------------------- */
@media (max-width: 991px) {
  .faq-wrap { margin-bottom: 20px; }               /* mis_all.css (≤ 991) */
  .faq-question {
    min-height: auto;                              /* mis_all.css : height auto */
    padding: .75rem 0;                             /* CHOSEN: la réf pose margin-bottom 20px sur .faq-q-text (décale le texte) ; un padding symétrique garde le « + » centré */
  }
}

/* --- Téléphone ≤ 767 : colonne, panneau en retrait de 5 px ----------------- */
@media (max-width: 767px) {
  .section-faq .u-grid-autofit {
    display: flex;                                 /* mis_all.css .u-grid-autofit : flex-flow column */
    flex-flow: column;
  }
  .section-faq .g_visual_wrap {
    padding: 5px;                                  /* mis_all.css .g_visual_wrap.u-position-relative */
    border-radius: var(--radius-small);            /* var(--radius--small) = .5rem */
  }
  .section-faq .g_visual_img { border-radius: var(--radius-small); } /* mis_all.css */
  .container.faq-container {
    padding-bottom: 0;                             /* mis_all.css */
    -webkit-backdrop-filter: blur(12px);           /* CHOSEN: checklist iOS (synthèse) : flou ≤ 12 px sous 767 px */
    backdrop-filter: blur(12px);
  }
  .faq-question { min-height: 60px; }              /* mis_all.css : height 60px → cible tactile ≥ 44 px */
  .faq-heading {
    position: relative;                            /* mis_all.css */
    top: 0;
  }
}

/* --- Petit téléphone ≤ 479 ------------------------------------------------- */
@media (max-width: 479px) {
  .container.faq-container { padding-top: 10px; }  /* mis_all.css (la réf passe aussi la carte en flex column gap 19px : inerte chez elle à cause d'un <div> intermédiaire, non repris) */
  .faq-heading {
    height: auto;                                  /* mis_all.css */
    padding-bottom: 10px;
  }
  .faq-answer { padding-left: 0; }                 /* CHOSEN: 45 px = 12 % de 390 px, la réponse reprend toute la largeur */
  .faq-plus-wrap { margin-right: 16px; }           /* CHOSEN: 25 → 16 px */
}

/* == 70-footer.css == */
/* ============================================================================
   70-footer.css — T12 (21/09/2026). Pied de page Karam (karam_all.css : règles .footer_*,
   .footer-background, .footer-line*, .footer-karam_wrap, .footer-text_block, .u-grid*,
   + le <style> inline de karam-agency_com_realisations_cas-clients.html : @container
   width < 50em / 35em / 20em et les déclencheurs [data-trigger] « hover-other »).
   Valeurs citées telles quelles ; couleurs Karam (violet) → palette PLAN §2 :
     brand-orig #6157f8 → --royal (filigrane, décision de la tâche T12)
     brand-400 (= brand + 20 % blanc) → #3B8CFC (= --deep #0A6FFB + 20 % blanc, même recette)
     brand-600 (= brand + 20 % noir) → --sky (trait + point, décision de la tâche T12)
     brand-900 (= brand + 80 % noir) → --navy
     light-100 (white) → --white
   Toute valeur non citée porte un commentaire CHOSEN.
   ============================================================================ */

/* --- Enveloppe (karam_all.css .footer_wrap) ---------------------------------- */
.footer_wrap {
  color: var(--white);                     /* réf var(--swatch--light-100) = white */
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
  position: relative;
  overflow: clip;                          /* CHOSEN: les deux fondus de 40vh (.footer-line_fade) ne doivent jamais élargir la page ; clip et non hidden (Lenis, synthèse) */
}
.footer_wrap.u-min-height-screen {
  min-height: 100vh;                       /* CHOSEN: repli pour les navigateurs sans svh (checklist iOS de la synthèse) */
  min-height: 100svh;                      /* réf */
  padding-top: 4rem;                       /* réf */
}

/* --- Fond dégradé (réf .footer-background) ------------------------------------ */
.footer-background {
  z-index: 0;
  background-image: linear-gradient(180deg, #fff0, #3B8CFC 53%, var(--navy)); /* réf linear-gradient(180deg,#fff0,var(--swatch--brand-400) 53%,var(--swatch--brand-900)) ; #3B8CFC = brand-400 recalculé sur --deep (CHOSEN) */
  pointer-events: none;
  position: absolute;
  inset: 0%;
}

/* --- Trait en fondu + point (réf .footer-line, .footer-line_fade, .footer-line_dot) --- */
.footer-line {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  position: absolute;
  inset: 14% 0% auto;
  width: 100%;                             /* CHOSEN: avec overflow hidden, les fondus sont rognés par le bord au lieu de déborder (synthèse mobile) */
  overflow: hidden;                        /* CHOSEN: idem */
  pointer-events: none;                    /* CHOSEN: calque décoratif, ne capte jamais un clic */
}
.footer-line_fade {
  border-radius: var(--radius-round);      /* réf var(--radius--round) = 100vw */
  background-image: linear-gradient(90deg, #a0a0a000, var(--sky) 50%, #fff0); /* réf …,var(--swatch--brand-600) 50%,… → --sky */
  width: 40vh;
  height: 2px;
  flex: none;                              /* CHOSEN: garde 40vh même dans un conteneur plus étroit (flex-shrink 0) → rognage propre par .footer-line */
}
.footer-line_dot {
  border-radius: var(--radius-round);
  background-image: linear-gradient(to bottom, var(--sky), var(--sky)); /* réf linear-gradient(to bottom,var(--swatch--brand-600),var(--swatch--brand-600)) */
  width: 10px;
  min-width: 10px;
  height: 10px;
  min-height: 10px;
}

/* --- Filigrane « SAM » (réf .footer-karam_wrap, .footer-text_block) ---------------- */
.footer-karam_wrap {
  z-index: 1;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  height: 30vh;
  min-height: 30vh;
  display: flex;
  position: relative;
}
.footer-text_block {
  background-image: linear-gradient(180deg, var(--royal), #fff0 69%); /* réf linear-gradient(180deg,var(--swatch--brand-orig),#fff0 69%) → --royal (tâche T12) */
  pointer-events: none;
  font-family: var(--font-sans);           /* réf : police primaire (Poppins) → Bricolage Grotesque (D5) */
  font-size: clamp(5rem, 22vw, 17rem);     /* CHOSEN (tâche T12) : réf 17rem fixe puis paliers 10 / 8 / 5 rem (KARAM = 5 lettres). « SAM » n'a que 3 lettres : 22vw suit la largeur de l'écran, plafonné au 17rem de la réf (≥ 1237 px) et plancher au 5rem de son palier 479 px. Mesure rapportée dans la preuve T12. */
  font-weight: 800;                        /* réf var(--_typography---font--primary-black) = 800 */
  line-height: 1;                          /* CHOSEN: la réf hérite ~1 ; explicite pour que la boîte de 17rem tienne dans la bande 30vh */
  letter-spacing: -.02em;                  /* CHOSEN: Bricolage 800 est large ; la réf (Poppins) n'en pose pas */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;                      /* CHOSEN: Firefox (pas de -webkit-text-fill-color) ; jamais animé (Safari) */
  white-space: nowrap;                     /* CHOSEN: un seul mot, jamais coupé */
  user-select: none;                       /* CHOSEN: décoratif (aria-hidden) */
}

/* --- Conteneur des colonnes (réf .footer_contain.u-container) ------------------------ */
.footer_contain.u-container {
  z-index: 1;                              /* réf .u-container{z-index:1} (notre .u-container n'en pose pas) */
  padding-top: var(--section-small);       /* réf var(--_spacing---section-space--small) = clamp(3rem…5rem) */
  padding-bottom: var(--sp-6);             /* réf var(--_spacing---space--6) = clamp(2rem…2.5rem) */
  flex: 0 auto;
  gap: 0;                                  /* CHOSEN: notre .u-container pose gap --sp-8 (GetMaply) ; un seul enfant ici */
}

/* Grille 12 colonnes (réf .footer_layout + .u-grid-custom) */
.footer_layout.u-grid-custom {
  grid-column-gap: 1rem;                   /* réf var(--site--gutter) = 1rem chez Karam */
  grid-row-gap: var(--sp-8);               /* réf var(--_spacing---space--8) */
  grid-template-rows: auto;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: repeat(12, minmax(0, 1fr)); /* réf var(--_column-count---value) = 12 */
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: grid;
}

/* Colonne logo + textes (réf .footer_content) */
.footer_content {
  grid-column-gap: 1rem;                   /* réf var(--site--gutter) */
  grid-row-gap: var(--sp-4);               /* CHOSEN: réf inherit (= --sp-8 de la grille) ; 3 blocs de texte → l'espace 4 (20–24 px) */
  flex: auto;
  grid-column: span 4;
  grid-template-rows: auto auto 1fr;       /* CHOSEN: réf auto ; logo, tagline, puis « Propulsé par » calé en bas comme la liste sociale de Karam (margin-top:auto) */
  grid-template-columns: minmax(0, 1fr);   /* CHOSEN: réf repeat(auto-fit,minmax(min(100%,18rem),1fr)) répartit logo | liste sociale ; ici un seul bloc de texte (A2 : pas de réseaux) → une colonne */
  grid-auto-columns: 1fr;
  height: 100%;
  display: grid;
}
.footer_logo_wrap {
  align-self: start;
  width: 8rem;
  display: flex;                           /* CHOSEN: <a> inline-block chez Webflow ; flex + min-height pour une cible tactile ≥ 44 px (le mot-marque fait 42 px de haut à 8rem) */
  align-items: center;
  min-height: 44px;
  color: var(--white);
}
.footer_logo_wrap img {
  width: 100%;
  height: auto;
}
.footer_tagline,
.footer_powered {
  margin: 0;
  max-width: 28rem;                        /* CHOSEN: ~45 caractères par ligne, la tagline ne s'étire pas sur 4 colonnes */
}
.footer_tagline {
  opacity: .9;                             /* CHOSEN: hiérarchie tagline (.9) > mention (.7) */
}
.footer_powered {
  align-self: end;                         /* CHOSEN: bas de la colonne (voir grid-template-rows) */
  opacity: .7;                             /* CHOSEN: mention discrète (A3), même retrait que le .footer_bottom_wrap .8 de la réf */
}

/* Trois colonnes de liens (réf .u-grid-wrapper.u-column-span-8 > .u-grid[data-large-columns=3]) */
.u-grid-wrapper {
  grid-column-gap: 1rem;                   /* réf var(--_gap---size) = var(--site--gutter) */
  grid-row-gap: 1rem;
  width: 100%;
  display: flex;
}
.u-column-span-8 { grid-column-end: span 8; } /* réf */
.u-gap-row-7 { grid-row-gap: var(--sp-7); }  /* réf .u-gap-row-7{grid-row-gap:var(--_spacing---space--7)} : espace entre les deux rangées de colonnes quand la grille passe à 2 colonnes (< 35em) */
.u-grid.footer_groups {
  --_column-count---value: 3;              /* réf data-large-columns="3" */
  grid-template-rows: auto;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: repeat(var(--_column-count---value), minmax(0, 1fr));
  grid-column-gap: inherit;
  grid-row-gap: inherit;
  flex-flow: column;
  width: 100%;
  display: grid;
}
.footer_group_title {
  font-family: var(--font-sans);
  font-weight: 700;                        /* réf var(--_typography---font--primary-bold) = 700 */
  font-size: clamp(.875rem, .7679rem + .5357vw, 1.25rem); /* réf var(--_typography---font-size--h6) : .875rem → 1.25rem (Webflow 20→90rem, pré-calculé) */
  line-height: 1.1;                        /* réf var(--_typography---line-height--medium) = 1.1 chez Karam */
  letter-spacing: -.03em;                  /* réf var(--_typography---letter-spacing--tight-2) */
  margin: 0 0 var(--sp-4);                 /* réf .u-margin-bottom-text → var(--_spacing---space--4) */
  color: var(--white);
}
.footer_group_list {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer_group_item { display: flex; }
.footer_link_wrap {
  padding-top: var(--sp-2);                /* réf var(--_spacing---space--2) */
  padding-bottom: var(--sp-2);
  opacity: calc(1 - .4 * var(--_trigger---off, 0)); /* réf calc(1 - .5*var(--_trigger---off)) → CHOSEN .4 : les autres liens tombent à 60 % (tâche T12) */
  transition-property: opacity;
  transition-duration: .1s;
  transition-timing-function: ease;
  color: inherit;
  text-decoration: none;
  display: flex;                           /* CHOSEN: centre le texte dans la cible tactile */
  align-items: center;
  min-height: 44px;                        /* CHOSEN: cible tactile ≥ 44 px (PLAN §3) ; réf ≈ 40 px à 390 */
  min-width: 44px;                         /* CHOSEN (fix 1) : cible tactile ≥ 44 px en LARGEUR aussi (PLAN §3) ; « FAQ » ne fait que 25 px de texte à 390, la boîte s'élargit à droite (colonne align-items:flex-start), invisible */
  -webkit-tap-highlight-color: transparent;
}
.footer_link_text {
  font-family: var(--font-sans);
  font-size: clamp(.8125rem, .7589rem + .2679vw, 1rem); /* réf var(--_typography---font-size--text-small) : .8125rem → 1rem */
  line-height: 1.5;                        /* réf var(--_typography---line-height--huge) */
  color: var(--white);
}
.footer_link_wrap:hover .footer_link_text { text-decoration: underline; text-underline-offset: .2em; } /* CHOSEN: en plus du fondu des voisins, le lien survolé se souligne (réf : rien) */
.footer_wrap :focus-visible { outline-color: var(--neon); }                                    /* CHOSEN: anneau neon sur fond navy (02-base : neon sous .u-theme-dark) */

/* Déclencheurs Karam (cités du <style> inline de la page, limités au footer — CHOSEN : portée .footer_wrap
   pour ne pas toucher d'autres [data-trigger] du site). Souris : les voisins du lien survolé s'atténuent ;
   clavier : idem au focus (focus-other). */
@media (hover: hover) {
  .footer_wrap [data-trigger~="group"]:has([data-trigger~="hover-other"]:hover) [data-trigger~="hover-other"]:not(:hover) {
    --_trigger---on: 0;
    --_trigger---off: 1;
  }
  .footer_wrap [data-trigger~="hover-other"]:hover {
    --_trigger---on: 1 !important;
    --_trigger---off: 0 !important;
  }
}
.footer_wrap [data-trigger~="group"]:has([data-trigger~="focus-other"]:focus-visible, [data-trigger~="focus-other"] :focus-visible)
  [data-trigger~="focus-other"]:not(:focus-visible, :has(:focus-visible)) {
  --_trigger---on: 0;
  --_trigger---off: 1;
}

/* --- Rangée © (réf .footer_bottom_*) ------------------------------------------ */
.footer_bottom_wrap {
  z-index: 1;
  opacity: .8;
  position: relative;
}
.footer_bottom_contain.u-container { gap: 0; } /* CHOSEN: idem .footer_contain */
.footer_bottom_layout {
  grid-column-gap: var(--sp-4);            /* réf var(--_spacing---space--4) */
  grid-row-gap: var(--sp-4);
  border-top-style: solid;
  border-top-width: var(--border-width-main); /* réf var(--border-width--main) = .094rem */
  border-top-color: currentColor;          /* CHOSEN: réf hérite (border-color initial = currentColor) ; explicite */
  flex-flow: wrap;
  place-content: center space-between;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); /* réf 2.5rem ; CHOSEN: + encoche iPhone (viewport-fit=cover) */
  display: flex;
}
.footer_bottom_text {
  font-family: var(--font-sans);
  font-size: clamp(.8125rem, .7589rem + .2679vw, 1rem); /* réf text-small */
  line-height: 1.5;
}
.footer_bottom_list {
  flex-flow: wrap;
  place-content: center flex-start;
  align-items: center;
  margin: -.5rem;
  display: flex;
}
.footer_bottom_item { display: flex; }
.footer_bottom_link_wrap {
  opacity: calc(1 - .4 * var(--_trigger---off, 0)); /* réf .5 → CHOSEN .4 (60 %) */
  padding: .5rem;
  transition-property: opacity;
  transition-duration: .1s;
  transition-timing-function: ease;
  color: inherit;
  text-decoration: none;
  display: flex;                           /* CHOSEN: cible tactile */
  align-items: center;
  min-height: 44px;                        /* CHOSEN: ≥ 44 px si la ligne Lordicon (lien) est activée */
  min-width: 44px;                         /* CHOSEN (fix 1) : largeur ≥ 44 px aussi, même règle que .footer_link_wrap */
}
.footer_bottom_link_text {
  font-family: var(--font-sans);
  font-size: clamp(.8125rem, .7589rem + .2679vw, 1rem); /* réf text-small */
  line-height: 1.5;
}
a.footer_bottom_link_wrap:hover .footer_bottom_link_text { text-decoration: underline; text-underline-offset: .2em; } /* CHOSEN */

/* --- Paliers Karam (cités : @media max-width 991 / 767 / 479) ------------------------ */
@media screen and (max-width: 991px) {
  .footer-line { top: 8%; }                /* réf */
  /* réf .footer-text_block{font-size:10rem} → couvert par clamp(5rem, 22vw, 17rem) (CHOSEN, voir plus haut) */
}
@media screen and (max-width: 479px) {
  .footer-line_dot { width: 7px; min-width: 7px; height: 7px; min-height: 7px; } /* réf */
}

/* --- Requêtes de conteneur (citées du <style> inline Karam : .u-container est container-type:inline-size) --- */
@container (width < 50em) {
  .footer_layout.u-grid-custom[data-medium-columns="1"] { display: flex; } /* réf :not([data-wf--grid--variant*="auto"]) > [data-medium-columns="1"]{display:flex} → colonne (flex-flow:column déjà posé) */
  .footer_content { height: auto; grid-template-rows: auto; } /* CHOSEN: en colonne, plus de hauteur à remplir → « Propulsé par » suit la tagline */
}
@container (width < 35em) {
  .u-grid.footer_groups { --_column-count---value: 2; } /* réf [data-small-columns="2"] */
}
@container (width < 20em) {
  .u-grid.footer_groups { --_column-count---value: 1; display: flex; } /* réf [data-xsmall-columns="1"]{display:flex} */
}

/* == 80-legal.css == */
/* ============================================================================
   80-legal.css — T12 (21/09/2026). Pages textuelles : /mentions-legales (A9) et /404,
   toutes deux en <main id="main" class="legal u-container"> (src/<page>.template.html, T2).
   Aucune référence ne fournit de page légale → toutes les valeurs sont CHOSEN, à partir des
   jetons GetMaply (00-tokens) : colonne de lecture 70ch, titres en --font-display
   (Instrument Serif 400, jamais gras), fond papier --paper, liens en bleu roi soulignés.
   main.legal (0,1,1) l'emporte sur .u-container (0,1,0) sans !important.
   ============================================================================ */

/* Fond papier sur toute la page (le dégradé du footer démarre transparent : il laisse voir le papier).
   :has() : Chrome 105+, Safari 15.4+, Firefox 121+ ; sans, la page reste blanche — acceptable. */
body:has(> main.legal) { background-color: var(--paper); }        /* CHOSEN: --paper #F4F7FB (palette PLAN §2, « Papier ») */

main.legal {
  display: block;                            /* CHOSEN: .u-container est un flex colonne avec gap --sp-8 → flux normal, marges explicites */
  gap: 0;
  max-width: 70ch;                           /* CHOSEN (tâche T12) : colonne de lecture ~70 caractères */
  padding-top: calc(var(--nav-offset) + var(--section-small)); /* CHOSEN: barre flottante (6rem) + un espace de section small (3→5rem) */
  padding-bottom: var(--section-main);       /* CHOSEN: 4→7rem avant le pied de page */
  color: var(--ink);
  font-size: var(--fs-main);
  line-height: 1.6;                          /* CHOSEN: texte long (body 1.5) */
  text-wrap: pretty;
  overflow-wrap: anywhere;                   /* CHOSEN: les adresses e-mail longues ne débordent jamais à 320 px */
}

main.legal h1 {
  font-family: var(--font-display);
  font-weight: 400;                          /* Instrument Serif n'existe qu'en 400 (01-fonts) */
  font-size: var(--fs-h2);                   /* CHOSEN: 32→64 px (le --fs-h1 du hero serait trop grand pour une page de texte) */
  line-height: var(--lh-small);
  letter-spacing: var(--tracking-serif);
  text-wrap: balance;
  margin: 0 0 var(--sp-6);
}

main.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);                   /* CHOSEN: 28→32 px */
  line-height: var(--lh-medium);
  letter-spacing: var(--tracking-serif);
  text-wrap: balance;
  margin: var(--sp-8) 0 var(--sp-3);
  padding-top: var(--sp-4);
  border-top: var(--border-width-main) solid var(--line); /* CHOSEN: filet 1 px au-dessus de chaque rubrique (rythme de lecture) */
}
main.legal h1 + h2 { border-top: 0; padding-top: 0; margin-top: 0; } /* CHOSEN: pas de filet sous le titre principal */

main.legal p,
main.legal ul,
main.legal ol {
  margin: 0 0 var(--sp-3);
}
main.legal ul,
main.legal ol { padding-left: 1.25em; }
main.legal li + li { margin-top: var(--sp-1); }
main.legal li::marker { color: var(--ink-3); }               /* CHOSEN: puces en encre tertiaire */

main.legal strong { font-weight: var(--weight-bold); }         /* 600 (Bricolage) */

main.legal a {
  color: var(--royal);                       /* CHOSEN: bleu roi (12,6:1 sur papier) ; 02-base laisse color:inherit */
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: .15em;
  border-radius: var(--radius-small);        /* CHOSEN: l'anneau de focus (02-base) suit un coin doux */
}
main.legal a:hover { color: var(--deep); }                   /* CHOSEN: --deep #0A6FFB au survol */
main.legal a[href^="mailto:"],
main.legal a[href^="tel:"] { white-space: nowrap; }          /* CHOSEN: une adresse / un numéro ne se coupent pas */

/* Page 404 : même feuille, contenu court → le footer (100svh) suit immédiatement. */
main.legal p:last-child { margin-bottom: 0; }