/* social-maison, repris de wa-channel. DA Millenor, déclinaison document (fond blanc).
 *
 * Charte : fond #ffffff et sections #f7f6f3, encre #0b0b0c, secondaire #5e5c58,
 * mentions #6b6760, filets #e5e2dc. Orange #f04e00 en aplat et gros titre,
 * #c23a00 en petit texte (5,4:1 sur blanc). Texte sur aplat orange : encre,
 * jamais blanc. Titres en Archivo Black capitales, corps en Manrope.
 *
 * Goûts de Séb (16/09/2026) : pas de cartes SaaS molles, pas de dégradés, pas
 * de verre dépoli, pas d'ombres sur blanc, pas d'icônes génériques. Le cerne
 * suffit. La personnalité vient des index fantômes, du filet orange et de la
 * typographie, pas d'effets.
 */

:root {
  --blanc: #ffffff;
  --section: #f7f6f3;
  --encre: #0b0b0c;
  --secondaire: #5e5c58;
  --mention: #6b6760;
  --filet: #e5e2dc;
  --orange: #f04e00;
  --orange-texte: #c23a00;
  --orange-voile: rgba(240, 78, 0, 0.4);
  --orange-fond: rgba(240, 78, 0, 0.07);
  --noir: #0c0b0a;
  --noir-texte: #f4f2ee;
  --noir-doux: #a8a39b;
  --vert: #1d7a4d;
  --rouge: #b3261e;
  --r: 16px;
  --flanc-l: 244px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font: 400 16px/1.6 Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font: 400 30px/1.1 'Archivo Black', system-ui, sans-serif; margin: 2px 0 0; letter-spacing: -0.01em; }
h2 { font: 400 21px/1.15 'Archivo Black', system-ui, sans-serif; margin: 0; }
h3 { font: 800 16px/1.3 Manrope, sans-serif; margin: 0; letter-spacing: -0.01em; }

.logo { font: 400 17px/1 'Archivo Black', system-ui, sans-serif; margin: 0; }
.logo span { color: var(--orange); }

.label {
  font: 700 11px/1.4 Manrope, sans-serif;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange-texte); margin: 0 0 8px;
}
.doux { color: var(--mention); font-weight: 400; }
.erreur { color: var(--rouge); font-size: 14px; margin: 12px 0 0; }
.aide { color: var(--mention); font-size: 13.5px; line-height: 1.55; }

/* ─── Formulaires ─── */

label { display: block; font-size: 13px; font-weight: 700; color: var(--secondaire); margin: 16px 0 6px; }

