/* =====================================================================
   Charte d'interface PrevAdmin / appli-du, appliquée à Bootstrap 5
   Validée le 11 novembre 2026 (maquettes « Charte d'interface »).

   PRINCIPE IMPORTANT — les « couches CSS » (@layer)
   ------------------------------------------------
   Bootstrap est chargé dans une couche nommée « bootstrap », et nos
   réglages dans une couche « charte ». Une règle placée dans une couche
   perd TOUJOURS face à une règle hors couche. Or app.css (les styles
   historiques d'appli-du) n'est dans aucune couche :
     -> app.css garde toujours le dernier mot ;
     -> Bootstrap ne peut rien casser dans les écrans existants ;
     -> les nouveaux écrans peuvent utiliser les classes Bootstrap
        (btn, card, row, col, badge, progress, modal…) avec nos couleurs.
   Ordre de priorité, du plus faible au plus fort :
     bootstrap  <  charte  <  app.css
   ===================================================================== */

/* 1) On déclare l'ordre des couches une fois pour toutes. */
@layer bootstrap, charte;

/* 2) On charge Bootstrap DANS la couche « bootstrap ».
      Le fichier est téléchargé par « php bin/console importmap:install »
      (entrée « bootstrap/dist/css/bootstrap.min.css » de importmap.php). */
@import url("../vendor/bootstrap/dist/css/bootstrap.min-z0zQt-h.css") layer(bootstrap);

/* 2 bis) Compatibilité avec les écrans existants.
   Bootstrap commence par un « Reboot » : il change l'apparence par défaut
   des balises simples (titres h1-h6, paragraphes, listes, tableaux, champs,
   libellés, code…). Les écrans d'appli-du, eux, comptent sur l'apparence
   par défaut du NAVIGATEUR. On rend donc ces balises au navigateur (valeur
   « revert ») sur toutes les pages… SAUF celles converties à Bootstrap.

   Comment convertir un écran : dans son gabarit Twig, ajouter
       {% block classe_body %}ecran-bootstrap{% endblock %}
   La page reçoit alors <body class="ecran-bootstrap"> et Bootstrap
   s'applique entièrement (Reboot compris).

   Détail technique : « :where(…) » ne compte pas dans la priorité des
   sélecteurs. Ces règles ont donc la même force que celles du Reboot et,
   placées après lui dans la même couche, elles l'emportent ; les classes
   des composants Bootstrap (.btn, .form-control…) restent plus fortes. */
@layer bootstrap {
    :where(body:not(.ecran-bootstrap)) :is(h1, h2, h3, h4, h5, h6) {
        margin: revert;
        font-size: revert;
        font-weight: revert;
        line-height: revert;
        color: revert;
    }
    :where(body:not(.ecran-bootstrap)) :is(p, ul, ol, dl, blockquote, figure, pre) { margin: revert; }
    :where(body:not(.ecran-bootstrap)) :is(ul, ol) { padding-left: revert; }
    :where(body:not(.ecran-bootstrap)) dt { font-weight: revert; }
    :where(body:not(.ecran-bootstrap)) dd { margin: revert; }
    :where(body:not(.ecran-bootstrap)) small { font-size: revert; }
    :where(body:not(.ecran-bootstrap)) hr { margin: revert; color: revert; border: revert; opacity: revert; }
    :where(body:not(.ecran-bootstrap)) :is(code, kbd, samp, pre) { font-size: revert; color: revert; }
    :where(body:not(.ecran-bootstrap)) :is(img, svg) { vertical-align: revert; }
    :where(body:not(.ecran-bootstrap)) table { caption-side: revert; border-collapse: revert; }
    :where(body:not(.ecran-bootstrap)) th { text-align: revert; }
    :where(body:not(.ecran-bootstrap)) :is(thead, tbody, tfoot, tr, td, th) { border: revert; }
    :where(body:not(.ecran-bootstrap)) label { display: revert; }
    :where(body:not(.ecran-bootstrap)) button { border-radius: revert; }
    :where(body:not(.ecran-bootstrap)) :is(input, button, select, optgroup, textarea) {
        margin: revert;
        font-family: revert;
        font-size: revert;
        line-height: revert;
    }
    :where(body:not(.ecran-bootstrap)) textarea { resize: revert; }
    :where(body:not(.ecran-bootstrap)) fieldset { min-width: revert; padding: revert; margin: revert; border: revert; }
    :where(body:not(.ecran-bootstrap)) legend { float: revert; width: revert; padding: revert; margin: revert; font-size: revert; line-height: revert; }
    :where(body:not(.ecran-bootstrap)) output { display: revert; }
    :where(body:not(.ecran-bootstrap)) iframe { border: revert; }
    :where(body:not(.ecran-bootstrap)) summary { display: revert; cursor: revert; }
    :where(body:not(.ecran-bootstrap)) progress { vertical-align: revert; }
    /* Champs de date (Chrome, Edge, Safari) : Bootstrap retire l'espacement
       interne des morceaux jour/mois/année. Une règle par morceau : un
       navigateur qui ne connaît pas l'un d'eux ignore seulement cette règle. */
    :where(body:not(.ecran-bootstrap)) ::-webkit-datetime-edit-fields-wrapper { padding: revert; }
    :where(body:not(.ecran-bootstrap)) ::-webkit-datetime-edit-text { padding: revert; }
    :where(body:not(.ecran-bootstrap)) ::-webkit-datetime-edit-minute { padding: revert; }
    :where(body:not(.ecran-bootstrap)) ::-webkit-datetime-edit-hour-field { padding: revert; }
    :where(body:not(.ecran-bootstrap)) ::-webkit-datetime-edit-day-field { padding: revert; }
    :where(body:not(.ecran-bootstrap)) ::-webkit-datetime-edit-month-field { padding: revert; }
    :where(body:not(.ecran-bootstrap)) ::-webkit-datetime-edit-year-field { padding: revert; }
}

