/* ===================================================================
   G2M — Design System
   Charte graphique : premium / corporate / data / IA
   =================================================================== */

:root{
  /* Palette V2 — premium IA / Data */
  --color-primary:#56B6E8;
  --color-primary-hover:#1A85BD;
  --color-secondary:var(--color-primary);
  --color-dark:#05080D;
  --color-black:#02040A;
  --color-surface:#0B1220;
  --color-surface-soft:#101A2B;
  --color-white:#FFFFFF;
  --color-gray-light:#C7D2E0;
  --color-gray:#8A94A6;
  --color-muted:#5F6B7A;

  /* Triplets RGB (halos, verre, ombres teintées) */
  --color-primary-rgb:86,182,232;
  --color-primary-hover-rgb:26,133,189;
  --color-secondary-rgb:var(--color-primary-rgb);
  --color-dark-rgb:5,8,13;
  --color-black-rgb:2,4,10;
  --color-surface-rgb:11,18,32;
  --color-surface-soft-rgb:16,26,43;
  --color-gray-light-rgb:199,210,224;

  /* Alias sémantiques */
  --text-on-dark:var(--color-gray-light);
  --title-color:var(--color-primary);
  --title-accent-color:var(--color-primary);

  --gradient-brand:linear-gradient(135deg, var(--color-dark) 0%, var(--color-surface) 55%, var(--color-primary-hover) 100%);

  /* Rayons */
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:24px;
  --radius-xl:36px;
  --radius-pill:999px;

  /* Ombres V2 — froides, neutres, avec halo bleu au hover */
  --shadow-sm:0 10px 30px rgba(0,0,0,0.28);
  --shadow:0 20px 70px rgba(0,0,0,0.34);
  --shadow-hover:0 28px 90px rgba(0,0,0,0.44), 0 0 36px rgba(var(--color-primary-rgb),0.14);

  /* Espacements — voir "Guide des espacements" (palier Desktop ≥1600px) */
  --gap-header-hero:130px;        /* Header → Hero */
  --hero-pb:64px;                 /* Hero : padding-bottom (texte → cartes) */
  --gap-title-sub:24px;           /* Titre → sous-titre */
  --gap-sub-text:20px;            /* Sous-titre → texte */
  --gap-text-button:32px;         /* Texte → bouton */
  --spacing-section:96px;         /* Section → section */
  --spacing-section-tight:72px;   /* Sections très liées */
  --gap-title-intro:24px;         /* Titre de section → introduction */
  --spacing-title-text:40px;      /* Introduction → contenu */
  --card-title-gap:16px;          /* Carte : titre → texte */
  --card-button-gap:24px;         /* Carte : texte → bouton */
  --spacing-cards:32px;           /* Entre deux cartes */
  --card-padding:30px;

  /* Typographie */
  --font-heading:'Montserrat', sans-serif;
  --font-body:'Inter', sans-serif;
  /* Réservée aux H1 uniquement (grands titres de début de page) : géométrique
     et arrondie, dans l'esprit d'ADA HYBRID (Canva), sans toucher aux H2/H3/
     cartes/boutons qui restent en --font-heading. */
  --font-h1:'Manrope', 'Montserrat', sans-serif;
}

/* ---------- Paliers responsive des espacements (Guide des espacements) ---------- */
@media (min-width:1280px) and (max-width:1599px){
  /* Portable : 2560 / 1920 / 1600px restent au palier Desktop ci-dessus ; 1440 / 1366 / 1280px passent ici */
  :root{
    --gap-header-hero:108px;
    --hero-pb:56px;
    --gap-title-sub:20px;
    --gap-sub-text:16px;
    --gap-text-button:28px;
    --spacing-section:80px;
    --spacing-section-tight:60px;
    --gap-title-intro:20px;
    --spacing-title-text:32px;
    --card-title-gap:12px;
    --card-button-gap:20px;
    --spacing-cards:28px;
    --card-padding:26px;
  }
}

@media (min-width:768px) and (max-width:1279px){
  :root{
    --gap-header-hero:97px;
    --hero-pb:48px;
    --gap-title-sub:16px;
    --gap-sub-text:14px;
    --gap-text-button:24px;
    --spacing-section:64px;
    --spacing-section-tight:48px;
    --gap-title-intro:16px;
    --spacing-title-text:28px;
    --card-title-gap:12px;
    --card-button-gap:16px;
    --spacing-cards:24px;
    --card-padding:24px;
  }
}

@media (max-width:767px){
  :root{
    --gap-header-hero:87px;
    --hero-pb:40px;
    --gap-title-sub:16px;
    --gap-sub-text:12px;
    --gap-text-button:20px;
    --spacing-section:56px;
    --spacing-section-tight:44px;
    --gap-title-intro:16px;
    --spacing-title-text:24px;
    --card-title-gap:12px;
    --card-button-gap:16px;
    --spacing-cards:20px;
    --card-padding:20px;
  }
}

*{box-sizing:border-box;}

html, body{
  min-height:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background-color:var(--color-dark);
  /* Calques répétés tous les 1400px (repeat-y) : les halos réapparaissent
     périodiquement sur toute la hauteur des pages longues, pas seulement en haut. */
  background-image:
    radial-gradient(ellipse 1100px 780px at 14% 6%, rgba(var(--color-primary-rgb),0.32), transparent 64%),
    radial-gradient(ellipse 940px 860px at 92% 46%, rgba(var(--color-primary-hover-rgb),0.34), transparent 62%),
    radial-gradient(ellipse 940px 760px at 20% 92%, rgba(var(--color-secondary-rgb),0.16), transparent 62%),
    linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-dark) 18%, var(--color-dark) 82%, var(--color-surface-soft) 100%);
  background-position:0 0, 0 0, 0 0, 0 0;
  background-repeat:repeat-y, repeat-y, repeat-y, repeat-y;
  background-size:100% 1400px, 100% 1400px, 100% 1400px, 100% 1400px;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--text-on-dark);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

@media (max-width:900px){
  body{
    /* Même nombre de calques qu'en desktop, halos allégés et resserrés (tuile plus courte) */
    background-size:100% 1000px, 100% 1000px, 100% 1000px, 100% 1000px;
    background-image:
      radial-gradient(ellipse 720px 560px at 20% 4%, rgba(var(--color-primary-rgb),0.28), transparent 64%),
      radial-gradient(ellipse 660px 600px at 95% 42%, rgba(var(--color-primary-hover-rgb),0.30), transparent 62%),
      radial-gradient(ellipse 660px 540px at 15% 90%, rgba(var(--color-secondary-rgb),0.14), transparent 62%),
      linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-dark) 20%, var(--color-dark) 80%, var(--color-surface-soft) 100%);
  }
}

/* ---------- Image de fond générale (derrière tout le contenu, sans impact sur la mise en page) ---------- */
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url("../images/Image_fond.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  opacity:0.45;
  z-index:-2;
  pointer-events:none;
}

/* ---------- Voile sombre (renforce le contraste des textes sur l'image de fond) ---------- */
body::after{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(var(--color-black-rgb),0.20);
  z-index:-1;
  pointer-events:none;
}

/* ---------- Correction du fond en version mobile uniquement ----------
   Sur mobile, body::before/::after (image de fond + voile) sont en
   position:fixed + height:100%, une combinaison que les navigateurs
   mobiles (barre d'adresse dynamique) recalculent mal pendant le
   défilement : le fond semblait se couper ou se repositionner entre les
   sections. On les repasse en position:absolute ancrée sur la hauteur
   réelle de la page (top/right/bottom/left:0, sans dépendre de vh), et on
   réaligne les halos du body sur les valeurs desktop pour un fond
   identique et continu. Scopé à ≤768px : tablette et desktop inchangés. */
@media (max-width:768px){
  body{
    position:relative;
    background-image:
      radial-gradient(ellipse 1100px 780px at 14% 6%, rgba(var(--color-primary-rgb),0.32), transparent 64%),
      radial-gradient(ellipse 940px 860px at 92% 46%, rgba(var(--color-primary-hover-rgb),0.34), transparent 62%),
      radial-gradient(ellipse 940px 760px at 20% 92%, rgba(var(--color-secondary-rgb),0.16), transparent 62%),
      linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-dark) 18%, var(--color-dark) 82%, var(--color-surface-soft) 100%);
    background-position:0 0, 0 0, 0 0, 0 0;
    background-repeat:repeat-y, repeat-y, repeat-y, repeat-y;
    background-size:100% 1400px, 100% 1400px, 100% 1400px, 100% 1400px;
  }

  body::before,
  body::after{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:auto;
    height:auto;
    background-attachment:scroll;
  }
}

/* Voile "hero" premium — composant générique réutilisable sur toutes les
   pages du site (référence : developpement.html). Ne remplace ni ne masque
   le fond du site (globe/particules/image de fond, body::before/::after,
   toujours présents et visibles) : ajoute seulement un halo radial bleu
   très diffus derrière le titre + un voile blanc clair uniforme.
   .hero-veil-wrap enveloppe le logo, la nav, le hero ET .hero-divider afin
   que le voile (height:100% du wrapper) démarre pile en haut de la page
   (pas seulement sous la nav) et s'arrête pile à la ligne de séparation,
   quelle que soit la longueur du texte d'intro — le margin-bottom de la
   ligne se collapse hors de .hero-veil-wrap (aucune bordure/padding sur le
   wrapper) et n'est donc jamais inclus dans la hauteur du voile. Le logo
   (position:fixed) et la nav (position:sticky) gardent leur rendu et leur
   z-index (90/100) inchangés malgré leur nouvel emplacement dans le DOM. */
.hero-veil-wrap{
  position:relative;
}

.hero-veil{
  position:absolute;
  inset:0;
  height:100%;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(ellipse 700px 420px at 50% 340px, rgba(var(--color-primary-rgb),0.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 55%, transparent 100%);
}

/* Séparateur discret marquant la fin de la hero section — un simple trait
   long en dégradé (plus lumineux au centre, fondu aux extrémités) + point
   lumineux central, pas de bandeau ni d'encadré. Remplace la flèche de
   scroll (.scroll-indicator, retirée sur les pages utilisant ce
   composant) : la ligne est désormais seule à marquer la fin de la hero. */
.hero-divider{
  position:relative;
  width:72%;
  max-width:900px;
  height:1px;
  margin:24px auto 160px;
  background:linear-gradient(90deg, transparent 0%, rgba(var(--color-primary-rgb),0.12) 12%, rgba(var(--color-primary-rgb),0.9) 50%, rgba(var(--color-primary-rgb),0.12) 88%, transparent 100%);
}

/* Rapproche la ligne de l'accroche introductive de la page R&D, sans
   toucher .hero-divider ailleurs sur le site. */
.rd-hero + .hero-divider{
  margin-top:0;
}

/* Descend la ligne de séparation sur la page Références, sans toucher
   .hero-divider ailleurs sur le site. */
body.page-references .hero-divider{
  margin:80px auto 100px;
}

.hero-divider-dot{
  position:absolute;
  top:50%;
  left:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--color-primary);
  box-shadow:0 0 8px 2px rgba(var(--color-primary-rgb),0.65);
  transform:translate(-50%, -50%);
}

h1, h2, h3, h4{
  font-family:var(--font-heading);
  color:var(--title-color);
  margin:0;
}

h1{font-family:var(--font-h1); font-weight:700; font-size:44px;}
h2, h3, h4{font-weight:600;}

a{color:inherit;}

img{max-width:100%;}

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

@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Animations discrètes ---------- */
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

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

@keyframes ucHeroZoomIn{
  from{transform:scale(1.04);}
  to{transform:scale(1);}
}

.hero,
.page-hero,
.page-header{
  animation:fadeInUp 0.7s ease both;
}

.section-preview .card,
.cards .card,
.services-grid .card,
.paves .pave,
.journey-grid .journey-card,
.modules .module,
.steps-grid .step-card{
  animation:fadeInUp 0.6s ease both;
}

.section-preview .card:nth-child(2),
.cards .card:nth-child(2),
.services-grid .card:nth-child(2),
.paves .pave:nth-child(2),
.journey-grid .journey-card:nth-child(2),
.modules .module:nth-child(2),
.steps-grid .step-card:nth-child(2){animation-delay:0.08s;}

.section-preview .card:nth-child(3),
.cards .card:nth-child(3),
.services-grid .card:nth-child(3),
.paves .pave:nth-child(3),
.journey-grid .journey-card:nth-child(3),
.modules .module:nth-child(3),
.steps-grid .step-card:nth-child(3){animation-delay:0.16s;}

.section-preview .card:nth-child(4),
.cards .card:nth-child(4),
.steps-grid .step-card:nth-child(4){animation-delay:0.24s;}

/* ===================================================================
   Navigation
   =================================================================== */

.navbar{
  position:sticky;
  top:16px;
  z-index:100;
  margin:16px auto 0;
  max-width:1100px;
  background:rgba(var(--color-black-rgb),0.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(var(--color-primary-rgb),0.12);
  border-radius:var(--radius-xl);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 24px;
  box-shadow:0 18px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.09);
}

@supports not (backdrop-filter: blur(1px)){
  .navbar{background:var(--color-black);}
}

.logo{
  display:flex;
  align-items:center;
  height:40px;
  text-decoration:none;
}

.logo img{
  height:100%;
  width:auto;
  display:block;
}

.nav-menu{
  list-style:none;
  display:flex;
  width:100%;
  margin:0;
  padding:0;
  gap:10px;
}

.nav-item{
  position:relative;
}

.nav-link{
  display:block;
  color:var(--color-white);
  text-decoration:none;
  font-family:var(--font-h1);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.04em;
  padding:12px 16px;
  border-radius:var(--radius-pill);
  transition:background 0.2s ease, color 0.2s ease;
  cursor:pointer;
  white-space:nowrap;
}

.nav-item:hover .nav-link,
.nav-link:focus,
.nav-item.active .nav-link{
  background:rgba(var(--color-primary-rgb),0.14);
  color:var(--color-primary);
}

.nav-item:last-child{
  margin-left:auto;
}

.nav-item:last-child .nav-link{
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color:var(--color-white);
  box-shadow:0 10px 30px rgba(var(--color-primary-rgb),0.22);
}

.nav-item:last-child .nav-link:hover,
.nav-item:last-child .nav-link:focus{
  background:linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-secondary) 100%);
}

.dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:linear-gradient(180deg, rgba(14,14,16,0.92), rgba(5,5,5,0.96));
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--radius-lg);
  min-width:200px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  box-shadow:var(--shadow-hover);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

@supports not (backdrop-filter: blur(1px)){
  .dropdown{background:var(--color-black);}
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.dropdown a{
  display:block;
  color:var(--color-gray);
  text-decoration:none;
  font-family:var(--font-h1);
  font-size:13px;
  font-weight:400;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  transition:background 0.2s ease, color 0.2s ease;
}

.dropdown a:hover,
.dropdown a.active{
  background:var(--color-primary);
  color:var(--color-white);
}

/* ---------- Header mobile (logo + bouton "Menu" + menu déroulant) ----------
   Ne touche pas au rendu desktop : .navbar-mobile-logo et .nav-toggle
   restent display:none au-dessus de 900px, .nav-menu (pastille horizontale
   desktop) et .corner-logo (logo fixe desktop) ne sont pas modifiés.
   Sous 900px, .nav-menu est masqué ; js/mobile-nav.js clone son contenu
   dans .nav-panel, un menu déroulant ajouté directement à <body> (jamais
   confiné par le backdrop-filter de .navbar, qui crée un containing block
   pour les descendants position:fixed) et repositionné au clic juste sous
   la barre de header via getBoundingClientRect(). Les sous-menus, en hover
   sur desktop, deviennent des accordéons au clic dans le menu déroulant
   (le survol n'existe pas au tactile). */
.navbar-mobile-logo{
  display:none;
}

.nav-toggle{
  display:none;
}

@media (max-width:900px){
  .navbar{
    flex-wrap:nowrap;
    justify-content:space-between;
    row-gap:0;
    border-radius:var(--radius-lg);
    padding:12px 18px;
  }

  .nav-menu{
    display:none;
  }

  .navbar-mobile-logo{
    display:flex;
    align-items:center;
    flex:none;
  }

  .navbar-mobile-logo img{
    display:block;
    height:30px;
    width:auto;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    height:38px;
    padding:0 18px;
    background:var(--color-primary);
    border:1px solid var(--color-primary);
    border-radius:var(--radius-pill);
    color:var(--color-white);
    font-family:var(--font-body);
    font-weight:600;
    font-size:13px;
    letter-spacing:0.04em;
    cursor:pointer;
    box-shadow:0 0 16px rgba(var(--color-primary-rgb),0.45);
    transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .nav-toggle[aria-expanded="true"]{
    background:var(--color-primary-hover);
    border-color:var(--color-primary-hover);
    color:var(--color-white);
  }
}

.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
  z-index:199;
}

.nav-overlay.is-visible{
  opacity:1;
  visibility:visible;
}

.nav-panel{
  position:fixed;
  left:0;
  right:0;
  top:0;
  max-height:min(560px, calc(100vh - 90px));
  max-height:min(560px, calc(100dvh - 90px));
  background:linear-gradient(180deg, rgba(14,14,16,0.98), rgba(5,5,5,0.99));
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid rgba(var(--color-primary-rgb),0.14);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
  padding:12px 18px 24px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index:200;
}

@supports not (backdrop-filter: blur(1px)){
  .nav-panel{background:var(--color-black);}
}

.nav-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.nav-panel .nav-menu{
  display:flex;
  flex-direction:column;
  width:100%;
  gap:4px;
}

.nav-panel .nav-item{
  width:100%;
  position:relative;
}

.nav-panel .nav-item:last-child{
  margin-left:0;
  margin-top:16px;
}

.nav-panel .nav-link{
  width:100%;
  box-sizing:border-box;
  padding:14px;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav-panel .nav-item:has(.dropdown) > .nav-link::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform 0.25s ease;
  margin-left:8px;
  flex:none;
}

.nav-panel .nav-item.is-expanded > .nav-link::after{
  transform:rotate(-135deg);
}

.nav-panel .dropdown{
  position:static;
  opacity:1;
  visibility:visible;
  transform:none;
  min-width:0;
  max-height:0;
  overflow:hidden;
  background:rgba(255,255,255,0.03);
  border:none;
  box-shadow:none;
  padding:0 8px;
  margin:0;
  transition:max-height 0.35s ease, padding 0.35s ease;
}

.nav-panel .nav-item.is-expanded .dropdown{
  max-height:320px;
  padding:6px 8px;
  margin-top:2px;
}

/* Neutralise .nav-item:hover .dropdown / .nav-item:focus-within .dropdown
   (règle desktop, transform:translateX(-50%) pour centrer le dropdown
   sous son déclencheur en position:absolute) : au tactile, un tap sur le
   lien déclenche souvent :focus-within (et parfois :hover), et cette
   règle desktop, plus spécifique que .nav-panel .dropdown seul, ré-
   appliquait ce translateX(-50%) au dropdown mobile — pourtant en
   position:static et pleine largeur — le décalant hors de l'écran. */
.nav-panel .nav-item:hover .dropdown,
.nav-panel .nav-item:focus-within .dropdown{
  transform:none;
}

.nav-panel .dropdown a{
  padding:12px 14px;
  text-align:center;
}

body.nav-open{
  overflow:hidden;
}

@media (prefers-reduced-motion:reduce){
  .nav-panel{transition:none;}
  .nav-overlay{transition:none;}
  .nav-panel .dropdown{transition:none;}
}

/* ===================================================================
   Hero / en-têtes de page
   (.hero, .page-hero, .page-header : familles unifiées)
   =================================================================== */

.hero,
.page-hero{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:var(--gap-header-hero) 24px var(--hero-pb);
  text-align:center;
}

.hero{
  max-width:960px;
}

.hero h1,
.page-hero h1{
  text-align:center;
  margin:0 0 var(--gap-title-sub);
}

.hero-logo{
  display:block;
  height:120px;
  width:auto;
  margin:0 auto 24px;
  border-radius:50%;
}

.hero-title-text{
  display:inline-block;
  color:var(--title-accent-color);
  font-size:clamp(26px, 3.2vw, 40px);
  line-height:1.25;
}

/* Titres bleus (fond clair) harmonisés à 44px ; exclut .page-hero--services
   (services-ia.html), dont le titre est blanc sur fond sombre et garde sa
   taille d'origine. */
.page-hero:not(.page-hero--services) .hero-title-text{
  font-size:44px;
}

.hero .hero-title-text{
  color:var(--color-white);
  font-size:44px;
}

.page-hero--services .hero-title-text{
  color:var(--color-white);
}

.hero-tagline{
  font-family:var(--font-heading);
  font-weight:500;
  font-style:normal;
  font-size:18px;
  color:var(--color-primary);
  margin:0 0 var(--gap-sub-text);
}

.hero p.hero-tagline--home,
.page-hero p.hero-tagline--home,
.page-header p.hero-tagline--home{
  font-size:26px;
  font-weight:600;
  color:var(--color-primary);
}

.page-header p.hero-tagline--white{
  color:var(--color-white);
}

.hero p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--text-on-dark);
  max-width:820px;
  margin:0 auto;
}

.hero p span{
  display:block;
}

/* ===================================================================
   Révélation du logo G2M officiel (page d'accueil)
   Le fichier images/Logo_G2M.png est utilisé tel quel (proportions,
   couleurs et formes 100% fidèles, jamais recréé en CSS/SVG). Un réseau
   de particules et de lignes (canvas, js/hero-logo-reveal.js) évoque des
   flux de données qui convergent autour du logo pendant que celui-ci se
   construit : le contour circulaire se dessine (anneau SVG), puis l'image
   se révèle par un masque circulaire du centre vers l'extérieur, avec deux
   légers éclats synchronisés sur le "2" et sur l'inscription "GO 2 MARKET".
   Une fois révélé, le réseau s'efface, quelques particules très lentes
   subsistent et une respiration lumineuse discrète entoure le logo.
   La construction ne se joue qu'une seule fois, déclenchée au scroll.
   =================================================================== */
.hero-logo-reveal{
  position:relative;
  width:clamp(200px, 24vw, 340px);
  aspect-ratio:1;
  margin:40px auto 110px;
}

.hlr-canvas{
  position:absolute;
  inset:-45%;
  width:190%;
  height:190%;
  pointer-events:none;
}

.hlr-glow{
  position:absolute;
  inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),0.35) 0%, rgba(var(--color-primary-rgb),0) 70%);
  opacity:0;
  pointer-events:none;
}

.hero-logo-reveal.is-revealed .hlr-glow{
  animation:hlrBreathe 4.5s ease-in-out 0.3s infinite;
}

@keyframes hlrBreathe{
  0%, 100%{opacity:0.16; transform:scale(0.96);}
  50%{opacity:0.38; transform:scale(1.04);}
}

.hlr-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  transform:rotate(-90deg);
}

.hlr-ring-circle{
  fill:none;
  stroke:var(--color-primary);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:295.3;
  stroke-dashoffset:295.3;
  opacity:0.85;
}

.hero-logo-reveal.is-building .hlr-ring-circle{
  transition:stroke-dashoffset 2.3s cubic-bezier(0.65,0,0.35,1);
  stroke-dashoffset:0;
}

.hero-logo-reveal.is-revealed .hlr-ring-circle{
  transition:opacity 1.2s ease;
  opacity:0;
}

.hero-logo-reveal-img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Le logo est visible par défaut (voir juste au-dessus) : ce n'est que si
   js/hero-logo-reveal.js s'exécute réellement, en ajoutant .js-armed au
   tout début du script, qu'il repasse à clip-path:0% pour préparer
   l'animation. Si le script est bloqué, échoue à charger ou si JS est
   désactivé, le logo reste simplement affiché en statique — pas besoin
   d'un <noscript> séparé, ce mécanisme couvre aussi le cas où seul ce
   script précis est bloqué (JS activé par ailleurs). */
.hero-logo-reveal.js-armed .hero-logo-reveal-img{
  clip-path:circle(0% at 50% 50%);
}

.hero-logo-reveal.is-building .hero-logo-reveal-img{
  transition:clip-path 2.7s cubic-bezier(0.4,0,0.2,1);
  clip-path:circle(100% at 50% 50%);
}

.hero-logo-reveal.is-revealed .hero-logo-reveal-img{
  clip-path:circle(100% at 50% 50%);
}

.hlr-spark{
  position:absolute;
  left:52%;
  top:33%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(var(--color-primary-rgb),0.9) 45%, rgba(var(--color-primary-rgb),0) 75%);
  opacity:0;
  transform:translate(-50%,-50%) scale(0.4);
  pointer-events:none;
  z-index:2;
}

.hlr-spark--text{
  left:50%;
  top:74%;
  width:66%;
  height:12px;
  border-radius:7px;
  background:linear-gradient(90deg, rgba(var(--color-primary-rgb),0) 0%, rgba(255,255,255,0.85) 50%, rgba(var(--color-primary-rgb),0) 100%);
}

.hero-logo-reveal.is-spark-two .hlr-spark--two{
  animation:hlrSpark 0.7s ease-out both;
}

.hero-logo-reveal.is-spark-text .hlr-spark--text{
  animation:hlrSparkText 0.8s ease-out both;
}

@keyframes hlrSpark{
  0%{opacity:0; transform:translate(-50%,-50%) scale(0.3);}
  40%{opacity:1; transform:translate(-50%,-50%) scale(1.3);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(0.6);}
}

@keyframes hlrSparkText{
  0%{opacity:0; transform:translate(-50%,-50%) scaleX(0.25);}
  45%{opacity:0.9; transform:translate(-50%,-50%) scaleX(1);}
  100%{opacity:0; transform:translate(-50%,-50%) scaleX(1);}
}

@media (prefers-reduced-motion: reduce){
  .hlr-canvas, .hlr-ring, .hlr-spark{
    display:none;
  }

  .hero-logo-reveal-img{
    clip-path:none;
    opacity:0;
    animation:hlrFadeIn 0.6s ease-out forwards;
  }

  .hero-logo-reveal.is-revealed .hlr-glow{
    animation:none;
    opacity:0;
  }
}

@keyframes hlrFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@media (max-width:600px){
  .hero-logo-reveal{
    width:clamp(170px, 46vw, 260px);
    margin:28px auto 44px;
  }
}

/* ---------- .page-header (formation.html / formation-initiation-ia.html) ---------- */
.page-header{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:var(--gap-header-hero) 24px var(--spacing-title-text);
  text-align:center;
}

/* Règle typographique commune à tous les titres principaux (h1) du site :
   même taille, graisse, hauteur de ligne et espacement des lettres partout.
   Chaque page garde sa propre couleur / alignement via sa classe de contexte
   (.page-header h1, .uc-hero-title, .elig-title, etc.), appliquée en plus
   de .page-title sur le même élément. */
.page-title{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:44px;
  line-height:1.3;
  letter-spacing:0.01em;
}

/* Variante taille réduite : même taille que le titre de "À propos de G2M",
   appliquée en plus (ou à la place) de .page-title / de la classe de
   contexte de chaque page sur le même élément h1. */
.page-title-sm{
  font-size:44px;
}

/* Titre de contact.html : 40px, distinct de la taille standard 44px des
   autres titres bleus du site. */
body.page-contact .page-title-sm{
  font-size:40px;
}

/* Titre de partenaires.html, coupé en 2 lignes précises via <br> dans le
   HTML, à 44px : chaque ligne dépasse la largeur du conteneur de 900px, ce
   qui provoquait un wrap supplémentaire ("naissent" seul sur une 3e ligne).
   On sort du conteneur pour couvrir toute la largeur du viewport (comme
   .rd-section-head h2) et on empêche le retour à la ligne automatique :
   seul le <br> du HTML crée un saut de ligne, ce qui garantit exactement
   2 lignes. Sur mobile, où même la largeur du viewport est insuffisante,
   on repasse en retour à la ligne normal plutôt que de forcer un
   débordement horizontal. */
body.page-partenaires .page-title-sm{
  font-size:44px;
  white-space:nowrap;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  text-align:center;
}

@media (max-width:900px){
  body.page-partenaires .page-title-sm{
    white-space:normal;
    width:auto;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
}

/* Même correction que partenaires.html : titre coupé en 2 lignes précises
   via <br>, dont chaque ligne dépasse la largeur du conteneur de 900px
   à 44px. */
body.page-nous-rejoindre .page-title-sm{
  font-size:44px;
  white-space:nowrap;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  text-align:center;
}

@media (max-width:900px){
  body.page-nous-rejoindre .page-title-sm{
    white-space:normal;
    width:auto;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
}

/* Même correction que partenaires.html / nous-rejoindre.html : titre coupé
   en 2 lignes précises via <br>, dont la 1re ligne dépasse la largeur du
   conteneur de 900px à 44px et se recassait sur une 3e ligne. */
body.page-developpement .page-title-sm{
  font-size:44px;
  white-space:nowrap;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  text-align:center;
}

@media (max-width:900px){
  body.page-developpement .page-title-sm{
    white-space:normal;
    width:auto;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
}

.page-header h1{
  color:var(--title-accent-color);
  margin-bottom:var(--gap-title-intro);
}

/* Titre de formation-initiation-ia.html sur une seule ligne à 44px : sort
   du conteneur de 900px pour couvrir toute la largeur du viewport et
   empêche le retour à la ligne automatique (même technique que
   partenaires.html / nous-rejoindre.html). Sur mobile, retour au
   comportement normal pour éviter tout débordement horizontal. */
body.page-formation-initiation-ia .page-header h1{
  white-space:nowrap;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  text-align:center;
}

@media (max-width:900px){
  body.page-formation-initiation-ia .page-header h1{
    white-space:normal;
    width:auto;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
}

.page-header .intro{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--text-on-dark);
  max-width:760px;
  margin:0 auto;
}

.page-header .intro span{
  display:block;
  margin-bottom:6px;
}

/* Largeur élargie, spécifique à formation.html, pour que le texte
   introductif (retours à la ligne manuels) tienne sur exactement 4
   lignes sans se recasser (ne touche pas les autres pages qui
   partagent .page-header .intro). */
body.page-formation .page-header{
  max-width:1150px;
}

body.page-formation .page-header .intro{
  max-width:1100px;
}

/* Largeur élargie, spécifique à cas-usages.html, pour que le texte
   introductif (retours à la ligne manuels) tienne sur exactement 6 lignes
   (2 par phrase) sans se recasser (ne touche pas les autres pages qui
   partagent .page-header .intro). */
body.page-cas-usages .page-header{
  max-width:1340px;
}

body.page-cas-usages .page-header .intro{
  max-width:1300px;
}

/* La 1ère phrase s'enchaîne directement à la suite de la 2ème (pas de
   saut de ligne entre elles) ; l'écart avant la 3ème phrase est conservé. */
body.page-cas-usages .page-header .intro span:first-child{
  margin-bottom:0;
}

.intro--nowrap{
  max-width:none;
}

.intro--spaced span{
  margin-bottom:1.4em;
}

.intro--spaced span:last-child{
  margin-bottom:6px;
}

@media (min-width:900px){
  .intro--nowrap span{
    white-space:nowrap;
  }
}

.page-header-link{
  margin-top:var(--gap-text-button);
  padding-top:0;
  border-top:none;
}

.overline,
.step-eyebrow,
.badge{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-dark);
  background:var(--color-gray-light);
  padding:8px 20px;
  border-radius:var(--radius-pill);
  margin-bottom:var(--gap-title-intro);
}

/* ---------- Indicateur de défilement (invite à découvrir la suite du contenu) ---------- */
.scroll-indicator{
  display:block;
  width:22px;
  height:22px;
  margin:40px auto 0;
  background-color:var(--color-primary);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  opacity:0.7;
  animation:scrollIndicatorBounce 1.8s ease-in-out infinite;
}

@keyframes scrollIndicatorBounce{
  0%, 100%{transform:translateY(0); opacity:0.6;}
  50%{transform:translateY(8px); opacity:1;}
}

/* ===================================================================
   Cartes — composant unifié
   (.card, .pave, .module, .audience-card : même famille visuelle)
   =================================================================== */

.section-preview,
.services-grid,
.paves,
.modules,
.audience-grid{
  max-width:1100px;
  margin:0 auto var(--spacing-section);
  padding:0 24px;
  display:grid;
  gap:var(--spacing-cards);
}

.section-preview{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));}
.services-grid{grid-template-columns:repeat(3, 1fr);}
.paves{grid-template-columns:repeat(3, 1fr); margin-bottom:80px;}
.paves--linked{grid-template-columns:repeat(4, 1fr); max-width:1400px;}
.paves--linked .pave{min-height:400px; min-width:0;}
.paves--linked .pave-title{font-size:12px;}
.modules{grid-template-columns:repeat(2, 1fr);}
.audience-grid{grid-template-columns:repeat(4, 1fr); text-align:left;}

@media (max-width:900px){
  .services-grid,
  .paves{grid-template-columns:1fr;}
  .audience-grid,
  .paves--linked{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:700px){
  .modules{grid-template-columns:1fr;}
}

@media (max-width:520px){
  .audience-grid,
  .paves--linked{grid-template-columns:1fr;}
}

.card,
.pave,
.module,
.audience-card{
  background:linear-gradient(165deg, rgba(var(--color-surface-soft-rgb),0.96) 0%, rgba(var(--color-surface-rgb),0.98) 100%);
  color:var(--text-on-dark);
  border:1px solid rgba(var(--color-primary-rgb),0.12);
  border-radius:var(--radius);
  padding:var(--card-padding);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover,
.pave:hover,
.module:hover,
.audience-card:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--color-primary-rgb),0.30);
  box-shadow:var(--shadow-hover);
}

/* ===================================================================
   Carrousel des 4 cartes de la page d'accueil (.section-preview.carousel)
   Une seule carte visible à la fois, centrée, défilement automatique.
   Les overrides de couleur/padding sont scopés via l'ancêtre
   .section-preview.carousel pour gagner la cascade face aux règles
   partagées .card/.card-title/.card p (utilisées par d'autres pages,
   ex. certifications) sans dépendre de l'ordre des règles dans ce fichier.
   Voir js/home-cards-carousel.js.
   =================================================================== */
.section-preview.carousel{
  display:block;
  position:relative;
  margin-top:150px;
  margin-bottom:150px;
  padding-left:56px;
  padding-right:56px;
}

.carousel-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.carousel-viewport::-webkit-scrollbar{
  display:none;
}

.carousel-track{
  display:flex;
  align-items:stretch;
  gap:var(--spacing-cards);
  padding:10px 2px 28px;
}

.carousel-slide{
  flex:0 0 100%;
  width:100%;
  scroll-snap-align:center;
  position:relative;
  transition:border-color 0.25s ease, box-shadow 0.25s ease;
}

.section-preview.carousel .carousel-slide{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
  padding:56px 44px 60px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#161C22;
  border-color:rgba(var(--color-primary-rgb),0.28);
}

/* Une image de fond dédiée par carte (au lieu de l'unique image
   partagée précédente), reprenant le même traitement cover/center. */
.carousel-slide--qui-sommes-nous{
  background-image:url("../images/Caroussel QUI SOMMES NOUS.png");
}

