/* ==========================================================================
   Rol'ink — intégration depuis maquette XD "Rol ink - Site - v1.xd"
   Grille maquette : 1920px, marges 261px, contenu 1398px, 12 colonnes / gouttière 30px
   ========================================================================== */

:root {
  /* Palette keppel (turquoise) — issue de l'artboard Couleurs du XD */
  --keppel-50: #EEFAF9;
  --keppel-100: #D8F3F1;
  --keppel-200: #ADE6E1;
  --keppel-300: #82D9D2;
  --keppel-400: #57CCC2;
  --keppel-500: #37B4AA;
  --keppel-600: #2D958C;
  --keppel-700: #24756F;
  --keppel-800: #1A5651;
  --keppel-900: #113734;
  --keppel-950: #0C2725;

  /* Palette daintree (bleu pétrole) */
  --daintree-500: #002C39;
  --daintree-600: #00242F;
  --daintree-700: #001C25;
  --daintree-800: #00141A;

  --blanc: #FFFFFF;

  --police: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --largeur-contenu: 1398px;
  --marge-page: clamp(20px, 6.5vw, 125px);

  /* Toutes les interactions de la maquette : 0.3s ease-out */
  --transition: 0.3s ease-out;

  --rayon-carte: 10px;
  --ombre-carte: 0 3px 20px rgba(0, 0, 0, 0.08);
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.55;
  color: var(--daintree-500);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, p { margin: 0; }

.contenu {
  max-width: calc(var(--largeur-contenu) + 2 * var(--marge-page));
  margin: 0 auto;
  padding-inline: var(--marge-page);
}

/* Titres — tailles maquette : h1 50px, h2 32px, h3 22-25px */
.titre-hero {
  font-size: clamp(30px, 2.6vw, 50px);
  font-weight: 700;
  line-height: 1.2;
}

.titre-section {
  font-size: clamp(24px, 1.7vw, 32px);
  font-weight: 700;
  line-height: 1.35;
}

.surtitre {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.turquoise { color: var(--keppel-500); }
.turquoise-clair { color: var(--keppel-400); }

.centre { text-align: center; }

/* Apparition au scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Boutons (artboard BOUTONS — hover 0.3s ease-out) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 5px 22px 5px 5px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 400;
  background: var(--keppel-50);
  color: var(--daintree-500);
  border: 0;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.btn__cercle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--keppel-500);
  color: var(--blanc);
  transition: background var(--transition), color var(--transition);
}

.btn__cercle svg { width: 14px; height: 14px; }

.btn:hover {
  background: var(--daintree-500);
  color: var(--blanc);
}

.btn:hover .btn__cercle {
  background: var(--keppel-500);
}

/* Variante sombre (En savoir plus, Contact) */
.btn--sombre {
  background: var(--daintree-500);
  color: var(--blanc);
}

.btn--sombre:hover {
  background: var(--keppel-500);
  color: var(--daintree-500);
}

.btn--sombre:hover .btn__cercle {
  background: var(--keppel-50);
  color: var(--daintree-500);
}

/* Variante pleine turquoise (Envoyer) */
.btn--turquoise {
  background: var(--keppel-500);
  color: var(--blanc);
  padding: 12px 32px;
}

.btn--turquoise:hover {
  background: var(--daintree-500);
  color: var(--blanc);
}

/* ---------- Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: 28px;
  transition: padding var(--transition);
}

.header__barre {
  display: flex;
  align-items: center;
  height: 64px;
  padding-inline: 24px;
  background: var(--blanc);
  border-radius: 999px;
  box-shadow: 0 3px 16px rgba(0, 44, 57, 0.10);
}

.header.retrecie { padding-top: 10px; }

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

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
}

.nav a {
  font-size: 16px;
  transition: color var(--transition);
}

.nav > ul {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav a:hover { color: var(--keppel-500); }

.nav .actif { color: var(--keppel-500); font-weight: 700; }

/* Sous-menu Pour qui ? */
.sous-menu { position: relative; }

.sous-menu > a::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--transition);
}

