/* Polices du club (fichiers dans fonts/ — voir README : licences) */
@font-face { font-family: 'Grenat'; font-weight: 900; src: url('fonts/Grenat0_2-Black.woff2') format('woff2'); }
@font-face { font-family: 'AT Name Sans'; font-weight: 1 1000; src: url('fonts/AT-NameSansSplitVF-Upright.woff2') format('woff2'); }
@font-face { font-family: 'AT Name Sans'; font-style: italic; font-weight: 1 1000; src: url('fonts/AT-NameSansSplitVF-Italic.woff2') format('woff2'); }

/* =====================================================================
   1. L'INTERFACE (formulaire + zone d'aperçu)
   Principe : fond papier, texte noir. Le NOIR marque ce qui est choisi (une rangée choisie
   ressemble à l'image qu'elle va produire) ; l'ORANGE est réservé à l'action et à l'heure.
   Angles droits, comme les pastilles des visuels. Zones tactiles d'au moins 44 px.
   ===================================================================== */
:root { --orange: #FF7A00; --noir: #0D0D0D; --blanc: #F5F2EC; --gris: #BDB8AE; --s: .3;
  --papier: #F5F2EC; --encre-douce: #6B675F; --filet: #D9D4C8; --fond-apercu: #E4DFD3; --largeur-formulaire: 420px; }
* { box-sizing: border-box; }
html { scroll-padding-bottom: 170px; }   /* quand le navigateur fait défiler vers un champ, il le garde au-dessus de la barre d'action fixe */
body { margin: 0; font-family: 'AT Name Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 500; font-size: 16px;
  line-height: 1.4; background: var(--papier); color: var(--noir); -webkit-text-size-adjust: 100%; }

.appli { display: grid; grid-template-columns: var(--largeur-formulaire) minmax(0, 1fr); min-height: 100vh; }   /* minmax(0, …) : une colonne ne s'élargit jamais à cause de son contenu */
.formulaire { min-width: 0; background: var(--papier); padding: 22px 22px 170px; border-right: 1px solid var(--filet); }

/* En-tête : la marque, en Grenat (autorisé pour "HBC Moudon") */
.entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.marque { font-family: 'Grenat', 'AT Name Sans', sans-serif; font-weight: 900; font-size: 28px; line-height: 1; margin: 0; }
.entete span { color: var(--encre-douce); font-size: 14px; }
.aide { color: var(--encre-douce); font-size: 14px; margin: 0 0 12px; }
.petit { font-size: 14px; margin: 10px 0 0; }

/* Choix à deux (Annonce / Résultat, Calendrier / Saisie manuelle) */
.choix { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 2px solid var(--noir); }
.choix label { margin: 0; }
.choix input { position: absolute; opacity: 0; }
.choix span { display: block; margin: 0; text-align: center; padding: 14px 8px; min-height: 52px; font-weight: 700; cursor: pointer; }
.choix input:checked + span { background: var(--orange); color: var(--noir); }
.choix input:focus-visible + span { outline: 3px solid var(--noir); outline-offset: -7px; }

/* Période : le titre de la liste */
.periode h2 { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; margin: 26px 0 2px; }
details.dates summary { display: block; padding: 10px 0; min-height: 44px; color: var(--noir); font-weight: 600; text-decoration: underline; cursor: pointer; }
details.dates .corps { padding: 4px 0 12px; }
details > summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }

.entete-liste { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 6px; font-weight: 700; }
button.lien { border: 0; background: none; padding: 10px 6px; min-height: 44px; font-weight: 600; text-decoration: underline; }

/* Équipes : des puces que l'on coche (noir = incluse) */
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.puce input { position: absolute; opacity: 0; }
.puce label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; min-height: 44px; border: 2px solid var(--gris); color: var(--encre-douce);
  font-weight: 600; font-size: 15px; cursor: pointer; }
