/* =========================
   assets/css/style.css (final)
   Mobile-first, accessible, unifié
   Dernières corrections : header logo réduit, hero centré via grid,
   footer responsive, nav mobile stable, fixes pour le carrousel/avis.
   ========================= */

/* Reset minimal */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;line-height:1.4;color:#222;background:#fff}

/* Variables */
:root{
  --blue-100:#e6f7ff;
  --blue-300:#8fcff6;
  --blue-500:#0b6fbf;
  --blue-700:#075a9a;
  --white:#ffffff;
  --muted:#6b7280;
  --container-max:1200px;
  --gap:1rem;
  --radius:8px;
  --shadow: 0 6px 18px rgba(11,111,191,0.08);
  --card-border:#eef2f6;
}

/* Layout container */
.container{max-width:var(--container-max);margin:0 auto;padding:0 1rem}

/* =========================
   Header / Nav
   ========================= */
.site-header{background:var(--white);border-bottom:1px solid var(--card-border);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);height:72px;padding:8px 0}
.logo img{height:40px !important; max-width:140px !important; width:auto !important; display:block}

/* Desktop nav default */
.main-nav{display:flex;gap:1rem;align-items:center}
.main-nav a{color:var(--blue-700);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:6px}
.main-nav a:hover, .main-nav a:focus{background:var(--blue-100);outline:none}

/* Mobile toggle */
.nav-toggle{display:none;background:transparent;border:0;font-size:22px;color:var(--blue-500);cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center}

/* Mobile-first nav (hidden by default, shown via body.nav-open) */
.main-nav{
  display:none;
  position:fixed;
  inset:72px 0 auto 0;
  background:var(--white);
  border-top:1px solid rgba(11,111,191,0.04);
  padding:12px;
  box-shadow:0 10px 30px rgba(11,111,191,0.06);
  z-index:60;
  flex-direction:column;
  gap:8px;
  max-height:calc(100vh - 72px);
  overflow:auto;
}
.main-nav a{display:block;padding:12px 14px;border-radius:8px;color:var(--blue-700);font-weight:700}
.main-nav a.is-active, .main-nav a[aria-current="page"]{background:var(--blue-100);color:var(--blue-700)}
body.nav-open .main-nav{display:flex}
.nav-backdrop{display:none}
body.nav-open .nav-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,0.2)}

/* Desktop breakpoint */
@media(min-width:900px){
  .nav-toggle{display:none}
  .main-nav{display:flex !important;position:static;top:auto;left:auto;right:auto;background:transparent;box-shadow:none;flex-direction:row;padding:0;gap:1rem}
  .main-nav a{padding:8px 10px;border-radius:6px;font-weight:600}
  .nav-backdrop{display:none !important}
}

/* Ensure touch targets */
.main-nav a, .nav-toggle { min-height:44px; min-width:44px; }

/* =========================
   Hero / intro (grid layout for harmony)
   ========================= */
