/*
 * Espace propriétaire — identité Stitch « Concierge Digital » (brique 1 de la
 * refonte de l'espace, 29/09/2026). S'appuie sur `racine/stitch.css`
 * (jetons, polices, boutons, pastilles), comme la home et la fiche Wi-Fi.
 *
 * Aucun changement de structure ni de fonction : les gabarits de l'espace
 * gardent leurs classes (.carte, .btn, .aide, .etat, .barre-progres…) et
 * leurs anciens noms de jetons (--marque, --trait…), remappés ici sur les
 * valeurs Stitch. Toujours « le téléphone d'abord » : une colonne, grandes
 * cibles tactiles, propriétés logiques pour la future bascule en arabe (RTL).
 *
 * Les couleurs de l'ambiance choisie pour un livret ne teintent plus
 * l'interface : elles restent réservées à ce qui représente le livret du
 * voyageur (aperçu téléphone, vignettes du tableau de bord).
 */

:root {
  /* Anciens noms, nouvelles valeurs (Stitch). */
  --fond: var(--st-surface);
  --carte: #ffffff;
  --encre: var(--st-texte);
  --encre-douce: var(--st-texte-variant);
  --trait: #e5e2dd;
  --marque: var(--st-primaire-conteneur);
  --marque-encre: #ffffff;
  --accent: var(--st-secondaire);
  --ok: #1f7a4d;
  --alerte: var(--st-erreur);
  --rayon: var(--st-rayon-md);
  --ff: var(--st-sans);
  --ff-titre: var(--st-serif);
}

/* Colonne pleine hauteur : le pied de page reste en bas sur un écran court. */
body { min-block-size: 100vh; display: flex; flex-direction: column; font-size: 15px; line-height: 24px; background: var(--st-surface); color: var(--st-texte); }
main a:not([class]) { color: var(--st-primaire-conteneur); text-underline-offset: 2px; }
main a:not([class]):hover { color: var(--st-primaire); }
svg { display: inline-block; }

