/* Pages lettre et de genre, reprises de design/css/letter.css (mêmes écarts volontaires que
   base.css/components.css : @container → @media, pas de container, pas de sc-for/sc-if). */

/* Bandeau sans photo (aucune photo assignée pour l'instant, contenus/photos/photos.csv à
   brancher plus tard) : aplat de la couleur de l'espèce, texte en --ink, comme prévu par
   docs/8.10 quand un emplacement n'a pas de photo. */
.pcc-banner--flat{background:var(--accent-tint);border-bottom:1px solid var(--line)}
.pcc-banner--flat .pcc-banner__in{padding:var(--space-5) var(--space-4) var(--space-4);color:var(--ink)}
.pcc-banner--flat .home-hero__title{color:var(--ink)}
.pcc-banner--flat .pcc-crumbs a,.pcc-banner--flat .pcc-crumbs [aria-current]{color:var(--ink)}
.pcc-banner--flat .let-count{background:var(--surface);border-color:var(--ink)}
@media (min-width:1024px){.pcc-banner--flat .pcc-banner__in{max-width:calc(var(--content-max) + 64px);margin:0 auto;padding:var(--space-6) 32px}}

.pcc-page--liste{--content-max:1280px}

/* Haut de page */
.let-top{padding-top:var(--space-2)}
.let-count{display:inline-flex;align-items:center;height:32px;margin-top:var(--space-3);padding:0 14px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:600 16px/1 var(--font-display)}
.let-intro{margin:var(--space-3) 0 0}
.let-intro p{margin:0 0 var(--space-2)}
.let-intro__btn{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:600 17px/24px var(--font-text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px;cursor:pointer}

/* Barre collante : alphabet + filtre, toujours accessibles pendant le défilement */
.let-body{position:relative;margin-top:var(--space-3)}
.let-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.let-bar::-webkit-scrollbar{display:none}
.let-bar__btn{flex:none;display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:600 16px/20px var(--font-display);cursor:pointer}
.let-bar__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.let-chip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--ink);border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:600 15px/20px var(--font-display);white-space:nowrap}
button.let-chip{cursor:pointer}
.let-chip--male{background:var(--male-bg);border-color:var(--male-ink);color:var(--male-ink)}
.let-chip--femelle{background:var(--female-bg);border-color:var(--female-ink);color:var(--female-ink)}
.let-chip--mixte{background:var(--mixed-bg);border-color:var(--mixed-ink);color:var(--mixed-ink)}
.let-drawer{display:none}
.let-drawer.is-open{display:block;position:absolute;inset:0;z-index:20}
.let-drawer__scrim{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(42,33,24,.5);cursor:pointer}
.let-filters{position:sticky;top:0;z-index:1;display:flex;flex-direction:column;width:min(88%,320px);max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-2) var(--space-4) var(--space-4);background:var(--surface);border-radius:0 0 var(--radius-lg) 0;box-shadow:var(--shadow-card)}
.let-filters__head{display:flex;align-items:center;gap:var(--space-2);min-height:52px;font:600 20px/24px var(--font-display)}
.let-filters__sp{flex:1}
.let-filters__n{min-width:24px;height:24px;padding:0 6px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:600 14px/21px var(--font-text);text-align:center}
.let-filters__reset{min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:600 16px/24px var(--font-text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px;cursor:pointer}
.let-filters__close{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.let-filters__close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.let-filters__apply{display:flex;width:100%;margin-top:var(--space-3)}
.let-fsec{border-top:1px solid var(--line)}
.let-fsec > summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;list-style:none;cursor:pointer;font:600 17px/24px var(--font-display)}
.let-fsec > summary::-webkit-details-marker{display:none}
.let-fsec > summary::after{content:"";width:8px;height:8px;margin-right:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.let-fsec[open] > summary::after{transform:translateY(2px) rotate(225deg)}
.let-fsec .pcc-filter{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--space-3)}
.let-fsec .pcc-filter__btn{flex-direction:row;justify-content:flex-start;gap:var(--space-2);min-height:48px;padding:0 12px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink);font:400 17px/24px var(--font-text)}
.let-fsec .pcc-filter__btn:hover{background:var(--surface-sunken)}
.let-fsec .pcc-filter__count{margin-left:auto;font-size:15px}
.let-fsec .pcc-filter__btn[aria-pressed="true"]{background:var(--accent-tint);font-weight:600}
.let-fsec .pcc-filter__btn--male[aria-pressed="true"]{background:var(--male-bg);color:var(--male-ink)}
.let-fsec .pcc-filter__btn--femelle[aria-pressed="true"]{background:var(--female-bg);color:var(--female-ink)}
.let-fsec .pcc-filter__btn--mixte[aria-pressed="true"]{background:var(--mixed-bg);color:var(--mixed-ink)}
.let-alpha ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:0;padding:0 0 var(--space-3)}
.let-alpha li{min-width:0}
.let-alpha .pcc-alpha__l{width:100%}
.let-alpha li.let-alpha__wide{grid-column:1 / -1}
.let-main{padding:0 var(--space-4)}
.let-adwide .pcc-ad{min-height:274px;margin-bottom:0}
button.pcc-alpha__l{padding:0;cursor:pointer}
button.pcc-alpha__l:hover{border-color:var(--ink)}
.pcc-alpha__l[aria-pressed="true"]{background:var(--accent);border-color:var(--ink);color:var(--on-accent)}
.let-alpha__all{width:auto;padding:0 14px !important;font-size:16px}
.pcc-filter__btn--male[aria-pressed="true"]{background:var(--male-bg);border-color:var(--male-ink);color:var(--male-ink)}
.pcc-filter__btn--femelle[aria-pressed="true"]{background:var(--female-bg);border-color:var(--female-ink);color:var(--female-ink)}
.pcc-filter__btn--mixte[aria-pressed="true"]{background:var(--mixed-bg);border-color:var(--mixed-ink);color:var(--mixed-ink)}

