/* ============================================================
   91 Volt — feuille de style partagée
   Utilisée par index.html et les pages de détail (pages/*.html)
   Palette et typographie : voir CLAUDE.md — ne pas improviser de
   nouvelles couleurs sans validation.
   ============================================================ */

:root{
  --navy:#10233F;
  --spark:#F5B70A;
  --bg:#F3F4F7;
  --ink:#14181F;
  --muted:#5C6270;
  --line:#DADEE6;
  --line-2:#E3E5EA;
  --radius:14px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'IBM Plex Sans', sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.logo{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1,h2,h3{text-wrap:balance;}

a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img,svg{display:block;max-width:100%;}
button{font:inherit;cursor:pointer;}

/* Anneau de focus clavier — visible uniquement à la navigation au clavier
   (:focus-visible), pas au clic souris. Accessibilité, pas optionnel. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--spark);
  outline-offset:2px;
  border-radius:4px;
}

/* Lien "aller au contenu" — invisible tant qu'il n'a pas le focus clavier,
   indispensable pour les utilisateurs au clavier/lecteur d'écran qui
   veulent sauter la nav répétée sur chaque page. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  z-index:1000;
  background:var(--navy);
  color:#fff;
  padding:12px 20px;
  border-radius:8px;
  font-weight:600;
  font-size:0.9rem;
}
.skip-link:focus{
  left:16px;
  top:16px;
}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Bandeau "site en cours de finalisation" (temporaire) ---------- */
.wip-banner{
  background:var(--navy);
  color:#fff;
}
.wip-banner .container{
  padding-top:10px;
  padding-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  text-align:center;
  font-size:0.85rem;
  font-weight:500;
}
.wip-icon{flex-shrink:0;}

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(243,244,247,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}

.logo{
  font-size:1.35rem;
  font-weight:700;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:2px;
}
.logo .dot{color:var(--spark);}

nav.main-nav ul{
  display:flex;
  gap:32px;
}
nav.main-nav a{
  font-size:0.95rem;
  font-weight:500;
  color:var(--ink);
  transition:color .15s ease;
}
nav.main-nav a:hover,
nav.main-nav a.active{color:var(--navy);}

/* ---------- Menu déroulant "Prestations" (desktop) ---------- */
.nav-dropdown{position:relative;}
.nav-dropdown > .dropdown-trigger{
  display:inline-flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
.nav-dropdown > .dropdown-trigger svg{
  width:12px;height:12px;
  stroke:currentColor;
  transition:transform .15s ease;
}
.nav-dropdown:hover > .dropdown-trigger svg,
.nav-dropdown:focus-within > .dropdown-trigger svg{transform:rotate(180deg);}

.dropdown-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  /* padding-top comble l'espace entre le lien et le menu : la zone
     reste "survolée" pendant que la souris descend, au lieu d'un
     vide qui coupe le :hover et referme le menu (cf. .dropdown-menu-inner) */
  padding-top:14px;
  min-width:250px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease;
  z-index:110;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.dropdown-menu-inner{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 16px 34px rgba(16,35,63,0.14);
  padding:8px;
  transform:translateY(-6px);
  transition:transform .15s ease;
}
.nav-dropdown:hover .dropdown-menu-inner,
.nav-dropdown:focus-within .dropdown-menu-inner{
  transform:translateY(0);
}
.dropdown-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:8px;
  font-size:0.9rem;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}
.dropdown-menu a:hover,
.dropdown-menu a.active{
  background:var(--bg);
  color:var(--navy);
}
.dropdown-menu a .dot-num{
  font-family:'Space Grotesk',sans-serif;
  font-size:0.72rem;
  font-weight:700;
  color:var(--muted);
  width:18px;
}
.dropdown-menu a.active .dot-num{color:var(--spark);}
.dropdown-menu .dropdown-sep{
  height:1px;
  background:var(--line-2);
  margin:6px 4px;
}
.dropdown-menu a.dropdown-all{
  color:var(--navy);
  font-weight:600;
}

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:8px;
  font-weight:600;
  font-size:0.95rem;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer;
}
.btn-primary{
  background:var(--spark);
  color:var(--navy);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(245,183,10,0.35);
}
.btn-primary:active{
  transform:scale(0.98);
  box-shadow:0 3px 10px rgba(245,183,10,0.3);
}
.btn-outline{
  background:transparent;
  border-color:var(--navy);
  color:var(--navy);
}
.btn-outline:hover{
  background:var(--navy);
  color:#fff;
}
.btn-outline:active{
  transform:scale(0.98);
}
.btn-light{
  background:#fff;
  color:var(--navy);
}
.btn-light:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}
.btn-light:active{
  transform:scale(0.98);
}
.btn-sm{padding:9px 16px;font-size:0.85rem;}

