/* Conciergerie 35 — Static HTML5/CSS3 site (no PHP) */
:root{
  --primary:#0b5ed7;
  --primary-2:#084298;
  --link:var(--primary-2);
  --link-hover:var(--primary);
  /* Aliases used by some components */
  --brand:var(--primary);
  --soft:rgba(11,94,215,.10);
  --dark:#0b1f3b;
  --text:#0f172a;
  --muted:#2f3e55;
  --muted-2:#475569;
  --bg:#ffffff;
  --bg-soft:#f5f7ff;
  --card:#ffffff;
  --border:rgba(15,23,42,.14);
  --shadow:0 12px 34px rgba(11,31,59,.16);
  --radius:16px;
  --container:1160px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
  --space-7:72px;
  --shadow-soft:0 8px 22px rgba(11,31,59,.10);
  --shadow-strong:0 18px 48px rgba(11,31,59,.18);

}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#07101f;
    --bg-soft:#0b1730;
    --card:#0b1730;
    --text:#e7eefc;
    --muted:#cbd5e1;
    --muted-2:#a8b3c7;
    --link:#8bb7ff;
    --link-hover:#b6d0ff;
    --brand:var(--primary);
    --soft:rgba(139,183,255,.10);
    --border:rgba(231,238,252,.14);
    --shadow:0 12px 34px rgba(0,0,0,.40);
    --shadow-soft:0 8px 22px rgba(0,0,0,.28);
    --shadow-strong:0 18px 48px rgba(0,0,0,.50);
  }
  body{ background:var(--bg); color:var(--text); }
.section.soft{ background:var(--bg-soft); }
  .card{ box-shadow:0 6px 18px rgba(0,0,0,.28); }

  /* Dark mode: readability fixes */
  .nav.mobile{ background:var(--card); }
  .table tbody tr:nth-child(odd){ background:rgba(255,255,255,.03); }
  .table tbody tr:hover{ background:rgba(11,94,215,.12); }
  .table th{ background:rgba(11,94,215,.14); }
  .table-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); }
  .table-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,.10); }

  /* Dark mode: header/menu contrast */
  .header{
    background:rgba(7,16,31,.92);
    backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid var(--border);
  }
  .brand{ color:var(--text); }
  .brand .tag{ color:var(--muted-2); }
  .nav a{ color:var(--text); }
  .nav a:not(.btn):hover{
    background:rgba(11,94,215,.22);
    color:var(--text);
  }
  .nav.mobile a:not(.btn):hover{
    background:rgba(11,94,215,.24);
    color:var(--text);
  }
  .burger{ box-shadow:var(--shadow-soft); }

}

*{
  box-sizing:border-box;
}html{
  scroll-behavior:smooth;
}
body{
  overflow-x:hidden;
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-size:16.8px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}img{
  max-width:100%;
  height:auto;
  display:block;
}a{
  color:var(--link);
  text-decoration:none;
}
a:hover{
  color:var(--link-hover);
}p{
  margin:0 0 1rem;
}h1,h2,h3{
  margin:0 0 .75rem;
  line-height:1.15;
}h2{
  font-size:clamp(1.5rem, 2.5vw, 1.95rem);
}h3{
  font-size:1.22rem;
}small{
  color:var(--muted-2);
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(16px, 3vw, 28px);
}

.section{
  padding:clamp(48px, 6.6vw, 80px) 0;
}

/* Intro sections (pages without photo hero) */
.section--intro{
  padding-top:clamp(64px, 8vw, 108px);
  padding-bottom:clamp(34px, 5.6vw, 74px);
  position:relative;
  overflow:hidden;
}
.section--intro::before{
  content:"";
  position:absolute;
  inset:-140px -120px auto -120px;
  height:320px;
  background:radial-gradient(closest-side, rgba(11,94,215,.14), transparent 70%);
  pointer-events:none;
}
.section--intro::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
  pointer-events:none;
}
.section--intro .container{position:relative;}
.section--intro .lead{max-width:68ch;}

/* Headings rhythm */
.kicker + h1,
.kicker + h2{margin-top:8px;}
h1 + .lead,
h2 + .lead{margin-top:10px;}

.section.soft{
  background:var(--bg-soft);
}

.section.tight{
  padding:clamp(36px, 5vw, 56px) 0;
}

.kicker{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .65rem;
  background:rgba(11,94,215,.10);
  color:var(--primary);
  border:1px solid rgba(11,94,215,.20);
  border-radius:999px;
  font-weight:700;
  font-size:.85rem;
}

.grid{
  display:grid;
  gap:clamp(14px, 2.2vw, 20px);
}

/* Prevent horizontal scroll on small devices */
main{overflow-x:hidden;}

.grid.cols-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Services: alignement des cartes turnover (hauteurs homogènes par ligne) */
.turnover-grid .card{
  height:100%;
  display:flex;
  flex-direction:column;
}

.grid.cols-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

@media (max-width:920px){
.grid.cols-3{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:720px){
.grid.cols-2,.grid.cols-3{
  grid-template-columns:1fr;
}
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:44px;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:800;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
  white-space:nowrap;
  -webkit-tap-highlight-color: transparent;
  background:var(--primary);
  color:#fff;
  box-shadow:var(--shadow-soft);
}

.btn:hover{
  background:var(--primary-2);
  transform:translateY(-1px);
  color:#fff;
  text-decoration:none;
}

/* Empêche les règles globales a:hover de rendre le texte des boutons illisible */
a.btn:hover,
a.btn:focus-visible,
.btn:hover,
.btn:focus-visible{
  color:#fff;
}

.btn:active{
  transform:translateY(1px);
}

.btn:focus-visible{
  outline:3px solid rgba(11,94,215,.35);
  outline-offset:2px;
}

/* Compat classes: tous les boutons restent bleus + texte blanc */
.btn.primary,
.btn.ghost,
.btn.light,
.btn.dark{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
}

.btn.primary:hover,
.btn.ghost:hover,
.btn.light:hover,
.btn.dark:hover{
  background:var(--primary-2);
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}

.header .row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
}

@media (max-width:520px){
  .header .row{ padding:8px 0; }
}

/* ===== Header / Branding — VF1.6 (compact & harmonisé) ===== */
.brand{
  color:var(--text);
  display:flex;
  align-items:center;
  gap:clamp(16px, 3vw, 26px);
  flex:1 1 auto;
  min-width:0;
}

.header .brand img{
  height:66px;
  width:auto;
  max-width:320px;
  object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(11,31,59,.14));
}

.footer .brand{
  gap:16px;
}

.footer .brand img{
  height:78px;
  width:auto;
  max-width:min(520px, 72vw);
  object-fit:contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
}

.brand .name{
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.05;
}

