/* rankersquare.com — mise en page, sur les tokens Carbon */

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

html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  background: #000000;
}

body {
  margin: 0;
  overscroll-behavior-y: none;
  background: #f5f5f7;
  font-family: var(--f-texte);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cds-text-primary);
  background: var(--cds-background);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 600;
  letter-spacing: -0.025em;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--cds-link-primary); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cds-blue-60);
  color: #fff;
  padding: var(--sp-05);
  font-size: 0.875rem;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ---------- Bandeau d'offre ---------- */
/* non collant : il défile hors de l'écran et laisse l'en-tête se coller en haut */

.promo {
  display: block;
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 var(--grid-margin);
}
.promo__txt {
  margin: 0;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--f-texte);
  font-size: 0.8125rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
}
.promo__txt strong {
  font-weight: 600;
  color: #ffffff;
}
.promo__txt s {
  color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 1px;
}
.promo__lien {
  color: #ff7a29;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 122, 41, 0.5);
  padding-bottom: 1px;
}
.promo__lien:hover { color: #ff7a29; }

@media (min-width: 52rem) {
  .promo { padding: 0 var(--grid-gutter); }
  .promo__txt { font-size: 0.875rem; gap: 0.625rem; }
}

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hdr__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  height: 3rem;
  display: flex;
  align-items: stretch;
}

@media (min-width: 42rem) {
  .hdr__inner { padding: 0 var(--grid-gutter); }
}

.hdr__logo {
  display: flex;
  align-items: center;
  padding-right: var(--sp-05);
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.hdr__logo-mark {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}
.hdr__logo:hover { opacity: 0.7; }
.hdr__logo { transition: opacity var(--dur-fast-02) var(--ease-productive); }
.hdr__logo:focus-visible { outline-offset: 2px; }

.hdr__nav { display: none; margin-left: var(--sp-06); gap: var(--sp-03); }

.hdr__nav a {
  display: flex;
  align-items: center;
  align-self: center;
  padding: 0 var(--sp-04);
  height: 2rem;
  border-radius: 999px;
  margin: 0;
  color: var(--cds-gray-10);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  transition: background var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}
.hdr__nav a:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.hdr__nav a[aria-current] { background: rgba(255, 255, 255, 0.16); color: #ffffff; }

.hdr__actions {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--sp-04);
  padding-left: var(--sp-05);
}

.hdr__compte {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--cds-gray-10);
  text-decoration: none;
  border-radius: 999px;
  transition: color var(--dur-fast-02) var(--ease-productive),
              background var(--dur-fast-02) var(--ease-productive);
}
.hdr__compte:hover { color: #fff; background: rgba(255,255,255,0.1); }

.hdr__cta {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 var(--sp-05);
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--cds-gray-10);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  white-space: nowrap;
  transition: background var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}
.hdr__cta:hover { background: rgba(255, 255, 255, 0.2); color: #ffffff; }

.hdr__burger {
  margin-left: auto;
  margin-right: calc(var(--sp-05) * -1);
  width: 3rem;
  background: none;
  border: none;
  color: #f4f4f4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--sp-05) 0 0;
  transition: opacity var(--dur-fast-02) var(--ease-productive);
}
.hdr__burger:hover { opacity: 0.7; }
.hdr__burger:focus-visible { outline-offset: -4px; }
.hdr__burger svg { pointer-events: none; }
.hdr__burger .icon-close { display: none; }
.hdr__burger[aria-expanded="true"] .icon-menu { display: none; }
.hdr__burger[aria-expanded="true"] .icon-close { display: block; }

/* Le panneau glisse à l'intérieur d'un cadre qui commence sous l'en-tête :
   ce qui dépasse vers le haut est découpé, donc il sort de derrière la barre.
   --sous-hdr est mesuré en JS : il vaut 3rem seul, davantage quand le bandeau
   d'offre est encore à l'écran, et redescend à 3rem une fois celui-ci défilé. */
.hdr__panel {
  position: fixed;
  top: var(--sous-hdr, 3rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 320ms;
}

.hdr__panel.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s;
}

.hdr__panel-cadre {
  height: 100%;
  background: #000000;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 320ms var(--ease-productive);
}

.hdr__panel.is-open .hdr__panel-cadre {
  transform: translateY(0);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hdr__panel-liste {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.hdr__panel a,
.hdr__vers-services {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: var(--sp-05);
  color: var(--cds-gray-10);
  text-decoration: none;
  font-size: 1rem;
  transition: background var(--dur-fast-02) var(--ease-productive),
              opacity 260ms var(--ease-productive),
              transform 260ms var(--ease-productive);
}

/* l'entrée en fondu n'opère que si le script s'est exécuté */
.js-anime .hdr__panel a,
.js-anime .hdr__vers-services {
  opacity: 0;
  transform: translateY(-8px);
}

.hdr__panel.is-open a,
.hdr__panel.is-open .hdr__vers-services,
.js-anime .hdr__panel.is-open a,
.js-anime .hdr__panel.is-open .hdr__vers-services {
  opacity: 1;
  transform: translateY(0);
}

/* à la fermeture, aucun délai : tout se referme d'un bloc */
.hdr__panel:not(.is-open) a,
.hdr__panel:not(.is-open) .hdr__vers-services { transition-delay: 0s; transition-duration: 120ms; }

/* chaque lien entre juste après le précédent */
.hdr__panel.is-open .hdr__panel-liste a:nth-child(1)  { transition-delay: 60ms; }
.hdr__panel.is-open .hdr__panel-liste a:nth-child(2)  { transition-delay: 100ms; }
.hdr__panel.is-open .hdr__panel-liste a:nth-child(3)  { transition-delay: 140ms; }
.hdr__panel.is-open .hdr__panel-liste a:nth-child(4)  { transition-delay: 180ms; }
.hdr__panel.is-open .hdr__panel-liste a:nth-child(5)  { transition-delay: 220ms; }
.hdr__panel.is-open .hdr__panel-liste a:nth-child(6)  { transition-delay: 260ms; }
.hdr__panel.is-open .hdr__panel-liste a:nth-child(7)  { transition-delay: 300ms; }
.hdr__panel.is-open .hdr__panel-liste a:nth-child(8)  { transition-delay: 340ms; }
.hdr__panel.is-open .hdr__panel-liste a:nth-child(9)  { transition-delay: 380ms; }
.hdr__panel.is-open .hdr__panel-liste a:nth-child(10) { transition-delay: 420ms; }
.hdr__panel.is-open .hdr__panel-cta { transition-delay: 460ms; }
.hdr__panel a:hover,
/* pas de surlignage : les liens restent nus au toucher */
.hdr__panel a:active,
.hdr__panel a:hover,
.hdr__vers-services:active,
.hdr__vers-services:hover { background: none; }

.hdr__panel-pied {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: var(--sp-05);
  background: #000000;
  /* le devis à gauche, la connexion à droite */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-04);
}

.hdr__panel-login {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 var(--sp-05);
  border-radius: 999px;
  background: #ffffff;
  color: #000000 !important;
  text-decoration: none;
  font-family: var(--f-texte);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16px;
  white-space: nowrap;
  border-bottom: none !important;
  transition: background var(--dur-fast-02) var(--ease-productive);
}
.hdr__panel-login:hover { background: rgba(255, 255, 255, 0.88); color: #000000 !important; }

/* même gabarit que le bouton du héros : 32px, rayon plein, retrait 12px.
   Le panneau étant sombre, la pastille s'éclaircit au lieu de s'assombrir. */
.hdr__panel .hdr__panel-cta,
.hdr__panel-cta {
  display: inline-flex !important;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  /* mêmes valeurs que le bouton du héros (.cds-btn) */
  min-height: 2rem !important;
  height: 2rem !important;
  padding: 0 var(--sp-04) !important;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  border-radius: 999px;
  border-bottom: none !important;
  font-size: 0.875rem !important;
  font-weight: 400;
  letter-spacing: 0.16px;
}
.hdr__panel-cta:hover,
.hdr__panel-cta:active {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

body.menu-ouvert { overflow: hidden; }

@media (min-width: 66rem) {
  .hdr__nav, .hdr__actions { display: flex; }
  .hdr__burger { display: none; }
  .hdr__panel { display: none !important; }
}

/* ---------- Sections ---------- */

.section { padding: var(--sp-10) 0; }
.section--lg { padding: var(--sp-11) 0; }

@media (min-width: 66rem) {
  .section { padding: var(--sp-11) 0; }
  .section--lg { padding: var(--sp-13) 0; }
}

.section__eyebrow { margin-bottom: var(--sp-04); }
/* seconde partie du titre, en gris */
.section__title span,
.repertoire__titre span,
.carrousel__titre span { color: var(--cds-gray-50); }
.section__title { margin-bottom: 0; }
/* espace sous le titre seulement s'il est suivi d'un texte d'intro */
.section__title + .section__intro,
.carrousel__titre + .section__intro { margin-top: var(--sp-05); }
.section__intro { color: var(--cds-text-secondary); max-width: 40rem; }
.section__head { margin-bottom: var(--sp-08); }

/* ---------- Héros ---------- */

.hero {
  background: #000000;
  color: #f4f4f4;
  position: relative;
  overflow: hidden;
  padding: var(--sp-10) 0 var(--sp-11);
}

@media (min-width: 66rem) {
  .hero { padding: var(--sp-12) 0 var(--sp-13); }
}

.hero__inner { position: relative; z-index: 1; }

.hero__eyebrow { margin-bottom: var(--sp-06); color: var(--cds-blue-40); }
.hero__title { margin-bottom: var(--sp-06); color: #f4f4f4; max-width: 18ch; text-wrap: balance; }
.hero__lede { margin-bottom: var(--sp-08); color: var(--cds-gray-30); max-width: 44ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-05); }

/* ---------- Tuiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: none;
  border: none;
}

@media (min-width: 42rem) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .tiles--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 66rem) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }

.tile {
  background: #ffffff;
  border-radius: 1.125rem;
  padding: var(--sp-07);
  display: flex;
  flex-direction: column;
  gap: var(--sp-04);
  min-height: 13rem;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast-02) var(--ease-productive);
}

a.tile:hover { background: #ffffff; }

.tile__num {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  color: var(--cds-text-helper);
}

.tile__title { color: var(--cds-text-primary); }
.tile__text { color: var(--cds-text-secondary); font-size: 0.875rem; line-height: 1.43; }

.tile__arrow {
  margin-top: auto;
  padding-top: var(--sp-05);
  color: var(--cds-interactive);
  display: flex;
  justify-content: flex-end;
  transition: transform var(--dur-fast-02) var(--ease-productive);
}
a.tile:hover .tile__arrow { transform: translateX(4px); }

/* ---------- Liste de livrables ---------- */

.checklist { display: grid; gap: 8px; background: none; }

@media (min-width: 42rem) { .checklist { grid-template-columns: repeat(2, 1fr); } }

.checklist li {
  background: #ffffff;
  border-radius: 1.125rem;
  padding: var(--sp-06);
  display: flex;
  gap: var(--sp-05);
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.43;
}
.checklist svg { flex: 0 0 auto; color: var(--cds-blue-60); margin-top: 1px; }

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

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: none;
  border: none;
}

@media (min-width: 42rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  background: #ffffff;
  border-radius: 1.125rem;
  padding: var(--sp-07);
}
.step__num {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cds-interactive);
  display: block;
  margin-bottom: var(--sp-04);
}
.step__title { margin-bottom: var(--sp-03); font-size: 1.25rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; }
.step__text { color: var(--cds-text-secondary); font-size: 0.875rem; line-height: 1.43; }

/* ---------- Problèmes ---------- */

.problems { display: grid; gap: var(--sp-07); }
@media (min-width: 66rem) { .problems { grid-template-columns: repeat(3, 1fr); } }

.problem { border-left: 2px solid var(--cds-red-60); padding-left: var(--sp-06); }
.problem__title { margin-bottom: var(--sp-04); font-size: 1.25rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; }
.problem__text { color: var(--cds-text-secondary); font-size: 0.875rem; line-height: 1.43; }

/* ---------- FAQ (accordéon Carbon) ---------- */

.faq { border-top: 1px solid var(--cds-border-subtle); }

.faq__item { border-bottom: 1px solid var(--cds-border-subtle); }

.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-06);
  padding: var(--sp-05) 0;
  background: none;
  border: none;
  font-family: var(--f-titre);
  font-size: 1rem;
  line-height: 1.375;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--cds-text-primary);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast-02) var(--ease-productive);
}
.faq__btn:hover { color: var(--cds-link-primary); }
.faq__btn svg {
  flex: 0 0 auto;
  transition: transform var(--dur-fast-02) var(--ease-productive);
}
.faq__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.faq__panel {
  display: none;
  padding: 0 var(--sp-09) var(--sp-06) 0;
  color: var(--cds-text-secondary);
  font-size: 0.875rem;
  line-height: 1.43;
  max-width: 44rem;
}
.faq__panel.is-open { display: block; }

/* ---------- Bande d'appel ---------- */

.cta { background: var(--cds-gray-100); padding: var(--sp-11) 0; }
.cta__title { color: #f4f4f4; margin-bottom: var(--sp-05); }
.cta__text { color: var(--cds-gray-30); margin-bottom: var(--sp-08); }

/* ---------- Liens croisés ---------- */

.related { display: grid; gap: 8px; background: none; border: none; }
@media (min-width: 42rem) { .related { grid-template-columns: repeat(3, 1fr); } }

.related a {
  background: #ffffff;
  border-radius: 1.125rem;
  padding: var(--sp-06);
  text-decoration: none;
  color: var(--cds-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--sp-03);
  transition: background var(--dur-fast-02) var(--ease-productive);
}
.related a:hover { background: #ffffff; }
.related span { font-size: 0.875rem; color: var(--cds-text-secondary); }

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

.form { display: grid; gap: var(--sp-07); }
@media (min-width: 42rem) { .form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-07); } }

.form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.notice {
  border-left: 3px solid var(--cds-red-60);
  background: var(--cds-layer);
  padding: var(--sp-05) var(--sp-06);
  font-size: 0.875rem;
  line-height: 1.43;
}

.contact-info { display: grid; gap: var(--sp-06); }
.contact-info dt { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; color: var(--cds-text-helper); margin-bottom: var(--sp-02); }
.contact-info dd { margin: 0; font-size: 0.875rem; }

/* ---------- Pied ---------- */

.ftr { background: #000000; color: var(--cds-gray-30); padding: var(--sp-10) 0 var(--sp-07); }

.ftr__grid { display: grid; gap: var(--sp-09); }
@media (min-width: 42rem) { .ftr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .ftr__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.ftr__title { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; color: var(--cds-gray-50); margin-bottom: var(--sp-05); }
.ftr a { color: var(--cds-gray-30); text-decoration: none; font-size: 0.875rem; display: block; padding: var(--sp-02) 0; }
.ftr a:hover { color: #fff; }
.ftr__brand strong { color: #f4f4f4; font-size: 1rem; display: block; margin-bottom: var(--sp-04); }
.ftr__logo-mark { width: 2.25rem; height: 2.25rem; color: #f4f4f4; margin-bottom: var(--sp-05); }
.ftr__brand p { font-size: 0.875rem; max-width: 24rem; }

.ftr__bottom {
  margin-top: var(--sp-09);
  padding-top: var(--sp-06);
  border-top: 1px solid var(--cds-gray-80);
  font-size: 0.75rem;
  color: var(--cds-gray-50);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-05);
  justify-content: space-between;
}

/* ---------- Divers ---------- */

.stack-06 > * + * { margin-top: var(--sp-06); }
.mt-07 { margin-top: var(--sp-07); }
.mt-09 { margin-top: var(--sp-09); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Table des matières collante (Carbon in-page nav) ---------- */

.toc {
  position: sticky;
  top: var(--sous-hdr, 3rem);   /* bas réel de l'en-tête, bandeau compris */
  z-index: 30;
  background: #f5f5f7;
  border-bottom: 1px solid var(--cds-border-subtle);
}

/* sur l'accueil, la barre est sombre comme le héros qui la précède */
.toc--noir {
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.toc--noir .toc__link { color: rgba(255, 255, 255, 0.58); }
.toc--noir .toc__link:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.toc--noir .toc__link.is-active { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

.toc__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 calc(var(--grid-margin) - var(--sp-04));
  display: flex;
  align-items: stretch;
  min-height: 3rem;
}

@media (min-width: 42rem) {
  .toc__inner { padding: 0 calc(var(--grid-gutter) - var(--sp-04)); }
}

.toc__list {
  display: flex;
  align-items: center;
  gap: var(--sp-03);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1 1 auto;
}
.toc__list::-webkit-scrollbar { display: none; }

.toc__list li { flex: 0 0 auto; }

.toc__link {
  display: flex;
  align-items: center;
  align-self: center;
  height: 2rem;
  padding: 0 var(--sp-04);
  margin: 0;
  border-radius: 999px;
  color: var(--cds-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.29;
  letter-spacing: 0.16px;
  white-space: nowrap;
  transition: color var(--dur-fast-02) var(--ease-productive),
              background var(--dur-fast-02) var(--ease-productive);
}
.toc__link:hover { background: rgba(22, 22, 22, 0.06); color: var(--cds-gray-100); }

.toc__link.is-active {
  background: rgba(22, 22, 22, 0.09);
  color: var(--cds-gray-100);
}




/* les ancres ne passent pas sous les deux barres collantes */
[id] { scroll-margin-top: 9rem; }


/* ---------- Héros clair (accueil) ---------- */

.hero--clair {
  background: linear-gradient(to bottom, #ffffff 0%, #f4f9fd 18%, #e4eff9 55%, #d3e5f7 100%);
  color: var(--cds-gray-100);
}

.hero--clair .hero__eyebrow { color: var(--cds-blue-60); }
.hero--clair .hero__title   { color: var(--cds-gray-100); }
.hero--clair .hero__lede    { color: var(--cds-gray-70); }

.hero--clair .cds-btn--primary {
  background: rgba(22, 22, 22, 0.08);
  color: var(--cds-gray-100);
}
.hero--clair .cds-btn--primary:hover { background: rgba(22, 22, 22, 0.14); }

.hero--clair .cds-btn--secondary {
  background: rgba(22, 22, 22, 0.04);
  color: var(--cds-gray-70);
}
.hero--clair .cds-btn--secondary:hover { background: rgba(22, 22, 22, 0.1); color: var(--cds-gray-100); }


/* ---------- Héros sur le fond de la barre sticky (toutes les pages sauf l'accueil) ---------- */

.hero--barre {
  background: linear-gradient(to bottom, #ffffff 0%, #f4f9fd 18%, #e4eff9 55%, #d3e5f7 100%);
  color: var(--cds-gray-100);
}

.hero--barre .hero__eyebrow { color: var(--cds-blue-60); }
.hero--barre .hero__title   { color: var(--cds-gray-100); }
.hero--barre .hero__lede    { color: var(--cds-gray-70); }

.hero--barre .cds-btn--primary {
  background: rgba(22, 22, 22, 0.08);
  color: var(--cds-gray-100);
}
.hero--barre .cds-btn--primary:hover { background: rgba(22, 22, 22, 0.14); }

.hero--barre .cds-btn--secondary {
  background: rgba(22, 22, 22, 0.04);
  color: var(--cds-gray-70);
}
.hero--barre .cds-btn--secondary:hover { background: rgba(22, 22, 22, 0.1); color: var(--cds-gray-100); }

.hero--barre a { color: var(--cds-blue-60); }

/* le fil d'Ariane suit le fond clair */
.hero--barre .fil a { color: var(--cds-text-secondary); }
.hero--barre .fil a:hover { color: var(--cds-gray-100); }
.hero--barre .fil span[aria-hidden] { color: var(--cds-gray-50); }
.hero--barre .fil [aria-current] { color: var(--cds-gray-100); }

/* ---------- Page de connexion ---------- */

.page-login { background: #000000; color: #f4f4f4; }

.login {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 3.5rem);
}

@media (min-width: 66rem) {
  .login { grid-template-columns: 1fr 1fr; }
}

.login__form {
  display: flex;
  flex-direction: column;
  padding: var(--sp-07) var(--sp-05) var(--sp-07);
}

@media (min-width: 42rem) {
  /* le logo se cale à la même hauteur que celui de l'en-tête du site :
     centré dans une barre de 3rem, soit 0.625rem sous le haut de page */
  .login__form { padding: 0.625rem var(--sp-09) var(--sp-08) var(--grid-gutter); }
}
@media (min-width: 99rem) {
  .login__form { padding-left: calc((100vw - var(--grid-max)) / 2 + var(--grid-gutter)); }
}

.login__logo {
  display: inline-flex;
  align-items: center;
  padding-right: var(--sp-05);
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-start;
  transition: opacity var(--dur-fast-02) var(--ease-productive);
}
.login__logo:hover { opacity: 0.7; }
.login__logo-mark { width: 1.75rem; height: 1.75rem; display: block; }

.login__bloc {
  margin: auto 0;
  max-width: 30rem;
  padding: var(--sp-09) 0;
}

.login__titre { margin-bottom: var(--sp-04); max-width: 22ch; text-wrap: balance; }

.login__intro {
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: var(--sp-04);
}

.login__champs { margin-top: var(--sp-07); }

.login__ligne { display: flex; gap: var(--sp-04); align-items: center; }
.login__ligne .cds-input { flex: 1 1 auto; }
.login__ligne .cds-btn {
  flex: 0 0 auto;
  height: 2.75rem;
  padding: 0 var(--sp-06);
}

.login__mentions {
  margin-top: var(--sp-06);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cds-text-helper);
  max-width: 28rem;
}

.login__aide {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-05);
  padding: var(--sp-06);
  border-radius: 1.125rem;
  background: #f5f5f7;
  max-width: 34rem;
}
.login__aide strong { display: block; font-size: 0.9375rem; margin-bottom: var(--sp-02); }
.login__aide span { font-size: 0.875rem; color: var(--cds-text-secondary); }

.login__visuel {
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--cds-gray-100);
  padding: 0;
  align-items: stretch;
  /* séparateur entre les deux colonnes */
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 66rem) { .login__visuel { display: flex; } }

.login__visuel-contenu { max-width: 26rem; }
.login__visuel-phrase {
  color: #ffffff;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.login__pied {
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-05);
  padding: 0 var(--grid-margin);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.42);
}
.login__pied a { color: rgba(255, 255, 255, 0.58); text-decoration: none; }
.login__pied a:hover { text-decoration: underline; }

@media (min-width: 42rem) { .login__pied { padding: 0 var(--grid-gutter); } }
@media (min-width: 99rem) {
  .login__pied { padding: 0 calc((100vw - var(--grid-max)) / 2 + var(--grid-gutter)); }
}


/* ---------- Carrousel de services ---------- */

.carrousel__titre { color: var(--cds-gray-100); }

.carrousel {
  position: relative;
  margin-top: 0;
  /* le défilement reste interne : la page ne s'élargit pas */
  max-width: 100vw;
  overflow: hidden;
}

.carrousel__piste {
  display: flex;
  max-width: 100%;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 0 var(--sp-04);
}
.carrousel__piste::-webkit-scrollbar { display: none; }

/* cales de début et de fin : elles alignent la première carte sur la grille
   sans fausser le calage du scroll-snap */
.carrousel__piste::before,
.carrousel__piste::after {
  content: '';
  flex: 0 0 auto;
  width: calc(var(--grid-margin) - 8px);
}
.carrousel__piste::before { width: calc(var(--grid-margin) - 8px); }

@media (min-width: 42rem) {
  .carrousel__piste::before,
  .carrousel__piste::after { width: calc(var(--grid-gutter) - 8px); }
}

@media (min-width: 99rem) {
  .carrousel__piste::before,
  .carrousel__piste::after {
    width: calc((100vw - var(--grid-max)) / 2 + var(--grid-gutter) - 8px);
  }
}

.carte {
  flex: 0 0 auto;
  width: 19rem;
  min-height: 29rem;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 1.125rem;
  background: #000000;
  color: #f4f4f4;
  text-decoration: none;
}

.carte__haut {
  flex: 0 0 auto;
  padding: var(--sp-07);
}

.carte__pied {
  flex: 0 0 auto;
  margin-top: auto;
  padding: var(--sp-05) var(--sp-06);
  background: #262626;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-04);
}

.carte__mention {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cds-gray-50);
}

.carte__bouton {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 var(--sp-04);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--cds-gray-10);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  white-space: nowrap;
  transition: background var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}
.carte__bouton:hover { background: rgba(255, 255, 255, 0.2); color: #ffffff; }

@media (min-width: 42rem) {
  .carte { width: 21rem; }
}

.carte__titre {
  font-size: 1.5rem;
  line-height: 1.167;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: var(--sp-05);
}

.carte__texte {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cds-gray-30);
}

/* cartes claires */
.carte--clair {
  background: #ffffff;
  color: var(--cds-gray-100);
}
.carte--clair .carte__titre { color: var(--cds-gray-100); }
.carte--clair .carte__texte { color: var(--cds-text-secondary); }
.carte--clair .carte__pied { background: #ececef; }
.carte--clair .carte__mention { color: var(--cds-text-helper); }
.carte--clair .carte__bouton {
  background: rgba(22, 22, 22, 0.08);
  color: var(--cds-gray-100);
}
.carte--clair .carte__bouton:hover { background: rgba(22, 22, 22, 0.14); }

/* carte en dégradé bleu ciel */
.carte--ciel {
  background: linear-gradient(165deg, #ffffff 0%, #e8f1fb 45%, #c9dff5 100%);
  color: var(--cds-gray-100);
}
.carte--ciel .carte__titre { color: var(--cds-gray-100); }
.carte--ciel .carte__texte { color: var(--cds-gray-70); }
.carte--ciel .carte__pied { background: #dbe8f6; }
.carte--ciel .carte__mention { color: var(--cds-gray-60); }
.carte--ciel .carte__bouton {
  background: rgba(22, 22, 22, 0.08);
  color: var(--cds-gray-100);
}
.carte--ciel .carte__bouton:hover { background: rgba(22, 22, 22, 0.14); }

/* flèches de défilement */

.carrousel__fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  color: var(--cds-gray-100);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: background var(--dur-fast-02) var(--ease-productive),
              opacity var(--dur-fast-02) var(--ease-productive);
}
.carrousel__fleche:hover { background: #ffffff; }
.carrousel__fleche[hidden] { display: none !important; }

.carrousel__fleche--prec { left: var(--sp-05); }
.carrousel__fleche--suiv { right: var(--sp-05); }

@media (min-width: 66rem) {
  .carrousel__fleche { display: flex; }
  .carrousel__fleche--prec { left: var(--sp-07); }
  .carrousel__fleche--suiv { right: var(--sp-07); }
}

/* ---------- Répertoire de fin de page service ---------- */

.repertoire__titre {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cds-gray-100);
  margin-bottom: var(--sp-07);
}

.repertoire {
  position: relative;
  max-width: 100vw;
  overflow: hidden;
}

.repertoire__piste {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--sp-04);
}
.repertoire__piste::-webkit-scrollbar { display: none; }

.repertoire__piste::before,
.repertoire__piste::after {
  content: '';
  flex: 0 0 auto;
  width: calc(var(--grid-margin) - 8px);
}

@media (min-width: 42rem) {
  .repertoire__piste::before,
  .repertoire__piste::after { width: calc(var(--grid-gutter) - 8px); }
}

@media (min-width: 99rem) {
  .repertoire__piste::before,
  .repertoire__piste::after {
    width: calc((100vw - var(--grid-max)) / 2 + var(--grid-gutter) - 8px);
  }
}

/* vignettes : cartes blanches arrondies */
.vignette {
  flex: 0 0 auto;
  width: 15rem;
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-03);
  padding: var(--sp-06);
  border-radius: 1.125rem;
  background: #ffffff;
  text-decoration: none;
}

@media (min-width: 42rem) { .vignette { width: 17rem; } }

.vignette__mention {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cds-text-helper);
}

.vignette__titre {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--cds-gray-100);
}

