/* ============================================================================
   Home (index.html) — styles spécifiques à la page d'accueil.
   Importe APRÈS tokens.css + base.css + components.css.
   Géométrie calée sur extraction-assayag/pages/home (section frame-427321419).
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   HERO — section « frame-427321419 » (1440×809)
   Photo plein cadre (carte arrondie, marge 20px) + texte BLANC superposé.
   Sources (type-map.json) :
     · eyebrow 4581:648 « Enfants, adultes et adolescents » — Nunito 24/300/28, #FFF, x100 y266
     · titre   4581:649 « Orthodontiste à Ozoir-la-Ferrière » — Nunito 104/200/104, #FFF, x100 y314, w827
     · desc    4581:650 — Inter 18/300/28, #FFF, x100 y673, w582
     · CTA     I4581:651;4498:4697 « Prendre rendez-vous » — x1133 y689
   Image (photo-css.json) : hero, container 1400×743, background-size/position figés.
   ───────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   RYTHME VERTICAL — gap inter-sections constant de Home (mesuré : 160px partout,
   reconstruit depuis les Y absolus du type-map). Les hauteurs de frame
   (layout-plan.size) n'incluent PAS ce blanc ; c'est une marge pure.
   Hors-cadre du harness section (el.screenshot() = border-box, marge exclue),
   donc aucune régression sur les scores par section. home.css n'est chargé que
   par index.html → règle déjà scopée à Home.
   ───────────────────────────────────────────────────────────────────────── */
main > section + section { margin-top: 160px; }   /* entre sections de contenu */
main + .site-footer       { margin-top: 160px; }   /* même gap avant le footer */

.hero {
  position: relative;
  height: 809px;
}

.hero__media {
  position: absolute;
  top: 66px;
  left: 20px;
  right: 20px;
  height: 743px;
  border-radius: 24px;                 /* rayon estimé — à caler contre la ref */
  overflow: hidden;
  background-color: var(--c-blue);     /* repli avant chargement vidéo */
}
/* Vidéo de fond plein cadre */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__video--mobile { display: none; }  /* desktop = source web */
/* Scrim noir ~16.5% par-dessus la vidéo (lisibilité du texte blanc) */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.165);
  pointer-events: none;
}

.hero__content {
  position: absolute;
  left: 100px;
  top: 266px;
  display: flex;
  flex-direction: column;
  gap: 20px;                           /* eyebrow(y266,h28) → titre(y314) = 20px */
  color: var(--neutral-0);
}
.hero__eyebrow {
  font-family: var(--font-heading);    /* Nunito */
  font-size: var(--fs-h4);             /* 24 */
  font-weight: var(--fw-h4);           /* 300 */
  line-height: var(--lh-h4);           /* 28 */
}
.hero__title {
  width: 827px;
  font-family: var(--font-heading);    /* Nunito */
  font-size: var(--fs-h1);             /* 104 */
  font-weight: var(--fw-h1);           /* 200 */
  line-height: var(--lh-h1);           /* 104 */
}

.hero__desc {
  position: absolute;
  left: 100px;
  top: 673px;
  width: 582px;
  color: var(--neutral-0);
  font-size: var(--fs-body-lg);        /* Inter 18 */
  font-weight: var(--fw-body-lg);      /* 300 */
  line-height: var(--lh-body-lg);      /* 28 */
}

.hero__cta {
  position: absolute;
  /* Ancré par la DROITE : bord droit figé à x1340 (= marge 100px, miroir du
     contenu hero à x100). Le bouton Figma d'origine = 207px à x1133 (droite 1340) ;
     le skin A3 est plus large (wordmark) → ancrage right pour ne pas déborder. */
  right: 100px;
  top: 689px;
}

/* ─────────────────────────────────────────────────────────────────────────
   INTRO — section « intro » (1440×560)
   Colonne texte (gauche, x80) + photo (droite, x729) + 3 cartes « iconstape ».
   Sources : layout-plan (intro) + type-map. Le saut de ligne du titre est lu
   dans layout-plan (\n preservé), PAS dans type-map (qui l'aplatit en espace).
   Cartes : fond --c-biege, rayon 12 ; icônes star/heart/thumbs-up en --c-blue
   (star = icons/icon-selector-2, thumb = icon-selector-4, heart = card master).
   ───────────────────────────────────────────────────────────────────────── */
