/* Couche d'integration WordPress.
   Le CSS de l'original (sda-site.css) est repris tel quel ; ce fichier ne
   contient que les ajustements necessaires pour cohabiter avec les wrappers
   du theme Soludevi (qu'on ne modifie pas). */

/* Le footer du plugin porte sa propre classe .sda-footer ; on neutralise le
   style generique du <footer id="colophon" class="site-footer"> du theme. */
#colophon.site-footer {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}

/* Le theme impose un interligne global (line-height: 1.5) que l'original
   n'avait pas : il laissait la valeur par defaut du navigateur (normal) et
   ne fixait l'interligne qu'au cas par cas dans son CSS (repris tel quel
   dans sda-site.css). On remet donc la meme base, sinon l'interligne du
   theme fuit dans tout le contenu (listes, titres, chiffres cles...).
   On la pose uniquement sur body, comme l'original : cibler aussi p/li/hN
   casserait l'heritage (ex. .card__text fixe 2.5 sur le <ul>, ses <li> en
   heritent — une regle directe sur li gagnerait sur cet heritage). */
body { line-height: normal; }

/* --- Header --- */

/* Le logo du header : l'original le contraignait a 80x40 via le composant
   Image de Next.js (pas via le CSS, qui est repris tel quel). Notre <img>
   brut prendrait sinon sa taille naturelle (150x75) et gonflerait le header. */
.navbar .logo {
    width: 80px;
    height: 40px;
}

/* --- Menu mobile : sous-menu "Agence" ---
   L'original ouvrait ce sous-menu au survol, ce qui est inutilisable au doigt :
   un appui sur "Agence" suivait le lien et les sous-entrees etaient donc
   inaccessibles. En mode burger, il s'ouvre desormais au clic, via la classe
   .sda-ouvert posee par sda-nav.js.

   Le seuil est celui du burger (991px) et non le 960px du CSS d'origine :
   entre les deux, le menu etait deja replie mais le sous-menu restait en
   survol, donc inutilisable. */

/* "Notre agence" ne sert qu'en mode burger : sur grand ecran, on atteint la
   page en cliquant directement sur "Agence". */
.sda-item-mobile {
    display: none;
}

@media screen and (max-width: 991px) {
    .sda-item-mobile {
        display: block;
    }

    .nav-menu .dropdown-menu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        padding: 15px 10px;
    }

    /* on neutralise l'ouverture au survol... */
    .nav-menu .dropdown:hover .dropdown-menu {
        display: none;
    }

    /* ...au profit du clic (regle placee apres, meme specificite). */
    .nav-menu .dropdown.sda-ouvert .dropdown-menu {
        display: block;
        left: 0;
    }
}

/* --- Page d'accueil : hero plein ecran ---
   La page d'accueil (comme toutes nos pages) est rendue via template_include :
   notre hero .embla-home est un enfant direct du body, donc plein ecran sans
   surcharge. Aucun wrapper ni titre du theme a neutraliser ici. */

/* le <img> de la banniere remplit la slide (100vh, couvre) */
.embla__slide__img-home img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
}

/* le hero plein largeur ne doit pas provoquer de scroll horizontal ;
   fond gris clair comme l'original (le header/footer ont leur propre fond
   bleu nuit, et le hero de la home couvre toute la fenetre). */
body { overflow-x: hidden; background-color: #f0f0f0; }

/* le theme applique un fond bleu nuit sur html et sur #main.site-main : on
   remet le gris clair pour les pages de contenu (le header .navbar et le
   footer .sda-footer gardent leur propre fond navy, le hero home couvre tout). */
html { background-color: #f0f0f0; }
.site-main { background-color: transparent; }

/* on neutralise le "gap" Embla (margin/padding -1rem/1rem) : les slides
   plein ecran s'alignent exactement, sans slide voisine qui depasse. */
.embla__container-home { margin-left: 0; }
.embla__slide-home { padding-left: 0; }

/* --- Mentions legales --- */

/* Le style des sous-titres est porte par .sub-title dans le CSS repris. Cette
   page etant editable en Gutenberg natif, un titre H3 ajoute par le client
   n'aurait pas cette classe : on applique donc le meme style a tout h3 du bloc.
   Declarations reprises telles quelles de .sub-title et .legal-wrapper h1
   (cf. sda-site.css). */
.legal-wrapper h3 {
    text-transform: uppercase;
    color: #15161a;
    font-weight: 400;
    border-bottom: 1px solid hsla(33, 8%, 79%, .5);
    padding-bottom: .5rem;
    margin: 1.5rem 0;
    font-size: 35px;
}

/* --- Fiche projet --- */

/* le hero occupe toute la largeur.
   On ne met PAS display:block : l'image de l'original reste inline, ce qui
   laisse 7px sous elle (le talon de la ligne de base). On reproduit ce
   comportement, sinon la page est 7px plus courte que l'original. */
.project-image img {
    width: 100%;
}

/* le <img> remplit la slide du carrousel (hauteur fixee par le CSS repris) */
.embla__slide__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* meme neutralisation du "gap" que sur la home, pour aligner les slides */
.embla__container { margin-left: 0; }
.embla__slide { padding-left: 0; }