/* MBM Travel Gate - Style System V1.1 */

/* Police Montserrat auto-hébergée (licence SIL OFL 1.1, voir assets/fonts/OFL.txt).
   Aucune requête vers Google Fonts : graisses 400 à 800 et 600 italique, sous-ensemble latin. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/montserrat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/montserrat-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url('../assets/fonts/montserrat-latin-600-italic.woff2') format('woff2'); }

:root {
  /* Color Palette */
  --primary: #0B2A4A;          /* Midnight Blue */
  --primary-light: #163f68;
  --primary-rgb: 11, 42, 74;
  --secondary: #4AA6EB;        /* Glacier Blue */
  --secondary-rgb: 74, 166, 235;
  --secondary-text: #1C6BA8;   /* Bleu glacier foncé pour le texte et les liens sur fond clair (5,6:1 sur blanc, 5,2:1 sur #F2F5F9) */
  --tertiary: #FFC300;         /* Gold Accent */
  --tertiary-rgb: 255, 195, 0;
  --neutral-bg: #F2F5F9;       /* Gray Interface */
  --white: #FFFFFF;
  --onyx: #1E1E1E;             /* Body text dark */
  --slate: #4A5568;            /* Body text light */
  --slate-muted: #5F6B7A;      /* Texte secondaire atténué (5,4:1 sur blanc) */
  --deep-blue: #033B9C;
  --argent: #C0C5CE;
  --accent-light: #EBF4FF;
  --green: #27AE60;
  --green-text: #1A7F47;       /* Vert pour du texte sur fond clair (5:1 sur blanc) */
  --red: #C0392B;
  
  /* Typography Variables */
  --font-primary: 'Montserrat', sans-serif;
  
  /* Spacing (8px grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-xxl: 80px;
  
  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s ease; /* plafond des transitions d'interface : 480 ms */
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(11, 42, 74, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 42, 74, 0.08);
  --shadow-lg: 0 8px 24px rgba(11, 42, 74, 0.12);
  --shadow-premium: 0 16px 32px rgba(11, 42, 74, 0.06);

  /* Frise du parcours (accueil) */
  --journey-track: rgba(11, 42, 74, 0.12);      /* trait de fond, bleu nuit très atténué */
  --journey-ring: rgba(11, 42, 74, 0.22);       /* contour des étapes avant leur allumage */
  --shadow-journey: 0 14px 30px rgba(11, 42, 74, 0.13), 0 2px 6px rgba(11, 42, 74, 0.06);
  --ease-journey: cubic-bezier(0.22, 0.61, 0.36, 1); /* décélération douce, sans rebond */

  /* Échelle typographique (audit du 19/10/2026) : source unique des tailles de titres et de textes.
     Les paliers d'écran redéfinissent ces valeurs juste en dessous ; les classes les lisent. */
  --fs-display: 52px;   /* h1 de l'accueil */
  --fs-h1: 44px;        /* h1 des pages intérieures (.hero-page-title) */
  --fs-h2: 32px;        /* titres de section (.headline-md) */
  --fs-h3: 24px;        /* sous-titres (.headline-sm) */
  --fs-title: 20px;     /* titres de carte */
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 13px;

  /* Mise en page */
  --measure: 34em;              /* longueur de ligne : environ 72 caractères en Montserrat */
  --section-y: var(--space-xl); /* marge haute et basse des sections */
  --target-min: 44px;           /* cible tactile minimale */
}

@media (max-width: 992px) {
  :root { --fs-display: 40px; --fs-h1: 34px; --fs-h2: 28px; }
}
@media (max-width: 768px) {
  :root { --fs-display: 32px; --fs-h2: 24px; --fs-h3: 20px; --fs-title: 18px; }
}
@media (max-width: 576px) {
  :root { --fs-display: 28px; --fs-h1: 28px; --section-y: 32px; }
}

/* --- Base Resets --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* Défilement doux activé seulement après le chargement (html.is-ready, js/main.js) :
     un défilement doux vers l'ancre de l'URL, interrompu par un changement de mise en page
     (polices, contenu injecté), laissait la page trop haut. */
  scroll-behavior: auto;
}

body {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--onyx);
  background-color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary);
}

.display-lg {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.headline-md {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
}

.headline-sm {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
}

.body-lg {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate);
}

.body-md {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--slate);
}

.label-bold {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.slogan-italic {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  font-style: italic;
  color: var(--secondary);
}

/* --- Layout Grid --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.grid {
  display: grid;
  gap: 20px;
}

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

/* Tailles des titres : portées par les tokens --fs-* (paliers en tête de fichier) */
@media (max-width: 992px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Grilles de cartes : deux colonnes jusqu'à 641 px (sur tablette, une colonne donnait des cartes
   de 680 px de large et des lignes de 95 caractères) ; une colonne en dessous */
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .slogan-italic { font-size: 18px; }
}
@media (max-width: 640px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.section-lg {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

.bg-light {
  background-color: var(--neutral-bg);
}

.bg-dark {
  background-color: var(--primary);
  color: var(--white);
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 {
  color: var(--white);
}

/* --- Navigation Header --- */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.header-nav.scrolled {
  background-color: var(--white);
  box-shadow: var(--shadow-md);
  padding: 10px 0;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  max-width: 1440px; /* Increased from 1340px to give more breathing room on desktop */
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.logo svg {
  width: 32px;
  height: 32px;
  fill: var(--secondary);
  transition: var(--transition-normal);
}

.logo:hover svg {
  transform: rotate(15deg);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  color: var(--slate);
  transition: var(--transition-fast);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--secondary);
  transition: var(--transition-normal);
}

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

.nav-links a:hover::after, .nav-links a.active::after {
  width: 100%;
}

.nav-links a.active {
  color: var(--primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Intermediate Screen Sizes: Optimize spacing to prevent squishing */
@media (min-width: 1201px) and (max-width: 1480px) {
  .nav-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .nav-links {
    gap: 16px; /* Balanced link gap */
  }
  .nav-links a {
    font-size: 14px; /* Balanced font size */
  }
  .nav-actions {
    gap: 10px; /* Balanced action spacing */
  }
  .header-nav .btn-cta {
    padding: 10px 16px;
    font-size: 13px;
  }
  .logo {
    font-size: 18px;
  }
}

.burger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
}

.burger-menu svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 1200px) {
  /* Menu mobile : glisse par transform ; fermé, il est masqué (visibility) pour sortir de l'ordre de tabulation */
  .nav-links {
    position: fixed;
    top: 80px;
    left: 0;
    transform: translateX(-100%);
    visibility: hidden;
    overflow-y: auto;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: var(--white);
    flex-direction: column;
    padding: var(--space-xl) var(--space-lg);
    gap: var(--space-lg);
    transition: transform var(--transition-normal), visibility 0s linear 0.3s;
    box-shadow: 0 10px 15px -3px rgba(var(--primary-rgb), 0.12);
    z-index: 999;
  }

  .nav-links.active {
    transform: none;
    visibility: visible;
    transition: transform var(--transition-normal), visibility 0s;
  }

  .header-nav.scrolled .nav-links {
    top: var(--header-h-scrolled, 100px);
    height: calc(100vh - var(--header-h-scrolled, 100px));
  }
  
  .burger-menu {
    display: block;
  }
  
  .nav-actions {
    display: flex !important;
    margin-right: 15px;
  }
  
  .nav-actions .btn-cta {
    display: none !important;
  }
  
  .nav-links .btn-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
}

/* --- Sélecteur de langue FR/EN (règle unique ; couleurs de l'en-tête plus bas, section « Barre de navigation ») --- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
  padding: 0;
  background-color: rgba(var(--white-rgb, 255, 255, 255), 0.06);
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.lang-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px; /* cible tactile de 44 px */
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.lang-switch button:not(.active):hover {
  background-color: rgba(var(--white-rgb, 255, 255, 255), 0.14);
}

.lang-switch button:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: -2px;
}

.lang-switch button.active {
  background-color: var(--primary);
  color: var(--white);
}

.mobile-cta-only {
  display: none !important;
}

@media (max-width: 1200px) {
  .mobile-cta-only {
    display: block !important;
    width: 100%;
  }
}

/* --- Buttons --- */
/* Toutes les variantes ont la même boîte : bordure de 2 px (transparente sauf pour les contours)
   et interligne fixe. Un bouton à contour ne dépasse plus ses voisins (49 px contre 45 px avant). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: 10px 22px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-normal);
  gap: 8px;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: var(--neutral-bg);
  color: var(--primary);
}

.btn-secondary:hover {
  background-color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-tertiary {
  background-color: var(--tertiary);
  color: var(--primary);
}

.btn-tertiary:hover {
  background-color: #FFD233;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 195, 0, 0.3);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-white {
  background-color: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.btn-outline-white:hover {
  background-color: var(--white);
  color: var(--primary);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 14px 30px;
  font-size: 16px;
}

/* --- Cards --- */
.card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid rgba(192, 197, 206, 0.3);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
  position: relative;
  display: flex;
  flex-direction: column;
}

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

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--accent-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  font-size: 24px;
  transition: var(--transition-normal);
}

.card:hover .card-icon {
  background-color: var(--primary);
  color: var(--white);
  transform: scale(1.08);
}

.card-title {
  margin-bottom: var(--space-sm);
  font-size: 20px;
}

.card-desc {
  color: var(--slate);
  font-size: 15px;
  line-height: 1.6;
}

/* Carte a accent dore (resultat simulateur, page merci) */
.card-premium {
  border: 2px solid var(--tertiary);
  box-shadow: var(--shadow-md);
}

/* Formules : niveaux de mise en avant */
.card-featured {
  border: 2px solid var(--tertiary);
  box-shadow: var(--shadow-lg);
}

.card-popular {
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-md);
}

/* Badge pose dans le DOM (et non en ::before) pour rester traduisible */
.card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--tertiary);
  color: var(--primary);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.card-badge-alt {
  background-color: var(--primary);
  color: var(--white);
}

/* Surelevation de la formule recommandee, uniquement sur 3 colonnes */
@media (min-width: 993px) {
  .card-featured {
    transform: translateY(-14px);
  }

  .card-featured:hover {
    transform: translateY(-20px);
  }
}

/* Anatomie commune des cartes formule */
.pack-scope {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid rgba(192, 197, 206, 0.35);
}

.pack-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  color: var(--slate);
  margin-bottom: var(--space-lg);
  flex-grow: 1;
}

.pack-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pack-features li svg {
  flex-shrink: 0;
  margin-top: 3px;
}

/* Prestation non incluse : barrée et atténuée, contraste AA conservé (pas d'opacité) */
.pack-features .is-excluded {
  color: var(--slate-muted);
  text-decoration: line-through;
}
.pack-features .is-excluded svg {
  opacity: 0.6;
}

/* Feature Pills - sections produit MBM CV / MBM Platform */
.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-md);
}

.feature-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background-color: var(--accent-light);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

/* Accent Card / Trust Card */
.trust-accent-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(11, 42, 74, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  z-index: 1;
}

.trust-accent-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6px;
  background: var(--tertiary);
  border-radius: 4px 0 0 4px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.trust-accent-card::after {
  content: '';
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(255, 195, 0, 0.06) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.trust-accent-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(74, 166, 235, 0.25);
}

.trust-accent-card:hover::before {
  width: 8px;
}

.trust-accent-card-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

/* For inside the deontology card - blockquote style */
.deontology-blockquote {
  position: relative;
  font-style: italic;
  font-weight: 500;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.7;
  padding: 20px 24px 20px 48px;
  background-color: rgba(255, 195, 0, 0.04);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  border-left: 3px solid rgba(255, 195, 0, 0.4);
}

.deontology-blockquote::before {
  content: '“';
  position: absolute;
  top: 10px;
  left: 16px;
  font-size: 54px;
  color: rgba(255, 195, 0, 0.2);
  font-family: Georgia, serif;
  line-height: 1;
}

/* Icônes des boutons : immobiles au survol (le bouton se soulève déjà ; une icône qui glisse imite une flèche) */

/* Micro-animations for pillars */
.pillar {
  transition: transform 0.2s ease;
}

.pillar:hover {
  transform: translateX(4px);
}

.pillar-num {
  transition: all 0.2s ease;
}

.pillar:hover .pillar-num {
  background-color: var(--tertiary) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 10px rgba(255, 195, 0, 0.3);
}

/* ===== Frise du parcours (accueil, section #methode) ===== */
/* L'état par défaut est l'état final : sans JavaScript ou sous mouvement réduit, tout est visible.
   js/main.js (initJourneyTimeline) pose .journey--armed (étapes éteintes, traits repliés) puis
   .is-lit sur chaque étape, l'une après l'autre, quand la frise entre à l'écran.
   Colonne (liste verticale) par défaut, frise horizontale à partir de 1000 px. */
.journey {
  --journey-node: 48px;   /* diamètre des pastilles */
  --journey-pad-y: 12px;  /* marges internes d'une étape (zone cliquable) */
  --journey-pad-x: 12px;
  --journey-gap: 4px;     /* espace entre deux étapes */
  list-style: none;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--journey-gap);
  max-width: 560px;
  margin: 40px auto 0;
  padding: 0;
}

.journey-step {
  position: relative;
  min-width: 0;
}

/* Trait de fond (::before) et trait de progression (.journey-seg) :
   du centre d'une pastille au centre de la suivante, sous les étapes */
