/* BASK Group · gabarit des pages intérieures (métiers, villes, prestations) */
:root {
  color-scheme: light;
  --gorri: #9C000B; --beltz: #1F1F1F; --zuri: #EDECE3; --blanc: #FFFFFF;
  --gris: rgba(31,31,31,.78); --trait: rgba(31,31,31,.15);
  --f: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gl: max(16px, env(safe-area-inset-left, 0px), 4vw);
  --gr: max(16px, env(safe-area-inset-right, 0px), 4vw);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--zuri); color: var(--beltz); font: 400 18px/1.6 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--gorri); color: var(--zuri); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.w { max-width: 1360px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.lbl { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--gorri); margin: 0 0 18px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

/* Mètre ruban */
.ruban { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 26px; z-index: 30; background: var(--zuri); border-bottom: 1px solid rgba(31,31,31,.25); pointer-events: none; }
.ruban::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(31,31,31,.35) 0 1px, transparent 1px 10px) bottom / 100% 7px no-repeat, repeating-linear-gradient(90deg, rgba(31,31,31,.55) 0 1px, transparent 1px 50px) bottom / 100% 12px no-repeat, repeating-linear-gradient(90deg, var(--beltz) 0 2px, transparent 2px 100px) bottom / 100% 18px no-repeat; }
.ruban i { position: absolute; left: 0; top: 0; height: 26px; width: 0; background: rgba(156,0,11,.14); border-right: 2px solid var(--gorri); }
.ruban b { position: absolute; top: 3px; font-size: 15px; font-weight: 600; background: var(--gorri); color: var(--zuri); padding: 2px 7px; transform: translateX(6px); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* En-tête */
.hd { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 26px); z-index: 20; background: rgba(237,236,227,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
.hd__in { max-width: 1360px; margin: 0 auto; padding: 14px var(--gr) 14px var(--gl); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.hd__logo { width: clamp(130px, 12vw, 168px); }
.hd nav { display: flex; gap: 30px; align-items: center; font-size: 18px; font-weight: 600; }
.hd nav a { text-decoration: none; }
.hd nav a[aria-current] { color: var(--gorri); }
.hd nav b { font-weight: 700; }
.hd__cta { background: var(--beltz); color: var(--zuri); padding: 13px 20px; }
@media (hover: hover) { .hd__cta:hover { background: var(--gorri); } }
@media (max-width: 860px) { .hd nav a:not(.hd__cta) { display: none; } }
.ruban + .hd { margin-top: 26px; }

/* Fil d'Ariane */
.fil { font-size: 14px; font-weight: 500; color: var(--gris); margin: 0 0 22px; }
.fil a { text-decoration: none; }
@media (hover: hover) { .fil a:hover { color: var(--gorri); } }

/* Ouverture de page */
.po { padding: clamp(48px, 7vw, 100px) 0 clamp(36px, 5vw, 64px); }
.po__lg { width: clamp(180px, 18vw, 260px); margin: 0 0 30px; }
.po__nom { margin: -18px 0 26px; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--gris, rgba(31,31,31,.6)); }
.po h1 { font-weight: 600; font-size: clamp(42px, 6.4vw, 104px); line-height: .96; letter-spacing: -.05em; max-width: 15ch; }
.po__chapo { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; color: var(--gris); max-width: 56ch; margin: 28px 0 0; }
.po__vifs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Détails vivants */
.vif { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; border: 1.5px solid var(--beltz); padding: 12px 16px; font-size: 18px; font-weight: 500; line-height: 1.3; max-width: 100%; }
.vif b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: var(--gorri); font-variant-numeric: tabular-nums; }
.vif--clair { border-color: var(--zuri); color: var(--zuri); }
.vif--clair b { color: var(--zuri); }

/* Photo générique noir et blanc */
.photo { position: relative; height: clamp(300px, 52vh, 560px); background: repeating-linear-gradient(135deg, #d6d5cc 0 1px, transparent 1px 13px), #e1e0d7; display: flex; align-items: flex-end; padding: 20px var(--gr) 20px var(--gl); filter: grayscale(1); }
.photo span { background: var(--zuri); padding: 8px 12px; font-size: 15px; max-width: 46ch; line-height: 1.4; }
.photo span b { display: block; color: var(--gorri); font-weight: 600; font-size: 13px; letter-spacing: .04em; }

/* Sections */
.s { padding: clamp(72px, 9vw, 140px) 0; }
.s--blanc { background: var(--blanc); }
.s--beltz { background: var(--beltz); color: var(--zuri); }
.s--gorri { background: var(--gorri); color: var(--zuri); }
.s--beltz .lbl, .s--gorri .lbl { color: var(--zuri); opacity: .85; }
.g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .g2 { grid-template-columns: 1fr; } }
.h2 { font-weight: 600; font-size: clamp(34px, 4.6vw, 70px); line-height: .98; letter-spacing: -.045em; }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 1em; font-size: 19px; }
.prose h2 { font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.03em; line-height: 1.05; margin: 1.8em 0 .55em; }
.prose h2:first-child { margin-top: 0; }
.prose strong { font-weight: 600; }
.prose ul { list-style: none; padding: 0; margin: 0 0 1.2em; }
.prose li { position: relative; padding: 8px 0 8px 24px; font-size: 19px; border-top: 1px solid var(--trait); }
.prose li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 13px; height: 2px; background: var(--gorri); }

