/* ============================================
   MOBILE-FIRST BASE CSS
   AB Odyssée - Approche Mobile-First
   ============================================
   
   BREAKPOINTS (min-width):
   - Base: 0 - 639px (Mobile)
   - sm: 640px+ (Tablette portrait)
   - md: 768px+ (Tablette paysage)
   - lg: 1024px+ (Desktop)
   - xl: 1280px+ (Grand Desktop)
   
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES - Mobile-First Variables
   ============================================ */
:root {
  /* Breakpoints en variables pour documentation */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Espacements Mobile-First */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Padding de section - Mobile par défaut */
  --section-padding-x: 1.25rem;
  --section-padding-y: 4rem;

  /* Container widths */
  --container-max: 100%;

  /* Grid gaps */
  --grid-gap: 0.5rem;

  /* Card padding */
  --card-padding: 0.75rem;

  /* Font sizes - Mobile par défaut */
  --fs-hero: 2.5rem;
  --fs-h1: 2rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;
}

/* ============================================
   BASE MOBILE (< 640px)
   Styles par défaut pour les petits écrans
   ============================================ */

/* Typography Mobile */
.hero-title,
.section-hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.1;
}

.section-title,
h2.section-heading {
  font-size: var(--fs-h2);
  line-height: 1.2;
}

/* Layout Mobile - Empilage vertical (Liste) */
.mf-grid,
.mf-section-grid,
.mf-cards-container {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  width: 100%;
}

/* Cards Mobile - Pleine largeur */
.mf-card {
  width: 100%;
  padding: var(--card-padding);
  border-radius: 0.75rem;
}

/* Stats en 2x2 sur mobile */
.mf-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xs);
}

/* Section padding Mobile */
.mf-section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

/* Boutons Mobile - Full width */
.mf-btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}

.mf-btn-group .btn-action,
.mf-btn-group a[class*="btn"] {
  width: 100%;
  justify-content: center;
}

/* Navigation Mobile - Dock visible, Card-nav cachée */
.mf-nav-mobile {
  display: flex;
}

.mf-nav-desktop {
  display: none;
}

/* Menu Burger visible */
.mf-burger-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

/* Process steps - 2 colonnes sur mobile */
.mf-process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

/* Testimonials Mobile */
.mf-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

/* FAQ Mobile - Full width */
.mf-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ============================================
   TABLETTE PORTRAIT (min-width: 640px)
   ============================================ */
@media (min-width: 640px) {
  :root {
    --section-padding-x: 1.5rem;
    --section-padding-y: 5rem;
    --grid-gap: 1rem;
    --card-padding: 1.25rem;
    --fs-hero: 3rem;
    --fs-h2: 2rem;
  }

  /* Grille 2 colonnes */
  .mf-grid,
  .mf-section-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
  }

  /* Cards 2 colonnes avec item pleine largeur en dernier */
  .mf-cards-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
  }

  .mf-cards-container>*:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  /* Stats toujours en 4 colonnes sur tablette */
  .mf-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
  }

  /* Boutons côte à côte */
  .mf-btn-group {
    flex-direction: row;
    justify-content: center;
  }

  .mf-btn-group .btn-action,
  .mf-btn-group a[class*="btn"] {
    width: auto;
  }

  /* Cards plus grandes */
  .mf-card {
    border-radius: 1rem;
  }
}

/* ============================================
   TABLETTE PAYSAGE (min-width: 768px)
   ============================================ */
@media (min-width: 768px) {
  :root {
    --section-padding-y: 6rem;
    --grid-gap: 1.25rem;
    --card-padding: 1.5rem;
    --fs-hero: 3.5rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.5rem;
  }

  /* Cards radius plus grand */
  .mf-card {
    border-radius: 1.25rem;
  }

  /* Process en 2x2 */
  .mf-process-grid {
    gap: var(--spacing-md);
  }
}

/* ============================================
   DESKTOP (min-width: 1024px)
   Structure classique avec navigation horizontale
   ============================================ */
