/* QUALITE24 — q24-apple.css : finition « design Apple » commune au site public, iMac et iPhone (17/10/2026).
   À charger APRÈS q24-unifie.css sur les pages publiques. L'accueil (index.html) et les applis ne la chargent pas.
   - Garde : les règles communes commencent par :where(body:not(.espace)) (spécificité nulle) : rien ne s'applique dans
     l'espace client, même si sa page charge cette feuille. Les règles propres à une page sont rangées sous sa classe
     (.cmv-page = Créer ma villa, .estimation-page = Estimation, .na-… = Nos applis), absentes de l'espace client.
     Seuls le pied de page et le corps de page utilisent body:not(.espace) en clair (q24-unifie y met « body … »).
   - !important seulement quand q24-unifie.css en met déjà un sur la même propriété.
   - Aucun texte modifié, aucune ressource externe (icônes en SVG data:), pas de mode sombre (site public toujours clair).
   - Mêmes valeurs partout : voir les repères de la section 0 (rayons, ombres, pastilles, largeurs). */

/* ===== 0. Repères communs ===== */
:root{
  --qa-large:1440px;                       /* colonne de contenu la plus large (iMac) */
  --qa-bande:1536px;                       /* bandeau = colonne + 48 px de chaque côté */
  --qa-bande-marge:clamp(20px,4vw,48px);   /* marge intérieure d'un bandeau */
  --qa-ligne:600px;                        /* 65 à 75 caractères en 17 px */
  --qa-r-bloc:28px;                        /* bandeaux et outils (estimateur, simulateur) */
  --qa-r-carte:22px;                       /* cartes */
  --qa-r-moyen:18px;                       /* photos, petites cartes */
  --qa-r-encart:16px;                      /* encarts dans une carte, miniatures */
  --qa-r-champ:12px;                       /* champs, vignettes */
  --qa-ombre:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
  --qa-ombre-survol:0 2px 4px rgba(0,0,0,.05),0 18px 40px rgba(0,0,0,.1);
  --qa-ombre-segment:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04);
  --qa-anneau:0 0 0 2px #9e1022;                         /* choix sélectionné */
  --qa-anneau-doux:inset 0 0 0 1.5px rgba(158,16,34,.35);/* encart mis en avant */
  --qa-remplir:rgba(118,118,128,.12);      /* pastilles et contrôles iOS */
  --qa-remplir-survol:rgba(118,118,128,.2);
  --qa-champ:rgba(118,118,128,.1);         /* champs et tuiles de choix */
  --qa-encart:#f5f3ee;--qa-sable:#efebe3;
  --qa-teinte:rgba(158,16,34,.07);--qa-teinte-forte:rgba(158,16,34,.1);
  --qa-sep:rgba(60,60,67,.18);--qa-sep-doux:rgba(60,60,67,.1);
  --qa-texte2:#424245;--qa-gris:#636366;--qa-pale:#aeaeb2;
  --qa-barre:rgba(250,249,246,.86);--qa-flou:saturate(180%) blur(20px);
}

/* ===== 1. En-tête et largeurs (iMac) ===== */
/* Contenu : 1440 px au plus, centré. Jusqu'à 1536 px d'écran rien ne change (marges de 16 à 48 px). */
:where(body:not(.espace)) :is(.wrap,.container){width:min(var(--qa-large),calc(100% - 2 * var(--q24-marge)))!important}
/* En-tête : le logo et « Espace client » s'alignent sur le contenu au lieu de partir aux deux bouts de l'écran */
:where(body:not(.espace)) .site-header{padding-inline:max(var(--q24-marge),calc((100% - var(--qa-large)) / 2))!important}
/* Créer ma villa : l'atelier suit la même marge que le reste du site */
.cmv-page .wrap-large{width:min(var(--qa-large),calc(100% - 2 * var(--q24-marge)))}
/* Bandeaux (bande sable, appel final, bandeau sombre, estimateur des modèles) : en retrait des bords, 1536 px au plus.
   La bande « béton » redevient sable : en noir, ses titres et ses textes étaient invisibles (contraste 1,0). */
