/* lot 1 */
:root{
  --focus-ring:var(--green-2);
}
/* ==========================================================================
   Agence B-LIGHT — Accueil
   Styles propres à la page d'accueil (charte claire, tokens dans site.css) :
   hero slider, grille solutions, focus Eco Innov, agences, usines, marques,
   expertise, actualités. Le bloc contact et le footer viennent de site.css.
   ========================================================================== */

/* Header : la nav de l'accueil compte six liens, on resserre un peu avant 1100px */
@media (min-width:901px) and (max-width:1100px){
  .site-nav{gap:16px}
  .site-nav a{font-size:var(--fs-13)}
}

/* --------------------------------------------------------------------------
   Hero — slider plein écran des réalisations
   -------------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;background:var(--dark-3);
  min-height:640px;display:flex;align-items:flex-end;
}
.hero__slides{position:absolute;inset:0;pointer-events:none}
.hero__slide{
  position:absolute;inset:0;background:#0c1410;
  opacity:0;transform:scale(1);
  transition:opacity .9s ease,transform 7s linear;
  will-change:opacity,transform;
}
.hero__slide--navy{background:#0a1018}
.hero__slide.is-active{opacity:1;transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
  .hero__slide.is-active{transform:none}
}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__slide--top .hero__img{object-position:center top} /* mâts entiers : on garde le haut de la photo */
.hero__sep[hidden]{display:none}
.hero__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,16,25,.92) 0%,rgba(10,16,25,.6) 40%,rgba(10,16,25,.16) 72%,rgba(10,16,25,.04) 100%);
}
.hero__veil--bottom{
  background:linear-gradient(to top,rgba(8,13,20,.9) 0%,rgba(8,13,20,.3) 32%,transparent 58%);
}
.hero__content{position:relative;width:100%;padding-top:88px;padding-bottom:36px}
.hero__eyebrow{
  font-family:var(--mono);font-size:var(--fs-12);letter-spacing:.16em;color:var(--lime);
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.hero__eyebrow::before{content:"";width:22px;height:1px;background:currentColor;display:inline-block}
.hero__title{
  font-family:var(--display);font-weight:800;font-size:clamp(36px,4.8vw,60px);
  line-height:1.02;letter-spacing:-.02em;color:#fff;margin:0 0 24px;max-width:20ch;
  text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.45);
}
.hero__hl{color:var(--green-lighter)}
.hero__lead{font-size:var(--fs-16);line-height:1.6;color:rgba(255,255,255,.82);max-width:50ch;margin:0 0 30px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}

/* lot 3 : les chiffres clés quittent le hero pour le bandeau .stats de site.css (3 valeurs) */
.stats__grid{grid-template-columns:repeat(3,1fr)}

/* barre d'infos translucide */
.hero__bar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:rgba(9,15,23,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card-sm);padding:16px 20px;
}
.hero__info{display:flex;flex-direction:column;gap:8px;min-width:0}
.hero__info-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero__badge{
  display:inline-block;font-family:var(--mono);font-size:var(--fs-11);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);color:#fff;background:var(--green-2);
}
.hero__badge--centre{background:var(--centre)}
.hero__count{font-family:var(--mono);font-size:var(--fs-11);color:rgba(255,255,255,.6);letter-spacing:.06em}
.hero__name{font-family:var(--display);font-size:var(--fs-20);font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.15}
.hero__meta{font-family:var(--mono);font-size:var(--fs-12);color:rgba(255,255,255,.68)}
.hero__stat{color:#cfe287}

.hero__controls{display:flex;align-items:center;gap:12px}
.hero__arrow{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-18);line-height:1;padding:0;
  transition:background .2s;
}
.hero__arrow:hover{background:rgba(255,255,255,.18)}
.hero__dots{display:flex;align-items:center;gap:2px}
.hero__dot{
  width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.hero__dot::before{content:"";width:7px;height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.38);transition:all .25s}
.hero__dot.is-active{width:36px}
.hero__dot.is-active::before{width:22px;background:var(--green-light)}
.hero__pause{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.hero__pause:hover{background:rgba(255,255,255,.18)}
.hero__pause svg{width:14px;height:14px;fill:currentColor}
.hero__pause .ico-play{display:none}
.hero__pause.is-paused .ico-pause{display:none}
.hero__pause.is-paused .ico-play{display:block}
.hero__pause[hidden]{display:none}

/* --------------------------------------------------------------------------
   Nos solutions — 10 univers
   -------------------------------------------------------------------------- */
.solutions{background:var(--bg)}
.solutions__inner{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.solutions__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:18px}
.solutions__grid > .univers{grid-column:span 2}
/* 10 tuiles sur 4 colonnes : la dernière ligne (2 tuiles) est centrée */
.solutions__grid > .univers:nth-child(9){grid-column:3/5}
.solutions__grid > .univers:nth-child(10){grid-column:5/7}
.univers{
  position:relative;display:flex;flex-direction:column;gap:16px;padding:24px;
  border-radius:var(--r-card-sm);border:1px solid var(--line);background:#fff;text-decoration:none;
  box-shadow:var(--shadow-card);color:inherit;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.univers:hover{border-color:var(--green-light);transform:translateY(-3px);box-shadow:0 18px 32px -18px rgba(44,58,77,.32)}
.univers__icon{
  width:46px;height:46px;border-radius:12px;background:var(--bg-3);color:var(--navy-2);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.univers__icon svg{width:24px;height:24px}
.univers__title{font-family:var(--display);font-size:var(--fs-18);font-weight:700;color:var(--ink);margin:0 0 4px;letter-spacing:-.01em}
.univers__desc{font-size:var(--fs-14);color:var(--muted);margin:0;line-height:1.5}
.univers__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.univers__brands{font-family:var(--mono);font-size:var(--fs-12);color:var(--green-2);font-weight:500}

/* --------------------------------------------------------------------------
   Focus produit — Eco Innov (fond sombre)
   -------------------------------------------------------------------------- */
.focus{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.focus::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 88% 50%,rgba(165,194,61,.16),transparent 55%);
}
.focus__inner{
  position:relative;padding-top:var(--section-y);padding-bottom:var(--section-y);
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.focus__eyebrow{margin-bottom:16px}
.focus__star{font-size:var(--fs-13);letter-spacing:0}
.focus__title{
  font-family:var(--display);font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.02em;
  color:#fff;margin:0 0 16px;line-height:1.04;
}
.focus__title em{font-style:normal;color:var(--green-lighter)}
.focus__text{font-size:var(--fs-16);line-height:1.6;color:rgba(255,255,255,.74);max-width:48ch;margin:0 0 24px}
.focus__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.focus__chips .chip{letter-spacing:0}
.focus__cta{border-radius:10px}
.focus__media{
  position:relative;border-radius:var(--r-card);overflow:hidden;min-height:340px;background:#131c14;
  box-shadow:var(--shadow-media);
}
.focus__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.focus__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,12,8,.5),transparent 40%);
}
.focus__media .photo-cap{z-index:1}

.focus__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.focus__link{font-family:var(--mono);font-size:var(--fs-13);font-weight:600;color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(195,216,110,.45)}
.focus__link:hover{color:#fff;border-color:#fff}

/* --------------------------------------------------------------------------
   Les agences — carte territoriale (iframe)
   -------------------------------------------------------------------------- */
.agences{background:var(--bg);border-top:1px solid var(--line)}
.agences__inner{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.agences__head{max-width:64ch;margin-bottom:36px}
.agences__head .eyebrow{gap:8px}
.agences__head .section-title{margin-bottom:12px}
.agences__lead{font-size:var(--fs-16);color:var(--muted);margin:0;line-height:1.6}
.agences__iframe{
  width:100%;height:480px;border:0;display:block;overflow:hidden;
  border-radius:var(--r-card-sm);background:#EAEEF1;
}

/* --------------------------------------------------------------------------
   Nos sites de production — carte des usines (iframe, fond sombre)
   -------------------------------------------------------------------------- */
.usines{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.usines::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 110% at 88% 0%,rgba(165,194,61,.14),transparent 55%);
}
.usines__inner{position:relative;padding-top:var(--section-y);padding-bottom:var(--section-y)}
.usines__head{max-width:64ch;margin-bottom:24px}
.usines__head .section-title{color:#fff;margin-bottom:12px}
.usines__head .eyebrow{color:var(--lime)}
.usines__lead{font-size:var(--fs-16);color:rgba(255,255,255,.74);margin:0;line-height:1.6}
.usines__frame{
  position:relative;overflow:hidden;border-radius:var(--r-card-sm);background:#EAEEF1;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-media);
}
.usines__iframe{width:100%;height:520px;border:0;display:block;overflow:hidden}

/* --------------------------------------------------------------------------
   Nos marques — 12 logos
   -------------------------------------------------------------------------- */
.marques{background:#fff;border-top:1px solid var(--line)}
.marques__inner{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.marques__note{font-size:var(--fs-13);color:var(--muted);max-width:30ch;margin:0}
/* 13 marques : flex centré, la dernière rangée reste centrée quel que soit le nombre de colonnes */
.marques__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.marques__grid > .marque{flex:0 0 calc((100% - 3*16px)/4)}
.marque{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:144px;padding:24px;border-radius:var(--r-card-sm);background:var(--ink);
  transition:background .18s;
}
.marque:hover{background:#27384c}
.marque__logo{max-width:84%;max-height:78px;object-fit:contain;display:block} /* lot 2 : place pour le badge à 11 px */
.marque__logo--h66{max-height:66px}
.marque__logo--h60{max-height:60px}
.marque__logo--h52{max-height:52px}
.marque__logo--h40{max-height:40px}
.marque__logo--h38{max-height:38px}
.marque__logo--h34{max-height:34px}
.flag{
  position:absolute;top:11px;left:11px;display:flex;width:21px;height:14px;border-radius:2px;
  overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.28);
}
.flag span{flex:1}
.flag--fr span:nth-child(1){background:#0055A4}
.flag--fr span:nth-child(2){background:#fff}
.flag--fr span:nth-child(3){background:#EF4135}
.flag--es{flex-direction:column}
.flag--es span:nth-child(1){background:#AA151B}
.flag--es span:nth-child(2){background:#F1BF00;flex:2}
.flag--es span:nth-child(3){background:#AA151B}
.flag--de{flex-direction:column}
.flag--de span:nth-child(1){background:#000}
.flag--de span:nth-child(2){background:#DD0000}
.flag--de span:nth-child(3){background:#FFCE00}
/* lot 3 : badge agence = .badge-ouest de site.css ; variante « OUEST + CENTRE » sur fond sombre */
.marque{--badge-both-ink:rgba(255,255,255,.6);--badge-both-bg:rgba(255,255,255,.07);--badge-both-line:rgba(255,255,255,.16)}
.marque .badge-ouest--corner{top:11px;right:11px}

/* --------------------------------------------------------------------------
   Notre expertise — 3 cartes + bandeau 04
   -------------------------------------------------------------------------- */
.expertise{background:var(--bg);border-top:1px solid var(--line)}
.expertise__inner{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.expertise__head{max-width:60ch;margin-bottom:42px}
.expertise__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px}
.expert--link{display:block;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s,box-shadow .25s}
.expert--link:hover{transform:translateY(-3px);border-color:var(--green-light);box-shadow:0 18px 40px -24px rgba(0,0,0,.35)}
.expert{padding:28px;border-radius:var(--r-card-sm);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.expert__num{font-family:var(--mono);font-size:var(--fs-13);font-weight:600;color:var(--green-light)}
.expert__title{font-family:var(--display);font-size:var(--fs-20);font-weight:700;color:var(--ink);margin:14px 0 8px;letter-spacing:-.01em;line-height:1.15}
.expert__desc{font-size:var(--fs-14);color:var(--muted);margin:0 0 18px;line-height:1.55}
.expert__tag{
  display:inline-block;font-family:var(--mono);font-size:var(--fs-11);letter-spacing:.06em;color:var(--green-2);
  background:var(--chip-bg);padding:6px 12px;border-radius:var(--r-tag);
}
.expertise__band{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:24px 28px;border-radius:var(--r-card-sm);background:var(--navy-2);color:#fff;
}
.expertise__band-text{display:flex;align-items:center;gap:14px}
.expertise__band-num{font-family:var(--mono);font-size:var(--fs-13);font-weight:600;color:var(--lime)}
.expertise__band-title{font-family:var(--display);font-size:var(--fs-20);font-weight:700;letter-spacing:-.01em}
.expertise__band-cta{
  font-family:var(--sans);font-weight:700;font-size:var(--fs-14);color:var(--green-ink);background:var(--green-light);
  padding:12px 18px;border-radius:var(--r-btn-sm);text-decoration:none;transition:background .2s;
}
.expertise__band-cta:hover{background:var(--green-btn-hover)}

/* --------------------------------------------------------------------------
   Actualités — 3 cartes
   -------------------------------------------------------------------------- */
.actus{background:#fff;border-top:1px solid var(--line)}
.actus__inner{padding-top:var(--section-y);padding-bottom:var(--section-y)}
/* carrousel : 3 cartes + amorce de la 4e (desktop), 2 (tablette), 1,15 (mobile) ; scroll-snap natif */
.actus__carousel{position:relative}
.actus__track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:6px 0 10px;margin:-6px 0 0;scroll-padding-left:0;
}
.actus__track::-webkit-scrollbar{display:none}
.actus__track:focus-visible{outline:3px solid var(--green-2);outline-offset:4px;border-radius:8px}
.actus__track > .actu{flex:0 0 calc((100% - 2*20px)/3.3);scroll-snap-align:start}
.actus__nav{display:flex;align-items:center;gap:12px;margin-top:20px}
.actus__progress{flex:1;height:3px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.actus__progress-bar{display:block;height:100%;width:30%;background:var(--green-light);border-radius:var(--r-pill);transition:width .25s}
.actus__arrow{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-18);line-height:1;padding:0;transition:background .2s,border-color .2s;
}
.actus__arrow:hover{border-color:var(--green-light);background:var(--chip-bg)}
.actus__arrow:disabled{opacity:.35;cursor:default}
.actus__more{display:inline-block;margin-top:18px}
.actu{
  display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r-card-sm);overflow:hidden;
  border:1px solid var(--line);background:#fff;color:inherit;
  transition:transform .22s,box-shadow .22s;
}
.actu:hover{box-shadow:0 16px 32px -20px rgba(44,58,77,.35);transform:translateY(-3px)}
.actu__media{height:172px;position:relative;display:block;background:#101720;overflow:hidden}
.actu__img{width:100%;height:100%;object-fit:cover}
.actu__media--grad{
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1.5px,transparent 1.5px 26px),
    radial-gradient(120% 80% at 75% 12%,rgba(255,255,255,.1),transparent 55%),
    linear-gradient(155deg,#2f4a66,#22364b);
}
.actu__cat{
  position:absolute;top:13px;left:13px;font-family:var(--mono);font-size:var(--fs-11);font-weight:600;
  letter-spacing:.08em;color:var(--green-ink);background:var(--green-light);padding:4px 8px;border-radius:var(--r-tag);
}
.actu__body{display:flex;flex-direction:column;gap:10px;padding:20px}
.actu__title{font-family:var(--display);font-size:var(--fs-18);font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.actu__date{font-family:var(--mono);font-size:var(--fs-11);color:var(--muted-2);letter-spacing:.04em}

/* --------------------------------------------------------------------------
   Contact — compléments (le bloc vient de site.css)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .hero{min-height:560px}
  .hero__content{padding-top:64px;padding-bottom:28px}
  .expertise__grid{grid-template-columns:repeat(2,1fr)}
  .actus__track > .actu{flex-basis:calc((100% - 20px)/2.15)}
  .solutions__grid > .univers,.solutions__grid > .univers:nth-child(9),.solutions__grid > .univers:nth-child(10){grid-column:span 4}
  .marques__grid > .marque{flex-basis:calc((100% - 2*16px)/3)}
  .focus__inner{grid-template-columns:1fr;gap:32px}
  .focus__media{min-height:280px}
  .agences__iframe{height:420px}
  .usines__iframe{height:440px}
}
@media (max-width:560px){
  .hero{min-height:0}
  .hero__content{padding-top:56px}
  .hero__bar{align-items:flex-start;flex-direction:column}
  .expertise__grid{grid-template-columns:1fr}
  .actus__track{gap:14px}
  .actus__track > .actu{flex-basis:calc(100%/1.15)}
  .solutions__grid > .univers,.solutions__grid > .univers:nth-child(9),.solutions__grid > .univers:nth-child(10){grid-column:span 8}
  .marques__grid{gap:12px}
  .marques__grid > .marque{flex-basis:calc((100% - 12px)/2)}
  .marque{height:124px;padding:20px}
  .agences__iframe{height:360px;border-radius:12px}
  .usines__iframe{height:380px}
  .usines__frame{border-radius:12px}
  .expertise__band{padding:20px 24px}
}

/* Accessibilité (lot 1) */
.hero,.focus,.usines{--focus-ring:var(--green-lighter)}