/* Touches Modernes conservées (Vignettes + Coins arrondis site) */

/* 1. Coins arrondis pour le conteneur principal du site uniquement */
.mainWrapper {
    border: none !important; /* Suppression de la bordure noire */
    border-radius: 15px; /* Arrondi des coins */
    overflow: hidden; /* Assure que le contenu (comme la barre de menu) suit l'arrondi */
    /* clip coupe comme hidden, mais sans faire du conteneur une zone de
       defilement : c'est ce qui permet au bandeau d'etre « sticky » a
       l'interieur. Un navigateur qui ignore clip garde hidden, et son
       bandeau defile avec la page comme avant. */
    overflow: clip;
}

/* 1b. Le bandeau haut reste visible quand on defile.

   Il colle au haut de la fenetre ; le contenu passe dessous. z-index sous
   les fenetres Bootstrap (1050), au-dessus de tout le reste.

   Deux choses en tiennent compte : les ancres (#devis, FAQ...) grace a
   scroll-padding-top, et le defilement vers le titre sur la page
   Realisations. La hauteur du bandeau est mesuree par js/main.js dans
   --nc-entete : elle change avec la largeur d'ecran.                   */
header.header {
    position: sticky;
    /* 10 px : la marge haute de .mainWrapper. Colle, le bandeau garde la
       meme bande de fond au-dessus de lui qu'en haut de page. */
    top: 10px;
    z-index: 1020;
    /* Derriere les coins ronds, le fond du site et non la page qui defile
       dessous : la meme declaration que body, en attachment fixed — les
       deux images sont calees sur la fenetre, le motif se raccorde. */
    background: #ff9900 url('../img/_layout/fond.jpg') center / cover no-repeat fixed;
}
html { scroll-padding-top: var(--nc-entete, 120px); }

/* Les coins ronds du haut, portes par le bandeau lui-meme : ceux de
   .mainWrapper partent avec le haut de la page quand on defile. C'est
   .header-bg, l'enveloppe interieure, qui arrondit et coupe — pas
   header.header, pour laisser le fondu ci-dessous deborder sous lui. */
header.header .header-bg {
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

/* Le fondu sous le bandeau : ce qui passe dessous s'efface sur quelques
   pixels au lieu d'etre tranche net — les elements seulement, pas le
   fond. Le degrade part donc de la couleur de la bande de contenu
   (#f4f4f4, .banniere) vers rien : sur la bande il est invisible, et
   c'est le contenu qui s'y dissout, comme les images au bord du
   carrousel. Montre seulement une fois le bandeau colle (nc-colle sur
   body, pose par js/main.js) ; retire quand c'est le pied de page,
   sombre, qui passe dessous (nc-fondu-off). */
header.header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 5px;                          /* longueur totale du fondu */
    /* REGLAGE DU FONDU — trois arrets, de haut en bas :
         0      : juste sous le bandeau, rien ;
         2px    : plein (100 %)  <- c'est ce chiffre qu'on ajuste ;
         100 %  : plus rien, au bas des 15 px ci-dessus.                */
    background: linear-gradient(to bottom,
        rgba(244, 244, 244, 0.70) 0,
        
        rgba(244, 244, 244, 0) 100%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

/* La bande de 10 px gardee au-dessus du bandeau colle : sans ceci, c'est
   la page qui y defilait. Le meme fond fixe que le bandeau et que body,
   il se raccorde sans couture. Coupe par le conteneur en haut de page,
   ou il est de toute facon confondu avec le fond. */
header.header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 10px;
    background: #ff9900 url('../img/_layout/fond.jpg') center / cover no-repeat fixed;
    pointer-events: none;
}
body.nc-colle header.header::after { opacity: 1; }
body.nc-colle.nc-fondu-off header.header::after { opacity: 0; }

/* Sur telephone, le bandeau colle se reduit a la hauteur du logo : les
   36 px au-dessus et la marge du bouton de menu n'ont de sens qu'a cote
   du menu deplie. Le bouton se centre sur le logo. */
@media (max-width: 991.98px) {
    header.header .navbar-brand { padding: 5px 0 4px; }
    header.header .navbar-toggler { margin-top: 0; }
}

/* Telephone : le site occupe toute la largeur, il n'y a plus de fond
   autour de lui. On ne charge donc pas l'image de fond (un fond ecarte
   par media query n'est pas telecharge), le bandeau colle tout en haut,
   et les coins ronds du conteneur — bandeau en haut, pied de page en
   bas — n'ont plus rien a arrondir contre. */
@media (max-width: 767.98px) {
    body { background-image: none; }
    .mainWrapper { border-radius: 0; margin-top: 0; }
    header.header { top: 0; background: none; }
    header.header::before { display: none; }
    header.header .header-bg { border-radius: 0; }
}

/* 2. Effet "soulèvement" sur les vignettes au survol */
.subPhotoItem img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.subPhotoItem:hover img {
    transform: translateY(-5px); /* Monte de 5 pixels */
    box-shadow: 0 8px 15px rgba(0,0,0,0.3) !important; /* Ombre plus forte au survol */
}

/* 3. Gestion propre des images (Retour aux coins carrés, sans bordures) */
.img-thumbnail {
    /* On garde la suppression du cadre blanc pour un look plus propre */
    background-color: transparent !important;
    padding: 0 !important;
    
    /* Aucune bordure */
    border: none !important;
    
    /* Coins carrés */
    border-radius: 5px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* Ombre portée de base conservée */
}

/* Appliquer l'arrondi aux autres images aussi (comme la grande image principale) */
img.imgContent {
    border-radius: 0;
    border: none; /* Plus de bordure */
}

/* 4. Désactivation du zoom uniquement sur la page réalisation */
.realisation-page div.image-item:hover {
    animation: none !important;
    transform: none !important;
}




/* ==========================================================================
   PAGE D'ACCUEIL
   ========================================================================== */

/* --- La premiere ligne ---------------------------------------------------

   Deux blocs cote a cote qui se replient l'un sous l'autre quand la place
   manque. Ni grille Bootstrap ni colonnes fixes : le texte demande 380 px
   pour rester lisible, l'image 420 px pour valoir la peine ; en dessous,
   ils passent l'un sous l'autre tout seuls. */

.nc-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 415px;
    margin: 22px 0 54px;
}