.carousel-slide--services{
  background-image:url("../images/Caroussel SERVICES IA.png");
}

/* Sélecteur renforcé (égale la spécificité de la règle de base
   .section-preview.carousel .carousel-slide ci-dessus, qui écrasait
   sinon ce background-position) : cadre sur le tiers supérieur de
   l'image pour garder les pièces de puzzle tenues en l'air visibles,
   plutôt que le sol/les jambes en bas de l'image. */
.section-preview.carousel .carousel-slide--services{
  background-position:center 15%;
}

.carousel-slide--realisations{
  background-image:url("../images/Caroussel REALISATION.png");
}

.carousel-slide--rd{
  background-image:url("../images/Caroussel R&D.png");
}

/* Le survol ne doit soulever que le petit encadré blanc (.carousel-slide-pill
   ci-dessous), jamais la carte/l'image de fond elle-même : on neutralise ici
   le transform hérité de la règle partagée .card:hover. */
.section-preview.carousel .carousel-slide:hover{
  transform:none;
  border-color:rgba(var(--color-primary-rgb),0.95);
  box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),0.5), 0 0 32px rgba(var(--color-primary-rgb),0.65);
}

/* Bandeau blanc arrondi regroupant le libellé et le texte de la carte,
   centré dans la carte pour rester lisible sur la photo de fond. */
.carousel-slide-pill{
  width:fit-content;
  height:auto;
  max-width:min(340px, 84%);
  margin:0 auto;
  background:rgba(255,255,255,0.73);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:22px;
  padding:9px 32px;
  text-align:center;
  box-shadow:0 14px 36px rgba(0,0,0,0.2);
  transition:transform 0.35s ease-out, box-shadow 0.35s ease-out;
}

/* Soulèvement au survol réservé aux pointeurs précis (souris/trackpad) :
   pas de hover collant au doigt sur tactile, le clic reste immédiat. */
@media (hover:hover) and (pointer:fine){
  .carousel-slide:hover .carousel-slide-pill{
    transform:translateY(-10px);
    box-shadow:0 22px 46px rgba(0,0,0,0.3);
  }
}

.section-preview.carousel .carousel-slide .carousel-slide-pill p{
  color:#0F2A4A;
  margin:0;
}

.section-preview.carousel .carousel-slide .card-title{
  margin-bottom:8px;
  color:#0F2A4A;
  background:none;
  border:none;
  padding:0;
  border-radius:0;
}

.section-preview.carousel .carousel-slide a.card-title:hover,
.section-preview.carousel .carousel-slide a.card-title:focus{
  color:#0F2A4A;
  background:none;
  transform:none;
}

.carousel-slide.is-active{
  border-color:rgba(var(--color-primary-rgb),0.55);
  box-shadow:var(--shadow-hover), 0 0 0 1px rgba(var(--color-primary-rgb),0.22);
  transform:scale(1.015);
}

/* Le clic navigue depuis n'importe quel point de la carte (pas seulement
   le libellé), sans dupliquer de lien ni changer le contenu visible. */
.carousel-slide .card-title::after{
  content:'';
  position:absolute;
  inset:0;
}

.carousel-arrow{
  position:absolute;
  top:calc(50% - 14px);
  z-index:2;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(var(--color-surface-rgb),0.85);
  color:#FFFFFF;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.carousel-arrow:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.6);
  transform:translateY(-1px);
}

.carousel-arrow--prev{left:0;}
.carousel-arrow--next{right:0;}

.carousel-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:-8px;
}

.carousel-dot{
  width:8px;
  height:8px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.5);
  background:transparent;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.2s ease;
}

.carousel-dot.is-active{
  background:#FFFFFF;
  transform:scale(1.2);
}

@media (max-width:600px){
  .section-preview.carousel{
    padding-left:40px;
    padding-right:40px;
  }

  .section-preview.carousel .carousel-slide{
    min-height:300px;
    padding:44px 30px 48px;
  }

  .carousel-arrow{
    width:36px;
    height:36px;
    font-size:18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .carousel-slide{transition:none;}
}

/* Programme de formation — cartes de modules teintées d'un bleu ciel plus visible (scopé à formation-initiation-ia.html) */
.module{
  background:rgba(var(--color-primary-rgb),0.26);
  border-color:rgba(var(--color-primary-rgb),0.32);
}

/* Formation — cartes d'offres avec fond dégradé bleu plus contrasté (scopé à formation.html) */
.paves--tinted .pave{
  background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.34) 0%, rgba(var(--color-primary-hover-rgb),0.20) 45%, rgba(var(--color-surface-rgb),0.97) 100%);
  border-color:rgba(var(--color-primary-rgb),0.26);
}

.paves--tinted .pave:hover{
  border-color:rgba(var(--color-primary-rgb),0.48);
}

/* Diagnostic — cartes d'offres, même traitement avec bleu clair accentué (scopé à diagnostic.html) */
.paves--tinted-strong .pave{
  background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.50) 0%, rgba(var(--color-primary-hover-rgb),0.22) 40%, rgba(var(--color-surface-rgb),0.97) 100%);
  border-color:rgba(var(--color-primary-rgb),0.34);
}

.paves--tinted-strong .pave:hover{
  border-color:rgba(var(--color-primary-rgb),0.55);
}

/* Certifications — cartes avec fond dégradé bleu plus contrasté (scopé à certifications.html) */
.cards--tinted .card{
  background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.34) 0%, rgba(var(--color-primary-hover-rgb),0.20) 45%, rgba(var(--color-surface-rgb),0.97) 100%);
  border-color:rgba(var(--color-primary-rgb),0.26);
}

.cards--tinted .card:hover{
  border-color:rgba(var(--color-primary-rgb),0.48);
}

.card p,
.pave-desc,
.module p,
.audience-card p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  color:var(--text-on-dark);
  line-height:1.7;
  margin:0;
}

.card-title,
.pave-title{
  display:inline-block;
  width:max-content;
  max-width:100%;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--color-primary);
  background:rgba(var(--color-primary-rgb),0.12);
  border:1px solid rgba(var(--color-primary-rgb),0.20);
  text-decoration:none;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  margin:0 0 var(--card-title-gap);
  transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pave-title--nowrap{
  white-space:nowrap;
}

a.card-title:hover,
a.card-title:focus,
a.pave-title:hover,
a.pave-title:focus{
  background:rgba(var(--color-primary-rgb),0.22);
  color:var(--color-white);
  transform:translateY(-2px);
}

.pave-subtitle{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:19px;
  color:var(--color-white);
  letter-spacing:0.01em;
  margin:0 0 6px;
  line-height:1.3;
}

.pave-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  color:var(--color-primary);
  text-decoration:none;
  margin-top:auto;
  padding-top:var(--card-button-gap);
  border-top:1px solid rgba(var(--color-primary-rgb),0.10);
}

.pave-link .arrow{
  display:inline-block;
  transition:transform 0.2s ease;
}

.pave-link:hover,
.pave-link:focus{
  color:var(--color-secondary);
}

.pave-link:hover .arrow,
.pave-link:focus .arrow{
  transform:translateX(4px);
}

.pave-duration{
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  color:var(--color-gray);
  margin:0 0 24px;
}

.module h3,
.audience-card h3{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:15px;
  color:var(--color-white);
  margin:0 0 12px;
  line-height:1.4;
}

.audience-card h3{
  font-size:14px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  margin:0;
}

.audience-card{
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:opacity 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Apparition au scroll, de gauche à droite, avec léger décalage entre les
   4 cartes — déclenchée par js/section-reveal.js (ajoute .uc-inview dès que
   la section entre dans l'écran). Utilise `transition` (et non `animation`)
   afin que le survol puisse ensuite reprendre la main sur `transform` sans
   être bloqué par le fill-mode de l'animation d'entrée. */
.audience-section.uc-reveal-section .audience-card{
  opacity:0;
  transform:translateY(18px);
}

.audience-section.uc-reveal-section.uc-inview .audience-card{
  opacity:1;
  transform:translateY(0);
}

.audience-section.uc-reveal-section.uc-inview .audience-card:nth-child(2){transition-delay:0.08s;}
.audience-section.uc-reveal-section.uc-inview .audience-card:nth-child(3){transition-delay:0.16s;}
.audience-section.uc-reveal-section.uc-inview .audience-card:nth-child(4){transition-delay:0.24s;}

@media (prefers-reduced-motion: reduce){
  .audience-section.uc-reveal-section .audience-card{
    opacity:1;
    transform:none;
  }
}

/* Survol : légère élévation + fond plus bleu/lumineux + lueur discrète.
   La bordure elle-même est confiée au tracé progressif (.trace-border).
   transition-delay est remis à 0 pour ne pas hériter du décalage d'entrée. */
@media (hover:hover) and (pointer:fine){
  .audience-section.uc-reveal-section.uc-inview .audience-card:hover,
  .audience-card:hover{
    transition-delay:0s;
    transform:translateY(-5px);
    border-color:rgba(var(--color-primary-rgb),0.12);
    background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.20) 0%, rgba(var(--color-surface-rgb),0.97) 100%);
    box-shadow:var(--shadow-hover);
  }
}

.audience-section > p{
  font-family:var(--font-body);
  color:var(--text-on-dark);
}

/* ===================================================================
   Diagnostic — cartes d'offres, étapes, badges
   =================================================================== */

.diag-intro,
.method-intro{
  max-width:900px;
  margin:56px auto 0;
  padding:44px 24px;
  text-align:center;
  background:linear-gradient(135deg, rgba(var(--color-primary-rgb),0.12), rgba(var(--color-primary-hover-rgb),0.06)), rgba(var(--color-surface-rgb),0.82);
  border:1px solid rgba(var(--color-primary-rgb),0.14);
  border-radius:var(--radius-xl);
  box-shadow:0 24px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
}

.diag-intro--compact{
  padding:24px 24px;
  margin-bottom:48px;
}

.diag-intro h2,
.method-intro h2{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(24px, 3.2vw, 42px);
  color:var(--title-color);
  letter-spacing:0.01em;
  line-height:1.3;
  margin:0 0 var(--gap-title-intro);
}

/* .method-intro est un composant partagé par plusieurs pages : la police
   Manrope n'est appliquée qu'aux deux titres de la page "Notre approche". */
body.page-approche .method-intro h2{
  font-family:var(--font-h1);
}

.diag-intro p,
.method-intro p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--text-on-dark);
  max-width:800px;
  margin:0 auto;
}

/* Expertise Métier & IA — socle transverse (expertise-metier-ia.html) */
.transverse-section{
  max-width:1100px;
  background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.34) 0%, rgba(var(--color-primary-hover-rgb),0.20) 45%, rgba(var(--color-surface-rgb),0.97) 100%);
  border-color:rgba(var(--color-primary-rgb),0.26);
}

.transverse-section h2{
  font-size:clamp(18px, 2vw, 26px);
  white-space:nowrap;
}

.transverse-section p{
  color:var(--color-primary);
}

@media (max-width:600px){
  .transverse-section h2{white-space:normal;}
}

.intro-bright{
  background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.34) 0%, rgba(var(--color-primary-hover-rgb),0.20) 45%, rgba(var(--color-surface-rgb),0.97) 100%);
  border-color:rgba(var(--color-primary-rgb),0.26);
}

.tag-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

.tag-list .badge{
  margin-bottom:0;
}

.tag-list--split{
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:100%;
  margin:0 auto;
}

.tag-list--split .badge{
  width:100%;
}

@media (max-width:600px){
  .tag-list--split{grid-template-columns:1fr;}
}

.cards{
  max-width:1400px;
  margin:var(--spacing-title-text) auto var(--spacing-section);
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--spacing-cards);
}

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

@media (max-width:700px){
  .cards{grid-template-columns:1fr;}
}

.cards--narrow{max-width:1100px;}

.cards--tight-bottom{margin-bottom:16px;}

.card--full{
  grid-column:1 / -1;
  flex-direction:row;
  align-items:center;
  gap:32px;
}

.card--full-content{flex:1;}

.card--full .card-text{
  max-width:700px;
}

.card--full .card-logo{
  height:90px;
  margin:0;
  flex:none;
}

@media (max-width:700px){
  .card--full{flex-direction:column;}
}

.badge{
  margin-bottom:20px;
  font-size:15px;
  letter-spacing:0.02em;
  text-transform:none;
  padding:10px 24px;
}

.card-subtitle{
  font-family:var(--font-heading);
  font-weight:600;
  font-style:normal;
  font-size:15px;
  color:var(--color-white);
  text-align:left;
  margin:0 0 16px;
}

/* .card-subtitle est un composant partagé par toutes les cartes du site :
   Manrope n'est appliquée qu'aux deux titres des cartes pleine largeur de
   a-propos.html ("Notre mission", "Notre savoir-faire"). */
.card--full .card-subtitle{
  font-family:var(--font-h1);
  font-size:40px;
}

.card-text{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  color:var(--text-on-dark);
  text-align:left;
  margin:0;
}

.card .g2m-list{
  text-align:left;
}

.card .g2m-list li{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.7;
  color:var(--text-on-dark);
}

/* ---------- Étapes (steps) ---------- */
.steps{
  max-width:1400px;
  margin:var(--spacing-section) auto 0;
  padding:0 24px;
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--spacing-cards);
}

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

@media (max-width:600px){
  .steps-grid{grid-template-columns:1fr;}
}

.step-card{
  display:flex;
  flex-direction:column;
}

.step-content{
  border-radius:var(--radius-lg);
  padding:28px;
  margin-bottom:20px;
  flex:1;
  box-shadow:var(--shadow-sm);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.step-content:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

/* 4 tons sombres alternés — même principe qu'en V1, dégradés recolorés pour la V2 */
.step-content--dark{
  background:var(--color-black);
  color:var(--text-on-dark);
}

.step-content--blue{
  background:linear-gradient(135deg, rgba(var(--color-primary-rgb),0.22), rgba(var(--color-primary-hover-rgb),0.10)), var(--color-surface);
  color:var(--text-on-dark);
}

.step-content--pale{
  background:var(--color-surface-soft);
  color:var(--text-on-dark);
}

.step-content--light{
  background:linear-gradient(165deg, rgba(255,255,255,0.06), rgba(var(--color-surface-rgb),0.94));
  color:var(--text-on-dark);
}

/* Data & IA — fond dégradé bleu pour un meilleur contraste (expertise-data-ia.html) */
.step-content--data{
  background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.34) 0%, rgba(var(--color-primary-hover-rgb),0.20) 45%, rgba(var(--color-surface-rgb),0.97) 100%);
  color:var(--text-on-dark);
}

.step-content--data .step-eyebrow{
  background:rgba(255,255,255,0.16);
  color:var(--color-white);
}

.step-content--dark .step-eyebrow{
  background:rgba(255,255,255,0.16);
  color:var(--color-white);
  margin-bottom:18px;
}

.step-content--blue .step-eyebrow,
.step-content--light .step-eyebrow{
  background:var(--color-gray-light);
  color:var(--color-dark);
  margin-bottom:18px;
}

.step-content--pale .step-eyebrow{
  background:var(--color-white);
  color:var(--color-dark);
  margin-bottom:18px;
}

.step-content--blue .g2m-list li::before{
  background-color:var(--color-white);
}

.step-content h3{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:19px;
  letter-spacing:0.01em;
  line-height:1.3;
  color:var(--color-white);
  margin:0 0 10px;
}

.step-content--blue h3,
.step-content--pale h3,
.step-content--light h3{
  color:var(--color-white);
}

.step-content--data h3{
  display:inline-block;
  background:var(--color-white);
  color:var(--color-dark);
  padding:8px 18px;
  border-radius:var(--radius-sm);
}

.step-content h4{
  font-family:var(--font-body);
  font-weight:500;
  font-size:14px;
  color:var(--color-gray);
  margin:0 0 20px;
}

.step-content--blue h4,
.step-content--pale h4,
.step-content--light h4,
.step-content--data h4,
.step-content--h4-blue h4{
  color:var(--color-secondary);
}

.step-content--horizontal{
  max-width:1100px;
  margin:0 auto var(--spacing-cards);
}

.step-header-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-bottom:16px;
}

.step-header-row h3,
.step-header-row h4{
  margin:0;
}

/* Expertise Métier & IA — cartes de phases méthodologiques (expertise-metier-ia.html) */
.phases{
  max-width:1100px;
  margin:0 auto var(--spacing-section);
  padding:0 24px;
  display:flex;
  flex-direction:column;
  gap:var(--spacing-cards);
}

.phase-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:10px 20px;
  margin-bottom:20px;
}

.phase-head .step-eyebrow{
  margin-bottom:0;
}

.phase-head h3{
  margin:0;
}

.phase-tracks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-bottom:20px;
}

.phase-track-head{
  text-align:left;
  margin-bottom:16px;
}

.phase-track-head--right{
  text-align:right;
}

.phase-track-label{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--color-dark);
  background:var(--color-white);
  padding:8px 16px;
  border-radius:var(--radius-sm);
}

.phase-track h4{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--color-secondary);
  margin:0 0 12px;
}

.phase-milestone{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--color-white);
  text-align:center;
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-radius:var(--radius-sm);
  padding:16px 20px;
  margin:0;
  box-shadow:0 10px 30px rgba(var(--color-primary-hover-rgb),0.28);
}

.phase-milestone strong{
  color:var(--color-white);
}

@media (max-width:700px){
  .phase-tracks{grid-template-columns:1fr;}
  .phase-track-head,
  .phase-track-head--right{text-align:center;}
}

.step-content p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  margin:0 0 12px;
}

.step-content--data p,
.step-content--horizontal p{
  text-align:justify;
}

.step-content p:last-child{
  margin-bottom:0;
}

/* ---------- Listes à puce ---------- */
.g2m-list{
  list-style:none;
  padding-left:0;
  margin:0;
}

.g2m-list li{
  position:relative;
  padding-left:24px;
  margin-bottom:10px;
}

.g2m-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.2em;
  width:14px;
  height:14px;
  background-color:var(--color-primary);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

.step-content .g2m-list li{
  font-family:var(--font-body);
  font-weight:400;
  font-size:13px;
  line-height:1.5;
}

.outcomes-list li{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  color:var(--text-on-dark);
  padding-left:24px;
}

/* Coche de validation (au lieu des flèches), même bleu ciel que l'identité du site. */
.outcomes-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.25em;
  width:14px;
  height:14px;
  border-radius:0;
  background-color:var(--color-primary);
  border:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

.step-visual{
  width:100%;
  aspect-ratio:3 / 4;
  border-radius:var(--radius-lg);
  border:1px dashed rgba(var(--color-primary-rgb),0.24);
  background:rgba(var(--color-surface-rgb),0.82);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,0.75);
  overflow:hidden;
}

.step-visual--filled{
  border-style:solid;
  border-color:rgba(255,255,255,0.15);
  padding:0;
  box-shadow:var(--shadow-sm);
}

.step-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- Callout / continuité (panneau sombre : alternance de ton avec les sections) ---------- */
.callout{
  max-width:820px;
  margin:var(--spacing-section) auto 0;
  padding:56px 40px;
  text-align:center;
}

.callout h2{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:32px;
  color:var(--color-white);
  margin:0 0 var(--gap-title-intro);
}

/* .callout est un composant partagé (aussi utilisé sur expertise-metier-ia.html) :
   Manrope n'est appliquée qu'au titre "étape du parcours" de diagnostic.html. */
body.page-diagnostic .callout h2{
  font-family:var(--font-h1);
}

/* Titre "Le diagnostic est la deuxième étape du parcours" sur une seule
   ligne : le conteneur de 820px est trop étroit à 32px, on l'élargit et on
   empêche le retour à la ligne automatique, spécifiquement sur cette page. */
body.page-diagnostic .callout{
  max-width:960px;
}

body.page-diagnostic .callout h2{
  white-space:nowrap;
}

@media (max-width:900px){
  body.page-diagnostic .callout h2{
    white-space:normal;
  }
}

.callout p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--text-on-dark);
  margin:0;
}

@media (max-width:600px){
  .callout{padding:40px 24px;}
}

.callout--wide{
  max-width:1100px;
  padding:32px 40px;
  background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.34) 0%, rgba(var(--color-primary-hover-rgb),0.20) 45%, rgba(var(--color-surface-rgb),0.97) 100%);
  border-color:rgba(var(--color-primary-rgb),0.26);
}

/* ===================================================================
   Diagnostic — nouvelle intro (maquette "Diagnostic IA-Data.html")
   diagnostic.html — remplace l'ancien haut de page jusqu'au bloc
   ".callout" conservé ("Le diagnostic : la continuité naturelle...").
   Palette et typographie dédiées (Poppins/Inter, teal #2a93a8 / marine
   #0a1c2b), indépendantes du reste de la charte : reproduction fidèle
   de la maquette fournie.
   =================================================================== */
.diag2-dot-bg{
}

.diag2-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
  background:rgba(58,168,193,0.15);
  color:#6fc7dc;
  border:1px solid rgba(111,199,220,0.4);
}

.diag2-chip--flat{
  background:#d7dee3;
  color:#10222f;
  border:none;
}

/* ---- Section 1 : Hero ---- */
.diag2-hero{
  position:relative;
  padding:var(--gap-header-hero) 6% 0 6%;
}

.diag2-hero-inner{
  position:relative;
  max-width:1320px;
  margin:0 auto;
  padding-top:0;
  padding-bottom:var(--spacing-title-text);
  animation:fadeInUp 0.7s ease both;
}

.diag2-hero-title{
  width:100%;
  margin:0 auto var(--gap-title-intro);
  max-width:900px;
  color:var(--title-accent-color);
  text-align:center;
}

.diag2-hero-title strong{
  font-weight:inherit;
}

.diag2-hero-body{
  display:flex;
  justify-content:center;
  gap:32px;
}

.diag2-hero-text{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:#f2f8fa;
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.diag2-hero-text p{
  margin:0 0 16px;
}

.diag2-hero-text p:last-child{
  margin-bottom:0;
}

.diag2-hero-strip{
  padding:60px 6% 0;
  margin-top:-80px;
}

.diag2-hero-strip-inner{
  max-width:1320px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.diag2-hero-point{
  display:flex;
  align-items:flex-start;
  gap:18px;
  background:rgba(var(--color-primary-rgb),0.08);
  border:1px solid rgba(var(--color-primary-rgb),0.14);
  border-radius:var(--radius-lg);
  padding:14px 20px;
}

.diag2-hero-point-icon{
  color:#4fb6cc;
  font-size:20px;
  line-height:1.4;
  flex-shrink:0;
}

.diag2-hero-point p{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  color:#dbe9ee;
}

/* ---- Section 2 : Trois niveaux ---- */
.diag2-levels{
  position:relative;
  padding:8px 6% 32px 6%;
}

.diag2-levels-inner{
  max-width:1320px;
  margin:0 auto;
}

.diag2-levels-intro{
  margin:0 0 56px;
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  line-height:1.4;
  letter-spacing:0.01em;
  color:#eaf2f6;
  text-align:center;
}

.diag2-levels-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

.diag2-level-card{
  background:linear-gradient(160deg, #14344d, #0f2536);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  padding:32px;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.diag2-level-card:hover{
  border-color:var(--color-primary);
  box-shadow:0 0 46px rgba(80,160,255,0.85), 0 0 22px rgba(80,160,255,0.75), 0 0 8px rgba(150,200,255,0.9);
  filter:brightness(1.25);
}

.diag2-levels-grid .diag2-level-card{
  background:rgba(var(--color-primary-rgb),0.30);
}

.diag2-level-card .diag2-chip{
  align-self:flex-start;
}

/* Les 3 pastilles de niveaux (page diagnostic.html) reprennent le bleu nuit
   de la pastille "AXE INNOVATION" (.diag2-chip--flat), sans toucher aux
   pastilles PME/ETI de conditions-eligibilite.html qui partagent la même
   classe de base .diag2-chip. */
.diag2-levels-grid .diag2-chip{
  color:#10222f;
  background:#d7dee3;
  border:none;
}

.diag2-level-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:19px;
  line-height:1.35;
  margin:22px 0 12px;
  color:#ffffff;
  text-align:left;
}

.diag2-level-desc{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  color:#c9dae1;
  margin:0 0 20px;
}

.diag2-level-footer{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  color:var(--color-primary);
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.12);
}

/* ---- Section 3 : Axe Innovation ---- */
.diag2-innovation{
  padding:0 6% 64px 6%;
}

.diag2-innovation-card{
  max-width:1320px;
  margin:0 auto;
  background:rgba(var(--color-primary-rgb),0.35);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;
  padding:36px 44px;
  transition:border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.diag2-innovation-card:hover{
  border-color:var(--color-primary);
  box-shadow:0 0 24px rgba(var(--color-primary-rgb),0.45);
  filter:brightness(1.18);
}

.diag2-innovation-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:19px;
  line-height:1.35;
  margin:20px 0 10px;
  color:#ffffff;
}

.diag2-innovation-desc{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  color:#c9dae1;
  margin:0 0 14px;
  max-width:1120px;
  text-align:justify;
}

.diag2-innovation-row{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:32px;
}

.diag2-innovation-text-col{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex:1;
  min-width:260px;
}

.diag2-innovation-note{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  color:#c9dae1;
  margin:0;
  text-align:justify;
}

.diag2-innovation-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  color:var(--color-primary);
  text-decoration:none;
  margin-top:18px;
  transition:color 0.2s ease;
}

.diag2-innovation-link:hover{
  color:#3aa8c1;
}

.cert-eligibility-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  color:var(--color-primary);
  text-decoration:none;
  margin-top:18px;
  transition:color 0.2s ease;
}

.cert-eligibility-link:hover{
  color:#3aa8c1;
}

.diag2-innovation-badge{
  width:220px;
  border-radius:14px;
  background:#fdb913;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:8px;
}

.diag2-bpi-logo{
  font-family:'Poppins', sans-serif;
  font-weight:800;
  font-size:30px;
  letter-spacing:-0.01em;
  white-space:nowrap;
}

.diag2-bpi-logo .diag2-bpi-grey{
  color:#706f6f;
}

.diag2-bpi-logo .diag2-bpi-white{
  color:#ffffff;
}

.diag2-bpi-i{
  position:relative;
}

.diag2-bpi-dot{
  position:absolute;
  left:50%;
  bottom:-12px;
  transform:translateX(-50%);
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ffffff;
  display:block;
}

/* ---- Section 4 : Titre méthodologie ---- */
.diag2-method-title{
  padding:0 6% 0 6%;
}

.diag2-method-title-inner{
  max-width:1320px;
  margin:0 auto;
  padding:56px 40px 8px;
  text-align:center;
}

.diag2-method-title h2{
  margin:0;
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  letter-spacing:0.01em;
  line-height:1.3;
  color:var(--color-white);
}

/* ---- Section 5 : Étapes méthodologie ---- */
.diag2-steps{
  padding:0 6% 48px 6%;
}

.diag2-steps-inner{
  max-width:1320px;
  margin:0 auto;
}

.diag2-steps-intro{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:#c9dae1;
  margin:0 auto 28px;
  max-width:1050px;
  text-align:center;
}

.diag2-steps-card{
  max-width:680px;
  margin:0 auto;
  overflow:hidden;
  background:#ffffff;
  border-radius:18px;
  padding:40px 44px 0;
  color:#10222f;
}

.diag2-steps-list{
  display:flex;
  flex-direction:column;
  padding-bottom:40px;
}

.diag2-step{
  position:relative;
  padding:22px 0;
}

.diag2-step + .diag2-step{
  border-top:2px solid transparent;
}

.diag2-step + .diag2-step::before{
  content:"";
  position:absolute;
  top:-2px;
  left:0;
  width:0%;
  height:2px;
  background:var(--color-primary);
}

.diag2-steps-list.is-inview .diag2-step:nth-child(2)::before{animation:diag2LineDraw 0.9s ease-out 0.9s forwards;}
.diag2-steps-list.is-inview .diag2-step:nth-child(3)::before{animation:diag2LineDraw 0.9s ease-out 3.15s forwards;}
.diag2-steps-list.is-inview .diag2-step:nth-child(4)::before{animation:diag2LineDraw 0.9s ease-out 5.6s forwards;}

@keyframes diag2LineDraw{
  from{width:0%;}
  to{width:100%;}
}

@keyframes diag2StepFadeUp{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}

.diag2-step-head,
.diag2-step-item{
  opacity:0;
  transform:translateY(24px);
}

.diag2-steps-list.is-inview .diag2-step-head{
  animation:diag2StepFadeUp 0.8s ease-out forwards;
}

.diag2-steps-list.is-inview .diag2-step-item{
  animation:diag2StepFadeUp 0.6s ease-out forwards;
}

.diag2-steps-list.is-inview .diag2-step:nth-child(1) .diag2-step-head{animation-delay:0s;}
.diag2-steps-list.is-inview .diag2-step:nth-child(2) .diag2-step-head{animation-delay:2.05s;}
.diag2-steps-list.is-inview .diag2-step:nth-child(3) .diag2-step-head{animation-delay:4.3s;}
.diag2-steps-list.is-inview .diag2-step:nth-child(4) .diag2-step-head{animation-delay:6.75s;}

.diag2-steps-list.is-inview .diag2-step:nth-child(1) .diag2-step-item:nth-child(1){animation-delay:0.3s;}

.diag2-steps-list.is-inview .diag2-step:nth-child(2) .diag2-step-item:nth-child(1){animation-delay:2.35s;}
.diag2-steps-list.is-inview .diag2-step:nth-child(2) .diag2-step-item:nth-child(2){animation-delay:2.55s;}

.diag2-steps-list.is-inview .diag2-step:nth-child(3) .diag2-step-item:nth-child(1){animation-delay:4.6s;}
.diag2-steps-list.is-inview .diag2-step:nth-child(3) .diag2-step-item:nth-child(2){animation-delay:4.8s;}
.diag2-steps-list.is-inview .diag2-step:nth-child(3) .diag2-step-item:nth-child(3){animation-delay:5s;}

.diag2-steps-list.is-inview .diag2-step:nth-child(4) .diag2-step-item:nth-child(1){animation-delay:7.05s;}

@media (prefers-reduced-motion:reduce){
  .diag2-step-head,
  .diag2-step-item{
    opacity:1;
    transform:none;
    animation:none;
  }
  .diag2-step + .diag2-step::before{
    width:100%;
    animation:none;
  }
}

.diag2-step-head{
  display:flex;
  align-items:center;
  gap:14px;
}

.diag2-step-num{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(38px, 4vw, 52px);
  color:#10222f;
  line-height:1;
}

.diag2-step-label{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:19px;
  line-height:1.35;
}

.diag2-step-items{
  margin:16px 0 0;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:13px;
  line-height:1.5;
  color:#2c3a42;
}

.diag2-step-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.diag2-step-item-icon{
  flex-shrink:0;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#3aa8c1;
  font-size:16px;
  font-weight:700;
  margin-top:1px;
}

.diag2-steps-bar{
  background:rgba(var(--color-primary-rgb),0.75);
  margin:0 -44px;
  border-radius:0 0 18px 18px;
  padding:18px 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
}

.diag2-steps-bar > span:first-child{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.03em;
  color:#ffffff;
}

.diag2-steps-bar > span:last-child{
  color:#ffffff;
  font-size:15px;
}

.diag2-steps-bar-chevrons span{
  font-size:15px;
}

.diag2-steps-bar-chevrons span{
  opacity:0;
  transition:opacity 0.3s ease;
}

.diag2-steps-bar-chevrons span.is-visible{
  opacity:1;
}

@media (prefers-reduced-motion:reduce){
  .diag2-steps-bar-chevrons span{
    opacity:1;
    transition:none;
  }
}

/* ---- Responsive ---- */
@media (max-width:900px){
  .diag2-levels-grid{grid-template-columns:1fr; gap:20px;}
  .diag2-innovation-row{flex-direction:column;}
  .diag2-innovation-badge{width:100%; max-width:220px; margin:0 auto;}
}

@media (max-width:600px){
  .diag2-hero{padding:var(--gap-header-hero) 6% 0;}
  .diag2-hero-strip{padding:32px 6%;}
  .diag2-levels-intro{margin-bottom:36px;}
  .diag2-level-card{padding:24px;}
  .diag2-innovation-card{padding:28px 24px;}
  .diag2-method-title-inner{padding:40px 20px 4px;}
  .diag2-method-title h2{font-size:26px;}
  .diag2-steps-card{padding:28px 24px 0;}
  .diag2-steps-bar{margin:0 -24px; padding:16px 24px;}
  .diag2-step-head{flex-wrap:wrap; row-gap:6px;}
}

/* ===================================================================
   Conditions d'éligibilité (conditions-eligibilite.html)
   Page de destination du CTA "Découvrir les conditions d'éligibilité"
   (bloc Axe Innovation, diagnostic.html) — même famille visuelle/
   typographique que les sections diag2- (fond bleu nuit, Montserrat/
   Inter harmonisés, badges et listes à puce partagés).
   =================================================================== */
.elig-section{
  padding:0 6% 56px 6%;
}

.elig-section-inner{
  max-width:1320px;
  margin:0 auto;
}

.elig-hero{
  padding:var(--gap-header-hero) 6% 48px 6%;
}

.elig-hero-inner{
  max-width:1320px;
  margin:0 auto;
  text-align:center;
}

.elig-hero-inner .diag2-chip{
  margin-bottom:24px;
}

.elig-title{
  margin:24px 0 0;
  color:var(--title-color);
  font-size:44px;
}

.elig-h2{
  margin:0 0 18px;
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  text-align:center;
}

.elig-intro{
  margin:0 0 32px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  color:#c9dae1;
  max-width:980px;
}

.elig-divider{
  height:1px;
  background:rgba(255,255,255,0.14);
  margin:56px 0;
}

.elig-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
  margin-bottom:32px;
}

.elig-grid .diag2-level-card{
  background:linear-gradient(160deg, rgba(var(--color-primary-rgb),0.45), rgba(var(--color-primary-rgb),0.18));
  border-color:rgba(var(--color-primary-rgb),0.55);
}

.elig-card-list{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  color:#dbe9ee;
}

.elig-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.elig-item-icon{
  color:#3aa8c1;
  font-size:16px;
  font-weight:700;
  flex-shrink:0;
}

.elig-points{
  padding-top:26px;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:#c9dae1;
}

.elig-points .elig-item{
  align-items:flex-start;
  gap:12px;
}

.elig-points .elig-item-icon{
  color:#4fb6cc;
  font-size:18px;
  font-weight:400;
}

.elig-why-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.elig-why-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.elig-why-item-icon{
  color:#4fb6cc;
  font-size:20px;
  flex-shrink:0;
}

.elig-why-item p{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.5;
  color:#dbe9ee;
}

.elig-price-grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:start;
  text-align:center;
  max-width:900px;
  margin:0 auto;
}

.elig-price-grid::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:#3aa8c1;
  transform:translateX(-1px);
}

.elig-price-num{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:46px;
  color:#ffffff;
  line-height:1;
}

.elig-price-col--muted .elig-price-num{
  color:#9db3bf;
}

.elig-price-col p{
  margin:14px 0 0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:21px;
  line-height:1.5;
  color:#c9dae1;
}

