/* PopTheDate — Élégance (/elegance/) : la papeterie de luxe. Chargée après univers.css, qui porte la structure et les
   jetons ; cette feuille n'écrit que l'atmosphère : papier coton au grain croisé, lumière rasante de fin d'après-midi,
   filets d'or doubles (3 px + 1 px), angles vifs, pivoines aquarelle en coin, petit cachet en puce de rubrique,
   et la scène d'entrée (le cachet se brise, une carte de coton monte de la poche, les prénoms s'écrivent à l'encre).
   Tout est habillage : sans cette feuille, la page reste complète et lisible.
   Les animations ne vivent que sous « .scene.joue » (rejouées par univers.js) ; « réduire les animations » est géré
   par univers.css (durées ramenées à 1 ms : l'état final s'affiche d'emblée). */

[data-univers="elegance"]{
  --rayon-image:0px;
  --or-filet:#A8863F; --feuille:#FBF8F2; --cire:#7A1F2B; --pivoine:#F1DDD3;
  /* Lumière rasante venue d'en haut à gauche : ombres longues vers le bas à droite, douces et chaudes */
  --ombre-posee:1px 2px 3px rgba(74,50,28,.10),12px 18px 34px -20px rgba(74,50,28,.34);
  --ombre-longue:2px 3px 6px rgba(74,50,28,.10),22px 30px 56px -30px rgba(74,50,28,.46);
  --papier-coton:url(img/grain-fond-ombre.53e947f827.jpg),url(img/grain-fond-lumiere.3b5482fe09.jpg);
  --papier-feuille:url(img/grain-feuille-ombre.a4bf58ea44.jpg),url(img/grain-feuille-lumiere.c4aae26d75.jpg);
}

