/* home.css — mise en page des sections de l'accueil (source : home 3).
   Les valeurs marquées « mesuré » viennent des sondes, pas d'une estimation. */

/* --- Utilitaires d'affichage ------------------------------------------- */

/* ======================================================================= */
/* Héros                                                                    */
/* ======================================================================= */
.section_home-header-v3 { padding-top: var(--size--size-23); }

/* Le bandeau d'information est une bande pleine largeur sous la barre de
   navigation, pas une pilule centrée : il touche les deux bords de l'écran. */
.news-bar_wrap { width: 100%; overflow: clip; }
.news-bar_component { position: relative; display: flex; justify-content: center; align-items: flex-start; width: 100%; overflow: clip; }
.news-bar_link {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  gap: var(--size--size-5);
  width: 100%;
  padding: var(--size--size-8);
  background-color: var(--_colors---primary--accent);
  color: var(--_colors---primary--white);
}
.news-bar_text { color: var(--_colors---primary--white); font-size: var(--size--size-8); }
.news-bar_read-more { display: flex; justify-content: center; align-items: center; gap: var(--size--size-1); flex: none; }
.news-bar_read { color: var(--_colors---white--60); font-size: var(--size--size-8); }
.news-bar_arrow-icon { opacity: .54; }

/* Première ligne ferrée à gauche, seconde poussée à droite : c'est ce
   décalage qui tient toute la largeur du bloc. */
.home-header-v3_component { display: flex; flex-direction: column; }
.home-header-v3_heading { margin-left: auto; }

/* Le cadre. aspect-ratio 2.39 et overflow clip sont conservés tels quels :
   c'est ce rapport qui donne au bloc son allure de plan large. Le contenu
   est centré, pas posé en bas à gauche. */
.features_results {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--size--size-10);
  width: 100%;
  padding-top: var(--size--size-17); padding-bottom: var(--size--size-17);
  aspect-ratio: 2.39;
  border-radius: var(--border-radius--small);
  overflow: clip;
  background-color: #18273a;
}

.features_results-bg { position: absolute; inset: 0; z-index: 1; display: flex; width: 100%; height: 100%; }
/* Le fond est une photo (dunes de sable en bleu, générée le 11 sept. 2026,
   source dans _backup/hero-results-source.jpeg). Le point de lumière est en
   haut à droite : object-position le garde visible en 3/4 sur mobile. */
.features_results-img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 65% 50%; }

