/* ===== Sidebar icon remixicon (project-details) ===== */
.rs-icon.rs-icon-ri {
    width: 60px;
    height: 60px;
    min-width: 60px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(130deg, #0c43fe 0%, #fc3737 100%);
    border-radius: 12px;
}
.rs-icon.rs-icon-ri i {
    font-size: 28px;
    color: #ffffff;
}
.sidebar-category-item .rs-content a {
    color: #0c43fe;
    font-size: 15px;
    text-decoration: none;
}
.sidebar-category-item .rs-content a:hover {
    color: #fc3737;
}

/* ===== Bouton petit ===== */
.main-btn--sm {
    padding: 8px 22px;
    font-size: 14px;
}

/* ===== Mobile App Card — Mockup téléphone ===== */
.portfolio-item[data-category="mobile"] {
    display: flex;
    justify-content: center;
}

.portfolio-item[data-category="mobile"] .rs-project-3__item {
    max-width: 290px;
    border-radius: 44px;
    border: 10px solid #1c1c2e;
    box-shadow: 0 0 0 2px #3a3a5c, 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* Encoche caméra */
.portfolio-item[data-category="mobile"] .rs-project-3__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 26px;
    background: #1c1c2e;
    border-radius: 0 0 18px 18px;
    z-index: 20;
}

/* Barre de navigation bas */
.portfolio-item[data-category="mobile"] .rs-project-3__item::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 4px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    z-index: 20;
}

.portfolio-item[data-category="mobile"] .rs-thumb {
    height: 540px;
}

/* ===== Project Page - Overlay always visible ===== */
.rs-project-3__item .rs-project-overlay .rs-link {
    opacity: 1;
    top: 0;
    right: 30px;
}
.rs-project-3__item .rs-project-overlay .rs-project-content {
    bottom: 0;
}
.rs-project-3__item .rs-project-overlay .rs-project-content .rs-text {
    opacity: 1;
}

/* ===== Section "Featured" — titre lisible sur fond orange ===== */
/* La classe .color remplit le texte avec le meme degrade orange que le
   fond de .rs-featured : le texte devient invisible. On force le blanc,
   uniquement dans cette section. */
.rs-featured .rs-section-title .title .color {
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
}

/* ===== Modale "outils & technologies" ===== */
body.tech-modal-open { overflow: hidden; }

.tech-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 21, 35, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.tech-modal.open { opacity: 1; visibility: visible; }

.tech-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(16, 21, 35, 0.35);
    transform: scale(0.96) translateY(12px);
    transition: transform 0.25s ease;
}
.tech-modal.open .tech-modal__dialog { transform: scale(1) translateY(0); }

.tech-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: #f1f1f5;
    color: #5b6170;
    font-size: 20px;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}
.tech-modal__close:hover { background: #F26F20; color: #ffffff; }

.tech-modal__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 30px 30px 0;
}
.tech-modal__logo {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f8;
    border-radius: 16px;
}
.tech-modal__logo img { width: 38px; height: 38px; object-fit: contain; }
.tech-modal__head-text { display: flex; flex-direction: column; gap: 3px; }
.tech-modal__name {
    font-size: 22px;
    font-weight: 800;
    color: #101523;
    line-height: 1.2;
}
.tech-modal__category {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #F26F20;
}

