/* components.css — boutons, badges, cartes, navigation, accordéon, marquee. */

/* --- Bouton ------------------------------------------------------------- */
.button {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size--size-4);
  padding: var(--size--size-5) var(--size--size-12);
  border-radius: var(--border-radius--xxsmall);
  background-color: var(--_colors---primary--black);
  color: var(--_colors---primary--white);
  font-size: var(--size--size-9);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: -.01em;
  position: relative;
  transition: background-color .3s ease;
}
.button:hover { background-color: var(--_colors---grey--700); }

.button.is-large { padding: var(--size--size-6) var(--size--size-14); gap: var(--size--size-10); font-size: var(--size--size-10); }
/* Variante « small-secondary » de la source : posée sur le fond de page,
   elle se contente d'un ton plus soutenu que le fond. */
.button.is-secondary { background-color: var(--_colors---bleu--150); color: var(--_colors---bleu--500); }
.button.is-secondary:hover { background-color: var(--_colors---bleu--200); }
.button.is-white { background-color: var(--_colors---primary--white); color: var(--_colors---primary--black); }
.button.is-white:hover { background-color: var(--_colors---bleu--100); }
.button.is-ghost {
  background-color: transparent;
  color: var(--_colors---primary--black);
  border: 1px solid var(--_colors---bleu--150);
}
.button.is-ghost:hover { background-color: var(--_colors---bleu--100); }

/* Les deux calques de texte qui se relaient au survol. */
.button_texts { position: relative; display: flex; align-items: center; justify-content: center; }
.button_text { position: relative; z-index: 2; white-space: nowrap; }
/* Pas d'`inset: 0` : sans décalage imposé, le calque absolu garde la position
   que le flex lui donnait, donc il reste centré. Avec `inset`, il se collait
   au bord gauche et le texte de survol arrivait décalé. */
.button_text._2 { position: absolute; z-index: 3; display: none; }

.button_icon { width: var(--size--size-8); height: var(--size--size-8); flex: none; }

/* --- Étiquettes --------------------------------------------------------- */
.label_component {
  display: inline-flex;
  align-items: center;
  gap: var(--size--size-7);
  padding: var(--size--size-6) var(--size--size-9);
  border: 1px solid var(--_colors---bleu--150);
  border-radius: var(--size--size-16);
  color: var(--_colors---bleu--400);
}
.label_component.is-dark { border-color: var(--_colors---white--30); color: var(--_colors---grey--300); }
.label_icon { width: var(--size--size-11); height: var(--size--size-11); flex: none; }

.label-plus_component { display: inline-flex; align-items: center; justify-content: center; gap: var(--size--size-3); }
.label-plus_plus { width: var(--size--size-10); height: var(--size--size-10); flex: none; opacity: .48; }
.label-plus_text {
  font-family: var(--_typography---font-family--detail);
  font-size: var(--size--size-7);
  line-height: 120%;
  text-transform: uppercase;
  color: var(--_colors---white--70);
}

/* Le libellé est prévu pour un fond sombre. Sur fond clair il passe en gris et
   le « + », blanc dans le fichier source, s'inverse en noir. Le template fait
   la même bascule par variantes Webflow ; on garde ses noms de couleur. */
.label-plus_component.text-grey-400 .label-plus_text { color: var(--_colors---grey--400); }
.label-plus_component.text-grey-400 .label-plus_plus { filter: invert(1); }
.label-plus_component.text-white-50 .label-plus_text { color: var(--_colors---white--50); }
.label_plus-wrap { display: inline-flex; }

/* --- Barre d'information (le bandeau brun du hero) ----------------------
   La mise en page de la bande est dans home.css, avec le reste du héros.
   Ici, seulement le bouton de fermeture, qui se cale dans son coin. */
.news-bar_arrow-icon { width: var(--size--size-8); height: var(--size--size-8); }
.news-bar_close {
  position: absolute; top: 0; right: 0;
  display: flex; justify-content: center; align-items: center;
  aspect-ratio: 1; height: 100%; min-height: 3rem;
  flex: none;
  background: none; border: 0; cursor: pointer;
  opacity: .7;
}
.news-bar_close:hover { opacity: 1; }
.news-bar_close img { width: var(--size--size-11); height: var(--size--size-11); }

