/* ===========================================================================
   Retouches demandées par Naila Alloui le 20 août 2026 — absorbées au mandat.
   Agence Minimal, 2026-09-14. Fichier séparé de style.css, qui appartient aux
   devs offshore (Digital4Design) : on ne veut pas de conflit au prochain sync.
   Chargé par inc/assets.php après StyleCSS et ResponsiveCSS.
   =========================================================================== */

/* --- G1 · Logos des réseaux sociaux au lieu des mots ----------------------- */

.socialIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    line-height: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.socialIcon:hover,
.socialIcon:focus-visible {
    opacity: 0.7;
    color: currentColor;
}
.socialIcon svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Le nom du réseau reste dans le DOM pour les lecteurs d'écran, hors écran.
   (Le thème ne définit pas .screen-reader-text — on le pose ici.) */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pied de page : la colonne était empilée pour des mots, une rangée pour des logos. */
.social_icon--logos {
    flex-direction: row;
    align-items: center;
    gap: 18px;
}

/* Bloc « Suivez-nous » de l'accueil : le cadre carré des anciens libellés
   devient un bouton rond à la taille du logo. */
.sicial_on_img a.socialIcon {
    padding: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
}
.sicial_on_img a.socialIcon:hover {
    transform: scale(1.1);
    opacity: 1;
    background: rgba(255, 255, 255, 0.14);
}

/* --- A1 · Descendre « Une alliance d'experts » (big carrousel de l'accueil) -
   Le bloc était collé à 28px du haut, donc sous l'en-tête fixe (~80px) et en
   travers des visages. On le descend sous l'en-tête. */

.bigCarousel .slide-content {
    top: 150px;
}
@media (max-width: 991px) {
    .bigCarousel .slide-content { top: 120px; }
}
@media (max-width: 575px) {
    .bigCarousel .slide-content { top: 100px; }
}

/* --- C1 · Bouton « offres d'emploi » plus gros (page Carrière, ID 425) ------
   Portée volontairement limitée à cette page : la même classe .btn sert
   ailleurs, dont l'accueil. */

body.page-id-425 .contentAndButton .btn {
    font-size: 18px;
    padding: 14px 32px;
    border-radius: 14px;
    font-weight: 500;
}
@media (max-width: 575px) {
    body.page-id-425 .contentAndButton .btn {
        font-size: 16px;
        padding: 12px 24px;
    }
}

/* --- CT1 · Agrandir les titres « Québec » et « Montréal » (page Contact) ---- */

.contact_info_section .locations_card_sngle > .row span.w-100,
.contact_info_section .locations_card_sngle span.w-100 {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 500;
    display: block;
}
@media (max-width: 767px) {
    .contact_info_section .locations_card_sngle span.w-100 {
        font-size: 26px;
    }
}

/* ===========================================================================
   Appel Naila du 14 septembre 2026
   =========================================================================== */

/* --- Carrousel de photos : affordance de glissement ------------------------
   Curseur rond qui suit la souris + flèches. Voir inc/carrousel-drag.js. */

.sliderSection .hsSlider {
    position: relative;
}
.sliderSection .hsSlider.aDrag,
.sliderSection .hsSlider.aDrag .slideCard,
.sliderSection .hsSlider.aDrag img {
    cursor: none;              /* remplacé par le curseur dessiné */
}
.dragCursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    pointer-events: none;      /* ne doit jamais intercepter le glissement */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(11, 5, 6, 0.72);
    backdrop-filter: blur(3px);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: opacity 0.18s ease, scale 0.18s ease;
}
.sliderSection .hsSlider.aDrag .dragCursor { opacity: 1; }
.sliderSection .hsSlider.enDrag .dragCursor { scale: 0.88; }
.dragCursor svg { width: 26px; height: 26px; display: block; }

