/*!
 * site.css — assemble par build.py (voir PAQUETS). NE PAS EDITER ICI :
 * les sources sont themes/<theme>/assets/<nom>, ce fichier est regenere.
 * Ordre = ordre de la cascade :
 *   1. vendor/dznav.css     Composant de navigation (brique DZNav, reutilisable)
 *   2. style.css            Theme artisanal — la feuille du site
 *   3. reglages.css         Reglages de mise en scene, generes depuis content/pages.json
 */

/* ======================== [1/3] vendor/dznav.css ========================
   Composant de navigation (brique DZNav, reutilisable) */
.dznav,
.dznav__brand,
.dznav-top,
.dznav-progress {
--dznav-accent: currentColor;
--dznav-bg: transparent;
--dznav-text: currentColor;
--dznav-text-muted: currentColor;
--dznav-border: rgba(128, 128, 128, .25);
--dznav-radius: 4px;
--dznav-font: inherit;
--dznav-gauge-h: 2px;
--dznav-z: 900;
--dznav-gap: .25rem;
--dznav-pad-x: .75rem;
--dznav-pad-y: .65rem;
--dznav-speed: .2s;
}
:root { --dznav-anchor-offset: 0px; }
[id] { scroll-margin-top: var(--dznav-anchor-offset); }
@media (prefers-reduced-motion: reduce) {
.dznav, .dznav * { scroll-behavior: auto; }
}
.dznav {
display: flex;
align-items: stretch;
background: var(--dznav-bg);
font-family: var(--dznav-font);
z-index: var(--dznav-z);
}
.dznav__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: var(--dznav-gap);
}
.dznav__item { margin: 0; }
.dznav__link {
position: relative;
display: block;
padding: var(--dznav-pad-y) var(--dznav-pad-x);
color: var(--dznav-text-muted);
text-decoration: none;
white-space: nowrap;
transition: color var(--dznav-speed), background-color var(--dznav-speed);
}
.dznav__link:hover { color: var(--dznav-accent); }
.dznav__link:focus-visible { outline: 2px solid var(--dznav-accent); outline-offset: -2px; }
.dznav__link.is-current { color: var(--dznav-accent); }
.dznav__toggle {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
padding: 0 .6rem;
background: transparent;
border: none;
color: var(--dznav-text-muted);
font: inherit;
font-size: 1rem;
line-height: 1;
cursor: pointer;
transition: color var(--dznav-speed), background-color var(--dznav-speed);
}
.dznav__toggle:hover { color: var(--dznav-accent); }
.dznav__toggle:focus-visible { outline: 2px solid var(--dznav-accent); outline-offset: -2px; }
.dznav--sur-sombre .dznav__toggle,
.dznav__toggle.dznav--sur-sombre { color: var(--dznav-contrast-alt, #fff); }
.dznav--horizontal { flex-direction: row; min-width: 0; }
.dznav--horizontal .dznav__list {
flex-direction: row;
flex: 1;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.dznav--mesure, .dznav--mesure * { transition: none !important; animation: none !important; }
.dznav--horizontal .dznav__list::-webkit-scrollbar { display: none; }
.dznav--horizontal .dznav__toggle { border-right: 1px solid var(--dznav-border); }
.dznav--vertical { flex-direction: row; align-items: flex-start; }
.dznav--vertical .dznav__list {
flex-direction: column;
min-width: max-content;
gap: 0;
max-height: calc(100vh - var(--dznav-panel-top, var(--dznav-anchor-offset)) - 1rem);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--dznav-border) transparent;
}
.dznav--vertical .dznav__list::-webkit-scrollbar { width: 4px; }
.dznav--vertical .dznav__list::-webkit-scrollbar-thumb { background: var(--dznav-border); border-radius: 2px; }
.dznav--vertical .dznav__link { padding: .7rem 1.1rem; }
.dznav--vertical:not(.dznav--open) .dznav__list { display: none; }
.dznav--overlay.dznav--vertical {
position: fixed;
top: var(--dznav-panel-top, var(--dznav-anchor-offset, 0));
width: max-content;
max-width: 100vw;
background: transparent;
border: none;
z-index: calc(var(--dznav-z) + 100);
}
.dznav--overlay.dznav--vertical[data-dznav-side="left"] { left: var(--dznav-panel-left, 0); }
.dznav--overlay.dznav--vertical[data-dznav-side="right"] { right: var(--dznav-panel-right, 0); flex-direction: row-reverse; }
.dznav--overlay.dznav--vertical .dznav__list {
background: var(--dznav-bg);
border: 1px solid var(--dznav-border);
border-radius: var(--dznav-radius);
box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
padding: .2rem 0;
}
.dznav--overlay.dznav--vertical .dznav__toggle {
background: var(--dznav-bg);
border: 1px solid var(--dznav-border);
border-radius: var(--dznav-radius);
height: 2.4rem;
align-self: flex-start;
}
.dznav__item--sous { display: flex; align-items: stretch; position: relative; }
.dznav__item--sous > .dznav__link { flex: 1 1 auto; }
.dznav__sous-toggle {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 1.9rem;
padding: 0 .4rem;
background: transparent;
border: none;
color: var(--dznav-text-muted);
font-size: 0; 
line-height: 1;
cursor: pointer;
}
.dznav__sous-toggle:hover { color: var(--dznav-accent); }
.dznav__sous-toggle:focus-visible { outline: 2px solid var(--dznav-accent); outline-offset: -2px; }
.dznav__sous-toggle::before {
content: ""; width: .5rem; height: .5rem;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: translateY(-.15rem) rotate(45deg);
transition: transform var(--dznav-speed);
}
.dznav__item--sous.is-open > .dznav__sous-toggle::before { transform: translateY(.05rem) rotate(225deg); }
.dznav__sous-liste {
list-style: none;
margin: 0;
padding: 0;
}
.dznav__item--sous:not(.is-open) > .dznav__sous-liste { display: none; }
.dznav__sous-lien {
display: block;
padding: var(--dznav-pad-y) var(--dznav-pad-x);
color: var(--dznav-text-muted);
text-decoration: none;
white-space: nowrap;
transition: color var(--dznav-speed), background-color var(--dznav-speed);
}
.dznav__sous-lien:hover { color: var(--dznav-accent); }
.dznav__sous-lien:focus-visible { outline: 2px solid var(--dznav-accent); outline-offset: -2px; }
.dznav--horizontal .dznav__item--sous.is-open > .dznav__sous-liste {
position: fixed;
width: max-content;
background: var(--dznav-bg);
border: 1px solid var(--dznav-border);
border-radius: var(--dznav-radius);
box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
padding: .2rem 0;
z-index: calc(var(--dznav-z) + 50);
}
.dznav--vertical .dznav__item--sous { flex-wrap: wrap; }
.dznav--vertical .dznav__item--sous > .dznav__sous-liste {
flex: 1 0 100%;
contain: inline-size;
width: 0;
min-width: 100%;
}
.dznav--vertical .dznav__sous-lien {
padding-left: calc(var(--dznav-pad-x) + 1rem);
white-space: normal;
}
.dznav[data-dznav-spy="progress"] .dznav__link::after,
.dznav__brand[data-dznav-spy="progress"]::after,
.dznav__brand[data-dznav-spy="underline"]::after,
.dznav__brand[data-dznav-spy="fill"]::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: var(--dznav-gauge-h);
background: var(--dznav-accent);
transform: scaleX(var(--dznav-part, 0));
transform-origin: left;
}
.dznav__brand { position: relative; }
.dznav__brand[data-dznav-orientation="vertical"][data-dznav-spy="progress"]::after,
.dznav__brand[data-dznav-orientation="vertical"][data-dznav-spy="underline"]::after,
.dznav__brand[data-dznav-orientation="vertical"][data-dznav-spy="fill"]::after {
left: calc(-1 * (var(--dznav-gauge-h) + var(--dznav-gauge-gap, .5rem)));
right: auto; top: 0; bottom: 0;
width: var(--dznav-gauge-h); height: auto;
transform: scaleY(var(--dznav-part, 0));
transform-origin: top;
}
.dznav__brand[data-dznav-spy="progress"],
.dznav__brand[data-dznav-spy="underline"],
.dznav__brand[data-dznav-spy="fill"] {
padding-bottom: calc(var(--dznav-gauge-h) + var(--dznav-gauge-gap, .5rem) / 2);
}
.dznav__brand.is-current { color: var(--dznav-accent); }
.dznav--vertical[data-dznav-spy="progress"] .dznav__link::after {
left: 0; right: auto; top: 0; bottom: 0;
width: var(--dznav-gauge-h); height: auto;
transform: scaleY(var(--dznav-part, 0));
transform-origin: top;
}
.dznav[data-dznav-spy="underline"] .dznav__link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: var(--dznav-gauge-h);
background: var(--dznav-accent);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--dznav-speed) ease;
}
.dznav[data-dznav-spy="underline"] .dznav__link.is-current::after,
.dznav[data-dznav-spy="underline"] .dznav__link:hover::after { transform: scaleX(1); }
.dznav--vertical[data-dznav-spy="underline"] .dznav__link::after {
left: 0; right: auto; top: 0; bottom: 0;
width: var(--dznav-gauge-h); height: auto;
transform: scaleY(0);
}
.dznav--vertical[data-dznav-spy="underline"] .dznav__link.is-current::after,
.dznav--vertical[data-dznav-spy="underline"] .dznav__link:hover::after { transform: scaleY(1); }
.dznav[data-dznav-spy="fill"] .dznav__link {
background-image: linear-gradient(to right, var(--dznav-accent) 0 100%);
background-repeat: no-repeat;
background-size: calc(var(--dznav-part, 0) * 100%) 100%;
border-radius: var(--dznav-radius);
}
.dznav[data-dznav-spy="fill"] .dznav__link.is-current { color: var(--dznav-bg, #fff); mix-blend-mode: normal; }
.dznav--vertical[data-dznav-spy="fill"] .dznav__link {
background-size: 100% calc(var(--dznav-part, 0) * 100%);
background-position: left top;
}
.dznav[data-dznav-spy="dot"] .dznav__link { padding-left: calc(var(--dznav-pad-x) + .8rem); }
.dznav[data-dznav-spy="dot"] .dznav__link::before {
content: "";
position: absolute;
left: calc(var(--dznav-pad-x) * .4);
top: 50%;
width: .45rem; height: .45rem;
margin-top: -.225rem;
border-radius: 50%;
background: var(--dznav-accent);
opacity: 0;
transform: scale(.4);
transition: opacity var(--dznav-speed), transform var(--dznav-speed);
}
.dznav[data-dznav-spy="dot"] .dznav__link.is-current::before { opacity: 1; transform: scale(1); }
.dznav[data-dznav-spy="glow"] .dznav__link.is-current { font-weight: 700; }
.dznav-progress {
--dznav-read: 0;
--dznav-progress-h: 3px;
height: var(--dznav-progress-h);
background: var(--dznav-border);
overflow: hidden;
pointer-events: none;
}
.dznav-progress[data-position="top"],
.dznav-progress[data-position="bottom"] {
position: fixed;
left: 0; right: 0;
z-index: calc(var(--dznav-z) + 200);
}
.dznav-progress[data-position="top"] { top: 0; }
.dznav-progress[data-position="bottom"] { bottom: 0; }
.dznav-progress[data-position="nav"] {
position: absolute;
left: 0; right: 0; bottom: 0;
}
.dznav-progress__fill {
display: block;
height: 100%;
background: var(--dznav-accent);
transform: scaleX(var(--dznav-read, 0));
transform-origin: left;
}
.dznav-top {
--dznav-top-size: 46px;
--dznav-read: 0;
position: fixed;
z-index: calc(var(--dznav-z) + 150);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
width: var(--dznav-top-size);
height: var(--dznav-top-size);
padding: 0;
background: var(--dznav-accent);
color: #fff;
border: 1px solid rgba(255, 255, 255, .22);
font: inherit;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: background-color var(--dznav-speed) ease, transform var(--dznav-speed) ease;
}
.dznav-top:hover { transform: translateY(-2px); }
.dznav-top:focus-visible { outline: 2px solid var(--dznav-accent); outline-offset: 3px; }
.dznav-top__label { font-size: .8rem; }
.dznav-top[data-shape="circle"] { border-radius: 50%; }
.dznav-top[data-shape="square"] { border-radius: var(--dznav-radius); }
.dznav-top[data-shape="pill"] { width: auto; border-radius: 999px; padding: 0 1rem; }
.dznav-top[data-shape="bare"] {
background: transparent;
color: var(--dznav-accent);
border: none;
font-size: 1.6rem;
}
.dznav-top[data-position="bottom-right"] { right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2.2rem); }
.dznav-top[data-position="bottom-left"] { left: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2.2rem); }
.dznav-top[data-position="bottom-center"] { left: 50%; transform: translateX(-50%); bottom: clamp(1rem, 3vw, 2.2rem); }
.dznav-top[data-position="bottom-center"]:hover { transform: translateX(-50%) translateY(-2px); }
.dznav-top[data-ring="1"]::before {
content: "";
position: absolute;
inset: calc(var(--dznav-ring-gap, 4px) * -1 - var(--dznav-ring-w, 3px));
border-radius: 50%;
background: conic-gradient(
var(--dznav-accent) calc(var(--dznav-read) * 360deg),
var(--dznav-border) 0
);
-webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--dznav-ring-w, 3px)), #000 calc(100% - var(--dznav-ring-w, 3px)));
mask: radial-gradient(closest-side, transparent calc(100% - var(--dznav-ring-w, 3px)), #000 calc(100% - var(--dznav-ring-w, 3px)));
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.dznav-top, .dznav-top:hover { transition: none; transform: none; }
.dznav[data-dznav-spy="underline"] .dznav__link::after { transition: none; }
}
@media print {
.dznav-top, .dznav-progress { display: none !important; }
}