.journey-step:not(:last-child)::before,
.journey-seg {
  content: '';
  position: absolute;
  z-index: 0;
  left: calc(var(--journey-pad-x) + var(--journey-node) / 2 - 1px);
  top: calc(var(--journey-pad-y) + var(--journey-node) / 2);
  width: 2px;
  height: calc(100% + var(--journey-gap));
  pointer-events: none;
}
.journey-step:not(:last-child)::before { background-color: var(--journey-track); }
.journey-seg {
  display: block;
  background-color: var(--secondary);
  transform-origin: 50% 0;
}

/* Étape : lien vers le détail dans processus.html */
.journey-link {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--journey-node) minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  min-height: 44px;
  padding: var(--journey-pad-y) var(--journey-pad-x);
  border-radius: var(--radius-lg);
  align-content: start;
}
/* Neutralise le style des liens de texte (« .section li a », soulignés en !important) :
   ici le lien est une carte d'étape, pas un lien dans une phrase */
.section ol.journey li a.journey-link,
.section ol.journey li a.journey-link:hover {
  color: inherit !important;
  font-weight: inherit;
  text-decoration: none !important;
  transition: transform 0.24s var(--ease-journey);
}
/* Fond et ombre teintée de l'étape survolée : seule l'opacité est animée */
.journey-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--white);
  box-shadow: var(--shadow-journey);
  opacity: 0;
  transition: opacity 0.24s var(--ease-journey);
}
.journey-link:hover,
.journey-link:focus-visible { transform: translateY(-3px); }
.journey-link:hover::before,
.journey-link:focus-visible::before { opacity: 1; }
.journey-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Pastille : contour (état éteint), disque bleu nuit et icône blanche (état allumé), numéro en badge */
.journey-node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--journey-node);
  height: var(--journey-node);
  border-radius: var(--radius-full);
  background-color: var(--white);
  box-shadow: inset 0 0 0 2px var(--journey-ring);
  color: var(--white);
}
.journey-disc {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--primary);
}
.journey-icon {
  position: relative;
  width: 22px;
  height: 22px;
}
.journey-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 2px var(--white);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Étape d'arrivée : seule touche d'or de la frise */
.journey-step--arrival .journey-badge {
  background-color: var(--tertiary);
  box-shadow: 0 0 0 2px var(--white);
}

.journey-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 3px;
}
.journey-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary);
}
.journey-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--slate);
}

.journey-note {
  max-width: 560px;
  margin: 20px auto 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--slate-muted);
}

/* Frise horizontale */
@media (min-width: 1000px) {
  .journey {
    --journey-node: 56px;
    --journey-pad-y: 16px;
    --journey-pad-x: 8px;
    --journey-gap: 8px;
    max-width: none;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 48px;
  }
  .journey-step:not(:last-child)::before,
  .journey-seg {
    left: 50%;
    top: calc(var(--journey-pad-y) + var(--journey-node) / 2 - 1px);
    width: calc(100% + var(--journey-gap));
    height: 2px;
  }
  .journey-seg { transform-origin: 0 50%; }
  .journey-link {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 16px;
    height: 100%;
    padding-bottom: 20px;
    text-align: center;
  }
  .journey-icon { width: 24px; height: 24px; }
  .journey-text {
    align-items: center;
    gap: 6px;
    padding-top: 0;
  }
  .journey-desc { text-wrap: balance; } /* lignes de longueur égale, pas de mot seul en dernière ligne */
  .journey-note { margin-top: 24px; }
}

/* Animation d'entrée (classes posées par js/main.js) : chaque transition dure au plus 400 ms */
.journey--armed .journey-seg { transform: scaleY(0); }
.journey--armed .journey-disc { opacity: 0; transform: scale(0.5); }
.journey--armed .journey-icon { opacity: 0; transform: scale(0.7); }
.journey--armed .journey-text { opacity: 0; transform: translateY(8px); }
@media (min-width: 1000px) {
  .journey--armed .journey-seg { transform: scaleX(0); }
}
.journey--armed .journey-step.is-lit .journey-seg {
  transform: none;
  transition: transform 0.3s linear 0.04s; /* atteint la pastille suivante au moment où elle s'allume */
}
.journey--armed .journey-step.is-lit .journey-disc {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s linear, transform 0.36s var(--ease-journey);
}
.journey--armed .journey-step.is-lit .journey-icon {
  opacity: 1;
  transform: none;
  transition: opacity 0.24s linear 0.1s, transform 0.32s var(--ease-journey) 0.1s;
}
.journey--armed .journey-step.is-lit .journey-text {
  opacity: 1;
  transform: none;
  transition: opacity 0.36s var(--ease-journey) 0.06s, transform 0.4s var(--ease-journey) 0.06s;
}

@media (prefers-reduced-motion: reduce) {
  .journey--armed .journey-seg,
  .journey--armed .journey-disc,
  .journey--armed .journey-icon,
  .journey--armed .journey-text {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .section ol.journey li a.journey-link,
  .journey-link::before { transition: none; }
  .journey-link:hover,
  .journey-link:focus-visible { transform: none; }
}

/* --- Reassurance banner --- */
.reassurance-banner {
  position: relative;
  background: linear-gradient(90deg, rgba(74, 166, 235, 0.04) 0%, rgba(74, 166, 235, 0.01) 100%);
  border: 1px solid rgba(74, 166, 235, 0.12);
  border-left: 4px solid var(--secondary);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-weight: 500;
  color: var(--primary);
  font-size: 0.95rem;
  line-height: 1.6;
  box-shadow: 0 4px 15px rgba(11, 42, 74, 0.02);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.3s ease;
}

.reassurance-banner svg {
  flex-shrink: 0;
  color: var(--secondary);
  background-color: rgba(74, 166, 235, 0.08);
  padding: 0.5em;
  width: 2.2em;
  height: 2.2em;
  border-radius: 6px;
  box-sizing: border-box;
  margin-top: 0.1em;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.3s ease,
              color 0.3s ease;
}

.reassurance-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(11, 42, 74, 0.05);
  border-color: rgba(74, 166, 235, 0.25);
}

.reassurance-banner:hover svg {
  transform: scale(1.1) rotate(4deg);
  background-color: rgba(74, 166, 235, 0.14);
}

.reassurance-banner.alert {
  background: linear-gradient(90deg, rgba(192, 57, 43, 0.03) 0%, rgba(192, 57, 43, 0.01) 100%);
  border-color: rgba(192, 57, 43, 0.12);
  border-left-color: var(--red);
  color: #a62b1f;
}

.reassurance-banner.alert svg {
  color: var(--red);
  background-color: rgba(192, 57, 43, 0.07);
}

.reassurance-banner.alert:hover {
  border-color: rgba(192, 57, 43, 0.25);
  box-shadow: 0 8px 25px rgba(192, 57, 43, 0.04);
}

.reassurance-banner.alert:hover svg {
  background-color: rgba(192, 57, 43, 0.12);
}

/* --- Table Styles --- */
.table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(192, 197, 206, 0.3);
  box-shadow: var(--shadow-sm);
  background-color: var(--white);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.comparison-table th {
  background-color: var(--neutral-bg);
  color: var(--primary);
  font-weight: 700;
  padding: 16px 20px;
  border-bottom: 2px solid rgba(192, 197, 206, 0.4);
}

.comparison-table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(192, 197, 206, 0.2);
  color: var(--slate);
  font-size: 15px;
}

.comparison-table tr:hover td {
  background-color: rgba(242, 245, 249, 0.5);
}

.comparison-table .highlight-col {
  background-color: rgba(255, 195, 0, 0.04);
}

.comparison-table tr:hover .highlight-col {
  background-color: rgba(255, 195, 0, 0.08);
}

/* --- Forms & Inputs --- */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--primary);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-primary);
  font-size: 15px;
  border: 1.5px solid var(--argent);
  border-radius: var(--radius-md);
  outline: none;
  transition: var(--transition-fast);
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11, 42, 74, 0.15);
}

.form-radio-group {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.form-radio-card {
  border: 2px solid rgba(192, 197, 206, 0.3);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition-normal);
}

.form-radio-card:hover {
  border-color: var(--secondary);
  background-color: rgba(74, 166, 235, 0.03);
}

.form-radio-card input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}

.form-radio-card.selected {
  border-color: var(--primary);
  background-color: var(--accent-light);
}

/* --- Simulator & Multi-step Form --- */
.step-container, .simulator-step, .contact-step {
  display: none;
  animation: fadeIn var(--transition-normal);
}

.step-container.active, .simulator-step.active, .contact-step.active {
  display: block;
}

.step-progress-bar {
  width: 100%;
  height: 6px;
  background-color: var(--neutral-bg);
  border-radius: var(--radius-full);
  margin-bottom: 30px;
  overflow: hidden;
}

.step-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  width: 0%;
  transition: width 0.3s ease;
}

/* --- WhatsApp Float Button --- */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: var(--whatsapp-green);
  color: var(--primary); /* icône bleu nuit sur vert WhatsApp : 7,3:1 (blanc : 2:1) */
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.22);
  z-index: 999;
  text-decoration: none;
  transition: var(--transition-normal);
  font-size: 32px;
}

.whatsapp-float:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}

/* Pulsation d'attention du bouton WhatsApp retirée (animation en boucle). */

/* --- Modals --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 42, 74, 0.6);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 100%;
  padding: var(--space-lg);
  position: relative;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: var(--slate);
  transition: var(--transition-fast);
}

.modal-close:hover {
  color: var(--primary);
}

/* --- Hero Layout General --- */
.hero-page {
  background:
    radial-gradient(700px 380px at 88% -20%, rgba(255,195,0,.16), transparent 60%),
    radial-gradient(620px 420px at 8% 120%, rgba(74,166,235,.20), transparent 60%),
    linear-gradient(135deg, #0B2A4A 0%, #0e3360 55%, #033B9C 140%);
  color: var(--white);
  padding: 140px 0 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.5;
  pointer-events: none; /* Empêche le motif de fond de bloquer les clics sur le contenu */
}

.hero-page > * {
  position: relative;
  z-index: 1;
}

.hero-page-title {
  font-size: var(--fs-h1);
  font-weight: 800;
  margin-bottom: var(--space-sm);
  color: var(--white);
}

.hero-page-desc {
  font-size: 18px;
  color: var(--secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* --- Footer Area --- */
.footer {
  background-color: var(--primary);
  color: rgba(255, 255, 255, 0.8);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-top {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1.2fr 2.4fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-brand .logo {
  color: var(--white);
  margin-bottom: var(--space-md);
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.footer-social {
  margin-top: 20px;
}

.footer-social-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 8px;
}

.footer-social-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer-social-icons a:hover {
  background: var(--tertiary);
  color: var(--primary);
  transform: translateY(-2px);
}

.footer-title {
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-md);
  position: relative;
  padding-bottom: 8px;
}

.footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background-color: var(--secondary);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-links a:hover {
  color: var(--secondary);
  transform: translateX(4px);
}

.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-contact-item {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.footer-contact-item strong {
  color: var(--white);
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 2px;
}

/* Liens du bloc contact : cible d'au moins 24 px de haut (WCAG 2.5.8), espacés de leurs voisins */
.footer-contact-item a:not(.btn) {
  display: inline-block;
  padding: 3px 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 2px;
  font-weight: 500;
}

.footer-bottom-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--secondary);
  transition: width 0.3s ease;
}

.footer-bottom-links a:hover {
  color: var(--secondary);
}

.footer-bottom-links a:hover::after {
  width: 100%;
}

@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

/* --- FAQ Accordion --- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  background: var(--white);
  border: 1px solid rgba(11, 42, 74, 0.08);
  border-left: 4px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(11, 42, 74, 0.015);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.3s ease,
              border-left-color 0.3s ease;
}

.faq-header {
  /* Remise à zéro quand l'en-tête est un <button> (accessible au clavier) */
  width: 100%;
  border: none;
  font-family: inherit;
  text-align: left;
  line-height: inherit;
  padding: 22px 26px;
  background-color: var(--white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary);
  user-select: none;
  gap: 20px;
  transition: background-color 0.25s ease;
}

.faq-header svg {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 50%;
  background-color: rgba(74, 166, 235, 0.08);
  fill: var(--secondary);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.25s ease,
              fill 0.25s ease;
  box-sizing: border-box;
}

.faq-body {
  padding: 0 26px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.6;
  background-color: var(--white);
}

.faq-header:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: -2px;
}

.faq-item:hover {
  border-color: rgba(74, 166, 235, 0.2);
  box-shadow: 0 6px 18px rgba(11, 42, 74, 0.03);
}

.faq-item:hover .faq-header svg {
  background-color: rgba(74, 166, 235, 0.14);
}

.faq-item.active {
  border-color: rgba(74, 166, 235, 0.2);
  border-left-color: var(--secondary);
  box-shadow: 0 10px 25px rgba(11, 42, 74, 0.05);
  transform: translateY(-2px);
}

.faq-item.active .faq-header {
  background-color: var(--white);
}

.faq-item.active .faq-header svg {
  transform: rotate(180deg);
  background-color: var(--secondary);
  fill: var(--white);
}

.faq-item.active .faq-body {
  padding: 0 26px 22px 26px;
  max-height: 320px;
}

/* --- Stats grid anim --- */
.stat-card {
  text-align: center;
  padding: 30px;
  background-color: var(--neutral-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--secondary);
}

.stat-number {
  font-size: 40px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}

.stat-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--slate);
}

/* --- Utility / Animation Classes --- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-white { color: var(--white); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary-text); }
.text-tertiary { color: var(--tertiary); }

.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.align-center {
  display: flex;
  align-items: center;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }

/* Scroll animations (js/main.js, initScrollAnimations)
   .fade-armed : bloc encore sous l'écran, posée par le script uniquement. Sans JavaScript, le bloc
   reste affiché. Le script la retire en ajoutant .appear. Masquage instantané (aucun fondu sortant
   sous l'écran) ; le fondu d'entrée vient de la transition de .fade-in-up. */
