/* ==========================================================================
   2B Business Booster — Feuille de styles partagée (toutes les pages)
   ========================================================================== */

/* ---------- Variables de marque ---------- */
:root {
  --orange: #E25B3B;
  --orange-dark: #C24A2D;
  --black: #090909;
  --white: #FFFFFF;
  --grey: #808080;
  --grey-light: #F7F5F3;
  --border: #E0E0E0;

  /* Fonds de section — rythme visuel de la page (jamais de fond sombre dominant).
     Uniquement des teintes chaudes, dans la charte 2B (pas de bleu). */
  --bg-hero-top: #F5F1ED;     /* blanc cassé chaud (haut du hero) */
  --bg-hero-bottom: #FFFFFF;  /* retour au blanc pur (bas du hero) */
  --bg-transition: #FDEEE4;   /* beige pêche clair (zone autour du bloc vidéo) */
  --bg-services: #FFFFFF;     /* blanc pur (section services / piliers) */
  --bg-portfolio: #F7F5F3;    /* gris chaud très clair (portfolio / réalisations) */
  --bg-content: #FFFFFF;      /* blanc pur (clients, blog) */
  --bg-footer: #FDEEE4;       /* beige pêche (contact final + footer) */

  --font-title: 'Raleway', sans-serif;
  --font-body: 'Roboto', sans-serif;

  --header-h: 82px; /* barre flottante : 14px de marge haute + 68px de hauteur */
  --container: 1200px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
  /* Chiffres alignés tabulaires (équivalent du réglage Illustrator) :
     corrige les chiffres old-style disproportionnés de Raleway.
     Hérité par tous les éléments de la page. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; font-size: 1rem; }
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.15;
  color: var(--black);
}
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  /* Au-dessus du calque curseur (#cursor-glow à z:1) : le contenu passe
     devant l'effet d'eau, qui ne vit que sur les fonds */
  position: relative;
  z-index: 2;
}
section { position: relative; }

/* ---------- Titres de section ---------- */
.section-tag {
  display: inline-block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.section-title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  margin-bottom: 14px;
}
.section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: var(--orange);
  margin-top: 16px;
  border-radius: 2px;
}
.section-title.center::after { margin-left: auto; margin-right: auto; }
.section-lead {
  color: var(--grey);
  font-size: 1.05rem;
  max-width: 720px;
}
.center { text-align: center; }
.section-head { margin-bottom: 48px; }
.section-head.center .section-lead { margin-left: auto; margin-right: auto; }

/* ---------- Boutons (pill) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 15px 30px;
  border-radius: 100px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(226, 91, 59, 0.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(226, 91, 59, 0.38);
  background: var(--orange-dark);
}
.btn-dark {
  background: var(--black);
  color: var(--white);
}
.btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(9, 9, 9, 0.3);
}
.btn-ghost {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
  color: var(--orange);
}
.btn-sm { padding: 11px 22px; font-size: 0.82rem; }

/* ---------- Triangles décoratifs ---------- */
.triangle {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}
.triangle-orange {
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-bottom: 44px solid var(--orange);
}
.triangle-black {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 30px solid var(--black);
}

/* ---------- Header : barre flottante arrondie (référence upsunday) ---------- */
.site-header {
  position: fixed;
  top: 14px; left: 0; right: 0;
  z-index: 500;
  padding: 0 16px;
  background: none;
}
.header-inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  height: 68px;
  padding: 0 14px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Semi-transparent : le contenu qui passe dessous reste visible, flouté */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(9, 9, 9, 0.08);
  transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
