/* custom-hassane.css
   Surcouche de personnalisation pour le site Al Hassane Kionon.
   Chargé APRÈS les fichiers CSS d'origine du thème Reeni — ne jamais éditer
   les fichiers du thème directement, tout passe par ce fichier. */

/* Bandeau de titre "About Me" (Phase 5) : le thème ne prévoit pas de
   paragraphe d'intro dans .breadcrumb-inner (juste un titre + fil
   d'Ariane), sur aucune page du site. Ajout minimal pour le texte d'intro
   validé, sans nouveau composant. */
.breadcrumb-inner .description {
    max-width: 700px;
    margin: 16px auto 24px;
    color: var(--color-gray);
    font-size: 16px;
    line-height: 30px;
}

/* Section "Vision" d'about.html (Phase 18, fusion depuis vision.html) : même
   traitement typographique que .breadcrumb-inner .description ci-dessus —
   le thème ne prévoit pas de style de paragraphe autonome à ce niveau. */
.vision-area .vision-para {
    max-width: 700px;
    margin: 0 auto;
    color: var(--color-gray);
    font-size: 16px;
    line-height: 30px;
}

/* Logo du header principal (.header-one) : le thème fixe volontairement
   .header-one .header-content .logo img à max-width:max-content (aucune
   limite), en comptant sur un fichier logo déjà pré-recadré à la bonne
   taille d'affichage. Nos fichiers logo-hassane-kio-16x9-*.png sont exportés
   en pleine résolution (1000×400px) — sans cette règle, le logo s'affichait
   à sa taille native et envahissait tout le header. Taille modérée, cohérente
   avec les autres emplacements du logo (sidebar/menu mobile/footer, déjà
   bornés à 120px par la règle générique .logo img du thème). */
.header-one .header-content .logo img {
    max-height: 64px;
    width: auto;
    max-width: 220px;
}

/* Paragraphe du Hero : légèrement agrandi par rapport aux 16px par défaut du
   thème, plus lisible à côté du H1 (nom) et du sub-title. */
.banner-four-main-wrapper .inner .description {
    font-size: 18px;
    line-height: 32px;
}

/* Section "Mes principes" (ex "My Expertise" du thème) :
   badges circulaires réutilisés avec une icône FontAwesome au lieu du logo SVG
   d'origine — pas de nouvel asset icône dédié pour l'instant. */
.my-expertise-card-wrap .expertise-card-left .expertise-card-logo i {
    color: #fff;
    font-size: 28px;
}

/* Section "Domaines d'intervention" (ex "My Skill" du thème, réintroduite en
   Phase 4) : mêmes badges circulaires pleins que "Mes principes" (icônes
   FontAwesome génériques, pas de logos Framer/Webflow/Figma/WordPress
   d'origine — non pertinents pour ce contenu), pour une cohérence visuelle
   entre les deux sections. */
.my-skill-card-style-two .my-skill-card .card-icon {
    background: var(--color-primary);
    border: 2px solid var(--color-border);
    color: #fff;
    font-size: 28px;
}

/* Bouton WhatsApp flottant (remplace le widget de faux chat du thème,
   Phase 2b) : réutilise la position/taille de l'ancien bouton circulaire du
   thème (.ready-chatting-option label dans style.css), coloré en vert
   WhatsApp pour rester immédiatement reconnaissable. */
.tmp-ready-chat .whatsapp-float-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1019;
    height: 55px;
    width: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #25D366;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.tmp-ready-chat .whatsapp-float-btn:hover {
    transform: scale(1.08);
    color: #fff;
}
@media only screen and (max-width: 575px) {
    .tmp-ready-chat .whatsapp-float-btn {
        height: 44px;
        width: 44px;
        font-size: 22px;
    }
}

/* Hero de l'accueil (Phase 3) : le thème dimensionnait ce H1 pour un nom
   court ("Jackson Clark" — jusqu'à 110px de haut sur desktop), ce qui fait
   déborder une phrase-manifeste complète sur toute la hauteur de l'écran.
   Taille ramenée à une échelle lisible pour du texte long. */
.banner-four-main-wrapper .inner .title {
    font-size: clamp(30px, 4vw, 58px) !important;
    line-height: 1.25 !important;
}
/* Le sub-title combine maintenant nom + fonction sur une ligne : le
   text-transform:capitalize du thème mettait "De" en majuscule au milieu de
   la phrase ("Fondateur De Studio KIO") — désactivé ici. */
.banner-four-main-wrapper .inner .sub-title {
    text-transform: none;
}

/* Hero de l'accueil (Phase 3) : le thème ne prévoyait qu'un seul bouton dans
   .button-area-banner-three, on en affiche 2 ("Découvrir ma vision" /
   "Explorer mes projets") — ajoute un espacement propre entre eux. */
