:root{
  --clr-primary:#D00000;
  --clr-secondary:#003049;
  --clr-accent:#F48C06;
  --clr-neutral:#E8E8E8;
  --clr-dark:#1D1D1D;
  --clr-light:#FFFFFF;
  --radius:.85rem;
  --shadow:0 8px 24px rgba(0,0,0,.12);
  --max-w:1100px;
  --f-fluid:clamp(1rem,1vw+.8rem,1.15rem);
}

/* ------ Dark-mode palette overrides ------ */
@media (prefers-color-scheme:dark){
  :root{
    --clr-light:#121212;
    --clr-dark:#F3F3F3;
    --clr-neutral:#2A2A2A;
  }
}

/* ------ Reset & base ------ */
*,*::before,*::after{box-sizing:border-box;}

html,
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--f-fluid);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ------ Full-page fixed gradient background ------ */
body{
  color:var(--clr-dark);
  position:relative;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:linear-gradient(135deg,var(--clr-secondary) 0%,#01263a 100%);
}

@media (min-width:1100px){
  body{
    width:var(--max-w);
    margin:0 auto;
  }
}

/* ------ Generic links ------ */
a{color:var(--clr-primary);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ------ Language toggling ------ */
.lang-en{display:none;}
html[data-lang="en"] .lang-fr{display:none;}
html[data-lang="en"] .lang-en{display:inline;}

/* drapeau : déjà présent, on garde */
.flag{font-size:1.15rem;line-height:1;}

.lang-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.35rem .75rem;
  border:none;
  border-radius:var(--radius);
  background:var(--clr-neutral);
  font-weight:600;
  color:var(--clr-primary);
  cursor:pointer;
}

.lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + .4rem);
  min-width:140px;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 8px 18px rgba(0,0,0,.15);
  list-style:none;
  padding:.4rem 0;
  margin:0;
  display:none;
  z-index:50;
}

.lang-menu a{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .9rem;
  color:var(--clr-dark);
  font-weight:600;
  text-decoration:none;
}
.lang-menu a:hover{background:var(--clr-neutral);}

/* déjà présent : .lang-menu{display:none;} */
.lang-dropdown[aria-expanded="true"] .lang-menu{
  display:block;
}

/* =====================================================
   HEADER
   ===================================================== */
/* header */
.header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.92);
  transition:box-shadow .3s;
  overflow:visible;      /* ← NE PAS cacher ce qui dépasse */
}

/* menu langue au-dessus de tout */
.lang-menu{
  /* ...vos règles existantes... */
  z-index:9999;          /* ← passe devant la barre blanche */
}
.header.scrolled{box-shadow:0 2px 14px rgba(0,0,0,.08);}

.header__inner{
  max-width:var(--max-w);
  margin:auto;
  padding:.7rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.header__logo img{height:32px;width:auto;}

.header__burger{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  cursor:pointer;
}
.header__burger span{
  width:24px;
  height:2px;
  background:var(--clr-dark);
  transition:transform .3s;
}

.header__nav{display:none;}
.header__nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  text-align:center;
}

.header__tools{
  display:flex;
  align-items:center;
  gap:.6rem;
}
#langSelect,
#themeToggle{
  border:none;
  border-radius:var(--radius);
  padding:.3rem .6rem;
  background:var(--clr-neutral);
  cursor:pointer;
}

@media (min-width:768px){
  .header__burger{display:none;}
  .header__nav{display:block;}
  .header__nav ul{flex-direction:row;}
}

/* --- NAVIGATION : évite les retours à la ligne dans chaque lien --- */
.header__nav a{
  white-space:nowrap;          /* "Nos engagements" reste sur une seule ligne */
}

/* --- Ajustements pour la tranche 768 – 1020 px --- */
@media (min-width:768px) and (max-width:1020px){
  .header__nav ul{
    gap:.75rem;                /* espace un peu réduit entre les items */
  }
  .header__nav a{
    font-size:.95rem;          /* texte légèrement plus petit */
  }
}

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:28vh;
  padding:3rem 1rem 0;
  text-align:center;
  color:var(--clr-light);
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 70%);
  z-index:-1;
}

