/* ============================================================================
   FICHIER : common.css
   DESCRIPTION : CSS commun à TOUTES les pages du site
   PROJET : DEADAL Technologies (Site Web)
   DATE : 25 janvier 2025
   ============================================================================ */

/* ==========================================================================
   ÉLÉMENTS DE BASE
   ========================================================================== */
/* ==========================================================================
   SCHEME COULEUR
   ========================================================================== */

:root {
  color-scheme: light;
}

/* ==========================================================================
     COULEURS PRINCIPALES
     ========================================================================== */

:root {
    
  /* --- Couleurs de base --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  
  /* --- Couleur primaire (Indigo) --- */
  --color-primary-50: #e0e7ff;        /* indigo-50 */
  --color-primary-300: #a5b4fc;       /* indigo-300 */
  --color-primary-600: #4f46e5;       /* indigo-600 */
  
  /* --- Couleurs secondaires --- */
  --color-emerald-50: #d1fae5;        /* emerald-50 = vert émeraude */
  --color-emerald-300: #6ee7b7;       /* emerald-300 = vert "fluo" */
  --color-emerald-600: #059669;       /* emerald-600 = vert "foncé"*/
  
  --color-sky-50: #f0f9ff;            /* sky-50 */
  
  --color-orange-300: #fdba74;        /* orange-300 */
  --color-orange-600: #c2410c;        /* orange-600 */
  
  /* --- Couleurs de texte --- */
  --color-text: #0f172a;              /* slate-900 - Texte principal */
  --color-text-muted: #64748b;        /* slate-500 - Texte secondaire */
  --color-text-light: #94a3b8;        /* slate-400 - Texte léger */
  
  /* --- Couleurs de fond --- */
  --color-bg: #ffffff;                /* Fond principal */
  --color-bg-light: #f8fafc;          /* slate-50 - Fond léger */
  --color-bg-secondary: #f1f5f9;      /* slate-100 - Fond secondaire */
  
  /* --- Couleurs d'interface --- */
  --color-border: #e5e7eb;            /* gray-200 - Bordures */
  --color-border-light: #f3f4f6;      /* gray-100 - Bordures légères */
  --pill-border-green: #9be9c1;
  --pill-border-blue: #a7b7ed;
  
  /* --- Boutons --- */
  --color-btn-primary: #0A192F;       /* Bleu très foncé */
  --color-btn-primary-hover: #112F54; /* Hover état */
  --color-btn-outline-hover: #004D40;		  /* Vert foncé */
  --color-btn-outline-bghover: #E6F2F0; /* Hover état */
  --color-btn-cookie: #425b76;
  --color-subtext: #847c7c;
  
  /* --- Couleurs d'état --- */
  --color-success: #10b981;           /* emerald-500 */
  --color-warning: #f59e0b;           /* amber-500 */
  --color-error: #ef4444;             /* red-500 */
  --color-info: #3b82f6;              /* blue-500 */
  
  /* --- Couleurs d'icônes Lucide --- */
  --color-icon-indigo: #6366f1;       /* indigo-500 */
  --color-icon-emerald: #10b981;      /* emerald-500 */
  --color-icon-rose: #f43f5e;         /* rose-500 */
  --color-icon-orange: #f97316;       /* orange-500 */
  --color-icon-violet: #8b5cf6;       /* violet-500 */
  --color-icon-cyan: #06b6d4;         /* cyan-500 */
  
  /* --- Ring (outline) --- */
  --color-ring: rgba(79, 70, 229, 0.12); /* Pour les highlights */
  
  
  /* ==========================================================================
     ESPACEMENTS
     ========================================================================== */
  
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.125rem;           /* 2px */
  --spacing-1: 0.25rem;              /* 4px */
  --spacing-1-5: 0.375rem;           /* 6px */
  --spacing-2: 0.5rem;               /* 8px */
  --spacing-2-5: 0.625rem;           /* 10px */
  --spacing-3: 0.75rem;              /* 12px */
  --spacing-3-5: 0.875rem;           /* 14px */
  --spacing-4: 1rem;                 /* 16px */
  --spacing-5: 1.25rem;              /* 20px */
  --spacing-6: 1.5rem;               /* 24px */
  --spacing-7: 1.75rem;              /* 28px */
  --spacing-8: 2rem;                 /* 32px */
  --spacing-9: 2.25rem;              /* 36px */
  --spacing-10: 2.5rem;              /* 40px */
  --spacing-12: 3rem;                /* 48px */
  --spacing-14: 3.5rem;              /* 56px */
  --spacing-16: 4rem;                /* 64px */ 
  --spacing-18: 4.5rem;
  --spacing-20: 5rem;                /* 80px */
  --spacing-24: 6rem;                /* 96px */
  --spacing-28: 7rem;
  --spacing-32: 8rem;
    
  /* ==========================================================================
     TYPOGRAPHIE
     ========================================================================== */
  
  /* --- Familles de polices --- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", 
               "Segoe UI Emoji", "Segoe UI Symbol";
  
  /* --- Tailles de police --- */
  --font-size-xs: 0.75rem;           /* 12px */
  --font-size-sm: 0.875rem;          /* 14px */
  --font-size-base: 1rem;            /* 16px */
  --font-size-lg: 1.125rem;          /* 18px */
  --font-size-xl: 1.25rem;           /* 20px */
  --font-size-2xl: 1.5rem;           /* 24px */
  --font-size-3xl: 1.875rem;         /* 30px */
  --font-size-4xl: 2.25rem;          /* 36px */
  --font-size-5xl: 3rem;             /* 48px */
  
  /* --- Poids de police --- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  /* --- Hauteur de ligne --- */
  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 2;
  
  /* --- Espacement des lettres --- */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-compact: -0.015em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  
  
  /* ==========================================================================
     BORDURES & RADIUS
     ========================================================================== */
  
  /* --- Épaisseur de bordure --- */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  
  /* --- Radius de bordure --- */
  --radius-none: 0;
  --radius-sm: 0.125rem;             /* 2px */
  --radius-default: 0.25rem;         /* 4px */
  --radius-md: 0.375rem;             /* 6px */
  --radius-lg: 0.5rem;               /* 8px */
  --radius-xl: 0.75rem;              /* 12px */
  --radius-2xl: 1rem;                /* 16px */
  --radius-3xl: 1.5rem;              /* 24px */
  --radius-full: 9999px;             /* Cercle complet */
  
  
  /* ==========================================================================
     OMBRES (SHADOWS)
     ========================================================================== */
  
  --shadow-none: none;
  --shadow-card: 0 10px 30px rgba(2, 8, 23, 0.06);
  --shadow-button: 0 2px 10px rgba(0, 0, 0, 0.2);
  --shadow-button-hover: 0 6px 18px rgba(0, 0, 0, 0.25);
  --shadow-button-active: 0 2px 4px rgba(0, 0, 0, 0.20);
  --shadow-video-shell: 0 20px 40px rgba(15, 23, 42, 0.08);
  --shadow-dialog: 0 40px 80px rgba(15, 23, 42, 0.25);
  --shadow-badge: 0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-chatbot: 0 4px 12px rgba(0, 0, 0, 0.2);
  
  
  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */
  
  /* --- Durées --- */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;
  
  /* --- Fonctions d'easing --- */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* --- Transitions combinées (projet) --- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-button: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  
  /* ==========================================================================
     ANIMATIONS (REVEAL SCROLL)
     ========================================================================== */
  
  --reveal-duration: 300ms;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); /* easeOutCubic */
  --reveal-stagger: 150ms;
  --reveal-scale-from: 0.96;
  --reveal-translate-from: 0px;

  
  /* ==========================================================================
     DIMENSIONS & LAYOUT
     ========================================================================== */
  
  /* --- Largeurs de conteneur --- */
  --container-s: 510px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-met: 68rem;
  --ctn-without-card: 72rem;
  --container-xs: 380px;
  
  /* --- Largeur du projet --- */
  --container-max: 1280px;
  --legal-max: 900px;
  --benefits-max: 1100px;
  
  /* --- Hauteurs --- */
  --header-height: 64px;
  
  
  /* ==========================================================================
     Z-INDEX
     ========================================================================== */
  
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-60: 60;
  --z-auto: auto;
  --z-header: 40;
  --z-modal: 50;
  --z-chatbot: 60;
  --z-tooltip: 70;
  
  
  /* ==========================================================================
     BREAKPOINTS (pour référence JavaScript)
     ========================================================================== */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  
  /* ==========================================================================
     CHATBOT (variables spécifiques)
     ========================================================================== */
  
  --cb-primary: #0a192f;
  --cb-primary-hover: #1a2f4f;
  --cb-bg: #ffffff;
  --cb-bg-sec: #f8f9fa;
  --cb-text: #333333;
  --cb-text-light: #6c757d;
  --cb-border: #dee2e6;
  --cb-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  --cb-radius: 16px;
  
}

