/* =========================================================
   FEUILLE DE STYLE DU SITE MARINERALS
   -----------------------------------------------------------
   Ce fichier contrôle l'apparence de TOUTES les pages du site
   (couleurs, espacements, polices, mise en page).
   Il est organisé en sections numérotées pour s'y retrouver
   facilement. N'hésite pas à changer une couleur ci-dessous
   pour voir l'effet sur tout le site.

   Mise à jour : couleurs et typographies alignées sur la Charte
   Graphique Marinerals (palette Bleu Profond / Bleu Marine / Bleu
   Électrique / Orange Corail + polices General Sans et Plus Jakarta
   Sans). Les noms des variables n'ont pas changé pour ne rien casser
   ailleurs dans le site : seules leurs valeurs ont été mises à jour.
   ========================================================= */

/* Polices chargées en ligne (chartes : General Sans pour les titres,
   Plus Jakarta Sans pour le texte courant). */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

/* ---------- 1. Variables de couleurs -----------------------
   Toutes les couleurs du site sont définies ici UNE SEULE FOIS.
   Change une valeur ici, elle se met à jour partout sur le site. */
:root {
  --bleu-nuit: #061E68;      /* Bleu Profond (charte) : texte, fonds sombres */
  --bleu-fonce: #0030BC;     /* Bleu Marine (charte) : boutons, UI */
  --bleu-moyen: #0041FF;     /* Bleu Électrique (charte) : accents, liens, chiffres */
  --bleu-clair: #B8C1FF;     /* Bleu Vague (charte) : fonds légers, dégradés */
  --bleu-tres-clair: #E8ECFF;/* Bleu Calcite (charte) : fonds de section */
  --sable: #B8C1FF;          /* anciennement "sable" : remplacé par Bleu Vague (charte) */
  --orange-corail: #FF440D;  /* Orange Corail (charte) : accent, CTA, points forts, chiffres clés */
  --blanc: #ffffff;
  --gris-texte: #3E4F72;     /* gris-bleu dérivé du Bleu Profond, pour le texte courant */
  --ombre: rgba(6, 30, 104, 0.12);

  --police: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --police-titre: 'General Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --rayon: 14px;
}

/* ---------- 1bis. Typographie des titres --------------------
   Charte : titres en General Sans (Bold), sous-titres en General
   Sans (SemiBold). Le texte courant reste en Plus Jakarta Sans
   (défini sur body ci-dessous). */
h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 700;
}

h3, h4 {
  font-weight: 600;
}

/* ---------- 2. Réinitialisation de base --------------------
   Supprime les marges par défaut des navigateurs pour repartir
   d'une base propre et cohérente. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--police);
  color: var(--gris-texte);
  background: var(--blanc);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--bleu-fonce);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 3. En-tête / barre de navigation ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanc);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e3edf5;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Pas de largeur maximale ici : le logo reste à gauche et le menu
     (Accueil, Produit, Équipe...) va vraiment jusqu'au bord droit de
     l'écran, même sur un grand écran, au lieu de s'arrêter au milieu. */
  padding: 12px 32px;
}

.logo-link img {
  height: 48px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  color: var(--bleu-nuit);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a.actif {
  text-decoration: none;
  border-bottom: 2px solid var(--bleu-fonce);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--bleu-fonce);
  border-radius: 3px;
}

/* ---------- 4. Section "hero" (grand bandeau d'accueil) ---- */
.hero {
  background: var(--bleu-tres-clair);
  padding: 80px 0 60px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.eyebrow {
  display: inline-block;
  background: var(--bleu-tres-clair);
  color: var(--bleu-fonce);
  font-weight: 700;
  font-size: 0.875rem; /* 14px min. web, charte */
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: 2.6rem;
  color: var(--bleu-nuit);
  margin-bottom: 18px;
  line-height: 1.2;
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--gris-texte);
  margin-bottom: 28px;
  max-width: 60ch;
}

/* Élargit uniquement le paragraphe sous le titre de la page Produit
   (classe posée seulement sur ce paragraphe-là), pour qu'il revienne
   moins souvent à la ligne. Les autres pages gardent le réglage
   d'origine (60ch) ci-dessus. */
.lead-large {
  max-width: 85ch;
}

