/* ═══════════════════════════════════════════════════════════════════════
   PoupeCosmetic - complements
   Engagements, bande video sans aplat noir, silhouette renforcee,
   footer enrichi, pages FAQs et Contact. Charge en dernier.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── SILHOUETTE ────────────────────────────────────────────────────
   Le dessin de femme de l'ancienne version, remis partout.
   L'image vit sur ::before, jamais sur l'element : la parallaxe peut
   ainsi ecrire son propre transform sans effacer le miroir horizontal.
   ------------------------------------------------------------------ */
.sil{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:none;opacity:1;will-change:transform;
}
.sil::before{
  content:"";position:absolute;inset:0;
  background-image:var(--sil);background-repeat:no-repeat;
  background-size:auto 92%;background-position:center;
  opacity:.12;
}
.sil--r::before{background-position:right -4% center}
.sil--l::before{background-position:left -4% center;transform:scaleX(-1)}
.sil--c::before{background-position:center;background-size:auto 78%;opacity:.07}

/* grande, elle porte le hero */
.sil--big::before{background-size:auto 128%;opacity:.16;background-position:right -8% center}
/* deuxieme passage, tres discret : donne de la profondeur au hero */
.sil--ghost::before{background-size:auto 74%;opacity:.06;background-position:left -14% bottom}
/* respiration de fond, pour les bandes claires */
.sil--faint::before{opacity:.05;background-size:auto 118%}
/* variante teintee rouge, pour les fonds clairs */
.sil--red::before{filter:sepia(1) saturate(4) hue-rotate(-18deg);opacity:.1}
/* sur fond sombre ou rouge, on eclaircit le trait */
.sil--light::before{filter:brightness(4);opacity:.16}

@media (max-width:760px){
  .sil--ghost,.sil--faint{display:none}
  .sil::before{background-size:auto 70%;opacity:.08}
  .sil--big::before{background-size:auto 86%;opacity:.1}
}
@media (prefers-reduced-motion:reduce){ .sil{transform:none !important} }

/* ─── HERO : mise en page plus aeree ───────────────────────────────── */
.hero__rot{font-size:clamp(1.2rem,2.4vw,1.8rem);margin:14px 0 0;font-weight:400}
.hero__vis{position:relative}
.hero__float{display:flex;align-items:center;gap:12px}
.hero__float-ic{font-size:1.5rem;line-height:1}
.hero__float b{display:block;font-family:"Fraunces",serif;font-weight:700;font-size:1.25rem;line-height:1;color:var(--red)}
.hero__float small{font-size:.68rem;color:var(--ink2)}

