/* p5.css - prototype P5, le choix de la carte, DANS la page (Paul, 06/10 : plus d ecran a part). */
@font-face { font-family: Satoshi; font-weight: 400; font-display: block; src: url("../../_commun/fonts/satoshi-400.woff2") format("woff2"); }
@font-face { font-family: Satoshi; font-weight: 500; font-display: block; src: url("../../_commun/fonts/satoshi-500.woff2") format("woff2"); }
@font-face { font-family: Satoshi; font-weight: 700; font-display: block; src: url("../../_commun/fonts/satoshi-700.woff2") format("woff2"); }

/* la teinte se fond au lieu de basculer d un coup (Paul, 10/10) : variables declarees comme couleurs, donc animables */
@property --teinte { syntax: "<color>"; inherits: true; initial-value: #4A1E2A; }
@property --teinte-fond { syntax: "<color>"; inherits: true; initial-value: #2a1419; }
@property --teinte-texte { syntax: "<color>"; inherits: true; initial-value: #e3c9cf; }
html[data-anim="on"] { transition: --teinte .6s ease, --teinte-fond .6s ease, --teinte-texte .6s ease; }
:root {
  --teinte: #4A1E2A; --teinte-fond: #2a1419; --teinte-texte: #e3c9cf;
  --nuit: #0e0d0b; --encre: #f1ede6; --encre-2: rgba(241, 237, 230, .64);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--nuit); color: var(--encre); font-family: Satoshi, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button { font: inherit; }
[hidden] { display: none !important; }

#p5-fond {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 45%, var(--teinte-fond), transparent 72%), var(--nuit);
  transition: background 1s ease;
}
.p5-barre { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; padding: 18px 28px; font-size: 13px; color: var(--encre-2); pointer-events: none; }
.p5-barre strong { color: var(--encre); }

main { position: relative; z-index: 1; }
.p5-avant { min-height: 90vh; display: grid; place-items: center; color: var(--encre-2); font-size: 15px; text-align: center; padding: 0 7vw; }
.p5-apres { min-height: 100vh; display: grid; align-content: center; padding: 0 7vw; max-width: 760px; }
.p5-apres small, .p5-tete small { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--teinte-texte); margin-bottom: 14px; display: block; }
.p5-apres h2 { margin: 0 0 .45em; font-size: clamp(34px, 3.8vw, 58px); line-height: 1.04; letter-spacing: -.02em; }
.p5-apres p { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--encre-2); max-width: 36ch; }

/* ------------------------------------------------------------ la section du choix (epinglee) */
.p5-choix { position: relative; height: 100vh; overflow: hidden; touch-action: pan-y; }
#p5-toile { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; }
.p5-tete { position: absolute; z-index: 3; left: 7vw; top: 15vh; max-width: 30vw; }
.p5-tete h2 { margin: 0 0 .4em; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; letter-spacing: -.02em; }
.p5-tete p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--encre-2); max-width: 34ch; min-height: 3em; }

.p5-fiche { position: absolute; z-index: 3; right: 7vw; top: 18vh; display: grid; gap: 10px; max-width: 24ch; text-align: left; }
.p5-fiche strong { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.02em; }
.p5-fiche span { color: var(--encre-2); font-size: 15px; line-height: 1.5; }

/* « Plus de teintes » : la palette large, sous la fiche */
.p5-plus { margin-top: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); }
.p5-pastilles { display: grid; grid-template-columns: repeat(6, 28px); gap: 10px; }
.p5-pastille { width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--p); border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .5); transition: transform .15s ease; }
.p5-pastille:hover { transform: scale(1.15); }
.p5-pastille[aria-pressed="true"] { border-color: var(--encre); }
.p5-pastille:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* l eventail : sept photos de la vraie carte, en arc */
.p5-main { position: absolute; z-index: 2; left: 50%; bottom: 33vh; width: 0; height: 0; }
.p5-carte {
  position: absolute; left: 0; top: 0; width: 13vw; padding: 0; border: 0; background: none; cursor: pointer;
  translate: -50% -50%; transform-origin: 50% 420%;   /* centre de rotation loin sous les cartes : eventail ouvert */
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), translate .3s ease, filter .3s ease, opacity .3s ease;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)) brightness(.86);
}
.p5-carte img { display: block; width: 100%; height: auto; pointer-events: none; }
.p5-carte:hover, .p5-carte:focus-visible { z-index: 20 !important; translate: -50% calc(-50% - 3vh); filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .7)) brightness(1.05); }
.p5-carte.is-visee { opacity: .12; }
/* la carte « Votre teinte » (tout a droite) : plus de cadre (Paul, 06/10 : « pas tres beau ») - une etiquette dont le
   contour reprend les couleurs de la palette, assortie a « Votre carte » */
