.mir{ --vert:#59815b; --vert-f:#48694a; --encre:#2b2f33; --creme:#f2f1e7;
  --jaune:#ffd202; --gris:#f6f6f6;
  font-family:"Montserrat",system-ui,sans-serif; color:var(--encre);
  background:#ffffff; background-size:100% auto; }
.mir h1,
.mir h2,
.mir h3{ font-family:"Montserrat",system-ui,sans-serif;
  text-transform:uppercase; font-weight:900; color:var(--encre);
  margin:0 0 .6rem; }
.mir h3{ font-size:40px; line-height:44px; letter-spacing:-2px !important; }
.mir p{ font-size:18px; line-height:26px; letter-spacing:-1px; margin:0 0 1rem; }
.mir-ecran{ position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:1100px){
.mir h3{ font-size:30px; line-height:34px; letter-spacing:-1.5px !important; }
}
.mir .mir-pied{ background:#242625; color:#b9b9b9; margin:0;
  padding:60px 60px 0; max-width:none !important; }
.mir .mir-pied-lettre{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:20px; padding-bottom:50px; max-width:none;
  width:100%; }
.mir .mir-pied-lettre input{ width:195px; background:none; border:0;
  border-bottom:1px solid #6c6c6c; color:#fff; font-family:inherit;
  font-size:16px; font-style:italic; padding:8px 2px; }
.mir .mir-pied-lettre input::placeholder{ color:#b9b9b9; font-style:italic; }
.mir .mir-pied-lettre input:focus{ outline:none; border-bottom-color:#fff; }
.mir .mir-pied-lettre .ec-form-envoi{ background:var(--vert); color:#fff;
  border:0; border-radius:20px; padding:13px 26px; font-family:inherit;
  font-size:14px; font-weight:900; line-height:18px; text-transform:uppercase;
  cursor:pointer; max-width:200px; }
.mir .mir-pied-lettre .ec-form-envoi:hover{ background:var(--vert-f); }
.mir .mir-pied-lettre .ec-form-merci,
.mir .mir-pied-lettre .ec-form-erreur{ flex:1 0 100%; text-align:center;
  color:#fff; }
.mir .mir-pied-colonnes{ display:grid;
  grid-template-columns:1.1fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; }
.mir .mir-pied-colonne h3{ font-size:22px; line-height:26px; font-weight:900;
  letter-spacing:-1px !important; text-transform:uppercase; color:#fff;
  margin:0 0 18px; }
.mir .mir-pied-colonne a{ display:block; color:#b9b9b9; font-size:16px;
  line-height:26px; font-style:italic; letter-spacing:0; text-decoration:none; }
.mir .mir-pied-colonne a:hover{ color:#fff; }
.mir .mir-pied-sous{ padding-left:10px; }
.mir .mir-pied-marque img{ width:180px; height:auto; display:block;
  margin-bottom:40px; border-radius:0 !important; }
.mir .mir-pied-marque h3{ margin-bottom:12px; }
.mir .mir-pied-reseaux{ display:flex; gap:18px; margin:0; }
.mir .mir-pied-reseaux a{ display:inline-flex; color:#b9b9b9; }
.mir .mir-pied-reseaux a:hover{ color:#fff; }
.mir .mir-pied-bas{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:60px; background:rgb(16,17,16); margin:0 -60px; padding:22px 60px; }
.mir .mir-pied-bas a{ color:#b9b9b9; font-size:16px; line-height:24px;
  font-style:italic; letter-spacing:0; text-decoration:none; }
.mir .mir-pied-bas a:hover{ color:#fff; }
@media (max-width:1040px){
.mir .mir-pied{ padding:40px 20px 0; }
.mir .mir-pied-colonnes{ grid-template-columns:1fr 1fr; gap:28px; }
.mir .mir-pied-bas{ margin:0 -20px; gap:18px 28px; padding:18px 20px; }
}
@media (max-width:620px){
.mir .mir-pied-colonnes{ grid-template-columns:1fr; }
}
.mir{ position:relative; }
.mir .mir-entete{ position:absolute; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; height:110px; padding:0 60px;
  max-width:none !important; }
.mir .mir-logo{ display:block; flex:0 0 130px; width:130px; }
.mir .mir-logo img{ width:130px; height:130px; object-fit:contain;
  display:block; border-radius:0 !important; }
.mir .mir-menu{ margin-left:auto; }
.mir .mir-menu > ul{ display:flex; align-items:center; list-style:none;
  margin:0; padding:0; gap:0; }
.mir .mir-menu-item{ position:relative; display:block; }
.mir .mir-menu-lien{ display:inline-flex; align-items:center; gap:7px;
  height:28px; padding:0 16px; border-radius:20px; color:#fff;
  font-size:16px; font-weight:900; line-height:28px; letter-spacing:-.02em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.mir .mir-menu-lien:hover{ color:var(--jaune); }
.mir .mir-menu-jaune > .mir-menu-lien{ background:var(--jaune);
  color:var(--encre); }
.mir .mir-menu-jaune > .mir-menu-lien:hover{ color:var(--encre); }
.mir .mir-menu-vert > .mir-menu-lien{ background:var(--vert); color:#fff; }
.mir .mir-menu-vert > .mir-menu-lien:hover{ background:var(--vert-f);
  color:#fff; }
.mir .mir-chevron{ display:inline-flex; }
.mir .mir-sous-menu{ position:absolute; top:100%; left:0; min-width:220px;
  background:#fff; padding:14px 0; display:none; z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,.18); }
.mir .mir-menu-item:hover .mir-sous-menu,
.mir .mir-menu-item.est-ouvert .mir-sous-menu{ display:block; }
.mir .mir-sous-menu a{ display:block; padding:5px 22px; color:var(--encre);
  font-size:18px; font-weight:600; line-height:26px; letter-spacing:-.5px;
  text-decoration:none; white-space:nowrap; }
.mir .mir-sous-menu a:hover{ color:var(--vert); }
.mir .mir-burger{ display:none; margin-left:auto; background:none; border:0;
  cursor:pointer; padding:10px; }
.mir .mir-burger span{ display:block; width:28px; height:3px; margin:5px 0;
  background:#fff; }
@media (max-width:1560px){
.mir .mir-entete{ padding:0 24px; }
.mir .mir-menu-lien{ font-size:15px; padding:0 11px; }
}
@media (max-width:1280px){
.mir .mir-entete{ padding:0 20px; height:90px; }
.mir .mir-logo{ flex-basis:96px; width:96px; }
.mir .mir-logo img{ width:96px; height:96px; }
.mir .mir-menu-lien{ font-size:14px; padding:0 11px; }
}
@media (max-width:1040px){
.mir .mir-burger{ display:block; }
.mir .mir-menu{ position:absolute; top:90px; left:0; right:0;
    background:#fff; display:none; padding:12px 0;
    box-shadow:0 10px 30px rgba(0,0,0,.18); }
.mir .mir-menu.est-ouvert{ display:block; }
.mir .mir-menu > ul{ display:block; }
.mir .mir-menu-lien{ color:var(--encre); height:auto; padding:10px 20px;
    border-radius:0; }
.mir .mir-menu-jaune > .mir-menu-lien,
.mir .mir-menu-vert > .mir-menu-lien{ background:none; color:var(--encre); }
.mir .mir-sous-menu{ position:static; display:block; box-shadow:none;
    padding:0 0 8px 20px; }
}
.mir .mir-logos{ display:flex; gap:40px; align-items:center;
  justify-content:center; margin-top:1.6rem; }
.mir .mir-logos img{ height:54px; width:auto; object-fit:contain;
  border-radius:0 !important; }
@media (max-width:1040px){
.mir{ overflow-x:hidden; }
.mir .mir-pied{ margin-left:0; margin-right:0; }
.mir img{ max-width:100%; }
}
.mir-cta,
.mir-fiche-cta,
.mir-hero-bouton,
.mir-lien-simple,
.mir-menu-lien{
  border-radius:20px !important; text-transform:uppercase !important;
  font-weight:900 !important; }
/* ===== l'habillage des pages outil ===== */
/* L'en-tete et le pied de la refonte s'effacent devant ceux du site actuel. */
#siteHeader, .mobile-bar, #siteFooter, body > footer{ display:none !important; }
.ec-chrome{ background:none !important; }
.ec-chrome .mir-entete{ position:static; background:var(--encre);
  margin:0; }
.ec-chrome .mir-pied{ margin:0; }
/* Le pied vit en bas de page, quoi qu'il arrive au contenu au-dessus. */
.ec-chrome-pied{ margin-top:0; }
/* Les bandes pleine largeur du configurateur sont posees en `100vw` avec
   une marge negative, pour sortir d'un contenu plus etroit qu'elles.
   `100vw` compte la barre de defilement : la bande depassait de 8 px et
   la page se decalait, sur telephone comme sur ordinateur. Dans le
   gabarit charte le conteneur fait deja toute la largeur : la bande n'a
   donc rien a compenser. */
.cfg-bande{ margin-left:0 !important; margin-right:0 !important;
  width:100% !important; max-width:100% !important; }
@media (max-width:900px){ .ec-chrome .mir-entete{ height:90px; } }


/* ===== le sous-menu rhabille — 29/10/2026 ==========================
   Le panneau etait le seul element carre et plat d'un site fait de
   pilules de 20 px : coins arrondis, ombre portee, une pointe qui le
   raccroche a sa pilule, et des entrees qui s'allument sur toute leur
   largeur au lieu de ne changer que de couleur de texte.
   Aucun changement de balisage : tout tient dans cette feuille.
   ================================================================== */
.mir .mir-sous-menu{
  top:calc(100% + 9px); left:0; min-width:236px;
  background:#fff; padding:8px;
  border-radius:16px;
  box-shadow:0 20px 44px rgba(0,0,0,.26);
}
/* Le pont invisible : le panneau ne touche plus son entree, il se
   fermerait des que la souris traverse l'espace entre les deux. */
.mir .mir-sous-menu::after{
  content:""; position:absolute;
  left:0; right:0; top:-11px; height:11px;
}
/* La pointe, qui dit de quelle entree le panneau descend. */
.mir .mir-sous-menu::before{
  content:""; position:absolute;
  top:-6px; left:24px; width:13px; height:13px;
  background:#fff; border-radius:3px;
  transform:rotate(45deg);
}
.mir .mir-sous-menu a{
  padding:8px 14px; border-radius:11px;
  font-size:15px; line-height:22px; letter-spacing:-.4px;
  transition:background .13s, color .13s;
}
.mir .mir-sous-menu a:hover{
  background:var(--creme,#f2f1e7);
  color:var(--vert-f,#48694a);
}
/* Le lien vers la gamme entiere se detache du reste, comme un titre de
   rubrique. Il est vise par son adresse et non par sa position : les
   trois autres sous-menus n'ont pas d'entree de ce genre, et leur
   premiere ligne doit rester une ligne comme les autres. Les deux
   adresses sont la, celle d'aujourd'hui et celle d'apres la bascule. */
.mir .mir-sous-menu a[href="/gamme-reimo-charte/"],
.mir .mir-sous-menu a[href="/gamme-reimo/"]{
  color:var(--vert,#59815b); font-weight:700;
  border-bottom:1px solid #eceadf;
  border-radius:11px 11px 0 0;
  margin-bottom:5px; padding-bottom:10px;
}
/* Sur telephone le menu se deplie en accordeon : ni pointe, ni ombre,
   ni coins — le panneau est dans le flux. */
@media (max-width:1040px){
  .mir .mir-sous-menu{
    top:auto; border-radius:0; padding:0 0 0 8px;
    box-shadow:none; min-width:0;
  }
  .mir .mir-sous-menu::before,
  .mir .mir-sous-menu::after{ display:none; }
}


/* Les pages outil — configurateur, fiche de vehicule — chargent la feuille
   du configurateur, qui remet a zero le rayon de tout le document par un
   `body *{ border-radius:0 !important }`. Sans `!important` ici, le
   panneau y resterait carre alors qu'il est arrondi sur les vingt-trois
   pages charte. Borne au-dessus de 1 040 px : en dessous, le menu se
   deplie en accordeon et doit rester carre. */
@media (min-width:1041px){
  .mir .mir-sous-menu{ border-radius:16px !important; }
  .mir .mir-sous-menu::before{ border-radius:3px !important; }
  .mir .mir-sous-menu a{ border-radius:11px !important; }
  .mir .mir-sous-menu a[href="/gamme-reimo-charte/"],
  .mir .mir-sous-menu a[href="/gamme-reimo/"]{
    border-radius:11px 11px 0 0 !important; }
}

/* ============== le hero des pages outil ==============================
   Les 7 pages de configurateur gardaient le hero de la refonte : chapeau
   « PILIER · OUTIL », titre sans capitales, chapeau en Spectral, bouton
   jaune carre. Elles prennent le hero de la charte, comme les 23 autres
   pages. Les regles sont recopiees de commun-charte.css plutot que d'y
   brancher la feuille entiere (196 Ko d'arbitrages ecrits pour les pages
   miroir, qui restyleraient l'outil sans prevenir). Le hero est enferme
   dans un <div class="mir"> pour que la portee reste la sienne.
   Pose le 29/10/2026. */

.mir > .mir-hero, .mir > .mir-bande{ max-width:none !important;
  padding-left:0; padding-right:0; }
.mir .mir-cta{ display:inline-flex; align-items:center; gap:.5rem;
  background:var(--vert); color:#fff; border:1px solid var(--vert);
  border-radius:20px; padding:11px 41px; font-size:16px; font-weight:900;
  line-height:30px; letter-spacing:-1px; text-transform:uppercase;
  text-decoration:none; transition:background .15s; }
.mir .mir-cta:hover{ background:var(--vert-f); border-color:var(--vert-f);
  color:#fff; }
.mir .mir-contour{ background:transparent; color:var(--encre);
  border:1px solid var(--encre); }
.mir .mir-contour:hover{ background:var(--encre); color:#fff;
  border-color:var(--encre); }
.mir .mir-nu .mir-cta{ background:none; border:0; color:var(--vert);
  padding:10px 0; }
.mir .mir-nu .mir-cta:hover{ background:none; color:var(--vert-f); }
.mir .mir-fleche{ font-weight:700; letter-spacing:0; }
.mir .mir-hero{ position:relative; height:1000px; max-width:none;
  padding:0; display:flex; align-items:center; justify-content:center;
  overflow:hidden; }
.mir .mir-video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:0; }
.mir .mir-hero-voile{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42)); }
.mir .mir-hero-texte{ position:relative; text-align:center; padding:0 20px; }
.mir .mir-brush{ position:absolute; left:0; right:0; bottom:-1px; width:100%;
  height:128px; object-fit:fill; border-radius:0 !important; z-index:2; }
.mir .mir-hero-sous{ color:#fff; font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; font-size:clamp(1rem,1.8vw,1.5rem); margin:0; }
.mir .mir-modele .mir-cta{ align-self:center; margin-top:auto; }
@media (max-width:1100px){
.mir .mir-hero{ height:70vh; }
}
@media (max-width:820px){
.mir .mir-hero{ height:62vh; }
}
.mir .mir-lien-simple .mir-cta{ background:none; border:0; color:var(--encre);
  padding:0; }
.mir .mir-lien-simple .mir-cta:hover{ background:none; color:var(--vert); }
.mir .mir-stock .mir-modele button.mir-cta{ align-self:center;
  margin-top:auto; font-family:inherit; cursor:pointer; }
.mir .mir-video-bloc{ padding-top:100px; padding-bottom:0;
  text-align:center; }
.mir .mir-video-bloc video{ width:100%; max-width:1000px; border-radius:20px;
  display:block; margin:1rem auto 0; }
.mir .mir-hero{ align-items:flex-end; padding-bottom:182px; }
.mir .mir-hero-modele{ height:100vh; min-height:700px;
  align-items:flex-start; padding-top:130px; padding-bottom:0; }
.mir .mir-hero-modele h1{ font-size:105px; line-height:65px;
  letter-spacing:-2px !important; }
.mir .mir-hero-modele .mir-hero-sous{ font-size:28px; line-height:36px;
  font-weight:400; text-transform:none; letter-spacing:-1px;
  max-width:660px; margin:36px auto 0; }
.mir .mir-hero-bouton{ margin:28px 0 0; }
.mir .mir-hero-texte{ text-align:left; width:100%;
  max-width:1460px; margin-left:auto; margin-right:auto;
  padding-left:5%; padding-right:5%; box-sizing:border-box; }
.mir .mir-hero-texte > *{ max-width:1020px; margin-left:0;
  margin-right:0; }
.mir mark.mir-or-nu{ background:none; color:var(--jaune); padding:0; }
.mir .mir-hero-voile{ background:linear-gradient(90deg,
  rgba(0,0,0,.74) 0%, rgba(0,0,0,.60) 34%, rgba(0,0,0,.20) 60%,
  rgba(0,0,0,.08) 80%); }
.mir .mir-hero .mir-hero-sous{ font-size:19px; line-height:1.6em;
  font-weight:400; text-transform:none; letter-spacing:-.5px;
  margin:0; }
.mir .mir-hero-texte{ color:#ffffff; }
.mir .mir-hero-chiffres{ display:flex; flex-wrap:wrap; align-items:center;
  gap:0; margin:26px 0 0; padding-top:20px; color:#ffffff;
  border-top:1px solid rgba(255,255,255,.34); max-width:1020px; }
.mir .mir-hero-chiffres span{ font-size:19px; line-height:24px;
  font-weight:700; letter-spacing:-.5px; padding:0 22px; }
.mir .mir-hero-chiffres span:first-child{ padding-left:0; }
.mir .mir-hero-chiffres span + span{
  border-left:1px solid rgba(255,255,255,.34); }
.mir .mir-hero-actions{ display:flex; flex-wrap:wrap; gap:14px;
  margin:28px 0 0; }
.mir .mir-hero-actions .mir-cta{ padding:9px 28px; font-size:13px;
  line-height:24px; letter-spacing:-.5px; }
.mir .mir-hero-actions .mir-cta.mir-contour{ border-color:#ffffff;
  color:#ffffff; background:none; }
.mir .mir-hero-actions .mir-cta.mir-contour:hover{ background:#ffffff;
  color:var(--encre); }
.mir .mir-cta.mir-jaune{ background:#ffd202 !important;
  border-color:#ffd202 !important; color:#2b2f33 !important; }
@media (min-width:1041px){
.mir .mir-hero-modele h1{ font-size:clamp(34px,3.1vw,46px);
    line-height:1.08; letter-spacing:-2px !important; }
.mir .mir-hero-modele .mir-hero-sous{ font-size:19px; line-height:1.6em;
    font-weight:400; max-width:1020px; }
.mir .mir-hero-texte{ position:relative; text-align:left;
    margin-top:0; }
.mir .mir-hero-modele{ display:flex; flex-direction:column;
    justify-content:center; align-items:stretch;
    padding-top:118px; padding-bottom:150px; }
.mir .mir-hero-modele{ height:100vh; min-height:100vh; max-height:100vh; }
}
@media (max-width:1040px){
.mir .mir-hero-modele{ height:auto; min-height:76vh; max-height:none;
    padding-top:118px; padding-bottom:120px; }
.mir .mir-hero-texte > *{ max-width:100%; }
.mir .mir-hero-chiffres{ max-width:100%; gap:6px 0; }
.mir .mir-hero-chiffres span{ font-size:16px; padding:0 14px; }
.mir .mir-hero-actions{ margin-top:26px; }
.mir .mir-hero-actions .mir-cta{ width:100%; justify-content:center; }
.mir .mir-hero h1,
  .mir .mir-hero-modele h1{ font-size:clamp(34px,10.5vw,76px);
    line-height:1.02; letter-spacing:-1px !important;
    overflow-wrap:break-word; }
.mir .mir-hero-sous{ max-width:100% !important; }
.mir .mir-hero-modele .mir-hero-sous{ font-size:17px; line-height:26px;
    margin:18px auto 0; }
.mir .mir-hero-texte{ padding:0 18px; max-width:100%;
    box-sizing:border-box; }
}
.bcf-lien,
.btn,
.devis-submit,
.discover,
.ec-form-envoi,
.gamme-cta,
.itc-primaire,
.mir-cta,
.mir-fiche-cta,
.mir-hero-bouton,
.mir-lien-simple,
.mir-menu-lien,
.mt-lien,
.mv-lien,
.nav-cta,
.quote,
.sp-lien,
.v2-cta{
  border-radius:20px !important; text-transform:uppercase !important;
  font-weight:900 !important; }
.mir .mir-fiche-actions .mir-cta{ font-size:15px; margin-top:0; }
@media (max-width:820px){
.mir .mir-fiche-actions .mir-cta{ width:100%; text-align:center; }
}
@media (max-width:560px){
.mir dialog.mir-fiche .mir-fiche-actions .mir-cta{ font-size:14px;
    padding:12px 18px; }
}


/* ============== l'outil prend les formes de la charte ================
   `body *{ border-radius:0 !important }` a ete leve dans
   configurateur-apres.css : la refonte voulait des angles droits, la
   charte du site actuel arrondit a 20 px et met ses boutons en
   capitales grasses. */

#ecconf .opt,
#ecconf .pack,
#ecconf .meuble{ border-radius:20px; overflow:hidden; }

#ecconf .famille,
#ecconf .groupe,
#ecconf .volet,
#ecconf .cadre{ border-radius:20px; }

.cfg-section .btn,
#ecconf .btn{ border-radius:20px !important;
  text-transform:uppercase !important; font-weight:900 !important; }

/* Sur les pages miroir, le titre et le chapeau du hero heritent leur
   blanc et leur Montserrat du corps de page. Ici la feuille du
   configurateur les pose explicitement (`main h1`, `main p`), et une
   declaration explicite l'emporte toujours sur un heritage : il faut
   donc les reposer. */
.mir .mir-hero-texte h1,
.mir .mir-hero-texte .mir-hero-sous{ color:#fff; }
.mir .mir-hero-texte,
.mir .mir-hero-texte h1,
.mir .mir-hero-texte p{ font-family:"Montserrat",sans-serif; }

/* Le fil d'Ariane de la refonte etait masque par le hero d'avant ; les
   23 pages de la charte n'en portent pas. */
body:has(.cfg-section) .breadcrumb{ display:none; }

/* La typographie de l'outil : Montserrat partout (la feuille de la
   refonte posait Spectral sur les paragraphes) et les titres en
   capitales, comme les 23 pages de la charte. */
.cfg-section, .cfg-section *{ font-family:"Montserrat",sans-serif; }
.cfg-titre{ text-transform:uppercase; letter-spacing:-1px !important; }
#ecconf .g-titre,
#ecconf .fam-nom{ text-transform:uppercase; letter-spacing:-.5px; }

/* Les six cartes de choix de modele prennent la forme des cartes de la
   charte : arrondi 20 px et ombre portee, au lieu du filet carre. */
.cfg-dep{ border-radius:20px; border:0;
  box-shadow:0 0 16px rgba(0,0,0,.16);
  transition:box-shadow .15s ease, transform .15s ease; }
.cfg-dep:hover{ box-shadow:0 8px 26px rgba(0,0,0,.22);
  transform:translateY(-2px); }
.cfg-dep .dep-nom{ text-transform:uppercase; letter-spacing:-.5px;
  font-weight:900; }
@media (prefers-reduced-motion:reduce){
  .cfg-dep{ transition:none; }
  .cfg-dep:hover{ transform:none; }
}

/* « CONFIGURATEUR » fait treize lettres : a 390 px le mot ne tenait pas
   et se coupait en deux au milieu. Les titres des pages outil
   descendent d'un cran sur telephone, et la cesure devient propre. */
@media (max-width:560px){
  .mir .mir-hero-modele .mir-hero-texte h1{ font-size:30px;
    line-height:34px; hyphens:auto; }
}

/* Le menu se pose SUR le hero, comme sur les 23 pages de la charte.
   `charte-chrome.css` le fixait en barre sombre parce que les pages
   outil n'avaient pas de hero ; maintenant qu'elles en ont un, il
   reprend sa place : absolu, transparent, au-dessus de la photo.
   La regle ne vaut que pour les pages qui portent un hero -- la fiche
   vehicule, elle, garde sa barre pleine. Pose le 29/10/2026. */
body:has(.mir-hero) .ec-chrome .mir-entete{ position:absolute;
  top:0; left:0; right:0; background:none; z-index:40; }

/* ============== la foire aux questions des pages outil ==============
   Elle utilisait le pliage maison de la refonte (.faq-item, un bouton
   et un onclick="toggleFaq"). Elle reprend celui de la charte :
   <details>/<summary>, qui se plie tout seul, sans JavaScript, et
   reste ouvrable par Ctrl+F dans le navigateur.
   Regles recopiees de commun-charte.css. Pose le 29/10/2026. */

.mir .mir-puces{ text-align:left; margin:0 18px 1.6rem; padding-left:1.4rem;
  list-style:disc outside; }
.mir .mir-puces li{ display:list-item; font-size:18px; line-height:26px;
  letter-spacing:-1px; }
.mir .mir-faq{ padding-top:150px; padding-bottom:100px; }
.mir .mir-q{ border-bottom:1px solid #e7e7e3; padding:.9rem 0; }
.mir .mir-q summary{ cursor:pointer; list-style:none; font-weight:900;
  text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(1.05rem,1.6vw,1.4rem); display:flex; gap:.7rem;
  align-items:flex-start; }
.mir .mir-q summary::-webkit-details-marker{ display:none; }
.mir .mir-q summary::before{ content:"+"; display:inline-flex;
  align-items:center; justify-content:center; width:1.1em; height:1.1em;
  border:1px solid var(--encre); font-weight:400; flex:0 0 auto;
  font-size:.9em; }
.mir .mir-q[open] summary::before{ content:"–"; }
.mir .mir-q p{ margin:.8rem 0 .2rem 1.8rem; }
@media (max-width:1100px){
.mir .mir-duo, .mir .mir-blog, .mir .mir-faq{ padding-top:90px; }
}
.mir .mir-specs .mir-puces{ margin:.8rem 0 .4rem 1.8rem; }
.mir .mir-chapitre .mir-puces{ margin:0 0 1rem 1.6rem; padding-left:1.2rem;
  list-style:disc outside; }
.mir .mir-chapitre .mir-puces li{ display:list-item; font-size:18px;
  line-height:26px; letter-spacing:-1px; }
.mir .mir-carte-defile .mir-puces,
.mir .mir-loupe-bloc .mir-puces{ margin:0 0 .8rem 1.4rem;
  padding-left:1.2rem; list-style:disc outside; }
.mir .mir-carte-defile .mir-puces li,
.mir .mir-loupe-bloc .mir-puces li{ display:list-item; font-size:18px;
  line-height:26px; letter-spacing:-1px; }
.mir .mir-specs-panneau .mir-puces{ margin:0 0 0 1.2rem;
  padding-left:1.2rem; list-style:disc outside; }
.mir .mir-specs-panneau .mir-puces li{ display:list-item; font-size:18px;
  line-height:26px; letter-spacing:-1px; }
.mir .mir-faq > h2{ text-align:center; }
.mir .mir-faq .mir-q{ border-bottom:0; padding:0; }
.mir .mir-faq summary{ font-size:30px; line-height:33px;
  letter-spacing:-2px !important; margin:25px 0; }
.mir .mir-faq .mir-q p{ margin:.8rem 0 .2rem; }
.mir .mir-faq .mir-q .mir-puces{ margin:.4rem 0 .8rem 1.6rem;
  padding-left:1.2rem; list-style:disc outside; }
.mir .mir-faq .mir-q .mir-puces li{ display:list-item; font-size:18px;
  line-height:26px; letter-spacing:-1px; }
@media (min-width:1041px){
.mir .mir-faq summary{ font-size:20px; line-height:20px;
    letter-spacing:-1px !important; margin:16px 0; }
.mir .mir-faq .mir-q p{ margin:.8rem 0 .2rem; line-height:1.6em; }
.mir .mir-faq > h2{ padding-bottom:3%; }
}


/* La feuille du configurateur met tout en Montserrat dans
   `.cfg-section` ; la FAQ est en dehors, elle garde la sienne. */
.mir .mir-faq,
.mir .mir-faq h2,
.mir .mir-faq summary,
.mir .mir-faq p,
.mir .mir-faq li{ font-family:"Montserrat",sans-serif; }

/* ============== l'outil respire ====================================
   `.cfg-section` se gardait 152 px de marge de chaque cote, soit
   304 px perdus sur 1 521 : les cartes d'options et le recapitulatif
   se serraient pour rien. La marge suit maintenant la largeur de
   l'ecran, et reste a 16 px sur telephone.

   Et le bandeau de rappel des choix (`.cfg-fil` : PORTEUR, TEINTE,
   MOTORISATION, JANTES, NIVEAU) disparait : le recapitulatif de
   droite dit deja tout cela, en permanence et en plus complet.
   Pose le 29/10/2026. */

.cfg-section{ padding-left:clamp(16px,3vw,56px) !important;
  padding-right:clamp(16px,3vw,56px) !important; }

.cfg-fil{ display:none; }

/* La marge interne des ecrans etait en pourcentage (10 %) : elargir le
   conteneur l'elargissait aussi, et les cartes d'options ne gagnaient
   rien. Elle est plafonnee. */
#ecconf .volet{ padding-left:clamp(0px,4vw,44px) !important;
  padding-right:clamp(0px,4vw,44px) !important; }

/* ============== les trois objections, a l'envoi ======================
   Engagement, prix definitif, ajustement apres devis : les trois
   questions qui retiennent la main au moment de laisser son telephone.
   Elles vivaient sous l'outil, c'est-a-dire APRES le formulaire : celui
   qui hesitait et renoncait ne les voyait jamais. Elles sont remontees
   sous le bouton d'envoi, dans l'emplacement que `.cfg-duo` gardait
   libre depuis le 20/10. Pose le 29/10/2026. */

#ecconf .cfg-rassure{ border-top:2px solid #e7e7e3; padding-top:20px;
  max-width:780px; }

#ecconf .cfg-rassure-titre{ font-size:13px; line-height:18px;
  font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vert,#59815b); margin:0 0 2px; }

#ecconf .cfg-rassure .mir-q{ padding:.55rem 0; }
#ecconf .cfg-rassure .mir-q:last-child{ border-bottom:0; }
#ecconf .cfg-rassure .mir-q summary{ font-size:15px; line-height:21px; }
#ecconf .cfg-rassure .mir-q p{ font-size:15px; line-height:22px;
  margin:.5rem 0 0; }

/* Meme plancher sur les pages outil : les libelles du formulaire de
   devis etaient a 11 px, lus pendant la saisie. Voir le bloc
   « plancher de lisibilite » de commun-charte.css. */
@media (max-width:1040px){
  .cfg-form label, #ecconf label{ font-size:13px; }
}

/* Le formulaire de devis est deplace par form.js dans `.ec-fenetre`,
   hors de #ecconf : la regle de plancher doit l'y suivre. */
@media (max-width:1040px){
  .ec-fenetre label, .ec-fenetre .ec-form label{ font-size:13px; }
  /* La barre de prix est stylee en `#ecconf ...` : il faut la meme
     force pour la depasser. */
  #ecconf .barre-lib, #ecconf .barre-in span{ font-size:12px; }
}

/* Les pages outil ne chargent pas commun-charte.css : la correction du
   titre de hero sur telephone et tablette doit y etre reposee. Les
   regles du hero recopiees le 29/10 portaient encore l'ancien
   `clamp(34px,10·5vw,76px)`, soit 76 px sur une tablette contre 46 sur
   un grand ecran. Meme echelle que les 23 pages de la charte. */
@media (max-width:1040px){
  .mir .mir-hero h1,
  .mir .mir-hero-modele h1{ font-size:clamp(32px,3.3vw,36px);
    line-height:1.08; }
}

/* Le titre des pages outil descendait a 30 px sur telephone par une
   regle posee le 29/10 pour « CONFIGURATEUR », treize lettres. Le
   nouveau clamp le couvre : la regle d'avant est annulee. */
@media (max-width:560px){
  .mir .mir-hero-modele .mir-hero-texte h1{ font-size:32px;
    line-height:35px; hyphens:auto; }
}