/*
 * Fiche Wi-Fi gratuite — page et feuille A4 (identité Stitch, 28/09/2026).
 * La feuille (#feuille) a ses dimensions RÉELLES (210 × 297 mm) : réduite à
 * l'écran par une échelle calculée (generateur.js), imprimée à 100 %.
 */

/* ===== Accroche ===== */
.fw-hero { padding-block: 2.5rem 3rem; }
.fw-hero__grille { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .fw-hero__grille { grid-template-columns: 2fr 1fr; } }
.fw-hero__texte { display: grid; gap: 1.25rem; justify-items: start; }
.fw-hero__intro { max-width: 42rem; margin: 0; }
.fw-saut { display: none; }
@media (min-width: 640px) { .fw-saut { display: inline; } }
.fw-atouts { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; font-size: 12px; line-height: 18px; color: var(--st-texte-variant); }
.fw-atouts li { display: flex; align-items: center; gap: .5rem; }
.fw-atouts .material-symbols-outlined { color: var(--st-secondaire); }
.fw-hero__visuel { display: flex; justify-content: center; }
@media (min-width: 1024px) { .fw-hero__visuel { justify-content: flex-end; } }
.fw-cadre { width: 100%; max-width: 20rem; padding: .75rem; border-radius: var(--st-rayon-lg); background: var(--st-conteneur-bas); box-shadow: 0 12px 32px -4px rgba(13, 35, 58, 0.06); }
.fw-cadre__feuille {
  aspect-ratio: 4 / 5; border-radius: var(--st-rayon-md);
  background: linear-gradient(160deg, #efe6d8, #e3d6c3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  position: relative; overflow: hidden;
}
.fw-cadre__feuille::before { content: ""; position: absolute; inset: 14% 20%; background: #fcf9f4; border: 6px solid #2b2b2b; box-shadow: 0 10px 24px rgba(13, 35, 58, .22); }
.fw-cadre__feuille > * { position: relative; }
.fw-cadre__rond { width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--st-primaire-conteneur); color: #fff; display: grid; place-items: center; }
.fw-cadre__rond .material-symbols-outlined { font-size: 14px; }
.fw-cadre__ligne { width: 34%; height: .3rem; border-radius: 999px; background: #d8ccbb; }
.fw-cadre__ligne--courte { width: 22%; }
.fw-cadre__qr .material-symbols-outlined { font-size: 64px; color: var(--st-primaire-conteneur); }
.fw-cadre__legende { margin: .75rem 0 0; padding: .5rem .75rem; border-radius: var(--st-rayon); background: var(--st-primaire-conteneur); color: #fff; font: 500 13px/18px var(--st-serif); }
.fw-cadre__legende span { display: block; font: 600 11px/14px var(--st-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--st-secondaire-fixe); }

/* ===== Atelier ===== */
.fw-atelier { background: var(--st-conteneur-bas); padding-block: 2.5rem; }
.fw-atelier__entete { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .fw-atelier__entete { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.fw-atelier__entete .st-titre-md { margin-top: .25rem; }
.fw-atelier__grille { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) {
  .fw-atelier__grille { grid-template-columns: 1fr 1fr; }
  .fw-colonne-apercu { position: sticky; top: 6rem; }
}
.fw-etapes { display: grid; gap: 1.5rem; }

.fw-confiance {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.25rem 1.5rem; border-radius: var(--st-rayon-lg);
  background: var(--st-primaire-conteneur); color: #eef3f9;
}
.fw-confiance > .material-symbols-outlined { font-size: 26px; color: var(--st-secondaire-fixe); margin-top: .1rem; }
.fw-confiance p { margin: 0; font-size: 14px; line-height: 22px; color: var(--st-primaire-fixe-dim); }
.fw-confiance .fw-confiance__titre { font: 600 18px/26px var(--st-sans); color: #fff; margin-bottom: .35rem; }
.fw-confiance .fw-confiance__preuve { margin-top: .5rem; font-size: 12px; line-height: 18px; color: var(--st-secondaire-fixe); }

.fw-etape { padding: 1.5rem; border-radius: var(--st-rayon-lg); background: var(--st-surface); box-shadow: var(--st-ombre-1); display: grid; gap: 1rem; }
.fw-etape__entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; }
.fw-etape__entete h3 { display: flex; align-items: center; gap: .625rem; margin: 0; font: 600 18px/26px var(--st-sans); letter-spacing: -0.005em; color: var(--st-primaire); }
.fw-etape__num { width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--st-primaire-conteneur); color: var(--st-surface); display: grid; place-items: center; font: 600 11px/1 var(--st-sans); flex: none; }
.fw-etape__note { font: 600 11px/14px var(--st-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--st-secondaire); text-align: end; }
.fw-etape__note--info { display: inline-flex; align-items: center; gap: .25rem; text-transform: none; letter-spacing: 0; padding: .15rem .5rem; border-radius: var(--st-rayon-sm); background: rgba(201, 230, 255, 0.45); color: var(--st-cyan-texte); }
.fw-etape__note--info .material-symbols-outlined { font-size: 14px; }

.fw-champs { display: grid; gap: 1rem; }
@media (min-width: 640px) { .fw-champs { grid-template-columns: 1fr 1fr; } }
.fw-champs--haut { margin-top: .5rem; }
/* Deux colonnes dont une étiquette passe sur deux lignes : les listes restent alignées. */
@media (min-width: 640px) {
  .fw-champs--aligne { row-gap: .375rem; }
  .fw-champs--aligne > .fw-champ { grid-row: 1 / span 3; grid-template-rows: subgrid; }
  .fw-champs--aligne > .fw-champ > label { align-self: end; }
}
.fw-champ { display: grid; gap: .375rem; align-content: start; }
@media (min-width: 640px) { .fw-champ--large, .fw-champ--cases { grid-column: 1 / -1; } }
.fw-champ label { font: 600 13px/18px var(--st-sans); letter-spacing: .02em; color: var(--st-texte); }
.fw-requis { font-weight: 500; font-size: 11px; color: var(--st-secondaire); text-transform: lowercase; }
.fw-champ input[type="text"], .fw-champ input[type="tel"], .fw-champ input[type="time"], .fw-champ select {
  width: 100%; height: 2.75rem; padding: 0 .875rem; border: 1px solid transparent; border-radius: var(--st-rayon);
  background: var(--st-conteneur-plus-bas); color: var(--st-texte); font: 400 14px/22px var(--st-sans);
  box-shadow: 0 1px 2px rgba(13, 35, 58, 0.06);
}
.fw-champ input:focus, .fw-champ select:focus { outline: none; border-color: var(--st-primaire-conteneur); box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15); }
.fw-champ input:disabled { background: var(--st-conteneur); color: var(--st-contour); }
.fw-champ input::placeholder { color: #8b8e94; }
.fw-champ__icone { position: relative; }
.fw-champ__icone > .material-symbols-outlined { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--st-secondaire); pointer-events: none; }
.fw-champ__icone input { padding-inline-start: 2.4rem !important; }
.fw-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important; }
.fw-case { display: flex; align-items: center; gap: .625rem; font: 400 14px/22px var(--st-sans) !important; letter-spacing: 0 !important; cursor: pointer; }
.fw-case input, .fw-regle input { width: 1rem; height: 1rem; accent-color: var(--st-primaire-conteneur); flex: none; }
.fw-aide { margin: 0; font-size: 12px; line-height: 18px; color: var(--st-texte-variant); }
.fw-aide--centre { text-align: center; }

.fw-regles { display: grid; gap: .625rem; }
.fw-regle { display: flex; align-items: center; gap: .75rem; padding: .625rem; border-radius: var(--st-rayon); background: rgba(246, 243, 238, 0.5); cursor: pointer; transition: background-color .2s; }
.fw-regle:hover { background: var(--st-conteneur); }
.fw-regle:has(input:disabled) { opacity: .5; cursor: not-allowed; }

.fw-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.fw-style { text-align: start; padding: .75rem; border-radius: var(--st-rayon-md); border: 2px solid transparent; background: var(--st-conteneur-bas); cursor: pointer; font: inherit; color: inherit; }
.fw-style:hover { background: var(--st-conteneur); }
.fw-style[aria-checked="true"] { background: var(--st-conteneur-haut); border-color: var(--st-primaire-conteneur); }
.fw-style strong { display: block; font: 600 14px/22px var(--st-sans); color: var(--st-primaire); }
.fw-style span { display: block; font-size: 12px; line-height: 18px; color: var(--st-secondaire); }
.fw-langues { display: flex; flex-wrap: wrap; gap: .5rem; padding: .25rem; border-radius: var(--st-rayon-md); background: var(--st-conteneur-bas); width: fit-content; }
.fw-langue { border: 0; background: transparent; padding: .45rem .9rem; border-radius: var(--st-rayon); font: 500 14px/22px var(--st-sans); color: var(--st-texte-variant); cursor: pointer; }
.fw-langue[lang="ar"] { font-family: "Noto Sans Arabic", var(--st-sans); }
.fw-langue[aria-checked="true"] { background: var(--st-primaire-conteneur); color: #fff; font-weight: 600; }

/* ----- Colonne aperçu ----- */
.fw-colonne-apercu { display: grid; gap: 1rem; }
.fw-barre-apercu { padding: .875rem; border-radius: var(--st-rayon-md); background: var(--st-surface); box-shadow: 0 1px 2px rgba(13, 35, 58, .05); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.fw-barre-apercu .st-pastille { white-space: nowrap; }
.fw-barre-apercu p { margin: 0; display: flex; align-items: center; gap: .5rem; font: 600 14px/22px var(--st-sans); color: var(--st-primaire); }
.fw-mur { position: relative; border-radius: var(--st-rayon-lg); background: var(--st-conteneur); padding: 1rem; box-shadow: inset 0 2px 4px rgba(13, 35, 58, .06); overflow: hidden; }
@media (min-width: 640px) { .fw-mur { padding: 1.5rem; } }
@media (min-width: 1024px) { .fw-mur { padding: 2rem; } }
.fw-echelle { --echelle: .6; width: calc(210mm * var(--echelle)); margin-inline: auto; }
.fw-echelle > .feuille { transform: scale(var(--echelle)); transform-origin: top left; box-shadow: 0 20px 50px rgba(13, 35, 58, 0.18); }
.fw-actions { padding: 1.25rem; border-radius: var(--st-rayon-lg); background: var(--st-surface); box-shadow: 0 1px 2px rgba(13, 35, 58, .05); display: grid; gap: .75rem; }
.fw-actions .st-bouton--primaire { min-height: 3rem; border-radius: var(--st-rayon-md); }
.fw-message { margin: 0; padding: .6rem .8rem; border-radius: var(--st-rayon); background: #ffdad6; color: #93000a; font-size: 13px; }

/* ===== Feuille A4 ===== */
.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 { 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; }

/* ===== Conseils, comparatif, FAQ, appel ===== */
.fw-conseils { padding-block: 4rem; }
.fw-conseils__grille { display: grid; gap: 2rem; }
@media (min-width: 768px) { .fw-conseils__grille { grid-template-columns: repeat(3, 1fr); } }
.fw-conseil { padding: 1.5rem; border-radius: var(--st-rayon-lg); background: var(--st-conteneur-bas); box-shadow: var(--st-ombre-1); display: flex; flex-direction: column; gap: .75rem; }
.fw-conseil__icone { width: 3rem; height: 3rem; border-radius: var(--st-rayon-md); background: var(--st-secondaire-conteneur); color: var(--st-sur-secondaire-conteneur); display: grid; place-items: center; }
.fw-conseil__icone .material-symbols-outlined { font-size: 24px; }
.fw-conseil h3 { margin: 0; font: 600 18px/26px var(--st-sans); color: var(--st-primaire); }
.fw-conseil p { margin: 0; color: var(--st-texte-variant); line-height: 1.65; }
.fw-conseil .fw-conseil__pied { margin-top: auto; padding-top: .75rem; border-top: 1px solid rgba(229, 226, 221, .6); display: flex; justify-content: space-between; gap: 1rem; font: 600 11px/14px var(--st-sans); letter-spacing: .04em; color: var(--st-secondaire); }
.fw-conseil__pied strong { color: var(--st-primaire); }

.fw-comparatif { padding-block: 4rem; background: var(--st-conteneur); }
.fw-comparatif__grille { display: grid; gap: 2rem; align-items: stretch; }
@media (min-width: 1024px) { .fw-comparatif__grille { grid-template-columns: 1fr 1fr; } }
.fw-offre { padding: 2rem; border-radius: var(--st-rayon-lg); background: var(--st-surface); border: 1px solid rgba(196, 198, 205, .3); display: flex; flex-direction: column; gap: 1rem; }
.fw-offre > p { margin: 0; color: var(--st-texte-variant); }
.fw-offre__haut { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fw-offre .st-bouton { margin-top: auto; }
.fw-offre--nuit { background: var(--st-primaire-conteneur); color: var(--st-surface); border: 0; box-shadow: 0 16px 40px -6px rgba(13, 35, 58, 0.25); }
.fw-offre--nuit .st-titre-md { color: var(--st-surface); }
.fw-offre--nuit > p { color: var(--st-primaire-fixe-dim); }
.fw-offre--nuit .st-surtitre { color: var(--st-secondaire-fixe); }
.fw-offre--nuit .fw-offre__note { font-size: 12px; text-align: center; color: var(--st-primaire-fixe-dim); }
.fw-offre--nuit .fw-offre__preuve { margin: -.25rem 0 0; font-size: 12px; line-height: 18px; color: var(--st-secondaire-fixe); }
.fw-liste { list-style: none; margin: .5rem 0 .5rem; padding: 0; display: grid; gap: .75rem; }
.fw-liste li { display: flex; align-items: flex-start; gap: .625rem; }
.fw-liste .material-symbols-outlined { color: var(--st-secondaire); flex: none; }
.fw-offre--nuit .fw-liste .material-symbols-outlined { color: var(--st-secondaire-fixe); }
.fw-liste__non { color: rgba(68, 71, 77, .6); }
.fw-liste__non .material-symbols-outlined { color: rgba(68, 71, 77, .6); }

.fw-faq { padding-block: 4rem; }
.fw-appel { background: rgba(242, 220, 192, 0.4); padding-block: 3rem; }
.fw-appel__ligne { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; justify-content: space-between; }
@media (min-width: 768px) { .fw-appel__ligne { flex-direction: row; align-items: center; } }
.fw-appel p { margin: .25rem 0 0; color: var(--st-texte-variant); }

/* ===== Impression : la feuille seule, à 100 %, sur une page A4 ===== */
@page { size: A4; margin: 0; }
@media print {
  html, body { background: #fff !important; margin: 0 !important; }
  .st-evitement, .st-entete, .st-bandeau-info, .st-pied, .fw-hero, .fw-conseils, .fw-comparatif, .fw-faq, .fw-appel,
  .fw-atelier__entete, .fw-etapes, .fw-barre-apercu, .fw-actions, #donnees-fiche { display: none !important; }
  .fw-atelier, .fw-atelier .st-conteneur, .fw-atelier__grille, .fw-colonne-apercu, .fw-mur, .fw-echelle {
    display: block !important; position: static !important; padding: 0 !important; margin: 0 !important;
    background: none !important; box-shadow: none !important; border-radius: 0 !important;
    width: auto !important; height: auto !important; max-width: none !important; overflow: visible !important;
  }
  .fw-echelle > .feuille { transform: none !important; box-shadow: none !important; }
  .feuille { page-break-inside: avoid; break-inside: avoid; }
}