/* ============================================================
   DESSIGNE — page « Amélioration d'image »
   ------------------------------------------------------------
   La maquette stylait cette page presque entièrement en ligne et
   pilotait son responsive par sélecteurs d'attribut ([style*="..."]),
   fragiles dès que l'espacement d'un style change. On repose de
   vraies classes, mêmes valeurs.

   Préfixe « ia- » = image améliorée. Chargée après services.css,
   dont cette page réutilise les boutons (.svc-btn).
   ============================================================ */

/* Deux surfaces de la maquette absentes de la palette globale.
   Déclarées ici plutôt que dans tokens.css : elles n'existent que
   sur cette page. À remonter dans :root si d'autres pages les reprennent. */
.ia-offres { --ia-sable: #EDE7DA; }
.ia-cta    { --ia-noir-burg: #3A1F1B; }

/* ---------- 1 · HERO ---------- */
.ia-hero {
  position: relative;
  height: 60vh;
  min-height: 480px;
  overflow: hidden;
}
.ia-hero__media { position: absolute; inset: 0; }
.ia-hero__media img,
.ia-hero__media .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.ia-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20, 18, 16, .88) 0%,
    rgba(20, 18, 16, .20) 60%,
    rgba(20, 18, 16, .05) 100%);
  pointer-events: none;
}
.ia-hero__inner { position: absolute; bottom: 56px; left: 80px; right: 80px; }
.ia-hero__title {
  font-family: var(--serif);
  /* Capitales posées en CSS et non dans le gabarit : le titre reste en bas de
     casse dans le code, donc correct pour les lecteurs d'écran et les moteurs. */
  text-transform: uppercase;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.ia-hero__monogram {
  position: absolute;
  bottom: 40px;
  right: 56px;
  z-index: 1;
  width: 90px;
  height: auto;
  display: block;
}

/* ---------- 2 · BANDEAU BORDEAUX ---------- */
.ia-band { background: var(--burg); padding: clamp(40px, 5vw, 60px) clamp(24px, 6vw, 80px); }
.ia-band__text {
  font-family: var(--serif);
  font-size: clamp(24px, 3.1vw, 42px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.ia-band__br-mobile { display: none; }

/* ---------- 3 · BLOCS THÉMATIQUES ---------- */
.ia-bloc { padding: 80px 80px 96px; }
.ia-bloc--paper { background: var(--paper); }
.ia-bloc--p2    { background: var(--p2); }
.ia-bloc__head  { margin-bottom: 52px; }
.ia-bloc__head--large { margin-bottom: 64px; }
.ia-bloc__title {
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.ia-bloc__lede {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 300;
  color: rgba(38, 36, 33, .45);
  line-height: 1.72;
  text-align: justify;
}
.ia-bloc__rule { width: 48px; height: 1px; background: var(--gold); opacity: .5; margin: 18px 0 0; }

/* ---------- 4 · COMPARATEUR AVANT / APRÈS ---------- */
.ia-ba {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  cursor: ew-resize;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: var(--p2);
  /* pan-y : le defilement vertical de la page reste au navigateur, et le
     geste horizontal arrive au script sans delai d'arbitrage. Avec
     touch-action:none, la photo avalait le swipe sur toute sa hauteur et
     la page ne defilait plus sous le doigt en mobile. Le script ne prend
     la main que dans une bande de 150 px centree sur la poignee. */
  touch-action: pan-y;
}
.ia-ba__pane { position: absolute; inset: 0; }
/* Le fond porte l'état final (après, meublé, rendu) ; ce volet porte l'état
   initial et se révèle sur la gauche par clip-path, piloté au pointeur
   (dessigne.js). La lecture va de l'avant à gauche vers l'après à droite. */
.ia-ba__pane--volet { clip-path: inset(0 50% 0 0); }
.ia-ba__pane img,
.ia-ba__pane .img-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }

.ia-ba__tag {
  position: absolute;
  top: 14px;
  border-radius: 3px;
  padding: 5px 14px;
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  pointer-events: none;
}
.ia-ba__tag--avant {
  left: 16px;
  background: rgba(20, 18, 16, .72);
  backdrop-filter: blur(8px);
  color: rgba(230, 223, 209, .65);
}
.ia-ba__tag--apres { right: 16px; background: var(--gold); color: #141210; }

.ia-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, .9);
  transform: translateX(-1px);
  cursor: ew-resize;
  z-index: 10;
}
.ia-ba__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: -3px;
  pointer-events: none;
}
.ia-ba--principal .ia-ba__knob { width: 50px; height: 50px; }

/* ---------- 5 · GRILLES DE CHAQUE BLOC ---------- */
.ia-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ia-col  { display: flex; flex-direction: column; }

/* Retouche : un grand comparateur à gauche, deux empilés à droite */
.ia-grid--retouche { gap: 20px; align-items: stretch; }
.ia-grid--retouche .ia-col--droite { gap: 20px; }
.ia-grid--retouche .ia-ba--principal  { flex: 1; min-height: 700px; }
.ia-grid--retouche .ia-ba--secondaire { flex: 1; min-height: 340px; }

/* Meublé : deux comparateurs empilés à gauche, un grand à droite */
.ia-grid--meuble { gap: 20px; align-items: stretch; }
.ia-grid--meuble .ia-col--gauche { gap: 20px; }
.ia-grid--meuble .ia-ba--secondaire { height: 420px; }
.ia-grid--meuble .ia-ba--principal  { flex: 1; }

/* Home staging : un très grand à gauche, deux à droite */
.ia-grid--hs { gap: 32px; align-items: start; margin-bottom: 32px; }
.ia-grid--hs .ia-col--droite { gap: 32px; }
.ia-grid--hs .ia-ba--principal  { height: 712px; }
.ia-grid--hs .ia-ba--secondaire { height: 340px; }

/* Rendu 3D : comparateur + texte, puis deux comparateurs */
.ia-grid--3d-intro { gap: 64px; align-items: center; margin-bottom: 80px; }
.ia-grid--3d-intro .ia-ba--principal { height: 460px; }
.ia-grid--3d-duo { gap: 20px; }
.ia-grid--3d-duo .ia-ba--secondaire { height: 420px; }
.ia-3d__texte {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 300;
  color: rgba(38, 36, 33, .6);
  line-height: 1.78;
  text-align: justify;
}

/* ---------- 6 · MOTION DESIGN ET VIDÉO DE SECTEUR ---------- */
.ia-motion {
  --ia-nuit:      #1B1815; /* fond de la section */
  --ia-nuit-fond: #0E0C0B; /* fond du cadre vidéo */
  --ia-carte:     #241E1A; /* fond des trois cartes */
  background: var(--ia-nuit);
  padding: 60px 0 60px;
}
/* Dégagements égaux au-dessus et au-dessous : le titre est centré dans la
   bande sombre qui précède la vidéo. */
.ia-motion__head { text-align: center; margin-bottom: 60px; padding: 0 24px; }
.ia-motion__punch {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 900px;
  margin: 0 auto;
}
/* Seuls les deux mots « Motion design » passent en capitales, pas la phrase. */
.ia-motion__punch-label { text-transform: uppercase; }

/* Façade YouTube : l'iframe n'est injectée qu'au premier clic (dessigne.js,
   initVideoFacade), donc aucun cookie Google au chargement de la page et
   la page ne paie pas le poids du lecteur. Même composant que la page
   Vidéo narrative, dupliqué ici parce que les deux feuilles ne sont jamais
   chargées ensemble. */
.ia-video-wrap { background: var(--ia-nuit-fond); }
.ia-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ia-nuit-fond);
  overflow: hidden;
  cursor: pointer;
}
.ia-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ia-video__scrim { position: absolute; inset: 0; background: rgba(14, 12, 11, .38); transition: background .35s ease; }
.ia-video:hover .ia-video__scrim,
.ia-video:focus-visible .ia-video__scrim { background: rgba(14, 12, 11, .20); }