.elig-price-col--muted p{
  color:#9db3bf;
}

.elig-price-col--muted{
  padding-left:36px;
}

.elig-price-badge{
  width:220px;
  border-radius:16px;
  background:#fdb913;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  margin:40px auto 0;
}

@media (max-width:900px){
  .elig-grid{grid-template-columns:1fr;}
  .elig-price-grid{grid-template-columns:1fr; gap:32px;}
  .elig-price-grid::before{display:none;}
  .elig-price-col--muted{border-top:2px solid #3aa8c1; padding-left:0; padding-top:24px;}
}

@media (max-width:600px){
  .elig-hero{padding:var(--gap-header-hero) 6% 36px;}
  .elig-section{padding:0 6% 40px 6%;}
  .elig-divider{margin:40px 0;}
}

/* ===================================================================
   FAQ (formation, diagnostic, developpement) — accordéon natif
   <details>/<summary>, sans JavaScript.
   =================================================================== */
.formation-faq{
  max-width:1100px;
  margin:var(--spacing-section) auto 0;
  padding:0 24px;
}

/* Voile bleu clair sur la FAQ (formation.html uniquement). Plein écran
   (pas seulement les 1100px du contenu, sinon rectangle à bords visibles),
   fond opaque + teinte bleu clair pour rester homogène quel que soit le
   point du dégradé global du body à cet endroit. L'espace avant le CTA est
   porté par le padding ci-dessous (couvert par ce fond) plutôt que par la
   marge de .final-cta, pour éviter toute bande non peinte entre les deux. */
.formation-faq--blue-veil{
  max-width:none;
  width:100%;
  margin-top:0;
  padding-left:0;
  padding-right:0;
  padding-top:var(--spacing-section);
  padding-bottom:var(--spacing-section);
  background-image:linear-gradient(180deg,
    rgba(var(--color-primary-rgb),0.18) 0%,
    rgba(var(--color-primary-rgb),0.10) 55%,
    var(--color-dark) 100%
  );
}

.formation-faq--blue-veil + .final-cta{
  margin-top:0;
}

.formation-faq-inner{
  max-width:820px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
}

.formation-faq-eyebrow{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-primary);
  margin:0 0 var(--gap-title-sub);
}

.formation-faq-title{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:clamp(26px, 3vw, 36px);
  color:var(--color-white);
  margin:0 0 var(--gap-sub-text);
}

/* Harmonisée avec .formats-section-title (32px), uniquement sur
   formation.html — .formation-faq-title est partagée avec diagnostic.html
   et développement.html. */
body.page-formation .formation-faq-title,
body.page-diagnostic .formation-faq-title,
body.page-developpement .formation-faq-title{
  font-size:32px;
}

.formation-faq-intro{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--text-on-dark);
  margin:0 0 var(--spacing-title-text);
}

.faq-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  text-align:left;
}

.faq-item{
  display:block;
  background:rgba(var(--color-surface-soft-rgb),0.6);
  border:1px solid rgba(var(--color-primary-rgb),0.22);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color 0.25s ease;
}

.faq-item:hover,
.faq-item[open]{
  border-color:rgba(var(--color-primary-rgb),0.42);
}

.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 26px;
  background:none;
  border:none;
  margin:0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:17px;
  line-height:1.5;
  color:var(--color-white);
  text-align:left;
}

.faq-question::-webkit-details-marker{
  display:none;
}

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

.faq-chevron{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  color:var(--color-primary);
  transition:transform 0.3s ease;
}

.faq-chevron svg{
  width:20px;
  height:20px;
  display:block;
}

.faq-item[open] .faq-chevron{
  transform:rotate(180deg);
}

.faq-answer{
  overflow:hidden;
}

.faq-answer-inner{
  padding:0 26px 24px;
}

.faq-answer-inner p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.8;
  color:var(--text-on-dark);
  margin:0 0 14px;
}

.faq-answer-inner p:last-child{
  margin-bottom:0;
}

.faq-cta-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
}

.faq-cta-link-label{
  display:inline;
  color:var(--color-primary);
  text-decoration:none;
  text-underline-offset:4px;
  transition:color 0.35s ease-out, text-decoration-color 0.35s ease-out;
}

.faq-cta-link-arrow{
  display:inline-block;
  color:var(--color-primary);
  transition:transform 0.35s ease-out, color 0.35s ease-out;
}

.faq-cta-link:hover .faq-cta-link-label,
.faq-cta-link:focus .faq-cta-link-label{
  color:#8FD3FF;
}

.faq-cta-link:hover .faq-cta-link-arrow,
.faq-cta-link:focus .faq-cta-link-arrow{
  transform:translateX(7px);
  color:#8FD3FF;
}

@media (prefers-reduced-motion:reduce){
  .faq-cta-link-label,
  .faq-cta-link-arrow{
    transition:none;
  }
}

@media (max-width:600px){
  .faq-question{
    padding:18px 20px;
    font-size:16px;
    gap:14px;
  }
  .faq-answer-inner{
    padding:0 20px 20px;
  }
}

@media (prefers-reduced-motion:reduce){
  .faq-chevron{transition:none;}
}

/* ---------- CTA finale ---------- */
.final-cta,
.bottom-cta{
  max-width:none;
  margin:var(--spacing-section) 0 0;
  padding:110px 24px;
  text-align:center;
  background:
    radial-gradient(ellipse 480px 280px at 15% -10%, rgba(255,255,255,0.14), transparent 60%),
    radial-gradient(ellipse 420px 320px at 100% 110%, rgba(var(--color-secondary-rgb),0.18), transparent 60%),
    var(--gradient-brand);
  border:1px solid rgba(var(--color-primary-rgb),0.22);
  border-left:none;
  box-shadow:var(--shadow-hover);
}

.bottom-cta{padding:56px 24px; margin-bottom:0;}

/* Le bandeau CTA de fin doit démarrer juste après la dernière ligne de
   certification (ENE), sans l'écart standard — scopé à certifications.html
   via le sélecteur adjacent à .cert-page, sans toucher .final-cta ailleurs. */
.cert-page + .final-cta{
  margin-top:0;
}

.bottom-cta--tall{padding:130px 24px;}

.bottom-cta--wide .cta-button{
  padding:20px 64px;
  font-size:16px;
}

.final-cta h2,
.bottom-cta h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:36px;
  color:var(--color-white);
  margin:0 0 var(--gap-title-intro);
}

.final-cta p,
.bottom-cta p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--color-white);
  max-width:640px;
  margin:0 auto var(--gap-text-button);
  /* Réserve la hauteur de 2 lignes et centre le texte verticalement dedans,
     même quand le texte ne tient que sur une seule ligne, pour que tous les
     bandeaux de fin de page (.final-cta) aient exactement la même taille
     d'une page à l'autre. */
  min-height:calc(1.8em * 2);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Tient sur une seule ligne, spécifique à nous-rejoindre.html (ne
   touche pas .final-cta p ailleurs, qui partage la même classe). */
body.page-nous-rejoindre .final-cta p{
  max-width:950px;
}

/* ===================================================================
   Boutons
   =================================================================== */

.cta-button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  padding:16px 34px;
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color:var(--color-white);
  text-decoration:none;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.03em;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 14px 38px rgba(var(--color-primary-hover-rgb),0.24), inset 0 1px 0 rgba(255,255,255,0.20);
  transition:background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button::after{
  content:"";
  width:14px;
  height:14px;
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  transition:transform 0.2s ease;
}

.cta-button:hover,
.cta-button:focus{
  background:linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-secondary) 100%);
  transform:translateY(-3px);
  box-shadow:0 20px 54px rgba(var(--color-primary-hover-rgb),0.34), 0 0 24px rgba(var(--color-primary-rgb),0.22);
}

.cta-button:hover::after,
.cta-button:focus::after{
  transform:translateX(3px);
}

.final-cta .cta-button,
.bottom-cta .cta-button{
  background:var(--color-white);
  color:var(--color-dark);
}

.final-cta .cta-button:hover,
.bottom-cta .cta-button:hover{
  background:var(--color-gray-light);
  color:var(--color-black);
}

/* ===================================================================
   Formation.html — parcours / bottom-block
   =================================================================== */

.bottom-block{
  max-width:1100px;
  margin:var(--spacing-section) auto;
  padding:44px 40px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:center;
}

.bottom-block-text{
  text-align:left;
}

.bottom-block p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15.5px;
  line-height:1.6;
  color:var(--text-on-dark);
  margin:0 0 6px;
  text-align:justify;
  text-align-last:left;
}

.bottom-block p.bottom-block-lead{
  font-weight:700;
  font-size:18px;
  line-height:1.5;
  color:var(--color-white);
}

.bottom-block-cta{
  margin-top:16px;
}

.bottom-block-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-white);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-sm);
  min-height:190px;
  width:340px;
  max-width:100%;
  justify-self:center;
}

.bottom-block-logo img{
  width:100%;
  max-width:240px;
  height:auto;
  object-fit:contain;
}

@media (max-width:900px){
  .bottom-block{
    grid-template-columns:1fr;
    padding:36px 28px;
  }
  .bottom-block-logo{
    min-height:170px;
    margin:0 auto;
  }
}

.opco-logo{
  display:inline-block;
  margin:24px 0;
  padding:10px 24px;
  border:1px dashed var(--color-muted);
  border-radius:var(--radius-sm);
  color:var(--color-muted);
  font-size:12px;
}

/* ---------- Carrousel de logos clients (formation.html) ---------- */
/* Bandeau clair plein largeur, entre le bloc OPCO/Qualiopi et
   ".method-intro" — piste à plat (10 logos + 10 dupliqués, un seul niveau
   flex) animée en translateX(0 → -50%) pour une boucle infinie sans saut
   visible. Le `gap` est porté par .logo-carousel-track uniquement : comme
   les deux moitiés sont strictement identiques, l'espacement reste rigoureu-
   sement égal partout, y compris à la jonction de la boucle. */
.logo-carousel-title{
  margin:152px 0 0;
  padding:0 24px;
  font-family:var(--font-h1);
  font-weight:700;
  font-size:clamp(20px, 2.4vw, 30px);
  letter-spacing:0.01em;
  color:var(--color-white);
  text-align:center;
}

/* Harmonisée avec .formats-section-title (32px), uniquement sur
   formation.html — .logo-carousel-title est partagée avec diagnostic.html. */
body.page-formation .logo-carousel-title,
body.page-diagnostic .logo-carousel-title{
  font-size:32px;
}

.logo-carousel-subtitle{
  margin:8px 0 0;
  padding:0 24px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  color:var(--text-on-dark);
  text-align:center;
}

/* Rapproche le bandeau de logos du titre/sous-titre qui le précèdent
   (au lieu du grand espacement standard entre sections). */
.logo-carousel-subtitle + .logo-carousel{
  margin-top:20px;
}

.logo-carousel{
  width:100%;
  margin:var(--spacing-section) 0;
  padding:40px 0;
  background:var(--color-white);
  overflow:hidden;
}

.logo-carousel-track{
  display:flex;
  align-items:center;
  gap:76px;
  width:max-content;
  animation:logo-carousel-scroll 50s linear infinite;
}

.logo-carousel-item{
  flex:0 0 auto;
  width:230px;
  height:115px;
  padding:18px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-carousel--diag .logo-carousel-item{
  width:200px;
  height:100px;
  padding:6px;
}

.logo-carousel--diag .logo-carousel-item--wse{
  padding:0;
}

.logo-carousel-item img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  object-fit:contain;
}

@keyframes logo-carousel-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@media (max-width:1024px){
  .logo-carousel-track{
    gap:58px;
  }
  .logo-carousel-item{
    width:190px;
    height:98px;
    padding:16px;
  }
}

@media (max-width:767px){
  .logo-carousel{
    padding:26px 0;
  }
  .logo-carousel-track{
    gap:44px;
  }
  .logo-carousel-item{
    width:150px;
    height:80px;
    padding:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  .logo-carousel-track{
    animation-play-state:paused;
  }
}

/* ---------- Logos partenaires / certifications ---------- */

/* Intro (partenaires.html, certifications.html) : reprend désormais le
   composant générique .page-header (partagé par formation/diagnostic/
   développement). Texte introductif principal centré ; .method-intro
   (intros de section en milieu de page, pas sous le titre principal) reste
   justifié. */
.page-header .intro.intro--justify{
  text-align:center;
}

.method-intro p.intro--justify{
  text-align:justify;
  text-align-last:left;
}

/* Trois niveaux (partenaires.html) : titre + sous-titre + logos centrés,
   scopé à cette page (.partners-network n'est utilisé nulle part ailleurs). */
.partners-network{
  max-width:1100px;
  margin:120px auto 0;
  padding:0 24px var(--spacing-section);
}

@media (max-width:900px){
  .partners-network{margin-top:90px;}
}

@media (max-width:600px){
  .partners-network{margin-top:64px;}
}

.partners-tier{
  text-align:center;
  margin-bottom:240px;
}

.partners-tier:last-child{
  margin-bottom:0;
}

.partners-tier h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  text-align:center;
  margin:0 0 6px;
}

.partners-tier-subtitle{
  font-family:var(--font-body);
  font-weight:700;
  font-size:21px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--color-primary);
  text-align:center;
  margin:0 0 32px;
}

.partners-tier-logos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:var(--spacing-cards);
}

.partners-tier-logos .partner-item{
  width:290px;
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

@media (max-width:520px){
  .partners-tier-logos .partner-item{
    width:100%;
    max-width:290px;
  }
}

.partner-logo-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  color:var(--color-gray);
  text-decoration:none;
  transition:color 0.25s ease, gap 0.25s ease;
}

.partner-logo-link:hover,
.partner-logo-link:focus-visible{
  color:var(--color-white);
  gap:9px;
}

.partner-logo{
  width:100%;
  background:var(--color-white);
  border-radius:var(--radius);
  padding:30px;
  height:235px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.partner-logo:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.partner-logo a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.partner-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Le logo Digital League contient une marge interne importante dans son
   fichier source : on réduit le padding intérieur (au lieu d'agrandir
   l'image via transform) pour l'agrandir visuellement tout en garantissant,
   grâce à object-fit:contain, qu'il ne dépasse jamais les bords de
   l'encadré. L'encadré lui-même (largeur/hauteur/fond/coins) est inchangé. */
.partner-logo--digital-league{
  padding:12px;
}

@media (max-width:600px){
  .partners-tier{margin-bottom:140px;}
}

.card-logo{
  display:block;
  height:64px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  margin:0 auto 16px;
}

.journey{
  max-width:1100px;
  margin:56px auto 0;
  padding:0 24px;
}

.journey-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--spacing-cards);
}

@media (max-width:900px){
  .journey-grid{grid-template-columns:1fr;}
}

.journey-card{
  display:flex;
  flex-direction:column;
}

.journey-frame{
  background:linear-gradient(165deg, rgba(var(--color-surface-soft-rgb),0.96) 0%, rgba(var(--color-surface-rgb),0.98) 100%);
  color:var(--text-on-dark);
  border:1px solid rgba(var(--color-primary-rgb),0.12);
  border-radius:var(--radius);
  padding:28px;
  margin-bottom:20px;
  flex:1;
  text-align:center;
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04);
}

.journey-frame .step-eyebrow{
  background:var(--color-gray-light);
  color:var(--color-dark);
}

.journey-frame h3{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:18px;
  color:var(--color-white);
  margin:0 0 8px;
}

.journey-frame h3 a{
  color:inherit;
  text-decoration:none;
}

.journey-frame h3 a:hover{
  color:var(--color-primary);
}

.journey-subtitle{
  font-family:var(--font-body);
  font-style:italic;
  font-weight:400;
  font-size:14px;
  color:var(--color-gray);
  margin:0;
}

.journey-visual{
  width:100%;
  aspect-ratio:3 / 4;
  border-radius:var(--radius);
  border:1px dashed rgba(var(--color-primary-rgb),0.24);
  background:rgba(var(--color-surface-rgb),0.82);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
  padding:24px;
}

.journey-visual--filled{
  border-style:solid;
  border-color:rgba(255,255,255,0.15);
  padding:0;
  box-shadow:var(--shadow-sm);
}

.journey-visual-media{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:inherit;
}

.journey-visual-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---- Animation de tracé progressif de la bordure (carte "Étape 1") ----
   Technique CSS pure (anneau en conic-gradient + double masque) : le tracé
   épouse exactement le border-radius réel de l'encadré, sans passer par un
   viewBox SVG qui déformerait le contour sur des cartes non carrées. ---- */

@property --trace-progress{
  syntax:'<number>';
  inherits:false;
  initial-value:0;
}

.trace-border{
  position:relative;
}

.trace-border::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:calc(var(--radius) + 1px);
  padding:3px;
  background:conic-gradient(var(--color-primary) calc(var(--trace-progress) * 3.6deg), transparent calc(var(--trace-progress) * 3.6deg));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 4px rgba(var(--color-primary-rgb),0.55)) drop-shadow(0 0 10px rgba(var(--color-primary-rgb),0.3));
  pointer-events:none;
  --trace-progress:0;
  transition:--trace-progress 0.9s ease;
}

@media (hover:hover) and (pointer:fine){
  .audience-card.trace-border:hover::before{
    --trace-progress:100;
  }
}

/* Étape active du parcours client (formation.html/diagnostic.html/
   developpement.html) : plus de tracé de bordure animé ici — un halo
   lumineux apparaît en fondu autour de la carte dès que la section entre
   dans le viewport, une seule fois, via js/journey-trace-reveal.js
   (.journey-inview posé sur .journey). Le tracé ::before reste utilisé tel
   quel pour .audience-card ailleurs sur le site (survol). */
.journey-card .trace-border::before{
  content:none;
}

.journey-card .trace-border{
  transition:box-shadow 2.4s ease-out;
}

.journey.journey-inview .journey-frame.trace-border{
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04), 0 0 22px rgba(var(--color-primary-rgb),1), 0 0 58px rgba(var(--color-primary-rgb),0.9), 0 0 110px rgba(var(--color-primary-rgb),0.6);
}

.journey.journey-inview .journey-visual--filled.trace-border{
  box-shadow:var(--shadow-sm), 0 0 22px rgba(var(--color-primary-rgb),1), 0 0 58px rgba(var(--color-primary-rgb),0.9), 0 0 110px rgba(var(--color-primary-rgb),0.6);
}

@media (prefers-reduced-motion:reduce){
  .journey-card .trace-border{
    transition:none;
  }
}

.visual-label{
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  color:rgba(255,255,255,0.85);
}

.journey-visual ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.journey-visual ul li{
  font-family:var(--font-body);
  font-weight:400;
  font-size:12px;
  color:rgba(255,255,255,0.65);
}

.outcomes-section{
  max-width:700px;
  margin:var(--spacing-section) auto 0;
  padding:0 24px;
}

/* Séparation plus marquée entre "Pour qui est cette formation ?" et la
   section suivante, resserrée sur tablette/mobile pour éviter un vide
   excessif. */
.audience-section + .outcomes-section{
  margin-top:200px;
}

@media (max-width:1279px){
  .audience-section + .outcomes-section{
    margin-top:130px;
  }
}

@media (max-width:767px){
  .audience-section + .outcomes-section{
    margin-top:90px;
  }
}

.outcomes-section h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  text-align:center;
  margin:0 0 var(--gap-title-intro);
}

/* ===================================================================
   Formation-initiation-ia.html — jours / audience
   =================================================================== */

.day-section{
  max-width:1100px;
  margin:64px auto 0;
  padding:40px 24px;
  background:linear-gradient(135deg, rgba(var(--color-primary-rgb),0.12), rgba(var(--color-primary-hover-rgb),0.06)), rgba(var(--color-surface-rgb),0.82);
  border:1px solid rgba(var(--color-primary-rgb),0.14);
  border-radius:var(--radius-xl);
  box-shadow:0 24px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
}

.day-section h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  letter-spacing:0.01em;
  margin:0 0 var(--gap-title-intro);
  padding-bottom:16px;
  border-bottom:1px solid rgba(var(--color-gray-light-rgb),0.12);
}

.audience-section{
  max-width:1100px;
  margin:var(--spacing-section) auto 0;
  padding:0 24px;
  text-align:center;
}

.audience-section h2{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:28px;
  color:var(--title-color);
  margin:0 0 var(--gap-title-intro);
}

.audience-section.uc-reveal-section h2{
  font-family:var(--font-h1);
  font-size:32px;
  color:var(--color-white);
}

.audience-section > p{
  font-size:16px;
  line-height:1.8;
  max-width:700px;
  margin:0 auto var(--spacing-title-text);
}

/* Présentation du formateur, entre les modules (J1/J2) et
   "Pour qui est cette formation ?" — posée directement sur le fond de la
   page (pas d'encadré), séparée par un espacement généreux
   (--spacing-section) des deux côtés. */
.trainer-section{
  max-width:1100px;
  margin:var(--spacing-section) auto 0;
  padding:56px 40px;
  text-align:center;
}

.trainer-logo-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:28px;
}

.trainer-logo{
  background:var(--color-white);
  border-radius:var(--radius-lg);
  padding:20px 28px;
  height:96px;
  width:auto;
  max-width:280px;
  object-fit:contain;
  box-shadow:var(--shadow-sm);
}

.trainer-name{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:0 0 32px;
}

.trainer-bio{
  max-width:700px;
  margin:0 auto;
}

.trainer-bio p{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.8;
  text-align:justify;
  color:var(--text-on-dark);
  margin:0 0 20px;
}

.trainer-bio p:last-child{
  margin-bottom:0;
}

@media (max-width:767px){
  .trainer-section{
    margin-top:64px;
    padding:40px 24px;
  }

  .trainer-logo{
    height:72px;
    padding:16px 20px;
  }

  .trainer-name{
    font-size:19px;
    margin-bottom:24px;
  }
}

/* ===================================================================
   A propos — en-tête large, valeurs, chiffres-clés, équipe (a-propos.html)
   =================================================================== */

.page-header--wide{
  max-width:none;
}

/* Aligné sur la même hauteur que .page-header (formation/développement/
   diagnostic) : le titre démarre au même niveau sur toutes les pages. */
.page-header--wide{
  padding-top:var(--gap-header-hero);
}

.page-header--wide .intro{
  max-width:950px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

@media (max-width:1400px){
  .page-header--wide .intro{
    max-width:900px;
  }
}

@media (max-width:900px){
  .page-header--wide .intro{
    max-width:680px;
  }
}

.page-header--wide h1{
  color:var(--color-primary);
}

/* Descend le bloc titre de la hero (espace nav → titre), spécifique à
   a-propos.html (ne touche pas index.html / certifications.html qui
   partagent .page-header--wide). Taille du hero inchangée. */
body.page-a-propos .page-header--wide{
  padding-top:130px;
}

body.page-a-propos .page-header--wide h1{
  font-size:44px;
}

/* Force exactement 2 lignes (coupure au <br> du HTML), sans retour à la
   ligne intermédiaire indésirable ; sur mobile, l'espace manque pour tenir
   la 1ère ligne sur une seule ligne, on repasse alors en retour naturel. */
.page-header--wide-line{
  white-space:nowrap;
}

@media (max-width:700px){
  .page-header--wide-line{
    white-space:normal;
  }
}

.page-header--wide p.hero-tagline--home,
.page-header--wide .intro{
  color:var(--color-white);
}

.page-header--wide p.hero-tagline--home{
  text-shadow:0 0 16px rgba(var(--color-primary-rgb),0.85), 0 0 40px rgba(var(--color-primary-rgb),0.5);
}

.method-intro--sm-title{
  margin-top:170px;
  background:none;
  border:none;
  box-shadow:none;
  padding:0 24px;
}

@media (max-width:900px){
  .method-intro--sm-title{margin-top:130px;}
}

@media (max-width:600px){
  .method-intro--sm-title{margin-top:90px;}
}

.method-intro--sm-title h2{
  font-family:var(--font-h1);
  font-size:32px;
  color:var(--color-white);
  margin-bottom:8px;
}

.method-intro h2.method-intro-title--sm{
  font-family:var(--font-h1);
  font-size:32px;
  color:var(--color-white);
}

.method-intro--no-frame{
  background:none;
  border:none;
  box-shadow:none;
  padding-bottom:22px;
  margin-top:calc(var(--spacing-section) * 2);
}

.method-intro--no-frame h2{
  color:var(--color-white);
  font-size:32px;
}

.appr-section-title{
  text-align:center;
  color:var(--color-white);
  font-family:var(--font-h1);
  font-weight:700;
  font-size:clamp(18px, 2.2vw, 26px);
  letter-spacing:0.01em;
  line-height:1.3;
  margin:0 0 var(--gap-title-intro);
}

.journey--tight{
  margin-top:28px;
}

.method-intro--after-paves{
  margin-top:120px;
}

@media (max-width:900px){
  .method-intro--after-paves{margin-top:90px;}
}

@media (max-width:600px){
  .method-intro--after-paves{margin-top:64px;}
}

.method-intro.method-intro--sm-title p{
  color:var(--color-primary);
  font-size:16px;
}

.audience-section--accent-intro > p{
  color:var(--color-primary);
  font-size:16px;
}

.audience-section--accent-intro h2{
  font-family:var(--font-h1);
  margin-bottom:8px;
  font-size:32px;
  color:var(--color-white);
}

.audience-section--accent-intro{
  margin-top:260px;
}

@media (max-width:900px){
  .audience-section--accent-intro{margin-top:200px;}
}

@media (max-width:600px){
  .audience-section--accent-intro{margin-top:140px;}
}

.team-group-title.team-group-title--committee{
  margin-top:56px;
}

@media (max-width:900px){
  .team-group-title.team-group-title--committee{margin-top:48px;}
}

@media (max-width:600px){
  .team-group-title.team-group-title--committee{margin-top:40px;}
}

/* "Nos valeurs" — 3 lignes horizontales éditoriales (a-propos.html), en
   remplacement des 3 cartes .cards--light : icône à gauche (centrée
   verticalement sur le bloc titre+texte), titre et texte alignés à gauche
   à droite de l'icône, sans fond de carte. Séparées par un fin trait en
   dégradé aligné sur la largeur du contenu (pas de trait après la 3e). */
.values-frieze{
  max-width:820px;
  margin:56px auto 0;
  padding:0 24px;
  display:flex;
  flex-direction:column;
}

.values-frieze-item{
  display:flex;
  align-items:center;
  text-align:left;
  gap:32px;
  padding:40px 0;
}

.values-frieze-item:first-child{
  padding-top:0;
}

.values-frieze-item:last-child{
  padding-bottom:0;
}

.values-frieze-body{
  flex:1;
}

.values-frieze-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:19px;
  letter-spacing:0.05em;
  color:var(--color-white);
  text-align:left;
  margin:0 0 12px;
}

.values-frieze-text{
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.8;
  color:var(--text-on-dark);
  text-align:left;
  margin:0;
}

.values-frieze-divider{
  display:block;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb),0.5), transparent);
}

@property --ring-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}

.value-icon-frame{
  display:block;
  position:relative;
  flex:none;
  width:110px;
  height:110px;
  margin:0;
}

.value-icon-frame::before{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:50%;
  padding:2px;
  --ring-angle:0deg;
  background:conic-gradient(from -90deg, var(--color-primary) var(--ring-angle), transparent var(--ring-angle));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transition:--ring-angle 0.7s ease;
  pointer-events:none;
}

.values-frieze-item:hover .value-icon-frame::before{
  --ring-angle:360deg;
}

/* Les 3 logos (Engagement / Compétences / Sens du résultat) partagent
   exactement le même cercle (110x110, fond #F7F7F7 identique au fond propre
   des fichiers sources) et le même padding de base : object-fit:contain
   garantit qu'aucun pictogramme n'est jamais rogné ni déformé, et la marge
   intérieure commune leur donne la même importance visuelle, quelle que
   soit la résolution ou le cadrage d'origine de chaque fichier. */
.value-icon{
  display:block;
  width:110px;
  height:110px;
  border-radius:50%;
  box-sizing:border-box;
  padding:13px;
  background-color:#F7F7F7;
  object-fit:contain;
  object-position:center;
  margin:0;
  position:relative;
  z-index:1;
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.3s ease;
}

/* Recentrage horizontal propre à chaque pictogramme (voir .value-icon) —
   mêmes proportions qu'en 140px, mises à l'échelle pour le cercle 110px. */
.value-icon[src*="valeur-engagement"]{
  padding:13px 10px 13px 15px;
}

.value-icon[src*="valeur-competences"]{
  padding:13px 11px 13px 14px;
}

.value-icon[src*="valeur-sens-du-resultat"]{
  padding:13px 11px 13px 14px;
}

.values-frieze-item:hover .value-icon{
  box-shadow:0 0 0 4px rgba(var(--color-primary-rgb),0.12), var(--shadow);
}

@media (max-width:600px){
  .values-frieze-item{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
  }

  .values-frieze-title,
  .values-frieze-text{
    text-align:center;
  }
}

/* ===================================================================
   Nos valeurs — apparition au scroll (a-propos.html)
   Déclenchement unique via IntersectionObserver (voir
   js/values-frieze-reveal.js, même principe que .sf-cards/.cards--sky) :
   les 3 blocs (icône + titre + texte) se révèlent en cascade, le cercle
   d'icône passe d'une légère transparence à son état normal, et les
   séparateurs se dessinent de gauche à droite — le tout via transform/
   opacity/clip-path pour rester fluide sur mobile.
   =================================================================== */
.values-frieze-item{
  opacity:0;
  transform:translateY(35px) scale(0.98);
  transition:opacity 2.4s ease-out, transform 2.4s ease-out;
}

.values-frieze-item:nth-of-type(1){transition-delay:0ms;}
.values-frieze-item:nth-of-type(2){transition-delay:600ms;}
.values-frieze-item:nth-of-type(3){transition-delay:1200ms;}

.values-frieze.is-inview .values-frieze-item{
  opacity:1;
  transform:translateY(0) scale(1);
}

.value-icon-frame{
  opacity:0.4;
  transition:opacity 2.4s ease;
}

.values-frieze-item:nth-of-type(1) .value-icon-frame{transition-delay:0ms;}
.values-frieze-item:nth-of-type(2) .value-icon-frame{transition-delay:600ms;}
.values-frieze-item:nth-of-type(3) .value-icon-frame{transition-delay:1200ms;}

.values-frieze.is-inview .value-icon-frame{
  opacity:1;
}

.values-frieze-divider{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 2.4s ease-out;
}

.values-frieze-divider:nth-of-type(1){transition-delay:600ms;}
.values-frieze-divider:nth-of-type(2){transition-delay:1200ms;}

.values-frieze.is-inview .values-frieze-divider{
  clip-path:inset(0 0% 0 0);
}

@media (prefers-reduced-motion: reduce){
  .values-frieze-item,
  .value-icon-frame,
  .values-frieze-divider{
    opacity:1;
    transform:none;
    clip-path:inset(0 0% 0 0);
    transition:none;
  }
}

/* Bordure animée qui se "dessine" en cercle au survol (a-propos.html, developpement.html) */
@property --card-border-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}

.card--border-draw{
  position:relative;
}

.card--border-draw::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--card-border-draw-radius, var(--radius));
  padding:2px;
  --card-border-angle:0deg;
  background:conic-gradient(from -90deg, var(--color-primary) var(--card-border-angle), transparent var(--card-border-angle));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:2;
  transition:--card-border-angle 1.6s ease;
}

.card--border-draw:hover::before{
  --card-border-angle:360deg;
}

/* Scopé via la combinaison de classes : n'affecte pas .card--full de diagnostic.html,
   qui n'a pas .card--border-draw */
.card--full.card--border-draw{
  background:linear-gradient(135deg, rgba(var(--color-primary-rgb),0.12), rgba(var(--color-primary-hover-rgb),0.06)), rgba(var(--color-surface-rgb),0.82);
  align-items:stretch;
}

.card--full.card--border-draw + .card--full.card--border-draw{
  margin-top:170px;
}

.card--full.card--border-draw .card-subtitle{
  font-size:32px;
  font-weight:700;
  color:#FFFFFF;
}

.sf-intro-text{
  text-align:center;
}

.card--full.card--border-draw .journey-subtitle{
  text-align:left;
  margin:0 0 16px;
  color:var(--color-primary);
  font-style:normal;
  font-size:16px;
}

.card--full.card--border-draw .card-text{
  max-width:none;
  padding-left:24px;
  color:var(--color-white);
  font-weight:500;
}

.card--full.card--border-draw .g2m-list li{
  color:var(--color-white);
  font-weight:500;
}

.card--full.card--border-draw .card-text + .g2m-list{
  margin-top:16px;
}

/* NOTRE MISSION (a-propos.html) : le titre/sous-titre bleu sont sortis de la
   ligne texte+photo (.card--full-heading, pleine largeur, au-dessus) afin
   que la photo ne s'aligne plus que sur .card--full-text — elle commence au
   niveau de la première ligne du texte et finit à la dernière, pas au
   niveau du titre. .card--full-row est la ligne flex texte+photo (remplace
   .card--full comme contexte de stretch pour .card--full-media). */
.card--full-row{
  display:flex;
  align-items:stretch;
  gap:32px;
  margin-top:56px;
}

.card--full-text{
  flex:1;
}

@media (max-width:700px){
  .card--full-row{flex-direction:column;}
}

/* Wrapper sans hauteur intrinsèque propre (l'image y est détachée du flux via
   position:absolute) : dans le flex row, sa taille de référence avant stretch
   est donc nulle, ce qui laisse .card--full-text (le texte) seul maître de
   la hauteur de la ligne. align-self:stretch étire ensuite ce wrapper à cette
   hauteur, et l'image la remplit en object-fit:cover. Résultat : la hauteur
   de la photo suit le texte (paragraphe + liste), jamais le titre. */
.card--full.card--border-draw .card--full-media{
  position:relative;
  width:100%;
  max-width:440px;
  align-self:stretch;
  flex:none;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.card--full.card--border-draw .card--full-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

@media (max-width:700px){
  .card--full.card--border-draw .card--full-media{max-width:100%; aspect-ratio:4/3;}
}

/* Variante "sans encadré" (a-propos.html, blocs NOTRE MISSION / NOTRE
   SAVOIR-FAIRE) : supprime uniquement le fond, la bordure statique, le
   padding et le liseré conique animé de .card--border-draw — la mise en
   page (texte + photo côte à côte), la typographie et le style de l'image
   restent ceux de .card--full.card--border-draw, inchangés. */
.card--full.card--border-draw.card--full--plain{
  background:none;
}

.card--full--plain{
  border:none;
  padding:0;
  box-shadow:none;
}

.card--full--plain .card-subtitle,
.card--full.card--border-draw.card--full--plain .journey-subtitle{
  text-align:center;
}

.card--full--plain:hover{
  border:none;
  box-shadow:none;
  transform:none;
}

.card--full--plain.card--border-draw::before{
  display:none;
}

.stats-row-title{
  text-align:center;
  margin:170px 0 0;
}

@media (max-width:900px){
  .stats-row-title{margin-top:130px;}
}

@media (max-width:600px){
  .stats-row-title{margin-top:90px;}
}

.stats-row-title h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:0;
}