/* --- Navigation --------------------------------------------------------- */
.navbar { position: fixed; inset: 0 0 auto; z-index: 99; }

/* La barre s'escamote vers le haut dès qu'on descend, et revient dès qu'on
   remonte. Valeurs relevées sur la source : translation de -150 % de sa
   hauteur, 670 ms, courbe ajustée sur 40 points de mesure. */
.navbar_content {
  position: relative; z-index: 3;
  width: 100%;
  background-color: var(--_colors---primary--paper);
  transition: transform .67s cubic-bezier(.36, .98, .74, .98);
}
.navbar_content.is-hidden { transform: translateY(-150%); }

.navbar_component { display: flex; align-items: center; justify-content: space-between; gap: var(--size--size-15); }
/* La hauteur de la barre vient d'ici (70 px relevés) ; les liens s'y centrent
   verticalement, ils ne se calent pas en haut. */
.navbar_links-wrap { display: flex; justify-content: center; align-items: center; min-height: 70px; margin-left: auto; }
/* La marque est le logo fourni par le client (PNG 1000 × 198, fond rendu
   transparent par `_tools/make-logo.mjs`, `assets/img/logo-specteur.png`), affiché à la hauteur relevée
   sur la source : 32 px. Le même fichier sert en en-tête et au pied de page. */
.logo, .footer_logo {
  display: block;
  height: var(--size--size-15);
  width: auto;
}
.navbar_links { display: flex; align-items: center; gap: var(--size--size-15); }
.navbar_link {
  display: inline-flex; align-items: center; gap: var(--size--size-3);
  font-size: var(--size--size-9);
  color: var(--_colors---bleu--500);
  transition: color .25s ease;
}
.navbar_link:hover, .navbar_link.is-current { color: var(--_colors---primary--black); }

/* Sélecteur de langue : quatre codes courts, séparés par des points comme les
   liens du pied, même gris que les liens de navigation, la langue courante en
   noir. Sur tablette et mobile, il reste visible à côté du bouton : c'est le
   seul repère de langue quand les liens sont repliés. */
.navbar_langues { display: flex; align-items: center; gap: var(--size--size-4); }
.navbar_langue {
  font-family: var(--_typography---font-family--detail);
  font-size: var(--size--size-7);
  letter-spacing: .04em;
  color: var(--_colors---bleu--275);
  text-decoration: none;
  transition: color .2s;
}
.navbar_langue + .navbar_langue::before { content: "·"; margin-right: var(--size--size-4); color: var(--_colors---bleu--200); }
.navbar_langue:hover, .navbar_langue.is-current { color: var(--_colors---primary--black); }
/* Le logo ne se comprime jamais, même quand la barre est pleine. */
.logo_wrapper { flex: none; }
/* Liens repliés (tablette) : le sélecteur se range contre le bouton. */
@media (max-width: 991px) { .navbar_langues { margin-left: auto; } }
/* Mobile : logo et bouton se partagent la première ligne, le sélecteur passe
   dessous, aligné à droite, sans écraser le logo. */
@media (max-width: 479px) {
  .navbar_component { flex-wrap: wrap; row-gap: var(--size--size-4); }
  .navbar_langues { order: 3; width: 100%; justify-content: flex-end; margin-left: 0; gap: var(--size--size-3); }
  .navbar_langue + .navbar_langue::before { margin-right: var(--size--size-3); }
}

/* Le panneau s'ancre sur la barre entière, pas sur le bouton « Pages » :
   centré sur le bouton, il sortait de l'écran par la droite et la dernière
   colonne devenait invisible. La source fait de même — son panneau occupe
   toute la largeur du conteneur. */
.navbar_component { position: relative; }
.nav_dropdown { position: static; }
.nav_drop-icon { width: .5rem; height: .5rem; display: block; }

