/* ============================================================================
   QRAvenue — Habillage « Ancien site » (compte.com_habillage = 'v1')
   ----------------------------------------------------------------------------
   L'écran qu'on ouvre en scannant une plaque, aux couleurs de
   www.qravenue.com/v1/ (_css/v1.css, 2026-10-23) : fond gris clair, cartes
   blanches à filet fin, bleu QRAvenue, titres en Oswald capitales, texte en
   Lato. Chargée APRÈS modele-1.css et charte.php (cf. _php/habillage.php).

   ACCESSIBILITÉ : le bleu #1e4892 porte du texte blanc (9,1:1) et se lit
   sur blanc (9,1:1) ; le gris des surtitres (#6b6b6b) fait 5,3:1 sur blanc.
   ========================================================================== */

@import url('/_font/oswald-lato.css');

:root {
  --v1-bleu: #1e4892;
  --v1-bleu-fonce: #163672;
  --v1-bleu-doux: #e8edf6;
  --v1-fond: #f2f2f2;
  --v1-filet: #dee2e6;
  --v1-titre: #555555;
  --v1-discret: #6b6b6b;

  --noir: #212529;
  /* --or sert au TEXTE d'accent dans tout le Modèle 1 : ici le bleu QRAvenue. */
  --or: var(--v1-bleu);
  --or-clair: var(--v1-bleu-doux);
  --or-sombre: var(--v1-bleu-fonce);
  --beige: var(--v1-fond);
  --ivoire: #ffffff;
  --gris-clair: var(--v1-filet);
  --cadre: var(--v1-fond);
  --texte: #212529;

  --police-titre: 'Oswald', 'Arial Narrow', sans-serif;
  --police-ui: 'Lato', Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   1. CADRE ET TYPOGRAPHIE
   ------------------------------------------------------------------------ */
.m1-hab-v1, .m1-hab-v1 .m1-frame { background: var(--v1-fond); font-family: var(--police-ui); }
.m1-hab-v1 :is(h1, h2, h3) { font-family: var(--police-titre); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.m1-hab-v1 :is(h1, h2, h3) em { font-style: normal; font-weight: 500; }

/* ---------------------------------------------------------------------------
   2. BARRE D'EN-TÊTE — blanche à filet, nom de la ville en Oswald et point bleu
   ------------------------------------------------------------------------ */
.m1-hab-v1 .m1-app { background: #ffffff; border-bottom: 1px solid var(--v1-filet); }
.m1-hab-v1 .m1-app :is(.m1-back, .m1-pill) { background: var(--v1-fond); backdrop-filter: none; color: var(--noir); border-radius: 4px; }
.m1-hab-v1 .m1-app :is(.m1-back, .m1-pill):hover { background: var(--v1-bleu); color: #ffffff; }
.m1-hab-v1 .m1-app .m1-ville strong {
  background: none; backdrop-filter: none; color: var(--noir); padding: 7px 4px;
  font-family: var(--police-titre); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
}
.m1-hab-v1 .m1-app .m1-ville strong::after {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%;
  background: var(--v1-bleu); vertical-align: super;
}
.m1-hab-v1 .m1-app .m1-ville small { color: var(--v1-discret); }

/* ---------------------------------------------------------------------------
   3. HÉRO — photo, voile sombre, surtitre en petites capitales espacées
   ------------------------------------------------------------------------ */
.m1-hab-v1 .m1-hero::after { background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.88)); }
.m1-hab-v1 .m1-kicker { font-family: var(--police-titre); color: #ffffff; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; }
.m1-hab-v1 .m1-kicker::before { background: #ffffff; }
.m1-hab-v1 .m1-hero-content h1 { color: #ffffff; line-height: 1.05; }
.m1-hab-v1 .m1-hero-content h1 em { color: #ffffff; }
.m1-hab-v1 .m1-dates { font-family: var(--police-titre); letter-spacing: 0.12em; }

/* ---------------------------------------------------------------------------
   4. CARTE AUDIO ET LANGUES — carte blanche, lecture en bleu
   ------------------------------------------------------------------------ */
.m1-hab-v1 .m1-audio-card { background: #ffffff; color: var(--noir); border: 1px solid var(--v1-filet); border-radius: 4px; box-shadow: none; }
.m1-hab-v1 .m1-audio-card :is(h2, h3, strong, span) { color: var(--noir); }
.m1-hab-v1 .m1-audio-card .m1-big-play { background: var(--v1-bleu); color: #ffffff; box-shadow: 0 0 0 4px var(--v1-bleu-doux); }
.m1-hab-v1 .m1-langbar-chip { border: 1px solid var(--v1-filet); border-radius: 4px; color: var(--noir); background: #ffffff; }
.m1-hab-v1 .m1-langbar-chip.is-current { background: var(--v1-bleu); color: #ffffff; border-color: var(--v1-bleu); }
.m1-hab-v1 .m1-langbar-chip:hover { background: var(--v1-bleu-doux); border-color: var(--v1-bleu); }

/* ---------------------------------------------------------------------------
   5. LECTURE — surtitres gris espacés, titres Oswald, pas de lettrine dorée
   ------------------------------------------------------------------------ */
.m1-hab-v1 :is(.m1-article, .m1-section-head) .m1-chap { font-family: var(--police-titre); color: var(--v1-discret); letter-spacing: 0.25em; font-weight: 400; }
.m1-hab-v1 .m1-article h2 { color: var(--v1-titre); }
.m1-hab-v1 .m1-article p:first-of-type:first-letter { font-family: var(--police-titre); color: var(--v1-bleu); }

/* ---------------------------------------------------------------------------
   6. BOUTONS — bleu QRAvenue, capitales Oswald, angles doux
   ------------------------------------------------------------------------ */
.m1-hab-v1 .m1-cta-btn {
  background: var(--v1-bleu); color: #ffffff; border: 1px solid var(--v1-bleu); border-radius: 4px;
  font-family: var(--police-titre); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; box-shadow: none;
}
.m1-hab-v1 .m1-cta-btn:hover { background: var(--v1-bleu-fonce); color: #ffffff; }
.m1-hab-v1 .m1-cta-btn.m1-cta-ghost { background: #ffffff; color: var(--v1-bleu); }
.m1-hab-v1 .m1-cta-btn.m1-cta-ghost:hover { background: var(--v1-bleu-doux); }
.m1-hab-v1 :is(.m1-action-card, .m1-prog-card) { background: #ffffff; border: 1px solid var(--v1-filet); border-radius: 4px; box-shadow: none; }
.m1-hab-v1 .m1-consent { border: 1px solid var(--v1-filet); border-radius: 4px; }
.m1-hab-v1 .m1-chip.m1-active { background: var(--v1-bleu); color: #ffffff; border-color: var(--v1-bleu); }
.m1-hab-v1 .m1-field input:focus { border-color: var(--v1-bleu); box-shadow: 0 0 0 3px var(--v1-bleu-doux); }

/* ---------------------------------------------------------------------------
   7. BARRE DE NAVIGATION — blanche, entrée active en bleu soulignée
   ------------------------------------------------------------------------ */
.m1-hab-v1 .m1-bottom-nav { background: #ffffff; border-top: 1px solid var(--v1-filet); backdrop-filter: none; box-shadow: 0 -4px 16px -8px rgba(0, 0, 0, 0.15); }
.m1-hab-v1 .m1-bottom-nav :is(a, .m1-nav-item) { color: var(--v1-titre); font-family: var(--police-titre); letter-spacing: 0.06em; }
.m1-hab-v1 .m1-bottom-nav :is(a.m1-active, .m1-nav-item.m1-active) { color: var(--v1-bleu); box-shadow: inset 0 3px 0 var(--v1-bleu); }

/* ---------------------------------------------------------------------------
   8. JEU — carte blanche à filet, réponses à filet, survol bleu doux
   ------------------------------------------------------------------------ */
.m1-hab-v1 .m1-pb-bar { background: var(--v1-filet); border-radius: 999px; }
.m1-hab-v1 .m1-pb-bar > div { background: var(--v1-bleu); border-radius: 999px; }
.m1-hab-v1 .m1-quiz { background: #ffffff; border: 1px solid var(--v1-filet); border-radius: 4px; box-shadow: none; }
.m1-hab-v1 .m1-quiz h2 { color: var(--v1-titre); }
.m1-hab-v1 .m1-quiz-badge { background: var(--v1-bleu); color: #ffffff; border-radius: 4px; font-family: var(--police-titre); letter-spacing: 0.08em; }
.m1-hab-v1 .m1-answer { border: 1px solid var(--v1-filet); border-radius: 4px; color: var(--noir); background: #ffffff; }
.m1-hab-v1 .m1-answers a .m1-letter, .m1-hab-v1 .m1-answer .m1-letter { background: var(--v1-fond); color: var(--v1-bleu); font-family: var(--police-titre); }
.m1-hab-v1 .m1-answer:not(:disabled):hover { background: var(--v1-bleu-doux); border-color: var(--v1-bleu); }
.m1-hab-v1 .m1-answer:focus-visible { outline: 2px solid var(--v1-bleu); outline-offset: 2px; }
.m1-hab-v1 .m1-quiz-result { border-radius: 4px; }

/* ---------------------------------------------------------------------------
   9. TRÉSOR — aplat bleu, texte blanc
   ------------------------------------------------------------------------ */
.m1-hab-v1 .m1-treasure { background: var(--v1-bleu); color: #ffffff; border: 0; border-radius: 4px; box-shadow: none; }
.m1-hab-v1 .m1-treasure-tag { color: #ffffff; }