@charset "UTF-8";
/* CSS Document */

/* =========================================
   CSS SPÉCIFIQUE AUX PAGES CONTENU
   (mentions légales, cookies, protection données)
   AUCUNE dépendance à body.page-contenu
   ? Pas de sticky-header, pas de footer ici
========================================= */


/* --------------------------------
   BODY
----------------------------------- */
body {
	font-family: "neulis-neue", system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI", sans-serif;
	background-color: #004538; /* fond vert comme footer */
	color: #004538;
}

a {
  text-decoration: none;
  color: inherit;
}
	  
/* --------------------------------
   AFFICHAGE SECTIONS
----------------------------------- */
	  
/* ==== VARIANTE 3 : opacité ==== */
.reveal-opacite {
  opacity: 0;
  transition: opacity 0.8s ease-out;
  will-change: opacity;
}

.reveal-opacite.is-visible {
  opacity: 1;
}

/* ==== VARIANTE 3 : arrivée depuis le haut ==== */
.reveal-top {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.reveal-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}
	  
/* ==== VARIANTE 1 : arrivée depuis le bas ==== */
/* État initial : section cachée + décalée vers le bas */
.reveal-section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

/* Quand la section devient visible */
.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
	  
/* ==== VARIANTE 1 : arrivée depuis le bas ==== */
/* État initial : section cachée + décalée vers le bas */
.reveal-section2 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  will-change: opacity, transform;
}

/* Quand la section devient visible */
.reveal-section2.is-visible {
  opacity: 1;
  transform: translateY(0);
}
	  
/* ==== VARIANTE 2 : arrivée depuis la droite ==== */
.reveal-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ==== VARIANTE 3 : arrivée depuis la gauche ==== */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}	 
	

    /* --------------------------------
       STICKY HEADER LOGO (identique)
    ----------------------------------- */
    .sticky-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 95px;
      backdrop-filter: blur(6px);
      background-color: rgba(255, 255, 255, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      padding: 20px 0 20px;

      opacity: 0;
      transform: translateY(-100%);
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .sticky-header.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .sticky-logo-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .sticky-logo {
      height: 55px;
      width: auto;
      transition: transform 0.3s ease;
    }

    @media (hover: hover) {
      .sticky-logo:hover {
        transform: scale(1.05);
      }
    }

    @media (min-width: 768px) {
      .sticky-header {
        height: 110px;
      }
      .sticky-logo {
        height: 70px;
      }
    }

    @media (min-width: 1600px) {
      .sticky-header {
        height: 120px;
      }
      .sticky-logo {
        width: 240px;
      }
    }

    /* --------------------------------
       HEADER / hero-pages CONTENU
    ----------------------------------- */
    header.hero-pages {
      position: relative;
      width: 100%;
      height: 600px; /* hauteur visuelle principale */
      overflow: hidden;
      color: #ffffff;
    }

    .hero-pages-inner {
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 1;
    }
	  
	/*.hero-pages.hidden {
	display: none !important;
	}*/

	.hero-pages {
	  transition: opacity 0.5s ease;
	}

	.hero-pages.transparent {
	  opacity: 0;
	  pointer-events: none; /* évite les clics fantômes */
	}

    /* FOND PARALLAX – version contenu */
    .hero-pages-bg {
      position: fixed;
      height: calc(600px + 100px); /* instruction */
      inset: 0;
      background-image: url("assets/header-page-contenu.webp");
      background-size: cover;
      background-position: center center; /* centré en hauteur & largeur */
      background-repeat: no-repeat;
      will-change: transform;
      transform: translate3d(0, 0, 0);
      z-index: 0;
    }

    .hero-pages-logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .hero-pages-logo svg {
      width: 300px;
      height: auto;
      display: block;
    }

    .hero-pages-title {
      font-family: "neulis-cursive", system-ui, sans-serif;
      font-weight: 500;
      color: #ffffff;
	  filter: drop-shadow(0 0 1.5mm rgba(64, 72, 73, 0.1));
      margin-top: 400px;
      text-align: left;
      font-size: 56px;
      line-height: 52px;
    }

    .hero-pages-title-3lignes {
      font-family: "neulis-cursive", system-ui, sans-serif;
      font-weight: 500;
      text-align: left;
      font-size: 50px;
      line-height: 52px;
      color: #ffffff;
	  filter: drop-shadow(0 0 1.5mm rgba(64, 72, 73, 0.1));
      margin-top: 400px;
    }

    .hero-pages-title-r {
      font-family: "neulis-neue", system-ui, sans-serif;
      font-weight: 500;
      color: #ffffff;
    }

    /* MOBILE */
    .hero-pages-inner {
      padding-inline: 20px;
      max-width: 374px;
      height: 600px;
    }

    .hero-pages-logo {
      top: 50px;
      text-align: center;
    }


    /* TABLETTE */
    @media (min-width: 768px) {
      .hero-pages-inner {
        max-width: 708px;
        padding-inline: 30px;
      }

      .hero-pages-logo {
        left: 30px;
        transform: none;
        top: 50px;
      }

      .hero-pages-title {
        margin-top: 350px;
        font-size: 72px;
        line-height: 70px;
      }

      .hero-pages-title-3lignes {
        margin-top: 350px;
        font-size: 72px;
        line-height: 70px;
      }
    }

    /* DESKTOP */
    @media (min-width: 1600px) {
      header.hero-pages {
        height: 600px;
      }

      .hero-pages-inner {
        max-width: 1194px;
        padding-inline: 0;
      }

      .hero-pages-logo {
        left: 0;
        transform: none;
        top: 60px;
      }

      .hero-pages-title {
        margin-top: 350px;
        font-size: 80px;
        line-height: 76px;
      }

      .hero-pages-title-3lignes {
        margin-top: 350px;
        font-size: 72px;
        line-height: 70px;
      }
    }

    /* --------------------------------
       ZONE CONTENU 
    ----------------------------------- */
    .content-main {
      position: relative;
      z-index: 1;
      background-color: #F9F5ED;
      padding-top: 50px;
      padding-bottom: 100px;
    }

    .content-inner {
      margin: 0 auto;
      max-width: 374px;
      padding-inline: 20px;
    }

    .content-section {
      margin-bottom: 60px;
    }

	.sommaire-section{
	background-color: #E8E108;
	border-radius: 20px;
	padding: 25px 50px;
	margin-top: 75px;
	overflow: hidden; 
	}
	
	  .intro{
      margin-top: 50px;
	  }

    @media (min-width: 768px) {
		.content-inner {
		max-width: 708px;
		padding-inline: 30px;
		}

		.sommaire-section{
		background-color: #E8E108;
		border-radius: 20px;
		padding: 25px 50px;
		margin-top: 75px;
		overflow: hidden; 
		}
    }

    @media (min-width: 1600px) {
		.content-inner {
		max-width: 900px;
		padding-inline: 0;
		}


		.sommaire-section{
		background-color: #E8E108;
		border-radius: 20px;
		padding: 25px 50px;
		margin-top: 75px;
		overflow: hidden; 
		}
    }


    /* --------------------------------
       TYPOGRAPHIE CONTENU
    ----------------------------------- */
    /* Titre paragraphe */
    .content-title {
      font-family: "neulis-cursive", system-ui, sans-serif;
      /*font-size: 60px;
      line-height: 64px;*/
      font-size: 40px;
      line-height: 44px;
      font-weight: 600;
      color: #004538;
      margin-top: 100px;
      margin-bottom: 50px;
    }
    .content-title-sommaire {
      font-family: "neulis-cursive", system-ui, sans-serif;
      font-size: 40px;
      line-height: 44px;
      font-weight: 600;
      color: #004538;
      margin-top: 50px;
      margin-bottom: 50px;
    }

    /* Sous-titre */
    .content-subtitle {
      font-family: "neulis-cursive", system-ui, sans-serif;
      font-size: 30px;
      line-height: 34px;
      font-weight: 600;
      color: #3E8265;
      margin-top: 50px;
      margin-bottom: 25px;
    }
	  .definis{
      margin-top: 50px;
      margin-bottom: 15px;
		  
	  }

    /* R en Neulis Neue pour titres & sous-titres */
    .content-r {
      font-family: "neulis-neue", system-ui, sans-serif;
      /*font-weight: 400;*/
    }

    /* Body normal */
    .content-text {
      font-family: "neulis-neue", system-ui, sans-serif;
      font-size: 20px;
      line-height: 26px;
      font-weight: 400;
      color: #004538;
      margin-bottom: 12px;
    }

    /* Body graisse élevée */
    .content-text-strong {
      font-family: "neulis-neue", system-ui, sans-serif;
      font-size: 20px;
      line-height: 26px;
      font-weight: 600;
      color: #004538;
      margin-bottom: 12px;
    }

    /* Liens body */
    .content-text a,
    .content-link {
      font-family: "neulis-neue", system-ui, sans-serif;
      font-size: 20px;
      line-height: 26px;
      font-weight: 400;
      color: #004538;
      /*text-decoration: underline;*/
    }
	  
    .content-text a:hover,
    .content-link a:hover {
      font-family: "neulis-neue", system-ui, sans-serif;
      font-size: 20px;
      line-height: 26px;
      font-weight: 400;
      color: #3f8365;
      text-decoration: underline;
    }

    /* Body couleur vert clair */
    .green-light {
      color: #3f8365;
    }

    /* --------------------------------
       LISTES À PUCES
    ----------------------------------- */
	  
    .content-list {
      list-style: none;
      margin: 25px 0 25px;
      padding: 0;
    }

    .content-list-item {
      display: flex;
      align-items: flex-start;
      gap: 25px; /* espace bullet / texte */
      margin-bottom: 25px;
    }
 	/*jaunes*/
    .content-bullet {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #E8E108;
      flex-shrink: 0;
      margin-top: 4px;
    }

    .content-list-text {
      font-family: "neulis-neue", system-ui, sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 400;
      color: #004538;
    }
	  .content-list-text-intro{
      font-family: "neulis-neue", system-ui, sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 400;
      color: #004538;
      margin-top: 10px;
    }

    /* --------------------------------
       LISTES NUMÉROTÉES
    ----------------------------------- */
    .content-list-numbered {
      list-style: none;
      margin: 16px 0 24px;
      padding: 0;
    }

    .content-list-numbered-item {
      display: flex;
      align-items: flex-start;
      gap: 25px;
      margin-bottom: 12px;
    }
	  .content-list-text a:hover{
      color: #8ec89a;
		  text-decoration: none;
    }

	  /*chiffres jaunes*/
    .content-number {
      font-family: "neulis-cursive", system-ui, sans-serif;
      font-weight: 600;
      font-size: 24px;
      line-height: 24px;
      color: #E8E108;
      flex-shrink: 0;
      margin-top: 2px;
    }
	  /*chiffres blancs*/
    .content-number-sommaire {
      font-family: "neulis-cursive", system-ui, sans-serif;
      font-weight: 600;
      font-size: 24px;
      line-height: 24px;
      color: #ffffff;
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* --------------------------------
       TABLEAUX
    ----------------------------------- */
    .content-table-wrapper {
      margin: 25px 0 25px;
      overflow-x: auto;
	  border-radius: 20px;
      border: 3px solid #F2EBDE;
    }

    .content-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 600px;
    }

    .content-table th,
    .content-table td {
      border: 2px solid #F2EBDE;
      padding: 15px 15px;
      vertical-align: center;
      text-align: left;
    }

    .content-table thead th {
      font-family: "neulis-cursive", system-ui, sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 600;
      color: #3E8265;
      background-color: #F2EBDE;
		border-right: 1px #fffff solid;
    }
	  
	  .content-table th {
      border: 2px solid #fffff;
      padding: 15px 15px;
      vertical-align: center;
      text-align: left;
    }

    .content-table thead .content-r {
      font-family: "neulis-neue", system-ui, sans-serif;
      font-weight: 600;
    }

    .content-table tbody td {
      font-family: "neulis-neue", system-ui, sans-serif;
      font-size: 16px;
      line-height: 19px;
      font-weight: 400;
      color: #004538; 
    }
	  .content-table tbody td.table-subtitle{
      font-family: "neulis-cursive", system-ui, sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 600;
      color: #3E8265;		  
	  }

	  
    /* --------------------------------
       STYLE FORMULAIRE 
    ----------------------------------- */
	.unsubscribe-form {
	  margin-top: 30px;
	  padding: 25px;
	  /*background-color: #F2EBDE;*/
	  background-color: #E8E108;
	  border-radius: 12px;
	  font-family: "neulis-neue", sans-serif;
	  color: #004538;
	}

	.unsubscribe-checkbox {
	  display: flex;
	  align-items: flex-start;
	  gap: 12px;
	  font-size: 18px;
	  line-height: 22px;
	  cursor: pointer;
	}

	.unsubscribe-checkbox input {
	  width: 22px;
	  height: 22px;
	  accent-color: #3E8265; /* vert Nourience */
	  cursor: pointer;
	}

	.unsubscribe-btn {
	  margin-top: 20px;
	  padding: 14px 26px;
	  background-color: #004538;
	  color: white;
	  border: none;
	  border-radius: 8px;
	  font-size: 18px;
	  font-weight: 600;
	  cursor: pointer;
	  transition: background-color .25s ease;
	}

	.unsubscribe-btn:hover {
	  background-color: #3E8265;
	}
	  
    /* --------------------------------
       FOOTER (identique, juste fond adapté)
    ----------------------------------- */
    .footer-section {
      position: relative;
      z-index: 10000; /* au-dessus de .hero-pages et .hero-pages-bg */
      width: 100%;
      background-color: #004538;
      color: #FFFFFF;
	}

    .footer-inner {
      margin: 0 auto;
      max-width: 374px;
      padding-inline: 20px;
      padding-top: 100px;
      padding-bottom: 150px;
      text-align: center;
    }

    @media (min-width: 768px) {
      .footer-inner {
        max-width: 708px;
        padding-inline: 30px;
      }
    }

    @media (min-width: 1600px) {
      .footer-inner {
        max-width: 900px;
        padding-inline: 0;
      }
    }

    .footer-logo svg {
      width: 240px;
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    .footer-copy {
      margin-top: 50px;
      font-family: "neulis-neue", system-ui, sans-serif;
      font-weight: 500;
      font-size: 20px;
      line-height: 24px;
      color: #FFFFFF;
    }
	  /* © Nourience 2025 */
	.footer-adresse {
	  margin-top: 50px;
	  font-family: "neulis-neue", system-ui, sans-serif;
	  font-weight: 400;                /* medium */
	  font-size: 20px;
	  line-height: 24px;
	  color: #FFFFFF;
	}
	  
	.footer-links {
	  margin-top: 25px;
	  display: flex;
	  flex-direction: column; /* mobile : liens les uns sous les autres */
	  align-items: center;
	  gap: 8px;
	  font-family: "neulis-neue", system-ui, sans-serif;
	  font-weight: 400;
	  font-size: 16px;
	  line-height: 20px;
	  color: #FFFFFF;
	}

    .footer-link {
      text-decoration: none;
      color: inherit;
    }

    .footer-link:hover {
      text-decoration: underline;
    }

    .footer-separator {
      display: none;
    }

    @media (min-width: 768px) {
      .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }
      .footer-separator {
        display: inline-block;
        margin-inline: 8px;
      }
    }