/* ========== CSS Variables (Light) ========== */
:root{
  --bg:#ffffff;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --soft:#f3f4f6;
  --accent:#00ff41;      /* neon green */
  --accent2:#2997ff;     /* blue */
  --danger:#ff6b3d;      /* orange */
  --shadow:0 10px 30px rgba(2,6,23,.10);
  --radius:16px;

  /* Navbar rhythm */
  --nav-h:44px;
  --nav-font:15px;
}

/* Dark mode (auto) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1224;
    --card:rgba(17,24,39,.8);
    --ink:#e5e7eb;
    --muted:#9ca3af;
    --line:#1f2937;
    --soft:#0b1220;
    --shadow:0 20px 50px rgba(0,0,0,.5);
  }
}
/* Manual override via html[data-theme] */
html[data-theme="dark"]{
  --bg:#0b1224; --card:rgba(17,24,39,.8); --ink:#e5e7eb; --muted:#9ca3af;
  --line:#1f2937; --soft:#0b1220; --shadow:0 20px 50px rgba(0,0,0,.5);
}
html[data-theme="light"]{
  --bg:#ffffff; --card:#ffffff; --ink:#0f172a; --muted:#6b7280;
  --line:#e5e7eb; --soft:#f3f4f6; --shadow:0 10px 30px rgba(2,6,23,.10);
}

/* Base */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink); background:
    radial-gradient(1200px 600px at 10% -10%, rgba(41,151,255,.18), transparent 60%),
    radial-gradient(1200px 600px at 110% 110%, rgba(0,255,65,.12), transparent 60%),
    var(--bg);
}
.container{ max-width:1320px; margin:0 auto; padding:0 18px }

/* =================== Navbar =================== */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,.0));
}
@media (prefers-color-scheme: dark){
  .nav{ background:linear-gradient(to bottom, rgba(2,6,23,.65), rgba(2,6,23,.0)); }
}

/* one flex row, no wrap */
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:center;     /* ← center the whole row */
  gap:24px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  flex-wrap:nowrap;            /* keep on one line on laptops/desktops */
}


.nav a.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
  min-width:auto;            /* keep the link tight to the logo */
}
.nav a.brand img{ width:auto; height:38px; display:block; }

.brand span{ display:none }         /* hide text logo if any */

/* menu grows, stays on one line */
.menu{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;   /* was 24px */
  margin-left:0;
}



/* links same height as buttons */
.menu a{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--nav-h); min-height:var(--nav-h);
  padding:0 12px;
  line-height:1;
  color:var(--ink); text-decoration:none; font-weight:600;
  border-radius:12px;
  position:relative;                            /* for the animated underline */
  transition: transform .18s ease, filter .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* animated gradient underline (hidden by default) */
.menu a::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:6px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent2), var(--danger));
  opacity:0; transform:scaleX(.6);
  transition: transform .25s ease, opacity .2s ease;
  pointer-events:none;
}

/* reactive hover/focus: soft lift + glow + underline reveal */
.menu a:hover,
.menu a:focus-visible{
  background:var(--soft);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.menu a:hover::after,
.menu a:focus-visible::after{
  opacity:1; transform:scaleX(1);
}


.nav-inner > *{ flex:0 0 auto; }     /* logo, menu, moon don’t stretch */
											
											
											
											
											
/* --- Mobile nav --- */
.hamb{ display:none; }
@media (max-width:900px){
  .menu{ display:none; }
  .hamb{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:12px; border:1px solid var(--line);
    background:var(--soft); color:var(--ink); font-size:20px;
    margin-left:auto;
  }
}

/* slide-down panel */
.mobile-menu{
  position:fixed; top:60px; left:0; right:0;
  background:var(--card); border-bottom:1px solid var(--line);
  z-index:49; display:none;
}
.mobile-menu.open{ display:block; }
.mobile-menu .container{ padding:12px 18px 16px; }
.mobile-menu a{
  display:block; padding:12px; border-radius:12px;
  color:var(--ink); text-decoration:none; font-weight:700;
}
.mobile-menu a:hover{ background:var(--soft); }
.mobile-menu .row .btn{ width:auto; }

/* =================== Buttons =================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--nav-h); min-height:var(--nav-h);
  padding:0 14px; border-radius:12px; line-height:1;
  font-weight:800; border:1px solid var(--line); color:var(--ink);
  background:var(--soft);
}
.btn:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px }
.btn-primary{
  border:0; color:#0b1220;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:var(--shadow);
}
.btn-ghost{ background:transparent }

/* icon-only (moon) */
.btn-icon{
  width:var(--nav-h); height:var(--nav-h); padding:0; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--soft); color:var(--ink); border:1px solid var(--line);
}
.btn-icon:hover{ filter:brightness(1.06) }