.fade-in-up {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.fade-armed {
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

.fade-in-up.appear {
  opacity: 1;
  transform: translateY(0);
}

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Drapeau & Cartes interactives */
.flag-icon {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(var(--primary-rgb),0.18);
  vertical-align: middle;
  display: inline-block;
  margin-right: 8px;
}

.map-container {
  width: 100%;
  height: 350px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(192, 197, 206, 0.3);
  margin-top: 15px;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Carte chargée au clic seulement (Google Maps dépose des cookies) */
.map-container.map-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background-color: var(--neutral-bg);
}
.map-consent-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
  max-width: 320px;
}


/* (Sélecteur de langue et réseaux sociaux : règles regroupées plus haut, une seule définition chacun.) */

/* ===================== Passe chaleur & vie (V1.2) ===================== */
:root{
  --gold-deep:#E0A800;
  --whatsapp-green:#25D366; /* couleur de marque WhatsApp (fond de bouton, texte bleu nuit dessus) */
}


/* Hero plus vivant : degrade bleu nuit -> bleu profond + halos dore et glacier */
.bg-hero{
  background:
    radial-gradient(820px 480px at 88% -12%, rgba(255,195,0,.20), transparent 60%),
    radial-gradient(680px 480px at 6% 116%, rgba(74,166,235,.22), transparent 60%),
    linear-gradient(135deg,#0B2A4A 0%,#0e3360 55%,#033B9C 135%) !important;
}

/* Eyebrow : petit label au-dessus des titres, en casse de phrase.
   Bleu nuit sur fond clair (contraste AA), or sur fond sombre. */
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:normal;
  text-transform:none;color:var(--primary);margin-bottom:10px;
}
.eyebrow.on-dark,.bg-dark .eyebrow{color:var(--tertiary)}

/* Bande de statistiques (compteurs animes) */
.stats-band{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:26px 18px;margin-top:36px;
}
.stat-item{text-align:center}
.stat-num{font-size:42px;font-weight:800;line-height:1;color:var(--tertiary)}
.stats-band .stat-label{display:block;margin-top:6px;font-size:13px;color:rgba(255,255,255,.82);font-weight:600}
@media(max-width:760px){.stats-band{grid-template-columns:repeat(2,1fr)}.stat-num{font-size:34px}}

/* Cartes : liseré dore chaleureux au survol (on garde le lift existant) */
.card{transition:var(--transition-normal),border-color .3s ease}
.card:hover{border-color:rgba(255,195,0,.55);box-shadow:0 16px 34px rgba(11,42,74,.13)}



/* ===================== Effets du design Stitch (V1.3) ===================== */
/* Accent doré du titre du hero : or plein de la charte (9:1 sur bleu nuit), sans dégradé */
.text-gradient-gold{color:var(--tertiary)}
/* Effet de frappe du hero (js/main.js, initTypewriter) : la phrase entière réserve sa place,
   la partie non tapée est invisible ; curseur fixe de largeur nulle (aucun décalage), retiré à la fin. */
#hero-typewriter .tw-rest { visibility: hidden; }
#hero-typewriter .tw-rest::after { content: attr(data-rest); }
#hero-typewriter .tw-typed::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0.9em;
  margin-right: -2px;
  border-right: 2px solid var(--secondary);
  vertical-align: -0.08em;
}
/* Ombre de profondeur premium */
.depth-shadow{box-shadow:0 25px 50px -12px rgba(11,42,74,.45) !important}
/* Carte avec effet de tilt 3D suivant la souris */
.tilt-card{transition:transform .25s ease;transform-style:preserve-3d;will-change:transform}

/* === Barre de navigation : bleu nuit plein (sans effet de verre), ombre teintée bleu nuit === */
.header-nav{
  background-color:var(--primary);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 24px rgba(var(--primary-rgb),.22);
}
.header-nav.scrolled{background-color:var(--primary);box-shadow:0 10px 28px rgba(var(--primary-rgb),.32)}
.header-nav .logo{color:var(--white)}
.header-nav .nav-links a{color:rgba(255,255,255,.85)}
.header-nav .nav-links a:hover,.header-nav .nav-links a.active{color:var(--tertiary)}
.header-nav .nav-links a::after{background-color:var(--tertiary)}
.header-nav .burger-menu{color:var(--white)}
.header-nav .lang-switch{border-color:rgba(255,255,255,.40)}
.header-nav .lang-switch button{color:var(--white)}
/* Langue active : pastille blanche ; le jaune reste réservé au bouton d'action de l'en-tête */
.header-nav .lang-switch button.active{background:var(--white);color:var(--primary)}
@media (max-width: 1200px) {
  .header-nav .nav-links {
    background: var(--primary);
  }
  .header-nav .nav-links a {
    color: var(--white);
  }
}

/* === Temoignages video === */
.testimonial-grid{gap:24px}
.vt-meta{padding:16px 18px 20px;display:flex;flex-direction:column;gap:4px}
.vt-head{display:flex;align-items:center;gap:8px}
.vt-head h4{font-size:16px;font-weight:700;color:var(--primary);margin:0}
.vt-flag svg{width:20px;height:13px;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(var(--primary-rgb),.12)}
.vt-role{font-size:12px;color:var(--slate);font-weight:600}
.vt-quote{font-size:13px;color:var(--slate);font-style:italic;margin-top:6px;line-height:1.5}
@media(max-width:992px){.testimonial-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.testimonial-grid{grid-template-columns:1fr}}

/* === Piliers (page Pourquoi) === */
.pillar{display:flex;gap:14px;align-items:flex-start}
.pillar-num{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--primary);color:var(--tertiary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.pillar-title{font-size:15px;font-weight:700;color:var(--primary);margin:0 0 3px}
.pillar-text{font-size:13.5px;color:var(--slate);line-height:1.55;margin:0}

/* === Etudes de cas (page Resultats) === */
.case-card{padding:0;overflow:hidden}
.case-head{display:flex;align-items:center;gap:14px;padding:18px 22px;background:linear-gradient(135deg,#0B2A4A,#033B9C)}
.case-avatar{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--tertiary);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.case-id{display:flex;flex-direction:column;gap:2px}
.case-name{display:flex;align-items:center;gap:8px;color:var(--white);font-weight:700;font-size:17px}
.case-name .vt-flag svg{width:20px;height:13px;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.case-loc{font-size:12px;color:rgba(255,255,255,.78);font-weight:600}
.case-body{padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.case-block{display:flex;flex-direction:column;gap:4px}
.case-label{font-size:12px;font-weight:700;color:var(--secondary-text)}
.case-block p{font-size:13.5px;color:var(--slate);line-height:1.55;margin:0}
.case-solution{background:var(--accent-light);border-radius:var(--radius-md);padding:13px 15px}
.case-solution .case-label{color:var(--primary)}
.case-solution p{color:var(--onyx)}
.case-result{display:flex;align-items:flex-start;gap:8px;background:rgba(39,174,96,.10);border:1px solid rgba(39,174,96,.30);border-radius:var(--radius-md);padding:12px 14px;font-size:13.5px;font-weight:700;color:var(--green-text);line-height:1.5}
.case-result svg{flex-shrink:0;margin-top:2px}
@media (prefers-reduced-motion: reduce){
  .tilt-card{transition:none}
}

/* ===================== Dynamic Redirection Link Interactions (V1.4) ===================== */

/* 1. Logo Redirection Links (Header & Footer) */
.logo {
  transition: transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1), 
              opacity var(--transition-normal) ease !important;
}

.logo:hover {
  transform: scale(1.02);
  opacity: 0.95;
}

.logo:active {
  transform: scale(0.97);
}

/* 2. Header Navigation Links Lift */
.header-nav .nav-links a {
  display: inline-block;
  transition: color var(--transition-fast) ease, 
              transform var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.header-nav .nav-links a:hover {
  transform: translateY(-2px);
}

.header-nav .nav-links a:active {
  transform: translateY(0);
}

/* 3. Footer Links Slide (flèche décorative retirée) */
.footer-links a {
  display: inline-flex !important;
  align-items: center;
  position: relative;
  transition: color var(--transition-normal) ease,
              transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.footer-links a:hover {
  color: var(--secondary) !important;
  transform: translateX(4px);
}

/* 4. Footer Bottom Legal Links (Mentions légales, etc.) */
.footer-bottom-links a {
  display: inline-block;
  transition: color var(--transition-normal) ease, 
              transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.footer-bottom-links a:hover {
  transform: translateY(-2px);
}

.footer-bottom-links a:active {
  transform: translateY(0);
}

/* 5. Liens dans le texte : bleu glacier foncé (contraste AA sur fond clair) et soulignés,
   pour qu'un repère autre que la couleur les distingue du texte (WCAG 1.4.1). */
.section p a:not(.btn):not(.logo),
.section li a:not(.btn):not(.logo),
.section .body-md a:not(.btn):not(.logo),
.section .body-lg a:not(.btn):not(.logo),
.reassurance-banner a:not(.btn) {
  color: var(--secondary-text) !important;
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.section p a:not(.btn):not(.logo):hover,
.section li a:not(.btn):not(.logo):hover,
.section .body-md a:not(.btn):not(.logo):hover,
.section .body-lg a:not(.btn):not(.logo):hover,
.reassurance-banner a:not(.btn):hover {
  color: var(--primary) !important;
  text-decoration-thickness: 2px;
}

/* Sur fond bleu nuit, le bleu glacier clair reste lisible (5,5:1) */
.bg-dark :is(p, li, .body-md, .body-lg) a:not(.btn):not(.logo) {
  color: var(--secondary) !important;
}
.bg-dark :is(p, li, .body-md, .body-lg) a:not(.btn):not(.logo):hover {
  color: var(--white) !important;
}

/* 6. Lien texte isolé (« Comparer toutes les prestations », « En savoir plus » des cartes) */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--secondary-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--transition-fast);
}
.text-link:hover {
  color: var(--primary);
  text-decoration-thickness: 2px;
}
.text-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* ===================== Philosophy & Reassurance Styling (V1.5) ===================== */

.philosophy-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 50px 40px;
  text-align: center;
  border: 1px solid rgba(11, 42, 74, 0.06);
  box-shadow: var(--shadow-premium), 0 20px 40px rgba(11, 42, 74, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.philosophy-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium), 0 25px 50px rgba(11, 42, 74, 0.08);
}

.philosophy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
}

.philosophy-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--accent-light);
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(74, 166, 235, 0.1);
  transition: transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

.philosophy-card:hover .philosophy-icon {
  transform: scale(1.08) rotate(5deg);
}

/* ===================== Responsive Grid Utilities (V1.6) ===================== */

.grid-responsive-hero,
.grid-responsive-split,
.grid-responsive-two-cols {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.grid-responsive-hero {
  grid-template-columns: 1.2fr 0.8fr;
  align-items: start;
}

.grid-responsive-split {
  grid-template-columns: 1.1fr 0.9fr;
}

.grid-responsive-two-cols {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 992px) {
  .grid-responsive-hero,
  .grid-responsive-split,
  .grid-responsive-two-cols {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg);
  }
  
  /* Reset alternating layouts or specific ordering on mobile */
  .grid-responsive-hero > div,
  .grid-responsive-split > div,
  .grid-responsive-two-cols > div {
    order: initial !important;
  }
  
  /* Additional layout responsive overrides */
  .hero-page {
    padding: 120px 0 60px 0 !important;
  }
  /* Taille du titre de page : token --fs-h1 */
}

/* Barre de recherche du header (header foncé en verre, cohérente avec le sélecteur FR/EN) */
.nav-search {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 0 6px 0 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}
.nav-search:focus-within {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--tertiary);
}
.nav-search input {
  width: 90px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--white);
  font-family: var(--font-primary);
  font-size: 14px;
  transition: width var(--transition-normal);
  -webkit-appearance: none;
  appearance: none;
}
.nav-search input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.nav-search:focus-within input,
.nav-search input:focus {
  width: 140px;
}
.nav-search button {
  display: flex;
  align-items: center;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}
.nav-search button:hover {
  color: var(--tertiary);
}
.nav-search button svg {
  width: 17px;
  height: 17px;
}
@media (max-width: 1280px) {
  .nav-search {
    display: none;
  }
}

/* Trustpilot (avis clients) - masqué tant que l'ID Business Unit n'est pas renseigné */
.tp-gated[hidden] {
  display: none !important;
}
.footer-trustpilot {
  margin-top: 18px;
}

/* Newsletter (bandeau footer) - masqué tant que NEWSLETTER_ENABLED est false */
.newsletter-gated[hidden] {
  display: none !important;
}
/* Newsletter flottante (bouton + encart), comme l'icône WhatsApp ; masquée tant que NEWSLETTER_ENABLED est false */
/* --- Bandeau de consentement cookies (RGPD) --- */
.cookie-banner {
  position: fixed;
  left: 30px;
  bottom: 30px;
  z-index: 1001;
  width: calc(100% - 60px);
  max-width: 440px;
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(11, 42, 74, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(11, 42, 74, 0.28);
  animation: cookieSlideUp 0.35s ease;
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner-inner {
  padding: 20px 22px;
}
.cookie-banner-text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--primary);
}
.cookie-banner-text p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}
.cookie-banner-text a {
  color: var(--secondary-text);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: flex-end;
}
.cookie-banner-actions .btn {
  padding: 10px 18px;
  font-size: 13px;
}
@keyframes cookieSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Bouton "Gérer les cookies" du footer (aligné sur les liens légaux) */
.footer-cookie-btn {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.footer-cookie-btn:hover {
  color: var(--secondary);
}
@media (max-width: 576px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
  .cookie-banner-actions {
    flex-direction: column-reverse;
  }
  .cookie-banner-actions .btn {
    width: 100%;
  }
}

.newsletter-float {
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 999;
}
.newsletter-fab {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: var(--tertiary);
  color: var(--primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.24);
  transition: var(--transition-normal);
}
.newsletter-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(255, 195, 0, 0.45);
}
.newsletter-popup {
  position: absolute;
  bottom: 74px;
  right: 0;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(var(--primary-rgb), 0.28);
  padding: 22px 20px 20px;
}
.newsletter-popup[hidden] {
  display: none;
}
.newsletter-popup-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--slate);
  cursor: pointer;
}
.newsletter-popup h3 {
  color: var(--primary);
  font-size: 17px;
  margin: 0 0 6px;
}
.newsletter-popup p {
  color: var(--slate);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.newsletter-form input[type="email"] {
  width: 100%;
  border: 1px solid rgba(11, 42, 74, 0.18);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--onyx);
  margin-bottom: 10px;
}
.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--secondary);
}
.newsletter-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--slate);
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 12px;
  cursor: pointer;
}
.newsletter-consent input {
  margin-top: 2px;
}
.newsletter-feedback {
  font-size: 12.5px;
  margin: 10px 0 0;
  min-height: 14px;
}
.newsletter-feedback.success {
  color: var(--green-text);
  font-weight: 600;
}
.newsletter-feedback.error {
  color: var(--red);
  font-weight: 600;
}
@media (max-width: 600px) {
  .newsletter-float {
    bottom: 82px;
    right: 20px;
  }
  .newsletter-fab {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 576px) {
  /* Smaller screens custom padding and fonts */
  /* Sections : 32 px (token --section-y) au lieu de 24 px, qui collait les blocs entre eux.
     Le !important reste : des styles en ligne fixent encore des marges sur certaines sections. */
  .section {
    padding-top: var(--section-y) !important;
    padding-bottom: var(--section-y) !important;
  }

  .section-lg {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
  }
  /* Titres : tokens --fs-h1 et --fs-display (28 px sous 576 px) */

  /* Form and lead magnet boxes on small mobile screens */
  .card,
  div[style*="padding: 50px"],
  div[style*="padding: 40px"] {
    padding: 24px 16px !important;
  }
}

/* Footer Contact Area Link Hover Styling */
.footer-contact-list a {
  transition: color var(--transition-fast) ease;
}

.footer-contact-list a:hover {
  color: var(--tertiary) !important;
}

/* ===================== Destination Cards Auto-Fading Carousels ===================== */
.destination-carousel {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background-color: var(--neutral-bg);
}

.destination-carousel .carousel-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: transform var(--transition-normal);
  animation: countryFade 16s infinite ease-in-out;
}

