/* ===== Variables & reset ===== */
:root{ --max:72rem; --gap:1rem; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:auto; min-height:100%; overflow:auto; }

/* ===== Base ===== */
body{
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#fff;
  text-align:center;
  overflow-x:hidden; /* évite le scroll horizontal */
  position: relative; /* pour le pseudo-élément */
  text-shadow:0 2px 6px rgba(0,0,0,1);
text-shadow:
    1px 1px 2px black,
   -1px 1px 2px black,
    1px -1px 2px black,
   -1px -1px 2px black; 
}

/* Fond fixe derrière, contenu qui scroll — version robuste */
body::before{
  content:"" !important ;
  position:fixed; inset:0;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,1.2)),
    url("/assets/background.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0; pointer-events:none;
}
.site-head, .page, .site-foot{
  position: relative;
  z-index: 1; /* passe au-dessus du fond */
}

/* Médias fluides */
img,video{ max-width:100%; height:auto; display:block; }



/* image au milieu de la page dans la main page */

main.page figure {
  display: flex;
  flex-direction: column;
  align-items: center; /* centre horizontalement */
  text-align: center;  /* centre le texte de la légende */
}

main.page figure img {
  max-width: 100%; /* évite que ça déborde */
  height: auto;
}




/* ===== Layout contenu ===== */
.page{ max-width:var(--max); margin-inline: auto; padding:clamp(1rem,4vw,3rem) 1rem; }
.page {
  padding-top: 60px;
}
@media (min-width: 1200px){
  .page { max-width: 90rem; } /* plus large sur desktop */
}


.section{ margin-block:clamp(1rem,3vw,3rem); }

/* Logo principal */
.logo{
  margin:clamp(.5rem,2vw,1rem) auto;
  width:clamp(160px,22vw,200px);
  height:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Logo dans le header */
.brand img { display:none; }
@media (min-width: 769px) {
  .brand img { display:inline; }
}

/* Prose */
.prose{ max-width:65ch; margin-inline:auto; text-align:left; }
.prose p{ margin:0 0 1em 0; text-shadow:0 2px 6px rgba(0,0,0,1);
text-shadow:
    1px 1px 2px black,
   -1px 1px 2px black,
    1px -1px 2px black,
   -1px -1px 2px black; }
   
   @media (max-width: 900px) {
  .prose {
    padding-inline: 1rem;
  }
}


/* ===== Titres ===== */
h1{
  font-size:clamp(1.6rem,5vw,2rem);
  line-height:1; margin:0 0 .5em 0;
  text-wrap:balance; text-shadow:0 2px 8px rgba(0,0,0,.4);
  font-weight:700;
    text-shadow:0 2px 6px rgba(0,0,0,1);
text-shadow:
    1px 1px 2px black,
   -1px 1px 2px black,
    1px -1px 2px black,
   -1px -1px 2px black; 
}
h2{
  font-size:clamp(1.2rem,3.6vw,1.5rem);
  line-height:1; margin:0 0 .35em 0;
  text-wrap:balance; text-shadow:0 2px 8px rgba(0,0,0,.4);
  font-style:italic; font-weight:normal;
  max-width:50ch; margin-left:auto; margin-right:auto;
    text-shadow:0 2px 6px rgba(0,0,0,1);
text-shadow:
    1px 1px 2px black,
   -1px 1px 2px black,
    1px -1px 2px black,
   -1px -1px 2px black; 
}




/* ===== Légendes ===== */
figcaption {
  font-size: .9rem;
  opacity: .85;
  margin-top: .3rem;
  text-align: center;
  font-style: italic; 
}





/* ===== Grille utilitaire ===== */
.grid{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:768px){
  .grid.cols-2{ grid-template-columns:1fr 1fr; }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
}

/* ===== Header / Nav ===== */
/* mobile d'abord */
.site-head{
  position:fixed; top:0; left:0; right:0; width:100%;
  z-index:10;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: rgba(0,0,0,.3); /* barre pleine largeur */
}

.nav{
  display:flex; align-items:center; gap:.5rem;
  max-width:var(--max); margin:auto; padding:0rem 1rem;
  /* pas de backdrop/background ici */
}

.menu-toggle{ order:0; background:black; border:1px solid rgba(255,255,255,.5); padding:.4rem .7rem; border-radius:.5rem; color:inherit; }
.brand{ order:1; font-weight:600; text-decoration:none; color:inherit; }
.menu{ order:2; display:none; flex-direction:column; gap:.5rem; list-style:none; margin:0; padding:0; background:black; }
.menu.open{ display:flex; background:black;}
.menu a{ text-decoration:none; color:inherit; line-height: 1.2;}
.menu a[aria-current="page"], .menu a.active{ text-decoration:underline; }
.lang{ order:3; margin-left:auto; text-decoration:none; color:inherit; }





/* mobile */
.menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #000;          /* fond noir partout */
  padding: .75rem 1rem;
  display: none; flex-direction: column; gap:.75rem;
}
.site-head { position: fixed; top:0; left:0; right:0; z-index:10; }
.nav { position: relative; } /* pour positionner .menu */
.menu.open { display: flex; }
















