/* ==========================================================================
   main.css — Styles globaux de MaxRefund Business
   Police : Manrope (Google Fonts)
   Palette officielle définie dans les variables CSS ci-dessous
   ========================================================================== */

/* --------------------------------------------------------------------------
   Importation de la police Manrope depuis Google Fonts
   On charge les graisses 400 (normal), 500 (medium), 600 (semi-gras), 700 (gras)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   Variables CSS — Palette de couleurs officielle MaxRefund Business
   Ces variables sont utilisées partout dans le site pour garantir la cohérence
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs principales */
  --couleur-fond-principal:   #192138; /* Bleu nuit profond — header, footer, sections foncées */
  --couleur-fond-secondaire:  #28304D; /* Bleu marine — cards, sections alternées */
  --couleur-accent:           #38BDF8; /* Bleu ciel vif — boutons CTA, liens, highlights */
  --couleur-fond-clair:       #E8E8E9; /* Gris très clair — sections claires, séparateurs */
  --couleur-blanc:            #FFFFFF; /* Blanc pur — texte sur fonds foncés */

  /* Couleurs de texte */
  --texte-sur-fond-fonce:     #FFFFFF; /* Texte blanc sur fonds bleu nuit */
  --texte-sur-fond-clair:     #192138; /* Texte bleu nuit sur fonds clairs */
  --texte-secondaire:         #A0AEC0; /* Texte grisé — sous-titres, descriptions légères */
  --texte-accent:             #38BDF8; /* Liens et textes en couleur d'accent */

  /* Typographie */
  --police:                   'Manrope', sans-serif;
  --taille-base:              16px;
  --taille-xs:                0.75rem;   /* 12px */
  --taille-sm:                0.875rem;  /* 14px */
  --taille-md:                1rem;      /* 16px */
  --taille-lg:                1.125rem;  /* 18px */
  --taille-xl:                1.25rem;   /* 20px */
  --taille-2xl:               1.5rem;    /* 24px */
  --taille-3xl:               1.875rem;  /* 30px */
  --taille-4xl:               2.25rem;   /* 36px */
  --taille-5xl:               3rem;      /* 48px */
  --taille-6xl:               3.75rem;   /* 60px */

  /* Espacements */
  --espace-xs:    0.25rem;   /* 4px */
  --espace-sm:    0.5rem;    /* 8px */
  --espace-md:    1rem;      /* 16px */
  --espace-lg:    1.5rem;    /* 24px */
  --espace-xl:    2rem;      /* 32px */
  --espace-2xl:   3rem;      /* 48px */
  --espace-3xl:   4rem;      /* 64px */
  --espace-4xl:   6rem;      /* 96px */

  /* Largeur maximale du contenu */
  --largeur-max:  1200px;

  /* Rayons de bordure */
  --rayon-sm:     4px;
  --rayon-md:     8px;
  --rayon-lg:     12px;
  --rayon-xl:     16px;
  --rayon-pilule: 999px;

  /* Ombres */
  --ombre-sm:   0 1px 3px rgba(0, 0, 0, 0.2);
  --ombre-md:   0 4px 12px rgba(0, 0, 0, 0.25);
  --ombre-lg:   0 8px 30px rgba(0, 0, 0, 0.3);
  --ombre-accent: 0 4px 20px rgba(56, 189, 248, 0.3);

  /* Transitions */
  --transition-rapide:  0.15s ease;
  --transition-normal:  0.25s ease;
  --transition-lente:   0.4s ease;

  /* Hauteur de la navigation */
  --hauteur-nav: 72px;
}

/* --------------------------------------------------------------------------
   Reset — Supprime les styles par défaut des navigateurs
   Cela garantit un rendu identique sur tous les navigateurs
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Styles de base — HTML et Body
   -------------------------------------------------------------------------- */
html {
  font-size: var(--taille-base);
  scroll-behavior: smooth; /* Défilement fluide lors des ancres */
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* Empêche le scroll horizontal sur tout le site */
}

