.nac-a { background: var(--fond); }
.sxp-root, .sxp-track { position: relative; width: 100%; }
.sxp-stage { position: relative; width: 100%; height: calc(100vh - var(--haut-fixe) - var(--entete)); height: calc(100svh - var(--haut-fixe) - var(--entete)); min-height: 520px; overflow: hidden; --sxp-title-size: 4rem; }
.sxp-root.anime .sxp-stage { position: sticky; top: 0; min-height: 0; }
.sxp-frame { position: absolute; inset: 0; }
.sxp-root.anime .sxp-frame { clip-path: inset(18% 28% 18% 28% round 4px); will-change: clip-path; }
.sxp-frame picture { position: absolute; inset: 0; }
.sxp-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.sxp-root.anime .sxp-media { will-change: transform; transform: scale(1.18); }
.sxp-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(18, 20, 22, .92), rgba(18, 20, 22, .84) 36%, rgba(18, 20, 22, 0) 60%); }
.sxp-root.anime .sxp-scrim { opacity: 0; }
.sxp-title {
position: absolute; left: 0; right: 0; top: 0; height: 18%; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
margin: 0; padding: 0 6%; text-align: center; font: 800 var(--sxp-title-size)/1 var(--titre); font-variation-settings: "wdth" 125; letter-spacing: -.015em;
color: var(--texte); pointer-events: none;
}
.sxp-root.anime .sxp-title { display: flex; will-change: opacity, transform; }
.sxp-title small { font: 500 13px/1.4 var(--titre); color: var(--cyan-texte); }
.sxp-overlay {
position: absolute; left: var(--marge); bottom: calc(var(--bas-barre, 0px) + clamp(22px, 6vh, 64px)); display: flex; flex-direction: column; align-items: flex-start;
gap: 14px; max-width: min(760px, 44vw); color: #FFFFFF;
}
.sxp-root.anime .sxp-overlay { opacity: 0; will-change: opacity, transform; }
.sxp-overlay .etiquette { color: var(--cyan); font-size: 14px; font-weight: 600; }
.sxp-overlay h2 { margin: 0; color: #FFFFFF; font-size: clamp(40px, 4.4vw, 68px); }
.sxp-overlay .c { color: var(--cyan); }
.sxp-overlay .prix { margin: 0; font-size: clamp(19px, 1.6vw, 24px); color: rgba(255, 255, 255, .92); }
.sxp-overlay .prix b { font-family: var(--titre); font-weight: 800; font-variation-settings: "wdth" 118; font-size: 1.5em; color: #FFFFFF; }
.sxp-overlay .bouton { margin-top: 6px; }
.sxp-overlay .legende { margin: 4px 0 0; font-size: 13px; color: rgba(255, 255, 255, .78); }
@media (max-width: 699px) {
.sxp-stage { min-height: 0; }
.sxp-media { object-position: 50% 30%; }
.sxp-overlay { right: var(--marge); gap: 10px; max-width: none; }
.sxp-overlay h2 { font-size: clamp(32px, 9.6vw, 38px); }
.sxp-scrim { background: linear-gradient(0deg, rgba(18, 20, 22, .94) 0, rgba(18, 20, 22, .92) 70%, rgba(18, 20, 22, .78) 86%, rgba(18, 20, 22, 0) 100%); }
.sxp-title { font-size: 30px; }
}
.mb-bouton, .mb-voile, .mb-feuille { display: none; }
@media (max-width: 699px) {
.barre { grid-template-columns: 64px 1fr 1fr 48px; gap: 6px; padding-inline: 6px; }
.barre .bouton { font-size: 15px; padding: 0 6px; }
.mb-bouton {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 48px; padding: 0;
border: 1.5px solid var(--texte); border-radius: 2px; background: #FFFFFF; color: var(--texte); font: 600 13px/1 var(--titre); cursor: pointer;
}
.mb-bouton:active { transform: scale(.98); }
.mb-traits { position: relative; width: 20px; height: 12px; }
.mb-traits i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1); }
.mb-traits i:first-child { top: 1px; }
.mb-traits i:last-child { top: 9px; }
body.mb-ouvert .mb-traits i:first-child { top: 5px; transform: rotate(45deg); }
body.mb-ouvert .mb-traits i:last-child { top: 5px; transform: rotate(-45deg); }
body.mb-ouvert .mb-bouton { background: var(--texte); color: #FFFFFF; }
body.mb-ouvert { overflow: hidden; }
body.mb-ouvert .marius { display: none; }
.entete .bouton-menu { min-height: 44px; }
.entete .logo { display: inline-flex; align-items: center; min-height: 44px; }
.mb-voile { display: block; position: fixed; inset: 0; z-index: 53; background: rgba(30, 30, 30, .55); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
body.mb-ouvert .mb-voile { opacity: 1; visibility: visible; transition: opacity .35s; }
.mb-feuille {
display: block; position: fixed; left: 0; right: 0; bottom: calc(64px + var(--sous)); z-index: 54;
max-height: calc(100vh - var(--haut-fixe) - 64px - var(--sous) - 16px); max-height: calc(100dvh - var(--haut-fixe) - 64px - var(--sous) - 16px);
overflow-y: auto; overscroll-behavior: contain; background: var(--fond); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px rgba(20, 20, 20, .25);
padding: 0 14px 14px; transform: translateY(calc(100% + 80px)); visibility: hidden; transition: transform .5s cubic-bezier(.2, .9, .2, 1), visibility 0s .5s;
}
body.mb-ouvert .mb-feuille { transform: translateY(var(--tire, 0px)); visibility: visible; transition: transform .5s cubic-bezier(.2, .9, .2, 1); }
.mb-feuille.tire { transition: none !important; }
}
.mb-poignee { display: block; position: relative; width: 100%; height: 44px; margin: 0 0 -6px; border: 0; background: none; cursor: grab; touch-action: none; }
.mb-poignee::after { content: ""; position: absolute; left: 50%; top: 14px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #C9C2B6; }
.mb-trois { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mb-tuile {
position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 112px; padding: 10px; overflow: hidden;
text-decoration: none; color: #FFFFFF; background: #3A3A3A center / cover no-repeat;
}
.mb-tuile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 20, 20, .92) 0, rgba(20, 20, 20, .8) 50%, rgba(20, 20, 20, .66) 100%); }
.mb-tuile.cyan { background: var(--cyan); color: var(--texte); }
.mb-tuile.cyan::before { display: none; }
.mb-tuile b, .mb-tuile small { position: relative; }
.mb-tuile b { font: 700 17px/1.05 var(--titre); font-variation-settings: "wdth" 104; }
.mb-tuile small { margin-top: 4px; font: 500 13px/1.25 var(--titre); color: rgba(255, 255, 255, .92); }
.mb-tuile.cyan small { color: var(--texte); }
.mb-tuile .illu { position: absolute; right: 5px; top: 5px; padding: 2px 4px; background: rgba(20, 20, 20, .6); font: 400 9px/1.2 var(--titre); color: rgba(255, 255, 255, .85); }
.mb-titre { margin: 16px 2px 8px; font: 600 13px/1.2 var(--titre); color: var(--cyan-texte); }
.mb-pages { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; padding: 0 2px; }
.mb-pages a { display: flex; align-items: center; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--trait); color: var(--texte); text-decoration: none; font: 500 17px/1.15 var(--titre); }
.mb-pages a:active, .mb-trois a:active { transform: scale(.98); }
.mb-pages a[aria-current] { color: var(--cyan-texte); font-weight: 700; border-bottom-color: var(--cyan); }
.mb-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding: 0 2px; font: 400 12px/1.4 var(--titre); color: var(--doux); }
.mb-pied a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte); font: 700 18px/1 var(--titre); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .mb-feuille, .mb-voile, .mb-traits i { transition-duration: 1ms !important; } }
:root .cb-i {
display: inline-block; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75;
stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px;
}
:root .cb-point, :root .bouton-menu .trois, :root .barre .mb-bouton { display: none; }
:root { --r-btn: 999px; --r-champ: 12px; --r-carte: 16px; }
:root :is(.bouton, .copier, .bouton-menu, .metier-ouvrir, .essayer, .puce, .marius .saisie button, .rb-fleches button,
.defile-boutons button, .sim-bascule button, #simulateur .sim-bascule button, .sim-plein .dock-onglets button, .entete .tel,
.visionneuse button, .faq-categories button, .choix-sim-bascule) { border-radius: var(--r-btn); }
:root :is(.champ input, .champ textarea, .champ select, .formulaire-l2 .champ select, .formulaire-l2 .champ input[type="date"],
.formulaire-l2 .champ input[type="file"], .faq-recherche input, .marius .saisie input) { border-radius: var(--r-champ); }
:root :is(.carte-choix, .tuile, .l2s-volet, .bande-materiaux a, .tuile-equipe, .outil, .mb-tuile, .renvoi-sim img, .paires img,
.sim-bascule, #simulateur .sim-bascule, .page-soumission .carte-choix:has(.cc-photo), .choix-sim, .fiche-marius, .apercu-marius) { border-radius: var(--r-carte); }
:root :is(.mb-tuile, .tuile, .l2s-volet, .tuile-equipe) { overflow: hidden; }
:root .l2s-cas i { border-radius: 6px; }
:root .copier { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; }
@media (max-width: 699px) { :root .copier { min-height: 44px; } }
:root .lien-action { border-bottom: 0; text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 6px; }
:root .choix-sim-bascule { text-decoration: none; border: 1px solid #C9CFD3; background: #FFFFFF; margin: 0; padding: 0 16px; }
:root .choix-sim-bascule:hover { border-color: var(--texte); }
:root .outil-icone { border-radius: 12px; background: #E2F3F8; }
:root .outil-icone svg { stroke: var(--cyan-texte); stroke-width: 1.75; }
:root .cb-dt {
width: 28px; height: 28px; padding: 6px; margin: 0 10px 0 0; vertical-align: middle; border-radius: 9px;
background: #E2F3F8; color: var(--cyan-texte);
}
:root .anthracite .cb-dt, :root .jt2.sombre .cb-dt { background: rgba(0, 168, 208, .16); color: var(--cyan); }
:root .coordonnees .k { display: inline-flex; align-items: center; }
:root .pied-services a { display: inline-flex; align-items: center; gap: 8px; }
:root .pied-services .cb-i { width: 16px; height: 16px; color: var(--cyan); }
:root .mb-pages a { gap: 10px; }
:root .mb-pages a > span { flex: 1; min-width: 0; }
:root .mb-pages .cb-i { width: 20px; height: 20px; color: var(--cyan-texte); }
:root .mb-pages .cb-chev { width: 16px; height: 16px; color: #9AA0A4; }
:root .mb-pages a[aria-current] .cb-chev { color: var(--cyan-texte); }
:root .mb-pied a, :root .mb-pied span { gap: 7px; display: inline-flex; align-items: center; }
:root .mb-pied .cb-i { color: var(--cyan-texte); }
:root .mb-tuile b { font-size: 15.5px; }
:root .bande-info { background: var(--anthracite); color: rgba(255, 255, 255, .8); border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: 13.5px; }
:root .bande-info .cb-infos { display: flex; align-items: center; gap: 22px; min-width: 0; }
:root .bande-info .cb-infos > span, :root .bande-info a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
:root .bande-info a { min-height: 34px; color: #FFFFFF; }
:root .bande-info .cb-i { width: 16px; height: 16px; color: var(--cyan); }
:root .bande-info .cb-rbq { padding: 3px 11px 3px 8px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; color: #FFFFFF; }
:root .entete, :root .entete.plein, :root body:has(.heros, .tete-service) .entete, :root body:has(.l2s-heros, .l2s-tete) .entete {
background: var(--anthracite); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
transition: height .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
}
:root .entete .logo { flex: none; }
:root .entete .logo img { transition: height .4s; }
:root .entete nav a { position: relative; padding: 8px 2px; color: rgba(255, 255, 255, .8); white-space: nowrap; }
:root .entete nav a:hover { color: #FFFFFF; }
:root .entete nav a[aria-current="page"] { color: #FFFFFF; font-weight: 600; box-shadow: none; }
:root .entete nav a[aria-current="page"]::after {
content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--cyan);
}
:root .entete :focus-visible, :root .bande-info :focus-visible, :root .barre :focus-visible { outline-color: var(--cyan); }
:root .bouton-menu { gap: 8px; background: transparent; border-color: rgba(255, 255, 255, .55); color: #FFFFFF; }
:root .bouton-menu .cb-i { display: inline-block; }
:root .entete .tel { color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
:root .entete .tel .cb-i { color: var(--cyan); width: 16px; height: 16px; }
:root .entete .tel:hover { background: #FFFFFF; color: var(--texte); }
@media (min-width: 700px) and (max-width: 1023px) { :root .entete .tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; } }
@media (min-width: 1200px) {
:root .entete nav a:not(.accueil-menu) { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
:root .entete {
transition: top .5s cubic-bezier(.2, .8, .2, 1), left .5s cubic-bezier(.2, .8, .2, 1), right .5s cubic-bezier(.2, .8, .2, 1), height .5s,
border-radius .5s, padding .5s, box-shadow .5s;
}
:root .bande-info { transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
:root body:has(.entete.plein) .bande-info { transform: translateY(-100%); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility 0s .45s; }
:root .entete.plein {
top: calc(var(--haut-fixe) - var(--info) + 10px); left: max(16px, calc(50% - 704px)); right: max(16px, calc(50% - 704px));
height: 62px; padding: 0 8px 0 26px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .08);
box-shadow: 0 18px 30px -10px rgba(12, 14, 16, .4), 0 2px 6px rgba(12, 14, 16, .12);
}
:root .entete.plein .logo img { height: 32px; }
:root body:has(.entete.plein) { --colle: calc(var(--haut-fixe) - var(--info) + 72px); }
:root body:has(.entete.plein) .sxp-root.anime .sxp-stage { top: var(--colle) !important; height: calc(100vh - var(--colle)) !important; }
:root body:has(.entete.plein) :is(.nuancier:not(.nuancier-tete) .nuancier-scene, .rb-scene) { top: var(--colle); }
:root body:has(.entete.plein):not(.sim-plein) .sim-scene { top: calc(var(--colle) + 20px); }
:root body:has(.entete.plein) .coupe .vue { top: calc(var(--colle) + 24px); }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
:root body:has(.entete.plein) .coupe .vue { top: auto; }
}
:root body:has(.entete.plein)::before {
content: ""; position: fixed; z-index: 49; left: 0; right: 0; top: calc(var(--haut-fixe) - var(--info)); height: 92px; pointer-events: none;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
}
@media (min-width: 1200px) and (max-width: 1359px) {
:root .entete { gap: 14px; }
:root .entete .logo img { height: 34px; }
:root .entete nav { gap: 14px; }
:root .entete nav a { font-size: 13.5px; }
}
@media (max-width: 1199px) {
:root body.menu-ouvert .entete nav a { color: var(--texte); }
:root body.menu-ouvert .entete nav a[aria-current="page"]::after { content: none; }
}
:root .soumission-entete, :root .barre .soumission-bas { gap: 10px; padding: 0 6px 0 22px; color: #232323; }
:root .soumission-entete { flex: none; min-height: 46px; }
:root .soumission-entete::after, :root .barre .soumission-bas::after { display: none; }
:root .soumission-entete::before, :root .barre .soumission-bas::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #1F2326;
clip-path: circle(17px at calc(100% - 23px) 50%); transition: clip-path .5s cubic-bezier(.2, .8, .2, 1);
}
:root .soumission-entete .cb-rond, :root .barre .soumission-bas .cb-rond { display: inline-grid; place-items: center; width: 34px; height: 34px; color: #FFFFFF; }
:root .cb-rond .cb-i { animation: cb-pousse 4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes cb-pousse { 0%, 72%, 100% { transform: none; } 82% { transform: translateX(4px); } 90% { transform: translateX(-1px); } }
:root .soumission-entete:hover, :root .soumission-entete:focus-visible { color: #FFFFFF; box-shadow: none; }
:root .soumission-entete:hover::before, :root .soumission-entete:focus-visible::before { clip-path: circle(140% at calc(100% - 23px) 50%); }
@media (max-width: 699px) {
:root .entete .logo img { height: 28px; }
:root .entete .bouton-menu { min-height: 44px; padding: 0 14px; font: 600 14px/1 var(--titre); letter-spacing: 0; text-transform: none; }
:root .entete .bouton-menu .mot-menu { font: inherit; }
:root body.mb-ouvert .entete { z-index: 56; }
:root body.mb-ouvert .entete .bouton-menu { background: #FFFFFF; color: var(--texte); border-color: #FFFFFF; }
:root .barre { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) 48px; gap: 8px; padding-inline: 10px; background: var(--anthracite); border-top-color: transparent; }
:root .barre .appel-bas { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 999px;
background: #F2EFE9; color: #1B1B1B; font: 700 15px/1 var(--titre); text-decoration: none; white-space: nowrap; }
:root .barre .appel-bas .cb-i { width: 18px; height: 18px; }
:root .barre .appel-bas:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
:root .barre .soumission-bas { min-height: 48px; font-size: 16px; color: #1B1B1B; }
:root .barre .soumission-bas { justify-content: space-between; padding-left: 16px; }
:root .barre .soumission-bas .cb-mot { flex: 1; text-align: center; }
:root .barre .ecrire { width: 48px; height: 48px; }
:root .mb-feuille {
top: calc(var(--haut-fixe) + var(--entete)); bottom: auto; border-radius: 0 0 22px 22px; padding-top: 14px;
max-height: calc(100vh - var(--haut-fixe) - var(--entete) - 64px - var(--sous) - 12px);
max-height: calc(100dvh - var(--haut-fixe) - var(--entete) - 64px - var(--sous) - 12px);
transform: translateY(calc(-100% - var(--haut-fixe) - var(--entete) - 20px)); box-shadow: 0 22px 40px rgba(20, 20, 20, .25);
}
:root body.mb-ouvert .mb-feuille { transform: none; }
:root .mb-poignee { display: none; }
}
@media (max-width: 699px) {
:root .sxp-scrim { background: linear-gradient(0deg, rgba(18, 20, 22, .94) 0, rgba(18, 20, 22, .92) 70%, rgba(18, 20, 22, .78) 86%, rgba(18, 20, 22, .55) 100%); }
:root .choix-sim.repliable:not(.replie):not(.avec-image) .choix-sim-repli { position: static; order: 3; justify-content: flex-end; margin-top: 4px; }
:root .choix-sim.repliable:not(.replie):not(.avec-image) .choix-sim-titre { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
:root .cb-i { animation: none !important; }
:root .entete, :root .bande-info, :root .soumission-entete::before, :root .barre .soumission-bas::before { transition: none !important; }
}
:root .bande-info a { min-height: 44px; margin-block: -5px; }
:root .entete .logo { display: inline-flex; align-items: center; min-height: 44px; }
:root .coord .copier { min-height: 44px; margin-block: -6px; }
:root .coord dd > a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }