/* ============================================================
   REFLEX IA : pages du catalogue (metiers et modules)
   S appuie sur les variables de css/styles.css
   ============================================================ */

/* ---------- Menu deroulant du catalogue ---------- */
.nav-drop{position:relative}
.nav-drop>button{
  background:none;border:none;cursor:pointer;font-family:var(--font);
  font-size:.9rem;font-weight:600;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;
  padding:0;transition:color .2s;
}
.nav-drop>button::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.nav-drop>button:hover,.nav-drop.open>button{color:var(--olive)}
.nav-drop.open>button::after{transform:rotate(-135deg) translateY(-2px)}
.mega{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(-8px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);padding:26px 28px;width:min(760px,92vw);
  display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:130;
}
.nav-drop.open .mega{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega h4{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-dark);
  margin-bottom:12px;font-weight:800;
}
.mega a{
  display:flex;align-items:center;gap:10px;padding:7px 0;font-size:.9rem;
  color:var(--ink-soft);font-weight:600;transition:color .18s;
}
.mega a:hover{color:var(--olive)}
.mega a i{font-style:normal;font-size:1.05rem;width:22px;text-align:center;flex-shrink:0}
.mega .mega-tout{margin-top:10px;color:var(--olive);font-weight:800}

/* ---------- Pages du catalogue ---------- */
.page-solution .header-inner{background:rgba(255,255,255,.96)}
.page-hero{
  padding:168px 0 76px;
  background:
    radial-gradient(760px 460px at 88% 0%,rgba(210,98,44,.18),transparent 62%),
    radial-gradient(640px 420px at -4% 40%,rgba(62,107,68,.16),transparent 58%),
    linear-gradient(180deg,#F7F0E4 0%,var(--cream) 66%);
}
.fil{font-size:.82rem;color:var(--ink-mute);margin-bottom:26px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fil a{color:var(--ink-soft);font-weight:600}
.fil a:hover{color:var(--olive);text-decoration:underline}
.fil-actuel{color:var(--ink-mute)}
.page-ico{
  font-size:1.9rem;width:66px;height:66px;border-radius:20px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.3rem);max-width:840px}
.page-accroche{
  font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:600;
  color:var(--terra-dark);margin-top:16px;
}
.page-intro{margin-top:18px;font-size:1.08rem;color:var(--ink-soft);max-width:720px}
.page-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.page-prix{
  margin-top:22px;display:inline-block;font-size:.9rem;font-weight:700;color:var(--olive-dark);
  background:var(--olive-soft);border:1px solid rgba(62,107,68,.22);border-radius:999px;padding:10px 18px;
}

.split-txt{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:start}
.split-txt h2{margin-bottom:24px}
.besoins li{
  position:relative;padding-left:30px;margin-bottom:16px;font-size:1rem;color:var(--ink-soft);
}
.besoins li::before{
  content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;
  background:var(--terra-soft);border:2px solid var(--terra);
}
.encart{
  background:var(--olive-soft);border:1px solid rgba(62,107,68,.22);border-radius:var(--radius-lg);
  padding:30px 28px;position:sticky;top:110px;
}
.encart h3{margin-bottom:12px}
.encart p{font-size:.94rem;color:var(--ink-soft);margin-bottom:20px}
.source{margin-top:22px;font-size:.84rem;color:var(--ink-mute);font-style:italic}
.muted{color:var(--ink-mute);font-size:.94rem}

.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mod-card{
  display:block;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--olive);
  border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-soft);
  transition:transform .22s,box-shadow .22s,border-color .22s;color:inherit;
}
.mod-card:nth-child(2n){border-top-color:var(--terra)}
.mod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mod-ico{
  font-size:1.35rem;width:48px;height:48px;border-radius:14px;background:var(--olive-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.mod-card:nth-child(2n) .mod-ico{background:var(--terra-soft)}
.mod-card h3{font-size:1.02rem;margin-bottom:6px}
.mod-card p{font-size:.88rem;color:var(--ink-soft)}

.ref-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:900px;margin:0 auto}
.ref-card{
  display:block;background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--terra);
  border-radius:var(--radius);padding:28px;color:inherit;transition:transform .22s,box-shadow .22s;
}
.ref-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ref-card h3{margin-bottom:8px}
.ref-card p{font-size:.92rem;color:var(--ink-soft);margin-bottom:14px}
.ref-link{font-size:.88rem;font-weight:700;color:var(--olive)}

/* ---------- Page sommaire des solutions ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}

@media (max-width:1024px){
  .split-txt{grid-template-columns:1fr;gap:38px}
  .encart{position:static}
  .mod-grid,.hub-grid{grid-template-columns:repeat(2,1fr)}
  .mega{grid-template-columns:1fr}
}
@media (max-width:760px){
  .page-hero{padding:126px 0 60px}
  .mod-grid,.hub-grid,.ref-grid{grid-template-columns:1fr}
  .page-cta{flex-direction:column;align-items:stretch}
  .page-cta .btn{width:100%;justify-content:center}
  .nav-drop{width:100%}
  .nav-drop>button{font-size:1.25rem;color:var(--ink);justify-content:center;width:100%}
  .mega{
    position:static;transform:none;opacity:1;pointer-events:auto;width:100%;
    box-shadow:none;border:none;background:transparent;padding:14px 0 0;max-height:46vh;overflow:auto;
  }
  .nav-drop:not(.open) .mega{display:none}
  .mega a{font-size:1rem;justify-content:center}
  .mega h4{text-align:center}
}

/* Section references : fond creme pour ne pas coller a la section blanche suivante */
.section-refs{background:var(--cream-2)}

/* ---------- Correctif barre de navigation ----------
   L entree du catalogue s ajoute a un menu deja charge : on empeche les
   retours a la ligne et on masque les liens que le menu deroulant reprend. */
.nav-drop>button{white-space:nowrap}
@media (min-width:761px){
  .logo strong,.logo span{white-space:nowrap}
  .nav a[href="#solutions"],.nav a[href="#restaurants"]{display:none}
}
@media (max-width:1200px) and (min-width:761px){
  .nav a[href="#apps"]{display:none}
}
@media (max-width:400px){
  .logo strong{font-size:1rem}
  .logo span{display:none}
  .header-inner{gap:8px;padding:0 8px 0 14px}
  .header-actions{gap:4px}
  .lang-switch{gap:0;padding:2px}
  .lang-switch button{padding:5px 4px;font-size:.6rem}
}

/* ---------- Correctif majeur : debordement du hero sur mobile ----------
   Une piste de grille "1fr" prend pour minimum la largeur mini de son contenu.
   Ici elle gonflait a 480 px sur un ecran de 360 px : le texte etait coupe a
   droite, sans barre de defilement, masque par overflow-x:hidden du body.
   min-width:0 sur les enfants force les pistes a respecter l ecran, sans
   toucher au nombre de colonnes. */
.hero-grid>*,.resto-wrap>*,.tech-lead>*,.idea-wrap>*,.split>*,.split-txt>*,
.cards>*,.price-grid>*,.apps-grid>*,.proof-grid>*,.eco-grid>*,.site-grid>*,
.tech-grid>*,.metiers-grid>*,.lovvi-grid>*,.ia-grid>*,.timeline>*,
.human-band>*,.mod-grid>*,.hub-grid>*,.ref-grid>*,.footer-grid>*,.form-grid>*{
  min-width:0;
}
.hero-photo,.resto-photo,.tech-photo,.split-photo,.section-photo,
.site-shot,.founder-photo img,.human-band img{max-width:100%}

/* ============================================================
   HERO SOMBRE
   Le haut de page manquait d impact en creme clair. Il passe en aplat
   vert profond, comme les sections Technique et IA, pour donner le ton
   des la premiere seconde.
   ============================================================ */