body {
  font-family: var(--police);
  font-size: var(--taille-md);
  font-weight: 400;
  line-height: 1.6;
  color: var(--texte-sur-fond-clair);
  background-color: var(--couleur-fond-principal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;        /* Empêche le scroll horizontal accidentel */
  overflow-wrap: break-word; /* Coupe les mots trop longs sur petit écran */
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Typographie — Titres H1 à H6
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--police);
  font-weight: 700;
  line-height: 1.2;
  color: var(--texte-sur-fond-fonce);
}

/* H1 — Un seul par page, jamais dans du JavaScript */
h1 {
  font-size: clamp(var(--taille-3xl), 5vw, var(--taille-6xl));
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(var(--taille-2xl), 3.5vw, var(--taille-5xl));
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(var(--taille-xl), 2.5vw, var(--taille-3xl));
  font-weight: 700;
}

h4 {
  font-size: var(--taille-xl);
  font-weight: 600;
}

h5 {
  font-size: var(--taille-lg);
  font-weight: 600;
}

h6 {
  font-size: var(--taille-md);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Typographie — Paragraphes et texte courant
   -------------------------------------------------------------------------- */
p {
  margin-bottom: var(--espace-md);
  color: var(--texte-sur-fond-fonce);
  line-height: 1.7;
}

p:last-child {
  margin-bottom: 0;
}

/* Texte plus grand pour les introductions de sections */
.texte-intro {
  font-size: var(--taille-lg);
  line-height: 1.8;
  color: var(--texte-secondaire);
}

/* --------------------------------------------------------------------------
   Liens
   -------------------------------------------------------------------------- */
a {
  color: var(--couleur-accent);
  text-decoration: none;
  transition: color var(--transition-rapide);
}

a:hover {
  /* DÉFAUT SÉCURISÉ : bleu nuit, visible sur fond blanc ET foncé.
     Ne jamais remettre var(--couleur-blanc) ici — invisible sur fond blanc. */
  color: var(--couleur-fond-principal);
}

/* Sections foncées : survol blanc autorisé car le fond est noir/marine */
.section-fonce a:hover,
.hero a:hover {
  color: var(--couleur-blanc);
}

/* --------------------------------------------------------------------------
   Listes
   -------------------------------------------------------------------------- */
ul, ol {
  padding-left: var(--espace-xl);
}

li {
  margin-bottom: var(--espace-xs);
  color: var(--texte-sur-fond-fonce);
}

/* Liste sans style (pour la navigation, les cartes, etc.) */
.liste-sans-style {
  list-style: none;
  padding-left: 0;
}

/* Liste avec coches colorées */
.liste-coches {
  list-style: none;
  padding-left: 0;
}

.liste-coches li {
  padding-left: 1.75rem;
  position: relative;
  margin-bottom: var(--espace-sm);
}

.liste-coches li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--couleur-accent);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Images
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Boutons — Styles principaux
   -------------------------------------------------------------------------- */

/* Bouton de base — styles partagés */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-sm);
  padding: 0.75rem 1.75rem;
  min-height: 44px;
  font-family: var(--police);
  font-size: var(--taille-md);
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--rayon-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-normal),
              border-color var(--transition-normal),
              color var(--transition-normal),
              box-shadow var(--transition-normal),
              transform var(--transition-normal);
  white-space: nowrap;
}

/* Bouton CTA principal — bleu ciel sur fond transparent */
.btn-principal {
  background-color: var(--couleur-accent);
  color: var(--couleur-fond-principal);
  border-color: var(--couleur-accent);
  box-shadow: var(--ombre-accent);
}

.btn-principal:hover {
  background-color: #60CEFA; /* Version légèrement plus claire au survol */
  border-color: #60CEFA;
  color: var(--couleur-fond-principal);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(56, 189, 248, 0.45);
}

/* Bouton secondaire — contour blanc (sur fonds foncés) */
.btn-secondaire {
  background-color: transparent;
  color: var(--couleur-blanc);
  border-color: var(--couleur-blanc);
}

.btn-secondaire:hover {
  background-color: var(--couleur-blanc);
  color: var(--couleur-fond-principal);
  transform: translateY(-2px);
}

/* Bouton secondaire sur fonds blancs — contour foncé */
.section-secondaire .btn-secondaire {
  color: var(--couleur-fond-principal);
  border-color: var(--couleur-fond-principal);
}

.section-secondaire .btn-secondaire:hover {
  background-color: var(--couleur-fond-principal);
  color: var(--couleur-blanc);
}

/* Bouton contour accent */
.btn-contour {
  background-color: transparent;
  color: var(--couleur-accent);
  border-color: var(--couleur-accent);
}

.btn-contour:hover {
  background-color: var(--couleur-accent);
  color: var(--couleur-fond-principal);
  transform: translateY(-2px);
}

/* Tailles de boutons */
.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: var(--taille-sm);
}

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: var(--taille-lg);
  border-radius: var(--rayon-lg);
}

/* --------------------------------------------------------------------------
   Mise en page — Conteneur principal
   -------------------------------------------------------------------------- */

/* Conteneur centré avec largeur maximale */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--espace-xl);
  padding-right: var(--espace-xl);
}

/* Conteneur étroit (pour les textes, les formulaires) */
.conteneur-etroit {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--espace-xl);
  padding-right: var(--espace-xl);
}

/* --------------------------------------------------------------------------
   Sections — Espacements et fonds alternés
   -------------------------------------------------------------------------- */

/* Section générique */
.section {
  padding-top: var(--espace-4xl);
  padding-bottom: var(--espace-4xl);
}

.section-sm {
  padding-top: var(--espace-3xl);
  padding-bottom: var(--espace-3xl);
}

/* Section sur fond foncé (bleu nuit) */
.section-fonce {
  background-color: var(--couleur-fond-principal);
}

/* Section sur fond secondaire — fond blanc (sections alternées claires) */
.section-secondaire {
  background-color: #FFFFFF;
}

/* ── Section blanche : TOUJOURS définir explicitement les couleurs ──────────
   Règle absolue : toute section-secondaire doit avoir ses propres couleurs.
   Ne jamais supposer qu'un texte sera foncé automatiquement sur fond blanc.
   ──────────────────────────────────────────────────────────────────────── */
.section-secondaire h1,
.section-secondaire h2,
.section-secondaire h3,
.section-secondaire h4 {
  color: var(--couleur-fond-principal); /* Bleu nuit — contraste fort sur blanc */
}

.section-secondaire p,
.section-secondaire li {
  color: #4A5568; /* Gris foncé — lisible sur blanc */
}

.section-secondaire strong {
  color: var(--couleur-fond-principal); /* Gras = emphase → bleu nuit sur blanc */
}

.section-secondaire a {
  color: var(--couleur-accent); /* Bleu ciel — lisible sur fond blanc */
}

.section-secondaire a:hover {
  color: var(--couleur-fond-principal); /* Survol → bleu nuit sur fond blanc */
}

/* IMPORTANT : Les boutons dans les sections blanches gardent leur couleur propre.
   La règle a{color:accent} ci-dessus écrase le texte blanc des .btn-principal (texte = fond = invisible).
   Ces overrides rétablissent le blanc sur fond bleu pour les boutons CTA. */
.section-secondaire .btn-principal { color: var(--couleur-blanc); }
.section-secondaire .btn-principal:hover { color: var(--couleur-blanc); }

.section-secondaire .texte-intro {
  color: #4A5568;
}

.section-secondaire .en-tete-section p {
  color: #64748B; /* Gris moyen — pour les sous-titres de section */
}

/* Cartes dans sections blanches — elles gardent leur fond foncé (#28304D),
   donc leurs textes doivent rester blancs même si la section est blanche */