/* --- En-tête de l'application --- */
.es-entete {
  position: sticky; top: 0; z-index: 20;
  background: rgba(252, 249, 244, 0.92);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 1px 8px rgba(13, 35, 58, 0.05);
}
.es-entete__barre { max-inline-size: 72rem; margin-inline: auto; padding-inline: 1rem; min-block-size: 4rem; display: flex; align-items: center; gap: 1rem; }
@media (min-width: 1024px) { .es-entete__barre { padding-inline: 2rem; } }
.es-entete .st-marque__nom { font-size: 17px; line-height: 22px; }
.es-entete__titre { display: none; margin: 0; padding-inline-start: 1rem; border-inline-start: 1px solid var(--st-conteneur-plus-haut); font: 500 14px/20px var(--st-sans); color: var(--st-texte-variant); }
@media (min-width: 768px) { .es-entete__titre { display: block; } }
.es-entete__actions { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
.es-entete__actions form { margin: 0; }
.es-lien-entete {
  display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.5rem; padding: .4rem .6rem;
  border: 0; border-radius: var(--st-rayon); background: none; cursor: pointer;
  font: 500 14px/20px var(--st-sans); color: var(--st-texte-variant); text-decoration: none;
}
.es-lien-entete:hover { background: var(--st-conteneur); color: var(--st-primaire); }
.es-lien-entete .material-symbols-outlined { font-size: 20px; }
.es-lien-entete span:not(.material-symbols-outlined) { display: none; }
@media (min-width: 640px) { .es-lien-entete span:not(.material-symbols-outlined) { display: inline; } }

/* --- Page --- */
main { flex: 1 0 auto; inline-size: 100%; max-inline-size: 36rem; margin-inline: auto; padding-inline: 1rem; padding-block: 1.5rem 3.5rem; }
h1 { font: 400 28px/36px var(--st-serif); letter-spacing: -0.01em; color: var(--st-primaire); margin-block: .25rem .5rem; }
h2 { font: 500 20px/28px var(--st-serif); color: var(--st-primaire); margin-block: 1.75rem .6rem; }
p.sous { color: var(--st-texte-variant); margin-block: 0 1.25rem; }
.carte {
  background: #fff; border: 1px solid rgba(196, 198, 205, .6); border-radius: var(--st-rayon-lg);
  padding: 1.25rem; margin-block-end: 1rem; box-shadow: var(--st-ombre-1);
}

/* --- Formulaires --- */
label { display: block; font: 600 13px/18px var(--st-sans); letter-spacing: .02em; color: var(--st-texte); margin-block: 1rem .4rem; }
label:first-child { margin-block-start: 0; }
#bloc-devise > label:first-child, .bloc-force > label:first-child { margin-block-start: 1rem; } /* champs affichés selon le pays : espacement des autres champs */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=time], input[type=url], input[type=file],
textarea, select {
  inline-size: 100%; padding: .7rem .9rem;
  /* 16 px : sous cette taille, Safari sur iPhone zoome la page au toucher d'un champ. */
  font: 400 16px/24px var(--st-sans); color: var(--st-texte);
  background: #fff; border: 1px solid var(--st-contour-variant); border-radius: var(--st-rayon-md);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--st-primaire-conteneur); box-shadow: 0 0 0 3px rgba(13, 35, 58, .12); }
input::placeholder, textarea::placeholder { color: #8b8e94; }
textarea { min-block-size: 8rem; resize: vertical; }
.aide { font-size: 13px; line-height: 19px; color: var(--st-texte-variant); margin-block-start: .35rem; }
.champ-case { display: flex; gap: .65rem; align-items: flex-start; margin-block-start: 1rem; }
.champ-case input { inline-size: 1.2rem; block-size: 1.2rem; margin-block-start: .15rem; flex: none; accent-color: var(--st-primaire-conteneur); }
.champ-case label { margin: 0; font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: 0; }
.erreur { color: var(--st-erreur); font-size: 13px; line-height: 19px; margin-block-start: .35rem; }

/* --- Boutons (formes Stitch, mêmes classes qu'avant) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  inline-size: 100%; min-block-size: 3rem; padding: .7rem 1.1rem; margin-block-start: 1.1rem;
  font: 600 15px/22px var(--st-sans); border: 0; border-radius: var(--st-rayon-md);
  background: var(--st-primaire); color: var(--st-surface); text-decoration: none; cursor: pointer;
  box-shadow: var(--st-ombre-bouton); transition: background-color .2s, transform .1s;
}
.btn:hover { background: var(--st-primaire-conteneur); }
.btn:active { transform: scale(.99); }
.btn.secondaire { background: #fff; color: var(--st-primaire-conteneur); border: 1px solid var(--st-contour-variant); box-shadow: none; }
.btn.secondaire:hover { background: var(--st-conteneur-bas); }
.btn.discret { background: var(--st-conteneur); color: var(--st-primaire-conteneur); font-weight: 500; box-shadow: none; }
.btn.discret:hover { background: var(--st-conteneur-haut); }
.btn.danger { background: #fff; color: var(--st-erreur); border: 1px solid rgba(186, 26, 26, .35); box-shadow: none; }
.btn.danger:hover { background: #fff5f4; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* --- Éléments communs --- */
.liens-bas { margin-block-start: 1.75rem; text-align: center; font-size: 14px; line-height: 24px; }
.messages { margin-block-end: 1rem; }
.messages .msg { padding: .75rem 1rem; border-radius: var(--st-rayon-md); font-size: 14px; line-height: 20px; margin-block-end: .5rem; }
.messages .success { background: #e7f4ec; color: #14532d; }
.messages .error { background: #ffdad6; color: #93000a; }
.lien-retour { display: inline-flex; align-items: center; gap: .3rem; font: 600 13px/18px var(--st-sans); color: var(--st-texte-variant); text-decoration: none; margin-block-end: .75rem; }
.lien-retour:hover { color: var(--st-primaire); }
ul.checklist { list-style: none; padding: 0; margin: 0; }
ul.checklist li a { display: flex; align-items: center; gap: .75rem; padding: .85rem .25rem; border-block-end: 1px solid var(--trait); text-decoration: none; color: var(--st-texte); }
ul.checklist li a:hover { color: var(--st-primaire); }
ul.checklist li:last-child a { border-block-end: 0; }
.pastille { inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; border: 2px solid var(--trait); flex: none; }
.pastille.faite { background: var(--ok); border-color: var(--ok); }
.compteur { font-size: 13px; line-height: 19px; color: var(--st-texte-variant); }
.barre-progres { block-size: .5rem; background: var(--st-conteneur-haut); border-radius: 999px; overflow: hidden; margin-block: .5rem 1rem; }
.barre-progres > i { display: block; block-size: 100%; background: var(--st-primaire-conteneur); border-radius: 999px; }
.etat { display: inline-flex; align-items: center; gap: .35rem; font: 600 12px/16px var(--st-sans); padding: .25rem .65rem; border-radius: 999px; }
.etat::before { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: currentColor; }
.etat.brouillon { background: var(--st-conteneur-haut); color: var(--st-texte-variant); }
.etat.publie { background: #e3f2ea; color: #14633f; }
.etat.suspendu, .etat.expire { background: #ffdad6; color: #93000a; }
.comparaison { background: var(--st-conteneur-bas); border: 1px solid var(--trait); border-radius: var(--st-rayon-md); padding: .65rem .8rem; font-size: 14px; line-height: 21px; color: var(--st-texte-variant); margin-block: .4rem .7rem; white-space: pre-wrap; }

/* --- Bandeau d'essai gratuit (brique 2C) : mêmes trois tons, jetons Stitch --- */
.bandeau-essai { border-radius: var(--st-rayon-md); padding: .85rem 1rem; margin-block-end: 1rem; font-size: 14px; line-height: 21px; }
.bandeau-essai p { margin: 0 0 .4rem; }
.bandeau-essai a { font-weight: 600; }
.bandeau-essai--calme { background: rgba(242, 220, 192, .45); color: var(--st-texte); border: 1px solid rgba(217, 196, 169, .7); }
.bandeau-essai--calme a { color: var(--st-primaire-conteneur); }
.bandeau-essai--urgent, .bandeau-essai--expire { background: #ffdad6; border: 1px solid #f5b8b0; }
.bandeau-essai--urgent, .bandeau-essai--urgent a, .bandeau-essai--expire, .bandeau-essai--expire a { color: #93000a; }

/* --- Statistiques d'usage : emplacement réservé (29/09/2026) ---
 * Aucune valeur aujourd'hui (ni « 0 », ni chiffre inventé) : chaque tuile
 * garde la place de son futur compteur (`.es-stat__valeur`, hauteur fixe),
 * pour que l'arrivée des vrais chiffres ne change pas la mise en page. */
.es-stats { margin-block: 1.5rem 1rem; padding: 1.25rem; border-radius: var(--st-rayon-lg); background: var(--st-conteneur-bas); border: 1px solid rgba(196, 198, 205, .5); }
.es-stats__tete { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.es-stats__tete h2 { margin: 0; font-size: 18px; line-height: 26px; }
.es-stats > .aide { margin-block: .35rem 1rem; }
.es-stats__grille { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .es-stats--large .es-stats__grille { grid-template-columns: repeat(4, 1fr); } }
.es-stat { display: grid; gap: .35rem; align-content: start; padding: .85rem; border-radius: var(--st-rayon-md); background: #fff; border: 1px solid rgba(196, 198, 205, .5); }
.es-stat__libelle { display: flex; align-items: center; gap: .4rem; font: 600 12px/16px var(--st-sans); color: var(--st-texte-variant); }
.es-stat__libelle .material-symbols-outlined { font-size: 18px; color: var(--st-secondaire); }
.es-stat__valeur { min-block-size: 2rem; display: flex; align-items: center; font: 500 22px/28px var(--st-serif); color: var(--st-primaire); }
.es-stat__bientot { font: 500 12px/16px var(--st-sans); color: var(--st-texte-variant); }

/* --- Pied de page --- */
.es-pied { border-block-start: 1px solid var(--st-conteneur-plus-haut); background: var(--st-conteneur-bas); }
.es-pied__ligne { max-inline-size: 72rem; margin-inline: auto; padding: 1.25rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; font-size: 13px; line-height: 20px; color: var(--st-texte-variant); }
.es-pied__ligne p { margin: 0; }
.es-pied__liens { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.es-pied__liens a { color: var(--st-texte-variant); text-decoration: none; }
.es-pied__liens a:hover { color: var(--st-primaire); text-decoration: underline; }