.stats-row{
  max-width:none;
  margin:32px 0 0;
  padding:100px 24px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  text-align:center;
  background:var(--color-white);
  border:1px solid rgba(var(--color-primary-rgb),0.14);
  border-radius:0;
  --card-border-draw-radius:0px;
  box-shadow:0 24px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
}

.stats-row > div{
  position:relative;
  min-width:0;
  width:100%;
  padding:0 calc(var(--spacing-cards) / 2);
  box-sizing:border-box;
}

/* Pas de gap entre colonnes : le séparateur est posé exactement à la
   frontière entre deux colonnes égales (right:0), et le padding
   symétrique de chaque colonne garantit une distance identique entre
   le trait et l'indicateur de gauche comme de droite. N'a de sens
   qu'avec les 4 colonnes alignées sur une seule ligne (breakpoints
   ci-dessous). */
@media (min-width:701px){
  .stats-row > div:not(:last-child)::after{
    content:"";
    position:absolute;
    top:15%;
    bottom:15%;
    right:0;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(var(--color-primary-rgb),0.35), transparent);
  }
}

@media (max-width:700px){
  .stats-row{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:420px){
  .stats-row{grid-template-columns:repeat(2, 1fr);}
}

.stat-number{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(34px, 4vw, 52px);
  color:#123a63;
  line-height:1;
  margin:0 0 2px;
}

/* Hauteur fixe partagée avec .stat-rotator (établissement en rotation,
   sur 2 colonnes max) pour garantir un alignement vertical identique
   entre les 4 indicateurs, que la valeur tienne sur une ligne ou que le
   nom d'établissement le plus long en occupe deux. */
.stats-row .stat-number,
.stat-rotator{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stat-rotator{
  position:relative;
  margin:0 0 2px;
}

.stat-rotator-item{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(20px, 2.6vw, 28px);
  line-height:1.2;
  color:#123a63;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.45s ease, transform 0.45s ease;
}

.stat-rotator-item--long{
  font-size:clamp(18px, 2.3vw, 24px);
}

.stat-rotator-item.is-active{
  opacity:1;
  transform:translateY(0);
}

.stat-rotator-item.is-leaving{
  opacity:0;
  transform:translateY(-10px);
}

@media (prefers-reduced-motion: reduce){
  .stat-rotator-item{transition:none;}
}

.stat-label{
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  line-height:1.5;
  color:#123a63;
  margin:0;
}

.team-grid{
  max-width:1120px;
  margin:calc(var(--spacing-title-text) + 110px) auto var(--spacing-section);
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:100px 24px;
}

/* Carte "avatar débordant" : la photo (portée par .team-photo-wrap,
   positionnée en absolu) chevauche le haut de la carte d'environ 50% de
   sa hauteur — d'où le padding-top de .team-card réservant cet espace,
   et le position:relative + overflow:visible pour laisser le cercle
   déborder sans être rogné. */
.team-card{
  --team-photo-size:clamp(120px, 22vw, 150px);
  position:relative;
  overflow:visible;
  width:100%;
  max-width:304px;
  flex:0 1 304px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.62) 0%, rgba(var(--color-primary-rgb),0.34) 45%, rgba(var(--color-surface-rgb),0.97) 100%);
  border:1px solid rgba(var(--color-primary-rgb),0.40);
  border-radius:var(--radius);
  padding:calc(var(--team-photo-size) / 2 + 16px) 26px 24px;
  height:380px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
  text-align:center;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (max-width:700px){
  .team-card{flex-basis:calc((100% - var(--spacing-cards)) / 2);}
}

@media (max-width:520px){
  .team-card{flex-basis:100%; max-width:300px;}
}

.team-card:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--color-primary-rgb),0.30);
  box-shadow:var(--shadow-hover);
}

.team-photo-wrap{
  position:absolute;
  top:calc(var(--team-photo-size) / -2);
  left:50%;
  transform:translateX(-50%);
  width:var(--team-photo-size);
  height:var(--team-photo-size);
  border-radius:50%;
  box-shadow:0 12px 28px rgba(0,0,0,0.4);
}

.team-photo{
  width:100%;
  height:100%;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  margin:0;
  display:block;
  border:3px solid var(--color-white);
}

/* Photo source déjà cadrée serré (portrait plein cadre) : contain montre
   la photo entière au lieu de la recadrer davantage via cover, pour un
   rendu moins zoomé. Fond blanc pour prolonger l'arrière-plan de la photo
   dans les bandes latérales laissées par contain (au lieu de zones noires). */
.team-photo--contain{
  object-fit:contain;
  background:var(--color-white);
}

.team-card-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  height:100%;
}

.team-name{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:20px;
  color:var(--color-white);
  margin:0;
}

.team-surname{
  color:var(--color-white);
}

.team-role{
  font-family:var(--font-body);
  font-style:italic;
  font-weight:400;
  font-size:13px;
  text-transform:lowercase;
  letter-spacing:0.02em;
  color:var(--color-gray);
  text-align:center;
  white-space:nowrap;
  margin:6px 0 0;
}

.team-role-caps{
  text-transform:uppercase;
}

.team-role::first-letter{
  text-transform:uppercase;
}

.team-divider{
  width:36px;
  height:2px;
  border-radius:2px;
  background:var(--color-primary);
  margin:10px 0;
}

.team-expertise{
  font-family:var(--font-body);
  font-weight:400;
  font-size:13px;
  line-height:1.6;
  color:var(--text-on-dark);
  text-align:center;
  max-width:230px;
  margin:0;
}

.team-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:14px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  color:var(--color-primary);
  text-decoration:none;
  transition:color 0.25s ease, gap 0.25s ease;
}

.team-link-icon{
  width:15px;
  height:15px;
  flex:none;
  fill:currentColor;
}

.team-link-arrow{
  transform:translateX(-2px);
  transition:transform 0.25s ease;
}

.team-link:hover,
.team-link:focus-visible{
  color:var(--color-white);
  gap:11px;
}

.team-link:hover .team-link-arrow,
.team-link:focus-visible .team-link-arrow{
  transform:translateX(0);
}

.team-group-title{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  text-align:center;
  margin:var(--spacing-section-tight) 0 var(--gap-title-intro);
}

.team-group-title:first-of-type{
  margin-top:var(--spacing-title-text);
}

/* ---------- Bandeau "LinkedIn G2M", en tête des profils d'équipe ----------
   Reprend l'identité visuelle de .team-card (fond dégradé, bordure, radius,
   ombre, hover) mais en encadré rectangulaire pleine largeur (icône à
   gauche, texte au centre, lien à droite) plutôt qu'en carte verticale à
   avatar débordant. Toute la carte est un lien unique vers la page
   LinkedIn de l'entreprise. Largeur calée au pixel près sur la ligne des 3
   cartes de profils juste en dessous (mesure réelle du DOM via
   js/team-linkedin-align.js, recalculée au resize — la largeur ci-dessous
   n'est qu'un repli avant exécution du script/si JS est désactivé).
   Apparition au scroll dédiée (fondu + translateY 20px, 0.6s ease-out, une
   seule fois) via js/team-linkedin-reveal.js. */
.team-linkedin-section{
  padding:0 24px;
  margin:0 auto var(--spacing-title-text);
}

.team-card--linkedin{
  display:flex;
  align-items:center;
  gap:24px;
  width:960px;
  max-width:100%;
  margin:0 auto;
  background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.62) 0%, rgba(var(--color-primary-rgb),0.34) 45%, rgba(var(--color-surface-rgb),0.97) 100%);
  border:1px solid rgba(var(--color-primary-rgb),0.40);
  border-radius:var(--radius);
  padding:28px 32px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
  text-decoration:none;
  cursor:pointer;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.6s ease-out, transform 0.6s ease-out, border-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing:border-box;
}

.team-linkedin-section.is-inview .team-card--linkedin{
  opacity:1;
  transform:translateY(0);
}

.team-card--linkedin:hover{
  border-color:rgba(var(--color-primary-rgb),0.30);
  box-shadow:var(--shadow-hover);
}

.team-linkedin-icon-wrap{
  flex:none;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--color-white);
  box-shadow:0 12px 28px rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
}

.team-linkedin-icon{
  width:28px;
  height:28px;
  fill:var(--color-primary);
}

.team-linkedin-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  text-align:left;
}

.team-linkedin-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:20px;
  color:var(--color-white);
}

.team-linkedin-text{
  font-family:var(--font-body);
  font-weight:400;
  font-size:13px;
  line-height:1.6;
  color:var(--text-on-dark);
  margin-top:6px;
}

.team-linkedin-link{
  flex:none;
  margin-top:0;
  padding-top:0;
}

.team-card--linkedin:hover .team-link,
.team-card--linkedin:focus-visible .team-link{
  color:var(--color-white);
  gap:11px;
}

.team-card--linkedin:hover .team-link-arrow,
.team-card--linkedin:focus-visible .team-link-arrow{
  transform:translateX(0);
}

@media (max-width:600px){
  .team-card--linkedin{
    flex-wrap:wrap;
    padding:24px;
  }
  .team-linkedin-body{
    flex-basis:100%;
    text-align:center;
    align-items:center;
  }
  .team-linkedin-icon-wrap{
    margin:0 auto;
  }
  .team-linkedin-link{
    margin:4px auto 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .team-card--linkedin{transition:border-color 0.25s ease, box-shadow 0.25s ease; opacity:1; transform:none;}
}

/* ===================================================================
   "G2M en chiffres" — bandeau indicateurs (index.html)
   Fond bleu nuit hérité de body{} (pas de bande blanche comme .stats-row
   sur a-propos.html — composant volontairement distinct). Compteurs
   simultanés animés au scroll via js/stats-band-counter.js (~1,9s,
   ease-out, une seule fois — IntersectionObserver + unobserve).
   =================================================================== */
.stats-band{
  max-width:1352px;
  margin:150px auto;
  padding:0 24px;
  text-align:center;
}

/* grid-template-columns:repeat(auto-fit, minmax(0,1fr)) : autant de
   colonnes strictement égales qu'il y a de .stats-band-item — ajouter un
   4e indicateur (ou un 5e) dans le HTML suffit, la répartition reste
   automatiquement homogène sans toucher au CSS. */
.stats-band-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
}

@media (max-width:900px){
  .stats-band-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:48px;}
}

@media (max-width:520px){
  .stats-band-grid{grid-template-columns:minmax(0, 1fr); row-gap:40px;}
}

.stats-band-item{
  position:relative;
  display:block;
  padding:8px 32px;
  border-radius:var(--radius);
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:transform 0.28s ease-out;
}

/* Pas de gap entre colonnes : le séparateur est posé exactement à la
   frontière entre deux colonnes égales (right:0, sans gap), et le padding
   symétrique de chaque item (32px de part et d'autre) garantit une
   distance identique entre le trait et l'indicateur de gauche comme de
   droite. Masqué dès que la grille repasse en 2 colonnes / 1 colonne,
   où la frontière ne sépare plus les mêmes voisins visuellement. */
@media (min-width:901px){
  .stats-band-item:not(:last-child)::before{
    content:"";
    position:absolute;
    top:15%;
    bottom:15%;
    right:0;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(var(--color-primary-rgb),0.35), transparent);
  }
}

.stats-band-item::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:var(--radius-lg);
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),0.16), transparent 72%);
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none;
  z-index:-1;
}

.stats-band-item:hover,
.stats-band-item:focus-visible{
  transform:scale(1.03);
}

.stats-band-item:hover::after,
.stats-band-item:focus-visible::after{
  opacity:1;
}

.stats-band-item .stat-number{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(36px, 4.4vw, 56px);
  color:var(--color-white);
  line-height:1;
  white-space:nowrap;
  margin:0 0 10px;
  transition:color 0.28s ease-out, text-shadow 0.28s ease-out;
}

.stats-band-item:hover .stat-number,
.stats-band-item:focus-visible .stat-number{
  color:var(--color-white);
  text-shadow:0 0 22px rgba(var(--color-primary-rgb),0.85);
}

.stats-band-item .stat-label{
  font-family:var(--font-body);
  font-weight:500;
  font-size:14px;
  line-height:1.5;
  color:var(--text-on-dark);
  margin:0;
  transition:color 0.28s ease-out;
}

.stats-band-item:hover .stat-label,
.stats-band-item:focus-visible .stat-label{
  color:var(--color-white);
}

@media (prefers-reduced-motion: reduce){
  .stats-band-item{transition:none;}
  .stats-band-item:hover{transform:none;}
}

/* ---------- Chiffres clés (accueil) : les 3 indicateurs sur une seule
   ligne en MOBILE UNIQUEMENT (≤768px), au lieu de l'empilement vertical
   hérité des règles ≤900px/≤520px ci-dessus. Scopé à body.page-home
   (page unique utilisant .stats-band-grid) + spécificité renforcée
   pour gagner sur ces règles existantes. Typographie, couleurs, halo
   au survol, transitions et logique des compteurs (js/stats-band-
   counter.js) restent inchangés — seules tailles et espacements
   changent. Desktop non modifié : rien ici ne touche aux règles
   au-delà de 768px. */
@media (max-width:768px){
  body.page-home .stats-band-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:10px;
    row-gap:0;
  }

  body.page-home .stats-band-item{
    padding:6px 6px;
  }

  body.page-home .stats-band-item .stat-number{
    font-size:clamp(20px, 7vw, 26px);
    margin:0 0 6px;
  }

  body.page-home .stats-band-item .stat-label{
    font-size:10.5px;
    line-height:1.35;
  }
}

/* ===================================================================
   Développement — bandeau intro, expertises, méthodologie, gages de confiance
   (developpement.html)
   =================================================================== */

.intro-banner{
  max-width:900px;
  margin:0 auto 0;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.intro-banner-text{
  text-align:center;
}

.intro-banner-text p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--text-on-dark);
  margin:0 0 16px;
}

.intro-banner-text p:last-child{
  margin-bottom:0;
}

@media (max-width:900px){
  .intro-banner{
    flex-direction:column;
    gap:28px;
  }
}

/* Largeur élargie, spécifique à developpement.html, pour que le texte
   introductif (retours à la ligne manuels) tienne sur exactement 4 lignes
   sans se recasser, quitte à occuper davantage de largeur (ne touche pas
   .intro-banner ailleurs). */
body.page-developpement .page-header{
  max-width:1500px;
}

body.page-developpement .intro-banner{
  max-width:1500px;
}

/* Panneaux d'intro sans encadré : texte simple centré directement sur le fond de la page.
   Scopé à developpement.html via body.page-developpement pour ne pas affecter
   .diag-intro.diag-intro--compact utilisé par diagnostic.html / expertise-data-ia.html / expertise-metier-ia.html */
body.page-developpement .diag-intro{
  max-width:900px;
  margin:56px auto 0;
  padding:0 24px;
  text-align:center;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
}

body.page-developpement .diag-intro.diag-intro--after-expertise{
  margin-top:190px;
}

@media (max-width:1279px){
  body.page-developpement .diag-intro.diag-intro--after-expertise{margin-top:150px;}
}

@media (max-width:767px){
  body.page-developpement .diag-intro.diag-intro--after-expertise{margin-top:110px;}
}

/* Typographie strictement alignée sur les grands titres de section de
   diagnostic.html/formation.html (voir .diag2-method-title h2), pour que
   "Nos expertises techniques", "Notre processus d'intervention" et
   "Pourquoi G2M ?" partagent exactement la même identité graphique. */
body.page-developpement .diag-intro .overline{
  display:block;
  background:none;
  border:none;
  padding:0;
  border-radius:0;
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  line-height:1.3;
  letter-spacing:0.01em;
  color:var(--color-white);
  margin-bottom:8px;
  text-transform:none;
}

@media (max-width:600px){
  body.page-developpement .diag-intro .overline{font-size:26px;}
}

body.page-developpement .diag-intro h2{
  font-size:16px;
  font-weight:500;
  color:var(--color-primary);
  text-transform:none;
  margin:0 0 var(--gap-title-intro);
}

/* Cartes d'expertises techniques (accordéon) : icône en médaillon centré en haut, halo animé au survol */
.cards--expertise{
  margin-bottom:calc(var(--spacing-section) + 40px);
}

.cards--expertise .card{
  height:auto;
  align-self:start;
  padding-top:calc(var(--card-padding) * 0.65);
  padding-bottom:calc(var(--card-padding) * 0.65);
  background:rgba(var(--color-primary-rgb),0.55);
  border-color:rgba(255,255,255,0.35);
  color:var(--color-white);
  transition:transform 0.25s ease, box-shadow 0.3s ease-out, border-color 0.3s ease-out, background 0.3s ease-out;
}

.cards--expertise .card:hover{
  border-color:rgba(255,255,255,0.5);
  background:rgba(var(--color-primary-rgb),0.62);
  box-shadow:var(--shadow-hover), 0 0 22px rgba(255,255,255,0.08);
}

.cards--expertise .card-subtitle{
  display:block;
  font-size:17px;
  color:var(--color-white);
  font-weight:700;
  text-shadow:0 1px 4px rgba(0,0,0,0.65);
  text-align:center;
  margin:0;
}

.cards--expertise .g2m-list li{
  font-size:14px;
  line-height:1.5;
  color:var(--color-white);
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
  font-weight:600;
}

.cards--expertise .card--border-draw::before{
  padding:1.5px;
  background:conic-gradient(from -90deg, rgba(255,255,255,0.85) var(--card-border-angle), transparent var(--card-border-angle));
  transition:--card-border-angle 0.3s ease-out;
}

.expertise-icon-wrap{
  position:relative;
  width:120px;
  height:120px;
  margin:0 auto 8px;
  flex:none;
}

.expertise-icon{
  position:absolute;
  top:15px;
  left:15px;
  width:90px;
  height:90px;
  border-radius:50%;
  background:var(--color-white);
  border:2px solid rgba(var(--color-primary-rgb),0.55);
  object-fit:contain;
  padding:10px;
  box-sizing:border-box;
  box-shadow:var(--shadow-sm);
  z-index:2;
}

.expertise-icon--transparent{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:0;
}

/* Anneau de particules gravitant autour de l'icône, révélé au survol de la
   carte (pas seulement de l'icône). Chaque point est un .orbit-dot placé à
   un rayon fixe (margin-top négatif) à l'intérieur d'un .orbit-ring qui
   tourne en continu (rotate 0→360, linear, infini) ; la rotation tourne déjà
   en arrière-plan même carte au repos, seule l'opacité du conteneur
   .expertise-icon-orbit est pilotée par le survol (fondu 0→1 en 0.3s), pour
   éviter tout à-coup de démarrage/redémarrage de l'animation. 3 rayons
   (40/50/58px) × 2 points = 6 particules, tailles 3-5px, mélange blanc /
   bleu primary / bleu primary-hover, intensités de halo (box-shadow)
   variées ; un animation-delay négatif différent par anneau déphase leur
   position de départ sans avoir à écrire une trajectoire par angle, et la
   durée du scintillement (opacité) de chaque point est volontairement
   désynchronisée de sa vitesse de rotation pour un rendu organique.
   L'icône elle-même reste fixe (aucune animation sur .expertise-icon). */
.expertise-icon-orbit{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity 0.3s ease-out;
}

.cards--expertise .card:hover .expertise-icon-orbit{
  opacity:1;
}

.orbit-ring{
  position:absolute;
  inset:0;
  animation-name:orbitSpin;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

@keyframes orbitSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.orbit-dot{
  position:absolute;
  top:50%;
  left:50%;
  border-radius:50%;
  animation-name:orbitTwinkle;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

@keyframes orbitTwinkle{
  0%, 100%{opacity:0.65;}
  50%{opacity:1;}
}

.orbit-ring--1a{animation-duration:7s; animation-delay:0s;}
.orbit-ring--1b{animation-duration:7s; animation-delay:-3.5s;}
.orbit-ring--2a{animation-duration:8.5s; animation-delay:-1.5s;}
.orbit-ring--2b{animation-duration:8.5s; animation-delay:-5.2s;}
.orbit-ring--3a{animation-duration:10.5s; animation-delay:-3s;}
.orbit-ring--3b{animation-duration:10.5s; animation-delay:-8s;}

.orbit-ring--1a .orbit-dot,
.orbit-ring--1b .orbit-dot{
  margin-top:-40px;
}

.orbit-ring--2a .orbit-dot,
.orbit-ring--2b .orbit-dot{
  margin-top:-50px;
}

.orbit-ring--3a .orbit-dot,
.orbit-ring--3b .orbit-dot{
  margin-top:-58px;
}

.orbit-dot--blue-1{
  width:4px;
  height:4px;
  margin-left:-2px;
  background:var(--color-primary);
  box-shadow:0 0 7px rgba(var(--color-primary-rgb),1);
  animation-duration:2.6s;
}

.orbit-dot--white-1{
  width:3px;
  height:3px;
  margin-left:-1.5px;
  background:var(--color-white);
  box-shadow:0 0 4px rgba(255,255,255,0.95);
  animation-duration:3.1s;
  animation-delay:-1s;
}

.orbit-dot--blue-2{
  width:5px;
  height:5px;
  margin-left:-2.5px;
  background:var(--color-primary);
  box-shadow:0 0 9px rgba(var(--color-primary-rgb),0.75);
  animation-duration:3.6s;
  animation-delay:-0.6s;
}

.orbit-dot--white-2{
  width:3.5px;
  height:3.5px;
  margin-left:-1.75px;
  background:var(--color-white);
  box-shadow:0 0 5px rgba(255,255,255,1);
  animation-duration:2.9s;
  animation-delay:-1.8s;
}

.orbit-dot--blue-3{
  width:4.5px;
  height:4.5px;
  margin-left:-2.25px;
  background:var(--color-primary-hover);
  box-shadow:0 0 6px rgba(var(--color-primary-hover-rgb),0.9);
  animation-duration:4s;
  animation-delay:-2.2s;
}

.orbit-dot--white-3{
  width:3px;
  height:3px;
  margin-left:-1.5px;
  background:var(--color-white);
  box-shadow:0 0 4px rgba(255,255,255,0.8);
  animation-duration:3.4s;
  animation-delay:-0.4s;
}

@media (prefers-reduced-motion: reduce){
  .expertise-icon-orbit{transition:none;}
  .orbit-ring{animation:none;}
  .orbit-dot{animation:none; opacity:0.7;}
}

/* Cartes d'expertises techniques en accordéon (developpement.html) : fermées
   par défaut, .expertise-toggle (vrai <button>) ouvre/ferme .expertise-panel
   via js/expertise-accordion.js (.is-open sur .card). Transition de hauteur
   fluide en grid-template-rows 0fr→1fr (précise quelle que soit la longueur
   du contenu, contrairement à un max-height fixe) ; le contenu de la liste
   suit avec un fondu + léger translateY. Plusieurs cartes peuvent rester
   ouvertes simultanément ; les autres cartes de la ligne ne s'étirent pas
   (.card passe en align-self:start au lieu du stretch par défaut). */
.expertise-toggle{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  color:inherit;
  font:inherit;
  text-align:center;
}

.expertise-toggle:focus-visible{
  outline:2px solid var(--color-white);
  outline-offset:6px;
  border-radius:var(--radius-sm);
}

.expertise-chevron{
  flex:none;
  margin-top:10px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.85);
  transition:transform 0.4s ease-out, color 0.25s ease;
}

.expertise-chevron svg{
  width:22px;
  height:22px;
  display:block;
}

.cards--expertise .card:hover .expertise-chevron{
  color:var(--color-white);
}

.cards--expertise .card.is-open .expertise-chevron{
  transform:rotate(180deg);
}

.expertise-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.4s ease-out;
}

.cards--expertise .card.is-open .expertise-panel{
  grid-template-rows:1fr;
}

.expertise-panel-inner{
  overflow:hidden;
  min-height:0;
}

.expertise-panel .g2m-list{
  padding-top:20px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.4s ease-out, transform 0.4s ease-out;
}

.cards--expertise .card.is-open .expertise-panel .g2m-list{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .expertise-panel{transition:none;}
  .expertise-panel .g2m-list{transition:none;}
  .expertise-chevron{transition:none;}
}

/* ---------- Méthodologie en frise (cercles numérotés reliés par une ligne) ---------- */
.methodology{
  max-width:1400px;
  margin:var(--spacing-section) auto calc(var(--spacing-section) * 3);
  padding:0 24px;
  display:flex;
  align-items:flex-start;
}

.milestone{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  flex:none;
  width:150px;
}

.milestone-circle{
  width:96px;
  height:96px;
  border-radius:50%;
  border:2px solid var(--color-gray);
  background:rgba(138,148,166,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:32px;
  color:var(--color-gray);
  flex:none;
  margin-bottom:20px;
  transition:border-color 0.8s ease-out, background 0.8s ease-out, color 0.8s ease-out, box-shadow 0.8s ease-out;
}

.milestone-num{
  display:inline-block;
}

@keyframes milestone-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

.milestone-num.is-spinning{
  animation:milestone-spin 0.55s ease;
}

.milestone-circle.is-active{
  border-color:var(--color-primary);
  background:rgba(var(--color-primary-rgb),0.08);
  color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(var(--color-primary-rgb),0.35), 0 0 44px rgba(var(--color-primary-rgb),1);
}

.milestone .step-eyebrow{
  margin-bottom:14px;
}

.milestone-title{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:19px;
  color:var(--color-white);
  text-transform:uppercase;
  margin:0 0 6px;
  line-height:1.3;
}

.milestone-sub{
  font-family:var(--font-body);
  font-weight:400;
  font-size:13px;
  line-height:1.5;
  color:var(--color-gray);
  margin:0;
}

.milestone-connector{
  flex:1 1 auto;
  min-width:24px;
  height:96px;
  margin-bottom:20px;
  position:relative;
  background-image:linear-gradient(rgba(var(--color-primary-rgb),0.35), rgba(var(--color-primary-rgb),0.35));
  background-repeat:no-repeat;
  background-size:100% 2px;
  background-position:center;
}

.milestone-connector::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:10px;
  height:10px;
  background:var(--color-primary);
  transform:translateY(-50%);
}

/* Liaison Étape 5 → Étape 6 : trait pointillé pour distinguer cette
   transition (mise à niveau, optionnelle) des liaisons pleines du parcours
   principal. */
.milestone-connector--dashed{
  background-image:repeating-linear-gradient(to right, rgba(var(--color-primary-rgb),0.45) 0, rgba(var(--color-primary-rgb),0.45) 8px, transparent 8px, transparent 16px);
}

/* Flèche de retour Étape 6 → Étape 5 : symbolise le caractère évolutif de la
   maintenance (optimisation/mise à niveau possible), superposée à la liaison
   existante sans la remplacer. */
.milestone-connector--loop{
  position:relative;
  overflow:visible;
}

.milestone-loop-arrow{
  position:absolute;
  left:0;
  bottom:50%;
  width:100%;
  height:40px;
  overflow:visible;
}

.milestone-loop-path{
  fill:none;
  stroke:var(--color-primary);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:150;
  stroke-dashoffset:150;
}

.methodology.is-inview .milestone-loop-path{
  transition:stroke-dashoffset 1.3s ease;
  stroke-dashoffset:0;
}

#milestone-loop-arrowhead path{
  fill:var(--color-primary);
}

@media (prefers-reduced-motion:reduce){
  .milestone-loop-path{
    stroke-dashoffset:0;
    transition:none;
  }
}

@media (max-width:900px){
  .methodology{
    flex-direction:column;
    align-items:center;
    gap:32px;
  }
  .milestone{width:auto; max-width:320px;}
  .milestone-connector{display:none;}
}

.paves--spaced{
  margin-top:var(--spacing-section);
}

/* Connexion "réseau de données" au survol, entre le panneau d'intro et la carte */
.paves--linked .pave{
  position:relative;
  overflow:visible;
}

.pave-connector{
  position:absolute;
  bottom:100%;
  left:50%;
  width:120px;
  height:var(--spacing-section);
  max-height:96px;
  transform:translateX(-50%);
  overflow:visible;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
  z-index:3;
}

.pave:hover .pave-connector,
.pave.is-linked .pave-connector{
  opacity:1;
}

.pave-connector-line{
  fill:none;
  stroke:var(--color-primary);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:56;
  stroke-dashoffset:56;
  transition:stroke-dashoffset 0.7s ease;
}

.pave-connector-line:nth-of-type(3),
.pave-connector-line:nth-of-type(4){
  stroke:var(--color-secondary);
}

.pave:hover .pave-connector-line,
.pave.is-linked .pave-connector-line{
  stroke-dashoffset:0;
}

.pave-connector-line:nth-of-type(2){transition-delay:0.15s;}
.pave-connector-line:nth-of-type(3),
.pave-connector-line:nth-of-type(4){transition-delay:0.35s;}

.pave-connector-node{
  fill:var(--color-white);
  opacity:0;
  filter:drop-shadow(0 0 3px rgba(var(--color-primary-rgb),0.85));
  transition:opacity 0.3s ease 0.35s;
}

.pave-connector-node--end{
  fill:var(--color-secondary);
  filter:drop-shadow(0 0 4px rgba(var(--color-secondary-rgb),0.9));
  transition:opacity 0.3s ease 0.6s;
}

.pave:hover .pave-connector-node,
.pave.is-linked .pave-connector-node{
  opacity:1;
}

@keyframes pave-connector-pulse{
  0%, 100%{opacity:1; r:3;}
  50%{opacity:0.55; r:3.8;}
}

.pave:hover .pave-connector-node--end,
.pave.is-linked .pave-connector-node--end{
  animation:pave-connector-pulse 1.6s ease-in-out 0.6s infinite;
}

/* Carte "Agrément CII" (developpement.html) : texte plus court que ses
   voisines de la grille .paves une fois la dernière phrase retirée — sort
   du stretch par défaut de la grille pour reprendre sa hauteur de contenu
   propre plutôt qu'un vide en bas de carte. */
.pave--compact{
  align-self:start;
}

.pave-badge{
  width:104px;
  height:104px;
  border-radius:50%;
  object-fit:cover;
  margin:16px auto 0;
  align-self:center;
  box-shadow:var(--shadow-sm);
  opacity:1;
  transform:scale(1);
  animation:pave-badge-intro 0.6s ease;
  transition:transform 0.35s ease;
}

.pave:hover .pave-badge{
  transform:scale(1.07);
}

@keyframes pave-badge-intro{
  from{
    opacity:0;
    transform:scale(0.95);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.pave-desc--justify{
  text-align:justify;
}

/* ===================================================================
   Contenu légal (mentions-legales.html)
   =================================================================== */

.legal-content{
  max-width:820px;
  margin:0 auto var(--spacing-section);
  padding:0 24px;
}

.legal-content section{
  margin-bottom:56px;
}

.legal-content h2{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:22px;
  color:var(--title-color);
  letter-spacing:0.01em;
  margin:0 0 20px;
}

.legal-content p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.8;
  color:var(--text-on-dark);
  margin:0 0 16px;
}

.legal-content a{
  color:var(--color-primary);
}

.legal-content a:hover{
  color:var(--color-secondary);
}

.legal-content .g2m-list{
  margin-top:16px;
}

.legal-content .g2m-list li{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  color:var(--text-on-dark);
}

/* ===================================================================
   Footer
   =================================================================== */

.site-footer{
  max-width:none;
  margin:0;
  padding:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--color-primary-rgb),0.10), transparent 38%),
    linear-gradient(180deg, var(--color-dark) 0%, var(--color-black) 100%);
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:24px 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}

.footer-logo{
  height:40px;
  width:auto;
  flex:none;
  border-radius:50%;
}

.footer-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:4px;
}

.footer-brand-line{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:clamp(12px, 1.6vw, 14px);
  letter-spacing:0.02em;
  color:var(--color-white);
  margin:0;
  white-space:nowrap;
}

.footer-brand-line .tagline{
  font-family:var(--font-body);
  font-weight:400;
  font-style:normal;
  color:var(--color-gray);
}

.footer-meta{
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(10px, 1.3vw, 12px);
  color:var(--text-on-dark);
  margin:0;
  white-space:nowrap;
}

.footer-meta strong{
  font-weight:600;
  color:var(--color-white);
}

.footer-legal{
  font-family:var(--font-body);
  font-weight:400;
  font-size:12px;
  color:var(--color-gray);
  text-decoration:none;
  transition:color 0.2s ease;
}

.footer-legal:hover,
.footer-legal:focus{
  color:var(--color-primary);
}

@media (max-width:640px){
  .footer-brand-line,
  .footer-meta{white-space:normal; text-align:center;}
}

/* ===================================================================
   Contact — formulaire (contact.html)
   =================================================================== */

.contact-section{
  max-width:760px;
  margin:0 auto var(--spacing-section);
  padding:56px 40px;
  background:linear-gradient(165deg, rgba(var(--color-primary-rgb),0.34) 0%, rgba(var(--color-primary-hover-rgb),0.20) 45%, rgba(var(--color-surface-rgb),0.97) 100%);
  border:1px solid rgba(var(--color-primary-rgb),0.26);
  border-radius:var(--radius-xl);
  box-shadow:0 24px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.contact-form[hidden]{
  display:none;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-field label{
  font-family:var(--font-body);
  font-weight:500;
  font-size:14px;
  color:var(--color-gray-light);
}

.form-field input,
.form-field textarea{
  font-family:var(--font-body);
  font-size:15px;
  color:var(--color-white);
  background:rgba(var(--color-surface-rgb),0.6);
  border:1px solid rgba(var(--color-primary-rgb),0.20);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field textarea{
  resize:vertical;
  min-height:120px;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
  color:var(--color-muted);
}

.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),0.18);
}

.form-note{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--color-gray);
  margin:0;
}

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

.contact-altcha altcha-widget{
  --altcha-color-border:rgba(var(--color-primary-rgb),0.28);
  --altcha-color-border-focus:var(--color-primary);
  --altcha-color-text:var(--color-gray-light);
  --altcha-color-base:rgba(var(--color-surface-rgb),0.6);
  width:100%;
  max-width:420px;
}

.contact-form .cta-button{
  align-self:center;
  margin-top:8px;
  cursor:pointer;
}

.contact-form .cta-button:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

.contact-error{
  text-align:center;
  padding:24px;
}

.contact-error p{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:#ff8a8a;
  margin:0;
}

.contact-confirmation{
  text-align:center;
  padding:24px;
}

.contact-confirmation p{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--color-white);
  margin:0 0 8px;
}

.contact-confirmation-note{
  font-size:14px !important;
  color:var(--color-gray) !important;
}

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

/* ===================================================================
   Logo — coins arrondis sur les visuels de la banque d'images
   =================================================================== */

.logo img{
  border-radius:50%;
}

.step-visual img,
.journey-visual img{
  border-radius:inherit;
}

/* ===================================================================
   Page d'accueil — header réduit + logo d'angle
   =================================================================== */

.navbar--compact{
  top:8px;
  margin:8px auto 0;
  max-width:820px;
  padding:6px 18px;
}

.navbar--compact .nav-link{
  padding:8px 14px;
  font-size:12px;
}

.corner-logo{
  position:fixed;
  top:20px;
  left:16px;
  height:112px;
  width:auto;
  z-index:90;
}

@media (max-width:1300px){
  .corner-logo{
    height:68px;
    top:14px;
    left:10px;
  }
}

