@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/figtree/figtree-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/figtree/figtree-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --mdl-paper:#FFFFFF; --mdl-tint:#EAF3F8; --mdl-tint-2:#D9E8F1;
  --mdl-ink:#10212C; --mdl-ink-2:#56697600; --mdl-ink-2:#566976;
  --mdl-blue:#288DC0; --mdl-blue-deep:#1B7099; --mdl-blue-pale:#BFE0F1;
  --mdl-amber:#F7AE1F; --mdl-amber-ink:#1B1300; --mdl-amber-hover:#FFBD3D;
  --mdl-w:144rem; --mdl-gutter:clamp(2rem,4vw,6.4rem); --mdl-sp:clamp(8rem,9vw,13.6rem);
  --mdl-rule:rgba(16,33,44,.15); --mdl-r:2rem; --mdl-ease:cubic-bezier(.2,.7,.2,1);
  --mdl-sans:'Figtree',system-ui,sans-serif; --mdl-serif:var(--mdl-sans);
}
:where(.mdl),:where(.mdl) *{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body:where(:has(.mdl)){font-family:var(--mdl-sans);font-size:1.7rem;line-height:1.6;color:var(--mdl-ink);background:var(--mdl-paper)}
:where(.mdl) img,:where(.mdl) video{display:block;max-width:100%}
:where(.mdl) a{color:inherit}
:where(.mdl) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(.mdl) :focus-visible{outline:3px solid var(--mdl-blue);outline-offset:3px}

/* Neutralisation des styles que Bricks applique à des balises que la proposition L
   laissait hériter. Spécificité alignée sur celle de Bricks (`:where()` compte pour
   zéro) : à égalité, notre feuille gagne parce qu'elle est chargée après la sienne.
   Placé ici, avant les règles de composants, pour que celles-ci gardent le dessus. */
:where(.mdl) figcaption{color:inherit;font-size:inherit;margin:0;text-align:inherit}
:where(.mdl) label{color:inherit}
:where(.mdl) figure{margin:0}
:where(.mdl) h4{line-height:inherit}
:where(.mdl) svg:not([width]){min-width:0}
:where(.mdl) svg:not([height]){min-height:0}
.mdl-wrap{width:min(var(--mdl-w),100% - 2*var(--mdl-gutter));margin-inline:auto}
:where(.mdl) h1,:where(.mdl) h2,.mdl-serif{font-family:var(--mdl-sans);font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
:where(.mdl) h2{font-size:clamp(3.4rem,3.8vw,5.6rem)}
:where(.mdl) h3{font-size:2.2rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
:where(.mdl) p{max-width:62ch}
.mdl-lead{font-size:clamp(1.8rem,1.4vw,2.2rem);line-height:1.5;color:var(--mdl-ink-2)}
.mdl-btn{display:inline-flex;align-items:center;padding:1.6rem 2.56rem;border-radius:0.96rem;font-weight:600;text-decoration:none;line-height:1;transition:background .2s,transform .2s var(--mdl-ease)}
.mdl-btn:active{transform:translateY(1px)}
.mdl-btn-amber{background:var(--mdl-amber);color:var(--mdl-amber-ink)}
.mdl-btn-amber:hover{background:var(--mdl-amber-hover)}
.mdl-btn-line{color:var(--mdl-ink);box-shadow:inset 0 0 0 1.5px var(--mdl-tint-2)}
.mdl-btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--mdl-blue)}
.mdl-link{color:var(--mdl-blue-deep);font-weight:600;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1.5px}
.mdl-link:hover{color:var(--mdl-blue)}
section:where(.mdl){padding-block:var(--mdl-sp)}
.mdl-tinted{background:var(--mdl-tint)}

/* header */
.mdl-top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mdl-top .mdl-wrap{display:flex;align-items:center;gap:3.2rem;min-height:8rem}
.mdl-top .mdl-logo img{height:4rem;width:auto}
.mdl-top nav{margin-left:auto}
.mdl-top nav ul{display:flex;gap:3.6rem;list-style:none}
.mdl-top nav a{text-decoration:none;font-weight:500;font-size:1.52rem}
.mdl-top nav a:hover{color:var(--mdl-blue-deep)}
.mdl-top .mdl-tel{text-decoration:none;font-weight:600;font-size:1.52rem;white-space:nowrap}
.mdl-top .mdl-btn{padding:1.28rem 2rem;font-size:1.52rem}
.mdl-menu{display:none}

/* hero */
/* Le bas du héros n'est PAS à zéro : la vidéo toucherait le fond teinté de la section
   suivante et les deux blocs se souderaient. La maquette réservait cet espace avec un
   `.foot` sous la vidéo, que l'élément ne rend pas — on le remet en rembourrage.
   `min-height` compte le rembourrage (box-sizing:border-box) : le premier écran garde
   donc sa hauteur, c'est le cadre vidéo qui cède les quelques pixels. */
.mdl-hero{padding-top:clamp(4rem,5vw,7.2rem);padding-bottom:clamp(3.2rem,4vw,5.6rem);min-height:calc(100svh - 8rem);display:grid}
.mdl-hero .mdl-wrap{display:grid;grid-template-rows:auto minmax(32rem,1fr);gap:clamp(3.2rem,4vw,5.6rem)}
.mdl-hero .mdl-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2.4rem 6.4rem;align-items:end}
.mdl-hero h1{font-size:clamp(4.6rem,6.8vw,10.4rem);max-width:11ch;opacity:0;transform:translateY(.4em);animation:rise 1s .1s var(--mdl-ease) forwards}
.mdl-hero .mdl-side{display:grid;gap:2.4rem;opacity:0;animation:rise 1s .45s var(--mdl-ease) forwards;transform:translateY(1.6rem)}
.mdl-hero .mdl-side p{max-width:38ch}
.mdl-hero .mdl-ctas{display:flex;flex-wrap:wrap;gap:1.2rem}
.mdl-frame{position:relative;border-radius:var(--mdl-r);overflow:hidden;background:var(--mdl-tint);min-height:32rem;opacity:0;animation:fade 1.4s .3s forwards}
.mdl-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mdl-frame figcaption{position:absolute;left:2rem;bottom:1.76rem;font-size:1.36rem;color:#fff;background:rgba(16,33,44,.55);backdrop-filter:blur(6px);padding:0.72rem 1.28rem;border-radius:0.64rem}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* selector */
.mdl-sel .mdl-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4.8rem 8rem;align-items:start}
.mdl-sel h2{margin-bottom:1.6rem}
.mdl-sel .mdl-lead{margin-bottom:4rem}
.mdl-q{font-weight:600;margin-bottom:1.28rem}
.mdl-pick{position:relative;max-width:41.6rem;margin-bottom:4.4rem}
.mdl-pick-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:1.6rem 1.76rem;border-radius:0.96rem;background:var(--mdl-paper);box-shadow:inset 0 0 0 1.5px var(--mdl-tint-2);font-weight:600;text-align:left;transition:box-shadow .2s}
.mdl-pick-btn svg{width:1.76rem;height:1.76rem;color:var(--mdl-blue);flex:none;transition:transform .25s var(--mdl-ease)}
.mdl-pick-btn:hover,.mdl-pick-btn[aria-expanded="true"]{box-shadow:inset 0 0 0 1.5px var(--mdl-blue)}
.mdl-pick-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mdl-pick-list{position:absolute;left:0;right:0;top:calc(100% + 0.8rem);z-index:6;list-style:none;background:var(--mdl-paper);border-radius:1.36rem;padding:0.72rem;box-shadow:0 24px 48px -12px rgba(16,33,44,.25),0 0 0 1px var(--mdl-tint-2);transform-origin:top;animation:drop .22s var(--mdl-ease)}
@keyframes drop{from{opacity:0;transform:translateY(-0.56rem) scale(.985)}}
.mdl-pick-list li{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:1.2rem 1.36rem;border-radius:0.88rem;cursor:pointer;outline:none}
.mdl-pick-list li small{font-size:1.36rem;color:var(--mdl-ink-2);white-space:nowrap}
.mdl-pick-list li:hover,.mdl-pick-list li:focus{background:var(--mdl-tint)}
.mdl-pick-list li[aria-selected="true"]{background:var(--mdl-amber);color:var(--mdl-amber-ink);font-weight:600}
.mdl-pick-list li[aria-selected="true"] small{color:rgba(27,19,0,.7)}
.mdl-rows{display:grid}
.mdl-rows button{display:grid;grid-template-columns:2.24rem minmax(0,1fr) auto auto;align-items:center;gap:1.6rem;padding:1.44rem 1.44rem 1.44rem 1.2rem;border-radius:0.96rem;text-align:left;border-bottom:1px solid var(--mdl-tint-2);transition:background .2s}
.mdl-rows button:last-child{border-bottom:0}
.mdl-rows button:hover{background:rgba(255,255,255,.7)}
.mdl-rows .mdl-dot{width:1.68rem;height:1.68rem;border-radius:50%;border:1.5px solid var(--mdl-blue);position:relative}
.mdl-rows .mdl-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--mdl-amber-ink);opacity:0;transform:scale(.4);transition:.2s var(--mdl-ease)}
.mdl-rows .mdl-d{font-weight:600}
.mdl-rows .mdl-d small{display:block;font-weight:400;font-size:1.36rem;color:var(--mdl-ink-2)}
.mdl-rows .mdl-g{width:1.76rem;height:1.36rem;background:repeating-linear-gradient(180deg,var(--mdl-blue) 0 2px,transparent 2px 4px);border-radius:2px}
.mdl-rows .mdl-g.mdl-no{visibility:hidden}
.mdl-rows .mdl-p{font-weight:600;font-size:1.76rem;letter-spacing:-.01em;white-space:nowrap}
.mdl-rows button[aria-checked="true"]{background:var(--mdl-amber);color:var(--mdl-amber-ink);border-color:transparent}
.mdl-rows button[aria-checked="true"] .mdl-dot{border-color:var(--mdl-amber-ink)}
.mdl-rows button[aria-checked="true"] .mdl-dot::after{opacity:1;transform:none}
.mdl-rows button[aria-checked="true"] .mdl-d small{color:rgba(27,19,0,.7)}
.mdl-rows button[aria-checked="true"] .mdl-g{background:repeating-linear-gradient(180deg,var(--mdl-amber-ink) 0 2px,transparent 2px 4px)}
.mdl-legend{margin-top:1.6rem;font-size:1.36rem;color:var(--mdl-ink-2);display:flex;align-items:center;gap:0.8rem}
.mdl-legend i{width:1.76rem;height:1.36rem;background:repeating-linear-gradient(180deg,var(--mdl-blue) 0 2px,transparent 2px 4px);border-radius:2px}
.mdl-panel{position:sticky;top:11.2rem}
.mdl-plate{background:var(--mdl-paper);border-radius:var(--mdl-r);padding:clamp(2.4rem,3vw,4.4rem)}
.mdl-plate .mdl-pic{aspect-ratio:16/10;display:grid;place-items:center}
.mdl-plate .mdl-pic img{max-height:100%;width:auto;height:auto;max-width:min(70%,var(--mdl-plan-w,70%));display:none;object-fit:contain}
.mdl-plate .mdl-pic img.mdl-on{display:block;animation:pop .5s var(--mdl-ease)}
@keyframes pop{from{opacity:0;transform:translateY(0.8rem)}}
.mdl-plate .mdl-row{display:flex;justify-content:space-between;align-items:baseline;gap:2.4rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:2.4rem;border-top:1px solid var(--mdl-tint-2)}
.mdl-plate .mdl-dim{font-weight:600;font-size:clamp(3.6rem,3.4vw,5.2rem);letter-spacing:-.03em;line-height:1}
.mdl-plate .mdl-area{color:var(--mdl-ink-2);margin-top:0.56rem}
.mdl-plate .mdl-price{text-align:right}
.mdl-plate .mdl-price b{display:block;font-weight:600;font-size:clamp(3.6rem,3.4vw,5.2rem);letter-spacing:-.03em;line-height:1;color:#CC8200}
.mdl-plate .mdl-price span{color:var(--mdl-ink-2);font-size:1.52rem}
.mdl-plate .mdl-fits{margin-top:2rem;font-size:1.84rem;line-height:1.5;max-width:44ch}
.mdl-plate .mdl-btn{margin-top:2.4rem}
.mdl-note{margin-top:2.4rem;font-size:1.44rem;line-height:1.55;color:var(--mdl-ink-2);max-width:60ch}
.mdl-note+.mdl-note{margin-top:0.8rem;font-size:1.312rem}

/* sur place */
.mdl-place h2{max-width:14ch;margin-bottom:1.6rem}
.mdl-place .mdl-lead{margin-bottom:5.6rem}
.mdl-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem}
.mdl-strip img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--mdl-r)}
.mdl-strip figcaption{margin-top:1.6rem}
.mdl-strip b{display:block;font-weight:600}
.mdl-strip span{color:var(--mdl-ink-2)}

