/* =========================================================================
   Mon Appart Facile — design-system et pages. Valeurs lues dans la maquette Figma
   (page de 1270 px de large). La structure en colonnes vient de Bootstrap.

   Tailles de texte du site (une seule échelle) :
     --maf-p  16 px : tous les paragraphes
     --maf-s  14 px : libellés, puces, informations secondaires
     --maf-xs 12 px : notes de bas de page
   ========================================================================= */

:root {
  --maf-jaune: #e5d894;
  --maf-sombre: #383838;
  --maf-gris: #6f6f6f;
  --maf-clair: #f0f0f0;
  --maf-champ: #f7f7f7;
  --maf-bleu: #0073e9;
  --maf-vert: #009300;
  --maf-rouge: #ff0000;
  --maf-serif: "Fraunces", Georgia, serif;
  --maf-sans: "Work Sans", Arial, sans-serif;
  --maf-p: 16px;
  --maf-s: 14px;
  --maf-xs: 12px;
  --maf-ombre: 0 1px 10px rgba(0, 0, 0, .1);
  --maf-ombre-puce: 0 4px 10px rgba(0, 0, 0, .1);
  --maf-ombre-tuile: 0 0 10px rgba(0, 0, 0, .1);
  --maf-ombre-btn: 0 4px 10px rgba(0, 0, 0, .25);
}

/* Pré-masquage des éléments animés : levé par animations.js, ou par le failsafe de head.php */
html.js-anim [data-a],
html.js-anim [data-stagger] > *,
html.js-anim .maf-header__logo,
html.js-anim .maf-nav a,
html.js-anim .maf-accroche,
html.js-anim .maf-hero__cadre,
html.js-anim .maf-chat > *,
html.js-anim [data-pc-etape] > * { visibility: hidden; }

body {
  margin: 0;
  background: var(--maf-sombre);
  color: var(--maf-sombre);
  font-family: var(--maf-sans);
}

img { max-width: 100%; height: auto; }
.maf-mot-mask { padding-bottom: .14em; margin-bottom: -.14em; }

/* ----- Conteneurs ----- */
.maf-c { max-width: 1270px; margin-inline: auto; padding-inline: 90px; }
.maf-c--82 { padding-inline: 82px; }

/* ----- Tuile jaune arrondie ----- */
.maf-tuile { background: var(--maf-jaune); border-bottom-right-radius: 100px; }
.maf-tuile--accueil { padding-bottom: 98px; }
.maf-tuile--haut {
  border-top-left-radius: 100px;
  border-bottom-right-radius: 0;
  padding: 104px 0 150px;
}