.puce label::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--gris); flex: none; }
.puce input:checked + label { border-color: var(--noir); color: var(--noir); font-weight: 700; }
.puce input:checked + label::before { background: var(--noir); border-color: var(--noir); box-shadow: inset 0 0 0 2px var(--papier); }
.puce input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Matchs : une rangée par match ; choisie = noire, l'heure passe en orange */
.matchs { border-top: 2px solid var(--noir); margin-top: 6px; }
.match input { position: absolute; opacity: 0; }
.match label { display: grid; grid-template-columns: 92px 1fr 28px; gap: 14px; align-items: center; margin: 0; min-height: 76px; padding: 14px 14px 14px 12px;
  border-bottom: 1px solid var(--filet); cursor: pointer; }
.match .quand { font-family: 'Grenat', 'AT Name Sans', sans-serif; font-weight: 900; font-size: 26px; line-height: 1; color: var(--encre-douce); }
.match .quand.score { font-size: 22px; }
.match .quoi > span { display: block; }
.match .quoi > .etiquette { width: fit-content; background: var(--orange); color: var(--noir); font-weight: 800; font-size: 13px; line-height: 1.2; padding: 2px 8px 3px; margin-bottom: 5px; }
.match .adv { font-weight: 800; font-size: 18px; line-height: 1.2; }
.match .detail { color: var(--encre-douce); font-size: 14px; margin-top: 2px; }
.match .coche { width: 26px; height: 26px; border: 2px solid var(--noir); }
.match input:checked + label { background: var(--noir); color: var(--papier); border-bottom-color: var(--noir); }
.match input:checked + label .quand { color: var(--orange); }
.match input:checked + label .detail { color: var(--gris); }
.match input:checked + label .coche { background: var(--orange); border-color: var(--orange); position: relative; }
.match input:checked + label .coche::after { content: ""; position: absolute; left: 7px; top: 2px; width: 7px; height: 13px; border: solid var(--noir); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.match input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: -3px; }
.vide { margin: 0; padding: 22px 4px; color: var(--encre-douce); }

/* Réglages repliables (présentation, photo, autres) */
details.reglage { border-top: 1px solid var(--filet); }
details.reglage:last-of-type { border-bottom: 1px solid var(--filet); }
details.reglage > summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-weight: 700; cursor: pointer; }
details.reglage > summary::after { content: "+"; font-size: 26px; font-weight: 500; }
details.reglage[open] > summary::after { content: "–"; }
details.reglage > .corps { padding: 0 0 18px; }
details.reglage:first-of-type { margin-top: 24px; }
summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Champs */
fieldset { border: 0; padding: 0; margin: 24px 0 0; }
legend { font-weight: 800; font-size: 20px; padding: 0; margin-bottom: 12px; }
label { display: block; font-size: 15px; margin-bottom: 14px; }
label > span { display: block; margin-bottom: 4px; font-weight: 700; }
input[type=text], input[type=date], input[type=time], input[type=number], textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px; font-family: inherit; color: inherit; background: #FBF9F4; border: 2px solid var(--noir); border-radius: 0; }
.outils-texte { display: flex; gap: 8px; margin-bottom: 8px; }
.outils-texte button { display: flex; align-items: center; gap: 8px; padding: 8px 14px; min-width: 56px; justify-content: center; }
.outils-texte i { display: block; font-style: normal; }
.echantillon-orange { width: 14px; height: 14px; background: var(--orange); }
.echantillon-puce { width: 8px; height: 8px; background: var(--orange); }
code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; background: #EDE8DC; padding: 1px 5px; }
textarea { min-height: 180px; resize: vertical; line-height: 1.4; }
input[type=range] { width: 100%; accent-color: var(--noir); min-height: 32px; }
input:focus-visible, button:focus-visible, textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; margin-bottom: 8px; }
.case input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--noir); }
.case span { margin: 0; font-weight: 500; }

/* "Choisir un fichier" : le bouton par défaut du navigateur est minuscule, surtout au doigt */
input[type=file] { width: 100%; font-size: 15px; color: var(--encre-douce); }
input[type=file]::file-selector-button { font: inherit; font-size: 17px; font-weight: 700; color: var(--noir); min-height: 56px; padding: 14px 22px; margin-right: 14px;
  background: var(--papier); border: 2px solid var(--noir); border-radius: 0; cursor: pointer; }
input[type=file]:hover::file-selector-button { background: var(--orange); }