/* les quatre équerres dorées */
.ia-video__corner { position: absolute; width: 44px; height: 44px; pointer-events: none; }
.ia-video__corner--tl { top: 32px; left: 40px;  border-top: 1px solid rgba(164,128,84,.30); border-left: 1px solid rgba(164,128,84,.30); }
.ia-video__corner--tr { top: 32px; right: 40px; border-top: 1px solid rgba(164,128,84,.30); border-right: 1px solid rgba(164,128,84,.30); }
.ia-video__corner--bl { bottom: 32px; left: 40px;  border-bottom: 1px solid rgba(164,128,84,.30); border-left: 1px solid rgba(164,128,84,.30); }
.ia-video__corner--br { bottom: 32px; right: 40px; border-bottom: 1px solid rgba(164,128,84,.30); border-right: 1px solid rgba(164,128,84,.30); }

.ia-video__inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ia-video__play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(230, 223, 209, .55);
  background: rgba(20, 18, 16, .38);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .35s ease, border-color .35s ease;
}
.ia-video:hover .ia-video__play,
.ia-video:focus-visible .ia-video__play {
  transform: scale(1.08);
  background: rgba(114, 20, 12, .82);
  border-color: rgba(230, 223, 209, .85);
}
.ia-video__play svg { margin-left: 4px; }
.ia-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ia-video.is-playing { cursor: default; }

.ia-motion__grid {
  max-width: 1200px;
  margin: 48px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ia-motion__texte { text-align: right; }
.ia-motion__title {
  font-family: var(--serif);
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1;
  margin: 0 0 24px;
}
.ia-motion__lede {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  color: rgba(230, 223, 209, .7);
  line-height: 1.75;
  margin: 0;
}
.ia-motion__cartes { display: flex; flex-direction: column; gap: 20px; }
/* La maquette figeait ces cartes au pixel (430x130) : entre 860 et 1100 px
   de large elles debordaient de leur colonne. Elles suivent desormais la
   colonne, une hauteur minimale commune garde l'alignement du desktop. */
.ia-motion__carte {
  background: var(--ia-carte);
  border: 1px solid rgba(164, 128, 84, .25);
  border-radius: 10px;
  padding: clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 32px);
  min-height: 130px;
  transition: transform .24s cubic-bezier(.4, 0, .2, 1), box-shadow .24s cubic-bezier(.4, 0, .2, 1);
}
.ia-motion__carte:hover {
  transform: translateY(-6px);
  /* ombre plus dense que celle de la maquette : sur fond nuit, un noir a
     14 % ne se voyait pas */
  box-shadow: 0 16px 32px rgba(0, 0, 0, .38);
}
.ia-motion__carte-titre {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 10px;
}
.ia-motion__carte-texte {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: rgba(230, 223, 209, .7);
  line-height: 1.62;
  margin: 0;
}

/* ---------- 7 · ARGUMENTS DE VENTE ---------- */
.ia-args { background: var(--paper); padding: 50px; }
.ia-args__head { max-width: 760px; margin: 0 auto 56px; }
.ia-args__title {
  font-family: var(--serif);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
}
.ia-args__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.ia-arg {
  background: var(--p2);
  border-radius: 10px;
  padding: 36px;
  display: flex;
  gap: 20px;
  /* meme elevation au survol que les vignettes du tableau "Nos offres"
     juste en dessous (.ia-plan) et que .mission-card / .timeline__step
     ailleurs sur le site */
  box-shadow: 0 2px 8px rgba(38, 36, 33, .09), 0 1px 3px rgba(38, 36, 33, .06);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s cubic-bezier(.16, 1, .3, 1);
}
.ia-arg:hover {
  transform: translateY(-7px);
  box-shadow: 0 16px 40px rgba(38, 36, 33, .14), 0 4px 12px rgba(38, 36, 33, .09);
}
.ia-arg__check {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--burg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.ia-arg__title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1.4;
}
.ia-arg__text {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: rgba(38, 36, 33, .6);
  line-height: 1.65;
  margin: 0;
}

/* ---------- 8 · NOS OFFRES ---------- */
.ia-offres { background: var(--ia-sable); padding: 40px; }
.ia-offres__head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.ia-offres__title {
  font-family: var(--serif);
  font-size: 60px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.ia-offres__note {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--burg);
  margin: 16px 0 -20px;
}

