body {
    font-family: 'Poppins', sans-serif;
}

.layout_classic_only {
    display: block;
}

.layout_phone_only {
    display: none;
}

h1 {
    color: #008080;
}

a {
    font-family: 'Poppins', sans-serif;
}
.nav-link {
    margin-left: 24px;
    margin-right: 24px;
}

.accordion-button:not(.collapsed) {
    color: white !important;
    background-color: #008080 !important;
}

.accordion-button.collapsed {
    color: black !important;
    background-color: #B9E1C7 !important;
}

.navbar-brand img {
    border-radius : 15%;
    box-shadow: 0 20px 25px -15px rgb(0 0 0 / 30%);
}

.nav-item a{
    text-transform: uppercase;
    color : black;
}

.nav-item a:hover{
    color : #008080;
}

.nav-item a:active {
    color : #008080;
}

.fa-pen:before, .fa-user-lock:before, .fa-phone:before{
    color : #008080;
    background :white;
    padding : 3px;
    border-radius : 5px;
}

.fa-pen:hover:before, .fa-user-lock:hover:before{
    color : #000;
}


/* MEDIA > 992 */

@media (min-width: 992px) {
    .nav-item {
        display:none;
    }
}

span.support {
    font-family: 'Poppins', sans-serif;
    padding : 0 10px;
    color : #008080;
    font-weight : bold;
}


/* MEDIA < 500 */

@media screen and (max-width:500px){
    .support { display:none;}
       .navbar .icone {
        display:none;
    }
}

.bg-image {
    background-image : url("../img/home.49b3a943effb.webp");
    background-position: top;
    background-size : cover;
    height : 550px;
    padding : 170px 0;
}

.intro {
    width:55%;
    margin-top: 72px;
}


/* MEDIA < 1024 */

@media screen and (max-width:1024px){
    .bg-image {
        background-image : url("../img/home-mobile.7d6abbca834e.webp");
        background-position: top;
        background-size : cover;
        min-height : 550px;
        padding : 170px 0;
    }

    .intro {
        width:100%;
        margin-top: 0px;
    }

    .layout_classic_only {
        display: none !important;
    }

    .layout_phone_only {
        display: block;
    }
}

h1.home, p.home {
    text-align:left;
    font-family: 'Poppins', sans-serif;
}

h1.home {
    font-weight : bold;
}

p.home {
    color:#000;
}

div.row h1 {
    margin-top: 28px;
    margin-bottom: 14px;
}

.card {
    box-shadow: 0 20px 25px -15px rgb(0 0 0 / 30%);
    margin-bottom : 20px;
}

.card-header {
    background-color: #008080 !important;
}

.card-header,
h5.card-header {
    color:#fff;
    font-weight : bold;
    text-align:center;
    font-family: 'Poppins', sans-serif;
}

.card-text {
   font-family: 'Poppins', sans-serif;
    font-size : 14px;
}

#main_information.home{
    margin-top: -150px;
    padding : 150px 0;
}

.footer {
    padding : 40px 0;
    font-family: 'Poppins', sans-serif;
    color : #000;
    clear:left;
}

.footer h6 {
    color : #008080;
}

.copyright, a.copyright{
    background-color: #008080;
    color : #fff !important;
    padding : 20px 0;
}

.navbar {
    background : transparent !important;
}

/* Le sarcelle de la marque, #008080, donne 4,46:1 sur le fond #f7f7f7 : il
   manque 0,04 pour atteindre le seuil de 4,5:1 exigé sur un texte de cette
   taille. #007A7A, indiscernable à l'œil, monte à 4,82:1.

   L'état de survol était lui aussi sous le seuil — noir sur sarcelle, 4,40:1 —
   sans qu'aucun outil le signale, puisqu'ils ne mesurent que l'état au repos.
   Il passe en blanc sur sarcelle, 5,17:1, ce qui est d'ailleurs le
   comportement habituel d'un bouton `outline` de Bootstrap. */

.btn-outline-webfront {
    --bs-btn-border-color:#007A7A !important;
    --bs-btn-border-width:1px !important;
    --bs-btn-color: #007A7A;
    --bs-btn-border-color: #007A7A;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #007A7A;
    --bs-btn-hover-border-color: #007A7A;
    --bs-btn-focus-shadow-rgb: 255,193,7;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #007A7A;
    --bs-btn-active-border-color: #007A7A;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.875);
    --bs-btn-disabled-color: #007A7A;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #007A7A;
    --bs-gradient: none;
}


