/* ====== Variables & reset ====== */
:root{
  --padX: 10%;
  --max-w: 1200px;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-dark: #0b0b0b;
  --h-1:500px; --h-2:200px; --h-3:500px; --h-4:500px; --h-5:500px; --h-6:500px; --h-7:900px; --h-8:200px; --h-9:280px;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }
body{
  background:#000;
  color:var(--c-white);
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  text-align:left;
  font-size:14px; /* Tous les textes 10px */
  font-weight: 500;
}



/* Header (non sticky, sans fond, au-dessus du manifeste) */
.site-header{
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  padding: 0 var(--padX);
  background: none;
  z-index: 100;
}
.site-nav{
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 12px;
  color: var(--c-black);
}
.site-nav a{
  color: var(--c-black);
  text-decoration: none;
}
.site-nav .sep{
  padding: 0 6px;
  color: var(--c-black);
}

/* Sections */
.section{
  position:relative;
  width:100%;
  padding-left: var(--padX);
  padding-right: var(--padX);
  padding-top: clamp(24px, 5vh, 64px);
  padding-bottom: clamp(24px, 6vh, 80px);
  display:flex;
  align-items:center;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.section .wrap{ width:100%; max-width: var(--max-w); }
/**.dark{ background: var(--c-dark); } */
.light-surface{ color: var(--c-black); }

/* Typography */
.titre{
  font-family: 'Bebas Neue', sans-serif;
  
  text-transform: uppercase;
  color: var(--c-white);
  /* pas d'ombre */
  text-shadow: none;
  margin:20px 0;
}
.sous-titre{
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(15px, 3.5vw, 30px);
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--c-black);
  /* pas d'ombre */
  text-shadow: none;
  margin:20px 0 40px 0;
  position: relative;

}
.titre--manifeste{ 
  opacity:1;
  font-size: clamp(40px, 4vw, 80px);
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.05; }

.titre-section{ 
  opacity:0.7;
  font-size: clamp(60px, 5vw, 120px);
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.05; } }

.text{
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;          /* Tous les textes 10px */
  line-height: 1.6;
  text-align: justify;  
 
}


.text.light{ color: var(--c-white); }
.text.dark{ color: var(--c-black); }
.light{ color: var(--c-white); }

.link{ color: currentColor; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; display:inline-block; margin-top: 8px; }
.link:hover{ opacity:.85 }

.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 1000px; }
.card{ background: rgba(0,0,0,.45); padding: 14px; border-radius: 10px; }
.card-title{ font-family: 'Bebas Neue', sans-serif; letter-spacing: .02em; font-size: 20px; margin-bottom: 4px; }

/*.steps{ list-style: decimal; padding-left: 1.1em; max-width:900px; }
.steps li{ margin: 6px 0; }*/


.steps {
  list-style: none; /* Supprime la numérotation native */
  counter-reset: step-counter; /* Initialise le compteur */
  padding: 0;
  position : absolute;
}

.steps li {
  counter-increment: step-counter; /* Incrémente à chaque <li> */
  position: relative;
  padding-left: 50px; /* espace pour le rond à gauche */
  margin-bottom: 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  text-align: left;
}

.steps li::before {
  content: counter(step-counter); /* Affiche 1, 2, 3… */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #000; /* fond noir */
  color: #fff; /* texte blanc */
  width: 30px;
  height: 30px;
  border-radius: 50%; /* rond parfait */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
}

.checks {
  columns: 2;              /* 2 colonnes */
  -webkit-columns: 2;      /* Safari / Chrome */
  -moz-columns: 2;         /* Firefox */
  column-gap: 40px;        /* espace entre les colonnes */
  list-style-type: disc;   /* puce ronde classique */
  padding-left: 20px;      /* indentation pour les puces */
  margin: 0;
}

.checks li {
  break-inside: avoid;     /* empêche de couper un li entre colonnes */
  margin-bottom: 8px;      /* espace vertical entre items */
}