/* types */
/* RONDE 8 — épingle 7 : « peux-on allonger la ligne que ça fit sur une ligne ? »
   « Entreposage commercial » demande 248 px à 22 px de corps ; la colonne en faisait
   245 à 1440 px de fenêtre et 244 à 1439 — celle du client. Le titre tenait donc sur
   une ligne À UN PIXEL PRÈS, et se cassait en deux sur toute la bande 1025-1439.
   Trois réglages, mesurés ensemble sur cette bande :
     · la colonne du titre passe de 4fr à 3fr et la gouttière de 8 à 5,6 rem — c'est
       « allonger la ligne », au sens propre : les trois volets reçoivent la largeur
       que l'intertitre n'utilisait pas (il tient sur deux lignes dans les deux cas) ;
     · la gouttière entre volets passe de 4,8 à 3,2 rem ;
     · le corps du <h3> devient fluide. Les deux premiers ne suffisent pas : sous
       1200 px, aucune largeur de colonne atteignable ne loge 22 caractères à 22 px.
   Le plafond reste 2,2 rem : à 1440 px et au-delà, rien ne bouge. */
.mdl-types .mdl-wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:4.8rem 5.6rem}
.mdl-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3.2rem}
.mdl-three .mdl-ico{width:5.2rem;height:5.2rem;color:var(--mdl-blue);margin-bottom:2.4rem}
.mdl-three h3{margin-bottom:0.8rem;font-size:clamp(1.75rem,1.55vw,2.2rem)}
.mdl-three p{color:var(--mdl-ink-2);margin-bottom:1.44rem}

