/* ======================================== LISTE-TABLEAU.css ======================================== */
/* Présentation des données en tableau */
/* Septembre 2025 - IAFACTORY j.muckensturm


/* LISTE TABLEAU METHODES
================================================================================================== */

/* Hauteur de page pour gérer le background / min-height pour augmenter la taille du conteneur quand la page s'agrandit avec les expand, permettant d'afficher la grille en arrière plan */
.gabarit-tableau-methode {min-height: 1100px; height: auto;}
.gabarit-tableau-service {min-height: 1150px; height: auto;}


/* Affichage barre de titre du tableau */
.project-header {top: 0;z-index: 0;display: grid;grid-template-columns: 100px 200px 400px 550px 50px 250px;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);}
.project-header .project-data {padding: 0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size: 11px;letter-spacing: 2px;color:#000;}
.project-header .project-data::after {display:none;}/* On force l’entête à ne pas avoir de fond hover */
.project-header::after {z-index: 2;content:"";position:absolute;inset:0; /* couvre toute la barre */pointer-events:none;/* Création de colonne dans la barre de titre du tableau */
    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: var(--sep-w) 100%;background-position: 99px 0, 299px 0, 699px 0, 1199px 0;/* mêmes séparateurs que les lignes */}

/* Affichage d'un tableau avancé combiné avec Javascript */
:root {/*agir sur les couleurs*/--color-foreground:#777777; --color-background:#fff; --color-accent:#000;/*agir sur les positions de l'image background*/--pc-left: 0px; --pc-top: 100px; --pc-width: 0px;}
.background-image { z-index:1;pointer-events:none/*les images passes au-dessus malgré le hover*/;position: fixed;border:1px solid #000;width: 499px; height: 249px;background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.1s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.background-image {left: calc(var(--pc-left) + var(--pc-width) - 550px);top: calc(var(--pc-top) + 159px);}/*position dynamique de l'apparition de l'image background par rapport au tableau - left et top*/

.project-data.col3method.hover-text {z-index:2;} /* item colonne passe au-dessus de l'image au rollover */
.portfolio-container.has-active .project-item {opacity: 0.40; /* lignes inactives */}
.portfolio-container.has-active .project-item.active {opacity: 1;position: relative; /* crée un nouveau stacking context */z-index: 3; /* assure que le scramble passe au-dessus */}
.portfolio-container::before {z-index:5; pointer-events: none; mix-blend-mode: overlay; }
.portfolio-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;}

.project-list { list-style: none; margin: 0; padding: 0; }

.project-item {background-color: rgba(245, 245, 245, 0.7);cursor: pointer;height:49px;width: 100%;padding: 0 0 0 0; display: grid; grid-template-columns: 100px 200px 400px 500px 75px 250px;align-items: center;
    border-bottom: 1px solid rgba(184, 184, 184, 0.2);transition: all 0.3s ease; opacity: 1; position: relative;}
.project-item a {border-bottom:none;text-decoration: underline;text-decoration-color:#CCC;text-underline-offset: 3px;}
.project-item.active { opacity: 1; border-bottom:1px solid #000;}
.project-item:hover .project-data::after { transform: scaleX(1); }
.project-item:hover .project-data { color:#fff!important;}
.project-item::before {/*compteur 001*/z-index:5;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:11px;letter-spacing:1px;color:#777777;content: attr(data-index);counter-increment: project-counter; padding: 0 0 0 50px; line-height: 0.8; opacity: 1.0; justify-self: start;position: relative; transition: opacity 0.1s ease; }
.project-item.counter-hidden::before { opacity: 0.05; }


.project-data {z-index: 1;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:11px;letter-spacing:1px;position: relative; white-space: nowrap; text-decoration: none; color: var(--color-foreground);transition: all 0.3s ease; overflow: hidden; text-overflow: ellipsis; padding: 6px; }
.project-data.col1method {margin-left:48px;justify-self: start;}
.project-data.col2method {margin-left:48px;justify-self: start;}
.project-data.focus {color:#000;font-size:12px;font-weight:400;}/*mise en avant d'un texte du tableau - lien important*/
.project-data.col3method {margin-left:48px;justify-self: start;}
.project-data.col4method {margin-left:48px;justify-self: start;color:#000;}
.project-data.col5method {justify-self:/*end*/ left;}
.project-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;}

.col1method.hover-text {margin:0 0 0 44px;}
.col2method.hover-text {margin:0 0 0 44px;}
.col3method.hover-text {margin:0 0 0 44px;}
.col4method.hover-text {margin:0 0 0 44px;}
.col5method.hover-text {margin:0 0 0 -7px;}


/* Création de lignes pour séparer les colonnes du tableau */
:root {--sep: rgba(119, 119, 119, 0.2);--sep-w: 1px;}
.project-item {position: relative;}
.project-item::after{content:"";position:absolute;inset:0;z-index: 2;pointer-events:none;
    background-image:linear-gradient(to bottom, var(--sep), var(--sep)),linear-gradient(to bottom, var(--sep), var(--sep)),linear-gradient(to bottom, var(--sep), var(--sep)),linear-gradient(to bottom, var(--sep), var(--sep)),linear-gradient(to bottom, var(--sep), var(--sep));
    background-repeat: no-repeat;background-size: var(--sep-w) 100%;background-position: 99px 0, 299px 0, 699px 0, 1199px 0;}/*séparation visuelle des colonnes par des lignes grises*/


/* Comportement ouverture - fermeture du tableau / enlapse collapse */
.project-expander {background: #fff;}
.project-expander a {color:#777777;background-image:url(../img/ico/ico-fleche-ouvrir-gris.png);background-repeat: no-repeat;background-position: 1418px center;}
.expander-body {overflow: hidden;height: 0;opacity: 0;}
.expander-titre a {background:#fff;color:#000;background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-repeat: no-repeat;background-position: 1418px center;}/*1ère ligne du tableau déployé : pour afficher "toutes les méthodes" en noir, et différencier des autres lignes en dessous "expander-content"*/
.expander-content {}
.project-expander.open {background: #fff;z-index: 0;position: relative;}/*fond blanc quand le tableau s'ouvre*/
.project-expander .expander-content a {display: block;height:24px;border-bottom:1px solid rgba(119, 119, 119, 0.2);width: 100%;margin: 0 0 0 0;padding: 0 0 0 50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;
    -webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.project-expander .expander-content a:hover {border-bottom:1px solid #000;color:#000;background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-repeat: no-repeat;background-position: 1423px center;}
.align0 {display: inline-block;width:98px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;}
.align1 {display: inline-block;width:150px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;/*color:#a8a8a8*/;}
.align2 {display: inline-block;width:350px;margin:0 0 0 0;padding:0 0 0 50px;line-height:24px;font-size:11px;letter-spacing:1px;background:#fefefe;}
.align3 {display: inline-block;width:650px;margin:0 0 0 0;padding:0 0 0 50px;line-height:24px;font-size:11px;letter-spacing:1px;}
.align0titre {display: inline-block;width:98px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;color:#000;}
.align1titre {display: inline-block;width:200px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;color:#000;}
.align2titre {display: inline-block;width:400px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;color:#000;}
.align3titre {display: inline-block;width:700px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;color:#000;}

.project-item {background-image: url(../img/ico/ico-chevron-deployer-noir.png);background-repeat: no-repeat;background-position: 1418px center;}/* État normal : chevron pour "déployer" */
.project-item.is-open {background-image: url(../img/ico/ico-chevron-replier-noir.png);background-repeat: no-repeat;background-position: 1418px center;}/* État ouvert : chevron pour "replier" */
.project-item.is-open .project-data {color: #fff !important;}/* Garder l'effet hover sur la ligne ouverte */
.project-item.is-open .project-data::after {transform: scaleX(1) !important;}/* Garder l'effet hover sur la ligne ouverte */
.portfolio-container.has-open .project-item, .portfolio-container.has-open .project-item.active {opacity: 1 !important;}/* Quand un expander est ouvert, on neutralise le “fade” du gros script qui vient de .portfolio-container.has-active .project-item { opacity: 0.3; }) */
.portfolio-container.hover-freeze .project-item:not(.is-open) {pointer-events: none;}/* Petit filet de sécurité pendant la transition d’ouverture/fermeture :ne laisse pas les autres lignes capter le hover pendant ~0.5s */
.project-expander:hover { background: #fff !important; }/* L’expander ne doit jamais prendre de style hover */
.portfolio-container.has-open .project-item {opacity: 1 !important;} /* Désactiver l’opacité forcée quand un expander est ouvert */
.portfolio-container.hover-freeze .project-item:not(.is-open) {pointer-events: none;} /* Empêcher un hover parasite pendant l’animation */

/* Bouton d'action tout ouvrir - ouvre tout le tableau en détail */
#tout-deplier {cursor:pointer;float:right;display:block;width:200px;margin:0 0 0 0;padding:0 0 0 0;border:none;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:11px;letter-spacing:2px;
text-transform: uppercase;color:#000;background:none;background-image: url(../img/ico/ico-chevron-deployer-noir.png);background-repeat: no-repeat;background-position: 168px center;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
#tout-deplier:hover {padding:6px;border:none;background:#000;color:#fff;background-image: url(../img/ico/ico-chevron-deployer-blanc.png);background-repeat: no-repeat;background-position: 168px center;}
#tout-deplier.is-active {padding:6px;border:none;color:#fff;background:#000;background-image: url(../img/ico/ico-chevron-replier-blanc.png);background-repeat: no-repeat;background-position: 168px center;}

/* Bouton d'action - voir tout */
.bouton-action-voir-tout {position:absolute;float:left;display:block;margin:49px 0 0 1200px;padding:0 50px 0 0;height:49px;border:1px solid transparent;width:249px;line-height:51px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:right;font-size:14px;letter-spacing:2px;
    color:#000;background-image:url(../img/bg/bg-bouton-court-bas-droite-noir.png);background-repeat:no-repeat;background-position:248px -2px;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.bouton-action-voir-tout:hover {border:1px solid #000;color:#000;background-position:248px -2px;}

/* Résumé et texte synthétique bas de page */
.resume-tableau-titre {display:block;margin:83px 0 0 50px;width:1150px;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:1px;color:#777777;}
.resume-tableau-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-tableau {} /* spécifique mediaqueries pour caler le footer */


/* LISTE TABLEAU SERVICES - SPECIFIQUE
================================================================================================== */

/*spécifique : alignement des titres du tableau de la page prestation*/
.project-data.col3method-presta {margin-left:48px;justify-self: start;}
.project-data.col4method-presta {margin-left:48px;justify-self: start;}
.project-data.col5method-presta {justify-self: start;}

.col2methodprestalivrable.hover-text {margin:0 0 0 44px;}
.col4methodprestalivrable.hover-text {justify-self: start;margin:0 0 0 44px;}

/*important : lien alternatif sur tout le li sans expand pour que le contenu du lien puisse être crawlé*/
.lien-accessible-tableau {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}

/*important : changer le chevron au bout de la ligne car ce n'est pas un lien expand qui ouvre un module mais un lien qui va vers une autre page*/
.project-item.chevron-clic {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-repeat: no-repeat;background-position: 1418px center;}
.project-item.chevron-clic:hover {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-repeat: no-repeat;background-position: 1423px center;}


/* SLIDER PRESTATIONS - SPECIFIQUE - page prestations
================================================================================================== */

/* Slider */
.slider {clear:both;position:relative;background:#222;width:1499px;height:400px;margin:0 0 50px 0;overflow:hidden;border-radius:2px;z-index:8;/*position du slider au-desssus des colonnes du tableau services qui peuvent être visibles sous le slider...*/}
.slide {position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease;}
.slide.active {opacity:1;visibility:visible;z-index:2;}
.slide img {width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6s linear;}
.slide.active img {transform:scale(1);}
.slide.active h2 {animation:reveal .6s .15s forwards;}
.slide.active p {animation:reveal .6s .35s forwards;}
.slide.active .btn {animation:reveal .6s .55s forwards;}

@keyframes reveal {to{opacity:1;transform:translateY(0);}}

/* Contenus */
.overlay {position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.80),rgba(0,0,0,.60),rgba(0,0,0,.10));}
.content {position:absolute;left:98px;top:165px;transform:translateY(-50%);z-index:5;max-width:550px;color:#FFF;}
.content h2, .content p, .content .btn {opacity:0;transform:translateY(30px);}
.content h2 {font-size:48px;margin:0 0 65px 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}
.content p {font-size:16px;line-height:1.6;margin-bottom:30px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;color:#A0A0A0;}
.content p a {color:#FFF;border-bottom:1px dotted #DFDFDF;text-decoration:none;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}
.content p a:hover {color:#FFF;border-bottom:1px solid #DFDFDF;text-decoration:none;}


/* Boutons */
.btn {display:inline-block;padding:14px 28px;border:1px solid #FFF;background:#000;color:#FFF;text-decoration:none;border-radius:3px;transition:.3s;}
.btn:hover {border:1px solid #FFF;background:#FFF;color:#000;}

/* Flèches */
.arrows {position:absolute;left:98px;bottom:30px;display:flex;gap:10px;z-index:20;}
.arrows button {padding:5px 18px;line-height:30px;border-radius:5px;border:1px solid #000;border-radius:2px;cursor:pointer;color:#FFF;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);transition:.3s;}
.arrows button:hover {background:#FFF;color:#000;}

/* Progression */
.slider-progress {position:absolute;left:98px;bottom:270px;width:310px;height:3px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden;z-index:20;}
.slider-progress span {display:block;width:0%;height:100%;background:rgba(255, 255, 255, 0.4);}

/* Miniatures */
.thumbs {position:absolute;right:30px;bottom:30px;display:flex;gap:10px;z-index:20;}
.thumb {border:none;cursor:pointer;padding:12px 18px;border:1px solid #000;border-radius:3px;color:#777777;background:rgba(30,30,30,0.9);backdrop-filter:blur(8px);transition:.3s;}
.thumb:hover {color:#FFF;border:1px solid #FFF;background:rgba(0,0,0,.12);}
.thumb.active {color:#DFDFDF;border:1px solid #444;border-radius:3px;background:rgba(0,0,0,0.9);}


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

/* Particules - méthodes */
#particle-canvas2 {pointer-events: none;
  transform: rotate(68deg);
  position:absolute;
  left:-75px;
  top:-500px;
  width: 100%;
  height: 500px;
  vertical-align: middle;
  z-index:7;
  overflow-x: hidden;overflow-y: hidden;
}

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

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


      /* LISTE TABLEAU METHODES
      ================================================================================================== */

      /* Hauteur de page pour gérer le background / min-height pour augmenter la taille du conteneur quand la page s'agrandit avec les expand, permettant d'afficher la grille en arrière plan */
      .gabarit-tableau-methode {min-height: 1100px; }
      .gabarit-tableau-service {min-height: 1150px; }


      /* Affichage barre de titre du tableau */
      .project-header {top: 0;grid-template-columns: 100px 200px 250px 250px;height: 49px;}
      .project-header .project-data {padding: 0 0 0 0;font-size: 11px;letter-spacing: 2px;}
      .project-header .project-data::after {display:none;}/* On force l’entête à ne pas avoir de fond hover */
      .project-header::after {background:none;}/* mêmes séparateurs que les lignes */

      /* Affichage d'un tableau avancé combiné avec Javascript */
      :root {}
      .background-image {width: 249px; height: 124px;}
      .background-image {left: calc(var(--pc-left) + var(--pc-width) - 325px);top: calc(var(--pc-top) + 97px);}/*position dynamique de l'apparition de l'image background par rapport au tableau - left et top*/

      .project-data.col3method.hover-text {} /* item colonne passe au-dessus de l'image au rollover */
      .portfolio-container.has-active .project-item {}
      .portfolio-container.has-active .project-item.active {}
      .portfolio-container::before {}
      .portfolio-container {width: 749px;margin:44px 0 0 1px;padding: 0 0 0 0;}

      .project-list {margin: 0; padding: 0; }

      .project-item {height:49px;width: 100%;padding: 0 0 0 0;grid-template-columns: 100px 200px 250px 0 0;}
      .project-item a {text-underline-offset: 3px;}
      .project-item.active {}
      .project-item:hover .project-data::after {}
      .project-item:hover .project-data {}
      .project-item::before {/*compteur 001*/font-size:11px;letter-spacing:1px;padding: 0 0 0 50px; line-height: 0.8;}
      .project-item.counter-hidden::before {}


      .project-data {font-size:11px;letter-spacing:1px;padding: 6px; }
      .project-data.col1method {margin-left:48px;}
      .project-data.col2method {margin-left:48px;}
      .project-data.focus {font-size:11px;}/*mise en avant d'un texte du tableau - lien important*/
      .project-data.col3method {margin-left:48px;}
      .project-data.col4method {margin-left:15px;}
      .project-data.col5method {margin-left:48px}
      .project-data::after {top: 0; left: -8px; width: calc(100% + 16px); height: calc(100% - 2px);}

      h4.project-data.col3method {display:none;} /*pas d'affichage de la colonne "techniques" sur mobile --> contenu */
      h2.project-data.col4method {display:none;} /*pas d'affichage du titre de colonne "techniques expertes" sur mobile */

      .col1method.hover-text {margin:0 0 0 44px;}
      .col2method.hover-text {margin:0 0 0 44px;}
      .col3method.hover-text {margin:0 0 0 44px;}
      .col4method.hover-text {margin:0 0 0 43px;}
      .col5method.hover-text {margin:0 0 0 67px;}

      /* Création de lignes pour séparer les colonnes du tableau */
      :root {--sep: rgba(119, 119, 119, 0.2);--sep-w: 1px;}
      .project-item {position: relative;}
      .project-item::after{content:"";position:absolute;inset:0;z-index: 2;pointer-events:none;background-image:none;}/*séparation visuelle des colonnes par des lignes grises*/


      /* Comportement ouverture - fermeture du tableau / enlapse collapse */
      .project-expander {}
      .project-expander a {background-image:url(../img/ico/ico-fleche-ouvrir-gris.png);background-position: 717px center;}
      .expander-body {overflow: hidden;height: 0;}
      .expander-titre a {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-position: 717px center;}/*1ère ligne du tableau déployé : pour afficher "toutes les méthodes" en noir, et différencier des autres lignes en dessous "expander-content"*/
      .expander-content {}
      .project-expander.open {z-index: 0;}/*fond blanc quand le tableau s'ouvre*/
      .project-expander .expander-content a {height:24px;width: 100%;margin: 0 0 0 0;padding: 0 0 0 50px;}
      .project-expander .expander-content a:hover {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-position: 722px center;}
      .align0 {width:98px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:9px;letter-spacing:1px;}
      .align1 {width:150px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:9px;letter-spacing:1px;}
      .align2 {width:350px;margin:0 0 0 0;padding:0 0 0 50px;line-height:24px;font-size:9px;letter-spacing:1px;}
      .align3 {display:none;}/*pas d'affichage de la description technique du tableau déployé --> contenu */
      .align0titre {width:98px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;}
      .align1titre {width:200px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;}
      .align2titre {width:200px;margin:0 0 0 0;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;}
      .align3titre {display:none;}/*pas d'affichage du lien "toutes les méthodes d'analyse / conception quand le tableau est déployé" --> contenu */

      .project-item { background-image: url(../img/ico/ico-chevron-deployer-noir.png);background-position: 716px center;}/* État normal : chevron pour "déployer" */
      .project-item.is-open {background-image: url(../img/ico/ico-chevron-replier-noir.png);background-position: 716px center;}/* État ouvert : chevron pour "replier" */
      .project-item.is-open .project-data {}/* Garder l'effet hover sur la ligne ouverte */
      .project-item.is-open .project-data::after {}/* Garder l'effet hover sur la ligne ouverte */
      .portfolio-container.has-open .project-item, .portfolio-container.has-open .project-item.active {}/* Quand un expander est ouvert, on neutralise le “fade” du gros script qui vient de .portfolio-container.has-active .project-item { opacity: 0.3; }) */
      .portfolio-container.hover-freeze .project-item:not(.is-open) {} /* Petit filet de sécurité pendant la transition d’ouverture/fermeture :ne laisse pas les autres lignes capter le hover pendant ~0.5s */
      .project-expander:hover {} /* L’expander ne doit jamais prendre de style hover */
      .portfolio-container.has-open .project-item {} /* Désactiver l’opacité forcée quand un expander est ouvert */
      .portfolio-container.hover-freeze .project-item:not(.is-open) {} /* Empêcher un hover parasite pendant l’animation */

      /* Bouton d'action tout ouvrir - ouvre tout le tableau en détail */
      #tout-deplier {width:140px;margin:0 0 0 0;padding:0 0 0 0;font-size:11px;letter-spacing:2px;background-image: url(../img/ico/ico-chevron-deployer-noir.png);background-position: 118px center;}
      #tout-deplier:hover {padding:6px;background-image: url(../img/ico/ico-chevron-deployer-blanc.png);background-position: 118px center;}
      #tout-deplier.is-active {padding:6px;background-image: url(../img/ico/ico-chevron-replier-blanc.png);background-position: 118px center;}

      /* Bouton d'action - voir tout */
      .bouton-action-voir-tout {margin:49px 0 0 450px;padding:0 50px 0 0;height:49px;width:249px;line-height:51px;font-size:13px;letter-spacing:2px;background-image:url(../img/bg/bg-bouton-court-bas-droite-noir.png);background-position:248px -2px;}
      .bouton-action-voir-tout:hover {background-position:248px -2px;}

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


      /* LISTE TABLEAU SERVICES - SPECIFIQUE
      ================================================================================================== */

      /*spécifique : alignement des titres du tableau de la page prestation*/
      .project-data.col3method-presta {display:none;}/* pas affiché */
      .project-data.col4method-presta {margin-left:49px;}
      .project-data.col5method-presta {margin-left:-1px;}

      .col2methodprestalivrable.hover-text {margin:0 0 0 44px;}
      .col4methodprestalivrable.hover-text {margin:0 0 0 -7px;}

      /*important : lien alternatif sur tout le li sans expand pour que le contenu du lien puisse être crawlé*/
      .lien-accessible-tableau {width: 1px;height: 1px;padding: 0;margin: -1px;}

      /*important : changer le chevron au bout de la ligne car ce n'est pas un lien expand qui ouvre un module mais un lien qui va vers une autre page*/
      .project-item.chevron-clic {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-position: 715px center;}
      .project-item.chevron-clic:hover {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-position: 720px center;}


      /* SLIDER PRESTATIONS - SPECIFIQUE - page prestations
      ================================================================================================== */

      /* Slider */
      .slider {width:749px;height:350px;margin:0 0 50px 0;overflow:hidden;}
      .slide {}
      .slide.active {}
      .slide img {width:100%;height:100%;opacity:0.5;transform:scale(1.02);}
      .slide.active img {}
      .slide.active h2 {}
      .slide.active p {}
      .slide.active .btn {}

      @keyframes reveal {to{opacity:1;transform:translateY(0);}}

      /* Contenus */
      .overlay {}
      .content {left:48px;top:150px;max-width:550px;}
      .content h2, .content p, .content .btn {}
      .content h2 {font-size:32px;margin-bottom:35px;}
      .content p {font-size:14px;line-height:1.6;margin-bottom:35px;}
      .content p a {}
      .content p a:hover {}


      /* Boutons */
      .btn {padding:11px 22px;border-radius:3px;}
      .btn:hover {}

      /* Flèches */
      .arrows {left:408px;bottom:60px;gap:10px;display:none;} /* les flèches du slider ne sont pas affichées */
      .arrows button {padding:5px 18px;line-height:30px;border-radius:5px;}
      .arrows button:hover {}

      /* Progression */
      .slider-progress {left:48px;bottom:245px;width:190px;height:2px;}
      .slider-progress span {width:0%;height:100%;}

      /* Miniatures */
      .thumbs {right:47px;bottom:30px;gap:15px;}
      .thumb {padding:12px 18px;border-radius:3px;}
      .thumb:hover {}
      .thumb.active {border-radius:3px;}


/* Particules - services */
#particle-canvas1 {transform: rotate(0deg);left:0;top:300px;width: 100%;height: 300px;overflow-x: hidden;overflow-y: hidden;}

}


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


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


      /* LISTE TABLEAU METHODES
      ================================================================================================== */

      /* Hauteur de page pour gérer le background / min-height pour augmenter la taille du conteneur quand la page s'agrandit avec les expand, permettant d'afficher la grille en arrière plan */
      .gabarit-tableau-methode {min-height: 1100px; }
      .gabarit-tableau-service {min-height: 1150px; }


      /* Affichage barre de titre du tableau */
      .project-header {top: 0;grid-template-columns: 100px 100px 250px 250px;height: 49px;}
      .project-header .project-data {padding: 0 0 0 0;font-size: 11px;letter-spacing: 1px;}
      .project-header .project-data::after {display:none;}/* On force l’entête à ne pas avoir de fond hover */
      .project-header::after {background:none;}/* pas de séparateur dans le tableau */

      /* Affichage d'un tableau avancé combiné avec Javascript */
      :root {}
      .background-image {width: 299px; height: 149px;}
      .background-image {left: calc(var(--pc-left) + var(--pc-width) - 150px);top: calc(var(--pc-top) - 90px);}/*position dynamique de l'apparition de l'image background par rapport au tableau - left et top*/

      .project-data.col3method.hover-text {} /* item colonne passe au-dessus de l'image au rollover */
      .portfolio-container.has-active .project-item {}
      .portfolio-container.has-active .project-item.active {}
      .portfolio-container::before {}
      .portfolio-container {width: 299px;margin:44px 0 0 1px;padding: 0 0 0 0;}

      .project-list {margin: 0; padding: 0; }

      .project-item {height:49px;width: 100%;padding: 0 0 0 0;grid-template-columns: 150px 150px 0 0 0;}
      .project-item a {text-underline-offset: 3px;}
      .project-item.active {}
      .project-item:hover .project-data::after {}
      .project-item:hover .project-data {}
      .project-item::before {/*compteur 001*/display:none;} /* compteur non affiché */
      .project-item.counter-hidden::before {}


      .project-data {font-size:10px;letter-spacing:1px;padding: 6px; }
      .project-data.col1method {display:none;} /* colonne numéro - non affichée sur mobile */
      .project-data.col2method {margin-left:21px;}
      .project-data.focus {margin-left:18px;font-size:10px;letter-spacing:0;display:block !important;}/* lien méthode > mise en avant d'un texte du tableau - lien important*/
      .project-data.col3method {display:none;} /* titre intro - non affichée sur mobile */
      .project-data.col4method {display:block;}
      .project-data.col5method {display:block;} /* colonne "tout ouvrir" - non affichée sur mobile */
      .project-data::after {top: 0; left: -8px; width: calc(100% + 16px); height: calc(100% - 2px);}

      h4.project-data.col3method {display:none;} /*pas d'affichage de la colonne "techniques" sur mobile --> contenu */
      h2.project-data.col4method {display:none;} /*pas d'affichage du titre de colonne "techniques expertes" sur mobile */

      .col1method.hover-text {margin:0 0 0 15px;font-size:10px;letter-spacing:1px;} /* position intro ligne par ligne */
      .col2method.hover-text {margin:0 0 0 -40px;font-size:10px;letter-spacing:0;color:#AAA;} /* position intro ligne par ligne */
      .col4method.hover-text {margin:0 0 0 -67px;font-size:10px;letter-spacing:0;} /* position nombre de techniques ligne par ligne */
      .col5method.hover-text {display:none;} /*libellé "méthodes" après le nombre de techniques - non affiché sur mobile */

      /* Création de lignes pour séparer les colonnes du tableau */
      :root {--sep: rgba(119, 119, 119, 0.2);--sep-w: 1px;}
      .project-item {position: relative;}
      .project-item::after{content:"";position:absolute;inset:0;z-index: 2;pointer-events:none;background-image:none;}/*séparation visuelle des colonnes par des lignes grises*/


      /* Comportement ouverture - fermeture du tableau / enlapse collapse */
      .project-expander {}
      .project-expander a {background-image:none;}
      .expander-body {overflow: hidden;height: 0;}
      .expander-titre a {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-position: 267px center;}/*1ère ligne du tableau déployé : pour afficher "toutes les méthodes" en noir, et différencier des autres lignes en dessous "expander-content"*/
      .expander-content {}
      .project-expander.open {z-index: 0;}/*fond blanc quand le tableau s'ouvre*/
      .project-expander .expander-content a {height:24px;width: 100%;margin: 0 0 0 0;padding: 0 0 0 50px;}
      .project-expander .expander-content a:hover {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-position: 272px center;}
      .align0 {display:none;} /* data - numéro non affiché sur mobile */
      .align1 {width:100px;margin:0 0 0 -29px;padding:0 0 0 0;line-height:24px;font-size:8px;letter-spacing:0;}
      .align2 {width:200px;margin:0 0 0 0;padding:0 0 0 10px;line-height:24px;font-size:8px;letter-spacing:0;background-image:url(../img/ico/ico-fleche-ouvrir-gris.png);background-repeat: no-repeat;background-position: 146px center;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
      .align2:hover {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-repeat: no-repeat;background-position: 152px center;}
      .align3 {display:none;}/*pas d'affichage de la description technique du tableau déployé --> contenu */
      .align0titre {display:none;}
      .align1titre {width:130px;margin:0 0 0 -29px;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;}
      .align2titre {width:160px;margin:0 0 0 -20px;padding:0 0 0 0;line-height:24px;font-size:11px;letter-spacing:1px;}
      .align3titre {display:none;}/*pas d'affichage du lien "toutes les méthodes d'analyse / conception quand le tableau est déployé" --> contenu */

      .project-item { background-image: url(../img/ico/ico-chevron-deployer-noir.png);background-position: 268px center;}/* État normal : chevron pour "déployer" */
      .project-item.is-open {background-image: url(../img/ico/ico-chevron-replier-noir.png);background-position: 268px center;}/* État ouvert : chevron pour "replier" */
      .project-item.is-open .project-data {}/* Garder l'effet hover sur la ligne ouverte */
      .project-item.is-open .project-data::after {}/* Garder l'effet hover sur la ligne ouverte */
      .portfolio-container.has-open .project-item, .portfolio-container.has-open .project-item.active {}/* Quand un expander est ouvert, on neutralise le “fade” du gros script qui vient de .portfolio-container.has-active .project-item { opacity: 0.3; }) */
      .portfolio-container.hover-freeze .project-item:not(.is-open) {} /* Petit filet de sécurité pendant la transition d’ouverture/fermeture :ne laisse pas les autres lignes capter le hover pendant ~0.5s */
      .project-expander:hover {} /* L’expander ne doit jamais prendre de style hover */
      .portfolio-container.has-open .project-item {} /* Désactiver l’opacité forcée quand un expander est ouvert */
      .portfolio-container.hover-freeze .project-item:not(.is-open) {} /* Empêcher un hover parasite pendant l’animation */

      /* Bouton d'action tout ouvrir - ouvre tout le tableau en détail */
      #tout-deplier {width:125px;margin:0 0 0 66px;padding:0 0 0 0;font-size:11px;letter-spacing:1px;background-image: url(../img/ico/ico-chevron-deployer-noir.png);background-position: 102px center;}
      #tout-deplier:hover {padding:6px;background-image: url(../img/ico/ico-chevron-deployer-blanc.png);background-position: 102px center;}
      #tout-deplier.is-active {padding:6px;background-image: url(../img/ico/ico-chevron-replier-blanc.png);background-position: 102px center;}

      /* Bouton d'action - voir tout */
      .bouton-action-voir-tout {margin:49px 0 0 0;padding:0 50px 0 0;height:49px;width:249px;line-height:51px;font-size:11px;letter-spacing:1px;background-image:url(../img/bg/bg-bouton-court-bas-droite-noir.png);background-position:248px -2px;}
      .bouton-action-voir-tout:hover {background-position:248px -2px;}

      /* Résumé et texte synthétique bas de page */
      .resume-tableau-titre {margin:133px 25px 0 25px;width:250px;line-height:25px;font-size:13px;letter-spacing:1px;}
      .resume-tableau-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-tableau {clear:both;margin:190px 0 0 0;} /* bien caler le footer sous le résumé dans les pages tableaux et liste */


      /* LISTE TABLEAU SERVICES - SPECIFIQUE
      ================================================================================================== */

      /*spécifique : alignement des titres du tableau de la page prestation*/
      .project-data.col3method-presta {display:none;}/* pas affiché */
      .project-data.col4method-presta {display:none;}/* pas affiché */
      .project-data.col5method-presta {margin-left:49px;}

      .col2methodprestalivrable.hover-text {display:none;}
      .col4methodprestalivrable.hover-text {margin:0 0 0 -157px;letter-spacing:0;}

      /*important : lien alternatif sur tout le li sans expand pour que le contenu du lien puisse être crawlé*/
      .lien-accessible-tableau {width: 1px;height: 1px;padding: 0;margin: -1px;}

      /*important : changer le chevron au bout de la ligne car ce n'est pas un lien expand qui ouvre un module mais un lien qui va vers une autre page*/
      .project-item.chevron-clic {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-position: 265px center;}
      .project-item.chevron-clic:hover {background-image:url(../img/ico/ico-fleche-ouvrir-noir.png);background-position: 270px center;}


      /* SLIDER PRESTATIONS - SPECIFIQUE - page prestations
      ================================================================================================== */

      /* Slider */
      .slider {width:301px;height:300px;margin:0 0 50px -1px;overflow:hidden;}
      .slide {}
      .slide.active {}
      .slide img {width:100%;height:100%;opacity:0.3;transform:scale(1.02);margin-left:-150px;}
      .slide.active img {}
      .slide.active h2 {}
      .slide.active p {}
      .slide.active .btn {}

      @keyframes reveal {to{opacity:1;transform:translateY(0);}}

      /* Contenus */
      .overlay {}
      .content {left:23px;top:122px;max-width:550px;}
      .content h2, .content p, .content .btn {}
      .content h2 {font-size:22px;margin-bottom:25px;}
      .content p {width:250px;font-size:12px;line-height:1.6;margin-bottom:25px;}
      .content p a {}
      .content p a:hover {}


      /* Boutons */
      .btn {padding:9px 18px;border-radius:2px;}
      .btn:hover {}

      /* Flèches */
      .arrows {left:22px;bottom:30px;gap:10px;display:block;} /* les flèches du slider ne sont pas affichées */
      .arrows button {padding:5px 18px;line-height:30px;border-radius:5px;}
      .arrows button:hover {}

      /* Progression */
      .slider-progress {left:23px;bottom:225px;width:190px;height:2px;}
      .slider-progress span {width:0%;height:100%;}

      /* Miniatures */
      .thumbs {right:30px;bottom:45px;display:flex;gap:10px;z-index:20;font-size:0;}
      .thumb {padding:4px 4px;border:1px solid #000;border-radius:8px;font-size:0;background:#333;}
      .thumb:hover {color:#FFF;border:1px solid #FFF;background:rgba(0,0,0,.12);}
      .thumb.active {padding:4px 4px;border:1px solid #000;border-radius:8px;background:rgba(255,255,255,1.0);}


/* Particules - services */
#particle-canvas1 {transform: rotate(0deg);left:0;top:150px;width: 100%;height: 300px;overflow-x: hidden;overflow-y: hidden;}

/* Particules - méthodes */
#particle-canvas2 {transform: rotate(68deg);left:-50px;top:-200px;width: 100%;height: 400px;z-index:7;overflow-x: hidden;overflow-y: hidden;}


}