/* ============================================================================
   TOURAK 2027 — SYSTEME DE DESIGN (jumeau RTL)
   Fichier : /assets/css/tk-2027.css   (tourakdigital.ma — AR/RTL + /fr/ + /en/)
   Charge EN DERNIER dans les 3 headers :
     includes/header.php (AR) · fr/includes/header-fr.php · en/includes/header-en.php
   Additif : ne supprime aucune ancienne feuille.
   Rollback = retirer les 3 lignes <link> qui pointent ici.

   MEME systeme de tokens que tourak-digital.com, aux differences suivantes :
   - toutes les proprietes directionnelles sont LOGIQUES
     (margin-inline / padding-inline / inset-inline / border-inline / text-align:start)
     => la feuille fonctionne a l'identique en dir="rtl" et en dir="ltr" ;
   - une famille arabe dediee (IBM Plex Sans Arabic) commutee par [dir="rtl"]/[lang="ar"] ;
   - corps de texte legerement plus grand en arabe (l'arabe se lit plus petit).

   AVERTISSEMENT DE CASCADE :
   header-fr.php et header-en.php posent un <style> inline APRES ce fichier, avec
   `body,html{direction:ltr!important;text-align:left!important}` et
   `body{font-family:'Inter'...!important}`. On ne touche JAMAIS a direction ni a
   text-align ici (aucun conflit), et la typo est reprise en (H0) avec une
   specificite superieure.

   Namespace neuf : --t27-*   Remap des anciens tokens : section (C)
   Desactiver le remap sans toucher au fichier : <html class="t27-legacy">

   SOMMAIRE
   (A) Primitives      : couleurs OKLCH, typo, espace, rayon, ombre, motion
   (B) Semantique      : tokens de surface/texte/bordure, clair + sombre
   (C) Remap legacy    : style.min.css / futuristic.css / --glass-* inline
   (D) Reset minimal   : non destructif
   (E) Typographie     : echelle appliquee + bascule arabe
   (F) Dark mode       : prefers-color-scheme + [data-theme] (le toggle gagne)
   (G) Motion          : durees, easings, prefers-reduced-motion total
   (H) Surcharges      : uniquement les selecteurs en !important qui resistent
   (I) Utilitaires     : conteneur, pile, bento, boutons, marqueurs
   ========================================================================== */


/* ==========================================================================
   (A) PRIMITIVES
   Toutes les couleurs sont en OKLCH. Les hex equivalents sont dans le bloc
   @supports de repli (fin de section A) pour les navigateurs sans OKLCH.
   ========================================================================== */

html:not(.t27-legacy):root {

  /* --- Indigo electrique : accent principal. Echelle 50 -> 950, hue 274 ---
     600 = la signature Tourak (contraste blanc 6,4:1, AA valide). */
  --t27-indigo-50:  oklch(0.972 0.014 274);   --t27-indigo-100: oklch(0.944 0.030 274);
  --t27-indigo-200: oklch(0.892 0.062 274);   --t27-indigo-300: oklch(0.812 0.110 274);
  --t27-indigo-400: oklch(0.702 0.176 274);   --t27-indigo-500: oklch(0.600 0.240 274);
  --t27-indigo-600: oklch(0.508 0.276 274);   --t27-indigo-700: oklch(0.442 0.240 273);
  --t27-indigo-800: oklch(0.378 0.196 272);   --t27-indigo-900: oklch(0.312 0.150 272);
  --t27-indigo-950: oklch(0.212 0.096 272);

  /* --- Ambre sable : accent secondaire (pont France <-> Maroc).
     Plafond d'usage : moins de 10 % de la surface. JAMAIS sur du texte long.
     700 = seule teinte autorisee pour du texte sur fond clair (5,5:1). --- */
  --t27-amber-50:  oklch(0.978 0.016 78);   --t27-amber-100: oklch(0.950 0.036 78);
  --t27-amber-200: oklch(0.900 0.070 76);   --t27-amber-300: oklch(0.845 0.106 73);
  --t27-amber-400: oklch(0.790 0.130 70);   --t27-amber-500: oklch(0.730 0.140 66);
  --t27-amber-600: oklch(0.648 0.136 60);   --t27-amber-700: oklch(0.548 0.120 56);
  --t27-amber-800: oklch(0.452 0.098 54);   --t27-amber-900: oklch(0.372 0.078 52);

  /* --- Sable : neutres CLAIRS, teintes chauds. Aucun gris pur. hue 80 --- */
  --t27-sand-25:  oklch(0.992 0.003 85);    --t27-sand-50:  oklch(0.980 0.005 84);
  --t27-sand-100: oklch(0.962 0.007 82);    --t27-sand-200: oklch(0.930 0.009 80);
  --t27-sand-300: oklch(0.880 0.011 78);    --t27-sand-400: oklch(0.775 0.013 76);

  /* --- Encre : neutres SOMBRES, bleu-noir. Aucun gris pur. hue 266 --- */
  --t27-ink-400:  oklch(0.640 0.024 268);   --t27-ink-500:  oklch(0.548 0.026 268);
  --t27-ink-600:  oklch(0.448 0.030 267);   --t27-ink-700:  oklch(0.352 0.032 266);
  --t27-ink-800:  oklch(0.258 0.032 265);   --t27-ink-900:  oklch(0.186 0.030 265);
  --t27-ink-950:  oklch(0.132 0.028 265);   --t27-ink-1000: oklch(0.098 0.024 265);

  /* --- Etats --- */
  --t27-success: oklch(0.620 0.150 152);  --t27-warning: oklch(0.700 0.150 74);
  --t27-danger:  oklch(0.570 0.215 27);

  /* --- Familles typographiques ---
     Latin (defaut, utilise par /fr/ et /en/) : Bricolage Grotesque + Instrument Sans.
     Les familles arabes sont en fin de pile : un glyphe arabe isole dans une page
     latine reste rendu correctement au lieu de tomber en fonte systeme. */
  --t27-font-display: 'Bricolage Grotesque', 'IBM Plex Sans Arabic', 'Space Grotesk', system-ui, sans-serif;
  --t27-font-text: 'Instrument Sans', 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, sans-serif;
  --t27-font-arabic: 'IBM Plex Sans Arabic', 'Cairo', 'Tajawal', system-ui, sans-serif;
  --t27-font-editorial: var(--t27-font-display); /* pas de script latin cote .ma */
  --t27-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* --- Echelle typographique fluide. Une seule progression, ratio ~1,22 --- */
  --t27-text-2xs:  clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
  --t27-text-xs:   clamp(0.75rem,   0.72rem + 0.15vw, 0.8125rem);
  --t27-text-sm:   clamp(0.875rem,  0.85rem + 0.12vw, 0.9375rem);
  --t27-text-base: clamp(1rem,      0.96rem + 0.20vw, 1.0625rem);
  --t27-text-lg:   clamp(1.125rem,  1.06rem + 0.32vw, 1.25rem);
  --t27-text-xl:   clamp(1.375rem,  1.25rem + 0.60vw, 1.625rem);
  --t27-text-2xl:  clamp(1.75rem,   1.50rem + 1.20vw, 2.25rem);
  --t27-text-3xl:  clamp(2.25rem,   1.80rem + 2.20vw, 3.25rem);
  --t27-text-4xl:  clamp(2.75rem,   2.00rem + 3.60vw, 4.50rem);
  --t27-text-5xl:  clamp(3.25rem,   2.10rem + 5.60vw, 6.50rem);

  /* --- Graisses, interlignes, interlettrages --- */
  --t27-weight-regular: 400;  --t27-weight-medium: 500;  --t27-weight-semibold: 600;
  --t27-weight-bold: 700;     --t27-weight-black: 800;
  --t27-leading-tight: 1.04;
  --t27-leading-snug: 1.18;
  --t27-leading-normal: 1.45;
  --t27-leading-relaxed: 1.68;
  --t27-tracking-tight: -0.032em;  /* titres 3xl et plus */
  --t27-tracking-snug: -0.016em;   /* titres xl / 2xl */
  --t27-tracking-normal: 0em;
  --t27-tracking-wide: 0.08em;     /* sur-titres, kickers en majuscules */
  --t27-measure: 68ch;             /* longueur de ligne maximale du texte long */

  /* --- Espacement : UNE progression, base 4 px. Rien hors de cette liste --- */
  --t27-space-1: 0.25rem;  /* 4 */    --t27-space-2: 0.5rem;   /* 8 */
  --t27-space-3: 0.75rem;  /* 12 */   --t27-space-4: 1rem;     /* 16 */
  --t27-space-5: 1.5rem;   /* 24 */   --t27-space-6: 2rem;     /* 32 */
  --t27-space-7: 3rem;     /* 48 */   --t27-space-8: 4rem;     /* 64 */
  --t27-space-9: 6rem;     /* 96 */   --t27-space-10: 8rem;    /* 128 */
  --t27-section: clamp(4rem, 8vw, 8rem);       /* padding vertical de section */
  --t27-gutter: clamp(1.25rem, 4vw, 2.5rem);   /* gouttiere laterale */
  --t27-container: 1240px;
  --t27-container-narrow: 780px;

  /* --- Rayons --- */
  --t27-radius-xs: 6px;   --t27-radius-sm: 10px;  --t27-radius-md: 14px;
  --t27-radius-lg: 20px;  --t27-radius-xl: 28px;  --t27-radius-2xl: 40px;
  --t27-radius-full: 999px;

  /* --- Bordures --- */
  --t27-border-width: 1px;
  --t27-border-width-thick: 2px;

  /* --- Motion : durees et easings (section G pour l'usage) --- */
  --t27-dur-1: 120ms;  --t27-dur-2: 200ms;  --t27-dur-3: 320ms;
  --t27-dur-4: 520ms;  --t27-dur-5: 800ms;
  --t27-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t27-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t27-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* --- Profondeurs --- */
  --t27-z-base: 1;      --t27-z-sticky: 100;   --t27-z-header: 1000;
  --t27-z-overlay: 5000; --t27-z-modal: 9000;
}

/* Repli pour les navigateurs sans OKLCH (Chrome < 111, Safari < 15.4).
   Sans ce bloc, chaque var() en oklch serait invalide et la couleur sauterait. */
@supports not (color: oklch(0.5 0.1 270)) {
  html:not(.t27-legacy):root {
    --t27-indigo-50:#f2f1fe; --t27-indigo-100:#e6e4fd; --t27-indigo-200:#d0ccfc;
    --t27-indigo-300:#b0a8fa; --t27-indigo-400:#8b7bf7; --t27-indigo-500:#6b53f8;
    --t27-indigo-600:#4441f1; --t27-indigo-700:#3a34d1; --t27-indigo-800:#2f2caa;
    --t27-indigo-900:#272485; --t27-indigo-950:#191653;
    --t27-amber-50:#fdf6ea; --t27-amber-100:#faead2; --t27-amber-200:#f3d7a8;
    --t27-amber-300:#ecc078; --t27-amber-400:#e0a851; --t27-amber-500:#cf8f39;
    --t27-amber-600:#b1742c; --t27-amber-700:#8f5b22; --t27-amber-800:#6f461c;
    --t27-amber-900:#553516;
    --t27-sand-25:#fefdfb; --t27-sand-50:#fbfaf6; --t27-sand-100:#f6f3ed;
    --t27-sand-200:#eae6dd; --t27-sand-300:#dad5ca; --t27-sand-400:#bab4a7;
    --t27-ink-400:#8d8b9e; --t27-ink-500:#737186; --t27-ink-600:#5a586e;
    --t27-ink-700:#434258; --t27-ink-800:#2c2b3e; --t27-ink-900:#1c1b2b;
    --t27-ink-950:#121121; --t27-ink-1000:#0c0b18;
    --t27-success:#16a34a; --t27-warning:#d97706; --t27-danger:#dc2626;
  }
}


/* ==========================================================================
   (B) TOKENS SEMANTIQUES — THEME CLAIR (valeur par defaut)
   C'est ce que les 20 agents front doivent consommer, pas les primitives.
   ========================================================================== */

html:not(.t27-legacy):root {
  --t27-bg: var(--t27-sand-50);          --t27-bg-subtle: var(--t27-sand-100);
  --t27-bg-alt: var(--t27-sand-200);     --t27-surface: var(--t27-sand-25);
  --t27-surface-raised: #ffffff;         --t27-surface-inset: var(--t27-sand-100);
  --t27-text: var(--t27-ink-900);        --t27-text-muted: var(--t27-ink-600);
  --t27-text-subtle: var(--t27-ink-500); --t27-text-invert: var(--t27-sand-50);
  --t27-border: var(--t27-sand-300);     --t27-border-strong: var(--t27-sand-400);
  --t27-border-accent: var(--t27-indigo-200);
  --t27-accent: var(--t27-indigo-600);   --t27-accent-hover: var(--t27-indigo-700);
  --t27-accent-soft: var(--t27-indigo-50);
  --t27-accent-text: var(--t27-indigo-700);  /* accent lisible sur fond clair */
  --t27-on-accent: #ffffff;
  --t27-accent-2: var(--t27-amber-500);  --t27-accent-2-soft: var(--t27-amber-100);
  --t27-accent-2-text: var(--t27-amber-700); /* seule teinte ambre pour du texte */
  --t27-on-accent-2: var(--t27-ink-950);

  /* Ombres TEINTEES de l'accent. Jamais de noir pur. */
  --t27-shadow-tint: 30 26 120;   /* indigo-950 en RGB, pour les rgba() */
  --t27-shadow-xs: 0 1px 2px rgba(var(--t27-shadow-tint) / 0.06);
  --t27-shadow-sm: 0 2px 6px rgba(var(--t27-shadow-tint) / 0.07);
  --t27-shadow-md: 0 6px 18px rgba(var(--t27-shadow-tint) / 0.09), 0 1px 3px rgba(var(--t27-shadow-tint) / 0.05);
  --t27-shadow-lg: 0 16px 42px rgba(var(--t27-shadow-tint) / 0.11), 0 2px 8px rgba(var(--t27-shadow-tint) / 0.06);
  --t27-shadow-xl: 0 32px 80px rgba(var(--t27-shadow-tint) / 0.14), 0 4px 14px rgba(var(--t27-shadow-tint) / 0.07);
  --t27-shadow-accent: 0 12px 32px rgba(68 65 241 / 0.22);

  /* Anneau de focus : visible dans les deux themes, 3:1 minimum. */
  --t27-focus-ring: var(--t27-indigo-600);
  --t27-focus-halo: #ffffff;
}

/* Repli rgba() pour les navigateurs sans syntaxe espace/slash. */
@supports not (color: rgb(0 0 0 / 0.5)) {
  html:not(.t27-legacy):root {
    --t27-shadow-xs: 0 1px 2px rgba(30,26,120,0.06);
    --t27-shadow-sm: 0 2px 6px rgba(30,26,120,0.07);
    --t27-shadow-md: 0 6px 18px rgba(30,26,120,0.09);
    --t27-shadow-lg: 0 16px 42px rgba(30,26,120,0.11);
    --t27-shadow-xl: 0 32px 80px rgba(30,26,120,0.14);
    --t27-shadow-accent: 0 12px 32px rgba(68,65,241,0.22);
  }
}


/* ==========================================================================
   (F) DARK MODE — declare avant (C) pour que le remap legacy lise les bonnes
   valeurs. Le toggle manuel [data-theme] gagne DANS LES DEUX SENS :
   - systeme sombre + toggle "light"  -> clair  (le :not([data-theme="light"]))
   - systeme clair  + toggle "dark"   -> sombre (le bloc [data-theme="dark"])
   Rappel : header.php:152 pose data-theme depuis localStorage 'tourak-theme'.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  html:not(.t27-legacy):root:not([data-theme="light"]) {
    --t27-bg: var(--t27-ink-1000);          --t27-bg-subtle: var(--t27-ink-950);
    --t27-bg-alt: var(--t27-ink-900);       --t27-surface: var(--t27-ink-950);
    --t27-surface-raised: var(--t27-ink-900); --t27-surface-inset: var(--t27-ink-1000);
    --t27-text: var(--t27-sand-100);        --t27-text-muted: var(--t27-sand-400);
    --t27-text-subtle: var(--t27-ink-400);  --t27-text-invert: var(--t27-ink-950);
    --t27-border: var(--t27-ink-800);       --t27-border-strong: var(--t27-ink-700);
    --t27-border-accent: var(--t27-indigo-800);
    --t27-accent: var(--t27-indigo-500);    --t27-accent-hover: var(--t27-indigo-400);
    --t27-accent-soft: var(--t27-indigo-950);
    --t27-accent-text: var(--t27-indigo-400);  --t27-on-accent: #ffffff;
    --t27-accent-2: var(--t27-amber-400);   --t27-accent-2-soft: var(--t27-amber-900);
    --t27-accent-2-text: var(--t27-amber-400); --t27-on-accent-2: var(--t27-ink-1000);
    --t27-shadow-tint: 8 6 34;   /* encre indigo, jamais du noir pur */
    --t27-shadow-accent: 0 12px 32px rgba(107 83 248 / 0.30);
    --t27-focus-ring: var(--t27-indigo-400); --t27-focus-halo: var(--t27-ink-1000);
    color-scheme: dark;
  }
}

html:not(.t27-legacy):root[data-theme="dark"] {
  --t27-bg: var(--t27-ink-1000);          --t27-bg-subtle: var(--t27-ink-950);
  --t27-bg-alt: var(--t27-ink-900);       --t27-surface: var(--t27-ink-950);
  --t27-surface-raised: var(--t27-ink-900); --t27-surface-inset: var(--t27-ink-1000);
  --t27-text: var(--t27-sand-100);        --t27-text-muted: var(--t27-sand-400);
  --t27-text-subtle: var(--t27-ink-400);  --t27-text-invert: var(--t27-ink-950);
  --t27-border: var(--t27-ink-800);       --t27-border-strong: var(--t27-ink-700);
  --t27-border-accent: var(--t27-indigo-800);
  --t27-accent: var(--t27-indigo-500);    --t27-accent-hover: var(--t27-indigo-400);
  --t27-accent-soft: var(--t27-indigo-950);
  --t27-accent-text: var(--t27-indigo-400);  --t27-on-accent: #ffffff;
  --t27-accent-2: var(--t27-amber-400);   --t27-accent-2-soft: var(--t27-amber-900);
  --t27-accent-2-text: var(--t27-amber-400); --t27-on-accent-2: var(--t27-ink-1000);
  --t27-shadow-tint: 8 6 34;   /* encre indigo, jamais du noir pur */
  --t27-shadow-accent: 0 12px 32px rgba(107 83 248 / 0.30);
  --t27-focus-ring: var(--t27-indigo-400); --t27-focus-halo: var(--t27-ink-1000);
  color-scheme: dark;
}

/* Le toggle "clair" gagne sur un systeme en sombre sans qu'aucune valeur ne soit
   redeclaree : le bloc @media ci-dessus s'exclut lui-meme via
   :root:not([data-theme="light"]). Seul color-scheme doit etre repose. */
html:not(.t27-legacy):root[data-theme="light"] { color-scheme: light; }


/* ==========================================================================
   (C) REMAP DES TOKENS LEGACY
   Levier principal : l'ancien CSS (style.min.css — c'est la version MINIFIEE
   qui est chargee, pas style.css —, futuristic.css et les --glass-* poses en
   <style> inline dans les 3 headers) consomme deja ces noms. En les repointant
   ici, les 142 pages AR + 273 pages FR + 6 pages EN heritent du design 2027
   sans qu'on touche a une seule ligne de leur markup.
   Scope volontairement explicite (html:not(.t27-legacy):root = 0,2,1) : il bat
   le :root de style.min.css (0,1,0) ET son [data-theme="light"] (0,1,0)
   sans jamais poser un :root global anonyme.
   Les noms --tk-* et premium (--bg/--surface/...) sont conserves ci-dessous :
   ils n'existent pas sur .ma aujourd'hui, mais les declarer ne coute rien et
   garantit qu'un composant importe du .com heritera du bon design.
   ========================================================================== */

html:not(.t27-legacy):root {
  /* --- style.min.css --- */
  --primary: var(--t27-accent);         --primary-dark: var(--t27-indigo-700);
  --primary-light: var(--t27-indigo-400);
  --secondary: var(--t27-indigo-500);   /* etait #0ea5e9 / #8b5cf6 */
  --accent: var(--t27-indigo-500);      /* etait #22d3ee / #ec4899 : cyan et rose retires */
  --accent-pink: var(--t27-indigo-400); /* le rose generique disparait */
  --bg-dark: var(--t27-bg);             --bg-primary: var(--t27-bg);
  --bg-secondary: var(--t27-bg-subtle); --bg-tertiary: var(--t27-bg-alt);
  --bg-card: var(--t27-surface);        --text-primary: var(--t27-text);
  --text-secondary: var(--t27-text-muted); --text-muted: var(--t27-text-subtle);
  --border-color: var(--t27-border);    --border-glow: var(--t27-border-accent);

  /* Le gradient indigo -> violet -> rose (defaut n°1 de l'audit) est remplace
     par un degrade indigo monochrome, beaucoup plus tenu. */
  --gradient:         linear-gradient(135deg, var(--t27-indigo-600), var(--t27-indigo-500));
  --gradient-primary: linear-gradient(135deg, var(--t27-indigo-700) 0%, var(--t27-indigo-500) 100%);
  --gradient-dark:    linear-gradient(160deg, var(--t27-bg) 0%, var(--t27-bg-subtle) 100%);
  --gradient-glow:    linear-gradient(135deg, var(--t27-accent-soft) 0%, transparent 70%);
  --gradient-card:    linear-gradient(145deg, var(--t27-surface-raised) 0%, var(--t27-surface) 100%);

  --shadow: var(--t27-shadow-md);       --shadow-sm: var(--t27-shadow-sm);
  --shadow-md: var(--t27-shadow-md);    --shadow-lg: var(--t27-shadow-lg);
  --shadow-xl: var(--t27-shadow-xl);    --shadow-glow: var(--t27-shadow-accent);
  --shadow-glow-pink: var(--t27-shadow-accent);

  --radius: var(--t27-radius-md);       --radius-sm: var(--t27-radius-sm);
  --radius-md: var(--t27-radius-md);    --radius-lg: var(--t27-radius-lg);
  --radius-xl: var(--t27-radius-xl);    --radius-full: var(--t27-radius-full);

  --font-primary: var(--t27-font-text); --font-display: var(--t27-font-display);
  --transition-fast: var(--t27-dur-1) var(--t27-ease-out);
  --transition-normal: var(--t27-dur-2) var(--t27-ease-out);
  --transition-slow: var(--t27-dur-4) var(--t27-ease-out);
  --section-padding: var(--t27-section) 0;
  --container-padding: 0 var(--t27-gutter);

  /* --- tk-unified.css (namespace --tk-*) --- */
  --tk-primary: var(--t27-accent);      --tk-secondary: var(--t27-indigo-500);
  --tk-accent: var(--t27-indigo-400);   /* etait le rose #ec4899 */
  --tk-accent-2: var(--t27-accent-2);   --tk-success: var(--t27-success);
  --tk-text: var(--t27-text);           --tk-text-muted: var(--t27-text-muted);
  --tk-text-light: var(--t27-text-subtle); --tk-bg-card: var(--t27-surface-raised);
  --tk-bg-soft: var(--t27-bg);          --tk-bg-section: var(--t27-surface);
  --tk-bg-section-alt: var(--t27-bg-subtle); --tk-border: var(--t27-border);
  --tk-shadow: var(--t27-shadow-md);    --tk-radius: var(--t27-radius-lg);
  --tk-ease: var(--t27-ease-out);

  /* --- premium-2026.css (les 22 pages "premium" + la home) --- */
  --bg: var(--t27-bg);                  --surface: var(--t27-surface);
  --surface2: var(--t27-surface-raised); --border: var(--t27-border);
  --border2: var(--t27-border-strong);  --text: var(--t27-text);
  --muted: var(--t27-text-muted);       --accent-h: var(--t27-accent-hover);
  --accent-bg: var(--t27-accent-soft);  --accent-bg2: var(--t27-accent-soft);
  --max-w: var(--t27-container);        --trans: var(--t27-dur-2) var(--t27-ease-out);

  /* --- futuristic.css (--fx-*) et --glass-* des <style> inline des headers --- */
  --fx-v: var(--t27-indigo-500);        --fx-c: var(--t27-indigo-400);
  --fx-p: var(--t27-amber-400);         --fx-ink: var(--t27-bg);
  --fx-card: var(--t27-surface);        --fx-line: var(--t27-border);
  --fx-holo: linear-gradient(100deg, var(--t27-indigo-400), var(--t27-indigo-600) 55%, var(--t27-amber-400));
  --glass-bg: var(--t27-surface);       --glass-border: var(--t27-border);
}


/* ==========================================================================
   (D) RESET MODERNE MINIMAL — non destructif
   On ne remet PAS a zero les marges/paddings (deja fait par critical.css et
   style.css) : on ajoute seulement ce qui manque et ne casse rien.
   ========================================================================== */

/* color-scheme n'est PAS pose globalement : il est declare par theme en (F),
   sinon un OS en sombre repeint les scrollbars et les champs d'une page claire. */
html:not(.t27-legacy) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

html:not(.t27-legacy) body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

/* Media remplacees : jamais de debordement horizontal en 390 px. */
html:not(.t27-legacy) img,
html:not(.t27-legacy) svg,
html:not(.t27-legacy) video,
html:not(.t27-legacy) canvas,
html:not(.t27-legacy) iframe {
  max-width: 100%;
}

/* Coupure de mots : evite qu'un long slug ou une URL pousse la page. */
html:not(.t27-legacy) p,
html:not(.t27-legacy) li,
html:not(.t27-legacy) h1,
html:not(.t27-legacy) h2,
html:not(.t27-legacy) h3,
html:not(.t27-legacy) h4 {
  overflow-wrap: break-word;
}

/* Champs de formulaire : heritent de la typo, cible tactile de 44 px. */
html:not(.t27-legacy) input,
html:not(.t27-legacy) select,
html:not(.t27-legacy) textarea,
html:not(.t27-legacy) button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* Cible tactile 44 px : limitee aux formulaires. Un min-height global sur
   <button> deplacerait le hamburger et les boutons d'icone de la navbar. */
html:not(.t27-legacy) form button,
html:not(.t27-legacy) input[type="submit"] {
  min-block-size: 44px;
}

/* Focus visible : anneau accent + halo, lisible sur clair ET sur sombre.
   Ne remplace pas le focus-visible pose en inline dans les headers, il le
   surclasse simplement (meme intention, couleurs 2027). */
html:not(.t27-legacy) :focus-visible {
  outline: 3px solid var(--t27-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--t27-focus-halo);
  border-radius: var(--t27-radius-xs);
}

/* Ancrages : compense le header sticky lors d'un saut vers #section. */
html:not(.t27-legacy) [id] { scroll-margin-block-start: var(--t27-space-9); }

/* Selection de texte teintee accent. */
html:not(.t27-legacy) ::selection {
  background: var(--t27-accent);
  color: var(--t27-on-accent);
}


/* ==========================================================================
   (E) PRIMITIVES TYPOGRAPHIQUES
   Corrige le defaut n°6 de l'audit : h3 etait quasi egal au corps de texte.
   Ici, chaque niveau est separe d'au moins un cran de l'echelle.
   ========================================================================== */

html:not(.t27-legacy) body {
  font-family: var(--t27-font-text);
  font-size: var(--t27-text-base);
  line-height: var(--t27-leading-normal);
  letter-spacing: var(--t27-tracking-normal);
}

html:not(.t27-legacy) h1, html:not(.t27-legacy) .t27-h1,
html:not(.t27-legacy) h2, html:not(.t27-legacy) .t27-h2,
html:not(.t27-legacy) h3, html:not(.t27-legacy) .t27-h3,
html:not(.t27-legacy) h4, html:not(.t27-legacy) .t27-h4 {
  font-family: var(--t27-font-display);
  font-weight: var(--t27-weight-bold);
  text-wrap: balance;
}

html:not(.t27-legacy) h1, html:not(.t27-legacy) .t27-h1 {
  font-size: var(--t27-text-4xl);
  line-height: var(--t27-leading-tight);
  letter-spacing: var(--t27-tracking-tight);
  font-weight: var(--t27-weight-black);
}
html:not(.t27-legacy) h2, html:not(.t27-legacy) .t27-h2 {
  font-size: var(--t27-text-3xl);
  line-height: var(--t27-leading-tight);
  letter-spacing: var(--t27-tracking-tight);
}
html:not(.t27-legacy) h3, html:not(.t27-legacy) .t27-h3 {
  font-size: var(--t27-text-2xl);
  line-height: var(--t27-leading-snug);
  letter-spacing: var(--t27-tracking-snug);
}
html:not(.t27-legacy) h4, html:not(.t27-legacy) .t27-h4 {
  font-size: var(--t27-text-xl);
  line-height: var(--t27-leading-snug);
  letter-spacing: var(--t27-tracking-snug);
}

/* --- BASCULE ARABE ---------------------------------------------------------
   Declenchee par dir="rtl" (pose par includes/header.php:31 depuis $page_dir)
   ou par lang="ar". Trois ajustements, et rien d'autre :
   1. la famille passe a IBM Plex Sans Arabic (les familles latines n'ont pas
      de glyphes arabes : sans cela le rendu tombe en fonte systeme) ;
   2. le corps de texte gagne un cran (l'arabe a un oeil plus petit a taille
      egale : 17 -> 19 px environ) ;
   3. l'interlettrage negatif est annule — il casse les liaisons de l'arabe —
      et l'interligne est ouvert (les diacritiques ont besoin de place).
   Aucune propriete directionnelle ici : direction et text-align restent la
   propriete exclusive du site (style.css:57 et les <style> inline). ------- */
html:not(.t27-legacy):root:where([dir="rtl"], [lang="ar"]) {
  --t27-font-display: var(--t27-font-arabic);
  --t27-font-text: var(--t27-font-arabic);
  --t27-font-editorial: var(--t27-font-arabic);
  --t27-text-base: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --t27-text-sm:   clamp(0.9375rem, 0.90rem + 0.16vw, 1rem);
  --t27-text-lg:   clamp(1.1875rem, 1.12rem + 0.34vw, 1.3125rem);
  --t27-tracking-tight: 0em;
  --t27-tracking-snug: 0em;
  --t27-tracking-wide: 0.04em;
  --t27-leading-tight: 1.22;
  --t27-leading-snug: 1.38;
  --t27-leading-normal: 1.72;
  --t27-leading-relaxed: 1.95;
  --t27-measure: 62ch;
}
/* Repli pour les navigateurs sans :where() (Safari < 14). */
html:not(.t27-legacy):root[dir="rtl"],
html:not(.t27-legacy):root[lang="ar"] {
  --t27-font-display: var(--t27-font-arabic);
  --t27-font-text: var(--t27-font-arabic);
}
/* Les chiffres et les URLs restent lisibles dans un paragraphe arabe. */
html:not(.t27-legacy)[dir="rtl"] .t27-nums,
html:not(.t27-legacy)[dir="rtl"] .t27-mono,
html:not(.t27-legacy)[dir="rtl"] time,
html:not(.t27-legacy)[dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; }

/* Chapeau de section : le seul texte long autorise au-dessus du corps. */
.t27-lead {
  font-size: var(--t27-text-lg);
  line-height: var(--t27-leading-relaxed);
  color: var(--t27-text-muted);
  max-width: var(--t27-measure);
}

/* Sur-titre / kicker. Majuscules, interlettrage large, accent en pastille. */
.t27-kicker {
  display: inline-flex; align-items: center; gap: var(--t27-space-2);
  font-family: var(--t27-font-text); font-size: var(--t27-text-xs);
  font-weight: var(--t27-weight-semibold);
  letter-spacing: var(--t27-tracking-wide);
  text-transform: uppercase; color: var(--t27-accent-text);
}
.t27-kicker::before {
  content: ""; inline-size: 22px; block-size: 2px;
  background: var(--t27-accent-2); border-radius: var(--t27-radius-full);
}

/* Accent editorial : 1 mot par section, jamais plus. */
.t27-editorial {
  font-family: var(--t27-font-editorial);
  font-style: italic;
  font-weight: var(--t27-weight-regular);
  letter-spacing: 0;
}

/* Marqueur ambre : surlignage discret sous un mot cle du titre. */
.t27-mark {
  background-image: linear-gradient(transparent 62%, var(--t27-accent-2-soft) 62%);
  padding-inline: 0.08em;
}

.t27-measure { max-width: var(--t27-measure); }
.t27-mono { font-family: var(--t27-font-mono); font-variant-numeric: tabular-nums; }
.t27-nums { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   (G) MOTION
   Micro-interaction par defaut sur tout element cliquable, et neutralisation
   TOTALE sous prefers-reduced-motion.
   ========================================================================== */

.t27-interactive {
  transition: transform var(--t27-dur-2) var(--t27-ease-out),
    box-shadow var(--t27-dur-2) var(--t27-ease-out),
    background-color var(--t27-dur-2) var(--t27-ease-out),
    border-color var(--t27-dur-2) var(--t27-ease-out),
    color var(--t27-dur-1) var(--t27-ease-out);
}
.t27-interactive:hover { transform: translateY(-2px); }
.t27-interactive:active { transform: translateY(0) scale(0.985); }

@keyframes t27-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes t27-fade { from { opacity: 0; } to { opacity: 1; } }
.t27-rise { animation: t27-rise var(--t27-dur-5) var(--t27-ease-out) both; }
.t27-fade { animation: t27-fade var(--t27-dur-4) var(--t27-ease-out) both; }

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

  /* Le contenu anime par AOS doit rester VISIBLE, pas fige a opacity:0. */
  html:not(.t27-legacy) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Bandeaux defilants : les figer a -50% coupe la moitie du contenu.
     On coupe l'animation ET le transform (defaut releve sur .secteurs-track). */
  html:not(.t27-legacy) .secteurs-track,
  html:not(.t27-legacy) .marquee-track,
  html:not(.t27-legacy) .trust-logos-track,
  html:not(.t27-legacy) [data-marquee] {
    animation: none !important;
    transform: none !important;
  }

  html:not(.t27-legacy) .t27-interactive:hover,
  html:not(.t27-legacy) .t27-interactive:active { transform: none !important; }
}