.p5-carte.is-perso::after { content: "Votre teinte"; position: absolute; left: 50%; bottom: -2.2em; translate: -50% 0;
  font-size: 12px; font-weight: 600; color: var(--encre); white-space: nowrap; padding: 3px 11px; border-radius: 999px; border: 2px solid transparent;
  background: linear-gradient(#15110f, #15110f) padding-box, conic-gradient(#6B1F2E, #9A6A2A, #B08A2E, #4F5A2A, #1F4E57, #2D2F6B, #4B2445, #E8E4DA, #6B1F2E) border-box; }
.p5-carte.is-perso.is-actuelle::after { content: "Votre carte · Votre teinte"; top: auto; }
.p5-carte.is-actuelle::after { content: "Votre carte"; position: absolute; left: 50%; top: -1.6em; translate: -50% 0; font-size: 12px; font-weight: 600; color: var(--encre); background: rgba(14, 13, 11, .8); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

.p5-champ { position: absolute; z-index: 3; left: 7vw; bottom: 8vh; display: grid; gap: 6px; font-size: 13px; color: var(--encre-2); }
.p5-champ input { width: 300px; font: inherit; font-size: 15px; color: var(--encre); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 11px 14px; }
.p5-champ input::placeholder { color: rgba(241, 237, 230, .4); }
.p5-champ small { font-size: 12px; }
.p5-actions { position: absolute; z-index: 3; right: 7vw; bottom: 8vh; display: flex; gap: 12px; align-items: center; }
.p5-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity .2s ease; }
.p5-btn.is-plein { background: var(--encre); color: var(--nuit); border: 1px solid var(--encre); }
.p5-btn:disabled { opacity: .35; cursor: default; }
.p5-btn:focus-visible, .p5-carte:focus-visible, .p5-champ input:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* la jauge du « passer sans choisir » : c est le defilement lui-meme */
.p5-passer { position: absolute; z-index: 3; left: 30vw; right: 30vw; bottom: 3.5vh; height: 3px; border-radius: 3px; background: rgba(241, 237, 230, .12); overflow: hidden; opacity: 0; transition: opacity .4s ease; }
.p5-passer.is-visible { opacity: 1; }
.p5-passer i { display: block; height: 100%; background: var(--encre); transform-origin: left; transform: scaleX(0); }

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

html[data-anim="off"] .p5-carte, html[data-anim="off"] #p5-fond { transition: none; }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .p5-tete { left: 20px; right: 20px; top: 84px; max-width: none; }   /* sous la barre (72 px) */
  .p5-tete h2 { font-size: 26px; } .p5-tete p { font-size: 14px; min-height: 0; }
  .p5-carte { width: 25vw; }   /* l eventail entier tient dans la largeur */
  .p5-main { bottom: 36vh; }
  .p5-fiche { left: 20px; right: 20px; top: max(43vh, 345px); gap: 4px; }   /* sous la carte choisie */
  .p5-fiche strong { font-size: 22px; } .p5-fiche span { font-size: 14px; }
  .p5-pastilles { grid-template-columns: repeat(9, 26px); gap: 8px; } .p5-pastille { width: 26px; height: 26px; }
  .p5-champ { left: 20px; bottom: 13vh; } .p5-champ input { width: calc(100vw - 40px); }
  .p5-champ small { display: none; }
  .p5-actions { left: 20px; right: 20px; bottom: 4vh; }
  .p5-outils { display: none; }
}

/* ------------------------------------------------ passe graphique (assemblage, 06/10) */
/* l eventail : tant qu aucune carte n est visee, c est LUI le sujet - plus grand, au centre de l ecran ;
   il redescend a sa place des qu une carte sort (la carte visee prend le centre) */
.p5-main { transition: bottom .7s cubic-bezier(.2, .7, .2, 1), scale .7s cubic-bezier(.2, .7, .2, 1); }
#choix:not(:has(.p5-carte.is-visee)) .p5-main { bottom: 40vh; scale: 1.3; }
/* une flaque de lumiere a la teinte sous l eventail : il pose sur quelque chose */
.p5-main::before { content: ""; position: absolute; left: 0; top: 0; width: 64vw; height: 22vh; translate: -50% -10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--teinte, #4A1E2A) 55%, transparent), transparent); opacity: .55; filter: blur(8px); }
/* des cartes moins ternes : la lumiere du studio, pas un voile */
.p5-carte { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6)) brightness(.97) saturate(1.08); }
/* « Garder » n apparait que s il y a quelque chose a garder : un bouton grise se lisait comme casse */
.p5-btn:disabled { opacity: 0; pointer-events: none; }
.p5-btn { transition: opacity .3s ease; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { #choix:not(:has(.p5-carte.is-visee)) .p5-main { bottom: 40vh; scale: 1; } }
/* la pile du relais (page assemblee) : pas d etiquette tant que l eventail n est pas ouvert */
.p5-main.is-pile .p5-carte::after { opacity: 0; }
/* pendant l ouverture, pas de survol : les cartes passaient sous la souris et sautaient une a une */
.p5-main.is-pile .p5-carte { pointer-events: none; }
.p5-carte { will-change: transform; }
/* « Votre carte » se souleve dans l eventail (meme geste que le survol) */
.p5-carte.is-actuelle { translate: -50% calc(-50% - 3vh); }

/* ------------------------------------------------ le mode simple (telephone, Paul 08/10) : classe posee par p5.js */
.p5-choix.is-simple { height: auto; padding: 84px 20px 44px; display: flex; flex-direction: column; gap: 18px; }
.is-simple .p5-tete { position: static; }
.is-simple .p5-main, .is-simple .p5-fiche, .is-simple .p5-actions, .is-simple .p5-passer { display: none; }
.p5-simple-carte { height: 56vw; }
.p5-modifier, .p5-plus-btn { position: relative; z-index: 3; align-self: flex-start; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .24); background: none; color: var(--encre); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.p5-modifier::after { content: " ▾"; }
.p5-modifier[aria-expanded="true"]::after { content: " ▴"; }
.p5-panneau { position: relative; z-index: 3; display: grid; gap: 20px; }
.p5-couleurs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.p5-couleurs .p5-pastille { width: 44px; height: 44px; }
.p5-plus-btn { min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 500; }
.p5-panneau .p5-champ { position: static; }
.p5-panneau .p5-champ input { width: 100%; box-sizing: border-box; font-size: 16px; }   /* 16 px : Safari ne zoome pas sur le champ */
.p5-modifier:focus-visible, .p5-plus-btn:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }