/*
 * Page « Nos plus » : en-tête avec puces de navigation, sections texte + image,
 * bulles « Parents engagés », cartes des bilans.
 */

@keyframes cemFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes eauGauche { to { -webkit-mask-position: -200px 0; mask-position: -200px 0; } }
@keyframes eauDroite { to { -webkit-mask-position: 200px 0; mask-position: 200px 0; } }
@keyframes bulleMonte {
  0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; }
  100% { transform: translateY(-70px) scale(1.1); opacity: 0; }
}
@keyframes bubblePulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(1.22); opacity: 0; } 100% { transform: scale(1.22); opacity: 0; } }
@keyframes bubbleHop { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-10px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }
@keyframes bubbleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- En-tête de page ---------- */

.np-haut { position: relative; background: var(--creme-clair); padding-bottom: 110px; }
.np-haut-int {
  max-width: 960px; margin: 0 auto; padding: 88px 24px 0; position: relative;
  display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center;
}
.np-haut-dessin {
  position: absolute; left: 562px; top: 41px; margin-left: 70px; width: 58px; height: 107px; pointer-events: none;
  animation: cemFloat 7s ease-in-out -4s infinite;
}
.np-haut h1 { margin: 0; font-family: Delius, sans-serif; font-weight: 700; font-size: 48px; line-height: 1.1; color: var(--encre); }
.np-haut-int > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texte); max-width: 560px; text-wrap: pretty; }
.np-haut-courbe { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 150px; display: block; }
.np-haut-marcheur {
  position: absolute; left: 0; top: 0; height: 48px; pointer-events: none; opacity: 0;
  transform-origin: 50% 100%; will-change: transform;
}