.brand .tag{
  color:var(--muted);
  font-weight:650;
  font-size:.92rem;
  margin-top:4px;
  line-height:1.25;
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media (max-width:980px){
  .brand{gap:18px;}
  .header .brand img{height:60px; max-width:300px;}
}

@media (max-width:720px){
  .header .brand img{height:54px;}
  .footer .brand img{height:72px;}
}

@media (max-width:520px){
  .brand{gap:14px;}
  .header .brand img{height:48px;}
  .brand .name{font-size:1.02rem;}
  .brand .tag{font-size:.82rem;}
}

@media (max-width:420px){
  .brand{gap:12px;}
  .header .brand img{height:44px;}
}

@media (max-width:360px){
  .header .brand img{height:42px; max-width:240px;}
}

.brand img{
  display:block;
}

.nav{
  display:flex;
  gap:18px;
  align-items:center;
}

.nav a{
  padding:10px 10px;
  border-radius:10px;
  color:var(--text);
  font-weight:750;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}

.nav a:not(.btn):hover{
  background:rgba(11,94,215,.08);
  color:var(--primary);
}

.burger{
  display:none;
  width:44px;
  height:44px;
  border:1px solid transparent;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  box-shadow:var(--shadow-soft);
}

.burger:hover{
  background:var(--primary-2);
}

.burger:focus-visible{
  outline:3px solid rgba(11,94,215,.35);
  outline-offset:2px;
}

.burger svg{
  margin:auto;
  display:block;
}

@media (max-width:980px){
.nav{
  display:none;
}
.burger{
  display:flex;
}
.nav.mobile{
  display:flex;
  position:absolute;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  max-height: calc(100vh - 120px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  left:0;
  right:0;
  top:calc(100% + 10px);
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  flex-direction:column;
  align-items:stretch;
  box-shadow:var(--shadow-soft);
}
.nav.mobile a{
  padding:12px;
}
.nav.mobile.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
}

/* Hero */
.hero{
  position:relative;
  background:#061222 url("../img/saintmalo-1920.jpg") center 55%/cover no-repeat;
  background-image:image-set(
    url("../img/saintmalo-1920.avif") type("image/avif"),
    url("../img/saintmalo-1920.webp") type("image/webp"),
    url("../img/saintmalo-1920.jpg") type("image/jpeg")
  );
  min-height:62vh;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
}
@media (max-width:1120px){
  .hero{
    background:#061222 url("../img/saintmalo-1280.jpg") center 55%/cover no-repeat;
    background-image:image-set(
      url("../img/saintmalo-1280.avif") type("image/avif"),
      url("../img/saintmalo-1280.webp") type("image/webp"),
      url("../img/saintmalo-1280.jpg") type("image/jpeg")
    );
  }
}
@media (max-width:720px){
  .hero{
    background:#061222 url("../img/saintmalo-768.jpg") center 52%/cover no-repeat;
    background-image:image-set(
      url("../img/saintmalo-768.avif") type("image/avif"),
      url("../img/saintmalo-768.webp") type("image/webp"),
      url("../img/saintmalo-768.jpg") type("image/jpeg")
    );
  }
}
@media (max-width:420px){
  .hero{
    background:#061222 url("../img/saintmalo-480.jpg") center 50%/cover no-repeat;
    background-image:image-set(
      url("../img/saintmalo-480.avif") type("image/avif"),
      url("../img/saintmalo-480.webp") type("image/webp"),
      url("../img/saintmalo-480.jpg") type("image/jpeg")
    );
  }
}

/* Hero variant (Services) */
.hero.hero--services{
  background:#061222 url("../img/services-hero-1920.jpg") center 55%/cover no-repeat;
  background-image:image-set(
    url("../img/services-hero-1920.avif") type("image/avif"),
    url("../img/services-hero-1920.webp") type("image/webp"),
    url("../img/services-hero-1920.jpg") type("image/jpeg")
  );
}
@media (max-width:1120px){
  .hero.hero--services{
    background:#061222 url("../img/services-hero-1280.jpg") center 55%/cover no-repeat;
    background-image:image-set(
      url("../img/services-hero-1280.avif") type("image/avif"),
      url("../img/services-hero-1280.webp") type("image/webp"),
      url("../img/services-hero-1280.jpg") type("image/jpeg")
    );
  }
}
@media (max-width:720px){
  .hero.hero--services{
    background:#061222 url("../img/services-hero-768.jpg") center 52%/cover no-repeat;
    background-image:image-set(
      url("../img/services-hero-768.avif") type("image/avif"),
      url("../img/services-hero-768.webp") type("image/webp"),
      url("../img/services-hero-768.jpg") type("image/jpeg")
    );
  }
}
@media (max-width:420px){
  .hero.hero--services{
    background:#061222 url("../img/services-hero-480.jpg") center 50%/cover no-repeat;
    background-image:image-set(
      url("../img/services-hero-480.avif") type("image/avif"),
      url("../img/services-hero-480.webp") type("image/webp"),
      url("../img/services-hero-480.jpg") type("image/jpeg")
    );
  }
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 28% 18%, rgba(11,94,215,.18), rgba(6,18,34,.78)),
    linear-gradient(180deg, rgba(6,18,34,.68) 0%, rgba(6,18,34,.44) 46%, rgba(6,18,34,.60) 100%);
  z-index:0;
  pointer-events:none;
}

.hero .content{
  position:relative;
  z-index:1;
  padding:62px 0;
}

.hero .hero-frame{
  max-width: 980px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(6,18,34,.46);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 34px 80px rgba(0,0,0,.40);
}

@media (max-width:520px){
.hero .hero-frame{
  padding: 14px;
}
}

.hero .hero-panel{
  display:inline-block;
  max-width: 800px;
  padding: 18px 18px;
  background: rgba(6,18,34,.52);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  box-shadow: 0 24px 52px rgba(0,0,0,.35);
}

.hero .kicker{
  display:inline-block;
  font-size:.95rem;
  font-weight:850;
  letter-spacing:.2px;
  padding:8px 12px;
  border-radius:999px;
  color:#fff;
  background: linear-gradient(90deg, rgba(11,94,215,.92), rgba(7,43,110,.88));
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.hero p{
  line-height: 1.65;
  margin-top: 12px;
}

.hero .actions{
  margin-top: 16px;
}

/* Contact: aligner les boutons d’action */
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
@media (max-width:560px){
  .contact-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .contact-actions .btn{
    width:100%;
  }
}

@media (max-width: 520px){
.hero .hero-panel{
  padding: 14px 14px;
}
}

.hero h1{
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  letter-spacing:.2px;
  text-shadow:0 10px 32px rgba(0,0,0,.35);
}

.hero p{
  max-width: 62ch;
  font-size:1.12rem;
  opacity:.98;
  text-shadow:0 8px 26px rgba(0,0,0,.25);
}

@media (max-width:520px){
  .hero h1{ font-size:clamp(1.85rem, 7.2vw, 2.45rem); }
  .hero p{ font-size:1.02rem; }
  .hero .content{ padding:46px 0; }
}

.hero .actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}

.hero .stats{
  margin-top:30px;
  display:grid;
  gap:12px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.hero .stats{
  padding:14px;
  background:rgba(6,18,34,.38);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  backdrop-filter: blur(10px) saturate(1.15);
}

.hero .stat{
  background:rgba(6,18,34,.72);
  border:1px solid rgba(255,255,255,.20);
  border-radius:16px;
  padding:14px 16px;
}

.hero .stat strong{
  display:block;
  font-size:1.06rem;
  letter-spacing:.1px;
}

.hero .stat span{
  display:block;
  opacity:.96;
  font-weight:600;
  font-size:.95rem;
  line-height:1.35;
}

@media (max-width:900px){
.hero{
  min-height:auto;
}
.hero .stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow: 0 6px 18px rgba(11,31,59,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}

@media (max-width:520px){
  .card{ padding:14px; border-radius:14px; }
}

/* Lists inside cards (packs, zones, etc.) */
.card ul{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:10px;
}
.card ul li{
  position:relative;
  padding-left:28px;
  line-height:1.55;
}
.card ul li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:.1em;
  width:20px;
  height:20px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:12px;
  color:#fff;
  background:var(--brand);
  box-shadow:0 8px 20px rgba(11,94,215,.22);
}


/* Card media (photos dans les cartes) */
.card-media{
  margin:-16px -16px 14px;
  border-radius: calc(var(--radius) - 2px);
  overflow:hidden;
  aspect-ratio: 3/2;
  background: rgba(11,31,59,.06);
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .35s ease;
}
.card.hover:hover .card-media img{ transform: scale(1.03); }
@media (prefers-reduced-motion: reduce){
  .card-media img{ transition:none; }
  .card.hover:hover .card-media img{ transform:none; }
}
@media (max-width:520px){
  .card-media{ margin:-14px -14px 12px; border-radius: 12px; }
}

.card.hover:hover{
  box-shadow:var(--shadow-soft);
  transform:translateY(-2px);
  transition:.2s ease;
}

.card h3{
  font-size:1.1rem;
}

.card .meta{
  color:var(--muted-2);
  font-weight:650;
  font-size:.98rem;
}

.icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(11,94,215,.10);
  border:1px solid rgba(11,94,215,.18);
  margin-bottom:10px;
}

.icon svg{
  width:22px;
  height:22px;
  fill:var(--primary-2);
}

.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:clamp(16px, 3vw, 26px);
  align-items:center;
}