/* MEDIA < 575 */

@media screen and (max-width:575px){
    .footer .navbar-brand img {
        display:none;
    }

    .footer-mobile {
        width:50% !important;
    }
}


/* ------------------------------------------------- lien d'évitement -------
 * Il doit être le premier élément focalisable de la page et rester invisible
 * tant qu'il n'a pas le focus. `display:none` ou `visibility:hidden` le
 * retireraient aussi du parcours clavier : on le sort de l'écran par un
 * décalage, ce qui le garde atteignable par la touche Tab.
 */

.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: #fff;
    color: #007A7A;
    border: 2px solid #007A7A;
    border-radius: 0 0 0.3rem 0;
    text-decoration: underline;
}

.lien-evitement:focus {
    left: 0;
}

/* La cible du lien porte `tabindex="-1"` pour pouvoir recevoir le focus sans
   entrer dans l'ordre de tabulation : sans quoi, sur certains navigateurs, le
   saut déplace la vue mais pas le focus, et la touche Tab suivante repart du
   début de la page. */

#contenu:focus {
    outline: none;
}

/* ------------------------------------------------- prise de focus ---------
 * Les raccourcis de la barre de navigation sont des liens habillés en boutons.
 * Bootstrap n'applique son ombre de focus qu'aux variantes colorées : ceux-ci
 * ne montraient rien du tout au clavier (RGAA 10.7).
 *
 * `:focus-visible` plutôt que `:focus` : le contour n'apparaît qu'à la
 * navigation au clavier, pas au clic à la souris.
 */

/* `.btn:focus-visible` de Bootstrap pose `outline: 0` et une ombre tiree de
   `--bs-btn-focus-shadow-rgb`. Pour `.btn-outline-webfront`, cette teinte est
   l'ambre `255,193,7` : mesure **1,52:1 sur #f7f7f7 et 1,63:1 sur blanc**, la
   ou le contour sarcelle donne 4,82:1 et 5,17:1.
   
   Et la regle generale ne pouvait pas les rattraper : `a:focus-visible` pese
   (0,1,1) quand `.btn:focus-visible` pese (0,2,0). Treize liens des pages
   publiques — accueil, particuliers, professionnels — montraient donc une
   prise de focus differente de tout le reste du site.
   
   RGAA 10.7 ne demande que la visibilite, et a ce titre ils passaient. C'est
   WCAG 2.2 SC 2.4.11, qui exige 3:1, qu'ils ne tenaient pas — et, quel que
   soit le referentiel, deux prises de focus differentes sur un meme site. */
.btn:focus-visible,
.navbar .icone:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #007A7A;
    outline-offset: 2px;
}


/* --- Les quatre pictogrammes du site public --------------------------------
 *
 * Ils venaient de Font Awesome, que fournit le paquet `django-jazzmin` : une
 * feuille de style de 101 Ko et une police de 153 Ko, cette derniere
 * incompressible puisque deja compressee. Deux cent cinquante kilooctets pour
 * quatre dessins, sur les pages que chargent les visiteurs.
 *
 * Ils sont ici en clair, extraits de cette meme police : environ 1,8 Ko. Le
 * site public ne depend plus du theme d'administration pour ses icones, ce
 * qui etait par ailleurs un couplage surprenant.
 *
 * Le pictogramme est pose en masque : il prend donc la couleur du texte, et
 * n'apporte aucun texte que restituerait un lecteur d'ecran — ce qui est le
 * but, puisqu'il est decoratif et que le lien porte deja son intitule.
 */
.pictogramme {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: var(--pictogramme) center / contain no-repeat;
            mask: var(--pictogramme) center / contain no-repeat;
}

/* Reprend `fa-xl`, la taille que portaient les deux icones de l'en-tete. */
.pictogramme--grande {
    width: 1.5em;
    height: 1.5em;
}

