/* ==========================================================================
   JOY Talents — Feuille de style principale
   Charte officielle (Brand Guidelines, avril 2026) :
     Primaire #393FB9 · Secondaire #8090E8 · Clair #C7CFF4
     Très clair #E8ECFB · Sombre #1A1F6E · Blanc #FFFFFF
   Typographie : Montserrat (logotype et titres) + Source Sans 3 (textes).
   Motif structurant : le cercle bissecté du logo, repris comme puce de section.
   ========================================================================== */

:root {
  /* Marque */
  --indigo:        #393FB9;
  --indigo-vif:    #3D4FE1;
  --indigo-fonce:  #1A1F6E;
  --indigo-nuit:   #12154D;
  --periwinkle:    #8090E8;
  --periwinkle-cl: #C7CFF4;
  --brume:         #E3E9FB;   /* bleu très clair, plus présent qu'un simple gris */
  --blanc:         #FFFFFF;

  /* Neutres, légèrement biaisés vers l'indigo */
  --encre:         #14163A;
  --encre-2:       #3A3F63;
  --gris:          #5E6484;
  --gris-clair:    #646986;
  --ligne:         #DDE3F6;
  --ligne-forte:   #C4CCEC;

  /* Typographie */
  --font-titre: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-texte: 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Mesures */
  --wrap:        1240px;
  --wrap-etroit: 720px;
  --r:           12px;
  --r-lg:        20px;
  --section-y:   clamp(2.1rem, 3.8vw, 3.6rem);

  --ombre:      0 1px 2px rgba(20, 22, 58, 0.04), 0 8px 24px rgba(20, 22, 58, 0.05);
  --ombre-fort: 0 2px 4px rgba(20, 22, 58, 0.06), 0 18px 44px rgba(20, 22, 58, 0.10);
}

/* --------------------------------------------------------------------------
   Couleur par offre
   Chaque page produit redéfinit les jetons d'accent : le logotype de
   l'en-tête, les étiquettes, boutons, puces et liens suivent. Les fonds
   sombres (héros, bandeaux, pied de page) gardent l'indigo de marque, de
   sorte que le site reste manifestement le même.
   -------------------------------------------------------------------------- */

.offre-formation {
  --indigo:        #12704F;   /* vert profond — formation, conformité */
  --indigo-vif:    #169B6B;
  --indigo-fonce:  #0C5540;
  --indigo-nuit:   #083B2C;
  --periwinkle:    #4FA383;
  --periwinkle-cl: #9BE0C1;
  --brume:         #EAF7F1;
  --ligne:         #DCEDE5;
  --ligne-forte:   #C3E0D2;
  --motif:         url("/assets/img/motif-cercles-formation.svg");
  --motif-clair:   url("/assets/img/motif-cercles-formation.svg");
}

.offre-paie {
  --indigo:        #9C5A05;   /* ocre — vigilance, échéance */
  --indigo-vif:    #C0740F;
  --indigo-fonce:  #5A3A08;
  --indigo-nuit:   #3C2705;
  --periwinkle:    #B78436;
  --periwinkle-cl: #F0C481;
  --brume:         #FCF3E6;
  --ligne:         #F0E4D1;
  --ligne-forte:   #E3D0B2;
  --motif:         url("/assets/img/motif-cercles-paie.svg");
  --motif-clair:   url("/assets/img/motif-cercles-paie.svg");
}

/* Le pied de page est commun à tout le site : il reste aux couleurs de marque. */
.site-footer {
  --indigo:        #393FB9;
  --indigo-vif:    #3D4FE1;
  --indigo-fonce:  #1A1F6E;
  --indigo-nuit:   #12154D;
  --periwinkle:    #8090E8;
  --periwinkle-cl: #C7CFF4;
  --brume:         #E8ECFB;
  --motif:         url("/assets/img/motif-cercles.svg");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre-2);
  font-family: var(--font-texte);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  color: var(--encre);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.85rem, 4vw, 2.85rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.45rem, 2.7vw, 2.05rem); font-weight: 700; letter-spacing: -0.028em; }
h3 { font-size: clamp(1rem, 1.4vw, 1.13rem); font-weight: 700; }
h4 { font-size: 0.95rem; font-weight: 600; }

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

::selection { background: var(--periwinkle-cl); color: var(--indigo-fonce); }

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--indigo); color: #fff;
  padding: 0.8rem 1.2rem; font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.wrap--etroit { max-width: var(--wrap-etroit); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(1.5rem, 2.6vw, 2.25rem); }
.section--brume { position: relative; overflow: hidden; background: var(--brume); }
.section--brume::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--motif-clair, url("/assets/img/motif-cercles-fonce.svg")) no-repeat left center / cover;
  opacity: 0.5; transform: scaleX(-1); pointer-events: none;
}
.section--brume > .wrap { position: relative; z-index: 1; }
.section--nuit {
  position: relative; overflow: hidden;
  background: var(--indigo-fonce); color: rgba(255,255,255,0.78);
}
.section--nuit::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: var(--motif, url("/assets/img/motif-cercles.svg")) no-repeat left center / cover;
  opacity: 0.5; transform: scaleX(-1); pointer-events: none;
}
.section--nuit > .wrap { position: relative; z-index: 1; }
.section--nuit h2, .section--nuit h3 { color: #fff; }
/* Les cartes restent blanches en section sombre : leurs titres gardent l'encre. */
.section--nuit .card h3, .section--nuit .card h4,
.panneau-doux--nuit .card h3, .panneau-doux--nuit .card h4 { color: var(--encre); }

.section-head { max-width: 60ch; margin-bottom: clamp(1.15rem, 2vw, 1.7rem); }
.section-head--center { margin-inline: auto; text-align: center; }


.lead { font-size: clamp(0.98rem, 1.2vw, 1.08rem); color: var(--gris); line-height: 1.6; }
.section--nuit .lead { color: rgba(255,255,255,0.76); }
.muted { color: var(--gris); }
/* Le gris de .muted est calculé pour le fond blanc : sur fond sombre il tombe
   à 2,5:1. Les sections de nuit ont leur propre valeur. */
.section--nuit .muted, .panneau-doux--nuit .muted { color: rgba(255, 255, 255, 0.74); }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-titre); font-size: 0.88rem; font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0.76rem 1.5rem; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer; text-align: center;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.06s; }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }

.btn--primaire { background: var(--indigo); color: #fff; box-shadow: 0 6px 18px rgba(57, 63, 185, 0.24); }
.btn--primaire:hover { background: var(--indigo-vif); box-shadow: 0 12px 30px rgba(57, 63, 185, 0.42); }

.btn--fantome { border-color: var(--ligne-forte); color: var(--indigo); background: transparent; }
.btn--fantome:hover { border-color: var(--indigo); background: var(--brume); box-shadow: 0 8px 20px rgba(57, 63, 185, 0.16); }

.btn--clair { background: #fff; color: var(--indigo-fonce); }
.btn--clair:hover { background: var(--brume); box-shadow: 0 12px 28px rgba(10, 12, 50, 0.32); }

.btn--contour-clair { border-color: rgba(255,255,255,0.34); color: #fff; }
.btn--contour-clair:hover { border-color: #fff; background: rgba(255,255,255,0.14); box-shadow: 0 10px 24px rgba(10, 12, 50, 0.28); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding-block: 0.35rem; margin-block: -0.35rem;
  font-family: var(--font-titre); font-size: 0.88rem; font-weight: 600;
  color: var(--indigo);
}
.lien-fleche span:last-child { transition: transform 0.2s; }
.lien-fleche:hover span:last-child { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled {
  border-bottom-color: var(--ligne);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 14px rgba(20, 22, 58, 0.05);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 76px;
}

/* Le logotype ne suit jamais la couleur de l'offre : c'est la marque. */
.brand { --indigo: #393FB9; --periwinkle: #8090E8; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
.brand__mark { width: 38px; height: 38px; border-radius: 50%; }
.brand__text {
  font-family: var(--font-titre); font-weight: 800;
  font-size: 1rem; letter-spacing: -0.025em; line-height: 1.05;
  color: var(--indigo);
}
.brand__text span { display: block; color: var(--periwinkle); font-size: 0.94em; }

.nav { display: flex; align-items: center; gap: 0.2rem; }
.nav a {
  position: relative; padding: 0.5rem 0.85rem;
  font-family: var(--font-titre); font-size: 0.82rem; font-weight: 600;
  color: var(--gris); border-radius: 999px; transition: color 0.2s;
}
.nav a:hover { color: var(--indigo); }
.nav a[aria-current="page"] { color: var(--indigo-fonce); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.1rem;
  height: 2px; border-radius: 2px; background: var(--indigo);
}

/* Sélecteur de langue : deux jetons, celui de la langue courante est inerte.
   Placé avant l'appel à l'action, il ne lui vole pas l'attention. */
.langues {
  display: inline-flex; align-items: center; gap: 1px;
  border: 1px solid var(--ligne); border-radius: 999px;
  padding: 2px; margin-left: 0.35rem; background: #fff;
}
.langues__on, .langues__a {
  font-family: var(--font-titre); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em; line-height: 1;
  padding: 0.32rem 0.5rem; border-radius: 999px; text-decoration: none;
}
.langues__on { background: var(--indigo); color: #fff; }
.nav .langues__a { color: var(--gris); transition: background-color 0.2s, color 0.2s; }
.nav .langues__a:hover { background: var(--brume); color: var(--indigo); }
.nav .langues__a::after { display: none; }
.langues__a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.nav a.header-cta {
  margin-left: 0.6rem; padding: 0.62rem 1.35rem;
  color: #fff; background: var(--indigo);
  box-shadow: 0 6px 18px rgba(57, 63, 185, 0.24);
}
.nav a.header-cta:hover { color: #fff; background: var(--indigo-vif); }
.nav a.header-cta::after { display: none; }

.nav-toggle {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--ligne-forte);
  border-radius: 11px; color: var(--indigo-fonce); cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.25s, opacity 0.2s;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; position: relative; }
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--ligne);
    box-shadow: 0 14px 30px rgba(20, 22, 58, 0.08);
    padding: 0.5rem clamp(1.25rem, 5vw, 2.5rem) 1.6rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity 0.22s, transform 0.22s;
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a:not(.langues__a) {
    padding: 0.95rem 0; font-size: 1.02rem;
    border-bottom: 1px solid var(--ligne); border-radius: 0;
  }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { color: var(--indigo); }
  .nav a.header-cta {
    margin: 1.15rem 0 0; padding: 0.9rem 1.35rem;
    border-bottom: 0; border-radius: 999px;
    justify-content: center;
  }

  /* Sur un téléphone, les méga-menus n'ont pas leur place : trois colonnes de
     780 px dans 390 px de large ne se lisent pas. Le menu redevient ce qu'il
     doit être, une liste de destinations. Les sous-entrées restent
     accessibles depuis la page de section elle-même. */
  .nav .nav-groupe { display: block; position: static; }
  .nav-fleche, .nav-menu { display: none !important; }
  .nav .nav-groupe > a { width: 100%; }

  /* Chaque entrée occupe toute la largeur, avec une cible tactile confortable
     et un chevron qui indique qu'elle mène quelque part. */
  .nav a:not(.header-cta):not(.langues__a) {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; padding: 0.85rem 0;
  }
  .nav a:not(.header-cta):not(.langues__a)::after {
    content: ""; display: block; position: static;
    width: 8px; height: 8px; flex: 0 0 auto;
    border: 2px solid var(--ligne-forte); border-left: 0; border-bottom: 0;
    transform: rotate(45deg); opacity: 1; background: none;
  }
  .nav a[aria-current="page"]:not(.header-cta)::after { border-color: var(--indigo); }

  /* Le sélecteur de langue tenait dans une largeur d'entrée : il débordait sur
     lui-même. Il occupe maintenant sa propre ligne. */
  .langues {
    align-self: flex-start; margin: 1.1rem 0 0;
    padding: 3px; flex: 0 0 auto;
  }
  .langues__on, .langues__a { padding: 0.42rem 0.8rem; font-size: 0.76rem; }
}

/* --------------------------------------------------------------------------
   Héros — bandeau indigo profond
   -------------------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  background: var(--indigo-nuit);
  color: rgba(255, 255, 255, 0.80);
  padding-block: clamp(2.25rem, 4.2vw, 3.5rem) clamp(2rem, 3.5vw, 2.85rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1000px 620px at 78% -10%, rgba(128, 144, 232, 0.42), transparent 62%),
    radial-gradient(760px 520px at 8% 108%, rgba(61, 79, 225, 0.40), transparent 66%);
  pointer-events: none;
}
/* Le schéma porte déjà le motif de cercles à droite : le fond décoratif s'y
   ajoutait en double et brouillait la lecture. Il ne couvre plus que la moitié
   gauche, derrière le texte, et s'efface avant d'atteindre le schéma. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: var(--motif, url("/assets/img/motif-cercles.svg")) no-repeat left center / cover;
  -webkit-mask-image: linear-gradient(to right, #000 0 34%, transparent 62%);
          mask-image: linear-gradient(to right, #000 0 34%, transparent 62%);
  opacity: 0.55;
  pointer-events: none;
}
.hero::before { z-index: 0; }
.hero > .wrap { position: relative; z-index: 1; }
.hero__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center;
}
@media (max-width: 900px) {
  .hero__grille { grid-template-columns: minmax(0, 1fr); }
  /* Les aperçus sont décoratifs : sur petit écran ils allongeraient le héros
     sans rien apporter. */
  .constellation { display: none; }
}
.hero h1 { color: #fff; max-width: 17ch; }

/* L'expression clé du titre est portée par une pastille arrondie, qui se
   dévoile de la gauche vers la droite à l'ouverture de la page. */
.hero h1 em {
  font-style: normal; color: var(--indigo-nuit);
  background: var(--periwinkle-cl);
  border-radius: 999px; padding: 0.04em 0.4em 0.13em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: pastille 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}
@keyframes pastille {
  from { clip-path: inset(0 100% 0 0 round 999px); }
  to   { clip-path: inset(0 0 0 0 round 999px); }
}
.hero__lead { max-width: 56ch; color: rgba(255,255,255,0.80); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.5; }
.hero__lead p { margin: 0; }
.hero__lead p + p { margin-top: 0.6rem; }
/* La première phrase porte l'idée : elle passe en clair sur le fond sombre. */
.hero__lead strong { color: #fff; font-weight: 600; }

.hero__baseline {
  font-family: var(--font-titre); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.05em; color: var(--periwinkle-cl);
  margin-top: 1.75rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero__logo { width: clamp(140px, 15vw, 168px); height: auto; margin-bottom: 1.2rem; }

/* --------------------------------------------------------------------------
   Entrées de configuration — illustration de la citation
   -------------------------------------------------------------------------- */

.split--citation { align-items: center; }
.entrees { margin: 0 auto; max-width: 460px; width: 100%; }
.entrees svg { display: block; width: 100%; height: auto; overflow: visible; }

.entrees__b { fill: rgba(255,255,255,0.07); stroke: rgba(255,255,255,0.20); stroke-width: 1; }
.entrees__t { font-family: var(--font-titre); font-size: 14px; font-weight: 700; fill: #fff; }
.entrees__s { font-size: 11.5px; fill: rgba(255,255,255,0.62); }
/* Nos bonnes pratiques entrent au même titre que les autres, mais elles sont
   les nôtres : le cadre porte l'accent de la marque. */
.entrees__b--joy { fill: rgba(128, 144, 232, 0.20); stroke: rgba(199, 207, 244, 0.55); }
/* Le logotype se pose en pastille sur l'angle supérieur droit du cadre : il
   signe l'entrée sans empiéter sur le texte. */
.entrees__socle { fill: #fff; }
.entrees__logo { filter: drop-shadow(0 0 6px rgba(18, 21, 77, 0.7)); }
/* Un court segment remonte chaque flèche, en boucle : ce qui entre dans la
   configuration ne cesse pas d'y entrer. */
.entrees__flux {
  fill: none; stroke: var(--periwinkle-cl); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 16 190; stroke-dashoffset: 206;
  animation: entrees-flux 3.8s linear infinite;
  animation-delay: calc(var(--i) * -0.9s);
}
@keyframes entrees-flux { to { stroke-dashoffset: 0; } }
/* La cible respire au rythme des arrivées. */
.entrees__cible rect { animation: entrees-bat 3.8s ease-in-out infinite; }
@keyframes entrees-bat {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .entrees__flux { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.3; }
  .entrees__cible rect { animation: none; }
}
.entrees__f--joy { opacity: 0.85; }

.entrees__f {
  fill: none; stroke: var(--periwinkle-cl); stroke-width: 1.6; color: var(--periwinkle-cl);
  stroke-dasharray: 150; stroke-dashoffset: 150;
  animation: entree-trace 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.5s + var(--i) * 0.16s);
}
@keyframes entree-trace { to { stroke-dashoffset: 0; } }

.entrees__cible rect { fill: var(--periwinkle-cl); }
.entrees__ct {
  font-family: var(--font-titre); font-size: 13px; font-weight: 700;
  fill: var(--indigo-nuit); text-anchor: middle;
}

.entrees__g {
  opacity: 0; transform: translateX(-10px);
  animation: entree-entre 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.15s + var(--i, 0) * 0.14s);
}
@keyframes entree-entre { to { opacity: 1; transform: none; } }

.entrees figcaption {
  font-size: 0.82rem; color: rgba(255,255,255,0.62);
  line-height: 1.45; margin-top: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .entrees__g { opacity: 1; transform: none; animation: none; }
  .entrees__f { stroke-dashoffset: 0; animation: none; }
}

/* --------------------------------------------------------------------------
   Schéma du héros — le noyau, les familles RH, les flux
   -------------------------------------------------------------------------- */

.hero__schema { width: 100%; }
.noyau { display: block; width: 100%; height: auto; overflow: visible; }

/* Les anneaux de fond tournent lentement, à des vitesses différentes.
   transform-box: fill-box, sinon « center » désigne le centre de la boîte du
   SVG et l'anneau décrit un grand arc au lieu de tourner sur lui-même. */
.noyau__anneau {
  stroke: rgba(199, 207, 244, 0.20); stroke-width: 1.1;
  stroke-dasharray: 190 60; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center;
  animation: noyau-tourne 84s linear infinite;
  animation-duration: calc(46s + var(--i) * 22s);
}
.noyau__anneau:nth-of-type(2) { animation-direction: reverse; stroke-dasharray: 120 300; }
@keyframes noyau-tourne { to { transform: rotate(360deg); } }

/* L'orbite qui porte les trois activités : pointillée, elle tourne à contresens
   des anneaux de fond, assez lentement pour qu'on la devine plus qu'on la voie. */
.noyau__orbite {
  stroke: rgba(199, 207, 244, 0.34); stroke-width: 1.2; stroke-dasharray: 3 7;
  transform-box: fill-box; transform-origin: center;
  animation: noyau-tourne 120s linear infinite reverse;
}

.noyau__fil { fill: none; stroke: rgba(199, 207, 244, 0.22); stroke-width: 1.4; }
.noyau__pt { fill: var(--periwinkle-cl); opacity: 0.75; }

/* Le flux : un court segment qui parcourt la liaison, dans un sens ou dans
   l'autre selon le côté. C'est ce qui donne le mouvement d'ensemble. */
.noyau__flux {
  fill: none; stroke: var(--periwinkle-cl); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 18 208; stroke-dashoffset: 226;
  animation: flux 6s linear infinite;
  animation-delay: calc(var(--i) * -0.5s);
}
.noyau__flux--r { animation-name: flux-retour; }
@keyframes flux        { to { stroke-dashoffset: 0; } }
@keyframes flux-retour { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 226; } }

.noyau__fam {
  font-family: var(--font-titre); font-size: 11px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  fill: var(--periwinkle-cl);
}
.noyau__fam--paie { fill: #F8CA92; text-anchor: end; }
.noyau__fam--haut { text-anchor: middle; fill: #fff; }

.noyau__n text {
  font-family: var(--font-titre); font-size: 12.5px; font-weight: 600; fill: #fff;
}
.noyau__ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Une couleur par famille : les domaines talents en périvenche, l'administration
   et la paie en ocre (la couleur de l'offre Cockpit Paie), ce que nous réalisons
   en indigo plein. Les fonds restent légers, ce sont les contours qui portent
   la couleur : à plat sur le bleu nuit, l'ocre virait au brun. */
.noyau__n rect { stroke-width: 1; }
.noyau__n--talent rect { fill: rgba(128, 144, 232, 0.22); stroke: rgba(176, 190, 250, 0.85); }
.noyau__n--talent .noyau__ic { color: var(--periwinkle-cl); }
.noyau__n--paie   rect { fill: rgba(240, 176, 90, 0.15);  stroke: rgba(248, 202, 146, 0.90); }
.noyau__n--paie   .noyau__ic { color: #F8CA92; }
.noyau__n--fait   rect { fill: rgba(61, 79, 225, 0.58);   stroke: rgba(214, 220, 250, 0.85); }
.noyau__n--fait   .noyau__ic { color: #fff; }

/* Les trois activités, posées sur l'orbite. */
.noyau__acte-d {
  fill: rgba(24, 28, 92, 0.92); stroke: rgba(199, 207, 244, 0.5); stroke-width: 1.2;
}
.noyau__acte .noyau__ic { color: var(--periwinkle-cl); }
.noyau__acte-t {
  font-family: var(--font-titre); font-size: 9.6px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; text-anchor: middle;
  fill: #fff;
}

/* Le halo du centre est porté par le logotype lui-même : il ne peut plus s'en
   détacher, contrairement au disque distinct qu'il remplace. */
/* Fond blanc franc sous le logotype : sa moitié claire se détachait mal du
   bleu nuit. */
.noyau__socle { fill: #fff; }
.noyau__logo { filter: drop-shadow(0 0 12px rgba(199, 207, 244, 0.55)); }
/* Socle et logo ne font qu'un : c'est le groupe qui bat, lentement, et deux
   ondes discrètes en partent vers les pastilles. */
.noyau__coeur { animation: noyau-bat 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes noyau-bat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.noyau__onde {
  stroke: var(--periwinkle-cl); stroke-width: 1.4; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: noyau-onde 6s ease-out infinite;
  animation-delay: calc(var(--i) * 3s);
}
@keyframes noyau-onde {
  0%   { transform: scale(0.95); opacity: 0; }
  10%  { opacity: 0.35; }
  100% { transform: scale(2.1); opacity: 0; }
}
.noyau__pastille-logo { filter: drop-shadow(0 0 5px rgba(18, 21, 77, 0.6)); }

/* Les pastilles arrivent l'une après l'autre à l'ouverture de la page, puis
   leur contour respire doucement, chacune à son tour. */
.noyau__n, .noyau__acte {
  opacity: 0; transform: translateY(8px);
  animation: noyau-entre 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.25s + var(--i) * 0.06s);
}
.noyau__acte { animation-delay: calc(0.85s + var(--i) * 0.12s); }
@keyframes noyau-entre { to { opacity: 1; transform: none; } }
.noyau__n rect {
  animation: noyau-respire 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
@keyframes noyau-respire {
  0%, 100% { stroke-opacity: 0.65; }
  50%      { stroke-opacity: 1; }
}

@media (max-width: 900px) { .hero__schema { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .noyau__flux { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; opacity: 0.35; }
  .noyau__n { opacity: 1; transform: none; animation: none; }
  .noyau__n rect, .noyau__anneau, .noyau__orbite { animation: none; }
  .noyau__acte { opacity: 1; transform: none; animation: none; }
  .noyau__coeur { animation: none; }
  .noyau__onde { display: none; }
}

/* --------------------------------------------------------------------------
   Constellation — aperçus d'interface flottants reliés par des courbes
   -------------------------------------------------------------------------- */

.constellation { position: relative; width: 100%; max-width: 440px; aspect-ratio: 420 / 380; margin-inline: auto; }
.constellation__fils { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.constellation .fil {
  fill: none; stroke: rgba(199, 207, 244, 0.85); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: var(--long); stroke-dashoffset: var(--long);
  animation: fil-trace 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}
.constellation .fil-pt {
  fill: var(--periwinkle-cl); opacity: 0;
  animation: pt-surgit 0.4s ease 1.1s forwards;
}
@keyframes fil-trace { to { stroke-dashoffset: 0; } }
@keyframes pt-surgit { to { opacity: 1; } }

.constellation .frag {
  position: absolute; opacity: 0;
  box-shadow: 0 20px 44px rgba(8, 10, 42, 0.42);
  animation: frag-entre 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             frag-flotte 8s ease-in-out infinite;
}
.frag--c1 { left: 0;    top: 0;      width: 62%; animation-delay: 0.35s, 1.5s; }
.frag--c2 { right: 0;   top: 38%;    width: 55%; animation-delay: 0.50s, 2.4s; }
.frag--c3 { left: 4%;   bottom: 2%;  width: 64%; animation-delay: 0.65s, 3.3s; }
@keyframes frag-entre {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes frag-flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 em { animation: none; }
  .constellation .fil { stroke-dashoffset: 0; animation: none; }
  .constellation .fil-pt { opacity: 1; animation: none; }
  .constellation .frag { opacity: 1; transform: none; animation: none; }
}

/* En-tête de page intérieure */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(175deg, var(--periwinkle-cl) -40%, var(--brume) 55%);
  border-bottom: 1px solid var(--ligne);
  padding-block: clamp(1.85rem, 3.2vw, 2.75rem) clamp(1.4rem, 2.4vw, 2rem);
}
.page-hero::before {
  content: ""; position: absolute; top: -55%; right: -8%;
  width: min(620px, 85vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(128, 144, 232, 0.28), transparent 62%);
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: var(--motif-clair, url("/assets/img/motif-cercles-fonce.svg")) no-repeat right center / cover;
  pointer-events: none;
}
.page-hero::before { z-index: 0; }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 19ch; }
.page-hero .lead { max-width: 60ch; }

/* --------------------------------------------------------------------------
   Chiffres
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Orbite — l'IA au centre, services et solutions autour
   -------------------------------------------------------------------------- */

.orbite-bloc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center;
}
@media (max-width: 980px) { .orbite-bloc { grid-template-columns: minmax(0, 1fr); } }

.orbite { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin-inline: auto; }
/* L'orbite à trois métiers de l'accueil est moins haute : le noyau descend d'autant. */
.orbite--trois { aspect-ratio: 500 / 430; }
.orbite--trois .orbite__ia { top: 58.14%; }
.orbite__fils { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbite__anneau {
  stroke: var(--ligne-forte); stroke-width: 1.5; stroke-dasharray: 3 10;
  transform-box: fill-box; transform-origin: center;
  animation: tourne 40s linear infinite;
}
.orbite__fil {
  stroke: var(--ligne-forte); stroke-width: 2; stroke-linecap: round;
  transition: stroke 0.25s ease, stroke-width 0.25s ease;
}
/* Sur un cycle, un court segment part du noyau vers chaque étape, l'une après
   l'autre : la roue se lit dans l'ordre du projet sans qu'on ait à le dire. */
.orbite__flux {
  stroke: var(--indigo-vif); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 14 200; stroke-dashoffset: 214;
  animation: orbite-flux 5.4s linear infinite;
  animation-delay: calc(var(--i) * -0.9s);
}
@keyframes orbite-flux { 40%, 100% { stroke-dashoffset: 100; } }
@media (prefers-reduced-motion: reduce) { .orbite__flux { display: none; } }

/* Le trait qui mène au point choisi s'allume. */
.orbite-bloc[data-actif="1"] .orbite__fil[data-i="1"],
.orbite-bloc[data-actif="2"] .orbite__fil[data-i="2"],
.orbite-bloc[data-actif="3"] .orbite__fil[data-i="3"],
.orbite-bloc[data-actif="4"] .orbite__fil[data-i="4"],
.orbite-bloc[data-actif="5"] .orbite__fil[data-i="5"],
.orbite-bloc[data-actif="6"] .orbite__fil[data-i="6"] { stroke: var(--indigo); stroke-width: 3; }

/* Le noyau : l'IA, premier onglet, sélectionné par défaut. */
.orbite__ia {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 124px; height: 124px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 0.1rem;
  border: 0; cursor: pointer; padding: 0;
  background: linear-gradient(145deg, var(--indigo-vif, var(--indigo)), var(--indigo-nuit));
  box-shadow: 0 10px 30px rgba(20, 22, 58, 0.26);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.orbite__ia:hover { transform: translate(-50%, -50%) scale(1.05); }
.orbite__ia[aria-selected="true"] { box-shadow: 0 0 0 6px var(--brume), 0 12px 34px rgba(20, 22, 58, 0.3); }
.orbite__ia-t { font-family: var(--font-titre); font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: 0.02em; }
.orbite__ia-s { font-family: var(--font-titre); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.07em; color: var(--periwinkle-cl); }

/* Les six satellites, posés sur l'orbite. */
.orbite__n {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.45rem;
  width: 150px; padding: 0.45rem 0.6rem; cursor: pointer;
  background: #fff; border: 1px solid var(--ligne); border-radius: 999px;
  font-family: var(--font-titre); font-size: 0.76rem; font-weight: 600;
  color: var(--encre-2); text-align: left; line-height: 1.15;
  box-shadow: 0 2px 8px rgba(20, 22, 58, 0.06);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease,
              transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.orbite__n:hover { border-color: var(--periwinkle); }
.orbite__n[aria-selected="true"] {
  border-color: var(--indigo); color: var(--indigo);
  box-shadow: 0 8px 22px rgba(57, 63, 185, 0.20);
  transform: translate(-50%, -50%) scale(1.05);
}
.orbite__ic {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--brume); color: var(--indigo);
  transition: background-color 0.22s ease, color 0.22s ease;
}
.orbite__ic svg { width: 14px; height: 14px; }
.orbite__n[aria-selected="true"] .orbite__ic { background: var(--indigo); color: #fff; }
.orbite__ia:focus-visible, .orbite__n:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* Le panneau de droite. Une hauteur minimale évite que la page ne saute
   quand on passe d'un point à l'autre. */
.orbite__panneaux { min-height: 250px; }
.orbite__pan { animation: feuillet-ouvre 0.38s cubic-bezier(0.16, 1, 0.3, 1); }
.orbite__pan .activite__num { display: block; margin-bottom: 0.3rem; }
.orbite__pan h3 { font-size: clamp(1.1rem, 1.9vw, 1.35rem); margin: 0 0 0.5rem; }
.orbite__pan > p { font-size: 0.93rem; color: var(--gris); line-height: 1.6; margin: 0 0 0.9rem; }
.orbite__pan .lien-fleche { margin-top: 0.9rem; }

/* Sans JavaScript, les sept panneaux se lisent à la suite et l'orbite n'est
   qu'un dessin : les boutons ne feraient que dérouter. */
.orbite { display: none; }
.js .orbite { display: block; }

@media (max-width: 560px) {
  .orbite__n { width: 132px; font-size: 0.7rem; padding: 0.38rem 0.5rem; }
  .orbite__ia { width: 100px; height: 100px; }
  .orbite__ia-t { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .orbite__anneau { animation: none; }
  .orbite__pan { animation: none; }
  .orbite__n, .orbite__ia { transition: none; }
}

/* --------------------------------------------------------------------------
   Feuillets — un domaine à la fois, sans allonger la page
   -------------------------------------------------------------------------- */

/* Sans JavaScript, la barre d'onglets ne sert à rien : elle reste masquée et
   les panneaux s'affichent tous, à la suite. */
.feuillets__onglets { display: none; }
.feuillets--actifs .feuillets__onglets {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
}
.feuillet__ong {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-titre); font-size: 0.82rem; font-weight: 600;
  color: var(--encre-2); background: #fff;
  border: 1px solid var(--ligne); border-radius: 999px;
  padding: 0.48rem 1rem 0.48rem 0.7rem; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.feuillet__n {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--indigo);
}
.feuillet__ong:hover { border-color: var(--ligne-forte); }
.feuillet__ong[aria-selected="true"] {
  background: var(--indigo); border-color: var(--indigo); color: #fff;
}
.feuillet__ong[aria-selected="true"] .feuillet__n { color: rgba(255, 255, 255, 0.88); }
.feuillet__ong:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Le panneau qui prend la place se déplie plutôt que d'apparaître d'un bloc. */
.feuillets--actifs .feuillet { animation: feuillet-ouvre 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes feuillet-ouvre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Empilés, les domaines portaient un filet de séparation ; en feuillets, non. */
.feuillets--actifs .feuillet { border-top: 0; padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .feuillets--actifs .feuillet { animation: none; }
}

/* --------------------------------------------------------------------------
   Avant / après — la même clôture, pilotée de deux façons
   -------------------------------------------------------------------------- */

.avap {
  display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  gap: clamp(0.8rem, 1.8vw, 1.2rem); align-items: stretch;
}
@media (max-width: 860px) {
  .avap { grid-template-columns: minmax(0, 1fr); }
  .avap__fleche { transform: rotate(90deg); justify-self: center; }
}
.avap__c {
  border: 1px solid var(--ligne); border-radius: 14px;
  padding: 1.05rem 1.1rem 1.15rem; background: #fff;
}
.avap__c--avant { background: #FAFAFB; }
.avap__c--apres { background: var(--brume); border-color: var(--ligne-forte); }
.avap__t {
  display: block; font-family: var(--font-titre); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; margin-bottom: 0.8rem;
}
.avap__c--avant .avap__t { color: var(--gris); }
.avap__c--apres .avap__t { color: var(--indigo); }
.avap__ill {
  background: #fff; border: 1px solid var(--ligne); border-radius: 10px;
  padding: 0.6rem 0.65rem 0.5rem; margin-bottom: 0.9rem;
}
.tab__nom {
  display: block; margin-top: 0.5rem;
  font-size: 0.63rem; color: var(--gris); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Le tableur : des lignes de cellules grises, dont une en cours de saisie. */
.tab { display: grid; gap: 3px; }
.tab__l { display: grid; grid-template-columns: 1.6fr 1fr 1fr 0.7fr; gap: 3px; }
.tab__l i { height: 11px; border-radius: 2px; background: #EDEEF3; }
.tab__l--e i { background: #DDDFE8; }
.tab__l i.w { background: #E4E5EC; }
.tab__l i.v { background: #F4F5F8; }
.tab__l i.c { background: #E8E9F0; }
.tab__l--modif i { outline: 1.5px solid var(--periwinkle); outline-offset: 1px; }

/* Le poste de pilotage : un avancement, puis des tâches avec leur état. */
.pilo { display: grid; gap: 0.3rem; }
.pilo__h { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.66rem; color: var(--gris); }
.pilo__h b { font-family: var(--font-titre); font-size: 0.86rem; color: var(--indigo); }
.pilo__j { height: 5px; border-radius: 3px; background: var(--ligne); overflow: hidden; margin-bottom: 0.25rem; }
.pilo__j span { display: block; height: 100%; background: var(--indigo); border-radius: 3px; }
.pilo__r {
  display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 0.4rem;
  font-size: 0.66rem; color: var(--encre-2);
}
.pilo__r i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ligne-forte); }
.pilo__r i.ok { background: var(--indigo); border-color: var(--indigo); }
.pilo__r i.en { background: linear-gradient(to right, var(--indigo) 0 50%, #fff 50% 100%); border-color: var(--indigo); }
.pilo__r em { font-style: normal; font-size: 0.6rem; color: var(--gris); font-variant-numeric: tabular-nums; }

.avap__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.42rem; }
.avap__l li {
  position: relative; padding-left: 1.15rem;
  font-size: 0.84rem; line-height: 1.45; color: var(--gris);
}
.avap__l li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 8px; height: 8px; border-radius: 2px;
}
.avap__c--avant .avap__l li::before { background: #C9CCD8; }
.avap__c--apres .avap__l li::before { background: var(--indigo); }

.avap__fleche { display: grid; place-items: center; }
.avap__fleche span {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  background: var(--indigo); position: relative;
}
.avap__fleche span::before {
  content: ""; position: absolute; left: 9px; top: 8px;
  width: 7px; height: 7px; border: solid #fff; border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Planning — calendrier type d'un déploiement de module
   -------------------------------------------------------------------------- */

.planning-tete { margin-top: clamp(2rem, 3.4vw, 2.9rem); max-width: var(--wrap-etroit); }
.planning-tete h3 { font-size: clamp(1.05rem, 1.7vw, 1.22rem); margin: 0 0 0.4rem; }
.planning-tete p { font-size: 0.9rem; color: var(--gris); line-height: 1.55; margin: 0; }

.planning { margin-top: 1.1rem; }
/* Douze semaines ne tiennent pas sur un téléphone : la grille défile dans son
   propre cadre, jamais la page. */
.planning__defile {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ligne); border-radius: 14px; background: #fff;
  padding: 0.9rem 1rem 1rem;
}
.planning__grille {
  display: grid;
  grid-template-columns: minmax(168px, 200px) repeat(12, minmax(42px, 1fr));
  align-items: center; column-gap: 0; row-gap: 0.32rem;
  min-width: 660px;
}
.planning__coin { }
.planning__sem {
  font-family: var(--font-titre); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--indigo); text-align: center;
  padding-bottom: 0.4rem;
}
.planning__grp {
  font-family: var(--font-titre); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--indigo);
  padding: 0.7rem 0 0.3rem;
  border-top: 1px solid var(--ligne);
}
.planning__grille > .planning__grp:first-of-type { border-top: 0; padding-top: 0.2rem; }
.planning__lbl {
  font-size: 0.79rem; color: var(--encre-2); line-height: 1.25;
  padding-right: 0.8rem;
}
.planning__lbl--j {
  font-family: var(--font-titre); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--indigo);
}
/* Fond rayé : une bande claire par semaine, pour situer les barres. */
.planning__piste {
  height: 22px; border-radius: 5px;
  background: repeating-linear-gradient(to right,
    var(--brume) 0, var(--brume) calc(100% / 12 - 2px),
    transparent calc(100% / 12 - 2px), transparent calc(100% / 12));
}
.planning__piste--j { background: none; border-top: 1px dashed var(--ligne-forte); height: 1px; margin-top: 0.9rem; }

.barre {
  height: 22px; border-radius: 5px; display: flex; align-items: center;
  padding: 0 0.45rem; overflow: hidden;
  transform: scaleX(0); transform-origin: left center;
}
.barre span {
  font-family: var(--font-titre); font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.03em; white-space: nowrap; opacity: 0;
}
.barre--a { background: var(--indigo); }
.barre--a span { color: #fff; }
.barre--b { background: var(--periwinkle); }
.barre--b span { color: #fff; }
.barre--c { background: var(--periwinkle-cl); }
.barre--c span { color: var(--indigo-fonce); }

.jalon { display: grid; place-items: center; transform: scale(0); }
.jalon i {
  width: 13px; height: 13px; background: var(--indigo-nuit);
  transform: rotate(45deg); border-radius: 2px;
  box-shadow: 0 0 0 3px #fff;
}
.jalon span {
  margin-top: 0.35rem; text-align: center;
  font-family: var(--font-titre); font-size: 0.54rem; font-weight: 700;
  color: var(--encre-2); line-height: 1.2; white-space: nowrap;
}

/* Les barres se déroulent de gauche à droite, dans l'ordre du calendrier,
   puis les jalons se posent dessus. */
.is-visible .barre { animation: barre-pousse 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.is-visible .barre span { animation: barre-texte 0.4s ease 0.3s forwards; }
.is-visible .jalon { animation: jalon-pose 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes barre-pousse { to { transform: scaleX(1); } }
@keyframes barre-texte  { to { opacity: 1; } }
@keyframes jalon-pose   { to { transform: scale(1); } }

.planning__leg {
  list-style: none; margin: 0.85rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem;
  font-size: 0.78rem; color: var(--gris);
}
.planning__leg li { display: inline-flex; align-items: center; gap: 0.42rem; }
.pl { width: 13px; height: 9px; border-radius: 3px; flex: none; }
.pl--a { background: var(--indigo); }
.pl--b { background: var(--periwinkle); }
.pl--c { background: var(--periwinkle-cl); }
.pl--j { width: 10px; height: 10px; border-radius: 2px; background: var(--indigo-nuit); transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .barre, .is-visible .barre { transform: scaleX(1); animation: none; }
  .barre span, .is-visible .barre span { opacity: 1; animation: none; }
  .jalon, .is-visible .jalon { transform: none; animation: none; }
}

/* --------------------------------------------------------------------------
   Menus déroulants de la navigation
   -------------------------------------------------------------------------- */

.nav-groupe { position: relative; display: flex; align-items: center; }
.nav-groupe { --menu-l: min(780px, calc(100vw - 3rem)); }
/* Tant que le script n'a pas pris la main, ni flèche ni menu. */
.nav-fleche, .nav-menu { display: none; }
.a-menus .nav-fleche {
  display: grid; place-items: center;
  width: 18px; height: 18px; margin-left: -0.35rem;
  border: 0; background: none; cursor: pointer; padding: 0;
}
.nav-fleche span {
  display: block; width: 6px; height: 6px;
  border: solid var(--gris); border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.nav-groupe.est-ouvert .nav-fleche span {
  transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--indigo);
}

/* Le panneau prend toute la largeur de l'en-tête : c'est ce qui permet
   l'intro à gauche et les colonnes d'entrées à droite. */
/* Le pont fait la largeur du panneau : sinon, descendre en diagonale vers une
   entrée éloignée fait sortir le pointeur du groupe. */
.a-menus .nav-groupe.est-ouvert::after {
  content: ""; position: absolute; left: -0.6rem;
  width: var(--menu-l); top: 100%; height: 0.9rem; z-index: 29;
}
.a-menus .nav-groupe.est-ouvert .nav-menu {
  --menu-l: min(780px, calc(100vw - 3rem));
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1rem, 2.4vw, 1.9rem);
  position: absolute; top: calc(100% + 0.7rem); left: -0.6rem;
  width: var(--menu-l); z-index: 30;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: #fff; border: 1px solid var(--ligne);
  border-radius: 16px; box-shadow: 0 24px 56px rgba(20, 22, 58, 0.16);
  animation: menu-ouvre 0.2s ease;
}
@keyframes menu-ouvre { from { opacity: 0; transform: translateY(-6px); } }

.a-menus .nav-groupe:last-of-type.est-ouvert .nav-menu,
.a-menus .nav-groupe:last-of-type.est-ouvert::after {
  left: auto; right: -0.6rem;
}

.nav-menu__intro {
  padding-right: clamp(1rem, 2.4vw, 2rem);
  border-right: 1px solid var(--ligne);
  display: flex; flex-direction: column;
}
.nav-menu__t {
  font-family: var(--font-titre); font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--encre);
  margin: 0 0 0.5rem;
}
.nav-menu__p { font-size: 0.87rem; color: var(--gris); line-height: 1.55; margin: 0 0 1.1rem; }
.nav-menu__cta { margin-top: auto; font-size: 0.86rem; }

.nav-menu__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.8rem); }
.nav-menu__gr {
  font-family: var(--font-titre); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--indigo);
  padding-bottom: 0.5rem; margin: 0 0 0.55rem;
  border-bottom: 1px solid var(--ligne);
}
.nav-menu__cols a {
  display: grid; grid-template-columns: 34px 1fr; gap: 0.65rem; align-items: start;
  padding: 0.5rem; margin: 0 -0.5rem; border-radius: 10px;
  text-decoration: none; color: var(--gris);
}
.nav-menu__ic {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--brume); color: var(--indigo);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-menu__ic svg { width: 17px; height: 17px; }
.nav-menu__cols a b {
  display: block; font-family: var(--font-titre); font-size: 0.87rem;
  font-weight: 600; color: var(--encre); margin-bottom: 0.1rem;
}
.nav-menu__cols a span:last-child { font-size: 0.79rem; line-height: 1.4; display: block; }
/* L'audit est une demande, pas une page de plus : il se distingue. */
.nav-menu__a--fort { background: #FFF6E9; box-shadow: inset 0 0 0 1px #F0DCBC; }
.nav-menu__a--fort .nav-menu__ic { background: #FBEBD4; color: #9C5A05; }
.nav-menu__a--fort b { color: #9C5A05; }
.nav-menu__a--fort:hover, .nav-menu__a--fort:focus-visible { background: #FBEBD4; }
.nav-menu__a--fort:hover .nav-menu__ic, .nav-menu__a--fort:focus-visible .nav-menu__ic { background: #9C5A05; color: #fff; }
.nav-menu__a--fort:hover b, .nav-menu__a--fort:focus-visible b { color: #9C5A05; }

.nav-menu__cols a:hover, .nav-menu__cols a:focus-visible { background: var(--brume); }
.nav-menu__cols a:hover b, .nav-menu__cols a:focus-visible b { color: var(--indigo); }
.nav-menu__cols a:hover .nav-menu__ic, .nav-menu__cols a:focus-visible .nav-menu__ic {
  background: var(--indigo); color: #fff;
}

/* Au format téléphone, la navigation est déjà une pile : le panneau se
   déroule en place, en une seule colonne. */
@media (max-width: 900px) {
  .nav-groupe { position: relative; flex-wrap: wrap; width: 100%; }
  .a-menus .nav-groupe.est-ouvert::after { display: none; }
  .a-menus .nav-groupe.est-ouvert .nav-menu {
    position: static; grid-template-columns: minmax(0, 1fr); gap: 1rem;
    box-shadow: none; border: 0; border-left: 2px solid var(--ligne-forte);
    border-radius: 0; margin: 0.3rem 0 0.5rem 0.6rem; padding: 0.2rem 0 0.2rem 0.7rem;
    animation: none;
  }
  .nav-menu__intro { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--ligne); padding-bottom: 0.9rem; }
  .nav-menu__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .a-menus .nav-groupe.est-ouvert .nav-menu { animation: none; }
  .nav-fleche span { transition: none; }
}

/* --------------------------------------------------------------------------
   Engagements — le bloc qui clôt l'approche
   -------------------------------------------------------------------------- */

.engagement {
  margin-top: clamp(1.4rem, 2.8vw, 2.2rem);
  background: var(--indigo-nuit); color: rgba(255,255,255,0.84);
  border-radius: clamp(16px, 2vw, 22px);
  padding: clamp(1.4rem, 2.8vw, 2.1rem);
}
.engagement__t {
  font-family: var(--font-titre); font-weight: 700; color: #fff;
  font-size: clamp(1.05rem, 1.9vw, 1.28rem); margin: 0 0 1rem;
}
.engagement__l {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem clamp(1.2rem, 2.4vw, 2rem);
}
@media (max-width: 760px) { .engagement__l { grid-template-columns: minmax(0, 1fr); } }
.engagement__l li {
  position: relative; padding-left: 1.2rem;
  font-size: 0.9rem; line-height: 1.55;
}
.engagement__l li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(to bottom, #fff 0 50%, var(--periwinkle-cl) 50% 100%);
}
.engagement__l strong { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   Carte du monde schématique — bloc International
   -------------------------------------------------------------------------- */

.mappe-cadre { margin: 1.4rem 0 0; }
.mappe { display: block; width: 100%; height: auto; }
.mappe__p { fill: var(--ligne-forte); }
/* Les pays suivis pulsent doucement, l'un après l'autre. */
.mappe__h {
  fill: var(--indigo);
  transform-box: fill-box; transform-origin: center;
  animation: mappe-pulse 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.32s);
}
@keyframes mappe-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.45); opacity: 1; }
}
.mappe-cadre figcaption {
  font-size: 0.8rem; color: var(--gris); line-height: 1.45;
  margin-top: 0.5rem; max-width: 52ch;
}
@media (prefers-reduced-motion: reduce) { .mappe__h { animation: none; } }

/* --------------------------------------------------------------------------
   Appel à l'action encadré — l'audit Cornerstone
   -------------------------------------------------------------------------- */

.appel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 0.44fr);
  gap: clamp(1.2rem, 2.6vw, 2.2rem); align-items: center;
  background: var(--brume); border: 1px solid var(--ligne-forte);
  border-radius: clamp(16px, 2vw, 22px);
  padding: clamp(1.3rem, 2.6vw, 2rem);
}
@media (max-width: 820px) { .appel { grid-template-columns: minmax(0, 1fr); } }
.appel__t { font-size: clamp(1.15rem, 2.1vw, 1.5rem); margin: 0 0 0.55rem; }
.appel__p { font-size: 0.9rem; color: var(--gris); line-height: 1.6; margin: 0 0 0.9rem; max-width: 62ch; }
.appel__l {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem;
}
@media (max-width: 560px) { .appel__l { grid-template-columns: minmax(0, 1fr); } }
.appel__l li {
  position: relative; padding-left: 1.05rem;
  font-size: 0.85rem; color: var(--encre-2); line-height: 1.4;
}
.appel__l li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--indigo);
}
.appel__act { display: grid; gap: 0.7rem; justify-items: start; }
.appel__note { font-size: 0.79rem; color: var(--gris); line-height: 1.45; margin: 0; }

/* Le sujet arrivé par l'URL est signalé, pour que le visiteur voie qu'il a
   déjà été choisi pour lui. */
.est-prerempli { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--brume); }

/* --------------------------------------------------------------------------
   Pages d'accueil et espaces — l'offre et sa maquette
   -------------------------------------------------------------------------- */

.pages-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start;
}
@media (max-width: 900px) { .pages-grille { grid-template-columns: minmax(0, 1fr); } }

.pages-liste { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.85rem; }
.pages-liste li { display: grid; grid-template-columns: 34px 1fr; gap: 0.7rem; align-items: start; }
.pages-liste__ic {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--brume); color: var(--indigo);
}
.pages-liste__ic svg { width: 17px; height: 17px; }
.pages-liste b {
  display: block; font-family: var(--font-titre); font-size: 0.95rem;
  color: var(--encre); margin-bottom: 0.15rem;
}
.pages-liste div { font-size: 0.86rem; color: var(--gris); line-height: 1.5; }
/* Le composant est né sur fond blanc : sur fond sombre, il faut inverser
   l'encre, sinon le texte disparaît. */
.section--nuit .pages-liste b { color: #fff; }
.section--nuit .pages-liste div { color: rgba(255, 255, 255, 0.74); }
.section--nuit .pages-liste__ic { background: rgba(255, 255, 255, 0.10); color: var(--periwinkle-cl); }

/* La maquette de page d'accueil : cadre, bandeau d'accueil, tuiles d'entrée,
   deux encarts. Décorative, donc retirée de l'arbre d'accessibilité. */
.pa-maq { margin: 0; }
.pa-maq__barre {
  display: flex; align-items: center; gap: 5px;
  padding: 0.55rem 0.85rem; background: var(--indigo-nuit);
  border-radius: 12px 12px 0 0;
}
.pa-maq__corps {
  background: #fff; border: 1px solid var(--ligne-forte); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 0.75rem; display: grid; gap: 0.7rem;
}
.pa-maq__hero {
  border-radius: 9px; padding: 1.15rem 1.1rem;
  background: linear-gradient(135deg, var(--indigo-nuit), var(--indigo));
  position: relative; overflow: hidden;
}
.pa-maq__hero::after {
  content: ""; position: absolute; right: -30px; top: -60px;
  width: 190px; height: 190px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
}
.pa-maq__bj { display: block; font-family: var(--font-titre); font-weight: 800; font-size: 1.05rem; color: #fff; }
.pa-maq__sj { display: block; font-size: 0.74rem; color: var(--periwinkle-cl); margin-top: 0.15rem; }

.pa-maq__tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
.pa-tuile {
  display: grid; justify-items: center; gap: 0.35rem; text-align: center;
  padding: 0.65rem 0.35rem; border-radius: 9px;
  border: 1px solid var(--ligne); background: #FBFCFF; color: var(--indigo);
}
.pa-tuile svg { width: 18px; height: 18px; }
.pa-tuile span {
  font-family: var(--font-titre); font-size: 0.58rem; font-weight: 700;
  color: var(--encre-2); line-height: 1.2;
}
.pa-tuile--on { background: var(--brume); border-color: var(--periwinkle); }

.pa-maq__bas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.pa-bloc { border: 1px solid var(--ligne); border-radius: 9px; padding: 0.55rem 0.6rem; }
.pa-bloc__t {
  display: block; font-family: var(--font-titre); font-size: 0.6rem; font-weight: 700;
  color: var(--encre); margin-bottom: 0.4rem;
}
.pa-bloc__l {
  display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 0.4rem;
  font-size: 0.63rem; color: var(--gris); padding: 0.2rem 0;
}
.pa-bloc__l i { width: 9px; height: 9px; border-radius: 50%; background: var(--periwinkle-cl); }
.pa-bloc__l i.pl { background: var(--indigo); }
.pa-bloc__l em { font-style: normal; color: var(--indigo); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Le jeu de maquettes : quatre exemples de pages, en feuillets. Sans script,
   les quatre restent visibles l'une sous l'autre. */
.pa-jeu__ongs { margin-bottom: 0.9rem; }
.pa-jeu .feuillet__ong { font-size: 0.76rem; padding: 0.38rem 0.85rem; }
.pa-jeu .pa-maq + .pa-maq { margin-top: 1.2rem; }
.feuillets--actifs.pa-jeu .pa-maq + .pa-maq { margin-top: 0; }

.pa-maq__hero--court {
  padding: 0.8rem 0.9rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.pa-maq__hero--court .pa-maq__bj { font-size: 0.9rem; }

/* Trombinoscope réduit : des initiales qui se chevauchent, comme partout. */
.pa-tetes { display: flex; flex-shrink: 0; }
.pa-tete {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-titre); font-size: 0.5rem; font-weight: 700; color: #fff;
  background: var(--indigo-vif); box-shadow: 0 0 0 1.5px var(--indigo-nuit);
  margin-left: -7px;
}
.pa-tete:first-child { margin-left: 0; }
.pa-tete--n { background: var(--periwinkle); color: var(--indigo-nuit); }

/* Trois chiffres clés en tête de l'espace manager. */
.pa-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.pa-kpi {
  display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
  column-gap: 0.4rem; align-items: center;
  border: 1px solid var(--ligne); border-radius: 9px; padding: 0.45rem 0.55rem;
  background: #FBFCFF;
}
.pa-kpi__ic {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--brume); color: var(--indigo);
}
.pa-kpi__ic svg { width: 12px; height: 12px; }
.pa-kpi b {
  font-family: var(--font-titre); font-size: 0.86rem; font-weight: 800;
  color: var(--encre); line-height: 1;
}
.pa-kpi span:last-child { font-size: 0.52rem; color: var(--gris-clair); line-height: 1.2; }
.pa-kpi--alerte { background: #FFF7EC; border-color: #F2DFC2; }
.pa-kpi--alerte .pa-kpi__ic { background: #FBE7CC; color: #8A5410; }

.pa-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.pa-bloc__pied {
  display: block; font-size: 0.53rem; color: var(--gris-clair); margin-top: 0.3rem;
}

/* Petit histogramme : cinq semaines de campagne d'entretiens. */
.pa-barres { display: flex; align-items: flex-end; gap: 0.35rem; height: 54px; }
.pa-barre {
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 0.2rem; height: 100%;
  font-size: 0.45rem; color: var(--gris-clair);
}
.pa-barre i {
  display: block; width: 100%; height: var(--h); border-radius: 3px 3px 0 0;
  background: var(--periwinkle-cl);
}
.pa-barre--on i { background: var(--indigo); }

/* Quatre personnes de l'équipe, avec l'état de leur dossier. */
.pa-pers {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0;
}
.pa-pers i {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal;
  font-family: var(--font-titre); font-size: 0.42rem; font-weight: 700;
  background: var(--brume); color: var(--indigo);
}
.pa-pers b { font-size: 0.57rem; font-weight: 600; color: var(--encre-2); }
.pa-pers em {
  font-style: normal; font-family: var(--font-titre);
  font-size: 0.44rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: 4px; padding: 0.12rem 0.3rem;
}
.pa-pers em.ok  { background: #E4F3EC; color: #1B6B4C; }
.pa-pers em.att { background: #FBE7CC; color: #8A5410; }

/* Mises en avant éditoriales du catalogue. */
.pa-unes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.pa-une {
  border: 1px solid var(--ligne); border-radius: 9px; overflow: hidden;
  display: grid; align-content: start;
}
.pa-une__bande {
  height: 34px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--indigo-nuit), var(--indigo-vif));
}
.pa-une[data-t="b"] .pa-une__bande { background: linear-gradient(135deg, var(--indigo), var(--periwinkle)); }
.pa-une[data-t="c"] .pa-une__bande { background: linear-gradient(135deg, #8A5410, #D89A45); }
.pa-une__bande i { display: grid; place-items: center; }
.pa-une__bande svg { width: 15px; height: 15px; }
.pa-une b {
  font-family: var(--font-titre); font-size: 0.58rem; font-weight: 700;
  color: var(--encre); padding: 0.4rem 0.45rem 0.1rem; line-height: 1.25;
}
.pa-une em { font-style: normal; font-size: 0.5rem; color: var(--gris-clair); padding: 0 0.45rem 0.45rem; }

/* Les plus suivies : trois fiches compactes. */
.pa-cours__t {
  display: block; font-family: var(--font-titre); font-size: 0.56rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris-clair);
  margin-bottom: 0.35rem;
}
.pa-cours__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.pa-cours__c {
  border: 1px solid var(--ligne); border-left: 3px solid var(--periwinkle);
  border-radius: 7px; padding: 0.35rem 0.45rem;
}
.pa-cours__c b {
  display: block; font-family: var(--font-titre); font-size: 0.56rem; font-weight: 700;
  color: var(--encre); line-height: 1.25; margin-bottom: 0.12rem;
}
.pa-cours__c em { font-style: normal; font-size: 0.48rem; color: var(--gris-clair); }

/* Espace manager : les entrées groupées par domaine, chaque groupe repéré
   par un filet coloré à gauche. */
.pa-grp {
  border: 1px solid var(--ligne); border-radius: 9px;
  padding: 0.5rem 0.6rem 0.55rem 0.75rem; position: relative; overflow: hidden;
}
.pa-grp::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--indigo);
}
.pa-grp[data-t="b"]::before { background: var(--periwinkle); }
.pa-grp[data-t="c"]::before { background: var(--periwinkle-cl); }
.pa-grp__t {
  display: flex; align-items: center; gap: 0.32rem;
  font-family: var(--font-titre); font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris-clair);
  margin-bottom: 0.35rem;
}
.pa-grp__t i { display: grid; place-items: center; color: var(--indigo); }
.pa-grp__t i svg { width: 11px; height: 11px; }
.pa-grp__l { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pa-lien {
  font-family: var(--font-titre); font-size: 0.6rem; font-weight: 600;
  color: var(--indigo); background: var(--brume);
  border-radius: 6px; padding: 0.25rem 0.5rem;
}

/* Barre de recherche factice, commune au catalogue et au site carrière. */
.pa-rech {
  display: flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--ligne); border-radius: 9px; padding: 0.3rem 0.3rem 0.3rem 0.55rem;
}
.pa-rech__ic { display: grid; place-items: center; color: var(--gris-clair); }
.pa-rech__ic svg { width: 13px; height: 13px; }
.pa-rech__txt { flex: 1 1 auto; font-size: 0.62rem; color: var(--gris-clair); }
.pa-rech__sep {
  font-size: 0.62rem; color: var(--gris-clair);
  border-left: 1px solid var(--ligne); padding-left: 0.55rem;
}
.pa-rech__btn {
  font-family: var(--font-titre); font-size: 0.58rem; font-weight: 700; color: #fff;
  background: var(--indigo); border-radius: 6px; padding: 0.3rem 0.6rem;
}

.pa-col__t {
  display: block; font-family: var(--font-titre); font-size: 0.56rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris-clair);
  margin-bottom: 0.35rem;
}
.pa-col__t--2 { margin-top: 0.6rem; }

/* Catalogue : entrées à gauche, matières à droite, mises en avant en bas. */
.pa-cat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0.6rem; }
.pa-col { display: block; }
.pa-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  font-size: 0.62rem; color: var(--encre-2);
  border: 1px solid var(--ligne); border-radius: 7px;
  padding: 0.32rem 0.5rem; margin-bottom: 0.28rem;
}
.pa-chip em, .pa-mat em {
  font-style: normal; font-size: 0.5rem; font-weight: 700;
  color: var(--gris-clair); font-variant-numeric: tabular-nums;
}
.pa-chip--on em { color: var(--indigo); }
.pa-chip--on { background: var(--brume); border-color: var(--periwinkle); color: var(--indigo); font-weight: 600; }
.pa-mats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.28rem; }
.pa-mat {
  display: grid; grid-template-columns: 13px 1fr auto; align-items: center; gap: 0.35rem;
  font-size: 0.6rem; color: var(--encre-2); background: #FBFCFF;
  border: 1px solid var(--ligne); border-radius: 7px; padding: 0.32rem 0.45rem;
}
.pa-mat svg { width: 13px; height: 13px; color: var(--indigo); }

/* Site carrière : filtres à gauche, offres à droite. */
.pa-car { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 0.6rem; }
.pa-filtre {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 0.35rem;
  font-size: 0.6rem; color: var(--gris); padding: 0.18rem 0;
}
.pa-filtre i {
  width: 10px; height: 10px; border-radius: 3px;
  border: 1px solid var(--ligne-forte); background: #fff;
}
.pa-filtre i.on { background: var(--indigo); border-color: var(--indigo); }
.pa-filtre em { font-style: normal; color: var(--gris-clair); font-variant-numeric: tabular-nums; }
.pa-offres { display: grid; gap: 0.3rem; align-content: start; }
.pa-offre {
  display: block; border: 1px solid var(--ligne); border-radius: 7px;
  padding: 0.38rem 0.5rem; font-size: 0.57rem; color: var(--gris-clair);
}
.pa-offre b {
  display: block; font-family: var(--font-titre); font-size: 0.63rem; font-weight: 700;
  color: var(--indigo); margin-bottom: 0.12rem;
}

@media (max-width: 460px) {
  .pa-cat, .pa-car, .pa-duo { grid-template-columns: minmax(0, 1fr); }
  .pa-kpis, .pa-unes, .pa-cours__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Écrans illustratifs — vues redessinées dans notre charte, données fictives
   -------------------------------------------------------------------------- */

.ecrans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.8vw, 1.4rem); }
@media (max-width: 1120px) { .ecrans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ecrans { grid-template-columns: minmax(0, 1fr); } }

/* --- Mobilité et carrière --- */
.carr__bj { font-family: var(--font-titre); font-weight: 700; font-size: 1rem; color: var(--encre); margin: 0 0 0.2rem; }
.carr__s { font-size: 0.72rem; color: var(--gris); margin: 0 0 0.75rem; line-height: 1.4; }
.carr__cap {
  display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 0.4rem;
  border: 1px solid var(--ligne); border-radius: 10px; padding: 0.6rem; margin-bottom: 0.7rem;
}
.carr__r { display: grid; grid-template-columns: 32px 1fr; gap: 0.45rem; align-items: center; }
.carr__ini {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brume); color: var(--indigo);
  font-family: var(--font-titre); font-size: 0.62rem; font-weight: 700;
}
.carr__ini--c { background: var(--indigo); color: #fff; }
.carr__l { display: block; font-size: 0.56rem; color: var(--gris); text-transform: uppercase; letter-spacing: 0.08em; }
.carr__r b { font-family: var(--font-titre); font-size: 0.72rem; color: var(--encre); line-height: 1.2; }
.carr__fl { display: block; height: 1.5px; background: var(--indigo); position: relative; }
.carr__fl::after {
  content: ""; position: absolute; right: 0; top: -2.5px;
  width: 6px; height: 6px; border: solid var(--indigo); border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}
.carr__ong { display: flex; gap: 0.8rem; border-bottom: 1px solid var(--ligne); margin-bottom: 0.6rem; }
.carr__o {
  font-family: var(--font-titre); font-size: 0.64rem; font-weight: 600; color: var(--gris);
  padding-bottom: 0.4rem;
}
.carr__o--on { color: var(--indigo); box-shadow: inset 0 -2px 0 var(--indigo); }
.carr__t { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 0.35rem; }
.carr__c {
  display: grid; justify-items: center; gap: 0.25rem; text-align: center;
  border: 1px solid var(--ligne); border-radius: 8px; padding: 0.55rem 0.3rem;
  font-family: var(--font-titre); font-size: 0.56rem; font-weight: 600; color: var(--encre-2);
}
.carr__c svg { width: 15px; height: 15px; color: var(--indigo); }
.carr__c--on {
  background: var(--indigo); border-color: var(--indigo); color: #fff;
  justify-items: start; text-align: left; gap: 0.15rem;
}
.carr__c--on b { font-size: 0.68rem; font-weight: 700; }
.carr__c--on span { font-weight: 500; opacity: 0.82; line-height: 1.25; }


.ecran { margin: 0; display: flex; flex-direction: column; }
.ecran__barre {
  display: flex; align-items: center; gap: 5px;
  padding: 0.55rem 0.85rem; background: var(--indigo-nuit);
  border-radius: 12px 12px 0 0;
}
.ecran__pt { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.28); }
.ecran__t {
  margin-left: 0.55rem; font-family: var(--font-titre); font-size: 0.66rem;
  font-weight: 600; color: rgba(255,255,255,0.74); letter-spacing: 0.03em;
}
.ecran__corps {
  flex: 1; background: #fff; border: 1px solid var(--ligne-forte); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 0.95rem 1rem 1.05rem;
}
.ecran__note { font-size: 0.79rem; color: var(--gris); line-height: 1.45; margin: 0.85rem 0 0; }
.ecran__leg {
  font-family: var(--font-titre); font-size: 0.68rem; font-weight: 600;
  color: var(--indigo); margin-top: 0.6rem;
}

/* --- Grille 9 cases --- */
.neuf {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px; padding-left: 1.15rem; padding-bottom: 1.15rem; position: relative;
}
.neuf__y, .neuf__x {
  position: absolute;
  font-family: var(--font-titre); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--periwinkle);
}
.neuf__y { left: 0; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; white-space: nowrap; }
.neuf__x { left: 50%; bottom: 0; transform: translateX(-50%); }
.case {
  border-radius: 7px; padding: 0.42rem 0.45rem 0.5rem; min-height: 56px;
  border: 1px solid var(--ligne);
}
.case--h { background: var(--brume); border-color: var(--ligne-forte); }
.case--b { background: #FAFBFF; }
.case--t { background: var(--periwinkle-cl); border-color: var(--periwinkle); }
.case--r { background: #FDF0F0; border-color: #F1CFCF; }
.case__n {
  display: block; font-family: var(--font-titre); font-size: 0.55rem; font-weight: 700;
  color: var(--encre-2); line-height: 1.2; margin-bottom: 0.3rem;
}
.case__g { display: flex; flex-wrap: wrap; gap: 3px; }
.jeton {
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--indigo); color: #fff;
  font-family: var(--font-titre); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.02em;
}

/* --- Conformité --- */
.conf__tete { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.85rem; }
.conf__val { display: block; font-family: var(--font-titre); font-size: 1.6rem; font-weight: 800; color: var(--indigo); line-height: 1; }
.conf__lbl { display: block; font-size: 0.72rem; color: var(--gris); margin-top: 0.1rem; }
.conf__jauge { flex: 1; height: 6px; border-radius: 4px; background: var(--ligne); overflow: hidden; }
.conf__jauge span { display: block; height: 100%; background: var(--indigo); border-radius: 4px; }
.conf__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: 8px; overflow: hidden; }
.conf__l li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: 0.5rem; padding: 0.42rem 0.6rem; background: #fff; font-size: 0.75rem;
}
.conf__nom { color: var(--encre-2); font-weight: 600; }
.conf__d { color: var(--gris); font-variant-numeric: tabular-nums; font-size: 0.72rem; }
.conf__etat {
  font-family: var(--font-titre); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 999px; padding: 0.12rem 0.42rem; white-space: nowrap;
}
.conf__etat--ok  { color: #12704F; background: #E4F5EE; }
.conf__etat--att { color: #8A5A05; background: #FBF0DD; }
.conf__etat--urg { color: #9B2C2C; background: #FBE6E6; }

/* --------------------------------------------------------------------------
   Valeurs — rappel court sur la page À propos
   -------------------------------------------------------------------------- */

.valeurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.5rem); }
@media (max-width: 900px) { .valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .valeurs { grid-template-columns: minmax(0, 1fr); } }
.valeur-c { border-top: 2px solid var(--periwinkle-cl); padding-top: 0.9rem; }
.valeur-c__n {
  display: block; font-family: var(--font-titre); font-weight: 700;
  font-size: 1rem; color: var(--indigo); margin-bottom: 0.35rem;
}
.valeur-c p { font-size: 0.87rem; color: var(--gris); line-height: 1.5; margin: 0; }
.apres-valeurs { margin: 1.4rem 0 0; }

/* --------------------------------------------------------------------------
   Schéma de flux — ce qui circule entre Cornerstone et la solution
   -------------------------------------------------------------------------- */

.flux {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr) minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.6rem); align-items: stretch;
}
.flux__pole {
  background: #fff; border: 1px solid var(--ligne); border-radius: 14px;
  padding: 1.1rem 1.15rem 1.2rem;
  box-shadow: 0 1px 2px rgba(20, 22, 58, 0.05);
}
.flux__pole--joy { border-color: var(--ligne-forte); background: var(--brume); }
.flux__logo { height: 22px; width: auto; display: block; margin-bottom: 0.55rem; }
.flux__marque {
  display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.55rem;
  font-family: var(--font-titre); font-size: 0.86rem; font-weight: 600; color: var(--encre);
}
.flux__marque b { font-weight: 800; }
.flux__marque img { flex: none; border-radius: 50%; }
.flux__role {
  display: block;
  font-family: var(--font-titre); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo);
  padding-bottom: 0.7rem; margin-bottom: 0.7rem; border-bottom: 1px solid var(--ligne);
}
.flux__pole ul, .flux__voie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.42rem; }
.flux__pole li, .flux__voie li {
  position: relative; padding-left: 0.95rem;
  font-size: 0.85rem; color: var(--gris); line-height: 1.45;
}
.flux__pole li::before, .flux__voie li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--periwinkle);
}

.flux__voies { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(0.9rem, 2vw, 1.4rem); align-content: center; }
.flux__voie { text-align: center; }
.flux__voie ul { margin-top: 0.6rem; text-align: left; }
.flux__cap {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--font-titre); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--indigo);
}
.flux__fleche { display: block; width: 100%; height: 14px; overflow: visible; }
.flux__rail   { stroke: var(--ligne-forte); stroke-width: 2; }
.flux__pointe { fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Le pointillé qui glisse sur le rail donne le sens de circulation. */
.flux__gouttes {
  stroke: var(--indigo); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 2 16; animation: goutte 1.9s linear infinite;
}
.flux__voie--retour .flux__gouttes { animation-direction: reverse; }
@keyframes goutte { to { stroke-dashoffset: -18; } }

@media (max-width: 900px) {
  .flux { grid-template-columns: minmax(0, 1fr); }
  /* Empilés, les rails horizontaux ne veulent plus rien dire. */
  .flux__fleche { display: none; }
  .flux__voie { text-align: left; padding-left: 0.9rem; border-left: 2px solid var(--ligne-forte); }
}
@media (prefers-reduced-motion: reduce) {
  .flux__gouttes { animation: none; }
}

/* --------------------------------------------------------------------------
   Bandeau de chiffres légendés
   -------------------------------------------------------------------------- */

.bandeau-chiffres {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--brume); border: 1px solid var(--ligne);
  border-radius: clamp(16px, 2vw, 22px);
  padding: clamp(1.1rem, 2.2vw, 1.55rem) clamp(0.5rem, 1.4vw, 1rem);
}
.chiffre {
  padding: 0.15rem clamp(0.75rem, 1.6vw, 1.25rem); border-left: 1px solid var(--ligne-forte);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .chiffre { opacity: 0; transform: translateY(14px); }
.is-visible .chiffre { opacity: 1; transform: none; }
.is-visible .chiffre:nth-child(2) { transition-delay: 0.10s; }
.is-visible .chiffre:nth-child(3) { transition-delay: 0.20s; }
.is-visible .chiffre:nth-child(4) { transition-delay: 0.30s; }
/* La tuile d'icône éclot avec son chiffre. */
.chiffre__ic { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.js .chiffre__ic { transform: scale(0); }
.is-visible .chiffre__ic { transform: none; }
.is-visible .chiffre:nth-child(2) .chiffre__ic { transition-delay: 0.16s; }
.is-visible .chiffre:nth-child(3) .chiffre__ic { transition-delay: 0.26s; }
.is-visible .chiffre:nth-child(4) .chiffre__ic { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .js .chiffre, .js .chiffre__ic { opacity: 1; transform: none; }
}
.chiffre:first-child { border-left: 0; }
.chiffre__ic {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: #fff; color: var(--indigo); margin-bottom: 0.6rem;
}
.chiffre__ic svg { width: 16px; height: 16px; }
.chiffre .stat__value { font-size: clamp(1.85rem, 3.2vw, 2.4rem); color: var(--indigo); line-height: 1.05; }
.chiffre__nom {
  font-family: var(--font-titre); font-weight: 700; font-size: 0.9rem;
  color: var(--encre); margin-top: 0.15rem;
}
.chiffre__legende { font-size: 0.81rem; color: var(--gris); line-height: 1.45; margin: 0.3rem 0 0; }
@media (max-width: 900px) {
  .bandeau-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.4rem; }
  .chiffre:nth-child(odd) { border-left: 0; }
}
@media (max-width: 520px) {
  .bandeau-chiffres { grid-template-columns: minmax(0, 1fr); }
  .chiffre { border-left: 0; }
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: clamp(1.1rem, 2.2vw, 1.9rem); }
.stat { border-top: 2px solid var(--periwinkle-cl); padding-top: 1.1rem; }
.stat__icone {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brume); color: var(--indigo);
  margin-bottom: 0.85rem;
}
.stat__icone svg { width: 17px; height: 17px; }
.section--nuit .stat__icone { background: rgba(255,255,255,0.12); color: #fff; }
.stat__value {
  font-family: var(--font-titre); font-weight: 800;
  font-size: clamp(1.8rem, 3.1vw, 2.4rem); letter-spacing: -0.04em;
  color: var(--indigo); line-height: 1; margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 0.9rem; color: var(--gris); }
.section--nuit .stat { border-top-color: rgba(255,255,255,0.28); }
.section--nuit .stat__value { color: #fff; }
.section--nuit .stat__label { color: rgba(255,255,255,0.72); }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
/* Un enfant de grille garde un min-width auto : s'il contient un tableau ou une
   maquette large, il déborde de sa piste au lieu de la respecter. */
.grid > *, .grid--2 > *, .grid--3 > *, .grid--4 > * { min-width: 0; }
/* Sous 620 px, une seule colonne franche : le plancher des minmax() reste
   parfois appliqué même quand le conteneur est plus étroit, et la piste déborde. */
@media (max-width: 620px) {
  .grid, .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Quatre cartes : 4 de front, puis 2, puis 1 — jamais de carte orpheline. */
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.note-nuit {
  margin: clamp(1.2rem, 2.2vw, 1.8rem) 0 0; max-width: 64ch;
  font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.72);
  padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,0.16);
}
.grid--4 /* Le titre d'une carte devient un lien : le trait n'apparaît qu'au survol,
   pour ne pas alourdir la lecture. */
.lien-carte { color: inherit; text-decoration: none; }
.lien-carte:hover { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.card .lien-fleche { margin-top: 0.9rem; }

.card { padding: clamp(1.35rem, 2.2vw, 1.7rem); }
@media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .grid--4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--r);
  padding: clamp(1.15rem, 1.9vw, 1.5rem);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.card:hover { border-color: var(--periwinkle); box-shadow: var(--ombre-fort); transform: translateY(-4px); }
/* Au survol, la tuile d'icône passe en plein indigo : le repère visuel suit
   le pointeur sans que la carte ne bouge davantage. */
.card__icone { transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease; }
.card:hover .card__icone { background: var(--indigo); color: #fff; transform: scale(1.06) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) {
  .card, .card:hover, .card__icone, .card:hover .card__icone { transition: none; transform: none; }
}
.card h3 { margin-bottom: 0.55rem; }
.card h4, .card h3.card__h4 {
  font-size: 1.02rem; font-weight: 600; color: var(--encre); margin-bottom: 0.85rem;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--ligne);
}
.card p { color: var(--gris); font-size: 0.94rem; }
.section--brume .card { border-color: transparent; box-shadow: var(--ombre); }