.hero-art {
  background: var(--bleu-tres-clair);
  /*border: 1px solid #e3edf5;*/
  border-radius: 0px;
  min-height: 280px;
  position: relative;
  overflow: hidden;
  /*box-shadow: 0 20px 40px var(--ombre);*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-art-logo {
  width: 100%;
  max-width: 1200px;
  height: auto;
  transform: translateX(50px);  /* décale de 20 px vers la gauche */
}

/* ---------- 5. Boutons -------------------------------------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn-primaire {
  background: var(--orange-corail); /* charte : Orange Corail = Accent · CTA · Points forts */
  color: var(--blanc);
  box-shadow: 0 10px 20px var(--ombre);
}

.btn-primaire:hover {
  background: #d93a0b; /* Orange Corail légèrement foncé au survol */
}

.btn-secondaire {
  background: var(--blanc);
  color: var(--bleu-fonce);
  border-color: var(--bleu-clair);
}

.btn-secondaire:hover {
  border-color: var(--bleu-fonce);
}

.btn-clair {
  background: var(--bleu-clair);
  color: var(--bleu-fonce);
  border-color: var(--bleu-fonce);
}

.hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: -15px
}

/* Boutons un peu plus compacts uniquement dans le bandeau d'accueil,
   pour que les 3 boutons (équipe / produit / avancées) tiennent sur
   une seule ligne au lieu de passer à la ligne. */
.hero-cta .btn {
  padding: 12px 18px;
  font-size: 0.88rem;
}

/* ---------- 6. Sections génériques -------------------------- */
.section {
  padding: 72px 0;
}

.section-alt {
  background: var(--bleu-tres-clair);
}

.section-titre {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 48px;
}

.section-titre h2 {
  font-size: 2rem;
  color: var(--bleu-nuit);
  margin-bottom: 12px;
}

.section-titre p {
  color: var(--gris-texte);
  max-width: 1800px;
}

/* ---------- 7. Cartes (équipe, valeurs, etc.) --------------- */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}

.carte {
  background: var(--blanc);
  border: 1px solid #e3edf5;
  border-radius: var(--rayon);
  padding: 28px;
  box-shadow: 0 8px 24px var(--ombre);
}

/* Petite photo en haut d'une carte (page Produit) : image bien
   cadrée (object-fit: cover = elle remplit le cadre sans se
   déformer, quitte à être un peu recadrée), avec des coins arrondis
   assortis à la carte.
   Le cadre (.carte-photo-cadre) a "overflow: hidden" : c'est lui qui
   arrondit les coins et qui coupe proprement l'image quand on
   zoome dessus (avec "transform: scale()" sur l'image) pour mieux
   la centrer sur le sujet — sans ce cadre, une image zoomée
   déborderait par-dessus le titre en dessous. */
.carte-photo-cadre {
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 16px;
}

.carte-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carte h3 {
  color: var(--bleu-nuit);
  margin-bottom: 6px;
}

.carte p {
  margin-top: 10px;
}

.carte ul {
  padding-left: 20px;
  margin-top: 12px;
}

.carte li {
  margin-bottom: 10px;
}

.carte li:last-child {
  margin-bottom: 0;
}

.carte .role {
  color: var(--bleu-fonce);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

/* Ligne "stagiaire" : photo ronde à gauche, prénom + tâche sur
   la même ligne à droite (la tâche est affichée en plus petit,
   juste à côté du prénom, pas en dessous). */
.stagiaire-ligne {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stagiaire-ligne + .stagiaire-ligne {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e3edf5;
}

.stagiaire-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.stagiaire-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stagiaire-nom {
  font-weight: 700;
  color: var(--bleu-nuit);
}

.stagiaire-tache {
  font-size: 0.875rem; /* 14px min. web, charte */
  color: var(--gris-texte);
}

/* Avatar rond avec initiales, en attendant de vraies photos */
.avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bleu-clair), var(--bleu-fonce));
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 18px;
}

/* ---------- 7. Cascade "L'urgence du défi" ---------------
   Trois rectangles larges et peu hauts (titre à gauche, texte à
   droite), décalés en escalier (gauche → centre → droite) et
   reliés par des flèches, pour suggérer un enchaînement plutôt
   qu'une simple liste de 3 blocs identiques. */

/* Conteneur des 3 rectangles et des 2 flèches : il les empile
   verticalement (colonne), l'un sous l'autre. */
.cascade-defi {
  display: flex;            /* active la mise en page flexible */
  flex-direction: column;   /* éléments empilés de haut en bas */
  margin-top: 8px;          /* petit espace sous le titre de la section */
}

/* Un rectangle (une "carte") de la cascade. */
.carte-etape {
  display: flex;                 /* titre et texte côte à côte */
  flex-direction: column;   /* ← ajoute cette ligne : titre puis texte, l'un sous l'autre */
  align-items: flex-start;       /* titre et texte alignés en haut */
  gap: 10px;                     /* espace entre le titre et le texte */
  width: 84%;                    /* largeur du rectangle (le reste sert au décalage) */
  background: var(--blanc);      /* fond blanc */
  border: 1px solid #e3edf5;     /* fin contour bleu très pâle */
  border-radius: var(--rayon);   /* coins arrondis (valeur définie dans :root) */
  padding: 22px 32px;            /* marge intérieure : haut/bas 22px, gauche/droite 32px */
  box-shadow: 0 8px 24px var(--ombre); /* ombre douce sous le rectangle */
}

/* Titre à gauche de chaque rectangle. */
.carte-etape h3 {
  flex: none;           /* largeur fixe de 210px (ne grandit pas, ne rétrécit pas) */
  color: var(--bleu-nuit);   /* couleur du titre */
  font-size: 1.05rem;        /* taille du titre */
  line-height: 1.35;         /* espacement entre les lignes du titre */
}

/* Zone de texte à droite du titre : prend toute la place restante. */
.carte-etape .contenu {
  flex: 1;
}

/* Premier paragraphe : on enlève l'espace au-dessus pour qu'il
   soit aligné avec le haut du titre. */
.carte-etape .contenu p {
  margin-top: 0;
}

/* Listes à puces dans les rectangles. */
.carte-etape .contenu ul {
  padding-left: 20px;   /* retrait de la liste (place pour les puces) */
  margin-top: 10px;     /* espace entre le paragraphe et la liste */
}

/* Espace entre chaque ligne de liste. */
.carte-etape .contenu li {
  margin-bottom: 8px;
}

/* Le dernier élément de la liste n'a pas d'espace en dessous. */
.carte-etape .contenu li:last-child {
  margin-bottom: 0;
}

/* Décalage en escalier : 1er rectangle à gauche, 2e au centre,
   3e à droite. */
.etape-1 {
  align-self: flex-start;       /* collé à gauche */
  transform: translateX(-2cm);  /* décalé encore plus à gauche de 2 cm */
}

.etape-2 {
  align-self: center; /* centré, ne bouge pas */
}

.etape-3 {
  align-self: flex-end;        /* collé à droite */
  transform: translateX(2cm);  /* décalé encore plus à droite de 2 cm */
}

/* Flèches ↘ entre les rectangles (style commun aux deux). */
.fleche-etape {
  font-size: 4rem;           /* grande flèche */
  font-weight: 700;          /* épaisse */
  line-height: 1;            /* pas d'espace vertical en trop autour */
  color: var(--bleu-moyen);  /* couleur de la flèche */
  margin: 0;
}

/* Flèche 1 : centrée sous le rectangle 1 (elle suit le même
   décalage de -2cm que lui, pour rester bien centrée dessous). */
.fleche-etape.vers-centre {
  align-self: flex-start;       /* part de la gauche... */
  margin-left: 42%;             /* ...puis est poussée vers le milieu du rectangle 1 (84% / 2) */
  transform: translateX(-2cm);  /* même décalage que le rectangle 1 */
}

/* Flèche 2 : inchangée. */
.fleche-etape.vers-droite {
  align-self: center;  /* centrée horizontalement */
  margin-left: 20%;    /* poussée vers la droite, sous le rectangle 2 */
}

/* Sur petit écran (tablette étroite, téléphone), on repasse en
   colonnes simples, tous les rectangles alignés à gauche et pleine
   largeur, plus lisible qu'un escalier trop serré. */
@media (max-width: 900px) {
  /* Rectangle pleine largeur, titre au-dessus du texte. */
  .carte-etape {
    width: 100%;
    flex-direction: column;  /* titre puis texte, l'un sous l'autre */
    gap: 10px;
  }

  /* Le titre reprend sa largeur naturelle (plus de 210px fixes). */
  .carte-etape h3 {
    flex: none;
  }

  /* Plus d'escalier : les 3 rectangles sont alignés à gauche.
     (Les `transform: translateX(...)` de la version grand écran
     restent actifs ici : si le décalage de 2 cm te gêne sur
     mobile, il faudra ajouter `transform: none;` dans ce bloc.) */
  .etape-1,
  .etape-2,
  .etape-3 {
    align-self: flex-start;
  }

  /* Flèches alignées à gauche avec un petit retrait. */
  .fleche-etape,
  .fleche-etape.vers-centre,
  .fleche-etape.vers-droite {
    align-self: flex-start;
    margin-left: 4%;
  }
}

/* ---------- 8. Cycle circulaire (air / mer / sable) --------- */
.cycle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 16px;
}

.cycle-etape {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 24px;
  text-align: center;
  border: 1px solid #e3edf5;
  position: relative;
}

.cycle-etape .num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bleu-fonce);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto 14px;
}

.cycle-etape h4 {
  color: var(--bleu-nuit);
  margin-bottom: 8px;
}

.cycle-etape p {
  font-size: 0.92rem;
}

/* ---------- 9. Frise chronologique (avancées) ---------------- */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 32px;
  border-left: 3px solid var(--bleu-clair);
}

.timeline-item {
  position: relative;
  padding: 0 0 40px 28px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -43px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bleu-fonce);
  border: 3px solid var(--bleu-clair);
}

.timeline-item .date {
  display: inline-block;
  font-weight: 700;
  color: var(--bleu-fonce);
  font-size: 0.875rem; /* 14px min. web, charte */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.timeline-item h3 {
  color: var(--bleu-nuit);
  margin-bottom: 6px;
}

.timeline-item.futur {
  opacity: 0.75;
}

.badge-futur {
  display: inline-block;
  background: var(--sable);
  color: var(--bleu-nuit);
  font-size: 0.875rem; /* 14px min. web, charte */
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- 10. Page Contact --------------------------------- */
.contact-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-info .carte {
  margin-bottom: 20px;
}

.form-champ {
  margin-bottom: 18px;
}

.form-champ label {
  display: block;
  font-weight: 700;
  color: var(--bleu-nuit);
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.form-champ input,
.form-champ textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cddce6;
  border-radius: 8px;
  font-family: var(--police);
  font-size: 1rem;
  color: var(--bleu-nuit);
}

.form-champ input:focus,
.form-champ textarea:focus {
  outline: none;
  border-color: var(--bleu-moyen);
}

.note-technique {
  background: var(--bleu-tres-clair);
  border-left: 4px solid var(--bleu-moyen);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 300; /* charte : mentions en Plus Jakarta Sans Light */
  margin-top: 16px;
}

/* ---------- 11. Pied de page ---------------------------------- */
.site-footer {
  background: var(--bleu-nuit);
  color: #cfe1f0;
  padding: 10px 0;
  margin-top: 40px;
}

/* ==========================================================
   FOOTER SPÉCIFIQUE À LA PAGE D'ACCUEIL
   ========================================================== */

.page-accueil .site-footer {
  background: #f3d58b;
  color: #0b2f75;
}

.page-accueil .site-footer a {
  color: #0b2f75;
  font-weight: 500;
}

.page-accueil .footer-inner > p {
  color: #0b2f75;
  font-weight: 500;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-footer {
  margin-top: auto;
}

/* Bandeau du pied de page en 3 zones : copyright à gauche,
   Mentions légales au centre, LinkedIn à droite.
   max-width/margin sont réinitialisés ici pour que le bandeau
   aille jusqu'aux bords réels de l'écran (comme le menu en haut),
   au lieu de rester centré dans les 1100px de .container. */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: none;
  margin: 0;
  padding: 0 32px 20px;
}

.footer-inner > p {
  justify-self: start;
  font-weight: 300; /* charte : mentions (copyright) en Plus Jakarta Sans Light */
}

.footer-lien-centre {
  justify-self: center;
}

.footer-lien-droite {
  justify-self: end;
}

.site-footer a {
  color: var(--bleu-clair);
}

/* Sur petit écran, on empile les 3 zones les unes sous les
   autres, centrées, plutôt que de les serrer sur une ligne. */
@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-inner > p,
  .footer-lien-centre,
  .footer-lien-droite {
    justify-self: center;
  }
}

/* ==========================================================
   ANIMATION SOUS-MARINE DU PIED DE PAGE
   ========================================================== */
/* ==========================================================
   DÉCOR SOUS-MARIN DU PIED DE PAGE
   ========================================================== */

.footer-vie-marine {
  position: relative;
  height: 0px;
  overflow: visible;
  background: transparent;
}

/* ---------------- SABLE ---------------- */

.footer-sable {
  position: absolute;
  z-index: 1;
  left: -2%;
  bottom: 0;
  width: 104%;
  height: 30px;

  background: #f3d58b;

  border-radius: 0% 0% 0 0 / 0% 0% 0 0;

  box-shadow:
    inset 0 6px 0 rgba(255,255,255,0.12),
    inset 0 10px 14px rgba(185,135,55,0.08);
}

/* ==========================================================
   ALGUE — MOUVEMENT SOUS-MARIN
   ========================================================== */

.footer-algue {
  position: absolute;
  z-index: 3;

  left: 7%;
  bottom: 15px;

  width: 75px;
  height: 110px;

  overflow: visible;
}

.footer-algue svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Chaque tige possède son propre mouvement */

.algue-tige {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.algue-tige-gauche {
  animation: algue-gauche 6.8s ease-in-out infinite;
}

.algue-tige-centre {
  animation: algue-centre 7.4s ease-in-out infinite;
}

.algue-tige-droite {
  animation: algue-droite 6.2s ease-in-out infinite;
}


/* gauche */

@keyframes algue-gauche {

  0% {
    transform: rotate(-3deg);
  }

  30% {
    transform: rotate(2deg);
  }

  55% {
    transform: rotate(5deg);
  }

  78% {
    transform: rotate(-1deg);
  }

  100% {
    transform: rotate(-3deg);
  }
}


/* centre */

@keyframes algue-centre {

  0% {
    transform: rotate(2deg);
  }

  35% {
    transform: rotate(-2deg);
  }

  65% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(2deg);
  }
}


/* droite */

@keyframes algue-droite {

  0% {
    transform: rotate(4deg);
  }

  28% {
    transform: rotate(0deg);
  }

  58% {
    transform: rotate(-4deg);
  }

  82% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(4deg);
  }
}


/* ==========================================================
   CRABE — DÉPLACEMENT + MARCHE
   ========================================================== */

.footer-crabe {
  position: absolute;
  z-index: 4;

  left: 12%;
  bottom: 8px;

  width: 48px;
  height: auto;

}

.footer-crabe svg {
  width: 100%;
  height: auto;
  overflow: visible;
}


/* Les pattes bougent légèrement pendant la marche */

.crabe-pattes-arriere,
.crabe-pattes-avant {
  transform-box: fill-box;
  transform-origin: center;
}

.crabe-pattes-arriere {
  animation: pattes-arriere 0.55s ease-in-out infinite alternate;
}

.crabe-pattes-avant {
  animation: pattes-avant 0.55s ease-in-out infinite alternate;
}


/* pinces légèrement animées */

.crabe-pince-gauche {
  transform-box: fill-box;
  transform-origin: right center;
  animation: pince-gauche 1.8s ease-in-out infinite;
}

.crabe-pince-droite {
  transform-box: fill-box;
  transform-origin: left center;
  animation: pince-droite 2.1s ease-in-out infinite;
}


@keyframes pattes-arriere {

  from {
    transform: translateY(0) rotate(-1deg);
  }

  to {
    transform: translateY(1px) rotate(1deg);
  }
}


@keyframes pattes-avant {

  from {
    transform: translateY(1px) rotate(1deg);
  }

  to {
    transform: translateY(0) rotate(-1deg);
  }
}


@keyframes pince-gauche {

  0%, 100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-4deg);
  }
}


@keyframes pince-droite {

  0%, 100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(4deg);
  }
}


/* ==========================================================
   TRAJET DU CRABE
   ========================================================== */

@keyframes crabe-deplacement {

  /* départ */
  0% {
    left: 12%;
    transform: scaleX(1);
  }

  /* marche */
  12% {
    left: 24%;
    transform: scaleX(1);
  }

  /* pause */
  20% {
    left: 24%;
    transform: scaleX(1);
  }

  /* repart */
  34% {
    left: 41%;
    transform: scaleX(1);
  }

  /* pause */
  42% {
    left: 41%;
    transform: scaleX(1);
  }

  /* repart */
  54% {
    left: 58%;
    transform: scaleX(1);
  }

  /* changement de direction */
  57% {
    left: 58%;
    transform: scaleX(-1);
  }

  /* retour */
  69% {
    left: 48%;
    transform: scaleX(-1);
  }

  /* pause */
  77% {
    left: 48%;
    transform: scaleX(-1);
  }

  /* repart */
  90% {
    left: 31%;
    transform: scaleX(-1);
  }

  /* ralentissement */
  97% {
    left: 28%;
    transform: scaleX(-1);
  }

  100% {
    left: 28%;
    transform: scaleX(-1);
  }
}


/* ==========================================================
   ACCESSIBILITÉ
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .algue-tige-gauche,
  .algue-tige-centre,
  .algue-tige-droite,
  .footer-crabe,
  .crabe-pattes-arriere,
  .crabe-pattes-avant,
  .crabe-pince-gauche,
  .crabe-pince-droite {
    animation: none;
  }
}
/* ---------------- MOBILE ---------------- */

@media (max-width: 600px) {

  .footer-vie-marine {
    height: 120px;
  }

  .footer-algue {
    left: 5%;
    width: 62px;
    height: 95px;
  }

  .footer-crabe {
    width: 40px;
  }

  .footer-sable {
    height: 28px;
  }
}

.footer-crabe:not(.marche) .crabe-pattes-arriere,
.footer-crabe:not(.marche) .crabe-pattes-avant {
  animation-play-state: paused;
}


/* ---------- Page "Mentions légales" ---------------------------
   Liste de champs (Éditeur, SIREN, etc.) façon petit tableau,
   avec le nom du champ en gras à gauche et sa valeur à droite. */
.mentions-liste {
  max-width: 640px;
  margin: 0 auto;
}

.mentions-ligne {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #e3edf5;
}

.mentions-ligne:last-child {
  border-bottom: none;
}

.mentions-label {
  font-weight: 700;
  color: var(--bleu-nuit);
}

.mentions-valeur {
  color: var(--gris-texte);
  text-align: right;
}

.mentions-note {
  max-width: 640px;
  margin: 24px auto 0;
  font-size: 0.88rem;
  font-weight: 300; /* charte : mentions en Plus Jakarta Sans Light */
  color: var(--gris-texte);
}

/* ---------- 12. Bulles animées (effet CO2) --------------------
   Un conteneur plein écran, fixe (il reste en place même quand
   on scrolle), qui n'intercepte jamais les clics (pointer-events:
   none), et dans lequel les bulles générées par script.js
   remontent doucement en boucle. */

.bulles-fond {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3; /* au-dessus du fond, en dessous du menu (qui est à 50) */
}

.bulle {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    rgba(255, 255, 255, 0.9),
    rgba(191, 227, 247, 0.35) 55%,
    rgba(191, 227, 247, 0) 75%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 1;
  animation-name: bulle-monte;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* Le conteneur .bulles-fond ignore les clics (pointer-events: none),
     mais on le réactive juste ici pour que chaque bulle, elle,
     reste cliquable — c'est ce qui permet de les faire "éclater". */
  pointer-events: auto;
  cursor: pointer;
}

@keyframes bulle-monte {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  8% {
    opacity: 1;  /*plus c'est grand plus les bulles sont foncées*/
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translate(var(--derive, 0px), -115vh);
    opacity: 0;
  }
}

/* Animation d'éclatement, déclenchée par script.js quand on clique
   sur une bulle : elle grossit rapidement puis disparaît. */
