@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --purple: #54439C;
  --black: #111111;
  --text: #111111;
  --text-light: #555555;
  --border-radius: 4px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Mobile : supprime le voile gris que Safari et Chrome Android posent sur tout
   element tape (FAQ, liens du burger, boutons). Les contours :focus-visible
   plus bas ne sont pas concernes et restent actifs au clavier. */
html {
  -webkit-tap-highlight-color: transparent;
  /* Les liens d'ancre glissent au lieu de sauter (le CTA « Notre approche »
     du hero, les ancres #rdv, #faq…). Neutralise plus bas pour les visiteurs
     qui ont demande moins d'animations. */
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 40px;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Hero shell (wraps header + hero text + full-bleed media) */
.hero-shell {
  position: relative;
}

/* Header */
.header {
  position: relative;
  z-index: 2;
  padding: 28px 0;
}

.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.logo__img {
  height: 60px;
  width: auto;
  display: block;
}

.header__spacer {
  width: 60px;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.nav a {
  font-weight: 600;
  font-size: 15px;
  color: var(--black);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Survol : assombrissement franc plutot qu'un soulevement avec ombre portee. */
.btn--primary:hover {
  background: #453681;
}

.btn--dark:hover {
  background: #2b2b2b;
}

.btn--outline:hover {
  color: #ffffff;
  background: var(--purple);
}

.btn--light:hover {
  background: #efebfa;
}

.btn:focus-visible,
.faq-item__question:focus-visible,
.testimonials__next:focus-visible,
.footer a:focus-visible,
.nav a:focus-visible {
  outline: 3px solid #e85ca8;
  outline-offset: 4px;
}

.btn--primary {
  background: var(--purple);
  color: #fff;
}

.btn--dark {
  background: var(--black);
  color: #fff;
}

/* Hero */
.hero {
  position: relative;
  z-index: 2;
  padding: 40px 0 64px;
}

.hero__text {
  max-width: 520px;
}

.hero__text h1 {
  font-size: 46px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.hero__text h1 span {
  color: var(--purple);
}

.hero__desc {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-light);
  max-width: 480px;
}

.hero__buttons {
  margin-top: 32px;
  display: flex;
  gap: 16px;
}

/* Full-bleed hero media: touches the very top and right edge of the
   viewport, rounded only on the left side, sits behind the header/nav */
.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 47%;
  border-radius: 0;
  overflow: hidden;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: inherit;
}

/* Stats */
.stats {
  padding: 60px 0;
}

.stats__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}

.stat__number {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1px;
}

.stat__label {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-light);
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* Audience */
.audience {
  padding: 60px 0 100px;
}

.audience__title {
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 60px;
  color: var(--purple);
}

.audience__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
}

.audience__row--reverse {
  direction: rtl;
}

.audience__row--reverse>* {
  direction: ltr;
}

.audience__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.audience__text h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
}

.audience__text p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-light);
}

.audience__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

/* Individuals page */
.header--standalone {
  background: #ffffff;
}

.individual-hero {
  padding: 36px 0 86px;
}

.individual-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  align-items: center;
  gap: 90px;
}

.individual-hero__content {
  max-width: 535px;
}

.individual-hero__content h1 {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.7px;
}

.individual-hero__content h1 span {
  color: var(--purple);
}

.individual-hero__content>p {
  max-width: 520px;
  margin-top: 30px;
  color: #333333;
  font-size: 16px;
  line-height: 1.5;
}

.individual-hero__media {
  width: 100%;
  aspect-ratio: 1.1 / 1;
  overflow: hidden;
}

.individual-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* (Ancienne surcharge de padding par type de page supprimee : le bandeau de
   chiffres est desormais identique partout, y compris sur l'accueil.) */

.paths {
  padding: 36px 0 104px;
}

.paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 62px 48px;
  margin-top: 78px;
}

.path-card {
  min-height: 420px;
  padding: 38px 24px 32px;
  background: #f6f4fc;
}

/* (Supprime : `.path-card:last-child { grid-column: 2 }` centrait la derniere
   carte sur une deuxieme ligne. Utile quand la section comptait 4 cartes,
   nuisible avec les 3 actuelles, qui doivent tenir sur une seule rangee.) */

.path-card h3 {
  color: var(--purple);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.path-card>p {
  margin-top: 34px;
  color: #252525;
  font-size: 13px;
  line-height: 1.42;
}

.path-card h4 {
  margin-top: 34px;
  font-size: 13px;
  font-weight: 700;
}

.path-card ul {
  margin-top: 10px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.4;
}

.paths__buttons {
  margin-top: 66px;
}

.tailored {
  padding: 18px 0 126px;
}

.tailored__container {
  max-width: 920px;
}

.tailored__list {
  display: grid;
  gap: 58px;
  margin-top: 78px;
}

.tailored-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

/* Icones fournies en PNG : le rond rose est deja dans l'image, on retire
   donc le fond et l'arrondi du conteneur pour ne pas le doubler. */
.tailored-item__icon {
  display: block;
  width: 64px;
  height: 64px;
}

.tailored-item__icon img {
  display: block;
  width: 100%;
  height: auto;
}

.tailored-item h3 {
  color: var(--purple);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}

.tailored-item p {
  margin-top: 15px;
  color: #242424;
  font-size: 13px;
  line-height: 1.45;
}

.tailored__action {
  margin-top: 55px;
}

/* Schools page */
.school-model {
  padding: 34px 0 112px;
}

.school-model__rows {
  display: grid;
  max-width: 1000px;
  gap: 62px;
  margin: 82px auto 0;
}

.school-model__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
}

.school-model__row--reverse .school-model__image {
  grid-column: 2;
  grid-row: 1;
}

.school-model__row--reverse .school-model__content {
  grid-column: 1;
  grid-row: 1;
}

.school-model__image {
  display: block;
  width: 100%;
  aspect-ratio: 1.38 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.school-model__content h3 {
  color: var(--purple);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.school-model__content p {
  margin-top: 24px;
  color: #242424;
  font-size: 13px;
  line-height: 1.45;
}

.school-model__buttons {
  margin-top: 70px;
}

.school-programs {
  padding: 38px 0 100px;
}

.school-programs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin-top: 76px;
}

.school-program-card {
  min-height: 430px;
  padding: 38px 26px 34px;
  background: #f6f4fc;
}

.school-program-card h3 {
  color: var(--purple);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.school-program-card__subtitle {
  margin-top: 12px;
  font-size: 12px;
  text-align: center;
}

.school-program-card ul {
  margin-top: 34px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.43;
}

.school-programs__action {
  margin-top: 58px;
}

.funding {
  padding: 36px 0 132px;
}

.funding__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 74px;
  margin-top: 72px;
}

.funding__visual {
  position: relative;
  min-width: 0;
}

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

.funding__badge {
  position: relative;
  width: 205px;
  height: 78px;
  margin: -42px auto 0;
  border: 1px solid #d6d6d6;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.08);
}

.funding__content h3 {
  color: var(--purple);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.funding__content p {
  margin-top: 24px;
  color: #222222;
  font-size: 13px;
  line-height: 1.48;
}

/* Enterprise page */
.enterprise-audit {
  padding: 36px 0 126px;
}

.enterprise-audit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  align-items: center;
  gap: 78px;
  margin-top: 84px;
}

.enterprise-audit__image {
  display: block;
  width: 100%;
  aspect-ratio: 1.28 / 1;
  object-fit: cover;
  border-radius: 4px;
}

/* Voir ci-dessus : sans `height: auto`, l'attribut `height` de la balise
   `<img>` l'emporte sur `aspect-ratio`, qui ne sert alors a rien. Ne pas
   retirer cette ligne en croyant qu'elle est redondante.
   Limite a la V2 : les pages V1 partagent le composant et gardent leur
   rendu actuel. */
.bento-page .enterprise-audit__image {
  height: auto;
}

.enterprise-audit__content p {
  margin-top: 20px;
  color: #222222;
  font-size: 14px;
  line-height: 1.48;
}

.enterprise-audit__content p:first-child {
  margin-top: 0;
}

.enterprise-audit__content ul {
  margin-top: 18px;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.enterprise-audit__buttons {
  display: flex;
  gap: 26px;
  margin-top: 38px;
}

.roadmap {
  padding: 34px 0 120px;
}

.roadmap__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  margin-top: 74px;
}

.roadmap-card {
  min-height: 165px;
  padding: 30px 22px;
  background: #f6f4fc;
  text-align: center;
}

.roadmap-card h3 {
  color: var(--purple);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.roadmap-card p {
  margin-top: 18px;
  color: #242424;
  font-size: 13px;
  line-height: 1.4;
}

.roadmap__result {
  max-width: 940px;
  margin: 64px auto 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.roadmap__buttons {
  margin-top: 46px;
}

.enterprise-testimonials {
  padding-top: 66px;
}

.distinction {
  padding: 38px 0 170px;
}

.distinction__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 58px;
  margin-top: 66px;
}

.distinction-card {
  min-height: 166px;
  padding: 34px 28px 28px;
  background: #f6f4fc;
  text-align: center;
}

.distinction-card h3 {
  color: var(--purple);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.distinction-card p {
  margin-top: 22px;
  color: #242424;
  font-size: 13px;
  line-height: 1.4;
}

/* Financing and freelance pages */
.financing-hero .individual-hero__content>p+p,
.freelance-hero .individual-hero__content>p+p {
  margin-top: 18px;
}

.funding-guide {
  padding: 36px 0 122px;
}

.funding-guide__intro,
.activity-course__intro,
.practice__intro {
  max-width: 770px;
  margin: 36px auto 0;
  color: #333333;
  font-size: 14px;
  line-height: 1.48;
  text-align: center;
}

.funding-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 74px;
}

.funding-option-card {
  display: flex;
  min-height: 420px;
  align-items: center;
  flex-direction: column;
  padding: 36px 26px 28px;
  background: #f6f4fc;
  text-align: center;
}

.funding-option-card h3 {
  min-height: 52px;
  color: var(--purple);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.funding-option-card h4 {
  margin-top: 26px;
  color: var(--purple);
  font-size: 14px;
}

.funding-option-card p {
  margin-top: 20px;
  color: #252525;
  font-size: 13px;
  line-height: 1.42;
}

.funding-option-card .btn {
  margin-top: auto;
  padding-right: 20px;
  padding-left: 20px;
}

.activity-course {
  padding: 72px 0 116px;
}

.activity-course__container {
  max-width: 980px;
}

.activity-course__intro {
  max-width: 610px;
}

/* Une seule colonne depuis le retrait de l'image : le bloc occupe toute la
   largeur du conteneur. */
.activity-course__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  margin-top: 56px;
}

.activity-course__details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

/* « La formation en un coup d'oeil » : les chiffres cles en tuiles, pour
   qu'ils se lisent d'un regard plutot qu'en parcourant une liste a puces. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-left: 0;
  list-style: none;
}

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

.spec {
  padding: 22px 20px;
  border-radius: var(--border-radius);
  background: var(--surface);
}

.spec__value {
  display: block;
  color: var(--purple);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.spec__label {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
}


.activity-course__details>p {
  color: #333333;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.activity-course__action {
  margin-top: 62px;
}

.learning {
  padding: 34px 0 120px;
}

.learning__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 34px 48px;
  margin-top: 72px;
}

.learning-card {
  grid-column: span 2;
  min-height: 190px;
  padding: 32px 22px 28px;
  background: #f6f4fc;
  text-align: center;
}

.learning-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.learning-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.learning-card h3,
.practice-card h3,
.freelance-benefit-card h3 {
  color: var(--purple);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.learning-card p,
.practice-card p,
.freelance-benefit-card p {
  margin-top: 20px;
  color: #252525;
  font-size: 13px;
  line-height: 1.42;
}

.learning__buttons {
  margin-top: 60px;
}

.practice {
  padding: 36px 0 126px;
}

.practice__intro {
  max-width: 730px;
}

.practice__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 54px;
  margin-top: 68px;
}

.practice-card {
  min-height: 170px;
  padding: 32px 24px 26px;
  background: #f6f4fc;
  text-align: center;
}

.freelance-benefits {
  padding: 36px 0 116px;
}

.freelance-benefits__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  align-items: center;
  gap: 82px;
  max-width: 970px;
  margin: 70px auto 0;
}

.freelance-benefits__image {
  display: block;
  width: 100%;
  aspect-ratio: 1.3 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.freelance-benefits__copy p {
  margin-top: 20px;
  color: #252525;
  font-size: 13px;
  line-height: 1.48;
}

.freelance-benefits__copy p:first-child {
  margin-top: 0;
}

.freelance-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 52px;
  margin-top: 72px;
}

.freelance-benefit-card {
  min-height: 166px;
  padding: 32px 24px 26px;
  background: #f6f4fc;
  text-align: center;
}

.freelance-benefits__buttons {
  margin-top: 54px;
}

/* Shared section heading */
.section-title {
  color: var(--purple);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.section-action {
  display: flex;
  justify-content: center;
  margin-top: 54px;
}

/* Benefits */
.benefits {
  padding: 44px 0 110px;
}

.benefits>.container,
.testimonials>.container {
  display: flex;
  width: 100%;
  max-width: 1200px;
  align-items: stretch;
  flex-direction: column;
  margin-right: auto;
  margin-left: auto;
}

.benefits__grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 58px;
}

.benefit-card {
  min-height: 350px;
  padding: 38px 28px 32px;
  background: #f6f4fc;
  text-align: center;
}

.benefit-card h3 {
  min-height: 58px;
  color: var(--purple);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.benefit-card p {
  margin-top: 24px;
  color: #333333;
  font-size: 14px;
  line-height: 1.45;
}

/* Testimonials */
.testimonials {
  padding: 38px 0 112px;
}

.testimonials__carousel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  align-items: center;
  gap: 36px;
  margin-top: 64px;
}

.testimonials__viewport {
  overflow: hidden;
}

.testimonials__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 2);
  gap: 48px;
  transition: transform 0.45s ease;
}

.testimonial-card {
  min-height: 210px;
  padding: 36px 28px 26px;
  background: #f6f4fc;
  text-align: center;
}

.testimonial-card blockquote {
  min-height: 92px;
  color: var(--purple);
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.3;
}

.testimonial-card__name {
  margin-top: 18px;
  font-size: 13px;
}

.testimonial-card__role {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
}

