/* ======================================== LISTE-TABLEAU.css ======================================== */
/* Présentation des projets */
/* Septembre 2025 - IAFACTORY j.muckensturm


/* LISTE PROJET
================================================================================================== */

.projet-container {display: flex; flex-direction: column; gap: 0; width: 1499px;margin:44px 0 0 1px;padding: 0 0 0 0; position: relative; counter-reset: project-counter 0;}
.projet-header {top: 0;z-index: 0;display: grid;
    grid-template-columns:550px 250px 250px 300px 0;/* emplacement titre colonne*/
    align-items: center;height: 49px;border-bottom: 1px solid rgba(119, 119, 119, 0.4); border-top: 1px solid rgba(119, 119, 119, 0.2);background:rgba(255,255,255,0.5);}
.projet-header::after {z-index: 2;content: "";position: absolute;inset: 0;pointer-events: none;
    background-image:linear-gradient(to bottom, rgba(119,119,119,0.2), rgba(119,119,119,0.2)),linear-gradient(to bottom, rgba(119,119,119,0.2), rgba(119,119,119,0.2)),linear-gradient(to bottom, rgba(119,119,119,0.2), rgba(119,119,119,0.2)),linear-gradient(to bottom, rgba(119,119,119,0.2), rgba(119,119,119,0.2));background-repeat: no-repeat;background-size: 1px 100%;
    background-position: 549px 0, 799px 0, 1049px 0, 1349px 0;}/* emplacement filet colonne*/

    .projet-data {z-index: 1;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:11px;letter-spacing:2px;position: relative; white-space: nowrap; text-decoration: none; color: var(--color-foreground);transition: all 0.3s ease; overflow: hidden; text-overflow: ellipsis; padding: 6px; }
    .projet-data.col1marque {margin-left:43px;justify-self: start;}
    .projet-data.col2secteur {margin-left:43px;justify-self: start;}
    .projet-data.col3intervention {margin-left:43px;justify-self: start;}
    .projet-data.col4date {margin-left:43px;justify-self: start;}
    .projet-data.col5ref {margin-left:43px;justify-self: start;}
    .projet-data::after { z-index: -1;content: ""; position: absolute; top: 0; left: -8px; width: calc(100% + 16px); height: calc(100% - 2px); background: var(--color-accent); transition: transform 0.3s ease; transform: scaleX(0); transform-origin: left;}

/* Compteur de projet
---------------------------------------------------------------------- */
#counter {display:block;float:left;height:50px;width:50px;margin:-50px 0 0 350px;padding: 0 0 0 146px;background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-repeat:no-repeat;background-position:101px center;
          font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:52px;letter-spacing : 5px;text-align: left;font-weight:normal;}

/* Accordéon - ouverture - fermeture filtres mobile */
.afficher-filtre-mobile {display: none;}