/* Le voile qui assoit le texte en bas de cadre — relevé tel quel. */
.features_results-gradient {
  position: absolute; inset: auto 0 0; z-index: 2; pointer-events: none;
  width: 100%; height: 100%;
  background-image: linear-gradient(#0e1c2d1f, #0e1c2dcf);
}

.features_results .z-index-4 { z-index: 4; position: relative; }
.features_results .label-plus_component { color: var(--_colors---primary--white); }

.features_results-content {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  gap: var(--size--size-10);
  width: 50%; max-width: 28rem;
}

/* La pile : seule la carte de devant est dans le flux, elle donne sa hauteur
   au bloc. Les deux autres sont posées par-dessus et décalées vers le bas.
   Les décalages (y 0 / 1.25rem / 2.5rem, scale 1 / .95 / .9) sont appliqués en
   JS, pour que la page reste lisible sans script. */
.features_results-cards {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; margin-bottom: 5%;
  perspective: 1000px;
}
.features_results-card {
  display: flex; justify-content: flex-start; align-items: center;
  gap: var(--size--size-8);
  width: 100%;
  padding: var(--size--size-4) var(--size--size-14) var(--size--size-4) var(--size--size-4);
  border-radius: var(--border-radius--xsmall);
  /* Le flou a besoin de matière derrière lui : c'est la raison d'être du
     dégradé maillé animé. Un aplat de couleur annulerait l'effet. */
  background-color: #10203361;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  color: var(--_colors---primary--white);
}
.features_results-card._1 { position: relative; z-index: 5; }
.features_results-card._2 { position: absolute; z-index: 4; width: 90%; }
.features_results-card._3 { position: absolute; z-index: 3; width: 85%; }

.features_results-pic {
  width: var(--size--size-20); aspect-ratio: 1;
  border-radius: var(--border-radius--xxsmall);
  object-fit: cover; flex: none;
}
.features_data { display: flex; flex-direction: column; gap: var(--size--size-2); min-width: 0; }
.features_data-wrap { display: flex; align-items: flex-start; gap: var(--size--size-6); }
.features_data-text { font-size: var(--size--size-9); line-height: 135%; }
.features_check-icon { width: var(--size--size-12); height: var(--size--size-12); flex: none; }

/* ======================================================================= */
/* À propos                                                                 */
/* ======================================================================= */
/* Trois colonnes : la pastille, le texte, la carte. Les trois sont calées en
   haut — d'où `place-items: start` plutôt qu'un étirement. */
.home-about_component {
  display: grid;
  grid-template-columns: .25fr 1fr .35fr;
  gap: var(--size--size-15);
  place-items: start;
}
.home-about_content { width: 100%; max-width: 47rem; }

/* Le libellé « Clients » et le bandeau sont sur la même ligne, pas empilés.
   Le bandeau s'efface en fondu de chaque côté : c'est le masque qui donne
   l'impression qu'il vient de plus loin que le cadre. */
.home-header_brands {
  position: relative;
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  gap: var(--size--size-10);
  width: 92%; max-width: 40.625rem;
  overflow: clip;
}
.home-header_brands-wrap {
  display: flex; align-items: center; justify-content: flex-start;
  width: 85%;
  overflow: clip;
  -webkit-mask: linear-gradient(270deg, #0000, #000 15% 85%, #0000);
  mask: linear-gradient(270deg, #0000, #000 15% 85%, #0000);
}
/* Variante statique : un seul logo, sans défilement ni fondu sur les bords. */
.home-header_brands-wrap.is-static { width: auto; overflow: visible; -webkit-mask: none; mask: none; }
.home-header_brands-wrap.is-static .brand_logo { height: 2.5rem; }
/* L'écart entre logos vient de leur propre marge intérieure, pas d'un `gap`
   sur la piste : c'est ce qui fixe la largeur d'un groupe, donc la vitesse. */
.clients_group { flex: none; display: flex; justify-content: flex-start; align-items: center; gap: 0; padding-right: 0; }
.brand_logo-wrap {
  flex: none;
  display: flex; justify-content: center; align-items: center;
  min-height: var(--size--size-17);
  padding-left: var(--size--size-19); padding-right: var(--size--size-19);
}
/* ======================================================================= */
/* Notre méthode                                                            */
/* ======================================================================= */
.process_component {
  display: grid;
  grid-template-columns: .5fr 1fr;
  gap: var(--size--size-20);
  place-items: start stretch;
  width: 100%;
}

/* Mesuré : aucun pin GSAP sur la page. L'effet « la colonne reste figée »
   vient de cette seule règle. Un ScrollTrigger pin donnerait un rendu
   légèrement différent au moment de l'accroche, et coûterait plus cher. */
.process_content {
  position: sticky; top: 8rem;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: var(--size--size-22);
  width: 100%; max-width: 30rem;
}
.process_head { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; max-width: 21rem; }

.process_steps { display: flex; flex-direction: column; width: 100%; }
.process_step {
  display: flex; justify-content: flex-start; align-items: center; gap: var(--size--size-16);
  padding-top: var(--size--size-7); padding-bottom: var(--size--size-7);
  border-top: 1px solid var(--_colors---bleu--200);
}
.process_step.border-bottom { border-bottom: 1px solid var(--_colors---bleu--200); }
.process_step-text { font-size: var(--size--size-12); font-weight: var(--_typography---font-weight--medium); }

/* Chaque étape est une carte blanche coupée en deux : le texte à gauche,
   l'image carrée à droite. C'est ce qui tient la colonne compacte. */
/* Calé sur le bord droit du conteneur, pas au début de sa colonne : la colonne
   est plus large que les 50 rem des cartes, et sans cela le bloc flotte au
   milieu de la page dès que l'écran dépasse 1440 px. La source obtient le même
   résultat par une règle attachée à l'identifiant du bloc. */
.process_items { display: flex; flex-direction: column; justify-self: end; gap: var(--size--size-10); width: 100%; max-width: 50rem; }
.process_item {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--size--size-13);
  width: 100%;
  padding: var(--size--size-12);
  border-radius: var(--border-radius--xsmall);
  background-color: var(--_colors---primary--white);
}
.process_item-texts { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: var(--size--size-4); }
.process_item-title { font-size: var(--size--size-11); font-weight: var(--_typography---font-weight--medium); }
.process_item-text { max-width: 21rem; color: var(--_colors---grey--500); font-size: var(--size--size-10); }
.process_img-wrap {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: var(--border-radius--xsmall);
  background-color: var(--_colors---bleu--150);
  overflow: clip;
}
.process_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ======================================================================= */
/* Réussites clients                                                        */
/* ======================================================================= */
.section_cases-v2 { background-color: var(--_colors---bleu--150); }

.cases-v2_component { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }

/* Sans cette largeur, le conteneur se réduit à son contenu dans le flex
 * centré au-dessus, et les deux cartes s'effondrent à zéro. */
.cases-v2_wrapper { width: 100%; }

/* Liste en flex, pas en grille : c'est la largeur des cartes qui s'anime au
 * survol — l'une s'étend à 150 %, l'autre se comprime. Des colonnes de
 * grille figeraient le partage. */
.cases-v2_list { display: flex; gap: var(--size--size-9); width: 100%; }
.cases-v2_item {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  width: 100%;
  border-radius: var(--border-radius--small);
  overflow: hidden;
  transition: width .5s cubic-bezier(.608, .008, .25, 1);
}
.cases-v2_item:hover { width: 150%; }

.cases-v2_block {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  width: 100%; height: 36.25rem;
  padding: var(--size--size-13) var(--size--size-13) var(--size--size-16);
  border-radius: var(--border-radius--small);
  overflow: hidden;
  color: var(--_colors---primary--white);
}

.case_image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Image seule (depuis le 11 sept. 2026) : même hauteur que les anciennes
 * cartes, sans lien, sans texte et sans expansion au survol. */
.cases-v2_single {
  position: relative; width: 100%; height: 36.25rem;
  border-radius: var(--border-radius--small);
  overflow: hidden;
}

.cases-v2_gradient {
  position: absolute; inset: auto 0 0;
  width: 100%; height: 50%;
  background-image: linear-gradient(#0000, #000000b3);
}

/* Voile sombre du haut : il tient le libellé, aligné à droite. */
.case_gradient-top {
  position: absolute; inset: 0 0 auto; z-index: 5;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  width: 100%; height: var(--size--size-29);
  padding: var(--size--size-13);
  background-image: linear-gradient(#0f10115e, #0f101100);
}

.case_logo {
  position: relative; z-index: 6;
  width: 9rem; height: var(--size--size-20); max-width: none;
  object-fit: scale-down; object-position: 0% 50%;
  margin-bottom: auto;
}

.case_content { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--size--size-14); width: 100%; }
.case_heading-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--size--size-5); max-width: 18rem; }
.case_heading { font-size: var(--size--size-15); line-height: 120%; }

/* Le bouton posé sur l'image est flouté plutôt que plein. */
.button.small-blur {
  background-color: var(--_colors---white--20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--_colors---primary--white);
}

/* ======================================================================= */
/* Tarifs — fond sombre mesuré à #101110                                    */
/* ======================================================================= */
/* Bande pleine largeur, sans arrondi : la source n'en met pas, et l'arrondi se
   voyait dès que la section suivait un fond clair (pages métier). Fond relevé
   à rgb(17, 17, 17), soit le jeton `grey--800` — et non #101110. */
.section_pricing-v3 {
  background-color: var(--_colors---grey--800);
  color: var(--_colors---primary--white);
}
/* L'icône de la pastille est noire dans le fichier : sur le fond sombre de la
   section tarifs, elle s'inverse. Le « + » des libellés, lui, est déjà blanc. */
.section_pricing-v3 .label_icon { filter: invert(1); }

.label-bar_content { display: flex; align-items: center; justify-content: space-between; gap: var(--size--size-13); }

.pricing-v3_component { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
/* Sans cette largeur maximale, le titre et le sélecteur s'étalent sur toute la
   largeur du conteneur : sur grand écran, le bloc n'a plus rien de centré. */
.pricing-v3_head { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; max-width: 600px; }
.pricing-v3_wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--size--size-12); width: 100%; }