/* Liste à deux colonnes */
.l2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.l2 li { list-style: none; padding: 22px 0; border-top: 1px solid var(--trait); }
.l2 { padding: 0; margin: 0; }
.s--beltz .l2 li { border-color: rgba(237,236,227,.2); }
.l2 b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.l2 span { color: var(--gris); font-size: 17px; }
.s--beltz .l2 span { color: rgba(237,236,227,.78); }
@media (max-width: 720px) { .l2 { grid-template-columns: 1fr; } }

/* Étapes en jours de chantier */
.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 48px; list-style: none; padding: 0; }
.etape { border-top: 3px solid var(--beltz); padding-top: 20px; }
.etape__j { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--gorri); display: block; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.etape h3 { font-size: 26px; font-weight: 600; letter-spacing: -.03em; margin-bottom: 10px; }
.etape p { margin: 0; color: var(--gris); font-size: 17px; }
@media (max-width: 980px) { .etapes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }

/* Refus */
.refus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0; margin: 40px 0 0; }
.refus li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 24px 24px 24px 0; border-top: 1px solid var(--trait); }
.refus li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--trait); }
.refus i { font-style: normal; color: var(--gorri); font-size: 26px; font-weight: 700; line-height: 1; }
.refus b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; }
.refus span { color: var(--gris); font-size: 17px; }
@media (max-width: 720px) { .refus { grid-template-columns: 1fr; } .refus li:nth-child(even) { padding-left: 0; border-left: 0; } }