/* ==========================================================================
   (H) SURCHARGES CIBLEES
   Chaque bloc porte le selecteur d'origine qu'il doit battre et le fichier ou
   il vit. On n'ecrit !important QUE la ou l'ancien CSS en pose deja un :
   sans cela la regle serait invisible.
   ATTENTION AUX REFERENCES : les numeros de ligne cites ci-dessous pointent vers
   assets/css/style.css (67 136 o), la version LISIBLE. Le navigateur charge en
   realite style.min.css (54 558 o), qui en est DESYNCHRONISE. Les selecteurs sont
   identiques dans les deux ; seules les lignes different. Ne jamais corriger un
   defaut en editant style.css seul : cela n'aurait aucun effet en ligne.
   ========================================================================== */

/* [H0] Origine : fr/includes/header-fr.php:123 et en/includes/header-en.php:118
   <style> inline pose APRES cette feuille :
     body { font-family:'Inter','Space Grotesk',...!important }
   Specificite (0,0,1). Le bloc ci-dessous est en (0,1,2) : il gagne malgre
   l'ordre de source. On ne touche NI a direction NI a text-align, qui restent
   pilotes par ces memes blocs inline (c'est eux qui tiennent le LTR de /fr/). */
html:not(.t27-legacy) body {
  font-family: var(--t27-font-text) !important;
}

/* [H1] Origine : style.min.css [data-theme="light"] body + futuristic.css
   html[data-theme="dark"] body {background: ... !important} */
html:not(.t27-legacy)[data-theme="light"] body {
  color: var(--t27-text) !important;
  background: var(--t27-bg) !important;
  font-family: var(--t27-font-text) !important;
}
html:not(.t27-legacy)[data-theme="dark"] body {
  color: var(--t27-text) !important;
  background: var(--t27-bg) !important;
  font-family: var(--t27-font-text) !important;
}

/* [H2] Origine : style.css .hero-title / .section-title / .page-title (!important)
   Reprend la hierarchie typographique ecrasee. */
html:not(.t27-legacy) .hero-title,
html:not(.t27-legacy) .page-title,
html:not(.t27-legacy) h1.hero-title {
  font-family: var(--t27-font-display) !important;
  font-size: var(--t27-text-4xl) !important;
  line-height: var(--t27-leading-tight) !important;
  letter-spacing: var(--t27-tracking-tight) !important;
  font-weight: var(--t27-weight-black) !important;
}
html:not(.t27-legacy) .section-title {
  font-family: var(--t27-font-display) !important;
  font-size: var(--t27-text-3xl) !important;
  line-height: var(--t27-leading-tight) !important;
  letter-spacing: var(--t27-tracking-tight) !important;
}
html:not(.t27-legacy) .hero-description,
html:not(.t27-legacy) .section-subtitle {
  font-size: var(--t27-text-lg) !important;
  line-height: var(--t27-leading-relaxed) !important;
  color: var(--t27-text-muted) !important;
  max-width: var(--t27-measure);
}

/* [H3] Origine : style.css .btn / .btn-primary + [data-theme="light"] .btn-primary
   (mega-selecteur en !important) et index.php:277 .btn-primary{background:var(--accent)}
   Corrige le contraste AA echoue a 4,47:1 -> 6,4:1 sur l'indigo 600. */
html:not(.t27-legacy) .btn,
html:not(.t27-legacy) .btn-primary,
html:not(.t27-legacy) .cta-buttons .btn {
  font-family: var(--t27-font-text) !important;
  font-weight: var(--t27-weight-semibold) !important;
  border-radius: var(--t27-radius-full) !important;
  letter-spacing: 0 !important;
  transition: transform var(--t27-dur-2) var(--t27-ease-out),
              box-shadow var(--t27-dur-2) var(--t27-ease-out),
              background-color var(--t27-dur-2) var(--t27-ease-out) !important;
}
html:not(.t27-legacy) .btn-primary,
html:not(.t27-legacy)[data-theme="light"] .btn-primary,
html:not(.t27-legacy)[data-theme="dark"] .btn-primary {
  background: var(--t27-indigo-600) !important;
  color: #ffffff !important;
  border-color: var(--t27-indigo-600) !important;
}
html:not(.t27-legacy) .btn-primary:hover,
html:not(.t27-legacy)[data-theme="light"] .btn-primary:hover {
  background: var(--t27-indigo-700) !important;
  color: #ffffff !important;
  box-shadow: var(--t27-shadow-accent) !important;
  transform: translateY(-2px);
}
/* Etats manquants releves par l'audit : 0 :active et 0 :disabled sur 280 regles. */
html:not(.t27-legacy) .btn:active,
html:not(.t27-legacy) .btn-primary:active { transform: translateY(0) scale(0.985) !important; }
html:not(.t27-legacy) .btn:disabled,
html:not(.t27-legacy) .btn[aria-disabled="true"],
html:not(.t27-legacy) button:disabled,
html:not(.t27-legacy) input:disabled,
html:not(.t27-legacy) textarea:disabled,
html:not(.t27-legacy) select:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  filter: saturate(0.4);
}

/* [H4] Origine : style.min.css .btn-white / .btn-secondary {color:var(--accent)}
   avec --accent cyan #22d3ee. L'accent texte passe a l'indigo 700 (7,9:1). */
html:not(.t27-legacy) .btn-white,
html:not(.t27-legacy) .btn-secondary {
  color: var(--t27-indigo-700) !important; /* fige : accent-text passe en indigo-400 en sombre, or le fond du bouton est #fff en dur (contraste 2.82:1) */
  border-color: var(--t27-border-accent) !important;
}

/* [H5] Origine : style.css .nav-link / .nav-link:hover / .nav-link.active
   et critical.css [data-theme="light"] .nav-link (tous !important). */
html:not(.t27-legacy) .nav-link,
html:not(.t27-legacy) .nav-links a {
  font-family: var(--t27-font-text) !important;
  font-size: var(--t27-text-sm) !important;
  font-weight: var(--t27-weight-medium) !important;
  color: var(--t27-text-muted) !important;
  transition: color var(--t27-dur-1) var(--t27-ease-out) !important;
}
html:not(.t27-legacy) .nav-link:hover,
html:not(.t27-legacy) .nav-link.active,
html:not(.t27-legacy) .nav-links a:hover {
  color: var(--t27-text) !important;
}

/* [H6] Origine : style.css .service-card / .pricing-card / .faq-item (!important).
   Cartes : surface teintee, bordure 1 px, ombre accent, micro-interaction. */
html:not(.t27-legacy) .service-card,
html:not(.t27-legacy) .pricing-card,
html:not(.t27-legacy) .portfolio-item,
html:not(.t27-legacy) .blog-card,
html:not(.t27-legacy) .testimonial-card,
html:not(.t27-legacy) .faq-item {
  background: var(--t27-surface) !important;
  border: var(--t27-border-width) solid var(--t27-border) !important;
  border-radius: var(--t27-radius-lg) !important;
  box-shadow: var(--t27-shadow-sm) !important;
  transition: transform var(--t27-dur-2) var(--t27-ease-out),
              box-shadow var(--t27-dur-2) var(--t27-ease-out),
              border-color var(--t27-dur-2) var(--t27-ease-out) !important;
}
html:not(.t27-legacy) .service-card:hover,
html:not(.t27-legacy) .pricing-card:hover,
html:not(.t27-legacy) .portfolio-item:hover,
html:not(.t27-legacy) .blog-card:hover {
  box-shadow: var(--t27-shadow-lg) !important;
  border-color: var(--t27-border-accent) !important;
  transform: translateY(-3px);
}
/* Le titre de carte doit se detacher du corps (defaut n°6). */
html:not(.t27-legacy) .service-title,
html:not(.t27-legacy) .blog-card-title,
html:not(.t27-legacy) .faq-item h3 {
  font-family: var(--t27-font-display) !important;
  font-size: var(--t27-text-xl) !important;
  line-height: var(--t27-leading-snug) !important;
  letter-spacing: var(--t27-tracking-snug) !important;
}
html:not(.t27-legacy) .service-desc,
html:not(.t27-legacy) .faq-item p {
  font-size: var(--t27-text-base) !important;
  line-height: var(--t27-leading-relaxed) !important;
  color: var(--t27-text-muted) !important;
}

/* [H7bis] Origine : style.css:1005 .page-hero-price{color:var(--accent)} avec
   --accent:#22d3ee (cyan) sur fond quasi-blanc = contraste 1,81:1, le pire
   defaut de contraste releve sur .ma. Le remap de --accent en (C) corrige deja
   la valeur ; ce bloc verrouille en plus la teinte de texte accessible. */
html:not(.t27-legacy) .page-hero-price,
html:not(.t27-legacy) .pricing-price,
html:not(.t27-legacy) .price-amount {
  color: var(--t27-indigo-700) !important; /* fige : accent-text passe en indigo-400 en sombre, or le fond du bouton est #fff en dur (contraste 2.82:1) */
  font-family: var(--t27-font-display) !important;
  font-variant-numeric: tabular-nums;
}

/* [H7] Origine : style.min.css [data-theme="light"] .price-card / .faq-question /
   .faq-answer / .feature-item / .related-service-card. */
html:not(.t27-legacy)[data-theme="light"] .price-card,
html:not(.t27-legacy)[data-theme="light"] .feature-item,
html:not(.t27-legacy)[data-theme="light"] .related-service-card,
html:not(.t27-legacy)[data-theme="light"] .type-card {
  background: var(--t27-surface-raised) !important;
  border-color: var(--t27-border) !important;
  border-radius: var(--t27-radius-lg) !important;
  box-shadow: var(--t27-shadow-sm) !important;
}
html:not(.t27-legacy)[data-theme="light"] .faq-question,
html:not(.t27-legacy)[data-theme="light"] .faq-answer,
html:not(.t27-legacy)[data-theme="light"] .faq-answer p {
  color: var(--t27-text) !important;
}

/* [H8] Origine : style.css .container (!important). On aligne la largeur et la
   gouttiere sur l'echelle 2027 sans toucher aux breakpoints existants. */
html:not(.t27-legacy) .container {
  max-width: var(--t27-container) !important;
  padding-inline: var(--t27-gutter) !important;
  margin-inline: auto !important;
}

/* [H9] Origine : style.css .footer / .footer-grid / .footer-bottom (!important)
   + footer.php:3-18 <style> inline .footer-grid-mega (6 !important).
   On ne touche PAS a la grille .footer-grid-mega (elle est en 100% !important
   dans le HTML) : uniquement les couleurs et la typo, sinon la grille casse. */
html:not(.t27-legacy) .footer {
  background: var(--t27-bg-subtle) !important;
  border-block-start: var(--t27-border-width) solid var(--t27-border) !important;
  color: var(--t27-text-muted) !important;
}
html:not(.t27-legacy) .footer h3,
html:not(.t27-legacy) .footer h4,
html:not(.t27-legacy)[data-theme="light"] .footer h3,
html:not(.t27-legacy)[data-theme="light"] .footer h4 {
  font-family: var(--t27-font-display) !important;
  font-size: var(--t27-text-sm) !important;
  letter-spacing: var(--t27-tracking-wide) !important;
  text-transform: uppercase !important;
  color: var(--t27-text) !important;
}

/* [H10] Origine : responsive-fix.css + le @media !important pose apres coup
   dans style.css:2274 : les tailles y sont figees en mobile. On y remet
   l'echelle fluide, sinon le comportement mobile diverge du desktop sans
   explication. (Il n'y a pas de mobile-fix.css sur .ma, contrairement au .com.) */
@media screen and (max-width: 768px) {
  html:not(.t27-legacy) body { font-size: var(--t27-text-base) !important; }
  html:not(.t27-legacy) h1,
  html:not(.t27-legacy) .hero h1 {
    font-size: var(--t27-text-3xl) !important;
    line-height: var(--t27-leading-tight) !important;
  }
  html:not(.t27-legacy) .hero p { font-size: var(--t27-text-base) !important; }
}

