/* Gabarit du site hub. Mobile d'abord (375 px de reference).
   Design valide par Arthur le 22/10 16h46 (maquettes accueil + profil) :
   sombre par defaut, bouton Telegram titre + sous-titre + logo, etiquettes
   VRAIES seulement (Nouvelle, Verifiee, Repond vite, categorie).
   Regles (KB UI-UX 01, KB Website 02) : couleurs en tokens seulement (aucun
   hex hors des blocs de tokens, verifier.py le controle), contraste mesure
   par verifier.py sur les deux blocs, corps >= 16 px, cible tactile
   >= 48 px, animations sur transform/opacity, reduced-motion respecte.
   Pas de police distante : vitesse sur donnees mobiles d'abord. */

/* Le site est sombre dans les deux modes du systeme : le premier bloc est
   lu en clair, le second en sombre, et ils portent la meme palette. */
:root {
  --fond: #0e0b0d;
  --surface: #1a1518;
  --surface2: #241d21;
  --texte: #f6eef1;
  --texte-doux: #b9aab1;
  --ligne: #33292e;
  --accent: #1d78bd;
  --sur-accent: #ffffff;
  --lien: #ff7aa0;
  --rose: #ff5c8a;
  --peche: #ff9a62;
  --sur-rose: #1a0d12;
  --bleu-tg: #2aabee;
  --vert: #35d07f;
  --focus: #8ab4ff;
  --voile: rgba(0, 0, 0, 0.78);
  --ombre-tg: rgba(29, 120, 189, 0.38);
  --degrade-photo: rgba(14, 11, 13, 0.92);
  --pastille: rgba(0, 0, 0, 0.55);
  --puce: rgba(255, 255, 255, 0.14);
  --halo-vert: rgba(53, 208, 127, 0.25);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mesure: 36rem;
  --e1: 4px; --e2: 8px; --e3: 16px; --e4: 24px; --e5: 32px; --e6: 48px;
  --rayon-image: 14px;
  --rayon-carte: 18px;
  --rayon-bouton: 16px;
  --rayon-pilule: 999px;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0e0b0d;
    --surface: #1a1518;
    --surface2: #241d21;
    --texte: #f6eef1;
    --texte-doux: #b9aab1;
    --ligne: #33292e;
    --accent: #1d78bd;
    --sur-accent: #ffffff;
    --lien: #ff7aa0;
    --rose: #ff5c8a;
    --peche: #ff9a62;
    --sur-rose: #1a0d12;
    --bleu-tg: #2aabee;
    --vert: #35d07f;
    --focus: #8ab4ff;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  touch-action: manipulation;
  overflow-x: hidden;
}

body.a-barre { padding-bottom: 104px; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--lien); text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.lien-evitement {
  position: absolute; left: var(--e3); top: -100px;
  background: var(--surface); color: var(--texte); padding: var(--e2) var(--e3);
}
.lien-evitement:focus { top: var(--e2); }

.enveloppe { max-width: var(--mesure); margin: 0 auto; padding: 0 var(--e3); }

/* --- bandeau d'annonce : un fait calcule, jamais une preuve inventee -- */
.bandeau {
  margin: 0; padding: var(--e2) 0; font-size: 0.8125rem; font-weight: 700; text-align: center;
  background: linear-gradient(90deg, var(--rose), var(--peche)); color: var(--sur-rose);
}

/* --- en-tete et pied ------------------------------------------------- */
.tete .enveloppe {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px;
}
.marque {
  font-size: 1.1875rem; font-weight: 800; letter-spacing: 0.02em;
  color: var(--texte); text-decoration: none;
  min-height: 48px; display: inline-flex; align-items: center;
}
.marque span { color: var(--rose); }
.tete nav a {
  color: var(--texte-doux); text-decoration: none; font-size: 0.875rem; font-weight: 600;
  min-height: 48px; display: inline-flex; align-items: center; padding: 0 var(--e2);
}
.tete nav a[aria-current="page"] { color: var(--texte); }
.tete nav { margin-left: auto; }
/* selecteur de langue : <details>, marche sans JavaScript */
.langues { position: relative; }
.langues summary {
  list-style: none; cursor: pointer; min-height: 48px; min-width: 48px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 800;
  color: var(--texte-doux);
}
.langues summary::-webkit-details-marker { display: none; }
.langues summary::after { content: "▾"; margin-left: 0.2em; }
.langues ul {
  position: absolute; right: 0; top: 100%; z-index: 60; margin: 0; padding: var(--e1) 0; list-style: none;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon-bouton); min-width: 9rem;
}
.langues a {
  display: block; padding: var(--e2) var(--e3); color: var(--texte); text-decoration: none; min-height: 44px;
  box-sizing: border-box;
}
.langues a[aria-current="true"] { font-weight: 800; color: var(--rose); }