/* Rétroplanning interactif */
.retro { background: var(--beltz); color: var(--zuri); padding: clamp(28px, 4vw, 52px); }
.retro__q { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 30px; }
.retro select { font: 600 clamp(20px, 2vw, 26px) var(--f); color: var(--beltz); background: var(--zuri); border: 0; padding: 10px 14px; border-radius: 0; }
.retro__l { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.retro__l li { border-top: 2px solid rgba(237,236,227,.3); padding-top: 14px; }
.retro__l li.urgent { border-color: #ff6b73; }
.retro__l small { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; opacity: .7; margin-bottom: 6px; }
.retro__l b { display: block; font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.02em; }
.retro__l span { font-size: 15px; opacity: .8; }
.retro__alerte { margin: 26px 0 0; font-size: 19px; font-weight: 500; }
.retro__alerte b { color: #ff8a8f; }
.retro__note { margin: 14px 0 0; font-size: 14px; opacity: .65; }
@media (max-width: 860px) { .retro__l { grid-template-columns: 1fr 1fr; } }

/* Encart prescripteurs */
.encart { background: var(--blanc); padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px clamp(24px, 4vw, 64px); }
.encart h2 { font-weight: 600; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.035em; line-height: 1.02; }
@media (max-width: 820px) { .encart { grid-template-columns: 1fr; } }

/* Pastilles de liens */
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pastilles a { text-decoration: none; border: 1.5px solid currentColor; padding: 10px 14px; font-size: 16px; font-weight: 500; }
@media (hover: hover) { .pastilles a:hover { background: var(--gorri); color: var(--zuri); border-color: var(--gorri); } }
@media (hover: hover) { .s--beltz .pastilles a:hover { background: var(--zuri); color: var(--beltz); border-color: var(--zuri); } }

/* FAQ */
.faq details { border-top: 1px solid var(--trait); }
.faq details:last-child { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 32px; font-weight: 400; color: var(--gorri); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 20px; color: var(--gris); font-size: 18px; max-width: 70ch; }

/* Boutons et appels */
.btn { display: inline-flex; align-items: center; gap: 12px; background: var(--beltz); color: var(--zuri); text-decoration: none; padding: 17px 22px; font-weight: 600; font-size: 17px; border: 0; cursor: pointer; font-family: var(--f); }
@media (hover: hover) { .btn:hover { background: var(--gorri); } }
.s--gorri .btn { background: var(--zuri); color: var(--beltz); }
@media (hover: hover) { .s--gorri .btn:hover { background: var(--beltz); color: var(--zuri); } }
.appel__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.s--gorri .btn--ligne { background: transparent; color: var(--zuri); box-shadow: inset 0 0 0 1.5px var(--zuri); }
@media (hover: hover) { .s--gorri .btn--ligne:hover { background: var(--zuri); color: var(--beltz); } }
.appel h2 { font-weight: 600; font-size: clamp(38px, 5.4vw, 88px); line-height: .96; letter-spacing: -.05em; max-width: 16ch; margin-bottom: 26px; }
.appel p { font-size: 21px; max-width: 52ch; margin: 0 0 30px; }
.appel__vifs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

/* Pied de page */
.ft { position: relative; background: var(--beltz); color: var(--zuri); padding: clamp(64px, 8vw, 110px) 0 0; font-size: 16px; overflow-x: clip; }
.ft__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 36px; border-bottom: 1px solid rgba(237,236,227,.18); }
.ft__claim { font-weight: 600; font-size: clamp(36px, 5vw, 76px); letter-spacing: -.045em; line-height: .95; margin: 0; }
.ft__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 36px 0; }
.ft__g p { margin: 0 0 8px; opacity: .6; font-size: 13px; font-weight: 600; letter-spacing: .05em; }
.ft__g a { display: block; text-decoration: none; margin-bottom: 6px; }
@media (hover: hover) { .ft__g a:hover { opacity: .7; } }
.ft__g a { font-weight: 600; }
.ft__g a small { display: block; font-size: 14px; opacity: .7; font-weight: 400; }
.ft__bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; border-top: 1px solid rgba(237,236,227,.18); padding: 22px 0; font-size: 14px; opacity: .8; }
.ft__mot img { width: 100%; transform: translateY(18%); }
.ft__mot { line-height: 0; overflow: hidden; }
@media (max-width: 860px) { .ft__g { grid-template-columns: 1fr 1fr; } }
.made64 { position: absolute; right: max(16px, 5vw); top: 0; transform: translateY(-50%) rotate(-12deg); width: clamp(140px, 15vw, 210px); aspect-ratio: 1; z-index: 3; filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); transition: transform .6s cubic-bezier(.2,.7,.1,1); }
@media (hover: hover) { .made64:hover { transform: translateY(-50%) rotate(0deg) scale(1.05); } }
.made64 svg { width: 100%; height: 100%; display: block; overflow: visible; }
.made64 .tour { transform-origin: 120px 120px; animation: tourne 22s linear infinite; }
.ft-wrap { position: relative; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; visibility: hidden; transform: translate(-50%, calc(100% + 60px)); background: var(--beltz); color: var(--zuri); padding: 14px 20px; font-size: 17px; font-weight: 500; z-index: 60; transition: transform .45s cubic-bezier(.2,.7,.1,1); max-width: calc(100vw - 32px); }
.toast.on { transform: translate(-50%, 0); visibility: visible; }
.toast b { color: #ff8a8f; font-weight: 600; }

/* Apparitions */
.js [data-rv] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.1,1), transform .8s cubic-bezier(.2,.7,.1,1); }
.js [data-rv].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-rv] { opacity: 1; transform: none; transition: none; } .made64 .tour { animation: none; } }