/* Special “Catalogue” (orange pulse) */
.btn-catalog{
  border:1px solid rgba(255,165,0,.55);
  background:transparent;
  box-shadow:0 0 0 0 rgba(255,165,0,.35);
  animation:cat-pulse 2.2s ease-out infinite;
}
.btn-catalog:hover{ background:rgba(255,165,0,.08); }
@keyframes cat-pulse{
  0%{   box-shadow:0 0 0 0 rgba(255,165,0,.35) }
  70%{  box-shadow:0 0 0 12px rgba(255,165,0,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,165,0,0) }
}

/* =================== Hero =================== */
.hero{ padding:64px 0 26px }
.hero-grid{ display:grid; gap:24px; grid-template-columns:1.1fr .9fr; align-items:center }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr } }
.kicker{ color:var(--accent2); font-weight:800; letter-spacing:.3px; text-transform:uppercase; font-size:12px }
.headline{ font-size:clamp(28px, 4vw, 44px); line-height:1.15; margin:8px 0 6px; font-weight:800 }
.sub{ color:var(--muted); margin:0 0 18px }

/* =================== Cards / Sections =================== */
.section{ padding:26px 0 64px }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.card .pad{ padding:18px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .grid-3{ grid-template-columns:1fr } }

/* Feature row */
.feature{ display:flex; gap:12px; align-items:flex-start }
.feature i{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-style:normal;
  color:#0b1220; background:linear-gradient(135deg,var(--accent),var(--accent2)); font-weight:900; font-size:18px;
  box-shadow: var(--shadow);
}

/* Brand scroller (placeholder logos) */
.brands{ display:flex; gap:24px; align-items:center; overflow:auto; padding:10px 6px }
.brandlogo{
  min-width:120px; height:50px; border-radius:12px; border:1px dashed var(--line); display:grid; place-items:center;
  color:var(--muted); font-weight:700;
}

/* =================== Footer =================== */
.footer{ border-top:1px solid var(--line); padding:24px 0 40px; color:var(--muted); font-size:14px }
.footer .cols{ display:grid; gap:16px; grid-template-columns:2fr 1fr 1fr 1fr }
@media (max-width:900px){ .footer .cols{ grid-template-columns:1fr 1fr } }
@media (max-width:620px){ .footer .cols{ grid-template-columns:1fr } }
.socials{ display:flex; gap:10px }
.socials a{
  width:38px; height:38px; display:grid; place-items:center; border-radius:10px; text-decoration:none;
  border:1px solid var(--line); color:var(--ink); background:var(--soft);
}
.socials a:hover{ transform:translateY(-2px) }

/* --- Footer brand block & social icons --- */
.footer-brand{
  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo text"
    "socials socials";
  column-gap:16px;
  row-gap:12px;
  align-items:start;
}
.footer-brand img{ grid-area: logo; }
.footer .tagline{ grid-area: text; }

/* socials row centered under the logo/text */
.footer .socials{
  grid-area: socials;
  display:flex;              /* force horizontal row */
  justify-content:center;    /* center in first column width */
  gap:12px;
}