.pied {
  margin-top: var(--e6); border-top: 1px solid var(--ligne);
  padding: var(--e4) 0 var(--e5); color: var(--texte-doux); font-size: 0.9375rem;
}
.pied p { margin: 0 0 var(--e2); }
.pied a { color: var(--texte-doux); }

/* --- typographie ----------------------------------------------------- */
h1, h2, h3 { font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: 1.875rem; margin: var(--e4) 0 var(--e2); }
h2 { font-size: 1.25rem; margin: var(--e5) 0 var(--e3); }
h3 { font-size: 1.0625rem; margin: 0 0 var(--e1); }
.chapeau { font-size: 1.0625rem; color: var(--texte-doux); margin: 0 0 var(--e4); }
.date {
  font-size: 0.8125rem; color: var(--texte-doux); letter-spacing: 0.04em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.texte p { margin: 0 0 var(--e3); }
.texte blockquote {
  margin: var(--e4) 0; padding-left: var(--e3); border-left: 3px solid var(--rose);
  font-style: italic; font-size: 1.125rem;
}

.fil { font-size: 0.8125rem; color: var(--texte-doux); margin: var(--e2) 0 var(--e3); }
article > .date:first-child { display: block; margin-top: var(--e4); }
.fil ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e1); }
.fil li + li::before { content: "/"; margin-right: var(--e1); }
.fil a { color: var(--texte-doux); }

/* --- images ---------------------------------------------------------- */
.portrait { margin: var(--e3) 0 var(--e4); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon-image); }
.illustration { margin: var(--e4) 0; }
.illustration img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon-image); }

/* --- pastilles : en ligne, verifiee, etiquettes ----------------------- */
.dispo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--rayon-pilule);
  background: var(--pastille); color: var(--texte);
  font-size: 0.78rem; font-weight: 600; backdrop-filter: blur(6px);
}
.dispo i, .temps i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--vert);
  box-shadow: 0 0 0 3px var(--halo-vert); flex: none;
}
.verif {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1em; height: 1.1em; border-radius: 50%; margin-left: 0.25em;
  background: var(--bleu-tg); color: var(--sur-accent); vertical-align: 0.05em;
}
.verif svg { width: 70%; height: 70%; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--e2) 0 0; padding: 0; list-style: none; }
.puces li, .puces a {
  font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: var(--rayon-pilule);
  background: var(--puce); color: var(--texte); text-decoration: none;
}
.puces a { display: inline-block; }
.puces .nouvelle, .tag-nouvelle {
  background: linear-gradient(90deg, var(--rose), var(--peche)); color: var(--sur-rose);
}
.tag-nouvelle {
  display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 6px;
}
.etiquette {
  display: inline-block; margin: var(--e1) 0; padding: 0 var(--e2);
  border: 1px solid var(--ligne); border-radius: var(--rayon-pilule);
  font-size: 0.8125rem; color: var(--texte-doux);
}

/* --- l'action : ecrire sur Telegram ---------------------------------- */
.bouton-tg {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 16px;
  background: var(--accent); color: var(--sur-accent);
  border-radius: var(--rayon-bouton); text-decoration: none;
  box-shadow: 0 8px 24px var(--ombre-tg);
  transition: transform 150ms ease-out;
}
.bouton-tg:active { transform: scale(0.98); }
.bouton-tg .logo-tg { width: 30px; height: 30px; flex: none; }
.bouton-tg .libelle { display: flex; flex-direction: column; min-width: 0; }
.bouton-tg b { font-size: 1rem; line-height: 1.25; }
.bouton-tg small { font-size: 0.8rem; opacity: 0.92; }
.bouton-tg .fleche { margin-left: auto; font-size: 1.4rem; line-height: 1; }
.rebond .bouton-tg { animation: rebond 2.4s ease-in-out infinite; }
@keyframes rebond { 0%, 86%, 100% { transform: translateY(0); } 92% { transform: translateY(-4px); } }

.appel { margin: var(--e4) 0; }
.appel p { margin: var(--e2) 0 0; font-size: 0.875rem; color: var(--texte-doux); text-align: center; }
.temps { display: flex; align-items: center; justify-content: center; gap: var(--e2); }

.barre-tg {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: var(--e3); padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--fond) 35%);
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.barre-tg.cachee { transform: translateY(100%); opacity: 0; }
.barre-tg .bouton-tg { max-width: var(--mesure); margin: 0 auto; }

/* --- accueil : accroche, ronds, vedette, preuves ---------------------- */
.une h1 { font-size: 2.125rem; margin-top: var(--e3); }
.une h1 em { font-style: normal; color: var(--rose); }

.ronds {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  list-style: none; margin: 0 calc(-1 * var(--e3)); padding: var(--e1) var(--e3) var(--e2);
  scrollbar-width: none;
}
.ronds::-webkit-scrollbar { display: none; }
.ronds li { flex: none; scroll-snap-align: start; }
.ronds a { display: block; width: 68px; text-align: center; font-size: 0.75rem; color: var(--texte-doux); text-decoration: none; }
.ronds .rond {
  position: relative; display: block; width: 68px; height: 68px; padding: 3px; margin-bottom: 5px;
  border-radius: 50%; background: conic-gradient(var(--rose), var(--peche), var(--rose));
}
.ronds img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--fond); }
.ronds .rond::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--vert); border: 3px solid var(--fond);
}

.vedette { position: relative; margin: var(--e3) 0 0; border-radius: 22px; overflow: hidden; }
.vedette > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; }
.vedette .dispo { position: absolute; top: 14px; left: 14px; }
.vedette .bas {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 96px 16px 16px;
  background: linear-gradient(transparent, var(--degrade-photo));
}
.vedette .nom-vedette { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.1; margin: 6px 0 4px; }
.vedette .bas p { margin: 0 0 14px; color: var(--texte); font-size: 0.9375rem; }
.vedette .nom-vedette a { color: var(--texte); text-decoration: none; }
.vedette .appel { margin: 0; }

.preuves { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); list-style: none; padding: 0; margin: var(--e5) 0 0; }
.preuves li {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px;
  padding: 12px 8px; text-align: center; font-size: 0.8rem; color: var(--texte-doux);
}
.preuves b { display: block; color: var(--texte); font-size: 1.125rem; }

/* --- cartes : grille, ou defilement horizontal ------------------------ */
.cartes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cartes li { position: relative; background: var(--surface); border-radius: var(--rayon-carte); overflow: hidden; display: flex; flex-direction: column; }
.cartes a { color: var(--texte); text-decoration: none; }
.carte-photo { display: block; position: relative; }
.cartes img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cartes .tag-nouvelle { position: absolute; top: 10px; left: 10px; }
.carte-texte { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 10px 12px 12px; }
.carte-texte .etiquette { margin: 4px 0 0; }
/* refonte 22/10 : chaque carte porte son bouton direct vers le Telegram de la modele */
.bouton-carte {
  display: flex; align-items: center; justify-content: center; gap: 6px; align-self: stretch;
  margin-top: auto; min-height: 44px; padding: 8px 10px; border-radius: var(--rayon-pilule);
  background: var(--accent); color: var(--sur-accent) !important; font-size: 0.8125rem; font-weight: 700; line-height: 1.15; text-align: center;
}
.carte-texte .etiquette + .bouton-carte, .carte-texte .nom + .bouton-carte { margin-top: 10px; }
.bouton-carte svg { width: 18px; height: 18px; flex: none; }
.cartes .nom { font-size: 1.0625rem; font-weight: 800; display: block; }
.cartes .accroche { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--texte-doux); margin-top: 2px; }
.cartes.defile {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--e3)); padding: 0 var(--e3);
}
.cartes.defile::-webkit-scrollbar { display: none; }
.cartes.defile li { flex: none; width: 200px; scroll-snap-align: start; }

/* --- listes : entrees du carnet, envies ------------------------------- */
.entrees { list-style: none; padding: 0; margin: 0; }
.entrees li { padding: var(--e3) 0; border-top: 1px solid var(--ligne); }
.entrees h3 a { color: var(--texte); text-decoration: none; }
.entrees h3 a:hover { text-decoration: underline; }
.entrees p { margin: var(--e1) 0 0; color: var(--texte-doux); font-size: 0.9375rem; }
.entrees.vignettes li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px 0; }
.entrees.vignettes img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.entrees.vignettes .sans-image { grid-template-columns: 1fr; }

