/* ============================================================
   organisateur.html — la page publique d'un organisateur, en profil
   Demande du client du 2 octobre 2026 : « inspire-toi d'Instagram ».
   L'esprit d'un profil Instagram (la tête, les ronds « à la une », la
   grille), dans l'identité La Bringue : fond bleu, Bungee pour le nom,
   Martian Mono pour les chiffres, le jaune pour ce qui est actif (la
   story à voir, le focus), aucun dégradé.

   Contrastes mesurés (fond de page bleu #1C2B8F) :
   - papier #FBF3DF sur bleu : 10,60 (nom, bio, chiffres, noms des ronds) ;
   - jaune #F6C230 sur bleu : 7,08 (anneau d'une story, titre de la
     grille, focus, liens) ;
   - anneau d'une story déjà vue, et cercle des ronds : papier à 55 %
     sur le bleu, 3,9 — un trait, pas un texte (3:1 requis pour un
     élément graphique) ;
   - la date d'une vignette : papier sur bleu plein, 10,60 ;
   - le titre d'une vignette sans affiche : PALETTE[i].fg sur sa teinte,
     4,52 au pire (#9B51E0), mesuré dans data.js ;
   - les panneaux (menu de la story, ajout) : bleu sur papier, 10,60 ;
     bleu doux 10,29.
   Le rouge ne porte aucun texte.
   ============================================================ */

.profil-page{max-width:935px; margin-inline:auto}

/* ---------- L'image de fond ----------
   Demande du client (retours du test, octobre 2026) : une image de fond
   bien visible sur le profil. Un bandeau de couverture en haut, la tête
   posée sur son bas. Écart assumé à « aucun dégradé » : un dégradé vers
   le bleu de la page garde le nom et les chiffres lisibles, quelle que
   soit l'image (papier sur bleu plein : 10,60 ; là où passe le nom, le
   voile fait au moins 70 % de bleu, plus une ombre portée bleue).
   Sans image : rien, la page reste celle d'avant. */
.profil-fond{
  position:relative; height:clamp(170px,26vw,280px); margin-top:4px; overflow:hidden;
  border-radius:var(--lb-radius); background:var(--lb-bleu);
}
.profil-fond[hidden]{display:none}
.profil-fond img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.profil-fond::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,43,143,0) 30%, rgba(28,43,143,.72) 68%, var(--lb-bleu) 100%);
}
.avec-fond .profil-tete{position:relative; margin-top:-96px; padding-top:0}
.avec-fond .profil-tete h1, .avec-fond .profil-chiffres{text-shadow:0 1px 10px rgba(28,43,143,.85)}

/* ---------- La tête ----------
   Ordre de lecture (DOM) : photo, nom, chiffres, bio, boutons. Sur
   grand écran, la photo à gauche et le reste à droite ; sur téléphone,
   les chiffres à côté de la photo, comme Instagram. */
.profil-tete{
  display:grid; column-gap:clamp(28px,6vw,80px); row-gap:0; align-items:start;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "avatar nom"
    "avatar chiffres"
    "avatar bio"
    "avatar actions"
    "avatar statut"
    "avatar etat";
  padding:18px 0 26px;
}
.profil-avatar{grid-area:avatar; position:relative; width:max-content}

/* La photo. Un bouton quand elle ouvre quelque chose (une story à voir,
   ou le menu du propriétaire), sinon un simple bloc. L'anneau est le
   bord du bouton ; un liseré bleu le sépare de la photo. */
