/* Accueil et pages générateur, repris de design/css/home.css (mêmes écarts volontaires :
   @container → @media, pas de container). */
.home-wrap{padding:0 var(--space-4)}
.home-section{margin-top:var(--space-6)}
.home-h2{margin:0 0 var(--space-4);font:600 24px/30px var(--font-display)}

/* Titre + générateur */
.home-hero{padding-top:var(--space-3)}
.home-hero__title{margin:0;font:700 30px/38px "Poppins",var(--font-display);letter-spacing:-.01em;text-wrap:balance}
.home-hero__lead{margin:var(--space-2) 0 var(--space-4);font-size:16px;line-height:24px;color:var(--ink-muted)}
.home-hero__cols{display:grid;gap:var(--space-5)}
.home-gen__controls{display:grid;gap:var(--space-2)}
.home-gen__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2)}
.home-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:2px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface)}
.home-seg__btn{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;border:0;border-radius:var(--radius-pill);background:none;color:var(--ink);font:600 16px/20px var(--font-display);cursor:pointer}
.home-seg__btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:inset 0 0 0 2px var(--ink)}
.home-seg__btn--male[aria-pressed="true"]{background:var(--male-bg);color:var(--male-ink);box-shadow:inset 0 0 0 2px var(--male-ink)}
.home-seg__btn--femelle[aria-pressed="true"]{background:var(--female-bg);color:var(--female-ink);box-shadow:inset 0 0 0 2px var(--female-ink)}
.home-seg__btn--mixte[aria-pressed="true"]{background:var(--mixed-bg);color:var(--mixed-ink);box-shadow:inset 0 0 0 2px var(--mixed-ink)}
.home-selectwrap{position:relative}
.home-selectwrap::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.home-select{width:100%;min-height:50px;padding:0 44px 0 18px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:600 16px/20px var(--font-display);appearance:none;-webkit-appearance:none;cursor:pointer}
.home-result__actions{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;gap:var(--space-2)}
.home-result__name{padding-right:104px}
.home-invite__title{margin:var(--space-3) 0 0;font:600 26px/32px var(--font-display);color:var(--accent-strong)}
.home-invite__text{margin:var(--space-2) 0 0;color:var(--ink-muted)}
.home-gen__aff{margin:var(--space-3) 0 0;font-size:15px;color:var(--ink-muted)}
.home-gen__aff .pcc-aff__label{margin-right:6px}
.home-gen__aff a{color:var(--ink);font-weight:600}

/* Accueil, mobile : les réglages d'abord, puis le nom et le bouton (même ordre qu'à partir de
   1024px, où .home-gen passe en display:block et suit l'ordre du HTML). */
.home-gen{display:flex;flex-direction:column}
.home-gen__controls{order:1;margin-top:0}
.home-gen .home-result{order:2;margin-top:var(--space-4)}
.home-gen .home-go{order:3;margin-top:var(--space-4)}
.home-gen__k{margin:0;font:600 16px/22px var(--font-display);color:var(--ink-muted)}

/* Bandeau de l'année */
.home-year{display:grid;gap:var(--space-4);padding:var(--space-5) var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-lg)}
.home-year__head{display:flex;align-items:center;gap:var(--space-4)}
.home-year__glyph{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--logo-yellow);box-shadow:var(--shadow-sticker);font:600 60px/1 var(--font-display);color:var(--ink)}
.home-year__title{margin:0;font:600 26px/30px var(--font-display)}
.home-year__text{margin:var(--space-1) 0 0;font-size:16px;line-height:24px}
.home-year__btns{display:grid;gap:var(--space-2)}

/* Deux entrées */
.home-entries{display:grid;gap:var(--space-4)}
.home-entry{padding:0 var(--space-4) var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.home-entry__head{display:flex;align-items:center;gap:var(--space-3);margin:0 calc(var(--space-4) * -1) var(--space-4);padding:var(--space-3) var(--space-4);background:var(--accent-tint)}
.home-entry__head svg{flex:none}
.home-entry__title{margin:0;font:600 24px/30px var(--font-display)}
.home-entry__title a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-strong);text-decoration:none}
.home-entry__links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2);margin-top:var(--space-4)}

