/* Composants communs du site, repris de design/css/bundle.css (+ quelques règles d'en-tête
   issues de design/css/home.css : loupe de recherche, libellé « Mes favoris » sur ordinateur).
   Mêmes écarts volontaires que base.css : @container → @media, pas de container, pas de sc-for/sc-if/dc-import. */

/* Bouton */
.pcc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:var(--radius-pill);font:600 17px/24px var(--font-display);text-decoration:none;cursor:pointer}
.pcc-btn--action{background:var(--logo-yellow);color:var(--ink);border-color:var(--ink)}
.pcc-btn--action:hover{background:var(--action-hover)}
.pcc-btn--accent{background:var(--accent);color:var(--on-accent);border-color:var(--ink)}
.pcc-btn--accent:hover{filter:brightness(.94)}
.pcc-btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.pcc-btn--ghost:hover{border-color:var(--ink)}
.pcc-btn--block{display:flex;width:100%}
.pcc-btn:disabled{opacity:.6;cursor:default}

/* En-tête */
.pcc-header{display:flex;align-items:center;gap:var(--space-2);min-height:64px;padding:var(--space-2) var(--space-4);background:var(--surface);border-bottom:1px solid var(--line)}
.pcc-logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;color:var(--ink);text-decoration:none;font:600 18px/20px var(--font-display)}
img.pcc-logo__mark{flex:none;width:44px;height:44px}
.pcc-nav{display:none}
.pcc-nav__link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 14px;border-radius:var(--radius-pill);color:var(--ink);text-decoration:none;font:500 17px/24px var(--font-display)}
.pcc-nav__link:hover{background:var(--surface-sunken)}
.pcc-nav__link[aria-current="page"]{background:var(--accent-tint);color:var(--accent-strong)}
.pcc-search{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--ink)}
.pcc-search:hover{border-color:var(--ink)}
.pcc-search svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pcc-search[aria-current="page"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pcc-fav{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 6px;border-radius:var(--radius-pill);color:var(--ink);text-decoration:none;border:1px solid var(--line-strong);background:var(--surface)}
.pcc-fav:hover{background:var(--surface-sunken)}
.pcc-fav[aria-current="page"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pcc-fav svg{width:24px;height:24px;fill:var(--logo-red)}
.pcc-fav__count{min-width:24px;height:24px;padding:0 7px;border-radius:var(--radius-pill);background:var(--logo-yellow);color:var(--ink);font:600 14px/24px var(--font-text);text-align:center}
.pcc-menu-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);cursor:pointer}
.pcc-menu-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pcc-menu-btn .pcc-ico-close,.pcc-menu-btn[aria-expanded="true"] .pcc-ico-open{display:none}
.pcc-menu-btn[aria-expanded="true"] .pcc-ico-close{display:block}
.pcc-menu{margin:0;padding:0 var(--space-4) var(--space-3);list-style:none;background:var(--surface);border-bottom:1px solid var(--line)}
.pcc-menu[hidden]{display:none}
.pcc-menu a{display:flex;align-items:center;gap:var(--space-3);min-height:52px;color:var(--ink);text-decoration:none;font:500 19px/24px var(--font-display);border-top:1px solid var(--line)}
@media (min-width:1024px){
  .pcc-header{min-height:72px;padding:var(--space-3) max(32px,calc((100vw - var(--content-max)) / 2))}
  .pcc-logo{margin-right:var(--space-5);font-size:20px}
  .pcc-nav{display:flex;gap:var(--space-1);margin-right:auto}
  .pcc-menu-btn,.pcc-menu{display:none}
  .pcc-fav{padding:0 8px 0 14px}
  .pcc-fav .pcc-sr{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:nowrap;font:600 16px/1 var(--font-display)}
}

/* Fil d'Ariane */
.pcc-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;font-size:16px;line-height:24px}
.pcc-crumbs li{display:inline-flex;align-items:center;min-height:44px}
.pcc-crumbs li+li::before{content:"";width:7px;height:7px;margin:0 12px 0 6px;border-top:2px solid var(--line-strong);border-right:2px solid var(--line-strong);transform:rotate(45deg)}
.pcc-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.pcc-crumbs a:hover{text-decoration-color:var(--ink)}
.pcc-crumbs [aria-current]{color:var(--ink-muted)}

/* Barre alphabet */
.pcc-alpha ol{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none}
.pcc-alpha__l{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:600 19px/1 var(--font-display);text-decoration:none}
a.pcc-alpha__l:hover{border-color:var(--ink)}
.pcc-alpha__l[aria-current]{background:var(--accent);border-color:var(--ink);color:var(--on-accent)}
.pcc-alpha__l[aria-disabled="true"]{background:var(--surface-sunken);border-color:transparent;color:var(--ink-disabled)}
/* Alphabet des deux entrées de l'accueil (avec photo), mobile et tablette seulement (décision
   du client du 28 octobre 2026) : chaque lettre s'étire pour occuper toute la largeur du bloc,
   au lieu de cases fixes de 44px laissant un vide à droite de chaque ligne. Sur ordinateur,
   .pcc-alpha garde son comportement d'origine (cases fixes). */