/* Le panneau du méga-menu */
.nav_drop-list {
  position: absolute;
  top: calc(100% + var(--size--size-10));
  left: 0; right: 0;
  width: auto;
  padding: var(--size--size-15);
  border-radius: var(--border-radius--large);
  background-color: var(--_colors---grey--700);
  color: var(--_colors---primary--white);
  box-shadow: 0 24px 60px rgb(0 0 0 / 18%);
}
.nav_drop-headings { display: flex; flex-direction: column; gap: var(--size--size-2); margin-bottom: var(--size--size-15); }
.nav_drop-heading { font-size: var(--size--size-12); font-weight: var(--_typography---font-weight--medium); }
.nav_drop-links { display: grid; grid-template-columns: 3fr 1fr; gap: var(--size--size-19); }
.nav_drop-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--size--size-15); }
.nav_drop-page-label {
  font-family: var(--_typography---font-family--detail);
  font-size: var(--size--size-6);
  text-transform: uppercase;
  color: var(--_colors---grey--400);
  margin-bottom: var(--size--size-10);
}
.nav_drop-links-list { display: flex; flex-direction: column; gap: var(--size--size-12); }
/* Hauteur de ligne fixe : une description qui passerait sur deux lignes
   décalerait toute sa colonne, et les entrées ne seraient plus en face les
   unes des autres d'une colonne à l'autre. */
.navbar_drop-link { display: flex; gap: var(--size--size-8); align-items: flex-start; min-height: var(--size--size-23); }
.navbar_drop-icon-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--size--size-4); flex: none; padding-top: .15rem; }
.navbar_drop-icon { width: var(--size--size-12); height: var(--size--size-12); filter: invert(1); }
.nav_drop-link-line { width: 1px; flex: 1; background-color: var(--_colors---grey--550); }
.nav_drop-text-wrap { display: flex; align-items: center; gap: var(--size--size-4); }
.nav_drop-text { font-size: var(--size--size-10); font-weight: var(--_typography---font-weight--medium); }
.nav_drop-arrow-wrap { display: inline-flex; opacity: 0; }
.navbar_drop-link:hover .nav_drop-arrow-wrap { opacity: 1; }
.nav_drop-arrow { width: .6rem; height: .6rem; }
.nav_drop-desc { font-size: var(--size--size-8); color: var(--_colors---grey--400); margin-top: .15rem; }

/* La colonne de droite reprend l'ossature des colonnes de liens — même
   étiquette, même écart sous l'étiquette, même pas vertical — pour que les
   cartes tombent en face des entrées. */
.nav_drop-explore { display: flex; flex-direction: column; gap: var(--size--size-12); }
.nav_drop-card { display: flex; gap: var(--size--size-10); align-items: center; min-height: var(--size--size-23); }
.nav_drop-card-img { width: 5rem; height: 3.25rem; object-fit: cover; border-radius: var(--border-radius--xsmall); flex: none; }

/* --- Cartes ------------------------------------------------------------- */
.card_component {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: var(--size--size-27);
  padding: var(--size--size-15);
  border-radius: var(--border-radius--xxsmall);
  background-color: var(--_colors---primary--white);
}
/* Variante utilisée sur l'accueil : le texte se rapproche du titre. */
.card_component.gap-smaller { gap: var(--size--size-15); }
.card_head { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--size--size-6); }
.card_icon { width: var(--size--size-13); height: auto; }

/* --- Accordéon ---------------------------------------------------------- */
/* Chaque question est une carte blanche posée sur le fond de page, pas une ligne
   séparée par un filet : c'est ce qui donne son relief à la colonne. */
