/* Entretien Toiture 74 — fiche technique : ardoise, glacier, orange signalisation */
:root{
  --slate:#1E2A3A; --slate-2:#2C3B50; --slate-3:#3d4f68;
  --glacier:#EAF1F6; --ice:#F6F9FB; --white:#fff;
  --signal:#FF6B2C; --signal-dk:#C2410C;
  --text:#1E2A3A; --muted:#4F5D70; --rule:#C9D5DF; --rule-dk:#1E2A3A;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --tt-ink:#1E2A3A; --tt-bg:#fff; --tt-accent:#1E2A3A; --tt-accent-ink:#fff; --tt-accent-text:#C2410C; --tt-soft:#EAF1F6; --tt-line:#C9D5DF; --tt-muted:#4F5D70; --tt-radius:4px; --tt-font:var(--sans); --tt-display:var(--sans);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--ice);color:var(--text);font:400 16px/1.6 var(--sans);font-stretch:100%}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.mono{font-family:var(--mono);font-stretch:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skiplink{position:absolute;left:-999px;top:0;background:var(--signal);color:#111;padding:10px 14px;z-index:99}
.skiplink:focus{left:8px}
.shell{width:100%;max-width:1200px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
h1,h2,h3{font-family:var(--sans);font-stretch:118%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(34px,7.4vw,66px)}
h2{font-size:clamp(23px,3.6vw,34px)}
h3{font-size:18px}
p{margin:0 0 1em}

/* Bandeau supérieur */
.ticker{background:var(--slate);color:var(--glacier);font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ticker .shell{display:flex;justify-content:space-between;gap:12px;padding-block:9px}
.ticker span:first-child::before{content:"";display:inline-block;width:8px;height:8px;background:var(--signal);margin-right:8px;vertical-align:0}
@media (max-width:640px){.hide-sm{display:none}}

/* En-tête */
.masthead{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:2px solid var(--slate)}
.masthead-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:36px;height:36px;flex:none}
.logo-txt{font:800 15px/1.12 var(--sans);font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em;margin:0}
.logo-txt em{font-style:normal;background:var(--signal);color:var(--slate);padding:0 4px;margin-left:6px}
.burger{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:2px solid var(--slate);background:var(--white);color:var(--slate);font:600 13px var(--mono);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.burger-lines{width:16px;height:10px;border-block:2px solid currentColor;position:relative}
.burger-lines::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid currentColor}
.menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:2px solid var(--slate);padding:8px 16px 16px;flex-direction:column}
.menu.is-open{display:flex}
.menu a{text-decoration:none;font:700 15px/1 var(--sans);font-stretch:112%;text-transform:uppercase;padding:14px 4px;border-bottom:1px solid var(--rule)}
.menu a[aria-current="page"]{color:var(--signal-dk)}
.menu .menu-cta{margin-top:12px;border:0;background:var(--signal);color:var(--slate);text-align:center;padding:15px}
@media (min-width:980px){
  .burger{display:none}
  .menu{display:flex;position:static;flex-direction:row;align-items:center;gap:4px;padding:0;border:0;background:none}
  .menu a{border:0;padding:10px 10px;font-size:13px;white-space:nowrap;font-stretch:105%}
  .menu a:hover{background:var(--glacier)}
  .menu a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--signal);color:var(--slate)}
  .menu .menu-cta{margin:0 0 0 10px;padding:12px 16px}
  .menu .menu-cta:hover{background:var(--slate);color:var(--white)}
}

/* Boutons */
.go{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 20px;background:var(--signal);color:var(--slate);border:2px solid var(--signal);font:800 15px/1.1 var(--sans);font-stretch:112%;text-transform:uppercase;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.go:hover{background:var(--slate);border-color:var(--slate);color:var(--white)}
.go-line{background:transparent;border-color:var(--slate);color:var(--slate)}
.go-line:hover{background:var(--slate);color:var(--white)}
.go-light:hover{background:var(--white);border-color:var(--white);color:var(--slate)}
.tag{display:inline-block;font:600 12px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--signal-dk);margin:0 0 14px}
.intro{font-size:clamp(17px,2.1vw,19px);color:var(--muted);max-width:62ch}