/* ─── ENGAGEMENTS (ancien bloc « benefit ») ────────────────────────── */
.sec--tight{padding:52px 0}
.engs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.eng{
  display:flex;align-items:center;gap:15px;padding:20px 22px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.52));
  border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 32px rgba(96,52,32,.1);
  transition:transform .5s var(--ease),box-shadow .5s ease;
}
.eng:hover{transform:translateY(-7px);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 24px 50px rgba(233,30,30,.16)}
.eng__ic{
  flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-size:1.4rem;background:radial-gradient(120% 120% at 30% 20%,#fff,var(--peach));
  box-shadow:0 6px 16px rgba(96,52,32,.14);
  transition:transform .5s var(--spring);
}
.eng:hover .eng__ic{transform:scale(1.1) rotate(-8deg)}
.eng h3{font-family:"Fraunces",serif;font-weight:700;font-size:.98rem;margin:0 0 3px}
.eng p{margin:0;font-size:.78rem;color:var(--ink2);line-height:1.45}
@media (max-width:980px){ .engs{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .engs{grid-template-columns:1fr} }

/* ─── CARTES DE GAMME : emoji + compteur ───────────────────────────── */
.gam__emo{
  position:absolute;top:18px;left:18px;z-index:3;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(96,52,32,.16);
  transition:transform .5s var(--spring);
}
.gam:hover .gam__emo{transform:scale(1.12) rotate(-10deg)}
.gam__nb{
  display:inline-block;margin-top:8px;padding:4px 11px;border-radius:999px;
  background:rgba(233,30,30,.1);color:var(--red);
  font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
}

/* ─── CARTE PRODUIT : pastille de stock ────────────────────────────── */
.pr__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5FA98A;margin-right:6px;vertical-align:middle}
.pr__dot--out{background:var(--ink3)}
.pr__promo--low{background:linear-gradient(135deg,var(--gold),#E9A93F);color:var(--ink)}

/* ─── BANDE VIDEO : carte de verre, plus aucun aplat noir ──────────── */
.film{aspect-ratio:auto;min-height:520px;display:grid;place-items:center;padding:44px 26px}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* voile clair, teinte marque : on quitte le noir */
.film::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 70% at 30% 50%, rgba(255,252,248,.86), transparent 72%),
    linear-gradient(180deg, rgba(255,252,248,.62), rgba(255,234,218,.45));
}
.film__card{
  position:relative;z-index:2;max-width:520px;padding:38px 36px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.66));
  border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 28px 66px rgba(96,52,32,.22);
}
.film__card h3{font-size:clamp(1.5rem,3.2vw,2.3rem);margin:0 0 14px;color:var(--ink)}
.film__card > p{color:var(--ink2);margin:0 0 22px}
.film__steps{list-style:none;margin:0 0 26px;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.film__steps li{
  display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);
  font-size:.8rem;font-weight:600;color:var(--ink);
  box-shadow:0 4px 12px rgba(96,52,32,.1);
  transition:transform .35s var(--spring),background .3s;
}
.film__steps li:hover{transform:translateY(-3px);background:#fff}
.film__steps span{font-size:1rem}
@media (max-width:760px){
  .film{min-height:auto;padding:26px 16px}
  .film__card{padding:28px 22px}
}

/* ─── BLOC CONTACT : boutons ───────────────────────────────────────── */
.cta__acts{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.btn--ghost{
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.42);
  box-shadow:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.btn--ghost span{color:#fff}
.btn--ghost::before{background:#fff}
.btn--ghost:hover span{color:var(--red)}
.cta__sil{opacity:.16;filter:brightness(4)}

/* ─── FOOTER enrichi ───────────────────────────────────────────────── */
.ft{padding:0;background:linear-gradient(180deg,var(--paper),var(--cream))}
.ft__top{
  position:relative;z-index:2;margin-bottom:44px;padding:38px 34px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--red),#C41616 52%,var(--red-deep));
  color:#fff;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  box-shadow:0 26px 60px rgba(122,12,12,.3);
  overflow:hidden;
}
.ft__top::after{
  content:"";position:absolute;inset:0;background-image:var(--sil);
  background-size:auto 130%;background-repeat:no-repeat;background-position:right -3% center;
  opacity:.15;filter:brightness(4);pointer-events:none;
}
.ft__top > *{position:relative;z-index:1}
.ft__top h3{font-family:"Fraunces",serif;font-weight:700;font-size:clamp(1.3rem,2.8vw,1.9rem);margin:0 0 6px;color:#fff}
.ft__top p{margin:0;color:rgba(255,255,255,.85);font-size:.9rem}
.ft__inner{position:relative;z-index:2;padding:56px 0 46px}
.ft__grid{margin-bottom:34px}
.ft__brand p{line-height:1.6}
/* Regle de forme du site : les rayons croises ne servent que sur les
   grandes surfaces (ilots de la barre, cartes, bandeaux), ou la silhouette
   se lit. Sur un bouton de 38 px ils produisent une feuille bancale : les
   petits controles restent donc des ronds et des pilules franches. */
.ft__soc a{
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(31,21,18,.08);
  transition:transform .34s var(--spring),background .3s,color .3s,box-shadow .3s;
}
.ft__soc a:hover{transform:translateY(-4px)}
.ft__soc a:nth-child(1):hover{background:var(--ink);color:#fff;box-shadow:0 10px 22px rgba(31,21,18,.34)}
.ft__soc a:nth-child(2):hover{background:#FFFC00;color:var(--ink);box-shadow:0 10px 22px rgba(214,212,0,.45)}
.ft__soc a:nth-child(3):hover{background:#25D366;color:#fff;box-shadow:0 10px 22px rgba(37,211,102,.42)}
.ft__soc a:hover{box-shadow:0 10px 24px rgba(233,30,30,.3)}
.ft__grid h4::after{
  content:"";display:block;width:26px;height:2px;border-radius:2px;margin-top:7px;
  background:linear-gradient(90deg,var(--red),var(--gold));
}
.ft__pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ft__pay{gap:9px}
.ft__pay span{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;border-radius:999px;background:#fff;
  border:1px solid rgba(31,21,18,.08);
  font-size:.73rem;font-weight:600;color:var(--ink2);
  box-shadow:0 2px 8px rgba(96,52,32,.07);
  transition:transform .3s var(--spring),box-shadow .3s;
}
.ft__pay span:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(96,52,32,.12)}
.ft__cr{padding-top:26px}

/* ─── PAGES ÉDITORIALES (FAQs, Contact) ────────────────────────────── */
.edito{position:relative;padding:38px 0 24px;overflow:hidden}
.edito h1{font-size:clamp(2rem,4.6vw,3.4rem);margin:0 0 12px}
.edito > .wrap > p{color:var(--ink2);max-width:56ch;margin:0}
.faq{display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}
.faq__i{
  border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.55));
  border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 32px rgba(96,52,32,.1);
  transition:box-shadow .4s ease;
}
.faq__i[open]{box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 22px 48px rgba(233,30,30,.16)}
.faq__q{
  list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;gap:16px;
  font-family:"Fraunces",serif;font-weight:700;font-size:1.02rem;color:var(--ink);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q span:first-child{font-size:1.2rem;flex:none}
.faq__q::after{
  content:"";margin-left:auto;flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--peach) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E91E1E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform .4s var(--ease);
}
.faq__i[open] .faq__q::after{transform:rotate(135deg)}
.faq__a{padding:0 26px 24px 66px;color:var(--ink2);font-size:.9rem;line-height:1.65}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;position:relative;z-index:2}
.contact__card{
  padding:30px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.56));
  border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 38px rgba(96,52,32,.12);
}
.contact__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.contact__list li{display:flex;align-items:center;gap:15px}
.contact__list .ico{
  flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;
  background:radial-gradient(120% 120% at 30% 20%,#fff,var(--peach));
  box-shadow:0 6px 16px rgba(96,52,32,.14);
}
.contact__list b{display:block;font-size:.88rem}
.contact__list a,.contact__list span.v{color:var(--ink2);font-size:.86rem;text-decoration:none}
.contact__list a:hover{color:var(--red)}
@media (max-width:900px){ .contact__grid{grid-template-columns:1fr} }

/* ─── respiration generale : plus d'air entre les sections ─────────── */
.sec{padding:104px 0}
@media (max-width:640px){ .sec{padding:66px 0} }

/* ─── APPARITIONS AU SCROLL ──────────────────────────────────────────
   Un seul systeme pilote l'opacite : .rv / .rv.in, avec ses garde-fous
   JS (observateur, balayage des rectangles, minuterie de secours).
   --rvd echelonne les elements d'un meme groupe, data-d reste dispo.
   ------------------------------------------------------------------ */
.rv{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s ease;
  transition-delay:var(--rvd,0ms);
  filter:blur(6px);
  will-change:opacity,transform;
}
.rv.in{opacity:1;transform:none;filter:none}
.rv[data-d="1"]{transition-delay:calc(var(--rvd,0ms) + 80ms)}
.rv[data-d="2"]{transition-delay:calc(var(--rvd,0ms) + 160ms)}
.rv[data-d="3"]{transition-delay:calc(var(--rvd,0ms) + 240ms)}
/* variantes : le site respire au lieu de tout faire monter pareil */
.rv--l{transform:translateX(-40px)}
.rv--r{transform:translateX(40px)}
.rv--z{transform:scale(.94)}
.rv--l.in,.rv--r.in,.rv--z.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}
}