/* Recherche rapide */
.let-search{position:relative;display:flex;align-items:center}
.let-search input{width:100%;min-height:48px;padding:0 48px 0 44px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:400 17px/24px var(--font-text)}
.let-search input::placeholder{color:var(--ink-muted);opacity:1}
.let-search__ico{position:absolute;left:14px;width:20px;height:20px;fill:none;stroke:var(--ink-muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.let-search__clear{position:absolute;right:2px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.let-search__clear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.let-search--bar{display:none}
.let-search--below{margin-top:var(--space-3)}

/* Liste */
.let-status{margin:var(--space-4) 0 var(--space-3);font:600 16px/24px var(--font-text);color:var(--ink-muted)}
.pcc-card__name .let-name{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:5px}
.let-fsec > summary > span:first-child{margin-right:auto}
.let-fsec .pcc-filter__btn:disabled{color:var(--ink-disabled);cursor:default}
.let-fsec .pcc-filter__btn:disabled:hover{background:none}
.let-fsec .pcc-filter__btn:disabled .pcc-filter__count{color:var(--ink-disabled)}
.let-empty{padding:var(--space-6) var(--space-4);text-align:center;background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius-lg)}
.let-empty__title{margin:0;font:600 22px/28px var(--font-display)}
.let-empty p{margin:var(--space-2) 0 var(--space-4);color:var(--ink-muted)}

/* Sous la liste */
.let-mini{display:grid;gap:var(--space-3);padding:var(--space-5) var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-lg)}
.let-mini__title{margin:0;font:600 26px/30px var(--font-display)}
.let-mini__lead{margin:var(--space-1) 0 0}
.let-mini .home-result{min-height:150px;margin-top:0}
.let-mini .home-go{margin-top:var(--space-2)}
.home-go.pcc-btn--accent:hover{filter:brightness(.96)}
.let-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2)}
.let-tile{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:76px;padding:var(--space-3) var(--space-4);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);color:var(--ink);text-decoration:none}
.let-tile:hover{border-color:var(--ink)}
.let-tile__k{font:600 14px/20px var(--font-text);color:var(--ink-muted)}
.let-tile__v{font:600 18px/24px var(--font-display)}
.let-tile--next{order:2;text-align:right}
.let-tile--chat{order:3;grid-column:1 / -1;text-align:center;background:var(--cat);border-color:var(--ink)}
.let-tile--chat .let-tile__k{color:var(--ink)}
.let-tile--chat:hover{filter:brightness(.96)}
.let-faq__item{margin-top:var(--space-2);padding:0 var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.let-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:56px;padding:var(--space-2) 0;list-style:none;cursor:pointer;font:600 18px/24px var(--font-display)}
.let-faq__item summary::-webkit-details-marker{display:none}
.let-faq__item summary::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.let-faq__item[open] summary::after{transform:translateY(2px) rotate(225deg)}
.let-faq__item p{margin:0 0 var(--space-4)}

