/* ==========================================================================
   Page produit Odilon : « 22 h, un dimanche soir ».
   Couleurs du produit : bleu nuit #0A0D60, rose #FF3B6B, lavande.
   1. Hero (nuit) : l'horloge passe à 22:00, la mairie affiche « Fermé »,
      l'assistant de la commune reçoit une question et répond par la démarche.
   2. Les attentes des habitants : trois petites scènes jouées une fois à l'écran.
   3. « Vous validez, on publie » (section collante, ordinateur) : l'actualité
      validée part se poser sur le site, l'application et les réseaux.
   4. Les services : tuiles et pictos animés une fois. 5. L'objectif.
   Sans JS / mouvement réduit / mobile : états finaux, tout lisible.
   ========================================================================== */

.sumo-pp--odilon {
	--od-nuit: #0a0d60; --od-nuit-2: #141a86; --od-nuit-3: #262da6;
	--od-rose: #ff3b6b; --od-rose-texte: #c8154a; --od-rose-bouton: #e11d52;
	--od-lavande: #eef0fb; --od-lavande-2: #dcdff7; --od-encre: #161942; --od-gris: #5b5e86;
	--od-vert: #157347; --od-vert-pale: #e6f4ec; --od-ease: cubic-bezier(.2, .8, .2, 1);
}
.pp--odilon { color: var(--od-encre); }
.pp--odilon .pp-sur { color: var(--od-rose-texte); }
.pp--odilon .pp-contenu .pp-titre { color: var(--od-nuit); }
.pp--odilon .pp-lien { color: var(--od-nuit); }
.pp--odilon :is(a, button):focus-visible { outline: 3px solid var(--od-nuit); outline-offset: 3px; }
.od-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pp--odilon [aria-hidden="true"] p { margin: 0; }