.profil-photo{
  position:relative; display:block; padding:6px; margin:0; border:0; border-radius:50%;
  background:none; color:inherit; font:inherit; line-height:0;
}
button.profil-photo{cursor:pointer; touch-action:manipulation; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
button.profil-photo img{-webkit-touch-callout:none; pointer-events:none}
.profil-rond{
  width:150px; height:150px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; border:3px solid var(--lb-papier); line-height:1;
}
.profil-rond img{width:100%; height:100%; object-fit:cover; display:block}
.profil-ini{font-family:var(--titre); font-size:52px; line-height:1}
.profil-photo.a-voir{box-shadow:inset 0 0 0 4px var(--lb-jaune)}
.profil-photo.vue{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--lb-papier) 55%, transparent)}
.profil-photo.a-voir .profil-rond, .profil-photo.vue .profil-rond{border-color:var(--lb-bleu)}
.profil-photo:focus-visible{outline:3px solid var(--lb-jaune); outline-offset:3px}
/* La pastille « + » du propriétaire, comme sur sa propre photo Instagram :
   un vrai bouton (ajouter une story tout de suite), posé sur la photo.
   La zone d'appui fait 44 px ; le disque visible, 34. */
.profil-plus{
  position:absolute; right:3px; bottom:3px; width:44px; height:44px; padding:5px; margin:0; border:0;
  background:none; cursor:pointer; display:grid; place-items:center; touch-action:manipulation;
}
.profil-plus span{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--lb-jaune); color:var(--lb-bleu); border:3px solid var(--lb-bleu);
  font-family:var(--titre); font-size:20px; line-height:1;
}
.profil-plus:focus-visible{outline:none}
.profil-plus:focus-visible span{box-shadow:0 0 0 3px var(--lb-jaune)}
/* L'envoi d'une story : l'anneau tourne, en pointillé, comme Instagram. */
.profil-photo.envoi::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:4px dashed var(--lb-jaune); animation:profil-tour 2.4s linear infinite;
}
@keyframes profil-tour{to{transform:rotate(360deg)}}

.profil-tete h1{grid-area:nom; font-size:clamp(28px,3.6vw,42px); line-height:1; margin:10px 0 0;
  overflow-wrap:anywhere}
.profil-chiffres{grid-area:chiffres; margin:14px 0 0; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:4px 10px; font-size:15px; color:var(--lb-papier)}
.profil-chiffres .chiffre b{font-family:var(--info); font-weight:700; font-size:14.5px; font-variant-numeric:tabular-nums}
.profil-bio{grid-area:bio; margin:12px 0 0; font-size:17px; line-height:1.45; max-width:52ch;
  color:var(--lb-papier); white-space:pre-line}
.profil-bio:empty{display:none}

.profil-actions{grid-area:actions; margin-top:18px; display:flex; flex-wrap:wrap; gap:10px}
.profil-abo .abo-bouton{min-width:180px}
.profil-abo[hidden]{display:none}
.profil-bouton{min-height:44px}
.profil-statut{grid-area:statut}
.profil-statut .abo-statut{color:var(--lb-papier); margin-top:10px}
.profil-etat{grid-area:etat; margin:10px 0 0; font-size:15px; font-weight:700; color:var(--lb-papier); max-width:52ch}
.profil-etat:empty{display:none}
.profil-adresse{font-weight:500; overflow-wrap:anywhere}
.profil-lien{
  display:inline-flex; align-items:center; min-height:40px; padding:0; background:none; border:0; cursor:pointer;
  font:inherit; font-weight:700; color:var(--lb-jaune); text-decoration:underline; text-underline-offset:3px;
}
.profil-lien:hover{color:var(--lb-papier)}
.profil-lien:focus-visible{outline:3px solid var(--lb-jaune); outline-offset:2px}

/* ---------- À la une : un rond par soirée passée ----------
   Les ronds viennent d'alaune.css (partagé avec la page d'une fête) ;
   ici, ce qui est propre au profil. */
.alaune{padding:0 0 22px}
/* « Ajouter » : un cercle vide et un « + », comme « Nouveau ». */
.alaune-plus .alaune-cercle{background:transparent; border:2px solid color-mix(in srgb, var(--lb-papier) 55%, transparent); box-shadow:none}
.alaune-plus:hover .alaune-cercle{border-color:var(--lb-papier); box-shadow:none}
.alaune-plus:focus-visible .alaune-cercle{border-color:var(--lb-jaune); box-shadow:0 0 0 3px var(--lb-jaune)}
.alaune-signe{font-family:var(--titre); font-size:34px; line-height:1; color:var(--lb-papier)}
/* Pour le propriétaire, une soirée sans vidéo ni photo : trait jaune en pointillé. */
.alaune-rond.a-completer .alaune-cercle{border:2px dashed var(--lb-jaune)}
.alaune-etat:empty{display:none}
.alaune-erreur{margin-top:12px; color:var(--lb-papier); font-size:15px}

