/* AM — page « Contrat d'entretien » (/contrat-entretien/).
   Ne contient QUE le spécifique de cette page : tout le reste (mhero, sec, split,
   sec-head, step, faq, cta-split, am-btn) vient de am-presentation.css, chargée
   avant celle-ci. Règle d'or MASTER : on copie l'étalon, on ne ré-implémente pas. */
.am-contrat{--am-hero-img:url('https://www.arts-menagers.ch/wp-content/uploads/2026/06/HEROX021-ht.webp')}
.am-contrat .mhero{--am-hero-img:url('https://www.arts-menagers.ch/wp-content/uploads/2026/06/HEROX021-ht.webp')}

/* ════ CORRECTIFS MASTER, scopés .am-contrat ════════════════════════════════
   1) §11 dernier point : sur une page CLONE d'am-presentation, .mhero__row est
      calé à max-width:1180px/width:90% → le hero démarre à x≈123 au lieu de
      x=53 comme l'étalon /modeles-remplacement/. On le recale sur --wide-max.
      ⚠ UNIQUEMENT en DESKTOP : non scopé, l'override casse le gutter mobile.
   2) §10.9 : .am-pres .sec-head porte max-width:720px. Pour la FAQ, le lead
      DOIT s'étaler sur tout le 1320 (décision Umberto 12.07.2026). */
@media (min-width:900px){
  .am-contrat .mhero__row{ max-width:var(--wide-max); width:auto; padding-left:var(--gutter); padding-right:var(--gutter) }
  /* « L'entretien de vos appareils, » doit tenir sur UNE ligne (Umberto, 02.08.2026).
     .am-pres .mhero__col est bridé à 600px : à 54px cette ligne de 29 signes n'y entre
     pas. On élargit la colonne et on descend d'un cran en taille — la coupure se fait
     alors exactement au <br> voulu, sans text-wrap:balance qui rééquilibrerait tout seul.
     DESKTOP uniquement : en mobile on laisse les styles de base opérer. */
  .am-contrat .mhero__col{ flex:0 0 auto; width:min(860px,100%); max-width:860px }
  .am-contrat .mh-title{ font-size:50px; text-wrap:normal }
  .am-contrat .mh-sub{ max-width:560px }
}
/* Le bloc .split du site est en align-items:center : sur une intro TEXTE/TEXTE,
   la colonne gauche (plus courte) se retrouvait centrée verticalement et son titre
   flottait sous la première ligne de droite. On aligne les deux colonnes en HAUT
   (Umberto, 02.08.2026). Scopé : le zig-zag texte/image du site garde son centrage. */
.am-contrat .split--haut{ align-items:start }

.am-contrat .sec-head--full{ max-width:none }
/* .am-pres .sec-head est bridé à 720px : « Trois formules, dont une pensée pour les
   gérances » (48 signes à 31px) n'y tient pas sur une ligne. On élargit juste ce
   bloc-là ; text-wrap:balance ne coupe plus dès que la ligne entre. */
.am-contrat .sec-head--large{ max-width:900px }
/* §10.9 : c'est .c-lead qui portait la contrainte (max-width:60ch), pas .sec-head.
   Le lead de la FAQ doit s'étaler sur tout le 1320. */
.am-contrat .sec-head--full .c-lead{ max-width:none }

/* §10.8 / §11 : pas de mot orphelin en fin de titre. L'étalon équilibre ses titres ;
   les pages clonées d'am-presentation ne le font pas par défaut. */
.am-contrat .c-h2{ text-wrap:balance }

/* ── Formules : 3 cartes. Construites sur les tokens existants (--ink, --hairline,
   --radius, --anthracite, --faint), aucune couleur hors charte. ──────────── */
.am-contrat .formules{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch }
.am-contrat .formule{ position:relative; display:flex; flex-direction:column;
  border:1px solid var(--hairline); border-radius:16px; padding:34px 30px 30px; background:#fff;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.am-contrat .formule:hover{ transform:translateY(-3px); border-color:#d8d8d6;
  box-shadow:0 10px 30px rgba(14,15,17,.07) }