/* [H11] Origine : responsive-fix.css .theme-toggle / .scroll-to-top /
   .whatsapp-float (2 a 4 !important chacun). On ne deplace rien : on aligne
   seulement le rayon, l'ombre et la cible tactile. */
html:not(.t27-legacy) .theme-toggle,
html:not(.t27-legacy) .scroll-to-top,
html:not(.t27-legacy) .whatsapp-float {
  border-radius: var(--t27-radius-full) !important;
  box-shadow: var(--t27-shadow-md) !important;
  min-inline-size: 44px;
  min-block-size: 44px;
}

/* [H12] Origine : blob.css:26/35/44 (largeurs fixes 600/500/400 px), aujourd'hui
   rattrapees par overflow-x:hidden (style.css:59 et :2502). On borne la largeur
   pour supprimer la cause au lieu du symptome, sans retirer les blobs. */
html:not(.t27-legacy) .blob-1,
html:not(.t27-legacy) .blob-2,
html:not(.t27-legacy) .blob-3,
html:not(.t27-legacy) .blob-4,
html:not(.t27-legacy) .blob-mouse {
  max-inline-size: 92vw !important;
  pointer-events: none;
}

/* [H13] Origine : style.css:280 .dropdown-menu{min-width:480px}, neutralise
   apres coup par un @media !important (style.css:2274). On borne en logique :
   le menu ne peut plus depasser la fenetre, a aucune largeur. */
html:not(.t27-legacy) .dropdown-menu,
html:not(.t27-legacy) .nav-dropdown-menu {
  min-inline-size: 0 !important;
  max-inline-size: min(480px, calc(100vw - 2 * var(--t27-gutter))) !important;
}

/* [H14] Origine : responsive-fix.css:125 .footer-cities{...} en RTL dur, et
   l'inline LTR de header-fr.php qui repose .footer-cities{columns:2}.
   On garde 2 colonnes mais en logique, et on evite la coupure des noms de
   villes arabes au milieu d'un mot. */
html:not(.t27-legacy) .footer-cities {
  column-gap: var(--t27-space-5);
  break-inside: avoid;
  overflow-wrap: normal;
}

/* [H15] Origine : futuristic.css html[data-theme="dark"] body{background: ...
   !important} — trois radial-gradients violet/cyan/rose sur fond #06070d.
   Remplaces par deux halos indigo sur l'encre 2027. Meme structure, memes
   dimensions : rien ne bouge en layout. */
html:not(.t27-legacy)[data-theme="dark"] body {
  background:
    radial-gradient(900px 480px at 50% -8%, var(--t27-accent-soft), transparent 62%),
    radial-gradient(700px 420px at 88% 4%, var(--t27-accent-soft), transparent 60%),
    var(--t27-bg) !important;
}


/* ==========================================================================
   (I) UTILITAIRES DE BASE
   Nommes t27-* pour ne jamais entrer en collision avec l'existant.
   Toutes les proprietes sont logiques (inline/block) : le meme fichier sert
   de reference au jumeau RTL de tourakdigital.ma.
   ========================================================================== */

/* --- Conteneurs --- */
.t27-container { inline-size: 100%; max-inline-size: var(--t27-container); margin-inline: auto; padding-inline: var(--t27-gutter); }
.t27-container-narrow { inline-size: 100%; max-inline-size: var(--t27-container-narrow); margin-inline: auto; padding-inline: var(--t27-gutter); }
.t27-section { padding-block: var(--t27-section); }
.t27-section-alt { padding-block: var(--t27-section); background: var(--t27-bg-subtle); }

/* --- Pile verticale : un seul rythme d'espacement, pas de marges au hasard --- */
.t27-stack, .t27-stack-sm, .t27-stack-lg, .t27-stack-xl { display: flex; flex-direction: column; gap: var(--t27-space-4); }
.t27-stack-sm { gap: var(--t27-space-2); }
.t27-stack-lg { gap: var(--t27-space-6); }
.t27-stack-xl { gap: var(--t27-space-8); }

/* --- Rangee --- */
.t27-row, .t27-row-between { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t27-space-3); }
.t27-row-between { justify-content: space-between; gap: var(--t27-space-4); }

/* --- Grille BENTO asymetrique ---
   Interdiction du spec : 3 cartes identiques alignees. Cette grille impose des
   tailles differentes. Les modificateurs se posent sur les enfants.
   12 colonnes en desktop, 6 en tablette, 1 en mobile. */
.t27-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--t27-space-5);
  align-items: stretch;
}
.t27-bento > * { min-inline-size: 0; }
.t27-cell-3 { grid-column: span 3; }   .t27-cell-4 { grid-column: span 4; }
.t27-cell-5 { grid-column: span 5; }   .t27-cell-6 { grid-column: span 6; }
.t27-cell-7 { grid-column: span 7; }   .t27-cell-8 { grid-column: span 8; }
.t27-cell-9 { grid-column: span 9; }   .t27-cell-12 { grid-column: span 12; }
.t27-cell-tall { grid-row: span 2; }

@media (max-width: 991px) {
  .t27-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--t27-space-4); }
  .t27-cell-3, .t27-cell-4 { grid-column: span 3; }
  .t27-cell-5, .t27-cell-6, .t27-cell-7, .t27-cell-8, .t27-cell-9, .t27-cell-12 { grid-column: span 6; }
  .t27-cell-tall { grid-row: span 1; }
}
@media (max-width: 640px) {
  .t27-bento { grid-template-columns: 1fr; gap: var(--t27-space-4); }
  .t27-cell-3, .t27-cell-4, .t27-cell-5, .t27-cell-6,
  .t27-cell-7, .t27-cell-8, .t27-cell-9, .t27-cell-12 { grid-column: span 1; }
}