.intro { position: relative; height: 560px; }

.intro__title {
  position: absolute; left: 80px; top: 26px; width: 569px;
  font-family: var(--font-heading);    /* Nunito */
  font-size: var(--fs-h2);             /* 40 */
  font-weight: var(--fw-h2);           /* 300 */
  line-height: var(--lh-h2);           /* 48 */
  color: #000;                         /* type-map : #000000 (pas neutral-900) */
}
.intro__desc {
  position: absolute; left: 80px; top: 154px; width: 569px;
  font-size: var(--fs-body-md);        /* Inter 16 */
  font-weight: var(--fw-body-md);      /* 300 */
  line-height: var(--lh-body-md);      /* 24 */
  color: #000;
}
.intro__media {
  position: absolute; left: 729px; top: 0; width: 631px; height: 276px;
  border-radius: 16px;                 /* rayon mesuré sur la ref */
  background: url('../img/intro.webp') center / cover no-repeat;
}

.intro__cards {
  position: absolute; left: 80px; top: 356px; width: 1280px;
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 47.5px;
}
.icard {
  height: 204px; padding: 20px;
  background: var(--c-biege);          /* #FEFCF9 */
  border-radius: 12px;                 /* rayon du composant card-iconstape */
  display: flex; flex-direction: column; gap: 20px;
}
.icard__icon { width: 40px; height: 40px; flex: 0 0 auto; display: block; color: var(--c-blue); }
.icard__title {
  font-family: var(--font-heading);    /* Nunito */
  font-size: var(--fs-h3);             /* 28 */
  font-weight: var(--fw-h3);           /* 300 */
  line-height: var(--lh-h3);           /* 36 */
  color: var(--neutral-900);           /* #202020 */
}
.icard__body {
  font-size: var(--fs-body-md);        /* Inter 16 */
  font-weight: var(--fw-body-md);      /* 300 */
  line-height: var(--lh-body-md);      /* 24 */
  color: var(--neutral-900);           /* #202020 */
}

/* ─────────────────────────────────────────────────────────────────────────
   TRAITEMENTS — section « traitements » (1440×396)
   Titre (gauche) + CTA pilule (droite) ; 3 cartes-image (céramique/invisible/
   linguale) avec titre blanc en bas + flèche ↗, scrim bas pour lisibilité.
   ───────────────────────────────────────────────────────────────────────── */
.trt { position: relative; height: 396px; }
.trt__title {
  position: absolute; left: 80px; top: 0; width: 521px;
  font-family: var(--font-heading); font-size: var(--fs-h2);
  font-weight: var(--fw-h2); line-height: var(--lh-h2); color: #000;
}
.trt__cta { position: absolute; right: 80px; top: 0; }
.trt__cards {
  position: absolute; left: 80px; top: 96px; width: 1280px;
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.tcard {
  position: relative; display: block; height: 300px;
  border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--neutral-0);
}
.tcard__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.tcard::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.26);          /* scrim plat ~26% mesuré sur la réf (lisibilité titre blanc) */
}
.tcard__arrow { position: absolute; top: 20px; right: 20px; z-index: 1; width: 24px; height: 24px; }
.tcard__title {
  position: absolute; left: 20px; bottom: 20px; right: 20px; z-index: 1;
  font-family: var(--font-heading); font-size: var(--fs-h3);
  font-weight: var(--fw-h3); line-height: var(--lh-h3);
}

/* ─────────────────────────────────────────────────────────────────────────
   ORTHO POUR TOUS — section « orthodontie-pour-tous » (1440×424)
   Texte (gauche, fond clair) + photo (droite x711 w649 pleine hauteur).
   ───────────────────────────────────────────────────────────────────────── */
.opt { position: relative; height: 424px; }
.opt__media {
  position: absolute; left: 711px; top: 0; width: 649px; height: 424px;
  border-radius: 16px; background: url('../img/ortho-pour-tous.webp') center / cover no-repeat;
}
.opt__title {
  position: absolute; left: 80px; top: 32px; width: 446px;
  font-family: var(--font-heading); font-size: var(--fs-h2);
  font-weight: var(--fw-h2); line-height: var(--lh-h2); color: var(--neutral-900);
}
.opt__desc {
  position: absolute; left: 80px; top: 176px; width: 551px;
  font-size: var(--fs-body-md); font-weight: var(--fw-body-md);
  line-height: var(--lh-body-md); color: var(--neutral-900);
}
.opt__cta { position: absolute; left: 80px; top: 344px; }