.card:hover .destination-carousel .carousel-img {
  transform: scale(1.05);
}

.destination-carousel .carousel-img:nth-child(1) { animation-delay: 0s; }
.destination-carousel .carousel-img:nth-child(2) { animation-delay: 4s; }
.destination-carousel .carousel-img:nth-child(3) { animation-delay: 8s; }
.destination-carousel .carousel-img:nth-child(4) { animation-delay: 12s; }

@keyframes countryFade {
  0% { opacity: 0; }
  6.25% { opacity: 1; }
  25% { opacity: 1; }
  31.25% { opacity: 0; }
  100% { opacity: 0; }
}

.required-asterisk {
  color: var(--red) !important;
  margin-left: 3px;
  font-weight: bold;
}

/* Hide step numbers in headers on mobile to prevent redundancy next to step badges */
@media (max-width: 768px) {
  .step-num-prefix {
    display: none !important;
  }
}

/* Responsive Button Group */
.btn-group-responsive {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

@media (max-width: 576px) {
  .btn-group-responsive {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .btn-group-responsive .btn {
    width: 100% !important;
  }
}

/* Responsive WhatsApp Float Button on Mobile */
@media (max-width: 576px) {
  .whatsapp-float {
    bottom: 20px !important;
    right: 20px !important;
    width: 50px !important;
    height: 50px !important;
  }
  .whatsapp-float svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Thank You Page (merci.html) Responsiveness */
.thank-you-card {
  padding: 50px;
}

@media (max-width: 576px) {
  .thank-you-card {
    padding: 24px 16px !important;
  }
  .calendly-widget-card {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .calendly-widget-card a.btn {
    width: 100% !important;
  }
}

/* Fix fixed header overlap on mobile and tablet due to fixed nav bar height */
@media (max-width: 992px) {
  section.section:first-of-type:not(#destinations) {
    padding-top: 165px !important; /* Safe margin on tablets (hors section Destinations de l'accueil) */
  }
  header.bg-hero {
    padding-top: 130px !important; /* Hero accueil aligne sur les autres pages */
    padding-bottom: 32px !important; /* Reduit l'espace avant la section Destinations */
  }
}

@media (max-width: 576px) {
  section.section:first-of-type:not(#destinations) {
    padding-top: 160px !important; /* Decale la 1re section sous le header, sauf la section Destinations de l'accueil */
  }
  header.bg-hero {
    padding-top: 120px !important; /* Hero accueil aligne sur les autres pages (~.hero-page) */
    padding-bottom: 16px !important; /* Reduit l'espace avant la section Destinations sur mobile */
  }
  
  /* Optimize slogan visibility and legibility on mobile */
  .slogan-italic {
    font-size: 19px !important;
    color: var(--secondary) !important; /* Restored to original secondary color */
    text-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.6) !important; /* lisibilité du slogan sur le fond du hero */
    font-weight: 700 !important;
  }
}

/* ===================== Pages legales (Mentions, Confidentialite, CGV, Cookies) ===================== */
/* Colonne de texte limitée à la longueur de lecture (--measure) : 105 caractères par ligne avant l'audit */
.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, var(--measure));
  justify-content: center;
  gap: 44px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.legal-toc {
  position: sticky;
  top: 100px;
  align-self: start;
  background: var(--white);
  border: 1px solid rgba(11, 42, 74, 0.08);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.legal-toc-title {
  font-size: 13px; font-weight: 700;
  color: var(--primary); margin-bottom: 10px;
}
.legal-toc a {
  display: block; padding: 7px 10px; margin-bottom: 2px; border-radius: var(--radius-sm);
  color: var(--slate); text-decoration: none; font-size: 13.5px; font-weight: 600;
  border-left: 3px solid transparent; transition: var(--transition-fast); line-height: 1.35;
}
.legal-toc a:hover { background: var(--neutral-bg); color: var(--primary); }
.legal-toc a.active { background: var(--accent-light); color: var(--primary); border-left-color: var(--tertiary); }

.legal-tldr {
  background: linear-gradient(135deg, rgba(74, 166, 235, 0.08), rgba(255, 195, 0, 0.06));
  border: 1px solid rgba(74, 166, 235, 0.22);
  border-radius: var(--radius-lg);
  padding: 22px 24px; margin-bottom: 26px;
}
.legal-tldr h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--primary); }
.legal-tldr h2 svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--secondary); }
.legal-tldr ul { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; }
.legal-tldr li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--slate); line-height: 1.5; }
.legal-tldr li svg { flex-shrink: 0; width: 19px; height: 19px; color: var(--secondary); margin-top: 1px; }

.legal-section { scroll-margin-top: 100px; margin-bottom: 24px; }
.legal-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.legal-section-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--primary); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.legal-section-icon svg { width: 19px; height: 19px; }
.legal-section h2 { font-size: 19px; color: var(--primary); margin: 0; line-height: 1.3; }
.legal-section p { color: var(--slate); line-height: 1.7; font-size: 15px; margin: 0 0 10px; }
.legal-section ul { padding-left: 20px; display: grid; gap: 6px; margin: 8px 0; }
.legal-section li { color: var(--slate); line-height: 1.6; font-size: 15px; }
.legal-section a { color: var(--secondary-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.legal-plain {
  background: var(--neutral-bg); border-left: 4px solid var(--tertiary);
  border-radius: var(--radius-sm); padding: 11px 15px; margin: 10px 0; font-size: 13.5px; color: var(--slate);
}
.legal-plain strong { color: var(--primary); }

.legal-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(11, 42, 74, 0.08); vertical-align: top; color: var(--slate); }
.legal-table th { background: var(--neutral-bg); color: var(--primary); font-weight: 700; font-size: var(--fs-label); }
.legal-table code { background: var(--neutral-bg); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--primary); }
.legal-badge { display: inline-block; padding: 2px 9px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; white-space: nowrap; }
.legal-badge.req { background: rgba(39, 174, 96, 0.12); color: var(--green-text); }
.legal-badge.opt { background: rgba(74, 166, 235, 0.14); color: var(--secondary-text); }
.legal-badge.soon { background: rgba(74, 85, 104, 0.12); color: var(--slate); }

.legal-todo {
  display: inline-block; background: rgba(255, 195, 0, 0.16); color: #8a6d00;
  padding: 0 7px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
  border: 1px dashed rgba(255, 195, 0, 0.7); font-style: normal;
}

.legal-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.legal-related a {
  display: block; padding: 15px 16px; border: 1px solid rgba(11, 42, 74, 0.1); border-radius: var(--radius-md);
  text-decoration: none; color: var(--primary); font-weight: 700; font-size: 14px; transition: var(--transition-normal); background: var(--white);
}
.legal-related a:hover { border-color: var(--secondary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.legal-related a span { display: block; font-weight: 500; font-size: 12.5px; color: var(--slate); margin-top: 3px; }

.legal-contact-cta {
  margin-top: 30px; background: var(--primary); color: var(--white);
  border-radius: var(--radius-lg); padding: 26px; text-align: center;
}
.legal-contact-cta h3 { color: var(--white); font-size: 18px; margin: 0 0 8px; }
.legal-contact-cta p { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin: 0 0 16px; }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 18px; }
  .legal-toc { position: static; top: auto; }
  .legal-related { grid-template-columns: 1fr; }
}

/* ===================== Timeline Processus (etapes numerotees, numero lie a sa carte) ===================== */
.proc-timeline { position: relative; max-width: 760px; margin: 0 auto; }
.proc-timeline::before {
  content: ''; position: absolute; left: 28px; top: 22px; bottom: 22px; width: 3px;
  background: linear-gradient(180deg, var(--secondary), var(--tertiary)); opacity: 0.3; border-radius: 3px;
}
.proc-step { position: relative; display: flex; gap: 22px; padding-bottom: 26px; }
.proc-step:last-child { padding-bottom: 0; }
.proc-rail { flex-shrink: 0; position: relative; z-index: 1; }
.proc-num {
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--deep-blue));
  color: var(--white); font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--white); box-shadow: 0 8px 20px rgba(11, 42, 74, 0.25);
  transition: var(--transition-normal);
}
.proc-card {
  flex: 1; min-width: 0; background: var(--white);
  border: 1px solid rgba(11, 42, 74, 0.08); border-left: 4px solid transparent;
  border-radius: var(--radius-lg); padding: 22px 24px;
  box-shadow: var(--shadow-sm); transition: var(--transition-normal);
}
.proc-step:hover .proc-card { transform: translateY(-3px); box-shadow: var(--shadow-md); border-left-color: var(--tertiary); }
.proc-step:hover .proc-num { transform: scale(1.06); box-shadow: 0 10px 24px rgba(11, 42, 74, 0.32); }
.proc-step-label { display: inline-block; font-size: 13px; font-weight: 700; color: var(--secondary-text); margin-bottom: 6px; }
.proc-title { font-size: 20px; color: var(--primary); margin: 0 0 8px; line-height: 1.3; }
.proc-desc { color: var(--slate); font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.proc-tag { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.5; color: var(--slate); margin-bottom: 8px; }
.proc-tag:last-child { margin-bottom: 0; }
.proc-tag svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.proc-tag strong { color: var(--primary); }
.proc-tag-mission { background: var(--neutral-bg); }
.proc-tag-you { background: var(--accent-light); }

/* Branche « et si la réponse est négative ? » sous la frise (processus.html#si-refus) */
.proc-branches { max-width: 760px; margin: 40px auto 0; }
.proc-branches-title { font-size: 22px; color: var(--primary); margin: 0 0 8px; line-height: 1.3; }
.proc-branches-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 14px; }
.proc-branches .proc-card { border-left-color: var(--secondary); }
.proc-branches .proc-card .proc-desc { margin-bottom: 0; }
.proc-branches-note a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 700px) {
  .proc-branches-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .proc-timeline::before { left: 23px; }
  .proc-step { gap: 14px; padding-bottom: 20px; }
  .proc-num { width: 46px; height: 46px; font-size: 15px; border-width: 2px; }
  .proc-card { padding: 18px; }
  .proc-title { font-size: 18px; }
}









/* ===================== Corrections audit (10/2026) ===================== */
/* Pied de page : procédures accompagnées et prestataire, en texte simple (aucun logo d'organisme) */
.footer-partners {
  margin-top: 30px;
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-partners p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* Bouton WhatsApp du pied de page : texte bleu nuit sur vert (contraste 7:1) */
.footer-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  background-color: var(--whatsapp-green);
  color: var(--primary);
  border: none;
}
.footer-whatsapp-btn:hover,
.footer-whatsapp-btn:focus-visible {
  background-color: var(--white);
  color: var(--primary);
}

/* Information RGPD sous la case newsletter */
.newsletter-info {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--slate);
  margin: -4px 0 12px;
}
.newsletter-info a {
  color: var(--primary);
  text-decoration: underline;
}

