/*
 * Fiche Wi-Fi gratuite — la page (identité Stitch, 28/09/2026). La feuille A4
 * elle-même est dans feuille.css (01/10/2026). Elle 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); }
/* Cadre « Exemple » : le mur beige et, encadrée, la VRAIE fiche d'exemple réduite
   (01/10/2026 — remplace l'illustration d'attente faite de traits et d'icônes). */
.fw-cadre__feuille {
  aspect-ratio: 4 / 5; border-radius: var(--st-rayon-md);
  background: linear-gradient(160deg, #efe6d8, #e3d6c3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fw-cadre__feuille .feuille-exemple { --echelle: .26; border: 6px solid #2b2b2b; box-sizing: content-box; box-shadow: 0 10px 24px rgba(13, 35, 58, .22); }
.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; }

/* Trois cartes côte à côte demandent 284 px (leurs mots les plus longs) : sous
   380 px de fenêtre (284 + marges de l'étape 2 × 24 + gouttières 2 × 24), elles
   élargissaient toute la colonne du formulaire et la page (320 → 356 px, bandeau
   cookies hors écran). Empilées en dessous (01/10/2026). */
.fw-styles { display: grid; gap: .75rem; }
@media (min-width: 380px) { .fw-styles { grid-template-columns: repeat(3, 1fr); } }
.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 : racine/fiche-wifi/feuille.css (partagée avec la home, 01/10/2026). */

/* ===== 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); }
/* Pages anglaise, espagnole et arabe (07/10/2026) : bouton WhatsApp en tête,
   puis « créer un compte » en lien secondaire, et la note (inscription en
   français pour le moment, tarifs en français). */
.fw-offre--nuit .fw-offre__lien { align-self: center; color: var(--st-surface); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fw-offre--nuit .fw-offre__note a { color: inherit; }
.fw-contenu .fw-liste { max-width: 40rem; margin-inline: auto; }
.fw-liste { list-style: none; margin: .5rem 0 .5rem; padding: 0; display: grid; gap: .75rem; }
/* Texte de la puce en flux normal, icône posée en début de ligne
   (07/10/2026) : en `display: flex`, chaque morceau de texte et chaque
   <span lang> d'une puce (« Français, العربية, English ou Español »)
   devenait un élément flex séparé, sans retour à la ligne possible — la
   carte imposait ~430 px de large et la page débordait sur téléphone
   (déjà le cas en production à 390 px). */
.fw-liste li { position: relative; padding-inline-start: 1.875rem; }
.fw-liste li > .material-symbols-outlined { position: absolute; inset-inline-start: 0; top: .0625rem; }
.fw-liste .material-symbols-outlined { color: var(--st-secondaire); flex: none; }
.fw-offre--nuit .fw-liste .material-symbols-outlined { color: var(--st-secondaire-fixe); }
/* « Non inclus » estompé mais lisible : --st-texte-variant à 80 % ≈ #696b6e, 5,1:1 sur
   --st-surface (AA 4,5:1). À 60 %, 3,1:1 — relevé par axe-core le 30/09/2026. */
.fw-liste__non { color: rgba(68, 71, 77, .8); }
.fw-liste__non .material-symbols-outlined { color: rgba(68, 71, 77, .8); }

.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; }
}