/* ─── CARTES DE GAMME : hauteur reservee, formes rigoureusement egales
   La zone visuelle a une hauteur fixe : les cartes gardent la meme
   silhouette quelle que soit l'image, et rien ne saute au chargement.
   ------------------------------------------------------------------ */
.gam{min-height:420px}
.gam__media{
  height:230px;padding:30px 26px 0;
  display:grid;place-items:center;overflow:hidden;
}
.gam__media img{
  width:auto;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;
}
@media (max-width:1100px){
  .gam{min-height:380px}
  .gam__media{height:200px}
}
@media (max-width:560px){
  .gam{min-height:340px}
  .gam__media{height:170px;padding:22px 20px 0}
}

/* ─── BARRE DE BOUTIQUE (filtres de gamme + tri) ─────────────────────── */
.shopbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-bottom:34px;padding:12px;border-radius:999px 26px 999px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.56));
  border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 14px 36px rgba(96,52,32,.12);
  position:relative;z-index:2;
}
.shopbar__tabs{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.shoptab{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;text-decoration:none;
  font-size:.82rem;font-weight:600;color:var(--ink2);white-space:nowrap;
  transition:color .3s,background .35s,transform .35s var(--spring),box-shadow .35s;
}
.shoptab span{font-size:.95rem;line-height:1}
.shoptab em{
  font-style:normal;font-family:"DM Mono",monospace;font-size:.62rem;
  padding:2px 7px;border-radius:999px;background:rgba(31,21,18,.07);color:var(--ink3);
}
.shoptab:hover{color:var(--red);background:rgba(233,30,30,.07);transform:translateY(-2px)}
.shoptab.is-on{
  color:#fff;background:linear-gradient(135deg,var(--red),var(--red-d));
  box-shadow:0 10px 24px rgba(233,30,30,.32);
}
.shoptab.is-on em{background:rgba(255,255,255,.24);color:#fff}
.shopbar__sort{display:flex;align-items:center;gap:10px;margin-left:auto}
.shopbar__sort label{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.shopbar__sort select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding:10px 34px 10px 15px;border-radius:999px;
  border:1px solid rgba(31,21,18,.1);background:#fff;color:var(--ink);
  font-family:inherit;font-size:.8rem;font-weight:600;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E91E1E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:13px;
  transition:border-color .3s,box-shadow .3s;
}
.shopbar__sort select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(233,30,30,.14)}
@media (max-width:760px){
  .shopbar{border-radius:26px;padding:12px 12px 14px}
  .shopbar__sort{margin-left:0;width:100%}
  .shopbar__sort select{flex:1}
}

/* ─── RETOUR VISUEL DES AJOUTS SANS RECHARGEMENT ────────────────────── */
.toastp{
  position:fixed;left:50%;bottom:26px;z-index:500;
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:999px 16px 999px 16px;
  background:linear-gradient(135deg,var(--ink),#2E2019);color:#fff;
  font-size:.84rem;font-weight:600;
  box-shadow:0 18px 44px rgba(31,21,18,.34);
  transition:opacity .35s var(--ease),transform .45s var(--spring);
}
.toastp::before{content:"✅";font-size:.95rem}
.toastp.is-on{opacity:1;transform:translate(-50%,0)}
.toastp--err{background:linear-gradient(135deg,var(--red-deep),var(--red-d))}
.toastp--err::before{content:"⚠️"}
@media (max-width:560px){ .toastp{left:14px;right:14px;transform:translateY(18px);bottom:88px} .toastp.is-on{transform:translateY(0)} }

/* pastille de compteur : petit rebond quand le nombre change */
@keyframes icpop{
  0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)}
}
.ic__n.pop{animation:icpop .5s var(--spring)}