/* Pas de curseur dessiné si la personne préfère moins d'animation, ni au doigt. */
@media (prefers-reduced-motion: reduce) {
    .dragCursor { transition: none; }
}
@media (hover: none) {
    .dragCursor { display: none; }
    .sliderSection .hsSlider.aDrag,
    .sliderSection .hsSlider.aDrag .slideCard,
    .sliderSection .hsSlider.aDrag img { cursor: auto; }
}

/* Commandes visibles au doigt et au clavier, là où le curseur ne dit rien :
   pastilles à gauche (demandées à l'appel du 14 sept.), flèches à droite. */
.sliderNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
}
.sliderDots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sliderDots__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c9c9ce;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}
.sliderDots__dot.estActive {
    background: #0B0506;
    width: 26px;
    border-radius: 99px;
}
.sliderDots__dot:hover { background: #8a8a90; }
.sliderDots__dot.estActive:hover { background: #0B0506; }
.sliderDots__dot:focus-visible { outline: 2px solid #0B0506; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sliderDots__dot { transition: none; } }
.sliderNav__fleches {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}
.sliderNav__btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #d9d9dd;
    background: #fff;
    color: #0B0506;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.sliderNav__btn:hover { background: #EFEEEF; border-color: #EFEEEF; }
.sliderNav__btn:focus-visible { outline: 2px solid #0B0506; outline-offset: 2px; }
.sliderNav__btn svg { width: 20px; height: 20px; }

/* --- Pages des 4 champs d'expertise (familles) -----------------------------
   Elles existaient sans titre ni contenu propre. On ajoute un titre quand il
   n'y a pas de bandeau image, et la liste des sous-expertises en portes
   d'entrée. Demandé par la cliente à l'appel du 14 septembre 2026. */

.domaineTitreSeul h1 {
    margin: 0;
}
/* Sans bandeau image, le titre et la section suivante se touchaient : les deux
   se lisaient comme un seul titre empilé. La marge va ici et non en padding sur
   la section suivante : celle-ci porte `pt-0` de Bootstrap, donc !important. */
.domaineTitreSeul {
    /* Espacement porté ici, sans les utilitaires Bootstrap du thème :
       `pb-0` / `pt-0` sont en !important et écrasaient tout réglage. */
    padding-top: 120px;
    padding-bottom: 48px;
}
@media (max-width: 767px) {
    .domaineTitreSeul { padding-top: 72px; padding-bottom: 32px; }
}

.sousExpertises__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 991px) { .sousExpertises__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sousExpertises__grille { grid-template-columns: 1fr; } }

.sousExpertises__carte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 84px;
    padding: 18px 20px;
    border: 1px solid #e3e3e6;
    border-radius: 12px;
    background: #fff;
    color: #0B0506;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sousExpertises__carte:hover {
    background: #EFEEEF;
    border-color: #EFEEEF;
    color: #0B0506;
    transform: translateY(-2px);
}
.sousExpertises__carte:focus-visible {
    outline: 2px solid #0B0506;
    outline-offset: 2px;
}
.sousExpertises__nom {
    font-size: 17px;
    line-height: 1.35;
}
.sousExpertises__fleche {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #d9d9dd;
    transition: transform 0.2s ease;
}
.sousExpertises__carte:hover .sousExpertises__fleche { transform: translateX(3px); }
.sousExpertises__fleche svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
    .sousExpertises__carte,
    .sousExpertises__carte:hover,
    .sousExpertises__fleche { transition: none; transform: none; }
}

/* --- E1 · Rapprocher l'accordéon du texte d'intro (page Champs d'expertise) -
   Demande Naila du 20 août, tranchée sur mesure : le Figma laisse 80px entre le
   bas de l'intro et la première ligne de l'accordéon (cadre 719:2550), le site
   en laissait 120. C'est notre écart, pas un nouveau souhait — donc au mandat.
   Portée à la page 423 : .historySection sert aussi ailleurs (À propos). */

body.page-id-423 .historySection {
    padding-bottom: 80px;
}