/* ==========================================================================
   Covartim, Design tokens
   Sources :
   - brand book Covartim p. 7 (polices) et p. 8 (couleurs) : copies dans ../brand-book/ ;
   - site https://covartim.com/en/ (styles calculés relevés le 3 novembre 2026) : rayon des boutons,
     texte courant 16/24 ;
   - gammes 50 → 950 calculées en OKLCH depuis les couleurs de la charte (../charte/outils/generer-palette.py),
     la couleur de la charte garde sa valeur exacte à son pas (marquée « charte »).
   Pas de maquette Figma : les tailles d'interface sont déduites (à valider), voir README « Points ouverts ».
   ========================================================================== */

:root {
  /* ---------- Couleurs : palette brute ----------
     Uniformisé : le site emploie #0f0f31, #02aeff, #91c611 et #006c7a, quasi-doublons des couleurs de la charte.
     On garde les valeurs du brand book. */
  /* Navy, PMS 2765 C · RAL 5022, couleur principale. Ratio : sur blanc / sur navy-950 */
  --color-navy-50: #f5f6ff;   /* 1.08 / 17.19 */
  --color-navy-100: #e9ecfd;  /* 1.17 / 15.76 */
  --color-navy-200: #d3d7f0;  /* 1.42 / 13.00 */
  --color-navy-300: #babfde;  /* 1.81 / 10.22 */
  --color-navy-400: #a0a5c9;  /* 2.41 / 7.69 */
  --color-navy-500: #868cb4;  /* 3.27 / 5.66 */
  --color-navy-600: #6a709b;  /* 4.77 / 3.88 */
  --color-navy-700: #4f5582;  /* 7.11 / 2.60 */
  --color-navy-800: #373b69;  /* 10.54 / 1.76 */
  --color-navy-900: #202151;  /* 15.02 / 1.23 */
  --color-navy-950: #0f0f32;  /* 18.51 / 1.00 */   /* charte, brand book p. 8 */

  /* Ocean, PMS 7690 C · RAL 5007. Ratio : sur blanc / sur navy-950 */
  --color-ocean-50: #f0f8fe;   /* 1.07 / 17.24 */
  --color-ocean-100: #e0effa;  /* 1.17 / 15.77 */
  --color-ocean-200: #bedaee;  /* 1.45 / 12.74 */
  --color-ocean-300: #97c0dd;  /* 1.93 / 9.61 */
  --color-ocean-400: #6ea4c9;  /* 2.69 / 6.89 */
  --color-ocean-500: #4589b5;  /* 3.82 / 4.85 */
  --color-ocean-600: #006b9e;  /* 5.84 / 3.17 */   /* charte, brand book p. 8 */
  --color-ocean-700: #01547d;  /* 8.19 / 2.26 */
  --color-ocean-800: #043e5d;  /* 11.34 / 1.63 */
  --color-ocean-900: #012940;  /* 15.08 / 1.23 */
  --color-ocean-950: #001829;  /* 18.06 / 1.02 */

  /* Teal, PMS 7474 C · RAL 5025. Ratio : sur blanc / sur navy-950 */
  --color-teal-50: #f1f8fa;   /* 1.07 / 17.23 */
  --color-teal-100: #e2f0f3;  /* 1.17 / 15.86 */
  --color-teal-200: #bfdae0;  /* 1.47 / 12.62 */
  --color-teal-300: #97bfc8;  /* 1.98 / 9.34 */
  --color-teal-400: #6ea4ae;  /* 2.77 / 6.68 */
  --color-teal-500: #458995;  /* 3.99 / 4.64 */
  --color-teal-600: #006b7a;  /* 6.21 / 2.98 */   /* charte, brand book p. 8 */
  --color-teal-700: #015460;  /* 8.61 / 2.15 */
  --color-teal-800: #043e47;  /* 11.76 / 1.57 */
  --color-teal-900: #002a31;  /* 15.27 / 1.21 */
  --color-teal-950: #00191e;  /* 18.14 / 1.02 */

  /* Sky, PMS 299 C · RAL 5024. Ratio : sur blanc / sur navy-950 */
  --color-sky-50: #eef8ff;   /* 1.08 / 17.19 */
  --color-sky-100: #daeffe;  /* 1.18 / 15.65 */
  --color-sky-200: #b1ddfe;  /* 1.43 / 12.90 */
  --color-sky-300: #79c7fd;  /* 1.84 / 10.05 */
  --color-sky-400: #00afff;  /* 2.45 / 7.56 */   /* charte, brand book p. 8 */
  --color-sky-500: #1796d8;  /* 3.29 / 5.63 */
  --color-sky-600: #017ab4;  /* 4.73 / 3.92 */
  --color-sky-700: #00608f;  /* 6.84 / 2.71 */
  --color-sky-800: #01476a;  /* 9.95 / 1.86 */
  --color-sky-900: #012f48;  /* 13.99 / 1.32 */
  --color-sky-950: #001b2c;  /* 17.60 / 1.05 */

  /* Lime, PMS 375 C · RAL 6018. Ratio : sur blanc / sur navy-950 */
  --color-lime-50: #f4fde9;   /* 1.05 / 17.69 */
  --color-lime-100: #e8f9d3;  /* 1.11 / 16.68 */
  --color-lime-200: #cfeda6;  /* 1.29 / 14.38 */
  --color-lime-300: #b0dc6d;  /* 1.58 / 11.72 */
  --color-lime-400: #91c80f;  /* 2.01 / 9.23 */   /* charte, brand book p. 8 */
  --color-lime-500: #7caa1b;  /* 2.75 / 6.72 */
  --color-lime-600: #638a04;  /* 4.06 / 4.55 */
  --color-lime-700: #4c6a0c;  /* 6.22 / 2.97 */
  --color-lime-800: #354d00;  /* 9.49 / 1.95 */
  --color-lime-900: #213200;  /* 13.81 / 1.34 */
  --color-lime-950: #111d00;  /* 17.51 / 1.06 */

  /* Sun, PMS Yellow C · RAL 1016. Ratio : sur blanc / sur navy-950 */
  --color-sun-50: #fffce9;   /* 1.03 / 17.94 */
  --color-sun-100: #fff4b8;  /* 1.11 / 16.64 */
  --color-sun-200: #ffe100;  /* 1.31 / 14.12 */   /* charte, brand book p. 8 */
  --color-sun-300: #e8c422;  /* 1.70 / 10.88 */
  --color-sun-400: #cfa714;  /* 2.28 / 8.10 */
  --color-sun-500: #b68a02;  /* 3.17 / 5.84 */
  --color-sun-600: #986d07;  /* 4.64 / 3.99 */
  --color-sun-700: #7a5203;  /* 6.92 / 2.68 */
  --color-sun-800: #5c3a05;  /* 10.18 / 1.82 */
  --color-sun-900: #402401;  /* 14.28 / 1.30 */
  --color-sun-950: #291200;  /* 17.78 / 1.04 */

  /* Slate, ajout, neutres teintés marine. Ratio : sur blanc / sur navy-950 */
  --color-slate-50: #fafaff;   /* 1.04 / 17.79 */
  --color-slate-100: #ebecf2;  /* 1.18 / 15.70 */
  --color-slate-200: #d7d9df;  /* 1.41 / 13.11 */
  --color-slate-300: #bfc0c8;  /* 1.81 / 10.21 */
  --color-slate-400: #a6a7af;  /* 2.40 / 7.73 */
  --color-slate-500: #8d8f98;  /* 3.22 / 5.74 */
  --color-slate-600: #72747e;  /* 4.65 / 3.98 */
  --color-slate-700: #585a65;  /* 6.85 / 2.70 */
  --color-slate-800: #40424d;  /* 9.98 / 1.85 */
  --color-slate-900: #292a36;  /* 14.20 / 1.30 */
  --color-slate-950: #0f0f32;  /* 18.51 / 1.00 */

  /* Coral, ajout, erreurs. Ratio : sur blanc / sur navy-950 */
  --color-coral-50: #fff4f3;   /* 1.08 / 17.17 */
  --color-coral-100: #ffe4e1;  /* 1.20 / 15.37 */
  --color-coral-200: #fdc6c0;  /* 1.50 / 12.35 */
  --color-coral-300: #fd9e96;  /* 2.00 / 9.26 */
  --color-coral-400: #f6716a;  /* 2.80 / 6.60 */
  --color-coral-500: #e64343;  /* 4.00 / 4.63 */
  --color-coral-600: #c32b2f;  /* 5.66 / 3.27 */
  --color-coral-700: #a10f1b;  /* 8.08 / 2.29 */
  --color-coral-800: #7b0210;  /* 11.30 / 1.64 */
  --color-coral-900: #560006;  /* 15.02 / 1.23 */
  --color-coral-950: #370002;  /* 18.05 / 1.03 */
  /* Lilas [Dérivé, 4 novembre 2026] : teinte du domaine « Produits combinés » seulement (données de teinte, jamais un rôle).
     Remplace coral, réservé aux erreurs. Teinte oklab 315°, à mi-chemin du navy et du coral de la charte. */
  --color-lilac-100: #f6e9fd;  /* 1.17 sur blanc */
  --color-lilac-200: #e9d0f4;  /* 1.42 */
  --color-lilac-500: #9f71b4;  /* 3.82 */
  --color-lilac-600: #835198;  /* 5.84 */
  --color-lilac-700: #663a79;  /* 8.58 */
  --color-lilac-vivid: #994eb7;   /* version saturée (oklab C .17) pour les chiffres des étapes des fiches domaine */
  /* Mist, ajout : gris très légèrement verts (teinte du teal) pour les fonds clairs, les cartes et les ronds d'icône,
     relevés dans les corrections Figma du 3 novembre 2026 (24626:11507) ; les filets restent dans la teinte du navy.
     Ratio du texte slate-700 posé dessus : 50 → 6,5 · 100 → 6,0 · 200 → 5,6 */
  --color-mist-50: #f6f9f8;    /* sections claires alternées, cartes de service, bandeau d'appel [Relevé, Figma 24626:11614] */
  --color-mist-100: #edf2f0;   /* cartes, intermédiaire entre 50 et 200 [Dérivé] */
  --color-mist-200: #e2eae7;   /* ronds d'icône, accordéon, pastilles, cartes pierre [Relevé, Figma 24628:12690] */
  --color-mist-300: #cbcdd7;   /* filets et bordures [Relevé, Figma 24627:12311] */

  --color-white: #ffffff;

  /* ---------- Alphas ---------- */
  --color-white-20: rgb(255 255 255 / .2);
  --color-overlay: rgb(15 15 50 / .55);      /* navy-950 à 55 % : fond des popups et du menu mobile */
  --color-disabled: var(--color-slate-100);

  /* Alias courts utilisés par le socle */
  --color-primary: var(--color-navy-950);    /* couleur principale de la charte */
  --color-accent: var(--color-sky-400);      /* signaux, focus, illustrations, jamais en texte sur blanc */
  --color-danger: var(--color-coral-600);    /* 5,66:1 sur blanc */
  --color-success: var(--color-lime-700);    /* 6,22:1 sur blanc */
  --color-warning: var(--color-sun-200);     /* fond uniquement, texte navy dessus (14,1:1) */

  /* ---------- Rôles sémantiques : les composants n'utilisent QUE ceux-ci ---------- */
  --text-primary: var(--color-navy-950);     /* 18,5:1 sur blanc */
  --text-body: var(--color-slate-800);       /* 10:1 sur blanc, 8,6:1 sur mist-100 */
  --text-muted: var(--color-slate-700);      /* 6,9:1 sur blanc, 5,3:1 sur mist-200, légendes, aides */
  --text-inverse: var(--color-white);
  --text-body-inverse: var(--color-navy-200);   /* texte courant sur navy, 13:1 */
  --text-muted-inverse: var(--color-navy-300);  /* légendes sur navy, 10,2:1 */
  --text-heading: var(--color-lime-700);     /* titres verts sur fond clair, 6,22:1 [Dérivé] */
  --text-heading-inverse: var(--color-lime-300); /* titres verts sur navy, 11,72:1 ; même teinte que le bouton accent (demande du 4 novembre 2026, remplace lime-400) */
  --text-link: var(--color-sky-700);         /* 6,8:1 sur blanc */
  --text-link-inverse: var(--color-white);   /* liens sur navy : blanc, souligné navy-400 ; le lime reste la seule couleur vive (le sky-300 a été écarté le 3 novembre 2026) */
  --link-underline-inverse: var(--color-navy-400);
  --text-danger: var(--color-coral-600);
  --text-success: var(--color-lime-700);

  --action-primary: var(--color-navy-950);         /* bouton plein sur fond clair : pilule navy, texte blanc 18,5:1 [Dérivé, inspirations] */
  --action-primary-hover: var(--color-navy-800);   /* 10,5:1 */
  --action-accent: var(--color-lime-300);          /* bouton sur fond sombre : lime clair, texte navy 11,7:1, jamais blanc [Relevé, Figma 24626:11523] */
  --action-accent-border: var(--color-lime-400);   /* contour du bouton accent, le lime de la charte [Relevé] */
  --action-accent-hover: var(--color-lime-400);    /* survol plus foncé (demande du 3 novembre 2026) : texte navy 9,2:1 */
  --action-accent-hover-border: var(--color-lime-500);

  /* Fonds [Dérivé] : page blanche, sections et cartes en gris froid (mist), sections navy, cartes de couleur teal. */
  --bg-page: var(--color-white);             /* fond de page */
  --bg-muted: var(--color-mist-50);          /* sections claires alternées */
  --bg-card: var(--color-mist-100);          /* cartes, boutons secondaires */
  --bg-stone: var(--color-mist-200);         /* cartes de texte d'une mosaïque, ronds d'icône */
  --bg-raised: var(--color-white);           /* panneaux flottants (sous-menus), cartes posées sur un fond gris */
  --bg-dark: var(--color-navy-950);          /* sections sombres */
  --bg-dark-raised: var(--color-navy-900);   /* cartes et chiffres clés sur fond sombre */
  --bg-brand: var(--color-teal-600);         /* carte de couleur : texte blanc 6,2:1 */
  --bg-brand-soft: var(--color-teal-50);
  --text-on-brand: var(--color-teal-50);     /* 5,8:1 sur teal-600 */
  --text-tone: var(--color-slate-600);       /* partie atténuée d'un titre bicolore, ≥ 24 px seulement (4,65:1 sur blanc, 4,1:1 sur mist-100) */
  --text-tone-inverse: var(--color-navy-400);/* idem sur navy (7,7:1) */
  --glass-bg: rgb(15 15 50 / .38);           /* panneau dépoli posé sur un visuel */
  --glass-border: rgb(255 255 255 / .16);
  --glass-blur: 18px;
  --media-shade: linear-gradient(180deg, rgb(15 15 50 / 0) 40%, rgb(15 15 50 / .72) 100%);  /* lisibilité des légendes */
  --bg-info: var(--color-teal-100);
  --bg-success: var(--color-lime-100);
  --bg-warning: var(--color-sun-100);
  --bg-danger: var(--color-coral-50);

  --border-default: var(--color-mist-300);  /* filets décoratifs ; les champs utiliseront un bord ≥ 3:1 */
  --border-strong: var(--color-navy-950);
  --border-inverse: var(--color-navy-800);
  --border-on-media: rgb(255 255 255 / .7);  /* filet vertical des légendes de visuels */
  --focus-ring: 0 0 0 3px rgb(0 175 255 / .45);   /* sky-400 */
  --focus-outline: var(--color-accent);      /* contour de focus des cartes cliquables (sky-400) */
  --bg-hover: var(--color-mist-300);         /* survol neutre de surfaces claires (réservé ; les ronds d'icône utilisent --hover-fill) */
  /* Survol unifié de tous les ronds d'icône (bouton rond, flèche de lien, accordéon, pause) : rempli navy, icône blanche
     sur fond clair ; rempli lime, icône navy sur fond sombre ou visuel (demande du 4 novembre 2026). */
  --hover-fill: var(--action-primary);
  --hover-fill-fg: var(--text-inverse);
  --hover-fill-inverse: var(--action-accent);
  --hover-fill-inverse-fg: var(--text-primary);
  --bg-inverse-soft: var(--color-white-20);  /* ronds et survols sur navy ou sur visuel */
  --bg-overlay: var(--color-overlay);        /* fond des popups et du menu mobile */
  --icon-accent-inverse: var(--color-lime-300); /* picto lime sur navy */
  --drawing-line: var(--color-mist-300);     /* schéma technique du bandeau d'appel : ton sur ton sur mist-50, une seule couleur (demande du 3 novembre 2026) */
  --icon-brand: var(--color-teal-700);       /* picto teal sur teal-50 (ronds d'icône) */
  /* Contrôles de formulaire [Dérivé, inspirations] : le contour doit rester visible (WCAG 1.4.11 : ≥ 3:1) */
  --bg-field: var(--color-white);
  --bg-field-disabled: var(--color-mist-100);
  --border-control: var(--color-slate-500);        /* 3,2:1 sur blanc */
  --border-control-hover: var(--color-slate-700);  /* 6,9:1 */
  --border-control-subtle: var(--color-mist-300);  /* bouton à contour : le libellé identifie déjà le bouton */

  /* ---------- Typographie : familles ---------- */
  /* Une seule famille pour les titres et le texte : remplace Ubuntu et Circular Std (charte p. 7). */
  --font-text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-text);

  /* ---------- Typographie : tailles / interlignes (desktop) [Dérivé, inspirations] ----------
     Titres grands et fins, interlignes serrés (1,0 à 1,1), interlettrage négatif croissant avec la taille. */
  --fs-display: 96px; --lh-display: 96px;  /* titre de hero */
  --fs-hero: 72px;   --lh-hero: 72px;      /* titre du hero, blanc sur trois lignes [Relevé, Figma 24630:10337] ; rapport 1,3 avec le h2 de 56 */
  --fs-h1: 72px;     --lh-h1: 76px;
  --fs-h2: 56px;     --lh-h2: 60px;
  --fs-h3: 40px;     --lh-h3: 46px;
  --fs-h4: 28px;     --lh-h4: 34px;
  --fs-h5: 22px;     --lh-h5: 28px;
  --fs-h6: 18px;     --lh-h6: 24px;
  --fs-card: 26px;   --lh-card: 34px;   /* titre de carte de service et de domaine, Medium [Relevé, Figma 24626:11551] */
  --fs-statement: 40px; --lh-statement: 52px;  /* phrase manifeste : paragraphe Light très grand */
  --fs-lead: 22px;   --lh-lead: 34px;
  --fs-4: 18px;      --lh-4: 28px;
  --fs-3: 16px;      --lh-3: 26px;      /* texte courant ; site actuel 16/24 */
  --fs-2: 14px;      --lh-2: 22px;
  --fs-1: 12px;      --lh-1: 18px;      /* plus petit texte autorisé */
  --fs-label: 14px;                     /* labels de champs, au-dessus du champ */
  --fs-input: 16px;                     /* 16 dès le desktop : pas de zoom iOS, pas de saut au palier */

  /* Graisses. Titres : règle de la charte p. 7 conservée (Light pour les grands corps, Regular par défaut,
     Medium pour les petits). Texte : Regular, Medium, Bold pour mettre en avant une information. */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-display: -0.04em;        /* display */
  --ls-title: -0.03em;          /* h1, h2, phrase manifeste */
  --ls-tight: -0.02em;          /* h3, h4 */
  --ls-small: -0.01em;          /* h5, h6 */
  --ls-caps: 0.1em;             /* eyebrow, étiquettes en capitales */

  /* ---------- Espacements : écarts entre éléments (grille de 4) ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-sm-2: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-5xl: 64px;

  /* ---------- Espacements : intérieur des composants ---------- */
  --pad-xs: 4px;
  --pad-sm: 8px;
  --pad-smm: 12px;
  --pad-m: 16px;
  --pad-m-2: 20px;
  --pad-l: 24px;
  --pad-xl: 32px;
  --pad-2xl: 40px;

  /* ---------- Rythme vertical des sections ---------- */
  --stack-s: 40px;
  --stack-m: 100px;             /* 80 → 100 : site plus aéré (demande du 4 novembre 2026) */
  --stack-l: 150px;             /* 120 → 150 (même demande) */
  --stack-xl: 200px;            /* sections de l'accueil ; 160 relevé dans Figma, porté à 200 pour aérer (demande du 4 novembre 2026) */

  /* ---------- Layout [à valider] ---------- */
  --gutter: 48px;               /* marge latérale : mises en page larges des inspirations */
  --screen-max: var(--screen-max-content);
  --screen-max-content: 1320px;   /* largeur de contenu (sections) ; aussi celle du header compacté */
  --screen-max-wide: 1520px;    /* header, hero plein cadre et footer complet : conteneur élargi (+200 px), demande du 3 novembre 2026 */
  --text-max: 68ch;
  --grid-gap: 24px;
  --card-min-h: 480px;          /* hauteur mini des cartes de mosaïque (texte en haut, pied en bas) */
  --bento-gap: 16px;            /* mosaïques de cartes, serrées comme dans les inspirations */

  /* ---------- Rayons ----------
     Règle : tout ce qui est cliquable en pilule (relevé : boutons du site, rayon 50 px), champs 8 px,
     tableaux, alertes et cartes 12 px (corrections Figma du 3 novembre 2026), médias 24 px, grands panneaux 32 px. */
  --radius-none: 0;
  --radius-sm: 8px;             /* étiquettes de section, petites cases */
  --radius-field: 12px;         /* champs, listes déroulantes, zones de texte */
  --radius-l: 12px;             /* tableaux, alertes */
  --radius-card: 12px;          /* cartes de contenu (services, domaines, hero) [Relevé, Figma 24627:12254] */
  --radius-xl: 24px;            /* médias */
  --radius-2xl: 32px;           /* grands panneaux : hero, visuel pleine largeur */
  --radius-full: 9999px;        /* éléments cliquables */
  /* Règle d'imbrication : un élément arrondi posé dans un autre a pour rayon « rayon du parent − marge intérieure du parent »
     (rayons concentriques, l'écart reste constant dans l'angle). Calculer avec calc(), jamais un token fixe. */

  /* ---------- Icônes ---------- */
  --icon-s: 16px;
  --icon-m: 20px;
  --icon-l: 24px;

  /* ---------- Mouvement ---------- */
  /* Courbes fortes (méthode Emil Kowalski) : jamais ease-in pour l'interface ; < 300 ms pour l'UI. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);       /* entrées, retours d'action */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);   /* déplacements à l'écran */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);    /* tiroir, feuille */
  --dur-press: 160ms;           /* pression d'un bouton */
  --dur-fast: 180ms;            /* survol, couleur */
  --dur-base: 240ms;            /* popups, tiroir */
  --dur-slow: 400ms;            /* révélation de visuels, une fois */

  /* ---------- Mobile et tactile ----------
     Indépendants de la charte : ce sont des planchers d'ergonomie, pas des choix graphiques. */
  --tap-min: 44px;              /* zone tactile minimale (WCAG 2.5.5 / Apple HIG) */
  --tap-gap: 8px;               /* écart minimal entre deux cibles voisines */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --header-h: 88px;             /* hauteur du header [Relevé, Figma 24626:12131] */
  --logo-h: 53px;               /* logo du header et du footer : 244 × 53 [Relevé, Figma 24626:12132] */
  --zoom: 1;                    /* facteur de zoom au-dessus de 1920 (échelle fluide, en bas du fichier) */
  --sticky-bar-h: 72px;         /* barre d'action basse sur mobile, hors safe-area */
}