.testimonials__next {
  width: 58px;
  height: 86px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.testimonials__next span {
  display: block;
  width: 34px;
  height: 34px;
  margin-left: 4px;
  border-top: 8px solid #050505;
  border-right: 8px solid #050505;
  border-radius: 3px;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.testimonials__next:hover span {
  transform: translateX(5px) rotate(45deg);
}

/* FAQ */
.faq {
  padding: 52px 0 140px;
}

.faq__container {
  width: calc(100% - 80px);
  max-width: 990px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 40px;
  padding-right: 40px;
}

.faq__intro {
  margin-top: 24px;
  color: #333333;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.faq__list {
  margin-top: 72px;
}

.faq-item {
  border-bottom: 1px solid #cfcfcf;
}

.faq-item h3 {
  font-size: inherit;
}

.faq-item__question {
  display: flex;
  width: 100%;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 0;
  color: var(--purple);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 3px solid #ed64aa;
  border-radius: 50%;
}

.faq-item__icon::before,
.faq-item__icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #ed64aa;
  content: '';
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__question[aria-expanded="true"] .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item__answer {
  padding: 0 58px 28px 0;
  color: var(--text-light);
  font-size: 14px;
  line-height: 1.65;
}

/* Footer */
.footer {
  padding: 46px 0 40px;
  color: #ffffff;
  background: var(--purple);
}

.footer__inner {
  display: grid;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  /* 6 blocs = 6 colonnes. L'ancienne grille n'en declarait que 5, ce qui
     ecrasait la certification dans la colonne de 36px du lien LinkedIn.
     Le pied de page est plus large que le reste du site pour loger la
     colonne de certification sans serrer les colonnes de liens. */
  max-width: 1400px;
  grid-template-columns: 170px 1fr 1fr 1fr 340px;
  align-items: start;
  gap: 34px;
}

/* Logo de marque et lien LinkedIn forment UN seul bloc de grille, empile.
   Placer le lien via `grid-column` ne marchait pas : la grille positionne les
   elements a colonne definie AVANT ceux en placement libre, le lien prenait
   donc la premiere case et decalait toutes les autres colonnes. */
.footer__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer__brand {
  display: block;
}

/* Logo blanc avec le « IA » fuchsia, deja detoure (PNG a couche alpha).
   Aucun filtre : le grayscale/invert qui blanchissait l'ancien logo
   ecraserait le fuchsia. */
.footer__logo {
  display: block;
  width: 100%;
  max-width: 170px;
  height: auto;
}

.footer__links {
  display: flex;
  min-height: 128px;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 14px;
  font-size: 10px;
  line-height: 1.4;
}

.footer__links a:hover {
  text-decoration: underline;
}

/* Bloc de certification : logo dans son cadre blanc, texte de perimetre
   dessous, aligne a gauche sur le cadre. */
.footer__certification {
  display: block;
  font-size: 11.5px;
  line-height: 1.55;
}

/* Cadre blanc avec de la marge autour du logo, comme sur le site en ligne.
   Portee limitee au pied de page : la page L'academie affiche le meme badge
   dans son contenu, ou il garde sa largeur fixe et sans marge. */
.footer__certification .qualiopi-badge {
  width: 193px;
  padding: 11px 15px;
  background: #ffffff;
}

@media (max-width: 900px) {
  .footer__certification .qualiopi-badge {
    width: 167px;
    padding: 9px 12px;
  }
}

.footer__certification p {
  margin-top: 16px;
}

/* Logo Qualiopi officiel. Le PNG porte deja son fond blanc (pas de couche
   alpha), il se pose donc proprement sur le violet du pied de page. */
.qualiopi-badge {
  display: block;
  width: 170px;
  height: auto;
  padding: 0;
  background: #ffffff;
}

.qualiopi-badge img {
  display: block;
  width: 100%;
  height: auto;
}

/* LinkedIn : simple element du bloc .footer__identity, empile sous le logo.
   L'espacement vient du `gap` du conteneur, pas d'une marge propre. */
/* Reseaux sociaux du pied de page.

   LinkedIn etait seul, rendu par les deux lettres « in ». Instagram et
   Facebook l'ont rejoint le 1er septembre 2026 : les trois passent en SVG
   inline, dessines sur la meme grille de 24, sans quoi une lettre aurait
   voisine avec deux logos.

   Les traces sont remplis a `currentColor` : ils heritent du blanc du pied de
   page, et le survol n'a qu'une couleur a changer. */
.footer__socials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__social {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 800;
  /* La transition porte sur les deux proprietes que le survol touche : sans
     `color`, l'icone changerait de teinte d'un coup pendant que le fond, lui,
     fondrait. */
  transition: background-color 0.18s ease, color 0.18s ease;
}

.footer__social svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* Au survol, la pastille s'allume et l'icone repasse en violet. Le contraste
   s'inverse plutot que de s'attenuer : sur un aplat violet, eclaircir un logo
   deja blanc ne se verrait pas. */
.footer__social:hover,
.footer__social:focus-visible {
  color: var(--purple);
  background: #ffffff;
}

/* Responsive */
@media (max-width: 900px) {
  .audience__row {
    grid-template-columns: 1fr;
  }

  .audience__row--reverse {
    direction: ltr;
  }

  .stats__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .nav {
    display: none;
  }

  .hero__text h1 {
    font-size: 34px;
  }

  .hero__text {
    max-width: 100%;
  }

  .hero {
    padding-bottom: 24px;
  }

  .hero__media {
    position: static;
    width: 100%;
    aspect-ratio: 4 / 3.4;
    border-radius: 0;
    margin: 0 0 40px;
  }

  .benefits__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .benefit-card {
    min-height: auto;
  }

  .benefit-card h3 {
    min-height: auto;
  }

  .testimonials__carousel {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 12px;
  }

  .testimonials__track {
    grid-auto-columns: 100%;
    gap: 20px;
  }

  .testimonials__next {
    width: 40px;
  }

  .testimonials__next span {
    width: 25px;
    height: 25px;
    border-width: 6px 6px 0 0;
  }

  .faq__container {
    padding-right: 40px;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer__identity,
  .footer__certification {
    grid-column: 1 / -1;
  }

  .individual-hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .individual-hero__content {
    max-width: 650px;
  }

  .individual-hero__media {
    max-width: 650px;
    aspect-ratio: 16 / 10;
  }

  .paths__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .path-card:last-child {
    grid-column: auto;
  }

  .school-model__row {
    gap: 42px;
  }

  .school-programs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .funding__grid {
    grid-template-columns: 1fr;
    gap: 62px;
  }

  .funding__visual {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

  .enterprise-audit__grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .enterprise-audit__image {
    max-width: 680px;
  }

  .roadmap__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .distinction__grid {
    gap: 24px;
  }

  .funding-guide__grid,
  .practice__grid,
  .freelance-benefits__grid {
    gap: 24px;
  }

  .activity-course__grid,
  .freelance-benefits__intro {
    gap: 42px;
  }

  .learning__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .learning-card,
  .learning-card:nth-child(4),
  .learning-card:nth-child(5) {
    grid-column: auto;
  }

  .learning-card:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .container {
    padding-right: 22px;
    padding-left: 22px;
  }

  .header {
    padding: 18px 0;
  }

  .logo__img {
    height: 46px;
  }

  .hero__text h1 {
    font-size: 32px;
  }

  .hero__buttons,
  .audience__buttons {
    align-items: stretch;
    flex-direction: column;
  }

  .stats,
  .audience,
  .benefits,
  .testimonials,
  .faq {
    padding-top: 50px;
    padding-bottom: 70px;
  }

  .audience__title,
  .section-title {
    font-size: 28px;
  }

  .audience__row {
    gap: 28px;
    margin-bottom: 48px;
  }

  .benefits__grid,
  .testimonials__carousel {
    margin-top: 40px;
  }

  .benefit-card,
  .testimonial-card {
    padding-right: 20px;
    padding-left: 20px;
  }

  .testimonial-card blockquote {
    font-size: 17px;
  }

  .faq__container {
    width: calc(100% - 22px);
    padding-right: 22px;
    padding-left: 22px;
  }

  .faq__intro br {
    display: none;
  }

  .faq__list {
    margin-top: 44px;
  }

  .faq-item__question {
    min-height: 78px;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer__links,
  .footer__certification {
    grid-column: 1;
  }

  .footer__links {
    min-height: auto;
    gap: 14px;
  }

  .individual-hero {
    padding-top: 20px;
    padding-bottom: 54px;
  }

  .individual-hero__content h1 {
    font-size: 36px;
  }

  .individual-hero__content>p {
    margin-top: 22px;
    font-size: 15px;
  }

  .individual-hero__media {
    aspect-ratio: 4 / 3;
  }

  .paths__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 44px;
  }

  .path-card {
    min-height: auto;
  }

  .paths__buttons {
    margin-top: 42px;
  }

  .tailored__list {
    gap: 44px;
    margin-top: 48px;
  }

  .tailored-item {
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .tailored-item__icon {
    width: 50px;
    height: 50px;
  }

  .tailored-item h3 {
    font-size: 18px;
  }

  .school-model__rows {
    gap: 52px;
    margin-top: 48px;
  }

  .school-model__row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .school-model__row--reverse .school-model__image,
  .school-model__row--reverse .school-model__content {
    grid-column: 1;
    grid-row: auto;
  }

  .school-model__row--reverse .school-model__image {
    order: 0;
  }

  .school-model__row--reverse .school-model__content {
    order: 1;
  }

  .school-model__buttons {
    margin-top: 46px;
  }

  .school-programs__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 44px;
  }

  .school-program-card {
    min-height: auto;
  }

  .funding__grid {
    margin-top: 46px;
  }

  .funding__badge {
    width: 175px;
    margin-top: -24px;
  }

  .enterprise-audit__grid {
    margin-top: 48px;
  }

  .enterprise-audit__buttons {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .roadmap__grid,
  .distinction__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 44px;
  }

  .roadmap-card,
  .distinction-card {
    min-height: auto;
  }

  .roadmap__result {
    margin-top: 46px;
    font-size: 15px;
  }

  .funding-guide__grid,
  .activity-course__grid,
  .learning__grid,
  .practice__grid,
  .freelance-benefits__intro,
  .freelance-benefits__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 44px;
  }

  .funding-option-card,
  .learning-card,
  .learning-card:last-child,
  .practice-card,
  .freelance-benefit-card {
    width: 100%;
    min-height: auto;
  }

  .funding-option-card h3 {
    min-height: auto;
  }

  .funding-option-card .btn {
    margin-top: 30px;
  }

}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   REFONTE 2026 — Composants ajoutes (brief Nassim, juillet 2026)
   ========================================================================== */

:root {
  --pink: #df3c8c;
  --surface: #f6f4fc;
  --surface-deep: #efeafb;
  --ink-soft: #333333;
}

/* --------------------------------------------------------------------------
   Header : navigation validee + CTA permanent + burger mobile
   -------------------------------------------------------------------------- */

/* Le header doit passer au-dessus du hero (qui est en z-index 2), sinon le
   titre h1 se peint par-dessus les menus deroulants et le panneau mobile. */
.header {
  position: relative;
  z-index: 60;
}

.header__cta {
  padding: 10px 20px;
  font-size: 13.5px;
}

.nav {
  align-items: center;
  gap: 30px;
}

.nav__item {
  position: relative;
}

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  color: var(--black);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
}

.nav__caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.nav__trigger[aria-expanded="true"] .nav__caret {
  transform: translateY(1px) rotate(-135deg);
}

.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 30;
  display: grid;
  min-width: 250px;
  gap: 2px;
  padding: 10px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.16);
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav__menu::before {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 14px;
  content: "";
}

.nav__item--open .nav__menu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

.nav__menu a {
  padding: 11px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav__menu a:focus-visible {
  color: var(--purple);
  background: var(--surface);
}

/* Sur tactile, :hover se declenche au tap et reste applique jusqu'au tap
   suivant : le lien du burger garde un fond teinte apres le clic. On le
   reserve donc aux appareils qui ont un vrai pointeur. */
@media (hover: hover) {
  .nav__menu a:hover {
    color: var(--purple);
    background: var(--surface);
  }
}

.nav__menu a small {
  display: block;
  margin-top: 3px;
  color: var(--text-light);
  font-size: 11px;
  font-weight: 500;
}

.nav a[aria-current="page"],
.nav__trigger[data-current="true"] {
  color: var(--purple);
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
}

.nav-toggle span {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--black);
  transition: background-color 0.2s ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--black);
  content: "";
  transition: transform 0.2s ease;
}

.nav-toggle span::before {
  transform: translateY(-6px);
}

.nav-toggle span::after {
  transform: translateY(6px);
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: rotate(-45deg);
}

.nav-toggle:focus-visible,
.nav__trigger:focus-visible,
.nav__menu a:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 4px;
}

/* Lien d evitement (accessibilite) */
.skip-link {
  position: absolute;
  top: -200px;
  left: 16px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: 0 0 4px 4px;
  color: #ffffff;
  background: var(--purple);
  font-size: 14px;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   Bandeau de preuves (Qualiopi, chiffres, partenaires)
   -------------------------------------------------------------------------- */
.trust {
  padding: 30px 0 10px;
}

.trust__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  padding: 22px 20px;
  border: 1px solid #e6e1f4;
  border-radius: var(--border-radius);
  background: var(--surface);
}

.trust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 14px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-soft);
}

.trust__item+.trust__item {
  border-left: 1px solid #d8d1ec;
}

.trust__item strong {
  color: var(--purple);
  font-size: 18px;
  font-weight: 800;
}

.trust__check {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--pink);
  font-size: 11px;
  font-weight: 800;
}

.trust__sep {
  width: 1px;
  height: 26px;
  background: #d8d1ec;
}

.partners {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 24px;
}