.card__icone {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brume); color: var(--indigo);
  box-shadow: inset 0 0 0 1px var(--periwinkle-cl);
  margin-bottom: 1.15rem;
}
.card__icone svg { width: 22px; height: 22px; }

.card__num {
  font-family: var(--font-titre); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--indigo); display: block; margin-bottom: 0.9rem;
}

.card__list { list-style: none; margin: 1.15rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.card__list li {
  position: relative; padding-left: 1.35rem;
  font-size: 0.9rem; color: var(--gris); line-height: 1.5;
}
.card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(to bottom, var(--periwinkle-cl) 0 50%, var(--indigo) 50% 100%);
}
.card__list strong { color: var(--encre); font-weight: 600; }
/* Sur fond sombre, la couleur de `li` l'emportait sur celle posée au niveau de
   la liste : le texte restait gris foncé, quasi illisible. On la redéfinit ici. */
.section--nuit .card__list li,
.panneau-doux--nuit .card__list li { color: rgba(255, 255, 255, 0.84); }
.section--nuit .card__list strong,
.panneau-doux--nuit .card__list strong { color: #fff; }
.section--nuit .card__list li::before,
.panneau-doux--nuit .card__list li::before {
  background: linear-gradient(to bottom, #fff 0 50%, var(--periwinkle-cl) 50% 100%);
}
/* …sauf à l'intérieur d'une carte, qui reste blanche même en section sombre :
   le texte y redevient gris sur blanc. */
.section--nuit .card .card__list li,
.panneau-doux--nuit .card .card__list li { color: var(--gris); }
.section--nuit .card .card__list strong,
.panneau-doux--nuit .card .card__list strong { color: var(--encre); }
.section--nuit .card .card__list li::before,
.panneau-doux--nuit .card .card__list li::before {
  background: linear-gradient(to bottom, var(--periwinkle-cl) 0 50%, var(--indigo) 50% 100%);
}

/* Carte d'activité, format large */
.activite {
  padding-block: clamp(1.3rem, 2.2vw, 1.8rem);
  border-top: 1px solid var(--ligne);
}
/* L'introduction coiffe le bloc ; les cartes de contenu métier prennent
   ensuite toute la largeur, au lieu de se tasser dans une colonne. */
.activite > div:first-child {
  max-width: 64ch;
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
}
.activite:last-child { border-bottom: 1px solid var(--ligne); }
.activite__num {
  font-family: var(--font-titre); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; color: var(--indigo); text-transform: uppercase;
}
.activite h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin: 0.55rem 0 0.8rem; letter-spacing: -0.03em; }
.activite__intro { color: var(--gris); }


/* --------------------------------------------------------------------------
   Modules Cornerstone / grille d'étiquettes
   -------------------------------------------------------------------------- */

/* Sept modules : 4 + 3 sur grand écran, jamais un seul en fin de ligne. */
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .modules { grid-template-columns: minmax(0, 1fr); } }
.module {
  border: 1px solid var(--ligne); border-radius: var(--r);
  padding: 1.25rem 1.35rem; background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.module:hover { border-color: var(--periwinkle); box-shadow: var(--ombre); }
.module__code {
  font-family: var(--font-titre); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -0.02em; color: var(--indigo); margin-bottom: 0.15rem;
}
.module__nom { font-size: 0.85rem; color: var(--gris); line-height: 1.4; }
.section--nuit .module { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.section--nuit .module__code { color: #fff; }
.section--nuit .module__nom { color: rgba(255,255,255,0.70); }

.puces { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin: 0; padding: 0; list-style: none; }
.puces li {
  font-family: var(--font-titre); font-size: 0.79rem; font-weight: 600;
  color: var(--indigo-fonce); background: var(--brume);
  border: 1px solid var(--ligne-forte);
  padding: 0.42rem 0.95rem; border-radius: 999px;
}
.section--nuit .puces li {
  color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.20);
}
.puces--drapeaux li { display: inline-flex; align-items: center; gap: 0.5rem; padding-left: 0.7rem; }
.drapeau {
  flex: none; width: 1.15rem; height: 0.77rem; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(20, 22, 58, 0.14);
}

.hero .puces li { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.20); }
.puces--liens li { padding: 0; }
.puces--liens li a {
  display: block; padding: 0.42rem 0.95rem; border-radius: 999px;
  color: inherit; text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hero .puces--liens li:hover, .hero .puces--liens li:focus-within {
  background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.38);
}
.hero__cles { margin-top: 1.4rem; }

/* Badge partenaire : le logo Cornerstone est sombre, il lui faut une pastille
   claire pour ressortir sur le fond nuit du héros. */
.hero__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; margin-bottom: 1.1rem; }
.hero__partenaire {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: #fff; border-radius: 999px; padding: 0.3rem 0.85rem 0.3rem 0.7rem;
}
.hero__partenaire span {
  font-family: var(--font-titre); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris);
}
.hero__partenaire img { height: 15px; width: auto; display: block; }