.footer-brand img{
  height:88px;                /* resize logo here */
  width:auto;
  border-radius:14px;         /* soft edges (optional) */
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
@media (max-width:900px){
  .footer-brand img{ height:64px; }
}

/* make the tagline a touch softer */
.footer .tagline{ color:var(--muted); max-width:560px; }

/* social icon buttons */
.socials a{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:10px;
  text-decoration:none;
  border:1px solid var(--line);
  background:var(--soft);
  color:var(--ink);
}
.socials a svg{ width:20px; height:20px; display:block; }

/* brand hovers */
.socials a.si-ig:hover{ color:#E4405F; border-color:#E4405F; }
.socials a.si-fb:hover{ color:#1877F2; border-color:#1877F2; }
.socials a.si-wa:hover{ color:#25D366; border-color:#25D366; }

																																														
/* =================== Utilities =================== */
.center{ text-align:center }
.mt-8{ margin-top:8px } .mt-16{ margin-top:16px } .mt-24{ margin-top:24px }
.row{ display:flex; gap:10px; flex-wrap:wrap }
.spacer{ height:14px }
																																														
/* Show text variants per device for the call button */
.only-desktop{ display:none; }
.only-mobile{ display:inline; }
@media (min-width: 901px){
  .only-desktop{ display:inline; }
  .only-mobile{ display:none; }
}
																																														

/* Content pages */
.prose h1{ font-size:32px; margin:.2em 0 .4em; font-weight:800 }
.prose h2{ font-size:22px; margin:1.2em 0 .4em }
.prose p{ margin:.6em 0; color:var(--ink) }
.prose ul{ margin:.4em 0 .6em 1.2em; color:var(--ink) }
																																																	
																																																	
																																																	
																																																	

/* ---------- Mobile header layout: [hamb] [brand] [actions] ---------- */
.mobile-only{ display:none; }

@media (max-width: 900px){
  .nav-inner{
    display:grid !important;
    grid-template-columns: 44px 1fr auto; /* left: hamburger | center: brand | right: actions */
    align-items:center;
    gap:12px;
    padding-left: 8px;   /* ≈ 2mm nudge to the right */
    padding-right: 8px;  /* symmetry + lets the right button sit 2mm from edge */
  }
  .brand{ justify-self:center; }
  .nav a.brand img{ height:48px; } /* a bit larger logo on mobile/tablet */
  .hamb{ margin-left:0; }
  .menu{ display:none !important; }
  .right-actions{
    display:flex; gap:8px;
    margin-right: 8px; /* keep Catalog ~2mm from the screen edge */
  }
  .mobile-only{ display:inline-flex; }
}


/* ---------- Footer alignment & links polish ---------- */
.footer .cols > div{ display:flex; flex-direction:column; gap:8px; }
@media (max-width: 900px){
  .footer .cols{ gap: 18px; }
}

@media (max-width: 900px){
  .footer .cols > .links-group-desktop{
    display: none !important;
  }
}
																																																	
																																																	
																																																	

/* optional: stronger footer heading + nicer link hover */
.footer b{ font-weight:800; letter-spacing:.2px; }
																																																	
/* Footer links: use brand orange for clarity */
.footer a{ text-decoration:none; color: var(--danger); }
.footer a:hover{ text-decoration:none; filter:brightness(1.05); }

/* Keep social icon buttons NOT orange */
.footer .socials a{ color: var(--ink) !important; border-color: var(--line); }


/* contact links */
.contact-block a{ font-weight:700; }

/* Footer section titles – slightly modern */
.footer .cols > div > b{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink);
  opacity:.85;
}

																																																	
/* ---------- Footer spacing polish ---------- */
.footer .cols > div{              /* columns default spacing */
  display:flex;
  flex-direction:column;
  gap:8px;                        /* tighter vertical rhythm */
}

.footer b{                        /* section headings */
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-size:13px;
}

/* Links in footer: compact line-height */
.footer a{ line-height:1.25; }

/* Mobile + tablet: center columns and reduce gaps a bit more */
@media (max-width: 900px){
  .footer .cols{ text-align:center; }
  .footer .cols > div{ align-items:center; gap:6px; }
}

/* ---------- "Coordonnées" block styling (mobile) ---------- */
.contact-block{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.contact-block a{ font-weight:700; }

/* Optional: make the maps link look like a small chip on mobile */
@media (max-width: 900px){
  .contact-block a[href^="https://maps"]{
    display:inline-block;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--soft);
  }
}

/* ---------- Bottom line only shows copyright ---------- */
.footer > .container.center:last-child{
  margin-top:16px;                /* reduce large gap above */
  padding-top:12px;
  border-top:1px solid var(--line);
  opacity:.85;
}
																																																	
/* Label above phone */
.contact-block .label{
  font-weight:800;
  letter-spacing:.02em;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:4px;
}

/* Phone number: bold, orange, larger, blinking */
.contact-block .tel-link{
  font-weight:900;
  color:var(--danger);
  font-size:18px;
  text-decoration:none;
}
.contact-block .tel-link:hover{ text-decoration:underline; }

/* Blink effect */
@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: .35; }
}
.blink { animation: blink 1.1s steps(1, start) infinite; }

/* WhatsApp button (brand WhatsApp green) */
.btn-wa{
  border:0;
  color:#0b1220;
  background:linear-gradient(135deg,#25D366,#128C7E);
  box-shadow:var(--shadow);
}
.btn-wa:hover{ filter:brightness(1.05); }

																																																																				  
																																																																				  /* button-like chips for map & phone */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--soft);
  color:var(--ink);
  text-decoration:none;
  line-height:1;
  font-weight:700;
  box-shadow: var(--shadow);
}
.chip:hover{ filter:brightness(1.05); }
																																																																									
																																																																									
/* Call button style (orange accent, matches brand) */
.btn-call{
  border:0;
  color:#0b1220;
  background:linear-gradient(135deg, var(--danger), #FFB199);
  box-shadow:var(--shadow);
}
.btn-call:hover{ filter:brightness(1.05); }

/* Stack buttons vertically inside contact block on small screens */
.col-buttons{ display:flex; flex-direction:column; align-items:flex-start; }
@media (max-width: 900px){
  .footer .cols{ text-align:center; }
  .footer .cols > div{ align-items:center; }
  .contact-block .col-buttons{ align-items:center; }
}
																																																																											  
@media (max-width: 900px){
  .btn{ padding:0 12px; }
  .btn-catalog{ border-radius:12px; }
}
																																																																											  
/* --- Force white label for call + WhatsApp buttons only --- */
.btn-call,
.btn-call:visited,
.btn-call .blink,
.btn-wa,
.btn-wa:visited {
  color: #ffffff !important;
}

/* If any icons/SVGs are inside, keep them white too */
.btn-call svg,
.btn-wa svg {
  fill: #ffffff !important;
}

/* Keep hover state white */
.btn-call:hover,
.btn-wa:hover {
  color: #ffffff !important;
}
																																																																											  
/* ===== Footer “boxed” lists on mobile/tablet (match Coordonnées look) ===== */
@media (max-width: 900px){
  .footer-box{
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    box-shadow: var(--shadow);
    /* keep same vertical rhythm as contact block */
    margin-top: 8px;
  }
  .footer-box b{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--ink);
    opacity:.85;
    display:block;
    margin-bottom:6px;
    text-align:center; /* like Coordonnées heading */
  }
  .footer-box a{
    text-decoration:none;
    line-height:1.25;
    display:block;
    padding:8px 0;
  }
  /* Slight divider feel inside the box */
  .footer-box a + a{
    border-top:1px dashed var(--line);
  }

  /* Align all three cards (Liens, Pro, Coordonnées) visually */
  .footer .cols{
    gap: 14px;
  }
  .footer .contact-block{
    margin-top: 8px;
  }
}

/* Equal width buttons in the contact block (mobile/tablet) */
@media (max-width: 900px){
  .contact-block .col-buttons{
    width: 280px;          /* fixed box to equalize widths */
    margin: 0 auto;
    align-items: stretch;  /* make children fill the same width */
  }
  .contact-block .col-buttons .btn{
    width: 100%;           /* both buttons same width */
  }
}

/* Make sure nothing blinks in these buttons */
.contact-block .blink{ animation: none !important; }
																																																																																	
/* Maps chip -> blue bg + white text */
.contact-block a[href^="https://maps.app"]{
  background: linear-gradient(135deg, #5ab8ff, #2997ff);
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: var(--shadow);
}
.contact-block a[href^="https://maps.app"]:hover{ filter: brightness(1.05); }
.contact-block a[href^="https://maps.app"] svg{ fill:#ffffff; }
																																																																																	
/* Mobile/tablet: make the single reseller button look tidy */
																																																																																		  
@media (max-width: 900px){
  .mobile-menu .only-reseller{
    display: flex;
    justify-content: flex-start;
  }
  .mobile-menu .only-reseller .btn{
    width: auto;                 /* shrink to text */
    align-self: flex-start;      /* keep left-aligned */
    justify-content: center;
    padding-inline: 16px;        /* nice pill padding */
    white-space: nowrap;         /* one line */
  }
}

/* Mobile/tablet: make the slide-down menu more opaque and full-height */
@media (max-width: 900px){
  .mobile-menu{
    position: fixed;
    top: 60px; left: 0; right: 0; bottom: 0;   /* cover screen below the header */
    background: rgba(11, 18, 36, 0.96);        /* darker, almost opaque */
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu .container{
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
    max-height: 100%;
    overflow-y: auto;                          /* scroll menu content if long */
  }
}

@media (max-width: 900px){
  .mobile-menu{ cursor: pointer; }          /* backdrop looks tappable */
  .mobile-menu .container{ cursor: default; } /* menu itself normal cursor */
}
																																																																																	
/* Make the Google Maps chip match the buttons in the contact stack */
@media (max-width: 900px){
  .contact-block .col-buttons .chip{
    width: 100%;
    height: var(--nav-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }
}
																																																																																		  
																																																																																		  
																																																																																		  
																																																																																		  
	
																																																																																		  
																																																																																		  
																																																																																		  
																																																																																		  
																																																																																	
/* ==== Hero CTA (all sizes) ==== */

/* Base micro-interaction */
.btn-cta-primary,
.btn-cta-outline{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform, box-shadow, filter;
  text-decoration: none;
  border: 0;
  font-weight: 900;
}

/* Primary: Voir le catalogue */
.btn-cta-primary{
  color: #0b1220;
  background: linear-gradient(135deg, #00ff6a, #2997ff);
  box-shadow: var(--shadow);
  animation: ctaGlow 2.4s ease-in-out infinite;
}

/* Outline: Espace Revendeur */
.btn-cta-outline{
  color: #ffffff;
  background: linear-gradient(135deg, #FFB199, var(--danger));
  box-shadow:
    0 10px 30px rgba(255,107,61,.22),
    0 2px 0 rgba(0,0,0,.25) inset;
  animation: revPulse 2400ms ease-in-out infinite alternate;
}

/* Hover (where hover exists) */
@media (hover:hover){
  .btn-cta-primary:hover,
  .btn-cta-outline:hover{
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.04);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
}

/* Shimmer line */
.btn-cta-primary::after,
.btn-cta-outline::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, transparent 20%,
      rgba(255,255,255,.28) 35%,
      transparent 50%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events:none;
  mix-blend-mode: screen;
}
@media (hover:hover){
  .btn-cta-primary:hover::after,
  .btn-cta-outline:hover::after{
    transform: translateX(120%);
  }
}

/* Soft breathing glows */
@keyframes ctaGlow{
  0%,100%{ box-shadow: 0 10px 30px rgba(0,0,0,.20), 0 0 0 0 rgba(0,255,106,.0); }
  50%    { box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 0 22px 0 rgba(0,255,106,.18); }
}
@keyframes revPulse{
  0%   { box-shadow: 0 10px 30px rgba(255,107,61,.18), 0 2px 0 rgba(0,0,0,.25) inset; }
  100% { box-shadow: 0 18px 48px rgba(255,107,61,.28), 0 2px 0 rgba(0,0,0,.25) inset; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-cta-primary, .btn-cta-outline{ animation: none !important; }
  .btn-cta-primary::after, .btn-cta-outline::after{ display:none; }
  .btn-cta-primary:hover, .btn-cta-outline:hover{ transform:none; filter:none; box-shadow:none; }
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-cta-primary, .btn-cta-outline{ animation: none !important; }
  .btn-cta-primary::after, .btn-cta-outline::after{ display:none; }
  .btn-cta-primary:hover, .btn-cta-outline:hover{ transform:none; filter:none; box-shadow:none; }
}

/* no underline on the two hero CTAs */
.btn-cta-primary,
.btn-cta-primary:visited,
.btn-cta-outline,
.btn-cta-outline:visited{
  text-decoration: none;
}

/* ===== Footer: group LIENS + PRO on desktop/laptop only ===== */

/* default: mobile/tablet sees your existing two .footer-box blocks */
.links-group-desktop{ display:none; }

@media (min-width: 901px){
  /* 3 columns: brand | (grouped links) | coordonnées  */
  .footer .cols{
    grid-template-columns: 2fr 1.4fr 1.6fr;
    align-items: center;                /* vertically center all three */
  }

  /* show the desktop group, hide the two mobile boxes */
  .links-group-desktop{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow);
    height: fit-content;
  }
  .links-mobile{ display:none; }

  /* headings + links inside the group */
  .links-group-desktop .links-col b{
    display:block;
    margin-bottom:8px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
    color: var(--ink);
    opacity:.85;
  }
  .links-group-desktop .links-col a{
    display:block;
    text-decoration:none;
    color: var(--danger);
    line-height:1.25;
    padding: 6px 0;
  }

  /* center the Coordonnées card nicely */
  .footer .contact-block{
    align-self: center;
  }
}
				


/* ===== Footer: group LIENS + PRO on desktop ===== */
.links-group-desktop{ display:none; }      /* default hidden (mobile) */

@media (min-width: 901px){
  /* 3 columns: brand | grouped links | coordonnées */
  .footer .cols{
    grid-template-columns: 2fr 1.4fr 1.6fr;
    align-items: center;
  }

  .links-group-desktop{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow);
    height: fit-content;
  }

  /* hide the old two-box mobile version on desktop */
  .links-mobile{ display:none !important; }

  /* center the Coordonnées card vertically */
  .footer .contact-block{ align-self: center; }
}

@media (min-width: 901px){
  /* turn the left column into a card so the 3 items feel grouped */
  .footer .footer-brand{
    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--card);
    box-shadow:var(--shadow);
  }
}

/* === Footer equal height + center coords buttons (desktop/laptop) === */
@media (min-width: 901px){

  /* make the 3 grid items stretch to equal height */
  .footer .cols{
    align-items: stretch;                 /* was center */
  }

  /* ensure each card fills the stretched height */
  .footer .footer-brand,
  .links-group-desktop,
  .footer .contact-block{
    height: 100%;
    display: flex;                        /* so inner content can align */
    flex-direction: column;
  }

  /* vertically center ONLY the buttons stack in Coordonnées */
  .footer .contact-block .col-buttons{
    margin-top: auto;                     /* push down from top */
    margin-bottom: auto;                  /* push up from bottom — centers */
  }
}
																																																																																																		  
/* Coordonnées buttons: equal size on desktop/laptop only (no re-alignment) */
@media (min-width: 901px){
  .footer .contact-block .col-buttons .chip,
  .footer .contact-block .col-buttons .btn{
    box-sizing: border-box;
    width: 320px;          /* set your desired width */
    max-width: 100%;
    height: var(--nav-h);  /* same height as other buttons */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;   /* keep text on one line */
  }
}

/* ===== Contact page layout & form ===== */
.contact-wrap .info-list dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:10px 0 0; }
.contact-wrap .info-list dt{ font-weight:800; color:var(--ink); }
.contact-wrap .info-list dd{ margin:0; color:var(--ink); }

.contact-cols{
  display:grid;
  grid-template-columns: 1fr 1px 1fr;   /* left | divider | right */
  gap:18px;
  align-items:start;
}
.contact-divider{
  width:1px; background:var(--line);
  min-height:100%;
  align-self:stretch;
  border-radius:1px;
}

/* Form fields */
.field{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.field label{ font-weight:700; font-size:14px; color:var(--ink); }
.field input, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--soft); color:var(--ink); font:inherit; resize:vertical;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--accent2); outline-offset:2px; }

