/* =========================================================================
   ALLIANCE & CO : landing page
   =========================================================================
   Version du 02/10/2026, suite au brief du client. Elle garde le vocabulaire
   graphique de la maquette Figma (nœud 104:671) mais suit la structure et les
   textes du brief : les peurs, les quatre engagements, les avis Google, trois
   chantiers, la méthode en cinq étapes, un seul bouton répété.

   Les couleurs et les polices sont celles du site en ligne, demande explicite
   du brief : relevées dans la feuille du kit Elementor d'alliancenco.fr, elles
   sont documentées une à une ci-dessous. La version fidèle à la maquette reste
   consultable dans index-v1.html / styles-v1.css.

   Le dessin vise 1440. Au-delà, le contenu se cale au centre ; en dessous, les
   colonnes se replient (section 09, seul endroit sans dessin de référence).
   ========================================================================= */

:root {
  /* --- Couleurs du site -------------------------------------------------
     Le bleu nuit du site est #001F3F (et non le #07182b de la maquette, qui
     tirait vers le noir). Le second bleu, l'or, la crème et les gris sont
     ceux du kit Elementor, repères Elementor en regard. */
  --nuit:        #001F3F;  /* 870ef80 : aplats sombres, boutons du site    */
  --nuit-clair:  #101D33;  /* bf890a9 : bandes sombres, cartes             */
  --or:          #C5A059;  /* b70a650 : seul accent de la marque           */
  --sable:       #E7D6B2;  /* éclairci de l'or, pour les fonds sombres     */
  --creme:       #FFF5E2;  /* 15e26ab : fond de section clair              */
  --ivoire:      #FCFBF8;  /* crème très délavée, fonds alternés           */
  --blanc:       #FFFFFF;
  --encre:       #101D33;  /* titres sur fond clair                        */
  --encre-citation: #172033;
  --texte:       #4F5357;  /* text : texte courant                         */
  --gris:        #797D80;  /* accent : mentions secondaires                */
  --filet:       #DCD8D0;  /* bordures sur fond clair                      */
  --vert-avis:   #3E6F5A;

  /* Poppins pour les titres et les boutons, Lora pour le texte courant :
     les deux familles du site, déjà chargées par lui. */
  --titre: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --corps: "Lora", Georgia, "Times New Roman", serif;

  /* Gouttière et respiration des sections fluides : elles suivent la largeur
     de l'écran au lieu de sauter d'un palier à l'autre. */
  --gouttiere: clamp(20px, 4vw, 80px);
  --section-y: clamp(56px, 7vw, 96px);
  --largeur:  1440px;
}

/* --- Remise à zéro -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, figure, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* Chrome rend Poppins plus étroit que Figma : `balance` répartit les lignes
   des titres au lieu de les couper au mot près. */
h1, h2, .titre-section { text-wrap: balance; }