/* ==========================================================================
   DARK MODE (préparé pour le futur)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Décommenter et ajuster les valeurs si dark mode activé
    --color-bg: #0f172a;
    --color-text: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-border: #334155;
    */
  }
}

/* ==========================================================================
   UTILITAIRES DIVERS
   ========================================================================== */

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


html {
  height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-size: inherit;
}

p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  background-color: transparent;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  text-decoration: none;
  /* color: var(--color-primary); */
}

a:focus-visible {
  outline: 2px solid var(--color-primary-50);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   IMAGES & VIDÉOS
   ========================================================================== */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */

button,
input,
optgroup,
select,
textarea {
  /* font-family: inherit; */
  /* font-size: 100%; */
  /* line-height: inherit; */
  margin: 0;
  padding: 0;
  /* color: inherit; */
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
  background-color: transparent;
  background-image: none;
}

button,
select {
  text-transform: none;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}


[hidden] {
  display: none !important;
}

[disabled] {
  cursor: not-allowed;
}

/* ==========================================================================
   ÉLÉMENTS HTML5
   ========================================================================== */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

/* Réduit les mouvements pour les utilisateurs qui le préfèrent */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Assure que le focus est visible pour la navigation au clavier */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

dialog {
  padding: 0;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Supprime le spinner des inputs number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-white);
}