/* Carte prénom dépliable : un seul bouton ouvre/referme (icône + texte changent avec
   aria-expanded), et un seul paragraphe sert d'avant-goût (replié) puis de texte complet
   (déplié) — pas d'encart séparé, pas de répétition du texte. */
.dc-card{display:grid;transition:transform 160ms ease-out}
.dc-teaser{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:var(--space-3) 0 0;font-size:16px;line-height:24px;color:var(--ink-muted);-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.dc-card.is-open .dc-teaser{display:block;height:auto;overflow:visible;color:var(--ink);-webkit-mask-image:none;mask-image:none}
.dc-open{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:var(--space-3);padding:0 16px 0 6px;border:2px solid var(--ink);border-radius:var(--radius-pill);background:var(--accent-tint);color:var(--ink);font:600 16px/20px var(--font-display);cursor:pointer;justify-self:start;transition:transform 120ms ease-out}
.dc-open:active{transform:scale(.97)}
@media (hover:hover){.dc-open:hover{background:var(--accent)}}
.dc-open__ico{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);border:2px solid var(--ink)}
.dc-open__ico::before,.dc-open__ico::after{content:"";position:absolute;width:12px;height:2.5px;border-radius:2px;background:var(--ink)}
.dc-open__ico::after{transform:rotate(90deg);transition:transform 160ms ease-out}
.dc-open[aria-expanded="true"] .dc-open__ico::after{transform:rotate(0deg)}
.dc-card.is-open{border:2px solid var(--ink);box-shadow:0 6px 0 var(--accent)}
.dc-card.is-highlight{animation:dcHighlight 1.6s ease-out}
@keyframes dcHighlight{0%,35%{box-shadow:0 0 0 4px var(--accent)}100%{box-shadow:0 6px 0 var(--accent)}}
@media (prefers-reduced-motion:reduce){.dc-card.is-highlight{animation:none}.dc-open__ico::after{transition:none}}
.dc-story{margin-top:var(--space-4);animation:dcIn 240ms ease-out}
@keyframes dcIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dc-story[hidden]{display:none}
.dc-story__fav{gap:8px;box-shadow:0 3px 0 var(--ink)}
.dc-story__fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.dc-story{animation:none}}

@media (min-width:1024px){
  .let-top{padding-top:var(--space-4)}
  .let-body{display:grid;grid-template-columns:248px minmax(0,1fr);gap:var(--space-5);align-items:start;max-width:calc(var(--content-max) + 64px);margin:var(--space-5) auto 0;padding:0 32px}
  .let-bar,.let-drawer__scrim,.let-filters__close,.let-filters__apply{display:none}
  .let-drawer,.let-drawer.is-open{display:contents}
  .let-filters{top:var(--space-4);width:auto;max-height:calc(100dvh - 2 * var(--space-4));scrollbar-width:thin;padding:var(--space-2) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none}
  .let-filters__head{min-height:48px;font-size:19px}
  .let-search--bar{display:flex;margin:0 0 var(--space-3)}
  .let-fsec > summary{min-height:48px}
  .let-fsec .pcc-filter__btn{min-height:40px}
  .let-alpha .pcc-alpha__l{height:34px;font-size:16px}
  .let-main{padding:0}
  .let-adwide .pcc-ad{min-height:114px;align-items:stretch}
  .let-adwide .pcc-ad__label{text-align:center}
  .let-adwide .pcc-ad__slot{width:100%;height:var(--ad-leaderboard-h)}
  .let-status{margin-top:0}
  .let-search--below{display:none}
  .let-mini{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-7);row-gap:var(--space-4);padding:var(--space-6) var(--space-7)}
  .let-mini__text{grid-column:1;grid-row:1;align-self:end}
  .let-mini__title{font-size:34px;line-height:40px}
  .let-mini__lead{font-size:19px;line-height:29px}
  .let-mini .home-go{grid-column:1;grid-row:2;align-self:start;margin-top:0}
  .let-mini .home-result{grid-column:2;grid-row:1 / span 2;align-self:center;min-height:210px}
  .let-next{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
  .let-tile{min-height:88px;padding:var(--space-4) var(--space-5)}
  .let-tile--chat{order:0;grid-column:auto}
  .let-tile--next{order:0}
  .let-faq{max-width:820px}
}