.bande { width: 100%; }
.shell {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* --- Éléments communs ----------------------------------------------------- */
/* Pas de filet devant le surtitre : retiré le 02/10 à la demande de Maurian,
   le mot en capitales dorées se tient seul. */
.eyebrow { display: flex; align-items: center; }
.eyebrow span {
  font-family: var(--titre); font-weight: 600; font-size: 12px;
  text-transform: uppercase; color: var(--or); line-height: normal;
}
.eyebrow--clair span { color: var(--sable); }

.titre-section { font-family: var(--titre); font-weight: 500; font-size: clamp(28px, 4vw, 52px); line-height: 1.08; color: var(--encre); }
.titre-section--clair { color: var(--blanc); }
.intro-section { font-size: 16px; line-height: 1.65; color: var(--texte); }
.intro-section--clair { color: rgba(255, 255, 255, 0.72); }

.tete-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.tete-section__titre { display: flex; flex-direction: column; gap: 16px; width: 760px; max-width: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding-inline: 24px; border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--titre); font-weight: 600; font-size: 14px; line-height: normal;
  transition: background-color .18s ease, border-color .18s ease;
}
.btn img { width: 16px; height: 16px; }
.btn--or { background: var(--or); border-color: var(--or); color: var(--nuit); }
.btn--or:hover { background: #b9924c; border-color: #b9924c; }

/* Le bouton de fin de bande, toujours le même, toujours au centre. */
.bande__action { display: flex; justify-content: center; padding-top: 48px; }

/* La rangée d'étoiles, reprise de la maquette. */
.etoiles { font-family: var(--titre); letter-spacing: 1px; color: var(--or); }

/* =========================================================================
   01 · EN-TÊTE COLLÉ
   =========================================================================
   Le brief demande que le logo, le téléphone et le courriel restent visibles.
   Les deux rangs sont donc collés en haut, barre de contact comprise. */
.entete { position: sticky; top: 0; z-index: 50; }

.barre-contact { background: var(--nuit); height: 36px; display: flex; align-items: center; }
.barre-contact .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.barre-contact__infos { display: flex; align-items: center; gap: 24px; }
.barre-contact__lien { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.barre-contact__lien:hover { color: var(--blanc); }
.barre-contact__lien img { width: 12px; height: 12px; }
.barre-contact__dispo { font-size: 11px; color: rgba(255, 255, 255, 0.56); }

.nav { background: var(--nuit-clair); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.nav .shell { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marque { display: flex; align-items: center; }
/* Le logo du site, fond détouré : il tient sur le bleu nuit sans retouche. */
.marque__logo { width: auto; height: 64px; align-self: flex-start; }

/* =========================================================================
   02 · LES PEURS : l'accroche sur la photo
   ========================================================================= */
.hero { position: relative; display: flex; align-items: center; min-height: 640px; overflow: hidden; }
.hero__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(0, 31, 63, 0.94) 0%,
    rgba(0, 31, 63, 0.58) 56%,
    rgba(0, 31, 63, 0.18) 90%);
}
.hero .shell { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; padding-block: var(--section-y); }
/* Gros, comme la page de référence du client : le corps descend par paliers
   plutôt que par une seule valeur, la phrase étant longue. */
.hero__titre {
  font-family: var(--titre); font-weight: 500;
  font-size: clamp(32px, 4.6vw, 56px); line-height: 1.1;
  color: var(--blanc); max-width: 1120px;
}

/* =========================================================================
   03 · AVEC ALLIANCE & CO : les quatre engagements
   ========================================================================= */
.engagements { background: var(--nuit-clair); }
.engagements .shell { display: flex; flex-direction: column; gap: 36px; padding-block: calc(var(--section-y) * 0.75); }
.engagements__titre { font-family: var(--titre); font-weight: 500; font-size: clamp(24px, 3vw, 32px); color: var(--blanc); line-height: 1.2; }
/* Moins gros que l'accroche, demande du brief. */
.engagements__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.engagement { display: flex; align-items: flex-start; gap: 14px; }
.engagement img { width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; }
.engagement p { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.84); }

.engagements__preuve {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.15);
}
/* La note, écrite comme sur la page de référence : les étoiles, puis la
   phrase sur une seule ligne. */
.note-google { display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255, 255, 255, 0.84); }
.note-google .etoiles { font-size: 20px; }
.note-google b { font-family: var(--titre); font-weight: 600; color: var(--blanc); }

/* =========================================================================
   04 · AVIS GOOGLE
   ========================================================================= */
.avis { background: var(--ivoire); }
.avis .shell { display: flex; flex-direction: column; gap: 48px; padding-block: var(--section-y); }
.avis__note { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; line-height: normal; }
.note-etoiles { display: flex; align-items: center; gap: 6px; }
.note-etoiles .etoiles { font-size: 15px; }
.note-etoiles span { font-size: 12px; color: var(--gris); }
.note-etoiles .etoiles { color: var(--or); }
.avis__note > span { font-size: 11px; color: var(--gris); }

/* Le carrousel : la piste défile et s'accroche, les cartes gardent la largeur
   d'une demi-page sur grand écran et d'une page entière sur téléphone. Le
   défilement automatique et les points sont dans assets/js/carrousel.js ; sans
   JavaScript, la piste reste glissable au doigt et à la molette. */
