/* ============================================================
   Charte Marie & Olivier · 5 décembre 2026
   Blanc satiné (avec son reflet), bleu de toile de Jouy, un fil d'or.
   Toute l'écriture est bleue, comme sur le faire-part.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --satin:#f6f4ee;
  --satin-clair:#fcfbf8;
  --perle:#e9e5db;
  --perle-fonce:#d6d0c2;
  --bleu:#26356f;          /* encre des illustrations */
  --bleu-nuit:#1b2652;     /* enveloppe */
  --bleu-doux:#5b6799;
  --bleu-pale:#9aa3c7;
  --bleu-voile:#e6e9f3;
  --or:#b8913f;            /* avec parcimonie */
  --or-clair:#d9bf7f;
  --encre:#1e1e22;         /* texte courant : noir doux, comme le faire-part */
  --encre-douce:#5c5c63;   /* texte secondaire */
  --ok:#3f6b55;
  --erreur:#9b2f3a;
  --ombre:0 14px 40px rgba(27,38,82,.12),0 2px 6px rgba(27,38,82,.07);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background-color:var(--satin);
  color:var(--encre);
  font-family:"EB Garamond",Georgia,serif;font-size:18px;line-height:1.5;
  min-height:100vh;position:relative;
  display:flex;flex-direction:column;
}
body > main{flex:1;width:100%}
/* Le satin : une trame très fine + un reflet diagonal qui respire lentement. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    repeating-linear-gradient(118deg,rgba(255,255,255,.35) 0 1px,rgba(255,255,255,0) 1px 3px),
    radial-gradient(ellipse at 18% 0%,rgba(255,255,255,.95),transparent 55%),
    radial-gradient(ellipse at 92% 100%,rgba(214,208,194,.5),transparent 55%),
    var(--satin);
}
body::after{
  content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 58%);
  animation:reflet 14s ease-in-out infinite alternate;
}
@keyframes reflet{from{transform:translateX(-12%)}to{transform:translateX(12%)}}

h1,h2,h3,.titre{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;color:var(--encre);margin:0;line-height:1.1}
.capitales{text-transform:uppercase;letter-spacing:.3em;font-size:.76rem;font-weight:500;color:var(--encre)}
.italique{font-style:italic}
.doux{color:var(--encre-douce)}
.centre{text-align:center}
a{color:var(--bleu)}

/* Monogramme M & O */
.monogramme{font-family:"Cormorant Garamond",serif;font-weight:400;color:var(--encre);letter-spacing:.04em;line-height:1;white-space:nowrap}
.monogramme .et{font-size:.42em;vertical-align:.32em;margin:0 .22em;color:var(--or)}

/* Filet doré */
.filet-or{display:flex;align-items:center;gap:12px;justify-content:center;color:var(--or);margin:18px auto}
.filet-or::before,.filet-or::after{content:"";height:1px;width:min(90px,22vw);background:linear-gradient(90deg,transparent,var(--or-clair))}
.filet-or::after{transform:scaleX(-1)}
.filet-or span{font-size:.7rem;letter-spacing:.3em}

/* Boutons */
.btn{font:inherit;font-family:"EB Garamond",serif;text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;font-weight:500;
  cursor:pointer;border:1px solid var(--bleu-nuit);background:var(--bleu-nuit);color:#fff;padding:11px 22px;border-radius:2px;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--bleu);box-shadow:0 0 0 3px rgba(184,145,63,.2)}
.btn.clair{background:rgba(255,255,255,.6);color:var(--bleu-nuit);border-color:var(--bleu-pale)}
.btn.clair:hover{background:var(--bleu-voile);border-color:var(--bleu)}
.btn.or{background:var(--or);border-color:var(--or)}
.btn.petit{padding:7px 12px;font-size:.66rem;letter-spacing:.14em}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}

/* Champs */
label.champ{display:block;text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;font-weight:500;color:var(--encre-douce);margin:16px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=time],input[type=date],textarea,select{
  width:100%;font:inherit;font-size:1rem;color:var(--encre);background:rgba(255,255,255,.75);
  border:0;border-bottom:1px solid var(--bleu-pale);padding:8px 6px;border-radius:0}