/* ─── Le papier : coton ivoire au grain croisé, voile chaud en haut à gauche ─── */
.page-univers[data-univers="elegance"]{
  background-color:#F6F2EA;
  background-image:radial-gradient(130% 1100px at 0 0,rgba(255,226,186,.34),rgba(255,226,186,0) 62%),var(--papier-coton);
  background-size:100% 1400px,480px,480px;
  background-repeat:no-repeat,repeat,repeat;
  background-blend-mode:normal,multiply,screen;
}
[data-univers="elegance"] .puces{background-color:#F6F2EA;background-image:var(--papier-coton);background-size:480px;background-blend-mode:multiply,screen}
/* Feuilles posées sur la table : cartons, encarts, FAQ */
[data-univers="elegance"] :is(.contient,.idee,.barre-collante){background-color:var(--feuille);background-image:var(--papier-feuille);background-size:480px;background-blend-mode:multiply,screen}

/* ─── Couverture : l'enveloppe aux pivoines et sa carte de coton ─── */
[data-univers="elegance"] .formule-verbe{color:var(--cire)}
[data-univers="elegance"] .scene{background:#EEE8DD}
/* Le cadre garde les proportions de l'image (2:3), centré dans la fenêtre : la carte suit la poche à toutes les tailles. */
[data-univers="elegance"] .scene-lettre{position:absolute;left:0;right:0;top:50%;aspect-ratio:2/3;transform:translateY(-50%)}
/* La carte ne se voit qu'au-dessus du bord de la poche (51 % de l'image) et passe derrière le cachet brisé. */
.lettre-poche{position:absolute;inset:0;z-index:2;pointer-events:none;transform:scale(1.02);
  clip-path:polygon(0 0,100% 0,100% 51%,58.6% 51%,57% 50.6%,56% 50.35%,55% 50.05%,54% 49.8%,53.2% 50.1%,52.6% 51%,48.7% 51%,48.4% 49.95%,46% 49.9%,45% 50.1%,44% 50.3%,43% 50.7%,42.2% 51%,0 51%)}
.lettre-carte{position:absolute;left:28%;top:15.5%;width:44%;height:60%;container-type:inline-size;display:flex;flex-direction:column;align-items:center;padding:21% 7% 0;text-align:center;color:#1B2338;
  background-color:#FBF8F2;background-image:var(--papier-feuille);background-size:320px;background-blend-mode:multiply,screen;
  box-shadow:inset 0 0 0 5px #FBF8F2,inset 0 0 0 6px rgba(168,134,63,.85),1px 0 1px rgba(74,50,28,.10),7px 6px 14px -5px rgba(74,50,28,.30)}
.lettre-sur{font:italic 500 7.4cqw/1.15 'Cormorant Garamond',Georgia,serif;color:#3A4152}
.lettre-noms{margin-top:6%;font:400 16.5cqw/1.02 'Parisienne','Cormorant Garamond',cursive;color:#1B2338;
  -webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0}
.lettre-et{font-size:.8em}
.lettre-date{display:flex;flex-direction:column;align-items:center;gap:7%;width:100%;margin-top:7%;font:italic 500 7.6cqw/1.1 'Cormorant Garamond',Georgia,serif;color:#7D6329}
.lettre-date::before{content:'';width:26%;height:4px;border-top:2px solid #A8863F;border-bottom:1px solid #A8863F;margin-bottom:6%}
/* Le geste : 400 ms d'enveloppe close, le cachet se brise (univers.css : fondu vers l'image ouverte, zoom 1,02),
   la carte monte de la poche, puis les prénoms s'écrivent à l'encre. 1,3 s en tout. */
[data-univers="elegance"] .scene.joue .lettre-carte{animation:el-monte .5s var(--courbe) .75s both}
[data-univers="elegance"] .scene.joue .lettre-noms{animation:el-encre .5s cubic-bezier(.4,0,.6,1) .8s both}
@keyframes el-monte{from{transform:translateY(66%)}to{transform:none}}
@keyframes el-encre{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
[data-univers="elegance"] .scene-geste{border:1px solid rgba(168,134,63,.55);background:rgba(251,248,242,.92);box-shadow:var(--ombre-posee)}

/* ─── Filets d'or doubles : un trait de 3 px, un de 1 px ─── */
[data-univers="elegance"] :is(.rubrique-tete,.section-tete)::after{content:'';display:block;flex:none;width:72px;height:6px;margin:22px auto 0;border-top:3px solid var(--or-filet);border-bottom:1px solid var(--or-filet)}
[data-univers="elegance"] :is(.rubrique + .rubrique,.invites,.etapes,.questions,.autres){border-top:0;position:relative}
[data-univers="elegance"] :is(.rubrique + .rubrique,.etapes,.questions,.autres)::before{content:'';position:absolute;top:0;left:max(16px,calc((100% - 1120px) / 2));right:max(16px,calc((100% - 1120px) / 2));height:6px;border-top:1px solid var(--or-filet);border-bottom:3px solid var(--or-filet);opacity:.55}

/* ─── Rubriques : une page de faire-part, centrée et aérée ─── */
/* En-têtes centrés comme un faire-part (cachet, folio, titre, filet d'or) ; le chapô reste aligné à gauche pour la lecture. */
[data-univers="elegance"] :is(.rubrique-tete,.section-tete){display:flex;flex-direction:column;align-items:center;margin-left:auto;margin-right:auto;text-align:center}
[data-univers="elegance"] :is(.rubrique-tete,.section-tete)::after{order:4}
[data-univers="elegance"] :is(.rubrique-tete,.section-tete) .chapo{order:5;align-self:stretch;max-width:36em;margin:22px auto 0;text-align:left}
[data-univers="elegance"] .folio{font-size:12px}
[data-univers="elegance"] .folio::before{content:'';display:block;width:42px;height:42px;margin:0 auto 14px;background:url(img/cachet-cire.3481261ae0.webp) center/contain no-repeat;filter:drop-shadow(3px 4px 3px rgba(74,20,24,.22))}
[data-univers="elegance"] .folio-num{font:italic 600 21px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:0;vertical-align:-1px}
[data-univers="elegance"] .rubrique h2{margin-top:10px}
[data-univers="elegance"] .rubrique-compte{margin-top:12px}
/* Baptême et communion : la sauge de la colombe et du lin */
[data-univers="elegance"] .rubrique.sauge{--accent-texte:#3A5542}

/* Ce que contient l'invitation : un encart de coton, filet d'or en tête */
[data-univers="elegance"] .contient{position:relative;margin-left:auto;margin-right:auto;padding:32px 22px 26px;border-color:#E3D9C7;box-shadow:var(--ombre-posee)}
[data-univers="elegance"] .contient::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:7px;border-top:3px solid var(--or-filet);border-bottom:1px solid var(--or-filet);box-sizing:border-box}
[data-univers="elegance"] .contient-titre{text-align:center;margin-bottom:18px}

/* Galerie : vignettes à angles vifs, posées avec une ombre longue ; légendes centrées */
[data-univers="elegance"] .modele{align-items:center;text-align:center}
[data-univers="elegance"] .modele-scene{align-self:stretch;outline-color:rgba(168,134,63,.30);box-shadow:var(--ombre-posee);transition:box-shadow .45s var(--courbe),transform .45s var(--courbe)}
@media (hover:hover){[data-univers="elegance"] .modele:hover .modele-scene{box-shadow:var(--ombre-longue);transform:translateY(-3px)}}
[data-univers="elegance"] .modele-nom{font-size:21px}
[data-univers="elegance"] .modele-lien{align-self:center}
/* Coup de cœur : une étiquette de coton marquée d'un petit cachet */
[data-univers="elegance"] .modele-cdc{display:inline-flex;align-items:center;gap:6px;top:10px;left:10px;padding:4px 9px 4px 5px;background:rgba(251,248,242,.95);color:var(--cire);border:1px solid rgba(168,134,63,.5);box-shadow:var(--ombre-posee)}
[data-univers="elegance"] .modele-cdc::before{content:'';flex:none;width:17px;height:17px;background:url(img/cachet-cire.3481261ae0.webp) center/contain no-repeat}
[data-univers="elegance"] .galerie-suite > summary{justify-content:center;gap:14px;border-color:var(--or-filet);background:rgba(251,248,242,.6)}
[data-univers="elegance"] .galerie-suite > summary::after{color:var(--or-filet)}

/* Idées de textes : de vrais cartons, texte centré comme sur un faire-part, filet double à 3 px + 1 px */
[data-univers="elegance"] .idees-titre{text-align:center}
[data-univers="elegance"] .idee{align-items:center;text-align:center;padding:36px 26px 26px;border:0;
  box-shadow:inset 0 0 0 3px var(--or-filet),inset 0 0 0 7px var(--feuille),inset 0 0 0 8px var(--or-filet),var(--ombre-posee)}
[data-univers="elegance"] .idee-texte{font-style:italic;font-size:20px;line-height:1.5;text-wrap:pretty}
[data-univers="elegance"] .idee-copier{align-self:center;border-color:rgba(27,35,56,.55)}

[data-univers="elegance"] :is(.rubrique-action,.retour){text-align:center}
[data-univers="elegance"] .passerelle{margin-left:auto;margin-right:auto;border-style:solid;border-color:rgba(168,134,63,.55);background:rgba(251,248,242,.55)}

/* ─── Ce que reçoivent vos invités : un encart pivoine, un bouquet en coin ─── */
[data-univers="elegance"] .invites{--gris:#50556A;--accent-texte:#6B5423;overflow:hidden;background-color:var(--pivoine);background-image:var(--papier-coton);background-size:480px;background-blend-mode:multiply,screen}
/* Pivoines aquarelle : recadrage du rabat de jardin-aquarelle-closed.webp (déjà chargé par la couverture) */
[data-univers="elegance"] :is(.invites,.questions)::after{content:'';position:absolute;z-index:0;width:min(58vw,380px);aspect-ratio:1;pointer-events:none;
  background:url(img/couverture/jardin-aquarelle-closed.d6a357b6c6.webp) 100% 0/170% auto no-repeat;mix-blend-mode:multiply;filter:brightness(1.07) saturate(.92);
  -webkit-mask-image:radial-gradient(circle at 100% 0,#000 38%,transparent 71%);mask-image:radial-gradient(circle at 100% 0,#000 38%,transparent 71%)}
[data-univers="elegance"] .invites::after{top:0;right:0}
/* Les bouquets occupent le blanc du coin : la marge de la section leur est réservée, aucun texte ne passe dessus. */
[data-univers="elegance"] .invites{padding-top:max(150px,calc(min(58vw,380px) * .62))}
[data-univers="elegance"] .questions{overflow:hidden;padding-bottom:max(150px,calc(min(58vw,380px) * .62))}
[data-univers="elegance"] .questions::after{bottom:0;left:0;transform:rotate(180deg);opacity:.9}
[data-univers="elegance"] :is(.invites,.questions) > *{position:relative;z-index:1}
[data-univers="elegance"] .invites-liste li{border-top-color:rgba(168,134,63,.45)}
[data-univers="elegance"] .invites-num{font:italic 600 22px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:0}

/* ─── Questions ─── */
[data-univers="elegance"] .questions-liste{margin-left:auto;margin-right:auto;border-top-color:rgba(168,134,63,.5)}
[data-univers="elegance"] .questions-liste details{border-bottom-color:rgba(168,134,63,.4)}
[data-univers="elegance"] .questions-liste summary::after{color:var(--or-filet)}

/* ─── Les autres univers ─── */
[data-univers="elegance"] .autres-cartes{margin-left:auto;margin-right:auto}
[data-univers="elegance"] .autres-retour{text-align:center}

/* ─── Téléphone : le libellé des boutons tient sur une ligne dès 360 px (gabarit commun inchangé : 50 px, mono, .14em) ─── */
@media (max-width:639px){
  [data-univers="elegance"] :is(.couverture-actions,.rubrique-action) .bouton{padding:0 12px}
}

/* ─── Ordinateur ─── */
@media (min-width:640px){
  [data-univers="elegance"] .idees-cartons{gap:24px}
}
@media (min-width:1024px){
  [data-univers="elegance"] .scene{box-shadow:var(--ombre-longue);outline:1px solid rgba(168,134,63,.35);outline-offset:-1px}
  [data-univers="elegance"] .contient{padding:36px 40px 30px}
  [data-univers="elegance"] .idee{padding:44px 36px 30px}
  [data-univers="elegance"] .modele-nom{font-size:22px}
}