/* ============================================================================
   CAP LINK — Premium 2.1.0 · composition de la page d'accueil

   Chargée UNIQUEMENT sur l'accueil.

   2.1.0 — FINAL VISUAL POLISH. La composition de 2.0.0 est validée et n'est pas
   retouchée : aucune section ajoutée, aucune section retirée, aucun contenu
   nouveau. Ce fichier corrige la finition — lisibilité, proportions, alignements,
   pictogrammes, états — et surtout un défaut systémique découvert en recette :

   UNE PARTIE DES RÈGLES DE 2.0.0 NE S'APPLIQUAIT PAS.

   Relevé sur la page réellement servie, valeur calculée contre valeur déclarée :

     .cl-assistant > p     couleur attendue #566472   →  rgb(229,237,243)  (1,18:1)
     .cl-assistant-grid a  min-height 48px            →  auto
     .cl-profile           aligné à gauche, 32px      →  centré, 24px
     .cl-profile span      15px                       →  13px
     .cl-feature           filet doré, aligné gauche  →  aucun filet, centré
     .cl-stat strong       ~25px                      →  37,6px
     .cl-card p            15px                       →  16px

   Même cause que l'anneau de focus des versions 1.0.x : `caplink.css` se charge
   APRÈS cette feuille (ordre réel : rc.css · premium.css · caplink.css ·
   orientation.css) et ses sélecteurs sont souvent aussi spécifiques. À
   spécificité égale, l'ordre tranche, et l'ordre est défavorable.

   Deux mesures, appliquées systématiquement :
     1. tous les sélecteurs sont préfixés `html body.home` — deux éléments de
        plus, donc une spécificité strictement supérieure à celle des briques ;
     2. `!important` sur les déclarations dont la recette a montré qu'elles
        étaient écrasées malgré la spécificité.

   Ce n'est pas du CSS élégant. C'est la réponse juste pour une couche de
   surcharge additive dont la feuille est chargée avant celles qu'elle corrige,
   et dont l'alternative — modifier les briques — est interdite.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   RESPIRATION GÉNÉRALE
---------------------------------------------------------------------------- */
html body.home .cl-section{ padding-block:var(--clp-section-y); }
html body.home .cl-wrap{ padding-inline:var(--clp-gutter); }

html body.home .cl-section h2{
  font-size:var(--clp-fs-h2);
  line-height:var(--clp-lh-h2);
  letter-spacing:var(--clp-ls-h2);
  font-weight:600;
  color:var(--clp-ink);
  margin:0 0 var(--clp-s4);
}
html body.home .cl-lead{
  font-size:var(--clp-fs-lead) !important;
  line-height:1.66 !important;
  color:var(--clp-body) !important;
  max-width:60ch;
  margin-bottom:var(--clp-s7);
}

/* Le libellé de section portait DEUX filets : celui de la brique, à gauche,
   collé au texte, et celui ajouté par cette couche. On garde un seul filet. */
html body.home .cl-signature-label{
  display:inline-block;
  font-size:var(--clp-fs-meta);
  font-weight:700;
  letter-spacing:var(--clp-ls-meta);
  text-transform:uppercase;
  color:var(--clp-gold-text) !important;
  margin-bottom:var(--clp-s3);
  padding-left:0;
}
html body.home .cl-signature-label::before{
  content:"";
  display:inline-block;
  width:26px; height:2px;
  background:var(--clp-gold);
  border-radius:2px;
  margin-right:var(--clp-s3);
  vertical-align:middle;
}

/* ============================================================================
   0. HERO
   ============================================================================ */
html body.home .cl-hero{
  position:relative;
  isolation:isolate;
  padding-block:clamp(72px, 3.5rem + 4.4vw, 132px) clamp(96px, 4rem + 6vw, 156px);
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(200,155,60,.16) 0%, rgba(200,155,60,0) 58%),
    radial-gradient(100% 120% at 0% 100%, rgba(14,42,71,.9) 0%, rgba(6,28,48,0) 60%),
    linear-gradient(168deg, #0b2b49 0%, #082640 46%, #061c30 100%);
}
html body.home .cl-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,
    rgba(200,155,60,0) 0%, rgba(200,155,60,.55) 22%,
    rgba(200,155,60,.55) 78%, rgba(200,155,60,0) 100%);
}
html body.home .cl-hero-grid{
  align-items:center;
  gap:clamp(32px, 2rem + 2.4vw, 72px);
}
html body.home .cl-eyebrow{
  font-size:var(--clp-fs-meta) !important;
  font-weight:700;
  letter-spacing:var(--clp-ls-meta);
  text-transform:uppercase;
  color:var(--clp-gold) !important;
  margin-bottom:var(--clp-s5);
}
html body.home .cl-hero h1{
  font-size:var(--clp-fs-display);
  line-height:var(--clp-lh-display);
  letter-spacing:var(--clp-ls-display);
  max-width:14ch;
  margin:0 0 var(--clp-s5);
}
/* L'accentuation dorée est conservée. Le soulignement de 2.0.0 est SUPPRIMÉ :
   sur la page réelle, il se lisait comme un filet séparateur posé entre le
   titre et le chapô, pas comme un souligné. L'or seul suffit à accentuer. */