.hero{background:linear-gradient(180deg,var(--blue-100),#fff);padding:1.25rem 0}
.hero-inner{display:flex;flex-direction:column;gap:0.75rem;align-items:flex-start}
.hero p{color:var(--muted);max-width:70ch}

/* Hero landing: use grid so left block expands and right column stays compact */
.hero-landing{
  padding:48px 0;
  color:#0b2f4a;
  background-color:#efefef;
  background-size:cover;
  background-position:center;
}
.hero-landing .container{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) 260px;
  gap:28px;
  align-items:center;
  box-sizing:border-box;
  padding:18px;
}

/* Left block (logo + text) */
.hero-logo{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:flex-start;
}
.hero-logo img{
  width:180px;
  height:auto;
  border-radius:10px;
  box-shadow:0 12px 36px rgba(11,111,191,0.06);
  max-width:220px;
}
.hero-landing h1{margin:0;font-size:1.8rem;color:var(--blue-700)}
.hero-landing p{margin:8px 0 0;color:#003aae;line-height:1.45;max-width:60ch}
.hero-sub{color:#0b2f4a}

/* Right column (vertical buttons) */
.hero-landing nav[aria-label="Navigation principale"]{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-landing nav ul{
  list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;
}
.hero-landing nav ul li a.btn{display:block;text-align:center;padding:12px 10px;width:100%;box-sizing:border-box}

/* Responsive: stack on small screens */
@media(max-width:900px){
  .hero-landing .container{ grid-template-columns: 1fr; padding:12px; }
  .hero-landing nav[aria-label="Navigation principale"]{ width:100%; order:2; flex:1 1 100%; }
  .hero-logo{ order:1; width:100%; }
  .hero-logo > div{ max-width:60ch; }
}

/* Prevent inline style overflow */
.hero-landing, .hero-landing * { max-width:100%; box-sizing:border-box; }

/* =========================
   Carousel / Grid / Cards
   ========================= */
.carousel{display:grid;grid-template-columns:3fr 1fr;gap:1rem;align-items:start;margin:1rem 0}
@media (max-width:900px){.carousel{grid-template-columns:1fr}}
.carousel-card{position:relative;background:#f8fbff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.carousel-main-img{width:100%;height:100%;object-fit:cover;display:block;max-height:750px}
@media (max-width:900px){.carousel-main-img{height:260px}}

/* Thumbnails */
.thumb-stack{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:8px}
.thumb-stack img{width:64px;height:48px;object-fit:cover;border-radius:6px;border:3px solid rgba(255,255,255,0.9);cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,0.08)}
.thumb-stack img:focus{outline:3px solid var(--blue-300)}

/* Text panel */
/* Text panel */
.carousel-text{
  padding:1rem;
  background:var(--white, #fff);
  border-radius:var(--radius, 10px);
  box-shadow:var(--shadow, 0 8px 24px rgba(11,111,191,0.06));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Zone scrollable pour la description */
.carousel-text-body{
  max-height:20rem;        /* hauteur max avant scroll (ajustez selon design) */
  overflow-y:auto;
  padding-right:6px;         /* espace pour la scrollbar */
}

/* Titres et paragraphes */
.carousel-text h3{color:var(--blue-700, #0b2f4a);margin-bottom:0.5rem}
.carousel-text p{color:var(--muted, #6b7280);font-size:0.95rem;margin:0}

/* Garder le bouton visible et espacé */
.carousel-text > p{margin-top:0.75rem}

/* Scrollbar styling (WebKit) */
.carousel-text-body::-webkit-scrollbar{width:10px}
.carousel-text-body::-webkit-scrollbar-track{background:transparent}
.carousel-text-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:8px}
.carousel-text-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.18)}

/* Scrollbar for Firefox */
@supports (scrollbar-width: thin) {
  .carousel-text-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.12) transparent}
}

/* Responsive : augmenter légèrement la hauteur sur grands écrans */
@media (min-width:1100px){
  .carousel-text-body{max-height:23rem}
}


/* Carousel controls (visual) */
.carousel-list{position:relative}
.carousel-prev, .carousel-next{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:30;width:48px;height:48px;border-radius:50%;border:0;
  display:flex;align-items:center;justify-content:center;background:var(--white);color:var(--blue-700);
  box-shadow:0 6px 18px rgba(11,111,191,0.08);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s;
}
.carousel-prev:hover, .carousel-next:hover{ transform:translateY(-50%) scale(1.04); box-shadow:0 10px 26px rgba(11,111,191,0.12) }
.carousel-prev{ left:8px }
.carousel-next{ right:8px }
@media(max-width:700px){ .carousel-prev, .carousel-next{ width:40px;height:40px;background:rgba(255,255,255,0.95) } }
.carousel-item{ width:100%; }

/* =========================
   Lightbox
   ========================= */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px}
.lightbox.open{display:flex}
.lightbox-inner{max-width:1100px;width:100%;background:transparent;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox-stage{width:100%;display:flex;align-items:center;justify-content:center;position:relative}
.lightbox-img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
.lightbox-close{position:absolute;top:-12px;right:-12px;background:var(--blue-700);color:#fff;border:0;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,0.3)}
.lightbox-prev, .lightbox-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);
  color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;
  transition:background .15s, transform .08s;
}
.lightbox-prev:hover, .lightbox-next:hover{background:rgba(255,255,255,0.12);transform:translateY(-50%) scale(1.04)}
.lightbox-prev{left:8px}
.lightbox-next{right:8px}
.lightbox-thumbs{display:flex;gap:8px;overflow-x:auto;padding:6px 4px;width:100%;justify-content:center}
.lightbox-thumbs img{width:84px;height:60px;object-fit:cover;border-radius:6px;border:3px solid rgba(255,255,255,0.12);cursor:pointer;opacity:0.9}
.lightbox-thumbs img.active{border-color:var(--blue-300);opacity:1;box-shadow:0 6px 18px rgba(11,111,191,0.12)}
@media(max-width:700px){ .lightbox-img{max-height:60vh} .lightbox-thumbs img{width:64px;height:48px} }

/* =========================
   Footer
   ========================= */
.site-footer{background:#f8fbff;padding:1.5rem 0;border-top:1px solid var(--card-border);margin-top:2rem}
.footer-inner{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.footer-inner .brand img{height:40px}
.footer-inner p{color:var(--muted);margin-top:0.5rem}
.footer-links{display:flex;flex-direction:column;gap:0.5rem}
.footer-links a{color:var(--blue-700);text-decoration:none}
.site-footer .social img{display:block;height:20px;width:auto}
@media (max-width:800px){ .site-footer .footer-inner{flex-direction:column;align-items:center;text-align:center} .site-footer .footer-links{order:3} .site-footer .brand{order:1} .site-footer .social{order:2} }

/* Footer responsive tuning: ensure columns behave and center on small screens */
.site-footer .footer-inner { display:flex; gap:20px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.site-footer .brand, .site-footer .footer-links, .site-footer .footer-contact, .site-footer .social { min-width:180px; flex:1 1 220px; }
@media(max-width:800px){
  .site-footer .footer-inner{ flex-direction:column; align-items:center; text-align:center; }
  .site-footer .brand, .site-footer .footer-links, .site-footer .footer-contact, .site-footer .social { flex:none; width:100%; max-width:420px; }
  .site-footer .footer-links{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:8px 0; }
  .site-footer .social{ display:flex; justify-content:center; gap:12px; }
}
.site-footer > div:last-child { text-align:center; padding-top:12px; color:var(--muted); font-size:0.95rem; }

/* =========================
   Avis module (nettoyé et unifié)
   ========================= */
.avis-title{ text-align:center; color:var(--blue-700); margin:0 0 8px 0; font-size:1.5rem; }
.avis-carousel {
  display:flex;
  gap:12px;
  align-items:flex-start;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:8px 16px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:16px;
  scroll-padding-inline-end:16px;
  overscroll-behavior-x:contain;
  width:100%;
  box-sizing:border-box;
}
.avis-card {
  flex:0 0 auto;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  min-width:260px;
  max-width:320px;
  width:auto;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background:var(--white);
  padding:1rem;
  border-radius:10px;
  border:1px solid var(--card-border);
  box-shadow:var(--shadow);
  white-space:normal;
  word-break:break-word;
  overflow-wrap:break-word;
  vertical-align:top;
}
.avis-card .avis-stars,
.avis-card strong,
.avis-card p { display:block; margin:0 0 8px 0; word-break:break-word; overflow-wrap:break-word; white-space:normal; }
.avis-carousel::after { content:""; display:block; width:16px; flex:0 0 16px; }
.avis-carousel-wrap{width:100%;max-width:900px;margin:0 auto;padding:0 12px;box-sizing:border-box}
.avis-controls{display:flex;gap:8px;justify-content:center;margin-top:10px}
.avis-action-row{display:flex;justify-content:center;margin-top:12px}
.avis-prev, .avis-next{min-width:44px;min-height:40px;padding:8px 10px}
@media (max-width:900px){ .avis-card{min-width:200px;max-width:300px} }
@media (max-width:480px){ .avis-card{min-width:180px;max-width:240px;padding:0.85rem} }
.avis-carousel::-webkit-scrollbar{height:8px}
.avis-carousel::-webkit-scrollbar-thumb{background:rgba(11,111,191,0.12);border-radius:8px}

/* Stars & author */
.avis-card .avis-stars { color:#f59e0b;font-weight:800;font-size:1.05rem;letter-spacing:0.5px;margin-bottom:6px;display:inline-block;text-shadow:0 1px 0 rgba(0,0,0,0.04) }
.avis-card .avis-author { display:block;margin-top:4px;margin-bottom:8px;font-weight:700;color:var(--blue-700);font-size:0.98rem }
@media (max-width:480px){ .avis-card .avis-stars{font-size:1rem} .avis-card .avis-author{font-size:0.95rem} }

/* =========================
   Modal avis (formulaire)
   ========================= */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:9999; padding:20px }
.modal-inner{ background:#fff; border-radius:10px; padding:18px; width:100%; max-width:640px; box-shadow:0 12px 40px rgba(0,0,0,0.35); position:relative }
.modal-close{ position:absolute; right:12px; top:12px; background:transparent;border:0;font-size:18px;cursor:pointer }
.form-row{ margin-bottom:10px; text-align:left }
.form-row label{ display:block; font-weight:600; margin-bottom:6px }
.form-row input, .form-row textarea, .form-row select{ width:100%; padding:8px 10px; border:1px solid #e6eef6; border-radius:6px; font-size:14px }

/* =========================
   Buttons / Utilities
   ========================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:8px;border:1px solid transparent;background:var(--blue-500);color:var(--white);cursor:pointer;font-weight:600;text-decoration:none}
.btn.secondary{background:transparent;color:var(--blue-700);border:1px solid rgba(11,111,191,0.12)}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Accessibility / Focus */
a:focus, button:focus, input:focus, textarea:focus{outline:3px solid rgba(11,111,191,0.15);outline-offset:2px}

/* Images responsive */
img, picture, .hero-logo img { max-width:100%; height:auto; display:block; }

/* Debug helpers (commented) */
/* .avis-card{outline:1px dashed rgba(11,111,191,0.06)} */
/* ===== Fix mobile toggle visible + hero centering ===== */

/* Make hamburger visible by default on small screens */
.nav-toggle {
  display: flex !important;         /* visible on mobile */
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 44px;
  background: transparent;
  border: 0;
  font-size: 20px;
  cursor: pointer;
  color: var(--blue-700);
}

/* Hide toggle only on large screens */
@media (min-width: 900px) {
  .nav-toggle { display: none !important; }
}

/* Ensure main-nav is hidden by default on mobile and shown when body.nav-open */
.main-nav { display: none; }
body.nav-open .main-nav { display: flex !important; }

/* Center the left hero block on wide screens to avoid large empty center */
@media (min-width: 900px) {
  /* keep grid columns but center the left content horizontally */
  .hero-landing .container {
    grid-template-columns: minmax(320px, 1fr) 260px;
  }
  .hero-logo {
    justify-content: center;   /* center logo + text horizontally in left column */
    align-items: center;
  }
  /* keep logo and text aligned nicely */
  .hero-logo > div { max-width: 60ch; }
}

/* On small screens keep original left alignment (stacked) */
@media (max-width: 899px) {
  .hero-logo { justify-content: flex-start; }
}

/* Small polish: reduce left padding so left block doesn't hug the edge on large screens */
@media (min-width: 1100px) {
  .hero-landing .container { padding-left: 28px; padding-right: 28px; }
}
/* === Fix menu mobile visible & hero centré === */

/* Force le menu mobile à occuper toute la largeur sous le header,
   s'assurer qu'il est au-dessus des autres éléments et scrollable */
.main-nav {
  display: none; /* reste caché par défaut */
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  width: 100%;
  max-height: calc(100vh - 72px);
  overflow: auto;
  background: var(--white);
  z-index: 1200; /* au-dessus de la plupart des éléments */
  padding: 12px 16px;
  box-shadow: 0 10px 30px rgba(11,111,191,0.06);
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  gap: 8px;
}

/* When open (body.nav-open toggled by JS) */
body.nav-open .main-nav { display: flex !important; }

/* Ensure links are visible on mobile (contrast) */
.main-nav a { color: var(--blue-700); background: transparent; }

/* Backdrop must be above page but below nav to allow clicking to close */
.nav-backdrop { display: none; }
body.nav-open .nav-backdrop {
  display: block;
  position: fixed;
  inset: 72px 0 0 0;
  z-index: 1100;
  background: rgba(0,0,0,0.18);
}

/* === Hero layout: reduce le vide central sur desktop === */
/* Use a 3-column grid so the left block can be centered and not hug the edge */
.hero-landing .container {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 1fr) 260px; /* left flexible, center content, right fixed */
  gap: 28px;
  align-items: center;
  padding: 18px;
  box-sizing: border-box;
}

/* Place the hero content in the center column so it doesn't stick to the far left */
.hero-logo { grid-column: 2; display:flex; gap:18px; align-items:center; justify-content:center; }
.hero-landing nav[aria-label="Navigation principale"] { grid-column: 3; justify-self:center; }

/* On smaller screens revert to single column */
@media (max-width: 900px) {
  .hero-landing .container { grid-template-columns: 1fr; padding:12px; }
  .hero-logo { grid-column: 1; justify-content:flex-start; order:1; width:100%; }
  .hero-landing nav[aria-label="Navigation principale"] { grid-column: 1; order:2; width:100%; }
  .hero-landing nav ul li a.btn { width:100%; }
}

/* Slight padding tweak on very wide screens */
@media (min-width: 1400px) {
  .hero-landing .container { max-width: 1200px; margin: 0 auto; }
}
/* ===== Patch final : header desktop fixe + hero layout équilibré ===== */

/* 1) Desktop override : nav doit être inline, non fixe, et ne pas recouvrir la page */
@media (min-width: 900px) {
  .main-nav {
    display: flex !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex-direction: row !important;
    gap: 1rem !important;
    z-index: auto !important;
  }

  /* s'assurer que le backdrop est caché sur desktop */
  .nav-backdrop { display: none !important; }

  /* hamburger caché sur desktop */
  .nav-toggle { display: none !important; }
}

/* 2) Hero layout : colonne gauche flexible + colonne droite fixe (évite grand vide central) */
.hero-landing .container {
  display: grid;
  grid-template-columns: 1fr 320px; /* gauche flexible, droite fixe */
  gap: 28px;
  align-items: center;
  padding: 18px;
  box-sizing: border-box;
}

/* left content stays in first column */
.hero-logo { grid-column: 1; display:flex; gap:18px; align-items:center; justify-content:flex-start; }

/* right nav in second column */
.hero-landing nav[aria-label="Navigation principale"] { grid-column: 2; justify-self:center; }

/* responsive fallback (mobile) */
@media (max-width: 900px) {
  .hero-landing .container { grid-template-columns: 1fr; padding:12px; }
  .hero-logo { grid-column: 1; justify-content:flex-start; order:1; width:100%; }
  .hero-landing nav[aria-label="Navigation principale"] { grid-column: 1; order:2; width:100%; }
  .hero-landing nav ul li a.btn { width:100%; }
}

/* 3) Safety: when switching from mobile to desktop, ensure nav-open state doesn't leave nav fixed */
@media (min-width: 900px) {
  body.nav-open { /* remove any visual effect of nav-open on desktop */
    overflow: visible;
  }
  body.nav-open .main-nav { display:flex !important; position:static !important; }
}
/* === Ajustements PC : recentrage du hero + menu vertical plus large et plus proche === */

/* Limiter la largeur du container et centrer la grille pour supprimer l'espace vide central */
@media (min-width: 900px) {
  .hero-landing .container {
    max-width: 1100px;      /* centre la zone et évite que la grille s'étire sur toute la page */
    margin: 0 auto;         /* centre horizontalement */
    grid-template-columns: 1fr 340px; /* gauche flexible, droite plus large (menu) */
    gap: 20px;              /* réduire légèrement l'écart entre colonnes */
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Garder le contenu gauche aligné à gauche mais limiter sa largeur pour éviter qu'il "colle" au bord */
  .hero-logo {
    grid-column: 1;
    justify-content: flex-start;
    align-items: center;
    max-width: 820px;      /* empêche le bloc gauche de s'étaler trop */
    margin: 0;
  }

  /* Rapprocher la colonne de boutons vers la gauche (plus proche du contenu) */
  .hero-landing nav[aria-label="Navigation principale"] {
    grid-column: 2;
    justify-self: start;   /* place la colonne de boutons juste après la colonne gauche */
    width: 340px;          /* largeur fixe plus généreuse */
  }

  /* Rendre les boutons plus visibles sur desktop */
  .hero-landing nav ul li a.btn {
    padding: 14px 12px;
    font-size: 1rem;
    border-radius: 10px;
  }
}

/* Optionnel : si vous voulez le menu encore plus proche, diminuez gap ou la largeur du container */
/* === Proportions PC : gauche 35% / espace central réduit / droite 35% === */
@media (min-width: 1100px) {
  .hero-landing .container {
    max-width: 1200px;               /* largeur centrale du layout */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;

    /* 3 colonnes : gauche 35%, centre flexible (espace), droite 35% */
    grid-template-columns: 35% 1fr 35%;
    gap: 20px;                        /* petit espace entre colonnes */
    align-items: center;
  }

  /* placer le bloc logo+texte dans la colonne de gauche */
  .hero-logo {
    grid-column: 1 / 2;
    justify-content: flex-start;
    align-items: center;
    padding-right: 8px;
  }

  /* centrer le contenu principal (si vous avez un bloc central, sinon laisse vide) */
  .hero-landing .hero-center {
    grid-column: 2 / 3;
    justify-self: center;
    align-self: center;
  }

  /* menu vertical : colonne droite, largeur contrôlée et rapprochée */
  .hero-landing nav[aria-label="Navigation principale"] {
    grid-column: 3 / 4;
    justify-self: center;             /* place le menu juste après l'espace central */
    width: 100%;
    max-width: 360px;                 /* largeur du menu sur PC (ajustable) */
  }

  /* boutons : rendre la colonne menu visuellement plus présente */
  .hero-landing nav ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }
  .hero-landing nav ul li a.btn {
    padding: 14px 16px;
    font-size: 1rem;
    border-radius: 10px;
  }
}

/* fallback pour écrans moyens (entre 900 et 1100) : garder grille 1fr 320px */
@media (min-width: 900px) and (max-width: 1099px) {
  .hero-landing .container {
    grid-template-columns: 1fr 320px;
    gap: 18px;
  }
  .hero-landing nav[aria-label="Navigation principale"] { max-width: 320px; }
}
/* Desktop only: agrandir et rapprocher la colonne de boutons */
@media (min-width: 1100px) {
  /* Centre la zone et limite sa largeur pour un rendu harmonieux */
  .hero-landing .container {
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: 42% 1fr 42%; /* gauche 38% / espace central / droite 38% */
    gap: 18px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Bloc gauche : limite sa largeur pour éviter débordement */
  .hero-logo {
    grid-column: 1 / 2;
    justify-content: flex-start;
    max-width: 100%;
  }

  /* Colonne menu : occupe la 3e colonne, mais on la rapproche visuellement */
  .hero-landing nav[aria-label="Navigation principale"] {
    grid-column: 3 / 4;
    justify-self: start;    /* place la colonne juste après l'espace central */
    width: 100%;
    max-width: 420px;       /* augmente la largeur du menu sur PC */
  }

  /* Boutons : plus grands, plus espacés, meilleure lisibilité */
  .hero-landing nav ul {
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:stretch;
  }
  .hero-landing nav ul li a.btn {
    padding: 16px 18px;
    font-size: 1.15rem;
    border-radius: 12px;
  }
}