/* ==========================================================================
   RÈGLE DE RÉDUCTION, pour les intégrateurs (recopiée dans le README)
   Les paliers ne font que réaffecter des tokens ; les composants n'ont rien à faire.
   Pas de maquette mobile ni tablette : toutes les valeurs ci-dessous viennent de la règle (citée en commentaire).
   Pour une valeur absente (nouveau composant), appliquer la règle plutôt que d'inventer une taille.

   Polices (facteur sur la taille desktop ; interligne des titres ≈ 1,1 à 1,2 × la taille)
   | taille desktop          | ≤ 1024 | ≤ 640 |
   | ≥ 40 px                 | × 0,8  | × 0,6 |
   | 28 – 39 px              | × 0,85 | × 0,7 |
   | 18 – 27 px              | × 1    | × 0,8 |
   | ≤ 17 px                 | × 1    | × 1   |
   Planchers : texte courant 16 px, plus petit texte 12 px, champ de saisie 16 px.
   Plafond : le H1 doit afficher un mot long de la langue du site sur 360 − 2 × gutter sans le couper
   (mots de référence : « réglementaires », « Aansprakelijkheid »).

   Espacements (facteur sur la valeur desktop, arrondi au multiple de 4)
   | valeur desktop          | ≤ 1024 | ≤ 640 |
   | ≤ 20 px                 | × 1    | × 1    |
   | 21 – 31 px              | × 1    | × 0,8  |
   | 32 – 55 px              | × 1    | × 0,75 |
   | ≥ 56 px (sections)      | × 0,7  | × 0,5  |
   Hors règle : --gutter (48 → 32 → 16 px), --tap-min (44 px, jamais réduit).
   ========================================================================== */