/* --------------------------------------------------------------------------
   Références clients
   -------------------------------------------------------------------------- */

.refs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ligne-forte);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r);
  overflow: hidden;
}
.ref {
  background: #fff;
  padding: 1.5rem 1.5rem 1.4rem;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 128px;
  /* Le mur de références se regarde, il ne se manipule pas : pas d'effet de
     survol ici, uniquement l'apparition à l'entrée dans le champ. L'état
     masqué est réservé aux navigateurs qui exécutent le script, sinon les
     références resteraient invisibles. */
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .ref { opacity: 0; transform: translateY(12px); }
.is-visible .ref { opacity: 1; transform: none; }
.ref__nom {
  font-family: var(--font-titre); font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem); letter-spacing: -0.02em;
  color: var(--indigo-fonce); line-height: 1.2;
}
.ref__nom img { max-height: 40px; width: auto; }
.ref__meta {
  font-size: 0.84rem; color: var(--gris-clair);
  margin-top: 0.65rem; font-variant-numeric: tabular-nums;
}
.is-visible .ref:nth-child(2) { transition-delay: 0.07s; }
.is-visible .ref:nth-child(3) { transition-delay: 0.14s; }
.is-visible .ref:nth-child(4) { transition-delay: 0.21s; }
.is-visible .ref:nth-child(5) { transition-delay: 0.28s; }
.is-visible .ref:nth-child(6) { transition-delay: 0.35s; }
.is-visible .ref:nth-child(7) { transition-delay: 0.42s; }
.is-visible .ref:nth-child(8) { transition-delay: 0.49s; }
.is-visible .ref:nth-child(9) { transition-delay: 0.56s; }