.site-header.scrolled .header-inner {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 14px 40px rgba(9, 9, 9, 0.14);
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo img { height: 54px; width: auto; }

.main-nav { display: none; }
/* Le flex ne s'applique qu'au premier niveau — les sous-menus restent verticaux */
.main-nav > ul { display: flex; align-items: center; gap: 22px; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 0;
  position: relative;
  white-space: nowrap;
}
.main-nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 0.25s var(--ease);
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.active > a::after { width: 100%; }

.has-submenu > a { display: flex; align-items: center; gap: 5px; }
.has-submenu .chev { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform 0.25s; }
.has-submenu:hover .chev { transform: rotate(225deg); margin-top: 3px; }

.submenu {
  position: absolute;
  top: 100%; left: -18px;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 20px 40px rgba(9,9,9,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s var(--ease);
}
.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(4px);
}
.submenu li a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: var(--font-body);
  white-space: nowrap;
}
.submenu li a:hover { background: var(--grey-light); color: var(--orange); }

.header-cta { display: flex; align-items: center; gap: 16px; }
.header-cta .btn-primary { display: none; }

.nav-toggle {
  width: 42px; height: 42px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  flex-shrink: 0;
}
.nav-toggle span {
  width: 24px; height: 2px; background: var(--black);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: calc(var(--header-h) + 8px); left: 0; right: 0; bottom: 0;
  background: var(--white);
  z-index: 400;
  padding: 30px 24px 100px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--border); }
.mobile-nav > ul > li > a, .mobile-nav-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
  width: 100%; text-align: left;
}
.mobile-submenu { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.mobile-submenu.open { max-height: 260px; }
.mobile-submenu li a { display: block; padding: 10px 4px 10px 16px; color: var(--grey); font-size: 0.95rem; }
.mobile-nav .btn { margin-top: 24px; width: 100%; justify-content: center; }

/* ---------- Curseur : fluide WebGL "film d'eau" (webgl-fluid-enhanced) ----------
   La luminosité du rendu est plafonnée dans la config JS (brightness) et
   la palette est limitée aux oranges 2B : l'accumulation d'encre ne peut
   plus produire de cœur lumineux. Le multiply garantit en plus que le
   calque ne peut que teinter/assombrir, jamais éclairer.
   Les !important neutralisent les styles inline posés par la librairie
   sur son conteneur (elle le passe en position:relative). */
#cursor-glow {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  /* Entre les fonds de section (z auto) et le contenu (.container à z:2) :
     l'eau coule sur le background, DERRIÈRE textes, cartes et images */
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 1;
}
#cursor-glow canvas { pointer-events: none !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 60px) 0 140px;
  /* Haut légèrement bleuté → blanc pur → beige pêche (zone de transition vidéo) */
  background: linear-gradient(180deg,
    var(--bg-hero-top) 0%,
    var(--bg-hero-bottom) 48%,
    var(--bg-transition) 100%);
  overflow: visible;
}
.hero-inner { max-width: 920px; }
.hero .section-tag { display: block; margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(2.3rem, 6.4vw, 4.4rem);
  letter-spacing: -0.01em;
}
.hero-vignette {
  display: inline-block;
  vertical-align: middle;
  width: clamp(64px, 9vw, 110px);
  height: clamp(44px, 6vw, 72px);
  margin: 0 10px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(9,9,9,0.22);
}
/* --- Diaporama interne de la vignette (boucle indépendante du scroll) --- */
.v-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: heroKenburns 12s ease-in-out infinite alternate;
}
.v-slide:first-child { opacity: 1; } /* visible avant l'init JS */
@keyframes heroKenburns {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.v-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,9,9,0.05) 0%, rgba(9,9,9,0.55) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.hero-vignette-fixed.is-full .v-shade { opacity: 1; }

/* Séquence de mots : cascade sur dégradé pêche → bleuté (référence upsunday) */
.v-words {
  position: absolute; inset: 0;
  opacity: 0;
  background: linear-gradient(160deg, #FDEEE4 0%, #F5F1EE 48%, #EFECE8 100%);
  overflow: hidden;
}
.v-words-track {
  position: absolute;
  right: 6%; bottom: 5%;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* colonne finale alignée au bord droit */
}
.v-words-track span {
  font-family: var(--font-title);
  font-weight: 600;
  /* Taille bornée par la hauteur ET la largeur du bloc :
     la colonne de 8 mots remplit presque toute la hauteur sans déborder */
  font-size: clamp(0.4rem, min(5.2cqw, 9.4cqh), 3rem);
  line-height: 1.22;
  color: #8F8F8F;
  white-space: nowrap;
}
.v-words-track span:first-child { color: var(--black); }
.hero-vignette { container-type: size; }
.hero-vignette.words-on .hero-vignette-caption { opacity: 0 !important; }
.hero-vignette-fixed {
  position: fixed;
  z-index: 45;
  overflow: hidden;
  background: var(--black); /* seule exception sombre autorisée : le bloc vidéo */
  box-shadow: 0 30px 80px rgba(9,9,9,0.4);
}
.hero-vignette-caption {
  position: absolute;
  left: 30px; bottom: 30px;
  color: var(--white);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.4rem);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hero-vignette-fixed.is-full .hero-vignette-caption { opacity: 1; }

.hero-text { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--grey); margin-top: 26px; max-width: 920px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.hero-spacer { height: 60vh; }

/* ---------- Sections courbes (chevauchement) ----------
   La courbe est remplie avec la couleur de SA section et déborde
   au-dessus (top négatif) : elle chevauche ainsi la section précédente. */
.curve-top {
  position: absolute;
  top: -58px; left: 0; right: 0;
  height: 60px;
  width: 100%;
  line-height: 0;
  /* z:0 : au-dessus du fond de la section précédente (ordre du document)
     mais SOUS le calque d'eau (z:1) — la courbe fait partie du background */
  z-index: 0;
  pointer-events: none;
}
.curve-top svg { width: 100%; height: 100%; display: block; }
.section-pad { padding: 110px 0 100px; }
/* Resserre le raccord entre deux sections qui s'enchaînent sans respiration
   (piliers -> clients). Deux classes, car .section-pad utilise le raccourci
   `padding` et est redéfini en media query : la spécificité 0,2,0 gagne
   quel que soit l'ordre des règles. */
.section-pad.pad-b-tight { padding-bottom: 60px; }
.section-pad.pad-t-tight { padding-top: 80px; }
.bg-tint { background: var(--grey-light); }
.bg-peach { background: var(--bg-footer); }
.bg-portfolio { background: var(--bg-portfolio); }

/* ---------- Piliers (cartes des 3 pôles) ---------- */
/* Même système de carte que .mini-card : blanc, bordure fine, rayon 16px.
   Toute la carte est un seul lien — un seul arrêt au clavier par pôle. */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 34px 30px 30px;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* Liseré orange permanent : rappelle la barre de .section-title::after */
.pillar-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--orange);
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(9,9,9,0.08); border-color: var(--orange); }
.pillar-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Numéro en filigrane ; ornement, masqué aux lecteurs d'écran.
   Volontairement dans le flux et non en absolu : en absolu il fallait
   réserver un padding-right au titre, et "Conseils et Consultance"
   passait alors sur deux lignes quand les deux autres tenaient sur une. */
.pillar-num {
  display: block;
  text-align: right;
  font-family: var(--font-title); font-weight: 700;
  font-size: 3.2rem; line-height: 1; letter-spacing: -0.02em;
  color: var(--orange); opacity: 0.16;
  margin-bottom: 4px;
  pointer-events: none;
}
.pillar-card h3 { font-size: 1.35rem; color: var(--black); margin: 0 0 16px; }

/* Les sous-offres officielles, toutes visibles en permanence */
.pillar-list { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.pillar-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 11px;
  color: var(--grey);
  font-size: 0.95rem;
  line-height: 1.5;
}
.pillar-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.pillar-list li strong { color: var(--black); font-weight: 600; }