/* Icône au trait du bouton de réaction des articles (remplace l'emoji) */
.reaction-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { animation: none; }
}

/* ===================== Menu de rubriques, bandeau cookies par catégorie, fenêtre de bienvenue (10/2026) ===================== */
:root {
  --white-rgb: 255, 255, 255;
  --header-h: 80px;           /* hauteur de l'en-tête fixe */
  --header-h-scrolled: 64px;  /* hauteur visible de l'en-tête réduit (.scrolled, translation de 16 px) */
  --subnav-h: 52px;           /* hauteur du menu « Sur cette page » de l'accueil */
  --focus-ring: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Menu « Sur cette page » (accueil) : fixé sous l'en-tête, défilement horizontal interne sur mobile --- */
.page-subnav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 990; /* sous l'en-tête (1000) et son menu mobile, au-dessus du contenu */
  height: var(--subnav-h);
  background-color: var(--primary);
  border-top: 1px solid rgba(var(--white-rgb), 0.12);
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.28);
  transition: transform var(--transition-normal);
}
.nav-is-scrolled .page-subnav {
  transform: translateY(calc(var(--header-h-scrolled) - var(--header-h)));
}
.page-subnav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 30px;
}
.page-subnav-title {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(var(--white-rgb), 0.78);
  white-space: nowrap;
}
.page-subnav-list {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.page-subnav-list::-webkit-scrollbar { display: none; }
.page-subnav-list li { flex-shrink: 0; }
.page-subnav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.page-subnav-list a:hover { background-color: rgba(var(--white-rgb), 0.12); }
.page-subnav-list a[aria-current="true"] {
  background-color: var(--accent-light);
  color: var(--primary);
}
.page-subnav-list a:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 2px;
}
@media (max-width: 1100px) {
  .page-subnav-title { display: none; }
}
@media (max-width: 992px) {
  .page-subnav-inner { padding: 0 16px; }
  .page-subnav-list { gap: 2px; }
  .page-subnav-list a { padding: 0 11px; font-size: 13px; }
}

/* Le hero et les ancres laissent la place au menu de rubriques */
.has-page-subnav header.bg-hero { padding-top: calc(140px + var(--subnav-h)) !important; }
@media (max-width: 992px) {
  .has-page-subnav header.bg-hero { padding-top: calc(130px + var(--subnav-h)) !important; }
}
@media (max-width: 576px) {
  .has-page-subnav header.bg-hero { padding-top: calc(120px + var(--subnav-h)) !important; }
}
.has-page-subnav > section[id],
.has-page-subnav > main > section[id] {
  scroll-margin-top: calc(var(--header-h-scrolled) + var(--subnav-h) + 8px);
}
.has-page-subnav > section[id]:focus,
.has-page-subnav > main > section[id]:focus { outline: none; } /* cible de focus programmée, non interactive */

/* Tableau de la politique cookies : les noms techniques longs se coupent sur petit écran */
@media (max-width: 600px) {
  .legal-table th, .legal-table td { padding: 8px 6px; overflow-wrap: anywhere; }
  .legal-table code { overflow-wrap: anywhere; }
  .legal-badge { white-space: normal; }
}

/* --- Bandeau cookies : lien discret, panneau de choix par catégorie --- */
.cookie-banner {
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.cookie-banner.is-expanded { max-width: 480px; }
.cookie-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.cookie-banner-title {
  display: block;
  font-size: 15px;
  color: var(--primary);
}
.cookie-skip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -10px -10px -10px 0;
  padding: 0 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate); /* 7,5:1 sur blanc */
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}
.cookie-skip:hover { color: var(--primary); }
.cookie-skip:focus-visible,
.cookie-pref input:focus-visible,
.cookie-banner .btn:focus-visible,
.cookie-banner-text a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.cookie-prefs {
  margin-top: 14px;
  padding-top: 4px;
  border-top: 1px solid rgba(var(--primary-rgb), 0.08);
}
.cookie-prefs[hidden] { display: none; }
.cookie-pref {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.06);
}
.cookie-pref input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.cookie-pref input:disabled { cursor: not-allowed; }
.cookie-pref label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  cursor: pointer;
}
.cookie-pref label strong { font-size: 14px; color: var(--primary); }
.cookie-pref label span { font-size: 12.5px; line-height: 1.5; color: var(--slate); }
.cookie-save { margin-top: 12px; }
.cookie-banner .btn { min-height: 44px; }
@media (max-width: 420px) {
  .cookie-banner-top { flex-direction: column-reverse; align-items: stretch; gap: 0; }
  .cookie-skip { align-self: flex-end; margin: -10px -10px 0 0; }
}
@media (max-width: 576px) {
  .cookie-banner { max-height: calc(100vh - 24px); }
  .cookie-save { width: 100%; }
}

/* --- Engagements chiffrés (processus.html#engagements-chiffres) --- */
.engagements-chiffres {
  max-width: 760px; margin: 32px auto 0; padding: 22px 24px;
  background: var(--white); border: 1px solid rgba(var(--primary-rgb), 0.1); border-radius: var(--radius-lg);
}
.engagements-chiffres-title { font-size: 20px; color: var(--primary); margin: 0 0 12px; }
.engagements-chiffres-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--slate); line-height: 1.6; font-size: 15px; }
.engagements-chiffres-list strong { color: var(--primary); }
.engagements-chiffres-list a, .grid-4 .card p a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 576px) { .engagements-chiffres { padding: 18px 16px; } }

/* --- Page parents et familles (parents.html), classes reprises par le guide etudier-en-france.html --- */
.parents-wrap { max-width: 760px; margin: 0 auto; }
.parents-intro { color: var(--slate); margin: 8px 0 24px; }
.parents-steps { list-style: none; counter-reset: parents; margin: 0; padding: 0; display: grid; gap: 14px; }
.parents-step {
  counter-increment: parents; position: relative; padding: 18px 20px 18px 64px;
  background: var(--white); border: 1px solid rgba(var(--primary-rgb), 0.1); border-radius: var(--radius-md);
}
.parents-step::before {
  content: counter(parents, decimal-leading-zero); position: absolute; left: 18px; top: 18px;
  font-weight: 800; font-size: 18px; color: var(--primary);
}
.parents-step-title { font-size: 18px; color: var(--primary); margin: 0 0 6px; }
.parents-step p { margin: 0; color: var(--slate); line-height: 1.6; }
.parents-table-wrap { overflow-x: auto; }
.parents-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 14px; }
.parents-table th, .parents-table td { padding: 10px 12px; border-bottom: 1px solid rgba(var(--primary-rgb), 0.1); text-align: center; }
.parents-table thead th { color: var(--primary); font-weight: 700; }
.parents-table tbody th { text-align: left; font-weight: 600; color: var(--onyx); }
.parents-list { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 10px; line-height: 1.6; color: var(--slate); }
.parents-list strong { color: var(--primary); }
.parents-note { margin: 16px 0 0; font-size: 14px; color: var(--slate); }
.parents-note a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.parents-cta { background-color: var(--primary); }
.parents-cta h2 { color: var(--white); margin-bottom: 15px; }
.parents-cta p { color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 0 auto 30px; }
@media (max-width: 576px) {
  .parents-step { padding: 16px 16px 16px 54px; }
  .parents-step::before { left: 14px; top: 16px; }
  .parents-table { table-layout: fixed; }
  .parents-table th, .parents-table td { padding: 8px 4px; font-size: 12.5px; }
  .parents-table thead th:first-child, .parents-table tbody th { width: 46%; }
  /* Colonne Essentiel masquée sur mobile : elle ne contient que des ✕ et l'introduction dit que le volet commence en Premium */
  .parents-table tr > :nth-child(2) { display: none; }
  /* Tableaux à deux colonnes (guide France) : rien n'est masqué */
  .parents-table--full tr > :nth-child(2) { display: table-cell; }
  .parents-table--full thead th:first-child, .parents-table--full tbody th { width: 55%; }
}

/* --- Fenêtre de bienvenue (offre de 5 % ou 10 % selon la période) --- */
html.welcome-open { overflow: hidden; }
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: rgba(var(--primary-rgb), 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.welcome-overlay.is-open { opacity: 1; }
.welcome-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px 24px 22px;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(var(--primary-rgb), 0.35);
  transform: translateY(12px);
  transition: transform 0.2s ease;
}
.welcome-overlay.is-open .welcome-dialog { transform: none; }
.welcome-dialog:focus { outline: none; }
.welcome-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  color: var(--slate);
  cursor: pointer;
}
.welcome-close:hover { background-color: var(--neutral-bg); color: var(--primary); }
.welcome-title {
  margin: 0 44px 8px 0;
  font-size: 21px;
  line-height: 1.3;
  color: var(--primary);
}
.welcome-desc {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}
.welcome-fields[hidden] { display: none; }
.welcome-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.welcome-input {
  width: 100%;
  min-height: 44px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-radius: var(--radius-md);
  background-color: var(--white);
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--onyx);
}
.welcome-input:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; border-color: var(--secondary); }
.welcome-input[aria-invalid="true"] { border-color: var(--red); }
.welcome-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.welcome-check input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.welcome-check label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
  cursor: pointer;
}
.welcome-check a,
.welcome-legal a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}
.welcome-legal {
  margin: 4px 0 12px;
  font-size: 12.5px;
  color: var(--slate);
}
/* Variante "code affiché" (offre de la période, api/_offre.js) */
.welcome-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 16px 12px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: var(--radius-md);
  background-color: var(--neutral-bg);
  text-align: center;
}
.welcome-code-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
}
.welcome-code-value {
  font-size: clamp(17px, 5.2vw, 22px); /* le code tient sur une ligne dès 320 px */
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--primary);
  white-space: nowrap;
  user-select: all;
}
.welcome-code-until {
  font-size: 13px;
  color: var(--slate);
}
.welcome-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* champ piège anti-robot */
.welcome-turnstile:empty { display: none; }
.welcome-turnstile { margin-bottom: 12px; }
.welcome-feedback {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate);
}
.welcome-feedback:empty { display: none; }
.welcome-feedback.is-error { color: var(--red); font-weight: 600; }
.welcome-feedback.is-success { color: var(--primary); font-weight: 600; }
.welcome-demo {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius-sm);
  background-color: var(--neutral-bg);
  font-size: 13px;
  color: var(--onyx);
}
.welcome-demo[hidden] { display: none; }
.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.welcome-actions .btn { min-height: 44px; }
.welcome-actions [hidden] { display: none !important; }
.welcome-dismiss {
  min-height: 44px;
  padding: 0 8px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.welcome-dismiss:hover { color: var(--primary); }
.welcome-close:focus-visible,
.welcome-dismiss:focus-visible,
.welcome-actions .btn:focus-visible,
.welcome-check input:focus-visible,
.welcome-check a:focus-visible,
.welcome-legal a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (max-width: 576px) {
  .welcome-dialog { padding: 24px 18px 18px; }
  .welcome-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .page-subnav,
  .welcome-overlay,
  .welcome-dialog { transition: none; }
}

/* ===================== Finitions de la nuit du 19/10/2026 (accueil, ancres, accessibilité, mouvement) ===================== */

/* --- Ancres : la cible s'arrête sous l'en-tête fixe, sur toutes les pages --- */
:where([id]) { scroll-margin-top: calc(var(--header-h-scrolled) + 16px); }
.legal-section { scroll-margin-top: calc(var(--header-h-scrolled) + 16px); }
/* Défilement doux seulement une fois la page chargée et l'ancre alignée (js/main.js, initHashAnchor) */
@media (prefers-reduced-motion: no-preference) {
  html.is-ready { scroll-behavior: smooth; }
}

/* --- Bouton du menu mobile : cible de 44 px, focus visible --- */
.burger-menu {
  width: 44px;
  height: 44px;
  padding: 8px;
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: center;
}
.burger-menu:focus-visible,
.header-nav .nav-links a:focus-visible,
.header-nav .logo:focus-visible,
.nav-search button:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.footer a:focus-visible,
.footer button:focus-visible,
.whatsapp-float:focus-visible,
.newsletter-fab:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 3px;
}

/* --- Accueil : hero --- */
.hero-home { position: relative; padding-top: 140px; overflow: hidden; }
.hero-home-veil { position: absolute; inset: 0; z-index: 0; background: rgba(var(--primary-rgb), 0.45); pointer-events: none; }
.hero-home-grid { position: relative; z-index: 1; }
.hero-home-copy { position: relative; z-index: 2; }
.hero-home-stats { position: relative; z-index: 2; }
.hero-slogan { margin-bottom: var(--space-sm); }
.hero-title { margin-bottom: var(--space-md); color: var(--white); }
.hero-lead { max-width: 600px; margin-bottom: var(--space-lg); color: rgba(var(--white-rgb), 0.85); }

/* --- Accueil : titres de section et cartes destinations --- */
.section-title { margin-bottom: var(--space-sm); color: var(--primary); }
.section-intro { max-width: 700px; margin: 0 auto var(--space-xl); color: var(--slate); }
.dest-grid { gap: var(--space-lg); }
.dest-card { padding: 0; overflow: hidden; }
.dest-media { position: relative; height: 160px; overflow: hidden; background-color: var(--neutral-bg); }
.dest-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(var(--white-rgb), 0.95);
  box-shadow: var(--shadow-sm);
}
.dest-flag .flag-icon { margin-right: 0; }
.dest-code { font-size: 12px; font-weight: 700; color: var(--primary); }
.dest-body { display: flex; flex-direction: column; flex-grow: 1; padding: var(--space-lg) var(--space-md) var(--space-md); text-align: left; }
.dest-title { margin-bottom: var(--space-sm); font-size: 18px; }
.dest-desc { flex-grow: 1; font-size: 14px; }
.dest-link { align-self: flex-start; margin-top: var(--space-sm); font-size: 14px; }