/* Top 10 */
.home-tops{display:grid;gap:var(--space-4)}
.home-top{padding:var(--space-1) var(--space-4) var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.home-top__title{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0 var(--space-2);font:600 20px/26px var(--font-display)}
.home-top__list{margin:0;padding:0;list-style:none}
.home-top__row{display:flex;align-items:center;gap:var(--space-3);min-height:56px;border-top:1px solid var(--line)}
.home-top__rank{flex:none;width:24px;font:600 18px/1 var(--font-display);color:var(--ink-muted);text-align:right}
.home-top__name{flex:1;min-width:0;display:flex;align-items:center;min-height:44px;font:600 19px/24px var(--font-display);color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.home-top__name:hover{text-decoration-color:var(--ink)}
.home-top__ph{flex:1;color:var(--ink-muted)}
.home-more{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-2);font-weight:600;color:var(--accent-strong);text-underline-offset:3px}
.home-top__src{margin:var(--space-2) 0 0;font-size:13px;color:var(--ink-muted)}

/* Guides */
.home-guides{display:grid;gap:var(--space-3)}
.home-guide{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--space-3);align-items:center;padding:var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--ink);text-decoration:none}
.home-guide:hover{border-color:var(--line-strong)}
.home-guide__img{display:grid;place-items:center;width:88px;height:88px;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-sunken)}
.home-guide__img img{width:100%;height:100%;object-fit:cover}
.home-guide__title{margin:0;font:600 19px/24px var(--font-display)}
.home-guide__text{margin:var(--space-1) 0 0;font-size:16px;line-height:24px;color:var(--ink-muted)}

/* Texte éditorial */
.home-text p{margin:0 0 var(--space-4);text-align:justify}

/* Bandeau de l'accueil : plus compact que les autres pages (le générateur doit rester visible
   tôt), qu'il ait une photo ou non. */
.pcc-banner--home{min-height:220px}

/* Repli sans photo (aplat de couleur) : seulement si Pcc_Photos::pour_accueil() ne trouve rien. */
.pcc-banner--home.pcc-banner--flat{background:linear-gradient(135deg,var(--dog-tint),var(--cat-tint));color:var(--ink);align-items:center}
.pcc-banner--home.pcc-banner--flat::before{display:none}
.pcc-banner--home.pcc-banner--flat .home-hero__title{color:var(--ink);text-shadow:none}
.pcc-banner--home.pcc-banner--flat .home-hl{background:none;animation:none;box-shadow:inset 0 -.32em 0 var(--dog)}
.pcc-banner--home.pcc-banner--flat .home-hl--chat{background:none;animation:none;box-shadow:inset 0 -.32em 0 var(--cat)}

@media (min-width:1024px){
  .home-wrap{max-width:calc(var(--content-max) + 64px);margin:0 auto;padding:0 32px}
  .home-section{margin-top:var(--space-7)}
  .home-h2{font-size:30px;line-height:36px}
  .home-hero{padding-top:var(--space-7)}
  .home-hero__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-7);align-items:stretch}
  .home-gen{grid-column:2;grid-row:1;display:block}
  .home-gen .home-result{margin-top:var(--space-3)}
  .home-gen .home-go{margin-top:var(--space-5)}
  .home-gen__controls{margin-top:0}
  .home-gen__k{display:none}
  .home-hero__title{font-size:52px;line-height:62px}
  .home-hero__lead{margin:var(--space-4) 0 var(--space-6);font-size:19px;line-height:29px}
  .home-go{min-height:64px}
  .home-year{grid-column:1;grid-row:1;align-content:center;gap:var(--space-5);padding:var(--space-6)}
  .home-year__glyph{width:120px;height:120px;font-size:84px}
  .home-year__title{font-size:34px;line-height:40px}
  .home-year__text{font-size:17px;line-height:27px}
  .home-year__btns{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .home-entries,.home-tops{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6)}
  .home-guides{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
  .home-guide{grid-template-columns:minmax(0,1fr);align-items:start;padding:var(--space-4)}
  .home-guide__img{width:100%;height:140px}
  .pcc-banner--home{min-height:400px}
}

/* Emplacements photo : fond neutre tant qu'aucune photo n'est assignée */
.pcc-photo{position:relative;margin:0}
.pcc-photo__img{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;background:var(--surface-sunken)}
.home-entry__photo{margin:0 calc(var(--space-4) * -1)}
.home-entry__photo .pcc-photo__img{aspect-ratio:16/7;border-bottom:2px solid var(--ink)}
.home-entry__head{margin-top:0}

/* 3. Générateur en machine à sous : 24 noms défilent très vite puis ralentissent jusqu'au nom
   tiré (1,8 s). Le vrai nom reste dans le HTML (.pcc-reel-win) ; le rouleau est décoratif. */