/* Controls - filtres et tris
---------------------------------------------------------------------- */
.controls {}
.control[data-filter=".all"] {font-size:10px;width:100px;color: #91e6c7;}
.control[data-filter=".secteur1"] {font-size:10px;width:100px;color: #91e6c7;}
.control[data-filter=".secteur2"] {font-size:10px;width:100px;color: #5ecdde;}
.control[data-filter=".secteur3"] {font-size:10px;width:100px;color: #d595aa;}
.control[data-filter=".secteur4"] {font-size:10px;width:100px;color: #000;}

.mixitup-control-active {background: #000;border:1px solid #000;}
.mixitup-control-active[data-filter]:after {background: transparent;}

.control {width:31px;height:31px;margin:0 0 0 0;padding:0 0 0 0;border:none;border:1px solid #DADADA;background:rgba(245, 245, 245, 1.0);/*webkit-appearance: none*/;-moz-appearance: none;appearance: none;background-image:url(../img/ico/ico-chevron-selection.png);background-repeat:no-repeat;background-position:center center;}
.control[data-sort]:after {}
.control[data-sort*=":desc"]:after {}

/* recherche*/
.fonction-recherche {display:block;float:left;position:relative;margin:-41px 0 0 125px;padding:0 0 0 0;}
.fonction-recherche .input {width:385px;height:31px;margin:0 0 0 0;padding:0 0 0 15px;background:#F7F7F7;border:none;text-transform:uppercase;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:11px;letter-spacing:3px;color:#000;}
.fonction-recherche .clear-search {display: none;position: absolute;padding:0 0 1px 0;right: 5px;top: 50%; /* place le clear à droite */width:20px;height:20px;border-radius:2px;transform: translateY(-50%);cursor: pointer;font-size: 20px;text-align:center;background:#000;color: #FFF;}
.fonction-recherche .input:not(:placeholder-shown) + .clear-search {display: block;}
.fonction-recherche .input:focus {outline: 1px solid #000;outline-offset: -1px;}

/* menu déroulant filtre secteur*/
.controls-secteur > select {position:absolute;display:block;cursor:pointer;width:201px;height:31px;margin:-41px 0 0 575px;padding:0 0 0 25px;border:none;border:1px solid #DADADA;background:rgba(245, 245, 245, 1.0);text-transform:uppercase;
    font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:11px;letter-spacing:3px;color:#000;-webkit-appearance: none;-moz-appearance: none;appearance: none;
    background-image:url(../img/ico/ico-chevron-selection.png);background-repeat:no-repeat;background-position:175px 10px;}

.controls-secteur > select:hover {background-image:url(../img/ico/ico-chevron-selection.png);background-repeat:no-repeat;background-position:175px 10px;border:1px solid #000;}
.controls-secteur > select > option {font-size:13px;}/*focus drop down item du menu*/

/* menu déroulant filtre action*/
.controls-action > select {position:absolute;display:block;cursor:pointer;width:201px;height:31px;margin:-41px 0 0 825px;padding:0 0 0 25px;border:none;border:1px solid #DADADA;background:rgba(245, 245, 245, 1.0);text-transform:uppercase;
    font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:11px;letter-spacing:3px;color:#000;-webkit-appearance: none;-moz-appearance: none;appearance: none;
    background-image:url(../img/ico/ico-chevron-selection.png);background-repeat:no-repeat;background-position:175px 10px;}

.controls-action > select:hover {background-image:url(../img/ico/ico-chevron-selection.png);background-repeat:no-repeat;background-position:175px 10px;border:1px solid #000;}
.controls-action > select > option {font-size:13px;}/*focus drop down item du menu*/


/* tri*/
.controls-tri > select {position:absolute;display:block;cursor:pointer;width:201px;height:31px;margin:-41px 0 0 1075px;padding:0 0 0 25px;border:none;border:1px solid #DADADA;background:rgba(245, 245, 245, 1.0);text-transform:uppercase;
    font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:11px;letter-spacing:3px;color:#000;-webkit-appearance: none;-moz-appearance: none;appearance: none;
    background-image:url(../img/ico/ico-chevron-selection.png);background-repeat:no-repeat;background-position:175px 10px;}

.controls-tri > select:hover {background-image:url(../img/ico/ico-chevron-selection.png);background-repeat:no-repeat;background-position:175px 10px;border:1px solid #000;}
.controls-tri > select > option {font-size:13px;}/*focus drop down item du menu*/

/* Container
---------------------------------------------------------------------- */
.container {margin:-1px 0 0 0;padding:0 1px 49px 1px;border:1px solid #DADADA;text-align: justify;font-size:0;/*background:rgba(255,255,255,0.5);*/background:rgba(225,225,225,0.5);}
.container:after {content: '';display: inline-block;width: 100%;}


/* Target Elements
---------------------------------------------------------------------- */
.gap {display: inline-block;vertical-align: top;}

.mix {display: inline-block;vertical-align: top;position: relative;visibility: hidden;}
.mix:before {content: '';display: inline-block;}
.mixitup-ready .mix {visibility: visible;}


.mix a {position: relative;overflow: hidden;display:block;width:1423px;height:148px;margin:25px 0 0 24px;padding:0 0 0 25px;line-height:148px;border-radius:5px;border:1px solid #FFF;background:rgba(255,255,255,0.7);color: #000;
    font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:15px;letter-spacing:1px;transition: all 0.3s ease;}
.mix a:hover {padding:0 0 0 25px;color: #FFF;opacity:1.0;}
/* Effet hover */
.mix a::before {content: "";position: absolute;top: 0;left: 0;width: 0%;height: 100%;background:#000; /* Couleur de remplissage */z-index: 0;transition: width 0.50s ease-in-out;transition-delay: 150ms;}
.mix a span {position: relative;z-index: 1;transition: color 0.3s ease;}/* Lien au-dessus du pseudo-élément */
.mix a:hover::before {width: 100%;}/* Hover : le pseudo-élément se déploie */
.mix a:hover span {color: #FFF;}/* On inverse la couleur du texte au hover */

.refname {display:block;float:left;width:448px;margin:0 0 0 0;padding:0 0 0 50px;text-transform: uppercase;font-weight:bolder;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:20px;letter-spacing:3px;color:#000;}
.refsecteur {display:block;float:left;width:200px;margin:0 0 0 0;padding:0 0 0 50px;text-transform: uppercase;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:12px;letter-spacing:2px;color:#BABABA;}
.refaction {display:block;float:left;width:200px;margin:0 0 0 0;padding:0 0 0 50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:12px;letter-spacing:2px;color:#BABABA;}
.refdate {display:block;float:left;width:50px;margin:0 0 0 0;padding:0 0 0 50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:11px;letter-spacing:5px;color:#BABABA;}
.refillus {position:absolute;display:block;float:left;margin:0 0 0 1150px;padding:39px 15px 0 0;  z-index: 1; /* au-dessus du hover */}
.refnumber {display:block;float:left;width:50px;margin:0 0 0 0;padding:0 0 0 250px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:11px;letter-spacing:5px;color:#BABABA;}



/* Résumé et texte synthétique bas de page
---------------------------------------------------------------------- */
.resume-projet-titre {display:block;margin:83px 0 0 50px;width:1450px;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:1px;color:#777777;}
.resume-projet-texte {display:block;margin:25px 0 0 50px;width:550px;height:117px;padding:0 900px 0 0;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:1px;color:#777777;}
.specifique-footer-position-projet {} /* spécifique mediaqueries pour caler le footer */


/* Particules - projets liste */
#particle-canvas4 {pointer-events:none;
  transform: rotate(90deg);
  position:absolute;
  left:0;/*33%*/
  top:350px;
  width: 100%;
  height: 400px;
  vertical-align: middle;
  z-index:9;
  overflow-x: hidden;overflow-y: hidden;
}

/* ==================================================================== */
/* °°° 	@MEDIAQUERIES                         													*/
/* °°°  875px                       																		*/
/* ==================================================================== */

@media screen and (min-width: 875px) and (max-width: 1600px) {


      /* LISTE PROJET
      ================================================================================================== */

      .projet-container {width: 749px;margin:44px 0 0 1px;padding: 0 0 0 0;}
      .projet-header {grid-template-columns:200px 200px 200px 100px 0;/* emplacement titre colonne*/height: 49px;}
      .projet-header::after {/*display : none > les séparateurs des colonnes ne sont pas affichés */
                  display:none;
                        background-position: 199px 0, 399px 0, 599px 0, 749px 0;}/* emplacement filet colonne*/

          .projet-data {/*display : none > les titres labels du tableau ne sont pas affichés */
                  display:none;font-size:11px;letter-spacing:2px;padding: 6px;}
                        .projet-data.col1marque {margin-left:43px;} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */
                        .projet-data.col2secteur {margin-left:43px;} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */
                        .projet-data.col3intervention {margin-left:43px;} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */
                        .projet-data.col4date {margin-left:43px;} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */
                        .projet-data.col5ref {margin-left:43px;} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */
                        .projet-data::after {top: 0; left: -8px; width: calc(100% + 16px); height: calc(100% - 2px);} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */

      /* Compteur de projet
      ---------------------------------------------------------------------- */
      #counter {height:50px;width:50px;margin:-28px 0 0 204px;padding: 0 0 0 146px;background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-position:97px 8px;font-size:26px;letter-spacing :5px;}

      /* Accordéon - ouverture - fermeture filtres mobile */
      .afficher-filtre-mobile {display: none;}


      /* Controls - filtres et tris
      ---------------------------------------------------------------------- */
      .controls {}
      .control[data-filter=".all"] {font-size:10px;width:100px;}
      .control[data-filter=".secteur1"] {font-size:10px;width:100px;}
      .control[data-filter=".secteur2"] {font-size:10px;width:100px;}
      .control[data-filter=".secteur3"] {font-size:10px;width:100px;}
      .control[data-filter=".secteur4"] {font-size:10px;width:100px;}

      .mixitup-control-active {}
      .mixitup-control-active[data-filter]:after {}

      .control {width:31px;height:31px;margin:0 0 0 0;padding:0 0 0 0;background-image:url(../img/ico/ico-chevron-selection.png);background-position:center center;}
      .control[data-sort]:after {}
      .control[data-sort*=":desc"]:after {}

      /* recherche*/
      .fonction-recherche {margin:-39px 0 0 25px;padding:0 0 0 0;}
      .fonction-recherche .input {width:159px;height:24px;margin:0 0 0 0;padding:0 0 0 15px;font-size:11px;letter-spacing:1px;border:1px solid #DFDFDF;}
      .fonction-recherche .clear-search {padding:0 0 1px 0;right: 3px;top: 50%; /* place le clear à droite */width:19px;height:19px;font-size: 17px;}
      .fonction-recherche .input:not(:placeholder-shown) + .clear-search {display: block;}
      .fonction-recherche .input:focus {}

      /* menu déroulant filtre secteur*/
      .controls-secteur > select {display:block;width:151px;height:26px;margin:-39px 0 0 225px;padding:0 0 0 10px;font-size:11px;letter-spacing:1px;background-image:url(../img/ico/ico-chevron-selection.png);background-position:130px 7px;}
      .controls-secteur > select:hover {background-image:url(../img/ico/ico-chevron-selection.png);background-position:130px 7px;}
      .controls-secteur > select > option {font-size:13px;}/*focus drop down item du menu*/

      /* menu déroulant filtre action*/
      .controls-action > select {display:block;width:151px;height:26px;margin:-39px 0 0 400px;padding:0 0 0 10px;font-size:11px;letter-spacing:1px;background-image:url(../img/ico/ico-chevron-selection.png);background-position:130px 7px;}
      .controls-action > select:hover {background-image:url(../img/ico/ico-chevron-selection.png);background-position:130px 7px;}
      .controls-action > select > option {font-size:13px;}/*focus drop down item du menu*/


      /* tri*/
      .controls-tri > select {display:block;width:151px;height:26px;margin:-39px 0 0 575px;padding:0 0 0 10px;font-size:11px;letter-spacing:1px;background-image:url(../img/ico/ico-chevron-selection.png);background-position:130px 7px;}
      .controls-tri > select:hover {background-image:url(../img/ico/ico-chevron-selection.png);background-position:130px 7px;}
      .controls-tri > select > option {font-size:13px;}/*focus drop down item du menu*/

      /* Container
      ---------------------------------------------------------------------- */
      .container {margin:-1px 0 0 0;padding:0 1px 49px 1px;font-size:0;}
      .container:after {}


      /* Target Elements
      ---------------------------------------------------------------------- */
      .gap {}

      .mix {}
      .mix:before {}
      .mixitup-ready .mix {}


      .mix a {width:673px;height:123px;margin:25px 0 0 24px;padding:0 0 0 25px;line-height:98px;font-size:15px;letter-spacing:1px;}
      .mix a:hover {padding:0 0 0 25px;}
      /* Effet hover */
      .mix a::before {}
      .mix a span {}/* Lien au-dessus du pseudo-élément */
      .mix a:hover::before {}/* Hover : le pseudo-élément se déploie */
      .mix a:hover span {}/* On inverse la couleur du texte au hover */

      .refname {width:248px;margin:-5px 0 0 0;padding:0 0 0 25px;font-size:15px;letter-spacing:2px;}
      .refsecteur {width:98px;margin:45px 0 0 -114px;padding:0 0 0 0;font-size:12px;letter-spacing:2px;}
      .refaction {width:148px;margin:45px 0 0 49px;padding:0 0 0 0;font-size:12px;letter-spacing:1px;}
          .refaction::before {content: "→";margin-right: 15px;} /* ajout d'un séparateur */
      .refdate {width:50px;margin:45px 0 0 -387px;padding:0 0 0 0;font-size:11px;letter-spacing:2px;}
          .refdate::after {content: "/";margin-left: 15px;} /* ajout d'un séparateur */
      .refillus {float:left;margin:0 0 0 500px;padding:25px 0 0 0;}
      .refnumber {width:30px;margin:45px 0 0 -447px;padding:0 0 0 0;font-size:11px;letter-spacing:2px;}
          .refnumber::after {content: "/";margin-left: 15px;} /* ajout d'un séparateur */



      /* Résumé et texte synthétique bas de page
      ---------------------------------------------------------------------- */
      .resume-projet-titre {margin:83px 0 0 50px;width:450px;line-height:25px;font-size:14px;letter-spacing:1px;}
      .resume-projet-texte {margin:25px 0 0 50px;width:600px;height:117px;padding:0 0 0 0;font-size:13px;letter-spacing:1px;}
      .specifique-footer-position-projet {clear:both;margin:88px 0 0 0;} /* bien caler le footer sous le résumé dans les pages tableaux et liste */


/* Particules - projets liste */
#particle-canvas4 {transform: rotate(90deg);left:0;top:150px;width: 100%;height: 200px;overflow-x: hidden;overflow-y: hidden;}


}



/* ==================================================================== */
/* °°° 	@MEDIAQUERIES                         													*/
/* °°°  300px - mobile mini          																		*/
/* ==================================================================== */


@media screen and (min-width:50px) and (max-width:874px){


      /* LISTE PROJET
      ================================================================================================== */

      .projet-container {width: 299px;margin:-1px 0 0 1px;padding: 0 0 0 0;}
      .projet-header {grid-template-columns:200px 200px 200px 100px 0;/* emplacement titre colonne*/height: 199px;}
      .projet-header::after {/*display : none > les séparateurs des colonnes ne sont pas affichés */
                  display:none;
                        background-position: 199px 0, 399px 0, 599px 0, 749px 0;}/* emplacement filet colonne*/

          .projet-data {/*display : none > les titres labels du tableau ne sont pas affichés */
                  display:none;font-size:11px;letter-spacing:2px;padding: 6px;}
                        .projet-data.col1marque {margin-left:43px;} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */
                        .projet-data.col2secteur {margin-left:43px;} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */
                        .projet-data.col3intervention {margin-left:43px;} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */
                        .projet-data.col4date {margin-left:43px;} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */
                        .projet-data.col5ref {margin-left:43px;} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */
                        .projet-data::after {top: 0; left: -8px; width: calc(100% + 16px); height: calc(100% - 2px);} /* avec .projet-data {display:none;} > ces éléments ne sont pas affichés */

      /* Compteur de projet
      ---------------------------------------------------------------------- */
      #counter {height:50px;width:50px;margin:-19px 0 0 140px;padding: 0 0 0 35px;background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-position:10px 4px;font-size:16px;letter-spacing :5px;}

      /* Accordéon - ouverture - fermeture filtres mobile */
      .afficher-filtre-mobile {display:block;cursor: pointer;
          margin:44px 0 0px 1px;padding:0 0 0 25px;width:299px;height:51px;line-height:50px;
          border-bottom: 1px solid #DFDFDF;border-top: 1px solid #DFDFDF;border-left:none;border-right:none;background:rgba(255,255,255,0.50);
          text-align: left;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;color:#7F7F7F;letter-spacing:1px;
          transition: all 0.3s ease; opacity: 0.75; position: relative;background-image:url(../img/ico/ico-chevron-deployer-noir.png);background-repeat: no-repeat;background-position:267px 19px;}

      .afficher-filtre-mobile:hover {display:block;cursor: pointer;
          margin:44px 0 0px 1px;padding:0 0 0 25px;width:299px;height:51px;line-height:50px;
          border-bottom: 1px solid #DFDFDF;border-top: 1px solid #DFDFDF;border-left:none;border-right:none;background:rgba(119, 119, 119, 0.050);
          text-align: left;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;color:#000;letter-spacing:1px;
          transition: all 0.3s ease; opacity: 0.75; position: relative;background-image:url(../img/ico/ico-chevron-deployer-noir.png);background-repeat: no-repeat;background-position:267px 20px;}

      .afficher-filtre-mobile.active {display:block;cursor: pointer;
          margin:44px 0 0px 1px;padding:0 0 0 25px;width:299px;height:51px;line-height:50px;
          border-bottom: 1px solid #DFDFDF;border-top: 1px solid #DFDFDF;border-left:none;border-right:none;background:rgba(119, 119, 119, 0.050);
          text-align: left;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;color:#000;letter-spacing:1px;
          transition: all 0.3s ease; opacity: 0.75; position: relative;background-image:url(../img/ico/ico-chevron-replier-noir.png);background-repeat: no-repeat;background-position:267px 20px;}



      .filtre-mobile-conteneur {display: none;}
      .filtre-mobile-conteneur.active {display:block;}




      /* Controls - filtres et tris
      ---------------------------------------------------------------------- */
      .controls {}
      .control[data-filter=".all"] {font-size:10px;width:100px;}
      .control[data-filter=".secteur1"] {font-size:10px;width:100px;}
      .control[data-filter=".secteur2"] {font-size:10px;width:100px;}
      .control[data-filter=".secteur3"] {font-size:10px;width:100px;}
      .control[data-filter=".secteur4"] {font-size:10px;width:100px;}

      .mixitup-control-active {}
      .mixitup-control-active[data-filter]:after {}

      .control {width:31px;height:31px;margin:0 0 0 0;padding:0 0 0 0;background-image:url(../img/ico/ico-chevron-selection.png);background-position:center center;}
      .control[data-sort]:after {}
      .control[data-sort*=":desc"]:after {}

      /* recherche*/
      .fonction-recherche {margin:-189px 0 0 25px;padding:0 0 0 0;}
      .fonction-recherche .input {width:234px;height:24px;margin:0 0 0 0;padding:0 0 0 15px;font-size:11px;letter-spacing:1px;border:1px solid #DFDFDF;}
      .fonction-recherche .clear-search {padding:0 0 1px 0;right: 3px;top: 50%; /* place le clear à droite */width:19px;height:19px;font-size: 17px;}
      .fonction-recherche .input:not(:placeholder-shown) + .clear-search {display: block;}
      .fonction-recherche .input:focus {}

      /* menu déroulant filtre secteur*/
      .controls-secteur > select {display:block;width:251px;height:26px;margin:-139px 0 0 25px;padding:0 0 0 10px;font-size:11px;letter-spacing:1px;background-image:url(../img/ico/ico-chevron-selection.png);background-position:218px 7px;}
      .controls-secteur > select:hover {background-image:url(../img/ico/ico-chevron-selection.png);background-position:218px 7px;}
      .controls-secteur > select > option {font-size:13px;}/*focus drop down item du menu*/

      /* menu déroulant filtre action*/
      .controls-action > select {display:block;width:251px;height:26px;margin:-89px 0 0 25px;padding:0 0 0 10px;font-size:11px;letter-spacing:1px;background-image:url(../img/ico/ico-chevron-selection.png);background-position:218px 7px;}
      .controls-action > select:hover {background-image:url(../img/ico/ico-chevron-selection.png);background-position:218px 7px;}
      .controls-action > select > option {font-size:13px;}/*focus drop down item du menu*/


      /* tri*/
      .controls-tri > select {display:block;width:251px;height:26px;margin:-39px 0 0 25px;padding:0 0 0 10px;font-size:11px;letter-spacing:1px;background-image:url(../img/ico/ico-chevron-selection.png);background-position:218px 7px;}
      .controls-tri > select:hover {background-image:url(../img/ico/ico-chevron-selection.png);background-position:218px 7px;}
      .controls-tri > select > option {font-size:13px;}/*focus drop down item du menu*/

      /* Container
      ---------------------------------------------------------------------- */
      .container {margin:-1px 0 0 0;padding:0 1px 49px 1px;font-size:0;background:none;}
      .container:after {}


      /* Target Elements
      ---------------------------------------------------------------------- */
      .gap {}

      .mix {}
      .mix:before {}
      .mixitup-ready .mix {}


      .mix a {border-radius:1px;border:1px solid #DFDFDF;width:274px;height:199px;margin:24px 0 0 -2px;padding:0 0 0 25px;line-height:98px;font-size:15px;letter-spacing:1px;}
      .mix a:hover {padding:0 0 0 25px;}
      /* Effet hover */
      .mix a::before {}
      .mix a span {}/* Lien au-dessus du pseudo-élément */
      .mix a:hover::before {}/* Hover : le pseudo-élément se déploie */
      .mix a:hover span {}/* On inverse la couleur du texte au hover */

      .refname {width:248px;margin:-5px 0 0 -25px;padding:0 0 0 25px;font-size:14px;letter-spacing:1px;}
      .refsecteur {width:98px;margin:122px 0 0 -95px;padding:0 0 0 0;font-size:10px;letter-spacing:1px;text-align:right;}
      .refaction {width:77px;margin:-98px 0 0 91px;padding:0 0 0 0;font-size:10px;letter-spacing:0;}
          .refaction::before {content: "";margin-right: 0;} /* ajout d'un séparateur */
      .refdate {width:30px;margin:-98px 0 0 44px;padding:0 0 0 0;font-size:10px;letter-spacing:0;}
          .refdate::after {content: "/";margin-left: 8px;} /* ajout d'un séparateur */
      .refillus {float:left;margin:49px 0 0 0;padding:25px 0 0 0;}
      .refnumber {width:30px;margin:-98px 0 0 4px;padding:0 0 0 0;font-size:10px;letter-spacing:0;}
          .refnumber::after {content: "/";margin-left: 10px;} /* ajout d'un séparateur */



      /* Résumé et texte synthétique bas de page
      ---------------------------------------------------------------------- */
      .resume-projet-titre {margin:107px 25px 0 25px;width:250px;line-height:25px;font-size:13px;letter-spacing:1px;}
      .resume-projet-texte {margin:25px 25px 0 25px;width:250px;height:117px;padding:0 0 0 0;line-height:25px;font-size:12px;letter-spacing:1px;}
      .specifique-footer-position-projet {clear:both;margin:190px 0 0 0;} /* bien caler le footer sous le résumé dans les pages tableaux et liste */


/* Particules - projets liste */
#particle-canvas4 {transform: rotate(90deg);left:40px;top:0;width: 100%;height: 200px;overflow-x: hidden;overflow-y: hidden;}


}