html body.home .cl-hero-accent{ color:var(--clp-gold); }

html body.home .cl-hero > .cl-wrap > div > p{
  font-size:clamp(1.0625rem, 1rem + .28vw, 1.25rem) !important;
  line-height:1.64 !important;
  color:rgba(236,242,247,.9) !important;
  max-width:52ch;
  margin:0 0 var(--clp-s7);
}
html body.home .cl-hero .cl-actions{
  display:flex; flex-wrap:wrap; gap:var(--clp-s3);
  margin-bottom:var(--clp-s6);
}
html body.home .cl-hero .cl-btn{
  padding:15px 28px !important;
  font-weight:600;
  white-space:nowrap;
}
html body.home .cl-hero .cl-btn-gold{ box-shadow:0 10px 26px rgba(200,155,60,.28); }
html body.home .cl-hero .cl-btn-light{
  background:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.32) !important;
}
html body.home .cl-hero .cl-btn-light:hover{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.55) !important;
}
/* Ligne de réassurance : les trois marqueurs étaient collés les uns aux autres. */
html body.home .cl-trust{
  display:flex; flex-wrap:wrap;
  gap:var(--clp-s3) var(--clp-s6);
  font-size:var(--clp-fs-small) !important;
  color:rgba(226,235,242,.84) !important;
}
html body.home .cl-trust > *{ display:inline-flex; align-items:center; }

/* Le panneau d'intentions.
   Il était semi-transparent (blanc à 97 %) : son chapô, resté en gris très
   clair hérité du hero, tombait à 1,18:1 — illisible. Le panneau devient
   opaque et le chapô reprend la couleur des textes secondaires. */
html body.home .cl-assistant{
  background:#fff !important;
  border-radius:var(--clp-radius-lg) !important;
  border:1px solid rgba(8,38,64,.08) !important;
  box-shadow:var(--clp-shadow-3);
  padding:clamp(24px, 1.2rem + 1vw, 32px) !important;
}
html body.home .cl-assistant h2{
  font-size:1.3125rem !important;
  line-height:1.28 !important;
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--clp-ink) !important;
  margin:0 0 var(--clp-s2) !important;
}
html body.home .cl-assistant > p{
  font-size:var(--clp-fs-small) !important;
  line-height:1.55 !important;
  color:var(--clp-muted) !important;
  margin:0 0 var(--clp-s5) !important;
}
html body.home .cl-assistant-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:var(--clp-s2) !important;
}
html body.home .cl-assistant-grid a{
  display:flex !important;
  align-items:center;
  gap:var(--clp-s2);
  min-height:52px !important;
  padding:12px 14px !important;
  border:1px solid var(--clp-line) !important;
  border-radius:var(--clp-radius-btn) !important;
  background:#fff !important;
  color:var(--clp-ink) !important;
  font-weight:600 !important;
  font-size:var(--clp-fs-small) !important;
  line-height:1.3 !important;
  text-decoration:none;
  transition:border-color var(--clp-dur) var(--clp-ease),
             background-color var(--clp-dur) var(--clp-ease),
             transform var(--clp-dur) var(--clp-ease);
}
html body.home .cl-assistant-grid a:hover{
  border-color:var(--clp-gold-line) !important;
  background:var(--clp-gold-tint) !important;
  transform:translateY(-2px);
}

/* ----------------------------------------------------------------------------
   BARRE DE NAVIGATION — un défaut de finition très visible

   « Blog & News », « Trouver mon parcours » et le bouton « Prendre rendez-vous »
   se cassaient sur trois lignes chacun, ce qui donnait une barre haute de 97 px
   au bord irrégulier. On empêche la césure et on resserre l'espacement : les
   onze entrées tiennent alors sur une seule ligne.
---------------------------------------------------------------------------- */
html body.caplink-body .cl-menu a,
html body.caplink-body .cl-nav-cta,
html body.caplink-body .cl-header .cl-btn{
  white-space:nowrap;
}
@media (min-width:1100px){
  html body.caplink-body .cl-menu{ gap:clamp(10px, .4rem + .6vw, 18px); }
}