/* refonte 22/10 : une seule rangee qui defile */
.intentions {
  list-style: none; display: flex; flex-wrap: nowrap; gap: var(--e2); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--e3)); padding: 0 var(--e3);
}
.intentions::-webkit-scrollbar { display: none; }
.intentions li { flex: none; }
.intentions a { white-space: nowrap; }
.titre-puces { font-size: 1rem; margin: var(--e4) 0 var(--e2); }
.bio { font-size: 1.0625rem; margin: 0 0 var(--e3); }
.entrees.titres li { padding: 10px 0; }
.entrees.titres a { color: var(--texte); }
/* texte long : present dans la page, replie */
.replie { margin: var(--e3) 0; border-top: 1px solid var(--ligne); }
.replie summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--texte-doux); }
.replie[open] summary { color: var(--texte); }
.intentions a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  background: var(--surface2); border: 1px solid var(--ligne); border-radius: var(--rayon-pilule);
  color: var(--texte); font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
.aussi { margin-top: var(--e5); color: var(--texte-doux); }

.voisines { display: flex; flex-direction: column; gap: var(--e2); margin: var(--e5) 0 0; padding: 0; list-style: none; }
.voisines a { display: block; min-height: 48px; padding: var(--e2) 0; }

/* --- photo de tete des pages d'intention (3:2, premier ecran) -------- */
.bandeau-photo { margin: var(--e3) calc(-1 * var(--e3)) var(--e3); }
.bandeau-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* --- badge « Verifiee » (Arthur 10/10 : identite et majorite verifiees) */
.verifiee {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--texte); text-decoration: none;
}
.verifiee .coche { width: 14px; height: 14px; color: var(--bleu-tg); }
.badge-profil { margin: 0 0 var(--e2); font-size: 0.8125rem; color: var(--texte-doux); }

/* --- profil : la photo plein ecran ----------------------------------- */
.scene { position: relative; margin: 0 calc(-1 * var(--e3)); }
.scene > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; }
.scene .dispo { position: absolute; top: 14px; right: 14px; }
.scene .bas {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 120px var(--e3) var(--e3);
  background: linear-gradient(transparent, var(--fond));
}
.scene h1 { margin: 0; font-size: 1.75rem; }
.scene .chapeau { margin: 6px 0 0; color: var(--texte); }

/* --- feuilleter les profils : precedente / suivante ------------------ */
.feuilleter {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  margin: 0 0 var(--e2); font-size: 0.875rem;
}
.feuilleter a {
  display: inline-flex; align-items: center; gap: var(--e2); min-height: 48px;
  color: var(--texte); text-decoration: none;
}
.feuilleter img { width: 32px; height: 40px; object-fit: cover; border-radius: 8px; }

/* --- galerie du profil : 3 colonnes, la derniere invite a Telegram ---- */
.galerie { list-style: none; padding: 0; margin: var(--e4) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.galerie .plus { position: relative; }
.galerie .plus span {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: var(--voile); backdrop-filter: blur(8px); border-radius: 8px;
  font-size: 0.8125rem; font-weight: 700; color: var(--texte);
}

.faq h3 { margin-top: var(--e4); }
.appel-rappel { margin: var(--e5) 0; }

/* --- porte d'age : couche visuelle, le contenu reste dans le HTML ------ */
.porte {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: var(--e3); background: var(--voile);
}
.porte[hidden] { display: none; }
.porte-ouverte body { overflow: hidden; }
.porte-carte {
  max-width: 26rem; padding: var(--e5) var(--e4); background: var(--surface); color: var(--texte);
  border: 1px solid var(--ligne); border-radius: var(--rayon-carte); text-align: center;
}
.porte-titre { font-size: 1.5rem; font-weight: 800; margin: 0 0 var(--e3); }
.porte-oui {
  display: block; width: 100%; min-height: 52px; margin-top: var(--e4); border: 0;
  border-radius: var(--rayon-bouton); background: var(--accent); color: var(--sur-accent);
  font: inherit; font-weight: 700; cursor: pointer;
}
/* Arthur 22/10 : une seule fenetre, deux choix DISTINCTS. Accepter et
   Refuser ont exactement le meme style ; rien n'est choisi d'avance. */
.porte-cookies {
  margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--ligne);
  font-size: 0.875rem; color: var(--texte-doux); text-align: left;
}
.porte-cookies p { margin: 0 0 var(--e2); }
.porte-cookies b { color: var(--texte); }
.choix-cookies { display: flex; gap: var(--e2); }
.choix-cookie {
  flex: 1; min-height: 44px; border-radius: var(--rayon-bouton); font: inherit; font-weight: 700;
  background: transparent; color: var(--texte); border: 1px solid var(--ligne); cursor: pointer;
}
.choix-cookie[aria-pressed="true"] { border-color: var(--texte); background: var(--voile); }
.choix-cookie[aria-pressed="true"]::before { content: "✓ "; }
.porte-cookies-defaut { font-size: 0.8125rem; margin: var(--e2) 0 0; }
.porte-non {
  margin-top: var(--e3); background: none; border: 0; padding: var(--e2); font: inherit;
  color: var(--texte-doux); text-decoration: underline; cursor: pointer;
}