.sous-menu__liste {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  translate: -50% 0;
  min-width: 190px;
  padding: 10px;
  background: var(--blanc);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 44, 57, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.sous-menu__liste a {
  display: block;
  padding: 9px 16px;
  border-radius: 8px;
}

.sous-menu__liste a:hover {
  background: var(--keppel-50);
  color: var(--daintree-500);
}

.sous-menu.ouvert .sous-menu__liste,
.sous-menu:hover .sous-menu__liste {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__contact {
  padding: 9px 24px;
  border: 1px solid var(--keppel-500);
  border-radius: 999px;
  color: var(--keppel-500);
  transition: background var(--transition), color var(--transition);
}

.nav__contact:hover {
  background: var(--keppel-500);
  color: var(--blanc) !important;
}

/* Sélecteur de langue FR | DE (discret) */
.langues {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 26px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(0, 44, 57, 0.45);
}

.langues a { transition: color var(--transition); }

.langues a:hover { color: var(--keppel-500); }

.langues .actif { color: var(--daintree-500); font-weight: 700; }

/* Burger mobile */
.burger {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.burger span {
  display: block;
  height: 2px;
  width: 26px;
  margin-inline: auto;
  background: var(--daintree-500);
  transition: transform var(--transition), opacity var(--transition);
}

@media (max-width: 800px) {
  .burger { display: flex; margin-left: 14px; }

  .langues { margin-left: auto; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    background: var(--blanc);
    font-size: 22px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
  }

  .nav > ul {
    flex-direction: column;
    gap: 28px;
    text-align: center;
  }

  body.menu-ouvert .nav { opacity: 1; visibility: visible; }
  body.menu-ouvert { overflow: hidden; }
  body.menu-ouvert .burger { position: relative; z-index: 10; }
  body.menu-ouvert .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
  body.menu-ouvert .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .sous-menu__liste {
    position: static;
    translate: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0;
    margin-top: 12px;
    font-size: 17px;
  }
}

/* ---------- Badges circulaires tournants ---------- */

.badge-rotatif {
  width: 120px;
  height: 120px;
  animation: rotation 18s linear infinite;
}

@keyframes rotation {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .badge-rotatif { animation: none; }
}

/* ==========================================================================
   HOME
   ========================================================================== */

.hero {
  position: relative;
  padding-top: 218px;   /* surtitre à y=295 sur la maquette */
  padding-bottom: 260px;
  background: linear-gradient(118deg, var(--daintree-500) 28%, var(--keppel-500) 100%);
  color: var(--keppel-50);
  overflow: hidden;
}

/* Photo pistolet en filigrane à droite (opacité 0.72 sur la maquette) */
.hero__visuel {
  position: absolute;
  top: 30px;
  right: 4%;
  width: clamp(280px, 30%, 580px);
  opacity: 0.72;
  pointer-events: none;
}

/* Courbe blanche basse (grande ellipse comme sur la maquette) */
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 220%;
  height: 340px;
  translate: -50% 55%;
  border-radius: 50%;
  background: var(--blanc);
}

.hero__texte {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.hero__titre {
  font-size: clamp(30px, 2.6vw, 50px);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero__surtitre {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 16px;
}

.hero__points {
  display: flex;
  gap: 46px;
  margin-top: 46px;
  font-size: 20px;
}

.hero__cta { margin-top: 44px; }

/* ---------- Section Pourquoi ---------- */

.pourquoi {
  position: relative;
  padding-block: 90px 120px;
  background: var(--blanc);
}

.pourquoi__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 70px;
}

.pourquoi__visuel {
  position: relative;
  min-height: 546px;
}

/* Diagonale décorative claire */
.pourquoi__visuel::before {
  content: "";
  position: absolute;
  left: 42%;
  top: 0;
  width: 118px;
  height: 563px;
  background: var(--keppel-100);
  transform: rotate(-33deg);
  transform-origin: center;
}

.pourquoi__visuel img {
  position: relative;
  width: 88%;
  max-width: 600px;
}

.pourquoi__liste { display: grid; gap: 0; }

.pourquoi__item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 26px;
  align-items: center;
  padding-block: 26px;
  border-top: 1px solid var(--keppel-100);
}

.pourquoi__item:last-of-type { border-bottom: 1px solid var(--keppel-100); }

.pourquoi__icone {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--keppel-50);
  color: var(--keppel-500);
}

.pourquoi__icone svg { width: 34px; height: 34px; }

.pourquoi__icone img { width: 40px; height: 40px; object-fit: contain; }

.pourquoi__item h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.pourquoi__item p { font-size: 16px; }

.pourquoi__cta { margin-top: 36px; }

/* ---------- Slider photos (GLISSER) ---------- */

.slider-photos {
  position: relative;
  padding-block: 40px 90px;
  overflow: hidden;
}

.slider-photos__piste {
  display: flex;
  align-items: center;
  gap: 30px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 20px;
}

.slider-photos__piste::-webkit-scrollbar { display: none; }

.slider-photos__piste.saisi { cursor: grabbing; }

/* Toutes les photos au même format 3/2, bords légèrement arrondis */
.slider-photos__piste img {
  flex: none;
  width: min(40vw, 640px);
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  border-radius: var(--rayon-carte);
  pointer-events: none;
}

.slider-photos__etiquette {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--daintree-500);
  color: var(--blanc);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

.slider-photos__etiquette svg { width: 12px; height: 12px; }

.slider-photos__legende {
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
}

/* ---------- Points forts (fond sombre) ---------- */

.points-forts {
  background: var(--daintree-500);
  color: var(--blanc);
  padding-block: 100px;
}

.points-forts .surtitre { color: var(--keppel-50); opacity: 0.85; }

.points-forts__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 90px;
}