/* --- Accueil : raisons de faire confiance --- */
.reason-list { display: flex; flex-direction: column; gap: var(--space-md); }
.reason { display: flex; align-items: flex-start; gap: 12px; }
.reason-icon { flex-shrink: 0; margin-top: 2px; color: var(--secondary-text); }
.reason-title { margin-bottom: 2px; font-size: 16px; font-weight: 700; color: var(--primary); }
.reason-text { font-size: 14px; }

/* Témoignages : le nom passe en h3 (ordre des titres), même rendu */
.vt-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--primary); }

/* --- Révélations au défilement : sobres (400 ms) --- */
.fade-in-up { transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
.fade-in-up.fade-armed { transform: translateY(16px); }

/* --- Mouvement réduit : animations coupées, contenu visible d'emblée --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .fade-in-up.fade-armed { opacity: 1; transform: none; }
  /* Carrousels des destinations : première photo fixe */
  .destination-carousel .carousel-img { animation: none !important; opacity: 0; }
  .destination-carousel .carousel-img:first-child { opacity: 1; }
  .card:hover, .card-featured:hover, .btn:hover, .tilt-card { transform: none !important; }
  .card:hover .destination-carousel .carousel-img { transform: none; }
}

/* --- En-tête : logo et bouton sur une seule ligne --- */
.header-nav .logo,
.header-nav .btn-cta { white-space: nowrap; }
.header-nav .logo { flex-shrink: 0; }

/* --- Hero de l'accueil : colonne de texte assez large pour les trois boutons sur une ligne --- */
@media (min-width: 993px) {
  .hero-home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .hero-home .btn-lg { padding-left: 24px; padding-right: 24px; }
}

/* Pied de page : le libellé en gras est déjà un bloc, le saut de ligne qui le suit ferait une ligne vide */
.footer-contact-item strong + br { display: none; }

/* Chiffres clés sur fond gris : cartes blanches pour qu'elles se détachent */
.bg-light .stat-card { background-color: var(--white); }

/* En-tête sur téléphone : logo, langue et menu tiennent sur une ligne de 320 à 576 px */
@media (max-width: 576px) {
  .nav-container { padding-left: 16px; padding-right: 12px; }
  .header-nav .logo { font-size: 17px; gap: 6px; }
  .header-nav .logo svg { width: 28px; height: 28px; }
  .nav-actions { gap: 8px; margin-right: 4px; }
  .lang-switch { margin-right: 0; }
  .lang-switch button { min-width: 40px; }
}
@media (max-width: 400px) {
  .header-nav .logo { font-size: 16px; }
  .lang-switch button { min-width: 38px; min-height: var(--target-min); padding: 0 8px; }
}
@media (max-width: 359px) {
  .header-nav .logo svg { display: none; } /* le nom complet reste affiché */
}
@media (max-width: 1200px) {
  .nav-actions { margin-left: auto; }
}

/* Menu mobile : le bouton jaune garde son texte bleu nuit (le blanc des liens donnait 1,6:1) */
.header-nav .nav-links a.btn-tertiary { color: var(--primary); }
.header-nav .nav-links a.btn::after { display: none; }
/* Bouton du menu : les trois traits deviennent une croix quand le menu est ouvert */
.burger-menu svg line { transform-box: view-box; transform-origin: 12px 12px; transition: transform 0.2s ease, opacity 0.2s ease; }
.burger-menu.active svg line:nth-child(1) { opacity: 0; }
.burger-menu.active svg line:nth-child(2) { transform: rotate(45deg) translateY(6px); }
.burger-menu.active svg line:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }

/* Cartes destinations : l'image touche les bords de la carte, aussi sous 576 px
   (la règle générale « .card { padding: 24px 16px !important } » ajoutait un cadre autour de la photo) */
@media (max-width: 576px) {
  .card.dest-card { padding: 0 !important; }
  .card.case-card { padding: 0 !important; } /* témoignages et études de cas : marges portées par leur contenu */
}

/* Code déontologique : la citation a déjà ses guillemets « », le grand guillemet décoratif
   (en Georgia, seconde police) est retiré ; marges internes réduites sur téléphone */
.deontology-blockquote { padding: 18px 20px; }
.deontology-blockquote::before { content: none; }
@media (max-width: 576px) {
  .trust-accent-card-content { padding: 24px 20px 24px 24px; }
  .deontology-blockquote { padding: 14px 16px; font-size: 14.5px; }
}

/* Recherche de l'en-tête : anneau de focus visible autour du champ (le champ lui-même n'a pas de contour) */
.nav-search:focus-within { box-shadow: 0 0 0 2px var(--tertiary); }

/* ===== Retours d'A2 (19/10/2026) ===== */
/* Résumé « L'essentiel » des pages légales : bloc avec icône positionnée, pour que le texte
   (avec ou sans <span>, avec du gras) reste un seul paragraphe au lieu de colonnes flex */
.legal-tldr li { display: block; position: relative; padding-left: 29px; }
.legal-tldr li svg { position: absolute; left: 0; top: 1px; margin-top: 0; }

/* Titres de page longs (« d'accompagnement ») : pas de débordement à 320 px */
@media (max-width: 360px) {
  .hero-page-title { font-size: 24px !important; overflow-wrap: break-word; }
}

/* Liens et étiquettes en bleu glacier sur fond clair (blog, recherche) : version foncée AA.
   Préfixe body : passe devant css/blog.css et css/search.css, chargées après cette feuille. */
body .article-body a,
body .comment-consent a { color: var(--secondary-text); text-decoration: underline; text-underline-offset: 3px; }
body .facet-reset,
body .result-type { color: var(--secondary-text); }

/* Champs de formulaire : indicateur de focus visible (le blog et la newsletter le retiraient) */
body .comment-form input:focus-visible,
body .comment-form textarea:focus-visible,
body .newsletter-form input[type="email"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ===================== Motion design (lot du 19/10/2026) ===================== */

/* --- Compteurs sur chiffres réels (js/main.js, initCounters) ---
   Chiffres de largeur égale : la valeur ne tremble pas pendant la montée depuis 0. */
.stat-num,
.stat-number { font-variant-numeric: tabular-nums; }

/* --- Cartes en cascade par rangée (js/main.js, initCascade) ---
   .cascade-wait : carte encore sous l'écran, posée par le script uniquement.
   .cascade-run : arrivée de la carte, retirée dès la fin pour rendre ses transitions d'origine.
   La propriété translate (et non transform) laisse intacts le survol des cartes et le tilt. */
.cascade-wait { opacity: 0; translate: 0 24px; }
.cascade-run {
  transition: opacity 0.4s var(--ease-journey) var(--cascade-delay, 0ms),
              translate 0.48s var(--ease-journey) var(--cascade-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .cascade-wait { opacity: 1; translate: none; }
}

/* --- En-tête intelligent (js/main.js, initScrollEffects) ---
   Tout se fait par translation : la boîte de l'en-tête garde 80 px, la mise en page ne bouge pas.
   .scrolled : l'en-tête monte de 16 px (64 px visibles) et son contenu redescend de 8 px pour rester centré.
   .is-hidden : sorti par le haut en descendant (32 px de plus pour cacher l'ombre), de retour au focus clavier.
   Fond bleu nuit plein, sans flou ni transparence. */
.header-nav {
  transition: transform 0.32s var(--ease-journey), box-shadow 0.3s ease;
}
.header-nav.scrolled {
  padding: 0;
  transform: translateY(calc(var(--header-h-scrolled) - var(--header-h)));
}
.header-nav .nav-container { transition: transform 0.32s var(--ease-journey); }
.header-nav.scrolled .nav-container {
  transform: translateY(calc((var(--header-h) - var(--header-h-scrolled)) / 2));
}
.header-nav.is-hidden { transform: translateY(calc(-100% - 32px)); }
.header-nav.is-hidden:focus-within { transform: translateY(calc(var(--header-h-scrolled) - var(--header-h))); }
/* Menu mobile : une fois l'en-tête translaté, sa position se calcule depuis le conteneur, et non plus
   depuis la fenêtre. Ces valeurs le posent juste sous l'en-tête réduit, jusqu'au bas de l'écran. */
@media (max-width: 1200px) {
  .header-nav.scrolled .nav-links {
    top: calc(var(--header-h-scrolled) + (var(--header-h) - var(--header-h-scrolled)) / 2);
    height: calc(100vh - var(--header-h-scrolled));
  }
}
/* Menu de rubriques de l'accueil : remonte en haut de l'écran quand l'en-tête est masqué */
.page-subnav { transition: transform 0.32s var(--ease-journey); }
.nav-is-hidden .page-subnav { transform: translateY(calc(-1 * var(--header-h))); }
/* --- Texte réservé aux lecteurs d'écran (masqué à l'écran, lu par les technologies d'assistance) --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Titres mot par mot (js/main.js, initWordReveal) ---
   Chaque mot est dans un masque (overflow hidden) ; les marges intérieures de 0,12 em, compensées par des
   marges négatives, laissent la place aux accents des capitales et aux jambages sans changer la hauteur
   de ligne. .words-wait (posé par le script) : mots sous leur ligne ; .words-run : montée en 480 ms. */
[data-words] .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0;
  margin: -0.12em 0;
}
[data-words] .word > span { display: inline-block; }
.words-wait .word > span { transform: translateY(115%); }
.words-run .word > span { transition: transform 0.48s var(--ease-journey) var(--word-delay, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .words-wait .word > span { transform: none; }
}

/* --- Vitrine des destinations (js/main.js, initVitrine) ---
   .vitrine-on n'est posé qu'à partir de 1200 px avec une souris. Sections pays à gauche (7/12, texte puis
   fiche), panneau photo fixe à droite (5/12). Les photos sont superposées ; celle du pays lu passe au
   premier plan par un fondu, avec un léger recul de l'échelle (transform et opacity seulement). */
.vitrine-media { display: none; }
@media (min-width: 1200px) {
  .vitrine.vitrine-on {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-xl);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px;
  }
  .vitrine-on > section { grid-column: 1; background-color: transparent; }
  .vitrine-on > section + section { border-top: 1px solid rgba(var(--primary-rgb), 0.1); }
  .vitrine-on .grid-responsive-hero { grid-template-columns: 1fr; }
  .vitrine-on .vitrine-fiche-media { display: none; }
  .vitrine-on .vitrine-media {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 4;
    padding: var(--space-xl) 0;
  }
  .vitrine-stage {
    position: sticky;
    top: calc(var(--header-h-scrolled) + 24px);
    height: min(calc(100vh - var(--header-h-scrolled) - 48px), 680px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--neutral-bg);
    box-shadow: var(--shadow-journey);
  }
  .vitrine-frame {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.48s var(--ease-journey);
  }
  .vitrine-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform 0.48s var(--ease-journey);
  }
  .vitrine-frame.is-active { opacity: 1; }
  .vitrine-frame.no-fade,
  .vitrine-frame.no-fade img { transition: none; } /* première photo posée sans fondu */
  .vitrine-frame.is-active img { transform: none; }
  /* Légende : blanc sur bleu nuit plein (contraste 14:1), sans transparence */
  .vitrine-caption {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background-color: var(--primary);
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
  }
}

/* --- FAQ à ouverture douce (accordéon js/main.js, initFAQAccordion) ---
   La réponse prend sa hauteur réelle d'un coup (plus de max-height à 320 px qui coupait les longues
   réponses, plus d'animation de hauteur) ; son contenu apparaît en fondu et glisse de 6 px. */
.faq-body {
  display: none;
  max-height: none;
  padding: 0 26px 22px;
  transition: none;
}
.faq-item.active .faq-body {
  display: block;
  max-height: none;
  padding: 0 26px 22px;
  animation: faq-reveal 0.28s var(--ease-journey);
}
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- Formulaires en étapes (contact, simulateur ; js/main.js, initStepForms) ---
   Chaque étape entre en glissant de 14 px, ses choix arrivent en cascade (30 ms d'écart, plafonné). */
.simulator-step.active,
.contact-step.active { animation: step-in 0.4s var(--ease-journey); }
.simulator-step.active .form-radio-card,
.contact-step.active .form-radio-card {
  animation: step-in 0.36s var(--ease-journey) backwards;
  animation-delay: calc(var(--n, 0) * 30ms + 60ms);
}
.form-radio-group > :nth-child(2) { --n: 1; }
.form-radio-group > :nth-child(3) { --n: 2; }
.form-radio-group > :nth-child(4) { --n: 3; }
.form-radio-group > :nth-child(5) { --n: 4; }
.form-radio-group > :nth-child(6) { --n: 5; }
.form-radio-group > :nth-child(n + 7) { --n: 6; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* Mouvement réduit : la règle générale raccourcit les durées mais garde les délais ; ici tout est coupé */
@media (prefers-reduced-motion: reduce) {
  .faq-item.active .faq-body,
  .simulator-step.active,
  .contact-step.active,
  .simulator-step.active .form-radio-card,
  .contact-step.active .form-radio-card { animation: none; }
  .step-seg::after { transition: none; }
}
/* Barre d'étapes à segments : faits en bleu nuit, en cours en glacier foncé (AA), à venir en gris.
   Le remplissage d'un segment est une mise à l'échelle (scaleX), la couleur change sans transition. */
.step-progress-bar.has-segments {
  display: flex;
  gap: 4px;
  height: 6px;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.step-progress-bar.has-segments .step-progress-fill { display: none; }
.step-seg {
  position: relative;
  flex: 1;
  border-radius: var(--radius-full);
  background-color: rgba(var(--primary-rgb), 0.12);
  overflow: hidden;
}
.step-seg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.36s var(--ease-journey);
}
.step-seg.is-done::after { transform: scaleX(1); }
.step-seg.is-current::after { transform: scaleX(1); background-color: var(--secondary-text); }

/* --- Liens du menu soulignés qui se tracent ---
   Trait doré pleine largeur, replié par scaleX(0) : au survol et au focus clavier il se trace depuis la
   gauche, en sortant il se retire vers la droite. La page courante (aria-current="page") reste soulignée. */
.header-nav .nav-links a::after {
  width: 100%;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.32s var(--ease-journey);
}
.header-nav .nav-links a:hover::after,
.header-nav .nav-links a:focus-visible::after,
.header-nav .nav-links a.active::after,
.header-nav .nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ===================== Bloc Confiance (accueil, #pourquoi) ===================== */
.trust-intro { margin-bottom: var(--space-lg); }
/* Trois engagements numérotés, séparés par des filets (pas de cartes) */
.trust-pillars { list-style: none; margin: 0; padding: 0; counter-reset: pillar; }
.trust-pillar {
  counter-increment: pillar;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid rgba(var(--primary-rgb), 0.1);
}
.trust-pillar:last-child { border-bottom: 1px solid rgba(var(--primary-rgb), 0.1); }
.trust-pillar-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background-color: var(--accent-light);
  color: var(--primary);
}
.trust-pillar-icon svg { width: 22px; height: 22px; }
/* Numéro de l'engagement, en exposant de l'icône (01, 02, 03) */
.trust-pillar-icon::after {
  content: counter(pillar, decimal-leading-zero);
  position: absolute;
  top: -8px;
  right: -10px;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}
.trust-pillar-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--primary); }
.trust-pillar-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--slate); }