/* ============================================================================
   1. BANDEAU DE PROMESSES — posé à cheval sur le hero

   Correction d'alignement : la carte débordait de 27 px à gauche par rapport à
   la colonne de texte des sections suivantes, parce que le fond et la bordure
   étaient peints sur l'élément qui porte aussi le padding du conteneur. Le
   padding passe en marge : les bords s'alignent enfin sur le H2 d'en dessous.
   ============================================================================ */
html body.home .cl-signature-ribbon{
  background:transparent !important;
  padding:0 !important;
  position:relative;
  z-index:2;
}
html body.home .cl-signature-ribbon-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:0 !important;
  padding-inline:0 !important;
  margin-inline:var(--clp-gutter);
  margin-top:clamp(-64px, -3vw, -40px);
  background:var(--clp-surface);
  border:1px solid var(--clp-line);
  border-radius:var(--clp-radius-lg);
  box-shadow:var(--clp-shadow-2);
  overflow:hidden;
}
html body.home .cl-signature-ribbon-grid > div{
  padding:clamp(22px, 1rem + 1vw, 30px) clamp(22px, 1rem + 1.2vw, 34px);
  border-left:1px solid var(--clp-line);
}
html body.home .cl-signature-ribbon-grid > div:first-child{ border-left:0; }
html body.home .cl-signature-ribbon-grid strong{
  display:block;
  font-size:1.0625rem !important;
  font-weight:600;
  color:var(--clp-ink) !important;
  margin-bottom:var(--clp-s1);
}
html body.home .cl-signature-ribbon-grid strong::before{
  content:"";
  display:block;
  width:26px; height:2px;
  background:var(--clp-gold);
  margin-bottom:var(--clp-s3);
  border-radius:2px;
}
html body.home .cl-signature-ribbon-grid span{
  font-size:var(--clp-fs-small) !important;
  line-height:1.58 !important;
  color:var(--clp-body) !important;
}
@media (max-width:760px){
  html body.home .cl-signature-ribbon-grid{
    grid-template-columns:1fr !important;
    margin-top:clamp(-40px, -6vw, -24px);
  }
  html body.home .cl-signature-ribbon-grid > div{
    border-left:0;
    border-top:1px solid var(--clp-line);
  }
  html body.home .cl-signature-ribbon-grid > div:first-child{ border-top:0; }
}

/* ============================================================================
   2. PROFILS — passage éditorial

   Ces cinq blocs ne contiennent aucun lien dans le HTML de la brique : les
   déguiser en cartes cliquables serait une fausse affordance. Ils sortent donc
   du motif « carte » et passent en bande à filets, alignée à gauche comme le
   titre et le chapô au-dessus — la brique les centrait, ce qui cassait
   l'alignement de la section.
   ============================================================================ */
html body.home .cl-profile-grid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  gap:0 !important;
  border-top:1px solid var(--clp-line);
  border-bottom:1px solid var(--clp-line);
}
html body.home .cl-profile{
  padding:var(--clp-s6) var(--clp-s5) !important;
  border-left:1px solid var(--clp-line);
  background:transparent !important;
  text-align:left !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
html body.home .cl-profile:first-child{ border-left:0; }
/* Pictogrammes : les émojis ne peuvent pas être remplacés sans inventer une
   iconographie. On les rend au moins homogènes — même pastille, même diamètre,
   même taille de glyphe, même alignement optique. */
html body.home .cl-profile > span[aria-hidden]{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:46px; height:46px;
  font-size:1.25rem !important;
  line-height:1 !important;
  border-radius:50%;
  background:var(--clp-gold-tint);
  margin:0 0 var(--clp-s4) !important;
}
html body.home .cl-profile strong{
  display:block;
  font-size:1.0625rem !important;
  font-weight:600 !important;
  color:var(--clp-ink) !important;
  text-align:left !important;
  margin-bottom:var(--clp-s2) !important;
}
html body.home .cl-profile > span:last-child{
  display:block;
  font-size:var(--clp-fs-small) !important;
  line-height:1.58 !important;
  color:var(--clp-body) !important;
  text-align:left !important;
}
@media (max-width:1000px){
  html body.home .cl-profile-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
  html body.home .cl-profile{ border-top:1px solid var(--clp-line); }
  html body.home .cl-profile:nth-child(odd){ border-left:0; }
  html body.home .cl-profile:nth-child(-n+2){ border-top:0; }
}
@media (max-width:560px){
  html body.home .cl-profile-grid{ grid-template-columns:1fr !important; }
  html body.home .cl-profile{ border-left:0; }
  html body.home .cl-profile:nth-child(1){ border-top:0; }
}

/* ============================================================================
   3. NOS SOLUTIONS — hiérarchie

   CORRECTION DE 2.0.0 : la carte de tête occupait 4 colonnes sur 6 ET 2 rangées
   — parce que `caplink.css` pose déjà `.cl-section.alt .cl-card:first-child
   {grid-row:span 2}`, ce que 2.0.0 n'avait pas vu. Résultat : un pavé navy de
   741 × 460 px pour un titre et une phrase, c'est-à-dire un grand vide.

   La composition est donc explicitée entièrement, colonnes ET rangées :

       ┌───────────────┬───────────────┐
       │               │  Mobilité     │
       │    ÉTUDES     ├───────────────┤
       │   (3 × 2)     │  Formalités   │
       ├───────────────┼───────────────┤
       │    Emploi     │   Academy     │
       └───────────────┴───────────────┘
   ============================================================================ */
html body.home .cl-grid3{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0,1fr)) !important;
  gap:var(--clp-s5) !important;
}
html body.home .cl-card{
  position:relative;
  grid-column:span 3 !important;
  grid-row:auto !important;
  display:flex; flex-direction:column;
  padding:clamp(24px, 1.1rem + 1.1vw, 32px) !important;
  background:var(--clp-surface);
  border:1px solid var(--clp-line) !important;
  border-radius:var(--clp-radius-lg) !important;
  box-shadow:var(--clp-shadow-1);
  transition:transform var(--clp-dur) var(--clp-ease),
             box-shadow var(--clp-dur) var(--clp-ease),
             border-color var(--clp-dur) var(--clp-ease);
}
html body.home .cl-card:nth-child(1){
  grid-column:span 3 !important;
  grid-row:span 2 !important;
  background:linear-gradient(158deg, #0e3253 0%, #082640 62%, #071f36 100%);
  border-color:rgba(200,155,60,.26) !important;
  color:#fff;
  justify-content:flex-end;
  overflow:hidden;
}
/* Enrichissement graphique de la carte Études — CSS pur, aucun fichier, aucune
   photographie, aucune dépendance. Des arcs concentriques très pâles suggèrent
   la portée internationale sans rien affirmer : c'est un motif, pas une image
   de synthèse déguisée en photo. */
html body.home .cl-card:nth-child(1)::before{
  content:"";
  position:absolute;
  top:-38%; right:-26%;
  width:78%; aspect-ratio:1;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(200,155,60,.16) 0 1px, rgba(200,155,60,0) 1px 30px),
    radial-gradient(circle at 50% 50%,
      rgba(200,155,60,.13) 0%, rgba(200,155,60,0) 68%);
  pointer-events:none;
}
html body.home .cl-card:nth-child(1) > *{ position:relative; z-index:1; }

html body.home .cl-card .cl-icon{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:46px; height:46px;
  font-size:1.25rem !important;
  line-height:1 !important;
  border-radius:50%;
  background:var(--clp-gold-tint) !important;
  margin:0 0 var(--clp-s4) !important;
}
/* La pastille de la carte de tete etait doree translucide SUR fond bleu nuit,
   donc sombre. Or les pictogrammes ne sont pas du texte : WordPress remplace
   les emojis par des images Twemoji, et celle de 🎓 est presque noire. Le
   glyphe disparaissait donc dans sa propre pastille — meme defaut que le
   titre, et invisible a tout audit de contraste puisqu'il s'agit d'une image.
   La pastille passe en clair : les cinq cartes ont desormais le meme
   traitement, et le glyphe se lit sur les cinq. */
html body.home .cl-card:nth-child(1) .cl-icon{
  background:rgba(255,255,255,.92) !important;
  width:56px; height:56px; font-size:1.5rem !important;
}
/* Taille et alignement identiques sur les cinq, quelle que soit la maniere
   dont le pictogramme est rendu — glyphe ou image Twemoji. */