.faq_accordion {
  padding: var(--size--size-10) var(--size--size-12);
  border-radius: var(--border-radius--xxsmall);
  background-color: #fff;
  cursor: pointer;
  overflow: clip;
}
.faq_list { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
.faq_question {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%; text-align: left;
  font-size: var(--size--size-11);
  line-height: 1.3;
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: -.01em;
}
.faq_button { position: relative; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex: none; }
.faq_button-line {
  position: absolute; width: var(--size--size-10); height: 1px; flex: none;
  background-color: var(--_colors---grey--625);
}
/* Le trait vertical pivote de 90° à 180° : le « + » devient « − ». */
.faq_button-line.is-vertical { transform: rotate(90deg); }
.faq_answer-wrap { overflow: hidden; }
.faq_answer {
  padding-top: .75rem;
  max-width: var(--_structure---max-width--large);
  color: var(--_colors---bleu--500);
  font-size: var(--size--size-9);
  line-height: 135%;
}

/* --- Marquee ------------------------------------------------------------ */
.marquee_component { overflow: hidden; display: flex; }
.marquee_track { display: flex; flex: none; align-items: center; gap: var(--size--size-24); padding-right: var(--size--size-24); }
.brand_logo { height: var(--size--size-15); width: auto; flex: none; }

/* --- Indicateur de défilement ------------------------------------------
   Un rail d'un pixel dans lequel un segment noir de même hauteur descend en
   boucle. Il part au-dessus du rail (`bottom: 100 %`) et le traverse.
   Mesuré sur la page « à propos » : rail de 4 rem, course de 200 % en 1 s,
   cycle de 1,75 s. La source appelle ces blocs `about-header-v2_scroll`. */
.scroll-hint {
  position: relative; width: 1px; height: var(--size--size-22);
  background-color: var(--_colors---bleu--150); overflow: clip;
}
.scroll-hint_drop {
  position: absolute; bottom: 100%; left: 0; width: 100%; height: 100%;
  background-color: var(--_colors---primary--black);
}

/* --- Zones sombres ------------------------------------------------------ */
.is-dark-section {
  background-color: var(--_colors---grey--800);
  color: var(--_colors---primary--white);
}
.is-dark-section .text-color-body { color: var(--_colors---grey--200); }

/* ======================================================================= */
/* Notre objectif                                                           */
/* ======================================================================= */
.feature_component {
  display: grid;
  grid-template-columns: .75fr .9fr;
  gap: var(--size--size-13);
  justify-content: flex-start;
  place-items: center stretch;
}
.feature_content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; max-width: 30rem; }
.feature_text { max-width: 27rem; color: var(--_colors---grey--500); font-size: var(--size--size-10); }

.feature_image-wrap {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 100%; aspect-ratio: 1;
  border-radius: var(--border-radius--small);
  overflow: clip;
}
.feature_image { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; }

/* Les trois libellés reposent sur un dégradé qui assombrit le bas de l'image :
   sans lui, le texte blanc se perdrait dans les zones claires. */