@media (min-width: 1024px) {
  :root {
    --section-padding-x: 1.5rem;
    --section-padding-y: 8rem;
    --grid-gap: 1.5rem;
    --card-padding: 1.75rem;
    --fs-hero: 4rem;
    --fs-h2: 2.5rem;
    --container-max: 80rem;
  }

  /* Navigation Desktop - Inverser visibilité */
  .mf-nav-mobile {
    display: none !important;
  }

  .mf-nav-desktop {
    display: flex !important;
  }

  /* Burger caché */
  .mf-burger-menu {
    display: none;
  }

  /* Grille 3 colonnes */
  .mf-grid,
  .mf-section-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Services cards - Dernier item sur une colonne */
  .mf-cards-container>*:last-child:nth-child(odd) {
    grid-column: span 1;
  }

  /* Layout Bento complexe pour services */
  .mf-bento-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: var(--grid-gap);
  }

  .mf-bento-featured {
    grid-column: span 2;
  }

  .mf-bento-tall {
    grid-row: span 2;
  }

  /* Process en ligne */
  .mf-process-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
  }

  /* Testimonials 3 colonnes */
  .mf-testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
  }

  /* Dernier item centre si impair */
  .mf-testimonials-grid>*:last-child:nth-child(3n+1) {
    grid-column: 2;
  }

  /* Cards avec radius premium */
  .mf-card {
    border-radius: 1.5rem;
  }
}

/* ============================================
   GRAND DESKTOP (min-width: 1280px)
   ============================================ */
@media (min-width: 1280px) {
  :root {
    --section-padding-y: 10rem;
    --grid-gap: 2rem;
    --card-padding: 2rem;
    --fs-hero: 4.5rem;
    --fs-h2: 3rem;
  }

  /* Container centré avec max-width */
  .mf-container {
    max-width: var(--container-max);
    margin: 0 auto;
  }
}

/* ============================================
   OVERRIDE - Compatibilité avec classes Tailwind
   Forcer le comportement Mobile-First 
   ============================================ */

/* Fix pour éviter le débordement sur mobile */
@media (max-width: 639px) {

  /* Stats grid - Réduire la taille sur très petits écrans */
  .grid.grid-cols-4 {
    gap: 0.25rem;
  }

  .grid.grid-cols-4>div {
    padding: 0.375rem !important;
    min-width: 0;
    overflow: hidden;
  }

  .grid.grid-cols-4 p {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Réduire la taille du texte des labels stats */
  .grid.grid-cols-4 .text-\[7px\] {
    font-size: 6px !important;
    letter-spacing: 0.05em !important;
  }

  /* Service cards - Hauteur égale et pas de débordement */
  #services-bento .grid.grid-cols-2>a {
    min-width: 0;
    overflow: hidden;
  }

  #services-bento .grid.grid-cols-2>a h3 {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: 11px;
  }
}

/* Services Bento - Override des classes Tailwind */
#services-bento .grid.grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (min-width: 1024px) {
  #services-bento .grid.grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Value props grid */
.grid.grid-cols-2.lg\:grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .grid.grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Stats grid - Toujours 4 colonnes */
.grid.grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
}

@media (min-width: 640px) {
  .grid.grid-cols-4 {
    gap: 0.75rem;
  }
}

/* Process steps */
.grid.grid-cols-2.lg\:grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* ============================================
   NAVIGATION OVERRIDES - Mobile-First
   ============================================ */

/* Floating actions bubble - Caché par défaut (mobile) */
.floating-actions-bubble {
  display: none !important;
}

@media (min-width: 1024px) {
  .floating-actions-bubble {
    display: flex !important;
  }
}

/* Card nav container - Caché par défaut (mobile) */
.card-nav-container {
  display: none;
}

@media (min-width: 1024px) {
  .card-nav-container {
    display: block;
  }
}

/* Dock container - Visible par défaut (mobile) */
.dock-container {
  display: flex;
}

@media (min-width: 1024px) {
  .dock-container {
    display: none !important;
  }
}

/* ============================================
   TRANSITIONS - Fluides pour les breakpoints
   ============================================ */
.mf-grid,
.mf-section-grid,
.mf-cards-container,
.mf-card,
.mf-process-grid,
.mf-testimonials-grid {
  transition: gap 0.3s ease, grid-template-columns 0.3s ease;
}

