/* AshaCooll · feuille de style du site vitrine
   Un seul thème volontaire : bleu nuit « salle de spectacle », sections papier pour les tarifs et le devis.
   Couleurs relevées dans le logo ; titres Playfair Display, texte Inter. */
:root{
  --navy:#001A3F; --navy2:#0B2A55; --line:#1F3C68; --ink:#FBF8F3; --soft:#B9C6DA; --muted:#8FA3C2;
  --yellow:#FDBB00; --orange:#FD7E00; --red:#E81400; --red-text:#C81100; --blue:#0094F8; --wa:#1FAF5A;
  --paper:#FBF8F3; --cream:#F3EFE8; --sand:#FFF1DC; --p-ink:#001A3F; --p-body:#3A4558; --p-rule:#E3DCCF; --p-muted:#5B6576;
  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --text:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme:dark;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--navy); color:var(--soft); font-family:var(--text); font-size:17px; line-height:1.65; }
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:30; background:var(--navy); }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
.wrap{ max-width:1200px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
.narrow{ max-width:820px; }
h1,h2,h3{ font-family:var(--display); color:var(--ink); margin:0; text-wrap:balance; }
h1{ font-size:clamp(38px, 5.6vw, 72px); font-weight:900; line-height:1.03; letter-spacing:-.5px; }
h2{ font-size:clamp(28px, 3.8vw, 44px); font-weight:800; line-height:1.1; }
h3{ font-size:21px; font-weight:800; line-height:1.25; }
h1 em, h2 em, h3 em{ font-style:italic; color:var(--yellow); }
p{ margin:0; max-width:70ch; }
.kicker{ font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--yellow); }
.lead{ font-family:var(--display); font-style:italic; font-size:clamp(19px, 2.2vw, 23px); line-height:1.45; color:var(--soft); }
.sec{ padding-block:64px; }
.sec + .sec{ border-top:1px solid var(--line); }
.head{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.prose{ display:flex; flex-direction:column; gap:16px; }
.prose h2{ margin-top:12px; }
.prose ul{ margin:0; padding-left:22px; } .prose li{ margin:4px 0; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; font-weight:700; font-size:15px; padding:13px 22px; text-decoration:none; white-space:nowrap; border:0; cursor:pointer; line-height:1.2; font-family:var(--text); }
.btn-y{ background:var(--yellow); color:#001A3F; }
.btn-o{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--soft); }
.btn-wa{ background:var(--wa); color:#FFFFFF; }
.btn-dark{ background:var(--navy); color:var(--ink); }
.btn svg{ width:20px; height:20px; flex:none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{ background:rgba(0,26,63,.72); border:1px solid var(--line); border-radius:999px; padding:7px 15px; font-size:14px; color:var(--ink); }

/* En-tête */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; z-index:50; background:var(--yellow); color:#001A3F; padding:8px 14px; border-radius:8px; }
header.top{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:rgba(0,26,63,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
header.top .wrap{ display:flex; align-items:center; gap:22px; padding-block:12px; position:relative; }
.logo{ background:#FBF8F3; border-radius:10px; padding:5px 9px; display:inline-flex; text-decoration:none; flex:none; }
.logo img{ width:84px; height:auto; }
nav.main{ display:flex; gap:20px; }
nav.main a{ color:var(--soft); text-decoration:none; font-weight:600; font-size:15px; padding:6px 0; border-bottom:2px solid transparent; }
nav.main a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--yellow); }
header .sp{ flex:1; }
.burger{ display:none; background:transparent; border:0; color:var(--ink); font-size:26px; line-height:1; padding:6px 8px; cursor:pointer; }

/* Ouverture */
.hero{ position:relative; overflow:hidden; }
.hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,26,63,.96) 0%, rgba(0,26,63,.8) 48%, rgba(0,26,63,.15) 100%); }
.hero .wrap{ position:relative; z-index:1; padding-block:92px 84px; display:flex; flex-direction:column; gap:22px; }
.hero h1{ max-width:15ch; }
.hero .lead{ max-width:46ch; }
.wave{ width:100%; max-width:520px; height:auto; }
.crumbs{ font-size:13px; color:var(--muted); }
.crumbs a{ color:var(--soft); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.page-hero{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:center; padding-block:48px 56px; }
.page-hero .txt{ display:flex; flex-direction:column; gap:18px; }
.page-hero .pic{ position:relative; }
.page-hero .pic::before{ content:""; position:absolute; left:28px; top:28px; right:-14px; bottom:-14px; background:var(--yellow); border-radius:8px; }
.page-hero .pic img{ position:relative; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; transform:rotate(-1.2deg); }
.from{ font-family:var(--display); font-style:italic; font-weight:800; font-size:24px; color:var(--yellow); }

/* Cartes */
.cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.card{ background:var(--navy2); border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; min-width:0; transition:transform .2s ease; }
a.card:hover{ transform:translateY(-3px); }
.card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.card .body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:6px; }
.card p{ font-size:15px; }
.card .num{ font-family:var(--display); font-style:italic; font-weight:900; font-size:38px; line-height:1; color:var(--red); }
.why{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.why div{ border-top:4px solid var(--yellow); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.why div:nth-child(2){ border-top-color:var(--orange); }
.why div:nth-child(3){ border-top-color:var(--red); }
.strip{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.strip img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; }
.band{ background:var(--navy2); border-left:6px solid var(--yellow); border-radius:0 12px 12px 0; padding:26px 28px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.steps div{ display:flex; flex-direction:column; gap:6px; }
.steps .n{ font-family:var(--display); font-style:italic; font-weight:900; font-size:48px; line-height:1; color:var(--red); }

/* Sections papier */
.paper{ background:var(--paper); color:var(--p-body); }
.paper h1, .paper h2, .paper h3{ color:var(--p-ink); }
.paper h1 em, .paper h2 em, .paper h3 em{ color:var(--red); }
.paper .kicker{ color:var(--red-text); }
.paper .lead{ color:var(--p-body); }
.paper .btn-o{ color:var(--p-ink); box-shadow:inset 0 0 0 2px var(--p-ink); }
.paper .from{ color:var(--red-text); }
.paper .crumbs, .paper .crumbs a{ color:var(--p-muted); }
.paper .sec + .sec, .paper.sec + .sec{ border-top-color:var(--p-rule); }
.tbl{ overflow-x:auto; border-radius:8px; }
table{ width:100%; border-collapse:collapse; font-size:15px; min-width:560px; color:var(--p-body); font-family:var(--text); }
caption{ text-align:left; font-weight:700; color:var(--p-ink); padding:0 0 10px; font-size:16px; }
th{ text-align:left; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--paper); background:var(--p-ink); padding:10px 14px; }
td{ padding:11px 14px; border-bottom:1px solid var(--p-rule); vertical-align:top; }
tbody tr:nth-child(odd){ background:var(--cream); }
td.n{ color:var(--p-ink); font-weight:600; }
td.pr, th.pr{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
td.pr{ color:var(--p-ink); font-weight:600; }
td a{ color:var(--p-ink); }
.notes{ display:flex; flex-direction:column; gap:6px; font-size:15px; }
.notes b{ color:var(--p-ink); }
.box{ background:var(--sand); border-left:6px solid var(--red); border-radius:0 10px 10px 0; padding:20px 22px; color:var(--p-body); }
.box h3{ color:var(--p-ink); margin-bottom:6px; }
.box ul{ margin:6px 0 0; padding-left:20px; }

/* Questions fréquentes */
.faq{ display:flex; flex-direction:column; gap:10px; }
.faq details{ border:1px solid var(--line); border-radius:10px; background:var(--navy2); }
.faq summary{ cursor:pointer; padding:15px 18px; font-weight:700; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--yellow); font-size:22px; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details > div{ padding:0 18px 16px; }
.paper .faq details{ background:#FFFFFF; border-color:var(--p-rule); }
.paper .faq summary{ color:var(--p-ink); }
.paper .faq summary::after{ color:var(--red-text); }

/* Réalisations */
.gallery{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.gallery button{ border:0; padding:0; background:transparent; cursor:zoom-in; border-radius:8px; overflow:hidden; position:relative; display:block; text-align:left; }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .3s ease; }
.gallery button:hover img{ transform:scale(1.04); }
.gallery span{ position:absolute; left:0; right:0; bottom:0; padding:8px 10px; font-size:12px; font-weight:600; color:#FBF8F3; background:linear-gradient(0deg, rgba(0,12,34,.88), rgba(0,12,34,0)); }
.lightbox{ position:fixed; inset:0; z-index:60; background:rgba(0,8,22,.95); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lightbox img{ max-width:min(1100px, 100%); max-height:78vh; width:auto; border-radius:8px; object-fit:contain; }
.lightbox p{ color:var(--ink); text-align:center; }
.videos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.yt{ position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:var(--navy2); border:0; padding:0; cursor:pointer; display:block; width:100%; }
.yt img{ width:100%; height:100%; object-fit:cover; }
.yt .play{ position:absolute; inset:0; margin:auto; width:68px; height:48px; border-radius:12px; background:var(--red); display:flex; align-items:center; justify-content:center; }
.yt .play::after{ content:""; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #FFFFFF; margin-left:4px; }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-empty{ border:1.5px dashed var(--muted); border-radius:10px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; text-align:center; padding:18px; color:var(--muted); font-size:14px; }

/* Devis */
.steps-bar{ display:flex; gap:8px; margin-block:22px; flex-wrap:wrap; }
.steps-bar span{ flex:1; min-width:120px; font-size:13px; font-weight:700; color:var(--p-muted); border-top:4px solid var(--p-rule); padding-top:8px; }
.steps-bar span.on{ color:var(--p-ink); border-top-color:var(--red); }
.steps-bar span.done{ color:var(--p-ink); border-top-color:var(--p-ink); }
form.devis{ max-width:780px; display:flex; flex-direction:column; gap:18px; }
form.devis fieldset{ border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
form.devis legend{ font-family:var(--display); font-weight:800; font-size:22px; color:var(--p-ink); margin-bottom:6px; }
label{ font-size:14px; font-weight:700; color:var(--p-ink); display:block; margin-bottom:6px; }
input[type=text], input[type=tel], input[type=email], input[type=date], select, textarea{ width:100%; font:inherit; font-size:16px; padding:12px 14px; border-radius:10px; border:1.5px solid #CFC6B6; background:#FFFFFF; color:#001A3F; }
textarea{ min-height:100px; resize:vertical; }
.two{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.checks{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.check{ display:flex; gap:10px; align-items:flex-start; background:#FFFFFF; border:1.5px solid #CFC6B6; border-radius:10px; padding:12px 14px; cursor:pointer; font-weight:500; margin:0; font-size:15px; }
.check input{ width:18px; height:18px; margin-top:3px; accent-color:#C81100; flex:none; }
.err{ color:var(--red-text); font-size:13px; font-weight:600; margin-top:6px; }
.hint{ font-size:13px; color:var(--p-muted); }
.nav-steps{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.summary{ background:#FFFFFF; border:1.5px solid #CFC6B6; border-radius:10px; padding:16px; white-space:pre-wrap; font-family:var(--mono); font-size:14px; color:var(--p-ink); overflow-wrap:anywhere; }

/* Contact, pied, bouton WhatsApp */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; }
.split img{ width:100%; border-radius:12px; aspect-ratio:4/5; object-fit:cover; }
.contact-list{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.contact-list div{ display:flex; flex-direction:column; gap:4px; }
.contact-list b{ color:var(--ink); font-size:17px; }
.label{ font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--yellow); }
.small{ font-size:14px; color:var(--muted); }
footer{ background:#000C22; color:var(--muted); font-size:14px; padding-bottom:84px; }
footer .wrap{ padding-block:40px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:24px; }
footer b{ color:var(--ink); display:block; margin-bottom:8px; }
footer a{ display:block; text-decoration:none; color:var(--muted); padding:3px 0; }
footer a:hover{ color:var(--ink); }
footer .legal{ grid-column:1 / -1; border-top:1px solid var(--line); padding-top:18px; font-size:13px; }
.wa-float{ position:fixed; right:max(18px, env(safe-area-inset-right, 0px)); bottom:max(18px, env(safe-area-inset-bottom, 0px)); z-index:40; display:inline-flex; align-items:center; gap:10px; background:var(--wa); color:#FFFFFF; text-decoration:none; font-weight:700; font-size:15px; padding:13px 18px; border-radius:999px; box-shadow:0 10px 30px rgba(0,8,22,.45); }
.wa-float svg{ width:24px; height:24px; }

@media (max-width: 980px){
  nav.main{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--navy); border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
  nav.main.open{ display:flex; }
  nav.main a{ padding:12px 0; border-bottom:1px solid var(--line); }
  .burger{ display:block; }
  .top .hide-s{ display:none; }
  .cards, .why, .videos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gallery{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .steps, .contact-list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  footer .wrap{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 720px){
  .cards, .why, .two, .checks, .split, .page-hero, .videos{ grid-template-columns:1fr; }
  .strip, .gallery{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hero .wrap{ padding-block:60px 56px; }
  .sec{ padding-block:48px; }
  .page-hero{ padding-block:32px 40px; }
  .page-hero .pic::before{ left:16px; top:16px; right:-8px; bottom:-8px; }
  .wa-float span{ display:none; }
  .wa-float{ padding:14px; }
}
@media (max-width: 460px){ .steps, .contact-list, footer .wrap{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ a.card, .gallery img{ transition:none; } }