.partners__label {
  color: var(--text-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.partners__logo {
  padding: 8px 18px;
  border: 1px solid #ded8f0;
  border-radius: 4px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Bandeau AI Act
   -------------------------------------------------------------------------- */
.aiact {
  padding: 34px 0;
}

.aiact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 40px 48px;
  border-radius: var(--border-radius);
  color: #ffffff;
  background: var(--purple);
}

.aiact__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.aiact__inner h2 {
  margin-top: 16px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.22;
}

.aiact__inner p {
  margin-top: 14px;
  max-width: 660px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.aiact .btn--light {
  color: var(--purple);
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   Portes d entree par cible
   -------------------------------------------------------------------------- */
.targets {
  padding: 56px 0 90px;
}

.targets__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-top: 58px;
}

.target-card {
  display: flex;
  flex-direction: column;
  padding: 36px 30px 32px;
  border: 1px solid #e8e3f6;
  border-radius: var(--border-radius);
  background: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.target-card:hover {
  border-color: #cfc4ee;
  box-shadow: 0 16px 40px rgba(84, 67, 156, 0.13);
  transform: translateY(-4px);
}

.target-card__eyebrow {
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.target-card h3 {
  margin-top: 14px;
  color: var(--purple);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.target-card>p {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.target-card ul {
  margin-top: 20px;
  padding-left: 0;
  list-style: none;
}

.target-card li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}

.target-card li::before {
  position: absolute;
  top: 7px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--pink);
  content: "";
}

.target-card__link {
  margin-top: auto;
  padding-top: 24px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
}

.target-card__link::after {
  content: " \2192";
}

.target-card:hover .target-card__link {
  color: var(--pink);
}

/* --------------------------------------------------------------------------
   Nos trois metiers
   -------------------------------------------------------------------------- */
.trades {
  padding: 40px 0 100px;
}

.trades__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 58px;
}

.trade-card {
  display: flex;
  flex-direction: column;
  padding: 38px 30px 32px;
  border-radius: var(--border-radius);
  background: var(--surface);
}

.trade-card__num {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #ffffff;
  background: var(--purple);
  font-size: 16px;
  font-weight: 800;
}

.trade-card h3 {
  margin-top: 22px;
  color: var(--purple);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}

.trade-card p {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.trade-card__tag {
  margin-top: 22px;
  padding: 7px 14px;
  border-radius: 30px;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
}

.trade-card__tag--ok {
  color: #1d6b3f;
  background: #dcf3e5;
}

.trade-card__tag--no {
  color: #8a5a12;
  background: #fbeed4;
}

.trade-card__link {
  margin-top: auto;
  padding-top: 24px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
}

.trade-card__link::after {
  content: " \2192";
}

/* --------------------------------------------------------------------------
   Encadre pont : apprendre et construire
   -------------------------------------------------------------------------- */
.bridge {
  padding: 20px 0 100px;
}

.bridge__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
  padding: 48px 52px;
  border: 2px solid var(--purple);
  border-radius: var(--border-radius);
}

.bridge__eyebrow {
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bridge__inner h2 {
  margin-top: 14px;
  color: var(--purple);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}

.bridge__inner p {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

.bridge__inner p.bridge__funding-note {
  max-width: 430px;
  margin-top: 12px;
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.5;
}

/* Ecart entre le dernier paragraphe et le bouton. Regle de base : elle vaut
   pour l'accueil, Entreprises et Outils sur mesure, qui partagent ce bloc. */
.bridge__inner .btn {
  margin-top: 24px;
}

.bridge__list {
  display: grid;
  gap: 14px;
  padding-left: 0;
  list-style: none;
}

.bridge__list li {
  position: relative;
  padding: 16px 18px 16px 46px;
  border-radius: 4px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.bridge__list li::before {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--purple);
  content: "\2713";
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Mentions de perimetre (Qualiopi / financement)
   -------------------------------------------------------------------------- */
.notice {
  display: flex;
  gap: 16px;
  max-width: 900px;
  margin: 40px auto 0;
  padding: 22px 26px;
  border-left: 4px solid var(--purple);
  border-radius: 0 4px 4px 0;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

.notice--warn {
  border-left-color: #d9922a;
  background: #fdf6e8;
}

.notice__icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.3;
}

.notice strong {
  color: var(--black);
}

/* --------------------------------------------------------------------------
   Etudes de cas / vitrine outils (probleme, solution, resultat)
   -------------------------------------------------------------------------- */
.cases {
  padding: 40px 0 110px;
}

/* Deux sections qui se lisent d'affilee, sans rupture de sujet : la premiere
   reduit son padding bas, la seconde supprime son padding haut. La couture
   passe de 150 px a 56 px. A ne poser QUE sur une paire de sections liees —
   posee au hasard, elle colle ensemble des blocs qui n'ont rien a voir.
   Utilisee sur la page Outils : « Nos realisations » puis « Projets en cours ». */
.cases--enchainee {
  padding-bottom: 56px;
}

/* Le selecteur d'element est necessaire : `.bento-page .modules` pose un
   raccourci `padding` de meme specificite, ecrit plus bas dans le fichier.
   Sans lui, cette regle est perdue. */
.bento-page section.modules--enchainee {
  padding-top: 0;
}

.cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 34px;
  margin-top: 58px;
}

.case-card {
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border: 1px solid #e8e3f6;
  border-radius: var(--border-radius);
}

.case-card__sector {
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.case-card h3 {
  margin-top: 12px;
  color: var(--purple);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}

.case-card dl {
  margin-top: 22px;
}

.case-card dt {
  margin-top: 18px;
  color: var(--black);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-card dt:first-child {
  margin-top: 0;
}

.case-card dd {
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Tableau financements
   -------------------------------------------------------------------------- */
.funding-table {
  margin-top: 56px;
  overflow-x: auto;
}

.funding-table table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.funding-table th,
.funding-table td {
  padding: 18px 20px;
  border-bottom: 1px solid #e6e1f4;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.funding-table thead th {
  color: #ffffff;
  background: var(--purple);
  border-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.funding-table thead th:first-child {
  border-radius: 4px 0 0 0;
}

.funding-table thead th:last-child {
  border-radius: 0 4px 0 0;
}

.funding-table tbody tr:nth-child(even) {
  background: #faf9fe;
}

.funding-table td:first-child {
  color: var(--purple);
  font-weight: 700;
}

/* La colonne « profil » renvoie vers la page de formation correspondante.
   La regle globale met les liens en `color: inherit` sans soulignement : sans
   ca, rien ne les distingue du reste de la cellule. */
.funding-table td a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.funding-table td a:hover {
  color: var(--pink);
}

/* --------------------------------------------------------------------------
   Formulaires (contact, capture catalogue, lead magnet)
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: 18px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form__field {
  display: grid;
  gap: 7px;
}

.form__field label {
  font-size: 13px;
  font-weight: 700;
}

.form__field .req {
  color: var(--pink);
}

/* `min-width: 0` est indispensable sur le <select> : sa largeur intrinseque
   est celle de sa plus longue option (« L'IA appliquee au metier d'agent
   immobilier · Decouverte (3h30) »), ce qui elargissait la grille du
   formulaire au-dela de l'ecran et faisait defiler la page horizontalement en
   mobile. Les champs texte suivent, par securite. */
.form__field input,
.form__field select,
.form__field textarea {
  min-width: 0;
  max-width: 100%;
  padding: 13px 16px;
  border: 1px solid #d9d3ec;
  border-radius: 4px;
  background: #ffffff;
  color: var(--black);
  font-family: inherit;
  font-size: 14px;
}

.form__field textarea {
  min-height: 130px;
  resize: vertical;
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  border-color: var(--purple);
  outline: 2px solid rgba(84, 67, 156, 0.25);
  outline-offset: 1px;
}

.form__consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-light);
  font-size: 12.5px;
  line-height: 1.55;
}

.form__consent input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--purple);
}

.form__consent a {
  color: var(--purple);
  text-decoration: underline;
}

.form__hint {
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.5;
}

.form__status {
  padding: 14px 18px;
  border-radius: 4px;
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
}

.form__status[hidden] {
  display: none;
}

/* Section contact */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 60px;
  margin-top: 60px;
  align-items: start;
}

/* Colonne de droite : la prise de rendez-vous et les coordonnees sont deux
   chemins differents, ils sont empiles en deux blocs plutot que fondus en un. */
.contact-aside {
  display: grid;
  gap: 20px;
}

.contact-panel {
  padding: 38px 34px;
  border-radius: var(--border-radius);
  background: var(--surface);
}

/* Le bloc coordonnees passe en blanc borde : il se lit comme une fiche de
   reference, pas comme une seconde invitation a reserver. */
.contact-panel--details {
  background: #ffffff;
  border: 1px solid var(--surface-deep);
}

.contact-panel--details dl {
  margin-top: 8px;
}

/* Valeur manquante, sur une page de travail : volontairement voyante. Une
   coordonnee absente doit sauter aux yeux a la relecture, pas se fondre dans
   la fiche au point de partir en production telle quelle. */
.contact-todo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  color: #ffffff;
  background: var(--pink);
  font-size: 12px;
  font-weight: 700;
}

/* Titre de la colonne formulaire : il repond au h3 du panneau de droite, pour
   que les deux moities de la grille s'annoncent de la meme facon. */
.contact-form__title {
  margin-bottom: 26px;
  color: var(--black);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.contact-panel h2,
.contact-panel h3 {
  color: var(--purple);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
}

.contact-panel p {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.contact-panel dl {
  margin-top: 24px;
}

.contact-panel dt {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-panel dd {
  margin-top: 6px;
  font-size: 14px;
}

/* Encadre d'attente tant que `BA_CONFIG.calendlyUrl` est vide. Sa hauteur est
   volontairement modeste : une fois le lien renseigne, script.js remplace tout
   le contenu par l'iframe, qui porte sa propre hauteur minimale de 660px. */
.calendly-slot {
  display: flex;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  margin-top: 26px;
  padding: 34px;
  border: 2px dashed #cfc4ee;
  border-radius: 4px;
  text-align: center;
}

.calendly-slot p {
  max-width: 380px;
  color: var(--text-light);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Lead magnet */
.leadmagnet {
  padding: 30px 0 110px;
}

.leadmagnet__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
  padding: 46px 50px;
  border-radius: var(--border-radius);
  background: var(--surface);
}

.leadmagnet__inner h2 {
  color: var(--purple);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.22;
}

.leadmagnet__inner>div>p {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.leadmagnet__form {
  padding: 30px 28px;
  border-radius: 4px;
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   L academie : equipe, chiffres, ancrages
   -------------------------------------------------------------------------- */
.team {
  padding: 40px 0 100px;
}

/* V1 uniquement. Les pages V2 (`.bento-page`) surchargent `display` et
   `flex-*` plus bas dans le fichier pour centrer leur derniere rangee, qui
   est incomplete depuis le passage de l'equipe a sept personnes. Le `gap` et
   le `margin-top` d'ici valent pour les deux. */
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 34px;
  margin-top: 56px;
}

.team-card {
  padding: 30px 26px;
  border-radius: var(--border-radius);
  background: var(--surface);
  text-align: center;
}

.team-card__avatar {
  display: flex;
  width: 132px;
  height: 132px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 50%;
  color: #ffffff;
  background: var(--purple);
  font-size: 38px;
  font-weight: 800;
  object-fit: cover;
}

/* Variante photo : le `display: flex` ci-dessus sert a centrer l'initiale du
   repli, une image n'en a pas besoin et n'a pas a montrer l'aplat violet. */
img.team-card__avatar {
  display: block;
  background: none;
}

.team-card h3 {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 800;
}

.team-card p {
  margin-top: 8px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
}

.team-card span {
  display: block;
  margin-top: 12px;
  color: var(--text-light);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Prose (pages legales, contenus longs) */
.prose {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 0 110px;
}

.prose h1 {
  color: var(--purple);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.18;
}

.prose h2 {
  margin-top: 46px;
  color: var(--purple);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
}

.prose h3 {
  margin-top: 28px;
  font-size: 16px;
  font-weight: 700;
}

.prose p,
.prose li {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.72;
}

.prose ul,
.prose ol {
  margin-top: 10px;
  padding-left: 22px;
}

.prose a {
  color: var(--purple);
  text-decoration: underline;
}

.prose__updated {
  margin-top: 18px;
  color: var(--text-light);
  font-size: 13px;
}

.prose table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.prose th,
.prose td {
  padding: 12px 14px;
  border: 1px solid #e6e1f4;
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--surface);
  font-weight: 700;
}

/* Les en-tetes de ligne (`<th scope="row">`) portent la finalite du
   traitement : ils restent lisibles comme du texte de tableau, pas comme une
   bande de titre. */
.prose tbody th {
  background: transparent;
  font-weight: 600;
}

.prose caption {
  margin-bottom: 10px;
  color: var(--text-light);
  font-size: 12.5px;
  text-align: left;
}

/* Les tableaux des pages legales (traitements RGPD, durees des traceurs) ont
   cinq et trois colonnes : ils ne tiennent pas sur un telephone. Le conteneur
   defile horizontalement plutot que de pousser la page entiere.
   `tabindex` n'est pas pose en HTML : Firefox et Chrome rendent deja une zone
   `overflow` focalisable au clavier des lors qu'elle defile. */
.prose__table-wrap {
  overflow-x: auto;
  margin-top: 20px;
}

.prose__table-wrap table {
  margin-top: 0;
  min-width: 640px;
}

/* Hero simple pour pages secondaires */
.page-hero {
  padding: 54px 0 20px;
}

.page-hero__eyebrow {
  color: var(--pink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-hero h1 {
  max-width: 900px;
  margin-top: 16px;
  color: var(--black);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.6px;
}

.page-hero h1 span {
  color: var(--purple);
}

.page-hero__lead {
  max-width: 720px;
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.62;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

/* Fil d ariane */
.breadcrumb {
  padding-top: 22px;
  color: var(--text-light);
  font-size: 12.5px;
}

.breadcrumb a {
  color: var(--text-light);
}

.breadcrumb a:hover {
  color: var(--purple);
  text-decoration: underline;
}

.breadcrumb span {
  margin: 0 8px;
}

/* Liste a puces generique en colonnes */
.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px 34px;
  margin-top: 44px;
  padding-left: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding-left: 32px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

.checklist li::before {
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--pink);
  content: "\2713";
  font-size: 11px;
  font-weight: 800;
}

/* Bandeau cookies */
.cookie-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 9000;
  display: none;
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 26px;
  border-radius: 4px;
  color: #ffffff;
  background: #201a3d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.cookie-banner[data-visible="true"] {
  display: block;
}

.cookie-banner p {
  font-size: 13.5px;
  line-height: 1.6;
}

.cookie-banner a {
  color: #ffffff;
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.cookie-banner .btn {
  padding: 11px 22px;
  font-size: 13.5px;
}

.btn--light {
  color: var(--purple);
  background: #ffffff;
}

/* Bandeau cookies. Le contour a 50 % d'opacite rendait « Refuser » presque
   illisible sur le fond sombre, alors que refuser doit se voir aussi bien
   qu'accepter. « Personnaliser » passe en lien souligne pour rester le
   troisieme choix sans concurrencer les deux boutons. */
.btn--ghost {
  border: 1px solid #ffffff;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.26);
}

.cookie-banner a.btn--ghost {
  border-color: transparent;
  background: none;
  text-decoration: underline;
}

.cookie-banner a.btn--ghost:hover {
  background: none;
  opacity: 0.75;
}

.btn--outline {
  border: 1px solid var(--purple);
  color: var(--purple);
}

/* Footer : colonne de navigation */
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 14px;
  font-size: 11px;
  line-height: 1.4;
}

.footer__nav strong {
  margin-bottom: 3px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.footer__nav a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Responsive des nouveaux composants + navigation mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav {
    gap: 20px;
  }

  .nav a,
  .nav__trigger {
    font-size: 14px;
  }

  .header__cta {
    padding: 11px 18px;
    font-size: 13px;
  }
}

@media (max-width: 1024px) {
  .header {
    position: relative;
  }

  /* Le CTA etant masque plus bas, il ne reste que le logo et le burger comme
     elements de grille (la nav est en position absolue, hors flux). Deux
     colonnes suffisent, et le burger se cale sur le bord droit. */
  .header__inner {
    grid-template-columns: auto 1fr;
    gap: 14px;
  }

  .nav-toggle {
    display: block;
    justify-self: end;
  }

  /* Le menu devient un panneau deroulant pleine largeur */
  .nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 40;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 22px 26px;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(17, 17, 17, 0.14);
  }

  .nav[data-open="true"] {
    display: flex;
  }

  .nav>a,
  .nav__trigger {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #eeeaf8;
    font-size: 16px;
    text-align: left;
  }

  /* Le CTA quitte la barre d'en-tete et rejoint le menu burger : sur mobile
     l'en-tete n'a plus la place de porter le logo, le burger ET le bouton. */
  .header__cta {
    display: none;
  }

  /* `color` est indispensable ici : la regle de base `.nav a` (0,1,1) est plus
     specifique que `.btn--primary` (0,1,0) et repeignait le libelle en noir
     sur le fond violet du bouton. */
  .nav>a.nav__cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 20px;
    padding: 14px 22px;
    border-bottom: 0;
    color: #ffffff;
    text-align: center;
  }

  .nav__trigger {
    justify-content: space-between;
  }

  .nav__menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 6px 0 12px 14px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .nav__item--open .nav__menu {
    display: grid;
    transform: none;
  }

  .nav__menu a {
    padding: 11px 12px;
    font-size: 14.5px;
  }
}

@media (max-width: 900px) {

  /* Neutralise la regle historique qui masquait la nav sans alternative */
  .nav[data-open="true"] {
    display: flex;
  }

  .aiact__inner {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 34px 28px;
  }

  .aiact__inner h2 {
    font-size: 24px;
  }

  .targets__grid,
  .trades__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bridge__inner,
  .leadmagnet__inner,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .bridge__inner,
  .leadmagnet__inner {
    padding: 34px 26px;
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  .page-hero h1 {
    font-size: 34px;
  }

  .trust__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
  }

  .trust__item:nth-child(odd) {
    border-left: 0;
  }

  .prose h1 {
    font-size: 30px;
  }
}

@media (max-width: 760px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .footer__identity,
  .footer__certification {
    grid-column: 1 / -1;
  }

  .footer__links,
  .footer__nav {
    min-height: 0;
    font-size: 11px;
  }
}

@media (max-width: 600px) {
  .header__cta {
    padding: 10px 15px;
    font-size: 12.5px;
  }

  .logo__img {
    height: 42px;
  }

  .page-hero h1 {
    font-size: 29px;
  }

  .page-hero__actions .btn,
  .aiact__inner .btn,
  .bridge .btn {
    width: 100%;
  }

  .footer__inner {
    grid-template-columns: 1fr;
  }

  .cookie-banner {
    right: 12px;
    bottom: 12px;
    left: 12px;
    padding: 20px;
  }
}

/* --------------------------------------------------------------------------
   Accueil : mise en page de la maquette de reference
   (grands chiffres, rangees image/texte alternees, cartes, carrousel)
   -------------------------------------------------------------------------- */

/* Hero : le media n'est plus un plein-bord colle au coin haut droit, mais un
   bloc contenu a cote du texte, en retrait du bord et aligne en hauteur sur
   lui (cf. references/images/freelance-reference.png). */
.home .hero {
  padding: 24px 0 64px;
}

.home .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.home .hero__text {
  max-width: none;
}

/* Annule le positionnement absolu plein-bord de la regle de base. */
.home .hero__media {
  position: static;
  width: 100%;
  margin: 0;
  aspect-ratio: 1.15 / 1;
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* Accueil v2 : plus de video dans le hero. Le grid deux colonnes laisserait
   le texte serre dans 55% de la largeur avec un vide a droite : on repasse en
   pleine largeur, centre, dans un bloc lavande borne au conteneur (meme
   couleur et meme rayon que les tuiles bento).
   Scope a .bento-page : les autres variantes d'accueil gardent leur media. */
.home.bento-page .hero {
  padding: 16px 0 56px;
}

/* Le fond s'arrete au conteneur : c'est .hero__inner qui le porte, pas la
   section. Le padding lateral vient de .container et est reecrit ici pour
   ajouter le vertical. */
.home.bento-page .hero__inner {
  display: block;
  padding: 72px 40px 40px;
  text-align: center;
  border-radius: var(--bento-radius);
  background: var(--surface);
}

/* Sur-titre des publics, au-dessus du h1. Graisse 400 : c'est la plus fine
   chargee pour Inter (400 a 800), un 300 retomberait sur le 400 de toute
   facon. L'interlettrage large compense les majuscules. */
.home.bento-page .hero__eyebrow {
  margin-bottom: 18px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* Les largeurs bornent les lignes : un titre qui court sur 1120px se lit mal,
   centre encore moins. */
.home.bento-page .hero__text {
  max-width: 780px;
  margin: 0 auto;
}

.home.bento-page .hero__desc {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
}

.home.bento-page .hero__trust {
  max-width: 680px;
  margin: 14px auto 0;
  color: var(--text-light);
  font-size: 12.5px;
  line-height: 1.5;
}

.home.bento-page .hero__buttons {
  justify-content: center;
}

/* Fleches des deux CTA, en pseudo-element comme les liens du site (\2192).
   Le .btn est en inline-flex : le pseudo-element y devient un item de flex,
   ou l'espace d'un content " \2192" serait ignore, d'ou le gap explicite. */
.home.bento-page .hero__buttons .btn {
  gap: 8px;
}

/* Les deux fleches sortent du meme caractere (\2193), celle de droite etant
   la meme pivotee d'un quart de tour. \2192 et \2193 ne tombent pas dans la
   meme fonte de repli et n'avaient donc ni la meme graisse ni la meme taille. */
.home.bento-page .hero__buttons .btn::after {
  content: "\2193";
  line-height: 1;
}

.home.bento-page .hero__buttons .btn--primary::after {
  transform: rotate(-90deg);
}

.home.bento-page .hero__buttons .btn--primary {
  padding-right: 24px;
  padding-left: 24px;
  font-weight: 700;
}

/* Bandeau equipe de l'accueil : meme composant que la page Academie, mais au
   milieu de la page et non en fin, d'ou le retrait des 100px de bas. Le rayon
   suit celui des tuiles bento. */
.bento-page .team {
  padding: 40px 0;
}

.bento-page .team-card {
  border-radius: var(--bento-radius);
}

/* Voir le commentaire de `.team__grid` : flex plutot que grid, pour que la
   derniere rangee se centre. La largeur reproduit quatre colonnes separees
   par le meme ecart de 34px ; `min-width` reprend la main quand un quart de
   la largeur devient trop etroit, et les cartes passent alors a trois, puis
   deux, puis une par rangee — toujours centrees. */
.bento-page .team__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.bento-page .team__grid > * {
  flex: 0 1 calc(25% - 25.5px);
  min-width: 230px;
}

/* Deux cartes par rangee : quatre n'ont plus la place, et trois laisseraient
   une rangee de un. */
@media (max-width: 900px) {
  .bento-page .team__grid > * {
    flex-basis: calc(50% - 17px);
  }
}

/* Une carte pleine largeur. `min-width` doit sauter ici, sinon la carte reste
   a 230px au milieu d'un conteneur plus etroit qu'elle ne le suppose. */
@media (max-width: 600px) {
  .bento-page .team__grid > * {
    flex-basis: 100%;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   Bandeau d'images defilant, a l'interieur du bloc lavande du hero. Les
   marges negatives annulent le padding lateral du bloc : la bande touche ses
   deux bords et les images s'y coupent, ce qui donne le defilement continu.
   -------------------------------------------------------------------------- */
.hero-marquee {
  margin: 48px -40px 0;
  overflow: hidden;
}

.hero-marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: hero-marquee 18s linear infinite;
}

/* Emplacements en PORTRAIT depuis le 1er septembre 2026. Ils faisaient
   260x170 tant que le bandeau portait des visuels paysage ; les cinq photos
   qui les ont remplaces sont toutes en 2:3 vertical, et un emplacement
   paysage leur aurait rogne une bande horizontale au milieu, c'est-a-dire
   coupe les tetes.
   170x255 est exactement le 2:3 des fichiers : `object-fit: cover` ne rogne
   donc rien, il ne fait que garantir le cadrage si une future photo arrivait
   dans un autre format. Changer ces deux valeurs sans respecter le 2:3
   remettrait du rognage. */
.hero-marquee__track img {
  flex: none;
  width: 170px;
  height: 255px;
  object-fit: cover;
  border-radius: var(--bento-radius, 14px);
  /* Fond de remplissage pendant le chargement. Une <img> est transparente tant
     que son fichier n'est pas arrive : les emplacements laissaient voir le
     lavande tres clair du hero, ce qui se lisait comme un trou blanc pendant
     les ~700 ms qui separent l'affichage de la page de l'arrivee des cinq
     photos. Avec ce fond, la bande se dessine tout de suite en cartes lavande
     qui se remplissent ensuite, sans flash. Ne pas retirer sans remettre autre
     chose : ce n'est pas decoratif. */
  background: var(--surface-deep);
}

/* -50% ramene sur la seconde serie mais laisse le gap qui separe les deux
   series : le demi-gap en plus recale exactement. A ajuster si le gap change. */
@keyframes hero-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 8px)); }
}

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

@media (max-width: 900px) {
  .home.bento-page .hero__inner {
    padding: 48px 24px 28px;
  }

  /* Les marges negatives suivent le padding lateral du bloc, sinon la bande
     deborde et fait apparaitre une barre de defilement horizontale. */
  .hero-marquee {
    margin: 36px -24px 0;
  }

  /* Meme 2:3 qu'en grand ecran, en plus petit. */
  .hero-marquee__track img {
    width: 120px;
    height: 180px;
  }
}

/* Le CTA du menu burger n'existe qu'en mobile : masque par defaut. */
.nav__cta {
  display: none;
}

@media (max-width: 900px) {
  .home .hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Pas de video du hero en mobile : 984 Ko pour un element decoratif, sur
     une connexion souvent moins bonne et un ecran ou il n'apporte rien. */
  .home .hero__media {
    display: none;
  }
}

/* Encadre « apprendre et construire ». Sur l'accueil il ne reste pas une
   carte posee dans le conteneur : l'aplat violet est remonte sur la section
   pour courir d'un bord a l'autre de la fenetre, pendant que le contenu
   garde l'alignement du conteneur comme le reste de la page.

   Pas de portee automatique par page : le meme composant sert ailleurs, ou il
   doit rester une carte bornee au conteneur — c'est le cas d'« Apprendre et
   construire » sur Entreprises, et du bloc d'Outils sur mesure. La bande se
   demande donc explicitement, avec `.bridge--band` sur la section. L'accueil
   la recoit par son body `.home`, pour ne pas toucher a son balisage.

   Utilisee aujourd'hui par : l'accueil (« Le pont entre les deux mondes ») et
   le bloc « Conformite et AI Act » de entreprises-v2.html. */
.home .bridge,
.bridge--band {
  /* Remplace le `20px 0 100px` de base : la bande porte desormais elle-meme
     la respiration que donnait le padding interne de la carte. Les sections
     voisines gardent la leur (90px sous « Nos trois metiers », 40px au-dessus
     de l'equipe), ce qui suffit a detacher la bande. */
  padding: 70px 0;
  background: var(--purple);
}

.home .bridge__inner,
.bridge--band .bridge__inner {
  border: 0;
  color: #ffffff;
  /* L'aplat, les coins arrondis et le padding sont passes sur la section :
     les garder ici redessinerait une carte dans la bande et decalerait le
     texte par rapport aux autres sections.

     `padding: 0` doit rester dans cette regle et non dans une media query :
     avec ses deux classes il passe devant le `34px 26px` que la requete
     900px pose sur .bridge__inner, quel que soit l'ordre des blocs. */
  padding: 0;
  border-radius: 0;
  background: none;
}

.home .bridge .bridge__eyebrow,
.bridge--band .bridge__eyebrow {
  color: rgba(255, 255, 255, 0.75);
}

.home .bridge__inner h2,
.bridge--band .bridge__inner h2 {
  color: #ffffff;
}

.home .bridge__inner p,
.bridge--band .bridge__inner p {
  color: rgba(255, 255, 255, 0.92);
}

/* Les puces gardent leur fond clair : leur texte doit repasser en noir, sinon
   il herite du blanc pose sur .bridge__inner et devient illisible. */
.home .bridge__list li,
.bridge--band .bridge__list li {
  color: var(--black);
}

/* Le bouton violet deviendrait invisible sur l'aplat : on l'inverse. */
.home .bridge__inner .btn--primary,
.bridge--band .bridge__inner .btn--primary {
  color: var(--purple);
  background: #ffffff;
}

.home .bridge__inner .btn--primary:hover,
.bridge--band .bridge__inner .btn--primary:hover {
  background: #efebfa;
}

/* Blancs autour de la bande « Conformite et AI Act » du hub Entreprises &
   Organisations. Sur un aplat pleine largeur, la marge que l'oeil percoit
   n'est pas le padding interne — deja symetrique a 70px — mais le blanc entre
   l'aplat et les sections voisines. Or il est herite d'elles, et il est
   dissymetrique :
     au-dessus  100px (bas de .bridge, « Apprendre et construire »)
     en dessous  40px (haut de .bento-page .modules, « Comment ca se passe »)
   Les 60px ci-dessous ramenent le bas a 100px, sur le rythme des autres
   sections de la page. Scope a la page : la valeur ne vaut que pour cet
   enchainement de sections, elle serait fausse ailleurs. A recalculer si
   l'ordre change ou si le padding d'un voisin bouge. */
.enterprise-page .bridge--band {
  margin-bottom: 60px;
}

/* Chiffres cles : la maquette pose trois grands nombres pleine largeur.
   Styles limites a l'accueil (body.home) : la page L'academie reutilise le
   meme composant .stats et doit garder son rendu actuel. */
.stats {
  padding: 74px 0 34px;
}

.stats__inner {
  align-items: start;
}

.stat__number {
  color: var(--purple);
  font-size: 56px;
}

.stats .partners {
  margin-top: 52px;
}

/* Accueil : le libelle passe au-dessus, sur sa propre ligne, et les noms
   s'alignent dessous en texte noir simple, sans cadre. Les pages Academie et
   Ecoles gardent la bande de logos encadres. */
.partners {
  flex-direction: column;
  gap: 18px;
}

.partners__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 38px;
}

.partners__logo {
  padding: 8px 18px;
  border: 0;
  border-radius: var(--border-radius);
  color: #ffffff;
  background: var(--pink);
  font-size: 15px;
  font-weight: 600;
}

/* Sur petit ecran, les blocs se repartissent en deux colonnes de largeur
   egale : a largeur libre, leurs bords ne s'alignaient pas d'une ligne a
   l'autre. Le dernier, seul sur sa ligne, s'etire sur toute la largeur. */
@media (max-width: 760px) {
  .partners__list {
    gap: 10px;
    width: 100%;
  }

  .partners__logo {
    flex: 1 1 calc(50% - 5px);
    padding: 11px 10px;
    font-size: 14px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Logos partenaires en image.

   Les pastilles roses `.partners__logo` restent la variante de repli, pour les
   partenaires dont on n'a pas encore le fichier. Les deux se cotoient donc
   dans la meme rangee : d'ou la gouttiere plus large sur `--logos`, sans quoi
   une pastille collee a un logo se lit comme un seul bloc.

   Les logos sont cales sur une hauteur commune plutot qu'une largeur commune :
   c'est la hauteur qui donne l'impression d'un alignement regulier quand les
   proportions different. `width: auto` neutralise l'attribut width du HTML,
   qui n'est la que pour reserver la place au chargement.
   -------------------------------------------------------------------------- */
.partners__list--logos {
  gap: 14px 26px;
}

/* Plaque blanche commune. Elle regle deux problemes d'un coup : le PNG
   Qualiopi porte son propre fond blanc opaque, qui formait un rectangle
   blanc en plein milieu de la tuile lavande ; et les logos monochromes
   (L22 est noir pur, GEBIA aussi) gagnent le fond neutre sur lequel leurs
   chartes demandent a etre poses. `border-box` fait porter la hauteur sur
   la plaque, padding compris, pour que toutes les plaques s'alignent.

   `max-width` est cale sur le logo le plus etale, GEBIA (217x49, soit un
   rapport de 4,4) : en dessous de 210px il serait le seul a ne pas
   atteindre la hauteur commune, `object-fit: contain` le reduisant pour
   tenir en largeur. Le baisser revient donc a casser l'alignement. */
.partners__logo--img {
  box-sizing: border-box;
  height: 52px;
  width: auto;
  max-width: 210px;
  padding: 6px 12px;
  background: #ffffff;
  border-radius: var(--border-radius);
  object-fit: contain;
  /* La rangee est un conteneur flex : sans ca, un logo large se ferait
     compresser au lieu de pousser la rangee suivante. */
  flex: 0 0 auto;
}

/* Le point de rupture 760px etale les pastilles sur deux colonnes de largeur
   egale. Applique a une image, ce `flex` la deformerait : on la laisse a sa
   largeur naturelle et on reduit un peu la hauteur. */
@media (max-width: 760px) {
  .partners__list--logos {
    gap: 12px 18px;
    justify-content: center;
  }

  .partners__logo--img {
    flex: 0 0 auto;
    height: 44px;
    max-width: 175px;
    padding: 5px 9px;
  }

}

/* Rangees image / texte alternees */
.audience {
  padding: 40px 0 90px;
}

/* Les attributs width/height des <img> sont conserves (ils evitent le saut de
   mise en page au chargement), mais le height presentationnel prend le pas sur
   `aspect-ratio`. On le neutralise pour retrouver le cadrage 4/3 de la maquette. */
.audience__media {
  height: auto;
}

.audience__text h3 {
  color: var(--purple);
  font-size: 21px;
  font-weight: 700;
}

.audience__text p+p {
  margin-top: 14px;
}

.audience__link {
  display: inline-block;
  margin-top: 20px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
}

.audience__link::after {
  content: " \2192";
}

.audience__link:hover {
  color: var(--pink);
}

/* Cartes « Nos trois metiers » : le lien et la mention de perimetre passent en
   blocs, pour s'empiler au lieu de se suivre sur la meme ligne. */
.benefit-card__link {
  display: block;
  margin-top: 22px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
}

.benefit-card__link::after {
  content: " \2192";
}

.benefit-card__link:hover {
  color: var(--pink);
}

/* Mention de perimetre : texte noir simple, sans pastille, a 12px sous le lien.
   Cible uniquement l'accueil : les pages Conformite et Financements gardent la
   pastille coloree. */
.benefit-card .trade-card__tag {
  display: block;
  margin-top: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--black);
}

/* Ecart titre de carte -> texte : 24px. Le titre ne reserve plus de hauteur
   fixe, qui creusait l'espace sous les intitules d'une seule ligne. */
.benefit-card h3 {
  min-height: 0;
}

.benefit-card p {
  margin-top: 24px;
}

/* La hauteur plancher de 350px laissait un vide sous la mention de perimetre.
   Les cartes se dimensionnent sur leur contenu ; la grille les egalise deja
   sur la plus haute des trois.

   Haut et bas doivent paraitre identiques A L'OEIL, ce que des paddings egaux
   ne donnent pas : au-dessus de « Former », l'interligne du titre et l'ecart
   entre le haut de la police et le haut des capitales ajoutent ~5px d'espace
   invisible (20px de police, interligne 1.25). En bas, la mention s'arrete
   quasiment sur son descendant, sans blanc supplementaire.
   On retire donc ces 5px du padding haut : 27 + 5 ≈ 32 percus des deux cotes. */
.benefit-card {
  min-height: 0;
  padding-top: 27px;
  padding-bottom: 32px;
}

/* Carrousel : il accueille les references anonymisees (contexte / action /
   livrable) en attendant les temoignages nominatifs (chantier Matis). */
.testimonials__track .case-card {
  border: 0;
  background: var(--surface);
  text-align: left;
}

@media (max-width: 900px) {
  .stat__number {
    font-size: 44px;
  }

  .audience__row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* La regle historique inversait l'ordre via `direction`, ce qui laissait
     l'image sous le texte en pile. On force image puis texte. */
  .audience__row--reverse {
    direction: ltr;
  }
}

/* Tableaux des pages legales : defilement horizontal sur petit ecran */
.table-scroll {
  margin-top: 20px;
  overflow-x: auto;
}

.table-scroll table {
  min-width: 620px;
  margin-top: 0;
}
/* ==========================================================================
   V2 FREELANCE — mise en page bento (page de travail, freelance-v2.html)

   Tout est scope a `body.freelance-v2` : cette variante ne doit modifier
   aucune autre page. Inspiration de mise en page fournie par Noa
   (liora.io), transposee aux couleurs de la marque : violet #54439C en
   dominante, rose #df3c8c en accent, surface lavande #f6f4fc.

   Note : les tuiles utilisent un rayon de 14px alors que le reste du site
   est passe a 4px. C'est ce qui fait le style bento ; a arbitrer.
   ========================================================================== */

.freelance-v2 {
  --bento-radius: 14px;
}

/* --------------------------------------------------------------------------
   Bento
   -------------------------------------------------------------------------- */
/* Hero remonte : le fil d'Ariane a ete retire, le titre n'a plus besoin de
   son espace au-dessus. */
.freelance-v2 .page-hero {
  padding-top: 26px;
}

/* Le bento n'a plus de titre de section : il enchaine directement sur le
   hero, l'espacement passe donc dans le padding de la section. */
.freelance-v2 .bento-section {
  padding: 40px 0;
}

.freelance-v2 .bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.freelance-v2 .bento__tile {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border-radius: var(--bento-radius);
  background: var(--surface);
}

/* Bloc d'accroche : deux colonnes sur deux rangees. */
.freelance-v2 .bento__tile--lead {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: center;
  color: #ffffff;
  background: var(--purple);
}

.freelance-v2 .bento__tile--lead h3 {
  margin-top: 14px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.22;
}

.freelance-v2 .bento__tile--lead p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.65;
}

.freelance-v2 .bento__tile--lead .btn {
  align-self: flex-start;
  margin-top: 26px;
  color: var(--purple);
  background: #ffffff;
}

.freelance-v2 .bento__tile--lead .btn:hover {
  background: #efebfa;
}

/* Tuile chiffre. */
.freelance-v2 .bento__tile--stat {
  justify-content: center;
  min-height: 148px;
}

.freelance-v2 .bento__value {
  display: block;
  color: var(--purple);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
}

.freelance-v2 .bento__label {
  display: block;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

/* Le tarif, en rose : c'est l'information que l'on vient chercher. */
.freelance-v2 .bento__tile--accent {
  justify-content: center;
  min-height: 148px;
  color: #ffffff;
  background: var(--pink);
}

.freelance-v2 .bento__tile--accent .bento__value,
.freelance-v2 .bento__tile--accent .bento__label {
  color: #ffffff;
}

/* Bloc financement, sur deux colonnes. */
.freelance-v2 .bento__tile--wide {
  grid-column: span 2;
}

.freelance-v2 .bento__tile--wide h3 {
  margin-top: 12px;
  color: var(--purple);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.28;
}

.freelance-v2 .bento__tile--wide p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.freelance-v2 .bento__eyebrow {
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.freelance-v2 .bento__tile--lead .bento__eyebrow {
  color: #ffb8dd;
}

.freelance-v2 .bento__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-left: 0;
  list-style: none;
}

.freelance-v2 .bento__chips li {
  padding: 6px 14px;
  border: 1px solid #ded8f0;
  border-radius: 30px;
  color: var(--purple);
  font-size: 12.5px;
  font-weight: 700;
}

.freelance-v2 .bento__link {
  margin-top: auto;
  padding-top: 18px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
}

.freelance-v2 .bento__link::after {
  content: " \2192";
}

.freelance-v2 .bento__link:hover {
  color: var(--pink);
}

/* Tuile image : deux colonnes, l'image remplit le cadre. */
.freelance-v2 .bento__tile--media {
  grid-column: span 2;
  margin: 0;
  padding: 0;
  overflow: hidden;
  min-height: 200px;
}

.freelance-v2 .bento__tile--media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Programme
   -------------------------------------------------------------------------- */
.freelance-v2 .modules {
  padding: 56px 0 90px;
}

.freelance-v2 .modules__intro {
  max-width: 720px;
  margin: 24px auto 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

.freelance-v2 .modules__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

.freelance-v2 .module-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 30px 28px;
  border-radius: var(--bento-radius);
  background: var(--surface);
}

.freelance-v2 .module-card__eyebrow {
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.freelance-v2 .module-card h3 {
  margin-top: 12px;
  color: var(--purple);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}

.freelance-v2 .module-card ul {
  margin-top: auto;
  padding-top: 26px;
  padding-left: 0;
  list-style: none;
}

.freelance-v2 .module-card li {
  position: relative;
  padding-left: 18px;
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.45;
}

.freelance-v2 .module-card li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--pink);
  content: "\203A";
  font-weight: 800;
}

/* Carte inversee, comme la carte « certification » de la reference. */
.freelance-v2 .module-card--dark {
  color: #ffffff;
  background: #201a3d;
}

.freelance-v2 .module-card--dark h3 {
  color: #ffffff;
}

.freelance-v2 .module-card--dark li {
  color: rgba(255, 255, 255, 0.88);
}

/* --------------------------------------------------------------------------
   Financement — memes tuiles que les cartes Programme : fond lavande, rayon
   bento, texte a gauche, sur-titre rose en capitales.
   -------------------------------------------------------------------------- */
.freelance-v2 .funding-guide__grid {
  gap: 16px;
  margin-top: 48px;
}

.freelance-v2 .funding-option-card {
  align-items: stretch;
  min-height: 0;
  padding: 30px 28px;
  border-radius: var(--bento-radius);
  background: var(--surface);
  text-align: left;
}

.freelance-v2 .funding-option-card h3 {
  min-height: 0;
  color: var(--purple);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}

.freelance-v2 .funding-option-card p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

/* « Ce que nous préparons » joue le role du sur-titre des cartes Programme. */
.freelance-v2 .funding-option-card h4 {
  margin-top: 24px;
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.freelance-v2 .funding-option-card .btn {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 11px;
}

/* --------------------------------------------------------------------------
   Les plus
   -------------------------------------------------------------------------- */
.freelance-v2 .perks {
  padding: 40px 0 90px;
}

.freelance-v2 .perks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

.freelance-v2 .perk-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e8e3f6;
  border-radius: var(--bento-radius);
}

/* Bandeau bas et large plutot qu'une vignette : l'image illustre, elle ne
   doit pas peser plus lourd que le texte de la carte.
   `height: auto` est indispensable : les attributs width/height des <img>
   posent une hauteur presentationnelle qui prend le pas sur `aspect-ratio`.
   Sans cela chaque image garde sa hauteur naturelle et les cartes se
   desalignent. */
.freelance-v2 .perk-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;
}

.freelance-v2 .perk-card__body {
  padding: 26px 24px 28px;
}

.freelance-v2 .perk-card h3 {
  color: var(--purple);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.28;
}

.freelance-v2 .perk-card p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Deroulement
   -------------------------------------------------------------------------- */
.freelance-v2 .steps {
  padding: 40px 0 90px;
}

.freelance-v2 .steps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
  padding-left: 0;
  list-style: none;
}

/* Pas de cadre de carte : le visuel puis le texte, poses directement sur le
   fond de page, comme dans la reference. */
.freelance-v2 .step-card {
  padding: 0;
  border-radius: 0;
  background: none;
}

.freelance-v2 .step-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--bento-radius);
}

.freelance-v2 .step-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Badge en carre arrondi, superpose au coin haut droit du visuel. */
.freelance-v2 .step-card__num {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #ffffff;
  background: var(--purple);
  font-size: 16px;
  font-weight: 800;
}

.freelance-v2 .step-card h3 {
  margin-top: 20px;
  color: var(--black);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.28;
}

.freelance-v2 .step-card p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

}