html body.home .cl-icon img.emoji,
html body.home .cl-profile img.emoji,
html body.home .cl-feature img.emoji{
  display:block;
  vertical-align:middle;
  margin:0;
}
html body.home .cl-card h3{
  font-size:var(--clp-fs-h3) !important;
  line-height:1.26 !important;
  font-weight:600 !important;
  letter-spacing:-.012em;
  margin:0 0 var(--clp-s3) !important;
}
/* La brique pose `.cl-card h3{color:#0e2a47}`. Sur la carte de tete, passee
   en bleu nuit par ce lot, le titre se retrouvait donc en bleu nuit SUR bleu
   nuit : 1,15:1 mesure en recette, c'est-a-dire invisible. Le `color:#fff`
   pose sur la carte ne descend pas jusqu'au h3, qui a sa propre declaration.
   Defaut introduit par la version 2.1.0 de ce lot, corrige ici. */
html body.home .cl-card:nth-child(1) h3,
html body.home .cl-card:nth-child(1) h3 .clp-card-link{
  color:#fff !important;
}
html body.home .cl-card:nth-child(1) h3{
  font-size:clamp(1.625rem, 1.2rem + 1.1vw, 2.125rem) !important;
  margin-bottom:var(--clp-s4) !important;
}
html body.home .cl-card p{
  font-size:var(--clp-fs-small) !important;
  line-height:1.64 !important;
  color:var(--clp-body) !important;
  margin:0 !important;
}
html body.home .cl-card:nth-child(1) p{
  color:rgba(228,237,244,.88) !important;
  font-size:1.0625rem !important;
  line-height:1.62 !important;
  max-width:34ch;
}
html body.home .cl-card h3 .clp-card-link{
  color:inherit;
  text-decoration:none;
}
html body.home .cl-card h3 .clp-card-link::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
}
html body.home .cl-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--clp-shadow-2);
  border-color:var(--clp-gold-line) !important;
}
html body.home .cl-card:nth-child(1):hover{ border-color:rgba(200,155,60,.55) !important; }

@supports selector(:has(*)){
  html body.home .cl-card:has(.clp-card-link:focus-visible){
    outline:var(--clp-focus) solid var(--clp-ink);
    outline-offset:2px;
    box-shadow:0 0 0 2px #fff;
  }
  html body.home .cl-card:nth-child(1):has(.clp-card-link:focus-visible){
    outline-color:var(--clp-gold);
  }
  html body.home .cl-card h3 .clp-card-link:focus-visible{
    outline:none !important;
    box-shadow:none !important;
  }
}

/* Chevron porté par la CARTE, pas par le lien : le contenu d'un pseudo-élément
   placé dans un lien est restitué par plusieurs lecteurs d'écran, et le nom
   accessible deviendrait « Études → ». */
html body.home .cl-card::after{
  content:"→";
  position:absolute;
  top:clamp(24px,1.1rem + 1.1vw,32px);
  right:clamp(24px,1.1rem + 1.1vw,32px);
  font-size:1.05rem; line-height:1;
  color:var(--clp-gold);
  opacity:0;
  transform:translateX(-4px);
  transition:opacity var(--clp-dur) var(--clp-ease), transform var(--clp-dur) var(--clp-ease);
  pointer-events:none;
}
html body.home .cl-card:hover::after,
html body.home .cl-card:focus-within::after{ opacity:1; transform:translateX(0); }