.point-fort__num {
  font-size: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(238, 250, 249, 0.25);
}

.point-fort__photo {
  width: 208px;
  height: 208px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 54px;
}

.point-fort h3 {
  font-size: clamp(19px, 1.3vw, 25px);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--keppel-200);
  margin-top: 88px;
}

.point-fort p {
  font-size: 14px;
  margin-top: 12px;
  color: var(--keppel-50);
}

/* ---------- Pour qui (cartes cibles) ---------- */

.pour-qui { padding-block: 110px 120px; }

.pour-qui__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 404px));
  justify-content: space-between;
  gap: 30px;
  margin-top: 90px;
}

.carte-cible {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--rayon-carte);
  overflow: hidden;
  display: block;
}

.carte-cible img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.carte-cible::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 28, 37, 0.75) 0%, rgba(0, 28, 37, 0) 55%);
}

.carte-cible:hover img { transform: scale(1.05); }

.carte-cible__nom {
  position: absolute;
  z-index: 1;
  left: 33px;
  bottom: 22px;
  font-size: 25px;
  font-weight: 700;
  color: var(--blanc);
}

.carte-cible__fleche {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 22px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blanc);
  transition: background var(--transition);
}

.carte-cible__fleche svg { width: 14px; height: 14px; }

.carte-cible:hover .carte-cible__fleche { background: var(--keppel-500); border-color: var(--keppel-500); }

/* ---------- Témoignages ---------- */

.temoignages {
  background: var(--daintree-500);
  color: var(--blanc);
  padding-block: 100px;
  overflow: hidden;
}

.temoignages__cadre { margin-top: 60px; }

.temoignage {
  display: none;
  grid-template-columns: minmax(0, 650px) 1fr;
  gap: 60px;
  align-items: center;
}

.temoignage.actif {
  display: grid;
  animation: fondu 0.4s ease-out;
}

@keyframes fondu {
  from { opacity: 0; }
  to { opacity: 1; }
}

.temoignage__citation {
  font-size: clamp(26px, 2.1vw, 40px);
  font-weight: 400;
  line-height: 1.35;
}

.temoignage__auteur {
  margin-top: 40px;
  font-size: 16px;
}

.temoignage__auteur strong { display: block; font-weight: 700; }

.temoignages__nav {
  display: flex;
  gap: 14px;
  margin-top: 40px;
}

.temoignages__nav button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: none;
  color: var(--blanc);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--transition), border-color var(--transition);
}

.temoignages__nav button:hover {
  background: var(--keppel-500);
  border-color: var(--keppel-500);
}

.temoignages__nav svg { width: 13px; height: 13px; }

.temoignages__visuel { position: relative; }

.temoignages__visuel img {
  width: 100%;
  max-width: 684px;
  height: 326px;
  object-fit: cover;
  border-radius: 200px;   /* forme capsule comme la maquette */
}

.temoignages__badge {
  position: absolute;
  left: 0;
  bottom: -28px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
  display: grid;
  place-items: center;
  padding: 14px;
}

.temoignages__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Ils nous font confiance ---------- */

.confiance {
  background: var(--keppel-50);
  padding-block: 55px 65px;
}

.confiance h2 {
  font-size: clamp(26px, 1.8vw, 35px);
  font-weight: 700;
  text-align: center;
}

.confiance__logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: 36px 30px;
  max-width: 1100px;
  margin: 46px auto 0;
}

.confiance__logos img {
  max-height: 64px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}

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

