/* fidelite.css - la page /carte-de-fidelite assemblee (2026-10-06).
   Les chapitres gardent les styles de leurs prototypes (p3 a p8) ; ici : la barre, la carte papier, Trois faces,
   la fin de page, et ce qui raccorde les chapitres entre eux. */
:root { --nuit: #0e0d0b; --encre: #f1ede6; --encre-2: rgba(241, 237, 230, .64); }
html { background: var(--nuit); }
body { overflow-x: hidden; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ la barre */
.f-barre { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 14px 28px;
  background: linear-gradient(rgba(14, 13, 11, .75), rgba(14, 13, 11, 0)); }
.f-marque { color: var(--encre); font-weight: 700; font-size: 17px; text-decoration: none; }
.f-proto { margin-right: auto; font-size: 12px; color: var(--encre-2); }
.f-cta { color: var(--nuit); background: var(--encre); text-decoration: none; font-weight: 600; font-size: 14px; padding: 9px 18px; border-radius: 999px; }

/* le texte d un chapitre : sur-titre, titre, texte - meme gabarit partout */
.f-txt small { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--teinte-texte); margin-bottom: 14px; }
.f-txt h2 { margin: 0 0 .45em; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -.02em; }
.f-txt p { margin: 0 0 1.2em; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: var(--encre-2); max-width: 36ch; }
.f-lien { display: block; margin-top: .6em; color: var(--encre); font-weight: 600; text-decoration: none; }
.f-lien:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------ 1.3 AVANT : la carte papier (styles de da.css, inchanges) */
.f-avant { position: relative; height: 330vh; overflow: clip; }
#acte-avant-dechirure { position: absolute; left: 0; right: 0; top: 120vh; bottom: 0; pointer-events: none; }   /* repere de papier.js : la dechirure part apres le texte */
.f-avant-scene { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 7vw; }
.f-avant-txt { max-width: 34ch; }
.f-carton { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.f-carton.is-vu { opacity: 1; transform: none; }
:root { --v2-serif: 'Fraunces', Georgia, serif; }
.v2-papier { position: relative; z-index: 3; height: min(62vh, 560px); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.v2-papier-carte { position: relative; width: min(360px, 27vw); aspect-ratio: 1.586; will-change: transform; }
.v2-papier-face { position: absolute; inset: 0; border-radius: 8px; padding: 9% 8% 8%; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; color: #2f1c0e;
  background: url('../home-film/img/kraft.jpg') center / cover, linear-gradient(160deg, #cfae84 0%, #b8956a 55%, #9c7a52 100%); background-blend-mode: multiply;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.v2-papier-face::before { content: ''; position: absolute; left: 58%; top: -8%; width: 38%; aspect-ratio: 1; border-radius: 50%; border: 6px solid rgba(70, 40, 15, .18); filter: blur(1.5px); pointer-events: none; }
.v2-papier-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgba(0,0,0,0) 46%, rgba(0,0,0,.16) 48%, rgba(255,255,255,.08) 50%, rgba(0,0,0,0) 53%); }
.v2-papier-haut { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.v2-papier-nom { font-family: var(--v2-serif); font-style: italic; font-weight: 600; font-size: 1.2rem; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.v2-papier-sous { font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; white-space: nowrap; }
.v2-papier-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7% 6%; padding: 0 2%; }
.v2-papier-grille i { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(47, 28, 14, .55); }
.v2-papier-grille i svg { position: absolute; inset: -18%; width: 136%; height: 136%; }
.v2-papier-pied { font-size: .6rem; letter-spacing: .06em; opacity: .85; }
.v2-papier-coin { position: absolute; right: 0; bottom: 0; width: 16%; aspect-ratio: 1; background: linear-gradient(225deg, #07070a 0%, #07070a 50%, #e2c9a3 50%, #b8956a 100%); border-top-left-radius: 4px; box-shadow: -3px -3px 8px rgba(0, 0, 0, .25); }
.v2-papier-carte--coupee > .v2-papier-face { opacity: 0; }
.v2-papier-piece { position: absolute; inset: 0; will-change: transform; }
.v2-papier-piece .v2-papier-face { box-shadow: none; }
.v2-papier-bord { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--v2-dechire, 0); }

/* ------------------------------------------------------------ 1.5 TROIS FACES */
.f-faces { position: relative; height: 100vh; overflow: hidden; touch-action: pan-y; }
#faces-toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.f-faces-txt { position: absolute; left: 7vw; top: 50%; translate: 0 -50%; width: 32vw; min-height: 16em; }
.faces-etape { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.faces-etape.is-active { opacity: 1; transform: none; pointer-events: auto; }
/* telephone et ecran vertical seulement (Paul, 22/10 : « plein de textes qui se suivent ») : une image numerique sous
   deux des trois textes - la pile Wallet, la notification de passage. Toujours pas de vue de profil ni de dos. */
.faces-visuel { display: none; }
/* ?anim=off : la carte reste de face, les trois textes se lisent l un sous l autre */
.f-faces.is-fixe { height: auto; min-height: 100vh; }
.f-faces.is-fixe #faces-toile { top: 50%; bottom: auto; height: 100vh; translate: 0 -50%; }
.f-faces.is-fixe .f-faces-txt { position: relative; top: auto; translate: none; padding: 14vh 0; min-height: 0; }
.f-faces.is-fixe .faces-etape { position: relative; margin-bottom: 2.4em; }
/* les apparitions sont cachees des le depart (pas de clignotement si gsap arrive apres) */
[data-anim="on"] .apparait { opacity: 0; transform: translateY(26px); }

/* ------------------------------------------------------------ 1.10 LES DEUX AUTRES UNIVERS */
.f-univers { padding: 16vh 7vw 10vh; display: grid; grid-template-columns: 1fr 1.4fr; gap: 6vw; align-items: center; }
.f-univers-liens { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3vw; align-items: end; }
.f-univers-lien { display: grid; gap: 8px; color: var(--encre); text-decoration: none; }
.f-univers-lien strong { font-size: 20px; margin-top: 10px; }
.f-univers-lien strong::after { content: " →"; }
.f-univers-lien > span:last-child { font-size: 14px; color: var(--encre-2); }
.f-ecran { display: block; border-radius: 10px; overflow: hidden; background: #f5f3ef; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.8); transition: transform .5s ease; }
.f-ecran-barre { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #e6e2db; }
.f-ecran-barre i { width: 8px; height: 8px; border-radius: 50%; background: #c9c3b9; }
.f-ecran-barre b { margin-left: auto; font-size: 10px; font-weight: 600; color: #5e584f; letter-spacing: .04em; text-transform: uppercase; }
.f-ecran img { display: block; width: 100%; height: auto; }
.f-plaque img { display: block; width: 72%; height: auto; margin: 0 auto; filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)); transition: transform .5s ease; }
.f-univers-lien:hover .f-ecran, .f-univers-lien:hover .f-plaque img { transform: translateY(-6px); }
.f-univers-lien:focus-visible { outline: 2px solid var(--encre); outline-offset: 6px; border-radius: 12px; }

/* ------------------------------------------------------------ 1.11 et 1.12 */
.f-contact { padding: 10vh 7vw 14vh; }
/* un seul bloc de fin, pose sur la page : l offre en une phrase, puis de quoi nous ecrire */
.f-contact-carte { position: relative; z-index: 2; max-width: 880px; padding: 48px 52px; border: 1px solid rgba(241, 237, 230, .14); border-radius: 28px; background: linear-gradient(160deg, rgba(241, 237, 230, .06), rgba(241, 237, 230, .02)); }
.f-contact-carte h2 { margin: 0 0 .4em; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.04; letter-spacing: -.02em; }
.f-contact-carte > p { margin: 0 0 1.4em; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: var(--encre-2); max-width: 52ch; }
.f-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-bottom: 1.2em; }
.f-contact-actions .f-bouton, .f-contact-actions .f-lien { margin: 0; }
.f-bouton { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--encre); color: var(--nuit); font-weight: 600; text-decoration: none; margin: .4em 0 1.4em; }
.f-mail { font-size: 15px; color: var(--encre); }
.f-mail button { margin-left: 10px; font: inherit; font-size: 13px; color: var(--encre-2); background: none; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.f-mail button:focus-visible, .f-bouton:focus-visible, .f-cta:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* ------------------------------------------------------------ 1.13 LA FIN */
.f-fin { position: relative; min-height: 120vh; display: grid; justify-items: center; align-content: start; padding-top: 12vh; overflow: hidden; }
.tel.f-tel-fin { position: relative; left: auto; top: auto; --tel-h: 62vh; }
.f-verrou { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; padding-top: 22%; color: #fff;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--teinte) 45%, #000), #050405); }
.f-verrou small { font-size: calc(var(--tel-h) * .022); opacity: .8; }
.f-verrou b { font-size: calc(var(--tel-h) * .1); font-weight: 600; letter-spacing: -.02em; }
.f-notif { position: absolute; left: 5%; right: 5%; top: 40%; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 16px;
  background: rgba(70, 70, 74, .9); color: #fff; font-size: calc(var(--tel-h) * .017); line-height: 1.3; }
.f-notif i { grid-row: span 2; width: calc(var(--tel-h) * .045); aspect-ratio: 1; border-radius: 22%; background: var(--teinte); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.f-ligne { position: relative; z-index: 2; margin: 5vh 0 0; font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; }
.fin-geant { position: absolute; left: 0; right: 0; bottom: -4vw; text-align: center; font-size: 24vw; font-weight: 700; letter-spacing: -.05em; color: rgba(241, 237, 230, .06); line-height: 1; pointer-events: none; }
.f-pied { position: relative; z-index: 2; display: flex; gap: 24px; flex-wrap: wrap; padding: 4vh 7vw 6vh; font-size: 13px; color: var(--encre-2); border-top: 1px solid rgba(255,255,255,.08); }
.f-pied a { color: var(--encre-2); }

.f-outils { position: fixed; right: 28px; bottom: 26px; z-index: 40; }
.f-outils button { font: inherit; font-size: 12px; color: var(--encre-2); background: rgba(14, 13, 11, .62); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 8px 14px; cursor: pointer; }

/* les prototypes avaient chacun leur arriere-plan fixe : un seul suffit ici */
#p5-fond, #p7-fond, #p8-fond { display: none; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  /* Paul, 08/10 : le texte d abord et lisible, puis la carte qui se retourne en defilant ; plus d ecran fige */
  .f-avant { height: auto; padding: 72px 0 12px; }
  .f-avant-scene { position: static; height: auto; display: flex; flex-direction: column-reverse; gap: 28px; padding: 0 20px; }
  .f-avant-txt { max-width: none; }
  .f-carton { opacity: 1; transform: none; }
  .v2-papier { height: auto; padding: 24px 0 40px; }
  .v2-papier-carte { width: 70vw; }
  .f-faces-txt { left: 20px; right: 20px; width: auto; top: 12vh; translate: none; }
  /* telephone : une vue de la carte par texte (recto, tranche, dos), en page ordinaire */
  .f-faces.is-vues { height: auto; padding: 8px 20px 8px; overflow: visible; }   /* colle a la carte retournee du chapitre precedent */
  .f-faces.is-vues #faces-toile { display: none; }
  .f-faces.is-vues .f-faces-txt { position: static; width: auto; min-height: 0; translate: none; }
  .f-faces.is-vues .faces-etape { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 56px; }
  .f-faces.is-vues .faces-visuel { display: grid; max-width: 380px; margin-top: 24px; }
  .faces-pile > span { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px 24px; margin-top: -12px; border-radius: 14px 14px 0 0;
    font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .6); box-shadow: 0 -6px 14px rgba(0, 0, 0, .35); }
  .faces-pile > span:first-child { margin-top: 0; }
  .faces-pile > span > span + span { font-weight: 500; opacity: .75; }
  .faces-pile .g1 { background: linear-gradient(#242c36, #1d242c); }
  .faces-pile .g2 { background: linear-gradient(#33272e, #291f25); }
  .faces-pile .nous { padding: 16px 16px 52px; border-radius: 14px; background: var(--teinte); color: #fff; font-size: 15px; box-shadow: 0 -6px 14px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .14); }
  .faces-notif { grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 18px;
    background: rgba(70, 70, 74, .9); color: #fff; font-size: 14px; line-height: 1.3; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .7); }
  .faces-notif i { grid-row: span 2; width: 38px; aspect-ratio: 1; border-radius: 22%; background: var(--teinte); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
  .faces-notif span { color: rgba(255, 255, 255, .78); }
  .f-univers, .f-univers-liens { grid-template-columns: 1fr; }
  .f-proto { display: none; }
  #choix { display: none; }   /* Paul, 08/10 : la couleur et le nom se choisissent en haut de page */
  /* Paul, 08/10 : sur telephone les textes sont deja la (aucune apparition a attendre) et plus compacts, pour rester
     lisibles sur tous les ecrans */
  [data-anim="on"] .apparait { opacity: 1; transform: none; }
  .f-txt h2, .p6-txt h2, .p7-txt h2, .p8-txt h2, .f-contact-carte h2 { font-size: 27px; line-height: 1.1; }
  .f-txt p, .p6-txt p, .p7-txt p, .p8-txt p, .f-contact-carte > p { font-size: 16px; }
  .f-univers { padding: 56px 20px 24px; gap: 28px; }
  .f-contact { padding: 28px 20px 56px; }
  .f-contact-carte { padding: 28px 22px; border-radius: 22px; }
  .f-fin { min-height: 0; padding: 40px 0 0; }
  /* sur telephone le bouton Animations ne flotte plus : il se range en bas de page, sous le pied */
  .f-outils { position: relative; z-index: 2; right: auto; bottom: auto; padding: 0 7vw 28px; }
  .f-outils button { min-height: 44px; }
}
/* 1.3 la metamorphose (06/10) : recto papier, verso Wallet */
.v2-papier-carte { transform-style: preserve-3d; transform-origin: 50% 50%; }
.v2-papier-carte > .v2-papier-face { backface-visibility: hidden; }
.f-meta-dos { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotateY(180deg); backface-visibility: hidden; border-radius: 4.2% / 6.7%;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .7); }
.f-meta-reflet { position: absolute; inset: 0; pointer-events: none; transform: translateZ(1px); backface-visibility: hidden; border-radius: 8px;   /* pas de mix-blend-mode : Firefox aplatit alors la carte, les deux faces ne tournent plus ensemble */
  background: linear-gradient(105deg, transparent 35%, rgba(255, 244, 225, .55) 50%, transparent 65%); opacity: 0; }
.v2-papier-carte.is-wallet { transform: rotateY(180deg); }
.v2-papier-carte.is-wallet > .v2-papier-face { visibility: hidden; }   /* Firefox ne masque pas le dos du papier */
/* la Wallet n apparait qu apres 90 degres (metamorphose.js) : un moteur qui ignore backface-visibility la montrait en miroir */
.v2-papier-carte:not(.is-wallet) > .f-meta-dos { visibility: hidden; }
.v2-papier { perspective: 1400px; }
/* le menu (Paul, 06/10 : plus de selecteur, `/` = la fidelite, les autres offres dans le menu) */
.f-menu { display: flex; gap: 22px; }
.f-menu a { color: var(--encre-2); text-decoration: none; font-size: 14px; }
.f-menu a:hover, .f-menu a[aria-current] { color: var(--encre); }
.f-menu a:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .f-menu { display: none; } }   /* ponytail: menu mobile (burger) a faire a l integration */
/* le chargement : le symbole et le mot, sur la nuit. Tombe seul apres 9 s si un script echoue */
#f-chargement { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--nuit); color: var(--encre);
  animation: f-secours 0s 9s forwards; }
#f-chargement svg { width: 64px; height: 64px; animation: f-respire 1.6s ease-in-out infinite alternate; }
#f-chargement span { font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
@keyframes f-respire { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes f-secours { to { visibility: hidden; } }
/* le relais metamorphose -> choix : la carte sort de l acte sans etre coupee, au-dessus du choix */
.f-avant:has(.v2-papier[data-mode="metamorphose"]) { overflow: visible; z-index: 5; }
/* le dos = la photo de l eventail de P5 (768 x 562, la carte y fait 92,4 % de la largeur, centree) */
.f-meta-dos.is-eventail { inset: auto; left: -4.1%; top: 50%; width: 108.2%; height: auto; translate: 0 -50%; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)) brightness(.86); }

/* grand ecran vertical (Paul, 22/10 : « ca prend juste le cote gauche ») : chaque etape de Trois faces sur deux
   colonnes - le texte a gauche, a droite son image (ou le champ du nom pour la premiere) */
@media (min-width: 761px) and (max-aspect-ratio: 4/5) {
  .f-faces.is-vues { padding-top: 40px; }   /* Paul, 22/10 : un petit espace sous la carte avant le premier titre */
  .f-faces.is-vues .faces-etape { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6vw; align-items: center; margin-bottom: 72px; }
  .f-faces.is-vues .faces-etape > * { grid-column: 1; }
  .f-faces.is-vues .faces-etape > .faces-visuel, .f-faces.is-vues .faces-etape > .p3-nom { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: none; width: 100%; }
}