.feature_labels {
  position: absolute; inset: auto 0 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: var(--size--size-2);
  width: 100%; height: 30%;
  padding: var(--size--size-14);
  background-image: linear-gradient(#0000, #0003 46%, #000000b3);
  color: var(--_colors---primary--white);
}
.feature_labels.lighter { background-image: linear-gradient(#0000 30%, #0000008c); }


/* ======================================================================= */
/* Pied de page                                                             */
/* ======================================================================= */
.footer { background-color: var(--_colors---grey--900); color: var(--_colors---primary--white); padding-top: var(--section--small); }
.footer_content { display: grid; grid-template-columns: .25fr .75fr; gap: var(--size--size-19); }
.footer_brand {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: var(--size--size-17);
  max-width: 15rem;
}
.footer_label { font-weight: var(--_typography---font-weight--medium); }
.text-field {
  width: 100%; margin-top: var(--size--size-4);
  padding: var(--size--size-6) var(--size--size-10);
  border-radius: var(--border-radius--xsmall);
  border: 1px solid var(--_colors---white--20);
  background-color: transparent;
  color: var(--_colors---primary--white);
}
/* Bouton discret, pas blanc : il ne doit pas concurrencer le nom en très gros
   qui défile juste en dessous. */
.footer_newsletter-button {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--size--size-4);
  margin-top: var(--size--size-6);
  padding: var(--size--size-5) var(--size--size-12);
  border: 1px solid #0000;
  border-radius: var(--border-radius--xxsmall);
  background-color: var(--_colors---grey--625);
  color: var(--_colors---primary--white);
  font-size: var(--size--size-6);
  line-height: 1.5;
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: 0;
  text-align: center;
  overflow: hidden;
  transition: background-color .2s cubic-bezier(.614, .001, .333, .995);
}

.footer_links-wrapper { display: flex; gap: var(--size--size-28); }
.footer_links-main { display: flex; flex-direction: column; gap: var(--size--size-14); }
.footer_links-groups { display: flex; gap: var(--size--size-23); }
.footer_links { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--size--size-1); }
.footer_link { color: var(--_colors---grey--200); font-size: var(--size--size-9); }
.footer_link:hover { color: var(--_colors---primary--white); }
.footer_social { display: flex; gap: var(--size--size-6); }
.footer_icon-wrap { display: flex; }
.footer_icon { width: var(--size--size-13); height: var(--size--size-13); }

.footer_legal { margin-top: var(--size--size-24); }
.footer_legal-wrap { display: flex; align-items: center; gap: var(--size--size-10); padding-top: var(--size--size-12); }
.footer_copyright { font-size: var(--size--size-8); color: var(--_colors---grey--300); }
.footer_credit { color: var(--_colors---grey--250); text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.footer_credit:hover { color: var(--_colors---primary--white); }
.footer_legal-divider { width: 1px; height: var(--size--size-8); background-color: var(--_colors---grey--550); }

.footer_bottom { margin-top: var(--size--size-24); }

/* Le nom en très gros : 25vw, six copies. La vitesse (120 s) est celle du
   template ; l'écart avec le bandeau clients (60 s) est volontaire. */
.footer_name-wrapper { display: flex; justify-content: flex-start; align-items: center; overflow: hidden; }
.footer_name-wrap { display: flex; justify-content: flex-start; align-items: center; flex: none; }
.footer_name {
  margin-left: var(--size--size-20);
  font-size: 25vw;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--_colors---primary--white);
  white-space: nowrap;
  /* « Auria » n'avait aucun jambage, « Specteur » en a un : à interligne 1,
     la boîte est plus courte que l'encre et le « p » se faisait couper par
     l'`overflow` du bandeau. En em, la réserve suit les 25vw à tout palier. */
  padding-bottom: .04em;
}
.footer_disclaimer { padding-bottom: var(--size--size-15); }
.footer_disclaimer-text { font-size: var(--size--size-7); color: var(--_colors---grey--400); max-width: var(--_structure---max-width--xlarge); }


/* --- Adaptations des blocs partagés ------------------------------------- */
@media (max-width: 991px) {
  .feature_component { grid-template-columns: 1fr; }
  /* Les colonnes de liens passent sur deux rangées plutôt que de s'écraser. */
  .footer_links-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size--size-18); }
}
@media (max-width: 767px) {
  .footer_content { display: flex; flex-direction: column; gap: var(--size--size-17); }
  .footer_links-wrapper { gap: var(--size--size-15); }
  .footer_links-groups { flex-wrap: wrap; }
  .footer_name { margin-left: var(--size--size-14); font-size: 20vw; }
  .cta_component { padding-top: var(--section--small); padding-bottom: var(--section--small); }
}
@media (max-width: 479px) {
  .footer_name { font-size: 24vw; }
}