/* ---------- Bande CTA contact ---------- */

.cta-contact { padding-block: 130px 110px; }

.cta-contact__carte {
  position: relative;
  margin-left: clamp(0px, 8vw, 119px);
  background: var(--daintree-500);
  border-radius: var(--rayon-carte);
  color: var(--blanc);
  padding: 66px 60px 66px 46%;
  min-height: 321px;
  overflow: visible;
}

.cta-contact__carte::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 12% 110%, var(--keppel-950) 0 34%, transparent 34.5%);
  pointer-events: none;
}

.cta-contact__visuel {
  position: absolute;
  left: 5%;
  bottom: 0;
  width: 30%;
  max-width: 420px;
  pointer-events: none;
}

.cta-contact--inverse { padding-inline: 0; }

.cta-contact h2 {
  font-size: 25px;
  font-weight: 700;
  max-width: 430px;
}

.cta-contact p { margin-top: 14px; }

.cta-contact .btn { margin-top: 30px; }

/* ---------- Footer ---------- */

.footer {
  position: relative;
  background: var(--daintree-500);
  color: var(--keppel-50);
  padding-top: 85px;
  overflow: hidden;
}

/* Blobs décoratifs sombres */
.footer::before {
  content: "";
  position: absolute;
  top: -180px;
  left: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: var(--keppel-950);
}

.footer::after {
  content: "";
  position: absolute;
  bottom: -260px;
  left: 90px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--keppel-950);
}

.footer__haut {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 470px) repeat(3, auto);
  gap: 60px;
  align-items: start;
}

.footer__logo img { height: 64px; width: auto; }

.footer__logo p {
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.9;
}

.footer h3 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--keppel-300);
  margin-bottom: 20px;
}

.footer__colonne li { margin-bottom: 14px; }

.footer__colonne a { transition: color var(--transition); }

.footer__colonne a:hover { color: var(--keppel-400); }

.footer__social {
  display: flex;
  gap: 10px;
}

.footer__social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--daintree-500);
  display: grid;
  place-items: center;
  transition: background var(--transition), color var(--transition);
}

.footer__social a:hover { background: var(--keppel-400); }

.footer__social svg { width: 16px; height: 16px; }

.footer__partenaires {
  position: relative;
  z-index: 1;
  margin-top: 55px;
  padding-left: calc(470px + 60px);
}

.footer__partenaires h3 { margin-bottom: 18px; }

.footer__partenaires-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 36px;
}

.footer__partenaires-logos img {
  height: 42px;
  width: auto;
  object-fit: contain;
}

.footer__bas {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  border-top: 1px solid rgba(238, 250, 249, 0.15);
}

.footer__bas .contenu {
  display: flex;
  justify-content: flex-end;
  gap: 44px;
  padding-block: 22px 60px;
  font-size: 14px;
}

.footer__bas a { opacity: 0.75; transition: opacity var(--transition); }
.footer__bas a:hover { opacity: 1; }

.footer__signature {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  background: var(--blanc);
  color: var(--daintree-500);
  font-size: 12px;
  padding: 8px 26px;
  border-radius: 12px 12px 0 0;
  white-space: nowrap;
}

/* ---------- Bandeau plein (Marquage éco-responsable…) ---------- */

.bandeau {
  background: var(--keppel-500);
  color: var(--blanc);
  text-align: center;
  padding-block: 30px;
  font-size: clamp(18px, 1.3vw, 25px);
  font-weight: 700;
}

/* ---------- Vidéo ONF ---------- */

.video-onf { padding-block: 100px 40px; }

.video-onf__cadre {
  margin-top: 60px;
  border-radius: var(--rayon-carte);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--daintree-500);
  box-shadow: var(--ombre-carte);
}

.video-onf__cadre iframe,
.video-onf__cadre video,
.video-onf__cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

/* ---------- Sections image / texte alternées (lingettes, peinture) ---------- */

.deux-colonnes {
  background: var(--keppel-50);
  padding-block: 100px;
}

.deux-colonnes__ligne {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 620px);
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.deux-colonnes__ligne + .deux-colonnes__ligne { margin-top: 100px; }

.deux-colonnes__ligne--inverse { grid-template-columns: minmax(0, 620px) minmax(0, 440px); }

.deux-colonnes__ligne--inverse img { order: 2; }

.deux-colonnes__ligne img {
  border-radius: var(--rayon-carte);
  max-height: 480px;
  object-fit: cover;
  justify-self: center;
}