/* pilules : liens secondaires */
.pilule {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 var(--sp-07);
  border-radius: 999px;
  background: #ffffff;
  color: var(--cds-gray-100);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- Pages sur fond blanc ---------- */

.page-blanche { background: #ffffff; }
.page-blanche .cds-input,
.page-blanche .cds-select,
.page-blanche .cds-textarea { background: #ffffff; }

/* espacement des champs resserré sur mobile */
@media (max-width: 42rem) {
  .form { gap: var(--sp-06); }
  .form__row { display: grid; gap: var(--sp-06); }
  .contact-info { gap: var(--sp-05); }
}

/* ---------- Fil d'Ariane ---------- */

.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-03);
  margin-bottom: var(--sp-06);
  font-size: 0.875rem;
  line-height: 1.43;
}

.fil a {
  color: var(--cds-gray-30);
  text-decoration: none;
  transition: color var(--dur-fast-02) var(--ease-productive);
}
.fil a:hover { color: #ffffff; text-decoration: underline; }

.fil span[aria-hidden] { color: var(--cds-gray-60); }
.fil [aria-current] { color: #f4f4f4; }

/* sur les héros clairs, le fil s'assombrit */
.hero--clair .fil a { color: var(--cds-text-secondary); }
.hero--clair .fil a:hover { color: var(--cds-gray-100); }
.hero--clair .fil span[aria-hidden] { color: var(--cds-gray-50); }
.hero--clair .fil [aria-current] { color: var(--cds-gray-100); }

/* ---------- Méga-menu Services (desktop) ---------- */

.hdr__mega-hote { position: relative; display: flex; align-items: center; }

.hdr__declencheur {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-03);
  height: 2rem;
  padding: 0 var(--sp-04);
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--cds-gray-10);
  font-family: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  cursor: pointer;
  transition: background var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}
.hdr__declencheur:hover,
.hdr__declencheur[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.hdr__declencheur[data-actif] { background: rgba(255, 255, 255, 0.16); color: #ffffff; }

.hdr__declencheur svg {
  transition: transform var(--dur-fast-02) var(--ease-productive);
}
.hdr__declencheur[aria-expanded="true"] svg { transform: rotate(180deg); }

.mega {
  position: fixed;
  /* s'ouvre sous l'en-tête réel : --sous-hdr suit le bandeau d'offre
     tant qu'il est à l'écran, puis redescend à la hauteur de l'en-tête seul */
  top: var(--sous-hdr, 3rem);
  left: 0;
  right: 0;
  z-index: 45;
  /* noir à 95 % : la page reste devinée derrière le menu */
  background: rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
/* si le flou n'est pas géré, on remonte l'opacité pour rester lisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mega { background: rgba(0, 0, 0, 0.97); }
}
.mega[hidden] { display: none; }

.mega__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: var(--sp-08) var(--grid-gutter) var(--sp-09);
  display: grid;
  gap: var(--sp-09);
  grid-template-columns: repeat(3, 1fr);
}

.mega__titre {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cds-gray-50);
  margin-bottom: var(--sp-05);
}

.mega__colonne a {
  display: block;
  height: auto;
  min-height: 0;
  padding: var(--sp-04) var(--sp-05);
  margin: 0 calc(var(--sp-05) * -1) 2px;
  border-radius: 0.75rem;
  text-decoration: none;
  line-height: 1.4;
  transition: background var(--dur-fast-02) var(--ease-productive);
}
.mega__colonne a:hover { background: rgba(255, 255, 255, 0.08); }
.mega__colonne a[aria-current] { background: rgba(255, 255, 255, 0.12); }

.mega__colonne a strong {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f4f4f4;
  margin-bottom: 3px;
}
.mega__colonne a span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--cds-gray-50);
}

.mega__encart {
  margin-top: var(--sp-07);
  padding: var(--sp-06);
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, 0.06);
}
.mega__encart strong {
  display: block;
  font-size: 0.9375rem;
  color: #f4f4f4;
  margin-bottom: var(--sp-03);
}
.mega__encart span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--cds-gray-30);
  margin-bottom: var(--sp-05);
}
.mega__bouton {
  display: inline-flex !important;
  align-items: center;
  height: 2rem;
  padding: 0 var(--sp-04) !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--cds-gray-10) !important;
  font-size: 0.875rem;
  text-decoration: none;
}
.mega__bouton:hover { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; }

/* voile derrière le menu ouvert */
.mega-voile {
  position: fixed;
  inset: 3rem 0 0;
  z-index: 44;
  background: rgba(0, 0, 0, 0.4);
}
.mega-voile[hidden] { display: none; }

/* ---------- Blog ---------- */

.filtres { display: flex; flex-wrap: wrap; gap: 8px; }

/* sur mobile, les filtres défilent au lieu de passer à la ligne */
@media (max-width: 42rem) {
  .filtres {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* les pastilles vont jusqu'aux bords de l'écran */
    margin: 0 calc(var(--grid-margin) * -1);
    padding: 0 var(--grid-margin);
    scroll-padding-left: var(--grid-margin);
  }
  .filtres::-webkit-scrollbar { display: none; }
  .filtres__lien { flex: 0 0 auto; }
}

.filtres__lien {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 var(--sp-05);
  border-radius: 999px;
  background: #ffffff;
  color: var(--cds-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}
.filtres__lien:hover { color: var(--cds-gray-100); }
.filtres__lien.is-active { background: var(--cds-gray-100); color: #ffffff; }

.articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 42rem) { .articles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .articles { grid-template-columns: repeat(3, 1fr); } }

.article-carte {
  display: flex;
  flex-direction: column;
  gap: var(--sp-04);
  padding: var(--sp-07);
  border-radius: 1.125rem;
  background: #ffffff;
  text-decoration: none;
  min-height: 14rem;
}
.article-carte:hover { background: #ffffff; }

.article-carte__cat {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cds-text-helper);
}
.article-carte__titre {
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--cds-gray-100);
}
.article-carte__extrait {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cds-text-secondary);
}
.article-carte__lire {
  margin-top: auto;
  font-size: 0.875rem;
  color: var(--cds-blue-60);
}

/* corps d'article */

.texte { max-width: 44rem; }

.texte h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: var(--sp-09) 0 var(--sp-05);
  scroll-margin-top: 7rem;
}
.texte h2:first-child { margin-top: 0; }

.texte h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: var(--sp-07) 0 var(--sp-04);
}

.texte p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cds-text-secondary);
  margin-bottom: var(--sp-05);
}

.texte ul {
  list-style: none;
  margin: 0 0 var(--sp-06);
  padding: 0;
}
.texte li {
  position: relative;
  padding-left: var(--sp-06);
  margin-bottom: var(--sp-04);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
}
.texte li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cds-blue-60);
}

/* sommaire */

.sommaire__titre {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cds-text-helper);
  margin-bottom: var(--sp-05);
}
.sommaire__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-05);
  padding: var(--sp-05) 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cds-text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast-02) var(--ease-productive);
}
.sommaire__lien:hover { color: var(--cds-gray-100); }

/* une seule ligne : le titre est tronqué s'il dépasse */
.sommaire__lien span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sommaire__lien svg {
  flex: 0 0 auto;
  color: var(--cds-gray-50);
  transition: transform var(--dur-fast-02) var(--ease-productive);
}
.sommaire__lien:hover svg { transform: translateX(2px); color: var(--cds-gray-100); }

/* un filet entre chaque entrée */
.sommaire__lien + .sommaire__lien { border-top: 1px solid var(--cds-border-subtle); }

.sommaire__lien.is-active { color: var(--cds-gray-100); }
.sommaire__lien.is-active svg { color: var(--cds-gray-100); }

/* le sommaire défile si l'article est long */
.sommaire { max-height: calc(100vh - 8rem); overflow-y: auto; scrollbar-width: none; }
.sommaire::-webkit-scrollbar { display: none; }

.hdr__lien {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 var(--sp-04);
  border-radius: 999px;
  color: var(--cds-gray-10);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.16px;
  transition: background var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}
.hdr__lien:hover { background: rgba(255,255,255,0.12); color: #fff; }
.hdr__lien[aria-current] { background: rgba(255,255,255,0.16); color: #fff; }

/* ---------- Page article : sidebar blanche, contenu à droite ---------- */

.lecture {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 3rem);
  background: #f5f5f7;
}

@media (min-width: 66rem) {
  .lecture { grid-template-columns: 23rem 1fr; }
  /* sans sommaire, le contenu occupe toute la largeur */
  .lecture--sans-cote { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 99rem) {
  .lecture--sans-cote { grid-template-columns: minmax(0, 1fr); }
}

.lecture--sans-cote .lecture__corps {
  max-width: var(--grid-max);
  margin: 0 auto;
  width: 100%;
}

/* colonne de gauche, pleine hauteur, fond blanc */
.lecture__cote {
  background: #ffffff;
  border-right: 1px solid var(--cds-border-subtle);
}

.lecture__cote .fil--clair {
  padding: var(--sp-07) var(--sp-06) 0 var(--grid-margin);
  margin-bottom: 0;
}

.lecture__cote .sommaire {
  position: static;
  padding: var(--sp-06) var(--sp-06) var(--sp-07) var(--grid-margin);
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
  max-height: none;
}

/* ---- mobile : barre collante, liste en superposition ---- */
@media (max-width: 66rem) {
  .lecture { grid-template-columns: minmax(0, 1fr); }

  /* le fil d'Ariane défile normalement */
  .lecture__cote .fil--clair {
    padding: var(--sp-06) var(--grid-margin) var(--sp-04);
  }

  /* seule la barre du sommaire colle sous l'en-tête */
  .lecture__cote .sommaire {
    position: sticky;
    top: var(--sous-hdr, 3rem);
    z-index: 25;
    padding: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--cds-border-subtle);
    max-height: none;
    overflow: visible;
  }

  /* la barre latérale reste dans le flux : elle ne recouvre pas l'article.
     Le sommaire colle en s'appuyant sur la colonne entière. */
  .lecture__cote {
    position: static;
    display: contents;   /* l'aside s'efface : ses enfants rejoignent .lecture */
    border-right: none;
    border-bottom: none;
  }
  .lecture__cote .sommaire__titre { display: none; }

  .sommaire__bascule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--sp-05);
    padding: var(--sp-05) var(--grid-margin);
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cds-gray-100);
    text-align: left;
    cursor: pointer;
  }
  .sommaire__bascule-texte {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sommaire__bascule svg {
    flex: 0 0 auto;
    color: var(--cds-gray-50);
    transition: transform var(--dur-fast-02) var(--ease-productive);
  }
  .sommaire__bascule[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* la liste se superpose au contenu, sans le décaler */
  .lecture__cote .sommaire__liste {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 25;
    display: block;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    padding: 0 var(--grid-margin) var(--sp-05);
    background: #ffffff;
    border-bottom: 1px solid var(--cds-border-subtle);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast-02) var(--ease-productive),
                transform var(--dur-fast-02) var(--ease-productive),
                visibility 0s linear var(--dur-fast-02);
  }
  .lecture__cote .sommaire__liste.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-fast-02) var(--ease-productive),
                transform var(--dur-fast-02) var(--ease-productive),
                visibility 0s;
  }
}

@media (min-width: 66rem) {
  .sommaire__bascule { display: none; }
}

@media (min-width: 42rem) {
  .lecture__cote .sommaire,
  .lecture__cote .fil--clair { padding-left: var(--grid-gutter); padding-right: var(--sp-07); }
}

@media (min-width: 66rem) {
  .lecture__cote .sommaire {
    position: sticky;
    top: var(--sous-hdr, 3rem);
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .lecture__cote .sommaire::-webkit-scrollbar { display: none; }
}

/* Au-delà de la largeur de grille, l'en-tête se centre dans 1584px.
   La barre latérale suit ce retrait pour rester alignée sur le logo. */
@media (min-width: 99rem) {
  .lecture { grid-template-columns: calc((100vw - var(--grid-max)) / 2 + 23rem) 1fr; }
  .lecture__cote .sommaire,
  .lecture__cote .fil--clair {
    padding-left: calc((100vw - var(--grid-max)) / 2 + var(--grid-gutter));
  }
}

.fil--clair { margin-bottom: var(--sp-06); font-size: 0.8125rem; }
.fil--clair a { color: var(--cds-text-secondary); }
.fil--clair a:hover { color: var(--cds-gray-100); }
.fil--clair span[aria-hidden] { color: var(--cds-gray-50); }

/* colonne de droite */
.lecture__corps {
  padding: var(--sp-08) var(--grid-margin) var(--sp-11);
  max-width: 100%;
}

@media (min-width: 42rem) {
  .lecture__corps { padding-left: var(--sp-09); padding-right: var(--sp-09); }
}

@media (min-width: 66rem) {
  .lecture__corps { padding: var(--sp-10) var(--sp-10) var(--sp-12); }
}

.lecture__entete { max-width: 46rem; margin-bottom: var(--sp-09); }

.lecture__titre { color: var(--cds-gray-100); margin-bottom: var(--sp-05); }
.lecture__chapeau { color: var(--cds-text-secondary); }

.lecture__corps .texte { max-width: 46rem; }

/* les titres de section de l'article reprennent le style du site */
.lecture__corps .texte h2 {
  margin: var(--sp-10) 0 var(--sp-05);
  color: var(--cds-gray-100);
}
.lecture__corps .texte h2:first-child { margin-top: 0; }

/* à lire aussi */
.lecture__aussi {
  margin-top: var(--sp-11);
  max-width: 46rem;
}
.lecture__aussi .section__title { margin-bottom: var(--sp-07); }

.aussi-grille { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 42rem) { .aussi-grille { grid-template-columns: repeat(3, 1fr); } }

.aussi-grille .article-carte { min-height: 10rem; }
.aussi-grille .article-carte__titre {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--cds-gray-100);
}

/* ---------- Notes et encadrés d'article ---------- */

.texte .note {
  margin: var(--sp-07) 0;
  padding: var(--sp-06);
  border-radius: 1.125rem;
  border-left: 3px solid var(--cds-gray-50);
  background: #ffffff;
}

.texte .note__libelle {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cds-text-helper);
  margin-bottom: var(--sp-03);
}

.texte .note__texte {
  margin-bottom: 0;
  color: var(--cds-text-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.texte .note--resume {
  border-left: none;
  padding: var(--sp-07);
  background: linear-gradient(150deg, #161616 0%, #1c2b4a 55%, #0f62fe 100%);
}
.texte .note--resume .note__libelle { color: var(--cds-blue-40); }
.texte .note--resume .note__texte { color: #f4f4f4; }

.texte .note--retenir   { border-left-color: var(--cds-gray-100); }
.texte .note--retenir .note__libelle { color: var(--cds-gray-100); }

.texte .note--savoir    { border-left-color: var(--cds-blue-40); }
.texte .note--savoir .note__libelle { color: var(--cds-blue-60); }

.texte .note--attention { border-left-color: var(--cds-red-60); }
.texte .note--attention .note__libelle { color: var(--cds-red-60); }

.texte .note--exemple   { border-left-color: var(--cds-green-50); }
.texte .note--exemple .note__libelle { color: var(--cds-green-50); }

/* points clés de fin d'article */
.texte .cles {
  margin: var(--sp-09) 0 var(--sp-07);
  padding: var(--sp-07);
  border-radius: 1.125rem;
  background: var(--cds-gray-100);
}

.texte .cles__titre {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cds-gray-50);
  margin-bottom: var(--sp-05);
}

.texte .cles ul { margin-bottom: 0; }
.texte .cles li {
  color: var(--cds-gray-10);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.texte .cles li::before { background: var(--cds-blue-40); }

/* ---------- FAQ en accordéon ---------- */

.texte .faq-item + .faq-item {
  border-top: 1px solid var(--cds-border-subtle);
}

.texte .faq-item__q {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}

.faq-item__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-06);
  width: 100%;
  padding: var(--sp-05) 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--cds-gray-100);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast-02) var(--ease-productive);
}
.faq-item__btn:hover { color: var(--cds-blue-60); }

.faq-item__btn svg {
  flex: 0 0 auto;
  color: var(--cds-gray-50);
  transition: transform var(--dur-moderate-01) var(--ease-productive);
}
.faq-item__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* la réponse reste dans le document : elle se replie en hauteur,
   sans display:none, pour rester lisible par les moteurs. */
.faq-item__r {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-moderate-01) var(--ease-productive);
}
.faq-item__r.is-open { grid-template-rows: 1fr; }

.faq-item__inner { overflow: hidden; }

.texte .faq-item__inner > p {
  margin: 0 0 var(--sp-05);
  padding-right: var(--sp-08);
}
.texte .faq-item__inner > ul { margin-bottom: var(--sp-05); }

/* sans JavaScript, tout reste ouvert */
.faq-item__r:not(.js-pret) { grid-template-rows: 1fr; }

/* ---------- Encart devis, collant à droite de l'article ---------- */

.lecture__zone { display: block; }

@media (min-width: 75rem) {
  .lecture__zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    gap: var(--sp-09);
    align-items: start;
  }
  .lecture__zone .lecture__entete { grid-column: 1; grid-row: 1; }
  .lecture__zone .texte { max-width: none; grid-column: 1; grid-row: 2; }
  .lecture__zone .devis { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}

.devis { display: none; }

@media (min-width: 75rem) {
  .devis {
    display: block;
    position: sticky;
    top: 4.5rem;
  }
  .devis__carte {
    display: flex;
    flex-direction: column;
    min-height: 30rem;
    padding: var(--sp-08) var(--sp-07);
  }
  .devis__titre { font-size: 1.375rem; line-height: 1.25; margin-bottom: var(--sp-05); }
  .devis__texte { font-size: 0.9375rem; margin-bottom: var(--sp-07); }
  .devis__liste { margin-bottom: auto; }
  .devis__liste li { padding: var(--sp-04) 0; font-size: 1rem; }
  .devis .cds-btn--primary { align-self: flex-start; margin-top: var(--sp-07); }
}

.devis__carte {
  padding: var(--sp-07);
  border-radius: 1.125rem;
  background: #000000;
}

.devis__titre {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin-bottom: var(--sp-04);
}

.devis__texte {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--cds-gray-30);
  margin-bottom: var(--sp-06);
}

.devis__liste {
  list-style: none;
  margin: 0 0 var(--sp-07);
  padding: 0;
}
.devis__liste li {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  padding: var(--sp-03) 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--cds-gray-10);
}
.devis__liste svg { flex: 0 0 auto; color: var(--cds-blue-40); }

.devis .cds-btn--primary {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cds-gray-10);
}
.devis .cds-btn--primary:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* sous cette largeur, l'encart revient en fin d'article */
@media (max-width: 75rem) {
  .lecture__zone { display: flex; flex-direction: column; }
  .lecture__zone .lecture__entete { order: 0; }
  .lecture__zone .texte { order: 1; }
  .devis {
    order: 2;
    display: block;
    margin-top: var(--sp-09);
    max-width: 46rem;
  }
}

/* ---------- Constellation d'outils ---------- */

.outils {
  background: #d3e5f7;
}
.outils .section__title { color: var(--cds-gray-100); }
.outils .section__title span { color: var(--cds-gray-50); }
.outils .section__intro { color: var(--cds-gray-70); }

.constellation {
  position: relative;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}

@media (min-width: 42rem) { .constellation { padding: 0 var(--grid-gutter); } }

.constellation__rangs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-05);
  align-items: center;
}

.constellation__rang {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-05);
}

/* tuile d'outil */
.tuile {
  width: 3.75rem;
  height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.08);
  color: var(--cds-gray-60);
  transition: color var(--dur-moderate-01) var(--ease-productive),
              background var(--dur-moderate-01) var(--ease-productive),
              box-shadow var(--dur-moderate-01) var(--ease-productive);
}
.tuile svg { width: 1.6rem; height: 1.6rem; }

.tuile:hover {
  background: #ffffff;
  color: var(--cds-gray-100);
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.20);
}

@media (min-width: 42rem) {
  .tuile { width: 4.5rem; height: 4.5rem; border-radius: 1.25rem; }
  .tuile svg { width: 1.9rem; height: 1.9rem; }
}

/* faisceau de liaison */
.constellation__flux {
  height: 5.5rem;
  margin: 0;
}
.constellation__flux svg { width: 100%; height: 100%; display: block; }

@media (min-width: 42rem) { .constellation__flux { height: 7.5rem; } }

.constellation__rangs + .constellation__flux { margin-top: 0; }

/* les pointillés descendent vers le logo */
.constellation__flux path {
  animation: fluxDescend 1.6s linear infinite;
}

@keyframes fluxDescend {
  to { stroke-dashoffset: -11; }
}

/* cible : le logo */
.constellation__cible {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-05);
}

.cible {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  background: var(--cds-gray-100);
  color: #ffffff;
}
.cible svg { width: 2.25rem; height: 2.25rem; }

.constellation__legende {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cds-text-helper);
}

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


/* ---------- Maquettes d'interface dans les cartes du carrousel ---------- */
/* Écrans d'outil illustratifs. Les couleurs viennent de la carte parente. */

.carte {
  --mk-trait:  rgba(255, 255, 255, 0.16);
  --mk-plein:  rgba(255, 255, 255, 0.10);
  --mk-fond:   rgba(255, 255, 255, 0.05);
  --mk-accent: #78a9ff;
  --mk-ok:     #42be65;
  --mk-att:    #f1c21b;
  --mk-fort:   rgba(255, 255, 255, 0.92);
  --mk-texte:  rgba(255, 255, 255, 0.62);
}
.carte--clair,
.carte--ciel {
  --mk-trait:  rgba(22, 22, 22, 0.16);
  --mk-plein:  rgba(22, 22, 22, 0.08);
  --mk-fond:   rgba(22, 22, 22, 0.035);
  --mk-accent: #0f62fe;
  --mk-ok:     #198038;
  --mk-att:    #8e6a00;
  --mk-fort:   rgba(22, 22, 22, 0.92);
  --mk-texte:  rgba(22, 22, 22, 0.58);
}