/* Bouton de la carte. C'est un <span> et non un <a> : la carte entière est
   déjà un lien, un lien imbriqué serait invalide. Il en a donc l'allure
   (pastille .btn-sm) mais aucun rôle propre.
   margin-top:auto : le pôle Formation a 5 puces contre 3, la grille égalise
   les hauteurs — les trois boutons restent alignés en bas de carte. */
.pillar-card .read-more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title); font-weight: 700; font-size: 0.82rem;
  padding: 11px 24px;
  border-radius: 100px;
  color: var(--orange);
  border: 1.5px solid var(--orange);
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Flèche en ::after plutôt qu'en dur dans le texte : elle peut ainsi
   avancer au survol sans décaler le libellé. */
.pillar-card .read-more::after {
  content: "\2192";
  transition: transform 0.25s var(--ease);
}
.pillar-card:hover .read-more {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(226, 91, 59, 0.28);
}
.pillar-card:hover .read-more::after { transform: translateX(4px); }

/* ---------- Par où commencer : 5 offres mises en avant (accueil) ---------- */
/* Flexbox et non grid : avec 5 cartes, toute grille laisse une orpheline
   collée à gauche dès qu'on passe sous 5 colonnes. En flex, les lignes
   incomplètes sont centrées et il n'y a aucun point de rupture à déclarer. */
.spotlight-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
/* flex-basis 210px : les 5 cartes tiennent sur une ligne dès 1180px de
   viewport (216px chacune), puis la rangée se replie d'elle-même en
   3+2, puis 2+2+1, puis empilée — chaque ligne restant centrée. */
.spotlight-card {
  flex: 1 1 210px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 22px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.spotlight-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(9,9,9,0.10); border-color: var(--orange); }
.spotlight-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.spotlight-card h3 { font-size: 1.02rem; line-height: 1.3; margin: 14px 0 6px; }
/* Volontairement hors du bloc "textes justifiés" plus bas : à 174px de
   large, la justification creuserait des trous entre les mots. */
.spotlight-card p { color: var(--grey); font-size: 0.85rem; line-height: 1.45; margin-bottom: 16px; }
.spotlight-arrow {
  margin-top: auto;
  font-family: var(--font-title); font-weight: 700; font-size: 1.15rem; line-height: 1;
  color: var(--orange);
  transition: transform 0.25s var(--ease);
}
.spotlight-card:hover .spotlight-arrow { transform: translateX(4px); }
/* Sortie vers l'offre complète. Même recette typographique que
   .mini-card .read-more : noir Raleway 700 qui passe à l'orange au survol.
   Pas de pastille — elle reste réservée aux grandes cartes piliers. */
.spotlight-more { text-align: center; margin-top: 34px; }
.spotlight-more a {
  font-family: var(--font-title); font-weight: 700; font-size: 0.9rem;
  color: var(--black);
  transition: color 0.25s var(--ease);
}
.spotlight-more a:hover { color: var(--orange); }