/* ==========================================================================
   TYPOGRAPHIE - HEADINGS
   ========================================================================== */

h1 {
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  font-size: clamp(2rem,4.5vw,3.25rem);
  margin: var(--spacing-4) 0;
}

h2 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  font-size: clamp(1.4rem,2.5vw,2rem)
}

h3 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

h4 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

h5 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

h6 {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* ==========================================================================
   TYPOGRAPHIE - TEXTE
   ========================================================================== */

p {
  margin: 0;
}

/* Liste avec bullets (quand nécessaire) *//* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */

blockquote {
  font-style: italic;
  color: var(--color-text-muted);
}

/* ==========================================================================
   CODE & PRE
   ========================================================================== */

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 
               "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
  padding: var(--spacing-0-5) var(--spacing-1);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-default);
}

pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 
               "Liberation Mono", "Courier New", monospace;
  padding: var(--spacing-4);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background-color: transparent;
}

/* ==========================================================================
   HR (SÉPARATEURS)
   ========================================================================== */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-8) 0;
}

/* ==========================================================================
   STRONG & EM
   ========================================================================== */

strong,
b {
  font-weight: var(--font-weight-bold);
}

em,
i {
  font-style: italic;
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
  background-color: var(--color-primary-50);
  color: var(--color-text);
}

::-moz-selection {
  background-color: var(--color-primary-50);
  color: var(--color-text);
}

/* ==========================================================================
   SCROLLBAR (Webkit)
   ========================================================================== */

::-webkit-scrollbar {
  width: var(--spacing-2-5);
  height: var(--spacing-2-5);
}

::-webkit-scrollbar-track {
  background-color: var(--color-bg-light);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
}

/* ==========================================================================
   FOCUS VISIBLE (Accessibilité)
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--color-primary-50);
  outline-offset: 2px;
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr,
  img {
    page-break-inside: avoid;
  }
  
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* Navigation */
.nav {
  display: flex;
  gap: var(--spacing-5);
  align-items: center;
  font-size: var(--font-size-lg);
}

.nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
}

.nav a:hover {
  color: var(--color-primary-600);
}

/* ==========================================================================
   ICÔNES LUCIDE
   ========================================================================== */