/* services */
.mdl-services .mdl-two{display:grid;grid-template-columns:1fr 1fr;gap:4.8rem 8rem}
.mdl-services .mdl-services-pic{width:100%;aspect-ratio:4/3;border-radius:var(--mdl-r);background:var(--mdl-tint);overflow:hidden;margin-bottom:2.4rem}
.mdl-services img{width:100%;height:100%;object-fit:cover}
.mdl-services h3{margin-bottom:0.96rem}
.mdl-services p{color:var(--mdl-ink-2);margin-bottom:1.6rem}

/* inclus — registre réglé : les marques restent en dehors du filet */
.mdl-inclus .mdl-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:4.8rem 8rem;align-items:start}
.mdl-inclus h2{max-width:11ch;margin-bottom:1.6rem}
.mdl-inclus .mdl-lead{max-width:32ch;margin-bottom:2.4rem}
.mdl-inclus dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(3.2rem,3.4vw,5.6rem)}
.mdl-inclus .mdl-row{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(1.6rem,1.4vw,2.24rem);align-items:start}
.mdl-inclus .mdl-row svg{width:3.8rem;height:3.8rem;flex:none;margin-top:1.68rem;color:var(--mdl-blue)}
.mdl-inclus .mdl-cell{padding-block:1.6rem 1.84rem;border-top:1px solid var(--mdl-rule)}
/* RONDE 7 — une rangée SANS phrase se centre, terme et pictogramme ensemble.
   Le rembourrage asymétrique (1,6 en haut, 1,84 en bas) et le `margin-top` du
   pictogramme sont calés sur une rangée à deux niveaux, terme puis phrase : le terme
   s'aligne alors sur la première ligne et tout tombe juste. Sans phrase il ne reste
   qu'une ligne à placer, et ces mêmes valeurs la laissent 6 px trop haut pendant que
   le pictogramme, plus grand, paraît centré — d'où le décalage visible sur « Ce que
   vous trouverez à la boutique ». Le sélecteur `:not(:has(dd))` ne mord que là :
   l'élément ne rend plus de <dd> vide (voir elements/modulo-inclus.php). */
.mdl-inclus .mdl-row:not(:has(dd)){align-items:center}
.mdl-inclus .mdl-row:not(:has(dd)) svg{margin-top:0}
.mdl-inclus .mdl-row:not(:has(dd)) .mdl-cell{padding-block:1.72rem}
.mdl-inclus dt{font-weight:600;font-size:clamp(1.8rem,1.05vw,2rem);letter-spacing:-.012em;line-height:1.28;text-wrap:balance}
.mdl-inclus dd{margin:0.48rem 0 0;max-width:32ch;color:var(--mdl-ink-2);font-size:1.6rem;line-height:1.5}
/* Une rangée avec lien (tel:, mailto:, carte) : le trait de `.mdl-link`, plus fin, et le
   bleu profond qui la distingue des phrases voisines restées en texte. */
.mdl-inclus .mdl-inclus-lien{color:var(--mdl-blue-deep);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;overflow-wrap:anywhere}
.mdl-inclus .mdl-inclus-lien:hover{color:var(--mdl-blue)}


/* famille */
/* RONDE 7 — la gouttière entre la colonne familiale et le formulaire passe de 8 rem
   fixes à une valeur qui suit la largeur (≈10,8 rem à 1440). Les deux colonnes se
   touchaient presque : à gauche un paragraphe qui va au bout de sa mesure, à droite des
   champs bordés qui commencent aussitôt, sans rien pour séparer la lecture de la
   saisie. */