/* ---------- Repères compacts (1024 px) : valeurs atteintes à 1024 par l'échelle fluide (bloc suivant), qui les
   remplace entre 641 et 1024 ; elles restent la base sous 1024 pour les tokens que le palier mobile ne change pas. ---------- */
@media (max-width: 1024px) {
  :root {
    --fs-display: 77px; --lh-display: 80px; /* 96 × 0,8 */
    --fs-hero: 58px;  --lh-hero: 58px;   /* 72 × 0,8 */
    --logo-h: 44px;                      /* 53 × 0,83 */
    --fs-h1: 58px;    --lh-h1: 62px;     /* 72 × 0,8 */
    --fs-h2: 45px;    --lh-h2: 50px;     /* 56 × 0,8 */
    --fs-h3: 32px;    --lh-h3: 38px;     /* 40 × 0,8 */
    --fs-h4: 24px;    --lh-h4: 30px;     /* 28 × 0,85 */
    --fs-card: 22px;  --lh-card: 28px;   /* 26 × 0,85 */
    --fs-statement: 32px; --lh-statement: 42px; /* 40 × 0,8 */
    --space-5xl: 44px;                   /* 64 × 0,7 */
    --gutter: 32px;
    --stack-m: 70px;                     /* 100 × 0,7 */
    --stack-l: 105px;                    /* 150 × 0,7 */
    --stack-xl: 140px;                   /* 200 × 0,7 */
    --card-min-h: 400px;
    --header-h: 72px;
  }
}

/* ---------- Échelle fluide (repère 1920, règle globale du 4 novembre 2026) ----------
   Les valeurs de :root sont celles de l'affichage repère (1920 px). Les paliers ci-dessous ne sautent plus : chaque token
   glisse en ligne droite d'un repère à l'autre (1920 → 1024 → 640), avec les valeurs de la règle de réduction comme
   repères (tableaux plus haut et blocs « Repères » en commentaire). Sous 640, valeurs mobiles fixes.
   Au-dessus de 1920, la page entière zoome (voir --zoom) : les proportions de 1920 sont gardées. */
@media (min-width: 1025px) {
  :root {
    --fs-display: clamp(77px, calc(77px + (100vw - 1024px) * 0.0212), 96px);
    --lh-display: clamp(80px, calc(80px + (100vw - 1024px) * 0.0179), 96px);
    --fs-hero: clamp(58px, calc(58px + (100vw - 1024px) * 0.0156), 72px);
    --lh-hero: clamp(58px, calc(58px + (100vw - 1024px) * 0.0156), 72px);
    --fs-h1: clamp(58px, calc(58px + (100vw - 1024px) * 0.0156), 72px);
    --lh-h1: clamp(62px, calc(62px + (100vw - 1024px) * 0.0156), 76px);
    --fs-h2: clamp(45px, calc(45px + (100vw - 1024px) * 0.0123), 56px);
    --lh-h2: clamp(50px, calc(50px + (100vw - 1024px) * 0.0112), 60px);
    --fs-h3: clamp(32px, calc(32px + (100vw - 1024px) * 0.0089), 40px);
    --lh-h3: clamp(38px, calc(38px + (100vw - 1024px) * 0.0089), 46px);
    --fs-h4: clamp(24px, calc(24px + (100vw - 1024px) * 0.0045), 28px);
    --lh-h4: clamp(30px, calc(30px + (100vw - 1024px) * 0.0045), 34px);
    --fs-card: clamp(22px, calc(22px + (100vw - 1024px) * 0.0045), 26px);
    --lh-card: clamp(28px, calc(28px + (100vw - 1024px) * 0.0067), 34px);
    --fs-statement: clamp(32px, calc(32px + (100vw - 1024px) * 0.0089), 40px);
    --lh-statement: clamp(42px, calc(42px + (100vw - 1024px) * 0.0112), 52px);
    --space-5xl: clamp(44px, calc(44px + (100vw - 1024px) * 0.0223), 64px);
    --stack-m: clamp(70px, calc(70px + (100vw - 1024px) * 0.0335), 100px);
    --stack-l: clamp(105px, calc(105px + (100vw - 1024px) * 0.0502), 150px);
    --stack-xl: clamp(140px, calc(140px + (100vw - 1024px) * 0.067), 200px);
    --gutter: clamp(32px, calc(32px + (100vw - 1024px) * 0.0179), 48px);
    --card-min-h: clamp(400px, calc(400px + (100vw - 1024px) * 0.0893), 480px);
    --header-h: clamp(72px, calc(72px + (100vw - 1024px) * 0.0179), 88px);
    --logo-h: clamp(44px, calc(44px + (100vw - 1024px) * 0.01), 53px);
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --fs-display: clamp(44px, calc(44px + (100vw - 640px) * 0.0859), 77px);
    --lh-display: clamp(48px, calc(48px + (100vw - 640px) * 0.0833), 80px);
    --fs-hero: clamp(42px, calc(42px + (100vw - 640px) * 0.0417), 58px);
    --lh-hero: clamp(44px, calc(44px + (100vw - 640px) * 0.0365), 58px);
    --fs-h1: clamp(40px, calc(40px + (100vw - 640px) * 0.0469), 58px);
    --lh-h1: clamp(44px, calc(44px + (100vw - 640px) * 0.0469), 62px);
    --fs-h2: clamp(34px, calc(34px + (100vw - 640px) * 0.0286), 45px);
    --lh-h2: clamp(38px, calc(38px + (100vw - 640px) * 0.0312), 50px);
    --fs-h3: clamp(24px, calc(24px + (100vw - 640px) * 0.0208), 32px);
    --lh-h3: clamp(30px, calc(30px + (100vw - 640px) * 0.0208), 38px);
    --fs-h4: clamp(20px, calc(20px + (100vw - 640px) * 0.0104), 24px);
    --lh-h4: clamp(26px, calc(26px + (100vw - 640px) * 0.0104), 30px);
    --fs-h5: clamp(18px, calc(18px + (100vw - 640px) * 0.0104), 22px);
    --lh-h5: clamp(24px, calc(24px + (100vw - 640px) * 0.0104), 28px);
    --fs-h6: clamp(16px, calc(16px + (100vw - 640px) * 0.0052), 18px);
    --lh-h6: clamp(22px, calc(22px + (100vw - 640px) * 0.0052), 24px);
    --fs-card: clamp(20px, calc(20px + (100vw - 640px) * 0.0052), 22px);
    --lh-card: clamp(26px, calc(26px + (100vw - 640px) * 0.0052), 28px);
    --fs-statement: clamp(24px, calc(24px + (100vw - 640px) * 0.0208), 32px);
    --lh-statement: clamp(32px, calc(32px + (100vw - 640px) * 0.026), 42px);
    --fs-lead: clamp(18px, calc(18px + (100vw - 640px) * 0.0104), 22px);
    --lh-lead: clamp(28px, calc(28px + (100vw - 640px) * 0.0156), 34px);
    --fs-4: clamp(16px, calc(16px + (100vw - 640px) * 0.0052), 18px);
    --lh-4: clamp(26px, calc(26px + (100vw - 640px) * 0.0052), 28px);
    --space-l: clamp(20px, calc(20px + (100vw - 640px) * 0.0104), 24px);
    --space-xl: clamp(24px, calc(24px + (100vw - 640px) * 0.0208), 32px);
    --space-2xl: clamp(32px, calc(32px + (100vw - 640px) * 0.0208), 40px);
    --space-3xl: clamp(36px, calc(36px + (100vw - 640px) * 0.0312), 48px);
    --space-5xl: clamp(32px, calc(32px + (100vw - 640px) * 0.0312), 44px);
    --pad-l: clamp(20px, calc(20px + (100vw - 640px) * 0.0104), 24px);
    --pad-xl: clamp(24px, calc(24px + (100vw - 640px) * 0.0208), 32px);
    --pad-2xl: clamp(32px, calc(32px + (100vw - 640px) * 0.0208), 40px);
    --stack-s: clamp(32px, calc(32px + (100vw - 640px) * 0.0208), 40px);
    --stack-m: clamp(50px, calc(50px + (100vw - 640px) * 0.0521), 70px);
    --stack-l: clamp(75px, calc(75px + (100vw - 640px) * 0.0781), 105px);
    --stack-xl: clamp(90px, calc(90px + (100vw - 640px) * 0.1302), 140px);
    --gutter: clamp(16px, calc(16px + (100vw - 640px) * 0.0417), 32px);
    --grid-gap: clamp(20px, calc(20px + (100vw - 640px) * 0.0104), 24px);
    --card-min-h: clamp(320px, calc(320px + (100vw - 640px) * 0.2083), 400px);
    --radius-xl: clamp(20px, calc(20px + (100vw - 640px) * 0.0104), 24px);
    --radius-2xl: clamp(24px, calc(24px + (100vw - 640px) * 0.0208), 32px);
    --header-h: clamp(64px, calc(64px + (100vw - 640px) * 0.0208), 72px);
    --logo-h: clamp(36px, calc(36px + (100vw - 640px) * 0.0208), 44px);
  }
}

/* Au-dessus de 1920 : zoom de toute la page. Le zoom multiplie aussi vw et vh : les composants divisent donc
   leurs unités de fenêtre par --zoom (calc(100vw / var(--zoom))). Repli JS dans covartim.js si calc(longueur / longueur)
   n'est pas pris en charge. */
@media (min-width: 1921px) {
  @supports (zoom: calc(100vw / 1920px)) {
    :root { --zoom: calc(100vw / 1920px); zoom: var(--zoom); }
  }
}

/* ---------- Palier mobile (≤ 640 px) ----------
   Testé à 390 px (iPhone 12–16) et 360 px (Android courant). */
@media (max-width: 640px) {
  :root {
    --fs-display: 44px; --lh-display: 48px; /* 96 × 0,6 = 58, ramené à 44 pour tenir « réglementaires » sur 328 px */
    --fs-hero: 42px;  --lh-hero: 44px;   /* 72 × 0,58 : « jusqu'aux patients. » sur deux lignes au plus à 328 px */
    --logo-h: 36px;                      /* 53 × 0,68 */
    --fs-h1: 40px;    --lh-h1: 44px;     /* 72 × 0,6 = 43, ramené à 40 (même plafond) */
    --fs-h2: 34px;    --lh-h2: 38px;     /* 56 × 0,6 */
    --fs-h3: 24px;    --lh-h3: 30px;     /* 40 × 0,6 */
    --fs-h4: 20px;    --lh-h4: 26px;     /* 28 × 0,7 */
    --fs-card: 20px;  --lh-card: 26px;   /* 26 × 0,77 */
    --fs-statement: 24px; --lh-statement: 32px; /* 40 × 0,6 */
    --fs-h5: 18px;    --lh-h5: 24px;     /* 22 × 0,8 */
    --fs-h6: 16px;    --lh-h6: 22px;     /* 18 × 0,8 = 14, plancher 16 */
    --fs-lead: 18px;  --lh-lead: 28px;   /* 22 × 0,8 */
    --fs-4: 16px;     --lh-4: 26px;      /* 18 × 0,8 = 14, plancher texte courant 16 */
    --space-l: 20px;                     /* 24 × 0,8 */
    --space-xl: 24px;                    /* 32 × 0,75 */
    --space-2xl: 32px;                   /* 40 × 0,75 = 30 → 32 */
    --space-3xl: 36px;                   /* 48 × 0,75 */
    --space-5xl: 32px;                   /* 64 × 0,5 */
    --pad-l: 20px;                       /* 24 × 0,8 */
    --pad-xl: 24px;                      /* 32 × 0,75 */
    --pad-2xl: 32px;                     /* 40 × 0,75 = 30 → 32 */
    --grid-gap: 20px;                    /* 24 × 0,8 */
    --radius-xl: 20px;                   /* 24 × 0,8 */
    --radius-2xl: 24px;                  /* 32 × 0,75 */
    --gutter: 16px;
    --stack-s: 32px;                     /* 40 × 0,75 = 30 → 32 */
    --stack-m: 50px;                     /* 100 × 0,5 */
    --stack-l: 75px;                     /* 150 × 0,5 */
    --stack-xl: 90px;                    /* 200 × 0,45 */
    --card-min-h: 320px;
    --header-h: 64px;
  }
}