/* bouton en cours d'envoi */
.is-load{opacity:.62;pointer-events:none}
/* confirmation breve sur le bouton lui-meme */
@keyframes btnok{
  0%{transform:scale(1)} 45%{transform:scale(1.16)} 100%{transform:scale(1)}
}
.is-ok{animation:btnok .55s var(--spring)}

/* coeur des favoris : plein quand le produit y est deja */
.pr__fav.is-on,
.fiche .ic.is-on{background:var(--red);color:#fff}
.pr__fav.is-on svg,
.fiche .ic.is-on svg{fill:currentColor;stroke:currentColor}

/* ─── SIGNATURE DU PIED DE PAGE ─────────────────────────────────────── */
.ft__cr{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;text-align:left;
}
.sign{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.sign__nom{
  font-weight:700;color:var(--ink2);text-decoration:none;
  border-bottom:1px solid rgba(233,30,30,.4);transition:color .3s;
}
.sign__nom:hover{color:var(--red)}
/* Les deux boutons forment un seul objet segmente : arrondi sur les bords
   exterieurs, droit la ou ils se touchent. C'est la que les deux coins
   prennent leur sens, parce que la forme est assez large pour se lire. */
.sign__ct{
  display:inline-flex;align-items:stretch;margin-left:5px;
  border-radius:999px;overflow:hidden;
  border:1px solid rgba(31,21,18,.09);
  box-shadow:0 3px 12px rgba(96,52,32,.1);
  background:#fff;
}
.sign__ic{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 15px;
  color:var(--ink2);font-size:.72rem;font-weight:700;text-decoration:none;
  letter-spacing:.01em;white-space:nowrap;
  transition:background .3s,color .3s;
}
.sign__ic i{font-size:.95rem}
/* filet de separation entre les deux moities */
.sign__ic--wa{box-shadow:inset 1px 0 0 rgba(31,21,18,.09)}
.sign__ic--snap:hover{background:#FFFC00;color:var(--ink)}
.sign__ic--wa:hover{background:#25D366;color:#fff}
.sign__ct:hover{box-shadow:0 8px 20px rgba(96,52,32,.16)}
.sign__ic--snap:hover{background:#FFFC00;color:#1F1512;box-shadow:0 10px 22px rgba(255,252,0,.5)}
.sign__ic--wa:hover{background:#25D366;color:#fff;box-shadow:0 10px 22px rgba(37,211,102,.45)}
/* le numero apparait au survol, sans alourdir le pied de page */
.sign__ic[data-tip]::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  background:var(--ink);color:#fff;
  font-family:"DM Mono",monospace;font-size:.58rem;letter-spacing:.06em;font-weight:400;
  opacity:0;pointer-events:none;transition:opacity .28s,transform .28s var(--ease);
}
.sign__ic[data-tip]:hover::after{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){
  .ft__cr{justify-content:center;text-align:center}
  .sign{justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════════
   PRELOADER
   Le monogramme respire dans un anneau qui se remplit, sur le fond creme
   du site : le premier ecran appartient deja a la marque. Il se retire au
   chargement, et une animation de secours l'efface au bout de 4 s si le
   script ne demarre pas - la page ne peut jamais rester masquee.
   ═══════════════════════════════════════════════════════════════════════ */
.pload{
  position:fixed;inset:0;z-index:900;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(120% 90% at 50% 32%,var(--paper),var(--cream) 58%,var(--sand));
  animation:ploadSecours 0s linear 4s forwards;
}
.pload::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--sil);background-repeat:no-repeat;
  background-position:center bottom;background-size:auto 78%;
  opacity:.06;
}
.pload.is-off{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
@keyframes ploadSecours{to{opacity:0;visibility:hidden}}

.pload__in{position:relative;width:96px;height:96px;display:grid;place-items:center}
.pload__logo{
  width:46px;height:auto;position:relative;z-index:1;
  animation:ploadPouls 2s var(--ease) infinite;
}
@keyframes ploadPouls{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.08);opacity:1}
}
/* anneau qui tourne, coupe en deux arcs : rouge et or */
.pload__ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(31,21,18,.07);
  border-top-color:var(--red);
  border-right-color:var(--gold);
  animation:ploadTourne 1.1s linear infinite;
}
.pload__tag{
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);
  margin:0;position:relative;z-index:1;
}
@keyframes ploadTourne{to{transform:rotate(360deg)}}

/* barre de progression indeterminee, sous le monogramme */
.pload__bar{
  position:relative;z-index:1;width:150px;height:2px;border-radius:2px;
  background:rgba(31,21,18,.09);overflow:hidden;
}
.pload__bar i{
  position:absolute;top:0;bottom:0;left:0;width:42%;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--red));
  animation:ploadGlisse 1.25s var(--ease) infinite;
}
@keyframes ploadGlisse{
  0%{transform:translateX(-115%)}
  100%{transform:translateX(255%)}
}