/* ======================================================================= */
/* Appel à l'action — partagé par « à propos », FAQ et d'autres pages     */
/* ======================================================================= */
.cta_component {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 100%;
  padding-top: var(--size--size-34); padding-bottom: var(--size--size-34);
  border-radius: var(--border-radius--small);
  overflow: clip;
}
.cta_background-img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.cta_gradient {
  position: absolute; inset: auto 0 0;
  width: 100%; height: 85%;
  background-image: linear-gradient(#0000, #0009);
}
.cta_content {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.cta_head { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; }
/* Phrase de réassurance sous le titre (page Méthode) : bornée pour rester
   lisible sur la photo, centrée comme le reste du bloc. */
.cta_text { max-width: 34rem; margin: 0; font-size: var(--size--size-11); line-height: 1.45; opacity: .85; }
/* Variante à voile plus profond, pour une photo claire (page Méthode) : le
   dégradé couvre tout le bloc et le titre est borné pour se replier sur deux
   lignes plutôt que d'en courir une seule d'un bord à l'autre. */
.cta_component.is-deep .cta_gradient { height: 100%; background-image: linear-gradient(#0003, #000c); }
.cta_component.is-deep .cta_head { max-width: 46rem; }

@media (max-width: 991px) {
  .cta_component { padding-top: var(--section--medium); padding-bottom: var(--section--medium); }
}

@media (max-width: 991px) {
  /* Le menu passe en panneau plein écran : la barre tient sa hauteur par sa
     propre marge intérieure, plus par celle des liens. */
  .navbar_links-wrap { display: none; }
  .navbar_content { padding-top: var(--size--size-7); padding-bottom: var(--size--size-7); }
}

/* --- Liste de questions pleine largeur (pages FAQ et Tarifs) ------------- */
.faq-v2_component { display: flex; flex-direction: column; }
.faq-v2_head { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; max-width: 400px; }
.faq-v2_list { display: flex; flex-direction: column; gap: var(--size--size-4); width: 100%; }

/* --- Bandeau de blocs sur fond sombre (pages Tarifs et Services) --------
   Un seul cadre, des filets entre les blocs plutôt qu'autour de chacun :
   ils se lisent comme une table, pas comme des cartes séparées. */
/* Un seul cadre pour les quatre blocs, et des filets entre eux plutôt
   qu'autour de chacun : c'est ce qui les fait lire comme une seule table. */
.card-dark_list {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  width: 100%;
  border: 1px solid var(--_colors---grey--550);
  border-radius: var(--border-radius--xxsmall);
  overflow: clip;
}
.card-dark_component {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: var(--size--size-29);
  width: 100%;
  padding: var(--size--size-13);
}
.card-dark_component + .card-dark_component { border-left: 1px solid var(--_colors---grey--550); }
.card-dark_texts { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--size--size-1); }
.card-dark_title { color: var(--_colors---primary--white); font-size: var(--size--size-11); }
.card-dark_description { color: var(--_colors---grey--250); font-size: var(--size--size-8); }
.card-dark_icon { width: var(--size--size-13); height: auto; }
@media (max-width: 991px) {
  .card-dark_list { grid-template-columns: 1fr 1fr; }
  /* Avec deux colonnes, les filets verticaux ne tombent plus juste : on
     encadre chaque bloc par le haut et par la gauche. */
  .card-dark_component + .card-dark_component { border-left: 0; }
  .card-dark_component:nth-child(even) { border-left: 1px solid var(--_colors---grey--550); }
  .card-dark_component:nth-child(n + 3) { border-top: 1px solid var(--_colors---grey--550); }
}
@media (max-width: 767px) {
  .card-dark_list { grid-template-columns: 1fr; }
  .card-dark_component + .card-dark_component { border-left: 0; border-top: 1px solid var(--_colors---grey--550); }
  .card-dark_component:nth-child(even) { border-left: 0; }
  .card-dark_component { gap: var(--size--size-22); }
}

/* Variante claire du même bandeau. Le nom de base vient du gabarit, qui ne
   l'emploie que sur fond sombre ; ici le cadre et les filets passent en bleu clair
   et le texte s'inverse. Sert aux étapes et aux livrables des pages métier. */
.card-dark_list.is-light { border-color: var(--_colors---bleu--150); background-color: var(--_colors---primary--white); }
.card-dark_list.is-light .card-dark_component { border-color: var(--_colors---bleu--150); }
.card-dark_list.is-light .card-dark_title { color: var(--_colors---primary--black); }
.card-dark_list.is-light .card-dark_description { color: var(--_colors---bleu--500); }

/* Le numéro d'étape occupe la place de l'icône : même gabarit, autre repère. */
.card-dark_step {
  font-family: var(--_typography---font-family--detail);
  font-size: var(--size--size-9);
  color: var(--_colors---bleu--275);
  letter-spacing: .04em;
}

/* ======================================================================= */
/* Tableau des prestations (pages Technologie et Tarifs)                    */
/* ======================================================================= */
/* Un cadre blanc posé sur le fond de page, des filets bleu clair entre les
   lignes : même vocabulaire que le bandeau clair du déroulé et que les cartes
   de la FAQ. Quatre colonnes ; la première, plus large, porte le nom et sa
   description. */
.prestations_component { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.prestations_head { display: flex; flex-direction: column; align-items: flex-start; max-width: 600px; }

.prestations_table {
  width: 100%;
  border: 1px solid var(--_colors---bleu--150);
  border-radius: var(--border-radius--xxsmall);
  background-color: var(--_colors---primary--white);
  overflow: clip;
}
.prestations_row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--size--size-13);
  align-items: center;
  padding: var(--size--size-12) var(--size--size-13);
}
.prestations_row + .prestations_row { border-top: 1px solid var(--_colors---bleu--150); }
.prestations_row.is-head { padding-top: var(--size--size-10); padding-bottom: var(--size--size-10); color: var(--_colors---bleu--275); }
.prestations_service { display: flex; flex-direction: column; gap: var(--size--size-2); min-width: 0; }
.prestations_title { font-size: var(--size--size-11); font-weight: var(--_typography---font-weight--medium); letter-spacing: -.01em; }
.prestations_desc { margin: 0; color: var(--_colors---bleu--500); font-size: var(--size--size-8); line-height: 1.4; }
/* Le prix en bleu accent, comme les chiffres de la grille au-dessus. */
.prestations_price { color: var(--_colors---primary--accent); font-size: var(--size--size-11); font-weight: var(--_typography---font-weight--medium); white-space: nowrap; }
.prestations_cell { color: var(--_colors---bleu--500); font-size: var(--size--size-9); }
.prestations_notes { display: flex; flex-direction: column; gap: var(--size--size-4); width: 100%; margin-top: var(--size--size-13); text-align: center; }
.prestations_notes p { margin: 0; }

/* Variante sombre, pour la bande noire de la page Tarifs : le cadre prend le
   gris des fiches de tarifs sombres, les filets s'éclaircissent, le prix
   passe en blanc — le bleu accent ne se lit pas sur ce fond. */
.section_prestations.is-dark { background-color: var(--_colors---grey--800); color: var(--_colors---primary--white); }
.section_prestations.is-dark .label-plus_component .label-plus_text { color: var(--_colors---white--60); }
.prestations_table.is-dark { background-color: var(--_colors---grey--650); border-color: var(--_colors---grey--550); }
.prestations_table.is-dark .prestations_row + .prestations_row { border-top-color: var(--_colors---white--10); }
.prestations_table.is-dark .prestations_row.is-head { color: var(--_colors---white--40); }
.prestations_table.is-dark .prestations_desc,
.prestations_table.is-dark .prestations_cell { color: var(--_colors---white--50); }
.prestations_table.is-dark .prestations_price { color: var(--_colors---primary--white); }

@media (max-width: 767px) {
  /* Chaque ligne devient un bloc : le nom en tête, le prix sur sa propre
     ligne, puis délai et suivi côte à côte — trois valeurs de front ne
     tiennent pas sans replier « 10 à 16 semaines » ou « Garantie 2 ans ».
     Chaque valeur est coiffée de l'intitulé de sa colonne. */
  .prestations_row.is-head { display: none; }
  .prestations_row { grid-template-columns: 1fr 1fr; gap: var(--size--size-8) var(--size--size-10); padding: var(--size--size-12) var(--size--size-11); }
  .prestations_service, .prestations_price { grid-column: 1 / -1; }
  .prestations_price, .prestations_cell { display: flex; flex-direction: column; gap: var(--size--size-2); white-space: normal; }
  .prestations_price::before, .prestations_cell::before {
    content: attr(data-colonne);
    font-family: var(--_typography---font-family--detail);
    font-size: var(--size--size-6);
    font-weight: var(--_typography---font-weight--medium);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--_colors---bleu--275);
  }
  .prestations_notes { text-align: left; }
  .prestations_table.is-dark .prestations_price::before,
  .prestations_table.is-dark .prestations_cell::before { color: var(--_colors---white--40); }
}


/* --- Champs de formulaire ----------------------------------------------- */
.form_text-field {
  width: 100%;
  height: var(--size--size-18);
  padding: 0 var(--size--size-10);
  border: 0;
  border-radius: var(--border-radius--xxsmall);
  background-color: var(--_colors---primary--white);
  color: var(--_colors---bleu--500);
}
.form_text-field::placeholder { color: var(--_colors---bleu--275); }
.form_text-field.is-message { height: var(--size--size-31); padding-top: var(--size--size-9); resize: vertical; }
.form_label { display: block; margin-bottom: var(--size--size-4); color: var(--_colors---bleu--500); font-size: var(--size--size-9); }
.form_field + .form_label { margin-top: var(--size--size-11); }

/* Message de confirmation, masqué tant que le formulaire n'a pas été envoyé. */
.card-icon_component { display: flex; flex-direction: column; gap: var(--size--size-13); }
.card-icon_content { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: var(--size--size-9); }
.card-icon_texts { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--size--size-3); }
.card-icon_title { font-size: var(--size--size-11); font-weight: var(--_typography---font-weight--medium); }
.card-icon_text { color: var(--_colors---grey--500); }

