@charset "utf-8";
/* Conserver ce commentaire pour adapter les sélecteurs de cette feuille de styles à Gutenberg - atelier-adapt-gutenberg */
/*============================================*\
# Initialisation de la feuille de styles #
\*============================================*/
/* VARIABLES */
:root{
/* COULEURS : */
--couleur-blanc:#fff; /* Blanc */
--couleur-noir:#000; /* Noir */
--couleur-texte:#000000; /* Noir texte */
--couleur-pale:#F7F5F5; /* Gris pâle */
--couleur-couleur-principale:#005E9F; /* Couleur principale */
--couleur-couleur-secondaire:#002743; /* Couleur secondaire */
/* STRUCTURE : */
--margesDefaut:3rem; /*....................................... Espacement par défaut */
--largeur:1200px; /*.......................................... Largeur de contenu maximale, adaptable sur différents supports */
--margesCotes:60px;
/* FORMULAIRES : champs */
--form-input-bordColor:silver; /*........................... Couleur des contours de champs */
--form-input-bordWidth:1px; /*................................ Épaisseur des contours de champs */
--form-input-fondColor:white; /*............................ Couleur de fond des champs */
--form-input-height:6rem; /*.................................. Hauteur des champs */
/* FORMULAIRES : boutons */
--form-bouton-bordColor:var(--couleur-couleur-principale); /*. Couleur des contours de boutons */
--form-bouton-bordWidth:1px; /*............................... Épaisseur des contours de boutons */
--form-bouton-fondColor:transparent; /*. Couleur des boutons et autres éléments interactifs */
--form-bouton-textColor:var(--couleur-couleur-principale); /*........................... Couleur du texte des boutons */
/* FORMULAIRES : checkboxes/radio */
--form-check-taille:3rem; /*.................................. Taille des pastilles de checkboxes (entre autres) */
/* FORMULAIRES : autres */
--outline:var(--couleur-noir) auto 2px;
--outline-offset:2px;
accent-color:var(--form-bouton-fondColor); /*................. Couleur par défaut : checkbox, radio, range, progress */
/* ICÔNES : */
--icon-dim:3.2rem; /*......................................... Largeur des pictos */
--icon-couleur:currentColor; /*............................... Couleur des pictos */
--icon-epaisseur:3px; /*...................................... Épaisseur du trait */
--icon-coins:round; /*........................................ Aspect des coins : miter (pointus) ou round (arrondis) */
--icon-extremites:round; /*................................... Aspect des extrémités : butt (droits), round (arrondis) ou square (droits + épaisseur) */
}
@media (min-width:1500px){
:root{ --largeur:1360px; } /* Largeur maximale pour les écrans larges */
}
@media(max-width:1260px){
:root{--largeur:960px;}
}
@media(max-width:980px){
:root{
--largeur:540px;
--margesCotes:30px;
}
}
@media(max-width:600px){
:root{--largeur:300px;}
}
/* Global */
*,*::before,*::after{
box-sizing:inherit;
min-width:0;
min-height:0;
}
html{
box-sizing:border-box;
font-size:62.5%;
overflow-wrap:break-word;
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;/*🧪Ajuste la taille du texte sur smartphone - https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust / https://caniuse.com/?search=text-size-adjust */
-webkit-tap-highlight-color:transparent;/*[non-standard] Couleur de surlignage des liens cliqués - https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
scroll-behavior:smooth;
/* interpolate-size:allow-keywords;/*🧪Autorise les keywords (auto, min-content, fit-content...) dans les transitions - https://caniuse.com/?search=interpolate-size. Voir utilisation et alternative sur https://developer.chrome.com/docs/css-ui/animate-to-height-auto */
}
body{
--margesLargeur : calc((100vw - var(--largScrollBar,0px) - var(--largeur)) / 2);
margin:0;
color:var(--couleur-texte);
font-family: 'Montserrat';
font-size:1.8rem;
line-height:1.5;
min-height:100vh;
background-color:var(--couleur-blanc);
}
body:not(.ready) *{ transition:none; /* Empêche les animations bizarres sur les liens, cf. scripts/main.js */ }
body.contrasts{ color:var(--couleur-noir); }
@media(max-width:980px){
body{ font-size:1.6rem; }
}
/* Blocs et structure */
p, address, ol, ul, dl, dt, dd{
margin-top:0;
margin-bottom:1em;
text-wrap:pretty;
}
figure{ margin:0; }
nav ul, nav ol{
padding:0;
margin:0;
list-style:none;
}
:where(.is-root-container) :is(ul,ol){
--list-liLarg:0.4em; /* épaisseur des puces */
--list-marg:0.4em; /* marge entre la puce et le texte */
--list-shift:1em; /* décalage à gauche de la puce par rapport à l'alignement du texte */
--list-olRatio:0.8; /* changement de taille de la numérotation */
counter-reset:ol-count;
list-style:none;
padding:0;
}
:where(.is-root-container) :where(ul,ol) :is(ul, ol){ margin-bottom:0; }
:where(.is-root-container) ul{ padding-left:calc(var(--list-liLarg) + var(--list-marg) + var(--list-shift)); }
:where(.is-root-container) ol{ padding-left:calc((3ch * var(--list-olRatio)) + var(--list-marg)); }
:where(.is-root-container ul)>li{ text-indent:calc((var(--list-liLarg) + var(--list-marg)) * -1); }
:where(.is-root-container ol)>li{
text-indent:calc(((3ch * var(--list-olRatio)) + var(--list-marg)) * -1);
counter-increment:ol-count;
}
:where(.is-root-container) :where(ul,ol)>li::before{
display:inline-block;
margin:0 var(--list-marg) 0 0;
}
:where(.is-root-container ul)>li::before{
content:"";
background-color:var(--couleur-couleur-principale);
width:var(--list-liLarg);
height:var(--list-liLarg);
}
:where(.is-root-container ol)>li::marker{ content:none; }
:where(.is-root-container ol)>li::before{
content:counter(ol-count) ".";
color:var(--couleur-couleur-principale);
font-weight:bolder;
width:3ch;
text-align:right;
font-size:0.8em;
}
:where(.is-root-container) :where(ul,ol)>:where(li) *{ text-indent:0; }
blockquote{
max-width:100%;
margin-top:0;
margin-bottom:1em;
}
details{ display:block; }
summary{ display:list-item; }
template, [hidden]{ display:none; }
hr{
box-sizing:content-box;
height:0;
margin:1.5em 0;
overflow:visible;
clear:both;
color:inherit;
border:0;
border-top:1px solid currentColor;
}
/* Titres */
/* ⚠ Si le margin-top ou les font-size sont modifiés, penser à les changer également dans le contexte titres × colonnes ci-après */
h1:not(.site-title),h2,h3,h4,.h1,.h2,.h3,.h4{
line-height:1.1;
margin:2em auto 1em 0;
text-wrap:balance;
}
h1:not(:where(.site-title,.h2,.h3,.h4,.h5,.h6)),.h1{
font-size:clamp(3rem, 5.2vw, 6.3rem);
font-weight:900;
}
h1.site-title{
margin:0;
font:inherit;
}
h2:not(:where(.h1,.h3,.h4,.h5,.h6)),.h2{
font-size:clamp(2.4rem, 4vw, 3.8rem);
font-weight: 600;
color:var(--couleur-couleur-principale);
line-height: 39px;
text-align: left;
text-transform: uppercase;
}
h3:not(:where(.h1,.h2,.h4,.h5,.h6)),.h3{
font-size:clamp(2rem, 2.3vw, 2.8rem);
font-weight:normal;
letter-spacing: 0.15em;
font-weight: bold;
font-size: 28px;
text-align: left;
color: var(--couleur-couleur-secondaire);
}
h4:not(:where(.h1,.h2,.h3,.h5,.h6)),.h4{
font-size:clamp(1.8rem, 2.1vw, 2.6rem);
font-weight:bold;
}
/* Marges titres × colonnes */
.wp-block-columns:has( .wp-block-column > :is(h1,.h1):first-child){ margin-top:calc(2 * 4 * 1em); } /* calc(margin-top * font-size * unité) */
.wp-block-columns:has( .wp-block-column > :is(h2,.h2):first-child){ margin-top:calc(2 * 3 * 1em); }
.wp-block-columns:has( .wp-block-column > :is(h3,.h3):first-child){ margin-top:calc(2 * 2 * 1em); }
.wp-block-columns:has( .wp-block-column > :is(h4,.h4):first-child){ margin-top:calc(2 * 1.5 * 1em); }
:where(.wp-block-columns > .wp-block-column) > :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4):first-child{ margin-top:0; }
h2 + .h3{ margin-top:0.4em; }
h2:has( + .h3){ margin-bottom:0.4em; }
/* Inline */
b, strong{ font-weight:bolder; }
abbr[title]{
text-decoration:underline dotted;
border-bottom:none;
cursor:help;
}
sub, sup{
position:relative;
font-size:0.75em;
line-height:0;
vertical-align:baseline;
}
sub{ bottom:-0.25em; }
sup{ top:-0.5em; }
small,
.details{
font-size:80%;
opacity:0.8;
}
/* Liens et ancres */
a{
color:var(--couleur-couleur-principale);
background-color:transparent;
}
[id]{ scroll-margin-top:1em; /* "Décolle" la cible d'une ancre lors d'un scroll */ }
/* Medias */
img, svg{
height:auto;
max-width:100%;
vertical-align:middle;
object-fit:cover;
object-position:center center;
border-style:none;
}
svg:not([fill]){ fill:currentColor; }
svg:not(:root){ overflow:hidden; }
video,
iframe{
height:auto;
max-width:100%;
vertical-align:middle;
border-style:none;
}
/*img[width][height], svg[width][height],
video[width][height],
embed[width][height],
iframe[width][height]{ aspect-ratio:attr(width) / attr(height); }*/
audio,
canvas{ vertical-align:middle; }
/* Éléments "techniques" */
pre, code, kbd, samp{
font-family:monospace;
font-size:1em;
}
pre{
max-width:100%;
margin-top:0;
margin-bottom:1em;
overflow:auto;
line-height:normal;
tab-size:2;
white-space:pre-wrap;
}
code{ max-width:100%; }
/* Tableaux */
table{
margin-bottom:1.5em;
vertical-align:top;
border-collapse:collapse;
}
td{ max-width:100%; }
/* Classes utilitaires */
@media not print{
.print-only, .printOnly, .printonly{ display:none !important; }
}
.clearfix{ display:flow-root; }
:is(.no-marges, .noMarges, .nomarges) > :first-child{ margin-top:0; }
:is(.no-marges, .noMarges, .nomarges) > :last-child{ margin-bottom:0; }
/* Icônes */
:is(.atelier-icone,.atelier-icon) svg,
svg:is(.atelier-icone,.atelier-icon){
overflow:visible;
object-fit:contain;
fill:none;
stroke-miterlimit:10;
width:var(--icon-dim);
height:var(--icon-dim);
stroke:var(--icon-couleur);
stroke-width:var(--icon-epaisseur);
stroke-linejoin:var(--icon-coins);
stroke-linecap:var(--icon-extremites);
transition:stroke 0.3s ease-out;
}
/* -menu / -menu-alt */
:is(.atelier-icon-menu,.atelier-icon-menu-alt) line{
transform-origin:center center;
transition:0.3s ease-out;
transition-property:opacity, transform, stroke, stroke-width;
}
.atelier-icon-menu line:where(:nth-child(1)){ transform:translateY(calc((32px - var(--icon-epaisseur)) * -0.5)); }
.atelier-icon-menu line:where(:nth-child(4)){ transform:translateY(calc((32px - var(--icon-epaisseur)) * 0.5)); }
.atelier-icon-menu-alt line:where(:nth-child(1)){ transform:translateY(calc(var(--icon-epaisseur) * -2)); }
.atelier-icon-menu-alt line:where(:nth-child(4)){ transform:translateY(calc(var(--icon-epaisseur) * 2)); }
:where([aria-expanded="true"]) :is(.atelier-icon-menu,.atelier-icon-menu-alt) line:where(:nth-child(1),:nth-child(4)){ transform:translateY(0); opacity:0; }
:where([aria-expanded="true"]) :is(.atelier-icon-menu,.atelier-icon-menu-alt) line:where(:nth-child(2)){ transform:rotate(-45deg); }
:where([aria-expanded="true"]) :is(.atelier-icon-menu,.atelier-icon-menu-alt) line:where(:nth-child(3)){ transform:rotate(45deg); }
/*===============*\
# Structure #==================================================================================================================================
\*===============*/
.site-header,
.site-content,
.site-footer{ display:flow-root; }
.scrolledHeader .site-header{
/*position:sticky;*/
top:0;
left:0;
right:0;
/*transform:translateY(-100%);
transition:none;*/
}
/*.scrolledHeaderToTop .site-header{
transform:translateY(0%);
transition:transform 0.3s ease-out;
}*/
.site-header{
z-index:3;
position:relative;
}
.site-content,
.site-footer{ z-index:1; }
.container,
.alignfull > .wp-block-group__inner-container{
width:var(--largeur);
max-width:100%;
margin-inline:auto;
}
/* Pager */
.nav-links{
--icon-dim:1em;
--gap:0.5em;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:2rem;
gap:var(--gap);
padding:var(--gap);
}
.nav-links > *{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:inherit;
min-width:2em;
padding:0.4em;
height:2em;
line-height:1;
background-color:var(--couleur-pale);
}
.nav-links > .current{
background:var(--couleur-couleur-principale);
color:var(--couleur-blanc);
}
/* Colonnes /*
#== Classes utilitaires ==============================================================================================================#
• grid-section : crée des colonnes pour les viewports > 980px (par défaut)
• grid-section12 : idem, mais les proportions sont indiquées différemment
RESPONSIVE
• grid-large : empile les blocs pour les viewports de largeur inférieure à 1260px au lieu de 980px
• grid-small : empile les blocs pour les viewports de largeur inférieure à 600px au lieu de 980px
RÉPARTITION
• v-align-… : alignement vertical des colonnes (par défaut, étirées).
v-align-top : alignées en haut
v-align-center : colonnes centrées
• h-align-… : répartition horizontale des colonnes (par défaut, espacées).
h-align-left : alignées à gauche
h-align-center : centrées
h-align-right : alignées à droite
MARGES
• --cols-gap : espacement entre les colonnes
COLONNES IRRÉGULIÈRES
• --cols-prop (si .grid-section) : proportions des colonnes entre elles (par défaut 1fr 1fr)
• --col-prop12 (si .grid-section12) : proportions des colonnes, par rapport à une grille de 12 colonnes (par défaut 6)
GRILLE AUTOMATIQUE
• grid-auto : crée des colonnes de largeur égale à --cols-larg et les répartit sur plusieurs lignes si besoin
• grid-auto-fill : la largeur des colonnes peut s'agrandit de façon à remplir la fraction complète
• --cols-larg : largeur d'une colonne (par défaut 300px), largeur minimale si .grid-auto-fill
*/
.grid-section,
.grid-section12,
.grid-auto,
.grid-auto-fill{
--cols-gap:var(--margesDefaut);
display:grid;
gap:var(--cols-gap);
justify-content:center;
position:relative;
grid-auto-flow:dense;
}
.grid-section{
--cols-prop:1fr 1fr;
grid-template-columns:var(--cols-prop);
}
.grid-section12{ grid-template-columns:repeat(12, 1fr); }
.grid-section12 > *{
--col-prop12:6;
grid-column:span var(--col-prop12);
}
.grid-auto,
.grid-auto-fill{
--cols-larg:300px;
grid-template-columns:repeat(auto-fill, var(--cols-larg));
}
.grid-auto-fill{ grid-template-columns:repeat(auto-fill, minmax(var(--cols-larg),1fr)); }
@media(max-width:1260px){
:is(.grid-section,.grid-section12):where(.grid-large){ grid-template-columns:1fr; }
:is(.grid-section,.grid-section12):where(.grid-large) > *{ grid-column:1; }
}
@media(max-width:980px){
:is(.grid-section,.grid-section12):not(:where(.grid-small,.grid-large)){ grid-template-columns:1fr; }
:is(.grid-section,.grid-section12):not(:where(.grid-small,.grid-large)) > *{ grid-column:1; }
}
@media(max-width:600px){
:is(.grid-section,.grid-section12):where(.grid-small){ grid-template-columns:1fr; }
:is(.grid-section,.grid-section12):where(.grid-small) > *{ grid-column:1; }
}
.v-align-top{ align-items:flex-start; }
.v-align-center{ align-items:center; }
.h-align-left{ justify-content:flex-start; }
.h-align-center{ justify-content:center; }
.h-align-right{ justify-content:flex-end; }
/*=================*\
# Formulaires #
#-------------------#
# Classes utilitaires :
# .form-optionnel : mention "optionnel" près d'un champ (à préférer au "*" obligatoire)
# .switch : sur un , change l'aspect visuel
# Structure d'une ligne classique :
#
\*=================*/
/*==== Champs ===================================================================================*/
button,
input:where(:not([type="checkbox"]):not([type="radio"])),
::file-selector-button,
:is(.bouton, .wp-block-button__link, .form--file-bouton),
textarea,
select,
optgroup{
max-width:100%;
height:auto;
margin:0;
overflow:visible;
color:inherit;
font:inherit;
letter-spacing:inherit;
text-transform:none;
vertical-align:middle;
background:none;
appearance:none;
}
/* Empêche le zoom au double-tap */
a,
area,
button,[role="button"],
input:where(:not([type="range"])),
label,
select,
summary,
textarea,
[tabindex]{ touch-action:manipulation; }
/* Placeholder */
::placeholder,
:where(.form-labelInside) label{
color:inherit;
font-style:italic;
opacity:0.8;
}
/*==== BOUTONS ====*/
/* Outline sur le faux bouton de .form-fileInput */
:is(.form-fileInput [type="file"]:focus-visible) + .form--file-bouton{
outline:var(--outline);
outline-offset:var(--outline-offset);
}
/* Tous les boutons */
button:where(:not(.slider-nav)),
[type="button"]:where(:not(.slider-nav)),
[type="reset"],
[type="submit"],
::file-selector-button,
:is(.bouton, .wp-block-button__link, .form--file-bouton){
display:inline-block;
line-height:1.2;
padding:1em calc(1em + 0.5lh);
background:var(--form-bouton-fondColor);
color:var(--form-bouton-textColor);
border:var(--form-bouton-bordWidth) solid var(--form-bouton-bordColor);
cursor:default;
overflow:visible;
user-select:none;
text-decoration:none;
transition:0.3s ease-out;
transition-property:color, background-color, border-color;
border-radius: 0px;
text-transform: uppercase;
font-weight:bold;
/* Boutons contenant une icône et/ou du texte pour screen reader */
&:where(:has(svg:only-child)){
padding:calc(var(--icon-dim) * 0.5);
}
/* Survol et focus */
:is(&):not(:disabled):is(:hover,:focus-visible),
:is([type="file"]:not(:disabled):is(:hover,:focus-visible))::file-selector-button,
:is(.form-fileInput [type="file"]:not(:disabled):is(:hover,:focus-visible)) + .form--file-bouton{
--form-bouton-bordColor:var(--couleur-couleur-secondaire);
--form-bouton-fondColor:var(--couleur-couleur-secondaire);
--form-bouton-textColor:var(--couleur-blanc);
}
}
/*==== CHAMPS DE TYPE TEXTE ====*/
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
textarea,
select,
:where(.form-labelInside) label{
vertical-align:middle;
padding-block:calc((var(--form-input-height) - 2*var(--form-input-bordWidth) - 1lh)*0.5); /* hauteur - 2*bordure - line-height */
padding-inline:calc(0.5em + 0.5lh);
width:100%;
height:var(--form-input-height);
min-height:var(--form-input-height);
border:none;
background-color:transparent;
}
/* TEXTAREA */
textarea{
--textarea-lines:2;
overflow:auto;
resize:vertical;
vertical-align:top;
white-space:pre-wrap;
height:calc(var(--form-input-height) + var(--textarea-lines) * 1lh); /* hauteur + (lignes-1)*line-height */
}
textarea[rows]{ --textarea-lines:attr(rows); }
/* NUMBER */
[type="number"]{ appearance:textfield; } /* Firefox : conversion en apparence textfield pour retirer les flèches mal gérées */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{
-moz-appearance:textfield;
appearance:none;
height:auto;
}
/* RECHERCHE */
[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button,
[type="search"]::-webkit-search-results-decoration {
appearance:none; /* macOS Chrome et Safari : retire le padding */
display:none; /* Supprime le 'x' à droite du champ quand du texte est entré */
}
/* COULEUR */
[type="color"]{
background:none;
width:var(--form-check-taille);
height:var(--form-check-taille);
border:none;
padding:0;
}
[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
/* NB : dupliquer le code pour -webkit et -moz- ci-après */
[type="color"]::-webkit-color-swatch{
border:none;
border-radius:50%;
}[type="color"]::-moz-color-swatch{
border:none;
border-radius:50%;
}
/* RANGE */
[type="range"]{
-webkit-appearance:none;
appearance:none;
width:100%;
outline:none;
}
[type="range"]::-webkit-slider-thumb{ /* (curseur pour WebKit/Blink) */
-webkit-appearance:none;
appearance:none;
margin-top:calc(var(--form-check-taille)/-3 - var(--form-input-bordWidth));
height:var(--form-check-taille);
width:var(--form-check-taille);
border:none;
border-radius:50%;
background-color:var(--form-bouton-fondColor);
cursor:ew-resize;
}
[type="range"]:focus::-webkit-slider-thumb{ outline:auto 5px -webkit-focus-ring-color; }
[type="range"]::-moz-range-thumb{ /* (curseur pour Firefox) */
-webkit-appearance:none;
appearance:none;
margin-top:calc(var(--form-check-taille)/-3 - var(--form-input-bordWidth));
height:var(--form-check-taille);
width:var(--form-check-taille);
border:none;
border-radius:50%;
background-color:var(--form-bouton-fondColor);
cursor:ew-resize;
}
[type="range"]:focus::-moz-range-thumb{ outline:auto; }
[type="range"]::-webkit-slider-runnable-track {
width:100%;
height:calc(var(--form-check-taille)/3);
background-color:var(--form-input-fondColor);
border:var(--form-input-bordWidth) solid var(--form-input-bordColor);
border-radius:var(--form-check-taille);
}
[type="range"]::-moz-range-track {
width:100%;
height:calc(var(--form-check-taille)/3);
background-color:var(--form-input-fondColor);
border:var(--form-input-bordWidth) solid var(--form-input-bordColor);
border-radius:var(--form-check-taille);
}
/* DATES */
[type="date"]::-webkit-inner-spin-button,
[type="time"]::-webkit-inner-spin-button{ appearance:none; }
/* SELECT */
select:not([multiple]){
padding-right:calc(var(--form-input-height) + 1em);
border-radius:0;
background:url("icon.php?i=navB") no-repeat right calc(var(--form-input-height)*0.25) center / calc(var(--form-input-height)*0.5),
linear-gradient(var(--form-input-fondColor), var(--form-input-fondColor)) no-repeat right top / var(--form-input-height) var(--form-input-height),
var(--form-input-fondColor);
height:var(--form-input-height);
}
select:where([multiple]){
height:auto;
max-height:none;
overflow-y:scroll;
padding:0;
border:var(--form-input-bordWidth) solid var(--form-input-bordColor);
background-color:var(--form-input-fondColor);
}
select:where([multiple]) option{
padding:0.5em 1em;
margin:var(--form-bouton-bordWidth);
}
:where(select[multiple]) option:checked{
color:var(--form-bouton-textColor);
background-color:var(--form-bouton-fondColor);
}
/* CHECKBOX / RADIO */
[type="checkbox"],
[type="radio"]{
margin:0 0.3em 0 0;
padding:0;
appearance:none;
vertical-align:middle;
cursor:pointer;
display:inline-block;
}
:is([type="checkbox"],[type="radio"]):not(.switch){
width:var(--form-check-taille);
height:var(--form-check-taille);
border:var(--form-input-bordWidth) solid var(--form-input-bordColor);
}
[type="radio"]:not(.switch),
[type="radio"]:not(.switch)::before{ border-radius:50%; }
:is([type="checkbox"],[type="radio"]):not(.switch)::before{
--form-check-marge:4px;
content:"";
background-color:var(--form-bouton-fondColor);
display:block;
width:calc(100% - var(--form-check-marge) * 2);
height:calc(100% - var(--form-check-marge) * 2);
margin:var(--form-check-marge);
transform:scale(0);
transition:transform .1s ease-out;
}
[type="checkbox"]:not(.switch):checked::before,
[type="radio"]:not(.switch):checked::before{ transform:scale(1); }
:is(.wpcf7-checkbox,.wpcf7-radio,.gfield_checkbox,.gfield_radio){
display:flex;
flex-wrap:wrap;
gap:1em;
}
.form-list :is(.wpcf7-checkbox,.wpcf7-radio,.wpcf7-list-item,.gfield_checkbox,.gfield_radio,.gchoice){
display:block;
margin-bottom:1em;
}
.wpcf7-list-item label:where(:has(input):has(.wpcf7-list-item-label)),
.gchoice label:where(:has(input):has(.gform-field-label)){
display:flex;
flex-wrap:nowrap;
align-items:flex-start;
}
.wpcf7-list-item label:where(:has(input):has(.wpcf7-list-item-label)) input,
.gchoice label:where(:has(input):has(.gform-field-label)) input{
flex:0 0 auto;
}
.wpcf7-list-item label:where(:has(input):has(.wpcf7-list-item-label)) .wpcf7-list-item-label,
.gchoice label:where(:has(input):has(.gform-field-label)) .gform-field-label{
flex:1 1 auto;
line-height:1.2;
padding-block:calc((var(--form-check-taille) - 1.2em)/2);
}
/* Aspect "switch" */
.switch {
border-radius:var(--form-check-taille);
width:calc(var(--form-check-taille)*2);
height:var(--form-check-taille);
line-height:var(--form-check-taille);
font-size:calc(var(--form-check-taille) * 0.4);
box-shadow:inset calc(var(--form-check-taille) * -1) 0 0 var(--form-bouton-bordWidth) currentColor,
inset 0 0 0 var(--form-bouton-bordWidth) currentColor;
transition:box-shadow .3s ease-out;
background-color:#fff;
}
.switch:checked {
box-shadow:inset var(--form-check-taille) 0 0 var(--form-bouton-bordWidth) var(--form-bouton-fondColor),
inset 0 0 0 var(--form-bouton-bordWidth) var(--form-bouton-fondColor);
}
.switch::before,
.switch::after {
font-weight:bold;
color:#fff;
}
.switch::before {
content:"✕";
float:right;
margin-right:calc(var(--form-check-taille) * 0.4);
}
.switch:checked::before {
content:"✓";
float:left;
margin-left:calc(var(--form-check-taille) * 0.4);
}
/* FICHIERS */
@media(min-width:981px){
::file-selector-button{ margin-right:0.25em; }
}
@media(max-width:980px){
[type="file"],
::file-selector-button{
display:block;
width:100%;
}
}
/* Pour utiliser cet aspect, le champ doit être dans un élément contenant la classe .form-fileInput */
.form-fileInput{
display:inline-block;
position:relative;
}
.form-fileInput [type="file"]{
position:absolute;
inset:0;
opacity:0;
z-index:1;
overflow:hidden;
}
/* AUTRES CHAMPS */
progress{
display:inline-block;
width:100%;
vertical-align:baseline;
}
output{ display:inline-block; }
/*==== Structure ================================================================================*/
fieldset{
padding:0;
border:1px solid var(--form-input-bordColor);
}
legend{
display:table;
max-width:100%;
padding:0 0.5em;
color:inherit;
white-space:normal;
border:0;
}
label{
display:inline-block;
cursor:pointer;
}
.form-ligne:where(:not(.wp-block-column)){ margin-block:var(--margesDefaut); }
.form-optionnel{
font-size:0.8em;
color:limegreen;
}
.form-label{
display:block;
margin:0 auto 0.5em 0;
inline-size:fit-content;
}
/* Éléments inactifs */
:disabled{
opacity:0.7;
cursor:not-allowed;
}
/* .form-labelInside : le label contenu dans le bloc se comporte comme un placeholder et se déplace lorsque le champ est focus ou renseigné */
.form-labelInside{
position:relative;
padding-top:calc(var(--form-input-height) / 2);
}
.form-labelInside label{
position:absolute;
top:calc(var(--form-input-height) / 2);
border-color:transparent;
background:none;
margin:0;
transition:0.3s ease-out;
transition-property:padding, opacity, font-size, font-style, top;
pointer-events:none;
}
.form-labelInside label::after{
content:" :";
opacity:0;
transition:opacity 0.3s ease-out;
}
.form-labelInside:is(:not(:has(input:placeholder-shown)),:has(input:focus)) label{
padding:0;
font-size:0.8em;
opacity:1;
font-style:normal;
top:0;
}
.form-labelInside:is(:not(:has(input:placeholder-shown)),:has(input:focus)) label::after{opacity:1;}
/* Contact Form 7 */
.wpcf7-response-output:not(:empty){
border:1px solid var(--couleur-blanc);
border-left-width:4px;
padding:1em 2em;
margin:2em 0;
background-color:white;
color:#060;
}
input.wpcf7-not-valid{color:red;}
.wpcf7-not-valid-tip{
color:red;
font-size:0.8em;
display:block;
}
/* Badge Invisible reCaptcha */
.grecaptcha-badge{z-index:3;}
/* Protection des emails (effet visuel uniquement, protection réelle via php/js) */
a[data-class="atelier-emph"]:not(.done) .emphrplc{filter:blur(0.2em);}
.acf-actions a{ text-decoration:none; }
/* RGPD Youtube et ACF map */
.youtube-iframe-rgpd,
.youtube-iframe-axeptio,
.acf-map,
.osm-map{
overflow:hidden;
position:relative;
}
.acf-map,
.osm-map{
width:100%;
height:400px;
}
.youtube-iframe-rgpd::before,
.youtube-iframe-axeptio::before{
content:"";
display:block;
padding-top:56.25%;
}
.youtube-iframe-rgpd > *,
.youtube-iframe-axeptio > *,
.acf-map.inactive > *{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.youtube-iframe-rgpd-vignette,
.youtube-iframe-axeptio-vignette{
background:no-repeat center center / contain #000;
filter:blur(10px);
}
.acf-map-rgpd-vignette,
.acf-map-axeptio-vignette{
background:linear-gradient(120deg,#9cc0f9 0%,#e8eaed 12%,#e8eaed 88%,#b4dfc0 100%) #e8eaed;
}
.youtube-iframe-rgpd-inner,
.youtube-iframe-axeptio-inner,
.acf-map-rgpd-inner,
.acf-map-axeptio-inner{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:1em 2em;
}
.youtube-iframe-rgpd-inner,
.youtube-iframe-axeptio-inner{
background:rgba(0,0,0,0.8);
color:#fff;
}
.acf-map .acf-map-rgpd-inner,
.acf-map .acf-map-axeptio-inner{
position:relative;
background:rgba(0,0,0,0.15);
color:#000;
}
.acf-map:not(.inactive) img,
.acf-map:not(.inactive) button{
max-width:inherit;
object-fit:inherit;
background:inherit;
padding:inherit;
display:inherit;
cursor:inherit;
}
.acf-map .marker{ display:none; }
.leaflet-container{
font-size:1.2rem;
}
.leaflet-container .leaflet-marker-pane img{
filter:drop-shadow(0px 0px 4px rgba(0,0,0,0.3));
}
/*============*\
# FORMES #
\*============*/
/* Triangles */
.shape-triangle{
--shape-angle:0deg;
height:var(--icon-dim);
aspect-ratio:cos(30deg);
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
transform-origin:center;
transform:rotate(var(--shape-angle));
}
.shape-triangle-circ{
--shape-angle:90deg;
--shape-padd:calc(0.5 * var(--icon-dim) - cos(45deg) * 0.5 * var(--icon-dim));
--shape-color:#fff;
aspect-ratio:1;
width:var(--icon-dim);
border-radius:50%;
padding:var(--shape-padd);
}
.shape-triangle-circ::before{
content:"";
display:block;
background-color:var(--shape-color);
width:calc(var(--icon-dim) - var(--shape-padd) * 2);
height:calc(var(--icon-dim) - var(--shape-padd) * 2);
clip-path: polygon(
calc(50% + 50% * sin(var(--shape-angle) + (0 * 360deg) / 3))
calc(50% + 50% * cos(var(--shape-angle) + (0 * 360deg) / 3)),
calc(50% + 50% * sin(var(--shape-angle) + (1 * 360deg) / 3))
calc(50% + 50% * cos(var(--shape-angle) + (1 * 360deg) / 3)),
calc(50% + 50% * sin(var(--shape-angle) + (2 * 360deg) / 3))
calc(50% + 50% * cos(var(--shape-angle) + (2 * 360deg) / 3))
);
}
/* Hexagones */
.shape-hex{
height:var(--icon-dim);
aspect-ratio:1/cos(30deg);
clip-path:polygon(50% -50%, 100% 50%, 50% 150%, 0% 50%);
padding-inline:calc(1 / cos(30deg) * 0.25 * var(--icon-dim));
}
.shape-hexalt{
width:var(--icon-dim);
aspect-ratio:cos(30deg);
clip-path:polygon(-50% 50%, 50% 0%, 150% 50%, 50% 100%);
padding-block:calc(1 / cos(30deg) * 0.25 * var(--icon-dim));
}
.shape-hex.shift{ margin-inline:calc(1 / cos(30deg) * -0.25 * var(--icon-dim)); }
.shape-hexalt.shift{ margin-block:calc(1 / cos(30deg) * -0.25 * var(--icon-dim)); }
/* Étoiles */
.shape-star{
--shape-angle:180deg;
--shape-inner:30%;
width:var(--icon-dim);
height:var(--icon-dim);
clip-path: polygon(
calc(50% + 50% * sin(var(--shape-angle) + (0 * 360deg) / 5))
calc(50% + 50% * cos(var(--shape-angle) + (0 * 360deg) / 5)),
calc(50% + calc(50% - var(--shape-inner)) * sin(var(--shape-angle) + (0 * 360deg + 180deg) / 5))
calc(50% + calc(50% - var(--shape-inner)) * cos(var(--shape-angle) + (0 * 360deg + 180deg) / 5)),
calc(50% + 50% * sin(var(--shape-angle) + (1 * 360deg) / 5))
calc(50% + 50% * cos(var(--shape-angle) + (1 * 360deg) / 5)),
calc(50% + calc(50% - var(--shape-inner)) * sin(var(--shape-angle) + (1 * 360deg + 180deg) / 5))
calc(50% + calc(50% - var(--shape-inner)) * cos(var(--shape-angle) + (1 * 360deg + 180deg) / 5)),
calc(50% + 50% * sin(var(--shape-angle) + (2 * 360deg) / 5))
calc(50% + 50% * cos(var(--shape-angle) + (2 * 360deg) / 5)),
calc(50% + calc(50% - var(--shape-inner)) * sin(var(--shape-angle) + (2 * 360deg + 180deg) / 5))
calc(50% + calc(50% - var(--shape-inner)) * cos(var(--shape-angle) + (2 * 360deg + 180deg) / 5)),
calc(50% + 50% * sin(var(--shape-angle) + (3 * 360deg) / 5))
calc(50% + 50% * cos(var(--shape-angle) + (3 * 360deg) / 5)),
calc(50% + calc(50% - var(--shape-inner)) * sin(var(--shape-angle) + (3 * 360deg + 180deg) / 5))
calc(50% + calc(50% - var(--shape-inner)) * cos(var(--shape-angle) + (3 * 360deg + 180deg) / 5)),
calc(50% + 50% * sin(var(--shape-angle) + (4 * 360deg) / 5))
calc(50% + 50% * cos(var(--shape-angle) + (4 * 360deg) / 5)),
calc(50% + calc(50% - var(--shape-inner)) * sin(var(--shape-angle) + (4 * 360deg + 180deg) / 5))
calc(50% + calc(50% - var(--shape-inner)) * cos(var(--shape-angle) + (4 * 360deg + 180deg) / 5))
);
}
/* Graphiques circulaires */
.graph-circ{
width:var(--icon-dim);
height:var(--icon-dim);
mask: conic-gradient(#000 calc(var(--progress) * 1turn), transparent calc(var(--progress) * 1turn + 0.5grad), transparent 0) intersect,
radial-gradient(50% 50%, transparent calc(100% - var(--icon-epaisseur)), #000 calc(100% - var(--icon-epaisseur) + 1px), #000 0 calc(100% - 1px), transparent);
}
/* Onglets */
.shape-onglet-outer{
display:flex;
align-items:flex-end;
justify-content:flex-start;
flex-wrap:wrap;
}
.shape-onglet{
--shape-round:1em; /* Épaisseur des arrondis */
--shape-space:2px; /* Espace entre les onglets */
position:relative;
margin:calc(var(--shape-round) * -1) calc(var(--shape-round) * -1 + var(--shape-space) / 2) 0;
min-height:calc(var(--shape-round)*3);
border:var(--shape-round) solid transparent;
border-bottom:0;
border-radius:calc(2*var(--shape-round)) calc(2*var(--shape-round)) 0 0;
background-clip:border-box;
align-content:center;
--shape-onglet-rg:linear-gradient(transparent 0 0);
--shape-onglet-rd:linear-gradient(transparent 0 0);
mask:var(--shape-onglet-rg), var(--shape-onglet-rd), linear-gradient(#000 0 0) padding-box;
}
.shape-onglet.rleft{
--shape-onglet-rg:radial-gradient(100% 100% at 0 0, transparent calc(100% - 1px), #000) 0 100% / var(--shape-round) var(--shape-round) no-repeat;
margin-left:calc(var(--shape-space) / 2);
}
.shape-onglet.rright{
--shape-onglet-rd:radial-gradient(100% 100% at 100% 0, transparent calc(100% - 1px), #000) 100% 100% / var(--shape-round) var(--shape-round) no-repeat;
margin-right:calc(var(--shape-space) / 2);
}
.shape-onglet::before{
--shape-shadow-h:0.5em; /* Hauteur de l'ombre */
--shape-shadow-o:0.15; /* Intensité de l'ombre */
content:"";
position:absolute;
inset:auto calc(var(--shape-round) * -1) 0;
height:var(--shape-shadow-h);
background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,var(--shape-shadow-o)));
}
.shape-onglet.active::before{opacity:0;}
/* Bulle */
.shape-bulle{
--shape-dim:1em;
position:relative;
background-clip:border-box;
border:0 solid transparent;
}
.shape-bulle:where(.posL,.posLT,.posLB){border-left-width:var(--shape-dim);}
.shape-bulle:where(.posT,.posTL,.posTR){border-top-width:var(--shape-dim);}
.shape-bulle:where(.posR,.posRT,.posRB){border-right-width:var(--shape-dim);}
.shape-bulle:where(.posB,.posBL,.posBR){border-bottom-width:var(--shape-dim);}
.shape-bulle:where(.posL){clip-path:polygon(var(--shape-dim) 0,100% 0,100% 100%,var(--shape-dim) 100%,var(--shape-dim) calc(50% + var(--shape-dim)),0 50%,var(--shape-dim) calc(50% - var(--shape-dim)));}
.shape-bulle:where(.posLT){clip-path:polygon(0 0,100% 0,100% 100%,var(--shape-dim) 100%,var(--shape-dim) var(--shape-dim));}
.shape-bulle:where(.posTL){clip-path:polygon(0 0,var(--shape-dim) var(--shape-dim),100% var(--shape-dim),100% 100%,0 100%);}
.shape-bulle:where(.posT){clip-path:polygon(0 var(--shape-dim),calc(50% - var(--shape-dim)) var(--shape-dim),50% 0,calc(50% + var(--shape-dim)) var(--shape-dim),100% var(--shape-dim),100% 100%,0 100%);}
.shape-bulle:where(.posTR){clip-path:polygon(0 var(--shape-dim),calc(100% - var(--shape-dim)) var(--shape-dim),100% 0,100% 100%,0 100%);}
.shape-bulle:where(.posRT){clip-path:polygon(0 0,100% 0,calc(100% - var(--shape-dim)) var(--shape-dim),calc(100% - var(--shape-dim)) 100%,0 100%);}
.shape-bulle:where(.posR){clip-path:polygon(0 0,calc(100% - var(--shape-dim)) 0,calc(100% - var(--shape-dim)) calc(50% - var(--shape-dim)),100% 50%,calc(100% - var(--shape-dim)) calc(50% + var(--shape-dim)),calc(100% - var(--shape-dim)) 100%,0 100%);}
.shape-bulle:where(.posRB){clip-path:polygon(0 0,calc(100% - var(--shape-dim)) 0,calc(100% - var(--shape-dim)) calc(100% - var(--shape-dim)),100% 100%,0 100%);}
.shape-bulle:where(.posBR){clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - var(--shape-dim)) calc(100% - var(--shape-dim)),0 calc(100% - var(--shape-dim)));}
.shape-bulle:where(.posB){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--shape-dim)),calc(50% + var(--shape-dim)) calc(100% - var(--shape-dim)),50% 100%,calc(50% - var(--shape-dim)) calc(100% - var(--shape-dim)),0 calc(100% - var(--shape-dim)));}
.shape-bulle:where(.posBL){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--shape-dim)),var(--shape-dim) calc(100% - var(--shape-dim)),0 100%);}
.shape-bulle:where(.posLB){clip-path:polygon(var(--shape-dim) 0,100% 0,100% 100%,0 100%,var(--shape-dim) calc(100% - var(--shape-dim)));}
/*================*\
# NAVIGATION #
\*================*/
@media(min-width:981px){
.menu-toggle{ display:none; }
[role="menubar"]{
display:flex;
position:relative;
}
[role="menubar"] :where([class*="--level-2-ul"]){
position:absolute;
top:100%;
height:0;
padding-block:0;
overflow-y:clip;
interpolate-size:allow-keywords;
transition:0.3s ease-out;
transition-property:height,padding-block;
z-index:1;
}
[role="menubar"] :where([aria-expanded="true"] + [class*="--level-2-ul"]){ height:auto; }
}
.site-footer{
background:url('/wp-content/themes/atelier/design/background-footer.png') no-repeat center center;
background-size:cover;
padding:4em 0;
color: #fff;
}
.footer-container{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.col-footer-1{
width:33%;
}
.col-footer-2{
width:25%;
padding-top:60px;
}
.col-footer-3{
width:33%;
padding-top:60px;
}
.site-footer h2{
color:white;
margin-top:0;
font-size:3rem;
}
.site-footer h2 em{
border-bottom:2px solid var(--couleur-couleur-secondaire);
font-style: normal;
}
.site-footer a {
text-decoration: none;
color:white;
}
.footer-navigation ul li{
font-size:1.6rem;
margin-bottom:0.5em;
}
.link-socials-footer{
margin-bottom:10px;
display:flex;
align-items:center;
gap:0.5em;
font-weight: bold;
font-size: 2rem;
line-height: 1;
}
.link-socials-footer svg{
flex:0 0 1.5em;
}
.footer-main-container{
padding:4em 0;
padding-bottom:0;
}
.menu-subfooter{
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-top:1px solid white;
padding-top:3em;
}
.menu-subfooter a {
font-size:1.4rem;
padding:0em 1em;
}
.footer-traits-container{
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.footer-traits-container .trait{
width:20%;
height:4px;
display:block;
margin-inline: 20px;
}
.trait.vert{ background: var(--couleur-couleur-principale);}
.trait.blanc{ background: var(--couleur-blanc);}
.trait.jaune{ background: var(--couleur-couleur-secondaire);}
@media (max-width: 980px) {
.footer-traits-container{ display:none;}
.footer-container{
flex-direction: column;
}
.col-footer-1, .col-footer-2, .col-footer-3{
width:100%;
padding-top:2em;
}
.menu-subfooter{
flex-direction: column;
align-items: center;
}
}
.container-header-img{
position:relative;
display:block;
top:0;
max-width:100vw;
padding-inline: 0;
margin-bottom:0.5em;
}
.rank-math-breadcrumb{
position:absolute;
display:inline-block;
padding:10px 20px;
left:360px;
top:0;
background:rgba(255, 255, 255, 0.8);
font-size: 16px;
line-height: 20px;
text-align: left;
color: #202f26;
z-index:5;
}
.rank-math-breadcrumb p {
margin-bottom:0;
}
.rank-math-breadcrumb a {
color:var(--couleur-texte);
text-decoration: none;
}
.rank-math-breadcrumb .last{
font-weight:bold;
}
.img-container-top-page{
/*min-height:550px;*/
min-height:400px;
align-content:center;
z-index:2;
/*padding:30% 0 2em calc(1.5 * var(--margesCotes));*/
padding:calc(4em + 40px) calc(1.5 * var(--margesCotes)) 4em calc(1.5 * var(--margesCotes));
}
.img-container-top-page::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.5);
z-index:3;
}
.contrasts .img-container-top-page::before{ background:rgba(0,0,0,0.9); }
:is(h1,.h1).title-header-sandwich{
margin:0 0 0.5em 0;
max-width:calc(100% - 2em);
width:18ch;
color:white;
/*position:absolute;
left:calc(1.5 * var(--margesCotes));
top:30%;*/
z-index:5;
position:relative;
&:last-child{ margin-bottom:0; }
:is(.text-slide-slider-home, .img-container-top-page) &{
text-align:center;
margin-inline:auto;
}
}
.has-couleur-secondaire-background-color h3 {
color: var(--couleur-texte);
}
/*@media (max-width:980px){
h1.title-header-sandwich{
position:relative;
color:var(--couleur-texte);
top: 550px;
max-width: 100%;
left: 0;
margin-bottom: 2em;
}
.container-header-img{
margin-bottom: 6em;
}
}*/
/*==================*\
# Bloc Modulable #==================================================================================================================================
\*===================*/
.bloc-modulable{
padding:2em 0;
position: relative;
z-index: 0;
}
.container-titre-jaune-bloc-modulable{
margin-inline:var(--margesCotes);
width:max-content;
max-width:calc(100% - var(--margesCotes));
position:relative;
z-index:3;
}
.bloc-jaune-titre-bloc-modulable{
padding:1em 2em 1em max(calc(var(--margesLargeur) - var(--margesCotes)), 2em);
display:flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap:var(--margesDefaut);
}
.title-h3-bloc-jaune-bloc-modulable{
margin:0;
flex:0 1 auto;
width:30ch;
max-width:100%;
color:white;
}
.bouton-bloc-jaune-bloc-modulable{
flex:0 0 auto;
margin:1em 0;
border:1px solid white;
color:white;
}
.image-bloc-modulable{
padding-left:var(--margesLargeur);
margin-top: calc(-2 * var(--margesCotes));
position: relative;
z-index:2;
width:100%;
}
.container-title-h2-slider{
padding-left:var(--margesLargeur);
margin-top:calc(-1.5 * var(--margesCotes));
display: flex;
flex-direction: row;
z-index: 10;
position: relative;
}
.container-title-h2-sous-photo-only{
background: #fff;
padding: var(--margesDefaut);
padding-left: 0;
flex:0 1 clamp(270px, 33vw, 540px);
z-index: 2;
position: relative;
display: block;
}
.container-title-h2-sous-photo-only h2{
margin:0;
}
.container-slider-bloc-noir{
--cols-larg:160px;
flex:1 1 auto;
padding-left:var(--cols-gap);
}
.item-bloc-carousel-noir{
background: #2B2E34;
color: var(--couleur-blanc);
padding: 2em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
aspect-ratio: 1 ;
font-weight: bold;
font-size: 1em;
line-height: 24px;
text-align: center;
color: #fff;
text-transform: uppercase;
border-radius: 3px;
text-decoration:none;
transition:all 0.3s ease-in-out;
}
.item-bloc-carousel-noir:hover{
background: var(--couleur-couleur-secondaire);
color: var(--couleur-texte);
}
.slider-flex-container{
display:flex;
flex-direction:row-reverse;
}
.slider-flex-container .slider-container{
width:90%;
}
.slider-flex-container .nav-container{
width:10%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.slider-flex-container .nav-container .slider-nav{
position: relative;
}
.slider-nav::after, .slider-nav::before{
width:1em;
height:1em;
}
@media (max-width:980px){
.container-title-h2-slider, .bloc-jaune-titre-bloc-modulable{
display:block;
}
.container-slider-bloc-noir, .container-title-h2-sous-photo-only, .title-h3-bloc-jaune-bloc-modulable{
max-width: 100%;
margin:1em 0;
}
.container-slider-bloc-noir{ padding-inline:0 var(--margesLargeur); }
.image-bloc-modulable{margin-top:0;}
}
/*============================*\
# Bloc Slider Arguments #==================================================================================================================================
\*============================*/
.bloc-slider-arguments{
margin-bottom:4em;
}
.item-slide-arguments{
position:relative;
padding-top: 0em;;
}
.image-de-fond-slide-arguments{
position:relative;
width:100%;
height:535px;
}
.texte-slider-argument {
position:absolute;
top:0;
left:0;
max-width: 520px;
padding: 2em;
z-index: 2;
background:rgba(0, 94, 159, 0.8);
height:100%;
color:white;
}
.texte-slider-argument h3, .texte-slider-argument h2{
color:white;
}
.slider-indicator-container{
position:absolute;
bottom:0;
right:0;
background: #fff;
width:calc(2 * var(--margesCotes));
height:var(--margesCotes);
z-index:2;
}
@media (max-width: 980px){
.item-slide-arguments{
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
}
.image-de-fond-slide-arguments{
height: 300px;
flex:0 0 auto;
}
.texte-slider-argument {
position: static;
margin-top:calc(-1 * var(--margesCotes));
height:auto;
max-width: 100%;
flex:1 0 auto;
}
.texte-slider-argument h3{
font-size:1.4em;
margin-block:1em;
}
}
/*============================*\
# Bloc ACTUS #==================================================================================================================================
\*============================*/
h4.resume-post-title{
margin:1em 0;
}
.resume-post-title a {
text-decoration:none;
color:var(--couleur-texte);
margin-top:0;
font-size:2.6rem;
font-weight: bold;
}
.visual-resume-post-item img{
border-radius:0px;
}
.search-result-item--resume{
font-size:1.8rem;
body.home &{ display:none; }
}
.grid-auto.actu-liste-grid-auto{
justify-content: flex-start;
/*display:flex;*/
}
.date-post-resume-post-item{
display:inline-block;
padding:5px;
margin-bottom: 0.5em;
color:white;
}
#search-filter-results-1074{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
margin-bottom:4em;
}
#search-filter-results-1074 .resume-reference-item{
width:25%;
margin-bottom:2em;
}
.reference-item-image{
position:relative;
overflow:hidden;
width:100%;
height:360px;
margin-bottom:1em;
}
.reference-item-image img{
position:absolute;
}
.activity-name-zone{
position:absolute;
left:0;
bottom:0;
padding:10px;
width:70%;
background:white;
z-index:5;
}
.famille-intitule {
font-weight: 600;
font-style: italic;
font-size: 16px;
text-align: left;
text-transform: uppercase;
}
.familleVert{
color:var(--couleur-couleur-principale);
}
.familleJaune{
color:var(--couleur-couleur-secondaire);
}
.activite-item-titre-single-resume{
text-decoration: none;
padding: 1em 0;
font-weight: bold;
font-size: clamp(1.8rem, 2vw, 2rem);
text-align: left;
color: var(--couleur-blanc);
background: var(--couleur-couleur-secondaire);
position: absolute;
bottom: 0;
left: 0;
padding: 1em;
width: 70%;
z-index: 5;
}
.searchandfilter ul {
padding-left:0;
}
@media(min-width:601px){
.searchandfilter ul {
display:flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap:2vw;
}
}
.searchandfilter ul li {
flex:1 1 30%;
margin:0;
margin-left:0;
text-indent:0;
}
.searchandfilter ul li::before{
display:none;
}
.searchandfilter select.sf-input-select{
min-width:0;
border: none;
padding-inline:0 calc(var(--form-input-height) * 0.5);
background-position:right center, right top, 0;
border-bottom: 1px solid black;
}
.search-result-item-reference-resume{
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em;
line-height: 1.8em;
}
/*.actus-liste .resume-post-item{
width:25%;
}*/
.container-liste-references{
--cols-larg:270px;
margin-bottom: 4em;
}
.resume-reference-item a {
text-decoration: none;
}
.activite-item-image{
position:relative;
}
.activite-item .activite-item-image::before, .activite-item .activite-item-image::after{
opacity:0
}
.activite-item:hover .activite-item-image::after{
content: "";
display:block;
background-image: url('data:image/svg+xml,');
position: absolute;
height:86px;
width:86px;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index: 4;
opacity:1;
}
.activite-item:hover .activite-item-image::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 94, 159, 0.5);
z-index: 3;
opacity:1
}
.resume-reference-item .reference-item-image::before, .resume-reference-item .reference-item-image::after{
opacity:0;
}
.resume-reference-item:hover .reference-item-image::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
opacity:1;
}
.resume-reference-item:hover .reference-item-image::after{
content: "";
display:block;
background-image: url('data:image/svg+xml,');
position: absolute;
height:86px;
width:86px;
top:33%;
left:50%;
transform: translate(-50%, -50%);
z-index: 4;
opacity:1;
}
.item-slider-home{
/*min-height:580px;*/
min-height:400px;
position:relative;
z-index:0;
align-content:center;
padding:calc(70px + 1em) 6%;
}
.item-slider-home::before{
content:"";
position:absolute;
inset:0;
width:100%;
height:100%;
background:rgba(0,39,67,0.5);
z-index:0;
}
.contrasts .item-slider-home::before{
background:rgba(0,0,0,0.9);
}
.text-slide-slider-home{
/*top:30%;*/
/*position:absolute;
bottom:calc(70px + 1em);
left:6%;*/
position:relative;
/*max-width:57%;*/
z-index:1;
margin-inline:auto;
text-align:center;
}
.h1-slider-home{
font-size: 45px;
line-height: 57px;
text-align: left;
color: #005e9f;
text-transform:uppercase;
z-index: 2;
margin-bottom:1em;
}
.wp-block-button__link.wp-block-button__link_slider_home{
border-color:var(--couleur-blanc);
color:var(--couleur-blanc);
}
.home-slider-indicators{
inset:0 0 0 auto;
flex-direction:column;
justify-content:center;
align-items:center;
}
.home-slider-indicators li{
--swiffy-slider-indicators-dim:1rem;
opacity:1;
transition:0.3s ease-out;
transition-property:background-color, width, height;
&.active{
--swiffy-slider-indicators-dim:3rem;
background-color:var(--couleur-couleur-secondaire);
}
}
@media(pointer:coarse){
.home-slider-indicators li{ --swiffy-slider-indicators-dim:3rem; }
}
.header-traits-container{
display:flex;
position: relative;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top:-70px;
z-index:10;
}
.item-trait-header-home{
width:20%;
margin-inline: 20px;
display: flex;
flex-direction: column;
align-items:center;
}
.intitule-trait{
text-transform: uppercase;
color:var(--couleur-blanc);
font-size:1.8rem;
margin-bottom:0.5em;
text-align: center;
}
.item-trait-header-home .trait{
height:2.9px;
display:block;
width:100%;
}
.trait.vert{ background: var(--couleur-couleur-principale);}
.trait.blanc{ background: var(--couleur-blanc);}
.trait.rouge{ background: #D90014;}
@media (max-width: 980px){
/*.item-slider-home{
height:400px;
}*/
/*.text-slide-slider-home{
top:20%;
left:5%;
max-width:90%;
}*/
.h1-slider-home{
font-size:2.5rem;
}
.header-traits-container{
display:none;
}
}
/*==================================*\
# BLOC CARTE DES IMPLANTATIONS #
\*==================================*/
/* Structure générale */
@media(min-width:981px){
.carte-struct{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--margesDefaut);
}
.carte-struct-col{ flex:1 1 50%; }
.carte-data .carte-struct{ flex-direction:row-reverse; }
}
/* Statistiques illustrées */
.carte-header{ margin-bottom:2em; }
.carte-stats-outer{
display: flex;
align-items:flex-start;
justify-content:flex-start;
gap:var(--margesDefaut);
}
.carte-stats-header{
border-bottom:1px solid var(--couleur-texte);
display:flex;
align-items:flex-end;
justify-content:flex-start;
flex:0 0 auto;
gap:0.1em;
font-size:4rem;
font-weight:bold;
line-height:1.1;
width:max-content;
margin-left:auto;
}
.carte-stats-svg{
overflow:visible;
width:auto;
height:50px;
}
.carte-stats-label{
text-align:right;
font-size:1.4rem;
text-wrap:balance;
max-width:10rem;
margin-left:auto;
line-height:1.2;
margin-top:0.5em;
}
/* Carte */
.carte-map-outer{
--spot-radius:12px;
--spot-shift:-0.33;
position:relative;
&::before{
content:"";
width:100%;
aspect-ratio:1;
background-color:#f7f5f5;
border-radius:50%;
position:absolute;
left:0;
top:0;
transform:translate(-33.33%, -20%);
z-index:-1;
}
}
.carte-map-departements{
fill:var(--couleur-couleur-secondaire);
.contrasts &{ fill:hsl(from var(--couleur-couleur-secondaire) h calc(s - 20) calc(l + 20)); }
}
/* Carte : spots */
.carte-spot-outer{
position:absolute;
width:0;
height:0;
}
.carte-spot-liste{
width:calc(var(--spot-radius) * 2);
height:calc(var(--spot-radius) * 2);
margin:calc(var(--spot-radius) * -1) auto;
transform:translateX(-50%);
position:relative;
z-index:1;
display:flex;
align-items:flex-end;
justify-content:center;
gap:0;
}
.carte-spot-liste:has( .carte-spot:is(:hover,:focus-visible)){ z-index:2; }
.carte-spot-liste:has( .carte-spot:is(:hover,:focus-visible)){ --spot-shift:-0.1; }
.carte-spot{
flex:0 0 auto;
width:calc(var(--spot-radius) * 2);
height:calc(var(--spot-radius) * 2);
margin-inline:calc(var(--spot-radius) * var(--spot-shift));
transition:0.3s ease-out;
transition-property:width, height, margin-inline;
}
.carte-spot:nth-child(1){ z-index: 1; }
.carte-spot:nth-child(3){ z-index:-1; }
.carte-spot:not(.carte-spot-ville):is(:hover,:focus-visible){
z-index:2;
--spot-radius:24px;
}
.carte-spot svg{
display:block;
}
.carte-spot-label{
position:absolute;
width:max-content;
font-size:12px;
}
:is(.carte-spot-label, .carte-spot-icones)[data-pos="top left"]{ right:calc(100% - var(--spot-radius)); bottom:calc(100% + var(--spot-radius)); }
:is(.carte-spot-label, .carte-spot-icones)[data-pos="top center"]{ left:calc(50%);transform:translateX(-50%); bottom:calc(100% + var(--spot-radius)); }
:is(.carte-spot-label, .carte-spot-icones)[data-pos="top right"]{ left:calc(100% - var(--spot-radius)); bottom:calc(100% + var(--spot-radius)); }
:is(.carte-spot-label, .carte-spot-icones)[data-pos="center left"]{ right:calc(100% + var(--spot-radius)); top:calc(50% - 0.5lh); }
:is(.carte-spot-label, .carte-spot-icones)[data-pos="center right"]{ left:calc(100% + var(--spot-radius)); top:calc(50% - 0.5lh); }
:is(.carte-spot-label, .carte-spot-icones)[data-pos="bottom left"]{ right:calc(100% - var(--spot-radius)); top:calc(100% + var(--spot-radius)); }
:is(.carte-spot-label, .carte-spot-icones)[data-pos="bottom center"]{left:calc(50%);transform:translateX(-50%); top:calc(100% + var(--spot-radius)); }
:is(.carte-spot-label, .carte-spot-icones)[data-pos="bottom right"]{ left:calc(100% - var(--spot-radius)); top:calc(100% + var(--spot-radius)); }
.carte-map-ville{
--spot-radius:6px;
color:#819191;
}
.carte-spot-ville{
background-color:currentColor;
border-radius:50%;
}
.contrasts .carte-map-ville{ color:var(--couleur-noir); }
.carte-liste-outer{ padding-left:0; }
.carte-liste-item{
border-bottom:1px solid currentColor;
text-indent:0;
}
.carte-liste-item::before{ content:none; }
.carte-liste-item-lien{
display:flex;
align-items:center;
justify-content:flex-start;
padding:0.2em 0;
text-decoration:none;
color:inherit;
gap:0.3em;
transition:background-color 0.3s ease-out;
&:is(:hover,:focus-visible){
background:rgb(from var(--couleur-texte) r g b / 0.1);
}
}
.carte-liste-item--icone{
display:inline-block;
width:1.333em;
height:1.333em;
& svg{ display:block; }
}
@media(min-width:981px) and (max-width:1260px){
.carte-data .carte-struct .carte-struct-col:nth-child(1){
flex:1 1 66.67%;
}
.carte-data .carte-struct .carte-struct-col:nth-child(2){
flex:1 1 33.33%;
}
}
@media(max-width:980px){
.carte-stats-outer{ margin-top:1em; }
}
@media(max-width:600px){
.carte-map-outer{
--spot-radius:8px;
width:calc(100vw - var(--largScrollBar,0) - 20px);
margin-left:50%;
transform:translateX(-50%);
}
.carte-spot-label{ font-size:8px; }
}
/*============*\
# HEADER #=====================================================================================================================================
\*============*/
@media(max-width:980px){
.main-navigation, .header-alt{ display:none; }
.site-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:1em;
gap:1em;
}
.site-header-logo{
flex:1 1 auto;
max-width:280px;
}
}
@media(min-width:981px){
.site-header{
display:grid;
grid-template-columns:0 280px 1fr 0;
grid-template-areas:"alt alt alt alt"
". logo main .";
}
.header-alt{
padding-inline:var(--margesCotes);
background:rgb(from var(--couleur-texte) r g b / 0.1);
grid-area:alt;
}
.site-header-logo{
grid-area:logo;
align-content:center;
margin-bottom:-40px;
}
.main-navigation{ grid-area:main; }
.rank-math-breadcrumb{
left:340px;
}
}
@media(min-width:1261px){
.site-header{
grid-template-columns:0 360px 1fr 0;
z-index:10;
}
.rank-math-breadcrumb{
left:360px;
}
}
@media(min-width:1500px){
.site-header{
width:var(--largeur);
max-width:100%;
margin-inline:auto;
}
}
.container-breadcrumb{
position:relative;
}
/* LOGO */
.site-title a{ color:#000; }
@media(max-width:980px){
.site-title{ padding-block:0rem; }
}
@media(max-width:980px){
.rank-math-breadcrumb{
left:0px;
}
}
/* MENU PRINCIPAL */
@media(min-width:981px){
.site-header-menu--level-1-ul{
font-size:1.7rem;
height:100%;
padding-left:1.5vw;
}
.site-header-menu--level-1-li{
position:relative;
border-right:1px solid var(--couleur-couleur-principale);
width:min-content;
flex:1 0 auto;
}
.site-header-menu--level-1-li:last-child{
border-right:none;
}
.site-header-menu--level-1-a{
display:block;
height:100%;
align-content:center;
text-decoration:none;
color:var(--couleur-couleur-principale);
text-transform: uppercase;;
font-weight:500;
padding:0 1.5vw;
position:relative;
text-shadow:-0em 0 0 transparent, 0em 0 0 transparent;
transition:text-shadow 0.3s ease-out;
word-wrap:normal;
&:is(:hover,:focus-visible){
text-shadow:-0.024em 0 0 currentColor, 0.024em 0 0 currentColor;
}
}
.site-header-menu--level-1-a::after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:0em;
background:var(--couleur-couleur-secondaire);
transition:height 0.3s ease-out;
}
.site-header-menu--level-1-li:where(.current-menu-ancestor,.current-menu-item) .site-header-menu--level-1-a::after,
.site-header-menu--level-1-a:is(:hover,:focus-visible,[aria-expanded="true"])::after{
height:0.4em;
}
.site-header-menu--level-2-ul{
width:max-content;
min-width:calc(100% - 2em);
max-width:540px;
top:calc(100% - 0em);
border-top:0em solid transparent;
background:rgba(from var(--couleur-blanc) r g b / 0.8);
padding-block:0;
transition:0.3s ease-out;
transition-property:border-top-color, border-top-width, top;
[role="menubar"] :where([aria-expanded="true"] + &){
top:calc(100% - 0.4em);
border-top-color:var(--couleur-couleur-secondaire);
border-top-width:0.4em;
padding-block:0.3em;
}
.contrasts &{ background:rgba(from var(--couleur-blanc) r g b / 0.95); }
}
.site-header-menu--level-2-a{
display:block;
text-decoration:none;
padding:0.6em 1.8em;
color:var(--couleur-texte);
line-height:1.2;
position:relative;
text-shadow:-0em 0 0 transparent, 0em 0 0 transparent;
transition:text-shadow 0.3s ease-out;
&:is(:hover,:focus-visible){
text-shadow:-0.024em 0 0 currentColor, 0.024em 0 0 currentColor;
}
}
.site-header-menu--level-2-a::before{
content:"";
--dim:0.8em;
width:var(--dim);
height:var(--dim);
position:absolute;
left:0em;
top:calc(50% - var(--dim) / 2);
transform:rotate(45deg);
transform-origin:center center;
border-top:3px solid currentColor;
border-right:3px solid currentColor;
opacity:0;
transition:0.3s ease-out;
transition-property:left opacity;
}
.site-header-menu--level-2-a:is(:hover,:focus-visible)::before{
left:0.4em;
opacity:1;
}
}
@media(max-width:1260px){
.site-header-menu--level-1-ul{
font-size:1.4rem;
padding-left:1.2vw;
}
.site-header-menu--level-1-a{
padding-inline:1.2vw;
}
}
/* MENU SECONDAIRE */
@media(min-width:981px){
.site-alt-menu--level-1-ul{
justify-content:flex-end;
font-size:1.4rem;
}
.site-alt-menu--level-1-li{
position:relative;
padding:0 2em;
}
.site-alt-menu--level-1-li:not(:first-child)::before{
content:"";
border-left:2px solid var(--couleur-couleur-secondaire);
position:absolute;
left:-1px;
height:1em;
top:calc(50% - 0.5em);
}
.site-alt-menu--level-1-a{
color:inherit;
text-decoration:none;
padding-block:0.5em;
display:inline-block;
text-shadow:-0em 0 0 transparent, 0em 0 0 transparent;
transition:text-shadow 0.3s ease-out;
&:is(:hover,:focus-visible){
text-shadow:-0.035em 0 0 currentColor, 0.035em 0 0 currentColor;
}
}
.site-alt-menu--level-2-ul{
background:var(--couleur-blanc);
box-shadow:0 3px 7px 0 rgba(0,0,0,0.15);
left:1em;
width:max-content;
min-width:calc(100% - 2em);
max-width:240px;
[role="menubar"] :where([aria-expanded="true"] + &){
padding:0.5em 0;
}
}
.site-alt-menu--level-2-a{
color:inherit;
display:block;
padding:0.2em 1em;
text-decoration:none;
background:rgb(from var(--couleur-couleur-secondaire) r g b / 0);
box-shadow:inset 0 0 0 100vmax rgba(from var(--couleur-blanc) r g b / 1), inset 0px 0 0 -1px var(--couleur-couleur-secondaire);
transition:0.3s ease-out;
transition-property:background-color, box-shadow;
&:is(:hover,:focus-visible){
background:rgb(from var(--couleur-couleur-secondaire) r g b / 0.25);
box-shadow:inset 0 0 0 100vmax rgba(from var(--couleur-blanc) r g b / 0), inset 6px 0 0 -1px var(--couleur-couleur-secondaire);
}
}
}
/* MENU MOBILE */
@media(max-width:980px){
.menu-toggle{
--icon-dim:2.4rem;
margin-left:auto;
}
.site-header .accessibilite{
position:static;
flex:0 0 auto;
}
.site-header .accessibilite-menu{
position:fixed;
top:auto;
bottom:0;
}
.menu_mobile{
position:fixed;
z-index:9;
inset:0;
background:var(--couleur-blanc);
transform:translateX(calc(-100% - 1px));
transition:transform 0.3s ease-out;
width:100%;
height:100%;
display:block;
border:none;
padding:1em calc(var(--icon-dim) * 1.5 + 10px + var(--form-bouton-bordWidth) * 2) 1em 0;
&:popover-open{
transform:translateX(calc(0% - 0px));
}
}
.menu-close{
position:absolute;
inset:5px 5px auto auto;
padding:calc(var(--icon-dim) * 0.25);
}
.menu_mobile [class*="-menu--level-1-ul"]{
margin:0;
padding:0;
}
.menu_mobile a{
display:block;
text-decoration:none;
margin:0;
padding:0.3em 1rem;
line-height:1.1;
}
.menu_mobile [class*="-menu--level-1-a"]{
font-size:1.8rem;
color:var(--couleur-texte);
}
.menu_mobile [class*="-menu--level-2-a"]{
font-size:1.6rem;
}
.menu_mobile [class*="-menu--level-2-ul"]{
padding:0 0 0.5rem 1rem;
}
}
/*===================*\
# IMAGE ÉTENDUE #
\*===================*/
.wp-block-image.is-style-image-etendue img{
width:calc(100% + var(--margesLargeur));
max-width:none;
.wp-block-column:last-child &{ margin-right:calc(var(--margesLargeur) * -1); }
.wp-block-column:first-child &{ margin-left:calc(var(--margesLargeur) * -1); }
}
/*==================*\
# CHIFFRES CLÉ #
\*==================*/
.bloc-chiffres{
--cols-larg:200px;
--cols-gap:30px 50px;
margin-bottom:3em;
}
.bloc-chiffres-image{
position:relative;
border-bottom:1px solid var(--couleur-texte);
height:100px;
margin-bottom:0.5em;
& :is(img, svg){
display:block;
height:100%;
width:auto;
object-position:center bottom;
object-fit:contain;
margin-left:auto;
}
}
.bloc-chiffres-image-cercle{
position:absolute;
z-index:-1;
inset:0;
width:100%;
height:100%;
overflow:hidden;
&::before{
content:"";
position:absolute;
inset:0 0 auto auto;
aspect-ratio:1;
width:130px;
background:rgb(from var(--couleur-couleur-secondaire) r g b / 0.2);
border-radius:50%;
}
}
.bloc-chiffres-label{
text-align:right;
font-size:1.6rem;
line-height:1.2;
& .nombre{
font-size:2em;
font-weight:700;
& b{
font-size:1.5em;
}
}
}
/*========================*\
# VIGNETTE ACTIVITÉS #
\*========================*/
.bloc-slider{
margin:3em auto 6em;
max-width:calc(100vw - var(--largScrollBar,0px) - 8em);
}
.bloc-slider .slider-container-nocrop{
overflow:hidden;
width: calc(100vw - var(--largScrollBar,0px));
margin-left:calc(-50vw + 50% + (var(--largScrollBar,0px) * 0.5));
margin-right:calc(-50vw + 50% + (var(--largScrollBar,0px) * 0.5));
mask-image: linear-gradient(90deg,#000 0%, #fff calc(var(--margesLargeur)), #fff calc(100% - var(--margesLargeur)), #000 100%);
mask-mode:luminance;
}
.bloc-slider .slider-container{
--swiffy-slider-nav-outside-size:0;
padding-inline:var(--margesLargeur);
}
.bloc-slider .slider-nav{
filter:none;
/*filter:drop-shadow(0px 0px 1px var(--couleur-blanc)) drop-shadow(0px 0px 1px var(--couleur-blanc)) drop-shadow(0px 0px 0px var(--couleur-blanc)) drop-shadow(0px 0px 0px var(--couleur-blanc)) drop-shadow(0px 0px 0px var(--couleur-blanc)) drop-shadow(0px 0px 0px var(--couleur-blanc))*/
}
.bloc-slider .slider-nav::before,
.bloc-slider .slider-nav::after{ width:2em;height:2em; }
.bloc-slider .slider-nav::before{
background:var(--couleur-blanc);
border-radius:50%;
z-index:-1;
box-shadow:0 0 0 0.5rem var(--couleur-blanc);
}
@media(pointer:coarse){
.bloc-slider .slider-nav{ opacity:1; }
.bloc-slider .slider-nav::before,
.bloc-slider .slider-nav::after{ width:5rem;height:5rem; }
}
.activite-item{ max-width:300px; }
.activite-item.famille-vert{ color:var(--couleur-couleur-principale); }
.activite-item.famille-jaune{ color:var(--couleur-couleur-secondaire); }
.activite-item-image{
aspect-ratio:1;
border-radius:0%;
width:100%;
overflow:hidden;
background:rgb(from var(--couleur-couleur-secondaire) r g b / 0.2);
& img{
width:100%;
height:100%;
display:block;
}
}
.activite-item-titre{
display: block;
background: var(--couleur-couleur-principale);
padding-top: 1em;
color: white;
text-decoration: none;
font-size: clamp(1.8rem, 2vw, 2.3rem);
font-weight: 600;
padding: 1em;
text-transform: uppercase;
padding-left: 2em;
position: relative;
}
.activite-item-titre:before{
content:"";
position:absolute;
background:white;
display:block;
width:1px;
height:100%;
left:1em;
top:0;
}
/*===========================*\
# FORMULAIRE DE CONTACT #
\*===========================*/
.footer-form{
background: var(--couleur-couleur-principale);
/* padding: 4rem; */
color: white;
--marge: calc((100vw - var(--largScrollBar, 0px) - var(--largeur)) / 2);
/* --form-input-fondColor: hsl(from var(--couleur-couleur-secondaire) h calc(s + 10) calc(l + 20) / 1); */
--form-input-bordWidth: 0;
/* margin-block: 3em 6em; */
margin-bottom: 0;
overflow-x: hidden;
position: relative;
height: auto;
}
/*@media(max-width:980px){
.footer-form{ padding:2rem; }
}*/
/*.footer-form::before{
content:"";
position:absolute;
inset:50% calc(var(--margesLargeur) * -1) -6em;
background:rgb(from #e1e6e9 r g b / 0.4);
z-index:-1;
}*/
body:not(.contrasts) .footer-form .h3{ color:var(--couleur-blanc); }
.hidden-fields-container{ display:none; }
.footer-form :is( [type="email"], [type="number"], [type="tel"], [type="text"], textarea, select, [type="checkbox"]){
border-radius:0px;
border-bottom:2px solid white;
}
.footer-form :is( [type="checkbox"], [type="radio"]){
background-color:var(--form-input-fondColor);
border-bottom:2px solid white;
&::before{ background-color:currentColor; }
}
.footer-form .form-optionnel{ color:rgb(from var(--couleur-noir) r g b / 0.8); }
.contrasts .footer-form{
background:var(--couleur-blanc);
--form-input-fondColor:var(--couleur-blanc);
}
.contrasts .footer-form :is( [type="email"], [type="number"], [type="tel"], [type="text"], textarea, select, [type="checkbox"], [type="radio"]){
border:1px solid currentColor;
}
.footer-form a{
color:inherit;
}
.footer-form .wpcf7-submit{
--form-bouton-textColor:var(--couleur-blanc);
--form-bouton-bordColor:var(--couleur-blanc);
}
.footer-form ::file-selector-button{
border:1px solid var(--couleur-blanc);
color:var(--couleur-blanc);
}
/*============================*\
# OFFRE EMPLOI #
\*============================*/
.bloc-emploi {
margin-bottom:4em;
}
.item-offre-emploi{
padding-bottom:2em;
border-bottom:1px solid black;
}
.flex-container-champ-offre-emploi{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 1em;
}
.zone-emploi-case{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1em;
}
.intitule-champ-offre-emploi{
font-weight: normal;
font-size: 18px;
/*line-height: 51px;*/
padding-block:0.5em;
text-align: left;
}
.reponse-champ-offre-emploi{
font-weight:bold;
}
@media (max-width:980px){
.flex-container-champ-offre-emploi{
flex-direction: column;
align-items: flex-start;
}
}