/* ─────────────────────────────────────────────────────────────────────────
   ÉQUIPE — section « equipe » (1440×456)
   Photo (gauche x80 w670) + carte crème (droite x782 w578) titre/texte/CTA.
   ───────────────────────────────────────────────────────────────────────── */
.team { position: relative; height: 456px; }
.team__media {
  position: absolute; left: 80px; top: 0; width: 670px; height: 456px;
  border-radius: 16px; background: url('../img/equipe.webp') center / cover no-repeat;
}
.team__card {
  position: absolute; left: 782px; top: 0; width: 578px; height: 456px;
  background: var(--c-biege); border-radius: 24px;
}
.team__title {
  position: absolute; left: 48px; top: 48px; width: 467px;
  font-family: var(--font-heading); font-size: var(--fs-h2);
  font-weight: var(--fw-h2); line-height: var(--lh-h2); color: var(--neutral-900);
}
.team__desc {
  position: absolute; left: 48px; top: 192px; width: 482px;
  font-size: var(--fs-body-md); font-weight: var(--fw-body-md);
  line-height: var(--lh-body-md); color: var(--neutral-900);
}
.team__cta { position: absolute; left: 48px; top: 360px; }

/* ─────────────────────────────────────────────────────────────────────────
   URGENCE — section « urgence » (1440×284)
   Texte + liste à flèches (gauche, fond clair) + carte bleue (droite) avec
   CTA bleu clair.
   ───────────────────────────────────────────────────────────────────────── */
.urg { position: relative; height: 284px; }
.urg__title {
  position: absolute; left: 80px; top: 0; width: 560px;
  font-family: var(--font-heading); font-size: var(--fs-h2);
  font-weight: var(--fw-h2); line-height: var(--lh-h2); color: var(--neutral-900);
}
.urg__intro {
  position: absolute; left: 80px; top: 96px; width: 512px;
  font-size: var(--fs-body-md); font-weight: var(--fw-body-md);
  line-height: var(--lh-body-md); color: var(--neutral-900);
}
.urg__list {
  position: absolute; left: 80px; top: 160px; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
}
.urg__list li {
  display: flex; align-items: center; gap: 8px; height: 32px;
  font-size: var(--fs-body-md); font-weight: var(--fw-body-md);
  line-height: var(--lh-body-md); color: var(--neutral-900);
}
.urg__arrow { width: 16px; height: 16px; flex: 0 0 auto; color: var(--neutral-900); }
.urg__card {
  position: absolute; left: 672px; top: 44px; width: 688px; height: 240px;
  background: var(--c-blue); border-radius: 24px;
}
.urg__card-text {
  position: absolute; left: 32px; top: 32px; width: 624px;
  color: var(--neutral-0); font-size: var(--fs-body-md);
  font-weight: var(--fw-body-md); line-height: var(--lh-body-md);
}
.urg__card-cta { position: absolute; left: 331px; top: 160px; white-space: nowrap; min-height: 48px; padding: 0 37px; }
.cta--lblue { background: var(--c-light-blue); }
.cta--lblue:hover { background: var(--c-blue); }

/* ─────────────────────────────────────────────────────────────────────────
   PHOTOS CABINET — section « photos-cabinet » (1440×222) — 3 images, clic →
   le-cabinet.html (toute la rangée).
   ───────────────────────────────────────────────────────────────────────── */