@media(max-width:900px){
.split{
  grid-template-columns:1fr;
}
}

.split--gallery{
  align-items:start;
}

@media(min-width:980px){
  /* Home: galerie plus équilibrée (images + texte) */
  .split--gallery-home{
    grid-template-columns:.95fr 1.05fr;
  }
  }

/* Illustrations (sans photos) */
.media-illus{
display:flex;
align-items:center;
justify-content:center;
border-radius:18px;
border:1px solid var(--border);
background:linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));
min-height:260px;
padding:24px;
}

@media (max-width:520px){
  .media-illus{ min-height:180px; padding:16px; border-radius:16px; }
}
.illus-card{
text-align:center;
max-width:360px;
}
.illus-icon{
width:74px;
height:74px;
border-radius:22px;
margin:0 auto 14px;
display:grid;
place-items:center;
background:var(--soft);
color:var(--primary);
}
.illus-icon svg{
width:40px;
height:40px;
fill:currentColor;
}

/* Checklist (used in illustrations / side cards) */
.checklist{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:10px;
}
.checklist li{
  position:relative;
  padding-left:28px;
  line-height:1.5;
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:.1em;
  width:20px;
  height:20px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:12px;
  color:#fff;
  background:var(--brand);
  box-shadow:0 8px 20px rgba(11,94,215,.22);
}

.illus-note{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.95rem;
}

.illus-kicker{
margin:0;
font-weight:900;
letter-spacing:.2px;
color:var(--text);
}

/* Zone d’intervention (illustration SVG) */
.zone-illus{
padding:16px;
border-radius:18px;
border:1px solid var(--border);
background:linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));
}
.zone-illus__svg{
width:100%;
height:auto;
display:block;
color:var(--primary);
}

.media{
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  background:#000;
}

@media (max-width:520px){
  .media{ border-radius:16px; }
}

.media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  background:var(--card);
}

.contact-bar{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:#061224;
  border-color:rgba(255,255,255,.14);
}

.contact-bar.mapbg::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 280px at 20% 40%, rgba(11,94,215,.26), transparent 60%),radial-gradient(520px 240px at 80% 20%, rgba(11,94,215,.18), transparent 55%),repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 10px);opacity:.28;filter:none;}

.contact-bar.mapbg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(900px 420px at 8% 0%, rgba(11,94,215,.35), rgba(6,18,34,.86) 58%, rgba(6,18,34,.93) 100%);
}

.contact-bar__inner{
  position:relative;
  z-index:1;
  background:rgba(6,18,34,.58);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:12px;
  backdrop-filter:blur(7px);
}

.contact-bar__items{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 12px;
}

.contact-bar__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.96);
  text-decoration:none;
  line-height:1.25;
  font-weight:720;
  min-width:0;
}

.contact-bar__item:hover{
  background:rgba(255,255,255,.12);
}

.contact-bar__item span{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.contact-bar__item .ico{
  flex:0 0 auto;
  width:1.55em;
  height:1.55em;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(11,94,215,.22);
  border:1px solid rgba(255,255,255,.16);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.form{
  display:grid;
  gap:12px;
}

.field{
  display:grid;
  gap:6px;
}

.field-label{
  font-weight:700;
  color:var(--text);
  font-size:.95rem;
}

.help{
  margin:0;
  color:var(--muted);
  font-weight:560;
  font-size:.95rem;
  line-height:1.55;
}

.checks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
  margin-top:6px;
}

@media(max-width:720px){
  .checks{grid-template-columns:1fr;}
}

.check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
}

.check input{
  margin-top:3px;
}

.check span{
  line-height:1.35;
}

.input{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  font:inherit;
  background:var(--card);
  color:var(--text);
  caret-color:var(--text);
}
.input::placeholder{
  color:var(--muted-2);
}
.input:focus-visible{
  outline:3px solid rgba(11,94,215,.28);
  outline-offset:2px;
}textarea.input{
  min-height:120px;
  resize:vertical;
}

.note{
  color:var(--text);
  font-weight:560;
  font-size:1rem;
  line-height:1.75;
}

.footer{
  background:var(--dark);
  color:rgba(255,255,255,.92);
  padding:clamp(28px, 5vw, 44px) 0;
  font-size:1rem;
  line-height:1.75;
}

.footer a{
  color:#fff;
  opacity:1;
  text-decoration:none;
}

.footer a:hover{
  text-decoration:underline;
}

.footer a:hover{
  opacity:1;
}

.footer .cols{
  display:grid;
  gap:clamp(16px, 3vw, 26px);
  grid-template-columns:1.2fr .8fr .8fr;
}

@media(max-width:820px){
.footer .cols{
  grid-template-columns:1fr;
}
}

.footer .links{
  display:grid;
  gap:12px;
}

.footer .links a,
.footer .links span{
  line-height:1.7;
}

.footer .mini{
  margin-top:20px;
  opacity:.84;
  font-size:.98rem;
  line-height:1.6;
}

