/* public/css/style_presence.css */

.one {
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.bloc1 h1 {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--omidev-dark);
}

.phone {
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

.two {
    padding: 100px 0;
}

.leg {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
}

.small {
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Animations simple */
.bloc1, .phone, .bloc4 {
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* La feuille principale pose `.align-items-center img { padding: 0 3px 0 37px }`.
   Avec `box-sizing: border-box`, ces 40 px de padding sont pris SUR la largeur
   declaree de l'image : les pictogrammes en width="40" tombaient a une largeur de
   contenu nulle et disparaissaient, les autres perdaient 40 px. */
.one img,
.two img {
    padding: 0;
}

/* `.col-md-6` ne recoit largeur et gouttieres qu'a partir de 768 px. En dessous, les
   blocs restent des items flex sans largeur : ils se partagent la ligne et s'ecrasent,
   et leur contenu vient coller au bord de l'ecran, la marge negative de `.row` n'etant
   compensee par aucun padding. Ils passent donc l'un sous l'autre, avec la meme
   gouttiere de 15 px que le reste de la page. */
@media (max-width: 767.98px) {
    .two .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Sous 992 px les deux colonnes du bandeau d'accroche s'empilent : le bouton se
   retrouve seul au-dessus du visuel, ou son alignement a gauche n'a plus de sens.
   La marge basse le decolle du telephone, qui passe juste en dessous. */
@media (max-width: 991.98px) {
    .one .bloc1 .btn {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
    }
}