/* Code déontologique : panneau bleu nuit plein, filet or, citation en blanc (contraste 14:1) */
.trust-code {
  position: relative;
  padding: 40px;
  border-radius: var(--radius-lg);
  background-color: var(--primary);
  color: var(--white);
  box-shadow: 0 24px 48px -24px rgba(var(--primary-rgb), 0.55);
  overflow: hidden;
}
.trust-code::before {
  content: '';
  position: absolute;
  left: 40px;
  right: 40px;
  top: 0;
  height: 3px;
  background-color: var(--tertiary);
}
.trust-code-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 195, 0, 0.55);
  color: var(--tertiary);
  margin-bottom: 18px;
}
.trust-code-icon svg { width: 24px; height: 24px; }
.trust-code-title { margin: 0 0 14px; font-size: 22px; font-weight: 700; color: var(--white); }
.trust-code-quote { margin: 0 0 28px; padding: 0; border: 0; }
.trust-code-quote p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--white); }
.trust-code-link { width: fit-content; }
@media (max-width: 576px) {
  .trust-code { padding: 28px 22px; }
  .trust-code::before { left: 22px; right: 22px; }
  .trust-code-quote p { font-size: 15.5px; }
}

/* ===================== Page Destinations : navigation, en-têtes et fiches ===================== */
/* Le menu des pays (page-subnav) s'ajoute sous l'en-tête : le titre de page et les ancres lui font place */
.has-page-subnav .hero-page { padding-top: calc(140px + var(--subnav-h)); }
@media (max-width: 992px) {
  .has-page-subnav .hero-page { padding-top: calc(120px + var(--subnav-h)) !important; }
}
.has-page-subnav .vitrine > section[id] {
  scroll-margin-top: calc(var(--header-h-scrolled) + var(--subnav-h) + 8px);
}
@media (min-width: 1200px) {
  .has-page-subnav .vitrine-stage {
    top: calc(var(--header-h-scrolled) + var(--subnav-h) + 24px);
    height: min(calc(100vh - var(--header-h-scrolled) - var(--subnav-h) - 48px), 680px);
  }
}
/* En-tête de section pays : drapeau dans une pastille, aligné sur le titre */
.dest-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.dest-head h2 { margin: 0; }
.dest-flag-tile {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--white);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.1), var(--shadow-sm);
}
.dest-flag-tile svg { width: 28px; height: auto; }
/* Fiche pratique : repères en grille (libellé au-dessus, valeur dessous) */
.dest-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  margin: 0;
}
.dest-fact {
  padding: 12px 0;
  border-top: 1px solid rgba(var(--primary-rgb), 0.1);
}
.dest-fact--wide { grid-column: 1 / -1; }
.dest-fact dt { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--secondary-text); }
.dest-fact dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--onyx); }
/* Les valeurs viennent de l'ancienne liste « Libellé : valeur » (minuscule initiale) : majuscule à l'affichage */
.dest-fact dd::first-letter { text-transform: uppercase; }
@media (max-width: 576px) {
  .dest-facts { grid-template-columns: 1fr; }
}

/* --- Processus : formules concernées par chaque étape (étiquettes, seules les formules incluses) --- */
.proc-formulas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.proc-formulas li {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
}

/* --- Menu « Sur cette page » centré ---
   Le titre et la liste forment un groupe centré dans la barre. La liste ne s'étire plus (flex: 0 1 auto) :
   quand elle déborde (mobile), elle se réduit à la place disponible et défile à l'intérieur, le premier
   lien restant accessible. */
.page-subnav-inner { justify-content: center; }
.page-subnav-list { flex: 0 1 auto; }

/* ===================== FAQ : questions numérotées, état ouvert affirmé (toutes les pages) ===================== */
.faq-list { counter-reset: faq; display: flex; flex-direction: column; gap: 12px; }
.faq-list .faq-item {
  counter-increment: faq;
  margin: 0;
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  border-radius: var(--radius-lg);
  background-color: var(--white);
  box-shadow: none;
  transition: border-color 0.24s var(--ease-journey), box-shadow 0.24s var(--ease-journey);
}
.faq-list .faq-item:hover {
  border-color: rgba(74, 166, 235, 0.55);
  box-shadow: 0 14px 28px -20px rgba(var(--primary-rgb), 0.45);
}
.faq-list .faq-item.active {
  border-color: var(--primary);
  box-shadow: 0 18px 36px -22px rgba(var(--primary-rgb), 0.55);
  transform: none;
}
.faq-list .faq-header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  border-radius: var(--radius-lg);
}
/* Numéro de la question (01, 02...) : repère de lecture, en glacier foncé (contraste AA) */
.faq-list .faq-header::before {
  content: counter(faq, decimal-leading-zero);
  font-size: 13px;
  font-weight: 800;
  color: var(--secondary-text);
  letter-spacing: 0.02em;
}
.faq-list .faq-item.active .faq-header::before { color: var(--primary); }
.faq-list .faq-header svg {
  justify-self: end;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  transition: transform 0.28s var(--ease-journey), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.faq-list .faq-item:hover .faq-header svg { border-color: var(--secondary); }
.faq-list .faq-item.active .faq-header svg {
  transform: rotate(180deg);
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
/* Réponse alignée sur le texte de la question, sous un filet */
.faq-list .faq-item.active .faq-body {
  padding: 0 22px 22px calc(22px + 30px + 14px);
}
.faq-list .faq-body p { margin: 0; padding-top: 14px; border-top: 1px solid rgba(var(--primary-rgb), 0.08); }
@media (max-width: 576px) {
  .faq-list .faq-header { grid-template-columns: 24px minmax(0, 1fr) 34px; gap: 10px; padding: 16px; }
  .faq-list .faq-header svg { width: 34px; height: 34px; padding: 7px; }
  .faq-list .faq-item.active .faq-body { padding: 0 16px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-list .faq-item, .faq-list .faq-header svg { transition: none; }
}

/* ===================== Bouton flottant haut / bas de page (js/main.js, initScrollJump) ===================== */
/* Au-dessus des boutons newsletter et WhatsApp. Flèche vers le bas dans la première moitié de la page,
   vers le haut ensuite (rotation). Masqué (et hors tabulation) sur les pages courtes. */
.scroll-jump {
  position: fixed;
  right: 36px;
  bottom: 172px;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.scroll-jump.is-visible { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
.scroll-jump svg { width: 22px; height: 22px; transition: transform 0.28s var(--ease-journey); }
.scroll-jump.is-up svg { transform: rotate(180deg); }
.scroll-jump:hover { background-color: var(--secondary-text); }
.scroll-jump:focus-visible { outline: 2px solid var(--tertiary); outline-offset: 3px; }
@media (max-width: 768px) {
  .scroll-jump { right: 24px; bottom: 146px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-jump, .scroll-jump svg { transition: none; }
}

/* ===================== Démonstrations des outils (packs.html, js/main.js initDemos) ===================== */
/* Carte produit : texte à gauche, démonstration à droite sur ordinateur ; démonstration sous le texte sur mobile */
@media (min-width: 993px) {
  .product-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    column-gap: 48px;
    align-items: start;
  }
  .product-card > * { grid-column: 1; }
  .product-card > .demo { grid-column: 2; grid-row: 1 / span 9; align-self: center; margin: 0; }
}
.demo { margin: 28px 0 0; }
.demo-window {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  background-color: var(--white);
  box-shadow: 0 24px 48px -28px rgba(var(--primary-rgb), 0.5);
  overflow: hidden;
}
.demo-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--primary);
  color: var(--white);
}
.demo-bar-title { font-size: 14px; font-weight: 700; }
.demo-bar-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.85); }
.demo-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.demo-label { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--secondary-text); }
.demo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.demo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background-color: var(--neutral-bg);
  font-size: 13.5px;
  color: var(--onyx);
}
.demo-row-text { flex: 1; min-width: 0; }
.demo-status { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--slate); }
.demo-status--ok { color: var(--green-text); }
/* Case cochée : coche dessinée en CSS (bordure tournée), apparition par mise à l'échelle */
.demo-check {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary);
}
.demo-check::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  width: 5px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.demo-progress { height: 6px; border-radius: var(--radius-full); background-color: rgba(var(--primary-rgb), 0.1); overflow: hidden; }
.demo-progress-fill { display: block; height: 100%; background-color: var(--primary); transform-origin: left center; }
.demo-toast {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--tertiary);
  background-color: var(--primary);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
}
.demo-file { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--primary); }
.demo-file-icon { width: 22px; height: 26px; border-radius: 3px; border: 2px solid var(--primary); position: relative; flex-shrink: 0; }
.demo-file-icon::after { content: ''; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background-color: var(--primary); box-shadow: 0 5px 0 var(--primary); }
.demo-doc { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-radius: var(--radius-md); border: 1px solid rgba(var(--primary-rgb), 0.12); }
.demo-doc-line { display: block; height: 7px; border-radius: var(--radius-full); background-color: rgba(var(--primary-rgb), 0.14); }
.demo-doc-line--title { width: 55%; height: 10px; background-color: var(--primary); }
.demo-doc-line--short { width: 70%; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-action { padding: 8px 12px; border-radius: var(--radius-md); background-color: var(--tertiary); color: var(--primary); font-size: 13px; font-weight: 700; }
.demo-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--slate); }
.demo-replay {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.demo-replay:hover { border-color: var(--primary); }
.demo-replay:focus-visible { outline: 2px solid var(--tertiary); outline-offset: 2px; }
/* Version resserrée (retour de Ravelir : moins large, moins de texte) */
#mbm-cv .container,
#mbm-platform .container { max-width: 1040px; }
@media (min-width: 993px) {
  .product-card { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 40px; padding: 32px 36px; }
}
.demo-body { padding: 12px; gap: 8px; }
.demo-row { padding: 8px 10px; font-size: 12.5px; }
.demo-status { font-size: 11.5px; }
.demo-check { width: 18px; height: 18px; }
.demo-check::after { left: 6px; top: 3px; }
.demo-label { font-size: 12px; margin-top: 2px; }
.demo-toast, .demo-file { font-size: 12.5px; }
.demo-action { padding: 7px 10px; font-size: 12px; }
.demo-caption { font-size: 12px; }
#mbm-cv .comparateur { max-width: 360px; }
/* Comparateur dans la carte MBM CV : même place que la démonstration (colonne de droite) */
.product-card > .comparateur { margin: 28px auto 0; }
@media (min-width: 993px) {
  .product-card > .comparateur { grid-column: 2; grid-row: 1 / span 9; align-self: center; margin: 0; }
}
@media (min-width: 993px) {
  #mbm-cv .avant-apres { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; }
}

/* Séquence : étapes masquées tant que la démonstration est armée, puis révélées une à une */
.demo-armed [data-demo-step] { opacity: 0; transform: translateY(8px); }
.demo-armed [data-demo-step].is-on {
  opacity: 1;
  transform: none;
  transition: opacity 0.36s var(--ease-journey), transform 0.36s var(--ease-journey);
}
.demo-armed .demo-check { transform: scale(0.4); }
.demo-armed .is-on .demo-check { transform: none; transition: transform 0.32s var(--ease-journey) 0.12s; }
.demo-armed .demo-progress-fill { transform: scaleX(0); }
.demo-armed .demo-progress.is-on .demo-progress-fill { transform: scaleX(1); transition: transform 0.48s var(--ease-journey); }
@media (prefers-reduced-motion: reduce) {
  .demo-armed [data-demo-step], .demo-armed .demo-check, .demo-armed .demo-progress-fill { opacity: 1; transform: none; }
}

/* Filet doré d'avancement de la lecture, en bas de l'en-tête (or sur bleu nuit, 9:1) */
.nav-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--tertiary);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* --- Comparateur avant / après (packs.html #mbm-cv ; js/main.js, initComparateur) ---
   Deux captures A4 superposées ; « après » est découpé à gauche par clip-path selon --pos. Le contrôle est
   un input range transparent posé par-dessus : clavier, tactile et étiquette accessible sans code de plus.
   La poignée suit --pos par translation. Rien n'est animé : l'image suit la main, sans transition.
   Sans JavaScript, curseur et poignée restent masqués et la figure montre une moitié de chaque CV. */
.avant-apres {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  margin-top: var(--space-xl);
}
@media (min-width: 992px) {
  .avant-apres { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
}
.avant-apres-texte .headline-sm { margin-bottom: var(--space-md); }
.avant-apres-texte .body-md { margin-bottom: var(--space-md); max-width: 62ch; }
.avant-apres-liste {
  display: grid;
  gap: 10px;
  max-width: 62ch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.avant-apres-liste li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--slate);
}
/* Coche tracée en CSS (glacier foncé, 5,2:1 sur le fond clair) */
.avant-apres-liste li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--secondary-text);
  border-bottom: 2px solid var(--secondary-text);
  transform: rotate(-45deg);
}
.comparateur {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
.comparateur-cadre {
  --pos: 50%;
  position: relative;
  aspect-ratio: 1112 / 1572;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--white);
  box-shadow: var(--shadow-journey);
}
.comparateur-cadre img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.comparateur-apres { clip-path: inset(0 0 0 var(--pos)); }
/* Sans JavaScript : filet fixe à la jonction des deux moitiés (la poignée le remplace sinon) */
.comparateur:not(.comparateur-actif) .comparateur-cadre::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background-color: var(--primary);
}
/* Étiquettes blanches à texte bleu nuit : lisibles sur la page blanche comme sur le bandeau bleu nuit */
.comparateur-etiquette {
  position: absolute;
  top: 12px;
  z-index: 1;
  padding: 4px 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}