.section-secondaire .carte h3,
.section-secondaire .carte h4 {
  color: var(--couleur-blanc);
}

.section-secondaire .carte p {
  color: var(--texte-secondaire); /* #A0AEC0 — lisible sur fond foncé #28304D */
}

/* SVG icons inside industry cards — override any color/fill inheritance from <a> ancestor */
.section-secondaire .carte svg path,
.section-secondaire .carte svg circle,
.section-secondaire .carte svg rect,
.section-secondaire .carte svg polygon {
  fill: #ffffff;
}

/* Cartes statistiques sur fond blanc — la version transparent rgba est invisible sur blanc */
.section-secondaire .stat-carte {
  background-color: #F0F4F8;
  border-color: #D1D9E0;
}

.section-secondaire .stat-carte .stat-label {
  color: #4A5568;
}



/* En-tête de section — titre + sous-titre centrés */
.en-tete-section {
  text-align: center;
  margin-bottom: var(--espace-3xl);
}

.en-tete-section h2 {
  margin-bottom: var(--espace-md);
}

.en-tete-section p {
  font-size: var(--taille-lg);
  color: var(--texte-secondaire);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Badge au-dessus des titres de section */
.badge-section {
  display: inline-block;
  background-color: rgba(56, 189, 248, 0.15);
  color: var(--couleur-accent);
  font-size: var(--taille-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: var(--rayon-pilule);
  margin-bottom: var(--espace-md);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* --------------------------------------------------------------------------
   Grille — Système de colonnes responsive
   -------------------------------------------------------------------------- */
.grille {
  display: grid;
  gap: var(--espace-xl);
}

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

/* --------------------------------------------------------------------------
   Cartes — Blocs de contenu réutilisables
   -------------------------------------------------------------------------- */
.carte {
  background-color: var(--couleur-fond-secondaire);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--rayon-xl);
  padding: var(--espace-xl);
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal),
              transform var(--transition-normal);
}

.carte:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: var(--ombre-lg);
}

/* Icône dans une carte */
.carte-icone {
  width: 52px;
  height: 52px;
  background-color: rgba(56, 189, 248, 0.12);
  border-radius: var(--rayon-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espace-lg);
  font-size: 1.5rem;
}

/* SVG icon wrapper pour cartes avec grande icône standalone */
.carte-icone-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: rgba(56, 189, 248, 0.12);
  border-radius: var(--rayon-lg);
  margin-bottom: var(--espace-lg);
  color: var(--couleur-accent);
}

.carte-icone-svg svg {
  width: 28px;
  height: 28px;
  stroke: var(--couleur-accent);
}

.carte h3 {
  margin-bottom: var(--espace-sm);
  font-size: var(--taille-xl);
}

.carte p {
  color: var(--texte-secondaire);
  font-size: var(--taille-md);
}

/* --------------------------------------------------------------------------
   Section Héro — Partie principale en haut de page
   -------------------------------------------------------------------------- */
.hero {
  background-color: var(--couleur-fond-principal);
  padding-top: calc(var(--hauteur-nav) + var(--espace-4xl));
  padding-bottom: var(--espace-4xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Dégradé subtil en arrière-plan du héro */
.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero h1 {
  margin-bottom: var(--espace-lg);
  position: relative;
}

/* Mot mis en valeur dans le H1 (couleur accent) */
.hero h1 span,
h1 span.accent,
h2 span.accent {
  color: var(--couleur-accent);
}

.hero p {
  font-size: var(--taille-lg);
  color: var(--texte-secondaire);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--espace-xl);
}

/* Groupe de boutons côte à côte */
.groupe-boutons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-md);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.champ-groupe {
  margin-bottom: var(--espace-lg);
}

label {
  display: block;
  font-size: var(--taille-sm);
  font-weight: 600;
  color: var(--texte-sur-fond-fonce);
  margin-bottom: var(--espace-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

input,
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--police);
  font-size: var(--taille-md);
  background-color: var(--couleur-fond-secondaire);
  color: var(--texte-sur-fond-fonce);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--rayon-md);
  transition: border-color var(--transition-rapide), box-shadow var(--transition-rapide);
  outline: none;
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--couleur-accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