.mf-card {
  transition: padding 0.3s ease, border-radius 0.3s ease, transform 0.3s ease;
}

/* ============================================
   UTILITIES - Classes utilitaires Mobile-First
   ============================================ */

/* Hide on mobile, show on desktop */
.mf-hide-mobile {
  display: none !important;
}

@media (min-width: 1024px) {
  .mf-hide-mobile {
    display: block !important;
  }

  .mf-hide-mobile.flex,
  .mf-hide-mobile[class*="flex"] {
    display: flex !important;
  }
}

/* Show on mobile, hide on desktop */
.mf-show-mobile {
  display: block;
}

@media (min-width: 1024px) {
  .mf-show-mobile {
    display: none !important;
  }
}

/* Full width on mobile */
.mf-full-mobile {
  width: 100%;
}

@media (min-width: 640px) {
  .mf-full-mobile {
    width: auto;
  }
}

/* Stack on mobile, row on desktop */
.mf-stack-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

@media (min-width: 640px) {
  .mf-stack-mobile {
    flex-direction: row;
  }
}

/* Text sizes responsive */
.mf-text-responsive {
  font-size: var(--fs-small);
}

@media (min-width: 640px) {
  .mf-text-responsive {
    font-size: var(--fs-body);
  }
}

@media (min-width: 1024px) {
  .mf-text-responsive {
    font-size: calc(var(--fs-body) * 1.1);
  }
}

/* ============================================
   GLOBAL PAGE FIXES - Apply to all pages
   ============================================ */

/* Global Mobile Overflow Prevention */
@media (max-width: 639px) {

  /* Empêcher le débordement horizontal sur tout le site */
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Containers - forcer largeur max */
  .container,
  .container-wide,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    max-width: 100%;
    padding-left: 1.5rem !important;
    /* Padding forcé comme demandé */
    padding-right: 1.5rem !important;
  }

  /* Toutes les grilles - gap réduit et pas de débordement */
  [class*="grid"] {
    gap: 0.5rem;
  }

  [class*="grid"]>* {
    min-width: 0;
    overflow: hidden;
  }

  /* Texte long - césure automatique */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* 1. TEXTES JUSTIFIÉS (Correction Demandée) */
  /* On cible les paragraphes et les descriptions de cartes, sauf s'ils sont centrés explicitement */
  p:not(.text-center):not(.text-left),
  .text-muted:not(.text-center):not(.text-left) {
    text-align: justify !important;
    hyphens: auto;
  }

  /* Override: Ne pas justifier les témoignages (trop courts, ça casse l'affichage) */
  #testimonials-grid p {
    text-align: left !important;
  }

  /* 2. BOITES (CONTAINERS) DÉCOLLÉS (Correction Demandée) */
  /* On ajoute une marge latérale aux cartes pour qu'elles "respirent" */
  .glass-card,
  .bento-card,
  [class*="bg-black/\\[0\\.015\\]"] {
    /* Pour le formulaire */
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    width: auto !important;
    /* Safe Area for iOS */
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
  }

  /* ============================================
     SAFETY RESET - Prevent Mobile Overflow
     ============================================ */
  html,
  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    /* Prevent iOS text zoom */
  }

  * {
    box-sizing: border-box;
  }

  /* Ensure images never overflow */
  img,
  video,
  canvas,
  svg,
  iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Prevent long words from breaking layout */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  li {
    overflow-wrap: break-word;
  }

  /* ========================================
     HERO SECTION - Centré horizontalement
     ======================================== */

  /* Hero section - tout centré */
  .hero-section-spacing,
  .hero-section-spacing * {
    text-align: center !important;
  }

  .hero-section-spacing h1,
  .hero-section-spacing h2,
  .hero-section-spacing p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-section-spacing .hero-buttons {
    justify-content: center !important;
    align-items: center !important;
  }

  /* ========================================
     Z-PATTERN - Autres sections à gauche
     ======================================== */

  /* Autres sections - alignement gauche (OVERRIDE pour le Justifié ci-dessus) */
  /* Les titres restent alignés à gauche ou centre selon leur classe, mais les P sont justifiés */
  section:not(.hero-section-spacing) h2,
  section:not(.hero-section-spacing) h3 {
    text-align: left !important;
  }

  /* Labels et spans décoratifs */
  section span[class*="uppercase"],
  section span[class*="tracking"] {
    text-align: left !important;
    display: block;
  }

  /* Service cards icon + title rows - garder alignement horizontal */
  .flex.items-center.gap-4,
  .flex.items-center.gap-3,
  [data-service] .flex.items-center,
  section>div .flex.items-center.gap-4 h3 {
    align-items: center !important;
    flex-direction: row !important;
  }

  /* Icon containers in service lists - fixed size */
  .flex.items-center.gap-4>.w-12,
  .flex.items-center.gap-4>div[class*="rounded"] {
    flex-shrink: 0 !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
  }

  /* Boutons - pleine largeur mais texte centré dans le bouton */
  section .btn-action,
  section a[class*="btn"],
  section button {
    text-align: center !important;
    /* Le texte DANS le bouton reste centré */
    width: 100%;
  }

  /* Team cards et service cards - garder centré les titres si voulu */
  .team-card,
  .bento-card .text-center {
    text-align: center !important;
  }
}