.carrousel { position: relative; }
.carrousel__piste {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* Les ombres des cartes débordent : la marge les laisse respirer sans
     déclencher de barre de défilement verticale. */
  padding: 4px 4px 24px;
  margin: -4px -4px -24px;
  scrollbar-width: none;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste > .carte-avis {
  flex: 0 0 calc(50% - 10px);
  scroll-snap-align: start;
}

.carrousel__points { display: flex; justify-content: center; gap: 10px; padding-top: 28px; }
.point {
  width: 9px; height: 9px; padding: 0; border-radius: 999px;
  background: var(--filet);
  transition: background-color .2s ease, width .2s ease;
}
.point:hover { background: var(--gris); }
.point.is-active { width: 26px; background: var(--or); }

@media (prefers-reduced-motion: reduce) {
  .carrousel__piste { scroll-behavior: auto; }
  .point { transition: none; }
}
/* Pas d'ombre portée : dans la piste, les quatre cartes se touchent presque et
   leurs ombres se rejoignaient en une bande grise continue sous le carrousel.
   Le filet et le fond blanc suffisent à les détacher de l'ivoire. */
.carte-avis {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 260px; padding: 28px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px;
}
.carte-avis__citation { display: flex; flex-direction: column; gap: 14px; }
.carte-avis blockquote { font-style: italic; font-size: 16px; line-height: 1.65; color: var(--encre-citation); }
.carte-avis__client { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 20px; background: var(--nuit-clair);
  display: grid; place-items: center;
  font-family: var(--titre); font-weight: 600; font-size: 11px; color: var(--sable);
}
.carte-avis__identite { display: flex; flex-direction: column; gap: 2px; line-height: normal; }
.carte-avis__identite b { font-family: var(--titre); font-weight: 600; font-size: 12px; color: var(--encre); }
.carte-avis__identite span { font-size: 11px; color: var(--gris); }
.verifie { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--vert-avis); line-height: normal; }
.verifie img { width: 13px; height: 13px; }

/* =========================================================================
   05 · RÉALISATIONS : trois chantiers du site
   ========================================================================= */
.realisations { background: var(--creme); }
.realisations .shell { display: flex; flex-direction: column; gap: 48px; padding-block: var(--section-y); }
/* --- Le projet en vedette, comme la maquette le dessine ------------------- */
/* Photo à gauche sur 795, récit sur fond nuit à droite, chiffres au-dessus du
   lien : c'est la structure du nœud 104:816, reprise telle quelle. */
/* Hauteur fixée, comme au dessin : les photos du site sont en portrait comme
   en paysage, sans cette hauteur la plus haute étirerait tout le bloc. */
.projet-vedette { display: flex; height: 580px; background: var(--nuit-clair); border-radius: 12px; overflow: hidden; }
/* 795 au dessin, mais la photo cède du terrain avant le point de rupture :
   figée, elle poussait le récit hors de l'écran entre 1200 et 1280. */
.projet-vedette__visuel { display: block; flex: 0 1 795px; min-width: 0; }
.projet-vedette__visuel img { width: 100%; height: 100%; object-fit: cover; }
.projet-vedette__recit { flex: 1 0 380px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px; }
.projet-vedette__texte { display: flex; flex-direction: column; gap: 18px; }
.projet-vedette__lieu { font-family: var(--titre); font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--sable); line-height: normal; }
.projet-vedette h3 { font-family: var(--titre); font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; color: var(--blanc); }
.projet-vedette__texte p:last-child { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); }
.projet-vedette__chiffres { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.chiffre { display: flex; flex-direction: column; gap: 4px; line-height: normal; }
.chiffre b { font-family: var(--titre); font-weight: 500; font-size: 20px; color: var(--blanc); }
.chiffre span { font-size: 11px; color: rgba(255, 255, 255, 0.5); }
/* Le lien fléché : le texte et la flèche sur une seule ligne. Sans cette
   règle, l'image reprend le display:block de la remise à zéro et tombe sous
   le texte. */
.lien-fleche {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--titre); font-weight: 600; font-size: 12px; color: var(--encre); line-height: normal;
}
.lien-fleche img { width: 14px; height: 14px; }
.lien-fleche--sable { color: var(--sable); font-size: 13px; gap: 8px; }
.lien-fleche--sable img { width: 16px; height: 16px; }
/* --- Les deux cartes sous la vedette -------------------------------------- */
.grille-projets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.carte-projet {
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; overflow: hidden;
  transition: border-color .2s ease;
}
.carte-projet:hover { border-color: var(--or); }
.carte-projet__visuel { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
/* Les photos du site sont de formats différents : la boîte impose le rapport,
   l'image se recadre au centre. Posée en absolu, sinon sa hauteur naturelle
   étire la boîte et les deux cartes ne s'alignent plus. */
.carte-projet__visuel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.etiquette {
  position: absolute; top: 20px; left: 20px;
  display: inline-flex; align-items: center; height: 30px; padding-inline: 12px; border-radius: 15px;
  background: rgba(0, 31, 63, 0.9);
  font-family: var(--titre); font-weight: 600; font-size: 10px; text-transform: uppercase; color: var(--blanc);
}
.carte-projet__corps { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px; }
.carte-projet__lieu { font-family: var(--titre); font-weight: 600; font-size: 11px; text-transform: uppercase; color: var(--or); line-height: normal; }
.carte-projet__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.carte-projet__tete h3 { font-family: var(--titre); font-weight: 500; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.2; color: var(--encre); }
.carte-projet__ouvrir { width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--filet); border-radius: 20px; display: grid; place-items: center; }
.carte-projet__ouvrir img { width: 16px; height: 16px; }
.carte-projet__meta { font-size: 12px; color: var(--gris); line-height: normal; }

/* =========================================================================
   06 · MÉTHODE : cinq étapes
   ========================================================================= */
.methode { background: var(--nuit-clair); }
.methode .shell { display: flex; flex-direction: column; gap: 56px; padding-block: var(--section-y); }

/* L'en-tête. La maquette pose un filet au-dessus du surtitre ; il est retiré
   comme partout ailleurs sur la page, demande du 02/10. */
.methode__tete { display: flex; flex-direction: column; gap: 24px; }
.eyebrow--empile { flex-direction: column; align-items: flex-start; }
.methode__texte { display: flex; flex-direction: column; gap: 20px; width: 840px; max-width: 100%; }

/* Les cinq étapes, séparées par des filets verticaux de 140 qui sont des
   éléments à part entière dans le dessin, et non des bordures de colonne. */
.etapes { display: flex; align-items: stretch; gap: 24px; }
.etape { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.etape__filet { flex: 0 0 1px; width: 1px; height: 140px; background: rgba(255, 255, 255, 0.1); }
.etape__marqueur { display: flex; align-items: center; gap: 16px; }
.etape__marqueur b {
  font-family: var(--titre); font-weight: 600; font-size: 12px;
  text-transform: uppercase; color: var(--sable); line-height: normal;
}
.etape__icone {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 21px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid; place-items: center;
}
.etape__icone img { width: 18px; height: 18px; }
.etape h3 { font-family: var(--titre); font-weight: 500; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; color: var(--blanc); }
.etape p { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); }
.bande__action--clair { padding-top: 8px; }

/* =========================================================================
   07 · PIED DE PAGE
   ========================================================================= */
