/* --------------------------------------------------
ACCESSIBILITY UTILS
-------------------------------------------------- */
/**
* @see https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
*/
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
.sr-only-focusable:focus,
.sr-only-focusable:active {
clip: auto !important;
-webkit-clip-path: none !important;
clip-path: none !important;
height: auto !important;
margin: auto !important;
overflow: visible !important;
width: auto !important;
white-space: normal !important;
}
/* --------------------------------------------------
DIVERS
-------------------------------------------------- */
img {
width: auto;
height: auto;
max-width: 100%;
}
blockquote {
font-weight: bold;
}
iframe {
border: none;
}
.dib {
display: inline-block;
}
.alignleft {
float: left;
margin: 0.5em 1em 0.5em 0;
}
.alignright {
float: right;
margin: 0.5em 0 0.5em 1em;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
/* --------------------------------------------------
TEXTE COURRANT
-------------------------------------------------- */
.cp-texte p,
.cp-texte li {
margin: 0.8em 0;
}
.cp-texte li {
padding-bottom: 0;
}
.cp-texte hr {
margin: 40px 0;
clear: both;
color: #4F26DB !important;
}
.cp-texte h3 {
font-family: 'Source Sans Pro', sans-serif;
font-style: normal;
font-weight: 900;
font-size: 20px;
line-height: 25px;
color: #3A3637;
}
.cp-texte h4 {
font-size: 16px !important;
line-height: 18px !important;
font-weight: 700 !important;
font-family: 'Source Sans Pro', sans-serif;
}
.cp-cta-image-texte h3 {
font-size: 20px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 900;
margin: 1em 0;
color: #3A3637;
}
.cp-texte .cp-cta-bouton {
text-transform: none;
font-size: 1em;
}
.cp-texte .cp-cta-bouton::after {
padding-left: 0.5em;
}
.cp-texte .cp-cta-bouton.-fullwidth {
display: block;
text-align: left;
}
/* --------------------------------------------------
SHORTCUTS CSS MANQUANTS
-------------------------------------------------- */
.\-mt-40 {
margin-top: 40px;
}
.\-mt-60 {
margin-top: 60px;
}
.\-mb-60 {
margin-bottom: 60px;
}
.\-mt-90 {
margin-top: 90px;
}
.\-mb-90 {
margin-bottom: 90px;
}
.\-mb-minus-50 {
margin-bottom: -50px;
}
@media (max-width: 500px) {
.\-mt-90 {
margin-top: 60px;
}
.\-mb-90 {
margin-bottom: 60px;
}
}
/* --------------------------------------------------
BREADCRUMBS
-------------------------------------------------- */
/**
* Fix de l'effet blur sur toutes les images
* positionnées dans les wrap à la c**.
*/
.image.\-walc img {
top: 0;
left: 0;
max-width: none;
-webkit-transform: none;
transform: none;
}
/* --------------------------------------------------
BREADCRUMBS
-------------------------------------------------- */
.cp-fil-ariane li {
display: inline-block;
}
.cp-fil-ariane li::after {
content: "›";
padding-left: 5px;
padding-right: 5px;
}
.cp-fil-ariane li:last-child::after {
display: none;
}
.cp-fil-ariane a.\-current {
text-decoration: none;
}
/* --------------------------------------------------
1er HR APRES TITRE
-------------------------------------------------- */
.\-wrapper.\-is-title.\-mb-40 + .\-wrapper.\-is-hr {
margin-top: -20px;
}
/* --------------------------------------------------
FOND CARTE DU MONDE
-------------------------------------------------- * /
.cp-mapmonde {
bottom: 0;
}
.cp-mapmonde img {
position: sticky;
top: 0;
margin-bottom: 40px;
}
/* --------------------------------------------------
OMBRES SUR PHOTO/VIDEO DANS 2 COLONNES
-------------------------------------------------- */
.cp-best-of.\-video .cp-iframe {
-webkit-box-shadow: 0px 0px 48px -10px #999999;
-moz-box-shadow: 0px 0px 48px -10px #999999;
box-shadow: 0px 0px 48px -10px #999999;
}
.cp-cta-image-texte .media.\-no-shadow .image,
.cp-best-of.\-video .media.\-no-shadow .image,
.cp-best-of.\-video .media.\-no-shadow .cp-iframe {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* --------------------------------------------------
DIVERS
-------------------------------------------------- */
/* ??? */
#article > .components {
padding: 1px 0;
margin: -1px 0;
}
.cp-remontee-articles .contenu {
vertical-align: top;
}
.cp-intro .description {
margin: 0 !important;
width: auto !important;
display: block !important;
}
.cp-cta-focus .description {
padding-right: 7.75%;
padding-bottom: 7.75%;
}
/* Fix alignement de boutons à droite des titres */
.cp-section-header {
align-items: center;
}
/* Fix espaces dans pushs de photos */
.cp-phototheque {
margin: -3% 0;
}
.cp-phototheque .media {
margin: 3%;
}
.cp-phototheque .image.\-portrait {
width: 180px;
}
.cp-phototheque .image.\-paysage {
width: 240px;
}
/* Retire le link expand si ce n'est pas un lien... */
.cells.\-speakers-duo .cell {
vertical-align: bottom;
}
/* Laisse le picto récupérer la couleur du texte */
.cp-geoloc .location:before {
color: inherit;
}
/* --------------------------------------------------
COVER
-------------------------------------------------- */
/* -------------------------
FIRST LINE
------------------------- */
.cp-cover .slide-before .info .titre:first-line {
font-size: inherit !important;
display: inherit !important;
}
.cp-cover .slide-before .info .titre small {
font-size: 32px;
display: inline-block;
}
@media screen and (max-width: 616px) {
.cp-cover .slide-before .info .titre small {
font-size: 16px;
}
}
/* .cp-cover .slide-before .info .descriptif {
max-width: 540px;
} */
.cp-cover .slide-before .bandeau .focus {
height: 1.8em;
padding-top: 0;
padding-bottom: 0;
line-height: 1;
box-sizing: content-box;
white-space: nowrap;
overflow: hidden;
}
.cp-cover .slide-before .bandeau .focus .key-indicator {
padding-top: 0.35em;
padding-bottom: 0.45em;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: 700;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.cp-cover .slide-before .bandeau .focus {
font-size: 1.5rem;
}
}
@media (max-width: 630px) {
.cp-cover .slide-before .bandeau {
padding-top: 22.5px;
padding-bottom: 22.5px;
background-color: rgba(255, 255, 255, 0.3);
background-image: none;
}
.cp-cover .slide-before .bandeau .focus {
display: block;
padding-left: 40px;
margin: 10px 0 -10px;
font-size: 24px;
}
.cp-cover .slide-before .bandeau .focus::before {
width: 20px;
}
}
@media (max-width: 380px) {
.cp-cover .slide-before .bandeau .focus {
font-size: 20px;
}
}
/* --------------------------------------------------
LISTE INTERVENANTS
-------------------------------------------------- */
/* Ne coupe pas les noms et fonctions... */
.cp-remontee-intervenants .description .nom,
.cp-remontee-intervenants .description .titre {
line-break: auto;
overflow-wrap: break-word;
word-wrap: anywhere;
}
/* Retire le link expand si ce n'est pas un lien... */
.cp-remontee-intervenants .description span.nom:after {
display: none;
}
/* visible plutot que auto pour éviter la scrollbar avec AOS */
.cp-remontee-intervenants.\-grille-row .intervenants {
overflow: visible;
}
/* --------------------------------------------------
SLIDERS
-------------------------------------------------- */
@media screen and (max-width: 816px) {
.cp-section-header .cp-slideshow-controles {
display: block;
padding-top: 0;
margin: -5px auto -20px;
}
.cp-section-header a + .cp-slideshow-controles {
margin-top: 20px;
}
}
/* --------------------------------------------------
LISTE VIDEO
-------------------------------------------------- */
.cp-remontee-videos.\-grille-row .videos {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.cp-remontee-videos.\-grille-row .videos::after {
display: none;
}
@media screen and (max-width: 1085px) {
.bhv-hslider .cp-remontee-videos .videos {
overflow-x: auto;
}
}
@media screen and (max-width: 1040px) {
.cp-remontee-videos.\-grille-row .videos {
justify-content: center;
}
}
/* --------------------------------------------------
ROLLOVER MANQUANTS
-------------------------------------------------- */
.cp-cta-plus.\-rouge:before {
width: auto;
right: calc(100% - 30px);
transition: right 160ms ease-in-out;
}
a.cp-cta-plus.\-rouge:hover:before,
.cp-remontee-articles .contenu:hover .cp-cta-plus.\-rouge:before {
right: 1.57em;
}
.cp-remontee-events .contenu:hover .cp-cta-plus.\-rouge:before {
right: 1.3em;
}
.cp-texte a.cp-cta-bouton:hover,
.cp-remontee-intervenants .contenu:hover .cp-cta-plus.\-bio {
background: #fff;
color: #1C1480;
}
.cp-texte a.cp-cta-bouton.\-gris:hover {
background: #3A3637;
}
/* fèches diaporamas */
.cp-slideshow-controles a:hover img {
background: #ddd;
border-radius: 50%;
}
/* --------------------------------------------------
LISTE DE VIDEOS
-------------------------------------------------- */
.cp-remontee-videos .contenu {
padding-bottom: 0;
}
.cp-remontee-videos .description .titre::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.cp-remontee-videos .description .titre:hover {
text-decoration: underline;
}
/* --------------------------------------------------
GRILLE DU PROGRAMME
-------------------------------------------------- */
.cp-programmation .programme .creneau .organisation .sessions {
display: flex;
flex-flow: row wrap;
align-items: stretch;
}
.cp-programmation .programme .creneau .organisation .sessions .session {
display: flex;
align-items: stretch;
}
.cp-programmation .programme .creneau .organisation .sessions .session .wrapper {
flex-grow: 1;
display: flex;
position: relative;
}
.cp-programmation .programme .creneau .organisation .sessions .session .fiche {
display: flex;
flex-flow: column;
flex-grow: 1;
position: static;
}
.cp-programmation .programme .creneau .organisation .sessions .session .wrapper .fiche a {
display: inline;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3A3637), to(#3A3637));
background-image: linear-gradient(#3A3637, #3A3637);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: left 1em;
}
.cp-programmation .programme .creneau .organisation .sessions .session .wrapper:hover .fiche a {
background-size: 100% 1px;
-webkit-transition: background-size 300ms;
transition: background-size 300ms;
}
.cp-programmation .programme .creneau .organisation .sessions .session .wrapper .geoloc {
margin-top: 5px;
}
.cp-programmation .programme .creneau .organisation .sessions .session .wrapper .geoloc::before {
background: none !important;
display: inline-block;
font-family: 'fa5';
content: "\f3c5";
font-size: 14px;
}
.cp-programmation .parcours .organisation .sessions .session .geoloc::before {
background: none !important;
display: inline-block;
font-family: 'fa5';
content: "\f3c5";
font-size: 14px;
}
/* --------------------------------------------------
MANQUES POUR TYPO 1828
-------------------------------------------------- */
/*
.parole-1828 .cp-chiffres-rouges .titre {
font-family: 'Summer', sans-serif;
font-size: 53px;
font-weight: 500;
line-height: 0.7;
margin-top: -0.2em;
} */
.parole-1828 .cp-titre-rouge,
.parole-1828 .cp-chiffres-rouges .titre {
font-family: 'Source Sans Pro', sans-serif;
font-size: 2rem;
font-weight: 800;
line-height: 1.2;
margin-top: -0.2em;
}
/* --------------------------------------------------
TEASER SUR TEXTE
-------------------------------------------------- */
.cp-presentation .cp-texte {
max-height: 225px;
/* fix pour typo 1828 coupée par l'overflow hidden */
padding: 0 10px;
margin: 0 -10px;
}
.cp-presentation .filter {
pointer-events: none;
}
/* -------------------------
DEGRADÉ CSS
------------------------- * /
.cp-presentation .cp-texte {
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.1));
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.1));
}
.cp-presentation.\-opened .cp-texte {
-webkit-mask-image: none;
mask-image: none;
}
.cp-presentation .filter {
display: none;
}
.cp-presentation.\-opened .filter {
display: block;
}
/* --------------------------------------------------
Chiffres clés sur fond rouges
-------------------------------------------------- */
.cp-chiffres-rouges {
align-items: flex-start;
}
.cp-chiffres-rouges .titre {
padding-right: 30px;
}
@media screen and (max-width: 862px) {
.cp-chiffres-rouges .titre {
padding-right: 0;
}
.cp-chiffres-rouges .focus {
padding: 0 10px;
vertical-align: top;
}
}
/* --------------------------------------------------
ANCRES ET MENUS ANCRES
-------------------------------------------------- */
.cp-anchor {
position: absolute;
margin-top: -153px;
}
.cp-menu-ancres {
transition: margin 500ms ease-in-out,
padding 500ms ease-in-out,
background-color 500ms ease-in-out;
}
.\-sticky.offset {
background-color: transparent;
}
.-sticky[stuck] {
background-color: #fff;
}
.-sticky[stuck] .cp-menu-ancres {
margin: 0 -10px;
padding: 0 10px;
background-color: #fff;
}
.-sticky .cp-menu-ancres + hr {
transition: margin 500ms ease-in-out;
}
.-sticky[stuck] .cp-menu-ancres + hr {
margin: 0 -10px;
}
/* --------------------------------------------------
FIX TAILLE MEDIA DANS "SMALL IMAGE TEXT"
-------------------------------------------------- */
.cp-cta-image-texte .media {
width: 224px;
}
/* --------------------------------------------------
FIX TAILLE MEDIA DANS LA FICHE INTERVENANT
-------------------------------------------------- */
.cp-intervenant .\-223 {
width: 224px;
}
.cp-intervenant .\-757 {
width: 756px;
}
/* --------------------------------------------------
FIX DANS LISTE INTERVENTIONS
-------------------------------------------------- */
.cp-intervention .description .link-wrap {
position: relative;
}
.cp-intervention .description a.titre {
text-decoration: none;
font-style: normal;
}
.cp-intervention .description .link-wrap:hover a.titre {
text-decoration: underline;
}
.cp-intervention .description a.titre:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.cp-intervention .description .boutons {
margin-top: 10px;
}
/* --------------------------------------------------
COVER
-------------------------------------------------- */
.background-cover img {
top: 0;
left: 0;
transform: none;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.cp-cover .slide-before .bandeau {
/* background-image: -webkit-linear-gradient(0deg, rgba(220, 44, 78, 0.5) 0%, rgba(220, 44, 78, 0.5) 62%, transparent 70%);
background-image: -moz-linear-gradient(0deg, rgba(220, 44, 78, 0.5) 0%, rgba(220, 44, 78, 0.5) 62%, transparent 70%);
background-image: -ms-linear-gradient(0deg, rgba(220, 44, 78, 0.5) 0%, rgba(220, 44, 78, 0.5) 62%, transparent 70%);
background-image: -o-linear-gradient(0deg, rgba(220, 44, 78, 0.5) 0%, rgba(220, 44, 78, 0.5) 62%, transparent 70%);
background-image: linear-gradient(90deg, rgba(220, 44, 78, 0.5) 0%, rgba(220, 44, 78, 0.5) 62%, transparent 70%); */
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0) 70%);
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0) 70%);
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0) 70%);
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0) 70%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0) 70%);
}
/* --------------------------------------------------
TOPHEAD
-------------------------------------------------- */
.cp-topheader .langue {
display: block;
padding-right: 20px;
flex-shrink: 0;
}
/* --------------------------------------------------
MENU PRINCIPAL
-------------------------------------------------- */
.cp-header-menu .menu-primaire > li {
flex-shrink: 0;
}
@media screen and (min-width: 1041px) {
.cp-header-menu .menu-primaire {
display: flex;
left: 243px;
}
.cp-header-menu .menu-primaire > li.parole-18-28 {
margin-left: auto;
}
}
/* -------------------------
MOBILE
------------------------- */
.cp-header-menu-responsive .menu-primaire .picto.close {
text-align: right;
}
.cp-header-menu-responsive .menu-primaire {
padding-bottom: 20px;
}
.cp-header-menu-responsive .menu-footer .cp-social {
border-bottom: none;
}
/* -------------------------
APRES
------------------------- */
.cp-topheader {
z-index: 11;
position: relative;
}
.cp-topheader .cp-social,
.cp-topheader .presse {
white-space: nowrap;
}
.cp-topheader + #body .cp-header-menu.\-cover-dark::before {
content: '';
display: block;
background-color: #f7f7f7;
top: -55px;
left: 0;
right: 0;
height: 55px;
position: absolute;
z-index: -1;
}
.cp-header-menu.\-cover-dark .menu-primaire {
left: 230px;
}
/* --------------------------------------------------
PARTENAIRES (revu)
-------------------------------------------------- */
.cp-partenaires-v2 {
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.cp-partenaires-v2 .en-tete {
width: 178px;
flex-grow: 0;
flex-shrink: 0;
margin-right: 45px;
}
.cp-partenaires-v2 .en-tete h2 {
line-height: 1.2;
padding: 12px 0;
margin-bottom: 0;
text-align: inherit;
}
.parole-1828 .cp-partenaires-v2 .en-tete h2 {
line-height: 0.6;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 36px;
}
.cp-partenaires-v2 .logos-wrap {
flex-grow: 1;
flex-shrink: 1;
max-width: 745px; /* 5x 149px */
height: 187px;
overflow: hidden;
position: relative;
}
.cp-partenaires-v2 .logos {
display: flex;
flex-flow: row wrap;
overflow: hidden;
margin: 0;
position: relative;
}
.cp-partenaires-v2 .logos::after {
content: '';
display: block;
z-index: 0;
position: absolute;
top: 0;
left: 0;
right: 1px;
bottom: 1px;
background-size: 149px 94px;
background-position: -1px -1px;
background-repeat: repeat;
}
.cp-partenaires-v2 .logos::after {
background-image:
linear-gradient(rgba(194,194,194,1) 1px, rgba(0,0,0,0) 1.11111px, rgba(0,0,0,0)),
linear-gradient(90deg, rgba(194,194,194,1) 1px, rgba(0,0,0,0) 1.11111px, rgba(0,0,0,0));
}
.cp-partenaires-v2 .logos li {
z-index: 2;
position: relative;
display: block;
margin: 0 1px 1px 0;
}
.cp-partenaires-v2 .logos a {
display: block;
width: 148px;
height: 93px;
padding: 10px;
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.cp-partenaires-v2 .logos img {
display: block;
/*width: 100%;*/
max-width: 100%;
max-height: 100%;
}
@media (max-width: 1080px) {
.cp-partenaires-v2 .logos-wrap {
max-width: 596px;
}
}
@media (max-width: 940px) {
.cp-partenaires-v2 {
flex-direction: column;
align-items: center;
}
.cp-partenaires-v2 .en-tete {
width: auto;
text-align: center;
margin: 0 0 45px;
}
}
@media (max-width: 720px) {
.cp-partenaires-v2 .logos-wrap {
max-width: 447px;
height: 281px;
}
}
@media (max-width: 540px) {
.cp-partenaires-v2 .logos-wrap {
max-width: 298px;
height: 469px;
}
}
.cp-partenaires-v2.\-all .logos-wrap {
height: auto;
}
/* --------------------------------------------------
ACCESS DIRECTS
-------------------------------------------------- */
.cp-acces-direct-1828 {
margin: -20px;
}
.cp-acces-direct-1828 > * {
margin: 20px !important;
}
.cp-acces-direct {
padding: 0;
margin: -10px;
}
.cp-acces-direct > * {
margin: 10px !important;
}
/* --------------------------------------------------
FORM NEWSLETTER
-------------------------------------------------- */
.cp-newsletter-form .message {
font-size: 14px;
line-height: 1.3;
margin-top: 20px;
padding: 14px 16px;
font-weight: bold;
}
.cp-newsletter-form .message.\-is-error {
color: #ff0000;
background: #ffe7e7;
border-left: 3px solid #f00;
}
.cp-newsletter-form .message.\-is-success {
color: #008e18;
background: #ebffef;
border-left: 3px solid #008e18;
}
#opt-in.cp-newsletter-form .inputs {
display: flex;
flex-flow: row nowrap;
margin-bottom: 20px;
font-family: 'Source Sans Pro', sans-serif;
}
#opt-in.cp-newsletter-form .inputs input[type="text"] {
width: auto;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
max-width: none;
text-align: left;
margin: 0;
color: #757575;
font-family: 'Source Sans Pro', sans-serif;
}
#opt-in.cp-newsletter-form .inputs input[type="submit"] {
width: auto;
flex-grow: 0;
flex-shrink: 0;
min-width: 0;
max-width: none;
margin: 0;
font-family: 'Source Sans Pro', sans-serif ;
}
@media (max-width: 440px) {
#opt-in.cp-newsletter-form .inputs {
flex-direction: column;
}
}
/* --------------------------------------------------
FOOTER
-------------------------------------------------- */
#rappel-social {
/* background-image: -webkit-linear-gradient(0deg, #c14566 0, #b04367 25%, #854869 50%, #332949 75%, #192541 100%);
background-image: -moz-linear-gradient(0deg, #c14566 0, #b04367 25%, #854869 50%, #332949 75%, #192541 100%);
background-image: -ms-linear-gradient(0deg, #c14566 0, #b04367 25%, #854869 50%, #332949 75%, #192541 100%);
background-image: -o-linear-gradient(0deg, #c14566 0, #b04367 25%, #854869 50%, #332949 75%, #192541 100%);
background-image: linear-gradient(90deg, #c14566 0, #b04367 25%, #854869 50%, #332949 75%, #192541 100%); */
background-image: -webkit-linear-gradient(90deg, rgba(28,20,128,1) 0%, rgba(79,38,219,1) 100%);
background-image: -moz-linear-gradient(90deg, rgba(28,20,128,1) 0%, rgba(79,38,219,1) 100%);
background-image: -ms-linear-gradient(90deg, rgba(28,20,128,1) 0%, rgba(79,38,219,1) 100%);
background-image: -o-linear-gradient(90deg, rgba(28,20,128,1) 0%, rgba(79,38,219,1) 100%);
background-image: linear-gradient(90deg, rgba(28,20,128,1) 0%, rgba(79,38,219,1) 100%);
}
#rappel-social .logo img {
max-width: none;
width: 177px;
height: auto;
}
#rappel-social .background-cover img {
opacity: 0.5;
object-position: center center;
}
#footer .menu-administratif a {
margin: 0px 10px;
padding: 10px 10px;
}
/* -------------------------
PLAN DU SITE
------------------------- */
#footer .menu-map {
display: flex;
flex-flow: row nowrap;
padding-left: 45px;
}
#footer .menu-map > a {
padding: 0;
display: block;
margin-right: 45px;
width: 20%;
flex-shrink: 0;
}
#footer .menu-colonnes {
color: #fff;
font-size: 14px;
line-height: 1.2;
text-align: left;
display: flex;
flex-flow: row wrap;
list-style: none;
margin-top: 30px;
}
#footer .menu-colonnes > li {
width: 33%;
min-width: 220px;
margin: 20px 0;
padding: 0 20px 0 30px;
border-left: 1px solid #fff;
}
#footer .menu-colonnes > li > a {
font-weight: 600;
}
#footer .menu-colonnes > li > ul {
margin-top: 15px;
list-style: none;
}
#footer .menu-colonnes > li > ul > li {
margin-left: 1.4em;
position: relative;
}
#footer .menu-colonnes > li > ul > li + li {
margin-top: 15px;
}
#footer .menu-colonnes > li > ul > li::before {
content: '-';
position: absolute;
margin-left: -0.8em;
}
@media (max-width: 830px) {
#footer .menu-map {
flex-flow: column;
padding-left: 0;
}
#footer .menu-map > a {
margin: 30px auto 0;
min-width: 150px;
}
#footer .menu-colonnes {
padding: 0;
}
}
/* --------------------------------------------------
FIX TEXT ALIGN CENTER
-------------------------------------------------- */
@media screen and (max-width: 1040px) {
.cp-cta-image-texte .description { text-align: left; }
.cp-cta-image-texte .description h2:before { -webkit-transform: none; transform: none; left: 0; }
.cp-best-of .description { text-align: left; }
.cp-best-of .description h2:before { -webkit-transform: none; transform: none; left: 0; }
}
@media screen and (max-width: 996px) {
#bas-page { text-align: left; }
}
@media screen and (max-width: 784px) {
.cp-intro .description { text-align: left; }
.cp-intro .cp-texte h2:before { -webkit-transform: none; transform: none; left: 0; }
}
@media screen and (max-width: 862px) {
#rappel-social { text-align: left; }
}
/* --------------------------------------------------
GESTION OVERFLOW ANIMIATIONS
-------------------------------------------------- */
.cp-chiffres-gris {
overflow: hidden;
}
@media screen and (max-width: 1085px) {
.cp-remontee-intervenants.\-grille-multi .intervenants {
overflow-y: hidden;
}
}
/* --------------------------------------------------
DEBUG PROGRAM
-------------------------------------------------- */
.cp-debug-program {
width: auto;
padding: 20px;
z-index: 9999999;
position: absolute;
left: 50px;
right: 50px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.cp-debug-program__item {
padding: 20px;
font-size: 16px;
float: left;
width: 70%;
}
.cp-debug-program__item + .cp-debug-program__item {
width: 30%;
}
.cp-debug-program__item iframe {
width: 100% !important;
}
/* --------------------------------------------------
COVER AFTER
-------------------------------------------------- */
.cp-cover-after {
margin-top: 20px;
position: relative;
}
.cp-cover-after + #article::before {
content: '';
display: block;
padding-bottom: 125px;
margin-bottom: -45px;
}
@media (max-width: 1040px) {
.cp-cover-after {
width: auto;
margin-left: 10px;
margin-right: 10px;
}
.cp-cover-after + #article::before {
padding-bottom: 12%;
}
}
/* -------------------------
TILE MAIN
------------------------- */
.cp-cover-after .tile-main {
display: flex;
flex-flow: row nowrap;
max-width: 84.96093%;
padding-top: 52px;
font-size: 54px;
}
.cp-cover-after .tile-main .text {
flex-grow: 1;
padding: 6.5% 20% 2% 10%;
position: relative;
z-index: 1;
color: #fff;
font-family: 'Roboto Slab',serif;
font-weight: 300;
line-height: .9;
}
.cp-cover-after .tile-main .text strong {
font-weight: 700;
font-size: 1.18518em; /* 64/54px */
}
.cp-cover-after .tile-main .wattermark {
width: 1px;
height: 0;
flex-grow: 0;
white-space: nowrap;
text-indent: -0.2em;
line-height: 0.7;
color: #dc2c4e;
font-size: 9.25925em; /* 500/54px */
font-weight: 700;
font-family: 'Roboto Slab';
user-select: none;
opacity: 0.7;
}
.cp-cover-after .tile-main .wattermark::before {
content: attr(data-content);
}
.cp-cover-after .tile-main-bg {
content: '';
display: block;
margin-bottom: 12%;
position: absolute;
top: 0;
left: 0;
right: 0;
max-width: 84.96093%;
bottom: 0;
z-index: -1;
background: #B15876;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
@media (max-width: 1000px) {
.cp-cover-after .tile-main {
font-size: 50px;
}
}
@media (max-width: 900px) {
.cp-cover-after .tile-main {
font-size: 40px;
}
}
@media (max-width: 800px) {
.cp-cover-after .tile-main {
font-size: 34px;
}
}
@media (max-width: 700px) {
.cp-cover-after .tile-main {
font-size: 28px;
}
.cp-cover-after .tile-main .text {
padding-left: 5%;
padding-bottom: 5%;
}
}
@media (max-width: 550px) {
.cp-cover-after .tile-main {
font-size: 24px;
}
.cp-cover-after .tile-main .text {
padding-left: 2%;
}
}
@media (max-width: 400px) {
.cp-cover-after {
margin-top: 40px;
}
.cp-cover-after .tile-main-bg {
max-width: 95%;
}
.cp-cover-after .tile-main {
font-size: 20px;
}
.cp-cover-after .tile-main .text {
padding-top: 0%;
}
}
/* -------------------------
TILE 2
------------------------- */
.cp-cover-after .tile-2 {
width: 25.4%;
position: absolute;
right: 0;
bottom: 24%;
background: #B15876;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
outline: 10px solid #fff;
}
.cp-cover-after .tile-2:after {
content: '';
display: block;
padding-bottom: 150%;
}
/* -------------------------
TILES 3 & 4
------------------------- */
.cp-cover-after .tiles-3-4 {
display: flex;
flex-flow: row;
justify-content: flex-end;
align-items: center;
position: relative;
margin-bottom: -12.2%;
}
/* -------------------------
TILE 3
------------------------- */
.cp-cover-after .tile-3 {
width: 30%;
background: #B15876;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
outline: 10px solid #fff;
margin-top: -3%;
margin-right: 10px;
}
.cp-cover-after .tile-3:after {
content: '';
display: block;
padding-bottom: 66.66666%;
}
/* -------------------------
TILE 4
------------------------- */
.cp-cover-after .tile-4 {
width: 18.9%;
margin-right: 10%;
background: #B15876;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
outline: 10px solid #fff;
}
.cp-cover-after .tile-4:after {
content: '';
display: block;
padding-bottom: 150%;
}
@media (max-width: 800px) {
.cp-cover-after .tile-2 {
bottom: 30%;
}
.cp-cover-after .tile-3 {
width: 38.676%;
}
.cp-cover-after .tile-4 {
width: 23.4%;
}
}
@media (max-width: 700px) {
.cp-cover-after .tile-2,
.cp-cover-after .tile-3,
.cp-cover-after .tile-4 {
outline-width: 6px;
}
.cp-cover-after .tile-3 {
margin-right: 6px;
}
}
@media (max-width: 500px) {
.cp-cover-after .tile-2 {
bottom: 36%;
}
.cp-cover-after .tile-3 {
width: 46.4112%;
}
.cp-cover-after .tile-4 {
width: 28.08%;
}
}
/* --------------------------------------------------
COVER 1828 AFTER
-------------------------------------------------- */
.cp-cover-1828-after {
margin-top: 20px;
position: relative;
}
.cp-cover-1828-after::after {
content: '';
display: block;
clear: both;
margin-bottom: -11%;
}
.cp-cover-1828-after + #article::before {
content: '';
display: block;
padding-bottom: 123px;
margin-bottom: -25px;
}
@media (max-width: 1040px) {
.cp-cover-1828-after {
width: auto;
}
.cp-cover-1828-after + #article::before {
padding-bottom: 12%;
}
}
/* -------------------------
TILE MAIN
------------------------- */
.cp-cover-1828-after .tile-main {
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-left: 17.5%;
margin-right: 3.9%;
padding-top: 52px;
margin-bottom: -12%;
font-size: 80px;
}
.cp-cover-1828-after .tile-main::before {
content: '';
display: block;
padding-bottom: 50%;
width: 1px;
flex-grow: 0;
flex-shrink: 0;
}
.cp-cover-1828-after .tile-main .text {
flex-grow: 1;
padding: 2% 5% 23% 19.5%;
position: relative;
z-index: 1;
color: #fff;
font-family: 'Summer', sans-serif;
font-weight: 300;
line-height: .7;
}
.cp-cover-1828-after .tile-main .text small {
font-size: 0.6em;
font-weight: 400;
font-family: 'Open Sans',sans-serif;
display: block;
line-height: 1.1;
margin-top: 0.6em
}
.cp-cover-1828-after .tile-main-bg {
content: '';
display: block;
position: absolute;
top: 0;
left: 17.5%;
right: 3.9%;
bottom: 0;
z-index: -1;
background: #333;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
@media (max-width: 1000px) {
.cp-cover-1828-after .tile-main {
font-size: 70px;
}
.cp-cover-1828-after .tile-main .text {
padding-left: 16%;
}
}
@media (max-width: 850px) {
.cp-cover-1828-after {
margin-top: 40px;
}
.cp-cover-1828-after .tile-main {
font-size: 60px;
}
}
@media (max-width: 750px) {
.cp-cover-1828-after .tile-main {
font-size: 46px;
}
}
@media (max-width: 550px) {
.cp-cover-1828-after .tile-main {
font-size: 36px;
}
}
/* -------------------------
TILE 2
------------------------- */
.cp-cover-1828-after .tile-2 {
width: 21.48%;
position: absolute;
left: 45px;
bottom: 5%;
background: #333;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
outline: 10px solid #fff;
}
.cp-cover-1828-after .tile-2:after {
content: '';
display: block;
padding-bottom: 150%;
}
/* -------------------------
TILE 3
------------------------- */
.cp-cover-1828-after .tile-3 {
width: 35.15%;
margin-left: 17.5%;
float: left;
background: #333;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
outline: 10px solid #fff;
position: relative;
}
.cp-cover-1828-after .tile-3:after {
content: '';
display: block;
padding-bottom: 67.5%;
}
/* -------------------------
TILE 4
------------------------- */
.cp-cover-1828-after .tile-4 {
width: 23.4375%;
float: right;
outline: 10px solid #fff;
}
.cp-cover-1828-after .tile-4 .image {
position: relative;
}
.cp-cover-1828-after .tile-4 .image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width: 1000px) {
.cp-cover-1828-after .tile-2 {
left: 23px;
}
}
@media (max-width: 550px) {
.cp-cover-1828-after .tile-2 {
left: 10px;
}
.cp-cover-1828-after .tile-4 {
margin-right: -13px;
}
}
@media (max-width: 700px) {
.cp-cover-1828-after .tile-2,
.cp-cover-1828-after .tile-3,
.cp-cover-1828-after .tile-4 {
outline-width: 6px;
}
}
/* --------------------------------------------------
PHOTO GALLERIES
-------------------------------------------------- */
.cp-photo-grid {
position: relative;
overflow: hidden;
height: 0;
}
.cp-photo-grid a {
display: block;
position: absolute;
text-decoration: none;
background: #eee;
}
.cp-photo-grid img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
}
.cp-photo-grid img {
visibility: hidden;
}
.cp-photo-grid img[src] {
visibility: visible;
}