/* --- Appel à l'action sur bande sombre (cas clients, clients, blog) ------ */
.section_cta-v2 { background-color: var(--_colors---grey--800); }
.cta-v2_component {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--size--size-32);
  width: 100%;
}
.cta-v2_texts { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--size--size-5); }
.cta-v2_head-wrap { max-width: 48.125rem; }

/* Variante « cadre » (page Clients) : un panneau encadré comme le bandeau à
   quatre blocs, le titre et sa phrase à gauche, le bouton et l'adresse à
   droite, alignés en bas. Sans image : le cadre et la seconde colonne suffisent
   à tenir la bande. */
.cta-v2_component.is-cadre {
  flex-direction: row; justify-content: space-between; align-items: flex-end;
  gap: var(--size--size-19);
  padding: var(--size--size-19);
  border: 1px solid var(--_colors---grey--550);
  border-radius: var(--border-radius--small);
}
.cta-v2_text { max-width: 34rem; margin: var(--size--size-6) 0 0; }
.cta-v2_actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--size--size-10); flex: none; }
.cta-v2_mail { color: var(--_colors---white--60); text-decoration: none; text-transform: none; transition: color .2s; }
.cta-v2_mail:hover { color: var(--_colors---primary--white); }

@media (max-width: 991px) {
  .cta-v2_component { gap: var(--size--size-28); }
  .cta-v2_component.is-cadre { flex-direction: column; align-items: flex-start; gap: var(--size--size-17); padding: var(--size--size-15); }
  .cta-v2_actions { align-items: flex-start; }
}
@media (max-width: 767px) {
  .cta-v2_component { gap: var(--size--size-24); }
  .cta-v2_component.is-cadre { padding: var(--size--size-13); }
}

/* --- Corps de texte des pages légales ----------------------------------- */
.legal_body h2 { margin-top: var(--size--size-19); }
.legal_body h2:first-child { margin-top: 0; }
.legal_body p { margin-top: var(--size--size-10); color: var(--_colors---bleu--500); }
.legal_body ul { margin-top: var(--size--size-10); padding-left: 1.25em; color: var(--_colors---bleu--500); }
.legal_body li + li { margin-top: var(--size--size-4); }
.legal_body a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }

/* Avis posé sur les pages légales traduites : la version française fait foi. */
.i18n_avis { margin: var(--size--size-10) 0 0; padding: var(--size--size-9) var(--size--size-11); border-left: 2px solid var(--_colors---primary--accent); background-color: var(--_colors---primary--white); color: var(--_colors---bleu--500); font-size: var(--size--size-9); }