/* ======================================== FICHE-NOIRE.css ======================================== */ /* Structuration et séquençage d'une fiche sur fond noir */ /* Septembre 2025 - IAFACTORY j.muckensturm /* FICHE NOIRE ================================================================================================== */ /* >> Liens */ a {color:#FFF;border-bottom:1px dotted #FFF;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-decoration:none;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;} a:hover {color:#FFF;border-bottom:1px solid #FFF;} /* 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 */ body.fiche-noire {background:#000;} /*fond noir en option en cas de bug de grille - affichera un fond noir vs. un fond blanc par défaut du body héritée de la css structure */ .gabarit-fiche-prestation {height:1750px;} /*hauteur > fiche noire prestation de service */ .gabarit-fiche-projet {height:1700px;} /*hauteur > fiche projet portfolio */ .gabarit-fiche-iafactory {height:1050px;} /*hauteur > fiche noire présentation iafactory */ .gabarit-fiche-iafactory-avec-expertise {height:4050px;} /*hauteur > fiche noire présentation iafactory avec expertises dans la partie basse*/ .gabarit-fiche-briefing-step1 {height:1250px;} /*hauteur > fiche briefing step1 : choix presta */ .gabarit-fiche-briefing-step2 {height:1250px;} /*hauteur > fiche briefing step2 : formulaire */ .gabarit-fiche-briefing-step3 {height:1250px;} /*hauteur > fiche briefing step3 : confirmation */ .gabarit-fiche-contact-step1 {height:1500px;} /*hauteur > fiche contact step1 : formulaire */ .gabarit-fiche-contact-step2 {height:1250px;} /*hauteur > fiche contact step 2 : confirmation */ .gabarit-fiche-newsletter {height:1150px;} /*hauteur > fiche newsletter */ /* Faux curseur texte : permet d'ajouter un texte devant et derrière le faux curseur "back" ou "brief"*/ #custom-cursor {position: fixed;top: 0;left: 0;pointer-events: none; /* ne bloque pas les clics */font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size: 14px;font-weight: bold;color:#FFF;background: rgba(0,0,0,0.7);padding: 6px 6px 6px 6px;border-radius: 4px;transform: translate(-50%, -50%);z-index:5;white-space: nowrap;transition: transform 0.1s ease; /* fluide au changement */} #custom-cursor.hidden {opacity: 0;}/* Masquer le curseur texte au contact des éléments cliquables */ /* Curseur trainée pixel */ .pixel {position: absolute;width:5px;height:5px;background:#DADADA;pointer-events: none; /* ne bloque pas les clics */opacity: 1;transition: opacity 1.5s linear; /* disparition progressive */} @keyframes trail {0% {opacity: 1;transform: scale(1);} 100% {opacity: 0;transform: scale(0);}} /* GRILLE NOIRE ================================================================================================== */ /* >> Conteneur grille 100 % */ .grille-meta-noir {z-index:-30;background-color:#000;margin-left: auto;margin-right: auto;background-image:/*permet de gérer l'arrière plan du site avec la répétition des lignes horizontales */ repeating-linear-gradient(to bottom, #232323 0, #232323 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, #000 0, #000 1px, transparent 1px, transparent 25px), repeating-linear-gradient(to bottom, #000 0, #000 1px, transparent 1px, transparent 5px);} /* >> Conteneur grille repères */ .grille-reperes-noir {z-index:-30;width: 1605px;margin: auto;background:/*permet de gérer la répétition des repères */ repeating-linear-gradient(to bottom, #5C5C5C 0, #5C5C5C 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, #000 0, #000 1px, transparent 1px, transparent 10px);} /* >> Conteneur conteu 1500PX + PADDING 100PX */ .conteneur-contenu-noir {z-index:-30;height:auto;width: 1501px;padding:0 50px 0 50px;margin: auto;background-color:#000;background-image:/* englobe le site dans la limite de 1500 px et permet de gérer la répétition interne de l'arrière plan */ repeating-linear-gradient(to right, #181818 0, #181818 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, #181818 0, #181818 1px, transparent 1px, transparent 50px),/* Lignes de 50px */ repeating-linear-gradient(to right, #111 0, #111 1px, transparent 1px, transparent 25px), repeating-linear-gradient(to bottom, #111 0, #111 1px, transparent 1px, transparent 25px),/* Lignes de 25px */ repeating-linear-gradient(to right, #111 0, #111 1px, transparent 1px, transparent 5px), repeating-linear-gradient(to bottom, #000 0, #000 1px, transparent 1px, transparent 5px);}/* Lignes de 5px */ /* lOGO FOND NOIR ================================================================================================== */ .logo-iafactory-noir {float:right;display:block;z-index:5;position:absolute;top:0;height:176px;width:952px;margin:0 0 0 800px;padding:24px 0 0 0;border-bottom:none;font-size:142px;letter-spacing : 13px;font-family: 'typorintix';color:#FFF; -webkit-text-stroke: 4px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} /* background stris logo */ .logo-iafactory-noir::before {z-index: 10;content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image: url(../img/bg/bg-logo-iafactory-mediaquery1a.png);background-repeat: no-repeat;background-position:0 52px;opacity:0.6;} .logo-iafactory-noir:hover {margin:0 0 0 781px;padding:24px 0 0 0;z-index:5;border-bottom:none;background:none;color:#000;-webkit-text-stroke: 3px #FFF;text-shadow:-1px -1px 0 #FFF,1px -1px 0 #FFF,-1px 1px 0 #FFF,1px 1px 0 #FFF} .logo-iafactory-noir-box {float:right;display:block;z-index:4;position:absolute;top:0;height:173px;width:1500px;margin:0 0 0 910px;padding:26px 0 0 0;background:#FFF; -webkit-transform:skew(23deg);-moz-transform:skew(23deg);-o-transform:skew(23deg);-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .logo-iafactory-special-box {float:right;display:block;z-index:4;position:absolute;top:0;height:173px;width:1500px;margin:0 0 0 910px;padding:26px 0 0 0;background:#111; -webkit-transform:skew(23deg);-moz-transform:skew(23deg);-o-transform:skew(23deg);-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .logo-aos-fx {z-index:5;position:absolute;}/*hack pour faire fonctionner l'animaton aos du logo sans dénaturer l'effet scramble*/ /* Animation logo IAFACTORY fiche noire / SVG */ h1:has(> .logo-iafactory-noir) {all: unset;display:contents;} /* appliquer le h1 au logo sur la page d'accueil */ #logo-iaf-svg-noir {cursor:pointer;float:right;display:block;z-index:9;position:absolute;top:0;height:176px;width:952px;margin:13px 0 0 759px;padding:24px 0 0 0;border-bottom:none;background:none;font-size:142px;letter-spacing : 13px;font-family: 'typorintix';color:#FFF; -webkit-text-stroke: 4px #FFF;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} #logo-iaf-svg-noir:hover {margin:13px 0 0 732px;padding:24px 25px 0 0;z-index:999;border-bottom:none;background:none;color:#FFF;-webkit-text-stroke: 3px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;} /* NOIR ET BLANC .text-ia-copy {fill: none;stroke: none;stroke-dasharray: 6% 29%;stroke-width: 1.5px;stroke-dashoffset: 0%;animation: stroke-offset 5.5s infinite linear;} .text-ia-copy:nth-child(1){stroke: #DFDFDF;animation-delay: -1s;} .text-ia-copy:nth-child(2){stroke: #FFF;animation-delay: -2s;} .text-ia-copy:nth-child(3){stroke: #DFDFDF;animation-delay: -3s;} .text-ia-copy:nth-child(4){stroke: #FFF;animation-delay: -4s;} .text-ia-copy:nth-child(5){stroke: #DFDFDF;animation-delay: -5s;} /* /* MULTICOLORE */ .text-ia-copy {fill: none;stroke: none;stroke-dasharray: 6% 29%;stroke-width: 1.5px;stroke-dashoffset: 0%;animation: stroke-offset 5.5s infinite linear;} .text-ia-copy:nth-child(1){stroke: #6600CC;animation-delay: -1s;} .text-ia-copy:nth-child(2){stroke: #9933CC;animation-delay: -2s;} .text-ia-copy:nth-child(3){stroke: #FF0;animation-delay: -3s;} .text-ia-copy:nth-child(4){stroke: #FF6600;animation-delay: -4s;} .text-ia-copy:nth-child(5){stroke: #FF00FF;animation-delay: -5s;} @keyframes stroke-offset{ 100% {stroke-dashoffset: -35%;} } /* ==================================================================== */ /* °°° @MEDIAQUERIES - opti position logo */ /* ==================================================================== */ @media screen and (min-width: 1600px) and (max-width: 1795px) { /* animation logo - alignement */ #logo-iaf-svg-noir {top:0;height:176px;width:952px;margin:13px 0 0 709px;padding:24px 0 0 0;font-size:136px;letter-spacing : 10px;-webkit-text-stroke: 4px #FFF;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;} #logo-iaf-svg-noir:hover {margin:13px 0 0 684px;padding:24px 25px 0 0;-webkit-text-stroke: 3px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;} .text-ia-copy {stroke-width: 1.5px;} } @media screen and (min-width: 1065px) and (max-width: 1600px) { /* animation logo - alignement */ #logo-iaf-svg-noir {top:69px;height:86px;width:952px;margin:0 0 0 451px;padding:24px 0 0 0;font-size:72px;letter-spacing : 10px;-webkit-text-stroke: 2px #FFF;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;} #logo-iaf-svg-noir:hover {margin:0 0 0 436px;padding:24px 0 0 0;-webkit-text-stroke: 3px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;} .text-ia-copy {stroke-width: 1.5px;} } @media screen and (min-width: 875px) and (max-width: 1065px) { /* animation logo - alignement */ #logo-iaf-svg-noir {top:69px;height:86px;width:952px;margin:0 0 0 403px;padding:24px 0 0 0;font-size:60px;letter-spacing : 10px;-webkit-text-stroke: 2px #FFF;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;} #logo-iaf-svg-noir:hover {margin:0 0 0 389px;padding:24px 0 0 0;-webkit-text-stroke: 3px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;} .text-ia-copy {stroke-width: 1.5px;} } /* HEADER FOND NOIR ================================================================================================== */ header {clear:both;height:276px;} /* >> Navigation fond noir */ nav.navfichenoire {float:left;display:block;margin:50px 0 0 0;padding:63px 53px 11px 61px;height:75px;width:35px;border:1px solid transparent;background-image:url(../img/ico/ico-menu-retour-blanc.png), url(../img/bg/bg-bouton-court-haut-droite-blanc.png);background-repeat:no-repeat, no-repeat;background-position:43px 60px, 99px -1px;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} nav.navfichenoire:hover {border:1px solid transparent;background-position:33px 60px, 99px -1px;cursor:pointer;} /* >> Briefer fond noir */ .bouton-briefer-noir {position:absolute;z-index:5;display:block;float:left;margin:50px 0 0 300px;padding:63px 53px 11px 61px;height:75px;width:235px;border:1px solid transparent; font-size:40px;letter-spacing : 4px;line-height:40px;font-family: 'typobriquete', "Trebuchet MS", Helvetica, sans-serif;color:#FFF; background-image:url(../img/bg/bg-bouton-long-bas-gauche-blanc.png);background-repeat:no-repeat;background-position:-1px 99px;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .bouton-briefer-noir:hover {border:1px solid #FFF;color:#FFF;background-position:-1px 99px;background-color:rgba(119, 119, 119, 0.050);} /* >> Animation contour */ .bouton-briefer-noir-animation {position:absolute;margin:50px 0 0 300px;height:151px;width:351px;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .bouton-briefer-noir-animation:hover {cursor: pointer;} .bouton-briefer-noir-animation::before, .bouton-briefer-noir-animation::after {animation: clipMe 10s linear infinite;/* double de Animation Delay*/;color:rgba(255, 255, 255, 0.1)/* couleur de l'animation*/;z-index:5;position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: "";box-shadow: inset 0 0 0 1px;} .bouton-briefer-noir-animation::before {animation-delay: -5s;/*moitié de clip Me*/} @keyframes clipMe {0%, 100% { clip: rect(0, 351px, 1px, 0); } 25% { clip: rect(0, 351px, 151px, 350px); } 50% { clip: rect(150px, 351px, 151px, 0); } 75% { clip: rect(0, 1px, 151px, 0);}} /* >> Baseline fond noir */ .baseline-iafactory-noir {float:left;display:block;margin:184px 0 0 599px;padding:0 0 0 0;text-transform:lowercase;line-height:25px;font-size:14px;color:#FFF;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;} /* >> Ariane fond noir */ .fil-ariane-noir {clear:both;float:left;height: 25px;margin:-18px 0 0 0;padding: 0 0 0 0;text-transform:lowercase;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:12px;letter-spacing : 1px;text-align: left;font-weight:normal;} .fil-ariane-noir ul {display:block;padding:0 0 0 42px;} .fil-ariane-noir ul li {display:inline;margin:0 0 0 0;padding:0 21px 0 8px;background-image:url(../img/ico/ico-chevron-ariane.png);background-repeat:no-repeat;background-position:right 4px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;color:#777;} .fil-ariane-noir ul li a {font-size:12px;letter-spacing : 1px;text-align: left;font-weight:normal;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;color:#FFF;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .fil-ariane-noir ul li a:hover {background:#FFF;color:#000;padding:6px;} .fil-ariane-noir ul li.arianelast {} /*item visible sur petite résolution*/ .fil-ariane-noir .nochevron {background-image:none;} /* STRUCTURE ================================================================================================== */ .corps-fiche-box {width:1501px;margin:0 0 0 0;} /* Colonne gauche */ .fiche-sidebar-box {display:block;float:left;height:603px;width:500px;margin:21px 0 0 0;padding:0 0 0 50px;} /* Visuel fiche service */ .fiche-sidebar-visuel-blanc {height:249px;width:499px;margin:73px 0 0 0;padding:0 0 0 0;border-radius:3px;border:1px solid #FFF;text-align:center;background:#FFF;} /*fiche service */ .fiche-sidebar-visuel-noir {height:249px;width:499px;margin:73px 0 0 0;padding:0 0 0 0;border-radius:3px;border:1px solid #222;text-align:center;background:#000;} /*fiche service */ /* Visuel fiche service - sticky */ .fiche-sidebar-visuel-projet-blanc, .fiche-sidebar-visuel-projet-noir, .fiche-sidebar-visuel-blanc, .fiche-sidebar-visuel-noir {/*position: -webkit-sticky;position: sticky;top: 250px;z-index: 10;*/}/*option : rendre le visuel colonne gauche sticky (rendu pas optimal)*/ /* Animation défilement texte logo ou info projet */ .fiche-sidebar-tagleftbottom1 {height:40px;width:499px;margin:88px 0 0 -1px;padding: 0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing :2px;text-align: left;font-weight:normal;color:#777777;} .fiche-sidebar-defile {height:50px;margin:-45px 0 0 129px;padding: 0 0 0 0;width: 395px;/* largeur du conteneur visible */overflow: hidden; /* cache le texte qui dépasse */white-space: nowrap; /* texte sur une seule ligne */box-sizing: border-box; font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing :2px;text-align: left;font-weight:normal;color:#FFF;} .fiche-sidebar-defile span {display: inline-block;padding-left: 100%; /* démarre hors de l’écran à droite */animation: defile 25s linear infinite; /* défilement continu */} .fiche-sidebar-defile span a {margin-right:50px;text-transform:uppercase;line-height:25px;padding:4px 4px 2px 4px;color:#FFF;border-bottom:1px dotted #FFF;;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;} .fiche-sidebar-defile span a:hover {border-bottom:1px solid #FFF;background:#FFF;color:#000;} .fiche-sidebar-defile:hover span {animation-play-state: paused;} @keyframes defile {0% {transform: translateX(0); /* position initiale à droite */}100% {transform: translateX(-100%); /* défile jusqu’à gauche */}} /* Contenus corps -texte */ .fiche-content-box {display:block;float:left;width:751px;height:408px;margin:-17px 0 0 198px;padding:0 0 0 0;} /* Titre */ .fiche-contenu-tagrightup1 {display:block;float:left;height:25px;width:299px;margin:0 0 65px 0;padding: 0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing :2px;text-align: left;font-weight:normal;color:#777777;} .fiche-contenu-tagrightup2 {display:block;float:left;height:25px;width:299px;;margin:0 0 0 2px;padding: 0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing :2px;text-align: left;font-weight:normal;color:#777777;} .fiche-contenu-tagrightup3 {display:block;float:left;height:25px;width:599px;margin:0 0 65px 0;padding: 0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing :2px;text-align: left;font-weight:normal;color:#777777;} .fiche-contenu-tagrightup3 a {color:#CCC;} .fiche-contenu-tagrightup3 a:hover {color:#FFF;} /* Texte */ .fiche-contenu-texte {display:block;clear:both;width:652px;margin:95px 0 0 1px;padding:0 0 0 0;} .fiche-contenu-texte h3 {height:50px;width:599px;margin:-4px 0 0 0;padding: 0 0 4px 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:24px;letter-spacing :2px;text-align: left;font-weight:normal;color:#FFF;} .fiche-contenu-texte p {padding:0 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;} .fiche-contenu-texte strong {background:#111;font-weight:500;} .fiche-contenu-texte em {color:#FFF;} .fiche-contenu-texte ul {list-style:none;margin:25px 0 0 0;padding:0 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;} .fiche-contenu-texte ul li {margin:0 0 0 0;padding:0 0 0 0;} .fiche-contenu-texte ul li a {color:#CCC;text-decoration:underline;} .fiche-contenu-texte ul li a:hover {color:#FFF;text-decoration:underline;} .fiche-contenu-texte a {color:#000;border-bottom:1px dotted #000;} .fiche-contenu-texte a:hover {padding:3px 0 0 0;background:#000;color:#FFF;} .infobulle {position: relative;display:inline-block;margin:0 0 0 7px;cursor:pointer} .infobulle .infobulle-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:hover .infobulle-text {visibility: visible;opacity: 1;} .infobulle-icon {display: flex;width:15px;height:15px;margin:-3px 0 0 0;padding:1px 0 0 1px;line-height:18px;border-radius:50%;background:#777;color: #000;align-items: center;justify-content:center;font-family:'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;} /* Bouton d'action briefer iafactory */ .fiche-action-briefer {display:block;float:left;margin:3px 0 0 200px;padding:23px 0 29px 48px;height:49px;width:301px;border:1px solid transparent;line-height:50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:18px;letter-spacing:2px; color:#FFF;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:292px 42px, 99px -1px;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;} .fiche-action-briefer:hover {border:1px solid transparent;color:#487F40;background-position:302px 42px, 99px -1px;} /* Animation bouton d'action */ .fiche-action-briefer {position:relative;border-radius: 0;overflow: hidden;} .fiche-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; }} /* Rebond prestation */ .service-rebond {display:block;float:left;height:700px;width:699px;margin:128px 0 25px 200px;padding: 0 0 4px 0;} .service-rebond h4 {display:block;float:left;height:50px;width:499px;margin:0 0 0 0;padding: 0 0 4px 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:24px;letter-spacing :2px;text-align: left;font-weight:normal;color:#FFF;} /* service complémentaire boîte */ .rebond-service-1 {float:left;width:649px;height:199px;margin:15px 0 80px 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;} .rebond-service-1 .service-lien {-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .rebond-service-1:hover {cursor:pointer;border:1px solid #FFF;} .rebond-service-1:hover .service-lien {padding:6px 6px 6px 6px;background:#000;color:#FFF;} .service-lien {display:block;float:left;margin:32px 150px 0 44px;padding:6px 6px 6px 6px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;color:#000;letter-spacing:2px;} .service-description {display:block;float:left;width:300px;margin:28px 0 0 0;padding:0 0 0 50px;line-height:18px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;color:#777777;letter-spacing:1px;} .service-vignette {display:block;float:left;height:154px;width:250px;margin:-35px 0 0 25px;padding:0 0 0 0;text-align:center;} .service-vignette img {height:154px;width:250px;margin:0 0 0 0;padding:0 0 0 0;} /* expertise complémentaire boîte */ .service-expertise-1 {float:left;width:649px;height:199px;margin:15px 0 79px 0;padding:0 0 0 0;border-top: 1px solid #222;border-right: 1px solid #222;border-left: 1px solid #222;border-bottom: 1px solid #222; 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;} .service-expertise-1 .service-expertise-lien, .service-expertise-2 .service-expertise-lien {-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .service-expertise-1:hover, .service-expertise-2:hover {cursor:pointer;border:1px solid #222;} .service-expertise-1:hover .service-expertise-lien, .service-expertise-2:hover .service-expertise-lien {padding:6px 6px 6px 6px;background-color:#FFF;color:#000;} .service-expertise-lien {display:block;float:left;margin:32px 150px 0 44px;padding:6px 6px 6px 6px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;color:#FFF;letter-spacing:2px;} .service-expertise-description {display:block;float:left;width:300px;margin:28px 0 0 0;padding:0 0 0 50px;line-height:18px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:13px;color:#DADADA;letter-spacing:1px;} .service-expertise-description-big {display:block;float:left;width:300px;margin:44px 0 0 0;padding:0 0 0 50px;line-height:18px;text-transform:uppercase;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:30px;color:#FFF;letter-spacing:1px;} .service-expertise-vignette {display:block;float:left;height:154px;width:250px;margin:-35px 0 0 25px;padding:0 0 0 0;text-align:center;} .service-expertise-vignette img {height:154px;width:250px;margin:0 0 0 0;padding:0 0 0 0;} /* FICHE PROJET NOIRE - SPECIFIQUE ================================================================================================== */ /* Animation Nom marque */ svg {position:absolute;float:left;font: 34px 'typoarchia';letter-spacing:10px;height:70px;width:799px;margin:-122px 0 0 698px;opacity:75%;} .text-copy {fill: none;stroke: none;stroke-dasharray: 6% 29%;stroke-width: 1.5px/*2px plus fin*/;stroke-dashoffset: 0%;animation: stroke-offset 5.5s infinite linear;} .text-copy:nth-child(1){stroke: #333;animation-delay: -1s;} .text-copy:nth-child(2){stroke: #222;animation-delay: -2s;} .text-copy:nth-child(3){stroke: #555;animation-delay: -3s;} .text-copy:nth-child(4){stroke: #333;animation-delay: -4s;} .text-copy:nth-child(5){stroke: #222;animation-delay: -5s;} @keyframes stroke-offset{ 100% {stroke-dashoffset: -35%;} } /* Contenus corps -texte */ .fiche-projet-box {display:block;float:left;width:751px;height:408px;margin:-17px 0 0 198px;padding:0 0 0 0;} .projet-titre {height:50px;width:100%;margin:45px 0 -15px 0;padding: 0 0 0 50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:34px;letter-spacing : 3px;text-align: left;font-weight:normal;color:#FFF;} /* Visuel fiche projet */ .fiche-sidebar-visuel-projet-blanc {height:249px;width:499px;margin:73px 0 50px 0;padding:0 0 0 0;border-radius:3px;border:1px solid #FFF;text-align:center;background:#FFF;}/*fiche projet */ .fiche-sidebar-visuel-projet-noir {height:249px;width:499px;margin:73px 0 50px 0;padding:0 0 0 0;border-radius:3px;border:1px solid #222;text-align:center;background:#000;}/*fiche projet */ /* Animation défilement texte logo ou info projet */ .fiche-sidebar-defile span i {font-style: normal;margin-right:50px;text-transform:uppercase;line-height:25px;padding:4px 4px 2px 4px;color:#777777;} /* style pour les fiches projet qui ne sont pas des liens A*/ .fiche-sidebar-defile span u {text-decoration:none;color:#FFF;} /* style pour les fiches projet qui ne sont pas des liens A*/ .fiche-signature-projet {height:40px;width:499px;margin:25px 0 0 -1px;padding:0 0 0 0;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:12px;letter-spacing :1px;text-align: left;font-style:normal;font-weight:normal;color:#777777;} /* Zone rebond inférieure fiche projet */ .fiche-projet-rebond {display:block;float:left;height:600px;width:699px;margin:128px 0 25px 200px;padding: 0 0 4px 0;} .fiche-projet-rebond h4 {display:block;float:left;height:50px;width:499px;margin:0 0 0 0;padding: 0 0 4px 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:24px;letter-spacing :2px;text-align: left;font-weight:normal;color:#FFF;} /* Particules logo */ #particle-canvas {transform: rotate(180deg);position:absolute;left:0;/*33%*/top:525px;width: 100%;height: 400px;vertical-align: middle;z-index:0;overflow-x: hidden;overflow-y: hidden;} /* Titre et bloc des expertises IAFACTORY dans fiche noire studio IAFCTORY - partie basse */ .titre-expertise-page-studio {clear:both;height:50px;margin:0 0 0 0;padding: 0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:24px;letter-spacing :2px;text-align:center;font-weight:normal;color:#FFF;} .boite-liste-1-noir:hover, .boite-liste-2-noir:hover, .boite-liste-3-noir:hover {cursor:pointer;border:1px solid #666;} .boite-liste-1-noir:hover .liste-intertitre-noir-iaf, .boite-liste-2-noir:hover .liste-intertitre-noir-iaf, .boite-liste-3-noir:hover .liste-intertitre-noir-iaf {padding:6px 6px 6px 6px;background-color:#FFF;color:#000 !important;transition: background-color 0.3s ease, color 0.3s ease;} /* FICHE BRIEFING NOIRE STEP 1 : choix de l'intervention ================================================================================================== */ /* >> Conteneur conteu 1500PX + PADDING 100PX */ .conteneur-contenu-noir-briefing {z-index:-30;height:auto;width: 1501px;padding:0 50px 0 50px;margin: auto;background-color:#000;background-image:/* englobe le site dans la limite de 1500 px et permet de gérer la répétition interne de l'arrière plan */ repeating-linear-gradient(to right, #151515 0, #151515 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, #151515 0, #151515 1px, transparent 1px, transparent 50px),/* Lignes de 50px */ repeating-linear-gradient(to right, #111 0, #111 1px, transparent 1px, transparent 25px), repeating-linear-gradient(to bottom, #111 0, #111 1px, transparent 1px, transparent 25px),/* Lignes de 25px */ repeating-linear-gradient(to right, #111 0, #111 1px, transparent 1px, transparent 5px), repeating-linear-gradient(to bottom, #000 0, #000 1px, transparent 1px, transparent 5px);}/* Lignes de 5px */ .briefing-titre {height:50px;width:100%;margin:50px 0 -20px 0;padding: 0 0 0 50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:28px;letter-spacing : 2px;text-align: left;font-weight:normal;color:#FFF;} /* bouton briefing en bg gris mais non cliquable */ .briefing-bouton-actif {position:absolute;z-index:5;float:left;display:block;margin:50px 0 0 361px;padding:63px 53px 11px 0;height:75px;width:235px;border:1px solid transparent;font-size:40px;letter-spacing : 4px;line-height:40px;font-family: 'typobriquete', "Trebuchet MS", Helvetica, sans-serif;color:rgba(255, 255, 255, 0.2);} .corps-fiche-briefing-box {width:1501px;margin:0 0 0 0;} /* >> Progress bar fond noir */ .fil-ariane-briefing {clear:both;float:left;height: 25px;margin:-20px 0 0 0;padding: 0 0 0 0;text-transform:uppercase;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing : 1px;text-align: left;font-weight:normal;} .fil-ariane-briefing ul {display:block;padding:0 0 0 42px;} .fil-ariane-briefing ul li {display:inline;margin:0 0 0 0;padding:20px 19px 0 8px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;color:rgba(119, 119, 119, 0.7);} .fil-ariane-briefing ul li a {margin:0 0 0 0;font-size:14px;letter-spacing : 1px;text-align: left;font-weight:normal;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;color:#FFF;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .fil-ariane-briefing ul li a:hover {background:#FFF;color:#000;padding:6px;} .fil-ariane-briefing h1 {display:inline;margin:0 0 0 0;padding:20px 67px 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing : 1px;text-align: left;font-weight:normal;color:#FFF;} .fil-ariane-briefing ul li.briefing-actif-titre {margin:0 0 0 0;} /*titre progress bar briefing*/ .fil-ariane-briefing ul li.briefing-actif-item {background-image:url(../img/ico/ico-devis-progress-bar-actif-vert.png);background-repeat:no-repeat;background-position:8px 0px;color:#FFF;font-weight:normal} /*item actif progress bar briefing*/ /* Choix des options de briefing */ ul.briefing-option {display:block;width:601px;margin:23px 0 -50px 0;padding:0 0 0 0;border-top:1px solid #2B2B2B;} ul.briefing-option li {} ul.briefing-option li a {z-index: 2;position: relative/*pour intégrer le texte au rollover*/;display:block;height:49px;width:601px;margin:-1px 0 0 0;padding:0 0 0 0;border-top:1px solid transparent;border-bottom:1px solid #222;line-height:50px;letter-spacing:2px;text-transform:uppercase;text-align:left;font-size:14px;color:#FFF;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;} ul.briefing-option li a:hover { color: #477C3F;border-top: 1px solid transparent;border-bottom: 1px solid transparent;border-image: linear-gradient(to right, #477C3F, #050505);border-image-slice: 1;} /* texte qui s'affiche au rollover */ ul.briefing-option li a .briefing-option-detail {opacity:0;visibility: hidden;position: absolute;top:0;right:0;margin:-1px 0 0 0;padding:0 0 0 25px;font-size: 12px;letter-spacing:1px;text-transform:lowercase;background-image:url(../img/ico/ico-devis-item-option-actif-vert.png);background-repeat:no-repeat;background-position:0 21px;color:#477C3F;} ul.briefing-option li a:hover .briefing-option-detail {opacity:1;visibility: visible;display: block;color:#477C3F;transition: opacity 0.3s ease} /* background qui s'affiche au rollover */ .briefing-option_bg {margin:401px 0 0 751px;width: 749px;height: 349px;background-size: cover;background-position: center;opacity: 0;pointer-events: none;transition: opacity 0.5s ease;} /* affichage d'une image de background au rollover sur image */ /* apparition progressive du background avec action spécifique sur certaines classes */ .corps-fiche-briefing-box {position:relative;}/* indispensable pour que les bg absolus se superposent */ .briefing-option_bg {z-index: 0;position: absolute;} .briefing-option_bg.bg2 {z-index: 1; } .fil-ariane-briefing ul li a {position: relative;z-index: 2;border-bottom:1px solid #487E3F;color:#487E3F} /* liens au-dessus du background */ /* particules */ #particle-canvas-briefing {pointer-events:none;opacity:0.25;float:right;transform: rotate(0deg);position:relative;margin:-25px -50px 0 0;width: 850px;height: 300px;z-index:0;overflow-x: hidden;overflow-y: hidden;} /* Position email et contact spécifique pages BRIEF - CONTACT - NEWSLETTER */ .fiche-noire-contact-box {display:block;float:left;width:751px;height:108px;margin:-17px 0 0 198px;padding:0 0 0 0;} .fiche-noire-contact-tag0 {display:none;float:left;height:25px;width:299px;margin:0 0 65px 0;padding: 0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing :2px;text-align: left;font-weight:normal;color:#477C3F;} .fiche-noire-contact-tag1 {display:block;float:left;height:25px;width:299px;margin:0 0 65px 0;padding: 0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing :2px;text-align: left;font-weight:normal;color:#477C3F;} .fiche-noire-contact-tag2 {display:block;float:left;height:25px;width:299px;;margin:0 0 0 2px;padding: 0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing :2px;text-align: left;font-weight:normal;color:#477C3F;} .couleur-contact-tag {color:#DFDFDF;} /* Résumé et texte synthétique bas de page */ .resume-briefing-titre {display:block;margin:83px 0 0 0;width:650px;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:1px;color:#777777;} .resume-briefing-texte {display:block;margin:25px 0 0 0;height:117px;padding:0 900px 0 0;width:550px;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:1px;color:#777777;} /* FICHE BRIEFING NOIRE STEP 2 : formulaire ================================================================================================== */ #feedback {display:block;position:absolute;margin:-10px 0 0 50px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:10px;letter-spacing : 1px;text-align: left;font-weight:normal;color:#487E3F;opacity:1.0;} /*affichage de l'option sélectionnée dans la page précédente via JS */ .formulaire-champs-requis {position:absolute;width:550px;margin:35px 0 3px 49px;padding:0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:12px;letter-spacing : 1px;text-align: left;font-weight:normal;color:#487E3F;opacity:1.0;} .briefing-formulaire {width: 1500px;display: grid;} .formulaire-partie-1 {display:block;float:left;margin:73px 0 0 0;width:600px;height:584px;} /*partie de champs alignés dans un bloc à gauche */ .formulaire-partie-2 {display:block;float:left;margin:21px 0 0 0;width:600px;height:350px;} /*partie de champs alignés dans un bloc à droite */ /* champs normal */ .field {position: relative;display: grid;} .field input {z-index: 0;grid-area: 1 / 1;position: relative;height:50px;width:550px;margin:0 0 49px 0;padding:0 0 0 0;border-bottom:1px solid rgba(71, 124, 63, 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;} .field input:focus {border-color:#FFF;opacity:0.5;} /* Label flottant */ .field 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: #DADADA;} .field input:focus ~ span, .field input:not(:placeholder-shown) ~ span, .field textarea:focus ~ span, .field textarea:not(:placeholder-shown) ~ span {transform: translateY(-24px);font-size: 9px;color: #FFF;}/* Animation du label */ /* bouton */ .briefing-bouton-envoyer {position:absolute;display:block;cursor:pointer;height:50px;width:200px;margin:-100px 0 0 200px;line-height:50px;border-radius:1px;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;} .briefing-bouton-envoyer:hover {border:none;outline:none;background:#FFF;color:#000;} /* champs texte besoin */ .field textarea {z-index: 0;grid-area: 1 / 1;position: relative;resize: vertical;height:233px;width:550px;margin:0 0 49px 0;padding:17px 0 0 0;border-bottom:1px solid rgba(71, 124, 63, 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;} .field textarea:focus {border-color:#FFF;} .field textarea:focus ~ span, .field textarea:focus:not(:placeholder-shown) ~ span, .field textarea:focus ~ span, .field textarea:not(:placeholder-shown) ~ span {transform: translateY(-24px);font-size: 9px;color: #FFF;}/* Animation du label */ /* contrôle des champs et feedback */ /* Icône ✓ / ✗ pour field*/ .field.ok .status {margin:-23px 0 0 0;color: #4CAF50 !important;opacity: 1 !important;}/* icône vert OK */ .field .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;} .field.ok input, .field.ok textarea {border-bottom-color: #4CAF50;color: #4CAF50;} /* champ valide en vert */ .field.invalid input, .field.invalid textarea {border-bottom-color: #FF7C80;color: #FF7C80;} /* champ invalide en rouge */ .field.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 */ .field input:focus ~ .status, .field textarea:focus ~ .status {margin:-23px 0 0 0;} /* Icône ✓ / ✗ pour textarea */ .field.ok textarea .status {color: #4CAF50;opacity: 1;}/* icône vert OK */ .field textarea .status {color: inherit;} /* évite d'hériter d'une couleur blanche*/ .field textarea ~ .status {top:16px;transform: none;} .char-counter {width:125px;margin:-73px 50px 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:9px;letter-spacing : 1px;text-align:left;font-weight:normal;color: #FFF;opacity:0.75;} /* alignement bas du formulaire pour intégrer captcha */ .champstel {display:block;float:none;margin:0 0 0 0;} .champsmath {display:block;float:none;margin:0 0 0 0;} .engagement-iaf-position-mobile {clear:both;display:block;margin:0 0 0 50px;padding:0 0 0 0;} .engagement-nl-position-mobile {clear:both;display:block;margin:-50px 0 0 0;padding:0 0 0 0;} /* FICHE BRIEFING NOIRE STEP 3 : confirmation ================================================================================================== */ nav.navfichenoire-confirmation {float:left;display:block;margin:50px 0 0 0;padding:63px 53px 11px 61px;height:75px;width:35px;border:1px solid transparent;background-image:url(../img/ico/ico-confirmation-envoi-vert.png);background-repeat:no-repeat;background-position:48px 75px;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .briefing-confirmation {display:block;margin:57px 0 0 0;height:193px;width:500px;} /* FICHE NEWSLETTER ================================================================================================== */ a.lien-exemple-nl {color:#FFF;border-bottom:1px dotted #FFF;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} a.lien-exemple-nl:hover {color:#000;background:#FFF;padding:6px;} .background-newsletter {float:left;width:750px;height:400px;margin:-47px 0 0 152px;background-image:url(../img/bg/bg-briefing-hover7.png);background-repeat:no-repeat;background-position:0 0;} /* >> Scroll vers le haut de page */ #scrolliaf {z-index: 1000;display: flex;position: fixed;bottom:0;right: 0;width: 51px;height: 51px;border:1px solid #FFF;outline:none;background-color: #FFF;background-image:url(../img/ico/ico-chevron-replier-noir.png);background-repeat: no-repeat;background-position:center center;cursor: pointer;opacity: 0;visibility: hidden;transition: opacity 0.5s ease;justify-content: center;align-items: center;color: white;user-select: none;} #scrolliaf.visible {opacity: 1;visibility: visible;} /* ==================================================================== */ /* °°° @MEDIAQUERIES - opti position header, briefing, logo */ /* ==================================================================== */ @media screen and (min-width: 1600px) and (max-width: 1795px) { .logo-iafactory-noir {top:0;height:176px;width:952px;margin:0 0 0 750px;padding:34px 0 0 0;font-size:132px;letter-spacing : 13px;-webkit-text-stroke: 4px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;} /* background stris logo */ .logo-iafactory-noir::before {background-image: url(../img/bg/bg-logo-iafactory-mediaquery1b.png);background-repeat: no-repeat;background-position:4px 56px;} .logo-iafactory-noir:hover {margin:0 0 0 734px;padding:34px 0 0 0;-webkit-text-stroke: 3px #FFF;text-shadow:-1px -1px 0 #FFF,1px -1px 0 #FFF,-1px 1px 0 #FFF,1px 1px 0 #FFF;} .logo-iafactory-noir-box {top:0;height:173px;width:1500px;margin:0 0 0 852px;padding:26px 0 0 0;-webkit-transform:skew(23deg);-moz-transform:skew(23deg);-o-transform:skew(23deg);} .logo-iafactory-special-box {top:0;height:173px;width:1500px;margin:0 0 0 852px;padding:26px 0 0 0;-webkit-transform:skew(23deg);-moz-transform:skew(23deg);-o-transform:skew(23deg);} .bouton-briefer-noir {margin:50px 0 0 250px;padding:63px 53px 11px 61px;height:75px;width:235px;border:1px solid transparent;font-size:40px;letter-spacing : 4px;line-height:40px;background-image:url(../img/bg/bg-bouton-long-bas-gauche-blanc.png);background-position:-1px 99px;} .bouton-briefer-noir-animation {margin:50px 0 0 250px;height:151px;width:351px;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);} .baseline-iafactory-noir {float:left;display:block;margin:184px 0 0 549px;padding:0 0 0 0;text-transform:lowercase;line-height:25px;font-size:14px;} .fiche-content-box {width:751px;height:408px;margin:-17px 0 0 148px;padding:0 0 0 0;} .fiche-projet-box {width:751px;height:408px;margin:-17px 0 0 148px;padding:0 0 0 0;} .service-rebond {height:700px;width:699px;margin:128px 0 25px 150px;padding: 0 0 4px 0;} .fiche-projet-rebond {height:700px;width:699px;margin:128px 0 25px 150px;padding: 0 0 4px 0;} .fiche-action-briefer {margin:3px 0 0 150px;padding:23px 0 29px 48px;height:49px;width:301px;border:1px solid transparent;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:292px 42px, 99px -1px;} svg {margin:-122px 0 0 648px;} .briefing-bouton-actif {margin:50px 0 0 244px;padding:63px 53px 11px 0;height:75px;width:235px;border:1px solid transparent;font-size:40px;letter-spacing : 4px;line-height:40px;} .fiche-noire-contact-box {width:751px;height:108px;margin:-17px 0 0 148px;padding:0 0 0 0;} } @media screen and (min-width: 1065px) and (max-width: 1600px) { .logo-iafactory-noir {top:63px;height:86px;width:952px;margin:0 0 0 496px;padding:24px 0 0 0;font-size:72px;letter-spacing :10px;-webkit-text-stroke: 2px #000;} /* background stris logo */ .logo-iafactory-noir::before {background-image: url(../img/bg/bg-logo-iafactory-mediaquery2a.png);background-repeat: no-repeat;background-position:1px 36px;} .logo-iafactory-noir:hover {margin:0 0 0 488px;padding:24px 0 0 0;-webkit-text-stroke: 2px #FFF;} .logo-iafactory-noir-box {top:0;height:173px;width:1500px;margin:-50px 0 0 545px;padding:26px 0 0 0;} .logo-iafactory-special-box {top:0;height:173px;width:1500px;margin:-50px 0 0 545px;padding:26px 0 0 0;} .bouton-briefer-noir {margin:50px 0 0 150px;padding:67px 53px 11px 29px;height:71px;width:167px;font-size:30px;letter-spacing : 4px;line-height:40px;background-image:url(../img/bg/bg-bouton-long-bas-gauche-noir.png);background-position:-1px 99px;} .bouton-briefer-noir-animation {margin:50px 0 0 150px;height:151px;width:251px;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.0);} .bouton-briefer-noir-animation:hover {} .bouton-briefer-noir-animation::before, .bouton-briefer-noir-animation::after {top: 0;left: 0;right: 0;bottom: 0;content: "";box-shadow: inset 0 0 0 1px;} .bouton-briefer-noir-animation::before {} @keyframes clipMe {0%, 100% { clip: rect(0, 251px, 1px, 0); } 25% { clip: rect(0, 251px, 151px, 250px); } 50% { clip: rect(150px, 251px, 151px, 0); } 75% { clip: rect(0, 1px, 151px, 0);}} .baseline-iafactory-noir {margin:184px 0 0 299px;padding:0 0 0 0;line-height:25px;font-size:12px;} .fiche-content-box {width:751px;height:408px;margin:63px 0 0 48px;padding:0 0 0 0;} .fiche-projet-box {width:751px;height:408px;margin:63px 0 0 48px;padding:0 0 0 0;} .service-rebond {height:700px;width:699px;margin:128px 0 25px 50px;padding: 0 0 4px 0;} .fiche-projet-rebond {height:700px;width:699px;margin:128px 0 25px 50px;padding: 0 0 4px 0;} .fiche-action-briefer {margin:3px 0 0 50px;padding:23px 0 29px 48px;height:49px;width:301px;border:1px solid transparent;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:292px 42px, 99px -1px;} svg {font: 20px 'typoarchia';letter-spacing:6px;height:70px;width:399px;margin:-122px 0 0 398px;opacity:75%;} .briefing-bouton-actif {margin:54px 0 0 179px;padding:63px 53px 11px 0;height:75px;width:235px;border:1px solid transparent;font-size:30px;letter-spacing : 4px;line-height:40px;} } @media screen and (min-width: 875px) and (max-width: 1065px) { /* >> Logo */ .logo-iafactory-noir {top:63px;height:86px;width:952px;margin:0 0 0 448px;padding:33px 0 0 0;font-size:60px;letter-spacing : 10px;-webkit-text-stroke: 2px #000;} /* background stris logo */ .logo-iafactory-noir::before {background-image: url(../img/bg/bg-logo-iafactory-mediaquery2b.png);background-repeat: no-repeat;background-position:1px 41px;} .logo-iafactory-noir:hover {margin:0 0 0 440px;padding:33px 0 0 0;-webkit-text-stroke: 2px #FFF;} .logo-iafactory-noir-box {top:0;height:173px;width:1500px;margin:-50px 0 0 487px;padding:26px 0 0 0;} .logo-iafactory-special-box {top:0;height:173px;width:1500px;margin:-50px 0 0 487px;padding:26px 0 0 0;} .scramble-logo {} /* classe spécifique pour toucher le logo avec effet scramble */ .scramble-logo-noir {} /* classe spécifique pour toucher le logo avec effet scramble dans les fiches noires */ .logo-aos-fx {}/*hack pour faire fonctionner l'animaton aos du logo sans dénaturer l'effet scramble*/ .bouton-briefer-noir {margin:50px 0 0 150px;padding:67px 43px 11px 29px;height:71px;width:127px;font-size:25px;letter-spacing : 2px;line-height:40px;background-image:url(../img/bg/bg-bouton-long-bas-gauche-noir.png);background-position:-1px 99px;} .bouton-briefer-noir:hover {background-position:-1px 99px;} .bouton-briefer-noir-animation {margin:50px 0 0 150px;height:151px;width:151px;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.0);} .bouton-briefer-noir-animation:hover {} .bouton-briefer-noir-animation::before, .bouton-briefer-noir-animation::after {top: 0;left: 0;right: 0;bottom: 0;content: "";box-shadow: inset 0 0 0 1px;} .bouton-briefer-noir-animation::before {} @keyframes clipMe {0%, 100% { clip: rect(0, 201px, 1px, 0); } 25% { clip: rect(0, 201px, 151px, 200px); } 50% { clip: rect(150px, 201px, 151px, 0); } 75% { clip: rect(0, 1px, 151px, 0);}} .baseline-iafactory-noir {margin:184px 0 0 249px;padding:0 0 0 0;line-height:25px;font-size:12px;} .fiche-content-box {width:751px;height:408px;margin:63px 0 0 48px;padding:0 0 0 0;} .fiche-projet-box {width:751px;height:408px;margin:63px 0 0 48px;padding:0 0 0 0;} .service-rebond {height:700px;width:699px;margin:128px 0 25px 50px;padding: 0 0 4px 0;} .fiche-projet-rebond {height:700px;width:699px;margin:128px 0 25px 50px;padding: 0 0 4px 0;} .fiche-action-briefer {margin:3px 0 0 50px;padding:23px 0 29px 48px;height:49px;width:301px;border:1px solid transparent;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:292px 42px, 99px -1px;} svg {font: 20px 'typoarchia';letter-spacing:6px;height:70px;width:399px;margin:-122px 0 0 348px;opacity:75%;} .briefing-bouton-actif {margin:54px 0 0 179px;padding:63px 43px 11px 0;height:75px;width:235px;border:1px solid transparent;font-size:25px;letter-spacing : 2px;line-height:40px;} } /* ==================================================================== */ /* °°° @MEDIAQUERIES */ /* °°° 875px */ /* ==================================================================== */ @media screen and (min-width: 875px) and (max-width: 1600px) { /* >> Liens */ a {} a:hover {} /* 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 */ body.fiche-noire {} /*fond noir en option en cas de bug de grille - affichera un fond noir vs. un fond blanc par défaut du body héritée de la css structure */ .gabarit-fiche-prestation {height:2150px;} /*hauteur > fiche noire prestation de service */ .gabarit-fiche-projet {height:2200px;} /*hauteur > fiche projet portfolio */ .gabarit-fiche-iafactory {height:2050px;} /*hauteur > fiche noire présentation iafactory */ .gabarit-fiche-iafactory-avec-expertise {height:6050px;} /*hauteur > fiche noire présentation iafactory avec expertises dans la partie basse*/ .gabarit-fiche-briefing-step1 {height:1150px;} /*hauteur > fiche briefing step1 : choix presta */ .gabarit-fiche-briefing-step2 {height:1750px;} /*hauteur > fiche briefing step2 : formulaire */ .gabarit-fiche-briefing-step3 {height:1250px;} /*hauteur > fiche briefing step3 : confirmation */ .gabarit-fiche-contact-step1 {height:1750px;} /*hauteur > fiche contact step1 : formulaire */ .gabarit-fiche-contact-step2 {height:1250px;} /*hauteur > fiche contact step 2 : confirmation */ .gabarit-fiche-newsletter {height:1050px;} /*hauteur > fiche newsletter */ /* Faux curseur texte : permet d'ajouter un texte devant et derrière le faux curseur "back" ou "brief"*/ #custom-cursor {font-size: 14px;font-weight: bold;padding: 6px 6px 6px 6px;border-radius: 4px;} #custom-cursor.hidden {}/* Masquer le curseur texte au contact des éléments cliquables */ /* Curseur trainée pixel */ .pixel {width:5px;height:5px;} @keyframes trail {0% {opacity: 1;transform: scale(1);} 100% {opacity: 0;transform: scale(0);}} /* GRILLE NOIRE ================================================================================================== */ /* >> Conteneur grille 100 % */ .grille-meta-noir {}/*permet de gérer l'arrière plan du site avec la répétition des lignes horizontales */ /* >> Conteneur grille repères */ .grille-reperes-noir {width: 850px;}/*permet de gérer la répétition des repères */ /* >> Conteneur conteu 1500PX + PADDING 100PX */ .conteneur-contenu-noir {width: 751px;padding:0 50px 0 50px;}/* englobe le site dans la limite de 1500 px et permet de gérer la répétition interne de l'arrière plan */ /* lOGO ================================================================================================== */ /* voir alignement mediaqueries spécifique header */ /* HEADER FOND NOIR ================================================================================================== */ header {height:276px;} /* >> Navigation fond noir */ nav.navfichenoire {margin:50px 0 0 0;padding:63px 53px 11px 61px;height:75px;width:35px;border:1px solid transparent; background-image:url(../img/ico/ico-menu-retour-blanc.png), url(../img/bg/bg-bouton-court-haut-droite-blanc.png);background-position:43px 60px, 99px -1px;} nav.navfichenoire:hover {border:1px solid transparent;background-position:33px 60px, 99px -1px;} /* >> Briefer fond noir */ /* voir alignement mediaqueries spécifique header */ /* >> Baseline fond noir */ /* voir alignement mediaqueries spécifique header */ /* >> Ariane fond noir */ .fil-ariane-noir {height: 25px;margin:-18px 0 0 0;padding: 0 0 0 0;font-size:12px;letter-spacing : 1px;} .fil-ariane-noir ul {padding:0 0 0 42px;} .fil-ariane-noir ul li {margin:0 0 0 0;padding:0 21px 0 8px;background-image:url(../img/ico/ico-chevron-ariane.png);background-position:right 4px;} .fil-ariane-noir ul li a {font-size:12px;letter-spacing : 1px;} .fil-ariane-noir ul li a:hover {padding:6px;} .fil-ariane-noir ul li.arianelast {background-image:none;} .fil-ariane-noir .nochevron {background-image:none;display:none;}/*dernier item pas visible sur petite résolution car il y a le titre*/ /* STRUCTURE ================================================================================================== */ .corps-fiche-box {width:751px;margin:0 0 0 0;} /* Colonne gauche */ .fiche-sidebar-box {height:349px;width:700px;margin:21px 0 0 0;padding:0 0 0 50px;} /* Visuel fiche service */ .fiche-sidebar-visuel-blanc {height:249px;width:649px;margin:23px 0 0 0;padding:0 0 0 0;border-radius:3px;} .fiche-sidebar-visuel-noir {height:249px;width:649px;margin:23px 0 0 0;padding:0 0 0 0;border-radius:3px;} /* Visuel fiche service - sticky */ .fiche-sidebar-visuel-projet-blanc, .fiche-sidebar-visuel-projet-noir, .fiche-sidebar-visuel-blanc, .fiche-sidebar-visuel-noir {} /* Animation défilement texte logo ou info projet */ .fiche-sidebar-tagleftbottom1 {height:40px;width:499px;margin:38px 0 0 -1px;padding: 0 0 0 0;font-size:14px;letter-spacing :2px;} .fiche-sidebar-defile {height:50px;margin:-45px 0 0 129px;padding: 0 0 0 0;width: 520px;font-size:14px;letter-spacing :2px;} .fiche-sidebar-defile span {} .fiche-sidebar-defile span a {margin-right:50px;line-height:25px;padding:4px 4px 2px 4px;} .fiche-sidebar-defile span a:hover {} .fiche-sidebar-defile:hover span {} @keyframes defile {0% {transform: translateX(0); /* position initiale à droite */}100% {transform: translateX(-100%); /* défile jusqu’à gauche */}} /* Contenus corps -texte */ /* .fiche-content-box - voir alignement mediaqueries spécifique header */ /* Titre */ .fiche-contenu-tagrightup1 {height:25px;width:349px;margin:0 0 15px 0;padding: 0 0 0 0;font-size:14px;letter-spacing :2px;} .fiche-contenu-tagrightup2 {height:25px;width:349px;;margin:0 0 0 2px;padding: 0 0 0 0;font-size:14px;letter-spacing :2px;} .fiche-contenu-tagrightup3 {height:25px;width:599px;margin:0 0 65px 0;padding: 0 0 0 0;font-size:14px;letter-spacing :2px;} .fiche-contenu-tagrightup3 a {} .fiche-contenu-tagrightup3 a:hover {} /* Texte */ .fiche-contenu-texte {width:652px;margin:45px 0 0 1px;padding:0 0 0 0;} .fiche-contenu-texte h3 {height:50px;width:599px;margin:92px 0 0 0;padding: 0 0 4px 0;font-size:22px;letter-spacing :2px;} .fiche-contenu-texte p {padding:0 0 0 0;line-height:25px;font-size:14px;letter-spacing:1px;} .fiche-contenu-texte strong {} .fiche-contenu-texte em {} .fiche-contenu-texte ul {margin:25px 0 0 0;padding:0 0 0 0;line-height:25px;font-size:13px;letter-spacing:1px;} .fiche-contenu-texte ul li {margin:0 0 0 0;padding:0 0 0 0;} .fiche-contenu-texte ul li a {} .fiche-contenu-texte ul li a:hover {} .fiche-contenu-texte a {} .fiche-contenu-texte a:hover {padding:3px 0 0 0;} .infobulle {margin:0 0 0 7px;} .infobulle .infobulle-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:hover .infobulle-text {} .infobulle-icon {width:15px;height:15px;margin:-3px 0 0 0;padding:1px 0 0 1px;line-height:18px;border-radius:50%;font-size:14px;} /* Bouton d'action briefer iafactory */ /* .fiche-action-briefer - voir alignement mediaqueries spécifique header */ .fiche-action-briefer:hover {background-position:302px 42px, 99px -1px;} /* Animation bouton d'action */ .fiche-action-briefer {} .fiche-action-briefer::after {} /* Masque pour n’afficher que le contour */ @keyframes lightMove {0% { background-position: 200% 0; }100% { background-position: -200% 0; }} /* Rebond prestation */ /* .service-rebond - voir alignement mediaqueries spécifique header */ .service-rebond h4 {height:50px;width:499px;margin:0 0 0 0;padding: 0 0 4px 0;font-size:22px;letter-spacing :2px;text-align: left;} /* service complémentaire boîte */ .rebond-service-1 {width:649px;height:199px;margin:15px 0 80px 0;padding:0 0 0 0;} .rebond-service-1 .service-lien {} .rebond-service-1:hover {} .rebond-service-1:hover .service-lien {padding:6px 6px 6px 6px;} .service-lien {margin:32px 150px 0 44px;padding:6px 6px 6px 6px;font-size:14px;letter-spacing:2px;} .service-description {width:300px;margin:28px 0 0 0;padding:0 0 0 50px;line-height:18px;font-size:13px;letter-spacing:1px;} .service-vignette {height:154px;width:250px;margin:-35px 0 0 25px;padding:0 0 0 0;} .service-vignette img {height:154px;width:250px;margin:0 0 0 0;padding:0 0 0 0;} /* expertise complémentaire boîte */ .service-expertise-1 {width:649px;height:199px;margin:15px 0 79px 0;padding:0 0 0 0;} .service-expertise-1 .service-expertise-lien, .service-expertise-2 .service-expertise-lien {-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .service-expertise-1:hover, .service-expertise-2:hover {cursor:pointer;border:1px solid #222;} .service-expertise-1:hover .service-expertise-lien, .service-expertise-2:hover .service-expertise-lien {padding:6px 6px 6px 6px;background-color:#FFF;color:#000;} .service-expertise-lien {margin:32px 150px 0 44px;padding:6px 6px 6px 6px;font-size:14px;letter-spacing:2px;} .service-expertise-description {width:300px;margin:28px 0 0 0;padding:0 0 0 50px;line-height:18px;font-size:13px;letter-spacing:1px;} .service-expertise-description-big {width:300px;margin:44px 0 0 0;padding:0 0 0 50px;line-height:18px;font-size:30px;letter-spacing:1px;} .service-expertise-vignette {height:154px;width:250px;margin:-35px 0 0 25px;padding:0 0 0 0;} .service-expertise-vignette img {height:154px;width:250px;margin:0 0 0 0;padding:0 0 0 0;} /* FICHE PROJET NOIRE - SPECIFIQUE ================================================================================================== */ /* Animation Nom marque */ /* svg - voir alignement mediaqueries spécifique header */ .text-copy {stroke-dasharray: 6% 29%;stroke-width: 1.5px/*2px plus fin*/;stroke-dashoffset: 0%;} .text-copy:nth-child(1){} .text-copy:nth-child(2){} .text-copy:nth-child(3){} .text-copy:nth-child(4){} .text-copy:nth-child(5){} @keyframes stroke-offset{ 100% {stroke-dashoffset: -35%;} } /* Contenus corps -texte */ /* .fiche-projet-box - voir alignement mediaqueries spécifique header */ .projet-titre {height:50px;width:100%;margin:52px 0 -22px 0;padding: 0 0 0 50px;font-size:26px;letter-spacing : 3px;} /* Visuel fiche projet */ .fiche-sidebar-visuel-projet-blanc {height:249px;width:649px;margin:23px 0 0 0;padding:0 0 0 0;border-radius:3px;}/*fiche projet */ .fiche-sidebar-visuel-projet-noir {height:249px;width:649px;margin:23px 0 0 0;padding:0 0 0 0;border-radius:3px;}/*fiche projet */ /* Animation défilement texte logo ou info projet */ .fiche-sidebar-defile span i {margin-right:50px;line-height:25px;padding:4px 4px 2px 4px;} /* style pour les fiches projet qui ne sont pas des liens A*/ .fiche-sidebar-defile span u {} /* style pour les fiches projet qui ne sont pas des liens A*/ .fiche-signature-projet {height:40px;width:499px;margin:25px 0 0 -1px;padding:0 0 0 0;line-height:25px;font-size:12px;letter-spacing :1px;} /* Zone rebond inférieure fiche projet */ /* .fiche-projet-rebond - voir alignement mediaqueries spécifique header */ .fiche-projet-rebond h4 {height:50px;width:499px;margin:0 0 0 0;padding: 0 0 4px 0;font-size:22px;letter-spacing :2px;} /* Particules logo */ #particle-canvas {left:0;/*33%*/top:525px;width: 100%;height: 400px;} /* Titre des expertises IAFACTORY dans fiche noire studio IAFCTORY - partie basse */ .titre-expertise-page-studio {height:48px;margin:0 0 0 0;padding: 80px 0 0 50px;font-size:22px;letter-spacing :2px;text-align:left;} /* Correctif spécifique mobile affichage AOS */ .fiche-contenu-texte[data-aos="fade-up"] {transform: none !important;} .fiche-action-briefer[data-aos="fade-up"] {transform: none !important;} /* FICHE BRIEFING NOIRE STEP 1 : choix de l'intervention ================================================================================================== */ /* >> Conteneur conteu */ .conteneur-contenu-noir-briefing {width: 751px;padding:0 50px 0 50px;}/* englobe le site dans la limite de 1500 px et permet de gérer la répétition interne de l'arrière plan */ .briefing-titre {height:50px;width:100%;margin:50px 0 -20px 0;padding: 0 0 0 50px;font-size:26px;letter-spacing : 2px;} /* bouton briefing en bg gris mais non cliquable */ /* .briefing-bouton-actif - voir alignement mediaqueries spécifique header */ .corps-fiche-briefing-box {width:751px;margin:0 0 0 0;} /* >> Progress bar fond noir */ .fil-ariane-briefing {height: 25px;margin:-20px 0 0 0;padding: 0 0 0 0;font-size:14px;letter-spacing : 1px;} .fil-ariane-briefing ul {padding:0 0 0 42px;} .fil-ariane-briefing ul li {margin:0 0 0 0;padding:20px 25px 0 8px;} .fil-ariane-briefing ul li a {font-size:14px;letter-spacing : 1px;} .fil-ariane-briefing ul li a:hover {padding:6px;} .fil-ariane-briefing h1 {margin:0 0 0 0;padding:20px 10px 0 0;font-size:14px;letter-spacing : 1px;} .fil-ariane-briefing ul li.briefing-actif-titre {margin:0 0 0 0;} /*titre progress bar briefing*/ .fil-ariane-briefing ul li.briefing-actif-item {background-image:url(../img/ico/ico-devis-progress-bar-actif-vert.png);background-position:8px 0px;} /*item actif progress bar briefing*/ /* Choix des options de briefing */ ul.briefing-option {width:651px;margin:23px 0 -50px 0;padding:0 0 0 0;} ul.briefing-option li {} ul.briefing-option li a {height:49px;width:651px;margin:-1px 0 0 0;padding:0 0 0 0;line-height:50px;letter-spacing:2px;font-size:14px;} ul.briefing-option li a:hover {} /* texte qui s'affiche au rollover */ ul.briefing-option li a .briefing-option-detail {top:0;right:0;margin:-1px 0 0 0;padding:0 0 0 25px;font-size: 12px;letter-spacing:1px;background-image:url(../img/ico/ico-devis-item-option-actif-vert.png);background-position:0 21px;color:#477C3F;} ul.briefing-option li a:hover .briefing-option-detail {} /* background qui s'affiche au rollover */ .briefing-option_bg {margin:401px 0 0 251px;width: 749px;height: 349px;background-size: cover;background-position: center;} /* affichage d'une image de background au rollover sur image */ /* apparition progressive du background avec action spécifique sur certaines classes */ .corps-fiche-briefing-box {}/* indispensable pour que les bg absolus se superposent */ .briefing-option_bg {display:none;} /* désactive background au rollover */ .briefing-option_bg.bg2 {display:none;} /* désactive background au rollover */ .fil-ariane-briefing ul li a {} /* liens au-dessus du background */ /* particules */ #particle-canvas-briefing {position:absolute;margin:425px 0 0 -650px;width: 750px;height: 300px;} /* Résumé et texte synthétique bas de page */ .resume-briefing-titre {margin:83px 0 0 0;width:650px;line-height:25px;font-size:14px;letter-spacing:1px;} .resume-briefing-texte {margin:25px 0 0 0;height:117px;padding:0 0 0 0;width:550px;line-height:25px;font-size:14px;letter-spacing:1px;} /* Position email et contact spécifique pages BRIEF - CONTACT - NEWSLETTER */ .fiche-noire-contact-box {position:absolute;width:200px;height:108px;margin:-67px 0 0 551px;padding:0 0 0 0;} .fiche-noire-contact-tag0 {display:block;height:25px;width:200px;margin:0 0 0 0;padding: 0 0 0 0;font-size:13px;letter-spacing :1px;text-align:right;} .fiche-noire-contact-tag1 {height:25px;width:200px;margin:0 0 0 0;padding: 0 0 0 0;font-size:13px;letter-spacing :1px;text-align:right;} .fiche-noire-contact-tag2 {height:25px;width:200px;;margin:0 0 0 0;padding: 0 0 0 0;font-size:13px;letter-spacing :1px;text-align:right;} .couleur-contact-tag {} .optimise-contact-tag {display:none;}/* pas affiché sur mobile*/ /* FICHE BRIEFING NOIRE STEP 2 : formulaire ================================================================================================== */ #feedback {margin:-10px 0 0 50px;font-size:10px;letter-spacing : 1px;} /*affichage de l'option sélectionnée dans la page précédente via JS */ .formulaire-champs-requis {width:550px;margin:35px 0 3px 49px;padding:0 0 0 0;font-size:12px;letter-spacing : 1px;} .briefing-formulaire {width: 750px;} .formulaire-partie-1 {margin:73px 0 0 0;width:600px;height:584px;} /*partie de champs alignés dans un bloc à gauche */ .formulaire-partie-2 {margin:112px 0 0 0;width:600px;height:350px;} /*partie de champs alignés dans un bloc à droite */ /* champs normal */ .field {} .field input {height:50px;width:550px;margin:0 0 49px 0;padding:0 0 0 0;font-size:14px;letter-spacing : 1px;} .field input:focus {} /* Label flottant */ .field span {margin: 0 0 0 0;padding:17px 0 0 0;width: max-content;font-size: 14px;letter-spacing: 2px;} .field input:focus ~ span, .field input:not(:placeholder-shown) ~ span, .field textarea:focus ~ span, .field textarea:not(:placeholder-shown) ~ span {transform: translateY(-24px);font-size: 9px;color: #FFF;}/* Animation du label */ /* bouton */ .briefing-bouton-envoyer {height:50px;width:200px;margin:-100px 0 0 200px;line-height:50px;font-size:16px;letter-spacing : 2px;} .briefing-bouton-envoyer:hover {} /* champs texte besoin */ .field textarea {height:182px;width:550px;margin:0 0 49px 0;padding:17px 0 0 0;font-size:14px;letter-spacing : 1px;} .field textarea:focus {} .field textarea:focus ~ span, .field textarea:focus:not(:placeholder-shown) ~ span, .field textarea:focus ~ span, .field textarea:not(:placeholder-shown) ~ span {transform: translateY(-24px);font-size: 9px;color: #FFF;}/* Animation du label */ /* contrôle des champs et feedback */ /* Icône ✓ / ✗ pour field*/ .field.ok .status {margin:-23px 0 0 0;}/* icône vert OK */ .field .status {right: 50px;top: 50%;transform: translateY(-50%);font-size: 16px;line-height: 1;} .field.ok input, .field.ok textarea {} /* champ valide en vert */ .field.invalid input, .field.invalid textarea {} /* champ invalide en rouge */ .field.invalid .status {margin:-23px 0 0 0;font-size:9px;letter-spacing : 1px;} /* Icône rouge pour invalide */ .field input:focus ~ .status, .field textarea:focus ~ .status {margin:-23px 0 0 0;} /* Icône ✓ / ✗ pour textarea */ .field.ok textarea .status {}/* icône vert OK */ .field textarea .status {} /* évite d'hériter d'une couleur blanche*/ .field textarea ~ .status {top:16px;} .char-counter {width:125px;margin:-73px 50px 0 0;font-size:9px;letter-spacing : 1px;} /* alignement bas du formulaire pour intégrer captcha */ .champstel {margin:0 0 0 0;} .champsmath {margin:0 0 0 0;} .engagement-iaf-position-mobile {margin:0 0 0 50px;padding:155px 0 0 0;} .engagement-nl-position-mobile {margin:-50px 0 0 0;padding:0 0 0 0;} /* FICHE BRIEFING NOIRE STEP 3 : confirmation ================================================================================================== */ nav.navfichenoire-confirmation {margin:50px 0 0 0;padding:63px 53px 11px 61px;height:75px;width:35px;background-image:url(../img/ico/ico-confirmation-envoi-vert.png);background-position:48px 75px;} .briefing-confirmation {margin:57px 0 0 0;height:193px;width:500px;} /* FICHE NEWSLETTER ================================================================================================== */ a.lien-exemple-nl {} a.lien-exemple-nl:hover {padding:6px;} .background-newsletter {float:left;width:750px;height:400px;margin:-325px 0 0 321px;background-image:url(../img/bg/bg-briefing-hover7.png);background-size:64%;background-repeat:no-repeat;background-position:0 0;} } /* ==================================================================== */ /* °°° @MEDIAQUERIES */ /* °°° 300px - mobile mini */ /* ==================================================================== */ @media screen and (min-width:50px) and (max-width:874px){ /* >> Liens */ a {} a:hover {} /* 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 */ body.fiche-noire {} /*fond noir en option en cas de bug de grille - affichera un fond noir vs. un fond blanc par défaut du body héritée de la css structure */ .gabarit-fiche-prestation {height:2300px;} /*hauteur > fiche noire prestation de service */ .gabarit-fiche-projet {height:2100px;} /*hauteur > fiche projet portfolio */ .gabarit-fiche-iafactory {height:2100px;} /*hauteur > fiche noire présentation iafactory */ .gabarit-fiche-iafactory-avec-expertise {height:7900px;} /*hauteur > fiche noire présentation iafactory avec expertises dans la partie basse*/ .gabarit-fiche-briefing-step1 {height:1050px;} /*hauteur > fiche briefing step1 : choix presta */ .gabarit-fiche-briefing-step2 {height:1750px;} /*hauteur > fiche briefing step2 : formulaire */ .gabarit-fiche-briefing-step3 {height:1150px;} /*hauteur > fiche briefing step3 : confirmation */ .gabarit-fiche-contact-step1 {height:1750px;} /*hauteur > fiche contact step1 : formulaire */ .gabarit-fiche-contact-step2 {height:1250px;} /*hauteur > fiche contact step 2 : confirmation */ .gabarit-fiche-newsletter {height:1050px;} /*hauteur > fiche newsletter */ /* Faux curseur texte : permet d'ajouter un texte devant et derrière le faux curseur "back" ou "brief"*/ #custom-cursor {font-size: 14px;font-weight: bold;padding: 6px 6px 6px 6px;border-radius: 4px;} #custom-cursor.hidden {}/* Masquer le curseur texte au contact des éléments cliquables */ /* Curseur trainée pixel */ .pixel {width:5px;height:5px;} @keyframes trail {0% {opacity: 1;transform: scale(1);} 100% {opacity: 0;transform: scale(0);}} /* GRILLE NOIRE ================================================================================================== */ /* >> Conteneur grille 100 % */ .grille-meta-noir {}/*permet de gérer l'arrière plan du site avec la répétition des lignes horizontales */ /* >> Conteneur grille repères */ .grille-reperes-noir {width: 300px;}/*permet de gérer la répétition des repères */ /* >> Conteneur contenu noir 300PX */ .conteneur-contenu-noir {width: 301px;padding:0 0 0 0;}/* englobe le site dans la limite de 300 px et permet de gérer la répétition interne de l'arrière plan */ /* lOGO ================================================================================================== */ /* >> Logo */ .logo-iafactory-noir {top:50px;height:50px;width:250px;margin:0 0 0 65px;padding:6px 0 0 0;font-size:35px;letter-spacing : 5px;-webkit-text-stroke: 1px #000;} /* background stris logo */ .logo-iafactory-noir::before {background-image:none;} .logo-iafactory-noir:hover {margin:0 0 0 61px;padding:6px 0 0 0;-webkit-text-stroke: 1px #FFF;} .logo-iafactory-noir-box {top:0;height:73px;width:500px;margin:-50px 0 0 84px;padding:26px 0 0 0;} .logo-iafactory-special-box {top:0;height:73px;width:500px;margin:-50px 0 0 84px;padding:26px 0 0 0;} .scramble-logo {} /* classe spécifique pour toucher le logo avec effet scramble */ .scramble-logo-noir {} /* classe spécifique pour toucher le logo avec effet scramble dans les fiches noires */ .logo-aos-fx {}/*hack pour faire fonctionner l'animaton aos du logo sans dénaturer l'effet scramble*/ /* Animation logo IAFACTORY fiche noire / SVG */ #logo-iaf-svg-noir {top:48px;height:50px;width:250px;margin:0 0 0 44px;padding:6px 0 0 0;font-size:30px;letter-spacing:6px; -webkit-text-stroke: 1px #FFF;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;} #logo-iaf-svg-noir:hover {margin:0 0 0 37px;padding:6px 0 0 0;-webkit-text-stroke: 1px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;} .text-ia-copy {stroke-width: 1.5px;} /* HEADER FOND NOIR ================================================================================================== */ header {height:176px;} /* >> Navigation fond noir */ nav.navfichenoire {margin:0 0 0 0;padding:13px 0 11px 0;height:75px;width:50px;border:1px solid transparent;background-image:url(../img/ico/ico-menu-retour-blanc-min.png);background-repeat:no-repeat;background-position:center 67px;} nav.navfichenoire:hover {border:1px solid transparent;background-image:url(../img/ico/ico-menu-retour-blanc-min.png);background-repeat:no-repeat;background-position:5px 67px;} /* >> Briefer fond noir */ .bouton-briefer-noir, .bouton-briefer-noir:hover, .bouton-briefer-noir-animation, .bouton-briefer-noir-animation:hover, .bouton-briefer-noir-animation::before, .bouton-briefer-noir-animation::after, .bouton-briefer-noir-animation::before {display:none;} /* >> Baseline fond noir */ .baseline-iafactory-noir {display:none;} /* >> Ariane fond noir */ .fil-ariane-noir {height: 25px;margin:38px 0 0 0;padding: 0 0 0 25px;font-size:12px;letter-spacing : 1px;} .fil-ariane-noir ul {padding:0 0 0 0;} .fil-ariane-noir ul li {margin:0 0 0 0;padding:0 21px 0 0;background-image:url(../img/ico/ico-chevron-ariane.png);background-position:right 4px;display:none;} .fil-ariane-noir ul li a {font-size:12px;letter-spacing : 1px;} .fil-ariane-noir ul li a:hover {padding:6px;} .fil-ariane-noir ul li.arianelast {background-image:url(../img/ico/ico-chevron-ariane.png);background-position:right 4px;display:block;} .fil-ariane-noir .nochevron {background-image:none;display:none;}/*dernier item pas visible sur petite résolution car il y a le titre*/ /* STRUCTURE ================================================================================================== */ .corps-fiche-box {width:251px;margin:0 0 0 0;} /* Colonne gauche */ .fiche-sidebar-box {height:246px;width:300px;margin:21px 0 0 0;padding:0 0 0 0;} /* Visuel fiche service */ .fiche-sidebar-visuel-blanc {height:149px;width:299px;margin:18px 0 0 0;padding:0 0 0 0;border-radius:1px;background:#FFF;} .fiche-sidebar-visuel-noir {height:149px;width:299px;margin:18px 0 0 0;padding:0 0 0 0;border-radius:1px;background:#000;} canvas#glitchCanvas {height:136px;width:275px;margin:0 0 0 0;padding:7px 0 0 0;border-radius:3px;} canvas#glitchCanvas img {height:136px;width:275px;margin:0 0 0 0;padding:0 0 0 0;border-radius:3px;} /* Visuel fiche service - sticky */ .fiche-sidebar-visuel-projet-blanc, .fiche-sidebar-visuel-projet-noir, .fiche-sidebar-visuel-blanc, .fiche-sidebar-visuel-noir {} /* Animation défilement texte logo ou info projet */ .fiche-sidebar-tagleftbottom1 {height:40px;width:299px;margin:38px 0 0 -1px;padding: 0 0 0 25px;font-size:13px;letter-spacing :1px;} .fiche-sidebar-defile {height:50px;margin:-45px 0 0 124px;padding: 0 0 0 0;width: 150px;font-size:13px;letter-spacing :1px;} .fiche-sidebar-defile span {} .fiche-sidebar-defile span a {margin-right:50px;line-height:25px;padding:4px 4px 2px 4px;} .fiche-sidebar-defile span a:hover {} .fiche-sidebar-defile:hover span {} @keyframes defile {0% {transform: translateX(0); /* position initiale à droite */}100% {transform: translateX(-100%); /* défile jusqu’à gauche */}} .fiche-content-box {width:276px;height:auto;margin:13px 0 0 23px;padding:0 0 0 0;} /* Titre */ .fiche-contenu-tagrightup1 {height:25px;width:279px;margin:50px 0 15px 0;padding: 0 0 0 0;font-size:12px;letter-spacing :1px;} .fiche-contenu-tagrightup2 {height:25px;width:279px;;margin:-15px 0 0 0;padding: 0 0 0 0;font-size:12px;letter-spacing :1px;} .fiche-contenu-tagrightup3 {height:25px;width:279px;margin:43px 0 73px 0;padding: 0 0 0 0;line-height:25px;font-size:12px;letter-spacing :1px;} .fiche-contenu-tagrightup3 a {} .fiche-contenu-tagrightup3 a:hover {} /* Texte */ .fiche-contenu-texte {width:271px;margin:116px 0 0 1px;padding:0 0 0 0;} .fiche-contenu-texte h3 {height:48px;width:279px;line-height:25px;margin:0 0 25px 0;padding: 0 0 4px 0;font-size:15px;letter-spacing :1px;} .fiche-contenu-texte p {padding:0 0 0 0;line-height:25px;font-size:12px;letter-spacing:1px;} .fiche-contenu-texte strong {} .fiche-contenu-texte em {} .fiche-contenu-texte ul {margin:25px 0 0 0;padding:0 0 0 0;line-height:25px;font-size:12px;letter-spacing:1px;} .fiche-contenu-texte ul li {margin:0 0 0 0;padding:0 0 0 0;} .fiche-contenu-texte ul li a {} .fiche-contenu-texte ul li a:hover {} .fiche-contenu-texte a {} .fiche-contenu-texte a:hover {padding:3px 0 0 0;} .infobulle {margin:0 0 0 17px;} .infobulle .infobulle-text {bottom: 125%;left: 50%;width: 210px;margin:0 0 25px 0;padding:15px 15px 15px 15px;line-height:20px;font-size:11px;letter-spacing :1px;} .infobulle:hover .infobulle-text {} .infobulle-icon {width:15px;height:15px;margin:-3px 0 0 0;padding:1px 0 0 1px;line-height:18px;border-radius:50%;font-size:14px;} /* Bouton d'action briefer iafactory */ .fiche-action-briefer {margin:40px 0 0 0;padding:23px 0 29px 23px;height:49px;width:277px;border:1px solid transparent;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:262px 42px, 49px 0px;} .fiche-action-briefer:hover {background-position:267px 42px, 49px 0px;} /* Animation bouton d'action */ .fiche-action-briefer {} .fiche-action-briefer::after {} /* Masque pour n’afficher que le contour */ @keyframes lightMove {0% { background-position: 200% 0; }100% { background-position: -200% 0; }} /* Rebond prestation */ .service-rebond {height:700px;width:274px;margin:85px 0 25px 25px;padding: 0 0 4px 0;} .service-rebond h4 {height:50px;width:274px;margin:0 0 0 0;padding: 0 0 4px 0;font-size:15px;letter-spacing :1px;text-align: left;} /* service complémentaire boîte */ .rebond-service-1 {width:299px;height:299px;margin:9px 0 86px -25px;padding:0 0 0 0;} .rebond-service-1 .service-lien {} .rebond-service-1:hover {} .rebond-service-1:hover .service-lien {padding:6px 6px 6px 6px;} .service-lien {width:240px;margin:16px 0 0 18px;padding:6px 6px 6px 6px;font-size:12px;letter-spacing:1px;} .service-description {width:250px;margin:12px 0 0 0;padding:0 0 0 25px;line-height:18px;font-size:11px;letter-spacing:1px;} .service-vignette {height:154px;width:250px;margin:-32px 0 0 25px;padding:0 0 0 0;} .service-vignette img {height:154px;width:250px;margin:50px 0 0 0;padding:0 0 0 0;} /* expertise complémentaire boîte */ .service-expertise-1 {width:299px;height:299px;margin:9px 0 20px -25px;padding:0 0 0 0;} .service-expertise-1 .service-expertise-lien, .service-expertise-2 .service-expertise-lien {-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;} .service-expertise-1:hover, .service-expertise-2:hover {cursor:pointer;border:1px solid #222;} .service-expertise-1:hover .service-expertise-lien, .service-expertise-2:hover .service-expertise-lien {padding:6px 6px 6px 6px;background-color:#FFF;color:#000;} .service-expertise-lien {width:240px;margin:16px 0 0 18px;padding:6px 6px 6px 6px;font-size:12px;letter-spacing:1px;} .service-expertise-description {width:250px;margin:12px 0 0 0;padding:0 0 0 25px;line-height:18px;font-size:11px;letter-spacing:1px;} .service-expertise-description-big {width:250px;margin:44px 0 0 0;padding:0 0 0 50px;line-height:18px;font-size:20px;letter-spacing:1px;} .service-expertise-vignette {height:154px;width:250px;margin:-32px 0 0 25px;padding:0 0 0 0;} .service-expertise-vignette img {height:154px;width:250px;margin:50px 0 0 0;padding:0 0 0 0;} /* FICHE PROJET NOIRE - SPECIFIQUE ================================================================================================== */ /* Animation Nom marque */ svg {font: 14px 'typoarchia';letter-spacing:6px;height:70px;width:274px;margin:223px 0 0 25px;opacity:75%;} .text-copy {stroke-dasharray: 6% 29%;stroke-width: 1.5px/*2px plus fin*/;stroke-dashoffset: 0%;} .text-copy:nth-child(1){} .text-copy:nth-child(2){} .text-copy:nth-child(3){} .text-copy:nth-child(4){} .text-copy:nth-child(5){} @keyframes stroke-offset{ 100% {stroke-dashoffset: -35%;} } /* Contenus corps -texte */ .fiche-projet-box {width:276px;height:auto;margin:13px 0 0 23px;padding:0 0 0 0;} .projet-titre {height:50px;width:100%;margin:7px 0 -22px 0;padding: 0 0 0 25px;font-size:15px;letter-spacing : 1px;} /* Visuel fiche projet */ .fiche-sidebar-visuel-projet-blanc {height:149px;width:299px;margin:18px 0 0 0;padding:0 0 0 0;border-radius:1px;background:#FFF;} .fiche-sidebar-visuel-projet-noir-noir {height:149px;width:299px;margin:18px 0 0 0;padding:0 0 0 0;border-radius:1px;background:#000;} canvas#glitchCanvas {height:136px;width:275px;margin:0 0 0 0;padding:7px 0 0 0;border-radius:3px;} canvas#glitchCanvas img {height:136px;width:275px;margin:0 0 0 0;padding:0 0 0 0;border-radius:3px;} /* Animation défilement texte logo ou info projet */ .fiche-sidebar-defile span i {margin-right:50px;line-height:25px;padding:4px 4px 2px 4px;} /* style pour les fiches projet qui ne sont pas des liens A*/ .fiche-sidebar-defile span u {} /* style pour les fiches projet qui ne sont pas des liens A*/ .fiche-signature-projet {height:40px;width:289px;margin:25px 0 10px 0px;padding:0 0 0 0;line-height:25px;font-size:10px;letter-spacing :1px;} /* Zone rebond inférieure fiche projet */ .fiche-projet-rebond {height:700px;width:274px;margin:85px 0 25px 25px;padding: 0 0 4px 0;} .fiche-projet-rebond h4 {height:50px;width:274px;margin:0 0 0 0;padding: 0 0 4px 0;font-size:15px;letter-spacing :1px;text-align: left;} /* Particules logo */ #particle-canvas {left:0;/*33%*/top:300px;width: 100%;height: 325px;} /* Titre des expertises IAFACTORY dans fiche noire studio IAFCTORY - partie basse */ .titre-expertise-page-studio {height:48px;margin:0 0 0 0;padding: 80px 0 0 25px;font-size:17px;letter-spacing :2px;text-align:left;} /* Correctif spécifique mobile affichage AOS */ .fiche-contenu-texte[data-aos="fade-up"] {transform: none !important;} .fiche-action-briefer[data-aos="fade-up"] {transform: none !important;} /* FICHE BRIEFING NOIRE STEP 1 : choix de l'intervention ================================================================================================== */ /* >> Conteneur conteu */ .conteneur-contenu-noir-briefing {width: 301px;padding:0 0 0 0;}/* englobe le site dans la limite de 1500 px et permet de gérer la répétition interne de l'arrière plan */ .briefing-titre {height:50px;width:100%;margin:10px 0 -20px 0;padding: 0 0 0 25px;font-size:15px;letter-spacing : 1px;} .briefing-bouton-actif {display:none;} .corps-fiche-briefing-box {width:301px;margin:0 0 0 0;} /* >> Progress bar fond noir */ .fil-ariane-briefing {height: 25px;margin:32px 0 0 0;padding: 0 0 0 0;font-size:14px;letter-spacing : 1px;} .fil-ariane-briefing ul {padding:0 0 0 25px;} .fil-ariane-briefing ul li {margin:0 0 0 0;padding:20px 15px 0 0;} .fil-ariane-briefing ul li a {font-size:13px;letter-spacing : 1px;} .fil-ariane-briefing ul li a:hover {padding:6px;} .fil-ariane-briefing h1 {margin:0 0 0 0;padding:20px 15px 0 0;font-size:14px;letter-spacing : 1px;} .fil-ariane-briefing ul li.briefing-actif-titre {margin:0 0 0 0;} /*titre progress bar briefing*/ .fil-ariane-briefing ul li.briefing-actif-item {background-image:url(../img/ico/ico-devis-progress-bar-actif-vert.png);background-position:0 0px;} /*item actif progress bar briefing*/ /* Choix des options de briefing */ ul.briefing-option {width:251px;margin:13px 0 25px 25px;padding:0 0 0 0;} ul.briefing-option li {} ul.briefing-option li a {height:49px;width:251px;margin:-1px 0 0 0;padding:0 0 0 0;line-height:50px;letter-spacing:2px;font-size:14px;} ul.briefing-option li a:hover {} /* texte qui s'affiche au rollover */ ul.briefing-option li a .briefing-option-detail {display:none;} ul.briefing-option li a:hover .briefing-option-detail {display:none;} /* background qui s'affiche au rollover */ .briefing-option_bg {margin:401px 0 0 251px;width: 249px;height: 349px;background-size: cover;background-position: center;} /* affichage d'une image de background au rollover sur image */ /* apparition progressive du background avec action spécifique sur certaines classes */ .corps-fiche-briefing-box {}/* indispensable pour que les bg absolus se superposent */ .briefing-option_bg {display:none;} /* désactive background au rollover */ .briefing-option_bg.bg2 {display:none;} /* désactive background au rollover */ .fil-ariane-briefing ul li a {} /* liens au-dessus du background */ /* particules */ #particle-canvas-briefing {position:absolute;margin:425px 0 0 -650px;width: 750px;height: 300px;} /* Résumé et texte synthétique bas de page */ .resume-briefing-titre {margin:32px 25px 0 25px;width:250px;line-height:25px;font-size:13px;letter-spacing:1px;} .resume-briefing-texte {margin:25px 25px 0 25px;width:250px;height:117px;padding:0 0 0 0;line-height:25px;font-size:12px;letter-spacing:1px;} /* Position email et contact spécifique pages BRIEF - CONTACT - NEWSLETTER */ .fiche-noire-contact-box {display:none; /* bloc contact TEL + EMAIL pas affiché sur mobile car complexifie mise en page */ width:300px;height:108px;margin:-267px 0 0 0;padding:0 0 0 0;} .fiche-noire-contact-tag0 {display:none;height:25px;width:100px;margin:0 0 0 0;padding: 0 0 0 0;font-size:11px;letter-spacing :1px;text-align:left;} .fiche-noire-contact-tag1 {height:25px;width:125px;margin:0 0 0 25px;padding: 0 0 0 0;font-size:11px;letter-spacing :1px;text-align:left;} .fiche-noire-contact-tag2 {height:25px;width:125px;;margin:0 0 0 0;padding: 0 0 0 0;font-size:11px;letter-spacing :1px;text-align:right;} .couleur-contact-tag {color:rgba(119, 119, 119, 0.7);} .optimise-contact-tag {display:none;}/* pas affiché sur mobile*/ /* FICHE BRIEFING NOIRE STEP 2 : formulaire ================================================================================================== */ #feedback {margin:40px 0 0 25px;font-size:10px;letter-spacing : 1px;color:#477C3F;/* ou #FFF */} /*affichage de l'option sélectionnée dans la page précédente via JS */ .formulaire-champs-requis {width:250px;margin:/*68px si on laisse l'espace pour le bloc contact*/ 18px 0 3px 25px;padding:0 0 0 0;font-size:12px;letter-spacing : 1px;line-height:25px;} .briefing-formulaire {width: 250px;} .formulaire-partie-1 {clear:both;float:none;margin:113px 25px 0 25px;width:250px;height:450px;} /*partie de champs alignés dans un bloc à gauche */ .formulaire-partie-2 {clear:both;float:none;margin:354px 0 0 2px;width:250px;height:350px;} /*partie de champs alignés dans un bloc à droite */ /* champs normal */ .field {} .field input {height:50px;width:250px;margin:0 0 49px 0;padding:0 0 0 0;font-size:12px !important;letter-spacing : 1px;} .field input:focus {} /* Label flottant */ .field span {margin: 0 0 0 0;padding:17px 0 0 0;width: max-content;font-size: 12px;letter-spacing: 1px;} .field input:focus ~ span, .field input:not(:placeholder-shown) ~ span, .field textarea:focus ~ span, .field textarea:not(:placeholder-shown) ~ span {transform: translateY(-24px);font-size: 9px;color: #FFF;}/* Animation du label */ /* bouton */ .briefing-bouton-envoyer {height:50px;width:250px;margin:0 0 0 0;line-height:50px;font-size:14px;letter-spacing : 1px;} .briefing-bouton-envoyer:hover {} /* champs texte besoin */ .field textarea {height:182px;width:250px;margin:0 0 49px 0;padding:17px 0 0 0;font-size:14px;letter-spacing : 1px;} .field textarea:focus {} .field textarea:focus ~ span, .field textarea:focus:not(:placeholder-shown) ~ span, .field textarea:focus ~ span, .field textarea:not(:placeholder-shown) ~ span {transform: translateY(-24px);font-size: 9px;color: #FFF;}/* Animation du label */ /* contrôle des champs et feedback */ /* Icône ✓ / ✗ pour field*/ .field.ok .status {margin:-23px 0 0 0;}/* icône vert OK */ .field .status {right: 50px;top: 50%;transform: translateY(-50%);font-size: 16px;line-height: 1;} .field.ok input, .field.ok textarea {} /* champ valide en vert */ .field.invalid input, .field.invalid textarea {} /* champ invalide en rouge */ .field.invalid .status {margin:-19px -50px 0 0;font-size:9px;letter-spacing : 1px;} /* Icône rouge pour invalide */ .field input:focus ~ .status, .field textarea:focus ~ .status {margin:-23px 0 0 0;} /* Icône ✓ / ✗ pour textarea */ .field.ok textarea .status {}/* icône vert OK */ .field textarea .status {} /* évite d'hériter d'une couleur blanche*/ .field textarea ~ .status {top:16px;} .char-counter {width:125px;margin:-73px 50px 0 0;font-size:9px;letter-spacing : 1px;} /* alignement bas du formulaire pour intégrer captcha */ .champstel {margin:0 0 0 0;} .champsmath {margin:-25px 0 0 0;} .engagement-iaf-position-mobile {margin:0 0 0 0;padding:201px 0 0 0;} .engagement-nl-position-mobile {margin:108px 0 0 -25px;padding:0 0 0 0;} /* FICHE BRIEFING NOIRE STEP 3 : confirmation ================================================================================================== */ nav.navfichenoire-confirmation {margin:50px 0 0 0;padding:0 0 0 0;height:50px;width:50px;background-image:url(../img/ico/ico-confirmation-envoi-vert-min.png);background-position:center center;} .briefing-confirmation {margin:97px 0 0 0;height:303px;width:300px;} /* FICHE NEWSLETTER ================================================================================================== */ a.lien-exemple-nl {} a.lien-exemple-nl:hover {padding:6px;} .background-newsletter {display:none;} }