.mdl-fam .mdl-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4.8rem clamp(8rem,7.5vw,12.8rem);align-items:start}
.mdl-fam figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--mdl-r)}
.mdl-fam figcaption{margin-top:1.2rem;font-size:1.44rem;color:var(--mdl-ink-2)}
.mdl-fam h2{margin-bottom:2rem}
.mdl-fam .mdl-lead{margin-bottom:3.2rem}
.mdl-fam figure{margin-top:4rem}
.mdl-contact{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem 4.8rem;margin-top:4.8rem;padding-top:4rem;border-top:1px solid var(--mdl-tint-2)}
:root{--mdl-f-bg:var(--mdl-paper);--mdl-f-line:var(--mdl-tint-2);--mdl-f-ph:#93A5B1;--mdl-f-mute:var(--mdl-ink-2);--mdl-f-ok:var(--mdl-tint)}
.mdl-form p{max-width:none;margin-bottom:1.76rem}
.mdl-form label{display:block;font-size:1.44rem;font-weight:600;margin-bottom:0.64rem}
.mdl-form input,.mdl-form select,.mdl-form textarea{width:100%;font:inherit;color:inherit;background:var(--mdl-f-bg);border:1.5px solid var(--mdl-f-line);border-radius:0.96rem;padding:1.36rem 1.6rem;transition:border-color .2s}
.mdl-form textarea{resize:vertical;min-height:11.2rem}
.mdl-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23288DC0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.6rem center;padding-right:4.4rem}
.mdl-form input:focus,.mdl-form select:focus,.mdl-form textarea:focus{outline:none;border-color:var(--mdl-blue)}
.mdl-form ::placeholder{color:var(--mdl-f-ph)}
.mdl-f2{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.mdl-f-act{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:0.8rem}
.mdl-f-note{font-size:1.36rem;color:var(--mdl-f-mute)}
.mdl-f-ok{margin-top:1.6rem;padding:1.6rem 2rem;border-radius:0.96rem;background:var(--mdl-f-ok);font-weight:500}
.mdl-form button[disabled]{opacity:.6;cursor:default}
@media (max-width:600px){.mdl-f2{grid-template-columns:1fr}}

/* Liste « Grandeur souhaitée » : le <select> natif reste en place (envoi du
   formulaire, et seul recours sans JS), modulo.js le masque et pose par-dessus
   une liste maison qui reprend le vocabulaire du sélecteur (.mdl-pick-*).
   Les rem sont à l'échelle Bricks (62,5 %) comme le reste de la feuille. */
/* Chaque bloc du formulaire garde un `transform` posé par GSAP, donc chacun est un
   contexte d'empilement : le z-index de la liste ne peut pas en sortir et les champs
   suivants lui passeraient par-dessus. On monte le <p> lui-même, le temps de l'ouverture. */
.mdl-fsel-p{position:relative}
.mdl-fsel-p.mdl-ouvert{z-index:20}
.mdl-fsel-p.mdl-on select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;clip-path:inset(50%);overflow:hidden}
.mdl-fsel-p.mdl-on label{cursor:pointer}
.mdl-fsel{position:relative}
.mdl-fsel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;font:inherit;color:inherit;text-align:left;background:var(--mdl-f-bg);border:1.5px solid var(--mdl-f-line);border-radius:0.96rem;padding:1.36rem 1.6rem;transition:border-color .2s}
.mdl-fsel-btn:hover{border-color:var(--mdl-blue-pale)}
.mdl-fsel-btn[aria-expanded="true"],.mdl-fsel-btn:focus-visible{outline:none;border-color:var(--mdl-blue)}
.mdl-fsel-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdl-fsel-btn svg{width:1.76rem;height:1.76rem;flex:none;color:var(--mdl-blue);transition:transform .25s var(--mdl-ease)}
.mdl-fsel-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mdl-fsel-list{position:absolute;left:0;right:0;top:calc(100% + 0.64rem);z-index:6;list-style:none;margin:0;padding:0.64rem;max-height:27.2rem;overflow:auto;overscroll-behavior:contain;background:var(--mdl-paper);border-radius:1.36rem;box-shadow:0 24px 48px -12px rgba(16,33,44,.25),0 0 0 1px var(--mdl-tint-2);transform-origin:top;animation:drop .2s var(--mdl-ease)}
.mdl-fsel-list li{display:flex;align-items:baseline;justify-content:space-between;gap:1.6rem;padding:1.04rem 1.28rem;border-radius:0.8rem;cursor:pointer;outline:none;font-weight:500}
.mdl-fsel-list li small{font-size:1.36rem;font-weight:400;color:var(--mdl-ink-2);white-space:nowrap}
.mdl-fsel-list li:hover,.mdl-fsel-list li:focus{background:var(--mdl-tint)}
.mdl-fsel-list li[aria-selected="true"]{background:var(--mdl-amber);color:var(--mdl-amber-ink);font-weight:600}
.mdl-fsel-list li[aria-selected="true"] small{color:rgba(27,19,0,.7)}

.mdl-fam .mdl-tel{display:inline-block;font-weight:600;font-size:clamp(2.8rem,2.6vw,3.6rem);letter-spacing:-.02em;color:var(--mdl-blue-deep);text-decoration:none;line-height:1.1;display:block;margin-bottom:0.8rem}
.mdl-fam .mdl-tel:hover{text-decoration:underline;text-underline-offset:.2em}
.mdl-contact address{font-style:normal;color:var(--mdl-ink-2);line-height:1.6}
.mdl-contact address a{color:var(--mdl-ink)}
.mdl-hours{display:grid;grid-template-columns:auto 1fr;gap:0.64rem 2.4rem;font-size:1.52rem}
.mdl-hours dt{color:var(--mdl-ink-2)}
.mdl-hours dd{font-weight:500}
.mdl-hours .mdl-gate{grid-column:1/-1;margin-top:0.8rem;padding-top:1.28rem;border-top:1px solid var(--mdl-tint-2);display:grid;grid-template-columns:auto 1fr;gap:0.64rem 2.4rem}

