/* Sections postérieures au mirror Webflow (préfixe `v2_`).
 *
 * Aucune des 291 pages couvertes par qa-diff ne porte ces classes : ce fichier
 * n'est référencé par aucune entrée de src/data/pages-head.json. Il est repris
 * par scripts/generate-fallback-css.mjs dans page-nouvelle.css, le CSS de repli
 * servi aux pages sans gabarit connu (src/data/fallback-head.ts) — relancer ce
 * script après toute modification ici, puis scripts/generate-integrity.mjs et
 * scripts/generate-css-coverage.mjs.
 *
 * Il est aussi ajouté, après la feuille du gabarit, à toute page DE GABARIT
 * qui reçoit une section dont le gabarit n'a pas les règles
 * (src/lib/css-sections.mjs) : sections v2_, mais aussi logos-marquee et
 * hero-formulaire-contact hors de l'accueil et de /contactez-nous, et
 * approche-cards layout-image sur les gabarits qui ne l'ont pas (technos
 * mobiles). Pour ces trois dernières, les règles Webflow sont recopiées
 * VERBATIM en fin de fichier (blocs « Copie verbatim de … »), base ET @media
 * dans l'ordre source : ne pas les retoucher ici, le test
 * css-sections.test.mjs vérifie qu'elles existent à l'identique dans leur
 * feuille d'origine et que chaque @media suit sa règle de base.
 *
 * La concaténation de page-nouvelle.css est alphabétique : le préfixe `v2_`
 * (absent de tout le CSS Webflow, vérifié) rend l'ordre indifférent. Ne pas le
 * remplacer par des classes génériques.
 *
 * ÉCHELLE — ces sections empruntent l'échelle typographique Webflow du site
 * plutôt que d'en inventer une (relevé sur le rendu : h1 56px, h2 32/32,
 * h4 24/28.8, .text-size-medium 16/25.6, .text-style-tagline 14px,
 * bouton 14px/500, rayon 8px, padding 1rem 1.25rem). Les titres de section
 * sont des <h2> et n'ont donc AUCUNE règle de taille ici : ils héritent. Seul
 * le chiffre de preuve monte à 2.5rem, un cran au-dessus de h2 et en dessous
 * du h1 du hero — c'est le seul endroit où le nombre est le contenu.
 *
 * Palette relevée sur la maquette, alignée sur le dégradé de marque du hero
 * (#6041FF → #00C2FF → #FFA0EA). */