@media (max-width:1023.98px){
  .home-entry .pcc-alpha ol{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
  .home-entry .pcc-alpha__l{width:100%}
}

/* Filtre de genre */
.pcc-filter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}
.pcc-filter__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 4px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:600 16px/20px var(--font-display);cursor:pointer}
.pcc-filter__count{font:400 14px/18px var(--font-text);color:var(--ink-muted)}
.pcc-filter__btn:hover{border-color:var(--ink)}
.pcc-filter__btn[aria-pressed="true"]{background:var(--accent);border-color:var(--ink);color:var(--on-accent)}
.pcc-filter__btn[aria-pressed="true"] .pcc-filter__count{color:var(--on-accent)}
@media (min-width:1024px){
  .pcc-filter{display:flex}
  .pcc-filter__btn{flex-direction:row;gap:var(--space-2);min-height:44px;padding:0 18px;border-radius:var(--radius-pill)}
}

/* Carte prénom */
.pcc-cards{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
@media (min-width:1024px){.pcc-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:start}}
.pcc-card{padding:var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.pcc-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.pcc-card__name{margin:4px 0 0;font:600 28px/32px var(--font-display)}
.pcc-card__name a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:5px}
.pcc-card__name a:hover{text-decoration-color:var(--ink)}
.pcc-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:var(--space-2) 0 0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.pcc-card__meaning{margin:var(--space-3) 0 0}
.pcc-pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--radius-pill);font:600 14px/20px var(--font-text)}
.pcc-pill--male{background:var(--male-bg);color:var(--male-ink)}
.pcc-pill--femelle{background:var(--female-bg);color:var(--female-ink)}
.pcc-pill--mixte{background:var(--mixed-bg);color:var(--mixed-ink)}
.pcc-heart{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--ink-muted);cursor:pointer}
.pcc-heart svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.pcc-heart:hover{border-color:var(--ink);color:var(--ink)}
.pcc-heart[aria-pressed="true"]{border-color:var(--logo-red);color:var(--logo-red)}
.pcc-heart[aria-pressed="true"] svg{fill:currentColor}

/* Publicité : la hauteur est réservée, la page ne bouge jamais au chargement. Masqué si vide (pcc-ad--empty). */
.pcc-ad{display:flex;flex-direction:column;align-items:center;margin:var(--space-6) auto}
.pcc-ad--empty{display:none}
.pcc-ad__label{height:24px;font:600 14px/24px var(--font-text);letter-spacing:.04em;color:var(--ad-label)}
.pcc-ad__slot{display:block;width:var(--ad-mpu-w);height:var(--ad-mpu-h);overflow:hidden;background:var(--ad-bg);border:1px solid var(--ad-line)}
.pcc-ad--leaderboard .pcc-ad__slot{width:var(--ad-leaderboard-w);height:var(--ad-leaderboard-h)}
.pcc-ad--sky{position:sticky;top:var(--space-5);margin:0}
.pcc-ad--sky .pcc-ad__slot{width:var(--sidebar);height:var(--ad-sky-h)}
@media (min-width:1024px){.pcc-ad--content .pcc-ad__slot{width:var(--ad-leaderboard-w);height:var(--ad-leaderboard-h)}}

/* Affiliation */
.pcc-aff{padding:var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.pcc-aff__label{display:block;font:600 14px/24px var(--font-text);letter-spacing:.04em;color:var(--ad-label)}
.pcc-aff__body{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--space-3);align-items:center;margin:var(--space-2) 0 var(--space-4)}
.pcc-aff__img{display:grid;place-items:center;width:88px;height:88px;border-radius:var(--radius-md);background:var(--surface-sunken)}
.pcc-aff__title{margin:0;font:600 20px/26px var(--font-display)}
.pcc-aff__text{margin:4px 0 0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.pcc-aff .pcc-btn{display:flex;width:100%}
@media (min-width:1024px){
  .pcc-aff{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-5);padding:var(--space-5)}
  .pcc-aff__label{grid-column:1 / -1}
  .pcc-aff__body{margin-bottom:0}
  .pcc-aff .pcc-btn{width:auto}
}

/* Emplacement photo : fond neutre tant qu'aucune photo n'est assignée (01-specification.md, 03-gabarits.md §11).
   Avec une vraie photo (articles, section 8.8 de CLAUDE.md), l'image réelle recadre en object-fit: cover. */
.pcc-photo{position:relative;margin:0}
.pcc-photo__img{display:grid;place-items:center;align-content:center;gap:6px;width:100%;height:100%;overflow:hidden;background:var(--surface-sunken);color:var(--ink-muted);text-align:center}
.pcc-photo__img svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.pcc-photo__img img{display:block;width:100%;height:100%;object-fit:cover}
.pcc-mascot{display:block;width:100%;height:auto}
.pcc-photo__hint{max-width:24ch;padding:0 var(--space-2);font:600 13px/17px var(--font-text)}
.pcc-photo figcaption{margin-top:var(--space-2);font-size:15px;line-height:22px;color:var(--ink-muted)}