/* --- Grille auto : pour les listes ou le nombre d'items varie --- */
.t27-grid-auto { display: grid; gap: var(--t27-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* --- Carte 2027 --- */
.t27-card {
  background: var(--t27-surface); padding: var(--t27-space-6);
  border: var(--t27-border-width) solid var(--t27-border);
  border-radius: var(--t27-radius-lg); box-shadow: var(--t27-shadow-sm);
  transition: transform var(--t27-dur-2) var(--t27-ease-out),
              box-shadow var(--t27-dur-2) var(--t27-ease-out),
              border-color var(--t27-dur-2) var(--t27-ease-out);
}
.t27-card:hover { box-shadow: var(--t27-shadow-lg); border-color: var(--t27-border-accent); transform: translateY(-3px); }
.t27-card-flat { box-shadow: none; background: var(--t27-bg-subtle); }
.t27-card-accent { background: var(--t27-accent-soft); border-color: var(--t27-border-accent); }

/* --- Boutons 2027 (nouveaux composants ; les .btn existants sont en H3) --- */
.t27-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--t27-space-2); min-block-size: 48px; cursor: pointer;
  padding-inline: var(--t27-space-5); padding-block: var(--t27-space-3);
  border-radius: var(--t27-radius-full);
  border: var(--t27-border-width) solid transparent;
  font-family: var(--t27-font-text); font-size: var(--t27-text-sm);
  font-weight: var(--t27-weight-semibold); text-decoration: none;
  transition: transform var(--t27-dur-2) var(--t27-ease-out),
              box-shadow var(--t27-dur-2) var(--t27-ease-out),
              background-color var(--t27-dur-2) var(--t27-ease-out),
              border-color var(--t27-dur-2) var(--t27-ease-out);
}
.t27-btn-primary { background: var(--t27-indigo-600); color: #fff; }
.t27-btn-primary:hover { background: var(--t27-indigo-700); box-shadow: var(--t27-shadow-accent); transform: translateY(-2px); }
.t27-btn-primary:active { transform: translateY(0) scale(0.985); }
.t27-btn-ghost { background: transparent; color: var(--t27-text); border-color: var(--t27-border-strong); }
.t27-btn-ghost:hover { border-color: var(--t27-accent); color: var(--t27-accent-text); }
.t27-btn-ghost:active { transform: scale(0.985); }
.t27-btn[disabled], .t27-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* --- Pastille / badge. L'ambre reste cantonne ici et aux marqueurs. --- */
.t27-badge {
  display: inline-flex; align-items: center; gap: var(--t27-space-2);
  padding-inline: var(--t27-space-3); padding-block: var(--t27-space-1);
  border-radius: var(--t27-radius-full);
  font-size: var(--t27-text-xs); font-weight: var(--t27-weight-semibold);
  background: var(--t27-accent-soft); color: var(--t27-accent-text);
  border: var(--t27-border-width) solid var(--t27-border-accent);
}
.t27-badge-amber { background: var(--t27-accent-2-soft); color: var(--t27-accent-2-text); border-color: var(--t27-accent-2); }

/* --- Filet de separation teinte --- */
.t27-rule { block-size: 1px; background: var(--t27-border); border: 0; margin-block: var(--t27-space-7); }

/* --- Lien texte --- */
.t27-link {
  color: var(--t27-accent-text); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  transition: text-decoration-color var(--t27-dur-1) var(--t27-ease-out);
}
.t27-link:hover { text-decoration-thickness: 2px; }

/* --- Accessibilite : contenu reserve aux lecteurs d'ecran --- */
.t27-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* --- Zone de scroll horizontal maitrisee (tableaux, bandeaux) --- */
.t27-scroll-x { overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }

/* ============================ FIN tk-2027.css ============================= */

/* [refonte2027] isolation bidirectionnelle — un numero de telephone est du texte LTR ;
   sans cela il s'affiche a l'envers dans un contexte RTL (constate : "37 56 41 70 7 212+"). */
a[href^="tel:"], .stat-number, .price, .stat-suffix, [data-count]{
  unicode-bidi: isolate;
  direction: ltr;
}
[dir="rtl"] a[href^="tel:"]{ display:inline-block }
/* =========================================================================
   [refonte2027] Correctifs de rendu du site MA — poses en fin de feuille,
   donc apres style.min.css et futuristic.css qui sont servis avant.
   ========================================================================= */

/* --- 1. Le H1 etait peint en degrade rose/violet (.gradient-text, style.min.css).
   Un texte en degrade n'a pas de contraste mesurable et c'est le motif le plus
   generique du web. La hierarchie passe par la taille et la graisse, la couleur
   reste pleine et l'accent de marque garde son role. -------------------------- */
html:not(.t27-legacy) .hero-title .gradient-text,
html:not(.t27-legacy) h1 .gradient-text{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--t27-accent, #4441f1) !important;
}

/* Les autres degrades de texte : on garde le principe mais dans la palette de marque,
   sans rose ni cyan. */
html:not(.t27-legacy) .price-amount,
html:not(.t27-legacy) .process-number,
html:not(.t27-legacy) .logo-text{
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--t27-accent, #4441f1) !important;
}

/* --- 2. Les libelles du menu arabe se coupaient sur deux lignes
   (« اتصل بنا » rendu « اتصل » / « بنا »), ce qui poussait la navbar a 106 px.
   ------------------------------------------------------------------------- */
html:not(.t27-legacy) .navbar-nav .nav-link,
html:not(.t27-legacy) .navbar-nav .nav-item > a{
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
html:not(.t27-legacy) .navbar-nav{
  flex-wrap: nowrap !important;
  column-gap: clamp(.6rem, 1.4vw, 1.4rem) !important;
}

/* --- 3. Le menu deroulant imposait min-width:480px (style.css:280), ce qui
   provoquait un debordement horizontal sous 480 px. --------------------------- */
html:not(.t27-legacy) .dropdown-menu{
  min-width: min(480px, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
}

/* --- 4. Cibles tactiles : 44 px minimum sur tout ce qui se tape. ------------- */
@media (max-width: 992px){
  html:not(.t27-legacy) .navbar-nav .nav-link,
  html:not(.t27-legacy) .navbar-actions a,
  html:not(.t27-legacy) .navbar-actions button{
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* =========================================================================
   [refonte2027] Respiration de la barre de navigation (site MA)
   Mesure avant : ecart logo <-> premier lien = 0 px. « TOURAK.digital » touchait
   « الرئيسية ». Cause : .navbar-nav n'avait que gap:4px (style.min.css) et rien
   ne separait .navbar-brand de .navbar-menu.
   On repartit en flex plutot que d'empiler des marges : marque a une extremite,
   actions a l'autre, menu au centre qui prend le reste. Aucune marge cumulee,
   donc aucun risque de pousser le telephone hors de l'ecran.
   ========================================================================= */
@media (min-width: 993px){
  html:not(.t27-legacy) .navbar > .container,
  html:not(.t27-legacy) .navbar > .container-fluid,
  html:not(.t27-legacy) .navbar .navbar-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: clamp(1rem, 2vw, 2rem) !important;
    flex-wrap: nowrap !important;
  }
  html:not(.t27-legacy) .navbar-brand{ flex: 0 0 auto !important; }
  html:not(.t27-legacy) .navbar-actions{ flex: 0 0 auto !important; column-gap: .5rem !important; }

  /* Le menu occupe le centre et se centre dans l'espace disponible :
     il ne colle ni la marque ni les boutons. */
  html:not(.t27-legacy) .navbar-menu{
    flex: 0 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    min-width: max-content !important;  /* jamais comprime sous son contenu : sinon le <ul> deborde sur le logo */
    margin: 0 !important;
  }
  html:not(.t27-legacy) .navbar-nav{
    column-gap: clamp(.2rem, .8vw, .75rem) !important;
    flex-wrap: nowrap !important;
  }
  html:not(.t27-legacy) .navbar-nav > li,
  html:not(.t27-legacy) .navbar-nav > .nav-item{ flex: 0 0 auto !important; }
  html:not(.t27-legacy) .navbar-nav .nav-link{
    padding-inline: clamp(.35rem, .8vw, .75rem) !important;
    white-space: nowrap !important;
  }
}

/* Sous 993 px le menu passe en drawer : on ne touche a rien d'horizontal. */
@media (max-width: 992px){
  html:not(.t27-legacy) .navbar-menu{ margin: 0 !important; }
  html:not(.t27-legacy) .navbar-nav{ flex-wrap: wrap !important; column-gap: 0 !important; }
}
/* -------------------------------------------------------------------------
   [refonte2027] La barre ne tient pas en 1440 : marque 231 + menu 588 +
   actions 525 + deux ecarts = 1460 px. Il manque une soixantaine de pixels.
   On retire du bandeau le controle le moins utile sur un site marocain :
   la ligne telephonique France. Elle reste accessible dans le menu mobile
   et dans le pied de page — on ne supprime pas l'information, on la deplace.
   ------------------------------------------------------------------------- */
@media (min-width: 993px) and (max-width: 1519px){
  html:not(.t27-legacy) .navbar-actions .btn-phone-alt{ display: none !important; }
}

/* Sous 1200 px on compacte encore : le numero WhatsApp cede la place,
   l'icone et le lien restent cliquables. */
@media (min-width: 993px) and (max-width: 1439px){
  html:not(.t27-legacy) .navbar-actions .btn-phone > span[dir="ltr"]{
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }
  html:not(.t27-legacy) .navbar-actions .btn-phone{ padding-inline: .75rem !important; }
}

/* =========================================================================
   [refonte2027 / MA-typo-hero] Typographie et hero de tourakdigital.ma
   Pose en fin de feuille : tk-2027.css est le dernier stylesheet du <head>
   (includes/header.php:174), apres style.min.css et futuristic.css.

   CONSTAT MESURE AVANT CORRECTION (getComputedStyle, https://tourakdigital.ma/) :
     .hero-title .gradient-text  -> -webkit-text-fill-color: rgba(0,0,0,0)
                                    background-image: linear-gradient(100deg, ...)
                                    animation-name: fxHolo
     .section-title .gradient-text, .stat-number, .logo-text -> idem
   Origine : assets/css/futuristic.css:76.
   La surcharge posee precedemment ne visait que .hero-title/h1 : elle laissait
   passer .section-title .gradient-text, .stat-number et .gradient-text nu.
   Ce bloc couvre l'integralite du selecteur de futuristic.css:76.
   ========================================================================= */

/* --- 1. Aucun texte peint en degrade -------------------------------------
   Un texte dont -webkit-text-fill-color vaut transparent n'a pas de couleur
   mesurable : le rapport de contraste ne peut pas etre calcule, donc pas
   garanti. La hierarchie passe par la taille et la graisse ; la couleur reste
   pleine. --t27-accent-text suit le theme (indigo-700 en clair, indigo-400 en
   sombre), les deux au-dessus de 4,5:1 sur leur fond respectif. */
html:not(.t27-legacy) .gradient-text,
html:not(.t27-legacy) .hero-title .gradient-text,
html:not(.t27-legacy) .section-title .gradient-text,
html:not(.t27-legacy) .page-hero-title .gradient-text,
html:not(.t27-legacy) h1 .gradient-text,
html:not(.t27-legacy) h2 .gradient-text,
html:not(.t27-legacy) h3 .gradient-text {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--t27-accent-text) !important;
  filter: none !important;
  animation: none !important;
  text-shadow: none !important;
}

/* Les chiffres ne sont pas un accent de marque : ils se lisent, ils ne se
   decorent pas. Couleur de texte pleine, graisse et chasse tabulaire. */
html:not(.t27-legacy) .stat-number,
html:not(.t27-legacy) .stat-num,
html:not(.t27-legacy) .counter {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--t27-text) !important;
  filter: none !important;
  animation: none !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--t27-tracking-snug);
}

/* Prix, numeros d'etape, marque : meme procede, meme traitement. */
html:not(.t27-legacy) .price-amount,
html:not(.t27-legacy) .process-number,
html:not(.t27-legacy) .step-number,
html:not(.t27-legacy) .logo-text {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  animation: none !important;
}
html:not(.t27-legacy) .price-amount,
html:not(.t27-legacy) .process-number,
html:not(.t27-legacy) .step-number { color: var(--t27-accent-text) !important; }

/* La marque se lit en pleine couleur ; l'accent reste sur le point final,
   pose en ::after pour ne rien changer au HTML ni au texte indexe. */
html:not(.t27-legacy) .logo-text {
  color: var(--t27-text) !important;
  font-family: var(--t27-font-display) !important;
  font-weight: var(--t27-weight-bold) !important;
  letter-spacing: var(--t27-tracking-snug);
}

/* --- 2. Typographie arabe ------------------------------------------------
   IBM Plex Sans Arabic est chargee en 400/500/600/700 (header.php:172).
   Le 800 demande par .hero-title et .stat-number n'existe pas dans la fonte :
   le moteur le synthetise en epaississant les contours, ce qui remplit les
   contre-formes et empate les diacritiques (شدّة, تنوين, همزة).
   On plafonne a 700, qui est un vrai dessin, et on rattrape la presence par
   la taille. L'arabe se lisant plus petit a corps egal, l'interligne des
   titres monte a 1.3 pour degager le rang des signes hauts. */
html:not(.t27-legacy) .hero-title,
html:not(.t27-legacy) .page-hero-title,
html:not(.t27-legacy) .section-title,
html:not(.t27-legacy) h1,
html:not(.t27-legacy) h2 {
  font-family: var(--t27-font-arabic) !important;
  font-weight: var(--t27-weight-bold) !important; /* 700 : dernier poids reellement dessine */
  font-synthesis-weight: none;
}
html:not(.t27-legacy) .hero-title,
html:not(.t27-legacy) .page-hero-title {
  font-size: clamp(2.25rem, 1.55rem + 3.1vw, 4rem) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important; /* l'arabe est cursif : tout tracking casse les liaisons */
  text-wrap: balance;
}
html:not(.t27-legacy) .section-title {
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem) !important;
  line-height: 1.32 !important;
  letter-spacing: 0 !important;
}
/* Texte courant : l'interligne large est ce qui rend l'arabe confortable. */
html:not(.t27-legacy) .hero-subtitle,
html:not(.t27-legacy) .section-subtitle,
html:not(.t27-legacy) .lead {
  font-family: var(--t27-font-arabic) !important;
  line-height: var(--t27-leading-relaxed) !important;
  max-width: 60ch;
}
html:not(.t27-legacy) .hero-subtitle {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem) !important;
  color: var(--t27-text-muted) !important;
  margin-inline: 0;
}
/* Les chiffres latins dans un flux arabe : chasse fixe, sens LTR deja pose
   plus haut (unicode-bidi: isolate), et pas de synthese de graisse. */
html:not(.t27-legacy) .stat-number,
html:not(.t27-legacy) .stat-suffix {
  font-family: var(--t27-font-display) !important;
  font-weight: var(--t27-weight-bold) !important;
  font-synthesis-weight: none;
}

/* --- 3. Hero : rythme et hierarchie --------------------------------------
   L'oeil doit rencontrer quatre paliers : sur-titre, titre, phrase, action.
   Aucun n'a la meme taille ni la meme couleur que son voisin. */
html:not(.t27-legacy) .hero-badge {
  font-family: var(--t27-font-arabic) !important;
  font-size: var(--t27-text-sm) !important;
  font-weight: var(--t27-weight-semibold) !important;
  color: var(--t27-accent-text) !important;
  background: var(--t27-accent-soft) !important;
  border: 1px solid var(--t27-border) !important;
  border-radius: var(--t27-radius-full) !important;
  padding: var(--t27-space-2) var(--t27-space-4) !important;
  gap: var(--t27-space-2);
}
html:not(.t27-legacy) .hero-badge .badge-dot {
  background: var(--t27-accent-2) !important; /* ambre : le second accent, sur une surface minuscule */
}

/* Deux actions, deux poids. Le devis est l'action principale, WhatsApp la
   seconde : sans hierarchie visuelle, deux boutons pleins s'annulent. */