/* Le texte passe au-dessus du calque. Sa largeur est bridee : au-dela,
   les lignes deviennent trop longues pour se lire d'un trait, et le
   titre viendrait mordre sur la partie nette de l'image. */
.nc-hero-texte {
    position: relative;
    z-index: 2;
    width: 44%;
    max-width: 560px;
    padding: 30px 0;
}

/* --- Le calque : le carrousel, en fondu ---------------------------------

   Il est pose SOUS le texte, du tiers de la largeur jusqu'au bord droit,
   ou il deborde les 20 px de .banniere pour toucher le bord du cadre.

   Son bord gauche s'efface par un MASQUE, et non par un degrade blanc
   dessine par-dessus : le filigrane du fond reste visible au travers, et
   l'effet tient quelle que soit la couleur derriere. */
.nc-hero-fond {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 41%;
    /* -55 px : les 20 px de .banniere plus les 15 de .container-fluid,
       pour que l'image touche le bord du cadre blanc au lieu de
       s'arreter sur un lisere. */
    right: -55px;
    z-index: 0;
    /* Ni masque ni overflow ici : ils sont sur .nc-hero-ruban, la piste
       seule. Les chevrons, freres de la piste, ne prennent donc pas le
       fondu — pose dans la zone transparente, le gauche s'effacait. */
}

/* Sans masque (Safari d'avant 15.4), un degrade pose par-dessus fait le
   meme office. Moins fin — il recouvre le filigrane — mais le texte reste
   lisible, ce qui est le seul point qui ne se negocie pas. */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    .nc-hero-ruban::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.90) 20%, rgba(255,255,255,0) 44%);
    }
}

/* Le ruban : une piste en ligne, a hauteur du calque, ACCROCHEE AU BORD
   DROIT. L'image qui touche ce bord est donc toujours entiere — c'est la
   partie nette du calque — et la seule qui puisse etre coupee est celle
   de gauche, sous le fondu, la ou cela se voit le moins. Cet ancrage est
   fait par la CSS seule : sans script, l'etat est deja le bon.

   Chaque vue garde ses proportions — hauteur imposee, largeur libre — et
   n'est jamais rognee. Le defilement, d'une image a la fois, est dans le
   script en pied de page. */
.nc-hero-ruban {
    position: relative;
    height: 100%;
    overflow: hidden;

    /* Le bord gauche s'efface par un MASQUE, et non par un degrade blanc
       dessine par-dessus : le filigrane du fond reste visible au travers,
       et l'effet tient quelle que soit la couleur derriere. */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 22%, #000 48%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 22%, #000 48%);
}

.nc-hero-piste {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    height: 100%;
    gap: 4px;
    will-change: transform;
    margin-right: 4px;
}

.nc-hero-piste img {
    display: block;
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    /* main.css impose « img { max-width: 100% } » a tout le site. Dans une
       piste en flex, ces 100 % sont ceux de la piste elle-meme — chaque vue
       se retrouvait bridee a la largeur de la zone, hauteur fixe, donc
       ecrasee. Ici la largeur doit rester libre : c'est tout le principe. */
    max-width: none;
    border-radius: 15px;
}

/* La ligne de surtitre : elle porte « depuis 2001 » et le metier, que le
   titre a laches en route. En orange fonce, lisible sur blanc la ou le
   #ff9900 de la charte ne donne que 2,1 de contraste. */
