/* ======================================== ARTICLE.css ======================================== */
/* Structuration et séquençage d'un article */
/* Septembre 2025 - IAFACTORY j.muckensturm


/* ARTICLE METHODE
================================================================================================== */

/* 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-article {}

/* Intertitre article */
.article-header {display:block;width:1501px;height:50px;margin:44px 0 0 0;}
.intertitre-article {display:block;float:left;margin:0 0 0 0;padding:0 0 0 50px;height:49px;width:499px;border:1px solid #D8D8D8;line-height:49px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;
  font-size:14px;letter-spacing:2px;color:#000;background-color:rgba(255,255,255,0.7);/*webkit-transition: all 0.2s ease*/;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.intertitre-article-action {display:block;float:left;margin:0 0 0 99px;padding:0 0 0 99px;border:1px solid #D8D8D8;background-color:rgba(255,255,255,0.7);-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.intertitre-article-action:hover {border:1px solid #000;}
.intertitre-article-action-lien {display:block;float:left;height:49px;width:601px;margin:0 0 0 0;padding:0 0 0 0;border-bottom:none;line-height:49px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:2px;color:#000;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.intertitre-article-action-fleche {cursor:pointer;display:block;float:right;height:49px;width:149px;margin:0 0 0 0;padding:0 0 0 0;outline:1px solid #000;background:#000;background-image: url(../img/ico/ico-chevron-ouvrir-blanc.png);background-repeat: no-repeat;background-position: center center;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.intertitre-article-action-telecharger {cursor:pointer;display:block;float:right;height:49px;width:149px;margin:0 0 0 0;padding:0 0 0 0;outline:1px solid #000;background:#000;background-image: url(../img/ico/ico-chevron-telecharger-blanc.png);background-repeat: no-repeat;background-position: center center;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.intertitre-article-action:hover .intertitre-article-action-lien {padding:0 0 0 0;border-bottom:none;}
.intertitre-article-action:hover .intertitre-article-action-fleche {background-position: 75px center;}
.intertitre-article-action:hover .intertitre-article-action-telecharger {background-position: center 21px;}

.intertitre-article-action-mobile {display:none;} /* action spécifique sur mobile */


.article-corps-box {width:1501px;margin:0 0 0 0;}

  /* Colonne gauche */
  .article-sidebar-box {position: sticky;top: 0;z-index: 5;display:block;float:left;height:850px;width:500px;margin:0 0 0 1px;padding:0 0 0 50px;background-image: url(../img/bg/bg-sidebar-article.png);background-repeat:repeat;}
    .article-sidebar-visuel {height:249px;width:449px;margin:50px 0 0 0;padding:50px 0 0 0;border-bottom:1px solid #FFF;text-align:center;background:#FFF;}
    .article-sidebar-visuel-expertise {height:249px;width:449px;margin:50px 0 0 0;padding:50px 0 0 0;border-bottom:1px solid #666;text-align:center;background:#000;}
    .article-sidebar-ancre {height:199px;width:449px;margin:0 0 0 0;padding:0 0 0 0;text-align:left;}
        .article-sidebar-ancre ul li a {display:block;padding:0 0 0 50px;list-style:none;height:49px;line-height:50px;border-bottom:1px solid rgba(255, 255, 255, 0.4);font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;
              font-size:11px;letter-spacing:2px;color:#FFF;background:#000;background-image: url(../img/ico/ico-fleche-ancre-gris.png);background-repeat:no-repeat;background-position: 420px center;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
          .article-sidebar-ancre ul li a:hover {background:#222;background-image: url(../img/ico/ico-fleche-ancre-blanc.png);background-repeat:no-repeat;background-position: 420px center;}
          .article-sidebar-ancre ul li:last-child a {border-bottom:1px solid #000;}
          /*effet quand l'ancre est active */
          .article-sidebar-ancre ul li a.active {display:block;padding:0 0 0 50px;list-style:none;height:249px;line-height:50px;border-bottom:1px solid rgba(255, 255, 255, 0.4);font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;
              background:#222;background-image: url(../img/ico/ico-fleche-ancre-active-gris.png);background-repeat:no-repeat;background-position: 420px center;transition: all 0.3s ease;}

          /*activation des éléments quand l'ancre est active */
          .article-sidebar-ancre ul li.ancre1 #anim5 {display:none;}
          .article-sidebar-ancre ul li.ancre1:has(a.active) #anim5 {display: block;}
          .article-sidebar-ancre ul li.ancre2 #anim3 {display:none;}
          .article-sidebar-ancre ul li.ancre2:has(a.active) #anim3 {display: block;}
          .article-sidebar-ancre ul li.ancre3 #anim7 {display:none;}
          .article-sidebar-ancre ul li.ancre3:has(a.active) #anim7 {display: block;}
          .article-sidebar-ancre ul li.ancre4 #anim10 {display:none;}
          .article-sidebar-ancre ul li.ancre4:has(a.active) #anim10 {display: block;}
          .article-sidebar-ancre ul li.ancre5 #anim6 {display:none;}
          .article-sidebar-ancre ul li.ancre5:has(a.active) #anim6 {display: block;}

          #ancre1, #ancre2, #ancre3, #ancre4, #ancre5 {clear:both} /* assure le bon positionnement des ancres sur les titres au clic sur le menu*/

          /*animation des éléments dans les ancres - couplé avec JS*/
          .circle-container {margin:0 0 0 -22px;position: relative; width: 180px; height: 180px; display: flex; justify-content: center; align-items: center;}
          .dot {position: absolute; border-radius: 50%; background: #FFF;}
          .circular-wave-dot {animation: circularWave 3s infinite ease-in-out; transform-origin: center;}
          @keyframes circularWave {0% {transform: scale(0.7); opacity: 0.3;} 50% {transform: scale(1.2); opacity: 1;} 100% {transform: scale(0.7); opacity: 0.3;}}
          .line-container {position: absolute; width: 100%; height: 100%; animation: rotateLines 8s infinite linear; transform-origin: center;}
          @keyframes rotateLines {to {transform: rotate(360deg);}}
          .expanding-line {position: absolute; height: 1px; left: 50%; top: 50%; transform-origin: left center; background: rgba(255, 255, 255, 0.3); animation: expandLine 4s infinite ease-in-out;}
          @keyframes expandLine {0% {width: 0; opacity: 0;} 20%, 80% {width: 70px; opacity: 1;} 100% {width: 0; opacity: 0;}}
          .breathing-dot {animation: breathe 4s infinite cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center;}
          @keyframes breathe {0% {transform: scale(0.8); opacity: 0.3;} 50% {transform: scale(1.3); opacity: 1;} 100% {transform: scale(0.8); opacity: 0.3;}}
          .halftone-container {position: absolute; width: 100%; height: 100%; animation: rotateSlow 20s infinite linear; transform-origin: center;}
          .halftone-dot {position: absolute; border-radius: 50%; background: #FFF; animation: halftoneFade 4s infinite ease-in-out;}
          @keyframes halftoneFade {0%, 100% {opacity: 0.3; transform: scale(0.5);} 50% {opacity: 1; transform: scale(1);}}
          @keyframes expandRing {0% {transform: scale(0);opacity: 0;} 20% {transform: scale(1);opacity: 1;} 40%, 100% {transform: scale(1.1);opacity: 0;}}


  @media screen and (min-height: 300px) and (max-height: 874px) { /* Styles appliqués quand la hauteur de l'écran se situe entre 300px et 874px */
    .article-sidebar-box {height:550px;}
      .article-sidebar-visuel {height:200px;margin:50px 0 0 0;padding:0 0 0 0;}
      .article-sidebar-visuel-expertise {height:200px;margin:50px 0 0 0;padding:0 0 0 0;}
      .article-sidebar-visuel img, .article-sidebar-visuel-expertise img {padding:20px 0 0 0;width:249px;height:177px;}

          .article-sidebar-ancre {height:199px;}
          .article-sidebar-ancre ul li a.active {height:49px;}

                .article-sidebar-ancre ul li.ancre1:has(a.active) #anim5 {display: none;}
                .article-sidebar-ancre ul li.ancre2:has(a.active) #anim3 {display: none;}
                .article-sidebar-ancre ul li.ancre3:has(a.active) #anim7 {display: none;}
                .article-sidebar-ancre ul li.ancre4:has(a.active) #anim10 {display: none;}
                .article-sidebar-ancre ul li.ancre5:has(a.active) #anim6 {display: none;}
                .article-sidebar-ancre ul li.ancre6:has(a.active) #oscillating-dots {display: none;}
                .article-sidebar-ancre ul li.ancre7:has(a.active) #pulse-wave {display: none;}
                .article-sidebar-ancre ul li.ancre8:has(a.active) #sequential-pulse {display: none;}
                .article-sidebar-ancre ul li.ancre9:has(a.active) #radial-pulse {display: none;}
                .article-sidebar-ancre ul li.ancre10:has(a.active) #pendulum-wave {display: none;}
  }


  /* Contenus corps -texte */
  .article-contenu-box {display:block;float:left;width:851px;margin:0 0 0 99px;padding:0 0 0 0;}
      .article-contenu-resume {height:117px;width:651px;margin:49px 0 0 0;padding:32px 99px 0 99px;border:1px solid #D8D8D8;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:1px;color:#777777;background-color:rgba(255,255,255,0.7);}
      .article-contenu-resume em {background:#FAFAFA;}
      .article-contenu-box h2 {clear:both;height:69px;width:653px;margin:49px 0 0 0;padding:82px 99px 0 99px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:22px;letter-spacing:2px;color:#000;}
      .article-contenu-texte {clear:both;width:652px;margin:0 0 50px 1px;padding:84px 99px 91px 98px;background:rgba(245, 245, 245, 0.8);}
      .article-contenu-texte h3 {padding:0 0 6px 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:18px;letter-spacing:2px;color:#000}
      .article-contenu-texte h4 {padding:76px 0 6px 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:18px;letter-spacing:2px;color:#000}
      .article-contenu-texte strong {background:rgba(215, 215, 215, 0.45)/*jaune rgba(255, 255, 0, 0.05)*/;font-weight:600;}
      .article-contenu-texte p {padding:25px 0 0 0;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:1px;color:#777777;}
      .article-contenu-texte ul {list-style:disc;margin:0 0 0 13px;padding:25px 0 0 0;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;letter-spacing:1px;color:#777777;}
      .article-contenu-texte ul li {margin:0 0 0 0;padding:0 0 0 37px;}
      .article-contenu-texte a {color:#000;border-bottom:1px dotted #000;}
      .article-contenu-texte a:hover {padding:3px 0 0 0;background:#000;color:#FFF;}
  /* Contenus - image */
      .article-contenu-image {width:652px;margin:0 0 50px 1px;padding:50px 99px 49px 98px;background:rgba(245, 245, 245, 0.8);}
      .article-contenu-image-methode-ou-commencer {width:652px;margin:51px 0 50px 1px;padding:50px 99px 49px 98px;background:rgba(245, 245, 245, 0.8);}/* spécifique pour les images des articles méthodes où commencer car pas de titre au-dessus de ces images pour respecter le balisage des ancres*/
        .contenu-image-visuel {height:324px;width:749px;margin:-1px 0 0 -49px;padding: 75px 0 0 0;border:1px solid #DADADA;text-align:center;background:#FFF;}
        .contenu-image-visuel-noir {height:324px;width:749px;margin:-1px 0 0 -49px;padding: 75px 0 0 0;border:1px solid #000;text-align:center;background:#000;}/*boîte pour un visuel noir utilisé dans les articles carnet*/
        .contenu-image-legende {height:50px;width:699px;margin:-1px 0 49px -49px;padding: 0 0 0 50px;border:1px solid #DADADA;line-height:50px;background:#FAFAFA;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:12px;letter-spacing:1px;color:#777777;}
  /* Contenus - newsletter */
      .contenu-newsletter {height:324px;width:749px;margin:-1px 0 0 -49px;padding: 50px 0 25px 0;border:1px solid #000;text-align:center;background:#000;background-image: url(../img/bg/bg-newsletter-iafactory.png);background-repeat:no-repeat;background-position: 275px 20px;}
      .contenu-newsletter-anim {clear:both;float:right;margin:-151px 642px 0 0;width:50px;height:50px;opacity:0.45;}
          .contenu-newsletter-titre {margin:0 0 0 0;padding:0 0 0 50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:42px;letter-spacing:1px;color:#FFF;}
          .contenu-newsletter-intertitre {margin:0 0 0 0;padding:25px 0 0 50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;line-height:20px;letter-spacing:1px;color:#757575;}
          /* Formulaire NL */
          .formulaire-nl {display:block;float:left;margin:45px 0 0 50px;width:600px;height:200px;} /*partie de champs alignés dans un bloc à gauche */

          /* champs normal */
          .fieldnl {position: relative;display: grid;}
          .fieldnl input {z-index: 0;grid-area: 1 / 1;position: relative;height:50px;width:400px;margin:0 0 49px 0;padding:0 0 0 0;border-bottom:1px solid rgba(255, 255, 255, 0.5);border-top:none;border-left:none;border-right:none;outline: none;
              background-color: transparent;transition: border-color 0.3s, color 0.3s;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing : 1px;text-align: left;font-weight:normal;color:#477C3F;}
          .fieldnl input:focus {border-bottom:1px solid rgba(71, 124, 63, 0.5);opacity:1.0;}

          /* Label flottant */
          .fieldnl span {grid-area: 1 / 1;margin: 0 0 0 0;padding:17px 0 0 0;width: max-content;transition: transform 0.2s, color 0.2s, font-size 0.2s;pointer-events: none;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size: 14px;letter-spacing: 2px;text-align: left;font-weight:normal;color: #FFF;}
          .fieldnl input:focus ~ span, .fieldnl input:not(:placeholder-shown) ~ span, .fieldnl textarea:focus ~ span, .fieldnl textarea:not(:placeholder-shown) ~ span {transform: translateY(-24px);font-size: 9px;color: #FFF;}/* Animation du label */

          /* bouton */
          .nl-bouton-envoyer {position:absolute;display:block;cursor:pointer;height:50px;width:200px;margin:-100px 0 0 200px;line-height:50px;border-radius:2px;border:none;outline:none;background:#477C3F;color:#FFF;text-transform:uppercase;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:16px;letter-spacing : 2px;text-align: center;font-weight:normal;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
          .nl-bouton-envoyer:hover {border:none;outline:none;background:#FFF;color:#000;}

          /* contrôle des champs et feedback */
          /* Icône ✓ / ✗ pour field*/
          .fieldnl.ok .status {margin:-23px 0 0 0;color: #4CAF50 !important;opacity: 1 !important;}/* icône vert OK */
          .fieldnl .status {position: absolute;right: 50px;top: 50%;transform: translateY(-50%);font-size: 16px;line-height: 1;text-align: center;color: transparent; /* invisible si aucun état */opacity: 0;pointer-events: none;transition: opacity 0.3s, color 0.3s;}
          .fieldnl.ok input, .fieldnl.ok textarea {border-bottom-color: #4CAF50;color: #4CAF50;} /* champ valide en vert */
          .fieldnl.invalid input, .fieldnl.invalid textarea {border-bottom-color: #FF7C80;color: #FF7C80;} /* champ invalide en rouge */
          .fieldnl.invalid .status {margin:-23px 0 0 0;color: #FF7C80 !important;opacity: 0.5 !important;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:9px;letter-spacing : 1px;text-align: left;font-weight:normal;} /* Icône rouge pour invalide */
          .fieldnl input:focus ~ .status, .field textarea:focus ~ .status {margin:-23px 0 0 0;}
          /* Icône ✓ / ✗ pour textarea */
          .fieldnl.ok textarea .status {color: #4CAF50;opacity: 1;}/* icône vert OK */
          .fieldnl textarea .status {color: inherit;} /* évite d'hériter d'une couleur blanche*/
          .fieldnl textarea ~ .status {top:16px;transform: none;}

          /* newsletter - légende et infobulle */
        .contenu-newsletter-legende {clear:both;display:block;height:49px;width:699px;margin:-1px 0 0 -49px;padding: 0 0 0 50px;border:1px solid #DADADA;line-height:50px;background:#FFF;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:12px;letter-spacing:1px;color:#777777;}
            .infobulle-nl {position: relative;display:inline-block;margin:0 0 0 7px;cursor:pointer}
            .infobulle-nl .infobulle-nl-text {visibility: hidden;position: absolute;z-index:5;bottom: 125%;left: 50%;width: 300px;margin:0 0 25px 0;padding:25px 25px 25px 25px;line-height:20px;background:#222;font-size:13px;letter-spacing :1px;text-align: left;color: #FFF;transform: translateX(-50%);opacity: 0;transition: opacity 0.3s;}
            .infobulle-nl:hover .infobulle-nl-text {visibility: visible;opacity: 1;}
            .infobulle-nl-icon {display: flex;width:15px;height:15px;margin:-3px 0 0 -5px;padding:1px 1px 1px 1px;line-height:18px;border-radius:50%;background:#000;color:#FFF;align-items: center;justify-content:center;font-family:'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;}





/* Signature et date */
.article-contenu-signature {height:117px;width:651px;margin:0 0 -1px 0;padding:32px 99px 0 99px;border:1px solid #D8D8D8;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:1px;color:#777777;
    background-color:rgba(255,255,255,0.7);background-image: url(../img/visuel/signature-jm-1-min.png);background-repeat:no-repeat;background-position: 670px bottom;}
.article-contenu-signature a {color:#000;border-bottom:1px dotted #000;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;}
.article-contenu-signature a:hover {padding:3px 0 0 0;background:#000;color:#FFF;}


/* Bouton d'action briefer iafactory */
.article-contenu-action{height:150px;width:852px;}
.article-action-briefer {display:block;float:left;margin:49px 0 0 -1px;padding:25px 0 27px 99px;height:49px;width:302px;border:1px solid transparent;line-height:50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:18px;letter-spacing:2px;
background:rgba(255, 255, 255, 0.5);color:#000;background-image:url(../img/ico/ico-chevron-ouvrir-vert.png), url(../img/bg/bg-bouton-long-fiche-vert.png);background-repeat:no-repeat, no-repeat;background-position:47px 43px, 150px 0;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;}
.article-action-briefer:hover {border:1px solid transparent;color:#487F40;background-position:62px 43px, 150px 0;}

      /* Animation bouton d'action */
      .article-action-briefer {position:relative;border-radius: 0;overflow: hidden;}
      .article-action-briefer::after {content: "";position: absolute;inset: 0; /* top:0; right:0; bottom:0; left:0 */border-radius: 0;padding: 1px;  /* Pseudo-élément pour le contour animé */
      /* épaisseur du contour */pointer-events: none;box-sizing: border-box;/* Dégradé animé */background: linear-gradient(90deg, transparent, #487F40, transparent);background-size: 200% 100%;animation: lightMove 6s linear infinite;
      -webkit-mask: linear-gradient(#FFF, #000) content-box, linear-gradient(#FFF, #000);-webkit-mask-composite: xor;mask-composite: exclude;}  /* Masque pour n’afficher que le contour */
      @keyframes lightMove {0% { background-position: 200% 0; }100% { background-position: -200% 0; }}


/* Bouton d'action contacter julien */
.article-action-contacter {display:block;float:left;margin:49px 0 0 47px;padding:25px 0 27px 99px;height:49px;width:302px;border:1px solid transparent;line-height:50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:18px;letter-spacing:2px;
background:rgba(255, 255, 255, 0.5);color:#000;background-image:url(../img/ico/ico-chevron-ouvrir-noir.png), url(../img/bg/bg-bouton-long-fiche-vert.png);background-repeat:no-repeat, no-repeat;background-position:47px 43px, 150px 0;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;}
.article-action-contacter:hover {border:1px solid transparent;color:#487F40;background-position:62px 43px, 150px 0;}

      /* Animation bouton d'action */
      .article-action-contacter {position:relative;border-radius: 0;overflow: hidden;}
      .article-action-contacter::after {content: "";position: absolute;inset: 0; /* top:0; right:0; bottom:0; left:0 */border-radius: 0;padding: 1px;  /* Pseudo-élément pour le contour animé */
      /* épaisseur du contour */pointer-events: none;box-sizing: border-box;/* Dégradé animé */background: linear-gradient(90deg, transparent, #000, transparent);background-size: 200% 100%;animation: lightMove 6s linear infinite;
      -webkit-mask: linear-gradient(#FFF, #000) content-box, linear-gradient(#FFF, #000);-webkit-mask-composite: xor;mask-composite: exclude;}  /* Masque pour n’afficher que le contour */
      @keyframes lightMove {0% { background-position: 200% 0; }100% { background-position: -200% 0; }}


/* Rebond bas de page */
.article-rebond {width:851px;height:1100px;margin:0 0 139px 0;padding:0 0 0 0;}
.boite-rebond-1 {float:left;width:849px;height:249px;margin:0 0 24px 0;padding:0 0 0 0;border-top: 1px solid #DADADA;border-right: 1px solid #DADADA;border-left: 1px solid #DADADA;border-bottom: 1px solid #DADADA;
   background: rgba(255, 255, 255, 1.0);cursor:pointer;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.boite-rebond-2 {float:left;width:849px;height:249px;margin:0 0 24px 0;padding:0 0 0 0;border-top: 1px solid #DADADA;border-right: 1px solid #DADADA;border-left: 1px solid #DADADA;border-bottom: 1px solid #DADADA;
  background: rgba(255, 255, 255, 1.0);cursor:pointer;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}

 .boite-rebond-1:hover, .boite-rebond-2:hover {cursor:pointer;border:1px solid #000;}
 .boite-rebond-1:hover .rebond-lien a, .boite-rebond-2:hover .rebond-lien a {padding:6px 6px 6px 6px;background-color:#000;color:#fff;transition: background-color 0.3s ease, color 0.3s ease;}

/* contenu boîte */
.rebond-categorie {display:block;float:left;width:751px;height:50px;margin:-1px 0 0 0;padding:0 0 0 99px;border-bottom:1px solid #DADADA;line-height:50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;letter-spacing:2px;color:#777777;}
.rebond-lien a {display:block;float:left;margin:32px 150px 0 94px;padding:6px 6px 6px 6px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;color:#000;letter-spacing:2px;}
.rebond-description {display:block;float:left;width:350px;margin:28px 50px 0 0;padding:0 0 0 99px;line-height:18px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;color:#777777;letter-spacing:1px;}
.rebond-vignette {display:block;float:left;width:350px;height:247px;margin:-40px 0 0 0;padding:0 0 0 0;text-align:center;}
.rebond-vignette img {width:246px;height:175px;margin:0 0 0 0;padding:0 0 0 0;}

.boite-expertise-1 {float:left;width:849px;height:249px;margin:0 0 24px 0;padding:0 0 0 0;border-top: 1px solid #000;border-right: 1px solid #000;border-left: 1px solid #000;border-bottom: 1px solid #000;
  background: rgba(0, 0, 0, 1.0);cursor:pointer;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.boite-expertise-2 {float:left;width:849px;height:249px;margin:0 0 24px 0;padding:0 0 0 0;border-top: 1px solid #000;border-right: 1px solid #000;border-left: 1px solid #000;border-bottom: 1px solid #000;
  background: rgba(0, 0, 0, 1.0);cursor:pointer;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.boite-expertise-1:hover, .boite-expertise-2:hover {cursor:pointer;border:1px solid #000;}
.boite-expertise-1:hover .expertise-lien a, .boite-expertise-2:hover .expertise-lien a {padding:6px 6px 6px 6px;background-color:#FFF;color:#000;transition: background-color 0.3s ease, color 0.3s ease;}

.expertise-categorie {display:block;float:left;width:751px;height:50px;margin:-1px 0 0 0;padding:0 0 0 99px;border-bottom:1px solid #222;line-height:50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;letter-spacing:2px;color:#DADADA;}
.expertise-lien a {display:block;float:left;margin:32px 120px 0 94px;padding:6px 6px 6px 6px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;color:#FFF;letter-spacing:2px;}
.expertise-description {display:block;float:left;width:350px;margin:28px 50px 0 0;padding:0 0 0 99px;line-height:18px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;color:#DADADA;letter-spacing:1px;}
.expertise-vignette {display:block;float:left;width:350px;height:247px;margin:-40px 0 0 0;padding:0 0 0 0;text-align:center;}
.expertise-vignette img {width:246px;height:175px;margin:0 0 0 0;padding:0 0 0 0;}


/* accordéon - ouverture - fermeture (cf. FAQ) */

.faq {margin:15px 0 9px 0;}
.article-contenu-faq {width:652px;margin:0 0 50px 1px;padding:84px 49px 91px 48px;background:rgba(245, 245, 245, 0.8);}
.item-contenu {max-height :0;margin:0 0 0 0;padding:0 0 0 0;transition: max-height 0.4s ease, opacity 0.3s ease;}
.item-contenu p {margin:1px 2px 0 2px;padding:33px 50px 91px 50px;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;letter-spacing:1px;color:#777777;background:rgba(255,255,255,0.5);}

.item-ouvrir {
  margin:0 0 1px 2px;padding:0 50px 0 50px;width:649px;height:49px;line-height:50px;cursor: pointer;border-bottom: 0px solid rgba(184, 184, 184, 0.2); border-top: 1px solid rgba(184, 184, 184, 0.2);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:14px;color:#000;letter-spacing:2px;
  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:614px 21px;}

.item-ouvrir:hover {
  margin:0 0 1px 2px;padding:0 50px 0 50px;width:649px;height:49px;line-height:50px;cursor: pointer;border-bottom: 0px solid rgba(184, 184, 184, 0.2); border-top: 1px solid rgba(184, 184, 184, 0.2);border-left:none;border-right:none;background:rgba(255,255,255,1.0);
  text-align: left;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;color:#000;letter-spacing:2px;
  transition: all 0.3s ease; opacity: 1; position: relative;background-image:url(../img/ico/ico-chevron-deployer-noir.png);background-repeat: no-repeat;background-position:614px 21px;}

.item-ouvrir.open {
  margin:0 0 1px 2px;padding:0 50px 0 50px;width:649px;height:49px;line-height:50px;cursor: pointer;border-bottom: 0px solid rgba(184, 184, 184, 0.2); border-top: 1px solid rgba(184, 184, 184, 0.2);border-left:none;border-right:none;background:rgba(255,255,255,1.0);
  text-align: left;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;color:#000;letter-spacing:2px;
  transition: all 0.3s ease; opacity: 1; position: relative;background-image:url(../img/ico/ico-chevron-replier-noir.png);background-repeat: no-repeat;background-position:614px 21px;}


/* SPECIFIQUE TOUTES LES METHODES
================================================================================================== */
/* animation des ancres */
.article-sidebar-ancre ul li.ancre6 #oscillating-dots {display:none;}
.article-sidebar-ancre ul li.ancre6:has(a.active) #oscillating-dots {display: block;}
.article-sidebar-ancre ul li.ancre7 #pulse-wave {display:none;}
.article-sidebar-ancre ul li.ancre7:has(a.active) #pulse-wave {display: block;}
.article-sidebar-ancre ul li.ancre8 #sequential-pulse {display:none;}
.article-sidebar-ancre ul li.ancre8:has(a.active) #sequential-pulse {display: block;}
.article-sidebar-ancre ul li.ancre9 #radial-pulse {display:none;}
.article-sidebar-ancre ul li.ancre9:has(a.active) #radial-pulse {display: block;}
.article-sidebar-ancre ul li.ancre10 #pendulum-wave {display:none;}
.article-sidebar-ancre ul li.ancre10:has(a.active) #pendulum-wave {display: block;}

#ancre6, #ancre7, #ancre8, #ancre9, #ancre10 {clear:both} /* assure le bon positionnement des ancres sur les titres au clic sur le menu*/


.line {position: absolute;background: rgba(255, 255, 255, 0.5);transform-origin: 0% 50%;}
.circle {position: absolute;border-radius: 50%;border: 1px solid rgba(255, 255, 255, 0.5);}
@keyframes orbit {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
@keyframes reverseOrbit {0% {transform: rotate(0deg);}100% {transform: rotate(-360deg);}}
@keyframes pulse {0% {transform: scale(0.8);opacity: 0.3;}50% {transform: scale(1.2);opacity: 1;}100% {transform: scale(0.8);opacity: 0.3;}}
@keyframes ripple {0% {transform: scale(0.1);opacity: 0.6;}100% {transform: scale(1);opacity: 0;}}


/* styles spécifique de la page article toutes les méthodes */
.methode-rebond {width:851px;margin:0 0 150px 0;padding:0 0 0 0;}
.rebond-numero {display:block;float:left;height:50px;width:51px;margin:-1px 0 0 0;padding:0 0 0 99px;border-bottom:1px solid #DADADA;line-height:50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;letter-spacing:2px;color:#000;}
.rebond-categorie-tout {display:block;float:left;height:50px;width:649px;margin:-1px 0 0 0;padding:0 50px 0 0;border-bottom:1px solid #DADADA;line-height:50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:right;font-size:13px;letter-spacing:2px;color:#777777;}
.rebond-intertitre-1 {clear:both;padding:36px 0 46px 100px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:18px;letter-spacing:2px;color:#000}
.rebond-intertitre-2 {clear:both;padding:36px 0 46px 100px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:18px;letter-spacing:2px;color:#000}
.boite-rebond-alignfooter {clear:both;display:block;height:50px;width:100%;margin:0 0 164px 0;} /* hack pour aligner le footer sur la grille */

/* position footer toutes les méthodes */
.footer-toutes-les-methodes {clear:both;display:block;margin:0 0 -87px 0;height:50px;width:100px;}





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

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


  .gabarit-article {}

  /* Intertitre article */
  .article-header {width:750px;height:50px;margin:44px 0 0 0;}

  .intertitre-article {margin:0 0 0 0;padding:0 0 0 50px;height:49px;width:699px;line-height:49px;font-size:13px;letter-spacing:2px;color:#7F7F7F;}
  .intertitre-article-action {margin:-1px 0 0 0;padding:0 0 0 49px;width:700px;}
  .intertitre-article-action:hover {}
  .intertitre-article-action-lien {height:49px;width:601px;margin:0 0 0 0;padding:0 0 0 0;line-height:49px;font-size:13px;letter-spacing:2px;}
  .intertitre-article-action-fleche {height:49px;width:49px;margin:0 0 0 0;padding:0 0 0 0;background-image: url(../img/ico/ico-chevron-ouvrir-blanc.png);background-repeat: no-repeat;background-position: center center;}
  .intertitre-article-action-telecharger {height:49px;width:99px;margin:0 0 0 0;padding:0 0 0 0;background-image: url(../img/ico/ico-chevron-telecharger-blanc.png);background-repeat: no-repeat;background-position: center center;}
  .intertitre-article-action:hover .intertitre-article-action-lien {padding:0 0 0 0;}
  .intertitre-article-action:hover .intertitre-article-action-fleche {background-position: 22px center;}
  .intertitre-article-action:hover .intertitre-article-action-telecharger {background-position: center 21px;}


  .article-corps-box {width:701px;margin:0 0 0 0;}

    /* Colonne gauche */
    .article-sidebar-box {position:relative;height:650px;width:700px;margin:0 0 0 1px;padding:0 0 0 50px;background-image: url(../img/bg/bg-sidebar-article.png);background-repeat:repeat;}
      .article-sidebar-visuel {height:249px;width:649px;margin:50px 0 0 0;padding:50px 0 0 0;text-align:center;}
      .article-sidebar-visuel-expertise {height:249px;width:649px;margin:50px 0 0 0;padding:50px 0 0 0;text-align:center;}
      .article-sidebar-ancre {height:199px;width:649px;margin:0 0 0 0;padding:0 0 0 0;}
          .article-sidebar-ancre ul li a {padding:0 0 0 50px;height:49px;line-height:50px;font-size:11px;letter-spacing:2px;background-image: url(../img/ico/ico-fleche-ancre-gris.png);background-repeat:no-repeat;background-position: 595px center;}
            .article-sidebar-ancre ul li a:hover {background-image: url(../img/ico/ico-fleche-ancre-blanc.png);background-repeat:no-repeat;background-position: 595px center;}
            .article-sidebar-ancre ul li:last-child a {}
            /*effet quand l'ancre est active */
            .article-sidebar-ancre ul li a.active {padding:0 0 0 50px;height:49px;line-height:50px;background:#000;background-image: url(../img/ico/ico-fleche-ancre-gris.png);background-repeat:no-repeat;background-position: 595px center;}
            .article-sidebar-ancre ul li a.active:hover {background:#222;background-image: url(../img/ico/ico-fleche-ancre-blanc.png);background-repeat:no-repeat;background-position: 595px center;}

            /*suppression des animations quand l'ancre est active */
            .article-sidebar-ancre ul li.ancre1:has(a.active) #anim5 {display: none;}
            .article-sidebar-ancre ul li.ancre2:has(a.active) #anim3 {display: none;}
            .article-sidebar-ancre ul li.ancre3:has(a.active) #anim7 {display: none;}
            .article-sidebar-ancre ul li.ancre4:has(a.active) #anim10 {display: none;}
            .article-sidebar-ancre ul li.ancre5:has(a.active) #anim6 {display: none;}


      /* Contenus corps -texte */
      .article-contenu-box {width:701px;margin:0 0 0 0;padding:0 0 0 0;}
          .article-contenu-resume {height:117px;width:651px;margin:49px 0 0 0;padding:32px 49px 0 49px;line-height:25px;font-size:14px;letter-spacing:1px;}
          .article-contenu-resume em {}
          .article-contenu-box h2 {height:69px;width:653px;margin:49px 0 0 0;padding:32px 49px 0 49px;font-size:22px;letter-spacing:2px;}
          .article-contenu-texte {width:652px;margin:0 0 50px 1px;padding:84px 49px 91px 48px;}
          .article-contenu-texte h3 {padding:0 0 6px 0;font-size:18px;letter-spacing:2px;}
          .article-contenu-texte h4 {padding:76px 0 6px 0;font-size:18px;letter-spacing:2px;}
          .article-contenu-texte strong {}
          .article-contenu-texte p {padding:25px 0 0 0;line-height:25px;font-size:14px;letter-spacing:1px;}
          .article-contenu-texte ul {margin:0 0 0 13px;padding:25px 0 0 0;line-height:25px;font-size:13px;letter-spacing:1px;}
          .article-contenu-texte ul li {margin:0 0 0 0;padding:0 0 0 37px;}
          .article-contenu-texte a {}
          .article-contenu-texte a:hover {padding:3px 0 0 0;}


      /* Contenus - image */
          .article-contenu-image {width:652px;margin:0 0 50px 1px;padding:50px 49px 49px 48px;}
          .article-contenu-image-methode-ou-commencer {width:652px;margin:51px 0 50px 1px;padding:50px 49px 49px 48px;}
            .contenu-image-visuel {height:299px;width:649px;margin:-1px 0 0 1px;padding: 50px 0 0 0;}
            .contenu-image-visuel-noir {height:299px;width:649px;margin:-1px 0 0 1px;padding: 50px 0 0 0;}
            .contenu-image-legende {height:49px;width:599px;margin:-1px 0 50px 1px;padding: 0 0 0 50px;line-height:50px;font-size:13px;letter-spacing:1px;}


      /* Contenus - newsletter */
          .contenu-newsletter {height:324px;width:649px;margin:-1px 0 0 1px;padding: 50px 0 25px 0;background-image: url(../img/bg/bg-newsletter-iafactory.png);background-position: 275px 20px;}
          .contenu-newsletter-anim {margin:-153px 242px 0 0;width:50px;height:50px;}
              .contenu-newsletter-titre {margin:0 0 0 0;padding:0 0 0 50px;font-size:42px;letter-spacing:1px;}
              .contenu-newsletter-intertitre {margin:0 0 0 0;padding:25px 0 0 50px;font-size:13px;line-height:20px;letter-spacing:1px;}
              /* Formulaire NL */
              .formulaire-nl {display:block;float:left;margin:45px 0 0 50px;width:600px;height:200px;} /*partie de champs alignés dans un bloc à gauche */

              /* champs normal */
              .fieldnl {}
              .fieldnl input {height:50px;width:400px;margin:0 0 49px 0;padding:0 0 0 0;font-size:14px;letter-spacing : 1px;}
              .fieldnl input:focus {}

              /* Label flottant */
              .fieldnl span {margin: 0 0 0 0;padding:17px 0 0 0;width: max-content;font-size: 14px;letter-spacing: 2px;}
              .fieldnl input:focus ~ span, .fieldnl input:not(:placeholder-shown) ~ span, .fieldnl textarea:focus ~ span, .fieldnl textarea:not(:placeholder-shown) ~ span {transform: translateY(-24px);font-size: 9px;}/* Animation du label */

              /* bouton */
              .nl-bouton-envoyer {height:50px;width:200px;margin:-100px 0 0 200px;line-height:50px;border-radius:2px;font-size:16px;letter-spacing : 2px;}
              .nl-bouton-envoyer:hover {border:none;outline:none;}

              /* contrôle des champs et feedback */
              /* Icône ✓ / ✗ pour field*/
              .fieldnl.ok .status {margin:-23px 0 0 0;}/* icône vert OK */
              .fieldnl .status {right: 50px;top: 50%;transform: translateY(-50%);font-size: 16px;line-height: 1;}
              .fieldnl.ok input, .fieldnl.ok textarea {} /* champ valide en vert */
              .fieldnl.invalid input, .fieldnl.invalid textarea {} /* champ invalide en rouge */
              .fieldnl.invalid .status {margin:-23px 0 0 0;font-size:9px;letter-spacing : 1px;} /* Icône rouge pour invalide */
              .fieldnl input:focus ~ .status, .field textarea:focus ~ .status {margin:-23px 0 0 0;}
              /* Icône ✓ / ✗ pour textarea */
              .fieldnl.ok textarea .status {}/* icône vert OK */
              .fieldnl textarea .status {} /* évite d'hériter d'une couleur blanche*/
              .fieldnl textarea ~ .status {top:16px;}

              /* newsletter - légende et infobulle */
            .contenu-newsletter-legende {height:49px;width:599px;margin:-1px 0 0 1px;padding: 0 0 0 50px;line-height:49px;font-size:13px;letter-spacing:1px;}
                .infobulle-nl {margin:0 0 0 7px;}
                .infobulle-nl .infobulle-nl-text {bottom: 125%;left: 50%;width: 300px;margin:0 0 25px 0;padding:25px 25px 25px 25px;line-height:20px;font-size:13px;letter-spacing :1px;}
                .infobulle-nl:hover .infobulle-nl-text {}
                .infobulle-nl-icon {width:15px;height:15px;margin:-3px 0 0 -5px;padding:1px 1px 1px 1px;line-height:18px;border-radius:50%;font-size:14px;}


      /* Signature et date */
      .article-contenu-signature {height:117px;width:651px;margin:0 0 -1px 0;padding:32px 49px 0 49px;line-height:25px;font-size:14px;letter-spacing:1px;background-image: url(../img/visuel/signature-jm-1-min.png);background-position: 610px bottom;}
      .article-contenu-signature a {}
      .article-contenu-signature a:hover {padding:3px 0 0 0;}


      /* Bouton d'action briefer iafactory */
      .article-contenu-action{height:150px;width:852px;}
      .article-action-briefer {margin:49px 0 0 -1px;padding:25px 0 27px 99px;height:49px;width:252px;line-height:50px;font-size:18px;letter-spacing:2px;
      background-image:url(../img/ico/ico-chevron-ouvrir-vert.png), url(../img/bg/bg-bouton-long-fiche-vert.png);background-position:47px 43px, 100px 0;}
      .article-action-briefer:hover {background-position:62px 43px, 150px 0;}

            /* Animation bouton d'action */
            .article-action-briefer {}
            .article-action-briefer::after {padding: 1px;}
            @keyframes lightMove {0% { background-position: 200% 0; }100% { background-position: -200% 0; }}


      /* Bouton d'action contacter julien */
      .article-action-contacter {margin:49px 0 0 47px;padding:25px 0 27px 99px;height:49px;width:252px;text-align:left;font-size:18px;letter-spacing:2px;
      background-image:url(../img/ico/ico-chevron-ouvrir-noir.png), url(../img/bg/bg-bouton-long-fiche-vert.png);background-position:47px 43px, 100px 0;}
      .article-action-contacter:hover {background-position:62px 43px, 150px 0;}

            /* Animation bouton d'action */
            .article-action-contacter {}
            .article-action-contacter::after {padding: 1px;}
            @keyframes lightMove {0% { background-position: 200% 0; }100% { background-position: -200% 0; }}


      /* Rebond bas de page */
      .article-rebond {width:751px;height:1100px;margin:0 0 139px 0;padding:0 0 0 0;}
      .boite-rebond-1 {width:749px;height:249px;margin:0 0 24px 0;padding:0 0 0 0;}
      .boite-rebond-2 {width:749px;height:249px;margin:0 0 24px 0;padding:0 0 0 0;}

       .boite-rebond-1:hover, .boite-rebond-2:hover {}
       .boite-rebond-1:hover .rebond-lien a, .boite-rebond-2:hover .rebond-lien a {padding:6px 6px 6px 6px;}

      /* contenu boîte */
      .rebond-categorie {width:701px;height:50px;margin:-1px 0 0 0;padding:0 0 0 49px;line-height:50px;font-size:13px;letter-spacing:2px;}
      .rebond-lien a {margin:32px 150px 0 44px;padding:6px 6px 6px 6px;font-size:14px;letter-spacing:2px;}
      .rebond-description {width:350px;margin:28px 50px 0 0;padding:0 0 0 49px;line-height:18px;font-size:13px;letter-spacing:1px;}
      .rebond-vignette {width:250px;height:147px;margin:-40px 0 0 0;padding:0 0 0 0;}
      .rebond-vignette img {width:246px;height:175px;margin:0 0 0 0;padding:0 0 0 0;}

      .boite-expertise-1 {width:749px;height:249px;margin:0 0 24px 0;padding:0 0 0 0;}
      .boite-expertise-2 {width:749px;height:249px;margin:0 0 24px 0;padding:0 0 0 0;}
      .boite-expertise-1:hover, .boite-expertise-2:hover {}
      .boite-expertise-1:hover .expertise-lien a, .boite-expertise-2:hover .expertise-lien a {padding:6px 6px 6px 6px;}

      .expertise-categorie {width:701px;height:50px;margin:-1px 0 0 0;padding:0 0 0 49px;line-height:50px;font-size:13px;letter-spacing:2px;}
      .expertise-lien a {margin:32px 120px 0 44px;padding:6px 6px 6px 6px;font-size:14px;letter-spacing:2px;}
      .expertise-description {width:350px;margin:28px 50px 0 0;padding:0 0 0 49px;line-height:18px;font-size:13px;letter-spacing:1px;}
      .expertise-vignette {width:250px;height:147px;margin:-40px 0 0 0;padding:0 0 0 0;}
      .expertise-vignette img {width:246px;height:175px;margin:0 0 0 0;padding:0 0 0 0;}


      /* accordéon - ouverture - fermeture (cf. FAQ) */

      .faq {margin:15px 0 9px 0;}
      .item-contenu {max-height :0;margin:0 0 0 0;padding:0 0 0 0;}
      .item-contenu p {margin:1px 2px 0 2px;padding:33px 50px 91px 50px;line-height:25px;font-size:13px;letter-spacing:1px;}

      .item-ouvrir {margin:0 0 1px 2px;padding:0 50px 0 50px;width:649px;height:49px;line-height:50px;font-size:14px;letter-spacing:2px;background-image:url(../img/ico/ico-chevron-deployer-noir.png);background-position:614px 21px;}
      .item-ouvrir:hover {margin:0 0 1px 2px;padding:0 50px 0 50px;width:649px;height:49px;line-height:50px;font-size:14px;letter-spacing:2px;background-image:url(../img/ico/ico-chevron-deployer-noir.png);background-position:614px 21px;}
      .item-ouvrir.open {margin:0 0 1px 2px;padding:0 50px 0 50px;width:649px;height:49px;line-height:50px;font-size:14px;letter-spacing:2px;background-image:url(../img/ico/ico-chevron-replier-noir.png);background-position:614px 21px;}


      /* SPECIFIQUE TOUTES LES METHODES
      ================================================================================================== */
      /* animation des ancres */
      .article-sidebar-ancre ul li.ancre6:has(a.active) #oscillating-dots {display: none;}
      .article-sidebar-ancre ul li.ancre7:has(a.active) #pulse-wave {display: none;}
      .article-sidebar-ancre ul li.ancre8:has(a.active) #sequential-pulse {display: none;}
      .article-sidebar-ancre ul li.ancre9:has(a.active) #radial-pulse {display: none;}
      .article-sidebar-ancre ul li.ancre10:has(a.active) #pendulum-wave {display: none;}


      /* styles spécifique de la page article toutes les méthodes */
      .methode-rebond {width:701px;margin:0 0 0 0;padding:0 0 0 0;}
      .rebond-numero {height:50px;width:51px;margin:-1px 0 0 0;padding:0 0 0 49px;line-height:50px;font-size:13px;letter-spacing:2px;}
      .rebond-categorie-tout {height:50px;width:599px;margin:-1px 0 0 0;padding:0 50px 0 0;line-height:50px;font-size:13px;letter-spacing:2px;}
      .rebond-intertitre-1 {padding:36px 0 46px 50px;font-size:18px;letter-spacing:2px;}
      .rebond-intertitre-2 {padding:36px 0 46px 50px;font-size:18px;letter-spacing:2px;}
      .boite-rebond-alignfooter {height:50px;width:100%;margin:0 0 164px 0;} /* hack pour aligner le footer sur la grille */

      /* position footer toutes les méthodes */
      .footer-toutes-les-methodes {margin:0 0 64px 0;height:50px;width:100px;}


}


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


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


  .gabarit-article {}

  /* Intertitre article */
  .article-header {width:300px;height:50px;margin:44px 0 0 0;}

  .intertitre-article {margin:0 0 0 0;padding:0 0 0 25px;height:49px;width:274px;line-height:49px;text-align:left;font-size:11px;letter-spacing:1px;color:#7F7F7F;}
  .intertitre-article-action {display:none;margin:-1px 0 0 0;padding:0 0 0 25px;width:274px;} /* action pas affichée sur mobile */

          .intertitre-article-action-mobile {display:block;} /* action affichée sur mobile */
          .intertitre-article-action-mobile-lien {position:absolute;z-index:3;display:block;margin:0 0 0 0;padding:0 0 0 25px;height:49px;width:274px;line-height:49px;text-align:left;font-size:11px;letter-spacing:1px;color:#000;border:1px dotted #000;background-image: url(../img/ico/ico-chevron-ouvrir-noir.png);background-repeat: no-repeat;background-position: 265px 17px;}
          .intertitre-article-action-mobile-lien:hover {border-bottom:1px dotted #000;background-image: url(../img/ico/ico-chevron-ouvrir-noir.png);background-repeat: no-repeat;background-position: 270px 17px;} /* action affichée sur mobile */

    .intertitre-article-action-lien {height:49px;width:274px;margin:0 0 0 0;padding:0 0 0 0;line-height:49px;font-size:13px;letter-spacing:2px;}
    .intertitre-article-action-fleche {height:49px;width:49px;margin:0 0 0 0;padding:0 0 0 0;background-image: url(../img/ico/ico-chevron-ouvrir-blanc.png);background-repeat: no-repeat;background-position: center center;}
    .intertitre-article-action-telecharger {height:49px;width:99px;margin:0 0 0 0;padding:0 0 0 0;background-image: url(../img/ico/ico-chevron-telecharger-blanc.png);background-repeat: no-repeat;background-position: center center;}
    .intertitre-article-action:hover .intertitre-article-action-lien {padding:0 0 0 0;}
    .intertitre-article-action:hover .intertitre-article-action-fleche {background-position: 22px center;}
    .intertitre-article-action:hover .intertitre-article-action-telecharger {background-position: center 21px;}


  .article-corps-box {width:301px;margin:0 0 0 0;}

    /* Colonne gauche */
    .article-sidebar-box {position:relative;height:450px;width:299px;margin:50px 0 0 1px;padding:0 0 0 0;background-image:none;background-repeat:repeat;background:#FFF;}
      .article-sidebar-visuel {height:174px;width:249px;margin:0 0 0 25px;padding:25px 0 0 0;text-align:center;}
      .article-sidebar-visuel-expertise {height:174px;width:301px;margin:0 0 0 -1px;padding:25px 0 0 0;text-align:center;}
        .article-sidebar-visuel img {height:174px;width:249px;margin:0 0 0 0;padding:0 0 0 0;}
        .article-sidebar-visuel-expertise img {height:174px;width:249px;margin:0 0 0 0;padding:0 0 0 0;}

      .article-sidebar-ancre {height:199px;width:301px;margin:0 0 0 -1px;padding:0 0 0 0;}
          .article-sidebar-ancre ul li a {padding:0 0 0 25px;height:49px;line-height:50px;font-size:10px;letter-spacing:0;background-image: url(../img/ico/ico-fleche-ancre-gris.png);background-repeat:no-repeat;background-position: 277px 16px;}
            .article-sidebar-ancre ul li a:hover {background-image: url(../img/ico/ico-fleche-ancre-blanc.png);background-repeat:no-repeat;background-position: 277px 16px;}
            .article-sidebar-ancre ul li:last-child a {}
            /*effet quand l'ancre est active */
            .article-sidebar-ancre ul li a.active {padding:0 0 0 25px;height:49px;line-height:50px;background:#000;background-image: url(../img/ico/ico-fleche-ancre-gris.png);background-repeat:no-repeat;background-position: 277px 16px;}
            .article-sidebar-ancre ul li a.active:hover {background:#222;background-image: url(../img/ico/ico-fleche-ancre-blanc.png);background-repeat:no-repeat;background-position: 277px 16px;}

            /*suppression des animations quand l'ancre est active */
            .article-sidebar-ancre ul li.ancre1:has(a.active) #anim5 {display: none;}
            .article-sidebar-ancre ul li.ancre2:has(a.active) #anim3 {display: none;}
            .article-sidebar-ancre ul li.ancre3:has(a.active) #anim7 {display: none;}
            .article-sidebar-ancre ul li.ancre4:has(a.active) #anim10 {display: none;}
            .article-sidebar-ancre ul li.ancre5:has(a.active) #anim6 {display: none;}


      /* Contenus corps -texte */
      .article-contenu-box {width:301px;margin:0 0 0 0;padding:0 0 0 0;}
          .article-contenu-resume {height:217px;width:251px;margin:49px 0 0 0;padding:32px 24px 0 24px;line-height:25px;font-size:12px;letter-spacing:1px;}
          .article-contenu-resume em {}
          .article-contenu-box h2 {height:64px;width:253px;margin:54px 0 0 0;padding:28px 0 0 24px;font-size:15px;letter-spacing:1px;line-height:25px;}
          .article-contenu-texte {width:251px;margin:4px 0 55px 1px;padding:32px 24px 66px 24px;}
          .article-contenu-texte h3 {padding:0 0 1px 0;font-size:14px;letter-spacing:1px;line-height:25px;}
          .article-contenu-texte h4 {padding:49px 0 1px 0;font-size:14px;letter-spacing:1px;line-height:25px;}
          .article-contenu-texte strong {}
          .article-contenu-texte p {padding:25px 0 0 0;line-height:25px;font-size:12px;letter-spacing:1px;}
          .article-contenu-texte ul {margin:0 0 0 13px;padding:25px 0 0 0;line-height:25px;font-size:11px;letter-spacing:1px;}
          .article-contenu-texte ul li {margin:-1px 0 0 0;padding:0 0 0 12px;}
          .article-contenu-texte a {}
          .article-contenu-texte a:hover {padding:3px 0 0 0;}


      /* Contenus - image */
          .article-contenu-image {width:252px;margin:4px 0 50px 1px;padding:50px 24px 0 23px;}
          .article-contenu-image-methode-ou-commencer {width:252px;margin:-4px 0 50px 1px;padding:50px 24px 0 23px;}
            .contenu-image-visuel {height:124px;width:299px;margin:-51px 0 0 -24px;padding:25px 0 25px 0;}
            .contenu-image-visuel-noir {height:124px;width:299px;margin:-51px 0 0 -24px;padding:25px 0 25px 0;}

                .contenu-image-visuel img {height:124px;width:249px;}
                .contenu-image-visuel-noir img {height:124px;width:249px;}

            .contenu-image-legende {height:49px;width:274px;margin:-1px 0 50px -24px;padding: 0 0 0 25px;line-height:50px;font-size:10px;letter-spacing:0;}


      /* Contenus - newsletter */
          .contenu-newsletter {height:274px;width:298px;margin:-26px 0 0 -24px;padding: 50px 0 25px 0;border:1px solid #555;background-image:none;}
          .contenu-newsletter-anim {margin:-171px 122px 0 0;width:50px;height:50px;}
              .contenu-newsletter-titre {margin:-8px 0 0 0;padding:0 25px 0 25px;font-size:18px;letter-spacing:1px;}
              .contenu-newsletter-intertitre {margin:0 0 0 0;padding:20px 25px 0 25px;font-size:12px;line-height:25px;letter-spacing:0;}
              /* Formulaire NL */
              .formulaire-nl {display:block;float:left;margin:10px 0 0 25px;width:250px;height:200px;} /*partie de champs alignés dans un bloc à gauche */

              /* champs normal */
              .fieldnl {}
              .fieldnl input {height:50px;width:245px;margin:0 0 15px 0;padding:0 0 0 0;font-size:13px;letter-spacing : 1px;}
              .fieldnl input:focus {}

              /* Label flottant */
              .fieldnl span {margin: 0 0 0 0;padding:17px 0 0 0;width: max-content;font-size: 13px;letter-spacing: 2px;}
              .fieldnl input:focus ~ span, .fieldnl input:not(:placeholder-shown) ~ span, .fieldnl textarea:focus ~ span, .fieldnl textarea:not(:placeholder-shown) ~ span {transform: translateY(-24px);font-size: 9px;}/* Animation du label */

              /* bouton */
              .nl-bouton-envoyer {height:50px;width:200px;margin:0 0 0 0;line-height:50px;border-radius:2px;font-size:14px;letter-spacing : 2px;}
              .nl-bouton-envoyer:hover {border:none;outline:none;}

              /* contrôle des champs et feedback */
              /* Icône ✓ / ✗ pour field*/
              .fieldnl.ok .status {margin:-23px 0 0 0;}/* icône vert OK */
              .fieldnl .status {right: 50px;top: 50%;transform: translateY(-50%);font-size: 16px;line-height: 1;}
              .fieldnl.ok input, .fieldnl.ok textarea {} /* champ valide en vert */
              .fieldnl.invalid input, .fieldnl.invalid textarea {} /* champ invalide en rouge */
              .fieldnl.invalid .status {margin:-16px -45px 0 0;font-size:9px;letter-spacing : 1px;} /* Icône rouge pour invalide */
              .fieldnl input:focus ~ .status, .field textarea:focus ~ .status {margin:-23px 0 0 0;}
              /* Icône ✓ / ✗ pour textarea */
              .fieldnl.ok textarea .status {}/* icône vert OK */
              .fieldnl textarea .status {} /* évite d'hériter d'une couleur blanche*/
              .fieldnl textarea ~ .status {top:16px;}

              /* newsletter - légende et infobulle */
            .contenu-newsletter-legende {height:49px;width:274px;margin:-1px 0 0 -24px;padding: 0 0 0 25px;line-height:49px;font-size:10px;letter-spacing:0;}
                .infobulle-nl {margin:0 0 0 7px;}
                .infobulle-nl .infobulle-nl-text {bottom: 125%;left: 50%;width: 300px;margin:0 0 25px 0;padding:25px 25px 25px 25px;line-height:20px;font-size:13px;letter-spacing :1px;}
                .infobulle-nl:hover .infobulle-nl-text {}
                .infobulle-nl-icon {width:15px;height:15px;margin:-3px 0 0 -5px;padding:1px 1px 1px 1px;line-height:18px;border-radius:50%;font-size:14px;}


      /* Signature et date */
      .article-contenu-signature {height:167px;width:250px;margin:-5px 0 -1px 0;padding:32px 24px 0 25px;line-height:25px;font-size:12px;letter-spacing:0;background-image: url(../img/visuel/signature-jm-1-min.png);background-position: 210px 102px;}
      .article-contenu-signature a {}
      .article-contenu-signature a:hover {padding:3px 0 0 0;}


      /* Bouton d'action briefer iafactory */
      .article-contenu-action{height:300px;width:252px;}
      .article-action-briefer {margin:49px 0 0 -1px;padding:25px 25px 27px 50px;height:49px;width:227px;line-height:50px;font-size:15px;letter-spacing:2px;
      background-image:url(../img/ico/ico-chevron-ouvrir-vert.png), url(../img/bg/bg-bouton-long-fiche-vert.png);background-position:25px 43px, 51px 0;}
      .article-action-briefer:hover {background-position:30px 43px, 51px 0;}

            /* Animation bouton d'action */
            .article-action-briefer {}
            .article-action-briefer::after {padding: 1px;}
            @keyframes lightMove {0% { background-position: 200% 0; }100% { background-position: -200% 0; }}


      /* Bouton d'action contacter julien */
      .article-action-contacter {margin:22px 0 0 -1px;padding:25px 25px 27px 50px;height:49px;width:227px;text-align:left;font-size:15px;letter-spacing:2px;
      background-image:url(../img/ico/ico-chevron-ouvrir-noir.png), url(../img/bg/bg-bouton-long-fiche-vert.png);background-position:25px 43px, 51px 0;}
      .article-action-contacter:hover {background-position:30px 43px, 51px 0;}

            /* Animation bouton d'action */
            .article-action-contacter {}
            .article-action-contacter::after {padding: 1px;}
            @keyframes lightMove {0% { background-position: 200% 0; }100% { background-position: -200% 0; }}


      /* Rebond bas de page */
      .article-rebond {width:301px;height:1405px;margin:0 0 139px 0;padding:0 0 0 0;}
      .boite-rebond-1 {width:299px;height:349px;margin:4px 0 20px 0;padding:0 0 0 0;}
      .boite-rebond-2 {width:299px;height:349px;margin:4px 0 20px 0;padding:0 0 0 0;}

       .boite-rebond-1:hover, .boite-rebond-2:hover {}
       .boite-rebond-1:hover .rebond-lien a, .boite-rebond-2:hover .rebond-lien a {padding:6px 6px 6px 6px;}

      /* contenu boîte */
      .rebond-categorie {width:274px;height:50px;margin:-1px 0 0 0;padding:0 0 0 24px;line-height:50px;font-size:10px;letter-spacing:1px;}
      .rebond-lien a {width:240px;margin:13px 150px 0 18px;padding:6px 6px 6px 6px;font-size:12px;letter-spacing:1px;}
      .rebond-description {width:250px;height:125px;margin:18px 50px 0 0;padding:0 0 0 24px;line-height:16px;font-size:11px;letter-spacing:1px;}
      .rebond-vignette {width:250px;height:147px;margin:-60px 0 0 0;padding:0 0 0 0;}
      .rebond-vignette img {width:246px;height:175px;margin:0 0 0 25px;padding:0 0 0 0;}

      .boite-expertise-1 {width:299px;height:349px;margin:4px 0 24px 0;padding:0 0 0 0;}
      .boite-expertise-2 {width:299px;height:349px;margin:4px 0 24px 0;padding:0 0 0 0;}
      .boite-expertise-1:hover, .boite-expertise-2:hover {}
      .boite-expertise-1:hover .expertise-lien a, .boite-expertise-2:hover .expertise-lien a {padding:6px 6px 6px 6px;}

      .expertise-categorie {width:274px;height:50px;margin:-1px 0 0 0;padding:0 0 0 24px;line-height:50px;font-size:10px;letter-spacing:1px;}
      .expertise-lien a {width:240px;margin:13px 150px 0 18px;padding:6px 6px 6px 6px;font-size:12px;letter-spacing:1px;}
      .expertise-description {width:250px;height:125px;margin:18px 50px 0 0;padding:0 0 0 24px;line-height:16px;font-size:11px;letter-spacing:1px;}
      .expertise-vignette {width:250px;height:147px;margin:-60px 0 0 0;padding:0 0 0 0;}
      .expertise-vignette img {width:246px;height:175px;margin:0 0 0 25px;padding:0 0 0 0;}


      /* accordéon - ouverture - fermeture (cf. FAQ) */

      .faq {margin:-33px 0 0 0;}
      .article-contenu-faq {width:299px;margin:4px 0 55px 1px;padding:32px 0 0 0;}
      .item-contenu {max-height :0;margin:0 0 0 0;padding:0 0 0 0;}
      .item-contenu p {margin:1px 0 0 0;padding:33px 25px 91px 25px;line-height:25px;font-size:10px;letter-spacing:0;background:rgba(255, 255, 255, 0.8);}

      .item-ouvrir {margin:0 0 1px 0;padding:0 0 0 25px;width:299px;height:49px;line-height:50px;font-size:10px;letter-spacing:0;background-image:url(../img/ico/ico-chevron-ouvrir-min.png);background-position:268px 18px;}
      .item-ouvrir:hover {margin:0 0 1px 0;padding:0 0 0 25px;width:299px;height:49px;line-height:50px;font-size:10px;letter-spacing:0;background-image:url(../img/ico/ico-chevron-ouvrir-min.png);background-position:268px 18px;}
      .item-ouvrir.open {margin:0 0 1px 0;padding:0 0 0 25px;width:299px;height:49px;line-height:50px;font-size:10px;letter-spacing:0;background-image:url(../img/ico/ico-chevron-fermer-min.png);background-position:268px 18px;}


      /* SPECIFIQUE TOUTES LES METHODES
      ================================================================================================== */
      /* animation des ancres */
      .article-sidebar-ancre ul li.ancre6:has(a.active) #oscillating-dots {display: none;}
      .article-sidebar-ancre ul li.ancre7:has(a.active) #pulse-wave {display: none;}
      .article-sidebar-ancre ul li.ancre8:has(a.active) #sequential-pulse {display: none;}
      .article-sidebar-ancre ul li.ancre9:has(a.active) #radial-pulse {display: none;}
      .article-sidebar-ancre ul li.ancre10:has(a.active) #pendulum-wave {display: none;}


      /* styles spécifique de la page article toutes les méthodes */
      .methode-rebond {width:301px;margin:-4px 0 150px 0;padding:0 0 0 0;}
      .rebond-intertitre-1 {padding:12px 0 43px 25px;font-size:15px;letter-spacing:1px;}
      .rebond-intertitre-2 {padding:37px 0 48px 25px;font-size:15px;letter-spacing:1px;}

      .rebond-numero {height:50px;width:51px;margin:-1px 0 0 0;padding:0 0 0 24px;line-height:50px;font-size:10px;letter-spacing:1px;}
      .rebond-categorie-tout {height:50px;width:199px;margin:-1px 0 0 0;padding:0 25px 0 0;line-height:50px;font-size:10px;letter-spacing:1px;}
      .boite-rebond-alignfooter {height:50px;width:100%;margin:0 0 164px 0;} /* hack pour aligner le footer sur la grille */

      /* position footer toutes les méthodes */
      .footer-toutes-les-methodes {margin:0 0 -34px 0;height:50px;width:100px;}




}