@media (max-width:1000px){
  html body.home .cl-grid3{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
  html body.home .cl-card{ grid-column:span 2 !important; }
  html body.home .cl-card:nth-child(1){
    grid-column:span 4 !important;
    grid-row:auto !important;
  }
}
@media (max-width:620px){
  html body.home .cl-grid3{ grid-template-columns:1fr !important; }
  html body.home .cl-card,
  html body.home .cl-card:nth-child(1){ grid-column:span 1 !important; }
}

/* ============================================================================
   4. LA PROMESSE CENTRALE
   ============================================================================ */
html body.home .cl-signature-proof{
  padding-block:clamp(64px, 3rem + 3.2vw, 104px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(200,155,60,.07) 0%, rgba(200,155,60,0) 62%),
    var(--clp-surface);
  text-align:center;
}
html body.home .cl-signature-proof .cl-wrap{ max-width:960px; position:relative; }
/* La brique pose un filet à gauche du sur-titre ; 2.0.0 en ajoutait un second
   en dessous. Un seul est conservé, centré. */
html body.home .cl-signature-proof-kicker{
  display:inline-block;
  font-size:var(--clp-fs-meta) !important;
  font-weight:700;
  letter-spacing:var(--clp-ls-meta);
  text-transform:uppercase;
  color:var(--clp-gold-text) !important;
  margin-bottom:var(--clp-s5) !important;
  padding-left:0 !important;
}
html body.home .cl-signature-proof-kicker::before{ content:none !important; }
html body.home .cl-signature-proof-kicker::after{
  content:"";
  display:block;
  width:34px; height:2px;
  background:var(--clp-gold);
  border-radius:2px;
  margin:var(--clp-s3) auto 0;
}
html body.home .cl-signature-proof-text{
  font-size:clamp(1.4375rem, 1rem + 1.6vw, 2.25rem) !important;
  line-height:1.32 !important;
  letter-spacing:-.018em;
  font-weight:500 !important;
  color:var(--clp-ink) !important;
  max-width:30ch;
  margin:0 auto !important;
  text-wrap:balance;
}

/* ============================================================================
   5. POURQUOI CHOISIR CAP LINK — quatre preuves

   Deux blocs masqués, et le choix n'est pas esthétique :
     · « Réseau de partenaires » — aucun partenaire n'est nommé sur les
       103 routes. Le site ne démontre pas cette affirmation.
     · « Réactivité » — promesse de délai sans délai annoncé.
   Masquage CSS : la brique n'est pas modifiée, désactiver l'extension rétablit
   les six.
   ============================================================================ */
html body.home .cl-feature-strip{
  position:relative;
  padding-block:clamp(76px, 3.5rem + 4vw, 124px);
  background:
    radial-gradient(90% 140% at 88% 0%, rgba(200,155,60,.14) 0%, rgba(200,155,60,0) 58%),
    linear-gradient(168deg, #0f385d 0%, #0a2a48 100%);
}
html body.home .cl-feature-strip::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    rgba(200,155,60,0) 0%, rgba(200,155,60,.5) 50%, rgba(200,155,60,0) 100%);
}
html body.home .cl-section-title-light{
  font-size:var(--clp-fs-h2) !important;
  line-height:var(--clp-lh-h2) !important;
  letter-spacing:var(--clp-ls-h2);
  font-weight:600 !important;
  color:#fff !important;
  margin:0 0 var(--clp-s8) !important;
  max-width:20ch;
}
html body.home .cl-feature-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:var(--clp-s7) var(--clp-s6) !important;
}
html body.home .cl-feature:nth-child(4),
html body.home .cl-feature:nth-child(5){ display:none !important; }
html body.home .cl-feature{
  padding:var(--clp-s5) 0 0 !important;
  border-top:1px solid rgba(200,155,60,.34) !important;
  border-left:0 !important;
  border-right:0 !important;
  text-align:left !important;
  background:transparent !important;
}
html body.home .cl-feature > span[aria-hidden]{
  display:block !important;
  font-size:1.5rem !important;
  line-height:1 !important;
  margin:0 0 var(--clp-s4) !important;
}
html body.home .cl-feature b{
  display:block;
  font-size:1.0625rem !important;
  font-weight:600 !important;
  color:#fff !important;
  margin-bottom:var(--clp-s2) !important;
  text-align:left !important;
}
html body.home .cl-feature small{
  display:block;
  font-size:var(--clp-fs-small) !important;
  line-height:1.62 !important;
  color:rgba(224,233,240,.84) !important;
  text-align:left !important;
}
@media (max-width:900px){
  html body.home .cl-feature-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:520px){
  html body.home .cl-feature-grid{ grid-template-columns:1fr !important; gap:var(--clp-s6) !important; }
}

/* ============================================================================
   6. LES 4 ÉTAPES — un parcours

   CORRECTION DE 2.0.0 : le filet était tracé sur le conteneur, à 23 px de son
   bord haut, en supposant que les pastilles commençaient exactement à ce bord.
   Elles ne le faisaient pas, et le filet passait au-dessus des numéros. Il est
   désormais tracé PAR CHAQUE ÉTAPE, dans le même repère que sa pastille :
   quelle que soit la hauteur du contenu, les deux restent alignés.
   ============================================================================ */