html:not(.t27-legacy) .hero-actions { gap: var(--t27-space-3) !important; }
html:not(.t27-legacy) .hero-actions .btn {
  min-block-size: 48px;              /* cible tactile : au-dela des 44 px requis */
  padding-inline: var(--t27-space-5) !important;
  border-radius: var(--t27-radius-full) !important;
  font-family: var(--t27-font-arabic) !important;
  font-weight: var(--t27-weight-semibold) !important;
  font-size: var(--t27-text-base) !important;
}
html:not(.t27-legacy) .hero-actions .btn-primary {
  background: var(--t27-accent) !important;
  color: var(--t27-on-accent, #fff) !important;
  border: 1px solid var(--t27-accent) !important;
  box-shadow: var(--t27-shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}
html:not(.t27-legacy) .hero-actions .btn-outline {
  background: transparent !important;
  color: var(--t27-text) !important;
  border: 1px solid var(--t27-border-strong) !important;
  box-shadow: none !important;
}

/* Les statistiques : un rang de faits, pas un bandeau decoratif. */
html:not(.t27-legacy) .hero-stats { gap: clamp(1.25rem, 3vw, 2.5rem) !important; }
html:not(.t27-legacy) .hero-stats .stat-number { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem) !important; }
html:not(.t27-legacy) .hero-stats .stat-label {
  font-family: var(--t27-font-arabic) !important;
  font-size: var(--t27-text-sm) !important;
  color: var(--t27-text-muted) !important;
}

/* --- 4. La preuve : les sites clients, dans le hero, cliquables -----------
   Bento asymetrique : un element domine (JIL PACK, client marocain), trois
   l'accompagnent. Jamais quatre cartes identiques alignees. */
html:not(.t27-legacy) .t27-ma-vit {
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.625rem, 1.4vw, 1rem);
  max-inline-size: 1040px;
  margin-inline: auto;
}
html:not(.t27-legacy) .t27-ma-vit-legende {
  display: flex; align-items: center; gap: var(--t27-space-3);
  font-family: var(--t27-font-arabic);
  font-size: var(--t27-text-sm);
  font-weight: var(--t27-weight-semibold);
  color: var(--t27-text-muted);
  margin-block: clamp(1.75rem, 4vw, 3rem) var(--t27-space-3);
  justify-content: center;
}
html:not(.t27-legacy) .t27-ma-vit-legende::before,
html:not(.t27-legacy) .t27-ma-vit-legende::after {
  content: ""; block-size: 1px; inline-size: clamp(24px, 8vw, 96px);
  background: var(--t27-border-strong); flex: 0 0 auto;
}
html:not(.t27-legacy) .t27-ma-vit-item {
  position: relative;
  display: block;
  border-radius: var(--t27-radius-lg);
  overflow: hidden;
  border: 1px solid var(--t27-border);
  background: var(--t27-surface);
  text-decoration: none;
  transition: transform var(--t27-dur-3) var(--t27-ease-out),
              border-color var(--t27-dur-2) var(--t27-ease-out),
              box-shadow var(--t27-dur-3) var(--t27-ease-out);
}
/* L'element dominant occupe les deux colonnes. */
html:not(.t27-legacy) .t27-ma-vit-item:first-child { grid-column: 1 / -1; }
html:not(.t27-legacy) .t27-ma-vit-item img {
  display: block; inline-size: 100%; block-size: auto;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
}
html:not(.t27-legacy) .t27-ma-vit-nom {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: flex; align-items: center; gap: var(--t27-space-2);
  padding: var(--t27-space-4) var(--t27-space-4) var(--t27-space-3);
  font-family: var(--t27-font-display);
  font-size: var(--t27-text-sm);
  font-weight: var(--t27-weight-semibold);
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.32) 55%, transparent);
  text-align: start;
}
html:not(.t27-legacy) .t27-ma-vit-item:first-child .t27-ma-vit-nom { font-size: var(--t27-text-lg); }
html:not(.t27-legacy) .t27-ma-vit-metier {
  font-family: var(--t27-font-arabic);
  font-weight: var(--t27-weight-regular);
  opacity: .82;
}
html:not(.t27-legacy) .t27-ma-vit-nom [class^="ri-"],
html:not(.t27-legacy) .t27-ma-vit-nom [class^="fa-"],
html:not(.t27-legacy) .t27-ma-vit-nom .fas { margin-inline-start: auto; flex: 0 0 auto; }
html:not(.t27-legacy) .t27-ma-vit-item:hover,
html:not(.t27-legacy) .t27-ma-vit-item:focus-visible {
  transform: translateY(-3px);
  border-color: var(--t27-accent);
  box-shadow: var(--t27-shadow-md, 0 12px 28px rgba(0,0,0,.16));
}
html:not(.t27-legacy) .t27-ma-vit-item:focus-visible { outline: 3px solid var(--t27-accent); outline-offset: 2px; }

@media (max-width: 640px) {
  html:not(.t27-legacy) .t27-ma-vit { grid-template-columns: minmax(0, 1fr); }
  html:not(.t27-legacy) .t27-ma-vit-item:nth-child(n+4) { display: none; } /* 3 preuves suffisent sur un telephone */
}

/* --- 5. Bandeau de consentement ------------------------------------------
   Le vert #16a06a et le gris #cbd5d0 de includes/consent-banner.php sont hors
   palette, et le bandeau pleine largeur mangeait le bas de l'ecran. On le
   ramene aux tokens et on le pose en encart. La logique de consentement
   (cookie tk_consent, gtag consent update) n'est pas touchee. */
html:not(.t27-legacy) #tk-cmp {
  inset-inline: auto var(--t27-gutter) !important;
  inset-block-end: var(--t27-gutter) !important;
  inset-inline-start: var(--t27-gutter) !important;
  max-inline-size: 520px !important;
  margin-inline: auto !important;
  background: var(--t27-surface) !important;
  color: var(--t27-text) !important;
  border: 1px solid var(--t27-border) !important;
  border-radius: var(--t27-radius-lg) !important;
  box-shadow: var(--t27-shadow-lg, 0 18px 48px rgba(0,0,0,.22)) !important;
  padding: var(--t27-space-5) !important;
  font-family: var(--t27-font-arabic) !important;
  font-size: var(--t27-text-sm) !important;
  line-height: var(--t27-leading-relaxed) !important;
}
html:not(.t27-legacy) #tk-cmp .tk-cmp-inner { gap: var(--t27-space-4) !important; }
html:not(.t27-legacy) #tk-cmp p { color: var(--t27-text-muted) !important; }
html:not(.t27-legacy) #tk-cmp a { color: var(--t27-accent-text) !important; }
html:not(.t27-legacy) #tk-cmp button {
  min-block-size: 44px;
  border-radius: var(--t27-radius-full) !important;
  font-family: inherit !important;
  font-weight: var(--t27-weight-semibold) !important;
  padding-inline: var(--t27-space-5) !important;
}
html:not(.t27-legacy) #tk-cmp .tk-cmp-accept {
  background: var(--t27-accent) !important;
  color: var(--t27-on-accent, #fff) !important;
  border: 1px solid var(--t27-accent) !important;
}
html:not(.t27-legacy) #tk-cmp .tk-cmp-refuse {
  background: transparent !important;
  color: var(--t27-text-muted) !important;
  border: 1px solid var(--t27-border-strong) !important;
}
html:not(.t27-legacy) #tk-cmp button:focus-visible {
  outline: 3px solid var(--t27-accent) !important; outline-offset: 2px;
}
@media (max-width: 600px) {
  html:not(.t27-legacy) #tk-cmp {
    inset-inline: var(--t27-space-3) !important;
    inset-block-end: var(--t27-space-3) !important;
    max-inline-size: none !important;
    padding: var(--t27-space-4) !important;
  }
}

/* --- 6. Reduction des animations ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.t27-legacy) .t27-ma-vit-item { transition: none !important; }
  html:not(.t27-legacy) .t27-ma-vit-item:hover,
  html:not(.t27-legacy) .t27-ma-vit-item:focus-visible { transform: none !important; }
}

/* --- 2bis. Rattrapage de specificite sur le H1 du hero ---------------------
   Mesure : le H1 restait a 72px / 800 / interligne 1.22 / tracking -0.032em.
   Origine : tk-2027.css:644, selecteur `html:not(.t27-legacy) h1.hero-title`
   (0,2,2), plus specifique que `html:not(.t27-legacy) .hero-title` (0,2,1).
   On repond a specificite egale, plus loin dans la feuille.

   Trois corrections, toutes dictees par l'ecriture arabe :
   - graisse 700 au lieu de 800 : IBM Plex Sans Arabic n'est chargee qu'en
     400/500/600/700 (header.php:172). Le 800 est synthetise, les contre-formes
     se bouchent et les diacritiques deviennent illisibles.
   - tracking 0 au lieu de -0.032em : l'arabe est cursif, resserrer la chasse
     rapproche les lettres au point d'attaquer les liaisons.
   - interligne 1.3 au lieu de 1.04 : il faut de la place au-dessus de la ligne
     pour la hamza et les signes hauts, et en dessous pour la kasra.
   -------------------------------------------------------------------------- */
html:not(.t27-legacy) h1.hero-title,
html:not(.t27-legacy) h1.page-hero-title,
html:not(.t27-legacy) .hero .hero-title,
html:not(.t27-legacy) .page-hero .page-hero-title {
  font-family: var(--t27-font-arabic) !important;
  font-size: clamp(2.25rem, 1.55rem + 3.1vw, 4rem) !important;
  font-weight: var(--t27-weight-bold) !important;   /* 700 : dernier poids reellement dessine */
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  font-synthesis-weight: none;
  text-wrap: balance;
}
/* Le H1 se compose de trois lignes forcees (index.php:29-32). L'accent ne
   porte que sur la ligne centrale : deux paliers de couleur, pas trois. */
html:not(.t27-legacy) .hero-title .line { display: block; }
html:not(.t27-legacy) .hero-title .line:not(.gradient-text) { color: var(--t27-text) !important; }

/* =========================================================================
   [nav2027] NAVIGATION SITE MA — refonte AR (RTL) + /fr/ + /en/
   Ecrit apres mesure reelle (iframes 390 -> 1920 px, polices chargees).

   MESURE AVANT (home AR, 1440x900) :
     - libelles sur 1 ligne : DEJA OK (le nowrap pose la nuit derniere marche).
       navbar = 84.8 px, pas 98. Le defaut « deux lignes » n'existe plus.
     - VRAI defaut 1 : entre 769 et 991 px il n'y a AUCUN hamburger
       (.hamburger{display:flex} vit dans @media (max-width:768px) de
       style.min.css) et la barre desktop n'existe pas encore
       (tk-2027.css demarrait a min-width:993px). Resultat mesure a 900 px :
       navbar 372.7 px en AR, 180.7 px en FR, 132.7 px en EN.
     - VRAI defaut 2 : le contenu de la barre deborde du container.
       AR 1440 : .navbar-actions commence a x=19.1 alors que la gouttiere
       du container commence a 140 -> 120.9 px de debordement.
       FR 1024 : .navbar-actions finit a x=1189 pour un viewport de 1024
       -> 165 px hors ecran, invisibles et non cliquables.
       Cause : .navbar-menu{min-width:max-content} interdisait au menu de ceder.

   CORRECTIF : un seul point de bascule a 992 px, le menu peut se reduire,
   et les entrees qui ne tiennent plus partent dans un menu « plus »
   (JS dans les 3 headers) au lieu de casser.
   ROLLBACK = supprimer ce bloc (repere [nav2027]).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. SOUS 992 px — tiroir lateral.
   Le panneau est ancre au bord DROIT PHYSIQUE dans les trois langues, et
   c'est deliberement une propriete physique, pas une propriete logique :
     - en AR (RTL) la droite est le bord de DEBUT de lecture — c'est la
       consigne : « en RTL le drawer s'ouvre depuis la droite » ;
     - en FR/EN (LTR) la droite est le bord ou se trouve le hamburger.
   « inset-inline-end:0 » donnerait la gauche en RTL : ce serait faux.
   L'ouverture passe par transform (translateX est insensible a la direction),
   ce qui supprime aussi l'animation de la propriete « right » qui reflowait
   la page a chaque frame.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px){

  html:not(.t27-legacy) .hamburger{
    display: flex !important;
    min-inline-size: 44px;
    min-block-size: 44px;
    align-items: center;
    justify-content: center;
  }

  html:not(.t27-legacy) .navbar-menu{
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;          /* ancrage physique assume — voir commentaire ci-dessus */
    left: auto !important;
    inline-size: min(86vw, 360px) !important;
    max-inline-size: none !important;
    block-size: auto !important;
    padding-block: 88px 24px !important;
    padding-inline: 20px !important;
    border-inline: 0 !important;  /* remplace border-left/right par une ombre : plus de question RTL */
    box-shadow: -24px 0 60px -28px rgba(16, 14, 30, .45) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 999;

    /* etat ferme */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .35s;
  }

  html:not(.t27-legacy) .navbar-menu.active{
    transform: translateX(0);
    visibility: visible;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }

  /* Le tiroir ferme ne doit pas rester dans l'ordre de tabulation :
     sans ca on tabule dans un menu invisible hors ecran. Le JS pose aussi
     l'attribut inert ; ceci est la ceinture cote CSS. */
  html:not(.t27-legacy) .navbar-menu:not(.active){
    pointer-events: none;
  }
  html:not(.t27-legacy) .navbar-menu.active{
    pointer-events: auto;
  }

  /* Voile d'arriere-plan : le clic dessus ferme (gere par le handler
     « clic hors navbar » deja present dans main.min.js). */
  html:not(.t27-legacy) body.nav-open::after{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(14, 12, 26, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  html:not(.t27-legacy) .navbar-nav{
    flex-direction: column;
    flex-wrap: nowrap !important;
    align-items: stretch;
    row-gap: 2px;
    column-gap: 0 !important;
  }

  html:not(.t27-legacy) .navbar-nav .nav-link{
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 12px !important;
    padding-block: 10px;
    border-radius: 10px;
  }

  /* Le menu « plus » n'a pas de raison d'exister dans le tiroir :
     le JS y reinjecte toutes les entrees. */
  html:not(.t27-legacy) .nav-item.t27-nav-more{ display: none !important; }
}

/* -------------------------------------------------------------------------
   2. A PARTIR DE 992 px — barre horizontale.
   Remplace les anciens blocs @media (min-width:993px) : meme intention, mais
   la borne tombe a 992 px pour se raccorder exactement au tiroir (991.98),
   et le menu a le droit de se reduire (min-width:0) au lieu d'imposer sa
   largeur intrinseque et de pousser les actions hors du container.
   ------------------------------------------------------------------------- */
@media (min-width: 992px){

  html:not(.t27-legacy) .hamburger{ display: none !important; }

  html:not(.t27-legacy) .navbar > .container,
  html:not(.t27-legacy) .navbar > .container-fluid,
  html:not(.t27-legacy) .navbar .navbar-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: clamp(.75rem, 1.6vw, 1.75rem) !important;
    flex-wrap: nowrap !important;
  }

  html:not(.t27-legacy) .navbar-brand{ flex: 0 0 auto !important; }

  html:not(.t27-legacy) .navbar-actions{
    flex: 0 0 auto !important;
    column-gap: .4rem !important;
    display: flex !important;
    align-items: center !important;
  }

  html:not(.t27-legacy) .navbar-menu{
    position: static !important;
    inset: auto !important;
    inline-size: auto !important;
    max-inline-size: none !important;
    block-size: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-inline: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: visible !important;
    transition: none !important;

    display: flex !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;        /* <= le correctif : le menu cede avant de faire deborder la barre */
    min-inline-size: 0 !important;
  }

  html:not(.t27-legacy) .navbar-nav{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    column-gap: clamp(.1rem, .6vw, .5rem) !important;
    row-gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  html:not(.t27-legacy) .navbar-nav > li,
  html:not(.t27-legacy) .navbar-nav > .nav-item{ flex: 0 0 auto !important; }

  html:not(.t27-legacy) .navbar-nav .nav-link{
    padding-inline: clamp(.3rem, .7vw, .7rem) !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Le voile n'a plus lieu d'etre en desktop. */
  html:not(.t27-legacy) body.nav-open::after{ display: none !important; }
}

/* -------------------------------------------------------------------------
   3. Budget de la zone d'actions.
   Mesure AR 1440 : place disponible pour .navbar-actions = 283.8 px.
   Avec le numero WhatsApp en toutes lettres + la ligne France, le bloc pese
   404.7 px -> 120.9 px de debordement. Les deux informations restent
   accessibles (aria-label du bouton, tiroir mobile, pied de page) : on les
   masque visuellement tant que la barre n'a pas la place, on ne les retire pas.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1599.98px){
  html:not(.t27-legacy) .navbar-actions .btn-phone-alt{ display: none !important; }

  /* Le numero cede la place, l'icone et le lien restent cliquables. */
  html:not(.t27-legacy) .navbar-actions .btn-phone > span[dir="ltr"]{
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }
  html:not(.t27-legacy) .navbar-actions .btn-phone{ padding-inline: .7rem !important; }
}

/* -------------------------------------------------------------------------
   4. Menu « plus » (priority-plus). Le JS des 3 headers y deplace, dans
   l'ordre de data-nav-priority croissant, les entrees qui ne tiennent plus.
   Il ne s'affiche que s'il contient quelque chose.
   ------------------------------------------------------------------------- */
html:not(.t27-legacy) .nav-item.t27-nav-more{ position: relative; }
html:not(.t27-legacy) .nav-item.t27-nav-more[hidden]{ display: none !important; }

html:not(.t27-legacy) .t27-nav-more-btn{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-block-size: 40px;
  padding-inline: clamp(.3rem, .7vw, .7rem);
  border-radius: 10px;
  white-space: nowrap;
}
html:not(.t27-legacy) .t27-nav-more-btn::after{
  content: "";
  inline-size: .42em; block-size: .42em;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-.12em);
  transition: transform .2s ease;
}
html:not(.t27-legacy) .t27-nav-more-btn[aria-expanded="true"]::after{
  transform: rotate(-135deg) translateY(-.12em);
}

html:not(.t27-legacy) .t27-nav-more-list{
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;              /* logique : s'aligne sur le bord de fin, droite en LTR, gauche en RTL */
  min-inline-size: 220px;
  max-inline-size: calc(100vw - 2rem);
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 14px;
  background: var(--t27-surface, #fff);
  border: 1px solid var(--t27-border, rgba(20, 20, 40, .10));
  box-shadow: 0 24px 60px -26px rgba(16, 14, 30, .38);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
html:not(.t27-legacy) .t27-nav-more-btn[aria-expanded="true"] + .t27-nav-more-list{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
html:not(.t27-legacy) .t27-nav-more-list .nav-link{
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 12px !important;
  border-radius: 9px;
  white-space: nowrap;
}
html:not(.t27-legacy) .t27-nav-more-list .nav-link:hover,
html:not(.t27-legacy) .t27-nav-more-list .nav-link:focus-visible{
  background: var(--t27-surface-2, rgba(68, 65, 241, .07));
}

/* -------------------------------------------------------------------------
   5. Mouvement reduit : tout ce qui precede se fige.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html:not(.t27-legacy) .navbar-menu,
  html:not(.t27-legacy) .navbar-menu.active,
  html:not(.t27-legacy) .t27-nav-more-list,
  html:not(.t27-legacy) .t27-nav-more-btn::after{
    transition: none !important;
  }
}

/* --- 7. Contraste du bouton principal du hero -----------------------------
   Mesure (thème sombre, canvas + WCAG 2.1) : #fff sur --t27-accent (indigo-500,
   rgb 91,101,255) = 4,42:1. Le libelle fait 19px/600, il n'entre pas dans la
   categorie "grand texte" (>=24px, ou >=18,66px en 700) : le seuil applicable
   est 4,5:1. On fige le fond sur indigo-600, identique dans les deux themes. */
html:not(.t27-legacy) .hero-actions .btn-primary,
html:not(.t27-legacy) .hero-actions .btn.btn-primary {
  background: var(--t27-indigo-600) !important;
  background-image: none !important;
  border-color: var(--t27-indigo-600) !important;
  color: #fff !important;
}
html:not(.t27-legacy) .hero-actions .btn-primary:hover,
html:not(.t27-legacy) .hero-actions .btn.btn-primary:hover {
  background: var(--t27-indigo-700) !important;
  border-color: var(--t27-indigo-700) !important;
}

/* --- 8. Reglages issus du controle visuel --------------------------------- */

/* Le suffixe de l'unite appartient au chiffre : « 0 DH » ne peut pas etre
   ecrit en deux couleurs. Constate a l'ecran : 0 blanc, DH indigo. */
html:not(.t27-legacy) .stat-suffix,
html:not(.t27-legacy) .hero-stats .stat-suffix {
  color: var(--t27-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}

/* Le sous-titre suit le centrage du titre au lieu de se coller au bord. */
html:not(.t27-legacy) .hero-subtitle { margin-inline: auto !important; }

/* La capture dominante prenait 650 px de haut sur 1040 de large et mangeait
   un ecran entier. Cadrage panoramique sur le haut de la page du client :
   c'est la partie qui identifie le site. Les captures sources restent en
   16:10, seul le cadrage change. */
html:not(.t27-legacy) .t27-ma-vit-item:first-child img {
  aspect-ratio: 16 / 6.5;
  max-block-size: 420px;
}
@media (max-width: 640px) {
  html:not(.t27-legacy) .t27-ma-vit-item:first-child img { aspect-ratio: 16 / 10; max-block-size: none; }
}

/* Nom et metier se touchaient : deux niveaux de lecture, deux traitements. */
html:not(.t27-legacy) .t27-ma-vit-nom { flex-wrap: wrap; row-gap: 2px; }
html:not(.t27-legacy) .t27-ma-vit-metier {
  position: relative;
  padding-inline-start: var(--t27-space-3);
  font-size: var(--t27-text-xs);
}
html:not(.t27-legacy) .t27-ma-vit-metier::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 20%;
  inline-size: 1px; background: currentColor; opacity: .45;
}
html:not(.t27-legacy) .t27-ma-vit-item:first-child .t27-ma-vit-metier { font-size: var(--t27-text-sm); }

/* --- 9. Bandeau de consentement : ancrage ---------------------------------
   Constate a l'ecran : centre horizontalement, l'encart passait devant le H1.
   On l'ancre au coin inline-end. En RTL cela le place a gauche, a l'oppose du
   bouton WhatsApp flottant : les deux ne se recouvrent plus.
   La logique de consentement reste celle de includes/consent-banner.php. */
html:not(.t27-legacy) #tk-cmp {
  inset-inline-start: auto !important;
  inset-inline-end: var(--t27-gutter) !important;
  margin-inline: 0 !important;
}
@media (max-width: 600px) {
  html:not(.t27-legacy) #tk-cmp {
    inset-inline-start: var(--t27-space-3) !important;
    inset-inline-end: var(--t27-space-3) !important;
    inset-block-end: calc(var(--t27-space-3) + 68px) !important; /* degage le bouton WhatsApp flottant */
  }
}


/* =========================================================================
   [MA hero premium — centrage & équilibre — 2027-08-13]
   Constat mesuré (getComputedStyle + capture 1440, thème sombre) :
     .hero .hero-content = 800px collé au côté start (RTL). Écart au conteneur :
     280px de vide à gauche contre 40px à droite -> composition penchée.
   Le haut du FR est clair et aéré (parti pris anmd.fr) ; on transpose son
   équilibre au thème sombre MA (thème conservé) en recentrant la colonne du
   hero : haut de page symétrique, aéré, premium. Aucune couleur ni contraste
   modifié (déjà AA+ : H1 accent 7,32:1 / CTA blanc/indigo-600 6,58:1).
   Portée limitée à .hero .hero-content : la preuve visuelle (.t27-ma-vit,
   sœur du hero-content dans .container) et ses réglages restent intacts.
   ========================================================================= */
html:not(.t27-legacy) .hero .hero-content{
  margin-inline: auto !important;
  align-items: center !important;
  text-align: center !important;
  max-inline-size: 860px;
}
html:not(.t27-legacy) .hero .hero-title,
html:not(.t27-legacy) .hero .hero-title .line{ text-align: center !important; }
html:not(.t27-legacy) .hero .hero-badge{ margin-inline: auto !important; }
html:not(.t27-legacy) .hero .hero-actions{ justify-content: center !important; }
html:not(.t27-legacy) .hero .hero-stats{ justify-content: center !important; }