/* Footer lisibilité (v6) */
.footer{
  background: linear-gradient(180deg, rgba(6,18,34,1) 0%, rgba(6,18,34,.96) 100%);
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer p{
  opacity:1 !important;
  color:rgba(255,255,255,.92);
}

.footer .tag{
  color:rgba(255,255,255,.92) !important;
}

.footer .links a, .footer .links span{
  font-size:1.02rem;
  letter-spacing:.1px;
}
@supports not (gap: 1rem){
  .footer .links a, .footer .links span{
    display:inline-block;
    margin-right:14px;
    margin-bottom:8px;
  }
  .footer .links a:last-child{
    margin-right:0;
  }
}
.footer a{
  opacity:1;
  color:rgba(255,255,255,.95);
}

.footer a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.footer h3{
  color:#fff;
  font-weight:760;
  letter-spacing:.2px;
}

.footer .mini{
  opacity:.9;
}

/* Accordion */
.accordion{
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:var(--card);
}

.acc-item + .acc-item{
  border-top:1px solid var(--border);
}

.acc-btn{
  width:100%;
  background:var(--primary);
  border:0;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-weight:900;
  font-size:1.02rem;
  line-height:1.35;
  color:#fff;
  cursor:pointer;
  text-align:left;
}

.acc-btn:hover{
  background:var(--primary-2);
}

.acc-btn:focus-visible{
  outline:3px solid rgba(11,94,215,.35);
  outline-offset:2px;
}

.acc-btn span{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}

.acc-btn span{
  white-space:normal;
}

.acc-panel{
  display:none;
  padding:0 18px 18px 18px;
  color:var(--text);
  font-weight:560;
  font-size:1.02rem;
  line-height:1.75;
}

.acc-item.open .acc-panel{
  display:block;
}

.chev{
  transition:.2s ease;
  flex:0 0 auto;
}

.acc-item.open .chev{
  transform:rotate(180deg);
}

/* Accessibilité: focus clavier */
:focus-visible{
  outline:3px solid rgba(11,94,215,.45);
  outline-offset:3px;
}

/* Micro‑animations (légères, accessibles) */
@media (prefers-reduced-motion: no-preference){
  /* Reveal on scroll (JS ajoute .reveal + .is-visible) */
  .reveal{
    opacity:0;
    transform:translateY(10px);
    transition:opacity .45s ease, transform .45s ease;
    will-change:opacity, transform;
  }
  .reveal.is-visible{
    opacity:1;
    transform:none;
  }
  .reveal.delay-1{ transition-delay:.06s; }
  .reveal.delay-2{ transition-delay:.12s; }
  .reveal.delay-3{ transition-delay:.18s; }

  /* Ouverture accordéon : micro animation (sans jank) */
  @keyframes accIn{
    from{ opacity:0; transform:translateY(-6px); }
    to{ opacity:1; transform:none; }
  }
  .acc-item.open .acc-panel{
    animation:accIn .22s ease both;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover:hover){
  /* Hover cards (subtil) */
  .card,
  .price-card,
  .stat{
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card:hover,
  .price-card:hover,
  .stat:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-strong);
    border-color:rgba(11,94,215,.22);
  }

  /* Hover médias */
  .media-link{
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .media-link img{
    transition:transform .35s ease;
  }
  .media-link:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-strong);
    border-color:rgba(11,94,215,.22);
  }
  .media-link:hover img{
    transform:scale(1.03);
  }
  .media-caption{
    transition:transform .22s ease, background-color .22s ease;
  }
  .media-link:hover .media-caption{
    transform:translateY(-2px);
    background:rgba(0,0,0,.55);
  }

  /* Soulignement animé (liens du menu principal uniquement) */
  .nav > a{
    position:relative;
  }
  .nav > a::after{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:6px;
    height:2px;
    border-radius:2px;
    background:var(--primary);
    opacity:.85;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .18s ease;
  }
  .nav > a:hover::after,
  .nav > a[aria-current="page"]::after{
    transform:scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
}

@media (max-width:420px){
body{
  font-size:16px;
}
.hero .stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:var(--card);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  z-index:100;
  box-shadow:var(--shadow-soft);
}

.skip-link:focus{
  left:12px;
}

/* Mobile bottom bar */
/* Footer readability tweaks */

.footer .mini{
  opacity:.92;
  margin-top:24px;
  font-size:.95rem;
  line-height:1.6;
}

.footer .links{
  opacity:1 !important;
}

/* ===== Ajustements header & logos ===== */
/* 1) Logos more visible + spacing from brand text */
.header .row{
  padding:10px 0;
}

/* 3) Hero kicker 'Qualité 5★' more visible */
/* Footer meta (v13) */
.footer-meta{
  margin-top:4px;
}

.footer-meta .meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
}

.footer-meta .meta-item{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}

.footer-meta .meta-item a{
  color:rgba(255,255,255,.96);
  text-decoration:none;
}

.footer-meta .meta-item a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.footer-meta .fi{
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin-right:10px;
  opacity:.95;
}

.footer-meta .meta-legal{
  margin-top:10px;
  font-size:.95rem;
  opacity:.9;
  line-height:1.55;
}

@media (max-width:520px){
.footer-meta .meta-row{
  gap:8px 10px;
}
.footer-meta .meta-item{
  padding:6px 10px;
}
}