/* 3) Nos réglages, dans la couche « charte ». */
@layer charte {

    /* ---- 3.1 Couleurs et valeurs de base de Bootstrap ----
       Bootstrap lit ces variables partout (fonds, textes, liens, bordures).
       Chaque couleur existe aussi en version « rgb » (trois nombres) :
       Bootstrap s'en sert pour les transparences (ex. bg-primary bg-opacity-25). */
    :root {
        --bs-primary: #1F4E79;          /* bleu principal : actions, titres */
        --bs-primary-rgb: 31, 78, 121;
        --bs-info: #2E75B6;             /* bleu clair : liens, informations */
        --bs-info-rgb: 46, 117, 182;
        --bs-success: #3E8E2F;          /* vert : situation saine, terminé */
        --bs-success-rgb: 62, 142, 47;
        --bs-warning: #D9822B;          /* orange : vigilance, en retard, animateur */
        --bs-warning-rgb: 217, 130, 43;
        --bs-danger: #C0392B;           /* rouge : écart à réduire, suppression */
        --bs-danger-rgb: 192, 57, 43;

        --bs-body-bg: #F3F6FA;          /* fond des pages */
        --bs-body-bg-rgb: 243, 246, 250;
        --bs-body-color: #1E2A36;       /* texte courant */
        --bs-body-color-rgb: 30, 42, 54;
        --bs-secondary-color: #4F6B88;  /* texte doux (aides, légendes) */
        --bs-border-color: #DCE6F1;     /* bordures des cartes et tableaux */
        --bs-border-radius: 8px;        /* arrondi standard */
        --bs-border-radius-lg: 12px;    /* arrondi des cartes */

        --bs-link-color: #2E75B6;
        --bs-link-color-rgb: 46, 117, 182;
        --bs-link-hover-color: #1F4E79;
        --bs-link-hover-color-rgb: 31, 78, 121;

        /* Même police que les écrans existants : celle du système. */
        --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --bs-body-line-height: 1.5;

        /* Teintes claires utilisées par les alertes, badges et listes de Bootstrap
           (alert-warning, bg-success-subtle…) : fond pâle + texte foncé lisible. */
        --bs-primary-text-emphasis: #13324E;
        --bs-primary-bg-subtle: #E4EDF6;
        --bs-primary-border-subtle: #B9CBDE;
        --bs-info-text-emphasis: #1F5483;
        --bs-info-bg-subtle: #E4EDF6;
        --bs-info-border-subtle: #B9D3EC;
        --bs-success-text-emphasis: #2B6A20;
        --bs-success-bg-subtle: #E3F1DF;
        --bs-success-border-subtle: #B8DDB0;
        --bs-warning-text-emphasis: #8A4A0C;
        --bs-warning-bg-subtle: #FCEEDF;
        --bs-warning-border-subtle: #F2C99B;
        --bs-danger-text-emphasis: #9E2B20;
        --bs-danger-bg-subtle: #FBE9E7;
        --bs-danger-border-subtle: #F0B9B2;

        /* Halo bleu autour d'un élément sélectionné au clavier (accessibilité). */
        --bs-focus-ring-color: rgba(46, 117, 182, .35);

        /* ---- Couleurs propres à PrevAdmin (hors Bootstrap) ---- */
        --acteur-direction: #1F4E79;
        --acteur-copil: #2A7F80;
        --acteur-animateur: #D9822B;
        --acteur-salaries: #3E8E2F;
    }

    /* ---- 3.2 Boutons ----
       Les couleurs des boutons Bootstrap sont « figées » dans son fichier :
       il faut les redonner bouton par bouton. Hauteur mini 44 px = taille
       confortable au doigt sur téléphone (règle de la charte). */
    .btn {
        --bs-btn-font-weight: 700;
        --bs-btn-padding-y: .6rem;
        --bs-btn-padding-x: 1.1rem;
        min-height: 44px;
    }
    /* Les tailles « petit » et « grand » doivent être redonnées ici, sinon
       les marges de .btn ci-dessus (couche plus forte) les écraseraient. */
    .btn-sm {
        --bs-btn-padding-y: .3rem;
        --bs-btn-padding-x: .7rem;
        --bs-btn-font-size: .875rem;
        min-height: 0;
    }
    .btn-lg {
        --bs-btn-padding-y: .8rem;
        --bs-btn-padding-x: 1.4rem;
        --bs-btn-font-size: 1.125rem;
    }

    .btn-primary {
        --bs-btn-bg: #1F4E79;
        --bs-btn-border-color: #1F4E79;
        --bs-btn-hover-bg: #183F62;
        --bs-btn-hover-border-color: #183F62;
        --bs-btn-active-bg: #13324E;
        --bs-btn-active-border-color: #13324E;
        --bs-btn-disabled-bg: #1F4E79;
        --bs-btn-disabled-border-color: #1F4E79;
        --bs-btn-focus-shadow-rgb: 31, 78, 121;
    }
    .btn-outline-primary {
        --bs-btn-color: #1F4E79;
        --bs-btn-border-color: #1F4E79;
        --bs-btn-hover-color: #FFFFFF;
        --bs-btn-hover-bg: #1F4E79;
        --bs-btn-hover-border-color: #1F4E79;
        --bs-btn-active-color: #FFFFFF;
        --bs-btn-active-bg: #183F62;
        --bs-btn-active-border-color: #183F62;
        --bs-btn-disabled-color: #1F4E79;
        --bs-btn-disabled-border-color: #1F4E79;
        --bs-btn-focus-shadow-rgb: 31, 78, 121;
        --bs-btn-border-width: 2px;
    }
    .btn-info {
        --bs-btn-color: #FFFFFF;
        --bs-btn-bg: #2E75B6;
        --bs-btn-border-color: #2E75B6;
        --bs-btn-hover-color: #FFFFFF;
        --bs-btn-hover-bg: #26649C;
        --bs-btn-hover-border-color: #26649C;
        --bs-btn-active-color: #FFFFFF;
        --bs-btn-active-bg: #1F5483;
        --bs-btn-focus-shadow-rgb: 46, 117, 182;
    }
    /* Orange : le texte reste foncé (le blanc sur orange se lit mal). */
    .btn-warning {
        --bs-btn-color: #1E2A36;
        --bs-btn-bg: #D9822B;
        --bs-btn-border-color: #D9822B;
        --bs-btn-hover-color: #1E2A36;
        --bs-btn-hover-bg: #C57425;
        --bs-btn-hover-border-color: #C57425;
        --bs-btn-active-color: #1E2A36;
        --bs-btn-active-bg: #B0671F;
        --bs-btn-focus-shadow-rgb: 217, 130, 43;
    }
    /* Vert un peu plus foncé que #3E8E2F pour que le texte blanc reste
       lisible (contraste 5,3:1 au lieu de 4,1:1). Le vert de la charte
       reste utilisé pour les pastilles, icônes et graphiques. */
    .btn-success {
        --bs-btn-bg: #347A27;
        --bs-btn-border-color: #347A27;
        --bs-btn-hover-bg: #2B6A20;
        --bs-btn-hover-border-color: #2B6A20;
        --bs-btn-active-bg: #245A1B;
        --bs-btn-focus-shadow-rgb: 62, 142, 47;
    }
    .btn-danger {
        --bs-btn-bg: #C0392B;
        --bs-btn-border-color: #C0392B;
        --bs-btn-hover-bg: #A53125;
        --bs-btn-hover-border-color: #A53125;
        --bs-btn-active-bg: #8E2A20;
        --bs-btn-focus-shadow-rgb: 192, 57, 43;
    }

    /* ---- 3.3 Champs de formulaire : bordure et halo aux couleurs de la charte ---- */
    .form-control,
    .form-select {
        border-color: #B9CBDE;
        min-height: 44px;
    }
    .form-control:focus,
    .form-select:focus,
    .form-check-input:focus {
        border-color: #2E75B6;
        box-shadow: 0 0 0 .25rem rgba(46, 117, 182, .25);
    }
    .form-check-input:checked {
        background-color: #1F4E79;
        border-color: #1F4E79;
    }

    /* ---- 3.4 Cartes, barres de progression, onglets, pagination ---- */
    .card {
        --bs-card-border-color: #DCE6F1;
        --bs-card-border-radius: 12px;
        --bs-card-inner-border-radius: 11px;
    }
    .progress,
    .progress-stacked {
        --bs-progress-bg: #E4EDF6;
        --bs-progress-bar-bg: #2E75B6;
        --bs-progress-border-radius: 999px;
    }
    .nav-pills { --bs-nav-pills-link-active-bg: #1F4E79; }
    .nav-tabs { --bs-nav-tabs-link-active-color: #1F4E79; }
    .pagination {
        --bs-pagination-color: #2E75B6;
        --bs-pagination-active-bg: #1F4E79;
        --bs-pagination-active-border-color: #1F4E79;
        --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(46, 117, 182, .25);
    }

    /* ---- 3.5 Pastilles de statut PrevAdmin ----
       Règle de la charte : la couleur est TOUJOURS accompagnée d'un mot
       (« Écart à réduire », « Vigilance »…), jamais seule.
       Usage : <span class="statut statut--ecart">Écart à réduire</span> */
    .statut {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        font-weight: 700;
        font-size: .875rem;
        padding: .3rem .75rem;
        border-radius: 999px;
        white-space: nowrap;
    }
    .statut::before { content: "●"; font-size: .7em; }
    .statut--ecart     { background: #FBE9E7; color: #9E2B20; } /* moins bon que la référence */
    .statut--vigilance { background: #FCEEDF; color: #8A4A0C; } /* bon, mais se dégrade */
    .statut--progres   { background: #FBF1DD; color: #7A5212; } /* moins bon, mais s'améliore */
    .statut--sain      { background: #E3F1DF; color: #2B6A20; } /* situation saine */
    .statut--neutre    { background: #E9EEF4; color: #3D5269; } /* sans référence */

    /* ---- 3.6 Lettre d'engagement à l'écran (lot 2, étape 2a) ----
       Le même texte sert au PDF (templates/cadrage/_lettre_corps.html.twig) : on le présente
       comme une feuille de papier, avec les mêmes proportions. */
    .lettre-papier { max-width: 48rem; line-height: 1.55; }
    .lettre-entete { width: 100%; margin-bottom: 2rem; }
    .lettre-entete td { vertical-align: top; }
    .lettre-entete-logo img { max-width: 150px; max-height: 70px; }
    .lettre-entete-adresse { text-align: right; font-size: .9rem; }
    .lettre-titre { font-size: 1.6rem; color: #0F2B4F; margin-bottom: .25rem; }
    .lettre-sous-titre { color: #1F4E79; font-weight: 600; margin-bottom: 1.25rem; }
    .lettre-liste li { margin-bottom: .25rem; }
    .lettre-signature { width: 100%; margin-top: 2rem; }
    .lettre-signature-bloc { width: 52%; }
    .lettre-signature-place { color: #4F6B88; font-size: .85rem; border-top: 1px dashed #9BB0C6; padding-top: .25rem; margin-top: 3.5rem; }
    .lettre-attente { color: #4F6B88; font-style: italic; }

    /* ---- 3.7 Note de cadrage à l'écran (lot 2, étape 2b) : même texte que le PDF ---- */
    .note-rubrique { margin-bottom: 1.25rem; }
    .note-titre { font-size: 1.05rem; color: #1F4E79; margin-bottom: .35rem; }
    .note-texte { margin-bottom: 0; }
    .note-vide { color: #4F6B88; font-style: italic; margin-bottom: 0; }
    .note-organigramme { max-width: 100%; max-height: 28rem; border: 1px solid #DCE6F1; border-radius: 6px; }
    .note-etapes { width: 100%; border-collapse: collapse; font-size: .9rem; }
    .note-etapes th { background: #1F4E79; color: #fff; padding: .4rem .5rem; text-align: left; }
    .note-etapes td { border-bottom: 1px solid #DCE6F1; padding: .4rem .5rem; vertical-align: top; }
    .note-incontournable { font-size: .75rem; color: #8A4A0C; }
}