.nc-hero-sur {
    margin: 0 0 16px;
    color: #b35f00;
    font-family: "VERDANA";
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .14em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* Le titre est sombre, et non orange comme les autres titres du site :
   a cette taille l'orange sur blanc reste sous le seuil de contraste, et
   la couleur sert mieux en accent — le surtitre et le bouton — qu'etalee
   sur trois lignes. */
.nc-hero h1 {
    margin: 0 0 20px;
    color: #2b2b2b;
    font-family: "VERDANA";
    font-size: 33px;
    font-weight: normal;
    line-height: 1.2;
    text-shadow: none;
    /* repartit les lignes plus egalement quand le navigateur sait le faire */
    text-wrap: balance;
}

.nc-hero-accroche {
    max-width: 34em;
    margin: 0 0 12px;
    color: #4a4a4a;
    font-size: 17px;
    line-height: 1.6;
}

/* Les secteurs : ils etaient dans l'accroche, ou ils la faisaient deborder.
   Ici, en retrait, ils se lisent d'un coup d'oeil sans voler la vedette. */
.nc-hero-secteurs {
    max-width: 34em;
    margin: 0 0 4px;
    color: #7a7a7a;
    font-size: 14px;
    line-height: 1.6;
}

.nc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin: 26px 0 0;
}

/* L'image : un rapport fixe, pour que le pli de la page ne bouge pas
   pendant le chargement. */
.nc-hero-image a {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}

.nc-hero-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1400 / 796;
    object-fit: cover;
    transition: transform .5s ease;
}

.nc-hero-image a:hover img,
.nc-hero-image a:focus-visible img { transform: scale(1.03); }

.nc-hero-image figcaption {
    margin: 10px 2px 0;
    color: #8a8a8a;
    font-size: 12.5px;
    line-height: 1.5;
}

/* Les chevrons du ruban. .nav-arrow (main.css) donne le dessin et le jeu
   d'opacite ; ici, la place. Le gauche est pose au-dela du fondu, pour ne
   pas chevaucher le texte qui deborde sur le calque. */
.nc-ruban-fleche {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
.nc-ruban-fleche:hover { background: rgba(0, 0, 0, .6); }
/* Le chevron gauche : au debut du calque, decale de quelques pixels.
   C'EST ICI QU'ON L'AJUSTE : augmenter « left » l'eloigne du bord. */
.nc-ruban-prec { left: 24px; }
.nc-ruban-suiv { right: 12px; }
.nc-hero-fond:hover .nav-arrow,
.nc-ruban-fleche:focus-visible { opacity: 1; }
@media (hover: none) { .nc-ruban-fleche { opacity: .85; } }

/* --- De l'air dans le reste de la page -----------------------------------

   Les sections se touchaient : un filet a 1 em, des titres a 0,67 em. On
   respire, sans rien deplacer. */

.accueil h2 {
    margin: 0 0 8px;
    font-size: 23px;
    line-height: 1.3;
}

.accueil hr {
    margin: 46px 0 34px;
    border-top-color: rgba(0, 0, 0, .09);
}

.accueil p { line-height: 1.66; }

/* La rangee des outils et celle des realisations : un peu d'espace entre
   les vignettes, et sous chaque rangee. */
.accueil .row.align-items-center { margin-bottom: 8px; }
.accueil .image-item { margin-bottom: 14px; }

@media only screen and (max-width: 991px) {
    /* Plus de calque : le carrousel redevient un bloc, en pleine largeur
       au-dessus du texte — sur un telephone, c'est lui qui dit le metier
       en un coup d'oeil. Le masque n'a plus lieu d'etre, le texte n'etant
       plus par-dessus. */
    .nc-hero {
        display: block;
        min-height: 0;
        margin-bottom: 36px;
    }
    .nc-hero-fond {
        /* « relative » et non « static » : le calque revient dans le flux
           normal, mais reste le repere des chevrons, qui sont en
           positionnement absolu. En static, ils se calaient sur .nc-hero —
           image ET texte — et leur « milieu » tombait au milieu du texte. */
        position: relative;
        /* Les decalages du bureau (left: 41%, right: -55px, top/bottom: 0)
           etaient ignores en « static » ; en « relative » ils s'appliquent a
           nouveau et poussaient l'image vers la droite. On les annule. */
        top: auto; right: auto; bottom: auto; left: auto;
        margin: 0 -20px 24px;
        height: auto;
        aspect-ratio: 16 / 9;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .nc-hero-ruban {
        -webkit-mask-image: none;
                mask-image: none;
    }
    .nc-hero-ruban::after { content: none; }
    .nc-hero-texte {
        width: auto;
        max-width: none;
        padding: 0;
    }
    .nc-hero h1 { font-size: 27px; }
}

@media only screen and (max-width: 600px) {
    .nc-hero h1 { font-size: 23px; }
    .nc-hero-accroche { font-size: 16px; }
    .nc-hero-actions { flex-direction: column; align-items: stretch; }
    .nc-hero-actions .nc-cta,
    .nc-hero-actions .nc-cta-secondaire { display: block; text-align: center; }
    .accueil hr { margin: 34px 0 26px; }
}