.button-area-banner-three {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Section "About Me" de l'accueil (Phase 3) : les 2 cartes du thème sont
   devenues des liens directs vers Vision / Entreprises — le thème ne définit
   pas .about-us-card comme bloc quand c'est un <a>, on le force ici. */
.about-us-section-card a.about-us-card {
    display: block;
    text-decoration: none;
}

/* Section "Clients Testimonial" de l'accueil (Phase 3) : masquée en attendant
   de vrais témoignages clients/partenaires — aucun n'est disponible pour
   l'instant. Même logique que le widget de chat en Phase 2a : le HTML reste
   en place, seul l'affichage est coupé. À réactiver quand du contenu réel
   sera fourni. */
.clients-testimonial-area {
    display: none !important;
}

/* Section "Latest Blog" de l'accueil (Phase 11, réactivée en Phase 27) :
   masquée tant qu'aucun article réel n'existait (état "à venir" honnête, même
   logique que Testimonials ci-dessus). Connectée à hk_articles en Phase 27
   (4 articles d'exemple, gérés depuis l'admin) — la section n'est plus
   masquée, index.php ne rend d'ailleurs plus du tout ce bloc si $articles
   est vide (voir le if PHP autour de la section, pas seulement du CSS). */

/* Galerie à onglets "Latest Portfolio" de l'accueil (Phase 12) : reste masquée,
   aucun contenu réel prévu pour elle — c'est .tmp-latest-portfolio (ci-dessous)
   qui a été connectée aux vraies réalisations en Phase 27, pas ce bloc-ci,
   pour éviter un doublon de section portfolio sur la même page. */
.color-primary-3rd .tmp-portfolio-area {
    display: none !important;
}

/* .tmp-latest-portfolio ("Recent Portfolio", Phase 12) : démasquée en Phase 27,
   connectée à hk_realisations (4 réalisations d'exemple, gérées depuis
   l'admin). Réutilisée telle quelle par entreprises.html depuis la Phase 8 —
   d'où la règle ci-dessus toujours bornée à .color-primary-3rd historiquement,
   même si elle ne masque plus rien ici désormais. */

/* Page "About Me" (Phase 5→7) : timeline "Parcours" masquée en Phase 5, puis
   réactivée en Phase 7 avec du contenu PLACEHOLDER (dates "[Année à
   confirmer]", ancré sur les 5 entreprises réelles mais non validé par le
   client) — voir README §PLACEHOLDER. Règle conservée en commentaire pour
   remasquer facilement si besoin ; ne pas supprimer sans relire le contexte
   ci-dessus.
.education-experience > .container > h2.custom-title,
.education-experience > .container > .row.g-5 {
    display: none !important;
}
*/

/* Page "About Me" : le bloc "Experiences" a été masqué en Phase 5 (il
   contenait alors un faux témoignage du thème, "Fatima Asrafy"/lorem ipsum),
   puis ce contenu a été remplacé par la vraie photo + titre "Expériences"
   (Phase 26b) — la règle de masquage avait été oubliée à ce moment-là.
   Démasqué en Phase 26e suite au retour du client ("afficher les blocs
   masqués"). */

/* Page "Entreprises" (Phase 8) : visuel neutre pour les 5 cartes en attendant
   les vrais logos/photos de chaque entreprise (dossier assets/images/entreprises/
   toujours vide). Remplace les photos démo du thème (hors-sujet, aucun rapport
   avec les entreprises réelles) par un bloc de la couleur de la charte, le nom
   de l'entreprise, et un badge "Visuel à venir" explicite — pour ne jamais
   laisser croire à un vrai visuel de marque. */
.img-box.entreprise-placeholder-visual {
    background: linear-gradient(135deg, var(--color-primary) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.entreprise-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 20px;
    text-align: center;
    text-decoration: none;
}
.entreprise-placeholder-name {
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}
.entreprise-placeholder-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Page "Réalisations" (Phase 8) : état "à venir" honnête — aucune réalisation
   réelle n'est documentée pour l'instant, donc pas de grille de faux projets.
   Bloc simple centré, style minimal réutilisant les couleurs du thème. */
.realisations-coming-soon {
    padding: 60px 0;
}
.realisations-coming-soon .title {
    color: var(--color-heading);
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}
.realisations-coming-soon .description {
    color: var(--color-gray);
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 32px;
}

/* Page "About Me" (Phase 9) : le thème dimensionne .counter-title à 48px pour
   de courts chiffres ("20k+", "200+"). Deux des 3 petites cartes du Counter
   Area affichent du texte ("Ouagadougou", "[Année à confirmer]") qui, à cette
   taille, débordait avec des césures au milieu des mots. Taille réduite pour
   ces cartes spécifiquement, sans toucher aux cartes numériques voisines. */
.counter-card.counter-card-text .counter-title {
    font-size: 24px;
    line-height: 1.3;
    text-transform: none;
}

/* Champ honeypot anti-spam du formulaire de contact (handlers/send-contact.php) :
   caché hors-écran plutôt qu'en display:none, pour rester invisible aux
   utilisateurs tout en restant "visible" aux bots peu sophistiqués. */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* Couleur d'accent d'index.html (Phase 15) : le thème pilote index.html avec
   body.color-primary-3rd, qui remappe --color-primary/--color-primary-alt sur
   --color-primary-3rd (#FDC448, jaune/or) — visible sur le hero, les boutons
   et badges de la page d'accueil. Remplacé par le rouge exact du logo
   (#CA0A0A, extrait par pipette sur les 4 fichiers logo-hassane-kio-*.png —
   valeur identique et cohérente sur les 4 fichiers). Un seul point de
   modification ici : style.css n'est jamais édité directement, et toutes les
   règles qui consomment --color-primary-3rd (style.css lignes 65/27293-27297)
   héritent automatiquement de la nouvelle valeur. Contraste texte blanc sur
   ce fond largement amélioré au passage (~1.6:1 avec l'ancien jaune, sous le
   seuil WCAG AA ; ~5.9:1 avec le rouge, conforme AA texte normal). */
body.color-primary-3rd {
    --color-primary-3rd: #CA0A0A;
}

/* Suite de l'audit couleur d'accent (Phase 15) : le thème code aussi le même
   jaune/or en dur (rgba(253, 196, 72, ...)) à 3 endroits, sans passer par la
   variable --color-primary-3rd ci-dessus — donc non couverts par son
   override. Convertis ici en rgba équivalent du rouge du logo (202, 10, 10).
   - .active-bg : fond du principe/domaine actuellement affiché ("Mes
     principes" et "Domaines d'intervention" sur index.html).
   - .years-of-experience-card : ombre portée de la carte "5 Entreprises
     fondées" sur index.html.
   - .design-card : même famille de carte que ci-dessus ; classe présente
     dans le thème mais non utilisée sur aucune des 16 pages du site —
     corrigée par cohérence/prévention, sans effet visible actuellement. */
.services-widget.v4 .active-bg {
    background: rgba(202, 10, 10, 0.0901960784);
}
.about-us-left-content-wrap .years-of-experience-card,
.about-us-left-content-wrap .design-card {
    box-shadow: 15px 26.023px 50px 0px rgba(202, 10, 10, 0.04);
}

/* Menu principal (Phase 18) : icônes sociales retirées de la barre de menu
   (restent dans le sidebar offcanvas, le menu mobile et le bouton WhatsApp
   flottant) pour libérer de l'espace horizontal — utilisé ici pour agrandir
   le texte des liens du menu (16px par défaut du thème → 18px). */
.tmp-mainmenu-nav .tmp-mainmenu > li > a {
    font-size: 18px;
}
.tmp-mainmenu-nav .tmp-mainmenu > li {
    margin: 10px 6px;
}

/* Bandeaux photo enrichis (Phase 26) : image de fond posée en style inline
   par page (voir hk_page_banners), dégradé sombre superposé pour garder le
   titre/fil d'ariane lisibles quelle que soit la photo. Sans photo choisie
   pour une page, .breadcrumb-bg (thème, inchangée) reste utilisée seule. */
.breadcrumb-area.has-banner-photo {
    position: relative;
    background-size: cover;
    /* "center top" plutôt que "center" : les photos utilisées ici sont des
       portraits verticaux recadrés dans un bandeau large — ancrer en haut
       garde le visage dans le cadre au lieu de risquer une coupe au niveau
       du cou/torse avec un centrage vertical pur. */
    background-position: center top;
    /* Hauteur relative au viewport (pas un pixel fixe) pour que la photo
       ait vraiment la place de respirer, quelle que soit la taille d'écran
       — un premier ajustement à 560px restait encore trop court selon le
       client. */
    min-height: 75vh;
    display: flex;
    align-items: center;
    padding-top: 160px;
    padding-bottom: 80px;
}
@media only screen and (max-width: 767px) {
    .breadcrumb-area.has-banner-photo {
        min-height: 55vh;
        padding-top: 110px;
        padding-bottom: 50px;
    }
}
.breadcrumb-area.has-banner-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.72) 100%);
}
.breadcrumb-area.has-banner-photo .container {
    position: relative;
    z-index: 1;
}
.breadcrumb-area.has-banner-photo .breadcrumb-inner .title,
.breadcrumb-area.has-banner-photo .breadcrumb-inner .description,
.breadcrumb-area.has-banner-photo .breadcrumb-inner .page-list li,
.breadcrumb-area.has-banner-photo .breadcrumb-inner .page-list li.icon i {
    color: #fff;
}
.breadcrumb-area.has-banner-photo .breadcrumb-inner .page-list li.active {
    color: var(--color-primary);
}

