/* Réunion Plomberie Pro · « L'eau chaude et l'eau froide sortent du volcan. »
   Le bleu et le rouge du logo sont aussi l'eau froide et l'eau chaude : deux conduites relient les sections. */
@font-face { font-family: "Zilla Slab"; src: url("polices/zilla-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("polices/zilla-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("polices/zilla-600i.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("polices/schibsted.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bleu: #155EA8; --bleu-f: #0E4A88; --bleu-c: #5E9BDA;
  --rouge: #E94236; --rouge-f: #C8331F; --rouge-c: #FF8A70;
  --nuit: #0B2341; --nuit-2: #122E52;
  --acier: #C9D6E2; --faience: #F3F6F9; --laiton: #F0A23B;
  --texte: #1B2B40; --doux: #4A5D73;
  --titres: "Zilla Slab", Rockwell, Georgia, serif;
  --corps: "Schibsted Grotesk", system-ui, sans-serif;
  --entete: 68px;
  --ombre: 0 18px 40px -18px rgba(11, 35, 65, .45);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 12px); }
body { margin: 0; font-family: var(--corps); font-size: 17px; line-height: 1.55; color: var(--texte); background: var(--faience); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
button { font: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 22px; height: 22px; flex: none; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--nuit); color: #fff; padding: 10px 14px; border-radius: 8px; }
.evitement:focus { top: 10px; }
:focus-visible { outline: 3px solid var(--laiton); outline-offset: 3px; }

/* ---------- Les fonds ---------- */
.fond-faience { background-color: var(--faience); background-image: radial-gradient(ellipse 70% 55% at 30% 35%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%), radial-gradient(ellipse at 100% 100%, rgba(21,94,168,.10), transparent 55%), url("/deco/faience.svg"); background-size: auto, auto, 96px 96px; }
.fond-plan { color: #EAF1F8; background-color: var(--nuit); background-image: radial-gradient(ellipse 60% 50% at 85% 0%, rgba(21,94,168,.55), transparent 70%), radial-gradient(ellipse 50% 40% at 0% 100%, rgba(233,66,54,.18), transparent 70%), url("/deco/plan.svg"); background-size: auto, auto, 120px 120px; }
.fond-acier { background-color: #DCE4EC; background-image: linear-gradient(115deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,.45) 58%, rgba(255,255,255,0) 80%), linear-gradient(180deg, #E9EEF3, #C7D3DF), url("/deco/acier.svg"); background-blend-mode: normal, multiply, normal; background-size: auto, auto, 240px 6px; }
.fond-lave { color: #fff; background-color: var(--nuit); background-image: radial-gradient(ellipse 80% 55% at 50% 115%, rgba(233,66,54,.75), rgba(240,162,59,.18) 45%, transparent 70%), url("/deco/plan.svg"); background-size: auto, 120px 120px; }

/* ---------- Typographie ---------- */
.titre { font-family: var(--titres); font-weight: 700; line-height: 1.06; letter-spacing: -.01em; color: var(--nuit); text-wrap: balance; }
.titre em { font-style: italic; font-weight: 600; color: var(--rouge); }
.fond-plan .titre, .fond-lave .titre { color: #fff; }
.fond-plan .titre em, .fond-lave .titre em { color: var(--rouge-c); }
h2.titre { font-size: clamp(29px, 7vw, 50px); margin-bottom: 18px; }
h3 { font-family: var(--titres); font-weight: 700; font-size: 23px; line-height: 1.15; color: var(--nuit); }
.fond-plan h3, .fond-lave h3 { color: #fff; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); margin-bottom: 14px; }
.surtitre .ic { width: 18px; height: 18px; color: var(--rouge); }
.fond-plan .surtitre, .fond-lave .surtitre { color: var(--bleu-c); }
.chapo { font-size: 18px; color: var(--doux); max-width: 60ch; }
.fond-plan .chapo, .fond-lave .chapo { color: #C9D9EA; }
.mot-d { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mot-d > span { display: inline-block; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 16.5px; text-decoration: none; border: 0; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-color .25s; position: relative; isolation: isolate; }
.btn .ic { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .ic { transform: rotate(-12deg) scale(1.1); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-rouge { background: linear-gradient(180deg, #F05A43, var(--rouge) 55%, var(--rouge-f)); color: #fff; box-shadow: 0 10px 22px -10px rgba(200,51,31,.8), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-bleu { background: linear-gradient(180deg, #2A74C0, var(--bleu) 55%, var(--bleu-f)); color: #fff; box-shadow: 0 10px 22px -10px rgba(14,74,136,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-clair { background: #fff; color: var(--nuit); box-shadow: 0 8px 20px -12px rgba(11,35,65,.6), inset 0 0 0 1.5px rgba(11,35,65,.12); }
.btn-grand { min-height: 60px; font-size: 18px; }
.pilule { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--bleu); }
.pilule .ic { width: 18px; height: 18px; transition: transform .3s; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(11,35,65,.06); }
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: linear-gradient(var(--rouge) 0 3px, var(--bleu) 3px 6px); pointer-events: none; }
.entete-in { display: flex; align-items: center; gap: 10px; height: var(--entete); max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.marque { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.marque .volcan-logo { width: 44px; height: auto; }
.mot { display: flex; flex-direction: column; font-family: var(--titres); font-weight: 700; font-size: 12.5px; line-height: .98; letter-spacing: .02em; text-transform: uppercase; color: var(--bleu); }
.mot b { color: var(--rouge); }
.apercu { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); border: 1.5px dashed var(--bleu); border-radius: 999px; padding: 3px 8px; flex: none; }
.entete-tel { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 46px; height: 46px; border-radius: 999px; background: var(--bleu); color: #fff; text-decoration: none; font-weight: 700; flex: none; transition: transform .2s; }
.entete-tel span { display: none; }
.entete-tel:active { transform: scale(.94); }
.btn-menu { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px 0 13px; border-radius: 999px; border: 0; background: var(--rouge); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; flex: none; box-shadow: 0 8px 18px -10px rgba(200,51,31,.9); }
.nav { position: fixed; left: 0; right: 0; top: calc(var(--entete) + 6px); bottom: 0; z-index: 49; display: flex; flex-direction: column; gap: 4px; padding: 22px 16px 32px; background-color: var(--nuit); background-image: radial-gradient(ellipse at 100% 0%, rgba(21,94,168,.6), transparent 60%), url("/deco/plan.svg"); background-size: auto, 120px 120px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .3s, visibility 0s .3s; }
.menu-ouvert .nav { visibility: visible; opacity: 1; transform: none; transition: opacity .3s, transform .3s; }
.menu-ouvert { overflow: hidden; }
.nav > a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 12px; border-radius: 14px; color: #fff; text-decoration: none; font-family: var(--titres); font-weight: 700; font-size: 25px; border-bottom: 1px solid rgba(255,255,255,.08); }
.nav > a .ic { width: 28px; height: 28px; color: var(--bleu-c); }
.nav > a[aria-current="page"] { background: rgba(255,255,255,.08); }
.nav > a[aria-current="page"] .ic { color: var(--rouge-c); }
.nav-plus { margin-top: 18px; display: grid; gap: 14px; }
.nav-horaires { display: flex; gap: 10px; color: #C9D9EA; font-size: 15px; margin: 0; }
.nav-horaires .ic { color: var(--laiton); }

@media (min-width: 480px) {
  .entete-tel { width: auto; padding: 0 16px; }
  .entete-tel span { display: inline; }
}
@media (min-width: 1100px) {
  :root { --entete: 78px; }
  .marque .volcan-logo { width: 54px; }
  .mot { font-size: 14px; }
  .btn-menu { display: none; }
  .nav { position: static; visibility: visible; opacity: 1; transform: none; flex-direction: row; background: none; padding: 0; margin-left: 18px; gap: 2px; overflow: visible; }
  .nav > a { min-height: 44px; font-family: var(--corps); font-size: 15.5px; color: var(--nuit); border: 0; gap: 8px; padding: 0 12px; border-radius: 999px; transition: background-color .2s; }
  .nav > a .ic { width: 20px; height: 20px; color: var(--bleu); }
  .nav > a:hover { background: rgba(21,94,168,.08); }
  .nav > a[aria-current="page"] { background: rgba(21,94,168,.1); }
  .nav > a[aria-current="page"] .ic { color: var(--rouge); }
  .nav-plus { display: none; }
  .entete-tel { height: 50px; padding: 0 20px; background: var(--rouge); box-shadow: 0 8px 18px -10px rgba(200,51,31,.9); }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: 76px 16px; overflow-x: clip; }
.section-in { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
@media (min-width: 900px) { .section { padding: 120px 32px; } }

/* La conduite rouge et bleue entre deux sections */
.conduite { position: relative; z-index: 3; height: clamp(72px, 7vw, 140px); margin: calc(clamp(72px, 7vw, 140px) / -2) 0; pointer-events: none; }
.conduite svg { width: 100%; height: 100%; }
.eau { animation: eau 1.1s linear infinite; }
@keyframes eau { to { stroke-dashoffset: -36; } }
.conduite path:nth-of-type(6) { animation-direction: reverse; }
.hors-ecran .eau, .hors-ecran .aiguille, .hors-ecran .ruban-piste, .hors-ecran .vh-lueur { animation-play-state: paused !important; }

/* ---------- Haut de page ---------- */
.heros { position: relative; padding: 14px 16px 54px; overflow: clip; }
.heros-in { max-width: 1240px; margin: 0 auto; display: grid; gap: 8px; }
.heros-visuel { position: relative; height: 250px; margin: 0 -16px; }
.volcan-heros, .gerbe { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; overflow: visible; }
.volcan-heros { z-index: 1; }
.gerbe { z-index: 3; pointer-events: none; }
.vh-lueur { transform-origin: 300px 120px; animation: lueur 4s ease-in-out infinite alternate; }
@keyframes lueur { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
.carreau { position: absolute; z-index: 2; margin: 0; padding: 7px; background: #fff; border-radius: 10px; box-shadow: var(--ombre), inset 0 0 0 1px rgba(11,35,65,.08); }
.carreau img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.carreau::after { content: ""; position: absolute; inset: 7px; border-radius: 5px; background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,0) 38%); pointer-events: none; }
.heros .c1 { left: 3%; top: 12px; width: 37%; height: 196px; transform: rotate(-4deg); }
.heros .c2 { right: 4%; top: 2px; width: 30%; height: 116px; transform: rotate(5deg); }
.heros .c2 img { object-position: 50% 30%; }
.heros .c3 { right: 6%; top: 128px; width: 34%; height: 104px; transform: rotate(-2deg); }
.heros-texte { position: relative; z-index: 4; }
.heros .surtitre { margin-bottom: 10px; font-size: 12px; }
.heros h1 { font-size: clamp(26px, 6.9vw, 60px); margin-bottom: 14px; }
.nw { white-space: nowrap; }
@media (max-width: 599px) { .pastilles .p-pro { display: none; } .pastilles { margin-bottom: 14px; } }
.pastilles { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles li { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--nuit); box-shadow: 0 4px 14px -8px rgba(11,35,65,.5), inset 0 0 0 1px rgba(11,35,65,.08); }
.pastilles .ic { width: 18px; height: 18px; color: var(--bleu); }
.p-note .ic { color: #F2B01E; }
.pastille-etat { width: 10px; height: 10px; border-radius: 50%; background: #9AA8B6; flex: none; }
.ouvert .pastille-etat { background: #1FA35C; box-shadow: 0 0 0 0 rgba(31,163,92,.6); animation: pouls 2s infinite; }
.ferme .pastille-etat { background: var(--rouge); }
@keyframes pouls { 70% { box-shadow: 0 0 0 9px rgba(31,163,92,0); } 100% { box-shadow: 0 0 0 0 rgba(31,163,92,0); } }
.heros-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.heros-actions .btn { flex: 1 1 auto; }
.heros-actions .lg { display: none; }
@media (min-width: 430px) { .heros-actions .lg { display: inline; } .heros-actions .ct { display: none; } }
@media (max-width: 380px) { .pastilles li { font-size: 13.5px; padding: 0 10px; } }
@media (min-width: 700px) { .heros-visuel { height: 420px; } .heros .c1 { height: 300px; } .heros .c2 { height: 180px; } .heros .c3 { top: 220px; height: 170px; } }
@media (min-width: 1000px) {
  .heros { padding: 36px 32px 100px; }
  .heros-in { grid-template-columns: 1fr 1.08fr; align-items: center; gap: 30px; }
  .heros-texte { order: -1; }
  .heros-visuel { height: 600px; margin: 0; }
  .heros .c1 { left: 0; top: 50px; width: 39%; height: 380px; }
  .heros .c2 { right: 0; top: 14px; width: 33%; height: 220px; }
  .heros .c3 { right: 4%; top: 290px; width: 37%; height: 210px; }
  .heros .surtitre { font-size: 13px; }
  .heros h1 { margin-bottom: 24px; }
  .heros-actions .btn { flex: 0 0 auto; }
}

/* ---------- Ruban incliné ---------- */
.ruban { position: relative; z-index: 5; margin: -26px 0 -26px; overflow: hidden; padding: 22px 0; pointer-events: none; }
.ruban-bande { transform: rotate(-2.2deg); width: 108%; margin-left: -4%; background: linear-gradient(180deg, #2A74C0, var(--bleu) 50%, var(--bleu-f)); box-shadow: 0 12px 26px -14px rgba(11,35,65,.8); border-top: 3px solid var(--rouge); }
.ruban-piste { display: flex; width: max-content; animation: ruban 38s linear infinite; }
.ruban-piste span { display: inline-flex; align-items: center; gap: 16px; padding: 13px 0 13px 16px; font-family: var(--titres); font-weight: 600; font-size: 19px; color: #fff; white-space: nowrap; }
.ruban-piste svg { width: 26px; height: 26px; }
@keyframes ruban { to { transform: translateX(-50%); } }

/* ---------- Salle de bains (accueil) ---------- */
.sdb-grille { display: grid; gap: 34px; }
.sdb-visuel { position: relative; min-height: 330px; }
.plan-sdb { width: 100%; max-width: 520px; opacity: .95; }
.plan-sdb text { font: 600 11px var(--corps); fill: #9FB6CC; letter-spacing: .04em; }
.plan-sdb .pl-cotes text { fill: var(--laiton); font-size: 12px; }
.sdb-visuel .carreau { position: absolute; right: 2%; bottom: 0; width: 58%; height: 200px; transform: rotate(3deg); }
.etiquette { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 22px; background: var(--laiton); color: var(--nuit); font-weight: 700; font-size: 14px; border-radius: 4px 999px 999px 4px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }
.etiquette::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--nuit); }
.sdb-visuel .etiquette { left: 4%; bottom: 30px; transform: rotate(-4deg); }
.etapes { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 18px; counter-reset: e; }
.etapes li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; }
.ecrou { width: 56px; height: 56px; display: grid; place-items: center; background: linear-gradient(135deg, #F6CF78, #D49A35 55%, #9C6A1C); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); color: var(--nuit); }
.ecrou .ic { width: 26px; height: 26px; }
.etapes b { display: block; font-family: var(--titres); font-size: 21px; color: #fff; margin-bottom: 2px; }
.etapes p { margin: 0; color: #C9D9EA; font-size: 16px; }
.citation-courte { margin: 0 0 28px; padding: 16px 18px; border-left: 4px solid var(--rouge); background: rgba(255,255,255,.06); border-radius: 0 12px 12px 0; font-family: var(--titres); font-style: italic; font-weight: 600; font-size: 20px; line-height: 1.3; color: #fff; }
.citation-courte cite { display: block; margin-top: 6px; font-family: var(--corps); font-style: normal; font-weight: 600; font-size: 14px; color: var(--bleu-c); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) {
  .sdb-grille { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .sdb-visuel { min-height: 480px; }
  .sdb-visuel .carreau { height: 300px; width: 56%; }
}

/* ---------- Mosaïque des gammes (accueil) ---------- */
.mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.tuile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 16px; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--nuit); background: #fff; box-shadow: 0 14px 30px -18px rgba(11,35,65,.55), inset 0 0 0 1px rgba(11,35,65,.07); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; isolation: isolate; }
.tuile:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -18px rgba(11,35,65,.6); }
.tuile:active { transform: scale(.98); }
.tuile h3 { font-size: 20px; display: flex; align-items: center; gap: 8px; }
.tuile h3 .ic { color: var(--rouge); width: 20px; height: 20px; }
.tuile p { margin: 4px 0 0; font-size: 14.5px; color: var(--doux); line-height: 1.4; }
.tuile .illu { position: absolute; inset: 10px 10px auto auto; width: 62%; z-index: -1; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tuile:hover .illu { transform: rotate(-3deg) scale(1.05); }
.tuile-photo { color: #fff; min-height: 250px; }
.tuile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.tuile-photo:hover img { transform: scale(1.04); }
.tuile-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,35,65,0) 35%, rgba(11,35,65,.88)); }
.tuile-photo h3 { color: #fff; }
.tuile-photo h3 .ic { color: var(--rouge-c); }
.tuile-photo p { color: #DCE6F0; }
.tuile .fl { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--rouge); color: #fff; transition: transform .3s; }
.tuile .fl .ic { width: 18px; height: 18px; }
.tuile:hover .fl { transform: rotate(-45deg); }
.t-robinet { grid-column: span 2; min-height: 290px; }
.t-raccords { grid-column: span 2; }
.t-wc, .t-chauffe, .t-acc, .t-vidage { min-height: 230px; }
.t-chauffe { background: linear-gradient(160deg, #fff, #E8EEF4); }
@media (min-width: 900px) {
  .mosaique { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 16px; }
  .t-robinet { grid-column: span 2; grid-row: span 2; }
  .t-raccords { grid-column: span 2; }
  .tuile { min-height: 0 !important; padding: 22px; }
  .tuile h3 { font-size: 23px; }
}

/* ---------- Professionnels ---------- */
.pros-grille { display: grid; gap: 40px; align-items: center; }
.mano-boite { position: relative; display: grid; place-items: center; }
.manometre { width: min(250px, 66vw); filter: drop-shadow(0 22px 30px rgba(0,0,0,.45)); }
.manometre text { font: 700 15px var(--corps); fill: var(--nuit); text-anchor: middle; }
.manometre .mano-unite { font-size: 12px; fill: var(--doux); }
.aiguille { transform-origin: 100px 100px; animation: aiguille 3.4s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes aiguille { 0% { transform: rotate(28deg); } 40% { transform: rotate(46deg); } 55% { transform: rotate(40deg); } 100% { transform: rotate(62deg); } }
.mano-legende { margin-top: 14px; text-align: center; font-size: 14.5px; color: #C9D9EA; max-width: 30ch; }
.points { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; gap: 12px; }
.points li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background-color .3s, transform .3s; }
.points li:hover { background: rgba(255,255,255,.1); transform: translateX(4px); }
.points .rond { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, var(--bleu), var(--bleu-f)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.points .rond.r { background: linear-gradient(160deg, var(--rouge), var(--rouge-f)); }
.points .rond.l { background: linear-gradient(160deg, #F6CF78, #C98A26); color: var(--nuit); }
.points b { display: block; color: #fff; font-size: 17px; }
.points span { font-size: 15px; color: #C9D9EA; }
.fond-faience .points li, .fond-acier .points li { background: #fff; box-shadow: 0 10px 24px -18px rgba(11,35,65,.6), inset 0 0 0 1px rgba(11,35,65,.07); }
.fond-faience .points b, .fond-acier .points b { color: var(--nuit); }
.fond-faience .points span, .fond-acier .points span { color: var(--doux); }
@media (min-width: 900px) { .pros-grille { grid-template-columns: .8fr 1.2fr; gap: 70px; } .manometre { width: 320px; } }

/* ---------- Avis ---------- */
.avis-grille { display: grid; gap: 22px; margin-top: 10px; }
.note-carte { position: relative; padding: 26px 22px; border-radius: 20px; background: linear-gradient(160deg, #fff, #EEF3F8); box-shadow: var(--ombre), inset 0 0 0 1px rgba(11,35,65,.07); overflow: hidden; }
.note-carte .g { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--doux); font-size: 15px; }
.note-grand { display: flex; align-items: flex-end; gap: 14px; margin: 6px 0 4px; }
.note-grand b { font-family: var(--titres); font-weight: 700; font-size: 96px; line-height: .85; color: var(--nuit); }
.etoiles { display: flex; gap: 2px; color: #F2B01E; }
.etoiles .ic { width: 22px; height: 22px; }
.etoiles .demi { color: #D5DEE7; position: relative; }
.note-sous { font-size: 15px; color: var(--doux); margin: 4px 0 18px; }
.repart { display: grid; gap: 9px; }
.repart div { display: grid; grid-template-columns: 34px 1fr 22px; gap: 10px; align-items: center; font-size: 14px; font-weight: 700; color: var(--doux); }
.tube { position: relative; height: 14px; border-radius: 999px; background: #DCE4EC; box-shadow: inset 0 2px 3px rgba(11,35,65,.18); overflow: hidden; }
.tube i { position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 999px; background: linear-gradient(180deg, #5E9BDA, var(--bleu) 60%, var(--bleu-f)); }
.tube i::after { content: ""; position: absolute; inset: 3px 6px auto 6px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.55); }
.cit-grande { position: relative; margin: 0; padding: 30px 22px 26px; border-radius: 20px; color: #fff; background: linear-gradient(150deg, var(--bleu), var(--nuit)); overflow: hidden; box-shadow: var(--ombre); }
.cit-grande::before { content: "\201C"; position: absolute; right: 10px; top: -36px; font-family: var(--titres); font-size: 210px; line-height: 1; color: rgba(255,255,255,.1); }
.cit-grande p { position: relative; font-family: var(--titres); font-weight: 600; font-size: clamp(25px, 6.4vw, 38px); line-height: 1.15; margin-bottom: 18px; }
.cit-grande p em { font-style: italic; color: var(--rouge-c); }
.cit-grande cite, .cit-tag cite { display: flex; align-items: center; gap: 10px; font-style: normal; font-weight: 600; font-size: 15px; }
.initiale { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--rouge); flex: none; }
.cit-tag { position: relative; margin: 0; padding: 24px 22px 22px 40px; background: var(--laiton); color: var(--nuit); border-radius: 10px 22px 22px 10px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); box-shadow: var(--ombre); transform: rotate(-1.5deg); }
.cit-tag::before { content: ""; position: absolute; left: 16px; top: 50%; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--faience); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.cit-tag p { font-family: var(--titres); font-weight: 700; font-size: 23px; line-height: 1.2; margin-bottom: 12px; }
.cit-tag .initiale { background: var(--bleu); }
.noteurs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; margin-top: 4px; scrollbar-width: thin; }
.noteurs li { scroll-snap-align: start; list-style: none; flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -12px rgba(11,35,65,.6), inset 0 0 0 1px rgba(11,35,65,.07); font-weight: 600; font-size: 15px; }
.noteurs .initiale { width: 34px; height: 34px; font-size: 14px; }
.noteurs .n { display: inline-flex; align-items: center; gap: 3px; color: #C98A10; font-weight: 700; }
.noteurs .n .ic { width: 16px; height: 16px; color: #F2B01E; }
.noteurs ul { display: contents; }
@media (min-width: 900px) {
  .avis-grille { grid-template-columns: 1fr 1.25fr; grid-template-areas: "note grande" "note tag"; gap: 26px; }
  .note-carte { grid-area: note; padding: 36px; }
  .cit-grande { grid-area: grande; padding: 40px 36px 32px; }
  .cit-tag { grid-area: tag; justify-self: start; max-width: 520px; }
}

/* ---------- Magasins ---------- */
.mag-grille { display: grid; gap: 22px; margin-top: 28px; align-items: start; }
.carte { width: 100%; max-width: 440px; margin: 0 auto; }
.mag-grille .carte { max-width: 300px; }
@media (min-width: 900px) { .mag-grille .carte { max-width: 440px; } }
.carte text { font: 700 15px var(--titres); fill: var(--nuit); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.ep-onde { fill: rgba(233,66,54,.25); transform-origin: center; animation: onde 2.4s ease-out infinite; transform-box: fill-box; }
@keyframes onde { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.carte-trajet { animation: eau 1.4s linear infinite; }
.plaque { position: relative; padding: 24px 20px 20px; border-radius: 16px; background: linear-gradient(160deg, #FBFCFD, #E3EAF1); box-shadow: var(--ombre), inset 0 0 0 1px rgba(11,35,65,.08), inset 0 2px 0 #fff; }
.plaque::before, .plaque::after { content: ""; position: absolute; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8DA0B3 60%, #556678); }
.plaque::before { left: 10px; } .plaque::after { right: 10px; }
.plaque h3 { display: flex; align-items: center; gap: 10px; font-size: 26px; margin-bottom: 6px; }
.plaque h3 .ic { width: 26px; height: 26px; color: var(--rouge); }
.plaque .adr { color: var(--doux); font-size: 16px; margin-bottom: 12px; }
.statut { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 14.5px; box-shadow: inset 0 0 0 1px rgba(11,35,65,.1); margin-bottom: 12px; }
.horaires { width: 100%; border-collapse: collapse; font-size: 15.5px; margin-bottom: 16px; }
.horaires td { padding: 7px 8px; border-bottom: 1px dashed rgba(11,35,65,.15); }
.horaires td:first-child { font-weight: 700; width: 34%; }
.horaires tr.auj td { background: rgba(21,94,168,.1); color: var(--bleu-f); }
.horaires tr.auj td:first-child { border-radius: 8px 0 0 8px; }
.horaires tr.auj td:last-child { border-radius: 0 8px 8px 0; }
.plaque .actions .btn { flex: 1 1 200px; }
@media (min-width: 900px) { .mag-grille { grid-template-columns: .9fr 1fr 1fr; gap: 26px; } .mag-grille.mag-deux { grid-template-columns: 1fr 1fr; } .carte { position: sticky; top: 110px; } }

/* ---------- Appel final ---------- */
.appel { position: relative; padding: 96px 16px 150px; text-align: center; overflow: clip; }
.appel .conduite-haut { position: absolute; left: 0; right: 0; top: 0; margin: calc(clamp(72px, 7vw, 140px) / -2) 0 0; }
.appel-in { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.appel-fond { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(120px, 16vw, 260px); }
.appel-volcan .volcan-logo { width: 120px; margin: 0 auto 14px; filter: drop-shadow(0 10px 30px rgba(233,66,54,.6)); }
.appel h2.titre { font-size: clamp(30px, 7vw, 52px); }
.appel-texte { color: #D7E3EF; font-size: 18px; max-width: 54ch; margin: 0 auto 26px; }
.appel-actions { display: grid; gap: 10px; max-width: 420px; margin: 0 auto; }
.appel-statut { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0; font-weight: 600; color: #D7E3EF; }
@media (min-width: 900px) { .appel { padding: 140px 32px 230px; } .appel-actions { max-width: none; grid-template-columns: auto auto auto; justify-content: center; } }

/* ---------- Pied ---------- */
.pied { background-color: #071A31; background-image: url("/deco/plan.svg"); background-size: 120px 120px; color: #C9D9EA; padding: 56px 16px 30px; font-size: 15.5px; }
.pied-in { max-width: 1180px; margin: 0 auto; display: grid; gap: 28px; }
.marque-pied .mot { color: #fff; font-size: 14px; }
.marque-pied .mot b { color: var(--rouge-c); }
.pied-marque p { margin-top: 14px; max-width: 34ch; }
.pied h3 { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 20px; margin-bottom: 8px; }
.pied h3 .ic { color: var(--rouge-c); width: 20px; height: 20px; }
.pied-h { color: #9FB6CC; }
.pied-contact { display: grid; gap: 12px; align-content: start; }
.pied-lien { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; min-height: 44px; word-break: break-all; }
.pied-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pied-nav a { color: #C9D9EA; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.pied-mention { max-width: 1180px; margin: 30px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: #8EA3B9; }
.pied-mention a { color: #fff; }
@media (min-width: 900px) { .pied-in { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }

/* ---------- Pages intérieures : haut de page ---------- */
.ph { position: relative; padding: 22px 16px 70px; overflow: clip; }
.ph-in { max-width: 1240px; margin: 0 auto; display: grid; gap: 14px; position: relative; z-index: 2; }
.ph h1 { font-size: clamp(28px, 7.2vw, 58px); margin-bottom: 14px; }
.ph-visuel { position: relative; height: 250px; margin: 0 -16px; }
.ph-visuel .carreau { position: absolute; }
.ph .chapo { margin-bottom: 20px; }
.ph .actions + .ph-chapo { margin: 20px 0 0; }
.ph h1 + .pastilles { margin-bottom: 14px; }
@media (min-width: 1000px) { .ph { padding: 50px 32px 110px; } .ph-in { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; } .ph-texte { order: -1; } .ph-visuel { height: 520px; margin: 0; } }

/* Salle de bains */
.page-sdb .ph-visuel .plan-sdb { position: absolute; left: 4%; top: 10px; width: 70%; }
.page-sdb .ph-visuel .carreau { right: 4%; bottom: 8px; width: 54%; height: 186px; transform: rotate(3deg); }
.page-sdb .ph-visuel .etiquette { left: 6%; bottom: 40px; transform: rotate(-3deg); }
@media (min-width: 1000px) { .page-sdb .ph-visuel .carreau { height: 330px; width: 58%; } .page-sdb .ph-visuel .plan-sdb { width: 76%; top: 20px; } }
.choix { display: grid; gap: 48px; margin-top: 34px; }
.choix-bloc { display: grid; gap: 22px; align-items: center; }
.choix-bloc .carreau, .choix-bloc .illu-cadre { position: relative; height: 280px; transform: rotate(-1.5deg); }
.choix-bloc:nth-child(2) .carreau, .choix-bloc:nth-child(2) .illu-cadre { transform: rotate(1.5deg); }
.illu-cadre { border-radius: 16px; background: #fff url("/deco/faience.svg"); background-size: 64px 64px; box-shadow: var(--ombre); display: grid; place-items: center; padding: 20px; }
.illu-cadre .illu { width: 80%; max-width: 320px; }
.choix-bloc h3 { font-size: 27px; margin-bottom: 8px; }
.choix-bloc ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.choix-bloc li { display: flex; gap: 10px; align-items: flex-start; }
.choix-bloc li .ic { color: var(--bleu); width: 22px; height: 22px; margin-top: 2px; }
@media (min-width: 900px) {
  .choix-bloc { grid-template-columns: 1fr 1fr; gap: 60px; }
  .choix-bloc:nth-child(2) > :first-child { order: 2; }
  .choix-bloc .carreau, .choix-bloc .illu-cadre { height: 380px; }
}
.garantie { display: grid; gap: 26px; align-items: center; }
.tag-garantie { position: relative; justify-self: center; width: min(320px, 82vw); padding: 30px 26px 26px 56px; background: linear-gradient(150deg, #F6CF78, #E0A43A 55%, #B9832A); color: var(--nuit); clip-path: polygon(34px 0, 100% 0, 100% 100%, 34px 100%, 0 50%); border-radius: 6px 18px 18px 6px; filter: drop-shadow(0 18px 24px rgba(11,35,65,.35)); transform: rotate(-4deg); }
.tag-garantie::before { content: ""; position: absolute; left: 22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--faience); box-shadow: inset 0 2px 3px rgba(0,0,0,.4); }
.tag-garantie b { display: block; font-family: var(--titres); font-size: 66px; line-height: .9; }
.tag-garantie span { font-weight: 700; font-size: 17px; }
@media (min-width: 900px) { .garantie { grid-template-columns: 1fr 1.3fr; gap: 70px; } }
.faq { display: grid; gap: 12px; margin-top: 26px; }
.faq details { border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -18px rgba(11,35,65,.6), inset 0 0 0 1px rgba(11,35,65,.07); }
.faq summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 18px; cursor: pointer; font-weight: 700; font-size: 17px; color: var(--nuit); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--rouge); width: 22px; height: 22px; transition: transform .3s; }
.faq details[open] summary .ic { transform: rotate(90deg); }
.faq details p { padding: 0 18px 18px 52px; margin: 0; color: var(--doux); }

/* Gammes */
.page-gammes .ph-visuel .c-a { left: 10%; top: 20px; width: 68%; height: 206px; transform: rotate(-3deg); }
.pd1 { right: 4%; top: 10px; } .pd2 { right: 8%; top: 150px; } .pd3 { left: 2%; top: 190px; } .pd4 { left: 3%; top: 4px; }
.page-gammes .ph-visuel .pieces-deco { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pieces-deco svg { position: absolute; width: 58px; height: 58px; filter: drop-shadow(0 8px 10px rgba(11,35,65,.35)); }
@media (min-width: 1000px) { .page-gammes .ph-visuel .c-a { height: 400px; top: 50px; width: 76%; } .pieces-deco svg { width: 84px; height: 84px; } .pd2 { top: 380px; } .pd3 { top: 420px; } }
.filtres { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.filtres button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 0; background: #fff; color: var(--nuit); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 6px 16px -12px rgba(11,35,65,.6), inset 0 0 0 1.5px rgba(11,35,65,.12); transition: background-color .25s, color .25s, transform .2s; }
.filtres button .ic { width: 18px; height: 18px; color: var(--bleu); }
.filtres button[aria-pressed="true"] { background: var(--bleu); color: #fff; box-shadow: 0 8px 18px -10px rgba(14,74,136,.9); }
.filtres button[aria-pressed="true"] .ic { color: #fff; }
.filtres button:active { transform: scale(.96); }
@media (min-width: 900px) { .filtres { flex-wrap: wrap; margin: 0; padding-left: 2px; } }
.catalogue { display: grid; gap: 16px; margin-top: 10px; }
.produit { position: relative; display: grid; grid-template-rows: 190px auto; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 16px 34px -22px rgba(11,35,65,.6), inset 0 0 0 1px rgba(11,35,65,.07); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, opacity .35s; }
.produit:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -22px rgba(11,35,65,.65); }
.produit[hidden] { display: none; }
.produit-visuel { position: relative; background: #EEF3F8 url("/deco/faience.svg"); background-size: 64px 64px; display: grid; place-items: center; overflow: hidden; }
.produit-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.produit:hover .produit-visuel img { transform: scale(1.05); }
.produit-visuel .illu { width: 72%; max-height: 170px; }
.produit-gamme { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.94); font-size: 12.5px; font-weight: 700; color: var(--bleu-f); box-shadow: 0 4px 10px -6px rgba(11,35,65,.5); }
.produit-gamme .ic { width: 15px; height: 15px; color: var(--rouge); }
.produit-corps { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.produit-corps h3 { font-size: 22px; }
.produit-corps > p { margin: 0; color: var(--doux); font-size: 15.5px; }
.ouvrir-fiche { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--nuit); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; transition: background-color .25s, transform .2s; }
.ouvrir-fiche .ic { width: 18px; height: 18px; transition: transform .3s; }
.ouvrir-fiche:hover { background: var(--bleu); }
.ouvrir-fiche:hover .ic { transform: translateX(4px); }
.fiche-detail { display: none; }
html:not(.js) .fiche-detail { display: block; padding: 0 18px 20px; }
@media (min-width: 700px) { .catalogue { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .catalogue { grid-template-columns: repeat(3, 1fr); gap: 22px; } .produit { grid-template-rows: 230px auto; } .produit-visuel .illu { max-height: 200px; } }
.fiche { width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 22px; background: var(--faience); color: var(--texte); box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); overflow: auto; overscroll-behavior: contain; }
.fiche::backdrop { background: rgba(7,26,49,.72); backdrop-filter: blur(4px); }
.fiche[open] { animation: fiche .38s cubic-bezier(.2,.8,.2,1); }
@keyframes fiche { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.fiche-tete { position: relative; height: 210px; background: #EEF3F8 url("/deco/faience.svg"); background-size: 64px 64px; display: grid; place-items: center; overflow: hidden; }
.fiche-tete img { width: 100%; height: 100%; object-fit: cover; }
.fiche-tete .illu { width: 62%; max-height: 190px; }
.fiche-fermer { position: absolute; right: 12px; top: 12px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--nuit); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.fiche-contenu { padding: 22px 20px 26px; }
.fiche-contenu h2 { font-family: var(--titres); font-size: 30px; line-height: 1.08; color: var(--nuit); margin-bottom: 12px; }
.fiche-contenu h4 { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); }
.fiche-contenu h4 .ic { width: 18px; height: 18px; color: var(--rouge); }
.fiche-contenu p { margin: 0 0 8px; }
.fiche-contenu ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fiche-contenu li { display: flex; gap: 10px; align-items: flex-start; }
.fiche-contenu li .ic { width: 20px; height: 20px; color: var(--bleu); margin-top: 2px; }
.formats { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.formats li { padding: 6px 12px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 14.5px; box-shadow: inset 0 0 0 1px rgba(11,35,65,.12); }
.fiche-actions { display: grid; gap: 10px; margin-top: 24px; }
@media (min-width: 700px) { .fiche-tete { height: 280px; } .fiche-contenu { padding: 28px 34px 32px; } .fiche-actions { grid-template-columns: 1fr 1fr; } }
.introuvable { display: grid; gap: 22px; align-items: center; margin-top: 50px; padding: 26px 22px; border-radius: 22px; color: #fff; background: linear-gradient(150deg, var(--bleu), var(--nuit)); box-shadow: var(--ombre); position: relative; overflow: hidden; }
.introuvable .titre { color: #fff; font-size: clamp(25px, 5.6vw, 36px); margin-bottom: 8px; }
.introuvable p { color: #D7E3EF; margin: 0; }
.introuvable .actions .btn { flex: 1 1 220px; }
@media (min-width: 900px) { .introuvable { grid-template-columns: 1.3fr 1fr; padding: 40px; } }

/* Magasins */
.page-magasins .ph-visuel .carte { position: absolute; left: 0; top: 0; width: 64%; }
.page-magasins .ph-visuel .carreau { right: 4%; bottom: 6px; width: 52%; height: 160px; transform: rotate(3deg); }
.page-magasins .ph-visuel .carte { width: 56%; }
@media (min-width: 1000px) { .page-magasins .ph-visuel .carte { width: 66%; max-width: none; } .page-magasins .ph-visuel .carreau { height: 300px; width: 54%; } }
.photo-encadree { position: relative; height: 260px; transform: rotate(-2deg); }
@media (min-width: 900px) { .photo-encadree { height: 400px; } }

/* ---------- Ornements qui apparaissent au défilement ---------- */
.orn { position: absolute; z-index: 0; width: 64px; height: 64px; pointer-events: none; opacity: .9; filter: drop-shadow(0 8px 10px rgba(11,35,65,.25)); }
.orn svg { width: 100%; height: 100%; }
.orn-hg { left: 8px; top: 18px; } .orn-hd { right: 8px; top: 18px; } .orn-bg { left: 8px; bottom: 18px; } .orn-bd { right: 8px; bottom: 18px; }
@media (min-width: 900px) { .orn { width: 96px; height: 96px; } .orn-hg { left: 3%; top: 40px; } .orn-hd { right: 3%; top: 40px; } .orn-bg { left: 3%; bottom: 40px; } .orn-bd { right: 3%; bottom: 40px; } }

/* ---------- Apparitions ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .eau, .aiguille, .ruban-piste, .vh-lueur, .ep-onde, .carte-trajet, .ouvert .pastille-etat { animation: none !important; }
  .btn, .tuile, .produit { transition: none; }
}

@media (max-width: 400px) {
  .entete-in { gap: 6px; padding: 0 12px; }
  .marque { gap: 6px; }
  .marque .volcan-logo { width: 36px; }
  .mot { font-size: 11px; }
  .apercu { font-size: 9.5px; padding: 2px 6px; letter-spacing: .06em; }
  .entete-tel { width: 44px; height: 44px; }
  .btn-menu { height: 44px; padding: 0 13px 0 11px; font-size: 15px; gap: 5px; }
}