.pied { background: var(--nuit); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.pied .shell { display: flex; flex-direction: column; gap: 48px; padding-top: calc(var(--section-y) * 0.75); padding-bottom: 30px; }
.pied__contenu { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.pied__societe { width: 350px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pied__societe .marque__logo { height: 56px; }
.pied__societe p { font-size: 12px; line-height: 1.65; color: rgba(255, 255, 255, 0.56); }
.reseaux { display: flex; gap: 10px; }
.reseaux a { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 17px; display: grid; place-items: center; transition: border-color .18s ease; }
.reseaux a:hover { border-color: var(--or); }
.reseaux img { width: 14px; height: 14px; }
.pied__groupe { width: 190px; display: flex; flex-direction: column; gap: 14px; }
.pied__groupe--contact { width: 260px; }
.pied__titre { font-family: var(--titre); font-weight: 600; font-size: 11px; text-transform: uppercase; color: var(--or); line-height: normal; }
.pied__liens { display: flex; flex-direction: column; gap: 9px; }
.pied__liens a, .pied__ligne { font-size: 12px; color: rgba(255, 255, 255, 0.66); line-height: normal; }
.pied__liens a:hover { color: var(--blanc); }
.pied__ligne { display: flex; align-items: center; gap: 9px; }
.pied__ligne--adresse { align-items: flex-start; }
.pied__ligne img { width: 14px; height: 14px; flex-shrink: 0; }
.pied__ligne address { font-style: normal; line-height: 1.5; }
.pied__filet { height: 1px; background: rgba(255, 255, 255, 0.1); }
.pied__legal { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 10px; color: rgba(255, 255, 255, 0.4); line-height: normal; }

/* =========================================================================
   09 · ADAPTATION AUX ÉCRANS
   =========================================================================
   La maquette ne dessine que le bureau. Les corps de texte et les marges sont
   fluides (voir les clamp plus haut) : ce qui suit ne règle que les ruptures,
   c'est-à-dire les moments où une rangée n'a plus la place d'exister et doit
   se replier. Chaque palier est posé à la largeur où le contenu le demande,
   pas sur une liste d'appareils.
   ========================================================================= */

/* 1199 : le projet en vedette n'a plus la place de tenir sa photo de 795 à
   côté de son récit, et les cinq étapes deviennent trop étroites à cinq. */
@media (max-width: 1199px) {
  .projet-vedette { flex-direction: column; height: auto; }
  /* La carte passée en colonne, la base flexible de 795 vaudrait pour la
     hauteur : elle est remise à plat avant de fixer la hauteur de la photo. */
  .projet-vedette__visuel { flex: 0 0 auto; width: 100%; height: 320px; }
  .etapes { flex-wrap: wrap; row-gap: 40px; }
  .etape { flex-basis: calc(33.333% - 32px); }
  .etape__filet { display: none; }
  .methode__texte { width: 100%; }
}

/* 899 : deux avis côte à côte deviennent illisibles, les engagements et les
   étapes passent à deux colonnes, les en-têtes de section s'empilent. */
@media (max-width: 899px) {
  .engagements__liste { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .carrousel__piste > .carte-avis { flex-basis: 100%; }
  .tete-section { flex-direction: column; align-items: flex-start; gap: 20px; }
  .avis__note { align-items: flex-start; }
  .etape { flex-basis: calc(50% - 12px); }
  .pied__contenu { flex-wrap: wrap; gap: 36px; }
  .pied__societe { width: 100%; }
}

/* 767 : les deux cartes de projet passent l'une sous l'autre. */
@media (max-width: 767px) {
  .grille-projets { grid-template-columns: minmax(0, 1fr); }
  /* Empilées, la photo du projet en vedette et celles des deux cartes se
     suivent à l'écran : même rapport 16/10 pour les trois, sinon la première
     détonne. */
  .projet-vedette__visuel { position: relative; height: auto; aspect-ratio: 16 / 10; }
  .projet-vedette__visuel img { position: absolute; inset: 0; }
  .projet-vedette__recit { padding: 28px; gap: 24px; }
  .carte-avis { padding: 22px; min-height: 0; }
  .pied__groupe, .pied__groupe--contact { width: calc(50% - 18px); }
}

/* 559 : téléphone. La barre reste sur un seul rang, logo et bouton resserrés,
   pour que l'en-tête collé ne mange pas le quart de l'écran. Les étapes et
   les chiffres s'empilent, le bouton prend toute la largeur. */
@media (max-width: 559px) {
  .nav .shell { gap: 10px; }
  .marque__logo { height: 38px; }
  .btn { padding-inline: 14px; font-size: 13px; white-space: nowrap; }
  .btn img { width: 14px; height: 14px; }
  .barre-contact { height: auto; padding-block: 7px; }
  .barre-contact .shell { justify-content: center; gap: 14px; }
  .barre-contact__dispo { display: none; }
  .barre-contact__lien { font-size: 11px; }

  .etapes { flex-direction: column; gap: 32px; }
  .etape { flex-basis: auto; }

  .projet-vedette__chiffres { flex-wrap: wrap; gap: 18px 28px; }
  .avant-apres__chiffres { flex-wrap: wrap; }
  .engagements__preuve { flex-direction: column; align-items: flex-start; gap: 20px; }
  .bande__action .btn, .engagements__preuve .btn { width: 100%; max-width: 360px; }
  .pied__groupe, .pied__groupe--contact { width: 100%; }
  .pied__legal { flex-direction: column; align-items: flex-start; gap: 10px; }
  .carte-projet__tete { gap: 12px; }
}

/* 400 : les plus petits téléphones. Le titre d'accroche garde de l'air en
   perdant un cran de corps, et la pilule de devis descend sous la marque. */
@media (max-width: 399px) {
  .hero__titre { font-size: 30px; }
  .btn { padding-inline: 12px; }
  .marque__logo { height: 34px; }
}

/* Écran bas et large, un téléphone tenu à l'horizontale : le hero n'a pas
   besoin de 640 de haut, il occuperait tout l'écran sans rien montrer. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 420px; }
  .entete { position: static; }
}