/*
 * La fiche Wi-Fi A4 (01/10/2026 : sortie de fiche.css). Une seule feuille de
 * style pour l'aperçu de l'atelier du générateur et pour la fiche d'exemple
 * (haut du générateur, scène de la home) — même gabarit
 * (racine/_feuille_wifi.html) : l'exemple montre toujours la fiche réelle.
 */
.feuille {
  --f-fond: #fcf9f4; --f-texte: #1c1c19; --f-titre: #0d233a; --f-accent: #6c5c46; --f-doux: #44474d;
  --f-trait: #e5e2dd; --f-encart: rgba(255, 255, 255, 0.7); --f-carte: #ffffff; --f-mono-fond: #0d233a; --f-mono-texte: #faf7f2;
  width: 210mm; height: 297mm; padding: 15mm 16mm 12mm;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 5mm;
  background: var(--f-fond); color: var(--f-texte);
  font-family: var(--st-sans); font-size: 10.5pt; line-height: 1.35;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.feuille[data-style="nuit"] {
  --f-fond: #0d233a; --f-texte: #e8edf3; --f-titre: #faf7f2; --f-accent: #d9c4a9; --f-doux: #b3c8e6;
  --f-trait: rgba(217, 196, 169, 0.35); --f-encart: rgba(255, 255, 255, 0.06); --f-mono-fond: #d9c4a9; --f-mono-texte: #0d233a;
}
.feuille[data-style="moderne"] {
  --f-fond: #ffffff; --f-texte: #1c1c19; --f-titre: #000c1c; --f-accent: #44474d; --f-doux: #44474d;
  --f-trait: #e5e2dd; --f-encart: #ffffff; --f-mono-fond: #000c1c; --f-mono-texte: #ffffff;
}
/* Arabe : les caractères latins (réseau, chiffres) restent en Hanken Grotesk,
   seuls les caractères arabes passent en Noto Sans Arabic (repli de --st-sans). */
.feuille__coin { position: absolute; width: 5mm; height: 5mm; border-color: var(--f-accent); opacity: .35; border-style: solid; border-width: 0; }
.feuille__coin--hg { top: 6mm; left: 6mm; border-top-width: 1px; border-left-width: 1px; }
.feuille__coin--hd { top: 6mm; right: 6mm; border-top-width: 1px; border-right-width: 1px; }
.feuille__coin--bg { bottom: 6mm; left: 6mm; border-bottom-width: 1px; border-left-width: 1px; }
.feuille__coin--bd { bottom: 6mm; right: 6mm; border-bottom-width: 1px; border-right-width: 1px; }

.feuille__tete { text-align: center; display: grid; justify-items: center; gap: 1.5mm; }
.feuille__monogramme { width: 12mm; height: 12mm; border-radius: 999px; background: var(--f-mono-fond); color: var(--f-mono-texte); display: grid; place-items: center; font: 600 17pt/1 var(--st-serif); margin-bottom: 1.5mm; }
.feuille__monogramme .material-symbols-outlined { font-size: 18pt; }
.feuille__type { margin: 0; font: 600 8pt/1.3 var(--st-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--f-accent); }
.feuille[lang="ar"] .feuille__type { letter-spacing: 0; }
.feuille__nom { margin: 0; font: 400 26pt/1.15 var(--st-serif); letter-spacing: -0.01em; color: var(--f-titre); max-width: 160mm; overflow-wrap: anywhere; }
.feuille__bienvenue { margin: 0; font: italic 400 11.5pt/1.35 var(--st-serif); color: var(--f-doux); max-width: 150mm; }

.feuille__wifi { background: var(--f-carte); border: 1px solid #e5e2dd; border-radius: 5mm; padding: 6mm 8mm 5mm; text-align: center; color: #0d233a; box-shadow: 0 1.5mm 4mm rgba(13, 35, 58, 0.05); }
.feuille__etiquette { margin: 0 0 3mm; display: flex; align-items: center; justify-content: center; gap: 2mm; font: 600 9pt/1 var(--st-sans); letter-spacing: .12em; text-transform: uppercase; color: #0d233a; }
.feuille[lang="ar"] .feuille__etiquette { letter-spacing: 0; }
.feuille__etiquette .material-symbols-outlined { font-size: 13pt; }
.feuille__qr { width: 56mm; height: 56mm; margin: 0 auto; padding: 2mm; border: 1px solid #e5e2dd; border-radius: 3mm; background: #fff; }
.feuille__qr svg, .feuille__qr img { display: block; width: 100%; height: 100%; }
.feuille__qr path { fill: #0d233a; }
.feuille__qr-vide rect { fill: #ebe8e3; }
.feuille__scanner { margin: 2.5mm 0 0; font-size: 9.5pt; color: #44474d; }
.feuille__identifiants { margin-top: 4mm; padding-top: 3.5mm; border-top: 1px solid #e5e2dd; display: flex; justify-content: center; gap: 10mm; text-align: start; }
.feuille__identifiants > div { min-width: 0; max-width: 78mm; }
.feuille__identifiants > div + div { padding-inline-start: 10mm; border-inline-start: 1px solid #e5e2dd; }
.feuille__mini { display: block; font: 600 7pt/1.2 var(--st-sans); letter-spacing: .12em; text-transform: uppercase; color: #6c5c46; }
.feuille[lang="ar"] .feuille__mini { letter-spacing: 0; }
.feuille__valeur { display: block; margin-top: 1mm; font: 600 13pt/1.25 var(--st-sans); color: #0d233a; overflow-wrap: anywhere; }
.feuille__valeur--mono { font: 700 13pt/1.25 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: -0.01em; }

.feuille__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.feuille__duo--seul { grid-template-columns: 1fr; }
.feuille__encart { padding: 3.5mm 4mm; border-radius: 3mm; background: var(--f-encart); border: 1px solid var(--f-trait); min-width: 0; }
.feuille__encart p { margin: 0; font-size: 10pt; color: var(--f-doux); overflow-wrap: anywhere; }
.feuille__encart p + p { margin-top: 1mm; }
.feuille__encart strong { color: var(--f-titre); }
.feuille__encart-titre { display: flex; align-items: center; gap: 1.5mm; margin-bottom: 2mm !important; font: 600 8.5pt/1.2 var(--st-sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--f-titre) !important; }
.feuille[lang="ar"] .feuille__encart-titre { letter-spacing: 0; }
.feuille__encart-titre .material-symbols-outlined { font-size: 12pt; }
.feuille__tel { font: 700 11pt/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important; color: var(--f-titre) !important; }
.feuille__encart--regles ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.6mm; font-size: 10pt; color: var(--f-doux); }
.feuille__encart--regles.feuille__regles--deux ul { grid-template-columns: 1fr 1fr; column-gap: 6mm; }
.feuille__encart--regles li { position: relative; padding-inline-start: 4mm; overflow-wrap: anywhere; }
.feuille__encart--regles li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 1.4mm; height: 1.4mm; border-radius: 999px; background: var(--f-accent); }

.feuille__pied { padding-top: 3mm; border-top: 1px solid var(--f-trait); display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; font: 500 8pt/1.35 var(--st-sans); color: var(--f-accent); }
.feuille__pied p { margin: 0; }
.feuille__credit { white-space: nowrap; }

/* Fiche d'exemple : la feuille A4 à sa taille réelle (mm), réduite d'un
   facteur fixe `--echelle` dans une boîte qui en garde la place exacte
   (aucun décalage de mise en page, aucun script). */
.feuille-exemple { --echelle: .25; width: calc(210mm * var(--echelle)); height: calc(297mm * var(--echelle)); overflow: hidden; }
.feuille-exemple > .feuille { transform: scale(var(--echelle)); transform-origin: top left; }