/* Puces de navigation : l'eau monte au survol */
.puces { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; max-width: 820px; position: relative; z-index: 1; }
.puce {
  --on: 0; position: relative; display: inline-flex; align-items: center; font-family: Delius, sans-serif; font-size: 14px;
  color: var(--encre); background: var(--creme-clair); border: 1.5px solid var(--c); padding: 8px 14px; border-radius: 999px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), color .4s;
}
.puce:hover { --on: 1; transform: translateY(-3px); color: #fff; }
.puce-eau { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; pointer-events: none; }
.puce-niveau {
  position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden;
  height: calc(var(--on) * 100%); transition: height .7s cubic-bezier(.4, 0, .2, 1);
}
.puce-vague {
  position: absolute; left: 0; right: 0; top: -10px; height: 30px; background: var(--c); opacity: .5;
  -webkit-mask: url(../dessins/vague.svg) 0 0 / 200px 30px repeat-x; mask: url(../dessins/vague.svg) 0 0 / 200px 30px repeat-x;
  animation: eauGauche 3s linear infinite;
}
.puce-vague--2 { top: -4px; opacity: .8; animation: eauDroite 4.5s linear infinite; }
.puce-fond { position: absolute; inset: 20px 0 0 0; background: var(--c); }
.puce-bulles { position: absolute; inset: 0; opacity: var(--on); transition: opacity .3s; pointer-events: none; }
.puce-bulles span {
  position: absolute; top: 6px; border-radius: 50%; border: 1.5px solid var(--c); background: rgba(255, 255, 255, .6);
  animation-name: bulleMonte; animation-timing-function: ease-in; animation-iteration-count: infinite;
}
.puce-texte { position: relative; pointer-events: none; }

/* ---------- Bandeaux numérotés 01, 02, 03 ---------- */

.np-partie--premiere { padding-top: 48px; }
.np-partie { position: relative; }
.np-partie-ligne { display: flex; align-items: center; flex-wrap: wrap; }
.np-partie-bandeau {
  display: flex; align-items: center; gap: 16px; background: var(--c); min-width: 0;
  padding: 12px 30px 12px clamp(24px, 4vw, 56px); border-radius: 0 40px 40px 0; box-shadow: 0 8px 20px rgba(80, 60, 40, .14);
}
.np-partie-numero {
  flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--creme-clair); color: var(--c);
  display: flex; align-items: center; justify-content: center; font-family: Delius, sans-serif; font-weight: 700; font-size: 19px;
}
.np-partie h2 { margin: 0; font-family: Delius, sans-serif; font-weight: 700; font-size: 36px; line-height: 1.1; color: #fff; text-wrap: balance; min-width: 0; }
.np-partie-trait { flex: 1; height: 3px; border-radius: 2px; background: var(--c); min-width: 40px; }

/* ---------- Sections texte + image ---------- */

.np-section { position: relative; padding: 120px 24px 48px; }
/* La première rubrique d'une partie n'a pas de vague au-dessus : elle commence plus haut */
.np-section.np-premiere { padding-top: 40px; }
.parents:not(.np-premiere), .bilans:not(.np-premiere) { padding-top: 120px; }
.np-grille {
  max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 48px; align-items: center;
}
.np-grille--image-gauche { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.np-grille--sans-image { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.np-grille--nuage { grid-template-columns: minmax(0, 1fr) minmax(0, min(424px, 46%)); }
.np-texte { display: flex; flex-direction: column; gap: 14px; }
.np-texte h2, .bilans-titres h2 {
  margin: 0; font-family: Delius, sans-serif; font-weight: 700; font-size: 30px; line-height: 1.15; color: var(--encre); text-wrap: balance;
}
.np-pastille { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 12px; vertical-align: middle; }
.np-sous-titre { font-family: Delius, sans-serif; font-size: 17px; margin-top: -6px; }
.np-texte p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--texte); text-wrap: pretty; }
.np-texte .np-accroche { font-size: 17px; line-height: 1.55; color: var(--encre-fonce); }

.np-media { display: flex; justify-content: center; }
.np-dessin { width: 100%; max-width: 340px; display: block; transform: rotate(-2deg); transition: transform .4s; }
.np-dessin:hover { transform: rotate(0deg) scale(1.04); }
.np-polaroid {
  --cadre: 1.3333; background: #fff; padding: 10px 10px 30px; border-radius: 6px; box-shadow: 0 20px 40px rgba(80, 60, 40, .14);
  transform: rotate(var(--rot)); width: 100%; max-width: 340px; box-sizing: border-box; position: relative; transition: transform .4s;
}
.np-polaroid:hover { transform: rotate(0deg) scale(1.03); }
.np-polaroid-cadre { position: relative; aspect-ratio: var(--cadre); overflow: hidden; background: #EFE6DA; }
.np-polaroid-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Photo déplacée et zoomée dans son cadre (back-office) : même calcul que .img-reglee des actualités (accueil.css, admin.css) */
.np-polaroid-cadre .img-reglee {
  --entiere: min(1, var(--r) / var(--cadre));
  --remplit: max(1, var(--r) / var(--cadre));
  --s: calc((var(--entiere) + min(var(--t), 100) / 100 * (var(--remplit) - var(--entiere))) * max(var(--t), 100) / 100);
  position: absolute; max-width: none; object-fit: fill;
  width: calc(var(--s) * 100%); height: calc(var(--s) * var(--cadre) / var(--r) * 100%);
  left: calc((1 - var(--s)) * var(--x) * 100%);
  top: calc((1 - var(--s) * var(--cadre) / var(--r)) * var(--y) * 100%);
}
.np-polaroid--rond { padding: 10px; border-radius: 50%; }
.np-polaroid--rond .np-polaroid-cadre { border-radius: 50%; }
.np-polaroid--arche { border-radius: 50% 50% 6px 6px / 38% 38% 6px 6px; }
.np-polaroid--arche .np-polaroid-cadre { border-radius: 50% 50% 0 0 / 40% 40% 0 0; }
.np-polaroid .points { right: 12px; bottom: 9px; gap: 5px; }
.np-polaroid--rond .points { right: 50%; bottom: -24px; transform: translateX(50%); }
.np-polaroid .points i { width: 10px; height: 10px; }
.np-media--deux { align-items: center; align-self: stretch; gap: 16px; }
.np-dessin-etroit {
  width: auto; max-width: 110px; height: 210px; object-fit: contain; display: block; mix-blend-mode: multiply;
  transform: rotate(var(--rot)); transition: transform .4s;
}
.np-dessin-etroit:hover { transform: rotate(0deg) scale(1.04); }

/* ---------- Méditation : la vidéo dans son nuage (05/11/2026, maquette A) ----------
   Une bulle de pensée qui respire lentement, et deux petites bulles du côté du texte.
   Un clic met la vidéo en pause ; le triangle n'apparaît qu'à ce moment-là. */
.np-nuage { position: relative; width: 100%; max-width: 400px; animation: np-nuage-souffle 8s ease-in-out infinite; }
@keyframes np-nuage-souffle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.np-nuage svg { position: absolute; }
.np-nuage-corps { position: relative; aspect-ratio: 1.16; filter: drop-shadow(0 14px 22px rgba(80, 60, 40, .2)); }
.np-nuage-contour, .np-nuage-film { position: absolute; inset: 0; clip-path: url(#np-nuage-forme); }
.np-nuage-contour { background: #fff; transform: scale(1.035); }
.np-nuage-corps:has(:focus-visible) .np-nuage-contour { background: var(--turquoise-fonce); }
.np-nuage-film { display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 0; border: 0; background: #EFE6DA; cursor: pointer; }
.np-nuage-film:focus { outline: none; }
.np-nuage-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.np-nuage-film.en-pause::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%232C7772'/%3E%3C/svg%3E") center / 34px no-repeat;
}
.np-nuage-bulle { position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 5px 12px rgba(80, 60, 40, .18); }
.np-nuage-bulle--1 { width: 11%; left: -3%; bottom: 15%; }
.np-nuage-bulle--2 { width: 6%; left: -9%; bottom: 7%; }

/* ---------- Parents engagés : les trois bulles ---------- */

.parents { padding: 40px 24px 24px; position: relative; }
.parents-int { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.parents-bulles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 22px; align-items: start; }
.parents-choix {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px; transition: transform .3s;
}
.parents-choix:hover { transform: translateY(-4px); }
.parents-choix:focus-visible { outline: 3px solid var(--c); outline-offset: 6px; border-radius: 12px; }
.bulle { position: relative; width: 150px; height: 150px; display: block; }
.bulle-onde {
  position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c); pointer-events: none;
  animation: bubblePulse 2.6s ease-out var(--delai) infinite;
}
.parents-choix[aria-pressed="true"] .bulle-onde { visibility: hidden; }
.bulle-rond {
  width: 150px; height: 150px; border-radius: 50%; background: var(--clair); border: 3px solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: all .3s; animation: bubbleBob 4s ease-in-out var(--delai) infinite;
}
.parents-choix[aria-pressed="true"] .bulle-rond { border-color: var(--c); box-shadow: 0 10px 24px rgba(80, 60, 40, .14); }
.parents-choix:hover .bulle-rond { transform: scale(1.08) rotate(-3deg); box-shadow: 0 16px 32px rgba(80, 60, 40, .18); animation: none; }
.bulle-rond img { height: 56px; }
.parents-choix:hover .bulle-rond img { animation: bubbleHop .7s ease-in-out infinite; }
.bulle-etiquette { font-size: 12px; letter-spacing: .06em; color: var(--etiquette); font-weight: 600; text-transform: uppercase; }
.parents-titre { font-family: Delius, sans-serif; font-size: 20px; color: var(--encre); }
.parents-resume { font-size: 14.5px; line-height: 1.6; color: var(--texte); text-wrap: pretty; }
.parents-consigne { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: #9A938C; margin-top: -6px; }
.parents-consigne-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--actif, var(--rose)); transition: background .3s; }
.parents-detail {
  max-width: 760px; width: 100%; margin: 0 auto; box-sizing: border-box; background: var(--creme-clair);
  border: 2px dotted var(--c); border-radius: 40px 14px 40px 40px; padding: 22px 30px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center;
}
.parents-detail[hidden] { display: none; }
.parents-detail-texte { display: flex; flex-direction: column; gap: 10px; }
.parents-detail-titre { font-family: Delius, sans-serif; font-size: 18px; color: var(--c); }
.parents-detail p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--texte); text-wrap: pretty; }
.parents-detail-logo { width: 100px; }

/* ---------- Nos bilans ---------- */

.bilans { padding: 40px 24px 20px; position: relative; }
.bilans-int { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.bilans-titres { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.bilans-titres p { margin: 0; font-size: 16px; color: #6B655F; max-width: 560px; text-wrap: pretty; }
.bilans-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.bilan {
  position: relative; border-radius: 24px; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(160deg, var(--clair) 0%, var(--clair) 18%, var(--creme-clair) 70%);
  box-shadow: 0 8px 24px rgba(80, 60, 40, .06); transition: transform .3s;
}
.bilan:hover { transform: translateY(-4px); }
.bilan-socle { position: absolute; left: -10px; top: -10px; width: 58px; height: 58px; border-radius: 50%; background: var(--beige); }
.bilan-rond {
  position: absolute; left: -4px; top: -4px; width: 46px; height: 46px; border-radius: 50%; background: var(--c);
  display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 6px 16px rgba(80, 60, 40, .14);
}
.bilan-rond img { height: 34px; filter: brightness(0) invert(1); opacity: .95; pointer-events: none; }
/* Titre sur une ligne, réduit jusqu'à 15 px s'il le faut (nos-plus.js) ; plus long, il passe sur deux
   lignes au lieu de déborder de la carte */
.bilan-titre {
  display: flex; align-items: center; padding-left: 36px; min-height: 30px; position: relative; z-index: 1;
  font-family: Delius, sans-serif; font-weight: 700; font-size: 18px; color: var(--fonce); line-height: 1.2; text-wrap: balance;
}
.bilan-titre--long { font-size: 16px; }
.bilan p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--texte); text-align: justify; hyphens: auto; text-wrap: pretty; }

/* ---------- Téléphone et animations réduites ---------- */

@media (max-width: 760px) {
  .np-haut h1 { font-size: clamp(36px, 10vw, 48px); }
  .np-partie h2 { font-size: clamp(24px, 6.5vw, 36px); }
  .np-grille, .np-grille--image-gauche { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .np-media--deux { flex-wrap: wrap; }
  .np-nuage-bulle--1 { left: 1%; bottom: 4%; }
  .np-nuage-bulle--2 { left: 0; bottom: -3%; }
  .parents-detail { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .np-haut-dessin, .bulle-onde, .bulle-rond, .np-nuage { animation: none; }
}

/* La dernière rubrique de la page touche presque la vague du bloc « Un renseignement ? » */
main > .np-section:last-child { padding-bottom: 8px; }