/* Bibliothèque MGL - sources lisibles, indépendante des données métier. */
:root {
    --mgl_couleur_principale: #1f9d5c;
    --mgl_couleur_action: #177b49;
    --mgl_couleur_action_survol: #12653b;
    --mgl_fond: #f4f6f3;
    --mgl_surface: #ffffff;
    --mgl_fond_fonce: #0e1913;
    --mgl_texte: #17261e;
    --mgl_texte_secondaire: #637168;
    --mgl_bordure: #dfe6df;
    --mgl_accent_doux: #eaf4ed;
    --mgl_espace_petit: .75rem;
    --mgl_espace_moyen: 1.5rem;
    --mgl_espace_grand: 2.5rem;
    --mgl_rayon_carte: 18px;
    --mgl_rayon_bouton: 9px;
    --mgl_largeur_large: 40rem;
    --mgl_largeur_moyenne: 26rem;
    --mgl_largeur_etroite: 18rem;
    --mgl_largeur_trame: 1320px;
}
.mgl_interface, .mgl_interface *, .mgl_interface *::before, .mgl_interface *::after { box-sizing: border-box; }
.mgl_interface { margin: 0; background: var(--mgl_fond); color: var(--mgl_texte); font: 15px/1.6 "Segoe UI", Arial, sans-serif; }
.mgl_interface h1, .mgl_interface h2, .mgl_interface h3, .mgl_interface p { margin: 0; }
.mgl_interface h1 { font-size: clamp(2rem, 3vw, 2.65rem); line-height: 1.15; letter-spacing: -.055em; font-weight: 720; }
.mgl_interface h2 { font-size: 1.08rem; line-height: 1.4; letter-spacing: -.025em; }
.mgl_interface h3 { font-size: 1.02rem; line-height: 1.4; }
.mgl_interface p + p { margin-top: .7rem; }
.mgl_interface button, .mgl_interface input, .mgl_interface select, .mgl_interface textarea { font: inherit; }
.mgl_interface button, .mgl_interface a { -webkit-tap-highlight-color: transparent; }
.mgl_interface button { cursor: pointer; }
.mgl_interface a { color: inherit; }
.mgl_interface img { display: block; max-width: 100%; }
.mgl_interface [hidden] { display: none !important; }
.mgl_interface :focus-visible { outline: 3px solid var(--mgl_couleur_principale); outline-offset: 4px; }
.mgl_icone { width: 21px; height: 21px; flex: 0 0 auto; vertical-align: middle; }
.mgl_separateur { width: 100%; border: 0; border-top: 1px solid var(--mgl_bordure); margin: 8px 0; }
.mgl_trame { width: 100%; max-width: var(--mgl_largeur_trame); padding: 40px; margin-inline: auto; }
.mgl_trame_compacte { max-width: 920px; }
.mgl_grille { display: grid; gap: 20px; align-items: stretch; min-width: 0; }
.mgl_grille > * { min-width: 0; }
.mgl_grille_deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mgl_grille_trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mgl_grille_quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mgl_grille_deux_tiers { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.mgl_carte { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px; border: 1px solid var(--mgl_bordure); border-radius: var(--mgl_rayon_carte); background: var(--mgl_surface); color: var(--mgl_texte); }
.mgl_carte_claire { background: #fff; color: #17261e; }
.mgl_carte_foncee { --mgl_texte_secondaire: #b4c4ba; --mgl_bordure: #3e5044; background: var(--mgl_fond_fonce); color: #fff; border-color: var(--mgl_fond_fonce); }
.mgl_carte_coloree { --mgl_texte_secondaire: #e0eee5; --mgl_bordure: #93bea5; background: #216440; color: #fff; border-color: #216440; }
.mgl_carte_pleine_largeur { width: 100%; grid-column: 1 / -1; }
.mgl_carte_large { width: var(--mgl_largeur_large); max-width: 100%; }
.mgl_carte_moyenne { width: var(--mgl_largeur_moyenne); max-width: 100%; }
.mgl_carte_etroite { width: var(--mgl_largeur_etroite); max-width: 100%; }
.mgl_carte_entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mgl_carte_entete .mgl_surtitre { margin-bottom: 5px; }
.mgl_carte_pied { margin-top: auto; padding-top: 7px; }
.mgl_carte_avec_image { padding: 0; overflow: hidden; gap: 0; }
.mgl_image_carte { width: 100%; aspect-ratio: 600 / 340; object-fit: cover; }
.mgl_lien_image_carte { display: block; flex-shrink: 0; }
.mgl_lien_image_carte:focus-visible { outline-offset: -4px; }
.mgl_carte_corps { display: flex; flex-direction: column; gap: 12px; padding: 22px; flex: 1; }
.mgl_carte_image_gauche, .mgl_carte_image_droite { flex-direction: row; }
.mgl_carte_image_gauche > .mgl_image_carte, .mgl_carte_image_droite > .mgl_image_carte { width: 38%; align-self: stretch; aspect-ratio: auto; }
.mgl_carte_image_droite > .mgl_image_carte { order: 2; }
.mgl_carte_image_fond { --mgl_texte_secondaire: #e0eee5; position: relative; overflow: hidden; min-height: 240px; justify-content: end; isolation: isolate; color: #fff; }
.mgl_carte_image_fond > .mgl_image_carte { position: absolute; inset: 0; height: 100%; z-index: -2; }
.mgl_carte_image_fond::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0e1913ee, #0e191338); z-index: -1; }
.mgl_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.mgl_bouton { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; padding: 11px 16px; border: 1px solid transparent; border-radius: var(--mgl_rayon_bouton); font-size: .85rem; line-height: 1.4; font-weight: 650; text-decoration: none; text-align: center; transition: background .15s, border-color .15s; }
.mgl_bouton_colore { background: var(--mgl_couleur_action); color: #fff !important; }
.mgl_bouton_colore:hover { background: var(--mgl_couleur_action_survol); }
.mgl_bouton_fonce { background: #15241b; color: #fff !important; }
.mgl_bouton_fonce:hover { background: #2c4334; }
.mgl_bouton_clair { background: #edf6ef; color: #145330 !important; }
.mgl_bouton_clair:hover { background: #dbeee0; }
.mgl_bouton_contour { background: transparent; color: inherit; border-color: var(--mgl_bordure); }
.mgl_bouton_contour:hover { border-color: currentColor; }
.mgl_bouton_petit { min-height: 36px; padding: 7px 12px; font-size: .8rem; }
.mgl_bouton_grand { min-height: 52px; padding: 14px 22px; }
.mgl_bouton_plein { width: 100%; }
.mgl_bouton:disabled, .mgl_bouton[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }
.mgl_bouton[aria-busy="true"]::before { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mgl_rotation 1s linear infinite; }
@keyframes mgl_rotation { to { transform: rotate(360deg); } }
.mgl_bouton_icone { display: inline-flex; align-items: center; justify-content: center; padding: 10px; min-width: 44px; min-height: 44px; border: 1px solid var(--mgl_bordure); border-radius: 9px; background: transparent; color: inherit; }
.mgl_lien { display: inline-flex; align-items: center; gap: 6px; color: var(--mgl_couleur_action) !important; font-size: .84rem; font-weight: 650; text-underline-offset: 4px; }
.mgl_lien .mgl_icone { width: 16px; }
.mgl_texte_secondaire { color: var(--mgl_texte_secondaire); }
.mgl_texte_vert { color: var(--mgl_couleur_action); }
.mgl_petit_texte { font-size: .82rem; line-height: 1.6; }
.mgl_surtitre { font-size: .65rem; line-height: 1.5; letter-spacing: .12em; font-weight: 700; color: var(--mgl_texte_secondaire); }
.mgl_badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 30px; background: #eaf4ed; color: #17683d; font-size: .69rem; font-weight: 650; }
.mgl_badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mgl_separation { border-top: 1px solid var(--mgl_bordure); width: 100%; }
.mgl_espace_haut { margin-top: var(--mgl_espace_moyen); }
.mgl_espace_petit { margin-top: var(--mgl_espace_petit); }
.mgl_section { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; scroll-margin-top: 65px; }
.mgl_table_defilante { width: 100%; overflow-x: auto; }
.mgl_table { width: 100%; border-collapse: collapse; text-align: left; font-size: .86rem; }
.mgl_table th, .mgl_table td { padding: 14px 12px; border-bottom: 1px solid var(--mgl_bordure); white-space: nowrap; }
.mgl_table th { color: var(--mgl_texte_secondaire); font-size: .75rem; font-weight: 600; }
.mgl_message { border-left: 3px solid var(--mgl_couleur_principale); background: var(--mgl_accent_doux); padding: 14px 18px; border-radius: 0 8px 8px 0; }
.mgl_etat_vide { padding: 30px; border: 1px dashed var(--mgl_bordure); border-radius: 12px; text-align: center; color: var(--mgl_texte_secondaire); }
.mgl_champs_ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mgl_champ { display: grid; gap: 6px; min-width: 0; }
.mgl_champ label { font-size: .85rem; font-weight: 600; }
.mgl_champ input, .mgl_champ select, .mgl_champ textarea { width: 100%; min-width: 0; background: #fff; color: #17261e; border: 1px solid #b9c7bd; padding: 11px 12px; border-radius: 8px; }
.mgl_champ_erreur { color: #a43225; font-size: .8rem; }
.mgl_dialogue { width: min(530px, calc(100% - 32px)); max-height: 85dvh; overflow-y: auto; padding: 28px; border: 1px solid var(--mgl_bordure); border-radius: 20px; background: #fff; color: var(--mgl_texte); box-shadow: 0 24px 100px #071b2340; }
.mgl_dialogue::backdrop { background: #071a12a8; }
.mgl_dialogue_entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mgl_dialogue h2 { font-size: 1.6rem; margin-bottom: 14px; }
.mgl_dialogue p { margin-bottom: 10px; }
.mgl_evitement { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px; background: #fff; color: #17261e; }
.mgl_evitement:focus { top: 10px; }
.mgl_exemple_code { display: block; padding: 12px 15px; background: #edf1ec; color: #334c3b; border-radius: 8px; font-size: .76rem; overflow-wrap: anywhere; }
@media (max-width: 1150px) {
    .mgl_grille_quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgl_grille_trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgl_grille_trois > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .mgl_grille_deux_tiers { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .mgl_trame { padding: 25px 18px; }
    .mgl_carte { padding: 20px; }
    .mgl_carte_avec_image { padding: 0; }
    .mgl_grille_deux, .mgl_grille_trois, .mgl_grille_quatre, .mgl_grille_deux_tiers, .mgl_champs_ligne { grid-template-columns: minmax(0, 1fr); }
    .mgl_carte_image_gauche, .mgl_carte_image_droite { flex-direction: column; }
    .mgl_carte_image_gauche > .mgl_image_carte, .mgl_carte_image_droite > .mgl_image_carte { width: 100%; aspect-ratio: 600 / 340; order: 0; }
    .mgl_dialogue { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .mgl_interface *, .mgl_interface *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}