input:focus,textarea:focus,select:focus{outline:none;border-bottom-color:var(--bleu);background:#fff}
textarea{resize:vertical}
::placeholder{color:var(--bleu-pale)}

/* Carte « papier satiné » */
.carte-papier{position:relative;border:1px solid rgba(154,163,199,.35);box-shadow:var(--ombre);
  background:
    linear-gradient(125deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.9) 48%,rgba(255,255,255,0) 66%),
    repeating-linear-gradient(118deg,rgba(255,255,255,.4) 0 1px,rgba(255,255,255,0) 1px 3px),
    linear-gradient(160deg,#fdfcfa,#f3f0e8)}
.carte-papier.cadre::before{content:"";position:absolute;inset:8px;border:1px solid rgba(38,53,111,.22);pointer-events:none}

/* Ornements au trait (SVG injectés) : la couleur suit `color` */
.orne{color:var(--bleu);fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.orne .plein{fill:currentColor;stroke:none}
.orne .or{color:var(--or)}

/* Motifs du faire-part (PNG détourés, encre bleue sur fond transparent) */
.motif{display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
.motif.blanc{filter:brightness(0) invert(1)}   /* encre blanche sur fond bleu */
/* Colonnes latérales fixes (grands écrans) : les deux panneaux du faire-part ouvert */
.cote{position:fixed;top:0;bottom:0;width:min(19vw,340px);z-index:0;pointer-events:none;display:none;overflow:hidden}
.cote img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.cote.gauche{left:0;object-position:left top}
.cote.droite{right:0}
.cote.droite img{object-position:right top}
@media (min-width:980px){.cote{display:block}}
.frise-bas{display:block;width:min(1000px,96%);margin:40px auto -30px;position:relative;z-index:1}
.entete-site .orn.c{width:min(130px,24vw);left:-14px;bottom:-16px;opacity:.95}
@media (max-width:520px){.entete-site .orn.c{display:none}}
body > main,body > footer,body > header{position:relative;z-index:1}

/* En-tête commun des pages invités */
.entete-site{text-align:center;position:relative;padding:44px 60px 40px;overflow:hidden}
@media (max-width:600px){.entete-site{padding:40px 22px 34px}}
.entete-site .monogramme{font-size:clamp(3.4rem,15vw,4.8rem);margin:6px 0 2px}
.entete-site h1{font-style:italic;font-size:clamp(1.9rem,7vw,2.5rem)}
.entete-site .sous{margin:8px 0 0;color:var(--encre-douce)}
.entete-site .orn{position:absolute;pointer-events:none}
.entete-site .orn.a{width:min(120px,22vw);left:-16px;top:-12px;opacity:.92}
.entete-site .orn.b{width:min(150px,26vw);right:-14px;bottom:-16px;opacity:.95}
@media (max-width:520px){.entete-site .orn.b{right:-34px;bottom:-44px;opacity:.8}}
.entete-site > *:not(.orn){position:relative}

/* Bandeau des pages organisateurs : titre à gauche, publication toujours à droite */
.bandeau-orga{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:0 16px;height:58px;background:var(--bleu-nuit);color:#fff;box-shadow:0 2px 12px rgba(27,38,82,.25)}
.bandeau-orga .retour{text-decoration:none}
.bandeau-orga .monogramme{color:#fff;font-size:1.6rem}
.bandeau-orga .monogramme .et{color:var(--or-clair)}
.bandeau-orga .titre-bandeau{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.3rem;white-space:nowrap}
.bandeau-orga .actions-bandeau{display:flex;gap:6px;align-items:center}
.bandeau-orga .actions-bandeau .btn.clair{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.bandeau-orga .actions-bandeau .btn.clair:hover{background:rgba(255,255,255,.12)}
.bandeau-orga .espace{flex:1}
.bandeau-orga .publier,.bandeau-orga .pub-etat{display:flex;align-items:center;gap:10px;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.85);cursor:pointer;white-space:nowrap}
.bandeau-orga .pub-etat{cursor:default}
.bandeau-orga .pub-etat b{font-weight:500;color:#fff;text-transform:none;letter-spacing:0;font-size:.95rem}
.bandeau-orga .publier input{display:none}
.bandeau-orga .publier .interrupteur{width:40px;height:22px;border-radius:12px;background:rgba(255,255,255,.3);position:relative;transition:.2s;flex:none}
.bandeau-orga .publier .interrupteur::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s}
.bandeau-orga .publier input:checked + .interrupteur{background:var(--or)}
.bandeau-orga .publier input:checked + .interrupteur::after{left:20px}
.bandeau-orga .publier .etat{color:#fff;font-weight:500}
@media (max-width:720px){ .bandeau-orga .titre-bandeau,.bandeau-orga .lib{display:none} .bandeau-orga{gap:8px;padding:0 10px} }

/* ---- Ouverture du faire-part (assets/ouverture.js) ---- */
/* Séquence en 4 plans pilotée par classes : .approche → .tire → .denoue → .glisse → .ouvert → .entree → .fin
   On n'anime que transform et opacity (et un blur sur le site derrière). */
body.fp-en-cours{overflow:hidden}
/* Le site reste caché, réduit et flou derrière l'overlay jusqu'au plan 4 */
body.fp-en-cours > :not(#ouverture){opacity:0;will-change:opacity}
body.fp-en-cours:not(.fp-entree) > :not(#ouverture){visibility:hidden}
body.fp-entree > :not(#ouverture){animation:fp-site 1.6s cubic-bezier(.3,.6,.2,1) forwards}
@keyframes fp-site{0%{opacity:0}40%{opacity:.75}100%{opacity:1}}
#ouverture{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:transparent;perspective:1900px;overflow:hidden}
#ouverture::before{content:"";position:absolute;inset:0;z-index:-1;will-change:opacity;transition:opacity 1.9s ease .2s;background:
  repeating-linear-gradient(118deg,rgba(255,255,255,.35) 0 1px,rgba(255,255,255,0) 1px 3px),
  radial-gradient(ellipse at 18% 0%,rgba(255,255,255,.95),transparent 55%),
  radial-gradient(ellipse at 92% 100%,rgba(214,208,194,.5),transparent 55%)}
#ouverture.ouvre{background-color:rgba(246,244,238,.35)}
#ouverture.ouvre::before{opacity:0}
#ouverture.entree{background-color:transparent;transition-duration:.9s}
#ouverture.fin{animation:fp-fondu .6s ease forwards}
@keyframes fp-fondu{to{opacity:0;visibility:hidden}}
#ouverture .passer{position:absolute;right:18px;bottom:16px;font:inherit;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;background:none;border:0;color:var(--encre-douce);cursor:pointer;transition:opacity .5s ease}
#ouverture.entree .passer{opacity:0;pointer-events:none}

/* Le faire-part (la « caméra » agit sur son transform) */
.fp{position:relative;width:min(520px,84vw);aspect-ratio:1500/2016;max-height:86vh;transform-style:preserve-3d;
  transform:translateY(2%) scale(.82) rotateX(6deg) rotateY(-4deg);will-change:transform}
/* ombre portée séparée (pas de filter sur .fp : casserait le preserve-3d) */
.fp::before{content:"";position:absolute;inset:2% 1%;border-radius:4px;transform:translateY(28px) translateZ(-2px) scale(1.07);opacity:.55;
  background:radial-gradient(ellipse at 50% 50%,rgba(27,38,82,.22),rgba(27,38,82,.06) 45%,rgba(27,38,82,0) 68%);inset:auto -4% -7% -4%;height:14%;border-radius:50%;will-change:transform,opacity}
/* Plan 1 — approche : on grandit et on se redresse, l'ombre se resserre */
.fp.approche{animation:fp-approche 1.6s cubic-bezier(.6,.02,.25,1) forwards}
@keyframes fp-approche{0%{transform:translateY(2%) scale(.82) rotateX(6deg) rotateY(-4deg)}100%{transform:translateY(0) scale(1) rotateX(0) rotateY(0)}}
.fp.approche::before{animation:fp-ombre-approche 1.6s cubic-bezier(.6,.02,.25,1) forwards}
@keyframes fp-ombre-approche{0%{transform:translateY(28px) translateZ(-2px) scale(1.07);opacity:.55}100%{transform:translateY(12px) translateZ(-2px) scale(1);opacity:.9}}
/* Plan 3 — la caméra continue d'avancer pendant l'ouverture */
.fp.ouvert{animation:fp-camera 2.3s cubic-bezier(.5,0,.4,1) forwards}
@keyframes fp-camera{0%{transform:scale(1)}100%{transform:scale(1.35)}}
.fp.ouvert::before{animation:fp-ombre-ouvre 1.6s ease forwards}
@keyframes fp-ombre-ouvre{0%{transform:translateY(12px) translateZ(-2px) scale(1);opacity:.9}100%{transform:translateY(12px) translateZ(-2px) scale(.9);opacity:0}}
/* Plan 4 — on entre : zoom traversant, léger travelling vers le haut, le faire-part s'efface */
.fp.entree{animation:fp-entree 1.8s cubic-bezier(.55,0,.6,1) forwards}
@keyframes fp-entree{0%{transform:translateY(0) scale(1.35)}100%{transform:translateY(-5%) scale(1.65)}}
.fp.entree .face{animation:fp-face-fade 1.8s cubic-bezier(.55,0,.6,1) forwards}
@keyframes fp-face-fade{0%,35%{opacity:1}100%{opacity:0}}

/* Volets */
.fp .volet{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;will-change:transform}
.fp .face{will-change:transform,opacity;contain:paint}
.fp .volet.g{left:0;transform-origin:left center}
.fp .volet.d{right:0;transform-origin:right center}
.fp.ouvert .volet.g{animation:fp-volet-g 2.1s cubic-bezier(.6,0,.25,1) forwards}
.fp.ouvert .volet.d{animation:fp-volet-d 2.1s cubic-bezier(.6,0,.25,1) .25s forwards}
@keyframes fp-volet-g{0%{transform:rotateY(0)}100%{transform:rotateY(-165deg)}}
@keyframes fp-volet-d{0%{transform:rotateY(0)}100%{transform:rotateY(165deg)}}
.fp.entree .volet.g{animation:fp-volet-g-sortie 1.8s cubic-bezier(.5,0,.6,1) forwards}
.fp.entree .volet.d{animation:fp-volet-d-sortie 1.8s cubic-bezier(.5,0,.6,1) forwards}
@keyframes fp-volet-g-sortie{0%{transform:rotateY(-165deg)}100%{transform:rotateY(-178deg) translateX(-8%)}}
@keyframes fp-volet-d-sortie{0%{transform:rotateY(165deg)}100%{transform:rotateY(178deg) translateX(8%)}}
.fp .face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(160deg,#fdfcfa,#f4f1ea)}
.fp .face.recto{box-shadow:none}
.fp .face.recto::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.85) 48%,rgba(255,255,255,0) 66%);pointer-events:none}
.fp .face.dos{transform:rotateY(180deg);background:#f6f3ec}
/* ombre interne qui court sur les faces pendant la rotation */
.fp .face::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;will-change:opacity}
.fp .volet.g .face.recto::after{background:linear-gradient(90deg,rgba(27,38,82,.55),rgba(27,38,82,0) 70%)}
.fp .volet.d .face.recto::after{background:linear-gradient(270deg,rgba(27,38,82,.55),rgba(27,38,82,0) 70%)}
.fp.ouvert .volet.g .face::after{animation:fp-ombre-int 2.1s ease-in-out forwards}
.fp.ouvert .volet.d .face::after{animation:fp-ombre-int 2.1s ease-in-out .25s forwards}
@keyframes fp-ombre-int{0%{opacity:0}45%{opacity:.7}100%{opacity:0}}
.fp .m{position:absolute;display:block;pointer-events:none}
.fp .m img{width:100%;height:auto;display:block}
.fp .m.miroir img{transform:scaleX(-1)}
.fp .g .m1{width:64%;left:-16%;top:-8%} .fp .g .m2{width:70%;left:-6%;bottom:-6%} .fp .g .m3{width:40%;right:-4%;bottom:22%}
.fp .d .m1{width:88%;right:-10%;top:-3%} .fp .d .m2{width:80%;right:-4%;bottom:-3%} .fp .d .m3{width:40%;left:8%;top:38%}
.fp .cartouche{position:absolute;left:54%;top:36%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.fp .cartouche .capitales{font-size:.6rem;letter-spacing:.3em}
.fp .cartouche .monogramme{font-size:clamp(2rem,7vw,3rem);margin:4px 0}
.fp .cartouche .date{font-size:.62rem;letter-spacing:.28em}

/* Ruban gros-grain (bande) */
.ruban{position:absolute;left:-6%;right:-6%;top:46.5%;height:9%;transform:translateZ(6px);
  background:repeating-linear-gradient(90deg,#1b2652 0 2px,#243271 2px 3px);box-shadow:0 6px 14px rgba(27,38,82,.35)}
.ruban::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 35%,rgba(0,0,0,0) 70%,rgba(0,0,0,.22))}
/* Nœud : le centre du nœud (x 52 %, y 35 % du SVG) est posé sur l'axe du ruban */
.noeud{position:absolute;left:17.8%;top:38.5%;width:62%;transform:translateZ(8px)}
.noeud svg{width:100%;height:auto;display:block;overflow:visible}
.ruban,.noeud{will-change:transform,opacity}
.noeud .boucle,.noeud .brin,.noeud .pan,.noeud .centre{transform-box:fill-box}
.noeud .boucle.a{transform-origin:100% 50%}
.noeud .boucle.b{transform-origin:0% 50%}
.noeud .boucle.a .brin{transform-origin:100% 50%}
.noeud .boucle.b .brin{transform-origin:0% 50%}
.noeud .pan.a{transform-origin:100% 0%}
.noeud .pan.b{transform-origin:0% 0%}
.noeud .centre{transform-origin:50% 50%}
/* au repos, les boucles respirent à peine */
.noeud .boucle{animation:fp-souffle 3s ease-in-out infinite alternate}
.noeud .boucle.b{animation-delay:-1.5s}
@keyframes fp-souffle{to{transform:scale(1.025) rotate(.8deg)}}

/* Plan 2.1 — .tire : on tire le pan gauche, il s'allonge et oscille ; la boucle droite se resserre */
.fp.tire .pan.a{animation:fp-pan-tire .7s cubic-bezier(.34,1.3,.5,1) forwards}
@keyframes fp-pan-tire{0%{transform:none}45%{transform:translate(-10px,26px) rotate(10deg) scaleY(1.3)}72%{transform:translate(-6px,20px) rotate(3deg) scaleY(1.22)}100%{transform:translate(-7px,22px) rotate(6deg) scaleY(1.25)}}
.fp.tire .boucle.b{animation:fp-boucle-serre .7s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fp-boucle-serre{0%{transform:none}60%{transform:scaleX(.74) rotate(7deg)}100%{transform:scaleX(.78) rotate(5deg)}}
.fp.tire .boucle.a{animation:fp-boucle-tend .7s ease-in-out forwards}
@keyframes fp-boucle-tend{0%{transform:none}100%{transform:scaleX(1.06) rotate(-2deg)}}

/* Plan 2.2 — .denoue : la boucle droite se vide en se tordant (brins décalés) */
.fp.denoue .boucle.b{animation:fp-boucle-b-vide .75s cubic-bezier(.55,0,.3,1) forwards}
@keyframes fp-boucle-b-vide{0%{transform:scaleX(.78) rotate(5deg)}40%{transform:scaleX(.5) rotate(10deg) skewY(-7deg)}75%{transform:scaleX(.2) rotate(18deg) skewY(-14deg);opacity:1}100%{transform:scaleX(.02) rotate(26deg) skewY(-18deg);opacity:0}}
.fp.denoue .boucle.b .brin.haut{animation:fp-brin-tord .75s ease-in-out forwards}
.fp.denoue .boucle.b .brin.bas{animation:fp-brin-tord .75s ease-in-out .08s forwards}
/* Plan 2.3 — la boucle gauche fait de même, un peu après */
.fp.denoue .boucle.a{animation:fp-boucle-a-vide .8s cubic-bezier(.55,0,.3,1) .45s forwards}
@keyframes fp-boucle-a-vide{0%{transform:scaleX(1.06) rotate(-2deg)}35%{transform:scaleX(.6) rotate(-9deg) skewY(8deg)}75%{transform:scaleX(.2) rotate(-19deg) skewY(15deg);opacity:1}100%{transform:scaleX(.02) rotate(-28deg) skewY(20deg);opacity:0}}
.fp.denoue .boucle.a .brin.haut{animation:fp-brin-tord .8s ease-in-out .45s forwards}
.fp.denoue .boucle.a .brin.bas{animation:fp-brin-tord .8s ease-in-out .55s forwards}
@keyframes fp-brin-tord{0%{transform:none}50%{transform:scaleY(.72) rotate(4deg)}100%{transform:scaleY(.4) rotate(9deg)}}
/* Plan 2.4 — le nœud central se desserre : il s'élargit puis s'aplatit */
.fp.denoue .centre{animation:fp-centre .6s cubic-bezier(.45,0,.3,1) .95s forwards}
@keyframes fp-centre{0%{transform:none;opacity:1}40%{transform:scale(1.3,1.12);opacity:1}100%{transform:scale(1.7,.22);opacity:0}}
/* Plan 2.5 — les pans s'allongent quand leur boucle se vide, puis retombent avec deux balancements amortis (pivot sous le ruban) */
.fp.denoue .pan.a{animation:fp-pan-a-tombe 2.2s cubic-bezier(.4,0,.3,1) forwards}
@keyframes fp-pan-a-tombe{0%{transform:translate(-7px,22px) rotate(6deg) scaleY(1.25)}20%{transform:translate(-6px,20px) rotate(4deg) scaleY(1.25)}55%{transform:translate(-3px,12px) rotate(3deg) scaleY(1.45)}70%{transform:translate(-2px,8px) rotate(15deg) scaleY(1.5)}82%{transform:translate(-1px,6px) rotate(0deg) scaleY(1.5)}92%{transform:translate(0,6px) rotate(8deg) scaleY(1.5)}100%{transform:translate(0,6px) rotate(5deg) scaleY(1.5)}}
.fp.denoue .pan.b{animation:fp-pan-b-tombe 2.2s cubic-bezier(.4,0,.3,1) forwards}
@keyframes fp-pan-b-tombe{0%{transform:none}35%{transform:translate(2px,6px) rotate(-3deg) scaleY(1.4)}60%{transform:translate(1px,6px) rotate(-17deg) scaleY(1.45)}75%{transform:translate(0,6px) rotate(-3deg) scaleY(1.45)}88%{transform:translate(0,6px) rotate(-11deg) scaleY(1.45)}100%{transform:translate(0,6px) rotate(-7deg) scaleY(1.45)}}
/* Plan 2.6 — .glisse : le ruban entier glisse vers le bas en ondulant et sort du cadre */
.fp.glisse .ruban{animation:fp-ruban-glisse 1.15s cubic-bezier(.5,0,.85,.55) forwards}
@keyframes fp-ruban-glisse{0%{transform:translateZ(6px) translateY(0) rotate(0) skewX(0)}25%{transform:translateZ(6px) translateY(7vh) rotate(-2deg) skewX(3deg)}55%{transform:translateZ(6px) translateY(28vh) rotate(2.5deg) skewX(-3deg);opacity:1}100%{transform:translateZ(6px) translateY(80vh) rotate(-4deg) skewX(2deg);opacity:0}}
.fp.glisse .noeud{animation:fp-noeud-glisse 1.15s cubic-bezier(.5,0,.85,.55) forwards}
@keyframes fp-noeud-glisse{0%{transform:translateZ(8px) translateY(0) rotate(0)}25%{transform:translateZ(8px) translateY(7vh) rotate(-3deg)}55%{transform:translateZ(8px) translateY(28vh) rotate(3deg);opacity:1}100%{transform:translateZ(8px) translateY(80vh) rotate(-6deg);opacity:0}}

@media (prefers-reduced-motion:reduce){#ouverture{display:none}body.fp-en-cours{overflow:auto}body.fp-en-cours > :not(#ouverture){opacity:1;transform:none;filter:none}}

/* Pied de page bleu */
.pied-bleu{background:var(--bleu-nuit);color:#fff;text-align:center;padding:34px 20px 30px;margin-top:70px;width:100%;position:relative;overflow:hidden}
.pied-bleu .monogramme{color:#fff;font-size:2.2rem}
.pied-bleu .monogramme .et{color:var(--or-clair)}
.pied-bleu p{margin:8px 0 0;color:rgba(255,255,255,.8);font-style:italic}
.pied-bleu .capitales{color:var(--or-clair)}
.pied-bleu .orn{position:absolute;opacity:.55;pointer-events:none}
.pied-bleu .orn.a{width:min(260px,40vw);left:-10px;bottom:-30px}
.pied-bleu .orn.b{width:min(170px,30vw);right:10px;bottom:-12px}
@media (max-width:720px){.pied-bleu .orn.b{display:none} .pied-bleu .orn.a{width:150px;left:-50px;bottom:-60px;opacity:.35}}
.pied-bleu > *:not(.orn){position:relative}

/* Connexion organisateur */
.connexion{max-width:380px;margin:12vh auto;padding:38px 32px;text-align:center}
.connexion h1{font-size:2.4rem}
.connexion form{text-align:left;margin-top:10px}
.connexion .err{color:var(--erreur);font-style:italic;min-height:1.4em;margin-top:10px;text-align:center}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--bleu-nuit);color:#fff;
  padding:10px 20px;border-radius:2px;opacity:0;transition:.25s;pointer-events:none;z-index:999;font-size:.95rem;box-shadow:var(--ombre)}
.toast.vu{opacity:1;transform:translateX(-50%) translateY(0)}

[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}