/*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* RESET */ * { box-sizing:border-box; } html { position:relative; display:block; } body { position:relative; display:block; width:100%; margin:0; padding:0; font-family:Raleway, sans-serif; font-size:0.9rem; font-weight:400; line-height:1.4; background-color:rgba(255,255,255,1); color:rgba(72,72,72,1); text-align:left; overflow-x:hidden; overflow-y:scroll; } body.noscrollbar { overflow-y:hidden; } header, main, footer { position:relative; display:block; width:100%; margin:0; padding:0; overflow-x:hidden; } h1, h2, h3, h4, h5, h6 { position:relative; margin:0; padding:0; font-family:Quicksand; font-size:1.44rem; font-weight:600; color:inherit; } div { position:relative; margin:0; padding:0; } a, a:link, a:active, a:visited, a:focus { font-size:inherit; color:inherit; text-decoration:inherit; outline-color:transparent; } body.desktop a:hover { color:inherit; text-decoration:underline; outline-color:transparent; } img { margin:0; padding:0; border:0; } svg { position:relative; display:inline-block; vertical-align:top; height:100%; width:100%; margin:0; padding:0; } p { font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:1em 0 0 0; } p:first-of-type, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { padding-top:0; } span { position:relative; display:inline; font-size:inherit; margin:0; padding:0; } ul { position:relative; margin:0; padding:0; } li { position:relative; font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:0; } .fromrte ul { margin-left:1em; } .wrap { display:block; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%; } .cover { position:absolute; top:50%; left:50%; width:auto; height:auto; transform:translate(-50%, -50%); display:block; margin:0; padding:0; background-color:transparent; } .cover.top { top:0; transform:translate(-50%,0); } .cover.bottom { top:100%; transform:translate(-50%,-100%); } .cover.left { left:0; transform:translate(0,-50%); } .cover.topleft { left:0; top:0; transform:translate(0,0); } .cover.bottomleft { left:0; top:100%; transform:translate(0,-100%); } .cover.right { left:100%; transform:translate(-100%,-50%); } .cover.topright { left:100%; top:0; transform:translate(-100%,0); } .cover.bottomright { left:100%; top:100%; transform:translate(-100%,-100%); } .cover > img, .cover > video, .cover > div, .cover > span { position:absolute; display:inline-block; width:100%; height:100%; left:0; top:0; } .clear { clear:both; } .blochref { cursor:pointer; } pre, code { position:relative; font-size:13px; text-align:left; color:#c7254e; background-color: #f9f2f4; border-radius:0.5em; padding:0.8em; display:block; margin:0 0 1em 0; border:0; } .ajaxloader { z-index:999999; position:fixed; left:0; top:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); } .ajaxloader svg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:8%; height:auto; color:rgba(0,0,0,1); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Mise en forme spécifique des formulaires */ /*----------------------------------------------------------------------------------------------------------------------------------------------*/ input, textarea, select { position:relative; display:inline-block; vertical-align:top; width:100%; font-size:inherit; display:inline-block; background-color:rgba(221,221,221,1); color:rgba(22,22,22,1); line-height:2; height:2em; vertical-align:middle; margin:0; padding:0.1em 0.3em 0 0.3em; width:100%; border:0; border-radius:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; } textarea { height:6em; } select { background-image:url(https://www.ladresseformation.fr/_chartes_/adresseformation/ressources/images/contribution/dropdown.svg) !important; background-size:1.5em; background-position: right center !important; background-repeat: no-repeat !important; padding-right:30px !important; } select::-ms-expand { display: none; } select option { color:rgba(22,22,22,1); } select.placeholder { color:rgba(54,54,54,0.55) !important; } /* Mise en forme des boutons radio et des checkboxes */ input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after { content:'' !important; position:absolute !important; left:0 !important; top:0 !important; /* on décale la case de 10% de sa taille pour bien la centrer en hauteur */ width:1em !important; height:1em !important; /* on définit la taille de référence de la case à la même taille que la font du span */ transform-origin: 50% 50% !important; /* pour être certain du point d'origine du scale pour la case et la coche */ transition:all .2s !important; /* on prévoit une animation */ } input[type="radio"], input[type="checkbox"] { position:absolute !important; left:0 !important; top:1em !important; opacity:0 !important; transform: scale(0) !important; height:1em !important; width:1em !important; } /* On masque le champ input (opacité 0) */ input[type="radio"] + span, input[type="checkbox"] + span { position:relative !important; cursor:pointer !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:1.6em !important; } /* on prépare le label (balise span située à côté du champ input) */ input[type="radio"] + span:before, input[type="checkbox"] + span:before { border:1px solid rgba(221,221,221,1) !important; background-color:transparent !important; } /* Aspect général de la case */ input[type="radio"] + span:after, input[type="checkbox"] + span:after { border:1px solid transparent !important; background-color:rgba(242,148,83,1) !important; } /* Aspect général de la coche */ input[type="checkbox"] + span:before, input[type="checkbox"] + span:after { border-radius: 5% !important; } /* angles arrondis */ input[type="radio"] + span:before, input[type="radio"] + span:after { border-radius: 50% !important; } /* cases circulaires */ input[type="radio"]:not(:checked) + span:after, input[type="checkbox"]:not(:checked) + span:after { opacity: 0 !important; transform: scale(0) !important; } /* Aspect si "pas cochée" */ input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after { opacity: 1 !important; transform: scale(0.5) !important; } /* Aspect si "cochée" */ label { position:relative; display:inline-block; vertical-align:top; font-weight:400; } button, a.button { position:relative; display:inline-block; vertical-align:top; font-family:Raleway, sans-serif; font-size:inherit; font-weight:500; text-align:center; background-color:rgba(70,161,190,1); border:1px solid rgba(70,161,190,1); color:rgba(255,255,255,1); margin:0; padding:0.5em 1em; width:auto; outline:0; } body.desktop button:hover, body.desktop a.button:hover { color:rgba(70,161,190,1); background-color:rgba(255,255,255,1); border-color:rgba(70,161,190,1); text-decoration:none; outline:0; } .categories ul li.management a { background-color:rgba(243,150,86,1); } .souscategories ul li.management a { background-color:rgba(243,150,86,1); } section.formations > div.infos.management:before { background-color:rgba(243,150,86,0.2); } .management h2, .management h3, .management h4, .management h5, .management h6 { color:rgba(243,150,86,1); } .management .fromrte ol li::before { color:rgba(243,150,86,1); } .management .fromrte ul li:before { background-color:rgba(243,150,86,1); } .management .fromrte hr { background-color:rgba(243,150,86,1); } li.management .categ { color:rgba(243,150,86,1); } li.management .categ:before { background-color:rgba(243,150,86,1); } li.management .etiquette { background-color:rgba(243,150,86,1); } .ficheheader.management:before { background-color:rgba(243,150,86,1); } .ficheheader.management .etiquette { color:rgba(243,150,86,1); } .fichedescriptif.management > div, .fichedescriptif.management .pictos ul > li { border-color:rgba(243,150,86,1); } .categories ul li.metiers a { background-color:rgba(144,151,203,1); } .souscategories ul li.metiers a { background-color:rgba(144,151,203,1); } section.formations > div.infos.metiers:before { background-color:rgba(144,151,203,0.2); } .metiers h2, .metiers h3, .metiers h4, .metiers h5, .metiers h6 { color:rgba(144,151,203,1); } .metiers .fromrte ol li::before { color:rgba(144,151,203,1); } .metiers .fromrte ul li:before { background-color:rgba(144,151,203,1); } .metiers .fromrte hr { background-color:rgba(144,151,203,1); } li.metiers .categ { color:rgba(144,151,203,1); } li.metiers .categ:before { background-color:rgba(144,151,203,1); } li.metiers .etiquette { background-color:rgba(144,151,203,1); } .ficheheader.metiers:before { background-color:rgba(144,151,203,1); } .ficheheader.metiers .etiquette { color:rgba(144,151,203,1); } .fichedescriptif.metiers > div, .fichedescriptif.metiers .pictos ul > li { border-color:rgba(144,151,203,1); } .categories ul li.developpement a { background-color:rgba(127,196,163,1); } .souscategories ul li.developpement a { background-color:rgba(127,196,163,1); } section.formations > div.infos.developpement:before { background-color:rgba(127,196,163,0.2); } .developpement h2, .developpement h3, .developpement h4, .developpement h5, .developpement h6 { color:rgba(127,196,163,1); } .developpement .fromrte ol li::before { color:rgba(127,196,163,1); } .developpement .fromrte ul li:before { background-color:rgba(127,196,163,1); } .developpement .fromrte hr { background-color:rgba(127,196,163,1); } li.developpement .categ { color:rgba(127,196,163,1); } li.developpement .categ:before { background-color:rgba(127,196,163,1); } li.developpement .etiquette { background-color:rgba(127,196,163,1); } .ficheheader.developpement:before { background-color:rgba(127,196,163,1); } .ficheheader.developpement .etiquette { color:rgba(127,196,163,1); } .fichedescriptif.developpement > div, .fichedescriptif.developpement .pictos ul > li { border-color:rgba(127,196,163,1); } .categories ul li.bureautique a { background-color:rgba(167,196,3,1); } .souscategories ul li.bureautique a { background-color:rgba(167,196,3,1); } section.formations > div.infos.bureautique:before { background-color:rgba(167,196,3,0.2); } .bureautique h2, .bureautique h3, .bureautique h4, .bureautique h5, .bureautique h6 { color:rgba(167,196,3,1); } .bureautique .fromrte ol li::before { color:rgba(167,196,3,1); } .bureautique .fromrte ul li:before { background-color:rgba(167,196,3,1); } .bureautique .fromrte hr { background-color:rgba(167,196,3,1); } li.bureautique .categ { color:rgba(167,196,3,1); } li.bureautique .categ:before { background-color:rgba(167,196,3,1); } li.bureautique .etiquette { background-color:rgba(167,196,3,1); } .ficheheader.bureautique:before { background-color:rgba(167,196,3,1); } .ficheheader.bureautique .etiquette { color:rgba(167,196,3,1); } .fichedescriptif.bureautique > div, .fichedescriptif.bureautique .pictos ul > li { border-color:rgba(167,196,3,1); } .categories ul li.communication a { background-color:rgba(102,201,221,1); } .souscategories ul li.communication a { background-color:rgba(102,201,221,1); } section.formations > div.infos.communication:before { background-color:rgba(102,201,221,0.2); } .communication h2, .communication h3, .communication h4, .communication h5, .communication h6 { color:rgba(102,201,221,1); } .communication .fromrte ol li::before { color:rgba(102,201,221,1); } .communication .fromrte ul li:before { background-color:rgba(102,201,221,1); } .communication .fromrte hr { background-color:rgba(102,201,221,1); } li.communication .categ { color:rgba(102,201,221,1); } li.communication .categ:before { background-color:rgba(102,201,221,1); } li.communication .etiquette { background-color:rgba(102,201,221,1); } .ficheheader.communication:before { background-color:rgba(102,201,221,1); } .ficheheader.communication .etiquette { color:rgba(102,201,221,1); } .fichedescriptif.communication > div, .fichedescriptif.communication .pictos ul > li { border-color:rgba(102,201,221,1); } .categories ul li.bienetreprevention a { background-color:rgba(219,176,59,1); } .souscategories ul li.bienetreprevention a { background-color:rgba(219,176,59,1); } section.formations > div.infos.bienetreprevention:before { background-color:rgba(219,176,59,0.2); } .bienetreprevention h2, .bienetreprevention h3, .bienetreprevention h4, .bienetreprevention h5, .bienetreprevention h6 { color:rgba(219,176,59,1); } .bienetreprevention .fromrte ol li::before { color:rgba(219,176,59,1); } .bienetreprevention .fromrte ul li:before { background-color:rgba(219,176,59,1); } .bienetreprevention .fromrte hr { background-color:rgba(219,176,59,1); } li.bienetreprevention .categ { color:rgba(219,176,59,1); } li.bienetreprevention .categ:before { background-color:rgba(219,176,59,1); } li.bienetreprevention .etiquette { background-color:rgba(219,176,59,1); } .ficheheader.bienetreprevention:before { background-color:rgba(219,176,59,1); } .ficheheader.bienetreprevention .etiquette { color:rgba(219,176,59,1); } .fichedescriptif.bienetreprevention > div, .fichedescriptif.bienetreprevention .pictos ul > li { border-color:rgba(219,176,59,1); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header #interlocuteur > span, header nav ul > li, #ariane ul > li, .criteres > div, .criteres > span, #home-planning > ul > li, #home-chiffrescles ul li, #home-actus ul li, #home-clients ul li, #page-presentation .valeurs > ul > li, #page-presentation .pedagogie > ul > li, #page-accompagnementsrh .valeurs > ul > li, .results > ul > li > div, .pictos ul > li, .pagination > span, .pagination > a, .fichedescriptif .textes > div, section.contact > div, section.contact label, section.contact fieldset > div, footer aside, footer aside.coords > ul > li, footer aside.links ul > li, footer nav, footer .copyright { font-size:1rem; } a.startpage { position:absolute; display:block; margin:0; padding:0; left:0; top:0; width:0; height:1px; overflow:hidden; z-index:100000; } a.startpage { top:-3rem; } aside { position:relative; } aside#shared a.startpage { top:0; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ body.noscrollbar { height:0; overflow-y:hidden; } body.windows.noscrollbar, body.windows.noscrollbar header, body.windows.noscrollbar header nav > div { max-width:calc(100% - 17px); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* LOGO gradient-conic - incompatible IE */ .coniclogo { display:inline-block; position:relative; width:1em; height:calc(1em * 0.375); color:rgba(29,29,27,1); } .coniclogo svg circle { opacity:0; fill:transparent; } .coniclogo:before { content:''; position:absolute; right:2.5%; top:10%; width:20%; height:0; padding-bottom:20%; border-radius:50%; background: conic-gradient(from 180deg, rgba(76,137,192,1) 0, rgba(170,202,70,1) 75%); background-color:rgba(170,202,70,1); } .coniclogo svg .spirale:nth-of-type(1) { stop-color:rgba(170,202,70,1); } .coniclogo svg .spirale:nth-of-type(2) { stop-color:rgba(210,212,62,1); } .coniclogo svg .ombre { stop-color:rgba(179,179,179,1); } a.coniclogo, a.coniclogo:link, a.coniclogo:active, a.coniclogo:focus, body.desktop a.coniclogo:hover { color:rgba(29,29,27,1); } .liquide { width:80%; position:relative; height:auto; left:50%; transform:translateX(-50%); top:0; } header .liquide, footer .liquide { position:absolute; height:100%; } button.afbtn { position:relative; line-height:1.2; background-color:rgba(70,161,190,1); color:rgba(255,255,255,1); border-color:rgba(70,161,190,1); padding:1.2em 2.5em; font-weight:600; text-transform:uppercase; display:inline-block; vertical-align:middle; border-radius:calc( (1em + (2 * 1em)) / 2); transition:color 300ms ease, background-color 300ms ease; } body.desktop button.afbtn:hover { background-color:rgba(255,255,255,1); color:rgba(70,161,190,1); border-color:rgba(70,161,190,1); } button.afbtn sub { display:block; font-weight:400; font-size:0.8em; bottom:0; padding-top:0.8em; text-transform:none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* HEADER */ header { z-index:1000; position:fixed; left:0; top:0; width:100%; height:auto; background-color:transparent; color:rgba(72,72,72,1); overflow-y:hidden; height:calc((16rem * 0.375) + ( 2 * 0.5rem) + 1rem ); } body.desktop header a:hover { text-decoration:none; } header h1 { display:block; padding:0.5rem 0 calc(0.5rem + 1rem) 0; } header h1:before { z-index:1051; content:''; background-color:rgba(255,255,255,1); position:absolute; width:100vw; left:50%; transform:translate(-50%); height:100%; bottom:1rem; box-shadow: 0px 0px 1rem 0px rgba(54,54,54,0.2); } header h1 #logo { font-size:16rem; line-height:1; z-index:1300; position:relative; display:inline-block; vertical-align:top; margin:0; padding:0; overflow:hidden; } header #showhidemenu { display:none; } header #interlocuteur { z-index:1100; font-size:0; position:absolute; display:block; width:100%; right:0; top:1.5rem; padding:0; } header #interlocuteur > span { position:relative; color:rgba(70,161,190,1); padding:0; font-weight:600; display:inline-block; vertical-align:middle; } header #interlocuteur > span:nth-of-type(1) { border-right:1px solid rgba(70,161,190,1); font-weight:400; padding-right:1em; } header #interlocuteur > span:nth-of-type(2) { padding-left:1em; } header #interlocuteur > span:nth-of-type(3) { padding-left:0.2em; padding-right:0.2em; } header #interlocuteur > span:nth-of-type(4) { padding-right:1em; } header #interlocuteur > button { position:absolute; right:0; top:50%; transform:translateY(-50%); } header nav { z-index:1200; position:absolute; display:inline-block; width:100%; right:0; top:4rem; margin:0; padding:0; } header nav ul { z-index:1400; font-size:0; position:relative; display:block; margin:0; padding:0; list-style:none; } header nav ul > li { display:inline-block; width:auto; } header nav button { font-size:1em; position:relative; background-color:transparent; color:rgba(72,72,72,1); border:0; padding-bottom:0.3em; text-align:left; } header nav button:after { content:''; position:absolute; left:1em; bottom:0; width:0; height:0.1em; transition:width 300ms ease; background-color:rgba(70,161,190,1); } header nav li.current > button { background-color:transparent; color:rgba(70,161,190,1); } body.desktop header nav button:hover { background-color:transparent; color:rgba(72,72,72,1); } body.desktop header nav button:hover:after { width:calc(100% - 2em); } header nav ul ul { display:none; } #ariane { z-index:900; position:relative; width:100%; display:block; padding:1rem 0; } #ariane ul { font-size:0; position:relative; display:block; margin:0; padding:0; list-style:none; } #ariane ul > li { padding:0 0.5em 0 0; } #ariane ul > li:not(:last-of-type):after { content: '>'; padding:0 0 0 0.5em; transform:translateY(-0.05em); } #ariane a, #ariane span { background-color:transparent; color:rgba(72,72,72,1); padding:0; } #ariane ul > li, #ariane ul > li:after, #ariane a, #ariane span { display:inline-block; width:auto; vertical-align:text-bottom; position:relative; border:0; line-height:1.2; } #ariane ul > li:after, #ariane a, #ariane span { font-size:0.8em; } #ariane a:first-of-type { padding-left:0; } #ariane span { padding-right:0; } #ariane li.current a { background-color:transparent; color:rgba(70,161,190,1); } body.desktop #ariane a:hover { background-color:transparent; color:rgba(72,72,72,1); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* MAIN */ main { margin:0; padding:0; display:block; position:relative; width:100%; overflow-x:hidden; overflow-y:hidden; transition:margin 300ms linear 0ms; } main { margin-top:calc((16rem * 0.375) + ( 2 * 0.5rem) ); } .scroll main { } section.defaut { text-align:center; padding-bottom:3rem; } section.defaut img { max-width:100vw; } main h1, main h2, main h3, main h4, main h5, main h6 { color:rgba(70,161,190,1); line-height:1.4; } .fromrte { position:relative; } .fromrte p, .fromrte li { font-size:1em; font-weight:300; line-height:1.4; } .fromrte p { margin:0; padding:0; padding-bottom:1em; } .fromrte ol, .fromrte ul { margin:0; padding:0; padding-bottom:1em; list-style:none; } .fromrte li { position:relative; margin:0; padding:0; padding-left:1.5em; } .fromrte li:before { position:absolute; left:0; } .fromrte ol { counter-reset:li; } .fromrte ol li { counter-increment:li; } .fromrte ol li:before { content:counter(li) "."; top:0; font-weight:700; color:rgba(70,161,190,1); } .fromrte ul li:before { content:''; top:0.5em; width:0.3em; height:0.3em; background-color:rgba(70,161,190,1); border-radius:50%; } .fromrte hr { background-color:rgba(70,161,190,1); border:0; height:1px; margin:1.5em 0 2.5em 0; } .fromrte strong { font-weight:500; } .fromrte p:last-of-type, .fromrte ul:last-of-type, .fromrte ol:last-of-type { padding-bottom:0; } .fromrte p:last-of-type + ul, .fromrte p:last-of-type + ol { padding-top:1em; } .fromrte ul:last-of-type + p, .fromrte ul:last-of-type + ol { padding-top:1em; } .fromrte ol:last-of-type + p, .fromrte ol:last-of-type + ul { padding-top:1em; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* RECHERCHE - CATEGORIES */ .criteres { font-size:0; position:relative; display:inline-block; vertical-align:middle; width:100%; } .criteres > div, .criteres > span { position:relative; text-align:center; display:inline-block; vertical-align:middle; width:100%; } .criteres > span { margin:3rem 0; padding:0; } .criteres > span > span { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); color:rgba(70,161,190,1); font-weight:600; font-family:Quicksand; background-color:rgba(255,255,255,1); padding:0.5em 1em; } .criteres > span:before { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:1px; background-color:rgba(70,161,190,1); } .criteres h2 { text-align:center; margin:0; padding-bottom:1.5em; } /* SEARCH */ .search form { position:relative; display:block; width:100%; margin:0 auto; } .search input { font-size:1em; line-height:1; padding:0 2em; position:relative; width:100%; background-color:transparent; color:rgba(72,72,72,1); height:calc(2.6em); border-radius:1.3em; border:1px solid rgba(70,161,190,1); outline:0; } .search button { font-size:1em; position:absolute; right:0; top:50%; transform:translateY(-50%); width:2.6em; height:2.6em; border-radius:1.3em; border:1px solid transparent; transition:background-color 300ms ease 0ms, color 300ms ease 0ms; outline:0; } .search button svg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:50%; height:50%; } body.desktop .search button:hover { background-color:transparent; border-color:transparent; color:rgba(70,161,190,1); } /* CATEGORIES */ .categories ul { position:relative; display:block; margin:0 auto; padding:0; } .categories ul li { position:relative; display:block; } .categories ul li a { position:relative; display:block; margin:1em 0; padding:0; color:rgba(255,255,255,1); font-size:1em; border-radius:0.8rem; transition:transform 300ms ease 0ms; height:6em; overflow:hidden; } .categories ul li a > span { position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); padding:1em 0.5em; } .categories ul li a > span svg { display:block; width:2em; height:2em; position:relative; } .categories ul li a > span span { display:block; width:100%; font-size:0.6em; text-transform:uppercase; padding-top:1em; line-height:1.2; font-weight:600; } .categories ul li.current a { color:rgba(255,255,255,1); box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.4); } body.desktop .categories ul li a:hover { color:rgba(255,255,255,1); } /* SOUS-CATEGORIES */ .souscategories ul { position:relative; display:block; margin:0 auto; padding:0; } .souscategories ul li { position:relative; display:block; } .souscategories ul li a { position:relative; display:block; margin:1em 0; padding:0; color:rgba(255,255,255,1); font-size:1em; border-radius:0.8rem; transition:transform 300ms ease 0ms; height:5.3em; overflow:hidden; } .souscategories ul li a > span { position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); padding:1em 0.5em; } .souscategories ul li a > span svg { display:block; width:1.7em; height:1.7em; position:relative; } .souscategories ul li a > span span { display:block; width:100%; font-size:0.6em; text-transform:uppercase; padding-top:1em; line-height:1.2; font-weight:600; } .souscategories ul li.current a { color:rgba(255,255,255,1); box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.4); } body.desktop .souscategories ul li a:hover { color:rgba(255,255,255,1); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ACCUEIL */ #home-formations { font-size:0; position:relative; display:block; margin:0; padding:0; } #home-formations .visuel { position:relative; display:inline-block; vertical-align:top; width:100%; } #home-formations .visuel:before { content:''; position:absolute; right:-50%; top:0; bottom:0; width:200%; background-color:rgba(70,161,190,1); } #home-formations .visuel img { position:relative; width:100%; height:auto; margin:0; padding:0; } #home-formations .search h2 { margin-top:2em; } #home-formations .categories h2 { text-align:center; } #home-surmesure { position:relative; display:block; margin:0; padding:2rem 0; text-align:center; } #home-surmesure h2 { font-size:1em; text-align:center; margin:0 0 1.5em 0; color:rgba(72,72,72,1); font-family:Raleway, sans-serif; } #home-mutualisation { position:relative; display:block; margin:0 0 2rem 0; padding:2rem 0 4rem 0; background-color:rgba(255,100,35,1); color:rgba(255,255,255,1); } #home-mutualisation:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(255,100,35,1); } #home-mutualisation h2 { text-align:center; margin:0 0 1.5em 0; color:rgba(255,255,255,1); } #home-mutualisation h2 span { display:block; } #home-mutualisation h2 span:nth-of-type(1) { text-transform:uppercase; } #home-mutualisation .visuel { display:inline-block; vertical-align:top; height:auto; } #home-mutualisation .visuel img { position:relative; width:100%; height:auto; margin:0; padding:0; } #home-mutualisation button.afbtn { margin:4em 0 0 0; border-color:rgba(255,255,255,1); background-color:rgba(255,100,35,1); max-width:none; } body.desktop #home-mutualisation button.afbtn:hover { background-color:rgba(255,255,255,1); border-color:rgba(255,255,255,1); color:rgba(255,100,35,1); } #home-planning { position:relative; display:block; margin:0; padding:2rem 0; text-align:center; } #home-planning:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(225,242,246,1); } #home-planning h2 { text-align:center; margin:0 0 1em 0; } #home-planning > ul { font-size:0; padding:0.7rem 0 1.7rem 0; margin:0; display:block; } #home-planning > ul > li { position:relative; display:inline-block; vertical-align:top; margin:0 0 1rem 0; padding:3.5em 2.5em 1.5em 2.5em; background-color:rgba(255,255,255,1); border-radius:0.8rem; width:100%; } #home-planning > ul > li h3 { font-size:0.9em; line-height:1.2; padding-top:0.5em; padding-bottom:0; color:rgba(72,72,72,1); height:4em; font-family:Raleway, sans-serif; font-weight:400; } #home-planning > ul > li h3 > a { position:relative; display:block; top:50%; transform:translateY(-50%); } #home-planning > ul > li .categ { position:absolute; left:0; top:0; width:auto; height:3em; padding:0.5em 1.5em 0.5em 3em; color:rgba(255,255,255,1); max-width:90%; } #home-planning .sessions ul { text-align:left; } #home-planning > ul > li .categ:before { content:''; position:absolute; left:0; top:0; width:100%; height:3em; border-top-left-radius:0.8rem; border-bottom-right-radius:0.8rem; } #home-planning > ul > li .categ svg { position:absolute; display:block; vertical-align:middle; left:0.5em; top:0.5em; width:2em; height:2em; color:rgba(255,255,255,1); margin-right:1em; } #home-planning > ul > li .categ span { font-weight:600; font-size:0.8em; position:relative; display:block; text-transform:uppercase; top:50%; transform:translateY(-50%); line-height:1.2; } body.desktop #home-planning > ul > li a:hover { text-decoration:none; } #home-planning > ul > li.developpement .categ span { font-size:0.75em; } #home-presentation { position:relative; display:block; margin:0; padding:2rem 0; } #home-presentation:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(70,161,190,1); } #home-presentation > div { position:relative; margin:0 0 1em 0; color:rgba(255,255,255,1); text-align:center; } #home-presentation h2 { margin:0 0 2em 0; color:rgba(255,255,255,1); } #home-presentation > img { position:relative; display:block; width:100%; height:auto; border-radius:0.8rem; } #home-presentation button.afbtn { margin:4em 0 2em 0; border-color:rgba(255,255,255,1); } body.desktop #home-presentation button.afbtn:hover { border-color:rgba(255,255,255,1); } #home-chiffrescles { position:relative; display:block; margin:0; padding:2rem 0; } #home-chiffrescles ul { font-size:0; position:relative; display:block; margin:0 auto; padding:0; text-align:center; } #home-chiffrescles ul li { position:relative; display:inline-block; vertical-align:top; padding:0; margin:1rem 0; overflow:hidden; } #home-chiffrescles h2 { font-family:Raleway, sans-serif; } #home-chiffrescles h2 span { display:block; padding-bottom:0.5rem; line-height:1.2; } #home-chiffrescles h2 span:first-of-type { font-size:1.5em; font-weight:700; } #home-chiffrescles h2 sub { font-size:0.5em; bottom:0; } #home-chiffrescles div.fromrte p { font-size:0.7em; color:rgba(72,72,72,1); } #home-actus { position:relative; display:block; margin:0; padding:2rem 0; } #home-actus:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(225,242,246,1); } #home-actus h2 { text-align:center; margin:0 0 1em 0; } #home-actus > ul { font-size:0; position:relative; display:block; margin:0 auto; padding:0; } #home-actus > ul > li { position:relative; display:inline-block; vertical-align:top; padding:0; padding:0; margin:1rem 0; overflow:hidden; } #home-actus h3 { font-size:1.1em; margin:0; padding:0; padding-top:calc((0.66666666666667 * 100%)); padding-bottom:0.5em; } #home-actus h3 span.date { font-size:0.9em; font-weight:300; font-family:Raleway, sans-serif; position:relative; display:block; margin:0; padding:1.5em 0 0.5em 0; line-height:1; } #home-actus img { position:absolute; left:0; top:0; width:100%; height:auto; border-radius:0.8rem; } #home-actus .fromrte p { padding:0; margin:0; } #home-actus a { position:relative; display:block; font-weight:300; color:rgba(72,72,72,1); padding-top:1em; font-size:0.8em; font-style:italic; } body.desktop #home-actus ul li:hover a, body.desktop #home-actus a:hover { color:rgba(70,161,190,1); text-decoration:none; } #home-clients { position:relative; display:block; margin:0; padding:2rem 0 calc(2rem + 1rem) 0; } #home-clients:before { z-index:2; content:''; position:absolute; top:2rem; bottom:1rem; background-color:rgba(70,161,190,1); border-radius:0.8rem; box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.4); } #home-clients h2 { z-index:3; text-align:center; margin:0 0 1em 0; padding-top:2rem; color:rgba(255,255,255,1); } #home-clients ul { z-index:4; font-size:0; position:relative; display:block; margin:0; padding:0; } #home-clients ul li { position:relative; display:inline-block; vertical-align:top; height:0; margin:1rem 0; padding:0; overflow:hidden; background-color:rgba(255,255,255,1); border-radius:0.8rem; } #home-clients img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:auto; height:auto; max-width:80%; max-height:80%; filter:grayscale(100%); transition:filter 300ms ease 0ms; } body.desktop #home-clients ul li:hover img { filter:none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Bloc TEMOIGNAGE - ACCUEIL et INTERNE */ aside#temoignage { position:relative; display:block; margin:0; padding:2rem 0; min-height:6rem; } aside#temoignage:before { content:''; position:absolute; top:-4rem; bottom:0; width:100vw; left:50%; transform:translateX(-50%); background-color:rgba(225,242,246,1); } aside#temoignage h2 { color:rgba(70,161,190,1); z-index:3; display:block; margin:0 auto 1em auto; text-align:center; width:90%; } aside#temoignage div { position:relative; display:block; margin:0 auto; padding:0; color:rgba(72,72,72,1); width:90%; } aside#temoignage div.citation { text-align:center; margin-bottom:2em; } aside#temoignage div.citation:before, aside#temoignage div:first-of-type:after { z-index:1; content:''; position:absolute; width:4em; height:4em; background: transparent url('https://www.ladresseformation.fr/_chartes_/adresseformation/ressources/images/guillemets.svg') center center no-repeat; background-size:contain; } aside#temoignage div.citation:before { left:-3em; top:-1em; } aside#temoignage div.citation:after { right:-3em; bottom:-2em; } aside#temoignage div.citation p { z-index:2; position:relative; text-align:center; } aside#temoignage div.temoin { font-size:0.8em; text-align:right; margin-bottom:1em; } aside#temoignage div.temoin > span { position:relative; display:inline-block; text-align:left; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE INTERNE */ .interne section > h2 { padding-top:4rem; text-align:center; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE PRESENTATION */ .interne section#page-presentation > h2 { padding-bottom:1em; } #page-presentation { position:relative; display:block; margin:0; padding:0; } #page-presentation .intro { position:relative; text-align:center; display:block; margin:1em auto 4.5em auto; } #page-presentation .intro.fromrte p { font-size:1.1em; font-weight:400; text-align:center; } #page-presentation .prestations { position:relative; display:block; margin:0; padding:2rem 0; } #page-presentation .prestations:before { content:''; position:absolute; top:0; bottom:0; width:100vw; background-color:rgba(70,161,190,1); } #page-presentation .prestations > div { position:relative; font-size:1em; margin:0 0 1em 0; color:rgba(255,255,255,1); text-align:left; } #page-presentation .prestations h3 { position:relative; margin:0 0 2em 0; color:rgba(255,255,255,1); } #page-presentation .prestations > img { position:relative; display:block; width:100%; height:auto; border-radius:0.8rem; } #page-presentation .valeurs { position:relative; display:block; margin:0; padding:3rem 0; } #page-presentation .valeurs:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(225,242,246,1); } #page-presentation .valeurs > ul { font-size:0; position:relative; display:block; margin:0; padding:0; } #page-presentation .valeurs > ul > li { position:relative; display:inline-block; vertical-align:top; height:0; margin:1rem 0; padding:0; overflow:hidden; background-color:rgba(255,255,255,1); border-radius:0.8rem; } #page-presentation .valeurs > ul > li .fromrte p { padding-bottom:0; } #page-presentation .valeurs h3 { font-size:1.4em; position:relative; left:0; top:0; display:inline-block; width:auto; background-color:rgba(70,161,190,1); color:rgba(255,255,255,1); padding:0.5em 1em; border-bottom-right-radius:0.8rem; text-transform:uppercase; } #page-presentation .pedagogie { position:relative; display:block; margin:0; padding:2rem 0 0 0; } #page-presentation .pedagogie h3 { display:block; margin:0.5em auto 1.5em auto; } #page-presentation .pedagogie h4 { font-size:1.4em; display:block; margin:0 auto 1em auto; } #page-presentation .pedagogie > div { background-color:rgba(70,161,190,1); color:rgba(255,255,255,1); padding:5rem; } #page-presentation .pedagogie > ul { font-size:0; position:relative; display:block; margin:3rem 0 0 0; padding:0; } #page-presentation .pedagogie > ul > li { position:relative; display:inline-block; vertical-align:top; margin:0 0 2rem 0; width:100%; } #page-presentation .pedagogie > .fromrte ol li::before { color:rgba(255,255,255,1); } #page-presentation .pedagogie > .fromrte ul li:before { background-color:rgba(255,255,255,1); } #page-presentation .pedagogie > .fromrte hr { background-color:rgba(255,255,255,1); } #page-presentation .defaut { position:relative; display:block; margin:0; padding:0 0 2rem 0; } #page-presentation .defaut h3 { display:block; margin:0 auto 1em auto; } #page-presentation > button.afbtn { display:block; margin:2rem auto; width:auto; background-color:rgba(242,148,83,1); border-color:rgba(242,148,83,1); color:rgba(255,255,255,1); } body.desktop #page-presentation > button.afbtn:hover { background-color:rgba(255,255,255,1); border-color:rgba(242,148,83,1); color:rgba(242,148,83,1); } #page-presentation > .video { position:relative; display:block; margin:0 auto 4.5em auto; padding:0; width:61rem; height:calc(61rem * 9/16 ); } #page-presentation > .video video { position:relative; display:block; margin:0; padding:0; width:100%; } #page-presentation > .video iframe { position:relative; display:block; margin:0; padding:0; width:100%; height:100%; border:0; } #page-presentation > .visuel { position:relative; display:block; margin:0; padding:2rem 0 1rem 0; } #page-presentation > .visuel img { z-index:3; position:relative; display:block; margin:0; padding:0; width:100%; border-radius:0.8rem; } #page-presentation > .visuel:before { z-index:2; content:''; position:absolute; top:2rem; bottom:1rem; background-color:rgba(70,161,190,1); border-radius:0.8rem; box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.4); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* PAGE ACCOMPAGNEMENTS RH */ .interne section#page-accompagnementsrh > h2 { padding-bottom:1em; } #page-accompagnementsrh { position:relative; display:block; margin:0; padding:0; } #page-accompagnementsrh .intro { position:relative; text-align:center; display:block; margin:1em auto 4.5em auto; } #page-accompagnementsrh .intro.fromrte p { font-size:1.1em; font-weight:400; text-align:center; } #page-accompagnementsrh .prestations { position:relative; display:block; margin:0; padding:2rem 0; } #page-accompagnementsrh .prestations:before { content:''; position:absolute; top:0; bottom:0; width:100vw; background-color:rgba(70,161,190,1); } #page-accompagnementsrh .prestations > div { position:relative; font-size:1em; margin:0 0 1em 0; color:rgba(255,255,255,1); text-align:left; } #page-accompagnementsrh .prestations h3 { position:relative; margin:0 0 2em 0; color:rgba(255,255,255,1); } #page-accompagnementsrh .prestations > img { position:relative; display:block; width:100%; height:auto; border-radius:0.8rem; } #page-accompagnementsrh .valeurs { position:relative; display:block; margin:0; padding:3rem 0; } #page-accompagnementsrh .valeurs:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(225,242,246,1); } #page-accompagnementsrh .valeurs > ul { font-size:0; position:relative; display:block; margin:0; padding:0; } #page-accompagnementsrh .valeurs > ul > li { position:relative; display:inline-block; vertical-align:top; margin:1rem 0; padding:4rem 2rem 2rem 2rem; overflow:hidden; background-color:rgba(255,255,255,1); border-radius:0.8rem; } #page-accompagnementsrh .valeurs h3 { font-size:1.4em; position:absolute; left:0; top:0; display:inline-block; width:auto; background-color:rgba(70,161,190,1); color:rgba(255,255,255,1); padding:0.5em 2rem; text-transform:uppercase; } #page-accompagnementsrh .valeurs > ul > li { width:100%; } #page-accompagnementsrh .defaut { position:relative; display:block; margin:0; padding:0 0 2rem 0; } #page-accompagnementsrh .defaut h3 { display:block; margin:0 auto 1em auto; } #page-accompagnementsrh > .visuel { position:relative; display:block; margin:0; padding:2rem 0 1rem 0; } #page-accompagnementsrh > .visuel img { z-index:3; position:relative; display:block; margin:0; padding:0; width:100%; border-radius:0.8rem; } #page-accompagnementsrh > .visuel:before { z-index:2; content:''; position:absolute; top:2rem; bottom:1rem; background-color:rgba(70,161,190,1); border-radius:0.8rem; box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.4); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Pages ACTUS */ section.actu .detail { position:relative; padding-top:4rem; text-align:left; } section.actu .detail > h2 { position:relative; text-align:left; padding-bottom:1em; } section.actu .detail > h2 span.date { font-size:0.7em; font-weight:300; font-family:Raleway, sans-serif; position:relative; display:block; margin:0; padding:0 0 0.5em 0; line-height:1; } section.actu > .video { position:relative; display:block; margin:0 auto; padding:0; width:61rem; height:calc(61rem * 9/16 ); } section.actu > .video video { position:relative; display:block; margin:0; padding:0; width:100%; } section.actu > .video iframe { position:relative; display:block; margin:0; padding:0; width:100%; height:100%; border:0; } section.actu > .visuel { position:relative; display:block; margin:0; padding:2rem 0 1rem 0; } section.actu > .visuel img { z-index:3; position:relative; display:block; margin:0; padding:0; width:100%; border-radius:0.8rem; } section.actu > .visuel:before { z-index:2; content:''; position:absolute; top:2rem; bottom:1rem; background-color:rgba(70,161,190,1); border-radius:0.8rem; box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.4); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Pages FORMATIONS Listes */ section.formations { padding-top:2rem; } section.formations > button { margin:1rem auto 2rem auto; left:50%; transform:translateX(-50%); } section.formations > div.infos { position:relative; display:block; margin:2rem 0 0 0; padding:4rem 0; } section.formations > div.infos:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(225,242,246,1); } section.formations > div.infos h2 { line-height:1.2; margin-top:2em; padding-bottom:1em; } section.formations > div.infos h2:first-of-type { margin-top:0; } section.formations > div.infos .visuel { position:relative; display:block; margin:2rem 0 0 0; padding:0; width:100vw; height:auto; overflow:hidden; } aside#filtrer { text-align:center; } aside#filtrer button { font-size:1em; width:27%; margin:0 2rem; border-radius:0.8rem; padding:1em 0.2em; background-color:rgba(204,235,248,1); color:rgba(70,161,190,1); border-color:rgba(204,235,248,1); transition: transform 300ms ease; } aside#filtrer button.current { box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.4); background-color:rgba(70,161,190,1); color:rgba(255,255,255,1); border-color:rgba(70,161,190,1); transform:scale(1.1); } body.desktop aside#filtrer button:hover { background-color:rgba(204,235,248,1); color:rgba(70,161,190,1); border-color:rgba(204,235,248,1); transform:scale(1.1); } body.desktop aside#filtrer button.current:hover { background-color:rgba(70,161,190,1); color:rgba(255,255,255,1); border-color:rgba(70,161,190,1); } aside#filtrer h2 { font-size:1.6em; text-align:center; margin:1.5em 10rem 1.5em 10rem; } aside#mutualisation { position:relative; display:block; margin:2rem 0 2rem 0; padding:2rem 0 4rem 0; background-color:rgba(225,242,246,1); color:rgba(72,72,72,1); } aside#mutualisation:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(225,242,246,1); } aside#mutualisation h2 { text-align:center; margin:0 0 1.5em 0; } aside#mutualisation h2 span { display:block; } aside#mutualisation h2 span:nth-of-type(1) { text-transform:uppercase; } aside#mutualisation h3 { text-align:left; font-size:1.2em; color:rgba(72,72,72,1); font-family:Raleway, sans-serif; margin-top:2rem; margin-bottom:1rem; } aside#mutualisation .visuel { display:inline-block; vertical-align:top; height:auto; } aside#mutualisation .visuel img { position:relative; width:100%; height:auto; margin:0; padding:0; } aside#allformations { position:relative; display:block; margin:2rem 0 0 0; padding:4rem 0; } aside#allformations:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(70,161,190,1); } aside#allformations h2 { line-height:1.2; padding-bottom:1.5em; color:rgba(255,255,255,1); } aside#allformations h3 { font-size:1em; text-align:left; margin:0 0 1em 0; color:rgba(255,255,255,1); } aside#allformations .fromrte { color:rgba(255,255,255,1); } aside#allformations .fromrte ol li::before { color:rgba(255,255,255,1); } aside#allformations .fromrte ul li:before { background-color:rgba(255,255,255,1); } aside#allformations .fromrte hr { background-color:rgba(255,255,255,1); } aside#surmesure { position:relative; display:block; margin:0; padding:calc(2rem + 2rem) 0 calc(2rem + 1rem) 0; } aside#surmesure:before { z-index:2; content:''; position:absolute; top:2rem; bottom:1rem; background-color:rgba(255,255,255,1); border:5px solid rgba(70,161,190,1); border-radius:0.8rem; box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.4); left:0; width:100%; } aside#surmesure h2 { color:rgba(70,161,190,1); z-index:3; text-align:center; margin:0 4rem 1em 4rem; padding:2rem 0 1rem 0; } aside#surmesure > div { z-index:3; position:relative; text-align:center; display:block; margin:0 4rem 0 4rem; padding:0; } aside#surmesure > div.fromrte p { text-align:center; } aside#surmesure button.afbtn { z-index:3; text-align:center; position:relative; display:block; width:auto; margin:2rem auto; } .results { position:relative; display:block; margin:2rem 0; padding:0; } .results .vide { font-size:1.6em; text-align:center; margin:2.5em 10rem 3em 10rem; font-weight:600; font-family:Quicksand; } .results > ul { padding:0; margin:0; display:block; } .results > ul > li { font-size:0; position:relative; display:block; margin:0 0 1rem 0; padding:0; background-color:rgba(255,255,255,1); border-radius:0.8rem; box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.2); } .results > ul > li > div { position:relative; display:inline-block; vertical-align:top; padding:1em 1.5em 1em 1.5em; margin:0; width:100%; } .results > ul > li > div:not(.infos):before { content:''; position:absolute; left:0; top:0; background-color:rgba(221,221,221,1); } .results > ul > li h3 { font-size:1.2em; line-height:1.2; padding-top:0; padding-bottom:0.5em; font-family:Raleway, sans-serif; font-weight:600; } .results > ul > li p { font-size:0.9em; } .results > ul > li .etiquette { width:auto; display:inline-block; font-family:Quicksand; font-size:0.8em; font-weight:600; text-transform:uppercase; padding:0.5em 1em; margin-bottom:0.5em; color:rgba(255,255,255,1); border-radius:0.8rem; } .results > ul > li .categ { position:absolute; left:0; top:0; width:auto; height:3em; padding:0.5em; } .results > ul > li .categ:before { content:''; position:absolute; left:0; top:0; width:3em; height:3em; border-top-left-radius:0.8rem; border-bottom-right-radius:0.8rem; } .results > ul > li .categ svg { position:absolute; display:block; vertical-align:middle; left:0.5em; top:0.5em; width:2em; height:2em; color:rgba(255,255,255,1); margin-right:1em; } .results > ul > li .categ span { font-weight:600; font-size:0.8em; position:relative; display:block; text-transform:uppercase; top:50%; transform:translateY(-50%); line-height:1.2; } body.desktop .results > ul > li a:hover { text-decoration:none; } .results > ul > li .sessions { text-align:center; padding:1em 0.5em; } .results > ul > li .sessions h4 { padding-top:2em; font-size:1em; font-family:Raleway, sans-serif; font-weight:400; color:rgba(72,72,72,1); text-transform:uppercase; } .sessions ul { text-align:center; } .sessions ul li { display:inline-block; vertical-align:top; width:auto; padding:0.2em 1em; margin:1em 1em 0 0; border:1px solid rgba(72,72,72,1); border-radius:8px; height:3em; } .sessions ul li.shared { background-color:rgba(130,204,236,1); border-color:rgba(111,184,216,1); } .sessions ul li:last-of-type { margin-right:0; } .sessions ul li > div { display:block; text-align:center; } .sessions ul li > div:last-of-type { text-transform:uppercase; font-size:0.6em; font-weight:600; } .sessions ul li > div span, .sessions ul li > div a { display:inline-block; vertical-align:middle; } .sessions ul li > div span.sep { font-size:0.8em; opacity:0.4; padding:0 0.6em; } .sessions ul li > div:last-of-type span:not(:first-of-type):before { content:'-'; position:relative; display:inline-block; vertical-align:middle; padding:0 0.5em; opacity:0.4; } .sessions ul li > div:first-of-type:last-of-type { height:100%; } .sessions ul li > div:first-of-type:last-of-type span, .sessions ul li > div:first-of-type:last-of-type a { text-transform:none; font-size:1.3em; position:relative; display:inline-block; top:50%; transform:translateY(-50%); } .sessions ul li > form button { opacity:0; transition:opacity 300ms ease 500ms; font-size:0.6em; position:absolute; height:2em; width:2em; right:0; top:0; transform:translate(50%,-50%); background-color:rgba(72,72,72,1); color:rgba(255,255,255,1); margin:0; padding:0; border-radius:50%; border-color:rgba(72,72,72,1); } .sessions ul li > form button svg { position:absolute; left:50%; top:50%; width:40%; height:40%; transform:translate(-50%,-50%); stroke-width:10; } .sessions ul li.add { opacity:0; transition:opacity 300ms ease 500ms; } .sessions ul li.add.month { opacity:0; height:1.8em; width:calc( (100% / 8) - 1em); } body:not(.desktop) .sessions ul li.add, body:not(.desktop) .sessions ul li > form button { opacity:1; transition:opacity 300ms ease 0ms; } body:not(.desktop) .sessions ul li.add.month { opacity:0; } body.desktop .sessions:hover ul li.add, body.desktop .sessions:hover ul li > form button { opacity:1; transition:opacity 300ms ease 0ms; } .sessions ul li.add > form button { top:50%; } .sessions ul li.add > form button svg { transform-origin:center; transform: translate(-50%,-50%) rotate(45deg); } .sessions ul li.add > form input, .sessions ul li.add > form select { display:block; outline:0; padding:0; margin:0; font-size:0.6em; background-color:transparent; width:12em; } .sessions ul li.add > form select option { font-size:1.3em; } body.desktop .sessions ul li > div a { text-decoration:none; } body.desktop .sessions ul li > form button:hover { color:rgba(72,72,72,1); border-color:rgba(72,72,72,1); } .pictos ul { font-size:0; position:relative; padding:0; margin:0; display:block; } .pictos ul > li { position:relative; display:inline-block; vertical-align:top; padding:0; margin:0 0 0.6em 0; width:100%; } .pictos ul > li:last-of-type { margin-bottom:0; } .pictos ul li > div { font-size:0.9em; position:relative; display:inline-block; width:auto; margin:0; padding:0 0 0 2.5em; } .pictos ul > li svg { position:absolute; display:block; vertical-align:middle; left:0; top:50%; transform:translateY(-50%); width:1.6em; height:1.6em; } .pictos ul > li h4 { display:block; position:relative; font-weight:600; text-align:left; text-transform:uppercase; font-size:0.8em; font-family:Quicksand; font-weight:600; } .pictos ul > li span { display:block; position:relative; font-weight:400; text-align:left; line-height:1.2; } .pagination { position:relative; display:block; width:100%; font-size:0; margin:3rem auto 3rem auto; padding:0; text-align:center; } .pagination > span, .pagination > a { vertical-align:middle; position:relative; display:inline-block; width:auto; height:auto; margin:0; padding:0; line-height:1; transition: all 300ms ease; color:rgba(72,72,72,1);} .pagination > span { padding:0 1em; } .pagination > a { padding:0 0.5em; } .pagination > a span { padding:0 0.5em; display:inline-block; vertical-align:middle; width:8em; text-align:left; font-size:0.8em; } .pagination > a.next span { text-align:right; } .pagination a svg { display:inline-block; margin:0; padding:0; position:relative; height:0.8em; width:0.8em; stroke-width:10; vertical-align:middle; } .pagination a.inactive { opacity:0.2; cursor:default; } body.desktop .pagination a:hover { text-decoration:none; } body.desktop .pagination a:not(.inactive):hover { color:rgba(70,161,190,1); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Pages FORMATION Fiches */ .ficheheader { padding:5rem 0 3rem 0; } .ficheheader:before { content:''; position:absolute; top:0; bottom:-5rem; width:100vw; left:50%; transform:translate(-50%); } .ficheheader:after { content:''; position:absolute; bottom:-10rem; height:2rem; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(255,255,255,1); } .ficheheader h2 { color:rgba(255,255,255,1); padding:0; width:60%; line-height:1.2; } .ficheheader h2 > span { position:relative; display:block; font-size:0.6em; padding-bottom:0.5em; } .ficheheader h3 { color:rgba(255,255,255,1); font-size:1em; padding:0.5em 0; width:75%; } .ficheheader .etiquette { position:relative; font-size:1em; font-weight:600; font-family:Quicksand; display:inline-block; padding:0.5em 1em; margin:0.5em 1em 0 0; border-top-left-radius:0.8rem; border-bottom-right-radius:0.8rem; background-color:rgba(255,255,255,1);} .ficheheader > svg { position:absolute; right:0; top:-2rem; height:calc(100% + 2*2rem + 5rem); width:auto; color:rgba(255,255,255,1); opacity:0.4; } .fichedescriptif { min-height:40rem; } .fichedescriptif { position:relative; display:block; margin:0; padding:calc(2rem + 2rem) 0 calc(2rem + 1rem) 0; } .fichedescriptif:before { z-index:2; content:''; position:absolute; top:2rem; bottom:1rem; background-color:rgba(255,255,255,1); border-radius:0.8rem; box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.4); left:0; width:100%; } .fichedescriptif > div { z-index:10; margin:0 4rem; padding:2rem 0; } .fichedescriptif .pictos { border-bottom:1px solid; } .fichedescriptif .sessions { border-top:1px solid; } .fichedescriptif .boutons { border-top:1px solid; text-align:center; } .fichedescriptif .boutons button.afbtn { min-height:4em; margin:0 1em; } .fichedescriptif .textes { font-size:0; } .fichedescriptif .textes > div { display:inline-block; vertical-align:top; margin:0; padding:0; width:100%; } .fichedescriptif .textes h4 { font-size:1.2em; padding-bottom:1em; } .fichedescriptif .textes .fromrte { padding-bottom:2em; } .fichedescriptif .sessions ul { margin-top:2em; text-align:left; } .fichedescriptif .sessions h4 { font-size:1.2em; padding-bottom:0.5rem; } .fichedescriptif .sessions h5 { font-size:1em; padding-top:0.5rem; color:rgba(72,72,72,1); font-family:Raleway, sans-serif; } .fichedescriptif .sessions .linkmutualisation { padding-top:1em; } .fichedescriptif .sessions .linkmutualisation a { color:rgba(70,161,190,1); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Pages CONTACT - DEVIS */ section.contact { font-size:0; position:relative; } section.contact > div { position:relative; display:inline-block; vertical-align:top; padding:4rem 0 4rem 0; } section.contact > div.visuel { padding-top:0; } section.contact > div.visuel > img { position:relative; display:block; width:100%; height:auto; } section.contact > div:nth-of-type(1) { z-index:2; background-color:rgba(255,255,255,1); border-bottom-right-radius:0.8rem; } section.contact > div:nth-of-type(1):before { content:''; background-color:rgba(255,255,255,1); position:absolute; top:-10rem; left:-100vw; right:-100vw; bottom:0; box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.2); border-bottom-right-radius:0.8rem; } section.contact > div:nth-of-type(2) { z-index:1; padding-left:4rem; background-color:rgba(70,161,190,1); color:rgba(255,255,255,1); } section.contact:before { content:''; position:absolute; top:0; left:-100vw; right:-100vw; bottom:0; background-color:rgba(70,161,190,1); } section.contact h2 { margin:0 0 0.5em 0; text-transform:uppercase; text-align:left; margin-bottom:1em; } section.contact > div:nth-of-type(2) h2 { color:rgba(255,255,255,1); } section.contact h3 { color:rgba(255,255,255,1); font-size:1.4em; line-height:1.4; margin:1.5em 0 0.5em 0; padding:0 0 0 1.6em; text-transform:uppercase; text-align:left; } section.contact svg { position:absolute; display:block; padding:0; margin:0; left:0; top:50%; transform:translateY(-50%); width:1.2em; height:1.2em; } section.contact > div > ul { position:relative; display:block; margin:0; padding:0; list-style:none; } section.contact > div > ul > li { display:block; width:100%; } section.contact > div:nth-of-type(2) .fromrte ol li::before { color:rgba(255,255,255,1); } section.contact > div:nth-of-type(2) .fromrte ul li:before { background-color:rgba(255,255,255,1); } section.contact > div:nth-of-type(2) .fromrte hr { background-color:rgba(255,255,255,1); } section.contact fieldset { font-size:0; position:relative; display:inline-block; vertical-align:top; margin:0 0 1rem 0; padding:0; border:0; width:100%; } section.contact label, section.contact fieldset > div { width:100%; display:inline-block; vertical-align:top; margin:0; padding:0; } section.contact label > span, section.contact fieldset > div > span { width:100%; display:inline-block; vertical-align:top; padding:0.5em 0.5em 0.5em 1em; } section.contact fieldset > div > span { padding-right:0; } section.contact label.option { width:auto; text-transform:uppercase; } section.contact label.boolcheck { margin-top:1rem; text-transform:none; } section.contact label.consentementrgpd { margin-top:0.2rem; text-transform:none; } section.contact option.placeholder { color:rgba(54,54,54,0.55); } section.contact input, section.contact select, section.contact textarea { font-size:1em; background-color:transparent; border:1px solid rgba(70,161,190,1); padding:0 1em; } section.contact textarea { height:10em; } section.contact input[type="radio"] + span:before, section.contact input[type="checkbox"] + span:before, section.contact input[type="radio"] + span:after, section.contact input[type="checkbox"] + span:after { top:0.05em !important; border-radius:3px !important; } section.contact input[type="radio"] + span:before, section.contact input[type="checkbox"] + span:before { border-color:rgba(242,148,83,1) !important; } section.contact input[type="radio"] + span:after, section.contact input[type="checkbox"] + span:after { background-color:rgba(242,148,83,1) !important; } section.contact input[type="radio"] + span:before, section.contact input[type="radio"] + span:after { border-radius:50% !important; } section.contact select { background:transparent url(../../_chartes_/adresseformation/ressources/images/forms/dropdown.svg) calc(100% - 0.5em) center no-repeat !important; padding-right:2.5em !important; } section.contact input[name="date"] { background:transparent url(../../_chartes_/adresseformation/ressources/images/forms/date.svg) calc(100% - 0.5em) center no-repeat; padding-right:2.5em; } .datepicker table tr td.disabled, body.desktop .datepicker table tr td.disabled:hover { opacity:0.3; } section.contact form label input[type="checkbox"], section.contact form label input[type="radio"] { padding-top: 0 !important; padding-bottom: 0 !important; position: relative !important; left: 0 !important; top: 1.2rem !important; transform: scale(1) !important; } section.contact button { position:relative; background-color:rgba(70,161,190,1); color:rgba(255,255,255,1); border-color:rgba(70,161,190,1); padding:1em 2em; font-weight:600; text-transform:uppercase; display:inline-block; vertical-align:middle; border-radius:calc( (1em + (2 * 1em)) / 2); transition:color 300ms ease, background-color 300ms ease; } body.desktop section.contact button:hover { background-color:rgba(255,255,255,1); color:rgba(70,161,190,1); border-color:rgba(70,161,190,1); } section.contact .cnil { display:block; width:auto; margin:3rem 0 0 0; font-size:0.7em; } section.contact span.asterisque { display:block; width:auto; margin:1rem 0; } section.contact sup { font-size:0.9em; color:rgba(242,148,83,1); font-weight:700; top:-0.1em; } section.contact div.succes { padding-top:3rem; padding-bottom:5rem; text-align:center; } section.contact div.erreur { padding-bottom:3rem; } section.contact aside.mapcontact ul > li { position:relative; list-style-type:none; padding:0 0.2em; } section.contact aside.mapcontact ul > li:before { content:''; display:none; } section.contact .fromrte.etape { padding:1.5em 2.5em; margin:4em 0 1em 0; border:1px solid rgba(255,255,255,1); border-radius:0.8rem; font-size:0.9em; } section.contact .fromrte:nth-of-type(2) { margin-top:2em; } section.contact .fromrte.etape > svg { position:absolute; left:50%; top:-2em; height:1.5em; width:auto; transform:translate(-50%,-50%); } section.contact .fromrte.etape > span { position:absolute; left:0; top:0; height:2em; width:2em; text-align:center; vertical-align:middle; background-color:rgba(255,255,255,1); border-radius:50%; transform:translate(-50%,-50%); font-size:1.4em; color:rgba(70,161,190,1); font-weight:600; font-family:Quicksand; display:inline-block; } section.contact .fromrte.etape > span > span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:auto; height:auto; padding:0; margin:0; line-height:1; } section.contact .fromrte.etape h3 { font-size:1em; margin-top:0; margin-bottom:1em; padding-left:0; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* GOOGLEMAPS */ .mapwrap { display:block; position:relative; overflow:hidden; aspect-ratio:10/4; width:100%; cursor:pointer; } .mapwrap:before { z-index:2; content:''; position:absolute; left:10px; top:50%; transform:translateY(-50%); width:40px; height:81px; background:transparent url('https://www.ladresseformation.fr/_chartes_/adresseformation/ressources/images/map/map-zoom.jpg') no-repeat top left; background-size:contain; box-shadow:rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius:2px; } .mapwrap > picture { z-index:1; position:absolute; inset:0; width:100%; height:100%; } .mapwrap > picture > img { position:absolute; inset:0; left:50%; top:50%; transform:translate(-50%,-50%); max-width:initial; min-width:100%; object-fit:cover; } .mapwrap > div { z-index:3; height:100%; width:100%; opacity:0; transition:opacity 0.5s linear 0.5s; } .mapwrap > div > div { background-color:transparent !important; } .mapwrap > div.active { opacity:1; } .mapwrap { margin-top:2rem; border:5px solid rgba(255,255,255,1); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ANIMATION SCROLL */ .scrollanim.init { opacity:0; transition:opacity 300ms ease 0ms, transform 300ms ease 0ms; } .scrollanim { opacity:1; transition:opacity 500ms ease 0ms, transform 300ms ease 0ms; } .scrollanim.frombottom.init { opacity:0; transform:translateY(50%); } .scrollanim.frombottom { opacity:1; transform:translateY(0); } .scrollanim.fromtop.init { opacity:0; transform:translateY(-50%); } .scrollanim.fromtop { opacity:1; transform:translateY(0); } .scrollanim.fromleft.init { opacity:0; transform:translateX(-50%); } .scrollanim.fromleft { opacity:1; transform:translateX(0); } .scrollanim.fromright.init { opacity:0; transform:translateX(50%); } .scrollanim.fromright { opacity:1; transform:translateX(0); } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* MENTIONS LEGALES */ section#page-mentionslegales { font-family:Verdana, sans-serif; color:rgba(72,72,72,1); font-weight:300; display:block; margin:0 auto; padding:0 0 3rem 0; } section#page-mentionslegales h2 { font-family:Verdana, sans-serif; font-size:1.2em; text-transform:uppercase; font-weight:600; padding-bottom:1em; text-align:left; } section#page-mentionslegales h3 { font-family:Verdana, sans-serif; font-size:0.8em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:1em; text-align:left; } section#page-mentionslegales h4 { font-family:Verdana, sans-serif; font-size:0.8em; font-weight:600; padding-top:1.5em; padding-bottom:1em; text-align:left; } section#page-mentionslegales .fromrte p { font-size:0.8em; color:rgba(72,72,72,1); text-align:justify; } section#page-mentionslegales .fromrte li { font-size:0.8em; color:rgba(72,72,72,1); text-align:justify; } section#page-mentionslegales strong { font-weight:600; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* 404 */ section.erreur > div.infos { display:block; text-align:center; padding:0 0 4rem 0; } section.erreur > div.infos > h2 { font-size:4em; color:rgba(72,72,72,1); padding-bottom:1rem; line-height:1; } section.erreur .fromrte p { text-align:center; } section.erreur button { position:relative; text-transform:uppercase; display:inline-block; margin-top:1rem; padding:1em 1.5em; } section.erreur > .visuel { position:relative; display:block; margin:0; padding:0; } section.erreur > .visuel img { z-index:3; position:relative; display:block; margin:0; padding:0; width:100%; height:auto; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* AUTHENTIFICATION */ section.section-auth { padding-top:4rem; } section.section-auth { width:45%; margin:0 auto 15rem auto; } section.section-auth h1 { padding:3rem 0 2rem 0; } section.section-auth input { margin-bottom:0.5em; } section.section-auth button { position:relative; text-transform:uppercase; display:inline-block; vertical-align:middle; margin-top:1rem; } section.section-auth .retour { padding-bottom:1.5em; } section.section-auth #ul-auth { list-style-type:none; margin:2rem 0; } section.section-auth #ul-auth li { text-transform:uppercase; } body.desktop section.section-auth #ul-auth li a:hover { color:rgba(70,161,190,1); text-decoration:none; } section#page-compte.section-auth { width:60%; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* ADMIN */ section.admin, section.adminliste, section.adminarbo { padding:4em 0; } .interne section.admin h2 { font-size:1.4em; text-transform:uppercase; padding-top:0; padding-bottom:1em; } section.admin h3 { font-size:1em; } section.admin > ul { padding:0; margin:0; display:block; } section.admin > ul > li { position:relative; display:block; margin:0 0 1rem 0; padding:0; background-color:rgba(255,255,255,1); border-radius:0.8rem; box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.2); } section.admin > ul > li > div { position:relative; display:inline-block; vertical-align:top; padding:1em 1.5em 1em 1.5em; margin:0; width:100%; } section.admin .sessions ul { text-align:left; } section.admin > ul > li.add { margin-top:3em; } section.admin > ul > li.add > form button svg { transform-origin:center; transform: translate(-50%,-50%) rotate(45deg); } section.admin select { color:rgba(72,72,72,1); display:block; outline:0; font-size:1em; background-color:transparent; width:100%; height:auto; border:0; border-radius:0.8rem; padding:1em 1.5em; margin:0; } section.admin > form > select { color:rgba(255,255,255,1); font-size:1.2em; padding:0.5em calc(1.5em / 1.2); background-color:rgba(70,161,190,1); margin:2em 0; box-shadow: 0.15rem 0.15rem 0.5rem 0px rgba(54,54,54,0.2); } section.admin > form > select option { font-size:0.8em; background-color:rgba(255,255,255,1); color:rgba(72,72,72,1); border-color:transparent; } section.admin button { font-size:0.6em; position:absolute; height:2em; width:2em; right:1em; top:50%; transform:translateY(-50%); background-color:rgba(72,72,72,1); color:rgba(255,255,255,1); margin:0; padding:0; border-radius:50%; border-color:rgba(72,72,72,1); } section.admin button svg { position:absolute; left:50%; top:50%; width:40%; height:40%; transform:translate(-50%,-50%); stroke-width:10; transition:all 300ms ease; } body.desktop section.admin button:hover { color:rgba(72,72,72,1); border-color:rgba(72,72,72,1); } body:not(.desktop) li.add.month { display:none; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* FOOTER */ footer { font-size:0; z-index:900; position:relative;; background-color:rgba(255,255,255,1); overflow:hidden; } body.desktop footer a:hover { text-decoration:none; } footer:before { z-index:1051; content:''; background-color:transparent; position:absolute; width:100vw; left:50%; transform:translate(-50%); height:1rem; top:calc(-1 * 1rem); box-shadow: 0px 0px 1rem 0px rgba(54,54,54,0.2); } footer > div.liquide { position:relative; } footer aside { display:block; width:100%; background-color:rgba(255,255,255,1); color:rgba(72,72,72,1); padding:2rem 0; } footer aside.coords { padding-top:calc( (12rem * 0.375) + 2rem ); } footer aside.coords > span { position:absolute; top:2rem; left:0; } footer aside.coords > span { font-size:12rem; } footer aside.coords > ul { font-size:0; } footer aside.coords > ul > li { font-weight:500; line-height:1.2; position:relative; display:block; padding:0 0 0 2.5em; margin:1.2em 0; } footer aside.coords > ul > li:last-of-type { margin-bottom:0.5rem; } footer aside.coords > ul svg { position:absolute; display:block; padding:0; margin:0; left:0; top:50%; transform:translateY(-50%); width:1.8em; height:1.8em; color:rgba(70,161,190,1); } footer aside.links ul { font-size:0; display:block; padding:0; margin:0; margin-top:2rem; } footer aside.links ul:first-of-type { margin-top:0; } footer aside.links ul > li { display:inline-block; width:auto; } footer aside.links ul.certifications > li img { height:7em; width:auto; } footer aside.links ul.certifications > li p { font-size:0.75em; padding-left:calc(5em / 4); padding-bottom:0.5em; } footer aside.links ul.certifications > li a { font-size:0.75em; padding-left:calc(5em / 4); padding-bottom:0.5em; } body.desktop footer aside.links ul.certifications > li a:hover { color:rgba(70,161,190,1); text-decoration:none; } footer aside.links ul.sociaux > li a { font-size:1em; position:relative; display:inline-block; width:auto; background-color:rgba(70,161,190,1); color:rgba(255,255,255,1); border:1px solid rgba(70,161,190,1); height:2em; width:2em; margin-left:0.5em; border-radius:50%; transition:color 300ms ease, background-color 300ms ease; } footer aside.links ul.sociaux > li:first-of-type a { margin-left:0; } body.desktop footer aside.links ul.sociaux > li a:hover { background-color:rgba(255,255,255,1); color:rgba(70,161,190,1); } footer aside.links ul.sociaux > li svg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:50%; height:50%; } footer nav { position:relative; display:block; background-color:rgba(166,196,3,1); color:rgba(255,255,255,1); } footer nav:before { content:''; position:absolute; top:0; bottom:0; width:100vw; background-color:rgba(166,196,3,1); } footer nav ul { display:block; padding:2em 4em; margin:0; } footer nav ul > li { font-size:0.8em; display:block; padding:1em 0; margin:0; } footer nav ul > li button { font-size:1em; font-weight:600; text-transform:uppercase; padding:0; margin:0; color:rgba(255,255,255,1); background-color:transparent; border-color:transparent; } body.desktop footer nav ul > li button:hover { color:rgba(255,255,255,1); background-color:transparent; border-color:transparent; } footer .copyright { background-color:rgba(54,54,54,1); color:rgba(255,255,255,1); text-align:center; } footer .copyright:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(54,54,54,1); } footer .copyright > span, footer .copyright > a { font-size:0.8em; display:inline-block; margin:0; padding:1.2em 1em; text-transform:uppercase; vertical-align:top; line-height:1; } footer .copyright > span.sep { padding-left:0; padding-right:0; } footer .copyright > span:first-of-type { text-transform:none; padding-right:3rem; } footer .copyright > span:last-of-type { border-right:0; } footer .copyright a { text-transform:none; } body.desktop footer .copyright a:hover { text-decoration:none; } /* ------------------------------------------------------------------------------------------------------------- */ /* RESPONSIVE */ html { font-size:10px; font-size:1vw; } #en2mots { background-color:rgba(255,255,255,1); width:100%; max-width:2560px; margin:0 auto; position:relative; } /* AFFICHAGE PANORAMIC */ /* Attention, le style panoramic n'est pas ajouté sur body mais sur html html.panoramic { left:calc( ( 100% - 2.5 * 100vh ) / 2); width:calc(2.5 * 100vh); font-size:2vh; text-align:center; } */ /* AFFICHAGE FONT MAXI */ @media (min-width:2000px) { html { font-size:20px; } body { font-size:0.9rem; } .liquide { width:calc(2000px * (80 / 100)); } } /* AFFICHAGE MAXI */ @media (min-width:2560px) { .litebox-overlay .litebox-container { margin-left:auto; margin-right:auto; } .litebox-overlay .litebox-inline-html { width:960px; } } /* AFFICHAGE NORMAL */ @media (orientation:portrait) and (min-width:801px), (orientation:landscape) and (min-width:501px) { /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header #interlocuteur > span, header nav ul > li, #ariane ul > li, .criteres > div, .criteres > span, #home-planning > ul > li, #home-chiffrescles ul li, #home-actus ul li, #home-clients ul li, #page-presentation .valeurs > ul > li, #page-presentation .pedagogie > ul > li, #page-accompagnementsrh .valeurs > ul > li, .results > ul > li > div, .pictos ul > li, .pagination > span, .pagination > a, .fichedescriptif .textes > div, section.contact > div, section.contact label, section.contact fieldset > div, footer aside, footer aside.coords > ul > li, footer aside.links ul > li, footer nav, footer .copyright { font-size:0.9rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ main h1, main h2, main h3, main h4, main h5, main h6 { font-size:1.44rem; } button.afbtn { font-size:calc(0.8 * 0.9rem); max-width:14vw; } header #interlocuteur, header nav { padding-right:calc(13 * 0.9rem); text-align:right; } #ariane { position:absolute; top:0; left:0; } /* RECHERCHE - CATEGORIES */ .criteres > span { font-size:calc(1.2 * 0.9rem); } .search form { width:70%; } .categories h2 { font-size:1.4em; } .categories ul { width:80%; } .categories ul li { display:inline-block; vertical-align:top; width:30%; } .categories ul li a { margin:1em 0.5em 0 0.5em; text-align:center; } .categories ul li a > span { text-align:center; } .categories ul li a > span svg { left:50%; transform:translateX(-50%); } .categories ul li.current a { transform:scale(1.1); } body.desktop .categories ul li a:hover { transform:scale(1.05); } body.desktop .categories ul li.current a:hover { transform:scale(1.1); } .souscategories h2 { font-size:1.4em; } .souscategories ul { width:100%; } .souscategories ul li { display:inline-block; vertical-align:top; width:32%; } .souscategories ul li a { margin:1em 0.5em 0 0.5em; text-align:center; } .souscategories ul li a > span { text-align:center; } .souscategories ul li a > span svg { left:50%; transform:translateX(-50%); } .souscategories ul li.current a { transform:scale(1.1); } body.desktop .souscategories ul li a:hover { transform:scale(1.05); } body.desktop .souscategories ul li.current a:hover { transform:scale(1.1); } .interne section > h2 { font-size:2em; } /* ACCUEIL */ #home-planning, #home-presentation, #home-chiffrescles, #home-actus, #home-clients, aside#temoignage { padding-left:9rem; padding-right:9rem; } #home-mutualisation { padding-left:14rem; padding-right:14rem; } #home-mutualisation div.fromrte { padding-right:12rem; } #home-mutualisation .visuel { width:12rem; position:absolute; right:14rem; bottom:3rem; } #home-mutualisation button.afbtn { white-space:nowrap; margin-left:1em; } #home-mutualisation button.afbtn:first-of-type { margin-left:0; } #home-formations .visuel { width:50%; } #home-formations .visuel:before { right:13%; } #home-formations .criteres { position:absolute; right:0; top:50%; transform:translateY(-50%); width:50%; } #home-formations .search h2 { font-size:1.4em; } #home-formations .categories h2 { font-size:1.4em; } #home-planning > ul > li { width:calc((100% - 2rem) / 3); margin-right:1rem; } #home-planning > ul > li:nth-of-type(3n) { margin-right:0; } #home-planning > ul > li .categ { max-width:75%; } #home-presentation { padding:4rem 9rem 4rem 40%; } #home-presentation:before { width:50vw; transform:translate(-100%); } #home-presentation > div { position:absolute; left:9rem; top:50%; transform:translateY(-50%); width:25%; text-align:left; } #home-chiffrescles ul li { width:calc(33% - (5% * (2 / 3))); margin-right:5%; } #home-chiffrescles ul li:nth-of-type(3n) { margin-right:0; } #home-actus > ul > li { width:calc(50% - (5% * (1 / 2))); margin-right:5%; } #home-actus > ul > li:nth-of-type(2n) { margin-right:0; } #home-clients:before { left:9rem; width:calc(100% - (2 * 9rem)); } #home-clients ul { margin:0 4%; } #home-clients ul li { width:calc((100% / 6) - (2 * 2%)); padding-bottom:calc((100% / 6) - (2 * 2%)); margin-left:2%; margin-right:2%; } aside#temoignage h2 { width:65%; } aside#temoignage div { width:65%; } /* Pages FORMATIONS - Liste */ section.formations > div.results, section.formations > div.infos, aside#mutualisation, aside#allformations, aside#surmesure, .ficheheader, .fichedescriptif { padding-left:9rem; padding-right:9rem; } section.formations .search form { width:55%; } section.formations .top .search form { width:80%; } section.formations .criteres > div { width:45%; margin:0 auto; } section.formations .criteres > span:last-of-type { width:10%; height:20rem; margin:0 auto; } section.formations .criteres > span:last-of-type:before { width:1px; height:100%; } section.formations .search h2 { font-size:1.4em; } section.formations .criteres.categ > div.search { width:100%; padding:2rem 9rem 0 9rem; } section.formations .criteres.categ > span:first-of-type:before { width:calc(100% - 2 * 9rem); } section.formations > div.infos h2 { font-size:1.4em; } section.formations > div.infos.intro { padding-right:50%; } section.formations > div.infos.intro .visuel { position:absolute; left:calc(50% + 10rem); margin:0; padding:0; top:0; height:100%; width:calc(50vw - 10rem); } section.formations > div.infos.complement { font-size:0; } section.formations > div.infos.complement h2 { font-size:calc(1.4 * 0.9rem); display:inline-block; vertical-align:top; width:50%; padding-bottom:0; } section.formations > div.infos.complement > div { font-size:0.9rem; display:inline-block; vertical-align:top; width:50%; padding-left:10%; } aside#mutualisation .concret { padding-right:20rem; } aside#mutualisation .visuel { width:16rem; position:absolute; right:9rem; bottom:1rem; } aside#surmesure:before { left:9rem; width:calc(100% - (2 * 9rem)); } aside#surmesure h2 { text-align:left; padding-right:20rem; } aside#surmesure > div { text-align:left; padding-right:20rem; padding-bottom:2rem; } aside#surmesure > div.fromrte p { text-align:left; } aside#surmesure button.afbtn { position:absolute; right:calc(9rem + 4rem); top:calc(50% - 2rem); transform:translateY(-50%); max-width:16rem; } .results > ul > li > div { height:11.5em; } .results > ul > li > div.infos { width:45%; padding-top:3em; padding-left:3.5em; } .results > ul > li > div.sessions { width:30%; } .results > ul > li > div.pictos { width:25%; } .results > ul > li > div:not(.infos):before { width:1px; height:100%; } .results > ul > li .categ { max-width:90%; padding-left:3.5em; } .results > ul > li .etiquette { position:absolute; left:-3em; top:50%; transform-origin:top left; transform: rotate(-90deg) translateX(-50%); border-bottom-left-radius:0; border-bottom-right-radius:0; } .results > ul > li h3 { font-size:1.2em; } .pictos ul { top:50%; transform:translateY(-50%); } .fichedescriptif:before { left:9rem; width:calc(100% - (2 * 9rem)); } .fichedescriptif .pictos { text-align:center; } .fichedescriptif .pictos ul > li { width:auto; margin:0 3em 0 0; padding-right:3em; border-right:1px solid; } .fichedescriptif .pictos ul > li:last-of-type { margin-right:0; padding-right:0; border-right:0; } .fichedescriptif .textes > div { width:50%; } .fichedescriptif .textes > div:firt-of-type { padding-right:2em; } .fichedescriptif .textes > div:last-of-type { padding-left:2em; } /* Page PRESENTATION */ #page-presentation .intro, #page-presentation .prestations, #page-presentation .pedagogie, #page-presentation .defaut, #page-presentation .visuel { padding-left:9rem; padding-right:9rem; } #page-presentation .prestations { padding:4rem 9rem 4rem 55%; } #page-presentation .prestations:before { right:35%; } #page-presentation .prestations > div { position:absolute; left:9rem; top:50%; transform:translateY(-50%); width:35%; text-align:left; } #page-presentation .valeurs > ul > li { width:calc((100% / 2) - (2rem * (1 / 2))); margin-right:2rem; padding-bottom:calc((40% / 2) - (2rem * (1 / 2))); } #page-presentation .valeurs > ul > li:nth-of-type(2n) { margin-right:0; } #page-presentation .valeurs h3 { position:absolute; } #page-presentation .valeurs div { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:75%; height:auto; padding-top:1em; } #page-presentation .pedagogie > ul > li { width:calc(50% - (6rem * (1 / 2))); margin-right:6rem; } #page-presentation .pedagogie > ul > li:nth-of-type(2n) { margin-right:0; } #page-presentation .visuel:before { left:9rem; width:calc(100% - (2 * 9rem)); } /* Page ACCOMPAGNEMENTS RH */ #page-accompagnementsrh .intro, #page-accompagnementsrh .prestations, #page-accompagnementsrh .defaut, #page-accompagnementsrh .visuel { padding-left:9rem; padding-right:9rem; } #page-accompagnementsrh .valeurs h3 { border-bottom-right-radius:0.8rem; } #page-accompagnementsrh .prestations { padding:4rem 9rem 4rem 55%; } #page-accompagnementsrh .prestations:before { right:35%; } #page-accompagnementsrh .prestations > div { position:absolute; left:9rem; top:50%; transform:translateY(-50%); width:35%; text-align:left; } #page-accompagnementsrh .visuel:before { left:9rem; width:calc(100% - (2 * 9rem)); } /* Pages ACTUS */ section.actu .detail, section.actu .visuel { padding-left:9rem; padding-right:9rem; } section.actu .visuel:before { left:9rem; width:calc(100% - (2 * 9rem)); } /* Page CONTACT */ section.contact > div { width:50%; } section.contact > div:nth-of-type(1):before { right:0; } section.contact > div:nth-of-type(1) { min-height:50rem; padding-right:4rem; margin-bottom:6rem; } section.contact > div:nth-of-type(2) { min-height:100%; padding-left:calc(2 * 4rem); } section.contact:before { left:calc(50% - 15vh); right:-100vh; } section.contact > div.visuel { padding-left:0; } section.contact > div.visuel > img { width:50vw; } section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul { padding:2rem 2rem 2rem 8rem; } section.contact aside.coordscontact { z-index:102; position:absolute; left:0; top:-0.1rem; width:35%; min-height:50rem; padding-top:calc(2rem + 0.1rem); } section.contact div.contenu > div { z-index:101; margin-left:35%; width:65%; padding-right:calc(2rem + 6rem); padding-bottom:0; min-height:50rem; } section.contact label { padding-right:1rem; } section.contact label.nom, section.contact label.prenom, section.contact label.email, section.contact label.telephone { width:50%; } section.contact label.activite, section.contact label.date {width:50%; } section.contact label.cp { width:30%; } section.contact label.ville { width:70%; } section.contact label.boolcheck { font-size:calc(0.8 * 0.9rem); } section.contact label.consentementrgpd { font-size:calc(0.8 * 0.9rem); } section.contact span.asterisque { font-size:calc(0.7 * 0.9rem); } section.contact div.succes { font-size:calc(1.2 * 0.9rem); } /* MENTIONS LEGALES */ section#page-mentionslegales { padding-left:9rem; padding-right:9rem; } /* 404 */ section.erreur > div.infos { position:absolute; left:0; width:50%; top:50%; transform:translateY(-50%); padding:4rem 10% 4rem 10%; } section.erreur > div.visuel { width:50vw; margin-left:50%; } /* FOOTER */ footer aside { position:absolute; height:calc(100% - (3.4 * 0.8rem)); } footer aside.coords { left:0; top:0; width:25%; } footer aside.coords > ul > li { font-size:calc(0.75 * 0.9rem); } footer aside.coords > ul { position:absolute; left:0; margin:0; bottom:1.5rem; } footer aside.links { left:25%; top:0; width:45%; } footer aside.links > ul { position:absolute; left:0; margin:0; } footer aside.links > ul.certifications { left:10rem; bottom:1.5rem; } footer aside.links > ul.certifications > li { max-width:80%; } footer aside.links > ul.sociaux { bottom:1.5rem; } footer aside.links ul.sociaux > li:first-of-type a { margin-left:1em; } footer nav { margin-left:70%; width:30%; } footer nav:before { left:0; width:50vw; } footer nav ul { padding:5em 4em; } } /* AFFICHAGE TABLETTE et PETIT ECRAN */ @media (min-width:801px) and (max-width:1600px) { /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header #interlocuteur > span, header nav ul > li, #ariane ul > li, .criteres > div, .criteres > span, #home-planning > ul > li, #home-chiffrescles ul li, #home-actus ul li, #home-clients ul li, #page-presentation .valeurs > ul > li, #page-presentation .pedagogie > ul > li, #page-accompagnementsrh .valeurs > ul > li, .results > ul > li > div, .pictos ul > li, .pagination > span, .pagination > a, .fichedescriptif .textes > div, section.contact > div, section.contact label, section.contact fieldset > div, footer aside, footer aside.coords > ul > li, footer aside.links ul > li, footer nav, footer .copyright { font-size:1.1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { width:80%; } header #interlocuteur, header nav { padding-right:calc(13 * 1.1rem); } main h1, main h2, main h3, main h4, main h5, main h6 { font-size:1.76rem; } button.afbtn { font-size:calc(0.8 * 1.1rem); max-width:20vw; } /* ACCUEIL */ #home-chiffrescles, #home-actus, #home-clients, aside#temoignage { padding-left:7rem; padding-right:7rem; } #home-planning, #home-presentation { padding-left:0; padding-right:0; } #home-mutualisation { padding-left:7rem; padding-right:7rem; } #home-mutualisation div.fromrte { padding-right:12rem; } #home-mutualisation .visuel { width:12rem; position:absolute; right:7rem; bottom:3rem; } .search form { width:80%; } #home-planning > ul > li { margin-bottom:1.5rem; margin-right:1.5rem; width:calc((100% - 3rem) / 3); } #home-planning > ul > li .categ { max-width:70%; } #home-presentation { padding:4rem 0 4rem 40%; } #home-presentation > div { left:0; width:30%; } #home-clients:before { left:7rem; width:calc(100% - (2 * 7rem)); } /* RECHERCHE - CATEGORIES */ .criteres > span { font-size:calc(1.2 * 1.1rem); } /* Page PRESENTATION */ #page-presentation .intro, #page-presentation .pedagogie, #page-presentation .defaut, #page-presentation .visuel { padding-left:7rem; padding-right:7rem; } #page-presentation .prestations { padding-left:0; padding-right:0; } #page-presentation .prestations { padding:4rem 0 4rem 55%; } #page-presentation .prestations > div { left:0; width:40%; } #page-presentation .valeurs > ul > li { padding-bottom:calc((50% / 2) - (2rem * (1 / 2))); } #page-presentation .valeurs div { padding-top:2em; } #page-presentation .visuel:before { left:7rem; width:calc(100% - (2 * 7rem)); } /* Page ACCOMPAGNEMENTS RH */ #page-accompagnementsrh .intro, #page-accompagnementsrh .defaut, #page-accompagnementsrh .visuel { padding-left:7rem; padding-right:7rem; } #page-accompagnementsrh .prestations { padding-left:0; padding-right:0; } #page-accompagnementsrh .prestations { padding:4rem 0 4rem 55%; } #page-accompagnementsrh .prestations > div { left:0; width:40%; } #page-accompagnementsrh .valeurs > ul > li { padding-top:5rem; } #page-accompagnementsrh .visuel:before { left:7rem; width:calc(100% - (2 * 7rem)); } /* Pages ACTUS */ section.actu > .detail, section.actu .visuel { padding-left:7rem; padding-right:7rem; } section.actu .visuel:before { left:7rem; width:calc(100% - (2 * 7rem)); } /* Pages FORMATIONS - Liste */ aside#mutualisation, aside#allformations, aside#surmesure, .ficheheader, .fichedescriptif { padding-left:7rem; padding-right:7rem; } .results .vide { margin:2.5em 8rem 3em 8rem; } section.formations > div.results, section.formations > div.infos { padding-left:0; padding-right:0; } section.formations .top .search form { width:90%; } aside#filtrer h2 { margin:1.5em 8rem 1.5em 8rem; } aside#mutualisation .concret { padding-right:20rem; } aside#mutualisation .visuel { width:16rem; position:absolute; right:7rem; bottom:4rem; } aside#surmesure:before { left:7rem; width:calc(100% - (2 * 7rem)); } aside#surmesure button.afbtn { max-width:18rem; right:calc(7rem + 4rem); } section.formations .criteres.categ > div.search { padding:2rem 7rem 0 7rem; } section.formations .criteres.categ > span:first-of-type:before { width:calc(100% - 2 * 7rem); } .fichedescriptif:before { left:7rem; width:calc(100% - (2 * 7rem)); } .fichedescriptif .pictos ul > li { margin-right:1.5em; padding-right:1.5em; } /* Pages CONTACT - DEVIS */ section.contact label.boolcheck { font-size:calc(0.8 * 1.1rem); } section.contact label.consentementrgpd { font-size:calc(0.8 * 1.1rem); } section.contact span.asterisque { font-size:calc(0.7 * 1.1rem); } section.contact div.succes { font-size:calc(1.2 * 1.1rem); } /* MENTIONS LEGALES */ section#page-mentionslegales { padding-left:7rem; padding-right:7rem; } footer aside.coords > ul > li { font-size:calc(0.75 * 1.1rem); } } /* AFFICHAGE MOBILE */ @media (orientation:portrait) and (max-width:800px), (max-width:500px) { html { font-size:24px; font-size:3vw; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header #interlocuteur > span, header nav ul > li, #ariane ul > li, .criteres > div, .criteres > span, #home-planning > ul > li, #home-chiffrescles ul li, #home-actus ul li, #home-clients ul li, #page-presentation .valeurs > ul > li, #page-presentation .pedagogie > ul > li, #page-accompagnementsrh .valeurs > ul > li, .results > ul > li > div, .pictos ul > li, .pagination > span, .pagination > a, .fichedescriptif .textes > div, section.contact > div, section.contact label, section.contact fieldset > div, footer aside, footer aside.coords > ul > li, footer aside.links ul > li, footer nav, footer .copyright { font-size:1.3rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ div.nosmartphone br { display: none; content: ' '; clear:none; } .liquide { width:90%; } main h1, main h2, main h3, main h4, main h5, main h6 { font-size:2.08rem; } button.afbtn { font-size:calc(0.9 * 1.3rem); max-width:66vw; } header { height:calc((14rem * 0.375) + ( 2 * 0.5rem) + 1rem + (1.3rem * 2) + (1.3rem * 1.2 * 2) + 1rem); overflow:hidden; transition:height 300ms ease; } .scroll header { height:calc((14rem * 0.375) + ( 2 * 0.5rem) + 1rem); } body.showmenu header { height:100vh; } header h1 { padding:0.5rem 0 calc(0.5rem + 1rem) 0; margin-top:calc( (1.3rem * 2) + (1.3rem * 1.2 * 2) ); transition:margin-top 300ms ease; } .scroll header h1 { margin-top:0; } header h1 #logo { font-size:14rem; } header #interlocuteur { top:0; background-color:rgba(70,161,190,1); padding:1.3rem 0; transition:top 300ms ease; } header #interlocuteur:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(70,161,190,1); } .scroll header #interlocuteur { top:calc( -1 * ( (1.3rem * 2) + (1.3rem * 1.2 * 2) )); } header #interlocuteur > span { font-size:1.3rem; line-height:1.2; color:rgba(255,255,255,1); } header #interlocuteur > span:nth-of-type(1), header #interlocuteur > span:nth-of-type(3) { display:none; } header #interlocuteur > span:nth-of-type(2), header #interlocuteur > span:nth-of-type(4) { display:block; width:40%; text-align:center; padding-left:0; padding-right:0; } header #interlocuteur > button.afbtn { background-color:rgba(255,255,255,1); color:rgba(70,161,190,1); border-color:rgba(255,255,255,1); } header #showhidemenu { z-index:1200; position:absolute; display:inline-block; top:calc(2rem + (1.3rem * 2) + (1.3rem * 1.2 * 2)); right:2rem; width:3rem; height:3rem; margin:0; padding:0; background-color:transparent; border:0; transition:top 300ms ease; } .scroll header #showhidemenu { top:2rem; } header #showhidemenu > svg { color:rgba(72,72,72,1); position:absolute; left:0; top:0; width:100%; height:100%; transition:color 300ms linear 0ms; } body.showmenu header #showhidemenu > svg { color:rgba(72,72,72,1); } button#showhidemenu > svg line { transition:transform 300ms linear 0ms; stroke-width:3; stroke-linecap:round; transform-origin: 40% 50%; } button#showhidemenu > svg line:nth-of-type(1) { transform: translate(0,-20%) scaleX(1) rotate(0deg); } button#showhidemenu > svg line:nth-of-type(2) { transform: translate(-18.75%,0) scaleX(0.625); } button#showhidemenu > svg line:nth-of-type(3) { transform: translate(12.5%,20%) scaleX(1.25) rotate(0deg); } body.showmenu button#showhidemenu > svg line:nth-of-type(1), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(45deg); } body.showmenu button#showhidemenu > svg line:nth-of-type(2), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(-40%,0) scaleX(0); } body.showmenu button#showhidemenu > svg line:nth-of-type(3), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,0) scaleX(1) rotate(-45deg); } header nav { z-index:1050; top:0; bottom:1rem; margin-top:calc((14rem * 0.375) + (0.5rem * 2) + (1.3rem * 2) + (1.3rem * 1.2 * 2)); transition:bottom 10ms ease 300ms; } .scroll header nav { margin-top:calc((14rem * 0.375) + (0.5rem * 2) ); } header nav:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:transparent; transition:background-color 0ms linear 300ms; } header nav ul { display:block; padding:4rem 1rem; opacity:0; transition:opacity 200ms ease 0ms; } header nav ul > li { display:block; font-size:calc(1.2 * 1.3rem); text-align:left; } header nav ul ul { display:block; padding:1rem 2rem; } header nav ul ul > li { font-size:calc(0.9 * 1.3rem); } body.showmenu header nav { bottom:0; } body.showmenu header nav:before { background-color:rgba(255,255,255,1); transition:background-color 0ms linear 0ms; } body.showmenu header nav ul { opacity:1; transition:opacity 500ms ease 200ms; } header nav button { font-size:1.3em; } #ariane { padding:2rem 0; display:none; } main { margin-top:calc((14rem * 0.375) + (0.5rem * 2) + (1.3rem * 2) + (1.3rem * 1.2 * 2)); } .scroll main { margin-top:calc((14rem * 0.375) + (0.5rem * 2)); } .interne section > h2 { padding-top:2.08rem; } /* RECHERCHE - CATEGORIES */ .criteres > span { font-size:calc(1.2 * 1.3rem); } .categories ul li a > span { padding:1em 1em 1em 6em; } .categories ul li a > span svg { width:4em; height:4em; position:absolute; left:1em; top:50%; transform:translateY(-50%); } .categories ul li a > span span { font-size:1em; padding-top:0; } .souscategories ul li a > span { padding:1em 1em 1em 6em; } .souscategories ul li a > span svg { width:4em; height:4em; position:absolute; left:1em; top:50%; transform:translateY(-50%); } .souscategories ul li a > span span { font-size:1em; padding-top:0; } /* ACCUEIL */ #home-chiffrescles, #home-actus, aside#temoignage { padding-left:2rem; padding-right:2rem; } #home-mutualisation { padding-left:2rem; padding-right:2rem; } #home-mutualisation { text-align:center; } #home-mutualisation div.fromrte { padding-right:0; } #home-mutualisation .visuel { margin-top:2rem; width:50%; } #home-mutualisation button.afbtn { margin-top:2em; width:100%; height:4.5em; } #home-planning > ul > li .categ { max-width:70%; } #home-surmesure h2 { font-size:1.2em; } #home-presentation { padding-bottom:0; } #home-presentation > img { width:100vw; left:50%; transform:translateX(-50%); border-radius:0; } #home-chiffrescles > ul > li { width:100%; margin-left:0; margin-right:0; } #home-chiffrescles h2 span:nth-of-type(2) { font-size:0.8em; } #home-actus > ul > li { width:100%; margin-right:0; } /* #home-clients { padding-left:2rem; padding-right:2rem; } #home-clients:before { left:2rem; width:calc(100% - (2 * 2rem)); } */ /* A commenter et décommenter les 2 lignes au dessus si double marge sur la zone */ #home-clients:before { left:0; width:calc(100%); } #home-clients ul { margin:0 4%; } #home-clients ul li { width:calc((100% / 3) - (2 * 2%)); padding-bottom:calc((100% / 3) - (2 * 2%)); margin-left:2%; margin-right:2%; } /* Page PRESENTATION */ #page-presentation .intro, #page-presentation .prestations, #page-presentation .pedagogie, #page-presentation .defaut { padding-left:2rem; padding-right:2rem; } .interne section#page-presentation > h2 { font-size:2em; } #page-presentation .prestations { padding-bottom:0; } #page-presentation .prestations:before { left:50%; transform:translate(-50%); } #page-presentation .prestations > div { margin-bottom:4em; } #page-presentation .prestations > img { width:100vw; left:50%; transform:translateX(-50%); border-radius:0; } #page-presentation .pedagogie > div { width:100vw; left:50%; transform:translateX(-50%); padding-left:calc(5% + 2rem); padding-right:calc(5% + 2rem); } #page-presentation .valeurs > ul > li { width:calc((100% / 1) - (2 * 2%)); height:auto; padding-bottom:0; margin-left:2%; margin-right:2%; } #page-presentation .valeurs div { position:relative; padding:2rem 2rem; } #page-presentation > .video { width:29rem; height:calc(29rem * 9/16 ); } /* #page-presentation .visuel { padding-left:2rem; padding-right:2rem; } #page-presentation .visuel:before { left:2rem; width:calc(100% - (2 * 2rem)); } */ /* A commenter et décommenter les 2 lignes au dessus si double marge sur la zone */ #page-presentation .visuel:before { left:0; width:calc(100%); } /* Page ACCOMPAGNEMENTS RH */ #page-accompagnementsrh .intro, #page-accompagnementsrh .prestations, #page-accompagnementsrh .defaut { padding-left:2rem; padding-right:2rem; } .interne section#page-accompagnementsrh > h2 { font-size:2em; } #page-accompagnementsrh .prestations { padding-bottom:0; } #page-accompagnementsrh .prestations:before { left:50%; transform:translate(-50%); } #page-accompagnementsrh .prestations > div { margin-bottom:4em; } #page-accompagnementsrh .prestations > img { width:100vw; left:50%; transform:translateX(-50%); border-radius:0; } #page-accompagnementsrh .valeurs > ul > li { padding-top:8rem; } #page-accompagnementsrh .visuel:before { left:0; width:calc(100%); } /* Pages ACTUS */ section.actu > .detail { padding-left:2rem; padding-right:2rem; } section.actu .detail { padding-top:2.08rem; } section.actu > .video { width:29rem; height:calc(29rem * 9/16 ); } /* section.actu .visuel { padding-left:2rem; padding-right:2rem; } section.actu .visuel:before { left:2rem; width:calc(100% - (2 * 2rem)); } */ /* A commenter et décommenter les 2 lignes au dessus si double marge sur la zone */ section.actu .visuel:before { left:0; width:calc(100%); } /* Pages FORMATIONS - Liste */ section.formations > div.infos, aside#mutualisation, aside#allformations { padding-left:2rem; padding-right:2rem; } section.formations > div.infos.intro { padding-bottom:0; } section.formations > div.infos.intro .visuel { left:50%; transform:translateX(-50%); } section.formations > div.infos .visuel { height:67vw; } .results .vide { margin:2.5em 0 3em 0; } .results > ul > li > div.infos { width:100%; padding-top:4em; } .results > ul > li .categ { max-width:17em; padding-left:3em; padding-right:1em; } .results > ul > li .categ:before { width:100%; } .results > ul > li .categ span { color:rgba(255,255,255,1); } .results > ul > li .etiquette { margin-top:1em; font-size:0.8em; } .results > ul > li > div:not(.infos):before { height:1px; width:calc(100% - 2em); left:1em; } .results > ul > li .sessions h4 { padding-top:0; } .pagination > a span { display:none; } .ficheheader h2 { width:100%; } .ficheheader h3 { width:100%; } .ficheheader > svg { right:0; top:1rem; height:5rem; } .fichedescriptif .boutons button.afbtn:not(:last-of-type) { margin-bottom:2em; } .fichedescriptif > div { margin:0 2rem; } aside#filtrer button { width:100%; margin:1em 0 0 0 } aside#filtrer button.current { transform:scale(1); } aside#filtrer h2 { margin:1.5em 0 1.5em 0; } aside#mutualisation { text-align:center; } aside#mutualisation .visuel { margin-top:2rem; width:50%; } aside#surmesure:before { box-sizing:border-box; } /* Pages CONTACT - DEVIS */ section.contact > div:nth-of-type(1), section.contact > div:nth-of-type(2) { padding-left:2rem; padding-right:2rem; } section.contact input, section.contact select, section.contact textarea { font-size:1.2em; } section.contact label.boolcheck { font-size:calc(0.8 * 1.3rem); } section.contact label.consentementrgpd { font-size:calc(0.8 * 1.3rem); } section.contact span.asterisque { font-size:calc(0.7 * 1.3rem); } section.contact div.succes { font-size:calc(1.2 * 1.3rem); } .mapwrap { aspect-ratio:1/1; } section.contact > div.visuel { padding:0 0 2rem 0; width:100vw; left:50%; transform:translateX(-50%); } /* MENTIONS LEGALES */ section#page-mentionslegales { padding-left:2rem; padding-right:2rem; } /* AUTHENTIFICATION */ section#page-authentification { width:80%; } /* AUTHENTIFICATION */ section.erreur > div.infos > h2 { margin-top:4rem; } section.erreur > div.visuel { width:100vw; left:50%; transform:translateX(-50%); } /* FOOTER */ footer { text-align:center; } footer aside.coords { padding-top:calc( (22rem * 0.375) + (2 * 2rem) ); } footer aside.coords > span { font-size:22rem; left:50%; transform:translateX(-50%); } footer aside { text-align:center; } footer aside > ul { text-align:center; width:auto; margin:0 auto; } footer aside.coords > ul { width:80%; text-align:left; } footer aside.links ul.certifications > li { text-align:center; } footer aside.links ul.certifications > li img { height:8em; } footer aside.links ul.certifications > li p { padding-left:calc(8em / 4); } footer aside.links ul.sociaux > li { font-size:calc(1.5 * 1.3rem); } footer nav:before { left:50%; transform:translateX(-50%); } footer nav ul { padding-left:0; padding-right:0; } footer nav > ul li { font-size:1.1em; text-align:center; } footer .copyright { font-size: calc(0.8 * 1.3rem); } footer .copyright > span:first-of-type { display:block; width:100%; padding-bottom:0; } } /* AFFICHAGE MINI */ @media (max-width:300px) { body { overflow-x:scroll; } html { font-size:9px; } #en2mots { width:300px; } header { width:300px; position:relative; } main { width:300px; margin-top:0 !important; } footer { width:300px; } } /* ------------------------------------------------------------------------------------------------------------- */ /* RESPONSIVE */ html { font-size:10px; font-size:1vw; } #en2mots { background-color:rgba(255,255,255,1); width:100%; max-width:2560px; margin:0 auto; position:relative; } /* AFFICHAGE PANORAMIC */ /* Attention, le style panoramic n'est pas ajouté sur body mais sur html html.panoramic { left:calc( ( 100% - 2.5 * 100vh ) / 2); width:calc(2.5 * 100vh); font-size:2vh; text-align:center; } */ /* AFFICHAGE FONT MAXI */ @media (min-width:2000px) { html { font-size:20px; } body { font-size:0.9rem; } .liquide { width:calc(2000px * (80 / 100)); } } /* AFFICHAGE MAXI */ @media (min-width:2560px) { .litebox-overlay .litebox-container { margin-left:auto; margin-right:auto; } .litebox-overlay .litebox-inline-html { width:960px; } } /* AFFICHAGE NORMAL */ @media (orientation:portrait) and (min-width:801px), (orientation:landscape) and (min-width:501px) { /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header #interlocuteur > span, header nav ul > li, #ariane ul > li, .criteres > div, .criteres > span, #home-planning > ul > li, #home-chiffrescles ul li, #home-actus ul li, #home-clients ul li, #page-presentation .valeurs > ul > li, #page-presentation .pedagogie > ul > li, #page-accompagnementsrh .valeurs > ul > li, .results > ul > li > div, .pictos ul > li, .pagination > span, .pagination > a, .fichedescriptif .textes > div, section.contact > div, section.contact label, section.contact fieldset > div, footer aside, footer aside.coords > ul > li, footer aside.links ul > li, footer nav, footer .copyright { font-size:0.9rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ main h1, main h2, main h3, main h4, main h5, main h6 { font-size:1.44rem; } button.afbtn { font-size:calc(0.8 * 0.9rem); max-width:14vw; } header #interlocuteur, header nav { padding-right:calc(13 * 0.9rem); text-align:right; } #ariane { position:absolute; top:0; left:0; } /* RECHERCHE - CATEGORIES */ .criteres > span { font-size:calc(1.2 * 0.9rem); } .search form { width:70%; } .categories h2 { font-size:1.4em; } .categories ul { width:80%; } .categories ul li { display:inline-block; vertical-align:top; width:30%; } .categories ul li a { margin:1em 0.5em 0 0.5em; text-align:center; } .categories ul li a > span { text-align:center; } .categories ul li a > span svg { left:50%; transform:translateX(-50%); } .categories ul li.current a { transform:scale(1.1); } body.desktop .categories ul li a:hover { transform:scale(1.05); } body.desktop .categories ul li.current a:hover { transform:scale(1.1); } .souscategories h2 { font-size:1.4em; } .souscategories ul { width:100%; } .souscategories ul li { display:inline-block; vertical-align:top; width:32%; } .souscategories ul li a { margin:1em 0.5em 0 0.5em; text-align:center; } .souscategories ul li a > span { text-align:center; } .souscategories ul li a > span svg { left:50%; transform:translateX(-50%); } .souscategories ul li.current a { transform:scale(1.1); } body.desktop .souscategories ul li a:hover { transform:scale(1.05); } body.desktop .souscategories ul li.current a:hover { transform:scale(1.1); } .interne section > h2 { font-size:2em; } /* ACCUEIL */ #home-planning, #home-presentation, #home-chiffrescles, #home-actus, #home-clients, aside#temoignage { padding-left:9rem; padding-right:9rem; } #home-mutualisation { padding-left:14rem; padding-right:14rem; } #home-mutualisation div.fromrte { padding-right:12rem; } #home-mutualisation .visuel { width:12rem; position:absolute; right:14rem; bottom:3rem; } #home-mutualisation button.afbtn { white-space:nowrap; margin-left:1em; } #home-mutualisation button.afbtn:first-of-type { margin-left:0; } #home-formations .visuel { width:50%; } #home-formations .visuel:before { right:13%; } #home-formations .criteres { position:absolute; right:0; top:50%; transform:translateY(-50%); width:50%; } #home-formations .search h2 { font-size:1.4em; } #home-formations .categories h2 { font-size:1.4em; } #home-planning > ul > li { width:calc((100% - 2rem) / 3); margin-right:1rem; } #home-planning > ul > li:nth-of-type(3n) { margin-right:0; } #home-planning > ul > li .categ { max-width:75%; } #home-presentation { padding:4rem 9rem 4rem 40%; } #home-presentation:before { width:50vw; transform:translate(-100%); } #home-presentation > div { position:absolute; left:9rem; top:50%; transform:translateY(-50%); width:25%; text-align:left; } #home-chiffrescles ul li { width:calc(33% - (5% * (2 / 3))); margin-right:5%; } #home-chiffrescles ul li:nth-of-type(3n) { margin-right:0; } #home-actus > ul > li { width:calc(50% - (5% * (1 / 2))); margin-right:5%; } #home-actus > ul > li:nth-of-type(2n) { margin-right:0; } #home-clients:before { left:9rem; width:calc(100% - (2 * 9rem)); } #home-clients ul { margin:0 4%; } #home-clients ul li { width:calc((100% / 6) - (2 * 2%)); padding-bottom:calc((100% / 6) - (2 * 2%)); margin-left:2%; margin-right:2%; } aside#temoignage h2 { width:65%; } aside#temoignage div { width:65%; } /* Pages FORMATIONS - Liste */ section.formations > div.results, section.formations > div.infos, aside#mutualisation, aside#allformations, aside#surmesure, .ficheheader, .fichedescriptif { padding-left:9rem; padding-right:9rem; } section.formations .search form { width:55%; } section.formations .top .search form { width:80%; } section.formations .criteres > div { width:45%; margin:0 auto; } section.formations .criteres > span:last-of-type { width:10%; height:20rem; margin:0 auto; } section.formations .criteres > span:last-of-type:before { width:1px; height:100%; } section.formations .search h2 { font-size:1.4em; } section.formations .criteres.categ > div.search { width:100%; padding:2rem 9rem 0 9rem; } section.formations .criteres.categ > span:first-of-type:before { width:calc(100% - 2 * 9rem); } section.formations > div.infos h2 { font-size:1.4em; } section.formations > div.infos.intro { padding-right:50%; } section.formations > div.infos.intro .visuel { position:absolute; left:calc(50% + 10rem); margin:0; padding:0; top:0; height:100%; width:calc(50vw - 10rem); } section.formations > div.infos.complement { font-size:0; } section.formations > div.infos.complement h2 { font-size:calc(1.4 * 0.9rem); display:inline-block; vertical-align:top; width:50%; padding-bottom:0; } section.formations > div.infos.complement > div { font-size:0.9rem; display:inline-block; vertical-align:top; width:50%; padding-left:10%; } aside#mutualisation .concret { padding-right:20rem; } aside#mutualisation .visuel { width:16rem; position:absolute; right:9rem; bottom:1rem; } aside#surmesure:before { left:9rem; width:calc(100% - (2 * 9rem)); } aside#surmesure h2 { text-align:left; padding-right:20rem; } aside#surmesure > div { text-align:left; padding-right:20rem; padding-bottom:2rem; } aside#surmesure > div.fromrte p { text-align:left; } aside#surmesure button.afbtn { position:absolute; right:calc(9rem + 4rem); top:calc(50% - 2rem); transform:translateY(-50%); max-width:16rem; } .results > ul > li > div { height:11.5em; } .results > ul > li > div.infos { width:45%; padding-top:3em; padding-left:3.5em; } .results > ul > li > div.sessions { width:30%; } .results > ul > li > div.pictos { width:25%; } .results > ul > li > div:not(.infos):before { width:1px; height:100%; } .results > ul > li .categ { max-width:90%; padding-left:3.5em; } .results > ul > li .etiquette { position:absolute; left:-3em; top:50%; transform-origin:top left; transform: rotate(-90deg) translateX(-50%); border-bottom-left-radius:0; border-bottom-right-radius:0; } .results > ul > li h3 { font-size:1.2em; } .pictos ul { top:50%; transform:translateY(-50%); } .fichedescriptif:before { left:9rem; width:calc(100% - (2 * 9rem)); } .fichedescriptif .pictos { text-align:center; } .fichedescriptif .pictos ul > li { width:auto; margin:0 3em 0 0; padding-right:3em; border-right:1px solid; } .fichedescriptif .pictos ul > li:last-of-type { margin-right:0; padding-right:0; border-right:0; } .fichedescriptif .textes > div { width:50%; } .fichedescriptif .textes > div:firt-of-type { padding-right:2em; } .fichedescriptif .textes > div:last-of-type { padding-left:2em; } /* Page PRESENTATION */ #page-presentation .intro, #page-presentation .prestations, #page-presentation .pedagogie, #page-presentation .defaut, #page-presentation .visuel { padding-left:9rem; padding-right:9rem; } #page-presentation .prestations { padding:4rem 9rem 4rem 55%; } #page-presentation .prestations:before { right:35%; } #page-presentation .prestations > div { position:absolute; left:9rem; top:50%; transform:translateY(-50%); width:35%; text-align:left; } #page-presentation .valeurs > ul > li { width:calc((100% / 2) - (2rem * (1 / 2))); margin-right:2rem; padding-bottom:calc((40% / 2) - (2rem * (1 / 2))); } #page-presentation .valeurs > ul > li:nth-of-type(2n) { margin-right:0; } #page-presentation .valeurs h3 { position:absolute; } #page-presentation .valeurs div { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:75%; height:auto; padding-top:1em; } #page-presentation .pedagogie > ul > li { width:calc(50% - (6rem * (1 / 2))); margin-right:6rem; } #page-presentation .pedagogie > ul > li:nth-of-type(2n) { margin-right:0; } #page-presentation .visuel:before { left:9rem; width:calc(100% - (2 * 9rem)); } /* Page ACCOMPAGNEMENTS RH */ #page-accompagnementsrh .intro, #page-accompagnementsrh .prestations, #page-accompagnementsrh .defaut, #page-accompagnementsrh .visuel { padding-left:9rem; padding-right:9rem; } #page-accompagnementsrh .valeurs h3 { border-bottom-right-radius:0.8rem; } #page-accompagnementsrh .prestations { padding:4rem 9rem 4rem 55%; } #page-accompagnementsrh .prestations:before { right:35%; } #page-accompagnementsrh .prestations > div { position:absolute; left:9rem; top:50%; transform:translateY(-50%); width:35%; text-align:left; } #page-accompagnementsrh .visuel:before { left:9rem; width:calc(100% - (2 * 9rem)); } /* Pages ACTUS */ section.actu .detail, section.actu .visuel { padding-left:9rem; padding-right:9rem; } section.actu .visuel:before { left:9rem; width:calc(100% - (2 * 9rem)); } /* Page CONTACT */ section.contact > div { width:50%; } section.contact > div:nth-of-type(1):before { right:0; } section.contact > div:nth-of-type(1) { min-height:50rem; padding-right:4rem; margin-bottom:6rem; } section.contact > div:nth-of-type(2) { min-height:100%; padding-left:calc(2 * 4rem); } section.contact:before { left:calc(50% - 15vh); right:-100vh; } section.contact > div.visuel { padding-left:0; } section.contact > div.visuel > img { width:50vw; } section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul { padding:2rem 2rem 2rem 8rem; } section.contact aside.coordscontact { z-index:102; position:absolute; left:0; top:-0.1rem; width:35%; min-height:50rem; padding-top:calc(2rem + 0.1rem); } section.contact div.contenu > div { z-index:101; margin-left:35%; width:65%; padding-right:calc(2rem + 6rem); padding-bottom:0; min-height:50rem; } section.contact label { padding-right:1rem; } section.contact label.nom, section.contact label.prenom, section.contact label.email, section.contact label.telephone { width:50%; } section.contact label.activite, section.contact label.date {width:50%; } section.contact label.cp { width:30%; } section.contact label.ville { width:70%; } section.contact label.boolcheck { font-size:calc(0.8 * 0.9rem); } section.contact label.consentementrgpd { font-size:calc(0.8 * 0.9rem); } section.contact span.asterisque { font-size:calc(0.7 * 0.9rem); } section.contact div.succes { font-size:calc(1.2 * 0.9rem); } /* MENTIONS LEGALES */ section#page-mentionslegales { padding-left:9rem; padding-right:9rem; } /* 404 */ section.erreur > div.infos { position:absolute; left:0; width:50%; top:50%; transform:translateY(-50%); padding:4rem 10% 4rem 10%; } section.erreur > div.visuel { width:50vw; margin-left:50%; } /* FOOTER */ footer aside { position:absolute; height:calc(100% - (3.4 * 0.8rem)); } footer aside.coords { left:0; top:0; width:25%; } footer aside.coords > ul > li { font-size:calc(0.75 * 0.9rem); } footer aside.coords > ul { position:absolute; left:0; margin:0; bottom:1.5rem; } footer aside.links { left:25%; top:0; width:45%; } footer aside.links > ul { position:absolute; left:0; margin:0; } footer aside.links > ul.certifications { left:10rem; bottom:1.5rem; } footer aside.links > ul.certifications > li { max-width:80%; } footer aside.links > ul.sociaux { bottom:1.5rem; } footer aside.links ul.sociaux > li:first-of-type a { margin-left:1em; } footer nav { margin-left:70%; width:30%; } footer nav:before { left:0; width:50vw; } footer nav ul { padding:5em 4em; } } /* AFFICHAGE TABLETTE et PETIT ECRAN */ @media (min-width:801px) and (max-width:1600px) { /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header #interlocuteur > span, header nav ul > li, #ariane ul > li, .criteres > div, .criteres > span, #home-planning > ul > li, #home-chiffrescles ul li, #home-actus ul li, #home-clients ul li, #page-presentation .valeurs > ul > li, #page-presentation .pedagogie > ul > li, #page-accompagnementsrh .valeurs > ul > li, .results > ul > li > div, .pictos ul > li, .pagination > span, .pagination > a, .fichedescriptif .textes > div, section.contact > div, section.contact label, section.contact fieldset > div, footer aside, footer aside.coords > ul > li, footer aside.links ul > li, footer nav, footer .copyright { font-size:1.1rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ .liquide { width:80%; } header #interlocuteur, header nav { padding-right:calc(13 * 1.1rem); } main h1, main h2, main h3, main h4, main h5, main h6 { font-size:1.76rem; } button.afbtn { font-size:calc(0.8 * 1.1rem); max-width:20vw; } /* ACCUEIL */ #home-chiffrescles, #home-actus, #home-clients, aside#temoignage { padding-left:7rem; padding-right:7rem; } #home-planning, #home-presentation { padding-left:0; padding-right:0; } #home-mutualisation { padding-left:7rem; padding-right:7rem; } #home-mutualisation div.fromrte { padding-right:12rem; } #home-mutualisation .visuel { width:12rem; position:absolute; right:7rem; bottom:3rem; } .search form { width:80%; } #home-planning > ul > li { margin-bottom:1.5rem; margin-right:1.5rem; width:calc((100% - 3rem) / 3); } #home-planning > ul > li .categ { max-width:70%; } #home-presentation { padding:4rem 0 4rem 40%; } #home-presentation > div { left:0; width:30%; } #home-clients:before { left:7rem; width:calc(100% - (2 * 7rem)); } /* RECHERCHE - CATEGORIES */ .criteres > span { font-size:calc(1.2 * 1.1rem); } /* Page PRESENTATION */ #page-presentation .intro, #page-presentation .pedagogie, #page-presentation .defaut, #page-presentation .visuel { padding-left:7rem; padding-right:7rem; } #page-presentation .prestations { padding-left:0; padding-right:0; } #page-presentation .prestations { padding:4rem 0 4rem 55%; } #page-presentation .prestations > div { left:0; width:40%; } #page-presentation .valeurs > ul > li { padding-bottom:calc((50% / 2) - (2rem * (1 / 2))); } #page-presentation .valeurs div { padding-top:2em; } #page-presentation .visuel:before { left:7rem; width:calc(100% - (2 * 7rem)); } /* Page ACCOMPAGNEMENTS RH */ #page-accompagnementsrh .intro, #page-accompagnementsrh .defaut, #page-accompagnementsrh .visuel { padding-left:7rem; padding-right:7rem; } #page-accompagnementsrh .prestations { padding-left:0; padding-right:0; } #page-accompagnementsrh .prestations { padding:4rem 0 4rem 55%; } #page-accompagnementsrh .prestations > div { left:0; width:40%; } #page-accompagnementsrh .valeurs > ul > li { padding-top:5rem; } #page-accompagnementsrh .visuel:before { left:7rem; width:calc(100% - (2 * 7rem)); } /* Pages ACTUS */ section.actu > .detail, section.actu .visuel { padding-left:7rem; padding-right:7rem; } section.actu .visuel:before { left:7rem; width:calc(100% - (2 * 7rem)); } /* Pages FORMATIONS - Liste */ aside#mutualisation, aside#allformations, aside#surmesure, .ficheheader, .fichedescriptif { padding-left:7rem; padding-right:7rem; } .results .vide { margin:2.5em 8rem 3em 8rem; } section.formations > div.results, section.formations > div.infos { padding-left:0; padding-right:0; } section.formations .top .search form { width:90%; } aside#filtrer h2 { margin:1.5em 8rem 1.5em 8rem; } aside#mutualisation .concret { padding-right:20rem; } aside#mutualisation .visuel { width:16rem; position:absolute; right:7rem; bottom:4rem; } aside#surmesure:before { left:7rem; width:calc(100% - (2 * 7rem)); } aside#surmesure button.afbtn { max-width:18rem; right:calc(7rem + 4rem); } section.formations .criteres.categ > div.search { padding:2rem 7rem 0 7rem; } section.formations .criteres.categ > span:first-of-type:before { width:calc(100% - 2 * 7rem); } .fichedescriptif:before { left:7rem; width:calc(100% - (2 * 7rem)); } .fichedescriptif .pictos ul > li { margin-right:1.5em; padding-right:1.5em; } /* Pages CONTACT - DEVIS */ section.contact label.boolcheck { font-size:calc(0.8 * 1.1rem); } section.contact label.consentementrgpd { font-size:calc(0.8 * 1.1rem); } section.contact span.asterisque { font-size:calc(0.7 * 1.1rem); } section.contact div.succes { font-size:calc(1.2 * 1.1rem); } /* MENTIONS LEGALES */ section#page-mentionslegales { padding-left:7rem; padding-right:7rem; } footer aside.coords > ul > li { font-size:calc(0.75 * 1.1rem); } } /* AFFICHAGE MOBILE */ @media (orientation:portrait) and (max-width:800px), (max-width:500px) { html { font-size:24px; font-size:3vw; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ /* Reinit font-size après un font-size:0; */ body, header #interlocuteur > span, header nav ul > li, #ariane ul > li, .criteres > div, .criteres > span, #home-planning > ul > li, #home-chiffrescles ul li, #home-actus ul li, #home-clients ul li, #page-presentation .valeurs > ul > li, #page-presentation .pedagogie > ul > li, #page-accompagnementsrh .valeurs > ul > li, .results > ul > li > div, .pictos ul > li, .pagination > span, .pagination > a, .fichedescriptif .textes > div, section.contact > div, section.contact label, section.contact fieldset > div, footer aside, footer aside.coords > ul > li, footer aside.links ul > li, footer nav, footer .copyright { font-size:1.3rem; } /*----------------------------------------------------------------------------------------------------------------------------------------------*/ div.nosmartphone br { display: none; content: ' '; clear:none; } .liquide { width:90%; } main h1, main h2, main h3, main h4, main h5, main h6 { font-size:2.08rem; } button.afbtn { font-size:calc(0.9 * 1.3rem); max-width:66vw; } header { height:calc((14rem * 0.375) + ( 2 * 0.5rem) + 1rem + (1.3rem * 2) + (1.3rem * 1.2 * 2) + 1rem); overflow:hidden; transition:height 300ms ease; } .scroll header { height:calc((14rem * 0.375) + ( 2 * 0.5rem) + 1rem); } body.showmenu header { height:100vh; } header h1 { padding:0.5rem 0 calc(0.5rem + 1rem) 0; margin-top:calc( (1.3rem * 2) + (1.3rem * 1.2 * 2) ); transition:margin-top 300ms ease; } .scroll header h1 { margin-top:0; } header h1 #logo { font-size:14rem; } header #interlocuteur { top:0; background-color:rgba(70,161,190,1); padding:1.3rem 0; transition:top 300ms ease; } header #interlocuteur:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:rgba(70,161,190,1); } .scroll header #interlocuteur { top:calc( -1 * ( (1.3rem * 2) + (1.3rem * 1.2 * 2) )); } header #interlocuteur > span { font-size:1.3rem; line-height:1.2; color:rgba(255,255,255,1); } header #interlocuteur > span:nth-of-type(1), header #interlocuteur > span:nth-of-type(3) { display:none; } header #interlocuteur > span:nth-of-type(2), header #interlocuteur > span:nth-of-type(4) { display:block; width:40%; text-align:center; padding-left:0; padding-right:0; } header #interlocuteur > button.afbtn { background-color:rgba(255,255,255,1); color:rgba(70,161,190,1); border-color:rgba(255,255,255,1); } header #showhidemenu { z-index:1200; position:absolute; display:inline-block; top:calc(2rem + (1.3rem * 2) + (1.3rem * 1.2 * 2)); right:2rem; width:3rem; height:3rem; margin:0; padding:0; background-color:transparent; border:0; transition:top 300ms ease; } .scroll header #showhidemenu { top:2rem; } header #showhidemenu > svg { color:rgba(72,72,72,1); position:absolute; left:0; top:0; width:100%; height:100%; transition:color 300ms linear 0ms; } body.showmenu header #showhidemenu > svg { color:rgba(72,72,72,1); } button#showhidemenu > svg line { transition:transform 300ms linear 0ms; stroke-width:3; stroke-linecap:round; transform-origin: 40% 50%; } button#showhidemenu > svg line:nth-of-type(1) { transform: translate(0,-20%) scaleX(1) rotate(0deg); } button#showhidemenu > svg line:nth-of-type(2) { transform: translate(-18.75%,0) scaleX(0.625); } button#showhidemenu > svg line:nth-of-type(3) { transform: translate(12.5%,20%) scaleX(1.25) rotate(0deg); } body.showmenu button#showhidemenu > svg line:nth-of-type(1), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(45deg); } body.showmenu button#showhidemenu > svg line:nth-of-type(2), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(-40%,0) scaleX(0); } body.showmenu button#showhidemenu > svg line:nth-of-type(3), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,0) scaleX(1) rotate(-45deg); } header nav { z-index:1050; top:0; bottom:1rem; margin-top:calc((14rem * 0.375) + (0.5rem * 2) + (1.3rem * 2) + (1.3rem * 1.2 * 2)); transition:bottom 10ms ease 300ms; } .scroll header nav { margin-top:calc((14rem * 0.375) + (0.5rem * 2) ); } header nav:before { content:''; position:absolute; top:0; bottom:0; width:100vw; left:50%; transform:translate(-50%); background-color:transparent; transition:background-color 0ms linear 300ms; } header nav ul { display:block; padding:4rem 1rem; opacity:0; transition:opacity 200ms ease 0ms; } header nav ul > li { display:block; font-size:calc(1.2 * 1.3rem); text-align:left; } header nav ul ul { display:block; padding:1rem 2rem; } header nav ul ul > li { font-size:calc(0.9 * 1.3rem); } body.showmenu header nav { bottom:0; } body.showmenu header nav:before { background-color:rgba(255,255,255,1); transition:background-color 0ms linear 0ms; } body.showmenu header nav ul { opacity:1; transition:opacity 500ms ease 200ms; } header nav button { font-size:1.3em; } #ariane { padding:2rem 0; display:none; } main { margin-top:calc((14rem * 0.375) + (0.5rem * 2) + (1.3rem * 2) + (1.3rem * 1.2 * 2)); } .scroll main { margin-top:calc((14rem * 0.375) + (0.5rem * 2)); } .interne section > h2 { padding-top:2.08rem; } /* RECHERCHE - CATEGORIES */ .criteres > span { font-size:calc(1.2 * 1.3rem); } .categories ul li a > span { padding:1em 1em 1em 6em; } .categories ul li a > span svg { width:4em; height:4em; position:absolute; left:1em; top:50%; transform:translateY(-50%); } .categories ul li a > span span { font-size:1em; padding-top:0; } .souscategories ul li a > span { padding:1em 1em 1em 6em; } .souscategories ul li a > span svg { width:4em; height:4em; position:absolute; left:1em; top:50%; transform:translateY(-50%); } .souscategories ul li a > span span { font-size:1em; padding-top:0; } /* ACCUEIL */ #home-chiffrescles, #home-actus, aside#temoignage { padding-left:2rem; padding-right:2rem; } #home-mutualisation { padding-left:2rem; padding-right:2rem; } #home-mutualisation { text-align:center; } #home-mutualisation div.fromrte { padding-right:0; } #home-mutualisation .visuel { margin-top:2rem; width:50%; } #home-mutualisation button.afbtn { margin-top:2em; width:100%; height:4.5em; } #home-planning > ul > li .categ { max-width:70%; } #home-surmesure h2 { font-size:1.2em; } #home-presentation { padding-bottom:0; } #home-presentation > img { width:100vw; left:50%; transform:translateX(-50%); border-radius:0; } #home-chiffrescles > ul > li { width:100%; margin-left:0; margin-right:0; } #home-chiffrescles h2 span:nth-of-type(2) { font-size:0.8em; } #home-actus > ul > li { width:100%; margin-right:0; } /* #home-clients { padding-left:2rem; padding-right:2rem; } #home-clients:before { left:2rem; width:calc(100% - (2 * 2rem)); } */ /* A commenter et décommenter les 2 lignes au dessus si double marge sur la zone */ #home-clients:before { left:0; width:calc(100%); } #home-clients ul { margin:0 4%; } #home-clients ul li { width:calc((100% / 3) - (2 * 2%)); padding-bottom:calc((100% / 3) - (2 * 2%)); margin-left:2%; margin-right:2%; } /* Page PRESENTATION */ #page-presentation .intro, #page-presentation .prestations, #page-presentation .pedagogie, #page-presentation .defaut { padding-left:2rem; padding-right:2rem; } .interne section#page-presentation > h2 { font-size:2em; } #page-presentation .prestations { padding-bottom:0; } #page-presentation .prestations:before { left:50%; transform:translate(-50%); } #page-presentation .prestations > div { margin-bottom:4em; } #page-presentation .prestations > img { width:100vw; left:50%; transform:translateX(-50%); border-radius:0; } #page-presentation .pedagogie > div { width:100vw; left:50%; transform:translateX(-50%); padding-left:calc(5% + 2rem); padding-right:calc(5% + 2rem); } #page-presentation .valeurs > ul > li { width:calc((100% / 1) - (2 * 2%)); height:auto; padding-bottom:0; margin-left:2%; margin-right:2%; } #page-presentation .valeurs div { position:relative; padding:2rem 2rem; } #page-presentation > .video { width:29rem; height:calc(29rem * 9/16 ); } /* #page-presentation .visuel { padding-left:2rem; padding-right:2rem; } #page-presentation .visuel:before { left:2rem; width:calc(100% - (2 * 2rem)); } */ /* A commenter et décommenter les 2 lignes au dessus si double marge sur la zone */ #page-presentation .visuel:before { left:0; width:calc(100%); } /* Page ACCOMPAGNEMENTS RH */ #page-accompagnementsrh .intro, #page-accompagnementsrh .prestations, #page-accompagnementsrh .defaut { padding-left:2rem; padding-right:2rem; } .interne section#page-accompagnementsrh > h2 { font-size:2em; } #page-accompagnementsrh .prestations { padding-bottom:0; } #page-accompagnementsrh .prestations:before { left:50%; transform:translate(-50%); } #page-accompagnementsrh .prestations > div { margin-bottom:4em; } #page-accompagnementsrh .prestations > img { width:100vw; left:50%; transform:translateX(-50%); border-radius:0; } #page-accompagnementsrh .valeurs > ul > li { padding-top:8rem; } #page-accompagnementsrh .visuel:before { left:0; width:calc(100%); } /* Pages ACTUS */ section.actu > .detail { padding-left:2rem; padding-right:2rem; } section.actu .detail { padding-top:2.08rem; } section.actu > .video { width:29rem; height:calc(29rem * 9/16 ); } /* section.actu .visuel { padding-left:2rem; padding-right:2rem; } section.actu .visuel:before { left:2rem; width:calc(100% - (2 * 2rem)); } */ /* A commenter et décommenter les 2 lignes au dessus si double marge sur la zone */ section.actu .visuel:before { left:0; width:calc(100%); } /* Pages FORMATIONS - Liste */ section.formations > div.infos, aside#mutualisation, aside#allformations { padding-left:2rem; padding-right:2rem; } section.formations > div.infos.intro { padding-bottom:0; } section.formations > div.infos.intro .visuel { left:50%; transform:translateX(-50%); } section.formations > div.infos .visuel { height:67vw; } .results .vide { margin:2.5em 0 3em 0; } .results > ul > li > div.infos { width:100%; padding-top:4em; } .results > ul > li .categ { max-width:17em; padding-left:3em; padding-right:1em; } .results > ul > li .categ:before { width:100%; } .results > ul > li .categ span { color:rgba(255,255,255,1); } .results > ul > li .etiquette { margin-top:1em; font-size:0.8em; } .results > ul > li > div:not(.infos):before { height:1px; width:calc(100% - 2em); left:1em; } .results > ul > li .sessions h4 { padding-top:0; } .pagination > a span { display:none; } .ficheheader h2 { width:100%; } .ficheheader h3 { width:100%; } .ficheheader > svg { right:0; top:1rem; height:5rem; } .fichedescriptif .boutons button.afbtn:not(:last-of-type) { margin-bottom:2em; } .fichedescriptif > div { margin:0 2rem; } aside#filtrer button { width:100%; margin:1em 0 0 0 } aside#filtrer button.current { transform:scale(1); } aside#filtrer h2 { margin:1.5em 0 1.5em 0; } aside#mutualisation { text-align:center; } aside#mutualisation .visuel { margin-top:2rem; width:50%; } aside#surmesure:before { box-sizing:border-box; } /* Pages CONTACT - DEVIS */ section.contact > div:nth-of-type(1), section.contact > div:nth-of-type(2) { padding-left:2rem; padding-right:2rem; } section.contact input, section.contact select, section.contact textarea { font-size:1.2em; } section.contact label.boolcheck { font-size:calc(0.8 * 1.3rem); } section.contact label.consentementrgpd { font-size:calc(0.8 * 1.3rem); } section.contact span.asterisque { font-size:calc(0.7 * 1.3rem); } section.contact div.succes { font-size:calc(1.2 * 1.3rem); } .mapwrap { aspect-ratio:1/1; } section.contact > div.visuel { padding:0 0 2rem 0; width:100vw; left:50%; transform:translateX(-50%); } /* MENTIONS LEGALES */ section#page-mentionslegales { padding-left:2rem; padding-right:2rem; } /* AUTHENTIFICATION */ section#page-authentification { width:80%; } /* AUTHENTIFICATION */ section.erreur > div.infos > h2 { margin-top:4rem; } section.erreur > div.visuel { width:100vw; left:50%; transform:translateX(-50%); } /* FOOTER */ footer { text-align:center; } footer aside.coords { padding-top:calc( (22rem * 0.375) + (2 * 2rem) ); } footer aside.coords > span { font-size:22rem; left:50%; transform:translateX(-50%); } footer aside { text-align:center; } footer aside > ul { text-align:center; width:auto; margin:0 auto; } footer aside.coords > ul { width:80%; text-align:left; } footer aside.links ul.certifications > li { text-align:center; } footer aside.links ul.certifications > li img { height:8em; } footer aside.links ul.certifications > li p { padding-left:calc(8em / 4); } footer aside.links ul.sociaux > li { font-size:calc(1.5 * 1.3rem); } footer nav:before { left:50%; transform:translateX(-50%); } footer nav ul { padding-left:0; padding-right:0; } footer nav > ul li { font-size:1.1em; text-align:center; } footer .copyright { font-size: calc(0.8 * 1.3rem); } footer .copyright > span:first-of-type { display:block; width:100%; padding-bottom:0; } } /* AFFICHAGE MINI */ @media (max-width:300px) { body { overflow-x:scroll; } html { font-size:9px; } #en2mots { width:300px; } header { width:300px; position:relative; } main { width:300px; margin-top:0 !important; } footer { width:300px; } }