.carte__mock {
  flex: 1 1 auto;
  min-height: 10.5rem;
  max-height: 13.5rem;
  margin: 0 var(--sp-06) var(--sp-06);
  overflow: hidden;
  border-radius: 0.75rem;
}
.carte__haut { padding-bottom: var(--sp-05); }

.mk {
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  background: var(--mk-fond);
  box-shadow: inset 0 0 0 1px var(--mk-trait);
  overflow: hidden;
  font-size: 0.5625rem;
  line-height: 1.35;
  color: var(--mk-texte);
  letter-spacing: 0.1px;
}

/* barres abstraites d'appoint */
.mk u, .mk s { display: block; text-decoration: none; }
.mk u { height: 4px; border-radius: 2px; background: var(--mk-plein); }
.mk u.c { width: 58%; }

/* éléments de texte */
.mk__h { font-size: 0.6875rem; font-weight: 600; color: var(--mk-fort); margin: 0 0 3px; }
.mk__t { margin: 0 0 6px; }
.mk__btn {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mk-accent);
  color: #ffffff;
  font-size: 0.5rem;
  font-weight: 500;
}
.mk__btn--sm { padding: 2px 7px; align-self: flex-start; margin-top: 3px; }

/* ---- tableaux de lignes, réutilisés par plusieurs maquettes ---- */
.mk__lignes { display: flex; flex-direction: column; }
.mk--app .mk__lignes, .mk--tableau .mk__lignes { flex: 1 1 auto; }
.mk__l {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
  border-top: 1px solid var(--mk-trait);
}
.mk__l span:first-child { flex: 1; color: var(--mk-fort); }
.mk__l span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk__l em { font-style: normal; font-size: 0.5rem; opacity: .9; }
.mk__l em.ok  { color: var(--mk-ok); }
.mk__l em.att { color: var(--mk-att); }

/* les lignes arrivent une à une quand la carte entre à l'écran */
.mk__l { opacity: 0; transform: translateY(5px); }
.is-vu .mk__l { animation: mkLigne .45s var(--ease-productive) forwards; }
.is-vu .mk__l:nth-child(1) { animation-delay: .10s; }
.is-vu .mk__l:nth-child(2) { animation-delay: .22s; }
.is-vu .mk__l:nth-child(3) { animation-delay: .34s; }
.is-vu .mk__l:nth-child(4) { animation-delay: .46s; }
@keyframes mkLigne { to { opacity: 1; transform: none; } }

.mk__tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}
.mk__tete-l { color: var(--mk-fort); font-weight: 600; font-size: 0.625rem; }
.mk__tete-v em { font-style: normal; color: var(--mk-fort); font-weight: 600; }

.mk__pied-t {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--mk-trait);
}
.mk__pied-t em {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mk-accent);
  letter-spacing: -0.02em;
}

/* ---- tableau de commandes ---- */
.mk--tableau { padding: 9px 10px; display: flex; flex-direction: column; }

/* ---- conversation d'agent ---- */
.mk--chat { padding: 9px 10px; display: flex; flex-direction: column; gap: 5px; }
.mk__bulle {
  border-radius: 8px;
  padding: 5px 7px;
  font-size: 0.5rem;
  line-height: 1.4;
}
.mk__bulle--vous { align-self: flex-end; max-width: 86%; background: var(--mk-plein); color: var(--mk-fort); }
.mk__agent { display: flex; align-items: center; gap: 5px; }
.mk__puce { width: 6px; height: 6px; border-radius: 50%; background: var(--mk-accent); }
.is-vu .mk__puce { animation: mkPuce 1.4s var(--ease-productive) infinite; }
@keyframes mkPuce { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.mk__agent-l { font-size: 0.5rem; color: var(--mk-fort); }
.mk__tps { margin-left: auto; font-size: 0.4375rem; opacity: .7; }

/* texte qui se tape */
.mk__rep { margin: 0; font-size: 0.5rem; line-height: 1.45; color: var(--mk-fort); }
.mk__tape {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  border-right: 1.5px solid transparent;
}
.is-vu .mk__tape {
  animation: mkTape 1.6s steps(46, end) .35s forwards,
             mkCurseur .7s step-end .35s 4;
  width: 0;
}
@keyframes mkTape { to { width: 100%; } }
@keyframes mkCurseur { 0%, 100% { border-color: var(--mk-accent); } 50% { border-color: transparent; } }
.mk__lignes--min { margin-top: auto; }
.mk__lignes--min .mk__l { padding: 3px 0; }

/* ---- SEO ---- */
.mk--serp { padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; }
.mk__res { flex: 0 0 auto; }
.mk__hausse { color: var(--mk-ok); font-weight: 600; font-size: 0.5rem; }
.mk__res { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.mk__res-t { flex: 1; color: var(--mk-fort); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk__res-d { color: var(--mk-ok); font-size: 0.5rem; }
.mk__rang {
  width: 12px; height: 12px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 3px;
  background: var(--mk-plein);
  font-size: 0.4375rem;
}
.mk__res--top .mk__rang { background: var(--mk-accent); color: #ffffff; }
.mk__courbe { margin-top: auto; height: 26px; color: var(--mk-accent); }
.mk__courbe svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mk__trace { stroke-dasharray: 200; stroke-dashoffset: 200; }
.is-vu .mk__trace { animation: mkTrace 1.3s var(--ease-productive) .25s forwards; }
@keyframes mkTrace { to { stroke-dashoffset: 0; } }

/* ---- AEO : étapes qui se cochent ---- */
.mk--aeo { padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; }
.mk__etapes { display: flex; flex-direction: column; gap: 4px; }
.mk__etape {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--mk-trait);
  color: var(--mk-fort);
  opacity: .45;
}
.mk__num {
  width: 11px; height: 11px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 3px;
  background: var(--mk-plein);
  font-size: 0.4375rem;
}
.mk__etape span:nth-child(2) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk__coche {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--mk-trait);
  position: relative;
}
.is-vu .mk__etape { animation: mkEtape .4s var(--ease-productive) forwards; }
.is-vu .mk__etape:nth-child(1) { animation-delay: .15s; }
.is-vu .mk__etape:nth-child(2) { animation-delay: .45s; }
.is-vu .mk__etape:nth-child(3) { animation-delay: .75s; }
.is-vu .mk__etape:nth-child(4) { animation-delay: 1.05s; }
@keyframes mkEtape { to { opacity: 1; } }
.is-vu .mk__coche { animation: mkCoche .3s var(--ease-productive) forwards; }
.is-vu .mk__etape:nth-child(1) .mk__coche { animation-delay: .35s; }
.is-vu .mk__etape:nth-child(2) .mk__coche { animation-delay: .65s; }
.is-vu .mk__etape:nth-child(3) .mk__coche { animation-delay: .95s; }
.is-vu .mk__etape:nth-child(4) .mk__coche { animation-delay: 1.25s; }
@keyframes mkCoche {
  to { background: var(--mk-ok); box-shadow: inset 0 0 0 1.5px var(--mk-ok); }
}


/* ---- maquettes épurées : sans cadre, une seule idée ---- */
.mk--nu {
  background: none;
  box-shadow: none;
  padding: 2px 4px;
  display: flex;
  flex-direction: column;
}

/* Site web : la promesse, le bouton, trois repères */
.mk--page { justify-content: center; align-items: flex-start; gap: 10px; }
.mk__grand {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mk-fort);
}
.mk__points { display: flex; flex-wrap: wrap; gap: 10px; }
.mk__point { display: flex; align-items: center; gap: 4px; font-size: 0.5625rem; }
.mk__point i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mk-accent);
}

/* Refonte : deux notes, avant et après */
.mk--avant-apres { flex-direction: row; align-items: center; justify-content: center; gap: 14px; }
.mk__cote-c { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mk__c-l { font-size: 0.5rem; letter-spacing: 0.4px; text-transform: uppercase; opacity: .7; }
.mk__c-v {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mk-texte);
}
.mk__c-v--ok { color: var(--mk-ok); }
.mk__vers { width: 16px; height: 16px; color: var(--mk-accent); }
.mk__vers svg { width: 100%; height: 100%; display: block; }
.is-vu .mk__vers { animation: mkFleche 1.8s var(--ease-productive) infinite; }
@keyframes mkFleche {
  0%, 100% { transform: translateX(-2px); opacity: .6; }
  50%      { transform: translateX(2px);  opacity: 1; }
}

/* Logiciel : quatre tâches qui se cochent */
.mk--taches { justify-content: center; gap: 9px; }
.mk__tache { display: flex; align-items: center; gap: 8px; color: var(--mk-fort); font-size: 0.625rem; opacity: .4; }
.is-vu .mk__tache { animation: mkEtape .4s var(--ease-productive) forwards; }
.is-vu .mk__tache:nth-child(1) { animation-delay: .15s; }
.is-vu .mk__tache:nth-child(2) { animation-delay: .45s; }
.is-vu .mk__tache:nth-child(3) { animation-delay: .75s; }
.is-vu .mk__tache:nth-child(4) { animation-delay: 1.05s; }
.is-vu .mk__tache .mk__coche { animation: mkCoche .3s var(--ease-productive) forwards; }
.is-vu .mk__tache:nth-child(1) .mk__coche { animation-delay: .35s; }
.is-vu .mk__tache:nth-child(2) .mk__coche { animation-delay: .65s; }
.is-vu .mk__tache:nth-child(3) .mk__coche { animation-delay: .95s; }
.is-vu .mk__tache:nth-child(4) .mk__coche { animation-delay: 1.25s; }

/* Application : un seul écran */
.mk--tel-seul { align-items: center; justify-content: center; }
.mk__ecran-tel {
  width: 96px;
  padding: 9px 10px 18px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--mk-trait);
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.mk__ecran-tel .mk__encoche { width: 18px; height: 3px; border-radius: 999px; background: var(--mk-trait); margin: 0 0 10px; }
.mk__tel-k {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mk-accent);
}
.mk__tel-l { font-size: 0.5rem; text-align: center; margin-top: 3px; }
.mk__ecran-tel .mk__tabs { position: absolute; left: 10px; right: 10px; bottom: 7px; display: flex; gap: 4px; }
.mk__tabs s { display: block; flex: 1; height: 3px; border-radius: 2px; background: var(--mk-trait); }
.mk__tabs s.on { background: var(--mk-accent); }

/* SEO local : une épingle et une note */
.mk--local { align-items: center; justify-content: center; gap: 4px; }
.mk__ancre { position: relative; display: grid; place-items: center; margin-bottom: 10px; }
.mk__pin {
  width: 16px; height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--mk-accent);
}
.mk__pin::after { content: ''; display: block; margin: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cds-background, #fff); opacity: .25; }
.mk__onde {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 1.5px solid var(--mk-accent);
  opacity: 0;
}
.is-vu .mk__onde { animation: mkOnde 2.6s var(--ease-productive) .3s infinite; }
.is-vu .mk__onde--2 { animation-delay: 1.3s; }
@keyframes mkOnde {
  0%   { transform: scale(1);   opacity: .6; }
  75%  { transform: scale(3.6); opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}
.mk__lieu { margin: 0; color: var(--mk-fort); font-weight: 600; font-size: 0.6875rem; }
.mk__avis { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.mk__avis em { font-style: normal; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--mk-fort); }
.mk__avis span { font-size: 0.5625rem; }

/* Google Ads : un histogramme et un chiffre */
.mk--ads2 { justify-content: flex-end; gap: 10px; }
.mk__barres { display: flex; align-items: flex-end; gap: 5px; height: 62px; }
.mk__barres i { flex: 1; height: 0; border-radius: 2px 2px 0 0; background: var(--mk-plein); }
.mk__barres i.on { background: var(--mk-accent); }
.is-vu .mk__barres i { animation: mkBarre .6s var(--ease-productive) forwards; }
.is-vu .mk__barres i:nth-child(1) { animation-delay: .10s; }
.is-vu .mk__barres i:nth-child(2) { animation-delay: .18s; }
.is-vu .mk__barres i:nth-child(3) { animation-delay: .26s; }
.is-vu .mk__barres i:nth-child(4) { animation-delay: .34s; }
.is-vu .mk__barres i:nth-child(5) { animation-delay: .42s; }
.is-vu .mk__barres i:nth-child(6) { animation-delay: .50s; }
@keyframes mkBarre { to { height: var(--h); } }
.mk__sous { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.mk__sous em { font-style: normal; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; color: var(--mk-fort); }
.mk__sous span { font-size: 0.5625rem; }

/* Emailing : trois chiffres */
.mk--trois { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
.mk__chiffre { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.mk__chiffre em {
  font-style: normal;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mk-accent);
}
.mk__chiffre span { font-size: 0.5rem; }

/* GEO : trois moteurs qui citent */
.mk--cites { justify-content: center; gap: 12px; }
.mk__question { margin: 0; color: var(--mk-fort); font-size: 0.625rem; line-height: 1.35; }
.mk--cites .mk__moteurs { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.mk--cites .mk__moteur {
  display: flex; align-items: center; gap: 8px;
  padding: 0;
  border: none;
  color: var(--mk-fort);
  font-size: 0.625rem;
  opacity: .4;
}
.mk--cites .mk__moteur span { flex: 0 0 auto; }
.is-vu .mk--cites .mk__moteur { animation: mkEtape .4s var(--ease-productive) forwards; }
.is-vu .mk--cites .mk__moteur:nth-child(1) { animation-delay: .2s; }
.is-vu .mk--cites .mk__moteur:nth-child(2) { animation-delay: .55s; }
.is-vu .mk--cites .mk__moteur:nth-child(3) { animation-delay: .9s; }
.is-vu .mk--cites .mk__coche { animation: mkCoche .3s var(--ease-productive) forwards; }
.is-vu .mk--cites .mk__moteur:nth-child(1) .mk__coche { animation-delay: .4s; }
.is-vu .mk--cites .mk__moteur:nth-child(2) .mk__coche { animation-delay: .75s; }
.is-vu .mk--cites .mk__moteur:nth-child(3) .mk__coche { animation-delay: 1.1s; }

/* rien ne bouge si la personne a demandé moins d'animations */
@media (prefers-reduced-motion: reduce) {
  .is-vu .mk__l,
  .is-vu .mk__etape,
  .is-vu .mk__coche,
  .is-vu .mk__barres i,
  .is-vu .mk__jauge-p i,
  .is-vu .mk__trace,
  .is-vu .mk__tape,
  .is-vu .mk__puce,
  .is-vu .mk__onde,
  .is-vu .mk__tache,
  .is-vu .mk--cites .mk__moteur,
  .is-vu .mk__vers,
  .is-vu .mk__fleche { animation: none; }
  .mk__tache, .mk--cites .mk__moteur { opacity: 1; }
  .mk__l, .mk__etape { opacity: 1; transform: none; }
  .mk__barres i { height: var(--h); }
  .mk__jauge-p i { width: 96%; }
  .mk__trace { stroke-dashoffset: 0; }
  .mk__tape { width: auto; }
  .mk__coche { background: var(--mk-ok); box-shadow: inset 0 0 0 1.5px var(--mk-ok); }
}

@media (max-width: 22rem) {
  .carte__mock { display: none; }
}

/* ---------- Héros de l'accueil : fond noir, contenu centré, tableau de bord ---------- */

.hero--noir {
  background: #000000;
  color: #ffffff;
  padding: var(--sp-12) 0 0;
  overflow: hidden;
}

.hero__centre {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  text-align: center;
}

@media (min-width: 42rem) { .hero__centre { padding: 0 var(--grid-gutter); } }

.hero__titre-c {
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
  text-wrap: balance;
}

.hero__lede-c {
  max-width: 40rem;
  margin: var(--sp-06) auto 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.62);
}

.hero__actions-c {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-04);
  margin-top: var(--sp-07);
}

/* bouton plein : la pastille blanche qui porte l'action principale */
.cds-btn--plein {
  background: #ffffff;
  color: #000000;
  font-weight: 500;
}
.cds-btn--plein:hover { background: rgba(255, 255, 255, 0.88); color: #000000; }
.cds-btn--plein:active { background: rgba(255, 255, 255, 0.78); }

.hero--noir .cds-btn--primary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.hero--noir .cds-btn--primary:hover { background: rgba(255, 255, 255, 0.2); }

.hero--noir .cds-btn--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
}
.hero--noir .cds-btn--secondary:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

/* le tableau de bord déborde vers le bas de la section */
.hero__bord {
  position: relative;
  max-width: var(--grid-max);
  margin: var(--sp-12) auto 0;
  padding: 0 var(--grid-margin);
}

/* le bas du tableau de bord se fond dans le noir de la section.
   ::after sert déjà au dégradé latéral en mobile, d'où ::before ici. */
.hero__bord::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.8) 78%,
    #000 100%
  );
}
@media (min-width: 42rem) { .hero__bord { padding: 0 var(--grid-gutter); } }

.bord {
  display: flex;
  height: 32rem;
  border-radius: 0.875rem 0.875rem 0 0;
  background: #0a0a0a;
  /* le cadre s'arrête aux trois côtés visibles : pas de trait en bas */
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.58);
}

/* ---- barre latérale ---- */
.bord__cote {
  flex: 0 0 13rem;
  display: none;
  flex-direction: column;
  gap: var(--sp-05);
  padding: var(--sp-05);
  background: #111111;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}
@media (min-width: 52rem) { .bord__cote { display: flex; } }

.bord__marque {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.8125rem;
}
.bord__logo { width: 1rem; height: 1rem; flex: 0 0 auto; }

.bord__menu { display: flex; flex-direction: column; gap: 1px; }
.bord__item {
  padding: 0.4rem 0.6rem;
  border-radius: 0.375rem;
  line-height: 1.3;
}
.bord__item.is-on { background: rgba(255, 255, 255, 0.10); color: #ffffff; }

.bord__section {
  margin: 0;
  padding: 0 0.6rem;
  font-size: 0.625rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}

/* ---- zone principale ---- */
.bord__zone {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-05);
  padding: var(--sp-05) var(--sp-06);
}

.bord__haut { display: flex; align-items: center; gap: var(--sp-04); }
.bord__onglet {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
}
.bord__onglet.is-on { background: rgba(255, 255, 255, 0.10); color: #ffffff; }

.bord__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-04); }
.bord__kpi {
  padding: var(--sp-04);
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bord__kpi-l { display: block; font-size: 0.6875rem; }
.bord__kpi-v {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #ffffff;
}
.bord__kpi-d { display: block; margin-top: 0.1rem; font-size: 0.6875rem; color: #42be65; }

.bord__graphe {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-03);
  padding: var(--sp-04);
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bord__graphe-t { display: flex; align-items: baseline; justify-content: space-between; }
.bord__graphe-t span:first-child { color: #ffffff; font-weight: 500; }
.bord__graphe-h { font-size: 0.6875rem; }
.bord__courbe { width: 100%; height: 7.5rem; display: block; }
.bord__trace { stroke-dasharray: 420; stroke-dashoffset: 420; }
.is-vu .bord__trace { animation: bordTrace 1.6s var(--ease-productive) .3s forwards; }
@keyframes bordTrace { to { stroke-dashoffset: 0; } }
.bord__aire { opacity: 0; }
.is-vu .bord__aire { animation: bordAire .8s var(--ease-productive) 1.1s forwards; }
@keyframes bordAire { to { opacity: 1; } }

/* ---- tableau ---- */
.bord__table { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; }
@media (min-width: 42rem) { .bord__table { display: flex; } }
.bord__tr {
  display: grid;
  grid-template-columns: 1fr auto 3.5rem;
  gap: var(--sp-04);
  padding: 0.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bord__tr span:first-child { color: rgba(255, 255, 255, 0.82); }
.bord__tr--tete {
  border-top: none;
  font-size: 0.6875rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}
.bord__tr--tete span:first-child { color: rgba(255, 255, 255, 0.34); }
.bord__tr em { font-style: normal; text-align: right; }
.bord__tr em.up { color: #42be65; }

.bord__tr:not(.bord__tr--tete) { opacity: 0; }
.is-vu .bord__tr:not(.bord__tr--tete) { animation: mkLigne .45s var(--ease-productive) forwards; }
.is-vu .bord__tr:nth-child(2) { animation-delay: .35s; }
.is-vu .bord__tr:nth-child(3) { animation-delay: .47s; }
.is-vu .bord__tr:nth-child(4) { animation-delay: .59s; }
.is-vu .bord__tr:nth-child(5) { animation-delay: .71s; }

@media (max-width: 52rem) {
  .hero--noir { padding-top: var(--sp-09); }
  .hero__bord { margin-top: var(--sp-08); }

  /* sur mobile, le tableau de bord déborde par la droite :
     il garde sa largeur de bureau et sort du cadre de l'écran */
  .hero__bord {
    padding-right: 0;
    overflow: visible;
  }
  .bord {
    width: 52rem;            /* largeur de bureau conservée */
    max-width: none;
    height: 26rem;
    /* le cadre est détaché du bas : arrondis des deux côtés gauches */
    border-radius: 0.875rem 0 0 0.875rem;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }

  /* le tableau de bord ne touche plus le bas de la section */
  .hero--noir { padding-bottom: var(--sp-09); }

  /* un dégradé noir estompe le mockup vers la droite */
  .hero__bord { position: relative; }
  .hero__bord::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(-90deg, #000 0%, rgba(0,0,0,.85) 35%, transparent 100%);
  }

  /* la barre latérale reste visible, c'est elle qui ancre la vue */
  .bord__cote { display: flex; flex: 0 0 11rem; }

  .bord__zone { gap: var(--sp-04); padding: var(--sp-05); }
  .bord__courbe { height: 7rem; }
  .bord__table { display: flex; }
}

@media (max-width: 30rem) {
  .bord { height: 32rem; }
  .bord__zone { padding: var(--sp-04); }
  .bord__courbe { height: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .is-vu .bord__trace,
  .is-vu .bord__aire,
  .is-vu .bord__tr { animation: none; }
  .bord__trace { stroke-dashoffset: 0; }
  .bord__aire { opacity: 1; }
  .bord__tr { opacity: 1; }
}

/* ---------- Grille des services sur l'accueil ---------- */

.services-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--cds-border-subtle);
  box-shadow: 0 0 0 1px var(--cds-border-subtle);
}
@media (min-width: 42rem) { .services-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .services-grille { grid-template-columns: repeat(3, 1fr); } }

.service-c {
  display: flex;
  flex-direction: column;
  gap: var(--sp-03);
  padding: var(--sp-06);
  background: var(--cds-background);
  text-decoration: none;
  transition: background var(--dur-fast-02) var(--ease-productive);
}
.service-c:hover { background: var(--cds-gray-10); }

.service-c__mention {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--cds-text-helper);
}
.service-c__titre {
  font-family: var(--f-titre);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--cds-gray-100);
}
.service-c__texte {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cds-text-secondary);
}
.service-c__lire {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: var(--sp-04);
  font-size: 0.875rem;
  color: var(--cds-link-primary);
}
.service-c:hover .service-c__lire svg { transform: translateX(3px); }
.service-c__lire svg { transition: transform var(--dur-fast-02) var(--ease-productive); }

/* ---------- Section « agent au travail » ---------- */

.agent {
  --a-bord: rgba(255, 255, 255, 0.09);
  --a-bord-fort: rgba(255, 255, 255, 0.16);
  --a-vert: #79e2a6;
  position: relative;
  padding: var(--sp-10) 0 var(--sp-11);
  background: #050505;
  color: #f4f4f4;
  overflow: hidden;
}

/* trame et halo de fond */
.agent::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}
.agent::after {
  content: "";
  position: absolute;
  width: 44rem;
  height: 44rem;
  left: 50%;
  top: 12%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.04), transparent 65%);
  pointer-events: none;
}

.agent__grille {
  position: relative;
  z-index: 1;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-08);
  align-items: start;
}
@media (min-width: 42rem) { .agent__grille { padding: 0 var(--grid-gutter); } }
@media (min-width: 62rem) {
  .agent__grille {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
  }
  .agent__texte-col { padding-right: var(--sp-09); }
  .agent__sortie {
    padding-left: var(--sp-09);
    border-left: 1px solid var(--a-bord);
  }
}

.agent__texte-col { position: relative; }

.agent__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-07);
  font-size: 0.9375rem;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast-02) var(--ease-productive);
}
.agent__lien:hover { border-color: #ffffff; }
.agent__lien svg { transition: transform var(--dur-fast-02) var(--ease-productive); }
.agent__lien:hover svg { transform: translateX(3px); }

.agent__titre { color: #ffffff; }
.agent__titre span { color: rgba(255, 255, 255, 0.42); }
.agent__texte {
  max-width: 46rem;
  margin-top: var(--sp-05);
  color: rgba(255, 255, 255, 0.58);
}

/* ---- la sortie de l'agent, à nu ---- */
.agent__sortie {
  position: relative;
  width: 100%;
}

.agent .article-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--sp-05); }
.agent .ai-badge {
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--a-bord);
  padding: 0.3rem 0.5rem;
  font-size: 0.625rem;
  border-radius: 0.25rem;
  letter-spacing: .08em;
}
.agent .generating { color: var(--a-vert); font-size: 0.6875rem; }

.agent .article-title {
  margin: 0 0 var(--sp-05);
  font-family: var(--f-titre);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  letter-spacing: -.035em;
  line-height: 1.22;
  font-weight: 500;
  color: #ffffff;
}
.agent .article-intro {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}
.agent .bloc { margin-top: var(--sp-06); }
.agent .bloc-h2 {
  margin: 0 0 var(--sp-03);
  font-family: var(--f-titre);
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -.025em;
}
.agent .article-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.5);
}

.agent .cursor {
  display: inline-block;
  width: 1px;
  height: 0.9em;
  background: rgba(255, 255, 255, 0.85);
  margin-left: 2px;
  vertical-align: middle;
}
.is-vu .cursor { animation: agentBlink .8s infinite; }
@keyframes agentBlink { 50% { opacity: 0; } }

/* ---- message de l'agent, sans cadre ---- */
.agent .ai-message {
  margin-top: var(--sp-07);
  padding-top: var(--sp-05);
  border-top: 1px solid var(--a-bord);
  opacity: 0;
}
.is-vu .ai-message { animation: agentMessage 1s var(--ease-productive) .6s forwards; }
@keyframes agentMessage {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.agent .ai-header {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.34);
  margin-bottom: 0.4rem;
}
.agent .ai-header strong { color: rgba(255, 255, 255, 0.85); font-weight: 500; }
.agent .ai-message p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Section « votre marque dans les IA » ---------- */

.mocks {
  --m-bord: #1d1d1d;
  padding: var(--sp-10) 0 var(--sp-11);
  background: #000000;
  color: #f5f5f5;
}

.mocks__intro {
  max-width: var(--grid-max);
  margin: 0 auto var(--sp-08);
  padding: 0 var(--grid-margin);
}
@media (min-width: 42rem) { .mocks__intro { padding: 0 var(--grid-gutter); } }

.mocks__titre { color: #ffffff; }
.mocks__titre span { color: rgba(255, 255, 255, 0.42); }
.mocks__texte {
  max-width: 46rem;
  margin-top: var(--sp-05);
  color: rgba(255, 255, 255, 0.58);
}

.mocks__liste {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  border-top: 1px solid var(--m-bord);
}
@media (min-width: 42rem) { .mocks__liste { padding: 0 var(--grid-gutter); } }

.mock {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--m-bord);
}
@media (min-width: 48rem) {
  .mock { grid-template-columns: 1fr 1fr; min-height: 22rem; }
}

.mock .visual {
  position: relative;
  overflow: hidden;
  min-width: 0;
  height: 17rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--m-bord);
}
@media (min-width: 48rem) {
  .mock .visual { height: auto; border-bottom: none; border-right: 1px solid var(--m-bord); }
}

.mock .copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-07) var(--sp-06);
}
@media (min-width: 48rem) { .mock .copy { padding: var(--sp-09) var(--sp-08); } }

.mock__h {
  margin: 0 0 var(--sp-04);
  font-family: var(--f-titre);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #ffffff;
}
.mock__p {
  margin: 0;
  max-width: 28rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #9a9a9a;
}

/* ---- autorité des citations : défilement vertical infini ---- */
.mock--citations .visual::before,
.mock--citations .visual::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 6rem;
  z-index: 3;
  pointer-events: none;
}
.mock--citations .visual::before { top: 0; background: linear-gradient(#000000, transparent); }
.mock--citations .visual::after  { bottom: 0; background: linear-gradient(transparent, #000000); }

.mention-track {
  position: absolute;
  left: 50%;
  top: 0;
  width: 19.5rem;
  max-width: calc(100% - 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transform: translate(-50%, var(--depart, 0px));
}
@media (max-width: 26rem) {
  .mention-track { left: 1.25rem; transform: translate(0, var(--depart, 0px)); }
}
.is-vu .mention-track { animation: mocksScroll 14s linear infinite; }

@keyframes mocksScroll {
  from { transform: translate(-50%, var(--depart, 0px)); }
  to   { transform: translate(-50%, calc(var(--depart, 0px) - var(--boucle, 430px))); }
}
@media (max-width: 26rem) {
  @keyframes mocksScroll {
    from { transform: translate(0, var(--depart, 0px)); }
    to   { transform: translate(0, calc(var(--depart, 0px) - var(--boucle, 430px))); }
  }
}

.mention {
  height: 4.1rem;
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.1rem;
  border: 1px solid #333333;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #101010, #050505);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  opacity: .42;
  transition: opacity .35s var(--ease-productive), border-color .35s var(--ease-productive);
}
.mention span { margin-left: auto; color: #bdbdbd; font-size: 0.8125rem; white-space: nowrap; }
.mention b { width: 3.9rem; height: 10px; border-radius: 20px; background: #3b3b3b; flex: 0 0 auto; }

/* la pastille qui passe dans la bande centrale ressort */
.mention.is-focus {
  opacity: 1;
  border-color: #eeeeee;
  color: #ffffff;
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.10);
}

/* ---- vérification : carrousel horizontal infini ---- */
.mock--verif .visual.carousel {
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  overflow: hidden;
}
.mock--verif .visual.carousel::before,
.mock--verif .visual.carousel::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 5rem;
  z-index: 2;
  pointer-events: none;
}
.mock--verif .visual.carousel::before { left: 0;  background: linear-gradient(90deg, #000000, transparent); }
.mock--verif .visual.carousel::after  { right: 0; background: linear-gradient(-90deg, #000000, transparent); }

.claim-track {
  display: flex;
  gap: 1.4rem;
  padding-left: 1.4rem;
  will-change: transform;
}
.is-vu .claim-track { animation: mocksDefile 26s linear infinite; }
@keyframes mocksDefile {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--pas, 75.6rem) * -1)); }
}

.claim-card {
  width: 17.5rem;
  min-width: 17.5rem;
  min-height: 7.25rem;
  padding: 1.05rem 1.1rem;
  border: 1px solid #2d2d2d;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #111111, #050505);
  box-shadow: 0 10px 30px #000000;
}
.claim-top { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; }
.claim-top strong { font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.claim-card.ground .claim-top strong { color: #ffffff; }
.claim-card p {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #9a9a9a;
}
.claim-card.ground { border-color: #555555; }

@media (prefers-reduced-motion: reduce) {
  .is-vu .mention-track,
  .is-vu .claim-track { animation: none; }
  .mention { opacity: 1; }
}

/* ---------- Section « un agent pour vos tâches » ---------- */

.taches {
  display: grid;
  grid-template-columns: 1fr;
  background: #000000;
  color: #f4f4f4;
}
@media (min-width: 56rem) {
  .taches { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* --- colonne claire --- */
.taches__clair {
  display: flex;
  align-items: center;
  padding: var(--sp-10) var(--grid-margin);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 42rem) { .taches__clair { padding: var(--sp-10) var(--grid-gutter); } }
@media (min-width: 56rem) {
  .taches__clair {
    /* le texte démarre sur la gouttière de la grille, comme le logo de l'en-tête */
    padding: var(--sp-11) var(--sp-09) var(--sp-11) var(--grid-gutter);
    justify-content: flex-start;
    align-items: flex-start;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  /* sur desktop, le texte suit le défilement pendant qu'on lit les tâches */
  .taches__contenu {
    position: sticky;
    top: 7.5rem;   /* en-tête 3rem + barre de sections 3rem + air */
  }
}

/* au-delà de la largeur maximale, la grille se centre : le texte suit */
@media (min-width: 99rem) {
  .taches__clair {
    padding-left: calc((100vw - var(--grid-max)) / 2 + var(--grid-gutter));
  }
}

.taches__contenu { max-width: 32rem; width: 100%; }

.taches__sur {
  margin: 0 0 var(--sp-04);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cds-blue-40);
}
.taches__titre { color: #ffffff; }
.taches__texte { margin-top: var(--sp-05); color: rgba(255, 255, 255, 0.58); }
.taches__cta { margin-top: var(--sp-07); }
.taches .cds-btn--primary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.taches .cds-btn--primary:hover { background: rgba(255, 255, 255, 0.2); }

/* --- colonne sombre : la maquette --- */
.taches__sombre {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-09) var(--grid-margin);
  background: #000000;
}
@media (min-width: 42rem) { .taches__sombre { padding: var(--sp-10) var(--grid-gutter); } }

.taches__sombre .toast {
  position: absolute;
  right: 1.75rem;
  top: 1.75rem;
  z-index: 2;
  padding: 0.7rem 0.9rem;
  border: 1px solid #242424;
  border-radius: 0.75rem;
  background: #080808;
  color: #aaaaaa;
  font-size: 0.75rem;
  opacity: 0;
}
.taches__sombre .toast strong { color: #eeeeee; font-weight: 500; }
.is-vu .toast { animation: tachesToast 7s ease infinite; }
@keyframes tachesToast {
  0%, 65%, 100% { opacity: 0; transform: translateY(-8px); }
  70%, 92%      { opacity: 1; transform: none; }
}

.agent-panneau {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 35rem;
}

.task-list { display: flex; flex-direction: column; gap: 1.1rem; }

/* une ligne verticale relie les tâches, derrière les pastilles d'état */
.task + .task::before {
  content: "";
  position: absolute;
  left: 2.45rem;
  top: -1.1rem;
  width: 1px;
  height: 1.1rem;
  background: rgba(255, 255, 255, 0.16);
}
/* la liste ne bouge pas : les tâches apparaissent, puis restent en place */

.task {
  position: relative;
  height: 3.9rem;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0 1.25rem;
  border: 1px solid #282828;
  border-radius: 0.95rem;
  background: #000000;
  color: #d9d9d9;
  letter-spacing: -.01em;
  opacity: 0;
}
.is-vu .task { animation: tachesIn .5s var(--ease-productive) both; }
.is-vu .task:nth-child(1) { animation-delay: .10s; }
.is-vu .task:nth-child(2) { animation-delay: .25s; }
.is-vu .task:nth-child(3) { animation-delay: .40s; }
.is-vu .task:nth-child(4) { animation-delay: .55s; }
.is-vu .task:nth-child(5) { animation-delay: .70s; }
@keyframes tachesIn { from { opacity: 0; } to { opacity: 1; } }

/* le contenu passe devant le cadre et la lueur */
.task > .num, .task > .status, .task > .label, .task > .badge { position: relative; z-index: 3; }

.task .num { width: 1.25rem; flex: 0 0 auto; color: #777777; font-size: 0.9375rem; }
.task .status {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  border: 1.5px solid #444444;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
/* la tâche faite : une coche verte seule, sans cercle */
.task .status.done {
  border: none;
  box-shadow: none;
}
.task .status.done::after {
  content: "";
  width: 0.62rem;
  height: 0.32rem;
  margin-top: -0.14rem;
  border-left: 2px solid #00e676;
  border-bottom: 2px solid #00e676;
  transform: rotate(-45deg);
}
.task .status.work {
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.75);
}
.is-vu .status.work { animation: tachesTourne .9s linear infinite; }
@keyframes tachesTourne { to { transform: rotate(360deg); } }

/* la tâche en cours : une lueur fait le tour du cadre */
.task--charge { border-color: transparent; background-clip: padding-box; }
.task__barre {
  position: absolute;
  inset: -1px;
  border-radius: 0.95rem;
  padding: 1px;
  pointer-events: none;
  /* au-dessus du cadre ::after, qui la recouvrirait sinon */
  z-index: 2;
  /* le dégradé conique tourne ; le masque n'en garde que le contour */
  background: conic-gradient(
    from var(--tour, 0deg),
    transparent 0deg,
    transparent 250deg,
    rgba(255, 255, 255, 0.85) 320deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
/* le cadre reste visible sous la lueur */
.task--charge::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 0.95rem;
  box-shadow: inset 0 0 0 1px #282828;
  pointer-events: none;
  z-index: 1;
}
.is-vu .task__barre { animation: tachesTour 2.6s linear infinite; }

@property --tour {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes tachesTour {
  from { --tour: 0deg; }
  to   { --tour: 360deg; }
}

/* repli pour les navigateurs sans @property : la lueur pivote entière */
@supports not (background: conic-gradient(from var(--tour, 0deg), red, blue)) {
  .is-vu .task__barre { animation: tachesTourSimple 2.6s linear infinite; }
  @keyframes tachesTourSimple {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
}

.task .label {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task .badge {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: #777777;
  border: 1px solid #2b2b2b;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
}

.task.current {
  border-color: #626262;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.08), 0 0 32px rgba(255,255,255,.03);
}
.task.current .label { color: #ffffff; }
.task.current .badge { color: #bdbdbd; }


.prompt {
  margin-top: 1.6rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.1rem;
  border: 1px solid #272727;
  border-radius: 1.05rem;
  background: #080808;
  box-shadow: 0 12px 35px #000000;
}
.prompt-icon,
.prompt .send {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  border: 1px solid #303030;
  border-radius: 0.625rem;
  display: grid;
  place-items: center;
  color: #aaaaaa;
}
.prompt .send { margin-left: auto; }
.prompt-text {
  color: #777777;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .task { height: 3.6rem; padding: 0 0.9rem; gap: 0.7rem; }
  .task .label { font-size: 0.875rem; }
  .task .badge { display: none; }
  .taches__sombre .toast { right: 1rem; top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .is-vu .task-list,
  .is-vu .task,
  .is-vu .toast,
  .is-vu .status.work,
  .is-vu .task__barre { animation: none; }
  .task { opacity: 1; }
  .taches__sombre .toast { opacity: 1; }
}

/* ---------- FAQ pleine largeur sur l'accueil ---------- */

.faq-large {
  padding: var(--sp-10) 0 var(--sp-11);
  background: var(--cds-background);
}

.faq-large__tete {
  max-width: var(--grid-max);
  margin: 0 auto var(--sp-08);
  padding: 0 var(--grid-margin);
}
@media (min-width: 42rem) { .faq-large__tete { padding: 0 var(--grid-gutter); } }

.faq-large__titre { color: var(--cds-gray-100); }
.faq-large__titre span { color: var(--cds-gray-50); }

.faq-large__liste {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  border-top: 1px solid var(--cds-border-subtle);
}
@media (min-width: 42rem) { .faq-large__liste { padding: 0 var(--grid-gutter); } }

.faq-l__item { border-bottom: 1px solid var(--cds-border-subtle); }
.faq-l__item h3 { margin: 0; }

.faq-l__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-06);
  padding: var(--sp-06) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  /* même typographie que .trio__h et .mock__h, sans variation de largeur */
  font-family: var(--f-titre);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--cds-gray-100);
  transition: color var(--dur-fast-02) var(--ease-productive);
}
/* le gris de survol ne vaut qu'au pointeur fin : sur mobile le :hover
   resterait collé après le tap et la question passerait en gris */
@media (hover: hover) and (pointer: fine) {
  .faq-l__btn:hover { color: var(--cds-text-secondary); }
}
.faq-l__btn svg {
  flex: 0 0 auto;
  color: var(--cds-text-secondary);
  transition: transform var(--dur-moderate-01) var(--ease-productive);
}
.faq-l__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* le repli se fait par la grille : le contenu reste dans le DOM
   pour que le rich snippet FAQ de Google le voie */
.faq-l__panel.js-pret {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-moderate-01) var(--ease-productive);
}
.faq-l__panel.js-pret > .faq-l__inner { overflow: hidden; }
.faq-l__panel.is-open { grid-template-rows: 1fr; }

.faq-l__inner p {
  max-width: 52rem;
  margin: 0;
  padding: 0 0 var(--sp-06);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
}
.faq-l__panel.js-pret:not(.is-open) .faq-l__inner p { padding-bottom: 0; }


/* ---------- Section en trois colonnes ---------- */

.trio {
  position: relative;
  padding: var(--sp-10) 0 var(--sp-11);
  background: #050505;
  color: #f4f4f4;
  overflow: hidden;
}
/* trame de points en fond */
.trio::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
}

.trio__grille {
  position: relative;
  z-index: 1;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-08);
}
@media (min-width: 42rem) { .trio__grille { padding: 0 var(--grid-gutter); } }
/* en colonne, le séparateur passe à l'horizontale */
@media (max-width: 56rem) {
  .trio__col + .trio__col {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: var(--sp-08);
  }
}

@media (min-width: 56rem) {
  .trio__grille { grid-template-columns: repeat(3, 1fr); gap: 0; }
  /* séparateurs pleins entre les colonnes */
  .trio__col + .trio__col { border-left: 1px solid rgba(255, 255, 255, 0.14); }
  .trio__col { padding: 0 var(--sp-07); }
}

.trio__col { text-align: center; }

.trio__visuel {
  position: relative;
  height: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-07);
}

.trio__h {
  margin: 0 0 var(--sp-04);
  font-family: var(--f-titre);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #ffffff;
}
.trio__p {
  margin: 0 auto;
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #9a9a9a;
}

/* ---- 1. barre de progression fine ---- */
.jauge-f { width: 100%; max-width: 18rem; }
.jauge-f__val {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #ffffff;
}
.jauge-f__val em { font-style: normal; font-variant-numeric: tabular-nums; }
.jauge-f__val i { font-style: normal; font-size: 1.5rem; color: rgba(255, 255, 255, 0.62); }
.jauge-f__lib {
  display: block;
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: #9a9a9a;
}
.jauge-f__piste {
  margin-top: var(--sp-06);
  display: block;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.jauge-f__piste i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: #a6e34d;
  box-shadow: 0 0 14px rgba(166, 227, 77, 0.45);
}
.is-vu .jauge-f__piste i { animation: trioJauge 1.6s var(--ease-productive) .2s forwards; }
@keyframes trioJauge { to { width: 72%; } }

/* ---- 2. fiche de configuration ---- */
.fiche {
  width: 100%;
  max-width: 20rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #131313, #0a0a0a);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .7);
  text-align: left;
  overflow: hidden;
}
.fiche__tete {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
  color: #ffffff;
}
.fiche__ico {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}
.fiche__ico--nu { background: none; border-radius: 0; }
.fiche__ico svg { width: 0.75rem; height: 0.75rem; display: block; }

.fiche__l {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-05);
  padding: 0.6rem 0.9rem;
  font-size: 0.8125rem;
  color: #777777;
}
.fiche__l + .fiche__l { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.fiche__l b {
  font-weight: 400;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
}
.fiche__l b.bleu  { background: rgba(120, 169, 255, 0.16); color: #9baeff; }
.fiche__l b.jaune { background: rgba(214, 232, 96, 0.16); color: #d6e860; }

/* ---- 3. logo en orbite ---- */
.orbite { position: relative; width: 14rem; height: 14rem; }

.orbite__cercle {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbite__cercle--1 { width: 9.5rem;  height: 9.5rem; }
.orbite__cercle--2 { width: 13.5rem; height: 13.5rem; }

.orbite__coeur {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  display: grid;
  place-items: center;
  border-radius: 1.35rem;
  background: #0a0a0a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 40px rgba(255, 255, 255, 0.05);
  color: #ffffff;
}
.orbite__coeur svg { width: 2rem; height: 2rem; display: block; }

.orbite__sat {
  position: absolute;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.orbite__sat svg { width: 1.3rem; height: 1.3rem; display: block; }
.orbite__sat--1 { top: 0.2rem;   right: 1.6rem; }
.orbite__sat--2 { top: 3.4rem;   left: 0; }
.orbite__sat--3 { bottom: 2rem;  left: 2rem; }
.orbite__sat--4 { bottom: 3.2rem; right: -0.1rem; }

.is-vu .orbite__sat { animation: trioSat 4s var(--ease-productive) infinite; }
.is-vu .orbite__sat--2 { animation-delay: .9s; }
.is-vu .orbite__sat--3 { animation-delay: 1.8s; }
.is-vu .orbite__sat--4 { animation-delay: 2.7s; }
@keyframes trioSat {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .is-vu .jauge-f__piste i,
  .is-vu .fil i,
  .is-vu .orbite__sat { animation: none; }
  .jauge-f__piste i { width: 72%; }
}



.hero--noir { position: relative; }
.hero__centre,
.hero__bord { position: relative; z-index: 1; }


/* ---------- Pages service : en-tête de la section en trois colonnes ---------- */

.trio__tete {
  position: relative;
  z-index: 1;
  max-width: var(--grid-max);
  margin: 0 auto var(--sp-08);
  padding: 0 var(--grid-margin);
}
@media (min-width: 42rem) { .trio__tete { padding: 0 var(--grid-gutter); } }
.trio__titre { color: #ffffff; }
.trio__intro {
  max-width: 46rem;
  margin-top: var(--sp-05);
  color: rgba(255, 255, 255, 0.58);
}

/* ---- mockup d'étape ---- */
.etape-m {
  position: relative;
  width: 11rem;
  padding: 1.25rem;
  border-radius: 0.95rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  text-align: left;
}
.etape-m__num {
  display: block;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.22);
  margin-bottom: 0.9rem;
}
.etape-m__barres { display: flex; flex-direction: column; gap: 0.45rem; }
.etape-m__barres i {
  display: block;
  height: 5px;
  width: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.is-vu .etape-m__barres i { animation: etapeBarre .7s var(--ease-productive) forwards; }
.is-vu .etape-m__barres i:nth-child(1) { animation-delay: .15s; }
.is-vu .etape-m__barres i:nth-child(2) { animation-delay: .3s; }
.is-vu .etape-m__barres i:nth-child(3) { animation-delay: .45s; }
@keyframes etapeBarre { to { width: var(--l); } }

.etape-m__coche {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18);
}
.etape-m__coche::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.38rem;
  width: 0.42rem;
  height: 0.22rem;
  border-left: 1.6px solid transparent;
  border-bottom: 1.6px solid transparent;
  transform: rotate(-45deg);
}
.is-vu .etape-m__coche { animation: etapeCoche .35s var(--ease-productive) .75s forwards; }
.is-vu .etape-m__coche::after { animation: etapeTrait .25s var(--ease-productive) .85s forwards; }
@keyframes etapeCoche { to { box-shadow: inset 0 0 0 1.5px rgba(0, 230, 118, .6); } }
@keyframes etapeTrait { to { border-left-color: #00e676; border-bottom-color: #00e676; } }

/* ---------- Pages service : section outils ---------- */

.atelier {
  padding: var(--sp-10) 0 var(--sp-11);
  background: var(--cds-background);
}

.atelier__grille {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-08);
  align-items: center;
}
@media (min-width: 42rem) { .atelier__grille { padding: 0 var(--grid-gutter); } }
@media (min-width: 56rem) {
  .atelier__grille { grid-template-columns: minmax(18rem, 34%) 1fr; gap: var(--sp-09); }
}

.atelier__sur {
  margin: 0 0 var(--sp-04);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cds-text-helper);
}
.atelier__titre { color: var(--cds-gray-100); }
.atelier__p { margin-top: var(--sp-05); color: var(--cds-text-secondary); }

.atelier__jetons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-04);
}
.atelier__jeton {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border-radius: 1.1rem;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--cds-border-subtle);
  color: var(--cds-gray-70);
  opacity: 0;
  transform: translateY(8px);
  transition: color var(--dur-fast-02) var(--ease-productive),
              box-shadow var(--dur-fast-02) var(--ease-productive);
}
.atelier__jeton svg { width: 1.75rem; height: 1.75rem; }
.atelier__jeton:hover {
  color: var(--cds-gray-100);
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.2);
}

.is-vu .atelier__jeton { animation: atelierIn .45s var(--ease-productive) forwards; }
.is-vu .atelier__jeton:nth-child(1) { animation-delay: .05s; }
.is-vu .atelier__jeton:nth-child(2) { animation-delay: .11s; }
.is-vu .atelier__jeton:nth-child(3) { animation-delay: .17s; }
.is-vu .atelier__jeton:nth-child(4) { animation-delay: .23s; }
.is-vu .atelier__jeton:nth-child(5) { animation-delay: .29s; }
.is-vu .atelier__jeton:nth-child(6) { animation-delay: .35s; }
.is-vu .atelier__jeton:nth-child(7) { animation-delay: .41s; }
.is-vu .atelier__jeton:nth-child(8) { animation-delay: .47s; }
.is-vu .atelier__jeton:nth-child(9) { animation-delay: .53s; }
@keyframes atelierIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .is-vu .etape-m__barres i,
  .is-vu .etape-m__coche,
  .is-vu .atelier__jeton { animation: none; }
  .etape-m__barres i { width: var(--l); }
  .atelier__jeton { opacity: 1; transform: none; }
}

/* ---------- FAQ en fond noir (accueil) ---------- */

.faq-large--noir {
  background: #000000;
  color: #f4f4f4;
}
.faq-large--noir .faq-large__titre { color: #ffffff; }
.faq-large--noir .faq-large__titre span { color: rgba(255, 255, 255, 0.42); }
.faq-large--noir .section__intro { color: rgba(255, 255, 255, 0.58); }

/* le descriptif de la FAQ, au gabarit des autres sections de l'accueil */
.faq-large__intro {
  max-width: 46rem;
  margin-top: var(--sp-05);
}
.faq-large--noir .faq-large__intro { color: rgba(255, 255, 255, 0.58); }

.faq-large--noir .faq-large__liste { border-top-color: rgba(255, 255, 255, 0.12); }
.faq-large--noir .faq-l__item { border-bottom-color: rgba(255, 255, 255, 0.12); }

.faq-large--noir .faq-l__btn { color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .faq-large--noir .faq-l__btn:hover { color: rgba(255, 255, 255, 0.62); }
}
.faq-large--noir .faq-l__btn svg { color: rgba(255, 255, 255, 0.5); }

.faq-large--noir .faq-l__inner p { color: rgba(255, 255, 255, 0.62); }

/* ---------- FAQ en deux colonnes (accueil) ---------- */

.faq-large__grille {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-07);
}
@media (min-width: 42rem) { .faq-large__grille { padding: 0 var(--grid-gutter); } }
@media (min-width: 56rem) {
  .faq-large__grille {
    grid-template-columns: minmax(16rem, 30%) 1fr;
    gap: var(--sp-09);
    align-items: start;
  }
  /* le titre suit le défilement pendant qu'on parcourt les questions */
  .faq-large__tete { position: sticky; top: 7.5rem; }
}

/* les deux blocs perdent leurs marges propres : la grille s'en charge */
.faq-large__grille .faq-large__tete,
.faq-large__grille .faq-large__liste {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* la question reprend exactement la typographie de .mock__h / .trio__h */
.faq-large--noir .faq-l__btn {
  font-family: var(--f-titre);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #ffffff;
}

/* la réponse reprend celle des paragraphes */
.faq-large--noir .faq-l__inner p {
  max-width: 44rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #9a9a9a;
}

/* ---------- Accueil : fond général noir ---------- */

.page-noire {
  background: #000000;
  color: #f4f4f4;
}

/* les sections claires de l'accueil suivent le fond */
.page-noire .taches__clair { background: transparent; }
.page-noire .trio { background: #000000; }
.page-noire .mocks { background: #000000; }
.page-noire .faq-large--noir { background: #000000; }

/* ---------- Page de connexion : éléments sur fond sombre ---------- */

.page-login .login__titre { color: #ffffff; }

/* le champ suit le fond noir */
.page-login .cds-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.page-login .cds-input::placeholder { color: rgba(255, 255, 255, 0.38); }
.page-login .cds-input:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}
.page-login .cds-label-01 { color: rgba(255, 255, 255, 0.5); }

.page-login .login__ligne .cds-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.page-login .login__ligne .cds-btn:hover { background: rgba(255, 255, 255, 0.2); }

.page-login .login__mentions { color: rgba(255, 255, 255, 0.42); }

/* l'encart d'aide passe en sombre */
.page-login .login__aide {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.page-login .login__aide strong { color: #ffffff; }
.page-login .login__aide span { color: rgba(255, 255, 255, 0.58); }
.page-login .login__aide .cds-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.page-login .login__aide .cds-btn:hover { background: rgba(255, 255, 255, 0.2); }

.page-login .login__bloc a { color: #ffffff; text-decoration: underline; }
.page-login .login__logo { color: #ffffff; }

/* ---------- Page de connexion : textes au format du héros ---------- */

.page-login .login__titre {
  font-family: var(--f-titre);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #ffffff;
}
.page-login .login__intro {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.62);
}

/* ---------- Héros : le logo n'apparaît que sur mobile ---------- */

.hero__marque-logo {
  display: none;
  width: clamp(2.5rem, 2rem + 3vw, 3.5rem);
  height: auto;
  margin: 0 auto var(--sp-05);
  color: #ffffff;
}

@media (max-width: 42rem) {
  .hero__marque-logo { display: block; }
  .hero__titre-c { display: block; }
}

/* ---------- Apparition du logo sur mobile : balayage en diagonale ---------- */

@media (max-width: 42rem) {
  .hero__marque-logo {
    /* le tracé se révèle du coin haut-gauche vers le coin bas-droite,
       sans que le logo se déplace */
    -webkit-mask-image: linear-gradient(135deg, #000 0 35%, transparent 65% 100%);
            mask-image: linear-gradient(135deg, #000 0 35%, transparent 65% 100%);
    -webkit-mask-size: 300% 300%;
            mask-size: 300% 300%;
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    animation: logoBalayage 1.4s var(--ease-productive) 0.2s forwards;
  }
}

@keyframes logoBalayage {
  from { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
  to   { -webkit-mask-position: 0% 0%;     mask-position: 0% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__marque-logo {
    -webkit-mask-image: none;
            mask-image: none;
    animation: none;
  }
}



/* ---------- Page de connexion : carrousel à carte centrale ---------- */

.login__visuel { background: #000000; }

.login__mock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.temo {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* le glissement au doigt reste possible */
  touch-action: pan-y;
  cursor: grab;
}
.temo.est-tire { cursor: grabbing; }

/* les cartes s'effacent dans le noir sur les bords */
.temo::before,
.temo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  z-index: 3;
  pointer-events: none;
}
.temo::before { left: 0;  background: linear-gradient(90deg, #000 0%, transparent 100%); }
.temo::after  { right: 0; background: linear-gradient(-90deg, #000 0%, transparent 100%); }

.temo__piste {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  will-change: transform;
}

.temo__carte {
  flex: 0 0 auto;
  width: 19rem;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.6rem;
  border-radius: 1.1rem;
  background: #0d0d0d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  /* la carte du centre est plus grande : piloté en JS */
  transform: scale(0.86);
  opacity: 0.35;
  transition: transform 420ms var(--ease-productive),
              opacity 420ms var(--ease-productive),
              box-shadow 420ms var(--ease-productive);
}

.temo__carte.est-active {
  transform: scale(1);
  opacity: 1;
  background: #111111;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18),
              0 24px 60px rgba(0, 0, 0, 0.7);
}

.temo__texte {
  margin: 0;
  font-family: var(--f-titre);
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
}

.temo__meta {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.temo__meta strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
}
.temo__meta span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 80rem) {
  .temo__carte { width: 22rem; min-height: 16rem; }
}


/* ---------- Menu mobile : accordéon des services ---------- */

.hdr__panel-cadre { position: relative; }

/* le bouton de l'accordéon suit le gabarit des liens */
.hdr__acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-05);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--sp-05);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  color: var(--cds-gray-10);
  transition: opacity 260ms var(--ease-productive),
              transform 260ms var(--ease-productive);
}
.hdr__acc-btn svg {
  flex: 0 0 auto;
  opacity: .55;
  transition: transform var(--dur-moderate-01) var(--ease-productive);
}
.hdr__acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.hdr__acc-btn:focus { outline: none; }
.hdr__acc-btn:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: -2px; }

/* le repli se fait par la grille : le contenu reste dans le DOM */
.hdr__acc-panneau.js-pret {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-moderate-01) var(--ease-productive);
}
.hdr__acc-panneau.js-pret > .hdr__acc-inner { overflow: hidden; }
.hdr__acc-panneau.is-open { grid-template-rows: 1fr; }

/* un service du sous-menu, avec son icône */
.hdr__panel .hdr__sous {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  /* 44px : le minimum pour qu'un doigt vise sans erreur */
  min-height: 2.75rem;
  padding: var(--sp-03) var(--sp-05) var(--sp-03) var(--sp-06);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
}
.hdr__sous-ico {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.72);
}
.hdr__sous-ico svg { width: 1.15rem; height: 1.15rem; display: block; }

.hdr__sous--tous {
  margin-top: var(--sp-03);
  color: #ffffff;
}
.hdr__sous--tous .hdr__sous-ico { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

/* l'entrée en cascade englobe le bouton de l'accordéon */
.js-anime .hdr__panel .hdr__acc-btn { opacity: 0; transform: translateY(-8px); }
.hdr__panel.is-open .hdr__acc-btn,
.js-anime .hdr__panel.is-open .hdr__acc-btn { opacity: 1; transform: translateY(0); }
.hdr__panel:not(.is-open) .hdr__acc-btn { transition-delay: 0s; transition-duration: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .hdr__acc-panneau.js-pret,
  .hdr__acc-btn svg { transition: none; }
}

/* ---------- Page de documentation ---------- */

.doc {
  max-width: 52rem;
  padding: var(--sp-09) var(--grid-margin) var(--sp-10);
}
/* .lecture__corps ajoute déjà sa marge : sans cela le texte est décalé
   de 16px par rapport au logo de l'en-tête. Son padding haut est retiré
   aussi, sinon une bande grise sépare la barre sticky du fond noir. */
.lecture__corps:has(.doc) { padding-left: 0; padding-right: 0; padding-top: 0; }
@media (min-width: 66rem) {
  /* la page s'aligne sur l'en-tête des deux côtés : même gouttière à gauche
     qu'à droite (le padding gauche de 48px datait de la colonne latérale) */
  .doc {
    max-width: none;
    padding: var(--sp-10) var(--grid-gutter) var(--sp-12);
  }
}

/* Au-delà de --grid-max, l'en-tête se centre et s'arrête avant le bord.
   La marge droite de la doc grandit d'autant pour rester alignée sur lui.
   La colonne du sommaire occupe déjà la gauche, seule la droite est concernée. */
@media (min-width: 99rem) {
  .doc {
    padding-left: calc((100vw - var(--grid-max)) / 2 + var(--grid-gutter));
    padding-right: calc((100vw - var(--grid-max)) / 2 + var(--grid-gutter));
  }
}

/* --- en-tête --- */

.doc__sur {
  margin: 0 0 var(--sp-03);
  font-family: var(--f-texte);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
}

.doc__h1 {
  margin: 0 0 var(--sp-06);
  font-family: var(--f-titre);
  /* même taille que le H1 de l'accueil */
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--cds-gray-100);
}

.doc__chapo {
  margin: 0 0 var(--sp-05);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
}
.doc__chapo:last-of-type { margin-bottom: 0; }

.doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-04);
  margin-top: var(--sp-07);
}

/* sur fond clair, la pastille pleine s'inverse */
.doc .cds-btn--plein {
  background: var(--cds-gray-100);
  color: #ffffff;
}
.doc .cds-btn--plein:hover { background: #2a2a2a; color: #ffffff; }

/* --- sections --- */

.doc__section {
  margin-top: var(--sp-10);
  padding-top: var(--sp-08);
  border-top: 1px solid var(--cds-border-subtle);
  scroll-margin-top: 5rem;
}

.doc__h2 {
  margin: 0 0 var(--sp-06);
  font-family: var(--f-titre);
  font-size: 1.625rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--cds-gray-100);
}

.doc__h3 {
  margin: var(--sp-07) 0 var(--sp-04);
  font-family: var(--f-titre);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cds-gray-100);
}

.doc__p {
  margin: 0 0 var(--sp-05);
  font-family: var(--f-texte);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cds-text-secondary);
}

.doc__p code, .doc__liste code, .doc__detail dd code {
  padding: 0.125em 0.375em;
  border-radius: 4px;
  background: rgba(22, 22, 22, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  color: var(--cds-gray-100);
}

/* --- listes --- */

.doc__liste {
  margin: 0 0 var(--sp-06);
  padding: 0;
  list-style: none;
}
.doc__liste li {
  position: relative;
  padding-left: var(--sp-06);
  margin-bottom: var(--sp-04);
  font-family: var(--f-texte);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
}
.doc__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cds-gray-50);
}

/* --- liste de détails (terme + définition) --- */

.doc__details {
  margin: 0 0 var(--sp-06);
  border-top: 1px solid var(--cds-border-subtle);
}
.doc__detail {
  padding: var(--sp-05) 0;
  border-bottom: 1px solid var(--cds-border-subtle);
}
@media (min-width: 50rem) {
  .doc__detail {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: var(--sp-06);
  }
}
.doc__detail dt {
  font-family: var(--f-titre);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--cds-gray-100);
}
.doc__detail dd {
  margin: var(--sp-02) 0 0;
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
}
@media (min-width: 50rem) {
  .doc__detail dd { margin-top: 0; }
}

/* --- encadrés --- */

.doc__note {
  margin: 0 0 var(--sp-06);
  padding: var(--sp-05) var(--sp-06);
  border-radius: 10px;
  border: 1px solid var(--cds-border-subtle);
  border-left: 3px solid var(--cds-gray-50);
  background: rgba(22, 22, 22, 0.02);
}
.doc__note--attention {
  border-left-color: #c96a1f;
  background: rgba(201, 106, 31, 0.05);
}
.doc__note-t {
  margin: 0 0 var(--sp-03);
  font-family: var(--f-titre);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--cds-gray-100);
}
.doc__note-p {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
}

/* --- grille de cartes --- */

.doc__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-05);
  margin: 0 0 var(--sp-06);
}
@media (min-width: 40rem) {
  .doc__grille { grid-template-columns: repeat(2, 1fr); }
}
.doc__carte {
  padding: var(--sp-05);
  border: 1px solid var(--cds-border-subtle);
  border-radius: 10px;
  background: #ffffff;
}
.doc__carte-t {
  margin: 0 0 var(--sp-03);
  font-family: var(--f-titre);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--cds-gray-100);
}
.doc__carte-p {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
}

/* --- blocs de code --- */

.doc__code {
  margin: 0 0 var(--sp-06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  overflow: hidden;
  background: #000000;
}
.doc__code-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-04);
  padding: var(--sp-03) var(--sp-05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.doc__code-nom {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.62);
}
.doc__code-copie {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-family: var(--f-texte);
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast-02) var(--ease-productive);
}
.doc__code-copie:hover { background: rgba(255, 255, 255, 0.2); }
.doc__code pre {
  margin: 0;
  padding: var(--sp-05);
  overflow-x: auto;
}
.doc__code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  white-space: pre;
}

/* --- tableau --- */

.doc__table-hote {
  margin: 0 0 var(--sp-06);
  overflow-x: auto;
  border: 1px solid var(--cds-border-subtle);
  border-radius: 10px;
}
.doc__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-texte);
  font-size: 0.9375rem;
}
.doc__table th {
  text-align: left;
  padding: var(--sp-04) var(--sp-05);
  border-bottom: 1px solid var(--cds-border-subtle);
  background: rgba(22, 22, 22, 0.03);
  font-family: var(--f-titre);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--cds-gray-100);
  white-space: nowrap;
}
.doc__table td {
  padding: var(--sp-04) var(--sp-05);
  border-bottom: 1px solid var(--cds-border-subtle);
  line-height: 1.55;
  color: var(--cds-text-secondary);
  vertical-align: top;
}
.doc__table tr:last-child td { border-bottom: none; }

/* --- pied de page de la doc --- */

.doc__fin {
  margin-top: var(--sp-10);
  padding-top: var(--sp-08);
  border-top: 1px solid var(--cds-border-subtle);
}

/* ---------- Doc pleine largeur, sans colonne latérale ---------- */

.lecture--pleine { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 66rem) {
  .lecture--pleine { grid-template-columns: minmax(0, 1fr); }
}
.lecture--pleine .doc .fil--clair { margin-bottom: var(--sp-07); }

/* ---------- Sommaire en encart ---------- */

.tocd {
  margin: 0 0 var(--sp-09);
  padding: var(--sp-06) var(--sp-07);
  background: #ffffff;
  border: 1px solid var(--cds-border-subtle);
  border-radius: 12px;
}

.tocd__l {
  margin: 0 0 var(--sp-05);
  font-family: var(--f-texte);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cds-gray-50);
}

.tocd__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
/* deux colonnes dès qu'il y a la place : la liste reste courte à l'œil */
@media (min-width: 46rem) {
  .tocd__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-07);
  }
}