.pictogramme--pen {
    --pictogramme: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-459%20512%20534%22%3E%3Cpath%20d=%22M363%20-429%20314%20-380%20363%20-429%20314%20-380%20444%20-250%20493%20-299Q511%20-318%20511%20-344Q511%20-369%20493%20-389L453%20-429Q434%20-447%20408%20-447Q383%20-447%20363%20-429ZM292%20-358%2059%20-124%20292%20-358%2059%20-124Q43%20-109%2036%20-87L1%2033Q-3%2047%207%2057Q17%2067%2031%2063L151%2028Q172%2021%20188%206L422%20-228L292%20-358Z%22/%3E%3C/svg%3E");
}

.pictogramme--phone {
    --pictogramme: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-459%20512%20534%22%3E%3Cpath%20d=%22M165%20-423Q159%20-438%20146%20-444Q132%20-450%20117%20-447L29%20-423Q2%20-413%200%20-384Q1%20-259%2061%20-158Q121%20-57%20222%203Q323%2063%20448%2064Q477%2062%20487%2035L511%20-53Q514%20-68%20508%20-82Q502%20-95%20487%20-101L391%20-141Q364%20-150%20345%20-129L305%20-80Q252%20-105%20210%20-146Q169%20-188%20144%20-241L193%20-281Q214%20-300%20205%20-327L165%20-423Z%22/%3E%3C/svg%3E");
}

.pictogramme--download {
    --pictogramme: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-459%20512%20534%22%3E%3Cpath%20d=%22M288%20-416Q288%20-430%20279%20-439Q270%20-448%20256%20-448Q242%20-448%20233%20-439Q224%20-430%20224%20-416V-173L151%20-247Q141%20-256%20128%20-256Q115%20-256%20105%20-247Q96%20-237%2096%20-224Q96%20-211%20105%20-201L233%20-73Q243%20-64%20256%20-64Q269%20-64%20279%20-73L407%20-201Q416%20-211%20416%20-224Q416%20-237%20407%20-247Q397%20-256%20384%20-256Q371%20-256%20361%20-247L288%20-173V-416ZM64%20-96Q37%20-95%2019%20-77Q1%20-59%200%20-32V0Q1%2027%2019%2045Q37%2063%2064%2064H448Q475%2063%20493%2045Q511%2027%20512%200V-32Q511%20-59%20493%20-77Q475%20-95%20448%20-96H347L301%20-51Q281%20-32%20256%20-32Q230%20-32%20211%20-51L166%20-96H64ZM432%20-40Q454%20-38%20456%20-16Q454%206%20432%208Q410%206%20408%20-16Q410%20-38%20432%20-40Z%22/%3E%3C/svg%3E");
}

.pictogramme--user-lock {
    --pictogramme: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-459%20640%20534%22%3E%3Cpath%20d=%22M224%20-192Q259%20-192%20288%20-209Q317%20-226%20335%20-256Q352%20-286%20352%20-320Q352%20-354%20335%20-384Q317%20-414%20288%20-431Q259%20-448%20224%20-448Q189%20-448%20160%20-431Q131%20-414%20113%20-384Q96%20-354%2096%20-320Q96%20-286%20113%20-256Q131%20-226%20160%20-209Q189%20-192%20224%20-192ZM178%20-144Q103%20-142%2052%20-92Q2%20-41%200%2034Q0%2047%209%2055Q17%2064%2030%2064H393Q384%2050%20384%2032V-96Q384%20-99%20384%20-102Q336%20-143%20270%20-144H178ZM528%20-208Q542%20-208%20551%20-199Q560%20-190%20560%20-176V-128H496V-176Q496%20-190%20505%20-199Q514%20-208%20528%20-208ZM448%20-176V-128V-176V-128Q434%20-128%20425%20-119Q416%20-110%20416%20-96V32Q416%2046%20425%2055Q434%2064%20448%2064H608Q622%2064%20631%2055Q640%2046%20640%2032V-96Q640%20-110%20631%20-119Q622%20-128%20608%20-128V-176Q607%20-210%20585%20-233Q562%20-255%20528%20-256Q494%20-255%20471%20-233Q449%20-210%20448%20-176Z%22/%3E%3C/svg%3E");
}


/* --- Les pages d'erreur -----------------------------------------------------
 * Une erreur sur le site public : le theme du site, et un seul lien vers
 * l'accueil. La personne vient d'une page publique, pas du logiciel.
 */

.od-erreur {
    padding: 3rem 0 4rem;
    max-width: 44rem;
}

.od-erreur__code {
    margin: 0 0 0.5rem;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5a6066;
}