/*.checks{ list-style: "—  "; padding-left: 1ch; max-width:800px; }
.checks li{ margin: 6px 0; }*/
/** .grid{ columns: 2 320px; column-gap: 24px; }*/
.grid li{ break-inside: avoid; margin: 4px 0; color: #e6e6e6; }

/* Titres transparents 0.8 en haut à gauche de leur section */
.topleft{
  position: absolute;
  top: 30px;
  left: var(--padX);
  margin: 0;
  transform: translateY(0);
}

/* Backgrounds (no parallax) */
.bg-1{ background-image: url('../images/web-perf-visuel-1.jpg'); }
.bg-2{ background-image: url('../images/web-perf-visuel-2.jpg'); }
.bg-3{ background-image: url('../images/web-perf-visuel-3.jpg'); }
.bg-4{ background-image: url('../images/web-perf-visuel-4.jpg'); }
.bg-5{ background-image: url('../images/web-perf-visuel-5.jpg'); }
.bg-6{ background-image: url('../images/web-perf-visuel-6.jpg'); }
.bg-7{ background-image: url('../images/web-perf-visuel-7.jpg'); }
.bg-8{ background-image: url('../images/web-perf-visuel-8.jpg'); }

/* Heights desktop */
@media (min-width:1200px){
  #manifeste{ height: var(--h-1); }
  #intro{ min-height: var(--h-9); }
  #mode-operatoire{ height: var(--h-2); }
  #productions{ min-height: var(--h-9); }
  #identites{ height: var(--h-3); }
  #case-identite{ min-height: var(--h-9); }
  #com-externe{ height: var(--h-4); }
  #case-pozzi{ min-height: var(--h-9); }
  #com-interne{ height: var(--h-5); }
  #case-interne{ min-height: var(--h-9); }
  #campagnes{ height: var(--h-6); }
  #case-nutripure{ min-height: var(--h-9); }
  #trio{ height: var(--h-7); }
  #inspirations{ min-height: var(--h-9); }
  #contact{ height: var(--h-8);}
  #mentionsLegales{height: 100%; background: #fff;}
}

/* Mobile */
@media (max-width:1199px){
  .section{ min-height: 70vh; }
  #mode-operatoire{ min-height: 45vh; }
  #contact{ min-height: 40vh; }
  .grid{ columns: 1; }
}


address {
    display: block;
    font-style: normal;
    unicode-bidi: isolate;
}


#inspirations ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
  gap: 0px 24px; /* espace vertical et horizontal */
  list-style: disc;
  padding-left: 0; /* pour que les puces soient alignées avec le titre */
  margin-top: 16px;

  list-style-position: inside;
}

#inspirations li {
  break-inside: avoid;

}


/* ===== TRIO ===== */
.trio{
  padding-top:50px;
}

.member{
  display: grid;
  grid-template-columns: 1fr 2fr; /* image à gauche (1/3), texte à droite (2/3) */
  gap: 24px;
  align-items: start;
  min-height: 260px;
}

.member-photo{
  margin: 0;
}

.member-photo img{
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.member-text{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-name{
  /*font-family: 'Bebas Neue', sans-serif;*/
  font-size: 16px;
  line-height: 1.1;
  margin: 0 0 4px 0;
  /*text-transform: uppercase;*/
}

.member-name .role{
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  text-transform: none;
}

/* Responsive : pile en 1 colonne */
@media (max-width: 900px){
  .member{
    grid-template-columns: 1fr;
  }
  .member-photo img{
    height: 200px;
  }
}

/* Menu global */
.header {
  position: absolute; /* pour être au-dessus du contenu */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10; /* pour passer devant le fond et le texte */
}

.menu {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 10%;
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  background: none; /* pas de fond */
}

.menu .logo img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}

.menu ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li::after {
  content: "/";
  margin-left: 8px;
  color:#000;
}

.menu li:last-child::after {
  content: "";
}

.menu a {
  text-decoration: none;
  color: #000; 
}


.social-icons-header {
  display: flex;
  align-items: center;
  gap: 8px; /* espace entre les ronds */
}

.social-icons-header a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  background-color: #868686; /* gris clair */
  border-radius: 50%;
  color: #fff; /* icône blanche */
  font-size: 8px;
  transition: background-color 0.3s ease;
}

.social-icons-header a:hover {
  background-color: #000; /* devient noir au survol */
}

.social-icons-footer {
  display: flex;
  align-items: center;
  gap: 8px; /* espace entre les ronds */
  margin:10px 0;
}

.social-icons-footer a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: #ccc; /* gris clair */
  border-radius: 50%;
  color: #fff !important; /* icône blanche */
  font-size: 8px;
  transition: background-color 0.3s ease;
}

.social-icons-footer a:hover {
  background-color: #000; /* devient noir au survol */
}

#contact a{
   text-decoration: none;
  color:#ccc;
  font-size: 12px;
}

#inspirations a{
   text-decoration: none;
  color:#fff;
}

.mentions{
  color:#ccc !important;
}

#mentionslegales{
  background: #fff; 
  color:#000;
  position: static;
}

#mentionslegales h1,h2,h3,h4{
  margin:40px 0 20px 0;
}

.projetsEnCours{
  font-style: italic;
}