/* amo+moe : le devis annoté au stylo rouge */
.devis { margin-top: 48px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); padding: clamp(22px, 3vw, 44px); max-width: 980px; }
.devis__en { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--beltz); padding-bottom: 14px; margin-bottom: 6px; font-size: 14px; letter-spacing: .04em; }
.devis__en b { font-weight: 700; }
.devis__en span { color: var(--gris); }
.devis__l, .regard__l { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--trait); padding: 16px 0; font: inherit; color: inherit; cursor: pointer; }
.devis__l span { font-size: clamp(17px, 1.5vw, 20px); }
.devis__l b { font-variant-numeric: tabular-nums; font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); white-space: nowrap; }
.devis__l em, .regard__l em { grid-column: 1 / -1; font-style: normal; color: var(--gorri); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .4s, margin .4s; border-left: 3px solid var(--gorri); padding-left: 12px; }
.devis__l.on em, .regard__l.on em { max-height: 120px; opacity: 1; margin-top: 8px; }
.devis__l.on span { text-decoration: line-through; text-decoration-color: var(--gorri); text-decoration-thickness: 2px; }
@media (hover: hover) { .devis__l:hover span, .regard__l:hover span { color: var(--gorri); } }
.devis__pied { margin: 16px 0 0; font-size: 15px; color: var(--gris); }
.devis__pied span:first-child { color: var(--gorri); font-weight: 700; }
/* asset : ce que vous voyez, ce que nous chiffrons */
.regard { margin-top: 40px; max-width: 980px; border-top: 2px solid var(--beltz); }
.regard__l { grid-template-columns: 1fr; }
.regard__l span { font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; }
.regard__l span::after { content: "+"; display: inline-block; margin-left: 10px; color: var(--gorri); transition: transform .3s; }
.regard__l.on span::after { transform: rotate(45deg); }

/* Retour en haut : remonter à la cote 0,00 */
.haut { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; background: var(--gorri); color: var(--zuri); border: 0; padding: 12px 16px; font: 600 15px/1 var(--f, "Instrument Sans", sans-serif); letter-spacing: .02em; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s, visibility .3s, background .2s; }
.haut.on { opacity: 1; visibility: visible; transform: none; }
.haut { outline: 1px solid rgba(237,236,227,.55); outline-offset: -1px; }
@media (hover: hover) { .haut:hover { background: var(--beltz); } }
.haut__t { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s; }
@media (hover: hover) { .haut:hover .haut__t, .haut:focus-visible .haut__t { max-width: 200px; } }
.haut b { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .haut { padding: 10px 12px; font-size: 14px; } }

/* Blog : cartes ficelles */
.fic__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.fic__g--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fic__c { display: flex; flex-direction: column; gap: 14px; min-height: 280px; padding: 28px; background: var(--zuri); color: inherit; text-decoration: none; transition: background .35s, color .35s; }
.s:not(.s--blanc) .fic__c { background: var(--blanc); }
@media (hover: hover) { .fic__c:hover { background: var(--gorri) !important; color: var(--zuri); } }
.fic__n { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--gorri); }
@media (hover: hover) { .fic__c:hover .fic__n { color: var(--zuri); } }
.fic__c h3 { font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; line-height: 1.05; }
.fic__c p { margin: 0; color: var(--gris); font-size: 18px; }
@media (hover: hover) { .fic__c:hover p { color: rgba(237,236,227,.88); } }
.fic__t { margin-top: auto; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; }
@media (max-width: 900px) { .fic__g, .fic__g--2 { grid-template-columns: 1fr; } .fic__c { min-height: 0; } }