/* Bento card icons SVG - Taille UNIFORME */
.bento-card svg,
.bento-card i[data-lucide] {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex-shrink: 0 !important;
  stroke: #B48A3C !important;
  color: #B48A3C !important;
  fill: none !important;
}

/* Service cards icons (index.html) */
#services-bento .flex.items-center.justify-center,
.bento-card .flex.items-center.justify-center,
.glass-card .flex.items-center.justify-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Values/Features cards icons */
.value-card .flex.items-center.justify-center,
section .glass-card .flex.items-center.justify-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ============================================
   MOCKUP MOBILE LAYOUT - Match exact design
   ============================================ */

@media (max-width: 639px) {

  /* ========================================
     TROIS PILIERS (about.html) - 3 colonnes sur mobile
     ======================================== */

  /* Pillars grid only - Forcer 3 colonnes (about.html seulement) */
  .grid.grid-cols-1.sm\:grid-cols-3,
  .grid.grid-cols-1,
  #notre-difference .grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* Process grid (index.html) - Rester en 2x2 */
  .grid.grid-cols-2.lg\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Process cards - Centrer le contenu */
  .grid.grid-cols-2.lg\:grid-cols-4>div {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1rem !important;
  }

  .grid.grid-cols-2.lg\:grid-cols-4>div h3,
  .grid.grid-cols-2.lg\:grid-cols-4>div p {
    text-align: center !important;
  }

  /* Pillar cards - Très compactes */
  .grid.grid-cols-1.sm\:grid-cols-3>div,
  .grid.grid-cols-1>div,
  #notre-difference .grid>div {
    padding: 0.75rem 0.5rem !important;
    border-radius: 1rem !important;
    min-height: auto !important;
    text-align: center !important;
  }

  /* Pillar icons - Plus petits et centrés */
  .grid.grid-cols-2.lg\:grid-cols-4 .w-12,
  .grid.grid-cols-2.lg\:grid-cols-4 .w-14,
  .grid.grid-cols-2.lg\:grid-cols-4 .w-16,
  .grid.grid-cols-1.sm\:grid-cols-3 .w-12,
  .grid.grid-cols-1.sm\:grid-cols-3 .w-14,
  .grid.grid-cols-1 .w-12,
  .grid.grid-cols-1 .w-14 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .grid.grid-cols-2.lg\:grid-cols-4 .w-12 i,
  .grid.grid-cols-2.lg\:grid-cols-4 i[data-lucide],
  .grid.grid-cols-1.sm\:grid-cols-3 i[data-lucide],
  .grid.grid-cols-1 i[data-lucide] {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Pillar titles - Plus petits */
  .grid.grid-cols-2.lg\:grid-cols-4 h3,
  .grid.grid-cols-2.lg\:grid-cols-4 .font-bold,
  .grid.grid-cols-1.sm\:grid-cols-3 h3,
  .grid.grid-cols-1 h3 {
    font-size: 0.65rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.25rem !important;
  }

  /* Pillar descriptions - Très petites */
  .grid.grid-cols-2.lg\:grid-cols-4 p.text-sm,
  .grid.grid-cols-2.lg\:grid-cols-4 p.text-muted,
  .grid.grid-cols-1.sm\:grid-cols-3 p.text-sm,
  .grid.grid-cols-1 p.text-sm {
    font-size: 0.55rem !important;
    line-height: 1.3 !important;
  }

  /* ========================================
     TEAM CARDS - Grille 2x2
     ======================================== */

  /* Team grid - 2 colonnes sur mobile */
  .grid.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Team cards - Compactes */
  .team-card,
  .team-card .team-card-inner {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }

  /* Team avatars - Taille moyenne */
  .team-card img,
  .team-card .w-32 {
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Team names */
  .team-card h3 {
    font-size: 0.875rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* Team roles */
  .team-card p[class*="B48A3C"],
  .team-card .text-\[\#B48A3C\] {
    font-size: 0.6rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
  }

  /* Team descriptions */
  .team-card p.text-sm,
  .team-card .text-\[var\(--text-muted\)\] {
    font-size: 0.6rem !important;
    line-height: 1.4 !important;
  }

  /* ========================================
     SECTIONS - Espacement réduit
     ======================================== */

  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Hero section - Moins d'espace */
  .hero-section-spacing {
    padding-top: 4rem !important;
    min-height: auto !important;
  }

  /* Section headers - Plus compacts */
  section h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  section h2+p,
  section .text-muted {
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  /* ========================================
     SERVICE CARDS - Grille 2 colonnes
     ======================================== */

  #services-bento {
    gap: 0.1rem !important;
    /* Espacement minime (1.6px) */
  }

  #services-bento>a {
    padding: 0.55rem !important;
    border-radius: 1rem !important;
    min-height: auto !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    /* Espacement interne réduit */
  }

  /* Fix text alignment inside bento cards - Justified as requested */
  #services-bento>a p {
    text-align: justify !important;
    hyphens: manual !important;
  }

  /* FORCE FIXED LAYOUT & VISIBILITY (Correction "Bordel") */

  /* 1. Header (Icon + Number) must be row */
  #services-bento>a>div:first-child {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 0.15rem !important;
    /* Marge titre réduite */
    height: auto !important;
    flex-shrink: 0 !important;
  }

  /* 2. Force text visibility */
  #services-bento>a h3 {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1.125rem !important;
    /* text-lg */
    color: var(--text-main) !important;
    margin-bottom: 0.25rem !important;
    text-align: left !important;
    /* Titre à gauche */
  }

  #services-bento>a p {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 0.875rem !important;
    /* text-sm */
    color: var(--text-muted) !important;
  }

  #services-bento>a span {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Service card 3 - Pleine largeur */
  #services-bento>a.col-span-2 {
    grid-column: span 2 !important;
    min-height: 120px !important;
  }

  /* ========================================
     STATS ROW - Grille 2x2 lisible
     ======================================== */

  .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 colonnes au lieu de 4 */
    gap: 0.1rem !important;
  }

  .grid.grid-cols-4>div {
    padding: 0.75rem !important;
    border-radius: 0.75rem !important;
  }

  .grid.grid-cols-4 .text-base {
    font-size: 1.25rem !important;
    /* Plus grand */
    font-weight: 900 !important;
  }

  .grid.grid-cols-4 .text-\[7px\],
  .grid.grid-cols-4 p.uppercase {
    font-size: 0.6rem !important;
    letter-spacing: 0.05em !important;
  }

  /* ========================================
     IMAGES - Coins arrondis
     ======================================== */

  section img:not(.team-card img) {
    border-radius: 1rem !important;
  }

  /* ========================================
     CAROUSEL/SLIDER DOTS
     ======================================== */

  .carousel-dots,
  .swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }
}