/* carte recommandée : anthracite, elle porte le regard sans crier */
.am-contrat .formule--reco{ background:var(--anthracite); border-color:var(--anthracite); color:#fff }
.am-contrat .formule--reco:hover{ box-shadow:0 14px 38px rgba(14,15,17,.28); border-color:var(--anthracite) }
.am-contrat .formule__badge{ position:absolute; top:-11px; left:30px; display:inline-flex; align-items:center;
  height:22px; padding:0 12px; border-radius:11px; background:#fff; color:var(--ink);
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase }

.am-contrat .formule__nom{ font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:0 0 5px }
.am-contrat .formule--reco .formule__nom{ color:#fff }
.am-contrat .formule__accroche{ font-size:14px; color:var(--muted); margin:0 0 24px; line-height:1.45 }
.am-contrat .formule--reco .formule__accroche{ color:#b9bec4 }

/* hauteur fixe : « Sur devis » est plus court que « 439 », sans ça les trois
   listes ne démarraient pas à la même hauteur et les séparateurs se décalaient. */
.am-contrat .formule__prix-l{ display:flex; align-items:baseline; gap:8px; margin:0 0 4px; min-height:48px }
.am-contrat .formule__prix{ font-size:46px; font-weight:800; letter-spacing:-.035em; line-height:1; color:var(--ink) }
.am-contrat .formule--reco .formule__prix{ color:#fff }
.am-contrat .formule__prix--txt{ font-size:28px }
.am-contrat .formule__unite{ font-size:14px; font-weight:500; color:var(--muted) }
.am-contrat .formule--reco .formule__unite{ color:#b9bec4 }
.am-contrat .formule__note{ font-size:12.5px; color:var(--faint); margin:0 0 24px; line-height:1.5 }
.am-contrat .formule--reco .formule__note{ color:#9aa1a8 }

.am-contrat .formule__sep{ height:1px; background:var(--hairline); margin:0 0 22px }
.am-contrat .formule--reco .formule__sep{ background:rgba(255,255,255,.14) }

.am-contrat .formule__list{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1 }
.am-contrat .formule__list li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--ink-body) }
.am-contrat .formule--reco .formule__list li{ color:#e4e7ea }
.am-contrat .formule__list svg{ width:16px; height:16px; flex:none; margin-top:3px; stroke:var(--ink); stroke-width:2; fill:none }
.am-contrat .formule--reco .formule__list svg{ stroke:#fff }
.am-contrat .formule__list li.est-hors{ color:var(--faint) }
.am-contrat .formule--reco .formule__list li.est-hors{ color:#8b9299 }
.am-contrat .formule__list li.est-hors svg{ stroke:var(--faint) }

.am-contrat .formule .am-btn{ width:100%; justify-content:center }
.am-contrat .formule--reco .am-btn{ background:#fff; color:var(--ink); border-color:#fff }

/* repère de valeur — ancre le prix sur une réalité vérifiable (tarif public A&M) */
.am-contrat .formule__repere{ font-size:12.5px; color:var(--faint); margin:14px 0 0; line-height:1.5; text-align:center }
.am-contrat .formule--reco .formule__repere{ color:#9aa1a8 }

/* ── Marqueur « à valider » : rien dans cette maquette ne doit passer pour
   une donnée arrêtée. Volontairement visible. ───────────────────────────── */
.am-contrat .avalider{ display:inline-flex; align-items:center; gap:7px; padding:3px 11px; border:1px dashed #b45309;
  border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#b45309; background:#fffbeb }
.am-contrat .bandeau-valider{ border:1px dashed #b45309; background:#fffbeb; border-radius:var(--radius);
  padding:20px 24px; margin:0 0 34px; color:#7c3a06; font-size:15px; line-height:1.6 }
.am-contrat .bandeau-valider b{ color:#7c3a06 }
.am-contrat .a-completer{ color:#b45309; font-style:italic }

/* .steps est en repeat(4,1fr) par défaut ; on veut 3 colonnes. En STYLE INLINE,
   cette valeur écrasait la règle mobile du site (.am-pres .steps{grid-template-columns:1fr})
   — un style inline bat une media query — et le document restait large en mobile,
   d'où un débordement horizontal. En classe, la cascade reprend la main. */
@media (min-width:1025px){ .am-contrat .steps--3{ grid-template-columns:repeat(3,1fr) } }

@media (max-width:1024px){ .am-contrat .formules{ grid-template-columns:1fr; gap:18px } }

/* ══════════ FORMULAIRE EN ÉTAPES — dans le bloc des formules ══════════════════
   On ne quitte pas la page : les cartes s'effacent, le parcours prend leur place.
   Fil d'étapes numéroté, dans l'esprit du parcours Miele mais à la charte A&M
   (Inter, tokens --ink/--hairline/--faint, zéro emoji, icônes line-art). */
 /* [hidden] doit gagner : .formules et .wiz portent un display explicite (grid/block)
    qui écrase la règle display:none du navigateur — les cartes restaient visibles
    sous le parcours (vécu 02.08.2026). */
.am-contrat [hidden]{ display:none !important }
.am-contrat .wiz{ background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:34px 36px 30px }
.am-contrat .wiz__retour{ background:none; border:0; padding:0; margin:0 0 22px; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--muted) }
.am-contrat .wiz__retour:hover{ color:var(--ink) }

/* fil d'étapes */
.am-contrat .wiz__steps{ list-style:none; margin:0 0 30px; padding:0 0 18px; display:flex; gap:6px;
  border-bottom:1px solid var(--hairline); overflow-x:auto }
.am-contrat .wiz__steps li{ flex:1 1 0; min-width:110px; display:flex; flex-direction:column; gap:5px;
  position:relative; padding-right:6px }
.am-contrat .wiz__steps .n{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--hairline); font-size:12.5px; font-weight:700; color:var(--faint); background:#fff }
.am-contrat .wiz__steps .l{ font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--faint) }
.am-contrat .wiz__steps li.is-on .n{ border-color:var(--ink); background:var(--ink); color:#fff }
.am-contrat .wiz__steps li.is-on .l{ color:var(--ink) }
.am-contrat .wiz__steps li.is-done .n{ border-color:var(--ink); color:var(--ink) }
.am-contrat .wiz__steps li.is-done .l{ color:var(--ink-body) }

.am-contrat .wiz__h{ font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:0 0 8px }
.am-contrat .wiz__p{ font-size:15px; color:var(--muted); margin:0 0 24px; line-height:1.55; max-width:62ch }

/* choix de formule */
.am-contrat .wiz__choix{ display:grid; gap:14px }
.am-contrat .opt{ display:block; cursor:pointer }
.am-contrat .opt input{ position:absolute; opacity:0; pointer-events:none }
.am-contrat .opt__box{ display:block; border:1px solid var(--hairline); border-radius:12px; padding:18px 20px;
  transition:border-color .15s, box-shadow .15s }
.am-contrat .opt input:checked + .opt__box{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset }
.am-contrat .opt__t{ display:flex; align-items:baseline; gap:9px; font-size:17px; font-weight:700; color:var(--ink) }
.am-contrat .opt__t b{ font-size:22px; letter-spacing:-.02em }
.am-contrat .opt__t small{ font-size:12.5px; font-weight:500; color:var(--muted) }
.am-contrat .opt__d{ display:block; margin-top:6px; font-size:14.5px; color:var(--ink-body); line-height:1.5 }

/* cases à cocher */
.am-contrat .wiz__cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.am-contrat .case{ display:flex; align-items:center; gap:10px; border:1px solid var(--hairline);
  border-radius:10px; padding:12px 14px; cursor:pointer; font-size:14.5px; color:var(--ink-body);
  transition:border-color .15s }
.am-contrat .case:has(input:checked){ border-color:var(--ink); color:var(--ink); font-weight:600 }
.am-contrat .case input{ width:16px; height:16px; accent-color:var(--ink); flex:none }
.am-contrat .case--cgv{ align-items:flex-start; margin-top:22px; font-size:13.5px; line-height:1.5 }
.am-contrat .case--cgv input{ margin-top:2px }

/* champs */
/* « J'ai déjà un compte » — pré-remplissage depuis la fiche client (étape 3).
   Volontairement discret : la souscription doit rester possible sans compte. */
.am-contrat .deja{ border:1px solid var(--hairline); border-radius:12px; padding:16px 18px; margin:0 0 22px }
.am-contrat .deja__bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:14px; color:var(--ink-body) }
.am-contrat .deja__lien{ background:none; border:0; padding:0; margin-left:auto; cursor:pointer;
  font:inherit; font-size:14px; font-weight:700; color:var(--ink); text-decoration:underline }
.am-contrat .deja__form{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline) }
.am-contrat .deja__form .am-btn{ min-height:44px }
.am-contrat .deja__msg{ grid-column:1 / -1; margin:0; font-size:13.5px }
.am-contrat .deja__msg.est-ok{ color:#15803d }
.am-contrat .deja__msg.est-ko{ color:#b45309 }
@media (max-width:820px){ .am-contrat .deja__form{ grid-template-columns:1fr } }

.am-contrat .wiz__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.am-contrat .ch{ display:flex; flex-direction:column; gap:6px }
.am-contrat .ch--2{ grid-column:1 / -1 }
.am-contrat .ch span{ font-size:12.5px; font-weight:600; color:var(--muted) }
.am-contrat .ch input{ font:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1px solid var(--hairline); border-radius:10px; padding:11px 13px; transition:border-color .15s }
.am-contrat .ch input:focus{ outline:none; border-color:var(--ink) }
.am-contrat .ch input.est-vide{ border-color:#b45309 }

/* récapitulatif */
.am-contrat .wiz__recap{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 22px;
  border:1px solid var(--hairline); border-radius:12px; padding:20px 22px }
.am-contrat .wiz__recap dt{ font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap }
.am-contrat .wiz__recap dd{ margin:0; font-size:15px; color:var(--ink) }
.am-contrat .wiz__recap .prix{ font-weight:700 }
.am-contrat .wiz__note{ margin-top:16px; border:1px solid var(--hairline); border-left:3px solid var(--ink);
  border-radius:0 10px 10px 0; padding:14px 18px; font-size:14.5px; color:var(--ink-body); line-height:1.55 }

/* confirmation */
.am-contrat .wiz__pane--fin{ text-align:center; padding:14px 0 6px }
.am-contrat .wiz__ok{ width:52px; height:52px; margin:0 auto 18px; border-radius:50%;
  background:var(--ink); display:grid; place-items:center }
.am-contrat .wiz__ok svg{ width:26px; height:26px; stroke:#fff; stroke-width:2.4; fill:none }
.am-contrat .wiz__pane--fin .wiz__p{ margin-left:auto; margin-right:auto }
.am-contrat .wiz__ref{ font-size:13px; color:var(--faint) }

.am-contrat .wiz__err{ margin:14px 0 0; font-size:13.5px; color:#b45309 }
.am-contrat .wiz__nav{ display:flex; gap:12px; margin-top:28px; padding-top:22px; border-top:1px solid var(--hairline) }
.am-contrat .wiz__nav .am-btn{ min-width:190px; justify-content:center }

@media (max-width:820px){
  .am-contrat .wiz{ padding:26px 20px 22px }
  .am-contrat .wiz__cases{ grid-template-columns:1fr 1fr }
  .am-contrat .wiz__grid{ grid-template-columns:1fr }
  .am-contrat .wiz__nav{ flex-direction:column }
  .am-contrat .wiz__nav .am-btn{ width:100% }
  .am-contrat .wiz__steps li{ min-width:96px }
}


/* ── Footer : la maquette ne charge pas le thème Divi complet, donc le fond noir
   de la section footer manquait et son texte blanc devenait invisible. Valeurs
   RELEVÉES en production (variable Divi --gcid-f9tw3pu2vy = #050505, container
   --am-container = 1320px), pas choisies à l'estime. ─────────────────────── */
.et-l--footer{ background:#050505; padding-top:15px }
.et-l--footer .et_pb_row{ max-width:1320px; width:calc(100% - 88px); margin-left:auto; margin-right:auto }