/* Blog : article */
.art { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.art__som { position: sticky; top: 140px; }
.art__som ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.art__som li { counter-increment: s; border-top: 1px solid var(--trait); }
.art__som a { display: flex; gap: 12px; padding: 10px 0; text-decoration: none; font-weight: 500; font-size: 17px; }
.art__som a::before { content: "0" counter(s); color: var(--gorri); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .art__som a:hover { color: var(--gorri); } }
.art .prose h2 { scroll-margin-top: 140px; }
.art__scene { border-left: 4px solid var(--gorri); padding: 4px 0 4px 24px; margin: 0 0 1.4em; }
.art__scene p { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; }
.art__scene small { display: block; font-size: 14px; color: var(--gris); }
.astuce { background: var(--gorri); color: var(--zuri); padding: clamp(22px, 3vw, 34px); margin: 1.6em 0; }
.astuce b { display: block; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .85; margin-bottom: 10px; }
.astuce p { margin: 0 !important; font-size: clamp(21px, 1.9vw, 27px) !important; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.art__q { list-style: none; padding: 0; margin: 0 0 1.2em; counter-reset: q; }
.art__q li { counter-increment: q; display: grid; grid-template-columns: 44px 1fr; padding: 14px 0; border-top: 1px solid var(--trait); font-size: 19px; }
.art__q li::before { content: counter(q, decimal-leading-zero); color: var(--gorri); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .art { grid-template-columns: 1fr; } .art__som { position: static; } }
/* Liens sans destination pour l'instant : même rendu, pas de clic */
.ft__g .lien-mort { display: block; margin-bottom: 6px; }
.ft__g .lien-mort small { display: block; font-size: 14px; opacity: .7; }
.pastilles .lien-mort { border: 1.5px solid currentColor; padding: 10px 14px; font-size: 16px; font-weight: 500; }
.art__q li { padding-left: 0; }
.art__q li::before { position: static; width: auto; height: auto; background: none; top: auto; }
.hd nav a { white-space: nowrap; }
@media (max-width: 1100px) { .hd nav a:not(.hd__cta) { display: none; } }

/* Bandeau chantier / lieu ouvert (design+build) */
.bandeau { margin: 0; position: relative; }
.bandeau img { width: 100%; height: clamp(260px, 30vw, 620px); object-fit: cover; object-position: 45% 50%; }
.bandeau figcaption { position: absolute; right: var(--gr); bottom: 14px; background: var(--zuri); padding: 6px 10px; font-size: 14px; font-weight: 600; }
.bandeau figcaption span { font-weight: 400; color: var(--gris); }
@media (max-width: 700px) { .bandeau img { height: auto; aspect-ratio: 1000 / 625; } }
@media (max-width: 700px) { .bandeau figcaption { font-size: 11px; padding: 4px 7px; bottom: 8px; right: 8px; } }
.g2 .h2 { font-size: clamp(32px, 3.7vw, 56px); }

/* Fin d'article : continuer la visite */
.suite-nav { background: var(--zuri); border-top: 1px solid var(--trait); }
.suite-nav .w { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.sortie { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); }
.au { flex: none; display: block; line-height: 0; -webkit-tap-highlight-color: transparent; }
.au img { display: block; width: 150px; height: auto; filter: drop-shadow(0 10px 14px rgba(31,31,31,.22)); transition: transform .12s ease-out, filter .12s ease-out; }
@media (hover: hover) { .au:hover img { transform: translateY(2px) rotate(-1deg); } }
.au:active img, .au.presse img { transform: translateY(6px) scale(.97); filter: drop-shadow(0 3px 5px rgba(31,31,31,.3)); }
.au:focus-visible { outline: 3px solid var(--gorri); outline-offset: 4px; }
.sortie__t p { margin: 0; font-size: clamp(17px, 1.5vw, 20px); }
.sortie__h { font-weight: 600; font-size: clamp(26px, 2.6vw, 36px) !important; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 6px !important; }
.sortie__l { margin-top: 16px !important; font-size: 17px !important; color: rgba(31,31,31,.7); }
.sortie__l a { font-weight: 600; color: var(--beltz); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .sortie__l a:hover { color: var(--gorri); } }
@media (max-width: 520px) { .sortie { align-items: flex-start; } .au img { width: 104px; } }

/* Lexique du chantier */
.lx__cherche { margin-top: 32px; max-width: 560px; }
.lx__cherche label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.lx__cherche input { width: 100%; font: 400 19px var(--f); padding: 14px 16px; border: 1.5px solid var(--beltz); background: var(--blanc); color: var(--beltz); border-radius: 0; }
.lx__cherche input:focus { outline: 2px solid var(--gorri); outline-offset: -1px; }
.lx__vide { margin: 12px 0 0; font-size: 17px; }
.lx__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.lx { border-top: 2px solid var(--beltz); padding: 22px 0 30px; scroll-margin-top: 140px; }
.lx[hidden] { display: none; }
.lx h2 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.lx__s { margin: 6px 0 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--gorri); }
.lx p { margin: 12px 0 0; font-size: 18px; color: var(--gris); }
.lx .lx__t { color: var(--beltz); font-weight: 600; font-size: 19px; padding-top: 12px; border-top: 1px solid var(--trait); }
.lx .lx__t span { color: var(--gorri); }
.lx__a { display: inline-block; margin-top: 14px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gorri); }
@media (hover: hover) { .lx__a:hover { color: var(--gorri); } }
.lx--vise { background: linear-gradient(90deg, rgba(156,0,11,.07), transparent 70%); }
.fic__c--lx { background: var(--beltz) !important; color: var(--zuri); }
.fic__c--lx .fic__n { color: #ff8a8f; }
.fic__c--lx p { color: rgba(237,236,227,.82); }
@media (hover: hover) { .fic__c--lx:hover { background: var(--gorri) !important; } }
@media (max-width: 860px) { .lx__g { grid-template-columns: 1fr; } }

.hd__cta { background: var(--gorri); }
@media (hover: hover) { .hd__cta:hover { background: var(--beltz); } }
sup{line-height:0;font-size:.62em;vertical-align:.62em}

.couleurs { display: flex; gap: 8px; margin-bottom: 10px; }
.couleurs i { width: 30px; height: 30px; display: block; border: 1px solid rgba(237,236,227,.3); }
/* Menu mobile */
.hd__menu { display: none; background: none; border: 1.5px solid var(--beltz); color: var(--beltz); padding: 11px 16px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.hd__tiroir { display: none; border-top: 1px solid var(--trait); padding: 6px var(--gr) 20px var(--gl); max-height: calc(100vh - 140px); overflow-y: auto; }
.hd__tiroir a { display: block; padding: 13px 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; border-bottom: 1px solid var(--trait); }
.hd__tiroir a[aria-current] { color: var(--gorri); }
.hd__tiroir b { font-weight: 700; }
@media (max-width: 1100px) { .hd__menu { display: inline-block; } .hd.ouvert .hd__tiroir { display: block; } .hd nav { gap: 10px; } }

/* Navigation : nom de la rubrique, puis ce qu'on y trouve */
@media (min-width: 1101px) { .hd nav a:not(.hd__cta) { display: flex; flex-direction: column; line-height: 1.12; } }
.hd nav a small { font-size: 13px; font-weight: 500; color: rgba(31,31,31,.58); margin-top: 3px; }
@media (hover: hover) { .hd nav a:not(.hd__cta):hover span, .hd nav a[aria-current] span { color: var(--gorri); } }
.hd nav { gap: 26px; }
.hd__tiroir a span { display: block; }
.hd__tiroir a small { display: block; font-size: 15px; font-weight: 500; color: rgba(31,31,31,.58); margin-top: 2px; }
.ft__bas a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } @media (hover: hover) { .ft__bas a:hover { color: #fff; } }

/* Lignes à traduire : la consigne se voit, la première ligne fait signe */
.consigne { background: var(--gorri); color: var(--zuri); padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px); margin: 16px 0 10px; }
.consigne b { display: flex; align-items: center; gap: 12px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.consigne b::after { content: "↓"; display: inline-block; animation: consigne 1.6s cubic-bezier(.2,.7,.1,1) infinite; }
.consigne span { display: block; margin-top: 6px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; opacity: .92; }
@keyframes consigne { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.devis__l span::after { content: "+"; display: inline-block; margin-left: 10px; color: var(--gorri); font-weight: 600; transition: transform .3s; }
.devis__l.on span::after { transform: rotate(45deg); }
.devis__l.invite, .regard__l.invite { animation: invite 2.2s ease-in-out infinite; }
@keyframes invite { 0%, 100% { background: transparent; } 50% { background: rgba(156,0,11,.07); } }
@media (prefers-reduced-motion: reduce) { .consigne b::after, .devis__l.invite, .regard__l.invite { animation: none; } }

.devis__pied { font-size: 17px !important; }
.jeu__n { font-size: 30px; line-height: 1; color: var(--gorri); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 8px; vertical-align: -3px; }
.jeu__bravo { margin: 16px 0 0; padding: 16px 20px; background: var(--gorri); color: var(--zuri); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); animation: bravo .5s cubic-bezier(.2,.7,.1,1); }
.jeu__bravo a { color: var(--zuri); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@keyframes bravo { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Le jeu : score en tête, stylo rouge en curseur */
.jeu__hud { margin-left: auto; color: var(--gorri) !important; font-weight: 600; letter-spacing: 0; font-size: 16px; }
.jeu__hud b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.regard__en { display: flex; justify-content: flex-end; padding-top: 12px; }
@media (hover: hover) { .devis__l, .regard__l { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 28l2-7L21 6l5 5-15 15z' fill='%239C000B' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M4 28l2-7 5 5z' fill='%231F1F1F'/%3E%3C/svg%3E") 4 28, pointer; } }
.devis__l.on, .regard__l.on { background: rgba(156,0,11,.035); }
.renvoi { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; text-decoration-thickness: 2px; cursor: pointer; }
@media (hover: hover) { .renvoi:hover, .renvoi:focus-visible { text-decoration-style: solid; outline: none; } }