@keyframes bulle-eclate {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  60% {
    transform: scale(1.8);
    opacity: 0.35;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* Sur mobile, on réduit un peu la présence des bulles pour ne pas
   distraire sur un petit écran où l'espace est plus précieux. */
@media (max-width: 720px) {
  .bulle {
    opacity: 0.7;
  }
}

/* Respecte les personnes qui ont demandé "moins d'animations" dans
   les réglages de leur appareil : on coupe l'effet pour elles. */
@media (prefers-reduced-motion: reduce) {
  .bulles-fond {
    display: none;
  }
}

/* ---------- 12bis. Encadré statistique (page Produit) ----------
   Grand bloc bleu qui met en avant un ou deux chiffres clés,
   comme les encarts du PDF fourni. */
.stat-box {
  background: var(--bleu-fonce);
  color: var(--blanc);
  border-radius: var(--rayon);
  padding: 28px 32px;
  text-align: center;
  margin-top: 32px;
}

.stat-box-alt {
  background: var(--bleu-nuit);
}

.stat-box-titre {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.stat-box-chiffres {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
}

.stat-box-chiffres span {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--orange-corail); /* charte : chiffres clés en gras, en orange */
}

.stat-box-note {
  margin-top: 14px;
  font-size: 0.88rem;
  font-weight: 300; /* charte : mentions en Plus Jakarta Sans Light */
  color: var(--bleu-clair);
  opacity: 0.9;
}

/* ---------- 13. Responsive (petits écrans / mobile) ----------- */
@media (max-width: 820px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .contact-grille {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blanc);
    flex-direction: column;
    padding: 16px 24px;
    gap: 14px;
    border-bottom: 1px solid #e3edf5;
    display: none;
  }

  .nav-links.ouvert {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  .hero h1 {
    font-size: 2rem;
  }
}

.chiffre-orange {
  color: var(--orange-corail);
  font-weight: 700;
}

/* Puces en forme de losange orange (forme du logo) dans les cartes de la cascade */
.carte-etape .contenu ul {
  list-style: none;   /* supprime les ronds par défaut */
  padding-left: 0;
}

.carte-etape .contenu ul li {
  position: relative;
  padding-left: 22px; /* place réservée à la puce */
}

.carte-etape .contenu ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 12px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='54.5 33 16.5 21'%3E%3Cpath d='M55.824 46.1699C55.0739 45.3225 54.9904 44.0627 55.622 43.1204L61.0114 35.0794C61.9908 33.618 64.1169 33.6455 65.0596 35.1317L70.1646 43.1799C70.7466 44.0975 70.6684 45.2952 69.9722 46.1263L64.8726 52.2138C63.9199 53.3511 62.2017 53.375 61.2188 52.2646L55.824 46.1699Z' fill='%23FF440D'/%3E%3C/svg%3E") no-repeat center / contain;
}

.section-titre p.sous-titre-large {
  max-width: none;   /* supprime la limite de largeur */
}

.stat-box-chiffres span.approx {
  color: var(--orange-corail);   /* tilde en bleu foncé au lieu d'orange */
  font-size: 1.4rem;         /* taille du tilde ; ajuste à ton goût */
}

.liste-impact {
  list-style: none;      /* supprime les ronds */
  padding-left: 0;
  display: table;        /* la liste se centre comme un bloc... */
  margin: 0 auto 32px;   /* ...centré, avec 32px d'espace en dessous */
  text-align: left;      /* ...mais chaque ligne reste alignée à gauche */
}

.liste-impact li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}

.liste-impact li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 12px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='54.5 33 16.5 21'%3E%3Cpath d='M55.824 46.1699C55.0739 45.3225 54.9904 44.0627 55.622 43.1204L61.0114 35.0794C61.9908 33.618 64.1169 33.6455 65.0596 35.1317L70.1646 43.1799C70.7466 44.0975 70.6684 45.2952 69.9722 46.1263L64.8726 52.2138C63.9199 53.3511 62.2017 53.375 61.2188 52.2646L55.824 46.1699Z' fill='%23FF440D'/%3E%3C/svg%3E") no-repeat center / contain;
}

.carrousel {
  position: relative;
  margin-top: 28px;
}

