/* ------------------------------------------------------------------
   custom.css - complement de app.css, charge juste apres lui.
   Cree le 08/11/2026, mis a jour le 08/11/2026 (mise en page des blocs
   de contact).

   1. Liens de contact cliquables
   2. Mise en page des blocs de contact (en-tete et pied de page)
   3. Bloc d'appel a l'action des pages de formation
   4. Barre collante mobile
   5. Petits ecrans

   Pour tout annuler : retirer la ligne Html->css('custom.css')
   dans src/Template/Element/layout/head.ctp.
   ------------------------------------------------------------------ */

/* 1. Liens de contact ---------------------------------------------- */

.dc-contact-link {
    color: inherit;
    text-decoration: none;
}

.dc-contact-link:hover,
.dc-contact-link:focus {
    color: inherit;
    text-decoration: underline;
}

/* 2. Mise en page des blocs de contact ------------------------------ */

/* En-tete : les deux numeros cote a cote, l'adresse e-mail en dessous */
.top__phone .dc-contact-item--tel {
    display: inline;
}

.top__phone .dc-contact-item--mail {
    display: block;
}

.top__phone .dc-contact-item--mail .dc-contact-sep {
    display: none;
}

.top__first {
    height: auto;
}

.top__resp {
    align-items: center;
}

.top__phone__number {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.top__phone__tip {
    font-size: 11px;
    line-height: 1.3;
}

/* Pied de page : numeros et adresse e-mail les uns sous les autres */
.footer__phone__number .dc-contact-item {
    display: block;
}

.footer__phone__number .dc-contact-sep {
    display: none;
}

.footer__box__content {
    align-items: flex-start;
}

.footer__phone__number {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}

.footer__phone__tip {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
}

/* L'adresse postale est alignee sur le bloc telephone */
.footer__box__location {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}

/* L'adresse postale ouvre Google Maps */
.dc-map-link {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

.dc-map-link:hover,
.dc-map-link:focus {
    color: inherit;
    text-decoration: underline;
}

/* 3. Bloc d'appel a l'action ---------------------------------------- */

.dc-cta {
    margin: 40px 0 0;
    padding: 28px 32px;
    background: #1B2A32;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.dc-cta__text {
    color: #fff;
    font-family: "Work Sans", Helvetica, Roboto, Arial, sans-serif;
}

.dc-cta__text strong {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}

.dc-cta__text span {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    opacity: .75;
}

.dc-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dc-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    font: 600 15px/1.2 "Work Sans", Helvetica, Roboto, Arial, sans-serif;
    transition: background-color .15s ease, color .15s ease;
}

.dc-cta__btn--call {
    background: #fff;
    color: #1B2A32;
    border: 1px solid #fff;
}

.dc-cta__btn--call:hover,
.dc-cta__btn--call:focus {
    background: transparent;
    color: #fff;
}

.dc-cta__btn--signup {
    background: #E65821;
    color: #fff;
    border: 1px solid #E65821;
}

.dc-cta__btn--signup:hover,
.dc-cta__btn--signup:focus {
    background: transparent;
    color: #E65821;
}

/* 4. Barre collante mobile ------------------------------------------ */

.dc-sticky {
    display: none;
}

/* 5. Petits ecrans --------------------------------------------------- */

@media screen and (max-width: 639px) {

    /* En-tete : le bloc telephone debordait de son conteneur et la mention
       "Prix d'un appel local" passait par-dessus l'en-tete. Le logo est
       reduit et l'icone telephone masquee pour que les deux numeros
       tiennent cote a cote sur une seule ligne. */
    .top__resp {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 10px;
        height: auto;
    }

    .top__resp__logo {
        flex: 0 0 auto;
    }

    .top__resp__logo img {
        max-width: 95px;
        height: auto;
        display: block;
    }

    .top__phone {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    .top__phone__img {
        display: none;
    }

    .top__phone__right {
        min-width: 0;
        text-align: right;
    }

    .top__phone__number {
        font-size: 11px;
        line-height: 1.4;
        white-space: nowrap;
    }

    .top__phone .dc-contact-item--mail {
        white-space: nowrap;
    }

    .top__phone__tip {
        font-size: 9px;
        line-height: 1.2;
    }

    .hamb {
        flex: 0 0 auto;
    }

    /* Appel a l'action */
    .dc-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 22px 18px;
        margin-top: 28px;
    }

    .dc-cta__actions {
        justify-content: center;
    }

    .dc-cta__btn {
        flex: 1 1 140px;
    }

    /* Barre collante */
    .dc-sticky {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900; /* sous la banniere cookies, qui est a 1000 */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .2);
    }

    .dc-sticky a {
        flex: 1;
        text-align: center;
        padding: 15px 8px;
        text-decoration: none;
        font: 600 15px/1 "Work Sans", Helvetica, Roboto, Arial, sans-serif;
    }

    .dc-sticky__call {
        background: #1B2A32;
        color: #fff;
    }

    .dc-sticky__signup {
        background: #E65821;
        color: #fff;
    }

    /* Degage la hauteur de la barre, uniquement sur les pages qui en ont une */
    body:has(.dc-sticky) {
        padding-bottom: 50px;
    }
}