/* Le contenu monte doucement une fois le voile parti. */
body.pload-fini .nv,
body.pload-fini .hero,
body.pload-fini .edito,
body.pload-fini .cathead{animation:ploadEntree .75s var(--ease) both}
@keyframes ploadEntree{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .pload__logo,.pload__ring,.pload__bar i{animation:none}
  .pload{animation:ploadSecours 0s linear .3s forwards}
  body.pload-fini .nv,body.pload-fini .hero,
  body.pload-fini .edito,body.pload-fini .cathead{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   FOND DU HERO
   L'image de fond historique du site reste sous la video, elle n'est pas
   remplacee par elle. Elle habille la zone avant que la video ne soit
   chargee (preload metadata) et si la lecture ne demarre pas - sur les
   connexions lentes ou quand le navigateur refuse la lecture automatique,
   la section garde son identite au lieu d'un aplat vide.
   ═══════════════════════════════════════════════════════════════════════ */
.hero__bg{
  background-image:url("../images/background-pattern.jpg");
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* la video se fond dans l'image plutot que de la masquer */
.hero__bg video{opacity:.55}
/* meme principe sur les pages connexion et inscription */
.auth__side{
  background-image:url("../images/background-pattern.jpg");
  background-size:cover;background-position:center;
}
.auth__side video{opacity:.7}