/* =====================================================================
   TECHINTERLAB – Améliorations progressives du design
   Chargé APRÈS style.min.css dans base.layout.tpl : les règles ci-dessous
   complètent ou remplacent les anciennes, sans modifier style.min.css.
   Après chaque modification de ce fichier, augmenter le numéro ?v=… dans
   base.layout.tpl pour que les navigateurs chargent la nouvelle version.
   ===================================================================== */


/* ---------------------------------------------------------------------
   BANDEAU SUPÉRIEUR / MENU (include/nav.tpl)
   Bandeau blanc posé au-dessus de l'image, séparé d'elle par un liseré
   gris. Logo à gauche, trait vertical, puis le menu.
   Les liens occupent toute la hauteur du bandeau : le trait dégradé qui
   apparaît au survol vient ainsi se poser sur le liseré gris.
   Les mêmes règles couvrent le menu mobile (#offcanvas), copie du menu
   créée par main.js.
   --------------------------------------------------------------------- */

.nav {
    position: relative;               /* le bandeau ne recouvre plus l'image */
    background: #ffffff;
    border-bottom: 1px solid #c8ced6; /* liseré gris de séparation (épaisseur réglable ici) */
}

.nav .top-menu {
    width: 100%;
    padding: 0 30px;
}

.nav .top-menu > .container {
    max-width: 95%;
}

.nav .top-menu .row {
    align-items: stretch;
}

/* Logo : même image, taille réduite (hauteur réglable ici).
   Le trait vertical gris est dessiné à sa droite. */
.nav #logo {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 14px 24px 14px 0;
}

.nav #logo::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 32px;
    margin-top: -16px;
    background: #c8ced6;
}

.nav #logo a {
    display: inline-block;
    line-height: 0;
}

.nav #logo .fit-picture {
    height: 52px;
    width: auto;
    max-width: none;
    transform: none;
}

/* Zone du menu : occupe toute la hauteur du bandeau */
.nav .menu-1 {
    display: flex;
    align-items: stretch;
    padding-left: 0;
}

.nav .menu-1 > ul {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    flex: 1;
}

.nav .menu-1 > ul > li {
    display: flex;
    align-items: stretch;
}

/* Liens du menu */
.nav .menu-1 > ul > li > a,
.nav .menu-1 .nav-produits-link {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    padding: 0 12px;
    color: #2c3a4d;
}

.nav .menu-1 > ul > li > a:hover,
.nav .menu-1 .nav-produits-link:hover {
    color: #0a78b5;
}

/* Trait dégradé du survol : posé sur le liseré gris */
.nav .menu-1 > ul > li > a::after,
.nav .menu-1 .nav-produits-link::after {
    bottom: -1px;                     /* = épaisseur du liseré */
}

/* « Tech Groupe » est le dernier lien : l'ancien CSS lui retirait ses
   marges et son trait de survol (prévus pour l'ancien bouton Contact) */
.nav .menu-1 > ul > li:last-child > a {
    padding: 0 12px !important;
}

.nav .menu-1 > ul > li:last-child > a:hover::after {
    visibility: visible;
}

/* Partie droite : bouton « Demander un devis », trait vertical, « Tech Groupe » */
.nav .menu-1 > ul > li.nav-cta {
    margin-left: auto;                /* pousse le bouton et Tech Groupe à droite */
    align-items: center;
    padding-right: 24px;
}

.nav .menu-1 > ul > li.nav-cta > a.nav-devis {
    min-height: 42px;
    padding: 0 22px;
    border-radius: 30px;
    background: linear-gradient(45deg, #19b5fe 0%, #9870fc 100%);
    color: #ffffff;
    font-weight: 400;
    font-size: 1rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(25, 181, 254, 0.25);
    transition: filter 0.2s, box-shadow 0.2s;
}

.nav .menu-1 > ul > li.nav-cta > a.nav-devis:hover {
    color: #ffffff;
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(152, 112, 252, 0.35);
}

.nav .menu-1 > ul > li.nav-cta > a.nav-devis::after {
    display: none;                    /* pas de trait de survol sous le bouton */
}

.nav .menu-1 > ul > li.nav-techgroupe {
    position: relative;
    padding-left: 12px;
}

.nav .menu-1 > ul > li.nav-techgroupe::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 32px;
    margin-top: -16px;
    background: #c8ced6;
}

/* Bouton dans le menu mobile */
#offcanvas li.nav-cta {
    margin: 16px 0;
}