input, select, textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--filet); border-radius: 10px;
  background: var(--blanc); color: var(--encre); font: inherit;
}
textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px;
}
input::placeholder { color: #9b968e; }

button { border: 0; border-radius: 10px; font: inherit; cursor: pointer; background: none; color: inherit; }

.plein, .fantome, .petit {
  padding: 10px 16px; font-weight: 800; font-size: 14.5px;
  border: 1px solid transparent; white-space: nowrap;
}
.plein { background: var(--orange); color: var(--encre); }      /* encre sur orange, jamais blanc */
.plein:hover { background: #ff5a08; }
.fantome { border-color: var(--filet); color: var(--encre); }
.fantome:hover { border-color: var(--encre); }
.petit { padding: 7px 12px; font-size: 13px; font-weight: 700; border-color: var(--filet); }
.petit:hover { border-color: var(--orange); color: var(--orange-texte); }
.petit.danger:hover { border-color: var(--rouge); color: var(--rouge); }
.petit.plein { border-color: var(--orange); color: var(--encre); }
/* Un bouton éteint doit se voir éteint. Sans ça il garde son orange plein,
   on clique, rien ne se passe, et on croit l'outil cassé. */
button:disabled, button:disabled:hover {
  background: var(--section); color: var(--mention);
  border-color: var(--filet); cursor: not-allowed;
}

.lien { text-decoration: underline; color: var(--secondaire); font-size: 14px; padding: 0; }
.lien:hover { color: var(--encre); }

/* ─── Écrans d'entrée ─── */
/* Deux colonnes : la marque à gauche sur le noir, le formulaire à droite sur
   le blanc. C'est la seule page où le noir de la charte reste entier. */

.entree { min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }

.entree-marque {
  background: var(--noir); color: var(--noir-texte);
  padding: 48px; display: flex; flex-direction: column; justify-content: center;
}
.entree-marque .logo { color: var(--noir-texte); font-size: 19px; }
.entree-punch {
  font: 400 clamp(30px, 4.4vw, 46px)/1.08 'Archivo Black', system-ui, sans-serif;
  margin: 28px 0 0; letter-spacing: -0.02em;
}
/* Le filet orange sous le titre, un par écran. */
.entree-punch::after {
  content: ''; display: block; width: 84px; height: 3px;
  background: var(--orange); margin-top: 22px;
}
.entree-note { color: var(--noir-doux); margin: 20px 0 0; max-width: 34ch; font-size: 15px; }

.entree-carte { align-self: center; justify-self: start; width: min(100%, 380px); padding: 40px; margin-left: 6vw; }
.entree-carte button { width: 100%; margin-top: 22px; }

/* ─── Charpente ─── */

.cadre { display: grid; grid-template-columns: var(--flanc-l) 1fr; min-height: 100dvh; }

.flanc {
  background: var(--noir); color: var(--noir-texte);
  padding: 22px 14px 16px; display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.flanc-tete { padding: 0 8px; }
.flanc-tete .logo { color: var(--noir-texte); }
.flanc-tag {
  margin: 5px 0 0; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--noir-doux);
}

.flanc-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.flanc-groupe {
  margin: 18px 0 6px; padding: 0 8px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #6f6a62;
}
.flanc-groupe:first-child { margin-top: 0; }

.lien-nav {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 9px; text-align: left;
  color: var(--noir-doux); font-size: 14.5px; font-weight: 700;
}
.lien-nav:hover { background: rgba(255, 255, 255, 0.06); color: var(--noir-texte); }
.lien-nav.actif { background: var(--orange); color: var(--encre); }
.lien-nav.actif i { opacity: 1; }
.lien-nav i { width: 17px; height: 17px; flex: none; opacity: 0.75; }
.lien-nav.discret { font-size: 13.5px; font-weight: 500; }

.compteur {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.1);
}
/* Une pastille vide reste une pastille : sans ça, un compteur à zéro dessine
   un petit trait gris à côté du libellé. */
.compteur:empty { display: none; }
.lien-nav.actif .compteur { background: rgba(0, 0, 0, 0.16); }

.flanc-pied { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }

.scene { min-width: 0; padding: 0 0 72px; }

.barre-haute {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 26px 30px 20px; border-bottom: 1px solid var(--filet);
  position: sticky; top: 0; background: var(--blanc); z-index: 6;
}
.barre-titre { flex: 1; min-width: 0; }
.barre-titre .label { margin-bottom: 4px; }
.barre-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.burger { display: none; padding: 8px; border: 1px solid var(--filet); border-radius: 9px; }

.vue { padding: 26px 30px 0; max-width: 1080px; }

/* ─── Cartes ─── */

.carte {
  position: relative; background: var(--blanc);
  border: 1px solid var(--filet); border-radius: var(--r); padding: 22px;
}
.carte + .carte { margin-top: 14px; }
/* La carte qui compte : cerne orange plein et halo de 3px, jamais d'ombre. */
.carte.vedette { border-color: var(--orange-voile); box-shadow: 0 0 0 3px rgba(240, 78, 0, 0.09); }

/* L'index fantôme dans l'angle, signature de la charte. */
.index {
  position: absolute; top: 12px; right: 18px;
  font: 400 34px/1 'Archivo Black', system-ui, sans-serif;
  color: rgba(240, 78, 0, 0.15); pointer-events: none; user-select: none;
}

/* ─── Les destinations d'un event ─── */
/* Une ligne par destination, sa jauge de remplissage, et la mention de celle
   qui reçoit les inscrits en ce moment. La jauge est un filet qui se remplit :
   sur blanc, une barre suffit, pas besoin d'un anneau ni d'un camembert. */

ol.destinations { list-style: none; margin: 14px 0 0; padding: 0; }

.destination {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--filet);
}
.destination:first-child { border-top: 0; }
.destination-nom { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.destination-jauge { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.jauge {
  display: inline-block; width: 110px; height: 6px; border-radius: 3px;
  background: var(--section); overflow: hidden;
}
.jauge-remplie { display: block; height: 100%; background: var(--orange); }
.jauge-remplie.chaude { background: var(--rouge); }

@media (max-width: 620px) {
  .destination { flex-wrap: wrap; }
  .destination-jauge { flex-basis: 100%; }
}

/* ─── Les étapes d'un event ─── */
/* Une colonne de pastilles reliées par un filet : on voit d'un coup d'oeil où
   on en est. L'étape en cours est la seule en orange, et la seule à porter un
   bouton allumé. Pas d'ombre : le filet et la couleur suffisent sur blanc. */

ol.etapes { list-style: none; margin: 14px 0 0; padding: 0; }

.etape { position: relative; display: flex; gap: 14px; padding: 0 0 20px; }
.etape:last-child { padding-bottom: 0; }

/* Le filet vertical qui relie une étape à la suivante. */
.etape::before {
  content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px;
  width: 1px; background: var(--filet);
}
.etape:last-child::before { display: none; }
.etape.faite::before { background: var(--orange-voile); }

.etape-num {
  flex: 0 0 27px; height: 27px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px/1 'Manrope', system-ui, sans-serif;
  border: 1px solid var(--filet); background: var(--blanc);
  color: var(--mention); position: relative; z-index: 1;
}
.etape-num svg { width: 14px; height: 14px; }

.etape.faite .etape-num { background: var(--orange); border-color: var(--orange); color: var(--encre); }
.etape.courante .etape-num { border-color: var(--orange); color: var(--orange-texte); box-shadow: 0 0 0 3px rgba(240, 78, 0, 0.1); }

.etape-corps { flex: 1; min-width: 0; padding-top: 3px; }
.etape-corps b { display: block; font-size: 15.5px; }
.etape-corps .aide { margin: 3px 0 0; }
.etape-corps button { margin-top: 10px; }

/* Ce qui reste à faire après l'étape en cours s'efface, sans disparaître. */
.etape.apres .etape-corps b, .etape.apres .etape-num { color: var(--mention); }

/* Le bouton qui referme un encadré d'aide : discret, jamais au-dessus du texte. */
.fermer {
  position: absolute; top: 10px; right: 12px;
  width: 26px; height: 26px; border-radius: 8px;
  font-size: 19px; line-height: 1; color: var(--mention);
}
.fermer:hover { background: rgba(0, 0, 0, 0.05); color: var(--encre); }

/* ─── Statistiques ─── */

.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { position: relative; border: 1px solid var(--filet); border-radius: var(--r); padding: 18px 18px 16px; }
.stat-filet { display: block; width: 26px; height: 3px; background: var(--encre); margin-bottom: 14px; }
.stat[data-ton="orange"] .stat-filet { background: var(--orange); }
.stat[data-ton="doux"] .stat-filet { background: var(--filet); }
.stat-cle { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--secondaire); }
.stat b { display: block; margin-top: 6px; font: 400 32px/1 'Archivo Black', system-ui, sans-serif; }

.deux-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }

/* ─── Démarrage ─── */

.demarrage { position: relative; border: 1px solid var(--orange-voile); border-radius: var(--r); padding: 22px; margin-bottom: 18px; background: var(--blanc); }
.demarrage-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.demarrage-compte { font-size: 12.5px; font-weight: 700; color: var(--orange-texte); }
.etapes { margin: 16px 0 0; display: flex; flex-direction: column; }

.etape {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start;
  padding: 13px 0; border-top: 1px solid var(--filet);
}
.etape:first-child { border-top: 0; }
.etape-puce {
  width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--filet);
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--mention);
  margin-top: 2px;
}
.etape.courante .etape-puce { border-color: var(--orange); color: var(--orange-texte); }
.etape.faite .etape-puce { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.etape-titre { font-weight: 800; font-size: 15px; }
.etape.faite .etape-titre { color: var(--mention); text-decoration: line-through; text-decoration-thickness: 1px; }
.etape p { margin: 3px 0 0; font-size: 13.5px; color: var(--mention); line-height: 1.5; }
.etape.a-venir { opacity: 0.55; }

/* ─── Bandeaux ─── */

.bandeau {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 30px 0; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--orange-voile); background: var(--orange-fond);
}
.bandeau + .bandeau { margin-top: 8px; }
.bandeau:first-child { margin-top: 18px; }
.bandeau[data-ton="arret"] { border-color: var(--encre); background: var(--section); }
.bandeau b { display: block; font-size: 14.5px; }
.bandeau span { font-size: 13.5px; color: var(--secondaire); }
/* L'icône arrive tantôt en <i data-ic>, tantôt en <svg> posé par ic(). Sans
   cette seconde règle, le svg n'avait aucune taille et s'étalait sur toute la
   largeur du bandeau : un triangle d'alerte de 800px. */