.deux-colonnes__ligne p { margin-top: 24px; max-width: 560px; }

/* ---------- Mentions légales ---------- */

.hero-cible--simple {
  padding-bottom: 60px;
  background-image: radial-gradient(circle 596px at -32px -8px, var(--daintree-700) 0 595px, transparent 596px),
    linear-gradient(180deg, var(--daintree-500) 0, var(--daintree-500) 400px, var(--blanc) 400px);
}

.hero-cible--simple .titre-hero { color: var(--blanc); }

.mentions { padding-block: 60px 110px; }

.mentions h2 {
  font-size: 25px;
  font-weight: 700;
  margin: 44px 0 14px;
  color: var(--keppel-700);
}

.mentions p { max-width: 820px; margin-top: 12px; line-height: 1.8; }

/* ==========================================================================
   Sections communes aux pages internes
   ========================================================================== */

/* ---------- Bombe vs Rol'ink (10 fois moins de déchets) ---------- */

.dechets {
  position: relative;
  padding-block: 110px;
}

.dechets--fond-clair { background: var(--keppel-50); }

.dechets__grille {
  position: relative;
  display: grid;
  grid-template-columns: 327px minmax(0, 1fr) 327px;
  gap: 34px;
  align-items: center;
}

.dechets__photo {
  width: 327px;
  height: 442px;
  object-fit: cover;
  border-radius: var(--rayon-carte);
}

.dechets__photo--gauche { transform: rotate(-4deg); }
.dechets__photo--droite { transform: rotate(4deg); }

.dechets__texte { padding-inline: 24px; }

.dechets__texte .titre-section { max-width: 620px; }

.dechets__texte p {
  margin-top: 26px;
  max-width: 560px;
  padding-left: 118px;
}

.dechets__source {
  font-size: 14px;
  opacity: 0.75;
}

.dechets__icone {
  width: 64px;
  height: 64px;
  object-fit: contain;
  color: var(--keppel-500);
  margin-bottom: 18px;
  margin-left: 118px;
}

.dechets .badge-rotatif {
  position: absolute;
  top: -60px;
  right: 300px;
}

/* ---------- Page CIBLE (Forestiers / Artistes / Associations) ---------- */

/* Blob décoratif de la maquette (Tracé 11277 : cercle 1192px en -628,-603, #011C25),
   identique sur les heros cible / à propos / contact — en couche de fond, pas de débordement */
.hero-cible,
.hero-apropos,
.hero-contact {
  background-image: radial-gradient(circle 596px at -32px -8px, var(--daintree-700) 0 595px, transparent 596px);
  background-repeat: no-repeat;
}

.hero-cible {
  position: relative;
  /* bandeau bleu pétrole pleine largeur de la maquette (1920x587) puis blanc */
  background-image:
    radial-gradient(circle 596px at -32px -8px, var(--daintree-700) 0 595px, transparent 596px),
    linear-gradient(180deg, var(--daintree-500) 0, var(--daintree-500) 587px, var(--blanc) 587px);
  padding-top: 200px;
  padding-bottom: 90px;
  overflow: hidden;
}

.hero-cible .surtitre { color: var(--keppel-50); }

.hero-cible .titre-hero { color: var(--blanc); }

.hero-cible__intro { color: var(--daintree-500); }

.hero-cible__grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 684px);
  gap: 30px;
  align-items: start;
}

.hero-cible__texte { padding-top: 40px; max-width: 620px; }

.hero-cible__texte .badge-rotatif { margin-block: 60px 70px; }

.hero-cible__intro {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.hero-cible__photo {
  width: 100%;
  height: 842px;
  object-fit: cover;
  border-radius: var(--rayon-carte);
}

.approuve { padding-block: 100px; background: var(--keppel-50); }

.approuve__grille {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 560px);
  justify-content: space-between;
  gap: 50px;
}

.approuve__texte {
  font-weight: 700;
  line-height: 1.75;
}

/* ---------- Page À propos ---------- */

.hero-apropos {
  position: relative;
  background: var(--daintree-500);
  color: var(--blanc);
  padding-top: 200px;
  padding-bottom: 130px;
  overflow: hidden;
}

/* (blob commun défini avec .hero-cible::before) */

.hero-apropos__grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 565px);
  gap: 70px;
  align-items: center;
}

.hero-apropos__panneau {
  background: var(--keppel-500);
  border-radius: var(--rayon-carte);
  aspect-ratio: 565 / 378;
  display: grid;
  place-items: center;
  padding: 50px;
}

.hero-apropos__panneau img { max-height: 120px; }

.hero-apropos .badge-rotatif {
  position: absolute;
  left: 0;
  bottom: -190px;
}

.apropos-intro { padding-block: 90px 60px; }

.apropos-intro p {
  max-width: 620px;
  line-height: 1.8;
}

.apropos-intro strong { font-weight: 700; }

.apropos-photos {
  background: linear-gradient(180deg, var(--blanc) 0%, var(--blanc) 18%, var(--keppel-50) 18%, var(--keppel-50) 100%);
  padding-bottom: 110px;
}

.apropos-photos__ligne1 {
  display: grid;
  grid-template-columns: 327px minmax(0, 565px);
  justify-content: space-between;
  align-items: end;
  gap: 40px;
}

.apropos-photos__ligne1 img { border-radius: var(--rayon-carte); object-fit: cover; }

.apropos-photos__grand-texte {
  max-width: 940px;
  margin: 100px auto 60px;
  font-size: clamp(24px, 1.8vw, 35px);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.apropos-photos__grand-texte strong { font-weight: 700; }

.apropos-photos__badge { display: grid; place-items: center; margin-bottom: 90px; }

.apropos-photos__ligne2 {
  display: grid;
  grid-template-columns: 327px 327px;
  justify-content: space-evenly;
  gap: 40px;
}

.apropos-photos__ligne2 img {
  border-radius: var(--rayon-carte);
  object-fit: cover;
  width: 327px;
  height: 378px;
}

.apropos-photos__ligne2 img:first-child { transform: rotate(-3deg); }
.apropos-photos__ligne2 img:last-child { transform: rotate(3deg) translateY(-60px); }

.equipe { padding-block: 100px 130px; }

.equipe__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 330px));
  justify-content: space-between;
  gap: 30px;
  margin-top: 80px;
}

.equipe__carte {
  border-radius: var(--rayon-carte);
  overflow: hidden;
  position: relative;
  margin: 0;
}

.equipe__carte img {
  width: 100%;
  height: 405px;
  object-fit: cover;
  object-position: top;
}

/* photo alternative révélée au survol (comme le site en ligne) */
.equipe__photo-survol {
  position: absolute;
  inset: 0;
  height: 100% !important;
  opacity: 0;
  transition: opacity var(--transition);
}

.equipe__carte:hover .equipe__photo-survol { opacity: 1; }

.equipe__carte figcaption {
  position: absolute;
  left: 0;
  right: 54px;
  bottom: 0;
  background: var(--blanc);
  border-radius: 0 var(--rayon-carte) 0 0;
  padding: 16px 22px;
}

.equipe__carte strong { font-size: 20px; font-weight: 600; display: block; }

.equipe__carte span { font-size: 14px; }

/* ---------- Page Concept ---------- */

.hero-concept {
  background: var(--keppel-50);
  padding-top: 200px;
  text-align: center;
}

.hero-concept .titre-hero { max-width: 960px; margin-inline: auto; }

.hero-concept__video {
  width: min(920px, 82%);
  margin: 30px auto 0;
}

.hero-concept__fleche {
  display: inline-block;
  margin-bottom: 60px;
  color: var(--keppel-500);
  animation: flotte 1.6s ease-in-out infinite alternate;
}

@keyframes flotte {
  to { transform: translateY(10px); }
}

.etapes {
  background: var(--daintree-500);
  color: var(--blanc);
  padding-block: 90px 100px;
}

.etapes__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 70px;
}

.etape img {
  width: 100%;
  height: 428px;
  object-fit: contain;
  background: var(--keppel-50);
  padding: 20px;
  border-radius: var(--rayon-carte);
}

.etape__label {
  display: block;
  margin-top: 30px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--keppel-300);
}

.etape h3 {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 700;
}

.etape h3 .turquoise-clair { font-weight: 700; }

.livraison {
  background: var(--daintree-500);
  color: var(--blanc);
  padding-block: 110px 130px;
}

.livraison__carte {
  background: var(--keppel-50);
  color: var(--daintree-500);
  border-radius: var(--rayon-carte);
  margin-top: 90px;
  padding: 90px 0 90px 90px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: 40px;
  align-items: center;
}