/* Sélecteur : pilule coupée en deux, bille blanche qui glisse. */
.pricing_switch {
  position: relative;
  display: inline-flex;
  padding: var(--size--size-2);
  border-radius: var(--size--size-16);
  background-color: var(--_colors---white--10);
  border: 1px solid var(--_colors---white--10);
}
.pricing_switch-pill {
  position: absolute;
  top: var(--size--size-2); bottom: var(--size--size-2);
  border-radius: var(--size--size-16);
  background-color: var(--_colors---primary--white);
  transition: transform .45s cubic-bezier(.608, .008, .25, 1), width .45s cubic-bezier(.608, .008, .25, 1);
  z-index: 0;
}
.pricing_switch-option {
  position: relative; z-index: 1;
  padding: var(--size--size-6) var(--size--size-13);
  border-radius: var(--size--size-16);
  font-size: var(--size--size-8);
  font-weight: var(--_typography---font-weight--medium);
  color: var(--_colors---white--60);
  white-space: nowrap;
  transition: color .3s ease;
}
.pricing_switch-option.is-active { color: var(--_colors---primary--black); }

.pricing_plans { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--size--size-4); width: 100%; align-items: stretch; }

/* Le bloc est blanc par défaut ; ce sont les modificateurs qui l'assombrissent.
   Sur l'accueil, seul le premier plan est sombre — celui du milieu reste clair,
   c'est lui qui ressort sur le fond noir de la section. */
.pricing_plan {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: var(--size--size-16);
  padding: var(--size--size-15);
  border-radius: var(--border-radius--xsmall);
  background-color: var(--_colors---primary--white);
  color: var(--_colors---primary--black);
}
.pricing_plan.dark { background-color: var(--_colors---grey--800); color: var(--_colors---primary--white); }
.pricing_plan.dark-lighter { background-color: var(--_colors---grey--650); color: var(--_colors---primary--white); }
/* Sans cette largeur, la tête se réduit au plus long libellé et les filets de
   la liste s'arrêtent au milieu de la carte. */
.pricing_plan-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--size--size-12); width: 100%; }

/* Présente dans les trois blocs, vidée là où elle ne sert pas : c'est elle
   qui réserve la hauteur, sinon les prix se décalent d'un bloc à l'autre. */
.pricing_badge {
  align-self: flex-start;
  min-height: var(--size--size-16);
  display: flex; align-items: center;
  padding: var(--size--size-2) var(--size--size-7);
  border-radius: var(--size--size-16);
  background-color: var(--_colors---primary--accent);
  color: var(--_colors---primary--white);
  font-size: var(--size--size-6);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* La rangée de prix a une hauteur fixe : « /mois » tient sur une ligne,
   « à partir de, par projet » sur deux, et pourtant les listes des trois blocs
   démarrent à la même hauteur — donc les boutons aussi. */
.pricing_value {
  display: flex; align-items: baseline; flex-wrap: nowrap;
  gap: var(--size--size-6);
  width: 100%;
  min-height: var(--size--size-25);
}
.pricing_money {
  font-size: var(--size--size-22);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: -.04em;
  line-height: 100%;
  white-space: nowrap;   /* « 2 500 » ne doit jamais se couper en deux lignes */
  flex: none;
}
/* Usage européen : le symbole suit le nombre, sur la ligne de base, séparé
   par une espace insécable fine. */
.pricing_currency { font-size: .5em; letter-spacing: -.02em; }
.pricing_currency::before { content: "\00a0"; }
/* En anglais le symbole passe devant le montant, sans espace : « €1,800 ». */
html[lang="en"] .pricing_currency::before { content: ""; }

/* La mention de période se pose sur la ligne de base du prix, pas au fond de
   la rangée : c'est ce qui la raccroche visuellement au nombre. */
.pricing_plan-info, .pricing_plan-info-v2 { color: var(--_colors---bleu--275); line-height: 1.25; }

/* La mention sous la grille (conseil à l'heure) : une seule ligne centrée,
   dans le gris des textes secondaires. Propre à une offre, elle est masquée
   par pricing.js quand l'offre n'en a pas. */
.pricing_note { width: 100%; margin: var(--size--size-8) 0 0; text-align: center; }

/* La liste d'inclusions : un filet sous chaque ligne. Le filet suit la carte —
   bleu clair sur fond blanc, blanc translucide sur fond sombre. */
.pricing_plan ul, .pricing_custom ul { display: flex; flex-direction: column; gap: var(--size--size-10); width: 100%; }
.pricing_plan li { padding-bottom: .75rem; border-bottom: 1px solid var(--_colors---bleu--150); }
/* Sélecteur descendant des deux côtés : sinon la règle claire ci-dessus,
   plus spécifique, l'emporterait et le filet resterait clair sur fond noir. */
.pricing_plan li.list-item_dark { border-bottom-color: var(--_colors---white--20); }

/* Le troisième bloc porte une image de fond ; le contenu est posé dessus dans
   un panneau blanc, pas directement sur la photo. */
.pricing_custom {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; height: 100%;
  padding: var(--size--size-14);
  border-radius: var(--border-radius--xsmall);
  overflow: clip;
}
.pricing_custom-img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.pricing_custom-block {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: var(--size--size-17);
  padding: var(--size--size-12);
  border-radius: var(--border-radius--xsmall);
  background-color: var(--_colors---primary--white);
  color: var(--_colors---primary--black);
}
.pricing_custom-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--size--size-13); }
.pricing_custom-head { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--size--size-9); }
.pricing_custom-value { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: var(--size--size-6); }
.pricing_custom-text { font-size: var(--size--size-14); line-height: 1; font-weight: var(--_typography---font-weight--medium); }
.pricing_custom-desc { font-size: var(--size--size-10); }
.pricing_custom-star { position: absolute; top: 1rem; right: 1rem; width: var(--size--size-17); }