/* desktop */
@media (min-width:769px){
  .nav{
    max-width:none;         /* pleine largeur */
    padding:0 .75rem;
    gap:1rem;
    display:flex; align-items:center;
    flex-wrap: nowrap;      /* clé : une seule ligne */
  }
  .brand{ order:0; margin-right:1rem; }
  .brand img{ display:inline; height:40px; }
  .menu-toggle{ display:none; }
  .menu{
    display:flex !important;
    flex-direction: row; gap:1rem;
    order:1; flex:1; justify-content:flex-start; /* le menu occupe la ligne */
  }
  .lang{ order:2; margin-left:auto; }           /* FR collé à droite */
}





/* ===== Liens ===== */
a{ color:inherit; }
a:hover{ opacity:.9; }








/* Blocs texte/image alternés */
.split {
  display: grid;
  gap: var(--gap);
  align-items: center;
  grid-template-columns: 1fr;          /* mobile : 1 colonne */
  margin-block: clamp(1rem, 3vw, 3rem);
  max-width: 100%;
  margin-inline: 0;
  padding-inline: 2rem; /* petites marges gauche/droite */
  position: relative;
  z-index: 1;
  text-align: left;
}


@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr; /* desktop : 2 colonnes */
  }
  .split.reverse .text { order: 2; }   /* inverse texte/image */
  .split.reverse .media { order: 1; }
}

@media (max-width: 900px) {
  .split {
    max-width: 65ch;
    margin-inline: auto;
    padding-inline: 2rem; /* même que .prose */
  }
}



.split .text { /* texte confortable */
  max-width: 65ch;
  margin-inline: auto;
  text-align:justify;
}

.split .media{ display:flex; justify-content:center; }
.split .media img{  margin: 0 auto; width:auto; max-width:min(100%, 700px); height:auto; display:block; }


.split .media figure { margin: 0; }
.split .media figcaption {
  font-size: .9rem;
  opacity: .85;
  margin-top: .3rem;
  text-align: center;
  font-style: italic; 
}








/* TOUT POUR LA PRESSE */

/* ===== Presse (accordéons légers) ===== */
.press h2{ margin: 1.5rem 0 .5rem; text-align:left; }

.press details{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .75rem;
  margin: .5rem 0 1rem;
  overflow: hidden;
}

.press summary{
  cursor: pointer;
  list-style: none;
  padding: .8rem 1rem;
  font-weight: 600;
  text-align: left;
}
.press summary::-webkit-details-marker{ display:none; }

/* contenu (images + pdf) */
.press .press-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  padding: 0 1rem 1rem;
}
@media (min-width: 900px){
  .press .press-grid{ grid-template-columns: repeat(4, 1fr); }
}
.press .press-grid img{
  display:block; width:100%; height:auto; border-radius:.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* PDF responsive */
.pdf-embed{ padding: 0 1rem 1rem; }
.pdf-embed iframe{
  width: 100%;
  height: min(80vh, 900px); /* grand mais pas trop */
  border: 0;
  background: #000; /* propre pendant le chargement */
}
.pdf-embed .pdf-links{
  margin:.5rem 0 0; text-align:center; font-size:.95rem; opacity:.9;
}




/* pour que les images aient la meme taille dans l'onglet press */

.press .press-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
}

/* Chaque lien = case de taille identique (choisis le ratio) */
.press .press-grid a{
  display:block;
  aspect-ratio: 1 / 1;   /* carré ; mets 3/4 ou 4/3 si tu préfères */
  width:100%;
  overflow:hidden;
  border-radius:.5rem;
}

