/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
STYLES TEXTES
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

h2 {
    text-transform: uppercase;
}

.est-surligne {
    display: inline-block;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    background: rgba(199,194,27,0.25);
    border-radius: 0.25em;
    letter-spacing: 0.03em;
}

.est-en-savoir-plus {
    display: block;
    padding-top: 1rem;
    color: #0a0a0a;
}

.est-interlettre-1 { letter-spacing: 0.025em;}
.est-interlettre-2 { letter-spacing: 0.05em;}
.est-interlettre-3 { letter-spacing: 0.1em;}
.est-interlettre-4 { letter-spacing: 0.2em;}

@media (max-width:769px) { 
    .title.is-1 { font-size: 8vw !important; }
    .title.is-2 { font-size: 8vw !important; }
    .title.is-3 { font-size: 6vw !important; }
}

/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
LAYOUT
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

.est-etroit {
    max-width: 800px !important;
}

/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
LIENS ET BOUTONS
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

a:hover {
    text-decoration: underline;
}


/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
NAVBAR
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

.navbar-brand > .navbar-item > img {
    max-height: initial;
}

.navbar {
    margin-top: 1.25rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

@media (max-width:500px) { 
    #navMenu > div > section {
        flex-direction: column;
        align-items: flex-end;
    }
}

.navbar-menu-item {
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

a.navbar-menu-item:hover,
a.navbar-menu-item:focus {
    color: #0a0a0a;
    background: rgba(199, 194, 27, 0.15);
    border-radius: 0.125em;
}

/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
BREADCRUMB
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

.breadcrumb {
    font-size: 0.875rem;
    padding-left: 0.75rem;
}

a.est-page-active {
    pointer-events: none;
    color: #363636;
}

/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
FONDS, COULEURS
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

body { color: #324854; }
a { color: #1A7F7D; }
a.est-blanc { color: white !important;}

.est-couvrant { background-size: cover ; }
.est-etire { background-size: 100% 100%; }

.a-fond-qui-plus-est { background-image: url('../images/bandeau-qui-plus-est.jpg'); }

.a-fond-noir { background-color: #0a0a0a; }
.est-syntherm, .a-fond-vert { background-color: #c7c11b; }
.est-cuveo, .a-fond-bleu { background-color: #25b4b1; }
.est-N50, .a-fond-corail { background-color: #cc3029; }
.est-recolte, .a-fond-fonce { background-color: #324854; }
.a-fond-fonce { background-color: #324854; }
.a-fond-clair { background-color: #a7a9ab; }

.est-vert { color: #7C7813; }
.est-bleu { color: #1A7F7D; }
.est-corail { color: #cc3029; }
.est-fonce { color: #324854; }
.est-clair { color: #a7a9ab; }
.est-blanc { color: #ffffff; }

.notification.is-info { background: #25b4b1; }
.notification.is-success { background: #c7c11b; }
.notification.is-danger { background: #cc3029; }
.notification.is-info.is-light { background: #25b4b120; color: #1A7F7D; }
.notification.is-success.is-light { background: #c7c11b20; color: #7C7813; }
.notification.is-danger.is-light { background: #cc302920; color: #cc3029; }

/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
BORDS DESSINES
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

.bord-dessine {
    position: relative;
}

.bord-dessine.bord-haut:before,
.bord-dessine.bord-bas:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1.7vw;
    background-size: 100% 100%;
    left: 0;
    pointer-events: none;
}

.bord-dessine.bord-blanc.bord-haut:before,
.bord-dessine.bord-blanc.bord-bas:after { background-image: url('../images/bord-bandeau-blanc.png'); }
.bord-dessine.bord-noir.bord-haut:before,
.bord-dessine.bord-noir.bord-bas:after { background-image: url('../images/bord-bandeau-noir.png'); }
.bord-dessine.bord-jaune-100.bord-haut:before,
.bord-dessine.bord-jaune-100.bord-bas:after { background-image: url('../images/bord-bandeau-jaune-100.png'); }

.bord-dessine.bord-haut:before {
    bottom: 100%;
}

.bord-dessine.bord-bas:after {
    top: 100%;
    transform-origin: center;
    transform: rotate(180deg);
}

/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
HELPERS
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

.est-float-left { float: left; }

.est-arrondie { border-radius: 50%; }

@media (max-width:769px) { 
    .est-flex-direction-column-mobile {
        flex-direction: column;
    }
}

/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
STYLE MARKDOWN
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

.style-markdown > h2,
.style-markdown > h3 {
    word-break: break-word;
    font-weight: 600;
    line-height: 1.125;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    break-after: avoid-column;
}

.style-markdown > h2 { font-size: 2.5rem; }
.style-markdown > h3 { font-size: 2rem; }
.style-markdown > h4 { font-size: 1.5rem; }

.style-markdown > h2:not(:first-child),
.style-markdown > h3:not(:first-child) {
    margin-top: 1.75rem;
}

.style-markdown > p {
    line-height: 1.5em;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    break-inside: avoid-column;
}

.style-markdown > p > strong,
.style-markdown > p > * > strong {
    font-size: 1.125em;
}

.style-markdown > ul {
    list-style: none;
    padding-left: 1em;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
STYLES SPECIAUX
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

.special-titre-besoin {
    position: relative;
    bottom: 3.5rem;
}

/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
ICONES des APPLIS
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

.icon-appli__list {
    display: flex;
    margin: 0 -0.5em;
    padding-left: 0;
    list-style: none;
}

.icon-appli__wrap {
    text-decoration: none !important;
    text-align: center;
    margin: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-appli {
    border-radius: 50%;
    width: 4em;
    height: 4em;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.1s ease-in-out;
    color: white;
    box-shadow: inset -10px 10px 10px rgba(0,0,0,0.10);
}

a:hover > .icon-appli,
a:focus > .icon-appli {
    box-shadow: inset -10px 10px 20px rgba(0,0,0,0.25);
}

.icon-appli > span {
    font-size: 2em;
    position: relative;
    top: -0.1em;
}

.icon-appli__label,
.icon-appli__link {
    font-size: 0.75em;
}

/*
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
PATCH
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
*/

.style-markdown.accueil + .style-markdown.accueil {
    background: #25b4b120;
    border-radius: 0.25em;
}

img[alt="Sobro"] {
    position: relative;
    top: 7px;
}

/* Empile toutes les applications verticalement */
ul.icon-appli__list.columns.is-multiline {
    display: flex !important;
    flex-direction: column !important;
}

ul.icon-appli__list.columns.is-multiline > li.column {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 1rem; /* espace entre les applis */
}