.hero__blob{
  position:absolute;
  width:480px;
  height:480px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--clr-accent),transparent 60%);
  filter:blur(110px);
  top:-150px;
  left:-120px;
  animation:blob 18s infinite alternate ease;
  z-index:-2;
}
@keyframes blob{
  to{transform:scale(1.25) translate(50px,40px);}
}

.hero__title{
  font-size:clamp(2rem,4vw+1rem,2.75rem);
  margin:0 0 .9rem;
  font-weight:800;
  line-height:1.15;
}
.hero__tagline{
  margin:0 0 1.6rem;
  font-size:1.15rem;
  opacity:.9;
}

.btn{
  display:inline-block;
  padding:.75rem 1.5rem;
  border-radius:var(--radius);
  background:var(--clr-accent);
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:transform .18s,box-shadow .18s;
  margin-top: 2rem;
}
.btn:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.btn:active{transform:scale(.95);}
.btn--primary{background:var(--clr-primary);}

/* Divider wave glued to hero bottom */
.divider{
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:100px;
  pointer-events:none;
}
.divider--flip{transform:scaleY(-1);}

/* =====================================================
   SECTIONS & TYPO
   ===================================================== */
section{padding:3.5rem 1rem;}

section>h2{
  text-align:center;
  font-size:1.85rem;
  margin:0 0 2rem;
  color:var(--clr-primary);
  letter-spacing:-.3px;
}

.section--alt{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(4px);
  border-radius: var(--radius);
  margin-top: 2rem;
}

.about p{
  text-align:center;
  max-width:700px;
  margin:auto;
  font-size:1.12rem;
}

/* =====================================================
   CARDS – PRODUCTS
   ===================================================== */
.products__grid{
  display:grid;
  gap:1.4rem;
  grid-template-columns:1fr;              /* mobile = 1 */
}
@media (min-width:600px){
  .products__grid{grid-template-columns:repeat(2,1fr);}  /* tablette = 2 */
}
@media (min-width:900px){
  .products__grid{grid-template-columns:repeat(4,1fr);}  /* desktop = 4 */
}
/* tuiles pleine hauteur + boutons collés en bas */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:2rem 1.25rem;
  border-radius:var(--radius);
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(14px);
  color:var(--clr-dark);
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.165,.84,.44,1);
  margin-top: auto;
}
.card .btn{
  margin-top:auto;
  align-self:flex-start;
}
.card h3{margin:0 0 .8rem;font-size:1.23rem;}
.card p{margin:0 0 1.15rem;opacity:.95;}

.tilt:hover{
  transform:perspective(800px) rotateX(6deg) rotateY(-6deg) scale(1.03);
}

/* =====================================================
   PLATFORMS
   ===================================================== */
.platforms__grid{
  display:grid;
  gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.platforms__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  padding:1.6rem;
  border-radius:var(--radius);
  color:#fff;
  font-weight:600;
  position:relative;
  overflow:hidden;
  text-align:center;
}

.platforms__card h3{
  margin:0;
  font-size:1.15rem;
  letter-spacing:-.2px;
}

.platforms__card a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin:.1rem 0;
  padding:.45rem .75rem;
  border-radius:var(--radius);
  background:rgba(255,255,255,.18);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:transform .15s ease;
}
.platforms__card a:hover{transform:translateY(-2px);}

.gradient::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(145deg,var(--clr-primary) 0%,var(--clr-accent) 40%,#ffba08 100%);
  opacity:.85;
  z-index:-1;
}

/* Flag size helper */
.flag{font-size:1.1rem;line-height:1;}

/* =====================================================
   NEWS
   ===================================================== */
.news__list{
  display:grid;
  gap:1.2rem;
}
.news__item{
  padding:1.3rem;
  border-radius:var(--radius);
  background:var(--clr-neutral);
  box-shadow:var(--shadow);
  text-align:center;
  font-weight:500;
  position:relative;
  overflow:hidden;
}

/* shimmer placeholder */
.news__item.shimmer::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:shimmer 2.8s infinite;
}
@keyframes shimmer{
  to{transform:translateX(100%);}
}

/* ===== ENGAGEMENTS ===== */

/* bloc gris clair avec coins adoucis + ombre légère */
/* --- Commitments section : no grey panel --- */
.section--alt_eng{
  background:none;         /* supprime le fond gris */
  backdrop-filter:none;    /* annule le voile blur (facultatif) */
}

/* grille : 1 colonne mobile / 2 colonnes ≥700 px */
.products__grid_eng{
  display:grid;
  gap:1.6rem;
  grid-template-columns:1fr;
}
@media (min-width:700px){
  .products__grid_eng{grid-template-columns:repeat(2,1fr);}
}

/* carte : glassmorphism + animation tilt */
.card.tilt_eng{
  position:relative;
  padding:2rem 1.5rem;
  border-radius:var(--radius);
  background:rgb(255, 255, 255);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease;
}
.card.tilt_eng h3{
  margin:0 0 1rem;
  font-size:1.25rem;
  color:var(--clr-primary);
  letter-spacing:-.2px;
}
.card.tilt_eng ul{
  margin:0 0 1.25rem;
  padding-left:1.1rem;
}
.card.tilt_eng:hover{
  transform:perspective(800px) rotateX(4deg) rotateY(-4deg) scale(1.02);
  box-shadow:0 14px 26px rgba(0,0,0,.18);
}

/* bouton CTA plus visible */
.btn_eng{
  display:inline-block;
  padding:.65rem 1.4rem;
  border-radius:var(--radius);
  background:var(--clr-accent);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 3px 9px rgba(0,0,0,.15);
  transition:transform .18s,box-shadow .18s;
}
.btn_eng:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

/* --- Commitments buttons : same width everywhere --- */
.commitments .btn,
.commitments .btn_eng{
  display:inline-block;   /* stop filling the full card width              */
  width:auto;             /* auto-size to text                             */
  min-width:160px;        /* optionnel : même largeur de base pour l’œil   */
  text-align:center;
}

/* --- uniform button width inside the “commitments” section --- */
#commitments_eng .card a{
  display:inline-block;   /* stop stretching to full row            */
  width:auto;             /* shrink to content                      */
  min-width:160px;        /* common base width for all four buttons */
  text-align:center;
}

/* --- Commitments : tous les boutons identiques ------------- */
#commitments_eng .card .btn_eng{
  display:inline-flex !important;   /* annule le display:block résiduel      */
  width:auto        !important;     /* stoppe le width:100% hérité           */
  min-width:160px;                  /* même largeur mini que les autres      */
  align-self:flex-start;            /* reste collé à gauche dans la carte    */
  white-space:nowrap;               /* pas de retour à la ligne sur le texte */
}

/* =====================================================
   CONTACT
   ===================================================== */
/* contact list centred */
.contact__info{
  list-style:none;
  padding:0;
  margin:0 0 1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  font-size:1.05rem;
}

.contact__info li{
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* icon sizing */
.icon{
  width:20px;
  height:20px;
  flex-shrink:0;
  color:var(--clr-primary);
}
/* iframe map */
.contact iframe{
  border-radius:var(--radius);
  margin-top:1.5rem;
  box-shadow:var(--shadow);
  width:100%;
}

/* =====================================================
   FOOTER
   ===================================================== */
/* Wave du haut du footer en absolu derrière le contenu */
.footer{
  background:var(--clr-secondary);
  color:#fff;
  padding:6rem 1rem 2rem;   /* +2.5rem de marge haute pour libérer la vague */
  position:relative;
  margin-top: 2rem;
}
.footer .divider{
  position:absolute;
  top:-1px;
  left:0;
  width:100%;
  height:100px;
  pointer-events:none;
  z-index:-1;               /* derrière les textes du footer */
}
.footer__top{
  max-width:var(--max-w);
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:2.2rem;
  align-items:center;
}
.footer__top ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1.3rem;
}
.footer__top a{color:#fff;}
.footer__social a{margin:0 .6rem;font-size:1.4rem;}
.footer__copy{
  text-align:center;
  margin-top:1.8rem;
  font-size:.9rem;
}

/* =====================================================
   REVEAL ON SCROLL
   ===================================================== */
@media (prefers-reduced-motion:no-preference){
 }