#offcanvas li.nav-cta > a.nav-devis {
    display: inline-block;
    white-space: nowrap;
    padding: 10px 22px;
    border-radius: 30px;
    background: linear-gradient(45deg, #19b5fe 0%, #9870fc 100%);
    color: #ffffff;
    font-weight: 400;
    font-size: 1rem;
}

/* Page en cours : bleu un peu plus soutenu pour rester lisible sur fond blanc */
.nav .menu-1 > ul > li.active > a,
.nav .menu-1 li.dropdown.active .nav-produits-link {
    color: #0a78b5 !important;
}

#offcanvas li > a,
#offcanvas .nav-produits-link {
    font-size: 1.125rem;
}

/* Menu déroulant « Produits » */
.nav .menu-1 li > div.dropdown {
    display: flex;
    align-items: stretch;
}

#offcanvas li > div.dropdown {
    display: inline-block;
}

.nav .menu-1 .nav-produits-toggle {
    display: flex;
    align-items: center;
    color: #2c3a4d;
    font-size: 20px;
    cursor: pointer;
    margin-right: 6px;
}

.nav .menu-1 .nav-produits-toggle > .nav-produits-link {
    align-self: stretch;
}

/* Petite flèche du menu « Produits » : même écart avec le texte qu'avant */
.nav .menu-1 .nav-produits-toggle::after {
    margin-left: -5px !important;
}

#offcanvas .nav-produits-toggle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
}

#offcanvas .nav-produits-toggle::after {
    margin-left: 4px !important;
}

.nav .menu-1 .dropdown-menu .dropdown-item,
#offcanvas .dropdown-menu .dropdown-item {
    color: #000000;
    font-size: 15px;
}

/* Contour visible quand on navigue au clavier (touche Tab) */
.nav a:focus-visible,
.nav .dropdown-menu .dropdown-item:focus-visible {
    outline: 2px solid #0a78b5;
    outline-offset: -2px;
}

#offcanvas a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Petits écrans d'ordinateur : tout est un peu resserré pour tenir sur une ligne */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nav .top-menu {
        padding: 0;
    }

    .nav .top-menu > .container {
        max-width: 100%;
    }

    .nav #logo {
        padding-right: 16px;
    }

    .nav #logo .fit-picture {
        height: 44px;
    }

    .nav .menu-1 > ul > li > a,
    .nav .menu-1 .nav-produits-link {
        font-size: 0.9375rem;
        padding: 0 8px;
    }

    .nav .menu-1 > ul > li:last-child > a {
        padding: 0 8px !important;
    }

    .nav .menu-1 .nav-produits-toggle::after {
        margin-left: -1px !important;
    }

    .nav .menu-1 > ul > li.nav-cta {
        padding-right: 16px;
    }

    .nav .menu-1 > ul > li.nav-cta > a.nav-devis {
        font-size: 0.9375rem;
        padding: 0 16px;
    }

    .nav .menu-1 > ul > li.nav-techgroupe {
        padding-left: 8px;
    }
}

/* Tablettes et mobiles : le menu passe dans l'icône ☰ (comme avant sur mobile,
   désormais aussi sur les tablettes en portrait, faute de place).
   Bandeau plus compact, sans trait vertical, icône ☰ en foncé sur le blanc. */
@media screen and (max-width: 991.98px) {
    .nav .menu-1 {
        display: none;
    }

    .nav-toggle,
    #offcanvas {
        display: block;
    }

    .nav .top-menu {
        padding: 0 1em;
    }

    .nav #logo {
        padding: 12px 0;
    }

    .nav #logo::after {
        display: none;
    }

    .nav #logo .fit-picture {
        height: 40px;
    }
}

/* Bandeau fixé en haut de l'écran (classes ajoutées par web/js/bandeau.js) :
   caché quand on descend, de retour dès qu'on remonte */
body.nav-fixe .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: transform 0.3s ease;
}

body.nav-fixe.nav-cachee .nav {
    transform: translateY(-100%);
}

/* L'icône ☰ et le menu mobile suivent le bandeau */
body.nav-fixe .nav-toggle {
    position: fixed;
    transition: transform 0.3s ease;
}

body.nav-fixe.nav-cachee .nav-toggle {
    transform: translateY(-120px);
}

body.nav-fixe #offcanvas {
    position: fixed;
}

/* Ouvrir le menu ☰ en bas de page ne ramène plus tout en haut */
body.nav-fixe.offcanvas #page {
    position: relative;
}