.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:6px;
}
.burger span{
  width:24px;height:2px;background:var(--navy);border-radius:2px;
}

/* ---------- Hero (page d'accueil) ---------- */
.hero{
  padding:88px 0 48px;
}
.trust-strip{
  padding:0 0 88px;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--line);
  padding:7px 14px;
  border-radius:999px;
  margin-bottom:22px;
}
.eyebrow .bolt{color:var(--spark);}

.hero h1{
  font-size:2.7rem;
  line-height:1.15;
  color:var(--navy);
  margin-bottom:20px;
}
.hero p.lead{
  font-size:1.1rem;
  color:var(--muted);
  max-width:52ch;
  margin-bottom:32px;
}
.hero-ctas{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:44px;
}

.mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.mini-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
}
.mini-stat .num{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  color:var(--navy);
  font-size:1.05rem;
  margin-bottom:4px;
}
.mini-stat .label{
  font-size:0.85rem;
  color:var(--muted);
}

.hero-visual{
  position:relative;
  aspect-ratio:1/1;
  border-radius:20px;
  background:var(--navy);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-visual svg{width:70%;height:70%;}

/* ---------- Section shared ---------- */
section{padding:96px 0;}
.section-head{
  max-width:640px;
  margin:0 auto 56px;
  text-align:center;
}
/* Pastille de label utilisée au-dessus des titres de section, sur fond
   clair (Prestations, Le détail, Contact...). Les variantes sur fond
   sombre (zone d'intervention, hero légal) redéfinissent .tag localement
   sans pastille, la couleur navy dessus serait invisible sur navy. */
.tag{
  display:inline-block;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--spark);
  background:var(--navy);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:16px;
}
.section-head h2{
  font-size:2rem;
  color:var(--navy);
  margin-bottom:14px;
}
.section-head p{
  color:var(--muted);
  font-size:1.02rem;
}