@media (max-width: 900px) {
  .freelance-v2 .bento,
  .freelance-v2 .steps__grid,
  .freelance-v2 .modules__grid,
  .freelance-v2 .perks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .freelance-v2 .bento__tile--lead {
    grid-row: span 1;
  }

}

@media (max-width: 600px) {
  .freelance-v2 .bento,
  .freelance-v2 .modules__grid,
  .freelance-v2 .perks__grid,
  .freelance-v2 .steps__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .freelance-v2 .bento__tile--lead,
  .freelance-v2 .bento__tile--wide,
  .freelance-v2 .bento__tile--media {
    grid-column: span 1;
  }

  .freelance-v2 .bento__tile--lead h3 {
    font-size: 23px;
  }

  .freelance-v2 .module-card {
    min-height: 0;
  }



}

/* ==========================================================================
   DIAGNOSTIC DE MATURITE IA — bande d'appel, premiere apres le hero
   (brief du 30 aout 2026, point 2)

   Meme composition que `.bridge` : deux colonnes, texte a gauche, liste a
   droite. Elle s'en distingue par l'aplat, clair et non violet, parce que
   l'accueil porte deja une bande violette pleine largeur plus bas.

   La liste est une `<ol>` : les trois etapes sont bien une sequence, a la
   difference des puces decoratives de `.bridge__list`. Le compteur est rendu
   par `::before`, `list-style` est donc retire.
   ========================================================================== */