button { font: inherit; font-weight: 700; min-height: 48px; padding: 11px 16px; border: 2px solid var(--noir); border-radius: 0; background: var(--papier); color: var(--noir); cursor: pointer; }
button:hover { background: #EDE8DC; }
button.principal { background: var(--orange); border-color: var(--noir); font-size: 18px; min-height: 56px; width: 100%; }
button.principal:hover { background: #FF8D26; }
/* Images prêtes (téléphone) : le bouton devient noir, comme les matchs choisis, pour montrer que l'étape a changé */
button.principal.pret { background: var(--noir); color: var(--orange); border-color: var(--noir); }
button.principal.pret:hover { background: #262626; }
button:disabled { opacity: .6; cursor: wait; }

/* Barre d'action fixe : résumé + bouton principal toujours sous le pouce */
.barre-action { position: fixed; left: 0; bottom: 0; width: var(--largeur-formulaire); z-index: 20; background: var(--papier); border-top: 2px solid var(--noir);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.barre-action .resume:empty { display: none; }
.barre-action .resume { margin: 0 0 8px; min-height: 1.4em; font-size: 14px; font-weight: 600; color: var(--encre-douce); }
.barre-action .actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
#onglet-apercu, #onglet-formulaire { display: none; }

/* Résultat de la création */
#sortie { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--noir); }
#sortie p { font-size: 15px; margin: 0 0 12px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.galerie figure { margin: 0; min-width: 0; }
.galerie img { width: 100%; display: block; border: 1px solid var(--noir); }
.galerie figcaption { font-size: 14px; margin-top: 6px; }
.galerie a { color: var(--noir); font-weight: 700; }

/* Aperçu */
.zone { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 24px 16px; background: var(--fond-apercu); }
.nav-images { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-weight: 700; }
.nav-images button { min-width: 52px; }
/* Le "cadre" a la taille de l'aperçu réduit ; la scène 1080x1920 est réduite à l'intérieur */
.cadre { position: relative; width: calc(1080px * var(--s)); height: calc(1920px * var(--s)); overflow: hidden; box-shadow: 0 6px 30px rgba(0,0,0,.35); background: #000; }
.interdit { position: absolute; left: 0; right: 0; background: rgba(255, 0, 80, .28); display: none; pointer-events: none;
  color: #fff; font: 12px system-ui; padding: 4px 8px; }
body.zones .interdit { display: block; }
.cadre.avec-photo { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }   /* touch-action : le doigt déplace la photo au lieu de faire défiler la page */
.cadre.avec-photo:active { cursor: grabbing; }

/* Type "Message" : ni calendrier ni saisie de match, seulement le titre et le texte */
body:not([data-mode="message"]) .s-message { display: none; }
body[data-mode="message"] .s-calendrier, body[data-mode="message"] .s-manuel, body[data-mode="message"] .cache-message { display: none; }

/* Selon la source choisie, on affiche le calendrier ou la saisie manuelle */
body[data-source="calendrier"] .s-manuel { display: none; }
body[data-source="manuel"] .s-calendrier { display: none; }

/* Téléphone : un écran à la fois (Formulaire ou Aperçu), barre d'action sur toute la largeur */
@media (max-width: 800px) {
  .appli { grid-template-columns: minmax(0, 1fr); }
  .formulaire { border-right: 0; padding: 18px 16px 190px; }
  .barre-action { width: auto; right: 0; }
  .barre-action .actions { grid-template-columns: auto 1fr; }
  body[data-onglet="formulaire"] #onglet-apercu { display: block; }
  body[data-onglet="apercu"] #onglet-formulaire { display: block; }
  body[data-onglet="apercu"] .formulaire { display: none; }
  body:not([data-onglet="apercu"]) .barre-action .actions { grid-template-columns: auto 1fr; }
  /* Onglet Formulaire : l'aperçu reste mis en page (indispensable pour l'export) mais hors de l'écran */
  body[data-onglet="formulaire"] .zone { position: absolute; top: 0; left: -200vw; width: 100vw; }
}

/* =====================================================================
   2. LA SCÈNE (le visuel 1080 x 1920 : c'est ce qui est exporté)
   ===================================================================== */
.stage {
  position: absolute; top: 0; left: 0; width: 1080px; height: 1920px;
  transform: scale(var(--s)); transform-origin: top left;
  background: var(--noir); color: var(--blanc); overflow: hidden;
  font-family: 'AT Name Sans', system-ui, sans-serif; font-weight: 700;
}
.stage::before { content: ""; position: absolute; right: -300px; top: 1000px; width: 900px; height: 900px;
  background: var(--orange); transform: rotate(18deg); opacity: .10; }

/* Photo de fond (facultative) */
.photo { position: absolute; inset: 0; overflow: hidden; }
.photo .calque { position: absolute; inset: 0; }
/* La photo garde sa taille naturelle ; sa taille et sa position sont réglées par le JavaScript (zoom et glisser) */
.photo img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; }
.cadre.avec-photo { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }   /* touch-action : le doigt déplace la photo au lieu de faire défiler la page */
.cadre.avec-photo:active { cursor: grabbing; }
.photo::after { content: ""; position: absolute; inset: 0; opacity: var(--voile, 1);
  background: linear-gradient(to bottom, rgba(13,13,13,.60) 0%, rgba(13,13,13,.50) 30%, rgba(13,13,13,.82) 65%, rgba(13,13,13,.95) 100%); }

/* Zone de sécurité : Instagram recouvre ~250px en haut et ~340px en bas */
.contenu { position: absolute; left: 90px; right: 90px; top: 270px; bottom: 360px;
  display: flex; flex-direction: column; justify-content: space-between; }
.logo { width: 720px; color: var(--blanc); }
.logo svg { width: 100%; height: auto; display: block; }

.r { display: block; overflow: hidden; line-height: 1; padding: .06em 0; }
.r > span { display: block; }
.grenat { font-family: 'Grenat', 'AT Name Sans', sans-serif; font-weight: 900; }
.fit > span { display: inline-block; white-space: nowrap; }   /* permet de mesurer la largeur du texte */
.barre { height: 10px; background: var(--orange); }
.orange { color: var(--orange); }
.gris { color: var(--gris); font-weight: 500; }

.categorie { font-size: 52px; margin-top: 14px; }
/* Pastille orange : indique QUELLE équipe de Moudon joue (même style que "Victoire") */
.tag { font-size: 44px; margin-top: 44px; }
.tag > span { background: var(--orange); color: var(--noir); font-weight: 800; text-transform: uppercase; padding: .08em .45em .14em; }
.date { font-size: 92px; font-weight: 800; }
.heure { font-family: 'Grenat', sans-serif; font-weight: 900; font-size: 330px; line-height: .95; color: var(--orange); }
.equipe { font-size: 118px; font-weight: 800; text-transform: uppercase; }
.contre { font-size: 52px; }
.salle { font-size: 52px; }
.titre { font-size: 104px; font-weight: 800; }
.scores { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 70px; }
.score { font-family: 'Grenat', sans-serif; font-weight: 900; font-size: 360px; line-height: .9; }
.deux-points { font-family: 'Grenat', sans-serif; font-weight: 900; font-size: 240px; line-height: .9; color: var(--gris); padding-bottom: 20px; }
.noms { display: flex; justify-content: space-between; margin-top: 30px; gap: 30px; }
.nom { font-size: 64px; font-weight: 800; text-transform: uppercase; }
.noms .r:last-child { text-align: right; }
.pastille { display: inline-block; margin-bottom: 30px; }
.verdict { display: inline-block; background: var(--orange); color: var(--noir); font-size: 70px; font-weight: 800; text-transform: uppercase; padding: 10px 34px 14px; }
.verdict.defaite { background: var(--gris); }
.verdict.nul { background: var(--blanc); }

/* Liste de plusieurs matchs (une image avec 2 à 5 matchs) */
.liste { display: none; flex: 1; flex-direction: column; min-height: 0; margin-top: 50px; }
body[data-vue="liste"] .liste { display: flex; }
body[data-vue="liste"] .m-annonce, body[data-vue="liste"] .m-resultat,
body[data-vue="liste"] .bas, body[data-vue="liste"] .categorie, body[data-vue="liste"] .tag { display: none; }

/* Message libre : un titre, la barre orange, puis le texte (retours à la ligne conservés) */
.message { display: none; flex: 1; flex-direction: column; min-height: 0; margin-top: 50px; }
body[data-vue="message"] .message { display: flex; }
body[data-vue="message"] .m-annonce, body[data-vue="message"] .m-resultat,
body[data-vue="message"] .bas, body[data-vue="message"] .categorie, body[data-vue="message"] .tag { display: none; }
body[data-mode="message"] .m-annonce, body[data-mode="message"] .m-resultat { display: none; }
.titre-message { font-size: 104px; font-weight: 800; line-height: 1.05; }
.message .barre { margin: 38px 0 44px; flex: none; }
.texte-message { flex: 1; min-height: 0; font-size: 56px; font-weight: 500; line-height: 1.3; color: var(--blanc); }
.texte-message .p { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.3em; }   /* une ligne vide garde sa hauteur */
.texte-message .gras { font-weight: 800; }
.texte-message .italique, .titre-message .italique { font-style: italic; }
.titre-message .gras { font-weight: 1000; }
/* Puce : petit carré orange et retrait */
.texte-message .puce { position: relative; padding-left: .85em; }
.texte-message .puce::before { content: ""; position: absolute; left: 0; top: .55em; width: .34em; height: .34em; background: var(--orange); }
.sous-titre { font-size: 52px; margin-top: 6px; }
.lignes { margin-top: 44px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Les lignes se partagent la place disponible (jusqu'à la zone masquée d'Instagram) ; 300px max pour les listes courtes */
.ligne { flex: 1 1 0; min-height: 0; max-height: 300px; display: flex; border-top: 3px solid rgba(189, 184, 174, .28); }
.ligne > span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 30px; }   /* min-width:0 = peut rétrécir sous la largeur du texte */
.ligne .info { flex: 1; min-width: 0; }
.ligne .info > div { line-height: 1.15; }
.ligne .info span { display: inline-block; white-space: nowrap; }
.ligne .meta { font-size: 36px; color: var(--gris); font-weight: 500; }
.ligne .tag-equipe { background: var(--orange); color: var(--noir); font-weight: 800; font-size: .82em; text-transform: uppercase; padding: .06em .5em .1em; margin-right: .6em; }
.ligne .adv { font-size: 58px; font-weight: 800; text-transform: uppercase; }
.ligne .lieu { font-size: 32px; color: var(--gris); font-weight: 500; }
.ligne .heure-l { flex: 0 0 270px; font-family: 'Grenat', sans-serif; font-weight: 900; font-size: 88px; line-height: 1; color: var(--orange); }
/* 3 colonnes fixes : les « : » sont alignés d'une ligne à l'autre */
.ligne .score-l { flex: 0 0 auto; display: grid; grid-template-columns: 1.5em .6em 1.5em; font-family: 'Grenat', sans-serif; font-weight: 900; font-size: 96px; line-height: 1; }
.ligne .score-l span:first-child { text-align: right; }
.ligne .score-l .sep { text-align: center; }
.ligne .score-l .nous { color: var(--orange); }
.ligne .score-l .sep { color: var(--gris); }
.lignes.dense .meta { font-size: 32px; }
.lignes.dense .adv { font-size: 50px; }
.lignes.dense .lieu { font-size: 28px; }
.lignes.dense .heure-l { font-size: 76px; flex-basis: 232px; }
.lignes.dense .score-l { font-size: 84px; }

/* Animation : active seulement quand la scène a la classe "anim" */
.anim .r > span { transform: translateY(115%); animation: monte .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); }
.anim .barre { transform: scaleX(0); transform-origin: left; animation: barre .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); }
.anim .logo { opacity: 0; animation: fondu 1s .1s forwards; }
.anim .photo .calque { animation: zoom 8s ease-out forwards; }
@keyframes monte { to { transform: none; } }
@keyframes barre { to { transform: scaleX(1); } }
@keyframes fondu { to { opacity: 1; } }
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Affiche seulement ce qui correspond au type choisi (annonce ou résultat) */
body[data-mode="annonce"]  .m-resultat { display: none; }
body[data-mode="resultat"] .m-annonce  { display: none; }