/*
 * Mise en page propre à formation-sante-animale, posée sur le balisage des
 * blocs de la v4.
 *
 * Chargée en dernier par cadre/header.twig (CssExist), après style.css,
 * default.css et blocs.css. Le template n'a pas de website.css : aucun rejeu
 * de ses commits ne l'écrasera. La série 2 la reçoit par un lien
 * (css/2/website.css) ; tout ce qui y varie d'une série à l'autre passe par
 * les variables de charte de chaque style.css (--heading-color, --accent-color).
 *
 * Elle aligne la page sur le template, avec la charte du site :
 *   - le formulaire posé dans le hero, à côté du titre, comme dans le
 *     template — et non plus flottant par-dessus la page (ancien #lead_form
 *     fixe de default.css, que ce site garde) ;
 *   - des blocs centrés sur toute la largeur, textes centrés ;
 *   - l'en-tête, les pictos et les cartes de l'ancienne page.
 */

/* ---- En-tête : logo et « Centre de formation » à gauche, accroche à droite */

.header > .container-fluid {
    max-width: 1140px;
}

.header .col-12 {
    display: flex;
    align-items: center;
}

.header .logo img {
    max-height: 45px;
    width: auto;
    max-width: none;
}

.header .bloc_textes {
    float: none;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Couleurs de la charte de la série : blanc sur le bandeau bleu en série 1 ;
   la série 2, sur fond blanc, les passe en couleur d'accent (css/2/website.css). */
.header .bloc_texte_1 {
    color: var(--heading-color);
    font-size: 30px;
    font-weight: 700;
}

.header .bloc_texte_2 {
    color: var(--default-color);
    font-size: 20px;
    font-weight: 400;
}

@media (max-width: 992px) {
    .header .bloc_texte_1 {
        font-size: 20px;
        line-height: 1.15;
    }

    .header .bloc_texte_2 {
        font-size: 16px;
        line-height: 1.2;
        text-align: right;
    }
}

/* ---- Hero ----------------------------------------------------------------- */

/* Couleur de titre de la charte : blanc en série 1, bleu en série 2. */
.bloc_lead_one h1,
.bloc_lead_one .bloc_mobile .h1 {
    color: color-mix(in srgb, var(--heading-color), transparent 30%);
}

/* L'ancienne page n'affichait pas de vignette sous le titre sur téléphone. */
.bloc_lead_one .bloc_mobile .bloc-gauche-image {
    display: none;
}

/* default.css ne masque la version mobile du hero qu'en dessous de 992 px :
   au-dessus, le titre s'affichait deux fois. */
@media (min-width: 993px) {
    .bloc_lead_one .bloc_mobile {
        display: none;
    }
}

/* ---- Formulaire : posé dans le hero, comme dans le template ---------------- */

/* Règle « Lead Form Specifics » du style.css du template, reprise telle
   quelle : le style.css de ce site a gagné ses conflits au rejeu et ne l'a
   jamais reçue, si bien que l'ancien #lead_form flottant de default.css
   (position: fixed) restait en vigueur. */
#lead-form,
#lead_form {
    position: relative !important;
    max-width: 100%;
    width: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* Au-dessus de l'overlay (.overlay, z-index 1000) que showForm() affiche :
       c'est le z-index du default.css du template. Celui de ce site, qui a
       gagné ses conflits, laissait 2 — le formulaire passait sous le voile
       gris au clic sur « Recevez une information… » ou « Contactez-nous ». */
    z-index: 1001;
}

/* ---- Contenu : blocs centrés sur toute la largeur -------------------------- */

main > section:not(.bloc_lead_one),
main > section:not(.bloc_lead_one) :is(h2, h3, p, li, .service-item, .icon-box, .text-image-item) {
    text-align: center;
}

/* Titres de section : ceux de l'ancienne page, en couleur d'accent, sans le
   filet ni les capitales du thème v4. */
main .section-title h2 {
    font-size: 30px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--accent-color);
    /* style.css pose line-height: 1px pour son filet : sur deux lignes, le
       titre se chevauchait lui-même sur téléphone. */
    line-height: 1.25;
    padding: 0;
    margin-bottom: 10px;
}

@media (max-width: 992px) {
    main .section-title h2 {
        font-size: 24px;
    }
}

main .section-title h2::before,
main .section-title h2::after {
    display: none;
}

/* Icônes + titres courts (avantages, la méthode) : sans cartes, pictos à
   100 px comme avant. */
.services.light-background {
    --background-color: #fff;
    background-color: #fff;
}

.services .service-item {
    background: none;
    box-shadow: none;
    border: 0;
    padding: 10px;
}

.services .service-item .icon img {
    max-width: 100px;
    margin: 20px;
}

.services .service-item h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--heading-color);
}

/* Texte avec image (la formation à distance, notre méthode pédagogique). */
.text-image-section .text-image-item h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--heading-color);
}

.text-image-section img.shadow {
    box-shadow: none !important;
}

.text-image-section ul {
    padding: 0;
    list-style: none;
}

.text-image-section ul li {
    padding: 5px 0;
}

.text-image-section ul i {
    color: var(--accent-color);
    margin-right: 4px;
}

/* Les quatre métiers, deux par ligne comme avant. */
@media (min-width: 768px) {
    .about .icon-boxes > article {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Espacement entre les rangées de cartes : le gabarit pose `gy-4`, qui
   n'existe pas en Bootstrap 4 — les cartes se touchaient d'une rangée à
   l'autre. */
.about .icon-boxes > article {
    margin-bottom: 24px;
}

.about .icon-box {
    width: 100%;
    padding: 30px 20px;
}

/* Le picto rond « award » que l'ancienne page portait en tête de chaque
   carte (même dessin que la règle .about .icon-box i de style.css). Le bloc
   « texte 3 » n'a pas de champ icône : il est posé en CSS. */
.about .icon-box::before {
    content: "\f559";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 24px;
    font-size: 32px;
    line-height: 0;
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    color: var(--accent-color);
}

.about .icon-box h3 {
    font-size: 20px;
    color: var(--heading-color);
}

/* blocs.css écrit ce texte en blanc, pour un fond sombre : sur les cartes
   blanches de ce site il devenait invisible. */
.about .icon-box .icon-box-content,
.about .icon-box .icon-box-content p {
    color: var(--default-color);
}