/* Flèche personnalisée pour les <select> (appearance:none supprime la native) */
select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23A0AEC0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Séparateur horizontal
   -------------------------------------------------------------------------- */
hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: var(--espace-2xl) 0;
}

/* --------------------------------------------------------------------------
   Utilitaires — Classes d'aide rapide
   -------------------------------------------------------------------------- */

/* Alignement du texte */
.texte-centre  { text-align: center; }
.texte-gauche  { text-align: left; }
.texte-droite  { text-align: right; }

/* Couleurs de texte */
.texte-accent    { color: var(--couleur-accent); }
.texte-blanc     { color: var(--couleur-blanc); }
.texte-secondaire { color: var(--texte-secondaire); }
.texte-fonce     { color: var(--texte-sur-fond-clair); }

/* Marges et espacements */
.mb-0  { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--espace-sm); }
.mb-md { margin-bottom: var(--espace-md); }
.mb-lg { margin-bottom: var(--espace-lg); }
.mb-xl { margin-bottom: var(--espace-xl); }

.mt-0  { margin-top: 0; }
.mt-sm { margin-top: var(--espace-sm); }
.mt-md { margin-top: var(--espace-md); }
.mt-lg { margin-top: var(--espace-lg); }
.mt-xl { margin-top: var(--espace-xl); }

/* Affichage */
.cache          { display: none; }
.flex           { display: flex; }
.flex-centre    { display: flex; align-items: center; justify-content: center; }
.flex-entre     { display: flex; align-items: center; justify-content: space-between; }

/* Largeur pleine */
.pleine-largeur { width: 100%; }

/* --------------------------------------------------------------------------
   Fil d'Ariane (Breadcrumb) — Requis sur toutes les pages sauf la homepage
   -------------------------------------------------------------------------- */
.fil-ariane {
  padding: var(--espace-md) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fil-ariane ol {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--taille-sm);
  flex-wrap: wrap;
}

.fil-ariane li {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  color: var(--texte-secondaire);
  margin-bottom: 0;
}

.fil-ariane li:not(:last-child)::after {
  content: '/';
  color: rgba(255, 255, 255, 0.2);
}

.fil-ariane a {
  color: var(--texte-secondaire);
  transition: color var(--transition-rapide);
}

.fil-ariane a:hover {
  color: var(--couleur-accent);
}

.fil-ariane li:last-child {
  color: var(--couleur-blanc);
}

/* --------------------------------------------------------------------------
   Bannière CTA — Section d'appel à l'action en bas de page
   -------------------------------------------------------------------------- */