/* L’image remplit la case sans se déformer */
.press .press-grid img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}




/* HEADER — version desktop : tout sur UNE ligne */
@media (min-width: 769px){
  .nav{
    display:flex; align-items:center; gap:1rem;
    flex-wrap: nowrap;              /* une seule ligne */
    max-width:none; padding:0 .75rem;
    height:60px;
  }
  .brand{ order:0; margin-right:1rem; flex:0 0 auto; }
  .brand img{ display:inline; height:40px; }

  /* annule l’overlay mobile */
  .menu-toggle{ display:none; }
  .menu{
    position: static;               /* plus de fixed/inset */
    inset:auto; background: transparent; padding:0;
    display:flex !important; flex-direction:row; gap:1.25rem;
    order:1; flex:1 1 auto; justify-content:center; /* centré */
    height:auto;
  }
  .lang{ order:2; margin-left:auto; flex:0 0 auto; } /* à droite */
}





/* ===== PAGE DISTRIBUTEURS ===== */
.distributors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2rem;
}

.distributor-card {
  background: rgba(255,255,255,0.05);
  padding: 1rem;
  border-radius: .5rem;
  text-align: center;
}

.distributor-card h3 {
  margin-bottom: .5rem;
}

.distributor-card p {
  margin: .3rem 0;
}

.distributor-card iframe {
  margin-top: .5rem;
  width: 100%;
  height: 200px;
  border: none;
  border-radius: .5rem;
}

@media (max-width: 900px) {
  .page.distributors {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .page.distributors {
    grid-template-columns: 1fr;
  }
}








/* neutralise les règles génériques */
.pdf-viewer{
  display:block;
  width:100%;
  height:80vh !important;   /* impose une vraie hauteur */
  border:0;
}

/* si ton texte est dans un conteneur étroit (max-width:700px) et que tu veux plein écran */
.wrapper-narrow .pdf-viewer{
  width:100vw;
  margin-left:calc(50% - 50vw);  /* breakout */
}

/* garde une bonne hauteur sur mobile */
@media (max-width:768px){
  .pdf-viewer{ height:75vh !important; }
}








/* CATALOGUE */
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1rem;
  padding:1.5rem 0;
}
.catalog-item{
  text-align:center;
  display:flex;
  flex-direction:column; /* image puis légende */
}
/* Le lien d'image doit se comporter comme un bloc */
.catalog-item a.lb{
  display:block;
  width:100%;
}
.catalog-item a.lb img{
  display:block;
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:.5rem;     /* <-- sur l'image, pas sur le parent */
}
.catalog-item span{
  display:block;
  margin-top:.5rem;
  font-size:.9rem;
  opacity:.9;
}

/* Responsive */
@media (max-width:1200px){ .catalog-grid{ grid-template-columns:repeat(4,1fr); } }


@media (max-width:800px){
  .catalog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}



/* Lightbox */
#catalog-lightbox {
  position: fixed;
  z-index: 9999;
  padding-top: 3rem;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

#catalog-lightbox img {
  max-width: 90%;
  max-height: 90%;
}

#catalog-lightbox .close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 16px;
  margin-top: -50px;
  color: #fff;
  font-size: 40px;
  user-select: none;
}

.prev { left: 0; }
.next { right: 0; }

@media (max-width:800px){
  .catalog-grid a.lb{ pointer-events:auto; cursor:auto;}
}









/* --- CTA Buttons --- */
.btn{ display:inline-block; padding:.75rem 1.25rem; border-radius:.6rem; text-decoration:none; font-weight:700; transition:.2s; margin:.25rem .4rem; }
.btn-primary {
  background:#fff !important;   /* fond blanc assuré */
  color:#111 !important;        /* texte noir assuré */
  text-shadow:none !important;  /* enlève l’aura noire */
  border:1px solid rgba(0,0,0,.1);
}.btn-primary:hover{ transform:translateY(-2px); }
.btn-outline{ border:1.5px solid rgba(255,255,255,.8); color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }


/* Dots */
.dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:1rem; display:flex; gap:.4rem; z-index:3; }
.dots button{
  width:.7rem; height:.7rem; border-radius:50%; border:1px solid rgba(255,255,255,.7); background:transparent; cursor:pointer;
}
.dots button.active{ background:#fff; }

/* Responsive spacing */
@media (max-width:700px){ .hero{ min-height:60vh; } }




/* FIN DU HERO */