/* =============================================================
   MAS RENOV — design system (mas.css)
   Source de vérité du site, chargée par mu-plugins/mas-design-tokens.php.
   Ne pas redéfinir ces valeurs dans Oxygen : les réglages du builder pointent
   vers ces variables, rien n'est saisi dans ses panneaux.

   Maquette de référence : proposition 1 « Clair et structuré — cartes, icônes,
   beaucoup de repères », choisie le 04/10/2026 (design/maquette/index.html).
   Méthode reprise de KM CONSTRUCTION (km.css) : mêmes sections, mêmes leçons ; puis,
   le 23/10/2026, celle d'esthetour : le texte vit dans l'éditeur WordPress en blocs de
   base (contenu/, make accueil), Oxygen n'affiche que le contenu (sections 23 et 24).

   Toutes les classes sont préfixées mas- : aucune règle ne touche le reste de
   la page (en-tête et pied de page natifs d'Oxygen, barre d'admin…).
   ============================================================= */

/* ---------- Polices auto-hébergées (aucun appel à Google : RGPD) ---------- */
@font-face{font-family:Archivo;font-weight:600;font-style:normal;font-display:swap;
  src:url("fonts/archivo-600.woff2") format("woff2")}
@font-face{font-family:Archivo;font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/archivo-700.woff2") format("woff2")}
@font-face{font-family:Archivo;font-weight:800;font-style:normal;font-display:swap;
  src:url("fonts/archivo-800.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/source-sans-3-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-style:normal;font-display:swap;
  src:url("fonts/source-sans-3-600.woff2") format("woff2")}

/* =============================================================
   1. TOKENS — charte du 04/09/2026, style ARRONDI (révision du même jour)
   Contrastes WCAG 2.1 calculés le 04/10/2026 (design/charte/README.md).
   ============================================================= */
:root{
  --mas-nuit:#17557F;          /* commande : boutons, bandeaux — blanc dessus 7,9:1 */
  --mas-nuit-fonce:#0F3B5A;    /* bande de réassurance — blanc dessus 11,7:1 */
  --mas-accent:#2C9BD6;        /* bleu de la carte de visite : aplats, filets, puces.
                                  3,1:1 sur blanc : JAMAIS de texte avec cette couleur */
  --mas-accent-texte:#1A72A6;  /* la même teinte, foncée pour porter du texte :
                                  5,3:1 sur blanc, 4,9:1 sur sable, 4,7:1 sur #EAF4FB */
  --mas-accent-clair:#9ED2EF;  /* accent sur fond sombre : 4,9:1 sur nuit, 10,1:1 sur encre */
  --mas-accent-doux:#EAF4FB;   /* fonds de pictos et pastilles */
  --mas-encre:#10212E;         /* texte courant 16,4:1 ; fond de la section « L'entreprise » */
  --mas-encre-fonce:#0C1A24;   /* pied de page */
  --mas-gris:#5A6B78;          /* texte secondaire 5,5:1 (5,1:1 sur sable) */
  --mas-ligne:#E3E9ED;         /* bordures, séparateurs */
  --mas-sable:#F5F7F9;         /* sections alternées */
  --mas-blanc:#FFFFFF;
  /* Texte sur fond sombre (nuit, nuit foncée, encre) : blanc à 82 % = 5,9:1 sur nuit, 11,4:1 sur encre */
  --mas-sur-fonce:rgba(255,255,255,.82);
  --mas-sur-fonce-2:rgba(255,255,255,.75);    /* légendes : 5,2:1 sur nuit */
  --mas-filet-fonce:rgba(255,255,255,.55);    /* contours de boutons et de champs sur nuit : 3,6:1 */

  /* typographie */
  --mas-titre:Archivo,"Helvetica Neue",Arial,sans-serif;          /* 600 / 700 / 800 */
  --mas-texte:"Source Sans 3","Segoe UI",Arial,sans-serif;        /* 400 / 600 */
  --mas-t-xs:15px; --mas-t-s:17px; --mas-t-m:18.5px; --mas-t-l:20px;
  --mas-t-xl:clamp(26px,3.4vw,36px);   /* h2 */
  --mas-t-xxl:clamp(30px,4.1vw,44px);  /* h1 */

  /* espacements, base 4 */
  --mas-e-1:4px; --mas-e-2:8px; --mas-e-3:12px; --mas-e-4:16px; --mas-e-5:24px;
  --mas-e-6:32px; --mas-e-7:48px; --mas-e-8:64px; --mas-e-9:96px;
  --mas-section:clamp(56px,7vw,76px);

  /* formes : arrondi, ombres douces */
  --mas-rayon:12px;            /* cartes, images */
  --mas-rayon-s:8px;           /* champs, pictos */
  --mas-rayon-pilule:100px;    /* boutons, pastilles */
  --mas-ombre:0 1px 2px rgba(16,33,46,.04),0 6px 18px rgba(16,33,46,.05);
  --mas-ombre-h:0 2px 4px rgba(16,33,46,.04),0 12px 28px rgba(16,33,46,.07);
  --mas-ombre-photo:0 18px 40px rgba(0,0,0,.28);
  --mas-largeur:1140px;
}

/* =============================================================
   2. BASE (limitée aux blocs mas-)
   ============================================================= */
.mas-page{font-family:var(--mas-texte);font-size:var(--mas-t-s);line-height:1.65;color:var(--mas-encre);
  -webkit-font-smoothing:antialiased;background:var(--mas-blanc)}
.mas-page *,.mas-page *::before,.mas-page *::after{box-sizing:border-box}
.mas-section{padding:var(--mas-section) 0;position:relative}
.mas-section--sable{background:var(--mas-sable)}
.mas-section--nuit{background:var(--mas-nuit);color:#fff}
.mas-section--encre{background:var(--mas-encre);color:#fff}
.mas-wrap{width:100%;max-width:var(--mas-largeur);margin:0 auto;padding:0 clamp(16px,4vw,24px)}
/* Resets en :where() : spécificité nulle, n'importe quelle classe de composant passe devant
   (leçon KM : `.km-page ul{margin:0}` en (0,1,1) écrasait les marges des composants). */
:where(.mas-page) :is(h1,h2,h3,h4){font-family:var(--mas-titre);font-weight:800;line-height:1.15;
  letter-spacing:-.015em;margin:0;text-wrap:balance}
:where(.mas-page) h1{font-size:var(--mas-t-xxl);line-height:1.12}
:where(.mas-page) h2{font-size:var(--mas-t-xl)}
:where(.mas-page) h3{font-size:var(--mas-t-l);font-weight:700;line-height:1.25}
:where(.mas-page) p{margin:0}
:where(.mas-page) figure{margin:0}
:where(.mas-page) img{max-width:100%;height:auto;display:block}
:where(.mas-page) a{color:var(--mas-nuit)}
:where(.mas-section--nuit,.mas-section--encre) a{color:#fff}
:where(.mas-page) :is(ul,ol){margin:0;padding:0;list-style:none}

/* surtitre : petites capitales au-dessus des titres de section */
.mas-surtitre{font-family:var(--mas-titre);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mas-accent-texte);margin:0 0 var(--mas-e-3)}
.mas-section--nuit .mas-surtitre,.mas-section--encre .mas-surtitre,.mas-hero .mas-surtitre{color:var(--mas-accent-clair)}

.mas-entete{max-width:70ch;margin-bottom:40px}
.mas-entete h2{margin-bottom:14px}
/* :not(.mas-surtitre) : le surtitre est aussi un <p>. Sans ça, `.mas-entete p` (0,1,1) battait
   `.mas-surtitre` (0,1,0) — erreur vue sur KM le 01/10/2026, évitée ici dès le départ. */
.mas-entete p:not(.mas-surtitre){color:var(--mas-gris);font-size:17.5px}
.mas-section--nuit .mas-entete p:not(.mas-surtitre),
.mas-section--encre .mas-entete p:not(.mas-surtitre){color:var(--mas-sur-fonce)}

/* =============================================================
   3. BOUTONS (pilules)
   ============================================================= */
.mas-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mas-titre);font-weight:700;font-size:15px;line-height:1;
  padding:14px 22px;border-radius:var(--mas-rayon-pilule);border:2px solid transparent;text-decoration:none;
  white-space:nowrap;cursor:pointer;transition:transform .12s ease,box-shadow .15s ease}
.mas-btn:hover{transform:translateY(-1px)}
.mas-btn svg{width:17px;height:17px;flex:none}
.mas-page .mas-btn--plein{background:var(--mas-nuit);color:#fff;box-shadow:var(--mas-ombre)}
.mas-page .mas-btn--plein:hover{box-shadow:var(--mas-ombre-h)}
.mas-page .mas-btn--blanc{background:#fff;color:var(--mas-nuit)}
.mas-page .mas-btn--contour{background:#fff;color:var(--mas-nuit);border-color:var(--mas-ligne)}
.mas-page .mas-btn--contour-clair{background:transparent;color:#fff;border-color:var(--mas-filet-fonce)}

/* =============================================================
   4. EN-TÊTE (maquette — en production : Header Builder d'Oxygen + élément WP Menu,
      pour que le menu se gère dans Apparence › Menus ; voir la section 20)
   ============================================================= */
.mas-header{background:#fff;border-bottom:1px solid var(--mas-ligne);position:sticky;top:0;z-index:50}
.mas-header .mas-wrap{display:flex;align-items:center;gap:22px;min-height:72px}
.mas-logo{display:flex;align-items:center;gap:11px;flex:none;text-decoration:none;color:var(--mas-encre)}
.mas-page a.mas-logo{color:var(--mas-encre)}
.mas-logo img,.mas-logo svg{width:42px;height:42px;flex:none}
.mas-logo__texte{display:flex;flex-direction:column}
.mas-logo__nom{font-family:var(--mas-titre);font-weight:800;font-size:20px;letter-spacing:.02em;line-height:1}
.mas-logo__base{font-family:var(--mas-titre);font-weight:600;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mas-gris);margin-top:5px;line-height:1}
.mas-nav{margin-left:auto}
.mas-nav>ul{display:flex;align-items:center;gap:4px}
.mas-nav>ul>li{position:relative}
.mas-nav>ul>li>a{display:flex;align-items:center;gap:6px;padding:10px 10px;white-space:nowrap;
  font-family:var(--mas-titre);font-weight:600;font-size:14.5px;color:var(--mas-encre);text-decoration:none;
  border-radius:var(--mas-rayon-s)}
.mas-nav>ul>li>a:hover,.mas-nav>ul>li:focus-within>a{background:var(--mas-sable);color:var(--mas-nuit)}
.mas-nav__chevron{width:14px;height:14px}
.mas-sousmenu{position:absolute;top:100%;left:0;min-width:290px;background:#fff;border:1px solid var(--mas-ligne);
  border-radius:var(--mas-rayon);box-shadow:var(--mas-ombre-h);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:all .15s ease}
.mas-nav li:hover>.mas-sousmenu,.mas-nav li:focus-within>.mas-sousmenu{opacity:1;visibility:visible;transform:none}
.mas-sousmenu a{display:block;padding:9px 12px;border-radius:var(--mas-rayon-s);color:var(--mas-encre);
  text-decoration:none;font-family:var(--mas-titre);font-weight:600;font-size:15px}
.mas-sousmenu a small{display:block;font-family:var(--mas-texte);font-weight:400;font-size:14px;color:var(--mas-gris);margin-top:2px}
.mas-sousmenu a:hover{background:var(--mas-sable)}
.mas-header__actions{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.mas-header__tel{display:flex;align-items:center;gap:7px;font-family:var(--mas-titre);font-weight:800;font-size:17px;
  color:var(--mas-nuit);text-decoration:none;white-space:nowrap}
.mas-page a.mas-header__tel{color:var(--mas-nuit)}
.mas-header__tel svg{width:18px;height:18px}
.mas-burger{display:none}

/* =============================================================
   5. HÉROS (fond bleu nuit, photo arrondie à droite)
   ============================================================= */
.mas-hero{background:var(--mas-nuit);color:#fff;padding:clamp(44px,6vw,64px) 0 clamp(52px,7vw,72px);overflow:hidden}
.mas-hero .mas-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,52px);align-items:center}
.mas-hero h1{color:#fff;margin-bottom:20px}
.mas-hero__chapo{font-size:var(--mas-t-m);line-height:1.6;color:rgba(255,255,255,.88);max-width:50ch}
.mas-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.mas-hero__visuel{margin:0;border-radius:var(--mas-rayon);overflow:hidden;box-shadow:var(--mas-ombre-photo)}
.mas-hero__visuel img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* =============================================================
   6. BANDE DE RÉASSURANCE (4 engagements sous le héros)
   ============================================================= */
.mas-reassurance{background:var(--mas-nuit-fonce);color:#fff;padding:34px 0}
.mas-reassurance__liste{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.mas-reassurance__item{display:flex;gap:14px;align-items:flex-start}
.mas-reassurance__item svg{width:26px;height:26px;flex:none;color:var(--mas-accent-clair);margin-top:2px}
.mas-reassurance__texte strong{display:block;font-family:var(--mas-titre);font-weight:700;font-size:16px;line-height:1.3;margin-bottom:4px}
.mas-reassurance__texte span{display:block;font-size:15px;line-height:1.5;color:var(--mas-sur-fonce-2)}

/* =============================================================
   7. NOS MÉTIERS : pastilles + 6 cartes à icône
   ============================================================= */
.mas-pastilles{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.mas-pastilles li{background:var(--mas-accent-doux);color:var(--mas-nuit);border-radius:var(--mas-rayon-pilule);
  padding:8px 16px;font-family:var(--mas-titre);font-weight:600;font-size:14px;line-height:1.3}
.mas-metiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mas-metier{position:relative;background:#fff;border:1px solid var(--mas-ligne);border-radius:var(--mas-rayon);
  padding:28px;box-shadow:var(--mas-ombre);transition:box-shadow .15s,transform .15s}
.mas-metier:hover{box-shadow:var(--mas-ombre-h);transform:translateY(-2px)}
.mas-metier__ic{width:52px;height:52px;border-radius:var(--mas-rayon-s);background:var(--mas-accent-doux);
  color:var(--mas-nuit);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.mas-metier__ic svg{width:28px;height:28px}
.mas-metier h3{font-size:20px;margin-bottom:10px}
.mas-metier h3 a{color:var(--mas-encre);text-decoration:none}
.mas-metier h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--mas-rayon)}  /* toute la carte est cliquable */
.mas-metier h3 a:focus-visible{outline:none}
.mas-metier:has(h3 a:focus-visible){outline:3px solid var(--mas-accent);outline-offset:2px}
.mas-metier > p{color:var(--mas-gris);font-size:16px;margin-bottom:16px}
.mas-metier__points li{position:relative;padding:7px 0 7px 22px;font-size:15.5px;line-height:1.45;color:var(--mas-gris)}
.mas-metier__points li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:9px;border-radius:50%;
  background:#D6EAF7;border:2px solid var(--mas-accent)}

/* =============================================================
   8. COMMENT ÇA SE PASSE : 4 étapes numérotées
   ============================================================= */
.mas-etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:mas-etape}
.mas-etape{counter-increment:mas-etape;background:#fff;border-radius:var(--mas-rayon);padding:26px;box-shadow:var(--mas-ombre)}
.mas-etape__num{width:36px;height:36px;border-radius:50%;background:var(--mas-nuit);color:#fff;font-family:var(--mas-titre);
  font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.mas-etape__num::before{content:counter(mas-etape)}
.mas-etape h3{font-size:18px;margin-bottom:8px}
.mas-etape p{color:var(--mas-gris);font-size:15.5px;line-height:1.55}

/* =============================================================
   9. NOS CHANTIERS : avant / après + commune (cartes de [mas_chantiers], mas-chantiers.php)
   ============================================================= */
.mas-chantiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mas-chantier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--mas-ligne);
  border-radius:var(--mas-rayon);overflow:hidden;box-shadow:var(--mas-ombre);text-decoration:none;color:var(--mas-encre);
  transition:box-shadow .15s,transform .15s}
.mas-page a.mas-chantier{color:var(--mas-encre)}
.mas-chantier:hover{box-shadow:var(--mas-ombre-h);transform:translateY(-2px)}
.mas-chantier__duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--mas-ligne);aspect-ratio:16/9}
.mas-chantier__photo{position:relative;margin:0;overflow:hidden;background:var(--mas-sable)}
.mas-chantier__photo img{width:100%;height:100%;object-fit:cover}
.mas-chantier__seule{aspect-ratio:16/9;overflow:hidden;background:var(--mas-sable)}
.mas-chantier__seule img{width:100%;height:100%;object-fit:cover}
.mas-chantier__etiquette{position:absolute;left:10px;bottom:10px;background:rgba(16,33,46,.82);color:#fff;
  font-family:var(--mas-titre);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--mas-rayon-pilule)}
.mas-chantier__legende{padding:18px 20px 20px}
.mas-chantier__legende h3{font-size:17.5px;margin-bottom:5px}
.mas-chantier__legende p{color:var(--mas-gris);font-size:15px;line-height:1.5}
.mas-centre{text-align:center;margin-top:40px}

/* =============================================================
   10. L'ENTREPRISE (fond encre, 4 repères chiffrés vrais : aucun compteur inventé)
   ============================================================= */
.mas-entreprise{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,52px);align-items:center}
.mas-entreprise h2{color:#fff;margin-bottom:18px}
.mas-entreprise__texte > p:not(.mas-surtitre){color:var(--mas-sur-fonce);margin-bottom:15px;max-width:56ch}
.mas-entreprise__texte .mas-btn{margin-top:12px}
.mas-chiffres{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mas-chiffre{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--mas-rayon);padding:24px}
.mas-chiffre strong{display:block;font-family:var(--mas-titre);font-weight:800;font-size:31px;line-height:1.05;
  color:var(--mas-accent-clair);overflow-wrap:anywhere}
.mas-chiffre span{display:block;font-size:15px;line-height:1.45;color:var(--mas-sur-fonce-2);margin-top:9px}

/* =============================================================
   11. FAQ — <details>, sans JavaScript
   ============================================================= */
.mas-faq{max-width:840px}
.mas-faq details{background:#fff;border:1px solid var(--mas-ligne);border-radius:var(--mas-rayon);margin-bottom:12px;box-shadow:var(--mas-ombre)}
.mas-faq summary{cursor:pointer;list-style:none;padding:20px 52px 20px 24px;position:relative;
  font-family:var(--mas-titre);font-weight:700;font-size:17.5px;line-height:1.35}
.mas-faq summary::-webkit-details-marker{display:none}
.mas-faq summary::after{content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--mas-nuit);border-bottom:2.5px solid var(--mas-nuit);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.mas-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.mas-faq details p{margin:0 24px 22px;color:var(--mas-gris);max-width:70ch}

/* =============================================================
   12. CONSEILS : 3 derniers articles ([mas_conseils], mas-conseils.php)
   ============================================================= */
.mas-conseils{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mas-conseil{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--mas-ligne);
  border-radius:var(--mas-rayon);overflow:hidden;box-shadow:var(--mas-ombre);transition:transform .15s,box-shadow .15s}
.mas-conseil:hover{transform:translateY(-2px);box-shadow:var(--mas-ombre-h)}
.mas-conseil__image{aspect-ratio:16/9;overflow:hidden;background:var(--mas-sable);border-bottom:1px solid var(--mas-ligne)}
.mas-conseil__image img{width:100%;height:100%;object-fit:cover}
.mas-conseil__corps{padding:22px}
.mas-conseil__tag{font-family:var(--mas-titre);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mas-accent-texte);margin-bottom:10px}
.mas-conseil h3{font-size:18px;line-height:1.32;margin-bottom:9px}
.mas-conseil h3 a{color:var(--mas-encre);text-decoration:none}
.mas-conseil h3 a::after{content:"";position:absolute;inset:0}
.mas-conseil__corps > p:not(.mas-conseil__tag){color:var(--mas-gris);font-size:15.5px;line-height:1.55}

/* =============================================================
   13. CONTACT / DEVIS (fond bleu nuit)
   ============================================================= */
.mas-contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,52px);align-items:start}
.mas-contact h2{color:#fff;margin-bottom:14px}
.mas-contact__intro{color:var(--mas-sur-fonce);margin-bottom:26px;max-width:48ch}
.mas-form{display:grid;gap:14px}
.mas-champ{display:flex;flex-direction:column;gap:7px}
.mas-champ label{font-family:var(--mas-titre);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mas-sur-fonce-2)}
.mas-champ input,.mas-champ select,.mas-champ textarea{font:inherit;font-size:17px;color:#fff;background:rgba(255,255,255,.1);
  border:1px solid var(--mas-filet-fonce);border-radius:var(--mas-rayon-s);padding:12px 14px;width:100%;min-height:48px}
.mas-champ textarea{min-height:112px;resize:vertical}
.mas-champ input:focus,.mas-champ select:focus,.mas-champ textarea:focus{outline:3px solid var(--mas-accent-clair);outline-offset:0}
.mas-form .mas-btn{justify-self:start;margin-top:4px}
.mas-form__note{font-size:14px;line-height:1.5;color:var(--mas-sur-fonce-2)}
.mas-form__note a{color:#fff}
.mas-contact__direct{display:grid;gap:20px}
.mas-contact__ligne{display:flex;gap:14px;align-items:flex-start;color:#fff;text-decoration:none;margin:0}
.mas-section--nuit a.mas-contact__ligne{color:#fff}
.mas-contact__ligne svg{width:22px;height:22px;flex:none;color:var(--mas-accent-clair);margin-top:4px}
.mas-contact__ligne strong{display:block;font-family:var(--mas-titre);font-weight:800;font-size:21px;line-height:1.25;overflow-wrap:anywhere}
.mas-contact__ligne span{display:block;color:var(--mas-sur-fonce-2);font-size:15.5px}
.mas-contact__ligne span strong{color:#fff}

/* =============================================================
   14. PIED DE PAGE (maquette ; en production le même HTML sort de [mas_pied_de_page], mas-gabarit.php)
   Pas de mentions légales détaillées ici (décision du 04/09/2026) : « © MAS RENOV — Tous droits
   réservés » + lien vers la page Mentions légales.
   ============================================================= */
.mas-footer{background:var(--mas-encre-fonce);color:rgba(255,255,255,.7);padding:56px 0 0;font-size:15px}
.mas-footer__grille{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px}
.mas-footer__titre{font-family:var(--mas-titre);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin:0 0 14px;line-height:1.3}
.mas-footer a{color:rgba(255,255,255,.7);text-decoration:none}
.mas-footer a:hover{color:#fff}
.mas-footer__liens{margin:0;padding:0;list-style:none}
.mas-footer__liens li{margin-bottom:7px}
.mas-footer__marque p{max-width:34ch;margin-top:14px}
.mas-footer .mas-logo,.mas-footer a.mas-logo{color:#fff}
.mas-footer .mas-logo__base{color:rgba(255,255,255,.6)}
.mas-footer__bas{margin-top:36px;padding:20px 0 30px;border-top:1px solid rgba(255,255,255,.13);font-size:13.5px;
  color:rgba(255,255,255,.55);display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* barre « Appeler / Devis gratuit » collée en bas, mobile uniquement (mas-gabarit.php) */
.mas-barre-mobile{display:none}

/* =============================================================
   15. RESPONSIVE
   ============================================================= */
@media (max-width:1080px){
  .mas-nav{display:none}
  .mas-burger{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--mas-ligne);
    border-radius:var(--mas-rayon-s);background:#fff;color:var(--mas-encre)}
  .mas-burger svg{width:22px;height:22px}
  .mas-metiers,.mas-chantiers,.mas-conseils{grid-template-columns:repeat(2,1fr)}
  .mas-etapes,.mas-reassurance__liste{grid-template-columns:repeat(2,1fr)}
  .mas-footer__grille{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .mas-hero .mas-wrap,.mas-entreprise,.mas-contact{grid-template-columns:1fr}
}
@media (max-width:600px){
  .mas-header .mas-wrap{min-height:64px;gap:12px}
  .mas-logo img,.mas-logo svg{width:36px;height:36px}
  .mas-logo__nom{font-size:18px}
  .mas-header__actions .mas-btn{display:none}
  /* le numéro reste lu par les lecteurs d'écran (sinon : lien sans nom, relecture du 04/10/2026) */
  .mas-header__tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mas-header__tel svg{width:22px;height:22px}
  .mas-metiers,.mas-chantiers,.mas-conseils,.mas-etapes,.mas-reassurance__liste,.mas-footer__grille{grid-template-columns:1fr}
  .mas-reassurance__liste{gap:22px}
  /* texte courant jamais sous 17 px sur mobile (règle de la charte) */
  .mas-metier > p,.mas-metier__points li,.mas-etape p,.mas-chantier__legende p,.mas-conseil__corps > p:not(.mas-conseil__tag),
  .mas-faq details p,.mas-reassurance__texte span,.mas-chiffre span,.mas-contact__ligne span,
  .mas-footer__marque p,.mas-cookies__txt{font-size:17px}
  .mas-form__note{font-size:15px}
  .mas-chiffre{padding:20px}
  .mas-chiffre strong{font-size:26px}
  .mas-hero__cta .mas-btn{flex:1 1 100%}
  .mas-barre-mobile{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
    box-shadow:0 -6px 18px rgba(0,0,0,.12)}
  .mas-barre-mobile a{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;
    font-family:var(--mas-titre);font-weight:700;font-size:16px;text-decoration:none}
  .mas-barre-mobile svg{width:20px;height:20px}
  .mas-barre-mobile__tel{background:var(--mas-nuit);color:#fff}
  .mas-barre-mobile__devis{background:#fff;color:var(--mas-nuit);border-top:1px solid var(--mas-ligne)}
  .mas-page .mas-barre-mobile__devis:hover{color:var(--mas-nuit)}
  .mas-page .mas-barre-mobile__tel:hover{color:#fff}
  .mas-page{padding-bottom:56px}
}
@media (max-width:600px){ .mas-barre-mobile--seul{grid-template-columns:1fr} }

/* =============================================================
   16. ACCESSIBILITÉ
   ============================================================= */
.mas-page :focus-visible{outline:3px solid var(--mas-accent);outline-offset:2px}
/* sur fond bleu nuit, #2C9BD6 ne fait que 2,6:1 (seuil 3:1 des contours) : bleu clair, 4,9:1 */
.mas-hero :focus-visible,.mas-reassurance :focus-visible,.mas-section--nuit :focus-visible,
.mas-section--encre :focus-visible,.mas-footer :focus-visible,.mas-barre-mobile :focus-visible,
.mas-cookies :focus-visible{outline-color:var(--mas-accent-clair)}
.mas-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.mas-page *{transition:none!important;animation:none!important}}

/* =============================================================
   17. ÉLÉMENT « SVG ICON » D'OXYGEN 6
   Oxygen enveloppe chaque icône : <div class="oxy-svg-icon"><svg>…</svg></div>, et son CSS par défaut
   impose .oxy-svg-icon > svg{width:1em;height:1em;stroke-width:0;fill:currentColor}.
   - trait et remplissage : notre convertisseur (version km2) les écrit en style inline sur le <svg>,
     mas_icone() aussi : nos icônes au trait restent au trait ;
   - taille : nos règles (.mas-btn svg…) ont la même spécificité ; elles gagnent parce que mas.css est
     mis en file en dernier (priorité 9999, mas-design-tokens.php).
   ============================================================= */
.oxy-svg-icon{line-height:0}
.mas-reassurance__item > .oxy-svg-icon,.mas-contact__ligne > .oxy-svg-icon{flex:none;color:var(--mas-accent-clair);margin-top:2px}
.mas-metier__ic > .oxy-svg-icon{color:var(--mas-nuit)}

/* =============================================================
   18. PAGES CHANTIER, LISTE FILTRÉE ([mas_chantier], [mas_chantiers filtre="1"])
   ============================================================= */
.mas-chantier[hidden]{display:none}
.mas-filtres{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 var(--mas-e-6)}
.mas-filtre{font:600 15px/1 var(--mas-titre);color:var(--mas-encre);background:#fff;cursor:pointer;
  border:2px solid var(--mas-ligne);border-radius:var(--mas-rayon-pilule);padding:11px 18px;transition:border-color .15s,background .15s}
.mas-filtre:hover{border-color:var(--mas-nuit)}
.mas-filtre[aria-pressed="true"]{background:var(--mas-nuit);border-color:var(--mas-nuit);color:#fff}
.mas-chantier-page h1{margin:var(--mas-e-2) 0 0}
.mas-chantier-page__meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin:var(--mas-e-4) 0 var(--mas-e-6);font-weight:600;color:var(--mas-gris)}
.mas-chantier-page__meta span{display:inline-flex;align-items:center;gap:8px}
.mas-chantier-page__meta svg{width:18px;height:18px;color:var(--mas-accent-texte)}
.mas-avant-apres{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 var(--mas-e-6)}
.mas-avant-apres figure{position:relative;border-radius:var(--mas-rayon);overflow:hidden;background:var(--mas-sable)}
.mas-avant-apres img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mas-chantier-page__photo{margin:0 0 var(--mas-e-6)}
.mas-chantier-page__photo img{width:100%;height:auto;border-radius:var(--mas-rayon)}
.mas-chantier-page__metiers{margin-top:var(--mas-e-6);font-weight:600}
.mas-texte{max-width:760px;margin-top:var(--mas-e-6)}
.mas-texte > * + *{margin-top:var(--mas-e-4)}
.mas-texte h2,.mas-texte h3{font-family:var(--mas-titre);font-weight:700;line-height:1.2;margin-top:var(--mas-e-6)}
.mas-texte ul{padding-left:1.2em;list-style:disc}
.mas-texte ol{padding-left:1.2em;list-style:decimal}
.mas-cta{text-align:center}
.mas-cta h2{color:#fff}
.mas-cta p{max-width:620px;margin:var(--mas-e-4) auto var(--mas-e-6);color:var(--mas-sur-fonce)}
.mas-boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--mas-e-6)}
.mas-cta .mas-boutons{justify-content:center;margin-top:0}
@media (max-width:600px){ .mas-avant-apres{grid-template-columns:1fr} }

/* Fil d'Ariane */
.mas-fil{font-size:14px;line-height:1.4;color:var(--mas-gris);margin-bottom:var(--mas-e-4)}
.mas-fil ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.mas-fil li:not(:last-child)::after{content:"›";margin-left:6px}
.mas-fil a{color:inherit;text-decoration:none}
.mas-fil a:hover{text-decoration:underline}
.mas-section--nuit .mas-fil,.mas-section--encre .mas-fil{color:var(--mas-sur-fonce)}

/* =============================================================
   19. CARROUSEL PHOTOS (mas-carrousel.php) et BANDEAU COOKIES (mas-cookies.php)
   ============================================================= */
.masc{margin:0 0 var(--mas-e-6)}
.masc [hidden],.masc-visio[hidden]{display:none!important}
.masc-fenetre{position:relative;overflow:hidden;border-radius:var(--mas-rayon);box-shadow:var(--mas-ombre-h)}
.masc-piste{display:flex;gap:14px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.masc-vue{flex:0 0 calc((100% - 14px)/2);margin:0;aspect-ratio:4/3;cursor:zoom-in;background:var(--mas-sable)}
.masc-vue img{width:100%;height:100%;object-fit:cover;display:block}
.masc-fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;background:#fff;color:var(--mas-nuit);display:flex;align-items:center;justify-content:center;box-shadow:var(--mas-ombre-h)}
.masc-fleche svg,.masc-visio button svg{width:22px;height:22px}
.masc-prec{left:12px}.masc-prec svg,.masc-visio-prec svg{transform:rotate(180deg)}
.masc-suiv{right:12px}
.masc-compteur{position:absolute;right:12px;bottom:12px;z-index:2;background:rgba(16,33,46,.8);color:#fff;
  font-size:14px;font-weight:600;padding:4px 10px;border-radius:var(--mas-rayon-pilule)}
.masc-points{display:flex;justify-content:center;gap:10px;margin-top:14px}
.masc-point{width:10px;height:10px;border:0;padding:0;border-radius:50%;background:var(--mas-ligne);cursor:pointer}
.masc-point[aria-current="true"]{background:var(--mas-nuit)}
.masc-visio{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(12,26,36,.94);padding:24px}
.masc-visio-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:var(--mas-rayon-s)}
.masc-visio button{position:absolute;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.14);
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1}
.masc-visio button:hover{background:#fff;color:var(--mas-nuit)}
.masc-visio-fermer{top:20px;right:20px}
.masc-visio-prec{left:20px;top:50%;transform:translateY(-50%)}
.masc-visio-suiv{right:20px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){
  .masc-vue{flex-basis:100%}
  .masc-fleche{width:38px;height:38px}
  .masc-visio-prec{left:8px}.masc-visio-suiv{right:8px}
}

/* Bandeau cookies : Refuser et Accepter ont EXACTEMENT le même style (CNIL : refuser aussi simple
   qu'accepter ; sur TCE, Accepter était plein et Refuser en contour — pas repris). */
.mas-cookies{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--mas-encre);color:var(--mas-sur-fonce);
  border-top:3px solid var(--mas-accent);box-shadow:0 -8px 28px rgba(0,0,0,.22);font-family:var(--mas-texte);
  animation:mas-cookies-entree .3s ease-out both}
.mas-cookies[hidden]{display:none}
@keyframes mas-cookies-entree{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mas-cookies__in{max-width:var(--mas-largeur);margin:0 auto;padding:16px clamp(16px,4vw,24px);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.mas-cookies__txt{flex:1 1 380px;margin:0;font-size:16px;line-height:1.5}
.mas-cookies__txt a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.mas-cookies__btns{display:flex;gap:10px;flex:0 0 auto}
.mas-cookies__btn{font:700 15px/1 var(--mas-titre);padding:13px 22px;border-radius:var(--mas-rayon-pilule);cursor:pointer;
  background:transparent;color:#fff;border:2px solid var(--mas-filet-fonce)}
.mas-cookies__btn:hover{border-color:#fff}
@media (max-width:600px){
  .mas-cookies{bottom:56px} /* au-dessus de la barre Appeler / Devis */
  .mas-cookies__btns{flex:1 1 100%}
  .mas-cookies__btn{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){.mas-cookies{animation:none}}

/* =============================================================
   20. EN-TÊTE ET PIED DE PAGE DANS OXYGEN (templates Header et Footer)
   Pose pas à pas : docs/HEADER-FOOTER-oxygen.md.
     Header : Header Builder (classe mas-header) contenant un Container mas-wrap, lui-même avec
              [mas_logo] + élément WP Menu (classe mas-menu, « Menu principal ») + [mas_actions]
     Footer : [mas_pied_de_page]        Barre mobile : ajoutée par mas-gabarit.php
   Sélecteurs de Breakdance relevés au devtools sur KM (Oxygen 6.1.3, 29/09/2026) : Breakdance écrit ses
   valeurs par défaut en (0,3,0) et son CSS passe APRÈS le nôtre → on préfixe par .breakdance et on vise
   au moins aussi précis. Si une règle ne prend pas, vérifier le nom de la classe au devtools.
   Pourquoi mas-menu et pas mas-nav : .mas-nav est la nav de la maquette, cachée sous 1080 px (section 15) ;
   posée sur l'élément WP Menu, elle cacherait aussi son burger (piège évité de justesse sur KM).
   ============================================================= */
.breakdance .bde-header-builder.mas-header{background:#fff}
.breakdance .bde-header-builder.mas-header .bde-header-builder__container{display:block;max-width:none;min-height:0;padding:0}

/* Les enveloppes des éléments Shortcode prennent la largeur de leur contenu (leçon TCE) :
   le pied de page et les sections produites par un shortcode restent pleine largeur. */
[class*="shortcode"]:has(> .mas-footer),
[class*="shortcode"]:has(> .mas-section){width:100%;max-width:none}

/* Logo et actions ne rétrécissent jamais (sinon le logo disparaît sur mobile) */
.mas-header [class*="shortcode"]:has(> .mas-logo),
.mas-header [class*="shortcode"]:has(> .mas-header__actions){flex:none}

/* Élément WP Menu en burger (réglage « Tablet landscape », 1119 px et moins) : burger tout à droite */
@media (max-width:1119px){
  .mas-header .mas-menu{order:3;margin-left:0}
  .mas-header [class*="shortcode"]:has(> .mas-header__actions){margin-left:auto}
}

/* Élément WP Menu — premier niveau */
.mas-menu{margin-left:auto}
.mas-menu .breakdance-menu-link{font-family:var(--mas-titre);font-weight:600;font-size:14.5px;line-height:1.2;
  color:var(--mas-encre);text-decoration:none;padding:10px;border-radius:var(--mas-rayon-s)}
.mas-menu .breakdance-menu-link:hover{background:var(--mas-sable);color:var(--mas-nuit)}
.mas-menu .current-menu-item > .breakdance-menu-link,
.mas-menu .breakdance-menu-item--active > .breakdance-menu-link{box-shadow:inset 0 -3px 0 var(--mas-accent)}
.mas-menu .breakdance-menu-link-arrow{color:var(--mas-encre)}
.mas-menu .breakdance-menu-link-arrow::after{background-color:currentColor}

/* Déroulant « Nos métiers » : Breakdance dessine un panneau .breakdance-dropdown-floater, pas de ul.sub-menu.
   Les liens héritent sinon de la couleur de lien du builder : !important sur la couleur (leçon TCE). */
.mas-menu .breakdance-dropdown-floater{background:#fff;border:1px solid var(--mas-ligne);border-top:3px solid var(--mas-accent);
  border-radius:var(--mas-rayon);box-shadow:var(--mas-ombre-h)}
.mas-menu .breakdance-dropdown-links{margin:0;padding:8px;gap:0 !important}
.mas-menu li.breakdance-dropdown-item > a{display:block;padding:9px 12px;border-radius:var(--mas-rayon-s);
  color:var(--mas-encre) !important;font-family:var(--mas-titre);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.mas-menu li.breakdance-dropdown-item > a:hover{background:var(--mas-sable)}
.mas-menu .breakdance-menu-toggle-lines,
.mas-menu .breakdance-menu-toggle-lines::before,
.mas-menu .breakdance-menu-toggle-lines::after{background-color:var(--mas-encre)}

/* =============================================================
   21. CE QUE LES RÉGLAGES GLOBAUX D'OXYGEN IMPOSENT — ET LE FORMULAIRE DE DEVIS
   Relevé sur KM (Oxygen 6.1.3, 29/09 et 01/10/2026) : global-settings.css, chargé APRÈS notre feuille,
   écrit h1…h6{color:var(--bde-headings-color); font-family:var(--bde-heading-font-family)},
   h1{font-size:var(--bde-h1-font-size)} (et h2, h3…), a{color:var(--bde-links-color)} et
   a:hover{color:var(--bde-links-color-hover)}. Même spécificité que nos règles de base : elles perdaient
   (titres en police système, foncés sur fond foncé, liens bleus d'Oxygen). Plutôt qu'une course à la
   spécificité, on donne nos valeurs aux variables d'Oxygen, sur .mas-page (posée sur <body>).
   currentColor dans `color` = couleur du parent : les titres prennent la couleur de leur section.
   ============================================================= */
.mas-page{--bde-headings-color:currentColor;--bde-heading-font-family:var(--mas-titre);
  --bde-h1-font-size:var(--mas-t-xxl);--bde-h2-font-size:var(--mas-t-xl);--bde-h3-font-size:var(--mas-t-l);
  --bde-links-color:var(--mas-nuit);--bde-links-color-hover:var(--mas-nuit)}
.mas-section--nuit,.mas-section--encre,.mas-hero,.mas-reassurance,.mas-footer,.mas-cookies,.mas-barre-mobile{
  --bde-links-color:#fff;--bde-links-color-hover:#fff}

/* Formulaire de devis = élément Form Builder d'Oxygen dans le Container .mas-form (bloc 09, page Contact),
   sur le fond bleu nuit de la section. Rien de réglé dans le panneau du Form Builder : Breakdance le dessine
   avec ses variables --bde-form-* et --bde-button-* (posées par défaut sur :root) ; redéfinies sur la carte,
   elles gagnent par héritage (l'ancêtre le plus proche l'emporte). Noms relevés sur KM en 6.1.3. */
.mas-form{
  --bde-form-gap:14px;
  --bde-form-after-label:7px;
  --bde-form-font-size:17px;
  --bde-form-text-color:#fff;
  --bde-form-label-color:var(--mas-sur-fonce-2);
  --bde-form-label-font-weight:600;
  --bde-form-label-required-color:var(--mas-accent-clair);
  --bde-form-input-background-color:rgba(255,255,255,.1);
  --bde-form-input-focused-background-color:rgba(255,255,255,.14);
  --bde-form-input-border-width:1px;
  --bde-form-input-border-color:var(--mas-filet-fonce);
  --bde-form-input-border-radius:var(--mas-rayon-s);
  --bde-form-input-padding-top:12px;
  --bde-form-input-padding-right:14px;
  --bde-form-input-padding-bottom:12px;
  --bde-form-input-padding-left:14px;
  --bde-form-input-placeholder-color:rgba(255,255,255,.6);
  --bde-form-input-focused-border-color:var(--mas-accent-clair);
  --bde-form-input-focused-shadow:0 0 0 2px var(--mas-accent-clair);
  --bde-button-primary-background-color:#fff;
  --bde-button-primary-background-color-hover:#fff;
  --bde-button-primary-text-color:var(--mas-nuit);
  --bde-button-primary-text-color-hover:var(--mas-nuit);
  --bde-button-primary-border-color:transparent;
  --bde-button-primary-border-color-hover:transparent;
  --bde-button-font-size:15px;
  --bde-button-font-weight:700;
  --bde-button-border-radius:var(--mas-rayon-pilule);
  --bde-button-padding-base:14px 22px;
  --bde-button-line-height:1}
.mas-form > .bde-form-builder{width:100%}
.mas-form .breakdance-form{display:grid;grid-template-columns:1fr;gap:14px}
.mas-form .breakdance-form-field{margin:0}
.mas-form .breakdance-form-field--hidden{display:none}
.mas-form .breakdance-form-field__label{font-family:var(--mas-titre);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.mas-form .breakdance-form-field__input{color:#fff}
.mas-form select.breakdance-form-field__input option{color:var(--mas-encre)}
.mas-form textarea.breakdance-form-field__input{min-height:112px}
.mas-form .breakdance-form-button{font-family:var(--mas-titre);justify-self:start}
.mas-form .breakdance-form-message{border-radius:var(--mas-rayon-s)}

/* =============================================================
   22. CE QUE LE CONVERTISSEUR PERD : ICÔNES DANS LES TEXTES, STYLES EN LIGNE
   Leçon KM (30/09/2026) : un SVG posé DANS un élément qui devient un Text d'Oxygen disparaît, et les
   styles en ligne aussi. Les blocs MAS sont écrits pour l'éviter (aucun style en ligne, aucun SVG dans
   un paragraphe ou un span) ; le seul cas restant, la flèche du bouton du Form Builder, est dessiné ici
   en pseudo-élément (masque SVG coloré par currentColor).
   ============================================================= */
.mas-page{
  --mas-ic-fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E")}
.mas-form .breakdance-form-button::after{content:"";width:17px;height:17px;flex:none;margin-left:9px;background-color:currentColor;
  -webkit-mask:var(--mas-ic-fleche) center/contain no-repeat;mask:var(--mas-ic-fleche) center/contain no-repeat}

/* =============================================================
   23. LE TEXTE DES PAGES EN BLOCS DE BASE (méthode esthetour, 23/10/2026)
   L'accueil est écrit par `make accueil` (contenu/accueil/*.html) en blocs de base de WordPress : Groupe,
   Paragraphe, Titre, Liste, Image, Détails, Boutons, Code court. Oxygen n'affiche que le contenu de la page
   (élément Post Content, docs/ACCUEIL-oxygen.md) : les blocs ne portent que des classes mas-*, tout est ici.
   Les sections 5 à 11 restent valables (mêmes classes que la maquette) ; ce qui suit règle ce que les blocs
   ajoutent ou changent :
   - chaque Groupe reçoit is-layout-flow, et selon les réglages WordPress imprime une marge entre ses enfants
     (:root :where(.is-layout-flow) > *, 0,1,0), parfois en bas de page, donc après nous (vu sur esthetour) ;
     l'élément Post Content d'Oxygen (div.bde-rich-text) a aussi ses marges de texte. On remet tout à zéro avec
     deux classes (0,2,0), puis chaque composant redonne SES marges, avec au moins la même force, plus bas ;
   - les paragraphes reçoivent wp-block-paragraph, les titres wp-block-heading, le H1 wp-block-post-title ;
   - un bouton est <div class="wp-block-button mas-btn--…"><a class="wp-block-button__link"> : la feuille
     « classic-themes » de WordPress le peint en gris (#32373c), on le redessine en pilule mas-btn ;
   - les icônes ne sont plus des <svg> dans le texte (l'éditeur les jugerait invalides) : une classe mas-ico-<nom>
     sur le Groupe, dessinée en pseudo-élément (masque SVG coloré par la couleur de fond, comme section 22).
   L'enveloppe .wp-block-group__inner-container des thèmes sans theme.json est retirée par mas-blocs.php.
   ============================================================= */
.mas-page{
  --mas-ic-bouclier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 4 40 10v13c0 11-7 18-16 21-9-3-16-10-16-21V10z'/%3E%3Cpath d='m16 23 6 6 11-12'/%3E%3C/svg%3E");
  --mas-ic-equipe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='16' r='7'/%3E%3Cpath d='M5 41c0-7 6-12 13-12s13 5 13 12'/%3E%3Cpath d='M33 12a7 7 0 0 1 0 14M36 41c0-6-2-9-5-11'/%3E%3C/svg%3E");
  --mas-ic-devis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5h18l8 8v30H11z'/%3E%3Cpath d='M29 5v9h8'/%3E%3Cpath d='M17 24h14M17 31h14M17 17h6'/%3E%3C/svg%3E");
  --mas-ic-balai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 4v20'/%3E%3Cpath d='M13 24h22l3 8H10z'/%3E%3Cpath d='M15 32v10M24 32v12M33 32v10'/%3E%3C/svg%3E");
  --mas-ic-rouleau:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='7' width='27' height='11' rx='3.5'/%3E%3Cpath d='M32 12.5h8v8H23v9'/%3E%3Crect x='19' y='29' width='8' height='12' rx='3'/%3E%3C/svg%3E");
  --mas-ic-facade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 42V13l17-8 17 8v29'/%3E%3Crect x='14' y='19' width='7' height='7' rx='1.5'/%3E%3Crect x='27' y='19' width='7' height='7' rx='1.5'/%3E%3Cpath d='M20 42V31h8v11'/%3E%3C/svg%3E");
  --mas-ic-truelle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h30L24 40z'/%3E%3Cpath d='M24 16V9'/%3E%3Crect x='20' y='3' width='8' height='6' rx='3'/%3E%3C/svg%3E");
  --mas-ic-carrelage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='15' height='15' rx='2.5'/%3E%3Crect x='27' y='6' width='15' height='15' rx='2.5'/%3E%3Crect x='6' y='27' width='15' height='15' rx='2.5'/%3E%3Crect x='27' y='27' width='15' height='15' rx='2.5'/%3E%3C/svg%3E");
  --mas-ic-mur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='9' width='16' height='10' rx='2'/%3E%3Crect x='25' y='9' width='18' height='10' rx='2'/%3E%3Crect x='5' y='23' width='24' height='10' rx='2'/%3E%3Crect x='33' y='23' width='10' height='10' rx='2'/%3E%3Crect x='5' y='37' width='16' height='8' rx='2'/%3E%3Crect x='25' y='37' width='18' height='8' rx='2'/%3E%3C/svg%3E");
  --mas-ic-maison:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22 24 6l19 16'/%3E%3Cpath d='M9 24v18h30V24'/%3E%3Cpath d='M19 42V29h10v13'/%3E%3C/svg%3E");
  --mas-ic-telephone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h8l3 9-5 4a24 24 0 0 0 10 10l4-5 9 3v8c0 2-1 3-3 3C22 37 11 26 11 8c0-2 1-3 3-3z'/%3E%3C/svg%3E");
  --mas-ic-email:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='38' height='28' rx='3'/%3E%3Cpath d='m5 12 19 14 19-14'/%3E%3C/svg%3E");
  --mas-ic-epingle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 44s14-14 14-24a14 14 0 1 0-28 0c0 10 14 24 14 24z'/%3E%3Ccircle cx='24' cy='20' r='5'/%3E%3C/svg%3E");}
.mas-ico-bouclier{--mas-ic:var(--mas-ic-bouclier)} .mas-ico-equipe{--mas-ic:var(--mas-ic-equipe)}
.mas-ico-devis{--mas-ic:var(--mas-ic-devis)} .mas-ico-balai{--mas-ic:var(--mas-ic-balai)}
.mas-ico-rouleau{--mas-ic:var(--mas-ic-rouleau)} .mas-ico-facade{--mas-ic:var(--mas-ic-facade)}
.mas-ico-truelle{--mas-ic:var(--mas-ic-truelle)} .mas-ico-carrelage{--mas-ic:var(--mas-ic-carrelage)}
.mas-ico-mur{--mas-ic:var(--mas-ic-mur)} .mas-ico-maison{--mas-ic:var(--mas-ic-maison)}
.mas-ico-telephone{--mas-ic:var(--mas-ic-telephone)} .mas-ico-email{--mas-ic:var(--mas-ic-email)}
.mas-ico-epingle{--mas-ic:var(--mas-ic-epingle)}

/* Remise à zéro des marges des blocs (0,2,0) DANS nos sections seulement (:where ne compte pas : le texte d'une
   future page simple, hors de nos sections, garde ses marges), puis les marges de chaque composant, même force, plus bas */
.mas-page :where(.mas-hero,.mas-reassurance,.mas-section) .wp-block-group,
.mas-page :where(.mas-hero,.mas-reassurance,.mas-section) .wp-block-group > *{margin-block:0}
.mas-page :is(.mas-pastilles,.mas-metier__points){margin:0;padding:0;list-style:none}
.mas-page .mas-surtitre{margin-bottom:var(--mas-e-3)}
.mas-page .mas-entete{margin-bottom:40px}
.mas-page .mas-entete > h2{margin-bottom:14px}
.mas-page .mas-pastilles{margin-bottom:28px}

/* Héros : le H1 est le titre WordPress (bloc « Titre »), les boutons viennent de [mas_boutons] */
.mas-page .mas-hero__texte > h1{color:#fff;margin-bottom:20px}
.mas-page .mas-hero .mas-boutons{margin-top:30px}
.mas-page .mas-hero__visuel{margin:0}

/* Réassurance : un Groupe par engagement, icône en pseudo-élément, titre et texte dans la colonne de droite */
.mas-page .mas-reassurance__item{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:14px;align-items:start}
.mas-reassurance__item::before{content:"";grid-row:1 / span 2;width:26px;height:26px;margin-top:2px;background:var(--mas-accent-clair);
  -webkit-mask:var(--mas-ic) center/contain no-repeat;mask:var(--mas-ic) center/contain no-repeat}
.mas-reassurance__item > *{grid-column:2}
.mas-page .mas-reassurance__titre{font-family:var(--mas-titre);font-weight:700;font-size:16px;line-height:1.3;color:#fff;margin-bottom:4px}
.mas-reassurance__item > p:not(.mas-reassurance__titre){font-size:15px;line-height:1.5;color:var(--mas-sur-fonce-2)}

/* Métiers : la pastille de l'icône (::before, dans le flux) et l'icône (::after, posée dessus) */
.mas-metier::before{content:"";display:block;width:52px;height:52px;border-radius:var(--mas-rayon-s);background:var(--mas-accent-doux);margin-bottom:18px}
.mas-metier::after{content:"";position:absolute;top:40px;left:40px;width:28px;height:28px;background:var(--mas-nuit);pointer-events:none;
  -webkit-mask:var(--mas-ic) center/contain no-repeat;mask:var(--mas-ic) center/contain no-repeat}
.mas-page .mas-metier > h3{margin-bottom:10px}
.mas-page .mas-metier > p{margin-bottom:16px}

/* Étapes : le numéro est un compteur CSS (plus de <span> vide dans le texte) */
.mas-etape::before{content:counter(mas-etape);width:36px;height:36px;border-radius:50%;background:var(--mas-nuit);color:#fff;
  font-family:var(--mas-titre);font-weight:800;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.mas-page .mas-etape > h3{margin-bottom:8px}

/* L'entreprise : repères en Groupes (valeur + légende) */
.mas-page .mas-entreprise__texte > h2{color:#fff;margin-bottom:18px}
.mas-page .mas-entreprise__texte > p:not(.mas-surtitre){margin-bottom:15px}
.mas-page .mas-entreprise__texte > .wp-block-buttons{margin-top:12px}
.mas-page .mas-chiffre__valeur{font-family:var(--mas-titre);font-weight:800;font-size:31px;line-height:1.05;color:var(--mas-accent-clair);overflow-wrap:anywhere}
.mas-chiffre > p:not(.mas-chiffre__valeur){font-size:15px;line-height:1.45;color:var(--mas-sur-fonce-2)}
.mas-page .mas-chiffre > p + p{margin-top:9px}

/* FAQ : bloc « Détails » de WordPress (<details class="wp-block-details">), mêmes règles que la section 11 */
.mas-page .mas-faq > .wp-block-details{margin-bottom:12px}
.mas-page .mas-faq details > p{margin:0 24px 22px}

/* Boutons de l'éditeur (bloc Boutons) dessinés comme .mas-btn ; la variante est la classe du bloc Bouton */
.mas-page .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}
.mas-page .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mas-titre);font-weight:700;font-size:15px;line-height:1;padding:14px 22px;border-radius:var(--mas-rayon-pilule);
  border:2px solid transparent;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:var(--mas-ombre);
  background:var(--mas-nuit);color:#fff;transition:transform .12s ease,box-shadow .15s ease}
.mas-page .wp-block-button__link:hover{transform:translateY(-1px);color:#fff}
.mas-page .mas-btn--blanc > .wp-block-button__link{background:#fff;color:var(--mas-nuit);box-shadow:none}
.mas-page .mas-btn--contour > .wp-block-button__link{background:#fff;color:var(--mas-nuit);border-color:var(--mas-ligne);box-shadow:none}
.mas-page .mas-btn--contour-clair > .wp-block-button__link{background:transparent;color:#fff;border-color:var(--mas-filet-fonce);box-shadow:none}
.mas-page :is(.mas-btn--blanc,.mas-btn--contour) > .wp-block-button__link:hover{color:var(--mas-nuit)}

/* Doutes surlignés pour le client (deploy/lib/redaction.php) : en jaune sur la copie locale seulement */
.mas-local mark.mas-doute{background:#FFF1A8;color:var(--mas-encre);padding:0 .15em;border-radius:3px;box-shadow:0 0 0 2px #FFF1A8}
.mas-page:not(.mas-local) mark.mas-doute{background:none;color:inherit}

/* Titres de section sur une ligne quand ils tiennent (« Six savoir-faire, une seule entreprise », 36 px) */
.mas-page .mas-entete{max-width:780px}

/* Cartes chantier : la proportion 16/9 de la paire avant / après tient quelle que soit la photo (le client envoie
   des photos en hauteur prises au téléphone). Photos posées en absolu : sans ça, une photo en hauteur imposait sa
   hauteur à la carte, et deux cartes voisines n'avaient plus la même (vu au banc le 23/10/2026). */
.mas-chantier__photo,.mas-chantier__seule{position:relative;min-height:0}
.mas-chantier__photo img,.mas-chantier__seule img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Deux chantiers seulement : deux cartes plus larges plutôt qu'un trou à droite */
.mas-chantiers:has(> .mas-chantier:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.mas-chantiers:has(> .mas-chantier:only-child){grid-template-columns:minmax(0,560px)}

@media (max-width:600px){
  .mas-page .mas-chiffre__valeur{font-size:26px}
  .mas-reassurance__item > p:not(.mas-reassurance__titre),.mas-chiffre > p:not(.mas-chiffre__valeur){font-size:17px}
  .mas-hero .mas-boutons .mas-btn{flex:1 1 100%}
  .mas-chantiers:has(> .mas-chantier:nth-child(2):last-child){grid-template-columns:1fr}
}

/* -------------------------------------------------------------
   23 b. LA SECTION DEVIS — composant « Section devis » d'Oxygen (docs/ACCUEIL-oxygen.md), après Post Content
   dans le template Accueil (et plus tard Contact) :
     Div (balise section) .mas-section.mas-section--nuit.mas-devis
       Div .mas-wrap.mas-contact
         Div .mas-devis__form : [mas_devis_titre] · Div .mas-form (Form Builder) · [mas_devis_note]
         Div (balise aside) .mas-devis__cote : [mas_coordonnees]
   Les Div d'Oxygen sont des colonnes flex alignées à gauche, max-width:100 %, feuille chargée après la nôtre
   (.breakdance .bde-div, 0,2,0 : piège vu sur esthetour le 10/10) : nos Div reprennent leur disposition avec la
   même tournure. Les enveloppes des éléments Shortcode prennent toute la largeur de la colonne.
   ------------------------------------------------------------- */
.mas-devis__titre{scroll-margin-top:96px}
.breakdance .bde-div.mas-devis{display:block;width:100%}
.breakdance .bde-div.mas-wrap{display:block;max-width:var(--mas-largeur);margin-left:auto;margin-right:auto}
.breakdance .bde-div.mas-contact{display:grid;align-items:start}
.breakdance .bde-div.mas-devis__form,.breakdance .bde-div.mas-devis__cote{align-items:stretch;min-width:0}
.breakdance .bde-div.mas-form{display:grid;align-items:stretch}
.mas-devis [class*="shortcode"]{width:100%;max-width:none}
.mas-devis .mas-form{margin-bottom:14px}
@media (max-width:900px){ .breakdance .bde-div.mas-contact{grid-template-columns:1fr} }

/* -------------------------------------------------------------
   23 c. LES PAGES MÉTIERS (contenu/page/<métier>.html, make page ; template « Métier » d'Oxygen = Post Content +
   composant « Section devis », comme l'accueil : docs/PAGES-METIERS-oxygen.md). Elles reprennent les composants
   de l'accueil (héros, étapes, cartes métiers, chantiers, FAQ) ; ce qui suit est ce qu'elles ajoutent :
   - .mas-cartes / .mas-carte : des cartes de texte sans icône ni lien (finitions, « maison ou immeuble ») ;
     trois par rangée, deux quand il n'y en a que deux ;
   - des étapes au-delà de quatre : trois par rangée (6 = 3 + 3) au lieu de 4 + 2 ; la règle est dans une
     requête « width > 1080px » pour ne pas passer devant celles de la section 15 (un :has() compte dans la
     spécificité), sans trou à 1080,5 px quand la page est zoomée (relecture du 24/10).
   ------------------------------------------------------------- */
.mas-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mas-cartes:has(> .mas-carte:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.mas-carte{background:#fff;border:1px solid var(--mas-ligne);border-radius:var(--mas-rayon);padding:28px;box-shadow:var(--mas-ombre)}
.mas-page .mas-carte > h3{font-size:20px;margin-bottom:10px}
.mas-carte > p{color:var(--mas-gris);font-size:16px}
.mas-page .mas-carte > p + p{margin-top:10px}
@media (width > 1080px){ .mas-etapes:has(> .mas-etape:nth-child(5)){grid-template-columns:repeat(3,1fr)} }
@media (max-width:1080px){ .mas-cartes{grid-template-columns:repeat(2,1fr)} }
/* sur deux colonnes, une dernière carte seule prend toute la rangée (3 cartes = 2 + 1 large, pas 2 + un trou) */
@media (min-width:601px) and (max-width:1080px){
  .mas-cartes > .mas-carte:last-child:nth-child(odd),.mas-metiers > .mas-metier:last-child:nth-child(odd){grid-column:1 / -1}
}
/* pas de vide sous le texte d'une carte métier sans liste à puces (« Souvent avec… » des pages métiers) */
.mas-page .mas-metier > p:last-child{margin-bottom:0}

/* Héros sans photo (pages métiers qui n'ont pas encore de chantier photographié) : à droite, une carte
   « Ce que nous faisons » sur le bleu nuit, au lieu d'une image de catalogue. Le jour où une vraie photo arrive,
   le Groupe .mas-hero__carte est remplacé par l'Image .mas-hero__visuel, comme sur la page Ravalement.
   Fond plus sombre que le héros, pas plus clair : le titre bleu clair en 13 px y tient 5,9:1 (sur un voile blanc à 6 %,
   4,2:1 seulement, sous le seuil de 4,5:1 — relecture du 24/10, même erreur que celle du 04/10 consignée dans MEMOIRE).
   Sous 600 px, la carte est masquée : elle répète le chapô et allongeait le héros de 300 px. */
.mas-page .mas-hero__carte{background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--mas-rayon);padding:28px 30px}
@media (max-width:600px){ .mas-page .mas-hero__carte{display:none} }
.mas-page .mas-hero__carte-titre{font-family:var(--mas-titre);font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mas-accent-clair);margin-bottom:10px}
.mas-page .mas-hero__liste{margin:0;padding:0;list-style:none}
.mas-hero__liste li{position:relative;padding:12px 0 12px 28px;border-top:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:17px;line-height:1.45}
.mas-hero__liste li:first-child{border-top:0}
.mas-hero__liste li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.18);border:2px solid var(--mas-accent-clair)}

/* Deux bandes de même fond qui se suivent : un filet les sépare, sinon les deux sections se confondent. Cas réel :
   la bande Chantiers ([mas_chantiers], fond sable par défaut) n'apparaît sur une page métier qu'avec son premier
   chantier, et se retrouve alors collée à une bande sable. La branche blanc + blanc ne sert aujourd'hui nulle part. */
.mas-section:not([class*="mas-section--"]) + .mas-section:not([class*="mas-section--"]),
.mas-section--sable + .mas-section--sable{border-top:1px solid var(--mas-ligne)}

/* Quatre cartes métiers (« Chaque métier en détail » de la Rénovation) : 2 + 2 plutôt que 3 + 1 */
@media (min-width:601px){ .mas-metiers:has(> .mas-metier:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)} }

/* Bandeau d'appel [mas_appel] (mas-gabarit.php, décision du 24/10) : fin des pages d'information, à la place du
   formulaire. Mêmes classes que celui des fiches chantier (.mas-cta, section 18) ; posé dans le texte de la page,
   il passe par Post Content (div.bde-rich-text, qui a ses marges de texte) : on redonne les nôtres avec .mas-page. */
.mas-page .mas-appel h2{margin:0}
.mas-page .mas-appel > .mas-wrap > p{margin:var(--mas-e-4) auto var(--mas-e-6)}
.mas-page .mas-appel .mas-boutons{justify-content:center;margin-top:0}
@media (max-width:600px){ .mas-page .mas-appel .mas-btn{flex:1 1 100%} }
@media (max-width:600px){
  .mas-cartes,.mas-cartes:has(> .mas-carte:nth-child(2):last-child){grid-template-columns:1fr}
  .mas-carte{padding:24px}
  .mas-carte > p{font-size:17px}
}

/* -------------------------------------------------------------
   23 d. LE TEXTE COURANT EN BLOCS (.mas-texte, 25/10/2026) : paragraphes de L'entreprise, pages légales.
   La remise à zéro des marges des Groupes (0,2,0, en tête de section 23) collait les paragraphes d'un Groupe
   .mas-texte (la règle de la section 18, 0,1,0, perdait) : on redonne l'interligne en (0,3,0). Le Groupe seulement :
   la description d'une fiche chantier ([mas_chantier], hors blocs) garde la section 18.
   ------------------------------------------------------------- */
.mas-page .wp-block-group.mas-texte{margin-top:0}
.mas-page .wp-block-group.mas-texte > * + *{margin-top:var(--mas-e-4)}
.mas-page .wp-block-group.mas-texte > :is(h2,h3){margin-top:var(--mas-e-7)}
.mas-page .wp-block-group.mas-texte > h2{font-size:clamp(22px,2.6vw,27px)}
.mas-page .wp-block-group.mas-texte > h1 + *{margin-top:var(--mas-e-5)}
.mas-page .wp-block-group.mas-texte li + li{margin-top:var(--mas-e-2)}
.mas-page .mas-legal__maj{font-size:var(--mas-t-xs);color:var(--mas-gris)}

/* =============================================================
   24. ANIMATIONS (reprises d'esthetour, 23/10/2026 : mas-anim.js, chargé par mas-design-tokens.php)
   Discrètes : les cartes et les titres de section apparaissent en montant quand on y arrive, en cascade dans
   une grille ; les étapes s'allument une à une. Garde-fous (ceux d'esthetour) :
   - le héros n'est jamais caché : son H1 et sa photo sont le plus grand élément peint (LCP) ;
   - rien n'est caché sans JavaScript, ni ce qui est déjà à l'écran à l'arrivée : c'est le script qui pose
     .mas-attente, et seulement sur ce qui est sous l'écran (relecture du 23/10 : sur un écran de 1 920 px, le
     titre « Six savoir-faire » restait caché 4 s quand le script ne chargeait pas). html.mas-anim n'est posée
     que si le navigateur sait observer le défilement et que le visiteur n'a pas demandé moins de mouvement ;
   - seuls opacity et translate bougent : aucun décalage de mise en page ;
   - la liste des éléments qui apparaissent est la même ici et dans le script (REVELER).
   ============================================================= */
@media (prefers-reduced-motion:no-preference){
  .mas-anim .mas-attente{
    opacity:0;translate:0 22px;
    transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--mas-delai,0s),translate .7s cubic-bezier(.2,.7,.2,1) var(--mas-delai,0s),
      box-shadow .15s,transform .15s}
  .mas-anim .mas-attente.mas-vu{opacity:1;translate:0 0}
}
/* Les étapes s'allument : la pastille passe au bleu clair quand l'étape atteint le milieu de l'écran */
.mas-etape::before{transition:background-color .5s ease,color .5s ease,box-shadow .5s ease}
/* (le chiffre reste blanc sur bleu nuit, 7,9:1 : le bleu clair de la carte ne porte jamais de texte, 3,1:1) */
.mas-etape.mas-franchie::before{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--mas-accent)}
@media print{ .mas-anim *{opacity:1 !important;translate:none !important} }