/* ======================================================================= */
/* FAQ                                                                      */
/* ======================================================================= */
/* Deux colonnes égales : c'est la colonne de droite qui donne sa hauteur à la
   rangée, et l'image de gauche s'y étire. D'où l'image en absolu dans son
   cadre, plutôt qu'un rapport de forme imposé. */
.faq_content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size--size-5); }
.faq_img-wrap { position: relative; width: 100%; border-radius: var(--border-radius--xsmall); overflow: clip; }
.faq_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.faq_list-wrap { display: flex; flex-direction: column; gap: var(--size--size-7); }

/* Le bloc de contact ferme la colonne : la personne à gauche, les coordonnées
   à droite, séparées par un filet vertical d'un pixel. */
.faq_infos {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 2rem;
  width: 100%;
  padding-top: var(--size--size-4);
}
.faq_talk { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: .75rem; }
.faq_talk-pic { width: 2.75rem; aspect-ratio: 1; border-radius: var(--border-radius--tiny); object-fit: cover; object-position: 50% 0%; }
.faq_talk-texts { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.faq_talk-title { color: #0b0b0c; font-size: .875rem; font-weight: 500; line-height: 1.2; }
.faq_talk-position { color: var(--_colors---bleu--500); font-size: .82rem; font-weight: 500; }

.faq_contact { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; gap: 1.75rem; }
.faq_infos-divider { width: 1px; background-color: #ddd; }
.faq_infos-items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size--size-14); }
.faq_infos-item { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: .25rem; }
.faq_info-link { font-size: .9375rem; }
.faq_info-link:hover {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ======================================================================= */
/* Blog                                                                     */
/* ======================================================================= */
.blog-v3_head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--size--size-19); }

/* Vignette de renvoi vers le blog. La variante claire du template : fond bleu clair,
   pas de flou, texte et flèche en brun sombre. */