/* ---------- Prestations (cartes accueil) ---------- */
.prestations{
  position:relative;
  background:#fff;
  overflow:hidden;
}
.trace-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0.5;
  z-index:0;
  pointer-events:none;
}
.prestations .container{
  position:relative;
  z-index:1;
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 26px;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(16,35,63,0.10);
  border-color:var(--navy);
}
.card .icon{
  width:48px;height:48px;
  border-radius:10px;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.card .icon svg{width:24px;height:24px;stroke:var(--spark);}
.card .num{
  font-family:'Space Grotesk',sans-serif;
  font-size:0.8rem;
  font-weight:600;
  color:var(--muted);
  margin-bottom:8px;
}
.card h3{
  font-size:1.15rem;
  color:var(--navy);
  margin-bottom:10px;
}
.card p{
  font-size:0.94rem;
  color:var(--muted);
  margin-bottom:18px;
}
.card .card-link{
  margin-top:auto;
  font-size:0.88rem;
  font-weight:600;
  color:var(--navy);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.card .card-link svg{width:14px;height:14px;stroke:var(--navy);transition:transform .15s ease;}
.card:hover .card-link svg{transform:translateX(3px);}

/* ---------- Zone d'intervention ---------- */
.zone{
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.zone .container{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:56px;
  align-items:center;
}
.zone-badge{
  width:220px;
  height:220px;
  border-radius:50%;
  border:2px solid rgba(245,183,10,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  position:relative;
}
.zone-badge::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:1px dashed rgba(245,183,10,0.3);
}
.zone-badge .num{
  font-family:'Space Grotesk',sans-serif;
  font-size:4.2rem;
  font-weight:700;
  color:var(--spark);
}
.zone-text .tag{
  display:inline-block;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--spark);
  margin-bottom:16px;
}
.zone-text h2{
  font-size:2rem;
  color:#fff;
  margin-bottom:18px;
}
.zone-text p{
  color:rgba(255,255,255,0.78);
  font-size:1.02rem;
  max-width:56ch;
  margin-bottom:14px;
}
.zone-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.zone-list li{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  padding:8px 14px;
  border-radius:999px;
  font-size:0.88rem;
}

/* ---------- Contact ---------- */
.contact .container{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
}
.contact-info h2{
  font-size:2rem;
  color:var(--navy);
  margin-bottom:16px;
}
.contact-info p{
  color:var(--muted);
  margin-bottom:28px;
  max-width:46ch;
}
.contact-detail{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:22px;
}
.contact-detail .icon{
  width:40px;height:40px;
  border-radius:10px;
  background:var(--bg);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.contact-detail .icon svg{width:18px;height:18px;stroke:var(--navy);}
.contact-detail .label{
  font-size:0.82rem;
  color:var(--muted);
  margin-bottom:2px;
}
.contact-detail .value{
  font-weight:600;
  color:var(--navy);
  font-size:1rem;
}

.form-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.form-group{margin-bottom:16px;}
.form-group label{
  display:block;
  font-size:0.85rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:6px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  font-family:inherit;
  font-size:0.95rem;
  color:var(--ink);
  background:var(--bg);
  transition:border-color .15s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--navy);
}
.form-group textarea{resize:vertical;min-height:110px;}
.form-submit{width:100%;}
.form-note{
  font-size:0.8rem;
  color:var(--muted);
  margin-top:14px;
}
.form-note a{
  color:var(--navy);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Piège à robots — masqué visuellement mais toujours présent dans le DOM
   (les lecteurs d'écran l'ignorent grâce à aria-hidden côté formulaire). */
.honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-message{
  margin-top:16px;
  padding:12px 14px;
  border-radius:8px;
  font-size:0.88rem;
  font-weight:500;
}
.form-message.success{
  background:rgba(52,168,83,0.1);
  border:1px solid rgba(52,168,83,0.3);
  color:#1c7a34;
}
.form-message.error{
  background:rgba(214,69,69,0.1);
  border:1px solid rgba(214,69,69,0.3);
  color:#a33636;
}

/* ---------- Footer ---------- */
footer{
  background:var(--navy);
  color:rgba(255,255,255,0.7);
  padding:40px 0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.footer-inner .logo{color:#fff;}
.footer-links{
  display:flex;
  gap:24px;
  font-size:0.88rem;
}
.footer-links a:hover{color:#fff;}
.footer-bottom{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.12);
  font-size:0.82rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.footer-legal{
  flex-basis:100%;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:0.82rem;
}
.footer-legal a{cursor:pointer;}
.footer-legal a:hover{color:#fff;}
/* "Gérer les cookies" est un vrai <button> (pas un <a> sans href, qui ne
   serait ni focusable ni accessible au clavier) — on le fait juste
   ressembler visuellement aux liens voisins. */
.footer-legal button{
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.footer-legal button:hover{color:#fff;}

/* ---------- Page d'erreur 404 ---------- */
.error-page{
  padding:120px 0;
  text-align:center;
}
.error-page .container{
  max-width:560px;
}
.error-code{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:5rem;
  color:var(--spark);
  line-height:1;
  margin-bottom:8px;
}
.error-page h1{
  font-size:1.8rem;
  color:var(--navy);
  margin-bottom:14px;
}
.error-page p{
  color:var(--muted);
  margin-bottom:32px;
}
.error-page .hero-ctas{
  justify-content:center;
}

/* Mobile nav drawer */
.mobile-nav{
  display:none;
  flex-direction:column;
  gap:2px;
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.mobile-nav.open{display:flex;}
.mobile-nav a{
  padding:16px 24px;
  border-bottom:1px solid var(--line-2);
  font-weight:500;
}
.mobile-nav a.mobile-sub{
  padding:13px 24px 13px 40px;
  font-size:0.9rem;
  font-weight:400;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}
.mobile-nav a.mobile-sub.active{color:var(--navy);font-weight:600;}
.mobile-nav .btn{margin:16px 24px;}


/* ============================================================
   Pages de détail (pages/*.html)
   ============================================================ */

/* Fil d'Ariane */
.breadcrumb{
  padding:20px 0;
  font-size:0.85rem;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.breadcrumb a{color:var(--navy);font-weight:500;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb .sep{margin:0 8px;color:var(--line);}

/* Hero de page de détail */
.detail-hero{
  background:var(--navy);
  color:#fff;
  padding:64px 0;
  position:relative;
  overflow:hidden;
}
.detail-hero .container{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
  position:relative;
  z-index:1;
}
.detail-hero .num-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--spark);
  margin-bottom:18px;
}
.detail-hero h1{
  font-size:2.3rem;
  color:#fff;
  margin-bottom:16px;
  line-height:1.2;
}
.detail-hero p.lead{
  color:rgba(255,255,255,0.78);
  font-size:1.05rem;
  max-width:52ch;
  margin-bottom:28px;
}
.detail-hero .icon-big{
  width:96px;height:96px;
  border-radius:20px;
  background:rgba(245,183,10,0.12);
  border:1px solid rgba(245,183,10,0.35);
  display:flex;align-items:center;justify-content:center;
}
.detail-hero .icon-big svg{width:44px;height:44px;stroke:var(--spark);}
.detail-hero .photo-frame{
  aspect-ratio:4/3;
  border-radius:16px;
}

/* Cadre "photo" — galerie navigable (flèches gauche/droite).
   Tant qu'aucune photo réelle n'est fournie pour un bloc, la galerie
   contient une seule slide de substitution (icône + légende). Pour
   ajouter des photos : dans .gallery-track, ajouter une
   <div class="gallery-slide slide-photo"><img ...></div> par photo —
   les flèches et les points apparaissent automatiquement dès que la
   galerie contient plus d'une slide (voir assets/gallery.js).
   Voir CLAUDE.md, section Placeholders. */
.photo-frame{
  border:1px solid rgba(245,183,10,0.25);
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
}
.photo-frame.light{border:1px solid var(--line);}

.gallery-track{
  display:flex;
  height:100%;
  transition:transform .3s ease;
}
.gallery-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-slide.slide-placeholder{
  flex-direction:column;
  gap:14px;
  padding:24px;
  text-align:center;
  color:rgba(255,255,255,0.55);
  background:linear-gradient(155deg, rgba(16,35,63,0.94), rgba(16,35,63,0.75));
}
.photo-frame.light .gallery-slide.slide-placeholder{
  color:var(--muted);
  background:linear-gradient(155deg, #fff, var(--bg));
}
.gallery-slide.slide-placeholder svg{width:64px;height:64px;stroke:var(--spark);opacity:0.85;}
.photo-frame.light .gallery-slide.slide-placeholder svg{stroke:var(--navy);opacity:0.7;}
.gallery-slide.slide-placeholder .caption{
  font-size:0.78rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}
.photo-frame.light .gallery-slide.slide-placeholder .caption{color:var(--muted);}

.gallery-slide.slide-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(16,35,63,0.22);
  z-index:5;
  transition:background .15s ease, transform .15s ease;
}
.gallery-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06);}
.gallery-arrow.prev{left:12px;}
.gallery-arrow.next{right:12px;}
.gallery-arrow svg{width:18px;height:18px;stroke:var(--navy);}
.gallery-arrow[hidden]{display:none;}

.gallery-dots{
  position:absolute;
  bottom:12px;
  left:0;right:0;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:5;
}
.gallery-dots[hidden]{display:none;}
.gallery-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.7);
  padding:0;
  cursor:pointer;
}
.gallery-dot.active{background:var(--spark);border-color:var(--spark);}

/* Grille de sous-prestations détaillées */
.detail-section{background:#fff;}
.detail-section.alt{background:var(--bg);}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.feature-item{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:24px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
}
.feature-item .photo-frame{
  aspect-ratio:4/3;
  min-height:140px;
}
.feature-item h3{
  font-size:1.1rem;
  color:var(--navy);
  margin-bottom:10px;
}
.feature-item p{
  font-size:0.92rem;
  color:var(--muted);
  margin-bottom:10px;
}
.feature-item ul{
  margin-top:8px;
}
.feature-item ul li{
  font-size:0.88rem;
  color:var(--ink);
  padding-left:18px;
  position:relative;
  margin-bottom:6px;
}
.feature-item ul li::before{
  content:"";
  position:absolute;
  left:0;top:8px;
  width:8px;height:8px;
  border-radius:2px;
  background:var(--spark);
}

/* Étapes / process */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 20px;
  position:relative;
}
.step .step-num{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.6rem;
  color:var(--spark);
  margin-bottom:12px;
}
.step h4{
  font-size:1rem;
  color:var(--navy);
  margin-bottom:8px;
}
.step p{
  font-size:0.88rem;
  color:var(--muted);
}

/* Bandeau CTA bas de page */
.detail-cta{
  background:var(--navy);
  color:#fff;
  text-align:center;
}
.detail-cta h2{color:#fff;font-size:1.9rem;margin-bottom:14px;}
.detail-cta p{color:rgba(255,255,255,0.75);max-width:52ch;margin:0 auto 28px;}
.detail-cta .hero-ctas{justify-content:center;}

/* Pages associées (les 3 autres pôles) */
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.related-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  display:flex;
  align-items:center;
  gap:14px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.related-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(16,35,63,0.1);
  border-color:var(--navy);
}
.related-card .icon{
  width:40px;height:40px;
  border-radius:10px;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.related-card .icon svg{width:20px;height:20px;stroke:var(--spark);}
.related-card .title{
  font-weight:600;
  color:var(--navy);
  font-size:0.95rem;
}
.related-card .sub{
  font-size:0.8rem;
  color:var(--muted);
}

/* ============================================================
   Pages légales (mentions-legales.html, confidentialite.html)
   ============================================================ */
.legal-hero{
  background:var(--navy);
  color:#fff;
  padding:56px 0;
}
.legal-hero .tag{
  display:inline-block;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--spark);
  margin-bottom:14px;
}
.legal-hero h1{font-size:2.1rem;color:#fff;margin-bottom:10px;}
.legal-hero p{color:rgba(255,255,255,0.75);font-size:0.95rem;}

.legal-content{
  background:#fff;
  padding:64px 0 96px;
}
.legal-content .container{
  max-width:760px; /* resserré depuis 820px pour une mesure de lecture plus confortable */
}
.legal-content h2{
  font-size:1.35rem;
  color:var(--navy);
  margin:44px 0 14px;
}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{
  font-size:1.05rem;
  color:var(--navy);
  margin:24px 0 10px;
}
.legal-content p{
  color:var(--ink);
  font-size:0.96rem;
  margin-bottom:14px;
}
.legal-content p.muted-note{
  color:var(--muted);
  font-size:0.86rem;
  font-style:italic;
}
.legal-content ul{
  margin:0 0 16px;
}
.legal-content ul li{
  font-size:0.95rem;
  color:var(--ink);
  padding-left:20px;
  position:relative;
  margin-bottom:8px;
}
.legal-content ul li::before{
  content:"";
  position:absolute;
  left:0;top:9px;
  width:7px;height:7px;
  border-radius:2px;
  background:var(--spark);
}
.legal-content a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.legal-content .legal-table{
  width:100%;
  border-collapse:collapse;
  margin:8px 0 20px;
  font-size:0.88rem;
}
.legal-content .legal-table th,
.legal-content .legal-table td{
  text-align:left;
  padding:10px 12px;
  border:1px solid var(--line);
}
.legal-content .legal-table th{
  background:var(--bg);
  color:var(--navy);
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
}
.legal-content .legal-table td{color:var(--muted);}
.legal-updated{
  font-size:0.82rem;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:40px;
}
.placeholder-flag{
  display:inline-block;
  background:rgba(245,183,10,0.15);
  border:1px solid rgba(245,183,10,0.4);
  color:#8a6400;
  font-size:0.78rem;
  font-weight:600;
  padding:2px 8px;
  border-radius:6px;
  margin-left:6px;
}

/* ============================================================
   Bandeau cookies — cf. assets/cookies.js pour la logique.
   Aucun cookie de mesure d'audience n'est chargé par défaut ;
   seul un cookie technique de préférence est déposé une fois
   un choix enregistré (voir pages/confidentialite.html).
   ============================================================ */
.cookie-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  transform:translateY(110%);
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -12px 32px rgba(16,35,63,0.16);
  z-index:200;
  padding:22px 0;
  transition:transform .25s ease;
}
.cookie-banner.visible{transform:translateY(0);}

.cookie-banner-inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.cookie-text strong{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  color:var(--navy);
  font-size:1rem;
  margin-bottom:4px;
}
.cookie-text p{
  font-size:0.85rem;
  color:var(--muted);
  max-width:64ch;
}
.cookie-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  flex-shrink:0;
}

.cookie-panel{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease, margin-top .25s ease;
}
.cookie-panel.open{
  max-height:260px;
  margin-top:18px;
}
.cookie-panel-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 0;
  border-top:1px solid var(--line-2);
}
.cookie-panel-title{
  font-weight:600;
  color:var(--navy);
  font-size:0.92rem;
  margin-bottom:2px;
}
.cookie-panel-desc{
  font-size:0.82rem;
  color:var(--muted);
  max-width:56ch;
}
.cookie-panel-foot{
  padding-top:16px;
  display:flex;
  justify-content:flex-end;
}

/* Interrupteur on/off */
.switch{
  position:relative;
  display:inline-block;
  width:42px;height:24px;
  flex-shrink:0;
}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch .slider{
  position:absolute;inset:0;
  background:var(--line);
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease;
}
.switch .slider::before{
  content:"";
  position:absolute;
  height:18px;width:18px;
  left:3px;bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:transform .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.switch input:checked + .slider{background:var(--navy);}
.switch input:checked + .slider::before{transform:translateX(18px);}
.switch.disabled .slider{
  background:rgba(245,183,10,0.5);
  cursor:not-allowed;
}
.switch.disabled .slider::before{transform:translateX(18px);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  nav.main-nav{display:none;}
  .burger{display:flex;}
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{order:-1;max-width:320px;margin:0 auto 20px;}
  .cards-grid{grid-template-columns:repeat(2,1fr);}
  .zone .container{grid-template-columns:1fr;text-align:center;}
  .zone-text p{margin-left:auto;margin-right:auto;}
  .contact .container{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}

  .detail-hero .container{grid-template-columns:1fr;}
  .detail-hero .photo-frame{order:-1;max-width:360px;margin:0 auto;}
  .feature-item{grid-template-columns:1fr;}
  .feature-item .photo-frame{order:-1;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .related-grid{grid-template-columns:1fr;}

  .cookie-banner-inner{flex-direction:column;align-items:flex-start;}
  .cookie-actions{width:100%;}
  .cookie-actions .btn{flex:1;}
}
@media (max-width:560px){
  .hero h1{font-size:2.1rem;}
  .mini-stats{grid-template-columns:1fr;}
  .cards-grid{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .footer-inner{flex-direction:column;align-items:flex-start;}

  .detail-hero h1{font-size:1.8rem;}
  .steps{grid-template-columns:1fr;}
  .legal-hero h1{font-size:1.6rem;}
  .cookie-panel-row{flex-direction:column;align-items:flex-start;gap:8px;}
}