@charset "utf-8";

/*
===================================================================
    BASE - typographie, liens, titres, breadcrumb, formulaires
    Mobile first : les media queries montent en largeur.
===================================================================
*/

/* ===============================
 *  NATIVE
=============================== */
* {
    outline: none !important;
}

::selection {
    background: var(--primary-main);
    color: #FFF;
}

html {
    scroll-behavior: smooth;
}

html, body {
    padding-top: 0;
}

body {
    font-family: var(--ff-body) !important;
    font-size: 1.125rem;             /* 18px, comme l'ancien site */
    font-weight: var(--fw-light);
    line-height: 1.6;
    color: #000;
    background-color: var(--bg-body);
    position: relative;
}

img {
    height: auto;
    max-width: 100%;
}

hr {
    border-top: 1px solid var(--neutral-light);
    width: 100%;
    opacity: 1;
}

/* ===============================
 *  LIENS
=============================== */
a,
a:link,
a:visited {
    text-decoration: none;
    color: var(--primary-main);
    transition: color var(--transition-base);
}

a:hover,
a:focus {
    color: var(--primary-dark);
}

/* Un lien stylé en bouton garde la couleur de sa variante : sans ces regles,
   `a:link` (0,1,1) l'emporte sur le `.btn` de Bootstrap (0,1,0) et repeint le
   libelle en bleu, y compris sur fond bleu ou orange. */
a.btn,
a.btn:link,
a.btn:visited {
    color: var(--bs-btn-color);
}

a.btn:hover,
a.btn:focus {
    color: var(--bs-btn-hover-color);
}

p a:not(.btn),
p a:link:not(.btn),
p a:visited:not(.btn) {
    text-decoration: underline;
}

b,
strong,
.strong {
    font-weight: var(--fw-bold);
}

/* ===============================
 *  TITRES
    h1 bleu en 300, h2 orange en 900 : hierarchie de l'ancien site.
=============================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ff-headline);
    position: relative;
    display: block;
    width: 100%;
    text-wrap-style: balance;
}

h1, .h1 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: var(--fw-light);
    color: var(--primary-main);
    line-height: 1.2;
    margin-bottom: var(--space-4);
    text-align: center;
}

h2, .h2 {
    font-size: clamp(24px, 2.25vw, 32px);
    font-weight: var(--fw-black);
    color: var(--focus-main);
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

h3, .h3 {
    font-size: clamp(20px, 1.75vw, 24px);
    font-weight: var(--fw-bold);
    color: var(--neutral-2x-dark);
    margin-bottom: var(--space-3);
}

h4, .h4 {
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: var(--fw-bold);
    color: var(--neutral-2x-dark);
    margin-bottom: var(--space-2);
}

h5, .h5 {
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: var(--fw-bold);
    color: var(--neutral-2x-dark);
    margin-bottom: var(--space-2);
}

h6, .h6 {
    font-size: clamp(14px, 1vw, 16px);
    font-weight: var(--fw-bold);
    color: var(--neutral-dark);
    margin-bottom: var(--space-2);
}

/* TITRES DE SECTION : trait de separation sous le titre, comme l'ancien site */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-transform: uppercase;
}

.section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--neutral-light);
}

/* ===============================
 *  BREADCRUMB
    Pastille "Accueil" bleue en chevron, reprise de l'ancien site.
=============================== */
.breadcrumb {
    font-size: .75rem;
    margin: var(--space-3) 0;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item a:link,
.breadcrumb-item a:visited {
    color: var(--neutral-dark);
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: var(--primary-main);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--neutral-mid);
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: var(--space-2);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    width: .75rem;
    height: .75rem;
    background: url("/assets/img/ic_angle-right.svg") no-repeat center / contain;
    filter: var(--fill-svg-neutral-mid);
    float: none;
    padding: 0;
    margin-right: var(--space-2);
    vertical-align: middle;
}

/* Premier maillon : pastille bleue en fleche */
.breadcrumb-item:first-child a {
    display: inline-block;
    background: var(--primary-main);
    color: #FFF;
    padding: .1rem .75rem .1rem .5rem;
    clip-path: polygon(0 0, calc(100% - .5rem) 0, 100% 50%, calc(100% - .5rem) 100%, 0 100%);
}

.breadcrumb-item:first-child a:hover,
.breadcrumb-item:first-child a:focus {
    background: var(--primary-dark);
    color: #FFF;
    text-decoration: none;
}

/* ===============================
 *  FORMULAIRES
=============================== */
label.required::after {
    content: " *";
    font-weight: var(--fw-bold);
    color: #dc3545;
}

.form-control,
.form-select {
    border-radius: 0;
    border-color: var(--neutral-light);
    padding: .65rem 1rem;
    font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 .2rem rgba(0, 161, 219, .15);
}

/* ===============================
 *  MAIN
=============================== */
main {
    display: block;
    min-height: 40vh;
    padding-bottom: var(--space-6);
}

/* ===============================
 *  DISPLAY INFO (reveal telephone / email au clic)
=============================== */
.displayInfo {
    cursor: pointer;
}

.displayBTN,
.hiddenInfo.ON {
    display: inline-block;
}

.displayBTN.OFF,
.hiddenInfo {
    display: none;
}

/*
===================================================================
    Medium devices (tablets, 768px and up)
===================================================================
*/
@media (min-width: 768px) {
    .breadcrumb {
        font-size: .813rem;
    }
}