.comparateur-etiquette-avant { left: 12px; }
.comparateur-etiquette-apres { right: 12px; }
.comparateur-curseur,
.comparateur-poignee { display: none; }
.comparateur-actif .comparateur-curseur {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}
/* Pouce de 2 px : sa position coïncide avec la ligne de la poignée sur toute la largeur */
.comparateur-curseur::-webkit-slider-thumb { width: 2px; height: 100%; -webkit-appearance: none; appearance: none; }
.comparateur-curseur::-moz-range-thumb { width: 2px; height: 100%; border: 0; }
.comparateur-actif .comparateur-poignee {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  pointer-events: none;
  transform: translateX(calc(var(--pos) - 50%));
}
.comparateur-poignee::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background-color: var(--primary);
}
.comparateur-bouton {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid var(--white);
  border-radius: var(--radius-full);
  background-color: var(--primary);
  box-shadow: var(--shadow-md);
  color: var(--white);
}
.comparateur-curseur:focus-visible + .comparateur-poignee .comparateur-bouton {
  outline: 3px solid var(--secondary-text);
  outline-offset: 2px;
}
.comparateur-legende {
  margin-top: var(--space-sm);
  font-size: 14px;
  color: var(--slate);
  text-align: center;
}

/* ===================== Audit des tailles et du design (19/10/2026) ===================== */
/* Mesures relevées sur 17 pages à 375, 768, 1024 et 1440 px ; rapport : AUDIT-DESIGN-2026-10-19.md */

/* --- Longueur de lecture : un paragraphe ne dépasse pas --measure (environ 72 caractères).
   Avant : 137 à 161 caractères par ligne sur packs, processus et l'accueil, 117 sur la recherche. --- */
main p,
section p { max-width: var(--measure); }
/* Un paragraphe centré reste centré sous son titre */
.text-center p,
p.text-center,
[style*="text-align:center"] p,
[style*="text-align: center"] p,
.article-cta p,
.legal-contact-cta p,
.hero-page p { margin-left: auto; margin-right: auto; }
.section-intro { max-width: var(--measure); }
/* Articles du blog : colonne à la longueur de lecture (760 px, soit 90 caractères, avant).
   Préfixe body : passe devant css/blog.css, chargée après cette feuille. */
body .article-wrap,
body .article-interactions { max-width: 36em; }

/* --- Hiérarchie : un h2 de bandeau (.display-lg) ne prend pas la taille du h1 de l'accueil --- */
h2.display-lg { font-size: var(--fs-h1); }

/* --- Jaune réservé au bouton d'action : le bouton flottant de la lettre d'information passe en blanc
   (avec celui de l'en-tête et la langue active, quatre éléments jaunes partageaient chaque écran) --- */
.newsletter-fab {
  background: var(--white);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
}
.newsletter-fab:hover { box-shadow: var(--shadow-lg); }

/* --- Cibles tactiles de 44 px --- */
/* Menu de l'en-tête (33 px de haut) : zone agrandie, trait doré à la même place qu'avant */
@media (min-width: 1201px) {
  .header-nav .nav-links a { padding: 12px 0; }
  .header-nav .nav-links a::after { bottom: 6px; }
}
/* Recherche de l'en-tête : champ et bouton occupent toute la hauteur de la pastille (44 px, comme la langue) */
.nav-search { height: var(--target-min); }
.nav-search input,
.nav-search button { align-self: stretch; }
.nav-search button { padding: 0 8px; }
/* Pied de page : liens légaux et bouton « Gérer les cookies » (17 à 20 px de haut avant).
   Le soulignement se trace par transform (règle : animer seulement transform et opacity). */
.footer-bottom-links a,
.footer-cookie-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}
.footer-bottom-links a { padding-bottom: 0; transition: color var(--transition-fast); }
.footer-bottom-links a::after {
  bottom: 11px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.footer-bottom-links a:hover::after { width: 100%; transform: scaleX(1); }
/* Filtres du blog et de la recherche, partage d'article : 26 à 36 px de haut avant */
body .blog-chip,
body .facet-chip,
body .share-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

/* --- Tableau comparatif (packs.html) : alignements et rangées de rubrique en classes
   (450 styles en ligne retirés du HTML) --- */
#comparatif .comparison-table th:not(:first-child),
#comparatif .comparison-table td:not(:first-child) { text-align: center; }
.comparison-table td.sect {
  background: var(--primary);
  color: var(--white);
  font-size: var(--fs-label);
  font-weight: 700;
  text-align: left;
}
.comparison-table tr:hover td.sect { background: var(--primary); }
.cmp-note { font-size: var(--fs-label); color: var(--slate); }
/* Listes de lecture (repères budget, engagements de l'accueil) et pages légales en une colonne (tablette) */
.budget-list li,
.trust-pillar { max-width: var(--measure); }
@media (max-width: 900px) {
  .legal-layout { max-width: var(--measure); }
}


/* --- Destinations : texte d'introduction et fiche pratique rapprochés quand ils sont empilés
   (mobile, tablette, vitrine). Retour de Ravelir : 44 à 68 px d'écart, trop grand depuis le retrait
   des listes « Ce que nous prenons en charge ». 4 px d'écart de rangée + 20 px de marge du paragraphe = 24 px.
   L'écart horizontal des deux colonnes (993 à 1199 px) ne change pas. --- */
.vitrine > section .grid-responsive-hero { row-gap: 4px; }

/* =====================================================================
   Avis clients (avis.html, bloc #avis-clients de l'accueil, js/avis.js)
   Étoiles décoratives : la note est toujours écrite en clair à côté.
   ===================================================================== */
:root {
  --star: var(--tertiary);        /* étoile pleine, jaune or de la charte */
  --star-edge: #9A7400;           /* contour de l'étoile pleine (4,3:1 sur blanc) */
  --star-empty: #E2E7EE;          /* étoile vide */
  --star-empty-edge: #8A94A3;     /* contour de l'étoile vide du formulaire (3,1:1 sur blanc) */
}

/* hidden doit l'emporter sur le display des classes (.btn, .section, flex du résumé) */
[data-avis-home][hidden],
[data-avis-summary][hidden],
[data-avis-more][hidden] { display: none !important; }

.stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; vertical-align: middle; }
.stars svg { width: 18px; height: 18px; margin-right: 2px; }
.stars--lg svg { width: 26px; height: 26px; margin-right: 3px; }
.stars-track svg { fill: var(--star-empty); }
.stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; }
.stars-fill svg { fill: var(--star); stroke: var(--star-edge); stroke-width: 1; }

/* Résumé : note moyenne, nombre d'avis, répartition */
.avis-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin: var(--space-lg) 0 var(--space-xl); }
.avis-summary--center { justify-content: center; text-align: left; margin-top: 0; }
/* Résumé centré sur petit écran : note, étoiles et nombre d'avis empilés sur le même axe */
@media (max-width: 576px) {
  .avis-summary--center { flex-direction: column; gap: var(--space-sm); text-align: center; }
  .avis-summary--center .avis-bars { flex: none; width: 100%; margin-top: var(--space-sm); }
}
.avis-score { display: flex; align-items: baseline; gap: var(--space-sm); }
.avis-score-value { font-size: var(--fs-h1); font-weight: 800; color: var(--primary); line-height: 1; }
.avis-score-max { font-size: var(--fs-body); color: var(--slate); }
.avis-score-count { margin: var(--space-sm) 0 0; font-size: var(--fs-small); color: var(--slate); }
.avis-score-count a { color: var(--secondary-text); text-decoration: underline; text-underline-offset: 3px; }
.avis-bars { list-style: none; margin: 0; padding: 0; flex: 1 1 260px; max-width: 360px; }
.avis-bars li { display: grid; grid-template-columns: 76px 1fr 32px; align-items: center; gap: var(--space-sm); font-size: var(--fs-label); color: var(--slate); margin-bottom: 6px; }
.avis-bar { height: 8px; border-radius: var(--radius-full); background-color: var(--neutral-bg); overflow: hidden; }
.avis-bar span { display: block; height: 100%; border-radius: var(--radius-full); background-color: var(--primary); }
.avis-bar-count { text-align: right; font-weight: 600; color: var(--primary); }

/* Liste et cartes d'avis */
.avis-list { display: grid; gap: var(--space-md); }
@media (min-width: 900px) {
  .avis-list--home { grid-template-columns: repeat(3, 1fr); }
}
.avis-card { background-color: var(--white); border: 1px solid rgba(var(--primary-rgb), 0.1); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-sm); }
.avis-card-head { display: flex; align-items: center; gap: var(--space-sm); }
.avis-card-note { font-size: var(--fs-small); font-weight: 700; color: var(--primary); }
.avis-card-title { font-size: 18px; font-weight: 700; color: var(--primary); margin: 12px 0 6px; }
.avis-card-text { color: var(--onyx); max-width: var(--measure); margin: 10px 0 14px; overflow-wrap: anywhere; }
.avis-card-title + .avis-card-text { margin-top: 0; }
.avis-card-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-label); color: var(--slate-muted); }
.avis-card-author { font-weight: 600; color: var(--primary); }
.avis-card-reply { margin-top: 14px; padding: 12px 16px; background-color: var(--neutral-bg); border-left: 3px solid var(--secondary); border-radius: var(--radius-md); font-size: var(--fs-small); color: var(--onyx); }
.avis-card-reply p { margin: 4px 0 0; }
.avis-card-reply-title { font-weight: 700; color: var(--primary); }
.avis-empty { color: var(--slate); max-width: var(--measure); }
.avis-more-wrap { text-align: center; margin-top: var(--space-lg); }
#avis-publies .container { max-width: 880px; } /* une colonne de lecture, pas toute la largeur */

/* Formulaire et règles de publication */
.avis-layout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 992px) {
  .avis-layout { grid-template-columns: 7fr 5fr; }
}
.avis-form-card { background-color: var(--white); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-md); }
@media (max-width: 600px) {
  .avis-form-card { padding: 24px 20px; }
}
.avis-form-intro { color: var(--slate); margin: var(--space-sm) 0 var(--space-lg); }
.avis-form-row { display: grid; gap: 0 var(--space-md); align-items: end; } /* listes alignées même si un libellé passe sur 2 lignes */
@media (min-width: 600px) {
  .avis-form-row { grid-template-columns: 1fr 1fr; }
}
.avis-hint { font-size: var(--fs-label); color: var(--slate-muted); margin: 6px 0 0; }
.avis-required { color: var(--red); }

.avis-stars-input { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.avis-stars-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.avis-stars-choices input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.avis-stars-choices label { display: inline-flex; align-items: center; justify-content: center; width: var(--target-min); height: var(--target-min); border-radius: var(--radius-md); cursor: pointer; }
.avis-stars-choices label svg { width: 32px; height: 32px; fill: var(--star-empty); stroke: var(--star-empty-edge); stroke-width: 1; }
.avis-stars-choices label.is-on svg { fill: var(--star); stroke: var(--star-edge); }
.avis-stars-choices input:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.avis-stars-caption { margin-left: var(--space-sm); font-size: var(--fs-small); font-weight: 600; color: var(--primary); }

.avis-consent { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); color: var(--slate); margin: 4px 0 16px; cursor: pointer; }
.avis-consent input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--primary); }
.avis-consent a { color: var(--secondary-text); text-decoration: underline; text-underline-offset: 3px; }
.avis-feedback { font-size: var(--fs-small); margin: 12px 0 0; min-height: 20px; }
.avis-feedback.success { color: var(--green-text); font-weight: 600; }
.avis-feedback.error { color: var(--red); font-weight: 600; }

.avis-rules { font-size: 15px; color: var(--onyx); }
.avis-rules ul { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.avis-rules li { margin-bottom: 14px; max-width: var(--measure); }
.avis-rules strong { color: var(--primary); }
.avis-rules a { color: var(--secondary-text); text-decoration: underline; text-underline-offset: 3px; }