.livraison__carte h3 {
  font-size: 25px;
  font-weight: 700;
  max-width: 420px;
}

.livraison__carte p { margin-top: 26px; max-width: 460px; }

.livraison__carte img { margin-top: -160px; }

.livraison__sous-titre {
  max-width: 640px;
  margin: 110px auto 90px;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}

.livraison__grille {
  display: grid;
  grid-template-columns: minmax(0, 494px) minmax(0, 560px);
  justify-content: space-between;
  gap: 60px;
  align-items: start;
}

.accordeon { border-top: 1px solid rgba(238, 250, 249, 0.25); }

.accordeon__item { border-bottom: 1px solid rgba(238, 250, 249, 0.25); }

.accordeon__entete {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  padding: 18px 4px;
  cursor: pointer;
}

.accordeon__entete small {
  font-weight: 400;
  font-size: 20px;
  color: var(--keppel-200);
}

.accordeon__item--simple .accordeon__entete { cursor: default; margin: 0; }

.accordeon__croix {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}

.accordeon__croix::before,
.accordeon__croix::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 100%;
  height: 2px;
  background: var(--keppel-200);
  transition: transform var(--transition);
}

.accordeon__croix::after { transform: rotate(90deg); }

.accordeon__item.ouvert .accordeon__croix::after { transform: rotate(0deg); }

.accordeon__contenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition);
}

.accordeon__contenu p {
  padding: 0 4px 22px;
  font-size: 16px;
  color: var(--keppel-50);
}

/* ---------- Page Contact ---------- */

.hero-contact {
  position: relative;
  background: var(--daintree-500);
  color: var(--blanc);
  padding-top: 172px;
  overflow: visible;
}

/* (blob commun défini avec .hero-cible::before) */

.hero-contact__grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 478px);
  justify-content: space-between;
  gap: 60px;
}

.hero-contact__texte { padding-bottom: 120px; }

.hero-contact__texte p {
  margin-top: 46px;
  font-weight: 700;
  max-width: 560px;
  line-height: 1.8;
}

.coordonnees {
  padding-block: 60px 80px;
}

.coordonnees address {
  font-style: normal;
  font-size: 18px;
  line-height: 2;
}

.coordonnees .turquoise { display: inline-block; margin-top: 8px; }

.coordonnees__tels {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.coordonnees__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 8px 26px 8px 8px;
  border-radius: 999px;
  background: var(--keppel-100);
  font-size: 18px;
  transition: background var(--transition);
}

.coordonnees__tel:hover { background: var(--keppel-200); }

.coordonnees__tel .btn__cercle { width: 36px; height: 36px; }

/* Formulaire — carte blanche qui chevauche le hero sombre */
.formulaire {
  position: relative;
  z-index: 2;
  background: var(--blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 40px 44px 34px;
  color: var(--daintree-500);
  margin-bottom: -160px;
}

.formulaire h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--keppel-500);
}

.formulaire > p { font-size: 16px; margin-top: 6px; }

.formulaire__ligne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.champ { position: relative; margin-top: 30px; }

.champ input,
.champ textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--keppel-500);
  padding: 6px 0 8px;
  font-family: inherit;
  font-size: 16px;
  color: var(--daintree-500);
  background: none;
  outline: none;
  resize: vertical;
}

.champ label {
  position: absolute;
  left: 0;
  top: 6px;
  font-size: 14px;
  color: rgba(0, 44, 57, 0.55);
  pointer-events: none;
  transition: top var(--transition), font-size var(--transition), color var(--transition);
}

.champ input:focus + label,
.champ input:not(:placeholder-shown) + label,
.champ textarea:focus + label,
.champ textarea:not(:placeholder-shown) + label {
  top: -14px;
  font-size: 11px;
  color: var(--keppel-500);
}