/* ======================== [2/3] style.css ========================
   Theme artisanal — la feuille du site */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:root {
--papier:    #fbf8f3;
--creme:     #f2ece1;
--encre:     #221e1a;
--encre-2:   #574f46;
--encre-3:   #6f665c;
--filet:     #ddd4c6;
--vert:      #1f5a4e;
--vert-clair:#2d7666;
--vert-plus-clair:#c17718;
--terre:     #a9522f;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
--sans:  "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
--cadre: 1140px;
--reg-vitesse: 100;   
--reg-voile:    55;   
--reg-flou:      0;   
--reg-popup:    32;   
--reg-fond:    100;   
--reg-entete:  100;   
--reg-permute:  90;
--reg-entree:  110;
--orbite-vitesse: calc(var(--reg-vitesse) / 100);
--voile-opacite:  calc(var(--reg-voile) / 100);
--voile-flou:     calc(var(--reg-flou) * 1px);
--popup-duree:    calc(var(--reg-popup) / 100 * 1s);
--popup-fond:     calc(var(--reg-fond) / 100);
--entete-bg: rgb(251 248 243 / calc(var(--reg-entete) / 100));
--encre-ici:   var(--encre);      
--encre-ici-2: var(--encre-2);    
--filet-ici:   var(--filet);      
--accent-ici:  var(--vert);       
--alerte-ici:  #b3261e;
--marque-ici:  var(--terre);      
--permute-duree: calc(var(--reg-permute) / 100 * 1s);
--entree-duree:  calc(var(--reg-entree) / 100 * 1s);
--esp-haut-desk: 128px;  --esp-haut-tab: var(--esp-haut-desk);  --esp-haut-mob: var(--esp-haut-tab);
--esp-bas-desk:  120px;  --esp-bas-tab:  var(--esp-bas-desk);   --esp-bas-mob:  var(--esp-bas-tab);
--esp-int-desk:  120px;  --esp-int-tab:  var(--esp-int-desk);   --esp-int-mob:  var(--esp-int-tab);
--esp-haut: var(--esp-haut-desk);
--esp-bas:  var(--esp-bas-desk);
--esp-int:  var(--esp-int-desk);
}
@media (max-width: 1180px) {
:root {
--esp-haut: var(--esp-haut-tab);
--esp-bas:  var(--esp-bas-tab);
--esp-int:  var(--esp-int-tab);
}
}
@media (max-width: 860px) {
:root {
--esp-haut: var(--esp-haut-mob);
--esp-bas:  var(--esp-bas-mob);
--esp-int:  var(--esp-int-mob);
}
}
body {
font-family: var(--sans);
font-size: 1.09rem;
line-height: 1.65;
color: var(--encre);
background: var(--papier);
-webkit-font-smoothing: antialiased;
}
.cadre { width: min(100% - 2.5rem, var(--cadre)); margin-inline: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.18; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
p + p { margin-top: .85em; }
a { color: var(--vert); }
.saut {
position: absolute; left: -9999px;
background: var(--vert); color: var(--papier); padding: .6rem 1rem;
}
.saut:focus { left: 1rem; top: 1rem; z-index: 100; }
:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 3px; }
.entete {
border-bottom: 1px solid var(--filet);
background: var(--entete-bg);
position: sticky; top: 0; z-index: 70;
}
.entete .cadre {
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; min-height: var(--entete-h); flex-wrap: wrap;
}
.marque {
text-decoration: none; color: inherit; display: flex; align-items: baseline;
gap: .7rem; flex: 0 0 auto; white-space: nowrap;
}
.marque-nom {
font-family: var(--serif); font-size: 1.1rem; letter-spacing: .06em;
position: relative; display: inline-block; padding-bottom: .18rem;
text-decoration: none; color: inherit;
}
.marque-nom.is-current { color: var(--vert); }
.marque-nom-image { display: inline-flex; align-items: center; }
.marque-nom-image img { display: block; height: 1.5rem; width: auto; }
.marque-qui { font-size: .82rem; color: var(--encre-3); }
.marque-suffixe { font-size: .82rem; color: var(--encre-3); }
@media (max-width: 860px) {
.marque { flex-direction: column; align-items: flex-start; row-gap: 0; }
}
@media (max-width: 360px) {
.marque-nom { font-size: .98rem; letter-spacing: .04em; }
.marque-nom-image img { height: 1.26rem; }
}
.entete nav a { text-decoration: none; color: var(--encre-2); font-size: .93rem; }
.entete nav a:hover { color: var(--vert); }
.entete nav .nav-fort { color: var(--vert); border-bottom: 1px solid var(--vert); }
.marque-lien { text-decoration: none; border-bottom: 1px solid transparent; }
.marque-lien:hover { color: var(--vert); border-bottom-color: var(--vert); }
.nav-suivie {
--dznav-accent: var(--vert);
--dznav-bg: transparent;
--dznav-text: var(--encre);
--dznav-text-muted: var(--encre-2);
--dznav-border: var(--filet);
--dznav-radius: 0px;      
--dznav-gauge-h: 2px;
--dznav-z: 20;
}
.nav-suivie .dznav__list {
display: flex; gap: 1.7rem; flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.nav-suivie .dznav__list::-webkit-scrollbar { display: none; }
.entete .cadre { flex-wrap: nowrap; }
.nav-suivie .dznav__link { padding: 0 0 .25rem; }
@media (max-width: 860px) { .nav-suivie .dznav__list { gap: 1.1rem; font-size: .88rem; } }
@media (max-width: 860px) {
.nav-suivie:not(.dznav) .dznav__list { display: none; }
}
.nav-suivie.dznav--overlay.dznav--vertical .dznav__list,
.nav-suivie.dznav--horizontal .dznav__item--sous.is-open > .dznav__sous-liste {
background: var(--papier);
}
.dznav__toggle { font-size: 1.15rem; color: var(--encre-2); display: inline-flex; align-items: center; gap: .35rem; touch-action: manipulation; }
.dznav__toggle:hover { color: var(--vert); }
.entete .dznav__toggle {
transition: opacity .75s ease, color 0s, background-color 0s !important;
}
html.nav-sans-bouton .dznav__toggle { display: none; }
.dznav__toggle-texte { font-size: .78rem; }
@media (max-width: 860px) { .dznav__toggle-texte { display: none; } }
.dznav__toggle-icone { transform: translateY(1px); }
.entete .bouton-entete {
order: -1;                 
margin-left: -.75rem;
margin-right: -1.2rem;
min-width: 1.9rem;
padding: 0 .35rem;
background: transparent;
}
.entete .cadre > .bouton-entete:last-child {
order: 1; margin: 0 -.75rem 0 -1.2rem;
}
@media (hover: none), (max-width: 860px) {
.entete .bouton-entete {
min-height: 2.75rem; padding: .7rem .5rem;
margin-left: -.5rem; margin-right: -2.5rem;
}
.entete:not(.boutons-dessous):not(.a-empiler) .cadre-bouton:not(:has(.info-menu)) .marque { margin-left: .5rem; }
}
@media (hover: none), (max-width: 1180px) {
.univers-maintenance .entete .bouton-entete { margin-right: -1.5rem; }
}
.entete .cadre-bouton .marque { margin-right: auto; }
.entete .cadre:has(.nav-retour) .marque { margin-right: auto; }
.entete:is(.boutons-dessous, .a-empiler) .cadre {
display: grid;
grid-template-columns: 1.9rem 1.25rem 1fr;
align-items: center;
column-gap: .4rem; row-gap: .1rem;
}
.entete:is(.boutons-dessous, .a-empiler) .marque {
grid-column: 1 / 3; grid-row: 1; margin: 0;
min-width: 0; width: max-content;
}
.entete:is(.boutons-dessous, .a-empiler) .bouton-entete {
grid-column: 1; grid-row: 2; margin: 0 0 0 -.35rem; justify-self: start;
}
.entete:is(.boutons-dessous, .a-empiler) .info-menu { grid-column: 2; grid-row: 2; margin: 0; }
.entete:is(.boutons-dessous, .a-empiler) .nav-suivie { grid-column: 3; grid-row: 1 / 3; justify-self: end; }
@media (max-width: 860px) {
.entete:is(.boutons-dessous, .a-empiler) .cadre { grid-template-columns: 1rem 1.25rem 1fr; column-gap: 0; }
}
@media (min-width: 1280px) {
.entete:not(.boutons-dessous):not(.a-empiler) .cadre { display: flex; position: relative; }
.entete:not(.boutons-dessous):not(.a-empiler) .marque { width: auto; }
.entete:not(.boutons-dessous):not(.a-empiler) .bouton-entete,
.entete:not(.boutons-dessous):not(.a-empiler) .info-menu,
.entete:not(.boutons-dessous):not(.a-empiler) .nav-retour {
position: absolute; top: 50%; transform: translateY(-50%); margin: 0;
}
.entete:not(.boutons-dessous):not(.a-empiler) .bouton-entete { right: calc(100% + 2.3rem); }
.entete:not(.boutons-dessous):not(.a-empiler) .info-menu { right: calc(100% + .95rem); }
.entete:not(.boutons-dessous):not(.a-empiler) .nav-retour { right: calc(100% + 1.5rem); }
.entete:not(.boutons-dessous):not(.a-empiler) .bouton-entete { opacity: 1; }
}
.info-menu {
width: 1.15rem; height: 1.15rem; align-self: center;
margin-left: .15rem; padding: 0;
border: 1px solid var(--filet); border-radius: 50%;
font-family: var(--serif); font-size: .72rem; font-style: italic; line-height: 1;
color: var(--encre-3);
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none; box-sizing: border-box; touch-action: manipulation;
background: var(--entete-bg);
}
.info-menu:hover { color: var(--vert); border-color: var(--vert); }
.nav-retour { display: inline-flex; align-items: center; gap: .35rem; touch-action: manipulation; }
.nav-retour-icone { display: inline-block; width: 1.15rem; height: 1.15rem; flex: none; }
.nav-retour-texte {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.entete .cadre-bouton .info-menu { order: -1; margin: 0 0 0 .5rem; align-self: center; }
.info-menu-lien { margin-top: 1.6rem; }
.info-menu-lien a { font-weight: 600; }
.nav-suivie.dznav--overlay.dznav--vertical .dznav__list {
gap: 0; box-shadow: none;
border: 1px solid var(--filet); background: var(--papier);
padding: .4rem 0;
}
.dznav--overlay.dznav--vertical .dznav__toggle {
background: var(--papier); border-color: var(--filet);
}
.nav-suivie.dznav--vertical.dznav--open .dznav__list { display: block; }
.nav-suivie.dznav--vertical .dznav__link { padding: .55rem 1.1rem; }
.nav-suivie.dznav--vertical .nav-fort { border-bottom: 0; font-weight: 600; }
.dispo-colonne { display: grid !important; grid-template-columns: 1fr !important; }
.dispo-colonne > * { max-width: 46rem; }
.dispo-piste {
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: minmax(min(22rem, 78vw), 1fr);
overflow-x: auto;
scroll-snap-type: x proximity;
gap: clamp(1.4rem, 3vw, 2.4rem) !important;
padding-bottom: .6rem;
scrollbar-width: thin;
}
.dispo-piste > * { scroll-snap-align: start; }
.fond-papier { background: var(--papier); }
.fond-creme  { background: var(--creme); }
.fond-sombre, .section-sombre {
--encre-ici:   #ffffff;
--encre-ici-2: #cfe3dc;
--filet-ici:   rgba(255, 255, 255, .38);
--accent-ici:  #ffffff;
--alerte-ici:  #ffb3a3;
--marque-ici:  #e8a887;
}
.fond-sombre { background: var(--vert); color: #eef4f1; }
.fond-sombre h2, .fond-sombre h3, .fond-sombre h4 { color: #fff; }
.fond-sombre .chapo, .fond-sombre p { color: #d7e6e0; }
.air-serre { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.air-large { padding-block: clamp(5.5rem, 12vw, 10rem); }
main > section { padding-block: calc(var(--esp-int) / 2); }
main > section:first-of-type { padding-top: var(--esp-haut); }
main > section:last-of-type { padding-bottom: var(--esp-bas); }
.section-creme { background: var(--creme); }
:root { --dznav-anchor-offset: 6rem; }
:root { --ancre-air: 14px; }
main > section[id] {
scroll-margin-top: calc(var(--dznav-anchor-offset) - var(--esp-int) / 2 + var(--ancre-air));
}
main > section[id]:first-of-type {
scroll-margin-top: calc(var(--dznav-anchor-offset) - var(--esp-haut) + var(--ancre-air));
}
section[id], [id] { scroll-margin-top: var(--dznav-anchor-offset); }
html {
font-size: var(--typo-base,
clamp(var(--typo-mini, .9062rem),
calc(var(--typo-pente, 1.1574) * 1vh + var(--typo-fixe, .4151rem)),
var(--typo-maxi, 1.0625rem)));
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.oeil {
font-family: var(--sans); font-size: .74rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .18em; color: var(--terre);
margin-bottom: 1.1rem;
}
.chapo { font-size: 1.12rem; color: var(--encre-2); max-width: 62ch; margin-top: 1rem; }
.mention { margin-top: 2.5rem; font-size: .92rem; color: var(--encre-3); max-width: 70ch; }
.mention-prix {
margin-top: 1.25rem;
font-size: .95rem;
color: var(--alerte-ici);
max-width: 70ch;
}
.mention-prix::before { content: "* "; }
.prix-etoile {
color: var(--alerte-ici);
font-size: .7em;
vertical-align: super;
margin-left: .1em;
}
.hero { padding-bottom: calc(var(--esp-int) * .3); }
@media (max-height: 660px) {
.hero { padding-top: 10px; padding-bottom: calc(var(--esp-int) * .08); }
:root { --entete-h: 3.5rem; }   
}
.sur-titre {
font-size: .78rem; text-transform: uppercase; letter-spacing: .17em;
color: var(--terre); font-weight: 700; margin-bottom: 1.3rem;
}
.hero h1 { max-width: 17ch; }
.hero-pitch { font-size: clamp(1.12rem, 2vw, 1.32rem); color: var(--encre-2); max-width: 58ch; margin-top: 1.6rem; }
.hero-appui { max-width: 62ch; margin-top: 1rem; color: var(--encre-2); }
.hero-liens { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }
.hero-signature { margin-top: 2rem; font-family: var(--serif); color: var(--encre-3); }
.hero-a-focus .cadre {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.4rem);
align-items: start;
}
.focus {
border: 1px solid var(--filet); border-radius: 3px;
background: var(--creme); padding: clamp(1.2rem, 2.2vw, 1.8rem);
}
.focus-oeil {
font-size: .72rem; text-transform: uppercase; letter-spacing: .16em;
color: var(--terre); font-weight: 700;
}
.focus-tete {
display: flex; align-items: baseline; justify-content: space-between;
gap: .3rem .9rem; flex-wrap: wrap;
}
.focus h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: .7rem; }
.focus-sous { color: var(--encre-2); margin-top: .5rem; }
.focus-etiquette { font-size: .8rem; color: var(--encre-3); margin-top: 0; }
.focus-chapo { color: var(--encre-2); margin-top: 1.1rem; font-size: .96rem; }
.focus-media { margin-top: 1.1rem; }
.focus-video, .focus-demo {
display: block; width: 100%; aspect-ratio: 16 / 9;
border: 1px solid var(--filet); border-radius: 2px; background: var(--encre);
}
.focus-demo { background: var(--papier); }
.focus-legende { font-size: .8rem; color: var(--encre-3); margin-top: .5rem; font-style: italic; }
.focus-chiffres {
list-style: none; padding: 0; margin: 1.2rem 0 0;
display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: space-between;
}
.focus-chiffres li { display: grid; gap: .1rem; }
.focus-chiffres b { font-family: var(--serif); font-size: 1.5rem; color: var(--vert); }
.focus-chiffres span { font-size: .78rem; color: var(--encre-3); white-space: nowrap; }
@media (max-width: 860px) {
.focus-chiffres { flex-wrap: nowrap; gap: .9rem; }
.focus-chiffres li { flex: 1 1 0; min-width: 0; }
.focus-chiffres span { white-space: normal; }
}
.focus-pied {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1.2rem; margin-top: 1.2rem;
border-top: 1px solid var(--filet); padding-top: .9rem;
}
.focus-detail { margin-top: 0; border-top: 0; padding-top: 0; flex: 1 1 auto; min-width: 0; }
.focus-pied .focus-lien { margin-top: 0; flex: 0 0 auto; }
.focus-detail summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.focus-detail dl { margin: .9rem 0 0; }
.focus-detail dt { font-weight: 600; font-size: .92rem; margin-top: .9rem; }
.focus-detail dt:first-child { margin-top: 0; }
.focus-detail dd { margin: .25rem 0 0; color: var(--encre-2); font-size: .9rem; }
@media (max-width: 1180px) {
.hero-a-focus .cadre { grid-template-columns: 1fr; }
.focus { margin-top: 2.4rem; }
}
.bouton {
display: inline-block; padding: .72rem 1.4rem;
background: var(--vert); color: var(--papier);
text-decoration: none; font-size: .95rem; border-radius: 2px;
}
.bouton:hover { background: var(--vert-clair); }
.bouton-clair {
background: transparent; color: var(--vert);
border: 1px solid var(--filet);
}
.bouton-clair:hover { background: transparent; border-color: var(--vert); }
.famille-chapo { color: var(--encre-2); margin-top: .5rem; max-width: 60ch; }
:root { --grille-auto: repeat(auto-fit, minmax(min(var(--grille-min, 300px), 100%), 1fr)); }
.grille {
--grille-gap: clamp(2rem, 4vw, 3.2rem);
--grille-min: 330px;
display: grid; grid-template-columns: var(--grille-auto);
gap: var(--grille-gap); margin-top: 2.6rem;
}
[data-colonnes="1"] { --grille-n: 1; }
[data-colonnes="2"] { --grille-n: 2; }
[data-colonnes="3"] { --grille-n: 3; }
[data-colonnes="4"] { --grille-n: 4; }
[data-colonnes="5"] { --grille-n: 5; }
[data-colonnes="6"] { --grille-n: 6; }
[data-colonnes][data-colonnes] {
display: grid;
grid-template-columns: repeat(var(--grille-n), minmax(0, 1fr));
}
[data-colonnes="auto"][data-colonnes] { grid-template-columns: var(--grille-auto); }
@media (max-width: 1180px) {
[data-colonnes-tab="1"] { --grille-n: 1; }
[data-colonnes-tab="2"] { --grille-n: 2; }
[data-colonnes-tab="3"] { --grille-n: 3; }
[data-colonnes-tab="4"] { --grille-n: 4; }
[data-colonnes-tab="5"] { --grille-n: 5; }
[data-colonnes-tab="6"] { --grille-n: 6; }
[data-colonnes-tab][data-colonnes-tab] {
display: grid;
grid-template-columns: repeat(var(--grille-n), minmax(0, 1fr));
}
[data-colonnes-tab="auto"][data-colonnes-tab] { grid-template-columns: var(--grille-auto); }
}
@media (max-width: 860px) {
[data-colonnes-mob="1"] { --grille-n: 1; }
[data-colonnes-mob="2"] { --grille-n: 2; }
[data-colonnes-mob="3"] { --grille-n: 3; }
[data-colonnes-mob="4"] { --grille-n: 4; }
[data-colonnes-mob="5"] { --grille-n: 5; }
[data-colonnes-mob="6"] { --grille-n: 6; }
[data-colonnes-mob][data-colonnes-mob] {
display: grid;
grid-template-columns: repeat(var(--grille-n), minmax(0, 1fr));
}
[data-colonnes-mob="auto"][data-colonnes-mob] { grid-template-columns: var(--grille-auto); }
}
.fiche { display: flex; flex-direction: column; }
.fiche-visuel { display: block; padding: 0; width: 100%; }
.fiche-visuel img {
width: 100%; aspect-ratio: 8 / 5; object-fit: contain;
background: none; border: 0; border-radius: 2px;
transition: border-color .15s ease;
}
.visuel-remplacement {
background: var(--creme); border: 1px solid var(--filet);
}
.section-creme .visuel-remplacement { background: var(--papier); }
.fiche-visuel:hover img { border-color: var(--vert); }
.fiche-corps { padding-top: 1.2rem; }
.fiche-corps h3 { margin-bottom: .2rem; }
.fiche-meta { font-size: .84rem; color: var(--encre-3); letter-spacing: .01em; }
.fiche-texte { margin-top: .8rem; color: var(--encre-2); }
.lien-detail {
margin-top: 1rem; padding: 0; color: var(--vert);
border-bottom: 1px solid var(--filet); font-size: .95rem;
}
.lien-detail:hover { border-bottom-color: var(--vert); }
.domaine-notice .titre-ligne .lien-detail { margin-top: 0; white-space: nowrap; }
.domaine-hs {
position: relative; display: inline-block;
padding: .05em .3em; margin: 0 -.1em;
font: inherit; color: inherit; cursor: pointer;
background: rgba(31, 90, 78, .07);
border-radius: 2px;
transition: background-color .55s ease, color .55s ease;
}
.domaine-hs::after {
content: ""; position: absolute; left: .3em; right: .3em; bottom: 0; height: 1px;
background: var(--vert);
transform: scaleX(0); transform-origin: left;
opacity: 0;
transition: transform .45s cubic-bezier(.2, .7, .3, 1), opacity .45s ease;
}
.domaine-hs:hover, .domaine-hs:focus-visible {
background: rgba(31, 90, 78, .16);
color: var(--vert);
}
.domaine-hs:hover::after, .domaine-hs:focus-visible::after { transform: scaleX(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.domaine-hs, .domaine-hs::after { transition: none; }
}
.detail.detail-mini { width: min(100% - 2rem, 520px); }
.domaine-formules {
list-style: none; padding: 0; margin: 1.2rem 0 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
gap: 1rem 1.4rem;
}
.domaine-formules li { border-top: 2px solid var(--vert); padding-top: .5rem; }
.domaine-formules b { display: block; font-family: var(--serif); font-size: 1rem; }
.domaine-formules span { display: block; font-size: .86rem; color: var(--encre-2); margin-top: .2rem; }
.domaine-note { font-size: .82rem; color: var(--encre-3); margin-top: 1.1rem; }
.detail.detail-mini.domaine-notice { width: min(100% - 2rem, 640px); }
.detail-mini .chapo { margin-top: 1.2rem; }
.comparatif-duo {
list-style: none; padding: 0; margin: 1.2rem 0 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 1rem 1.4rem;
}
.comparatif-duo li { border-top: 2px solid var(--filet-ici); padding-top: .5rem; }
.comparatif-duo b { display: block; font-family: var(--serif); font-size: 1rem; }
.comparatif-duo span { display: block; font-size: .86rem; color: var(--encre-2); margin-top: .2rem; }
.comparatif-nous { border-top-color: var(--vert); }
.comparatif-nous b { color: var(--vert); }
.famille-grille-verticale .grille { grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
.famille-grille-verticale .fiche {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.famille-grille-verticale .fiche-corps { padding-top: 0; }
.famille-grille-verticale .fiche h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
@media (max-width: 760px) {
.famille-grille-verticale .fiche { grid-template-columns: 1fr; }
}
.famille-carrousel .piste {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.famille-carrousel .piste::-webkit-scrollbar { display: none; }
.famille-carrousel .fiche {
scroll-snap-align: center;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
padding: .5rem 0 1rem;
}
@media (max-width: 860px) {
.famille-carrousel .fiche { grid-template-columns: 1fr; gap: 1.2rem; }
}
.famille-grille .scene, .famille-grille-verticale .scene { min-height: 17rem; }
.famille-grille .scene .produit img { max-height: 15rem; }
.famille-grille .scene-multi .produit-satellite { --rx: 8rem; --ry: 3rem; }
.famille-grille .scene .produit-satellite img {
max-height: calc(7rem * clamp(.85, .62 / var(--ratio, .7), 1.5));
max-width: 8rem;
}
.famille-grille .fiche,
.famille-grille-verticale .fiche {
transition: opacity calc(var(--entree-duree) * .73) ease,
transform var(--entree-duree) cubic-bezier(.16, .8, .26, 1);
}
html.anime .famille-grille .fiche:not(.est-vue),
html.anime .famille-grille-verticale .fiche:not(.est-vue) {
opacity: 0;
transform: translateY(.9rem);
}
@media (prefers-reduced-motion: reduce) {
.famille-grille .fiche, .famille-grille-verticale .fiche { transition: none; opacity: 1; transform: none; }
}
.famille-grille .fiche.est-vue .scene .produit-principal,
.famille-grille-verticale .fiche.est-vue .scene .produit-principal { opacity: 1; transform: none; }
.famille-grille .fiche.est-vue .scene .produit-satellite,
.famille-grille-verticale .fiche.est-vue .scene .produit-satellite { opacity: .92; }
.famille-carrousel .fiche-visuel { overflow: hidden; }
.famille-carrousel .fiche-visuel img {
width: 100%;
transition: transform var(--entree-duree) cubic-bezier(.16, .8, .26, 1),
opacity calc(var(--entree-duree) * .73) ease;
}
html.anime .famille-carrousel .fiche:not(.est-vue) .fiche-visuel img {
transform: scale(1.06);
opacity: .55;
}
.famille-carrousel .fiche.est-vue .fiche-visuel img { transform: scale(1); opacity: 1; }
.famille-carrousel .fiche-corps > * {
transition: opacity calc(var(--entree-duree) * .64) ease,
transform calc(var(--entree-duree) * .64) cubic-bezier(.16, .8, .26, 1);
}
html.anime .famille-carrousel .fiche:not(.est-vue) .fiche-corps > * {
opacity: 0;
transform: translateY(.6rem);
}
.famille-carrousel .fiche.est-vue .fiche-corps > * { opacity: 1; transform: none; }
.famille-carrousel .fiche.est-vue .fiche-corps > :nth-child(2) { transition-delay: calc(var(--entree-duree) * .07); }
.famille-carrousel .fiche.est-vue .fiche-corps > :nth-child(3) { transition-delay: calc(var(--entree-duree) * .14); }
.famille-carrousel .fiche.est-vue .fiche-corps > :nth-child(4) { transition-delay: calc(var(--entree-duree) * .21); }
.famille-carrousel .fiche h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.famille-carrousel .fiche-texte { font-size: 1.05rem; max-width: 46ch; }
.carrousel-barre {
display: flex; align-items: center; gap: 1rem;
flex-wrap: wrap; row-gap: .5rem;
margin-top: .8rem;
}
.carrousel-barre[hidden] { display: none; }
.famille-carrousel.fleches-bords { position: relative; }
.fleches-bords .carrousel-barre { justify-content: center; }
.fleches-bords .carrousel-points { margin: 0; }
.fleches-bords .carrousel-barre .carrousel-fleche { position: absolute; top: 45%; z-index: 3; }
.fleches-bords .carrousel-barre .carrousel-fleche:first-of-type { left: -.4rem; }
.fleches-bords .carrousel-barre .carrousel-fleche:last-of-type { right: -.4rem; }
.scene-fleches {
display: flex; justify-content: center; gap: .5rem;
margin-top: .4rem;
}
.scene-fleche { width: 1.9rem; height: 1.9rem; }
.scene-fleche::before { width: .38rem; height: .38rem; }
.piste.peut-glisser { cursor: grab; }
.piste.peut-glisser.est-pris { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.piste.peut-glisser img, .piste.peut-glisser a { -webkit-user-drag: none; user-drag: none; }
.detail-galerie-vue { position: relative; }
.galerie-fleche {
position: absolute; top: 50%; transform: translateY(-50%);
width: 2rem; height: 2rem; padding: 0;
border: 1px solid var(--filet); border-radius: 50%;
background: var(--papier); color: var(--encre-2); line-height: 1;
transition: color .25s ease, border-color .25s ease;
}
.galerie-fleche:hover { color: var(--vert); border-color: var(--vert); }
.galerie-fleche-g { left: 0; }
.galerie-fleche-d { right: 0; }
.carrousel-points { display: flex; flex-wrap: wrap; gap: .45rem; min-width: 0; margin-right: auto; }
@media (max-width: 860px) {
.carrousel-points { gap: .3rem; }
}
.carrousel-point {
width: 1.5rem; height: 1.5rem; padding: 0;
border: 0; background: transparent;
display: grid; place-items: center;
}
.carrousel-point[hidden] { display: none; }
.carrousel-point::before {
content: ""; width: .5rem; height: .5rem;
border: 1px solid var(--marque-ici); border-radius: 50%;
transition: background-color .35s ease, border-color .35s ease, transform .35s ease;
}
.carrousel-point[aria-current="true"]::before {
background: var(--marque-ici); border-color: var(--marque-ici); transform: scale(1.25);
}
.carrousel-fleche, .galerie-fleche {
display: inline-flex; align-items: center; justify-content: center;
font-size: 0;                       
}
.carrousel-fleche::before, .galerie-fleche::before {
content: ""; width: .46rem; height: .46rem;
border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: translateX(.1rem) rotate(45deg);
}
.carrousel-fleche:last-of-type::before, .galerie-fleche-d::before {
transform: translateX(-.1rem) rotate(-135deg);
}
.carrousel-fleche {
width: 2.2rem; height: 2.2rem; padding: 0;
border: 1px solid var(--marque-ici); border-radius: 50%;
color: var(--marque-ici); line-height: 1;
transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.carrousel-fleche:hover:not(:disabled) { color: var(--accent-ici); border-color: var(--accent-ici); }
.carrousel-fleche:disabled { opacity: .3; cursor: default; }
@media (prefers-reduced-motion: reduce) {
.famille-carrousel .fiche-visuel img,
.famille-carrousel .fiche-corps > * { transition: none; transform: none; opacity: 1; }
.famille-carrousel .piste { scroll-behavior: auto; }
}
@media print {
.famille-carrousel .piste { display: block; overflow: visible; }
.carrousel-barre { display: none; }
.famille-carrousel .fiche-visuel img,
.famille-carrousel .fiche-corps > * { opacity: 1; transform: none; }
}
.scene {
position: relative; display: grid; place-items: center; min-height: 25rem;
padding-block: 1.2rem;   
perspective: 1100px;
transform-style: preserve-3d;
background: none; border: 0;
}
.scene .produit img { max-height: 23rem; width: auto; max-width: 100%; margin-inline: auto; }
.scene .produit-satellite img {
max-height: calc(8.5rem * clamp(.85, .62 / var(--ratio, .7), 1.55));
max-width: 11rem;
object-fit: contain;
}
.scene .produit {
padding: 0; border: 0; background: none; cursor: pointer;
display: block; line-height: 0;
}
.scene .produit[hidden] { display: none; }
.scene .produit img { width: 100%; height: auto; }
.produit-nom {
display: block; margin-top: .5rem;
font-size: .78rem; line-height: 1.3; color: var(--encre-3); text-align: center;
opacity: 0; transition: opacity .5s ease;
}
.scene:hover .produit-nom, .produit:focus-visible .produit-nom { opacity: 1; }
.scene .produit-principal {
grid-area: 1 / 1; width: auto; max-width: 100%;
transform-style: preserve-3d;
--par: .25rem;
transform: translate(calc(var(--souris-x, 0) * var(--par)), calc(var(--souris-y, 0) * var(--par)));
transition: transform var(--entree-duree) cubic-bezier(.16, .8, .26, 1),
opacity calc(var(--entree-duree) * .73) ease;
}
html.anime .fiche:not(.est-vue) .scene .produit-principal {
transform: scale(1.05) translateY(1rem);
opacity: 0;
}
.famille-carrousel .scene .produit-principal { max-width: 94%; }
.scene.permute .produit,
.scene.permute .produit-satellite {
transition: opacity var(--permute-duree) ease, filter var(--permute-duree) ease,
transform var(--permute-duree) cubic-bezier(.16, .8, .26, 1);
}
.est-vue .scene .produit-principal {
transform: translate(calc(var(--souris-x, 0) * var(--par)), calc(var(--souris-y, 0) * var(--par)));
opacity: 1;
}
.scene-multi { --orbite: 0; }
.scene-multi .produit-principal { max-width: 58%; }
.scene-multi .produit-principal img { max-height: 17.5rem; }
.scene-multi[data-produits="2"] .produit-principal img { max-height: 21rem; }
.scene-multi[data-produits="2"] .produit-satellite img {
max-height: calc(10.5rem * clamp(.85, .62 / var(--ratio, .7), 1.55));
max-width: 14rem;
}
.scene-multi .produit-satellite {
grid-area: 1 / 1;
width: auto;
z-index: 1;
opacity: .95;
--rang: 0;
--angle: calc((var(--orbite, 0) * var(--orbite-vitesse, 1) + var(--rang, 0) * .37) * 360deg);
--par: calc(.6rem + var(--rang) * .35rem);
--rx: 11.5rem;
--ry: 4.2rem;
--profondeur: sin(var(--angle));
transform:
translate3d(calc(cos(var(--angle)) * var(--rx) + var(--souris-x, 0) * var(--par)),
calc(sin(var(--angle)) * var(--ry) + var(--souris-y, 0) * var(--par)),
calc(var(--profondeur) * 170px))
scale(calc(.66 + var(--profondeur) * .12));
filter: blur(calc((1 - var(--profondeur)) * .9px));
transition: opacity .9s ease, filter .9s ease;
}
.produit[data-rang="0"] { --rang: 0; }
.produit[data-rang="1"] { --rang: 1; }
.produit[data-rang="2"] { --rang: 2; }
.produit[data-rang="3"] { --rang: 3; }
.produit[data-rang="4"] { --rang: 4; }
.produit[data-rang="5"] { --rang: 5; }
.produit[data-rang="6"] { --rang: 6; }
.produit[data-rang="7"] { --rang: 7; }
.produit[data-rang="8"] { --rang: 8; }
.est-vue .scene-multi .produit-satellite { opacity: .95; }
html.anime .fiche:not(.est-vue) .scene-multi .produit-satellite { opacity: 0; }
.scene-multi .produit-satellite:hover { opacity: 1; }
@supports not (width: calc(cos(45deg) * 1rem)) {
.scene-multi .produit-satellite {
transform: translate(calc(7rem + var(--rang) * 1.5rem), calc(3rem + var(--rang) * .5rem))
scale(.82);
}
}
@media (max-width: 860px) {
html.orbite-ok .scene-multi {
--rx-mob: 7rem; --ry-mob: 2.8rem;
}
html.orbite-ok .scene-multi .produit-satellite { --rx: var(--rx-mob); --ry: var(--ry-mob); }
html.orbite-ok .scene-multi .produit-satellite img { max-height: 5.2rem; max-width: 6.5rem; }
html.orbite-ok .scene-multi .produit-principal { max-width: 52%; }
html.orbite-ok .scene-multi .produit-principal img { max-height: 13rem; }
html:not(.orbite-ok) .scene-multi {
display: flex; flex-direction: column; align-items: center; gap: .9rem;
perspective: none; }
html:not(.orbite-ok) .scene-multi { flex-wrap: wrap; justify-content: center; }
html:not(.orbite-ok) .scene-multi .produit-principal { max-width: 100%; flex: 0 0 100%; }
html:not(.orbite-ok) .scene-multi .produit-principal img { max-height: 15rem; }
html:not(.orbite-ok) .scene-multi .produit-satellite {
position: static; width: auto; transform: none; filter: none; opacity: 1;
grid-area: auto;
}
html:not(.orbite-ok) .scene-multi .produit-satellite img { max-height: 4.6rem; }
}
@media (prefers-reduced-motion: reduce) {
.scene .produit-principal,
.scene-multi .produit-satellite { transition: none; transform: none; opacity: 1; }
.scene-multi { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.scene-multi .produit-satellite { width: 8rem; }
}
html.opt-scan .scene .produit { position: relative; }
html.opt-scan .scene .produit::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 50% 50%, rgba(31, 90, 78, .55) 0 1.1px, transparent 1.2px) 0 0 / 14px 14px,
linear-gradient(to bottom,
transparent calc(var(--scan, 0) * 100% - 14%),
rgba(31, 90, 78, .30) calc(var(--scan, 0) * 100% - 4%),
rgba(45, 118, 102, .55) calc(var(--scan, 0) * 100%),
rgba(31, 90, 78, .30) calc(var(--scan, 0) * 100% + 4%),
transparent calc(var(--scan, 0) * 100% + 14%));
-webkit-mask-image: var(--masque); mask-image: var(--masque);
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
mix-blend-mode: multiply;
opacity: .9;
}
html.opt-scan .scene::before {
content: "";
position: absolute; inset: -6% -4%;
pointer-events: none;
background:
repeating-linear-gradient(to right, var(--filet) 0 1px, transparent 1px 74px),
repeating-linear-gradient(to bottom, var(--filet) 0 1px, transparent 1px 74px);
opacity: calc(.12 + var(--orbite, 0) * .22);
-webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
}
@media (prefers-reduced-motion: reduce) {
html.opt-scan .scene .produit::after { display: none; }
}
.detail {
width: min(100% - 2rem, 720px); padding: 0; border: 1px solid var(--filet);
border-radius: 3px; color: var(--encre);
background: rgb(251 248 243 / var(--popup-fond, 1));
backdrop-filter: blur(var(--popup-fond-flou, 0px));
opacity: 0;
transform: translateY(1.2rem) scale(.985);
transition: opacity var(--popup-duree, .32s) ease,
transform var(--popup-duree, .32s) cubic-bezier(.16, .8, .26, 1),
display var(--popup-duree, .32s) allow-discrete,
overlay var(--popup-duree, .32s) allow-discrete;
}
.detail[open] { opacity: 1; transform: none; }
@starting-style { .detail[open] { opacity: 0; transform: translateY(1.2rem) scale(.985); } }
.detail::backdrop {
background: rgba(34, 30, 26, var(--voile-opacite, .55));
backdrop-filter: blur(var(--voile-flou, 0px));
opacity: 0;
transition: opacity var(--popup-duree, .32s) ease,
display var(--popup-duree, .32s) allow-discrete,
overlay var(--popup-duree, .32s) allow-discrete;
}
.detail[open]::backdrop { opacity: 1; }
@starting-style { .detail[open]::backdrop { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.detail, .detail::backdrop { transition: none; transform: none; }
}
.galerie-zoom {
display: block; padding: 0; border: 0; background: none;
cursor: zoom-in; width: 100%;
color: inherit; text-decoration: none;
}
.galerie-zoom img { display: block; margin-inline: auto; max-width: 100%; height: auto; }
.galerie-zoom.sans-zoom { cursor: default; }
.galerie-zoom.a-video { position: relative; cursor: pointer; }
.galerie-zoom.a-video::after {
content: ""; position: absolute; inset: 0; margin: auto;
width: 0; height: 0;
border-style: solid; border-width: .85rem 0 .85rem 1.4rem;
border-color: transparent transparent transparent var(--papier);
filter: drop-shadow(0 0 .5rem rgba(34, 30, 26, .55));
transition: transform .2s ease;
}
.galerie-zoom.a-video:hover::after { transform: scale(1.12); }
.fiche-video {
margin-top: .6rem; font-size: .84rem; color: var(--vert);
display: flex; align-items: center; gap: .45rem;
}
.fiche-video-lien {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--filet);
text-underline-offset: .18em;
cursor: pointer;
}
.fiche-video-lien:hover,
.fiche-video-lien:focus-visible { text-decoration-color: currentColor; }
.fiche-video::before {
content: ""; width: 0; height: 0;
border-style: solid; border-width: .3rem 0 .3rem .5rem;
border-color: transparent transparent transparent var(--vert);
}
.plein-ecran video {
max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem);
width: auto; height: auto;
border: 1px solid var(--filet); border-radius: 3px; background: #000;
}
.plein-ecran [hidden] { display: none; }
.plein-ecran[open] {
width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
padding: 0; border: 0; background: transparent;
display: grid; place-items: center;
}
.plein-ecran img {
max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem);
width: auto; height: auto;
border: 1px solid var(--filet); border-radius: 3px;
cursor: default;
}
.plein-ecran[open].vue-longue {
place-items: start center; overflow: auto; overscroll-behavior: contain;
}
.plein-ecran.vue-longue img { max-height: none; margin: 1rem 0; }
.plein-ecran::backdrop { background: rgba(34, 30, 26, .88); }
.plein-ecran-fleche {
position: fixed; top: 50%; transform: translateY(-50%); z-index: 2;
width: 2.8rem; height: 2.8rem; padding: 0; line-height: 1;
font-size: 1.5rem;
border: 1px solid var(--filet); border-radius: 50%;
background: var(--papier); color: var(--encre);
cursor: pointer;
}
.plein-ecran-fleche:hover { color: var(--vert); border-color: var(--vert); }
.plein-ecran-fleche-g { left: .8rem; }
.plein-ecran-fleche-d { right: .8rem; }
.plein-ecran-nom {
position: fixed; bottom: .9rem; left: 50%; transform: translateX(-50%);
max-width: min(90vw, 40rem); text-align: center;
font-size: .88rem; color: var(--papier);
padding: .28rem .8rem; border-radius: 1rem;
background: rgba(34, 30, 26, .85);
}
.plein-ecran-fermer {
position: fixed; top: .8rem; right: .8rem; z-index: 3;
width: 2.4rem; height: 2.4rem; padding: 0; line-height: 1;
font-size: 1.4rem;
border: 1px solid var(--filet); border-radius: 50%;
background: var(--papier); color: var(--encre);
cursor: pointer;
}
.plein-ecran-fermer:hover { color: var(--vert); border-color: var(--vert); }
.detail-galerie { display: grid; gap: .8rem; margin: 1.6rem 0; }
.detail-galerie-vue {
min-height: 15rem; display: grid; place-items: center;
background: none; border: 0;
}
.detail-galerie-vue img { max-height: 17rem; width: auto; max-width: 100%; }
.detail-galerie-choix { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.detail-galerie-choix button {
padding: .2rem .35rem; border: 1px solid var(--filet); border-radius: 2px;
background: var(--papier);
opacity: .55;
transition: opacity .25s ease, border-color .25s ease, background-color .25s ease;
}
.detail-galerie-choix img {
height: calc(3rem * clamp(.75, .6 / var(--ratio, .8), 1.45));
width: auto; max-width: 5.5rem; object-fit: contain;
}
.detail-galerie-choix button:hover { opacity: 1; }
.detail-galerie-choix button[aria-current="true"] {
opacity: 1; border-color: var(--vert); background: var(--creme);
border-bottom-width: 3px;
}
.detail-galerie-nom { text-align: center; font-size: .8rem; color: var(--encre-3); }
.detail article { padding: clamp(1.6rem, 4vw, 2.8rem); }
.detail-tete { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; }
.detail-sous { color: var(--vert); font-size: 1rem; margin-top: .3rem; }
.detail-meta { font-size: .84rem; color: var(--encre-3); margin-top: .35rem; }
.ferme { font-size: 1.9rem; line-height: 1; color: var(--encre-3); padding: 0 .3rem; }
.ferme:hover { color: var(--encre); }
.detail-visuel {
width: 100%; aspect-ratio: 8 / 5; object-fit: contain;
background: none; border: 0; margin: 1.6rem 0;
}
.detail h3 {
margin-top: 1.7rem; margin-bottom: .4rem;
font-family: var(--sans); font-size: .74rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .16em; color: var(--terre);
}
.detail p { color: var(--encre-2); }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 1.2rem; }
.chiffres li { border-top: 2px solid var(--vert); padding-top: .6rem; }
.chiffres b { display: block; font-family: var(--serif); font-size: 1.45rem; color: var(--vert); }
.chiffres span { display: block; font-size: .85rem; color: var(--encre-2); margin-top: .2rem; }
.puces li { position: relative; padding-left: 1.15rem; color: var(--encre-2); margin-bottom: .4rem; }
.puces li::before {
content: ""; position: absolute; left: 0; top: .68em;
width: 5px; height: 5px; background: var(--terre);
}
.puces-fines li { font-size: .93rem; margin-bottom: .3rem; }
.encart {
border-left: 2px solid var(--terre); padding: .7rem 0 .7rem 1rem;
margin-top: 1.5rem; font-size: .95rem;
}
.pile { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.6rem; }
.pile span {
font-size: .8rem; padding: .18rem .6rem; color: var(--encre-2);
border: 1px solid var(--filet); border-radius: 2px;
}
.pile-fine { margin-top: 1rem; }
.poles { --grille-min: 290px; --grille-gap: clamp(2rem, 4vw, 3rem);
display: grid; grid-template-columns: var(--grille-auto); gap: var(--grille-gap); margin-top: 3rem; }
.pole { border-top: 1px solid var(--encre); padding-top: 1.2rem; }
.pole-num { font-family: var(--serif); font-size: 1.5rem; color: var(--terre); margin-bottom: .5rem; }
.pole-sous { color: var(--vert); font-size: .93rem; margin-bottom: .8rem; }
.pole p { color: var(--encre-2); }
.pole .puces { margin-top: 1rem; }
.principes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.8rem; margin-top: 2.8rem; }
.principe h3 { font-family: var(--serif); font-size: 1.1rem; margin-bottom: .35rem; }
.principe p { font-size: .95rem; color: var(--encre-2); }
.modules { --grille-min: 310px; --grille-gap: 1.5rem;
display: grid; grid-template-columns: var(--grille-auto); gap: var(--grille-gap); margin-top: 3rem; }
.module { border: 1px solid var(--filet); border-radius: 2px; padding: 1.5rem 1.6rem; background: var(--papier); }
.module-duree { font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--terre); font-weight: 700; }
.module h3 { margin: .5rem 0 .4rem; font-size: 1.18rem; }
.module-public { font-size: .84rem; color: var(--encre-3); margin-bottom: .8rem; }
.module p { color: var(--encre-2); font-size: .96rem; }
.module-livrable { margin-top: .9rem; font-size: .92rem; }
.section-sombre { background: var(--vert); color: #eef3f0; }
.section-sombre .oeil { color: #9fd4c6; }
.section-sombre h2, .section-sombre h3, .section-sombre h4 { color: #fff; }
.section-sombre .chapo, .section-sombre p { color: #d6e5df; }
.local-pour-qui { margin-top: 3rem; max-width: 68ch; }
.local-pour-qui h3 { margin-bottom: .5rem; }
.arguments { --grille-min: 280px; --grille-gap: 2rem;
display: grid; grid-template-columns: var(--grille-auto); gap: var(--grille-gap); margin-top: 3rem; }
.argument { border-top: 1px solid rgba(255,255,255,.25); padding-top: 1rem; }
.argument h4 { font-family: var(--serif); font-size: 1.12rem; margin-bottom: .4rem; }
.argument p { font-size: .95rem; }
.franchise {
margin-top: 3rem; border: 1px solid rgba(255,255,255,.25);
border-left: 3px solid #9fd4c6; padding: 1.3rem 1.5rem; max-width: 72ch;
}
.franchise h4 { font-family: var(--sans); font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: #9fd4c6; margin-bottom: .5rem; }
.local-appel { margin-top: 2.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; font-family: var(--serif); font-size: 1.15rem; }
.section-sombre .bouton-clair { color: #fff; border-color: rgba(255,255,255,.45); }
.section-sombre .bouton-clair:hover { border-color: #fff; }
.coordonnees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 2rem; margin-top: 2.8rem; }
.coordonnees span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--encre-3); margin-bottom: .4rem; }
.coordonnees b { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.coordonnees a { text-decoration: none; border-bottom: 1px solid var(--filet); }
.coordonnees a:hover { border-bottom-color: var(--vert); }
@keyframes courriel-bat {
0%, 100% { transform: scale(1);    color: var(--encre); }
12%      { transform: scale(1.14); color: var(--terre); }
25%      { transform: scale(1);    color: var(--terre); }
37%      { transform: scale(1.14); color: var(--terre); }
50%      { transform: scale(1);    color: var(--terre); }
}
.courriel.en-avant {
display: inline-block;
transform-origin: left center;
animation: courriel-bat 4s ease-in-out 1;
border-bottom-color: var(--terre);
}
@media (prefers-reduced-motion: reduce) {
.courriel.en-avant {
animation: none;
color: var(--terre); border-bottom-color: var(--terre);
}
}
.a-venir { color: var(--encre-3); font-style: italic; font-size: .95rem; }
.ruban {
background: var(--terre); color: #fff; text-align: center;
padding: .65rem 1rem; font-size: .88rem; letter-spacing: .02em;
}
.hero-prospect { padding-top: clamp(3rem, 6vw, 4.5rem); }
.reponses { margin-top: 2.5rem; border-top: 1px solid var(--filet); }
.reponse {
display: grid; grid-template-columns: minmax(min(200px, 100%), 270px) 1fr; gap: 2rem;
padding: 1.9rem 0; border-bottom: 1px solid var(--filet);
}
.reponse h2 { font-size: 1.12rem; color: var(--encre); }
.reponse p { color: var(--encre-2); }
.reponse-accent { background: var(--creme); padding-inline: 1.6rem; }
.reponse-accent h3 { color: var(--terre); }
@media (max-width: 780px) { .reponse { grid-template-columns: 1fr; gap: .5rem; } }
.hero-maint h1 { max-width: 22ch; }
.maint-velo, .maint-ht { margin-top: 1.4rem; color: var(--encre-2); max-width: 60ch; font-size: .98rem; }
.maint-ht { font-size: .88rem; color: var(--encre-3); }
.maint-credit {
display: block; margin-top: 1.4rem; max-width: 60ch;
background: none; border: none; padding: 0; font: inherit; text-align: left;
color: var(--vert); font-weight: 600; cursor: pointer;
}
.maint-credit:hover, .maint-credit:focus-visible { color: var(--encre); }
.maint-credit-lien { display: block; margin-top: -.5rem; font-weight: 400; text-decoration: underline; text-underline-offset: .15em; }
.maint-credit-valeur { display: inline-block; color: var(--vert-plus-clair); }
.maint-credit-valeur--anime { animation: maint-credit-zoom 1.1s ease-out 1; }
@keyframes maint-credit-zoom {
0%   { transform: scale(1); }
35%  { transform: scale(1.35); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.maint-credit-valeur--anime { animation: none; }
}
.maint-credit-points { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.2rem; }
.maint-credit-points li { position: relative; padding-left: 1.3rem; color: var(--encre-2); }
.maint-credit-points li::before { content: "•"; position: absolute; left: 0; color: var(--vert); font-weight: 700; }
.bandeau-reassurance { background: var(--creme); padding-block: 2.4rem; }
.reassurance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1.4rem 2rem; }
@media (min-width: 860px) { .reassurance { grid-template-columns: repeat(3, 1fr); } }
.reassurance li { border-top: 2px solid var(--vert); padding-top: .6rem; }
.reassurance b { display: block; font-family: var(--serif); font-size: 1.02rem; }
.reassurance span { display: block; font-size: .89rem; color: var(--encre-2); margin-top: .2rem; }
.douleurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 1.5rem; margin-top: 3rem; }
.douleur { border: 1px solid var(--filet); border-radius: 2px; padding: 1.4rem 1.5rem; }
.douleur-accent { background: var(--creme); border-color: var(--terre); }
.douleurs-autres { margin-top: 2.4rem; border-top: 1px solid var(--filet); padding-top: 1.2rem; }
.douleurs-autres > summary {
cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--encre-2);
}
.douleurs-autres > summary:hover { color: var(--vert); }
.douleurs-autres[open] > summary { margin-bottom: 1.6rem; }
.douleurs-reserve { display: grid !important; grid-auto-flow: row !important; overflow: visible !important; }
.douleur-dit {
font-family: var(--serif); font-size: 1.14rem; color: var(--encre);
border-left: 3px solid var(--terre); padding-left: .9rem; margin-bottom: .7rem;
}
.douleur-craint { font-size: .84rem; color: var(--encre-3); font-style: italic; margin-bottom: .8rem; }
.douleur-reponse { color: var(--encre-2); font-size: .96rem; }
.forfaits { --grille-gap: 1.6rem;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--grille-gap); margin-top: 3rem; }
.forfait { border: 1px solid var(--filet); border-radius: 2px; padding: 1.6rem 1.7rem; background: var(--papier); }
.forfait-fort { border-color: var(--vert); border-top: 3px solid var(--vert); }
.forfait h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.forfait-prix { font-family: var(--serif); font-size: 1.75rem; color: var(--vert); line-height: 1.1; }
.forfait-prix-note { font-size: .82rem; color: var(--encre-3); margin-top: .25rem; }
.forfait-qui { font-size: .93rem; color: var(--encre-2); margin-top: .9rem; font-style: italic; }
.forfait-contenu { margin-top: 1.1rem; border-top: 1px solid var(--filet); padding-top: 1rem; }
.forfait-contenu li { position: relative; padding-left: 1.1rem; font-size: .93rem; color: var(--encre-2); margin-bottom: .45rem; }
.forfait-contenu li::before { content: "—"; position: absolute; left: 0; color: var(--vert); }
.section-sombre .forfait { background: transparent; border-color: rgba(255,255,255,.25); }
.section-sombre .forfait-fort { border-color: #9fd4c6; border-top-color: #9fd4c6; }
.section-sombre .forfait-prix { color: #9fd4c6; }
.section-sombre .forfait-contenu { border-top-color: rgba(255,255,255,.2); }
.section-sombre .forfait-contenu li::before { color: #9fd4c6; }
.section-sombre .forfait-contenu li,
.section-sombre .forfait-qui { color: #d6e5df; }
.section-sombre .forfait-prix-note { color: #9fd4c6; }
.prix { margin-top: 2.6rem; border-top: 1px solid var(--filet); }
.prix-ligne {
display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline;
padding: .95rem 0; border-bottom: 1px solid var(--filet);
}
.prix-ligne dt { color: var(--encre); }
.prix-detail { display: block; font-size: .85rem; color: var(--encre-3); margin-top: .15rem; max-width: 62ch; }
.prix-ligne dd { font-family: var(--serif); font-size: 1.14rem; color: var(--vert); white-space: nowrap; }
.prix-accent dd { color: var(--terre); }
.section-sombre .prix, .section-sombre .prix-ligne { border-color: rgba(255,255,255,.2); }
.section-sombre .prix-ligne dd, .section-sombre .prix-accent dd { color: #9fd4c6; }
.section-sombre .prix-ligne dt { color: #fff; }
.section-sombre .prix-detail { color: #b9d2c9; }
.serenite-nuance {
margin-top: 1.6rem; border-left: 3px solid #9fd4c6; padding-left: 1.1rem;
max-width: 72ch; font-size: .95rem;
}
.niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.5rem; margin-top: 3rem; }
.niveau { border: 1px solid var(--filet); border-radius: 2px; padding: 1.5rem 1.6rem; background: var(--papier); }
.niveau-fort { border-color: var(--terre); }
.niveau-rang { font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--terre); font-weight: 700; }
.niveau h3 { font-size: 1.15rem; margin: .45rem 0 .3rem; }
.niveau-prix { font-family: var(--serif); font-size: 1.2rem; color: var(--vert); margin-bottom: .9rem; }
.niveau-fait { font-size: .93rem; color: var(--encre-2); }
.niveau-protege { font-size: .93rem; color: var(--encre-2); margin-top: .8rem; }
.avertissement {
margin-top: 2.6rem; border-left: 3px solid var(--terre); padding: .9rem 1.2rem;
background: var(--papier); max-width: 76ch; font-size: .96rem; color: var(--encre-2);
}
.questions { margin-top: 2.8rem; border-top: 1px solid var(--filet); }
.question { border-bottom: 1px solid var(--filet); }
.question summary {
cursor: pointer; padding: 1.05rem 0; font-family: var(--serif); font-size: 1.08rem;
list-style: none; display: flex; justify-content: space-between; gap: 1.5rem;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; color: var(--vert); font-size: 1.3rem; line-height: 1; }
.question[open] summary::after { content: "–"; }
.question summary:hover { color: var(--vert); }
.question p { padding-bottom: 1.2rem; color: var(--encre-2); max-width: 78ch; }
.zone { max-width: 78ch; }
.zone-velo { color: var(--encre-2); margin-top: 1rem; }
.zone-liste { font-family: var(--serif); font-size: 1.12rem; color: var(--encre); margin-top: 1.4rem; line-height: 1.7; }
@media (max-width: 560px) {
.prix-ligne { grid-template-columns: 1fr; gap: .3rem; }
.prix-ligne dd { font-size: 1.05rem; }
}
.pied { border-top: 1px solid var(--filet); padding-block: 2.6rem; font-size: .9rem; color: var(--encre-3); }
.pied-note { margin-top: .3rem; font-style: italic; }
.pied-marque { color: inherit; text-decoration: none; border-bottom: 1px solid var(--filet); }
.pied-marque:hover { color: var(--vert); border-bottom-color: var(--vert); }
.pied-liens { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; }
.pied-liens a { color: var(--encre-3); text-decoration: none; border-bottom: 1px solid var(--filet); }
.pied-liens a:hover { color: var(--vert); border-bottom-color: var(--vert); }
.pied-legal { margin-top: 1.1rem; font-size: .92rem; }
.pied-legal a { color: var(--encre-3); text-decoration: none; border-bottom: 1px solid var(--filet); }
.pied-legal a:hover { color: var(--vert); border-bottom-color: var(--vert); }
.erreur { min-height: 60vh; }
.erreur-code {
font-size: clamp(3.4rem, 12vw, 6rem);
line-height: 1;
color: var(--filet);
letter-spacing: .04em;
}
.erreur h1 { margin-top: .6rem; }
.erreur-sous { font-size: 1.1rem; margin-top: 3rem; }
.erreur-pistes { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 42rem; }
.erreur-pistes li { padding: .9rem 0; border-bottom: 1px solid var(--filet); }
.erreur-pistes a { color: var(--vert); text-decoration: none; border-bottom: 1px solid var(--filet); }
.erreur-pistes a:hover { border-bottom-color: var(--vert); }
.erreur-pistes span { display: block; margin-top: .3rem; color: var(--encre-3); font-size: .94rem; }
.erreur-note { margin-top: 2.4rem; color: var(--encre-3); font-size: .94rem; max-width: 42rem; }
.coord-brut { font-style: italic; }
.legal-sous { font-size: 1.1rem; margin-top: 2.6rem; }
.legal-liste { margin-top: 1rem; }
.legal-ligne {
display: grid;
grid-template-columns: minmax(9rem, 14rem) 1fr;
gap: .3rem 1.4rem;
padding: .5rem 0;
border-bottom: 1px solid var(--filet);
}
.legal-ligne dt { color: var(--encre-3); }
.legal-ligne dd { margin: 0; }
.legal-clause p { color: var(--encre-2); margin-top: .8rem; max-width: 46rem; }
.legal-maj { margin-top: 2.6rem; font-size: .9rem; color: var(--encre-3); font-style: italic; }
@media (max-width: 34rem) {
.legal-ligne { grid-template-columns: 1fr; }
}
.bandeau-alpha {
position: fixed; top: 0; left: 0; right: 0; z-index: 80;
background: var(--terre); color: #fff;
padding: .7rem clamp(1rem, 4vw, 2rem);
font-size: .9rem; line-height: 1.45; text-align: center;
transition: opacity .45s ease, transform .45s ease;
}
.bandeau-alpha.est-parti { opacity: 0; transform: translateY(-100%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bandeau-alpha { transition: opacity .2s linear; } }
.bandeau-alpha b { letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
.bandeau-alpha b::after { content: " : "; }
.bandeau-alpha span { opacity: .95; }
.dznav-top {
background: var(--vert); color: #fff;
border: 1px solid rgba(255,255,255,.25);
transition: opacity .18s linear, background-color .18s ease, transform .18s ease;
}
.dznav-top svg { display: block; }
.dznav-top:hover { background: var(--vert-clair); }
.dznav-top:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .dznav-top { transition: opacity .18s linear; } }
.entete-survol {
background: transparent;
border-bottom-color: transparent;
transition: background-color .75s ease, border-color .75s ease;
}
.entete-au-scroll { transition: background-color .75s ease, border-color .75s ease; }
.entete-au-scroll.a-defile { background: transparent; border-bottom-color: transparent; }
.entete-au-scroll.a-defile .nav-suivie,
.entete-au-scroll.a-defile .marque,
.entete-au-scroll.a-defile .dznav__toggle,
.entete-au-scroll.a-defile .info-menu,
.entete-au-scroll.a-defile .langues { opacity: 0; transition: opacity .75s ease; }
.entete-au-scroll.a-defile:hover,
.entete-au-scroll.a-defile:focus-within { background: var(--entete-bg); border-bottom-color: var(--filet); }
.entete-au-scroll.a-defile:hover .nav-suivie,
.entete-au-scroll.a-defile:hover .marque,
.entete-au-scroll.a-defile:hover .dznav__toggle,
.entete-au-scroll.a-defile:hover .info-menu,
.entete-au-scroll.a-defile:hover .langues,
.entete-au-scroll.a-defile:focus-within .nav-suivie,
.entete-au-scroll.a-defile:focus-within .marque,
.entete-au-scroll.a-defile:focus-within .dznav__toggle,
.entete-au-scroll.a-defile:focus-within .info-menu,
.entete-au-scroll.a-defile:focus-within .langues { opacity: 1; }
@media (hover: none) {
.entete-au-scroll.a-defile { background: var(--entete-bg); border-bottom-color: var(--filet); }
.entete-au-scroll.a-defile .nav-suivie, .entete-au-scroll.a-defile .marque,
.entete-au-scroll.a-defile .dznav__toggle, .entete-au-scroll.a-defile .info-menu,
.entete-au-scroll.a-defile .langues { opacity: 1; }
}
.entete-survol.a-defile .marque { opacity: 0; transition: opacity .75s ease; }
.entete-survol.a-defile:hover .marque,
.entete-survol.a-defile:focus-within .marque { opacity: 1; }
.entete-survol .nav-suivie,
.entete-survol .marque-qui,
.entete-survol .dznav__toggle,
.entete-survol .info-menu,
.entete-survol .langues {
opacity: 0;
transition: opacity .75s ease;
}
.entete-survol:hover,
.entete-survol:focus-within { background: var(--entete-bg); border-bottom-color: var(--filet); }
.entete-survol:hover .nav-suivie,
.entete-survol:hover .marque-qui,
.entete-survol:hover .dznav__toggle,
.entete-survol:hover .info-menu,
.entete-survol:hover .langues,
.entete-survol:focus-within .nav-suivie,
.entete-survol:focus-within .marque-qui,
.entete-survol:focus-within .dznav__toggle,
.entete-survol:focus-within .info-menu,
.entete-survol:focus-within .langues { opacity: 1; }
@media (hover: none), (max-width: 860px) {
.entete-survol, .entete-survol.a-defile,
.entete-au-scroll, .entete-au-scroll.a-defile {
background: var(--entete-bg); border-bottom-color: var(--filet);
}
.entete-survol .nav-suivie, .entete-survol .marque, .entete-survol .marque-qui,
.entete-survol .dznav__toggle, .entete-survol .info-menu,
.entete-survol .langues,
.entete-survol.a-defile .marque,
.entete-au-scroll .nav-suivie, .entete-au-scroll .marque,
.entete-au-scroll .dznav__toggle, .entete-au-scroll .info-menu,
.entete-au-scroll .langues { opacity: 1; }
.entete { transition: transform .28s ease; will-change: transform; }
.entete.a-cachee { transform: translateY(-100%); }
.entete.a-cachee:focus-within,
.entete.a-menu-ouvert, .entete:has(.dznav--open) { transform: none; }
}
@media (hover: none) and (prefers-reduced-motion: reduce),
(max-width: 860px) and (prefers-reduced-motion: reduce) {
.entete { transition: none; }
}
.entete-survol.a-menu-ouvert, .entete-au-scroll.a-menu-ouvert,
.entete-survol:has(.dznav--open),
.entete-au-scroll:has(.dznav--open) {
background: var(--entete-bg); border-bottom-color: var(--filet);
}
.entete-survol:has(.dznav--open) .nav-suivie,
.entete-survol:has(.dznav--open) .marque,
.entete-survol:has(.dznav--open) .marque-qui,
.entete-survol:has(.dznav--open) .dznav__toggle,
.entete-survol:has(.dznav--open) .info-menu,
.entete-survol:has(.dznav--open) .langues,
.entete-au-scroll:has(.dznav--open) .nav-suivie,
.entete-au-scroll:has(.dznav--open) .marque,
.entete-au-scroll:has(.dznav--open) .dznav__toggle,
.entete-au-scroll:has(.dznav--open) .info-menu,
.entete-au-scroll:has(.dznav--open) .langues,
.entete-survol.a-menu-ouvert .nav-suivie, .entete-survol.a-menu-ouvert .marque,
.entete-survol.a-menu-ouvert .marque-qui, .entete-survol.a-menu-ouvert .dznav__toggle,
.entete-survol.a-menu-ouvert .info-menu,
.entete-survol.a-menu-ouvert .langues,
.entete-au-scroll.a-menu-ouvert .nav-suivie, .entete-au-scroll.a-menu-ouvert .marque,
.entete-au-scroll.a-menu-ouvert .dznav__toggle,
.entete-au-scroll.a-menu-ouvert .info-menu,
.entete-au-scroll.a-menu-ouvert .langues { opacity: 1; }
@media (hover: none), (max-width: 860px) {
.entete-survol { background: var(--entete-bg); border-bottom-color: var(--filet); }
.entete-survol .nav-suivie, .entete-survol .marque-qui,
.entete-survol .dznav__toggle, .entete-survol .info-menu,
.entete-survol .langues { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.entete-survol, .entete-survol * { transition: none; }
}
.fiche-vues { display: none; }
html.labo-vues .fiche-vues { display: block; }
.labo-sans-barre .carrousel-barre { display: none; }
@media print {
.entete, .hero-liens, .lien-detail, .saut, .dznav-top { display: none; }
body { background: #fff; font-size: 11pt; }
.section { padding-block: 1.2rem; }
.section-sombre { background: #fff; color: #000; }
.section-sombre h2, .section-sombre h3, .section-sombre h4, .section-sombre p { color: #000; }
.detail { display: none; }
}
@media (max-width: 860px) {
.entete .cadre { min-height: 56px; }
}
@media (max-width: 640px) {
.scene { min-height: 15rem; padding-block: .7rem; }
.scene-multi { min-height: 19rem; }
.poles, .modules, .arguments, .forfaits { margin-top: 2rem; }
.grille { margin-top: 1.8rem; }
.oeil { margin-bottom: .6rem; }
.pied { padding-block: 2rem; }
.scene-fleches { margin-top: .1rem; }
}
.titre-ligne {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
.titre-ligne > :first-child { margin: 0; }
.lien-marque {
color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
text-underline-offset: .16em;
}
.lien-marque:hover, .lien-marque:focus-visible { text-decoration-thickness: 2px; }
.lien-titre { color: inherit; text-decoration: none; }
.lien-titre:hover, .lien-titre:focus-visible {
text-decoration: underline; text-decoration-thickness: 2px;
text-underline-offset: .16em;
}
.lien-site {
flex: 0 0 auto; white-space: nowrap;
font-family: var(--sans); font-size: .82rem; letter-spacing: .02em;
color: var(--vert); text-decoration: none;
border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.lien-site::after {
content: " \2197"; 
display: inline-block;
}       
.lien-site:hover, .lien-site:focus-visible { border-bottom-color: var(--vert); }
.section-sombre .lien-site { color: #9fd4c6; }
.piste {
display: grid !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-auto-flow: column !important;
grid-auto-columns: 100%;
gap: 0 !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.piste > * {
scroll-snap-align: start;
min-width: 0;                
}
.piste::-webkit-scrollbar { display: none; }
.piste > * { scroll-snap-align: center; }
.famille-carrousel .piste > .fiche { scroll-snap-align: center; }
.piste.multi-vue {
--piste-gouttiere: 2.4rem;
gap: 0 var(--piste-gouttiere) !important;
}
.piste.par-vue-2 { grid-auto-columns: calc((100% - var(--piste-gouttiere)) / 2); }
.piste.par-vue-3 { grid-auto-columns: calc((100% - 2 * var(--piste-gouttiere)) / 3); }
.piste.multi-vue > * { scroll-snap-align: none; }
.piste.multi-vue > .est-debut { scroll-snap-align: start; }
.qualite-grille {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
gap: 1.9rem 2.4rem;
margin-top: 2.4rem;
}
.qualite-critere { display: flex; flex-direction: column; }
.qualite-critere .qualite-repere { margin-top: auto; }
.qualite-critere .qualite-repere { padding-top: 1rem; }
.qualite-critere h3 {
font-size: 1.06rem;
margin-top: .5rem;
}
.qualite-critere p  { color: var(--encre-2); margin-top: .6rem; }
.sans-coupure { white-space: nowrap; }
.qualite-i {
display: inline-block;
vertical-align: .15em;
margin-left: .3rem;
width: 1.45rem;
height: 1.45rem;
border-radius: 50%;
border: 1px solid var(--filet);
background: none;
color: var(--encre-2);
font-family: var(--serif);
font-style: italic;
font-size: .9rem;
line-height: 1;
cursor: pointer;
transition: color .15s, border-color .15s, background-color .15s;
}
.qualite-i:hover, .qualite-i:focus-visible {
color: var(--papier);
background: var(--vert);
border-color: var(--vert);
}
.qualite-marque {
position: relative;
border: 1px solid var(--filet);
padding: 1.1rem 1rem .95rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 7.4rem;
}
.qualite-marque::after {
content: "";
position: absolute;
inset: 4px;
border: 1px solid var(--filet);
opacity: .55;
pointer-events: none;
}
.qualite-marque .qualite-chiffre { margin: 0; }
.piste-fond { fill: var(--filet); }
.piste-part { fill: var(--vert); }
.qualite-piste {
display: block;
width: 100%;
height: 4px;
align-self: stretch;
margin: .85rem 0 .4rem;
background: var(--filet);
}
.qualite-part { display: block; height: 100%; min-width: 2px; background: var(--vert); }
.qualite-part-txt {
display: block;
font-size: .72rem;
letter-spacing: .02em;
color: var(--encre-3);
font-variant-numeric: tabular-nums;
}
.qualite-ornement {
display: block;
width: 2.6rem;
height: 1px;
margin: 1.05rem auto .35rem;
background: var(--filet);
}
.qualite-resume {
font-size: .92rem;
line-height: 1.5;
max-width: 34ch;
}
.qualite-repere {
font-size: .84rem;
line-height: 1.45;
color: var(--encre-2);
border-left: 2px solid var(--vert);
padding-left: .6rem;
max-width: 34ch;
}
.qualite-critere .qualite-repere { color: var(--encre-2); }
.qualite-fiche article > p { color: var(--encre-2); max-width: 60ch; }
.qualite-fiche-tete {
margin-top: 1.1rem;
font-size: 1.04rem;
color: var(--encre);
}
.qualite-fiche-source { font-size: .88rem; margin-top: 1rem; }
.qualite-fiche-source a { color: var(--vert); }
.qualite-chiffre {
font-family: var(--serif);
font-size: 2.9rem;
line-height: 1;
color: var(--vert);
font-variant-numeric: tabular-nums;
}
.qualite-unite {
font-family: var(--sans);
font-size: .72rem;
color: var(--encre-3);
text-transform: uppercase;
letter-spacing: .08em;
}
.qualite-detail { margin-top: 3rem; border-top: 1px solid var(--filet); padding-top: 1.2rem; }
.qualite-detail summary { cursor: pointer; color: var(--encre-2); }
.qualite-detail summary:hover { color: var(--vert); }
.qualite-entetes { list-style: none; margin-top: 1.2rem; display: grid; gap: .7rem; }
.qualite-entetes li { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline; }
.qualite-entetes code {
font-size: .84rem;
color: var(--vert);
background: var(--papier);
border: 1px solid var(--filet);
padding: .12rem .45rem;
}
.qualite-entetes span { color: var(--encre-2); font-size: .95rem; }
.qualite-entetes .absent code { color: var(--encre-3); text-decoration: line-through; }
.qualite-sans-js, .qualite-verifier { margin-top: 3rem; }
.qualite-sans-js h3, .qualite-verifier h3 { font-size: 1.2rem; }
.qualite-sans-js p { color: var(--encre-2); margin-top: .8rem; max-width: 62ch; }
.qualite-outils { list-style: none; margin-top: 1.4rem; display: grid; gap: 1rem; }
.qualite-outils li { display: grid; gap: .25rem; }
.qualite-outils a { color: var(--vert); font-weight: 600; }
.qualite-outils span { color: var(--encre-2); font-size: .95rem; }
.qualite-chute {
margin-top: 3rem;
padding-top: 1.4rem;
border-top: 1px solid var(--filet);
color: var(--encre-2);
font-style: italic;
max-width: 68ch;
}
@media (min-width: 900px) {
.qualite-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.qualite-grille { gap: 2rem; margin-top: 2.2rem; }
.qualite-chiffre { font-size: 2.4rem; }
}
.qualite-sources { margin-top: 3rem; }
.qualite-sources h3 { font-size: 1.2rem; }
.qualite-sources ul { list-style: none; margin-top: 1.2rem; display: grid; gap: 1rem; }
.qualite-sources li { display: grid; gap: .25rem; max-width: 68ch; }
.qualite-sources a { color: var(--vert); font-weight: 600; }
.qualite-sources span { color: var(--encre-2); font-size: .95rem; }
.qualite-source-date { color: var(--encre-3); font-size: .82rem; }
.qualite-second {
font-size: .84rem;
color: var(--encre-3);
margin-top: .3rem;
font-variant-numeric: tabular-nums;
}
.qualite-etat {
margin: 1.4rem 0 0;
font-size: .84rem;
line-height: 1.5;
color: var(--encre-3);
max-width: 62ch;
}
.qualite-etat[data-mesure="direct"] {
border-left: 2px solid var(--vert);
padding-left: .7rem;
}
.banc { margin: .9rem 0 0; }
.banc-vignette {
display: block; padding: 0; border: 1px solid var(--filet); background: var(--papier);
cursor: zoom-in; line-height: 0; border-radius: 2px;
transition: box-shadow .18s ease, border-color .18s ease;
}
.banc-vignette img { display: block; width: 240px; height: auto; }
.banc-vignette:hover, .banc-vignette:focus-visible {
box-shadow: 0 6px 24px rgb(34 30 26 / .18);
border-color: var(--vert);
}
@media (prefers-reduced-motion: reduce) { .banc-vignette { transition: none; } }
.banc figcaption { font-size: .82rem; color: var(--encre-3); margin-top: .5rem; }
.banc-invite { color: var(--encre-3); }
.banc-popup .banc-complet {
display: block; width: 100%; height: auto;
border: 1px solid var(--filet); margin-top: 1rem;
}
.banc-note { font-size: .9rem; color: var(--encre-2); margin-top: 1rem; }
@media (max-width: 860px) {
.banc-vignette img { width: 100%; }
}
.qualite-bancs-vedette {
margin-top: 3rem;
padding-top: 2.4rem;
border-top: 1px solid var(--filet);
}
.banc-vedette { margin: 0; text-align: center; }
.banc-vedette .banc-vignette { display: inline-block; max-width: 100%; }
.banc-vedette .banc-vignette img { width: 34rem; max-width: 100%; }
.banc-vedette figcaption { max-width: 62ch; margin-inline: auto; justify-items: center; }
.banc-vedette .banc-invite { justify-self: center; text-align: center; }
.banc-vedette .banc-onglets { justify-content: center; }
.banc-vedette figcaption b { font-size: 1rem; }
.qualite-bancs-suite { border-top: 0; padding-top: 0; margin-top: 2.6rem; }
.banc-bloc { position: relative; }
.banc-choix {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.banc-onglets { display: flex; gap: .3rem; margin-bottom: .7rem; }
.banc-onglet {
font-size: .82rem; line-height: 1; cursor: pointer;
padding: .45rem .8rem; border: 1px solid var(--filet); border-radius: 999px;
color: var(--encre-2); background: var(--papier);
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.banc-onglet:hover { border-color: var(--vert); }
@media (prefers-reduced-motion: reduce) { .banc-onglet { transition: none; } }
.banc-vignette img.banc-vue,
.banc-popup a.banc-vue { display: none; }
.banc-bloc > .banc-choix:nth-of-type(1):checked ~ .banc .banc-onglet:nth-of-type(1),
.banc-bloc > .banc-choix:nth-of-type(2):checked ~ .banc .banc-onglet:nth-of-type(2),
.banc-bloc > .banc-choix:nth-of-type(3):checked ~ .banc .banc-onglet:nth-of-type(3) {
background: var(--vert); border-color: var(--vert); color: var(--papier);
}
.banc-bloc > .banc-choix:nth-of-type(1):checked ~ .banc img.banc-vue:nth-of-type(1),
.banc-bloc > .banc-choix:nth-of-type(2):checked ~ .banc img.banc-vue:nth-of-type(2),
.banc-bloc > .banc-choix:nth-of-type(3):checked ~ .banc img.banc-vue:nth-of-type(3),
.banc-bloc > .banc-choix:nth-of-type(1):checked ~ .banc-popup a.banc-vue:nth-of-type(1),
.banc-bloc > .banc-choix:nth-of-type(2):checked ~ .banc-popup a.banc-vue:nth-of-type(2),
.banc-bloc > .banc-choix:nth-of-type(3):checked ~ .banc-popup a.banc-vue:nth-of-type(3) {
display: block;
}
.banc-bloc > .banc-choix:nth-of-type(1):focus-visible ~ .banc .banc-onglet:nth-of-type(1),
.banc-bloc > .banc-choix:nth-of-type(2):focus-visible ~ .banc .banc-onglet:nth-of-type(2),
.banc-bloc > .banc-choix:nth-of-type(3):focus-visible ~ .banc .banc-onglet:nth-of-type(3) {
outline: 2px solid var(--vert); outline-offset: 2px;
}
.auto-sous { font-size: 1.24rem; margin-top: 3rem; }
.auto-archi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 2rem 2.6rem;
margin-top: 1.6rem;
}
.auto-archi h4 { font-size: 1.02rem; }
.auto-archi p { color: var(--encre-2); margin-top: .6rem; }
.auto-demo { margin-top: 1.8rem; }
.auto-demo img {
display: block; width: 100%; height: auto;
border: 1px solid var(--filet); border-radius: 2px;
}
.auto-demo figcaption { font-size: .84rem; color: var(--encre-3); margin-top: .6rem; }
.auto-colonnes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
gap: 2rem 2.6rem;
margin-top: 2rem;
}
.auto-colonnes h4 { font-size: 1.02rem; margin-bottom: .8rem; }
.auto-filet {
background: var(--creme);
border-left: 2px solid var(--vert);
padding: 1.2rem 1.4rem;
}
.section-creme .auto-filet { background: var(--papier); }
.auto-propriete ul { list-style: none; margin-top: .7rem; }
.auto-propriete li {
color: var(--encre-2); font-size: .96rem; padding-left: 1rem;
position: relative; margin-top: .5rem;
}
.auto-propriete li::before {
content: "—"; position: absolute; left: 0; color: var(--encre-3);
}
.auto-budget {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
gap: 1.6rem; margin-top: 1.6rem;
}
.auto-budget article {
border: 1px solid var(--filet); border-radius: 2px; padding: 1.4rem 1.6rem;
background: var(--papier);
}
.section-creme .auto-budget article { background: var(--creme); }
.auto-budget .budget-achete { border-left: 3px solid var(--vert); }
.auto-budget h4 { font-size: 1.02rem; }
.auto-budget p { color: var(--encre-2); margin-top: .6rem; }
.auto-budget .budget-note { font-size: .82rem; color: var(--encre-3); font-style: italic; }
.auto-limite {
margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--filet);
max-width: 68ch;
}
.auto-limite h4 { font-size: 1.02rem; }
.auto-limite p { color: var(--encre-2); margin-top: .6rem; }
.auto-preuve {
margin-top: 3rem; padding: 1.4rem 1.6rem;
border: 1px solid var(--filet); border-left: 3px solid var(--terre);
background: var(--creme); max-width: 68ch;
}
.section-creme .auto-preuve { background: var(--papier); }
.auto-preuve h4 { font-size: 1.02rem; }
.auto-preuve p { color: var(--encre-2); margin-top: .6rem; }
.auto-preuve .lien-detail { margin-top: .9rem; }
.qualite-bancs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
gap: 2.2rem 2.6rem;
margin-top: 3rem;
padding-top: 2.4rem;
border-top: 1px solid var(--filet);
}
.banc figcaption { display: grid; gap: .35rem; margin-top: .7rem; }
.banc-date { font-size: .82rem; color: var(--encre-3); }
.banc-moyenne { font-size: .9rem; color: var(--encre-2); }
.banc-invite {
font-size: .8rem; color: var(--encre-3); font-style: italic;
justify-self: start; padding: 0; border: 0; background: none;
font-family: inherit; text-align: left; cursor: pointer;
text-decoration: underline; text-decoration-style: dotted;
text-underline-offset: .2em;
}
.banc-invite:hover, .banc-invite:focus-visible { color: var(--vert); }
.qualite-replis { margin-top: 3rem; display: grid; gap: .2rem; }
.qualite-replis .qualite-detail { margin-top: 0; }
.replis-chapo { color: var(--encre-2); margin-top: 1rem; max-width: 62ch; }
.qualite-replis .qualite-sources { margin-top: 1.2rem; }
.doctrine {
font-family: var(--serif);
font-size: 1.3rem;
line-height: 1.5;
color: var(--encre);
max-width: 60ch;
margin-top: 1.2rem;
padding-left: 1.1rem;
border-left: 3px solid var(--terre);
}
.doctrine + .chapo { margin-top: 1.4rem; }
@media (max-width: 860px) {
.doctrine { font-size: 1.15rem; padding-left: .9rem; }
}
.demos { margin-top: 1.8rem; position: relative; }
.demos-radio {
position: absolute;
bottom: 0; left: 0;
width: 1px; height: 1px;
margin: 0; padding: 0; border: 0;
clip-path: inset(50%);
overflow: hidden;
}
.demos-scene { display: grid; grid-template-columns: minmax(0, 1fr); }
.demos-scene > .demo { grid-area: 1 / 1; display: none; }
#demo-desktop:checked  ~ .demos-scene > .demo-desktop,
#demo-tablette:checked ~ .demos-scene > .demo-tablette,
#demo-mobile:checked   ~ .demos-scene > .demo-mobile { display: grid; }
.demo { display: grid; justify-items: center; margin: 0; }
.demo video {
display: block; max-width: 100%; height: auto;
border: 1px solid var(--filet); border-radius: 2px; background: var(--creme);
}
.demo-tablette video { max-width: min(456px, 100%); }
.demo-mobile video   { max-width: min(308px, 100%); }
.demo figcaption {
font-size: .88rem; color: var(--encre-3); margin-top: .8rem; text-align: center;
}
.demos-choix {
display: flex; flex-wrap: wrap; gap: .6rem;
margin-top: 1.4rem; justify-content: center;
}
.demos-onglet {
display: grid; gap: .15rem; cursor: pointer;
padding: .55rem 1rem;
border: 1px solid var(--filet); border-radius: 2px;
background: var(--papier);
transition: border-color .18s ease, background .18s ease;
}
.section-creme .demos-onglet { background: var(--creme); }
.demos-onglet b { font-size: .96rem; color: var(--encre); }
.demos-onglet span { font-size: .78rem; color: var(--encre-3); }
.demos-onglet:hover { border-color: var(--vert); }
#demo-desktop:checked  ~ .demos-choix > .demos-onglet:nth-child(1),
#demo-tablette:checked ~ .demos-choix > .demos-onglet:nth-child(2),
#demo-mobile:checked   ~ .demos-choix > .demos-onglet:nth-child(3) {
border-color: var(--vert); border-width: 1px;
box-shadow: inset 0 -3px 0 var(--vert);
}
#demo-desktop:focus-visible  ~ .demos-choix > .demos-onglet:nth-child(1),
#demo-tablette:focus-visible ~ .demos-choix > .demos-onglet:nth-child(2),
#demo-mobile:focus-visible   ~ .demos-choix > .demos-onglet:nth-child(3) {
outline: 2px solid var(--terre); outline-offset: 2px;
}
.auto-demos-note {
margin-top: 1.4rem; color: var(--encre-2); font-size: .95rem; max-width: 62ch;
}
.wdemo-ouvert { overflow: hidden; }
.wdemo {
position: fixed; inset: 0; z-index: 9000;
background: rgb(34 30 26 / .55);
backdrop-filter: blur(2px);
}
.wdemo-app {
position: absolute; top: 1.4rem; left: 1.4rem; width: 15rem;
background: var(--papier); border: 1px solid var(--filet); border-radius: 3px;
padding: 1rem; box-shadow: 0 10px 40px rgb(34 30 26 / .3);
}
.wdemo-app-titre { font-family: var(--serif); font-size: 1.15rem; }
.wdemo-app-sous { font-size: .74rem; color: var(--terre); margin-top: .15rem; }
.wdemo-app-liste { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .5rem; }
.wdemo-app-liste li {
display: flex; align-items: center; gap: .6rem;
border: 1px solid var(--filet); border-radius: 2px; padding: .4rem .6rem;
background: var(--creme);
}
.wdemo-app-nom { font-size: .82rem; color: var(--encre-2); flex: 1; }
.wdemo-app-liste li { --wdemo-niveau: 0; }
.wdemo-app-temoin {
width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none;
display: grid; place-items: center; font-size: .8rem;
border: 1px solid var(--filet); background: var(--papier); color: var(--encre-3);
transition: color .15s ease, box-shadow .15s ease;
}
.wdemo-app-etat {
font-size: .68rem; color: var(--encre-3); text-transform: uppercase;
letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
li[data-cle="ampoule"].est-actif .wdemo-app-temoin {
color: #b9761f;
box-shadow: 0 0 calc(3px + 10px * var(--wdemo-niveau)) rgb(233 176 70 / calc(.35 + .5 * var(--wdemo-niveau)));
}
li[data-cle="prise"].est-actif .wdemo-app-temoin,
li[data-cle="camera"].est-actif .wdemo-app-temoin {
color: var(--vert-clair); border-color: var(--vert-clair);
}
.est-actif .wdemo-app-etat { color: var(--vert); }
.wdemo-app-aide { font-size: .74rem; color: var(--encre-3); margin-top: .9rem; }
.wdemo-bulle { position: absolute; --wdemo-niveau: 0; }
.wdemo-pastille {
width: 3.4rem; height: 3.4rem; border-radius: 50%;
border: 1px solid var(--filet); background: var(--papier);
font-size: 1.3rem; color: var(--encre-3); cursor: grab;
display: grid; place-items: center; touch-action: none;
box-shadow: 0 6px 18px rgb(34 30 26 / .35);
transition: color .15s ease, box-shadow .15s ease;
}
.wdemo-pastille:active { cursor: grabbing; }
.est-allume .wdemo-pastille {
color: #b9761f;
box-shadow: 0 6px 18px rgb(34 30 26 / .35),
0 0 calc(10px + 42px * var(--wdemo-niveau)) calc(2px + 12px * var(--wdemo-niveau))
rgb(233 176 70 / calc(.25 + .55 * var(--wdemo-niveau)));
}
.wdemo-a-gauche .wdemo-panneau { left: auto; right: 0; }
.wdemo-panneau {
display: none; position: absolute; top: 4rem; left: 0;
width: min(15rem, calc(100vw - 2.5rem));
background: var(--papier); border: 1px solid var(--filet); border-radius: 3px;
padding: .8rem; box-shadow: 0 10px 40px rgb(34 30 26 / .3);
}
.est-ouvert .wdemo-panneau { display: block; }
.wdemo-panneau-nom { font-weight: 600; font-size: .9rem; }
.wdemo-panneau-etat { font-size: .82rem; color: var(--encre-2); margin-top: .2rem; }
.wdemo-panneau-aide { font-size: .72rem; color: var(--encre-3); margin-top: .6rem; }
.wdemo-vue {
position: relative; margin-top: .6rem; height: 7rem; overflow: hidden;
border: 1px solid var(--filet); border-radius: 2px; background: #10161c;
}
.wdemo-vue-ciel { position: absolute; inset: 0 0 45% 0; background: linear-gradient(#16202b, #0d1319); }
.wdemo-vue-sol { position: absolute; inset: 55% 0 0 0; background: linear-gradient(#161c16, #0c100c); }
.wdemo-vue-porte {
position: absolute; left: 62%; top: 26%; width: 18%; height: 42%;
background: #232b33; border: 1px solid #39434d;
}
.wdemo-vue-heure {
position: absolute; right: .4rem; top: .3rem; font-size: .62rem;
color: #cfd6dd; font-variant-numeric: tabular-nums;
}
.wdemo-vue-mention {
position: absolute; left: .4rem; bottom: .3rem; font-size: .6rem;
color: #cfd6dd; text-transform: uppercase; letter-spacing: .12em;
}
.wdemo-fermer {
position: absolute; top: 1.4rem; right: 1.4rem;
width: 2.6rem; height: 2.6rem; border-radius: 50%;
background: var(--papier); border: 1px solid var(--filet);
font-size: 1.4rem; color: var(--encre-2); cursor: pointer;
}
.wdemo-fermer:hover { color: var(--vert); border-color: var(--vert); }
@media (max-width: 860px) {
.wdemo-app { width: auto; right: 1.4rem; }
}
.wdemo-bulle[data-cle="prise"].est-allume .wdemo-pastille {
color: var(--vert-clair);
box-shadow: 0 6px 18px rgb(34 30 26 / .35), 0 0 0 3px rgb(45 118 102 / .35);
}
.wdemo-bulle[data-cle="camera"].est-ouvert .wdemo-pastille {
color: var(--vert); border-color: var(--vert);
}
.menuctx {
position: fixed; z-index: 9500; min-width: 14rem; max-width: 20rem;
background: var(--papier); border: 1px solid var(--filet); border-radius: 3px;
box-shadow: 0 12px 40px rgb(34 30 26 / .28);
padding: .35rem;
}
.menuctx-titre {
font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
color: var(--terre); padding: .45rem .6rem .3rem;
}
.menuctx-item {
display: block; width: 100%; text-align: left;
background: none; border: 0; border-radius: 2px;
padding: .5rem .6rem; font: inherit; font-size: .88rem; color: var(--encre);
cursor: pointer;
}
.menuctx-item:hover, .menuctx-item:focus-visible { background: var(--creme); color: var(--vert); }
.menuctx-natif { border-top: 1px solid var(--filet); margin-top: .3rem; color: var(--encre-2); }
.menuctx-pied { font-size: .7rem; color: var(--encre-3); padding: .3rem .6rem .15rem; }
.menuctx-mot {
position: fixed; z-index: 9600; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
background: var(--encre); color: var(--papier); font-size: .85rem;
padding: .5rem .9rem; border-radius: 3px; box-shadow: 0 8px 24px rgb(34 30 26 / .3);
}
.wdemo-peau {
margin-top: .9rem; width: 100%; cursor: pointer; font: inherit; font-size: .76rem;
background: var(--creme); color: var(--encre-2);
border: 1px solid var(--filet); border-radius: 2px; padding: .4rem .5rem;
}
.wdemo-peau:hover { color: var(--vert); border-color: var(--vert); }
.wdemo-fidele .wdemo-app,
.wdemo-fidele .wdemo-panneau { background: #14181d; border-color: #2b3138; color: #e6e9ec; }
.wdemo-fidele .wdemo-app-titre { color: #e6e9ec; font-family: var(--sans); font-weight: 700; }
.wdemo-fidele .wdemo-app-sous { color: #f0a72a; }
.wdemo-fidele .wdemo-app-liste li { background: #1c2026; border-color: #2b3138; }
.wdemo-fidele .wdemo-app-nom,
.wdemo-fidele .wdemo-panneau-nom { color: #e6e9ec; }
.wdemo-fidele .wdemo-app-aide,
.wdemo-fidele .wdemo-panneau-aide,
.wdemo-fidele .wdemo-panneau-etat { color: #9aa4ae; }
.wdemo-fidele .wdemo-app-temoin { background: #232930; border-color: #39424c; color: #9aa4ae; }
.wdemo-fidele li.est-actif .wdemo-app-etat,
.wdemo-fidele li[data-cle="ampoule"].est-actif .wdemo-app-temoin { color: #f0a72a; }
.wdemo-fidele li[data-cle="prise"].est-actif .wdemo-app-temoin,
.wdemo-fidele li[data-cle="camera"].est-actif .wdemo-app-temoin {
color: #f0a72a; border-color: #f0a72a;
}
.wdemo-fidele .wdemo-peau { background: #232930; border-color: #39424c; color: #cfd6dd; }
.wdemo-fidele .wdemo-pastille {
border-radius: 14px; background: #2c3138; border-color: #39424c; color: #9aa4ae;
}
.wdemo-fidele .est-allume .wdemo-pastille { color: #f0a72a; }
.wdemo-fidele .wdemo-vue { border-color: #2b3138; }
.wdemo-fidele .wdemo-bulle[data-cle="prise"].est-allume .wdemo-pastille,
.wdemo-fidele .wdemo-bulle[data-cle="camera"].est-ouvert .wdemo-pastille {
color: #f0a72a; border-color: #f0a72a; box-shadow: 0 6px 18px rgb(0 0 0 / .45);
}
.focus { position: relative; }
.focus-detail[data-ouverture="page"] > summary {
position: relative; z-index: 60; background: var(--creme);
}
.focus-detail[data-ouverture="page"][open] > summary { background: var(--papier); }
.focus-detail[data-ouverture="page"] > .focus-page {
position: absolute; inset: 0; z-index: 50;
transform-style: preserve-3d;        
border-radius: 3px;
will-change: transform;
}
.focus-detail[data-ouverture="page"] > .focus-page > .focus-recto,
.focus-detail[data-ouverture="page"] > .focus-page > .focus-verso {
position: absolute; inset: 0; border-radius: 3px;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translateZ(0);            
border: 1px solid var(--filet);
box-shadow: 0 14px 44px rgb(34 30 26 / .22);
}
.focus-detail[data-ouverture="page"] > .focus-page > .focus-recto {
background: var(--papier); overflow: auto;
padding: clamp(1.2rem, 2.2vw, 1.8rem);
padding-bottom: 3.4rem;              
}
.focus-detail[data-ouverture="page"] > .focus-page > .focus-verso {
transform: translateZ(0) rotateY(180deg);
background:
linear-gradient(to left, rgb(34 30 26 / .07), transparent 38%),
linear-gradient(to bottom, var(--creme), var(--papier));
}
.focus-detail[data-ouverture="page"] > .focus-page > .focus-recto::before {
content: ""; position: absolute; top: 0; bottom: 0; right: 0;
width: 3px; background: var(--filet);
}
.focus-detail > summary::marker { content: "▸ "; }
.focus-detail[open] > summary::marker { content: "▾ "; }
.focus-detail[data-ouverture="page"][open] > summary::marker { content: "◂ "; }
@keyframes focus-glisse {
from { opacity: 0; transform: translateX(1.2rem); }
to   { opacity: 1; transform: none; }
}
@keyframes focus-livre {
0%   { transform: perspective(1500px) translateZ(2px) rotateY(124deg); animation-timing-function: ease-out; }
10%  { transform: perspective(1500px) translateZ(2px) rotateY(118deg); animation-timing-function: linear; }
50%  { transform: perspective(1500px) translateZ(2px) rotateY(88deg);  animation-timing-function: linear; }
78%  { transform: perspective(1500px) translateZ(2px) rotateY(34deg);  animation-timing-function: cubic-bezier(.33, .9, .4, 1); }
100% { transform: perspective(1500px) translateZ(2px) rotateY(0deg); }
}
@keyframes focus-ombre-recto {
0%, 47% { opacity: .70; }
70%     { opacity: .42; }
100%    { opacity: 0; }
}
@keyframes focus-ombre-verso {
0%   { opacity: .30; }
26%  { opacity: .62; }
47%  { opacity: .70; }
100% { opacity: .70; }
}
.focus-detail[data-ouverture="page"][data-animation="livre"][open] > .focus-page > .focus-recto::after,
.focus-detail[data-ouverture="page"][data-animation="livre"][open] > .focus-page > .focus-verso::after {
content: ""; position: absolute; inset: 0; border-radius: 3px;
pointer-events: none;
}
.focus-detail[data-ouverture="page"][data-animation="livre"] > .focus-page {
--pli: rgb(34 30 26 / .62) 0%,      
rgb(34 30 26 / .34) 8%,
rgb(34 30 26 / .10) 22%,
rgb(34 30 26 / 0)   42%,     
rgb(34 30 26 / .06) 58%,
rgb(34 30 26 / .22) 78%,
rgb(34 30 26 / .42) 100%;    
}
.focus-detail[data-ouverture="page"][data-animation="livre"][open] > .focus-page > .focus-recto::after {
background: linear-gradient(to left, var(--pli));   
}
.focus-detail[data-ouverture="page"][data-animation="livre"][open] > .focus-page > .focus-verso::after {
background: linear-gradient(to right, var(--pli));  
}
.focus-detail[data-ouverture="page"][data-animation="livre"][open] > .focus-page > .focus-recto::after {
animation: focus-ombre-recto calc(var(--focus-duree) * var(--focus-vitesse)) linear both;
}
.focus-detail[data-ouverture="page"][data-animation="livre"][open] > .focus-page > .focus-verso::after {
animation: focus-ombre-verso calc(var(--focus-duree) * var(--focus-vitesse)) linear both;
}
.focus-detail { --focus-vitesse: 1; --focus-duree: 1500ms; }
.focus-detail[data-ouverture="page"][data-animation="glissement"][open] > .focus-page {
animation: focus-glisse calc(var(--focus-duree) * var(--focus-vitesse)) ease-out both;
}
.focus-detail[data-ouverture="page"][data-animation="livre"][open] > .focus-page {
transform-origin: right center; backface-visibility: hidden;
animation: focus-livre calc(var(--focus-duree) * .7 * var(--focus-vitesse)) linear both;
}
.focus-detail[data-animation="aucune"][open] > .focus-page,
.focus-detail:not([data-ouverture="page"])[open] > .focus-page { animation: none; }
@media (prefers-reduced-motion: reduce) {
.focus-detail[open] > .focus-page { animation: none !important; }
}
@media (max-width: 1180px) {
@keyframes focus-livre-etroit {
0%   { transform: perspective(1000px) translateZ(2px) rotateY(96deg); animation-timing-function: ease-out; }
14%  { transform: perspective(1000px) translateZ(2px) rotateY(88deg); animation-timing-function: linear; }
62%  { transform: perspective(1000px) translateZ(2px) rotateY(38deg); animation-timing-function: cubic-bezier(.33, .9, .4, 1); }
100% { transform: perspective(1000px) translateZ(2px) rotateY(0deg); }
}
@keyframes focus-ombre-recto-etroit {
0%, 14% { opacity: .66; }
62%     { opacity: .34; }
100%    { opacity: 0; }
}
@keyframes focus-ombre-verso-etroit {
0%  { opacity: .34; }
14% { opacity: .66; }
100% { opacity: .66; }
}
.focus-detail[data-ouverture="page"][data-animation="livre"][open] > .focus-page {
animation-name: focus-livre-etroit;
}
.focus-detail[data-ouverture="page"][data-animation="livre"][open] > .focus-page > .focus-recto::after {
animation-name: focus-ombre-recto-etroit;
}
.focus-detail[data-ouverture="page"][data-animation="livre"][open] > .focus-page > .focus-verso::after {
animation-name: focus-ombre-verso-etroit;
}
}
@media (max-width: 1180px) {
.unite + .unite {
margin-top: clamp(2.2rem, 6vw, 3.2rem);
padding-top: clamp(2.2rem, 6vw, 3.2rem);
border-top: 1px solid var(--filet);
}
}
.menuctx-groupe {
font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
color: var(--encre-3); padding: .55rem .6rem .2rem;
border-top: 1px solid var(--filet); margin-top: .3rem;
}
.focus-detail[data-ouverture="page"] .focus-recto dt {
font-size: .88rem; margin-top: .75rem;
}
.focus-detail[data-ouverture="page"] .focus-recto dt:first-child { margin-top: 0; }
.focus-detail[data-ouverture="page"] .focus-recto dd {
font-size: .855rem; line-height: 1.5; margin-top: .2rem;
}
.focus-coin {
position: absolute; left: 0; bottom: 0; width: 3.4rem; height: 3.4rem;
border: 0; padding: 0; cursor: pointer; background: none;
display: grid; place-items: end start; color: var(--encre-2);
transition: transform .18s ease, color .18s ease;
}
.focus-coin::before {
content: ""; position: absolute; left: 0; bottom: 0;
border-style: solid; border-width: 0 0 3.4rem 3.4rem;
border-color: transparent transparent var(--creme) transparent;
filter: drop-shadow(2px -2px 3px rgb(34 30 26 / .18));
}
.focus-coin-fleche {
position: relative; margin: 0 0 .5rem .55rem; font-size: 1.05rem; line-height: 1;
}
.focus-coin:hover, .focus-coin:focus-visible { color: var(--vert); }
.focus-coin:hover .focus-coin-fleche,
.focus-coin:focus-visible .focus-coin-fleche { transform: translate(-2px, 2px); }
.focus-coin-fleche { transition: transform .18s ease; }
.focus-coin:hover::before, .focus-coin:focus-visible::before {
border-bottom-color: var(--papier);
filter: drop-shadow(3px -3px 5px rgb(34 30 26 / .26));
}
.focus-detail:not([data-ouverture="page"]) .focus-coin { display: none; }
.hero { overflow-x: clip; }
.menuctx-curseur { padding: .5rem .6rem .2rem; }
.menuctx-curseur-nom { font-size: .8rem; color: var(--encre-2); }
.menuctx-curseur-ligne { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.menuctx-curseur-ligne input[type="range"] { flex: 1; min-width: 6rem; accent-color: var(--vert); }
.menuctx-curseur-valeur {
width: 3.6rem; font: inherit; font-size: .82rem; text-align: right;
border: 1px solid var(--filet); border-radius: 2px; padding: .15rem .3rem;
background: var(--papier); color: var(--encre);
}
.menuctx-curseur-unite { font-size: .82rem; color: var(--encre-3); }
.menuctx-curseur-aide { font-size: .68rem; color: var(--encre-3); margin-top: .3rem; }
:root { --entete-h: 4.25rem; }
@media (min-width: 1181px) {
html[data-plaquette][data-accrochage] { scroll-snap-type: y proximity; }
html[data-plaquette][data-accrochage] .unite {
scroll-snap-align: start;
scroll-snap-stop: normal;        
}
html[data-plaquette] .unite {
min-height: 100dvh;
scroll-margin-top: 0;
display: flex; flex-direction: column; justify-content: center;
}
html[data-plaquette] main > section:first-of-type .unite {
min-height: calc(100dvh - var(--entete-h));
scroll-snap-align: none;
justify-content: flex-start;
padding-top: calc(var(--esp-int) / 2);
}
html[data-plaquette] .unite-libre {
min-height: 0; justify-content: flex-start; scroll-snap-align: none;
}
html[data-plaquette] main > section:has(.unite) { padding-block: 0; }
html[data-plaquette] main > section:has(.unite):first-of-type { padding-top: 0; }
html[data-plaquette] main > section:has(.unite):last-of-type { padding-bottom: 0; }
html[data-plaquette] .qualite-grille { margin-top: .9rem; }
html[data-plaquette] .unite > .chapo { margin-top: .6rem; }
@media (max-height: 660px) {
html[data-plaquette] .unite-criteres,
html[data-plaquette] #formations .unite,
html[data-plaquette] #accompagnement .unite { min-height: 0; scroll-snap-align: none; }
}
html[data-plaquette] .unite > * + * { margin-top: 1.5rem; }
html[data-plaquette] .unite > .carrousel-barre { margin-top: .6rem; }
html[data-plaquette] .ia-duo {
display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.6rem; align-items: start;
}
html[data-plaquette] .ia-duo > * { margin-top: 0; }
html[data-plaquette] .ia-duo > .arguments { grid-column: 1; grid-row: 1; }
html[data-plaquette] .ia-duo > .carrousel-barre { grid-column: 1; grid-row: 2; }
html[data-plaquette] .ia-duo > .franchise { grid-column: 2; grid-row: 1 / span 2; }
html[data-plaquette] #accompagnement .unite {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
column-gap: clamp(2rem, 4vw, 3.4rem);
align-content: center;
}
html[data-plaquette] #accompagnement .unite > .oeil     { grid-area: 1 / 1; }
html[data-plaquette] #accompagnement .unite > h2        { grid-area: 2 / 1; }
html[data-plaquette] #accompagnement .unite > .doctrine { grid-area: 3 / 1; }
html[data-plaquette] #accompagnement .unite > .chapo    { grid-area: 4 / 1; }
html[data-plaquette] #accompagnement .unite > .poles {
grid-area: 1 / 2 / 5 / 3; align-self: center; margin-top: 0;
}
html[data-plaquette] #accompagnement .unite > .carrousel-barre {
grid-area: 5 / 2; margin-top: .6rem;
}
html[data-plaquette] #accompagnement .unite > * + * { margin-top: .8rem; }
}
.langues { display: flex; gap: .35rem; align-items: flex-start; margin-left: auto; }
@media (max-width: 1400px) { .langues { margin-left: -1.4rem; } }
.langue {
display: flex; flex-direction: column; align-items: center; gap: .16em;
text-decoration: none; color: var(--encre-3);
font-family: var(--sans); font-size: .6rem; letter-spacing: .05em;
line-height: 1;
padding: .45rem .2rem;
}
.drapeau {
width: 1.25em; height: auto; display: block;
border: 1px solid var(--filet); border-radius: 1px;
}
.langue-code { font-weight: 600; }
.langue:hover { color: var(--vert); }
.langue:hover .drapeau { border-color: var(--vert-clair); }
.langue-active { color: var(--encre); }
.langue-active .drapeau { border-color: var(--encre-2); }
.entete:is(.boutons-dessous, .a-empiler) .langues { grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 620px) { .langues { gap: .6rem; } .drapeau { width: 1.35em; } }

/* ======================== [3/3] reglages.css ========================
   Reglages de mise en scene, generes depuis content/pages.json */
:root {
--reg-vitesse: 15;
--reg-permute: 300;
--reg-entree: 300;
--reg-voile: 70;
--reg-flou: 3;
--reg-popup: 70;
--reg-fond: 90;
--reg-entete: 90;
--esp-haut-desk: 28px;
--esp-bas-desk: 28px;
--esp-int-desk: 104px;
--esp-int-mob: 88px;
--typo-mini: 0.8438rem;
--typo-maxi: 1.0625rem;
--typo-pente: 1.4352;
--typo-fixe: 0.2597rem;
}