.icon {
  display: inline-flex;
  width: var(--spacing-5);
  height: var(--spacing-5);
  align-items: center;
  justify-content: center;
  /* vertical-align: -2px; */
}

.icon-lg {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

.icon-xlg {
 width: var(--spacing-8);
 height: var(--spacing-8);
}

.icon-2xlg {
 width: var(--spacing-10);
 height: var(--spacing-10);
}

.lucide {
  stroke-width: 2;
}

/* Couleurs d'icônes (palette Tailwind *-500) */
.icon--indigo {
  color: var(--color-icon-indigo);
}

.icon--emerald {
  color: var(--color-icon-emerald);
}

.icon--rose {
  color: var(--color-icon-rose);
}

.icon--orange {
  color: var(--color-icon-orange);
}

.icon--violet {
  color: var(--color-icon-violet);
}

.icon--cyan {
  color: var(--color-icon-cyan);
}

.section {
 padding-top: var(--spacing-8);
 padding-bottom: var(--spacing-14);
}

/* Grille de base */
.grid {
  display: grid;
  gap: var(--spacing-4);
}

.grid-2 {
 grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Wrapper pour impact (sections spéciales) *//* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

/* Masquer sur mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Masquer sur desktop */
@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Afficher sur mobile uniquement */
@media (min-width: 768px) {
  .show-mobile {
    display: none !important;
  }
}

/* Afficher sur desktop uniquement */
@media (max-width: 767px) {
  .show-desktop {
    display: none !important;
  }
}

/* Lead text (introduction) */
.lead {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  margin: var(--spacing-8) 0;
}

/* Small text */
.small {
  font-size: var(--font-size-sm);
}

/* Muted text */
.muted {
  color: var(--color-text-muted);
}

.light {
  color: var(--color-text-light);
}

.maintext{
  color: var(--color-text);
}

.logo-name {
 font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   CONTAINERS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}

.head-top{
  height: var(--spacing-18);
}

.logo-anim{
  height: var(--spacing-12);
}

/* Flex de base */
.flex {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}

/* Flex avec wrap */
.flex-wrap {
  flex-wrap: wrap;
}

/* Flex sans wrap *//* Direction *//* Alignement *//* Justification *//* Combinaison utile : centré entre */
.center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   HERO SECTIONS
   ========================================================================== */

.hero {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-emerald-50) 0%, var(--color-white) 50%, var(--color-primary-50) 100%
  );
}

/* Video shell (conteneur de vidéo avec style) */
.video-shell {
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  padding: var(--spacing-4);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-video-shell);
}

/* ==========================================================================
   FOOTER (Global)
   ========================================================================== */

.footer {
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-0);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   WRAPPER SPÉCIAUX
   ========================================================================== */

.hero-cta{
  display: flex;
  gap: var(--spacing-4);
  margin-left: var(--spacing-6);
}

.cta-band {
  margin: auto;
}

/* Wrapper pour CTA alignés à gauche */
.cta-wrapper-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2-5);
}

.cta-w-solo{
 display: flex;
 justify-content: center;
 margin-top: var(--spacing-14);
}

.border-hero{
  padding-left: var(--spacing-8);
  border-left: 2px solid var(--color-primary-50);  
}

.compact {letter-spacing: var(--letter-spacing-compact)}

.hero-h3 {
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.35;
  font-size: clamp(1.1rem, 2.25vw, 1.5rem);
  color: rgba(15, 23, 42, 0.82);
}

.cta-hero-solo{
  margin-left: var(--spacing-24);
  margin-top: var(--spacing-8);
}

.card-btn-solo{
  gap: 0.9rem;
  padding: 0.85rem 0.9rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(15, 23, 42, 0.05);
  max-width: 18rem;
}

/* ==========================================================================
   BOUTONS PRIMAIRES 
   ========================================================================== */

[data-cta],
[data-cta] * {
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-btn-primary);
  color: var(--color-white);
  border: none;
  padding: var(--spacing-3-5) var(--spacing-7);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-xl);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  text-decoration: none;
  box-shadow: var(--shadow-button);
  transition: var(--transition-button);
}