.banniere-cta {
  background: linear-gradient(135deg, var(--couleur-fond-secondaire) 0%, #1e2a45 100%);
  border-top: 1px solid rgba(56, 189, 248, 0.2);
  border-bottom: 1px solid rgba(56, 189, 248, 0.2);
  padding: var(--espace-4xl) 0;
  text-align: center;
}

.banniere-cta h2 {
  margin-bottom: var(--espace-md);
}

.banniere-cta p {
  color: var(--texte-secondaire);
  font-size: var(--taille-lg);
  margin-bottom: var(--espace-xl);
}

/* --------------------------------------------------------------------------
   Responsive — Tablette (max 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --espace-4xl: 5rem;
    --espace-3xl: 3.5rem;
  }

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

/* --------------------------------------------------------------------------
   Responsive — Mobile (max 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --espace-4xl: 3.5rem;
    --espace-3xl: 2.5rem;
    --espace-2xl: 2rem;
  }

  .conteneur,
  .conteneur-etroit {
    padding-left: var(--espace-md);
    padding-right: var(--espace-md);
  }

  .grille-4,
  .grille-3,
  .grille-2 {
    grid-template-columns: 1fr;
  }

  /* Force aussi les grilles définies en style inline (repeat(3,1fr) etc.) à passer en 1 colonne */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .groupe-boutons {
    flex-direction: column;
    align-items: center;
  }

  .groupe-boutons .btn {
    width: auto;
    min-width: unset;    /* Supprime la largeur minimale qui causait le débordement */
    max-width: 100%;     /* Ne dépasse jamais la largeur du conteneur */
    white-space: normal; /* Permet au texte de passer à la ligne si nécessaire */
    justify-content: center;
  }

  .en-tete-section {
    margin-bottom: var(--espace-2xl);
  }

  /* Hero — plus d'espace vertical entre chaque élément sur mobile */
  .hero {
    padding-top: calc(var(--hauteur-nav) + var(--espace-3xl));
    padding-bottom: var(--espace-3xl);
  }

  .hero h1 {
    margin-bottom: var(--espace-xl); /* 2rem — était 1.5rem (trop serré) */
  }

  /* Badge — un peu plus d'espace sous lui avant le H1 */
  .hero .badge-section {
    margin-bottom: var(--espace-lg);
  }

  /* Réduction de la taille du H1 sur très petit écran pour moins de lignes */
  h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
}

/* --------------------------------------------------------------------------
   Responsive — Petit mobile (max 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --espace-4xl: 3rem;
  }
}

/* --------------------------------------------------------------------------
   Animations d'entrée — Apparition fluide au chargement de page
   Appliquées automatiquement aux enfants directs de .hero .conteneur
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .conteneur > * {
  animation: fadeInUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero .conteneur > *:nth-child(1) { animation-delay: 0.05s; }
.hero .conteneur > *:nth-child(2) { animation-delay: 0.15s; }
.hero .conteneur > *:nth-child(3) { animation-delay: 0.25s; }
.hero .conteneur > *:nth-child(4) { animation-delay: 0.35s; }
.hero .conteneur > *:nth-child(5) { animation-delay: 0.45s; }

/* Respect de la préférence de réduction de mouvement (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  .hero .conteneur > * {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Blog articles — Renforts spécifiques pour .article-corps
   Les règles globales .section-secondaire couvrent déjà h2/p/li/a/strong.
   Ces overrides ciblent les cas où les articles définissent un <style> inline
   avec color:#fff (conçu pour fond foncé) — la spécificité (0,2,1) écrase (0,1,1).
   LEÇON APPRISE : ne jamais hardcoder color:#fff en inline style dans les articles.
   Toujours utiliser les variables CSS ou laisser la cascade gérer.
   -------------------------------------------------------------------------- */
.section-secondaire .article-corps h2     { color: var(--couleur-fond-principal); }
.section-secondaire .article-corps h3     { color: #1D4ED8; }
.section-secondaire .article-corps p      { color: #4A5568; }
.section-secondaire .article-corps li     { color: #4A5568; }
.section-secondaire .article-corps strong { color: var(--couleur-fond-principal); }
.section-secondaire .article-corps a      { color: var(--couleur-accent); }
.section-secondaire .article-corps a:hover{ color: var(--couleur-fond-principal); }

/* CTA buttons inside article-corps: override the (0,2,1) a{color:accent} rule above.
   Specificity (0,3,0) beats (0,2,1) — text stays dark navy on blue button background.
   Without this, btn-principal text = #38BDF8 = same as bg = invisible in default state. */
.section-secondaire .article-corps .btn-principal,
.section-secondaire .article-corps .btn-principal:hover,
.section-secondaire .article-corps .btn-principal:focus {
  color: var(--couleur-fond-principal);
}

/* --------------------------------------------------------------------------
   Blog dark boxes — Fix spécificité (0,3,1) > (0,2,1)
   Restaure le texte clair à l'intérieur des encadrés sombres des articles.
   Sans ces règles, le rule (0,2,1) ".section-secondaire .article-corps p"
   mettrait du texte gris foncé (#4A5568) sur fond marine (#28304D) — ratio ~1.8:1.
   -------------------------------------------------------------------------- */
.section-secondaire .article-corps .article-encadre,
.section-secondaire .article-corps .article-cta,
.section-secondaire .article-corps .rate-box,
.section-secondaire .article-corps .factor-card,
.section-secondaire .article-corps .comparatif-carte,
.section-secondaire .article-corps .table-remittance,
.section-secondaire .article-corps .table-gst           { color: var(--texte-secondaire); }

.section-secondaire .article-corps .article-encadre p,
.section-secondaire .article-corps .article-encadre li  { color: var(--texte-secondaire); }

.section-secondaire .article-corps .article-encadre strong,
.section-secondaire .article-corps .article-encadre h3,
.section-secondaire .article-corps .article-encadre h4  { color: #FFFFFF; }

.section-secondaire .article-corps .article-cta p,
.section-secondaire .article-corps .article-cta li      { color: var(--texte-secondaire); }

.section-secondaire .article-corps .article-cta h3,
.section-secondaire .article-corps .article-cta strong  { color: #FFFFFF; }

.section-secondaire .article-corps .rate-box p,
.section-secondaire .article-corps .rate-box li,
.section-secondaire .article-corps .rate-box strong,
.section-secondaire .article-corps .rate-box h3         { color: #FFFFFF; }

.section-secondaire .article-corps .factor-card p,
.section-secondaire .article-corps .factor-card li      { color: var(--texte-secondaire); }

.section-secondaire .article-corps .factor-card strong,
.section-secondaire .article-corps .factor-card h3      { color: #FFFFFF; }

.section-secondaire .article-corps .comparatif-carte p,
.section-secondaire .article-corps .comparatif-carte li { color: var(--texte-secondaire); }

.section-secondaire .article-corps .comparatif-carte strong,
.section-secondaire .article-corps .comparatif-carte h3 { color: #FFFFFF; }

.section-secondaire .article-corps .table-remittance th,
.section-secondaire .article-corps .table-gst th        { color: #FFFFFF; }

.section-secondaire .article-corps .table-remittance td,
.section-secondaire .article-corps .table-gst td        { color: var(--texte-secondaire); }

/* Espacement top des articles de blog (évite le collage sous le hero) */
.article-conteneur.article-corps { padding-top: var(--espace-2xl); }

/* ==========================================================================
   ACCESSIBILITÉ — UX Guidelines (appliquées via ui-ux-pro-max)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip-to-content — lien d'évitement pour navigation au clavier
   Remplace le style inline + onfocus/onblur JavaScript
   -------------------------------------------------------------------------- */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--espace-md);
  background: var(--couleur-accent);
  color: var(--couleur-fond-principal);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--rayon-md) var(--rayon-md);
  font-weight: 700;
  z-index: 1100; /* Au-dessus de la nav (1000) et du hamburger (1001) */
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-to-content:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   Focus-visible — anneaux de focus visibles pour navigation au clavier
   Guideline #28 (High) : tous les éléments interactifs doivent avoir un
   indicateur de focus visible. On utilise :focus-visible (pas :focus) pour
   ne pas afficher l'anneau lors d'un clic souris.
   -------------------------------------------------------------------------- */

/* Reset : supprimer l'outline par défaut du navigateur (on le remplace) */
*:focus {
  outline: none;
}

/* Focus visible : anneau bleu accent 3px pour tous les éléments interactifs */
*:focus-visible {
  outline: 3px solid var(--couleur-accent);
  outline-offset: 3px;
  border-radius: var(--rayon-sm);
}

/* Boutons : anneau avec ombre */
.btn:focus-visible {
  outline: 3px solid var(--couleur-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.2);
}

/* Liens nav : anneau arrondi */
.nav-lien:focus-visible,
.nav-contact-lien:focus-visible,
.dropdown-lien:focus-visible,
.footer-lien:focus-visible,
.footer-lien-legale:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 2px;
  border-radius: var(--rayon-sm);
}

/* --------------------------------------------------------------------------
   Active states — retour visuel immédiat lors d'un clic/appui
   Guideline #30 (Medium) : indiquer visuellement l'état "appuyé"
   -------------------------------------------------------------------------- */
.btn:active {
  transform: scale(0.97);
  box-shadow: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* --------------------------------------------------------------------------
   Cursor pointer — cartes cliquables
   Guideline (Medium) : ajouter cursor:pointer à tous les éléments cliquables
   -------------------------------------------------------------------------- */
a.carte,
.carte a,
.blog-carte,
.inclus-carte,
.footer-lien,
.nav-logo {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Prefers-reduced-motion — désactiver TOUTES les animations et transitions
   Guideline #9 (High) : respecter la préférence de réduction de mouvement
   Extension de la règle hero existante pour couvrir tout le site
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Blog index — liens "Read →" sur fond blanc de carte
   LEÇON APPRISE : les cartes sur fond blanc héritaient du a:hover global (blanc → invisible).
   Maintenant le global est sécurisé, mais on garde ces règles explicites par sécurité. */
.blog-carte a:hover { color: var(--couleur-fond-principal); }
.blog-lire-plus { color: var(--couleur-accent); transition: gap 0.2s, color 0.2s; }
.blog-lire-plus:hover { color: var(--couleur-fond-principal); }

/* ==========================================================================
   CLASSES ALIAS — FR industries pages (générées avec noms différents)
   Ces classes mappent vers les comportements des classes globales existantes.
   ========================================================================== */

/* .hero-boutons → même layout que .groupe-boutons */
.hero-boutons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-md);
  flex-wrap: wrap;
}

/* .hero-sous-titre → même style que .texte-intro */
.hero-sous-titre {
  font-size: var(--taille-lg);
  line-height: 1.8;
  color: var(--texte-secondaire);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--espace-xl);
}

/* .etiquette-section → même style que .badge-section */
.etiquette-section {
  display: inline-block;
  background-color: rgba(56, 189, 248, 0.15);
  color: var(--couleur-accent);
  font-size: var(--taille-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: var(--rayon-pilule);
  margin-bottom: var(--espace-md);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* .lien-carte → lien accent avec flèche dans les cartes service */
.lien-carte {
  display: inline-block;
  margin-top: var(--espace-md);
  color: var(--couleur-accent);
  font-size: var(--taille-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-rapide), gap var(--transition-rapide);
}

.lien-carte:hover {
  color: var(--couleur-blanc);
}

/* .cta-boutons → même layout que .groupe-boutons */
.cta-boutons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-md);
  flex-wrap: wrap;
  margin-top: var(--espace-xl);
}

/* CTA section text colors (already has section-fonce class so bg is handled) */
.cta-section h2 { color: var(--couleur-blanc); }
.cta-section p  { color: var(--texte-secondaire); }

/* Mobile: stack hero-boutons and cta-boutons like groupe-boutons */
@media (max-width: 768px) {
  .hero-boutons,
  .cta-boutons {
    flex-direction: column;
    align-items: center;
  }

  .hero-boutons .btn,
  .cta-boutons .btn {
    width: auto;
    max-width: 100%;
    white-space: normal;
    justify-content: center;
  }
}

/* ── FR Industries: breadcrumb sans numéros ────────────────────────────── */
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.breadcrumb li          { color: var(--texte-secondaire); font-size: var(--taille-sm); }
.breadcrumb a           { color: var(--texte-secondaire); font-size: var(--taille-sm); text-decoration: none; }
.breadcrumb a:hover     { color: var(--couleur-accent); }
.breadcrumb li[aria-current="page"] { color: var(--couleur-accent); font-weight: 600; }

/* ── grille-N utilisée seule (sans .grille parent) ────────────────────── */
.grille-2, .grille-3, .grille-4 { display: grid; gap: var(--espace-xl); }