/* Diaporama "About Me" (Phase 27, réutilisé sur about.php en Phase 26e) :
   bandeau plein largeur, 3 photos client en rotation automatique (Swiper,
   déjà vendorisé). Purement décoratif — pas de texte superposé, pas de
   flèches de navigation. Hauteur augmentée en Phase 26e (480→620px) suite
   au retour du client sur l'accueil (diaporama jugé trop bas). */
.about-me-slideshow-area {
    width: 100%;
    height: 380px;
    overflow: hidden;
    margin-top: 60px;
    margin-bottom: 80px;
}
.about-me-slideshow-swiper,
.about-me-slideshow-swiper .swiper-wrapper {
    height: 100%;
    transition-timing-function: linear !important;
}
.about-me-slideshow-swiper .swiper-slide {
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}
.about-me-slideshow-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.4s ease;
}
.about-me-slideshow-swiper .swiper-slide:hover img {
    transform: scale(1.05);
}
@media only screen and (max-width: 767px) {
    .about-me-slideshow-area {
        height: 280px;
        margin-top: 40px;
        margin-bottom: 50px;
    }
}

/* Section "Mes Principes" (Phase 28 & 36) : Passage strict à 4 principes en 2 colonnes avec alignement parfait et zéro coupure de mot */
.my-expertise-area {
    padding-top: 90px;
    padding-bottom: 90px;
    margin-bottom: 90px;
}
.my-expertise-area .services-widget.v4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
@media only screen and (max-width: 991px) {
    .my-expertise-area .services-widget.v4 {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
.my-expertise-area .service-item {
    margin-bottom: 0;
    height: auto !important;
    overflow: visible !important;
}
.my-expertise-area .active-bg {
    display: none;
}
.my-expertise-area .my-expertise-card-wrap {
    position: relative;
    height: auto !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    padding: 35px 30px;
    border-top: 3px solid var(--color-primary);
    background: rgba(20, 20, 20, 0.7);
    border-radius: 16px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.my-expertise-area .my-expertise-card-wrap:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(202, 10, 10, 0.18);
}
.my-expertise-area .principle-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: rgba(202, 10, 10, 0.35);
}
.my-expertise-area .my-expertise-card-wrap .expertise-card-left {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    height: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    margin-bottom: 18px !important;
    padding-right: 50px; /* Évite de chevaucher le numéro 01, 02... */
}
.my-expertise-area .my-expertise-card-wrap .expertise-card-left .expertise-card-logo {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    flex-shrink: 0 !important;
    border-radius: 50%;
}
.my-expertise-area .my-expertise-card-wrap .expertise-card-left .title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important;
    color: var(--color-heading);
}
.my-expertise-area .my-expertise-card-wrap .para {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
}
@media only screen and (max-width: 575px) {
    .my-expertise-area .my-expertise-card-wrap {
        padding: 28px 20px;
    }
    .my-expertise-area .my-expertise-card-wrap .expertise-card-left {
        gap: 15px !important;
        padding-right: 40px;
    }
    .my-expertise-area .my-expertise-card-wrap .expertise-card-left .expertise-card-logo {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }
    .my-expertise-area .my-expertise-card-wrap .expertise-card-left .title {
        font-size: 20px !important;
    }
}

/* Section Actualités sur l'accueil (Phase 36 : mise en avant juste après les principes, 2 rangées de 3 colonnes) */
.blog-and-news-are.home-news-highlight {
    padding-top: 10px;
    padding-bottom: 90px;
}
.blog-and-news-are .blog-card-style-two {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    background: #14171f;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.blog-and-news-are .blog-card-style-two:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    border-color: rgba(232, 49, 42, 0.35);
}
.blog-and-news-are .blog-card-style-two .blog-card-img .img-box {
    overflow: hidden;
    height: 240px;
    border-radius: 16px 16px 0 0;
}
.blog-and-news-are .blog-card-style-two .blog-card-img .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.blog-and-news-are .blog-card-style-two:hover .blog-card-img .img-box img {
    transform: scale(1.05);
}
.blog-and-news-are .blog-card-style-two .blog-content-wrap {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px;
}
.blog-and-news-are .blog-card-style-two .blog-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 10px;
    margin-bottom: 22px;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-and-news-are .blog-card-style-two .read-more-btn {
    margin-top: auto;
}