.cabinet-sec { position: relative; height: 222px; }
.cabinet { position: absolute; inset: 0; display: block; }
.cabinet__img {
  position: absolute; top: 0; height: 222px; border-radius: 16px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cabinet__img--1 { left: 80px;   width: 372px; }
.cabinet__img--2 { left: 484px;  width: 491px; }
.cabinet__img--3 { left: 1007px; width: 353px; }

/* ─────────────────────────────────────────────────────────────────────────
   PLATEAU TECHNIQUE (promo) — section « equipe » (1440×432)
   Texte (gauche x128) titre/desc/CTA + photo (droite x837 w523, r16 cover).
   ───────────────────────────────────────────────────────────────────────── */
.promo { position: relative; height: 432px; }
.promo__title {
  position: absolute; left: 128px; top: 48px; width: 629px;
  font-family: var(--font-heading); font-size: var(--fs-h2);
  font-weight: var(--fw-h2); line-height: var(--lh-h2); color: var(--neutral-900);
}
.promo__desc {
  position: absolute; left: 128px; top: 144px; width: 629px;
  font-size: var(--fs-body-md); font-weight: var(--fw-body-md);
  line-height: var(--lh-body-md); color: var(--neutral-900);
}
.promo__cta { position: absolute; left: 128px; top: 336px; }
.promo__media {
  position: absolute; left: 837px; top: 0; width: 523px; height: 432px;
  border-radius: 16px; background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* ─────────────────────────────────────────────────────────────────────────
   TÉMOIGNAGE — section « avis » (1440×400)
   Titre + carte crème (avis rédigé) + 2 photos avant/après avec badges.
   ───────────────────────────────────────────────────────────────────────── */
.avis { position: relative; height: 400px; }
.avis__title {
  position: absolute; left: 80px; top: 0; width: 694px;
  font-family: var(--font-heading); font-size: var(--fs-h2);
  font-weight: var(--fw-h2); line-height: var(--lh-h2); color: #000;
}
.avis__card {
  position: absolute; left: 80px; top: 96px; width: 462px; height: 304px;
  background: var(--c-biege); border: 1px solid rgba(0,0,0,0.06); border-radius: 16px;
}
.avis__stars {
  position: absolute; left: 24px; top: 22px;
  color: #F0B22B; font-size: 25px; line-height: 1; letter-spacing: 5px;
}
.avis__name {
  position: absolute; left: 20px; top: 84px;
  font-family: var(--font-heading); font-size: var(--fs-h4);
  font-weight: var(--fw-h4); line-height: var(--lh-h4); color: var(--neutral-900);
}
.avis__body {
  position: absolute; left: 20px; top: 120px; width: 422px;
  font-size: var(--fs-body-md); font-weight: var(--fw-body-md);
  line-height: var(--lh-body-md); color: var(--neutral-900);
}
.avis__cta { position: absolute; left: 20px; top: 236px; }
.avis__photo {
  position: absolute; top: 96px; width: 377px; height: 304px;
  border-radius: 16px; background-size: cover; background-position: center; background-repeat: no-repeat;
}
.avis__photo--before {
  left: 590px; background-image: url('../img/avant.webp');
  background-size: 773.3px 304px; background-position: -228.76px -0.45px;
}
.avis__photo--after  { left: 983px; background-image: url('../img/apres.webp'); }
.avis__badge {
  position: absolute; right: 8px; bottom: 8px;
  padding: 4px 12px; border-radius: 8px;
  background: rgba(0,0,0,0.5); color: var(--neutral-0);
  font-size: var(--fs-body-sm); line-height: var(--lh-body-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   AVIS GOOGLE — Proposition 2 (« widget Google reconnaissable »), validée client.
   PAS de référence Figma → validation à l'œil (proposition de design). Couleurs
   HORS tokens scopées au composant : fond #F4F7FA, or étoiles #F5A623, bordure
   cartes #ECEFF3, gris textes #6B7783 / #9AA7B3 / #3D4B59 ; navy = token --c-blue.
   Inter auto-hébergé = w300/400/500 → les 600 de la source sont snappés à 500
   (pas de faux-gras). Boutons = skins A1 (navy plein) / A3 (ghost) du système.
   ───────────────────────────────────────────────────────────────────────── */
.gavis {
  background: #F4F7FA;
  padding: 60px 28px 66px;
  color: var(--c-blue);
}
.gavis__head { text-align: center; margin-bottom: 36px; }
.gavis__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: 1.5px; text-transform: uppercase; color: #9AA7B3;
}
.gavis__title {
  margin: 0 0 16px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 32px; line-height: 1.2; color: var(--c-blue);
}
.gavis__stars { color: #F5A623; letter-spacing: 2px; display: inline-block; white-space: nowrap; }
.gavis__g { width: 13px; height: 13px; vertical-align: middle; }
.gavis__g--big { width: 24px; height: 24px; }
.gavis__agg {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 18px 9px 14px; border-radius: 999px;
  background: var(--neutral-0); border: 1px solid #ECEFF3;
  box-shadow: 0 2px 10px rgba(43, 82, 115, .05);
}
.gavis__score { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--c-blue); }
.gavis__agg .gavis__stars { font-size: 17px; }
.gavis__cnt { font-size: 14px; color: #6B7783; }

/* — Grille de cartes — */
.gavis__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gavis__card {
  display: flex; flex-direction: column; gap: 13px;
  padding: 24px 22px; border-radius: 18px;
  background: var(--neutral-0); border: 1px solid #ECEFF3;
  box-shadow: 0 6px 22px rgba(43, 82, 115, .06);
}
.gavis__ch { display: flex; align-items: center; gap: 12px; }
.gavis__who { flex: 1; min-width: 0; }
.gavis__av {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--neutral-0);
}
.gavis__nm { margin: 0; font-size: 15px; font-weight: 500; color: var(--c-blue); }
.gavis__src { margin: 2px 0 0; display: flex; align-items: center; gap: 5px; font-size: 12px; color: #6B7783; }
.gavis__dt { font-size: 12px; color: #9AA7B3; white-space: nowrap; }
.gavis__card .gavis__stars { font-size: 16px; }
.gavis__rv { margin: 0; font-size: 14.5px; line-height: 1.6; color: #3D4B59; }

/* — Pied : 2 liens (skins A1 navy plein / A3 ghost, valeurs du système) — */
.gavis__foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 42px; }
.gavis__btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s, color .18s;
}
.gavis__btn--primary {
  background: var(--c-blue); color: var(--neutral-0); border: 0;
  box-shadow: 0 2px 6px rgba(43, 82, 115, .2);
}
.gavis__btn--primary:hover {
  background: #34618A; transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(43, 82, 115, .3);
}
.gavis__btn--ghost {
  background: var(--neutral-0); color: var(--c-blue); border: 1.5px solid var(--c-blue);
}
.gavis__btn--ghost:hover {
  background: var(--c-blue); color: var(--neutral-0);
  transform: translateY(-1px); box-shadow: 0 8px 20px rgba(36, 59, 82, .26);
}
@media (prefers-reduced-motion: reduce) {
  .gavis__btn, .gavis__btn:hover { transform: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE Home — la maquette est en absolu (1440) ; sur mobile chaque section
   repasse en flux vertical (statique, pleine largeur). Pas de maquette mobile :
   calage au jugement. Padding horizontal commun 24px.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  main > section + section { margin-top: 80px; }
  main + .site-footer       { margin-top: 80px; }

  /* ── HERO : vidéo verticale en fond, texte empilé en bas ─────────────── */
  .hero {
    height: auto;
    min-height: 520px;
    margin: 0 12px;
    padding: 24px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-color: var(--c-blue);     /* repli avant chargement vidéo */
  }
  /* La boîte média couvre tout le héros (au lieu de la carte encartée desktop) */
  .hero__media {
    display: block;
    position: absolute;
    inset: 0;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    z-index: 0;
  }
  .hero__media::after { background: rgba(0, 0, 0, 0.32); }  /* scrim renforcé sur mobile */
  .hero__video--desktop { display: none; }
  .hero__video--mobile { display: block; }                 /* mobile = source verticale */
  /* Le texte repasse au-dessus de la vidéo */
  .hero__content { position: relative; z-index: 1; top: auto; left: auto; padding: 0; gap: 10px; }
  .hero__eyebrow { font-size: 18px; line-height: 24px; }
  .hero__title { width: auto; font-size: 40px; line-height: 46px; }
  .hero__desc { position: relative; z-index: 1; left: auto; top: auto; width: auto; margin-top: 16px; font-size: 16px; }
  .hero__cta { position: relative; z-index: 1; right: auto; top: auto; margin-top: 22px; align-self: flex-start; }

  /* ── Sections génériques : statique + padding ────────────────────────── */
  .intro, .trt, .opt, .team, .urg, .cabinet-sec, .promo, .avis {
    position: static;
    height: auto;
    padding: 0 24px;
  }
  .intro > *, .trt > *, .opt > *, .team > *, .urg > *,
  .promo > *, .avis > * { position: static; }

  /* Titres de section : réduction homogène */
  .intro__title, .trt__title, .opt__title, .team__title,
  .urg__title, .promo__title, .avis__title {
    left: auto; top: auto; width: auto;
    font-size: 32px; line-height: 38px;
  }

  /* INTRO */
  .intro__title, .intro__desc, .intro__media, .intro__cards { left: auto; top: auto; width: auto; }
  .intro__desc { margin-top: 16px; }
  .intro__media { width: 100%; height: 240px; margin: 24px 0 0; }
  .intro__cards { margin-top: 24px; grid-template-columns: 1fr; gap: 16px; }
  .icard { height: auto; }

  /* TRAITEMENTS */
  .trt__cta { margin: 16px 0 0; }
  .trt__cards { left: auto; top: auto; width: auto; margin-top: 24px; grid-template-columns: 1fr; gap: 16px; }

  /* ORTHO POUR TOUS */
  .opt__media, .opt__title, .opt__desc, .opt__cta { left: auto; top: auto; width: auto; }
  .opt__media { width: 100%; height: 240px; margin-bottom: 24px; }
  .opt__desc { margin-top: 16px; }
  .opt__cta { margin-top: 22px; display: inline-flex; }

  /* ÉQUIPE : photo puis carte (la carte perd ses dimensions fixes) */
  .team__media { left: auto; top: auto; width: 100%; height: 260px; }
  .team__card { left: auto; top: auto; width: 100%; height: auto; margin-top: 16px; padding: 32px 24px; }
  .team__title, .team__desc, .team__cta { position: static; left: auto; top: auto; width: auto; }
  .team__desc { margin-top: 16px; }
  .team__cta { margin-top: 22px; display: inline-flex; }

  /* URGENCE : texte + liste, puis carte navy */
  .urg__intro, .urg__list { left: auto; top: auto; width: auto; }
  .urg__intro { margin-top: 16px; }
  .urg__list { margin-top: 16px; }
  .urg__card { left: auto; top: auto; width: 100%; height: auto; margin-top: 24px; padding: 28px 24px; }
  .urg__card-text { position: static; left: auto; top: auto; width: auto; }
  .urg__card-cta { position: static; left: auto; top: auto; margin-top: 20px; padding: 0 24px; }

  /* PLATEAU (promo) : titre + texte + CTA, puis photo pleine largeur */
  .promo__desc, .promo__cta { left: auto; top: auto; width: auto; }
  .promo__desc { margin-top: 16px; }
  .promo__cta { margin-top: 22px; display: inline-flex; }
  .promo__media { position: static; left: auto; top: auto; width: 100%; height: 240px; margin-top: 24px; }

  /* PHOTOS CABINET : 3 images empilées */
  .cabinet { position: static; display: flex; flex-direction: column; gap: 12px; }
  /* !important : la 3e tuile a un cadrage inline (background-size/position) qui
     sinon écrase le cover → image coupée sur mobile. */
  .cabinet__img { position: static; left: auto; width: 100% !important; height: 200px;
    background-size: cover !important; background-position: center !important; }

  /* TÉMOIGNAGE : carte avis pleine largeur, 2 photos côte à côte */
  .avis__card { left: auto; top: auto; width: 100%; height: auto; margin-top: 24px; padding: 24px 20px; }
  .avis__stars, .avis__name, .avis__body, .avis__cta { position: static; left: auto; top: auto; width: auto; }
  .avis__name { margin-top: 16px; }
  .avis__body { margin-top: 10px; }
  .avis__cta { margin-top: 20px; display: inline-flex; }
  /* relative (pas static) : sinon le badge Avant/Après absolu s'ancre à un
     ancêtre lointain et flotte hors de la photo. */
  .avis__compare { display: flex; gap: 12px; margin-top: 12px; }
  .avis__photo { position: relative; left: auto; flex: 1 1 0; min-width: 0; height: 240px; }
  .avis__photo--before { background-size: cover; background-position: center; }

  /* AVIS GOOGLE (Proposition 2) : cartes empilées pleine largeur */
  .gavis { padding: 48px 24px 52px; }
  .gavis__grid { grid-template-columns: 1fr; gap: 16px; }
  .gavis__foot { margin-top: 32px; }
  .gavis__btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .hero__title { font-size: 32px; line-height: 38px; }
  .intro__title, .trt__title, .opt__title, .team__title,
  .urg__title, .promo__title, .avis__title { font-size: 28px; line-height: 34px; }
  .avis__photo { height: 200px; }
  .gavis__title { font-size: 26px; }
}