/* Héros */
.hero{background:var(--glacier);border-bottom:2px solid var(--slate);background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}
.hero-grid{display:grid;gap:32px;padding-block:44px 48px}
.hero-txt{align-self:center}
.hero-txt .tag{background:var(--white);border:1px solid var(--slate);color:var(--slate);padding:7px 10px}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 30px}
.strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--slate);background:var(--white)}
.strip li{padding:12px 12px 14px;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.strip li:first-child{border-left:0}
.strip span{font-size:11px;letter-spacing:.07em;color:var(--signal-dk);font-weight:600}
.strip b{font:800 14px/1.15 var(--sans);font-stretch:110%;text-transform:uppercase}
.strip li.is-now{background:var(--slate);color:var(--white)}
.strip li.is-now span{color:var(--signal)}
@media (max-width:520px){.strip{grid-template-columns:1fr}.strip li{border-left:0;border-top:1px solid var(--rule);flex-direction:row;align-items:baseline;justify-content:space-between}.strip li:first-child{border-top:0}}
.hero-form{background:var(--slate);color:var(--glacier);padding:22px 18px 18px;border-top:6px solid var(--signal);scroll-margin-top:80px}
.hero-form-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font:800 20px/1.1 var(--sans);font-stretch:118%;text-transform:uppercase;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--slate-3)}
.hero-form-h .mono{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--signal)}
@media (min-width:980px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:56px;padding-block:64px}.hero-form{padding:26px 26px 22px}}

/* Fiche (formulaire) */
.sheet{display:grid;gap:4px}
.sheet-row{border:0;margin:0;padding:12px 0;border-bottom:1px dashed var(--rule);display:grid;gap:10px;min-width:0}
.sheet-lbl{margin:0;padding:0;font:600 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sheet-lbl span{display:inline-block;background:var(--slate);color:var(--white);padding:2px 5px;margin-right:6px}
.cols{display:grid;gap:10px}
@media (min-width:560px){.cols{grid-template-columns:1fr 1fr}.cols .inp-zip{max-width:none}}
.inp{display:grid;gap:5px}
.inp label{font:600 14px/1.3 var(--sans)}
.inp label i{font:400 12px var(--mono);color:var(--muted);font-style:normal;margin-left:4px}
.inp input,.inp select,.inp textarea{width:100%;min-height:48px;padding:11px 12px;border:2px solid var(--slate);border-radius:0;background:var(--white);color:var(--slate);font:16px/1.4 var(--sans)}
.inp textarea{min-height:88px;resize:vertical}
.inp select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 12px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.inp input:focus,.inp select:focus,.inp textarea:focus{outline:3px solid var(--signal);outline-offset:0}
.toggles{display:flex;flex-wrap:wrap;gap:8px}
.toggles label{position:relative}
.toggles input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.toggles span{display:inline-flex;align-items:center;min-height:42px;padding:8px 13px;border:2px solid var(--slate);background:var(--white);font:600 14px var(--sans)}
.toggles input:checked+span{background:var(--slate);color:var(--white);box-shadow:inset 0 -4px 0 var(--signal)}
.toggles input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--muted);margin:10px 0 8px}
.agree input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--signal)}
.sheet .go{width:100%;margin-top:4px}
.sheet-foot{margin:6px 0 0;font-size:11.5px;letter-spacing:.04em;color:var(--muted);text-align:center}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Variante sombre dans le héros */
.hero-form .sheet-row{border-bottom-color:var(--slate-3)}
.hero-form .sheet-lbl,.hero-form .agree,.hero-form .sheet-foot,.hero-form .inp label i{color:#AFC0D2}
.hero-form .sheet-lbl span{background:var(--signal);color:var(--slate)}
.hero-form .inp input,.hero-form .inp select,.hero-form .inp textarea{border-color:var(--slate-2);background-color:var(--slate-2);color:var(--white)}
.hero-form .inp input::placeholder,.hero-form .inp textarea::placeholder{color:#8798ad}
.hero-form .inp select{background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%)}
.hero-form .inp select option{color:var(--slate);background:#fff}
.hero-form .toggles span{background:transparent;border-color:var(--slate-3);color:var(--glacier)}
.hero-form .toggles input:checked+span{background:var(--glacier);color:var(--slate);border-color:var(--glacier)}
.hero-form .agree a{color:var(--white)}
.hero-form .go:hover{background:var(--white);border-color:var(--white);color:var(--slate)}

/* Bandes */
.band{background:var(--slate);color:var(--glacier)}
.now{display:grid;gap:14px;padding-block:34px}
.now .tag{color:var(--signal);margin:0}
.now h2{color:var(--white);margin-bottom:.3em}
.now p{margin:0;color:#C3D0DD;max-width:70ch}
@media (min-width:860px){.now{grid-template-columns:220px 1fr auto;align-items:center;gap:32px}}
.band-cta{background:var(--signal);color:var(--slate)}
.cta{display:grid;gap:20px;padding-block:44px;align-items:center}
.cta h2{margin:0;max-width:24ch}
.band-cta .go{background:var(--slate);border-color:var(--slate);color:var(--white)}
.band-cta .go:hover{background:var(--white);border-color:var(--white);color:var(--slate)}
@media (min-width:860px){.cta{grid-template-columns:1fr auto}}

/* Blocs */
.block{padding-block:56px;border-bottom:1px solid var(--rule)}
.block-alt{background:var(--white)}
.block-tight{padding-block:36px 56px}
.block-head{max-width:720px;margin-bottom:26px}
.block-head p:not(.tag){color:var(--muted)}
.narrow{max-width:860px}
.two{display:grid;gap:30px}
@media (min-width:900px){.two{grid-template-columns:.9fr 1.1fr;gap:56px}.two .block-head{position:sticky;top:96px;align-self:start}}

/* Tableaux */
.table-scroll{overflow-x:auto;border:2px solid var(--slate);background:var(--white)}
.spec-table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
.spec-table th,.spec-table td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.spec-table thead th{background:var(--slate);color:var(--white);font:600 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;border-bottom:0}
.spec-table tbody th{font-weight:700}
.spec-table td.mono{font-size:13.5px;color:var(--signal-dk);font-weight:600;white-space:nowrap}
.spec-table tbody tr:last-child>*{border-bottom:0}
.doc .spec-table{min-width:0;border:2px solid var(--slate);margin:6px 0 22px}
.doc .spec-table td.mono{white-space:normal}

/* Guides (cartes) */
.files{display:grid;gap:0;border:2px solid var(--slate);background:var(--white)}
.file{position:relative;display:grid;gap:6px;padding:20px 54px 20px 18px;text-decoration:none;border-bottom:1px solid var(--rule)}
.file:last-child{border-bottom:0}
.file-n{font-size:11.5px;letter-spacing:.08em;color:var(--signal-dk);font-weight:600}
.file b{font:800 19px/1.1 var(--sans);font-stretch:115%;text-transform:uppercase}
.file span:not(.file-n):not(.file-go){color:var(--muted);font-size:15px}
.file-go{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:700}
.file:hover{background:var(--slate);color:var(--white)}
.file:hover span:not(.file-n){color:#C3D0DD}
@media (min-width:760px){.files{grid-template-columns:repeat(2,1fr)}.file{border-right:1px solid var(--rule)}.file:nth-child(2n){border-right:0}.file:nth-last-child(-n+2){border-bottom:0}}
@media (min-width:1100px){.files{grid-template-columns:repeat(4,1fr)}.file{border-bottom:0;border-right:1px solid var(--rule);padding:24px 20px 56px}.file:last-child{border-right:0}.file:nth-child(2n){border-right:1px solid var(--rule)}.file:last-child{border-right:0}.file-go{top:auto;bottom:18px;transform:none;right:auto;left:20px}}

/* Liste numérotée */
.check{list-style:none;counter-reset:ck;margin:0;padding:0;border-top:2px solid var(--slate)}
.check li{counter-increment:ck;display:grid;grid-template-columns:52px 1fr;column-gap:14px;padding:16px 0;border-bottom:1px solid var(--rule)}
.check li::before{content:counter(ck,decimal-leading-zero);grid-row:span 2;font:600 22px/1 var(--mono);color:var(--signal-dk);padding-top:2px}
.check b{font:800 16px/1.2 var(--sans);font-stretch:112%;text-transform:uppercase}
.check span{color:var(--muted)}
.check-plain{margin:6px 0 24px}

/* Villes */
.grid-villes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:2px solid var(--slate)}
.grid-villes a{display:flex;flex-direction:column;gap:3px;padding:15px 36px 15px 0;text-decoration:none;border-bottom:1px solid var(--rule);position:relative}
.grid-villes a::after{content:"→";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--signal-dk)}
.grid-villes b{font:800 17px/1.15 var(--sans);font-stretch:112%;text-transform:uppercase}
.grid-villes span{font-size:12px;color:var(--muted);letter-spacing:.03em}
.grid-villes a:hover b{color:var(--signal-dk)}
@media (min-width:640px){.grid-villes{grid-template-columns:repeat(2,1fr);column-gap:28px}}
@media (min-width:1000px){.grid-villes{grid-template-columns:repeat(3,1fr)}.grid-villes-sm{grid-template-columns:repeat(2,1fr)}}
.sector{margin-bottom:34px}
.sector-h{font-size:18px;margin-bottom:12px;color:var(--signal-dk)}
.sector-cta{max-width:640px}

/* FAQ */
.qa{border-top:2px solid var(--slate)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:17px 0;font:700 17px/1.35 var(--sans)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:500 22px/1 var(--mono);color:var(--signal-dk);flex:none}
.qa details[open] summary::after{content:"−"}
.qa details p{margin:0 0 18px;color:var(--muted);max-width:72ch}

/* Pages intérieures */
.pagehead{background:var(--glacier);border-bottom:2px solid var(--slate);padding-block:36px 40px}
.pagehead h1{font-size:clamp(30px,6vw,54px);max-width:20ch}
.pagehead-404{padding-block:70px}
.trail{font-size:12px;letter-spacing:.04em;color:var(--muted);margin-bottom:18px}
.trail a{color:var(--muted)}
.idcard{display:flex;flex-wrap:wrap;gap:0;margin:22px 0 0;border:2px solid var(--slate);background:var(--white);width:fit-content;max-width:100%}
.idcard div{padding:10px 16px;border-right:1px solid var(--rule)}
.idcard div:last-child{border-right:0}
.idcard dt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.idcard dd{margin:2px 0 0;font-weight:700}
@media (max-width:480px){.idcard{width:100%}.idcard div{flex:1 1 50%;border-bottom:1px solid var(--rule)}}
.split{display:grid;gap:36px;padding-block:44px 64px}
@media (min-width:980px){.split{grid-template-columns:minmax(0,1fr) 340px;gap:56px}.rail{position:sticky;top:96px;align-self:start}}
.doc{max-width:760px;font-size:17px}
.doc h2{font-size:clamp(21px,3vw,27px);margin-top:1.6em;padding-top:14px;border-top:2px solid var(--slate)}
.doc>h2:first-child,.doc .seasons+h2{margin-top:0}
.doc ul{padding-left:20px}
.doc li{margin-bottom:6px}
.doc li::marker{color:var(--signal-dk)}
.doc a{color:var(--signal-dk);font-weight:600}
.warn{border:2px solid var(--slate);border-left:10px solid var(--signal);background:var(--white);padding:16px 18px;margin:24px 0}
.warn strong{display:block;font-stretch:112%;text-transform:uppercase;margin-bottom:4px}
.seasons{display:grid;gap:0;border:2px solid var(--slate);background:var(--white);margin-bottom:36px}
.season{padding:22px 20px;border-bottom:1px solid var(--rule)}
.season:last-child{border-bottom:0}
.season h2{border:0;padding:0;margin:0 0 .5em}
.season-m{margin:0 0 8px;font-size:12px;letter-spacing:.09em;color:var(--signal-dk);font-weight:600}
.rail{display:grid;gap:16px;align-content:start}
.spec{border:2px solid var(--slate);background:var(--white);padding:18px}
.spec p:last-child{margin-bottom:0}
.spec-h{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--signal-dk)}
.spec-dark{background:var(--slate);color:var(--glacier);border-color:var(--slate)}
.spec-dark .spec-h{color:var(--signal);border-color:var(--slate-3)}
.spec-dark .go{width:100%}
.spec-dark .go:hover{background:var(--white);border-color:var(--white);color:var(--slate)}
.steps{margin:0;padding-left:20px}
.steps li{margin-bottom:4px}
.rail-list{list-style:none;margin:0;padding:0}
.rail-list a{display:block;padding:9px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-weight:600}
.rail-list li:last-child a{border-bottom:0}
.rail-list a:hover{color:var(--signal-dk)}
.notice{border:2px solid var(--slate);background:var(--white);padding:20px;margin-bottom:20px}
.notice-ok{border-left:10px solid #1f8a5b}
.notice-err{border-left:10px solid var(--signal)}
.notice ul{margin:6px 0 0;padding-left:20px}
.split .sheet{background:var(--white);border:2px solid var(--slate);padding:6px 18px 18px}

/* Pied de page */
.colophon{background:var(--slate);color:#C3D0DD;padding-top:48px;margin-top:0}
.colophon-grid{display:grid;gap:30px;padding-bottom:34px}
.colophon a{display:block;color:var(--glacier);text-decoration:none;padding:5px 0;font-size:15px}
.colophon a:hover{color:var(--signal)}
.colophon-h{font:600 11.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--signal);margin-bottom:10px}
.logo-light{color:var(--white);margin-bottom:14px}
.colophon-id p{max-width:40ch;font-size:15px}
.colophon-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid var(--slate-3);padding-block:18px calc(88px + env(safe-area-inset-bottom,0px));font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
@media (min-width:760px){.colophon-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
@media (min-width:980px){.colophon-end{padding-bottom:22px}}

/* CTA mobile fixe */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--white);border-top:2px solid var(--slate)}
.dock a{display:flex;align-items:center;justify-content:center;min-height:48px;background:var(--signal);color:var(--slate);font:800 15px var(--sans);font-stretch:112%;text-transform:uppercase;text-decoration:none}
@media (min-width:980px){.dock{display:none}}
body[data-no-rappel] .dock{display:none}
body[data-no-rappel] .colophon-end{padding-bottom:22px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Planches photo — légendes façon fiche technique */
.plate{margin:0;border:2px solid var(--slate);background:var(--white)}
.plate img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover;aspect-ratio:16/7;filter:saturate(.92) contrast(1.03)}
.plate figcaption{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:8px 12px;border-top:2px solid var(--slate);display:flex;gap:10px}
.plate figcaption::before{content:"FIG.";color:var(--signal-dk);font-weight:600}
.plate-row{padding-block:28px 0}
.plate-wide img{aspect-ratio:21/8}
.plate-side{margin-top:28px}
.plate-side img{aspect-ratio:4/3}
@media (max-width:760px){.plate img,.plate-wide img{aspect-ratio:4/3}.plate-row{padding-block:20px 0}}
.credits{padding-left:18px}.credits li{margin-bottom:6px;font-size:14px}