/* Tableau comparatif : trois cartes de fond posées sous les cellules */
.ia-offres__grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 160px 1fr 1fr 1fr 160px;
  grid-template-rows: 68px 108px 88px 108px 84px;
  column-gap: 20px;
  row-gap: 0;
}
.ia-plan {
  grid-row: 1 / 6;
  border-radius: 12px;
  height: 456px;
  /* Largeur du dessin (214/218px) posee en max-width plutot qu'en width :
     entre 861 et ~1040px de conteneur, les pistes 1fr deviennent plus
     etroites que ce chiffre et une largeur fixe faisait deborder la carte
     hors de la grille (jusqu'a sortir de la page). En pleine largeur, le
     plafond est atteint et le rendu ne change pas. */
  width: 100%;
  justify-self: center;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.ia-plan--clair {
  background: var(--paper);
  border: 1px solid rgba(164, 128, 84, .25);
  box-shadow: 0 8px 24px rgba(38, 36, 33, .08);
  max-width: 214px;
}
.ia-plan--vedette {
  background: var(--burg);
  border: 1px solid rgba(164, 128, 84, .4);
  box-shadow: 0 16px 36px rgba(38, 36, 33, .18);
  max-width: 218px;
}
.ia-cell {
  padding: 24px 20px;
  text-align: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  border-bottom: 1px solid rgba(164, 128, 84, .2);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  /* Les cellules sont des enfants de grille : sans ceci, un item de
     grille ne peut pas retrecir sous la largeur de son contenu (regle
     min-width:auto par defaut), ce qui pousse le texte hors de sa
     colonne des que la piste se resserre. */
  min-width: 0;
  overflow-wrap: break-word;
}
.ia-cell--head {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ia-cell--dernier { border-bottom: none; }
.ia-cell__sub {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  color: rgba(38, 36, 33, .5);
  margin-top: 4px;
  line-height: 1.35;
}
/* colonne mise en avant : texte crème sur bordeaux */
.ia-cell--vedette { color: var(--cream); font-weight: 500; border-bottom-color: rgba(230, 223, 209, .15); }
.ia-cell--vedette.ia-cell--head { border-bottom-color: rgba(230, 223, 209, .2); }
.ia-cell--vedette .ia-cell__sub { color: rgba(230, 223, 209, .65); }

.ia-offres__mobile { display: none; }
.ia-oc__viewport { position: relative; overflow: hidden; padding: 24px 0 12px; touch-action: pan-y; }
.ia-oc__track {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.oc-card {
  flex: none;
  width: 210px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}
.oc-card--clair {
  background: var(--paper);
  border: 1px solid rgba(164, 128, 84, .25);
  box-shadow: 0 8px 24px rgba(38, 36, 33, .08);
}
.oc-card--vedette {
  background: var(--burg);
  border: 1px solid rgba(164, 128, 84, .4);
  box-shadow: 0 16px 36px rgba(38, 36, 33, .18);
}
.oc-card .ia-cell { padding: 22px 18px; }
.oc-card .ia-cell__sub { line-height: 1.4; }
.ia-oc__nav { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 20px; }
.ia-oc__dots { display: flex; gap: 8px; }
.ia-oc__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(38, 36, 33, .25);
  transition: background .25s;
  cursor: pointer;
}
.ia-oc__dot.is-active { background: var(--rouge); }

/* ---------- 9 · FAQ ---------- */
.ia-faq { background: var(--p2); padding: 60px 80px; }
.ia-faq__head { max-width: 720px; margin: 0 0 48px 80px; }
.ia-faq__title {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ia-faq__list { max-width: 840px; display: flex; flex-direction: column; margin-left: 80px; }
.ia-faq__item { border-bottom: 1px solid rgba(38, 36, 33, .12); padding: 24px 0; }
.ia-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 20px;
  list-style: none;
}
.ia-faq__item summary::-webkit-details-marker { display: none; }
.ia-faq__q { font-family: var(--sans); font-size: 18px; font-weight: 500; color: var(--ink); }
.ia-faq__a {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: rgba(38, 36, 33, .55);
  line-height: 1.65;
  margin: 16px 0 0;
  max-width: 680px;
}
/* le « + » pivote en « × » à l'ouverture */
.ia-faq__icon { flex: none; width: 20px; height: 20px; position: relative; transition: transform .25s; }
.ia-faq__icon::before,
.ia-faq__icon::after { content: ''; position: absolute; background: var(--burg); }
.ia-faq__icon::before { top: 9px; left: 0; width: 20px; height: 1.5px; }
.ia-faq__icon::after  { top: 0; left: 9px; width: 1.5px; height: 20px; }
.ia-faq__item[open] .ia-faq__icon { transform: rotate(45deg); }

/* ---------- 10 · CTA CROISÉE ---------- */
.ia-cta { background: var(--ia-noir-burg); padding: 50px 80px; text-align: center; }
.ia-cta__title {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.15;
  padding-bottom: 20px;
  margin: 0;
}
.ia-cta__actions { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.ia-cta__actions .svc-btn { font-size: 12px; padding: 18px 36px; letter-spacing: .22em; font-weight: 500; }

/* CTA intermédiaire, sous le tableau des offres */
.ia-cta-mid { text-align: center; margin-top: 48px; }

/* ---------- 11 · MOBILE ---------- */
@media (max-width: 860px) {

  .ia-hero { height: 380px; min-height: 0; }
  .ia-hero__inner { left: 22px; right: 22px; bottom: 52px; }
  .ia-hero__title { font-size: 34px; }
  .ia-hero__monogram { display: none; }

  .ia-band { padding: 40px 24px; }
  /* Texte de bandeau : +3px, comme .vn-punch__text sur la page video. */
  .ia-band__text { font-size: 28px; }
  .ia-band__br-mobile { display: inline; }

  .ia-bloc { padding: 56px 22px 64px; }
  .ia-bloc__head,
  .ia-bloc__head--large { margin-bottom: 28px; }
  .ia-bloc__lede { font-size: 14px; line-height: 1.6; }
  .ia-3d__texte { font-size: 14px; line-height: 1.6; }

  /* toutes les grilles passent en colonne */
  .ia-grid { grid-template-columns: 1fr; gap: 16px; }
  .ia-grid--hs { margin-bottom: 16px; }
  .ia-grid--3d-intro { margin-bottom: 16px; gap: 20px; }
  .ia-grid--retouche .ia-col--droite,
  .ia-grid--meuble .ia-col--gauche,
  .ia-grid--hs .ia-col--droite { gap: 16px; }

  /* hauteurs desktop trop grandes une fois en pleine largeur */
  .ia-grid--retouche .ia-ba--principal  { min-height: 300px; }
  .ia-grid--retouche .ia-ba--secondaire { min-height: 220px; }
  .ia-grid--meuble .ia-ba--secondaire,
  .ia-grid--3d-duo .ia-ba--secondaire { height: 260px; }
  .ia-grid--meuble .ia-ba--principal   { flex: none; height: 260px; }
  .ia-grid--hs .ia-ba--principal       { height: 300px; }
  .ia-grid--hs .ia-ba--secondaire      { height: 220px; }
  .ia-grid--3d-intro .ia-ba--principal { height: 260px; }
  .ia-ba--principal .ia-ba__knob { width: 42px; height: 42px; }

  /* sur mobile le texte du bloc 3D passe avant la première image */
  .ia-grid--3d-intro > *:first-child { order: 2; }
  .ia-grid--3d-intro > *:last-child  { order: 1; }

  .ia-motion { padding: 56px 0 48px; }
  .ia-motion__head { margin-bottom: 28px; padding: 0 22px; }
  .ia-motion__punch { font-size: 26px; }
  .ia-motion__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; padding: 0 22px; }
  .ia-motion__texte { text-align: left; }
  .ia-motion__title { font-size: 32px; margin-bottom: 16px; }
  .ia-motion__lede { font-size: 14px; line-height: 1.6; }
  .ia-motion__carte { min-height: 0; padding: 18px 20px; }
  .ia-motion__carte-titre { font-size: 14px; margin-bottom: 6px; }
  .ia-motion__carte-texte { font-size: 13px; line-height: 1.55; }

  .ia-video__corner { width: 28px; height: 28px; top: 18px; bottom: 18px; }
  .ia-video__corner--tl, .ia-video__corner--tr { bottom: auto; }
  .ia-video__corner--bl, .ia-video__corner--br { top: auto; }
  .ia-video__corner--tl, .ia-video__corner--bl { left: 18px; }
  .ia-video__corner--tr, .ia-video__corner--br { right: 18px; }
  .ia-video__play { width: 62px; height: 62px; }
  .ia-video__play svg { width: 20px; height: 22px; }

  /* Marges laterales elargies : les vignettes d'offres respirent, et
     les deux pages service partagent desormais la meme valeur. */
  .ia-args { padding: 56px 32px; }
  .ia-args__head { margin-bottom: 28px; }
  .ia-args__grid { grid-template-columns: 1fr; gap: 14px; }
  .ia-arg { padding: 16px; gap: 12px; box-shadow: none; }
  .ia-arg__check { width: 20px; height: 20px; }
  .ia-arg__check svg { width: 11px; height: 11px; }
  .ia-arg__title { font-size: 12px; margin-bottom: 5px; }
  .ia-arg__text { font-size: 12px; line-height: 1.5; }

  .ia-offres { padding: 48px 22px; }
  .ia-offres__title { font-size: 36px; }
  .ia-offres__note { font-size: 14px; }
  .ia-offres__head { margin-bottom: 24px; }
  /* le tableau desktop cède la place au carrousel tactile */
  .ia-offres__grid { display: none; }
  .ia-offres__mobile { display: block; }

  .ia-faq { padding: 48px 22px; }
  .ia-faq__head { margin-left: 0; }
  .ia-faq__title { font-size: 36px; }
  .ia-faq__list { margin-left: 0; }
  /* la croix passe à gauche de la question, pas en dessous */
  .ia-faq__item summary { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
  .ia-faq__icon { order: -1; }
  .ia-faq__q { font-size: 14px; }
  .ia-faq__a { font-size: 14px; }

  .ia-cta { padding: 40px 22px; }
  .ia-cta__title { font-size: 28px; padding-bottom: 26px; }
  .ia-cta__actions { gap: 12px; }
  .ia-cta__actions .svc-btn { padding: 14px 22px; font-size: 11px; letter-spacing: .16em; }
}