.carrousel-piste {
  display: flex;
  gap: 24px;
  overflow-x: auto;              /* défilement horizontal */
  scroll-snap-type: x mandatory; /* les posts s'alignent proprement */
  scroll-behavior: smooth;
  padding: 8px 4px 16px;
}

.carrousel-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  max-width: 100%;
}

.carrousel-item iframe {
  display: block;
  max-width: 100%;
  border: 1px solid #e3edf5;
  border-radius: var(--rayon);
  background: var(--blanc);
}

.carrousel-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--orange-corail);
  color: var(--blanc);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px var(--ombre);
}

.carrousel-gauche { left: -12px; }
.carrousel-droite { right: -12px; }


/* ===== V2 : bandeau salon, CTA menu, champs formulaire ===== */
.bandeau-salon{background:var(--bleu-nuit);text-align:center;padding:8px 16px;font-size:.9rem}
.bandeau-salon a{color:#fff;text-decoration:none}
.bandeau-salon a:hover{text-decoration:underline}
.nav-links a.nav-cta{background:var(--orange-corail);color:#fff;padding:8px 16px;border-radius:999px}
.nav-links a.nav-cta:hover{opacity:.9;color:#fff}
.form-champ select{width:100%;padding:12px 14px;border:1px solid #B8C1FF;border-radius:8px;font:inherit;background:#fff}
.form-champ input[type=checkbox]{width:auto;margin-right:8px}

.grille-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.logo-soutien {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 100px;
  padding: 16px;
  background: var(--blanc);
  border-radius: 12px;
  box-shadow: var(--ombre);
}

.logo-cosmetique-valley {
  width: 90px;
  height: 50px
  padding: 10px;
}

.logo-ademe {
  width: 108px;
  height: 60px;
  padding: 5px;
  transform: translateY(-20px);
}

.logo-soutien img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.carte-centree {
  width: 100%;
  max-width: 511px;      /* même largeur que les cartes de l'équipe */
  margin-left: auto;
  margin-right: auto;
  justify-self: center;  /* utile si la carte est dans une grille */
  text-align: center;
}

.logo-carre {
  width: 168px;
  height: 168px;
  margin: 0 auto 18px;   /* le centre dans la carte */
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-carre img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* le logo entier, sans coupe */
}

.tableau-cadre {
  overflow-x: auto;
  background: var(--blanc);
  border: 1px solid #e3edf5;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.tableau-produit {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.tableau-produit th,
.tableau-produit td {
  padding: 14px 18px;
  vertical-align: top;
}

.tableau-produit thead th {
  background: var(--bleu-nuit);
  color: var(--blanc);
  font-weight: 700;
}

.tableau-produit tbody tr:nth-child(even) {
  background: var(--bleu-tres-clair);
}

.tableau-produit tbody td:first-child {
  font-weight: 700;
  color: var(--bleu-nuit);
}

/* Version mobile : chaque ligne devient une carte */
@media (max-width: 700px) {
  .tableau-produit thead { display: none; }

  .tableau-produit,
  .tableau-produit tbody,
  .tableau-produit tr,
  .tableau-produit td {
    display: block;
    width: 100%;
  }

  .tableau-produit tr {
    padding: 10px 0;
    border-bottom: 1px solid #e3edf5;
  }

  .tableau-produit td { padding: 6px 18px; }

  .tableau-produit td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bleu-fonce);
  }
}

.bloc-partenaire {
  background: var(--blanc);
  border: 1px solid #e3edf5;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 40px 32px;
  text-align: center;
}

.bloc-partenaire h3 {
  color: var(--bleu-nuit);
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.bloc-partenaire > p {
  max-width: 62ch;
  margin: 0 auto 8px;
}

.bloc-partenaire .cycle {
  margin: 28px 0;
}

.pour-qui {
  max-width: 62ch;
  margin: 0 auto 28px;
  padding: 14px 18px;
  background: var(--bleu-tres-clair);
  border-left: 4px solid var(--orange-corail);
  border-radius: 8px;
  text-align: left;
}

.grille-centree {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.grille-centree .carte {
  flex: 0 1 240px;   /* largeur d'une carte, comme sur ta capture */
}

@media (max-width: 700px) {
  .grille-centree .carte {
    flex: 1 1 100%;  /* une carte par ligne sur mobile */
  }
}