/* Right column text */
.contact-right h2{ margin-top:0; font-size:20px; font-weight:800; }
.contact-right p{ margin-top:8px; color:var(--ink); }

/* Responsive: stack on small screens */
@media (max-width: 900px){
  .contact-cols{
    grid-template-columns: 1fr; gap:16px;
  }
  .contact-divider{
    display:block; height:1px; width:100%; background:var(--line);
  }
}

/* Contact page: right-side image — desktop only */
.contact-media{ display:none; }
@media (min-width: 901px){
  .contact-media{
    display:block;
    margin-top:18px;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .contact-media img{
    width:100%;
    height:100%;
    display:block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}


/* === Multi-slide carousel (4 on desktop, 2 tablet, 1 mobile) === */
.brand-hero{ position:relative; overflow:hidden; padding:18px; }
.brand-carousel{ overflow:hidden; }
.brand-track{
  display:flex; gap:16px;
  transition: transform .55s ease;
  will-change: transform;
}
.brand-card{
  /* width is controlled by --perPage passed from JS */
  flex: 0 0 calc(100% / var(--perPage));
}
.brand-card-inner{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 6;             /* good for 800x300, tweak if needed */
  display:grid; place-items:center;
}
																																																																																																																									
/* Text-only brand tiles */
.brand-title{
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: clamp(18px, 3.2vw, 34px);
  color: #ffffff;
  text-shadow:
    0 2px 8px rgba(0,0,0,.35),
    0 0 24px rgba(255,255,255,.10);
}
.brand-subtle{
  font-weight: 700;
  opacity: .85;
  font-size: clamp(11px, 1.6vw, 12px);
  margin-top: 6px;
  color: rgba(255,255,255,.92);
}

/* Optional: softer glass effect on the tile itself */
.brand-card-inner{
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(6px) saturate(130%);
}
.brand-card-inner::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.14), transparent 40%);
  pointer-events:none;
}
																																																																																																																									
																																																																																																																									
																																																																																																																									
.brand-card-inner img{
  width:100%; height:100%;
  object-fit: cover;                 /* fills the card; use 'contain' to avoid crop */
}

/* dots */
.brand-dots{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
.brand-dots .dot{
  width:8px; height:8px; border-radius:999px; border:none; cursor:pointer;
  background: rgba(255,255,255,.25);
  transition: transform .15s ease, background .2s;
}
.brand-dots .dot.on{ background:#8b5cf6; transform:scale(1.25); }

/* responsive perPage handled in JS; aspect can relax on small screens */
@media (max-width: 640px){
  .brand-card-inner{ aspect-ratio: 16 / 7; }
}
/* Tighten space between the brand slider section and the next block */
.section:has(.brand-hero){            /* the slider section */
  padding-bottom: 24px;               /* was 64px */
}
.section:has(.brand-hero) + .section{ /* the block right after slider */
  padding-top: 12px;                  /* was 26px */
}

/* Fallback for very old browsers that don't support :has() */
@supports not (selector(:has(*))) {
  .brand-hero{ margin-bottom: -40px; } /* pull next block up a bit */
}