/* ----- En-tête ----- */
.maf-header { padding-top: 76px; gap: 16px 40px; }
.maf-header__logo { margin-left: 1px; display: block; line-height: 0; }
.maf-nav { gap: 8px 67px; margin-right: 16px; }
.maf-nav a {
  position: relative;
  font: 700 20px/25px var(--maf-serif);
  color: var(--maf-sombre);
  text-decoration: none;
}
.maf-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.maf-nav a:hover::after, .maf-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ----- Boutons ----- */
.maf-btn {
  --bs-btn-padding-y: 0;
  --bs-btn-border-radius: 20px;
  display: block;
  height: 38px;
  border-radius: 20px;
  font: 700 var(--maf-s)/36px var(--maf-sans);
  box-shadow: var(--maf-ombre-btn);
  transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s;
}
.maf-btn:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .28); }
.maf-btn--plein { background: var(--maf-bleu); border: 1px solid var(--maf-bleu); color: #e9e9e9; }
.maf-btn--plein:hover, .maf-btn--plein:focus-visible { background: #005fc2; border-color: #005fc2; color: #fff; }
.maf-btn--plein:disabled { background: var(--maf-bleu); border-color: var(--maf-bleu); color: #e9e9e9; opacity: .5; }
.maf-btn--contour { background: transparent; border: 1px solid var(--maf-bleu); color: var(--maf-bleu); backdrop-filter: blur(4px); }
.maf-btn--contour:hover, .maf-btn--contour:focus-visible { background: var(--maf-bleu); border-color: var(--maf-bleu); color: #fff; }

/* ----- Bloc « Pass + logo » ----- */
.maf-pass__titre { display: block; margin: 0; font: 700 26px/23px var(--maf-serif); color: var(--maf-sombre); }
.maf-pass__logo { display: block; margin-inline: auto; }

/* ===== ACCUEIL ===== */

/* Héros */
.maf-hero { --bs-gutter-x: 31px; --bs-gutter-y: 24px; margin-top: 34px; }
.maf-accroche {
  position: relative;
  height: 346px;
  margin-top: 2px;
  padding: 38px 55px 0;
  background: var(--maf-clair);
  border-radius: 20px;
  box-shadow: var(--maf-ombre);
}
.maf-accroche h1 { max-width: 430px; margin: 0 0 16px; font: 700 30px/37px var(--maf-serif); color: var(--maf-sombre); }
.maf-accroche__sous { max-width: 424px; margin: 0; font: 700 var(--maf-p)/20px var(--maf-serif); color: var(--maf-gris); }
.maf-hero__cadre {
  height: 350px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: var(--maf-ombre);
}
.maf-hero__parallaxe { display: block; height: 110%; margin-top: -2%; }
.maf-hero__parallaxe img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) {
  .maf-hero > :first-child { width: 50.4%; }
  .maf-hero > :last-child { width: 49.6%; }
}

/* Discussion du héros */
.maf-chat { position: absolute; left: -31px; top: 172px; width: 521px; height: 172px; }
.maf-chat__qui { position: absolute; margin: 0; font: 400 var(--maf-s)/16px var(--maf-sans); color: #868686; }
.maf-chat__qui--agence { left: 86px; top: 9px; }
.maf-chat__qui--conseil { left: 145px; top: 102px; }
.maf-chat__avatar { position: absolute; left: 87px; top: 125px; width: 37px; height: 37px; border-radius: 50%; }
.maf-msg { position: absolute; }
.maf-msg--agence { left: 23px; top: 32px; }
.maf-msg--vous { right: 20px; top: 61px; z-index: 1; }
.maf-msg--conseil { left: 143px; top: 125px; }
.maf-bulle {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0;
  padding: 9px 13px;
  border-radius: 12px;
  font: 400 var(--maf-s)/18px var(--maf-sans);
  white-space: nowrap;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .08));
}
.maf-bulle::after { content: ""; position: absolute; bottom: 0; width: 16px; height: 14px; background: inherit; }
.maf-msg--agence .maf-bulle { background: #e9e9ed; color: #333; }
.maf-msg--vous .maf-bulle { margin-left: auto; background: var(--maf-jaune); color: #000; border-bottom-right-radius: 0; }
.maf-msg--conseil .maf-bulle { background: var(--maf-sombre); color: var(--maf-jaune); }
.maf-msg--agence .maf-bulle, .maf-msg--conseil .maf-bulle { border-bottom-left-radius: 0; }
.maf-msg--agence .maf-bulle::after, .maf-msg--conseil .maf-bulle::after { left: -15px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.maf-msg--vous .maf-bulle::after { right: -15px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.maf-tape {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 13px;
  visibility: hidden;
}
.maf-msg--agence .maf-tape, .maf-msg--conseil .maf-tape { left: 0; }
.maf-msg--vous .maf-tape { right: 0; }
.maf-tape i { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }

/* Nos services + offre */
.maf-services {
  margin-top: 72px;
  background: var(--maf-clair);
  border-radius: 20px;
  box-shadow: var(--maf-ombre);
}
.maf-services__gauche { padding: 54px 0 40px 99px; }
.maf-services__gauche h2 { margin: 0 0 19px; font: 700 20px/25px var(--maf-serif); color: var(--maf-sombre); }
.maf-services__droite { position: relative; padding: 47px 18px 43px 0; }
.maf-services__trait { position: absolute; left: 0; top: 49px; bottom: 48px; width: 1px; background: #000; }
@media (min-width: 992px) {
  .maf-services__gauche { width: 49.03%; }
  .maf-services__droite { width: 50.97%; }
}
.maf-puces { margin: 0; padding: 0; list-style: none; }

/* Picto ou puce + texte : le texte reste à droite, jamais dessous */
.maf-ico-ligne { display: flex; align-items: flex-start; gap: 8px; }
.maf-ico-ligne--puce { gap: 0; }
.maf-ico { flex: none; }

.maf-puce {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 5px 11px;
  background: var(--maf-clair);
  border-radius: 5px;
  box-shadow: var(--maf-ombre-puce);
  font: 400 var(--maf-s)/17px var(--maf-sans);
  color: var(--maf-sombre);
}
.maf-puce:last-child { margin-bottom: 0; }
.maf-puce--ligne { padding-block: 7px; }
.maf-puce--large { padding: 6px 7px; }
.maf-puce sup { font-size: 9px; font-weight: 700; top: -.6em; }
.maf-puce sup a { color: inherit; text-decoration: none; }
.maf-offre { max-width: 281px; margin-inline: auto; }
.maf-offre__prix { margin: 3px 0 17px; font: 400 17px/26px var(--maf-sans); color: var(--maf-sombre); }
.maf-offre__btns { max-width: 241px; margin-inline: auto; }
.maf-offre__btns .maf-btn + .maf-btn { margin-top: 8px; }
.maf-offre__note { margin: 7px 0 0; font: 400 var(--maf-s)/17px var(--maf-sans); color: var(--maf-gris); }

/* Titres de section */
.maf-titre-30 { margin: 81px 0 36px; font: 700 30px/36px var(--maf-serif); color: var(--maf-sombre); }
.maf-titre-24 { margin: 0; font: 700 24px/36px var(--maf-serif); color: var(--maf-sombre); }

/* Personas */
.maf-personas { --bs-gutter-x: 33px; --bs-gutter-y: 36px; max-width: 1101px; }
.maf-persona {
  height: 100%;
  min-height: 208px;
  padding: 27px 32px 26px;
  background: var(--maf-clair);
  border-radius: 30px;
  box-shadow: var(--maf-ombre-tuile);
  font: 400 var(--maf-p)/23px var(--maf-sans);
  color: #000;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s;
}
.maf-persona:hover { transform: translateY(-8px); box-shadow: 0 18px 30px rgba(0, 0, 0, .14); }
.maf-persona h3 { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; font: 700 var(--maf-p)/19px var(--maf-sans); color: #000; }
.maf-persona__ico { flex: none; width: 39px; height: 50px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.maf-persona:hover .maf-persona__ico { transform: scale(1.15) rotate(-8deg); }
.maf-persona p { margin: 0; }

/* Avis */
.maf-avis { padding: 67px 0 114px; overflow: hidden; }
.maf-avis h2 { margin: 0 0 61px; font: 700 24px/30px var(--maf-serif); color: var(--maf-jaune); }
.maf-avis__piste {
  display: flex;
  gap: 25px;
  margin-inline: -70px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  outline-offset: 4px;
}
.maf-avis__piste::-webkit-scrollbar { display: none; }
.maf-avis__piste.is-glisse { cursor: grabbing; user-select: none; }
.maf-avis__carte {
  position: relative;
  flex: 0 0 380px;
  padding: 16px 16px 20px;
  background: #fff;
  border-radius: 10px;
  color: #000;
}
.maf-avis__tete { display: flex; gap: 10px; align-items: center; }
.maf-avis__rond {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #134e82;
  color: #fff;
  font: 700 var(--maf-p)/34px var(--maf-sans);
  text-align: center;
}
.maf-avis__rond--rouge { background: #a91414; }
.maf-avis__nom { margin: 0; font: 700 var(--maf-s)/17px var(--maf-sans); }
.maf-avis__nb { margin: 0; font: 500 var(--maf-s)/17px var(--maf-sans); color: #505251; }
.maf-avis__menu { position: absolute; top: 18px; right: 16px; color: #383838; }
.maf-avis__note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font: 400 var(--maf-s)/17px var(--maf-sans); color: #505251; }
.maf-avis__etoiles { color: #f4b400; font-size: var(--maf-p); line-height: 17px; }
.maf-avis__texte { margin: 12px 0 0; font: 400 var(--maf-s)/19px var(--maf-sans); color: #000; }

/* Comparatif */
.maf-comparatif__titre { margin: 0 0 41px 93px; }
.maf-comparatif { --bs-gutter-x: 54px; --bs-gutter-y: 24px; }
.maf-compare {
  height: 100%;
  min-height: 586px;
  padding: 52px 0 40px 77px;
  background: var(--maf-clair);
  border-radius: 30px;
  box-shadow: var(--maf-ombre-tuile);
}
.maf-compare--facile { padding-left: 66px; }
.maf-compare h3 { margin: 0 0 16px; font: 700 20px/25px var(--maf-serif); color: var(--maf-sombre); }
.maf-compare h3 span { color: var(--maf-vert); }
.maf-compare__sous { margin: 0 0 38px; font: 400 var(--maf-p)/20px var(--maf-sans); color: var(--maf-gris); }
.maf-compare__sous span { font-family: var(--maf-serif); line-height: 1; }
.maf-compare__liste { margin: 0; padding: 0; list-style: none; font: 400 var(--maf-p)/20px var(--maf-sans); color: var(--maf-gris); }
.maf-compare--facile .maf-compare__liste { margin-left: -3px; }
.maf-compare__liste li { display: flex; align-items: center; gap: 13px; min-height: 26px; margin-bottom: 7px; }
.maf-compare__liste img { flex: none; }
/* Rond de 26 px dans une image de 28 px : sans cette marge, il est coupé quand l'écran est zoomé (125 %). */
.maf-compare__smiley { margin: -1px; }
.maf-compare__prix { margin: 25px 0 0 -77px; padding-right: 25px; }
.maf-compare--facile .maf-compare__prix { margin-left: -66px; padding-right: 20px; }
.maf-compare__libelle { margin: 0 0 27px; font: 700 var(--maf-p)/18px var(--maf-sans); color: var(--maf-sombre); }
.maf-compare--facile .maf-compare__libelle { margin-bottom: 5px; }
.maf-compare__frais { margin: 0 0 12px; font: 700 20px/25px var(--maf-serif); color: var(--maf-sombre); }
.maf-compare__montant { margin: 0; font: 400 var(--maf-p)/19px var(--maf-sans); color: var(--maf-gris); }
.maf-compare__ligne { margin: 0 0 0 26px; }
.maf-compare__ligne-a { width: 230px; margin-top: 22px; text-align: center; }
.maf-compare__ligne-plus { width: 25px; margin: 34px 0 0 -15px; font: 400 20px/24px var(--maf-serif); color: var(--maf-sombre); text-align: center; }
.maf-compare__ligne-b { width: 172.6px; margin-left: 27.6px; padding: 19px 0 20px; border: 1px solid var(--maf-gris); border-radius: 16px; text-align: center; }
.maf-compare__ligne-b .maf-pass__titre { font-size: 16px; line-height: 14px; }
.maf-compare__ligne-b p:not(.maf-pass__titre) { margin: 11px 0 10px; font: 400 var(--maf-p)/26px var(--maf-sans); color: var(--maf-gris); }
.maf-compare__ligne-b .maf-btn { width: 97px; margin-inline: auto; }

/* Parcours */
.maf-parcours { margin: 148px 0 0 16px; }
.maf-parcours__tete { position: relative; margin: 67px 0 60px 185px; width: 281px; text-align: center; }
.maf-parcours__fleche { position: absolute; left: -208px; top: 53px; width: 179px; height: 67px; max-width: none; }

.maf-pc { container-type: inline-size; }
@media (min-width: 1270px) { .maf-pc { width: 1141px; } }
.maf-pc__scene { --u: calc(100cqw / 1141); --t: clamp(14px, calc(16 * var(--u)), 16px); position: relative; height: calc(1580 * var(--u)); }
.maf-pc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.maf-pc__trace { fill: none; stroke: var(--maf-sombre); stroke-width: 7; stroke-linecap: round; }
.maf-pc__fleche { fill: var(--maf-sombre); transition: opacity .25s; }
.maf-pc__pointe { fill: var(--maf-jaune); stroke: var(--maf-sombre); stroke-width: 4; opacity: 0; transition: opacity .2s; }
.maf-pc__ligne { display: none; }
.maf-pc__etapes { margin: 0; padding: 0; list-style: none; }
.maf-pc__etape { position: absolute; z-index: 1; }
.maf-pc__puce {
  width: fit-content;
  margin: 0;
  padding: 8px 13px;
  background: var(--maf-sombre);
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  font: 700 clamp(14px, calc(15 * var(--u)), 15px)/1.25 var(--maf-sans);
  color: var(--maf-jaune);
}
.maf-pc__puce sup { font-size: .6em; }
.maf-pc__carte {
  margin: 8px 0 0;
  padding: 10px 13px;
  background: var(--maf-clair);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
  font: 400 var(--t)/1.35 var(--maf-sans);
  color: #000;
}
.maf-pc__carte .maf-marque { font-family: var(--maf-serif); font-weight: 700; }
.maf-pc__carte sup { font-size: .6em; }
.maf-pc__illus { position: absolute; margin: 0; }
.maf-pc__illus img { display: block; width: 100%; height: auto; }

.maf-pc__etape--1 { left: calc(40 * var(--u)); top: 0; width: calc(330 * var(--u)); height: calc(190 * var(--u)); }
.maf-pc__illus--pass { left: 0; top: calc(50 * var(--u)); width: calc(275 * var(--u)); }
.maf-pc__check { position: absolute; left: 86%; top: 70.4%; width: 18.9% !important; }
.maf-pc__etape--2 { left: calc(470 * var(--u)); top: calc(170 * var(--u)); width: calc(450 * var(--u)); height: calc(325 * var(--u)); }
.maf-pc__illus--tablette { left: calc(90 * var(--u)); top: calc(175 * var(--u)); width: calc(151 * var(--u)); }
.maf-pc__etape--3 { left: calc(545 * var(--u)); top: calc(620 * var(--u)); width: calc(596 * var(--u)); height: calc(190 * var(--u)); }
.maf-pc__illus--maisons { left: 0; top: calc(20 * var(--u)); width: calc(270 * var(--u)); }
.maf-pc__textes--3 { position: absolute; left: calc(290 * var(--u)); top: 0; width: calc(306 * var(--u)); }
.maf-pc__etape--4 { left: calc(40 * var(--u)); top: calc(960 * var(--u)); width: calc(470 * var(--u)); height: calc(400 * var(--u)); }
.maf-pc__illus--poignee { left: calc(178 * var(--u)); top: 0; width: calc(288 * var(--u)); }
.maf-pc__puce--4 { position: absolute; left: 0; top: calc(72 * var(--u)); width: calc(270 * var(--u)); z-index: 2; }
.maf-pc__textes--4 { position: absolute; left: calc(2 * var(--u)); top: calc(131 * var(--u)); width: calc(250 * var(--u)); z-index: 2; }
.maf-pc__etape--5 { left: calc(410 * var(--u)); top: calc(1290 * var(--u)); width: calc(300 * var(--u)); height: calc(180 * var(--u)); }
.maf-pc__illus--sablier { left: calc(141 * var(--u)); top: 0; width: calc(99 * var(--u)); }
.maf-pc__puce--5 { position: absolute; left: 0; top: calc(122 * var(--u)); width: calc(240 * var(--u)); }
.maf-pc__etape--6 { left: calc(740 * var(--u)); top: calc(1330 * var(--u)); width: calc(401 * var(--u)); height: calc(230 * var(--u)); }
.maf-pc__illus--cles { left: 0; top: 0; width: calc(216 * var(--u)); z-index: 2; }
.maf-pc__puce--6 { position: absolute; left: calc(151 * var(--u)); top: calc(11 * var(--u)); width: calc(250 * var(--u)); }
.maf-pc__textes--6 { position: absolute; left: calc(151 * var(--u)); top: calc(85 * var(--u)); width: calc(250 * var(--u)); }
.maf-pc__textes--6 .maf-pc__carte { padding-top: 46px; }

/* Qui sommes-nous */
.maf-qui { padding: 124px 0 77px; color: var(--maf-clair); }
.maf-qui__row { --bs-gutter-x: 62px; }
.maf-qui__photo { padding-top: 28px; text-align: center; }
.maf-qui__photo img { display: block; margin-inline: auto; border-radius: 20px; }
.maf-qui__nom { margin: 20px 0 6px; font: 700 24px/30px var(--maf-serif); color: #eae4e1; }
.maf-qui__role { margin: 0; font: 400 20px/25px var(--maf-serif); color: var(--maf-jaune); }
.maf-qui__role strong { font-weight: 700; }
.maf-qui h2 { margin: 0 0 33px -2px; font: 700 24px/30px var(--maf-serif); color: var(--maf-jaune); }
.maf-qui__texte { max-width: 634px; font: 400 var(--maf-p)/24px var(--maf-sans); }
.maf-qui__texte p { margin: 0 0 22px; }
.maf-qui__texte p:last-child { margin-bottom: 0; }
.maf-qui__texte .maf-marque { font-family: var(--maf-serif); font-weight: 700; }
@media (min-width: 992px) { .maf-qui__photo { flex: 0 0 422px; width: 422px; padding-left: 39px; padding-right: 33px; } }

/* Bande Soyez-prêt */
.maf-bande { padding: 69px 0 66px; background: var(--maf-clair); }
.maf-bande__slogan { margin: 12px 0 0; font: 400 30px/36px var(--maf-sans); color: var(--maf-gris); }
.maf-bande__prix { margin: 6px 0 21px; font: 500 20px/26px var(--maf-sans); color: var(--maf-gris); }
.maf-bande__btns { max-width: 200px; margin-inline: auto; }
.maf-bande__btns .maf-btn + .maf-btn { margin-top: 7px; }
.maf-bande__rang { max-width: 1270px; margin-inline: auto; }
@media (min-width: 992px) {
  .maf-bande__rang > :first-child { width: 53.2%; }
  .maf-bande__rang > :last-child { width: 31.2%; }
}

/* Calendly */
.maf-rdv { padding-top: 72px; scroll-margin-top: 16px; }
.maf-rdv h2 { margin: 0 0 27px 4px; font: 700 24px/30px var(--maf-serif); color: var(--maf-jaune); }
.maf-rdv__cadre { max-width: 844px; margin-inline: auto; }
.maf-calendly {
  position: relative;
  overflow: hidden;
  height: 450px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--maf-ombre);
}
.maf-calendly--vivant { height: 700px; }
.maf-calendly img { display: block; width: 100%; height: 100%; object-fit: cover; }
.maf-calendly iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Pied de page */
.maf-footer { padding: 81px 16px 110px; color: var(--maf-jaune); }
.maf-footer--accueil { padding: 72px 16px 38px; }
.maf-footer__logo { display: block; position: relative; left: -10px; margin-inline: auto; }
.maf-footer__liens { margin: 33px 0 0; font: 700 var(--maf-s)/17px var(--maf-sans); }
.maf-footer__liens a { color: inherit; white-space: nowrap; }
.maf-footer__notes { gap: 4px 40px; margin-top: 58px; font: 400 var(--maf-xs)/15px var(--maf-sans); }
.maf-footer__notes p { margin: 0; }

/* ===== MODALE DE COMMANDE ===== */
.modal-backdrop.show { opacity: .72; }
.maf-modale .modal-dialog { max-width: 1000px; }
.maf-modale .modal-content {
  overflow: hidden;
  background: var(--maf-jaune);
  border: 0;
  border-radius: 24px 24px 80px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.maf-modale .modal-header { position: relative; display: block; padding: 24px 40px 8px; border: 0; }
.maf-modale .btn-close { position: absolute; top: 28px; right: 28px; margin: 0; }
.maf-modale__logo { display: block; width: 190px; height: auto; }
.maf-modale .modal-body { padding: 8px 40px 16px; }
.maf-modale .modal-footer {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 76px 24px 40px;
  border: 0;
}
.maf-modale .modal-footer .maf-btn { width: 200px; margin: 0; }
.maf-modale .modal-footer .maf-btn--contour { margin-right: auto; }
.maf-ecran { max-width: 864px; margin-inline: auto; }
.maf-ecran [data-titre-ecran]:focus { outline: 0; }

/* Frise */
.maf-etapes { position: relative; max-width: 860px; margin: 18px auto 12px; padding: 0; }
.maf-etapes::before, .maf-etapes::after {
  content: "";
  position: absolute;
  top: 18.5px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 3px;
  background: var(--maf-clair);
}
.maf-etapes::after {
  background: var(--maf-sombre);
  transform: scaleX(var(--progression, 0));
  transform-origin: left;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.maf-etape { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.maf-etape__num {
  width: 40px;
  height: 40px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--maf-clair);
  font: 700 20px/36px var(--maf-sans);
  color: var(--maf-sombre);
  text-align: center;
  transition: background-color .4s, color .4s, border-color .4s;
}
.maf-etape.is-active .maf-etape__num { border-color: var(--maf-sombre); }
.maf-etape.is-faite .maf-etape__num { background: var(--maf-sombre); color: var(--maf-jaune); }
.maf-etape__nom { margin-top: 5px; font: 700 var(--maf-s)/17px var(--maf-sans); color: var(--maf-sombre); white-space: nowrap; transition: opacity .4s; }

/* Étapes à venir atténuées. Le rond reste opaque (teintes mélangées au fond) : le trait ne se voit pas à travers. */
.maf-etapes::before { opacity: .6; }
.maf-etape:not(.is-active, .is-faite) .maf-etape__num {
  background: color-mix(in srgb, var(--maf-clair) 60%, var(--maf-jaune));
  color: color-mix(in srgb, var(--maf-sombre) 60%, var(--maf-jaune));
}
.maf-etape:not(.is-active, .is-faite) .maf-etape__nom { opacity: .6; }

/* Titres et cartes */
.maf-t2 { margin: 16px 0 16px 4px; font: 700 30px/36px var(--maf-serif); color: var(--maf-sombre); }
.maf-t2--suite { margin-top: 32px; }
.maf-carte { background: var(--maf-clair); border-radius: 20px; box-shadow: var(--maf-ombre); }

/* Mon produit */
.maf-produit { padding-block: 43px 54px; }
.maf-produit .row { min-height: 234px; }
.maf-produit__g { padding: 37px 0 0 61px; }
.maf-produit__d { padding: 20px 20px 0 56px; }
@media (min-width: 768px) {
  .maf-produit__g { width: 378px; }
  .maf-produit__d { width: calc(100% - 378px); border-left: 1px solid #000; }
}
.maf-inclus { margin: 0 0 10px; font: 700 var(--maf-s)/17px var(--maf-sans); color: var(--maf-sombre); }

/* Visuel du Pass + quantités */
.maf-pass-boite {
  width: 244px;
  max-width: 100%;
  height: 113px;
  padding-top: 29px;
  background: var(--maf-sombre);
  border-radius: 6px;
  text-align: center;
}
.maf-pass-boite .maf-pass__titre { font-size: 20px; line-height: 17px; color: var(--maf-jaune); }
.maf-stats { display: flex; gap: 12px; margin-top: 24px; font: 400 var(--maf-s)/18px var(--maf-sans); color: var(--maf-sombre); text-align: center; }
.maf-stats > :first-child { width: 72px; flex: none; }
.maf-stats > :last-child { width: 160px; }
.maf-stats b { font-weight: 700; }

/* Boutons radio de la maquette */
.maf-radio {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--maf-sombre);
  border-radius: 50%;
  background: #d9d9d9;
  cursor: pointer;
}
.maf-radio:checked::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: var(--maf-sombre);
}
.maf-radio:focus-visible, .maf-champ:focus-visible, .maf-case:focus-visible { outline: 2px solid var(--maf-bleu); outline-offset: 2px; }
.maf-choix { display: inline-flex; align-items: flex-start; gap: 8px; font: 400 var(--maf-s)/18px var(--maf-sans); color: var(--maf-sombre); cursor: pointer; }
.maf-choix .maf-radio { margin-top: 1px; }

/* Bloc qui se déplie quand on coche une option */
.maf-pli {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .45s cubic-bezier(.22, .61, .36, 1), opacity .25s, visibility 0s .45s;
}
.maf-pli.is-ouvert {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .45s cubic-bezier(.22, .61, .36, 1), opacity .35s .1s, visibility 0s;
}
.maf-pli__dedans { min-height: 0; overflow: hidden; padding: 4px 6px 8px; margin: -4px -6px -8px; }
@media (prefers-reduced-motion: reduce) { .maf-pli, .maf-pli.is-ouvert { transition: none; } }
.maf-choix--b { font-weight: 700; }

/* Ma situation */
.maf-situation { padding: 38px 38px 32px 35px; }
.maf-lib-b { margin: 0 0 0 7px; font: 700 var(--maf-s)/18px var(--maf-sans); color: var(--maf-sombre); }
.maf-situation__statuts { gap: 8px 33px; margin: 16px 0 29px 7px; }
.maf-garanties { --bs-gutter-x: 17px; --bs-gutter-y: 12px; margin-top: 7px; }
.maf-garantie { height: 100%; padding: 18px 14px; background: #fff; border-radius: 10px; text-align: center; }
.maf-garantie__choix {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  font: 700 var(--maf-s)/16px var(--maf-sans);
  color: var(--maf-sombre);
  text-align: left;
  cursor: pointer;
}
.maf-garantie__champ label { display: block; margin: 14px 0 5px; font: 400 var(--maf-s)/16px var(--maf-sans); color: var(--maf-sombre); text-align: center; }
.maf-garantie__champ .maf-champ { max-width: 168px; margin-inline: auto; }
.maf-garantie__champ--large .maf-champ { max-width: 193px; }
.maf-erreur { margin: 18px 0 -10px 7px; font: 400 var(--maf-s)/16px var(--maf-sans); color: var(--maf-rouge); }

/* Champs de saisie */
.maf-champ {
  display: block;
  width: 100%;
  height: 27px;
  padding: 0 12px;
  border: 1px solid #000;
  border-radius: 15px;
  background: var(--maf-champ);
  box-shadow: var(--maf-ombre);
  font: 400 var(--maf-s)/25px var(--maf-sans);
  color: var(--maf-sombre);
}
.maf-champ.is-erreur, .maf-champ:user-invalid { border-color: #ff0004; }
.maf-lib { display: block; margin: 0 0 5px 4px; font: 700 var(--maf-s)/16px var(--maf-sans); color: var(--maf-sombre); }
.maf-lib--n { font-weight: 400; }
.maf-lib span { font-weight: 400; }

/* Adresse et facturation */
.maf-adresse { padding: 24px 46px 42px 42px; }
.maf-adresse__type { gap: 8px 50px; margin-left: 4px; }
.maf-rang { --bs-gutter-x: 14px; --bs-gutter-y: 0; margin-top: 15px; }
.maf-rang--haut { margin-top: 28px; }
.maf-rang--serre { margin-top: 5px; }
.maf-l193 { width: 207px; }
.maf-l229 { width: 243px; }
.maf-l400 { width: 414px; }
.maf-question { margin: 15px 0 5px 4px; }
.maf-question--adr { margin: 22px 0 5px 4px; }
.maf-question--fact { margin: 25px 0 7px 3px; }
.maf-adresse__oui-non { gap: 8px 21px; margin-left: 4px; }
.maf-adresse__fact { gap: 8px 37px; margin-left: 3px; }
.maf-adresse__seconde .maf-rang:first-child { margin-top: 22px; }

/* Récapitulatif */
.maf-recap { padding: 40px 52px 40px 56px; }
.maf-recap__g { width: 341px; max-width: 100%; }
.maf-recap__d { flex: 1; font: 400 var(--maf-s)/19px var(--maf-sans); color: var(--maf-sombre); }
.maf-recap__d p { margin: 0; }
.maf-recap__noms p + p { margin-top: 10px; }
.maf-recap__petit { display: flex; gap: 8px; margin-top: 10px; min-height: 38px; }
.maf-recap__petit--mail { min-height: 0; margin-top: 3px; }
.maf-recap__petit > :first-child { flex: 0 0 64px; }
.maf-recap__d .maf-recap__prix { display: flex; justify-content: space-between; margin-top: 2px; }
.maf-recap__d .maf-recap__prix--ht { margin-top: 8px; padding-top: 8px; border-top: 1px solid #000; }
.maf-recap__d .maf-recap__total { align-items: center; margin-top: 8px; padding-top: 22px; border-top: 1px solid #000; font-size: 20px; }
.maf-recap__total b:last-child { font-size: 30px; }

/* Paiement */
.maf-mode-carte { padding: 36px 47px 39px 46px; }
.maf-mode-carte__titre { margin: 0 0 15px -3px; font: 700 var(--maf-s)/16px var(--maf-sans); color: var(--maf-sombre); }
.maf-modes { --bs-gutter-x: 16px; --bs-gutter-y: 12px; }
.maf-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 104px;
  padding-top: 16px;
  background: #fff;
  border-radius: 10px;
  font: 700 var(--maf-s)/16px var(--maf-sans);
  color: var(--maf-sombre);
  cursor: pointer;
}
.maf-mode__choix { display: flex; align-items: flex-start; gap: 8px; }
.maf-mode__logo { display: flex; align-items: center; justify-content: center; height: 22px; margin-top: 16px; }
.maf-mode__logo img { max-width: none; }
.maf-payer { margin-top: 20px; padding-left: 4px; }
.maf-payer__cgv { display: flex; gap: 10px; align-items: flex-start; font: 400 var(--maf-s)/18px var(--maf-sans); color: var(--maf-sombre); cursor: pointer; }
.maf-payer__cgv a { color: inherit; }
.maf-case { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--maf-sombre); }

/* Prise de RDV */
.maf-demo { margin: 16px 0 0 4px; font: 400 var(--maf-s)/18px var(--maf-sans); color: var(--maf-sombre); }

/* Confirmation */
.maf-confirm {
  padding: 64px 40px 55px 64px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--maf-ombre);
}
.maf-confirm__visuel { position: relative; width: 275px; max-width: 100%; }
.maf-confirm__check { position: absolute; left: 86%; top: 70.4%; width: 43px; height: 43px; }
.maf-confirm .maf-stats { margin: 30px 0 0 20px; }
.maf-confirm__titre { margin: 0 0 7px; font: 700 24px/36px var(--maf-serif); color: var(--maf-sombre); }
.maf-confirm p { margin: 0; font: 400 24px/36px var(--maf-sans); color: var(--maf-sombre); }
.maf-confirm .maf-stats p { font: inherit; }
.maf-confirm__g { width: 348px; max-width: 100%; }

/* Pages légales */
.maf-legal { max-width: 900px; margin: 59px auto 0; padding: 40px 48px; font: 400 var(--maf-p)/24px var(--maf-sans); }
.maf-legal h1 { margin: 0 0 24px; font: 700 30px/36px var(--maf-serif); }
.maf-legal h2 { margin: 28px 0 8px; font: 700 18px/24px var(--maf-serif); }
.maf-legal p, .maf-legal ul, .maf-legal ol { margin: 0 0 12px; }
.maf-legal a { color: inherit; }
.maf-legal__manque { background: var(--maf-jaune); padding-inline: 4px; }
.maf-tuile--legal { padding-bottom: 137px; }

/* ===== RESPONSIVE (pas de maquette mobile : adaptation à partir de la version 1270 px) ===== */
@media (max-width: 1199.98px) {
  .maf-c, .maf-c--82 { padding-inline: 32px; }
  .maf-services__gauche { padding-left: 32px; padding-right: 16px; }
  .maf-comparatif__titre { margin-left: 0; }
  .maf-compare { padding-left: 32px; padding-right: 12px; }
  .maf-compare--facile { padding-left: 32px; }
  .maf-compare__prix, .maf-compare--facile .maf-compare__prix { margin-left: -32px; padding-right: 0; }
  .maf-compare__ligne { margin-left: 0; justify-content: center; }
  .maf-compare__ligne-a { width: 190px; }
  .maf-parcours { margin-left: 0; }
  .maf-parcours__tete { margin-left: auto; margin-right: auto; }
}
@media (max-width: 991.98px) {
  .maf-tuile { border-bottom-right-radius: 60px; }
  .maf-tuile--haut { border-top-left-radius: 60px; border-bottom-right-radius: 0; }
  .maf-comparatif, .maf-qui__row, .maf-personas { --bs-gutter-x: 24px; }
  .maf-accroche { height: auto; padding: 32px 24px 24px; }
  .maf-hero__cadre { height: auto; aspect-ratio: 3 / 2; }
  .maf-services__gauche { padding: 32px 24px; }
  .maf-services__droite { padding: 32px 24px; border-top: 1px solid #000; }
  .maf-services__trait { display: none; }
  .maf-compare, .maf-compare--facile { min-height: 0; padding: 40px 24px; }
  .maf-compare__prix, .maf-compare--facile .maf-compare__prix { margin-left: 0; }
  .maf-qui { padding-top: 64px; }
  .maf-qui__photo { margin-bottom: 40px; }
  .maf-bande__slogan { margin-bottom: 32px; }
  .maf-confirm { padding: 40px 24px; }
  .maf-confirm__d { margin-top: 32px; }
  .maf-recap__d { flex: 0 0 100%; margin-top: 32px; }
  .maf-recap { padding-inline: 24px; }

  /* Discussion : les bulles se suivent dans le flux */
  .maf-chat { position: relative; left: 0; top: 0; width: 100%; height: auto; margin-top: 18px; }
  .maf-chat__qui, .maf-msg, .maf-chat__avatar { position: relative; left: auto; right: auto; top: auto; }
  .maf-chat__qui--conseil { margin: 12px 0 4px 45px; }
  .maf-chat__qui--agence { margin: 0 0 4px 14px; }
  .maf-msg--agence { margin-left: 14px; }
  .maf-msg--vous { margin: 6px 14px 0 0; width: fit-content; margin-left: auto; }
  .maf-msg--conseil { margin: -37px 0 0 45px; }
  .maf-bulle { white-space: normal; }

  /* Parcours : une étape sous l'autre, ligne verticale derrière */
  .maf-parcours__fleche { display: none !important; }
  .maf-pc__scene { --u: 1px; --t: 16px; height: auto; }
  .maf-pc__svg { display: none; }
  .maf-pc__ligne { display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2.5px; background: var(--maf-sombre); border-radius: 3px; }
  .maf-pc__etape { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; margin-bottom: 64px; }
  .maf-pc__etape:last-child { margin-bottom: 0; }
  .maf-pc__illus, .maf-pc__puce--4, .maf-pc__puce--5, .maf-pc__puce--6, .maf-pc__textes--3, .maf-pc__textes--4, .maf-pc__textes--6 { position: relative; left: auto !important; top: auto !important; width: auto !important; }
  .maf-pc__illus { margin-block: 12px; }
  .maf-pc__illus--pass { max-width: 275px; }
  .maf-pc__illus--tablette { max-width: 170px; margin-inline: auto; }
  .maf-pc__illus--maisons { max-width: 300px; margin-inline: auto; }
  .maf-pc__illus--sablier { max-width: 100px; margin-inline: auto; }
  .maf-pc__illus--cles { max-width: 240px; margin-inline: auto; }
  .maf-pc__puce--5 { margin-inline: auto; }
  .maf-pc__textes--6 .maf-pc__carte { padding-top: 10px; }

  /* L'illustration 4 reste recouverte à gauche par ses textes, comme sur la maquette */
  .maf-pc__illus--poignee { width: 72% !important; margin: 0 0 0 auto; }
  .maf-pc__puce--4 { width: 190px !important; margin-top: calc(-1 * (72cqw * .889 * .74)); }
  .maf-pc__textes--4 { width: 190px !important; }

  .maf-modale .modal-dialog { max-width: none; margin: 0; }
  .maf-modale .modal-content { min-height: 100dvh; border-radius: 0; }
  .maf-modale .modal-header { padding: 16px 20px 4px; }
  .maf-modale .btn-close { top: 18px; right: 18px; }
  .maf-modale .modal-body { padding: 8px 16px 16px; }
  .maf-modale .modal-footer { padding: 12px 16px 16px; }
  .maf-modale .modal-footer .maf-btn { width: auto; flex: 1; }
  .maf-modale .modal-footer .maf-btn--contour { margin-right: 0; }
}
@media (max-width: 767.98px) {
  .maf-etapes { margin-top: 12px; }
  .maf-etapes::before, .maf-etapes::after { top: 13.5px; }
  .maf-etape__num { width: 30px; height: 30px; font-size: 15px; line-height: 26px; }
  .maf-etape__nom { font-size: 11px; line-height: 14px; white-space: normal; text-align: center; }
  .maf-produit { padding-block: 24px; }
  .maf-produit .row { min-height: 0; }
  .maf-produit__g { padding: 0 24px; }
  .maf-produit__d { padding: 32px 24px 0; }
  .maf-situation, .maf-adresse, .maf-mode-carte { padding-inline: 20px; }
  .maf-garantie { height: auto; }
  .maf-garantie__champ .maf-champ { max-width: 240px; }
  .maf-l193, .maf-l229, .maf-l400 { width: 100%; }
  .maf-rang > * + * { margin-top: 15px; }
  .maf-mode { height: auto; padding-block: 12px 14px; }
  .maf-t2 { margin-left: 0; font-size: 24px; line-height: 30px; }
  .maf-legal { padding: 24px 20px; }
}
@media (max-width: 575.98px) {
  .maf-c, .maf-c--82 { padding-inline: 16px; }
  /* Frise : seul l'intitulé de l'étape en cours tient sur un téléphone */
  .maf-etape__nom { display: none; font-size: 12px; line-height: 15px; white-space: nowrap; }
  .maf-etape.is-active .maf-etape__nom { display: block; }
  .maf-header { justify-content: center !important; padding-top: 32px; }
  .maf-nav { justify-content: center; gap: 8px 24px; margin-right: 0; }
  .maf-nav a { font-size: 16px; line-height: 20px; }
  .maf-accroche h1 { font-size: 26px; line-height: 32px; }
  .maf-titre-30 { font-size: 24px; line-height: 30px; margin-top: 56px; }
  .maf-titre-24 { line-height: 30px; }
  .maf-avis__carte { flex-basis: 300px; }
  .maf-compare__ligne { flex-wrap: wrap; }
  .maf-compare__ligne-a, .maf-compare__ligne-plus { width: 100%; margin: 0 0 12px; }
  .maf-compare__ligne-b { margin: 0 auto; }
  .maf-confirm__check { left: 80%; }
}