/* Services grid (grid-cols-2 md:grid-cols-4 lg:grid-cols-6) */
.grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
  }
}

/* Services cards - Réduire la taille sur mobile */
@media (max-width: 767px) {
  .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6>div {
    padding: 0.75rem !important;
    min-height: 60px;
  }

  .grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6 p {
    font-size: 11px !important;
    line-height: 1.3;
    word-break: break-word;
  }
}

/* Clients grid (grid-cols-2 md:grid-cols-4) */
.grid.grid-cols-2.md\\:grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid.grid-cols-2.md\\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* ============================================
   ABOUT.HTML - Team Cards Fixes
   ============================================ */

/* Team grid & Process grid (md:grid-cols-2 lg:grid-cols-4) */
.grid.md\:grid-cols-2.lg\:grid-cols-4,
.grid.grid-cols-2.lg\:grid-cols-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem !important;
  /* Espacement serré (1.6px) */
}

@media (min-width: 768px) {

  .grid.md\:grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    /* Un peu plus d'espace sur desktop */
  }
}

@media (min-width: 1024px) {

  .grid.md\:grid-cols-2.lg\:grid-cols-4,
  .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Process cards mobile styling for tight layout */
@media (max-width: 767px) {
  .grid.grid-cols-2.lg\:grid-cols-4>div {
    padding: 0.55rem !important;
    /* Padding réduit comme le reste */
    border-radius: 1rem !important;
  }
}

/* Team cards mobile styling */
@media (max-width: 767px) {
  .team-card {
    max-width: 100%;
  }

  .team-card .team-card-inner {
    padding: 1.5rem !important;
  }

  .team-card img {
    width: 5rem !important;
    height: 5rem !important;
    margin-bottom: 1rem !important;
  }

  .team-card h3 {
    font-size: 1.25rem !important;
  }

  .team-card p[class*="B48A3C"] {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .team-card p.text-sm {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
}

/* ============================================
   CONTACT.HTML - Form Fixes
   ============================================ */

/* Form grid */
.grid.md\\:grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .grid.md\\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Form inputs mobile */
@media (max-width: 767px) {

  .form-input,
  input[type="text"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
    /* Prevent iOS zoom */
    padding: 0.75rem 1rem !important;
    border-radius: 0.75rem !important;
  }

  .form-label,
  label {
    font-size: 9px !important;
    margin-left: 0.5rem !important;
  }
}

/* ============================================
   CODER-MON-PROJET.HTML & CREER-MA-MARQUE.HTML
   ============================================ */

/* Service details grid */
.grid.md\\:grid-cols-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .grid.md\\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Cards de technologies */
@media (max-width: 767px) {
  .grid.md\\:grid-cols-3>div {
    padding: 1.25rem !important;
  }

  .grid.md\\:grid-cols-3 h3 {
    font-size: 1.25rem !important;
  }

  .grid.md\\:grid-cols-3 p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

/* Code blocks */
@media (max-width: 767px) {

  .code-block,
  [class*="code-"] {
    font-size: 0.7rem !important;
    padding: 1rem !important;
    overflow-x: auto;
  }
}

/* ============================================
   HERO SECTIONS - Mobile Optimization
   ============================================ */

@media (max-width: 639px) {

  /* Hero titles */
  .hero-section-spacing h1,
  section h1.text-6xl {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;
  }

  .hero-section-spacing .accent-font,
  section h1 .accent-font {
    font-size: 2rem !important;
  }

  /* Hero buttons - Empilage */
  .flex.flex-col.sm\\:flex-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100%;
  }

  .flex.flex-col.sm\\:flex-row>a,
  .flex.flex-col.sm\\:flex-row>button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================
   CTA SECTIONS - Mobile fixes
   ============================================ */

@media (max-width: 639px) {

  /* CTA titles */
  section h2.text-5xl {
    font-size: 1.75rem !important;
  }

  section h2.text-4xl {
    font-size: 1.5rem !important;
  }

  /* CTA buttons stack */
  .flex.gap-6.justify-center {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
  }

  .flex.gap-6.justify-center>a {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
}

/* ============================================
   LEGAL PAGES - Mentions & Privacy
   ============================================ */

@media (max-width: 639px) {

  /* Legal content */
  .space-y-12 {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  /* Legal headings */
  .space-y-12 h2 {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Legal lists */
  .space-y-12 ul {
    padding-left: 0.5rem !important;
  }

  .space-y-12 li {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
  }
}