@media (max-width:900px){
  .corner-logo{
    display:none;
  }
}

/* ===================================================================
   Tailles de police fluides (1280px – 1600px)
   Les espacements suivent désormais les paliers du Guide des espacements
   (ci-dessus) ; ce bloc n'ajuste plus que les tailles de police.
   Au-delà de 1600px : rendu inchangé. En-deçà de 1280px : paliers tablette/mobile.
   =================================================================== */

@media (min-width:1280px) and (max-width:1600px){
  .hero-tagline{
    font-size:calc(15px + (100vw - 1280px) * 0.009375);
  }

  .hero p.hero-tagline--home,
  .page-hero p.hero-tagline--home,
  .page-header p.hero-tagline--home{
    font-size:calc(20px + (100vw - 1280px) * 0.01875);
  }

  .hero p{
    font-size:calc(15px + (100vw - 1280px) * 0.00625);
  }

  .cta-button{
    padding:calc(12px + (100vw - 1280px) * 0.0125) calc(26px + (100vw - 1280px) * 0.025);
    font-size:calc(13px + (100vw - 1280px) * 0.003125);
  }

  .card-title,
  .pave-title{
    padding:calc(8px + (100vw - 1280px) * 0.00625) calc(14px + (100vw - 1280px) * 0.0125);
    font-size:calc(12px + (100vw - 1280px) * 0.003125);
  }
}

/* ===================================================================
   Page d'accueil — bouton chatbot
   =================================================================== */

.chatbot-button {
  position: fixed;
  bottom: 60px;
  right: 24px;
  width: 64px;
  height: 64px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.chatbot-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  pointer-events: none;
}

.chatbot-button:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.chatbot-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.chatbot-panel {
  position: fixed;
  bottom: 140px;
  right: 24px;
  width: min(560px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 160px));
  z-index: 9998;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid rgba(var(--color-primary-rgb), 0.28);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 24px rgba(var(--color-primary-rgb), 0.12);
}

.chatbot-panel[hidden] {
  display: none;
}

.chatbot-panel-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  background: rgba(var(--color-surface-soft-rgb), 0.95);
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.22);
}

.chatbot-panel-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-white);
}

.chatbot-panel-close {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-white);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.chatbot-panel-close:hover {
  background: rgba(var(--color-primary-rgb), 0.18);
  color: var(--color-primary);
}

.chatbot-panel-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.chatbot-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--color-dark);
}

/* ===================================================================
   Page dédiée chatbot (chatbot.html) — iframe pleine hauteur sous la nav
   =================================================================== */

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

body.page-chatbot{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

body.page-chatbot .hero-veil-wrap--chatbot{
  flex:none;
  margin:0;
}

body.page-chatbot .hero-veil-wrap--chatbot .hero-veil{
  /* Voile limité à la bande nav ; le chatbot occupe le reste */
  bottom:auto;
  height:100%;
}

.chatbot-page{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
  width:100%;
  margin:0;
  padding:0;
}

.chatbot-page-frame{
  flex:1 1 auto;
  display:block;
  width:100%;
  min-height:0;
  height:100%;
  border:0;
  background:var(--color-dark);
}

@media (max-width:768px){
  body.page-chatbot{
    overflow:auto;
  }

  .chatbot-page-frame{
    min-height:calc(100vh - 72px);
  }
}

/* ===================================================================
   Cas d'usage — grille de cartes (cas-usages.html)
   Exception délibérée à la palette sombre (même logique que .partner-logo) :
   cartes en plaque blanche, entièrement cliquables, pour mettre en avant
   les photos de cas clients.
   =================================================================== */

.usecase-section{
  max-width:1100px;
  margin:var(--spacing-section) auto 0;
  padding:0 24px var(--spacing-section);
  text-align:center;
}

.usecase-section h2{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:28px;
  color:var(--title-color);
  margin:0 0 var(--spacing-title-text);
}

.usecase-section h2.usecase-title--white{
  color:var(--color-white);
}

.usecase-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--spacing-cards);
  text-align:left;
}

.usecase-card:last-child:nth-child(odd){
  grid-column:1 / -1;
  width:calc(50% - (var(--spacing-cards) / 2));
  margin:0 auto;
}

.usecase-card{
  display:block;
  background:var(--color-white);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  text-decoration:none;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.usecase-card:hover,
.usecase-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}

.usecase-image{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
}

.usecase-body{
  padding:24px;
}

.usecase-body h3{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:17px;
  line-height:1.3;
  color:var(--color-dark);
  margin:0 0 10px;
}

.usecase-body p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.6;
  color:var(--color-muted);
  margin:0 0 18px;
}

.usecase-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  color:var(--color-primary-hover);
}

.usecase-link .arrow{
  display:inline-block;
  transition:transform 0.2s ease;
}

.usecase-card:hover .usecase-link .arrow,
.usecase-card:focus-visible .usecase-link .arrow{
  transform:translateX(4px);
}

@media (max-width:700px){
  .usecase-grid{grid-template-columns:1fr;}
  .usecase-card:last-child:nth-child(odd){width:100%;}
}

@media (max-width: 768px) {
  .chatbot-button {
    bottom: 16px;
    right: 16px;
    width: 54px;
    height: 54px;
  }

  .chatbot-panel {
    bottom: 84px;
    right: 16px;
    left: 16px;
    width: auto;
    height: min(80vh, calc(100vh - 100px));
  }
}

/* ===================================================================
   Cas d'usage — page détail (cas-usage-construction-environnement-decarbonation.html)
   Palette dédiée reprise de la maquette fournie pour ce cas d'usage (teal/cyan
   sur fond quasi noir) — exception documentée au même titre que les maquettes
   dédiées "À propos" / "Développement" (voir design_system.md). Toutes les
   classes sont préfixées .uc- et scopées à .uc-page pour ne rien impacter
   ailleurs sur le site.
   =================================================================== */

.uc-page{
  --uc-bg:#070B16;
  --uc-panel:#041826;
  --uc-panel-border:rgba(var(--color-primary-rgb),0.30);
  --uc-ring:var(--color-primary);
  --uc-cyan:var(--color-primary);
  --uc-cyan-soft:rgba(var(--color-primary-rgb),0.14);
  --uc-muted:#8B9AAB;
  --uc-body:#C7CFD7;
  --uc-body-soft:#E0E5EB;
}

/* ---------- Hero ---------- */
/* Même max-width/padding que .uc-section ci-dessous : garantit que le bord
   droit du hero (et donc de .uc-hero-visual) tombe exactement sur le même
   axe vertical que le bord droit des panneaux de section, à toutes les
   largeurs d'écran (pas seulement au-delà d'un seuil ponctuel). */
.uc-hero{
  max-width:1100px;
  margin:0 auto;
  padding:var(--gap-header-hero) 24px var(--spacing-section-tight);
}

/* Le conteneur des pages cas d'usage (1100px) laisse une marge latérale plus
   fine que sur les autres pages (900px) aux largeurs desktop intermédiaires :
   on compensait auparavant par un padding-gauche asymétrique (contenu décalé
   à droite, plus d'espace à gauche qu'à droite). On centre proprement à la
   place, en augmentant la marge verticale au-dessus du hero pour passer sous
   le logo d'angle fixe (112px de haut, jusqu'à 132px depuis le haut). */
@media (min-width:900px){
  .uc-hero{padding-top:150px;}
}

.uc-hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}

.uc-hero-eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--uc-ring);
  margin:0 0 14px;
  text-align:justify;
  animation:fadeInUp 0.6s ease both;
}

.uc-hero-title{
  color:var(--color-white);
  margin:0 0 18px;
  text-align:left;
  text-wrap:balance;
  animation:fadeInUp 0.6s ease both 0.12s;
  /* Restaure la taille d'origine de .page-title (titre blanc, pas concerné
     par l'harmonisation à 44px des titres bleus). */
  font-size:clamp(26px, 3.6vw, 42px);
}

.uc-hero-desc{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  color:var(--uc-body);
  margin:0;
  text-align:left;
  animation:fadeInUp 0.6s ease both 0.24s;
}

.uc-hero-visual{
  position:relative;
  aspect-ratio:9/8;
  border:1px solid var(--uc-ring);
  border-radius:var(--radius-lg);
  overflow:hidden;
  animation:fadeIn 0.7s ease both 0.32s;
}

.uc-hero-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  animation:ucHeroZoomIn 0.9s ease both 0.32s;
}

/* La photo doit occuper exactement la hauteur du bloc de texte, quelle que
   soit sa propre proportion naturelle : le ratio CSS seul ne suffit pas (la
   piste de grille "auto" se cale sur le plus grand des deux blocs, y compris
   le ratio intrinsèque de l'image si elle est proportionnellement plus haute
   que le texte) — la hauteur exacte est donc calculée en JavaScript
   (js/hero-photo-match.js) à partir du rendu réel du bloc de texte. On
   retire seulement le ratio fixe ici pour laisser ce script fixer la
   hauteur ; doit rester déclaré après la règle de base .uc-hero-visual
   ci-dessus pour gagner la cascade (même spécificité, @media ne compte pas
   comme spécificité supplémentaire). */
@media (min-width:901px){
  .uc-hero-visual{
    aspect-ratio:auto;
  }
}

/* Variante sans visuel fourni : encadré "à intégrer" (icône + libellés) */
.uc-hero-visual--placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:center;
  padding:24px;
}

.uc-hero-visual-label{
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.03em;
  color:var(--uc-muted);
  margin:0;
}

.uc-hero-visual-note{
  font-family:var(--font-body);
  font-size:12px;
  color:var(--color-muted);
  margin:0;
}

@media (max-width:900px){
  .uc-hero-inner{grid-template-columns:1fr; gap:32px;}
  .uc-hero-visual{aspect-ratio:16/9;}
}

/* ---------- Icônes abstraites (reprennent les formes simples de la maquette) ---------- */
.uc-icon{
  position:relative;
  width:54px;
  height:54px;
  flex:none;
  border-radius:var(--radius-sm);
  background:var(--uc-panel);
  border:1px solid var(--uc-panel-border);
}

.uc-icon-ring{
  position:absolute;
  top:10px; left:50%;
  transform:translateX(-50%);
  width:22px; height:26px;
  border:2px solid var(--uc-ring);
  border-radius:6px;
}

.uc-icon--problem .uc-icon-ring{border-color:var(--uc-ring); border-radius:50%; width:20px; height:20px;}

.uc-icon-line{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:10px; height:2px;
  background:var(--uc-ring);
  border-radius:1px;
}

.uc-icon--problem .uc-icon-line{background:var(--uc-ring);}
.uc-icon .uc-icon-line:nth-of-type(2){bottom:16px; width:10px;}
.uc-icon .uc-icon-line:nth-of-type(3){bottom:11px; width:10px;}
.uc-icon .uc-icon-line:nth-of-type(4){bottom:6px; width:6px;}

.uc-icon--solution .uc-icon-ring{border-radius:50%; width:22px; height:22px;}
.uc-icon--solution .uc-icon-dash{
  position:absolute;
  bottom:16px; left:50%;
  transform:translateX(-50%);
  width:8px; height:2px;
  background:var(--uc-ring);
  border-radius:1px;
}

.uc-icon--placeholder{width:66px; height:66px;}
.uc-icon--placeholder .uc-icon-ring{width:30px; height:30px; border-radius:8px; border-width:3px;}

.uc-icon-glyph{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:26px;
  height:26px;
}

/* ---------- Blocs "intro" (icône + surtitre + titre) ---------- */
.uc-intro-head{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:var(--gap-title-sub);
}

/* À partir de 900px, l'icône sort du flux (positionnement absolu dans la
   marge gauche) pour que le titre "La problématique client" / "La solution
   apportée" démarre exactement sur le même axe que la colonne de texte du
   hero et l'encadré ci-dessous, au lieu d'être décalé par l'icône + le gap
   (54px + 20px). En-dessous de 900px, l'icône reste dans le flux normal. */
@media (min-width:900px){
  .uc-intro-head{
    position:relative;
  }

  .uc-icon{
    position:absolute;
    left:-74px;
    top:50%;
    transform:translateY(-50%);
  }
}

.uc-eyebrow{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--uc-muted);
  margin:0 0 6px;
}

.uc-eyebrow--accent{color:var(--uc-cyan);}

.uc-intro-head h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:0;
}

/* ---------- Panneau bordé (texte problématique / solution) ---------- */
.uc-text-panel{
  border:1px solid var(--uc-panel-border);
  border-radius:var(--radius-lg);
  padding:32px 36px;
  margin-bottom:var(--gap-title-intro);
  background:rgba(255,255,255,0.10);
  transition:border-color 0.4s ease, box-shadow 0.4s ease;
}

.uc-text-panel:hover{
  border-color:var(--uc-ring);
  box-shadow:0 0 0 1px var(--uc-ring), 0 0 22px rgba(var(--color-primary-rgb),0.25);
}

.uc-text-panel p{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.8;
  color:var(--color-white);
  margin:0 0 18px;
}

.uc-text-panel p:last-child{margin-bottom:0;}

.uc-text-panel strong{color:var(--color-white); font-weight:700;}
.uc-text-panel .uc-highlight{color:var(--uc-cyan); font-weight:700;}
.uc-text-panel .uc-highlight--cyan{color:var(--uc-cyan); font-weight:700;}

/* Apparition progressive au scroll (icône -> titre -> encadré) des sections
   "Problématique client" et "Solution apportée" : la classe .uc-inview est
   ajoutée par js/section-reveal.js via IntersectionObserver dès que la
   section entre dans l'écran. Utilise `animation` (et non `transition`) pour
   ne pas interférer avec la transition border/box-shadow du survol ci-dessus. */
.uc-reveal-section .uc-icon,
.uc-reveal-section .uc-intro-head > div,
.uc-reveal-section .uc-text-panel{
  opacity:0;
}

.uc-reveal-section.uc-inview .uc-icon{
  animation:fadeInUp 0.6s ease both;
}

/* À partir de 900px, .uc-icon est centré verticalement via
   transform:translateY(-50%) (voir règle plus haut) ; l'animation générique
   fadeInUp se terminant sur transform:translateY(0), elle écraserait ce
   centrage une fois l'icône révélée. On rejoue donc le même effet de
   glissement mais autour de la valeur de centrage -50%, pour que l'icône
   reste alignée avec le titre après son apparition. */
@keyframes ucIconFadeInUp{
  from{opacity:0; transform:translateY(calc(-50% + 18px));}
  to{opacity:1; transform:translateY(-50%);}
}

@media (min-width:900px){
  .uc-reveal-section.uc-inview .uc-icon{
    animation:ucIconFadeInUp 0.6s ease both;
  }
}

.uc-reveal-section.uc-inview .uc-intro-head > div{
  animation:fadeInUp 0.6s ease both 0.15s;
}

.uc-reveal-section.uc-inview .uc-text-panel{
  animation:fadeInUp 0.6s ease both 0.3s;
}

/* ---------- Section générique ---------- */
.uc-section{
  margin:var(--spacing-section-tight) auto 0;
  max-width:1100px;
  padding:0 24px;
}

/* Espacement renforcé avant les grandes parties (mêmes valeurs/paliers que
   .rd-section--gap-lg sur la page R&D) : sépare plus nettement chaque grande
   partie du cas d'usage lors du défilement, sans créer de vide disproportionné. */
.uc-section--gap-lg{
  margin-top:190px;
}

@media (max-width:1279px){
  .uc-section--gap-lg{margin-top:150px;}
}

@media (max-width:767px){
  .uc-section--gap-lg{margin-top:110px;}
}

/* ---------- Flux d'étapes (fonctionnement de l'outil / synthèse) ---------- */
.uc-flow-label{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--uc-muted);
  margin:0 0 var(--gap-sub-text);
}

.uc-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.uc-flow-step{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  color:var(--color-white);
  background:var(--uc-panel);
  border:1px solid var(--uc-panel-border);
  border-radius:var(--radius-sm);
  padding:13px 20px;
  white-space:nowrap;
  box-shadow:0 0 30px rgba(var(--color-primary-rgb),0.65), 0 0 10px rgba(var(--color-primary-rgb),0.55);
}

.uc-flow-arrow{
  color:var(--uc-ring);
  font-size:20px;
  line-height:1;
  flex:none;
}

/* Les flèches de "Fonctionnement de l'outil" n'apparaissent que lorsque la
   section (déjà suivie par js/section-reveal.js) devient visible à l'écran ;
   les flèches de la ligne de synthèse (.uc-synthesis-row) ne sont pas
   concernées et restent inchangées. */
.uc-flow .uc-flow-arrow{
  opacity:0;
}

.uc-reveal-section.uc-inview .uc-flow .uc-flow-arrow{
  animation:fadeIn 0.5s ease both;
}

.uc-reveal-section.uc-inview .uc-flow .uc-flow-arrow:nth-child(2){animation-delay:0s;}
.uc-reveal-section.uc-inview .uc-flow .uc-flow-arrow:nth-child(4){animation-delay:0.15s;}
.uc-reveal-section.uc-inview .uc-flow .uc-flow-arrow:nth-child(6){animation-delay:0.3s;}
.uc-reveal-section.uc-inview .uc-flow .uc-flow-arrow:nth-child(8){animation-delay:0.45s;}
.uc-reveal-section.uc-inview .uc-flow .uc-flow-arrow:nth-child(10){animation-delay:0.6s;}

@media (max-width:700px){
  .uc-flow{flex-direction:column; align-items:stretch;}
  .uc-flow-step{white-space:normal; text-align:center;}
  .uc-flow-arrow{transform:rotate(90deg); text-align:center;}
}

/* ---------- Diagramme "Expertises techniques utilisées" ---------- */
.uc-expertise-diagram{
  position:relative;
  max-width:900px;
  aspect-ratio:900/560;
  margin:0 auto;
}

.uc-expertise-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.uc-expertise-center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:31%;
  aspect-ratio:1/1;
  border:1px solid var(--uc-ring);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px;
  overflow:hidden;
}

.uc-expertise-center::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:72%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),0.45) 0%, rgba(var(--color-primary-rgb),0.22) 45%, rgba(var(--color-primary-rgb),0) 78%);
  filter:blur(9px);
  pointer-events:none;
}

.uc-expertise-center span{
  position:relative;
  z-index:1;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:15px;
  color:var(--color-white);
}

.uc-expertise-node{
  position:absolute;
  display:flex;
  align-items:center;
  gap:14px;
  width:29%;
  background:var(--uc-bg);
  border:1px solid var(--uc-panel-border);
  border-radius:var(--radius);
  padding:14px 16px;
}

.uc-expertise-node span{
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  color:var(--uc-body-soft);
  line-height:1.35;
}

.uc-expertise-node--tl{top:25%; left:20%; transform:translate(-50%,-50%);}
.uc-expertise-node--tr{top:25%; left:80%; transform:translate(-50%,-50%);}
.uc-expertise-node--bl{top:75%; left:20%; transform:translate(-50%,-50%);}
.uc-expertise-node--br{top:75%; left:80%; transform:translate(-50%,-50%);}
.uc-expertise-node--top{top:14%; left:50%; transform:translate(-50%,-50%);}
.uc-expertise-node--right{top:41%; left:81%; transform:translate(-50%,-50%);}
.uc-expertise-node--bottom-right{top:88%; left:69%; transform:translate(-50%,-50%);}
.uc-expertise-node--bottom-left{top:88%; left:31%; transform:translate(-50%,-50%);}
.uc-expertise-node--left{top:41%; left:19%; transform:translate(-50%,-50%);}

/* Variante à 3 branches (1 nœud en haut, 2 en bas) : nœuds un peu plus larges,
   moins nombreux que la variante à 4 coins. */
.uc-expertise-diagram--3 .uc-expertise-node{width:34%;}

/* Variante à 5 branches (pentagone autour du cercle central) : SVG source plus
   haute (900/700, contre 900/560 pour les variantes à 3/4 branches) — le
   conteneur doit reprendre ce ratio pour que les nœuds positionnés en % restent
   alignés avec les lignes du SVG. */
.uc-expertise-diagram--5{aspect-ratio:900/700;}
.uc-expertise-diagram--5 .uc-expertise-center{top:54%;}
.uc-expertise-diagram--5 .uc-expertise-node{width:27%;}

.uc-expertise-icon{
  flex:none;
  width:38px; height:38px;
  border-radius:var(--radius-sm);
  background:var(--uc-panel);
  border:1px solid var(--uc-ring);
  position:relative;
}

.uc-expertise-icon::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:12px; height:12px;
  border-radius:50%;
  background:var(--uc-cyan);
}

@media (max-width:900px){
  .uc-expertise-diagram{
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
  }
  .uc-expertise-lines{display:none;}
  .uc-expertise-center{position:static; transform:none; width:174px;}
  .uc-expertise-node{position:static; transform:none; width:100%; max-width:420px;}
}

/* Paragraphe récapitulatif sous le diagramme (variante avec expertises listées en texte) */
.uc-expertise-summary{
  max-width:820px;
  margin:32px auto 0;
  text-align:center;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.7;
  color:var(--uc-body);
}

.uc-expertise-summary strong{color:var(--color-white); font-weight:700;}

/* ---------- Résultat / bénéfices ---------- */
.uc-stats{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--spacing-cards);
}

/* Variante 3 cartes (ex. résultats à 3 bénéfices au lieu de 4) */
.uc-stats--3{grid-template-columns:repeat(3, 1fr);}

.uc-stat-card{
  border:1px solid var(--uc-panel-border);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  text-align:left;
  background:var(--uc-cyan);
  transition:border-color 0.4s ease, box-shadow 0.4s ease;
}

.uc-stat-card:hover{
  border-color:var(--uc-ring);
  box-shadow:0 0 0 1px var(--uc-ring), 0 0 22px rgba(var(--color-primary-rgb),0.25);
}

.uc-stat-number{
  display:block;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(22px, 2.4vw, 28px);
  color:var(--uc-bg);
  margin:0 0 14px;
  white-space:nowrap;
}

.uc-stat-text{
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.6;
  color:var(--uc-bg);
  margin:0;
}

/* Apparition au scroll des cartes "Bénéfices pour le client" (js/stats-reveal.js) :
   fondu + léger déplacement, une seule fois, en cascade de gauche à droite.
   `animation` (et non `transition`) pour ne pas interférer avec la transition
   border/box-shadow du survol ci-dessus. */
.uc-stats .uc-stat-card{
  opacity:0;
}

.uc-stats .uc-stat-card.uc-inview{
  animation:fadeInUp 0.6s ease both;
}

/* Carte "valeur1 → valeur2" : chaque partie apparaît en séquence */
.uc-stat-arrow-part{
  display:inline-block;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.4s ease, transform 0.4s ease;
}

.uc-stat-arrow-part.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Carte "✓" : coche SVG à tracé progressif */
.uc-stat-check{
  width:26px;
  height:26px;
  vertical-align:middle;
  overflow:visible;
}

@media (max-width:1100px){
  .uc-stats{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:600px){
  .uc-stats{grid-template-columns:1fr;}
}

/* ---------- Synthèse finale ---------- */
.uc-synthesis{
  text-align:center;
  padding-bottom:var(--spacing-section);
}

.uc-synthesis-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:32px;
}

.uc-synthesis-node{
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  color:var(--uc-body-soft);
  background:var(--uc-panel);
  border:1px solid var(--uc-panel-border);
  border-radius:var(--radius-sm);
  padding:13px 20px;
  white-space:nowrap;
}

/* Regroupe chaque flèche avec l'encadré qui la suit (pas celui qui la
   précède) en un seul bloc qui ne se scinde jamais lors du retour à la ligne
   (.uc-synthesis-row est en flex-wrap) : garantit qu'une flèche n'est jamais
   isolée en fin de 1re ligne — si l'encadré suivant passe à la 2e ligne, sa
   flèche le suit et se retrouve donc en tête de cette 2e ligne, juste avant
   lui, ce qui garde le parcours lisible. */
.uc-synthesis-step{
  display:flex;
  align-items:center;
  gap:14px;
}

@media (max-width:700px){
  .uc-synthesis-row{flex-direction:column;}
  .uc-synthesis-row .uc-flow-arrow{transform:rotate(90deg);}
  .uc-synthesis-node{white-space:normal;}
  .uc-synthesis-step{flex-direction:column;}
}

.uc-cta-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--color-white);
  color:var(--uc-bg);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  padding:16px 32px;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.uc-cta-pill:hover,
.uc-cta-pill:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

/* ===================================================================
   Page R&D (Laboratoire G2M) — d'après Maquettes/G2M-Page-RD.pptx
   Namespace .rd-* indépendant de .uc-* (pages cas d'usage) : mêmes
   variables globales (rayons, espacements, polices) mais palette de
   couleurs propre à cette page, tirée directement de la maquette.
   =================================================================== */
.rd-page{
  --rd-bg-pill:#003044;
  --rd-bg-icon:#00404E;
  --rd-bg-badge:#05111C;
  --rd-border-pill:rgba(var(--color-primary-rgb),0.5);
  --rd-border-icon:var(--color-primary);
  --rd-border-feature:rgba(var(--color-primary-rgb),0.45);
  --rd-border-card:rgba(var(--color-primary-rgb),0.4);
  --rd-border-panel:rgba(var(--color-primary-rgb),0.35);
  --rd-cyan-mark:var(--color-primary);
  --rd-cyan-link:var(--color-primary);
  --rd-cyan-link-2:var(--color-primary);
  --rd-cyan-dot:var(--color-primary);
  --rd-cyan-text:var(--color-primary);
  --rd-cyan-number:var(--color-primary);
  --rd-glow:var(--color-primary);
  --rd-eyebrow:#8B9AAB;
  --rd-muted-1:#9BA6B1;
  --rd-muted-2:#A5AFBA;
  --rd-muted-3:#8F9AA5;
  --rd-body-1:#D0D8E1;
  --rd-body-2:#C7CFD7;
  --rd-body-3:#E0E5EB;
  --rd-dark-text:#061019;
  max-width:1100px;
  margin:0 auto;
  padding:0 24px var(--spacing-section);
}

/* ---------- Hero ---------- */
.rd-hero{
  max-width:1300px;
  margin:0 auto;
  padding:calc(var(--gap-header-hero) + 40px) 24px 80px;
  text-align:center;
}

.rd-hero-title{
  color:var(--title-accent-color);
  margin:0 0 var(--gap-title-intro);
}

.rd-hero-lead{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  color:var(--rd-body-1);
  margin:0;
}

/* Image d'introduction du Laboratoire G2M : coins arrondis + ombre standard
   du site, halo bleu (charte) au survol avec léger zoom, transition douce
   dans la fourchette demandée (300-500ms). */
.rd-hero-image{
  display:block;
  width:100%;
  max-width:900px;
  height:auto;
  margin:0 auto var(--spacing-section);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:box-shadow 0.4s ease, transform 0.4s ease;
}

.rd-hero-image:hover{
  box-shadow:var(--shadow), 0 0 26px rgba(var(--color-primary-rgb),0.6), 0 0 60px rgba(var(--color-primary-rgb),0.5), 0 0 100px rgba(var(--color-primary-rgb),0.3);
  transform:scale(1.015);
}

@media (prefers-reduced-motion:reduce){
  .rd-hero-image{transition:none;}
  .rd-hero-image:hover{transform:none;}
}

/* ---------- Sections génériques ---------- */
.rd-section{
  margin-top:var(--spacing-section-tight);
}

/* Respiration renforcée entre grandes parties (utilitaire générique, même
   valeurs que .rd-section--gap-lg sur la page R&D) */
.section-gap-lg{
  margin-top:190px;
}

@media (max-width:1279px){
  .section-gap-lg{margin-top:150px;}
}

@media (max-width:767px){
  .section-gap-lg{margin-top:110px;}
}

/* Respiration renforcée entre les grandes parties de la page R&D (remplace
   les anciennes lignes .rd-divider, supprimées) */
.rd-section--gap-lg{
  margin-top:190px;
}

.rd-section--gap-xl{
  margin-top:240px;
}

@media (max-width:1279px){
  .rd-section--gap-lg{margin-top:150px;}
  .rd-section--gap-xl{margin-top:190px;}
}

@media (max-width:767px){
  .rd-section--gap-lg{margin-top:110px;}
  .rd-section--gap-xl{margin-top:140px;}
}

.rd-section-head{
  max-width:820px;
  margin:0 auto var(--gap-title-intro);
  text-align:center;
}

.rd-eyebrow{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-primary);
  margin:0 0 var(--gap-title-sub);
}

.rd-section-head h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:0 0 var(--gap-sub-text);
  white-space:nowrap;
  /* Sort du conteneur limité à 820px pour couvrir toute la largeur du
     viewport : le centrage reste exact même quand le titre déborde de sa
     colonne de texte (au lieu de déborder de façon asymétrique et de
     paraître décentré). */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  text-align:center;
}

@media (max-width:1279px){
  .rd-section-head h2{
    white-space:normal;
    width:auto;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
}

.rd-section-intro{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.8;
  color:var(--rd-muted-2);
  text-align:center;
  margin:0;
}

.rd-section-footnote{
  max-width:760px;
  margin:var(--spacing-title-text) auto 0;
  text-align:center;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.7;
  color:var(--rd-muted-3);
}

/* ---------- Étapes (démarche en 3 étapes) ---------- */
.rd-steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.rd-step-card{
  border:1px solid var(--rd-border-card);
  border-radius:var(--radius-lg);
  background:rgba(var(--color-primary-rgb),0.55);
  transition:border-color 0.4s ease, box-shadow 0.4s ease;
  perspective:1400px;
  aspect-ratio:1 / 1;
}

.rd-step-card:hover{
  border-color:var(--rd-border-icon);
  box-shadow:0 0 0 1px var(--rd-border-icon), 0 0 22px rgba(var(--color-primary-rgb),0.2);
}

/* Bordure plus lumineuse au survol, spécifique aux cartes de "Trois axes
   technologiques au cœur de nos travaux" (ne touche pas les cartes de
   "Une démarche de recherche structurée en trois étapes"). */
.rd-step-card--click:hover{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--color-primary), 0 0 46px rgba(var(--color-primary-rgb),0.85);
}

/* ---------- Effet recto-verso (flip 3D) au survol de "EN SAVOIR PLUS" ----------
   Cartes carrées de taille identique (aspect-ratio:1/1 sur des colonnes de
   grille égales) : .rd-flip-front et .rd-flip-back sont désormais toutes
   les deux position:absolute/inset:0 (au lieu du seul .rd-flip-back
   auparavant) pour se superposer exactement l'une sur l'autre dans le
   carré ; le mécanisme de rotation (rotateY 180deg sur .rd-flip-inner,
   piloté par js/rd-flip.js via .is-flipped) est inchangé. */
.rd-flip-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.rd-step-card.is-flipped .rd-flip-inner{
  transform:rotateY(180deg);
}

.rd-flip-front,
.rd-flip-back{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  padding:28px;
  box-sizing:border-box;
}

.rd-flip-front{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

.rd-flip-back{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow-y:auto;
  transform:rotateY(180deg);
}

.rd-flip-back p{
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.6;
  color:var(--color-white);
  margin:0;
}

.rd-step-number{
  flex:none;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:30px;
  color:var(--color-white);
  margin-bottom:14px;
}

.rd-step-title{
  flex:none;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:17px;
  line-height:1.4;
  color:var(--color-white);
}

.rd-step-more{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--color-white);
  white-space:nowrap;
  cursor:pointer;
}

.rd-step-more:focus-visible{
  outline:2px solid var(--rd-border-icon);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- "Une démarche de recherche structurée en trois étapes" ----------
   Grand encadré blanc repris du bloc méthodologique de diagnostic.html
   (mêmes rayons, couleurs, hiérarchie num/label/items — voir .diag2-steps-card
   et suivants) mais avec un séquencement d'apparition dédié (3 étapes à un
   seul paragraphe chacune, cadence resserrée), piloté par
   js/rd-method-reveal.js via .is-inview sur .rd-method-list. */
.rd-method-card{
  max-width:820px;
  margin:0 auto;
  background:#ffffff;
  border-radius:18px;
  padding:44px 48px;
  color:#10222f;
}

.rd-method-list{
  display:flex;
  flex-direction:column;
}

.rd-method-step{
  position:relative;
  padding:34px 0;
  border-top:2px solid transparent;
}

.rd-method-step + .rd-method-step::before{
  content:"";
  position:absolute;
  top:-2px;
  left:0;
  width:0%;
  height:2px;
  background:var(--color-primary);
}

/* Séquence cinématique, chaque étape ne démarre qu'une fois la précédente
   entièrement terminée : ligne (700ms) -> numéro (350ms) -> titre (450ms)
   -> flèche (250ms) -> texte (700ms), ~250-350ms de respiration avant
   l'étape suivante. Cadence de 1,8s entre le début de chaque étape,
   décalée d'un léger temps de battement après l'apparition du grand
   encadré blanc (.rd-reveal-item, fondu 0.6s). Séquence totale ~5,3s. */
.rd-method-list.is-inview .rd-method-step:nth-child(2)::before{animation:diag2LineDraw 0.7s ease-out 1.95s forwards;}
.rd-method-list.is-inview .rd-method-step:nth-child(3)::before{animation:diag2LineDraw 0.7s ease-out 3.75s forwards;}

@keyframes rdMethodFadeUp{
  from{opacity:0; transform:translateY(25px);}
  to{opacity:1; transform:translateY(0);}
}

.rd-method-step-num,
.rd-method-step-label,
.rd-method-step-icon,
.rd-method-step-body p{
  opacity:0;
  transform:translateY(25px);
}

.rd-method-list.is-inview .rd-method-step-num{animation:rdMethodFadeUp 0.35s ease-out forwards;}
.rd-method-list.is-inview .rd-method-step-label{animation:rdMethodFadeUp 0.45s ease-out forwards;}
.rd-method-list.is-inview .rd-method-step-icon{animation:rdMethodFadeUp 0.25s ease-out forwards;}
.rd-method-list.is-inview .rd-method-step-body p{animation:rdMethodFadeUp 0.7s ease-out forwards;}

/* Étape 01 */
.rd-method-list.is-inview .rd-method-step:nth-child(1) .rd-method-step-num{animation-delay:0.45s;}
.rd-method-list.is-inview .rd-method-step:nth-child(1) .rd-method-step-label{animation-delay:0.65s;}
.rd-method-list.is-inview .rd-method-step:nth-child(1) .rd-method-step-icon{animation-delay:0.9s;}
.rd-method-list.is-inview .rd-method-step:nth-child(1) .rd-method-step-body p{animation-delay:1s;}

/* Étape 02 */
.rd-method-list.is-inview .rd-method-step:nth-child(2) .rd-method-step-num{animation-delay:2.25s;}
.rd-method-list.is-inview .rd-method-step:nth-child(2) .rd-method-step-label{animation-delay:2.45s;}
.rd-method-list.is-inview .rd-method-step:nth-child(2) .rd-method-step-icon{animation-delay:2.7s;}
.rd-method-list.is-inview .rd-method-step:nth-child(2) .rd-method-step-body p{animation-delay:2.8s;}

/* Étape 03 */
.rd-method-list.is-inview .rd-method-step:nth-child(3) .rd-method-step-num{animation-delay:4.05s;}
.rd-method-list.is-inview .rd-method-step:nth-child(3) .rd-method-step-label{animation-delay:4.25s;}
.rd-method-list.is-inview .rd-method-step:nth-child(3) .rd-method-step-icon{animation-delay:4.5s;}
.rd-method-list.is-inview .rd-method-step:nth-child(3) .rd-method-step-body p{animation-delay:4.6s;}

@media (prefers-reduced-motion:reduce){
  .rd-method-step-num,
  .rd-method-step-label,
  .rd-method-step-icon,
  .rd-method-step-body p{
    opacity:1;
    transform:none;
    animation:none;
  }
  .rd-method-step + .rd-method-step::before{
    width:100%;
    animation:none;
  }
}

.rd-method-step-head{
  display:flex;
  align-items:center;
  gap:14px;
}

.rd-method-step-num{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(38px, 4vw, 52px);
  color:#10222f;
  line-height:1;
}

.rd-method-step-label{
  flex:1;
  min-width:0;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:19px;
  line-height:1.35;
}

.rd-method-step-body{
  margin:16px 0 0;
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.rd-method-step-body p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:14px;
  line-height:1.7;
  color:#2c3a42;
  margin:0;
}

.rd-method-step-icon{
  flex-shrink:0;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#3aa8c1;
  font-size:16px;
  font-weight:700;
  margin-top:1px;
}

@media (max-width:600px){
  .rd-method-card{padding:28px 24px;}
}

/* ---------- Cartes "axes de recherche" (variante à retournement au clic) ----------
   Reprend intégralement le principe visuel des cartes .rd-step-card de la
   section précédente (mêmes dimensions, rayons, couleurs, ombres, bouton,
   typographie, animation de flip). Seule l'interaction diffère : le
   retournement se déclenche au clic (pas au survol) et une seule carte
   .rd-step-card--click peut être ouverte à la fois, avec un bouton "RETOUR"
   explicite sur la face arrière — logique gérée dans js/rd-flip.js. */
.rd-step-card--click{
  aspect-ratio:4 / 3;
}

.rd-step-card--click .rd-flip-front{
  align-items:center;
  text-align:center;
  justify-content:center;
  gap:40px;
}

.rd-step-card--click .rd-flip-front .rd-step-more{
  margin-top:0;
  align-self:center;
}

.rd-step-card--click .rd-flip-back{
  flex-direction:column;
  gap:16px;
}

.rd-step-card--click .rd-flip-back p{
  text-align:justify;
  text-align-last:center;
}

.rd-step-card--click .rd-step-close{
  margin-top:0;
  align-self:center;
}

/* Retire la barre de défilement visible au dos de la 1ère carte (RAG) :
   le texte tient dans la carte, la scrollbar n'était pas nécessaire. */
.rd-steps .rd-step-card--click:first-child .rd-flip-back{
  overflow-y:hidden;
}

/* ---------- Icônes (carré arrondi + pastille intérieure) ---------- */
.rd-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:46px;
  height:46px;
  border-radius:var(--radius-sm);
  background:var(--rd-bg-icon);
  border:1px solid var(--rd-border-icon);
}

.rd-icon--sm{
  width:40px;
  height:40px;
}

.rd-icon-mark{
  width:18px;
  height:18px;
  background:var(--rd-cyan-mark);
}

.rd-icon--sm .rd-icon-mark{
  width:14px;
  height:14px;
}

.rd-icon-mark--square{border-radius:5px;}
.rd-icon-mark--circle{border-radius:50%;}

/* ---------- Nos résultats ---------- */
/* Section "résultats concrets" : timeline verticale (ligne fine + points
   lumineux) remplaçant les 4 anciennes cartes-stats. Même principe que
   .rej-profile-timeline (nous-rejoindre.html) — ligne qui se dessine de
   haut en bas, points qui s'allument un à un puis leur texte qui glisse
   depuis la droite — mais avec un séquencement propre, plus lent et plus
   espacé, piloté par js/rd-results-reveal.js via .is-inview sur
   .rd-results-timeline (IntersectionObserver, une seule fois). */
.rd-results-timeline{
  position:relative;
  max-width:480px;
  margin:48px auto 0;
  text-align:left;
}

.rd-results-line{
  position:absolute;
  left:8px;
  top:6px;
  bottom:6px;
  width:2px;
  background:linear-gradient(180deg, var(--color-primary), rgba(var(--color-primary-rgb),0.2));
  box-shadow:0 0 8px rgba(var(--color-primary-rgb),0.45);
  transform:scaleY(0);
  transform-origin:top center;
}

.rd-results-timeline.is-inview .rd-results-line{
  animation:rdResultsLineDraw 3.2s ease-out forwards;
}

@keyframes rdResultsLineDraw{
  from{transform:scaleY(0);}
  to{transform:scaleY(1);}
}

.rd-results-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding-bottom:90px;
}

.rd-results-item:last-child{
  padding-bottom:0;
}

.rd-results-dot{
  flex:none;
  width:18px;
  height:18px;
  margin-top:2px;
  border-radius:50%;
  background:var(--color-primary);
  box-shadow:0 0 0 4px rgba(var(--color-primary-rgb),0.18), 0 0 16px rgba(var(--color-primary-rgb),0.65);
  opacity:0;
  scale:0.4;
  transition:opacity 0.3s ease-out, scale 0.3s ease-out;
}

.rd-results-content{
  flex:1;
  padding-top:1px;
  opacity:0;
  transform:translateX(20px);
  transition:opacity 0.55s ease-out, transform 0.55s ease-out;
}

.rd-results-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:18px;
  line-height:1.35;
  color:var(--color-white);
  margin:0;
}

.rd-results-sub{
  font-family:var(--font-body);
  font-weight:400;
  font-size:14px;
  line-height:1.5;
  color:var(--rd-body-3);
  margin:16px 0 0;
}

.rd-results-timeline.is-inview .rd-results-item:nth-child(2) .rd-results-dot{transition-delay:0s;}
.rd-results-timeline.is-inview .rd-results-item:nth-child(2) .rd-results-content{transition-delay:0.15s;}
.rd-results-timeline.is-inview .rd-results-item:nth-child(3) .rd-results-dot{transition-delay:0.95s;}
.rd-results-timeline.is-inview .rd-results-item:nth-child(3) .rd-results-content{transition-delay:1.1s;}
.rd-results-timeline.is-inview .rd-results-item:nth-child(4) .rd-results-dot{transition-delay:1.9s;}
.rd-results-timeline.is-inview .rd-results-item:nth-child(4) .rd-results-content{transition-delay:2.05s;}
.rd-results-timeline.is-inview .rd-results-item:nth-child(5) .rd-results-dot{transition-delay:2.85s;}
.rd-results-timeline.is-inview .rd-results-item:nth-child(5) .rd-results-content{transition-delay:3s;}

.rd-results-timeline.is-inview .rd-results-dot{
  opacity:1;
  scale:1;
}

.rd-results-timeline.is-inview .rd-results-content{
  opacity:1;
  transform:translateX(0);
}

@media (max-width:600px){
  .rd-results-line{left:7px;}
  .rd-results-item{gap:18px;}
}

@media (prefers-reduced-motion:reduce){
  .rd-results-dot,
  .rd-results-content{transition:none; opacity:1; transform:none; scale:1;}
  .rd-results-line{animation:none; transform:scaleY(1);}
}

/* ---------- Reconnaissance externe (Booster) ---------- */
.rd-booster-card{
  position:relative;
  overflow:hidden;
  max-width:820px;
  margin:0 auto;
  border:1px solid var(--rd-border-pill);
  border-radius:var(--radius-lg);
  padding:36px 40px;
  transition:border-color 0.4s ease, box-shadow 0.4s ease;
}

.rd-booster-card:hover{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px var(--color-primary), 0 0 46px rgba(var(--color-primary-rgb),0.85);
}

.rd-booster-glow{
  position:absolute;
  top:-90px;
  right:-60px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:var(--rd-glow);
  opacity:0.35;
  filter:blur(10px);
  pointer-events:none;
}

.rd-booster-logo{
  position:relative;
  z-index:2;
  display:block;
  margin:4px auto 28px;
  width:180px;
  height:auto;
  border-radius:var(--radius);
  transition:transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.45s ease;
}

.rd-booster-card:hover .rd-booster-logo{
  transform:scale(1.18) translateY(-10px);
  box-shadow:0 0 0 2px var(--rd-border-icon), 0 16px 40px rgba(var(--color-primary-rgb),0.55), 0 0 32px rgba(var(--color-primary-rgb),0.5);
}

.rd-booster-card p{
  position:relative;
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.8;
  color:var(--rd-body-2);
  text-align:justify;
  margin:0 0 20px;
}

.rd-booster-card p:last-of-type{margin-bottom:24px;}

.rd-booster-link{
  position:relative;
  display:block;
  width:fit-content;
  margin:0 auto;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:15px;
  color:var(--rd-cyan-link-2);
  text-decoration:none;
}

.rd-booster-link:hover{
  text-decoration:underline;
  text-underline-offset:5px;
}

/* ---------- Synthèse et appel à l'action ---------- */
.rd-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-bottom:var(--spacing-cards);
}

.rd-badges .rd-badge{
  flex:0 1 calc((100% - 2*16px)/3);
}

.rd-badge{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--rd-bg-badge);
  border:1px solid var(--rd-border-card);
  border-radius:var(--radius-sm);
  padding:16px 20px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  line-height:1.4;
  color:var(--rd-body-3);
  opacity:0;
  transition:border-color 0.4s ease, box-shadow 0.4s ease;
}

.rd-badge:hover{
  border-color:var(--color-primary) !important;
  box-shadow:0 0 0 1px var(--color-primary), 0 0 30px rgba(var(--color-primary-rgb),0.55) !important;
}

.rd-badge-dot{
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--rd-cyan-dot);
  opacity:0;
  transition:box-shadow 0.3s ease;
}

.rd-badge:hover .rd-badge-dot{
  box-shadow:0 0 8px 2px rgba(var(--color-primary-rgb),0.65);
}

.rd-badge-text{
  opacity:0;
}

/* Apparition des 6 encadrés "points clés" : encadré (fondu + léger flash
   lumineux sur la bordure) -> point cyan -> texte, en cascade ligne par
   ligne de gauche à droite via la variable --i posée sur chaque encadré.
   Durée totale ~0,5 s par encadré, déclenchée par la même classe
   .rd-inview (js/rd-reveal.js) que le reste de la page. Aucune des étapes
   n'anime position, taille ou rotation : seuls opacité et box-shadow/
   border-color changent, les encadrés restent parfaitement fixes. */
@keyframes rdBadgeIn{
  0%{opacity:0; border-color:transparent; box-shadow:none;}
  45%{border-color:var(--rd-border-icon); box-shadow:0 0 14px rgba(var(--color-primary-rgb),0.45);}
  100%{opacity:1; border-color:var(--rd-border-card); box-shadow:none;}
}

@keyframes rdDotIn{
  0%{opacity:0; box-shadow:0 0 0 rgba(var(--color-primary-rgb),0);}
  60%{opacity:1; box-shadow:0 0 10px rgba(var(--color-primary-rgb),0.7);}
  100%{opacity:1; box-shadow:0 0 0 rgba(var(--color-primary-rgb),0);}
}

@keyframes rdTextIn{
  from{opacity:0;}
  to{opacity:1;}
}

.rd-reveal.rd-inview .rd-badge{
  animation:rdBadgeIn 0.5s ease both;
  animation-delay:calc(var(--i, 0) * 0.1s);
}

.rd-reveal.rd-inview .rd-badge-dot{
  animation:rdDotIn 0.25s ease both;
  animation-delay:calc(var(--i, 0) * 0.1s);
}

.rd-reveal.rd-inview .rd-badge-text{
  animation:rdTextIn 0.3s ease both;
  animation-delay:calc(var(--i, 0) * 0.1s + 0.15s);
}

.rd-synthesis{
  text-align:center;
}

.rd-synthesis .rd-cta-pill{
  margin-top:var(--gap-text-button);
}

/* ---------- CTA pill (réutilise le style visuel de .uc-cta-pill) ---------- */
.rd-cta-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--color-white);
  color:var(--rd-dark-text);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  padding:16px 32px;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.rd-cta-pill:hover,
.rd-cta-pill:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.rd-cta-pill--cyan{
  background:var(--rd-border-icon);
  color:var(--rd-dark-text);
}

.rd-cta-pill--cyan.rd-cta-pill--text-white{
  color:var(--color-white);
}

/* ---------- Apparition au scroll (js/rd-reveal.js), même logique que
   les pages cas d'usage : fondu + léger déplacement, une seule fois,
   en cascade. `animation` (et non `transition`) pour ne pas interférer
   avec les transitions border/box-shadow du survol ci-dessus. */
.rd-reveal-item{
  opacity:0;
}

.rd-reveal.rd-inview .rd-reveal-item{
  animation:fadeInUp 0.6s ease both;
}

.rd-reveal.rd-inview .rd-reveal-item:nth-child(2){animation-delay:0.12s;}
.rd-reveal.rd-inview .rd-reveal-item:nth-child(3){animation-delay:0.24s;}
.rd-reveal.rd-inview .rd-reveal-item:nth-child(4){animation-delay:0.36s;}
.rd-reveal.rd-inview .rd-reveal-item:nth-child(5){animation-delay:0.48s;}
.rd-reveal.rd-inview .rd-reveal-item:nth-child(6){animation-delay:0.6s;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .rd-badges{grid-template-columns:repeat(2, 1fr);}
  .rd-steps{grid-template-columns:repeat(2, 1fr);}
  .rd-booster-logo{width:150px;}
}

@media (max-width:600px){
  .rd-badges{grid-template-columns:1fr;}
  .rd-steps{grid-template-columns:1fr;}
  .rd-booster-logo{width:120px;}
}

/* ===================================================================
   Certifications — page dédiée (certifications.html)
   Palette reprise de la maquette "G2M page certification" (dégradé
   sombre + accents teal/cyan). Classes préfixées .cert- et scopées à
   .cert-page pour ne rien impacter ailleurs sur le site.
   =================================================================== */

.cert-page{
  --cert-divider-row:rgba(var(--color-primary-rgb),0.25);
  --cert-row-body:#D7DFE8;
  --cert-row-eyebrow:#BBC5D1;
}

/* Hero un peu courte par rapport aux autres pages (ex. partenaires.html) :
   surcroît de padding haut/bas sur .page-header, scopé à cette page — les
   espacements internes (titre/intro, gérés par --gap-title-intro) ne
   bougent pas. .hero-veil (height:100% du wrapper) et .hero-divider (juste
   après le header) suivent automatiquement la nouvelle hauteur. */
.cert-page .page-header{
  padding-top:calc(var(--gap-header-hero) + 40px);
  padding-bottom:calc(var(--spacing-title-text) + 80px);
}

.cert-list{
  max-width:1200px;
  margin:120px auto 0;
  padding:0 24px;
}

@media (max-width:900px){
  .cert-list{margin-top:90px;}
}

@media (max-width:600px){
  .cert-list{margin-top:64px;}
}

.cert-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:44px 0;
  border-bottom:1px solid var(--cert-divider-row);
}

/* Point lumineux qui circule le long de la ligne de séparation, comme une
   donnée circulant dans un réseau. La ligne elle-même (border-bottom
   ci-dessus) reste fixe et inchangée ; seul ce calque décoratif bouge. */
.cert-spark{
  position:absolute;
  top:calc(100% + 0.5px);
  left:-3%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--color-primary);
  box-shadow:0 0 6px 2px rgba(var(--color-primary-rgb),0.85), 0 0 16px 6px rgba(var(--color-primary-rgb),0.3);
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  animation:certSparkTravel 8s cubic-bezier(0.45,0,0.55,1) infinite;
}

.cert-spark::before{
  content:"";
  position:absolute;
  top:50%;
  right:100%;
  width:70px;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent 0%, rgba(var(--color-primary-rgb),0.5) 100%);
  border-radius:2px;
}

.cert-row:nth-child(2) .cert-spark{animation-delay:1.6s;}
.cert-row:nth-child(3) .cert-spark{animation-delay:3.2s;}
.cert-row:nth-child(4) .cert-spark{animation-delay:4.8s;}

@keyframes certSparkTravel{
  0%{left:-3%; opacity:0;}
  6%{opacity:1;}
  50%{left:103%; opacity:1;}
  56%{opacity:0;}
  100%{left:103%; opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .cert-spark{display:none;}
}

.cert-row-text{
  flex:1 1 auto;
  max-width:600px;
}

.cert-row-text h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:0 0 10px;
}

.cert-row-eyebrow{
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  color:var(--cert-row-eyebrow);
  margin:0 0 10px;
}

.cert-row-text p:not(.cert-row-eyebrow){
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.75;
  color:var(--cert-row-body);
  margin:0;
}

.cert-row-logo{
  flex:none;
  width:280px;
  height:176px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}

.cert-row-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* Logo ENE : le fichier fourni est un carré 1000x1000 avec le logo centré
   mais petit (fond blanc plein autour). On force un cadre rond identique
   aux autres badges (160px, même taille que CII/Bpifrance rendus dans ce
   bloc) et on zoome/recentre sur le logo via un recadrage en pixels. */
.cert-logo-zoom{
  position:relative;
  display:block;
  width:160px;
  height:160px;
  border-radius:50%;
  overflow:hidden;
  background:var(--color-white);
}

.cert-row-logo .cert-logo-zoom-img{
  position:absolute;
  width:229px;
  height:229px;
  max-width:none;
  max-height:none;
  left:-33px;
  top:-38px;
  object-fit:cover;
}

@media (max-width:900px){
  .cert-row{flex-direction:column; align-items:flex-start; gap:24px; padding:36px 0;}
  .cert-row-logo{align-self:center;}
  .cert-row-text{max-width:none;}
}

@media (max-width:600px){
  .cert-list{padding:0 20px;}
  .cert-row-logo{width:230px; height:146px;}
}

/* ===================================================================
   Réseau de données animé (formation.html) — bandeau décoratif au-dessus
   des trois cartes de formats, façon réseau de neurones : lignes qui se
   dessinent au scroll (pathLength + stroke-dashoffset), nœuds qui
   apparaissent en fondu, impulsions lumineuses via animateMotion. Purement
   décoratif (aria-hidden), ne touche ni à la position ni aux dimensions
   des cartes situées en dessous.
   =================================================================== */
.formation-network{
  max-width:1100px;
  margin:16px auto 0;
  padding:0 24px 28px;
}

.formation-network svg{
  display:block;
  width:100%;
  height:auto;
}

.fn-line{
  fill:none;
  stroke:var(--color-primary);
  stroke-width:1;
  stroke-linecap:round;
  opacity:0.4;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset 1.1s ease var(--d, 0s);
}

.fn-line--alt{
  stroke:var(--color-primary-hover);
  opacity:0.32;
}

.fn-line.fn-branch{
  opacity:0.3;
}

.formation-network.is-inview .fn-line{
  stroke-dashoffset:0;
}

.fn-node{
  fill:var(--color-primary);
  opacity:0;
  transition:opacity 0.7s ease calc(var(--i, 0) * 0.09s + 0.3s);
}

.formation-network.is-inview .fn-node{
  opacity:0.85;
}

.formation-network.is-inview .fn-node--pulse{
  animation:fnNodeGlow 3.4s ease-in-out calc(var(--i, 0) * 0.09s + 1.2s) infinite;
}

@keyframes fnNodeGlow{
  0%, 100%{ opacity:0.6; filter:drop-shadow(0 0 0 rgba(var(--color-primary-rgb),0)); }
  50%{ opacity:1; filter:drop-shadow(0 0 4px rgba(var(--color-primary-rgb),0.75)); }
}

.fn-branch-dot{
  fill:var(--color-primary);
  opacity:0;
  transition:opacity 0.6s ease calc(var(--i, 0) * 0.06s + 1.1s);
}

.formation-network.is-inview .fn-branch-dot{
  opacity:0.8;
}

.fn-pulse{
  fill:var(--color-primary);
  opacity:0;
  filter:drop-shadow(0 0 3px rgba(var(--color-primary-rgb),0.85));
  transition:opacity 0.6s ease 1.4s;
}

.formation-network.is-inview .fn-pulse{
  opacity:0.9;
}

@media (max-width:900px){
  .formation-network{padding:0 24px 24px;}
  .fn-hide-mobile{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .fn-line{transition:none; stroke-dashoffset:0;}
  .fn-node{transition:none; opacity:0.85;}
  .fn-branch-dot{transition:none; opacity:0.8;}
  .fn-node--pulse{animation:none;}
  .fn-pulse{display:none;}
}

/* ===================================================================
   Formats de formation (formation.html) — trois cartes tarifaires.
   Classes dédiées .format-*, scopées à cette section, cartes en hauteur
   uniforme (grid + flex) pour aligner les pieds de carte (ligne + prix/CTA).
   =================================================================== */
.formats-section-title{
  max-width:900px;
  margin:0 auto var(--gap-title-intro);
  padding:0 24px;
  text-align:center;
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
}

.formats-section{
  max-width:1100px;
  margin:0 auto var(--spacing-section);
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--spacing-cards);
  align-items:stretch;
}

.format-card{
  display:flex;
  flex-direction:column;
  background:linear-gradient(135deg, rgba(var(--color-primary-rgb),0.12), rgba(var(--color-primary-hover-rgb),0.06)), rgba(var(--color-surface-rgb),0.82);
  border:1px solid rgba(var(--color-primary-rgb),0.14);
  border-radius:var(--radius-xl);
  padding:32px 28px;
  box-shadow:0 24px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
  transition:filter 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;
}

.format-card:hover{
  filter:brightness(1.55);
  border-color:rgba(var(--color-primary-rgb),0.4);
  transform:translateY(-4px);
}

/* Dégradés différenciés par carte, à teinte de bleu nuit conservée */
.formats-section .format-card:nth-child(1){
  background:linear-gradient(150deg, rgba(var(--color-dark-rgb),0.55) 0%, rgba(var(--color-primary-rgb),0.16) 100%), rgba(var(--color-surface-rgb),0.82);
}
.formats-section .format-card:nth-child(2){
  background:linear-gradient(150deg, rgba(var(--color-surface-soft-rgb),0.6) 0%, rgba(var(--color-primary-rgb),0.20) 55%, rgba(var(--color-primary-hover-rgb),0.10) 100%), rgba(var(--color-surface-rgb),0.82);
}
.formats-section .format-card:nth-child(3){
  background:linear-gradient(150deg, rgba(var(--color-dark-rgb),0.5) 0%, rgba(var(--color-primary-hover-rgb),0.24) 60%, rgba(var(--color-primary-rgb),0.18) 100%), rgba(var(--color-surface-rgb),0.82);
}

.format-badge{
  display:inline-block;
  align-self:flex-start;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--color-primary);
  background:rgba(var(--color-primary-rgb),0.16);
  border:1px solid rgba(var(--color-primary-rgb),0.3);
  border-radius:var(--radius-pill);
  padding:7px 16px;
  margin-bottom:22px;
}

.format-duration{
  display:flex;
  align-items:baseline;
  gap:4px;
  margin:0 0 16px;
}

.format-duration-num{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(38px, 4vw, 52px);
  line-height:1;
  color:var(--color-primary);
}

.format-duration-unit{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:18px;
  color:var(--text-on-dark);
}

.format-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:19px;
  line-height:1.35;
  color:var(--color-white);
  margin:0 0 10px;
}

.format-note{
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  color:var(--color-primary);
  margin:0 0 12px;
}

.format-desc{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  color:var(--text-on-dark);
  margin:0;
}

.format-footer{
  margin-top:auto;
  padding-top:24px;
}

.format-divider{
  display:block;
  height:1px;
  background:rgba(var(--color-primary-rgb),0.3);
  margin-bottom:20px;
}

.format-price{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:17px;
  color:var(--color-white);
  margin:0;
}

.format-cta{
  width:100%;
  justify-content:center;
  padding:14px 20px;
  font-size:12.5px;
  text-align:center;
}

@media (max-width:900px){
  .formats-section{grid-template-columns:1fr; max-width:600px;}
}

/* CTA pleine largeur sous les 3 cartes de formats — même conteneur
   (max-width/padding) que .formats-section pour un alignement bord à bord. */
.formats-cta-wrap{
  max-width:1100px;
  margin:56px auto 0;
  padding:0 24px;
}

.formats-cta-full{
  display:flex;
  width:100%;
  justify-content:center;
}

.formats-cta-full.cta-button{
  background-color:transparent;
  background-image:none;
  color:var(--color-primary);
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:0;
  font-size:19px;
  transition:color 0.2s ease;
}

/* Soulignement fin, dessiné de gauche à droite au survol, exactement à
   la largeur du texte : appliqué à ce span (dimensionné à son propre
   contenu) plutôt qu'au lien .formats-cta-full lui-même, qui est étiré
   à 100% de son conteneur pour le centrage — sinon le trait s'étirerait
   sur toute la largeur de la section au lieu de coller au texte. */
.formats-cta-full-label{
  display:inline-block;
  padding-bottom:4px;
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0% 1.5px;
  transition:background-size 0.28s ease-out;
}

.formats-cta-full.cta-button:hover .formats-cta-full-label,
.formats-cta-full.cta-button:focus .formats-cta-full-label{
  background-size:100% 1.5px;
}

.formats-cta-full.cta-button:hover,
.formats-cta-full.cta-button:focus{
  background-color:transparent;
  color:var(--color-primary-hover);
  box-shadow:none;
  transform:none;
}

@media (max-width:900px){
  .formats-cta-wrap{max-width:600px;}
}

/* ===================================================================
   Notre approche — principes de travail, engagements, sécurité (approche.html)
   =================================================================== */
.appr-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--color-white);
  color:var(--color-surface-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  margin-bottom:20px;
  box-shadow:var(--shadow-sm);
}

.appr-icon svg{
  width:26px;
  height:26px;
}

.appr-icon img{
  width:26px;
  height:26px;
  object-fit:contain;
}

.appr-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:1;
  opacity:0;
  transform:translateY(26px);
  transition:opacity 0.7s ease-out, transform 0.7s ease-out;
}

.appr-pill svg{
  width:16px;
  height:16px;
  flex:none;
}

/* Bandeau engagements (approche.html) : apparition successive des 4 capsules
   au scroll, puis ligne de progression qui les relie et déclenche un bref
   halo sur chacune — .is-inview ajouté une seule fois par js/appr-pills-reveal.js
   (même convention que .diag2-steps-list / .formation-network). */
.appr-pills-wrap{
  position:relative;
  margin:0 auto var(--spacing-title-text);
  max-width:900px;
}

.appr-pills-wrap.is-inview .appr-pill{
  opacity:1;
  transform:translateY(0);
}

.appr-pills-wrap.is-inview .appr-pill--1{transition-delay:0s;}
.appr-pills-wrap.is-inview .appr-pill--2{transition-delay:0.2s;}
.appr-pills-wrap.is-inview .appr-pill--3{transition-delay:0.4s;}
.appr-pills-wrap.is-inview .appr-pill--4{transition-delay:0.6s;}

.appr-pill::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:inherit;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),0.5), transparent 72%);
  opacity:0;
  pointer-events:none;
}

.appr-pills-wrap.is-inview .appr-pill--1::after{animation:apprPillGlow 0.9s ease-out 1.3s;}
.appr-pills-wrap.is-inview .appr-pill--2::after{animation:apprPillGlow 0.9s ease-out 1.73s;}
.appr-pills-wrap.is-inview .appr-pill--3::after{animation:apprPillGlow 0.9s ease-out 2.16s;}
.appr-pills-wrap.is-inview .appr-pill--4::after{animation:apprPillGlow 0.9s ease-out 2.6s;}

@keyframes apprPillGlow{
  0%, 100%{opacity:0;}
  50%{opacity:1;}
}

.appr-pills-line{
  position:absolute;
  z-index:0;
  top:50%;
  left:6%;
  right:6%;
  height:3px;
  margin-top:-1.5px;
  background:linear-gradient(90deg, transparent, var(--color-primary) 12%, var(--color-primary) 88%, transparent);
  box-shadow:0 0 12px rgba(var(--color-primary-rgb),0.8), 0 0 4px rgba(var(--color-primary-rgb),0.95);
  opacity:0;
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
}

.appr-pills-wrap.is-inview .appr-pills-line{
  animation:apprLineDraw 1.6s ease-out 1.2s forwards;
}

@keyframes apprLineDraw{
  0%{opacity:0; transform:scaleX(0);}
  8%{opacity:1;}
  100%{opacity:1; transform:scaleX(1);}
}

@media (max-width:800px){
  .appr-pills-line{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .appr-pill{opacity:1; transform:none; transition:none;}
  .appr-pill::after{animation:none; opacity:0;}
  .appr-pills-line{animation:none; opacity:0;}
}

.cards--sky .card{
  background:rgba(var(--color-primary-rgb),0.55);
  border-color:rgba(var(--color-primary-rgb),0.4);
  color:var(--color-white);
}

.cards--sky .card:hover{
  border-color:rgba(255,255,255,0.5);
}

.cards--sky .card-subtitle,
.cards--sky .card-text{
  color:var(--color-white);
  text-shadow:0 1px 4px rgba(0,0,0,0.65);
}

/* Titres centrés et texte justifié, spécifique à nous-rejoindre.html
   (ne touche pas approche.html qui partage le même composant .cards--sky). */
body.page-nous-rejoindre .cards--sky .card-subtitle{
  text-align:center;
}

body.page-nous-rejoindre .cards--sky .card-text{
  text-align:justify;
}

/* Apparition au scroll des 3 cartes bleu ciel (approche.html) — même
   convention IntersectionObserver → .is-inview (une seule fois) que
   .diag2-steps-list / .formation-network / .appr-pills-wrap, ici sur la
   section .cards--sky elle-même (js/appr-cards-reveal.js). */
.cards--sky .card{
  opacity:0;
  transform:translateY(30px) scale(0.97);
  transition:opacity 2.8s ease-out, transform 2.8s ease-out;
}

.cards--sky.is-inview .card{
  opacity:1;
  transform:translateY(0) scale(1);
}

.cards--sky.is-inview .card:hover{
  transform:translateY(-6px);
}

.cards--sky.is-inview .card:nth-child(1){transition-delay:0s;}
.cards--sky.is-inview .card:nth-child(2){transition-delay:0.55s;}
.cards--sky.is-inview .card:nth-child(3){transition-delay:1.1s;}

@media (prefers-reduced-motion: reduce){
  .cards--sky .card{opacity:1; transform:none; transition:none;}
}

/* ===================================================================
   "Ils nous font confiance" — bandeau de logos défilant (index.html)
   Entre "Secteurs d'activité" et "Pourquoi G2M ?". Reprend à l'identique
   la logique de .logo-carousel (formation.html / diagnostic.html) : piste
   à plat, logos + logos dupliqués, translateX 0 → -50% en boucle, bande
   blanche derrière les logos en couleur d'origine. Réunit les 17 logos
   clients des deux bandeaux existants (10 de formation.html + 7 de
   diagnostic.html), aucun oublié.
   =================================================================== */
.trust-logos{
  max-width:none;
  margin:0 0 150px;
  text-align:center;
}

.trust-logos h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:0 0 40px;
  padding:0 24px;
}

.trust-logos-viewport{
  overflow:hidden;
  background:var(--color-white);
  padding:40px 0;
}

.trust-logos-track{
  display:flex;
  align-items:center;
  gap:76px;
  width:max-content;
  animation:logo-carousel-scroll 70s linear infinite;
}

.trust-logos-item{
  flex:0 0 auto;
  width:170px;
  height:90px;
  padding:10px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}

.trust-logos-item img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  object-fit:contain;
}

@media (max-width:1024px){
  .trust-logos-track{gap:56px;}
  .trust-logos-item{width:140px; height:76px; padding:8px;}
}

@media (max-width:767px){
  .trust-logos-track{gap:40px;}
  .trust-logos-item{width:110px; height:60px; padding:6px;}
}

@media (prefers-reduced-motion:reduce){
  .trust-logos-track{animation-play-state:paused;}
}

/* ===================================================================
   "Pourquoi G2M ?" — 4 cartes glassmorphism (index.html)
   Fond bleu nuit et halos déjà portés par body{} : les cartes sont de
   simples calques translucides + flou par-dessus, sans section colorée
   supplémentaire. Apparition en cascade au scroll via js/why-g2m-reveal.js
   (même convention IntersectionObserver → .is-inview que .values-frieze /
   .sf-cards / .cards--sky, une seule fois).
   =================================================================== */
.why-g2m{
  max-width:1352px;
  margin:150px auto;
  padding:0 24px;
  text-align:center;
}

.why-g2m h2{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:0 0 var(--spacing-title-text);
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--spacing-cards);
}

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

@media (max-width:700px){
  .why-grid{grid-template-columns:1fr;}
}

.why-card{
  background-image:linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.07) 55%, transparent 100%);
  border:1px solid rgba(var(--color-primary-rgb),0.7);
  border-radius:var(--radius);
  padding:var(--card-padding);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  opacity:0;
  transform:translateY(30px) scale(0.98);
  transition-property:opacity, transform, box-shadow, border-color;
  transition-duration:0.6s, 0.6s, 0.25s, 0.25s;
  transition-timing-function:ease-out, ease-out, ease, ease;
  transition-delay:0s, 0s, 0s, 0s;
}

.why-grid.is-inview .why-card{
  opacity:1;
  transform:translateY(0) scale(1);
}

.why-grid.is-inview .why-card:nth-child(1){transition-delay:0ms, 0ms, 0s, 0s;}
.why-grid.is-inview .why-card:nth-child(2){transition-delay:120ms, 120ms, 0s, 0s;}
.why-grid.is-inview .why-card:nth-child(3){transition-delay:240ms, 240ms, 0s, 0s;}
.why-grid.is-inview .why-card:nth-child(4){transition-delay:360ms, 360ms, 0s, 0s;}

.why-grid.is-inview .why-card:hover{
  transform:translateY(-6px);
  border-color:var(--color-primary);
  box-shadow:var(--shadow-hover), 0 0 20px rgba(var(--color-primary-rgb),0.5);
}

.why-card-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(var(--color-primary-rgb),0.12);
  border:1px solid rgba(var(--color-primary-rgb),0.3);
  color:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  margin-bottom:20px;
  transition:box-shadow 0.3s ease, background 0.3s ease;
}

.why-card-icon svg{
  width:28px;
  height:28px;
}

.why-card:hover .why-card-icon{
  background:rgba(var(--color-primary-rgb),0.2);
  box-shadow:0 0 0 6px rgba(var(--color-primary-rgb),0.12), 0 0 24px rgba(var(--color-primary-rgb),0.45);
}

.why-card h3{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:18px;
  color:var(--color-white);
  margin:0 0 10px;
}

.why-card p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  color:var(--color-white);
  margin:0;
}

@media (prefers-reduced-motion: reduce){
  .why-card{opacity:1; transform:none; transition:box-shadow 0.25s ease, border-color 0.25s ease;}
}

/* ===================================================================
   "Des solutions Data & IA adaptées à chaque secteur" — réseau animé
   (index.html). Fond bleu nuit hérité de body{}. Le SVG desktop dessine
   12 connexions depuis le cercle G2M vers 12 secteurs, révélées en
   cascade au scroll via js/sector-network-reveal.js (IntersectionObserver
   → .is-inview une seule fois, même convention que les autres reveals).
   Séquence par item (nth-child, ~100ms d'écart) : le trait se dessine
   (stroke-dashoffset) PUIS le point + le nom du secteur apparaissent au
   moment où le trait atteint son extrémité — d'où le délai du node
   (delay-ligne + durée-tracé). Sur mobile, un composant HTML entièrement
   différent (liste verticale, colonne .sector-network-mobile) prend le
   relais : le schéma circulaire ne peut pas se "réduire" proprement.
   =================================================================== */
.sector-network{
  max-width:1100px;
  margin:150px auto 60px;
  padding:0 24px;
  text-align:center;
}

.sector-network h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:60px 0 var(--gap-title-intro);
}

.sector-network-intro{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  color:var(--text-on-dark);
  max-width:1020px;
  margin:0 auto;
}

.sector-network-svg{
  display:block;
  width:100%;
  max-width:800px;
  height:auto;
  margin:var(--spacing-title-text) auto 0;
  overflow:visible;
}

.network-label{
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  fill:var(--color-white);
  opacity:0;
  transform:translateY(8px);
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity 0.7s ease-out, transform 0.7s ease-out;
}

.network-dot{
  fill:var(--color-primary);
  stroke:var(--color-dark);
  stroke-width:2;
  transform-box:fill-box;
  transform-origin:center;
  scale:0;
  filter:drop-shadow(0 0 0 rgba(var(--color-primary-rgb),0));
  transition:scale 0.7s ease-out, filter 0.25s ease-out;
}

.network-line{
  fill:none;
  stroke:rgba(var(--color-primary-rgb),0.5);
  stroke-width:1.5;
  stroke-dasharray:400;
  stroke-dashoffset:400;
  transition:stroke-dashoffset 0.9s ease-out, stroke 0.25s ease-out, opacity 0.25s ease-out;
}

/* Cascade : le tracé de chaque ligne démarre ~100ms après la
   précédente (fourchette 80-120ms demandée), après l'apparition du
   centre (600ms) ; le point + le libellé du secteur apparaissent au
   moment où leur ligne termine son tracé (délai ligne + 500ms). */
.sector-network.is-inview .network-line{stroke-dashoffset:0;}
.sector-network.is-inview .network-label{opacity:1; transform:translateY(0);}
.sector-network.is-inview .network-dot{scale:1;}

.network-item:nth-child(1) .network-line{transition-delay:1s;}
.network-item:nth-child(2) .network-line{transition-delay:1.16s;}
.network-item:nth-child(3) .network-line{transition-delay:1.32s;}
.network-item:nth-child(4) .network-line{transition-delay:1.48s;}
.network-item:nth-child(5) .network-line{transition-delay:1.64s;}
.network-item:nth-child(6) .network-line{transition-delay:1.8s;}
.network-item:nth-child(7) .network-line{transition-delay:1.96s;}
.network-item:nth-child(8) .network-line{transition-delay:2.12s;}
.network-item:nth-child(9) .network-line{transition-delay:2.28s;}
.network-item:nth-child(10) .network-line{transition-delay:2.44s;}
.network-item:nth-child(11) .network-line{transition-delay:2.6s;}
.network-item:nth-child(12) .network-line{transition-delay:2.76s;}

.network-item:nth-child(1) .network-dot,
.network-item:nth-child(1) .network-label{transition-delay:1.9s;}
.network-item:nth-child(2) .network-dot,
.network-item:nth-child(2) .network-label{transition-delay:2.06s;}
.network-item:nth-child(3) .network-dot,
.network-item:nth-child(3) .network-label{transition-delay:2.22s;}
.network-item:nth-child(4) .network-dot,
.network-item:nth-child(4) .network-label{transition-delay:2.38s;}
.network-item:nth-child(5) .network-dot,
.network-item:nth-child(5) .network-label{transition-delay:2.54s;}
.network-item:nth-child(6) .network-dot,
.network-item:nth-child(6) .network-label{transition-delay:2.7s;}
.network-item:nth-child(7) .network-dot,
.network-item:nth-child(7) .network-label{transition-delay:2.86s;}
.network-item:nth-child(8) .network-dot,
.network-item:nth-child(8) .network-label{transition-delay:3.02s;}
.network-item:nth-child(9) .network-dot,
.network-item:nth-child(9) .network-label{transition-delay:3.18s;}
.network-item:nth-child(10) .network-dot,
.network-item:nth-child(10) .network-label{transition-delay:3.34s;}
.network-item:nth-child(11) .network-dot,
.network-item:nth-child(11) .network-label{transition-delay:3.5s;}
.network-item:nth-child(12) .network-dot,
.network-item:nth-child(12) .network-label{transition-delay:3.66s;}

/* Survol : renforce le secteur ciblé, atténue les autres connexions
   pour le mettre en valeur (:has, dégradation silencieuse sur les
   navigateurs qui ne le supportent pas — les autres restent visibles). */
.network-item{cursor:pointer;}

.network-item:hover .network-line{
  stroke:rgba(86,182,232,0.95);
}

.network-item:hover .network-dot{
  filter:drop-shadow(0 0 8px rgba(var(--color-primary-rgb),0.85));
}

.network-item:hover .network-label{
  font-weight:700;
  transform:translateY(0) scale(1.06);
}

.sector-network-svg:has(.network-item:hover) .network-item:not(:hover) .network-line{
  opacity:0.25;
}

/* Cercle central G2M : verre translucide, dégradé bleu léger, halo
   externe subtil. Apparaît en premier (opacité + échelle, 600ms), puis
   pulsation douce et continue une fois le réseau installé. */
.network-center-circle{
  fill:rgba(var(--color-primary-rgb),0.16);
  stroke:rgba(var(--color-primary-rgb),0.6);
  stroke-width:2;
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  scale:0.85;
  transition:opacity 1s ease-out, scale 1s ease-out, fill 0.25s ease-out, stroke 0.25s ease-out, filter 0.25s ease-out;
}

.network-center-glow{
  fill:rgba(var(--color-primary-rgb),0.12);
  opacity:0;
  transition:opacity 1.3s ease-out, fill 0.25s ease-out;
}

.network-center{cursor:pointer;}

.network-center:hover .network-center-circle{
  fill:rgba(var(--color-primary-rgb),0.35);
  stroke:var(--color-primary);
  filter:drop-shadow(0 0 26px rgba(var(--color-primary-rgb),0.85));
}

.network-center:hover .network-center-glow{
  fill:rgba(var(--color-primary-rgb),0.3);
}

.network-center-logo{
  opacity:0;
  transition:opacity 1s ease-out;
  transition-delay:0.3s;
}

.sector-network.is-inview .network-center-circle{
  opacity:1;
  scale:1;
}

.sector-network.is-inview .network-center-glow{
  opacity:1;
}

.sector-network.is-inview .network-center-logo{
  opacity:1;
}

@keyframes networkCenterPulse{
  0%, 100%{filter:drop-shadow(0 0 0 rgba(var(--color-primary-rgb),0.35));}
  50%{filter:drop-shadow(0 0 22px rgba(var(--color-primary-rgb),0.55));}
}

.sector-network.is-inview .network-center{
  animation:networkCenterPulse 4.5s ease-in-out 1s infinite;
}

/* Point lumineux qui circule très ponctuellement le long de quelques
   connexions (ambiance "flux de données"), via offset-path — dégrade
   silencieusement en absence de support (le point reste simplement
   invisible, aria-hidden). */
.network-flow-dot{
  fill:var(--color-white);
  opacity:0;
}

.sector-network.is-inview .network-item:nth-child(3n+1) .network-flow-dot{
  offset-path:var(--flow-path);
  animation:networkFlow 7s linear 3.8s infinite;
}

@keyframes networkFlow{
  0%{opacity:0; offset-distance:0%;}
  8%{opacity:0.9;}
  85%{opacity:0.9;}
  100%{opacity:0; offset-distance:100%;}
}

.sector-network-mobile-center,
.sector-network-mobile{
  display:none;
}

@media (max-width:820px){
  .sector-network-svg{display:none;}

  .sector-network-mobile-center{
    display:flex;
    align-items:center;
    justify-content:center;
    width:96px;
    height:96px;
    margin:var(--spacing-title-text) auto 0;
    border-radius:50%;
    background:rgba(var(--color-primary-rgb),0.16);
    border:2px solid rgba(var(--color-primary-rgb),0.6);
    box-shadow:0 0 24px rgba(var(--color-primary-rgb),0.35);
    font-family:var(--font-heading);
    font-weight:700;
    font-size:20px;
    color:var(--color-white);
    opacity:0;
    scale:0.85;
    transition:opacity 1s ease-out, scale 1s ease-out;
  }

  .sector-network-mobile-center img{
    width:60px;
    height:60px;
    object-fit:contain;
  }

  .sector-network.is-inview .sector-network-mobile-center{
    opacity:1;
    scale:1;
  }

  .sector-network-mobile{
    display:flex;
    flex-direction:column;
    align-items:center;
    list-style:none;
    margin:0 auto 0;
    padding:32px 0 0;
    max-width:420px;
    position:relative;
  }

  .sector-network-mobile::before{
    content:"";
    position:absolute;
    top:0;
    bottom:24px;
    left:50%;
    width:1px;
    background:linear-gradient(180deg, rgba(var(--color-primary-rgb),0.5), rgba(var(--color-primary-rgb),0.12));
  }

  .sector-network-mobile li{
    position:relative;
    width:50%;
    padding:14px 20px;
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-body);
    font-weight:500;
    font-size:15px;
    color:var(--color-white);
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.7s ease-out, transform 0.7s ease-out;
  }

  .sector-network.is-inview .sector-network-mobile li{
    opacity:1;
    transform:translateY(0);
  }

  .sector-network-mobile li:nth-child(1){transition-delay:1.1s;}
  .sector-network-mobile li:nth-child(2){transition-delay:1.26s;}
  .sector-network-mobile li:nth-child(3){transition-delay:1.42s;}
  .sector-network-mobile li:nth-child(4){transition-delay:1.58s;}
  .sector-network-mobile li:nth-child(5){transition-delay:1.74s;}
  .sector-network-mobile li:nth-child(6){transition-delay:1.9s;}
  .sector-network-mobile li:nth-child(7){transition-delay:2.06s;}
  .sector-network-mobile li:nth-child(8){transition-delay:2.22s;}
  .sector-network-mobile li:nth-child(9){transition-delay:2.38s;}
  .sector-network-mobile li:nth-child(10){transition-delay:2.54s;}
  .sector-network-mobile li:nth-child(11){transition-delay:2.7s;}
  .sector-network-mobile li:nth-child(12){transition-delay:2.86s;}

  /* Alternance gauche/droite de part et d'autre de la ligne centrale :
     impair = colonne gauche (texte + point orientés vers l'axe),
     pair = colonne droite (miroir). */
  .sector-network-mobile li:nth-child(odd){
    align-self:flex-start;
    flex-direction:row-reverse;
    text-align:right;
  }

  .sector-network-mobile li:nth-child(even){
    align-self:flex-end;
    text-align:left;
  }

  .sector-network-mobile-dot{
    flex:none;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--color-primary);
    box-shadow:0 0 8px rgba(var(--color-primary-rgb),0.7);
  }
}

/* Conserve le schéma circulaire SVG sur mobile au lieu de basculer sur
   la liste verticale ci-dessus (accueil uniquement). Le SVG a un
   viewBox 900x900 en unités proportionnelles : il se réduit déjà
   naturellement avec sa largeur CSS (traits, points, cercle central
   tous mis à l'échelle ensemble) — seuls les libellés sont agrandis
   en unités SVG pour rester lisibles à petite taille. Fond, couleurs,
   halo, tracés, cercle central et animations existantes
   (js/sector-network-reveal.js, .is-inview) restent strictement les
   mêmes ; rien n'est modifié au-delà de 820px (desktop inchangé). */
@media (max-width:820px){
  body.page-home .sector-network-svg{
    display:block;
    width:94%;
  }

  body.page-home .sector-network-mobile-center,
  body.page-home .sector-network-mobile{
    display:none;
  }

  body.page-home .network-label{
    font-size:18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .network-line,
  .network-dot,
  .network-label,
  .network-center-circle,
  .network-center-glow,
  .network-center-logo,
  .sector-network-mobile-center,
  .sector-network-mobile li{
    transition:none !important;
    animation:none !important;
    opacity:1 !important;
    scale:1 !important;
    transform:none !important;
    stroke-dashoffset:0 !important;
  }

  .network-flow-dot{display:none;}
}

/* ===================================================================
   "Des projets Data & IA plus accessibles" — bandeau financement
   (index.html). Fond bleu nuit hérité de body{}, design épuré, sans
   encadré autour des logos. Apparition en cascade au scroll via
   js/funding-band-reveal.js (même convention IntersectionObserver →
   .is-inview que .why-grid / .values-frieze, une seule fois).
   =================================================================== */
.funding-band{
  max-width:1000px;
  margin:150px auto;
  padding:0 24px;
  text-align:center;
}

.funding-band h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:0 0 var(--gap-title-intro);
}

.funding-band-intro{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  color:var(--text-on-dark);
  max-width:680px;
  margin:0 auto;
}

.funding-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  margin:var(--spacing-title-text) auto 0;
}

@media (max-width:700px){
  .funding-grid{grid-template-columns:1fr; row-gap:48px;}
}

.funding-item{
  position:relative;
  padding:0 32px;
}

/* Séparateurs verticaux fins entre les 3 dispositifs — pas de gap sur
   la grille : le padding symétrique de chaque item place le trait
   exactement à mi-distance entre deux logos voisins. Masqué en pile
   mobile (1 colonne), où il n'y a plus de voisin de chaque côté. */
@media (min-width:701px){
  .funding-item:not(:last-child)::after{
    content:"";
    position:absolute;
    top:8%;
    bottom:8%;
    right:0;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(var(--color-primary-rgb),0.25), transparent);
  }
}

.funding-logo{
  display:block;
  height:96px;
  width:auto;
  max-width:220px;
  margin:0 auto 24px;
  object-fit:contain;
  border-radius:50%;
  opacity:0;
  translate:0 20px;
  transition-property:opacity, translate, scale, filter;
  transition-duration:0.6s, 0.6s, 0.25s, 0.25s;
  transition-timing-function:ease-out, ease-out, ease-out, ease-out;
  transition-delay:0s, 0s, 0s, 0s;
  filter:drop-shadow(0 0 0 rgba(var(--color-primary-rgb),0));
}

/* Logo OPCO au format rectangulaire (texte petit, non centré dans son
   propre fichier) : cadre carré en cercle (overflow masqué) pour garantir
   un cercle parfait, avec zoom + recentrage sur le texte via transform. */
.funding-logo-zoom{
  position:relative;
  display:block;
  width:96px;
  height:96px;
  margin:0 auto 24px;
  border-radius:50%;
  overflow:hidden;
  background:var(--color-white);
}

/* Recadrage précis sur le texte "OPCO" (bounding box du logo dans le
   fichier source), le reste de l'image étant du blanc vide. */
.funding-logo--opco{
  position:absolute;
  width:172px;
  height:118px;
  left:-31px;
  top:-8px;
  margin:0;
  object-fit:cover;
}

/* Logo ENE : même fichier/recadrage que sur certifications.html
   (.cert-logo-zoom-img), mis à l'échelle du cadre 96px de ce bloc. */
.funding-logo--ene{
  position:absolute;
  width:137px;
  height:137px;
  left:-20px;
  top:-23px;
  margin:0;
  object-fit:cover;
}

.funding-grid.is-inview .funding-logo{
  opacity:1;
  translate:0 0;
}

.funding-grid.is-inview .funding-item:nth-child(1) .funding-logo{transition-delay:0ms, 0ms, 0s, 0s;}
.funding-grid.is-inview .funding-item:nth-child(2) .funding-logo{transition-delay:150ms, 150ms, 0s, 0s;}
.funding-grid.is-inview .funding-item:nth-child(3) .funding-logo{transition-delay:300ms, 300ms, 0s, 0s;}
.funding-grid.is-inview .funding-item:nth-child(4) .funding-logo{transition-delay:450ms, 450ms, 0s, 0s;}

.funding-item:hover .funding-logo{
  scale:1.05;
  filter:drop-shadow(0 0 16px rgba(var(--color-primary-rgb),0.6));
}

.funding-item h3{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:17px;
  color:var(--color-white);
  margin:0 0 6px;
}

.funding-item p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:13px;
  color:var(--color-gray);
  margin:0;
}

.funding-cta{
  margin:80px auto 0;
}

.funding-band-note{
  font-family:var(--font-body);
  font-weight:400;
  font-size:12px;
  font-style:italic;
  color:var(--color-gray);
  max-width:560px;
  margin:10px auto 0;
}

@media (prefers-reduced-motion: reduce){
  .funding-logo{opacity:1; translate:0 0; transition:filter 0.25s ease;}
  .funding-item:hover .funding-logo{scale:1;}
}

/* ===================================================================
   Timeline verticale — hébergement / sécurité (approche.html)
   Remplace les 3 cartes par 3 étapes reliées par une ligne qui se dessine
   au scroll (js/appr-timeline-reveal.js, même convention IntersectionObserver
   → .is-inview une seule fois que les autres reveals de la page).
   =================================================================== */
.appr-timeline{
  position:relative;
  max-width:820px;
  margin:var(--spacing-section) auto 0;
  padding:0 24px;
}

.appr-timeline-line{
  position:absolute;
  left:47px;
  top:24px;
  bottom:24px;
  width:2px;
  background:linear-gradient(180deg, var(--color-primary), rgba(var(--color-primary-rgb),0.2));
  box-shadow:0 0 8px rgba(var(--color-primary-rgb),0.45);
  transform:scaleY(0);
  transform-origin:top center;
}

.appr-timeline.is-inview .appr-timeline-line{
  animation:apprTimelineDraw 5.5s ease-out forwards;
}

@keyframes apprTimelineDraw{
  from{transform:scaleY(0);}
  to{transform:scaleY(1);}
}

.appr-timeline-step{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:28px;
  padding-bottom:var(--spacing-cards);
}

.appr-timeline-step:last-child{
  padding-bottom:0;
}

.appr-timeline-dot{
  position:relative;
  flex:none;
  margin-bottom:0;
  transition:box-shadow 0.3s ease;
}

.appr-timeline-dot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),0.45), transparent 70%);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.5s ease-out;
}

.appr-timeline-dot svg,
.appr-timeline-dot img{
  opacity:0;
  transition:opacity 0.4s ease-out;
}

.appr-timeline-content{
  flex:1;
  padding-top:6px;
  opacity:0;
  transform:translateX(20px);
  transition:opacity 0.5s ease-out, transform 0.5s ease-out;
}

.appr-timeline-content .card-subtitle{
  font-size:17px;
}

.appr-timeline-content .card-text{
  font-size:17px;
  line-height:1.8;
  max-width:800px;
}

.appr-timeline.is-inview .appr-timeline-step--1 .appr-timeline-dot::after,
.appr-timeline.is-inview .appr-timeline-step--1 .appr-timeline-dot svg,
.appr-timeline.is-inview .appr-timeline-step--1 .appr-timeline-dot img,
.appr-timeline.is-inview .appr-timeline-step--1 .appr-timeline-content{
  opacity:1;
  transition-delay:0.2s;
}

.appr-timeline.is-inview .appr-timeline-step--2 .appr-timeline-dot::after,
.appr-timeline.is-inview .appr-timeline-step--2 .appr-timeline-dot svg,
.appr-timeline.is-inview .appr-timeline-step--2 .appr-timeline-dot img,
.appr-timeline.is-inview .appr-timeline-step--2 .appr-timeline-content{
  opacity:1;
  transition-delay:2.75s;
}

.appr-timeline.is-inview .appr-timeline-step--3 .appr-timeline-dot::after,
.appr-timeline.is-inview .appr-timeline-step--3 .appr-timeline-dot svg,
.appr-timeline.is-inview .appr-timeline-step--3 .appr-timeline-dot img,
.appr-timeline.is-inview .appr-timeline-step--3 .appr-timeline-content{
  opacity:1;
  transition-delay:5.3s;
}

.appr-timeline.is-inview .appr-timeline-content{
  transform:translateX(0);
}

.appr-timeline-step:hover .appr-timeline-dot::after{
  opacity:1;
}

.appr-timeline-step:hover .appr-timeline-dot{
  box-shadow:var(--shadow-sm), 0 0 0 3px rgba(var(--color-primary-rgb),0.3);
}

.appr-timeline-step:hover .card-subtitle{
  text-shadow:0 0 12px rgba(var(--color-primary-rgb),0.55);
}

@media (max-width:600px){
  .appr-timeline-line{left:35px;}
  .appr-timeline-step{gap:20px;}
  .appr-timeline-dot{width:40px; height:40px;}
  .appr-timeline-dot svg{width:20px; height:20px;}
  .appr-timeline-dot img{width:20px; height:20px;}
}

@media (prefers-reduced-motion: reduce){
  .appr-timeline-line{transition:none; animation:none; transform:scaleY(1);}
  .appr-timeline-dot::after{transition:none; opacity:1;}
  .appr-timeline-dot svg,
  .appr-timeline-dot img{transition:none; opacity:1;}
  .appr-timeline-content{transition:none; opacity:1; transform:none;}
}

/* ===================================================================
   Nous rejoindre (nous-rejoindre.html)
   =================================================================== */
.rej-intro-photo{
  display:block;
  width:100%;
  max-width:900px;
  height:auto;
  aspect-ratio:21/9;
  object-fit:cover;
  object-position:center top;
  margin:0 auto;
  border:none;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow), 0 0 20px rgba(var(--color-primary-rgb),0.6), 0 0 50px rgba(var(--color-primary-rgb),0.45);
  transition:box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.rej-intro-photo:hover{
  box-shadow:var(--shadow), 0 0 26px rgba(var(--color-primary-rgb),0.85), 0 0 70px rgba(var(--color-primary-rgb),0.6);
  transform:scale(1.015);
}

@media (prefers-reduced-motion:reduce){
  .rej-intro-photo{transition:none;}
  .rej-intro-photo:hover{transform:none;}
}

.rej-section-title{
  max-width:900px;
  margin:0 auto var(--gap-title-intro);
  padding:0 24px;
  text-align:center;
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  line-height:1.3;
  letter-spacing:0.01em;
  color:var(--color-white);
}

.rej-values{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}

.rej-values h2{
  text-align:center;
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  line-height:1.3;
  letter-spacing:0.01em;
  color:var(--color-white);
  margin:16px 0 56px;
}

.rej-values-list{
  display:flex;
  flex-direction:column;
}

.rej-value{
  padding:28px 0;
  border-bottom:1px solid rgba(var(--color-primary-rgb),0.18);
}

.rej-value:last-child{
  border-bottom:none;
}

.rej-value:nth-child(2){margin-left:8%;}
.rej-value:nth-child(3){margin-left:16%;}

.rej-value-num{
  display:block;
  width:auto;
  height:clamp(36px, 4.5vw, 56px);
}

/* Chiffre tracé au trait puis rempli (js/rej-values-reveal.js, une
   IntersectionObserver par .rej-value — chaque valeur s'anime indépendamment
   dès qu'elle entre dans le viewport, une seule fois). Le contour utilise le
   tracé pathLength="1" pour animer stroke-dashoffset indépendamment de la
   longueur réelle du tracé (glyphes Montserrat Bold extraits en SVG). */
.rej-num-stroke{
  fill:none;
  stroke:var(--color-white);
  stroke-width:30;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 2.2s ease-out;
}

.rej-num-fill{
  fill:var(--color-white);
  fill-opacity:0;
  transition:fill-opacity 1s ease-out;
}

.rej-value.is-inview .rej-num-stroke{
  stroke-dashoffset:0;
}

.rej-value.is-inview .rej-num-fill{
  fill-opacity:1;
  transition-delay:2.2s;
}

.rej-value-label{
  display:block;
  margin-top:10px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-gray-light);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.8s ease-out, transform 0.8s ease-out;
}

.rej-value.is-inview .rej-value-label{
  opacity:1;
  transform:translateY(0);
  transition-delay:3.2s;
}

.rej-value-text{
  max-width:none;
  margin:14px 0 0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.7;
  color:var(--text-on-dark);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.8s ease-out, transform 0.8s ease-out;
}

.rej-value.is-inview .rej-value-text{
  opacity:1;
  transform:translateY(0);
  transition-delay:3.4s;
}

@media (max-width:700px){
  .rej-value:nth-child(2){margin-left:4%;}
  .rej-value:nth-child(3){margin-left:8%;}
}

@media (prefers-reduced-motion: reduce){
  .rej-num-stroke{transition:none; stroke-dashoffset:0;}
  .rej-num-fill{transition:none; fill-opacity:1;}
  .rej-value-label{transition:none; opacity:1; transform:none;}
  .rej-value-text{transition:none; opacity:1; transform:none;}
}

/* ===================================================================
   "Les profils que nous recherchons" — timeline verticale
   (nous-rejoindre.html, entre "Les valeurs qui nous rassemblent" et le
   bandeau CTA final). Ligne + points qui se dessinent au scroll via
   js/rej-profile-reveal.js (même convention IntersectionObserver →
   .is-inview une seule fois que le reste du site).
   =================================================================== */
.rej-profile{
  max-width:1020px;
  margin:0 auto var(--spacing-section);
  padding:0 24px;
  text-align:center;
}

.rej-profile h2{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:0 0 var(--gap-title-intro);
}

.rej-profile-intro{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--text-on-dark);
  max-width:970px;
  margin:0 auto;
  opacity:0;
  transition:opacity 0.5s ease-out;
}

.rej-profile.is-inview .rej-profile-intro{
  opacity:1;
}

.rej-profile-timeline{
  position:relative;
  max-width:620px;
  margin:56px auto 0;
  text-align:left;
}

.rej-profile-line{
  position:absolute;
  left:8px;
  top:6px;
  bottom:6px;
  width:2px;
  background:linear-gradient(180deg, var(--color-primary), rgba(var(--color-primary-rgb),0.2));
  box-shadow:0 0 8px rgba(var(--color-primary-rgb),0.45);
  transform:scaleY(0);
  transform-origin:top center;
}

.rej-profile.is-inview .rej-profile-line{
  animation:rejProfileLineDraw 1.4s ease-out forwards;
}

@keyframes rejProfileLineDraw{
  from{transform:scaleY(0);}
  to{transform:scaleY(1);}
}

.rej-profile-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding-bottom:40px;
}

.rej-profile-item:last-child{
  padding-bottom:0;
}

.rej-profile-dot{
  flex:none;
  width:18px;
  height:18px;
  margin-top:2px;
  border-radius:50%;
  background:var(--color-primary);
  box-shadow:0 0 0 4px rgba(var(--color-primary-rgb),0.18);
  opacity:0;
  scale:0.4;
  transition:opacity 0.4s ease-out, scale 0.4s ease-out;
}

.rej-profile-item p{
  flex:1;
  padding-top:1px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:17px;
  line-height:1.6;
  color:var(--color-white);
  margin:0;
  opacity:0;
  transform:translateX(20px);
  transition:opacity 0.5s ease-out, transform 0.5s ease-out;
}

.rej-profile.is-inview .rej-profile-item:nth-child(2) .rej-profile-dot{transition-delay:0.3s;}
.rej-profile.is-inview .rej-profile-item:nth-child(2) p{transition-delay:0.4s;}
.rej-profile.is-inview .rej-profile-item:nth-child(3) .rej-profile-dot{transition-delay:0.45s;}
.rej-profile.is-inview .rej-profile-item:nth-child(3) p{transition-delay:0.55s;}
.rej-profile.is-inview .rej-profile-item:nth-child(4) .rej-profile-dot{transition-delay:0.6s;}
.rej-profile.is-inview .rej-profile-item:nth-child(4) p{transition-delay:0.7s;}
.rej-profile.is-inview .rej-profile-item:nth-child(5) .rej-profile-dot{transition-delay:0.75s;}
.rej-profile.is-inview .rej-profile-item:nth-child(5) p{transition-delay:0.85s;}
.rej-profile.is-inview .rej-profile-item:nth-child(6) .rej-profile-dot{transition-delay:0.9s;}

/* Harmonisation des espacements verticaux entre les grandes sections de
   nous-rejoindre.html (valeurs / ce que vous gagnez / profils / CTA finale) :
   même écart, légèrement augmenté par rapport au rythme .section-gap-lg
   standard (190px). Sélecteurs à deux classes pour primer sur les règles
   propres de .rej-values/.rej-section-title/.rej-profile/.final-cta,
   qui redéfinissent margin-top via leur propre shorthand "margin". */
.rej-values.section-gap-lg,
.rej-section-title.section-gap-lg,
.rej-profile.section-gap-lg,
body.page-nous-rejoindre .final-cta.section-gap-lg{
  margin-top:220px;
}

@media (max-width:1279px){
  .rej-values.section-gap-lg,
  .rej-section-title.section-gap-lg,
  .rej-profile.section-gap-lg,
  body.page-nous-rejoindre .final-cta.section-gap-lg{
    margin-top:175px;
  }
}

@media (max-width:767px){
  .rej-values.section-gap-lg,
  .rej-section-title.section-gap-lg,
  .rej-profile.section-gap-lg,
  body.page-nous-rejoindre .final-cta.section-gap-lg{
    margin-top:130px;
  }
}
.rej-profile.is-inview .rej-profile-item:nth-child(6) p{transition-delay:1s;}

.rej-profile.is-inview .rej-profile-dot{
  opacity:1;
  scale:1;
}

.rej-profile.is-inview .rej-profile-item p{
  opacity:1;
  transform:translateX(0);
}

@media (max-width:600px){
  .rej-profile-line{left:7px;}
  .rej-profile-item{gap:18px;}
}

@media (prefers-reduced-motion: reduce){
  .rej-profile-intro,
  .rej-profile-dot,
  .rej-profile-item p{transition:none; opacity:1; transform:none; scale:1;}
  .rej-profile-line{animation:none; transform:scaleY(1);}
}

/* ===================================================================
   Notre savoir-faire — 3 cartes d'expertise (a-propos.html)
   Reprend le contenu exact des 3 puces .g2m-list d'origine (texte
   inchangé, seule la présentation change) : icône + titre mis en valeur +
   texte descriptif, sur 3 .card.card--border-draw classiques (fond bleu
   translucide via .sf-cards, bordure animée existante au survol —
   "bordure plus lumineuse" réutilise .card--border-draw tel quel).
   =================================================================== */
.sf-cards .card{
  background:transparent;
  color:var(--color-white);
  text-align:center;
  border:1px solid rgba(255,255,255,0.2);
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.4s ease, border-color 0.25s ease;
}

.sf-cards .card--border-draw::before{
  content:none;
}

.sf-cards.is-inview .card{
  opacity:1;
  transform:translateY(0);
}

.sf-cards.is-inview .card:hover{
  transform:translateY(-6px);
  border-color:var(--color-primary);
  box-shadow:0 0 20px rgba(var(--color-primary-rgb),0.5);
}

.sf-card-icon{
  display:block;
  width:32px;
  height:32px;
  margin:0 auto 16px;
  color:var(--color-white);
}

.sf-card-icon svg{
  width:100%;
  height:100%;
  display:block;
}

.sf-cards .sf-card-title{
  text-align:center;
  font-size:16px;
  font-weight:700;
  color:var(--color-white);
}

.sf-cards .card-text{
  color:var(--color-white);
  text-align:center;
}

.sf-card-link{
  display:inline-flex;
  align-items:center;
  align-self:center;
  gap:4px;
  margin-top:16px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  color:var(--color-primary);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}

.sf-card-link::after{
  content:"→";
  opacity:0;
  transform:translateX(-4px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}

.sf-card-link:hover,
.sf-card-link:focus-visible{
  color:var(--color-white);
  border-color:currentColor;
  gap:6px;
}

.sf-card-link:hover::after,
.sf-card-link:focus-visible::after{
  opacity:1;
  transform:translateX(0);
}

@media (prefers-reduced-motion: reduce){
  .sf-cards .card{opacity:1; transform:none; transition:border-color 0.4s ease, box-shadow 0.4s ease;}
}

/* ===================================================================
   Notre savoir-faire — mode carrousel (a-propos.html)
   Réutilise la mécanique du carrousel de la page d'accueil (.carousel,
   .carousel-viewport/-track/-slide, flèches et points : voir
   js/carousel.js et le bloc "Carrousel des 4 cartes" plus haut) sans
   reprendre ses overrides visuels (fond photo, pill blanche), afin que
   les 3 cartes .sf-cards gardent leur design (icône, titre, texte,
   fond bleu translucide, bordure animée) tel quel — seul l'affichage
   passe de 3 cartes côte à côte à une carte à la fois.
   =================================================================== */
.sf-cards.carousel{
  max-width:980px;
  margin:0 auto var(--spacing-section);
  padding:0 56px;
  display:block;
  position:relative;
}

.sf-cards.carousel .carousel-slide{
  display:flex;
  justify-content:center;
}

.sf-cards.carousel .carousel-slide .card{
  width:100%;
  max-width:780px;
  min-height:clamp(220px, 32vw, 300px);
  padding:clamp(30px, 5vw, 44px) clamp(24px, 4vw, 40px);
}

/* Titre + texte forment un bloc centré verticalement dans l'encadré
   (marges auto sur l'axe vertical du .card en colonne) ; le bouton de
   redirection, quand il existe, reste ainsi ancré en bas de la carte —
   sur la carte "Financement" sans bouton, le bloc occupe tout l'espace
   restant et se retrouve donc parfaitement centré, sans vide en bas. */
.sf-cards .sf-card-body{
  width:100%;
  margin:auto 0;
}

/* Neutralise le style générique de mise en avant du carrousel (bordure/
   halo bleu + zoom), pensé pour une carte pleine largeur : ici la carte
   visible n'occupe pas toute la largeur du slide, ce halo déborderait
   dans le vide autour d'elle. */
.sf-cards.carousel .carousel-slide.is-active{
  border-color:transparent;
  box-shadow:none;
  transform:none;
}

@media (max-width:600px){
  .sf-cards.carousel{
    padding-left:40px;
    padding-right:40px;
  }
}

/* ===================================================================
   Page Références (references.html)
   Classes préfixées .ref- et scopées à .ref-page pour ne rien impacter
   ailleurs sur le site. Réutilise au maximum les composants existants :
   .page-header (hero), .stats-band-grid (stats), .cards/.card (cartes
   "pourquoi nous faire confiance"), .final-cta (CTA de fin).
   =================================================================== */

.ref-hero-eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-primary);
  background:rgba(var(--color-primary-rgb),0.12);
  border:1px solid rgba(var(--color-primary-rgb),0.3);
  padding:8px 18px;
  border-radius:var(--radius-pill);
  margin:0 0 20px;
}

.ref-hero-title{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:40px;
  line-height:1.3;
  letter-spacing:0.01em;
  color:var(--title-color);
  margin:0 0 var(--gap-title-sub);
}

/* ---------- Sections génériques ---------- */
.ref-section{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
}

.ref-page .ref-section{
  margin-bottom:calc(var(--spacing-section) * 1.5);
}

.ref-section-title{
  font-family:var(--font-h1);
  font-weight:700;
  font-size:32px;
  color:var(--color-white);
  margin:0 0 var(--gap-title-intro);
}

.ref-section-intro{
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.8;
  color:var(--color-gray);
  max-width:700px;
  margin:0 auto var(--spacing-title-text);
}

/* ---------- Tags (secteurs d'activité / écosystème) ---------- */
.ref-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:16px;
  max-width:1000px;
  margin:0 auto;
}

.ref-tag{
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  color:var(--color-white);
  background:rgba(var(--color-primary-rgb),0.12);
  border:1px solid rgba(var(--color-primary-rgb),0.3);
  padding:14px 26px;
  border-radius:var(--radius-lg);
  white-space:nowrap;
}

@media (max-width:600px){
  .ref-tag{white-space:normal; text-align:center;}
}

/* ---------- Filtres de secteurs (boutons interactifs) ---------- */
.ref-filter-btn{
  appearance:none;
  -webkit-appearance:none;
  font-family:inherit;
  cursor:pointer;
  transition:background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.ref-filter-btn:hover:not(.is-active){
  background:rgba(var(--color-primary-rgb),0.2);
  border-color:rgba(var(--color-primary-rgb),0.55);
}

.ref-filter-btn:active{
  transform:scale(0.97);
}

.ref-filter-btn.is-active{
  background:rgba(var(--color-primary-rgb),0.42);
  border-color:var(--color-primary);
  color:var(--color-white);
  box-shadow:0 0 0 1px rgba(var(--color-primary-rgb),0.55), 0 0 20px rgba(var(--color-primary-rgb),0.45);
}

@media (max-width:600px){
  .ref-tag{white-space:normal; text-align:center;}

  .ref-filter-tags{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding:4px 4px 10px;
    margin:0 -4px;
    max-width:100%;
  }

  .ref-filter-tags .ref-filter-btn{
    white-space:nowrap;
    scroll-snap-align:start;
    flex:none;
  }
}

/* ---------- Secteurs (expertise multisectorielle) : une seule ligne en
   desktop + fine ligne bleue animée sous la rangée, tracée une seule fois
   au scroll via js/ref-tags-line-reveal.js (.is-inview posé sur
   .ref-tags-wrap, même convention que .appr-pills-wrap). ---------- */
.ref-tags-wrap{
  position:relative;
  display:inline-block;
  max-width:100%;
}

@media (min-width:901px){
  .ref-tags-wrap .ref-tags{
    gap:12px;
    max-width:none;
  }

  .ref-tags-wrap .ref-tag{
    padding:14px 20px;
  }
}

.ref-tags-line{
  position:absolute;
  left:-18px;
  right:-18px;
  bottom:-24px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--color-primary) 6%, var(--color-primary) 94%, transparent);
  box-shadow:0 0 10px rgba(var(--color-primary-rgb),0.75), 0 0 3px rgba(var(--color-primary-rgb),0.95);
  opacity:0;
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
}

.ref-tags-wrap.is-inview .ref-tags-line{
  animation:refTagsLineDraw 1.3s ease-out 0.2s forwards;
}

@keyframes refTagsLineDraw{
  0%{opacity:0; transform:scaleX(0);}
  6%{opacity:1;}
  100%{opacity:1; transform:scaleX(1);}
}

@media (max-width:900px){
  .ref-tags-line{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .ref-tags-line{animation:none; opacity:0;}
}

/* ---------- Cartes entreprises (recto/verso, flip 3D) ---------- */
.ref-cards-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  row-gap:72px;
  column-gap:64px;
  max-width:1200px;
  margin:0 auto;
}

@media (max-width:900px){
  .ref-cards-grid{grid-template-columns:repeat(2, 1fr); row-gap:32px; column-gap:48px;}
}

@media (max-width:560px){
  .ref-cards-grid{grid-template-columns:repeat(2, 1fr); row-gap:28px; column-gap:16px;}
}

.ref-card{
  perspective:1400px;
  height:250px;
  cursor:pointer;
  transition:transform 0.3s ease;
}

@media (hover:hover) and (pointer:fine){
  .ref-card:hover{
    transform:translateY(-4px) scale(1.02);
  }

  .ref-card:hover .ref-card-face{
    box-shadow:var(--shadow), 0 0 22px rgba(var(--color-primary-rgb),0.35);
  }
}

.ref-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style:preserve-3d;
}

@media (hover:hover) and (pointer:fine){
  .ref-card:hover .ref-card-inner{
    transform:rotateY(180deg);
  }
}

.ref-card.is-flipped .ref-card-inner,
.ref-card:focus-visible .ref-card-inner{
  transform:rotateY(180deg);
}

.ref-card-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow);
  transition:box-shadow 0.3s ease;
}

/* ---------- Filtrage par secteur (js/ref-sector-filter.js) ---------- */
.ref-card--leaving{
  transition:opacity 0.25s ease, transform 0.25s ease;
  opacity:0;
  transform:scale(0.96);
  pointer-events:none;
}

.ref-card--hidden{
  display:none;
}

.ref-card--enter-prep{
  opacity:0;
  transform:translateY(20px) scale(0.96);
  transition:none;
}

.ref-card--entering{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity 0.45s ease-out, transform 0.45s ease-out;
}

@media (prefers-reduced-motion: reduce){
  .ref-card--leaving,
  .ref-card--enter-prep,
  .ref-card--entering{
    transition:none;
  }
}

.ref-card-face--front{
  background:var(--color-white);
  border:1px solid rgba(var(--color-primary-rgb),0.14);
  align-items:center;
  justify-content:center;
  padding:28px;
}

.ref-card-face--front img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

.ref-card-name{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:22px;
  color:var(--color-primary-hover);
  text-align:center;
  margin:0;
}

.ref-card-face--back{
  background:linear-gradient(165deg, rgba(var(--color-primary-hover-rgb),0.95) 0%, rgba(var(--color-primary-rgb),0.62) 100%);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(var(--color-primary-rgb),0.5);
  box-shadow:var(--shadow), 0 0 26px rgba(var(--color-primary-rgb),0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  transform:rotateY(180deg);
  align-items:flex-start;
  justify-content:center;
  padding:24px 28px;
}

@supports not (backdrop-filter: blur(1px)){
  .ref-card-face--back{background:linear-gradient(165deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);}
}

.ref-card-label{
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.72);
  margin:0 0 4px;
}

.ref-card-value{
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  line-height:1.4;
  color:var(--color-white);
  margin:0 0 16px;
  text-align:left;
}

.ref-card-value:last-child{margin-bottom:0;}

@media (prefers-reduced-motion:reduce){
  .ref-card-inner{transition:none;}
}

/* Espace supplémentaire avant cette section précise, en plus du
   .section-gap-lg partagé avec le reste du site. */
.ref-trust-section{
  margin-top:80px;
}

/* ---------- Cartes "pourquoi nous faire confiance" (icône + texte) ---------- */
.ref-trust-cards{
  grid-template-columns:repeat(4, 1fr);
}

@media (max-width:1100px){
  .ref-trust-cards{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:600px){
  .ref-trust-cards{grid-template-columns:1fr;}
}

.ref-trust-cards .card{
  text-align:left;
}

.ref-trust-cards .card-subtitle{
  white-space:nowrap;
}

@media (min-width:1101px) and (max-width:1350px){
  .ref-trust-cards .card-subtitle{
    font-size:12.5px;
  }
}

@media (min-width:1351px){
  .ref-trust-cards .card-subtitle{
    font-size:14px;
  }
}

.ref-trust-cards .card:hover{
  border-color:var(--color-primary);
  box-shadow:var(--shadow-hover), 0 0 0 2px rgba(var(--color-primary-rgb),0.7), 0 0 20px rgba(var(--color-primary-rgb),0.6), 0 0 50px rgba(var(--color-primary-rgb),0.4);
}

.ref-card-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(var(--color-primary-rgb),0.12);
  border:1px solid rgba(var(--color-primary-rgb),0.3);
  color:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  margin-bottom:20px;
}

.ref-card-icon svg{
  width:24px;
  height:24px;
}

/* ===================================================================
   Page Références — correctifs MOBILE UNIQUEMENT (≤768px)
   Tout ce bloc est scopé à body.page-references + @media(max-width:768px)
   afin de ne jamais toucher la version desktop (conservée telle quelle)
   ni les autres pages qui partagent .card/.cards/.final-cta/.cta-button.
   Chaque règle est préfixée "body.page-references" pour gagner la
   cascade face aux règles partagées sans dépendre de l'ordre du fichier.
   =================================================================== */
@media (max-width:768px){

  /* ---------- 1. Structure générale ---------- */
  body.page-references{
    overflow-x:hidden;
  }

  body.page-references .ref-page{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body.page-references *{
    box-sizing:border-box;
  }

  body.page-references .ref-section{
    width:100%;
    max-width:100%;
    padding:0 20px;
  }

  body.page-references .ref-page .ref-section{
    margin-bottom:40px;
  }

  body.page-references .section-gap-lg{
    margin-top:40px;
  }

  body.page-references .ref-trust-section{
    margin-top:40px;
  }

  /* ---------- 2. "Une expertise multisectorielle" ---------- */
  body.page-references .ref-section-title{
    font-size:clamp(2rem, 9vw, 3rem);
    line-height:1.15;
    text-align:center;
    overflow-wrap:break-word;
    word-break:break-word;
  }

  body.page-references .ref-section-intro{
    max-width:90%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  body.page-references .ref-tags-wrap{
    display:block;
    width:100%;
  }

  body.page-references .ref-filter-tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    overflow-x:visible;
    max-width:100%;
    padding:0;
    margin:0;
    gap:10px;
  }

  body.page-references .ref-filter-tags .ref-filter-btn{
    flex:none;
    white-space:normal;
    text-align:center;
    scroll-snap-align:none;
  }

  /* ---------- 3. Cartes entreprises (recto/verso) : 2 cartes par
     ligne, largeur identique, dernière carte impaire centrée
     automatiquement (flex-wrap + justify-content:center, sans
     dépendre de la parité — même technique que les grilles 2 colonnes
     des pages Cas d'usage). ---------- */
  body.page-references .ref-cards-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    row-gap:20px;
    column-gap:14px;
    width:100%;
    max-width:100%;
    padding:0;
  }

  body.page-references .ref-card{
    flex:0 0 calc(50% - 7px);
    width:calc(50% - 7px);
    max-width:180px;
    box-sizing:border-box;
    height:240px;
    margin:0;
  }

  body.page-references .ref-card-face{
    overflow:hidden;
  }

  body.page-references .ref-card-face--front{
    padding:14px;
  }

  body.page-references .ref-card-face--front img{
    width:auto;
    height:auto;
    max-width:75%;
    max-height:65%;
    object-fit:contain;
    margin:0 auto;
  }

  body.page-references .ref-card-name{
    font-size:16px;
  }

  /* Le verso est réaligné entièrement : contenu ancré en haut plutôt que
     centré verticalement (justify-content:center faisait démarrer
     "SECTEUR" à une hauteur différente d'une carte à l'autre selon que
     le texte des valeurs tienne sur 1 ou 2 lignes), largeur pleine +
     text-align:left explicite sur chaque ligne pour garantir un même
     bord gauche partout, quel que soit le contenu. */
  body.page-references .ref-card-face--back{
    padding:16px 14px;
    align-items:flex-start;
    justify-content:flex-start;
  }

  body.page-references .ref-card-label{
    width:100%;
    box-sizing:border-box;
    text-align:left;
    color:var(--color-dark);
    font-size:9px;
    margin:0 0 2px;
  }

  body.page-references .ref-card-value{
    width:100%;
    box-sizing:border-box;
    text-align:left;
    font-size:11px;
    line-height:1.3;
    margin:0 0 8px;
  }

  body.page-references .ref-card-value:last-child{
    margin-bottom:0;
  }

  body.page-references .ref-card-name{
    font-size:20px;
  }

  /* Le retournement au clic/tap (.is-flipped, js/references-flip.js) est
     déjà indépendant du survol : rien à changer côté JS. On neutralise
     seulement le survol desktop qui ne doit pas s'activer au tap. */
  body.page-references .ref-card:hover{
    transform:none;
  }

  body.page-references .ref-card:hover .ref-card-face{
    box-shadow:var(--shadow);
  }

  /* ---------- 4. "Pourquoi nos clients nous font confiance" : grille 2
     colonnes x 2 lignes. CSS grid (plutôt que flex-wrap) car le nombre
     de cartes est fixe (4) : chaque ligne obtient automatiquement des
     colonnes de largeur identique et une hauteur de rangée uniforme
     (align-items:stretch par défaut), même si le texte d'une carte est
     plus long qu'une autre. */
  body.page-references .ref-trust-cards{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px 14px;
    max-width:340px;
    margin:0 auto;
  }

  body.page-references .ref-trust-cards .card{
    width:auto;
    max-width:none;
    box-sizing:border-box;
    padding:14px;
    margin:0;
  }

  body.page-references .ref-trust-cards .card-subtitle{
    white-space:normal;
    font-size:12px;
    margin-bottom:8px;
  }

  body.page-references .ref-trust-cards .card-text{
    font-size:11px;
    line-height:1.5;
  }

  body.page-references .ref-card-icon{
    width:40px;
    height:40px;
    margin-bottom:10px;
  }

  body.page-references .ref-card-icon svg{
    width:18px;
    height:18px;
  }

  /* Empêche le survol lumineux (glow + lift) de rester "collé" après un
     tap tactile — .card:hover est partagé et non conditionné à
     hover:hover ailleurs, donc on le neutralise ici pour cette page. */
  body.page-references .ref-trust-cards .card:hover{
    transform:none;
    border-color:rgba(var(--color-primary-rgb),0.12);
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
  }

  /* ---------- 5. Bandeau final ---------- */
  body.page-references .final-cta{
    padding:56px 20px;
    margin-top:40px;
  }

  body.page-references .final-cta h2{
    font-size:clamp(1.5rem, 7vw, 1.75rem);
    overflow-wrap:break-word;
  }

  body.page-references .final-cta p{
    max-width:90%;
    margin-left:auto;
    margin-right:auto;
  }

  body.page-references .final-cta .cta-button{
    width:auto;
    max-width:100%;
    padding:14px 24px;
    white-space:normal;
    text-align:center;
    justify-content:center;
  }
}

/* ===================================================================
   Textes d'introduction sous le titre principal (hero) — justifiés en
   MOBILE UNIQUEMENT, sur toutes les pages du site qui en possèdent un.
   Le titre principal n'est pas touché (aucun sélecteur h1 ci-dessous) ;
   seule l'introduction passe de centré/hérité à justifié. La version
   desktop reste strictement inchangée : aucune règle existante n'est
   modifiée, uniquement de nouvelles règles ajoutées sous ce media query.
   text-align-last:left évite que la toute dernière ligne du texte soit
   étirée de façon disgracieuse (même convention que .method-intro
   p.intro--justify, déjà utilisé ailleurs sur le site).
   =================================================================== */
@media (max-width:768px){

  /* Pattern commun .page-header .intro (a-propos, contact,
     expertise-data-ia, expertise-metier-ia, expertise-technique,
     formation, formation-initiation-ia, page_template, references,
     cas-usages, et les pages avec le modificateur .intro--justify :
     approche, nous-rejoindre, partenaires, certifications). */
  .page-header .intro,
  .page-header .intro.intro--justify{
    text-align:justify;
    text-align-last:left;
  }

  /* Pages cas d'usage (cas-usage-*.html) : hero à deux colonnes,
     description déjà alignée à gauche sur desktop, non centrée. */
  .uc-hero-desc{
    text-align:justify;
    text-align-last:left;
  }

  /* R&D (expertise-developpement.html). */
  .rd-hero-lead{
    text-align:justify;
    text-align-last:left;
  }

  /* Diagnostic (diagnostic.html). */
  .diag2-hero-text p{
    text-align:justify;
    text-align-last:left;
  }

  /* Développement (developpement.html). */
  .intro-banner-text p{
    text-align:justify;
    text-align-last:left;
  }
}

/* ===================================================================
   Titres principaux (H1 / Hero) — réduits en MOBILE UNIQUEMENT sur
   toutes les pages du site. Seuls font-size et line-height sont
   modifiés : police, graisse, couleur, alignement et effets lumineux
   restent ceux de chaque page (aucune de ces propriétés n'est touchée
   ci-dessous). Chaque sélecteur reprend celui de la règle desktop
   correspondante, à spécificité égale ou supérieure, afin de gagner la
   cascade sans dépendre d'!important ; ce bloc étant en toute fin de
   fichier, les égalités de spécificité sont tranchées en sa faveur.
   La version desktop n'est pas modifiée (aucune règle existante n'est
   éditée, uniquement de nouvelles règles ajoutées sous ce media query).
   =================================================================== */
@media (max-width:768px){

  /* Filet de sécurité pour tout h1 sans classe dédiée (expertise-data-ia,
     expertise-metier-ia, expertise-technique, formation-initiation-ia,
     page_template). */
  h1{
    font-size:31px;
    line-height:1.2;
  }

  /* Composant partagé .page-title / .page-title-sm : a-propos, approche,
     cas-usages, certifications, contact, formation, diagnostic
     (.diag2-hero-title), R&D (.rd-hero-title), page_template. */
  .page-title,
  .page-title-sm{
    font-size:31px;
    line-height:1.2;
  }

  /* Pages avec un override desktop dédié à .page-title-sm (technique
     "sur une seule ligne" / nowrap plein écran) : sans ces lignes, le
     31px ci-dessus serait battu par leur règle plus spécifique. */
  body.page-contact .page-title-sm,
  body.page-partenaires .page-title-sm,
  body.page-nous-rejoindre .page-title-sm,
  body.page-developpement .page-title-sm{
    font-size:31px;
    line-height:1.2;
  }

  /* Références. */
  .ref-hero-title{
    font-size:31px;
    line-height:1.2;
  }

  /* Conditions d'éligibilité. */
  .elig-title{
    font-size:31px;
    line-height:1.2;
  }

  /* Cas d'usage (cas-usage-*.html). */
  .uc-hero-title{
    font-size:31px;
    line-height:1.2;
  }

  /* Accueil (.hero), et pages avec .page-hero (expertises, réalisations,
     mentions légales, services-ia — cette dernière déjà responsive via
     clamp() mais alignée ici sur la même taille que les autres). */
  .hero-title-text,
  .page-hero:not(.page-hero--services) .hero-title-text,
  .hero .hero-title-text{
    font-size:31px;
    line-height:1.2;
  }
}

/* ===================================================================
   Titres principaux (H1 / Hero) — moins de retours à la ligne en
   MOBILE UNIQUEMENT. Le titre reste centré (option retenue plutôt que
   l'alignement à gauche) : on lui donne juste un peu plus de largeur
   en resserrant légèrement le padding horizontal des conteneurs hero
   partagés (24px/6% → 20px, marge toujours confortable), et on masque
   les <br> placés à la main pour le rendu desktop afin que le texte se
   recasse naturellement au meilleur endroit sur les petits écrans, au
   lieu de forcer une coupure de phrase prématurée. Seuls padding et
   <br> sont touchés : taille de police, typographie, couleurs et
   effets restent ceux définis ailleurs (dont le bloc 31px ci-dessus).
   La version desktop n'est pas modifiée (aucune règle existante
   éditée, uniquement de nouvelles règles ajoutées sous ce media query).
   =================================================================== */
@media (max-width:768px){

  .page-header,
  .hero,
  .page-hero,
  .rd-hero,
  .uc-hero,
  .elig-hero,
  .diag2-hero{
    padding-left:20px;
    padding-right:20px;
  }

  .page-header h1 br,
  .hero h1 br,
  .page-hero h1 br,
  .rd-hero-title br,
  .uc-hero-title br,
  .diag2-hero-title br,
  .elig-title br,
  .ref-hero-title br{
    display:none;
  }
}

/* ===================================================================
   Pages "Cas d'usage" (5 pages, body.page-cas-usage) — refonte de 4
   sections en MOBILE UNIQUEMENT (≤768px). Purement additif : aucune
   règle existante n'est éditée, tout passe par des sélecteurs plus
   spécifiques (préfixe body.page-cas-usage) qui gagnent la cascade
   sans toucher au rendu desktop ni aux autres pages du site.
   =================================================================== */
@media (max-width:768px){

  /* ---------- 3. Titres blancs de section (.uc-intro-head h2) : une
     seule règle déjà partagée par toutes les sections des 5 pages
     (problématique, solution, expertises, bénéfices, synthèse) — donc
     déjà de la même taille (32px) sur desktop. On réduit uniquement
     cette taille pour mobile, ce qui limite les retours à la ligne des
     titres les plus longs (ex. la synthèse) sans rien désynchroniser
     entre les sections. Typographie, poids et couleur inchangés. */
  body.page-cas-usage .uc-intro-head h2{
    font-size:22px;
    line-height:1.25;
  }

  /* ---------- 1. "Fonctionnement de l'outil" (.uc-flow) : grille 2
     colonnes, flèches masquées (remplacées par la disposition en
     grille elle-même), dernier encadré impair centré automatiquement
     grâce à flex-wrap + justify-content:center (aucun besoin de
     connaître la parité à l'avance). ---------- */
  body.page-cas-usage .uc-flow{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:center;
    gap:12px;
    /* Numérotation des étapes (badge ci-dessous), dans l'ordre du DOM =
       ordre de lecture gauche→droite puis ligne suivante en grille 2
       colonnes ; .uc-flow-arrow (masquée) n'est pas comptée. */
    counter-reset:uc-flow-step;
  }

  body.page-cas-usage .uc-flow .uc-flow-arrow{
    display:none;
  }

  body.page-cas-usage .uc-flow-step{
    position:relative;
    counter-increment:uc-flow-step;
    flex:0 0 calc(50% - 6px);
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:normal;
    text-align:center;
    font-size:12.5px;
    line-height:1.35;
    padding:12px 12px;
  }

  /* Petit badge numéroté discret, superposé au coin supérieur gauche de
     chaque encadré, pour rendre l'ordre des étapes évident en grille 2
     colonnes — ne modifie ni le fond, ni la bordure, ni le halo de
     l'encadré lui-même. */
  body.page-cas-usage .uc-flow-step::before{
    content:counter(uc-flow-step);
    position:absolute;
    top:-8px;
    left:-8px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--uc-ring);
    color:var(--uc-bg);
    font-family:var(--font-heading);
    font-weight:700;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 2px var(--uc-bg), 0 0 8px rgba(var(--color-primary-rgb),0.6);
  }

  /* ---------- 2. "Les expertises techniques utilisées"
     (.uc-expertise-diagram) : on conserve le schéma en réseau (nœuds
     positionnés autour du bloc central + lignes SVG), au lieu du
     repli "cercle puis liste verticale" hérité de la règle desktop
     @media(max-width:900px). Tout est mis à l'échelle pour rester
     lisible et compact sur petit écran. ---------- */
  body.page-cas-usage .uc-expertise-diagram{
    display:block;
    flex-direction:row;
    max-width:100%;
    aspect-ratio:340/430;
    gap:0;
  }

  body.page-cas-usage .uc-expertise-diagram--5{
    aspect-ratio:340/520;
  }

  body.page-cas-usage .uc-expertise-lines{
    display:block;
  }

  /* .uc-expertise-center et .uc-expertise-node reprennent tous les deux
     top/left en % + transform:translate(-50%,-50%) pour se centrer sur
     leur point d'ancrage — l'ancienne règle desktop @media(max-width:900px)
     remet "transform:none" (spécificité égale, définie avant ce bloc) ;
     on la neutralise ici avec une sélection plus précise. */
  body.page-cas-usage .uc-expertise-diagram .uc-expertise-center,
  body.page-cas-usage .uc-expertise-diagram .uc-expertise-node{
    transform:translate(-50%, -50%);
  }

  body.page-cas-usage .uc-expertise-center{
    position:absolute;
    width:34%;
    padding:6px;
    /* Encadré carré aux coins arrondis, à la place du cercle desktop. */
    border-radius:var(--radius);
    aspect-ratio:1/1;
  }

  body.page-cas-usage .uc-expertise-diagram--5 .uc-expertise-center{
    top:52%;
  }

  body.page-cas-usage .uc-expertise-center span{
    font-size:11px;
    line-height:1.2;
  }

  body.page-cas-usage .uc-expertise-node{
    position:absolute;
    width:38%;
    max-width:none;
    gap:6px;
    padding:8px 9px;
    border-radius:var(--radius-sm);
  }

  body.page-cas-usage .uc-expertise-diagram--3 .uc-expertise-node{
    width:36%;
  }

  body.page-cas-usage .uc-expertise-diagram--5 .uc-expertise-node{
    width:38%;
  }

  /* Resserre les nœuds latéraux du variant à 5 (--right/--left dépassaient
     du cadre à 81%/19% une fois la largeur mobile appliquée). */
  body.page-cas-usage .uc-expertise-diagram--5 .uc-expertise-node--right{
    left:76%;
  }

  body.page-cas-usage .uc-expertise-diagram--5 .uc-expertise-node--left{
    left:24%;
  }

  body.page-cas-usage .uc-expertise-node span{
    font-size:9.5px;
    line-height:1.25;
  }

  body.page-cas-usage .uc-expertise-icon{
    width:24px;
    height:24px;
    flex:none;
  }

  body.page-cas-usage .uc-expertise-icon::after{
    width:8px;
    height:8px;
  }

  /* ---------- 3. "Les bénéfices pour le client" (.uc-stats) : grille
     2 colonnes, dernier encadré impair centré à largeur identique aux
     autres (même technique flex-wrap que la section 1). ---------- */
  body.page-cas-usage .uc-stats,
  body.page-cas-usage .uc-stats.uc-stats--3{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
  }

  body.page-cas-usage .uc-stat-card{
    flex:0 0 calc(50% - 8px);
    box-sizing:border-box;
    padding:18px 16px;
  }

  body.page-cas-usage .uc-stat-number{
    font-size:20px;
    margin-bottom:8px;
  }

  body.page-cas-usage .uc-stat-text{
    font-size:12.5px;
    line-height:1.5;
  }

  /* ---------- 4. "Synthèse" (.uc-synthesis-row) : 2 encadrés par
     ligne, flèche horizontale conservée entre les deux encadrés d'une
     même ligne, connecteur vertical ajouté entre les lignes (généré
     après chaque 2e élément, sauf le tout dernier). ---------- */
  body.page-cas-usage .uc-synthesis-row{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:36px 12px;
    margin-bottom:24px;
  }

  body.page-cas-usage .uc-synthesis-row > .uc-synthesis-node,
  body.page-cas-usage .uc-synthesis-row > .uc-synthesis-step{
    position:relative;
    flex:0 0 auto;
    width:calc(50% - 6px);
    box-sizing:border-box;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }

  body.page-cas-usage .uc-synthesis-node{
    flex:1;
    white-space:normal;
    text-align:center;
    font-size:11.5px;
    line-height:1.35;
    padding:11px 12px;
  }

  body.page-cas-usage .uc-synthesis-row .uc-flow-arrow{
    transform:none;
    flex:none;
    font-size:16px;
  }

  body.page-cas-usage .uc-synthesis-step{
    gap:8px;
  }

  body.page-cas-usage .uc-synthesis-row > :nth-child(2n):not(:last-child):not(:nth-child(2))::after{
    content:"↓";
    position:absolute;
    left:50%;
    bottom:-26px;
    transform:translateX(-50%);
    color:var(--uc-ring);
    font-size:16px;
    line-height:1;
  }
}

/* ===================================================================
   Accueil — 2 grilles supplémentaires en MOBILE UNIQUEMENT (≤768px) :
   "Pourquoi G2M" (.why-grid, 4 cartes) et "Des projets Data & IA plus
   accessibles" (.funding-grid, 4 logos). Grid (pas flex-wrap) car le
   nombre d'éléments est fixe à 4 dans les deux cas — même choix que
   pour .ref-trust-cards, qui alignait mal les hauteurs de ligne en
   flex-wrap quand le texte d'une carte était plus long. Scopé à
   body.page-home, purement additif, desktop non modifié.
   =================================================================== */
@media (max-width:768px){

  /* ---------- "Pourquoi G2M" (.why-grid) ---------- */
  body.page-home .why-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }

  body.page-home .why-card{
    padding:16px;
  }

  body.page-home .why-card-icon{
    width:44px;
    height:44px;
    margin-bottom:12px;
  }

  body.page-home .why-card-icon svg{
    width:22px;
    height:22px;
  }

  body.page-home .why-card h3{
    font-size:14px;
    margin-bottom:6px;
  }

  body.page-home .why-card p{
    font-size:11.5px;
    line-height:1.45;
  }

  /* ---------- "Des projets Data & IA plus accessibles" (.funding-grid)
     Les logos OPCO/ENE utilisent un cadrage recadré en position
     absolue à valeurs fixes (.funding-logo-zoom + .funding-logo--opco/
     --ene) : on ne touche pas à leur taille pour ne pas désaligner ce
     recadrage, seuls la grille et les espacements changent. ---------- */
  body.page-home .funding-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:32px 8px;
  }

  body.page-home .funding-item{
    padding:0 6px;
  }

  body.page-home .funding-item h3{
    font-size:15px;
  }

  body.page-home .funding-item p{
    font-size:11px;
  }

  /* Bouton "Découvrir les dispositifs de financement" : width:max-content
     (règle .cta-button partagée par tout le site, non modifiée) le
     laissait déborder du cadre sur mobile avec ce texte long. */
  body.page-home .funding-cta{
    width:auto;
    max-width:100%;
    box-sizing:border-box;
    padding:14px 18px;
    font-size:12px;
    white-space:normal;
    text-align:center;
    justify-content:center;
  }
}

/* ===================================================================
   "Nos cas d'usage IA" (cas-usages.html) — accroche introductive sous
   le titre : trop de retours à la ligne en MOBILE UNIQUEMENT (≤768px).
   Les <br> de chaque <span> sont calibrés pour la largeur desktop
   (1300px, cf. body.page-cas-usages .page-header .intro ci-dessus) ;
   sur mobile, ils coupent des phrases déjà bien plus courtes que
   l'espace disponible. Même correctif que pour les H1 : on masque ces
   <br> pour laisser le texte se recasser naturellement, et on réduit
   légèrement la police pour des lignes plus longues et plus fluides.
   Contenu, alignement justifié et reste de la page inchangés.
   =================================================================== */
@media (max-width:768px){
  body.page-cas-usages .page-header .intro br{
    display:none;
  }

  body.page-cas-usages .page-header .intro{
    font-size:15px;
    line-height:1.75;
  }
}

/* ===================================================================
   "À propos de G2M" (a-propos.html) — MOBILE UNIQUEMENT (≤768px).
   Purement additif, scopé à body.page-a-propos. Aucun texte, fond,
   couleur, bordure ou animation existante n'est modifié — uniquement
   tailles et dispositions. Desktop non modifié.
   =================================================================== */
@media (max-width:768px){

  /* ---------- 1. Titres du hero ----------
     body.page-a-propos .page-header--wide h1 (0,2,2) est plus
     spécifique que la réduction mobile sitewide .page-title-sm
     (0,1,0) et l'emporterait sinon, gardant le h1 à 44px sur mobile.
     Même sélecteur ici, réécrit après dans le fichier, pour gagner. */
  body.page-a-propos .page-header--wide h1{
    font-size:28px;
    line-height:1.25;
  }

  body.page-a-propos .hero-tagline--home{
    font-size:20px;
    line-height:1.35;
    margin-bottom:28px;
  }

  /* ---------- 2. Bande blanche des chiffres clés (.stats-row) ----------
     Grille 2x2 conservée jusqu'aux plus petits écrans (au lieu du
     repli 1 colonne existant sous 420px, cf. règle ≤420px ci-dessus
     dans le fichier). Le rotator "établissements" (.stat-rotator,
     js/stat-rotator.js) n'est pas touché : il s'intègre simplement
     dans la 3e cellule de la grille comme les 3 autres. */
  .stats-row{
    padding:48px 16px;
    row-gap:32px;
  }

  .stat-number{
    font-size:clamp(28px, 9vw, 34px);
  }

  .stat-rotator-item{
    font-size:clamp(16px, 5vw, 20px);
  }

  .stat-rotator-item--long{
    font-size:clamp(14px, 4.5vw, 18px);
  }

  .stat-label{
    font-size:10.5px;
  }

  /* ---------- 3 & 4. Cartes profils (équipe + comité scientifique)
     .team-grid/.team-card sont partagées à l'identique par les deux
     sections (aucune classe ne les distingue) : ce bloc s'applique
     donc uniformément aux deux, comme demandé. 2 cartes par ligne,
     largeur identique, dernière carte impaire centrée automatiquement
     (flex-wrap + justify-content:center déjà en place, comportement
     par défaut de .team-grid — inchangé). Hauteur repassée en auto
     (elle était fixe à 380px, pensée pour 1 carte pleine largeur) pour
     éviter tout débordement de contenu à la largeur plus étroite. */
  .team-grid{
    gap:64px 12px;
  }

  .team-card{
    --team-photo-size:92px;
    flex:0 0 calc(50% - 6px);
    width:calc(50% - 6px);
    max-width:172px;
    height:auto;
    min-height:280px;
    padding:calc(var(--team-photo-size) / 2 + 10px) 12px 16px;
  }

  .team-name{
    font-size:14px;
  }

  .team-role{
    font-size:10px;
    white-space:normal;
  }

  .team-divider{
    margin-top:8px;
    margin-bottom:8px;
  }

  .team-expertise{
    font-size:10.5px;
    line-height:1.45;
    max-width:100%;
  }

  .team-link{
    font-size:10.5px;
  }

  /* ---------- Section "Notre équipe" uniquement (4 premières cartes) :
     hauteur compacte, déterminée par ligne (pas une hauteur fixe globale).
     :first-of-type cible le 1er .team-grid (équipe) sans toucher au 2e
     (comité scientifique, exclu). align-items:stretch remplace le
     flex-start par défaut : chaque ligne du flex-wrap étire ses cartes
     à la hauteur de son propre contenu le plus long, sans espace vide
     superflu ; la carte solo de la 3e ligne (Hubert Wadin, pas de
     nth-child(-n+4)) garde sa hauteur naturelle car seule sur sa ligne.
     .team-card garde height:auto (règle de base ci-dessus) pour laisser
     le stretch agir. .team-card-body est déjà flex column (règle de
     base) ; margin-top:auto sur .team-link suffit à le repousser en
     bas de la hauteur étirée. */
  body.page-a-propos .team-grid:first-of-type{
    align-items:stretch;
  }

  body.page-a-propos .team-grid:first-of-type .team-card:nth-child(-n+4) .team-link{
    margin-top:auto;
  }
}