.bandeau i, .bandeau > svg { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--orange-texte); }
.bandeau[data-ton="arret"] i, .bandeau[data-ton="arret"] > svg { color: var(--encre); }
.bandeau button { margin-left: auto; align-self: center; }

/* ─── Listes ─── */

.ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--filet);
  border-radius: var(--r); background: var(--blanc);
}
.ligne + .ligne { margin-top: 10px; }
.ligne:hover { border-color: #d3cfc6; }
.ligne-titre { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ligne-meta { color: var(--mention); font-size: 13.5px; margin: 5px 0 0; }
.ligne-actions { display: flex; gap: 7px; flex-wrap: wrap; }

.puce {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; border: 1px solid var(--filet); color: var(--secondaire);
  white-space: nowrap;
}
.puce.ok { color: var(--vert); border-color: rgba(29, 122, 77, 0.35); }
.puce.tiede { color: var(--orange-texte); border-color: var(--orange-voile); }
.puce.froid { color: var(--mention); }
.puce.chaud { color: var(--rouge); border-color: rgba(179, 38, 30, 0.35); }
.puce.encre { color: var(--blanc); background: var(--encre); border-color: var(--encre); }

/* ─── Filtres ─── */

.filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtres select, .filtres input { width: auto; min-width: 210px; padding: 8px 11px; font-size: 14px; }

.segments { display: inline-flex; border: 1px solid var(--filet); border-radius: 10px; overflow: hidden; }
.segments button { padding: 8px 13px; font-size: 13.5px; font-weight: 700; color: var(--secondaire); border-radius: 0; }
.segments button + button { border-left: 1px solid var(--filet); }
.segments button:hover { background: var(--section); }
.segments button.actif { background: var(--encre); color: var(--blanc); }

/* ─── La séquence : une frise, et des bulles WhatsApp ─── */

.frise { position: relative; padding-left: 132px; }
/* Le fil vertical qui relie les moments : on voit la séquence, pas une liste. */
.frise::before {
  content: ''; position: absolute; left: 101px; top: 10px; bottom: 10px;
  width: 1px; background: #ddd8d0;
}

.moment { position: relative; padding: 9px 0; }
.moment-quand {
  position: absolute; left: -132px; top: 13px; width: 90px; text-align: right;
  font: 400 15px/1.1 'Archivo Black', system-ui, sans-serif; color: var(--orange-texte);
}
.moment-quand small { display: block; font: 400 11.5px/1.3 Manrope, sans-serif; color: var(--mention); margin-top: 3px; }
.moment::before {
  content: ''; position: absolute; left: -32px; top: 18px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blanc); border: 2px solid var(--orange);
}
.moment.brouillon::before { border-color: var(--filet); }
.moment.envoye::before { background: var(--encre); border-color: var(--encre); }
.moment.echoue::before { border-color: var(--rouge); }
.moment.live::before { width: 15px; height: 15px; left: -35px; background: var(--orange); }
/* Le live est le pivot de la séquence : tout est compté à partir de lui. */
.moment.live .moment-quand { color: var(--orange); font-size: 17px; }
.moment.live .bulle { border-color: var(--orange-voile); }



/* La bulle : ce que les inscrits verront, à l'écran, avant d'appuyer. */
.bulle {
  position: relative;
  background: var(--section); border: 1px solid var(--filet);
  border-radius: 4px 14px 14px 14px; padding: 13px 15px;
}
/* Le retour à la ligne se respecte sur le texte seul : sur le conteneur,
   `pre-wrap` rendrait aussi visible l'indentation du HTML qui l'entoure. */
.bulle-texte { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.moment.brouillon .bulle { background: var(--blanc); border-style: dashed; color: var(--secondaire); }
.moment.envoye .bulle { background: var(--orange-fond); border-color: var(--orange-voile); }
.bulle-media { display: block; max-height: 128px; border-radius: 8px; margin-bottom: 9px; }
.bulle-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Les outils d'un message vivent dans son pied, pas dans une colonne à côté :
   une colonne de quatre boutons est plus haute que la bulle qu'elle sert, et
   creuse un trou entre chaque moment de la frise. */
.bulle-outils { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.bulle-outils button {
  padding: 4px 9px; font-size: 12.5px; font-weight: 700; color: var(--mention); border-radius: 7px;
}
.bulle-outils button:hover { background: var(--blanc); color: var(--orange-texte); }
.bulle-outils button.sup:hover { color: var(--rouge); }


/* ─── Journal ─── */

.j-ligne { display: grid; grid-template-columns: 62px 88px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--filet); font-size: 14px; align-items: start; }
.j-ligne:last-child { border-bottom: 0; }
.j-heure { color: var(--mention); font-variant-numeric: tabular-nums; font-size: 13px; }
.j-detail { color: var(--secondaire); word-break: break-word; }

/* ─── Analyses ─── */

.barres { display: flex; align-items: flex-end; gap: 7px; height: 92px; margin-top: 8px; }
.barres div { flex: 1; background: var(--orange); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.barres div[data-vide="1"] { background: var(--filet); }
.barres span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--mention); }

.tab { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tab th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mention); padding: 0 10px 9px 0; }
.tab td { padding: 11px 10px 11px 0; border-top: 1px solid var(--filet); vertical-align: top; }
.tab td:last-child, .tab th:last-child { padding-right: 0; text-align: right; }

/* ─── État vide ─── */

.vide { text-align: center; padding: 52px 24px; border: 1px dashed var(--filet); border-radius: var(--r); }
.vide h3 { font: 400 20px/1.2 'Archivo Black', system-ui, sans-serif; }
.vide p { color: var(--mention); margin: 9px auto 18px; max-width: 46ch; font-size: 14.5px; }

/* ─── Liens publics ─── */

.lien-public { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--filet); }
.lien-public:first-of-type { border-top: 0; }
code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--orange-texte); word-break: break-all; }

/* ─── Aide ─── */

.flux { display: flex; align-items: stretch; gap: 9px; flex-wrap: wrap; margin: 6px 0 14px; }
.flux-boite { flex: 1 1 128px; min-width: 128px; border: 1px solid var(--filet); border-radius: 12px; padding: 13px; }
.flux-boite b { display: block; font: 400 15px/1.2 'Archivo Black', system-ui, sans-serif; }
.flux-boite span { display: block; margin-top: 4px; font-size: 12px; color: var(--mention); line-height: 1.4; }
.flux-fleche { align-self: center; color: var(--orange); font-weight: 800; }
.flux-fleche::before { content: '→'; }

.gardes { counter-reset: g; list-style: none; padding: 0; margin: 8px 0 0; }
.gardes li { counter-increment: g; position: relative; padding-left: 32px; margin-bottom: 9px; }
.gardes li::before {
  content: counter(g); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--filet);
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--orange-texte);
}
#vue-aide ul { padding-left: 20px; }
#vue-aide li { margin-bottom: 6px; }
#vue-aide .carte + .carte { margin-top: 14px; }

/* ─── Modale et toast ─── */

dialog {
  border: 1px solid var(--filet); border-radius: 18px; padding: 26px;
  width: min(93vw, 580px); max-height: 88vh; color: var(--encre); background: var(--blanc);
}
dialog::backdrop { background: rgba(12, 11, 10, 0.5); }
dialog h2 { margin-bottom: 14px; }
.modale-pied { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.champs-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choix-modele { display: grid; gap: 8px; margin-top: 8px; }
.choix-modele button { text-align: left; padding: 13px 15px; border: 1px solid var(--filet); border-radius: 12px; }
.choix-modele button:hover { border-color: var(--orange); }
.choix-modele b { display: block; font-size: 15px; }
.choix-modele span { font-size: 13px; color: var(--mention); }

/* Le formulaire de création respire : c'est une page, pas une fenêtre. */
#vue-nouvel-event .carte { padding: 24px; }
#vue-nouvel-event label:first-of-type { margin-top: 0; }
#vue-nouvel-event .champs-deux > div > label { margin-top: 16px; }

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--encre); color: var(--blanc); font-weight: 700; font-size: 14px;
  padding: 11px 19px; border-radius: 99px; z-index: 60; margin: 0; max-width: calc(100vw - 32px);
}

#voile { position: fixed; inset: 0; background: rgba(12, 11, 10, 0.45); z-index: 14; }

/* ─── Téléphone ─── */
/* Mobile d'abord dans la vérification : le flanc sort du flux et se pousse. */

@media (max-width: 900px) {
  .deux-tiers { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .cadre { grid-template-columns: 1fr; }
  .flanc {
    position: fixed; inset: 0 auto 0 0; width: 258px; z-index: 20;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .flanc.ouvert { transform: none; }
  .burger { display: grid; place-items: center; }
  .barre-haute { padding: 16px; align-items: center; }
  .vue { padding: 18px 16px 0; }
  .bandeau { margin-inline: 16px; }
  h1 { font-size: 23px; }
  .grille-stats { grid-template-columns: repeat(2, 1fr); }
  .entree { grid-template-columns: 1fr; }
  .entree-marque { padding: 30px 22px; }
  .entree-carte { width: 100%; padding: 26px 22px 40px; }
  .champs-deux { grid-template-columns: 1fr; }

  /* La frise passe en colonne : le moment au-dessus de sa bulle. */
  .frise { padding-left: 20px; }
  .frise::before { left: 4px; }
  .moment-quand { position: static; width: auto; text-align: left; margin-bottom: 7px; display: flex; align-items: baseline; gap: 9px; }
  .moment-quand small { margin: 0; }
  .moment::before { left: -20px; top: 16px; }
  .moment.live::before { left: -22px; }
  .bulle-outils { margin-left: 0; width: 100%; }

  .j-ligne { grid-template-columns: 58px 1fr; row-gap: 4px; }
  .j-ligne .puce { justify-self: start; }
  .j-detail { grid-column: 1 / -1; }
  .tab th:nth-child(n+4), .tab td:nth-child(n+4) { display: none; }
}