@media (prefers-reduced-motion: reduce) {
  .js .ref { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) { .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .refs { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Emplacements de logos (clients, partenaire éditeur)
   -------------------------------------------------------------------------- */

/* Tant qu'aucun fichier n'est déposé, le nom s'affiche en typographie. */
/* Boîte identique pour tous : chaque logo s'y inscrit au plus grand, centré.
   Les proportions diffèrent, mais l'encombrement est le même d'une carte à
   l'autre — et toutes les légendes tombent sur la même ligne. */
.ref__nom.a-logo {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; height: 54px;
}
.ref__nom.a-logo img {
  max-width: 168px; max-height: 54px; width: auto; height: auto;
  object-fit: contain; object-position: left center;
  /* Aucun filtre : recolorer ou desaturer une marque revient a la modifier, ce
     que les chartes de marque interdisent presque toutes. Les logos sont donc
     affiches tels que leur proprietaire les publie. */
}

.bandeau-partenaire {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  background: #fff; border: 1px solid var(--ligne);
  border-radius: var(--r); padding: 1.5rem clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--ombre);
}
.bandeau-partenaire__label {
  font-family: var(--font-titre); font-size: 0.71rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-clair);
  flex-shrink: 0;
}
.bandeau-partenaire__logo {
  font-family: var(--font-titre); font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); letter-spacing: -0.025em;
  color: var(--indigo-fonce); display: flex; align-items: center;
}
.bandeau-partenaire__logo img { max-height: 40px; max-width: 190px; width: auto; object-fit: contain; }
.bandeau-partenaire__note { color: var(--gris); font-size: 0.93rem; margin: 0; flex: 1 1 260px; }

.section--nuit .bandeau-partenaire {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); box-shadow: none;
}
.section--nuit .bandeau-partenaire__label { color: rgba(255,255,255,0.52); }
.section--nuit .bandeau-partenaire__logo { color: #fff; }
/* Sur fond sombre, le logo partenaire est posé sur une pastille blanche :
   c'est le traitement prévu par les chartes de marque, plutôt qu'une
   recolorisation qui dénaturerait le logotype. */
.bandeau-partenaire__lien {
  display: inline-block; margin-left: 0.35rem; white-space: nowrap;
  font-family: var(--font-titre); font-size: 0.8rem; font-weight: 600;
  color: var(--indigo); text-decoration: none;
  border-bottom: 1px solid var(--ligne-forte);
}
.bandeau-partenaire__lien:hover { border-bottom-color: var(--indigo); }

.section--nuit .bandeau-partenaire__logo.a-logo {
  background: #fff; padding: 0.5rem 0.75rem; border-radius: 8px;
}
.section--nuit .bandeau-partenaire__note { color: rgba(255,255,255,0.72); }

/* --------------------------------------------------------------------------
   Cartes de présentation des solutions
   Chaque carte porte la couleur de l'offre, un aperçu d'écran composé de
   fragments d'interface, et le lien vers la fiche détaillée.
   -------------------------------------------------------------------------- */

.solutions-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}

.solution-carte {
  display: flex; flex-direction: column;
  background: var(--brume);
  border: 1px solid transparent;
  border-radius: clamp(18px, 2.2vw, 26px);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.solution-carte:hover {
  border-color: var(--ligne-forte); box-shadow: var(--ombre-fort);
  transform: translateY(-3px);
}
.solution-carte__etiquette {
  font-family: var(--font-titre); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--indigo); margin-bottom: 0.75rem;
}
.solution-carte h2, .solution-carte h3 {
  font-size: clamp(1.12rem, 1.8vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 0.6rem;
}
.solution-carte p { color: var(--gris); font-size: 0.93rem; }
.solution-carte .btn { margin-top: 1.2rem; align-self: flex-start; }

/* Aperçu : deux fragments d'interface superposés */
.apercu-frag {
  position: relative; height: 176px; margin-top: 1.2rem;
  font-family: var(--font-texte);
}
.frag {
  position: absolute; background: #fff;
  border: 1px solid var(--ligne-forte); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(20, 22, 58, 0.11);
  padding: 0.6rem 0.7rem; font-size: 0.58rem; line-height: 1.35;
  color: var(--encre-2);
}
.frag--a { left: 0; top: 0; width: 62%; }
.frag--b { right: 0; bottom: 0; width: 58%; }
.frag__titre {
  font-family: var(--font-titre); font-weight: 700; font-size: 0.6rem;
  color: var(--encre); margin-bottom: 0.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
}
.frag__ligne {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.24rem 0; border-top: 1px solid var(--ligne);
}
.frag__ligne:first-of-type { border-top: 0; }
.frag__coche {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
  background: var(--indigo); color: #fff;
  font-size: 0.44rem; display: grid; place-items: center;
}
.frag__coche--vide { background: transparent; border: 1px solid var(--ligne-forte); }
.frag__barre { height: 4px; border-radius: 3px; background: var(--ligne); overflow: hidden; margin-top: 0.35rem; }
.frag__barre span { display: block; height: 100%; background: var(--indigo); }
.frag__mini { font-size: 0.5rem; color: var(--gris-clair); letter-spacing: 0.04em; text-transform: uppercase; }
/* Étiquette de provenance : d'où viennent les données affichées. */
.frag__src {
  font-family: var(--font-titre); font-size: 0.46rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--indigo); background: var(--brume);
  border-radius: 999px; padding: 0.14rem 0.4rem; white-space: nowrap;
}
.frag__val {
  font-family: var(--font-titre); font-weight: 800; font-size: 0.95rem;
  color: var(--indigo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.frag__cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 0.3rem; }
.frag__cal i {
  display: block; aspect-ratio: 1; border-radius: 2px; background: var(--ligne);
}
.frag__cal i.plein { background: var(--indigo); }
.frag__cal i.demi  { background: var(--periwinkle-cl); }

/* --------------------------------------------------------------------------
   Volets d'activité — trois temps d'une même mission
   -------------------------------------------------------------------------- */

.volets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.1rem; }

.volet {
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--r);
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  display: flex; flex-direction: column;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.volet:hover { border-color: var(--ligne-forte); box-shadow: var(--ombre-fort); transform: translateY(-3px); }
/* Chaque volet s'ouvre sur son temps : un jalon numéroté, le rang, puis le
   nom du métier. C'est le repère de lecture de la page. */
.volet__index {
  display: grid; grid-template-columns: 30px 1fr; align-items: center;
  column-gap: 0.6rem; row-gap: 0;
  margin-bottom: 1rem; padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--ligne);
}
.volet__num {
  grid-row: span 2; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--font-titre); font-weight: 700; font-size: 0.88rem; color: #fff;
  background: linear-gradient(145deg, var(--indigo-vif, var(--indigo)), var(--indigo-fonce));
  box-shadow: 0 4px 11px rgba(20, 22, 58, 0.18);
}
.volet__temps {
  font-family: var(--font-titre); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo);
  line-height: 1.2;
}
.volet__nom {
  font-family: var(--font-titre); font-size: 0.88rem; font-weight: 700;
  color: var(--indigo); letter-spacing: -0.01em; line-height: 1.2;
}

.volet h3 { margin-bottom: 0.9rem; }
.volet h4 {
  font-size: 0.86rem; color: var(--encre); margin: 1.1rem 0 0.5rem;
  padding: 0; border: 0;
}
.volet h4:first-of-type { margin-top: 0; }
.volet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.volet li {
  position: relative; padding-left: 1.1rem; font-size: 0.88rem;
  color: var(--gris); line-height: 1.5;
}
.volet li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--periwinkle);
}

/* --------------------------------------------------------------------------
   Parcours de mise en place — quatre phases
   -------------------------------------------------------------------------- */

.parcours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
/* La chaîne de sécurisation compte cinq étapes, pas quatre. */
.parcours--cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .parcours--cinq { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1.15rem; } }
@media (max-width: 720px)  { .parcours--cinq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .parcours--cinq { grid-template-columns: minmax(0, 1fr); } }
.parcours--cinq .phase:nth-child(5) .phase__carte,
.is-visible .parcours--cinq .phase:nth-child(5)::before,
.is-visible .parcours--cinq .phase:nth-child(5) .phase__jalon { transition-delay: 0.48s; }
@media (max-width: 900px) { .parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.15rem; } }
@media (max-width: 560px) { .parcours { grid-template-columns: minmax(0, 1fr); } }

.phase { position: relative; display: flex; flex-direction: column; padding-top: 3.1rem; }

/* Le fil qui relie une phase à la suivante : il part du bord du jalon et se
   déroule vers la droite quand la section entre dans le champ. */
.phase::before {
  content: ""; position: absolute; left: 42px; right: -1.15rem; top: 16px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(to right, var(--periwinkle), var(--ligne-forte));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.phase:last-child::before { display: none; }
@media (max-width: 900px) { .phase::before { display: none; } }

.phase__jalon {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-titre); font-weight: 700; font-size: 0.9rem; color: #fff;
  background: linear-gradient(145deg, var(--indigo-vif, var(--indigo)), var(--indigo-fonce));
  box-shadow: 0 5px 14px rgba(20, 22, 58, 0.18);
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.phase__carte {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--ligne); border-radius: 14px;
  padding: 1.05rem 1.1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(20, 22, 58, 0.05);
  overflow: hidden;
}
/* Filet de couleur en tête de carte — repris du dégradé du fil. */
.phase__carte::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(to right, var(--indigo), var(--periwinkle));
}

/* Le picto annonce ce que la phase produit, avant même son titre. */
.phase__ic {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--brume); color: var(--indigo);
  margin-bottom: 0.6rem;
}
.phase__ic svg { width: 16px; height: 16px; }
.js .phase__ic { opacity: 0; transform: scale(0.7); }
.phase__ic { transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.is-visible .phase__ic { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .phase__ic { opacity: 1; transform: none; } }

.phase__num {
  font-family: var(--font-titre); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo);
}
.phase h3 { font-size: clamp(1rem, 1.5vw, 1.1rem); margin: 0.25rem 0 0.8rem; }
.phase ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
/* Les puces sont des coches dessinées en CSS : deux pseudo-éléments, le rond
   puis le trait, pour rester sur les couleurs du thème sans image. */
.phase li {
  position: relative; padding-left: 1.65rem;
  font-size: 0.86rem; color: var(--gris); line-height: 1.45;
}
.phase li::before {
  content: ""; position: absolute; left: 0; top: 0.08em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--brume);
}
.phase li::after {
  content: ""; position: absolute; left: 0.37rem; top: 0.3em;
  width: 0.28rem; height: 0.52rem;
  border: solid var(--indigo); border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg);
}

.phase__livrable {
  margin: 0.9rem 0 0; padding-top: 0.7rem; margin-top: auto;
  border-top: 1px dashed var(--ligne-forte);
  font-size: 0.79rem; line-height: 1.4; color: var(--indigo-fonce);
}
.phase__etiquette {
  display: block;
  font-family: var(--font-titre); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--indigo);
  margin-bottom: 0.15rem;
}

/* Apparition des cartes, décalée d'une phase à l'autre. Pas d'effet de survol
   ici : le parcours se lit, il ne se manipule pas. */