.tech-modal__body { padding: 22px 30px 4px; }
.tech-modal__tagline {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: #101523;
    line-height: 1.45;
}
.tech-modal__desc {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.75;
    color: #5b6170;
}
.tech-modal__subtitle {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #9296a3;
}
.tech-modal__features { margin: 0 0 22px; padding: 0; list-style: none; }
.tech-modal__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    font-size: 14px;
    color: #2c3142;
    line-height: 1.5;
}
.tech-modal__features li i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 16px;
    color: #F26F20;
}
.tech-modal__usage {
    background: #fff5ee;
    border-left: 3px solid #F26F20;
    border-radius: 10px;
    padding: 15px 18px;
}
.tech-modal__usage-label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #F26F20;
}
.tech-modal__usage p { margin: 0; font-size: 14px; line-height: 1.65; color: #2c3142; }

.tech-modal__footer {
    display: flex;
    justify-content: flex-end;
    padding: 22px 30px 28px;
}
.tech-modal__btn {
    padding: 11px 26px;
    border: 0;
    border-radius: 30px;
    cursor: pointer;
    background: #F26F20;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.2s ease;
}
.tech-modal__btn:hover { background: #d75d12; }

@media (max-width: 575px) {
    .tech-modal__header { padding: 26px 20px 0; }
    .tech-modal__body { padding: 20px 20px 4px; }
    .tech-modal__footer { padding: 18px 20px 24px; }
    .tech-modal__name { font-size: 20px; }
}

/* ===== Hauteur uniforme des bannières internes (sauf accueil) ===== */
/* Toutes les pages internes utilisent .rs-page-banner — la home a son
   propre slider (.rs-banner-slide), donc elle n'est pas affectée.
   Padding repris des valeurs validées sur /services. */
.rs-page-banner {
    /* Hauteur garantie — min-height verrouille 586 px même si le contenu
       (titre + fil d'Ariane) est plus court. Toute image source est
       rognée visuellement par background-size:cover pour remplir cette
       boîte 1920×586 (équivalent du object-fit:cover des thumbs).
       Fichiers source conservés à leur résolution native sur disque. */
    padding-top: 290px;
    padding-bottom: 150px;
    min-height: 586px;
}
@media (max-width: 991px) {
    .rs-page-banner {
        padding-top: 240px;
        padding-bottom: 120px;
        min-height: 506px;
    }
}
@media (max-width: 575px) {
    .rs-page-banner {
        padding-top: 200px;
        padding-bottom: 90px;
        min-height: 436px;
    }
}

/* ===== Bannière page Services (liste) — image dev/tech dédiée ===== */
/* Cible uniquement /services (body.serivice-page-1) — les autres pages
   internes conservent inner_bg.png. Overlay sombre pour garder le
   contraste du titre blanc sur l'image colorée. La hauteur est gérée
   par la règle ci-dessus, commune à toutes les bannières internes. */
.serivice-page-1 .rs-page-banner {
    background-image:
        linear-gradient(rgba(8, 18, 47, 0.55), rgba(8, 18, 47, 0.55)),
        url(../images/banner/services-index-banner.png);
    background-position: center center;
    background-size: cover;
}

/* ===== Bannière page Service — Développement Web ===== */
/* Cible uniquement /services/service-developpement-web (la classe du
   slug est ajoutée sur <body> via show.blade.php). Overlay un peu plus
   léger (55%) que la page liste, l'image générée étant déjà sombre. */
.service-developpement-web .rs-page-banner {
    background-image:
        linear-gradient(rgba(8, 18, 47, 0.55), rgba(8, 18, 47, 0.55)),
        url(../images/banner/service-developpement-web-banner.png);
    background-position: center center;
    background-size: cover;
}

/* ===== Bannière page Service — Application Mobile ===== */
/* Même mécanisme que dev web, scopé sur .service-applicacation-mobile
   (slug typo « applicacation » conservé du codebase d'origine). */
.service-applicacation-mobile .rs-page-banner {
    background-image:
        linear-gradient(rgba(8, 18, 47, 0.55), rgba(8, 18, 47, 0.55)),
        url(../images/banner/service-applicacation-mobile-banner.png);
    background-position: center center;
    background-size: cover;
}

/* ===== Bannière page Service — Solution Métier ===== */
.service-solution-metier .rs-page-banner {
    background-image:
        linear-gradient(rgba(8, 18, 47, 0.55), rgba(8, 18, 47, 0.55)),
        url(../images/banner/service-solution-metier-banner.png);
    background-position: center center;
    background-size: cover;
}

/* ===== Bannière page Service — Infrastructure & Cybersécurité ===== */
/* Image déjà sombre (salle serveur dark & moody) — overlay plus
   léger (40 %) pour ne pas écraser les bleus cinématographiques. */
.service-infrastructure-cybersecurite .rs-page-banner {
    background-image:
        linear-gradient(rgba(8, 18, 47, 0.40), rgba(8, 18, 47, 0.40)),
        url(../images/banner/service-infrastructure-cybersecurite-banner.png);
    background-position: center center;
    background-size: cover;
}

/* ===== Bannière page Service — Support & Formation ===== */
/* Image chaude et lumineuse (golden hour, ambiance studio) — un
   voile bleu marine éteindrait la chaleur du visuel. Overlay neutre
   noir à faible opacité (35 %) pour garder la lisibilité du titre
   blanc sans altérer la palette dorée de la scène. */
.service-support-formation .rs-page-banner {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
        url(../images/banner/service-support-formation-banner.png);
    background-position: center center;
    background-size: cover;
}

/* ===== Bannière page Service — Design & Marketing Digital ===== */
/* Image colorée et chaleureuse (studio créatif, accents corail /
   moutarde). Même traitement que Support & Formation : overlay noir
   neutre à 35 % pour préserver la palette riche de la scène — un
   bleu marine éteindrait l'énergie créative de l'image. */
.service-design-marketing-digital .rs-page-banner {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
        url(../images/banner/service-design-marketing-digital-banner.png);
    background-position: center center;
    background-size: cover;
}

/* ===== Bannière page Contact ===== */
/* Image très lumineuse (accueil en golden hour, comptoir blanc).
   Overlay bleu marine standard (55 %) qui ramène le contraste pour
   le titre blanc tout en gardant les accents cyan + orange visibles. */
.contact-page .rs-page-banner {
    background-image:
        linear-gradient(rgba(8, 18, 47, 0.55), rgba(8, 18, 47, 0.55)),
        url(../images/banner/contact-banner.png);
    background-position: center center;
    background-size: cover;
}

/* ===== Bannière page À propos ===== */
/* Scope sur .about-page (body class déjà définie). Overlay bleu
   marine standard (55 %) cohérent avec les autres bannières
   humaines (Contact, Services). */
.about-page .rs-page-banner {
    background-image:
        linear-gradient(rgba(8, 18, 47, 0.55), rgba(8, 18, 47, 0.55)),
        url(../images/banner/about-banner.png);
    background-position: center center;
    background-size: cover;
}

/* ===== Footer — fond bleu marine + texture pattern (zone principale) ===== */
/* Reprend la formule du projet Medic Interface Maroc sur la zone
   principale uniquement (__main-box). La zone __top conserve son
   subscribe_bg.jpg du thème. Couleur de fond bleu marine plein +
   image texture centrée + overlay navy 30 % par-dessus. */
.rs-footer {
    background-color: #081230;
}
.rs-footer__main-box {
    background-color: transparent;
    background-image:
        linear-gradient(rgba(8, 18, 47, 0.3), rgba(8, 18, 47, 0.3)),
        url(../images/footer/footer-modiom.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ===== Thumb pages de détail Service — ratio uniforme 1000:614 ===== */
/* Force toutes les images thumb des pages de détail service à
   s'afficher au même ratio (1000:614, identique à l'original
   service-details-thumb-1.jpg). Quelle que soit la résolution
   native de l'image source (carrée, 4:3, 16:9…), elle est rognée
   visuellement par object-fit:cover — sans toucher au fichier,
   donc tous les pixels d'origine sont conservés pour usage futur. */
.rs-service-details__content .rs-thumb img {
    aspect-ratio: 1000 / 614;
    object-fit: cover;
    object-position: center center;
}

/* ===== Bloc CTA Newsletter (page d'accueil) — image Modiom Tech ===== */
/* Override la background-image définie dans style.css (cta-bg-2.jpg
   du thème). La nouvelle image est déjà sombre, donc pas besoin
   d'overlay sur cette section — le tiers central de l'image est
   volontairement calme pour laisser respirer le titre blanc + bouton. */
.rs-newsletter-2 {
    background-image: url(../images/newsletter/cta-modiom.png);
}

/* ===== Bloc FAQ (page d'accueil) — image Modiom Tech ===== */
/* L'image source est portrait (1086×1448, ratio 0.75) alors que
   l'emplacement du thème est quasi-carré (771×719, ratio 1.07).
   On force le ratio via aspect-ratio + object-fit cover — fichier
   intact, tous les pixels conservés. object-position: center top
   pour préserver les éléments du haut (visage + ampoule holo) ;
   le crop se fait sur le bas (carnet/bureau, moins critique). */
.rs-faq__thumb img {
    aspect-ratio: 771 / 719;
    object-fit: cover;
    object-position: center top;
}

/* ===== Sidebar détail service : box "Vous avez un projet ?" ===== */
/* Réutilise l'image de la bannière de la page Contact (même overlay
   bleu marine 55 %) au lieu du fond clair par défaut. Titre passé en
   blanc pour rester lisible sur le fond sombre. */
.rs-service-details__sidebar .solution-box {
    background-image:
        linear-gradient(rgba(8, 18, 47, 0.55), rgba(8, 18, 47, 0.55)),
        url(../images/banner/contact-banner.png);
    background-position: center center;
    background-size: cover;
}
.rs-service-details__sidebar .solution-box .title {
    color: #ffffff;
}

/* ===== Détail service : titres des questions FAQ ===== */
/* Le socle applique text-transform: capitalize (majuscule sur chaque
   mot). On revient en casse normale : seule la 1re lettre de la phrase
   reste capitalisée, comme dans le texte source. */
.rs-service-details__content .rs-content .rs-faq__wrapper .accordion .accordion_tab {
    text-transform: none;
}

/* ===== Accueil : titres de la section "Foire Aux Questions" ===== */
/* Même correction : casse normale au lieu de capitalize. */
.rs-faq .rs-faq__content .rs-faq__wrapper .accordion .accordion_tab {
    text-transform: none;
}

/* ===== Dropdown "Services" : item actif + survol ===== */
/* Item actif (page de détail service en cours) : texte ORANGE sur fond
   blanc, pour signaler la page courante (au lieu du fond orange plein
   du socle). */
.full-width-header .rs-header .menu-area .rs-menu-area .main-menu ul.nav-menu > li.has-clid .sub-menu li a.active {
    background: #ffffff;
    color: #F26F20;
}
/* Survol : fond BLEU CYAN + texte blanc (remplace le fond orange).
   Placé après la règle .active pour que le survol prime, y compris sur
   l'item actif. */
.full-width-header .rs-header .menu-area .rs-menu-area .main-menu ul.nav-menu > li.has-clid .sub-menu li a:hover,
.full-width-header .rs-header .menu-area .rs-menu-area .main-menu ul.nav-menu > li.has-clid .sub-menu li:hover > a {
    background: #06b6d4;
    color: #ffffff;
}

/* ===== Newsletter footer : message d'erreur sous le champ ===== */
.rs-footer__newsletter .newsletter-error {
    display: none;
    margin: 8px 0 0;
    color: #fc3737;
    font-size: 13px;
    line-height: 1.4;
}
.rs-footer__newsletter .js-newsletter-email.is-invalid {
    border-color: #fc3737;
}