.note_component {
  display: flex;
  gap: var(--size--size-5);
  padding: var(--size--size-4);
  border-radius: var(--border-radius--xxsmall);
  background-color: var(--_colors---bleu--150);
}
.note_image { width: var(--size--size-24); aspect-ratio: 1; border-radius: var(--border-radius--tiny); object-fit: cover; }
.note_content { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--size--size-9); }
.note_title {
  max-width: 190px;
  margin-right: var(--size--size-6);
  color: var(--_colors---bleu--500);
  font-size: var(--size--size-8);
  line-height: 1.3;
}
.note_label-wrap { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.note_label {
  font-family: var(--_typography---font-family--detail);
  font-size: var(--size--size-5);
  text-transform: uppercase;
  color: var(--_colors---bleu--500);
}
.note_arrow { width: var(--size--size-8); opacity: .6; filter: invert(1); }

.blog-v3_list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--size--size-5); }
.blog-v3_img-wrap { border-radius: var(--border-radius--large); overflow: clip; margin-bottom: var(--size--size-12); }
.blog-v3_img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.blog-v3_content { display: flex; flex-direction: column; gap: var(--size--size-6); }
/* La graisse, l'interligne et l'approche viennent de la règle `h3` ; seule la
   taille est reprise ici, comme dans la source. */
.blog-v3_title { font-size: var(--size--size-14); }
.blog-v3_description { color: var(--_colors---bleu--500); font-size: var(--size--size-9); }
/* ======================================================================= */
/* Adaptations                                                              */
/* ======================================================================= */
@media (max-width: 991px) {
  .home-about_component { display: flex; flex-direction: column; gap: var(--size--size-19); }
  .card_component { padding: var(--size--size-12); gap: var(--size--size-21); }

  /* La FAQ perd son image et passe en une colonne. */
  .faq_content { display: flex; flex-direction: column; }
  .faq_img-wrap { display: none; }
  .pricing_plans,
  .blog-v3_list { grid-template-columns: 1fr; }

  /* Les cartes restent côte à côte, mais l'expansion au survol est neutralisée :
     sur tablette il n'y a pas de survol. */
  .blog-v3_title { font-size: var(--size--size-13); }
  .cases-v2_item:hover { width: 100%; }
  .cases-v2_block,
  .cases-v2_single { height: 23rem; }
  .case_logo { width: 8rem; height: var(--size--size-18); }
  .case_heading { font-size: var(--size--size-14); }
}

@media (max-width: 767px) {
  .section_home-header-v3 { padding-top: var(--size--size-26); }
  .features_results { aspect-ratio: 3 / 4; }
  .features_results-content { width: calc(100% - var(--size--size-19)); }

  .blog-v3_title { font-size: var(--size--size-12); }
  .cases-v2_list { gap: var(--size--size-4); }
  .cases-v2_block { height: 17rem; padding: var(--size--size-11); }
  .cases-v2_single { height: 17rem; }
  .case_logo { width: 7rem; height: var(--size--size-17); }
  .case_heading { font-size: var(--size--size-13); }

  /* La colonne de gauche passe au-dessus et perd son sommaire d'étapes ;
     elle ne peut plus rester collée. */
  .process_component { display: flex; flex-direction: column; gap: var(--size--size-15); }
  .process_content { position: relative; top: auto; }
  .process_steps { display: none; }

  /* Sur mobile, seules les coordonnées restent : la personne et le filet
     disparaissent pour ne pas serrer la ligne. */
  .faq_question { font-size: 1rem; }
  .faq_talk { display: none; }
  .faq_infos-divider { display: none; }
  .faq_infos { gap: 1.125rem; }
  .faq_info-link { font-size: .875rem; }
}

@media (max-width: 479px) {
  .cases-v2_list { flex-direction: column; gap: var(--size--size-10); }
  .faq_button { width: 2rem; height: 2rem; }
  .process_item { display: flex; flex-direction: column; }

  /* Le bandeau cesse d'être une rangée : le texte et le lien se replient
     en flux, sinon les mots s'écartent jusqu'à sortir du cadre. */
  .news-bar_link { display: block; text-align: left; }
  .news-bar_text { display: inline; }
  .news-bar_read-more { display: inline-flex; vertical-align: baseline; }
}