/* Pagination de l'archive /guide/ (question ouverte #11). */
.pcc-pagination{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-6)}
.pcc-pagination a,.pcc-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--radius-md);color:var(--ink);font:600 15px var(--font-display);text-decoration:none}
.pcc-pagination .current{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.pcc-pagination a:hover{border-color:var(--ink)}

/* Résultat du générateur (accueil, pages lettre, article, pages générateur…), repris de
   design/css/home.css : carte « autocollant » avec le nom tiré, bouton de relance. */
.home-result{position:relative;min-height:184px;margin-top:var(--space-3);padding:var(--space-4);background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 6px 0 var(--accent)}
.home-result__name{margin:0;font:600 40px/48px var(--font-display);color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:6px;text-underline-offset:6px}
.home-result__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:var(--space-2) 0 0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.home-result__meaning{margin:var(--space-2) 0 0}
.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-go{width:100%;min-height:60px;margin-top:var(--space-5);font-size:21px;line-height:26px;box-shadow:0 4px 0 var(--ink)}
.home-go svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.home-go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (min-width:1024px){.home-result{min-height:236px;padding:var(--space-5)}.home-result__name{font-size:56px;line-height:64px}.home-go{min-height:64px}}

/* Bandeau en tête de page (fil d'Ariane + H1), repris de design/css/home.css. Structure commune
   à toutes les pages ; .pcc-banner--flat (liste.css) est le repli pour un emplacement qui n'a
   pas encore de photo (section 8.10 de CLAUDE.md), .pcc-banner--photo la version avec une vraie
   photo en fond (texte blanc, dégradé sombre en bas pour qu'il reste lisible). */
.pcc-banner{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:260px;color:#fff}
.pcc-banner__in{width:100%}
.pcc-banner--photo .pcc-banner__in{padding:56px var(--space-4) var(--space-5)}
.pcc-banner--photo .pcc-banner__photo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.pcc-banner--photo .pcc-banner__photo img{display:block;width:100%;height:100%;object-fit:cover}
.pcc-banner--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(42,33,24,0) 12%,rgba(42,33,24,.55) 55%,rgba(42,33,24,.85) 100%)}
.pcc-banner--photo .pcc-crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.6)}
.pcc-banner--photo .pcc-crumbs span{color:rgba(255,255,255,.85)}
.pcc-banner--photo .pcc-crumbs li+li::before{border-color:rgba(255,255,255,.85)}
.pcc-banner--photo .home-hero__title{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.pcc-banner--photo .home-hero__lead{color:rgba(255,255,255,.92)}
.pcc-banner--photo.pcc-banner--home .home-hl,.pcc-banner--photo.pcc-banner--home .home-hl--chat{padding:0;border-radius:0;background:none;color:#fff;text-shadow:inherit}
@media (min-width:1024px){
  .pcc-banner{min-height:380px}
  .pcc-banner--photo .pcc-banner__in{max-width:calc(var(--content-max) + 64px);margin:0 auto;padding:0 32px var(--space-6)}
  .pcc-banner--photo .home-hero__title{max-width:900px}
}

/* Pied de page : marge au-dessus pour le détacher nettement du dernier bloc de la page,
   quel que soit le gabarit (le pied de page est commun à toutes les pages, footer.php). */
.pcc-footer{margin-top:var(--space-8);padding:var(--space-6) var(--space-4);background:var(--surface-sunken);border-top:1px solid var(--line);font-size:16px;line-height:24px}
.pcc-footer__grid{display:grid;gap:var(--space-6)}
.pcc-footer h2{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2);font:600 20px/26px var(--font-display)}
.pcc-footer__letters{display:grid;grid-template-columns:repeat(7,44px);gap:2px;margin:0 0 0 -10px;padding:0;list-style:none}
.pcc-footer__letters a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-sm);color:var(--ink);font-weight:600;text-decoration:none}
.pcc-footer__letters a:hover{background:var(--surface)}
.pcc-footer__letters span[aria-disabled]{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink-disabled)}
.pcc-footer__links{margin:0;padding:0;list-style:none}
.pcc-footer__links a{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.pcc-footer__links a:hover{text-decoration-color:var(--ink)}
.pcc-footer__legal{margin:var(--space-6) 0 0;padding-top:var(--space-4);border-top:1px solid var(--line);color:var(--ink-muted)}
.pcc-footer__legal p{margin:0 0 var(--space-2);max-width:70ch}
@media (min-width:1024px){
  .pcc-footer{padding:var(--space-7) max(32px,calc((100vw - var(--content-max)) / 2))}
  .pcc-footer__grid{grid-template-columns:330px 330px minmax(0,1fr) minmax(0,1fr);gap:var(--space-6)}
}