/* un filet entre les entrées ; en deux colonnes, la remplissage se fait
   par ligne, donc les deux premières ouvrent chacune leur colonne */
.tocd__liste li { border-top: 1px solid var(--cds-border-subtle); }
.tocd__liste li:first-child { border-top: none; }
@media (min-width: 46rem) {
  .tocd__liste li:nth-child(2) { border-top: none; }
}

.tocd__lien {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  padding: var(--sp-04) 0;
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--cds-text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast-02) var(--ease-productive);
}
@media (hover: hover) and (pointer: fine) {
  .tocd__lien:hover { color: var(--cds-gray-100); }
  .tocd__lien:hover svg { transform: translateX(2px); color: var(--cds-gray-100); }
}

.tocd__n {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--cds-gray-50);
}

.tocd__t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tocd__lien svg {
  flex: 0 0 auto;
  color: var(--cds-gray-50);
  transition: transform var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}

.tocd__lien.is-active { color: var(--cds-gray-100); }
.tocd__lien.is-active .tocd__n { color: var(--cds-gray-100); }

/* les ancres se posent sous l'en-tête collant */
.doc__section, .feats { scroll-margin-top: 4.5rem; }

/* ---------- Bloc texte + code côte à côte ---------- */

.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-06);
  margin: 0 0 var(--sp-07);
  align-items: start;
}
@media (min-width: 60rem) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-08); }
}
.duo__texte > .doc__p:last-child { margin-bottom: 0; }
.duo__code { margin-bottom: 0; }

/* le titre rejoint la colonne texte : il défile avec elle */
.duo__h2 { margin-top: 0; }

/* Sur desktop, titre et texte suivent le défilement pendant qu'on parcourt
   le code. Le collage démarre sous l'en-tête et la barre de sections. */
@media (min-width: 60rem) {
  .duo__texte {
    position: sticky;
    top: calc(var(--sous-hdr, 3rem) + 4.5rem);
  }
}

/* sans hauteur limitée, une section courte n'a rien à faire défiler :
   le sticky reste alors sans effet visible, ce qui est le comportement voulu */

/* ---------- Coloration syntaxique ---------- */

.doc__code-copie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.doc__code-copie:hover { background: rgba(255, 255, 255, 0.18); }
.doc__code-copie.est-copie { background: rgba(0, 230, 118, 0.22); }

.doc__code code i { font-style: normal; }

/* balises Liquid, expressions, HTML, commentaires */
.doc__code .c-liq { color: #9ecbff; }
.doc__code .c-exp { color: #7ee2b8; }
.doc__code .c-bal { color: #8fd3ff; }
.doc__code .c-com { color: rgba(255, 255, 255, 0.38); font-style: italic; }
.doc__code .c-txt { color: #f2a08a; }
.doc__code .c-mot { color: #d6a6ff; }

/* ---------- Héros de la page thème ---------- */

.thero {
  background: #000000;
  color: #ffffff;
  overflow: hidden;
}

.thero__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  /* mêmes marges que .hdr__inner, pour s'aligner sur l'en-tête */
  padding: var(--sp-10) var(--grid-margin) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-08);
  align-items: center;
}
@media (min-width: 42rem) {
  .thero__inner { padding: var(--sp-10) var(--grid-gutter) 0; }
}
@media (min-width: 62rem) {
  .thero__inner {
    /* l'image prend plus de place que le texte */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
    gap: var(--sp-09);
    padding-top: var(--sp-12);
  }
}

/* --- colonne texte --- */

.thero__sur {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--sp-04);
  font-family: var(--f-texte);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* le sac garde son vert Shopify */
.thero__ico {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: #ffffff;
}

.thero__h1 {
  margin: 0 0 var(--sp-05);
  font-family: var(--f-titre);
  /* même taille que le H1 de l'accueil */
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.thero__p {
  margin: 0;
  max-width: 34rem;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* --- prix --- */

.thero__prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--sp-07);
}
.thero__prix-b {
  font-family: var(--f-texte);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.45);
}
.thero__prix-v {
  font-family: var(--f-titre);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.thero__prix-v i {
  font-style: normal;
  margin-left: 0.2rem;
  font-size: 0.55em;
  font-weight: 400;
}
.thero__prix-n {
  font-family: var(--f-texte);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.62);
}

/* --- maquette de navigateur, elle déborde vers le bas --- */

/* l'aperçu du thème, aligné sur le bas du bandeau noir */
.thero__visuel { align-self: end; }

.thero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
}

/* la page qui suit reprend le fond clair */
.thero + .lecture { position: relative; z-index: 1; }

/* les ancres se posent sous l'en-tête collant */
.doc__section, .feats { scroll-margin-top: 4.5rem; }

/* ---------- Page thème : section d'ouverture sur fond blanc ---------- */
/* Le bloc va du fil d'Ariane aux trois cartes. Il déborde des marges de .doc
   pour que le blanc touche les deux bords de l'écran. */

.doc:has(.doc__tete--blanc) > .fil--clair,
.doc__tete--blanc {
  position: relative;
}

/* le fond est peint par un pseudo-élément qui déborde jusqu'aux bords */
.doc:has(.doc__tete--blanc) > .fil--clair::before,
.doc__tete--blanc::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
}

/* le contenu repasse devant le fond */
.doc:has(.doc__tete--blanc) > .fil--clair > *,
.doc__tete--blanc > * {
  position: relative;
  z-index: 1;
}

/* le fil d'Ariane colle au bloc : pas d'interstice gris entre les deux */
.doc:has(.doc__tete--blanc) > .fil--clair {
  margin-bottom: 0;
  padding-top: var(--sp-07);
  padding-bottom: var(--sp-05);
}
.doc:has(.doc__tete--blanc) { padding-top: 0; }
/* le fil d'Ariane est parti dans le héros : la section retrouve sa marge haute */
.doc__tete--blanc { padding-top: var(--sp-09); padding-bottom: var(--sp-09); }

/* un filet ferme la section avant le gris de la suite */
.doc__tete--blanc::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: var(--cds-border-subtle);
}

/* --- les maquettes reprennent leur teinte claire (valeurs par défaut) --- */



/* les ancres se posent sous l'en-tête collant */
.doc__section, .feats { scroll-margin-top: 4.5rem; }

/* ---------- Page thème : section d'ouverture sur fond noir ---------- */
/* Le bloc va du fil d'Ariane au chapô. Il déborde des marges de .doc
   pour que le noir touche les deux bords de l'écran. */

.doc:has(.doc__tete--noir) > .fil--clair,
.doc__tete--noir {
  position: relative;
}

/* le fond noir est peint par un pseudo-élément qui déborde jusqu'aux bords.
   Pas de z-index négatif : il passerait derrière le fond de .lecture.
   On le place sous le contenu en remontant celui-ci à la place. */
.doc:has(.doc__tete--noir) > .fil--clair::before,
.doc__tete--noir::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #000000;
}

/* le contenu repasse devant le fond */
.doc:has(.doc__tete--noir) > .fil--clair > *,
.doc__tete--noir > * {
  position: relative;
  z-index: 1;
}

/* le fil d'Ariane colle au bloc : pas d'interstice clair entre les deux */
.doc:has(.doc__tete--noir) > .fil--clair {
  margin-bottom: 0;
  padding-top: var(--sp-07);
  padding-bottom: var(--sp-05);
}
.doc:has(.doc__tete--noir) { padding-top: 0; }
.doc__tete--noir { padding-bottom: var(--sp-09); }

/* --- couleurs du contenu sur noir --- */