html body.home .cl-steps{
  position:relative;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:var(--clp-s6) !important;
}
html body.home .cl-step{
  position:relative;
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:left !important;
}
html body.home .cl-step::before{
  content:"";
  position:absolute;
  top:23px;
  left:52px;
  right:calc(-1 * var(--clp-s6) - 6px);
  height:2px;
  background:var(--clp-gold-line);
  z-index:0;
}
html body.home .cl-step:last-child::before{ content:none; }
html body.home .cl-step b{
  position:relative;
  z-index:1;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--clp-surface) !important;
  border:2px solid var(--clp-gold) !important;
  color:var(--clp-ink) !important;
  font-size:.9375rem !important;
  font-weight:700 !important;
  letter-spacing:.02em;
  margin:0 0 var(--clp-s5) !important;
}
html body.home .cl-step strong{
  display:block;
  font-size:1.0625rem !important;
  font-weight:600 !important;
  color:var(--clp-ink) !important;
  margin-bottom:var(--clp-s2) !important;
}
html body.home .cl-step p{
  font-size:var(--clp-fs-small) !important;
  line-height:1.64 !important;
  color:var(--clp-body) !important;
  margin:0 !important;
  max-width:32ch;
}
@media (max-width:900px){
  html body.home .cl-steps{ grid-template-columns:1fr !important; gap:var(--clp-s6) !important; }
  html body.home .cl-step{
    display:grid !important;
    grid-template-columns:46px 1fr;
    column-gap:var(--clp-s5);
    align-items:start;
  }
  html body.home .cl-step::before{
    top:52px; bottom:calc(-1 * var(--clp-s6) - 6px);
    left:22px; right:auto;
    width:2px; height:auto;
  }
  html body.home .cl-step b{ margin-bottom:0 !important; grid-row:span 2; }
  html body.home .cl-step strong{ align-self:center; }
  html body.home .cl-step p{ grid-column:2; max-width:none; }
}

/* ============================================================================
   7. LE BANDEAU DORÉ — quatre repères, rendus explicites

   Les quatre VALEURS sont vérifiées et conservées (voir docs/PREMIUM.md §7).
   Ce qui change ici est leur lisibilité : la brique composait les valeurs à
   37,6 px, ce qui les faisait lire comme des indicateurs de performance alors
   que ce sont des repères. La valeur redescend, le libellé — désormais un
   bénéfice explicite — remonte, et les deux reçoivent un poids comparable.
   ============================================================================ */
html body.home .cl-stats{
  padding-block:clamp(44px, 2rem + 2vw, 68px) !important;
  background:linear-gradient(100deg, #cfa348 0%, #c89b3c 46%, #bd9036 100%) !important;
  color:var(--clp-ink) !important;
}
html body.home .cl-stats-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:0 !important;
  align-items:start;
}
html body.home .cl-stat{
  padding:var(--clp-s2) clamp(18px, 1rem + 1vw, 34px) !important;
  border-left:1px solid rgba(8,38,64,.22);
  text-align:left !important;
  background:transparent !important;
}
html body.home .cl-stat:first-child{ border-left:0; padding-left:0 !important; }
html body.home .cl-stat strong{
  display:block;
  font-size:clamp(1.375rem, 1.05rem + .85vw, 1.75rem) !important;
  font-weight:700 !important;
  line-height:1.14 !important;
  letter-spacing:-.018em;
  color:var(--clp-ink) !important;
  text-align:left !important;
  margin-bottom:var(--clp-s2) !important;
}
html body.home .cl-stat span{
  display:block;
  font-size:var(--clp-fs-small) !important;
  line-height:1.5 !important;
  color:rgba(8,38,64,.86) !important;
  text-align:left !important;
}
@media (max-width:900px){
  html body.home .cl-stats-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:var(--clp-s5) 0 !important;
  }
  html body.home .cl-stat:nth-child(odd){ border-left:0; padding-left:0 !important; }
}
@media (max-width:460px){
  html body.home .cl-stats-grid{ grid-template-columns:1fr !important; }
  html body.home .cl-stat{ border-left:0; padding-left:0 !important; }
}

/* ============================================================================
   8. TÉMOIGNAGES

   Réels et autorisés, conservés mot pour mot. Le motif « carte blanche + cinq
   étoiles + citation » rend une preuve réelle indistinguable d'une preuve
   fabriquée : la citation passe en premier et en grand, l'attribution suit, les
   étoiles descendent au rang de détail.

   Correction 2.1.0 : les attributions flottaient à des hauteurs différentes
   selon la longueur de la citation. Elles sont désormais poussées en pied de
   colonne, donc alignées entre elles.
   ============================================================================ */