/* ---------- Ils nous font confiance ---------- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.trust-badge {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 30px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
  filter: grayscale(1);
  opacity: 0.55;
  transition: all 0.3s var(--ease);
}
.trust-badge:hover {
  filter: grayscale(0);
  opacity: 1;
  color: var(--orange);
  border-color: var(--orange);
  transform: translateY(-3px);
}

/* ---------- Cartes blog / actualités ---------- */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.blog-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.blog-card:hover { box-shadow: 0 24px 50px rgba(9,9,9,0.14); transform: translateY(-4px); }
.blog-card .thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.blog-card:hover .thumb img { transform: scale(1.06); }
.blog-badge {
  position: absolute; top: 16px; left: 16px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 9px 16px;
  border-radius: 100px;
  /* Toujours visible : sur mobile il n'y a pas de survol pour révéler
     que la carte est cliquable. */
  opacity: 1;
  box-shadow: 0 6px 18px rgba(9,9,9,0.12);
  transition: all 0.3s var(--ease);
}
.blog-card:hover .blog-badge { background: var(--orange); color: var(--white); }
.blog-card .body { padding: 22px 24px 26px; }
.blog-cat { color: var(--orange); font-family: var(--font-title); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.blog-card h3 { font-size: 1.15rem; margin: 10px 0 10px; }
.blog-card p { color: var(--grey); font-size: 0.92rem; }
.blog-card .read-more { display: inline-block; margin-top: 14px; font-family: var(--font-title); font-weight: 700; font-size: 0.85rem; color: var(--black); }

/* Toute la carte est cliquable : le lien du titre s'étend sur la carte entière
   (un seul lien par carte, pour le clavier et les lecteurs d'écran). */
.blog-card { cursor: pointer; }
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-card:hover h3 a,
.blog-card:hover .read-more { color: var(--orange); }
.blog-card h3 a:focus-visible { outline: none; }
.blog-card:focus-within { box-shadow: 0 0 0 3px var(--orange); }

/* ---------- CTA final ---------- */
.cta-final {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 64px 40px;
  text-align: center;
  color: var(--black);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 70px rgba(9,9,9,0.08);
}
.cta-final::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 15% 15%, rgba(226,91,59,0.14), transparent 55%),
              radial-gradient(circle at 88% 85%, rgba(226,91,59,0.1), transparent 50%);
  z-index: -1;
}
.cta-final h2 { color: var(--black); }
.cta-final .section-lead { color: var(--grey); margin: 0 auto; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.cta-final .btn-ghost { border-color: var(--border); color: var(--black); }
.cta-final .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

/* ---------- Pages intérieures : hero réduit ---------- */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 70px) 0 90px;
  background: linear-gradient(180deg,
    var(--bg-hero-top) 0%,
    var(--bg-hero-bottom) 55%,
    var(--bg-transition) 100%);
}
.page-hero .section-tag { display: block; margin-bottom: 18px; }
.page-hero h1 {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 920px;
}
.page-hero .hero-text { margin-top: 22px; }
.page-hero .hero-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Pages intérieures : blocs de contenu ---------- */
/* Texte + image côte à côte */
.about-split { display: grid; gap: 36px; align-items: center; }
.about-split img { width: 100%; border-radius: 18px; display: block; box-shadow: 0 18px 44px rgba(9,9,9,0.10); }
.about-split .split-text p { color: var(--grey); margin-bottom: 16px; }
.about-split .split-text p strong { color: var(--black); }

/* Cartes valeurs */
.values-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.value-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(9,9,9,0.08); }
/* Icônes de carte : même trait orange partout (Feather, viewBox 24, stroke only) */
.value-card svg,
.spotlight-card svg { width: 36px; height: 36px; stroke: var(--orange); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.value-card h3 { font-size: 1.06rem; margin: 16px 0 8px; }
.value-card p { color: var(--grey); font-size: 0.95rem; }

/* Carte équipe / dirigeante */
.team-card {
  display: grid;
  gap: 28px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.team-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; display: block; }
.team-role {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}
.team-card h3 { font-size: 1.35rem; margin-bottom: 10px; }
.team-card p { color: var(--grey); }

/* Mini-cartes de liens (maillage interne vers les piliers) */
.mini-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.mini-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.mini-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(9,9,9,0.08); border-color: var(--orange); }
.mini-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.mini-card p { color: var(--grey); font-size: 0.95rem; margin-bottom: 14px; }
.mini-card .read-more { font-family: var(--font-title); font-weight: 700; font-size: 0.85rem; color: var(--black); }
.mini-card:hover .read-more { color: var(--orange); }