/* Lien vers une section de page (ex. contact#15) : le titre n'est pas caché sous le bandeau */
html {
    scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
    body.nav-fixe .nav,
    body.nav-fixe .nav-toggle {
        transition: none;
    }
}

.nav-toggle {
    right: 16px;
    top: 10px !important;            /* icône ☰ centrée sur la hauteur du bandeau */
}

.nav-toggle:not(.active) > i,
.nav-toggle:not(.active) > i::before,
.nav-toggle:not(.active) > i::after {
    background: #2c3a4d;
}

/* Logo Tech Groupe (blanc) rendu visible sur le bandeau blanc */
.nav #logo img[src*="techgroup.png"] {
    filter: brightness(0);
}


/* ---------------------------------------------------------------------
   IMAGE D'ACCUEIL (include/slider.tpl)
   --------------------------------------------------------------------- */

/* Forme bleue en diagonale retirée */
#slider .index_slider::after {
    display: none;
}

/* Hauteur de la photo (réglable ici) */
#slider {
    min-height: 0;
}

#slider .flexslider .slides li {
    min-height: 440px;
}

/* Anciens blocs de texte vides de chaque photo : ils imposaient 500 px de haut */
#slider .flexslider .slides li .slider-text {
    display: none;
}

/* Voile plus sombre à gauche, derrière le titre, pour qu'il reste lisible */
#slider .flexslider .slides li .overlay {
    opacity: 1;
    background: linear-gradient(90deg, rgba(10, 20, 35, 0.6) 0%, rgba(10, 20, 35, 0.3) 55%, rgba(10, 20, 35, 0.1) 100%);
}

/* Titre centré verticalement sur la photo, taille réduite (réglable ici) */
#slider .flexslider .slider-text-absolute {
    top: 50%;
    transform: translateY(-50%);
}

#slider .flexslider .slider-text-absolute h1 {
    font-size: clamp(1.5rem, 2.4vw, 2.25rem) !important;
    line-height: 1.25;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Points du diaporama : en bas de la photo, sous le titre */
#slider .flexslider .flex-control-nav {
    bottom: 1.5em;
}

@media (max-width: 991.98px) {
    #slider .flexslider .slides li {
        min-height: 380px;
    }
}

@media screen and (max-width: 768px) {
    #slider .flexslider .slides li {
        min-height: 320px;
    }

    #slider .flexslider .slides li .overlay {
        background: rgba(10, 20, 35, 0.45);
    }

    #slider .flexslider .slider-text-absolute {
        left: 0;
        right: 0;
        padding: 0 20px;
    }

    #slider .flexslider .slider-text-absolute h1 {
        font-size: 1.375rem !important;
    }
}


/* ---------------------------------------------------------------------
   BANDEAU RESAH (index.tpl) – version fixe et lisible
   Le défilement continu est arrêté : les 4 avantages sont présentés
   côte à côte (2 × 2 sur tablette, à faire glisser au doigt sur mobile).
   Ses styles d'origine sont écrits dans index.tpl ; « #page » devant
   chaque règle les rend prioritaires sur ceux-ci.
   --------------------------------------------------------------------- */

#page .til-banner {
    height: auto;                     /* était fixé à 310 px */
    padding: 36px 0 40px;
}

/* En-tête */
#page .til-header {
    padding: 0 24px 22px;
}

#page .til-overline {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.16em;
    margin-bottom: 8px;
}

#page .til-title {
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

#page .til-title em {
    color: rgba(255, 255, 255, 0.85);
}

/* Zone des avantages : plus de défilement ni de fondus sur les côtés */
#page .til-scroll-row {
    display: block;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

#page .til-fade-l,
#page .til-fade-r,
#page .til-div {
    display: none;
}

#page .til-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;             /* cartes de même hauteur */
    animation: none;
    transform: none;
    white-space: normal;
}

/* Le défilement avait besoin des cartes en double : seules les 4 premières restent */
#page .til-track > .til-card ~ .til-card ~ .til-card ~ .til-card ~ .til-card {
    display: none;
}

/* Cartes : en-tête (icône + petit titre), puis titre, texte et étiquettes
   sur toute la largeur. Les éléments sont alignés d'une carte à l'autre. */
#page .til-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
        "icon tag"
        "name name"
        "desc desc"
        "pills pills";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 12px;
    row-gap: 0;
    align-items: start;               /* l'ancien style centrait tout verticalement */
    margin: 0;
    padding: 18px 20px 20px;
    border-radius: 14px;
    background: rgba(10, 30, 70, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#page .til-body {
    display: contents;
}