.footer .mini-meta{
  margin-top:8px;
  font-size:.92rem;
  opacity:.88;
  line-height:1.5;
}

/* v16 — Kickers premium (sections + hero) */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:10px 14px;
  border-radius:999px;
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:.25px;
  color:#fff;
  background: linear-gradient(90deg, rgba(11,94,215,.98), rgba(7,43,110,.92));
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.section .kicker{
  margin-bottom:12px;
}

@media (max-width: 520px){
.kicker{
  font-size:.96rem;
  padding:9px 12px;
}
}

/* v16 SEO+Conversion — Sticky CTA bar (mobile) */
.sticky-cta{
  display:none;
}

@media (max-width:720px){
body{
  padding-bottom:calc(92px + env(safe-area-inset-bottom));
}
.sticky-cta{
  display:flex;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:80;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
  background: linear-gradient(180deg, rgba(8,16,30,.12), rgba(8,16,30,.72));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top:1px solid rgba(255,255,255,.12);
}
.sticky-cta .btn{
  flex:1 1 0;
  justify-content:center;
  min-height:46px;
  font-weight:900;
  letter-spacing:.2px;
}
.sticky-cta .btn.primary{
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
}

/* Pixel-perfect responsive pass */
*[id]{
  scroll-margin-top:86px;
}

@media (max-width:720px){
*[id]{
  scroll-margin-top:78px;
}
.section{
  padding:50px 0;
}
.section.tight{
  padding:36px 0;
}
.container{
  padding:0 16px;
}
.hero .content{
  padding:50px 0;
}
.hero p{
  font-size:1.06rem;
}
.hero .actions{
  flex-direction:column;
}
.hero .actions .btn{
  width:100%;
}
.stats{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.hero .stats{
  padding:12px;
}
}

@media (max-width:520px){
.section{
  padding:42px 0;
}
.hero .content{
  padding:42px 0;
}
.hero h1{
  font-size: clamp(2.0rem, 7.2vw, 2.55rem);
}
.nav.mobile{
  left:0;
  right:0;
}
.table-scroll{
  border-radius:14px;
}
}

@media (max-width:420px){
.container{
  padding:0 14px;
}
.stats{
  grid-template-columns:1fr;
}
.hero .stat{
  padding:12px 14px;
}
}

.table-scroll{
  display:block;
  -webkit-overflow-scrolling: touch;
}

.form .btn{
  width:100%;
}

@media (max-width:520px){
h1{
  font-size: clamp(1.75rem, 7vw, 2.1rem);
}
}

/* v27 — photos services (n'affecte pas les autres sections) */
.image-card{
  padding:0;
  overflow:hidden;
}

.image-card .body{
  padding:16px 18px 18px;
}

.image-card .media{
  border-radius:0;
  border:0;
  box-shadow:none;
  background:#000;
}

.image-card .media{
  aspect-ratio: 3 / 2;
  overflow:hidden;
}

.image-card .media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: var(--img-pos, 50% 50%);
}

.image-card .media picture{
  display:block;
  width:100%;
  height:100%;
}

/* Photo grids */
.photo-grid{
  gap:18px;
}

.photo-grid .card{
  height:100%;
}

/* v32 — Responsive hardening (smartphone / tablette)
   Objectif: zéro débordement horizontal, meilleure lisibilité, aucune régression desktop.
*/
/* Header: la marque doit pouvoir se réduire sans pousser le burger hors écran */
.brand > div{
  min-width:0;
}

/* Menu mobile: liens multi-lignes si besoin */
@media (max-width: 980px){
.nav.mobile a{
  white-space:normal;
}
}

/* Footer: protection overflow sur chaînes longues */
.footer a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================
   v33 — Mobile & Tablet 100% responsive pass
   Objectif: lisibilité, espacements, zéro overflow, meilleure hiérarchie.
   (Aucun changement de contenu, uniquement CSS/attributs non-visuels)
========================= */
html{
  -webkit-text-size-adjust:100%;
}

/* Typographie: légèrement plus confortable sur petits écrans */
@media (max-width:920px){
  body{ font-size:16.4px; }
}
@media (max-width:720px){
body{
  font-size:16.1px;
  line-height:1.72;
}
h2{
  font-size:clamp(1.45rem, 5.2vw, 1.9rem);
}

@media (max-width:720px){
  .section{ padding:clamp(40px, 7vw, 64px) 0; }
}

@media (max-width:420px){
  .container{ padding:0 14px; }
}
h3{
  font-size:1.15rem;
}
}

/* Paragraphes "lead" (utilisé sur Contact/FAQ) */
.lead{
  color:var(--muted);
  font-weight:650;
  font-size:1.05rem;
  line-height:1.7;
  max-width:68ch;
}

/* Actions: cohérence globale + empilement mobile */
.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

@media (max-width:720px){
.actions{
  flex-direction:column;
  align-items:stretch;
}
.actions .btn{
  width:100%;
}
}

/* Cartes: padding et densité plus agréables sur mobile */
@media (max-width:720px){
.card{
  padding:16px;
}
.card h3{
  margin-bottom:.6rem;
}
.badge{
  font-size:.8rem;
}
}

@media (max-width:420px){
.card{
  padding:14px;
}
}

/* Header: tailles logo/brand stabilisées (évite header trop haut sur mobile) */
/* Boutons: évite les débordements sur mobile (textes longs) */
@media (max-width:720px){
.btn{
  white-space:normal;
  text-align:center;
  line-height:1.25;
}
}

/* iOS: éviter le zoom auto sur champs */
.input{
  font-size:16px;
}

/* Photos: ratios et rayons unifiés + meilleure respiration sur tablette */
@media (max-width:920px){
.photo-grid{
  gap:14px;
}
.image-card .body{
  padding:14px 16px 16px;
}
}

/* Table: scroll plus confortable au doigt */
.table-scroll{
  overscroll-behavior:contain;
}

.table-scroll::-webkit-scrollbar{
  height:10px;
}

.table-scroll::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.18);
  border-radius:999px;
}

