/* ============================================================================
   Complements au template « Assurance ».
   ----------------------------------------------------------------------------
   Fichier separe et charge APRES style.css : les modifications ne sont jamais
   faites dans les fichiers du template, sinon elles seraient perdues a la
   moindre mise a jour de celui-ci.
   ============================================================================ */

/* --- Accessibilite ------------------------------------------------------- */

/* Masque un libelle visuellement tout en le laissant lisible par les
   lecteurs d'ecran. Le template utilise des placeholders seuls, qui
   disparaissent des la saisie et ne sont pas annonces de facon fiable. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Le focus doit rester visible : le supprimer rend le site inutilisable au
   clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #0a5cff;
    outline-offset: 2px;
}


/* --- Messages de formulaire --------------------------------------------- */

.alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 3px;
    border-left: 4px solid transparent;
    font-size: 15px;
    line-height: 1.5;
}

.alert-success {
    background: #e8f6ee;
    border-left-color: #2e9e5b;
    color: #1c6b3c;
}

.alert-danger {
    background: #fdecea;
    border-left-color: #d3382b;
    color: #8f2018;
}

/* Erreur sous un champ. display:block pour qu'elle ne se retrouve pas
   collee a droite du champ sur mobile. */
.field-error {
    display: block;
    margin: -10px 0 15px;
    color: #c0392b;
    font-size: 13px;
    line-height: 1.4;
}

/* Signale visuellement le champ fautif, en plus du message : la couleur
   seule ne suffit pas pour un utilisateur daltonien, d'ou le liseré epais
   combine au texte d'erreur. */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #c0392b !important;
    box-shadow: inset 0 0 0 1px #c0392b;
}

.form-legal {
    margin-top: 1rem;
    font-size: 13px;
    color: #7c828c;
}


/* --- Contenu en attente ------------------------------------------------- */

/* Rend visible ce qui reste a rediger, pour que rien ne passe en production
   par oubli. */
.content-placeholder {
    padding: 1rem 1.25rem;
    background: #fff8e1;
    border-left: 4px solid #ffc107;
    color: #6d5310;
    font-size: 15px;
}


/* --- Pages legales ------------------------------------------------------ */

.legal-page h2 {
    margin-bottom: 1.5rem;
}

.legal-page h3 {
    margin: 2rem 0 .75rem;
    font-size: 20px;
}

.legal-page p,
.legal-page li {
    line-height: 1.7;
}

.legal-page ul {
    margin: 0 0 1rem 1.25rem;
    list-style: disc;
}

.legal-updated {
    margin-top: 2.5rem;
    font-size: 13px;
    color: #7c828c;
}


/* --- Pages generiques --------------------------------------------------- */

.default-page-area {
    padding: 80px 0;
}

.service-steps {
    margin: 0 0 2rem 1.25rem;
    list-style: decimal;
}

.service-steps li {
    margin-bottom: .5rem;
    line-height: 1.6;
}

.service-cta {
    margin-top: 2rem;
}

.error-area {
    padding: 100px 0;
}

.error-area h1 {
    font-size: 96px;
    line-height: 1;
    margin: 0 0 .5rem;
    color: #d8dce3;
}

.error-links {
    margin: 2rem 0;
}

.error-links .thm-btn {
    margin: 0 .35rem .5rem;
}

.error-suggestions {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.error-suggestions li {
    display: inline-block;
    margin: 0 .75rem;
}

.about-values {
    margin-top: 3rem;
}

.about-values .single-item {
    padding: 1.5rem;
}

/* La page en cours est mise en evidence sans etre un lien. */
.service-list li.current > span {
    font-weight: 600;
    color: #0a5cff;
}


/* --- Banniere d'accueil ------------------------------------------------- */

/* Le template s'appuie sur le slider Revolution pour sa banniere. On le
   remplace par une section statique : le slider represente a lui seul plus
   d'un tiers du JavaScript de la page pour un benefice discutable. */
.slogan-area {
    padding: 140px 0;
    position: relative;
}

/* Voile sombre : sans lui, le texte blanc devient illisible sur les zones
   claires de la photo. */
.slogan-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .55);
}

.slogan-area .container {
    position: relative;
}

.slogan-content h1 {
    color: #fff;
    font-size: 44px;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.slogan-content p {
    color: rgba(255, 255, 255, .9);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 38rem;
}

.slogan-content .thm-btn {
    margin: 0 .5rem .5rem 0;
}

@media (max-width: 767px) {
    .slogan-area {
        padding: 80px 0;
    }

    .slogan-content h1 {
        font-size: 30px;
    }
}