@media (min-width: 700px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
  .team-card { grid-template-columns: 240px 1fr; }
}
@media (min-width: 960px) {
  .about-split { grid-template-columns: 1.05fr 0.95fr; }
  .mini-grid { grid-template-columns: repeat(3, 1fr); }
  /* Variante 3 cartes : plusieurs offres officielles n'ont que trois
     sous-offres — sans ce modificateur la 4e colonne resterait vide. */
  .values-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
  /* Variante 4 cartes (pôles à quatre services) : on reste à 2 colonnes ici
     pour éviter une carte orpheline, puis 4 de front comme .values-grid. */
  .mini-grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1180px) {
  /* Rangée de 5 uniquement : les cartes tombent à ~212px et "Community
     management" passe sur deux lignes quand les quatre autres tiennent sur
     une. On réserve donc deux lignes pour que les accroches et les flèches
     restent alignées. En dessous, les cartes sont larges, tous les titres
     tiennent sur une ligne et la réserve ne ferait qu'un blanc inutile. */
  .spotlight-card h3 { min-height: 2.6em; }
  .values-grid { grid-template-columns: repeat(4, 1fr); }
  .values-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
  .mini-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Footer ---------- */
/* Même beige pêche que la section contact : ferme le rythme visuel de la page */
.site-footer { background: var(--bg-footer); padding: 70px 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 42px;
  padding-bottom: 50px;
}
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand p { color: var(--grey); max-width: 320px; font-size: 0.92rem; }
.footer-col h4 { font-size: 0.95rem; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col ul li a { color: var(--grey); font-size: 0.92rem; transition: color 0.25s; }
.footer-col ul li a:hover { color: var(--orange); }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(9,9,9,0.15);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s var(--ease);
}
.footer-social a:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(9,9,9,0.1);
  padding: 22px 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 0.85rem; color: var(--grey);
}
.footer-signature { font-family: var(--font-title); font-weight: 700; color: var(--black); }

/* ---------- WhatsApp flottant ---------- */
.whatsapp-float {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45);
  z-index: 300;
  transition: transform 0.25s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 28px; height: 28px; fill: var(--white); }

/* ---------- Reveal animation hooks ---------- */
.reveal { opacity: 0; transform: translateY(32px); }

/* ---------- Responsive ---------- */
@media (min-width: 700px) {
  /* Pas de palier à 2 colonnes pour les piliers : à trois cartes, la 3e
     resterait orpheline à mi-largeur. On passe de 1 à 3 comme .mini-grid. */
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .section-pad { padding: 150px 0 130px; }
}
/* La nav desktop n'apparaît que lorsqu'elle tient sur une seule ligne */
@media (min-width: 1280px) {
  .main-nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
  .header-cta .btn-primary { display: inline-flex; }
}

/* Cartes dont le titre est un vrai H2 (structure SEO du cahier des charges) */
.mini-card h2 { font-size: 1.08rem; margin-bottom: 8px; }
.value-card h2 { font-size: 1.06rem; margin: 16px 0 8px; }

/* ---------- Corps d'article (blog) ---------- */
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 20px;
  font-size: 0.88rem; color: var(--grey);
}
.article-meta .blog-cat { margin: 0; }
.article-body { max-width: 720px; }
/* Image à la une : hauteur plafonnée pour qu'elle ne remplisse jamais l'écran,
   quel que soit le format d'origine (carré, panoramique…). Pas de recadrage :
   l'image est centrée et les marges prennent le gris chaud de la charte. */
.article-figure {
  margin: 0 0 34px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(9,9,9,0.08);
  background: var(--grey-light);
  /* Surtout PAS de flex ni de grid ici : dans un conteneur flex, la largeur
     de l'image est résolue avant sa hauteur, si bien que max-height la rogne
     ensuite sans recalculer la largeur — l'image se retrouve étirée.
     En flux normal, l'algorithme de dimensionnement des éléments remplacés
     (CSS 2.1 §10.4) applique max-width et max-height en conservant le ratio. */
}
.article-figure img {
  display: block;
  margin: 0 auto;      /* centre l'image quand elle est moins large que la colonne */
  width: auto;
  height: auto;        /* les deux en auto : condition du respect du ratio */
  max-width: 100%;
  max-height: 380px;
  /* Filet de sécurité : même si une future règle imposait les dimensions de
     la boîte, le contenu de l'image resterait à son ratio, centré sur le fond. */
  object-fit: contain;
}