/* ---------- La grille des prochaines fêtes ----------
   Le titre fait l'onglet unique d'Instagram : un trait sur toute la
   largeur, le mot au centre, marqué de jaune. */
.grille-fetes{padding:0 0 clamp(36px,6vw,72px)}
.grille-titre{
  position:relative; display:flex; justify-content:center; margin:0; padding:15px 0 13px;
  border-top:1px solid color-mix(in srgb, var(--lb-papier) 45%, transparent);
  font-family:var(--info); font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.2; color:var(--lb-jaune);
}
.grille-titre::after{
  content:""; position:absolute; top:-1px; left:50%; width:clamp(120px,22%,190px); height:3px;
  transform:translateX(-50%); background:var(--lb-jaune);
}
#grille{padding-top:2px}
.grille-vide{padding:44px 16px 10px; text-align:center; color:var(--lb-papier); font-size:16px}
.grille-vide .incident-texte{margin:0}
.grille-vide-action{text-align:center; padding:6px 0 20px}

.vignettes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
.vignette{
  position:relative; display:block; width:100%; aspect-ratio:4/5; overflow:hidden; padding:0; border:0;
  border-radius:0; cursor:pointer; text-decoration:none; font:inherit; text-align:left;
}
.vignette img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.vignette-titre{
  position:absolute; inset:0; display:grid; place-items:center; padding:12px 14px 34px; text-align:center;
  font-family:var(--titre); font-size:clamp(13px,2vw,21px); line-height:1.05; text-transform:uppercase;
  overflow-wrap:anywhere;
}
.vignette-date{
  position:absolute; bottom:8px; left:8px; padding:4px 7px; border-radius:4px;
  background:var(--lb-bleu); color:var(--lb-papier);
  font-family:var(--info); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; line-height:1.2;
}
.vignette:hover img{filter:brightness(.92)}
.vignette:focus-visible{outline:3px solid var(--lb-jaune); outline-offset:2px; border-radius:2px}

/* ---------- Les panneaux du propriétaire ----------
   Surfaces papier (.abo-panneau) : le menu de la story, l'ajout à une
   soirée, la confirmation. Sur téléphone, ils montent du bas, comme les
   feuilles d'Instagram. */
.profil-menu-corps, .ajout-vue{padding:22px 20px 22px}
.profil-menu-choix{display:grid; gap:12px; margin-top:20px}
.profil-menu-choix .btn{width:100%; min-height:48px}
.profil-menu-choix .btn[hidden]{display:none}
.profil-confirmer form{padding:22px 20px 20px}

.ajout{width:min(520px, calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow:auto}
.ajout-vue[hidden]{display:none}
.ajout-haut{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.ajout-haut .abo-titre{flex:1}
.ajout-fermer{
  flex:none; width:44px; height:44px; margin:-6px -6px 0 auto; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:var(--lb-bleu); font-size:28px; line-height:1; display:grid; place-items:center;
}
.ajout-fermer:hover{background:color-mix(in srgb, var(--lb-bleu) 10%, transparent)}
.ajout-retour{
  min-height:44px; padding:0; margin:-8px 0 0; border:0; background:none; cursor:pointer;
  font:inherit; font-weight:700; color:var(--lb-bleu); text-decoration:underline; text-underline-offset:3px;
}
.ajout-retour[hidden]{visibility:hidden; display:block}
.ajout :focus-visible{outline:3px solid var(--lb-bleu); outline-offset:2px}
.ajout .abo-titre:focus{outline:none}
.ajout-soirees{list-style:none; margin:16px -8px 0; padding:0}
.ajout-soiree{
  display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:8px; border:0; border-radius:var(--lb-radius);
  background:none; cursor:pointer; font:inherit; color:var(--lb-bleu); text-align:left;
}
.ajout-soiree:hover{background:color-mix(in srgb, var(--lb-bleu) 8%, transparent)}
.ajout-vign{position:relative; flex:none; width:52px; height:52px; border-radius:50%; overflow:hidden; border:2px solid var(--lb-bleu)}
.ajout-vign img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ajout-texte{display:grid; gap:3px; min-width:0}
.ajout-texte b{font-weight:800; overflow-wrap:anywhere}
.ajout-texte small{font-family:var(--info); font-size:12px; letter-spacing:.04em; color:var(--lb-bleu-doux)}
.ajout-rien{padding:14px 8px; color:var(--lb-bleu-doux)}
.ajout-decompte{margin:8px 0 16px; font-family:var(--info); font-weight:700; font-size:14px; color:var(--lb-bleu)}
.ajout-champs[hidden]{display:none}
.ajout input[type="file"]{padding:10px; min-height:48px; width:100%}
.ajout-apercu{margin:0 0 14px}
.ajout-apercu:empty{display:none}
.ajout-apercu video, .ajout-apercu img{display:block; width:100%; max-height:220px; object-fit:contain; background:var(--lb-bleu); border-radius:var(--lb-radius)}
.ajout-apercu p{font-size:13.5px; color:var(--lb-bleu-doux); margin-top:6px}
.ajout-champs .btn{width:100%; min-height:48px}
.ajout-complet{margin:0; font-weight:700}
.ajout-envoi{margin-top:12px; font-weight:700; font-size:15px}
.ajout-envoi:empty{display:none}
.ajout-envoi .profil-lien{color:var(--lb-bleu)}
.ajout-gerer{margin-top:14px; font-size:14.5px}
.ajout-gerer a{display:inline-flex; align-items:center; min-height:40px; color:var(--lb-bleu); font-weight:700; text-underline-offset:3px}

/* ---------- Téléphone : la tête d'un profil Instagram ----------
   Photo et chiffres sur une ligne, le nom et la bio dessous, les
   boutons côte à côte, les ronds, puis trois colonnes serrées. */
@media (max-width:640px){
  .profil-tete{
    grid-template-columns:auto 1fr; column-gap:16px;
    grid-template-areas:
      "avatar chiffres"
      "nom nom"
      "bio bio"
      "actions actions"
      "statut statut"
      "etat etat";
    align-items:center; padding:8px 0 18px;
  }
  .profil-fond{height:150px; margin:0 -20px; border-radius:0}
  .avec-fond .profil-tete{margin-top:-44px}
  .profil-photo{padding:4px}
  .profil-rond{width:84px; height:84px; border-width:2px}
  .profil-photo.a-voir{box-shadow:inset 0 0 0 3px var(--lb-jaune)}
  .profil-ini{font-size:30px}
  .profil-plus{right:-6px; bottom:-6px}
  .profil-plus span{width:26px; height:26px; font-size:15px; border-width:2px}
  .profil-photo.envoi::after{border-width:3px}
  .profil-chiffres{margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; text-align:center; font-size:13px; line-height:1.2}
  .profil-chiffres .point{display:none}
  .profil-chiffres .chiffre b{display:block; font-size:16px; margin-bottom:3px}
  .profil-tete h1{margin-top:12px; font-size:22px}
  .profil-bio{margin-top:6px; font-size:15px}
  .profil-actions{margin-top:14px; gap:8px}
  .profil-actions > *{flex:1 1 0}
  .profil-abo .abo-bouton{width:100%; min-width:0}
  /* Les deux boutons du propriétaire tiennent chacun sur une ligne,
     comme « Modifier le profil » et « Partager le profil » d'Instagram. */
  .profil-bouton{padding:10px 8px; font-size:13px; white-space:nowrap}

  .alaune{margin-inline:-20px; padding-bottom:16px}
  .alaune-rang{padding:8px 20px 4px}
  .alaune-signe{font-size:28px}

  .grille-titre{font-size:12px; letter-spacing:.1em}
  .vignettes{gap:2px; margin-inline:-20px}
  .vignette-date{left:4px; bottom:4px; font-size:12px; padding:3px 5px; letter-spacing:.02em}
  .vignette-titre{font-size:12px; padding:6px 6px 26px}

  /* Les panneaux montent du bas de l'écran. */
  .profil-menu, .ajout{
    width:100%; max-width:none; margin:auto 0 0; max-height:92dvh;
    border-width:3px 0 0; border-radius:12px 12px 0 0;
  }
  .page-bleue .profil-menu, .page-bleue .ajout{box-shadow:none}
}

@media (prefers-reduced-motion:no-preference){
  .profil-photo{transition:box-shadow .15s ease, transform .15s ease}
}
@media (prefers-reduced-motion:reduce){
  .profil-photo.envoi::after{animation:none}
}

/* ---------- Dans la visionneuse : « Vu par », « Mettre à la une » ----------
   Sur la feuille papier de visionneuse.css : bleu sur papier, 10,60. */
.vues-etat{margin:6px 0 10px; font-size:15px; color:var(--lb-bleu-doux)}
.vues-resume{margin:4px 0 8px; font-weight:800; font-size:15px}
.vues-liste{list-style:none; margin:4px 0 0; padding:0}
.vues-ligne{display:flex; align-items:center; gap:12px; min-height:56px; border-top:1px solid color-mix(in srgb, var(--lb-bleu) 12%, transparent)}
.vues-avatar{flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  font-family:var(--info); font-weight:700; font-size:13px}
.vues-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.vues-nom{flex:1; min-width:0; font-weight:700; overflow-wrap:anywhere}
.vues-coeur{flex:none; font-size:20px; line-height:1; color:var(--lb-bleu)}
.vues-anonymes{margin:12px 0 4px; font-size:15px}
.une-choix{display:grid; gap:2px; padding-block:10px}
.une-choix:disabled{opacity:.55; cursor:not-allowed}
.une-titre{font-weight:800; overflow-wrap:anywhere}
.une-detail{font-family:var(--info); font-weight:400; font-size:12px; letter-spacing:.03em; color:var(--lb-bleu-doux)}

/* ---------- Modifier un rond à la une ---------- */
.gerer-liste{list-style:none; margin:4px 0 16px; padding:0}
.gerer-ligne{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid color-mix(in srgb, var(--lb-bleu) 12%, transparent)}
.gerer-vign{position:relative; flex:none; width:52px; height:52px; border-radius:50%; overflow:hidden; background:var(--lb-bleu)}
.gerer-vign img, .gerer-vign video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gerer-texte{flex:1; min-width:0; display:grid; gap:2px}
.gerer-texte b{font-weight:800; overflow-wrap:anywhere}
.gerer-couv{display:inline-flex; align-items:center; gap:8px; min-height:36px; font-size:14.5px; cursor:pointer}
.gerer-couv input{width:20px; height:20px; accent-color:var(--lb-bleu); margin:0}
.gerer-outils{flex:none; display:flex; gap:4px}
.gerer-btn{
  min-width:44px; min-height:44px; padding:0 10px; border:2px solid var(--lb-bleu); border-radius:var(--lb-radius);
  background:transparent; color:var(--lb-bleu); font:inherit; font-weight:800; font-size:16px; cursor:pointer;
}
.gerer-btn:disabled{opacity:.35; cursor:default}
.gerer-retirer{font-size:14px}
.gerer-ajouter{width:100%; min-height:48px}
.gerer-ajouter[hidden]{display:none}
@media (max-width:640px){
  .gerer-ligne{flex-wrap:wrap}
  .gerer-outils{width:100%; padding-left:64px}
  .gerer{width:100%; max-width:none; margin:auto 0 0; max-height:92dvh; border-width:3px 0 0; border-radius:12px 12px 0 0}
  .page-bleue .gerer{box-shadow:none}
}