.champ.erreur input,
.champ.erreur textarea { border-color: #C0392B; }

.formulaire__rgpd {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.5;
}

.formulaire__rgpd input {
  margin-top: 3px;
  accent-color: var(--keppel-500);
}

.formulaire__envoi {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}

.formulaire__confirmation {
  margin-top: 18px;
  font-size: 14px;
  color: var(--keppel-700);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1240px) {
  .points-forts__grille { grid-template-columns: repeat(2, 1fr); gap: 60px 40px; }
  .point-fort__photo { margin-top: 30px; }
  .point-fort h3 { margin-top: 30px; }
  .dechets__grille { grid-template-columns: 1fr 1fr; }
  .dechets__grille .dechets__texte { grid-column: 1 / -1; order: -1; padding: 0; }
  .dechets__texte p, .dechets__icone { padding-left: 0; margin-left: 0; }
  .dechets .badge-rotatif { right: 40px; }
  .footer__partenaires { padding-left: 0; }
  .footer__haut { grid-template-columns: 1fr 1fr; }
  .hero-cible__photo { height: 640px; }
  .livraison__carte { padding: 60px; grid-template-columns: 1fr; }
  .livraison__carte img { margin-top: 0; }
}

@media (max-width: 900px) {
  .hero { padding-top: 170px; padding-bottom: 190px; }
  .hero__visuel { width: 78%; opacity: 0.35; }
  .hero__points { flex-wrap: wrap; gap: 20px; }
  .pourquoi__grille { grid-template-columns: 1fr; }
  .pourquoi__visuel { min-height: 0; }
  .pour-qui__grille { grid-template-columns: 1fr; justify-items: center; }
  .carte-cible { width: min(404px, 100%); }
  .temoignage.actif { grid-template-columns: 1fr; }
  .deux-colonnes__ligne,
  .deux-colonnes__ligne--inverse { grid-template-columns: 1fr; }
  .deux-colonnes__ligne--inverse img { order: 0; }
  .slider-photos__piste img { width: 78vw; }
  .cta-contact__carte { padding: 200px 40px 60px; margin-left: 0; }
  .cta-contact__visuel { width: 62%; max-width: 340px; left: 20px; bottom: auto; top: -60px; }
  .footer__haut { grid-template-columns: 1fr; gap: 40px; }
  .footer__bas .contenu { flex-wrap: wrap; gap: 14px 30px; padding-bottom: 70px; }
  .hero-cible__grille,
  .approuve__grille,
  .hero-apropos__grille,
  .hero-contact__grille,
  .livraison__grille { grid-template-columns: 1fr; }
  .hero-cible__photo { height: 460px; }
  .hero-apropos .badge-rotatif { position: static; margin-top: 40px; }
  .apropos-photos__ligne1 { grid-template-columns: 1fr; }
  .apropos-photos__ligne2 { grid-template-columns: 1fr; justify-items: center; }
  .apropos-photos__ligne2 img:last-child { transform: rotate(3deg); }
  .equipe__grille { grid-template-columns: 1fr; justify-items: center; }
  .equipe__carte { width: min(330px, 100%); }
  .etapes__grille { grid-template-columns: 1fr 1fr; }
  .etape img { height: 320px; }
  .dechets__grille { grid-template-columns: 1fr; justify-items: center; }
  .formulaire { margin-bottom: 0; }
  .hero-contact__texte { padding-bottom: 60px; }
  .hero-contact { padding-bottom: 40px; }
  .formulaire__ligne { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 560px) {
  .etapes__grille { grid-template-columns: 1fr; }
  .points-forts__grille { grid-template-columns: 1fr; }
  .confiance__logos img { height: 44px; }
  .footer__signature { font-size: 11px; padding: 7px 16px; }
}

/* ---------- Réserves visuelles (photos jamais archivées, à fournir) ---------- */

.deux-colonnes__reserve {
  width: min(440px, 100%);
  aspect-ratio: 4 / 5;
  max-height: 480px;
  border-radius: var(--rayon-carte);
  background: var(--keppel-100);
  color: var(--keppel-500);
  display: grid;
  place-items: center;
  justify-self: center;
}

.deux-colonnes__reserve svg { width: 90px; height: 90px; }

.equipe__reserve {
  height: 405px;
  background: var(--keppel-100);
  color: var(--keppel-500);
  font-size: 64px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ---------- Compléments SEO / UI ---------- */

/* titres de colonnes du footer (sémantique : hors hiérarchie Hn) */
.footer__titre {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--keppel-300);
  margin: 0 0 20px;
}

/* liens contextuels dans les contenus */
.lien-texte {
  color: var(--keppel-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.lien-texte:hover { color: var(--keppel-800); }

.points-forts .lien-texte { color: var(--keppel-300); }

.points-forts .lien-texte:hover { color: var(--keppel-100); }

/* ancres : ne pas passer sous le header fixe */
[id] { scroll-margin-top: 130px; }

/* bouton du formulaire pendant l'envoi */
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* éléments masqués via l'attribut hidden (sections désactivées à la demande) */
[hidden] { display: none !important; }