/* ============================================================================
   QRAvenue — Habillage « INSA Lyon » (compte.com_habillage = 'insa')
   ----------------------------------------------------------------------------
   Charte graphique écoles INSA, janvier 2025 :
     - rouge corporate Pantone 1795 C  #e52713 (aplats, boutons, blocs)
     - gris Pantone 425 C              #4f4d50 (texte, surfaces sombres)
     - rose #f5adaa, orange #f69f1d, poudré #f8f0ec (fond)
     - Source Serif (titres, lecture) + League Spartan (repères en capitales)
     - motifs : grille de croix, faisceaux de lignes, blocs en escalier,
       angles droits.
   Chargée APRÈS modele-1.css et charte.php (cf. _php/habillage.php).

   ACCESSIBILITÉ : #e52713 fait 4,5:1 sur blanc mais 4,0:1 sur le poudré.
   L'accent employé en TEXTE (--or) est donc le rouge assombri #c8200f
   (5,1:1 sur poudré) ; le rouge exact de la charte est réservé aux aplats
   (--insa-rouge). Sur les surfaces sombres, l'accent devient blanc (un rouge
   sur gris foncé ne se lit pas).
   ========================================================================== */

:root {
  --insa-rouge: #e52713;
  --insa-rouge-texte: #c8200f;
  --insa-rose: #f5adaa;
  --insa-orange: #f69f1d;
  --insa-poudre: #f8f0ec;
  --insa-poudre-fonce: #ecdcd4;
  --insa-gris: #4f4d50;

  --noir: #4f4d50;
  --or: #c8200f;
  --or-clair: #f5adaa;
  --or-sombre: #a81a0b;
  --beige: #f8f0ec;
  --ivoire: #fdf9f7;
  --gris: #6b6b6b;               /* 4,7:1 sur poudré */
  --gris-clair: #e5d6ce;
  --cadre: #f1e5df;
  --texte: #4f4d50;
  /* Information : jamais le rouge de la marque */
  --erreur: #3b4395;             /* gamme B */
  --succes: #006755;             /* gamme L */

  --police-titre: 'Source Serif 4', Georgia, serif;
  --police-lecture: 'Source Serif 4', Georgia, serif;
  --police-ui: 'Source Serif 4', Georgia, serif;
  --police-repere: 'League Spartan', Arial, sans-serif;

  --insa-croix-blanche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 7.5v7M7.5 11h7' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  --insa-croix-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M11 7.5v7M7.5 11h7' stroke='%23f5adaa' stroke-width='1.2'/%3E%3C/svg%3E");
  --insa-faisceau-rouge: repeating-linear-gradient(90deg, #e52713 0 1px, transparent 1px 6px);
  --insa-faisceau-blanc: repeating-linear-gradient(90deg, rgba(255,255,255,0.8) 0 1px, transparent 1px 7px);
}

/* ---------------------------------------------------------------------------
   1. ANGLES DROITS — la charte est orthogonale. Les repères de carte, la
   pastille de position et les avatars gardent leur forme.
   ------------------------------------------------------------------------ */
.m1-hab-insa *:not(.leaflet-container *):not(.m1-userpin):not(.m1-lb-avatar):not(.m1-compte-avatar):not(.m1-photo-apercu) {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHIE — Source Serif partout, League Spartan pour les repères.
   ------------------------------------------------------------------------ */
.m1-hab-insa :is(h1, h2, h3, h4) { font-weight: 600; letter-spacing: 0; }
.m1-hab-insa :is(h1, h2, h3, h4) em { font-style: normal; font-weight: 400; }

/* « Vos impressions. » et « Pour poursuivre la visite. » : le Modèle 1 les
   écrit tout en accent, avec un mot en accent sombre — deux rouges et deux
   graisses dans le même titre. Ramenés au titre de section de l'habillage :
   texte en gris, mot en <em> en rouge (retour INSA du 2026-10-04). */
.m1-hab-insa :is(.m1-comments-h3, .m1-related h3) { color: var(--texte); }
.m1-hab-insa :is(.m1-comments-h3, .m1-related h3) em { color: var(--or); }

.m1-hab-insa :is(
  .m1-kicker, .m1-chap, .m1-ac-lbl, .m1-quiz-meta, .m1-quiz-badge, .m1-cta-btn,
  .m1-nav-item span, .m1-field label, .m1-pb-info, .m1-score-lbl, .m1-score-unit,
  .m1-treasure-tag, .m1-treasure-code, .m1-verdict-tag, .m1-verdict-score,
  .m1-audio-label, .m1-langbar-label, .m1-langbar-chip, .m1-result-head,
  .m1-gain-lbl, .m1-gain-val, .m1-chip, .m1-pill, .m1-count, .m1-n, .m1-letter,
  .m1-consent-btn, .m1-code, .m1-lb-rank, .m1-lb-pts, .m1-dates, .m1-btn-deconnexion,
  .m1-lead-submit, .m1-ville-chip
) {
  font-family: var(--police-repere);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   3. CADRE — fond poudré ; sur grand écran, la colonne se pose sur un poudré
   marqué de la grille de croix au lieu de la surface dorée du Modèle 1.
   ------------------------------------------------------------------------ */
body.m1-hab-insa,
.m1-hab-insa .m1-frame { background: var(--cadre); }
.m1-hab-insa .m1-mobile { background: var(--insa-poudre); }
@media (min-width: 768px) {
  .m1-hab-insa .m1-frame {
    background: var(--cadre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 18v8M18 22h8' stroke='%23e52713' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E");
    background-attachment: fixed;
  }
  .m1-hab-insa .m1-mobile {
    box-shadow: 0 24px 60px -20px rgba(79, 77, 80, 0.35);
    border-left: 0; border-right: 0;
  }
}

/* ---------------------------------------------------------------------------
   4. BARRE D'EN-TÊTE — blanche, logo « INSA » au centre. Sur la fiche, elle
   reste transparente au-dessus de la photo : le logo développé est alors dans
   son cartouche blanc (un seul logo à l'écran).
   ------------------------------------------------------------------------ */
.m1-hab-insa .m1-app {
  background: #fff;
  border-bottom: 1px solid var(--insa-poudre-fonce);
  padding: 10px 14px;
}
.m1-hab-insa .m1-app :is(.m1-back, .m1-pill) {
  background: var(--insa-poudre);
  backdrop-filter: none;
  color: var(--insa-gris);
}
.m1-hab-insa .m1-app :is(.m1-back, .m1-pill):hover { background: var(--insa-poudre-fonce); }
.m1-hab-insa .m1-hab-marque { display: block; height: 30px; width: auto; }

.m1-hab-insa .m1-mobile:has(.m1-hab-cartouche) .m1-app {
  background: linear-gradient(to bottom, rgba(0,0,0,0.38), transparent);
  border-bottom: 0;
}
.m1-hab-insa .m1-mobile:has(.m1-hab-cartouche) .m1-app :is(.m1-back, .m1-pill) {
  background: rgba(79, 77, 80, 0.72);
  backdrop-filter: blur(8px);
  color: #fff;
}
.m1-hab-insa .m1-mobile:has(.m1-hab-cartouche) .m1-hab-marque { visibility: hidden; }

/* ---------------------------------------------------------------------------
   5. HÉRO DE LA FICHE — photo, logo en cartouche blanc, titre sur un bloc
   rouge en escalier (couverture de la charte), marche rose et faisceau.
   ------------------------------------------------------------------------ */
.m1-hab-insa .m1-hero:not(.m1-hero-compact) { height: 78vh; min-height: 440px; }
.m1-hab-insa .m1-hero:not(.m1-hero-compact)::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent 30%);
}
.m1-hab-insa .m1-hero:not(.m1-hero-compact)::before {
  content: '';
  position: absolute; right: 0; bottom: 0; z-index: 11;
  width: 16%; height: 200px;
  background:
    linear-gradient(var(--insa-rose), var(--insa-rose)) right bottom / 100% 64px no-repeat,
    var(--insa-faisceau-blanc) left top / 48px 120px no-repeat;
}
.m1-hab-cartouche {
  position: absolute; top: 76px; left: 16px; z-index: 12;
  display: block; background: #fff; padding: 10px 12px;
}
.m1-hab-cartouche img { display: block; width: 150px; height: auto; }

.m1-hab-insa .m1-hero:not(.m1-hero-compact) .m1-hero-content {
  bottom: 0; left: 0; right: auto;
  width: 84%;
  padding: 20px 22px 22px;
  background: var(--insa-rouge);
}
.m1-hab-insa .m1-hero:not(.m1-hero-compact) .m1-hero-content h1 {
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.05;
  margin: 10px 0 8px;
}
.m1-hab-insa .m1-hero-content h1 em { color: #fff; display: inline; }
.m1-hab-insa .m1-hero:not(.m1-hero-compact) .m1-hero-content :is(.m1-dates, .m1-role) { color: #fff; }
.m1-hab-insa .m1-dates { font-weight: 500; letter-spacing: 3px; font-size: 14px; margin-bottom: 6px; }

/* Surtitre : capitales blanches précédées d'un faisceau */
.m1-hab-insa .m1-kicker { color: #fff; letter-spacing: 3px; font-size: 11px; }
.m1-hab-insa .m1-kicker::before { width: 24px; height: 11px; background: var(--insa-faisceau-blanc); }

@media (min-width: 1024px) {
  .m1-hab-insa .m1-detail-visuel .m1-hero { height: 100vh; }
  .m1-hab-cartouche { top: 84px; left: 24px; }
  .m1-hab-cartouche img { width: 180px; }
}

/* Héros compacts (carte, jeu, enquête, sport, parcours) : aplat rouge et
   grille de croix ; avec une photo de thème, un voile gris la rend lisible. */
.m1-hab-insa .m1-hero.m1-hero-compact {
  background-color: var(--insa-rouge);
  padding: 96px 22px 26px;
  overflow: hidden;
}
.m1-hab-insa .m1-hero.m1-hero-compact:not(.m1-hero-game-photo)::after {
  display: block; content: '';
  position: absolute; top: 72px; right: 14px; left: auto; bottom: auto;
  width: 110px; height: 88px;
  background: var(--insa-croix-blanche);
  opacity: 0.85;
}
.m1-hab-insa .m1-hero-compact .m1-hero-content h1 { font-size: 34px; font-weight: 600; }
.m1-hab-insa .m1-hero-compact .m1-role { color: rgba(255,255,255,0.92); }
.m1-hab-insa .m1-hero-game.m1-hero-game-photo::after {
  background: linear-gradient(180deg, rgba(79,77,80,0.45), rgba(79,77,80,0.82));
}
.m1-hab-insa .m1-hero-game.m1-hero-game-photo { border-bottom: 8px solid var(--insa-rouge); }

/* Rail social sur la photo : pavés gris translucides, « j'aime » en rouge */
.m1-hab-insa .m1-social-rail .m1-sb { background: rgba(79, 77, 80, 0.72); color: #fff; }
.m1-hab-insa .m1-social-rail .m1-sb:hover { background: var(--insa-rouge); color: #fff; }
.m1-hab-insa .m1-social-rail .m1-liked,
.m1-hab-insa .m1-social-rail .m1-liked i { background: var(--insa-rouge); color: #fff; }

/* ---------------------------------------------------------------------------
   6. SURFACES SOMBRES — l'accent y devient blanc (rouge sur gris illisible).
   ------------------------------------------------------------------------ */
.m1-hab-insa :is(.m1-action-card, .m1-prog-card, .m1-consent, .m1-verdict-lose) {
  --or: #fff;
  --or-clair: #fff;
  --or-sombre: var(--insa-poudre-fonce);
}
.m1-hab-insa :is(.m1-action-card, .m1-prog-card) {
  background: var(--insa-gris);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.m1-hab-insa :is(.m1-action-card, .m1-prog-card)::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 34px; height: 100%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 1px, transparent 1px 6px);
  pointer-events: none;
}
.m1-hab-insa :is(.m1-action-card, .m1-prog-card) .m1-cta-btn { background: #fff; color: var(--insa-gris); }
.m1-hab-insa :is(.m1-action-card, .m1-prog-card) .m1-cta-btn:hover { background: var(--insa-poudre); color: var(--insa-gris); }
.m1-hab-insa :is(.m1-action-card, .m1-prog-card) .m1-cta-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); }
.m1-hab-insa .m1-consent-link { color: #fff; }
.m1-hab-insa .m1-consent-accept { background: var(--insa-rouge); color: #fff; }
.m1-hab-insa .m1-consent-accept:hover { background: var(--insa-rouge-texte); }

/* ---------------------------------------------------------------------------
   7. CARTE AUDIO ET LANGUES
   ------------------------------------------------------------------------ */
.m1-hab-insa .m1-audio-card {
  background: #fff;
  color: var(--insa-gris);
  box-shadow: none;
  border-top: 4px solid var(--insa-rouge);
  margin: 22px 20px 10px;
  padding: 16px 18px;
}
.m1-hab-insa .m1-audio-card .m1-big-play { background: var(--insa-rouge); color: #fff; }
.m1-hab-insa .m1-audio-label { color: var(--insa-rouge-texte); letter-spacing: 2.4px; font-size: 10.5px; }
.m1-hab-insa .m1-audio-title { color: var(--insa-gris); font-weight: 600; }
.m1-hab-insa .m1-audio-duration { color: var(--gris); }

.m1-hab-insa .m1-langbar { margin: 4px 20px 8px; }
.m1-hab-insa .m1-langbar-chips { gap: 0; }
.m1-hab-insa .m1-langbar-chip { margin-left: -1px; letter-spacing: 2px; font-weight: 600; }
.m1-hab-insa .m1-langbar-chip.is-current { background: var(--insa-gris); color: #fff; border-color: var(--insa-gris); position: relative; }
.m1-hab-insa .m1-langbar-chip:hover { color: var(--insa-rouge-texte); border-color: var(--insa-rouge); }
.m1-hab-insa .m1-lang-list a .m1-code { background: var(--insa-gris); color: #fff; }

/* ---------------------------------------------------------------------------
   8. LECTURE — repère en capitales précédé d'un faisceau, lettrine rouge.
   ------------------------------------------------------------------------ */
.m1-hab-insa .m1-chap {
  display: flex; align-items: center; gap: 10px;
  color: var(--insa-rouge-texte);
  letter-spacing: 3px;
}
.m1-hab-insa .m1-chap::before {
  content: ''; flex: 0 0 22px; height: 10px;
  background: var(--insa-faisceau-rouge);
}
.m1-hab-insa .m1-article h2 { font-weight: 600; }
.m1-hab-insa .m1-article p:first-of-type:first-letter { font-weight: 400; color: var(--insa-rouge); }

/* ---------------------------------------------------------------------------
   9. BOUTONS
   ------------------------------------------------------------------------ */
.m1-hab-insa .m1-cta-btn {
  background: var(--insa-rouge);
  color: #fff;
  letter-spacing: 2.4px;
  padding: 14px 22px 12px;
}
.m1-hab-insa .m1-cta-btn:hover { background: var(--insa-rouge-texte); color: #fff; }
.m1-hab-insa .m1-cta-btn.m1-cta-ghost { background: transparent; color: var(--insa-gris); border: 1px solid var(--insa-gris); }
.m1-hab-insa .m1-cta-btn.m1-cta-ghost:hover { background: var(--insa-poudre-fonce); }
.m1-hab-insa .m1-leaderboard .m1-lb-tout { color: var(--insa-gris); border-color: var(--insa-gris); }

.m1-hab-insa .m1-chip.m1-active { background: var(--insa-gris); border-color: var(--insa-gris); }
.m1-hab-insa .m1-field input:focus { border-color: var(--insa-rouge); }

/* ---------------------------------------------------------------------------
   10. BARRE DE NAVIGATION — blanche, entrée active en rouge sous un filet.
   ------------------------------------------------------------------------ */
.m1-hab-insa .m1-bottom-nav {
  background: #fff;
  backdrop-filter: none;
  border-top: 1px solid var(--insa-poudre-fonce);
  box-shadow: 0 -6px 18px -12px rgba(79, 77, 80, 0.4);
}
.m1-hab-insa .m1-bottom-nav :is(a, .m1-nav-item) { color: var(--insa-gris); position: relative; }
.m1-hab-insa .m1-bottom-nav :is(a.m1-active, .m1-nav-item.m1-active) { color: var(--insa-rouge-texte); }
.m1-hab-insa .m1-bottom-nav :is(a.m1-active, .m1-nav-item.m1-active)::before {
  content: ''; position: absolute; top: -10px; left: 50%;
  width: 24px; height: 3px; margin-left: -12px;
  background: var(--insa-rouge);
}
.m1-hab-insa .m1-bottom-nav .m1-nav-item span { font-weight: 500; letter-spacing: 1px; }

/* ---------------------------------------------------------------------------
   11. JEU — progression, question (grille de croix), réponses, résultat.
   ------------------------------------------------------------------------ */
.m1-hab-insa .m1-pb-bar { height: 10px; background: var(--insa-poudre-fonce); }
.m1-hab-insa .m1-pb-bar > div { background: var(--insa-rouge); }

.m1-hab-insa .m1-quiz { position: relative; overflow: hidden; border-color: var(--insa-poudre-fonce); }
.m1-hab-insa .m1-quiz:not(.m1-quiz-result)::before {
  content: ''; position: absolute; top: 50px; right: 6px;
  width: 66px; height: 66px;
  background: var(--insa-croix-rose);
  pointer-events: none;
}
.m1-hab-insa .m1-quiz > * { position: relative; }
.m1-hab-insa .m1-quiz-meta { color: var(--insa-rouge-texte); }
.m1-hab-insa .m1-quiz-badge { background: var(--insa-rouge); color: #fff; }
.m1-hab-insa .m1-quiz h2 { font-weight: 600; max-width: 78%; }

.m1-hab-insa .m1-answer { padding: 0 16px 0 0; gap: 14px; min-height: 48px; border-width: 1px; font-size: 17px; }
.m1-hab-insa .m1-answer .m1-letter,
.m1-hab-insa .m1-answers a .m1-letter {
  flex: 0 0 46px; width: 46px; height: auto; align-self: stretch;
  background: var(--insa-poudre);
  color: var(--insa-gris);
  font-size: 14px; letter-spacing: 1px;
}
.m1-hab-insa .m1-answer:not(:disabled):hover { border-color: var(--insa-rouge); background: #fff; }
.m1-hab-insa .m1-answer:not(:disabled):hover .m1-letter { background: var(--insa-rouge); color: #fff; }
.m1-hab-insa .m1-answer:focus-visible { outline: 3px solid var(--insa-rouge); outline-offset: 2px; }

/* Résultat : un filet épais à gauche, vert ou bleu — doublé de l'icône et
   du libellé, jamais la couleur seule. */
.m1-hab-insa .m1-quiz-result { border-left-width: 8px; }
.m1-hab-insa .m1-quiz-result.m1-result-ok { border-color: var(--succes); }
.m1-hab-insa .m1-quiz-result.m1-result-ko { border-color: var(--erreur); }
.m1-hab-insa .m1-score-cell { border-color: var(--insa-poudre-fonce); }
.m1-hab-insa .m1-score-cell strong { font-weight: 600; color: var(--insa-gris); }
.m1-hab-insa .m1-score-unit { color: var(--insa-rouge-texte); }

/* ---------------------------------------------------------------------------
   12. TRÉSOR ET VICTOIRE — plein aplat rouge, grille de croix, marches.
   ------------------------------------------------------------------------ */
.m1-hab-insa .m1-treasure {
  position: relative; overflow: hidden;
  background: var(--insa-rouge);
  color: #fff;
  padding: 30px 22px 84px;
  text-align: left;
}
.m1-hab-insa .m1-treasure::before {
  content: ''; position: absolute; top: 62px; right: 14px;
  width: 88px; height: 88px;
  background: var(--insa-croix-blanche);
  opacity: 0.9;
}
.m1-hab-insa .m1-treasure::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  width: 132px; height: 84px;
  background:
    linear-gradient(var(--insa-poudre), var(--insa-poudre)) right bottom / 84px 84px no-repeat,
    linear-gradient(var(--insa-rose), var(--insa-rose)) left bottom / 48px 44px no-repeat;
}
.m1-hab-insa .m1-treasure > * { position: relative; }
.m1-hab-insa .m1-treasure-tag { color: #fff; letter-spacing: 3px; }
.m1-hab-insa .m1-treasure-code {
  display: inline-block;
  margin: 14px 0 14px;
  padding: 12px 18px 8px;
  background: #fff;
  color: var(--insa-gris);
  font-size: 36px; font-weight: 700; letter-spacing: 6px;
}
.m1-hab-insa .m1-treasure-where,
.m1-hab-insa .m1-treasure-where strong,
.m1-hab-insa .m1-treasure-msg { color: #fff; }
.m1-hab-insa .m1-treasure-where { max-width: 78%; }

.m1-hab-insa .m1-verdict { text-align: left; }
.m1-hab-insa .m1-verdict-win {
  position: relative; overflow: hidden;
  background: var(--insa-rouge);
  --or-clair: #fff;
}
.m1-hab-insa .m1-verdict-win::before {
  content: ''; position: absolute; top: 12px; right: 12px;
  width: 88px; height: 88px;
  background: var(--insa-croix-blanche);
}
.m1-hab-insa .m1-verdict-win > * { position: relative; }
.m1-hab-insa .m1-verdict h2 { font-weight: 600; }

/* Enquête : l'accent propre à l'intrigue (--clu, choisi par intrigue en
   admin) est conservé ; seule l'épaisseur du filet suit la charte. */
.m1-hab-insa .m1-enq-intro { border-left-width: 6px; }

/* ---------------------------------------------------------------------------
   13. LISTES, CARTES ET FORMULAIRES
   ------------------------------------------------------------------------ */
.m1-hab-insa :is(.m1-list-card, .m1-lead-form, .m1-indices, .m1-indice-card, .m1-doc-meta) {
  border-color: var(--insa-poudre-fonce);
}
.m1-hab-insa .m1-list-card:hover { border-color: var(--insa-rouge); }
.m1-hab-insa .m1-list-card.m1-done .m1-list-ico { background: var(--insa-rouge); color: #fff; }
.m1-hab-insa .m1-lb-me { border-color: var(--insa-rouge); }

/* ---------------------------------------------------------------------------
   14. CARROUSEL — flèches carrées blanches, chevron rouge ; pastilles rouges.
   ------------------------------------------------------------------------ */
.m1-hab-insa .m1-carousel-arrow { color: var(--insa-rouge-texte); box-shadow: 0 2px 10px rgba(79, 77, 80, 0.2); }
.m1-hab-insa .m1-carousel-arrow:hover { background: var(--insa-rouge); color: #fff; }
.m1-hab-insa .m1-carousel-dots .m1-dot.m1-active { background: var(--insa-rouge); }
.m1-hab-insa .m1-carousel-item .m1-cap { font-style: normal; background: rgba(79, 77, 80, 0.82); backdrop-filter: none; }