.diagnostic-cta {
  padding: 70px 0;
  background: var(--surface-deep);
}

.diagnostic-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}

.diagnostic-cta__eyebrow {
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.diagnostic-cta__text h2 {
  margin-top: 12px;
  color: var(--purple);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.18;
}

.diagnostic-cta__text p {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

.diagnostic-cta__actions {
  margin-top: 26px;
}

.diagnostic-cta__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: diagnostic-step;
}

.diagnostic-cta__steps li {
  position: relative;
  padding: 16px 18px 16px 56px;
  border-radius: var(--border-radius);
  background: #ffffff;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
  counter-increment: diagnostic-step;
}

.diagnostic-cta__steps li + li {
  margin-top: 10px;
}

.diagnostic-cta__steps li strong {
  display: block;
  margin-bottom: 3px;
  color: var(--black);
  font-size: 14px;
  font-weight: 800;
}

.diagnostic-cta__steps li::before {
  position: absolute;
  top: 16px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--purple);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  content: counter(diagnostic-step);
}

@media (max-width: 900px) {
  .diagnostic-cta {
    padding: 48px 0;
  }

  .diagnostic-cta__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .diagnostic-cta__text h2 {
    font-size: 26px;
  }
}

/* ==========================================================================
   BENTO — briques partagees par les pages en V2 (portee : body.bento-page)

   Scope a `body.bento-page`. La page porte AUSSI la classe `home`, elle herite
   donc du hero deux colonnes et de l'encadre violet deja en place sur
   l'accueil actuel ; seuls les blocs ci-dessous changent.

   Le rayon des tuiles suit celui de la V2 Freelance (14px), alors que le
   reste du site est a 4px. Decision a arbitrer si cette V2 est retenue.
   ========================================================================== */

.bento-page {
  --bento-radius: 14px;
}

.bento-page .bento-section {
  padding: 40px 0;
}

.bento-page .bento {
  display: grid;
  gap: 16px;
}

.bento-page .bento__tile {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border-radius: var(--bento-radius);
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   Bento « preuves + AI Act » : trois chiffres en colonne a gauche, le
   bandeau reglementaire en grande tuile a droite.
   -------------------------------------------------------------------------- */
.bento-page .bento--proof {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Chiffres a gauche, bandeau reglementaire a droite. Les placements sont
   ecrits explicitement : le miroir ne peut pas etre obtenu par le placement
   automatique, qui suit l'ordre du HTML. */
.bento-page .bento__tile--aiact {
  grid-column: 3 / span 2;
  grid-row: 1 / span 2;
}

/* Les deux premiers chiffres se posent en rangee 1, colonnes 1 et 2. */
.bento-page .bento--proof .bento__tile--stat {
  grid-row: 1;
}

/* Le troisieme prend toute la largeur restante, juste dessous. Le selecteur
   doit etre au moins aussi specifique que celui des deux autres chiffres
   ci-dessus, qui porte trois classes : sinon la rangee 1 l'emporte ici. */
.bento-page .bento--proof .bento__tile--stat-wide {
  grid-column: 1 / span 2;
  grid-row: 2;
}

/* Quatre chiffres en carre 2x2 a gauche du bandeau AI Act, la ou les pages a
   trois chiffres en alignent deux en rangee 1 et un large en rangee 2. Il
   suffit de rendre la rangee au placement automatique : les deux premiers
   remplissent la rangee 1, les colonnes 3 et 4 sont prises par le bandeau,
   les deux suivants basculent donc en rangee 2.
   Ce selecteur a autant de classes que la regle ci-dessus : c'est sa
   position, plus bas dans le fichier, qui le fait gagner — ne pas le remonter.

   L'accueil beneficiait de ce carre par sa classe de page `.home`. Le cas a
   ete retire le 4 septembre 2026, quand il est passe a trois chiffres comme
   le reste du site. Aucune page n'a quatre chiffres aujourd'hui ; la regle
   reste disponible pour celle qui en aurait. */
.bento-page .bento--proof-4 .bento__tile--stat {
  grid-row: auto;
}

.bento-page .bento__tile--stat {
  justify-content: center;
  min-height: 150px;
}

.bento-page .bento__value {
  display: block;
  color: var(--purple);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
}

.bento-page .bento__label {
  display: block;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Bento de fin de page des verticales entreprises. Il remplace trois bandes
   pleine largeur empilees — mentions reglementaires, financement, CTA — qui
   allongeaient la page sans rien hierarchiser.

   Meme principe de placement que `bento--proof` : la grande tuile est ecrite
   explicitement, le placement automatique ne peut pas produire ce decoupage.
   -------------------------------------------------------------------------- */
.bento-page .bento--closing {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Le CTA occupe la moitie gauche sur les deux rangees : c'est l'objectif de
   la page, il domine le reste de la grille. */
.bento-page .bento--closing .bento__tile--cta {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.bento-page .bento--closing .bento__tile--funding {
  grid-column: 3 / span 2;
  grid-row: 1;
}

/* Les deux mentions reglementaires se rangent d'elles-memes en colonnes 3 et
   4 de la rangee 2, les autres tuiles ayant pris tout le reste. Elles gardent
   la meme taille et le meme sur-titre : elles doivent se lire comme un bloc
   distinct de l'argumentaire commercial, et rester lisibles — la mention
   d'accessibilite est une attente de l'audit Qualiopi. */
.bento-page .bento--closing .bento__tile--legal {
  grid-row: 2;
}

.bento-page .bento--closing h3 {
  margin-top: 10px;
  color: var(--purple);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.bento-page .bento--closing .bento__tile--legal p,
.bento-page .bento--closing .bento__tile--funding p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

.bento-page .bento--closing .bento__tile--legal a {
  color: var(--purple);
  text-decoration: underline;
}

.bento-page .bento__tile--lead {
  justify-content: center;
  color: #ffffff;
  background: var(--purple);
}

.bento-page .bento__tile--lead h2 {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.24;
}

.bento-page .bento__tile--lead p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.6;
}

.bento-page .bento__tile--lead .btn {
  align-self: flex-start;
  margin-top: 22px;
  color: var(--purple);
  background: #ffffff;
}

.bento-page .bento__tile--lead .btn:hover {
  background: #efebfa;
}

.bento-page .bento__eyebrow {
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bento-page .bento__tile--lead .bento__eyebrow {
  color: #ffb8dd;
}

/* Note sous un bento de preuves : perimetre, periode et methode de releve
   des chiffres affiches juste au-dessus. Discrete par la taille, jamais par
   la couleur — elle doit rester lisible. Sans elle, les tuiles chiffrees ne
   sont plus des indicateurs mais des slogans, et l'audit Qualiopi comme le
   visiteur attendent l'inverse. */
.bento-page .bento__footnote {
  margin: 18px auto 0;
  max-width: 780px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Bento a trois chiffres, sans bandeau AI Act (`bento--proof-3`)

   La tuile partenaires — Qualiopi, GEBIA, IAE Metz, L22 — a ete RETIREE de
   toutes les pages V2 le 1er septembre 2026, sur demande. Les regles qui la
   mettaient en page sont parties avec elle.

   Elle laissait un trou sur ces cinq pages : elles n'ont pas de bandeau AI Act,
   et la tuile occupait a elle seule la moitie droite de la grille (colonnes 3-4
   sur deux rangees) pendant que trois chiffres se partageaient la gauche. La
   classe s'appelait donc `bento--proof-partners` ; elle est renommee
   `bento--proof-3` et decrit maintenant ce qu'elle fait vraiment : trois
   chiffres sur une seule rangee, pleine largeur.

   Les deux surcharges annulent les placements de `bento--proof`, ecrits plus
   haut pour la mise en page a deux rangees. Elles portent autant de classes
   que les regles qu'elles neutralisent : c'est leur position, plus bas dans le
   fichier, qui les fait gagner — ne pas les remonter.

   Les classes `.partners__*` elles-memes restent definies plus haut dans le
   fichier : les pages V1 (index.html, pages/academie.html, ecoles.html,
   entreprises.html, freelance.html, particuliers.html) s'en servent toujours.
   -------------------------------------------------------------------------- */
.bento-page .bento--proof-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bento-page .bento--proof-3 .bento__tile--stat,
.bento-page .bento--proof-3 .bento__tile--stat-wide {
  grid-column: auto;
  grid-row: auto;
}

/* --------------------------------------------------------------------------
   Bento « portes d'entree » : la tuile Entreprises occupe deux rangees,
   c'est la cible n°1 du brief.
   -------------------------------------------------------------------------- */
.bento-page .bento--targets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 48px;
}

.bento-page .target-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e8e3f6;
  border-radius: var(--bento-radius);
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bento-page .target-tile:hover {
  border-color: #cfc4ee;
  box-shadow: 0 16px 40px rgba(84, 67, 156, 0.13);
  transform: translateY(-3px);
}

.bento-page .target-tile--main {
  grid-row: span 2;
}

.bento-page .target-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center 35%;
}

/* La grande tuile fait la hauteur de deux tuiles : son visuel n'a pas de
   proportion fixe, il occupe la place que le texte laisse. Sans cela on
   obtient une image de 290px surmontant 700px de blanc. */
.bento-page .target-tile--main img {
  flex: 1 1 auto;
  min-height: 260px;
  aspect-ratio: auto;
}

.bento-page .target-tile__body {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
}

/* Sur les tuiles simples, c'est le texte qui absorbe la hauteur restante ;
   sur la grande, c'est l'image (voir plus haut). */
.bento-page .target-tile:not(.target-tile--main) .target-tile__body {
  flex: 1 1 auto;
}

.bento-page .target-tile h3 {
  margin-top: 12px;
  color: var(--purple);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.26;
}

.bento-page .target-tile p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.bento-page .bento__link {
  margin-top: auto;
  padding-top: 20px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
}

.bento-page .bento__link::after {
  content: " \2192";
}

.bento-page .bento__link:hover {
  color: var(--pink);
}

/* --------------------------------------------------------------------------
   Nos trois metiers — cartes a sur-titre numerote, la troisieme inversee.
   -------------------------------------------------------------------------- */
.bento-page .modules {
  padding: 40px 0 90px;
}

.bento-page .modules__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

/* Cinq cartes dans une grille a trois colonnes laissent une rangee a trou.
   Sur six colonnes, les trois premieres prennent deux colonnes et les deux
   dernieres en prennent trois : deux rangees pleines, sans carte orpheline.
   `nth-last-child` plutot que des classes sur les cartes, pour que l'ordre du
   HTML reste la seule source de verite. */
.bento-page .modules__grid--5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.bento-page .modules__grid--5 > * {
  grid-column: span 2;
}

.bento-page .modules__grid--5 > *:nth-last-child(-n + 2) {
  grid-column: span 3;
}

/* Carte unique : dans la grille a trois colonnes, elle occupait un tiers de la
   largeur sous un titre de section pleine largeur. Elle est centree et bornee
   plutot qu'etiree, une carte de 1120px donnant des lignes illisibles. */
.bento-page .modules__grid--single {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

/* Deux cartes : sur la grille a trois colonnes elles laisseraient une colonne
   vide a droite, ce qui se lit comme une carte manquante — c'est exactement le
   cas des references Ecoles depuis le retrait de WinSport, et celui des deux
   projets en cours de la page Outils sur mesure. */
.bento-page .modules__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Quatre cartes : deux rangees de deux, plutot que 3 + 1 orpheline. Deux
   colonnes conviennent mieux que quatre a des cartes qui portent une liste de
   definitions plutot qu'une phrase. */
.bento-page .modules__grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Cartes a contenu court (un surtitre, un titre, une seule definition) : le
   min-height de 300px, calibre pour les cartes a liste, leur laissait un vide
   sous le texte. Les cartes restent alignees entre elles, la grille les
   etirant deja a la hauteur de la plus haute.

   Sert sur L'academie et sur les quatre cartes OPCO de la page Financements,
   ou il se combine avec `--4`. Se combine avec n'importe quelle variante de
   colonnes : il ne touche qu'a la hauteur. */
.bento-page .modules__grid--compact .module-card {
  min-height: 0;
}

/* Sortie de la grille OPCO (page Financements) : un lien texte sous les quatre
   cartes, centre sur le meme axe que le titre de section. `.bento__link` porte
   un `padding-top` prevu pour les cartes en colonne flex ; ici l'ancre est
   inline, ce padding ne pousse donc rien et l'ecart vient de ce margin. */
.bento-page .opco-more {
  margin-top: 48px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Carrousel horizontal. Les cartes defilent au lieu de s'enchainer en grille :
   le visiteur parcourt les profils jusqu'au sien plutot que de lire les sept.
   Le debordement est volontaire — une carte coupee au bord signale qu'il y a
   une suite, sans quoi les fleches ne se comprennent pas.
   -------------------------------------------------------------------------- */
.bento-page .slider {
  margin-top: 40px;
}

.bento-page .slider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-left: 0;
  list-style: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* La barre native est masquee : la navigation passe par les fleches, et le
     defilement tactile reste possible. */
  scrollbar-width: none;
}

.bento-page .slider__track::-webkit-scrollbar {
  display: none;
}

.bento-page .slider__item {
  flex: 0 0 340px;
  scroll-snap-align: start;
}

/* Fleches en bas a droite, comme sur la reference. L'etat desactive est porte
   par `disabled` : le contraste ne suffit pas a lui seul a dire qu'un bouton
   ne repond plus. */
.bento-page .slider__nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

.bento-page .slider__btn {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: #201a3d;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.bento-page .slider__btn:hover:not(:disabled) {
  background: var(--purple);
}

.bento-page .slider__btn:disabled {
  color: var(--text-light);
  background: var(--surface-deep);
  cursor: default;
}

/* Carte de dispositif : pastille du fonds, profil, ce que l'organisme prend
   en charge, puis le detail du financement sous un filet. */
.bento-page .funding-card {
  display: flex;
  height: 100%;
  min-height: 380px;
  flex-direction: column;
  /* Le bas reservait 84px au bouton « + » en pastille absolue : il a disparu
     en meme temps que le depliant, le padding redevient regulier. */
  padding: 30px 28px;
  border-radius: var(--bento-radius);
  background: var(--surface);
}

.bento-page .funding-card__fund {
  color: var(--pink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bento-page .funding-card h3 {
  margin-top: 16px;
  color: var(--black);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.22;
}

.bento-page .funding-card h3 a {
  color: inherit;
  text-decoration: none;
}

.bento-page .funding-card h3 a:hover {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* La liste suit son titre a distance fixe. Elle etait auparavant calee en bas
   de carte (`margin-top: auto`) pour aligner les listes entre elles, mais le
   creux sous le titre grandissait alors d'autant que le titre etait court : la
   proximite avec le titre prime, l'alignement d'une carte a l'autre non. Le
   vide restant tombe donc plus bas, entre la liste et le filet du detail. */
.bento-page .funding-card__points {
  margin-top: 18px;
  /* Ecart minimal avec le filet. Il ne peut plus venir du bloc detail, dont
     le `margin-top` est passe en `auto` : un `auto` retombe a zero des qu'il
     n'y a plus de place a distribuer, et le filet viendrait alors toucher le
     dernier point de la liste. */
  margin-bottom: 22px;
  padding-left: 0;
  list-style: none;
}

.bento-page .funding-card__points li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.bento-page .funding-card__points li + li {
  margin-top: 9px;
}

.bento-page .funding-card__points li::before {
  position: absolute;
  left: 0;
  color: var(--purple);
  content: "\203A";
  font-weight: 700;
}

/* Le detail etait replie derriere un bouton « + » en pastille dans le coin
   bas droit. Le pli n'est plus : une phrase et un lien ne justifiaient pas de
   faire cliquer, ils sont affiches d'emblee sous un filet. Le bouton et son
   handler JS ont ete retires avec. */
.bento-page .funding-card__detail {
  /* Colle le filet, la phrase et le lien au bas de la carte. Les sept listes
     n'ont pas le meme nombre de points : sans ca, les sept liens « Voir... »
     se terminaient a sept hauteurs differentes alors que les cartes, elles,
     font deja la meme hauteur. Le vide se loge au-dessus du filet.

     Fonctionne aussi une fois les cartes empilees sur mobile : la, plus de
     place a distribuer, l'`auto` vaut zero et seul le `margin-bottom` de la
     liste subsiste, soit exactement l'ecart d'avant. */
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--surface-deep);
}

.bento-page .funding-card__detail p {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.bento-page .funding-card__detail .bento__link {
  display: inline-block;
  margin-top: 12px;
}

/* Note de bas de section : elle vient APRES la grille, elle a donc besoin
   de plus d'air au-dessus qu'une intro placee avant. */
.bento-page .modules__note {
  max-width: 760px;
  margin: 56px auto 0;
  color: var(--text-light);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}

.bento-page .modules__note a {
  color: var(--purple);
  font-weight: 700;
}

.bento-page .modules__note a:hover {
  color: var(--pink);
}

.bento-page .module-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 30px 28px;
  border-radius: var(--bento-radius);
  background: var(--surface);
}

.bento-page .module-card__eyebrow {
  color: var(--pink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.bento-page .module-card h3 {
  margin-top: 10px;
  color: var(--purple);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.bento-page .module-card p {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* Listes des cartes : chevrons roses, pas de puces par defaut. */
.bento-page .module-card ul {
  margin-top: 18px;
  padding-left: 0;
  list-style: none;
}

.bento-page .module-card li {
  position: relative;
  padding-left: 18px;
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.45;
}

.bento-page .module-card li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--pink);
  content: "\203A";
  font-weight: 800;
}

.bento-page .module-card--dark li {
  color: rgba(255, 255, 255, 0.88);
}

/* Elements amenes par les gabarits V1 convertis en cartes bento :
   sous-titres, intertitres et listes de definition des anciennes cartes de
   reference. Sans ces regles ils heriteraient de styles concus pour d'autres
   composants. */
.bento-page .module-card__subtitle {
  margin-top: 8px;
  color: var(--text-light);
  font-size: 13px;
  line-height: 1.45;
}

.bento-page .module-card h4 {
  margin-top: 22px;
  color: var(--pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bento-page .module-card dl {
  margin-top: 18px;
}

.bento-page .module-card dt {
  margin-top: 16px;
  color: var(--black);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bento-page .module-card dt:first-child {
  margin-top: 0;
}

.bento-page .module-card dd {
  margin-top: 6px;
  margin-left: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.bento-page .module-card--dark dt {
  color: #ffffff;
}

.bento-page .module-card--dark dd,
.bento-page .module-card--dark .module-card__subtitle {
  color: rgba(255, 255, 255, 0.88);
}

.bento-page .module-card .btn {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 11px;
}

/* Mention de perimetre Qualiopi : texte simple, plaque en bas de carte. */
.bento-page .module-card__tag {
  margin-top: auto;
  padding-top: 22px;
  font-size: 11.5px;
  font-weight: 700;
}

/* Mentions en noir sur les cartes claires, en blanc sur la carte inversee.
   La distinction finançable / hors champ n'est plus portee par la couleur
   mais par le texte lui-meme. */
.bento-page .module-card__tag--ok,
.bento-page .module-card__tag--no {
  color: var(--black);
}

/* Verdict finançable / hors champ, en tete de carte. Il etait rendu par
   `module-card__eyebrow`, un emplacement prevu pour un surtitre : le symbole
   sortait en 13px, alors que c'est le signal principal de la carte. Comme pour
   les mentions ci-dessus, la distinction n'est pas portee par la couleur seule
   mais par le glyphe lui-meme, coche ou croix. */
.bento-page .module-card__verdict {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.bento-page .module-card__verdict--ok {
  color: #ffffff;
  background: var(--purple);
}

.bento-page .module-card__verdict--no {
  color: var(--ink-soft);
  background: var(--surface-deep);
}

/* Lien de renvoi pose en pied de carte, quand la carte n'en a pas d'autre.
   Remplace un `style="margin-top:22px"` en dur sur la page Conformite. */
.bento-page .module-card__footer-link {
  margin-top: 22px;
}

.bento-page .module-card .bento__link {
  margin-top: 0;
  padding-top: 12px;
}

/* Carte inversee. */
.bento-page .module-card--dark {
  color: #ffffff;
  background: #201a3d;
}

.bento-page .module-card--dark h3 {
  color: #ffffff;
}

.bento-page .module-card--dark p {
  color: rgba(255, 255, 255, 0.88);
}

.bento-page .module-card--dark .module-card__tag--ok,
.bento-page .module-card--dark .module-card__tag--no {
  color: #ffffff;
}

.bento-page .module-card--dark .bento__link {
  color: #ffffff;
}

.bento-page .module-card--dark .bento__link:hover {
  color: #ffb8dd;
}

/* --------------------------------------------------------------------------
   Etapes numerotees, meme motif que le « Processus d'inscription » de la page
   Freelances : visuel carre, badge numerote en surimpression, titre et texte
   poses directement sur le fond, sans cadre de carte. Les regles sont
   dupliquees plutot qu'ajoutees au selecteur `.freelance-v2` existant : cette
   declinaison est en cinq colonnes et sur fond lilas, la page Freelances est
   en quatre colonnes sur fond blanc.
   -------------------------------------------------------------------------- */
.bento-page .steps {
  padding: 70px 0;
  background: var(--surface);
}

.bento-page .steps__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
  padding-left: 0;
  list-style: none;
}

/* Le nombre d'etapes change d'une page a l'autre : la colonne est declaree
   par le balisage plutot que devinee, pour qu'une rangee reste toujours
   pleine. */
.bento-page .steps__grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bento-page .step-card {
  padding: 0;
  border-radius: 0;
  background: none;
}

.bento-page .step-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--bento-radius);
}

.bento-page .step-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Badge en carre arrondi, superpose au coin haut droit du visuel. */
.bento-page .step-card__num {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #ffffff;
  background: var(--purple);
  font-size: 16px;
  font-weight: 800;
}

.bento-page .step-card h3 {
  margin-top: 20px;
  color: var(--black);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.28;
}

.bento-page .step-card p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Mention de perimetre : obligatoire (la certification ne couvre que les
   actions de formation), mais c'est un appel de note, pas un argument. Elle
   ferme la section sans peser sur la sequence d'etapes. */
.bento-page .steps__scope {
  position: relative;
  max-width: 780px;
  margin: 52px auto 0;
  padding-left: 18px;
  color: var(--text-light);
  font-size: 13px;
  line-height: 1.6;
}

/* L'asterisque sort dans la marge : le texte de la note reste alors alignee
   sur son propre bord gauche, y compris quand elle passe sur deux lignes. */
.bento-page .steps__scope-mark {
  position: absolute;
  left: 0;
  color: var(--pink);
  font-weight: 800;
}

/* Variante centree (page Conseil & Audit). L'asterisque doit alors rentrer dans
   le flux : posee en absolu, elle resterait collee au bord gauche du bloc, a
   distance du texte une fois celui-ci centre. */
.bento-page .steps__scope--center {
  padding-left: 0;
  text-align: center;
}

.bento-page .steps__scope--center .steps__scope-mark {
  position: static;
  margin-right: 2px;
}

.bento-page .steps__scope strong {
  color: var(--ink-soft);
}

.bento-page .steps__scope a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bento-page .steps__scope a:hover {
  color: var(--pink);
}

/* Les puces du rebond deviennent cliquables sur cette page. La regle globale
   met les liens en `color: inherit` sans soulignement : sans ca, rien ne les
   distingue du reste de la puce. */
.bento-page .bridge__list a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bento-page .bridge__list a:hover {
  color: var(--pink);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bento-page .bento--proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Plus assez de largeur pour deux colonnes cote a cote : le bandeau repasse
     en pleine largeur, les trois chiffres s'alignent dessous. Les placements
     explicites du grand ecran doivent etre remis a `auto`, sinon ils forcent
     des colonnes et des rangees qui n'ont plus de sens ici. */
  .bento-page .bento__tile--aiact {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .bento-page .bento--proof .bento__tile--stat,
  .bento-page .bento--proof .bento__tile--stat-wide {
    grid-column: auto;
    grid-row: auto;
  }

  /* Bento de fin : deux colonnes. Le CTA repasse pleine largeur en tete, le
     financement et les deux mentions se rangent dessous. Comme pour le
     bandeau AI Act, les placements explicites du grand ecran doivent etre
     remis a `auto`, sinon ils forcent des colonnes qui n'existent plus. */
  .bento-page .bento--closing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento-page .bento--closing .bento__tile--cta {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .bento-page .bento--closing .bento__tile--funding,
  .bento-page .bento--closing .bento__tile--legal {
    grid-column: auto;
    grid-row: auto;
  }

  /* Les bentos a quatre chiffres : sur trois colonnes le dernier resterait
     seul sur sa rangee. Deux colonnes les gardent en 2x2, comme en dessous
     de 900px. */
  .bento-page .bento--proof-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Trois chiffres pleine largeur : sur ce palier ils passent a deux colonnes,
     le troisieme prenant la rangee suivante. Sans cette regle ils heritent des
     trois colonnes du grand ecran et deviennent trop etroits. */
  .bento-page .bento--proof-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Cinq visuels carres de front deviennent trop etroits : on passe a trois,
     la derniere rangee en portant deux. */
  .bento-page .steps__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Quatre etapes sur trois colonnes laisseraient une carte seule : deux
     rangees de deux. Le selecteur reprend les memes classes que la regle du
     grand ecran, une requete media n'ajoutant pas de specificite. */
  .bento-page .steps__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .bento-page .bento--proof,
  .bento-page .bento--closing,
  .bento-page .modules__grid,
  .bento-page .steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Les six colonnes et les `span` du grand ecran n'ont plus de sens ici. Une
     requete media n'ajoute pas de specificite : il faut reprendre les memes
     selecteurs pour reprendre la main. */
  .bento-page .modules__grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento-page .modules__grid--5 > *,
  .bento-page .modules__grid--5 > *:nth-last-child(-n + 2) {
    grid-column: auto;
  }

  /* La carte seule reprend toute la largeur disponible : en dessous de 900px,
     la borner n'apporte plus rien et laisse deux marges inutiles. */
  .bento-page .modules__grid--single,
  .bento-page .modules__grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sur mobile le carrousel devient une pile : les cartes s'enchainent une
     par une, en pleine largeur. Le defilement horizontal demandait un geste
     lateral au milieu d'une page qui se lit verticalement, et masquait six
     dispositifs sur sept. Le pas de defilement et le `scroll-snap` n'ont plus
     d'objet, les fleches non plus. */
  .bento-page .slider__track {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .bento-page .slider__item {
    flex: 0 0 auto;
  }

  .bento-page .slider__nav {
    display: none;
  }

  /* Empilees, les cartes n'ont plus a se caler sur la plus haute : chacune
     prend la hauteur de son contenu. */
  .bento-page .funding-card {
    min-height: 0;
  }

  .bento-page .bento--targets {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento-page .target-tile--main {
    grid-row: span 1;
  }

  .bento-page .target-tile--main img {
    aspect-ratio: 2 / 1;
  }
}

@media (max-width: 600px) {
  .bento-page .bento--proof,
  .bento-page .bento--closing,
  .bento-page .modules__grid,
  .bento-page .modules__grid--5,
  .bento-page .steps__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* L'ecart unique de la page Particuliers se resserre : 96px separent bien
     deux blocs larges, ils coupent la page en deux sur un ecran de telephone
     ou les sections sont deja empilees en une colonne. */
  .bento-page.individual-page main > section + section {
    margin-top: 64px;
  }

  .bento-page.individual-page main > .guilde {
    padding: 48px 0;
  }

  .bento-page.individual-page main > section:last-child {
    margin-bottom: 80px;
  }

  .bento-page .bento__tile--stat {
    min-height: 0;
  }

  .bento-page .module-card {
    min-height: 0;
  }

  .bento-page .bento__tile--lead h2 {
    font-size: 21px;
  }
}

/* --------------------------------------------------------------------------
   Temoignages defilants (V2 accueil)
   -------------------------------------------------------------------------- */
.bento-page .quotes {
  padding: 40px 0 96px;
  overflow: hidden;
}

/* TEMOIGNAGES — trois cartes en grille, depuis le 7 septembre 2026. Elles
   remplacent un bandeau defilant de seize cartes inventees : avec trois
   temoignages, le defilement escamotait des textes qu'on n'avait pas fini de
   lire. Si la liste depasse six ou sept un jour, la question se reposera. */
.bento-page .quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}

/* La carte etait calibree pour une piste horizontale : largeur fixe et
   interdiction de s'etirer. En grille, c'est la colonne qui commande. Le
   selecteur porte trois classes pour passer devant la regle generique. */
.bento-page .quotes__grid .quote-card {
  width: auto;
  flex: 1 1 auto;
}

/* Une colonne : a moins de 900px, trois colonnes donnent des cartes trop
   etroites pour des temoignages de cette longueur. */
@media (max-width: 900px) {
  .bento-page .quotes__grid {
    grid-template-columns: 1fr;
  }
}

.bento-page .quote-card {
  display: flex;
  width: 360px;
  flex: 0 0 360px;
  flex-direction: column;
  padding: 30px 30px 26px;
  border: 1px solid #e8e3f6;
  border-radius: var(--bento-radius);
  background: #ffffff;
}

.bento-page .quote-card__mark {
  color: var(--pink);
  font-size: 58px;
  font-weight: 800;
  line-height: 0.6;
}

.bento-page .quote-card blockquote {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.bento-page .quote-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 28px;
}

.bento-page .quote-card__author img {
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.bento-page .quote-card__author strong {
  display: block;
  color: var(--black);
  font-size: 14px;
  font-weight: 600;
}

.bento-page .quote-card__author small {
  display: block;
  margin-top: 3px;
  color: var(--text-light);
  font-size: 12.5px;
  line-height: 1.4;
}

/* ==========================================================================
   PAGES VERTICALES « FORMATIONS POUR INDEPENDANTS » (portee : .vertical-page)

   Brief BAK-SITE-BRIEF-2026-V1. Une page par metier, meme gabarit pour
   toutes : ajouter un vertical doit se resumer a ajouter une page et un
   onglet, sans refonte. Tout ce qui suit est donc generique, rien n'est
   ecrit pour l'immobilier ou pour la gestion de patrimoine en particulier.

   Le vocabulaire visuel est celui de l'accueil V2 : bloc lavande borne au
   conteneur, sur-titre rose fin, tuiles a 14px de rayon.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero : meme bloc lavande centre que l'accueil.
   -------------------------------------------------------------------------- */
.vertical-hero {
  padding: 16px 0 0;
}

.vertical-hero__inner {
  padding: 64px 40px 56px;
  text-align: center;
  border-radius: var(--bento-radius);
  background: var(--surface);
}

.vertical-hero__eyebrow {
  margin-bottom: 18px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.vertical-hero h1 {
  max-width: 860px;
  margin: 0 auto;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.vertical-hero h1 span {
  color: var(--purple);
}

.vertical-hero__lead {
  max-width: 680px;
  margin: 24px auto 0;
  color: var(--text-light);
  font-size: 16px;
  line-height: 1.6;
}

.vertical-hero__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

/* Partage avec le hero de la page Particuliers : memes pastilles, meme
   fond lavande. Un seul jeu de declarations pour les deux. */
.vertical-hero__chips,
.page-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
  list-style: none;
}

.vertical-hero__chips li,
.page-hero__chips li {
  padding: 7px 16px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--purple);
  font-size: 12.5px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Toutes les autres pages V2 (Entreprises, Ecoles, Particuliers, Academie,
   Conseil, Outils, Conformite, Blockchain, Financements, Contact) alignent
   leur hero sur celui de l'accueil et des pages metier : bloc lavande borne
   au conteneur, texte centre, sur-titre rose fin.

   Aucune modification de balisage : c'est le .container du hero qui devient
   le panneau. Une nouvelle page secondaire herite donc du style sans rien
   avoir a faire.
   -------------------------------------------------------------------------- */
.bento-page .page-hero {
  padding: 16px 0 0;
}

.bento-page .page-hero > .container {
  padding: 64px 40px 56px;
  border-radius: var(--bento-radius);
  background: var(--surface);
  text-align: center;
}

/* Le sur-titre est un <span> sur ces pages, d'ou le passage en bloc. La
   graisse tombe de 800 a 400 pour retrouver le trait fin de l'accueil. */
.bento-page .page-hero__eyebrow {
  display: block;
  margin-bottom: 18px;
  font-weight: 400;
  letter-spacing: 2.5px;
}

.bento-page .page-hero h1 {
  max-width: 860px;
  margin: 0 auto;
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.bento-page .page-hero__lead {
  max-width: 680px;
  margin: 24px auto 0;
  font-size: 16px;
  line-height: 1.6;
}

.bento-page .page-hero__actions {
  justify-content: center;
}

/* Le fil d'Ariane vit a l'interieur du panneau sur deux pages (Contact,
   Conseil & Audit) : il perd son retrait haut, qui n'avait de sens qu'en
   haut de page, et prend un peu d'air sous lui. */
.bento-page .page-hero .breadcrumb {
  padding-top: 0;
  margin-bottom: 16px;
}

/* Les chapeaux de section suivent leurs titres, deja centres. */
.bento-page .modules__intro {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Onglets. Ce sont des liens vers trois pages distinctes, pas un composant a
   onglets : chaque metier a sa propre URL, son titre et sa description, sans
   quoi « formation IA agent immobilier » et « formation IA CGP » atterrissent
   au meme endroit.
   -------------------------------------------------------------------------- */
.vertical-tabs {
  margin-top: 40px;
}

/* Les six onglets tiennent sur UNE seule ligne, a toutes les largeurs. Deux
   lignes cassaient la lecture « un onglet par metier » : le bandeau cessait
   de se lire comme une barre d'onglets.

   Le compte, au conteneur maximal (1200px moins 2 x 40px de padding, soit
   1120px utiles) : les six libelles mesuraient 1196px avec l'ancien padding
   de 22px, donc 76px de trop. Passer le padding a 14px libere 6 x 16 = 96px
   et ramene le bandeau a ~1100px, avec une marge de 20px.

   En dessous, le bandeau defile horizontalement au lieu de se replier : le
   comportement etait deja celui du mobile, il est simplement generalise. */
.vertical-tabs__inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  border-bottom: 1px solid #e8e3f6;
  overflow-x: auto;
  scrollbar-width: none;
}

.vertical-tabs__inner::-webkit-scrollbar {
  display: none;
}

.vertical-tabs a {
  padding: 14px 14px;
  border-bottom: 2px solid transparent;
  color: var(--text-light);
  font-size: 14.5px;
  font-weight: 600;
  /* Sans cela, « Metiers de bouche et traiteurs » se coupe en deux et
     l'onglet cesse de se lire comme un onglet. */
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.vertical-tabs a:hover {
  color: var(--purple);
}

.vertical-tabs a[aria-current="page"] {
  border-bottom-color: var(--purple);
  color: var(--purple);
}

/* --------------------------------------------------------------------------
   Fiches formation
   -------------------------------------------------------------------------- */
.offers {
  padding: 48px 0 8px;
}

/* --------------------------------------------------------------------------
   Bloc « Et le CPF ? » de la page Financements, centre entre « Les onze OPCO »
   et « On monte le dossier avec vous ». L'espace vu vient presque entierement
   des deux voisins, et il etait tres dissymetrique :
     au-dessus  110px (bas de .cases) + 48px (haut de .offers)          = 158px
     en dessous   8px (bas de .offers) + 40px (haut de .bento-page .modules) = 48px

   Les deux cotes sont ramenes a 80px : en haut en annulant le padding d'ici et
   en ramenant celui de .cases a 80, en bas en portant celui d'ici a 40.
   Equilibrer a 158px aurait aussi marche, mais aurait laisse ce bloc de deux
   lignes flotter au milieu d'un trou — meme arbitrage que sur le bloc « Qui
   paye la formation ? » du hub Entreprises.

   `.cases` ne sert qu'une fois sur cette page, la reduction de son padding bas
   ne deplace donc rien d'autre. Scope a la page, comme le calcul dont il
   depend : a recalculer si l'ordre des sections change.
   -------------------------------------------------------------------------- */
.financing-page .cases {
  padding-bottom: 80px;
}

.financing-page .offers--cpf {
  padding: 0 0 40px;
}

.offers--compliance {
  padding-top: 24px;
}

.offers__intro {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

/* Intitule de famille du selecteur du hub Entreprises & Organisations : « Par
   secteur d'activite », « Par population a former ». Il coiffe chacune des
   deux grilles de trois cartes. Volontairement discret — c'est un intitule de
   tri, pas un titre de section : le seul H2 de la zone reste « Trouvez votre
   entree », sinon la hierarchie du plan de la page se dedouble. */
.selector__family {
  margin: 40px 0 16px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Note de perimetre du certificat. Bornee et centree comme .offers__funding
   juste au-dessus : les deux ferment la section et se lisent comme une paire,
   une note calee a gauche sous un bloc centre se lisait comme un oubli. */
.offers__footnote {
  max-width: 760px;
  margin: 24px auto 0;
  color: var(--text-light);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
}

/* La regle globale `a { color: inherit; text-decoration: none }` sert les liens
   de navigation et les cartes cliquables. Dans un paragraphe de texte courant,
   elle rend le lien invisible : c'est le cas du « Decouvrir nos realisations »
   ajoute au point 7 du brief. Ces deux blocs redonnent donc aux liens en ligne
   l'aspect d'un lien. Le soulignement est decale pour ne pas couper les
   jambages. */
.offers__intro a,
.offers__footnote a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.offers__intro a:hover,
.offers__footnote a:hover {
  color: var(--pink);
}

.offer-grid {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}

.offer-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

/* (Supprime : `.offer-grid--2` centrait la rangee incomplete du vertical CGP,
   qui n'avait que deux fiches. Depuis le brief V2 du 11 aout 2026, CGP passe
   au gabarit Decouverte / Parcours / Modules (.offer-stack) et n'a plus de
   rangee de fiches a centrer. Le seul vertical encore en grille est
   l'immobilier, qui a bien ses trois cartes.) */

/* Chaque carte prend la hauteur de son propre contenu. Etirees a la hauteur
   de la rangee, elles se creusaient toutes des qu'on depliait l'une d'elles :
   le pli d'une carte gonflait les deux autres, qui semblaient s'ouvrir aussi. */
.offer-grid--3 > .offer-card {
  align-self: start;
}

/* Exception : une grille dont les cartes n'ont pas d'accordeon. Rien ne peut
   y gonfler une carte en cours de route, donc la raison d'etre du
   `align-self: start` ci-dessus tombe et les cartes peuvent s'aligner sur la
   plus haute. C'est le cas de la page d'aiguillage « Formations pour
   independants », ou les trois metiers ont des textes de longueurs
   differentes et se terminaient a trois hauteurs differentes.

   Ne pas poser cette classe sur une grille contenant un `.offer-card__more` :
   on retomberait exactement sur le defaut que la regle precedente corrige.

   Les boutons s'alignent alors d'eux-memes : `.offer-card` est deja une
   colonne flex et `.offer-card__actions` porte `margin-top: auto`, qui
   pousse le bouton en bas des que la carte est plus haute que son contenu. */
.offer-grid--equal > .offer-card {
  align-self: stretch;
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid #e8e3f6;
  border-radius: var(--bento-radius);
  background: #ffffff;
}

/* La carte mise en avant : le parcours qui couvre l'obligation annuelle. Un
   liset epais plutot qu'un aplat, pour rester lisible sur trois colonnes. */
.offer-card--reco {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple);
}

.offer-card--wide {
  padding: 34px 32px;
}

/* Le badge chevauche le bord haut de la carte au lieu de vivre dans le flux :
   sinon il decale le titre de la seule carte qui en porte un, et les trois
   fiches d'une meme rangee cessent de s'aligner. */
.offer-card__badge {
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--purple);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.offer-card__head h3 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.28;
}

.offer-card__meta {
  margin-top: 10px;
  color: var(--pink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Carte de choix : elle ne porte que le niveau, la ligne pratique, une
   promesse et le bouton. Tout le reste est dans le pli, ce qui ramene les
   trois fiches a une hauteur ou elles se comparent d'un coup d'oeil. */
.offer-card--choice {
  padding: 26px 26px 24px;
}

.offer-card--choice .offer-card__head h3 {
  font-size: 22px;
}

.offer-card__promise {
  margin-top: 16px;
  color: var(--purple);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* Le nom officiel de la formation reste dans la page, en tete du pli : la
   carte affiche le niveau, mais l'intitule complet doit rester lisible. */
.offer-card__fulltitle {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.offer-card--choice .offer-card__quote {
  margin-top: 0;
  font-size: 14.5px;
}

/* Mention de financement commune aux trois fiches : une ligne sous la grille
   au lieu du meme pave repete dans chaque carte. */
.offers__funding {
  max-width: 760px;
  margin: 22px auto 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
}

.offer-card__quote {
  margin-top: 20px;
  color: var(--purple);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
}

.offer-card__for {
  margin-top: 14px;
  color: var(--text-light);
  font-size: 14px;
  line-height: 1.6;
}

.offer-card__subtitle {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 800;
}

.offer-card__list {
  margin-top: 12px;
  padding-left: 0;
  list-style: none;
}

.offer-card__list li {
  position: relative;
  padding-left: 20px;
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.55;
}

.offer-card__list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}

.offer-card__note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #efecf8;
  color: var(--text-light);
  font-size: 13px;
  line-height: 1.55;
}

/* Les notes qui se suivent (Prerequis / Groupe, Public / Groupe) forment UN
   bloc de precisions pratiques, pas deux sections. Seule la premiere porte le
   filet et l'ecart de separation ; les suivantes se collent dessous. Sans
   cette regle, chacune reservait 22px de marge, 18px de padding et son propre
   trait : deux lignes de six mots finissaient a 40px l'une de l'autre,
   separees par un filet, comme si elles n'avaient rien a voir. */
.offer-card__note + .offer-card__note {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

.offer-card__note strong {
  color: var(--text);
}

/* La mention de financement ne porte jamais de montant : le reste a charge
   depend du code APE, de la contribution versee et du plafond restant. Il se
   communique dans le devis, jamais sur la page. */
.offer-card__funding {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

/* `margin-top: auto` colle le bloc d'action en bas des fiches pleine largeur.
   Sur les cartes de choix, qui ne sont plus etirees, il n'a plus d'effet : le
   bouton suit directement le pli. */
.offer-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
}

.offer-card--choice .offer-card__actions {
  padding-top: 14px;
}

/* Le libelle impose par le brief (« Demander le programme detaille et un
   devis ») est long : sur trois colonnes il deborde du bouton, que .btn met
   en `nowrap`. Les CTA des cartes de choix passent donc pleine largeur et sur
   deux lignes. Les fiches pleine largeur ont la place : leurs boutons restent
   cote a cote, sur une seule ligne. */
.offer-card--choice .offer-card__actions .btn {
  flex: 1 1 100%;
  white-space: normal;
  line-height: 1.35;
  text-align: center;
}

.offer-card__cta-note {
  margin-top: 10px;
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.5;
}

/* (Supprime : `.offer-card__aside` portait la ligne discrete « les trois
   journees sont accessibles separement », en pied de la fiche Parcours. Le
   brief V2 la designe comme une erreur de specification : les modules doivent
   se voir comme des offres, pas se deviner dans une note. Ils sont desormais
   une rangee de blocs, cf. .offer-modules plus bas.) */

/* Repli du programme dans les fiches en trois colonnes. Reprend l'accordeon
   de la FAQ pour garder le meme JS et le meme comportement clavier, mais en
   mesures compactes : les 88px de haut du composant d'origine sont taillees
   pour une FAQ pleine largeur, pas pour une carte. */
.offer-card__more {
  margin-top: 6px;
  border-bottom: 0;
}

.offer-card__more .faq-item__question {
  min-height: 0;
  padding: 10px 0;
  gap: 12px;
  font-size: 13.5px;
}

.offer-card__more .faq-item__icon {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.offer-card__more .offer-card__list {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Fiche LCB-FT : deux colonnes plutot qu'un empilement. Sur toute la largeur,
   un contexte reglementaire suivi de six competences en une seule colonne
   donnait un pave illisible.
   -------------------------------------------------------------------------- */
.compliance-card__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 48px;
  margin-top: 20px;
}

.compliance-card__cols .offer-card__quote,
.compliance-card__cols .offer-card__subtitle {
  margin-top: 0;
}

/* Tout ce qui court sur la pleine largeur de la fiche est centre : l'en-tete
   et, plus bas, les livrables, la mention de financement et les CTA. Seules
   les deux colonnes restent alignees a gauche, le texte courant s'y lisant
   mal centre. */
.compliance-card .offer-card__head,
.compliance-card .offer-card__funding,
.compliance-card .offer-card__cta-note {
  text-align: center;
}

.compliance-card .offer-card__actions {
  justify-content: center;
}

/* Les quatre livrables sont l'argument decisif du produit : ils sortent de la
   note en petits caracteres pour devenir le bloc qui se voit. */
.compliance-card__proof {
  margin-top: 28px;
  padding: 22px 26px 24px;
  border-radius: var(--bento-radius);
  color: #ffffff;
  background: var(--purple);
  text-align: center;
}

.compliance-card__proof-label {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
}

.compliance-card__docs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding-left: 0;
  list-style: none;
}

.compliance-card__docs li {
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 600;
}

/* Date et lieu de la prochaine session, juste au-dessus du bouton. */
.session-box {
  margin-top: 18px;
  padding: 13px 20px;
  border: 1px solid #e8e3f6;
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
}

.session-box strong {
  display: block;
  margin-bottom: 4px;
  color: var(--pink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Gabarit vertical en modules (brief V2 du 11 aout 2026)

   Remplace `.offer-card__days`, l'accordeon « jour par jour » qui enfermait
   les trois journees a l'interieur de la fiche Parcours. Le brief V2 tranche :
   cet affichage se lisait comme un bloc indivisible alors que les modules
   s'achetent separement. Ils sortent donc du pli et deviennent des offres.

   Trois etages de poids visuel decroissant, empiles :
     1. Decouverte  — porte d'entree, fond teinte, sans liset
     2. Parcours    — l'offre mise en avant, liset violet, seul gros bouton
     3. Modules     — rangee de trois blocs, visibles mais secondaires

   La hierarchie est portee par la taille des blocs et par le liset, jamais
   par la couleur : le parcours doit rester l'offre qui se voit en premier,
   sans que les modules aient l'air d'un pis-aller.

   Ce gabarit vaut pour Formateurs et CGP. L'immobilier en est exclu : son
   produit phare fait 14h parce que la loi ALUR fait 14h, il garde ses trois
   cartes progressives en .offer-grid--3.
   -------------------------------------------------------------------------- */
.offer-stack {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}

/* Bloc Decouverte. Volontairement plus leger que le parcours : pas de liset,
   un fond teinte, moins de padding. C'est une porte d'entree, pas un
   concurrent du parcours. */
.offer-card--entry {
  padding: 24px 28px 26px;
  border-color: transparent;
  background: var(--surface);
}

.offer-card--entry .offer-card__head {
  text-align: center;
}

.offer-card--entry .offer-card__head h3 {
  font-size: 19px;
}

.offer-card--entry .offer-card__actions {
  justify-content: center;
}

/* `.offer-card__more` est taille pour une carte en colonne : son libelle et
   son « + » sont pousses aux deux bords. Etire sur la pleine largeur du bloc
   Decouverte, le « + » finissait a l'autre bout de la ligne. Ici les deux se
   regroupent au centre ; le contenu deplie, lui, garde toute la largeur. */
.offer-card--entry .offer-card__more .faq-item__question {
  justify-content: center;
  gap: 10px;
}

/* Le contenu deplie suit le reste du bloc, qui est centre : meme largeur
   bornee que `.offer-card__lead` au-dessus, pour que le texte replie et le
   texte deplie tombent sur la meme colonne. */
.offer-card--entry .offer-card__more .faq-item__answer {
  max-width: 720px;
  /* `padding-right: 58px` vient du composant FAQ, ou il degage l'icone « + »
     posee a droite du titre. Ici le repli est centre : cette reserve d'un seul
     cote decalait tout le contenu de 29px vers la gauche, hors de l'axe du
     titre et du bouton. */
  padding-right: 0;
  margin: 0 auto;
  text-align: center;
}

/* Exception : la liste se centre en tant que bloc, mais ses items restent
   alignes a gauche. Les puces sont posees en absolu a gauche de chaque `li` ;
   centrer le texte les laisserait decrochees en bout de ligne. */
.offer-card--entry .offer-card__more .offer-card__list {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Le parcours a perdu la colonne « programme » qui equilibrait sa fiche : son
   accroche courrait sinon sur toute la largeur du bloc. Elle est bornee et
   centree, comme l'en-tete au-dessus. */
.offer-card__lead {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.offer-card__lead .offer-card__quote {
  margin-top: 18px;
}

/* Libelle de la rangee de modules. Il dit en une ligne ce que le brief veut
   rendre evident : le parcours se prend entier ou par morceaux. */
.offer-modules__label {
  margin-top: 6px;
  color: var(--text-light);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.offer-modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* Bloc module : meme famille que .offer-card, en plus petit et sans bouton
   plein. Le lien de commande vit dans le pli : rangee fermee, rien ne doit
   concurrencer le CTA du parcours. */
.offer-module {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  border: 1px solid #e8e3f6;
  border-radius: var(--bento-radius);
  background: #ffffff;
}

.offer-module__title {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.35;
}

.offer-module__meta {
  margin-top: 8px;
  color: var(--pink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Le repli reutilise `.offer-card__more` : meme accordeon, meme JS, memes
   mesures compactes.

   Le bouton de commande est POSE HORS DU PLI, comme sur les fiches de
   l'immobilier : le brief V1 (section 7, toujours en vigueur) demande que
   chaque offre se termine par une conversion, et le brief V2 qualifie les
   modules d'offres a part entiere. Un module replie doit donc mener au devis
   sans qu'on ait a l'ouvrir.

   Il reste en contour : la hierarchie de la section tient au remplissage, le
   bouton plein est reserve au parcours. */
.offer-module .offer-card__actions {
  padding-top: 16px;
}

/* Meme raison que sur les cartes de choix : dans une colonne de cette largeur,
   `.btn` en `nowrap` deborderait. Le bouton passe pleine largeur. */
.offer-module .offer-card__actions .btn {
  flex: 1 1 100%;
  white-space: normal;
  line-height: 1.35;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Mentions reglementaires
   -------------------------------------------------------------------------- */
.legal-info {
  padding: 48px 0 8px;
}

.legal-info__intro {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--text-light);
  font-size: 14.5px;
  line-height: 1.6;
  text-align: center;
}

/* Flex et non grid, volontairement. En grid, `justify-content: center` centre
   les colonnes mais pas les cartes d'une rangee incomplete : les deux
   dernieres restent posees dans les colonnes 1 et 2. En flex, la derniere
   rangee se centre d'elle-meme et le bloc forme bien une pyramide inversee,
   quel que soit le nombre de cartes. */
.legal-info__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.legal-info__grid > article {
  flex: 0 1 330px;
  min-width: 260px;
}

.legal-info__grid article {
  padding: 24px 24px 26px;
  border-radius: var(--bento-radius);
  background: var(--surface);
}

.legal-info__grid h3 {
  font-size: 14px;
  font-weight: 800;
}

.legal-info__grid p {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

.legal-info__grid a {
  color: var(--purple);
  text-decoration: underline;
}

.legal-info__identity {
  margin-top: 24px;
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Porte ouverte aux autres professions liberales. On capte la demande sans
   annoncer de produit : rien ne doit etre publie sur les verticaux dont le
   programme n'est pas ecrit, pas meme un « bientot disponible ».
   -------------------------------------------------------------------------- */
.other-liberal {
  padding: 48px 0 0;
}

/* Le composant a ete dessine pour fermer une page : padding bas a zero, la
   section suivante ou le pied de page apportant l'espace. Pose au milieu du
   flux, il se retrouve donc colle a ce qui le suit.

   Cas d'emploi : « Votre secteur n'est pas liste ? » sur le hub Entreprises &
   Organisations, insere entre le selecteur et « Apprendre et construire ».
   Le compte, en partant des paddings des deux voisins :
     au-dessus  8px (bas de .offers)  + 48px (haut d'ici) = 56px
     en dessous 36px (bas d'ici)      + 20px (haut de .bridge) = 56px
   D'ou les 36px ci-dessous, et non 48 : ce sont les marges vues a l'oeil qui
   doivent s'egaliser, pas les valeurs declarees. A recalculer si l'ordre des
   sections change ou si le padding d'un voisin bouge. */
.other-liberal--between {
  padding-bottom: 36px;
}

/* --------------------------------------------------------------------------
   Bloc B « La Guilde », page Particuliers. Le brief (section 7) demande deux
   offres A PARITE mais VISUELLEMENT SEPAREES : la bande lavande detache le
   bloc du blanc des formations sans le rendre secondaire — meme largeur, meme
   grille, meme taille de titre. Ne pas l'assombrir ni le retrecir : ce serait
   retablir la hierarchie que le brief refuse.
   -------------------------------------------------------------------------- */
/* Le padding interne de la bande n'est pas ici mais dans le bloc « ecart
   unique » plus bas, avec celui des autres sections : une seule regle decide
   des espacements verticaux de la page. Ici, l'aplat seulement. */
.individual-page .guilde {
  background: var(--surface);
}

.individual-page .guilde .bridge__eyebrow {
  display: block;
  text-align: center;
}

.individual-page .guilde .section-title {
  margin-top: 8px;
}

/* Mention de perimetre exigee par le brief : la Guilde n'est pas une action de
   formation, elle est hors champ Qualiopi et ne sera jamais financable, meme
   apres validation de RS7344. Bornee et centree, comme les autres notes de
   perimetre du site — visible, jamais en petits caracteres. */
/* --------------------------------------------------------------------------
   LA GUILDE — page dediee (brief « page La Guilde », septembre 2026)

   La page reprend les composants du site : `page-hero`, `offers`, `modules`,
   `cases`, `faq`, `other-liberal`. Seuls les trois blocs ci-dessous lui sont
   propres.
   -------------------------------------------------------------------------- */

/* Le prix, sur sa propre ligne sous le chapo du hero. Il etait en fin de
   paragraphe, ou il se lisait comme une precision ; seul et un cran plus gros,
   c'est l'argument que le brief demande de montrer des le hero. Les memes
   bornes que `.bento-page .page-hero__lead` pour rester dans son axe. */
.guilde-page .guilde__price {
  max-width: 680px;
  margin: 14px auto 0;
  color: var(--purple);
  font-size: 17px;
  font-weight: 800;
}

/* Logo du partenaire, centre sous le texte de la section Sensei. Hauteur
   plutot que largeur : c'est elle qui donne une presence comparable d'un logo
   a l'autre si un second partenaire s'ajoute un jour. `width: auto` neutralise
   l'attribut width du HTML, qui n'est la que pour reserver la place au
   chargement. */
.guilde-page .guilde__partner {
  margin-top: 28px;
  text-align: center;
}

.guilde-page .guilde__partner img {
  width: auto;
  height: 46px;
}

.guilde-page .guilde__partner-link {
  margin-top: 14px;
  text-align: center;
}

.guilde-page .guilde__partner-link a {
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
}

.guilde-page .guilde__partner-link a::after {
  content: " \2197";
}

/* Liste « Ce qui est inclus ». Quatre lignes seches, sans puce decorative :
   le brief veut qu'on puisse verifier chaque ligne, pas qu'on l'orne. */
.guilde-page .guilde__list {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 0;
  list-style: none;
}

.guilde-page .guilde__list li {
  padding: 18px 0;
  border-bottom: 1px solid #e8e3f6;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.guilde-page .guilde__list li:first-child {
  border-top: 1px solid #e8e3f6;
}

.guilde-page .guilde__list strong {
  color: var(--black);
}

/* Emplacements des visuels encore absents : capture Sensei, video de tour,
   capture annotee des mecaniques. Le cadre en pointilles dit clairement qu'il
   manque quelque chose, au lieu de laisser un trou qu'on croirait voulu.
   A REMPLACER par la vraie <img> ou <video> des reception des fichiers. */
.guilde-page .guilde__preview {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 28px 24px;
  border: 2px dashed #cdc3ea;
  border-radius: var(--border-radius);
  background: var(--surface);
  text-align: center;
}

.guilde-page .guilde__preview-todo {
  margin: 0;
  color: var(--text-light);
  font-size: 13.5px;
  line-height: 1.55;
}

.guilde-page .guilde__preview--video {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #111111;
}

.guilde-page .guilde__preview--video video {
  display: block;
  width: 100%;
  height: auto;
  background: #111111;
}

.guilde-page .guilde__preview--video figcaption {
  padding: 13px 18px;
  background: var(--surface);
  color: var(--text-light);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

/* Le CTA de la section tarifs est centre, comme celui du hero. */
.guilde-page .guilde__actions {
  justify-content: center;
  margin-top: 32px;
}

.individual-page .guilde__scope,
.guilde-page .guilde__scope {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 18px 22px;
  border: 1px solid #e8e3f6;
  border-radius: var(--bento-radius);
  background: #ffffff;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}

/* --------------------------------------------------------------------------
   ECART UNIQUE ENTRE LES SECTIONS — page Particuliers.

   Sur le reste du site, chaque section porte son propre padding haut et bas :
   l'espace vu entre deux sections est donc toujours une somme, et il change a
   chaque couple. Sur cette page les ecarts allaient de 48px a 176px.

   On neutralise ici les paddings verticaux des sections et on porte l'ecart
   sur une seule marge. Une valeur a changer, plus aucun calcul de voisinage.

   Le selecteur double la classe de page (`.bento-page.individual-page`) pour
   passer devant `.bento-page .modules` et `.bento-page .bento-section`, qui
   ont deux classes : sans ca, ces deux sections gardent leur padding et
   restent les seules desalignees.
   -------------------------------------------------------------------------- */
.bento-page.individual-page main > section {
  padding-top: 0;
  padding-bottom: 0;
}

.bento-page.individual-page main > section + section {
  margin-top: 96px;
}

/* Le hero garde sa respiration sous le header : sans elle le titre se colle a
   la navigation. Son ecart avec la section suivante reste celui des autres. */
.bento-page.individual-page main > .page-hero {
  padding-top: 54px;
}

/* Seule section a fond de la page : elle garde un padding interne, sinon le
   texte touche le bord de l'aplat. Ce padding est a l'interieur de la bande,
   il n'entre donc pas dans l'ecart entre sections. */
.bento-page.individual-page main > .guilde {
  padding: 64px 0;
}

/* La derniere section ne doit pas toucher le pied de page. */
.bento-page.individual-page main > section:last-child {
  margin-bottom: 120px;
}

/* Meme probleme, autres voisins, donc autres valeurs : le second bloc du hub
   Entreprises & Organisations, « Qui paye la formation ? », est pris entre
   « Comment ca se passe » et le formulaire catalogue.
     au-dessus  90px (bas de .bento-page .modules) + 48px (haut d'ici) = 138px
     en dessous   0px (bas d'ici) + 30px (haut de .leadmagnet)         =  30px
   L'egalisation ne se fait pas a 138px, qui isolerait le bloc au milieu d'un
   trou, mais a 100px : c'est le rythme des autres sections de la page, et
   celui de la bande « Conformite et AI Act » juste au-dessus. D'ou 10px en
   haut (90 + 10) et 70px en bas (70 + 30). Scope a la page, comme le calcul
   dont il depend. */
.enterprise-page .other-liberal--funding {
  padding: 10px 0 70px;
}

/* Quand le bloc ferme la page, il touche le pied de page : on lui rend une
   respiration. Sur les pages qui enchainent sur le formulaire de devis, ce
   dernier apporte deja son propre espacement. */
main > .other-liberal:last-child {
  padding-bottom: 96px;
}

.other-liberal__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 34px 36px;
  border-radius: var(--bento-radius);
  color: #ffffff;
  background: var(--purple);
}

.other-liberal__inner > div {
  max-width: 640px;
}

.other-liberal h2 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.other-liberal p {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14.5px;
  line-height: 1.6;
}

.other-liberal .btn--primary {
  color: var(--purple);
  background: #ffffff;
}

.other-liberal .btn--primary:hover {
  background: #efebfa;
}

/* --------------------------------------------------------------------------
   Formulaire de devis
   -------------------------------------------------------------------------- */
.devis {
  padding: 56px 0 90px;
}

.devis__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 48px;
}

.devis__intro h2 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}

.devis__intro p {
  margin-top: 16px;
  color: var(--text-light);
  font-size: 14.5px;
  line-height: 1.65;
}

.devis__points {
  margin-top: 22px;
  padding-left: 0;
  list-style: none;
}

.devis__points li {
  position: relative;
  padding-left: 24px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.devis__points li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--pink);
  font-weight: 800;
}

.devis__form {
  padding: 32px 30px 34px;
  border: 1px solid #e8e3f6;
  border-radius: var(--bento-radius);
  background: #ffffff;
}

/* Le champ « montant de la contribution » se coche, il ne se saisit pas :
   une saisie libre produit des montants faux, et le montant conditionne la
   formule proposee. */
.form__fieldset {
  padding: 0;
  border: 0;
}

.form__fieldset legend {
  padding: 0;
  font-size: 13px;
  font-weight: 700;
}

.form__choices {
  display: grid;
  gap: 8px;
}

.form__choices--inline {
  grid-auto-flow: column;
  justify-content: start;
  gap: 22px;
}

/* Choix en pastilles sur une ligne. Empiles, les huit boutons radio du
   formulaire de devis occupaient a eux seuls la moitie de sa hauteur. */
.form__choices--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form__choices--chips label {
  padding: 9px 14px;
  border: 1px solid #d9d3ec;
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
  font-size: 13.5px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.form__choices--chips label:hover {
  border-color: var(--purple);
}

/* Pastille cochee : le repli reste le bouton radio, visible dans tous les
   navigateurs qui ne connaissent pas :has(). */
.form__choices--chips label:has(input:checked) {
  border-color: var(--purple);
  background: var(--surface);
}

.form__choices label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 400;
}

.form__choices input {
  width: 16px;
  height: 16px;
  accent-color: var(--purple);
}

.form__help {
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.5;
}

.form__sublabel {
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .offer-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* La rangee de modules suit la meme cadence que les fiches : 3 / 2 / 1. Le
     troisieme module passe seul sur sa ligne, ce qui reste lisible tant que
     l'ordre Module 1, 2, 3 est respecte. */
  .offer-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .devis__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

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

  .vertical-hero__inner,
  .bento-page .page-hero > .container {
    padding: 44px 24px 40px;
  }

  .bento-page .page-hero h1 {
    font-size: 32px;
  }

  .vertical-hero h1 {
    font-size: 32px;
  }

  /* Le defilement horizontal des onglets et le white-space: nowrap sont
     desormais dans les regles de base : ils s'appliquent a toutes les
     largeurs, ce bloc n'a plus rien a en dire. */

  .other-liberal__inner {
    padding: 28px 24px;
  }
}

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

  .offer-modules {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Meme raison que .offer-card--wide : les 28px de padding lateral mangent
     un tiers d'un ecran de telephone. */
  .offer-card--entry {
    padding: 22px 20px 24px;
  }

  .vertical-hero__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .form__choices--inline {
    grid-auto-flow: row;
    gap: 8px;
  }

  /* Fiches pleine largeur (LCB-FT, parcours Formateur) : les 32px de padding
     lateral mangent un tiers d'un ecran de telephone. */
  .offer-card--wide {
    padding: 24px 20px 26px;
  }

  /* .btn est en `nowrap` : « Demander le programme detaille et un devis » ne
     tient pas dans une carte de 320px et faisait deborder la page entiere.
     Les CTA de ces fiches passent donc pleine largeur, comme ceux des cartes
     de choix. */
  .offer-card--wide .offer-card__actions .btn {
    flex: 1 1 100%;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
  }

  .compliance-card__proof {
    padding: 20px 18px 22px;
  }

  .compliance-card__proof-label {
    font-size: 13.5px;
  }

  .compliance-card__docs li {
    font-size: 12.5px;
  }

  .session-box {
    padding: 12px 15px;
    font-size: 13px;
  }

  /* Les pastilles du formulaire de devis restent cliquables au doigt sans
     deborder : elles s'empilent des que deux ne tiennent plus sur la ligne. */
  .form__choices--chips label {
    padding: 10px 13px;
  }
}


/* ==========================================================================
   L'ECHELLE DES MARCHES — page Particuliers
   --------------------------------------------------------------------------
   Brief du 3 septembre 2026, section 2.2 : « Le lien entre les cartes doit
   etre visible : c'est une progression, pas un catalogue. »

   C'est toute la raison d'etre de ce composant plutot que d'une grille de
   cartes ordinaire. Trois choses portent la progression :
     - un numero en pastille, pose a cheval sur le bord haut de la carte ;
     - un rail horizontal qui relie une pastille a la suivante, tire dans
       l'espace entre deux cartes ;
     - des cartes de meme hauteur, pour que les pastilles soient alignees.

   Le rail est dessine par la carte elle-meme (`::after`), et non par la
   grille : il se pose ainsi dans chaque intervalle sans avoir a calculer la
   largeur des colonnes, et disparait tout seul avec la derniere carte.
   ========================================================================== */
.bento-page .ladder__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 62px;
}

.bento-page .ladder-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 24px 26px;
  border-radius: var(--bento-radius);
  background: var(--surface);
}

/* Le rail. Sa hauteur suit le centre de la pastille : si l'une bouge, ajuster
   l'autre, sinon le trait ne relie plus rien. */
.bento-page .ladder-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 100%;
  width: 20px;
  height: 2px;
  background: var(--purple);
  opacity: .3;
}

/* La pastille deborde en haut de la carte : c'est ce debord qui la place sur
   le rail plutot qu'a l'interieur du bloc. D'ou le `margin-top` de la grille,
   qui lui reserve la place. */
.bento-page .ladder-card__num {
  position: absolute;
  top: -20px;
  left: 24px;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--purple);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
}

.bento-page .ladder-card h3 {
  margin-top: 8px;
  color: var(--purple);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

/* Duree et format. Le brief les veut sur chaque marche : c'est ce qui permet
   de comparer les quatre d'un coup d'oeil. */
.bento-page p.ladder-card__meta {
  margin-top: 8px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 700;
}

/* ATTENTION : cette regle porte deux classes ET un element. Elle est donc
   plus specifique que `.bento-page .ladder-card__price` et consorts, qui n'en
   portent que deux — c'est pourquoi les trois paragraphes nommes ci-dessous
   sont qualifies par `p.`. Sans ca, leurs marges sont silencieusement
   remplacees par les 12px d'ici, et le `margin-top: auto` du prix ne pousse
   plus rien. */
.bento-page .ladder-card p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* Le bloc tarif reste colle au bas de la carte : les quatre prix restent
   alignes quelle que soit la longueur des descriptions. */
.bento-page .ladder-card__pricing {
  margin-top: auto;
  padding-top: 18px;
}

.bento-page .ladder-card__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bento-page .ladder-card__price {
  padding: 12px;
  border: 1px solid var(--surface-deep);
  border-radius: 8px;
  background: #ffffff;
  color: var(--purple);
}

.bento-page .ladder-card__price--employer {
  border-color: var(--black);
  background: var(--black);
  color: #ffffff;
}

.bento-page .ladder-card__price-label {
  display: block;
  min-height: 2.5em;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.bento-page .ladder-card__price strong {
  display: block;
  margin-top: 6px;
  font-size: 19px;
  line-height: 1.15;
}

.bento-page p.ladder-card__discount {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--purple);
  font-weight: 700;
}

.bento-page .ladder__session {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}

.bento-page .ladder-card__actions {
  margin-top: 16px;
}

.bento-page .ladder-card__actions .btn {
  width: 100%;
  justify-content: center;
}

/* Deux colonnes : le rail n'a plus de sens des que les cartes passent a la
   ligne, il relierait la 2 a la 3 en sautant une rangee. */
@media (max-width: 1024px) {
  .bento-page .ladder__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 20px;
  }

  .bento-page .ladder-card:not(:last-child)::after {
    display: none;
  }
}

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