/* O'Guia — piste « Altitude » (retenue le 2026-10-20).
   Guia veut dire montagne : la marque se dessine en courbes de niveau. Bleus
   froids, Epilogue seule, très grands titres en graisse fine, beaucoup d'air,
   un seul motif — la ligne de niveau.

   Cette feuille porte tout l'habillage : celui du site (en-tête, pied, pages)
   et celui des sections, rendues par les widgets de l'extension oguia-site.
   Reprise telle quelle de la maquette oguia-design/altitude.html ; les
   ajustements propres à WordPress sont en fin de fichier. */
:root {
    --lin: #F7F9FC;
    --brume: #EBF0F7;
    --glacier: #D3DFEE;
    --ciel: #8FB3DE;
    --eau: #3B74B3;
    --nuit: #0F1F3A;
    --encre: #13233F;
    --doux: rgba(19, 35, 63, .66);
    --filet: rgba(59, 116, 179, .22);
    --gouttiere: clamp(1.25rem, 4vw, 3rem);
}
* { box-sizing: border-box; }
/* Un élément masqué l'est vraiment, quel que soit son style d'affichage. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Epilogue', system-ui, sans-serif; color: var(--encre); background: var(--lin); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.conteneur { width: 100%; max-width: 82rem; margin-inline: auto; padding-inline: var(--gouttiere); }
.etiquette { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--eau); }
.titre { font-weight: 200; letter-spacing: -.035em; line-height: .98; margin: 0; }
.titre b { font-weight: 700; }
.bouton { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.6rem; border-radius: 999px; border: 0; font: inherit; font-weight: 700; font-size: .9375rem; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.bouton:hover { transform: translateY(-2px); }
.bouton--plein { background: var(--nuit); color: #fff; }
.bouton--plein:hover { background: var(--eau); }
.bouton--trait { background: none; box-shadow: inset 0 0 0 1.5px var(--encre); color: var(--encre); }
.bouton svg { width: 1rem; height: 1rem; }

/* — Courbes de niveau — */
.niveaux { position: absolute; pointer-events: none; color: var(--eau); }
.niveaux path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* — En-tête — */
/* Il reste à portée de main : fixe, transparent sur le haut de page, voilé
   dès qu'on défile ; il se retire quand on descend pour lire, et revient
   dès qu'on remonte (script du thème). */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; transition: transform .35s cubic-bezier(.3,.8,.3,1), background-color .3s ease, box-shadow .3s ease; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; height: 5.5rem; transition: height .3s ease; }
.entete.defile { background: rgba(247, 249, 252, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--filet); }
.entete.defile .conteneur { height: 4.6rem; }
.entete.cache:not(.ouvert) { transform: translateY(-100%); }
.entete img { height: 2.1rem; width: auto; }
.entete nav { display: flex; gap: 2.2rem; font-size: .875rem; font-weight: 600; }
.entete nav a { text-decoration: none; opacity: .8; }
.entete nav a:hover { opacity: 1; }
.entete .bouton { padding: .75rem 1.25rem; }

/* — Héros : le texte à gauche, la bouteille annotée à droite — */
.heros { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; padding: 7rem 0 4rem; }
/* Derrière le héros, une chaîne de montagnes en aplats superposés, sur toute
   la largeur, au bas de l'écran : « Guia » veut dire montagne. Les couleurs
   restent proches du fond, et la base se fond dans la page. */