/* ---------- Gabarit d'article : texte + colonne latérale ---------- */
.article-layout { display: grid; grid-template-columns: 1fr; gap: 52px; }
@media (min-width: 1024px) {
  /* Colonne de texte à 720px (largeur de lecture du site), colonne latérale
     calée sur le bord droit du conteneur. */
  .article-layout {
    grid-template-columns: minmax(0, 720px) 300px;
    justify-content: space-between;
    gap: 56px;
    align-items: start;
  }
}
.article-sidebar { display: grid; gap: 22px; align-content: start; }
@media (min-width: 1024px) {
  /* Suit la lecture sans jamais passer sous le header flottant */
  .article-sidebar { position: sticky; top: calc(var(--header-h) + 20px); }
}
.sidebar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: 0 12px 30px rgba(9,9,9,0.05);
}
.sidebar-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.sidebar-list { display: grid; gap: 12px; }
.sidebar-list a {
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--black);
  transition: color 0.25s var(--ease);
}
.sidebar-list a:hover { color: var(--orange); }
.sidebar-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.sidebar-cats a {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.76rem;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: all 0.25s var(--ease);
}
.sidebar-cats a:hover { color: var(--orange); border-color: var(--orange); background: var(--bg-footer); }
.sidebar-cta { background: var(--bg-footer); }
.sidebar-cta p { color: var(--grey); font-size: 0.9rem; margin-bottom: 16px; }
.sidebar-cta .btn { width: 100%; justify-content: center; }
.sidebar-cta .btn + .btn { margin-top: 10px; }
.article-body p { color: var(--grey); margin-bottom: 18px; }
.article-body p strong { color: var(--black); }
.article-body h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin: 40px 0 14px;
}
.article-body h3 { font-size: 1.08rem; margin: 28px 0 10px; }
.article-body ul, .article-body ol { margin: 0 0 18px 22px; color: var(--grey); }
.article-body ul li, .article-body ol li { margin-bottom: 8px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--orange-dark); }
.article-body blockquote {
  border-left: 3px solid var(--orange);
  padding: 6px 0 6px 20px;
  margin: 26px 0;
  color: var(--black);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
}
.article-body img { width: 100%; border-radius: 16px; margin: 26px 0; display: block; }

/* ---------- FAQ (accordéon natif, sans JS) ---------- */
.faq-list { max-width: 760px; }
.faq-list details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.98rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-footer);
  color: var(--orange);
  font-weight: 700;
  transition: transform 0.25s var(--ease);
}
.faq-list details[open] summary::after { content: "–"; transform: rotate(180deg); }
.faq-list details p { padding: 0 22px 20px; color: var(--grey); font-size: 0.95rem; }

/* ---------- Étapes numérotées (méthode d'accompagnement) ---------- */
.steps-list { list-style: none; counter-reset: step; max-width: 760px; }
.steps-list li {
  counter-increment: step;
  position: relative;
  padding: 0 0 26px 66px;
}
.steps-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--orange);
}
.steps-list li:not(:last-child)::after {
  content: "";
  position: absolute; left: 23px; top: 48px; bottom: 4px;
  width: 1px;
  background: var(--border);
}
.steps-list h2, .steps-list h3 { font-size: 1.05rem; margin-bottom: 6px; }
.steps-list p { color: var(--grey); font-size: 0.95rem; }

/* ---------- Formulaire de contact (contacts.html) ---------- */
.contact-form {
  max-width: 760px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 34px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 7px;
}
.req { color: var(--orange); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--black);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field textarea { resize: vertical; min-height: 140px; }
/* Focus orange — jamais l'anneau bleu par défaut du navigateur (charte sans bleu) */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(226, 91, 59, 0.15);
}
/* ---------- Liste déroulante « Votre besoin » ----------
   Chrome/Edge récents : le panneau du <select> devient entièrement stylable
   (appearance: base-select) — blanc arrondi, survol pêche, sélection orange,
   jamais le surlignage bleu du système. Les autres navigateurs ignorent ces
   règles et gardent leur liste native. */
.form-field select { accent-color: var(--orange); }
.form-field select,
.form-field select::picker(select) {
  appearance: base-select;
}
.form-field select::picker(select) {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(9, 9, 9, 0.14);
  padding: 8px;
  margin-top: 6px;
}
.form-field select::picker-icon { color: var(--orange); }
.form-field select optgroup {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey);
  padding: 12px 10px 4px;
}
.form-field select option {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--black);
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.form-field select optgroup option { padding-left: 20px; }
.form-field select option:hover,
.form-field select option:focus-visible {
  background: var(--bg-footer);
  color: var(--orange-dark);
  outline: none;
}
.form-field select option:checked { color: var(--orange); font-weight: 500; }
.form-field select option:disabled { color: var(--grey); cursor: default; }
.form-field select option:disabled:hover { background: transparent; color: var(--grey); }
.form-field select option::checkmark { color: var(--orange); }

.form-honey { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form-note { color: var(--grey); font-size: 0.88rem; margin: 4px 0 20px; }
.form-status {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-footer);
  border-left: 3px solid var(--orange);
}
.form-status.is-error { background: #FBEDEA; border-left-color: #B3261E; color: #B3261E; }
.form-alt { color: var(--grey); margin-top: 18px; max-width: 760px; }
.form-alt a { color: var(--orange); font-weight: 500; }

@media (max-width: 640px) {
  .contact-form { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- Mur de logos clients (accueil) ----------
   Gris par défaut (cohérent avec la charte sans bleu dominant), couleurs au survol. */
.clients-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.client-logo {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-height: 96px;
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.client-logo img {
  max-height: 56px;
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}
.client-logo:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(9,9,9,0.07); border-color: var(--orange); }
.client-logo:hover img { filter: none; opacity: 1; }
@media (min-width: 700px) { .clients-logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1080px) { .clients-logos { grid-template-columns: repeat(7, 1fr); } }

/* ---------- Textes justifiés (demande client du 22/07/2026) ----------
   Les blocs centrés (section-head.center, cta-final) restent centrés :
   la justification y laisserait la dernière ligne collée à gauche. */
.hero-text,
.section-head:not(.center) .section-lead,
.about-split .split-text p,
.article-body p,
.article-body li,
.faq-list details p,
.steps-list p,
.value-card p,
.mini-card p,
.blog-card .body p,
.team-card p,
.footer-brand p {
  text-align: justify;
  hyphens: auto;
}

/* ---------- Carte (iframe) : teinte chaude, pas de bleus criards ---------- */
.map-embed {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(9,9,9,0.08);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(1) sepia(0.22) saturate(0.9);
}

/* ---------- Vidéo intégrée dans un article (ratio 16/9 fluide) ---------- */
.video-embed {
  position: relative;
  margin: 30px 0 28px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(9,9,9,0.08);
  background: var(--grey-light);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Filtres par catégorie du blog ---------- */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.filter-btn {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 11px 22px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter-btn:hover {
  color: var(--orange);
  border-color: var(--orange);
  background: var(--bg-footer);
  transform: translateY(-2px);
}
.filter-btn[aria-pressed="true"] {
  color: var(--white);
  background: var(--orange);
  border-color: var(--orange);
}
/* Carte masquée par un filtre : retirée du flux de la grille */
.blog-card.is-hidden { display: none; }
/* Date de publication affichée sur les cartes de la page blog */
.blog-card .blog-date {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--grey);
}
.blog-empty {
  display: none;
  color: var(--grey);
  text-align: center;
  padding: 40px 0;
}
.blog-empty.is-visible { display: block; }