/* Section "Domaines d'intervention" (Phase 27) : photo client (vision.PNG) en
   fond tamisé de la boîte arrondie .tpm-custom-box-bg (remplace son fond gris
   plat par défaut, partagé avec "Mes Principes" — donc scopé à cette section
   uniquement). Le fondu à la sortie de la section est piloté en JS
   (ScrollTrigger, voir index.php) sur l'opacité de #domaines-bg-photo. */
#domaines-intervention-section .tpm-custom-box-bg {
    position: relative;
    overflow: hidden;
    background: var(--color-secondary);
    margin-bottom: 100px;
}
#domaines-intervention-section .domaines-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/domaines/background-vision.jpg');
    background-size: cover;
    background-position: center;
}
#domaines-intervention-section .domaines-bg-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 6, 0.75);
}
#domaines-intervention-section .tpm-custom-box-bg > .container {
    position: relative;
    z-index: 1;
}
#domaines-intervention-section .my-skill-area-left-content-wrap .subtitle,
#domaines-intervention-section .my-skill-area-left-content-wrap .title,
#domaines-intervention-section .my-skill-area-left-content-wrap .description {
    color: #fff;
}
@media only screen and (max-width: 767px) {
    #domaines-intervention-section .tpm-custom-box-bg {
        margin-bottom: 60px;
    }
}

/* Bouton hamburger du header, version bureau uniquement (Phase 26e) : ouvre
   .tmp-sidebar-area (bio + téléphone/email/adresse), déjà tous dupliqués
   dans le footer sur chaque page — pas d'utilité propre identifiée pour
   l'instant. Le sélecteur cible précisément son wrapper Bootstrap
   (.d-none.d-xl-block, inc/nav.php) : le bouton mobile équivalent
   (.d-block.d-xl-none), qui ouvre le menu de navigation principal sur petit
   écran, a un wrapper différent et n'est pas concerné par cette règle. À
   réactiver simplement en retirant cette règle si une utilité est trouvée. */
.tmp-side-collups-area.d-none.d-xl-block {
    display: none !important;
}

/* Boutons (Phase 26f) : le thème met .tmp-btn en "capitalize" (style.css),
   ce qui met chaque mot en majuscule au rendu — perçu par le client comme
   des majuscules au milieu de la phrase, contraire à la typographie
   française. Demande explicite : tout en capitales plutôt que capitalize.
   Le texte source des boutons reste en minuscules-sauf-première-lettre dans
   les fichiers PHP, seul le rendu change ici. */
.tmp-btn {
    text-transform: uppercase;
}

/* Bug d'affichage `actualites.php` (Phase 26g) : le thème définit
   .blog-card { height: 100%; } (style.css). Bootstrap étire les colonnes
   d'une .row en flex (align-items:stretch par défaut) sur la hauteur de la
   plus grande — ici la colonne de contenu (4 cartes empilées), bien plus
   haute que la sidebar. Chaque carte .blog-card héritait alors de
   height:100% CETTE hauteur de colonne déjà étirée (~3400px), pas sa propre
   hauteur naturelle (~800px) — 4 cartes cumulées produisaient une page de
   ~15000px avec d'énormes vides. Confirmé par mesure réelle (Chrome/Playwright)
   avant correction. .blog-card est utilisée correctement ailleurs (une seule
   carte par colonne étirée, ex. about.php) — le override ci-dessous est donc
   scopé à cette page uniquement, pas une correction globale de .blog-card. */
.blog-classic-area-wrapper .blog-card {
    height: auto;
}

/* Effet hover des galeries photos d'entreprises & certifications (Phase 28,
   dé-encadré en Phase 29). Le cadre (border 1px + box-shadow portée) et son
   équivalent au survol ont été retirés : retour client sur les pages détail
   entreprise, « les rectangles autour des informations, je ne veux pas ces
   rectangles-là ». Il ne reste que le recadrage (overflow + radius) et
   l'agrandissement au survol. Le sélecteur couvre aussi les certificats
   d'about.php — dé-encadrement appliqué là aussi volontairement, la demande
   vaut pour tous les endroits similaires du site. */
.project-details-area-wrapper a.glightbox,
.certifications-area a.glightbox {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}
.project-details-area-wrapper a.glightbox img,
.certifications-area a.glightbox img {
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.45s ease;
    backface-visibility: hidden;
}
.project-details-area-wrapper a.glightbox:hover img,
.certifications-area a.glightbox:hover img {
    transform: scale(1.06);
    filter: brightness(1.08) contrast(1.04);
}

/* =========================================================================
   Gabarit éditorial des pages détail entreprise (Phase 29)
   =========================================================================
   Retour client sur entreprise-details.php : « il faut que ce soit joli comme
   un article de blog, au lieu d'être juste des cases ou des tableaux
   d'informations : un bon titre, un texte, un bon titre, un texte, et ensuite
   la galerie de photos ».

   Trois changements de fond, tous applicables au GABARIT (donc à toutes les
   fiches entreprise, pas seulement aux deux relues par le client) :

   1. `.rich-content` (le corps de l'article, alimenté par
      hk_entreprises.content) n'avait AUCUNE règle CSS dans tout le projet.
      La fiche La Vida Loca ne tenait debout que grâce à des style="" inline
      stockés en base ; Boutique LUI, dont le contenu est du HTML nu
      (<p>, <h3>, <blockquote>), n'avait donc aucune mise en forme. Le rythme
      titre/texte est désormais porté par la feuille de style, identique
      partout.
   2. L'encadré « Informations clés » (fond gris + bordure, en inline dans le
      PHP) devient une colonne éditoriale sans cadre — c'est le « tableau
      d'informations » que le client ne voulait plus.
   3. Galerie et projets sont sortis de la colonne col-lg-8 (voir
      entreprise-details.php) : ils sont ici mis en page pleine largeur, ce qui
      supprime la zone morte laissée à droite quand l'article était plus court
      que la grille photo. */