.doc:has(.doc__tete--noir) > .fil--clair a { color: rgba(255, 255, 255, 0.6); }
.doc:has(.doc__tete--noir) > .fil--clair a:hover { color: #ffffff; }
.doc:has(.doc__tete--noir) > .fil--clair span { color: rgba(255, 255, 255, 0.45); }
.doc:has(.doc__tete--noir) > .fil--clair span[aria-current] { color: rgba(255, 255, 255, 0.75); }

.doc__tete--noir .doc__sur { color: rgba(255, 255, 255, 0.5); }
.doc__tete--noir .doc__h1 { color: #ffffff; }
.doc__tete--noir .doc__accroche { color: rgba(255, 255, 255, 0.64); }
.doc__tete--noir .doc__chapo { color: rgba(255, 255, 255, 0.62); }

.doc__tete--noir .doc__prix-v { color: #ffffff; }
.doc__tete--noir .doc__prix-v span { color: rgba(255, 255, 255, 0.6); }
.doc__tete--noir .doc__prix-b { color: rgba(255, 255, 255, 0.4); }
.doc__tete--noir .doc__prix-note { color: #ffffff; }
.doc__tete--noir .doc__prix-par { color: rgba(255, 255, 255, 0.5); }


/* les maquettes s'inversent : cadre clair sur fond sombre */

/* ---------- Page « Nos services » : fond noir, grille à filets ---------- */

.page-services { background: #000000; }

/* --- héros --- */

.page-services .hero--noir-s {
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.page-services .hero__title { color: #ffffff; }
.page-services .hero__lede { color: rgba(255, 255, 255, 0.64); }
.page-services .fil a { color: rgba(255, 255, 255, 0.6); }
.page-services .fil span { color: rgba(255, 255, 255, 0.45); }
.page-services .fil span[aria-current] { color: rgba(255, 255, 255, 0.75); }

/* --- grille : des filets, pas des cadres (même principe que .trio) --- */

.sgrid {
  padding: var(--sp-10) 0 var(--sp-11);
  background: #000000;
}

.sgrid__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-08);
}
@media (min-width: 42rem) { .sgrid__inner { padding: 0 var(--grid-gutter); } }

/* en une colonne, le filet passe à l'horizontale */
@media (max-width: 46rem) {
  .sgrid__c + .sgrid__c {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: var(--sp-08);
  }
}

/* Deux puis trois colonnes. Les filets se posent à droite de chaque entrée
   sauf en fin de rangée, et au-dessus de tout ce qui suit la première rangée. */
@media (min-width: 46rem) {
  .sgrid__inner { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .sgrid__c { padding: var(--sp-07); }
  .sgrid__c:not(:nth-child(2n)) { border-right: 1px solid rgba(255, 255, 255, 0.14); }
  .sgrid__c:nth-child(n + 3)    { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

@media (min-width: 66rem) {
  .sgrid__inner { grid-template-columns: repeat(3, 1fr); }
  /* Remise à plat : même spécificité que les règles deux colonnes, donc on
     passe par .sgrid__inner pour l'emporter quelle que soit la position. */
  .sgrid__inner .sgrid__c { border-right: none; border-top: none; }
  .sgrid__inner .sgrid__c:not(:nth-child(3n)) { border-right: 1px solid rgba(255, 255, 255, 0.14); }
  .sgrid__inner .sgrid__c:nth-child(n + 4)    { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

/* --- contenu d'une entrée --- */

.sgrid__mention {
  margin: 0 0 var(--sp-03);
  font-family: var(--f-texte);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.sgrid__titre {
  margin: 0 0 var(--sp-04);
  font-family: var(--f-titre);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.sgrid__titre a {
  color: #ffffff;
  text-decoration: none;
  transition: color var(--dur-fast-02) var(--ease-productive);
}
@media (hover: hover) and (pointer: fine) {
  .sgrid__titre a:hover { color: #ff7a29; }
}

.sgrid__texte {
  margin: 0 0 var(--sp-05);
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

/* lien textuel orange, sans cadre */
.sgrid__lire {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--f-texte);
  font-size: 0.875rem;
  font-weight: 500;
  color: #ff7a29;
  text-decoration: none;
  transition: gap var(--dur-fast-02) var(--ease-productive);
}
.sgrid__lire svg { transition: transform var(--dur-fast-02) var(--ease-productive); }
@media (hover: hover) and (pointer: fine) {
  .sgrid__lire:hover svg { transform: translateX(3px); }
}

/* --- section finale --- */

.page-services .cta { background: #000000; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.page-services .cta__title { color: #ffffff; }
.page-services .cta__text { color: rgba(255, 255, 255, 0.62); }

/* ---------- Page services : héros en deux colonnes ---------- */

.shero {
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.shero__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: var(--sp-10) var(--grid-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-08);
  align-items: center;
}
@media (min-width: 42rem) { .shero__inner { padding: var(--sp-10) var(--grid-gutter); } }
@media (min-width: 62rem) {
  .shero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--sp-09);
    padding-top: var(--sp-11);
    padding-bottom: var(--sp-11);
  }
}

/* --- colonne gauche --- */

.shero__h1 {
  margin: 0 0 var(--sp-05);
  font-family: var(--f-titre);
  /* même taille que le H1 de l'accueil */
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.shero__p {
  margin: 0;
  max-width: 34rem;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.64);
}

.shero__actions { margin-top: var(--sp-07); }

/* --- colonne droite : trois colonnes de tuiles défilantes --- */

.shero__logos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-04);
  height: 22rem;
  overflow: hidden;
  /* les tuiles s'effacent en haut et en bas */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
@media (min-width: 62rem) { .shero__logos { height: 26rem; } }

.slogo__col { overflow: hidden; }

.slogo__piste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-04);
  /* la série est doublée : la boucle se referme sans saut visible */
  animation: slogoMonte 34s linear infinite;
  will-change: transform;
}

/* une colonne sur deux descend, pour casser la régularité */
.slogo__col--2 .slogo__piste { animation-name: slogoDescend; animation-duration: 40s; }
.slogo__col--3 .slogo__piste { animation-duration: 30s; }

@keyframes slogoMonte {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes slogoDescend {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

.slogo__t {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
}
.slogo__t svg {
  width: 44%;
  height: 44%;
  display: block;
}

/* l'animation s'arrête quand l'utilisateur ne veut pas de mouvement */
@media (prefers-reduced-motion: reduce) {
  .slogo__piste { animation: none; }
}

/* et quand le bloc sort de l'écran, pour ne pas tourner dans le vide */
.shero__logos:not(.is-vu) .slogo__piste { animation-play-state: paused; }

/* ---------- Blog : liste d'articles à filets ---------- */
/* Même principe que la grille des services : des séparateurs, pas des cartes. */

.agrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-07);
}

/* en une colonne, le filet passe à l'horizontale */
@media (max-width: 46rem) {
  .agrid__c + .agrid__c {
    border-top: 1px solid var(--cds-border-subtle);
    padding-top: var(--sp-07);
  }
}

@media (min-width: 46rem) {
  .agrid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .agrid__c { padding: var(--sp-07); }
  .agrid__c:not(:nth-child(2n)) { border-right: 1px solid var(--cds-border-subtle); }
  .agrid__c:nth-child(n + 3)    { border-top: 1px solid var(--cds-border-subtle); }
}

@media (min-width: 66rem) {
  .agrid { grid-template-columns: repeat(3, 1fr); }
  /* remise à plat : même spécificité que les règles deux colonnes */
  .agrid .agrid__c { border-right: none; border-top: none; }
  .agrid .agrid__c:not(:nth-child(3n)) { border-right: 1px solid var(--cds-border-subtle); }
  .agrid .agrid__c:nth-child(n + 4)    { border-top: 1px solid var(--cds-border-subtle); }
}

/* la première entrée n'a pas de marge haute superflue */
.agrid__c:first-child { padding-top: 0; }
@media (min-width: 46rem) {
  .agrid__c:nth-child(1),
  .agrid__c:nth-child(2) { padding-top: 0; }
}
@media (min-width: 66rem) {
  .agrid__c:nth-child(3) { padding-top: 0; }
}

/* --- contenu d'une entrée --- */

.agrid__cat {
  margin: 0 0 var(--sp-03);
  font-family: var(--f-texte);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cds-text-helper);
}

.agrid__titre {
  margin: 0 0 var(--sp-04);
  font-family: var(--f-titre);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.agrid__titre a {
  color: var(--cds-gray-100);
  text-decoration: none;
  transition: color var(--dur-fast-02) var(--ease-productive);
}
@media (hover: hover) and (pointer: fine) {
  .agrid__titre a:hover { color: var(--cds-text-secondary); }
}

.agrid__extrait {
  margin: 0 0 var(--sp-05);
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
}

.agrid__lire {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--f-texte);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cds-gray-100);
  text-decoration: none;
}
.agrid__lire svg { transition: transform var(--dur-fast-02) var(--ease-productive); }
@media (hover: hover) and (pointer: fine) {
  .agrid__lire:hover svg { transform: translateX(3px); }
}

/* ---------- Héros gris uni (blog) ---------- */
/* remplace le dégradé bleuté par le fond de page */

.hero--gris {
  background: #f5f5f7;
  background-image: none;
}

/* ---------- Blog : héros resserré et barre de filtres collante ---------- */

/* le texte du héros n'est plus suivi d'un grand vide : la barre suit de près.
   Aucun bouton ne suit le texte ici, sa marge basse ne sert donc à rien. */
.hero--gris { padding-bottom: var(--sp-06); }
@media (min-width: 66rem) {
  .hero--gris { padding-bottom: var(--sp-06); }
}
.hero--gris .hero__lede { margin-bottom: 0; }

.fbar {
  position: sticky;
  top: var(--sous-hdr, 3rem);
  z-index: 20;
  background: #f5f5f7;
  border-bottom: 1px solid var(--cds-border-subtle);
}

.fbar__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: flex;
  align-items: center;
  gap: var(--sp-02);
  height: 3rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.fbar__inner::-webkit-scrollbar { display: none; }
@media (min-width: 42rem) { .fbar__inner { padding: 0 var(--grid-gutter); } }

.fbar__lien {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 var(--sp-04);
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--f-texte);
  font-size: 0.875rem;
  color: var(--cds-text-secondary);
  text-decoration: none;
  transition: background var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}
@media (hover: hover) and (pointer: fine) {
  .fbar__lien:hover { background: rgba(22, 22, 22, 0.06); color: var(--cds-gray-100); }
}
.fbar__lien.is-active { background: var(--cds-gray-100); color: #ffffff; }

/* la liste d'articles reprend juste après la barre */
.section--blog { padding-top: var(--sp-09); }
@media (min-width: 66rem) { .section--blog { padding-top: var(--sp-09); } }

/* ---------- En-tête mobile : bouton de devis avant le hamburger ---------- */
/* .hdr__actions est masqué sous 1056px ; on le réaffiche avec le seul CTA,
   le lien compte restant réservé au desktop. */

@media (max-width: 1055px) {
  .hdr__actions {
    display: flex;
    margin-left: auto;
    padding-left: 0;
    gap: var(--sp-03);
  }
  .hdr__actions .hdr__compte { display: none; }

  /* libellé court : « Devis » suffit à côté du hamburger.
     Mêmes valeurs que le bouton du héros (.cds-btn). */
  .hdr__actions .hdr__cta {
    height: 2rem;
    padding: 0 var(--sp-04);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.16px;
  }
  .hdr__cta-long { display: none; }

  /* le hamburger suit le bouton au lieu d'être poussé à droite */
  .hdr__burger { margin-left: var(--sp-02); }
}

/* le libellé court tient sur tous les écrans : rien à ajuster plus bas */

/* le libellé court n'apparaît qu'en mobile */
.hdr__cta-court { display: none; }
@media (max-width: 1055px) {
  .hdr__cta-court { display: inline; }
}

/* ---------- Pages service : formats de campagnes ---------- */

.camp {
  padding: var(--sp-10) 0 var(--sp-11);
  background: #f5f5f7;
  border-top: 1px solid var(--cds-border-subtle);
}

.camp__tete {
  max-width: var(--grid-max);
  margin: 0 auto var(--sp-09);
  padding: 0 var(--grid-margin);
}
@media (min-width: 42rem) { .camp__tete { padding: 0 var(--grid-gutter); } }

.camp__titre { margin-bottom: var(--sp-05); color: var(--cds-gray-100); }
.camp__intro { max-width: 46rem; color: var(--cds-text-secondary); }

.camp__grille {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-08);
}
@media (min-width: 42rem) {
  .camp__grille { padding: 0 var(--grid-gutter); grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 66rem) {
  .camp__grille { grid-template-columns: repeat(3, 1fr); gap: var(--sp-07); }
}

.camp__visuel {
  height: 11rem;
  margin-bottom: var(--sp-05);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(22, 22, 22, 0.14);
  background: #f5f5f7;
}

.camp__h {
  margin: 0 0 var(--sp-03);
  font-family: var(--f-titre);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--cds-gray-100);
}

.camp__p {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
}

/* ---------- Maquettes des formats ---------- */

.ma {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--f-texte);
  --ma-trait: rgba(22, 22, 22, 0.12);
  --ma-fond: rgba(22, 22, 22, 0.05);
  --ma-plein: rgba(22, 22, 22, 0.18);
}

.ma__l { display: block; border-radius: 3px; background: var(--ma-trait); }
.ma__l--t { height: 6px; width: 72%; }
.ma__l--p { height: 5px; width: 45%; background: var(--ma-fond); }

/* --- Search : une recherche et ses résultats --- */

.ma--search { gap: 0.55rem; justify-content: center; }

.ma__barre-r {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 1.75rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--ma-trait);
  background: #ffffff;
}
.ma__loupe {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--cds-gray-50);
  flex: 0 0 auto;
}
.ma__saisie { font-size: 0.5625rem; color: var(--cds-text-secondary); }

.ma__res { display: flex; flex-direction: column; gap: 0.3rem; padding-left: 0.1rem; }
.ma__res--on { position: relative; }
.ma__tag {
  align-self: flex-start;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: var(--cds-gray-100);
  color: #ffffff;
  font-size: 0.4375rem;
  letter-spacing: 0.04em;
}
.ma__res--on .ma__l--t { background: var(--ma-plein); }

/* --- Shopping : une rangée de produits --- */

.ma--shopping { gap: 0.6rem; justify-content: center; }
.ma__prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.ma__prod { display: flex; flex-direction: column; gap: 0.25rem; }
.ma__img {
  aspect-ratio: 1;
  border-radius: 5px;
  background: var(--ma-fond);
}
.ma__prod.on .ma__img { background: var(--ma-plein); }
.ma__prix { height: 5px; width: 60%; border-radius: 3px; background: var(--ma-trait); }
.ma__prod .ma__l--p { width: 80%; height: 4px; }
.ma__note { font-size: 0.5rem; color: var(--cds-gray-50); text-align: center; }

/* --- Display : une bannière dans une page --- */

.ma--display { justify-content: center; }
.ma__site { display: flex; flex-direction: column; gap: 0.45rem; }

.ma__banniere {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  margin: 0.2rem 0;
  border-radius: 6px;
  background: var(--cds-gray-100);
}
.ma__b-logo { width: 0.9rem; height: 0.9rem; border-radius: 3px; background: #ffffff; flex: 0 0 auto; }
.ma__b-l { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.45); }
.ma__b-btn { width: 1.9rem; height: 0.8rem; border-radius: 999px; background: #ffffff; flex: 0 0 auto; }

/* --- Locale : un point sur une carte --- */

.ma--locale { gap: 0.6rem; justify-content: center; }
.ma__carte {
  position: relative;
  flex: 1;
  border-radius: 8px;
  background: var(--ma-fond);
  overflow: hidden;
}
.ma__route {
  position: absolute;
  background: rgba(22, 22, 22, 0.09);
}
.ma__route--1 { left: 0; right: 0; top: 42%; height: 3px; }
.ma__route--2 { top: 0; bottom: 0; left: 62%; width: 3px; }
.ma__pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 0.7rem; height: 0.7rem;
  margin: -0.35rem 0 0 -0.35rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--cds-gray-100);
  z-index: 2;
}
.ma__onde {
  position: absolute;
  left: 50%; top: 50%;
  width: 2.4rem; height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  border-radius: 50%;
  border: 1px solid rgba(22, 22, 22, 0.18);
}
.is-vu .ma__onde { animation: maOnde 2.4s ease-out infinite; }
@keyframes maOnde {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(1.3); opacity: 0; }
}

.ma__fiche {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--ma-trait);
  background: #ffffff;
}
.ma__ouvert {
  flex: 0 0 auto;
  font-size: 0.5rem;
  color: #00a052;
}

/* --- YouTube : un lecteur avec saut d'annonce --- */

.ma--youtube { gap: 0.5rem; justify-content: center; }
.ma__video {
  position: relative;
  flex: 1;
  border-radius: 8px;
  background: var(--cds-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ma__play {
  width: 0; height: 0;
  border-left: 0.85rem solid #ffffff;
  border-top: 0.55rem solid transparent;
  border-bottom: 0.55rem solid transparent;
  margin-left: 0.2rem;
}
.ma__skip {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cds-gray-100);
  font-size: 0.4375rem;
}
.ma__progres { height: 3px; border-radius: 2px; background: var(--ma-fond); overflow: hidden; }
.ma__progres i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--cds-gray-100);
}
.is-vu .ma__progres i { animation: maProgres 3.2s linear infinite; }
@keyframes maProgres { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .is-vu .ma__onde,
  .is-vu .ma__progres i { animation: none; }
  .ma__progres i { width: 45%; }
}

/* ---------- Héros thème : boutons sous le prix ---------- */

.thero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-04);
  margin-top: var(--sp-06);
}