:where(body:not(.espace)) main .section.section--beton{width:min(var(--qa-bande),calc(100% - 2 * var(--q24-marge)));margin-inline:auto;background:var(--qa-sable)!important}
:where(body:not(.espace)) section.appel,
:where(body:not(.espace)) main>section.cta-band{width:min(var(--qa-bande),calc(100% - 2 * var(--q24-marge)));margin:clamp(24px,4vw,56px) auto clamp(40px,6vw,88px)}
:where(body:not(.espace)) section.appel{border-top:0}
:where(body:not(.espace)) main>section.cta-band{padding-block:clamp(40px,6vw,80px)}
:where(body:not(.espace)) main>section.m-est.block{width:min(var(--qa-bande),calc(100% - 2 * var(--q24-marge)));margin-inline:auto;padding-block:clamp(40px,6vw,72px);background:#fff!important;border-radius:var(--qa-r-bloc)!important;box-shadow:var(--qa-ombre)!important}
/* contenu d'un bandeau : la même colonne que le reste, avec une marge intérieure */
:where(body:not(.espace)) main .section.section--beton>.container,
:where(body:not(.espace)) section.appel>.container,
:where(body:not(.espace)) main>section.cta-band>.wrap,
:where(body:not(.espace)) main>section.m-est.block>.wrap{width:min(var(--qa-large),calc(100% - 2 * var(--qa-bande-marge)))!important}

/* ===== 2. Sauts, filtres et onglets en pastilles (contrôles iOS) ===== */
/* « Accès direct » (Prestations, FAQ) : sans cadre, sans barre de défilement ; sur iMac les pastilles passent à la ligne */
:where(body:not(.espace)) nav.sauts{border-bottom:0;background:transparent}
:where(body:not(.espace)) nav.sauts ul{gap:8px;padding:10px 0 4px;scrollbar-width:none}
:where(body:not(.espace)) nav.sauts ul::-webkit-scrollbar{display:none}
@media (min-width:821px){:where(body:not(.espace)) nav.sauts ul{flex-wrap:wrap;overflow:visible}}
/* Barre collante des familles (Tarifs) et des filtres (Réalisations) : même flou que l'en-tête, rangée qui défile jusqu'au bord */
:where(body:not(.espace)) .t-nav{background:rgba(247,245,240,.82);-webkit-backdrop-filter:var(--qa-flou);backdrop-filter:var(--qa-flou);border-bottom:.5px solid var(--qa-sep)}
:where(body:not(.espace)) .t-nav ul.wrap{width:100%!important;padding:10px max(var(--q24-marge),calc((100% - var(--qa-large)) / 2));scroll-padding-inline:var(--q24-marge)}
:where(body:not(.espace)) .t-nav ul::-webkit-scrollbar{display:none}
/* Modèles : filtres sans traits gris */
:where(body:not(.espace)) .m-filters{border:0;padding:0;margin:20px 0 28px}
/* Une seule pastille pour tous les raccourcis et filtres : 40 px, fond gris translucide, sélection foncée */
:where(body:not(.espace)) nav.sauts a,
:where(body:not(.espace)) .t-nav a,
:where(body:not(.espace)) .t-nav.q-filtres button,
:where(body:not(.espace)) .m-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--qa-remplir);color:var(--q24-texte);font:600 15px/1 var(--q24-font);text-decoration:none;white-space:nowrap}
:where(body:not(.espace)) nav.sauts a:hover,
:where(body:not(.espace)) .t-nav a:hover,
:where(body:not(.espace)) .t-nav.q-filtres button:hover,
:where(body:not(.espace)) .m-chip:hover{background:var(--qa-remplir-survol);color:var(--q24-texte)}
:where(body:not(.espace)) .t-nav.q-filtres button[aria-pressed="true"],
:where(body:not(.espace)) .m-chip[aria-pressed="true"]{background:var(--q24-texte);color:#fff}
:where(body:not(.espace)) .m-sel select{border:0;background-color:var(--qa-remplir);font-weight:600}
/* Villes : « Aux alentours » en pastilles blanches, avec ou sans lien */
:where(body:not(.espace)) .communes-liste--km li{border:0;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06)}
:where(body:not(.espace)) .communes-liste--km li>a{min-height:40px;padding:0 16px;align-items:center;border:0;border-radius:999px}
:where(body:not(.espace)) .communes-liste--km li:not(:has(a)){min-height:40px;padding:0 16px;align-items:center;border:0;border-radius:999px}
:where(body:not(.espace)) .communes-liste--km li>a:hover{background:var(--qa-champ)}
/* Contrôle segmenté (Créer ma villa : Plan 2D / Villa 3D, Pièces / Options ; Nos applis : iPhone / Android / Mac et PC) */
.cmv-page .cmv-onglets,.na-seg{display:flex;gap:2px;padding:3px;border:0;border-radius:999px;background:var(--qa-remplir)}
.cmv-page .cmv-onglets{margin:12px 12px 4px}
.cmv-page .cmv-onglets button,.na-seg a{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--q24-texte);font:600 15px/1.1 var(--q24-font);text-align:center;text-decoration:none;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}
.cmv-page .cmv-onglets button[aria-selected="true"],.na-seg a[aria-selected="true"]{background:#fff;box-shadow:var(--qa-ombre-segment)}
.cmv-page .cmv-onglets button:focus-visible,.na-seg a:focus-visible{outline:2px solid var(--q24-rouge);outline-offset:2px}
/* Créer ma villa : niveaux, outils, segments Garage / Piscine, compteurs +/− en pastilles pleines */
.cmv-page .cmv-niveaux button,.cmv-page .cmv-outils button,.cmv-page .cmv-seg button,.cmv-page .cmv-compteur button{border:0;background:var(--qa-remplir);font-weight:600}
.cmv-page .cmv-niveaux button[aria-pressed="true"],.cmv-page .cmv-outils button[aria-pressed="true"],.cmv-page .cmv-seg button[aria-pressed="true"]{background:var(--q24-texte);color:#fff}
.cmv-page .cmv-compteur button:hover{background:var(--qa-teinte-forte);color:var(--q24-rouge)}
.cmv-page .cmv-ajout select{border:0;background-color:var(--qa-teinte-forte)}

/* ===== 3. Cartes : blanches, coins de 22 px, ombre très légère, sans bordure ===== */
/* Cartes de q24-unifie.css : 22 px au lieu de 24, et une ombre à deux couches pour se détacher du fond crème */
:where(body:not(.espace)) :is(.m-card,.t-card,.etape,.garantie,.service,.form-box,.carte,.card,.article-aside__carte){border-radius:var(--qa-r-carte)!important;box-shadow:var(--qa-ombre)!important}
:where(body:not(.espace)) .m-card:hover{box-shadow:var(--qa-ombre-survol)!important}
/* Sections des pages q24 (Modèles, fiches, Équipe, Réalisations, Tarifs, Créer ma villa) : fond crème de la page, seules les cartes sont blanches */
:where(body:not(.espace)) main>section.block{background:transparent!important;border-radius:0!important;overflow:visible}
/* Prestations et pages services : marge intérieure, écart entre les cartes, encart « dossier » visible */
:where(body:not(.espace)) main .container>.service{padding:clamp(20px,3vw,44px);margin-bottom:clamp(14px,1.6vw,20px)}
:where(body:not(.espace)) main .container>.service:first-child{margin-top:clamp(8px,2vw,24px)}
:where(body:not(.espace)) main .service .dossier{background:var(--qa-encart)!important;border-radius:var(--qa-r-encart)!important}
/* Méthode en 4 étapes : marge intérieure, grand chiffre gras, délai en pastille */
:where(body:not(.espace)) ol.etapes{gap:16px}
:where(body:not(.espace)) ol.etapes>.etape{padding:24px}
:where(body:not(.espace)) ol.etapes .etape__num{font-weight:700;font-size:clamp(34px,3vw,44px)}
:where(body:not(.espace)) ol.etapes .etape h3{font-size:clamp(20px,1.7vw,24px)}
:where(body:not(.espace)) ol.etapes .delai{justify-self:start;width:fit-content;padding:5px 12px;border:0;border-radius:999px;background:var(--qa-teinte-forte);color:var(--q24-rouge);font-size:13px;font-weight:600}
/* Garanties des pages villes : quatre cartes séparées, plus de filet */
:where(body:not(.espace)) section.garanties{border-bottom:0;padding:8px 0 clamp(24px,3vw,40px)}
:where(body:not(.espace)) section.garanties>.container{gap:12px;background:transparent;border-radius:0}
:where(body:not(.espace)) section.garanties .garantie{padding:22px 24px}
/* Nos engagements (pages services) */
:where(body:not(.espace)) ul.atouts{gap:12px}
:where(body:not(.espace)) ul.atouts>li{padding:22px 24px;border-top:0;border-radius:var(--qa-r-carte);background:#fff;box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) ul.atouts strong{font-size:clamp(19px,1.5vw,22px);line-height:1.25}
/* Compris / Non compris */
:where(body:not(.espace)) .perimetre .perimetre__col{background:#fff;border:0;border-radius:var(--qa-r-carte);box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .perimetre__col li{border-top:.5px solid var(--qa-sep)}
/* Programme (zones, villes) : toute la carte est cliquable, nom de commune à taille de carte */
:where(body:not(.espace)) ol.programme>li{padding:0!important;border-radius:var(--qa-r-carte)!important;box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) ol.programme>li>a{padding:18px 22px;border-radius:var(--qa-r-carte)}
:where(body:not(.espace)) ol.programme b{font-size:clamp(20px,1.6vw,24px);line-height:1.2;letter-spacing:-.015em}
:where(body:not(.espace)) ol.programme .num{letter-spacing:0;color:#6e6e73}
:where(body:not(.espace)) ol.programme>li>a:hover b{text-decoration:none}
/* Questions (FAQ, pages services, Modèles) : liste groupée iOS, séparateurs fins, chevron gris */
:where(body:not(.espace)) :is(.section.faq,.m-faq) details{margin:0;padding:0;border-radius:0!important;background:#fff!important;box-shadow:0 1px 2px rgba(0,0,0,.04)!important}
:where(body:not(.espace)) :is(.section.faq,.m-faq) details:first-of-type{border-top-left-radius:var(--qa-r-carte)!important;border-top-right-radius:var(--qa-r-carte)!important}
:where(body:not(.espace)) :is(.section.faq,.m-faq) details:last-of-type{border-bottom-left-radius:var(--qa-r-carte)!important;border-bottom-right-radius:var(--qa-r-carte)!important}
/* séparateur en retrait de 22 px, aligné sur le texte, comme une liste iOS (17/10 : il allait d'un bord à l'autre) */
:where(body:not(.espace)) :is(.section.faq,.m-faq) details+details{border-top:0!important}
:where(body:not(.espace)) :is(.section.faq,.m-faq) details+details>summary{position:relative}
:where(body:not(.espace)) :is(.section.faq,.m-faq) details+details>summary::before{content:"";position:absolute;top:0;left:22px;right:0;border-top:.5px solid var(--qa-sep)}
:where(body:not(.espace)) :is(.section.faq,.m-faq) summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;font:600 clamp(17px,1.3vw,19px)/1.35 var(--q24-font);letter-spacing:-.01em;color:var(--q24-texte);list-style:none;cursor:pointer}
:where(body:not(.espace)) :is(.section.faq,.m-faq) summary:focus-visible{outline:2px solid var(--q24-rouge);outline-offset:-2px}
:where(body:not(.espace)) :is(.section.faq,.m-faq) summary::after{content:"\203A";float:none;flex:none;font:400 24px/1 var(--q24-font);color:var(--qa-pale);transform:rotate(90deg);transition:transform .2s ease}
:where(body:not(.espace)) :is(.section.faq,.m-faq) details[open] summary::after{content:"\203A";transform:rotate(-90deg)}
:where(body:not(.espace)) :is(.section.faq,.m-faq) details p{max-width:68ch;margin:0;padding:0 22px 18px;font-size:17px;line-height:1.55;color:var(--qa-texte2)}
:where(body:not(.espace)) :is(.section.faq,.m-faq) details p+p{margin-top:-6px}
/* Étapes numérotées et engagements (Équipe, Modèles, Créer ma villa) : liste groupée, pastille rouge numérotée ou coche */
:where(body:not(.espace)) .steps,
:where(body:not(.espace)) .promises{gap:0;background:#fff;border-radius:var(--qa-r-carte);overflow:hidden;box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .steps li{background:transparent;border:0;border-radius:0;padding:18px 24px 18px 66px}
:where(body:not(.espace)) .steps li::before{content:counter(s);left:22px;top:17px;width:30px;height:30px;border-radius:50%;background:var(--q24-rouge);color:#fff;font:700 15px/30px var(--q24-font);text-align:center;letter-spacing:0}
:where(body:not(.espace)) .promises li{position:relative;background:transparent;border-left:0;border-radius:0;padding:16px 22px 16px 56px}
:where(body:not(.espace)) .promises li::before{content:"";position:absolute;left:20px;top:17px;width:22px;height:22px;border-radius:50%;background:#f6e3e5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e1022' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5 18 8'/%3E%3C/svg%3E") center/14px no-repeat}
:where(body:not(.espace)) .steps li+li,
:where(body:not(.espace)) .promises li+li{box-shadow:inset 0 .5px 0 var(--qa-sep)}
.cmv-page .cmv-notes .promises li{font-size:16px;line-height:1.5}
/* Équipe : fiche et portrait */
:where(body:not(.espace)) .q-membre{background:#fff;border:0;border-radius:var(--qa-r-carte);padding:12px 12px 22px;box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .q-portrait{border-radius:var(--qa-r-encart)}
/* Réalisations : une carte par projet type, chantiers réels en cartes */
:where(body:not(.espace)) .q-types-liste{gap:20px}
:where(body:not(.espace)) .q-type{border-top:0;background:#fff;border-radius:var(--qa-r-carte);padding:clamp(18px,2.4vw,32px);box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .q-chantier{background:#fff;border:0;border-radius:var(--qa-r-carte);box-shadow:var(--qa-ombre)}
/* Fiches modèles : plans et « Les autres modèles » */
:where(body:not(.espace)) .f-plans-img figure{background:#fff;border:0;border-radius:var(--qa-r-carte);padding:16px;box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .f-autres-liste a{border:0;border-radius:var(--qa-r-moyen);background:#fff;box-shadow:var(--qa-ombre);transition:box-shadow .2s ease}
:where(body:not(.espace)) .f-autres-liste a:hover{box-shadow:var(--qa-ombre-survol)}
:where(body:not(.espace)) .f-autres-liste span{padding:10px 14px 12px}
/* Formulaires et panneaux (Contact, Parrainage, Estimation, Conseils, avis) : cartes blanches, plus de cadre gris */
:where(body:not(.espace)) main .formulaire,
:where(body:not(.espace)) main .rappel,
:where(body:not(.espace)) main .estimate-help,
:where(body:not(.espace)) main .avis-google article{background:#fff;border:0;border-radius:var(--qa-r-carte);box-shadow:var(--qa-ombre)}
.estimation-page .estimate-work{border:0;border-radius:var(--qa-r-bloc);background:#fff;box-shadow:var(--qa-ombre)}
.estimation-page .estimate-help{padding:22px 24px}
.estimation-page #estimate-steps{border-top:0;background:#fff;border-radius:var(--qa-r-carte);padding:8px;gap:2px;box-shadow:var(--qa-ombre)}
.estimation-page #estimate-steps li{grid-template-columns:44px minmax(0,1fr);align-items:center;padding:12px;border-bottom:0;border-radius:14px;box-shadow:none;color:var(--qa-gris)}
.estimation-page #estimate-steps li b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--qa-sable);font:600 15px/1 var(--q24-font);color:var(--qa-gris)}
.estimation-page #estimate-steps li.active{padding-left:12px;background:var(--qa-teinte);color:var(--q24-texte)}
.estimation-page #estimate-steps li.active b{background:var(--q24-rouge);color:#fff}
.estimation-page #estimate-contact{border-top:.5px solid var(--qa-sep)}
.estimation-page #estimate-root details{border-color:var(--qa-sep-doux)}
/* Tableau comparatif (Conseils) : posé dans une carte */
:where(body:not(.espace)) .tableau-defile{padding:6px 18px;background:#fff;border-radius:var(--qa-r-moyen);box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .comparatif thead th{border-bottom:1px solid var(--qa-sep);font:600 17px/1.3 var(--q24-font)}
:where(body:not(.espace)) .comparatif tbody tr:last-child>*{border-bottom:0}
/* Encarts dans une carte : gris doux, coins de 16 px, sans liseré ni cadre */
:where(body:not(.espace)) main .photos-bloc,
:where(body:not(.espace)) main .price-result,
:where(body:not(.espace)) main .deplacement,
:where(body:not(.espace)) main .visite-r18,
:where(body:not(.espace)) main .notice,
:where(body:not(.espace)) main .compare-r18__carte,
:where(body:not(.espace)) main .booking-cta,
:where(body:not(.espace)) .m-result{background:var(--qa-encart);border:0;border-radius:var(--qa-r-encart)}
:where(body:not(.espace)) main .visite-r18{background:var(--qa-teinte)}
:where(body:not(.espace)) .m-result{padding:20px 22px}
:where(body:not(.espace)) .m-result.final{border:0;background:var(--qa-teinte);box-shadow:var(--qa-anneau-doux)}
:where(body:not(.espace)) .article .a-retenir{margin-top:40px;padding:clamp(20px,3vw,32px);border-left:0;border-radius:var(--qa-r-carte);background:var(--qa-teinte)}
:where(body:not(.espace)) main .form-status.success,
:where(body:not(.espace)) main .form-status.error{border-radius:var(--qa-r-champ)}
/* L'appli QUALITE24 (telecharger-appli.html) : cartes d'installation, QR code, « Ce que vous y trouvez » */
:where(body:not(.espace)) .installer-carte{border:0;border-radius:var(--qa-r-carte);background:#fff;padding:22px 24px;box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .installer-carte.mien{box-shadow:var(--qa-anneau),var(--qa-ombre)}
:where(body:not(.espace)) .installer-carte ol{gap:8px;font-size:16px;line-height:1.5}
:where(body:not(.espace)) .qr{max-width:520px;padding:14px 18px 14px 14px;background:#fff;border-radius:var(--qa-r-carte);box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .qr img{border:0;border-radius:var(--qa-r-champ)}
:where(body:not(.espace)) .appli-points{border-top:0}
:where(body:not(.espace)) .appli-points li{border:0;border-radius:var(--qa-r-carte);background:#fff;padding:22px 24px;box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .appli-points strong{margin-bottom:8px;font:600 19px/1.25 var(--q24-font);letter-spacing:-.02em}
:where(body:not(.espace)) .appli-points span{display:block;font-size:15px;line-height:1.5;color:var(--qa-texte2)}
/* Créer ma villa : cartes des modèles, « Partir d'une page blanche », atelier, encadrés */
.cmv-page .cmv-modele{border:0;border-radius:var(--qa-r-carte);background:#fff;box-shadow:var(--qa-ombre);transition:box-shadow .25s ease,transform .25s ease}
.cmv-page .cmv-modele:hover{border-color:transparent;box-shadow:var(--qa-ombre-survol);transform:translateY(-2px)}
.cmv-page .cmv-modele:focus-visible{border-color:transparent;outline:2px solid var(--q24-rouge);outline-offset:3px}
.cmv-page .cmv-modele-txt{padding:16px 20px 20px}
.cmv-page .cmv-blanc{border-radius:var(--qa-r-carte);padding:26px 28px;background:#1d1d1f}
.cmv-page .cmv-blanc h3{color:#fff!important;font-size:24px;letter-spacing:-.02em!important}
.cmv-page .cmv-blanc p{color:rgba(255,255,255,.72)!important}
.cmv-page .cmv-scene,.cmv-page .cmv-panneau{border:0;border-radius:var(--qa-r-carte);background:#fff;box-shadow:var(--qa-ombre)}
.cmv-page .cmv-barre,.cmv-page .cmv-aide,.cmv-page .cmv-apparence,.cmv-page .cmv-fs,.cmv-page .cmv-totaux{border-color:var(--qa-sep-doux)}
.cmv-page .cmv-reprise{border:0;border-radius:var(--qa-r-moyen);background:#fff;padding:16px 20px;box-shadow:var(--qa-ombre)}
.cmv-page .cmv-message{border-left:0;border-radius:var(--qa-r-encart);background:var(--qa-teinte);color:var(--q24-rouge)}
.cmv-page .cmv-alertes li{border-left:0;border-radius:var(--qa-r-champ);background:rgba(255,149,0,.14);color:#8a5a00;padding:10px 12px}
.cmv-page .cmv-selection{border:0;border-radius:var(--qa-r-encart);background:rgba(158,16,34,.05);box-shadow:var(--qa-anneau-doux)}
.cmv-page .cmv-liste button{border-radius:10px}
.cmv-page .cmv-liste button[aria-current="true"]{border-color:transparent;background:var(--qa-teinte-forte)}
/* Créer ma villa : barre de prix claire et floutée, comme l'en-tête et la barre d'onglets */
.cmv-page .cmv-prix{background:rgba(255,255,255,.86);-webkit-backdrop-filter:var(--qa-flou);backdrop-filter:var(--qa-flou);color:var(--q24-texte);border-top:.5px solid rgba(60,60,67,.29)}
.cmv-page .cmv-prix-sub{color:var(--qa-gris)}

/* ===== 4. Boutons et liens ===== */
/* Liens d'action : rouge, demi-gras, sans soulignement au repos (comme dans les applis) */
:where(body:not(.espace)) main .lien,
:where(body:not(.espace)) main .text-link,
:where(body:not(.espace)) section.appel .lien,
:where(body:not(.espace)) .t-card .link-arrow,
:where(body:not(.espace)) .cards>.card .link-arrow,
:where(body:not(.espace)) .q-type-txt .link-arrow{color:var(--q24-rouge);font-weight:600;text-decoration:none}
:where(body:not(.espace)) main .lien:hover,
:where(body:not(.espace)) main .text-link:hover,
:where(body:not(.espace)) section.appel .lien:hover,
:where(body:not(.espace)) .t-card .link-arrow:hover,
:where(body:not(.espace)) .cards>.card .link-arrow:hover,
:where(body:not(.espace)) .q-type-txt .link-arrow:hover{text-decoration:underline;text-underline-offset:3px}
/* Bouton « photos » d'un formulaire : sur deux lignes, les lignes ne se touchent plus */
:where(body:not(.espace)) main .photos-bloc .button{line-height:1.25!important;padding:10px 20px!important}
/* Bandeau sombre final : boutons alignés avec un vrai écart */
:where(body:not(.espace)) main>section.cta-band>.wrap:not(.q-cta){display:flex;flex-wrap:wrap;align-items:center;gap:12px}
:where(body:not(.espace)) main>section.cta-band>.wrap:not(.q-cta)>h2{flex-basis:100%}
/* Créer ma villa : boutons du bloc sombre et bouton de fermeture de la fenêtre de devis */
.cmv-page .cmv-blanc .btn-outline{background:rgba(255,255,255,.16)!important;border-color:transparent!important;color:#fff!important}
.cmv-page .cmv-blanc .btn-outline:hover{background:rgba(255,255,255,.26)!important}
.cmv-page .cmv-fermer{border-radius:50%;background:radial-gradient(circle,rgba(118,118,128,.14) 15px,transparent 16px);font-size:22px;color:var(--qa-gris)}

/* ===== 5. Formulaires : champs iOS (fond gris doux, coins de 12 px, texte 17 px : l'iPhone ne zoome plus) ===== */
:where(body:not(.espace)) .form-grid :is(input,select,textarea):where(:not([type="checkbox"],[type="radio"],[type="file"])),
:where(body:not(.espace)) form.commune-test input,
:where(body:not(.espace)) .m-fields :is(select,input),
:where(body:not(.espace)) .cmv-form :is(input,textarea):where(:not([type="checkbox"],[type="radio"])){border:1px solid transparent;border-radius:var(--qa-r-champ);background-color:var(--qa-champ);font-size:17px}
:where(body:not(.espace)) .form-grid :is(input,select):where(:not([type="checkbox"],[type="radio"],[type="file"])),
:where(body:not(.espace)) form.commune-test input,
:where(body:not(.espace)) .m-fields :is(select,input){min-height:50px}
:where(body:not(.espace)) .m-fields :is(select,input){padding:0 14px}
:where(body:not(.espace)) .form-grid :is(input,select,textarea):focus-visible,
:where(body:not(.espace)) form.commune-test input:focus-visible,
:where(body:not(.espace)) .m-fields :is(select,input):focus-visible,
:where(body:not(.espace)) .cmv-form :is(input,textarea):focus-visible{outline:2px solid var(--q24-rouge);outline-offset:0;border-color:transparent;background-color:#fff;box-shadow:0 0 0 6px rgba(158,16,34,.12)}
:where(body:not(.espace)) .form-grid label{font-weight:600}
:where(body:not(.espace)) .m-fields label{font-size:14px;font-weight:600;color:var(--qa-texte2)}
/* Estimation : tuiles de choix grises, sélection par un anneau rouge */
.estimation-page #estimate-root .subtext{max-width:62ch}
.estimation-page .work-choices{gap:12px}
.estimation-page .work-choice,.estimation-page .choix-variantes label{border:0;border-radius:var(--qa-r-encart);background:var(--qa-champ);box-shadow:none;transition:background-color .2s ease,box-shadow .2s ease}
.estimation-page .work-choice{padding:16px 18px}
.estimation-page .work-choice:hover,.estimation-page .choix-variantes label:hover{background:var(--qa-remplir-survol)}
.estimation-page .work-choice[aria-pressed="true"]{background:#fff;box-shadow:var(--qa-anneau)}
.estimation-page .choix-variantes label:has(input:checked){background:#fff;box-shadow:var(--qa-anneau)}
/* Créer ma villa : menus et champs du panneau, liste des communes */
.cmv-page .cmv-apparence select,.cmv-page .cmv-panneau select,.cmv-page .cmv-panneau input[type="text"],.cmv-page .cmv-panneau input[type="number"]{min-height:44px;border:1px solid transparent;border-radius:var(--qa-r-champ);background-color:var(--qa-champ);font-size:16px}
.cmv-page .cmv-apparence select:focus-visible,.cmv-page .cmv-panneau select:focus-visible,.cmv-page .cmv-panneau input:focus-visible{outline:2px solid var(--q24-rouge);outline-offset:1px;background-color:#fff}
.cmv-page .cmv-communes{border:0;border-radius:var(--qa-r-encart);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.cmv-page .cmv-communes li{border-radius:10px}
/* Créer ma villa : fenêtre « Recevoir mon devis » */
.cmv-page .cmv-dialogue{border-radius:var(--qa-r-carte);background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.22)}
.cmv-page .cmv-dialogue::backdrop{background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ===== 6. Images : coins arrondis réguliers, étiquettes en pastilles ===== */
/* Photos des pages site.css (prestations, conseils, articles) : 18 px partout */
:where(body:not(.espace)) .visuel{border-radius:var(--qa-r-moyen)!important}
/* Image collée au corps de sa carte : pas d'arrondi propre, c'est la carte qui arrondit */
:where(body:not(.espace)) .m-card .m-fig .m-img,
.cmv-page .cmv-modele img{border-radius:0}
/* Grande image des fiches modèles : un seul arrondi, celui du cadre */
:where(body:not(.espace)) .f-scene{border-radius:var(--qa-r-carte)}
:where(body:not(.espace)) .f-scene .f-grand{border-radius:0}
/* Modèles : image d'en-tête alignée sur le titre, jamais plus haute que l'écran */
:where(body:not(.espace)) .m-hero .m-hero-fig{width:min(var(--qa-large),calc(100% - 2 * var(--q24-marge)))}
:where(body:not(.espace)) .m-hero .m-hero-img{max-height:min(72vh,900px)}
/* Plans, vignettes, miniatures, aperçu du modèle choisi */
:where(body:not(.espace)) .f-plans-img figure img{border-radius:var(--qa-r-champ)}
:where(body:not(.espace)) .f-vig{border-radius:var(--qa-r-champ)}
:where(body:not(.espace)) .m-pick-img{border-radius:var(--qa-r-moyen)}
:where(body:not(.espace)) .q-type .q-photo{border-radius:var(--qa-r-encart)!important}
:where(body:not(.espace)) .q-type .q-photo img{border-radius:var(--qa-r-encart)}
/* Plan de principe des pages services, carte Google, maquette de téléphone */
:where(body:not(.espace)) .page-intro--plan .plan-cine{border:0;border-radius:var(--qa-r-carte);overflow:hidden;box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .carte-google iframe{border:0;border-radius:var(--qa-r-moyen)}
:where(body:not(.espace)) .appli-ecran{box-shadow:0 20px 50px rgba(0,0,0,.14)}
/* Visionneuse de Réalisations : photo arrondie, bouton « Fermer » en pastille floutée */
:where(body:not(.espace)) .q-visio img{border-radius:var(--qa-r-moyen)}
:where(body:not(.espace)) .q-visio button{border:0;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 15px var(--q24-font)}
/* Étiquettes posées sur les images (« Plain-pied », « Illustration », « Avant / Après ») : pastilles floutées, sans majuscules espacées */
:where(body:not(.espace)) .m-badge,
:where(body:not(.espace)) .q-illus,
:where(body:not(.espace)) .q-tag,
:where(body:not(.espace)) .q-badge,
:where(body:not(.espace)) .m-fig figcaption,
:where(body:not(.espace)) .m-hero-fig figcaption,
:where(body:not(.espace)) .f-scene figcaption,
:where(body:not(.espace)) .v360-leg,
:where(body:not(.espace)) .cmv-modele figcaption,
:where(body:not(.espace)) .cmv-mention-3d,
:where(body:not(.espace)) .etiquette-illu,
:where(body:not(.espace)) .photo-reelle,
:where(body:not(.espace)) .avant-apres__lbl{padding:5px 11px;border-radius:999px;font-family:var(--q24-font);font-weight:600;line-height:1.25;letter-spacing:0;text-transform:none;-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}
:where(body:not(.espace)) .m-badge,
:where(body:not(.espace)) .q-illus,
:where(body:not(.espace)) .q-tag,
:where(body:not(.espace)) .q-badge,
:where(body:not(.espace)) .m-fig figcaption,
:where(body:not(.espace)) .m-hero-fig figcaption,
:where(body:not(.espace)) .cmv-modele figcaption,
:where(body:not(.espace)) .cmv-mention-3d,
:where(body:not(.espace)) .etiquette-illu,
:where(body:not(.espace)) .photo-reelle,
:where(body:not(.espace)) .avant-apres__lbl{font-size:12px}
:where(body:not(.espace)) .illustration{border-radius:999px!important}
:where(body:not(.espace)) .m-hero-fig figcaption{right:16px;bottom:14px}
.cmv-page .cmv-modele figcaption{right:10px;bottom:10px}

/* ===== 7. Grilles sur iMac : des rangées pleines, pas de trous, pas de lignes trop longues ===== */
@media (min-width:1280px){
  :where(body:not(.espace)) .m-models .m-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  :where(body:not(.espace)) .t-fam .t-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1100px){.cmv-page .cmv-modeles{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
:where(body:not(.espace)) .appli-points ul{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media (min-width:981px){
  :where(body:not(.espace)) .wrap.two{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  /* 17/10 : plus de limite à 720 px, la liste va jusqu'au bord droit du contenu (la colonne 7fr limite déjà la largeur) */
  :where(body:not(.espace)) .wrap.two>.steps,
  :where(body:not(.espace)) .wrap.two>.promises{max-width:none}
}
@media (min-width:1024px){
  /* chaque tableau de surfaces reste sous son plan (mêmes colonnes que .f-plans-img) */
  :where(body:not(.espace)) .f-tableau{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px 18px}
  :where(body:not(.espace)) .f-tableau>.f-niv{max-width:440px}
  :where(body:not(.espace)) .f-scene .f-grand{max-height:max(440px,calc(100vh - 210px))}
}
/* Haut des fiches modèles : le même air que les autres pages */
:where(body:not(.espace)) .f-tete{padding:clamp(28px,6vw,96px) 0 clamp(18px,2.5vw,36px)}

/* ===== 8. Typographie : titres à la taille de leur carte, étiquettes sans capitales, lignes de 65 à 75 caractères ===== */
/* Intertitres d'article et de texte légal : 22 à 30 px (au lieu de 54) */
:where(body:not(.espace)) .article__texte h2,
:where(body:not(.espace)) .texte-legal h2{margin-top:clamp(32px,4vw,44px);font-size:clamp(22px,2.2vw,30px)!important;line-height:1.2!important;letter-spacing:-.02em!important}
/* Titres des panneaux : 22 à 28 px */
:where(body:not(.espace)) .formulaire h2,
:where(body:not(.espace)) .contact-info h2,
:where(body:not(.espace)) .a-retenir h2,
:where(body:not(.espace)) #estimate-root h2{font-size:clamp(22px,2vw,28px)!important;line-height:1.2!important;letter-spacing:-.02em!important}
:where(body:not(.espace)) .rappel h3{font-size:clamp(22px,2vw,28px);line-height:1.2!important;letter-spacing:-.02em!important}
/* Titres des petites cartes : 20 à 24 px */
:where(body:not(.espace)) .estimate-help h2,
:where(body:not(.espace)) .installer-carte h2{font-size:21px!important;line-height:1.2!important;letter-spacing:-.02em!important}
:where(body:not(.espace)) .perspectives--conseils h2{font-size:clamp(20px,1.6vw,24px)!important;line-height:1.2!important;letter-spacing:-.015em!important}
.cmv-page .cmv-modele h3{font-size:22px}
.cmv-page .cmv-form h2{font-size:24px!important;line-height:1.15!important;letter-spacing:-.025em!important}
.cmv-page .dv-titre{font-size:22px!important;line-height:1.15!important;letter-spacing:-.02em!important}
/* Étiquettes : 13 px demi-gras gris, sans majuscules espacées (le texte HTML ne change pas) */
:where(body:not(.espace)) .horaires dt,
:where(body:not(.espace)) .bloc-form legend,
:where(body:not(.espace)) .price-result>span:not(.ttc),
:where(body:not(.espace)) .t-from,
.cmv-page .cmv-fs legend,
.cmv-page .cmv-prix-lib{font-family:var(--q24-font);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--qa-gris)}
.cmv-page .cmv-selection h3,.cmv-page .cmv-liste h3{font-family:var(--q24-font);font-size:13px;font-weight:600;letter-spacing:0!important;text-transform:none;color:var(--qa-gris)}
/* Étiquettes qui servent de surtitre : rouge, 15 px, comme les surtitres de q24-unifie */
:where(body:not(.espace)) .step-pill,
:where(body:not(.espace)) .q-role,
.cmv-page .cmv-chargement-etat{font-family:var(--q24-font);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--q24-rouge)}
/* Bandeau sombre (Équipe, Réalisations) : surtitre rose clair lisible sur le noir (le rouge donnait 2,3:1) */
:where(body:not(.espace)) .cta-band .q-cta .eyebrow{color:#ff7a73!important}
/* Gris secondaire lisible (#636366 : plus de 5:1 sur l'ivoire comme sur le sable) */
:where(body:not(.espace)) .fine,
:where(body:not(.espace)) .contact-info .note,
:where(body:not(.espace)) .communes-liste--km span,
:where(body:not(.espace)) .form-grid small,
:where(body:not(.espace)) .comparatif tbody th{color:var(--qa-gris)}
/* Montants en gras serré ; textes des cartes à 15-16 px */
:where(body:not(.espace)) .t-price strong,
:where(body:not(.espace)) .m-pricebox .t-price strong{font-weight:700;letter-spacing:-.025em}
.cmv-page .cmv-prix strong{color:var(--q24-texte);font-weight:700;letter-spacing:-.02em}
:where(body:not(.espace)) .t-inc,
:where(body:not(.espace)) .m-text{font-size:16px;line-height:1.5}
:where(body:not(.espace)) .m-type,
:where(body:not(.espace)) .m-specs,
.cmv-page .cmv-modele p{font-size:15px}
/* Pas d'italique dans les grands titres (comme sur les pages site.css) */
:where(body:not(.espace)) .q-hero h1 em{font-style:normal}
/* Longueur de ligne : 65 à 75 caractères */
:where(body:not(.espace)) .ville-contexte .prose,
:where(body:not(.espace)) .demarches .demarches__liste,
:where(body:not(.espace)) .section .texte-legal>*{max-width:var(--qa-ligne)}
/* Articles (17/10) : seul le texte reste à 600 px ; le tableau et les seuils prennent la largeur de la photo et de « À retenir » */
:where(body:not(.espace)) .article .article__texte{max-width:none}
:where(body:not(.espace)) .article .article__texte>:not(.tableau-defile,.seuils,.checklist){max-width:var(--qa-ligne)}

/* ===== 9. Pied de page (iPhone) : liens sur deux colonnes, 40 px de haut pour le doigt ===== */
@media (max-width:820px){
  body:not(.espace) .site-footer .footer-grid{gap:22px!important}
  body:not(.espace) .site-footer .footer-grid>div:nth-child(n+3) .footer-liens{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:0}
  body:not(.espace) .site-footer .footer-liens a{display:flex;align-items:center;min-height:40px;font-size:15px!important}
  body:not(.espace) .site-footer .footer-bas a{display:inline-flex;align-items:center;min-height:36px}
  /* 17/10 : « QUALITE24 · Gières, Isère » (un span) restait en haut de la rangée, 8 px au-dessus des liens */
  :where(body:not(.espace)) .site-footer .footer-bas{align-items:center}
}

/* ===== 10. iPhone et petits écrans ===== */
@media (max-width:820px){
  /* en-tête de 56 px (barre de navigation iOS), logo de 40 px ; barre d'onglets de 56 px + la marge de l'iPhone */
  body:not(.espace){--header-h:56px;--entete:56px;--qa-tabbar-h:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:calc(var(--qa-tabbar-h) + 12px)}
  :where(body:not(.espace)) .site-header{height:56px!important;min-height:56px!important}
  :where(body:not(.espace)) .site-header .brand,
  :where(body:not(.espace)) .site-header .site-logo{height:40px}
  :where(body:not(.espace)) .site-header .brand-logo,
  :where(body:not(.espace)) .site-header .site-logo img{height:40px!important}
  /* pastille « Compte » : 36 px à l'œil, 44 px de zone de toucher (17/10 : elle était tombée à 34 px) */
  :where(body:not(.espace)) .q24-compte{position:relative;height:36px;padding:0 14px;font-size:15px}
  :where(body:not(.espace)) .q24-compte::after{content:"";position:absolute;inset:-4px -2px}
  /* barre d'onglets : icônes au trait façon SF Symbols (Accueil, Modèles, Devis, Contact, Compte), séparateur fin */
  :where(body:not(.espace)) .q24-tabbar{height:var(--qa-tabbar-h);padding:6px 4px max(4px,env(safe-area-inset-bottom,0px));align-items:stretch;background:var(--qa-barre);border-top:.5px solid rgba(60,60,67,.29)}
  :where(body:not(.espace)) .q24-tabbar a{justify-content:flex-start;gap:3px;padding-top:2px;font-size:11px}
  :where(body:not(.espace)) .q24-tabbar a::before{width:26px;height:26px;border-radius:0;background:currentColor;-webkit-mask:var(--qa-ico) center/26px 26px no-repeat;mask:var(--qa-ico) center/26px 26px no-repeat}
  :where(body:not(.espace)) .q24-tabbar a:nth-child(1){--qa-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E")}
  :where(body:not(.espace)) .q24-tabbar a:nth-child(2){--qa-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='2'/%3E%3C/svg%3E")}
  :where(body:not(.espace)) .q24-tabbar a:nth-child(3){--qa-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v12.5H7z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3Cpath d='M9.5 12.5h6M9.5 16h6'/%3E%3C/svg%3E")}
  :where(body:not(.espace)) .q24-tabbar a:nth-child(4){--qa-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1 11.5h-11z'/%3E%3Cpath d='M9 10.5V7a3 3 0 0 1 6 0v3.5'/%3E%3C/svg%3E")}
  :where(body:not(.espace)) .q24-tabbar a:nth-child(5){--qa-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M6.6 18.3c1.2-1.9 3.1-2.9 5.4-2.9s4.2 1 5.4 2.9'/%3E%3C/svg%3E")}
  /* moins de vide entre deux blocs (144 px avant) */
  :where(body:not(.espace)) main .section{padding-block:52px}
  :where(body:not(.espace)) main .section-head{margin-bottom:24px}
  /* « Accès direct » : la rangée défile jusqu'au bord de l'écran */
  :where(body:not(.espace)) nav.sauts .container{width:100%!important}
  :where(body:not(.espace)) nav.sauts ul{padding-inline:var(--q24-marge);scroll-padding-inline:var(--q24-marge)}
  /* L'appli : maquette de téléphone réduite, « Ce que vous y trouvez » en une liste groupée */
  :where(body:not(.espace)) .appli-figure{width:min(210px,58%)}
  :where(body:not(.espace)) .appli-hero .wrap{gap:28px}
  :where(body:not(.espace)) .appli-points ul{gap:0;background:#fff;border-radius:var(--qa-r-carte);overflow:hidden;box-shadow:var(--qa-ombre)}
  :where(body:not(.espace)) .appli-points li{border-radius:0;background:transparent;padding:16px 18px;box-shadow:none}
  :where(body:not(.espace)) .appli-points li+li{box-shadow:inset 0 .5px 0 var(--qa-sep)}
  :where(body:not(.espace)) .appli-points strong{font-size:17px;margin-bottom:2px}
  /* Créer ma villa : la barre de prix se pose au-dessus de la barre d'onglets (elle était cachée dessous) */
  body.cmv-page .cmv-prix{bottom:var(--qa-tabbar-h,72px);padding:10px 0}
  body.cmv-page .cmv-prix strong{font-size:20px;white-space:nowrap}
  body.cmv-page .cmv-prix .btn{min-height:44px!important;padding:0 16px!important;font-size:15px!important}
}
@media (max-width:760px){
  :where(body:not(.espace)) .q-membre{padding:8px 8px 14px}
  /* Modèles : filtres sur une rangée qui défile, boutons d'en-tête de même largeur, image d'en-tête arrondie en retrait */
  :where(body:not(.espace)) .m-filters .m-seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:calc(100% + 2 * var(--q24-marge));margin-inline:calc(-1 * var(--q24-marge));padding:2px var(--q24-marge)}
  :where(body:not(.espace)) .m-filters .m-seg::-webkit-scrollbar{display:none}
  :where(body:not(.espace)) .m-chip{flex:none}
  :where(body:not(.espace)) .m-hero-cta .btn{flex:1 1 auto}
  :where(body:not(.espace)) .m-hero .m-hero-img{border-radius:var(--qa-r-moyen)!important}
  /* Fiches modèles : vignettes qui défilent jusqu'au bord, bouton principal pleine largeur */
  :where(body:not(.espace)) .f-scene{border-radius:var(--qa-r-moyen)}
  :where(body:not(.espace)) .f-vignettes{grid-auto-columns:104px;margin-inline:calc(-1 * var(--q24-marge));padding:0 var(--q24-marge) 6px;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:var(--q24-marge)}
  :where(body:not(.espace)) .f-vignettes::-webkit-scrollbar{display:none}
  :where(body:not(.espace)) .f-vignettes li{scroll-snap-align:start}
  :where(body:not(.espace)) .f-prix .btn{width:100%}
  /* Créer ma villa : modèles en rangée horizontale aimantée, barre d'outils sur une seule ligne */
  .cmv-page .cmv-modeles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--q24-marge));padding:4px var(--q24-marge) 18px;scroll-padding-inline:var(--q24-marge);scrollbar-width:none;overscroll-behavior-x:contain}
  .cmv-page .cmv-modeles::-webkit-scrollbar{display:none}
  .cmv-page .cmv-modele{scroll-snap-align:start}
  .cmv-page .cmv-barre{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cmv-page .cmv-barre::-webkit-scrollbar{display:none}
  .cmv-page .cmv-niveaux,.cmv-page .cmv-outils{flex:none;flex-wrap:nowrap}
  .cmv-page .cmv-ajout{flex:none}
  /* Estimation : simulateur plus compact, « Quels travaux ? » en liste groupée avec chevrons (comme Réglages) */
  .estimation-page .estimate-work{padding:22px 16px;border-radius:var(--qa-r-carte)}
  .estimation-page .work-choices{gap:0;border-radius:var(--qa-r-encart);overflow:hidden;background:var(--qa-champ)}
  .estimation-page .work-choice{position:relative;min-height:64px;padding:13px 40px 13px 16px;border-radius:0;background:transparent}
  .estimation-page .work-choice:hover{background:rgba(118,118,128,.06)}
  .estimation-page .work-choice::after{content:"\203A";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;color:var(--qa-pale)}
  .estimation-page .work-choice+.work-choice{box-shadow:inset 0 .5px 0 var(--qa-sep)}
  .estimation-page .work-choice[aria-pressed="true"]{background:#fff;box-shadow:inset 0 0 0 2px var(--q24-rouge)}
}
/* Créer ma villa : la fenêtre de devis devient une feuille qui monte du bas */
@media (max-width:600px){
  .cmv-page .cmv-dialogue{width:100%;max-width:100%;margin:auto 0 0;max-height:92svh;border-radius:var(--qa-r-carte) var(--qa-r-carte) 0 0}
  .cmv-page .cmv-form{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}

/* ===== 11. Page « Nos applis » (nos-applis.html) ===== */
.na-section{padding:clamp(8px,2vw,24px) 0 clamp(44px,6vw,88px)}
.na-section h2{margin:0 0 12px}
.na-intro{margin:0 0 24px;max-width:60ch;font-size:17px;line-height:1.55;color:var(--qa-texte2)}
/* l'appli client mise en avant : icône, nom, ce qu'on y fait, boutons ; à droite (iMac) ce que l'on y trouve */
.na-vedette{display:grid;gap:clamp(24px,4vw,56px);padding:clamp(22px,4vw,56px);background:#fff;border-radius:var(--qa-r-bloc);box-shadow:var(--qa-ombre)}
.na-vedette-tete{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:start}
.na-icone{display:block;width:60px;height:60px;border-radius:22.5%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.1)}
.na-icone--grande{width:clamp(88px,9vw,128px);height:clamp(88px,9vw,128px)}
.na-vedette .eyebrow{margin:0}
.na-vedette h2{margin:4px 0 10px;font-size:clamp(28px,2.8vw,38px)!important;line-height:1.08!important;letter-spacing:-.03em!important}
.na-sous{margin:0;max-width:44ch;font-size:17px;line-height:1.5;color:var(--qa-texte2)}
.na-badges{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.na-badges li{padding:5px 11px;border-radius:999px;background:var(--qa-sable);color:var(--qa-gris);font:600 13px/1.3 var(--q24-font)}
.na-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.na-points-titre{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--qa-gris)}
.na-points{display:grid;margin:0;padding:0;list-style:none}
.na-points li{position:relative;padding:14px 0 14px 40px}
.na-points li+li{border-top:.5px solid var(--qa-sep)}
.na-points li::before{content:"";position:absolute;left:0;top:15px;width:24px;height:24px;border-radius:50%;background:#f6e3e5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e1022' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5 18 8'/%3E%3C/svg%3E") center/14px no-repeat}
.na-points strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--q24-texte)}
.na-points span{display:block;margin-top:2px;font-size:15px;line-height:1.5;color:var(--qa-texte2)}
@media (min-width:981px){.na-vedette{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}}
/* encadré « Gratuites, sans App Store » */
.na-encadre{display:flex;align-items:center;gap:18px;margin-top:16px;padding:20px clamp(20px,3vw,28px);background:var(--qa-teinte);border-radius:var(--qa-r-carte)}
.na-encadre-ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--q24-rouge);color:#fff}
.na-encadre-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.na-encadre h2{margin:0 0 4px;font-size:clamp(19px,1.6vw,22px)!important;line-height:1.25!important;letter-spacing:-.02em!important}
.na-encadre p{margin:0;max-width:70ch;font-size:16px;line-height:1.5;color:var(--qa-texte2)}
/* guides d'installation : contrôle segmenté (section 2) ; sans script, les trois guides restent affichés côte à côte */
/* 17/10 : le contrôle segmenté et le guide ont la même largeur (640 px), leurs bords droits tombent l'un sous l'autre */
.na-seg{width:min(100%,640px);margin:0 0 20px}
.na-panneaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.na-guides--onglets .na-panneaux{grid-template-columns:minmax(0,1fr)}
.na-guide{max-width:640px;padding:24px clamp(20px,3vw,32px);background:#fff;border-radius:var(--qa-r-carte);box-shadow:var(--qa-ombre)}
.na-guide:focus-visible{outline:2px solid var(--q24-rouge);outline-offset:3px}
.na-guide h3{margin:0 0 16px;font-size:clamp(19px,1.6vw,22px)}
.na-etapes{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:na}
.na-etapes li{position:relative;min-height:30px;padding-left:44px;font-size:17px;line-height:1.5;counter-increment:na}
.na-etapes li::before{content:counter(na);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--q24-rouge);color:#fff;font:700 15px/30px var(--q24-font);text-align:center}
.na-etapes strong{font-weight:600;color:var(--q24-texte)}
.na-etapes a,.na-note a{color:var(--q24-rouge);font-weight:600;text-decoration:none}
.na-etapes a:hover,.na-note a:hover{text-decoration:underline;text-underline-offset:3px}
.na-note{margin:16px 0 0;max-width:70ch;font-size:15px;line-height:1.5;color:var(--qa-gris)}
/* applis de l'équipe : tuiles sur iMac, liste groupée façon App Store sur iPhone */
.na-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin:0;padding:0;list-style:none}
.na-liste li{display:flex;min-width:0}
.na-ligne{position:relative;flex:1;display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;background:#fff;border-radius:var(--qa-r-carte);box-shadow:var(--qa-ombre);color:var(--q24-texte);text-decoration:none;transition:box-shadow .2s ease}
.na-ligne:hover{box-shadow:var(--qa-ombre-survol)}
.na-ligne:focus-visible{outline:2px solid var(--q24-rouge);outline-offset:3px}
.na-ligne-txt{display:grid;gap:2px;min-width:0}
.na-ligne-txt strong{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--q24-texte)}
.na-ligne-txt span{font-size:15px;line-height:1.4;color:var(--qa-gris)}
.na-chevron{font-size:24px;line-height:1;color:var(--qa-pale)}
@media (max-width:760px){
  /* en-tête de la carte façon App Store : icône à côté du nom, le reste sur toute la largeur */
  .na-vedette{padding:22px 18px}
  .na-vedette-tete{grid-template-columns:72px minmax(0,1fr);column-gap:14px;row-gap:0;align-items:center}
  .na-vedette-tete>div{display:contents}
  .na-icone--grande{grid-row:1 / span 2;align-self:start;width:72px;height:72px}
  .na-vedette .eyebrow{grid-column:2;align-self:end}
  .na-vedette h2{grid-column:2;align-self:start;margin:2px 0 0;font-size:24px!important}
  .na-sous,.na-badges,.na-actions{grid-column:1 / -1}
  .na-sous{margin-top:16px}
  .na-actions .btn{flex:1 1 auto}
  .na-encadre{align-items:flex-start;gap:14px;padding:18px}
  .na-encadre-ico{width:40px;height:40px}
  .na-encadre-ico svg{width:20px;height:20px}
  .na-guide{padding:20px 18px}
  .na-liste{gap:0;background:#fff;border-radius:var(--qa-r-carte);overflow:hidden;box-shadow:var(--qa-ombre)}
  .na-ligne{padding:12px 16px;border-radius:0;box-shadow:none}
  .na-ligne:hover{box-shadow:none;background:#faf8f4}
  .na-ligne:focus-visible{outline-offset:-2px}
  .na-liste li+li .na-ligne::before{content:"";position:absolute;top:0;right:0;left:90px;border-top:.5px solid var(--qa-sep)}
}

/* ===== 12. Impression et mouvements réduits ===== */
@media print{
  .estimation-page .estimate-work{box-shadow:none;border-radius:0}
  :where(body:not(.espace)) main .price-result{background:#fff;border:2px solid #000}
  :where(body:not(.espace)) .price-result>span:not(.ttc){color:#000}
  .cmv-page .dv-titre{font-size:15pt!important}
}
@media (prefers-reduced-motion:reduce){
  .cmv-page .cmv-modele,.na-ligne,.na-seg a,.cmv-page .cmv-onglets button,.estimation-page .work-choice,.estimation-page .choix-variantes label,:where(body:not(.espace)) .f-autres-liste a{transition:none}
  :where(body:not(.espace)) :is(.section.faq,.m-faq) summary::after{transition:none}
  .cmv-page .cmv-modele:hover{transform:none}
}

/* ===== 13. Corrections après la relecture visuelle avant / après (17/10/2026) ===== */
/* Tarifs : le texte des cartes n'est plus rogné aux coins (q24-unifie arrondissait et coupait le paragraphe lui-même) */
:where(body:not(.espace)) .t-card .t-inc{border-radius:0!important;overflow:visible!important}
/* Fiches modèles (iMac) : moins de vide crème entre les sections ; un plan seul ne prend plus toute la largeur */
:where(body:not(.espace)) main>section.block:is(.f-plans,.t-notes,.f-autres){padding-block:clamp(36px,4.5vw,64px)}
:where(body:not(.espace)) .f-plans-img:has(>figure:only-child){grid-template-columns:minmax(0,760px)}
/* Modèles (iMac) : « 100 m² habitables · garage 17 m² » ne laisse plus « m² » seul en bout de ligne ; menus de l'estimateur lisibles en entier */
:where(body:not(.espace)) .m-type{text-wrap:pretty}
@media (min-width:1280px){:where(body:not(.espace)) .m-models .m-type{font-size:14px}}
@media (min-width:821px){:where(body:not(.espace)) .m-fields :is(select,input){font-size:15px}}
@media (max-width:820px){
  /* Garanties des pages villes et « construire » : « Déplacement offert » tient dans sa carte */
  :where(body:not(.espace)) section.garanties .garantie{padding:18px 16px}
  :where(body:not(.espace)) section.garanties .garantie strong{font-size:20px;line-height:1.15;letter-spacing:-.01em}
  :where(body:not(.espace)) section.garanties .garantie>span{font-size:14px}
}
@media (max-width:760px){
  /* Fiches modèles : « Les autres modèles » en rangée qui défile (au lieu de 11 grandes cartes empilées) */
  :where(body:not(.espace)) .f-autres-liste{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--q24-marge));padding:4px var(--q24-marge) 18px;scroll-padding-inline:var(--q24-marge);scrollbar-width:none;overscroll-behavior-x:contain}
  :where(body:not(.espace)) .f-autres-liste::-webkit-scrollbar{display:none}
  :where(body:not(.espace)) .f-autres-liste>*{scroll-snap-align:start}
  /* Réalisations : sur les petites vignettes, l'étiquette « Illustration » reste petite et sur une ligne */
  :where(body:not(.espace)) .q-type-imgs .q-photo:not(:first-child) .q-illus{top:6px;right:6px;max-width:calc(100% - 12px);padding:3px 8px;font-size:10px;line-height:1.15;border-radius:10px}
  :where(body:not(.espace)) .q-photo-leg{line-height:1.3}
}
@media (max-width:600px){
  /* Conseils : le tableau comparatif tient dans l'écran (les deux colonnes visibles, sans défilement caché) */
  :where(body:not(.espace)) .tableau-defile{padding:4px 12px}
  :where(body:not(.espace)) .comparatif{min-width:0;width:100%;table-layout:fixed;font-size:15px}
  :where(body:not(.espace)) .comparatif :is(th,td){padding:10px 6px;overflow-wrap:break-word}
}
@media (max-width:420px){
  /* Bandeau final des fiches : le titre ne coupe plus « Faites-le » en deux */
  :where(body:not(.espace)) main>section.cta-band>.wrap>h2{font-size:26px!important;letter-spacing:-.03em!important}
}

/* ===== 14. Finitions après relecture (17/10/2026) ===== */
/* Pied de page : dernière ligne lisible (#636366 = 5,4:1 sur le crème au lieu de 3,2:1), survol toujours rouge.
   « footer.site-footer » a la même force que « body .site-footer » de q24-unifie ; cette feuille venant après, elle l'emporte. */
:where(body:not(.espace)) footer.site-footer .footer-bas,
:where(body:not(.espace)) footer.site-footer .footer-bas a,
:where(body:not(.espace)) footer.site-footer .footer-bas span{color:var(--qa-gris)!important}
:where(body:not(.espace)) footer.site-footer .footer-bas a:hover{color:var(--q24-rouge)!important}
@media (max-width:820px){
  /* Coordonnées : l'adresse et les horaires à la même taille et au même pas que l'e-mail */
  :where(body:not(.espace)) footer.site-footer .footer-liens span{display:flex;align-items:center;min-height:40px;font-size:15px!important}
}

/* Bandeau final « Parlons de votre projet » : écart normal entre le texte et les boutons */
@media (max-width:1024px){
  :where(body:not(.espace)) section.appel>.container{row-gap:28px}
  :where(body:not(.espace)) section.appel .appel__actions{margin-top:0}
}
@media (max-width:820px){
  /* iPhone : boutons pleine largeur, l'un sous l'autre, comme en haut de page */
  :where(body:not(.espace)) section.appel{padding-block:44px}
  :where(body:not(.espace)) section.appel>.container{row-gap:24px}
  :where(body:not(.espace)) section.appel .appel__actions{flex-direction:column;align-items:stretch}
}
@media (min-width:1025px){
  /* iMac : boutons centrés sur la hauteur du texte et calés à droite du bandeau */
  :where(body:not(.espace)) section.appel>.container{align-items:center}
  :where(body:not(.espace)) section.appel .appel__actions{justify-content:flex-end;margin-top:0}
}

/* Plans de principe (pages services) : une marge intérieure garde les repères d'angle entiers sous l'arrondi de 22 px */
@media (max-width:1024px){
  :where(body:not(.espace)) .page-intro--plan .plan-cine{padding:clamp(6px,1.6vw,10px)}
}

/* Surtitres de Réalisations et Équipe : rouges comme ailleurs (q24-unifie les forçait en gris par « .block p ») */
:where(body:not(.espace)) .block p:is(.eyebrow,.q-role){color:var(--q24-rouge)!important}

/* Contact, Parrainage, Confidentialité, Mentions légales : plus de bande sable autour du formulaire ou du texte
   (carte dans une carte et champs étroits sur iPhone, colonne de 600 px perdue dans une carte de 1 440 px sur iMac,
   deux bandes sable de suite). Le contenu s'aligne sur la colonne du reste de la page. */
:where(body:not(.espace)) main .section.section--beton:is(:has(.formulaire),:has(>.texte-legal)){width:min(var(--qa-large),calc(100% - 2 * var(--q24-marge)));background:transparent!important;border-radius:0;padding-block:clamp(12px,2.5vw,32px) clamp(16px,3vw,40px)}
:where(body:not(.espace)) main .section.section--beton:is(:has(.formulaire),:has(>.texte-legal))>.container{width:100%!important}
/* Parrainage : « Votre proche » sans trait, comme « Vous » */
:where(body:not(.espace)) main .formulaire .bloc-form+.bloc-form{border-top:0;padding-top:8px}
/* Contact : champ « Photos et pièces utiles » au style des autres champs, bouton en pastille */
:where(body:not(.espace)) .form-grid .upload-zone input{border:1.5px dashed var(--qa-sep);border-radius:var(--qa-r-champ);background:var(--qa-champ)}
:where(body:not(.espace)) .form-grid input[type="file"]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:999px;background:#fff;box-shadow:var(--qa-ombre-segment);font:600 15px var(--q24-font);color:var(--q24-texte);cursor:pointer}

/* Fil d'Ariane : le « / » finit la ligne au lieu de commencer la suivante */
:where(body:not(.espace)) .fil li+li::before{content:none}
:where(body:not(.espace)) .fil li:not(:last-child)::after{content:"/";margin:0 10px;color:var(--trait-2)}

/* Fiches modèles */
:where(body:not(.espace)) .f-plans .m-head{margin-bottom:clamp(16px,2vw,28px)}
:where(body:not(.espace)) .f-plans-img figure{background:#fffdf9}  /* même fond que le plan : plus de cadre dans le cadre */
@media (min-width:821px){:where(body:not(.espace)) .f-prix{max-width:440px}}  /* « hors terrain » sur la même ligne */
@media (min-width:761px){
  /* « Les autres modèles » : le nom sur sa ligne, les mesures dessous, toutes les cartes de même hauteur */
  :where(body:not(.espace)) .f-autres-liste a{height:100%}
  :where(body:not(.espace)) .f-autres-liste strong{display:block;margin:0 0 2px}
}
@media (max-width:760px){
  :where(body:not(.espace)) .f-nav{width:44px;height:44px}
  :where(body:not(.espace)) .f-specs{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));column-gap:28px}
  :where(body:not(.espace)) .f-plans-img figure{padding:6px 6px 12px}
  :where(body:not(.espace)) .f-plans-img figcaption{padding:8px 10px 0}
}

/* Modèles : boutons d'en-tête détachés du texte, raccourcis détachés de la photo, ponctuation jamais seule en début de ligne */
:where(body:not(.espace)) .m-hero .m-hero-text>p.m-hero-cta{margin-top:clamp(20px,2vw,28px)}
:where(body:not(.espace)) .m-hero+.t-nav{margin-top:clamp(12px,2vw,20px)}
:where(body:not(.espace)) .m-faq summary,
:where(body:not(.espace)) .m-text,
:where(body:not(.espace)) .m-result{text-wrap:pretty}
@media (min-width:981px){
  /* « Les étapes » et les questions : titre à gauche, liste à droite, comme « Comment lire cette estimation » */
  :where(body:not(.espace)) #etapes>.wrap:has(>.m-steps),
  :where(body:not(.espace)) .m-faq>.wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,6vw,88px);row-gap:0;align-items:start}
  :where(body:not(.espace)) #etapes>.wrap:has(>.m-steps)>h2{grid-column:1;grid-row:1}
  :where(body:not(.espace)) .m-faq>.wrap>h2{grid-column:1;grid-row:1 / span 6}
  :where(body:not(.espace)) #etapes>.wrap>.m-steps,
  :where(body:not(.espace)) .m-faq>.wrap>details{grid-column:2;max-width:none}
}
/* Créer ma villa : « garage 16 m² » ne se coupe plus en deux sur les cartes */
.cmv-page .cmv-modele p{text-wrap:wrap}   /* « · » en fin de ligne, « garage 15 m² » entier dessous (espaces insécables dans le HTML) */
@media (min-width:1100px){.cmv-page .cmv-modele p{font-size:14px}}

/* Villes et « construire » (iMac) : titres des 4 garanties à la taille de leur carte */
@media (min-width:821px){:where(body:not(.espace)) section.garanties .garantie strong{font-size:clamp(22px,1.9vw,28px);letter-spacing:-.02em}}

/* Prestations et pages services : titres de carte plus petits que celui de la page ; « En savoir plus » aligné et touchable */
:where(body:not(.espace)) main .service h2{font-size:clamp(30px,3vw,44px)!important;line-height:1.08!important}
@media (min-width:761px){
  :where(body:not(.espace)) main .service .button{vertical-align:top}
  :where(body:not(.espace)) main .service .lien--detail{display:inline-flex;align-items:center;min-height:50px;vertical-align:top}
}
@media (max-width:760px){
  :where(body:not(.espace)) main .service .lien--detail{display:flex;align-items:center;min-height:44px;margin-top:8px}
}

/* Estimation : pas de trait ni de vide sous « Quels travaux ? » tant qu'il n'y a aucun bouton */
.estimation-page .estimate-nav:not(:has(button,a)){display:none}

/* Équipe et Réalisations (iPhone) : la fiche seule est centrée ; moins de vide crème entre deux blocs (64 → 52 px, comme les autres pages) */
@media (max-width:760px){:where(body:not(.espace)) .q-membres-peu{justify-content:center}}
@media (max-width:820px){:where(body:not(.espace)) main>section.block:not(.t-notes,.f-plans,.f-autres,.m-est,.cmv-depart){padding-block:52px}}

/* Conseils : moins de vide entre l'en-tête et la photo ou les cartes ; liens du texte au style du site */
:where(body:not(.espace)) main>.article-grille{padding-top:clamp(8px,2vw,24px)}
:where(body:not(.espace)) main>.page-intro+.section:has(.perspectives--conseils){padding-top:clamp(8px,2vw,32px)}
:where(body:not(.espace)) .article__texte a{color:var(--q24-rouge);font-weight:600;text-decoration:none}
:where(body:not(.espace)) .article__texte a:hover{text-decoration:underline;text-underline-offset:3px}
/* « Autres conseils » : une liste de liens avec chevron, comme les listes iOS du site */
:where(body:not(.espace)) .article-aside__autres li{border-top:.5px solid var(--qa-sep)}
:where(body:not(.espace)) .article-aside__autres a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 0;font:500 17px/1.35 var(--q24-font);color:var(--q24-texte)}
:where(body:not(.espace)) .article-aside__autres a::after{content:"\203A";flex:none;font:400 24px/1 var(--q24-font);color:var(--qa-pale)}
/* Liste à cocher et seuils : dans une carte blanche, comme le tableau comparatif ; coche en pastille rose comme les engagements */
:where(body:not(.espace)) .article .seuils,
:where(body:not(.espace)) .article .checklist{padding:2px 20px;background:#fff;border-radius:var(--qa-r-moyen);box-shadow:var(--qa-ombre)}
:where(body:not(.espace)) .article .seuils div,
:where(body:not(.espace)) .article .checklist li{border-top:.5px solid var(--qa-sep)}
:where(body:not(.espace)) .article .seuils div:first-child,
:where(body:not(.espace)) .article .checklist li:first-child{border-top:0}
:where(body:not(.espace)) .article .seuils div:last-child{border-bottom:0}
:where(body:not(.espace)) .article .checklist li{padding-left:36px}
:where(body:not(.espace)) .article .checklist li::before{content:"";left:0;top:12px;width:22px;height:22px;border-radius:50%;background:#f6e3e5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e1022' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5 18 8'/%3E%3C/svg%3E") center/14px no-repeat}

/* L'appli (telecharger-appli.html) : étapes en pastilles rouges numérotées et liens rouges, comme sur Nos applis */
:where(body:not(.espace)) .installer-carte ol{list-style:none;padding-left:0;counter-reset:ic;gap:12px}
:where(body:not(.espace)) .installer-carte ol>li{position:relative;min-height:28px;padding-left:40px;counter-increment:ic}
:where(body:not(.espace)) .installer-carte ol>li::before{content:counter(ic);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--q24-rouge);color:#fff;font:700 14px/28px var(--q24-font);text-align:center}
:where(body:not(.espace)) :is(.installer-carte,.appli-note) a{color:var(--q24-rouge);font-weight:600;text-decoration:none}
:where(body:not(.espace)) :is(.installer-carte,.appli-note) a:hover{text-decoration:underline;text-underline-offset:3px}
/* Nos applis (iMac) : 7 applis de l'équipe, la dernière rangée est centrée au lieu de laisser un trou à droite */
@media (min-width:1280px){
  .na-liste{display:flex;flex-wrap:wrap;justify-content:center}
  .na-liste li{flex:0 1 calc((100% - 48px) / 4)}
}

/* ===== 15. Deuxième relecture (17/10/2026) ===== */
/* Modèles (iMac) : le menu « Chauffage » prend la case libre à sa droite et se lit en entier */
@media (min-width:1100px){:where(body:not(.espace)) .m-fields label:has(>select[name="chauffage"]){grid-column:span 2}}
/* Modèles : l'icône reste collée à son mot (« ⌂ garage 15 m² » ne se sépare plus ; groupe .m-nw dans modeles.html) */
:where(body:not(.espace)) .m-type .m-nw{white-space:nowrap}
/* Fiches de plain-pied (iMac) : un seul plan à gauche, son tableau à droite (plus de grand vide) */
@media (min-width:1024px){
  :where(body:not(.espace)) .f-plans>.wrap:has(>.f-plans-img>figure:only-child){display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:clamp(32px,4vw,64px);align-items:start}
  :where(body:not(.espace)) .f-plans>.wrap:has(>.f-plans-img>figure:only-child)>.m-head{grid-column:1 / -1;grid-row:1}
  :where(body:not(.espace)) .f-plans>.wrap:has(>.f-plans-img>figure:only-child)>.f-plans-img{grid-column:1;grid-row:2 / span 4;margin:0}
  :where(body:not(.espace)) .f-plans>.wrap:has(>.f-plans-img>figure:only-child)>:not(.m-head,.f-plans-img){grid-column:2;margin-top:0}
}
/* Fiches modèles : toucher un plan l'ouvre en grand (le pincement pour zoomer marche dans Safari) ; pastille « Agrandir » */
:where(body:not(.espace)) .f-plans-img .f-plan-zoom{position:relative;display:block;border-radius:var(--qa-r-encart);cursor:zoom-in}
:where(body:not(.espace)) .f-plans-img .f-plan-zoom::after{content:"Agrandir";position:absolute;right:8px;bottom:8px;padding:5px 11px;border-radius:999px;background:rgba(29,29,31,.72);color:#fff;font:600 13px/1.2 var(--q24-font);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
:where(body:not(.espace)) .f-plans-img .f-plan-zoom:focus-visible{outline:2px solid var(--q24-rouge);outline-offset:3px}
/* Conseils : la photo remplit son cadre (l'effet d'apparition laissait une bande vide dessous) */
:where(body:not(.espace)) main .section .perspectives .visuel>img{animation:none}
/* Fins de paragraphe sans mot seul : bandeau « Parlons de votre projet », étapes d'installation */
:where(body:not(.espace)) section.appel p.chapo,
:where(body:not(.espace)) .na-etapes li,
:where(body:not(.espace)) .installer-carte ol>li{text-wrap:pretty}

/* Prestations : prix indicatifs retirés du HTML le 17/10/2026 (décision du propriétaire : pas de prix sur les pages de services). */