#page .til-icon {
    grid-area: icon;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    gap: 0;
}

#page .til-icon img {
    width: 22px !important;
    height: 22px !important;
}

#page .til-icon-lbl {
    display: none;                    /* doublon du petit titre de la carte */
}

#page .til-tag   { grid-area: tag; align-self: center; }
#page .til-name  { grid-area: name; margin-top: 12px; }
#page .til-desc  { grid-area: desc; margin-top: 8px; }
#page .til-pills { grid-area: pills; align-self: end; margin-top: 14px; }

/* Grand écran (4 cartes côte à côte) : titres, textes et étiquettes
   commencent exactement à la même hauteur dans les 4 cartes */
@media (min-width: 1200px) {
    #page .til-track {
        grid-auto-rows: auto;
        row-gap: 0;
    }

    #page .til-card {
        grid-row: span 4;
        grid-template-rows: subgrid;
    }
}

/* Textes : plus grands, droits (plus d'italique) et plus contrastés */
#page .til-tag {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.12em;
    white-space: normal;
}

#page .til-name {
    font-size: 1.0625rem;
    line-height: 1.3;
}

#page .til-desc {
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.5;
    color: #ffffff;
}

#page .til-pills {
    flex-wrap: wrap;
}

#page .til-pill {
    font-size: 0.75rem;
    padding: 3px 10px;
}

/* Tablette : 2 × 2 */
@media (max-width: 1199.98px) {
    #page .til-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile : une carte à la fois, à faire glisser au doigt */
@media (max-width: 767.98px) {
    #page .til-banner {
        padding: 28px 0 30px;
    }

    #page .til-title {
        font-size: 1.25rem;
    }

    #page .til-scroll-row {
        padding: 0;
    }

    #page .til-track {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 20px;
        padding: 0 20px 4px;
        scrollbar-width: none;
    }

    #page .til-track::-webkit-scrollbar {
        display: none;
    }

    #page .til-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}


/* ---------------------------------------------------------------------
   BANDEAU RESAH POSÉ SUR LES PHOTOS DE L'ACCUEIL
   (classe ajoutée par web/js/resah.js)
   Les photos du diaporama s'étendent derrière le bandeau Resah, qui
   devient transparent : un voile sombre légèrement teinté aux couleurs
   de la charte assure la lisibilité, les cartes sont en verre dépoli.
   --------------------------------------------------------------------- */

body.resah-sur-photo #slider {
    float: none;
}

/* Hauteur de la photo = zone du titre + hauteur du bandeau Resah */
body.resah-sur-photo #slider .flexslider .slides li {
    min-height: calc(440px + var(--resah-hauteur, 0px));
}

/* Le titre reste centré dans la zone au-dessus du bandeau Resah */
body.resah-sur-photo #slider .flexslider .slider-text-absolute {
    top: 220px;
}

/* Points du diaporama : juste au-dessus du bandeau Resah */
body.resah-sur-photo #slider .flexslider .flex-control-nav {
    bottom: calc(var(--resah-hauteur, 0px) + 1.2em);
}

/* Le bandeau Resah remonte sur la photo */
body.resah-sur-photo #page .til-banner {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--resah-hauteur, 0px));
    background: linear-gradient(180deg, rgba(10, 22, 40, 0) 0%, rgba(10, 22, 40, 0.55) 90px, rgba(10, 22, 40, 0.72) 100%);
}

/* Légère teinte bleu-violet de la charte, qui apparaît en fondu (sans bord net en haut) */
body.resah-sur-photo #page .til-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(25, 181, 254, 0.25) 0%, rgba(152, 112, 252, 0.25) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px);
    mask-image: linear-gradient(180deg, transparent 0, #000 110px);
    pointer-events: none;
}

body.resah-sur-photo #page .til-title,
body.resah-sur-photo #page .til-overline {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

/* Cartes en verre dépoli */
body.resah-sur-photo #page .til-card {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@media (max-width: 991.98px) {
    body.resah-sur-photo #slider .flexslider .slides li {
        min-height: calc(380px + var(--resah-hauteur, 0px));
    }

    body.resah-sur-photo #slider .flexslider .slider-text-absolute {
        top: 190px;
    }
}

@media screen and (max-width: 768px) {
    body.resah-sur-photo #slider .flexslider .slides li {
        min-height: calc(320px + var(--resah-hauteur, 0px));
    }

    body.resah-sur-photo #slider .flexslider .slider-text-absolute {
        top: 160px;
    }
}