.table-scroll::-webkit-scrollbar-track{
  background:rgba(15,23,42,.06);
}

/* Grids: sur tablette portrait, 2 colonnes peuvent être trop serrées -> stack */
@media (max-width:840px){
.grid.cols-2{
  grid-template-columns:1fr;
}
}
/* =========================
   VFx5 — Nettoyage final
   Objectif : code plus propre, cohérent et léger (site statique).
========================= */

/* Utilitaires simples (remplace les style="margin-top:..." répétitifs) */
.mt-8{margin-top:8px;}
.mt-10{margin-top:10px;}
.mt-12{margin-top:12px;}
.mt-14{margin-top:14px;}
.mt-16{margin-top:16px;}
.mt-18{margin-top:18px;}
.mt-22{margin-top:22px;}
.mb-0{margin-bottom:0;}

.stack{display:grid;
gap:10px;}
.stack.gap-8{gap:8px;}
.stack.gap-12{gap:12px;}

/* Utilities V42.1.1 (ultra-clean: remplace les styles inline) */
.m-0{margin:0;}
.m0b10{margin:0 0 10px;}
.m0b8{margin:0 0 8px;}
.m18_0_10{margin:18px 0 10px;}

.flex{display:flex;}
.flex-wrap{flex-wrap:wrap;}
.gap-10{gap:10px;}
.gap-12{gap:12px;}
.d-block{display:block;}

/* Positions d'image (variables CSS) */
.imgpos-42-50{--img-pos:42% 50%;}
.imgpos-50-45{--img-pos:50% 45%;}
.imgpos-50-55{--img-pos:50% 55%;}
.imgpos-55-45{--img-pos:55% 45%;}
.imgpos-55-50{--img-pos:55% 50%;}
.imgpos-60-55{--img-pos:60% 55%;}

/* Table responsive */
.table-scroll{overflow:auto;}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:0.98rem;
}
.table th,
.table td{
  text-align:left;
  vertical-align:top;
  padding:12px 12px;
  border-bottom:1px solid var(--border);
}
.table thead th{
  position:sticky;
  top:0;
  background:var(--card);
  z-index:1;
  font-weight:900;
}
.table tbody tr:hover td{background:rgba(11,94,215,.035);}
.table .muted{color:var(--muted);
font-weight:650;}

/* Badge plus compact dans tableaux/cartes */
.badge.small{padding:.22rem .5rem;
font-size:.78rem;}

/* Carte "info" (remplace les styles inline colorés) */
.card.info{
  background:rgba(11,94,215,.06);
  border-color:rgba(11,94,215,.18);
}

/* Mobile menu lock */
body.nav-open{
  overflow:hidden;
}

@media (max-width:520px){
  .table th, .table td{
    padding:10px 10px;
  }
}
/* --- Services (page services.html) : sections plus compactes avec fonds illustrés --- */
.svc-section{
  position:relative;
  isolation:isolate;
}
.svc-section::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));opacity:1;z-index:-2;}
.svc-section::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.90) 60%);
  z-index:-1;
}
.svc-section.soft::after{
  background:linear-gradient(180deg, rgba(245,247,255,.70) 0%, rgba(245,247,255,.91) 60%);
}
.svc-section > .container{
  position:relative;
}

@media (prefers-color-scheme: dark){
  /* Dark mode: on remonte l’image et on assombrit le voile pour garder la lisibilité */
  .svc-section::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));opacity:1;z-index:-2;}
  .svc-section::after{
    background:linear-gradient(180deg, rgba(7,16,31,.80) 0%, rgba(7,16,31,.94) 60%);
  }
  .svc-section.soft::after{
    background:linear-gradient(180deg, rgba(11,23,48,.82) 0%, rgba(11,23,48,.96) 60%);
  }
}

/* Fonds par prestation (WebP/JPG via image-set) */
.svc--turnover::before{background:radial-gradient(900px 420px at 20% 20%, rgba(11,94,215,.28), transparent 60%),radial-gradient(720px 360px at 80% 80%, rgba(11,94,215,.14), transparent 55%),linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));}
.svc--interventions::before{background:radial-gradient(900px 420px at 80% 10%, rgba(11,94,215,.28), transparent 60%),radial-gradient(720px 360px at 20% 80%, rgba(11,94,215,.14), transparent 55%),linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));}
.svc--urgences::before{background:radial-gradient(900px 420px at 50% 0%, rgba(11,94,215,.30), transparent 60%),repeating-linear-gradient(135deg, rgba(11,94,215,.10) 0 2px, transparent 2px 10px),linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));}
.svc--maintenance::before{background:radial-gradient(900px 420px at 20% 80%, rgba(11,94,215,.26), transparent 60%),radial-gradient(720px 360px at 80% 20%, rgba(11,94,215,.12), transparent 55%),linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));}

@media (min-width: 900px){
  .svc--turnover::before{background:radial-gradient(900px 420px at 20% 20%, rgba(11,94,215,.28), transparent 60%),radial-gradient(720px 360px at 80% 80%, rgba(11,94,215,.14), transparent 55%),linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));}
  .svc--interventions::before{background:radial-gradient(900px 420px at 80% 10%, rgba(11,94,215,.28), transparent 60%),radial-gradient(720px 360px at 20% 80%, rgba(11,94,215,.14), transparent 55%),linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));}
  .svc--urgences::before{background:radial-gradient(900px 420px at 50% 0%, rgba(11,94,215,.30), transparent 60%),repeating-linear-gradient(135deg, rgba(11,94,215,.10) 0 2px, transparent 2px 10px),linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));}
  .svc--maintenance::before{background:radial-gradient(900px 420px at 20% 80%, rgba(11,94,215,.26), transparent 60%),radial-gradient(720px 360px at 80% 20%, rgba(11,94,215,.12), transparent 55%),linear-gradient(135deg, rgba(11,94,215,.10), rgba(11,94,215,.02));}
}

/* --- Dark mode: corrections tardives (évite que des règles "light" écrasent le header/menu) --- */
@media (prefers-color-scheme: dark){
  .header{
    background:rgba(7,16,31,.92) !important;
    border-bottom:1px solid var(--border);
  }
  .nav a{ color:var(--text); }
  .nav a:not(.btn):hover{ color:var(--link); }
  .nav.mobile{
    background:var(--card) !important;
    color:var(--text);
  }
  .nav.mobile a{ color:var(--text); }
}

/* NOTE: CTA supprimés du menu (VF2.3). On garde uniquement les règles nav génériques. */


/* VF3 — carte zones (responsive + propre) */
.zone-illus picture, .zone-illus img{
  display:block;
  width:100%;
  height:auto;
}

/* Badge (Jour / Nuit / Planifié…) — lisible sur tous supports */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.28rem .6rem;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
  line-height:1;
  background:rgba(11,94,215,.10);
  border:1px solid rgba(11,94,215,.18);
  color:var(--primary);
}

@media (prefers-color-scheme: dark){
  .badge{
    background:rgba(139,183,255,.12);
    border-color:rgba(139,183,255,.20);
    color:var(--text);
  }
}

/* =============================
   Cookie banner (RGPD/CNIL)
   ============================= */
.cookie-banner{
  position:fixed;
  inset:auto 0 0 0;
  padding:14px;
  z-index:9999;
  display:flex;
  justify-content:center;
}
.cookie-banner[hidden]{
  display:none;
}
.cookie-banner__card{
  width:min(980px, 100%);
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-strong);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cookie-banner__title{ margin:0; font-size:1.05rem; }
.cookie-banner__desc{ margin:0; color:var(--muted); line-height:1.45; }
.cookie-banner__link{ color:var(--link); font-weight:700; }
.cookie-banner__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cookie-banner__actions .btn{
  padding:10px 14px;
  min-height:42px;
}

@media (max-width:560px){
  .cookie-banner{ padding:10px; }
  .cookie-banner__card{ padding:14px; }
  .cookie-banner__actions{ flex-direction:column; }
  .cookie-banner__actions .btn{ width:100%; }
}

@media (prefers-color-scheme: dark){
  .cookie-banner__card{ background:var(--card); }
}

/* === Micro-animations sobres et accessibles === */
.btn {
  transition:
    transform 220ms cubic-bezier(.4,0,.2,1),
    background-color 220ms cubic-bezier(.4,0,.2,1),
    box-shadow 220ms cubic-bezier(.4,0,.2,1),
    border-color 220ms cubic-bezier(.4,0,.2,1);
}
.btn:hover {
  background: var(--primary-2);
  transform: scale(1.045) translateY(-1px);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(11,94,215,.13);
}
.btn:active {
  transform: scale(0.97) translateY(1px);
  box-shadow: 0 1px 4px rgba(11,94,215,.10);
}
html {
  scroll-behavior: smooth;
  transition:
    background-color 320ms cubic-bezier(.4,0,.2,1),
    color 320ms cubic-bezier(.4,0,.2,1);
}
body {
  transition:
    background-color 320ms cubic-bezier(.4,0,.2,1),
    color 320ms cubic-bezier(.4,0,.2,1);
}
.card {
  transition:
    transform 220ms cubic-bezier(.4,0,.2,1),
    box-shadow 220ms cubic-bezier(.4,0,.2,1),
    background-color 320ms cubic-bezier(.4,0,.2,1),
    color 320ms cubic-bezier(.4,0,.2,1);
}
.card.hover:hover {
  box-shadow: 0 8px 32px rgba(11,94,215,.13);
  transform: scale(1.025) translateY(-2px);
  transition:
    transform 220ms cubic-bezier(.4,0,.2,1),
    box-shadow 220ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity 320ms cubic-bezier(.4,0,.2,1),
      transform 320ms cubic-bezier(.4,0,.2,1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}