/* sur le vert foncé, la pastille s'éclaircit */
.thero__btn {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  gap: 0.45rem;
}
.thero__btn:hover { background: rgba(255, 255, 255, 0.24); color: #ffffff; }

/* le bouton d'achat porte l'action principale */
.thero__btn--plein {
  background: #ffffff;
  color: #000000;
  font-weight: 500;
}
.thero__btn--plein:hover { background: rgba(255, 255, 255, 0.88); color: #000000; }

.thero__btn svg { opacity: 0.7; }

/* ---------- Page thème ---------- */
/* L'en-tête de cette page est le bloc réduit .hdr--epure, rendu par
   includes/header.php quand $hdr_epure porte une URL. Les règles qui
   repeignaient l'en-tête habituel n'ont plus d'objet : il n'est pas rendu ici. */

/* --- l'icône du sac passe en vert pomme fluo --- */

.page-theme .thero__ico { color: #95bf47; }

/* --- le fond de page passe du gris au blanc --- */

/* --- toute la page est sur fond noir --- */

.page-theme { background: #000000; }
.page-theme .lecture { background: #000000; }

/* la section d'ouverture suit */
.page-theme .doc__tete--blanc::before { background: #000000; }
.page-theme .doc__tete--blanc::after { background: rgba(255, 255, 255, 0.12); }
.page-theme .doc__tete--blanc .doc__h1 { color: #ffffff; }
.page-theme .doc__tete--blanc .doc__accroche { color: rgba(255, 255, 255, 0.64); }

/* les maquettes des cartes s'inversent */

/* grille de fonctionnalités */
.page-theme .feats { border-top-color: rgba(255, 255, 255, 0.12); }

/* sections de contenu */
.page-theme .doc__section { border-top-color: rgba(255, 255, 255, 0.12); }
.page-theme .doc__h2 { color: #ffffff; }
.page-theme .doc__h3 { color: #ffffff; }
.page-theme .doc__p { color: rgba(255, 255, 255, 0.66); }
.page-theme .doc__p code {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* pied de page de la doc */
.page-theme .doc__fin { border-top-color: rgba(255, 255, 255, 0.12); }
.page-theme .doc .cds-btn--plein {
  background: #ffffff;
  color: #000000;
}
.page-theme .doc .cds-btn--plein:hover { background: rgba(255, 255, 255, 0.88); color: #000000; }
.page-theme .doc .cds-btn--primary {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
.page-theme .doc .cds-btn--primary:hover { background: rgba(255, 255, 255, 0.24); }


/* ---------- En-tête réduit (page thème) ---------- */
/* Le logo et l'action d'achat, sans navigation ni menu mobile. */

.hdr--epure {
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hdr--epure .hdr__inner { align-items: center; gap: var(--sp-04); }
.hdr--epure .hdr__logo { color: #ffffff; padding-right: 0; }

/* le filet sépare la marque de la mention */
.hdr__sep {
  width: 1px;
  height: 1.25rem;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.22);
}

.hdr__mention {
  font-family: var(--f-texte);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* le bouton reste calé à droite */
.hdr--epure .hdr__achat { margin-left: auto; }

.hdr__achat {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 var(--sp-05);
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
  font-family: var(--f-texte);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16px;
  white-space: nowrap;
  transition: background var(--dur-fast-02) var(--ease-productive);
}
.hdr__achat:hover { background: rgba(255, 255, 255, 0.88); color: #000000; }


/* ---------- Barre d'offre, collée en bas (page thème) ---------- */

.bbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: #97e690;
  /* elle monte à l'écran une fois le héros passé */
  transform: translateY(100%);
  transition: transform var(--dur-moderate-01) var(--ease-productive);
}
.bbar.is-vu { transform: translateY(0); }

.bbar__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (min-width: 42rem) { .bbar__inner { padding: 0 var(--grid-gutter); } }

.bbar__txt {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #000000;
}

.bbar__btn {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 var(--sp-05);
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  font-family: var(--f-texte);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast-02) var(--ease-productive);
}
.bbar__btn:hover { background: #2a2a2a; color: #ffffff; }

/* le pied de page garde sa place sous la barre */
.page-theme .ftr { padding-bottom: 4.5rem; }

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

/* --- barre d'offre : les trois états --- */

/* la barre grandit quand le formulaire s'ouvre */
.bbar__inner { transition: min-height var(--dur-moderate-01) var(--ease-productive); }
.bbar.est-ouvert .bbar__inner { min-height: 6.5rem; }

.bbar__vue { display: none; width: 100%; }
.bbar__vue--depart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.bbar.est-ouvert .bbar__vue--depart,
.bbar.est-faite .bbar__vue--depart { display: none; }

.bbar.est-ouvert .bbar__vue--saisie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: var(--sp-05) 0;
}

.bbar.est-faite .bbar__vue--faite {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bbar__label {
  font-family: var(--f-texte);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #000000;
}

.bbar__ligne {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 26rem;
}

.bbar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.25rem;
  padding: 0 var(--sp-05);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #ffffff;
  font-family: var(--f-texte);
  font-size: 0.875rem;
  color: #000000;
}
.bbar__input::placeholder { color: rgba(0, 0, 0, 0.42); }
.bbar__input:focus {
  outline: 2px solid #000000;
  outline-offset: 1px;
  border-color: transparent;
}
.bbar__input[aria-invalid="true"] { border-color: #a2191f; }

.bbar__erreur {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 0.75rem;
  color: #6b0d10;
}

/* champ piège à anti-robots : hors écran, jamais visible */
.bbar__piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* le bouton de la barre accepte aussi <button> */
button.bbar__btn { border: none; cursor: pointer; }

/* ---------- Offre : la saisie en panneau, sur mobile ---------- */
/* Sous 42rem, le formulaire monte du bas sur 60 % de l'écran plutôt que
   d'agrandir la barre : la saisie reste visible au-dessus du clavier. */

@media (max-width: 42rem) {
  .bbar.est-ouvert .bbar__inner { min-height: 3.25rem; }

  /* le formulaire sort du flux de la barre */
  .bbar.est-ouvert .bbar__vue--saisie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    height: 60vh;
    padding: var(--sp-07) var(--grid-margin) var(--sp-08);
    border-radius: 20px 20px 0 0;
    background: #97e690;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-05);
    animation: bbarMonte 320ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
  }

  @keyframes bbarMonte {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* une poignée, comme sur les panneaux d'application */
  .bbar.est-ouvert .bbar__vue--saisie::before {
    content: "";
    align-self: center;
    width: 2.5rem;
    height: 0.25rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    margin-bottom: var(--sp-04);
  }

  .bbar.est-ouvert .bbar__label {
    font-size: 1.125rem;
    line-height: 1.35;
    text-align: left;
  }

  .bbar.est-ouvert .bbar__ligne {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    gap: var(--sp-04);
  }

  .bbar.est-ouvert .bbar__input { height: 3rem; font-size: 1rem; }
  .bbar.est-ouvert .bbar__vue--saisie .bbar__btn {
    height: 3rem;
    justify-content: center;
    font-size: 0.9375rem;
  }

  /* le voile masque la page derrière le panneau */
  .bbar-voile {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms var(--ease-productive), visibility 0s linear 240ms;
  }
  .bbar-voile.est-vu {
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms var(--ease-productive), visibility 0s;
  }

  /* bouton de fermeture du panneau */
  .bbar__fermer {
    position: absolute;
    top: var(--sp-05);
    right: var(--grid-margin);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
    cursor: pointer;
  }
}

/* au-dessus de 42rem, le panneau n'existe pas */
@media (min-width: 42.001rem) {
  .bbar__fermer { display: none; }
  .bbar-voile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bbar.est-ouvert .bbar__vue--saisie { animation: none; }
}

/* la barre s'en va vers le bas, une fois le prix révélé */
.bbar.est-partie {
  transform: translateY(100%);
  transition: transform 400ms var(--ease-productive);
  pointer-events: none;
}

/* le curseur d'écriture, pendant que le bloc se remplit */
.doc__code code.est-en-cours::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: rgba(255, 255, 255, 0.7);
  animation: codeCurseur .8s steps(2, start) infinite;
}
@keyframes codeCurseur { 50% { opacity: 0; } }

/* le bloc garde sa hauteur pendant l'écriture : la page ne saute pas */
.doc__code pre { min-height: 1.7em; }

@media (prefers-reduced-motion: reduce) {
  .doc__code code.est-en-cours::after { display: none; }
}

/* ---------- Page offre : site internet ---------- */

/* le prix dans l'en-tête réduit */
.hdr__prix {
  margin-left: 0.5rem;
  white-space: nowrap;
}
.hdr__prix strong { color: #ffffff; font-weight: 600; }
.hdr__prix s { color: rgba(255, 255, 255, 0.4); margin-left: 0.3rem; }
@media (max-width: 34rem) {
  .hdr__prix { display: none; }
}

/* le héros de l'offre n'a pas d'image : une seule colonne, centrée à gauche */
.thero__inner--offre { grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  .thero__inner--offre { grid-template-columns: 1fr; }
  .thero__inner--offre .thero__texte { max-width: 44rem; }
}

.thero__prix-v i { font-size: 0.5em; }

.offre__detail {
  margin: var(--sp-04) 0 0;
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.62);
}
.offre__detail strong { color: #ffffff; font-weight: 500; }

/* --- ce qui est compris --- */

.offre__liste {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.offre__l {
  padding: var(--sp-05) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 50rem) {
  .offre__l { display: grid; grid-template-columns: 14rem 1fr; gap: var(--sp-06); }
}
.offre__l dt {
  font-family: var(--f-titre);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.offre__l dd {
  margin: var(--sp-02) 0 0;
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}
@media (min-width: 50rem) { .offre__l dd { margin-top: 0; } }

/* --- les étapes --- */

.offre__etapes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-07);
}
@media (min-width: 46rem) { .offre__etapes { grid-template-columns: repeat(2, 1fr); gap: var(--sp-08); } }
@media (min-width: 66rem) { .offre__etapes { grid-template-columns: repeat(4, 1fr); gap: var(--sp-06); } }

.offre__num {
  display: block;
  margin-bottom: var(--sp-04);
  font-family: var(--f-titre);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.28);
}
.offre__et {
  margin: 0 0 var(--sp-03);
  font-family: var(--f-titre);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.offre__ep {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

/* --- questions --- */

.offre__faq { max-width: none; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.offre__faq .faq-l__item { border-bottom-color: rgba(255, 255, 255, 0.12); }
.offre__faq .faq-l__btn { color: #ffffff; }
.offre__faq .faq-l__btn svg { color: rgba(255, 255, 255, 0.5); }
.offre__faq .faq-l__inner p { color: rgba(255, 255, 255, 0.66); }
@media (hover: hover) and (pointer: fine) {
  .offre__faq .faq-l__btn:hover { color: rgba(255, 255, 255, 0.72); }
}

/* ---------- Maquette d'un site vitrine (héros de l'offre) ---------- */

.sv {
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  background: #0a0a0a;
  overflow: hidden;
}

.sv__barre {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sv__barre span {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.sv__barre em {
  margin-left: 0.6rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--f-texte);
  font-size: 0.625rem;
  font-style: normal;
  color: rgba(255, 255, 255, 0.4);
}

.sv__page { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.9rem; }

.sv__nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sv__nav i { height: 5px; width: 2.2rem; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.sv__logo { width: 1.1rem !important; height: 1.1rem !important; border-radius: 4px !important; background: rgba(255, 255, 255, 0.85) !important; }
.sv__cta { margin-left: auto; width: 3rem !important; height: 1.1rem !important; border-radius: 999px !important; background: #ffffff !important; }

/* la bannière : titre, texte, bouton */
.sv__hero {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.1rem 0.9rem 1.3rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.sv__t { height: 9px; width: 62%; border-radius: 3px; background: rgba(255, 255, 255, 0.22); }
.sv__p { height: 6px; width: 84%; border-radius: 3px; background: rgba(255, 255, 255, 0.10); }
.sv__b {
  margin-top: 0.35rem;
  height: 1.4rem; width: 6.5rem;
  border-radius: 999px;
  background: #ffffff;
}

.sv__trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.sv__trois span {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
}

.sv__pied { display: flex; flex-direction: column; gap: 0.3rem; }
.sv__pied i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); }
.sv__pied i:first-child { width: 70%; }
.sv__pied i:last-child { width: 45%; }

/* ---------- Pages offre : tout en noir ---------- */
/* La page reprend le fond sombre de .page-theme ; seules les couleurs des
   maquettes, dessinées en clair, sont rebasculées ici. */

.page-offre,
.page-offre .lecture { background: #000000; }

/* la barre du bas n'existe plus sur ces pages : le pied reprend sa marge */
.page-offre .ftr { padding-bottom: 0; }

/* ---------- Pages offre : héros noir, comme la page services ---------- */

.page-offre .thero {
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.page-offre .thero__sur { color: rgba(255, 255, 255, 0.6); }
.page-offre .thero__h1 { color: #ffffff; }
.page-offre .thero__p { color: rgba(255, 255, 255, 0.72); }

.page-offre .thero__prix-b { color: rgba(255, 255, 255, 0.45); }
.page-offre .thero__prix-v { color: #ffffff; }
.page-offre .thero__prix-n { color: rgba(255, 255, 255, 0.62); }
.page-offre .offre__detail { color: rgba(255, 255, 255, 0.62); }
.page-offre .offre__detail strong { color: #ffffff; }

.page-offre .thero__btn {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
.page-offre .thero__btn:hover { background: rgba(255, 255, 255, 0.24); color: #ffffff; }
.page-offre .thero__btn--plein {
  background: #ffffff;
  color: #000000;
}
.page-offre .thero__btn--plein:hover { background: rgba(255, 255, 255, 0.88); color: #000000; }

/* ---------- Pages sectorielles sport ---------- */

.sbloc {
  padding: var(--sp-10) 0;
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sbloc__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}
@media (min-width: 42rem) { .sbloc__inner { padding: 0 var(--grid-gutter); } }

.sbloc__h2 {
  margin: 0 0 var(--sp-06);
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.sbloc__p {
  margin: 0;
  max-width: 46rem;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

.sbloc__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 46rem;
}
.sbloc__liste li {
  padding: var(--sp-05) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* la grille reçoit un titre au-dessus */
.sgrid__inner--tete {
  display: block;
  margin-bottom: var(--sp-07);
  padding-bottom: 0;
}
.sgrid__inner--tete .sbloc__h2 { margin-bottom: 0; }

/* un titre de carte qui n'est pas un lien */
.sgrid__titre--nu { color: #ffffff; }

/* ---------- Pages service : sections sombres, comme /services ---------- */

.page-services .taches,
.page-services .trio,
.page-services .camp,
.page-services .faq-large {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.page-services .taches { color: #f4f4f4; }
.page-services .trio { color: #f4f4f4; }

/* le problème */
.page-services .section { background: #000000; }
.page-services .section__title { color: #ffffff; }
.page-services .section__intro { color: rgba(255, 255, 255, 0.66); }
.page-services .problem__title { color: #ffffff; }
.page-services .problem__text { color: rgba(255, 255, 255, 0.66); }
.page-services .problem { border-color: rgba(255, 255, 255, 0.14); }

/* la section « ce que vous obtenez » */
.page-services .taches__sur { color: rgba(255, 255, 255, 0.5); }
.page-services .taches__titre { color: #ffffff; }
.page-services .taches__texte { color: rgba(255, 255, 255, 0.66); }
.page-services .taches__clair { border-bottom-color: rgba(255, 255, 255, 0.14); }
@media (min-width: 56rem) {
  .page-services .taches__clair {
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
  }
}
.page-services .taches__sombre { background: #000000; }
.page-services .taches .cds-btn--primary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.page-services .taches .cds-btn--primary:hover { background: rgba(255, 255, 255, 0.2); }

/* la méthode */
.page-services .trio__titre { color: #ffffff; }
.page-services .trio__intro { color: rgba(255, 255, 255, 0.66); }
.page-services .trio__h { color: #ffffff; }
.page-services .trio__p { color: rgba(255, 255, 255, 0.66); }

/* les formats de campagnes */
.page-services .camp__titre { color: #ffffff; }
.page-services .camp__intro { color: rgba(255, 255, 255, 0.66); }
.page-services .camp__h { color: #ffffff; }
.page-services .camp__p { color: rgba(255, 255, 255, 0.66); }
.page-services .camp__visuel {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.14);
}
.page-services .ma {
  --ma-trait: rgba(255, 255, 255, 0.14);
  --ma-fond: rgba(255, 255, 255, 0.06);
  --ma-plein: rgba(255, 255, 255, 0.24);
}
.page-services .ma__barre-r { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.page-services .ma__loupe { border-color: rgba(255, 255, 255, 0.4); }
.page-services .ma__saisie { color: rgba(255, 255, 255, 0.6); }
.page-services .ma__tag { background: #ffffff; color: #000000; }
.page-services .ma__note { color: rgba(255, 255, 255, 0.45); }
.page-services .ma__banniere { background: #ffffff; }
.page-services .ma__b-logo { background: #000000; }
.page-services .ma__b-l { background: rgba(0, 0, 0, 0.35); }
.page-services .ma__b-btn { background: #000000; }
.page-services .ma__pin { background: #ffffff; }
.page-services .ma__onde { border-color: rgba(255, 255, 255, 0.3); }
.page-services .ma__fiche { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.page-services .ma__video { background: rgba(255, 255, 255, 0.10); }
.page-services .ma__skip { background: rgba(255, 255, 255, 0.9); color: #000000; }
.page-services .ma__progres i { background: #ffffff; }

/* la FAQ */
.page-services .faq-large__titre { color: #ffffff; }
.page-services .faq-large .section__intro { color: rgba(255, 255, 255, 0.66); }
.page-services .faq-large__liste { border-top-color: rgba(255, 255, 255, 0.14); }
.page-services .faq-l__item { border-bottom-color: rgba(255, 255, 255, 0.14); }
.page-services .faq-l__btn { color: #ffffff; }
.page-services .faq-l__btn svg { color: rgba(255, 255, 255, 0.5); }
.page-services .faq-l__inner p { color: rgba(255, 255, 255, 0.66); }
@media (hover: hover) and (pointer: fine) {
  .page-services .faq-l__btn:hover { color: rgba(255, 255, 255, 0.72); }
}

/* les cartes de tâches et d'étapes */
.page-services .task {
  border-color: rgba(255, 255, 255, 0.18);
  background: #000000;
  color: rgba(255, 255, 255, 0.72);
}
.page-services .task .num { color: rgba(255, 255, 255, 0.4); }
.page-services .task .label { color: #ffffff; }
.page-services .task .badge {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.04);
}
.page-services .task .status { border-color: rgba(255, 255, 255, 0.22); }
.page-services .task .status.done::after {
  border-left-color: #00e676;
  border-bottom-color: #00e676;
}
.page-services .etape-m {
  background: #000000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.page-services .etape-m__num { color: rgba(255, 255, 255, 0.22); }
.page-services .etape-m__barres i { background: rgba(255, 255, 255, 0.14); }
.page-services .etape-m__coche { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18); }

/* le bloc final */
.page-services .cta {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---------- Maquettes de la page offre ---------- */
/* Même structure que celles de l'accueil, mais sur fond blanc. */

.mocks--offre {
  --m-bord: #1d1d1d;
  background: #000000;
  color: #f5f5f5;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Les trois maquettes sont dessinées en clair : on retourne leurs couleurs
   plutôt que de les redessiner. */

/* surfaces */
.mocks--offre .rech,
.mocks--offre .q-card,
.mocks--offre .boite {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}
.mocks--offre .boite__tete { border-bottom-color: rgba(255, 255, 255, 0.14); }

/* textes forts */
.mocks--offre .q-card strong,
.mocks--offre .boite__n { color: rgba(255, 255, 255, 0.92); }

/* textes secondaires */
.mocks--offre .rech__txt,
.mocks--offre .q-card p,
.mocks--offre .boite__l,
.mocks--offre .dem em { color: rgba(255, 255, 255, 0.62); }

.mocks--offre .rech__loupe { border-color: rgba(255, 255, 255, 0.45); }

/* la liste de résultats */
.mocks--offre .res {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.mocks--offre .res--on {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.mocks--offre .res__b {
  background: #ffffff;
  color: #000000;
}
.mocks--offre .res__t { background: rgba(255, 255, 255, 0.2); }
.mocks--offre .res--on .res__t { background: rgba(255, 255, 255, 0.42); }
.mocks--offre .res__u { background: rgba(255, 255, 255, 0.1); }

/* les lignes de la boîte de réception */
.mocks--offre .dem__t { background: rgba(255, 255, 255, 0.18); }

/* Chaque maquette sort de l'ombre par la droite, comme sur la page SEO :
   le visuel se perd dans le noir du côté où commence le texte. */
.mocks--offre .visual::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 42%;
  z-index: 4;
  background: linear-gradient(-90deg,
              #000000 0%,
              #000000 26%,
              rgba(0, 0, 0, 0.92) 42%,
              rgba(0, 0, 0, 0.65) 62%,
              rgba(0, 0, 0, 0.28) 82%,
              transparent 100%);
  pointer-events: none;
}

/* en colonne, le visuel occupe toute la largeur : l'ombre se resserre */
@media (max-width: 48rem) {
  .mocks--offre .visual::after { width: 26%; }
}

/* ---- le résultat de recherche mis en avant ---- */
/* La maquette « Être trouvé sur votre ville » montre un vrai extrait de
   résultat : l'adresse, le titre et la description tels qu'ils sortent dans
   Google. Le domaine est un exemple, jamais celui d'une entreprise réelle. */

/* cette maquette prend plus de place : le visuel passe devant le texte */
@media (min-width: 48rem) {
  .mocks--offre .mock--large { grid-template-columns: 1.35fr 1fr; }
}

.mock--trouve .rech-track { max-width: 26rem; width: 100%; }

.serp {
  position: relative;
  padding: 0.85rem 0.95rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  text-align: left;
}
.serp__url {
  margin: 0 0 0.3rem;
  font-family: var(--f-texte);
  font-size: 0.6875rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
}
.serp__url span { color: rgba(255, 255, 255, 0.42); }

.serp__titre {
  margin: 0 0 0.35rem;
  padding-right: 2.5rem;
  font-family: var(--f-texte);
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  /* le bleu des liens de résultat */
  color: #8ab4f8;
}
.serp__desc {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

/* la pastille « Vous », comme sur l'ancienne maquette */
.serp__marque {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: #ffffff;
  font-family: var(--f-texte);
  font-size: 0.5625rem;
  font-weight: 600;
  color: #000000;
}

@media (max-width: 30rem) {
  .serp__titre { font-size: 0.8125rem; padding-right: 2.25rem; }
  .serp__desc { font-size: 0.6875rem; }
}

/* Le carrousel « Répondre avant vous » défile : ses cartes sortent de l'ombre
   à gauche autant qu'elles y rentrent à droite. Les deux bandes sont plus
   étroites ici, sinon le milieu lisible se réduirait à presque rien. */
.mocks--offre .mock--repond .visual::after,
.mocks--offre .mock--repond .visual::before { width: 26%; }

.mocks--offre .mock--repond .visual::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  background: linear-gradient(90deg,
              #000000 0%,
              #000000 26%,
              rgba(0, 0, 0, 0.92) 42%,
              rgba(0, 0, 0, 0.65) 62%,
              rgba(0, 0, 0, 0.28) 82%,
              transparent 100%);
  pointer-events: none;
}
@media (max-width: 48rem) {
  .mocks--offre .mock--repond .visual::before { width: 26%; }
}

/* --- 1. une recherche et ses résultats --- */

.mock--trouve .visual {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: var(--sp-07);
  justify-content: center;
}

.rech {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--cds-border-subtle);
  background: #ffffff;
  max-width: 20rem;
}
.rech__loupe {
  width: 0.8rem; height: 0.8rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--cds-gray-50);
}
.rech__txt { font-family: var(--f-texte); font-size: 0.75rem; color: var(--cds-text-secondary); }

.rech-track { display: flex; flex-direction: column; gap: 0.6rem; max-width: 22rem; }

.res {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  opacity: 0;
}
.is-vu .res { animation: resIn .5s var(--ease-productive) both; }
.is-vu .res:nth-child(1) { animation-delay: .10s; }
.is-vu .res:nth-child(2) { animation-delay: .35s; }
.is-vu .res:nth-child(3) { animation-delay: .55s; }
.is-vu .res:nth-child(4) { animation-delay: .70s; }
@keyframes resIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.res--on {
  background: rgba(22, 22, 22, 0.05);
  box-shadow: inset 0 0 0 1px var(--cds-border-subtle);
}
.res__b {
  align-self: flex-start;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--cds-gray-100);
  color: #ffffff;
  font-family: var(--f-texte);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
}
.res__t { height: 7px; width: 72%; border-radius: 3px; background: rgba(22, 22, 22, 0.14); }
.res--on .res__t { background: rgba(22, 22, 22, 0.28); width: 84%; }
.res__u { height: 5px; width: 46%; border-radius: 3px; background: rgba(22, 22, 22, 0.07); }

/* --- 2. les questions qui défilent --- */

.mock--repond .visual { padding: var(--sp-06) 0; }

.q-track {
  display: flex;
  gap: 0.8rem;
  padding: 0 var(--sp-07);
  width: max-content;
}
.is-vu .q-track { animation: qDefile 26s linear infinite; }
@keyframes qDefile { to { transform: translateX(-50%); } }

.q-card {
  flex: 0 0 15rem;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid var(--cds-border-subtle);
  background: #ffffff;
}
.q-card strong {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--f-titre);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cds-gray-100);
}
.q-card p {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--cds-text-secondary);
}

/* --- 3. la boîte de réception --- */

.mock--demandes .visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-07);
}

.boite {
  width: 100%;
  max-width: 22rem;
  border-radius: 12px;
  border: 1px solid var(--cds-border-subtle);
  background: #ffffff;
  overflow: hidden;
}
.boite__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--cds-border-subtle);
}
.boite__l {
  font-family: var(--f-texte);
  font-size: 0.8125rem;
  color: var(--cds-text-secondary);
}
.boite__n {
  font-family: var(--f-titre);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--cds-gray-100);
  font-variant-numeric: tabular-nums;
}

.boite__liste { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }

.dem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border-radius: 7px;
  opacity: 0;
}
.is-vu .dem { animation: demIn .45s var(--ease-productive) both; }
.is-vu .dem:nth-child(1) { animation-delay: .20s; }
.is-vu .dem:nth-child(2) { animation-delay: .45s; }
.is-vu .dem:nth-child(3) { animation-delay: .65s; }
.is-vu .dem:nth-child(4) { animation-delay: .85s; }
@keyframes demIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.dem i {
  width: 0.5rem; height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #00a052;
}
.dem__t { flex: 1; height: 6px; border-radius: 3px; background: rgba(22, 22, 22, 0.12); }
.dem em {
  flex: 0 0 auto;
  font-style: normal;
  font-family: var(--f-texte);
  font-size: 0.6875rem;
  color: var(--cds-gray-50);
}

@media (prefers-reduced-motion: reduce) {
  .is-vu .res, .is-vu .dem { animation: none; opacity: 1; }
  .is-vu .q-track { animation: none; }
}

/* ---------- Accueil : essai de hiérarchie resserrée ---------- */
/* Tous les titres à la taille de .mock__h (20px / 500 / 26px / -0.025em).
   Le H1 tient sa taille de .hero__titre-c, partagée avec les autres pages. */


/* ---------- Blog : fond noir ---------- */

.page-blog { background: #000000; }
.page-blog .section { background: #000000; }

/* la barre de filtres */
.page-blog .fbar {
  background: #000000;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.page-blog .fbar__lien { color: rgba(255, 255, 255, 0.66); }
@media (hover: hover) and (pointer: fine) {
  .page-blog .fbar__lien:hover { background: rgba(255, 255, 255, 0.10); color: #ffffff; }
}
/* le lien actif reprend le bouton de l'en-tête : blanc sur gris translucide */
.page-blog .fbar__lien.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .page-blog .fbar__lien.is-active:hover { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
}

/* la grille d'articles : filets clairs sur fond noir */
@media (max-width: 46rem) {
  .page-blog .agrid__c + .agrid__c { border-top-color: rgba(255, 255, 255, 0.14); }
}
@media (min-width: 46rem) {
  .page-blog .agrid__c:not(:nth-child(2n)) { border-right-color: rgba(255, 255, 255, 0.14); }
  .page-blog .agrid__c:nth-child(n + 3)    { border-top-color: rgba(255, 255, 255, 0.14); }
}
@media (min-width: 66rem) {
  .page-blog .agrid .agrid__c:not(:nth-child(3n)) { border-right-color: rgba(255, 255, 255, 0.14); }
  .page-blog .agrid .agrid__c:nth-child(n + 4)    { border-top-color: rgba(255, 255, 255, 0.14); }
}

.page-blog .agrid__cat { color: rgba(255, 255, 255, 0.45); }
.page-blog .agrid__titre a { color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .page-blog .agrid__titre a:hover { color: rgba(255, 255, 255, 0.72); }
}
.page-blog .agrid__extrait { color: rgba(255, 255, 255, 0.66); }
.page-blog .agrid__lire { color: #ffffff; }

/* la bannière d'appel se fond dans la page */
.page-blog .cta {
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---------- Maquette propre au service, dans « Comment ça se passe » ---------- */
/* Les maquettes .mk sont dessinées pour les cartes du carrousel : elles
   tirent leurs couleurs d'un parent .carte, absent ici. On les redonne en
   version sombre, et on agrandit la base pour une colonne de 15rem. */

.trio__visuel--mk {
  --mk-trait:  rgba(255, 255, 255, 0.16);
  --mk-plein:  rgba(255, 255, 255, 0.10);
  --mk-fond:   rgba(255, 255, 255, 0.05);
  --mk-accent: #78a9ff;
  --mk-ok:     #42be65;
  --mk-att:    #f1c21b;
  --mk-fort:   rgba(255, 255, 255, 0.92);
  --mk-texte:  rgba(255, 255, 255, 0.62);

  text-align: left;
}

/* la maquette reste dans le gabarit des visuels d'étape voisins */
.trio__visuel--mk .mk {
  width: 100%;
  max-width: 13rem;
  height: auto;
  max-height: 11rem;
  margin: 0 auto;
  font-size: 0.625rem;
}

/* ---------- Consentement aux cookies ---------- */
/* Bandeau en bas à droite, et fenêtre de réglage centrée. Les deux sont
   masqués par l'attribut hidden tant que le JS n'a pas lu le choix stocké. */

.ck,
.ck-modale { font-family: var(--f-texte); }
.ck[hidden],
.ck-modale[hidden] { display: none; }

.ck {
  position: fixed;
  right: var(--sp-05);
  bottom: var(--sp-05);
  z-index: 90;
  width: calc(100vw - 2 * var(--sp-05));
  max-width: 25rem;
  padding: var(--sp-06);
  border-radius: 1rem;
  background: #000000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
              0 1.5rem 3rem rgba(0, 0, 0, 0.55);
  color: #ffffff;
}

/* l'entrée se fait par le bas, sans mouvement si l'appareil le refuse */
@media (prefers-reduced-motion: no-preference) {
  .ck { animation: ckEntre var(--dur-moderate-02) var(--ease-entrance) both; }
  @keyframes ckEntre {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: none; }
  }
}

.ck__titre {
  margin: 0 0 var(--sp-04);
  font-family: var(--f-titre);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #ffffff;
}
.ck__texte {
  margin: 0 0 var(--sp-06);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.ck__texte a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ck__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-04);
  margin-bottom: var(--sp-04);
}

/* les boutons du bandeau et de la fenêtre partagent la même base */
.ck__b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--sp-05);
  border: none;
  border-radius: 0.6rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}
.ck__b--plein { background: #ffffff; color: #000000; }
.ck__b--gris  { background: #1c1c1c; color: #ffffff; }
.ck__b--large { display: flex; width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .ck__b--plein:hover { background: rgba(255, 255, 255, 0.86); }
  .ck__b--gris:hover  { background: #262626; }
}
.ck__b:focus-visible,
.ck-modale__x:focus-visible,
.ck-cat__nom:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ---- la fenêtre de réglage ---- */

.ck-modale {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-05);
}

.ck-modale__voile {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.ck-modale__boite {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - 2 * var(--sp-05));
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background: #000000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
              0 2rem 4rem rgba(0, 0, 0, 0.6);
  color: #ffffff;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .ck-modale__boite { animation: ckBoite var(--dur-moderate-02) var(--ease-entrance) both; }
  @keyframes ckBoite {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
}

.ck-modale__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-05);
  padding: var(--sp-06) var(--sp-06) var(--sp-05);
}
.ck-modale__titre {
  margin: 0;
  font-family: var(--f-titre);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.ck-modale__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border: none;
  border-radius: 0.5rem;
  background: none;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: background var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}
@media (hover: hover) and (pointer: fine) {
  .ck-modale__x:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
}

/* le corps défile si les descriptions sont toutes dépliées */
.ck-modale__corps {
  padding: 0 var(--sp-06);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-04);
}

.ck-cat {
  border-radius: 0.75rem;
  background: #131313;
}
.ck-cat__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-05);
  padding: var(--sp-05);
}
.ck-cat__nom {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-04);
  padding: 0;
  border: none;
  background: none;
  font-family: var(--f-titre);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}
.ck-cat__fleche {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.62);
  transition: transform var(--dur-fast-02) var(--ease-productive);
}
.ck-cat__nom[aria-expanded="true"] .ck-cat__fleche { transform: rotate(180deg); }

.ck-cat__desc {
  padding: 0 var(--sp-05) var(--sp-05);
}
.ck-cat__desc[hidden] { display: none; }
.ck-cat__desc p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- l'interrupteur ---- */

.ck-bascule {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  width: 3.25rem;
  height: 1.75rem;
  border-radius: 999px;
  background: #3a3a3a;
  cursor: pointer;
  transition: background var(--dur-fast-02) var(--ease-productive);
}
.ck-bascule input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
/* la pastille */
.ck-bascule i {
  position: absolute;
  left: 0.1875rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: #ffffff;
  transition: transform var(--dur-moderate-01) var(--ease-productive);
}
.ck-bascule:has(input:checked) { background: #ffffff; }
.ck-bascule:has(input:checked) i { transform: translateX(1.5rem); background: #000000; }

/* nécessaires : toujours actifs, donc à droite et grisés */
.ck-bascule--fige { background: #3a3a3a; cursor: default; }
.ck-bascule--fige i { transform: translateX(1.5rem); background: #9a9a9a; }

.ck-bascule:has(input:focus-visible) { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ---- le pied de la fenêtre ---- */

.ck-modale__pied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-04);
  padding: var(--sp-06);
}
.ck-modale__pied .ck__b { flex: 1 1 auto; }
/* « Enregistrer » se détache à droite sur les écrans larges */
@media (min-width: 34rem) {
  .ck-modale__enr { margin-left: auto; flex: 0 0 auto; }
}

/* ---- petits écrans ---- */

@media (max-width: 30rem) {
  .ck {
    right: var(--sp-04);
    left: var(--sp-04);
    bottom: var(--sp-04);
    width: auto;
    max-width: none;
    padding: var(--sp-05);
  }
  .ck__actions { grid-template-columns: 1fr; }
  .ck-modale__pied { flex-direction: column; }
  .ck-modale__pied .ck__b { width: 100%; }
}

/* le navigateur ne connaît pas :has() : les interrupteurs restent lisibles,
   la couche JS pose la classe de repli */
.ck-bascule.is-on { background: #ffffff; }
.ck-bascule.is-on i { transform: translateX(1.5rem); background: #000000; }

/* ---------- Tableau de bord SEO : quatre écrans illustratifs ---------- */
/* Reprend la mise en forme d'un tableau de bord sombre : cartes à liseré,
   courbes tracées à l'apparition. Le fond noir vient de .page-noire. */

.tb {
  --tb-bord: #1d1d1d;
  padding: var(--sp-10) 0 var(--sp-11);
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tb__tete {
  max-width: var(--grid-max);
  margin: 0 auto var(--sp-09);
  padding: 0 var(--grid-margin);
}
@media (min-width: 42rem) { .tb__tete { padding: 0 var(--grid-gutter); } }

.tb__titre { color: #ffffff; }
.tb__intro {
  max-width: 46rem;
  margin-top: var(--sp-05);
  color: rgba(255, 255, 255, 0.58);
}

.tb__grille {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--tb-bord);
}
@media (min-width: 42rem) { .tb__grille { padding: 0 var(--grid-gutter); } }
/* deux par deux, séparées par des filets */
@media (min-width: 56rem) {
  .tb__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb__c:nth-child(odd) { border-right: 1px solid var(--tb-bord); }
}

/* la carte : pas de conteneur, le fond noir de la page et un filet */
.tb__c {
  position: relative;
  overflow: hidden;
  min-height: 21rem;
  padding: var(--sp-08) var(--sp-07);
  border-bottom: 1px solid var(--tb-bord);
  background: none;
}
.tb__c--alerte { display: flex; flex-direction: column; }

/* fondu noir sur le bord droit de chaque écran : la courbe et les libellés
   se perdent dans le fond plutôt que de buter sur le filet de séparation */
/* Chaque écran sort de l'ombre par la droite : le noir est plein sur le
   dernier tiers de la bande, puis se lève progressivement. Il passe
   au-dessus du contenu, courbes comme libellés. */
.tb__c::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 42%;
  z-index: 4;
  background: linear-gradient(-90deg,
              #000000 0%,
              #000000 26%,
              rgba(0, 0, 0, 0.92) 42%,
              rgba(0, 0, 0, 0.65) 62%,
              rgba(0, 0, 0, 0.28) 82%,
              transparent 100%);
  pointer-events: none;
}

/* le contenu se place sous l'ombre */
.tb__haut,
.tb__legende,
.tb__themes,
.tb__alerte,
.tb__encart { position: relative; z-index: 3; }

/* les textes s'arrêtent avant la partie opaque de l'ombre */
.tb__parts,
.tb__legende { padding-right: 4.5rem; }
.tb__encart,
.tb__haut { padding-right: 2rem; }

.tb__haut { margin-bottom: var(--sp-06); }
.tb__haut--rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-05) var(--sp-06);
}

.tb__lib {
  margin: 0 0 var(--sp-03);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.62);
}
.tb__haut--rangee .tb__lib { margin-bottom: 0; }

.tb__val {
  margin: 0;
  font-family: var(--f-titre);
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* ---- les courbes ---- */

.tb__courbe {
  position: absolute;
  inset: 8rem var(--sp-07) 4rem;
}
.tb__courbe svg,
.tb__multi svg { width: 100%; height: 100%; overflow: visible; }

.tb__multi { height: 17rem; }

.tb__axe  { stroke: #272727; stroke-width: 1; }
.tb__ligne { stroke: #222222; stroke-width: 1; stroke-dasharray: 8 10; }
.tb__grad { fill: #777777; font-size: 14px; font-family: var(--f-texte); }

.tb__trace {
  fill: none;
  stroke: #4b91ff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tb__trace--blanc  { stroke: #eeeeee; }
.tb__trace--bleu   { stroke: #1689ff; }
.tb__trace--orange { stroke: #ef7651; }
.tb__trace--cyan   { stroke: #13a9b5; }
.tb__trace--rouge  { stroke: #ff3347; }

/* le tracé se dessine quand la carte entre à l'écran */
@media (prefers-reduced-motion: no-preference) {
  .tb__trace {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
  }
  .is-vu .tb__trace { animation: tbTrace 1.6s var(--ease-productive) forwards; }
  .is-vu .tb__trace--bleu   { animation-delay: 0.12s; }
  .is-vu .tb__trace--orange { animation-delay: 0.24s; }
  .is-vu .tb__trace--cyan   { animation-delay: 0.36s; }
  .is-vu .tb__trace--rouge  { animation-delay: 0.48s; }
  @keyframes tbTrace { to { stroke-dashoffset: 0; } }
}

.tb__legende {
  position: absolute;
  left: var(--sp-07);
  right: var(--sp-07);
  bottom: var(--sp-07);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.58);
}
/* sous la courbe multiple, la légende reste dans le flux */
.tb__multi + .tb__legende { position: static; margin-top: var(--sp-05); }

.tb__pastille {
  flex: 0 0 auto;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: #4b91ff;
}

/* les sources, en légende de la courbe multiple */
.tb__sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-03) var(--sp-05);
  /* la légende reste en dehors de l'ombre de droite */
  max-width: 58%;
}
.tb__source {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-03);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.tb__source i {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
}

/* ---- la carte d'alerte ---- */

.tb__alerte {
  display: flex;
  align-items: center;
  gap: var(--sp-05);
  margin-bottom: var(--sp-06);
  padding: var(--sp-05) var(--sp-06);
  border-radius: 0.75rem;
  background: linear-gradient(90deg, #2a0007, #140004 55%, transparent);
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #ff4050;
}
.tb__alerte-ico {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #ff2738;
  color: #080808;
}

.tb__encart {
  flex: 1 1 auto;
  padding: var(--sp-06);
  border: 1px solid #2a2a2a;
  border-radius: 1rem;
  background: rgba(13, 13, 13, 0.9);
}
.tb__encart-h {
  margin: 0 0 var(--sp-04);
  font-family: var(--f-titre);
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.tb__encart-s {
  margin: 0 0 var(--sp-07);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.58);
}

.tb__pourquoi {
  padding: var(--sp-06);
  border: 1px solid #303030;
  border-radius: 1rem;
  background: #141414;
}
.tb__pourquoi-t {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  margin: 0 0 var(--sp-05);
  font-family: var(--f-titre);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.tb__info {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #ededed;
  color: #171717;
  font-size: 0.8125rem;
  font-weight: 700;
  font-style: normal;
}
.tb__pourquoi-p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- intentions de recherche ---- */

.tb__themes { display: flex; flex-direction: column; height: 100%; }

.tb__theme {
  padding: var(--sp-05) 0 var(--sp-06);
  border-bottom: 1px solid #2a2a2a;
}
.tb__theme-t {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  margin: 0 0 var(--sp-05);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.66);
}
.tb__theme-p {
  margin: 0;
  font-family: var(--f-titre);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.tb__jauge {
  flex: 0 0 auto;
  width: 0.1875rem;
  height: 1.125rem;
  border-radius: 10px;
  background: #14c878;
}
.tb__jauge--rouge { background: #ff4b55; }

.tb__part { margin-top: auto; padding-top: var(--sp-08); }

.tb__barre {
  display: flex;
  height: 0.1875rem;
  border-radius: 99px;
  overflow: hidden;
  background: #222222;
}
.tb__barre-ok {
  width: 0;
  background: #14c878;
  transition: width var(--dur-moderate-02) var(--ease-productive);
}
.is-vu .tb__barre-ok { width: var(--part); }
.tb__barre-non { flex: 1 1 auto; background: #7b2227; }

.tb__parts {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-05);
  margin: var(--sp-05) 0 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.58);
}

/* ---- petits écrans ---- */

@media (max-width: 42rem) {
  .tb__c { min-height: 18rem; padding: var(--sp-07) var(--sp-05); }
  /* moins de place : l'ombre se resserre pour ne pas manger les libellés */
  .tb__c::after { width: 26%; }
  .tb__sources { max-width: none; }
  .tb__theme-p, .tb__theme-t { padding-right: 1.5rem; }
  .tb__courbe { inset: 7.5rem var(--sp-05) 3.75rem; }
  .tb__legende { left: var(--sp-05); right: var(--sp-05); bottom: var(--sp-05); }
  .tb__multi { height: 13rem; }
  .tb__alerte { padding: var(--sp-04) var(--sp-05); font-size: 1.0625rem; }
  .tb__encart { padding: var(--sp-05); }
  .tb__encart-h { font-size: 1.125rem; }
  .tb__theme-p { font-size: 1rem; }
}

/* ---------- Héros « Intégration IA » : l'orbite seule ---------- */
/* Même mockup que l'accueil, sans les satellites de moteurs : il ne reste
   que le logo et les anneaux, dont les bordures s'animent. */

.shero__orbite {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
}

.orbite--nue { width: 20rem; height: 20rem; }
.orbite--nue .orbite__cercle--1 { width: 9rem;  height: 9rem; }
.orbite--nue .orbite__cercle--2 { width: 14rem; height: 14rem; }
.orbite--nue .orbite__cercle--3 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19.5rem;
  height: 19.5rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* le cœur, un peu plus grand que sur l'accueil */
.orbite--nue .orbite__coeur {
  width: 5.5rem;
  height: 5.5rem;
  margin: -2.75rem 0 0 -2.75rem;
  border-radius: 1.65rem;
}
.orbite--nue .orbite__coeur svg { width: 2.5rem; height: 2.5rem; }

/* ---- l'effet de bordure : une lueur parcourt les deux anneaux extérieurs ---- */
/* Le dégradé conique est peint dans la marge intérieure, et le masque ne
   laisse voir que l'épaisseur du trait : c'est la bordure qui s'illumine. */

.orbite--nue .orbite__cercle--2::after,
.orbite--nue .orbite__cercle--3::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(from var(--tour, 0deg),
              transparent 0deg,
              rgba(255, 255, 255, 0.55) 28deg,
              rgba(255, 255, 255, 0.9) 42deg,
              rgba(255, 255, 255, 0.45) 56deg,
              transparent 90deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .orbite--nue .orbite__cercle--2::after { animation: orbiteTour 6s linear infinite; }
  /* l'anneau extérieur tourne plus lentement, et en décalage */
  .orbite--nue .orbite__cercle--3::after { animation: orbiteTour 9s linear infinite -3s; }

  @keyframes orbiteTour {
    from { --tour: 0deg; }
    to   { --tour: 360deg; }
  }

  /* les anneaux respirent doucement */
  .orbite--nue .orbite__cercle--1 { animation: orbiteSouffle 5s var(--ease-productive) infinite; }
  .orbite--nue .orbite__cercle--2 { animation: orbiteSouffle 5s var(--ease-productive) infinite -1.6s; }
  @keyframes orbiteSouffle {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50%      { transform: translate(-50%, -50%) scale(1.025); opacity: 0.72; }
  }
}

/* un halo discret derrière le cœur */
.orbite--nue::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11rem;
  height: 11rem;
  margin: -5.5rem 0 0 -5.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.055), transparent 70%);
  pointer-events: none;
}

/* l'orbite passe sous le texte, et se réduit, sur les écrans étroits */
@media (max-width: 62rem) {
  .shero__orbite { min-height: 0; }
  .orbite--nue { width: 16rem; height: 16rem; }
  .orbite--nue .orbite__cercle--1 { width: 7.25rem;  height: 7.25rem; }
  .orbite--nue .orbite__cercle--2 { width: 11.25rem; height: 11.25rem; }
  .orbite--nue .orbite__cercle--3 { width: 15.5rem;  height: 15.5rem; }
  .orbite--nue .orbite__coeur {
    width: 4.5rem; height: 4.5rem;
    margin: -2.25rem 0 0 -2.25rem;
    border-radius: 1.35rem;
  }
  .orbite--nue .orbite__coeur svg { width: 2rem; height: 2rem; }
}

/* ---------- Les étapes du référencement, héros SEO ---------- */
/* Trois colonnes de tuiles qui défilent, comme le héros de la page services,
   mais chaque tuile porte le nom d'une étape au lieu d'une icône. */

.cycle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-04);
  height: 22rem;
  overflow: hidden;
  /* les tuiles s'effacent en haut et en bas */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
@media (min-width: 62rem) { .cycle { height: 26rem; } }

.cycle__col { overflow: hidden; }

.cycle__piste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-04);
  /* la série est doublée : la boucle se referme sans saut visible */
  animation: cycleMonte 34s linear infinite;
  will-change: transform;
}

/* une colonne sur deux descend, pour casser la régularité */
.cycle__col--2 .cycle__piste { animation-name: cycleDescend; animation-duration: 40s; }
.cycle__col--3 .cycle__piste { animation-duration: 30s; }

@keyframes cycleMonte {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes cycleDescend {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

/* la tuile : celle de la page services, mais avec le texte dedans */
.cycle__t {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--f-texte);
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 62rem) {
  .cycle { height: 19rem; }
  .cycle__t { font-size: 0.75rem; padding: 0.375rem; }
}

/* l'animation s'arrête si l'utilisateur ne veut pas de mouvement */
@media (prefers-reduced-motion: reduce) {
  .cycle__piste { animation: none; }
}

/* ---------- Le tableau de bord dans le héros des pages offre ---------- */
/* Repris de l'accueil, mais dans une demi-colonne : plus court, et la barre
   latérale ne s'affiche que si la place le permet vraiment. */

.thero__visuel--bord {
  align-self: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.thero__visuel--bord .bord {
  height: auto;
  min-height: 21rem;
  /* pas d'arrondi en bas : la maquette s'enfonce dans la page */
  border-radius: 0.875rem 0.875rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: none;
}

/* la maquette sort de l'ombre par la droite */
.thero__visuel--bord { position: relative; }
.thero__visuel--bord::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 42%;
  z-index: 4;
  background: linear-gradient(-90deg,
              #000000 0%,
              #000000 26%,
              rgba(0, 0, 0, 0.92) 42%,
              rgba(0, 0, 0, 0.65) 62%,
              rgba(0, 0, 0, 0.28) 82%,
              transparent 100%);
  pointer-events: none;
}
@media (max-width: 48rem) {
  .thero__visuel--bord::after { width: 26%; }
}

/* dans cette largeur, la barre latérale mangerait la place : on la cache
   jusqu'à ce que la colonne soit assez large */
.thero__visuel--bord .bord__cote { display: none; }
@media (min-width: 75rem) {
  .thero__visuel--bord .bord__cote { display: flex; flex: 0 0 10rem; }
}

.thero__visuel--bord .bord__zone { padding-bottom: var(--sp-06); }

/* le tableau des positions tient sans défiler */
.thero__visuel--bord .bord__table { margin-bottom: 0; }

/* le tableau de bord ne dépasse jamais sa colonne */
.thero__visuel--bord .bord {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.thero__visuel--bord .bord__zone { min-width: 0; }

/* ---------- Maquettes propres à la page e-commerce ---------- */
/* Trois écrans dédiés : le catalogue, le tunnel de commande et les
   commandes qui tombent. Mêmes codes que les autres maquettes du site. */

.mocks--ecom {
  --m-bord: #1d1d1d;
  background: #000000;
  color: #f5f5f5;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* le fondu de droite, comme sur les autres maquettes */
.mocks--ecom .visual::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 42%;
  z-index: 4;
  background: linear-gradient(-90deg,
              #000000 0%, #000000 26%,
              rgba(0, 0, 0, 0.92) 42%,
              rgba(0, 0, 0, 0.65) 62%,
              rgba(0, 0, 0, 0.28) 82%,
              transparent 100%);
  pointer-events: none;
}
@media (max-width: 48rem) {
  .mocks--ecom .visual::after { width: 26%; }
}

/* la maquette du catalogue prend plus de place */
@media (min-width: 48rem) {
  .mocks--ecom .mock--large { grid-template-columns: 1.35fr 1fr; }
}

.mocks--ecom .visual {
  padding: var(--sp-07);
  align-items: center;
  justify-content: center;
}

/* ---- 1. le catalogue ---- */

.cat {
  width: 100%;
  max-width: 24rem;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.cat__barre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
.cat__loupe {
  width: 0.7rem; height: 0.7rem;
  flex: 0 0 auto;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}
.cat__txt {
  font-family: var(--f-texte);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.62);
}

.cat__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.cat__p {
  position: relative;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  opacity: 0;
}
.is-vu .cat__p { animation: catIn .45s var(--ease-productive) both; }
.is-vu .cat__p:nth-child(1) { animation-delay: .1s; }
.is-vu .cat__p:nth-child(2) { animation-delay: .25s; }
.is-vu .cat__p:nth-child(3) { animation-delay: .4s; }
.is-vu .cat__p:nth-child(4) { animation-delay: .55s; }
@keyframes catIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* le produit mis en avant */
.cat__p--on {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.cat__img {
  display: block;
  height: 2.4rem;
  margin-bottom: 0.4rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
}
.cat__n {
  display: block;
  height: 5px;
  width: 72%;
  margin-bottom: 0.35rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
}
.cat__pr {
  font-family: var(--f-titre);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.cat__stock {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--f-texte);
  font-size: 0.5625rem;
  color: #42be65;
}

.cat__filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.cat__f {
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  font-family: var(--f-texte);
  font-size: 0.5625rem;
  color: rgba(255, 255, 255, 0.55);
}
.cat__f--on {
  background: #ffffff;
  box-shadow: none;
  color: #000000;
}

/* ---- 2. le tunnel de commande ---- */

.tun {
  width: 100%;
  max-width: 19rem;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.tun__etape {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  margin-bottom: 0.4rem;
  background: rgba(255, 255, 255, 0.04);
}
.tun__n {
  display: grid;
  place-items: center;
  width: 1.1rem; height: 1.1rem;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  font-family: var(--f-texte);
  font-size: 0.5625rem;
  color: rgba(255, 255, 255, 0.72);
}
.tun__l {
  flex: 1 1 auto;
  font-family: var(--f-texte);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
}

/* les étapes franchies */
.tun__etape--ok .tun__n { background: #42be65; box-shadow: none; color: #000000; }
.tun__c {
  width: 0.85rem; height: 0.85rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(66, 190, 101, 0.16);
  position: relative;
}
.tun__c::after {
  content: "";
  position: absolute;
  left: 0.26rem; top: 0.25rem;
  width: 0.28rem; height: 0.14rem;
  border-left: 1.5px solid #42be65;
  border-bottom: 1.5px solid #42be65;
  transform: rotate(-45deg);
}

/* l'étape en cours */
.tun__etape--on {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.tun__etape--on .tun__n { background: #ffffff; box-shadow: none; color: #000000; }
.tun__barre {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: #ffffff;
}
.is-vu .tun__barre { animation: tunBarre 1.6s var(--ease-productive) .4s forwards; }
@keyframes tunBarre { to { width: 100%; } }

.tun__note {
  margin: 0.6rem 0 0;
  font-family: var(--f-texte);
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.45);
}

.tun__paye {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.tun__paye-l {
  font-family: var(--f-texte);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
}
.tun__paye-v em {
  font-style: normal;
  font-family: var(--f-titre);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* ---- 3. les commandes ---- */

.cmd {
  width: 100%;
  max-width: 20rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.cmd__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cmd__l {
  font-family: var(--f-texte);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
}
.cmd__v em {
  font-style: normal;
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.cmd__liste { padding: 0.4rem; }
.cmd__l1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  font-family: var(--f-texte);
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.62);
  opacity: 0;
}
.cmd__l1 span:first-child { flex: 0 0 2.6rem; color: rgba(255, 255, 255, 0.45); }
.cmd__l1 span:nth-child(2) { flex: 1 1 auto; color: rgba(255, 255, 255, 0.85); }
.cmd__l1 em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 0.5625rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
}
.cmd__l1 em.ok  { background: rgba(66, 190, 101, 0.14); color: #42be65; }
.cmd__l1 em.att { background: rgba(241, 194, 27, 0.14); color: #f1c21b; }

.is-vu .cmd__l1 { animation: cmdIn .4s var(--ease-productive) both; }
.is-vu .cmd__l1:nth-child(1) { animation-delay: .15s; }
.is-vu .cmd__l1:nth-child(2) { animation-delay: .35s; }
.is-vu .cmd__l1:nth-child(3) { animation-delay: .55s; }
.is-vu .cmd__l1:nth-child(4) { animation-delay: .75s; }
@keyframes cmdIn { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }

.cmd__pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.55rem 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--f-texte);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
}
.cmd__pied em {
  font-style: normal;
  font-family: var(--f-titre);
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
}

.cmd__nuit {
  margin: 0;
  padding: 0.5rem 0.8rem 0.7rem;
  font-family: var(--f-texte);
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .is-vu .cat__p, .is-vu .cmd__l1 { animation: none; opacity: 1; }
  .is-vu .tun__barre { animation: none; width: 100%; }
}

/* ---------- Liens vers les sous-pages d'un service ---------- */

.spages {
  padding: var(--sp-10) 0;
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.spages__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}
@media (min-width: 42rem) { .spages__inner { padding: 0 var(--grid-gutter); } }

.spages__tete { margin-bottom: var(--sp-08); }
.spages__titre { color: #ffffff; }
.spages__intro {
  max-width: 46rem;
  margin-top: var(--sp-05);
  color: rgba(255, 255, 255, 0.58);
}

/* l'offre mise en avant */
.spages__une {
  position: relative;
  display: block;
  max-width: 46rem;
  padding: var(--sp-07);
  padding-right: var(--sp-09);
  margin-bottom: var(--sp-08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background: #0c0c0c;
  text-decoration: none;
  transition: background var(--dur-fast-02) var(--ease-productive),
              border-color var(--dur-fast-02) var(--ease-productive);
}
@media (hover: hover) and (pointer: fine) {
  .spages__une:hover {
    background: #121212;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .spages__une:hover .spages__fleche { transform: translateX(3px); }
}

.spages__une-sur {
  display: block;
  margin-bottom: var(--sp-04);
  font-family: var(--f-texte);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.spages__une-t {
  display: block;
  margin-bottom: var(--sp-04);
  font-family: var(--f-titre);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #ffffff;
}
.spages__une-p {
  display: block;
  max-width: 34rem;
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.spages__st {
  margin: 0 0 var(--sp-05);
  font-family: var(--f-texte);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* la grille des métiers */
.spages__grille {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 42rem) { .spages__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .spages__grille { grid-template-columns: repeat(4, 1fr); } }

.spages__l {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-05);
  padding: var(--sp-05) var(--sp-04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition: background var(--dur-fast-02) var(--ease-productive);
}
@media (min-width: 42rem) {
  .spages__l:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.14); }
}
@media (min-width: 66rem) {
  /* quatre colonnes : un filet après chaque case, sauf la dernière du rang */
  .spages__l { border-right: 1px solid rgba(255, 255, 255, 0.14); }
  .spages__l:nth-child(4n) { border-right: none; }
}
@media (hover: hover) and (pointer: fine) {
  .spages__l:hover { background: rgba(255, 255, 255, 0.04); }
  .spages__l:hover .spages__l-t { color: #ffffff; }
  .spages__l:hover .spages__fleche { transform: translateX(3px); }
}

.spages__l-t {
  font-family: var(--f-texte);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--dur-fast-02) var(--ease-productive);
}
.spages__l--tous .spages__l-t { color: #ffffff; font-weight: 500; }

.spages__fleche {
  flex: 0 0 auto;
  display: inline-flex;
  color: rgba(255, 255, 255, 0.4);
  transition: transform var(--dur-fast-02) var(--ease-productive);
}
.spages__une .spages__fleche {
  position: absolute;
  top: var(--sp-07);
  right: var(--sp-07);
}