.heros__montagnes { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(15rem, 40vw, 34rem); pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.heros__grille { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.heros .titre { font-size: clamp(2.8rem, 5.4vw, 5.8rem); }
.heros__chapeau { max-width: 30rem; margin: 1.8rem 0 2.4rem; font-size: 1.0625rem; line-height: 1.6; color: var(--doux); }
.heros__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* La bouteille annotée : tout tient dans un seul SVG, texte compris, pour
   qu'aucune flèche ne dérive de sa cible quand la planche se met à l'échelle.
   Tracés repris tels quels du site actuel. */
.planche { width: 100%; max-width: 46rem; justify-self: center; }
.planche svg { display: block; width: 100%; height: auto; overflow: visible; }
.planche__trait { fill: none; stroke: var(--encre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.planche__nom { font-family: 'Epilogue', sans-serif; font-size: 15px; font-weight: 500; fill: rgba(19,35,63,.55); }
.planche__chiffre { font-family: 'Epilogue', sans-serif; font-size: 27px; font-weight: 800; fill: var(--encre); letter-spacing: -.5px; }
.planche__unite { font-size: 13px; font-weight: 500; fill: rgba(19,35,63,.45); }
.planche svg * { transform-box: fill-box; }
/* La bouteille flotte et se balance, posée sur son ombre qui respire avec
   elle ; un reflet balaie le verre et des bulles montent dans l'eau. */
.planche__flacon { transform-origin: 50% 100%; animation: flotter 5s ease-in-out infinite; }
@keyframes flotter {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-9px) rotate(-1.4deg); }
    50% { transform: translateY(-15px) rotate(0); }
    75% { transform: translateY(-9px) rotate(1.4deg); }
}
.planche__ombre { fill: rgba(15,31,58,.16); transform-origin: center; animation: ombre 5s ease-in-out infinite; }
@keyframes ombre { 50% { transform: scale(.78); opacity: .55; } }
.planche__reflet { animation: balayer 5.5s ease-in-out infinite; }
@keyframes balayer { 0% { transform: translateX(0) skewX(-14deg); } 55%, 100% { transform: translateX(300px) skewX(-14deg); } }
.planche__bulle { fill: #fff; opacity: 0; animation: bullonner linear infinite; }
@keyframes bullonner { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .85; } 85% { opacity: .5; } 100% { transform: translateY(-300px); opacity: 0; } }
@keyframes tracer { from { stroke-dashoffset: 1; } }
@keyframes paraitre { from { opacity: 0; } }
/* Au repos tout est lisible ; l'animation ne part qu'une fois la classe
   posée par le script — sans lui, la planche reste complète. */
.planche.vu .planche__trait { stroke-dasharray: 1; animation: tracer .7s ease backwards; }
.planche.vu .planche__val { animation: paraitre .5s ease backwards; }
.planche.vu .t1 { animation-delay: .2s; } .planche.vu .v1 { animation-delay: .55s; }
.planche.vu .t2 { animation-delay: .6s; } .planche.vu .v2 { animation-delay: .95s; }
.planche.vu .t3 { animation-delay: 1s; } .planche.vu .v3 { animation-delay: 1.35s; }
.planche.vu .t4 { animation-delay: 1.4s; } .planche.vu .v4 { animation-delay: 1.75s; }
.planche.vu .t5 { animation-delay: 1.8s; } .planche.vu .v5 { animation-delay: 2.15s; }
.planche.vu .t6 { animation-delay: 2.2s; } .planche.vu .v6 { animation-delay: 2.55s; }
/* Sur téléphone, les flèches deviendraient illisibles : la bouteille seule,
   et les six valeurs en grille à côté. */
.releve-mobile { display: none; }

/* — Notre eau : des strates empilées —
   Quatre couches pleine largeur, de la hauteur de leur contenu, chacune
   posée sur la précédente, bord arrondi par-dessus : la coupe de la
   montagne, de la pluie à la bouteille. La dernière, bleu nuit comme la
   gamme, touche la section suivante : les deux ne font qu'un fond. La
   section passe au-dessus de la gamme pour que la flèche y descende. */
/* Le pied de la section est bleu nuit, sous la dernière couche : un fond
   blanc jusqu'en bas transparaîtrait sous son bord en un filet clair. */
.chemin { position: relative; z-index: 1; background: linear-gradient(#fff calc(100% - 2rem), var(--nuit) 0); }
.chemin__tete { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; padding-block: clamp(5rem, 9vw, 8rem) 3rem; }
.chemin .titre { font-size: clamp(2.2rem, 4.2vw, 4rem); }
.chemin__citation { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--doux); max-width: 32rem; }
.couche { --recouvre: 26px; position: relative; padding-block: 1.6rem calc(1.6rem + var(--recouvre)); border-radius: 1.6rem 1.6rem 0 0; box-shadow: 0 -12px 30px -20px rgba(15, 31, 58, .45); }
.couche + .couche { margin-top: calc(-1 * var(--recouvre)); }
.couche--4 { padding-bottom: 1.6rem; }
.couche__ligne { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) minmax(0, 1.25fr) auto; gap: 1.5rem; align-items: center; }
.couche__num { font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 200; letter-spacing: -.04em; line-height: 1; }
.couche small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.couche h3 { margin: .3rem 0 0; font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; }
.couche p { margin: 0; line-height: 1.6; font-size: .9375rem; }
.couche--1 { background: var(--brume); }
.couche--2 { background: #C9D9EE; }
.couche--3 { background: var(--eau); color: #fff; }
.couche--4 { background: var(--nuit); color: #fff; }
.couche--1 small, .couche--2 small { color: var(--eau); }
.couche--3 small, .couche--4 small { color: #CFE3F8; }
.couche--1 p, .couche--2 p { color: var(--doux); }
.couche--3 p, .couche--4 p { color: rgba(255,255,255,.8); }

/* Les illustrations, en aplats de la gamme de bleus, légèrement vivantes. */
.couche__illu { width: clamp(6rem, 9vw, 8.5rem); height: auto; display: block; overflow: visible; }
.couche__illu * { transform-box: fill-box; }
.illu-pluie { animation: pleuvoir 1.4s linear infinite; opacity: 0; }
@keyframes pleuvoir { 0% { transform: translateY(-4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
.illu-nuage { animation: deriver 6s ease-in-out infinite alternate; }
@keyframes deriver { to { transform: translateX(6px); } }
/* La goutte minérale : les strates ondulent dans la goutte, les cristaux
   (les minéraux dont l'eau se charge) scintillent. */
.minerale__vague { animation: onduler 4s linear infinite; }
.minerale__vague--lente { animation-duration: 6s; }
.minerale__vague--inverse { animation-direction: reverse; animation-duration: 5s; }
@keyframes onduler { to { transform: translateX(-40px); } }
.minerale__cristal { transform-origin: center; animation: scintiller 2.4s ease-in-out infinite; opacity: 0; }
@keyframes scintiller { 0%, 100% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }
/* Le forage : un éclat de lumière remonte le tube (tracé ramené à 100 : un
   tiret de 16 suivi d'un vide de 184, décalé de 16, juste avant le départ,
   à -100, juste après l'arrivée), puis une goutte claire perle au bec. */
.eclat { stroke-dasharray: 16 184; stroke-dashoffset: 16; animation: remonter 2.6s linear infinite; }
@keyframes remonter { from { stroke-dashoffset: 16; } to { stroke-dashoffset: -100; } }
.perle { transform-origin: 50% 0; animation: perler 2.6s ease-in infinite; }
@keyframes perler {
    0% { transform: scale(.15); opacity: 0; }
    15% { opacity: 1; }
    60% { transform: scale(1); }
    78% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(12px) scale(1); opacity: 0; }
}
/* La flèche de la dernière couche : son cadre a la taille des autres
   illustrations (les colonnes restent alignées d'une couche à l'autre),
   mais le tracé, plus grand, déborde vers le bas et descend jusque dans la
   gamme. Il se trace quand la couche arrive à l'écran, puis désigne
   doucement la section. */
.couche__suite { position: relative; display: block; width: clamp(6rem, 9vw, 8.5rem); aspect-ratio: 140 / 110; color: #CFE3F8; }
.couche__suite svg { position: absolute; top: -.4rem; left: -10%; width: 120%; height: auto; overflow: visible; }
.couche__suite path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1), stroke .2s; }
.couche__suite .suite__pointe { transition-duration: .3s, .2s; transition-delay: 1.05s, 0s; }
/* Décalé un peu au-delà de 1 : à 1 pile, le bout arrondi d'un tiret de
   longueur nulle laisserait un point visible. */
.prete .couche__suite path { stroke-dashoffset: 1.02; transition: none; }
.vue .couche__suite svg { animation: designer 2.4s ease-in-out 1.5s infinite; }
@keyframes designer { 50% { transform: translateY(8px); } }
.couche__suite:hover, .couche__suite:focus-visible { color: #fff; }

/* — Gamme — */
/* Elle remonte de 2 px sous Notre eau : bord à bord à une position
   fractionnaire, le fond de la page passerait entre les deux sections en un
   filet clair. */
.gamme { margin-top: -2px; padding: calc(4rem + 2px) 0 5rem; background: var(--nuit); color: #fff; position: relative; overflow: hidden; }
.gamme .niveaux { color: var(--ciel); inset: -20% -40% 30% 20%; opacity: .18;
    /* Les courbes naissent sous la jonction avec la dernière couche :
       coupées net au bord de la section, elles trahiraient la couture. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 22%, #000 50%); mask-image: linear-gradient(to bottom, transparent 22%, #000 50%); }
.gamme .etiquette { color: var(--ciel); }
.gamme .titre { font-size: clamp(2.2rem, 3.8vw, 3.6rem); }
/* Chaque format garde sa bouteille et sa fiche ensemble : côte à côte sur
   grand écran, en liste sur téléphone, sans qu'une fiche puisse se retrouver
   sous la bouteille d'un autre format. */
.etagere { --haut: 18rem; position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 1rem; margin-top: 3rem; }
.produit { display: flex; flex-direction: column; min-width: 0; }
.format { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: var(--haut); padding: 0; background: none; border: 0; cursor: pointer; }
/* Hauteurs réelles : 20, 23, 32 et 48 cm, rapportées à la bonbonne. */
.format img { height: calc(var(--haut) * var(--h) / 100); width: auto; transform-origin: 50% 100%; transition: transform .35s ease, filter .35s ease; filter: drop-shadow(0 25px 20px rgba(0,0,0,.35)); }
/* Survolée ou choisie, une bouteille se soulève et se balance doucement,
   éclairée par en dessous. Aucune n'est choisie d'avance : toutes répondent. */
.format:hover img, .format:focus-visible img, .format[aria-selected="true"] img {
    animation: balancer 1.6s ease-in-out infinite alternate;
    filter: drop-shadow(0 30px 24px rgba(0,0,0,.4)) drop-shadow(0 0 18px rgba(143,179,222,.35));
}
@keyframes balancer { from { transform: translateY(-.8rem) rotate(-1.6deg); } to { transform: translateY(-1.1rem) rotate(1.6deg); } }
.format:focus-visible { outline: none; }
/* À l'entrée de la section, les bouteilles montent en place l'une après
   l'autre. Sans script, elles sont simplement là. */
.etagere.prete .format img { opacity: 0; transform: translateY(3rem); }
.etagere.vue .format img { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.2,.9,.3,1.15), opacity .6s ease; }
.etagere.vue .produit:nth-child(2) img { transition-delay: .12s; }
.etagere.vue .produit:nth-child(3) img { transition-delay: .24s; }
.etagere.vue .produit:nth-child(4) img { transition-delay: .36s; }
.fiche { padding-top: 2.75rem; text-align: center; }
.fiche strong { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.fiche span { display: block; margin-top: .3rem; font-size: .875rem; color: rgba(255,255,255,.6); }
.fiche p { margin: .6rem 0 0; font-size: .9375rem; line-height: 1.55; color: rgba(255,255,255,.82); }

/* — Nos engagements — */
.engagements { position: relative; padding: 9rem 0 8rem; overflow: hidden; }
.engagements .niveaux { inset: 20% 45% -30% -25%; opacity: .3; }
.engagements__tete { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3.5rem; }
.engagements .titre { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
.engagements__tete p { max-width: 24rem; margin: 0; color: var(--doux); line-height: 1.6; }
/* Des colonnes à même la page, sans cadre, ombre ni fond : l'air entre
   elles suffit à les séparer. */
.valeurs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem clamp(1.5rem, 3vw, 3rem); }
.valeur { position: relative; display: flex; flex-direction: column; }
.valeur__num { font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--ciel); }
.valeur__pictogramme { position: relative; width: 6.5rem; height: 6.5rem; margin: 1.4rem 0 1.6rem; display: grid; place-items: center; }
/* Le pictogramme posé au centre de ses propres courbes de niveau. */
.valeur__pictogramme::before, .valeur__pictogramme::after { content: ''; position: absolute; border: 1px solid var(--glacier); border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; }
.valeur__pictogramme::before { inset: 0; }
.valeur__pictogramme::after { inset: .7rem; border-radius: 52% 48% 46% 54% / 48% 54% 46% 52%; }
.valeur__pictogramme img { position: relative; width: 3.8rem; height: 3.8rem; transition: transform .4s ease; }
.valeur:hover .valeur__pictogramme img { transform: scale(1.08) rotate(-4deg); }
.valeur h3 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.valeur p { margin: .6rem 0 0; color: var(--doux); line-height: 1.55; }

/* — Nos politiques : RSE et QHSE côte à côte, séparées par un filet — */
.politiques { position: relative; padding: 8rem 0; background: var(--brume); overflow: hidden; }
.politiques .niveaux { inset: -30% -30% -30% 55%; opacity: .35; }
.politiques__grille { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.politique { padding-inline: clamp(0rem, 3vw, 3.5rem); }
.politique:first-child { padding-left: 0; border-right: 1px solid var(--filet); }
.politique:last-child { padding-right: 0; }
.politique h2 { margin: .8rem 0 1.2rem; font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.politique h2 b { font-weight: 700; }
.politique > p { margin: 0 0 2rem; color: var(--doux); line-height: 1.7; max-width: 32rem; }
.points { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.points li { display: flex; gap: .85rem; align-items: start; }
.points svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .05rem; color: var(--eau); }
.points b { display: block; font-size: .9375rem; }
.points span { display: block; margin-top: .15rem; font-size: .8125rem; line-height: 1.45; color: var(--doux); }

/* — Devis — */
.devis { position: relative; padding: 9rem 0; overflow: hidden; }
.devis .niveaux { inset: -10% -30% 40% 45%; opacity: .35; }
.devis__tete { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3.5rem; }
.devis .titre { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
.devis__tete p { margin: 0 0 1.2rem; color: var(--doux); line-height: 1.65; }
.devis__tete--large { grid-template-columns: 1fr; gap: 1.6rem; }
.devis__tete--large .titre { font-size: clamp(2rem, 3.8vw, 3.6rem); }
.devis__tete--large > div:last-child { max-width: 46rem; }
.segments { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.segments li { padding: .45rem .9rem; border-radius: 999px; background: var(--brume); font-size: .8125rem; font-weight: 600; }
.formulaire { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: start; }
/* Le formulaire se pose à même la page, sans cadre, ombre ni fond : il
   s'aligne sur le titre et forme un ensemble avec les deux encarts à côté.
   Ses champs passent en blanc pour se détacher du fond. */
.carte { padding: 0; }
fieldset { margin: 0; padding: 0; border: 0; }
fieldset + fieldset { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--filet); }
/* Flottante, la légende sort de la bordure du groupe au lieu de la couper
   en son milieu (rendu natif d'un <legend>). */
legend { float: left; width: 100%; padding: 0; margin-bottom: 1.4rem; font-size: 1.125rem; font-weight: 700; }
legend + * { clear: both; }
legend span { color: var(--eau); margin-right: .5rem; font-weight: 300; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.champ--large { grid-column: 1 / -1; }
.champ label { display: block; margin-bottom: .45rem; font-size: .8125rem; font-weight: 600; }
.champ label i { font-style: normal; color: var(--eau); }
.champ input, .champ select, .champ textarea { width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--glacier); border-radius: .9rem; background: #fff; font: inherit; font-size: .9375rem; color: var(--encre); outline: none; transition: border-color .2s, background .2s; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--eau); background: #fff; }
.champ textarea { min-height: 6.5rem; resize: vertical; }
.quantites { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.qte { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.1rem .6rem 1rem; border-radius: 1.1rem; background: #fff; border: 1.5px solid transparent; transition: border-color .2s, background .2s; }
.qte.choisi { border-color: var(--eau); }
.qte img { height: 4.5rem; width: auto; }
.qte strong { font-size: 1rem; }
.qte small { margin-top: -.45rem; font-size: .75rem; color: var(--doux); }
.compteur { display: flex; align-items: center; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--glacier); }
.compteur button { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 1.1rem; font-weight: 700; color: var(--encre); cursor: pointer; }
.compteur input { width: 2.6rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; text-align: center; color: var(--encre); -moz-appearance: textfield; }
.compteur input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* — L'assistant : une étape à la fois, une jauge qui se remplit d'eau — */
.assistant__etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.assistant__etapes button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: .875rem; font-weight: 600; color: var(--doux); text-align: left; cursor: default; }
.assistant__etapes button:not(:disabled) { cursor: pointer; }
.assistant__etapes button:not(:disabled):hover { color: var(--encre); }
.assistant__etapes span { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--glacier); font-size: .8125rem; font-weight: 800; color: var(--doux); transition: background .35s, color .35s, box-shadow .35s; }
.assistant__etapes .en-cours button { color: var(--encre); }
.assistant__etapes .en-cours span { background: #fff; box-shadow: inset 0 0 0 2px var(--eau); color: var(--eau); }
.assistant__etapes .fait span { background: var(--eau); box-shadow: none; color: #fff; }
.assistant__jauge { position: relative; height: 6px; margin: 1.1rem 0 2.4rem; border-radius: 6px; background: var(--glacier); overflow: hidden; }
.assistant__jauge span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; overflow: hidden;
    background: linear-gradient(90deg, #9CC2EA, var(--eau)); transition: width .6s cubic-bezier(.3,.9,.3,1); }
.assistant__jauge span::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(110deg, transparent 0 18px, rgba(255,255,255,.45) 18px 24px, transparent 24px 42px); animation: ruisseler 1.2s linear infinite; }
@keyframes ruisseler { to { background-position: 42px 0; } }
.pas { animation: entrer .45s cubic-bezier(.2,.8,.3,1); }
.pas.depuis-gauche { animation-name: entrer-gauche; }
@keyframes entrer { from { opacity: 0; transform: translateX(28px); } }
@keyframes entrer-gauche { from { opacity: 0; transform: translateX(-28px); } }
.pas__titre { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 300; letter-spacing: -.02em; }
.pas__aide { margin: .5rem 0 1.8rem; color: var(--doux); font-size: .9375rem; }
.pas__erreur { margin: 1rem 0 0; font-size: .875rem; font-weight: 600; color: #C2412D; }
.champ em { display: none; margin-top: .35rem; font-style: normal; font-size: .8125rem; font-weight: 600; color: #C2412D; }
.champ.invalide em { display: block; }
.champ.invalide input, .champ.invalide select { border-color: #E08A7B; background: #FFF7F5; }
.choix-liste { display: flex; flex-wrap: wrap; gap: .6rem; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix span { display: inline-block; padding: .8rem 1.15rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--glacier); font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background .2s, box-shadow .2s, color .2s; }
.choix input:checked + span { background: var(--nuit); color: #fff; box-shadow: none; }
.choix input:focus-visible + span { outline: 3px solid var(--ciel); outline-offset: 2px; }
.assistant__nav { display: flex; align-items: center; gap: 1rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--filet); }
.assistant__compte { margin-right: auto; font-size: .8125rem; color: var(--doux); }
.assistant__nav [data-retour]:not([hidden]) + .assistant__compte { margin-left: .4rem; }
.verif { display: grid; gap: .8rem; }
.verif__bloc { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1rem; align-items: start; padding: 1.1rem 1.25rem; border-radius: 1rem; background: #fff; }
.verif__bloc h4 { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eau); }
.verif__bloc p { margin: 0; line-height: 1.6; font-size: .9375rem; }
.verif__bloc button { padding: 0; border: 0; background: none; font: inherit; font-size: .8125rem; font-weight: 700; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.aparte { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }
.recap { padding: 1.75rem; border-radius: 1.5rem; background: var(--nuit); color: #fff; overflow: hidden; position: relative; }
.recap h3 { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; }
.recap ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; font-size: .9375rem; position: relative; }
.recap li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.recap li b { color: var(--ciel); }
.recap .vide { color: rgba(255,255,255,.6); border: 0; }
.recap img { position: absolute; right: -1rem; bottom: -2.5rem; height: 9rem; width: auto; opacity: .18; }
.direct { padding: 1.5rem 1.75rem; border-radius: 1.5rem; background: var(--brume); font-size: .9375rem; line-height: 1.7; }
.direct strong { display: block; margin-bottom: .4rem; }
.direct a { font-weight: 700; text-decoration: none; }
.direct a.wa { color: #1A9E4B; }
.merci { display: none; text-align: center; padding: 3rem 1rem; }
.merci h3 { margin: 1rem 0 .5rem; font-size: 1.75rem; font-weight: 300; letter-spacing: -.02em; }
.merci p { margin: 0; color: var(--doux); }
.envoye .merci { display: block; }
.envoye form, .envoye .assistant__etapes, .envoye .assistant__jauge { display: none; }

/* — Notre source & notre usine : le captage, la filtration, les contrôles,
   puis quelques repères chiffrés sur un bandeau bleu nuit. — */
.usine { position: relative; padding: 8rem 0 7rem; background: #fff; overflow: hidden; }
.usine .niveaux { inset: -20% 45% 25% -30%; opacity: .22; }
.usine__tete { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 4rem; }
.usine .titre { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
.usine__intro { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--doux); max-width: 32rem; }
.usine__photo { position: relative; margin: 0 0 4rem; border-radius: 1.6rem; overflow: hidden; aspect-ratio: 21 / 8; background: var(--brume); }
.usine__photo img { width: 100%; height: 100%; object-fit: cover; }
.piliers { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.pilier { padding-top: 1.8rem; border-top: 1px solid var(--filet); }
.pilier__icone { display: grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: 1.5rem; border-radius: 1.2rem; background: var(--brume); color: var(--eau); }
.pilier__icone svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pilier h3 { margin: 0 0 .7rem; font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; }
.pilier > p { margin: 0 0 1.3rem; color: var(--doux); line-height: 1.6; }
.coches { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.coches li { display: flex; gap: .65rem; align-items: start; font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.coches svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .05rem; color: var(--eau); }
.chiffres { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: 4.5rem; border-radius: 1.6rem; background: var(--nuit); color: #fff; overflow: hidden; }
.chiffres .niveaux { inset: -60% -10% -60% 40%; color: var(--ciel); opacity: .16; }
.chiffre { position: relative; padding: 2.2rem 1.9rem; }
.chiffre + .chiffre { border-left: 1px solid rgba(255,255,255,.12); }
.chiffre strong { display: block; font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 200; letter-spacing: -.035em; line-height: 1; }
.chiffre span { display: block; margin-top: .7rem; font-size: .875rem; line-height: 1.45; color: rgba(255,255,255,.72); }

/* — RSE & engagements communautaires : le titre reste à l'écran pendant
   qu'on lit les trois axes, puis repart avec la section quand le dernier
   est passé. La section coupe ses débords avec « clip » et non « hidden » :
   « hidden » en ferait un conteneur de défilement, et le titre n'y collerait
   plus. Les axes sont numérotés comme les strates de « Notre eau ». — */
.communaute { position: relative; padding: 8rem 0; background: var(--brume); overflow: clip; }
.communaute .niveaux { inset: -30% -30% -30% 55%; opacity: .35; }
.communaute__grille { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.communaute__tete { position: sticky; top: 7rem; }
.communaute .titre { font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.communaute__tete > p:last-child { margin: 1.6rem 0 0; color: var(--doux); line-height: 1.7; max-width: 30rem; }
.axes { display: grid; gap: 0; }
.axe { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1.5rem; padding-bottom: 3.6rem; }
.axe:last-child { padding-bottom: 0; }
.axe__num { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 200; letter-spacing: -.04em; line-height: 1; color: var(--eau); }
.axe h3 { margin: .2rem 0 .7rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.axe p { margin: 0 0 1.2rem; color: var(--doux); line-height: 1.65; }

/* — En-tête d'une page intérieure : le titre à gauche, une image ou la
   gamme à droite. Il laisse la place à l'en-tête du site, qui flotte. — */
.page-tete { position: relative; padding: 10rem 0 5rem; overflow: hidden; }
.page-tete .niveaux { inset: -20% -25% -10% 35%; opacity: .45; }
.page-tete__grille { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-tete .titre { margin-top: .8rem; font-size: clamp(2.6rem, 5vw, 5rem); }
.page-tete__texte { max-width: 32rem; margin: 1.6rem 0 2.2rem; font-size: 1.0625rem; line-height: 1.65; color: var(--doux); }
.page-tete__image img { width: 100%; height: auto; border-radius: 1.6rem; }
.page-tete__gamme { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.6rem, 2vw, 1.6rem); height: 22rem; }
.page-tete__gamme img { height: calc(22rem * var(--h) / 100); width: auto; filter: drop-shadow(0 22px 18px rgba(15,31,58,.22)); }

/* — Les atouts : des pictogrammes au trait, en colonnes à même la page. — */
.atouts { position: relative; padding: 6rem 0 7rem; overflow: hidden; }
.atouts__tete { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3.5rem; }
.atouts .titre { font-size: clamp(2.2rem, 4vw, 3.8rem); }
.atouts__tete > p { max-width: 26rem; margin: 0; color: var(--doux); line-height: 1.6; }
.atouts__grille { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem clamp(1.5rem, 3vw, 3rem); }
.atout .pilier__icone { margin-bottom: 1.2rem; }
.atout h3 { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; }
.atout p { margin: 0; color: var(--doux); line-height: 1.6; }

/* — Le formulaire de distribution : un encadré « Votre projet » en plus. — */
.projet { margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--filet); }
.projet h4 { margin: 0 0 1.1rem; font-size: 1rem; font-weight: 700; }

/* — Bouton WhatsApp flottant — */
.whatsapp { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: .55rem; height: 3.5rem; padding: 0 1.1rem; border-radius: 999px; background: #25D366; color: #fff; font-weight: 700; font-size: .9375rem; text-decoration: none; box-shadow: 0 12px 28px -10px rgba(15,31,58,.5); }
.whatsapp svg { width: 1.6rem; height: 1.6rem; }
/* Comme sur le site en ligne : il attend que le héros soit passé, pour ne
   pas couvrir la barre du bas. */
.whatsapp { opacity: 0; visibility: hidden; transform: translateY(.75rem); transition: opacity .25s, visibility .25s, transform .25s; }
.whatsapp.visible { opacity: 1; visibility: visible; transform: none; }

/* — Pied — */
.pied { padding: 4rem 0 3rem; border-top: 1px solid var(--filet); font-size: .875rem; color: var(--doux); }
.pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; align-items: end; }
.pied img { height: 2rem; width: auto; margin-bottom: 1rem; }

@media (max-width: 1080px) {
    .formulaire { grid-template-columns: 1fr; }
    .aparte { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
    .entete nav { display: none; }
    .valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .engagements__tete { flex-direction: column; align-items: start; }
    .politiques__grille { grid-template-columns: 1fr; gap: 3.5rem; }
    .politique, .politique:first-child, .politique:last-child { padding-inline: 0; border-right: 0; }
    .heros__grille, .chemin__tete, .devis__tete { grid-template-columns: 1fr; }
    .couche { padding-block: 1rem calc(1rem + var(--recouvre)); --recouvre: 20px; border-radius: 1.2rem 1.2rem 0 0; }
    .couche--4 { padding-bottom: 1rem; }
    .couche__ligne { grid-template-columns: 3.9rem minmax(0, 1fr) 4.2rem; gap: .3rem .7rem; }
    .couche__ligne p { grid-column: 2 / -1; grid-row: 2; font-size: .8125rem; line-height: 1.45; }
    /* La flèche, longue, occupe sa colonne sur toute la hauteur de la
       couche : le texte s'arrête avant elle au lieu de passer dessous. */
    .couche--4 .couche__ligne p { grid-column: 2; }
    .couche--4 .couche__suite { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
    .couche__num { font-size: 1.8rem; }
    .couche h3 { font-size: 1.1rem; }
    .couche__illu, .couche__suite { width: 4.2rem; }
    .chemin__tete { gap: 1.2rem; padding-bottom: 2rem; }
    .etagere { --haut: 13rem; grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
    .usine__tete, .page-tete__grille { grid-template-columns: 1fr; gap: 1.4rem; }
    .piliers, .atouts__grille { grid-template-columns: 1fr 1fr; }
    .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chiffre:nth-child(odd of .chiffre) { border-left: 0; }
    .chiffre:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.12); }
    .communaute__grille { grid-template-columns: 1fr; }
    .communaute__tete { position: static; }
    .atouts__tete { flex-direction: column; align-items: start; }
    .page-tete { padding-top: 8rem; }
    .page-tete__gamme { height: 15rem; }
    .page-tete__gamme img { height: calc(15rem * var(--h) / 100); }
    .fiche { padding-top: 1.5rem; }
    .quantites { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    /* La gamme en liste : la bouteille à gauche, à sa taille relative, sa fiche à droite. */
    .etagere { --haut: 7.5rem; grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
    .produit { flex-direction: row; align-items: center; gap: 1.2rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.12); }
    .produit:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
    .format { flex: none; width: 4.5rem; }
    .fiche { padding-top: 0; text-align: left; }
    .fiche strong { font-size: 1.3rem; }
    .fiche p { margin-top: .35rem; font-size: .875rem; }
    .planche { display: none; }
    .releve-mobile { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; margin-top: 1rem; }
    .releve-mobile img { height: 15rem; width: auto; transform-origin: 50% 100%; animation: flotter 5s ease-in-out infinite; }
    .releve-mobile dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem .9rem; margin: 0; }
    .releve-mobile dt { font-size: .75rem; color: var(--doux); }
    .releve-mobile dd { margin: .15rem 0 0; font-size: 1.35rem; font-weight: 800; }
    .releve-mobile dd span { font-size: .6875rem; font-weight: 500; color: var(--doux); margin-left: .2rem; }
    .champs, .aparte, .points { grid-template-columns: 1fr; }
    .assistant__etapes button { flex-direction: column; align-items: start; gap: .35rem; font-size: .6875rem; }
    .verif__bloc { grid-template-columns: 1fr auto; }
    .verif__bloc p { grid-column: 1 / -1; grid-row: 2; }
    .assistant__compte { display: none; }
    .piliers, .atouts__grille { grid-template-columns: 1fr; }
    .axe { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem; }
    .usine, .communaute { padding: 5.5rem 0; }
    .whatsapp span { display: none; }
    .whatsapp { width: 3.5rem; padding: 0; justify-content: center; }
    .pied { padding-bottom: 6rem; }
}
@media (max-width: 560px) {
    .valeurs { grid-template-columns: 1fr; }
    .valeurs { row-gap: 2.2rem; }
    .valeur { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 1.2rem; }
    .valeur__num { width: 100%; }
    .valeur__pictogramme { width: 4.6rem; height: 4.6rem; margin: .6rem 0; }
    .valeur__pictogramme img { width: 2.8rem; height: 2.8rem; }
    .valeur h3 { flex: 1; }
    .valeur p { width: 100%; margin: .4rem 0 0; }
}
@media (max-width: 520px) {
    .entete .bouton { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}


/* ═══ Propre à WordPress ═══ */

/* L'en-tête flotte sur le héros : la barre d'administration le repousse. */
.admin-bar .entete { top: 32px; }
.admin-bar .entete.cache:not(.ouvert) { transform: translateY(calc(-100% - 32px)); }
@media (max-width: 782px) {
    .admin-bar .entete { top: 46px; }
    .admin-bar .entete.cache:not(.ouvert) { transform: translateY(calc(-100% - 46px)); }
}
.entete .custom-logo-link { display: block; }
.entete nav ul, .pied nav ul { display: flex; gap: inherit; margin: 0; padding: 0; list-style: none; }
.entete nav li { margin: 0; }

/* Les sections occupent toute la largeur : Elementor n'ajoute ni marge ni
   espacement autour des widgets O'Guia. */
.elementor-widget[class*="elementor-widget-altitude-"] { width: 100%; }
.elementor-widget[class*="elementor-widget-altitude-"] > .elementor-widget-container { margin: 0; padding: 0; }
/* Elementor retire l'ombre de tous les liens (.elementor a) : le bouton à
   trait la dessine pourtant. */
.elementor a.bouton--trait { box-shadow: inset 0 0 0 1.5px var(--encre); }

/* Hello Elementor colore en rose (#c36) tout bouton survolé ou ciblé, et en
   bleu (#336) tout lien survolé : une bouteille de la gamme cliquée gardait
   un fond rose. Les boutons et les liens du site n'en gardent rien. */
a:hover, a:active { color: inherit; }
[type=button]:hover, [type=button]:focus, [type=submit]:hover, [type=submit]:focus, button:hover, button:focus { background-color: transparent; color: inherit; }
.bouton--plein:hover, .bouton--plein:focus, .whatsapp:hover, .whatsapp:focus { color: #fff; }
.bouton.bouton--plein:focus { background: var(--nuit); }
.bouton.bouton--plein:hover { background: var(--eau); }

/* — Le menu sur téléphone : un bouton rond, un panneau qui s'ouvre sous
   l'en-tête avec les sections, l'Espace B2B et la demande de devis. — */
.entete__actions { display: flex; align-items: center; gap: .6rem; }
.entete__menu, .nav__devis { display: none; }
@media (max-width: 960px) {
    .entete__menu { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: 50%; background: var(--nuit); color: #fff; cursor: pointer; }
    .entete__menu:hover, .entete__menu:focus { background: var(--eau); color: #fff; }
    .entete__menu svg { width: 1.3rem; height: 1.3rem; }
    .entete.ouvert nav { display: block; position: absolute; top: calc(100% - .4rem); left: var(--gouttiere); right: var(--gouttiere); padding: .6rem 1.4rem 1.4rem; border-radius: 1.2rem; background: #fff; box-shadow: 0 24px 50px -24px rgba(15,31,58,.45); }
    .entete.ouvert nav ul { flex-direction: column; gap: 0; }
    .entete.ouvert nav a:not(.bouton) { display: block; padding: .9rem 0; border-bottom: 1px solid var(--filet); font-size: 1rem; opacity: 1; }
    .entete.ouvert .nav__devis { display: flex; justify-content: center; margin-top: 1.2rem; opacity: 1; }
}

/* Le pied : deux menus discrets (pages légales). */
.pied nav ul { gap: 1.2rem; margin-top: .6rem; }
.pied nav a { text-decoration: none; }
.pied nav a:hover { text-decoration: underline; }

/* — Pages simples (mentions légales, confidentialité…) — */
.page-simple { position: relative; padding: 10rem 0 6rem; overflow: hidden; }
.page-simple .niveaux { inset: -40% -30% 40% 50%; opacity: .3; }
.page-simple__tete { position: relative; max-width: 46rem; margin-bottom: 3rem; }
.page-simple .titre { font-size: clamp(2.4rem, 4.6vw, 4rem); margin-top: .6rem; }
.prose { position: relative; max-width: 46rem; font-size: 1.0625rem; line-height: 1.75; color: var(--encre); }
.prose h2 { margin: 2.6rem 0 .8rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.prose h3 { margin: 2rem 0 .6rem; font-size: 1.2rem; font-weight: 700; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; }
.prose a { color: var(--eau); text-underline-offset: 3px; }
.prose img { height: auto; border-radius: 1rem; }

/* — 404 — */
.introuvable { position: relative; min-height: 80svh; display: grid; place-items: center; padding: 9rem 0 5rem; overflow: hidden; text-align: center; }
.introuvable .niveaux { inset: -20%; opacity: .35; }
.introuvable .titre { position: relative; font-size: clamp(2.6rem, 6vw, 5rem); margin: .8rem 0 1.4rem; }
.introuvable p { position: relative; color: var(--doux); margin: 0 0 2rem; }
.introuvable .bouton { position: relative; }