.js .phase__carte { opacity: 0; transform: translateY(16px); }
.js .phase li { opacity: 0; transform: translateX(-6px); }
.phase li { transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.is-visible .phase li { opacity: 1; transform: none; }
.js .phase__livrable { opacity: 0; }
.phase__livrable { transition: opacity 0.5s ease; }
.is-visible .phase__livrable { opacity: 1; }
.phase__carte { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.is-visible .phase::before { transform: scaleX(1); }
.is-visible .phase__jalon  { transform: scale(1); }
.is-visible .phase__carte  { opacity: 1; transform: none; }
.phase:nth-child(2) .phase__carte, .is-visible .phase:nth-child(2)::before, .is-visible .phase:nth-child(2) .phase__jalon { transition-delay: 0.12s; }
.phase:nth-child(3) .phase__carte, .is-visible .phase:nth-child(3)::before, .is-visible .phase:nth-child(3) .phase__jalon { transition-delay: 0.24s; }
.phase:nth-child(4) .phase__carte, .is-visible .phase:nth-child(4)::before, .is-visible .phase:nth-child(4) .phase__jalon { transition-delay: 0.36s; }
.is-visible .phase:nth-child(1) li:nth-child(1) { transition-delay: 0.28s; }
.is-visible .phase:nth-child(1) li:nth-child(2) { transition-delay: 0.36s; }
.is-visible .phase:nth-child(1) li:nth-child(3) { transition-delay: 0.44s; }
.is-visible .phase:nth-child(1) .phase__livrable { transition-delay: 0.58s; }
.is-visible .phase:nth-child(2) li:nth-child(1) { transition-delay: 0.40s; }
.is-visible .phase:nth-child(2) li:nth-child(2) { transition-delay: 0.48s; }
.is-visible .phase:nth-child(2) li:nth-child(3) { transition-delay: 0.56s; }
.is-visible .phase:nth-child(2) .phase__livrable { transition-delay: 0.70s; }
.is-visible .phase:nth-child(3) li:nth-child(1) { transition-delay: 0.52s; }
.is-visible .phase:nth-child(3) li:nth-child(2) { transition-delay: 0.60s; }
.is-visible .phase:nth-child(3) li:nth-child(3) { transition-delay: 0.68s; }
.is-visible .phase:nth-child(3) .phase__livrable { transition-delay: 0.82s; }
.is-visible .phase:nth-child(4) li:nth-child(1) { transition-delay: 0.64s; }
.is-visible .phase:nth-child(4) li:nth-child(2) { transition-delay: 0.72s; }
.is-visible .phase:nth-child(4) li:nth-child(3) { transition-delay: 0.80s; }
.is-visible .phase:nth-child(4) .phase__livrable { transition-delay: 0.94s; }

@media (prefers-reduced-motion: reduce) {
  .phase::before { transform: scaleX(1); }
  .phase__jalon  { transform: scale(1); }
  .js .phase__carte, .js .phase li, .js .phase__livrable { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Valeur ajoutée — quatre apports sur un projet
   -------------------------------------------------------------------------- */

.valeur {
  background: #fff; border: 1px solid var(--ligne); border-radius: 14px;
  padding: 1.2rem 1.15rem 1.25rem;
  box-shadow: 0 1px 2px rgba(20, 22, 58, 0.05);
}
.valeur__ic {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--brume); color: var(--indigo);
  margin-bottom: 0.85rem;
}
.valeur__ic svg { width: 20px; height: 20px; }
.valeur h3 { font-size: 1rem; margin: 0 0 0.45rem; }
.valeur p { font-size: 0.88rem; color: var(--gris); line-height: 1.55; margin: 0; }

/* --------------------------------------------------------------------------
   Schémas animés — cycle des activités et étoile des savoir-faire
   -------------------------------------------------------------------------- */

.schema { width: 100%; max-width: 560px; margin-inline: auto; display: block; }
.schema text { font-family: var(--font-titre); fill: var(--encre); }

/* Le trait se dessine quand le schéma entre dans le champ. */
.schema .trace {
  stroke-dasharray: var(--long, 1000);
  stroke-dashoffset: var(--long, 1000);
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-visible .schema .trace { stroke-dashoffset: 0; }

.schema .surgit { opacity: 0; transform: scale(0.82); transform-origin: center; transform-box: fill-box;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.is-visible .schema .surgit { opacity: 1; transform: none; }
.is-visible .schema .surgit:nth-of-type(2) { transition-delay: 0.12s; }
.is-visible .schema .surgit:nth-of-type(3) { transition-delay: 0.24s; }
.is-visible .schema .surgit:nth-of-type(4) { transition-delay: 0.36s; }
/* Le logo au centre du cycle arrive en dernier, une fois les arcs tracés. */
.is-visible .schema image.surgit { transition-delay: 0.5s; }

/* Schéma « noyau et satellites » : les six pastilles arrivent l'une après
   l'autre, une fois leurs liaisons tracées. Aucun effet de survol. */
.schema--noyau .surgit:nth-of-type(1) { transition-delay: 0.28s; }
.schema--noyau .surgit:nth-of-type(2) { transition-delay: 0.36s; }
.schema--noyau .surgit:nth-of-type(3) { transition-delay: 0.44s; }
.schema--noyau .surgit:nth-of-type(4) { transition-delay: 0.52s; }
.schema--noyau .surgit:nth-of-type(5) { transition-delay: 0.60s; }
.schema--noyau .surgit:nth-of-type(6) { transition-delay: 0.68s; }
.is-visible .schema--noyau image.surgit { transition-delay: 0.78s; }

/* Les trois points du cycle portent leur icône : une pastille pleine ne disait
   rien de l'activité qu'elle marquait. */
.schema__pt circle { fill: var(--indigo); }
.schema__ic { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Anneau pointillé en rotation lente : discret, il signale un cycle continu. */
/* transform-box: fill-box — sans lui, « center » désigne le centre de la
   boîte du SVG et l'anneau décrit un grand arc au lieu de tourner sur lui-même. */
.schema .anneau { animation: tourne 34s linear infinite;
  transform-box: fill-box; transform-origin: center; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Le cycle vit : un point blanc parcourt chaque arc l'un après l'autre, les
   trois pastilles respirent tour à tour et le logo du centre bat doucement. */
.cycle__flux {
  stroke-width: 3; stroke-dasharray: 18 300; stroke-dashoffset: 318; opacity: 0;
  animation: cycle-flux 4.5s linear infinite;
  animation-delay: calc(var(--i) * 1.5s + 1.4s);
}
@keyframes cycle-flux {
  0%   { stroke-dashoffset: 318; opacity: 0; }
  4%   { opacity: 0.95; }
  29%  { opacity: 0.95; }
  33%  { stroke-dashoffset: 140; opacity: 0; }
  100% { stroke-dashoffset: 140; opacity: 0; }
}
/* Les trois étapes sont des cartouches blancs posés sur l'anneau, avec leur
   icône dans une pastille pleine ; le centre porte un halo. */
/* La roue tourne lentement ; chaque cartouche tourne en sens inverse autour
   de son propre centre pour rester droit, et mène au détail de l'activité.
   Le survol arrête la roue, pour cliquer tranquillement. */
/* Les étapes restent à leur place : seuls le point qui parcourt les arcs,
   l'anneau pointillé et le halo bougent. Une roue qui tournait en entier
   donnait le tournis. */
/* Une couleur par activité, les mêmes que sur le reste du site : indigo pour
   le conseil, vert pour l'implémentation, ocre pour le développement. Chaque
   arc porte la couleur de l'étape dont il part. */
/* Finalement une seule couleur, l'indigo, pour les trois : la différence se
   lit dans les icônes et les mots, pas dans la teinte. */
.cycle__n--conseil, .trace--conseil,
.cycle__n--impl,    .trace--impl,
.cycle__n--dev,     .trace--dev     { --c: #393FB9; --c-cl: #E3E9FB; color: #393FB9; }
.cycle__n .schema__pt circle { fill: var(--c, var(--indigo)); }
.cycle__n text { fill: var(--encre); }
.cycle__n { cursor: pointer; outline: none; }
.cycle__n rect { fill: #fff; stroke: var(--ligne-forte); stroke-width: 1.2; filter: drop-shadow(0 6px 14px rgba(20, 22, 58, 0.12)); transition: stroke 0.2s, fill 0.2s; }
.cycle__n rect { stroke: var(--c, var(--ligne-forte)); stroke-opacity: 0.45; }
.cycle__n:hover rect, .cycle__n:focus-visible rect { stroke: var(--c, var(--indigo)); stroke-opacity: 1; stroke-width: 2; fill: var(--c-cl, var(--brume)); }
.cycle__n:hover text { text-decoration: underline; text-underline-offset: 3px; }
.cycle__n text { fill: var(--encre); }
.cycle__disque { filter: drop-shadow(0 8px 20px rgba(57, 63, 185, 0.18)); }
.cycle__halo { animation: cycle-halo 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cycle-halo { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }
.is-visible .schema .schema__pt circle { animation: cycle-pulse 4.5s ease-in-out infinite; }
.is-visible .schema .schema__pt:nth-of-type(1) circle { animation-delay: 2.9s; }
.is-visible .schema .schema__pt:nth-of-type(2) circle { animation-delay: 4.4s; }
.is-visible .schema .schema__pt:nth-of-type(3) circle { animation-delay: 5.9s; }
@keyframes cycle-pulse {
  0%, 100% { r: 15; }
  8%  { r: 18.5; }
  18% { r: 15; }
}
.is-visible .schema image.surgit { animation: cycle-bat 4.5s ease-in-out 1.3s infinite; }
@keyframes cycle-bat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .schema .trace { stroke-dashoffset: 0; transition: none; }
  .schema .surgit { opacity: 1; transform: none; transition: none; }
  .schema .anneau { animation: none; }
  .cycle__flux { display: none; }
  .is-visible .schema .schema__pt circle, .is-visible .schema image.surgit, .cycle__halo { animation: none; }
}

/* --------------------------------------------------------------------------
   Noyau et satellites — savoir-faire de développement
   -------------------------------------------------------------------------- */

.etoile { position: relative; display: grid; place-items: center; padding: clamp(0.5rem, 1.5vw, 1rem) 0; }
.etoile__puces {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 0.6rem; width: 100%; margin-top: 0;
}
.savoir {
  display: flex; align-items: center; gap: 0.6rem;
  background: #fff; border: 1px solid var(--ligne);
  border-radius: 999px; padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  font-family: var(--font-titre); font-size: 0.82rem; font-weight: 600;
  color: var(--encre); transition: border-color 0.2s ease, transform 0.2s ease;
}
.savoir:hover { border-color: var(--indigo); transform: translateY(-2px); }
.savoir__ico {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brume); color: var(--indigo);
}
.savoir__ico svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   Panneau doux — grand bloc arrondi teinté, posé dans la page
   -------------------------------------------------------------------------- */

.panneau-doux {
  position: relative; overflow: hidden;
  background: var(--brume);
  border-radius: clamp(20px, 2.5vw, 30px);
  padding: clamp(1.4rem, 2.8vw, 2.25rem);
}
.panneau-doux--nuit {
  background: var(--indigo-fonce);
  color: rgba(255,255,255,0.82);
}
.panneau-doux--nuit h2, .panneau-doux--nuit h3 { color: #fff; }
.panneau-doux--nuit .lead { color: rgba(255,255,255,0.80); }
.panneau-doux::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--motif, url("/assets/img/motif-cercles-fonce.svg")) no-repeat right center / cover;
  opacity: 0.55; pointer-events: none;
}
.panneau-doux > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Tuiles d'intégration
   Pas de logos d'éditeurs : nous n'avons pas leurs fichiers ni leur
   autorisation. Des pastilles typographiques, sobres et lisibles, disent la
   même chose sans usurper une marque.
   -------------------------------------------------------------------------- */

.tuiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  max-width: 620px;
}
.tuile { text-align: center; }
.tuile__carre {
  aspect-ratio: 1; border-radius: 24%;
  display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--periwinkle-cl);
  box-shadow: 0 2px 10px rgba(20, 22, 58, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tuile:hover .tuile__carre { transform: translateY(-3px); box-shadow: var(--ombre-fort); }
.tuile__carre span {
  font-family: var(--font-titre); font-weight: 800;
  font-size: clamp(0.82rem, 1.7vw, 1rem); letter-spacing: -0.03em;
  color: var(--indigo);
}
/* Quand un fichier de logo existe, il remplace la pastille typographique.
   Les proportions varient beaucoup d'un éditeur à l'autre : on borne les deux
   dimensions et on laisse une marge à l'intérieur du carré. */
.tuile__carre img { max-width: 72%; max-height: 58%; width: auto; object-fit: contain; }
.tuile__carre[data-logo="workday"] img,
.tuile__carre[data-logo="silae"] img { max-height: 52%; }
.tuile__carre[data-logo="peoplesoft"] img { max-width: 78%; max-height: 26%; }
.tuile__nom {
  display: block; margin-top: 0.5rem;
  font-size: 0.74rem; color: var(--gris); letter-spacing: 0.01em;
}
/* Décalage alterné : la grille respire au lieu de former une matrice rigide. */
.tuiles--decale .tuile:nth-child(even) { transform: translateY(clamp(10px, 2vw, 20px)); }

/* Marques tierces : les noms sont cités pour décrire des interfaces réalisées.
   La mention écarte toute lecture en « nos partenaires », qui serait fausse. */
.tuiles__mention {
  margin-top: 1.1rem; max-width: 46ch;
  font-size: 0.76rem; line-height: 1.5; color: var(--gris-clair);
}
.section--nuit .tuiles__mention { color: rgba(255, 255, 255, 0.62); }
@media (max-width: 560px) { .tuiles--decale .tuile:nth-child(even) { transform: none; } }

/* Fond blanc franc : certains logos fournis portent leur propre aplat blanc,
   qui se détacherait sur une pastille translucide. */
.panneau-doux--nuit .tuile__carre { background: #fff; border-color: transparent; }
.panneau-doux--nuit .tuile__nom { color: rgba(255,255,255,0.72); }
.section--nuit .tuile__carre { background: #fff; border-color: transparent; }
.section--nuit .tuile__nom { color: rgba(255,255,255,0.72); }

/* --------------------------------------------------------------------------
   Carte d'appel vers une offre — reprend la couleur de sa destination
   -------------------------------------------------------------------------- */

.card.offre-formation, .card.offre-paie { background: var(--brume); border-color: transparent; }
.card.offre-formation:hover, .card.offre-paie:hover { border-color: var(--ligne-forte); }

/* --------------------------------------------------------------------------
   Secteurs de référence
   -------------------------------------------------------------------------- */

.secteurs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(238px, 100%), 1fr));
  gap: 1px; background: var(--ligne);
  border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden;
}
.secteur { background: #fff; padding: 1.25rem 1.4rem; }
.secteur__nom { font-family: var(--font-titre); font-weight: 600; font-size: 0.92rem; color: var(--encre); }
.secteur__taille { font-size: 0.86rem; color: var(--gris-clair); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
.section--brume .secteur { background: #fff; }

/* --------------------------------------------------------------------------
   Portrait du fondateur
   -------------------------------------------------------------------------- */

.portrait {
  width: clamp(96px, 12vw, 124px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(to bottom, var(--periwinkle-cl) 0 50%, var(--indigo-vif) 50% 100%);
  color: #fff;
  font-family: var(--font-titre); font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.03em;
}
.portrait img {
  width: 100%; height: 100%; object-fit: cover;
  /* Les portraits restent en couleur : c'est plus vivant et plus fidele que le
     noir et blanc, et les deux associes sont traites de la meme facon. */
}

.fondateur { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem); margin-bottom: 1.75rem; }
.fondateur__nom { font-family: var(--font-titre); font-weight: 700; font-size: 1.2rem; color: var(--encre); letter-spacing: -0.025em; }
.fondateur__role { font-size: 0.92rem; color: var(--gris); margin-top: 0.15rem; }

/* Les deux associes cote a cote : meme hauteur de carte, pas de defilement
   de l'un vers l'autre. Sous 900 px la grille repasse a une colonne. */
.duo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
.assoc {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-lg);
  box-shadow: var(--ombre);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.assoc .fondateur { margin-bottom: 1.35rem; }
.assoc .portrait { width: clamp(80px, 8vw, 100px); }
.assoc h3 { font-size: clamp(1.12rem, 1.6vw, 1.32rem); margin-bottom: 0.75rem; }
.assoc p { font-size: 0.96rem; }
.assoc p + p { margin-top: 0.7rem; }
.assoc h4 {
  margin-top: 1.5rem; margin-bottom: 0.65rem;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--indigo);
}
.assoc .card__list { font-size: 0.93rem; }
/* Les boutons restent en bas de carte quel que soit le volume de texte. */
.assoc .btn-row { margin-top: auto; padding-top: 1.5rem; }

@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Maquette d'interface — illustration produit, entièrement en CSS
   -------------------------------------------------------------------------- */

.maquette {
  /* max-width plutôt que la seule piste de grille : sur un téléphone, la piste
     se dimensionnait sur le contenu et débordait de douze pixels. */
  max-width: 100%; min-width: 0;
  border: 1px solid var(--ligne-forte); border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: var(--ombre-fort);
  font-family: var(--font-texte); line-height: 1.4;
}
.maquette__barre {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem; background: var(--indigo-nuit);
}
.maquette__pastilles { display: flex; gap: 5px; }
.maquette__pastilles i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.28); }
.maquette__titre {
  font-family: var(--font-titre); font-size: 0.68rem; font-weight: 600;
  color: rgba(255,255,255,0.72); letter-spacing: 0.04em; margin-left: 0.5rem;
}
.maquette__corps { display: grid; grid-template-columns: 156px minmax(0, 1fr); min-height: 300px; }
@media (max-width: 620px) { .maquette__corps { grid-template-columns: minmax(0, 1fr); } .maquette__nav { display: none; } }

.maquette__nav { background: var(--indigo-fonce); padding: 0.85rem 0.6rem; }
.maquette__groupe {
  font-family: var(--font-titre); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,0.40); padding: 0.7rem 0.55rem 0.35rem;
}
.maquette__lien {
  display: block; padding: 0.34rem 0.55rem; border-radius: 6px;
  font-size: 0.68rem; color: rgba(255,255,255,0.72);
}
.maquette__lien.actif { background: rgba(255,255,255,0.13); color: #fff; font-weight: 600; }

.maquette__vue { padding: 0.95rem 1.1rem 1.2rem; background: #FAFBFF; }
.maquette__entete {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem;
  margin-bottom: 0.85rem;
}
.maquette__h {
  font-family: var(--font-titre); font-weight: 700; font-size: 0.86rem;
  color: var(--encre); letter-spacing: -0.02em;
}
.maquette__jauge {
  flex: 1 1 90px; height: 5px; border-radius: 3px; background: var(--ligne);
  overflow: hidden; min-width: 70px;
}
.maquette__jauge span { display: block; height: 100%; background: var(--indigo); border-radius: 3px; }
.maquette__meta { font-size: 0.63rem; color: var(--gris-clair); font-variant-numeric: tabular-nums; }

/* Largeurs fixes : sans cela, un libellé long élargit le tableau au-delà du
   cadre de la maquette et la dernière colonne se retrouve coupée. */
.maquette table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.63rem; }
.maquette td { overflow-wrap: break-word; }
/* Les valeurs courtes (ratios, statuts) ne doivent jamais se couper. */
.maquette td:not(:first-child) { white-space: nowrap; }
.maquette th { overflow-wrap: normal; hyphens: none; }
.maquette thead th {
  text-align: left; padding: 0.4rem 0.45rem; color: #fff; font-weight: 700;
  font-family: var(--font-titre); font-size: 0.47rem;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.maquette tbody td {
  padding: 0.4rem 0.45rem; border-bottom: 1px solid var(--ligne);
  color: var(--encre-2); background: #fff;
}
.maquette tbody tr:last-child td { border-bottom: 0; }
.maquette__tab { border: 1px solid var(--ligne); border-radius: 8px; overflow: hidden; margin-bottom: 0.6rem; }

/* Bandeau d'indicateurs de la maquette */
.maquette__kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem; margin-bottom: 0.7rem;
}
.maquette__kpi {
  border: 1px solid var(--ligne); border-radius: 7px;
  background: #fff; padding: 0.42rem 0.5rem;
}
.maquette__kpi b {
  display: block; font-family: var(--font-titre); font-weight: 800;
  font-size: 0.82rem; letter-spacing: -0.02em; color: var(--indigo);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.maquette__kpi span {
  display: block; font-size: 0.5rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gris-clair); margin-top: 0.15rem;
}
@media (max-width: 620px) { .maquette__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.maquette__phase { padding: 0.4rem 0.6rem; display: flex; align-items: center; gap: 0.45rem; }
.maquette__point { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.maquette__ok  { color: #1a6b4a; font-weight: 700; }
.maquette__ko  { color: #a32020; font-weight: 700; }
.maquette__att { color: #7a5000; font-weight: 700; }
.maquette__etq {
  display: inline-block; padding: 0.12rem 0.42rem; border-radius: 999px;
  font-size: 0.55rem; font-weight: 700; font-family: var(--font-titre);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Fiches produit
   -------------------------------------------------------------------------- */

/* Bandeau de titre en bleu clair : la couleur de l'offre reste portée par les
   accents (étiquette, boutons, contenu), pas par le fond. */
.produit-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(172deg, #C7CFF4 -35%, #E3E9FB 62%);
  border-bottom: 1px solid var(--ligne);
  color: var(--encre-2);
}
.produit-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--motif-clair, url("/assets/img/motif-cercles-fonce.svg")) no-repeat right center / cover;
  opacity: 0.75; pointer-events: none;
}
.produit-hero > .wrap { position: relative; z-index: 1; padding-block: clamp(2rem, 3.6vw, 3rem); }
.produit-hero h1 { color: var(--encre); max-width: 18ch; }
.produit-hero .lead { color: var(--gris); max-width: 58ch; }

.produit-marque {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.4rem 0.9rem 0.4rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--ligne-forte); background: rgba(255,255,255,0.86);
  font-family: var(--font-titre); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--gris); margin-bottom: 1.15rem;
}
.produit-marque__logo {
  font-weight: 800; color: var(--indigo); font-size: 0.86rem; letter-spacing: -0.02em;
  display: inline-flex; align-items: center;
}
.produit-marque__logo img { max-height: 22px; width: auto; }

.domaine { border-top: 1px solid var(--ligne); padding-block: clamp(1.05rem, 1.9vw, 1.5rem); }
.domaine:last-child { border-bottom: 1px solid var(--ligne); }
/* Texte à gauche, illustration à droite : chaque domaine porte son aperçu. */
.domaine__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(1.25rem, 3.5vw, 2.75rem);
  align-items: center;
}
@media (max-width: 860px) { .domaine__grille { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }
.domaine__texte .domaine__liste { margin-top: 1.1rem; }
.apercu-frag--domaine { height: 162px; margin-top: 0; }
.apercu-frag--domaine .frag--a { width: 66%; }
.apercu-frag--domaine .frag--b { width: 60%; }
.domaine__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 0.45rem 1.25rem;
}
.domaine__liste li {
  position: relative; padding-left: 1.2rem; font-size: 0.9rem; color: var(--gris);
}
.domaine__liste li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(to bottom, var(--periwinkle-cl) 0 50%, var(--indigo) 50% 100%);
}

/* --------------------------------------------------------------------------
   Étapes
   -------------------------------------------------------------------------- */

.steps { display: grid; }
.step {
  display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: clamp(1.05rem, 1.9vw, 1.6rem);
  border-top: 1px solid var(--ligne);
}
.step:last-child { border-bottom: 1px solid var(--ligne); }
.step__index {
  font-family: var(--font-titre); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; color: var(--indigo); text-transform: uppercase;
}
.step__title { margin: 0.45rem 0 0; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.step__body { color: var(--gris); }
.step__body strong { color: var(--encre); font-weight: 600; }
@media (max-width: 760px) { .step { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } }

/* --------------------------------------------------------------------------
   Citation
   -------------------------------------------------------------------------- */

.citation { max-width: 46ch; }
.citation p {
  font-family: var(--font-titre); font-weight: 600;
  font-size: clamp(0.98rem, 1.25vw, 1.12rem); line-height: 1.45;
  letter-spacing: -0.01em; color: #fff;
}
.citation p + p { margin-top: 0.7rem; }
.citation .chute { color: var(--periwinkle-cl); }
.citation cite {
  display: block; margin-top: 1.5rem; font-style: normal;
  font-family: var(--font-texte); font-size: 0.92rem; color: rgba(255,255,255,0.66);
}

/* --------------------------------------------------------------------------
   Deux colonnes
   -------------------------------------------------------------------------- */

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }

.panel {
  background: #fff; border: 1px solid var(--ligne);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 2.4vw, 1.9rem);
  box-shadow: var(--ombre);
}
.panel h3 { margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Appel à l'action
   -------------------------------------------------------------------------- */

.cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--indigo-fonce);
  padding: clamp(1.6rem, 2.8vw, 2.25rem); text-align: center; color: rgba(255,255,255,0.80);
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(680px 400px at 50% -30%, rgba(128, 144, 232, 0.42), transparent 65%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 { color: #fff; max-width: 21ch; margin-inline: auto; }
.cta p { max-width: 52ch; margin-inline: auto; color: rgba(255,255,255,0.76); }
.cta .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: 0.4rem; }
.field[hidden] { display: none; }
.field label, .field__legende {
  font-family: var(--font-titre); font-size: 0.83rem; font-weight: 600;
  color: var(--encre);
}
/* Le widget anti-robot se dessine lui-meme : on lui laisse la largeur du champ
   et on evite qu'il pousse la colonne sur un petit ecran. */
.field--captcha { gap: 0.5rem; }
.field--captcha .cf-turnstile { max-width: 100%; overflow: hidden; }
.field input, .field select, .field textarea {
  width: 100%; background: #fff;
  border: 1px solid var(--ligne-forte); border-radius: 999px;
  color: var(--encre); font-family: inherit; font-size: 0.97rem;
  padding: 0.74rem 0.95rem; transition: border-color 0.2s, box-shadow 0.2s;
}
/* Une zone de saisie en gélule serait illisible sur plusieurs lignes : elle
   garde des coins arrondis, la même famille de formes sans la caricature. */
.field textarea { border-radius: 20px; }

/* Champ à icône : l'icône est posée dans la marge gauche du contrôle, hors du
   parcours de la souris et des lecteurs d'écran. Le contrôle, lui, garde son
   étiquette et sa validation natives. */
.champ { position: relative; display: grid; }
.champ__ic {
  position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--gris-clair); pointer-events: none;
  display: grid; place-items: center;
}
.champ__ic svg { width: 100%; height: 100%; }
.champ input, .champ select, .champ textarea { padding-left: 2.9rem; }
.champ--zone .champ__ic { top: 1.35rem; transform: none; }
.champ:focus-within .champ__ic { color: var(--indigo); }
/* La flèche de la liste déroulante est déjà dessinée en fond : rien à faire de
   plus, le décalage à gauche ne la concerne pas. */
.field textarea { resize: vertical; min-height: 148px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--gris-clair); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(57, 63, 185, 0.13);
}
.field select {
  appearance: none; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235E6484' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}

/* Téléphone : indicatif pays puis numéro. Les options portent le nom du pays
   en clair, ce qui permet de le rejoindre au clavier en tapant ses premières
   lettres ; sous 620px les deux champs passent l'un sous l'autre. */
.champ-tel {
  display: grid; gap: 0.55rem;
  grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr);
}
.champ-tel select { text-overflow: ellipsis; }
@media (max-width: 620px) { .champ-tel { grid-template-columns: minmax(0, 1fr); } }

/* Piège à robots : sorti du flux plutôt que masqué par display:none, que les
   automates savent reconnaître. aria-hidden et tabindex le retirent du parcours
   clavier et des lecteurs d'écran. */
.piege {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

.form__consent {
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-size: 0.88rem; color: var(--gris); line-height: 1.5;
}
.form__consent input { width: 17px; height: 17px; margin-top: 0.22rem; flex-shrink: 0; accent-color: var(--indigo); }
.form__consent a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }

.form__note {
  font-size: 0.85rem; color: var(--gris-clair);
  border-top: 1px solid var(--ligne); padding-top: 0.95rem;
}

/* Mention sur les données personnelles : présente sous le bouton, discrète,
   mais lisible sans effort. Elle ne remplace pas les mentions légales, elle
   dit l'essentiel là où l'information est saisie. */
.form__rgpd {
  font-size: 0.8rem; line-height: 1.55; color: var(--gris-clair);
  margin-top: -0.3rem;
}
.form__rgpd a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Coordonnées
   -------------------------------------------------------------------------- */

.coord { display: grid; gap: 1.4rem; margin: 0; }
.coord dt {
  font-family: var(--font-titre); font-size: 0.71rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-clair);
  margin-bottom: 0.25rem;
}
.coord dd { margin: 0; font-size: 1rem; color: var(--encre); }
.coord dd a { color: var(--indigo); border-bottom: 1px solid var(--ligne-forte); padding-bottom: 1px; }
.coord dd a:hover { border-bottom-color: var(--indigo); }
.coord dd.discret { font-size: 0.97rem; color: var(--gris); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--indigo-nuit); color: rgba(255,255,255,0.66);
  padding-block: clamp(2.25rem, 4vw, 3.25rem) 1.5rem;
}
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (max-width: 980px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

.site-footer .brand__text { color: #fff; }
.site-footer .brand__text span { color: var(--periwinkle-cl); }
.site-footer__tagline { color: rgba(255,255,255,0.62); font-size: 0.9rem; max-width: 36ch; margin-top: 1rem; }
.site-footer__baseline {
  font-family: var(--font-titre); font-size: 0.8rem; font-weight: 600;
  color: var(--periwinkle-cl); margin-top: 0.9rem;
}

.footer-col h3 {
  font-family: var(--font-titre); font-size: 0.71rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: rgba(255,255,255,0.72); font-size: 0.9rem; }
.footer-col a:hover { color: #fff; }

.site-footer__bottom {
  margin-top: clamp(1.75rem, 3vw, 2.25rem); padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem;
  justify-content: space-between; align-items: center;
  font-size: 0.83rem; color: rgba(255,255,255,0.60);
}

/* --------------------------------------------------------------------------
   Contenu éditorial
   -------------------------------------------------------------------------- */

.prose h2 { margin-top: 2.5rem; font-size: clamp(1.12rem, 1.6vw, 1.28rem); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--gris); }
.prose ul { padding-left: 1.15rem; display: grid; gap: 0.4rem; margin-bottom: 1.15rem; }
.prose a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--encre); font-weight: 600; }
.prose h3 {
  margin-top: 1.6rem; margin-bottom: 0.45rem;
  font-size: 0.98rem; font-weight: 700; color: var(--encre);
}
.prose .muted { font-size: 0.88rem; }

/* Tableau des traitements : sous 700px il defile dans son propre cadre plutot
   que de pousser la page vers la droite. */
.tableau-cadre {
  margin: 1.15rem 0 1.4rem; overflow-x: auto;
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  -webkit-overflow-scrolling: touch;
}
.tableau { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.86rem; }
.tableau th, .tableau td {
  padding: 0.7rem 0.9rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--ligne); color: var(--gris); line-height: 1.5;
}
.tableau thead th {
  background: var(--brume); color: var(--encre);
  font-family: var(--font-titre); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.01em; white-space: nowrap;
}
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau td:first-child { color: var(--encre); font-weight: 600; }

/* --------------------------------------------------------------------------
   Apparition au défilement
   -------------------------------------------------------------------------- */

/* Le contenu n'est masqué que si le JavaScript s'exécute : sans lui,
   tout reste lisible (la classe .js est posée par un script en ligne). */
.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   Bandeau de logos clients
   Les tuiles ont toutes la meme taille et les logos sont contenus dedans :
   quelle que soit la forme du fichier fourni, la rangee reste reguliere.
   La rangee est ecrite deux fois dans le HTML et translatee d'exactement une
   longueur : le defilement boucle sans saut visible. L'ecart entre tuiles est
   une marge et non un gap, sinon la moitie ne tomberait pas juste.
   -------------------------------------------------------------------------- */

/* Le bandeau a son propre titre : les témoignages parlent du parcours d'Éric,
   les logos disent qui a fait confiance à la société. Deux choses. */
.bandeau-logos__tete { text-align: center; margin-top: clamp(2.6rem, 5vw, 4rem); }
.bandeau-logos__titre {
  font-family: var(--font-titre); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: var(--encre); margin: 0 0 0.35rem;
}
.bandeau-logos__lead { font-size: 0.93rem; color: var(--gris); line-height: 1.55; margin: 0 auto; max-width: 56ch; }
.bandeau-logos {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  /* Les extremites s'estompent : le defilement sort du cadre au lieu d'y etre
     coupe net. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.bandeau-logos__piste {
  display: flex; align-items: stretch; width: max-content;
  padding: 0.35rem 0 0.8rem;
  animation: bandeau-defile 46s linear infinite;
}
.bandeau-logos__tuile {
  flex: 0 0 auto;
  /* La taille de la tuile et la marge interieure vivent ici : les bornes de
     l'image en decoulent, elles ne peuvent pas se desynchroniser. */
  --tuile-l: 104px; --tuile-h: 60px; --tuile-marge: 13px;
  width: var(--tuile-l); height: var(--tuile-h);
  margin-right: clamp(0.5rem, 1vw, 0.75rem);
  display: grid; place-items: center; padding: 0;
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-lg);
  box-shadow: var(--ombre);
  font-family: var(--font-titre); font-weight: 700; font-size: 0.72rem;
  color: var(--gris); text-align: center; line-height: 1.2;
}
.bandeau-logos__tuile img {
  /* Bornes en pixels, pas en pourcentage : dans une grille de hauteur non
     resolue, max-height:100% ne s'applique pas et un logo haut depassait. */
  max-width: calc(var(--tuile-l) - 2 * var(--tuile-marge));
  max-height: calc(var(--tuile-h) - 2 * var(--tuile-marge));
  width: auto; height: auto;
  /* Rangee homogene : les logos sont degrises pour ne pas rivaliser entre eux
     ni avec le reste de la page. */
  filter: grayscale(1) opacity(0.72);
}

@keyframes bandeau-defile {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-logos__piste { animation: none; transform: none; }
  .bandeau-logos { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   Carrousel de témoignages
   Sans script, les citations s'empilent : tout reste lisible. Avec, elles
   défilent par trois (deux, puis une sur un téléphone), d'elles-mêmes toutes
   les six secondes, et s'arrêtent dès que la souris ou le clavier s'y pose.
   -------------------------------------------------------------------------- */

.carrousel { position: relative; }
.carrousel__scene { display: grid; gap: 1rem; }

.temoin {
  margin: 0; background: #fff;
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  box-shadow: var(--ombre);
  padding: 1.15rem 1.25rem 1.1rem;
  display: flex; flex-direction: column;
}
/* Le guillemet qui ouvre la carte : un trait fin en indigo, c'est lui qui dit
   « parole de client ». Le texte reste en gris pour la lecture. */
.temoin::before {
  content: ""; display: block; width: 26px; height: 20px; margin: 0 0 0.7rem;
  background-color: var(--indigo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15.5c0-6 3.2-10.8 9-13.5M3 15.5a5 5 0 1 0 5-5 5.5 5.5 0 0 0-5 5z'/%3E%3Cpath d='M19 15.5c0-6 3.2-10.8 9-13.5M19 15.5a5 5 0 1 0 5-5 5.5 5.5 0 0 0-5 5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15.5c0-6 3.2-10.8 9-13.5M3 15.5a5 5 0 1 0 5-5 5.5 5.5 0 0 0-5 5z'/%3E%3Cpath d='M19 15.5c0-6 3.2-10.8 9-13.5M19 15.5a5 5 0 1 0 5-5 5.5 5.5 0 0 0-5 5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.temoin p { color: var(--gris); font-size: 0.86rem; line-height: 1.58; margin: 0; }
.temoin p + p { margin-top: 0.5rem; }
.temoin p:last-of-type { margin-bottom: 0.9rem; }
.temoin__pied {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--ligne);
}
.temoin__portrait {
  width: 38px; height: 38px; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(to bottom, var(--periwinkle-cl) 0 50%, var(--indigo-vif) 50% 100%);
  color: #fff; font-family: var(--font-titre); font-weight: 800; font-size: 0.74rem;
}
.temoin__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.temoin__nom { display: block; font-family: var(--font-titre); font-weight: 700; color: var(--encre); font-size: 0.88rem; }
.temoin__role { display: block; font-size: 0.76rem; color: var(--gris); margin-top: 0.1rem; line-height: 1.35; }
/* Le logo de la société du témoin, quand il nous l'a fourni, à droite de la signature. */
.temoin__logo { margin-left: auto; flex: none; max-height: 52px; max-width: 130px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 640px) { .temoin__logo { max-height: 42px; max-width: 96px; } }

/* La barre de commande n'existe que pour le script. */
.carrousel__barre { display: none; }
.carrousel__avis { margin-top: 0.9rem; text-align: center; font-size: 0.78rem; color: var(--gris-clair); }

/* Avec le script : une pile. La carte active devant, deux cartes derrière,
   un peu plus petites et remontées, le reste caché. On fait glisser la carte
   du doigt ou à la souris pour passer à la suivante. L'effet de verre : fond
   blanc translucide et flou de ce qui passe derrière. */
.js .carrousel { --pile-pas: 1.9rem; }
.js .carrousel__fenetre { overflow: visible; padding-top: calc(var(--pile-pas) * 2 + 0.3rem); }
.js .carrousel__scene {
  position: relative; display: block; max-width: 620px; margin-inline: auto;
  height: var(--pile-h, auto);
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .carrousel__scene > .temoin {
  position: absolute; left: 0; right: 0; top: 0;
  transform-origin: center top;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  will-change: transform;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 44px rgba(20, 22, 58, 0.13);
  padding: 1.1rem 1.3rem 1rem;
  touch-action: pan-y;
}
/* La carte active est quasi opaque : le texte de la carte suivante ne transparaît plus. */
.js .carrousel__scene > .temoin.est-active { z-index: 10; cursor: grab; background: rgba(255, 255, 255, 0.97); }
.js .carrousel__scene > .temoin.est-tiree { transition: none; cursor: grabbing; user-select: none; }
.js .carrousel__scene > .temoin.est-cachee { opacity: 0; transform: scale(0.8) translateY(calc(var(--pile-pas) * -3)); pointer-events: none; visibility: hidden; }
.js .carrousel__scene > .temoin:not(.est-active) { pointer-events: none; max-height: var(--pile-h, none); overflow: hidden; }
.js .temoin p { font-size: 0.88rem; line-height: 1.55; }
/* La citation la plus longue se lit un cran plus petit, pour rester dans la carte. */
.js .temoin--long p { font-size: 0.8rem; line-height: 1.45; }
@media (max-width: 640px) {
  .js .carrousel { --pile-pas: 1.3rem; }
  .js .carrousel__scene > .temoin { padding: 1.15rem 1.2rem 1.05rem; }
  .js .temoin p { font-size: 0.9rem; }
}

.js .carrousel__barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin-top: 1.3rem; justify-content: center;
}
@media (max-width: 520px) {
  .js .carrousel__barre { gap: 0.4rem; }
  .js .carrousel__fleche, .js .carrousel__pause { width: 36px; height: 36px; }
  .js .carrousel__points .carrousel__point { width: 18px; }
}
.js .carrousel__fleche, .js .carrousel__pause {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding: 0;
  background: #fff; border: 1px solid var(--ligne); border-radius: 50%;
  color: var(--indigo); cursor: pointer;
  box-shadow: var(--ombre); transition: background 0.2s, color 0.2s, transform 0.2s;
}
.js .carrousel__fleche svg, .js .carrousel__pause svg { width: 18px; height: 18px; }
.js .carrousel__fleche:hover, .js .carrousel__pause:hover { background: var(--indigo); color: #fff; }
.js .carrousel__fleche:active, .js .carrousel__pause:active { transform: scale(0.92); }
.js .carrousel__fleche:focus-visible, .js .carrousel__pause:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.js .carrousel__pause { margin-left: 0.5rem; }
.js .carrousel__pause .carrousel__ic-lecture { display: none; }
.js .carrousel__pause[aria-pressed="true"] .carrousel__ic-pause { display: none; }
.js .carrousel__pause[aria-pressed="true"] .carrousel__ic-lecture { display: block; }

.js .carrousel__points { display: flex; align-items: center; gap: 0; padding: 0 0.1rem; }
/* Le point visible fait 8 px ; la zone cliquable 24 px (WCAG 2.5.8). */
.carrousel__point {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
}
.carrousel__point::before {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 8px; height: 8px;
  margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--ligne-forte); transition: background 0.2s, transform 0.2s;
}
.carrousel__point[aria-current="true"]::before { background: var(--indigo); transform: scale(1.3); }
.carrousel__point:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .js .carrousel__scene, .js .carrousel__scene > .temoin { transition: none; }
  .js .carrousel__pause { display: none; }
}


/* Bouton d'envoi sur toute la largeur du formulaire, avec sa flèche. La flèche
   avance d'un cheveu au survol : le mouvement dit le sens de l'action. */
.btn--pleine {
  width: 100%; margin-top: 0.4rem;
  padding-top: 0.9rem; padding-bottom: 0.9rem; font-size: 0.94rem;
}
.btn--pleine svg { width: 18px; height: 18px; transition: transform 0.2s; }
.btn--pleine:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn--pleine:hover svg { transform: none; } }


/* --------------------------------------------------------------------------
   Confirmation d'envoi
   Un <dialog> natif : le navigateur se charge du focus, de la touche Echap et
   de l'inertie du reste de la page. Rien a reecrire en JavaScript.
   -------------------------------------------------------------------------- */

.dialogue {
  width: min(30rem, calc(100vw - 2.5rem));
  padding: 0; border: 0; border-radius: var(--r-lg);
  background: #fff; color: var(--encre);
  box-shadow: 0 24px 60px rgba(20, 22, 58, 0.22);
}
.dialogue::backdrop { background: rgba(20, 22, 58, 0.45); }
.dialogue__corps { padding: clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
.dialogue__coche {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: 0 auto 1.15rem;
  border-radius: 50%; background: #e8f6ee; color: #167a4d;
}
.dialogue__coche svg { width: 26px; height: 26px; stroke-width: 2.4; }
.dialogue__titre {
  font-family: var(--font-titre); font-weight: 700;
  font-size: clamp(1.08rem, 1.8vw, 1.26rem); letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.dialogue__corps p {
  color: var(--gris); font-size: 0.93rem; line-height: 1.6;
  margin: 0 auto 1.6rem; max-width: 32ch;
}
.dialogue[open] { animation: dialogue-entre 0.28s ease both; }
.dialogue[open]::backdrop { animation: dialogue-fond 0.28s ease both; }
@keyframes dialogue-entre { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes dialogue-fond { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dialogue[open], .dialogue[open]::backdrop { animation: none; }
}

/* --------------------------------------------------------------------------
   Retour en arrière, en tête de chaque page intérieure
   -------------------------------------------------------------------------- */

.retour {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-bottom: 1.1rem; padding: 0.32rem 0.8rem 0.32rem 0.55rem;
  font-family: var(--font-titre); font-size: 0.8rem; font-weight: 600;
  color: var(--indigo); background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ligne); border-radius: 999px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.retour svg { width: 15px; height: 15px; transition: transform 0.2s; }
.retour:hover, .retour:focus-visible { background: #fff; border-color: var(--periwinkle); color: var(--indigo-fonce); }
.retour:hover svg { transform: translateX(-3px); }
.retour:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Pictogrammes des entrées de menu
   -------------------------------------------------------------------------- */

.nav > a:not(.header-cta):not(.langues__a), .nav > .nav-groupe > a { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav__ic { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--periwinkle); transition: color 0.2s; }
.nav__ic svg { width: 16px; height: 16px; }
.nav a:hover .nav__ic, .nav a[aria-current="page"] .nav__ic { color: var(--indigo); }
@media (max-width: 940px) {
  .nav__ic { width: 20px; height: 20px; margin-right: 0.35rem; }
  .nav__ic svg { width: 18px; height: 18px; }
  .nav a:not(.header-cta):not(.langues__a) .nav__t { flex: 1; }
}

/* --------------------------------------------------------------------------
   Schéma du héros : liaisons dans les deux sens, pastilles cliquables
   -------------------------------------------------------------------------- */

/* Le second flux de chaque liaison part en sens inverse, décalé d'un demi-cycle
   pour ne jamais se superposer au premier. */
.noyau__flux--retour { animation-delay: calc(var(--i) * -0.5s - 3s); }

.noyau__lien {
  cursor: pointer; outline: none;
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.noyau__lien:hover, .noyau__lien:focus-visible { transform: scale(1.06); }
.noyau__lien:hover rect, .noyau__lien:focus-visible rect,
.noyau__lien:hover .noyau__acte-d, .noyau__lien:focus-visible .noyau__acte-d { stroke: #fff; stroke-width: 1.8; }
.noyau__lien:focus-visible rect, .noyau__lien:focus-visible .noyau__acte-d { stroke-width: 2.4; }
.noyau__lien:hover text { text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .noyau__lien { transition: none; } }

/* --------------------------------------------------------------------------
   Orbite : les deux solutions sous le dessin
   -------------------------------------------------------------------------- */

.orbite-bloc { grid-template-rows: auto auto; }
.orbite-bloc .orbite { grid-column: 1; grid-row: 1; }
.orbite-bloc .orbite__panneaux { grid-column: 2; grid-row: 1 / span 2; }
.orbite__solutions {
  grid-column: 1; grid-row: 2;
  max-width: 440px; margin: 0.2rem auto 0; text-align: center;
  font-size: 0.86rem; line-height: 1.55; color: var(--gris);
}
.orbite__solutions a { font-weight: 600; color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--periwinkle); }
.orbite__solutions a:hover { color: var(--indigo-fonce); text-decoration-color: currentColor; }
@media (max-width: 980px) {
  .orbite-bloc { grid-template-rows: none; }
  .orbite-bloc .orbite, .orbite-bloc .orbite__panneaux, .orbite__solutions { grid-column: auto; grid-row: auto; }
}

/* --------------------------------------------------------------------------
   Ouverture : le logotype se compose à l'arrivée sur le site
   Une fois par session (la classe est posée avant le rendu par tete.js),
   jamais pour qui a demandé moins de mouvement.
   -------------------------------------------------------------------------- */

html.intro::after {
  content: ""; position: fixed; inset: 0; z-index: 9998;
  background: var(--indigo-nuit);
  pointer-events: none;
  /* Si le script principal ne dessinait pas le logo, le voile s'efface seul. */
  animation: intro-voile 0.5s ease 2.6s forwards;
}
@keyframes intro-voile { to { opacity: 0; visibility: hidden; } }

.intro-logo {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--indigo-nuit);
  animation: intro-sortie 0.5s ease 1.45s forwards;
}
.intro-logo svg { width: clamp(150px, 26vmin, 230px); height: auto; overflow: visible; }
.intro-logo .intro__marque {
  transform-box: fill-box; transform-origin: center;
  animation: intro-marque 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}
.intro-logo .intro__haut, .intro-logo .intro__bas {
  animation: intro-demi 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro-logo .intro__haut { transform: translateY(-800px); }
.intro-logo .intro__bas  { transform: translateY(800px); animation-delay: 0.06s; }
.intro-logo .intro__lettre {
  opacity: 0; transform: translateY(42px);
  animation: intro-lettre 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro-logo .intro__j { animation-delay: 0.42s; }
.intro-logo .intro__o { animation-delay: 0.54s; }
.intro-logo .intro__y { animation-delay: 0.66s; }
.intro-logo .intro__barre {
  transform-box: fill-box; transform-origin: left center; transform: scaleX(0);
  animation: intro-barre 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.88s forwards;
}
@keyframes intro-demi   { to { transform: none; } }
@keyframes intro-lettre { to { opacity: 1; transform: none; } }
@keyframes intro-barre  { to { transform: scaleX(1); } }
@keyframes intro-marque { to { transform: scale(1.12); } }
@keyframes intro-sortie { to { opacity: 0; visibility: hidden; } }
.intro-logo.est-finie { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.intro::after, .intro-logo { display: none; }
}

/* --------------------------------------------------------------------------
   Les pictos du menu bougent : un petit sursaut au survol, une rotation
   complète au clic. Rien sous « moins de mouvement ».
   -------------------------------------------------------------------------- */

.nav__ic svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav a:hover .nav__ic svg, .nav a:focus-visible .nav__ic svg { transform: translateY(-2px) scale(1.18) rotate(-8deg); }
.nav a:active .nav__ic svg { transform: scale(0.9); transition-duration: 0.08s; }
.nav a.est-clique .nav__ic svg { animation: nav-ic-tour 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes nav-ic-tour {
  0%   { transform: rotate(0) scale(1); }
  50%  { transform: rotate(180deg) scale(1.25); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Le bouton « Parlons-en » et les autres boutons : une pression nette au clic. */
.btn:active, .header-cta:active { transform: translateY(1px) scale(0.97); transition-duration: 0.08s; }

/* Les pictos des méga-menus et des satellites de l'orbite suivent le même geste. */
.nav-menu__ic svg, .orbite__ic svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-menu__cols a:hover .nav-menu__ic svg, .nav-menu__cols a:focus-visible .nav-menu__ic svg,
.orbite__n:hover .orbite__ic svg, .orbite__n[aria-selected="true"] .orbite__ic svg { transform: scale(1.18) rotate(-8deg); }

@media (prefers-reduced-motion: reduce) {
  .nav__ic svg, .nav-menu__ic svg, .orbite__ic svg { transition: none; transform: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Bandeau de logos fixe : avec deux logos seulement, on ne fait pas défiler,
   on les pose au centre, un peu plus grands.
   -------------------------------------------------------------------------- */

.bandeau-logos--fixe { -webkit-mask-image: none; mask-image: none; }
.bandeau-logos--fixe .bandeau-logos__piste {
  width: auto; justify-content: center; animation: none; transform: none;
  gap: clamp(0.8rem, 2vw, 1.4rem);
}
.bandeau-logos--fixe .bandeau-logos__tuile { --tuile-l: 150px; --tuile-h: 78px; --tuile-marge: 16px; margin-right: 0; }

/* Les ancres atterrissent sous l'en-tête collant, pas derrière. */
[id] { scroll-margin-top: 92px; }

/* --------------------------------------------------------------------------
   Le logotype JOY Talents bouge : il ne change jamais de couleur, mais la
   pastille fait un tour sur elle-même au survol et se penche de temps en
   temps, et le nom glisse d'un cheveu.
   -------------------------------------------------------------------------- */

.brand__mark {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: brand-penche 9s ease-in-out infinite;
}
.brand:hover .brand__mark, .brand:focus-visible .brand__mark { transform: rotate(360deg) scale(1.1); animation: none; }
.brand__text, .brand__text span { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.brand:hover .brand__text { transform: translateX(3px); }
.brand:hover .brand__text span { transform: translateX(2px); }
.brand:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; border-radius: 8px; }
@keyframes brand-penche {
  0%, 88%, 100% { transform: rotate(0); }
  91% { transform: rotate(-10deg) scale(1.05); }
  94% { transform: rotate(8deg) scale(1.05); }
  97% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .brand__mark { animation: none; transition: none; }
  .brand:hover .brand__mark, .brand:hover .brand__text, .brand:hover .brand__text span { transform: none; }
}

/* --------------------------------------------------------------------------
   Workforce AI : la couche d'IA de Cornerstone, présentée sous les modules
   -------------------------------------------------------------------------- */

.panel--ia { margin-top: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--ligne); background: linear-gradient(160deg, #fff, var(--brume)); }
.panel--ia__tete { display: flex; gap: 1.1rem; align-items: flex-start; }
.panel--ia__tete .card__icone { flex: none; }
.panel--ia__tete h3 { margin: 0.25rem 0 0.5rem; font-size: clamp(1.15rem, 2vw, 1.4rem); }
.panel--ia__tete p { margin: 0; color: var(--gris); line-height: 1.6; max-width: 70ch; }
.panel--ia__grille { margin-top: 1.6rem; gap: 1.4rem 2.4rem; }
.panel--ia__grille > div { border-top: 1px solid var(--ligne-forte); padding: 0.95rem 0 0; }
.panel--ia__grille b { display: block; font-family: var(--font-titre); font-size: 0.92rem; color: var(--encre); margin-bottom: 0.3rem; }
.panel--ia__grille p { margin: 0; font-size: 0.88rem; color: var(--gris); line-height: 1.55; }
.panel--ia__note { margin: 1.2rem 0 0; font-size: 0.92rem; color: var(--encre-2); line-height: 1.6; border-left: 3px solid var(--periwinkle); padding-left: 0.9rem; }
@media (max-width: 640px) { .panel--ia__tete { flex-direction: column; gap: 0.6rem; } }

/* L'illustration Workforce AI : une carte d'agent au centre, les briques de la
   couche autour, des flux qui circulent. Données fictives, style du site. */
.panel--ia__figure { margin: 1.4rem 0 0; }
.wai { display: block; width: 100%; max-width: 640px; height: auto; margin-inline: auto; overflow: visible; }
.wai__anneau { fill: none; stroke: var(--periwinkle-cl); stroke-width: 1.2; stroke-dasharray: 3 8; }
.wai__fil { fill: none; stroke: var(--periwinkle); stroke-width: 1.4; opacity: 0.55; }
.wai__flux { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 300; stroke-dashoffset: 310; animation: wai-flux 5s linear infinite; }
.wai__flux--a { stroke: var(--indigo); animation-delay: 0s; }
.wai__flux--b { stroke: #C0740F; animation-delay: -1.7s; }
.wai__flux--c { stroke: #169B6B; animation-delay: -3.4s; }
@keyframes wai-flux { to { stroke-dashoffset: 0; } }
.wai__t { font-family: var(--font-texte); font-size: 10.5px; fill: var(--encre); }
.wai__t--b { fill: #fff; font-weight: 600; font-size: 10.5px; }
.wai__t--g { fill: var(--gris); font-size: 10px; }
.wai__t--p { fill: var(--gris); font-size: 9px; }
.wai__t--i { fill: var(--indigo); font-weight: 600; font-size: 9.5px; }
.wai__n { font-family: var(--font-titre); font-size: 15px; font-weight: 800; }
.wai__barre { fill: var(--periwinkle); transform-box: fill-box; transform-origin: bottom; animation: wai-barre 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.4s); }
@keyframes wai-barre { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.72); } }
.wai__pastille rect { fill: #fff; stroke-width: 1.4; }
.wai__pastille text { font-family: var(--font-titre); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }
.wai__pastille--a rect { stroke: var(--indigo); } .wai__pastille--a text { fill: var(--indigo); }
.wai__pastille--b rect { stroke: #C0740F; }       .wai__pastille--b text { fill: #9C5A05; }
.wai__pastille--c rect { stroke: #169B6B; }       .wai__pastille--c text { fill: #12704F; }
@media (prefers-reduced-motion: reduce) { .wai__flux, .wai__barre { animation: none; } .wai__flux { stroke-dasharray: none; opacity: 0.3; } }

/* --------------------------------------------------------------------------
   Cibles tactiles (WCAG 2.5.8) : onglets et fil d'Ariane sur écran tactile
   -------------------------------------------------------------------------- */
.card h2.card__h4 { font-size: 1.02rem; font-weight: 600; }
@media (hover: none) and (pointer: coarse) {
  .feuillet__ong { min-height: 40px; }
}
.bandeau-partenaire__lien { padding-block: 0.45rem; margin-block: -0.45rem; }
.form__consent input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--indigo); }

/* --------------------------------------------------------------------------
   Grilles de cartes : plus de boîtes identiques. Chaque entrée est un bloc
   ouvert sous un filet, l'icône en repère ; seules les grilles `grid--boites`
   (cartes produit colorées) gardent leur cadre.
   -------------------------------------------------------------------------- */
.grid:not(.grid--boites) { gap: 2rem 2.6rem; }
.grid:not(.grid--boites) > .card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 1.25rem 0 0; border-top: 1px solid var(--ligne-forte);
  transition: border-color 0.25s ease;
}
.grid:not(.grid--boites) > .card:hover { transform: none; box-shadow: none; border-top-color: var(--indigo); }
.section--brume .grid:not(.grid--boites) > .card { border-color: var(--ligne-forte); box-shadow: none; }
.section--brume .grid:not(.grid--boites) > .card:hover { border-top-color: var(--indigo); }
.grid:not(.grid--boites) > .card .card__icone { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 0.95rem; }
.grid:not(.grid--boites) > .card .card__icone svg { width: 20px; height: 20px; }
.grid:not(.grid--boites) > .card h3.card__h4, .grid:not(.grid--boites) > .card h4 {
  border-bottom: 0; padding-bottom: 0; margin-bottom: 0.55rem; font-size: 1.06rem; font-weight: 700;
}
.grid:not(.grid--boites) > .card .card__list { margin-top: 0.9rem; }

/* Deux colonnes : chaque entrée devient une ligne, titre à gauche, contenu à droite. */
@media (min-width: 720px) {
  .grid--2:not(.grid--boites) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grid--2:not(.grid--boites) > .card { display: flow-root; padding: 1.5rem 0; }
  .grid--2:not(.grid--boites) > .card:last-child { border-bottom: 1px solid var(--ligne-forte); }
  .grid--2:not(.grid--boites) > .card > .card__icone,
  .grid--2:not(.grid--boites) > .card > .activite__num,
  .grid--2:not(.grid--boites) > .card > .card__num,
  .grid--2:not(.grid--boites) > .card > h3,
  .grid--2:not(.grid--boites) > .card > h2 { float: left; clear: left; width: 34%; margin-right: 0; }
  .grid--2:not(.grid--boites) > .card > h3 { font-size: 1.15rem; margin-bottom: 0.3rem; padding-right: 1.5rem; }
  .grid--2:not(.grid--boites) > .card > .card__icone { width: 38px; margin-bottom: 0.8rem; }
  .grid--2:not(.grid--boites) > .card > :not(.card__icone):not(.activite__num):not(.card__num):not(h3):not(h2) { margin-left: 34%; }
  .grid--2:not(.grid--boites) > .card > .card__list { margin-top: 0; }
  .grid--2:not(.grid--boites) > .card > p + .card__list { margin-top: 0.8rem; }
}

/* Sections sombres : le bloc ouvert prend les couleurs de nuit. */
.section--nuit .grid:not(.grid--boites) > .card,
.panneau-doux--nuit .grid:not(.grid--boites) > .card { border-top-color: rgba(255, 255, 255, 0.28); }
.section--nuit .grid:not(.grid--boites) > .card:hover,
.panneau-doux--nuit .grid:not(.grid--boites) > .card:hover { border-top-color: #fff; }
.section--nuit .grid--2:not(.grid--boites) > .card:last-child { border-bottom-color: rgba(255, 255, 255, 0.28); }
.section--nuit .grid:not(.grid--boites) > .card h3,
.section--nuit .grid:not(.grid--boites) > .card h4,
.panneau-doux--nuit .grid:not(.grid--boites) > .card h3,
.panneau-doux--nuit .grid:not(.grid--boites) > .card h4 { color: #fff; }
.section--nuit .grid:not(.grid--boites) > .card p,
.panneau-doux--nuit .grid:not(.grid--boites) > .card p { color: rgba(255, 255, 255, 0.78); }
.section--nuit .grid:not(.grid--boites) > .card .card__list li,
.panneau-doux--nuit .grid:not(.grid--boites) > .card .card__list li { color: rgba(255, 255, 255, 0.84); }
.section--nuit .grid:not(.grid--boites) > .card .card__list strong,
.panneau-doux--nuit .grid:not(.grid--boites) > .card .card__list strong { color: #fff; }
.section--nuit .grid:not(.grid--boites) > .card .card__list li::before,
.panneau-doux--nuit .grid:not(.grid--boites) > .card .card__list li::before {
  background: linear-gradient(to bottom, #fff 0 50%, var(--periwinkle-cl) 50% 100%);
}
.section--nuit .grid:not(.grid--boites) > .card .card__icone,
.panneau-doux--nuit .grid:not(.grid--boites) > .card .card__icone {
  background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.section--nuit .grid:not(.grid--boites) > .card .activite__num,
.panneau-doux--nuit .grid:not(.grid--boites) > .card .activite__num { color: var(--periwinkle-cl); }
.section--nuit .grid:not(.grid--boites) > .card .lien-fleche,
.panneau-doux--nuit .grid:not(.grid--boites) > .card .lien-fleche { color: #fff; }

/* --------------------------------------------------------------------------
   Ressources : liste d'articles et page d'article
   -------------------------------------------------------------------------- */
.ressources__liste { list-style: none; margin: 0; padding: 0; max-width: 980px; }
.ressources__item {
  display: grid; grid-template-columns: 130px 240px minmax(0, 1fr); gap: 0.3rem 2.2rem;
  align-items: start; padding: 1.6rem 0; border-top: 1px solid var(--ligne-forte);
}
.ressources__visuel { display: block; border-radius: 14px; overflow: hidden; box-shadow: var(--ombre); }
.ressources__visuel img { display: block; width: 100%; height: auto; transition: transform 0.4s ease; }
.ressources__item:hover .ressources__visuel img { transform: scale(1.03); }
.article__visuel { margin: 0 0 2rem; border-radius: 16px; overflow: hidden; box-shadow: var(--ombre); }
.article__visuel img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .ressources__item { grid-template-columns: 130px minmax(0, 1fr); }
  .ressources__visuel { grid-column: 2; max-width: 360px; margin-bottom: 0.4rem; }
}
.ressources__item:last-child { border-bottom: 1px solid var(--ligne-forte); }
.ressources__date {
  font-family: var(--font-titre); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--gris-clair); padding-top: 0.3rem; font-variant-numeric: tabular-nums;
}
.ressources__item h2 { font-size: clamp(1.12rem, 1.6vw, 1.32rem); line-height: 1.3; margin: 0 0 0.5rem; }
.ressources__item h2 a { color: inherit; text-decoration: none; }
.ressources__item h2 a:hover, .ressources__item h2 a:focus-visible { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.ressources__item p { color: var(--gris); margin-bottom: 0.7rem; max-width: 62ch; }
.ressources__note { margin-top: 1.6rem; font-size: 0.92rem; color: var(--gris-clair); max-width: 62ch; }
.ressources__note a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .ressources__item { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } .ressources__visuel { grid-column: 1; max-width: none; margin: 0.4rem 0 0.8rem; } }

.page-hero--article h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); max-width: 22ch; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0.9rem 0 1.1rem;
  font-size: 0.85rem; color: var(--gris-clair);
}
.article p { font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.1rem; }
.article ul { margin-top: -0.3rem; }
.article li { line-height: 1.6; }
.article h2 { margin-top: 2.3rem; font-size: clamp(1.18rem, 1.8vw, 1.4rem); }
.article__fin { margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid var(--ligne-forte); }

/* Entre le menu burger (940 px) et les grands écrans, six entrées plus la langue
   et l'appel à l'action ne tiennent qu'en masquant les pictos. */
.nav a, .header-cta { white-space: nowrap; }
@media (min-width: 941px) and (max-width: 1180px) {
  .nav > a:not(.header-cta):not(.langues__a) .nav__ic, .nav > .nav-groupe > a .nav__ic { display: none; }
  .nav a { padding: 0.5rem 0.6rem; font-size: 0.84rem; }
}

/* Article long : encadrés, sommaire, FAQ, auteur, liens connexes */
.encadre {
  margin: 1.6rem 0 1.9rem; padding: 1.15rem 1.3rem; border-radius: 14px;
  background: var(--brume); border: 1px solid var(--ligne);
}
.encadre__titre {
  font-family: var(--font-titre); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--indigo); margin: 0 0 0.6rem;
}
.encadre ul, .encadre ol { margin-bottom: 0; }
.encadre p:last-child { margin-bottom: 0; }
.encadre--definition { background: #fff; border-color: var(--ligne-forte); }
.encadre--definition p { font-size: 0.98rem; }
.sommaire { margin: 0 0 2.2rem; padding: 1.1rem 1.3rem; border: 1px solid var(--ligne-forte); border-radius: 14px; }
.sommaire ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.sommaire li { color: var(--gris); font-size: 0.95rem; }
.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover, .sommaire a:focus-visible { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.liste-coches { list-style: none; padding: 0; }
.liste-coches li { position: relative; padding-left: 1.7rem; }
.liste-coches li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.faq { display: grid; gap: 0.6rem; margin: 0 0 1rem; }
.faq__q { border: 1px solid var(--ligne-forte); border-radius: 12px; padding: 0 1.1rem; background: #fff; }
.faq__q summary {
  cursor: pointer; list-style: none; padding: 0.95rem 2rem 0.95rem 0; position: relative;
  font-family: var(--font-titre); font-weight: 700; font-size: 0.98rem; color: var(--encre);
}
.faq__q summary::-webkit-details-marker { display: none; }
.faq__q summary::after {
  content: ""; position: absolute; right: 0.2rem; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.25s ease;
}
.faq__q[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__q summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 6px; }
.faq__q p { margin: 0 0 1rem; font-size: 0.98rem; }
.article__auteur {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 1.2rem; align-items: center;
  margin: 2.6rem 0 1.6rem; padding: 1.2rem 1.3rem; border-radius: 14px; background: var(--brume);
}
.article__auteur img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.article__auteur p { margin: 0; font-size: 0.95rem; }
.article__auteur-nom { font-family: var(--font-titre); font-weight: 700; color: var(--encre); margin-bottom: 0.2rem; }
.article__liens { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--ligne-forte); }
.article__liens ul { margin-bottom: 0; }
.article__liens li { font-size: 0.98rem; }
@media (prefers-reduced-motion: reduce) { .faq__q summary::after { transition: none; } }

.article__fil { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; color: var(--gris-clair); margin: 0.6rem 0 0.9rem; }
.article__fil a { color: var(--indigo); text-decoration: none; }
.article__fil a:hover, .article__fil a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.article .tableau-cadre { margin: 1.3rem 0 1.6rem; }
.article .tableau { min-width: 30rem; }
.article .tableau td { color: var(--gris); vertical-align: top; }
.tableau__legende { font-family: var(--font-titre); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--indigo); margin: 1.3rem 0 0.5rem; }
.tableau__legende + .tableau-cadre { margin-top: 0; }
.encadre--appel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.6rem; align-items: center;
  background: var(--indigo-fonce); border-color: var(--indigo-fonce); color: #fff; margin: 2.2rem 0;
}
.encadre--appel .encadre__titre { color: var(--periwinkle-cl); }
.encadre--appel p { color: rgba(255, 255, 255, 0.82); font-size: 0.96rem; }
.prose .btn, .prose .btn:hover { text-decoration: none; }
.encadre--appel .btn { white-space: nowrap; color: #fff; }
@media (max-width: 640px) { .encadre--appel { grid-template-columns: minmax(0, 1fr); } }

/* Article : colonne de lecture large et colonne latérale collante */
.article-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
@media (min-width: 1000px) {
  .article-grille {
    grid-template-columns: minmax(0, 780px) 320px;
    column-gap: clamp(2.5rem, 5vw, 5.5rem); justify-content: space-between; align-items: start;
  }
  .article-grille--hero { align-items: center; }
  .article-cote { position: sticky; top: 92px; }
}
.page-hero--article h1 { max-width: 26ch; }
.article__visuel--hero { margin: 0; }
.article-cote { display: grid; gap: 1.2rem; }
.sommaire--colle { margin: 0; }
.article-cote__carte {
  background: var(--indigo-fonce); color: #fff; padding: 1.3rem 1.4rem 1.4rem; border-radius: 14px;
  display: grid; gap: 0.7rem; justify-items: start;
}
.article-cote__carte .encadre__titre { color: var(--periwinkle-cl); margin: 0; }
.article-cote__carte p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; line-height: 1.55; }
.article-cote__carte .btn { margin-top: 0.3rem; }
@media (max-width: 999px) {
  .article-cote { order: -1; }
  .article-cote__carte { display: none; }
}