/* Cartes : hauteur homogène, quatre par ligne sur ordinateur (docs/03-gabarits.md §10) */
.pcc-cards.let-list{align-items:start}
/* Les cartes hors écran ne sont pas mises en page tant qu'on ne s'en approche pas en défilant
   (section 11 de CLAUDE.md : « envisager content-visibility: auto sur les cartes des piliers »,
   mesuré utile aussi sur les pages lettre et de genre vu le nombre de cartes). La hauteur de
   secours (280px) est celle observée sur une carte réelle, mobile et ordinateur confondus ; une
   fois une carte affichée au moins une fois, le mot-clé « auto » retient sa vraie hauteur. Le
   contenu reste entièrement dans le HTML, donc toujours lu par Google (section 6 de CLAUDE.md).
   Sans effet dans les navigateurs qui ne connaissent pas content-visibility (dégradation sans
   casse). */
.let-list > li{content-visibility:auto;contain-intrinsic-height:auto 280px}
.dc-card{grid-template-columns:minmax(0,1fr)}
.dc-card .pcc-card__head{align-items:center}
.dc-card .pcc-card__name{flex:1;min-width:0;height:40px;margin:0;padding-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:24px;line-height:34px}
.dc-card .pcc-card__meta{flex-wrap:nowrap;height:28px;overflow:hidden;white-space:nowrap}
.dc-card .pcc-card__meta > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dc-card .pcc-card__meta .pcc-pill{flex:none}
.dc-card .pcc-card__meaning{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:48px;font-size:16px;line-height:24px}
.dc-card .dc-teaser{height:48px}
.let-card-scrim{display:none;position:fixed;inset:0;z-index:20;margin:0;padding:0;border:0;background:rgba(42,33,24,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer}
@media (min-width:1024px){
  .pcc-cards.let-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
  .let-list .dc-card{padding:14px}
  .let-list .dc-card .pcc-card__head{gap:var(--space-2)}
  .let-list .dc-card .pcc-card__name{font-size:20px;line-height:34px}
  .let-list .dc-card .pcc-heart{width:36px;height:36px}
  .let-list .dc-card .pcc-card__meta{gap:var(--space-2)}
  .let-list .dc-card .pcc-card__meta .pcc-pill{padding:0 10px}
  .let-list .dc-card .pcc-card__meaning,.let-list .dc-card .dc-teaser{font-size:15px}
  .let-list .dc-card .dc-open{gap:8px;padding:0 12px 0 5px;font-size:15px}
  .let-list .dc-card .dc-open__ico{width:26px;height:26px}
  .let-list .dc-card:not(.is-open) .dc-ok{display:none}
  .let-list .dc-card.is-open{padding:var(--space-5)}
  .let-list .dc-card.is-open .pcc-card__name{font-size:26px}
  /* Carte ouverte, PC : décision du client du 28 octobre 2026, jugé plus cohérent qu'une carte
     qui flotte au-dessus des cartes du dessous (essayé juste avant) — la carte s'affiche en
     grand, centrée, par-dessus un fond flouté (.let-card-scrim), toute l'information visible
     sans avoir à faire défiler la page. */
  .let-list > li{position:relative}
  /* Une fois la carte sortie du flux normal (position fixe), le <li> n'a plus de contenu pour
     lui donner de hauteur : content-visibility:auto (ligne 180) le traite alors comme hors
     écran et cesse de peindre son contenu. On le repasse en rendu normal tant qu'elle est
     ouverte. */
  .let-card-li.is-open{content-visibility:visible}
  .let-list .dc-card.is-open{position:fixed;top:50%;left:50%;z-index:21;width:min(880px,92vw);max-height:88vh;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 20px 48px rgba(42,33,24,.35);animation:dcCardIn 360ms cubic-bezier(.16,1,.3,1)}
  .let-card-scrim:not([hidden]){display:block;animation:dcScrimIn 360ms ease-out}
  @keyframes dcCardIn{from{opacity:0;transform:translate(-50%,-50%) scale(.88)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  @keyframes dcScrimIn{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .let-list .dc-card.is-open,.let-card-scrim:not([hidden]){animation:none}
  }
}

/* Carte ouverte : nom, origine et sens en entier */
.dc-card.is-open .pcc-card__meaning{display:block;height:auto}
.dc-card.is-open .pcc-card__name{white-space:normal;height:auto}
.dc-card.is-open .pcc-card__meta{flex-wrap:wrap;height:auto;white-space:normal}
/* Pas de !important : la règle de survol qu'elle neutralisait exclut déjà .is-open elle-même
   (animations.css), et le !important empêchait l'animation d'ouverture ci-dessus de jouer sur
   le transform de la fenêtre centrée (ordinateur). */
.dc-card.is-open{transform:none}