/* --- Rythme vertical des trois blocs ------------------------------------ */
.entreprise-article .entreprise-gallery,
.entreprise-article .entreprise-projets {
    margin-top: 90px;
}

/* Titres de section (« Galerie photos », « Projets & réalisations »).
   Plus de trait `border-top` pleine largeur entre les sections : la séparation
   se fait par le blanc et par le filet d'accent court sous le titre. */
.entreprise-article .entreprise-section-title {
    font-size: 30px;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 38px;
    padding-bottom: 16px;
    position: relative;
}
.entreprise-article .entreprise-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: var(--color-primary);
}

/* --- Corps de l'article --------------------------------------------------
   Volontairement NON scopé à .entreprise-article : la classe .rich-content
   est aussi utilisée par actualite-details.php (ligne 79) pour le corps des
   articles, qui souffrait exactement du même manque de mise en forme. Une
   seule définition sert les deux types de pages. */
.rich-content {
    max-width: 72ch;
    font-size: 17px;
    line-height: 1.85;
    color: #c9c9c9;
}
.rich-content > *:first-child {
    margin-top: 0;
}
.rich-content p {
    margin-bottom: 1.5em;
}
/* Chapô : premier paragraphe d'accroche, et repli `short_description` des
   fiches sans contenu rédigé (ex. La Terra Cotta, content = NULL). */
.rich-content .lead,
.rich-content .lead-paragraph {
    font-size: 20px;
    line-height: 1.75;
    color: #e6e6e6;
    margin-bottom: 2em;
}
.rich-content h2,
.rich-content h3,
.rich-content h4 {
    color: #fff;
    line-height: 1.3;
    margin: 2.4em 0 0.6em;
}
.rich-content h2 {
    font-size: 30px;
}
.rich-content h3 {
    font-size: 24px;
    padding-bottom: 14px;
    position: relative;
}
.rich-content h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: var(--color-primary);
}
.rich-content h4 {
    font-size: 20px;
}
.rich-content ul,
.rich-content ol {
    margin: 0 0 1.5em;
    padding-left: 1.25em;
}
.rich-content li {
    margin-bottom: 0.5em;
}
.rich-content strong {
    color: #fff;
}
/* Bootstrap donne à .blockquote une simple taille de police ; le thème n'en
   fait rien. Traitement éditorial : filet vertical, pas d'encadré. */
.rich-content blockquote {
    margin: 2.4em 0;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--color-primary);
    font-size: 20px;
    font-style: italic;
    color: #e6e6e6;
}
.rich-content blockquote p:last-child {
    margin-bottom: 0;
}
.rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Encadrés saisis dans le contenu (Phase 29b).
   Retour client : « j'aurais préféré ne pas percevoir les rectangles au bord
   fin ». Ceux qui restaient ne venaient pas du gabarit mais du HTML de la
   fiche elle-même : les colonnes « Nos Chambres / Le Restaurant / Bar &
   Lounge » et le bloc PDF de La Vida Loca portaient les classes utilitaires
   Bootstrap `border border-secondary bg-dark` et `border border-danger`.
   On les neutralise ici plutôt que dans la base : la règle vaut pour toutes
   les fiches, y compris celles rédigées plus tard depuis l'administration,
   et la mise en page (colonnes, espacements) est conservée intacte —
   seul le cadre disparaît.
   `!important` est nécessaire : les utilitaires Bootstrap en portent un. */
.rich-content [class*="border"],
.rich-content .card,
.rich-content .card-body {
    border: 0 !important;
}
.rich-content .bg-dark,
.rich-content .bg-black,
.rich-content .bg-secondary,
.rich-content .bg-body-tertiary,
.rich-content .card,
.rich-content .card-body {
    background: none !important;
    box-shadow: none !important;
}
/* Le padding des anciennes cartes créait un décalage à gauche une fois le
   cadre retiré : le texte ne s'alignait plus sur le reste de l'article. */