.home-result__name,.pil-gen__name{position:relative}
.pcc-reel{position:absolute;left:0;right:0;top:0;height:1lh;overflow:hidden;white-space:nowrap;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.pcc-reel__strip{display:block}
.pcc-reel__n{display:block;height:1lh;overflow:hidden;text-overflow:ellipsis}
.pcc-reel.is-a .pcc-reel__strip{animation:pccReelA 1.8s cubic-bezier(.1,.7,.16,1.03) forwards}
.pcc-reel.is-b .pcc-reel__strip{animation:pccReelB 1.8s cubic-bezier(.1,.7,.16,1.03) forwards}
.pcc-reel.is-a{animation:pccBlurA 1.1s ease-in forwards,pccReelOutA 1ms 1.8s forwards}
.pcc-reel.is-b{animation:pccBlurB 1.1s ease-in forwards,pccReelOutB 1ms 1.8s forwards}
.pcc-reel-win.is-a{animation:pccWinA 200ms ease-out 1.75s both}
.pcc-reel-win.is-b{animation:pccWinB 200ms ease-out 1.75s both}
@keyframes pccReelA{from{transform:translateY(0)}to{transform:translateY(calc(-24 * 1lh))}}
@keyframes pccReelB{from{transform:translateY(0)}to{transform:translateY(calc(-24 * 1lh))}}
@keyframes pccBlurA{from{filter:blur(1.4px)}to{filter:none}}
@keyframes pccBlurB{from{filter:blur(1.4px)}to{filter:none}}
@keyframes pccReelOutA{to{opacity:0;visibility:hidden}}
@keyframes pccReelOutB{to{opacity:0;visibility:hidden}}
@keyframes pccWinA{from{opacity:0}to{opacity:1}}
@keyframes pccWinB{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pcc-reel{display:none}}

/* Cartes : soulèvement, légère inclinaison qui suit le pointeur et ombre colorée qui grandit
   (docs/08-animations.md, effet 6). --pcc-tilt-x/--pcc-tilt-y sont posées par main.js au survol
   (souris seulement, ±3° maximum) ; sans JavaScript ou au clavier, l'angle reste à 0. La
   transition elle-même est posée dans animations.css (réunie avec celle de l'apparition en
   fondu, pour que les deux cohabitent sur les mêmes cartes). */
@media (hover:hover){
  .home-guide:hover,.home-entry:hover{transform:perspective(800px) rotateX(var(--pcc-tilt-y,0deg)) rotateY(var(--pcc-tilt-x,0deg)) translateY(-4px);box-shadow:0 14px 24px rgba(42,33,24,.12)}
  .home-guide:hover{box-shadow:0 10px 0 var(--dog),0 14px 24px rgba(42,33,24,.12)}
  .home-entry:hover{box-shadow:0 10px 0 var(--accent),0 14px 24px rgba(42,33,24,.12)}
}
.home-guide:active{transform:scale(.98)}

/* ===== Appels vers les jeux (accueil, pages lettre/genre/pilier, favoris, articles) ===== */
/* Cartes de jeux : photo 16:7 avec filet encre, titre, promesse, bouton « Jouer » */
.pcc-games__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--space-4)}
.pcc-games__head .home-h2{margin-bottom:var(--space-3)}
.pcc-games__more{margin:var(--space-4) 0 0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.pcc-gcards{display:grid;gap:var(--space-4);margin:0;padding:0;list-style:none}
.pcc-gcard{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none;transition:transform 160ms ease-out}
@media (hover:hover){.pcc-gcard:hover{transform:translateY(-3px)}}
.pcc-gcard:active{transform:scale(.98)}
.pcc-gcard__photo{margin:0}
.pcc-gcard__photo .pcc-photo__img{aspect-ratio:16/7;border-bottom:2px solid var(--ink)}
.pcc-gcard__body{display:flex;flex:1;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}
.pcc-gcard__t{font:600 21px/26px var(--font-display)}
.pcc-gcard__x{font-size:16px;line-height:24px}
.pcc-gcard__go{align-self:flex-start;margin-top:auto;min-width:112px;box-shadow:0 4px 0 var(--ink)}
/* Bandeau d'appel compact : aplat doux de l'accent, une phrase, un bouton */
.pcc-play{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-4);background:var(--accent-tint);border:1.5px solid var(--ink);border-radius:var(--radius-lg)}
.pcc-play__ico{width:48px;height:48px}
.pcc-play__t{margin:0;font:600 18px/24px var(--font-display)}
.pcc-play__go{grid-column:1 / -1;justify-self:start;box-shadow:0 4px 0 var(--ink)}
.pcc-play-li{grid-column:1 / -1;list-style:none}
.art-play{margin:var(--space-5) 0}
.fav-play{margin:var(--space-4) 0}
.fav-empty__game{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}
/* Carte prénom ouverte : liens vers le Crash-test et le faire-part */
.dc-games{display:grid;gap:2px;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line-strong)}
.dc-games__a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:16px;line-height:22px;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.dc-games__a strong{margin-right:4px}
@media (min-width:1024px){
  .pcc-gcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
  .pcc-gcards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pcc-play{grid-template-columns:56px minmax(0,1fr) auto;padding:var(--space-4) var(--space-5)}
  .pcc-play__ico{width:56px;height:56px}
  .pcc-play__go{grid-column:auto;justify-self:end}
  .pcc-play__t{font-size:19px}
}