.btn-primary:hover {
  background-color: var(--color-btn-primary-hover);
  color: var(--color-white);
  transform: scale(1.03);
  box-shadow: var(--shadow-button-hover);
}

.btn-primary:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-button-active);
}

.btn-outline {
  background-color: var(--color-white);
  border: 2px solid var(--color-btn-primary);
  color: var(--color-btn-primary);
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-xl);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  box-shadow: var(--shadow-button);
  transition: var(--transition-button);
  height: auto;
  text-decoration: none;
}

.btn-outline:hover {
  background-color: var(--color-btn-outline-bghover);
  color: var(--color-btn-outline-hover);
  border-color: var(--color-btn-outline-hover);
  transform: scale(1.03);
  box-shadow: var(--shadow-button-hover);
}

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  backdrop-filter: saturate(140%) blur(6px);
  background-color: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}
.cook{
 text-align: center;
 padding-bottom: var(--spacing-2);
}

/* Bouton cookies (footer) */
.btn-cookie{
  background-color: var(--color-btn-cookie);
  border:1px solid var(--color-btn-cookie);
  border-radius: var(--radius-default);
  padding: var(--spacing-2-5) var(--spacing-4);
  text-decoration:none;
  color:var(--color-white);
  font-family:inherit;
  font-size:inherit;
  cursor:pointer;
}

.ml-cgu {
  text-decoration:none;
  color:inherit;
}

/* ==========================================================================
   SECTIONS AVEC GRADIENTS SPÉCIFIQUES
   ========================================================================== */

.section-gradient-blue {
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-white));
}

.section-gradient-emerald {
  background: linear-gradient(135deg, var(--color-emerald-50), var(--color-white));
}

.section-gradient-contact {
  background: linear-gradient(135deg,var(--color-emerald-50), var(--color-white) 50%, var(--color-primary-50));
}
.section-white{
  background : var(--color-white);
}

/* ==========================================================================
   ICÔNE VIDÉO
   ========================================================================== */

.icon-video {
  width: var(--spacing-6);
  height: var(--spacing-6);
  display: block;
}

/* ==========================================================================
   PILLS (BADGES)
   ========================================================================== */

.pills {
  text-align: center;
  margin-bottom: var(--spacing-5);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text-muted);
  padding: var(--spacing-1-5) var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-button-sm);
  margin: var(--spacing-1) var(--spacing-4);
}

.hero-header{
  text-align: left;
  margin: var(--spacing-2) var(--spacing-5);
}

/* Sous-texte pour audit */
.audit-subtext {
  font-size: var(--spacing-3);
  color: var(--color-subtext);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  text-align: center;
}

.hero-video{
 margin: var(--spacing-10);
}

.videohead{
 width: 100%;
 border-radius: var(--radius-2xl);
 object-fit: cover;
}

.ul-p{
 display: grid;
 gap: var(--spacing-3);
 margin: var(--spacing-4) var(--spacing-10);
}

.gn-outro{
 font-size: var(--font-size-xl);
 line-height: var(--line-height-snug);
}

.title-center{
 margin: auto;
}

/* ==========================================================================
   CARDS (CARTES)
   ========================================================================== */

.card{
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-6);
  box-shadow:var(--shadow-card);
  border: 1px solid var(--color-border);
  align-content: start;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}



    /* ------- État initial (avant entrée dans le viewport) ------- */
.cards[data-stagger] .card {
      opacity: 0;
      transform: translateY(var(--reveal-translate-from)) scale(var(--reveal-scale-from));
      transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
      /* cascade : calcule le delay à partir de --i injecté en JS */
      transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
      will-change: opacity, transform;
    }

    /* ------- État affiché (entrée viewport) ------- */
    .cards.in-view .card {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    @media (prefers-reduced-motion: reduce) {
    .cards[data-stagger] .card {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }

.card-center{
 text-align: center;
 justify-items: center;
}

.kpi-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.35;
}

.inside-card {
 margin: 0 var(--spacing-4);
}

.mincard {
 max-width: var(--container-s);
 margin: auto;
}

/* Good news reveal (animation spéciale) */
.good-news {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  color: #1f2937;
  opacity: 0;
  transform: translateY(6px);
  animation: goodnews 0.6s ease forwards;
  animation-delay: 3s;
}

.good-news::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #10b981, #06b6d4, #6366f1);
  animation: underline 0.9s ease-out forwards;
  animation-delay: 3.2s;
}

@keyframes goodnews {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes underline {
  to {
    width: 100%;
  }
}

/* ==========================================================================
   FOOTER CTA - LAYOUT TEXTE + BOUTON CÔTE À CÔTE
   ========================================================================== */

/* CLASSE PRINCIPALE - Layout flex */
.footer-cta-layout {
  display: flex;
  align-items: end;
  gap: var(--spacing-8);              
  justify-content: space-between;
  padding: 0 var(--spacing-12) 0 var(--spacing-2);
}

/* CLASSE TEXTE - Zone de gauche */
.footer-cta-text {
  flex: 1;                            /* Prend l'espace disponible */
  max-width: 640px;                   /* Largeur max pour lisibilité */
}

.footer-cta-text h2{
  margin-top: 0;
}

.footer-cta-text .footer-p {
  margin: 0;                          /* Pas de marge supplémentaire */
}

/* 3️⃣ CLASSE BOUTON - Zone de droite */
.footer-cta-button {
  flex-shrink: 0;                     /* Ne rétrécit jamais */
  display: flex;
  flex-direction: column;             /* Bouton au-dessus du subtext */
  align-items: center;               
  gap: var(--spacing-2);              /* 8px entre bouton et subtext */
}

.footer-cta-button .btn-primary {
  white-space: nowrap;                /* Bouton sur une ligne */
}

.footer-cta-button .audit-subtext {
  text-align: center;                 /* Subtext centré */
}

.footer-p{
  padding: 0 var(--spacing-4);
  margin-bottom: var(--spacing-6);
  border-left: 3px solid var(--color-primary-50);
  color: rgba(15, 23, 42, .72);
  line-height: 1.55;
  font-weight: var(--font-weight-semibold);;
}

/* ==========================================================================
   MODALS (MODALES)
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(2, 6, 23, 0.45);
  z-index: var(--z-modal);
  padding: var(--spacing-4);
}

.modal.open {
  display: flex;
}

.dialog {
  width: min(920px, 100%);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-dialog);
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-6);
}

.dialog-header {
  margin-bottom: var(--spacing-2);
}

.dialog-title {
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-xl);
}

.dialog-desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.close-x {
  margin-left: auto;
  border: none;
  background-color: transparent;
  font-size: var(--font-size-xl);
  cursor: pointer;
}

@media (max-width: 767px) {
  .mobile\:hidden { display: none !important; }
  .mobile\:block { display: block !important; }
  .mobile\:flex { display: flex !important; }
}

@media (min-width: 768px) {
  .desktop\:hidden { display: none !important; }
  .desktop\:block { display: block !important; }
  .desktop\:flex { display: flex !important; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  .print\:hidden { display: none !important; }
}

/* ========================================================================== */
   INTÉGRÉ : animations/section_benef.css
/* ========================================================================== */

    /* ------- Styles de démo (mise en page) ------- */
    
    .spacer{
      height: 100vh; /* pour tester la sortie/replay */
      display: grid;
      place-items: center;
      color: #607086;
    }
    section#benefits{
      max-width: 1100px;
      margin: 0 auto;
      padding: 48px 24px 64px;
    }
    section#benefits h2{
      font-size: 28px;
      margin: 0 0 20px;
      letter-spacing: .2px;
    }

/* ==========================================================================
   BOUTON RETOUR EN HAUT
   ========================================================================== */

.scroll-to-top {
  position: fixed;
  bottom: var(--spacing-6);
  right: var(--spacing-6);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  z-index: 1000;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

/* État visible */
.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover */
.scroll-to-top:hover {
  background: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}

/* Active (clic) */
.scroll-to-top:active {
  transform: translateY(-1px);
}

/* Icône */
.scroll-to-top svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5px;
  color: #0a192f;
}

/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 767px) {
  .scroll-to-top {
    bottom: var(--spacing-4);
    right: var(--spacing-4);
    width: 48px;
    height: 48px;
  }
  
  .scroll-to-top svg {
    width: 20px;
    height: 20px;
  }
}