/* --- bandeau de consentement Google Ads : en bas, au-dessus de la barre - */
.consentement {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: var(--e3); padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom));
  background: var(--surface); color: var(--texte); border-top: 1px solid var(--ligne);
  font-size: 0.9375rem;
}
.consentement[hidden] { display: none; }
.consentement p { margin: 0 0 var(--e2); }
.consentement-boutons { display: flex; gap: var(--e2); }
.consentement-boutons button {
  flex: 1; min-height: 48px; border-radius: var(--rayon-bouton); font: inherit; font-weight: 700; cursor: pointer;
}
.consentement-oui, .consentement-non { background: transparent; color: var(--texte); border: 1px solid var(--ligne); }
.lien-consentement {
  background: none; border: 0; padding: 0; font: inherit; color: var(--texte-doux);
  text-decoration: underline; cursor: pointer;
}

@media (min-width: 768px) {
  .cartes { grid-template-columns: repeat(4, 1fr); }
  .cartes.defile li { width: 220px; }
  .bandeau-photo { margin-left: 0; margin-right: 0; }
  .bandeau-photo img { border-radius: var(--rayon-image); }
  .scene { margin: 0; }
  .scene > img { aspect-ratio: 4 / 5; border-radius: 22px; }
  body { font-size: 1.125rem; }
  h1 { font-size: 2.25rem; }
  .une h1 { font-size: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.bouton-tg .avion { fill: var(--accent); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texte-accueil { margin-top: var(--e5); }
.marque span { margin-left: 0.25em; }
.vedette > img { aspect-ratio: 4 / 5; max-height: 68vh; }
.puces a { padding: 0; background: none; color: inherit; border-radius: 0; }
.puces li { display: inline-flex; align-items: center; }
.puces .coche { display: inline-flex; margin-right: 3px; }
.puces .coche svg { width: 14px; height: 14px; }
.scene > img { aspect-ratio: 4 / 5; max-height: 60vh; }

/* --- PC et tablette (retour Arthur 22/10 20h20 : « il n'est pas adaptatif ») ---
   Sous 768 px rien ne change. Au-dessus : contenu jusqu'a 1200 px, grille
   3 colonnes (tablette) puis 4 (PC), profil photo a gauche / action a droite,
   texte en colonne de 720 px. La barre collante du bas reste au mobile. */
@media (min-width: 768px) {
  .enveloppe { max-width: 1200px; padding: 0 32px; }
  main.etroite { max-width: calc(720px + 64px); }
  .large > h1, .large > .chapeau, .large > .replie, .large > .aussi, .large > .titre-puces { max-width: 720px; }
  .cartes { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cartes .nom { font-size: 1.1875rem; }
  .bouton-carte { font-size: 0.9375rem; min-height: 48px; }
  .une { padding: var(--e4) 0 var(--e2); }
  .une h1 { font-size: 3rem; max-width: 18ch; }
  .une .chapeau { font-size: 1.25rem; }
  .barre-tg { display: none; }
  body.a-barre { padding-bottom: 0; }
  .intentions { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }

  /* profil : premier ecran sur deux colonnes */
  .profil-tete {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px;
    align-items: start; margin-top: var(--e3);
  }
  .profil-tete .scene { display: contents; }
  .profil-tete .scene > img {
    grid-column: 1; grid-row: 1 / span 4; width: 100%; max-height: none;
    aspect-ratio: 4 / 5; border-radius: 22px;
  }
  .profil-tete .scene .dispo, .profil-tete .scene .tag-nouvelle { grid-column: 2; grid-row: 1; position: static; justify-self: start; align-self: start; }
  .profil-tete .scene .tag-nouvelle { margin-top: 40px; }
  .profil-tete .scene .bas { grid-column: 2; grid-row: 2; position: static; padding: var(--e3) 0 0; background: none; }
  .profil-tete .scene h1 { font-size: 3rem; }
  .profil-tete .appel { grid-column: 2; grid-row: 3; margin: var(--e4) 0 var(--e3); max-width: 440px; }
  .profil-tete .bio { grid-column: 2; grid-row: 4; font-size: 1.1875rem; }
  .profil-suite { max-width: 720px; }
  .profil-suite .appel-rappel { max-width: 440px; }

}
@media (min-width: 1024px) {
  .cartes { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .cartes.defile { display: grid; overflow: visible; margin: 0; padding: 0; }
  .cartes.defile li { width: auto; }
  .une h1 { font-size: 3.5rem; }
}

/* --- « Choisis pour moi » ---------------------------------------------- */
[hidden] { display: none !important; }
.quiz-q { border: 0; padding: 0; margin: var(--e4) 0; }
.quiz-q legend { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--e3); }
.quiz-q legend small { font-size: 0.875rem; opacity: 0.6; font-weight: 600; margin-left: 6px; }
.quiz-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-choix button {
  min-height: 96px; border-radius: 16px; border: 1px solid rgba(127,127,127,0.35);
  background: transparent; color: inherit; font: inherit; font-size: 1.125rem; font-weight: 800; cursor: pointer;
}
.quiz-egal { margin-top: 12px; width: 100%; min-height: 48px; background: none; border: 0; color: inherit; opacity: 0.7; font: inherit; text-decoration: underline; cursor: pointer; }
.quiz-resultat h2:focus { outline: none; }
@media (min-width: 768px) { .quiz { max-width: 720px; } }

/* --- Audit visuel 22/10 nuit (VERA) : mise en page seule, ni texte ni photo --- */
/* carnet : des lignes nettes avec une fleche, plus une pile de liens soulignes */
.entrees.titres { list-style: none; padding: 0; margin: var(--e2) 0 0; }
.entrees.titres li { padding: 0; border-top: 1px solid var(--ligne); }
.entrees.titres a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; text-decoration: none; font-weight: 600;
}
.entrees.titres a::after { content: "›"; color: var(--texte-doux); font-size: 1.25rem; }
.entrees.titres a:hover { text-decoration: underline; }
/* blocs repliables : un signe qui dit qu'on peut ouvrir, et des separateurs reguliers */
.replie { margin: 0; border-bottom: 1px solid var(--ligne); }
.replie + .replie { border-top: 0; }
.replie summary { justify-content: space-between; gap: 12px; list-style: none; }
.replie summary::-webkit-details-marker { display: none; }
.replie summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--texte-doux); }
.replie[open] summary::after { content: "−"; }
.profil-suite > .replie:first-of-type, .profil-suite > ul.entrees + .replie { margin-top: 0; }
.profil-suite > h2 { margin-bottom: 0; }
@media (min-width: 768px) {
  /* profil PC : la colonne de droite se lit d'un bloc, en haut, sans grands trous */
  .profil-tete { grid-template-rows: auto auto auto 1fr; align-content: start; }
  .profil-tete .scene .dispo { margin-top: 8px; }
  .profil-tete .scene .bas { padding-top: var(--e2); }
  .profil-tete .appel { margin: var(--e3) 0 var(--e2); }
  .profil-tete .bio { align-self: start; margin: 0; }
}
@media (min-width: 1024px) {
  /* « D'autres creatrices » : une seule rangee de 4, pas 4 + 2 orphelines */
  .cartes.defile > li:nth-child(n+5) { display: none; }
}
/* badge Nouvelle du profil mobile : sorti du flux, il passait sous le degrade de .bas */
@media (max-width: 767px) { .scene .tag-nouvelle { position: absolute; top: 14px; left: 14px; z-index: 1; } }