/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */



html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */



/* NcDécor */


.animmodal {
    animation: animmodal 0.8s ease 0s 1 normal forwards;
}


@keyframes animmodal {
    0% {
        opacity: 0;        
        transform: translateX(calc((((var(--X) * var(--x)) - var(--X) / 2)  * 1px))) translateY(calc(100% * (var(--y) - 0.5))) scale(0.2);
    }

    100% {
        opacity: 1;
       
        transform: scale(1);
    }
}





.sketchfab-embed-wrapper{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 75%; /* 16:9 Aspect Ratio*/
}
.sketchfab-embed-wrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.sketchfab-embed-wrapper-bord{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 135%; /* 16:9 Aspect Ratio*/
}
.sketchfab-embed-wrapper-bord iframe{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



body {
    background-color :#ff9900;
    background-image : url('../img/_layout/fond.jpg');
    background-position :  center;
    background-repeat: no-repeat;
    background-size : cover; 
    background-attachment : fixed; 
    display : flex;
	justify-content : center;
	/*align-items : center;
	min-height : 100vh;*/
	
}

.mainWrapper {
    border: 1px solid #000;
    box-shadow: 7px 5px 5px rgba(30,30,30,0.3);
    max-width: 1200px;
    margin: 0 auto;
	flex-basis : 100%;
	margin-top: 10px;
	margin-bottom : 10px;
	transition : all 300ms ease-in;
}

@font-face {
    font-family: 'share_techregular';
    src: url('../fonts/sharetech-regular-webfont.woff2') format('woff2'),
         url('../fonts/sharetech-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FusiNormal';
    src: url('../fonts/FusiNormal.woff2') format('woff2'),
         url('../fonts/FusiNormal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Asenine';    
	src: url('../fonts/Asenine.woff2') format('woff2'),
        url('../fonts/Asenine.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.navbar {
    max-width : 1200px;
    width : 100%;
    margin : 0 auto;
    padding : 0;
    background-color: #ff9900;
    background-image: url('../img/_layout/line.gif');
    background-repeat: repeat-x;
    background-position: bottom;
}

.navbar-expand-lg .navbar-collapse {
    justify-content: end;
    flex-direction : row-reverse;
}

.navbar-brand {
    padding-bottom: none;
    padding-top: 36px;

}

.navbar-nav > .nav-item > .nav-link {
    font-family: "FusiNormal";
	font-size: 20px;
	letter-spacing : 1px;
    color : #FFFFFF;
    text-shadow: 3px 1.5px 1.5px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.navbar-nav > .nav-item .active > .nav-link ,
.navbar-nav > .nav-item > .nav-link:hover {
    color : #FFFFFF;    
}

.nav-item {
    height : 120px;
    vertical-align: bottom;
    width : 137px;
    z-index : 2;
    display : flex;
    align-items: flex-end;
    justify-content: center;
    padding : 0 0 5px 0;
}

    .navbar-light .navbar-nav .active > .nav-link{
        color : #FFF;
    }

   .navbar-toggler {
        margin-top :43px;
    }

.bg-nav {
    position : relative;
}

.bg-slide {
    position : absolute;
    background-color: #000000;
    color : #FFFFFF;
    background-image: url('../img/_layout/line.gif');
    background-repeat: repeat-x;
    background-position: bottom;
    width : 137px;
    z-index: 1;
    top : 0;
    height : 120px;
    transition: all 300ms ease-out;
    box-shadow: 0px 4px 18px 5px rgba(50, 50, 50, 0.3);
}

.ncWrapper {
    max-width: 1200px;
    margin : 0 auto;
}

.videoBox {
    border-right : 1px solid #ff9900;
}

.videoBox2 {
    border-left : 1px solid #ff9900;
}

ul {
    padding: 0;
    text-shadow: none;
}

ul li {
    list-style: none;
}

.miniatureCible {
    display : grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap : 0px;
}

    .miniatureCible img {
        width  : 100%;
    }

h1,h2,h4,p.headline,h1.headline {
    color : #ff9900;
    font-weight : normal;
    font-size : 1.25em;
	text-shadow : 0.5px 0px 0px;
}

h1,h2,h4 {
    margin : 0.67em 0;
	font-family: "VERDANA";
}

h3,p.headline,h3.headline {
    color : #ff9900;
    font-weight : normal;
    font-size : 1em;
    text-shadow : 0.5px 0px 0px;
}

h3 {
    margin : 0.67em 0;
    font-family: "VERDANA";
}

.h-titre {
	border-bottom: 1px solid #ff9900;
	padding-bottom: 10px;
	color: #ff8900;
	font-family: "VERDANA";
}
	
	
b,strong {
	font-weight : 600;
}

h1.headline {
	text-align: center;
	font-size : 1.4em;
}

    section.accueil {
        padding : 20px;
        text-align: left;

    }

.a-accueil {
	color : #ff9900;
	transition  : color 0.3s ease-out;
	text-shadow : 0.5px 0px 0px;
}

.a-headline {
	color : #ff9900;
	transition  : all 0.3s ease-out;
}

.a-accueil:hover {
	color : #ff9900;
	text-decoration : underscore;
	
}

.p-legendPhoto {
	text-align: center;
	font-size : 12px;
	
}

.moule_Romain {
	font-size : 14px;
	margin-bottom: 17px;
	
}

.moule_Romain span {
	font-weight : bold;
}
	
.a-headline:hover {
	color : #ff9900;
	text-decoration : none;
	opacity : 0.7;
}

	section.equipement {
		padding : 0px;
		text-align : left;
	}
	
    section.equipement .videoBox{
        border-right : none;
        border-left : 1px solid #ff9900;
    }

	section.services {
		padding : 0px;
		text-align : left;
	}

   
    section.services .videoBox{
        border-right : none;
        border-left : 1px solid #ff9900;
    }
	
	section.contact,
    section.adresse,
    section.telephone {
        top : 25px;
		display: inline-block;
		position : relative ;
		border-right : 1px solid #c3c3c3;
        z-index : 1;
        color :#ff9900;
        opacity: 0;
        transform: translateY(-200px);
	}
	
    section.email {
       
        position: absolute;
        bottom: 34px;
        width: 80%;
        text-align: right;
        right: 5px;
        transform : translateX(50px);
        opacity : 0;
    }



    section.contact{
        animation : happenSection 600ms 200ms ease-out forwards;
    }

   section.adresse {
        animation : happenSection 600ms 600ms ease-out forwards;
   }

    section.telephone {
        animation : happenSection 600ms 900ms ease-out forwards;
    }

    section.email {
        animation : happenSection 600ms 1100ms ease-out forwards;
    }

@keyframes happenSection {
    100% {
        transform: translate(0px,0px);
        opacity : 1;
    }
}

    .border-b {
        border-bottom: 1px solid #ffCC00;
    }

    section.contact p,
    section.adresse p,
    section.telephone p {
        color: #7B7B7B;
        text-align: left;
        margin: 20px 30px;
        font-family: FusiNormal;
        letter-spacing: 1px;
    }

    section.telephone p {
        text-align : right;
    }
    
    section.email p {
        text-align :center;
        position : relative;
        top : 26px;
    }

    section.telephone a,
    section.email a {
        color: #7B7B7B;
    }

     .h-email {
        text-align: center;
        margin: 0;
        position: relative;
        top: 50px;
     }
        

    .h-bureau,
    .h-atelier,
    .h-telephone,
    .h-email
    {
        position: relative;
        font-size: 80px;
        font-family: "Asenine";
        margin: 20px 30px;
    }
    
    .h-atelier {
        text-indent: -11px;
    }
.separation {
    width : 235px;
    margin : 0 auto; 
    text-align:center;
}


.banniere {
    position : relative;
    background-color: #CCC;
	background: #F4F4F4 url('../img/_layout/ncd.png');
	background-position : 86% 10%;
    background-repeat: repeat;
    background-size: auto auto;
	background-repeat: no-repeat;
	background-size: 116%;
    min-height : 10px;
    padding : 20px;
    color : #FFF;
}

.banniere.p-contact {
   background: url('../img/lettre.png'),-webkit-linear-gradient(top,  #ffffff 37%,#d8d8d8 100%);
   background: url('../img/lettre.png'),-o-linear-gradient(top,#ffffff 37%,#d8d8d8 100%);
   background: url('../img/lettre.png'),linear-gradient(to bottom,  #ffffff 37%,#d8d8d8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-repeat: no-repeat,repeat;
    background-position: 99% 172%,100%;
    background-size: 33%,100%;
	min-height : 347px;
}


.banniere-header,.contenuArticle {
    color : #131313;
}


    .contenuArticle h1 {
        animation : animateHeadline 300ms cubic-bezier(0.175, 0.885, 0.32,1.275) forwards;
        transform : translateX(200px);
        opacity : 0;
    }
    

    .contenuArticle p {
        color: #131313;
        text-align: left;
        margin: 20px 0px;
        letter-spacing: 1px;
        animation : animateP 300ms 200ms cubic-bezier(0.175, 0.885, 0.32,1.275) forwards;
        transform : translateX(200px);
        opacity : 0;
    }

    .contenuArticle .image-item img {
        animation : animateImg 300ms 400ms cubic-bezier(0.175, 0.885, 0.32,1.275) forwards;
        transform : translateX(250px);
        opacity : 0;
    }


@keyframes animateHeadline {
    100% {
        transform : translateX(0px);
        opacity: 1;
     }
}

@keyframes animateP {
    100% {
        transform : translateX(0px);
        opacity: 1;
    }
}
@keyframes animateImg {
    100% {
        transform : translateX(0px);
        opacity: 1;
    }
}

footer.footer {
    position : relative;
    border-top: 9px solid #ff9900;
    background-image :  url('../img/_layout/paternFooter.png'),
                        url('../img/_layout/gradiantBottom.png'),
                        url('../img/_layout/blackGround.gif');
    background-repeat: repeat , no-repeat , repeat;
    background-position: top right, top center, top right;
    background-size : auto, cover, auto ; 
	text-align: right;
	display: flex;
	justify-content: space-between;
	align-items: center;

	/* align-items ne centre que dans la boite de CONTENU : le trait
	   orange de 9 px au-dessus n entre pas dans le calcul, et tout le
	   contenu se retrouvait 4,5 px trop bas dans la barre visible.
	   Cela ne se voit pas sur la longue ligne d adresse, mais saute
	   aux yeux sur un mot isole. Meme hauteur, contenu recentre sur
	   la barre entiere. */
	padding: 1px 10px 9px;
	color : #fff;
    }

a.footerAdresse_a {
	color : #fff;
}

p.footerAdresse_p {
	margin :0;
}

a.footerIco_a {
	color: #FFF;
	padding: 2px 10px;
	font-size: 20px;
	transition : all 150ms ease-in;
}

a.footerIco_a:hover {
	text-decoration: none;
}

i.footerIco_a:hover {
	transform : scale(1.2);
}

i.footerIco_a {
	transition : all 150ms ease-in;
}

.mentionslegales {
	color: #000;
	font-size: 14px;
}

a.mentionslegales  {
	color: #FFF;
	font-size: 14px;
}

.photoContent {
    position : relative;
    transition: all 150ms ease-in;
    opacity : 0.8;
}

.photoContent:hover {
    opacity : 1;
}

.dejavue {
    position : absolute;
    width :100%;
    max-width: 100%;
    left : 0;
    top : 0;
}



div.image-item {
    position : relative;
    text-align : center;
    box-shadow : 8px 10px 15px rgba(50, 50, 50, 0.3);
    background-color : rgba(255,255,255,0.5); 
    overflow: hidden;
    border-radius:8px;

}

div.image-item2 {
    position : relative;
    text-align : center;
    box-shadow : 8px 10px 15px rgba(50, 50, 50, 0.3);
    background-color : rgba(255,255,255,0.5); 
    overflow: hidden;

}

div.image-item * {
  box-sizing: border-box;
}

/* La photo couvre son cadre, exactement.

   Sans cette regle l'image garde sa largeur naturelle, souvent inferieure
   d'une fraction de pixel a celle de la colonne : il reste un filet ou le
   fond du cadre est peint a nu. Au repos l'antialiasing le dilue, mais le
   survol bascule l'element sur une couche composite qui se re-rasterise,
   et le filet ressort en trait clair sur les bords.

   display:block en plus de la largeur : une image reste une boite en
   ligne, qui pose sous elle l'espace du bas de casse — meme filet, en bas.

   Le media query mobile posait deja cette largeur ; elle vaut maintenant
   partout, ce qui rend ce doublon inutile mais inoffensif.            */
div.image-item > img {
    display: block;
    width: 100%;
}


div.image-item i {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  font-size: 12px;
  color: #454545;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: #ffffff;
  opacity:0.8;
}

div.image-item i {
  transform : translate(-50%, -50%) scale(0); 
  transition: transform 300ms 0ms cubic-bezier(0.6, -0.28, 0.735,0.045);
}

div.image-item:hover i {
  transform: translate(-50%, -50%)  scale(2);
  transition: transform 300ms 100ms cubic-bezier(0.175, 0.885, 0.32,1.275);
  
}

div.image-item:hover  {
    animation: image-item 0.5s ease 0s 1 normal forwards;
  
}

@keyframes image-item {
    0% {
        box-shadow: 8px 10px 15px rgba(50, 50, 50, 0.3);
        transform: scale(1);
    }

    100% {
        box-shadow: 8px 10px 15px rgba(50, 50, 50, 0.3);
        transform: scale(1.03);
    }
}

/* Les deux interrupteurs de l'écran « Photos du site ».

   Ils se posent séparément et se cumulent : une image peut perdre son
   ombre en restant cliquable, ou l'inverse. Toutes les autres vignettes
   gardent la règle commune, intacte.

   Sans ombre : l'animation de survol reposait la même ombre en arrivant,
   il lui faut donc sa propre version, qui ne fait qu'agrandir.

   Sans modal : plus rien à ouvrir, donc plus d'agrandissement au survol
   ni de curseur en main — une image qui ne réagit pas ne doit pas faire
   croire le contraire. */
.image-item.nc-sans-ombre { box-shadow: none; }
.image-item.nc-sans-ombre:hover { animation-name: image-item-sans-ombre; }

@keyframes image-item-sans-ombre {
    0%   { transform: scale(1); }
    100% { transform: scale(1.03); }
}

.image-item.nc-sans-modal:hover { animation: none; }
.image-item.nc-sans-modal img { cursor: default; }


/* Image détourée.

   Le cadre des photos pose un blanc à demi opaque derrière l'image —
   invisible sous un JPEG, mais qui traverse un PNG détouré et lui écrit
   un fond blanc. On le retire, l'image se pose alors directement sur le
   fond de la page.

   Réglage à part, volontairement : « sans ombre » et « sans fond » sont
   deux choses différentes, et une photo opaque peut vouloir l'un sans
   l'autre. Cette classe se pose sur le conteneur, dans la page.       */
.nc-detoure .image-item { background-color: transparent; }

@keyframes litab {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

 .contenuArticle div.image-item {
        box-shadow: none;
        background-color :transparent; 
 }

 
/* my_tabs */

.my_tabs {
    display : flex;
    flex-wrap : wrap;
    margin : 0 0 20px 0;
}

.my_tabs li {
    flex-grow: 1;
    list-style: none;
    border: 1px solid #ff9900;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
    text-align: center;
    margin : 5px;
    transition: all 300ms ease-out;
}

.my_tabs li:hover {
    background-color: #fdb74d;
    animation: litab 0.5s ease 0s 1 normal forwards;
}

.my_tabs li:hover a {
    color : white;
    text-decoration: none;
}

.my_tabs li.active {
    background-color :#f90;
}

.my_tabs li.active a {
    color : white;
}

.my_tabs li a {
    color: #f90;
}

/* plan de site */
.plan-du-site__h {
    border-bottom : 1px solid #ff9900;
    padding : 5px 0;
}

a.plan-du-site__a {
    color : #999;
    transition : color 150ms ease-out;
}

a.plan-du-site__a:hover {
    color : #ff9900;
    text-decoration : none;
}

/* legende */

figcaption.captionLegend {
	margin: 10px 5px 5px;
}

.captionLegend {
	margin: 5px 5px 10px ;
	font-size: 12px;
}

.caption_Block {
	transform: translateY(50px);
	transition: all 200ms ease-in;
	opacity: 0;
	position: absolute;
	bottom: 0;
	text-align: center;
	color: white;
	width: 100%;
	background-color: rgba(55,55,55,0.55);
	text-shadow: 1px 1px #4C4C4C;
	padding : 5px;
}


	
/* ==========================================================================
   Bootstrap classes  
   ========================================================================== */


.modal-header {
    background-color : #ff9900;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
	border-bottom: 0px solid #e9ecef;
    border-radius : 20px 20px 0px 0px;
}
    
.modal-content {
    border-radius : 0px;
	background-color: #111111;
    border-radius:20px;
    box-shadow: 7px 5px 5px rgba(30, 30, 30, 0.3);
}

.modal-myLg {
    max-width : 1200px;
}

.modal-myLg2 {
    max-width : 1000px;
}


figure {

    margin: 0 0 1rem;

}

.modal-body {

    padding: 0rem;

}

/* La legende sous l'image, dans TOUTES les fenetres : celles de la galerie
   AJAX et des pages generees (.pContent), et celles des pages Services et
   Equipements posees par createImage (.captionLegend).

   Les trois n'avaient aucune couleur propre : elles heritaient de leur
   conteneur de page — #7B7B7B sous .contenuArticle, #5F5F5F sous
   .nc-texte — alors qu'elles s'affichent sur le fond noir du modal. D'ou
   trois gris differents, et deux d'entre eux trop sombres pour ce fond.

   La portee est limitee a .modal : hors fenetre, .captionLegend habille la
   vignette sur fond clair et .pContent le chapeau de la page AJAX ; ni
   l'une ni l'autre ne doit changer. */
.modal .pContent,
.modal .captionLegend { color: #b8b8b8; }

.modal-body2 {

    padding: 1rem;

}

/* Bootstrap pose pointer-events:none sur .modal-dialog pour qu un clic a
   cote de la fenetre la ferme, et le retablit sur .modal-content. Cette
   classe-ci est maison : sans la ligne ci-dessous, tout ce qu elle
   contient est traverse par les clics - boutons, liens, et les questions
   depliantes de la FAQ. */
.modal-content2 {
    pointer-events: auto;
    border-radius : 20px;
	background-color: #FFF;
}

.card {
    /* border-radius: 0px; */
    margin-bottom : 3px;
}

.card-body {
    padding : 0px;
}

.btn:focus {
    box-shadow: none;
}

.btn-ncd {
    font-weight: 400;
    background-color: transparent;
}

.card-header:first-child {
    /* border-radius: 0px; */
}

.card-header {
    padding : 0px;
    background-color: rgba(255, 153, 0, 1);
}

    .card-header .btn-ncd {
        color : white;
    }

.card-header.collapsed {
    background-color: #fff7;
    border-bottom : none;
}

    .card-header.collapsed .btn-ncd {
        color : #f90;
    }

/* ==========================================================================
   Helper classes
   ========================================================================== */

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}



img {
    max-width: 100%;
    /* width : 100%; */

    /* Les balises portent leurs dimensions reelles, pour que le navigateur
       reserve la place avant d avoir telecharge l image. Sans height:auto,
       cette hauteur s appliquerait telle quelle pendant que la largeur est
       ramenee a 100 % par les regles ci-dessous : l image serait etiree. */
    height: auto;
}


/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */



@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (max-width:992px) {
    .nav-item {
        width : auto;
    }

	div.image-item {
    position : relative;
    text-align : center;
    /* box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4); */
    box-shadow : unset;
    /* Pas de passe-partout blanc ici : la legende est du texte nu sous
       la photo, et le blanc paraissait derriere elle comme une bande
       rapportee a l'image. */
    background-color : transparent;
    overflow: hidden;
    margin-bottom : 20px;
}

	div.image-item img{
    width : 100%;
    /* la photo porte elle-meme ses coins ronds : avec ou sans legende
       dans la carte, toutes les photos ont le meme contour */
    border-radius: 8px;
}

	/* Legendes.

	   Trois ecritures dans les pages pour la meme chose : la legende dans
	   la carte (caption_Block), un paragraphe captionLegend apres la carte
	   (pages Equipement, process de numerisation), un paragraphe
	   p-legendPhoto apres la carte (pages Services). Meme habit pour les
	   trois : texte nu de 12 px, centre, dans la couleur du texte, colle a
	   la photo, et une RESERVE DE DEUX LIGNES — une legende d'une ligne
	   prend la place de deux, et deux photos de meme taille sur une meme
	   ligne finissent au meme niveau. Une legende de trois lignes reste
	   possible, elle deborde simplement de sa reserve.

	   L'ecart de 20 px sous la carte passe apres la legende quand elle
	   est hors carte : sinon il s'intercalait entre la photo et elle. */
	div.image-item:has(+ p) { margin-bottom: 0; }

	.caption_Block .captionLegend,
	div.image-item + p.captionLegend,
	div.image-item + p.p-legendPhoto {
	    margin: 6px 5px 16px;
	    min-height: 2.8em;         /* deux lignes de 1,4 */
	    font-size: 12px;
	    line-height: 1.4;
	    letter-spacing: 0;
	    text-align: center;
	    color: inherit;
	}

 
footer.footer {
    position : relative;
    /* top : 50px; */
    border-top: 9px solid #ff9900;
    /* webkit-box-shadow: inset 0px 7px 10px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 7px 10px -3px rgba(0,0,0,0.75);
    box-shadow: inset 0px 7px 10px -3px rgba(0,0,0,0.75); */

    background-image :  url('../img/_layout/paternFooter.png'),
                        url('../img/_layout/gradiantBottom.png'),
                        url('../img/_layout/blackGround.gif');
    background-repeat: repeat , no-repeat , repeat;
    background-position: top right, top center, top right;
    background-size : auto, cover, auto ; 
	text-align: center;
	display: block;
	justify-content: left;
	align-items: center;
	padding: 0px;
	color : #fff;
    }

a.footerAdresse_a {
	color : #fff;
}

p.footerAdresse_p {
	margin :0;
}

a.footerIco_a {
	color: #FFF;
	font-size: 20px;
	transition : all 150ms ease-in;
}

 a.footerIco_a:hover {
	transform : scale(1.2);
	text-decoration: none;
	color : #FF9900;
}

.mentionslegales {
	color: #000;
	font-size: 14px;
}

a.mentionslegales  {
	color: #FFF;
	font-size: 14px;
	text-decoration: underline;
}

	/* Sous 992 px la legende ne se superpose plus a la photo, elle vient
	   dessous. Elle prend alors l'habit des legendes hors carte
	   (p-legendPhoto, pages Impression 3D) : du texte, dans la couleur du
	   texte, sans bande grise ni ombre.

	   Pas de transform ici : Firefox arrondit vers le bas la taille d'un
	   calque transforme, l'image vers le haut, et la bande finissait un
	   pixel avant la photo. Sans calque, plus rien a arrondir.       */
	.caption_Block {
	transform: none;
	opacity: 1;
	position: relative;
	bottom: 0;
	text-align: center;
	color: inherit;
	width: 100%;
	background-color: transparent;
	text-shadow: none;
	padding: 0;                /* l'ecart est porte par le paragraphe, voir « Legendes » */
}
	
    .nav-item.active ,
    .nav-item:hover {
        background-color: #000000;
        color : #FFFFFF;
        background-image: url('../img/_layout/line.gif');
        background-repeat: repeat-x;
        background-position: bottom;
    }

    .ui-tabs .ui-tabs-nav li {
        /* margin: 5px; */
		   border-bottom-width: 1px;
    }

    .ui-widget-header {
            border-bottom: 1px;
    }

    .banniere.p-contact {
        background-position: 49% 97%,100%;
    }


    section.email,
    section.contact,
    section.adresse,
    section.telephone { 
        display:block;
        border: none;
        width : 100%;
        text-align : center;
    }
    section.contact p,
    section.adresse p,
    section.telephone p {
        text-align : center;
    }



    .border-b {
        border : none;
    }

    section.email {
        position :relative;
        
    }

    .navbar-nav > .nav-item > .nav-link {
        text-indent : 10px;
    }
    .banniere-header {
        font-size : 15px;
        top : 10px;
    }
	
	.videoBox,
    .videoBox2,
    section.equipement .videoBox,
    section.services .videoBox {
		border-left : none;
        border-right : none;
       /* margin-bottom : 20px; */
	}
	
    .nav-item {
        height : inherit;
        line-height: inherit;
    }

    .nav-item.active ,
    .nav-item:hover {
        background-image: none;
    }
    .navbar {
        background-image: none;
    }
}


@media only screen and (max-width:768px) {

   .banniere-header {
        font-size : 12px;
        top : 10px;
    }
	
}

@media only screen and (max-width:580px) {
    /* Style adjustments for viewports that meet the condition */


	section.accueil,
    section.equipement,
	section.services,
    .banniere-header {
        padding : 0;
        text-align : left;
        font-size : 15px;
    }

	h1,h2,p.headline {
		font-size : 18px;
		font-family: "arial", sans-serif;
	}

	p.headline {
		text-align: center;
		font-size : 20px;
	}
	

    body {
        padding-top: 0;
   }

    .navbar-brand {
        width : 60%;
    }
   
   
   
   
	.banniere {        
        /* background-color: #d2d2d2; */
        min-height: inherit;
        padding :20px 10px;        
    }
    

	section.contact {
		width : 95%;
	}
	
    .banniere-header {
        top : 0px;
        font-size : 12px;

    }

    section {
        text-align: left;
    }

    a.plan-du-site__a {
        font-size : 17px;
    }
    
    iframe {
        margin-bottom : 20px;
    }

}


@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}



/* --- Contact : titre de page (C3) ----------------------------------
   Le titre etait ecrit en blanc sur fond blanc : invisible, mais il
   occupait 57 px et repoussait le formulaire hors de l ecran.

   Il est desormais retire du rendu sans quitter le document : les
   moteurs et les lecteurs d ecran le lisent toujours, la page ne lui
   reserve plus aucune place. C est aussi plus sain pour le
   referencement, le texte blanc sur fond blanc etant precisement le
   motif que Google traite comme du texte dissimule. */
.p-contact .nc-titre-page {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* --- Contact : les coordonnees gardent leur hauteur propre ---------
   section.email est positionnee en absolu par rapport a son parent.
   Sans ce conteneur, elle s ancrerait au bas du formulaire. */
.p-contact .nc-contact-infos {
    position: relative;
    /* 305 px : le contenu le plus bas s arrete a 281 px une fois la
       section email ancree en bas. Au-dela, on reservait du vide. */
    min-height: 305px;
}
@media (max-width: 991px) {
    .p-contact .nc-contact-infos { min-height: 0; padding-bottom: 30px; }
    .p-contact section.email { position: static; width: auto; text-align: center; }
    .p-contact .h-email { top: 0; }
    .p-contact section.email p { top: 0; }
}


/* --- Contact : le titre fusionne « Bureau & Atelier » ---------------
   Il garde la taille et l exposant de la maquette d origine. La section
   n ayant plus de voisine « Atelier », elle prend simplement la largeur
   dont le titre a besoin. */
.p-contact .h-bureau-atelier {
    white-space: nowrap;
}

/* Sous 992px les sections s empilent et les exposants sont masques :
   le titre peut alors se replier sur la largeur disponible. */
@media only screen and (max-width: 992px) {
    .p-contact .h-bureau-atelier { white-space: normal; }
}
@media only screen and (max-width: 600px) {
    .p-contact .h-bureau-atelier { font-size: 54px; }
}

/* ======================================================================
   Contenu editorial : page Atelier, fiches machines, questions frequentes.

   Le site neutralise les puces (ul li { list-style: none }) pour ses
   menus. Un texte de fond a besoin de listes lisibles : on les retablit
   ici seulement, dans les blocs marques .nc-texte.
   ====================================================================== */

.nc-texte {
    max-width: 100%;

    /* .banniere impose color:#ccc, prevu pour un fond sombre. Sur la page
       Contact le degrade est clair : le texte y devenait illisible
       (contraste 1,6). On fixe donc une couleur explicite, proche du gris
       du site mais suffisamment contrastee. */
    color: #000;
}

.nc-texte strong,
.nc-texte b,
.nc-texte dt {
    color: #3d3d3d;
}

.nc-texte h2 {
    margin: 34px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 153, 0, .45);
    color: #ff8900;
    font-family: "VERDANA";
    font-size: 22px;
}

.nc-texte h3 {
    margin: 22px 0 8px;
    color: #333333;
    font-size: 17px;
    font-weight: bold;
}

.nc-texte p {
    margin: 5px 5px 10px;
    line-height: 1.65;
}

/* --- listes a puces, retablies dans le contenu seulement --- */
.nc-texte ul.nc-liste {
    margin: 0 0 18px;
    padding-left: 20px;
    list-style: disc outside;
}
.nc-texte ul.nc-liste li {
    list-style: disc outside;
    margin-bottom: 9px;
    line-height: 1.6;
}

.nc-texte ol.nc-etapes {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: decimal outside;
    /* surtout pas de counter-reset: none ici : cela supprimerait la
       remise a zero implicite du compteur, et la numerotation
       continuerait sur la lancee de la liste a puces precedente
       (la page Atelier demarrait a 7 apres les 6 machines). */
}
.nc-texte ol.nc-etapes li {
    list-style: decimal outside;
    margin-bottom: 11px;
    line-height: 1.6;
}

/* --- caracteristiques chiffrees --- */
.nc-fiche {
    margin: 0 0 22px;
    padding: 4px 0;
    border-top: 2px solid #ff9900;
    border-bottom: 1px solid #d8d8d8;
}
.nc-fiche dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}
.nc-fiche dt {
    flex: 0 0 34%;
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid #ececec;
    font-weight: bold;
    color: #444444;
}
.nc-fiche dd {
    flex: 0 0 66%;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid #ececec;
    line-height: 1.55;
}
.nc-fiche dl > dt:last-of-type,
.nc-fiche dl > dd:last-of-type {
    border-bottom: none;
}

/* --- questions frequentes --- */
.nc-faq {
    margin: 8px 0 0;
}
.nc-faq details {
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 4px;
    background: #fff9;
}
.nc-faq summary {
    padding: 13px 16px;
    cursor: pointer;
    font-weight: bold;
    line-height: 1.45;
    list-style: none;
    color: #3d3d3d;
}
.nc-faq summary::-webkit-details-marker { display: none; }
.nc-faq summary::before {
    content: "+";
    display: inline-block;
    width: 18px;
    color: #ff8900;
    font-weight: bold;
}
.nc-faq details[open] > summary::before { content: "–"; }
.nc-faq summary:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; }
.nc-faq .nc-reponse {
    padding: 0 16px 14px 34px;
    color: #5f5f5f;
    line-height: 1.65;
}
.nc-faq .nc-reponse p { margin: 0 0 10px; }
.nc-faq .nc-reponse p:last-child { margin-bottom: 0; }

@media only screen and (max-width: 767px) {
    .nc-fiche dt, .nc-fiche dd { flex: 0 0 100%; }
    .nc-fiche dt { padding-bottom: 2px; border-bottom: none; }
    .nc-texte h2 { font-size: 20px; }
}

/* ======================================================================
   Pages Realisations : une rubrique, ou un projet.
   ====================================================================== */

.nc-realisation .nc-fil-visible {
    margin: 0 0 6px;
    font-size: 13px;
    color: #7b7b7b;
}

.nc-realisation .nc-annee {
    margin: 0 0 10px;
    font-size: 13px;
    color: #7b7b7b;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.nc-realisation .nc-resume {
    max-width: 70ch;
    font-size: 17px;
    line-height: 1.6;
}

/* --- la photo principale du projet --- */
.nc-photo-principale {
    margin: 22px 0 30px;
    max-width: 900px;
}
.nc-photo-principale img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.nc-photo-principale figcaption,
.nc-galerie figcaption {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #7b7b7b;
}

/* --- grilles de vignettes --- */
.nc-galerie {
    margin: 4px 0 26px;
}
.nc-galerie figure {
    margin: 0 0 20px;
}
.nc-galerie img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    background: #ececec;
}
.nc-galerie a {
    display: block;
    margin-bottom: 6px;
    text-decoration: none;
    color: #5f5f5f;
}
.nc-galerie a img {
    transition: transform .25s ease, box-shadow .25s ease;
}
.nc-galerie a:hover img,
.nc-galerie a:focus-visible img {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.nc-galerie a span {
    display: block;
    margin-top: 7px;
    font-size: 13.5px;
    font-weight: bold;
    line-height: 1.4;
    color: #3d3d3d;
}
.nc-galerie a:hover span { color: #ff8900; }

.nc-galerie .nc-legende {
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.5;
    color: #7b7b7b;
}

.nc-realisation .nc-rappel {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid #d8d8d8;
}

.nc-autres-rubriques {
    columns: 2;
}
@media only screen and (max-width: 600px) {
    .nc-autres-rubriques { columns: 1; }
    .nc-realisation .nc-resume { font-size: 16px; }
}

/* --- lien vers la page complete d une rubrique, sous ses vignettes --- */
.nc-voir-rubrique {
    margin: 8px 0 4px;
    padding: 0 4px;
    font-size: 13px;
}
.nc-voir-rubrique a {
    color: #ff9900;
    text-decoration: none;
}
.nc-voir-rubrique a:hover,
.nc-voir-rubrique a:focus-visible {
    text-decoration: underline;
}

/* --- La FAQ dans la fenetre du pied de page ------------------------- */

.nc-faq-modal {
    max-height: 68vh;
    overflow-y: auto;
    color: #3d3d3d;
}
/* La fenetre voisine, celle des mentions legales, compose en noir sur
   blanc. On s aligne : l orange de la charte tombe a 2,4 de contraste
   sur du blanc, en dessous du seuil meme pour un gros titre. */
.nc-faq-modal h5 {
    margin: 0 0 14px;
    color: #1f1f1f;
    font-weight: bold;
}
.nc-faq-modal .nc-faq details {
    background: #f6f7f8;
    border-color: #e2e5e8;
}
.nc-faq-modal .nc-reponse p:last-child { margin-bottom: 0; }
.nc-faq-suite {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid #e2e5e8;
    font-size: 14px;
    color: #5f5f5f;
}
.nc-faq-suite a {
    color: #ff9900;
}

/* --- renvoi vers les questions frequentes, sous le formulaire ------- */
.nc-vers-faq {
    margin: -6px 0 18px;
    font-size: 14px;
}
.nc-vers-faq a { text-decoration: underline; }

/* --- Accueil : accroche, intertitres et bouton de devis -------------- */

.nc-accroche {
    margin: -6px 0 22px;
    font-size: 18px;
    line-height: 1.5;
    color: #5f5f5f;
}

.nc-h2-accueil {
    margin: 30px 0 12px;
    color: #ff8900;
    font-family: VERDANA;
    font-size: 20px;
}

.nc-cta-ligne {
    margin: 22px 0 6px;
}

/* Le bouton de devis : c est la seule action que la page demande, il doit
   se voir. Fond plein plutot que lien souligne, et une cible assez haute
   pour le doigt sur mobile (44 px recommandes). */
.nc-cta {
    display: inline-block;
    padding: 13px 30px;
    border: 2px solid #ff9900;
    border-radius: 3px;
    background: #ff9900;
    /* texte sombre et non blanc : du blanc sur cet orange ne donne que
       2,1 de contraste, loin du seuil de 4,5. En #1c1c1c on monte a 8,
       sans quitter la charte. */
    color: #1c1c1c;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.nc-cta:hover,
.nc-cta:focus-visible {
    background: #ffffff;
    color: #b35f00;
    text-decoration: none;
}

@media only screen and (max-width: 600px) {
    .nc-accroche { font-size: 16px; }
    .nc-h2-accueil { font-size: 18px; }
    /* En bloc pleine largeur, le texte doit se centrer lui-meme : le
       paragraphe qui le porte est aligne a gauche. */
    .nc-cta { display: block; text-align: center; }
}

/* --- Bloc de cloture des pages Services (include/service-cta.php) ---- */

.nc-service-fin {
    padding: 26px 0 30px;
    text-align: center;
}
.nc-service-fin h2 {
    margin: 0 0 10px;
    color: #ff8900;
    font-family: "VERDANA";
    font-size: 22px;
}
.nc-service-fin p {
    max-width: none;
    margin: 0 auto 14px;
}
.nc-service-fin .nc-cta-ligne {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 16px;
    margin: 18px 0 0;
}

/* le bouton secondaire : contour, meme famille que le bouton plein */
.nc-cta-secondaire {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid #ff9900;
    border-radius: 3px;
    background: transparent;
    color: #b35f00;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.nc-cta-secondaire:hover,
.nc-cta-secondaire:focus-visible {
    background: #ff9900;
    color: #1c1c1c;
    text-decoration: none;
}

@media only screen and (max-width: 600px) {
    .nc-service-fin .nc-cta-ligne { flex-direction: column; }
    .nc-cta-secondaire { display: block; width: 100%; }
}

/* Le lien vers la prestation qu'une réalisation illustre, sous l'image.
   Discret : c'est une porte de sortie utile, pas un appel à l'action —
   celui-ci est en bas de page et doit rester le plus visible. */
.nc-lien-service {
    margin: 10px 0 0;
    text-align: center;
    /* Meme corps que l'annee et les legendes de cette page : le lien est un
       texte secondaire, il n'a pas a peser plus que la legende qui le
       precede. */
    font-size: 13px;
}
.nc-lien-service:empty { display: none; }

/* Sur les pages de realisation, le paragraphe suit immediatement la figure :
   on lui donne la meme largeur qu'elle, pour que les liens se centrent sous
   l'IMAGE et non sur la colonne, plus large de quatre-vingts pixels.
   Ailleurs — la galerie a modal — la largeur reste celle du conteneur, dont
   la mise en page ancienne a ses propres decalages. */
.nc-photo-principale + .nc-lien-service { max-width: 900px; }
.nc-lien-service a {
    color: #b36b00;
    text-decoration: none;
    border-bottom: 1px solid rgba(179, 107, 0, .35);
    padding-bottom: 1px;
}
.nc-lien-service a:hover,
.nc-lien-service a:focus { border-bottom-color: #b36b00; }
.nc-lien-service a::after { content: " →"; }

/* Plusieurs liens sur une ligne : l'annonce, puis les prestations séparées
   par des points médians. Les séparateurs sont dans le flux, pas en
   ::after, pour qu'un retour à la ligne ne laisse jamais un point orphelin
   en début de ligne. */
.nc-lien-service-intro { color: #6b6b6b; margin-right: 2px; }
.nc-lien-service-sep { color: #b0b0b0; margin: 0 4px; }
.nc-lien-service a::after { content: " →"; }
.nc-lien-service-intro ~ a::after { content: none; }

/* --- « Dernières réalisations », sur l'accueil ---------------------------
   Six miniatures choisies dans l'Admin (fiche > À la une), affichées dans
   la même grille que les services au-dessus. La miniature est carrée et
   cadrée à la main depuis la fiche : c'est ce cadrage-là qui s'affiche,
   pas un recadrage automatique. */
.nc-une-img {
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------- vidéos

   Une vue complémentaire peut être un film. Le lecteur prend la place de
   l'image, à la même largeur : la mise en page ne bouge pas d'un cas à
   l'autre. */
.ncFilmContent, .nc-film {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}
.ncFilmContent { margin: 0 auto; }

/* La vignette d'un film porte une pastille de lecture : sans elle, rien
   ne la distinguerait de l'image fixe qui lui sert d'affiche. */
.subPhotoItem.ncVignetteFilm { position: relative; }
.subPhotoItem.ncVignetteFilm::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    /* le triangle de lecture, sans image à charger */
    background-image: linear-gradient(transparent, transparent);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .8) inset;
    pointer-events: none;
}
.subPhotoItem.ncVignetteFilm::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    margin: -7px 0 0 -4px;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #fff;
    z-index: 1;
    pointer-events: none;
}

/* La vue que l'on ne montre pas.

   « !important » n'est pas une facilité : l'image du modal porte l'utilitaire
   Bootstrap « d-block », qui vaut display:block !important. Sans cela, elle
   resterait visible au-dessus du lecteur. */
.nc-vue-cachee { display: none !important; }


/* ==========================================================================
   Fiche de realisation : tableau, agrandissement, suivant / precedent
   ========================================================================== */

/* Le titre et, a son bout droit, precedent / suivant dans la rubrique. */
.nc-titre-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 18px;
}
.nc-titre-ligne .h-titre { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.nc-nav-fiche {
    flex: 0 0 auto;
    padding-bottom: 10px;
    font-size: 13.5px;
    white-space: nowrap;
}
.nc-nav-fiche a { color: #b36b00; text-decoration: none; }
.nc-nav-fiche a:hover, .nc-nav-fiche a:focus-visible { color: #ff8900; text-decoration: underline; }
.nc-nav-sep { color: #b0b0b0; margin: 0 6px; }

/* L'image et, a sa droite, le tableau. Sous 768 px, le tableau passe sous
   l'image. */
.nc-fiche-bloc {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 22px 30px;
    margin: 22px 0 30px;
}
.nc-fiche-bloc .nc-photo-principale { flex: 1 1 520px; min-width: 0; margin: 0; max-width: 900px; }
.nc-fiche-bloc .nc-infos { flex: 1 1 240px; max-width: 340px; }

/* Le tableau : libelle discret au-dessus de la valeur, une ligne par
   information, un filet entre deux. Il reprend .nc-fiche (filet orange en
   tete) et empile dt / dd, la colonne etant trop etroite pour deux. */
.nc-infos { margin: 0; padding: 0; border-bottom: none; }
.nc-infos dl { display: block; }
.nc-infos dt {
    flex: none;
    padding: 12px 0 2px;
    border-bottom: none;
    font-size: 11.5px;
    font-weight: bold;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.nc-infos dd {
    flex: none;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid #ececec;
    font-size: 14.5px;
    line-height: 1.5;
    color: #3d3d3d;
}
.nc-infos dl > dd:last-of-type { border-bottom: none; }
.nc-infos .nc-info-procedes a {
    color: #b36b00;
    text-decoration: none;
    border-bottom: 1px solid #f0c98a;
}
.nc-infos .nc-info-procedes a:hover,
.nc-infos .nc-info-procedes a:focus-visible { color: #ff8900; border-bottom-color: #ff8900; }

/* Une image qui s'agrandit. La loupe au centre et son animation sont
   celles de div.image-item, comme partout sur le site ; on retire seulement
   l'ombre que .nc-photo-principale et .nc-galerie posent sur l'image, le
   cadre en ayant deja une. */
.nc-agrandir { display: block; cursor: zoom-in; text-decoration: none; }
.nc-agrandir .image-item img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.nc-galerie a.nc-agrandir { margin-bottom: 0; }
.nc-galerie a.nc-agrandir:hover img,
.nc-galerie a.nc-agrandir:focus-visible img { transform: none; box-shadow: none; }

/* Les fleches de la fenetre, comme sur la galerie AJAX : invisibles tant
   que la souris n'est pas sur l'image. */
.nav-arrow {
    font-size: 20px !important;
    padding: 5px 10px !important;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.image-item:hover .nav-arrow,
.modal-body:hover .nav-arrow { opacity: 1; }
#ncModalVue .pContent:empty { display: none; }

/* Galerie AJAX : sous l'image, les vignettes a gauche et le tableau a
   droite. */
.nc-sous-bloc {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 26px;
}
/* La rangee garde ses marges negatives de Bootstrap ; chaque vignette recoit
   sa largeur en pixels du script (--nc-vignette), la meme qu'avant. */
.nc-sous-bloc .nc-sous-vignettes { flex: 1 1 320px; min-width: 0; justify-content: flex-start !important; }
.nc-sous-bloc .nc-sous-vignettes .subPhotoItem { flex: 0 0 var(--nc-vignette, 132px); max-width: none; }
.nc-sous-bloc .nc-infos { flex: 1 1 220px; max-width: 320px; margin-top: 16px; }
.nc-sous-bloc .nc-infos[hidden] { display: none; }

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #f4f4f4;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
}


/* ======================================================================
   Telephone.

   Deux seuils, tous deux ceux de Bootstrap, pour que rien ne bouge
   au-dessus :
     767,98 px — sous « md » : plus de fenetre d'agrandissement (le clic
                 est arrete dans js/main.js, meme seuil) ; ici on retire
                 ce qui l'annoncait, la loupe et le curseur.
     575,98 px — sous « sm » : toutes les colonnes Bootstrap passent a
                 100 %, une photo par rangee. On en remet deux.
   ====================================================================== */

@media only screen and (max-width: 767.98px) {
    .image-item .fa-search-plus,
    .nc-agrandir .fa-search-plus { display: none; }

    .image-item [data-toggle="modal"],
    .image-item img,
    .nc-agrandir { cursor: default; }

    /* Plus d'agrandissement au survol : sur un ecran tactile, :hover
       reste colle apres le toucher, et la carte restait a 103 % — avec
       le bord de la photo reechantillonne, flou, contre le bord net de
       la legende. Le toucher n'ouvre plus rien, l'animation n'annonce
       plus rien. */
    div.image-item:hover { animation: none; }

    /* Les fenetres ne sont plus rendues deplacables sur telephone
       (js/plugins.js) ; si un dialogue l'etait tout de meme, jQuery UI y
       poserait touch-action:none. On rend la main au doigt : pincement
       pour dezoomer, defilement dans la fenetre. */
    .modal-dialog,
    .modal-dialog.ui-draggable-handle { touch-action: auto; }
}

@media only screen and (max-width: 575.98px) {
    /* Deux photos par rangee — seulement quand deux colonnes-photo se
       touchent : celle qui a une voisine-photo juste avant ou juste
       apres elle. Une photo seule a cote d'un texte garde toute la
       largeur, comme le visuel de la page atelier ; et sur l'accueil,
       ou photos et textes alternent, ces regles-ci ne jouent pas.

       :has() n'est pas compris des vieux telephones : ils gardent une
       photo par rangee, l'affichage d'avant.                          */
    [class*="col-"]:has(> .image-item):has(+ [class*="col-"] > .image-item),
    [class*="col-"]:has(> .image-item) + [class*="col-"]:has(> .image-item) {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Accueil, « Nos outils » : les colonnes alternent photo et texte, et
       chaque texte est celui de la photo d'a cote. La photo seule a 50 %
       renvoyait son texte a la ligne ; on met le texte a 50 % aussi, et
       les deux se retrouvent cote a cote, centres l'un sur l'autre par la
       rangee. Les deux sens, parce qu'une rangee commence par la photo
       et la suivante par le texte.                                      */
    .accueil [class*="col-"]:has(> .image-item),
    .accueil [class*="col-"]:has(> .image-item) + [class*="col-"],
    .accueil [class*="col-"]:has(+ [class*="col-"] > .image-item) {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Les deux colonnes d'une paire partent du haut de leur ligne.

       Une rangee peut centrer ses colonnes verticalement (align-items-
       center) : la colonne la moins haute descendait, et ses photos avec.
       Etiree a la hauteur de la ligne, elle garde ses photos en haut.
       Rien d'autre : les cartes gardent leur hauteur naturelle, et c'est
       la reserve de deux lignes des legendes (bloc « Legendes » du media
       query 992 px) qui met les cartes d'une meme ligne au meme niveau. */
    [class*="col-"]:has(> .image-item):has(+ [class*="col-"] > .image-item),
    [class*="col-"]:has(> .image-item) + [class*="col-"]:has(> .image-item) {
        align-self: stretch;
    }

    /* A deux photos par rangee, une legende n'a que 148 px de large : la
       plupart font trois lignes. La reserve passe a trois, pour que des
       colonnes qui empilent plusieurs cartes (page Lettrages) gardent
       leurs photos en face les unes des autres. Une legende de quatre
       lignes deborde, et decale ce qui la suit dans sa colonne : c'est le
       cas de Knauf Industries, la plus longue du site. */
    .caption_Block .captionLegend,
    div.image-item + p.captionLegend,
    div.image-item + p.p-legendPhoto {
        min-height: 4.2em;
    }

    /* Une photo seule sur sa ligne — visuellement, pas dans la rangee :
       apres un texte pleine largeur, ou derniere d'un nombre impair —
       reprend toute la largeur. C'est js/main.js qui la repere
       (ncEquilibrerRangees) et pose la classe : le CSS ne sait pas
       compter les paires.                                             */
    .nc-seul {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}