html body.home .cl-testimonials{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:var(--clp-s7) var(--clp-s6) !important;
  align-items:stretch;
}
html body.home .cl-quote{
  position:relative;
  background:transparent !important;
  border:0 !important;
  border-top:2px solid var(--clp-gold) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:var(--clp-s7) 0 0 !important;
  display:flex !important;
  flex-direction:column;
  height:100%;
}
html body.home .cl-quote::before{
  content:"“";
  display:block;
  font-size:2.75rem;
  line-height:.7;
  color:var(--clp-gold);
  opacity:.55;
  margin-bottom:var(--clp-s3);
}
html body.home .cl-quote p{
  order:1;
  font-size:clamp(1.0625rem, .96rem + .42vw, 1.25rem) !important;
  line-height:1.62 !important;
  letter-spacing:-.008em;
  color:var(--clp-ink) !important;
  margin:0 0 var(--clp-s7) !important;
  text-wrap:pretty;
}
html body.home .cl-quote strong{
  order:2;
  margin-top:auto;
  font-size:1rem !important;
  font-weight:600 !important;
  color:var(--clp-ink) !important;
}
html body.home .cl-quote br{ display:none; }
html body.home .cl-quote small{
  order:3;
  font-size:var(--clp-fs-small) !important;
  color:var(--clp-muted) !important;
  margin-top:2px;
}
html body.home .cl-quote .cl-stars{
  order:4;
  font-size:.8125rem !important;
  letter-spacing:.18em;
  color:var(--clp-gold-text) !important;
  margin-top:var(--clp-s3);
}
@media (max-width:880px){
  html body.home .cl-testimonials{ grid-template-columns:1fr !important; gap:var(--clp-s7) !important; }
  html body.home .cl-quote strong{ margin-top:0; }
}

/* ============================================================================
   9. APPEL À L'ACTION FINAL
   Une action principale, une secondaire. Pas de troisième bouton concurrent.
   ============================================================================ */
html body.home .cl-cta{
  position:relative;
  overflow:hidden;
  padding:clamp(44px, 2rem + 3vw, 76px) clamp(24px, 1.2rem + 2vw, 64px) !important;
  border-radius:var(--clp-radius-lg) !important;
  background:
    radial-gradient(90% 160% at 88% 0%, rgba(200,155,60,.18) 0%, rgba(200,155,60,0) 60%),
    linear-gradient(160deg, #0d2f50 0%, #082640 100%) !important;
  color:#fff !important;
  text-align:center;
}
html body.home .cl-cta h2{
  color:#fff !important;
  font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem) !important;
  line-height:1.22 !important;
  font-weight:600 !important;
  letter-spacing:-.018em;
  max-width:24ch;
  margin:0 auto var(--clp-s5) !important;
  text-wrap:balance;
}
html body.home .cl-cta p{
  color:rgba(228,237,244,.86) !important;
  font-size:var(--clp-fs-lead) !important;
  line-height:1.62 !important;
  max-width:54ch;
  margin:0 auto var(--clp-s7) !important;
}
html body.home .cl-cta .cl-actions{
  display:flex; flex-wrap:wrap; gap:var(--clp-s3);
  justify-content:center;
}
html body.home .cl-cta .cl-btn{
  padding:15px 28px !important;
  font-weight:600;
  white-space:nowrap;
}
html body.home .cl-cta .cl-btn-gold{ box-shadow:0 10px 26px rgba(200,155,60,.26); }
html body.home .cl-cta .cl-btn-light{
  background:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.32) !important;
}
html body.home .cl-cta .cl-btn-light:hover{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.55) !important;
}

/* ============================================================================
   10. ACCÈS DIRECTS (bloc apporté par RC Polish)
   Six des dix cartes reprenaient les destinations de « Nos solutions ». Elles
   sont masquées ; aucune destination n'est perdue.
   ============================================================================ */
html body.home .clrc-hub-grid a[href$="/etudes/"],
html body.home .clrc-hub-grid a[href$="/mobilite/"],
html body.home .clrc-hub-grid a[href$="/services-administratifs/"],
html body.home .clrc-hub-grid a[href$="/emploi/"],
html body.home .clrc-hub-grid a[href$="/entreprises/"],
html body.home .clrc-hub-grid a[href$="/academy/"]{
  display:none !important;
}
html body.home .clrc-hub-in{ padding:var(--clp-section-y) var(--clp-gutter) !important; }
html body.home .clrc-hub-grid{
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr)) !important;
  gap:var(--clp-s5) !important;
}
html body.home .clrc-card{
  border-radius:var(--clp-radius-lg) !important;
  border:1px solid var(--clp-line) !important;
  transition:transform var(--clp-dur) var(--clp-ease),
             box-shadow var(--clp-dur) var(--clp-ease);
}
html body.home .clrc-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--clp-shadow-2);
}

/* ============================================================================
   11. MOUVEMENT RÉDUIT
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  html body.home .cl-card:hover,
  html body.home .clrc-card:hover,
  html body.home .cl-assistant-grid a:hover{ transform:none; }
  html body.home .cl-card::after,
  html body.home .cl-card:hover::after,
  html body.home .cl-card:focus-within::after{ transform:none; }
}