@font-face{font-family:"Hanken Grotesk";src:url(/polices/hanken-grotesk-var.0c1c4c9142.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url(/polices/spectral-300.7e9c4a35e9.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
:root{
--couleur-fond:#F0F0ED;
--couleur-surface:#E4E3E0;
--couleur-filet:#D0CFCB;
--couleur-bord-champ:#82817B;
--couleur-encre:#1A1916;
--couleur-encre-douce:#5C5B55;
--couleur-nuit:#14130F;
--couleur-nuit-surface:#22201C;
--couleur-sur-nuit:#F0F0ED;
--couleur-sur-nuit-douce:#A9A8A2;
--couleur-accent:#CCA459;
--couleur-accent-fonce:#876125;
--couleur-accent-pale:#E9DCC0;
--couleur-sur-accent:#14130F;
--couleur-bouton:#1A1916;
--couleur-bouton-survol:#34322D;
--couleur-focus:currentColor;
--couleur-erreur:#A83825;
--couleur-succes:#3D6B4A;
--police-texte:"Hanken Grotesk",Arial,sans-serif;
--police-titre:var(--police-texte);
--police-chiffres:"Spectral",Georgia,serif;
--graisse-texte:400;
--graisse-menu:450;
--graisse-titre:560;
--graisse-forte:600;
--graisse-chiffres:300;
--interligne-texte:1.5;
--interligne-chapeau:1.45;
--interligne-titre:1.04;
--interligne-affichage:.98;
--interligne-prix:1;
--approche-titre:-.03em;
--approche-affichage:-.04em;
--approche-prix:-.02em;
--taille--1:.875rem;
--taille-0:1.0625rem;
--taille-1:clamp(1.0625rem,.98rem + .37vw,1.25rem);
--taille-3:min(clamp(1.875rem,1.5rem + 1.67vw,3rem),10.5vw);
--taille-prix:min(clamp(2.125rem,1.83rem + 1.3vw,3rem),12vw);
--taille-5:min(clamp(2.5rem,1.5rem + 4.44vw,5.5rem),14vw);
--taille-2:var(--taille-1);
--taille-4:var(--taille-3);
--taille-6:var(--taille-5);
--espace-2xs:.25rem;
--espace-xs:.5rem;
--espace-s:min(.75rem,3.75vw);
--espace-m:min(1rem,5vw);
--espace-l:min(1.5rem,7.5vw);
--espace-xl:min(2rem,10vw);
--espace-2xl:min(3rem,15vw);
--espace-3xl:min(4.5rem,22.5vw);
--espace-4xl:min(6rem,30vw);
--espace-section:min(clamp(4rem,2.7rem + 5.9vw,8rem),20vw);
--marge:min(clamp(.5rem,.27rem + 1.04vw,1.25rem),2.5vw);
--gouttiere:min(clamp(1.25rem,.8rem + 2vw,3rem),6.25vw);
--colonnes:12;
--ecart-colonnes:min(1.5rem,7.5vw);
--espace-3xs:.125rem;
--espace-l-2xl:min(clamp(1.5rem,1rem + 2.22vw,3rem),7.5vw);
--espace-xl-3xl:min(clamp(2rem,1.17rem + 3.7vw,4.5rem),10vw);
--mesure-page:100%;
--mesure-texte:62ch;
--hauteur-entete:4.5rem;
--hauteur-entete-tel:60px;
--hauteur-barre-appel:84px;
--cadre-hauteur-max:51.25rem;
--cadre-hauteur-min:35rem;
--barre-appel-totale:calc(var(--hauteur-barre-appel) + env(safe-area-inset-bottom, 0px));
--rayon-cadre:clamp(1rem,.85rem + .74vw,1.5rem);
--rayon-m:.625rem;
--rayon-s:var(--rayon-m);
--rayon-rond:999px;
--trait:1px;
--logo-hauteur:1.875rem;
--logo-hauteur-tel:26px;
--bouton-hauteur:2.75rem;
--bouton-hauteur-fort:3.25rem;
--v:1;
--duree-courte:calc(180ms * var(--v));
--duree-moyenne:calc(500ms * var(--v));
--duree-ouverture:calc(600ms * var(--v));
--decalage-titre:calc(250ms * var(--v));
--decalage-action:calc(350ms * var(--v));
--mouvement-distance:.75rem;
--echelle-objet:1.04;
--courbe-sortie:cubic-bezier(.12,.23,.17,.99);
--courbe-douce:cubic-bezier(.58,.01,.29,.95);
--plan-entete:5;
--plan-barre:6;
--plan-menu:10;
--plan-evitement:20;
}
@media (min-width: 64em) {
html {
font-size: 90%;
}
}
@layer base {
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-block-start: calc(var(--hauteur-entete) + var(--espace-s));
hanging-punctuation: first last;
}
@media (prefers-reduced-motion: no-preference) {
html:focus-within {
scroll-behavior: smooth;
}
}
body {
min-block-size: 100svh;
background: var(--couleur-fond);
color: var(--couleur-encre);
font-family: var(--police-texte);
font-size: var(--taille-0);
font-weight: var(--graisse-texte);
line-height: var(--interligne-texte);
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img,
picture,
svg,
video,
canvas {
display: block;
max-inline-size: 100%;
}
img,
video {
block-size: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
cursor: pointer;
}
textarea {
resize: vertical;
field-sizing: content;
min-block-size: 8lh;
}
h1,
h2,
h3,
h4 {
font-family: var(--police-titre);
font-weight: var(--graisse-titre);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
text-wrap: balance;
overflow-wrap: anywhere;
}
h1 {
font-size: var(--taille-6);
}
h2 {
font-size: var(--taille-4);
}
h3 {
font-size: var(--taille-2);
letter-spacing: calc(var(--approche-titre) * 0.6);
}
p,
li,
dd,
figcaption {
text-wrap: pretty;
overflow-wrap: anywhere;
}
ul[role="list"],
ol[role="list"] {
list-style: none;
padding: 0;
}
a {
color: inherit;
text-decoration-thickness: var(--trait);
text-underline-offset: 0.22em;
}
a:hover {
text-decoration-thickness: calc(var(--trait) * 2);
}
strong,
b {
font-weight: var(--graisse-forte);
}
::selection {
background: var(--couleur-encre);
color: var(--couleur-fond);
}
:focus-visible {
outline: 2px solid var(--couleur-focus);
outline-offset: 3px;
border-radius: var(--rayon-s);
}
[tabindex="-1"]:focus {
outline: none;
}
:where([hidden]:not([hidden="until-found"])) {
display: none;
}
.visuellement-cache {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.evitement {
position: absolute;
inset-inline-start: var(--gouttiere);
inset-block-start: var(--espace-xs);
z-index: var(--plan-evitement);
padding: var(--espace-2xs) var(--espace-s);
background: var(--couleur-encre);
color: var(--couleur-fond);
border-radius: var(--rayon-s);
translate: 0 -200%;
}
.evitement:focus {
translate: 0 0;
}
.insecable {
white-space: nowrap;
}
}
@layer mise {
.conteneur {
--conteneur-mesure: var(--mesure-page);
display: grid;
grid-template-columns:
[plein-start] minmax(var(--gouttiere), 1fr)
[contenu-start] min(100% - 2 * var(--gouttiere), var(--conteneur-mesure))
[contenu-end] minmax(var(--gouttiere), 1fr) [plein-end];
}
.conteneur > * {
grid-column: contenu;
min-inline-size: 0;
}
.conteneur > .plein-cadre {
grid-column: plein;
}
.conteneur--etroit {
--conteneur-mesure: 48rem;
}
.pile {
--pile-espace: var(--espace-s);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.pile > * + * {
margin-block-start: var(--pile-espace);
}
.pile > .pile-pousse {
margin-block-start: auto;
}
.grille {
--grille-min: 16rem;
--grille-espace: var(--espace-m);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--grille-min), 100%), 1fr));
gap: var(--grille-espace);
}
.bascule {
--bascule-seuil: 44rem;
--bascule-espace: var(--espace-l);
display: flex;
flex-wrap: wrap;
gap: var(--bascule-espace);
}
.bascule > * {
flex-grow: 1;
flex-basis: calc((var(--bascule-seuil) - 100%) * 999);
min-inline-size: 0;
}
.bascule > .bascule-large {
flex-grow: 2;
}
.groupe {
--groupe-espace: var(--espace-xs);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--groupe-espace);
}
.plein-cadre {
inline-size: 100%;
}
.bloc {
padding-block: var(--espace-xl-3xl);
}
.bloc--serre {
padding-block: var(--espace-l-2xl);
}
.mesure {
max-inline-size: var(--mesure-texte);
}
.cadre {
--cadre-ratio: 3 / 2;
position: relative;
aspect-ratio: var(--cadre-ratio);
overflow: hidden;
background: var(--couleur-surface);
}
.cadre > img,
.cadre > picture,
.cadre > picture > img,
.cadre > video {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
}
@layer composants {
.entete {
position: sticky;
inset-block-start: 0;
z-index: var(--plan-entete);
background: var(--couleur-fond);
border-block-end: var(--trait) solid transparent;
transition: border-color var(--duree-moyenne) var(--courbe-sortie);
view-transition-name: entete;
}
.entete[data-defile] {
border-block-end-color: var(--couleur-filet);
}
.entete-dedans {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--espace-2xs) var(--espace-m);
min-block-size: var(--hauteur-entete);
padding-block: var(--espace-2xs);
}
.marque {
font-weight: var(--graisse-forte);
font-size: var(--taille-0);
letter-spacing: -0.012em;
text-decoration: none;
white-space: nowrap;
}
.navigation ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--espace-3xs) var(--espace-m);
padding: 0;
list-style: none;
}
.navigation a:not(.bouton) {
display: inline-block;
padding-block: var(--espace-3xs);
font-size: var(--taille--1);
text-decoration-line: underline;
text-decoration-color: transparent;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
.navigation a:not(.bouton):hover,
.navigation a[aria-current="page"] {
text-decoration-color: currentColor;
}
.menu-bouton {
display: none;
align-items: center;
gap: var(--espace-2xs);
min-block-size: 2.75rem;
padding: 0 var(--espace-2xs);
border: 0;
background: none;
font-size: var(--taille--1);
}
.menu-traits {
position: relative;
inline-size: 1.25rem;
block-size: 0.6rem;
}
.menu-traits::before,
.menu-traits::after {
content: "";
position: absolute;
inset-inline: 0;
block-size: 1.5px;
background: currentColor;
transition: translate var(--duree-courte) var(--courbe-sortie), rotate var(--duree-courte) var(--courbe-sortie);
}
.menu-traits::before {
inset-block-start: 0;
}
.menu-traits::after {
inset-block-end: 0;
}
.menu-bouton[aria-expanded="true"] .menu-traits::before {
translate: 0 0.27rem;
rotate: 45deg;
}
.menu-bouton[aria-expanded="true"] .menu-traits::after {
translate: 0 -0.27rem;
rotate: -45deg;
}
@media (max-width: 84.99em) {
.js .menu-bouton:not([hidden]) {
display: inline-flex;
}
.js .navigation {
position: fixed;
inset: var(--hauteur-entete) 0 0 0;
z-index: var(--plan-menu);
display: flex;
flex-direction: column;
gap: var(--espace-l);
padding: var(--espace-l) var(--gouttiere) var(--espace-xl);
overflow-y: auto;
background: var(--couleur-fond);
visibility: hidden;
opacity: 0;
translate: 0 calc(var(--espace-xs) * -1);
transition:
opacity var(--duree-moyenne) var(--courbe-sortie),
translate var(--duree-moyenne) var(--courbe-douce),
visibility 0s linear var(--duree-moyenne);
}
.js .navigation[data-ouvert] {
visibility: visible;
opacity: 1;
translate: 0 0;
transition:
opacity var(--duree-moyenne) var(--courbe-sortie),
translate var(--duree-moyenne) var(--courbe-douce),
visibility 0s;
}
.js .navigation ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.js .navigation li {
border-block-end: var(--trait) solid var(--couleur-filet);
}
.js .navigation a:not(.bouton) {
display: block;
padding-block: var(--espace-xs);
font-size: var(--taille-3);
letter-spacing: var(--approche-titre);
}
}
.menu-ouvert {
overflow: hidden;
}
.bouton {
--bouton-fond: var(--couleur-accent);
--bouton-encre: var(--couleur-sur-accent);
--bouton-rayon: var(--rayon-m);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--espace-2xs);
min-block-size: 2.9rem;
padding: var(--espace-2xs) var(--espace-m);
border: var(--trait) solid var(--bouton-fond);
border-radius: var(--bouton-rayon);
background: var(--bouton-fond);
color: var(--bouton-encre);
font-size: var(--taille--1);
font-weight: var(--graisse-forte);
line-height: 1.2;
text-align: center;
text-decoration: none;
transition:
background-color var(--duree-courte) var(--courbe-sortie),
color var(--duree-courte) var(--courbe-sortie),
border-color var(--duree-courte) var(--courbe-sortie);
}
.bouton:hover {
--bouton-fond: color-mix(in oklch, var(--couleur-accent) 82%, var(--couleur-fond));
}
.bouton--trait {
background: transparent;
color: var(--couleur-encre);
border-color: color-mix(in oklch, var(--couleur-encre) 35%, transparent);
}
.bouton--trait:hover {
background: var(--couleur-encre);
color: var(--couleur-fond);
border-color: var(--couleur-encre);
}
.bouton--petit {
min-block-size: 2.5rem;
padding-inline: var(--espace-s);
}
.bouton[disabled],
.bouton[aria-busy="true"] {
opacity: 0.6;
cursor: progress;
}
.bouton[data-magnetique] {
transition:
background-color var(--duree-courte) var(--courbe-sortie),
color var(--duree-courte) var(--courbe-sortie),
translate var(--duree-moyenne) var(--courbe-douce);
}
.ouverture {
padding-block: var(--espace-xl-3xl) var(--espace-l-2xl);
}
.ouverture h1 {
max-inline-size: 15ch;
}
.ouverture-bas {
align-items: end;
margin-block-start: var(--espace-l-2xl);
}
.chapo {
max-inline-size: 40ch;
font-size: var(--taille-1);
line-height: 1.4;
color: var(--couleur-encre-douce);
}
.reperes {
font-size: var(--taille--1);
color: var(--couleur-encre-douce);
}
.titre-section {
display: grid;
gap: var(--espace-xs);
margin-block-end: var(--espace-l-2xl);
}
.titre-section h2 {
max-inline-size: 18ch;
}
.titre-section p {
max-inline-size: 46ch;
color: var(--couleur-encre-douce);
}
.rangees {
padding: 0;
list-style: none;
border-block-start: var(--trait) solid var(--couleur-filet);
}
.rangee {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
gap: var(--espace-2xs) var(--espace-l);
padding-block: var(--espace-m);
border-block-end: var(--trait) solid var(--couleur-filet);
}
.rangee h3 {
font-size: var(--taille-2);
}
.rangee p {
max-inline-size: 52ch;
color: var(--couleur-encre-douce);
}
.fiche {
display: grid;
gap: var(--espace-m);
}
.fiche dt {
font-size: var(--taille--1);
color: var(--couleur-encre-douce);
}
.fiche dd {
margin: 0;
font-size: var(--taille-1);
line-height: 1.35;
}
.fiche dd + dd {
margin-block-start: var(--espace-3xs);
}
.horaires {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--espace-3xs) var(--espace-m);
font-size: var(--taille-0);
}
.horaires dt {
color: var(--couleur-encre-douce);
}
.horaires dd {
margin: 0;
}
.formulaire {
display: grid;
gap: var(--espace-m);
}
.champs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: var(--espace-m);
}
.champ {
display: grid;
gap: var(--espace-3xs);
align-content: start;
}
.champ--large {
grid-column: 1 / -1;
}
.champ label {
font-size: var(--taille--1);
font-weight: var(--graisse-forte);
}
.champ .aide {
font-size: var(--taille--1);
color: var(--couleur-encre-douce);
}
.champ input,
.champ select,
.champ textarea {
inline-size: 100%;
min-block-size: 3rem;
padding: var(--espace-2xs) var(--espace-xs);
border: var(--trait) solid color-mix(in oklch, var(--couleur-encre) 28%, transparent);
border-radius: var(--rayon-s);
background: var(--couleur-fond);
transition: border-color var(--duree-courte) var(--courbe-sortie);
}
.champ textarea {
min-block-size: 9.5rem;
}
.champ input:hover,
.champ select:hover,
.champ textarea:hover {
border-color: var(--couleur-encre);
}
.champ [aria-invalid="true"] {
border-color: var(--couleur-erreur);
}
.champ-erreur {
font-size: var(--taille--1);
color: var(--couleur-erreur);
}
.piege {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.mention {
max-inline-size: 60ch;
font-size: var(--taille--1);
color: var(--couleur-encre-douce);
}
.avis-envoi {
display: none;
padding: var(--espace-s) var(--espace-m);
border-inline-start: 3px solid currentColor;
background: var(--couleur-surface);
}
.avis-envoi:target,
.avis-envoi[data-visible] {
display: block;
}
.avis-envoi--ok {
color: var(--couleur-succes);
}
.avis-envoi--erreur {
color: var(--couleur-erreur);
}
.avis-envoi p {
color: var(--couleur-encre);
}
.inverse {
--couleur-fond: oklch(19.5% 0.004 95);
--couleur-surface: oklch(25% 0.005 95);
--couleur-encre: oklch(96.5% 0.003 95);
--couleur-encre-douce: oklch(76% 0.005 95);
--couleur-filet: oklch(34% 0.005 95);
--couleur-accent: var(--couleur-encre);
--couleur-sur-accent: var(--couleur-fond);
background: var(--couleur-fond);
color: var(--couleur-encre);
}
.pied {
padding-block: var(--espace-xl) var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille--1);
}
.pied-haut {
--bascule-seuil: 52rem;
}
.pied-nom {
font-size: var(--taille-2);
font-weight: var(--graisse-titre);
letter-spacing: var(--approche-titre);
line-height: 1.1;
}
.pied p,
.pied li {
color: var(--couleur-encre-douce);
}
.pied ul {
padding: 0;
list-style: none;
}
.pied a {
color: var(--couleur-encre);
}
.pied-bas {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--espace-2xs) var(--espace-m);
margin-block-start: var(--espace-xl);
padding-block-start: var(--espace-s);
border-block-start: var(--trait) solid var(--couleur-filet);
color: var(--couleur-encre-douce);
}
.pied-bas ul {
display: flex;
flex-wrap: wrap;
gap: var(--espace-3xs) var(--espace-m);
}
.texte-legal {
display: grid;
gap: var(--espace-xl);
padding-block-end: var(--espace-2xl);
}
.texte-legal section {
display: grid;
gap: var(--espace-xs);
max-inline-size: 70ch;
}
.texte-legal h2 {
font-size: var(--taille-2);
}
.texte-legal dl {
display: grid;
grid-template-columns: minmax(9rem, max-content) 1fr;
gap: var(--espace-2xs) var(--espace-m);
}
.texte-legal dt {
color: var(--couleur-encre-douce);
}
.texte-legal dd {
margin: 0;
}
@media (max-width: 34em) {
.texte-legal dl {
grid-template-columns: 1fr;
gap: 0;
}
.texte-legal dd {
margin-block-end: var(--espace-xs);
}
}
.texte-legal table {
inline-size: 100%;
border-collapse: collapse;
font-size: var(--taille--1);
}
.texte-legal th,
.texte-legal td {
padding: var(--espace-2xs) var(--espace-xs) var(--espace-2xs) 0;
border-block-end: var(--trait) solid var(--couleur-filet);
text-align: start;
vertical-align: top;
}
.texte-legal ul {
padding-inline-start: 1.2em;
}
.a-completer {
padding: 0 0.3em;
background: color-mix(in oklch, var(--couleur-erreur) 14%, transparent);
color: var(--couleur-erreur);
}
.grain {
position: fixed;
inset: -50%;
z-index: var(--plan-evitement);
pointer-events: none;
opacity: 0.4;
mix-blend-mode: soft-light;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='0.55'/></svg>");
}
}
@layer composants {
.navigation {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--espace-xs) var(--espace-m);
}
.pied-titre {
font-size: var(--taille--1);
font-weight: var(--graisse-forte);
letter-spacing: 0;
color: var(--couleur-encre);
}
.pied-colonnes {
--grille-min: 12rem;
--grille-espace: var(--espace-l);
}
.pied .horaires {
grid-template-columns: 1fr;
gap: 0;
font-size: inherit;
}
.pied .horaires dd + dt {
margin-block-start: var(--espace-2xs);
}
.citation p {
font-size: var(--taille-1);
line-height: 1.45;
}
.citation footer {
margin-block-start: var(--espace-xs);
font-size: var(--taille--1);
color: var(--couleur-encre-douce);
}
.etapes {
display: grid;
gap: var(--espace-m);
padding-inline-start: 1.4em;
}
.etapes li::marker {
color: var(--couleur-encre-douce);
font-variant-numeric: tabular-nums;
}
.cadre [data-parallaxe] {
scale: 1.2;
}
.cadre--large {
--cadre-ratio: 16 / 9;
}
@media (max-width: 40em) {
.cadre--large {
--cadre-ratio: 4 / 5;
}
}
}
@layer composants {
body {
--bord: calc(var(--marge) + var(--gouttiere));
}
.conteneur {
grid-template-columns:
[plein-start] minmax(var(--bord), 1fr)
[contenu-start] min(100% - 2 * var(--bord), var(--conteneur-mesure))
[contenu-end] minmax(var(--bord), 1fr) [plein-end];
}
h1 {
font-size: var(--taille-5);
line-height: var(--interligne-affichage);
letter-spacing: var(--approche-affichage);
}
h2 {
font-size: var(--taille-3);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
h3 {
font-size: var(--taille-1);
line-height: 1.25;
letter-spacing: calc(var(--approche-titre) / 3);
}
:root {
color-scheme: light;
accent-color: var(--couleur-encre);
caret-color: var(--couleur-encre);
scrollbar-color: var(--couleur-encre-douce) var(--couleur-fond);
scrollbar-gutter: stable;
}
.sombre {
color-scheme: dark;
}
::selection {
background: var(--couleur-accent);
color: var(--couleur-sur-accent);
}
:focus-visible {
outline-color: var(--couleur-encre);
}
:focus-visible:not(.bouton) {
border-radius: calc(var(--rayon-m) / 2);
}
.sprite {
position: absolute;
inline-size: 0;
block-size: 0;
overflow: hidden;
}
.icone {
flex: none;
inline-size: 1rem;
block-size: 1rem;
}
.chiffres {
font-variant-numeric: tabular-nums;
}
.prix-chiffres {
font-family: var(--police-chiffres);
font-weight: var(--graisse-chiffres);
font-size: var(--taille-prix);
line-height: var(--interligne-prix);
letter-spacing: var(--approche-prix);
font-variant-numeric: lining-nums;
}
.sombre {
--couleur-fond: var(--couleur-nuit);
--couleur-surface: var(--couleur-nuit-surface);
--couleur-filet: color-mix(in oklch, var(--couleur-sur-nuit) 14%, var(--couleur-nuit));
--couleur-encre: var(--couleur-sur-nuit);
--couleur-encre-douce: var(--couleur-sur-nuit-douce);
--couleur-bord-champ: #7A7872;
--couleur-bouton: var(--couleur-sur-nuit);
--couleur-bouton-survol: var(--couleur-accent-pale);
background: var(--couleur-fond);
color: var(--couleur-encre);
}
.bouton {
--bouton-fond: var(--couleur-bouton);
--bouton-encre: var(--couleur-fond);
--bouton-rayon: var(--rayon-rond);
gap: var(--espace-xs);
min-block-size: var(--bouton-hauteur);
padding: 0 var(--espace-l);
font-size: var(--taille--1);
font-weight: var(--graisse-forte);
line-height: 1;
white-space: nowrap;
touch-action: manipulation;
}
.bouton:hover {
--bouton-fond: var(--couleur-bouton);
}
@media (hover: hover) and (pointer: fine) {
.bouton:hover {
--bouton-fond: var(--couleur-bouton-survol);
}
}
.bouton-fort {
min-block-size: var(--bouton-hauteur-fort);
padding-inline: var(--espace-l);
font-size: var(--taille-0);
}
.lien {
display: inline-flex;
align-items: center;
min-block-size: var(--bouton-hauteur);
color: var(--couleur-encre);
font-weight: var(--graisse-menu);
text-decoration-line: underline;
text-decoration-thickness: var(--trait);
text-underline-offset: 0.28em;
text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
.lien:hover {
text-decoration-thickness: var(--trait);
text-decoration-color: currentColor;
}
.entete {
border: 0;
background: var(--couleur-fond);
transition: box-shadow var(--duree-moyenne) var(--courbe-sortie);
}
.entete[data-defile] {
box-shadow: 0 var(--trait) 0 var(--couleur-filet);
}
.entete-dedans {
flex-wrap: nowrap;
justify-content: flex-start;
gap: var(--espace-xl);
min-block-size: var(--hauteur-entete);
padding: 0 var(--bord);
}
.marque {
display: inline-flex;
flex: none;
align-items: center;
gap: var(--espace-xs);
min-block-size: var(--bouton-hauteur);
color: var(--couleur-encre);
font-size: var(--taille-0);
font-weight: var(--graisse-forte);
letter-spacing: -0.015em;
}
.marque-symbole {
flex: none;
inline-size: calc(var(--logo-hauteur) * 30 / 46);
block-size: var(--logo-hauteur);
}
.sombre .marque-symbole {
color: var(--couleur-accent);
}
.entete-droite {
display: flex;
flex: none;
align-items: center;
gap: var(--espace-l);
margin-inline-start: auto;
}
.entete-tarif {
display: none;
font-size: var(--taille--1);
color: var(--couleur-encre-douce);
white-space: nowrap;
}
.navigation .menu {
gap: var(--espace-l);
}
.navigation .menu > li > a,
.navigation summary {
display: inline-flex;
align-items: center;
gap: var(--espace-2xs);
min-block-size: var(--bouton-hauteur);
padding: 0;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
font-weight: var(--graisse-menu);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color var(--duree-courte) var(--courbe-sortie);
}
.navigation summary {
list-style: none;
}
.navigation summary::-webkit-details-marker {
display: none;
}
.navigation .menu > li > a:hover,
.navigation .menu > li > a[aria-current="page"],
.navigation summary:hover,
.navigation details[open] > summary {
color: var(--couleur-encre);
}
.menu-chevron {
inline-size: var(--espace-s);
block-size: var(--espace-s);
transition: rotate var(--duree-courte) var(--courbe-sortie);
}
.navigation details[open] .menu-chevron {
rotate: 180deg;
}
.menu-groupe {
position: relative;
}
.navigation .sous-menu {
display: grid;
gap: 0;
}
.navigation .sous-menu a {
display: flex;
align-items: center;
min-block-size: var(--bouton-hauteur);
padding: 0 var(--espace-s);
border-radius: calc(var(--rayon-m) - var(--espace-2xs));
color: var(--couleur-encre);
font-size: var(--taille--1);
text-decoration: none;
white-space: nowrap;
}
.navigation .sous-menu a:hover {
background: var(--couleur-surface);
}
@media (min-width: 85em) {
.navigation .sous-menu {
position: absolute;
inset-block-start: calc(100% + var(--espace-2xs));
inset-inline-start: calc(var(--espace-s) * -1);
z-index: var(--plan-menu);
min-inline-size: 16rem;
padding: var(--espace-2xs);
border: var(--trait) solid var(--couleur-filet);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
}
}
@media (min-width: 100em) {
.entete-tarif {
display: block;
}
}
.menu-bouton {
gap: var(--espace-xs);
min-block-size: var(--bouton-hauteur);
padding: 0 var(--espace-2xs);
color: var(--couleur-encre);
font-size: var(--taille-0);
font-weight: var(--graisse-menu);
}
.menu-traits {
inline-size: 1.125rem;
block-size: 0.5rem;
}
@media (max-width: 84.99em) {
.js .navigation {
inset-block-start: var(--hauteur-entete);
gap: 0;
padding: var(--espace-m) var(--bord) calc(var(--barre-appel-totale) + var(--espace-xl));
}
.js .navigation .menu {
gap: 0;
}
.js .navigation .menu > li {
border-block-end: var(--trait) solid var(--couleur-filet);
}
.js .navigation .sous-menu li {
border: 0;
}
.js .navigation .menu > li > a,
.js .navigation summary {
display: flex;
justify-content: space-between;
min-block-size: calc(var(--bouton-hauteur) * 1.45);
color: var(--couleur-encre);
font-size: var(--taille-3);
font-weight: var(--graisse-titre);
letter-spacing: var(--approche-titre);
}
.js .navigation .menu-chevron {
inline-size: var(--espace-l);
block-size: var(--espace-l);
}
.js .navigation .sous-menu {
padding-block-end: var(--espace-s);
}
.js .navigation .sous-menu a {
padding-inline: 0;
color: var(--couleur-encre-douce);
font-size: var(--taille-0);
font-weight: var(--graisse-texte);
letter-spacing: 0;
}
html:not(.js) .entete {
position: static;
}
html:not(.js) .entete-dedans {
flex-wrap: wrap;
gap: 0 var(--espace-l);
padding-block: var(--espace-s);
}
html:not(.js) .navigation {
order: 3;
flex-basis: 100%;
}
html:not(.js) .navigation .menu {
flex-wrap: wrap;
gap: 0 var(--espace-l);
}
}
@media (max-width: 50.5em) {
.entete .marque {
font-size: var(--taille--1);
}
.entete .marque-symbole {
inline-size: calc(var(--logo-hauteur-tel) * 30 / 46);
block-size: var(--logo-hauteur-tel);
}
.entete-dedans {
gap: var(--espace-s);
min-block-size: var(--hauteur-entete-tel);
}
.js .navigation {
inset-block-start: var(--hauteur-entete-tel);
}
.entete-appel {
display: none;
}
}
.encart-heure {
display: grid;
gap: var(--espace-l);
}
.encart-ligne {
display: flex;
align-items: baseline;
gap: var(--espace-xs);
max-inline-size: 38ch;
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
color: var(--couleur-encre-douce);
}
.encart-point {
flex: none;
inline-size: calc(var(--espace-xs) * 0.75);
block-size: calc(var(--espace-xs) * 0.75);
border-radius: var(--rayon-rond);
background: var(--couleur-accent);
translate: 0 -0.12em;
}
.encart-moment {
color: var(--couleur-encre);
}
.encart-h {
font-weight: var(--graisse-forte);
font-variant-numeric: tabular-nums;
}
.encart-prix {
max-inline-size: 5.3em;
}
.pied {
margin: var(--espace-section) var(--marge) var(--marge);
padding: 0;
border: 0;
border-radius: var(--rayon-cadre);
font-size: var(--taille--1);
}
.pied-dedans {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
row-gap: var(--espace-3xl);
padding: var(--espace-4xl) var(--gouttiere) var(--espace-l);
}
.pied .bouton {
color: var(--bouton-encre);
}
.pied-appel {
grid-column: 1 / span 6;
display: grid;
justify-items: start;
align-content: start;
gap: var(--espace-xl);
}
.pied .pied-zone {
max-inline-size: 17ch;
color: var(--couleur-encre);
font-size: var(--taille-3);
font-weight: var(--graisse-titre);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
text-wrap: balance;
}
.pied-liens {
grid-column: span 3;
}
.pied .pied-titre {
margin-block-end: var(--espace-s);
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
font-weight: var(--graisse-texte);
}
.pied-liens ul {
display: grid;
}
.pied-liens a {
display: inline-flex;
align-items: center;
min-inline-size: var(--bouton-hauteur);
min-block-size: calc(var(--bouton-hauteur) * 0.8);
font-size: var(--taille-0);
text-decoration-line: underline;
text-decoration-color: transparent;
text-underline-offset: 0.28em;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
.pied-liens a:hover {
text-decoration-color: currentColor;
}
.pied .pied-bas {
grid-column: 1 / -1;
margin: 0;
padding-block-start: var(--espace-l);
justify-content: flex-start;
gap: var(--espace-2xs) var(--espace-xl);
}
@media (max-width: 50.5em) {
.pied-dedans {
row-gap: var(--espace-2xl);
padding-block-start: var(--espace-3xl);
}
.pied-appel {
grid-column: 1 / -1;
}
.pied-liens {
grid-column: 1 / -1;
}
.pied-liens ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
}
.pied-liens a {
min-block-size: var(--bouton-hauteur);
}
.pied .pied-bas {
flex-direction: column;
}
}
.barre-appel {
display: none;
}
@media (max-width: 50.5em) {
body {
padding-block-end: var(--barre-appel-totale);
}
.barre-appel {
position: fixed;
inset: auto 0 0;
z-index: var(--plan-barre);
display: flex;
align-items: center;
gap: var(--espace-m);
min-block-size: var(--hauteur-barre-appel);
padding: var(--espace-s) var(--bord) calc(var(--espace-s) + env(safe-area-inset-bottom));
border-block-start: var(--trait) solid var(--couleur-filet);
background: var(--couleur-fond);
}
.barre-appel[data-etat="retiree"] {
visibility: hidden;
}
.menu-ouvert .barre-appel {
z-index: calc(var(--plan-menu) + 1);
visibility: visible;
}
.barre-appel-bouton {
flex: none;
min-block-size: var(--bouton-hauteur-fort);
font-size: var(--taille-0);
}
.barre-appel-ligne {
font-size: var(--taille--1);
line-height: 1.3;
color: var(--couleur-encre-douce);
}
.barre-appel-rdv {
display: none;
}
:is(.page-installation, .guide-a2p) .barre-appel-rdv {
display: inline-flex;
--bouton-fond: var(--couleur-surface);
--bouton-encre: var(--couleur-encre);
}
:is(.page-installation, .guide-a2p) :is(.barre-appel-bouton, .barre-appel-rdv) {
flex: 1 1 0;
min-block-size: var(--bouton-hauteur-fort);
padding-inline: var(--espace-s);
font-size: var(--taille--1);
text-wrap: balance;
}
:is(.page-installation, .guide-a2p) .barre-appel-ligne {
display: none;
}
}
.champ :is(input, select, textarea) {
border-color: var(--couleur-bord-champ);
}
@media print {
.entete, .barre-appel, .evitement, .menu-bouton, .premier-objet, .premier-voile, .tete-objet {
display: none;
}
.sombre {
--couleur-fond: #fff;
--couleur-encre: #000;
--couleur-encre-douce: #333;
}
}
}
@layer pages {
.trame {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
margin-block-start: var(--espace-section);
padding-inline: var(--bord);
}
.bande {
margin: var(--espace-section) var(--marge) 0;
border-radius: var(--rayon-cadre);
}
.bande > .trame {
margin: 0;
padding: var(--espace-4xl) var(--gouttiere);
}
@media (max-width: 50.5em) {
body {
--bande-tel: var(--espace-2xl) var(--espace-l);
}
.trame > * {
grid-column: 1 / -1;
}
.bande > .trame {
padding: var(--bande-tel);
}
.photo-chantier {
inline-size: min(100%, 48svh);
}
.evitement {
min-block-size: var(--bouton-hauteur);
align-content: center;
}
}
.tete {
padding-inline: var(--marge);
}
.tete-cadre {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
row-gap: var(--espace-2xl);
align-content: end;
align-items: end;
min-block-size: min(var(--cadre-hauteur-min), calc(100svh - var(--hauteur-entete) - var(--marge)));
padding: var(--espace-4xl) var(--gouttiere) var(--gouttiere);
border-radius: var(--rayon-cadre);
background:
radial-gradient(38% 62% at 80% 22%, color-mix(in oklch, var(--couleur-accent) 8%, transparent), transparent 70%),
radial-gradient(64% 80% at 76% 18%, var(--couleur-nuit-surface), var(--couleur-nuit) 80%);
}
.tete-texte {
grid-column: 1 / span 7;
display: grid;
justify-items: start;
gap: var(--espace-l);
}
.tete-texte h1 {
max-inline-size: 13ch;
text-wrap: balance;
}
.tete-chapeau {
max-inline-size: 46ch;
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.tete-action {
grid-column: 9 / span 4;
justify-self: end;
display: grid;
justify-items: start;
gap: var(--espace-m);
min-inline-size: 18.75rem;
}
.tete-ligne {
max-inline-size: 34ch;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
@media (max-width: 50.5em) {
.tete-cadre {
grid-template-columns: minmax(0, 1fr);
}
.tete-cadre > * {
grid-column: 1;
grid-row: auto;
}
.tete-cadre {
row-gap: var(--espace-xl);
min-block-size: 0;
padding: var(--espace-3xl) var(--espace-l) var(--espace-l);
}
.tete-texte h1 {
max-inline-size: none;
}
.tete-action {
justify-self: stretch;
min-inline-size: 0;
}
.tete-appel,
.tete-appel + .tete-ligne {
display: none;
}
}
@media (min-width: 50.5625em) and (max-width: 63.99em) {
.tete-action {
grid-column: 8 / span 5;
min-inline-size: 0;
}
}
.premier {
padding-inline: var(--marge);
}
.premier-cadre {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
align-items: end;
overflow: hidden;
min-block-size: max(var(--cadre-hauteur-min), min(calc(100svh - var(--hauteur-entete) - var(--marge)), var(--cadre-hauteur-max)));
padding: var(--gouttiere);
border-radius: var(--rayon-cadre);
}
.premier-objet {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(42% 58% at 70% 38%, color-mix(in oklch, var(--couleur-accent) 9%, transparent), transparent 70%),
radial-gradient(60% 70% at 68% 34%, var(--couleur-nuit-surface), var(--couleur-nuit) 78%);
}
.premier-image {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: 70% 40%;
}
.premier-image--etroite {
display: none;
}
.premier-voile {
position: absolute;
inset: auto 0 0;
z-index: -1;
block-size: 55%;
background: linear-gradient(to top, color-mix(in oklch, var(--couleur-nuit) 85%, transparent), transparent);
}
.premier-texte {
grid-column: 1 / span 7;
}
.premier h1 {
max-inline-size: 11em;
text-wrap: balance;
}
.premier-chapeau {
max-inline-size: 34ch;
margin-block-start: var(--espace-l);
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.premier-action {
grid-column: 9 / span 4;
justify-self: end;
display: grid;
justify-items: start;
gap: var(--espace-l);
min-inline-size: 18.75rem;
}
.deroule-etapes {
grid-column: 7 / span 6;
counter-reset: etape;
border-block-end: var(--trait) solid var(--couleur-filet);
}
.deroule-etape {
display: grid;
grid-template-columns: var(--espace-3xl) minmax(0, 1fr);
padding-block: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
counter-increment: etape;
}
.deroule-etape::before {
content: counter(etape);
color: var(--couleur-encre-douce);
font-weight: var(--graisse-titre);
font-variant-numeric: tabular-nums;
}
.deroule-etape p {
max-inline-size: var(--mesure-texte);
}
.deroule-etape:first-child p {
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
letter-spacing: calc(var(--approche-titre) / 3);
line-height: 1.3;
}
.aparte {
padding: var(--espace-l);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.questions-liste {
grid-column: 7 / span 6;
border-block-end: var(--trait) solid var(--couleur-filet);
}
.question {
border-block-start: var(--trait) solid var(--couleur-filet);
}
.question-titre {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
column-gap: var(--espace-xl);
min-block-size: var(--bouton-hauteur);
padding-block: var(--espace-l);
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 2);
list-style: none;
cursor: pointer;
}
.question-titre::-webkit-details-marker {
display: none;
}
.question-titre:focus-visible {
outline-offset: var(--espace-xs);
}
.question-texte {
text-wrap: pretty;
}
.question-signe {
inline-size: 1em;
block-size: 1lh;
fill: none;
stroke: var(--couleur-accent-fonce);
stroke-width: 1.25;
stroke-linecap: round;
overflow: visible;
}
.question[open] .question-signe {
rotate: 45deg;
}
.question[open] > .question-titre {
padding-block-end: var(--espace-s);
}
.question-reponse {
display: grid;
justify-items: start;
gap: var(--espace-s);
padding-block-end: var(--espace-xl);
padding-inline-end: calc(1em + var(--espace-xl));
color: var(--couleur-encre-douce);
}
.question-reponse p {
max-inline-size: var(--mesure-texte);
}
@media (hover: hover) {
.question:has(> .question-titre:hover) {
border-block-start-color: var(--couleur-bord-champ);
}
.question-titre:hover .question-signe {
stroke: var(--couleur-encre);
}
}
@media (prefers-reduced-motion: no-preference) {
.question {
transition: border-color var(--duree-courte) ease;
}
.question-titre {
transition: padding-block-end var(--duree-moyenne) var(--courbe-sortie);
}
.question-signe {
transition: rotate var(--duree-moyenne) var(--courbe-sortie), stroke var(--duree-courte) ease;
}
}
@supports (interpolate-size: allow-keywords) {
@media (prefers-reduced-motion: no-preference) {
.questions-liste {
interpolate-size: allow-keywords;
}
.question::details-content {
block-size: 0;
overflow-y: clip;
transition: block-size var(--duree-moyenne) var(--courbe-sortie), content-visibility var(--duree-moyenne) allow-discrete;
}
.question[open]::details-content {
block-size: auto;
}
}
}
@media (max-width: 50.5em) {
.premier-cadre {
grid-template-columns: minmax(0, 1fr);
align-content: end;
min-block-size: max(var(--cadre-hauteur-min), calc(100svh - var(--hauteur-entete-tel) - var(--hauteur-barre-appel) - var(--marge)));
padding: var(--espace-l);
}
.premier-objet {
background:
radial-gradient(70% 45% at 50% 30%, color-mix(in oklch, var(--couleur-accent) 9%, transparent), transparent 70%),
radial-gradient(90% 60% at 50% 28%, var(--couleur-nuit-surface), var(--couleur-nuit) 85%);
}
.premier-image--large {
display: none;
}
.premier-image--etroite {
display: block;
object-position: 42% 30%;
}
.premier-voile {
block-size: 62%;
}
.premier-texte,
.premier-action {
grid-column: 1;
}
.premier-chapeau {
margin-block-start: var(--espace-s);
}
.premier-action {
justify-self: stretch;
grid-template-columns: auto minmax(0, 1fr);
align-items: end;
gap: var(--espace-m) var(--espace-m);
min-inline-size: 0;
margin-block-start: var(--espace-xl);
}
.premier-action .encart-heure {
display: contents;
}
.premier-action :is(.encart-ligne, noscript) {
grid-column: 1 / -1;
}
.premier-appel {
display: none;
}
.deroule-etapes,
.questions-liste {
margin-block-start: var(--espace-2xl);
}
.deroule-etape {
grid-template-columns: var(--espace-xl) minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: no-preference) {
.js-mouvement:not(.revu) .premier-objet {
animation: premier-objet var(--duree-ouverture) var(--courbe-sortie) both;
}
.js-mouvement:not(.revu) :is(.premier-texte, .premier-action) {
animation: premier-monte var(--duree-moyenne) var(--courbe-sortie) var(--decalage-titre) both;
}
.js-mouvement:not(.revu) .premier-action {
animation-delay: var(--decalage-action);
}
}
@keyframes premier-objet {
from {
opacity: 0.01;
scale: var(--echelle-objet);
}
}
@keyframes premier-monte {
from {
opacity: 0;
translate: 0 var(--mouvement-distance);
}
}
}
@layer composants {
.photo-chantier {
margin: 0;
overflow: hidden;
aspect-ratio: 4 / 5;
border-radius: var(--rayon-m);
background: var(--couleur-nuit);
}
.photo-chantier img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--cadrage, 50% 50%);
}
}
@layer composants {
[data-boucles] {
position: relative;
}
video[data-boucle] {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: 0;
pointer-events: none;
transition: opacity calc(400ms * var(--v)) linear;
}
video[data-boucle].joue {
opacity: 1;
}
.boucle-bouton {
position: absolute;
inset-block-start: var(--boucle-retrait, var(--espace-s));
inset-inline-end: var(--boucle-retrait, var(--espace-s));
z-index: 1;
display: grid;
place-items: center;
inline-size: var(--bouton-hauteur);
block-size: var(--bouton-hauteur);
padding: 0;
border: var(--trait) solid color-mix(in oklch, var(--couleur-sur-nuit) 24%, transparent);
border-radius: var(--rayon-rond);
background: color-mix(in oklch, var(--couleur-nuit) 55%, transparent);
color: var(--couleur-sur-nuit-douce);
cursor: pointer;
touch-action: manipulation;
transition: color var(--duree-courte) linear, border-color var(--duree-courte) linear;
}
.boucle-bouton[hidden] {
display: none;
}
.boucle-bouton:focus-visible {
border-radius: var(--rayon-rond);
outline-color: var(--couleur-sur-nuit);
}
.boucle-bouton svg {
inline-size: 1rem;
block-size: 1rem;
overflow: visible;
}
.boucle-pause {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.boucle-lecture {
display: none;
fill: currentColor;
stroke: currentColor;
stroke-width: 1.2;
stroke-linejoin: round;
}
.boucle-bouton.en-pause .boucle-pause {
display: none;
}
.boucle-bouton.en-pause .boucle-lecture {
display: inline;
}
@media (hover: hover) and (pointer: fine) {
.boucle-bouton:hover {
border-color: var(--couleur-accent);
color: var(--couleur-accent);
}
}
.premier-cadre > .boucle-bouton {
--boucle-retrait: var(--gouttiere);
}
@media (max-width: 50.5em) {
.premier-cadre > .boucle-bouton {
--boucle-retrait: var(--espace-m);
}
}
}
@layer composants {
.facsimile {
container-type: inline-size;
max-inline-size: 42rem;
margin: 0;
}
.facsimile-feuille {
--facsimile-papier: color-mix(in oklch, var(--couleur-fond) 35%, #fff);
padding: clamp(1.125rem, .6rem + 4cqi, 2.25rem);
border: var(--trait) solid var(--couleur-filet);
border-radius: 3px;
background: var(--facsimile-papier);
color: var(--couleur-encre);
font-size: max(15px, .9375rem);
line-height: 1.4;
}
.facsimile-feuille :where(p, dl, dd) {
margin: 0;
}
.facsimile-exemple {
margin-block-end: .9em;
color: var(--couleur-accent-fonce);
font-weight: var(--graisse-titre);
}
.facsimile-tete {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: .2em 1.25em;
padding-block-end: .7em;
border-block-end: 2px solid var(--couleur-accent);
}
.facsimile-titre {
font-size: 1.75em;
font-weight: var(--graisse-titre);
line-height: 1.1;
letter-spacing: -.02em;
}
.facsimile-numero {
margin-inline-start: .3em;
color: var(--couleur-encre-douce);
font-size: max(15px, .9375rem);
font-weight: var(--graisse-texte);
letter-spacing: 0;
}
.facsimile-date {
color: var(--couleur-encre-douce);
}
.facsimile-parties {
margin-block-start: .6em;
}
.facsimile-parties > div {
display: grid;
grid-template-columns: 11em minmax(0, 1fr);
gap: 1em;
padding-block: .3em;
}
.facsimile-parties dt {
color: var(--couleur-encre-douce);
}
.facsimile-travaux {
margin-block-start: 1.1em;
padding-block-start: .9em;
border-block-start: var(--trait) solid var(--couleur-filet);
}
.facsimile-etiquette {
font-weight: var(--graisse-titre);
}
.facsimile-colonnes {
display: flex;
justify-content: space-between;
margin-block-start: 1.4em;
padding-block-end: .35em;
border-block-end: var(--trait) solid var(--couleur-encre);
color: var(--couleur-encre-douce);
}
.facsimile-lignes > div,
.facsimile-totaux > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 1.25em;
}
.facsimile-lignes > div {
padding-block: .6em;
border-block-end: var(--trait) solid var(--couleur-filet);
}
.facsimile-lignes dt span {
display: block;
color: var(--couleur-encre-douce);
}
.facsimile-lignes dd,
.facsimile-totaux dd {
font-family: var(--police-chiffres);
font-weight: var(--graisse-chiffres);
font-size: 1.125em;
font-variant-numeric: lining-nums tabular-nums;
white-space: nowrap;
}
.facsimile-totaux {
inline-size: min(100%, 17em);
margin-block-start: .7em;
margin-inline-start: auto;
}
.facsimile-totaux > div {
padding-block: .2em;
}
.facsimile-total {
margin-block-start: .35em;
padding-block-start: .45em;
border-block-start: var(--trait) solid var(--couleur-encre);
}
.facsimile-total dt {
font-weight: var(--graisse-titre);
}
.facsimile-totaux .facsimile-total dd {
font-size: 2em;
line-height: 1;
letter-spacing: var(--approche-prix);
}
.facsimile-clauses {
margin-block-start: 1.4em;
}
.facsimile-clauses p + p {
margin-block-start: .6em;
}
.facsimile-choix {
display: inline-flex;
align-items: center;
gap: .35em;
margin-inline-start: .45em;
white-space: nowrap;
}
.facsimile-case {
inline-size: .9em;
block-size: .9em;
border: 1.5px solid var(--couleur-encre);
border-radius: 2px;
}
.facsimile-accord {
margin-block-start: 1.4em;
padding: .8em 1em 1em;
border: 1.5px solid var(--couleur-accent);
border-radius: 3px;
}
.facsimile-signer {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: 1.5em;
margin-block-start: .4em;
}
.facsimile-signer span {
padding-block-start: 2.4em;
border-block-end: var(--trait) solid var(--couleur-encre);
color: var(--couleur-encre-douce);
}
.facsimile-regle {
margin-block-start: .25em;
}
.facsimile-insecable {
white-space: nowrap;
}
@container (max-width: 26rem) {
.facsimile-parties > div {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding-block: .25em;
}
.facsimile-titre {
font-size: 1.5em;
}
.facsimile-signer {
grid-template-columns: minmax(0, 1fr);
gap: .2em;
}
.facsimile-signer span {
padding-block-start: 1.9em;
}
}
@media (min-width: 64em) {
.facsimile-deborde-debut {
margin-inline-start: -24px;
}
.facsimile-deborde-fin {
margin-inline-end: -24px;
}
}
}
@layer composants {
.communes-appel {
margin-block-start: var(--espace-m);
}
.communes-appel[hidden] {
display: none;
}
}
@layer composants {
.mascotte {
display: grid;
gap: var(--espace-s);
justify-items: start;
inline-size: min(100%, 22rem);
margin: 0;
}
.mascotte-cadre {
inline-size: 100%;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--rayon-cadre);
background: radial-gradient(64% 58% at 50% 36%, #3A3223, var(--couleur-nuit) 74%);
}
.mascotte-cadre img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: 50% 0;
}
.mascotte-legende {
max-inline-size: 30ch;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: 1.4;
}
}
@media (min-width: 64em) and (pointer: coarse) {
html {
font-size: 100%;
}
}
@media (pointer: coarse) {
.pied-liens a,
.ariane a {
min-block-size: 2.75rem;
}
.ariane a {
display: inline-flex;
align-items: center;
}
.page-guide .guide-sources a {
display: block;
min-block-size: 2.75rem;
padding-block: var(--espace-s);
}
.page-guide .guide-plan a {
display: flex;
align-items: center;
min-block-size: 2.75rem;
}
}
@media (min-width: 50.5em) and (max-width: 63.99em) {
.s-sommaire-famille {
grid-template-columns: minmax(0, 1fr);
}
.s-sommaire-famille h2,
.s-sommaire-liste {
grid-column: 1 / -1;
max-inline-size: none;
}
}
@media (max-width: 50.5em) {
.s-egal-liste > li {
grid-template-columns: minmax(0, 1fr);
}
.s-egal .s-egal-chiffre {
white-space: normal;
text-wrap: balance;
}
}
.evitement {
min-block-size: 2.75rem;
}
@media (max-width: 84.99em) {
.js .navigation {
overscroll-behavior: contain;
padding-block-end: calc(var(--hauteur-barre-appel) + var(--espace-l) + env(safe-area-inset-bottom));
}
}
@media (max-width: 84.99em) {
.entete .marque {
flex: 0 1 auto;
min-inline-size: 0;
line-height: 1.15;
}
}
.bouton {
white-space: normal;
overflow-wrap: anywhere;
max-inline-size: 100%;
padding-block: var(--espace-xs);
}
.bouton > span {
min-inline-size: 0;
}
.contact-chemin-montant {
flex: 0 1 auto;
min-inline-size: 0;
overflow-wrap: anywhere;
}
.marque {
white-space: normal;
min-inline-size: 0;
max-inline-size: 100%;
}
.s-nuit .s-nuit-montant,
.s-egal .s-egal-chiffre,
.s-sommaire-date,
.zf-bareme-chiffre,
.zf-prix-court,
.contact-chemin-montant,
.prix-chiffres {
white-space: normal;
}
.s-nuit .s-nuit-montant {
font-size: min(calc(var(--taille-5) * 1.4), 17.5vw);
}
@media (max-width: 50.5em) {
.barre-appel {
container-type: inline-size;
}
}
@container (max-width: 17em) {
.barre-appel-bouton {
flex: 1 1 auto;
}
.barre-appel-ligne {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.facsimile-feuille {
padding: min(clamp(1.125rem, .6rem + 4cqi, 2.25rem), 8cqi);
}
.numero {
white-space: normal;
overflow-wrap: anywhere;
}
@media (max-width: 50.5em) {
.entete .marque {
font-size: min(var(--taille--1), 6vw);
}
.menu-bouton {
font-size: min(var(--taille-0), 7vw);
}
}
.facsimile-feuille :where(p, dd, dt, li, span) {
overflow-wrap: anywhere;
}
.facsimile-insecable {
white-space: normal;
}
@layer pages {
.s-section,
.s-dedans {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
}
.s-section {
margin-block-start: var(--espace-section);
padding-inline: var(--bord);
}
.s-bande {
margin: var(--espace-section) var(--marge) 0;
border-radius: var(--rayon-cadre);
}
.s-dedans {
padding: var(--espace-4xl) var(--gouttiere);
}
.s-enonce-texte {
grid-column: 1 / span 9;
max-inline-size: 26em;
font-size: var(--taille-3);
font-weight: var(--graisse-titre);
line-height: 1.12;
letter-spacing: var(--approche-titre);
text-wrap: balance;
}
.s-consigne-panneau {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
row-gap: var(--espace-3xl);
padding: var(--espace-xl-3xl);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.s-consigne-titre {
grid-column: 1 / span 5;
max-inline-size: 12ch;
}
.s-consigne-alerte {
grid-column: 7 / span 6;
align-self: end;
max-inline-size: 40ch;
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
line-height: 1.35;
letter-spacing: calc(var(--approche-titre) / 3);
}
.s-consigne-gestes {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--espace-xl) var(--ecart-colonnes);
}
.s-consigne-gestes li {
max-inline-size: 34ch;
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-encre);
}
.s-plein-titre {
grid-column: 1 / span 7;
align-self: end;
max-inline-size: 15ch;
}
.s-plein-texte {
grid-column: 8 / span 5;
align-self: end;
display: grid;
gap: var(--espace-m);
}
.s-plein-texte p {
max-inline-size: var(--mesure-texte);
}
.s-plein-texte p:first-child {
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-plein-figure {
--s-plein-largeur: 1100px;
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, var(--s-plein-largeur)) minmax(12rem, 1fr);
column-gap: var(--ecart-colonnes);
align-items: end;
margin: var(--espace-2xl) 0 0 calc(var(--gouttiere) * -1);
}
.s-plein-cadre {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 2;
border-radius: var(--rayon-cadre);
background: var(--couleur-nuit);
}
.s-plein-cadre img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--s-plein-cadrage, 50% 50%);
}
.s-plein-etroite {
display: none;
}
.s-plein-legende {
max-inline-size: 30ch;
padding-block-start: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
color: var(--couleur-encre-douce);
}
.s-deroule-tete {
grid-column: 1 / span 5;
align-self: start;
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
display: grid;
gap: var(--espace-2xl);
}
.s-deroule-tete h2 {
max-inline-size: 17ch;
}
.s-deroule-visuel {
padding: var(--espace-xl);
border: var(--trait) solid var(--couleur-filet);
border-radius: var(--rayon-m);
}
.s-deroule-visuel img {
inline-size: 100%;
}
.s-deroule .s-deroule-etapes {
grid-column: 7 / span 6;
}
.s-deroule .deroule-etape::before {
font-size: var(--taille-1);
line-height: 1.3;
}
.s-deroule .deroule-etape .s-etape-titre {
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
}
.s-deroule .deroule-etape .s-etape-texte {
margin-block-start: var(--espace-xs);
font-size: var(--taille-0);
font-weight: var(--graisse-texte);
line-height: var(--interligne-texte);
letter-spacing: 0;
}
.s-vitrine-titre {
grid-column: 1 / span 6;
align-self: end;
max-inline-size: 17ch;
}
.s-vitrine-texte {
grid-column: 8 / span 5;
align-self: end;
display: grid;
gap: var(--espace-m);
}
.s-vitrine-texte p {
max-inline-size: 46ch;
}
.s-vitrine-prix {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
margin-block-start: var(--espace-3xl);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.s-vitrine-prix > li {
display: grid;
align-content: start;
gap: var(--espace-m);
padding-block-start: var(--espace-2xl);
}
.s-vitrine-prix > li:first-child {
grid-column: 1 / span 7;
border-inline-end: var(--trait) solid var(--couleur-filet);
}
.s-vitrine-prix > li + li {
grid-column: 8 / span 5;
}
.s-vitrine .s-prix-chiffre {
max-inline-size: 5.3em;
font-size: var(--taille-5);
}
.s-prix-legende {
max-inline-size: 30ch;
color: var(--couleur-encre-douce);
}
.s-questions-titre {
grid-column: 1 / span 5;
grid-row: 1;
align-self: start;
max-inline-size: 17ch;
}
.s-questions .s-questions-liste {
grid-column: 7 / span 6;
grid-row: 1 / span 2;
align-self: start;
}
.s-suite {
grid-column: 1 / span 5;
grid-row: 2;
align-self: end;
margin-block-start: var(--espace-3xl);
}
.s-suite-titre {
margin-block-end: var(--espace-l);
}
.s-suite-liens {
border-block-end: var(--trait) solid var(--couleur-filet);
}
.s-suite-lien {
--s-vignette: 5rem;
display: grid;
grid-template-columns: var(--s-vignette) minmax(0, 1fr);
grid-template-rows: 1fr auto auto 1fr;
column-gap: var(--espace-l);
padding-block: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
text-decoration: none;
}
.s-suite-lien > :is(picture, img) {
grid-column: 1;
grid-row: 1 / -1;
align-self: center;
}
.s-suite-intitule,
.s-suite-ligne {
grid-column: 2;
}
.s-suite-vignette {
inline-size: var(--s-vignette);
block-size: var(--s-vignette);
border-radius: var(--rayon-m);
background: var(--couleur-nuit);
object-fit: cover;
}
.s-suite-intitule {
grid-row: 2;
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
text-decoration-line: underline;
text-decoration-thickness: var(--trait);
text-underline-offset: 0.25em;
text-decoration-color: transparent;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
.s-suite-ligne {
grid-row: 3;
margin-block-start: var(--espace-2xs);
color: var(--couleur-encre-douce);
}
.s-suite-lien:hover .s-suite-intitule {
text-decoration-color: currentColor;
}
.s-fin {
background: var(--couleur-surface);
}
.s-fin .s-dedans {
row-gap: var(--espace-xl);
}
.s-fin-objet {
position: relative;
grid-column: 7 / span 6;
grid-row: 1 / span 2;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: var(--rayon-m);
background: var(--couleur-fond);
}
.s-fin-objet img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--s-objet-position, 50% 50%);
scale: var(--s-objet-echelle, 1);
}
.s-fin-titre {
grid-column: 1 / span 5;
grid-row: 1;
align-self: end;
max-inline-size: 11ch;
}
.s-fin-action {
grid-column: 1 / span 5;
grid-row: 2;
align-self: start;
display: grid;
justify-items: start;
gap: var(--espace-xl);
}
.s-fin-texte {
max-inline-size: 40ch;
}
@media (prefers-reduced-motion: reduce) {
.s-deroule-tete {
position: static;
}
}
@media (max-width: 50.5em) {
.s-section > *,
.s-dedans > *,
.s-consigne-panneau > *,
.s-vitrine-prix > li:first-child,
.s-vitrine-prix > li + li,
.s-deroule .s-deroule-etapes,
.s-questions .s-questions-liste {
grid-column: 1 / -1;
grid-row: auto;
}
.s-dedans {
padding: var(--bande-tel);
}
:is(.s-section, .s-dedans, .s-consigne-panneau, .s-deroule-tete) > h2 {
max-inline-size: none;
}
.s-consigne-panneau {
row-gap: var(--espace-l);
padding: var(--espace-xl) var(--espace-l);
}
.s-consigne-gestes {
grid-template-columns: minmax(0, 1fr);
gap: var(--espace-l);
margin-block-start: var(--espace-m);
}
.s-consigne-gestes li {
padding-block-start: var(--espace-m);
}
.s-plein-texte {
margin-block-start: var(--espace-l);
}
.s-plein-figure {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--espace-l);
margin-inline: calc(var(--gouttiere) * -1);
}
.s-plein-cadre {
aspect-ratio: 4 / 5;
}
.s-plein-large {
display: none;
}
.s-plein-etroite {
display: block;
}
.s-plein-legende {
margin-inline: var(--gouttiere);
}
@media (min-width: 34em) {
.s-plein-cadre {
aspect-ratio: 3 / 2;
}
.s-plein-large {
display: block;
}
.s-plein-etroite {
display: none;
}
}
.s-deroule-tete {
position: static;
gap: var(--espace-xl);
}
.s-deroule-visuel {
max-inline-size: 30rem;
padding: var(--espace-l);
}
.s-deroule .s-deroule-etapes {
margin-block-start: var(--espace-2xl);
}
.s-vitrine-texte {
margin-block-start: var(--espace-l);
}
.s-vitrine-prix {
grid-template-columns: minmax(0, 1fr);
margin-block-start: var(--espace-2xl);
border-block-start: 0;
}
.s-vitrine-prix > li {
gap: var(--espace-s);
padding-block: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.s-vitrine-prix > li:first-child {
border-inline-end: 0;
}
.s-vitrine-prix > li:last-child {
padding-block-end: 0;
}
.s-questions .s-questions-liste {
margin-block-start: var(--espace-2xl);
}
.s-suite {
margin-block-start: var(--espace-3xl);
}
.s-suite-lien {
--s-vignette: min(3.5rem, 17.5vw);
column-gap: var(--espace-m);
}
.s-fin .s-dedans {
row-gap: var(--espace-l);
}
.s-fin-objet {
order: -1;
inline-size: min(100%, 30rem);
aspect-ratio: 3 / 2;
margin-block-end: var(--espace-s);
}
.s-fin-action {
justify-items: stretch;
gap: var(--espace-l);
}
}
}
@layer pages {
.s-piece-texte {
grid-column: 1 / span 5;
grid-row: 1;
align-self: end;
display: grid;
justify-items: start;
gap: var(--espace-xl);
}
.s-piece-texte h2 {
max-inline-size: 13ch;
}
.s-piece-figure {
position: relative;
grid-column: 7 / -1;
grid-row: 1;
overflow: hidden;
margin: 0 calc(var(--gouttiere) * -1) 0 0;
aspect-ratio: var(--s-piece-format, 3 / 2);
border-radius: var(--rayon-cadre);
background: var(--couleur-nuit);
}
.s-piece-figure img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--s-piece-cadrage, 50% 50%);
}
.s-piece--portrait .s-piece-figure {
--s-piece-format: 4 / 5;
grid-column: 8 / -1;
justify-self: end;
inline-size: calc(100% + var(--gouttiere));
max-inline-size: calc(36rem + var(--gouttiere));
}
.s-piece--inverse .s-piece-texte {
grid-column: 9 / -1;
}
.s-piece--inverse .s-piece-figure {
grid-column: 1 / span 7;
margin: 0 0 0 calc(var(--gouttiere) * -1);
}
.s-piece--schema .s-piece-figure {
display: grid;
place-items: center;
aspect-ratio: auto;
padding: var(--espace-3xl) var(--espace-2xl);
background: var(--couleur-surface);
}
.s-piece--schema .s-piece-figure img {
position: static;
inline-size: 100%;
max-inline-size: 40rem;
block-size: auto;
}
.s-piece-liste {
align-self: stretch;
inline-size: 100%;
border-block-end: var(--trait) solid var(--couleur-filet);
}
.s-piece-liste li {
padding-block: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-piece-note {
max-inline-size: 40ch;
color: var(--couleur-encre-douce);
}
.s-piece-chapeau {
max-inline-size: 34ch;
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-chiffres-titre {
grid-column: 1 / span 5;
max-inline-size: 13ch;
}
.s-chiffres-texte {
grid-column: 7 / -1;
display: grid;
align-content: start;
gap: var(--espace-m);
color: var(--couleur-encre-douce);
}
.s-chiffres-texte p {
max-inline-size: var(--mesure-texte);
}
.s-chiffres-texte p:first-child {
color: var(--couleur-encre);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-chiffres-tete {
grid-column: 1 / span 6;
display: grid;
gap: var(--espace-s);
margin-block-start: var(--espace-3xl);
}
.s-chiffres-tete p {
max-inline-size: 46ch;
color: var(--couleur-encre-douce);
}
.s-chiffres-liste {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
margin-block-start: var(--espace-2xl);
border-block-end: var(--trait) solid var(--couleur-filet);
counter-reset: s-chiffre;
}
.s-chiffres-liste > li {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: auto auto;
align-items: end;
padding-block: var(--espace-l) var(--espace-xl);
border-block-start: var(--trait) solid var(--couleur-filet);
counter-increment: s-chiffre;
}
.s-chiffres-liste > li::before {
content: counter(s-chiffre);
grid-column: 1 / span 2;
grid-row: 1 / span 2;
align-self: center;
font-family: var(--police-chiffres);
font-weight: var(--graisse-chiffres);
font-size: calc(var(--taille-5) * 1.3);
font-variant-numeric: lining-nums;
line-height: .8;
letter-spacing: var(--approche-prix);
}
.s-chiffres-barre {
grid-column: 3 / -1;
grid-row: 1;
inline-size: 100%;
block-size: 3px;
border-radius: var(--rayon-rond);
background: var(--couleur-accent);
}
.s-chiffres-liste > li > p {
grid-column: 3 / -1;
grid-row: 2;
max-inline-size: var(--mesure-texte);
margin-block-start: var(--espace-m);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-chiffres-lien {
grid-column: 3 / -1;
margin-block-start: var(--espace-xl);
}
.s-paire-titre {
grid-column: 1 / span 7;
max-inline-size: 16ch;
}
.s-paire-images {
grid-column: 1 / -1;
display: flex;
align-items: start;
gap: var(--ecart-colonnes);
max-inline-size: var(--s-paire-largeur, none);
margin-block-start: var(--espace-2xl);
}
.s-paire-figure {
flex: var(--s-paire-part, 1) 1 0;
min-inline-size: 0;
}
.s-paire-cadre {
position: relative;
overflow: hidden;
aspect-ratio: var(--s-paire-format, 4 / 5);
border-radius: var(--rayon-cadre);
background: var(--couleur-nuit);
}
.s-paire-cadre img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--s-paire-cadrage, 50% 50%);
}
.s-paire-figure .s-plein-legende {
margin-block-start: var(--espace-m);
}
.s-vitrine--objet .s-vitrine-titre {
position: relative;
z-index: 1;
grid-column: 1 / span 6;
grid-row: 1;
}
.s-vitrine--objet .s-vitrine-texte {
position: relative;
z-index: 1;
grid-column: 1 / span 5;
grid-row: 2;
align-self: start;
justify-items: start;
margin-block-start: var(--espace-xl);
}
.s-vitrine-objet {
position: relative;
grid-column: 5 / -1;
grid-row: 1 / span 2;
overflow: hidden;
aspect-ratio: var(--s-objet-format, 16 / 9);
margin: calc(var(--espace-4xl) * -1) calc(var(--gouttiere) * -1) 0 0;
border-start-end-radius: var(--rayon-cadre);
}
.s-vitrine-objet img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--s-objet-cadrage, 50% 50%);
}
.s-vitrine--objet .s-vitrine-prix {
grid-row: 3;
}
.s-deroule-note {
max-inline-size: 46ch;
margin-block-start: var(--espace-xl);
color: var(--couleur-encre-douce);
}
.s-deroule-document {
max-block-size: var(--s-document-hauteur, 40rem);
overflow: hidden;
mask-image: linear-gradient(to bottom, var(--couleur-encre) calc(100% - 6rem), transparent);
}
@media (max-width: 50.5em) {
.s-deroule--document .s-deroule-tete {
display: contents;
}
.s-deroule--document .s-deroule-tete h2 {
grid-column: 1 / -1;
}
.s-deroule--document .s-deroule-document {
grid-column: 1 / -1;
order: 1;
margin-block-start: var(--espace-2xl);
}
.s-deroule-etapes > .deroule-etapes {
margin-block-start: 0;
}
}
@media (max-width: 50.5em) {
.s-piece-texte,
.s-piece--inverse .s-piece-texte,
.s-piece-figure,
.s-piece--portrait .s-piece-figure,
.s-piece--inverse .s-piece-figure,
.s-chiffres-titre,
.s-chiffres-texte,
.s-chiffres-tete,
.s-chiffres-lien,
.s-paire-titre,
.s-vitrine--objet :is(.s-vitrine-titre, .s-vitrine-texte, .s-vitrine-prix),
.s-vitrine-objet {
grid-column: 1 / -1;
grid-row: auto;
}
.s-piece-figure,
.s-piece--portrait .s-piece-figure,
.s-piece--inverse .s-piece-figure {
order: -1;
justify-self: stretch;
inline-size: auto;
max-inline-size: none;
margin: 0 calc(var(--gouttiere) * -1) var(--espace-xl);
}
.s-piece--schema .s-piece-figure {
padding: var(--espace-xl) var(--espace-l);
}
.s-piece-texte {
gap: var(--espace-l);
}
.s-chiffres-texte {
margin-block-start: var(--espace-l);
}
.s-chiffres-tete {
margin-block-start: var(--espace-3xl);
}
.s-chiffres-liste > li {
grid-template-columns: 3.5rem minmax(0, 1fr);
column-gap: var(--espace-m);
padding-block: var(--espace-m) var(--espace-l);
}
.s-chiffres-liste > li::before {
grid-column: 1;
font-size: 4rem;
}
.s-chiffres-barre,
.s-chiffres-liste > li > p {
grid-column: 2;
}
.s-chiffres-liste > li > p {
margin-block-start: var(--espace-s);
font-size: var(--taille-0);
line-height: var(--interligne-texte);
}
.s-chiffres-lien {
margin-block-start: var(--espace-l);
}
.s-paire-images {
flex-direction: column;
gap: var(--espace-xl);
margin-block-start: var(--espace-xl);
}
.s-paire-figure {
flex: none;
inline-size: 100%;
}
.s-paire-figure--etroite {
inline-size: 76%;
max-inline-size: 30rem;
}
.s-paire-figure--large {
align-self: stretch;
inline-size: auto;
margin-inline: calc(var(--gouttiere) * -1);
}
.s-paire-figure--large .s-plein-legende {
margin-inline: var(--gouttiere);
}
.s-paire-figure--etroite .s-plein-legende {
margin-inline: 0;
}
.s-vitrine-objet {
--s-objet-format: 4 / 5;
order: -1;
margin: calc(var(--espace-2xl) * -1) calc(var(--espace-l) * -1) -30%;
border-start-start-radius: var(--rayon-cadre);
}
.s-vitrine--objet .s-vitrine-texte {
margin-block-start: var(--espace-l);
}
@media (min-width: 34em) {
.s-vitrine-objet {
--s-objet-format: 16 / 9;
margin-block-end: -8%;
}
}
}
}
@layer pages {
.s-bareme {
--s-bareme-prix: calc(var(--taille-prix) * .64);
row-gap: var(--espace-2xl);
}
.s-bareme-titre {
grid-column: 1 / span 6;
align-self: end;
max-inline-size: 13ch;
}
.s-bareme-intro {
grid-column: 8 / span 5;
align-self: end;
display: grid;
gap: var(--espace-m);
margin-block-end: var(--espace-xl);
}
.s-bareme-intro p {
max-inline-size: 44ch;
}
.s-bareme-intro p:first-child {
color: var(--couleur-encre-douce);
}
.s-bareme-intro p:nth-child(2) {
font-size: var(--taille-1);
font-weight: var(--graisse-menu);
line-height: var(--interligne-chapeau);
}
.s-bareme-date {
display: flex;
align-items: baseline;
gap: var(--espace-xs);
padding-block-start: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
font-weight: var(--graisse-menu);
text-wrap: balance;
}
.s-bareme-point {
flex: none;
inline-size: calc(var(--espace-xs) * .75);
block-size: calc(var(--espace-xs) * .75);
border-radius: var(--rayon-rond);
background: var(--couleur-accent-fonce);
translate: 0 -.12em;
}
.s-bareme-famille {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
border-block-start: var(--trait) solid var(--couleur-encre);
}
.s-bareme-famille-titre {
grid-column: 1 / span 3;
max-inline-size: 14ch;
padding-block-start: var(--espace-l);
font-size: calc(var(--taille-1) * 1.25);
}
.s-bareme-lignes {
grid-column: 4 / -1;
display: grid;
grid-template-columns: subgrid;
}
.s-bareme-ligne {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
align-items: baseline;
padding-block: var(--espace-l);
}
.s-bareme-ligne + .s-bareme-ligne {
border-block-start: var(--trait) solid var(--couleur-filet);
}
.s-bareme-ligne dt {
grid-column: 1 / span 5;
max-inline-size: 44ch;
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
text-wrap: pretty;
}
.s-bareme-ligne dd {
grid-column: 6 / -1;
font-family: var(--police-chiffres);
font-weight: var(--graisse-chiffres);
font-size: var(--s-bareme-prix);
line-height: 1.15;
letter-spacing: var(--approche-prix);
font-variant-numeric: lining-nums tabular-nums;
text-wrap: balance;
}
.s-bareme-ligne--phrase dd {
max-inline-size: 36ch;
font-family: var(--police-texte);
font-weight: var(--graisse-texte);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
letter-spacing: 0;
text-wrap: pretty;
}
.s-nuit .s-dedans {
row-gap: var(--espace-3xl);
}
.s-nuit-titre {
grid-column: 1 / span 5;
grid-row: 1;
align-self: start;
max-inline-size: 12ch;
}
.s-nuit-texte {
grid-column: 1 / span 5;
grid-row: 2;
align-self: end;
display: grid;
gap: var(--espace-m);
}
.s-nuit-texte p {
max-inline-size: 40ch;
}
.s-nuit-texte p:first-child {
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-nuit-texte p + p {
color: var(--couleur-encre-douce);
}
.s-nuit-chiffre {
grid-column: 7 / -1;
grid-row: 1;
align-self: start;
display: grid;
justify-items: start;
gap: var(--espace-l);
}
.s-nuit .s-nuit-montant {
color: var(--couleur-accent);
font-size: calc(var(--taille-5) * 1.4);
line-height: .9;
white-space: nowrap;
}
.s-nuit-legende {
max-inline-size: 34ch;
color: var(--couleur-encre-douce);
}
.s-nuit-frise {
grid-column: 7 / -1;
grid-row: 2;
align-self: end;
margin: 0;
}
.s-nuit-frise img {
inline-size: 100%;
max-inline-size: 46rem;
}
.s-egal {
row-gap: var(--espace-2xl);
}
.s-egal-titre {
grid-column: 1 / span 7;
max-inline-size: 20ch;
text-wrap: balance;
}
.s-egal-liste {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
border-block: var(--trait) solid var(--couleur-filet);
}
.s-egal-liste > li {
grid-column: span 6;
display: grid;
align-content: start;
gap: var(--espace-xl);
padding-block: var(--espace-xl) var(--espace-2xl);
}
.s-egal-liste > li:first-child {
padding-inline-end: var(--ecart-colonnes);
border-inline-end: var(--trait) solid var(--couleur-filet);
}
.s-egal-cas {
max-inline-size: 32ch;
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
}
.s-egal .s-egal-chiffre {
white-space: nowrap;
}
.s-egal-note {
grid-column: 7 / span 6;
max-inline-size: 40ch;
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-document {
row-gap: var(--espace-xl);
}
.s-document-piece {
grid-column: 1 / span 5;
grid-row: 1;
}
.s-document-texte {
grid-column: 7 / span 5;
grid-row: 1;
align-self: start;
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
display: grid;
gap: var(--espace-m);
}
.s-document-titre {
max-inline-size: 12ch;
margin-block-end: var(--espace-l);
}
.s-document-texte p {
max-inline-size: 46ch;
}
.s-document-titre + p {
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-document-liens {
display: grid;
justify-items: start;
gap: var(--espace-s);
margin-block-start: var(--espace-l);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
@media (prefers-reduced-motion: reduce) {
.s-document-texte {
position: static;
}
}
@media (max-width: 50.5em) {
.s-bareme > *,
.s-nuit .s-dedans > *,
.s-egal > *,
.s-document > *,
.s-bareme-famille > *,
.s-bareme-lignes > *,
.s-bareme-ligne > *,
.s-bareme-ligne :is(dt, dd),
.s-egal-liste > li {
grid-column: 1 / -1;
grid-row: auto;
}
.s-document-texte {
position: static;
}
.s-bareme,
.s-egal {
row-gap: var(--espace-xl);
}
.s-bareme-intro {
margin-block-end: var(--espace-s);
}
.s-bareme-famille,
.s-bareme-lignes,
.s-bareme-ligne,
.s-egal-liste {
grid-template-columns: minmax(0, 1fr);
}
.s-bareme-famille-titre {
max-inline-size: none;
padding-block: var(--espace-l) var(--espace-2xs);
}
.s-bareme-ligne {
row-gap: var(--espace-2xs);
padding-block: var(--espace-m);
}
.s-nuit .s-dedans {
row-gap: var(--espace-xl);
}
.s-nuit-texte {
order: 1;
}
.s-nuit-frise {
margin-inline: calc(var(--espace-l) * -1);
}
.s-egal-liste {
border-block-end: 0;
}
.s-egal-liste > li {
gap: var(--espace-m);
padding-block: var(--espace-l);
}
.s-egal-liste > li:first-child {
padding-inline-end: 0;
border-inline-end: 0;
border-block-end: var(--trait) solid var(--couleur-filet);
}
.s-document-piece {
order: 1;
margin-block-start: var(--espace-l);
}
}
}
@layer pages {
.s-piece--legende .s-piece-texte {
grid-column: 1 / span 6;
}
.s-piece--legende .s-piece-figure {
grid-column: 8 / -1;
grid-template-rows: minmax(0, 1fr) auto;
row-gap: var(--espace-xl);
padding: var(--espace-3xl) var(--espace-2xl) var(--espace-xl);
}
.s-piece.s-piece--legende .s-piece-figure img {
inline-size: auto;
max-inline-size: 100%;
block-size: auto;
}
.s-piece-legende {
justify-self: stretch;
max-inline-size: none;
padding-block-start: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
color: var(--couleur-encre-douce);
text-wrap: pretty;
}
.s-piece-corps {
display: grid;
gap: var(--espace-m);
}
.s-piece-corps p {
max-inline-size: 46ch;
}
.s-piece-corps p:first-child {
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-piece-incruste {
position: absolute;
z-index: 1;
inset-inline-start: var(--espace-xl);
inset-block-end: var(--espace-xl);
max-inline-size: min(30ch, calc(100% - var(--espace-xl) * 2));
color: var(--couleur-encre-douce);
text-wrap: pretty;
}
.s-trio-titre {
grid-column: 1 / span 7;
max-inline-size: 16ch;
}
.s-trio-images {
grid-column: 1 / -1;
display: flex;
align-items: start;
gap: var(--ecart-colonnes);
max-inline-size: var(--s-trio-largeur, 1500px);
margin-block-start: var(--espace-2xl);
}
.s-trio-figure {
flex: 5.625 1 0;
min-inline-size: 0;
}
.s-trio-figure--grande {
flex-grow: 8;
}
.s-trio-cadre {
position: relative;
overflow: hidden;
aspect-ratio: 9 / 16;
border-radius: var(--rayon-cadre);
background: var(--couleur-nuit);
}
.s-trio-figure--grande .s-trio-cadre {
aspect-ratio: 4 / 5;
}
.s-trio-cadre img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--s-trio-cadrage, 50% 50%);
}
.s-trio-figure .s-plein-legende {
margin-block-start: var(--espace-m);
}
.s-deroule-schema {
display: grid;
justify-items: center;
gap: var(--espace-l);
}
.s-deroule-schema img {
inline-size: auto;
max-inline-size: 100%;
}
.s-deroule-schema .s-piece-legende {
max-inline-size: 40ch;
justify-self: start;
}
.s-vitrine--fort .s-vitrine-titre {
grid-column: 1 / span 7;
max-inline-size: 11ch;
font-size: var(--taille-5);
line-height: 1;
}
.s-vitrine--fort .s-prix-chiffre {
font-size: var(--taille-prix);
}
@media (max-width: 50.5em) {
.s-trio-titre,
.s-vitrine--fort .s-vitrine-titre,
.s-piece--legende :is(.s-piece-texte, .s-piece-figure) {
grid-column: 1 / -1;
}
.s-piece--legende .s-piece-figure {
padding: var(--espace-xl) var(--espace-s) var(--espace-l);
}
.s-piece--legende .s-piece-legende {
padding-inline: var(--espace-s);
}
.s-piece-incruste {
inset-inline-start: var(--espace-l);
inset-block-end: var(--espace-l);
}
.s-deroule-schema {
padding-inline: var(--espace-2xs);
}
.s-deroule-schema .s-piece-legende {
padding-inline: var(--espace-s);
}
.s-trio-images {
margin-block-start: var(--espace-xl);
}
}
@media (max-width: 33.99em) {
.s-deroule-schema {
margin-inline: calc(var(--gouttiere) * -1);
}
.s-trio-images {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--espace-xl) var(--espace-m);
}
.s-trio-figure--grande {
grid-column: 1 / -1;
margin-inline: calc(var(--gouttiere) * -1);
}
.s-trio-figure--grande .s-plein-legende {
margin-inline: var(--gouttiere);
}
}
}
@layer pages {
.s-deroule-visuel--rendu {
position: relative;
overflow: hidden;
padding: 0;
aspect-ratio: 3 / 2;
background: var(--couleur-fond);
}
.s-deroule-visuel--rendu img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--s-rendu-cadrage, 50% 50%);
}
.s-deroule-visuel--schema {
display: grid;
justify-items: center;
row-gap: var(--espace-l);
}
.s-deroule-visuel--schema img {
inline-size: 100%;
max-inline-size: var(--s-schema-largeur, 400px);
block-size: auto;
}
.s-deroule-mention {
justify-self: stretch;
color: var(--couleur-encre-douce);
}
.s-piece-propos {
display: grid;
gap: var(--espace-m);
}
.s-piece-propos p {
max-inline-size: 46ch;
}
.s-piece-propos p:first-child {
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-piece-action {
margin-block-start: var(--espace-s);
}
.s-piece--schema .s-piece-figure img {
max-inline-size: var(--s-schema-largeur, 40rem);
}
.s-piece-mention {
inline-size: min(100%, 30rem);
margin-block-start: var(--espace-l);
color: var(--couleur-encre-douce);
}
.s-piece--photo .s-piece-figure {
overflow: visible;
aspect-ratio: auto;
border-radius: 0;
background: none;
}
.s-piece-photo {
position: relative;
overflow: hidden;
aspect-ratio: var(--s-piece-format, 3 / 2);
border-radius: var(--rayon-cadre);
background: var(--couleur-nuit);
}
.s-piece--photo .s-piece-mention {
inline-size: auto;
max-inline-size: 42ch;
margin-block-start: 0;
padding-block-start: var(--espace-m);
}
.s-lueur {
position: relative;
overflow: hidden;
}
.s-lueur .s-dedans {
position: relative;
grid-template-rows: auto 1fr auto;
row-gap: var(--espace-2xl);
min-block-size: min(42rem, 48vw);
}
.s-lueur-objet {
position: absolute;
inset-block: 0;
inset-inline: var(--s-lueur-debut, 0) 0;
margin: 0;
}
.s-lueur-objet img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: var(--s-lueur-cadrage, 100% 50%);
}
.s-lueur-etroite {
display: none;
}
.s-lueur-titre {
position: relative;
z-index: 1;
grid-column: 1 / span 7;
grid-row: 1;
max-inline-size: 11ch;
font-size: var(--taille-5);
line-height: 1;
letter-spacing: var(--approche-titre);
text-wrap: balance;
}
.s-lueur-texte {
position: relative;
z-index: 1;
grid-column: 1 / span 5;
grid-row: 3;
align-self: end;
display: grid;
gap: var(--espace-m);
}
.s-lueur-texte p {
max-inline-size: 40ch;
}
.s-lueur-texte p:first-child {
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-lueur--boite {
--s-lueur-debut: 50%;
--s-lueur-cadrage: 50% 30%;
}
.s-lueur--boite .s-lueur-titre {
grid-column: 1 / span 6;
max-inline-size: 14ch;
}
.s-lueur--boite .s-lueur-objet {
mask-image: linear-gradient(to right, transparent, var(--couleur-encre) 18%);
}
.s-lueur--boite .s-lueur-large {
display: none;
}
.s-lueur--boite .s-lueur-etroite {
display: block;
}
.s-fin--sans-objet .s-fin-titre {
grid-column: 1 / span 6;
grid-row: 1;
align-self: end;
max-inline-size: 12ch;
}
.s-fin--sans-objet .s-fin-action {
grid-column: 8 / -1;
grid-row: 1;
align-self: end;
}
@media (max-width: 50.5em) {
.s-lueur-titre,
.s-lueur--boite .s-lueur-titre,
.s-lueur-texte,
.s-lueur-objet,
.s-fin--sans-objet :is(.s-fin-titre, .s-fin-action) {
grid-column: 1 / -1;
grid-row: auto;
}
.s-deroule-visuel--rendu {
padding: 0;
}
.s-deroule-visuel--schema {
max-inline-size: 30rem;
padding: 0;
border: 0;
border-radius: 0;
}
.s-deroule-mention,
.s-piece-mention {
color: var(--couleur-encre);
}
.s-piece--photo .s-piece-figure {
margin-block-end: var(--espace-xl);
}
.s-piece--photo .s-piece-mention {
max-inline-size: none;
margin-inline: var(--gouttiere);
}
@media (min-width: 34em) {
.s-piece--photo .s-piece-figure {
justify-self: start;
max-inline-size: 32rem;
margin-inline: 0;
}
.s-piece--photo .s-piece-mention {
margin-inline: 0;
}
}
.s-piece-action {
justify-self: stretch;
padding-block: var(--espace-s);
text-align: center;
white-space: normal;
line-height: 1.25;
}
.s-lueur .s-dedans {
grid-template-rows: none;
row-gap: var(--espace-l);
min-block-size: 0;
}
.s-lueur-objet {
position: relative;
inset: auto;
order: -1;
aspect-ratio: var(--s-lueur-format, 16 / 9);
margin: calc(var(--espace-2xl) * -1) calc(var(--espace-l) * -1) var(--s-lueur-remontee, -6%);
mask-image: none;
}
.s-lueur-titre,
.s-lueur--boite .s-lueur-titre {
max-inline-size: 12ch;
}
.s-lueur--boite .s-lueur-large {
display: block;
}
.s-lueur--boite .s-lueur-etroite {
display: none;
}
@media (max-width: 33.99em) {
.s-lueur {
--s-lueur-format: 4 / 5;
--s-lueur-remontee: -30%;
--s-lueur-cadrage: 50% 50%;
}
.s-lueur-large {
display: none;
}
.s-lueur-etroite {
display: block;
}
.s-lueur--boite {
--s-lueur-format: 4 / 3;
--s-lueur-remontee: -14%;
--s-lueur-cadrage: 88% 45%;
}
}
.s-fin--sans-objet .s-fin-titre {
max-inline-size: none;
}
}
}
@layer pages {
.s-schema {
display: grid;
align-content: start;
gap: var(--espace-m);
}
.s-schema-cadre {
display: grid;
place-items: center;
padding: var(--espace-2xl) var(--espace-xl);
border: var(--trait) solid var(--couleur-filet);
border-radius: var(--rayon-m);
}
.s-schema--nickel .s-schema-cadre {
border-color: var(--couleur-surface);
background: var(--couleur-surface);
}
.s-schema-cadre img {
inline-size: 100%;
max-inline-size: var(--s-schema-largeur, 30rem);
block-size: auto;
}
.s-schema-legende {
max-inline-size: 52ch;
color: var(--couleur-encre-douce);
text-wrap: pretty;
}
.s-source {
font-size: max(14px, var(--taille--1));
line-height: 1.45;
color: var(--couleur-encre-douce);
}
.s-fin .s-fin-action .bouton,
.s-fin .s-fin-action .numero {
max-inline-size: 100%;
white-space: normal;
}
.s-piece--trait .s-piece-figure {
border: var(--trait) solid var(--couleur-filet);
background: transparent;
}
.s-piece-figure .s-source {
justify-self: start;
}
.s-chiffre {
row-gap: var(--espace-2xl);
}
.s-chiffre-titre {
grid-column: 1 / span 7;
max-inline-size: 18ch;
text-wrap: balance;
}
.s-chiffre-rang {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
align-items: end;
padding-block-start: var(--espace-xl);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.s-chiffre .s-chiffre-nombre {
grid-column: 1 / span 6;
font-size: calc(var(--taille-5) * 1.3);
line-height: .92;
text-wrap: balance;
}
.s-chiffre-legende {
grid-column: 8 / span 5;
display: grid;
gap: var(--espace-m);
}
.s-chiffre-legende p {
max-inline-size: 40ch;
}
.s-chiffre-legende p:first-child {
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-chiffre-legende .s-source {
margin-block-start: var(--espace-s);
}
.s-chiffre-suite {
grid-column: 8 / span 5;
display: grid;
justify-items: start;
gap: var(--espace-m);
}
.s-chiffre-suite p {
max-inline-size: 40ch;
}
.s-consigne-suite {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
align-items: end;
row-gap: var(--espace-m);
}
.s-consigne-suite > div {
grid-column: 1 / span 6;
}
.s-consigne-suite p {
max-inline-size: 46ch;
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.s-consigne-suite .lien {
grid-column: 7 / -1;
justify-self: start;
}
.s-sommaire-famille {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
padding-block: var(--espace-l) var(--espace-2xl);
border-block-start: var(--trait) solid var(--couleur-encre);
}
.s-sommaire-famille h2 {
grid-column: 1 / span 4;
max-inline-size: 16ch;
padding-block-start: var(--espace-m);
font-size: calc(var(--taille-1) * 1.25);
line-height: 1.2;
letter-spacing: calc(var(--approche-titre) / 2);
}
.s-sommaire-liste {
grid-column: 5 / -1;
}
.s-sommaire-entree {
--s-vignette: 5rem;
position: relative;
display: grid;
grid-template-columns: var(--s-vignette) minmax(0, 1fr) auto;
grid-template-rows: 1fr auto auto 1fr;
column-gap: var(--espace-l);
padding-block: var(--espace-m);
}
.s-sommaire-entree + .s-sommaire-entree {
border-block-start: var(--trait) solid var(--couleur-filet);
}
.s-sommaire-entree > :is(picture, img) {
grid-column: 1;
grid-row: 1 / -1;
align-self: center;
}
.s-sommaire-vignette {
inline-size: var(--s-vignette);
block-size: var(--s-vignette);
border: var(--trait) solid var(--couleur-filet);
border-radius: var(--rayon-m);
object-fit: cover;
}
.s-sommaire-intitule {
grid-column: 2;
grid-row: 2;
font-size: var(--taille-1);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
}
.s-sommaire-intitule a {
display: inline-block;
padding-block: var(--espace-s);
margin-block: calc(var(--espace-s) * -1);
text-decoration-line: underline;
text-decoration-thickness: var(--trait);
text-underline-offset: 0.25em;
text-decoration-color: transparent;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
.s-sommaire-intitule a::after {
content: "";
position: absolute;
inset: 0;
}
.s-sommaire-entree:hover .s-sommaire-intitule a {
text-decoration-color: currentColor;
}
.s-sommaire-intitule a:focus-visible {
outline: none;
}
.s-sommaire-entree:has(a:focus-visible) {
outline: 2px solid var(--couleur-focus);
outline-offset: 4px;
border-radius: var(--rayon-m);
}
.s-sommaire-ligne {
grid-column: 2;
grid-row: 3;
max-inline-size: 58ch;
margin-block-start: var(--espace-2xs);
color: var(--couleur-encre-douce);
}
.s-sommaire-date {
grid-column: 3;
grid-row: 2;
align-self: baseline;
color: var(--couleur-encre-douce);
white-space: nowrap;
}
@media (max-width: 50.5em) {
.s-chiffre-titre,
.s-chiffre-rang,
.s-chiffre .s-chiffre-nombre,
.s-chiffre-legende,
.s-chiffre-suite,
.s-consigne-suite > div,
.s-consigne-suite .lien,
.s-sommaire-famille,
.s-sommaire-famille h2,
.s-sommaire-liste {
grid-column: 1 / -1;
grid-row: auto;
}
.s-schema-cadre {
padding: var(--espace-xl) var(--espace-l);
}
.s-schema-legende {
color: var(--couleur-encre);
}
.s-chiffre {
row-gap: var(--espace-xl);
}
.s-chiffre-rang {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--espace-l);
padding-block-start: var(--espace-l);
}
.s-chiffre .s-chiffre-nombre {
font-size: calc(var(--taille-5) * 1.55);
}
.s-consigne-suite {
grid-template-columns: minmax(0, 1fr);
margin-block-start: var(--espace-s);
}
.s-sommaire-famille {
grid-template-columns: minmax(0, 1fr);
padding-block: var(--espace-m) var(--espace-xl);
}
.s-sommaire-famille h2 {
max-inline-size: none;
padding-block: var(--espace-xs) var(--espace-s);
}
.s-sommaire-entree {
--s-vignette: min(3.5rem, 17.5vw);
grid-template-columns: var(--s-vignette) minmax(0, 1fr);
grid-template-rows: 1fr auto auto auto 1fr;
column-gap: var(--espace-m);
}
.s-sommaire-ligne {
color: var(--couleur-encre);
}
.s-sommaire-date {
grid-column: 2;
grid-row: 4;
margin-block-start: var(--espace-2xs);
white-space: normal;
}
}
}
@layer pages {
.s-liens {
row-gap: var(--espace-2xl);
}
.s-liens-tete {
grid-column: 1 / span 5;
align-self: start;
display: grid;
justify-items: start;
gap: var(--espace-xl);
}
.s-liens-tete h2 {
max-inline-size: 14ch;
}
.s-liens-tete .bouton {
max-inline-size: 100%;
white-space: normal;
text-wrap: balance;
}
.s-liens .s-liens-liste {
grid-column: 7 / span 6;
}
.s-liens--texte .s-suite-lien {
grid-template-columns: minmax(0, 1fr);
}
.s-liens--texte :is(.s-suite-intitule, .s-suite-ligne) {
grid-column: 1;
}
.s-liens--texte .s-suite-intitule {
overflow-wrap: anywhere;
}
.s-document--schema .s-document-schema {
grid-column: 1 / span 5;
grid-row: 1;
margin: 0;
}
.s-document--schema .s-document-piece {
grid-row: 2;
margin-block-start: var(--espace-xl);
}
.s-document--schema .s-document-texte {
grid-row: 1 / span 2;
}
@media (max-width: 50.5em) {
.s-liens .s-liens-liste,
.s-document--schema :is(.s-document-schema, .s-document-piece, .s-document-texte) {
grid-column: 1 / -1;
grid-row: auto;
}
.s-liens {
row-gap: var(--espace-xl);
}
.s-liens-tete {
display: contents;
}
.s-liens-tete > * {
grid-column: 1 / -1;
}
.s-liens-tete > .bouton {
order: 1;
justify-self: stretch;
}
.s-document--schema .s-document-schema {
order: 1;
margin-block-start: var(--espace-l);
}
.s-document--schema .s-document-piece {
margin-block-start: var(--espace-s);
}
}
}
@layer pages {
.introuvable {
padding-inline: var(--marge);
padding-block-start: var(--espace-m);
}
.introuvable-cadre {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
grid-template-areas: "code mascotte" "texte mascotte";
column-gap: var(--espace-2xl);
row-gap: var(--espace-xl);
max-inline-size: var(--mesure-page);
margin-inline: auto;
padding: var(--espace-3xl) var(--espace-3xl) 0;
border-radius: var(--rayon-cadre);
overflow: hidden;
background: radial-gradient(55% 75% at 80% 45%, color-mix(in oklch, var(--couleur-accent) 18%, var(--couleur-nuit)), var(--couleur-nuit) 72%);
}
.introuvable-code {
grid-area: code;
display: flex;
align-items: center;
margin: 0;
font-family: var(--police-chiffres);
font-weight: var(--graisse-chiffres);
font-size: clamp(7rem, 2rem + 13vw, 17rem);
line-height: .8;
letter-spacing: var(--approche-affichage);
color: var(--couleur-sur-nuit);
font-variant-numeric: lining-nums;
}
.introuvable-rosace {
flex: none;
inline-size: .6em;
block-size: .78em;
margin-inline: .05em;
}
.introuvable-texte {
grid-area: texte;
display: grid;
gap: var(--espace-l);
align-content: start;
padding-block-end: var(--espace-3xl);
}
.introuvable-texte h1 {
max-inline-size: 16ch;
font-size: var(--taille-4);
text-wrap: balance;
}
.introuvable-chapeau {
max-inline-size: 44ch;
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.introuvable-action {
display: grid;
justify-items: start;
gap: var(--espace-s);
margin-block-start: var(--espace-s);
}
.introuvable-ligne {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
}
.introuvable-mascotte.mascotte-cadre {
grid-area: mascotte;
align-self: end;
justify-self: center;
inline-size: min(100%, 31rem);
aspect-ratio: 1136 / 1408;
border-radius: 0;
background: none;
}
.introuvable-mascotte img {
object-fit: contain;
object-position: 50% 100%;
}
.introuvable-suite {
display: grid;
gap: var(--espace-xl);
max-inline-size: var(--mesure-page);
margin: var(--espace-section) auto;
padding-inline: var(--marge);
}
.introuvable-suite-titre {
font-size: var(--taille-3);
}
.introuvable-cartes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--espace-s);
margin: 0;
padding: 0;
list-style: none;
}
.introuvable-carte {
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--espace-xs);
block-size: 100%;
min-block-size: 11rem;
padding: var(--espace-l);
border-radius: var(--rayon-cadre);
background: var(--couleur-surface);
color: var(--couleur-encre);
text-decoration: none;
transition: background-color var(--duree-courte) var(--courbe-douce);
}
.introuvable-carte-titre {
font-size: var(--taille-1);
font-weight: var(--graisse-forte);
line-height: 1.2;
}
.introuvable-carte-texte {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: 1.45;
}
.introuvable-fleche {
inline-size: 1.25rem;
block-size: 1.25rem;
fill: none;
stroke: var(--couleur-accent-fonce);
stroke-width: 1.6;
}
@media (hover: hover) and (pointer: fine) {
.introuvable-carte:hover {
background: var(--couleur-filet);
}
}
.introuvable-accueil {
justify-self: start;
}
@media (max-width: 64em) {
.introuvable-cartes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 50.5em) {
.introuvable {
padding-inline: var(--espace-s);
}
.introuvable-cadre {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "code" "texte" "mascotte";
row-gap: var(--espace-l);
padding: var(--espace-xl) var(--espace-l) 0;
}
.introuvable-code {
font-size: min(clamp(6rem, 2rem + 20vw, 10rem), 30vw);
}
.introuvable-texte {
padding-block-end: 0;
}
.introuvable-action .bouton {
justify-self: stretch;
}
.introuvable-mascotte.mascotte-cadre {
inline-size: min(64%, 15rem);
}
.introuvable-cartes {
grid-template-columns: minmax(0, 1fr);
}
.introuvable-carte {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
min-block-size: 0;
column-gap: var(--espace-m);
}
.introuvable-fleche {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
}
@media (prefers-reduced-motion: reduce) {
.introuvable-carte {
transition: none;
}
}
}
@layer pages {
.page-accueil :is(.deroule, .cas, .qui, .communes, .questions),
.page-accueil :is(.tarif-dedans, .nuit-dedans, .pose-dedans) {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
}
.page-accueil :is(.deroule, .cas, .qui, .communes, .questions) {
margin-block-start: var(--espace-section);
padding-inline: var(--bord);
}
.page-accueil :is(.tarif, .nuit-bande, .pose) {
margin: var(--espace-section) var(--marge) 0;
border-radius: var(--rayon-cadre);
}
.page-accueil :is(.tarif-dedans, .nuit-dedans, .pose-dedans) {
padding: var(--espace-4xl) var(--gouttiere);
}
:where(.page-accueil) .vitrine-image,
:where(.page-accueil) .pose-image {
overflow: hidden;
border-radius: var(--rayon-m);
background: var(--couleur-nuit);
}
:where(.page-accueil) .vitrine-image img,
:where(.page-accueil) .pose-image img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
:where(.page-accueil) .premier-rdv {
min-block-size: 0;
margin-block-start: calc(var(--espace-xs) * -1);
}
:where(.page-accueil) .deroule-tete {
grid-column: 1 / span 5;
align-self: start;
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
}
:where(.page-accueil) .deroule-message {
max-inline-size: 30ch;
margin-block-start: var(--espace-l);
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
:where(.page-accueil) .deroule-tete:has(.deroule-image) {
align-self: stretch;
display: flex;
flex-direction: column;
}
:where(.page-accueil) .deroule-image {
position: relative;
flex: 1 1 0;
min-block-size: 12rem;
max-block-size: 26rem;
overflow: hidden;
margin: var(--espace-2xl) 0 0;
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
:where(.page-accueil) .deroule-image img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: 42% 13%;
}
:where(.page-accueil) .deroule-pied {
grid-column: 7 / span 6;
display: grid;
justify-items: start;
gap: var(--espace-m);
margin-block-start: var(--espace-xl);
}
:where(.page-accueil) .tarif-titre {
grid-column: 1 / span 5;
grid-row: 1 / span 3;
align-self: start;
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
max-inline-size: 13ch;
}
:where(.page-accueil) .tarif-dedans:has(.tarif-image) .tarif-titre {
grid-row: 1;
position: static;
}
:where(.page-accueil) .bareme {
grid-column: 7 / span 6;
grid-row: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
}
:where(.page-accueil) .bareme-ligne {
display: grid;
grid-template-rows: auto auto 1fr;
gap: var(--espace-m);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
:where(.page-accueil) .bareme-ligne dt {
color: var(--couleur-encre);
font-weight: var(--graisse-titre);
}
:where(.page-accueil) .bareme-prix {
max-inline-size: 5.3em;
}
:where(.page-accueil) .bareme-detail {
max-inline-size: 34ch;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
:where(.page-accueil) .tarif-image {
grid-column: 1 / span 5;
grid-row: 3;
align-self: start;
aspect-ratio: 3 / 2;
margin-block-start: var(--espace-3xl);
}
:where(.page-accueil) .tarif-texte {
grid-column: 7 / span 6;
grid-row: 3;
display: grid;
justify-items: start;
gap: var(--espace-m);
margin-block-start: var(--espace-3xl);
color: var(--couleur-encre-douce);
}
:where(.page-accueil) .tarif-texte p {
max-inline-size: var(--mesure-texte);
}
:where(.page-accueil) .tarif-texte p:first-child {
color: var(--couleur-encre);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
@media (min-width: 50.5625em) {
.page-accueil .tarif-dedans {
padding-block: var(--espace-3xl);
}
:where(.page-accueil) .tarif-dedans:has(.tarif-image) > .tarif-image {
grid-column: 1 / span 5;
grid-row: 1 / span 3;
align-self: center;
aspect-ratio: 3 / 2;
margin: 0;
}
:where(.page-accueil) .tarif-dedans:has(.tarif-image) > :is(.tarif-titre, .bareme, .tarif-texte) {
grid-column: 7 / span 6;
}
:where(.page-accueil) .tarif-dedans:has(.tarif-image) > .tarif-titre {
grid-row: 1;
max-inline-size: 18ch;
}
:where(.page-accueil) .tarif-dedans:has(.tarif-image) > .bareme {
grid-row: 2;
grid-template-columns: minmax(0, 1fr);
margin-block-start: var(--espace-xl);
}
:where(.page-accueil) .tarif-dedans:has(.tarif-image) > .tarif-texte {
grid-row: 3;
margin-block-start: var(--espace-l);
}
}
:where(.page-accueil) .cas-titre {
grid-column: 1 / span 6;
margin-block-end: var(--espace-2xl);
}
:where(.page-accueil) .cas-liste {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
border-block-end: var(--trait) solid var(--couleur-filet);
}
:where(.page-accueil) .cas-ligne {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
padding-block: var(--espace-xl);
border-block-start: var(--trait) solid var(--couleur-filet);
}
:where(.page-accueil) .cas-ligne h3 {
grid-column: 1 / span 5;
}
:where(.page-accueil) .cas-texte {
grid-column: 7 / span 5;
display: grid;
justify-items: start;
gap: var(--espace-2xs);
color: var(--couleur-encre-douce);
}
:where(.page-accueil) .cas-texte p {
max-inline-size: 52ch;
}
:where(.page-accueil) .nuit-dedans {
min-block-size: min(90svh, var(--cadre-hauteur-max));
align-content: space-between;
row-gap: var(--espace-3xl);
}
:where(.page-accueil) .nuit-titre {
grid-column: 1 / span 8;
font-size: var(--taille-5);
line-height: var(--interligne-affichage);
letter-spacing: var(--approche-affichage);
max-inline-size: 12ch;
}
:where(.page-accueil) .nuit-texte {
grid-column: 8 / span 5;
display: grid;
gap: var(--espace-m);
color: var(--couleur-encre-douce);
}
:where(.page-accueil) .nuit-texte p:first-child {
color: var(--couleur-encre);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
:where(.page-accueil) .nuit-image {
grid-column: 7 / span 6;
grid-row: 1 / span 2;
aspect-ratio: 4 / 5;
}
:where(.page-accueil) .nuit-dedans:has(.nuit-image) .nuit-titre {
grid-column: 1 / span 6;
grid-row: 1;
}
:where(.page-accueil) .nuit-dedans:has(.nuit-image) .nuit-texte {
grid-column: 1 / span 5;
grid-row: 2;
align-self: end;
}
:where(.page-accueil) .nuit-vue--etroite {
display: none;
}
@media (min-width: 50.5625em) {
.page-accueil .nuit-dedans {
padding-block: var(--espace-3xl);
}
:where(.page-accueil) .nuit-dedans:has(.nuit-image) {
min-block-size: 0;
align-content: center;
row-gap: var(--espace-l);
}
:where(.page-accueil) .nuit-dedans:has(.nuit-image) > .nuit-image {
grid-column: 7 / span 6;
grid-row: 1 / span 2;
align-self: center;
aspect-ratio: 3 / 2;
}
:where(.page-accueil) .nuit-dedans:has(.nuit-image) > .nuit-titre {
align-self: end;
max-inline-size: 16ch;
font-size: var(--taille-3);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
:where(.page-accueil) .nuit-dedans:has(.nuit-image) > .nuit-texte {
align-self: start;
}
}
:where(.page-accueil) .pose {
background: var(--couleur-surface);
}
:where(.page-accueil) .pose-titre {
grid-column: 1 / span 6;
grid-row: 1;
max-inline-size: 18ch;
}
:where(.page-accueil) .pose-texte {
grid-column: 7 / span 6;
grid-row: 1 / span 3;
display: grid;
align-content: start;
gap: var(--espace-m);
}
:where(.page-accueil) .pose-texte p {
max-inline-size: var(--mesure-texte);
}
:where(.page-accueil) .pose-texte p + p {
color: var(--couleur-encre-douce);
}
:where(.page-accueil) .pose-liens {
grid-column: 1 / span 5;
grid-row: 2;
margin-block-start: var(--espace-2xl);
border-block-end: var(--trait) solid var(--couleur-filet);
}
:where(.page-accueil) .pose-liens a {
display: flex;
align-items: center;
min-block-size: calc(var(--bouton-hauteur) * 1.5);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
letter-spacing: calc(var(--approche-titre) / 3);
text-decoration-line: underline;
text-decoration-color: transparent;
text-underline-offset: 0.25em;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
:where(.page-accueil) .pose-liens a:hover {
text-decoration-color: currentColor;
}
:where(.page-accueil) .pose-bouton {
grid-column: 1 / span 5;
grid-row: 3;
justify-self: start;
align-self: start;
margin-block-start: var(--espace-xl);
}
:where(.page-accueil) .pose-image {
position: relative;
grid-column: 7 / span 6;
grid-row: 1 / span 4;
align-self: center;
aspect-ratio: 3 / 2;
background: var(--couleur-fond);
}
:where(.page-accueil) .pose-image img {
position: absolute;
inset: 0;
}
:where(.page-accueil) .pose-dedans:has(.pose-image) .pose-texte {
grid-column: 1 / span 5;
grid-row: 2;
margin-block-start: var(--espace-xl);
}
:where(.page-accueil) .pose-dedans:has(.pose-image) .pose-liens {
grid-row: 3;
}
:where(.page-accueil) .pose-dedans:has(.pose-image) .pose-bouton {
grid-row: 4;
}
:where(.page-accueil) .qui-texte {
grid-column: 1 / span 5;
display: grid;
justify-items: start;
align-content: start;
gap: var(--espace-l);
}
:where(.page-accueil) .qui-texte p {
max-inline-size: 46ch;
color: var(--couleur-encre-douce);
}
:where(.page-accueil) .communes-texte {
grid-column: 1 / span 6;
display: grid;
grid-template-rows: auto auto auto 1fr;
justify-items: start;
gap: var(--espace-l);
}
:where(.page-accueil) .communes-texte > .mascotte {
align-self: start;
}
:where(.page-accueil) .communes-texte > p:not(.communes-liens) {
max-inline-size: 52ch;
color: var(--couleur-encre-douce);
}
:where(.page-accueil) .communes-liens {
display: flex;
flex-wrap: wrap;
gap: var(--espace-2xs) var(--espace-xl);
}
:where(.page-accueil) .communes-test {
grid-column: 8 / span 5;
align-self: end;
}
:where(.page-accueil) .communes-test:has(input) {
display: grid;
gap: var(--espace-xs);
padding: var(--espace-xl);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
:where(.page-accueil) .communes-test label {
font-weight: var(--graisse-titre);
}
:where(.page-accueil) .communes-aide {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
:where(.page-accueil) .communes-test input {
min-block-size: var(--bouton-hauteur-fort);
margin-block-start: var(--espace-xs);
padding-inline: var(--espace-m);
border: var(--trait) solid var(--couleur-bord-champ);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
font-size: var(--taille-0);
}
:where(.page-accueil) .communes-test input:hover {
border-color: var(--couleur-encre-douce);
}
:where(.page-accueil) .communes-reponse:empty {
display: none;
}
:where(.page-accueil) .communes-reponse {
margin-block-start: var(--espace-xs);
font-weight: var(--graisse-menu);
}
:where(.page-accueil) .communes-reponse[data-etat="non"] {
color: var(--couleur-erreur);
}
:where(.page-accueil) .questions-tete {
grid-column: 1 / span 5;
align-self: start;
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
display: grid;
justify-items: start;
gap: var(--espace-2xl);
}
:where(.page-accueil) .questions-titre {
text-wrap: balance;
}
:where(.page-accueil) .questions-appel {
display: grid;
justify-items: start;
gap: var(--espace-m);
color: var(--couleur-encre-douce);
}
@media (max-width: 50.5em) {
.page-accueil .questions-tete {
display: contents;
}
.page-accueil .questions-tete > * {
grid-column: 1 / -1;
}
:where(.page-accueil) .questions-appel {
order: 1;
margin-block-start: var(--espace-2xl);
}
}
@media (max-width: 50.5em) {
.page-accueil :is(.deroule, .cas, .qui, .communes, .questions) > *,
.page-accueil :is(.tarif-dedans, .nuit-dedans, .pose-dedans) > *,
.page-accueil .cas-ligne > * {
grid-column: 1 / -1;
grid-row: auto;
}
.page-accueil :is(.nuit-dedans, .pose-dedans):has(.nuit-image, .pose-image) > *,
.page-accueil .deroule-tete > * {
grid-column: 1 / -1;
grid-row: auto;
}
.page-accueil :is(.tarif-dedans, .nuit-dedans, .pose-dedans) {
padding: var(--bande-tel);
}
:where(.page-accueil) :is(.tarif-image, .nuit-image, .pose-image) {
order: 1;
position: relative;
aspect-ratio: 16 / 9;
margin-block-start: var(--espace-2xl);
}
:where(.page-accueil) :is(.tarif-image, .nuit-image, .pose-image) img {
position: absolute;
inset: 0;
}
:where(.page-accueil) .nuit-image img:not(.nuit-vue) {
scale: 1.35;
}
:where(.page-accueil) .nuit-vue--large {
display: none;
}
:where(.page-accueil) .nuit-vue--etroite {
display: block;
}
:where(.page-accueil) .nuit-dedans {
row-gap: 0;
}
:where(.page-accueil) .nuit-texte {
margin-block-start: var(--espace-xl);
}
.page-accueil .deroule-tete {
display: contents;
}
:where(.page-accueil) .deroule-image {
order: 1;
aspect-ratio: 16 / 9;
min-block-size: 0;
}
:where(.page-accueil) .deroule-image img {
object-position: 50% 16%;
scale: 1.2;
transform-origin: 7% 50%;
}
:where(.page-accueil) .deroule-pied {
order: 2;
}
:where(.page-accueil) .premier-rdv {
grid-column: 2;
justify-self: end;
min-block-size: var(--bouton-hauteur);
margin: 0;
font-size: var(--taille--1);
white-space: nowrap;
}
:where(.page-accueil) .deroule-tete,
:where(.page-accueil) .tarif-titre {
position: static;
}
:where(.page-accueil) .tarif-texte,
:where(.page-accueil) .tarif-image,
:where(.page-accueil) .cas-liste,
:where(.page-accueil) .communes-test,
:where(.page-accueil) .pose-liens {
margin-block-start: var(--espace-2xl);
}
:where(.page-accueil) .bareme {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--espace-xl);
margin-block-start: var(--espace-2xl);
}
:where(.page-accueil) .cas-titre {
margin-block-end: 0;
}
:where(.page-accueil) .cas-liste {
grid-template-columns: minmax(0, 1fr);
}
:where(.page-accueil) .cas-ligne {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--espace-s);
padding-block: var(--espace-l);
}
:where(.page-accueil) .nuit-dedans {
min-block-size: 0;
}
:where(.page-accueil) .pose-texte {
margin-block-start: var(--espace-xl);
}
:where(.page-accueil) .pose-bouton {
justify-self: stretch;
}
}
@media (max-width: 50.5em) and (max-height: 44.5em) {
.page-accueil .premier-cadre {
align-content: start;
min-block-size: 0;
padding-block-start: 0;
}
.page-accueil .premier-objet {
position: relative;
inset: auto;
z-index: auto;
overflow: hidden;
margin-inline: calc(var(--espace-l) * -1);
block-size: clamp(4.5rem, calc(100svh - 29.5rem), 13rem);
}
.page-accueil .premier-voile {
display: none;
}
.page-accueil .premier-texte {
margin-block-start: var(--espace-m);
}
.page-accueil .premier-action {
margin-block-start: var(--espace-m);
}
}
}
@layer pages {
:where(.page-accueil) .qui-photo {
grid-column: 1 / span 4;
grid-row: 1;
aspect-ratio: 1 / 1;
--cadrage: 50% 22%;
}
:where(.page-accueil) .qui-texte {
grid-column: 6 / span 6;
grid-row: 1;
align-self: center;
}
@media (max-width: 50.5em) {
:where(.page-accueil) .qui-photo {
margin-block-start: var(--espace-2xl);
}
}
@media (max-width: 50.5em) and (max-height: 44.5em) {
.page-accueil .premier {
padding-block-start: var(--espace-xl);
}
.page-accueil .premier-image--etroite {
object-position: 42% 6%;
-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
}
@media (max-width: 50.5em) and (min-height: 44.5625em) {
.page-accueil .premier {
padding-block-start: var(--espace-xl);
}
.page-accueil .premier-image--etroite {
transform: translateY(17%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
}
}
}
@layer pages {
.page-urgence.page-cle-cassee .premier-piece--coupe {
inset-block-start: 3%;
inset-inline-end: 0;
inline-size: min(56%, 54rem);
}
@media (max-width: 50.5em) {
.page-urgence.page-cle-cassee .premier-piece--coupe {
inset-block-start: 2%;
inline-size: min(112%, 36rem);
translate: -56% 0;
}
}
}
@layer pages {
.page-urgence.page-cle-cassee .s-piece--schema {
--s-schema-largeur: 420px;
}
.page-urgence.page-cle-cassee .s-fin-objet {
--s-objet-echelle: .92;
}
.page-urgence.page-cle-cassee .s-consigne-titre {
max-inline-size: 16ch;
}
.page-urgence.page-cle-cassee .s-fin-titre {
max-inline-size: 14ch;
}
@media (max-width: 50.5em) {
.page-urgence.page-cle-cassee .s-piece--schema .s-piece-figure {
padding-inline: var(--espace-s);
}
}
}
@layer pages {
.page-deroule .marche-refus .s-lueur-texte {
grid-column: 1 / span 6;
gap: var(--espace-l);
}
.marche-refus-liste {
border-block-end: var(--trait) solid var(--couleur-filet);
}
.marche-refus-liste > li {
max-inline-size: 40ch;
padding-block: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-deroule .marche-refus-texte {
color: var(--couleur-encre-douce);
}
.marche-preuves {
row-gap: var(--espace-2xl);
}
.marche-preuves-titre {
grid-column: 1 / span 8;
max-inline-size: 22ch;
text-wrap: balance;
}
.marche-loi,
.marche-nous {
display: grid;
align-content: start;
gap: var(--espace-l);
}
.marche-loi {
grid-column: 1 / span 6;
padding-block-start: var(--espace-xl);
}
.marche-nous {
grid-column: 7 / span 6;
padding: var(--espace-xl) var(--espace-xl) var(--espace-l);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.marche-preuves h3 {
font-size: calc(var(--taille-1) * 1.25);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
}
.marche-preuves-liste > li {
padding-block: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.marche-loi .marche-preuves-liste {
border-block-end: var(--trait) solid var(--couleur-filet);
}
.marche-note {
max-inline-size: 52ch;
color: var(--couleur-encre-douce);
}
.marche-feuille {
align-self: start;
margin-block-start: var(--espace-xl);
}
.marche-feuille--devis {
grid-column: 1 / span 6;
}
.marche-feuille--facture {
grid-column: 7 / span 6;
}
.marche-feuille--devis .facsimile {
margin-inline-start: auto;
}
@media (max-width: 50.5em) {
.page-deroule .marche-refus :is(.s-lueur-titre, .s-lueur-texte),
.marche-preuves > *,
.marche-preuves-titre,
.marche-loi,
.marche-nous,
.marche-feuille--devis,
.marche-feuille--facture {
grid-column: 1 / -1;
grid-row: auto;
}
.marche-preuves {
row-gap: var(--espace-xl);
}
.marche-loi {
padding-block-start: 0;
}
.marche-nous {
padding: var(--espace-l) var(--espace-l) var(--espace-xs);
}
.marche-feuille {
max-block-size: 30rem;
overflow: hidden;
margin-block-start: 0;
mask-image: linear-gradient(to bottom, var(--couleur-encre) calc(100% - 6rem), transparent);
}
}
}
@layer pages {
.page-contact .tete-texte {
grid-row: 1 / span 2;
align-self: end;
}
.page-contact .tete-texte h1 {
max-inline-size: 12ch;
}
.page-contact .contact-appel {
grid-row: 1;
justify-self: stretch;
gap: var(--espace-l);
}
.contact-bouton {
min-inline-size: 12rem;
}
.contact-sms {
grid-column: 9 / span 4;
grid-row: 2;
display: grid;
justify-items: start;
gap: var(--espace-2xs);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
.contact-chemins {
row-gap: var(--espace-xl);
}
.contact-fourche {
grid-column: 1 / -1;
justify-self: center;
display: grid;
gap: var(--espace-l);
inline-size: min(100%, 420px);
margin: 0 0 var(--espace-xl);
}
.contact-fourche img {
inline-size: 100%;
block-size: auto;
}
.contact-chemin {
--contact-retrait: var(--espace-2xl);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--espace-l);
padding: var(--contact-retrait);
border-radius: var(--rayon-cadre);
}
.contact-chemin h2 {
max-inline-size: 14ch;
}
.contact-chemin-texte {
display: grid;
gap: var(--espace-m);
}
.contact-chemin-texte p {
max-inline-size: 46ch;
}
.contact-chemin-texte p:first-child {
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.contact-chemin-texte p + p {
color: var(--couleur-encre-douce);
}
.contact-chemin--urgence {
grid-column: 1 / span 7;
}
.contact-chemin-prix {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: var(--espace-l);
row-gap: var(--espace-2xs);
margin-block-start: auto;
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
align-self: stretch;
}
.contact-chemin-montant {
flex: none;
color: var(--couleur-accent);
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
white-space: nowrap;
}
.contact-reste .s-liens-tete {
justify-items: stretch;
}
.contact-facture .facsimile {
max-inline-size: 30rem;
}
.contact-facture :is(.facsimile-parties, .facsimile-colonnes, .facsimile-lignes, .facsimile-clauses, .facsimile-accord) {
display: none;
}
.contact-facture .facsimile-totaux {
inline-size: 100%;
margin-block-start: 1.6em;
padding-block-start: 1.2em;
border-block-start: var(--trait) dashed var(--couleur-filet);
}
.contact-reste .s-liens-liste {
align-self: start;
}
.contact-reste .s-suite-intitule {
overflow-wrap: anywhere;
}
.contact-chemin-detail {
flex: 1 1 22ch;
max-inline-size: 44ch;
color: var(--couleur-encre-douce);
}
.contact-chemin .bouton {
max-inline-size: 100%;
white-space: normal;
text-wrap: balance;
}
.contact-chemin--rdv {
grid-column: 8 / span 5;
background: var(--couleur-surface);
}
.contact-chemin-objet {
position: relative;
align-self: stretch;
overflow: hidden;
aspect-ratio: 12 / 5;
margin: calc(var(--contact-retrait) * -1) calc(var(--contact-retrait) * -1) 0;
border-start-start-radius: var(--rayon-cadre);
border-start-end-radius: var(--rayon-cadre);
}
.contact-chemin-objet img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: 40% 32%;
}
.contact-chemin--rdv .bouton {
margin-block-start: auto;
}
@media (max-width: 50.5em) {
.page-contact .tete-texte,
.page-contact .contact-appel,
.contact-sms {
grid-column: 1;
grid-row: auto;
}
.page-contact .contact-appel {
justify-items: stretch;
}
.contact-fourche,
.contact-chemin--urgence,
.contact-chemin--rdv {
grid-column: 1 / -1;
grid-row: auto;
}
.contact-fourche {
justify-self: start;
margin-block-end: var(--espace-l);
}
.contact-chemin {
--contact-retrait: var(--espace-l);
padding-block: var(--espace-xl) var(--espace-l);
}
.contact-chemin-objet {
aspect-ratio: 16 / 9;
margin-block-start: calc(var(--espace-xl) * -1);
}
.contact-chemin .bouton {
align-self: stretch;
}
}
}
@layer pages {
@media (max-width: 25em) {
.page-contact .contact-chemin .bouton {
padding-block: var(--espace-xs);
line-height: 1.25;
text-align: start;
text-wrap: wrap;
}
.page-contact .contact-chemin .bouton .numero {
white-space: nowrap;
}
}
}
@layer pages {
.demande-carte {
display: grid;
grid-template-columns: minmax(0, 1fr);
min-inline-size: 0;
gap: var(--espace-s);
padding: var(--espace-xl);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.demande-urgence {
font-family: var(--police-titre);
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
line-height: var(--interligne-chapeau);
text-wrap: balance;
}
.demande-appel {
justify-self: stretch;
max-inline-size: 100%;
white-space: normal;
text-align: center;
}
.demande-ou {
margin-block-start: var(--espace-s);
padding-block-start: var(--espace-m);
border-block-start: var(--trait) solid color-mix(in oklch, var(--couleur-encre) 22%, transparent);
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
}
.demande-champs {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--espace-s);
}
.demande-champs .champs {
grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
gap: var(--espace-s);
}
.demande-champs .champ :is(input, select) {
min-block-size: 3rem;
}
.demande-champs .champ textarea {
min-block-size: 5.5rem;
}
.demande-facultatif {
color: var(--couleur-encre-douce);
font-weight: var(--graisse-texte);
}
.demande-envoi {
justify-self: stretch;
}
.demande-carte .avis-envoi {
margin-block-start: var(--espace-s);
}
:where(.page-accueil) .communes > .demande-carte {
grid-column: 7 / span 6;
align-self: start;
}
@media (max-width: 50.5em) {
:where(.page-accueil) .communes > .demande-carte {
grid-column: 1 / -1;
margin-block-start: var(--espace-2xl);
}
.demande-carte {
padding: var(--espace-m);
}
}
.demande-section {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin-block-start: var(--espace-section);
padding-inline: var(--bord);
}
.demande-section > .demande-carte {
inline-size: min(100%, 44rem);
justify-self: center;
}
}
@layer pages {
.page-devis :is(.devis-tete, .devis-corps) {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
padding-inline: var(--bord);
}
.page-devis .devis-tete {
align-items: end;
padding-block-start: var(--espace-3xl);
}
.page-devis .devis-tete h1 {
grid-column: 1 / span 7;
max-inline-size: 10em;
text-wrap: balance;
}
.page-devis .devis-intro {
grid-column: 9 / span 4;
display: grid;
gap: var(--espace-m);
color: var(--couleur-encre-douce);
}
.page-devis .devis-gratuit {
color: var(--couleur-encre);
font-weight: var(--graisse-menu);
}
.page-devis .devis-alerte {
display: flex;
align-items: baseline;
gap: var(--espace-s);
margin: var(--espace-2xl) var(--marge) 0;
padding: var(--espace-l) var(--gouttiere);
border-radius: var(--rayon-cadre);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-devis .devis-alerte .lien {
display: inline;
color: var(--couleur-encre);
overflow-wrap: anywhere;
}
.page-devis .devis-corps {
margin-block-start: var(--espace-4xl);
}
.page-devis .devis-colonne {
grid-column: 1 / span 4;
align-self: start;
display: grid;
gap: var(--espace-2xl);
max-inline-size: 22.5rem;
}
@media (min-height: 64em) {
.page-devis .devis-colonne {
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
}
}
.page-devis .devis-plan {
counter-reset: plan;
border-block-end: var(--trait) solid var(--couleur-filet);
}
.page-devis .devis-schema {
display: grid;
gap: var(--espace-m);
margin: 0;
}
.page-devis .devis-schema img {
inline-size: 100%;
max-inline-size: 400px;
block-size: auto;
}
.page-devis .devis-plan li {
counter-increment: plan;
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-devis .devis-plan a {
display: grid;
grid-template-columns: var(--espace-xl) minmax(0, 1fr);
align-items: center;
min-block-size: calc(var(--bouton-hauteur) * 1.25);
color: var(--couleur-encre-douce);
font-weight: var(--graisse-menu);
text-decoration: none;
transition: color var(--duree-courte) var(--courbe-sortie);
}
.page-devis .devis-plan a::before {
content: counter(plan);
font-variant-numeric: tabular-nums;
}
.page-devis .devis-plan a:hover {
color: var(--couleur-encre);
}
.page-devis .devis-formulaire {
grid-column: 5 / span 8;
align-self: start;
display: grid;
gap: var(--espace-l);
}
.page-devis .devis-champs {
gap: 0;
}
.page-devis fieldset {
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.page-devis .devis-etape {
display: grid;
gap: var(--espace-xl);
padding-block: var(--espace-l) var(--espace-3xl);
border-block-start: var(--trait) solid var(--couleur-encre);
scroll-margin-block-start: calc(var(--hauteur-entete) + var(--espace-l));
}
.page-devis .devis-etape > legend {
float: inline-start;
inline-size: 100%;
display: grid;
gap: var(--espace-xs);
padding: 0;
}
.page-devis .devis-rang {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
font-variant-numeric: tabular-nums;
}
.page-devis .devis-etape-titre {
font-size: var(--taille-3);
font-weight: var(--graisse-titre);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
.page-devis .devis-choix {
display: grid;
align-content: start;
gap: var(--espace-s);
}
.page-devis .devis-choix > legend,
.page-devis .champ label,
.page-devis .devis-photos-libelle {
float: inline-start;
inline-size: 100%;
margin-block-end: var(--espace-s);
padding: 0;
font-size: var(--taille-0);
font-weight: var(--graisse-forte);
}
.page-devis .champ label,
.page-devis .devis-photos-libelle {
float: none;
margin-block-end: 0;
}
.page-devis .devis-facultatif {
margin-inline-start: var(--espace-2xs);
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
font-weight: var(--graisse-texte);
}
.page-devis .aide {
max-inline-size: 60ch;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
.page-devis .devis-paire {
display: grid;
align-items: start;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--espace-xl) var(--ecart-colonnes);
}
.page-devis .devis-tuiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
gap: var(--espace-xs);
}
.page-devis .devis-tuiles--serrees {
grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr));
}
.page-devis .devis-tuile {
display: flex;
align-items: center;
gap: var(--espace-s);
min-block-size: var(--bouton-hauteur-fort);
padding: var(--espace-s) var(--espace-m);
border: var(--trait) solid var(--couleur-filet);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
line-height: 1.3;
cursor: pointer;
transition: border-color var(--duree-courte) var(--courbe-sortie), background-color var(--duree-courte) var(--courbe-sortie);
}
.page-devis .devis-tuile input {
flex: none;
inline-size: 1.125rem;
block-size: 1.125rem;
margin: 0;
accent-color: var(--couleur-encre);
}
.page-devis .devis-tuile:hover {
border-color: var(--couleur-encre-douce);
}
.page-devis .devis-tuile:has(input:checked) {
border-color: var(--couleur-encre);
background: var(--couleur-surface);
}
@media (max-width: 25em) {
.page-devis .devis-tuiles--serrees .devis-tuile {
padding-inline: var(--espace-s);
}
}
.page-devis .devis-tuile:has(input:focus-visible) {
outline: 2px solid var(--couleur-encre);
outline-offset: 2px;
}
.page-devis .devis-tuile input:focus-visible {
outline: 0;
}
.page-devis .devis-tuile .champ-erreur {
display: none;
}
.page-devis .champ {
gap: var(--espace-xs);
}
.page-devis .champ :is(input, textarea) {
min-block-size: var(--bouton-hauteur-fort);
padding: var(--espace-s) var(--espace-m);
border: var(--trait) solid var(--couleur-filet);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
font-size: var(--taille-0);
}
.page-devis .champ :is(input, textarea):hover {
border-color: var(--couleur-encre-douce);
}
.page-devis .champ [aria-invalid="true"] {
border-color: var(--couleur-erreur);
}
.page-devis .champs {
gap: var(--espace-xl) var(--ecart-colonnes);
}
.page-devis .devis-locataire {
margin-block-start: var(--espace-xs);
padding: var(--espace-m);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.page-devis .devis-photos:empty {
display: none;
}
.page-devis .devis-photos {
display: grid;
justify-items: start;
gap: var(--espace-xs);
padding: var(--espace-l);
border: var(--trait) dashed var(--couleur-filet);
border-radius: var(--rayon-m);
}
.page-devis .devis-photos-bouton {
margin-block-start: var(--espace-xs);
}
.page-devis .devis-photos:focus-within .devis-photos-bouton {
outline: 2px solid var(--couleur-encre);
outline-offset: 2px;
}
.page-devis [hidden] {
display: none;
}
.page-devis .devis-nav {
display: flex;
flex-wrap: wrap;
gap: var(--espace-m);
padding-block-start: var(--espace-m);
}
.page-devis .devis-nav .devis-revenir {
--bouton-fond: var(--couleur-surface);
--bouton-encre: var(--couleur-encre);
}
.page-devis .devis-nav .devis-continuer {
margin-inline-start: auto;
}
.page-devis .devis-etape > legend:focus {
outline: none;
}
.page-devis .devis-photos-liste {
display: grid;
gap: var(--espace-2xs);
inline-size: 100%;
}
.page-devis .devis-photos-liste li {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--espace-m);
font-size: var(--taille--1);
}
.page-devis .devis-photos-retirer {
flex: none;
min-block-size: 2.75rem;
white-space: nowrap;
padding-inline: var(--espace-s);
border: 0;
background: none;
color: var(--couleur-encre);
font: inherit;
text-decoration: underline;
cursor: pointer;
}
.page-devis .devis-envoi {
display: grid;
justify-items: start;
gap: var(--espace-l);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-devis .devis-envoi .mention .lien {
display: inline;
min-block-size: 0;
overflow-wrap: anywhere;
}
.page-devis .avis-envoi {
border-radius: var(--rayon-m);
}
.page-devis .devis-envoi[hidden],
.page-devis .devis-etape[hidden] {
display: none;
}
.page-devis .devis-exemple {
display: grid;
gap: var(--espace-m);
margin: 0;
}
.page-devis .devis-exemple-photos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 14rem));
gap: var(--espace-s);
}
.page-devis .devis-exemple-photo {
display: grid;
gap: var(--espace-xs);
align-content: start;
}
.page-devis .devis-exemple-photo img {
inline-size: 100%;
aspect-ratio: 4 / 5;
block-size: auto;
object-fit: cover;
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.page-devis .devis-exemple-photo--chant img {
object-position: 50% 38%;
}
.page-devis .devis-exemple-nom {
font-size: var(--taille-0);
font-weight: var(--graisse-titre);
line-height: 1.3;
}
.page-devis .devis-exemple-precision {
display: block;
font-weight: var(--graisse-texte);
color: var(--couleur-encre-douce);
}
.page-devis .devis-exemple-legende {
max-inline-size: 44ch;
color: var(--couleur-encre-douce);
}
.page-devis .devis-suite {
display: grid;
gap: var(--espace-xl);
padding: var(--espace-2xl) var(--espace-xl);
border-radius: var(--rayon-cadre);
background: var(--couleur-nuit);
color: var(--couleur-encre);
}
.page-devis .devis-suite-titre {
font-size: var(--taille-3);
line-height: 1.12;
letter-spacing: var(--approche-titre);
}
.page-devis .devis-suite-liste {
display: grid;
counter-reset: suite;
}
.page-devis .devis-suite-liste li {
counter-increment: suite;
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
align-items: baseline;
gap: var(--espace-s);
padding-block: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
line-height: var(--interligne-texte);
}
.page-devis .devis-suite-liste li::before {
content: counter(suite);
font-family: var(--police-chiffres);
font-weight: var(--graisse-chiffres);
font-size: var(--taille-prix);
line-height: 1;
color: var(--couleur-accent);
font-variant-numeric: lining-nums;
}
@media (max-width: 50.5em) {
.page-devis :is(.devis-tete, .devis-corps) > *,
.page-devis .devis-tete h1 {
grid-column: 1 / -1;
}
.page-devis .devis-tete {
padding-block-start: var(--espace-xl);
}
.page-devis .devis-tete h1 {
text-wrap: pretty;
}
.page-devis .devis-intro {
margin-block-start: var(--espace-l);
}
.page-devis .devis-alerte {
margin-block-start: var(--espace-xl);
padding: var(--espace-m) var(--espace-l);
font-size: var(--taille-0);
}
.page-devis .devis-corps {
margin-block-start: var(--espace-2xl);
}
.page-devis .devis-plan {
display: none;
}
.page-devis .devis-colonne {
order: 1;
max-inline-size: 30rem;
margin-block-start: var(--espace-2xl);
}
.page-devis .devis-etape {
padding-block-end: var(--espace-2xl);
}
.page-devis .devis-paire {
grid-template-columns: minmax(0, 1fr);
}
.page-devis .devis-envoi .bouton {
justify-self: stretch;
}
.page-devis .devis-exemple-photos {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--espace-xs);
}
.page-devis .devis-suite {
padding: var(--espace-xl) var(--espace-l);
}
}
}
@layer pages {
.lien-langue {
display: inline-flex;
align-items: center;
min-block-size: 44px;
padding-inline: var(--espace-2xs);
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
text-underline-offset: .25em;
white-space: nowrap;
}
.lien-langue:hover {
color: var(--couleur-encre);
}
.page-ville .zf-ariane:has(.lien-langue) {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--espace-2xs) var(--espace-m);
}
.page-en .zf-ariane a {
min-inline-size: 44px;
}
.page-en .demande-section {
row-gap: var(--espace-s);
justify-items: center;
}
.page-en .demande-titre-en {
inline-size: min(100%, 44rem);
font-size: var(--taille-3);
line-height: var(--interligne-affichage);
letter-spacing: var(--approche-affichage);
text-wrap: balance;
}
.page-en .demande-texte-en {
inline-size: min(100%, 44rem);
margin-block-end: var(--espace-s);
color: var(--couleur-encre-douce);
text-wrap: pretty;
}
.page-en .s-deroule-tete .lien {
justify-self: start;
}
}
@layer pages {
:where(.page-guide, .page-guides) .ariane ol {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--espace-xs);
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: 1.4;
}
:where(.page-guide, .page-guides) .ariane li {
display: inline-flex;
align-items: center;
gap: var(--espace-xs);
}
:where(.page-guide, .page-guides) .ariane li + li::before {
content: "";
flex: none;
inline-size: 0.75em;
block-size: 0.75em;
background: currentColor;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='m4.5 3 3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}
:where(.page-guide, .page-guides) .ariane a {
color: inherit;
text-decoration-line: underline;
text-decoration-color: transparent;
text-decoration-thickness: var(--trait);
text-underline-offset: 0.25em;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
:where(.page-guide, .page-guides) .ariane a:hover {
color: var(--couleur-encre);
text-decoration-color: currentColor;
}
:where(.page-guide, .page-guides) .ariane [aria-current="page"] {
color: var(--couleur-encre);
}
@media (max-width: 50.5em) {
.page-guide .ariane li:last-child {
display: none;
}
}
.page-guide .guide {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
padding: var(--espace-xl) var(--bord) 0;
}
.page-guide .guide-tete {
grid-column: 1 / -1;
display: grid;
gap: var(--espace-xl-3xl);
padding-block-end: var(--espace-xl-3xl);
}
.page-guide .guide-tete h1 {
max-inline-size: 16em;
text-wrap: balance;
hyphens: none;
}
.page-guide .guide-marge {
grid-column: 1 / span 3;
align-self: start;
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
display: grid;
gap: var(--espace-xl);
padding-block-start: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-encre);
}
.page-guide .guide-date {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: 1.45;
}
.page-guide .guide-plan ol {
display: grid;
gap: var(--espace-2xs);
max-inline-size: 24em;
font-size: var(--taille--1);
line-height: 1.4;
}
.page-guide .guide-plan a {
display: block;
padding-block: var(--espace-2xs);
color: var(--couleur-encre-douce);
text-decoration-line: underline;
text-decoration-color: transparent;
text-decoration-thickness: var(--trait);
text-underline-offset: 0.25em;
transition: color var(--duree-courte) var(--courbe-sortie), text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
.page-guide .guide-plan a:hover {
color: var(--couleur-encre);
text-decoration-color: currentColor;
}
.page-guide .guide-corps {
grid-column: 4 / -1;
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
align-content: start;
font-size: var(--taille-1);
line-height: 1.6;
}
.page-guide .guide-corps > * {
grid-column: 1 / span 6;
max-inline-size: calc(31.6em + 2 * var(--espace-xl));
}
.page-guide .guide-corps > .guide-questions {
max-inline-size: calc(40em + 2 * var(--espace-xl));
}
.page-guide .guide-corps > .guide-duo {
max-inline-size: 60rem;
}
.page-guide .guide-corps :is(p, li) {
max-inline-size: 30em;
text-wrap: pretty;
}
.page-guide .guide-corps :is(h2, h3) {
text-wrap: balance;
hyphens: none;
}
.page-guide .guide-reponse {
display: grid;
gap: var(--espace-s);
padding: var(--espace-xl);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
line-height: 1.55;
}
.page-guide .guide-section {
display: grid;
align-content: start;
gap: var(--espace-m);
margin-block-start: var(--espace-4xl);
scroll-margin-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
}
.page-guide .guide-section h2 {
margin-block-end: var(--espace-s);
}
.page-guide .guide-liste {
display: grid;
margin-block-start: var(--espace-xs);
border-block-end: var(--trait) solid var(--couleur-filet);
}
.page-guide .guide-corps .guide-liste li {
max-inline-size: none;
}
.page-guide .guide-liste li {
position: relative;
padding: var(--espace-m) max(0px, 100% - 31.6em) var(--espace-m) 1.6em;
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-guide .guide-liste li::before {
content: "";
position: absolute;
inset-inline-start: 0.3em;
inset-block-start: calc(var(--espace-m) + 0.62em);
inline-size: 0.38em;
block-size: 0.38em;
border-radius: 50%;
background: var(--couleur-encre);
}
.page-guide .guide-liste--eviter li::before {
inset-inline-start: 0.12em;
inset-block-start: calc(var(--espace-m) + 0.45em);
inline-size: 0.72em;
block-size: 0.72em;
border-radius: 0;
background:
linear-gradient(var(--couleur-erreur) 0 0) center / 100% 0.12em no-repeat,
linear-gradient(var(--couleur-erreur) 0 0) center / 0.12em 100% no-repeat;
rotate: 45deg;
}
.page-guide .guide-liste--suite {
counter-reset: etape;
}
.page-guide .guide-liste--suite li {
counter-increment: etape;
}
.page-guide .guide-liste--suite li::before {
content: counter(etape);
inset-inline-start: 0;
inset-block-start: var(--espace-m);
inline-size: auto;
block-size: auto;
border-radius: 0;
background: none;
color: var(--couleur-accent-fonce);
font-variant-numeric: tabular-nums;
}
.page-guide .guide-section-lien {
justify-self: start;
margin-block-start: var(--espace-xs);
}
.page-guide .guide-note {
margin-block-start: var(--espace-l);
color: var(--couleur-encre-douce);
}
.page-guide .guide-note--suite {
margin-block-start: 0;
}
.page-guide .guide-danger {
position: relative;
margin-block: var(--espace-xs) var(--espace-s);
padding: var(--espace-xl) var(--espace-xl) var(--espace-xl) calc(var(--espace-xl) + 1.1em);
border-radius: var(--rayon-m);
font-weight: var(--graisse-menu);
line-height: 1.5;
}
.page-guide .guide-danger::before {
content: "";
position: absolute;
inset-inline-start: var(--espace-xl);
inset-block-start: calc(var(--espace-xl) + 0.55em);
inline-size: 0.5em;
block-size: 0.5em;
border-radius: 50%;
background: var(--couleur-accent);
}
.page-guide .guide-schema {
display: grid;
gap: var(--espace-m);
margin-block-start: var(--espace-3xl);
}
.page-guide .guide-schema-cadre {
display: grid;
place-items: center;
padding: var(--espace-l-2xl);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.page-guide .guide-schema-cadre img {
inline-size: 100%;
max-inline-size: var(--schema-largeur, 100%);
block-size: auto;
}
.page-guide :is(.guide-schema--claquee, .guide-schema--cle) {
--schema-largeur: 36rem;
}
.page-guide .guide-schema--devis {
--schema-largeur: 30.5rem;
}
.page-guide .guide-schema--cylindre {
--schema-largeur: 36rem;
}
.page-guide .guide-schema--frise {
--schema-largeur: 32rem;
}
.page-guide .guide-schema--trois-points {
--schema-largeur: 24rem;
}
.page-guide .guide-duo {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ecart-colonnes);
align-items: start;
margin-block-start: var(--espace-3xl);
}
.page-guide .guide-duo .guide-schema {
margin: 0;
}
.page-guide .guide-duo .guide-schema-cadre {
aspect-ratio: 4 / 5;
}
.page-guide .guide-duo .guide-schema-cadre img {
block-size: 100%;
inline-size: auto;
}
.page-guide .guide-photo {
display: grid;
gap: var(--espace-m);
}
.page-guide .guide-photo img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--rayon-m);
}
.page-guide .guide-photo figcaption {
max-inline-size: 60ch;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: 1.45;
}
.page-guide .guide-tableau {
overflow-x: auto;
margin-block: var(--espace-xs) var(--espace-s);
}
.page-guide .guide-tableau table {
inline-size: 100%;
border-collapse: collapse;
font-size: var(--taille-0);
line-height: 1.4;
font-variant-numeric: tabular-nums;
}
.page-guide .guide-tableau :is(th, td) {
padding: var(--espace-s) var(--espace-m) var(--espace-s) 0;
border-block-end: var(--trait) solid var(--couleur-filet);
text-align: start;
vertical-align: top;
}
.page-guide .guide-tableau thead th {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
font-weight: var(--graisse-texte);
border-block-end-color: var(--couleur-encre);
}
.page-guide .guide-tableau tbody th {
font-weight: var(--graisse-titre);
}
.page-guide .guide-tableau:focus-visible {
outline: 2px solid var(--couleur-encre);
outline-offset: 4px;
}
.page-guide .guide-tableau tbody th {
white-space: nowrap;
}
.page-guide .guide-tableau-temps {
white-space: nowrap;
}
:where(.page-guide, .page-guides) .guide-fin-appel {
color: var(--couleur-encre-douce);
}
.page-guide .guide-schema figcaption {
max-inline-size: 60ch;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: 1.45;
}
.page-guide .guide-maison {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--espace-l);
row-gap: var(--espace-m);
align-items: start;
margin-block-start: var(--espace-3xl);
padding-block: var(--espace-xl);
border-block: var(--trait) solid var(--couleur-filet);
}
.page-guide .guide-maison .marque-symbole {
grid-row: 1 / span 2;
inline-size: 1.25rem;
block-size: 1.875rem;
margin-block-start: 0.2em;
color: var(--couleur-accent-fonce);
}
.page-guide .guide-maison-texte {
display: grid;
gap: var(--espace-s);
color: var(--couleur-encre-douce);
}
.page-guide .guide-maison .lien {
justify-self: start;
}
.page-guide .guide-questions {
grid-column: 1 / span 7;
}
.page-guide .guide-questions .questions-liste {
grid-column: 1 / -1;
margin: 0;
}
.page-guide .guide-questions .question-reponse p {
max-inline-size: 30em;
}
.page-guide .guide-sources {
gap: var(--espace-s);
margin-block-start: var(--espace-4xl);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-encre);
}
.page-guide .guide-sources h2 {
margin: 0;
font-size: var(--taille-0);
line-height: 1.3;
letter-spacing: 0;
}
.page-guide .guide-sources ol {
display: grid;
counter-reset: source;
font-size: var(--taille--1);
line-height: 1.45;
}
.page-guide .guide-sources li {
counter-increment: source;
display: flex;
gap: var(--espace-s);
max-inline-size: none;
}
.page-guide .guide-sources li::before {
content: counter(source);
flex: none;
min-inline-size: 1.4em;
padding-block: var(--espace-xs);
color: var(--couleur-encre-douce);
font-variant-numeric: tabular-nums;
}
.page-guide .guide-sources a {
padding-block: var(--espace-xs);
color: var(--couleur-encre-douce);
text-decoration-thickness: var(--trait);
text-decoration-color: var(--couleur-filet);
text-underline-offset: 0.2em;
overflow-wrap: anywhere;
transition: color var(--duree-courte) var(--courbe-sortie), text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
.page-guide .guide-sources a:hover {
color: var(--couleur-encre);
text-decoration-color: currentColor;
}
:where(.page-guide, .page-guides) .guide-suite {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
margin-block-start: var(--espace-section);
padding-inline: var(--bord);
}
:where(.page-guide, .page-guides) .guide-suite h2 {
grid-column: 1 / span 3;
align-self: start;
font-size: var(--taille-1);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
}
:where(.page-guide, .page-guides) .guide-suite ul {
grid-column: 4 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
}
:where(.page-guide, .page-guides) .guide-suite a {
display: flex;
align-items: center;
min-block-size: calc(var(--bouton-hauteur) * 1.6);
padding-block: var(--espace-s);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
text-decoration-line: underline;
text-decoration-color: transparent;
text-underline-offset: 0.25em;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
:where(.page-guide, .page-guides) .guide-suite a:hover {
text-decoration-color: currentColor;
}
:where(.page-guide, .page-guides) .guide-fin {
margin: var(--espace-section) var(--marge) 0;
border-radius: var(--rayon-cadre);
background: var(--couleur-surface);
}
:where(.page-guide, .page-guides) .guide-fin-dedans {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
row-gap: var(--espace-2xl);
align-items: end;
padding: var(--espace-4xl) var(--gouttiere);
}
:where(.page-guide, .page-guides) .guide-fin h2 {
grid-column: 1 / span 7;
max-inline-size: 11ch;
text-wrap: balance;
font-size: var(--taille-5);
line-height: var(--interligne-affichage);
letter-spacing: var(--approche-affichage);
}
:where(.page-guide, .page-guides) .guide-fin-action {
grid-column: 9 / span 4;
display: grid;
justify-items: start;
gap: var(--espace-l);
}
:where(.page-guide, .page-guides) .guide-fin-action p {
color: var(--couleur-encre-douce);
text-wrap: pretty;
}
:where(.page-guide, .page-guides) .guide-fin-action {
grid-template-columns: minmax(0, 1fr);
}
:where(.page-guide, .page-guides) .guide-fin .bouton {
max-inline-size: 100%;
white-space: normal;
text-wrap: balance;
}
:where(.page-guide, .page-guides) .numero {
white-space: nowrap;
}
.page-zones .zones-chapeau {
max-inline-size: 40ch;
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
text-wrap: pretty;
}
.page-zones .zones-marge {
grid-template-columns: minmax(0, 1fr);
gap: var(--espace-l);
justify-items: start;
}
.page-zones .zones-marge .bouton {
max-inline-size: 100%;
white-space: normal;
}
.page-zones .zones-test {
justify-self: stretch;
}
.page-zones .zones-test:has(input) {
display: grid;
gap: var(--espace-xs);
padding: var(--espace-l);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.page-zones .zones-test label {
font-weight: var(--graisse-titre);
}
.page-zones .zones-test .communes-aide {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
.page-zones .zones-test input {
min-block-size: var(--bouton-hauteur-fort);
margin-block-start: var(--espace-xs);
padding-inline: var(--espace-m);
border: var(--trait) solid var(--couleur-bord-champ);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
font-size: var(--taille-0);
}
.page-zones .zones-test input:hover {
border-color: var(--couleur-encre-douce);
}
.page-zones .zones-test .communes-reponse:empty {
display: none;
}
.page-zones .zones-test .communes-reponse {
margin-block-start: var(--espace-xs);
font-weight: var(--graisse-menu);
}
.page-zones .zones-test .communes-reponse[data-etat="non"] {
color: var(--couleur-erreur);
}
.page-zones .zones-dijon {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--espace-xs) var(--espace-l);
margin-block-start: var(--espace-l);
padding-block: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-encre);
}
.page-zones .zones-dijon-nom {
font-weight: var(--graisse-titre);
font-size: var(--taille-3);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
.page-zones .zones-groupe {
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-zones .zones-groupe:last-child {
border-block-end: var(--trait) solid var(--couleur-filet);
}
.page-zones .zones-groupe-titre {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
column-gap: var(--espace-l);
min-block-size: var(--bouton-hauteur);
padding-block: var(--espace-m);
list-style: none;
cursor: pointer;
}
.page-zones .zones-groupe-titre::-webkit-details-marker {
display: none;
}
.page-zones .zones-groupe-nom {
font-weight: var(--graisse-titre);
font-size: var(--taille-1);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
}
.page-zones :is(.zones-replie, .zones-deplie) {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
}
.page-zones .zones-groupe[open] .zones-replie,
.page-zones .zones-groupe:not([open]) .zones-deplie {
display: none;
}
.page-zones .zones-groupe[open] .question-signe {
rotate: 45deg;
}
.page-zones .zones-communes {
columns: 2;
column-gap: var(--ecart-colonnes);
padding-block-end: var(--espace-l);
font-size: var(--taille-0);
line-height: 1.5;
}
.page-zones .zones-communes li {
break-inside: avoid;
padding-block: var(--espace-2xs);
}
.page-guides .guides-plan {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
padding: var(--espace-xl) var(--bord) 0;
}
.page-guides .guides-tete {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
row-gap: var(--espace-xl-3xl);
}
.page-guides .guides-tete .ariane {
grid-column: 1 / -1;
}
.page-guides .guides-tete h1 {
grid-column: 1 / span 11;
max-inline-size: 15em;
text-wrap: balance;
}
.page-guides .guides-chapeau {
display: grid;
gap: var(--espace-s);
grid-column: 1 / span 6;
max-inline-size: 40ch;
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
text-wrap: pretty;
}
.page-guides .guides-vedette {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
row-gap: var(--espace-xl);
margin-block-start: var(--espace-section);
margin-inline: calc(var(--gouttiere) * -1);
padding: var(--espace-3xl) var(--gouttiere);
border-radius: var(--rayon-cadre);
}
.page-guides .guides-vedette h2 {
grid-column: 1 / span 4;
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
}
.page-guides .guides-vedette .guides-entree {
grid-column: 5 / -1;
border: 0;
padding: 0;
}
.page-guides .guides-vedette h3 {
max-inline-size: 13em;
font-size: var(--taille-3);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
.page-guides .guides-groupe {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
margin-block-start: var(--espace-3xl);
}
.page-guides .guides-groupe h2 {
grid-column: 1 / span 4;
align-self: start;
max-inline-size: 12em;
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-encre);
font-size: var(--taille-1);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
}
.page-guides .guides-groupe ul {
grid-column: 5 / -1;
display: grid;
border-block-end: var(--trait) solid var(--couleur-filet);
}
.page-guides .guides-entree {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--ecart-colonnes);
row-gap: var(--espace-s);
padding-block: var(--espace-l) var(--espace-xl);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-guides .guides-groupe .guides-entree:first-child {
border-block-start-color: var(--couleur-encre);
}
.page-guides .guides-entree h3 {
grid-column: 1;
max-inline-size: 30em;
text-wrap: balance;
}
.page-guides .guides-entree h3 a {
display: inline-block;
padding-block: calc((var(--bouton-hauteur) - 1.25em) / 2);
margin-block: calc((var(--bouton-hauteur) - 1.25em) / -2);
text-decoration-line: underline;
text-decoration-color: transparent;
text-decoration-thickness: var(--trait);
text-underline-offset: 0.2em;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
.page-guides .guides-entree h3 a::after {
content: "";
position: absolute;
inset: 0;
}
.page-guides .guides-entree:hover h3 a {
text-decoration-color: currentColor;
}
.page-guides .guides-entree h3 a:focus-visible {
outline: none;
}
.page-guides .guides-entree:has(h3 a:focus-visible) {
outline: 2px solid var(--couleur-encre);
outline-offset: 4px;
border-radius: calc(var(--rayon-m) / 2);
}
.page-guides .guides-entree p {
grid-column: 1;
max-inline-size: 52ch;
color: var(--couleur-encre-douce);
text-wrap: pretty;
}
.page-guides .guides-entree .guides-date {
grid-column: 2;
grid-row: 1;
align-self: baseline;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
white-space: nowrap;
}
@media (max-width: 63.99em) {
.page-guide .guide-marge {
grid-column: 1 / -1;
position: static;
border: 0;
padding: 0;
margin-block-end: var(--espace-l);
}
.page-guide .guide-plan {
display: none;
}
.page-guide .guide-corps {
grid-column: 1 / span 10;
}
.page-guide .guide-corps > *,
.page-guide .guide-questions {
grid-column: 1 / span 8;
}
}
@media (max-width: 50.5em) {
.page-guide .guide,
.page-guides .guides-plan {
grid-template-columns: minmax(0, 1fr);
padding-block-start: var(--espace-m);
}
.page-guide :is(.guide-tete, .guide-marge, .guide-corps),
.page-guide .guide-corps > *,
.page-guide .guide-corps > .guide-schema,
.page-guide .guide-questions,
.page-guides .guides-tete > *,
.page-guides :is(.guides-tete, .guides-groupe, .guides-vedette),
.page-guides :is(.guides-groupe, .guides-vedette) > *,
:where(.page-guide, .page-guides) :is(.guide-suite, .guide-fin-dedans) > *,
:where(.page-guide, .page-guides) :is(.guide-fin h2, .guide-suite h2, .guide-suite ul, .guide-fin-action) {
grid-column: 1 / -1;
grid-row: auto;
}
.page-guide .guide-tete {
gap: var(--espace-l);
padding-block-end: var(--espace-xl);
}
.page-guide .guide-tete h1 {
font-size: var(--taille-3);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
:where(.page-guide, .page-guides) .ariane a {
display: inline-flex;
align-items: center;
min-block-size: var(--bouton-hauteur);
}
:where(.page-guide, .page-guides) .ariane [aria-current="page"] {
padding-block: var(--espace-s);
}
.page-guide .guide-corps {
grid-template-columns: minmax(0, 1fr);
line-height: 1.55;
}
.page-guide .guide-reponse {
margin-inline: calc(var(--gouttiere) * -1 + var(--espace-2xs));
padding: var(--espace-l) calc(var(--gouttiere) - var(--espace-2xs));
border-radius: var(--rayon-cadre);
}
.page-guide .guide-liste li {
padding-inline-start: 1.15em;
}
.page-guide .guide-liste li::before {
inset-inline-start: 0.1em;
}
.page-guide .guide-liste--eviter li::before {
inset-inline-start: 0;
inline-size: 0.62em;
block-size: 0.62em;
}
.page-guide .guide-section {
margin-block-start: var(--espace-3xl);
}
.page-guide .guide-section h2 {
margin-block-end: var(--espace-2xs);
}
.page-guide .guide-danger {
margin-inline: calc(var(--gouttiere) * -1 + var(--espace-2xs));
padding: var(--espace-l) calc(var(--gouttiere) - var(--espace-2xs)) var(--espace-l) calc(var(--gouttiere) - var(--espace-2xs) + 1.1em);
border-radius: var(--rayon-cadre);
}
.page-guide .guide-danger::before {
inset-inline-start: calc(var(--gouttiere) - var(--espace-2xs));
inset-block-start: calc(var(--espace-l) + 0.55em);
}
.page-guide .guide-schema {
margin-inline: calc(var(--gouttiere) * -1);
margin-block-start: var(--espace-2xl);
}
.page-guide .guide-schema-cadre {
padding: var(--espace-m);
border-radius: var(--rayon-cadre);
}
.page-guide .guide-schema figcaption {
margin-inline: var(--gouttiere);
}
.page-guide .guide-duo {
grid-template-columns: minmax(0, 1fr);
margin-block-start: var(--espace-2xl);
row-gap: var(--espace-2xl);
}
.page-guide .guide-duo .guide-schema {
margin-inline: calc(var(--gouttiere) * -1);
}
.page-guide .guide-duo .guide-schema-cadre {
aspect-ratio: auto;
}
.page-guide .guide-duo .guide-schema-cadre img {
block-size: auto;
inline-size: 100%;
}
.page-guide .guide-tableau {
margin-inline: calc(var(--gouttiere) * -1);
padding-inline: var(--gouttiere);
}
.page-guide .guide-tableau table {
min-inline-size: 30rem;
}
.page-guide .guide-maison {
margin-block-start: var(--espace-2xl);
}
.page-guide .guide-sources {
margin-block-start: var(--espace-3xl);
}
.page-guide .guide-sources a {
display: block;
min-block-size: var(--bouton-hauteur);
padding-block: var(--espace-s);
}
.page-guide .guide-sources li::before {
padding-block: var(--espace-s);
}
:where(.page-guide, .page-guides) .guide-suite {
grid-template-columns: minmax(0, 1fr);
}
:where(.page-guide, .page-guides) .guide-suite h2 {
margin-block-end: var(--espace-l);
}
:where(.page-guide, .page-guides) .guide-suite ul {
grid-template-columns: minmax(0, 1fr);
border-block-end: var(--trait) solid var(--couleur-filet);
}
:where(.page-guide, .page-guides) .guide-fin-dedans {
grid-template-columns: minmax(0, 1fr);
padding: var(--bande-tel, var(--espace-2xl) var(--gouttiere));
}
:where(.page-guide, .page-guides) .guide-fin-action {
justify-items: stretch;
}
.page-guides .guides-tete,
.page-guides .guides-groupe {
grid-template-columns: minmax(0, 1fr);
}
.page-zones .zones-groupe-titre {
grid-template-columns: minmax(0, 1fr) auto;
row-gap: var(--espace-2xs);
}
.page-zones :is(.zones-replie, .zones-deplie) {
grid-row: 2;
grid-column: 1;
}
.page-zones .zones-groupe-titre .question-signe {
grid-row: 1;
grid-column: 2;
}
.page-zones .zones-communes {
columns: 1;
}
.page-guides .guides-tete h1 {
max-inline-size: none;
font-size: var(--taille-3);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
.page-guides .guides-vedette {
grid-template-columns: minmax(0, 1fr);
margin-inline: calc(var(--gouttiere) * -1 + var(--espace-2xs));
padding: var(--espace-2xl) var(--gouttiere);
}
.page-guides .guides-groupe {
margin-block-start: var(--espace-2xl);
}
.page-guides .guides-groupe h2 {
margin-block-end: var(--espace-s);
border: 0;
padding: 0;
}
.page-guides .guides-entree {
grid-template-columns: minmax(0, 1fr);
}
.page-guides .guides-entree .guides-date {
grid-column: 1;
grid-row: auto;
}
}
@media (max-width: 37.5em) {
.page-guide .guide-tableau tbody th { white-space: normal; }
.page-guide .guide-tableau table { min-inline-size: 0; }
.page-guide .guide-tableau :is(th, td) { padding-inline-end: var(--espace-s); }
}
}
@layer pages {
.page-guides .guides-une .s-dedans {
align-items: end;
}
.page-guides .guides-une .s-piece-figure {
margin: 0;
border: 0;
background: var(--couleur-sur-nuit);
}
.page-guides .guides-une .s-piece-chapeau {
max-inline-size: 34ch;
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-guides .s-sommaire-entree {
--s-vignette: min(10rem, 50vw);
}
.page-guides .guides-vignette {
block-size: calc(var(--s-vignette) * .75);
padding: var(--espace-xs);
object-fit: contain;
}
.page-guides .guides-suivant .s-sommaire-entree {
--s-vignette: min(13rem, 65vw);
}
.page-guides .guides-suivant .guides-vignette {
block-size: var(--s-vignette);
padding: var(--espace-s) var(--espace-s) 0;
object-fit: cover;
object-position: 50% 0;
}
.page-guides .guides-suivant .s-sommaire-intitule {
font-size: calc(var(--taille-1) * 1.25);
}
.page-guide .guide-section:has(+ .guide-section > .guide-liste--eviter) > .guide-liste,
.page-guide .guide-section:has(+ .guide-section > .guide-liste--eviter) > .guide-liste li {
border-color: var(--couleur-encre);
}
.page-guide .guide-section:has(+ .guide-section > .guide-liste--eviter) > .guide-liste li::before {
inset-block-start: calc(var(--espace-m) + 0.5em);
inline-size: 0.6em;
block-size: 0.6em;
background: var(--couleur-accent-fonce);
}
.page-guide .guide-liste--eviter {
margin-block-start: var(--espace-m);
padding: var(--espace-2xs) var(--espace-l);
border: 0;
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.page-guide .guide-corps .guide-liste--eviter li {
padding-inline-end: 0;
font-size: var(--taille-0);
line-height: var(--interligne-texte);
}
.page-guide .guide-liste--eviter li:first-child {
border-block-start: 0;
}
.page-guide .guide-tenue {
display: contents;
}
.page-guide .guide-tenue > * {
grid-column: 1 / span 6;
max-inline-size: calc(31.6em + 2 * var(--espace-xl));
}
.page-guide .guide-rappel {
justify-self: start;
inline-size: min(100%, calc(22.5rem + 2 * var(--espace-l)));
margin-block-start: var(--espace-3xl);
padding: var(--espace-m) var(--espace-l);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.page-guide .guide-rappel img {
inline-size: 100%;
block-size: auto;
}
@media (max-width: 63.99em) {
.page-guide .guide-tenue > * {
grid-column: 1 / span 8;
}
}
@media (max-width: 50.5em) {
.page-guides .s-sommaire-entree {
--s-vignette: min(7.5rem, 37.5vw);
}
.page-guides .guides-suivant .s-sommaire-entree {
--s-vignette: min(7.5rem, 37.5vw);
}
.page-guides .guides-suivant .s-sommaire-intitule {
font-size: var(--taille-1);
}
.page-guides .guides-une .s-dedans {
padding: var(--espace-s) var(--espace-s) var(--espace-3xl);
}
.page-guides .guides-une .s-piece-figure {
margin: 0 0 var(--espace-xl);
padding: var(--espace-l) var(--espace-s);
}
.page-guides .guides-une .s-piece-texte {
padding-inline: var(--espace-s);
}
.page-guide .guide-liste--eviter {
padding-inline: var(--espace-m);
}
.page-guide .guide-tenue {
display: block;
}
.page-guide .guide-tenue > .guide-schema {
display: contents;
}
.page-guide .guide-tenue .guide-schema-cadre {
position: sticky;
inset-block-start: var(--hauteur-entete-tel);
z-index: 1;
margin: var(--espace-2xl) calc(var(--gouttiere) * -1) 0;
border-radius: 0;
box-shadow: 0 var(--espace-s) 0 var(--couleur-fond);
}
.page-guide .guide-tenue .guide-schema figcaption {
margin: var(--espace-m) 0 0;
}
.page-guide .guide-rappel {
inline-size: auto;
margin-inline: calc(var(--gouttiere) * -1);
padding: var(--espace-m);
border-radius: var(--rayon-cadre);
}
}
@media (prefers-reduced-motion: reduce) {
.page-guide .guide-tenue .guide-schema-cadre {
position: static;
}
}
}
@layer pages {
.page-guide .guide-rappel--fenetre img {
block-size: 15rem;
object-fit: cover;
object-position: 50% 43%;
}
.page-guide.guide-faux .guide-rappel--fenetre img {
block-size: 18.5rem;
object-position: 50% 0;
}
@media (max-width: 50.5em) {
.page-guide .guide-tenue > .guide-rappel {
position: sticky;
inset-block-start: var(--hauteur-entete-tel);
z-index: 1;
border-radius: 0;
box-shadow: 0 var(--espace-s) 0 var(--couleur-fond);
}
.page-guide .guide-rappel--fenetre {
justify-self: stretch;
}
.page-guide.guide-cambriolage .guide-tenue .guide-schema-cadre {
border-radius: var(--rayon-cadre);
}
}
@media (prefers-reduced-motion: reduce) {
.page-guide .guide-tenue > .guide-rappel {
position: static;
}
}
}
@layer pages {
.page-guides .guides-vignette:not(.guides-suivant *) {
padding: 0;
object-fit: cover;
}
.page-guide.guide-faux .guide-rappel--fenetre {
contain: layout paint;
}
@media (max-width: 50.5em) {
.page-guide:not(.guide-cambriolage) .guide-tenue .guide-schema-cadre,
.page-guide .guide-tenue > .guide-rappel {
padding: var(--espace-xs);
background: var(--couleur-nuit);
}
.page-guide:not(.guide-cambriolage) .guide-tenue .guide-schema-cadre img,
.page-guide .guide-tenue > .guide-rappel img {
max-inline-size: calc(var(--schema-largeur, 100%) + 2 * (var(--espace-m) - var(--espace-xs)));
padding: calc(var(--espace-m) - var(--espace-xs));
border-radius: var(--rayon-m);
background: var(--couleur-sur-nuit);
}
.page-guide .guide-tenue > .guide-rappel--fenetre img {
block-size: calc(15rem + 2 * (var(--espace-m) - var(--espace-xs)));
}
.page-guide.guide-faux .guide-tenue > .guide-rappel--fenetre img {
block-size: calc(18.5rem + 2 * (var(--espace-m) - var(--espace-xs)));
}
.page-guide.guide-cambriolage .guide-tenue .guide-schema-cadre {
container-type: scroll-state;
overflow: clip;
}
@container scroll-state(stuck: top) {
.page-guide.guide-cambriolage .guide-tenue .guide-schema-cadre img {
border-radius: var(--rayon-m);
background: var(--couleur-sur-nuit);
box-shadow: 0 0 0 calc(var(--espace-m) - var(--espace-xs)) var(--couleur-sur-nuit), 0 0 0 var(--espace-m) var(--couleur-nuit);
}
}
}
}
@layer pages {
.page-installation :is(.rdv-volet, .rdv-suite),
.page-installation :is(.rdv-bande-dedans, .rdv-fin-dedans, .rdv-reperes-pose) {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
}
.page-installation :is(.rdv-volet, .rdv-suite) {
margin-block-start: var(--espace-section);
padding-inline: var(--bord);
}
.page-installation :is(.rdv-bande, .rdv-fin) {
margin: var(--espace-section) var(--marge) 0;
border-radius: var(--rayon-cadre);
}
.page-installation :is(.rdv-bande-dedans, .rdv-fin-dedans) {
padding: var(--espace-4xl) var(--gouttiere);
}
.page-installation .rdv-premier {
padding-inline: var(--marge);
}
.page-installation .rdv-cadre {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) auto;
column-gap: var(--ecart-colonnes);
min-block-size: max(var(--cadre-hauteur-min), min(calc(100svh - var(--hauteur-entete) - var(--marge)), var(--cadre-hauteur-max)));
padding: var(--gouttiere);
overflow: hidden;
border-radius: var(--rayon-cadre);
background:
radial-gradient(48% 62% at 72% 34%, var(--couleur-fond), var(--couleur-surface) 78%);
}
.page-installation .rdv-objet {
position: relative;
grid-column: 4 / -1;
grid-row: 1;
min-block-size: 0;
margin-block-start: calc(var(--gouttiere) * -0.5);
margin-inline-end: calc(var(--gouttiere) * -0.5);
}
.page-installation .rdv-objet img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: contain;
object-position: 100% 50%;
}
.page-installation .rdv-texte {
grid-column: 1 / span 8;
grid-row: 2;
align-self: end;
}
.page-installation .rdv-texte h1 {
max-inline-size: 11em;
text-wrap: balance;
}
.page-installation .rdv-chapeau {
max-inline-size: 34ch;
margin-block-start: var(--espace-l);
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-installation .rdv-action {
grid-column: 9 / span 4;
grid-row: 2;
align-self: end;
justify-self: end;
display: grid;
justify-items: start;
gap: var(--espace-l);
inline-size: 100%;
max-inline-size: 22rem;
}
.page-installation .rdv-zone {
display: flex;
align-items: baseline;
gap: var(--espace-xs);
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
.page-installation .rdv-zone .encart-point {
background: var(--couleur-accent-fonce);
}
.page-installation .rdv-appel,
.page-installation .rdv-urgence {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
.page-installation .rdv-appel .lien,
.page-installation .rdv-urgence .lien {
display: inline;
min-block-size: 0;
padding-block: var(--espace-s);
overflow-wrap: anywhere;
}
.page-installation .rdv-cadre--plein .rdv-objet {
position: absolute;
grid-area: auto;
inset: 0;
z-index: -1;
margin: 0;
}
.page-installation .rdv-cadre--plein .rdv-objet img {
object-fit: cover;
object-position: 70% 40%;
}
.page-installation .rdv-image-etroite {
display: none;
}
.page-installation .rdv-volet-titre {
grid-column: 1 / span 5;
align-self: start;
max-inline-size: 15ch;
}
.page-installation .rdv-volet-titre--colle {
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
}
.page-installation .rdv-volet-corps,
.page-installation .rdv-volet-liste,
.page-installation .rdv-volet-note,
.page-installation .rdv-volet-etapes,
.page-installation .rdv-volet-droits,
.page-installation .rdv-volet-questions {
grid-column: 7 / span 6;
}
.page-installation .rdv-volet-corps {
display: grid;
align-content: start;
gap: var(--espace-m);
color: var(--couleur-encre-douce);
}
.page-installation .rdv-volet-corps p {
max-inline-size: var(--mesure-texte);
}
.page-installation .rdv-volet-corps--chapeau p:first-child {
color: var(--couleur-encre);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-installation .rdv-volet-liste {
border-block-end: var(--trait) solid var(--couleur-filet);
}
.page-installation .rdv-volet-liste li {
padding-block: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-installation .rdv-volet-note,
.page-installation .rdv-volet-droits {
margin-block-start: var(--espace-xl);
}
.page-installation .rdv-volet-note {
max-inline-size: none;
}
.page-installation .rdv-volet-droits {
display: grid;
gap: var(--espace-xs);
}
.page-installation .rdv-volet-droits p {
color: var(--couleur-encre-douce);
}
.page-installation .rdv-volet-corps + .rdv-volet-note {
grid-row: 2;
}
.page-installation .rdv-reperes-pose {
grid-column: 1 / -1;
grid-template-columns: subgrid;
margin-block-start: var(--espace-4xl);
row-gap: var(--espace-2xl);
}
.page-installation .rdv-repere {
grid-column: 9 / span 4;
align-self: start;
display: grid;
gap: var(--espace-m);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-installation .rdv-repere--large {
grid-column: 1 / span 7;
border-block-start-color: var(--couleur-encre);
}
.page-installation .rdv-repere--large h3 {
max-inline-size: 16ch;
font-size: var(--taille-3);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
.page-installation .rdv-repere-texte {
display: grid;
justify-items: start;
gap: var(--espace-m);
color: var(--couleur-encre-douce);
}
.page-installation .rdv-repere-texte p,
.page-installation p.rdv-repere-texte {
max-inline-size: 56ch;
}
.page-installation .rdv-repere--large .rdv-repere-texte p:first-child {
color: var(--couleur-encre);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-installation .rdv-bande-titre {
grid-column: 1 / span 5;
grid-row: 1;
align-self: start;
max-inline-size: 13ch;
}
.page-installation .rdv-bande-image {
grid-column: 1 / span 5;
grid-row: 2;
align-self: end;
aspect-ratio: 3 / 2;
margin-block-start: var(--espace-2xl);
}
.page-installation .rdv-bande-image img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.page-installation .rdv-bande-prix {
grid-column: 7 / span 6;
grid-row: 1;
display: grid;
gap: var(--espace-l);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-installation .rdv-bande-chiffre {
max-inline-size: 11em;
}
.page-installation .rdv-bande-detail {
max-inline-size: 52ch;
color: var(--couleur-encre-douce);
line-height: var(--interligne-chapeau);
}
.page-installation .rdv-bande-texte {
grid-column: 7 / span 6;
grid-row: 2;
align-self: end;
display: grid;
justify-items: start;
gap: var(--espace-m);
margin-block-start: var(--espace-2xl);
padding: var(--espace-l);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
color: var(--couleur-encre-douce);
}
.page-installation .rdv-bande-texte p {
max-inline-size: var(--mesure-texte);
}
.page-installation .rdv-fin {
background: var(--couleur-surface);
}
.page-installation .rdv-fin-titre {
grid-column: 1 / span 7;
max-inline-size: 22ch;
}
.page-installation .rdv-fin-corps {
grid-column: 8 / span 5;
align-self: end;
display: grid;
justify-items: start;
gap: var(--espace-l);
}
.page-installation .rdv-fin-corps > p:first-child {
max-inline-size: 46ch;
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-installation .rdv-fin .bouton {
white-space: normal;
text-align: start;
line-height: 1.2;
}
.page-installation .rdv-suite-titre {
grid-column: 1 / -1;
margin-block-end: var(--espace-l);
color: var(--couleur-encre-douce);
font-size: var(--taille-0);
font-weight: var(--graisse-menu);
letter-spacing: 0;
}
.page-installation .rdv-suite-liens {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
border-block-end: var(--trait) solid var(--couleur-filet);
}
.page-installation .rdv-suite-liens li {
grid-column: span 6;
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-installation .rdv-suite-liens a {
display: flex;
align-items: center;
min-block-size: calc(var(--bouton-hauteur) * 1.6);
padding-block: var(--espace-s);
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
letter-spacing: calc(var(--approche-titre) / 3);
line-height: 1.25;
text-decoration-line: underline;
text-decoration-color: transparent;
text-underline-offset: 0.25em;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
.page-installation .rdv-suite-liens a:hover {
text-decoration-color: currentColor;
}
.page-installation .rdv-volet-titre--large {
grid-column: 1 / span 8;
max-inline-size: 20ch;
}
.page-installation .rdv-volet-colonnes {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
margin-block-start: var(--espace-2xl);
color: var(--couleur-encre-douce);
}
.page-installation .rdv-volet-colonnes p {
grid-column: span 4;
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-installation .rdv-volet-colonnes p:first-child {
border-block-start-color: var(--couleur-encre);
color: var(--couleur-encre);
}
.page-installation .rdv-encart-large {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
padding-block: var(--espace-3xl);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.page-installation .rdv-encart-large-titre {
grid-column: 2 / span 5;
max-inline-size: 16ch;
}
.page-installation .rdv-encart-large-texte {
grid-column: 8 / span 4;
align-self: end;
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
@media (max-width: 50.5em) {
.page-installation :is(.rdv-volet, .rdv-suite) > *,
.page-installation :is(.rdv-bande-dedans, .rdv-fin-dedans, .rdv-reperes-pose) > *,
.page-installation .rdv-suite-liens > li {
grid-column: 1 / -1;
grid-row: auto;
}
.page-installation :is(.rdv-bande-dedans, .rdv-fin-dedans) {
padding: var(--bande-tel);
}
.page-installation .rdv-cadre {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(var(--espace-l), 1fr) auto auto;
min-block-size: max(var(--cadre-hauteur-min), calc(100svh - var(--hauteur-entete-tel) - var(--hauteur-barre-appel) - var(--marge)));
padding: var(--espace-l);
background:
radial-gradient(80% 40% at 50% 24%, var(--couleur-fond), var(--couleur-surface) 80%);
}
.page-installation .rdv-objet {
grid-column: 1;
grid-row: 1;
aspect-ratio: 3 / 2;
margin: calc(var(--espace-l) * -0.5) calc(var(--espace-l) * -1) 0;
}
.page-installation .rdv-objet img {
object-position: 50% 50%;
}
.page-installation .rdv-texte,
.page-installation .rdv-action {
grid-column: 1;
}
.page-installation .rdv-texte {
grid-row: 3;
}
.page-installation .rdv-action {
grid-row: 4;
justify-self: stretch;
max-inline-size: none;
gap: var(--espace-m);
margin-block-start: var(--espace-xl);
}
.page-installation .rdv-chapeau {
margin-block-start: var(--espace-s);
}
.page-installation .rdv-bouton {
justify-self: stretch;
}
.page-installation .rdv-cadre--plein .rdv-objet {
aspect-ratio: auto;
}
.page-installation .rdv-cadre--plein .rdv-image-large {
display: none;
}
.page-installation .rdv-cadre--plein .rdv-image-etroite {
display: block;
object-position: 50% 0%;
}
.page-installation .rdv-volet-titre--colle {
position: static;
}
.page-installation .rdv-volet-liste,
.page-installation .rdv-volet-corps,
.page-installation .rdv-volet-etapes,
.page-installation .rdv-volet-questions,
.page-installation .rdv-repere,
.page-installation .rdv-bande-prix {
margin-block-start: var(--espace-2xl);
}
.page-installation .rdv-volet-corps + .rdv-volet-note {
grid-row: auto;
}
.page-installation .rdv-volet-liste li {
padding-block: var(--espace-m);
}
.page-installation .rdv-reperes-pose {
margin-block-start: var(--espace-3xl);
row-gap: 0;
}
.page-installation .rdv-bande-image {
order: 1;
margin-block-start: var(--espace-xl);
}
.page-installation .rdv-bande-texte {
padding: var(--espace-m);
}
.page-installation .rdv-fin-corps {
margin-block-start: var(--espace-xl);
}
.page-installation .rdv-fin .bouton {
justify-self: stretch;
justify-content: center;
text-align: center;
}
.page-installation .rdv-suite-liens a {
font-size: var(--taille-0);
}
.page-installation .rdv-volet-colonnes {
row-gap: var(--espace-l);
margin-block-start: var(--espace-xl);
}
.page-installation .rdv-volet-colonnes p {
grid-column: 1 / -1;
}
.page-installation .rdv-encart-large {
padding: var(--espace-xl) var(--espace-l);
row-gap: var(--espace-l);
}
.page-installation .rdv-encart-large > * {
grid-column: 1 / -1;
}
}
}
@layer pages {
.page-installation .rdv-volet .rdv-photo {
grid-column: 7 / span 4;
grid-row: 2;
margin-block-start: var(--espace-2xl);
}
@media (max-width: 50.5em) {
.page-installation .rdv-volet .rdv-photo {
grid-column: 1 / -1;
grid-row: auto;
margin-block-start: var(--espace-xl);
}
}
}
@layer pages {
.page-installation.page-cylindre .s-fin .rdv-urgence {
max-inline-size: 40ch;
font-size: var(--taille-0);
}
}
@layer pages {
.page-installation:is(.page-multipoints, .page-connectee) .s-fin .rdv-urgence {
max-inline-size: 40ch;
font-size: var(--taille-0);
}
.page-installation.page-multipoints .s-fin-objet {
--s-objet-echelle: .92;
}
@media (max-width: 50.5em) {
.page-installation:is(.page-multipoints, .page-connectee) .s-fin .bouton {
padding-block: var(--espace-s);
line-height: 1.25;
text-align: center;
white-space: normal;
}
}
@media (min-width: 34em) and (max-width: 50.5em) {
.page-installation.page-connectee .s-piece--portrait .s-piece-figure {
--s-piece-format: 4 / 3;
--s-piece-cadrage: 50% 15%;
}
}
}
@layer pages {
.page-installation .pose-tarif {
grid-column: 1 / -1;
grid-row: 3;
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
margin-block-start: var(--espace-2xl);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-installation .pose-tarif-ligne {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--espace-2xs) var(--espace-s);
padding-block-start: var(--espace-l);
padding-inline-end: var(--espace-2xl);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-installation .pose-tarif-ligne + .pose-tarif-ligne {
padding-inline-start: var(--espace-2xl);
border-inline-start: var(--trait) solid var(--couleur-filet);
}
.page-installation .pose-tarif dt {
font-weight: var(--graisse-titre);
color: var(--couleur-accent);
}
.page-installation .pose-tarif dd {
margin: 0;
color: var(--couleur-encre-douce);
}
.page-cylindre .cylindre-pose-texte {
grid-column: 1 / span 4;
grid-row: 1;
align-self: end;
display: grid;
justify-items: start;
gap: var(--espace-xl);
}
.page-cylindre .cylindre-pose-texte h2 {
max-inline-size: 13ch;
}
.page-cylindre .cylindre-pose .s-paire-images {
grid-column: 6 / -1;
grid-row: 1;
max-inline-size: 48rem;
margin-block-start: 0;
}
.page-cylindre .cylindre-etiquette {
margin-block-start: var(--espace-m);
padding-block-start: var(--espace-s);
border-block-start: var(--trait) solid var(--couleur-filet);
font-weight: var(--graisse-titre);
}
.page-cylindre .cylindre-cadre-main {
--s-paire-cadrage: 40% 50%;
}
.page-multipoints .multipoints-tranche .s-piece-figure {
grid-column: 1 / span 6;
justify-self: start;
max-inline-size: calc(34rem + var(--gouttiere));
}
.page-multipoints .multipoints-tranche .s-piece-texte {
grid-column: 8 / -1;
}
@media (max-width: 50.5em) {
.page-installation .pose-tarif {
grid-row: auto;
flex-direction: column;
margin-block-start: var(--espace-xl);
}
.page-installation .pose-tarif-ligne,
.page-installation .pose-tarif-ligne + .pose-tarif-ligne {
padding: var(--espace-m) 0;
border-inline-start: 0;
}
.page-installation .pose-tarif-ligne + .pose-tarif-ligne {
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-cylindre .cylindre-pose-texte,
.page-cylindre .cylindre-pose .s-paire-images,
.page-multipoints .multipoints-tranche :is(.s-piece-figure, .s-piece-texte) {
grid-column: 1 / -1;
grid-row: auto;
}
.page-cylindre .cylindre-pose .s-paire-images {
flex-direction: row;
gap: var(--espace-m);
margin-block-start: var(--espace-xl);
}
.page-cylindre .cylindre-pose .s-paire-figure {
flex: 1 1 0;
inline-size: auto;
}
.page-multipoints .multipoints-tranche .s-piece-figure {
justify-self: stretch;
max-inline-size: none;
}
.page-multipoints .s-deroule {
display: block;
}
.page-multipoints .s-deroule :is(.s-deroule-tete, .multipoints-schema-collant) {
display: contents;
}
.page-multipoints .multipoints-schema-collant img {
position: sticky;
z-index: 1;
inset-block-start: var(--hauteur-entete-tel);
display: block;
inline-size: 100%;
max-inline-size: 30rem;
margin-block-start: var(--espace-xl);
padding-block: var(--espace-s);
border-block-end: var(--trait) solid var(--couleur-filet);
background: var(--couleur-fond);
}
.page-multipoints .multipoints-schema-collant .s-piece-legende {
display: block;
margin-block-start: var(--espace-m);
}
}
@media (max-width: 50.5em) and (prefers-reduced-motion: reduce) {
.page-multipoints .multipoints-schema-collant img {
position: static;
}
}
}
@layer pages {
.page-legal .legal-plan {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
padding: var(--espace-3xl) var(--bord) 0;
}
.page-legal .legal-tete {
grid-column: 1 / span 4;
align-self: start;
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
}
.page-legal .legal-tete h1 {
max-inline-size: 9ch;
font-size: var(--taille-3);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
.page-legal .texte-legal {
grid-column: 6 / span 7;
gap: 0;
padding-block-end: 0;
border-block-end: var(--trait) solid var(--couleur-filet);
}
.page-legal .texte-legal section {
gap: var(--espace-s);
max-inline-size: 66ch;
padding-block: var(--espace-xl);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-legal .texte-legal h2 {
font-size: var(--taille-1);
line-height: 1.25;
letter-spacing: calc(var(--approche-titre) / 3);
}
.page-legal .texte-legal p,
.page-legal .texte-legal li {
color: var(--couleur-encre-douce);
line-height: 1.6;
}
.page-legal .texte-legal ul {
display: grid;
gap: var(--espace-2xs);
padding-inline-start: 1.1em;
}
.page-legal .texte-legal li::marker {
color: var(--couleur-filet);
}
.page-legal .texte-legal a {
color: var(--couleur-encre);
text-decoration-thickness: var(--trait);
text-underline-offset: 0.2em;
overflow-wrap: anywhere;
padding-block: 0.12em;
}
@media (max-width: 50.5em) {
.page-legal .legal-plan {
grid-template-columns: minmax(0, 1fr);
padding-block-start: var(--espace-2xl);
}
.page-legal .legal-tete,
.page-legal .texte-legal {
grid-column: 1;
}
.page-legal .legal-tete {
position: static;
margin-block-end: var(--espace-xl);
}
.page-legal .legal-tete h1 {
max-inline-size: none;
}
.page-legal .texte-legal section {
padding-block: var(--espace-l);
}
}
}
@layer pages {
.page-merci .merci-premier {
padding-inline: var(--marge);
}
.page-merci .merci-cadre {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
align-items: end;
min-block-size: min(70svh, var(--cadre-hauteur-min));
padding: var(--gouttiere);
border-radius: var(--rayon-cadre);
background: radial-gradient(48% 70% at 74% 40%, var(--couleur-fond), var(--couleur-surface) 78%);
}
.page-merci .merci-objet {
grid-column: 7 / -1;
grid-row: 1;
align-self: center;
aspect-ratio: 3 / 2;
}
.page-merci .merci-objet img {
inline-size: 100%;
block-size: 100%;
object-fit: contain;
}
.page-merci .merci-cadre {
overflow: hidden;
}
.page-merci .merci-objet.merci-mascotte {
grid-column: 8 / -1;
align-self: end;
justify-self: center;
aspect-ratio: auto;
inline-size: min(100%, 21rem);
margin-block-end: calc(var(--gouttiere) * -1);
}
.page-merci .merci-objet.merci-mascotte img {
block-size: auto;
aspect-ratio: 1136 / 1408;
object-fit: cover;
-webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.page-merci .merci-texte {
grid-column: 1 / span 6;
grid-row: 1;
}
.page-merci .merci-chapeau {
max-inline-size: 40ch;
margin-block-start: var(--espace-l);
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-merci .merci-urgence {
display: grid;
justify-items: start;
gap: var(--espace-xs);
margin-block-start: var(--espace-xl);
}
.page-merci .merci-urgence p {
max-inline-size: 46ch;
}
.page-merci .merci-urgence .lien {
overflow-wrap: anywhere;
}
.page-merci .merci-urgence p .lien {
display: inline;
}
@media (max-width: 50.5em) {
.page-merci .merci-cadre {
grid-template-columns: minmax(0, 1fr);
padding: var(--espace-l);
}
.page-merci .merci-objet,
.page-merci .merci-texte {
grid-column: 1;
grid-row: auto;
}
.page-merci .merci-objet {
margin-inline: calc(var(--espace-l) * -1);
}
.page-merci .merci-objet.merci-mascotte {
grid-column: 1;
order: 2;
justify-self: center;
inline-size: min(72vw, 17rem);
margin-inline: auto;
margin-block: var(--espace-l) calc(var(--espace-l) * -1);
}
.page-merci .merci-urgence {
margin-block-start: var(--espace-xl);
}
}
}
@layer pages {
.page-urgence.page-porte-claquee .premier-piece--cle {
inset-block-start: -2%;
inline-size: min(54%, 60rem);
}
@media (max-width: 50.5em) {
.page-urgence.page-porte-claquee .premier-piece--cle {
inset-block-start: -1%;
inline-size: min(132%, 34rem);
}
}
}
@layer pages {
.page-urgence.page-porte-claquee .s-vitrine-objet {
--s-objet-format: 2 / 1;
--s-objet-cadrage: 50% 42%;
grid-column: 6 / -1;
mask-image: linear-gradient(to right, transparent, var(--couleur-nuit) 30%), linear-gradient(to top, transparent, var(--couleur-nuit) 30%);
mask-composite: intersect;
}
@media (max-width: 50.5em) {
.page-urgence.page-porte-claquee .s-deroule-tete {
display: contents;
}
.page-urgence.page-porte-claquee .s-deroule-tete > * {
grid-column: 1 / -1;
}
.page-urgence.page-porte-claquee .s-deroule-visuel {
position: sticky;
z-index: 1;
inset-block-start: calc(var(--hauteur-entete-tel) + var(--espace-s));
align-self: start;
margin-block-start: var(--espace-xl);
background: var(--couleur-fond);
box-shadow: 0 calc(var(--espace-s) * -1) 0 0 var(--couleur-fond);
}
.page-urgence.page-porte-claquee .s-vitrine-prix {
display: contents;
}
.page-urgence.page-porte-claquee .s-vitrine-prix > li:first-child {
order: 1;
margin-block-start: var(--espace-2xl);
}
.page-urgence.page-porte-claquee .s-vitrine-objet {
--s-objet-format: 1 / 1;
--s-objet-cadrage: 50% 50%;
grid-column: 1 / -1;
order: 2;
margin: 0 calc(var(--espace-l) * -1);
border-radius: 0;
mask-image: linear-gradient(to bottom, transparent, var(--couleur-nuit) 18%, var(--couleur-nuit) 82%, transparent);
mask-composite: add;
}
.page-urgence.page-porte-claquee .s-vitrine-prix > li:last-child {
order: 3;
}
@media (min-width: 34em) {
.page-urgence.page-porte-claquee .s-vitrine-objet {
--s-objet-format: 16 / 9;
margin-block-end: 0;
}
}
}
@media (max-width: 50.5em) and (prefers-reduced-motion: reduce) {
.page-urgence.page-porte-claquee .s-deroule-visuel {
position: static;
}
}
}
@layer pages {
.page-urgence.page-porte-claquee .ouverture-nuit .s-vitrine-titre {
max-inline-size: 12ch;
}
.page-urgence.page-porte-claquee .ouverture-nuit .s-vitrine-objet {
--s-objet-format: 16 / 9;
--s-objet-cadrage: 50% 45%;
grid-column: 5 / -1;
}
@media (max-width: 50.5em) {
.page-urgence.page-porte-claquee .ouverture-nuit .s-vitrine-objet {
--s-objet-format: 1 / 1;
--s-objet-cadrage: 50% 50%;
grid-column: 1 / -1;
}
@media (min-width: 34em) {
.page-urgence.page-porte-claquee .ouverture-nuit .s-vitrine-objet {
--s-objet-format: 16 / 9;
}
}
}
}
@layer pages {
@media (max-width: 50.5em) {
.page-urgence.page-porte-claquee main {
display: flex;
flex-direction: column;
}
.page-urgence.page-porte-claquee main > .ouverture-nuit {
order: 1;
}
.page-urgence.page-porte-claquee main > :is(.s-questions, .s-fin) {
order: 2;
}
}
}
@layer pages {
.page-pratique .tete-cadre:has(.tete-objet) {
overflow: hidden;
background: var(--couleur-nuit);
}
.page-pratique .tete-objet {
position: absolute;
grid-area: auto;
inset-block-start: var(--objet-y, 42%);
inset-inline-start: var(--objet-x, 80%);
z-index: -1;
block-size: var(--objet-h, 100%);
aspect-ratio: 16 / 9;
translate: -74% -45%;
}
.page-pratique .tete-image {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.page-pratique .tete-image--etroite {
display: none;
}
.page-tarifs .tete-objet {
--objet-x: 55%;
--objet-y: 32%;
--objet-h: 64%;
}
.page-deroule .tete-objet {
--objet-x: 79%;
--objet-y: 40%;
--objet-h: 84%;
}
.page-qui .tete-objet {
--objet-x: 80%;
--objet-y: 40%;
}
.page-contact .tete-objet {
--objet-x: 51%;
--objet-y: 46%;
--objet-h: 78%;
}
.page-introuvable .tete-objet {
--objet-x: 79%;
--objet-y: 36%;
--objet-h: 80%;
}
:where(.page-pratique) .plan {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
margin-block-start: var(--espace-section);
padding-inline: var(--bord);
}
:where(.page-pratique) .bande-grise {
background: var(--couleur-surface);
}
:where(.page-pratique) .bande-dedans {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
padding: var(--espace-4xl) var(--gouttiere);
}
:where(.page-pratique) .titre-gauche {
grid-column: 1 / span 5;
align-self: start;
}
:where(.page-pratique) .titre-colle {
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
}
:where(.page-pratique) .colonne-droite {
grid-column: 7 / span 6;
}
:where(.page-pratique) .titre-affiche {
font-size: var(--taille-5);
line-height: var(--interligne-affichage);
letter-spacing: var(--approche-affichage);
max-inline-size: 12ch;
}
:where(.page-pratique) .texte-courant {
display: grid;
align-content: start;
gap: var(--espace-m);
}
:where(.page-pratique) .texte-courant p {
max-inline-size: var(--mesure-texte);
}
:where(.page-pratique) .texte-courant p:first-child {
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
:where(.page-pratique) .texte-courant p + p {
color: var(--couleur-encre-douce);
}
:where(.page-pratique) .filets {
max-inline-size: 44rem;
border-block-end: var(--trait) solid var(--couleur-filet);
}
:where(.page-pratique) .filets > li {
padding-block: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
:where(.page-pratique) .liens-forts {
border-block-end: var(--trait) solid var(--couleur-filet);
}
:where(.page-pratique) .liens-forts a {
display: flex;
align-items: center;
min-block-size: calc(var(--bouton-hauteur) * 1.5);
padding-block: var(--espace-xs);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
letter-spacing: calc(var(--approche-titre) / 3);
line-height: 1.25;
text-decoration-line: underline;
text-decoration-color: transparent;
text-underline-offset: 0.25em;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
:where(.page-pratique) .liens-forts a:hover {
text-decoration-color: currentColor;
}
:where(.page-pratique) .cloture {
align-items: end;
row-gap: var(--espace-xl);
}
:where(.page-pratique) .cloture h2 {
grid-column: 1 / span 6;
max-inline-size: 21ch;
text-wrap: balance;
}
:where(.page-pratique) .cloture-actions {
grid-column: 7 / span 6;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--espace-m) var(--espace-xl);
}
@media (max-width: 50.5em) {
:where(.page-pratique) .plan,
:where(.page-pratique) .bande-dedans {
grid-template-columns: minmax(0, 1fr);
}
:where(.page-pratique) .plan > *,
:where(.page-pratique) .bande-dedans > * {
grid-column: 1;
grid-row: auto;
}
.page-pratique .tete-cadre:has(.tete-objet) {
--objet-largeur: min(calc((100vw - 2 * var(--marge)) * 0.86), 22rem);
padding-block-start: calc(var(--objet-largeur) * 0.75);
}
.page-pratique .tete-objet {
inset-block-start: 0;
inset-inline-start: 50%;
inline-size: var(--objet-largeur);
block-size: auto;
aspect-ratio: 4 / 5;
translate: -50% 0;
}
.page-pratique .tete-image--large {
display: none;
}
.page-pratique .tete-image--etroite {
display: block;
}
.page-deroule .tete-objet {
inset-block-start: calc(var(--objet-largeur) * -0.07);
}
:where(.page-pratique) .bande-dedans {
padding: var(--bande-tel);
}
:where(.page-pratique) .titre-colle {
position: static;
}
:where(.page-pratique) .titre-gauche + *,
:where(.page-pratique) .colonne-droite {
margin-block-start: var(--espace-xl);
}
:where(.page-pratique) .titre-affiche {
font-size: var(--taille-3);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
:where(.page-pratique) .cloture-actions {
display: grid;
justify-items: start;
}
:where(.page-pratique) .cloture-actions .bouton {
justify-self: stretch;
}
}
}
@layer pages {
.page-qui .s-piece-texte h2 {
max-inline-size: 16ch;
}
.page-qui .s-piece--trait .s-piece-texte {
align-self: start;
}
.page-qui .s-piece--trait .s-piece-figure {
grid-row: 1 / span 2;
align-self: stretch;
margin: 0;
}
.page-qui .s-piece--trait .s-piece-figure img {
inline-size: 100%;
max-inline-size: 400px;
}
.qui-repond {
grid-column: 1 / span 6;
grid-row: 2;
align-self: end;
display: grid;
justify-items: start;
gap: var(--espace-m);
margin-block-start: var(--espace-2xl);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.qui-repond-role {
display: flex;
flex-wrap: wrap;
column-gap: var(--espace-xs);
color: var(--couleur-accent-fonce);
font-weight: var(--graisse-titre);
}
.qui-repond-etiquette {
font-weight: var(--graisse-texte);
}
.qui-repond-titre {
max-inline-size: 22ch;
font-size: var(--taille-1);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
}
.qui-repond-propos {
display: grid;
justify-items: start;
gap: var(--espace-m);
}
.qui-repond-propos p {
max-inline-size: 46ch;
}
.qui-sms {
position: relative;
z-index: 1;
grid-column: 8 / -1;
grid-row: 1 / span 3;
align-self: center;
display: grid;
justify-items: start;
gap: var(--espace-s);
margin: 0;
}
.page-qui .qui-sms.facsimile {
max-inline-size: none;
container-type: normal;
}
.qui-sms-etiquette {
color: var(--couleur-encre-douce);
}
.qui-sms-bulle {
max-inline-size: 34ch;
padding: var(--espace-l) var(--espace-xl);
border-radius: var(--rayon-cadre) var(--rayon-cadre) var(--rayon-cadre) var(--rayon-s);
background: var(--couleur-nuit-surface);
border: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-qui .s-fin .bouton {
max-inline-size: 100%;
white-space: normal;
text-wrap: balance;
}
@media (max-width: 50.5em) {
.page-qui .qui-depart .s-lueur-titre,
.page-qui .s-piece--trait .s-piece-figure,
.qui-repond,
.qui-sms {
grid-column: 1 / -1;
grid-row: auto;
}
.page-qui .qui-depart .s-lueur-titre {
max-inline-size: none;
text-wrap: balance;
}
.page-qui .s-piece--trait .s-piece-figure {
margin: 0 0 var(--espace-xl);
}
.qui-repond {
margin-block-start: var(--espace-l);
}
.qui-sms {
order: 1;
}
.page-qui .qui-depart .s-lueur-texte {
order: 2;
}
.qui-sms-bulle {
padding: var(--espace-m) var(--espace-l);
}
}
}
@layer pages {
.page-installation.page-connectee .connectee-prix .s-vitrine-objet {
--s-objet-cadrage: 72% 50%;
mask-image: linear-gradient(to right, transparent, var(--couleur-nuit) 30%), linear-gradient(to top, transparent, var(--couleur-nuit) 30%);
mask-composite: intersect;
}
.page-installation.page-connectee .connectee-fin .s-fin-objet {
--s-objet-echelle: 1.3;
}
@media (max-width: 50.5em) {
.page-installation.page-connectee .connectee-prix .s-vitrine-objet {
--s-objet-format: 1 / 1;
--s-objet-cadrage: 96% 50%;
mask-composite: add;
}
@media (min-width: 34em) {
.page-installation.page-connectee .connectee-prix .s-vitrine-objet {
--s-objet-format: 16 / 9;
--s-objet-cadrage: 60% 50%;
}
}
.page-installation.page-connectee .connectee-prix .s-vitrine-objet {
order: 1;
margin: var(--espace-xl) calc(var(--espace-l) * -1) calc(var(--espace-2xl) * -1);
border-radius: 0 0 var(--rayon-cadre) var(--rayon-cadre);
mask-image: linear-gradient(to bottom, transparent, var(--couleur-nuit) 24%);
}
.page-installation.page-connectee .s-deroule {
display: block;
}
.page-installation.page-connectee .s-deroule :is(.s-deroule-tete, .s-deroule-schema) {
display: contents;
}
.page-installation.page-connectee .s-deroule-schema img {
position: sticky;
z-index: 1;
inset-block-start: var(--hauteur-entete-tel);
display: block;
inline-size: 100%;
max-inline-size: 30rem;
margin-block-start: var(--espace-xl);
padding-block: var(--espace-s);
border-block-end: var(--trait) solid var(--couleur-filet);
background: var(--couleur-fond);
}
.page-installation.page-connectee .s-deroule-schema .s-piece-legende {
display: block;
margin-block-start: var(--espace-m);
}
}
@media (max-width: 50.5em) and (prefers-reduced-motion: reduce) {
.page-installation.page-connectee .s-deroule-schema img {
position: static;
}
}
}
@layer pages {
.page-urgence.page-cambriolage .premier-piece--etroite {
display: none;
}
.page-urgence.page-cambriolage .premier-piece--large {
mask-image: radial-gradient(ellipse 62% 70% at 72% 45%, #000 55%, transparent 100%);
}
.page-urgence.page-cambriolage .premier-piece--etroite {
mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
@media (max-width: 50.5em) {
.page-urgence.page-cambriolage .premier-piece--large {
display: none;
}
.page-urgence.page-cambriolage .premier-piece--etroite {
display: block;
}
}
.page-urgence.page-cambriolage .premier--sans-piece .premier-cadre {
min-block-size: clamp(30rem, 68svh, 38rem);
}
@media (max-width: 50.5em) {
.page-urgence.page-cambriolage .premier--sans-piece .premier-cadre {
min-block-size: 0;
padding-block-start: var(--espace-4xl);
}
}
}
@layer pages {
@media (max-width: 50.5em) {
.page-urgence.page-cambriolage .s-deroule-note {
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
}
}
@layer pages {
.page-urgence.page-cambriolage .s-fin-objet {
--s-objet-position: 50% 40%;
}
@media (max-width: 50.5em) {
.page-urgence.page-cambriolage .s-deroule-tete {
display: contents;
}
.page-urgence.page-cambriolage .s-deroule-tete > * {
grid-column: 1 / -1;
}
.page-urgence.page-cambriolage .s-deroule-visuel {
order: 1;
margin-block-start: var(--espace-2xl);
}
@media (max-width: 33.99em) {
.page-urgence.page-cambriolage .s-lueur--boite {
--s-lueur-format: 4 / 3;
--s-lueur-cadrage: 100% 45%;
}
}
}
}
@layer pages {
@media (min-width: 50.5625em) {
.page-urgence.page-cambriolage .s-lueur--boite {
--s-lueur-cadrage: 50% 8%;
}
}
}
@layer pages {
.page-ville .s-bref {
row-gap: var(--espace-xl);
}
.page-ville .s-bref .zf-ariane {
grid-column: 1 / -1;
grid-row: 1;
}
.page-ville .s-bref-titre {
grid-column: 1 / span 5;
grid-row: 2;
align-self: start;
max-inline-size: 14ch;
text-wrap: balance;
}
.page-ville .s-bref-reponse {
grid-column: 7 / -1;
grid-row: 2;
max-inline-size: 34ch;
font-size: var(--taille-2);
font-weight: var(--graisse-titre);
line-height: 1.2;
letter-spacing: var(--approche-titre);
text-wrap: pretty;
}
.page-ville .s-bref-faits {
grid-column: 7 / -1;
grid-row: 3;
border-block-end: var(--trait) solid var(--couleur-filet);
}
.page-ville .s-bref-faits li {
padding-block: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-0);
line-height: var(--interligne-texte);
}
.page-ville .s-local-titre {
grid-column: 1 / span 5;
max-inline-size: 15ch;
text-wrap: balance;
}
.page-ville .s-local-corps {
grid-column: 7 / -1;
display: grid;
gap: var(--espace-m);
max-inline-size: 52ch;
font-size: var(--taille-0);
line-height: var(--interligne-texte);
}
.page-ville .s-local-corps .s-source {
color: var(--couleur-encre-douce);
}
.page-ville .s-liste-titre {
margin-block-start: var(--espace-m);
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
font-weight: var(--graisse-forte);
}
.page-ville .s-communes li {
padding-block: var(--espace-xs);
font-size: var(--taille-0);
}
.page-ville .s-voisines {
margin-block-end: 0;
}
.page-ville .s-voisines .zf-villes-liste {
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.page-ville .s-voisines .zf-ville {
min-block-size: 9rem;
}
@media (max-width: 64em) {
.page-ville .s-bref-titre,
.page-ville .s-local-titre {
grid-column: 1 / span 6;
}
.page-ville .s-bref-reponse,
.page-ville .s-bref-faits,
.page-ville .s-local-corps {
grid-column: 1 / -1;
}
.page-ville .s-bref-reponse {
grid-row: 3;
}
.page-ville .s-bref-faits {
grid-row: 4;
}
}
@media (max-width: 50.5em) {
.page-ville .s-bref-titre,
.page-ville .s-local-titre {
grid-column: 1 / -1;
}
.page-ville .s-bref-titre {
grid-row: 2;
}
.page-ville .s-bref-reponse {
font-size: var(--taille-1);
}
.page-ville .s-voisines .zf-villes-liste {
grid-template-columns: minmax(0, 1fr);
}
}
}
@layer pages {
.page-urgence.page-dijon .premier h1 {
max-inline-size: 8em;
text-wrap: wrap;
}
.page-urgence.page-dijon .s-piece--legende .s-piece-figure img {
inline-size: min(100%, 34rem);
}
.page-urgence.page-dijon .s-piece-legende {
display: grid;
gap: var(--espace-2xs);
}
.page-urgence.page-dijon .dijon-parcours {
--s-schema-largeur: 360px;
justify-self: start;
inline-size: 100%;
max-inline-size: calc(360px + var(--espace-xl) * 2);
}
.page-urgence.page-dijon .s-fin-objet {
--s-objet-position: 50% 50%;
--s-objet-echelle: 1.1;
}
.page-urgence.page-dijon .s-consigne-titre {
max-inline-size: 16ch;
}
@media (max-width: 50.5em) {
.page-urgence.page-dijon .s-piece--legende .s-piece-figure {
padding-inline: var(--espace-2xs);
}
.page-urgence.page-dijon .s-piece-legende {
margin-inline: var(--espace-m);
}
}
@media (min-width: 50.5625em) and (max-width: 63.99em) {
.page-urgence.page-dijon .premier h1 {
text-wrap: balance;
}
}
.page-urgence.page-dijon .s-consigne-panneau {
row-gap: var(--espace-xl);
}
.page-urgence.page-dijon .s-consigne-titre {
grid-column: 1 / span 5;
grid-row: 1 / span 3;
align-self: start;
}
.page-urgence.page-dijon .s-consigne-alerte {
grid-column: 7 / -1;
grid-row: 1;
align-self: start;
max-inline-size: 36ch;
}
.page-urgence.page-dijon .s-consigne-gestes {
grid-column: 7 / -1;
grid-row: 2;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.page-urgence.page-dijon .s-consigne-gestes li {
max-inline-size: none;
padding-block: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-0);
line-height: var(--interligne-texte);
}
.page-urgence.page-dijon .s-consigne-suite {
grid-column: 7 / -1;
grid-row: 3;
grid-template-columns: minmax(0, 1fr);
justify-items: start;
margin-block-start: calc(var(--espace-m) - var(--espace-xl));
padding-block-start: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-urgence.page-dijon .s-consigne-suite :is(> div, .lien) {
grid-column: 1;
}
.page-urgence.page-dijon .s-consigne-suite p {
max-inline-size: 52ch;
font-size: var(--taille-0);
line-height: var(--interligne-texte);
}
@media (max-width: 50.5em) {
.page-urgence.page-dijon :is(.s-consigne-titre, .s-consigne-alerte, .s-consigne-gestes, .s-consigne-suite) {
grid-column: 1 / -1;
grid-row: auto;
}
.page-urgence.page-dijon .s-deroule {
display: block;
}
.page-urgence.page-dijon .s-deroule-tete {
display: contents;
}
.page-urgence.page-dijon .s-deroule-tete h2 {
margin-block-end: var(--espace-xl);
}
.page-urgence.page-dijon .dijon-parcours {
position: sticky;
z-index: 1;
inset-block-start: calc(var(--hauteur-entete-tel) + var(--espace-s));
padding-block-end: var(--espace-s);
border-block-end: var(--trait) solid var(--couleur-filet);
background: var(--couleur-fond);
box-shadow: 0 calc(var(--espace-s) * -1) 0 0 var(--couleur-fond);
}
.page-urgence.page-dijon .s-deroule-tete .lien {
display: inline-block;
margin-block-start: var(--espace-l);
}
.page-urgence.page-dijon .s-deroule-etapes {
margin-block-start: var(--espace-xl);
}
}
@media (max-width: 50.5em) and (prefers-reduced-motion: reduce) {
.page-urgence.page-dijon .dijon-parcours {
position: static;
}
}
}
@layer pages {
.page-tarifs .tete-cadre {
min-block-size: 0;
padding-block-start: var(--espace-4xl);
}
.page-tarifs .tete-texte h1 {
max-inline-size: 11ch;
}
.page-tarifs .tete-action {
align-self: end;
}
.tarifs-vitrine {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
row-gap: var(--espace-xl);
margin-block-start: var(--espace-xl);
}
.tarifs-etiquette {
display: grid;
grid-template-rows: auto 1fr;
gap: var(--espace-s);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.tarifs-etiquette .prix-chiffres {
color: var(--couleur-encre);
}
.tarifs-etiquette-detail {
max-inline-size: 30ch;
color: var(--couleur-encre-douce);
font-size: var(--taille-0);
line-height: var(--interligne-chapeau);
}
.page-tarifs .tarifs-fin .s-fin-objet {
--s-objet-position: 50% 23%;
background: var(--couleur-nuit);
}
.page-tarifs .tarifs-fin .s-fin-titre {
max-inline-size: 22ch;
text-wrap: balance;
}
.page-tarifs .tarifs-fin .bouton {
max-inline-size: 100%;
white-space: normal;
text-wrap: balance;
}
@media (max-width: 64em) {
.tarifs-vitrine {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 50.5em) {
.page-tarifs .tete-cadre:has(.tete-objet) {
--objet-largeur: min(calc((100vw - 2 * var(--marge)) * 0.62), 16rem);
row-gap: var(--espace-l);
padding-block-start: calc(var(--objet-largeur) * 0.6);
}
.page-tarifs .tete-objet {
inset-block-start: calc(var(--objet-largeur) * -0.06);
}
.page-tarifs .tete-action {
display: none;
}
.tarifs-vitrine {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--espace-l);
row-gap: var(--espace-l);
margin-block-start: 0;
}
.tarifs-etiquette:first-child {
grid-column: 1 / -1;
}
.tarifs-etiquette {
gap: var(--espace-xs);
padding-block-start: var(--espace-m);
}
.tarifs-etiquette-detail {
font-size: max(15px, var(--taille--1));
}
}
.page-tarifs .s-nuit-frise.facsimile {
max-inline-size: none;
container-type: normal;
}
}
@layer pages {
.page-urgence :is(.volet, .bande-dedans, .fin-dedans) {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
}
.page-urgence .volet {
margin-block-start: var(--espace-section);
padding-inline: var(--bord);
}
.page-urgence :is(.bande, .fin) {
margin: var(--espace-section) var(--marge) 0;
border-radius: var(--rayon-cadre);
}
.page-urgence :is(.bande-dedans, .fin-dedans) {
padding: var(--espace-4xl) var(--gouttiere);
}
.page-urgence .premier-piece {
position: absolute;
inset-block-start: 0;
inset-inline-end: 1%;
inline-size: min(58%, 56rem);
block-size: auto;
}
.page-urgence .premier h1 {
max-inline-size: 9.2em;
text-wrap: balance;
}
.page-urgence .premier-chapeau {
text-wrap: balance;
}
.page-urgence main :is(p, li, dd) {
text-wrap: pretty;
}
.page-urgence main :is(h2, h3) {
text-wrap: balance;
}
.page-urgence .premier-note {
max-inline-size: 30ch;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
.page-urgence .volet-titre {
grid-column: 1 / span 6;
align-self: start;
}
.page-urgence .volet-texte {
grid-column: 8 / span 5;
display: grid;
align-content: start;
gap: var(--espace-m);
color: var(--couleur-encre-douce);
}
.page-urgence .volet-texte p {
max-inline-size: var(--mesure-texte);
}
.page-urgence .volet-texte p:first-child {
color: var(--couleur-encre);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.page-urgence .ordre-tete {
grid-column: 1 / span 5;
align-self: start;
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
display: grid;
gap: var(--espace-2xl);
}
.page-urgence .prix-bloc {
display: grid;
justify-items: start;
gap: var(--espace-m);
padding: var(--espace-xl);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
}
.page-urgence .prix-bloc .prix-chiffres {
max-inline-size: 5.3em;
}
.page-urgence .prix-bloc-detail {
max-inline-size: 42ch;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: var(--interligne-chapeau);
}
.page-urgence .attente-tete {
display: contents;
}
.page-urgence .attente h2 {
grid-column: 1 / span 6;
align-self: start;
max-inline-size: 14ch;
}
.page-urgence .consigne-danger {
grid-column: 8 / span 5;
align-self: start;
padding: var(--espace-xl);
border-radius: var(--rayon-m);
background: var(--couleur-surface);
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
line-height: 1.35;
letter-spacing: calc(var(--approche-titre) / 3);
}
.page-urgence .gestes {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--espace-xl) var(--ecart-colonnes);
margin-block-start: var(--espace-3xl);
}
.page-urgence .gestes li {
max-inline-size: 40ch;
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-encre);
}
.page-urgence .bande-titre {
grid-column: 1 / span 6;
grid-row: 1 / span 2;
align-self: start;
max-inline-size: 9em;
text-wrap: balance;
font-size: var(--taille-5);
line-height: var(--interligne-affichage);
letter-spacing: var(--approche-affichage);
}
.page-urgence .duo-prix {
grid-column: 8 / span 5;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
}
.page-urgence .duo-prix > div {
display: grid;
grid-template-rows: auto 1fr;
gap: var(--espace-m);
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
}
.page-urgence .duo-prix dt {
font-weight: var(--graisse-titre);
}
.page-urgence .duo-prix dd {
max-inline-size: 5.3em;
}
.page-urgence .bande-texte {
grid-column: 8 / span 5;
display: grid;
align-content: start;
gap: var(--espace-m);
margin-block-start: var(--espace-3xl);
color: var(--couleur-encre-douce);
}
.page-urgence .bande-texte p:first-child {
color: var(--couleur-encre);
}
.page-urgence .bande-texte .lien {
justify-self: start;
}
.page-urgence .qui-vient-texte {
grid-column: 1 / span 5;
display: grid;
justify-items: start;
align-content: start;
gap: var(--espace-l);
}
.page-urgence .qui-vient-texte p {
max-inline-size: 46ch;
color: var(--couleur-encre-douce);
}
.page-urgence .faq-titre {
grid-column: 1 / span 5;
align-self: start;
max-inline-size: 15ch;
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
}
.page-urgence .suite-titre {
grid-column: 1 / span 6;
margin-block-end: var(--espace-2xl);
}
.page-urgence .suite-liens {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
}
.page-urgence .suite-liens a {
display: flex;
align-items: center;
min-block-size: calc(var(--bouton-hauteur) * 1.6);
padding-block: var(--espace-s);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-1);
font-weight: var(--graisse-titre);
line-height: 1.3;
letter-spacing: calc(var(--approche-titre) / 3);
text-decoration-line: underline;
text-decoration-color: transparent;
text-underline-offset: 0.25em;
transition: text-decoration-color var(--duree-courte) var(--courbe-sortie);
}
.page-urgence .suite-liens a:hover {
text-decoration-color: currentColor;
}
.page-urgence .fin {
background: var(--couleur-surface);
}
.page-urgence .fin-dedans {
align-items: end;
row-gap: var(--espace-2xl);
}
.page-urgence .fin-titre {
grid-column: 1 / span 7;
max-inline-size: 11ch;
font-size: var(--taille-5);
line-height: var(--interligne-affichage);
letter-spacing: var(--approche-affichage);
}
.page-urgence .fin-action {
grid-column: 9 / span 4;
display: grid;
justify-items: start;
gap: var(--espace-l);
}
.page-urgence .fin-texte {
color: var(--couleur-encre-douce);
}
@media (max-width: 50.5em) {
.page-urgence :is(.volet, .bande-dedans, .fin-dedans) > *,
.page-urgence :is(.consigne-danger, .attente h2) {
grid-column: 1 / -1;
grid-row: auto;
}
.page-urgence :is(.bande-dedans, .fin-dedans) {
padding: var(--bande-tel);
}
.page-urgence .premier-piece {
inset-inline: 50% auto;
inline-size: min(144%, 34rem);
max-inline-size: none;
translate: -50% 0;
}
.page-urgence .premier-action {
grid-template-columns: minmax(0, 1fr);
}
.page-urgence .premier-note {
grid-column: 1;
}
.page-urgence .ordre-tete {
position: static;
gap: var(--espace-xl);
}
.page-urgence :is(.volet-texte, .deroule-etapes, .questions-liste, .consigne-danger, .duo-prix) {
margin-block-start: var(--espace-2xl);
}
.page-urgence .faq-titre {
position: static;
}
.page-urgence .prix-bloc {
padding: var(--espace-l);
}
.page-urgence .gestes {
grid-template-columns: minmax(0, 1fr);
gap: var(--espace-l);
margin-block-start: var(--espace-2xl);
}
.page-urgence .duo-prix {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--espace-xl);
}
.page-urgence .bande-texte {
margin-block-start: var(--espace-2xl);
}
.page-urgence .suite-titre {
margin-block-end: var(--espace-l);
}
.page-urgence .suite-liens {
grid-template-columns: minmax(0, 1fr);
border-block-end: var(--trait) solid var(--couleur-filet);
}
.page-urgence .fin-action {
justify-items: stretch;
}
}
}
@layer pages {
.page-porte-claquee .s-fin-objet {
--s-objet-position: 50% 50%;
--s-objet-echelle: 1.2;
}
@media (max-width: 50.5em) {
.page-porte-claquee .s-fin-objet {
--s-objet-echelle: 1.1;
}
}
}
@layer pages {
:is(.page-porte-claquee, .page-cle-cassee, .page-cambriolage) .s-consigne-panneau {
row-gap: var(--espace-xl);
background: var(--couleur-fond);
}
:is(.page-porte-claquee, .page-cle-cassee, .page-cambriolage) .s-consigne-titre {
grid-column: 1 / span 5;
grid-row: 1 / span 2;
align-self: start;
}
:is(.page-porte-claquee, .page-cle-cassee, .page-cambriolage) .s-consigne-alerte {
grid-column: 7 / -1;
grid-row: 1;
align-self: start;
max-inline-size: 36ch;
}
:is(.page-porte-claquee, .page-cle-cassee, .page-cambriolage) .s-consigne-gestes {
grid-column: 7 / -1;
grid-row: 2;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
:is(.page-porte-claquee, .page-cle-cassee, .page-cambriolage) .s-consigne-gestes li {
max-inline-size: 52ch;
padding-block: var(--espace-m);
border-block-start: var(--trait) solid var(--couleur-filet);
font-size: var(--taille-0);
line-height: var(--interligne-texte);
}
:is(.page-porte-claquee, .page-cle-cassee, .page-cambriolage) .s-consigne-gestes li:last-child {
padding-block-end: 0;
}
@media (max-width: 50.5em) {
:is(.page-porte-claquee, .page-cle-cassee, .page-cambriolage) :is(.s-consigne-titre, .s-consigne-alerte, .s-consigne-gestes) {
grid-column: 1 / -1;
grid-row: auto;
}
:is(.page-porte-claquee, .page-cle-cassee, .page-cambriolage) .s-consigne-gestes {
gap: 0;
}
:is(.page-cle-cassee, .page-cambriolage) .s-lueur-objet {
order: 1;
margin: var(--espace-s) calc(var(--espace-l) * -1) calc(var(--espace-2xl) * -1);
mask-image: linear-gradient(to bottom, transparent, var(--couleur-nuit) 22%);
}
}
}
@layer pages {
.zf-tete,
.zf-bareme {
padding-inline: var(--marge);
}
.zf-tete {
padding-block-start: var(--espace-m);
}
.zf-cadre,
.zf-bareme-cadre {
max-inline-size: var(--mesure-page);
margin-inline: auto;
border-radius: var(--rayon-cadre);
background: radial-gradient(55% 75% at 78% 45%, color-mix(in oklch, var(--couleur-accent) 16%, var(--couleur-nuit)), var(--couleur-nuit) 72%);
color: var(--couleur-encre);
}
.zf-cadre {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
column-gap: var(--espace-2xl);
align-items: center;
padding: var(--espace-3xl);
}
.zf-texte {
min-inline-size: 0;
display: grid;
gap: var(--espace-l);
align-content: center;
}
.zf-ariane ol {
display: flex;
flex-wrap: wrap;
gap: var(--espace-2xs);
margin: 0;
padding: 0;
list-style: none;
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
}
.zf-ariane li + li::before {
content: "/";
margin-inline-end: var(--espace-2xs);
color: var(--couleur-accent);
}
.zf-ariane a {
display: inline-flex;
align-items: center;
min-block-size: 44px;
color: inherit;
text-underline-offset: .25em;
}
.zf-texte h1 {
max-inline-size: 15ch;
font-size: var(--taille-5);
line-height: var(--interligne-affichage);
letter-spacing: var(--approche-affichage);
text-wrap: balance;
}
.zf-chapeau {
max-inline-size: 44ch;
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.zf-action {
display: grid;
justify-items: start;
gap: var(--espace-m);
margin-block-start: var(--espace-s);
}
.zf-prix-ligne {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
}
.zf-prix-court {
color: var(--couleur-encre);
font-weight: var(--graisse-forte);
white-space: nowrap;
}
.zf-carte {
display: grid;
gap: var(--espace-s);
margin: 0;
}
.zf-carte svg {
inline-size: 100%;
block-size: auto;
overflow: visible;
}
.zf-contour {
fill: color-mix(in oklch, var(--couleur-sur-nuit) 4%, transparent);
stroke: color-mix(in oklch, var(--couleur-sur-nuit) 55%, transparent);
stroke-width: 1.2;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.zf-halo {
fill: color-mix(in oklch, var(--couleur-accent) 14%, transparent);
transition: fill var(--duree-courte) var(--courbe-douce);
}
.zf-cible {
fill: transparent;
}
.zf-pastille {
fill: var(--couleur-accent);
}
.zf-point text {
fill: var(--couleur-encre);
font-family: var(--police-texte);
font-size: 21px;
font-weight: var(--graisse-forte);
}
@media (min-width: 50.5em) and (max-width: 75em) {
.zf-point text {
font-size: 32px;
}
}
.zf-point:focus-visible {
outline: none;
}
.zf-point:focus-visible .zf-halo,
.zf-point:hover .zf-halo {
fill: color-mix(in oklch, var(--couleur-accent) 40%, transparent);
}
.zf-point:focus-visible .zf-halo {
stroke: var(--couleur-focus);
stroke-width: 3;
}
.zf-legende {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--espace-2xs) var(--espace-m);
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
}
.zf-credit {
opacity: .75;
}
.zf-villes,
.zf-demande {
display: grid;
grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
column-gap: var(--ecart-colonnes);
max-inline-size: calc(var(--mesure-page) + 2 * var(--marge));
margin: var(--espace-section) auto 0;
padding-inline: var(--bord);
}
.zf-villes-tete {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
row-gap: var(--espace-m);
margin-block-end: var(--espace-xl);
}
.zf-villes-tete h2 {
grid-column: 1 / span 5;
max-inline-size: 14ch;
font-size: var(--taille-3);
}
.zf-villes-texte {
grid-column: 7 / span 6;
align-self: end;
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.zf-villes-liste {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--espace-s);
margin: 0;
padding: 0;
list-style: none;
}
.zf-ville {
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--espace-xs);
block-size: 100%;
min-block-size: 11rem;
padding: var(--espace-l);
border-radius: var(--rayon-cadre);
background: var(--couleur-surface);
color: var(--couleur-encre);
text-decoration: none;
transition: background-color var(--duree-courte) var(--courbe-douce);
}
.zf-ville-nom {
font-size: var(--taille-1);
font-weight: var(--graisse-forte);
line-height: 1.2;
}
.zf-ville-ligne {
color: var(--couleur-encre-douce);
font-size: var(--taille--1);
line-height: 1.45;
}
.zf-fleche {
inline-size: 1.25rem;
block-size: 1.25rem;
fill: none;
stroke: var(--couleur-accent-fonce);
stroke-width: 1.6;
}
@media (hover: hover) and (pointer: fine) {
.zf-ville:hover {
background: var(--couleur-filet);
}
}
.zf-bareme {
margin-block-start: var(--espace-section);
}
.zf-bareme-cadre {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-areas: "titre prix" "titre texte";
gap: var(--espace-l) var(--espace-2xl);
padding: var(--espace-3xl);
}
.zf-bareme-cadre h2 {
grid-area: titre;
max-inline-size: 12ch;
font-size: var(--taille-3);
}
.zf-bareme-prix {
grid-area: prix;
display: grid;
gap: var(--espace-xs);
}
.zf-bareme-chiffre {
font-family: var(--police-chiffres);
font-weight: var(--graisse-chiffres);
font-size: clamp(2.25rem, 1rem + 4vw, 4.5rem);
line-height: var(--interligne-prix);
letter-spacing: var(--approche-prix);
color: var(--couleur-accent);
white-space: nowrap;
font-variant-numeric: lining-nums;
}
.zf-bareme-detail {
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
}
.zf-bareme-texte {
grid-area: texte;
display: grid;
justify-items: start;
gap: var(--espace-s);
max-inline-size: 48ch;
padding-block-start: var(--espace-l);
border-block-start: var(--trait) solid var(--couleur-filet);
color: var(--couleur-encre-douce);
}
.zf-demande {
row-gap: var(--espace-xl);
align-items: start;
}
.zf-demande-texte {
grid-column: 1 / span 5;
display: grid;
gap: var(--espace-l);
position: sticky;
inset-block-start: calc(var(--hauteur-entete) + var(--espace-xl));
}
.zf-demande-texte h2 {
max-inline-size: 14ch;
font-size: var(--taille-3);
}
.zf-demande-texte p {
max-inline-size: 42ch;
color: var(--couleur-encre-douce);
font-size: var(--taille-1);
line-height: var(--interligne-chapeau);
}
.zf-demande > .demande-carte {
grid-column: 7 / span 6;
}
@media (max-width: 64em) {
.zf-cadre {
padding: var(--espace-2xl);
}
.zf-villes-liste {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.zf-demande > .demande-carte {
grid-column: 6 / span 7;
}
.zf-demande-texte {
grid-column: 1 / span 5;
}
}
@media (max-width: 50.5em) {
.zf-tete,
.zf-bareme {
padding-inline: var(--espace-s);
}
.zf-cadre {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--espace-xl);
padding: var(--espace-xl) var(--espace-l);
}
.zf-texte h1 {
font-size: clamp(2.125rem, 1.4rem + 3.6vw, 2.75rem);
}
.zf-action .bouton {
justify-self: stretch;
white-space: normal;
text-align: center;
}
.zf-prix-detail {
display: block;
}
.zf-carte {
inline-size: min(100%, 24rem);
justify-self: center;
}
.zf-point text {
font-size: 33px;
}
.zf-legende {
flex-direction: column;
}
.zf-villes-tete,
.zf-demande {
grid-template-columns: minmax(0, 1fr);
}
.zf-villes-tete h2,
.zf-villes-texte,
.zf-demande-texte,
.zf-demande > .demande-carte {
grid-column: 1;
}
.zf-demande-texte {
position: static;
}
.zf-villes-liste {
grid-template-columns: minmax(0, 1fr);
gap: var(--espace-xs);
}
.zf-ville {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
min-block-size: 0;
column-gap: var(--espace-m);
padding: var(--espace-m) var(--espace-l);
}
.zf-fleche {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
}
.zf-bareme-cadre {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "titre" "prix" "texte";
padding: var(--espace-xl) var(--espace-l);
}
.zf-bareme-chiffre {
font-size: min(2.75rem, 7.4vw);
}
}
@media (prefers-reduced-motion: reduce) {
.zf-ville,
.zf-halo {
transition: none;
}
.zf-demande-texte {
position: static;
}
}
}
@layer mouvement {
.js-mouvement [data-apparition]:not(.vu),
.js-mouvement [data-decoupe]:not(.vu):not(.decoupe),
.js-mouvement [data-decalage]:not([data-decoupe]):not(.vu) > * {
opacity: 0;
}
.js-mouvement [data-apparition="rideau"]:not(.vu) {
opacity: 1;
clip-path: inset(0 100% 0 0);
}
.js-mouvement [data-apparition="masque"]:not(.vu) {
opacity: 1;
clip-path: inset(100% 0 0 0);
}
.js-mouvement [data-decalage][data-apparition]:not(.vu) {
opacity: 1;
clip-path: none;
}
.ligne,
.mot {
display: inline-block;
overflow: clip;
overflow-clip-margin: 0.08em;
padding-block-end: 0.12em;
margin-block-end: -0.12em;
vertical-align: top;
}
.ligne {
display: block;
}
.ligne-dedans,
.mot-dedans {
display: inline-block;
}
.ligne-dedans {
display: block;
}
.js-mouvement [data-decoupe].decoupe:not(.vu) :is(.ligne-dedans, .mot-dedans) {
translate: 0 110%;
}
@keyframes secours-apparition {
to {
opacity: 1;
clip-path: none;
translate: none;
}
}
.js-mouvement:not(.mouvement-pret) :is([data-apparition], [data-decoupe]):not(.vu),
.js-mouvement:not(.mouvement-pret) [data-decalage]:not(.vu) > * {
animation: secours-apparition 1ms 2.5s forwards;
}
@supports (animation-timeline: view()) {
@keyframes parallaxe {
from {
translate: 0 calc(var(--parallaxe, 0.1) * 50vh);
}
to {
translate: 0 calc(var(--parallaxe, 0.1) * -50vh);
}
}
.js-mouvement .parallaxe-css {
animation: parallaxe linear both;
animation-timeline: view();
}
}
@keyframes page-sort {
to {
opacity: 0;
}
}
@keyframes page-entre {
from {
opacity: 0;
translate: 0 0.75rem;
}
}
[data-fil].fil-pret {
--fil-teinte: var(--couleur-accent-fonce);
--fil-montee: 0.5rem;
--fil-lecture: 40vh;
position: relative;
view-timeline-name: --fil;
}
.sombre [data-fil].fil-pret {
--fil-teinte: var(--couleur-accent);
}
[data-fil].fil-pret::before {
content: "";
position: absolute;
inset-block-start: var(--fil-haut);
inset-inline-start: calc(var(--fil-x) - var(--trait) / 2);
inline-size: var(--trait);
block-size: var(--fil-long);
background-image: var(--fil-degrade);
pointer-events: none;
}
[data-fil].fil-pret > li {
position: relative;
view-timeline-name: --etape;
}
[data-fil].fil-pret > li::after {
content: var(--fil-contenu);
position: absolute;
grid-area: 1 / 1;
inset-block-start: 0;
inset-inline-start: 0;
color: var(--fil-teinte);
font-size: var(--fil-chiffre-taille);
font-weight: var(--fil-chiffre-graisse);
line-height: var(--fil-chiffre-interligne);
letter-spacing: var(--fil-chiffre-approche);
font-variant-numeric: tabular-nums;
pointer-events: none;
}
@supports (content: "x" / "") {
[data-fil].fil-pret > li::after {
content: var(--fil-contenu) / "";
}
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.js-mouvement [data-fil].fil-pret:not(.fil-fini)::before {
animation: fil-trace linear both;
animation-timeline: --fil;
animation-range:
cover calc(var(--fil-lecture) + var(--fil-haut))
cover calc(var(--fil-lecture) + var(--fil-haut) + var(--fil-long));
}
.js-mouvement [data-fil].fil-pret:not(.fil-fini) > li::before,
.js-mouvement [data-fil].fil-pret:not(.fil-fini) > li > * {
animation: fil-pose var(--courbe-sortie) both;
animation-timeline: --etape;
animation-range:
cover calc(var(--fil-lecture) + var(--fil-repere) - var(--fil-demi) - 6rem)
cover calc(var(--fil-lecture) + var(--fil-repere) - var(--fil-demi));
}
.js-mouvement [data-fil].fil-pret:not(.fil-fini) > li::after {
animation: fil-pose var(--courbe-sortie) both, fil-allume linear both;
animation-timeline: --etape, --etape;
animation-range:
cover calc(var(--fil-lecture) + var(--fil-repere) - var(--fil-demi) - 6rem)
cover calc(var(--fil-lecture) + var(--fil-repere) - var(--fil-demi)),
cover calc(var(--fil-lecture) + var(--fil-repere) - var(--fil-demi))
cover calc(var(--fil-lecture) + var(--fil-repere));
}
}
.js-mouvement [data-fil].fil-pas-a-pas:not(.fil-fini)::before {
clip-path: inset(0 0 calc(100% - var(--fil-avance, 0px)) 0);
transition: clip-path calc(450ms * var(--v)) var(--courbe-sortie);
}
.js-mouvement [data-fil].fil-pas-a-pas:not(.fil-fini) > li::before,
.js-mouvement [data-fil].fil-pas-a-pas:not(.fil-fini) > li > * {
transition: translate calc(450ms * var(--v)) var(--courbe-sortie);
}
.js-mouvement [data-fil].fil-pas-a-pas:not(.fil-fini) > li::after {
transition:
translate calc(450ms * var(--v)) var(--courbe-sortie),
opacity calc(300ms * var(--v)) linear calc(150ms * var(--v));
}
.js-mouvement [data-fil].fil-pas-a-pas:not(.fil-fini) > li:not(.fil-atteinte)::before,
.js-mouvement [data-fil].fil-pas-a-pas:not(.fil-fini) > li:not(.fil-atteinte)::after,
.js-mouvement [data-fil].fil-pas-a-pas:not(.fil-fini) > li:not(.fil-atteinte) > * {
translate: 0 var(--fil-montee);
}
.js-mouvement [data-fil].fil-pas-a-pas:not(.fil-fini) > li:not(.fil-atteinte)::after {
opacity: 0;
}
}
@keyframes fil-trace {
from {
clip-path: inset(0 0 100% 0);
}
to {
clip-path: inset(0);
}
}
@keyframes fil-pose {
from {
translate: 0 var(--fil-montee);
}
to {
translate: none;
}
}
@keyframes fil-allume {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
[data-apparition],
[data-decoupe],
[data-decalage] > * {
opacity: 1 !important;
clip-path: none !important;
translate: none !important;
}
video[data-boucle],
.boucle-bouton {
display: none !important;
}
}
}