/* ===== T3 « Urgence 24/7 » — charbon + rouge, CTA dominant, vocabulaire propre ===== */
:root{
  --ink:#1d1f24; --soft:#5b616b; --line:#e5e7ea;
  --char:#16181d; --char2:#22252c; --red:#c62a2a; --red-d:#951a1a; --amber:#ffb43d;
  --paper:#f6f7f8; --white:#fff; --rad:6px; --sh:0 4px 18px rgba(20,22,26,.12);
  --shell:1160px;
}
*{box-sizing:border-box}
body.t3{margin:0; font-family:"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background:var(--white); line-height:1.6}
.shell{max-width:var(--shell); margin:0 auto; padding:0 22px}
.colw{max-width:800px}
h1,h2,h3{line-height:1.2; margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4.4vw,2.9rem); font-weight:800}
h2{font-size:clamp(1.4rem,3vw,2rem); font-weight:800; color:var(--char)}
a{color:var(--red-d)}
img{max-width:100%; height:auto}

/* Barre d'urgence collante */
.urg-bar{position:sticky; top:0; z-index:40; background:var(--red); color:#fff}
.urg-in{display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px}
.urg-msg{font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:9px}
.urg-msg .dot{width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.urg-tel{display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--red-d); text-decoration:none; font-weight:800; padding:6px 14px; border-radius:99px; cursor:pointer}

/* Header */
.masthead{background:var(--char); color:#fff; border-bottom:3px solid var(--red)}
.mast-in{display:flex; align-items:center; gap:22px; min-height:70px}
.emblem{display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; font-weight:800; font-size:1.1rem}
.emblem-badge{display:grid; place-items:center; width:40px; height:40px; border-radius:9px; background:var(--red); color:#fff; font-weight:900}
.menu{display:flex; gap:20px; margin-left:auto}
.menu a{color:#cfd2d7; text-decoration:none; font-weight:600; font-size:.95rem; padding:6px 0}
.menu a:hover,.menu a[aria-current]{color:#fff}
.mast-cta{margin-left:6px}

/* Boutons (act) */
.act{display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; text-align:center; padding:13px 24px; border-radius:var(--rad); font-weight:800; cursor:pointer; border:0; font-size:1rem; transition:background .15s,transform .1s}
.act-alarm{background:var(--red); color:#fff}
.act-alarm:hover{background:var(--red-d)}
.act-solid{background:#fff; color:var(--char)}
.act-ghost{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55)}
.act-ghost:hover{border-color:#fff}
.act-dark{background:var(--char); color:#fff}
.act-wide{width:100%}
.act-lg{padding:16px 30px; font-size:1.08rem}

/* Hero plein écran */
.bighero{background:linear-gradient(160deg,var(--char),#2a2e37 70%,#331014); color:#fff; position:relative; overflow:hidden}
.bighero::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% 20%,rgba(216,31,42,.35),transparent 45%)}
.bighero-in{position:relative; display:grid; grid-template-columns:1.3fr .85fr; gap:44px; align-items:center; padding:64px 0 60px}
.kick{display:inline-flex; align-items:center; gap:8px; background:rgba(216,31,42,.18); color:#ffb9be; font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; padding:6px 13px; border-radius:99px; margin-bottom:16px}
.bighero h1{color:#fff}
.lede{font-size:1.16rem; color:#cdd0d6; margin-bottom:24px}
.cta-row{display:flex; flex-wrap:wrap; gap:13px}
.assure{display:flex; gap:26px; margin-top:26px; flex-wrap:wrap}
.assure div{display:flex; flex-direction:column}
.assure b{font-size:1.45rem; color:#fff}
.assure span{font-size:.82rem; color:#9aa0a9}
.hero-panel{background:#fff; color:var(--ink); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.4); padding:24px; border-top:4px solid var(--red)}
.hero-panel h3{color:var(--char); font-size:1.12rem}
.hero-panel .marks{margin:12px 0 16px}

/* Sections */
.zone{padding:58px 0}
.zone-soft{background:var(--paper)}
.zone-dark{background:var(--char); color:#fff}
.zone-dark h2{color:#fff}
.zhead{text-align:center; max-width:680px; margin:0 auto 34px}
.zhead p{color:var(--soft)}
.zone-dark .zhead p{color:#aeb3bb}

/* Étapes numérotées (signature urgence) */
.steps-n{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:sn}
.stepn{position:relative; background:#fff; border:1px solid var(--line); border-left:4px solid var(--red); border-radius:10px; padding:22px 18px 18px}
.zone-dark .stepn{background:var(--char2); border-color:#333; border-left-color:var(--red)}
.stepn::before{counter-increment:sn; content:counter(sn,decimal-leading-zero); position:absolute; top:-14px; left:16px; background:var(--red); color:#fff; font-weight:900; font-size:.85rem; padding:3px 9px; border-radius:5px}
.stepn h3{font-size:1.05rem; margin:4px 0 .3em}
.stepn p{font-size:.92rem; color:var(--soft); margin:0}
.zone-dark .stepn p{color:#b9bdc5}

/* Tuiles services */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.tile{background:#fff; border:1px solid var(--line); border-radius:11px; padding:26px; box-shadow:var(--sh); transition:transform .12s}
.tile:hover{transform:translateY(-4px)}
.tile-ic{width:50px; height:50px; border-radius:11px; background:#fdeceo; background:rgba(216,31,42,.1); color:var(--red); display:grid; place-items:center; margin-bottom:13px}
.tile-ic svg{width:27px; height:27px; stroke-width:1.7}
.tile h3{font-size:1.12rem}
.tile p{color:var(--soft); font-size:.96rem}

/* Listes cochées */
.marks{list-style:none; padding:0; margin:0}
.marks li{position:relative; padding-left:27px; margin-bottom:9px}
.marks li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--red); font-weight:900}
.marks-2{columns:2; column-gap:32px}
.marks-2 li{break-inside:avoid}

/* Vignettes guides */
.thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.thumbcard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:11px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--sh); transition:transform .12s}
.thumbcard:hover{transform:translateY(-4px)}
.thumbcard img{width:100%; height:148px; object-fit:cover}
.thumbcard-b{padding:15px; display:flex; flex-direction:column; gap:6px; flex:1}
.thumbcard-b h3{font-size:1rem; margin:0}
.thumbcard-b p{font-size:.87rem; color:var(--soft); margin:0; flex:1}
.thumbcard-b span{color:var(--red-d); font-weight:800; font-size:.87rem}

/* FAQ */
.qlist details{background:#fff; border:1px solid var(--line); border-radius:9px; margin-bottom:11px}
.qlist summary{cursor:pointer; padding:15px 44px 15px 18px; font-weight:700; color:var(--char); list-style:none; position:relative}
.qlist summary::-webkit-details-marker{display:none}
.qlist summary::after{content:"+"; position:absolute; right:17px; top:12px; font-size:1.35rem; color:var(--red)}
.qlist details[open] summary::after{content:"–"}
.qlist details p{padding:0 18px 15px; margin:0; color:var(--soft)}

/* Formulaire */
.askbox{display:grid; gap:14px; background:#fff; padding:26px; border-radius:12px; color:var(--ink); border-top:4px solid var(--red)}
.askbox.two{grid-template-columns:1fr 1fr}
.askbox .wide{grid-column:1/-1}
.askbox label{display:block; font-size:.86rem; font-weight:700; color:var(--char)}
.askbox select,.askbox input,.askbox textarea{width:100%; margin-top:6px; padding:13px; border:1.5px solid var(--line); border-radius:7px; font-size:1rem; font-family:inherit; background:var(--paper)}
.askbox select:focus,.askbox input:focus,.askbox textarea:focus{outline:none; border-color:var(--red); background:#fff; box-shadow:0 0 0 3px rgba(216,31,42,.12)}
.askbox textarea{min-height:120px; resize:vertical}
.ask-note{font-size:.8rem; color:var(--soft); text-align:center; margin:0}
.decoy{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* Tarifs */
.fees{border:1px solid var(--line); border-radius:11px; overflow:hidden; margin:22px 0}
.fee{display:flex; justify-content:space-between; gap:16px; padding:15px 18px; border-bottom:1px solid var(--line)}
.fee:last-child{border-bottom:0}
.fee:nth-child(odd){background:var(--paper)}
.fee-name{font-weight:600; color:var(--char)}
.fee-name small{display:block; font-weight:400; color:var(--soft); font-size:.85rem}
.fee-val{white-space:nowrap; font-weight:900; color:var(--red-d); font-size:1.05rem}

/* Page interne */
.pagetop{background:linear-gradient(160deg,var(--char),#2a2e37); color:#fff; padding:46px 0}
.pagetop .kick{margin-bottom:12px}
.pagetop h1{color:#fff; margin:0 0 .25em}
.pagetop .lede{color:#cdd0d6; max-width:770px; margin:0}
.figwide{margin:26px 0 0}
.figwide img{width:100%; max-height:340px; object-fit:cover; border-radius:11px; box-shadow:var(--sh)}
.figwide figcaption{margin-top:8px; font-size:.85rem; color:var(--soft); text-align:center; font-style:italic}
.legalx h2{font-size:1.2rem; margin-top:1.5em}
.legalx p{color:var(--soft)}
.callout{background:rgba(216,31,42,.07); border-left:3px solid var(--red); padding:14px 18px; border-radius:0 8px 8px 0; margin-top:22px}
.ilink{color:var(--red-d); font-weight:700; text-decoration:underline}
.arrowlink{color:var(--red-d); font-weight:800; text-decoration:none}
.arrowlink::after{content:" →"}

/* Bandeau CTA final */
.endzone{background:linear-gradient(160deg,#331014,var(--red-d)); color:#fff; padding:54px 0; text-align:center}
.endzone h2{color:#fff}
.endzone p{color:#f2d4d6; max-width:600px; margin:0 auto 22px}
.endzone .cta-row{justify-content:center}

/* Footer */
.footx{background:var(--char); color:#a9adb4; padding:46px 0 20px; font-size:.93rem}
.footx-cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:28px}
.footx h4{color:#fff; font-size:1rem; margin:0 0 12px}
.footx-brand{color:#fff; font-weight:800; font-size:1.1rem}
.footx nav{display:flex; flex-direction:column; gap:8px}
.footx a{color:#a9adb4; text-decoration:none}
.footx a:hover{color:#fff}
.footx-copy{text-align:center; border-top:1px solid rgba(255,255,255,.12); margin-top:28px; padding-top:16px; font-size:.82rem; color:#7c828b}

/* Numéro dévoilé (variante 3 : chiffres en pseudo-éléments CSS) */
.num-out{display:inline-flex; align-items:center; letter-spacing:.5px}
.num-out .dg::after{content:var(--d)}
.num-out .sep::after{content:" "}
.act.num-shown{gap:9px}

/* Liens sur fonds foncés */
.bighero a:not(.act), .pagetop a:not(.act), .zone-dark a:not(.act), .endzone a:not(.act){ color:var(--amber); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.bighero a:not(.act):hover, .pagetop a:not(.act):hover, .zone-dark a:not(.act):hover, .endzone a:not(.act):hover{ color:#fff; }

/* Responsive */
@media(max-width:900px){
  .bighero-in{grid-template-columns:1fr; gap:30px; padding:44px 0}
  .menu,.mast-cta,.urg-msg{display:none}
  .tiles{grid-template-columns:1fr}
  .steps-n{grid-template-columns:1fr 1fr}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .footx-cols{grid-template-columns:1fr 1fr}
  .askbox.two{grid-template-columns:1fr}
}
@media(max-width:520px){
  .steps-n,.thumbs,.footx-cols{grid-template-columns:1fr}
  .marks-2{columns:1}
}