.hero{
  background:
    radial-gradient(880px 560px at 84% 0%,rgba(210,98,44,.30),transparent 62%),
    radial-gradient(700px 480px at -6% 62%,rgba(127,169,126,.16),transparent 58%),
    linear-gradient(168deg,#1B3A22 0%,var(--olive-deep) 46%,#12281A 100%);
}
.hero h1{color:#fff}
.hero h1 span{color:var(--terra-light)}
.hero-sub{color:rgba(255,255,255,.82)}
.hero-note{color:rgba(255,255,255,.52)}
.hero .badge{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.20);
  color:rgba(255,255,255,.94);box-shadow:none;
}
.hero .badge::before{background:var(--olive-light)}
.hero .badge:nth-child(2n)::before{background:var(--terra-light)}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.hero .btn-primary{background:var(--terra);box-shadow:0 14px 32px rgba(0,0,0,.34)}
.hero .btn-primary:hover{background:var(--terra-dark)}
.hero-photo{box-shadow:0 34px 80px rgba(0,0,0,.45)}
.hero .mock{box-shadow:0 22px 55px rgba(0,0,0,.38)}

/* Le bandeau blanc du menu se detache mieux sur fond sombre */
.header-inner{box-shadow:0 10px 34px rgba(0,0,0,.16)}

/* Meme traitement sur les pages du catalogue */
.page-hero{
  background:
    radial-gradient(820px 520px at 86% 0%,rgba(210,98,44,.28),transparent 62%),
    radial-gradient(640px 440px at -6% 58%,rgba(127,169,126,.14),transparent 58%),
    linear-gradient(168deg,#1B3A22 0%,var(--olive-deep) 48%,#12281A 100%);
}
.page-hero h1{color:#fff}
.page-accroche{color:var(--terra-light)}
.page-intro{color:rgba(255,255,255,.82)}
.fil{color:rgba(255,255,255,.45)}
.fil a{color:rgba(255,255,255,.78)}
.fil a:hover{color:#fff}
.fil-actuel{color:rgba(255,255,255,.45)}
.page-ico{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20);box-shadow:none}
.page-prix{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#fff;
}
.page-hero .btn-primary{background:var(--terra);box-shadow:0 14px 32px rgba(0,0,0,.34)}
.page-hero .btn-primary:hover{background:var(--terra-dark)}
.page-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.page-hero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ============================================================
   CARROUSEL DES REALISATIONS
   La grille .site-grid devient une piste a defilement horizontal.
   Sans JavaScript elle reste une grille lisible.
   ============================================================ */
.carrousel{position:relative;margin:0 -8px}
.carrousel-piste{
  display:grid!important;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 48px) / 3);
  grid-template-columns:none!important;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:8px;
  scrollbar-width:none;
  cursor:grab;
}
.carrousel-piste::-webkit-scrollbar{display:none}
.carrousel-piste.saisi{cursor:grabbing;scroll-behavior:auto}
.carrousel-piste>*{scroll-snap-align:start}
.carrousel-piste .site-card:hover{transform:translateY(-4px)}

.carrousel-barre{
  display:flex;align-items:center;justify-content:center;gap:20px;margin-top:30px;
}
.carrousel-fleche{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--line-strong);background:var(--white);color:var(--ink);
  font-size:1.15rem;line-height:1;cursor:pointer;transition:.2s;
  display:flex;align-items:center;justify-content:center;
}
.carrousel-fleche:hover:not(:disabled){background:var(--olive);border-color:var(--olive);color:#fff}
.carrousel-fleche:disabled{opacity:.3;cursor:default}
.carrousel-points{display:flex;gap:8px;align-items:center}
.carrousel-point{
  width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:var(--line-strong);transition:.25s;
}
.carrousel-point.actif{background:var(--terra);width:26px;border-radius:99px}

@media (max-width:1024px){
  .carrousel-piste{grid-auto-columns:calc((100% - 24px) / 2)}
}
@media (max-width:760px){
  .carrousel-piste{grid-auto-columns:88%;gap:16px}
  .carrousel-barre{gap:14px;margin-top:24px}
  .carrousel-fleche{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .carrousel-piste{scroll-behavior:auto}
}