/* --- 1. Hero : la nuit ------------------------------------------------------- */
.od-hero { background: var(--od-nuit); color: #fff; padding-top: clamp(48px, 6vw, 96px); overflow: hidden; }
.od-hero::before {                                  /* une lueur douce derrière la scène */
	content: ""; position: absolute; right: -10%; top: 10%; width: 60%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(110, 118, 255, .18), transparent); pointer-events: none;
}
.od-hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; position: relative; }
.od-logo { display: block; height: 44px; width: auto; margin-bottom: 28px; }
.pp-contenu .od-hero .pp-titre { color: #fff; font-size: clamp(2.8rem, 6vw, 5.2rem); margin-bottom: 12px; }
.od-accroche { font-family: var(--font-title); font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.2; color: #c9ccf5; margin: 0 0 22px; max-width: 22em; }
.od-hero .pp-texte { color: #e3e5fa; }
.od-hero .pp-lien { color: #fff; }
.od-hero :is(a, button):focus-visible { outline-color: var(--od-rose); }
.od-bouton { display: inline-flex; align-items: center; gap: 12px; background: var(--od-rose-bouton); color: #fff; font-weight: 700; padding: 15px 26px; border-radius: 999px; text-decoration: none; transition: background .2s ease; }
.od-bouton:hover, .od-bouton:focus-visible { background: var(--od-rose-texte); color: #fff; }

.od-hero__visuel { position: relative; width: 100%; max-width: min(100%, 640px, 75vh + 60px); justify-self: center; }
.od-scene { position: relative; container-type: inline-size; aspect-ratio: 100 / 92; }
.od-scene * { box-sizing: border-box; }

/* le ciel */
.od-etoiles i { position: absolute; width: .7cqw; height: .7cqw; border-radius: 50%; background: #fff; opacity: .55; }
.od-etoiles i:nth-child(1) { left: 40cqw; top: 2cqw; }
.od-etoiles i:nth-child(2) { left: 30cqw; top: 26cqw; opacity: .35; }
.od-etoiles i:nth-child(3) { left: 50cqw; top: 18cqw; }
.od-etoiles i:nth-child(4) { left: 6cqw; top: 30cqw; opacity: .4; }
.od-etoiles i:nth-child(5) { left: 22cqw; top: 36cqw; width: .5cqw; height: .5cqw; }
.od-etoiles i:nth-child(6) { left: 96cqw; top: 2cqw; opacity: .35; }
.od-etoiles i:nth-child(7) { left: 45cqw; top: 34cqw; width: .5cqw; height: .5cqw; opacity: .4; }
.od-lune { position: absolute; left: 38cqw; top: 7cqw; width: 7cqw; height: 7cqw; border-radius: 50%; box-shadow: inset -1.8cqw -.6cqw 0 0 #ffe3a8; rotate: -25deg; }

/* l'horloge */
.od-horloge { position: absolute; left: 0; top: 2cqw; padding: 2.4cqw 3.2cqw 2.2cqw; border-radius: 2.6cqw; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); }
.od-horloge__jour { display: block; font-size: 2.2cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--od-rose); margin-bottom: 1.4cqw; }
.od-horloge__heure { display: flex; font-family: var(--font-title); font-weight: 700; font-size: 10.5cqw; line-height: 1; letter-spacing: .02em; color: #fff; }
.od-horloge__heure b { display: block; font-weight: inherit; height: 1em; }
.od-horloge__deux { color: var(--od-rose); margin: 0 .04em; }
.od-ch { display: block; height: 1em; overflow: hidden; }
.od-ch > span { display: flex; flex-direction: column; translate: 0 -1em; transition: translate .6s cubic-bezier(.6, 0, .2, 1) var(--d, 0s); }

/* la mairie */
.od-mairie { position: absolute; left: 0; bottom: 0; width: 62cqw; }
.od-mairie svg { display: block; width: 100%; height: auto; }
.od-m-fronton { fill: #1d2399; }
.od-m-oculus { fill: #0e1268; stroke: #3a42bf; stroke-width: 3; }
.od-m-corniche, .od-m-marche { fill: var(--od-nuit-3); }
.od-m-corps { fill: var(--od-nuit-2); }
.od-m-frise { fill: #10157a; }
.od-m-nom { fill: #c9ccf5; font: 700 13px/1 Lato, sans-serif; letter-spacing: 5px; }
.od-m-fen rect { fill: #0c1066; stroke: #333bb8; stroke-width: 2; transition: fill .5s ease; }
.od-m-porte { fill: #080b4e; stroke: #3a42bf; stroke-width: 2.5; }
.od-m-porte-ligne { stroke: #3a42bf; stroke-width: 2; }
.od-pancarte { position: absolute; left: 50%; top: 71%; width: 15cqw; margin-left: -7.5cqw; transform-origin: 50% 0; text-align: center; }
.od-pancarte svg { display: block; width: 9cqw; height: auto; margin: 0 auto -.2cqw; overflow: visible; }
.od-pancarte path { fill: none; stroke: #c9ccf5; stroke-width: 1.6; }
.od-pancarte b { display: block; background: #fff; color: var(--od-rose-texte); font-size: 2.7cqw; font-weight: 800; letter-spacing: .04em; padding: 1cqw 0; border-radius: 1cqw; box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, .35); }

/* le téléphone */
.od-tel { position: absolute; right: 0; top: 3cqw; width: 45cqw; padding: 2cqw; border-radius: 7cqw; background: #05073a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 4cqw 9cqw -3cqw rgba(0, 0, 0, .7), 0 0 14cqw -2cqw rgba(140, 148, 255, .45); }
.od-tel__ecran { container-type: inline-size; display: flex; flex-direction: column; aspect-ratio: 9 / 15.4; overflow: hidden; border-radius: 5.4cqw; background: #f5f6fd; color: var(--od-encre); }
.od-tel__ecran * { line-height: 1.35; }
.od-tel__tete { display: flex; align-items: center; gap: 3.4cqw; padding: 10cqw 5cqw 4.4cqw; background: var(--od-nuit); color: #fff; }
.od-tel__tete b { display: block; font-size: 5.2cqw; }
.od-tel__tete small { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.9cqw; color: #c9ccf5; }
.od-tel__tete small::before { content: ""; width: 2cqw; height: 2cqw; border-radius: 50%; background: #3ed68a; }
.od-tel__avatar { flex: none; display: flex; align-items: center; justify-content: center; gap: 1cqw; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--od-rose); }
.od-tel__avatar i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #fff; }
.od-fil { flex: 1; display: flex; flex-direction: column; gap: 3.2cqw; padding: 4.6cqw 4.4cqw; }
.od-fil__date { align-self: center; font-size: 3.5cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--od-gris); }
.od-bulle { font-size: 4.8cqw; padding: 2.8cqw 3.8cqw; }
.od-bulle--q { align-self: flex-end; max-width: 82%; background: var(--od-nuit); color: #fff; border-radius: 4.4cqw 4.4cqw 1.2cqw 4.4cqw; }
.od-rep { position: relative; align-self: flex-start; max-width: 90%; }
.od-bulle--r { background: #fff; border: 1px solid var(--od-lavande-2); border-radius: 4.4cqw 4.4cqw 4.4cqw 1.2cqw; }
.od-saisie { position: absolute; left: 0; top: 0; display: none; gap: 1.4cqw; align-items: center; background: #fff; border: 1px solid var(--od-lavande-2); border-radius: 4.4cqw 4.4cqw 4.4cqw 1.2cqw; padding: 3.8cqw 4.2cqw; }
.od-saisie i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: var(--od-nuit); opacity: .45; }
.od-demarche { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.6cqw 3cqw; align-items: center; background: #fff; border-radius: 4.4cqw; padding: 4cqw; box-shadow: 0 3cqw 6cqw -3cqw rgba(10, 13, 96, .35), 0 0 0 1px var(--od-lavande-2); }
.od-demarche__picto { display: flex; width: 10.5cqw; height: 10.5cqw; border-radius: 2.6cqw; background: #ffe4eb; color: var(--od-rose-texte); align-items: center; justify-content: center; }
.od-demarche__picto svg { width: 6.6cqw; height: 6.6cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.od-demarche__txt b { display: block; font-size: 4.6cqw; color: var(--od-nuit); }
.od-demarche__txt small { display: block; font-size: 3.7cqw; color: var(--od-gris); }
.od-demarche__btn { grid-column: 1 / -1; display: block; text-align: center; font-size: 4.4cqw; font-weight: 700; color: #fff; background: var(--od-rose-bouton); border-radius: 99px; padding: 2.8cqw; }
.od-tel__champ { padding: 3cqw 4.4cqw 6cqw; background: #fff; border-top: 1px solid var(--od-lavande-2); }
.od-tel__champ span { display: block; font-size: 4.2cqw; color: var(--od-gris); border: 1px solid var(--od-lavande-2); border-radius: 99px; padding: 2.4cqw 4cqw; }

.od-rejouer[hidden] { display: none; }
.od-rejouer { display: block; margin: 18px 0 0 auto; background: none; border: 0; padding: 6px 0; font: 700 .875rem/1 inherit; color: #fff; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.od-rejouer:hover { color: #ffb3c5; }

/* la scène jouée (.is-anim posé par pp-odilon.js) */
.od-hero.is-anim:not(.is-22) .od-ch > span { translate: 0 0; transition-duration: 0s; }
.od-hero.is-anim .od-pancarte { opacity: 0; translate: 0 -2cqw; }
.od-hero.is-anim.is-ferme .od-pancarte { opacity: 1; translate: 0 0; animation: od-balance 1.5s cubic-bezier(.3, .6, .4, 1) both; }
@keyframes od-balance {
	0% { opacity: 0; translate: 0 -2cqw; rotate: 0deg; }
	12% { opacity: 1; translate: 0 0; rotate: 16deg; }
	34% { rotate: -11deg; }
	56% { rotate: 6deg; }
	76% { rotate: -3deg; }
	100% { rotate: 0deg; }
}
.od-hero.is-anim :is(.od-fil__date, .od-bulle--q, .od-bulle--r, .od-demarche) { transition: opacity .45s ease, translate .55s var(--od-ease), scale .55s var(--od-ease); }
.od-hero.is-anim:not(.is-q) :is(.od-fil__date, .od-bulle--q) { opacity: 0; translate: 0 3cqw; }
.od-hero.is-anim:not(.is-q) .od-bulle--q { scale: .92; transform-origin: 100% 100%; }
.od-hero.is-anim:not(.is-r) .od-bulle--r { opacity: 0; translate: 0 3cqw; }
.od-hero.is-anim:not(.is-carte) .od-demarche { opacity: 0; translate: 0 5cqw; scale: .96; }
.od-hero.is-anim.is-saisie:not(.is-r) .od-saisie { display: flex; }
.od-hero.is-anim.is-saisie .od-saisie i { animation: od-point .5s ease-in-out 3 alternate both; }
.od-hero.is-anim.is-saisie .od-saisie i:nth-child(2) { animation-delay: .15s; }
.od-hero.is-anim.is-saisie .od-saisie i:nth-child(3) { animation-delay: .3s; }
@keyframes od-point { from { translate: 0 0; opacity: .3; } to { translate: 0 -1.4cqw; opacity: .9; } }
.od-hero.is-anim.is-carte .od-demarche__btn { animation: od-pop .5s cubic-bezier(.2, 1.5, .4, 1) .35s both; }
@keyframes od-pop { 0% { scale: .85; } 100% { scale: 1; } }

/* --- 2. Les attentes des habitants ------------------------------------------------ */
.od-attentes { background: #fff; }
.od-attentes__tete { max-width: 1000px; }
.od-attentes .pp-titre { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.od-attentes__liste { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.od-carte { display: flex; flex-direction: column; gap: 22px; background: var(--od-lavande); border-radius: 24px; padding: clamp(18px, 2vw, 28px); }
.pp-contenu .od-carte h3 { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.25rem, 1.6vw, 1.4rem); line-height: 1.2; color: var(--od-nuit); margin: 0; }
.od-mini { flex: 1; min-height: 250px; display: flex; flex-direction: column; gap: 14px; background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 24px 40px -30px rgba(10, 13, 96, .45); font-size: .875rem; line-height: 1.35; }
.od-mini__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.od-mini__tete b { color: var(--od-nuit); font-size: .9375rem; }
.od-mini__tete span { font-size: .8125rem; font-weight: 700; color: var(--od-gris); }
.od-ok { display: flex; align-items: center; gap: 8px; margin-top: auto !important; background: var(--od-vert-pale); color: var(--od-vert); font-weight: 700; font-size: .8125rem; padding: 10px 12px; border-radius: 10px; }
.od-ok i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--od-vert); position: relative; }
.od-ok i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; }

/* rendez-vous */
.od-rdv__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.od-rdv__grille span { text-align: center; padding: 9px 0; border-radius: 10px; border: 1px solid var(--od-lavande-2); font-weight: 700; font-size: .8125rem; color: var(--od-nuit); transition: background .3s ease, color .3s ease, border-color .3s ease, scale .35s cubic-bezier(.2, 1.5, .4, 1); }
.od-rdv__grille .is-pris { background: #f4f4fa; border-color: #f4f4fa; color: var(--od-gris); text-decoration: line-through; font-weight: 400; }
.od-rdv__grille .od-rdv__choix { background: var(--od-rose-bouton); border-color: var(--od-rose-bouton); color: #fff; }

/* signalement */
.od-sig__haut { display: flex; gap: 14px; align-items: flex-start; }
.od-sig__lampe { flex: none; width: 44px; height: 82px; overflow: visible; }
.od-l-mat, .od-l-tete { fill: none; stroke: var(--od-nuit); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.od-l-tete { fill: var(--od-nuit); stroke-width: 2; }
.od-l-halo { fill: #ffd76a; opacity: .45; transition: opacity .5s ease; }
.od-l-ampoule { fill: #ffc93c; transition: fill .4s ease; }
.od-sig__txt small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--od-gris); }
.od-sig__txt b { display: block; font-size: 1rem; color: var(--od-nuit); margin-top: 2px; }
.od-sig__txt span { color: var(--od-gris); }
.od-sig__etapes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; font-size: .75rem; font-weight: 700; color: var(--od-nuit); }
.od-sig__etapes::before, .od-sig__etapes::after { content: ""; position: absolute; top: 7px; left: 16.66%; height: 3px; border-radius: 3px; }
.od-sig__etapes::before { right: 16.66%; background: var(--od-lavande-2); }
.od-sig__etapes::after { width: 66.68%; background: var(--od-vert); transform-origin: 0 50%; transition: scale 1.4s cubic-bezier(.5, 0, .3, 1); }
.od-sig__etapes li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.od-sig__etapes li::before { content: ""; width: 17px; height: 17px; border-radius: 50%; background: var(--od-vert); box-shadow: 0 0 0 3px #fff; transition: background .3s ease; }

/* horaires */
.od-hor__lune { display: inline-flex; align-items: center; gap: 6px; color: var(--od-nuit) !important; background: var(--od-lavande); padding: 3px 9px; border-radius: 99px; }
.od-hor__lune::before { content: ""; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset -3px -1px 0 0 var(--od-nuit); rotate: -25deg; }
.od-hor__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.od-hor__liste li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; transition: opacity .4s ease, translate .5s var(--od-ease), background .4s ease; }
.od-hor__liste li span:last-child { font-weight: 700; color: var(--od-nuit); white-space: nowrap; }
.od-hor__liste em { font-style: normal; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--od-rose-texte); margin-left: 4px; }
.od-hor__auj { background: #ffe9ef; }
.od-hor__auj span:last-child { color: var(--od-rose-texte) !important; }
.od-hor__suite { margin-top: auto !important; font-size: .8125rem; font-weight: 700; color: var(--od-nuit); padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--od-lavande-2); transition: opacity .4s ease; }

@media (prefers-reduced-motion: no-preference) {
	/* rendez-vous : un créneau se choisit, la réservation se confirme */
	.pp-js .od-carte:not(.is-vu) .od-rdv__choix { background: #fff; color: var(--od-nuit); border-color: var(--od-lavande-2); scale: 1; }
	.pp-js .od-carte .od-rdv__choix { transition-delay: calc(var(--pp-delai, 0s) + 1s); }
	.pp-js .od-carte.is-vu .od-rdv__choix { animation: od-pop .45s cubic-bezier(.2, 1.5, .4, 1) calc(var(--pp-delai, 0s) + 1s) both; }
	.pp-js .od-carte .od-ok, .pp-js .od-carte .od-hor__suite { transition: opacity .45s ease, translate .5s var(--od-ease); }
	.pp-js .od-carte:not(.is-vu) .od-ok, .pp-js .od-carte:not(.is-vu) .od-hor__suite { opacity: 0; translate: 0 10px; }
	.pp-js .od-carte .od-rdv__ok { transition-delay: calc(var(--pp-delai, 0s) + 1.6s); }
	/* signalement : reçu → en cours → traité, le lampadaire se rallume */
	.pp-js .od-carte:not(.is-vu) .od-sig__etapes::after { scale: 0 1; }
	.pp-js .od-carte .od-sig__etapes::after { transition-delay: calc(var(--pp-delai, 0s) + .7s); }
	.pp-js .od-carte:not(.is-vu) .od-sig__etapes li:not(:first-child)::before { background: var(--od-lavande-2); }
	.pp-js .od-carte .od-sig__etapes li:nth-child(2)::before { transition-delay: calc(var(--pp-delai, 0s) + 1.4s); }
	.pp-js .od-carte .od-sig__etapes li:nth-child(3)::before { transition-delay: calc(var(--pp-delai, 0s) + 2.1s); }
	.pp-js .od-carte:not(.is-vu) .od-l-halo { opacity: 0; }
	.pp-js .od-carte:not(.is-vu) .od-l-ampoule { fill: #c9ccdd; }
	.pp-js .od-carte .od-l-halo, .pp-js .od-carte .od-l-ampoule { transition-delay: calc(var(--pp-delai, 0s) + 2.3s); }
	.pp-js .od-carte .od-sig__ok { transition-delay: calc(var(--pp-delai, 0s) + 2.4s); }
	/* horaires : les lignes arrivent, aujourd'hui s'allume */
	.pp-js .od-carte:not(.is-vu) .od-hor__liste li { opacity: 0; translate: -10px 0; }
	.pp-js .od-carte .od-hor__liste li { transition-delay: calc(var(--pp-delai, 0s) + .5s + var(--i) * .15s); }
	.pp-js .od-carte:not(.is-vu) .od-hor__auj { background: transparent; }
	.pp-js .od-carte.is-vu .od-hor__auj { transition-delay: calc(var(--pp-delai, 0s) + .8s), calc(var(--pp-delai, 0s) + .8s), calc(var(--pp-delai, 0s) + 1.4s); }
	.pp-js .od-carte .od-hor__suite { transition-delay: calc(var(--pp-delai, 0s) + 1.9s); }
}

/* --- 3. Vous validez, on publie ------------------------------------------------- */
.od-publie { background: var(--od-lavande); padding: 0; }
.od-publie__colle { padding: clamp(64px, 9vw, 140px) 0; }
.od-publie__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.od-publie .pp-titre { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.od-publie__scene { position: relative; display: flex; flex-direction: column; align-items: center; }
.od-actu { position: relative; z-index: 1; width: min(100%, 460px); background: #fff; border-radius: 20px; padding: 20px 22px; box-shadow: 0 30px 60px -36px rgba(10, 13, 96, .55), 0 0 0 1px rgba(10, 13, 96, .05); }
.od-actu__etat { font-size: .75rem; font-weight: 700; }
.od-actu__etat .od-swap > span { justify-self: start; padding: 5px 12px; border-radius: 99px; }
.od-actu__etat .od-swap__a { background: #ffe4eb; color: var(--od-rose-texte); }
.od-actu__etat .od-swap__b { background: var(--od-vert-pale); color: var(--od-vert); }
.od-actu__titre { font-weight: 800; font-size: 1.125rem; line-height: 1.3; color: var(--od-nuit); margin: 12px 0 6px !important; }
.od-actu__texte { font-size: .9375rem; line-height: 1.5; color: var(--od-gris); }
.od-actu__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px !important; font-size: .875rem; font-weight: 700; }
.od-actu__actions > span { padding: 9px 18px; border-radius: 99px; }
.od-actu__modif { background: var(--od-lavande); color: var(--od-nuit); }
.od-valider { background: var(--od-vert); color: #fff; transition: background .3s ease, scale .3s cubic-bezier(.2, 1.5, .4, 1); }
.od-swap { display: inline-grid; }
.od-swap > span { grid-area: 1 / 1; transition: opacity .3s ease; }
.od-swap__a { opacity: 0; }
.od-liens { display: block; width: 66.6%; height: 54px; overflow: visible; }
.od-lien { fill: none; stroke: var(--od-nuit); stroke-width: 2; stroke-dasharray: .03 .025; vector-effect: non-scaling-stroke; opacity: .35; }
.od-dest { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.od-dest__el { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.od-cadre { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 1 / .92; display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 14px; box-shadow: 0 24px 40px -30px rgba(10, 13, 96, .5), 0 0 0 1px rgba(10, 13, 96, .06); padding-bottom: 12px; }
.od-cadre__barre { display: flex; gap: 2.4cqw; align-items: center; height: 11cqw; padding: 0 6cqw; border-bottom: 1px solid var(--od-lavande-2); }
.od-cadre__barre i { width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--od-lavande-2); }
.od-cadre__rubrique, .od-cadre__app { font-size: 6cqw; font-weight: 800; color: var(--od-nuit); padding: 0 6cqw; }
.od-cadre__app { background: var(--od-nuit); color: #fff; padding: 8cqw 6cqw 4cqw; border-radius: 12px 12px 0 0; }
.od-cadre__vieux { display: block; height: 9cqw; margin: 0 6cqw; border-radius: 2.4cqw; background: #f4f5fb; }
.od-cadre--app { width: 70%; aspect-ratio: 70 / 92; border-radius: 16px; }
.od-cadre__compte { display: flex; align-items: center; gap: 3cqw; padding: 6cqw 6cqw 0; font-size: 5.4cqw; color: var(--od-nuit); }
.od-cadre__compte i { display: flex; align-items: center; justify-content: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--od-nuit); color: #fff; font-style: normal; font-weight: 800; font-size: 5cqw; }
.od-cadre__reac { display: flex; gap: 4cqw; padding: 0 6cqw; margin-top: auto; }
.od-cadre__reac i { width: 7cqw; height: 7cqw; border-radius: 50%; border: 2px solid var(--od-lavande-2); }
.od-slot { padding: 0 6cqw; }
.od-pose { position: relative; z-index: 3; display: flex; gap: 3.4cqw; align-items: center; padding: 3.4cqw; border-radius: 3.4cqw; background: #fff4f7; box-shadow: 0 0 0 1px #ffd0dc; transition: opacity .35s ease, transform .8s cubic-bezier(.5, 0, .2, 1); }
.od-pose__img { flex: none; width: 16cqw; height: 16cqw; border-radius: 2.4cqw; background: linear-gradient(135deg, #ff9ab3, var(--od-rose)); }
.od-pose__txt { flex: 1; min-width: 0; }
.od-pose__txt b { display: block; font-size: 5.6cqw; line-height: 1.2; color: var(--od-nuit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-pose__txt i { display: block; width: 80%; height: 2.6cqw; margin-top: 2.4cqw; border-radius: 2cqw; background: #f3c4d1; }
.od-pose--post { flex-direction: column; align-items: stretch; }
.od-pose--post .od-pose__img { width: 100%; height: 26cqw; }
.od-dest__nom { font-family: var(--font-title); font-weight: 700; font-size: 1.0625rem; color: var(--od-nuit); }
.od-dest__etat { margin-top: -4px; font-size: .75rem; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: var(--od-vert-pale); color: var(--od-vert); transition: background .3s ease, color .3s ease; }
.od-dest__etat .od-swap__b::before { content: "✓ "; }
.od-dest__etat .od-swap > span { justify-self: center; }
.od-publie.is-anim :is(.od-dest__etat, .od-dest__etat .od-swap > span) { transition-delay: .55s; }

/* défilement (ordinateur) : validation, puis chaque destination reçoit l'actualité */
.od-publie.is-anim:not(.is-1) .od-valider { background: var(--od-nuit); }
.od-publie.is-anim.is-1 .od-valider { animation: od-pop .4s cubic-bezier(.2, 1.5, .4, 1); }
.od-publie.is-anim:not(.is-1) .od-actu .od-swap__a { opacity: 1; }
.od-publie.is-anim:not(.is-1) .od-actu .od-swap__b { opacity: 0; }
.od-publie.is-anim .od-lien { transition: stroke-dashoffset .8s ease, opacity .4s ease; }
.od-publie.is-anim:not(.is-2) .od-lien--1, .od-publie.is-anim:not(.is-3) .od-lien--2, .od-publie.is-anim:not(.is-4) .od-lien--3 { opacity: .12; }
.od-publie.is-anim:not(.is-2) .od-dest--site .od-pose,
.od-publie.is-anim:not(.is-3) .od-dest--app .od-pose,
.od-publie.is-anim:not(.is-4) .od-dest--res .od-pose { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -120px)) scale(var(--s, 1.5)); }
.od-publie.is-anim:not(.is-2) .od-dest--site .od-dest__etat,
.od-publie.is-anim:not(.is-3) .od-dest--app .od-dest__etat,
.od-publie.is-anim:not(.is-4) .od-dest--res .od-dest__etat { background: #fff; color: var(--od-gris); }
.od-publie.is-anim:not(.is-2) .od-dest--site .od-swap__a, .od-publie.is-anim:not(.is-3) .od-dest--app .od-swap__a, .od-publie.is-anim:not(.is-4) .od-dest--res .od-swap__a { opacity: 1; }
.od-publie.is-anim:not(.is-2) .od-dest--site .od-swap__b, .od-publie.is-anim:not(.is-3) .od-dest--app .od-swap__b, .od-publie.is-anim:not(.is-4) .od-dest--res .od-swap__b { opacity: 0; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
	.od-publie.is-anim { height: 300vh; }
	.od-publie.is-anim .od-publie__colle { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 48px 0; }
}

/* --- 4. Les services ------------------------------------------------------------- */
.od-services { background: #fff; }
.od-tuiles { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.od-tuiles--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.od-tuiles--5 .od-tuile { grid-column: span 2; }
.od-tuiles--5 .od-tuile:nth-child(-n+2) { grid-column: span 3; }
.od-tuile { display: flex; flex-direction: column; gap: 22px; background: var(--od-lavande); border-radius: 22px; padding: clamp(22px, 2.4vw, 32px); }
.od-tuile p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--od-encre); }
.od-picto { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: 0 14px 28px -18px rgba(10, 13, 96, .5); }
.od-picto svg { width: 44px; height: 44px; fill: none; stroke: var(--od-nuit); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.od-picto .od-p-plein { fill: var(--od-nuit); stroke: none; }
.od-picto .od-p-rose { stroke: var(--od-rose); stroke-width: 3; }
.od-picto .od-p-trace { stroke-dasharray: 1; stroke-dashoffset: 0; }
.od-picto .od-p-pastille { fill: var(--od-rose); stroke: #fff; stroke-width: 2; }
.od-picto .od-p-balance { transform-origin: 24px 8px; }
.od-picto .od-p-case { fill: var(--od-rose); stroke: var(--od-rose); }
.od-picto .od-p-point { fill: var(--od-rose); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
	.pp-js .od-tuile:not(.is-vu) .od-p-trace { stroke-dashoffset: 1; }
	.pp-js .od-tuile .od-p-trace { transition: stroke-dashoffset .7s cubic-bezier(.6, 0, .3, 1) calc(var(--pp-delai, 0s) + .6s); }
	.pp-js .od-tuile.is-vu .od-p-balance { animation: od-cloche 1.3s ease-in-out calc(var(--pp-delai, 0s) + .5s) both; }
	.pp-js .od-tuile.is-vu .od-p-pastille { animation: od-surgit .5s cubic-bezier(.2, 1.6, .4, 1) calc(var(--pp-delai, 0s) + .9s) both; transform-origin: 35.5px 10.5px; }
	.pp-js .od-tuile.is-vu .od-p-case { animation: od-surgit .5s cubic-bezier(.2, 1.6, .4, 1) calc(var(--pp-delai, 0s) + .7s) both; transform-origin: 31.5px 30px; }
	.pp-js .od-tuile.is-vu .od-p-point { animation: od-surgit .45s cubic-bezier(.2, 1.6, .4, 1) both; }
	.pp-js .od-tuile.is-vu .od-p-point:nth-of-type(1) { animation-delay: calc(var(--pp-delai, 0s) + .6s); transform-origin: 16.5px 21.5px; }
	.pp-js .od-tuile.is-vu .od-p-point:nth-of-type(2) { animation-delay: calc(var(--pp-delai, 0s) + .8s); transform-origin: 24px 21.5px; }
	.pp-js .od-tuile.is-vu .od-p-point:nth-of-type(3) { animation-delay: calc(var(--pp-delai, 0s) + 1s); transform-origin: 31.5px 21.5px; }
}
@keyframes od-cloche { 0%, 100% { rotate: 0deg; } 15% { rotate: 16deg; } 32% { rotate: -13deg; } 50% { rotate: 8deg; } 68% { rotate: -4deg; } 84% { rotate: 2deg; } }
@keyframes od-surgit { 0% { scale: 0; } 100% { scale: 1; } }

/* --- 5. L'objectif : le même point d'entrée partout ------------------------------ */
.od-objectif { background: var(--od-nuit); color: #fff; overflow: hidden; }
.od-objectif .pp-sur { color: var(--od-rose); }
.pp-contenu .od-objectif .pp-titre { color: #fff; font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.08; }
.od-objectif .pp-titre::after { content: ""; display: block; width: 72px; height: 5px; border-radius: 5px; background: var(--od-rose); margin-top: 26px; }
.od-objectif .pp-texte { color: #e3e5fa; }
.od-objectif__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.od-duo { position: relative; padding: 0 0 8% 0; }
.od-ordi { width: 84%; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.od-ordi .od-cadre__barre { height: 30px; padding: 0 14px; gap: 6px; }
.od-ordi .od-cadre__barre i { width: 8px; height: 8px; }
.od-ordi .od-acc { padding-right: 26%; }
.od-ordi .od-acc__tete { border-bottom: 0; }
.od-mobile { position: absolute; right: 0; bottom: 0; width: 31%; background: #05073a; padding: 6px; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -24px rgba(0, 0, 0, .8); }
.od-mobile .od-acc { border-radius: 17px; overflow: hidden; padding-top: 14px; min-height: 100%; aspect-ratio: 9 / 17; }
.od-acc { container-type: inline-size; background: #fff; color: var(--od-encre); }
.od-acc > * { margin: 0; }
.od-acc { display: flex; flex-direction: column; }
.od-acc__tete { display: flex; align-items: center; gap: 3cqw; padding: 5cqw 6cqw; font-size: 5.6cqw; color: var(--od-nuit); border-bottom: 1px solid var(--od-lavande-2); }
.od-acc__m { display: flex; align-items: center; justify-content: center; width: 9cqw; height: 9cqw; border-radius: 2cqw; background: var(--od-nuit); color: #fff; font-weight: 800; font-size: 5cqw; }
.od-acc__titre { font-family: var(--font-title); font-weight: 700; font-size: 9cqw; line-height: 1.12; color: var(--od-nuit); padding: 7cqw 6cqw 4cqw; }
.od-acc__champ { display: flex; align-items: center; justify-content: space-between; margin: 0 6cqw !important; padding: 3.4cqw 4cqw; border-radius: 99px; border: 1px solid var(--od-lavande-2); font-size: 4.8cqw; color: var(--od-gris); }
.od-acc__champ i { width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--od-rose); }
.od-acc__tuiles { list-style: none; padding: 6cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }
.od-acc__tuiles li { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4cqw; padding: 4.4cqw; border-radius: 3.6cqw; background: var(--od-lavande); font-size: 4.6cqw; font-weight: 700; color: var(--od-nuit); transition: opacity .4s ease, translate .5s var(--od-ease); }
.od-acc__tuiles svg { width: 8cqw; height: 8cqw; fill: none; stroke: var(--od-rose-texte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@container (min-width: 340px) {
	.od-acc__tete { padding: 2.6cqw 4cqw; font-size: 2.6cqw; gap: 1.6cqw; }
	.od-acc__m { width: 4.4cqw; height: 4.4cqw; font-size: 2.4cqw; border-radius: 1cqw; }
	.od-acc__titre { font-size: 5cqw; padding: 5cqw 4cqw 3cqw; max-width: 80%; }
	.od-acc__champ { margin: 0 4cqw !important; width: 62%; padding: 1.8cqw 2.4cqw; font-size: 2.4cqw; }
	.od-acc__champ i { width: 3.6cqw; height: 3.6cqw; }
	.od-acc__tuiles { grid-template-columns: repeat(4, 1fr); padding: 4.5cqw 4cqw 6cqw; gap: 2cqw; }
	.od-acc__tuiles li { padding: 2.6cqw; gap: 1.4cqw; font-size: 2.3cqw; border-radius: 1.8cqw; }
	.od-acc__tuiles svg { width: 4.4cqw; height: 4.4cqw; }
}
@media (prefers-reduced-motion: no-preference) {
	.pp-js .od-duo:not(.is-vu) .od-acc__tuiles li { opacity: 0; translate: 0 12px; }
	.pp-js .od-duo .od-acc__tuiles li { transition-delay: calc(.6s + var(--i) * .14s); }
	.pp-js .od-duo .od-mobile { transition: translate 1s var(--od-ease) .2s; }
	.pp-js .od-duo:not(.is-vu) .od-mobile { translate: 0 40px; }
}

/* --- Mobile ------------------------------------------------------------------------ */
@media (max-width: 900px) {
	.od-hero__in, .od-publie__in, .od-objectif__in { grid-template-columns: minmax(0, 1fr); }
	.od-hero__visuel { max-width: 560px; }
	.od-attentes__liste { grid-template-columns: minmax(0, 1fr); }
	.od-mini { min-height: 0; }
	.od-tuiles--5 { grid-template-columns: minmax(0, 1fr); }
	.od-tuiles--5 .od-tuile, .od-tuiles--5 .od-tuile:nth-child(-n+2) { grid-column: auto; }
	.od-publie__colle { padding: clamp(64px, 9vw, 140px) 0; }
	.od-liens { height: 36px; }
}
@media (max-width: 600px) {
	.od-scene { aspect-ratio: 100 / 118; }
	.od-tel { width: 60cqw; top: 22cqw; }
	.od-mairie { width: 58cqw; }
	.od-horloge__heure { font-size: 12cqw; }
	.od-horloge__jour { font-size: 2.8cqw; }
	.od-lune { left: auto; right: 6cqw; top: 3cqw; }
	.od-etoiles i:nth-child(1) { left: 70cqw; }
	.od-etoiles i:nth-child(3) { left: 60cqw; top: 10cqw; }
	.od-pancarte b { font-size: 3.4cqw; }
	.od-dest { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.od-dest--res { grid-column: 1 / -1; width: 60%; justify-self: center; }
	.od-liens { display: none; }
	.od-actu { margin-bottom: 28px; }
	.od-duo { padding-bottom: 14%; }
	.od-ordi { width: 88%; }
	.od-mobile { width: 36%; }
	.od-tuile { flex-direction: row; align-items: flex-start; gap: 18px; }
	.od-picto { flex: none; width: 56px; height: 56px; }
	.od-picto svg { width: 34px; height: 34px; }
}