/* badge */
.mdl-badge{position:fixed;right:clamp(1.6rem,2vw,2.8rem);bottom:clamp(1.6rem,2vw,2.8rem);z-index:20;width:28rem;padding:2rem;border-radius:1.6rem;background:var(--mdl-paper);color:var(--mdl-ink);box-shadow:0 24px 48px -12px rgba(16,33,44,.28),0 0 0 1px var(--mdl-tint-2);opacity:0;transform:translateY(1.6rem);transition:opacity .5s var(--mdl-ease),transform .5s var(--mdl-ease)}
.mdl-badge-x{color:var(--mdl-ink-2)}.mdl-badge-x:hover{color:var(--mdl-ink);background:var(--mdl-tint)}
.mdl-badge-big{color:#CC8200}.mdl-badge-txt{color:var(--mdl-ink-2)}
.mdl-badge.mdl-in{opacity:1;transform:none}
.mdl-badge.mdl-away{opacity:0;transform:translateY(1.6rem);pointer-events:none}
.mdl-badge-x{position:absolute;top:0.8rem;right:0.96rem;width:3.2rem;height:3.2rem;border-radius:50%;font-size:2.24rem;line-height:1}
.mdl-badge-big{font-size:4.4rem;font-weight:600;letter-spacing:-.04em;line-height:1}
.mdl-badge-txt{font-size:1.44rem;line-height:1.45;margin:0.8rem 0 1.6rem}
.mdl-badge .mdl-btn{padding:1.28rem 1.76rem;font-size:1.44rem;width:100%;justify-content:center}
@media (max-width:768px){.mdl-badge{width:auto;left:1.6rem;right:1.6rem;bottom:1.6rem;display:grid;grid-template-columns:auto 1fr;gap:0.4rem 1.44rem;align-items:center;padding:1.44rem 4.16rem 1.44rem 1.6rem}.mdl-badge-big{font-size:3.04rem;grid-row:1/3}.mdl-badge-txt{margin:0;font-size:1.312rem}.mdl-badge .mdl-btn{grid-column:2;width:auto;justify-self:start;padding:1.04rem 1.44rem;margin-top:0.48rem}}
@media print{.mdl-badge{display:none}}


/* reveal footer */
main:where(:has(.mdl)){position:relative;z-index:1;background:var(--mdl-paper)}
.mdl-foot{position:sticky;bottom:0;z-index:0;background:#10212C;color:#F3F7FA;padding-block:clamp(5.6rem,6vw,8.8rem) 3.2rem}
.mdl-foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:4.8rem 6.4rem}
.mdl-foot-brand img{height:4.4rem;width:auto;margin-bottom:2rem}
.mdl-foot-brand p{color:#9DB0BD;max-width:28ch;margin-bottom:2rem}
.mdl-foot address{font-style:normal;line-height:1.7;color:#9DB0BD}
.mdl-foot address a{color:#F3F7FA;text-decoration:none}
.mdl-foot address a:hover{text-decoration:underline;text-underline-offset:.2em}
.mdl-foot h4{font-size:1.6rem;font-weight:600;margin-bottom:1.76rem}
.mdl-foot nav ul{list-style:none;display:grid;gap:0.96rem}
.mdl-foot nav a{color:#9DB0BD;text-decoration:none;transition:color .2s}
.mdl-foot nav a:hover{color:#fff}
.mdl-foot .mdl-hours{font-size:1.52rem;gap:0.8rem 2.4rem}
.mdl-foot .mdl-hours dt{color:#9DB0BD}
.mdl-foot .mdl-hours dd{font-weight:500;color:#F3F7FA}
.mdl-foot .mdl-hours .mdl-gate{border-top-color:rgba(255,255,255,.14);grid-template-columns:1fr;gap:0.32rem}
.mdl-foot-bottom{margin-top:clamp(4.8rem,5vw,7.2rem);padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.14);display:flex;gap:3.2rem;flex-wrap:wrap;font-size:1.4rem;color:#9DB0BD}
.mdl-foot-bottom a{color:#9DB0BD;text-decoration:none}
.mdl-foot-bottom a:hover{color:#F3F7FA}
/* simulateur */
.mdl-acts{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:2.4rem}
.mdl-acts .mdl-btn{margin-top:0}
.mdl-lib-court{display:none}
@media (max-width:600px){.mdl-lib-long{display:none}.mdl-lib-court{display:inline}}
.mdl-btn-out{color:var(--mdl-ink);box-shadow:inset 0 0 0 1.5px var(--mdl-tint-2)}
.mdl-btn-out:hover{box-shadow:inset 0 0 0 1.5px var(--mdl-blue)}
.mdl-sim{border:0;padding:0;margin:auto;inset:0;position:fixed;width:min(102.4rem,calc(100vw - 3.2rem));max-height:calc(100vh - 3.2rem);border-radius:2rem;background:var(--mdl-paper);color:var(--mdl-ink);box-shadow:0 40px 80px -20px rgba(7,22,31,.5)}
.mdl-sim::backdrop{background:rgba(7,22,31,.6);backdrop-filter:blur(4px)}
.mdl-sim[open]{animation:simin .3s var(--mdl-ease)}
@keyframes simin{from{opacity:0;transform:translateY(1.2rem)}}
/* RONDE 7 — le X remis d'aplomb. Trois défauts tenaient ensemble : le rembourrage
   droit (2,4 rem) était plus court que le gauche (3,2 rem), mais le bouton ajoute
   ses propres 2 rem de demi-cercle — le signe finissait donc à 4,4 rem du bord
   alors que le titre commence à 3,2 rem, et l'ensemble penchait visiblement vers
   l'intérieur ; le bouton n'avait par ailleurs aucun centrage propre (un <button>
   en ligne, son glyphe calé par la seule hauteur de ligne) ; et rien ne l'empêchait
   de se comprimer sous un titre long. 1,2 rem de rembourrage + 2 rem de demi-bouton
   posent le signe à 3,2 rem du bord : exactement l'inset du titre, en miroir. */
.mdl-sim-head{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:2.4rem 1.2rem 0 3.2rem}
/* `margin:0` n'est pas décoratif : Bricks pose 1,6 rem de marge basse sur les h2, et
   `align-items:center` centre la boîte AVEC sa marge. Le titre se trouvait donc calé
   8 px plus haut que le bouton de fermeture — c'est ce décalage qu'on voyait, pas la
   croix qui tombait. L'intervalle avec l'accroche est repris juste en dessous. */
.mdl-sim-head h2{font-size:2.4rem;margin:0}
.mdl-sim-x{display:grid;place-items:center;flex:none;width:4rem;height:4rem;border-radius:50%;color:var(--mdl-ink-2);transition:color .2s,background .2s}
.mdl-sim-x svg{width:1.8rem;height:1.8rem}
.mdl-sim-x:hover{color:var(--mdl-ink);background:var(--mdl-tint)}
.mdl-sim-lead{padding:2.4rem 3.2rem 0;color:var(--mdl-ink-2);max-width:60ch}
.mdl-sim-stage{margin:2.4rem;min-height:min(60vh,54.4rem);border-radius:1.36rem;background:var(--mdl-tint);display:grid;place-items:center;color:var(--mdl-ink-2);text-align:center;padding:3.2rem;overflow:hidden}
/* La boîte de SpaceStacker. Le fournisseur pose ses propres règles sur `.spacestacker`
   en !important depuis une <style> injectée à l'exécution (margin-bottom:130px et un
   fond blanc, taillés pour une page claire) : on les reprend avec un sélecteur plus
   précis, qui gagne quel que soit l'ordre d'arrivée. `stretch` l'emporte sur le
   place-items:center de la zone, qui reste pour le texte d'attente. */
.mdl-sim-stage>.spacestacker{width:100%;height:100%;justify-self:stretch;align-self:stretch;border-radius:inherit;margin-bottom:0!important;background:transparent!important;overflow:hidden!important}
.mdl-sim-stage:not([data-etat="attente"]){padding:0;background:#FFF}
.mdl-sim-stage:not([data-etat="attente"]) .mdl-sim-attente{display:none}
.mdl-sim-stage[data-etat="attente"]>.spacestacker{display:none}
.mdl-sim-attente{max-width:44ch;margin:0}
@media (max-width:600px){.mdl-sim-head{padding-inline:2rem 1.2rem}.mdl-sim-lead{padding-inline:2rem}.mdl-sim-stage{margin:1.6rem}}

@media (max-width:1024px){.mdl-foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.mdl-foot-grid{grid-template-columns:1fr;gap:4rem}}

@media (max-width:1024px){
  .mdl-hero .mdl-head,.mdl-sel .mdl-wrap,.mdl-types .mdl-wrap,.mdl-inclus .mdl-wrap,.mdl-fam .mdl-wrap{grid-template-columns:1fr}
  .mdl-inclus .mdl-lead{max-width:52ch}
  .mdl-panel{position:static}
  .mdl-strip{grid-template-columns:1fr 1fr}
  .mdl-three{grid-template-columns:1fr 1fr}
  /* Le corps fluide du <h3> ne sert QUE la bande à trois colonnes (1025-1440), où la
     colonne est étroite. Ici la section occupe toute la largeur et les volets passent
     à deux : la place est revenue, le titre reprend sa taille. Sans cette ligne, le
     plancher du clamp (1,75 rem) suivrait jusque sur le téléphone, où le volet fait
     707 px de large — un titre rapetissé sans aucune raison. */
  .mdl-three h3{font-size:2.2rem}
}
@media (max-width:768px){
  .mdl-top nav,.mdl-top .mdl-tel{display:none}
  .mdl-menu{display:inline-flex;margin-left:auto;padding:1.12rem 1.44rem;border-radius:0.8rem;box-shadow:inset 0 0 0 1.5px var(--mdl-tint-2);font-size:1.44rem;font-weight:600}
  .mdl-top.mdl-open nav{display:block;position:absolute;top:8rem;left:0;right:0;background:var(--mdl-paper);padding:2.4rem var(--mdl-gutter) 3.2rem;box-shadow:0 20px 40px rgba(16,33,44,.08)}
  .mdl-top.mdl-open nav ul{flex-direction:column;gap:2rem;font-size:2rem}
  /* Le panneau pend sous un en-tête COLLANT : faire défiler la page ne le fait pas
     remonter. Plus haut que l'écran (un 375 × 667 : 796 px de menu), son pied — « À
     propos », le téléphone — restait hors d'atteinte. Il défile donc lui-même, borné à
     ce qui reste sous l'en-tête et la barre d'annonce. `svh` : la hauteur avec les
     barres du navigateur déployées, celle où le pied doit rester visible. */
  .mdl-top.mdl-open nav{max-height:calc(100svh - 8rem - var(--mdl-bar-h,0px));overflow-y:auto;overscroll-behavior:contain}
  .mdl-hero .mdl-wrap{grid-template-rows:auto minmax(25.6rem,1fr)}
  .mdl-rows button{grid-template-columns:2.24rem minmax(0,1fr) auto;gap:1.2rem}
  .mdl-rows .mdl-g{display:none}
  .mdl-strip,.mdl-three,.mdl-services .mdl-two,.mdl-inclus dl,.mdl-contact{grid-template-columns:1fr}
  .mdl-inclus .mdl-row svg{width:3.2rem;height:3.2rem;margin-top:1.6rem}
  /* La règle ci-dessus rendrait son `margin-top` au pictogramme d'une rangée sans
     phrase, que l'on vient justement de centrer : on le reprend ici, au même
     point de rupture, sinon le décalage revient sur téléphone. */
  .mdl-inclus .mdl-row:not(:has(dd)) svg{margin-top:0}
  .mdl-strip img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :where(.mdl),:where(.mdl) *,:where(.mdl) *::before,:where(.mdl) *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .mdl-hero h1,.mdl-hero .mdl-side,.mdl-frame{opacity:1;transform:none}
}

/* — ajouts de l'intégration WordPress — */
/* Pas d'`overflow:hidden` : la span est vide, il ne cachait rien, mais il en faisait un
   conteneur de défilement — et Chrome ignore alors son `scroll-margin-top` (plus bas). */
.mdl-anchor{position:absolute;width:0;height:0;pointer-events:none}
.mdl-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* — Bricks enveloppe les gabarits — */
/* La maquette posait l'en-tête et le pied de page en enfants directs de <body>.
   Bricks les enferme dans <header id="brx-header"> et <footer id="brx-footer">, tous deux
   en `position:relative` et hauts comme leur contenu : un `position:sticky` sur notre
   élément n'a alors aucune marge de manoeuvre et ne colle plus. On déplace donc le
   collage sur l'enveloppe, en ne visant que les pages où nos éléments sont posés. */
#brx-header:has(.mdl-top){position:sticky;top:0;z-index:10}
#brx-footer:has(.mdl-foot){position:sticky;bottom:0;z-index:0}
#brx-footer:has(.mdl-foot) .mdl-foot{position:static}

/* Toute ancre (#contact, /#grandeurs, le lien d'évitement, un scrollIntoView) s'arrête
   sous l'en-tête collant au lieu de glisser dessous. `--mdl-header-h` est la hauteur qui
   reste à l'écran une fois l'en-tête collé — barre d'annonce déduite — mesurée par
   initHauteurEntete() dans modulo.js ; 8rem est le repli sans script. */
html:has(#brx-header .mdl-top){scroll-padding-top:var(--mdl-header-h,8rem)}
/* `.mdl-anchor` est hors flux mais sans `top` : il reste là où il serait, SOUS le
   rembourrage haut de la section. Sans ce retrait, l'ancre amènerait le titre collé à
   l'en-tête et cacherait le haut de la section ; avec, c'est le bord de la section qui
   s'arrête sous l'en-tête, comme quand on y arrive en défilant. */
section:where(.mdl) > .mdl-anchor{scroll-margin-top:var(--mdl-sp)}

/* La pastille promo n'était masquée que par l'opacité : elle restait cliquable et
   tabulable tant que le script ne l'avait pas révélée. */
.mdl-badge{visibility:hidden;pointer-events:none}
.mdl-badge.mdl-in{visibility:visible;pointer-events:auto}
.mdl-badge.mdl-away{visibility:hidden;pointer-events:none}