:root {
  --v2-ink: #0d0d14;
  --v2-ink-card: #1a1830;
  --v2-surface: #fafafc;
  --v2-lavande: #f3f2ff;
  --v2-accent: #6041ff;
  --v2-accent-clair: #8e86ff;
  --v2-trait: #e5e5ea;
  --v2-trait-sombre: #ffffff1f;
  --v2-gris: #5a5c6e;
  --v2-gris-sombre: #a5a6b4;
  /* Dégradé de marque, identique à celui que HeroPrimaire injecte sur son
   * <em> — réutilisé ici pour le soulignement d'emphase et les sélections. */
  --v2-degrade: linear-gradient(90deg, #6041ff 0%, #00c2ff 49.48%, #ffa0ea 100%);
}

/* Surfaces du navigateur : la sélection et l'anneau de focus des sections v2
 * sont dérivés de la palette au lieu du bleu système. Portée volontairement
 * limitée aux 3 sections pour ne rien changer au reste du site. */
.v2_proof ::selection,
.v2_case ::selection,
.v2_split ::selection,
.v2_faq-list ::selection {
  color: #fff;
  background-color: var(--v2-accent);
}

/* ---------------------------------------------------------------- *
 * sections.preuve-chiffree — bandeau de chiffres clés sous le hero  *
 * ---------------------------------------------------------------- */

.v2_proof {
  background-color: var(--v2-surface);
  border-top: 1px solid var(--v2-trait);
  border-bottom: 1px solid var(--v2-trait);
}

.v2_proof.is-dark {
  color: #fff;
  background-color: var(--v2-ink);
  border-color: var(--v2-trait-sombre);
}

.v2_proof-grid {
  grid-column-gap: 3rem;
  grid-row-gap: 2.5rem;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: grid;
}

/* Le nombre de colonnes suit le nombre d'items saisis (2 à 4) : sans ça, un
 * 4e chiffre tomberait seul sur une deuxième ligne. */
.v2_proof-grid.is-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.v2_proof-grid.is-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.v2_proof-value {
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: 2.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -.02em;
  display: flex;
}

.v2_proof-value-accent {
  color: var(--v2-accent);
}

.is-dark .v2_proof-value-accent {
  color: var(--v2-accent-clair);
}

.v2_proof-arrow {
  color: var(--v2-gris);
  font-size: 1.5rem;
  font-weight: 400;
}

.is-dark .v2_proof-arrow {
  color: var(--v2-gris-sombre);
}

.v2_proof-label {
  color: var(--v2-gris);
  max-width: 24rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.is-dark .v2_proof-label {
  color: var(--v2-gris-sombre);
}

/* ---------------------------------------------------------------- *
 * sections.case-comparatif — retour d'expérience chiffré, fond noir *
 * ---------------------------------------------------------------- */

.v2_case {
  color: #fff;
  background-color: var(--v2-ink);
}

.v2_case-tag {
  color: var(--v2-gris-sombre);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  font-size: .875rem;
  font-weight: 500;
}

.v2_case-title {
  max-width: 36rem;
  margin: 0 0 1.5rem;
  /* Le h2 du site est en line-height 1.0 : lisible sur une ligne, les
   * jambages se touchent dès trois. 1.2 est la métrique du h3 Webflow
   * (32/38.4) — on reste dans l'échelle du site. */
  line-height: 1.2;
}

/* Emphase : le soulignement dégradé du hero, pas un texte en dégradé — c'est
 * le traitement d'emphase du site (voir heroEmGradientCss dans
 * HeroPrimaire.astro), et il tient sur fond sombre. */
.v2_case-title em,
.v2_split-title em {
  background-image: var(--v2-degrade);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 1.09em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0;
  font-style: normal;
  display: inline;
}

.v2_case-intro {
  color: var(--v2-gris-sombre);
  max-width: 38rem;
  margin: 0 0 4rem;
  font-size: 1rem;
  line-height: 1.6;
}

.v2_case-bars {
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 4rem;
  display: flex;
}

.v2_bar-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem 1.5rem;
  margin-bottom: 1.25rem;
  display: flex;
}

.v2_bar-label,
.v2_bar-value {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.v2_bar-value {
  font-variant-numeric: tabular-nums;
}

.is-accent .v2_bar-value {
  color: var(--v2-accent-clair);
  font-size: 1.5rem;
  letter-spacing: -.02em;
}

.v2_bar-row {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.v2_bar-row + .v2_bar-row {
  margin-top: .75rem;
}

.v2_bar-legend {
  color: var(--v2-gris-sombre);
  flex: none;
  width: 6rem;
  font-size: 1rem;
}

.v2_bar-track {
  background-color: #ffffff0a;
  border-radius: .25rem;
  flex: 1;
  height: 1.75rem;
  display: block;
  overflow: hidden;
}

.v2_bar-fill {
  border-radius: .25rem;
  height: 100%;
  display: block;
}

.v2_bar-fill.is-ref {
  background-color: #ffffff40;
}

.v2_bar-fill.is-mesure {
  background-color: #fff;
}

.is-accent .v2_bar-fill.is-mesure {
  background-color: var(--v2-accent-clair);
}

.v2_case-cards {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 2.5rem;
  display: grid;
}

.v2_case-card {
  border: 1px solid var(--v2-trait-sombre);
  border-radius: .75rem;
  padding: 2rem;
}

/* Une carte porte un surtitre, une autre un chiffre : sans subgrid, leurs
 * textes ne démarrent pas à la même hauteur. Là où subgrid manque, les cartes
 * restent simplement alignées en haut — dégradation acceptable. */
@supports (grid-template-rows: subgrid) {
  .v2_case-cards {
    grid-template-rows: auto 1fr;
  }

  .v2_case-card {
    grid-row: span 2;
    grid-template-rows: subgrid;
    display: grid;
  }
}

.v2_case-card.is-accent {
  background-color: var(--v2-ink-card);
  border-color: #0000;
}

.v2_case-card-eyebrow {
  color: var(--v2-gris-sombre);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  font-size: .8125rem;
  font-weight: 500;
}

.v2_case-card-figure {
  color: var(--v2-accent-clair);
  margin: 0 0 1rem;
  font-size: 2.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.v2_case-card-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.v2_case-foot {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  display: flex;
}

.v2_case-note {
  color: var(--v2-gris-sombre);
  max-width: 34rem;
  margin: 0;
  font-size: .875rem;
  font-style: italic;
  line-height: 1.6;
}

/* Bouton : mêmes métriques que `.button` du site (14px/500, rayon 8px,
 * padding 1rem 1.25rem), inversé pour le fond sombre. */
.v2_case-cta {
  color: var(--v2-ink);
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: .5rem;
  flex: none;
  padding: 1rem 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
  display: inline-block;
}

.v2_case-cta:hover {
  background-color: var(--v2-lavande);
  border-color: var(--v2-lavande);
}

.v2_case-cta:focus-visible {
  outline: 2px solid var(--v2-accent-clair);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- *
 * sections.comparatif-listes — colonnes de listes mises en regard   *
 * ---------------------------------------------------------------- */

.v2_split-tag {
  color: var(--v2-gris);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  font-size: .875rem;
  font-weight: 500;
}

.v2_split-title {
  max-width: 36rem;
  margin: 0 0 3rem;
  line-height: 1.2;
}

.v2_split-grid {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.v2_split-grid.is-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.v2_split-card {
  border: 1px solid var(--v2-trait);
  border-radius: .75rem;
  padding: 2.5rem;
}

.v2_split-card.is-accent {
  background-color: var(--v2-lavande);
  border-color: #0000;
}

/* `heading-style-h4` (24/28.8) porte la taille : même niveau que les titres
 * de carte du reste de la page. Seul l'espacement est défini ici. */
.v2_split-card-title {
  margin: 0 0 1.5rem;
}

.v2_split-card-list ul {
  margin: 0;
  padding-left: 1.125rem;
  list-style: disc;
}

.v2_split-card-list li {
  margin-bottom: .75rem;
  font-size: 1rem;
  line-height: 1.6;
}

.v2_split-card-list li:last-child {
  margin-bottom: 0;
}

.v2_split-card-list li::marker {
  color: var(--v2-accent);
}

/* ---------------------------------------------------------------- *
 * sections.faq-liste, variante `accordeon`                          *
 * ---------------------------------------------------------------- */

/* `.faq_item` (Webflow) porte déjà `border-bottom`, et `.faq_list` une
 * gouttière de 1.5rem sous 767px : sans ces deux remises à zéro, chaque
 * séparation affiche deux filets espacés. Sélecteurs à 2 classes pour gagner
 * sur les règles Webflow quel que soit l'ordre de concaténation. */
.v2_faq-list.faq_list {
  grid-row-gap: 0;
  row-gap: 0;
}

.v2_faq-list .v2_faq-item {
  border-top: 0;
}

.v2_faq-list .v2_faq-item:first-child {
  border-top: 1px solid var(--v2-trait);
}

.v2_faq-summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 1.5rem 0;
  list-style: none;
  transition: color .15s ease;
  display: flex;
}

.v2_faq-summary::-webkit-details-marker {
  display: none;
}

.v2_faq-summary h3 {
  margin: 0;
}

.v2_faq-summary:hover {
  color: var(--v2-accent);
}

.v2_faq-summary:focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 2px;
  border-radius: .25rem;
}

/* Croix / plus dessinés en CSS : deux traits dont l'un pivote à l'ouverture,
 * plutôt qu'une icône à charger ou un glyphe dépendant de la police. */
.v2_faq-marker {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: .5rem;
  position: relative;
}

.v2_faq-marker:before,
.v2_faq-marker:after {
  content: "";
  background-color: currentColor;
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  transform: translateY(-50%);
}

.v2_faq-marker:after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.v2_faq-item[open] .v2_faq-marker:after {
  transform: translateY(-50%) rotate(180deg);
}

.v2_faq-answer {
  color: var(--v2-gris);
  max-width: 44rem;
  margin: 0;
  padding-bottom: 1.75rem;
}

/* Dépli animé là où le moteur sait interpoler la hauteur d'un <details>
 * (`interpolate-size` + `::details-content`). Partout ailleurs l'accordéon
 * s'ouvre instantanément, ce qui reste le comportement natif correct. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .v2_faq-item {
    interpolate-size: allow-keywords;
  }

  .v2_faq-item::details-content {
    block-size: 0;
    opacity: 0;
    overflow: hidden;
    transition: block-size .3s cubic-bezier(.2, .8, .2, 1), content-visibility .3s allow-discrete,
      opacity .25s ease;
  }

  .v2_faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2_faq-marker:after,
  .v2_faq-item::details-content,
  .v2_case-cta {
    transition: none;
  }
}

/* ---------------------------------------------------------------- *
 * Points de rupture — alignés sur ceux du CSS Webflow (991 / 767)   *
 * ---------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .v2_proof-grid,
  .v2_proof-grid.is-cols-4,
  .v2_case-cards,
  .v2_split-grid,
  .v2_split-grid.is-cols-3 {
    grid-template-columns: 1fr 1fr;
  }

  .v2_case-intro {
    margin-bottom: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .v2_proof-grid,
  .v2_proof-grid.is-cols-2,
  .v2_proof-grid.is-cols-4,
  .v2_case-cards,
  .v2_split-grid,
  .v2_split-grid.is-cols-3 {
    grid-template-columns: 1fr;
  }

  .v2_proof-grid {
    grid-row-gap: 2rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* Quatre chiffres en 2 × 2 plutôt qu'empilés (un écran entier en 390 px).
   * Doit suivre la règle une colonne ci-dessus, de même spécificité. À 2 ou
   * 3 items, la grille reste sur une colonne. */
  .v2_proof-grid.is-cols-4 {
    grid-column-gap: 1.5rem;
    grid-template-columns: 1fr 1fr;
  }

  .v2_proof-value {
    font-size: 2rem;
  }

  .v2_bar-row {
    flex-direction: column;
    align-items: stretch;
    gap: .375rem;
  }

  .v2_bar-legend {
    width: auto;
  }

  /* En colonne, l'axe principal devient vertical : `flex:1` sur la piste
   * vaudrait flex-basis:0 en HAUTEUR et ferait disparaître la barre. */
  .v2_bar-track {
    flex: none;
    width: 100%;
    height: 1.5rem;
  }

  .v2_case-bars {
    gap: 2.5rem;
    margin-bottom: 3rem;
  }

  .v2_case-foot {
    align-items: flex-start;
  }

  .v2_case-cta {
    width: 100%;
  }

  .v2_split-card,
  .v2_case-card {
    padding: 1.5rem;
  }

  .v2_faq-summary {
    gap: 1.25rem;
  }
}

/* Copie verbatim de page-home.css (logos-marquee), code n°1 du chantier application mobile, 29/10/2026 */
.section_logo{background-color:var(--\<unknown\|relume-variable-color-scheme-1-background\>);overflow:hidden}
.section_logo.padding-section-medium{padding-bottom:0}
.section_logo.padding-section-medium.bottom{padding-bottom:5rem}
.logo_wrapper{justify-content:center;align-items:flex-start;min-width:3%;display:flex}
.logo_logo{max-height:3.5rem}
.logo_component{display:flex}
.logo_component.track-cms{flex-wrap:nowrap;width:max-content;max-width:none}
.logo_list{grid-column-gap:1.5rem;grid-row-gap:1rem;white-space:nowrap;flex-wrap:wrap;grid-template-rows:auto;grid-template-columns:12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 12.5rem;grid-auto-columns:12.5rem;justify-content:flex-end;place-items:center start;margin-right:2rem;display:grid}
.logo_list.is-cms{flex-flow:row;align-items:center;margin-right:56px;display:flex}
@media screen and (min-width:1280px){
.logo_list{grid-template-columns:12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 13rem}
}
@media screen and (min-width:1440px){
.logo_list{grid-template-columns:12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 13rem 1fr}
}
@media screen and (min-width:1920px){
.logo_list{grid-template-columns:12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 12.5rem 12.5rem;grid-auto-columns:auto}
}
@media screen and (max-width:767px){
.logo_wrapper{padding:.75rem 1rem}
.logo_logo{max-height:3rem}
.logo_list{grid-column-gap:1rem;grid-template-columns:10rem 10rem 10rem 10rem 10rem 10rem 10rem 10rem;padding-top:1rem}
}
@media screen and (max-width:479px){
.logo_wrapper{justify-content:center;align-items:flex-start}
.logo_list{justify-content:center}
}

/* Copie verbatim de page-contactez-nous.css (hero-formulaire-contact), code n°1 du chantier application mobile, 29/10/2026 */
.form_form{grid-column-gap:2rem;grid-row-gap:2rem;flex-flow:column;justify-content:flex-start;align-items:flex-start;display:flex}
.form_message-success{background-color:var(--background-color--transparent);color:var(--base-color-neutral--black-550);padding:13.5rem 4rem}
.form_field-wrapper{width:100%}
.form_label{color:var(--base-color-neutral--black-550);margin-bottom:.5rem;font-size:.875rem;font-weight:400;line-height:160%}
.form_input{border:1px solid var(--base-color-neutral--black-200);background-color:var(--background-color--color);min-height:3.5rem;color:var(--base-color-neutral--black-550);border-radius:.5rem;margin-bottom:0;padding:.75rem;font-size:.875rem}
.form_input::placeholder,.form_input.is-select-input{color:var(--text-color--text-secondary)}
.form_input.is-text-area{min-height:8rem;color:var(--base-color-neutral--black-550);min-height:8rem;padding-top:.75rem;font-size:.875rem}
.form_message-error{background-color:var(--background-color--transparent);color:var(--text-color--text-error);margin-top:3rem;padding:0}
.form_component{margin-bottom:0}
.section_hero.form{padding-top:7.8rem;overflow:hidden}
.header_content.form{place-items:start stretch}
.form_message-error-wrapper{grid-column-gap:1rem;grid-row-gap:1rem;justify-content:flex-start;align-items:center;margin-top:1rem;padding:0;display:flex}
.form_block{grid-column-gap:2rem;grid-row-gap:2rem;justify-content:space-between;align-items:flex-start;width:100%;display:flex}
.list_contact{grid-column-gap:.5rem;grid-row-gap:.5rem;justify-content:flex-start;align-items:center;margin-bottom:.5rem;display:flex}
.list_txt{color:var(--base-color-neutral--black-450);margin-bottom:0}
.logo_contact{grid-column-gap:.5rem;grid-row-gap:.5rem;flex-flow:wrap;grid-template-rows:auto auto;grid-template-columns:1fr 1fr 1fr;grid-auto-columns:1fr;place-items:start;width:60%;display:grid}
.logo_contact-img{height:2.5rem}
@media screen and (min-width:1920px){
.logo_contact{width:60%}
}
@media screen and (max-width:767px){
.section_hero.form{padding-top:6rem}
.form_block{flex-flow:column}
.logo_contact{width:80%}
}
@media screen and (max-width:479px){
.section_hero.form{padding-top:5rem}
.logo_contact{width:100%}
}

/* Copie verbatim de page-expertises-developpement-logiciel-metier.css (approche-cards layout-image), base PUIS @media dans l’ordre source : la feuille v2 suit celle du gabarit, une règle de base seule y écraserait le @media (max-width:767px) du gabarit (cartes sur deux colonnes et collantes en mobile). Recomposition technos mobiles, 29/10/2026 */
.max-width-large{width:100%;max-width:48rem}
.text-align-center{text-align:center}
.align-center{margin-left:auto;margin-right:auto}
.layout_card{grid-column-gap:0rem;grid-row-gap:0rem;border:1px solid var(--base-color-neutral--black-200);background-color:var(--background-color--color);border-radius:.75rem;grid-template-rows:auto;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;align-content:center;align-items:stretch;margin-bottom:10vh;display:grid;position:sticky;top:10%;overflow:hidden}
.layout_image{object-fit:cover;width:100%}
.layout_image.card-1{height:100%}
.layout_card-content{flex-direction:column;justify-content:center;padding:3rem;display:flex}
.animation_layout_component{grid-column-gap:0rem;grid-row-gap:0rem;grid-template-rows:auto;grid-template-columns:1fr;position:sticky;top:0}
.layout_image-wrapper{aspect-ratio:auto;flex-direction:column;justify-content:center;align-items:center;display:flex}
.div-block-9{grid-column-gap:1rem;grid-row-gap:1rem;flex-flow:column;display:flex}
.card_conclude{font-weight:500;line-height:1.6}
@media screen and (max-width:991px){
.layout_card-content{padding:2rem}
}
@media screen and (max-width:767px){
.layout_card{grid-template-columns:1fr;height:auto;margin-bottom:0;position:static}
.layout_card-content{padding:1.5rem}
.animation_layout_component{grid-column-gap:1.5rem;grid-row-gap:1.5rem}
.layout_image-wrapper{height:auto}
}

/* ---------------------------------------------------------------- *
 * Retouches de lecture, chantier application mobile (vérification   *
 * visuelle du 29/10/2026). Placées APRÈS les copies verbatim, qu'elles *
 * ne modifient pas : elles les surchargent par une spécificité plus *
 * haute. Ne s'appliquent qu'aux pages qui chargent cette feuille.   *
 * ---------------------------------------------------------------- */

/* bloc-mission : un seul pas vertical (2rem) entre titre, chapô, liste et
 * conclusion, au lieu de 1rem sous le H2 et 3rem ailleurs ; chapô, libellé de
 * liste et conclusion bornés à ~75 caractères par ligne. */
.section_we_do .padding-section-large > .margin-bottom.margin-small,
.section_we_do .padding-section-large > .margin-bottom.margin-large {
  margin-bottom: 2rem;
}

.section_we_do .presentation_description,
.section_we_do .title_block,
.section_we_do .rich-text-block {
  max-width: 46rem;
}

/* bloc-mission avec un texte par item (`v2_mission`, BlocMission.astro) : le
 * titre d'item passe en couleur pleine, un cran au-dessus du paragraphe, qui
 * garde le gris du bloc — sinon titre et texte forment une seule masse grise. */
.v2_mission .v2_mission-item-titre {
  color: #171717;
  font-size: 1.125rem;
  line-height: 1.4;
}

.v2_mission[data-wf--we_do--variant="base"] .v2_mission-item-titre {
  color: #fff;
}

.v2_mission[data-wf--we_do--variant="base"] .v2_mission-item-texte {
  color: #fffc;
}

/* L'espace entre items vient de l'écart de la liste, pas de la marge du
 * dernier paragraphe, qui éloignait la conclusion de la grille. */
.v2_mission .presentation_list {
  row-gap: 1.5rem;
}

.v2_mission .v2_mission-item-texte {
  margin-bottom: 0;
}

/* Galerie layout-image : la dernière carte n'a pas de carte à recouvrir, sa
 * marge de 10vh ne laissait qu'un blanc avant la section suivante. */
.layout_card:last-child {
  margin-bottom: 0;
}

/* Titre et texte de carte en haut de colonne, pas centrés dans la hauteur de
 * l'image. */
.layout_card .layout_card-content {
  justify-content: flex-start;
}

/* Texte en bloc riche (il commence par un paragraphe) : le <p> de
 * div-block-9 n'est que le paragraphe vide (U+200D) du mirror, qui ajoutait
 * une ligne blanche entre le H3 et le texte. Quand le texte commence par une
 * liste, ce <p> porte l'intro et reste affiché. */
.layout_card-content-top:has(> div:not([class]) > .w-richtext > :first-child:is(p, h2, h3, h4)) .div-block-9 > p:last-child {
  display: none;
}

.layout_card-content-top:has(> div:not([class]) > .w-richtext > :first-child:is(p, h2, h3, h4)) > .margin-bottom.margin-small {
  margin-bottom: 1.5rem;
}

/* Visuels « carte43_* » (1440 × 1080, téléphones sur fond #f2f7ff) : affichés
 * entiers, sans rognage quand le texte de la carte est plus haut que l'image ;
 * le cadre prend le fond de l'image. */
.layout_image-wrapper:has(> .layout_image[src*="carte43_"]) {
  background-color: #f2f7ff;
}

.layout_image.card-1[src*="carte43_"] {
  object-fit: contain;
}

/* Bandeau de logos suivi de la preuve chiffrée : les logos ne touchent plus le
 * filet haut de la bande grise. */
.section_logo + .v2_proof {
  margin-top: 3rem;
}

/* Tag « FAQ » : une pastille à la largeur de son texte, même là où la colonne
 * de gauche n'est pas en flex (gabarits technos). */
.section_faq .gradient_tag {
  align-self: flex-start;
  width: fit-content;
}

@media screen and (min-width: 992px) {
  /* Fin de section ramenée à 6rem (au lieu de 8rem) là où la section
   * suivante ouvre sur son propre padding : galerie, grille de cas clients,
   * et bloc-mission clair à texte par item (4.5rem). */
  .animetion_section_layout .padding-section-large,
  .section_products .padding-section-large {
    padding-bottom: 6rem;
  }

  .v2_mission:not([data-wf--we_do--variant="base"]) .padding-section-large {
    padding-bottom: 4.5rem;
  }
}

@media screen and (max-width: 767px) {
  .section_logo + .v2_proof {
    margin-top: 2rem;
  }

  /* Cadre réservé avant le chargement (lazy) de l'image : sans lui, la carte
   * mesure 0 px de haut puis saute de ~260 px. */
  .layout_image-wrapper:has(> .layout_image[src*="carte43_"]) {
    aspect-ratio: 4 / 3;
  }

  /* Cartes de technos du hub : même largeur que les cartes voisines (la
   * marge droite de 40px du gabarit les décalait). */
  .section_nosoffres .nosoffres_container {
    margin-right: 0;
  }
}

/* ---------------------------------------------------------------- *
 * Lecture continue des pages redessinées et des pages ville          *
 * (retour client du 29/10/2026 : « effet flyer »). Bornées par les   *
 * marqueurs <html> pour ne pas toucher les landings /lp/*.           *
 * ---------------------------------------------------------------- */

/* Listes au fil du texte : même corps que les paragraphes. La règle
 * Webflow `li{font-size:1.1rem}` grossit chaque puce de 10 % au milieu
 * d'un texte suivi. */
:is([data-dc-page-redessinee], [data-dc-page-locale]) :is(.block-steps, .w-richtext, .rich-text-block, .objective_presentation) li {
  font-size: 1rem;
  line-height: 1.5;
}

/* bloc-mission à puces simples : la liste suit la colonne de texte
 * (46rem, une colonne) au lieu de s'étaler sur deux colonnes pleine largeur
 * sous un texte borné, et prend la couleur et le corps du texte au lieu
 * d'un gris plus grand. Les items titrés (v2_mission) gardent leur grille. */
:is([data-dc-page-redessinee], [data-dc-page-locale]) .section_we_do:not(.v2_mission) .list_block {
  max-width: 46rem;
}

:is([data-dc-page-redessinee], [data-dc-page-locale]) .section_we_do:not(.v2_mission) .presentation_list-item {
  flex-basis: 100%;
  font-size: 1rem;
  line-height: 1.5;
  color: #171717;
}

:is([data-dc-page-redessinee], [data-dc-page-locale]) .section_we_do[data-wf--we_do--variant="base"]:not(.v2_mission) .presentation_list-item {
  color: #fff;
}

/* Même colonne de lecture que les blocs de texte (contenu-legal, centrés
 * sur 46rem) : le bloc entier se centre au lieu de laisser la moitié droite
 * vide. Les listes du bloc et celles du texte prennent le même interligne. */
:is([data-dc-page-redessinee], [data-dc-page-locale]) .section_we_do:not(.v2_mission) .padding-section-large {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

:is([data-dc-page-redessinee], [data-dc-page-locale]) .section_we_do:not(.v2_mission) .presentation_list {
  row-gap: .5rem;
}

:is([data-dc-page-redessinee], [data-dc-page-locale]) .section_we_do[data-wf--we_do--variant="base"] .title_block {
  color: #fff;
}

/* Étapes et offres titrées : le texte d'item au corps des paragraphes. */
:is([data-dc-page-redessinee], [data-dc-page-locale]) .v2_mission .v2_mission-item-texte {
  font-size: 1rem;
  line-height: 1.6;
}

/* Rythme vertical unique dans les blocs de texte (retour client du
 * 31/10/2026) : le bloc-mission à puces ajoutait l'écart de grille de
 * `.list_block` (1.4rem) aux marges de 1rem, d'où ~2.4rem autour de sa liste
 * contre 1rem entre les paragraphes ; les listes en texte riche, elles,
 * n'avaient aucun écart entre puces. Même espacement pour les deux. */
:is([data-dc-page-redessinee], [data-dc-page-locale]) .section_we_do:not(.v2_mission) .list_block {
  row-gap: 0;
}

:is([data-dc-page-redessinee], [data-dc-page-locale]) :is(.block-steps, .w-richtext, .rich-text-block, .objective_presentation) li + li {
  margin-top: .5rem;
}

/* Même bloc : les enveloppes `margin-large` (2rem) doublaient l'espace
 * entre le chapô, la liste et le texte qui suit, et la liste du bloc
 * s'indentait moins (1rem) que celle du texte riche (1.5rem). */
:is([data-dc-page-redessinee], [data-dc-page-locale]) .section_we_do:not(.v2_mission) .padding-section-large > .margin-bottom.margin-large {
  margin-bottom: 1rem;
}

:is([data-dc-page-redessinee], [data-dc-page-locale]) .section_we_do:not(.v2_mission) .presentation_list {
  margin-bottom: 0;
  padding-left: 1.5rem;
}