.rich-content .row > [class*="col-"] > [class*="border"],
.rich-content .row > [class*="col-"] > .card {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- Colonne « Informations clés » (sans cadre) -------------------------- */
.entreprise-article .entreprise-facts-sticky {
    top: 110px;
    z-index: 10;
}
.entreprise-article .sidebar-facts {
    padding-left: 26px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.entreprise-article .sidebar-facts-title {
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 28px;
}
.entreprise-article .sidebar-fact {
    margin-bottom: 26px;
}
.entreprise-article .sidebar-fact:last-child {
    margin-bottom: 0;
}
.entreprise-article .sidebar-fact-label {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 6px;
}
.entreprise-article .sidebar-fact-value {
    display: block;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    text-decoration: none;
}
a.sidebar-fact-value:hover {
    color: var(--color-primary);
}
/* Réseaux : liens texte séparés par un filet, plus de boutons pilule. */
.entreprise-article .sidebar-fact-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.entreprise-article .sidebar-fact-links a {
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.3s ease;
}
.entreprise-article .sidebar-fact-links a i {
    width: 18px;
    margin-right: 8px;
    color: var(--color-primary);
}
.entreprise-article .sidebar-fact-links a:hover {
    color: var(--color-primary);
}

/* --- Galerie pleine largeur --------------------------------------------- */
.entreprise-article .entreprise-gallery a.glightbox img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* --- Cartes projets & réalisations (sans cadre) -------------------------- */
.entreprise-article .entreprise-projet-thumb {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 20px;
}
.entreprise-article .entreprise-projet-thumb img {
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.entreprise-article .entreprise-projet-thumb:hover img {
    transform: scale(1.06);
}
.entreprise-article .entreprise-projet-title {
    font-size: 21px;
    line-height: 1.35;
    margin: 0 0 12px;
}
.entreprise-article .entreprise-projet-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.entreprise-article .entreprise-projet-title a:hover {
    color: var(--color-primary);
}
.entreprise-article .entreprise-projet-summary {
    font-size: 15px;
    line-height: 1.7;
    color: #a8a8a8;
    margin-bottom: 22px;
}

/* --- Plan du site consultable (Phase 29b) -------------------------------
   Réutilise le gabarit éditorial (.entreprise-article) : mêmes titres de
   section à filet d'accent, pas d'encadré. */
.plan-site-section {
    margin-bottom: 20px;
}
.plan-site-intro {
    color: #a8a8a8;
    font-size: 15px;
    margin: -22px 0 22px;
}
.plan-site-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.plan-site-list li {
    margin-bottom: 12px;
}
.plan-site-list a {
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.3s ease;
}
.plan-site-list a:hover {
    color: var(--color-primary);
}
/* Les fiches de détail sont décalées sous leur page d'index, pour que la
   hiérarchie du site se lise d'un coup d'œil. */
.plan-site-list .plan-site-child {
    padding-left: 20px;
    position: relative;
    margin-bottom: 9px;
}
.plan-site-list .plan-site-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 10px;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
}
.plan-site-list .plan-site-child a {
    font-size: 15px;
    color: #c9c9c9;
}

@media only screen and (max-width: 991px) {
    .entreprise-article .entreprise-gallery,
    .entreprise-article .entreprise-projets {
        margin-top: 60px;
    }
    /* Sous 992px la colonne passe SOUS l'article : le filet vertical gauche
       n'a plus de sens, il devient un filet horizontal de séparation. */
    .entreprise-article .sidebar-facts {
        padding-left: 0;
        padding-top: 28px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
}
@media only screen and (max-width: 767px) {
    .rich-content {
        font-size: 16px;
    }
    .rich-content .lead,
    .rich-content .lead-paragraph {
        font-size: 18px;
    }
    .entreprise-article .entreprise-section-title,
    .rich-content h2 {
        font-size: 24px;
    }
    .rich-content h3 {
        font-size: 20px;
    }
}

/* =============================================================================
   GABARIT DE LECTURE IMMERSIF D'ARTICLE (Phase 33 — Édition Définitive)
   Conçu pour offrir une lisibilité optimale, aérée et centrée sans sidebar.
   ============================================================================= */

/* Conteneur principal de lecture */
.article-reading-wrapper {
    padding-top: 50px;
    padding-bottom: 90px;
}

.article-reading-container {
    max-width: 860px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* --- En-tête éditorial de l'article --- */
.article-hero-header {
    text-align: center;
    margin-bottom: 45px;
}

.article-hero-badge-wrap {
    margin-bottom: 18px;
}

.article-read-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(202, 10, 10, 0.15);
    color: #e8312a;
    border: 1px solid rgba(202, 10, 10, 0.3);
}

.article-hero-title {
    font-size: clamp(2.3rem, 4.4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.article-author-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 15px;
    color: #94a3b8;
    margin-bottom: 15px;
}

.article-author-bar .author-name {
    font-weight: 700;
    color: #ffffff;
}

.article-hero-image-wrap {
    margin: 35px 0 45px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.article-hero-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Typographie haute lisibilité (Graisse normale & Titres imposants) --- */
.article-reading-body .rich-content {
    max-width: 100%;
    font-size: 19px;
    line-height: 1.88;
    color: #f1f5f9;
    font-weight: 400;
}

.article-reading-body .rich-content p {
    margin-bottom: 1.15em;
    line-height: 1.78;
    color: #f1f5f9;
    font-weight: 400;
}

/* Élimination des gouffres verticaux sur les lignes vides générées par les éditeurs */
.article-reading-body .rich-content p:empty,
.article-reading-body .rich-content p:has(> br:only-child) {
    margin-bottom: 0.6em;
    min-height: 1.2em;
}

.article-reading-body .rich-content h2 {
    font-size: clamp(1.85rem, 3.2vw, 2.35rem);
    font-weight: 800;
    line-height: 1.3;
    margin: 2.2em 0 0.7em;
    color: #ffffff;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

.article-reading-body .rich-content h3 {
    font-size: clamp(1.4rem, 2.2vw, 1.65rem);
    font-weight: 700;
    line-height: 1.35;
    margin: 1.8em 0 0.6em;
    color: #ffffff;
}

.article-reading-body .rich-content h4 {
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-weight: 600;
    line-height: 1.4;
    margin: 1.5em 0 0.5em;
    color: #f8fafc;
}

.article-reading-body .rich-content blockquote {
    background: rgba(202, 10, 10, 0.05);
    border-left: 4px solid #ca0a0a;
    padding: 24px 28px;
    border-radius: 0 12px 12px 0;
    margin: 2.2em 0;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #ffffff;
    font-style: italic;
}

.article-reading-body .rich-content blockquote p {
    margin-bottom: 0;
    color: #ffffff;
}

.article-reading-body .rich-content strong {
    color: #ffffff;
    font-weight: 700;
}

/* Image isolée dans le texte (centrée) */
.article-reading-body .rich-content figure.content-inline-image,
.article-reading-body .rich-content .content-inline-image {
    margin: 2.4em auto;
    text-align: center;
    max-width: 100%;
}

.article-reading-body .rich-content figure.content-inline-image img,
.article-reading-body .rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    display: inline-block;
}

.article-reading-body .rich-content figure.content-inline-image figcaption {
    margin-top: 10px;
    font-size: 0.88rem;
    color: #94a3b8;
    font-style: italic;
    text-align: center;
}

/* Galerie intégrée dans le corps de l'article (2 lignes de 4 colonnes max) */
.article-reading-body .rich-content .article-inline-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 2.5em 0;
}

@media (min-width: 768px) {
    .article-reading-body .rich-content .article-inline-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

.article-reading-body .rich-content .article-inline-gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 4 / 3;
    background: #1e293b;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    display: block;
}

.article-reading-body .rich-content .article-inline-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    display: block;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.article-reading-body .rich-content .article-inline-gallery .gallery-item:hover img {
    transform: scale(1.06);
}

/* --- Section de partage : 4 boutons réguliers sur 1 ligne --- */
.article-share-section {
    margin-top: 65px;
    padding-top: 35px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.article-share-title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff !important;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.share-btn:hover {
    transform: translateY(-2px);
    opacity: 0.95;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.share-btn-whatsapp { background-color: #25D366; }
.share-btn-linkedin { background-color: #0A66C2; }
.share-btn-share    { background-color: #ca0a0a; }
.share-btn-copy     { background-color: #2a2e3f; border: 1px solid rgba(255, 255, 255, 0.15); }

/* Toast de confirmation de copie */
.copy-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #1e293b;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    border-left: 4px solid #22c55e;
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    pointer-events: none;
}
.copy-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* --- Section « À lire aussi » / Articles suggérés --- */
.suggested-articles-section {
    margin-top: 80px;
    padding-top: 50px;
    border-top: 2px solid rgba(255, 255, 255, 0.12);
}

.suggested-section-header {
    text-align: center;
    margin-bottom: 40px;
}

.suggested-section-title {
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
}

.suggested-card {
    background: #151822;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
}

.suggested-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    border-color: #ca0a0a;
}

.suggested-card-thumb {
    position: relative;
    padding-top: 56.25%; /* 16:9 Ratio */
    background: #000;
    overflow: hidden;
}

.suggested-card-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.suggested-card:hover .suggested-card-thumb img {
    transform: scale(1.05);
}

.suggested-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.suggested-card-meta {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.suggested-card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: #ffffff;
    margin-bottom: 14px;
    flex-grow: 1;
}

.suggested-card-link {
    font-size: 14px;
    font-weight: 700;
    color: #e8312a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

/* Responsive mobile */
@media only screen and (max-width: 991px) {
    .article-share-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .article-hero-title {
        font-size: 1.85rem;
    }
    .article-reading-body .rich-content {
        font-size: 17px;
        line-height: 1.82;
    }
    .article-share-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .share-btn {
        font-size: 13px;
        padding: 0 10px;
    }
}
/*==================================================
  Grille Actualités 2 Colonnes & Typographie Haute Lisibilité (Phase 30)
  ==================================================*/
.blog-classic-area-wrapper .blog-card.blog-card-grid {
    height: 100% !important;
    display: flex;
    flex-direction: column;
    background: #0d121a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.blog-classic-area-wrapper .blog-card.blog-card-grid:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 122, 0, 0.5);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.blog-classic-area-wrapper .blog-card-cover {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 17px 17px 0 0;
    background: #141a24;
}

.blog-classic-area-wrapper .blog-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-classic-area-wrapper .blog-card.blog-card-grid:hover .blog-card-cover img {
    transform: scale(1.05);
}

/* Badges métadonnées sur l'image : sobres et bien hiérarchisés */
.blog-classic-area-wrapper .blog-card-cover .blog-tags {
    top: 14px;
    left: 14px;
    padding: 6px 14px;
    background: rgba(10, 14, 22, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
}

.blog-classic-area-wrapper .blog-card-cover .blog-tags li {
    font-size: 13px;
    font-weight: 500;
    color: #cbd5e1;
    letter-spacing: 0.3px;
}

.blog-classic-area-wrapper .blog-card-cover .blog-tags li i {
    font-size: 11px;
    color: var(--color-primary, #ff7a00);
}

/* Contenu textuel : lisibilité immédiate sans plisser les yeux */
.blog-classic-area-wrapper .blog-card.blog-card-grid .blog-content-wrap {
    padding: 30px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Titre de l'article : grand, percutant et franc */
.blog-classic-area-wrapper .blog-card.blog-card-grid .blog-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.2px;
}

.blog-classic-area-wrapper .blog-card.blog-card-grid .blog-title a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.25s ease;
}

.blog-classic-area-wrapper .blog-card.blog-card-grid .blog-title a:hover {
    color: var(--color-primary, #ff7a00) !important;
}

/* Résumé / descriptif de l'article : taille augmentée, graisse normale franche et couleur claire */
.blog-classic-area-wrapper .blog-card.blog-card-grid .blog-excerpt {
    color: #e2e8f0 !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
    margin-bottom: 24px !important;
}

/* Bouton Lire la suite : grand, tactile et bien visible */
.blog-classic-area-wrapper .blog-card.blog-card-grid .more-btn .read-more-btn {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-primary, #ff7a00) !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: transform 0.25s ease, color 0.25s ease;
}

.blog-classic-area-wrapper .blog-card.blog-card-grid .more-btn .read-more-btn .read-more-icon {
    font-size: 15px;
    transition: transform 0.25s ease;
}

.blog-classic-area-wrapper .blog-card.blog-card-grid:hover .more-btn .read-more-btn {
    color: #ff9d3b !important;
}

.blog-classic-area-wrapper .blog-card.blog-card-grid:hover .more-btn .read-more-btn .read-more-icon {
    transform: translateX(6px);
}

/* Onglets filtres actualités : confortables, contrastés et bien lisibles */
.blog-filter-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 24px;
    margin-bottom: 40px !important;
}

.blog-filter-tab {
    display: inline-flex;
    align-items: center;
    padding: 11px 24px !important;
    border-radius: 999px;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transition: all 0.25s ease;
    text-decoration: none !important;
}

.blog-filter-tab:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px);
}

.blog-filter-tab.active {
    color: #ffffff !important;
    background: rgba(255, 122, 0, 0.22) !important;
    border-color: var(--color-primary, #ff7a00) !important;
    box-shadow: 0 0 16px rgba(255, 122, 0, 0.25);
}

.blog-filter-count {
    color: #cbd5e1 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.blog-filter-count span {
    color: #f1f5f9;
    font-weight: 600;
}

/* Responsive tablette & mobile */
@media (max-width: 991px) {
    .blog-classic-area-wrapper .blog-card-cover {
        height: 250px;
    }
    .blog-classic-area-wrapper .blog-card.blog-card-grid .blog-content-wrap {
        padding: 24px;
    }
    .blog-classic-area-wrapper .blog-card.blog-card-grid .blog-title {
        font-size: 21px !important;
    }
    .blog-classic-area-wrapper .blog-card.blog-card-grid .blog-excerpt {
        font-size: 16px !important;
    }
}

@media (max-width: 767px) {
    .blog-classic-area-wrapper .blog-card-cover {
        height: 220px;
    }
    .blog-classic-area-wrapper .blog-card.blog-card-grid .blog-content-wrap {
        padding: 20px;
    }
    .blog-classic-area-wrapper .blog-card.blog-card-grid .blog-title {
        font-size: 19px !important;
    }
    .blog-classic-area-wrapper .blog-card.blog-card-grid .blog-excerpt {
        font-size: 15.5px !important;
    }
    .blog-filter-tab {
        font-size: 14.5px !important;
        padding: 8px 18px !important;
    }
    .blog-filter-count {
        font-size: 14.5px !important;
    }
}

/* ==========================================================================
   Restructuration Footer (Phase 38b) : Description sobre, Réseaux Sociaux,
   Navigation 3 colonnes et Copyright centré respirant
   ========================================================================== */
.footer-style-one .description {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    font-family: var(--font-secondary) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 400 !important;
    margin-top: 18px !important;
    margin-bottom: 22px !important;
    max-width: 340px;
}
.footer-social-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}
.footer-social-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff !important;
    font-size: 14px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}
.footer-social-box a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(226, 62, 56, 0.35);
}
.footer-style-one .single-footer-wrapper .ft-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 22px !important;
    letter-spacing: 0.02em;
}
.footer-style-one .ft-link li {
    margin-bottom: 12px;
}
.footer-style-one .ft-link li a {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
    transition: all 0.25s ease;
}
.footer-style-one .ft-link li a:hover {
    color: var(--color-primary) !important;
    padding-left: 4px;
}

/* Alignement Contact direct sur 1 seule ligne & suppression absolue de rectangle arrondi */
.footer-style-one .contact-wrap .ft-contact-list {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}
.footer-style-one .contact-wrap .ft-contact-list li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    white-space: nowrap !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.footer-style-one .contact-wrap .ft-contact-list li span.ft-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--color-primary) !important;
    font-size: 13px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.footer-style-one .contact-wrap .ft-contact-list li .ft-contact-text {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    display: inline !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.footer-style-one .contact-wrap .ft-contact-list li a.ft-contact-text:hover {
    color: var(--color-primary) !important;
}

/* Pastille sous les réseaux sociaux */
.footer-version-wrap {
    display: block;
    margin-top: 18px;
}

/* Zone Copyright Centrée & Aérée (marge interne basse pour remonter et respirer) */
.copyright-area-one {
    padding-top: 26px !important;
    padding-bottom: 50px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media only screen and (max-width: 767px) {
    .copyright-area-one {
        padding-bottom: 65px !important;
    }
}
.hk-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    color: #ffffff !important;
    font-size: 14px;
}
.hk-footer-copy {
    color: #ffffff !important;
    font-weight: 400;
}
.hk-footer-agency {
    color: #ffffff !important;
}
.hk-footer-agency a {
    color: var(--color-primary) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.hk-footer-agency a:hover {
    color: #ff6b6b !important;
    text-decoration: underline;
}
.hk-footer-sep {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 12px;
}

/* ==========================================================================
   Badge Version Dynamique & Voyant Pulsé (Standards Push Consult)
   ========================================================================== */
.hk-version-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 14px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    transition: all 0.25s ease-in-out;
    vertical-align: middle;
}
.hk-version-badge:hover {
    background: rgba(226, 62, 56, 0.2) !important;
    border-color: rgba(226, 62, 56, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(226, 62, 56, 0.25);
}
.hk-version-badge .hk-version-text {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600;
}
.hk-version-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    border-radius: 50% !important;
    background-color: #10b981 !important;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: hkPulse 2s infinite;
}
@keyframes hkPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* ==========================================================================
   Page Changelog / Journal des Versions (Harmonisation, Lisibilité & Angles Doux)
   ========================================================================== */
.changelog-page .hk-changelog-card {
    background: rgba(22, 22, 26, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px !important;
    padding: 35px 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.changelog-page .hk-changelog-card:hover {
    transform: translateY(-3px);
    border-color: rgba(226, 62, 56, 0.35);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}
.changelog-page .hk-changelog-card.active-version {
    border-top: 3px solid var(--color-primary);
    background: linear-gradient(180deg, rgba(226, 62, 56, 0.08) 0%, rgba(22, 22, 26, 0.95) 100%);
}
.changelog-page .hk-changelog-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
}
.changelog-page .hk-changelog-desc {
    font-size: 16.5px !important;
    line-height: 1.75 !important;
    color: #f1f5f9 !important;
    margin-bottom: 22px !important;
}
.changelog-page .hk-feature-list {
    display: grid;
    gap: 14px;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}
.changelog-page .hk-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
    color: #f8fafc !important;
}
.changelog-page .hk-feature-item strong {
    color: #ffffff !important;
    font-weight: 600;
}
.changelog-page .hk-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: rgba(226, 62, 56, 0.15);
    color: var(--color-primary);
    font-size: 11px;
    margin-top: 3px;
}
.changelog-page .hk-banner-agency {
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(226, 62, 56, 0.1) 0%, rgba(18, 18, 22, 0.95) 100%);
    border: 1px solid rgba(226, 62, 56, 0.28);
    padding: 35px 35px;
}
.changelog-page .hk-version-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.changelog-page .hk-active-card-meta {
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 24px;
}
@media only screen and (max-width: 767px) {
    .changelog-page .hk-changelog-card {
        padding: 25px 20px;
        border-radius: 16px !important;
    }
    .changelog-page .hk-banner-agency {
        padding: 25px 20px;
        border-radius: 16px !important;
    }
    .changelog-page .hk-changelog-title {
        font-size: 19px !important;
    }
    .changelog-page .hk-changelog-desc {
        font-size: 15.5px !important;
    }
    .changelog-page .hk-feature-item {
        font-size: 14.5px !important;
    }
}

/* ==========================================================================
   Respiration & Espacement de la Dernière Section avant le Footer (Phase 38b)
   ========================================================================== */
.tmp-latest-portfolio.home-portfolio-section {
    padding-bottom: 120px !important;
}
.home-portfolio-section .see-all-btn-wrap {
    margin-top: 50px !important;
    margin-bottom: 0 !important;
}
@media only screen and (max-width: 991px) {
    .tmp-latest-portfolio.home-portfolio-section {
        padding-bottom: 85px !important;
    }
}
@media only screen and (max-width: 767px) {
    .tmp-latest-portfolio.home-portfolio-section {
        padding-bottom: 65px !important;
    }
}