/* CSS copie partielle de rc-ta.css 
    (commune à RappelConso et TeleAssistance.
  Complément du DSFR (v1.12.1 au 2024-10-01) pour les styles spécifiques, classes utilitaires manquantes, etc écrit par Alsacréations) */

@charset "UTF-8";

/* Couleurs du projet (par défaut light puis dark mode) */
:root {
    --blue-rappelconso: #1D2F53;
    --grey-a11y: #767676; /* texte gris tout juste assez contrasté sur fond blanc */
    --text-mandatory: var(--text-default-error); /* Rouge champ obligatoire = Rouge message d'erreur (mais avec un nom pertinent) */
    --logo-c1: #1d2f53;
    --logo-c2: #3f80aa;
}

@media not print {
    :root[data-fr-theme=dark] {
        --blue-rappelconso: var(--text-action-high-grey); /* en dark mode, blanc */
        --grey-a11y: #808080; /* texte gris tout juste assez contrasté sur fond #161616 */
        --logo-c1: white;
        --logo-c2: var(--background-action-high-blue-france);
    }
}

/* bugfix DSFR dans le cas <div class="fr-col-N fr-col-BP">. Il faut écraser max-width et width et pas seulement flex */
@media (min-width: 48em) {
    .fr-col-md {
        max-width: none;
    }
}

/* Classes utilitaires manquantes (dans le dist fourni par le DSFR en tout cas) */
/* media lg */
@media (min-width: 62em) {
    .fr-mt-lg-0 {
        margin-top: 0 !important;
    }

    .fr-pl-lg-2w {
        padding-left: 1rem !important;
    }
}

/* Entête de page - Header */
.page-header .fr-responsive-img {
    max-width: 7rem;
}

/* Logo RappelConso (SVG inline) modifié pour le mode sombre */
.page-header .fr-responsive-img .logo-c1,
.fr-footer__logo .logo-c1 {
    fill: var(--logo-c1);
}

.page-header .fr-responsive-img .logo-c2,
.fr-footer__logo .logo-c2 {
    fill: var(--logo-c2);
}

/* 1. FIX Alsa #24 Réduire hauteur bandeau en réduisant dimensions logo + repositionner tagline.
  Pas moyen de repositionner .fr-header__service avec translate ou relative/top car le formatting context créé rend le logo Marianne non cliquable !
  Le SVG est donc translaté (pas besoin pour p.fr-header__service-tagline) */
@media (min-width:62em) {
    .fr-header__body-row {
        padding-block: 1rem; /* 1 - écrase les 1.5rem du DSFR en LG. Survol gris fait exactement la hauteur du header. */
    }

    /* 1 - Couleur de fond grise remplacée par un dégradé avec 2 bandes transparentes... */
    .fr-enlarge-link:hover {
        --my: 0.5rem;
        background: transparent linear-gradient(to bottom, transparent 0, transparent var(--my), var(--hover) var(--my), var(--hover) calc(100% - var(--my)), transparent calc(100% - var(--my)), transparent 100%);
    }
}

.fr-header__service .fr-responsive-img {
    translate: 0 8px;
}

/* La tagline du site doit être déplacée sous le logo du site.
    HTML : ce paragraphe est déplacé après le logo et le bloc *service à droite est supprimé, dont le lien textuel RappelConso.
*/
.fr-header__service-tagline {
    translate: 2px 0;
    font-size: 0.625rem; /* 10px */
    color: var(--blue-rappelconso);
}

/* Icônes pour la navigation. On évite d'importer tout utility.main.css rien que pour ça */
.fr-icon-megaphone-fill::before,
.fr-icon-megaphone-fill::after {
    -webkit-mask-image: url("icons/business/megaphone-fill.svg");
    mask-image: url("icons/business/megaphone-fill.svg");
}
.fr-icon-mail-fill::before,
.fr-icon-mail-fill::after {
    -webkit-mask-image: url("icons/business/mail-fill.svg");
    mask-image: url("icons/business/mail-fill.svg");
}
.fr-icon-file-text-fill::before,
.fr-icon-file-text-fill::after {
    -webkit-mask-image: url("icons/document/file-text-fill.svg");
    mask-image: url("icons/document/file-text-fill.svg");
}
.fr-icon-login-box-r-fill::before,
.fr-icon-login-box-r-fill::after {
    -webkit-mask-image: url("icons/system/login-box-fill.svg");
    mask-image: url("icons/system/login-box-fill.svg");
}
.fr-icon-logout-box-r-fill::before,
.fr-icon-logout-box-r-fill::after {
    -webkit-mask-image: url("icons/system/logout-box-r-fill.svg");
    mask-image: url("icons/system/logout-box-r-fill.svg");
}
.fr-icon-user-add-fill::before,
.fr-icon-user-add-fill::after {
    -webkit-mask-image: url("icons/user/user-add-fill.svg");
    mask-image: url("icons/user/user-add-fill.svg");
}
.fr-icon-user-fill::before,
.fr-icon-user-fill::after {
    -webkit-mask-image: url("icons/user/user-fill.svg");
    mask-image: url("icons/user/user-fill.svg");
}
.fr-icon-user-line::before,
.fr-icon-user-line::after {
    -webkit-mask-image: url("icons/user/user-line.svg");
    mask-image: url("icons/user/user-line.svg");
}
.fr-icon-lock-line::before,
.fr-icon-lock-line::after {
    -webkit-mask-image: url("icons/system/lock-line.svg");
    mask-image: url("icons/system/lock-line.svg");
}
.fr-icon-theme-fill::before,
.fr-icon-theme-fill::after {
    -webkit-mask-image: url("icons/system/fr--theme-fill.svg");
    mask-image: url("icons/system/fr--theme-fill.svg");
}
.fr-icon-message-2-fill::before,
.fr-icon-message-2-fill::after {
    -webkit-mask-image: url("icons/communication/message-2-fill.svg");
    mask-image: url("icons/communication/message-2-fill.svg");
}
.fr-icon-first-aid-kit-fill::before,
.fr-icon-first-aid-kit-fill::after {
    -webkit-mask-image: url("icons/health/first-aid-kit-fill.svg");
    mask-image: url("icons/health/first-aid-kit-fill.svg");
}

.blue-france-950 {
    background-color: #ececfe
}

.fr-header__service-logo {
  height: 50px; /* Même hauteur que le logo de l'État */
  width: auto; /* Conserve les proportions */
  vertical-align: middle; /* Alignement vertical */
  margin-right: 0.5rem; /* Espacement avec le texte */
}

.fr-footer__logo {
    height: 100px; /* Même hauteur que le logo de l'État */
    width: auto; /* Conserve les proportions */
    vertical-align: middle; /* Alignement vertical */
    margin-right: 0.5rem; /* Espacement avec le texte */
}

/*car dsfr rajoute un barré pour hypertexte incompatible avec boostrap!!*/
.nav-link {
    background-image: none !important;
}