/*
Theme Name: EVMT Theme
Description: Description
Version: 1.0.0
Author: SPKTR
Text Domain: evmt
Domain Path: /languages
*/
/* FONTS */
/* Bricolage Grotesque — variable font (axes opsz 12-96, wght 200-800), self-host,
sous-ensemble latin, wdth figé à 100. Fichier : 68 Ko. Police UNIQUE du site :
aucune autre règle ne doit redéclarer font-family (utiliser inherit). */
@font-face {
font-family: "Bricolage Grotesque";
src: url("fonts/BricolageGrotesque/BricolageGrotesque-latin-var.woff2") format("woff2");
/* Axe wght borné à la charte (200 ExtraLight → 500 Medium) alors que le fichier
monte à 800 : une graisse demandée hors de cette plage — un `font-weight:700`
d'extension, de contenu collé ou d'une feuille tierce — est ramenée à 500 au
lieu de sortir une instance qui n'existe pas dans la charte. */
font-weight: 200 500;
font-stretch: 100%;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fallback à métriques ajustées — supprime le CLS du swap. Valeurs mesurées sur
l'instance CORPS (opsz=18, wght=400), pas sur l'instance display par défaut. */
@font-face {
font-family: "Bricolage Fallback";
src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
size-adjust: 99.61%;
ascent-override: 93%;
descent-override: 27%;
line-gap-override: 0%;
}
/* Variables de charte EVMT — nommage PAR RÔLE (une teinte peut changer, pas un rôle).
Palette styleguide : accent fushia #FF004F, prune #68002E, turquoise #3EFFDA. */
:root {
color-scheme: light;
/* Neutres */
--color-white: #FFFFFF; /* fond principal ; texte sur fond sombre */
--color-black: #000000; /* texte courant, sections sombres, base du dégradé */
/* Surfaces */
--color-surface: #EFEAEA; /* fond alterné clair (ex-bg-color-sauge/beige) */
--color-muted: #D1CCCC; /* bordures, filets, séparateurs, états désactivés */
/* Accents */
--color-accent: #FF004F; /* ACCENT PRIMAIRE (fushia) : CTA, liens actifs, puces, soulignés */
--color-accent-2: #3EFFDA; /* accent secondaire (turquoise) : hover, pictos, tags */
--color-accent-deep: #68002E; /* prune : fond sombre chaud (bloc Ambition mobile) */
--color-highlight: #FFDE77; /* jaune : réserve éditoriale (aucun composant décrit à ce jour) */
/* Dérivées translucides — header "verre dépoli" (opacité 0.74 reprise du fork) */
--color-surface-transparent: rgba(239, 234, 234, 0.74);
--color-white-transparent: rgba(255, 255, 255, 0.74);
--color-black-transparent: rgba(0, 0, 0, 0.50);
/* Dégradé 1 — styleguide : linear #000000, stops 100%->0%, opacités .50/.60.
Lecture littérale (voile noir, 180deg). Angle à confirmer avec la DA. */
--gradient-1: linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.50) 100%);
/* Ombres (repassées en noir : #020F47 était un bleu d'un projet tiers) */
--shadow-1: 0px 0px 20.1px 0px rgba(0,0,0,0.12);
--shadow-2: 10px 14px 29.4px 0px rgba(0,0,0,0.51);
--shadow-3: 9.19px 16.7px 35.66px 0px rgba(0,0,0,0.43);
/* Tokens de grille (source de vérité en px, cf. .centered-grid / .grid-12) */
--grid-reference: 1440px;
--grid-margin: 32px; /* marge externe, chaque côté */
--grid-gutter: 16px; /* gouttière */
--grid-columns: 12;
--grid-content: 1376px; /* 1440 - 2x32 */
--grid-column: 100px; /* (1376 - 11x16) / 12 */
/* Marge latérale effective de .centered-grid (= min(100% - 64px, 90%)) :
nécessaire aux bandeaux pleine largeur qui doivent aligner leur contenu
sur la grille sans être contraints par elle (cf. .evmt-stats). */
--page-gutter: max(1.7778rem, 5vw);
}
/* .centered-grid retombe sur calc(100% - 2rem) sous 900px : la marge suit. */
@media screen and (max-width: 900px) {
:root { --page-gutter: max(1rem, 5vw); }
}
/* Samsung Browser forced dark mode override — on garde le MÉCANISME (header.php pose
data-samsung), on remplace les valeurs lenain par la palette EVMT. Ce bloc réécrit
les hex EN DUR : le resynchroniser à chaque changement de teinte dans :root. */
[data-samsung] body,
[data-samsung] main,
[data-samsung] section,
[data-samsung] header,
[data-samsung] footer,
[data-samsung] div,
[data-samsung] h1,
[data-samsung] h2,
[data-samsung] h3,
[data-samsung] p,
[data-samsung] span,
[data-samsung] a { color: unset !important; background-color: unset !important; }
[data-samsung] html,
[data-samsung] body { background-color: #FFFFFF !important; color: #000000 !important; }
[data-samsung] .bg-color-white { background-color: #FFFFFF !important; }
[data-samsung] .bg-color-black { background-color: #000000 !important; }
[data-samsung] .bg-color-surface { background-color: #EFEAEA !important; }
[data-samsung] .bg-color-muted { background-color: #D1CCCC !important; }
[data-samsung] .bg-color-accent { background-color: #FF004F !important; }
[data-samsung] .bg-color-accent-2 { background-color: #3EFFDA !important; }
[data-samsung] .bg-color-accent-deep { background-color: #68002E !important; }
[data-samsung] .bg-color-highlight { background-color: #FFDE77 !important; }
[data-samsung] .color-white { color: #FFFFFF !important; }
[data-samsung] .color-black { color: #000000 !important; }
[data-samsung] .color-surface { color: #EFEAEA !important; }
[data-samsung] .color-muted { color: #D1CCCC !important; }
[data-samsung] .color-accent { color: #FF004F !important; }
[data-samsung] .color-accent-2 { color: #3EFFDA !important; }
[data-samsung] .color-accent-deep { color: #68002E !important; }
[data-samsung] .color-highlight { color: #FFDE77 !important; }
/* backdrop-filter bugue sur position:fixed + les couleurs semi-transparentes
deviennent invisibles après transformation dark mode — on substitue par un fond opaque */
[data-samsung] .bg-color-surface-transparent { background-color: #EFEAEABD !important; }
[data-samsung] .bg-color-white-transparent { background-color: #FFFFFFBD !important; }
[data-samsung] .back-blur-1,
[data-samsung] .back-blur-2,
[data-samsung] .back-blur-3,
[data-samsung] .back-blur-4,
[data-samsung] .back-blur-5,
[data-samsung] .backdrop-blur { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* RESET (déjà dans Bootstrap) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-size: 100%; font-style: inherit; font-weight:inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; position:relative;}
sup { vertical-align:super; font-size:75%; font-weight:inherit;}
span, div { font-weight:inherit;}
ul, li { color:inherit; font-weight:inherit;}
*, *:before, *:after { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit;}
body { display:block; background-color: white; height:100%; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
/* scroll-padding-top : hauteur du header fixe une fois scrollé (~68px), sinon l'ancre
du pied de page (« Équipe », « Expertises ») arrive sous la barre de navigation. */
html { scroll-behavior: smooth; scroll-padding-top: 5em; }
/* font-synthesis-weight:none — complément du bornage de l'axe wght (cf. @font-face) :
sans lui, une graisse ≥ 600 non fournie par la fonte serait « épaissie » de force par
le navigateur, ce qui réintroduirait un faux gras hors charte. */
html, body { font-size:18px; font-family:"Bricolage Grotesque", "Bricolage Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight:200; font-optical-sizing:auto; font-synthesis-weight:none; color:var(--color-black); width:100%; min-height:100%;}
/* Responsive */
@media screen and (max-width: 1700px) {
html, body { font-size:18px;}
@media screen and (max-width: 1600px) {
html, body { font-size:18px;}
@media screen and (max-width: 1500px) {
html, body { font-size:18px;}
@media screen and (max-width: 1400px) {
html, body { font-size:18px;}
}
/* MDPI */
@media screen and (max-height: 700px) and (min-width: 1000px) {
html, body { font-size:16px;}
}
/* Mobile */
@media screen and (max-width: 900px) {
html, body { font-size:16px;}
@media screen and (max-width: 320px) {
html, body { font-size:16px;}
}
}
}
}
}
/* High res */
@media screen and (min-width: 2000px) {
html, body { font-size:18px;}
@media screen and (min-width: 2500px) {
html, body { font-size:22px;}
@media screen and (min-width: 3000px) {
html, body { font-size:25px;}
@media screen and (min-width: 3500px) {
html, body { font-size:30px;}
}
}
}
}
article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block;}
ol, ul { list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { font-weight:200; text-align: left;}
/* Charte EVMT : deux graisses seulement (200 / 500). Tout ce qui est sémantiquement gras
passe donc en 500, y compris le HTML d'un WYSIWYG non encadré par .rich-content. */
b, strong { font-weight:500;}
blockquote:before, blockquote:after, q:before, q:after { content: "";}
blockquote, q { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none;}
a { font-size:inherit; font-weight:inherit; text-decoration:inherit; color:inherit; -webkit-tap-highlight-color:rgba(249,224,209,0.5);}
a:hover, a:active { outline: 0; color: inherit; }
a img { border: 0;}
select { cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; background-image:none;}
select option { font-style:inherit; font-size:inherit;}
select:focus { background-image:none;}
input, select, button, textarea { -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; background-image:none; font-family:inherit; font-size:inherit; font-style:inherit; font-weight:200; padding:0; color:inherit;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { appearance:none; -webkit-appearance: none; margin:0;}
input[type=number] { appearance: textfield; -webkit-appearance: textfield; -moz-appearance: textfield; }
datalist { display:block;}
img { vertical-align:bottom; border:0; outline:0;}
.clear { display:block; clear:both !important;}
.clear-900 { display:none; clear:both !important;}
.clear-after:after { content:""; display:block; clear:both;}
.no-select { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
.triggered-1 .ontrigger-1-events, .ontrigger-1-events.triggered-1,
.triggered-2 .ontrigger-2-events, .ontrigger-2-events.triggered-2,
.triggered-3 .ontrigger-3-events, .ontrigger-3-events.triggered-3,
.triggered-4 .ontrigger-4-events, .ontrigger-4-events.triggered-4,
.events { pointer-events:auto;}
.triggered-1 .ontrigger-1-no-events, .ontrigger-1-no-events.triggered-1,
.triggered-2 .ontrigger-2-no-events, .ontrigger-2-no-events.triggered-2,
.triggered-3 .ontrigger-3-no-events, .ontrigger-3-no-events.triggered-3,
.triggered-4 .ontrigger-4-no-events, .ontrigger-4-no-events.triggered-4,
.pending-no-events.pending,
.active > .active-direct-parent-no-events,
.no-events { pointer-events:none;}
.no-outline { outline:none;}
.no-highlight {-webkit-tap-highlight-color: rgba(0,0,0,0);}
.active.active-events,
.active > .active-direct-parent-events,
.active + .active-prev-events,
.persistant .persistant-events,
.persistant-events.persistant { pointer-events:initial;}
.no-cursor,
.triggered-1 .ontrigger-1-no-cursor, .ontrigger-1-no-cursor.triggered-1,
.no-cursor a { cursor:none;}
.cursor-pointer { cursor:pointer;}
.active-cursor-inherit.active { cursor:inherit;}
.cursor-grabbing-force,
.cursor-grabbing-force * { cursor:e-resize !important;}
.triggered-2 .ontrigger-2-cursor-default, .ontrigger-2-cursor-default.triggered-2,
.cursor-default { cursor:unset;}
.cursor-disabled { cursor:not-allowed;}
.uppercase { text-transform:uppercase;}
.lowercase { text-transform:lowercase;}
@media screen and (max-width: 900px) {
.no-events-mobile { pointer-events:none;}
.active .active-parent-events-mobile,
.active + .active-prev-events-mobile,
.events-mobile { pointer-events:initial;}
}
/* COMMUN */
/* Profondeur */
.z-index-0 { z-index:0;}
.z-index-1 { z-index:1;}
.z-index-2,
.active-z-index-2.active { z-index:2;}
.z-index-3 { z-index:3;}
.z-index-4 { z-index:4;}
.z-index-5 { z-index:5;}
.z-index-6 { z-index:6;}
.z-index-7 { z-index:7;}
.z-index-8 { z-index:8;}
.z-index-9 { z-index:9;}
.z-content-bg { z-index:10;}
.z-content-mg { z-index:11;}
.z-content-fg { z-index:12;}
.z-content-fg-1 { z-index:13;}
.z-content-fg-2 { z-index:14;}
.hover-z-content-ffg:hover,
.z-content-ffg { z-index:15;}
.z-content-fffg { z-index:100;}
.z-content-ffffg { z-index:101;}
@media screen and (max-width: 900px) {
.z-index-1-mobile { z-index:1;}
.z-index-2-mobile { z-index:2;}
.z-index-3-mobile { z-index:3;}
}
/* Centrage */
.bg-cover { object-fit:cover; background-size:cover; background-repeat:no-repeat; background-position:center; object-position:center;}
.bg-cover-height { background-size: auto 93%;}
.bg-contain { object-fit:contain; background-size:contain; background-repeat:no-repeat; background-position:center; object-position:center;}
.middle-holder { display:table; height:100%; width:100%;}
.middle-holder .middle { vertical-align:middle; width:100%; display:table-cell;}
.center-holder,
.hover-center-holder:hover { text-align:center;}
.left-holder { text-align:left;}
.right-holder { text-align:right;}
.justify-center { justify-content:center;}
.fit-contain { object-fit:contain; object-position:center center;}
.fit-cover { object-fit:cover; object-position:center center;}
.fit-fill { object-fit:fill; object-position:center center;}
.object-position-bottom { object-position:bottom;}
.bg-pos-top { background-position:top center;}
@media screen and (max-width: 1200px) {
.center-holder-thin { text-align:center;}
@media screen and (max-width: 900px) {
.no-bg-mobile { background:none !important;}
.center-holder-mobile { text-align:center;}
.right-holder-mobile { text-align:right;}
.left-holder-mobile { text-align:left;}
.bg-cover-height-mobile {background-size: auto 103% }
.bg-contain-mobile { background-size:contain;}
.fit-contain-mobile { object-fit:contain;}
.fit-unset-mobile { object-fit:unset;}
}
}
@media screen and (min-width: 1600px) {
.fit-unset-xl { object-fit:unset !important;}
}
/* Blocs de centrages */
.centered { margin:0 auto;}
.centered-intro { display:block; width:calc(100% - 6em); width:-webkit-calc(100% - 6em); max-width:72.5em; box-sizing:border-box; margin:0 auto; height:100%;}
.centered-std { display:block; width:calc(100% - 6em); width:-webkit-calc(100% - 6em); max-width:66em; box-sizing:border-box; margin:0 auto; height:100%;}
.centered-contact { display:block; width:calc(100% - 6em); width:-webkit-calc(100% - 6em); max-width:42em; box-sizing:border-box; margin:0 auto; height:100%;}
.centered-mid { display:block; width:calc(100% - 6em); width:-webkit-calc(100% - 6em); max-width:88em; box-sizing:border-box; margin:0 auto; height:100%;}
.centered-wide { display:block; width:calc(100% - 6em); width:-webkit-calc(100% - 6em); max-width:96em; box-sizing:border-box; margin:0 auto; height:100%;}
.centered-medium { display:block; width:calc(100% - 6em); width:-webkit-calc(100% - 6em); max-width:80em; box-sizing:border-box; margin:0 auto; height:100%;}
.centered-halfmedium { display:block; width:calc(100% - 6em); width:-webkit-calc(100% - 6em); max-width:75em; box-sizing:border-box; margin:0 auto; height:100%;}
.centered-small { display:block; width:calc(100% - 6em); width:-webkit-calc(100% - 6em); max-width:70em; box-sizing:border-box; margin:0 auto; height:100%;}
/* Conteneur de grille EVMT — 1376px de contenu, 32px de marge externe (styleguide).
rem (et non em) pour la géométrie : 0.8889rem = 16px partout, sans dépendre de la
font-size héritée. Pas de cap min() : la grille suit le scale SPKTR au-delà de 2000px.
NB : volontairement absent des overrides 1800/2400px (max-width 80em/140em) plus bas. */
.centered-grid { display:block; width:calc(100% - 3.5556rem); max-width:90%; box-sizing:border-box; margin:0 auto; height:100%;}
@media screen and (max-width: 900px) { .centered-grid { width:calc(100% - 2rem); } } /* base 16px : 16px/côté — à valider sur maquette mobile */
@media screen and (max-width: 1500px) {
@media screen and (max-width: 1200px) {
@media screen and (max-width: 900px) {
.centered-mobile { margin:0 auto !important;}
.centered-wide { width:calc(100% - 4em); width:-webkit-calc(100% - 4em);}
.centered-large-mobile { width:calc(100% - 6em); width:-webkit-calc(100% - 6em); box-sizing:border-box; margin:0 auto; height:100%;}
.centered-wide-mobile { width:calc(100% - 6em); width:-webkit-calc(100% - 6em); box-sizing:border-box; margin:0 auto; height:100%;}
.centered-small-mobile { width:calc(100% - 8em); width:-webkit-calc(100% - 8em); box-sizing:border-box; margin:0 auto; height:100%;}
.centered-halfmedium { width:calc(100% - 4em); width:-webkit-calc(100% - 4em); box-sizing:border-box; margin:0 auto; height:100%;}
.centered-none-mobile { margin: 0 !important; width: calc(100% - 0em) !important; width: -webkit-calc(100% - 0em) !important; max-width: 100% !important; box-sizing: border-box !important;}
.full-bleed-mobile { margin-left: -3em !important; margin-right: -3em !important; width: calc(100% + 6em) !important; max-width: calc(100% + 6em) !important; box-sizing: border-box !important;}
}
}
}
@media screen and (min-width: 1800px) {
.centered,
.centered-std,
.centered-intro,
.centered-mid,
.centered-wide,
.centered-medium,
.centered-halfmedium,
.centered-small,
.centered-carousel {
max-width: 80em;
}
/* Footer top padding only on very large (2xl) screens for the entreprise page */
footer.page-lentreprise {
padding-top: 15em;
}
}
@media screen and (min-width: 2400px) {
.centered,
.centered-std,
.centered-intro,
.centered-mid,
.centered-wide,
.centered-medium,
.centered-halfmedium,
.centered-small,
.centered-carousel {
max-width: 140em;
}
}
/* Spacers */
.spacer-4 { width:100%; height:4em;}
.spacer-6 { width:100%; height:6em;}
.spacer-8 { width:100%; height:8em;}
.spacer-10 { width:100%; height:10em;}
.spacer-14 { width:100%; height:14em;}
.spacer-20 { width:100%; height:20em;}
.spacer-30vh { width:100%; height:30vh;}
.spacer-header { width:100%; height:12.75em;}
/* Marges */
.top-margin-auto { margin-top:auto;}
.top-margin--1px { margin-top:-1px;}
.top-margin-1px { margin-top:1px;}
.top-margin-2px { margin-top:2px;}
.top-margin--3px { margin-top:-3px;}
.top-margin--4px { margin-top:-4px;}
.top-margin--0-0625 { margin-top:-0.0625em;}
.top-margin-0 { margin-top:0;}
.top-margin-0-1 { margin-top:0.1em;}
.top-margin--0-1 { margin-top:-0.1em;}
.top-margin--0-15 { margin-top:-0.15em;}
.top-margin--0-175 { margin-top:-0.175em;}
.top-margin--0-1875 { margin-top:-0.1875em;}
.top-margin-0-25 { margin-top:0.25em;}
.top-margin-0-375 { margin-top:0.375em;}
.top-margin--0-375 { margin-top:-0.375em;}
.top-margin-0-4 { margin-top:0.4em;}
.top-margin-0-5 { margin-top:0.5em;}
.top-margin--0-5 { margin-top:-0.5em;}
.top-margin--0-625 { margin-top:-0.625em;}
.top-margin--0-65 { margin-top:-0.65em;}
.top-margin-0-75 { margin-top:0.75em;}
.top-margin-0-85 { margin-top:0.85em;}
.top-margin-1 { margin-top:1em;}
.top-margin-1-25 { margin-top:1.25em;}
.top-margin--1-25 { margin-top:-1.25em;}
.top-margin--1-35 { margin-top:-1.35em;}
.top-margin--1-6 { margin-top:-1.6em;}
.top-margin--1-75 { margin-top:-1.75em;}
.top-margin--1-6875 { margin-top:-1.6875em;}
.top-margin--1-85 { margin-top:-1.85em;}
.top-margin-0-0625 { margin-top:0.0625em;}
.active.active-top-margin--0-65 { margin-top:-0.65em;}
.top-margin--0-25 { margin-top:-0.25em;}
.top-margin--0-3 { margin-top:-0.3em;}
.top-margin--0-375 { margin-top:-0.375em;}
.top-margin--0-40625 { margin-top:-0.40625em;}
.top-margin--0-5 { margin-top:-0.5em;}
.top-margin--0-5625 { margin-top:-0.5625em;}
.top-margin--0-75 { margin-top:-0.75em;}
.top-margin--0-875 { margin-top:-0.875em;}
.top-margin--1 { margin-top:-1em;}
.top-margin--1-25 { margin-top:-1.25em;}
.top-margin-1-25 { margin-top:1.25em;}
.top-margin-1-5 { margin-top:1.5em;}
.top-margin--1-5 { margin-top:-1.5em;}
.top-margin--1-875 { margin-top:-1.875em;}
.top-margin--2 { margin-top:-2em;}
.top-margin-2,
.current .current-top-margin-2 { margin-top:2em;}
.top-margin-2-25 { margin-top:2.25em;}
.top-margin-2-5 { margin-top:2.5em;}
.top-margin-2-75 { margin-top:2.75em;}
.top-margin--2-25 { margin-top:-2.25em;}
.top-margin--2-5 { margin-top:-2.5em;}
.top-margin--2-75 { margin-top:-2.75em;}
.top-margin--3 { margin-top:-3em;}
.top-margin-3 { margin-top:3em;}
.top-margin-3-15 { margin-top:3.15em;}
.top-margin--3-25 { margin-top:-3.25em;}
.top-margin-3-5 { margin-top:3.5em;}
.top-margin--3-5 { margin-top:-3.5em;}
.top-margin--3-625 { margin-top:-3.625em;}
.top-margin--4-6875 { margin-top:-4.6875em;}
.top-margin-3-75 { margin-top:3.75em;}
.top-margin--3-75 { margin-top:-3.75em;}
.top-margin-4 { margin-top:4em;}
.active .active-direct-parent-top-margin--4,
.top-margin--4 { margin-top:-4em;}
.top-margin--4-5 { margin-top:-4.5em;}
.top-margin--5 { margin-top:-5em;}
.top-margin-5 { margin-top:5em;}
.top-margin--5-5 { margin-top:-5.5em;}
.top-margin--6 { margin-top:-6em;}
.top-margin--6-25 { margin-top:-6.25em;}
.top-margin--6-5 { margin-top:-6.5em;}
.top-margin-6 { margin-top:6em;}
.top-margin-6-5 { margin-top:6.5em;}
.top-margin-7 { margin-top:7em;}
.top-margin--7 { margin-top:-7em;}
.top-margin--7-5 { margin-top:-7.5em;}
.top-margin-8 { margin-top:8em;}
.top-margin--8 { margin-top:-8em;}
.top-margin-8-5 { margin-top:8.5em;}
.top-margin--8-5 { margin-top:-8.5em;}
.top-margin-8-75 { margin-top:8.75em;}
.top-margin--9 { margin-top:-9em;}
.top-margin-10 { margin-top:10em;}
.top-margin--10 { margin-top:-10em;}
.top-margin--10-5 { margin-top:-10.5em;}
.top-margin-11 { margin-top:11em;}
.top-margin-12 { margin-top:12em;}
.top-margin--12 { margin-top:-12em;}
.top-margin--12-5 { margin-top:-12.5em;}
.top-margin-13 { margin-top:13em;}
.top-margin--13 { margin-top:-13em;}
.top-margin-14 { margin-top:14em;}
.top-margin--14 { margin-top:-14em;}
.top-margin-15 { margin-top:15em;}
.top-margin--15 { margin-top:-15em;}
.top-margin--16 { margin-top:-16em;}
.top-margin-16 { margin-top:16em;}
.top-margin-17 { margin-top:17em;}
.top-margin-18 { margin-top:18em;}
.top-margin--18 { margin-top:-18em;}
.top-margin--20 { margin-top:-20em;}
.top-margin-20 { margin-top:20em;}
.top-margin-21 { margin-top:21em;}
.top-margin--21 { margin-top:-21em;}
.top-margin-22 { margin-top:22em;}
.top-margin--22 { margin-top:-22em;}
.top-margin-24 { margin-top:24em;}
.top-margin--24 { margin-top:-24em;}
.top-margin-25 { margin-top:25em;}
.top-margin--25 { margin-top:-25em;}
.top-margin-26 { margin-top:26em;}
.top-margin--26 { margin-top:-26em;}
.top-margin-28 { margin-top:28em;}
.top-margin-30 { margin-top:30em;}
.top-margin--30 { margin-top:-30em;}
.top-margin-32 { margin-top:32em;}
.top-margin--32 { margin-top:-32em;}
.top-margin-45 { margin-top:45em;}
.top-margin-70 { margin-top:70em;}
.top-margin-3p { margin-top:3%;}
.top-margin-5p { margin-top:5%;}
.top-margin-10p { margin-top:10%;}
.top-margin-25p { margin-top:25%;}
.top-margin-40p { margin-top:40%;}
.top-margin-50p { margin-top:50%;}
.top-margin--5p { margin-top:-5%;}
.top-margin--6p { margin-top:-6%;}
.top-margin--8p { margin-top:-8%;}
.top-margin--10p { margin-top:-10%;}
.top-margin--15p { margin-top:-15%;}
.active.active-top-margin--17-5p { margin-top:-17.5%;}
.top-margin--20p { margin-top:-20%;}
.top-margin--25p { margin-top:-25%;}
.top-margin--50p { margin-top:-50%;}
.top-margin--50vw { margin-top:-50vw;}
.top-margin--25vh { margin-top:-25vh;}
.top-margin--35vh { margin-top:-35vh;}
.top-margin-50vh { margin-top:50vh;}
.top-margin--50vh { margin-top:-50vh;}
.top-margin--75vh { margin-top:-75vh;}
.top-margin-100vh { margin-top:100vh;}
.top-margin--100vh { margin-top:-100vh;}
.top-margin--150vh { margin-top:-150vh;}
.top-margin--half-inf { margin-top:-5000vh;}
.bot-margin-auto { margin-bottom:auto;}
.bot-margin--2px { margin-bottom:-2px;}
.bot-margin--0-25 { margin-bottom:-0.25em;}
.bot-margin--0-375 { margin-bottom:-0.375em;}
.bot-margin-0 { margin-bottom:0;}
.bot-margin-0-5 { margin-bottom:0.5em;}
.bot-margin--0-5 { margin-bottom:-0.5em;}
.bot-margin-0-75 { margin-bottom:0.75em;}
.bot-margin-0-85 { margin-bottom:0.85em;}
.bot-margin-1 { margin-bottom:1em;}
.bot-margin--1 { margin-bottom:-1em;}
.bot-margin-1-25 { margin-bottom:1.25em;}
.bot-margin-1-5 { margin-bottom:1.5em;}
.bot-margin--1-5 { margin-bottom:-1.5em;}
.bot-margin-2 { margin-bottom:2em;}
.bot-margin--2 { margin-bottom:-2em;}
.bot-margin-2-5 { margin-bottom:2.5em;}
.bot-margin--2-5 { margin-bottom:-2.5em;}
.bot-margin-3 { margin-bottom:3em;}
.bot-margin--3 { margin-bottom:-3em;}
.bot-margin-3-25 { margin-bottom:3.25em;}
.bot-margin-3-5 { margin-bottom:3.5em;}
.bot-margin-4 { margin-bottom:4em;}
.bot-margin--4 { margin-bottom:-4em;}
.bot-margin-4-5 { margin-bottom:4.5em;}
.bot-margin-5 { margin-bottom:5em;}
.bot-margin--5 { margin-bottom:-5em;}
.bot-margin-5-5 { margin-bottom:5.5em;}
.bot-margin--5-5 { margin-bottom:-5.5em;}
.bot-margin--6 { margin-bottom:-6em;}
.bot-margin-6 { margin-bottom:6em;}
.bot-margin--7 { margin-bottom:-7em;}
.bot-margin-8 { margin-bottom:8em;}
.bot-margin--8 { margin-bottom:-8em;}
.bot-margin--9 { margin-bottom:-9em;}
.bot-margin-10 { margin-bottom:10em;}
.bot-margin--10 { margin-bottom:-10em;}
.bot-margin--11 { margin-bottom:-11em;}
.bot-margin-12 { margin-bottom:12em;}
.bot-margin--13 { margin-bottom:-13em;}
.bot-margin--14 { margin-bottom:-14em;}
.bot-margin-20 { margin-bottom:20em;}
.bot-margin--22 { margin-bottom:-22em;}
.bot-margin-10p { margin-bottom:10%;}
.bot-margin-25p { margin-bottom:25%;}
.bot-margin-50p { margin-bottom:50%;}
.bot-margin--5p { margin-bottom:-5%;}
.bot-margin--15p { margin-bottom:-15%;}
.bot-margin--25p { margin-bottom:-25%;}
.bot-margin--30p { margin-bottom:-30%;}
.bot-margin--32p { margin-bottom:-32%;}
.bot-margin--50p { margin-bottom:-50%;}
.left-margin-auto { margin-left:auto;}
.left-margin-0 { margin-left:0;}
.left-margin-1px { margin-left:1px;}
.left-margin-2px { margin-left:2px;}
.left-margin--1px { margin-left:-1px;}
.left-margin--2px { margin-left:-2px;}
.left-margin--4px { margin-left:-4px;}
.left-margin-0-0625 { margin-left:0.0625em;}
.left-margin--0-125 { margin-left:-0.125em;}
.left-margin--0-1875 { margin-left:-0.1875em;}
.left-margin-0-25 { margin-left:0.25em;}
.left-margin--0-25 { margin-left:-0.25em;}
.left-margin--0-375 { margin-left:-0.375em;}
.left-margin--0-40625 { margin-left:-0.40625em;}
.left-margin--0-5 { margin-left:-0.5em;}
.left-margin--0-5625 { margin-left:-0.5625em;}
.active.active-left-margin--0-65 { margin-left:-0.65em;}
.left-margin-0-75 { margin-left:0.75em;}
.left-margin--0-75 { margin-left:-0.75em;}
.left-margin--1 { margin-left:-1em;}
.left-margin-1 { margin-left:1em;}
.left-margin-1-25 { margin-left:1.25em;}
.left-margin-1-5 { margin-left:1.5em;}
.left-margin--1-25 { margin-left:-1.25em;}
.left-margin--1-5 { margin-left:-1.5em;}
.left-margin--1-75 { margin-left:-1.75em;}
.left-margin--1-875 { margin-left:-1.875em;}
.left-margin-2 { margin-left:2em;}
.left-margin--2 { margin-left:-2em;}
.left-margin-2-5 { margin-left:2.5em;}
.left-margin--2-5 { margin-left:-2.5em;}
.left-margin-3 { margin-left:3em;}
.left-margin--3 { margin-left:-3em;}
.left-margin-3-5 { margin-left:3.5em;}
.left-margin--3-5 { margin-left:-3.5em;}
.left-margin--3-625 { margin-left:-3.625em;}
.left-margin-3-75 { margin-left:3.75em;}
.active .active-direct-parent-left-margin--4,
.left-margin--4 { margin-left:-4em;}
.left-margin-4 { margin-left:4em;}
.left-margin--4-5 { margin-left:-4.5em;}
.left-margin-5 { margin-left:5em;}
.left-margin--5 { margin-left:-5em;}
.left-margin-6 { margin-left:6em;}
.left-margin--6 { margin-left:-6em;}
.left-margin--6-25 { margin-left:-6.25em;}
.left-margin-7 { margin-left:7em;}
.left-margin--7 { margin-left:-7em;}
.left-margin--7-5 { margin-left:-7.5em;}
.left-margin--7-85 { margin-left:-7.85em;}
.left-margin--8 { margin-left:-8em;}
.left-margin-8 { margin-left:8em;}
.left-margin--9 { margin-left:-9em;}
.left-margin-9-25 { margin-left:9.25em;}
.left-margin-9-5 { margin-left:9.5em;}
.left-margin-10 { margin-left:10em;}
.left-margin--10 { margin-left:-10em;}
.left-margin-12 { margin-left:12em;}
.left-margin--12 { margin-left:-12em;}
.left-margin--13 { margin-left:-13em;}
.left-margin-14 { margin-left:14em;}
.left-margin--14 { margin-left:-14em;}
.left-margin-14-5 { margin-left:14.5em;}
.left-margin-15 { margin-left:15em;}
.left-margin-16 { margin-left:16em;}
.left-margin--16 { margin-left:-16em;}
.left-margin--20 { margin-left:-20em;}
.left-margin-20 { margin-left:20em;}
.left-margin-30 { margin-left:30em;}
.left-margin-36 { margin-left:36em;}
.left-margin-38 { margin-left:38em;}
.left-margin-50 { margin-left:50em;}
.left-margin-52 { margin-left:52em;}
.left-margin-5p { margin-left:5%;}
.left-margin-8p { margin-left:8%;}
.left-margin-9p { margin-left:9%;}
.left-margin-10p { margin-left:10%;}
.left-margin-11-5p { margin-left:11.5%;}
.left-margin-22p { margin-left:22%;}
.left-margin--2p { margin-left:-2%;}
.left-margin--4p { margin-left:-4%;}
.left-margin--5p { margin-left:-5%;}
.left-margin--8p { margin-left:-8%;}
.left-margin--10p { margin-left:-10%;}
.left-margin-15p { margin-left:15%;}
.active.active-left-margin--17-5p { margin-left:-17.5%;}
.left-margin-18p { margin-left:18%;}
.left-margin--20p { margin-left:-20%;}
.left-margin--22p { margin-left:-22%;}
.left-margin--25p { margin-left:-25%;}
.left-margin-20p { margin-left:20%;}
.left-margin-25p { margin-left:25%;}
.left-margin-30p { margin-left:30%;}
.left-margin-35p { margin-left:35%;}
.left-margin--37-5vw { margin-left:-37.5vw;}
.left-margin--40vw { margin-left:-40vw;}
.left-margin--50p { margin-left:-50%;}
.left-margin--50pscreen,
.left-margin--50vw,
*:hover > .hover-direct-parent-left-margin--50vw { margin-left:-50vw;}
.left-margin--58 { margin-left:-58vw;}
.left-margin--80 { margin-left:-80em;}
.left-margin--calc80 { margin-left:calc(-100% + 20em);}
.left-margin--85 { margin-left:-85vw;};
.left-margin--70pscreen { margin-left:-70vw;}
.left-margin--screen { margin-left:-100vw;}
.left-margin--half-inf { margin-left:-5000vw;}
.right-margin-auto { margin-right:auto;}
.right-margin--2px { margin-right:-2px;}
.right-margin-0-5 { margin-right:0.5em;}
.right-margin--0-5 { margin-right:-0.5em;}
.right-margin-0-65 { margin-right:0.65em;}
.right-margin-0-75 { margin-right:0.75em;}
.right-margin-1 { margin-right:1em;}
.right-margin--1 { margin-right:-1em;}
.right-margin--1-25 { margin-right:-1.25em;}
.right-margin--1-5 { margin-right:-1.5em;}
.right-margin-1-25 { margin-right:1.25em;}
.right-margin-1-5 { margin-right:1.5em;}
.right-margin-1-75 { margin-right:1.75em;}
.right-margin--2 { margin-right:-2em;}
.right-margin-2 { margin-right:2em;}
.right-margin-2-5 { margin-right:2.5em;}
.right-margin--2-5 { margin-right:-2.5em;}
.right-margin--3 { margin-right:-3em;}
.right-margin-3 { margin-right:3em;}
.right-margin-3-5 { margin-right:3.5em;}
.right-margin--3-5 { margin-right:-3.5em;}
.right-margin--4 { margin-right:-4em;}
.right-margin-4 { margin-right:4em;}
.right-margin-5 { margin-right:5em;}
.right-margin--5 { margin-right:-5em;}
.right-margin--6 { margin-right:-6em;}
.right-margin-6 { margin-right:6em;}
.right-margin--7 { margin-right:-7em;}
.right-margin--8 { margin-right:-8em;}
.right-margin-8 { margin-right:8em;}
.right-margin--9 { margin-right:-9em;}
.right-margin-9-5 { margin-right:9.5em;}
.right-margin-10 { margin-right:10em;}
.right-margin--10 { margin-right:-10em;}
.right-margin--11 { margin-right:-11em;}
.right-margin--12 { margin-right:-12em;}
.right-margin-12 { margin-right:12em;}
.right-margin--16 { margin-right:-16em;}
.right-margin-16 { margin-right:16em;}
.right-margin-18 { margin-right:18em;}
.right-margin--20 { margin-right:-20em;}
.right-margin--40 { margin-right:-40em;}
.right-margin-52 { margin-right:52em;}
.right-margin-8p { margin-right:8%;}
.right-margin-9p { margin-right:9%;}
.right-margin--10p { margin-right:-10%;}
.right-margin-14p { margin-right:14%;}
.right-margin-15p { margin-right:15%;}
.right-margin--25p { margin-right:-25%;}
.right-margin-25p { margin-right:25%;}
.right-margin-35p { margin-right:35%;}
.right-margin--50p { margin-right:-50%;}
.right-margin-half-slice-screen { margin-right:-webkit-calc(((100vw - (13 * 1.25em)) / 14) / 2); margin-right:calc(((100vw - (13 * 1.25em)) / 14) / 2);}
.right-margin-14th-screen { margin-right:-webkit-calc(100vw / 14); margin-right:calc(100vw / 14);}
.margin-0-5 { margin:0.5em;}
.margin-0-75 { margin:0.75em;}
@media screen and (max-width: 1600px) {
.right-margin-6-large { margin-right:6em;}
@media screen and (max-width: 1200px) {
.left-margin--20p-thin { margin-left:-20%;}
.left-margin-0-thin { margin-left:0;}
.left-margin-1-thin { margin-left:1em;}
.left-margin-1-5-thin { margin-left:1.5em;}
.left-margin-2-thin { margin-left:2em;}
.left-margin-3-thin { margin-left:3em;}
.left-margin-3-5-thin { margin-left:3.5em;}
.right-margin-0-thin { margin-right:0;}
.right-margin--20-thin { margin-right:-20em;}
.right-margin-4-thin { margin-right:4em;}
.top-margin-0-thin { margin-top:0;}
.top-margin-2-thin { margin-top:2em;}
.top-margin-4-thin { margin-top:4em;}
.top-margin-20p-thin { margin-top:20%;}
.top-margin-25p-thin { margin-top:25%;}
.top-margin-30p-thin { margin-top:30%;}
.top-margin-40p-thin { margin-top:40%;}
@media screen and (max-width: 768px) {
.top-margin--0-375-mobile { margin-top:-0.375em;}
.top-margin--2-5-mobile { margin-top:-2.5em;}
.top-margin--3-mobile { margin-top:-3em;}
.top-margin--4-mobile { margin-top:-4em;}
.top-margin--5-mobile { margin-top:-5em;}
.top-margin--5-25-mobile { margin-top:-5.25em;}
.top-margin--6-mobile { margin-top:-6em;}
.top-margin--8-mobile { margin-top:-8em;}
.top-margin--10-mobile { margin-top:-10em;}
.top-margin--12-mobile { margin-top:-12em;}
.top-margin--13-mobile { margin-top:-13em;}
.top-margin--14-mobile { margin-top:-14em;}
.top-margin--15-mobile { margin-top:-15em;}
.top-margin--18-mobile { margin-top:-18em;}
.top-margin--20-mobile { margin-top:-20em;}
.top-margin--24-mobile { margin-top:-24em;}
.top-margin--40-mobile { margin-top:-40em;}
.top-margin-0-mobile { margin-top:0;}
.top-margin-0-25-mobile { margin-top:0.25em;}
.top-margin-0-5-mobile { margin-top:0.5em;}
.top-margin-1-mobile { margin-top:1em;}
.top-margin-1-5-mobile { margin-top:1.5em;}
.top-margin-2-mobile { margin-top:2em;}
.top-margin-2-5-mobile { margin-top:2.5em;}
.top-margin-3-mobile { margin-top:3em;}
.top-margin-4-mobile { margin-top:4em;}
.top-margin-4-5-mobile { margin-top:4.5em;}
.top-margin-5-mobile { margin-top:5em;}
.top-margin-5p-mobile { margin-top:5%;}
.top-margin-6-mobile { margin-top:6em;}
.top-margin-7-mobile { margin-top:7em;}
.top-margin-8-mobile { margin-top:8em;}
.top-margin-9-mobile { margin-top:9em;}
.top-margin-10-mobile { margin-top:10em;}
.top-margin-10p-mobile { margin-top:10p;}
.top-margin-12-mobile { margin-top:12em;}
.top-margin-14-mobile { margin-top:14em;}
.top-margin-15-mobile { margin-top:15em;}
.top-margin-16-mobile { margin-top:16em;}
.top-margin-20-mobile { margin-top:20em;}
.top-margin-20p-mobile { margin-top:20p;}
.top-margin-22-mobile { margin-top:22em;}
.top-margin-28-mobile { margin-top:28em;}
.top-margin-30-mobile { margin-top:30em;}
.top-margin-40p-mobile { margin-top:40%;}
.top-margin-41-mobile { margin-top:41em;}
.top-margin-45-mobile { margin-top:45em;}
.top-margin-56-mobile { margin-top:56em;}
.top-margin-58-mobile { margin-top:58em;}
.top-margin-60-mobile { margin-top:60em;}
.top-margin--15p-mobile { margin-top:-15%;}
.bot-margin--1-mobile { margin-bottom:-1em;}
.bot-margin-1-mobile { margin-bottom:1em;}
.bot-margin-2-mobile { margin-bottom:2em;}
.bot-margin-0-mobile { margin-bottom:0;}
.bot-margin-0-5-mobile { margin-bottom:0.5em;}
.bot-margin-4-mobile { margin-bottom:4em;}
.bot-margin--5-mobile { margin-bottom:-5em;}
.bot-margin--6-mobile { margin-bottom:-6em;}
.bot-margin-8-mobile { margin-bottom:8em;}
.bot-margin--8-mobile { margin-bottom:-8em;}
.bot-margin-14-mobile { margin-bottom:14em;}
.bot-margin--15-mobile { margin-bottom:-15em;}
.bot-margin-18-mobile { margin-bottom:18em;}
.bot-margin-34-mobile { margin-bottom:34em;}
.right-margin-auto-mobile { margin-right:auto;}
.right-margin-0-mobile { margin-right:0;}
.right-margin-1-5-mobile { margin-right:1.5em;}
.right-margin-2-mobile { margin-right:2em;}
.right-margin-2-25-mobile { margin-right:2.25em;}
.right-margin-2-5-mobile { margin-right:2.5em;}
.right-margin-3-mobile { margin-right:3em;}
.right-margin-4-mobile { margin-right:4em;}
.right-margin-5-mobile { margin-right:5em;}
.right-margin-6-mobile { margin-right:6em;}
.right-margin--20-mobile { margin-right:-20em;}
.right-margin--26-mobile { margin-right:-26em;}
.right-margin-38-mobile { margin-right:38em;}
.left-margin-auto-mobile { margin-left:auto;}
.left-margin-0-mobile { margin-left:0;}
.left-margin-1-mobile { margin-left:1em;}
.left-margin-1-35-mobile { margin-left:1.35em;}
.left-margin-1-5-mobile { margin-left:1.5em;}
.left-margin-2-mobile { margin-left:2em;}
.left-margin-3-mobile { margin-left:3em;}
.left-margin-4-mobile { margin-left:4em;}
.left-margin-5-mobile { margin-left:5em;}
.left-margin-6-mobile { margin-left:6em;}
.left-margin-8-mobile { margin-left:8em;}
.left-margin-15p-mobile { margin-left:15%;}
.left-margin-16-mobile { margin-left:16em;}
.left-margin-20-mobile { margin-left:20em;}
.left-margin-26-mobile { margin-left:26em;}
.left-margin-30-mobile { margin-left:30em;}
.left-margin-38-mobile { margin-left:38em;}
.left-margin--1-mobile { margin-left:-1em;}
.left-margin--2-mobile { margin-left:-2em;}
.left-margin--3-mobile { margin-left:-3em;}
.left-margin--2-5-mobile { margin-left:-2.5em;}
.left-margin--4-mobile { margin-left:-4em;}
.left-margin--5-mobile { margin-left:-5em;}
.left-margin--7-mobile { margin-left:-7em;}
.left-margin--8-mobile { margin-left:-8em;}
.left-margin--16-mobile { margin-left:-16em;}
.left-margin--64-mobile{ margin-left:-64%;}
.left-margin--70-mobile{ margin-left:-70%;}
.left-margin--90-mobile { margin-left:-90em;}
.left-margin--15-mobile { margin-left:-15em;}
.left-margin--15p-mobile { margin-left:-15%;}
.left-margin--50vw-mobile { margin-left:-50vw;}
@media screen and (max-width: 420px) {
.top-margin-20-xs { margin-top:20em;}
}
}
}
}
/* Padding */
.padding-0-35 { padding:0.35em;}
.padding-0-5 { padding:0.5em;}
.padding-0-75 { padding:0.75em;}
.padding-1 { padding:1em;}
.padding-1-5 { padding:1.5em;}
.padding-2 { padding:2em;}
.padding-2-5 { padding:2.5em;}
.padding-3 { padding:3em;}
.padding-3-5 { padding:3.5em;}
.padding-4,
.hover-padding-4:hover { padding:4em;}
.padding-5 { padding:5em;}
.padding-6 { padding:6em;}
.right-pad-0-125 { padding-right:0.125em;}
.right-pad-0-25 { padding-right:0.25em;}
.right-pad-0-375 { padding-right:0.375em;}
.right-pad-0-5 { padding-right:0.5em;}
.left-pad-0-125 { padding-left:0.125em;}
.left-pad-0-25 { padding-left:0.25em;}
.left-pad-0-375 { padding-left:0.375em;}
.left-pad-0-5 { padding-left:0.5em;}
.left-pad-0-75 { padding-left:0.75em;}
.left-pad-1 { padding-left:1em;}
.left-pad-1-25 { padding-left:1.25em;}
.left-pad-1-5 { padding-left:1.5em;}
.right-pad-0-75 { padding-right:0.75em;}
.right-pad-1 { padding-right:1em;}
.right-pad-1-25 { padding-right:1.25em;}
.right-pad-1-5 { padding-right:1.5em;}
.left-pad-1-75 { padding-left:1.75em;}
.left-pad-2 { padding-left:2em;}
.right-pad-2 { padding-right:2em;}
.left-pad-2-25 { padding-left:2.25em;}
.right-pad-2-25 { padding-right:2.25em;}
.right-pad-2-5 { padding-right:2.5em;}
.left-pad-2-5 { padding-left:2.5em;}
.hover-left-pad-3:hover,
.left-pad-3 { padding-left:3em;}
.left-pad-3-25 { padding-left:3.25em;}
.left-pad-3-5 { padding-left:3.5em;}
.left-pad-3-75 { padding-left:3.75em;}
.hover-right-pad-3:hover,
.right-pad-3 { padding-right:3em;}
.right-pad-3-25 { padding-right:3.25em;}
.right-pad-3-5 { padding-right:3.5em;}
.hover-left-pad-4:hover,
.left-pad-4 { padding-left:4em;}
.hover-right-pad-4:hover,
.right-pad-4 { padding-right:4em;}
.left-pad-5 { padding-left:5em;}
.right-pad-5 { padding-right:5em;}
.left-pad-6 { padding-left:6em;}
.right-pad-6 { padding-right:6em;}
.left-pad-7 { padding-left:7em;}
.left-pad-8 { padding-left:8em;}
.right-pad-8 { padding-right:8em;}
.left-pad-9 { padding-left:9em;}
.right-pad-9 { padding-right:9em;}
.left-pad-10 { padding-left:10em;}
.left-pad-10p { padding-left:10%;}
.right-pad-10 { padding-right:10em;}
.left-pad-12 { padding-left:12em;}
.right-pad-12 { padding-right:12em;}
.left-pad-13 { padding-left:13em;}
.left-pad-14 { padding-left:14em;}
.right-pad-14 { padding-right:14em;}
.left-pad-15 { padding-left:15em;}
.right-pad-15 { padding-right:15em;}
.right-pad-16 { padding-right:16em;}
.left-pad-16 { padding-left:16em;}
.left-pad-18 { padding-left:18em;}
.right-pad-18 { padding-right:18em;}
.left-pad-20 { padding-left:20em;}
.left-pad-22 { padding-left:22em;}
.right-pad-20 { padding-right:20em;}
.right-pad-21 { padding-right:21em;}
.right-pad-24 { padding-right:24em;}
.left-pad-40 { padding-left:40em;}
.right-pad-40 { padding-right:40em;}
.bot-pad-0 { padding-bottom:0;}
.bot-pad-1px { padding-bottom:1px;}
.bot-pad-0-125 { padding-bottom:0.125em;}
.bot-pad-0-25 { padding-bottom:0.25em;}
.bot-pad-0-375 { padding-bottom:0.375em;}
.bot-pad-0-5 { padding-bottom:0.5em;}
.bot-pad-0-65 { padding-bottom:0.65em;}
.bot-pad-0-75 { padding-bottom:0.75em;}
.bot-pad-0-85 { padding-bottom:0.85em;}
.empty-top-pad-0:empty { padding-top:0;}
.top-pad-0-125 { padding-top:0.125em;}
.top-pad-0-25 { padding-top:0.25em;}
.top-pad-0-375 { padding-top:0.375em;}
.top-pad-0-5 { padding-top:0.5em;}
.top-pad-0-75 { padding-top:0.75em;}
.top-pad-1 { padding-top:1em;}
.top-pad-1-25 { padding-top:1.25em;}
.top-pad-1-5 { padding-top:1.5em;}
.top-pad-1-75 { padding-top:1.75em;}
.bot-pad-1 { padding-bottom:1em;}
.bot-pad-1-25 { padding-bottom:1.25em;}
.bot-pad-1-5 { padding-bottom:1.5em;}
.bot-pad-1-75 { padding-bottom:1.75em;}
.top-pad-2 { padding-top:2em;}
.persistant .persistant-bot-pad-2,
.bot-pad-2 { padding-bottom:2em;}
.bot-pad-2-25 { padding-bottom:2.25em;}
.bot-pad-2-5 { padding-bottom:2.5em;}
.top-pad-2-5 { padding-top:2.5em;}
.persistant .persistant-top-pad-3,
.top-pad-3 { padding-top:3em;}
.bot-pad-3 { padding-bottom:3em;}
.top-pad-3-5 { padding-top:3.5em;}
.bot-pad-3-5 { padding-bottom:3.5em;}
.top-pad-3-75 { padding-top:3.75em;}
.top-pad-4 { padding-top:4em;}
.bot-pad-4 { padding-bottom:4em;}
.top-pad-4-5 { padding-top:4.5em;}
.bot-pad-4-5 { padding-bottom:4.5em;}
.top-pad-5 { padding-top:5em;}
.bot-pad-5 { padding-bottom:5em;}
.top-pad-6 { padding-top:6em;}
.bot-pad-6 { padding-bottom:6em;}
.top-pad-7 { padding-top:7em;}
.bot-pad-7 { padding-bottom:7em;}
.top-pad-8 { padding-top:8em;}
.bot-pad-8 { padding-bottom:8em;}
.top-pad-9 { padding-top:9em;}
.bot-pad-9 { padding-bottom:9em;}
.top-pad-10 { padding-top:10em;}
.bot-pad-10 { padding-bottom:10em;}
.top-pad-11 { padding-top:11em;}
.top-pad-12 { padding-top:12em;}
.bot-pad-12 { padding-bottom:12em;}
.top-pad-13 { padding-top:13em;}
.top-pad-14 { padding-top:14em;}
.bot-pad-14 { padding-bottom:14em;}
.bot-pad-15 { padding-bottom:15em;}
.top-pad-15 { padding-top:15em;}
.top-pad-16 { padding-top:16em;}
.bot-pad-16 { padding-bottom:16em;}
.top-pad-18 { padding-top:18em;}
.bot-pad-18 { padding-bottom:18em;}
.top-pad-20 { padding-top:20em;}
.bot-pad-20 { padding-bottom:20em;}
.top-pad-22 { padding-top:22em;}
.bot-pad-22 { padding-bottom:22em;}
.bot-pad-24 { padding-bottom:24em;}
.top-pad-25 { padding-top:25em;}
.top-pad-26 { padding-top:26em;}
.bot-pad-26 { padding-bottom:26em;}
.top-pad-28 { padding-top:28em;}
.top-pad-30 { padding-top:30em;}
.top-pad-32 { padding-top:32em;}
.top-pad-36 { padding-top:36em;}
.bot-pad-32 { padding-bottom:32em;}
.bot-pad-38 { padding-bottom:38em;}
.bot-pad-40 { padding-bottom:40em;}
.top-pad-42 { padding-top:42em;}
.bot-pad-42 { padding-bottom:42em;}
.top-pad-48 { padding-top:48em;}
.top-pad-10vh { padding-top:10vh;}
.top-pad-15vh { padding-top:15vh;}
.top-pad-20vh { padding-top:20vh;}
.top-pad-30vh { padding-top:30vh;}
.top-pad-50vh, .top-pad-half-screen { padding-top:50vh;}
.top-pad-100vh, .top-pad-screen { padding-top:100vh;}
.top-pad-header { padding-top:12em;}
.bot-pad-footer { padding-bottom:12em;}
.top-pad-header-slim { padding-top:11em;}
.bot-pad-footer-slim { padding-bottom:9.5em;}
.v-pad-10 { padding-top:10em; padding-bottom:10em;}
@media screen and (max-width: 1600px) {
.right-pad-4-large { padding-right:4em;}
.right-pad-6-large { padding-right:6em;}
.right-pad-10-large { padding-right:10em;}
.left-pad-4-large { padding-left:4em;}
.left-pad-6-large { padding-left:6em;}
@media screen and (max-width: 1200px) {
.padding-5-thin { padding:5em;}
.bot-pad-0-thin { padding-bottom:0;}
.bot-pad-1-thin { padding-bottom:1em;}
.bot-pad-2-thin { padding-bottom:2em;}
.bot-pad-3-thin { padding-bottom:3em;}
.bot-pad-4-thin { padding-bottom:4em;}
.bot-pad-5-thin { padding-bottom:5em;}
.top-pad-0-thin { padding-top:0;}
.top-pad-0-25-thin { padding-top:0.25em;}
.top-pad-1-thin { padding-top:1em;}
.top-pad-2-thin { padding-top:2em;}
.top-pad-3-thin { padding-top:3em;}
.top-pad-4-thin { padding-top:4em;}
.top-pad-5-thin { padding-top:5em;}
.top-pad-10-thin { padding-top:10em;}
.top-pad-15-thin { padding-top:15em;}
.top-pad-50-thin { padding-top:50em;}
.left-pad-0-thin { padding-left:0;}
.left-pad-1-thin { padding-left:1em;}
.left-pad-2-thin { padding-left:2em;}
.left-pad-3-thin { padding-left:3em;}
.left-pad-4-thin { padding-left:4em;}
.left-pad-5p-thin { padding-left:5%;}
.left-pad-6-thin { padding-left:6em;}
.left-pad-7-thin { padding-left:7em;}
.left-pad-8-thin { padding-left:8em;}
.left-pad-10-thin { padding-left:10em;}
.right-pad-2-thin { padding-right:2em;}
.right-pad-4-thin { padding-right:4em;}
.right-pad-6-thin { padding-right:6em;}
.right-pad-8-thin { padding-right:8em;}
.right-pad-12-thin { padding-right:12em;}
@media screen and (max-width: 768px) {
.padding-0-mobile { padding:0;}
.padding-0-5-mobile { padding:0.5em;}
.padding-1-mobile { padding:1em;}
.padding-1-5-mobile { padding:1.5em;}
.padding-2-mobile { padding:2em;}
.padding-3-mobile { padding:3em;}
.padding-5-mobile { padding:5em;}
.top-pad-0-mobile { padding-top:0;}
.top-pad-0-25-mobile { padding-top:0.25em;}
.top-pad-0-5-mobile { padding-top:0.5em;}
.top-pad-1-mobile { padding-top:1em;}
.top-pad-2-mobile { padding-top:2em;}
.top-pad-3-mobile { padding-top:3em;}
.top-pad-4-mobile { padding-top:4em;}
.top-pad-5-mobile { padding-top:5em;}
.top-pad-6-mobile { padding-top:6em;}
.top-pad-8-mobile { padding-top:8em;}
.top-pad-10-mobile { padding-top:10em;}
.top-pad-11-mobile { padding-top:11em;}
.top-pad-12-mobile { padding-top:12em;}
.top-pad-14-mobile { padding-top:14em;}
.top-pad-16-mobile { padding-top:16em;}
.top-pad-18-mobile { padding-top:18em;}
.top-pad-20-mobile { padding-top:20em;}
.top-pad-22-mobile { padding-top:22em;}
.top-pad-24-mobile { padding-top:24em;}
.top-pad-25-mobile { padding-top:25em;}
.top-pad-26-mobile { padding-top:26em;}
.top-pad-28-mobile { padding-top:28em;}
.top-pad-30-mobile { padding-top:30em;}
.top-pad-40-mobile { padding-top:40em;}
.top-pad-45-mobile { padding-top:45em;}
.top-pad-10vh-mobile { padding-top:10vh;}
.top-pad-15vh-mobile { padding-top:15vh;}
.top-pad-18vh-mobile { padding-top:18vh;}
.top-pad-20vh-mobile { padding-top:20vh;}
.top-pad-28vh-mobile { padding-top:28vh;}
.top-pad-30vh-mobile { padding-top:30vh;}
.top-pad-35vh-mobile { padding-top:35vh;}
.top-pad-40vh-mobile { padding-top:40vh;}
.top-pad-45vh-mobile { padding-top:45vh;}
.top-pad-50vh-mobile { padding-top:50vh;}
.bot-pad-0-mobile { padding-bottom:0;}
.bot-pad-0-5-mobile { padding-bottom:0.5;}
.bot-pad-1-mobile { padding-bottom:1em;}
.bot-pad-2-mobile { padding-bottom:2em;}
.bot-pad-2-5-mobile { padding-bottom:2.5em;}
.bot-pad-3-mobile { padding-bottom:3em;}
.bot-pad-4-mobile { padding-bottom:4em;}
.bot-pad-5-mobile { padding-bottom:5em;}
.bot-pad-6-mobile { padding-bottom:6em;}
.bot-pad-7-mobile { padding-bottom:7em;}
.bot-pad-8-mobile { padding-bottom:8em;}
.bot-pad-10-mobile { padding-bottom:10em;}
.bot-pad-12-mobile { padding-bottom:12em;}
.bot-pad-14-mobile { padding-bottom:14em;}
.bot-pad-16-mobile { padding-bottom:16em;}
.bot-pad-18-mobile { padding-bottom:18em;}
.bot-pad-20-mobile { padding-bottom:20em;}
.bot-pad-24-mobile { padding-bottom:24em;}
.bot-pad-26-mobile { padding-bottom:26em;}
.bot-pad-28-mobile { padding-bottom:28em;}
.bot-pad-30-mobile { padding-bottom:30em;}
.bot-pad-32-mobile { padding-bottom:32em;}
.right-pad-0-mobile { padding-right:0;}
.right-pad-0-5-mobile { padding-right:0.5em;}
.right-pad-0-75-mobile { padding-right:0.75em;}
.right-pad-1-mobile { padding-right:1em;}
.right-pad-2-mobile { padding-right:2em;}
.right-pad-2-5-mobile { padding-right:2.5em;}
.right-pad-3-mobile { padding-right:3em;}
.right-pad-4-mobile { padding-right:4em;}
.right-pad-6-mobile { padding-right:6em;}
.right-pad-8-mobile { padding-right:8em;}
.right-pad-30-mobile { padding-right:30em;}
.left-pad-0-mobile { padding-left:0;}
.left-pad-0-5-mobile { padding-left:0.5em;}
.left-pad-0-75-mobile { padding-left:0.75em;}
.left-pad-1-mobile { padding-left:1em;}
.left-pad-2-mobile { padding-left:2em;}
.left-pad-2-5-mobile { padding-left:2.5em;}
.left-pad-3-mobile { padding-left:3em;}
.left-pad-4-mobile { padding-left:4em;}
.left-pad-5-mobile { padding-left:5em;}
.left-pad-5p-mobile { padding-left:5%;}
.left-pad-6-mobile { padding-left:6em;}
.left-pad-8-mobile { padding-left:8em;}
@media screen and (max-width: 380px) {
.top-pad-1-small-mobile { padding-top:1em;}
.top-pad-40-xs { padding-top:40em;}
}
}
}
}
/* Translations simples */
.translate-x-0 { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);}
.translate-x-3em { -webkit-transform: translateX(3em); -moz-transform: translateX(3em); -ms-transform: translateX(3em); -o-transform: translateX(3em); transform: translateX(3em);}
.translate-x-10em { -webkit-transform: translateX(10em); -moz-transform: translateX(10em); -ms-transform: translateX(10em); -o-transform: translateX(10em); transform: translateX(10em);}
.translate-xy--50p { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.current .current-translate-x--2em { -webkit-transform: translateX(-2em); -moz-transform: translateX(-2em); -ms-transform: translateX(-2em); -o-transform: translateX(-2em); transform: translateX(-2em);}
.translate-x-50p { -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%);}
.translate-x--50p { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.translate-x--100p { -webkit-transform: translateX(-101%); -moz-transform: translateX(-101%); -ms-transform: translateX(-101%); -o-transform: translateX(-101%); transform: translateX(-101%);}
.translate-y--50p { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.translate-y--52p { -webkit-transform: translateY(-52%); -moz-transform: translateY(-52%); -ms-transform: translateY(-52%); -o-transform: translateY(-52%); transform: translateY(-52%);}
.translate-y-50p { -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%);}
.translate-y-100p { -webkit-transform: translateY(101%); -moz-transform: translateY(101%); -ms-transform: translateY(101%); -o-transform: translateY(101%); transform: translateY(101%);}
.spe-parent.active .active-spe-parent-translate-x-glasses-btn { -webkit-transform: translateX(6em); -moz-transform: translateX(6em); -ms-transform: translateX(6em); -o-transform: translateX(6em); transform: translateX(6em);}
.current .current-translate-y-0 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
.active-parent.active .parent-active-translate-x-0,
.active-translate-y-0.active { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
.active-translate-x-0.active { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);}
.persistant .persistant-translate-x-0 { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);}
.hover-parent:hover .parent-hover-translate-y-0 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
.active-translate-x-100p.active,
.translate-x-100p { -webkit-transform: translateX(101%); -moz-transform: translateX(101%); -ms-transform: translateX(101%); -o-transform: translateX(101%); transform: translateX(101%);}
@media screen and (max-width: 900px) {
.translate-x-0-mobile { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);}
.translate-y-0-mobile { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
.translate-x--50p-mobile { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}
.translate-y--50p-mobile { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.translate-y-16em-mobile { -webkit-transform: translateY(16em); -moz-transform: translateY(16em); -ms-transform: translateY(16em); -o-transform: translateY(16em); transform: translateY(16em);}
}
/* Forme auto */
img.square { width:100%; outline:0; vertical-align:middle;}
img.square-height { height:100%; outline:0; vertical-align:middle;}
img.square-fit { object-fit:cover; object-position:center center; height:100%; width:100%; outline:0; vertical-align:middle;}
img.fit { object-fit:cover;}
img.contain { object-fit:contain;}
img.scale-down { object-fit:scale-down;}
.svg-container svg { position:absolute; top:0; left:0; height:100%; width:100%; object-fit:contain;}
.svg-fit-height,
.img-fit-height { display:inline-block;}
.svg-centered { text-align:center;}
.svg-centered svg { display:inline-block;}
.svg-fit-height svg,
.img-fit-height img { height:100%;}
.img-fit-height img { max-width:100%; object-fit:contain; object-position:center center;}
.svg-fit-width svg,
.img-fit-width img { width:100%;}
.img-max-width-100 img { max-width:100%;}
.img-valign-top img,
.svg-valign-top svg { vertical-align:top;}
.svg-valign-bot svg { vertical-align:bottom;}
.svg-valign-middle svg { vertical-align:middle;}
.svg-max-width-100 svg { max-width:100%;}
.svg-fit-top svg { margin-top:-1px;}
.valign-middle { vertical-align:middle;}
.valign-top { vertical-align:top;}
.valign-bottom { vertical-align:bottom;}
/* Carousels (Slick) */
.slick-list { height:100%;}
.slick-list .slick-track { height:100%;}
.flex-slides .slick-track { display:flex; flex-direction:row; flex-wrap:nowrap; align-items: stretch;}
.flex-slides .slick-slide { height:auto;}
.slick-dotted .slick-dots { text-align:center; padding-top:3em;}
.slick-dotted .slick-dots li { display:inline-block; width:0.75em; height:0.75em;}
.slick-dotted .slick-dots li:only-child { display:none;}
.slick-dotted .slick-dots li + li { margin-left:2em;}
.slick-dotted .slick-dots li button { display:block; width:100%; height:100%; border:1px solid #58A2F6; border-radius:50%; background-color:rgba(0,0,0,0); appearance:none; overflow:hidden; color:rgba(0,0,0,0); transition:border-color 0.25s, background-color 0.25s, transform 0.25s; cursor:pointer;}
.slick-dotted .slick-dots li.slick-active button { background-color:#58A2F6; transform:scale(1.5);}
/* Flottants / Normal */
.block { display:block;}
.inline-block { display:inline-block;}
.float { float:left;}
.float.right { float:right;}
@media screen and (max-width: 1200px) {
.block-thin,
.inline-block.block-thin,
.flexbox.block-thin,
.grid.block-thin { display:block;}
.float.float-none-thin,
.float.right.float-none-thin { float:none;}
@media screen and (max-width: 900px) {
.float-mobile { float:left;}
.float-mobile.right { float:right;}
.float.float-none-mobile,
.float.right.float-none-mobile { float:none;}
.block-mobile,
.inline-block.block-mobile,
.flexbox.block-mobile,
.grid.block-mobile { display:block;}
.inline-block-mobile { display:inline-block;}
.unblock-mobile { display:inherit;}
}
}
/* Positions */
.rel,
.active-rel.active { position:relative;}
.fixed { position:fixed; top:0; left:0;}
.static { position:static;}
.sticky { position:-webkit-sticky; position:sticky; top:0; left:0; align-self:flex-start;}
.abs { position:absolute; top:0; left:0;}
.abs.top--1px { top:-1px; bottom:auto;}
.abs.top--0-25 { top:-0.25em; bottom:auto;}
.abs.top--5em { top:-5em; bottom:auto;}
.abs.top--12em { top:-12em; bottom:auto;}
.abs.top--13em { top:-13em; bottom:auto;}
.abs.top--1 { top:-1%; bottom:auto;}
.abs.top--5 { top:-5%; bottom:auto;}
.abs.top--10 { top:-10%; bottom:auto;}
.abs.top--13 { top:-13%; bottom:auto;}
.abs.top--15 { top:-15%; bottom:auto;}
.abs.top--16 { top:-16%; bottom:auto;}
.abs.top--20 { top:-20%; bottom:auto;}
.abs.top--25 { top:-25%; bottom:auto;}
.abs.top--28 { top:-28%; bottom:auto;}
.abs.top--30 { top:-30%; bottom:auto;}
.abs.top--40 { top:-40%; bottom:auto;}
.abs.top--50 { top:-50%; bottom:auto;}
.abs.top--75 { top:-75%; bottom:auto;}
.abs.expand-y-0-5em { top:-0.5em; bottom:-0.5em;}
.abs.expand-y-1em { top:-1em; bottom:-1em;}
.abs.expand-x-0-5em { left:-0.5em; right:-0.5em;}
.abs.expand-x-1em { left:-1em; right:-1em;}
.abs.expand-left-1em { left:-1em;}
.active > .abs.active-direct-parent-top-0 { top:0; bottom:auto;}
.abs.top-1 { top:1%; bottom:auto;}
.abs.top-2 { top:2%; bottom:auto;}
.abs.top-3 { top:3%; bottom:auto;}
.abs.top-4 { top:4%; bottom:auto;}
.abs.top-5 { top:5%; bottom:auto;}
.abs.top-7 { top:7%; bottom:auto;}
.abs.top-8 { top:8%; bottom:auto;}
.abs.top-9 { top:9%; bottom:auto;}
.abs.top-10 { top:10%; bottom:auto;}
.abs.top-10em { top:10em; bottom:auto;}
.abs.top-11 { top:11%; bottom:auto;}
.abs.top-12 { top:12%; bottom:auto;}
.abs.top-14 { top:14%; bottom:auto;}
.abs.top-15 { top:15%; bottom:auto;}
.abs.top-20 { top:20%; bottom:auto;}
.abs.top-25 { top:25%; bottom:auto;}
.abs.top-26 { top:26%; bottom:auto;}
.abs.top-30 { top:30%; bottom:auto;}
.abs.top-32-5 { top:32.5%; bottom:auto;}
.abs.top-33 { top:33%; bottom:auto;}
.abs.top-35 { top:35%; bottom:auto;}
.abs.top-37-5 { top:37.5%; bottom:auto;}
.abs.top-40 { top:40%; bottom:auto;}
.abs.top-40vh { top:40vh; bottom:auto;}
.abs.top-45 { top:45%; bottom:auto;}
.abs.top-50 { top:50%; bottom:auto;}
.abs.top-53-6 { top:53.6%; bottom:auto;}
.abs.top-54 { top:54%; bottom:auto;}
.abs.top-55 { top:55%; bottom:auto;}
.abs.top-60 { top:60%; bottom:auto;}
.abs.top-65 { top:65%; bottom:auto;}
.abs.top-70 { top:70%; bottom:auto;}
.abs.top-72 { top:72%; bottom:auto;}
.fixed.top-1 { top:1%; bottom:auto;}
.fixed.top-5 { top:5%; bottom:auto;}
.fixed.top-10 { top:10%; bottom:auto;}
.fixed.top-15 { top:15%; bottom:auto;}
.fixed.top-20 { top:20%; bottom:auto;}
.fixed.top-25 { top:25%; bottom:auto;}
.fixed.top-35 { top:35%; bottom:auto;}
.fixed.top-50 { top:50%; bottom:auto;}
.fixed.top-50vh,
.abs.top-50vh { top:50vh; bottom:auto;}
.abs.top-75,
.fixed.top-75 { top:75%; bottom:auto;}
.fixed.top-75vh,
.abs.top-75vh { top:75vh; bottom:auto;}
.abs.top-80 { top:80%; bottom:auto;}
.abs.top-85 { top:85%; bottom:auto;}
.abs.top-100 { top:100%; bottom:auto;}
.abs.top-100px { top:100px; bottom:auto;}
.abs.top-100vh { top:100vh; bottom:auto;}
.abs.bot,
.fixed.bot { top:auto; bottom:0;}
.fixed.bot-1 { top:auto; bottom:1%;}
.abs.bot--5em { bottom:-5em;}
.abs.bot-50vh { bottom:50vh;}
.abs.bot--50vh { bottom:-50vh;}
.abs.bot-3 { top:auto; bottom:3%;}
.abs.bot-4 { top:auto; bottom:4%;}
.abs.bot-5,
.fixed.bot-5 { top:auto; bottom:5%;}
.abs.bot--5 { top:auto; bottom:-5%;}
.abs.bot-7 { top:auto; bottom:7%;}
.abs.bot-10,
.fixed.bot-10 { top:auto; bottom:10%;}
.abs.bot--10 { top:auto; bottom:-10%;}
.abs.bot-15 { top:auto; bottom:15%;}
.abs.bot--15 { top:auto; bottom:-15%;}
.abs.bot-20 { top:auto; bottom:20%;}
.abs.bot--20 { top:auto; bottom:-20%;}
.abs.bot-25 { top:auto; bottom:25%;}
.abs.bot--25 { top:auto; bottom:-25%;}
.abs.bot-30 { top:auto; bottom:30%;}
.abs.bot-35 { top:auto; bottom:35%;}
.abs.bot--35 { top:auto; bottom:-35%;}
.abs.bot-40 { top:auto; bottom:40%;}
.abs.bot-50 { top:auto; bottom:50%;}
.abs.bot-80 { top:auto; bottom:80%;}
.abs.bot-85 { top:auto; bottom:85%;}
.abs.bot-100 { top:auto; bottom:100%;}
.abs.right,
.fixed.right { left:auto; right:0;}
.abs.right-too { right:0;}
.abs.right-1 { left:auto; right:1%;}
.abs.right-2 { left:auto; right:2%;}
.abs.right--1 { left:auto; right:-1%;}
.abs.right-4 { left:auto; right:4%;}
.fixed.right-5,
.abs.right-5 { left:auto; right:5%;}
.abs.right--5 { left:auto; right:-5%;}
.abs.right--10 { left:auto; right:-10%;}
.abs.right--15 { left:auto; right:-15%;}
.abs.right--17 { left:auto; right:-17%;}
.abs.right--40 { left:auto; right:-40%;}
.abs.right--45 { left:auto; right:-45%;}
.abs.right-7 { left:auto; right:7%;}
.abs.right-10,
.fixed.right-10 { left:auto; right:10%;}
.abs.right-15 { left:auto; right:15%;}
.abs.right-25 { left:auto; right:25%;}
.abs.right-20 { left:auto; right:20%;}
.abs.right-30 { left:auto; right:30%;}
.abs.right-33 { left:auto; right:33%;}
.abs.right-50 { left:auto; right:50%;}
.abs.right-60 { left:auto; right:60%;}
.abs.right-70 { left:auto; right:70%;}
.abs.right-80 { left:auto; right:80%;}
.abs.right-85 { left:auto; right:85%;}
.abs.right-100 { left:auto; right:100%;}
.fixed.left,
.active > .abs.active-direct-parent-left-0 { right:auto; left:0;}
.abs.left--1px { right:auto; left:-1px;}
.abs.left--0-25 { right:auto; left:-0.25em;}
.abs.left--1-5 { right:auto; left:-1.5%;}
.abs.left--2 { right:auto; left:-2%;}
.abs.left--4 { right:auto; left:-4%;}
.abs.left--5 { right:auto; left:-5%;}
.abs.left--5-5 { right:auto; left:-5.5%;}
.abs.left--6 { right:auto; left:-6%;}
.abs.left--7 { right:auto; left:-7%;}
.abs.left--9 { right:auto; left:-9%;}
.abs.left--10 { right:auto; left:-10%;}
.abs.left--11 { right:auto; left:-11%;}
.abs.left--12 { right:auto; left:-12%;}
.abs.left--13 { right:auto; left:-13%;}
.abs.left--14 { right:auto; left:-14%;}
.abs.left--15 { right:auto; left:-15%;}
.abs.left--16 { right:auto; left:-16%;}
.abs.left--18 { right:auto; left:-18%;}
.abs.left--20 { right:auto; left:-20%;}
.abs.left--22 { right:auto; left:-22%;}
.abs.left--25 { right:auto; left:-25%;}
.abs.left-2 { right:auto; left:2%;}
.abs.left-4 { right:auto; left:4%;}
.abs.left-5 { right:auto; left:5%;}
.abs.left-10 { right:auto; left:10%;}
.abs.left-10-8 { right:auto; left:10.8%;}
.abs.left-12em { right:auto; left:12em;}
.abs.left-15 { right:auto; left:15%;}
.abs.left-17-5 { right:auto; left:17.5%;}
.abs.left-20 { right:auto; left:20%;}
.abs.left-21 { right:auto; left:21%;}
.abs.left-22-5 { right:auto; left:22.5%;}
.abs.left-24 { right:auto; left:24%;}
.abs.left-25 { right:auto; left:25%;}
.abs.left-30 { right:auto; left:30%;}
.abs.left-33 { right:auto; left:33%;}
.abs.left-35 { right:auto; left:35%;}
.abs.left-37-5 { right:auto; left:37.5%;}
.abs.left-40 { right:auto; left:40%;}
.abs.left-45 { right:auto; left:45%;}
.abs.left-50 { right:auto; left:50%;}
.fixed.left-5 { right:auto; left:5%;}
.fixed.left-50 { right:auto; left:50%;}
.abs.left--50,
.fixed.left--50 { right:auto; left:-50%;}
.abs.left-60 { right:auto; left:60%;}
.abs.left-65 { right:auto; left:65%;}
.abs.left-70 { right:auto; left:70%;}
.abs.left-80 { right:auto; left:80%;}
.abs.left-100 { right:auto; left:100%;}
.abs.left--100 { right:auto; left:-100%;}
.abs.left--33 { right:auto; left:-33%;}
.abs.left--10em-only { left:-10em;}
@media screen and (max-width: 1200px) {
.rel-thin { position:relative;}
.abs-thin { position:absolute; top:0; left:0;}
.abs.bot-thin { top:auto; bottom:0 !important;}
.abs.top--10em-thin { top:-10em; bottom:auto;}
.abs.top-5-thin { top:5% !important; bottom:auto;}
.abs.top-8-thin { top:8% !important; bottom:auto;}
.abs.top-10-thin { top:10% !important; bottom:auto;}
.abs.top-12-thin { top:12% !important; bottom:auto;}
.abs.top-15-thin,
.abs-thin.top-15-thin { top:15% !important; bottom:auto;}
.abs.top-20-thin { top:20% !important; bottom:auto;}
.abs.top-30-thin { top:30% !important; bottom:auto;}
.abs.top-40-thin { top:40% !important; bottom:auto;}
.abs.top-45-thin { top:45% !important; bottom:auto;}
.abs.top-50-thin { top:50% !important; bottom:auto;}
.abs.top-60-thin { top:60% !important; bottom:auto;}
.abs.top-70-thin { top:70% !important; bottom:auto;}
.abs.top-80-thin { top:80% !important; bottom:auto;}
.abs.top-90-thin,
.abs-thin.top-90-thin { top:90% !important; bottom:auto;}
.abs.top-100-thin { top:100% !important; bottom:auto;}
.abs.left-thin { left:0 !important; right:auto;}
.abs.left--4-thin { left:-4%; right:auto;}
.abs.left--40-thin { left:-40%; right:auto;}
.abs.left-5-thin { left:5%; right:auto;}
.abs.left-10-thin { left:10%; right:auto;}
.abs.left-20-thin { left:20%; right:auto;}
.abs.left-30-thin,
.left-30-thin { left:30% !important; right:auto;}
.abs.left-40-thin { left:40% !important; right:auto;}
.abs.left-50-thin { left:50% !important; right:auto;}
@media screen and (max-width: 768px) {
.rel-mobile { position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;}
.abs-mobile { position:absolute; top:0; left:0;}
.abs-mobile.left-100 { right:auto; left:100%;}
.abs.top--10em-mobile { top:-10em; bottom:auto;}
.fixed-mobile.top-mobile { top:0 !important; bottom:auto !important;}
.abs.top-mobile { top:0 !important; bottom:auto;}
.abs.top-5-mobile { top:5% !important; bottom:auto;}
.abs.top-7-mobile { top:7% !important; bottom:auto;}
.abs.top-10-mobile { top:10% !important; bottom:auto;}
.abs.top-12-mobile { top:12% !important; bottom:auto;}
.abs.top-15-mobile,
.abs-mobile.top-15-mobile { top:15% !important; bottom:auto;}
.abs.top-20-mobile { top:20% !important; bottom:auto;}
.abs.top-25-mobile { top:25% !important; bottom:auto;}
.abs.top-30-mobile { top:30% !important; bottom:auto;}
.abs.top-35-mobile { top:35% !important; bottom:auto;}
.abs.top-40-mobile { top:40% !important; bottom:auto;}
.abs.top-50-mobile,
.abs-mobile.top-50-mobile { top:50%; bottom:auto;}
.abs.top-55-mobile { top:55% !important; bottom:auto;}
.abs.top-80-mobile { top:80% !important; bottom:auto;}
.abs.top-90-mobile,
.abs-mobile.top-90-mobile { top:90% !important; bottom:auto;}
.abs.top-100-mobile { top:100%; bottom:auto;}
.abs.top-30em-mobile { top:30em; bottom:auto;}
.abs.top-58em-mobile { top:58em; bottom:auto;}
.abs.top-64em-mobile { top:64em; bottom:auto;}
.abs-mobile.top-40 { top:40% !important; bottom:auto;}
.abs-mobile.top-50 { top:50% !important; bottom:auto;}
.abs-mobile.top-60 { top:60% !important; bottom:auto;}
.abs-mobile.top-70 { top:70% !important; bottom:auto;}
.abs-mobile.right-mobile,
.abs.right-mobile,
.fixed-mobile.right-mobile,
.fixed.right-mobile { left:auto; right:0;}
.fixed-mobile.left-mobile,
.fixed.left-mobile { right:auto; left:0;}
.abs.left--14-mobile { left:-14%; right:auto;}
.abs.left--40-mobile { left:-40%; right:auto;}
.abs.left--50-mobile { left:-50%; right:auto;}
.abs.left-mobile { left:0; right:auto;}
.abs.left-5-mobile { left:5%; right:auto;}
.abs.left-10-mobile { left:10%; right:auto;}
.abs.left-15-mobile { left:15%; right:auto;}
.abs.left-20-mobile { left:20%; right:auto;}
.abs.left-30-mobile { left:30%; right:auto;}
.abs.left-45-mobile { left:45%; right:auto;}
.abs.left-50-mobile { left:50%; right:auto;}
.abs.left-60-mobile { left:60%; right:auto;}
.abs.left-70-mobile { left:70%; right:auto;}
.abs.left-100-mobile { left:100%; right:auto;}
.abs.right-50-mobile { left:auto; right:50%;}
.fixed.right-5-mobile,
.fixed-mobile.right-5-mobile { left:auto; right:5%;}
.abs.bot-25em-mobile { bottom:25em;}
.abs.bot-30-mobile { bottom:30%;}
.abs.bot-100-mobile { top:auto; bottom:100%;}
.abs.right--15-mobile { left:auto; right:-15%;}
.abs.right--25-mobile { left:auto; right:-25%;}
.abs.right--40-mobile { left:auto; right:-40%;}
.abs.bot--40-mobile { top:auto; bottom:-40%;}
.abs-mobile.bot,
.abs.bot-mobile { top:auto !important; bottom:0 !important;}
.rel-mobile,
.active + .active-prev-rel-mobile { position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;}
.abs.top-100-mobile { top:100%; bottom:auto;}
.fixed-mobile { position:fixed;}
@media screen and (max-width: 400px) {
.abs.top-5-xs { top:5% !important; bottom:auto;}
.abs.top-10-xs { top:10% !important; bottom:auto;}
}
}
}
@media screen and (min-width: 1600px) {
.top--12-large { top:-12% !important;}
}
/* Flexibles */
.flexbox { display:flex;}
.flexbox.row { flex-direction:row;}
.flexbox.column { flex-direction:column;}
.flexbox.center { align-items:center; justify-content:center;}
.flexbox.align-center { align-items:center;}
.flexbox.align-start { align-items:flex-start;}
.flexbox.align-end { align-items:flex-end;}
.flexbox.align-baseline { align-items: baseline;}
.flexbox.align-stretch { align-items:stretch;}
.flexbox.justify-center { justify-content:center;}
.flexbox.right { justify-content:right;}
.flexbox.left { justify-content:left;}
.flexbox.reverse { flex-direction:row-reverse;}
.flexbox.column.reverse { flex-direction:column-reverse;}
.flexbox.wrap { flex-wrap:wrap;}
.flexbox.justify-stretch { justify-content:stretch;}
.flexbox.spaced { justify-content:space-between;}
.flexbox.spaced-evenly { justify-content:space-evenly;}
.flexbox.justify-end { justify-content:flex-end;}
.flexbox.gap-0-25 { gap:0.25em;}
.flexbox.gap-0-5 { gap:0.5em;}
.flexbox.gap-0-75 { gap:0.75em;}
.flexbox.gap-1 { gap:1em;}
.flexbox.gap-1-5 { gap:1.5em;}
.flexbox.gap-h-3 { gap:0 3em;}
.flexbox.gap-h-2 { gap:0 2em;}
.flexbox.gap-h-1-5 { gap:0 1.5em;}
.flexbox.gap-h-1 { gap:0 1em;}
.flexbox.gap-h-0-75 { gap:0 0.75em;}
.flexbox.gap-h-0-5 { gap:0 0.5em;}
.flexbox.gap-v-0-25 { gap:0.25em 0;}
.flexbox.gap-v-1 { gap:1em 0;}
.flexbox.gap-v-2 { gap:2em 0;}
.flexbox .flex { flex:1;}
.flexbox .flex-2 { flex:2;}
.flexbox .align-center { align-self:center;}
.flexbox .align-right { align-self:end;}
.flexbox .align-self-stretch { align-self:stretch;}
.flexbox .order-first { order:-1;}
.flexbox .order-last { order:99;}
.flexbox .active.active-order-0 { order:0;}
.flexbox .order-1 { order:1;}
.flexbox .break { flex-basis:100%;}
.flexbox .break-mobile { display:none;}
.flexbox.nogap { gap:0;}
.flexbox.gap-1 { gap:1em;}
.flexbox.gap-1-5 { gap:1.5em;}
.flexbox.gap-2 { gap:2em;}
.flexbox.gap-3 { gap:3em;}
.flexbox.gap-4 { gap:4em;}
.flexbox.gap-5 { gap:5em;}
.flexbox.gap-6 { gap:6em;}
.flexbox.gap-8 { gap:8em;}
.flexbox.gap-10 { gap:10em;}
.flexbox.gap-20 { gap:20em;}
.flexbox.gap-15p { gap:15%;}
.grid { display: grid; grid-auto-rows:1fr; -ms-grid-rows:1fr;}
.grid-2 { grid-template-columns:repeat(2, 1fr);}
.grid-3 { grid-template-columns:repeat(3, 1fr);}
.grid-4 { grid-template-columns:repeat(4, 1fr);}
.grid-5 { grid-template-columns:repeat(5, 1fr);}
/* Grille 12 colonnes EVMT (styleguide). minmax(0,1fr) : sans ça un contenu long déborde
sa colonne. grid-auto-rows:auto pour ne pas hériter du 1fr de .grid (hauteurs égales). */
.grid-12 { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-auto-rows:auto; gap:0.8889rem;} /* gap 16px */
.grid.gap-gutter, .grid-12.gap-gutter { gap:0.8889rem; grid-gap:0.8889rem;}
.flexbox.gap-gutter { gap:0.8889rem;}
.grid.rows-auto { grid-auto-rows:auto;}
.col-1 { grid-column-end:span 1;} .col-2 { grid-column-end:span 2;} .col-3 { grid-column-end:span 3;}
.col-4 { grid-column-end:span 4;} .col-5 { grid-column-end:span 5;} .col-6 { grid-column-end:span 6;}
.col-7 { grid-column-end:span 7;} .col-8 { grid-column-end:span 8;} .col-9 { grid-column-end:span 9;}
.col-10 { grid-column-end:span 10;} .col-11 { grid-column-end:span 11;} .col-12 { grid-column-end:span 12;}
.col-start-1 { grid-column-start:1;} .col-start-2 { grid-column-start:2;} .col-start-3 { grid-column-start:3;}
.col-start-4 { grid-column-start:4;} .col-start-5 { grid-column-start:5;} .col-start-6 { grid-column-start:6;}
.col-start-7 { grid-column-start:7;} .col-start-8 { grid-column-start:8;} .col-start-9 { grid-column-start:9;}
.col-start-10 { grid-column-start:10;} .col-start-11 { grid-column-start:11;} .col-start-12 { grid-column-start:12;}
@media screen and (max-width: 900px) {
.grid-12 { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem;} /* base 16px : 1rem = 16px */
.grid.gap-gutter, .grid-12.gap-gutter { gap:1rem; grid-gap:1rem;}
.flexbox.gap-gutter { gap:1rem;}
.col-1-mobile { grid-column-end:span 1;} .col-2-mobile { grid-column-end:span 2;}
.col-3-mobile { grid-column-end:span 3;} .col-4-mobile { grid-column-end:span 4;}
.col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column-end:span 4;}
.col-start-1, .col-start-2, .col-start-3, .col-start-4, .col-start-5, .col-start-6,
.col-start-7, .col-start-8, .col-start-9, .col-start-10, .col-start-11, .col-start-12 { grid-column-start:auto;}
}
.grid.gap-1 { gap:1em; grid-gap:1em;}
.grid.gap-2 { gap:2em; grid-gap:2em;}
.grid.gap-3 { gap:3em; grid-gap:3em;}
.grid.gap-4 { gap:4em; grid-gap:4em;}
.grid.gap-5 { gap:5em; grid-gap:5em;}
/* Écart vertical seul : se combine avec gap-gutter (l'écart horizontal reste la gouttière). */
.grid.row-gap-1, .grid-12.row-gap-1 { row-gap:1em;}
.grid.row-gap-1-5, .grid-12.row-gap-1-5 { row-gap:1.5em;}
.grid.row-gap-2, .grid-12.row-gap-2 { row-gap:2em;}
.grid.row-gap-3, .grid-12.row-gap-3 { row-gap:3em;}
.grid.strech { align-items:stretch; justify-items:stretch;}
.grid.center { align-items:center; justify-items:center;}
.grid.start { align-items:flex-start; justify-items:flex-start;}
.grid.end { align-items:flex-end; justify-items:flex-end;}
.nowrap { white-space: nowrap;}
@media screen and (max-width: 1200px) {
.flexbox-mobile { display:flex;}
.flexbox.column-thin,
.flexbox.reverse.column-thin { flex-direction:column;}
.flexbox.column-reverse-mobile { flex-direction:column-reverse;}
.flexbox .break-mobile { display:block; flex-basis:100%;}
.flexbox.row-reverse-mobile { flex-direction:row-reverse;}
.flexbox.center-mobile { align-items:center !important; justify-content:center !important;}
.flex-1-mobile { flex:1;}
.flexbox.align-start-mobile { align-items:flex-start !important;}
.align-self-start-mobile { align-self:flex-start !important;}
.flexbox.gap-0-mobile { gap:0;}
.flexbox.gap-0-5-mobile { gap:0.5em;}
.flexbox.gap-1-mobile { gap:1em;}
.flexbox.gap-2-mobile { gap:2em;}
.flexbox.gap-3-mobile { gap:3em;}
.flexbox.gap-4-mobile { gap:4em;}
.flexbox.gap-5-mobile { gap:5em;}
.flexbox.gap-10-mobile { gap:10em;}
.flexbox.right-mobile { justify-content:right;}
.flexbox.justify-between-mobile { justify-content: space-between;}
.flexbox.justify-end-mobile { justify-content:flex-end;}
.grid.blog { grid-template-columns:repeat(1, 1fr);}
.grid-2 { grid-template-columns:repeat(2, 1fr);}
.grid-3 { grid-template-columns:repeat(3, 1fr);}
.grid-4 { grid-template-columns:repeat(4, 1fr);}
@media screen and (max-width: 768px) {
.flexbox-mobile { display:flex;}
.flexbox.row-mobile { flex-direction:row;}
.flexbox.align-start-mobile { align-items:flex-start !important;}
.align-self-start-mobile { align-self:flex-start !important;}
.flexbox.column-mobile,
.flexbox.reverse.column-mobile,
.flexbox-mobile.column-mobile { flex-direction:column;}
.flexbox.column-reverse-mobile { flex-direction:column-reverse;}
.flexbox .break-mobile { display:block; flex-basis:100%;}
.flexbox.row-reverse-mobile { flex-direction:row-reverse;}
.flexbox.center-mobile { align-items:center !important; justify-content:center !important;}
.flexbox.spaced-mobile { justify-content:space-between;}
.flexbox.left-mobile { justify-content:left;}
.flexbox.gap-0-mobile { gap:0;}
.flexbox.gap-0-5-mobile { gap:0.5em;}
.flexbox.gap-1-mobile { gap:1em;}
.flexbox.gap-2-mobile { gap:2em;}
.flexbox.gap-3-mobile { gap:3em;}
.flexbox.gap-4-mobile { gap:4em;}
.flexbox.gap-5-mobile { gap:5em;}
.flexbox.right-mobile { justify-content:right;}
.flexbox.justify-between-mobile { justify-content: space-between;}
.flexbox.justify-start-mobile { justify-content:flex-start;}
.flexbox.justify-end-mobile { justify-content:flex-end;}
.grid.blog { grid-template-columns:repeat(1, 1fr);}
.grid-1-mobile { grid-template-columns:repeat(1, 1fr);}
.grid-2-mobile { grid-template-columns:repeat(2, 1fr);}
.grid-3-mobile { grid-template-columns:repeat(3, 1fr);}
.grid-4-mobile { grid-template-columns:repeat(4, 1fr);}
.grid.gap-1-mobile { gap:1em; grid-gap:1em;}
.grid.gap-2-mobile { gap:2em; grid-gap:2em;}
.grid.gap-3-mobile { gap:3em; grid-gap:3em;}
.grid.gap-4-mobile { gap:4em; grid-gap:4em;}
}
}
/* Filtres */
.grayscale-100 { filter:grayscale(100%);}
.grayscale-50 { filter:grayscale(50%);}
.brightness-150 { filter:brightness(150%);}
.brightness-125 { filter:brightness(125%);}
.brightness-75 { filter:brightness(75%);}
.brightness-50 { filter:brightness(50%);}
.hover-parent:hover .parent-hover-grayscale-0,
.current .current-grayscale-0 { filter:grayscale(0%);}
@media screen and (max-width: 900px) {
.no-filter-mobile { filter:none;}
}
/* Dimensions */
.border-box { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.content-box { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;}
.width-0 { width:0%;}
.width-stretch { width:stretch;}
.width-inherit { width:inherit;}
.width-fit { width:fit-content;}
.width-1vw { width: 1vw;}
.width-auto { width:auto;}
.half { width:50%;}
.half--3em { width:calc(50% - 3em); width:-webkit-calc(50% - 3em);}
.half-3em { width:calc(50% + 3em); width:-webkit-calc(50% + 3em);}
.quarter { width:25%;}
.third { width:calc(100% / 3); width:-webkit-calc(100% / 3);}
.two-third { width:calc((100% / 3) * 2); width:-webkit-calc((100% / 3) * 2);}
.three-quarter { width:75%;}
.width-80-p { width:80%;}
.width-1px { width:1px;}
.width-2px { width:2px;}
.width-3px { width:3px;}
.width-9px { width:9px;}
.width-0-125em { width:0.125em;}
.width-0-2em { width:0.2em;}
.width-0-25em { width:0.25em;}
.width-0-375em { width:0.375em;}
.width-0-5em { width:0.5em;}
.width-0-625em { width:0.625em;}
.width-0-75em { width:0.75em;}
.width-0-8125em { width:0.8125em;}
.width-1em { width:1em;}
.width-1-125em { width:1.125em;}
.width-1-25em { width:1.25em;}
.active.active-width-1-3em { width:1.3em;}
.width-1-375em { width:1.375em;}
.width-1-5em { width:1.5em;}
.width-2em { width:2em;}
.width-2-5em { width:2.5em;}
.width-3em { width:3em;}
.width-3-25em { width:3.25em;}
.width-3-75em { width:3.75em;}
.width-4em { width:4em;}
.width-4-25em { width:4em;}
.width-5em { width:5em;}
.width-5-35em { width:5.35em;}
.width-5-5em { width:5.5em;}
.width-6em { width:6em;}
.width-6-5em { width:6.5em;}
.width-7em { width:7em;}
.width-7-25em { width:7.25em;}
.width-7-5em { width:7.5em;}
*:hover > .hover-direct-parent-width-8em,
.width-8em { width:8em;}
.width-9em { width:9em;}
.width-10em { width:10em;}
.max-width-10em { max-width:10em;}
.width-11em { width:11em;}
.width-12em { width:12em;}
.width-13em { width:13em;}
.width-13-5em { width:13.5em;}
.width-14em { width:14em;}
.width-15em { width:15em;}
.width-16em { width:16em;}
.max-width-16em { max-width:16em;}
.width-17em { width:17em;}
.width-18em { width:18em;}
.width-19em { width:19em;}
.width-20em { width:20em;}
.width-22em { width:22em;}
.width-24em { width:24em;}
.max-width-25em { max-width:25em;}
.width-26em { width:26em;}
.width-28em { width:28em;}
.width-30em { width:30em;}
.width-32em { width:32em;}
.width-33em { width:33em;}
.width-35em { width:35em;}
.width-36em { width:36em;}
.width-40em { width:40em;}
.width-45em { width:45em;}
.width-46em { width:46em;}
.width-50em { width:50em;}
.width-70em { width:70em;}
.width-5 { width: 5%;}
.width-6 { width: 6%;}
.width-8 { width: 8%;}
.width-10 { width:10%;}
.width-15 { width:15%;}
.width-16 { width:16%;}
.width-17-5 { width:17.5%;}
.width-20 { width:20%;}
.width-22 { width:22%;}
.width-24 { width:24%;}
.width-25 { width:25%;}
.width-30 { width:30%;}
.width-31 { width:31%;}
.width-32 { width:32%;}
.width-tier { width:33.33%; width:-webkit-calc(100% / 3); width:calc(100% / 3);}
.width-tier.flex { flex:0 0 33.33%;}
.width-35,
.active.active-width-35 { width:35%;}
.width-37 { width:37%;}
.width-38-9 { width:38.9%;}
.width-40 { width:40%;}
.width-43 { width:43%;}
.width-40.flex { flex:0 0 40%;}
.width-45 { width:45%;}
.width-45.flex { flex:0 0 45%;}
.width-48 { width:48%;}
.width-49 { width:49%;}
.width-50 { width:50%;}
.width-51 { width:51%;}
.width-55 { width:55%;}
.width-55.flex { flex:0 0 55%;}
.width-56 { width:56%;}
.width-60 { width:60%;}
.width-65 { width:65%;}
.width-65.flex { flex:0 0 65%;}
.width-70 { width:70%;}
.width-70.flex { flex:0 0 70%;}
.width-75 { width:75%;}
.width-75.flex { flex:0 0 75%;}
.width-76 { width:76%;}
.width-78 { width:78%;}
.width-80 { width:80%;}
.width-80.flex { flex:0 0 80%;}
.width-82 { width:82%;}
.width-85 { width:85%;}
.width-87 { width:87%;}
.width-88 { width:88%;}
.width-90 { width:90%;}
.width-90.flex { flex:0 0 90%;}
.width-94 { width:94%;}
.width-95 { width:95%;}
.width-100,
.active > .active-direct-parent-width-100,
.spe-parent.active .active-spe-parent-width-100,
*:hover > .hover-direct-parent-width-100 { width:100%;}
.spe-parent:hover > .hover-spe-parent-width-100 { width:100%;}
.active > .active-direct-parent-width-screen,
*:hover > .hover-direct-parent-width-screen { width:100vw;}
.width-100--1em { width:95%; width:-webkit-calc(100% - 1em); width:calc(100% - 1em);}
.width-105 { width:104%;}
.width-105 { width:105%;}
.width-108 { width:108%;}
.width-110 { width:110%;}
.width-115 { width:115%;}
.width-120 { width:120%;}
.width-125 { width:125%;}
.width-135 { width:135%;}
.width-140 { width:140%;}
.width-150 { width:150%;}
.width-175 { width:175%;}
.width-50vw { width:50vw;}
.width-70vw { width:70vw;}
.width-75vw { width:75vw;}
.width-80vw { width:80vw;}
.width-screen { width:100vw;}
.width-screen.flex { flex:0 0 100vw;}
.width-2screen { width:200vw;}
.width-3screen { width:300vw;}
.width-100 { width:100%;}
.width-200 { width:200%;}
.width-300 { width:300%;}
.width-400 { width:400%;}
.width-inf { width:10000vw;}
.min-width-6em { min-width:6em;}
.min-width-9em { min-width:9em;}
.min-width-20em { min-width:20em;}
.min-width-15 { min-width:15%;}
.min-width-20 { min-width:20%;}
.min-width-25 { min-width:25%;}
.min-width-30 { min-width:30%;}
.min-width-50 { min-width:50%;}
.max-width-15em { max-width:15em;}
.max-width-22em { max-width:22em;}
.max-width-26em { max-width:26em;}
.max-width-30em { max-width:30em;}
.max-width-40em { max-width:40em;}
.max-width-50 { max-width:50%;}
.max-width-55 { max-width:55%;}
.max-width-60em { max-width:60em;}
.max-width-tier { max-width:33.33%; max-width:-webkit-calc(100% / 3); max-width:calc(100% / 3);}
.max-width-60 { max-width:60%;}
.max-width-70 { max-width:70%;}
.max-width-80 { max-width:80%;}
.max-width-100 { max-width:100%;}
.max-width-55vh { max-width:55vh;}
.max-width-60vh { max-width:60vh;}
.max-width-70vh { max-width:70vh;}
.max-width-90vh { max-width:90vh;}
.max-width-500 { max-width:500px;}
.max-width-none { max-width:none;}
.height-initial { height:initial;}
.height-fit { height:fit-content;}
.height-1px { height:1px;}
.height-2px { height:2px;}
.height-3px { height:3px;}
.height-4px { height:4px;}
.height-5px { height:5px;}
.height-9px { height:9px;}
.height-10px { height:10px;}
.height-15px { height:15px;}
.height-20px { height:20px;}
.height-75px { height:75px;}
.height-100px { height:100px;}
.height-0-125em { height:0.125em;}
.height-0-2em { height:0.2em;}
.height-0-25em { height:0.25em;}
.height-0-35em { height:0.35em;}
.height-0-375em { height:0.375em;}
.height-0-5em { height:0.5em;}
.height-0-6em { height:0.6em;}
.height-0-625em { height:0.625em;}
.height-0-75em { height:0.75em;}
.height-0-8125em { height:0.8125em;}
.height-1em { height:1em;}
.height-1-125em { height:1.125em;}
.height-1-25em { height:1.25em;}
.height-1-3em { height:1.3em;}
.active.active-height-1-3em { height:1.3em;}
.height-1-5em { height:1.5em;}
.height-1-75em { height:1.75em;}
.height-1-85em { height:1.85em;}
.height-2em { height:2em;}
.height-2-25em { height:2.25em;}
.height-2-35em { height:2.35em;}
.height-2-45em { height:2.45em;}
.height-2-5em { height:2.5em;}
.height-2-75em { height:2.75em;}
.height-3em { height:3em;}
.max-height-3em { max-height:3em;}
.height-3-125em { height: 3.125em;}
.height-3-25em { height:3.25em;}
.height-3-375em { height:3.375em;}
.height-3-5em { height:3.5em;}
.height-3-75em { height:3.75em;}
.height-3-875em { height:3.875em;}
.height-4em { height:4em;}
.max-height-4em { max-height:4em;}
.height-4-25em { height:4.25em;}
.height-4-5em { height:4.5em;}
.height-5em { height:5em;}
.max-height-5em { max-height:5em;}
.height-5-125em { height:5.125em;}
.height-5-5em { height:5.5em;}
.height-5-75em { height:5.75em;}
.height-6em { height:6em;}
.height-6-375em { height:6.375em;}
.height-6-5em { height:6.5em;}
.height-7em { height:7em;}
.max-height-7em { max-height:7em;}
.height-7-25em { height:7.25em;}
.height-7-5em { height:7.5em;}
.height-8em { height:8em;}
.max-height-8em { max-height:8em;}
.height-8-125em { height:8.125em;}
.height-8-5em { height:8.5em;}
.height-8-75em { height:8.75em;}
.height-9em { height:9em;}
.height-10em { height:10em;}
.height-11em { height:11em;}
.max-height-12em { max-height:12em;}
.height-12em { height:12em;}
.height-12-5em { height:12.5em;}
.height-13em { height:13em;}
.height-13-5em { height:13.5em;}
.height-13-75em { height:13.75em;}
.height-14em { height:14em;}
.height-15em { height:15em;}
.max-height-15em { max-height:15em;}
.height-16em { height:16em;}
.height-17em { height:17em;}
.height-18em { height:18em;}
.height-18-5em { height:18.5em;}
.height-19em { height:19em;}
.height-19-5em { height:19.5em;}
.height-20em { height:20em;}
.max-height-20em { max-height:20em;}
.height-22em { height:22em;}
.height-23em { height:23em;}
.height-24em { height:24em;}
.height-25em { height:25em;}
.height-26em { height:26em;}
.height-28em { height:28em;}
.height-30em { height:30em;}
.max-height-30em { max-height:30em;}
.height-32em { height:32em;}
.height-33em { height:33em;}
.height-34em { height:34em;}
.height-35em { height:35em;}
.height-36em { height:36em;}
.height-40em { height:40em;}
.height-42em { height:42em;}
.height-46em { height:46em;}
.height-50em { height:50em;}
.height-60em { height:60em;}
.height-70em { height:70em;}
.height-10 { height:10%;}
.height-15 { height:15%;}
.height-16 { height:16%;}
.height-20 { height:20%;}
.height-25 { height:25%;}
.height-30 { height:30%;}
.active.active-height-35,
.height-35 { height:35%;}
.height-40 { height:40%;}
.height-45 { height:45%;}
.height-49 { height:49%;}
.height-50 { height:50%;}
.height-51 { height:51%;}
.height-55 { height:55%;}
.height-60 { height:60%;}
.height-65,
.loaded .parent-loaded-height-65, .loaded-height-65.loaded { height:65%;}
.height-70 { height:70%;}
.height-75 { height:75%;}
.height-80 { height:80%;}
.height-85 { height:85%;}
.height-90 { height:90%;}
.height-100,
.active > .active-direct-parent-height-100 { height:100%;}
.height-100-10em { height:-webkit-calc(100% + 10em); height:calc(100% + 10em);}
.height-105 { height:105%;}
.height-110 { height:110%;}
.height-115 { height:115%;}
.height-125 { height:125%;}
.height-135 { height:135%;}
.height-145 { height:145%;}
.height-150 { height:150%;}
.height-175 { height:175%;}
.height-200 { height:200%;}
.height-300 { height:300%;}
.height-500 { height:500%;}
.height-10vh { height:10vh;}
.height-15vh { height:15vh;}
.height-20vh { height:20vh;}
.height-25vh { height:25vh;}
.height-30vh { height:30vh;}
.height-35vh { height:35vh;}
.height-40vh { height:40vh;}
.height-50vh { height:50vh;}
.height-55vh { height:55vh;}
.height-60vh { height:60vh;}
.height-65vh { height:65vh;}
.height-70vh { height:70vh;}
.height-75vh { height:75vh;}
.height-80vh { height:80vh;}
.height-85vh { height:85vh;}
.height-90vh { height:90vh;}
.height-93vh { height:93vh;}
.height-95vh { height:95vh;}
.height-screen,
.height-100vh { height:-webkit-fill-available; height:100vh; height:100dvh;}
.height-120vh { height:120vh;}
.height-130vh { height:130vh;}
.height-140vh { height:140vh;}
.height-150vh { height:150vh;}
.height-2screen { height:200vh;}
.height-220vh { height:220vh;}
.height-3screen { height:300vh;}
.height-infinite { height:1000vh;}
.height-inf { height:10000vh;}
.height-auto { height:auto;}
.min-height-5em { min-height:5em;}
.min-height-15em { min-height:15em;}
.min-height-20em { min-height:20em;}
.min-height-25em { min-height:25em;}
.min-height-26em { min-height:26em;}
.min-height-50vh { min-height:50vh;}
.min-height-70vh { min-height:70vh;}
.min-height-30 { min-height:30%;}
.min-height-100 { min-height:100%;}
.min-height-screen { min-height:100vh;}
.min-height-2screen { min-height:200vh;}
.max-height-80 { max-height:80%;}
.max-height-100 { max-height:100%;}
@media screen and (max-width: 1600px) {
.height-3em-large { height:3em;}
.height-2em-large { height:2em;}
.height-3-5em-large { height:3.5em;}
@media screen and (max-width: 1200px) {
.width-10-thin { width:10%;}
.width-14em-thin { width:14em;}
.width-20-thin { width:20%;}
.width-25-thin { width:25%;}
.width-30-thin { width:30%;}
.width-40-thin { width:40%;}
.width-45-thin { width:45%;}
.width-50-thin { width:50%;}
.width-60-thin { width:60%;}
.width-70-thin { width:70%;}
.width-75-thin { width:75%;}
.width-80-thin { width:80%;}
.width-85-thin { width:85%;}
.width-90-thin { width:90%;}
.width-100-thin { width:100%;}
.height-auto-thin { height:auto;}
.height-10-thin { height:10%;}
.height-14-thin { height:14%;}
.height-15-thin { height:15%;}
.height-20-thin { height:20%;}
.height-20em-thin { height:20em;}
.height-30-thin { height:30%;}
.height-40-thin { height:40%;}
.height-45-thin { height:45%;}
.height-50-thin { height:50%;}
.height-60-thin { height:60%;}
.height-70-thin { height:70%;}
.height-80-thin { height:80%;}
.height-90-thin { height:90%;}
.height-100-thin { height:100%;}
.height-30dvh-thin { height:30dvh;}
.height-35dvh-thin { height:35dvh;}
.height-40dvh-thin { height:40dvh;}
.height-45dvh-thin { height:45dvh;}
.height-50dvh-thin { height:50dvh;}
.height-60dvh-thin { height:60dvh;}
.height-70dvh-thin { height:70dvh;}
.height-75dvh-thin { height:75dvh;}
.height-80dvh-thin { height:80dvh;}
.height-90dvh-thin { height:90dvh;}
.height-100dvh-thin { height:100dvh;}
.height-110dvh-thin { height:110dvh;}
.height-120dvh-thin { height:120dvh;}
.height-130dvh-thin { height:130dvh;}
.height-140dvh-thin { height:140dvh;}
.height-150dvh-thin { height:150dvh;}
.height-170dvh-thin { height:170dvh;}
.height-200dvh-thin { height:200dvh;}
@media screen and (max-width: 768px) {
.no-min-height-mobile { min-height:auto !important;}
.no-min-width-mobile { min-width:auto !important;}
.min-width-11em-mobile { min-width:11em !important;}
.height-auto-mobile { height:auto;}
.height-fit-mobile { height:fit-content;}
.width-fit-mobile { width:fit-content;}
.width-auto-mobile { width:auto;}
.max-width-auto-mobile { max-width:100%;}
.max-width-100-mobile { max-width:100%;}
.width-0-mobile { width:0%;}
.width-1em-mobile { width:1em;}
.width-2em-mobile { width:2em;}
.width-3em-mobile { width:3em;}
.width-4em-mobile { width:4em;}
.width-5em-mobile { width:5em;}
.width-6em-mobile { width:6em;}
.width-8em-mobile { width:8em;}
.width-9em-mobile { width:9em;}
.width-10em-mobile { width:10em;}
.width-12em-mobile { width:12em;}
.width-15em-mobile { width:15em;}
.width-20em-mobile { width:20em;}
.width-15-mobile { width:15%;}
.width-17-5-mobile { width:17.5%;}
.width-20-mobile { width:20%;}
.width-30-mobile { width:30%;}
.width-40-mobile { width:40%;}
.width-40em-mobile { width:40em;}
.width-50-mobile { width:50%;}
.width-55-mobile { width:55%;}
.width-60-mobile { width:60%;}
.width-70-mobile { width:70%;}
.width-75-mobile { width:75%;}
.width-80-mobile { width:80%;}
.width-85-mobile { width:85%;}
.width-90-mobile { width:90%;}
.width-100-mobile { width:100%;}
.width-125-mobile { width:125%;}
.width-135-mobile { width:135%;}
.width-150-mobile { width:150%;}
.width-160-mobile { width:160%;}
.width-175-mobile { width:175%;}
.width-200-mobile { width:200%;}
.width-230-mobile { width:230%;}
.width-300-mobile { width:300%;}
.width-60vw-mobile { width:60vw}
.width-screen-mobile { width:100vw;}
.width-200vh-mobile { width:200vh;}
.width-300vh-mobile { width:300vh;}
.min-height-5em-mobile { min-height:5em;}
.height-1px-mobile { height:1px;}
.height-25-mobile { height:25%;}
.height-30-mobile { height:30%;}
.height-40-mobile { height:40%;}
.height-45-mobile { height:45%;}
.height-50-mobile { height:50%;}
.height-60-mobile { height:60%;}
.height-63-mobile { height:63%;}
.height-65-mobile { height:65%;}
.height-70-mobile { height:70%;}
.height-75-mobile { height:75%;}
.height-80-mobile { height:80%;}
.height-90-mobile { height:90%;}
.height-100-mobile { height:100%;}
.height-125-mobile { height:125%;}
.height-150-mobile { height:150%;}
.height-175-mobile { height:175%;}
.height-200-mobile { height:200%;}
.height-500-mobile { height:500%;}
.height-1em-mobile { height:1em;}
.height-2em-mobile { height:2em;}
.height-4em-mobile { height:4em;}
.height-5em-mobile { height:5em;}
.height-6em-mobile { height:6em;}
.height-7em-mobile { height:7em;}
.height-8em-mobile { height:8em;}
.height-9em-mobile { height:9em;}
.height-10em-mobile { height:10em;}
.height-12em-mobile { height:12em;}
.height-13em-mobile { height:13em;}
.height-14em-mobile { height:14em;}
.height-15em-mobile { height:15em;}
.max-height-15em-mobile { max-height:15em;}
.height-18em-mobile { height:18em;}
.height-20em-mobile { height:20em;}
.height-22em-mobile { height:22em;}
.height-24em-mobile { height:24em;}
.height-28em-mobile { height:28em;}
.height-30em-mobile { height:30em;}
.height-36em-mobile { height:36em;}
.height-40em-mobile { height:40em;}
.height-44em-mobile { height:44em;}
.height-50em-mobile { height:50em;}
.height-60em-mobile { height:60em;}
.height-70em-mobile { height:70em;}
.height-100em-mobile { height:100em;}
.height-35vh-mobile { height:35vh;}
.height-40vh-mobile { height:40vh;}
.height-50vh-mobile { height:50vh;}
.height-70vh-mobile { height:70vh;}
.height-70dvh-mobile { height:70dvh;}
.height-75vh-mobile { height:75vh;}
.height-80vh-mobile { height:80vh;}
.height-80dvh-mobile { height:80dvh;}
.height-90vh-mobile { height:90vh;}
.height-100vh-mobile { height:100vh;}
.height-screen-mobile { height:100vh;}
.height-120vh-mobile { height:120vh;}
.height-130vh-mobile { height:130vh;}
.height-130dvh-mobile { height:130dvh;}
.height-140vh-mobile { height:140vh;}
.height-140dvh-mobile { height:140dvh;}
.height-150vh-mobile { height:150vh;}
.height-150dvh-mobile { height:150dvh;}
.height-160vh-mobile { height:160vh;}
.height-170vh-mobile { height:170vh;}
.height-170dvh-mobile { height:170dvh;}
@media screen and (max-width: 420px) {
.height-50vh-xs { height:50vh;}
.height-60vh-xs { height:60vh;}
.height-70vh-xs { height:70vh;}
.height-80vh-xs { height:80vh;}
.height-140vh-xs { height:140vh;}
.height-170vh-xs { height:170vh;}
}
}
}
}
/* CHARTE */
/* Titres / Textes */
.black-outline { text-shadow: black 0px 0px 0.0250em, black 0px 0px 0.0250em, black 0px 0px 0.0250em, black 0px 0px 0.0250em, black 0px 0px 0.0250em, black 0px 0px 0.0250em, black 0px 0px 0.0250em, black 0px 0px 0.0250em, black 0px 0px 0.0250em, black 0px 0px 0.0250em, black 0px 0px 0.0250em, black 0px 0px 0.0250em; -webkit-font-smoothing: antialiased;}
.white-outline { text-shadow: white 0px 0px 0.0250em, white 0px 0px 0.0250em, white 0px 0px 0.0250em, white 0px 0px 0.0250em, white 0px 0px 0.0250em, white 0px 0px 0.0250em, white 0px 0px 0.0250em, white 0px 0px 0.0250em, white 0px 0px 0.0250em, white 0px 0px 0.0250em, white 0px 0px 0.0250em, white 0px 0px 0.0250em; -webkit-font-smoothing: antialiased;}
.orange-outline { text-shadow:0px 1px 3px #FF9700CC, 0px -1px 3px #FF9700CC;}
.t-stroked { -webkit-text-stroke:0.075em white; letter-spacing:0.2em;}
.t-stroked:after { content:attr(data-text); white-space:pre-wrap; position:absolute; left:0; top:0; -webkit-text-stroke:0.075em rgba(0,0,0,0); color:inherit; letter-spacing:inherit; pointer-events:none;}
/* ÉCHELLE TYPO EVMT — charte px traduite en % de la base (18px desktop / 16px < 900px).
letter-spacing intégré à chaque niveau car -2px vaut -0.0263em à 76px mais -0.0909em
à 22px (rapport 3,5) : aucune classe unique ne peut être juste partout. En em, le rapport
optique -2px est conservé quand la base grimpe au-delà de 2000px (scale SPKTR gardé). */
.t-mega { font-size:422.2222%; line-height:0.9em; letter-spacing:-1px; font-weight:200; } /* 76px | lh90 | ExtraLight */
.t-h1 { font-size:377.7778%; line-height:1em; letter-spacing:-1px; font-weight:500; } /* 68px | Medium */
.t-h2 { font-size:233.3333%; line-height:1em; letter-spacing:-1px; font-weight:500; } /* 42px | Medium */
.t-h3 { font-size:122.2222%; line-height:1.5em; letter-spacing:-1px; font-weight:500; } /* 22px | lh33 | Medium */
.t-xl { font-size:150%; line-height:1.5em; letter-spacing:-1px; font-weight:500; } /* 36px | lh54 | Medium */
.t-m { font-size:133.3333%; line-height:1.3333em; letter-spacing:0; font-weight:200; } /* 24px | lh32 | ExtraLight */
.t-s { font-size:88.8889%; line-height:1.5em; letter-spacing:0; font-weight:200; } /* 16px | lh24 | ExtraLight */
.t-cta { font-size:77.7778%; line-height:1em; letter-spacing:0; font-weight:200; } /* 14px | ExtraLight */
.t-tag { font-size:77.7778%; line-height:1em; letter-spacing:0; font-weight:200; } /* 14px | ExtraLight */
/* Seconde graisse prévue par le styleguide pour chaque niveau : bascule vers l'autre
graisse de la charte (200 <-> 500), le niveau .alt reste donc un contraste de graisse. */
.t-mega.alt { font-weight:500; }
.t-h1.alt { font-weight:200; }
.t-h2.alt { font-weight:200; }
.t-m.alt { font-weight:500; }
.t-s.alt { font-weight:500; }
/* SHIM DE COMPAT — anciennes classes t-* mappées sur la nouvelle échelle, le temps de
migrer les templates (t-small-3 x13 nav, t-std x1, t-title x2, t-title-2/3 x1). À retirer ensuite. */
.t-small, .t-small-2, .t-small-3 { font-size:77.7778%; line-height:1em; letter-spacing:0; font-weight:200; }
.t-small-4, .t-std { font-size:88.8889%; line-height:1.5em; letter-spacing:0; font-weight:200; }
.t-std-2 { font-size:133.3333%; line-height:1.3333em; letter-spacing:0; font-weight:200; }
.t-title { font-size:122.2222%; line-height:1.5em; letter-spacing:-0.0909em; font-weight:500; }
.t-title-2 { font-size:233.3333%; line-height:1em; letter-spacing:-0.0476em; font-weight:500; }
.t-title-3 { font-size:377.7778%; line-height:1em; letter-spacing:-0.0294em; font-weight:500; }
.t-title-4 { font-size:422.2222%; line-height:0.9em; letter-spacing:-0.0263em; font-weight:200; }
/* Contenu enrichi */
.rich-content * + h2 { margin-top:1.5em; font-weight:500; font-size: 150%;}
.rich-content * + h3 { margin-top:1.5em; font-weight:500;}
.rich-content h3 + p { margin-top:3em;}
.rich-content strong { font-weight:500;}
.rich-content * + p { margin-top: 1em;}
.rich-content p + ul { margin-top:1em;}
.rich-content ul + p { margin-top:1em;}
.rich-content ul li { padding-left:1.15em;}
.rich-content ul li + li { margin-top:0.5em;}
.rich-content.zone ul li + li { margin-top:1em;}
/* Puce = la pastille de la charte (img/fushia_picto.svg), pas un rond typographique
(retour client du 2026-08-07). Masque + background-color : la puce suit ainsi la
couleur d'accent définie ici, sans dépendre du fill du fichier.
Cote maquette : 4px pour un texte de 16px, centrée sur la première ligne. */
.rich-content ul li:before { display:block; position:absolute; top:0.6em; left:0.15em; content:""; width:0.3em; height:0.3em; background-color:var(--color-accent);
-webkit-mask:url("img/fushia_picto.svg") no-repeat center / contain; mask:url("img/fushia_picto.svg") no-repeat center / contain;}
.rich-content mark { line-height:inherit; color:inherit; font-weight:inherit; font-size:inherit;}
.rich-content h2:not(:first-of-type) { border-top: 1px solid var(--color-muted); margin-top: 1em; padding-top: 1em;}
/* Palier intermédiaire (901-1200px) — HORS styleguide (ne donne que desktop+mobile).
Sans lui le méga-texte reste à 76px et déborde sur un laptop 1280. À valider. */
@media screen and (max-width: 1200px) {
.t-mega, .t-title-4 { font-size:311.1111%; letter-spacing:-1px; } /* 56px */
.t-h1, .t-title-3 { font-size:277.7778%; letter-spacing:-1px; } /* 50px */
.t-h2, .t-title-2 { font-size:200%; letter-spacing:-1px; } /* 36px */
.rich-content * + p { margin-top: 0; }
}
/* Mobile — sous 900px, base html = 16px. Breakpoint aligné sur la base html et le
seuil du moteur d'animation JS (fin des désynchros 1200/768 de l'ancien thème). */
@media screen and (max-width: 900px) {
.t-mega, .t-title-4 { font-size:250%; line-height:0.9em; letter-spacing:-1px; } /* 40px */
.t-h1, .t-title-3 { font-size:250%; line-height:1em; letter-spacing:-1px; } /* 40px */
.t-h2, .t-title-2 { font-size:225%; line-height:1em; letter-spacing:-1px; } /* 32px — à valider (styleguide ne donne que "titres 40px") */
.t-h3, .t-title { font-size:137.5%; line-height:1.5em; letter-spacing:-1px; } /* 22px */
.t-m, .t-std-2 { font-size:150%; line-height:1.3333em; } /* 24px — mobile non spécifié, préserve le desktop */
.t-s, .t-small-4, .t-std { font-size:100%; line-height:1.5em; } /* 16px */
.t-cta, .t-tag, .t-small, .t-small-2, .t-small-3 { font-size:100%; line-height:1em; } /* 14px */
.hide-br-mobile br { display:none !important; }
}
/* Mobile tweaks: section-vision */
@media screen and (max-width: 768px) {
#section-vision .width-55 { width:100% !important; max-width:100% !important; }
#section-vision .hide-br-mobile { width:100% !important; display:block; }
#section-vision .hide-br-mobile br { display:none !important; }
}
/* Citations */
.blockquote *:nth-child(1):before,
.rich-content blockquote *:nth-child(1):before { vertical-align:bottom; display:inline-block; content:'“'; font-size:200%; width:0.75em; padding-bottom:0; quotes:initial; hyphens:initial;}
.blockquote *:nth-last-child(1):after,
.rich-content blockquote *:nth-last-child(1):after { vertical-align:top; display:inline-block; content:'”'; font-size:200%; width:0.75em; text-align:right; quotes:initial; hyphens:initial;}
/* Video */
video { object-fit: cover;}
/* Formattage article/page simple */
.page-content .wp-block-image { padding:0; margin:0; height:100%; width:100%; object-fit:cover;}
.page-content p { font-size:106.25%; line-height:1.21em; letter-spacing:0.0415em;}
.page-content.semibold p { font-weight:500;}
.page-content p + * { margin-top:1em;}
.page-content ul + * { margin-top:1.5em;}
.page-content ul { font-size:106.25%; font-weight:200; line-height:1.21em; letter-spacing:0.0415em; padding-left:1em;}
.page-content ul li { padding-left:1.15em;}
.page-content ul li + li { margin-top:0.5em;}
.page-content ul li:before { display:block; position:absolute; top:0.1em; left:0; content:"•"; font-size:125%; font-weight:500; line-height:0.7em;}
.page-content strong { font-weight:500;}
.page-content em { font-style:italic; font-weight:inherit;}
.page-content a { text-decoration:underline;}
.page-content a:hover { opacity:0.6;}
.page-content h1 { font-family:inherit; font-size:377.7778%; line-height:1em; font-weight:500; letter-spacing:-0.0294em; text-transform:none;}
.page-content h2 { font-family:inherit; font-size:233.3333%; line-height:1em; font-weight:500; letter-spacing:-0.0476em; text-transform:none;}
.page-content h3 { font-family:inherit; font-size:122.2222%; line-height:1.5em; font-weight:500; letter-spacing:-0.0909em; text-transform:none;}
.page-content h2 + * { margin-top:1.5em;}
.page-content h3 + * { margin-top:1.5em;}
.page-content * + h2 { margin-top:2em;}
.page-content * + h3 { margin-top:2em;}
.page-content h1 + * { margin-top:2em;}
@media screen and (max-width: 900px) {
.page-content p,
.page-content ul { font-size:131.25%;}
.page-content h1 { font-size:250%;}
}
/* Blending / FX */
.mix-blend-darken { -webkit-mix-blend-mode:darken; mix-blend-mode:darken;}
.mix-blend-lighten { -webkit-mix-blend-mode:lighten; mix-blend-mode:lighten;}
.mix-blend-multiply { -webkit-mix-blend-mode:multiply; mix-blend-mode:multiply;}
.mix-blend-overlay { -webkit-mix-blend-mode:overlay; mix-blend-mode:overlay;}
.backdrop-blur { backdrop-filter:blur(1em); -webkit-backdrop-filter:blur(1em);}
.blur-text { filter:blur(0.12em);}
.triggered-2 .ontrigger-2-unblur, .ontrigger-2-unblur.triggered-2 { filter:blur(0);}
.blur-svg svg { filter:blur(0.5px);}
.filter-invert { filter:invert(100%);}
.back-blur-1 { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);}
.back-blur-2 { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.back-blur-3 { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}
.back-blur-4 { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.back-blur-5 { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.blur-1 { filter: blur(2px); }
.blur-2 { filter: blur(4px); }
.blur-3 { filter: blur(6px); }
.blur-4 { filter: blur(8px); }
.blur-5 { filter: blur(10px);}
.hover-filter-black:hover img,
.hover-filter-black:hover svg { filter: brightness(0); -webkit-filter: brightness(0); }
/* Change SVG color to theme green on parent hover (uses CSS filter) */
.hover-filter-green:hover img,
.hover-filter-green:hover svg { filter: invert(58%) sepia(32%) saturate(700%) hue-rotate(75deg) brightness(95%) contrast(88%); -webkit-filter: invert(58%) sepia(32%) saturate(700%) hue-rotate(75deg) brightness(95%) contrast(88%); }
/* Alias legacy — le header utilise désormais .bg-color-surface-transparent (défini plus bas).
Conservé le temps de migrer le template, repointé sur la variable EVMT. À supprimer ensuite. */
.bg-color-beige-transparent { background-color: var(--color-surface-transparent); }
/* Nav dropdown */
.nav-dropdown-wrap { position: relative; }
.nav-dropdown-wrap .nav-dropdown { position: absolute; top: calc(100% + 0.5em); left: 0; min-width: 12em; z-index: 20; opacity: 0; pointer-events: none; transition: opacity 0.2s; background-color: var(--color-white); border-radius: 0.375em; box-shadow: 0px 0px 20.1px 0px #0000001F; padding: 0.35em 0; }
.nav-dropdown-wrap.open .nav-dropdown { opacity: 1; pointer-events: auto; }
.nav-dropdown-wrap .nav-dropdown a { display: block; padding: 0.5em 1em; white-space: nowrap; }
.nav-dropdown-wrap .nav-dropdown a:hover { background-color: var(--color-surface); }
.nav-dropdown-wrap .nav-dropdown-chevron { transition: transform 0.2s; display: inline-block; }
.nav-dropdown-wrap.open .nav-dropdown-chevron { transform: rotate(180deg); }
/* Mobile burger button */
.mobile-only { display: none; }
@media screen and (max-width: 900px) { .mobile-only { display: flex; } }
.burger-btn { background: none; border: none; cursor: pointer; flex-direction: column; gap: 7px; align-items: center; justify-content: center; }
.burger-btn span { display: block; width: 1.75em; height: 2px; background-color: var(--color-black); border-radius: 1px; transition: transform 0.25s, opacity 0.25s; }
@media screen and (max-width: 900px) { #header .centered-wide { width: 100%; } }
/* Couleurs — nommage par rôle. Patron de sélecteurs repris à l'identique du fork. */
.active > .active-direct-parent-color-inherit,
.spe-parent.active .active-spe-parent-color-inherit,
.color-inherit { color:inherit !important;}
.color-white,
*:hover > .hover-direct-parent-color-white,
.spe-parent.active .active-spe-parent-color-white,
.hover-color-white:hover,
.spe-parent:hover .hover-spe-parent-color-white { color:var(--color-white);}
.color-black,
*:hover > .hover-direct-parent-color-black,
.spe-parent.active .active-spe-parent-color-black,
.hover-color-black:hover,
.spe-parent:hover .hover-spe-parent-color-black { color:var(--color-black);}
.color-accent,
*:hover > .hover-direct-parent-color-accent,
.spe-parent.active .active-spe-parent-color-accent,
.hover-color-accent:hover,
.spe-parent:hover .hover-spe-parent-color-accent { color:var(--color-accent);}
.color-accent-2,
*:hover > .hover-direct-parent-color-accent-2,
.spe-parent.active .active-spe-parent-color-accent-2,
.hover-color-accent-2:hover,
.spe-parent:hover .hover-spe-parent-color-accent-2 { color:var(--color-accent-2);}
.color-accent-deep,
*:hover > .hover-direct-parent-color-accent-deep,
.spe-parent.active .active-spe-parent-color-accent-deep,
.hover-color-accent-deep:hover,
.spe-parent:hover .hover-spe-parent-color-accent-deep { color:var(--color-accent-deep);}
.color-surface,
*:hover > .hover-direct-parent-color-surface,
.spe-parent.active .active-spe-parent-color-surface,
.hover-color-surface:hover,
.spe-parent:hover .hover-spe-parent-color-surface { color:var(--color-surface);}
.color-muted,
*:hover > .hover-direct-parent-color-muted,
.spe-parent.active .active-spe-parent-color-muted,
.hover-color-muted:hover,
.spe-parent:hover .hover-spe-parent-color-muted { color:var(--color-muted);}
.color-highlight,
*:hover > .hover-direct-parent-color-highlight,
.spe-parent.active .active-spe-parent-color-highlight,
.hover-color-highlight:hover,
.spe-parent:hover .hover-spe-parent-color-highlight { color:var(--color-highlight);}
/* Backgrounds */
.bg-color-transparent { background-color:rgba(0,0,0,0);}
.bg-color-inherit { background-color: inherit;}
.bg-color-black,
.hover-bg-color-black:hover,
.active > .active-direct-parent-bg-color-black,
.active .active-parent-bg-color-black,
*:hover > .hover-direct-parent-bg-color-black,
.active.active-bg-color-black { background-color: var(--color-black);}
.bg-color-white,
.hover-bg-color-white:hover,
.active > .active-direct-parent-bg-color-white,
.active .active-parent-bg-color-white,
*:hover > .hover-direct-parent-bg-color-white,
.active.active-bg-color-white { background-color: var(--color-white);}
.bg-color-surface,
.hover-bg-color-surface:hover,
.active > .active-direct-parent-bg-color-surface,
.active .active-parent-bg-color-surface,
*:hover > .hover-direct-parent-bg-color-surface,
.active.active-bg-color-surface { background-color: var(--color-surface);}
.bg-color-muted,
.hover-bg-color-muted:hover,
.active > .active-direct-parent-bg-color-muted,
.active .active-parent-bg-color-muted,
*:hover > .hover-direct-parent-bg-color-muted,
.active.active-bg-color-muted { background-color: var(--color-muted);}
.bg-color-accent,
.hover-bg-color-accent:hover,
.active > .active-direct-parent-bg-color-accent,
.active .active-parent-bg-color-accent,
*:hover > .hover-direct-parent-bg-color-accent,
.active.active-bg-color-accent { background-color: var(--color-accent);}
.bg-color-accent-2,
.hover-bg-color-accent-2:hover,
.active > .active-direct-parent-bg-color-accent-2,
.active .active-parent-bg-color-accent-2,
*:hover > .hover-direct-parent-bg-color-accent-2,
.active.active-bg-color-accent-2 { background-color: var(--color-accent-2);}
.bg-color-accent-deep,
.hover-bg-color-accent-deep:hover,
.active > .active-direct-parent-bg-color-accent-deep,
.active .active-parent-bg-color-accent-deep,
*:hover > .hover-direct-parent-bg-color-accent-deep,
.active.active-bg-color-accent-deep { background-color: var(--color-accent-deep);}
.bg-color-highlight,
.hover-bg-color-highlight:hover,
.active > .active-direct-parent-bg-color-highlight,
.active .active-parent-bg-color-highlight,
*:hover > .hover-direct-parent-bg-color-highlight,
.active.active-bg-color-highlight { background-color: var(--color-highlight);}
/* Header verre dépoli — répare evmt-header.php (fond absent avec l'ancienne var) */
.bg-color-surface-transparent { background-color: var(--color-surface-transparent);}
.bg-color-white-transparent { background-color: var(--color-white-transparent);}
.bg-color-black-transparent { background-color: var(--color-black-transparent);}
/* Gradients */
.bg-gradient-1, .hover-bg-gradient-1:hover { background: var(--gradient-1);}
/* Mobile */
@media screen and (max-width: 900px) {
.hover-color-white-mobile:hover,
.active > .active-direct-parent-color-white-mobile,
.active .active-parent-color-white-mobile,
.color-white-mobile { color: var(--color-white) !important;}
}
/* BORDERS */
.spe-parent:hover .hover-spe-parent-border-color-white,
.hover-border-color-white:hover,
.border-color-white { border-color:var(--color-white) !important;}
.spe-parent:hover .hover-spe-parent-border-color-black,
.hover-border-color-black:hover,
.border-color-black { border-color:var(--color-black) !important;}
.spe-parent:hover .hover-spe-parent-border-color-muted,
.hover-border-color-muted:hover,
.border-color-muted { border-color:var(--color-muted) !important;}
.spe-parent:hover .hover-spe-parent-border-color-accent,
.hover-border-color-accent:hover,
.border-color-accent { border-color:var(--color-accent) !important;}
.spe-parent:hover .hover-spe-parent-border-color-accent-2,
.hover-border-color-accent-2:hover,
.border-color-accent-2 { border-color:var(--color-accent-2) !important;}
.spe-parent:hover .hover-spe-parent-border-color-surface,
.hover-border-color-surface:hover,
.border-color-surface { border-color:var(--color-surface) !important;}
/* STROKES */
.p-stroke-color-white svg path { stroke:var(--color-white);}
.p-stroke-3px svg path { stroke-width:3px;}
/* FILL */
.p-color-black svg path { fill:#000000;}
*:hover > .hover-direct-parent-p-color-white svg path,
.spe-parent:hover .hover-spe-parent-p-color-white svg path,
.hover-p-color-white:hover svg path,
.p-color-white svg path { fill:var(--color-white);}
/* Mobile */
@media screen and (max-width: 900px) {
.bg-color-transparent-mobile { background-color:rgba(0,0,0,0);}
}
/* Ombres */
.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2);}
.shadow-3 { box-shadow: var(--shadow-3);}
/* Icône SVG masquée : prend la couleur du texte (currentColor). Usage : */
.evmt-icon-mask { display:block; flex:0 0 auto; width:1.25em; height:1.25em; background-color:currentColor; transition:background-color 0.25s;
-webkit-mask:var(--icon) no-repeat center / contain; mask:var(--icon) no-repeat center / contain;}
/* Transformations */
.mirrored-y { transform:scale(1.0, -1.0); -webkit-transform:scale(1.0, -1.0);}
.mirrored-x { transform:scale(-1.0, 1.0); -webkit-transform:scale(-1.0, 1.0);}
.spe-parent.active .active-spe-parent-mirrored-y { transform:scale(1.0, -1.0); -webkit-transform:scale(1.0, -1.0);}
.spe-parent:hover .hover-spe-parent-scale,
.spe-parent.active .active-spe-parent-scale,
*:hover > .hover-direct-parent-scale { transform:scale(1.175); -webkit-transform:scale(1.175);}
/* CLIPS */
.clip-top-triangle { clip-path:polygon(0 12em, 100% 0, 100% 200%, 0 200%);}
.clip-top-triangle-inv { clip-path:polygon(0 0, 100% 12em, 100% 200%, 0 200%);}
.clip-bot-triangle { clip-path:polygon(0 100%, 100% calc(100% - 12em), 100% -100%, 0 -100%);}
.clip-bot-triangle-inv { clip-path:polygon(0 calc(100% - 12em), 100% 100%, 100% -100%, 0 -100%);}
.clip-top-circle { clip-path:ellipse(110em 100em at 50% 100em);}
/* Mobile */
@media screen and (max-width: 900px) {
.clip-top-triangle { clip-path:polygon(0 6em, 100% 0, 100% 200%, 0 200%);}
.clip-bot-triangle { clip-path:polygon(0 100%, 100% calc(100% - 6em), 100% -100%, 0 -100%);}
}
/* Cercles accueil - section 1 */
.deg-circle { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.deg-circle:nth-child(1) { height:85%;}
.deg-circle:nth-child(2) { height:120%;}
.deg-circle:nth-child(3) { height:150%;}
/* Cercles accueil - section 2 */
.deg-circle2 { position:absolute; top:50%; left:50%; height:170%; transform:translate(-50%, -50%);}
/* Cercles footer - section 2 */
.deg-circle-footer { position:absolute; top:50%; left:50%; height:250%; transform:translate(-50%, -50%);}
/* Cercles header par defaut */
.deg-circle-header { position:absolute; top:50%; left:50%; height:235%; transform:translate(-50%, -50%);}
/* Cercles qui sommes nous */
.deg-circle-qui { position:absolute; top:50%; left:50%; height:190%; transform:translate(-50%, -50%);}
/* Cercles menu */
.deg-circle-menu { position:absolute; top:50%; left:50%; height:150%; transform:translate(-50%, -50%);}
/* Mobile */
@media screen and (max-width: 900px) {
.deg-circle:nth-child(1) { height:50%;}
.deg-circle:nth-child(2) { height:65%;}
.deg-circle:nth-child(3) { height:80%;}
/* Cercles accueil - section 2 */
.deg-circle2 { height:100%;}
/* Cercles header par defaut */
.deg-circle-header { height:150%;}
/* Cercles qui sommes nous */
.deg-circle-qui { height:110%;}
}
/* Masques avancés */
.mask-holder { width:100%; height:100%;}
.mask-holder .mask-back { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.mask-holder .mask-mid { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; background-color:white; -webkit-mix-blend-mode:darken; mix-blend-mode:darken;}
.mask-holder .mask-mid .mask-content { position:absolute; top:0; left:0; width:100%; height:100%; background-color:var(--color-black); overflow:hidden; -webkit-mix-blend-mode:lighten; mix-blend-mode:lighten;}
/* Menu */
#btns-shortcut.first-active .btns-container > a:nth-child(1) { animation:0.5s ease-in-out 0s translate-btn-fromright-1-rev both; -webkit-animation:0.5s ease-in-out 0s translate-btn-fromright-1-rev both;}
#btns-shortcut.active .btns-container > a:nth-child(1) { animation:0.5s ease-in-out 1s translate-btn-fromright-1 both; -webkit-animation:0.5s ease-in-out 1s translate-btn-fromright-1 both;}
#btns-shortcut.first-active .btns-container > a:nth-child(2) { animation:0.5s ease-in-out 0s translate-btn-fromright-2-rev both; -webkit-animation:0.5s ease-in-out 0s translate-btn-fromright-2-rev both;}
#btns-shortcut.active .btns-container > a:nth-child(2) { animation:0.5s ease-in-out 1s translate-btn-fromright-2 both; -webkit-animation:0.5s ease-in-out 1s translate-btn-fromright-2 both;}
#btns-shortcut.first-active .btns-container > a:nth-child(3) { animation:0.5s ease-in-out 0s translate-btn-fromright-3-rev both; -webkit-animation:0.5s ease-in-out 0s translate-btn-fromright-3-rev both;}
#btns-shortcut.active .btns-container > a:nth-child(3) { animation:0.5s ease-in-out 1s translate-btn-fromright-3 both; -webkit-animation:0.5s ease-in-out 1s translate-btn-fromright-3 both;}
#btns-shortcut.first-active #btn-mobile-unfold { animation:0.5s ease-in-out 0s translate-btn-fromright-4-rev both; -webkit-animation:0.5s ease-in-out 0s translate-btn-fromright-4-rev both;}
#btns-shortcut.active #btn-mobile-unfold { animation:0.5s ease-in-out 1s translate-btn-fromright-4 both; -webkit-animation:0.5s ease-in-out 1s translate-btn-fromright-4 both;}
#menu.first-active { animation:0.5s ease-in-out 1s fade-out both; -webkit-animation:0.5s ease-in-out 1s fade-out both;}
#menu.active { animation:0.5s ease-in-out 0.75s fade-in both; -webkit-animation:0.5s ease-in-out 0.75s fade-in both;}
#menu.first-active .deg-circle-menu:nth-child(1) .layer-rotate { animation:0.5s ease-in-out 0.75s menu-rotate-1-inv both; -webkit-animation:0.5s ease-in-out 0.75s menu-rotate-1-inv both;}
#menu.active .deg-circle-menu:nth-child(1) .layer-rotate { animation:0.5s ease-in-out 0.75s menu-rotate-1 both; -webkit-animation:0.5s ease-in-out 0.75s menu-rotate-1 both;}
#menu.first-active .deg-circle-menu:nth-child(2) .layer-rotate { animation:0.5s ease-in-out 0.75s menu-rotate-2-inv both; -webkit-animation:0.5s ease-in-out 0.75s menu-rotate-2-inv both;}
#menu.active .deg-circle-menu:nth-child(2) .layer-rotate { animation:0.5s ease-in-out 0.75s menu-rotate-2 both; -webkit-animation:0.5s ease-in-out 0.75s menu-rotate-2 both;}
#menu.first-active #menu-title { animation:0.5s ease-in-out 0.75s scale-in-inv both; -webkit-animation:0.5s ease-in-out 0.75s scale-in-inv both;}
#menu.active #menu-title { animation:0.5s ease-in-out 0.75s scale-in both; -webkit-animation:0.5s ease-in-out 0.75s scale-in both;}
#menu #menu-bar { transform-origin:center top; -webkit-transform-origin:center top; transform:scale(1, 0); -webkit-transform:scale(1, 0);}
#menu.first-active #menu-bar { animation:0.5s ease-in-out 0.75s scale-in-fromtop-inv both; -webkit-animation:0.5s ease-in-out 0.75s scale-in-fromtop-inv both;}
#menu.active #menu-bar { animation:0.5s ease-in-out 1s scale-in-fromtop both; -webkit-animation:0.5s ease-in-out 1s scale-in-fromtop both;}
/* Mobile */
@media screen and (max-width: 900px) {
#menu.first-active,
#menu.active { animation-delay:0.25s; -webkit-animation-delay:0.25s;}
}
/* ANIMATIONS */
/* Fade */
.anim.scale-in { transform:scale(0); -webkit-transform:scale(0);}
.anim.scale-in-fromtop { transform-origin:center top; -webkit-transform-origin:center top; transform:scale(1, 0); -webkit-transform:scale(1, 0);}
.anim.scale-in-fromleft { transform-origin:left center; -webkit-transform-origin:left center; transform:scale(0, 1); -webkit-transform:scale(0, 1);}
.anim.scale-in-fade-in-rotate { opacity:0.2; transform:scale(0) rotate(90deg); -webkit-transform:scale(0) rotate(90deg);}
.anim.scale-in-fade-in-rotate-inv { opacity:0.2; transform:scale(0) rotate(-90deg); -webkit-transform:scale(0) rotate(-90deg);}
.anim.bounce { transform-origin:center center; -webkit-transform-origin:center center; transform:rotate(0deg); -webkit-transform:rotate(0deg); animation:0.5s ease-in-out 0s bounce both; -webkit-animation:0.5s ease-in-out 0s bounce both;}
.anim.midair { animation:2s ease-in-out 0s midair both alternate infinite; -webkit-animation:2s ease-in-out 0s midair both alternate infinite;}
.anim.fade-in, .anim.fade-in-90, .anim.fade-in-fromright, .anim.fade-in-fromleft, .anim.fade-in-fromtop, .anim.fade-in-frombot,
.anim.fade-in-fromright-small, .anim.fade-in-fromleft-small, .anim.fade-in-fromtop-small, .anim.fade-in-frombot-small,
.anim.window-fromleft, .anim.window-fromright, .anim.window-fromtop, .anim.window-frombot,
.anim.circle-fromcenter, .anim.circle-fromcenterbot,
.anim.scale-out-fade-in { opacity:0;}
.anim.rotate-fade-out, .anim.intro-rotate { opacity:1; transform:rotate(0deg);}
.anim.intro-unfold { opacity:0; max-height:0; box-sizing:border-box; overflow:hidden;}
.anim.intro-fold { opacity:1; max-height:20em; box-sizing:border-box; overflow:hidden;}
.anim.translate-fromright { transform:translate(100%);}
.anim.translate-fromleft { transform:translate(-100%);}
.anim.translate-fromleft-more { transform:translate(-150%);}
.anim.translate-fromtop { transform:translateY(-100%);}
.anim.translate-frombot { transform:translateY(100%);}
.anim.enable-events { pointer-events:none;}
.seen .anim.scale-in, .seen.anim.scale-in { animation:1s cubic-bezier(0.33, 1, 0.68, 1) 0s scale-in both; -webkit-animation:1s cubic-bezier(0.33, 1, 0.68, 1) 0s scale-in both;}
.seen .anim.scale-in-fromtop, .seen.anim.scale-in-fromtop { animation:1s ease-out 0s scale-in-fromtop both; -webkit-animation:1s ease-out 0s scale-in-fromtop both;}
.seen .anim.scale-in-fromleft, .seen.anim.scale-in-fromleft { animation:1s ease-out 0s scale-in-fromleft both; -webkit-animation:1s ease-out 0s scale-in-fromleft both;}
.seen .anim.scale-out-fade-in, .seen.anim.scale-out-fade-in { animation:1s cubic-bezier(0.33, 1, 0.68, 1) 0s scale-out-fade-in both; -webkit-animation:1s cubic-bezier(0.33, 1, 0.68, 1) 0s scale-out-fade-in both;}
.seen .anim.fade-out, .seen.anim.fade-out { animation:1s ease-out 0s fade-out both; -webkit-animation:1s ease-out 0s fade-out both;}
.seen .anim.fade-in, .seen.anim.fade-in { animation:1s ease-out 0s fade-in both; -webkit-animation:1s ease-out 0s fade-in both;}
.seen .anim.fade-in-90, .seen.anim.fade-in-90 { animation:1s ease-out 0s fade-in-90 both; -webkit-animation:1s ease-out 0s fade-in-90 both;}
.seen .anim.scale-in-fade-in-rotate, .seen.anim.scale-in-fade-in-rotate { animation:1s ease-out 0s scale-in-fade-in-rotate both; -webkit-animation:1s ease-out 0s scale-in-fade-in-rotate both;}
.seen .anim.scale-in-fade-in-rotate-inv, .seen.anim.scale-in-fade-in-rotate-inv { animation:1s ease-out 0s scale-in-fade-in-rotate-inv both; -webkit-animation:1s ease-out 0s scale-in-fade-in-rotate-inv both;}
.seen .anim.window-fromleft, .seen.anim.window-fromleft { animation:1s ease-out 0s window-fromleft both; -webkit-animation:1s ease-out 0s window-fromleft both;}
.seen .anim.window-fromright, .seen.anim.window-fromright { animation:1s ease-out 0s window-fromright both; -webkit-animation:1s ease-out 0s window-fromright both;}
.seen .anim.window-fromtop, .seen.anim.window-fromtop { animation:1s ease-out 0s window-fromtop both; -webkit-animation:1s ease-out 0s window-fromtop both;}
.seen .anim.window-frombot, .seen.anim.window-frombot { animation:1s ease-out 0s window-frombot both; -webkit-animation:1s ease-out 0s window-frombot both;}
.seen .anim.fade-in-frombot, .seen.anim.fade-in-frombot { animation:1s ease-out 0s fade-in-frombot both; -webkit-animation:1s ease-out 0s fade-in-frombot both;}
.seen .anim.fade-in-fromtop, .seen.anim.fade-in-fromtop { animation:1s ease-out 0s fade-in-fromtop both; -webkit-animation:1s ease-out 0s fade-in-fromtop both;}
.seen .anim.fade-in-fromright, .seen.anim.fade-in-fromright { animation:1s ease-out 0s fade-in-fromright both; -webkit-animation:1s ease-out 0s fade-in-fromright both;}
.seen .anim.fade-in-fromleft, .seen.anim.fade-in-fromleft { animation:1s ease-out 0s fade-in-fromleft both; -webkit-animation:1s ease-out 0s fade-in-fromleft both;}
.seen .anim.fade-in-frombot-small, .seen.anim.fade-in-frombot-small { animation:1s ease-out 0s fade-in-frombot-small both; -webkit-animation:1s ease-out 0s fade-in-frombot-small both;}
.seen .anim.fade-in-fromtop-small, .seen.anim.fade-in-fromtop-small { animation:1s ease-out 0s fade-in-fromtop-small both; -webkit-animation:1s ease-out 0s fade-in-fromtop-small both;}
.seen .anim.fade-in-fromright-small, .seen.anim.fade-in-fromright-small { animation:1s ease-out 0s fade-in-fromright-small both; -webkit-animation:1s ease-out 0s fade-in-fromright-small both;}
.seen .anim.fade-in-fromleft-small, .seen.anim.fade-in-fromleft-small { animation:1s ease-out 0s fade-in-fromleft-small both; -webkit-animation:1s ease-out 0s fade-in-fromleft-small both;}
.seen .anim.fade-out-totop, .seen.anim.fade-out-totop { animation:1s ease-out 0s fade-out-totop both; -webkit-animation:1s ease-out 0s fade-out-totop both;}
.seen .anim.translate-fromtop, .seen.anim.translate-fromtop { animation:1s ease-out 0s translate-fromtop both; -webkit-animation:1s ease-out 0s translate-fromtop both;}
.seen .anim.translate-frombot, .seen.anim.translate-frombot { animation:1s ease-out 0s translate-frombot both; -webkit-animation:1s ease-out 0s translate-frombot both;}
.seen .anim.translate-fromright, .seen.anim.translate-fromright { animation:1s ease-out 0s translate-fromright both; -webkit-animation:1s ease-out 0s translate-fromright both;}
.seen .anim.translate-fromleft, .seen.anim.translate-fromleft { animation:1s ease-out 0s translate-fromleft both; -webkit-animation:1s ease-out 0s translate-fromleft both;}
.seen .anim.translate-fromleft-more, .seen.anim.translate-fromleft-more { animation:1s ease-out 0s translate-fromleft-more both; -webkit-animation:1s ease-out 0s translate-fromleft-more both;}
.seen .anim.circle-tocenter, .seen.anim.circle-tocenter { animation: 1s ease-out 0s circle-tocenter both; -webkit-animation: 1s ease-out 0s circle-tocenter both;}
.seen .anim.circle-fromcenter, .seen.anim.circle-fromcenter { animation: 1s ease-out 0s circle-fromcenter both; -webkit-animation: 1s ease-out 0s circle-fromcenter both;}
.seen .anim.circle-fromcenterbot, .seen.anim.circle-fromcenterbot { animation: 1s ease-out 0s circle-fromcenterbot both; -webkit-animation: 1s ease-out 0s circle-fromcenterbot both;}
.seen .anim.rotate-fade-out, .seen.anim.rotate-fade-out { animation:1s ease-out 0s rotate-fade-out both; -webkit-animation:1s ease-out 0s rotate-fade-out both;}
.seen .anim.intro-rotate-80, .seen.anim.intro-rotate-80 { animation:1s ease-out 0s intro-rotate-80 both; -webkit-animation:1s ease-out 0s intro-rotate-80 both;}
.seen .anim.intro-fold, .seen.anim.intro-fold { animation:1s ease-out 0s intro-fold both; -webkit-animation:1s ease-out 0s intro-fold both;}
.seen .anim.intro-unfold, .seen.anim.intro-unfold { animation:1s ease-out 0s intro-unfold both; -webkit-animation:1s ease-out 0s intro-unfold both;}
.seen .anim.enable-events, .seen.anim.enable-events { animation:1s ease-out 0s enable-events both; -webkit-animation:1s ease-out 0s enable-events both;}
.seen .anim.display-none, .seen.anim.display-none { animation:1s ease-out 0s display-none both; -webkit-animation:1s ease-out 0s display-none both;}
@media screen and (max-width: 900px) {
.anim.intro-fold { max-height:40em;}
.anim.translate-fromright.no-anim-mobile,
.anim.translate-fromleft.no-anim-mobile,
.anim.translate-fromleft-more.no-anim-mobile,
.anim.translate-fromtop.no-anim-mobile,
.anim.translate-frombot.no-anim-mobile { transform:none;}
}
/* Delais animations */
.seen .anim.timing-linear, .seen.anim.timing-linear { animation-timing-function:linear; -webkit-animation-timing-function:linear;}
.seen .anim.timing-ease-in-out, .seen.anim.timing-ease-in-out { animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out;}
.seen .anim.timing-bezier, .seen.anim.timing-bezier { animation-timing-function:cubic-bezier(0.42, 0, 0, 1.02); -webkit-animation-timing-function:cubic-bezier(0.42, 0, 0, 1.02);}
.seen .anim.faster, .seen.anim.faster { animation-duration:0.25s; -webkit-animation-duration:0.25s;}
.seen .anim.fast, .seen.anim.fast { animation-duration:0.5s; -webkit-animation-duration:0.5s;}
.seen .anim.midslow, .seen.anim.midslow { animation-duration:1.5s; -webkit-animation-duration:1.5s;}
.seen .anim.slow, .seen.anim.slow { animation-duration:2s; -webkit-animation-duration:2s;}
.seen .anim.slower, .seen.anim.slower { animation-duration:3s; -webkit-animation-duration:3s;}
.seen .anim.slowest, .seen.anim.slowest { animation-duration:4s; -webkit-animation-duration:4s;}
.seen .anim.delay-0-25, .seen.anim.delay-0-25 { animation-delay:0.25s; -webkit-animation-delay:0.25s;}
.seen .anim.delay-0-5, .seen.anim.delay-0-5 { animation-delay:0.5s; -webkit-animation-delay:0.5s;}
.seen .anim.delay-0-75, .seen.anim.delay-0-75 { animation-delay:0.75s; -webkit-animation-delay:0.75s;}
.seen .anim.delay-1, .seen.anim.delay-1 { animation-delay:1s; -webkit-animation-delay:1s;}
.seen .anim.delay-1-25, .seen.anim.delay-1-25 { animation-delay:1.25s; -webkit-animation-delay:1.25s;}
.seen .anim.delay-1-5, .seen.anim.delay-1-5 { animation-delay:1.5s; -webkit-animation-delay:1.5s;}
.seen .anim.delay-1-75, .seen.anim.delay-1-75 { animation-delay:1.75s; -webkit-animation-delay:1.75s;}
.seen .anim.delay-2, .seen.anim.delay-2 { animation-delay:2s; -webkit-animation-delay:2s;}
.seen .anim.delay-2-25, .seen.anim.delay-2-25 { animation-delay:2.25s; -webkit-animation-delay:2.25s;}
.seen .anim.delay-2-5, .seen.anim.delay-2-5 { animation-delay:2.5s; -webkit-animation-delay:2.5s;}
.seen .anim.delay-2-75, .seen.anim.delay-2-75 { animation-delay:2.75s; -webkit-animation-delay:2.75s;}
.seen .anim.delay-3, .seen.anim.delay-3 { animation-delay:3s; -webkit-animation-delay:3s;}
.seen .anim.delay-3-25, .seen.anim.delay-3-25 { animation-delay:3.25s; -webkit-animation-delay:3.25s;}
.seen .anim.delay-3-5, .seen.anim.delay-3-5 { animation-delay:3.5s; -webkit-animation-delay:3.5s;}
.seen .anim.delay-3-75, .seen.anim.delay-3-75 { animation-delay:3.75s; -webkit-animation-delay:3.75s;}
.seen .anim.delay-4, .seen.anim.delay-4 { animation-delay:4s; -webkit-animation-delay:4s;}
.seen .anim.delay-4-25, .seen.anim.delay-4-25 { animation-delay:4.25s; -webkit-animation-delay:4.25s;}
.seen .anim.delay-4-5, .seen.anim.delay-4-5 { animation-delay:4.5s; -webkit-animation-delay:4.5s;}
.seen .anim.delay-4-75, .seen.anim.delay-4-75 { animation-delay:4.75s; -webkit-animation-delay:4.75s;}
.seen .anim.delay-5, .seen.anim.delay-5 { animation-delay:5s; -webkit-animation-delay:5s;}
/* Commun */
.preload:not(.loaded) .anim.onload, .anim.onload.preload:not(.loaded),
.triggerable:not(.triggered) .anim.ontrigger, .anim.triggerable.ontrigger:not(.triggered),
.triggerable:not(.triggered-1) .anim.ontrigger-1, .anim.triggerable.ontrigger-1:not(.triggered-1),
.triggerable:not(.triggered-2) .anim.ontrigger-2, .anim.triggerable.ontrigger-2:not(.triggered-2),
.triggerable:not(.triggered-3) .anim.ontrigger-3, .anim.triggerable.ontrigger-3:not(.triggered-3),
.triggerable:not(.triggered-4) .anim.ontrigger-4, .anim.triggerable.ontrigger-4:not(.triggered-4) { animation:none;}
@media screen and (max-width: 900px) {
.no-anim-mobile { animation:none !important; opacity:1 !important;}
.anim.no-anim-mobile:after { animation:none !important; opacity:1 !important;}
.seen .anim.delay-0-mobile, .seen.anim.delay-0-mobile, .seen .anim.delay-0-mobile:after, .seen.anim.delay-0-mobile:after { animation-delay:0s; -webkit-animation-delay:0s;}
.seen .anim.delay-0-25-mobile, .seen.anim.delay-0-25-mobile, .seen .anim.delay-0-25-mobile:after, .seen.anim.delay-0-25-mobile:after { animation-delay:0.25s; -webkit-animation-delay:0.25s;}
.seen .anim.delay-0-5-mobile, .seen.anim.delay-0-5-mobile, .seen .anim.delay-0-5-mobile:after, .seen.anim.delay-0-5-mobile:after { animation-delay:0.5s; -webkit-animation-delay:0.5s;}
.seen .anim.delay-0-75-mobile, .seen.anim.delay-0-75-mobile, .seen .anim.delay-0-75-mobile:after, .seen.anim.delay-0-75-mobile:after { animation-delay:0.75s; -webkit-animation-delay:0.75s;}
}
/* Animation spéciale (transitions) */
.anim.draw svg path { opacity:0;}
.seen .anim.draw:not(.onload) svg path, .seen.anim.draw:not(.onload) svg path,
.seen .anim.draw:not(.onload) svg circle, .seen.anim.draw:not(.onload) svg circle,
.loaded .anim.draw.onload svg path, .anim.draw.onload.loaded svg path,
.loaded .anim.draw.onload svg circle, .anim.draw.onload.loaded svg circle { opacity:1; transition:stroke-dashoffset 2s ease-in-out 0s, stroke-dasharray 2s ease-in-out 0s; -webkit-transition:stroke-dashoffset 2s ease-in-out 0, stroke-dasharray 2s ease-in-out 0s; stroke-dashoffset: 0 !important;}
/* FOOTER */
footer { width:100%;}
/* Formulaires WPCF7 */
.wpcf7 { width:100%; margin:0 auto;}
.wpcf7-form.submitting .wpcf7-submit { pointer-events:none !important; opacity:0.6;}
.wpcf7 label { display:block; width:100%;}
/* .wpcf7 label .label { display:none;} */
.wpcf7 label .input input,
.wpcf7 label .input textarea { padding:.5em 1em; border-radius:.5em;}
.wpcf7 label .input textarea { line-height:1.25em; padding:.5em 1em; overflow:hidden; margin-top:0.120em;}
.wpcf7 label .input input::-webkit-input-placeholder,
.wpcf7 label .input textarea::-webkit-input-placeholder { color:#FFFFFFB2; text-transform:none;}
.wpcf7 label .input input::-ms-input-placeholder,
.wpcf7 label .input textarea::-ms-input-placeholder { color:#FFFFFFB2; text-transform:none;}
.wpcf7 label .input input:-ms-input-placeholder,
.wpcf7 label .input textarea:-ms-input-placeholder { color:#FFFFFFB2; text-transform:none;}
.wpcf7 label .input input::-moz-placeholder,
.wpcf7 label .input textarea::-moz-placeholder { color:#FFFFFFB2; text-transform:none;}
.wpcf7 label .input input:-moz-placeholder,
.wpcf7 label .input textarea:-moz-placeholder { color:#FFFFFFB2; text-transform:none;}
.wpcf7 label .input input::placeholder,
.wpcf7 label .input textarea::placeholder { color:#FFFFFFB2; text-transform:none;}
.wpcf7 label .input input.wpcf7-not-valid::-webkit-input-placeholder,
.wpcf7 label .input textarea.wpcf7-not-valid::-webkit-input-placeholder { color:#dc3232; opacity:1;}
.wpcf7 label .input input.wpcf7-not-valid::-ms-input-placeholder,
.wpcf7 label .input textarea.wpcf7-not-valid::-ms-input-placeholder { color:#dc3232; opacity:1;}
.wpcf7 label .input input.wpcf7-not-valid::-moz-placeholder,
.wpcf7 label .input textarea.wpcf7-not-valid::-moz-placeholder { color:#dc3232; opacity:1;}
.wpcf7 label .input input.wpcf7-not-valid:-moz-placeholder,
.wpcf7 label .input textarea.wpcf7-not-valid:-moz-placeholder { color:#dc3232; opacity:1;}
.wpcf7 label .input input.wpcf7-not-valid::placeholder,
.wpcf7 label .input textarea.wpcf7-not-valid::placeholder { color:#dc3232; opacity:1;}
.wpcf7 label .input input.wpcf7-not-valid,
.wpcf7 label .input select.wpcf7-not-valid,
.wpcf7 label .input textarea.wpcf7-not-valid { color:#dc3232;}
/* .wpcf7 label .wpcf7-not-valid-tip { position:absolute; top:0; left:0.5em; bottom:0; right:0.5em; font-size:87.5%; font-weight:500; color:red; background-color:white; line-height:1em; animation:1s ease-out 1.5s fade-out both; -webkit-animation:1s ease-out 1.5s fade-out both; pointer-events:none;} */
/* Réalisations Modal */
.realisation-modal-overlay { display:none; background-color: rgba(0, 0, 0, 0.3); }
.realisation-modal-overlay:not(.hidden) { display:block; }
.realisation-modal-overlay.hidden { display:none; }
.realisation-modal { display:none; }
.realisation-modal:not(.hidden) { display:flex; }
.realisation-modal.hidden { display:none; }
.realisation-modal { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:70%; max-height:80vh; object-fit:contain; align-items:center; justify-content:center; overflow:hidden; width: 70%; height: 100%; }
.realisation-modal #realisation-modal-image { max-width:100%; max-height:calc(80vh - 2em); width:auto; height:auto; object-fit:contain; }
.realisation-modal-close { border:none; padding:0; background:none; position:absolute; top:0.5em; right:0.5em; z-index:10; }
.realisation-modal-close:hover { opacity:0.7; transition:opacity 0.2s ease; }
.hover-opacity-0-8:hover { opacity:0.8; }
@media screen and (max-width: 900px) {
.realisation-modal { position:fixed; max-width:calc(100vw - 0.5em); max-height:100vh; }
.realisation-modal #realisation-modal-image { max-width:calc(100vw - 1em); max-height:calc(100vh - 3em); }
}
.wpcf7 label.file { background-color:white; border-radius:1em; overflow:hidden;}
.wpcf7 label.file .input input { overflow:hidden; width:1px; height:1px; opacity:0; position:absolute;}
.wpcf7 label.file .label { display:block; width:100%; height:100%; color:#D9D9D9; opacity:0.6; font-size:87.5%; font-weight:500; line-height:1.25em; padding:0 2em;}
.wpcf7 label.file .browse { cursor:pointer; position:absolute; font-size:87.5%; font-weight:500; line-height:1.25em; letter-spacing:0.09em; right:0; top:0; height:100%; background-color:#D9D9D9; box-sizing:border-box; padding:0 2em; color:white; transition:background-color 0.25s; -webkit-transition:background-color 0.25s;}
.wpcf7 label.file .browse:hover { background-color:var(--color-black);}
.wpcf7 label .input select,
.walcf7-timepicker,
.walcf7-datepicker { color: #FFFFFFB2; border: none; width:100%; padding: .5em 1em; border-radius: .5em; background-color: var(--color-white); background-position:center center; background-size:contain; background-repeat:no-repeat; background-size:12px; background-position:right 2em center; background-image:url('img/btn_dropdown.svg') !important;}
.wpcf7 label + .radio { margin-top:2.5em;}
.wpcf7 .wpcf7-list-item { margin:0; padding:0;}
.wpcf7 .radio { display:flex; padding-bottom:2em;}
.wpcf7 .radio > .input { flex:1; display:block; user-select:none;}
.wpcf7 .radio .wpcf7-form-control-wrap,
.wpcf7 .radio .wpcf7-form-control-wrap .wpcf7-form-control { width:100%;}
.wpcf7 .radio .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item { float:left; width:-webkit-calc(100% / 3); width:calc(100% / 3); height:3em; padding-left:1.25em; box-sizing:border-box;}
.wpcf7 .radio > .label { font-size:87.5%; color:#ED424C; display:block; width:-webkit-calc(((100vw - (13 * 1.25em)) / 14)); width:calc(((100vw - (13 * 1.25em)) / 14));}
.wpcf7 .radio > .input label input { position:absolute; top:0.1em; left:0; width:1em; height:1em; background-color:white; padding:0; margin:0; border:1px solid white; border-radius:50%; cursor:none !important; transition:background-color 0.25s, border-color 0.25s;}
.wpcf7 .radio > .input label:hover input { background-color:rgba(0,0,0,0); border-color:#ED424C;}
.wpcf7 .radio > .input label input:checked { background-color:#ED424C; border:1px solid #ED424C;}
.wpcf7 .radio > .input label input .wpcf7-list-item-label { transition:color 0.25s;}
.wpcf7 .radio > .input label input:checked + .wpcf7-list-item-label { color:#ED424C;}
.wpcf7 .radio > .input label .wpcf7-list-item-label { display:block; font-size:75%; padding-left:2.25em; padding-top:0.175em; cursor:none !important;}
.wpcf7 .text { margin-top:1em; color:white;}
.wpcf7 .submit { margin-top:1em;}
.wpcf7 .submit input { width: fit-content; text-transform: uppercase; padding:1em 5em; color:white; cursor:pointer; background: var(--color-accent); transition:background-color 0.25s, color 0.25s, border-color 0.25s; border-radius:.5em;}
.wpcf7 .wpcf7-form:not(.submitting) .submit input:hover { background-color:var(--color-accent-deep);}
.wpcf7 .wpcf7-spinner { display:none !important; position:absolute; left:0; top:0; margin:0;}
.wpcf7 .wpcf7-response-output { display:none; position:absolute; top:100%; left:0; width:100%; border:none; padding:0 !important; margin-top:1em !important;}
.wpcf7 .invalid .wpcf7-response-output { border:none; color:#FF7600; padding:0;}
.wpcf7 .sent .wpcf7-response-output { border-color:white !important; color:white;}
/* .wpcf7 p.required { margin-top: 1em; font-size:80%; color: white;} */
/* Fond sombre */
.dark-bg .wpcf7-form .submit input { color:white; border-color:white;}
.dark-bg .wpcf7-form:not(.submitting) .submit input:hover { background-color:white; color:var(--color-black);}
/* Mobile */
@media screen and (max-width: 900px) {
.wpcf7 label .wpcf7-not-valid-tip,
.wpcf7 label .input input,
.wpcf7 label .input textarea,
.wpcf7 label .input select,
.wpcf7 label.file .label,
.wpcf7 label.file .browse { font-size:100%;}
.wpcf7 label .wpcf7-not-valid-tip { padding-top:0.1em;}
.wpcf7 .submit input { padding: .5em;}
.wpcf7 label .input input,
.wpcf7 label .input textarea,
.wpcf7 label .input select { padding-left:1em; padding-right:1em; text-overflow: ellipsis; background-position:right 1.5em center;}
.wpcf7 p.required { font-size:105%;}
}
/* RECAPTCHA */
.grecaptcha-badge { visibility: hidden;}
.wpcf7-form .captcha-alert { font-size:75%; opacity:0.6; max-width:calc(100% - 4em); margin:0 auto; text-align:center; margin-top:2em; color:white;}
.wpcf7-form .captcha-alert a { text-decoration:underline;}
/* Mobile */
@media screen and (max-width: 900px) {
.wpcf7-form .captcha-alert { font-size:100%;}
}
/* Fomulaires de tri */
/* Champ texte */
.search-filters input[type="text"] { padding: .5em; border-radius: .5em;}
.search-filters input[type="text"]::-webkit-input-placeholder { color:#D9D9D9; text-transform:uppercase;}
.search-filters input[type="text"]::-ms-input-placeholder { color:#D9D9D9; text-transform:uppercase;}
.search-filters input[type="text"]:-ms-input-placeholder { color:#D9D9D9; text-transform:uppercase;}
.search-filters input[type="text"]::-moz-placeholder { color:#D9D9D9; text-transform:uppercase;}
.search-filters input[type="text"]:-moz-placeholder { color:#D9D9D9; text-transform:uppercase;}
.search-filters input[type="text"]::placeholder { color:#D9D9D9; text-transform:uppercase;}
/* Fake select */
.fake-select { color:inherit; width:100%; font-size:87.5%; font-family:inherit; display:inline-block; padding:0; resize:none; border:none; font-weight:inherit; letter-spacing:inherit; box-sizing:border-box; user-select:none; cursor:pointer;}
.fake-select .container .header { font-family:inherit; font-weight:500; line-height:3.33em; width:100%; padding:1em 6em 1em 3em; resize:none; border:none; outline:none; color:var(--color-black); background-color:#ffffff; border-radius:1em; text-transform:uppercase;}
.fake-select .container .header:hover { color:#58a2f6;}
.fake-select .container .header:after { content:""; display:block; width:1.5em; height:1.5em; position:absolute; right:2em; top:50%; margin-top:-0.75em; background-repeat:no-repeat; background-position:center center; background-size:contain; background-image:url('img/btn_dropdown.svg');}
.fake-select .container .items { position:absolute; top:100%; left:0; width:100%; max-height:0; overflow:hidden; background-color:#ffffff; border-radius:1em; border-top-left-radius:0; border-top-right-radius:0;}
.fake-select .container .items:after { content:""; display:block; position:absolute; top:0; height:1px; width:100%; width:calc(100% - 6em); margin-left:3em; background-color:#58A2F6;}
.fake-select.opened .container .items { display:block; padding:1.5em 0; max-height:25em;}
.fake-select.opened .container .header { color:#D9D9D9; border-bottom-left-radius:0; border-bottom-right-radius:0;}
.fake-select.opened .container .header:after { transform:scaleY(-1);}
.fake-select .container .items .item { padding:0.5em 3em 0.5em 3em; font-weight:500; letter-spacing:0.04em; cursor:pointer; color:var(--color-black); text-transform:uppercase;}
.fake-select .container .items .item.selected { color:#E87587;}
.fake-select .container .items .item:hover:not(.selected) { opacity:1; color:#58a2f6;}
.fake-select .container .inner { height:100%; line-height:inherit; vertical-align:middle;}
svg.button-select{cursor: pointer;}
/* Mobile */
@media screen and (max-width: 900px) {
.search-filters input[type="text"],
.fake-select { font-size:135%;}
}
/* Bordures */
.border-none { border:none;}
.border-1 { border:1px solid rgba(0,0,0,0);}
.border-2 { border:2px solid rgba(0,0,0,0);}
.border-3 { border:3px solid rgba(0,0,0,0);}
.border-0-125em { border:0.125em solid rgba(0,0,0,0);}
.border-0-25em { border:0.25em solid rgba(0,0,0,0);}
.border-0-5em { border:0.5em solid rgba(0,0,0,0);}
.border-0-75em { border:0.75em solid rgba(0,0,0,0);}
.border-1em { border:1em solid rgba(0,0,0,0);}
.border-bot-0 { border-bottom:0 solid rgba(0,0,0,0);}
.border-bot-1 { border-bottom:1px solid rgba(0,0,0,0);}
.border-bot-2 { border-bottom:2px solid rgba(0,0,0,0);}
.border-bot-3 { border-bottom:3px solid rgba(0,0,0,0);}
.border-top-0 { border-top: unset;}
.border-top-1 { border-top:1px solid rgba(0,0,0,0);}
.border-top-2 { border-top:2px solid rgba(0,0,0,0);}
.border-top-3 { border-top:3px solid rgba(0,0,0,0);}
.border-right-1 { border-right:1px solid rgba(0,0,0,0);}
.border-right-2 { border-right:2px solid rgba(0,0,0,0);}
.border-right-3 { border-right:3px solid rgba(0,0,0,0);}
.border-left-1 { border-left:1px solid rgba(0,0,0,0);}
.border-dashed-bot-3 { border-bottom:3px dashed rgba(0,0,0,0);}
.border-dashed-right-3 { border-right:3px dashed rgba(0,0,0,0);}
.border-dashed-top-3 { border-top:3px dashed rgba(0,0,0,0);}
.rounded { border-radius:50%;}
.rounded-0-125em { border-radius:0.125em;}
.rounded-0-25em { border-radius:0.25em;}
.rounded-0-5em { border-radius:0.5em;}
.rounded-0-75em { border-radius:0.75em;}
.rounded-1em { border-radius:1em;}
.rounded-1-5em { border-radius:1.5em;}
.rounded-2em { border-radius:2em;}
.rounded-2-5em { border-radius:2.5em;}
.rounded-3em { border-radius:3em;}
.rounded-4em { border-radius:4em;}
.rounded-5em { border-radius:5em;}
.rounded-6em { border-radius:6em;}
.rounded-8em { border-radius:8em;}
.rounded-10em { border-radius:10em;}
.rounded-16em { border-radius:16em;}
.top-rounded { border-top-left-radius:50%; border-top-right-radius:50%;}
.top-rounded-0-5em { border-top-left-radius:0.5em; border-top-right-radius:0.5em;}
.top-rounded-1em { border-top-left-radius:1em; border-top-right-radius:1em;}
.top-rounded-6em { border-top-left-radius:6em; border-top-right-radius:6em;}
.bot-rounded { border-bottom-left-radius:50%; border-bottom-right-radius:50%;}
.bot-rounded-1em { border-bottom-left-radius:1em; border-bottom-right-radius:1em;}
.bot-rounded-2em { border-bottom-left-radius:2em; border-bottom-right-radius:2em;}
.bot-rounded-5em { border-bottom-left-radius:5em; border-bottom-right-radius:5em;}
.bot-rounded-40 { border-bottom-left-radius:40%; border-bottom-right-radius:40%;}
.bot-right-rounded-25em { border-bottom-right-radius:25em;}
.top-right-rounded-31em { border-top-right-radius:31em;}
.top-right-rounded-16em { border-top-right-radius:16em;}
.top-right-rounded-8em { border-top-right-radius:8em;}
.bot-right-rounded-16em { border-bottom-right-radius:16em;}
.bot-right-rounded-8em { border-bottom-right-radius:8em;}
.bot-left-rounded-1em { border-bottom-left-radius:1em;}
.bot-left-rounded-16em { border-bottom-left-radius:16em;}
.top-left-rounded-1em { border-top-left-radius:1em;}
.top-left-rounded-25em { border-top-left-radius:25em;}
.top-left-rounded-16em { border-top-left-radius:16em;}
.top-left-rounded-5em { border-top-left-radius:5em;}
.left-rounded-1em { border-top-left-radius:1em; border-bottom-left-radius:1em;}
.right-rounded-1em { border-top-right-radius:1em; border-bottom-right-radius:1em;}
.no-border-left { border-left:none;}
.no-border-right { border-right:none;}
.no-border-top { border-top:none;}
.no-border-bot { border-bottom:none;}
.active-border-0.active,
.hover-border-0:hover { border-radius:0;}
@media screen and (max-width: 900px) {
.border-top-1-mobile { border-top:1px solid rgba(0,0,0,0);}
.no-rounded-mobile { border-radius:0;}
.no-border-mobile { border:none;}
.no-border-left-mobile { border-left:none;}
.bot-rounded-2em-mobile { border-bottom-left-radius:2em; border-bottom-right-radius:2em;}
.top-rounded-2em-mobile { border-top-left-radius:2em; border-top-right-radius:2em;}
}
/* Basique mobile/thin */
.hide-mobile,
.hide-thin,
.hide-large { display:block;}
.hide-mobile.flexbox,
.hide-thin.flexbox,
.hide-large.flexbox { display:flex; display:-webkit-flex; display:-ms-flexbox;}
.hide-mobile.inline-block,
.hide-thin.inline-block,
.hide-large.inline-block { display:inline-block;}
.only-mobile,
.only-thin,
.only-large { display:none;}
@media screen and (max-width: 1600px) {
.hide-large,
.hide-large.inline-block,
.hide-large.flexbox { display:none;}
.only-large { display:block;}
.only-large.inline-block { display:inline-block;}
.only-large.flexbox { display:flex; display:-webkit-flex; display:-ms-flexbox;}
@media screen and (max-width: 1200px) {
.hide-thin,
.hide-thin.inline-block,
.hide-thin.flexbox { display:none;}
.only-thin { display:block;}
.only-thin.inline-block { display:inline-block;}
.only-thin.flexbox { display:flex; display:-webkit-flex; display:-ms-flexbox;}
@media screen and (max-width: 900px) {
.hide-mobile,
.hide-mobile.inline-block,
.hide-mobile.flexbox { display:none;}
.only-mobile { display:block;}
.only-mobile.inline-block { display:inline-block;}
.only-mobile.flexbox { display:flex; display:-webkit-flex; display:-ms-flexbox;}
}
}
}
/* MDPI */
@media screen and (max-height: 700px) and (min-width: 1000px) {
.hide-mdpi { display:none;}
.only-mdpi { display:block;}
}
.every { display:block !important;}
/* Opacité */
.opacity-0,
.active .active-parent-opacity-0,
.spe-parent.active .active-spe-parent-opacity-0,
.active > .active-direct-parent-opacity-0,
.sided-opacity-0.sided,
.sided .sided-parent-opacity-0,
.slick-disabled.slick-disabled-opacity-0,
.active-opacity-0.active { opacity:0;}
.opacity-15 { opacity:0.15;}
.opacity-20 { opacity:0.2;}
.opacity-30 { opacity:0.3;}
.opacity-40 { opacity:0.4;}
.hover-opacity-40:hover { opacity:0.4;}
.opacity-50 { opacity:0.5;}
.spe-parent:hover .hover-spe-parent-opacity-60,
.spe-parent.active .active-spe-parent-opacity-60,
.opacity-60,
.hover-opacity-60:hover { opacity:0.6;}
.opacity-65 { opacity:0.65;}
.opacity-70,
.hover-opacity-70:hover { opacity:0.7;}
.spe-parent.active .active-spe-parent-opacity-80,
.opacity-80 { opacity:0.8;}
.opacity-90,
.active-opacity-90.active { opacity:0.9;}
.active-opacity-85.active { opacity:0.85;}
.hover-opacity-100:hover,
.active-opacity-100.active,
.loaded-opacity-100.loaded,
.loaded .parent-loaded-opacity-100,
.persistant .persistant-opacity-100,
.persistant-opacity-100.persistant,
.hover-parent:hover .parent-hover-opacity-100,
.spe-parent:hover .hover-spe-parent-opacity-100,
.current .current-opacity-100 { opacity:1.0;}
.persistant-fade-from-bot { opacity:0; transform:translateY(100%); -webkit-transform:translateY(100%); transition:opacity 1s, transform 1s, -webkit-transform 1s; -webkit-transition:opacity 1s, transform 1s, -webkit-transform 1s;}
.persistant .persistant-fade-from-bot,
.persistant.persistant-fade-from-bot { opacity:1.0; transform:translateY(0); -webkit-transform:translateY(0);}
.active .active-parent-opacity-100,
.active > .active-direct-parent-opacity-100,
.spe-parent.active .active-spe-parent-opacity-100,
.spe-parent:hover .hover-spe-parent-opacity-100,
.active + .active-prev-opacity-100 { opacity:1.0;}
.pending-opacity-0-4.pending { opacity:0.4;}
/* Hovers */
@media screen and (min-width: 900px) {
.hover-opacity-50:hover { opacity:0.5;}
.hover-opacity-100:hover,
:hover + .after-hover-opacity-100 { opacity:1.0;}
}
/* Mobile */
@media screen and (max-width: 900px) {
.opacity-0-mobile { opacity:0;}
.active + .prev-active-opacity-100-mobile,
.opacity-100-mobile { opacity:1;}
}
/* Affiché/masqué */
.overflow-hidden { overflow:hidden;}
.overflow-y-hidden { overflow-y:hidden;}
.overflow-x-hidden { overflow-x:hidden;}
.overflow-overlay { overflow:overlay;}
.active .active-parent-hidden,
.spe-parent.active .active-spe-parent-hidden,
.hidden,
.triggered-2 .ontrigger-2-hidden, .ontrigger-2-hidden.triggered-2 { display:block; min-height:0; max-width:0; min-width:0; max-height:0; overflow:hidden; opacity:0; pointer-events:none;}
.triggered-3 .ontrigger-3-hidden, .ontrigger-3-hidden.triggered-3 { display:block; min-height:0; max-width:0; min-width:0; max-height:0; overflow:hidden; opacity:0; pointer-events:none;}
.hidden.flexbox { display:flex;}
.hidden.inline-block { display:inline-block;}
.flexbox > .hidden { position:absolute; display:none;}
.persistant-visible.persistant,
.active .active-parent-visible,
.active > .active-direct-parent-visible,
.spe-parent.active .active-spe-parent-visible,
.active-visible.active,
.triggered-3 .ontrigger-3-visible, .ontrigger-3-visible.triggered-3,
.visible { min-height:initial; max-width:initial; min-width:initial; max-height:initial; overflow:initial; opacity:1; pointer-events:inherit;}
@media screen and (max-width: 900px) {
.hidden-mobile { display:block; min-height:0; max-width:0; min-width:0; max-height:0; overflow:hidden; opacity:0; pointer-events:none;}
.flexbox > .hidden-mobile { position:absolute; display:none;}
.visible-mobile { min-height:initial; max-width:initial; min-width:initial; max-height:initial; overflow:initial; opacity:1; pointer-events:inherit;}
.flexbox > .visible-mobile { position:relative; display:block;}
.overflow-hidden-mobile { overflow:hidden;}
}
/* Fullpage */
.fp-holder { width:100%; height:100vh; overflow:hidden;}
.fp-container { will-change:transform;}
/* Enrolé/déroulé */
.folded { opacity:0; max-height:0; overflow:hidden; -webkit-transition:opacity 0.25s, max-height 0.25s; transition:opacity 0.25s, max-height 0.25s;}
.fold-parent:hover .parent-hover-unfold,
.hover-unfold { opacity:1; max-height:20em;}
@media screen and (max-width: 900px) {
.folded-mobile { opacity:0; width:0; max-height:0; overflow:hidden; -webkit-transition:none; transition:none;}
.active + .active-prev-unfold-mobile,
.unfolded-mobile { opacity:1; width:auto; max-height:20em; -webkit-transition:opacity 0.25s, max-height 0.25s; transition:opacity 0.25s, max-height 0.25s;}
}
/* Agrandi/diminué */
.scaled-0-7 { transform:scale(0.7); -webkit-transform:scale(0.7);}
.hover-scaled-1:hover,
.spe-parent:hover .hover-spe-parent-scaled-1,
.scaled-1 { transform:scale(1); -webkit-transform:scale(1);}
.spe-parent:hover .hover-spe-parent-scaled-1-1,
.scaled-1-1,
.hover-scaled-1-1:hover { transform:scale(1.1); -webkit-transform:scale(1.1); transition: transform 0.3s ease;}
.scaled-1-25,
.hover-scaled-1-25:hover { transform:scale(1.25); -webkit-transform:scale(1.25);}
.scaled-1-5,
.hover-scaled-1-5:hover { transform:scale(1.5); -webkit-transform:scale(1.5);}
@media screen and (max-width: 768px) {
.scaled-1-mobile { transform:(scale(1)); -webkit-transform:scale(1);}
}
/* Tourné */
.rotated--8 { transform:rotate(-8deg); -webkit-transform:rotate(-8deg);}
.rotated--15 { transform:rotate(-15deg); -webkit-transform:rotate(-15deg);}
.rotated--80 { transform:rotate(-80deg); -webkit-transform:rotate(-80deg);}
.rotated-0-1 { transform:rotate(0.1deg); -webkit-transform:rotate(0.1deg);}
.rotated-6 { transform:rotate(6deg); -webkit-transform:rotate(6deg);}
.rotated-15 { transform:rotate(15deg); -webkit-transform:rotate(15deg);}
.rotated-24 { transform:rotate(24deg); -webkit-transform:rotate(24deg);}
.rotated-45,
.spe-parent.active .active-spe-parent-rotated-45 { transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.rotated-90 { transform: rotate(90deg);}
.rotated-144 { transform: rotate(144deg);}
.rotated-170 { transform: rotate(170deg);}
.rotated-180 { transform: rotate(180deg);}
.rotated-216 { transform: rotate(216deg);}
.rotated-270 { transform: rotate(270deg);}
.rotated-325 { transform: rotate(325deg);}
.rotated-341 { transform: rotate(341deg);}
.rotated-355 { transform: rotate(355deg);}
@media screen and (max-width: 900px) {
.rotated-90-mobile { transform: rotate(90deg);}
}
/* Souligné */
.underline { text-decoration:underline;}
.hover-underline:hover { text-decoration:underline;}
/* Barré */
.line-through { text-decoration: line-through;}
/* Italique */
.italic { font-style:italic;}
/* Graisses — la charte EVMT n'en retient que DEUX sur l'axe wght de Bricolage Grotesque :
200 (ExtraLight) pour tout le texte courant, 500 (Medium) pour tout ce qui doit être gras.
Les anciens noms de classes (light, semibold, bold…) sont conservés pour ne pas casser les
templates, mais ils retombent tous sur l'une des deux graisses. Ne pas réintroduire de
valeur intermédiaire : n'utiliser que .extralight / .weight-200 et .medium / .weight-500. */
/* 200 — ExtraLight : texte courant, chapos, méga-texte */
.weight-100,
.weight-200, .extralight,
.light,
.standard { font-weight:200;}
/* 500 — Medium : titres, mises en avant, tout ce qui est « gras » */
.weight-500,
.medium, .medium-600, .semibold,
.bold, .blackbold,
.hover-medium:hover { font-weight:500;}
/* Line height */
.line-height-0-6 { line-height:0.6em;}
.line-height-0-8 { line-height:0.8em;}
.line-height-0-9 { line-height:0.9em;} /* 90% — méga-texte / citation */
.line-height-1 { line-height:1em;} /* 100% — titres, CTA, tags */
.line-height-1-33 { line-height:1.3333em;} /* 32/24 — texte M */
.line-height-1-5 { line-height:1.5em;} /* 24/16 texte S, 33/22 H3 */
/* Letter spacing — charte EVMT : -2px (via les .t-*) et 0. Les positives (0 usage) purgées. */
.spacing-0 { letter-spacing:0;}
.spacing--200 { letter-spacing:-2px;} /* littéral : ne suit pas les paliers hi-dpi, préférer les .t-* */
.spacing--100 { letter-spacing:-1px;}
/* Autoellipse */
.autoellipsis div { font-weight:inherit; line-height:inherit; font-size:inherit; letter-spacing:inherit;}
/* Pictos intégré */
.picto-center:not(.abs) { position:relative;}
.picto-center svg { position:absolute; height:50%; width:50%; top:25%; left:25%;}
.picto-center.small svg { height:25%; width:25%; top:37.5%; left:37.5%;}
/* MASTER TEMPLATE */
#root-container { position:relative; display:block; width:100%;}
#main-container { position:relative; display:block; width:100%; min-height:100vh;}
main { position:relative; display:block;}
/* Sections */
section { position:relative; width:100%;}
/* TRANSITIONS */
.transition-color { transition:color 0.25s, background-color 0.25s, fill 0.25s, stroke 0.25s, border-color 0.25s; -webkit-transition:color 0.25s, background-color 0.25s, fill 0.25s, stroke 0.25s, border-color 0.25s;}
.transition-border-color { transition:border-color 0.25s; -webkit-transition:border-color 0.25s;}
.transition-t-color { transition:color 0.25s; -webkit-transition:color 0.25s;}
.transition-bg-color { transition:background-color 0.25s; -webkit-transition:background-color 0.25s;}
.transition-border-bg-color { transition:background-color 0.25s, border-color 0.25s; -webkit-transition:background-color 0.25s, border-color 0.25s;}
.transition-p-color svg path,
.transition-p-color svg rect,
.transition-p-color svg circle { transition:fill 0.25s, stroke 0.25s; -webkit-transition:fill 0.25s, stroke 0.25s;}
.transition-actions-btn { transition:background-color 0.25s, box-shadow 0.25s, border-color 0.25s; -webkit-transition:background-color 0.25s, box-shadow 0.25s, border-color 0.25s;}
.transition-transform { -webkit-transition:-webkit-transform 0.25s, transform 0.25s; transition:-webkit-transform 0.25s, transform 0.25s;}
.transition-transform-bg-color { -webkit-transition:-webkit-transform 0.25s, transform 0.25s, background-color 0.25s; transition:-webkit-transform 0.25s, transform 0.25s, background-color 0.25s;}
.transition-border-radius { -webkit-transition:border-radius 0.25s; transition:border-radius 0.25s;}
.transition-visibility { transition:opacity 1s; -webkit-transition:opacity 1s;}
.transition-scale { transition:transform 0.25s; -webkit-transition:transform 0.25s;}
.transition-opacity { transition:opacity 0.25s; -webkit-transition:opacity 0.25s;}
.transition-height { transition:height 0.25s; -webkit-transition:height 0.25s;}
.transition-height-opacity { transition:height 0.25s, opacity 0.25s; -webkit-transition:height 0.25s, opacity 0.25s;}
.transition-width { transition:width 0.25s; -webkit-transition:width 0.25s;}
.transition-margin-width { transition:margin 0.25s, width 0.25s; -webkit-transition:margin 0.25s, width 0.25s;}
.transition-left-top { transition:left 0.25s, top 0.25s; -webkit-transition:left 0.25s, top 0.25s;}
.transition-margin { transition:margin 0.25s; -webkit-transition:margin 0.25s;}
.transition-filter { transition:filter 0.25s, -webkit-filter 0.25s; -webkit-transition:filter 0.25s, -webkit-filter 0.25s;}
.transition-padding { transition:padding 0.25s; -webkit-transition:padding 0.25s;}
.transition-padding-color { transition:padding 0.25s, color 0.25s, background-color 0.25s, fill 0.25s, stroke 0.25s, border-color 0.25s; -webkit-transition:padding 0.25s, color 0.25s, background-color 0.25s, fill 0.25s, stroke 0.25s, border-color 0.25s;}
.transition-padding-bg-color { transition:padding 0.25s, background-color 0.25s; -webkit-transition:padding 0.25s, background-color 0.25s;}
/* Délais transitions */
.active > .active-direct-parent-transition-delay-0-25,
.transition-delay-0-25 { transition-delay:0.25s !important; -webkit-transition-delay:0.25s !important;}
.transition-delay-0-5 { transition-delay:0.5s !important; -webkit-transition-delay:0.5s !important;}
.transition-delay-0-75 { transition-delay:0.75s !important; -webkit-transition-delay:0.75s !important;}
/* Vitesse transitions */
.transition-fast { transition-duration:0.15s !important; -webkit-transition-duration:0.15s !important;}
.transition-slow { transition-duration:0.5s !important; -webkit-transition-duration:0.5s !important;}
.transition-slower { transition-duration:0.75s !important; -webkit-transition-duration:0.75s !important;}
.active > .active-direct-parent-transition-slower,
.transition-slower { transition-duration:0.75s !important; -webkit-transition-duration:0.75s !important;}
.transition-slowest { transition-duration:1s !important; -webkit-transition-duration:1s !important;}
.transition-grayscale { transition:filter 0.25s; -webkit-transition:filter 0.25s;}
/* Scrollable */
.scrollable { overflow:hidden; overflow-y:auto;}
.scrollable-x { overflow:hidden; overflow-x:auto;}
.snappable { scroll-snap-align:center;}
.hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none;}
.hide-scrollbar::-webkit-scrollbar { display:none;}
/* Mobile */
@media screen and (max-width: 900px) {
.scrollable-x.snap-mobile { scroll-snap-type:x mandatory;}
.no-transform-mobile { transform:none; -webkit-transform:none;}
}
/* ANIMATIONS */
/* Apparition/disparition en fondu depuis un côté */
@keyframes fade-in-fromleft {
0% { opacity:0; -webkit-transform: translate(-5em); -moz-transform: translate(-5em); -ms-transform: translate(-5em); -o-transform: translate(-5em); transform: translate(-5em);}
100% { opacity:1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes fade-in-fromleft {
0% { opacity:0; -webkit-transform: translate(-5em); -moz-transform: translate(-5em); -ms-transform: translate(-5em); -o-transform: translate(-5em); transform: translate(-5em);}
100% { opacity:1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@keyframes fade-in-fromright {
0% { opacity:0; -webkit-transform: translate(5em); -moz-transform: translate(5em); -ms-transform: translate(5em); -o-transform: translate(5em); transform: translate(5em);}
100% { opacity:1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes fade-in-fromright {
0% { opacity:0; -webkit-transform: translate(5em); -moz-transform: translate(5em); -ms-transform: translate(5em); -o-transform: translate(5em); transform: translate(5em);}
100% { opacity:1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@keyframes fade-in-fromtop {
0% { opacity:0; -webkit-transform: translateY(-5em); -moz-transform: translateY(-5em); -ms-transform: translateY(-5em); -o-transform: translateY(-5em); transform: translateY(-5em);}
100% { opacity:1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@-webkit-keyframes fade-in-fromtop {
0% { opacity:0; -webkit-transform: translateY(-5em); -moz-transform: translateY(-5em); -ms-transform: translateY(-5em); -o-transform: translateY(-5em); transform: translateY(-5em);}
100% { opacity:1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@keyframes fade-in-frombot {
0% { opacity:0; -webkit-transform: translateY(5em); -moz-transform: translateY(5em); -ms-transform: translateY(5em); -o-transform: translateY(5em); transform: translateY(5em);}
100% { opacity:1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@-webkit-keyframes fade-in-frombot {
0% { opacity:0; -webkit-transform: translateY(5em); -moz-transform: translateY(5em); -ms-transform: translateY(5em); -o-transform: translateY(5em); transform: translateY(5em);}
100% { opacity:1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@keyframes fade-in-fromleft-small {
0% { opacity:0; -webkit-transform: translate(-2em); -moz-transform: translate(-2em); -ms-transform: translate(-2em); -o-transform: translate(-2em); transform: translate(-2em);}
100% { opacity:1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes fade-in-fromleft-small {
0% { opacity:0; -webkit-transform: translate(-2em); -moz-transform: translate(-2em); -ms-transform: translate(-2em); -o-transform: translate(-2em); transform: translate(-2em);}
100% { opacity:1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@keyframes fade-in-fromright-small {
0% { opacity:0; -webkit-transform: translate(2em); -moz-transform: translate(2em); -ms-transform: translate(2em); -o-transform: translate(2em); transform: translate(2em);}
100% { opacity:1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes fade-in-fromright-small {
0% { opacity:0; -webkit-transform: translate(2em); -moz-transform: translate(2em); -ms-transform: translate(2em); -o-transform: translate(2em); transform: translate(2em);}
100% { opacity:1; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@keyframes fade-in-fromtop-small {
0% { opacity:0; -webkit-transform: translateY(-2em); -moz-transform: translateY(-2em); -ms-transform: translateY(-2em); -o-transform: translateY(-2em); transform: translateY(-2em);}
100% { opacity:1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@-webkit-keyframes fade-in-fromtop-small {
0% { opacity:0; -webkit-transform: translateY(-2em); -moz-transform: translateY(-2em); -ms-transform: translateY(-2em); -o-transform: translateY(-2em); transform: translateY(-2em);}
100% { opacity:1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@keyframes fade-in-frombot-small {
0% { opacity:0; -webkit-transform: translateY(2em); -moz-transform: translateY(2em); -ms-transform: translateY(2em); -o-transform: translateY(2em); transform: translateY(2em);}
100% { opacity:1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@-webkit-keyframes fade-in-frombot-small {
0% { opacity:0; -webkit-transform: translateY(2em); -moz-transform: translateY(2em); -ms-transform: translateY(2em); -o-transform: translateY(2em); transform: translateY(2em);}
100% { opacity:1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@keyframes fade-out-totop {
0% { opacity:1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
100% { opacity:0; -webkit-transform: translateY(-5em); -moz-transform: translateY(-5em); -ms-transform: translateY(-5em); -o-transform: translateY(-5em); transform: translateY(-5em);}
}
@-webkit-keyframes fade-out-totop {
0% { opacity:1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
100% { opacity:0; -webkit-transform: translateY(-5em); -moz-transform: translateY(-5em); -ms-transform: translateY(-5em); -o-transform: translateY(-5em); transform: translateY(-5em);}
}
@keyframes translate-fromtop {
0% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%);}
100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@-webkit-keyframes translate-fromtop {
0% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%);}
100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@keyframes translate-frombot {
0% { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%);}
100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@-webkit-keyframes translate-frombot {
0% { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%);}
100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
}
@keyframes translate-fromright {
0% { -webkit-transform: translate(100%); -moz-transform: translate(100%); -ms-transform: translate(100%); -o-transform: translate(100%); transform: translate(100%);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes translate-fromright {
0% { -webkit-transform: translate(100%); -moz-transform: translate(100%); -ms-transform: translate(100%); -o-transform: translate(100%); transform: translate(100%);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@keyframes translate-fromleft {
0% { -webkit-transform: translate(-100%); -moz-transform: translate(-100%); -ms-transform: translate(-100%); -o-transform: translate(-100%); transform: translate(-100%);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes translate-fromleft {
0% { -webkit-transform: translate(-100%); -moz-transform: translate(-100%); -ms-transform: translate(-100%); -o-transform: translate(-100%); transform: translate(-100%);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@keyframes translate-fromleft-more {
0% { -webkit-transform: translate(-150%); -moz-transform: translate(-150%); -ms-transform: translate(-150%); -o-transform: translate(-150%); transform: translate(-150%);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes translate-fromleft-more {
0% { -webkit-transform: translate(-150%); -moz-transform: translate(-150%); -ms-transform: translate(-150%); -o-transform: translate(-150%); transform: translate(-150%);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
/* Apparition par mise à l'échelle */
@keyframes scalefocus {
0% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
50% { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2);}
100% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
}
@-webkit-keyframes scalefocus {
0% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
50% { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2);}
100% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
}
@keyframes scale-in {
0% { -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); transform:scale(0);}
100% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
}
@-webkit-keyframes scale-in {
0% { -webkit-transform:scale(0);}
100% { -webkit-transform:scale(1);}
}
@keyframes scale-in-inv {
0% { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
100% { -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); transform:scale(0);}
}
@-webkit-keyframes scale-in-inv {
0% { -webkit-transform:scale(1);}
100% { -webkit-transform:scale(0);}
}
@keyframes scale-in-fromleft {
0% { -webkit-transform:scale(0, 1); -moz-transform:scale(0, 1); -ms-transform:scale(0, 1); transform:scale(0, 1);}
100% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); transform:scale(1, 1);}
}
@-webkit-keyframes scale-in-fromleft {
0% { -webkit-transform:scale(0, 1);}
100% { -webkit-transform:scale(1, 1);}
}
@keyframes scale-in-fromtop {
0% { -webkit-transform:scale(1, 0); -moz-transform:scale(1, 0); -ms-transform:scale(1, 0); transform:scale(1, 0);}
100% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); transform:scale(1, 1);}
}
@-webkit-keyframes scale-in-fromtop {
0% { -webkit-transform:scale(1, 0);}
100% { -webkit-transform:scale(1, 1);}
}
@keyframes scale-in-fromtop-inv {
0% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); transform:scale(1, 1);}
100% { -webkit-transform:scale(1, 0); -moz-transform:scale(1, 0); -ms-transform:scale(1, 0); transform:scale(1, 0);}
}
@-webkit-keyframes scale-in-fromtop-inv {
0% { -webkit-transform:scale(1, 1);}
100% { -webkit-transform:scale(1, 0);}
}
@keyframes scale-in-fade-in-rotate {
0% { opacity:0; -webkit-transform:scale(0) rotate(90deg); -moz-transform:scale(0) rotate(90deg); -ms-transform:scale(0) rotate(90deg); transform:scale(0) rotate(90deg);}
100% { opacity:1; -webkit-transform:scale(1) rotate(0); -moz-transform:scale(1) rotate(0); -ms-transform:scale(1) rotate(0); transform:scale(1) rotate(0);}
}
@-webkit-keyframes scale-in-fade-in-rotate {
0% { opacity:0; -webkit-transform:scale(0) rotate(90deg); -moz-transform:scale(0) rotate(90deg); -ms-transform:scale(0) rotate(90deg); transform:scale(0) rotate(90deg);}
100% { opacity:1; -webkit-transform:scale(1) rotate(0); -moz-transform:scale(1) rotate(0); -ms-transform:scale(1) rotate(0); transform:scale(1) rotate(0);}
}
@keyframes scale-in-fade-in-rotate-inv {
0% { opacity:0; -webkit-transform:scale(0) rotate(-90deg); -moz-transform:scale(0) rotate(-90deg); -ms-transform:scale(0) rotate(-90deg); transform:scale(0) rotate(-90deg);}
100% { opacity:1; -webkit-transform:scale(1) rotate(0); -moz-transform:scale(1) rotate(0); -ms-transform:scale(1) rotate(0); transform:scale(1) rotate(0);}
}
@-webkit-keyframes scale-in-fade-in-rotate-inv {
0% { opacity:0; -webkit-transform:scale(0) rotate(-90deg); -moz-transform:scale(0) rotate(-90deg); -ms-transform:scale(0) rotate(-90deg); transform:scale(0) rotate(-90deg);}
100% { opacity:1; -webkit-transform:scale(1) rotate(0); -moz-transform:scale(1) rotate(0); -ms-transform:scale(1) rotate(0); transform:scale(1) rotate(0);}
}
@keyframes scale-out-fade-in {
0% { opacity:0; -webkit-transform:scale(2); -moz-transform:scale(2); -ms-transform:scale(2); transform:scale(2);}
100% { opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
}
@-webkit-keyframes scale-out-fade-in {
0% { opacity:0; -webkit-transform:scale(2); -moz-transform:scale(2); -ms-transform:scale(2); transform:scale(2); opacity:0;}
100% { opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
}
/* Apparition fenetre */
@keyframes window-fromleft {
0% { opacity:1; clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);}
100% { opacity:1; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);}
}
@-webkit-keyframes window-fromleft {
0% { opacity:1; clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); -webkit-clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);}
100% { opacity:1; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);}
}
@keyframes window-fromright {
0% { opacity:1; clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%); -webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);}
100% { opacity:1; clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);}
}
@-webkit-keyframes window-fromright {
0% { opacity:1; clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%); -webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);}
100% { opacity:1; clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); -webkit-clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);}
}
@keyframes window-frombot {
0% { opacity:1; clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);}
100% { opacity:1; clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%); -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);}
}
@-webkit-keyframes window-frombot {
0% { opacity:1; clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);}
100% { opacity:1; clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%); -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);}
}
@keyframes window-fromtop {
0% { opacity:1; clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);}
100% { opacity:1; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
}
@-webkit-keyframes window-fromtop {
0% { opacity:1; clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);}
100% { opacity:1; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
}
/* Apparition cercle */
@keyframes circle-fromcenter {
0% { opacity:1; clip-path: circle(0% at 50% 50%); -webkit-clip-path: circle(0% at 50% 50%);}
99% { opacity:1; clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%);}
100% { opacity:1; clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%);}
}
@-webkit-keyframes circle-fromcenter {
0% { opacity:1; clip-path: circle(0% at 50% 50%); -webkit-clip-path: circle(0% at 50% 50%);}
99% { opacity:1; clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%);}
100% { opacity:1; clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%);}
}
@keyframes circle-fromcenterbot {
0% { opacity:1; clip-path: circle(0% at 50% 100%); -webkit-clip-path: circle(0% at 50% 100%);}
100% { opacity:1; clip-path: circle(150% at 50% 100%); -webkit-clip-path: circle(150% at 50% 100%);}
}
@-webkit-keyframes circle-fromcenterbot {
0% { opacity:1; clip-path: circle(0% at 50% 100%); -webkit-clip-path: circle(0% at 50% 100%);}
100% { opacity:1; clip-path: circle(150% at 50% 100%); -webkit-clip-path: circle(150% at 50% 100%);}
}
/* Disparition cercle */
@keyframes circle-tocenter {
0% { opacity:1; clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%);}
99% { opacity:1; clip-path: circle(0% at 50% 50%); -webkit-clip-path: circle(0% at 50% 50%);}
100% { opacity:0; clip-path: circle(0% at 50% 50%); -webkit-clip-path: circle(0% at 50% 50%);}
}
@-webkit-keyframes circle-tocenter {
0% { opacity:1; clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%);}
99% { opacity:1; clip-path: circle(0% at 50% 50%); -webkit-clip-path: circle(0% at 50% 50%);}
100% { opacity:0; clip-path: circle(0% at 50% 50%); -webkit-clip-path: circle(0% at 50% 50%);}
}
/* Fade */
@keyframes fade-in {
0% { opacity:0;}
100% { opacity:1;}
}
@-webkit-keyframes fade-in {
0% { opacity:0;}
100% { opacity:1;}
}
@keyframes fade-in-90 {
0% { opacity:0;}
100% { opacity:1;}
}
@-webkit-keyframes fade-in-90 {
0% { opacity:0;}
100% { opacity:1;}
}
@keyframes fade-out {
0% { opacity:1;}
100% { opacity:0;}
}
@-webkit-keyframes fade-out {
0% { opacity:1;}
100% { opacity:0;}
}
/* Blur */
@keyframes blur {
0% { filter:blur(0px); -webkit-filter:blur(0px);}
100% { filter:blur(10px); -webkit-filter:blur(10px);}
}
@-webkit-keyframes blur {
0% { filter:blur(0px); -webkit-filter:blur(0px);}
100% { filter:blur(10px); -webkit-filter:blur(10px);}
}
@keyframes blur-out {
0% { filter:blur(10px); -webkit-filter:blur(10px);}
100% { filter:blur(0px); -webkit-filter:blur(0px);}
}
@-webkit-keyframes blur-out {
0% { filter:blur(10px); -webkit-filter:blur(10px);}
100% { filter:blur(0px); -webkit-filter:blur(0px);}
}
/* Bounce */
@keyframes bounce {
0% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
17% { transform:rotate(-30deg); -webkit-transform:rotate(-30deg);}
34% { transform:rotate(30deg); -webkit-transform:rotate(30deg);}
50% { transform:rotate(-15deg); -webkit-transform:rotate(-15deg);}
67% { transform:rotate(15deg); -webkit-transform:rotate(15deg);}
100% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
}
@-webkit-keyframes bounce {
0% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
17% { transform:rotate(-30deg); -webkit-transform:rotate(-30deg);}
34% { transform:rotate(30deg); -webkit-transform:rotate(30deg);}
50% { transform:rotate(-15deg); -webkit-transform:rotate(-15deg);}
67% { transform:rotate(15deg); -webkit-transform:rotate(15deg);}
100% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
}
/* Air */
@keyframes midair {
0% { transform:translateY(1em); -webkit-transform:translateY(1em);}
100% { transform:translateY(0); -webkit-transform:translateY(0);}
}
@-webkit-keyframes midair {
0% { transform:translateY(2em); -webkit-transform:translateY(2em);}
100% { transform:translateY(0); -webkit-transform:translateY(0);}
}
/* Sketch */
@keyframes stroke-dashoffset {
0% { opacity:1;}
100% { opacity:1; stroke-dashoffset:0 !important;}
}
@-webkit-keyframes stroke-dashoffset {
0% { opacity:1;}
100% { opacity:1; stroke-dashoffset:0 !important;}
}
/* Rotate fade out */
@keyframes rotate-fade-out {
0% { opacity:1; transform:rotate(0deg); -webkit-transform:rotate(0deg);}
50% { opacity:1;}
100% { opacity:0; transform:rotate(270deg); -webkit-transform:rotate(270deg);}
}
@-webkit-keyframes rotate-fade-out {
0% { opacity:1; transform:rotate(0deg); -webkit-transform:rotate(0deg);}
50% { opacity:1;}
100% { opacity:0; transform:rotate(270deg); -webkit-transform:rotate(270deg);}
}
/* Rotate intro */
@keyframes intro-rotate-80 {
0% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
100% { transform:rotate(80deg); -webkit-transform:rotate(80deg);}
}
@-webkit-keyframes intro-rotate-80 {
0% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
100% { transform:rotate(80deg); -webkit-transform:rotate(80deg);}
}
/* Rotate menu */
@keyframes menu-rotate-1 {
0% { transform:rotate(-90deg); -webkit-transform:rotate(-90deg);}
100% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
}
@-webkit-keyframes menu-rotate-1 {
0% { transform:rotate(-90deg); -webkit-transform:rotate(-90deg);}
100% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
}
@keyframes menu-rotate-1-inv {
0% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
100% { transform:rotate(-90deg); -webkit-transform:rotate(-90deg);}
}
@-webkit-keyframes menu-rotate-1-inv {
0% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
100% { transform:rotate(-90deg); -webkit-transform:rotate(-90deg);}
}
@keyframes menu-rotate-2 {
0% { transform:rotate(90deg); -webkit-transform:rotate(90deg);}
100% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
}
@-webkit-keyframes menu-rotate-2 {
0% { transform:rotate(90deg); -webkit-transform:rotate(90deg);}
100% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
}
@keyframes menu-rotate-2-inv {
0% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
100% { transform:rotate(90deg); -webkit-transform:rotate(90deg);}
}
@-webkit-keyframes menu-rotate-2-inv {
0% { transform:rotate(0deg); -webkit-transform:rotate(0deg);}
100% { transform:rotate(90deg); -webkit-transform:rotate(90deg);}
}
/* Fold/Unfold */
@keyframes intro-fold {
0% { opacity:1; max-height:20em;}
50% { opacity:0; max-height:20em;}
100% { opacity:0; max-height:0;}
}
@-webkit-keyframes intro-fold {
0% { opacity:1; max-height:20em;}
50% { opacity:0; max-height:20em;}
100% { opacity:0; max-height:0;}
}
@keyframes intro-unfold {
0% { opacity:0; max-height:0;}
50% { opacity:0; max-height:20em;}
100% { opacity:1; max-height:20em;}
}
@-webkit-keyframes intro-unfold {
0% { opacity:0; max-height:0;}
50% { opacity:0; max-height:20em;}
100% { opacity:1; max-height:20em;}
}
@media screen and (max-width: 900px) {
/* Fold/Unfold */
@keyframes intro-fold {
0% { opacity:1; max-height:40em;}
50% { opacity:0; max-height:40em;}
100% { opacity:0; max-height:0;}
}
@-webkit-keyframes intro-fold {
0% { opacity:1; max-height:40em;}
50% { opacity:0; max-height:40em;}
100% { opacity:0; max-height:0;}
}
@keyframes intro-unfold {
0% { opacity:0; max-height:0;}
50% { opacity:0; max-height:40em;}
100% { opacity:1; max-height:40em;}
}
@-webkit-keyframes intro-unfold {
0% { opacity:0; max-height:0;}
50% { opacity:0; max-height:40em;}
100% { opacity:1; max-height:40em;}
}
}
/* Events */
@keyframes enable-events {
0% { pointer-events:none;}
99% { pointer-events:inherit;}
100% { pointer-events:inherit;}
}
@-webkit-keyframes enable-events {
0% { pointer-events:none;}
99% { pointer-events:inherit;}
100% { pointer-events:inherit;}
}
/* Display */
@keyframes display-none {
0% { display:block;}
99% { display:block;}
100% { display:none;}
}
@-webkit-keyframes display-none {
0% { display:block;}
99% { display:block;}
100% { display:none;}
}
/* Apparition menu */
@keyframes translate-btn-fromright-1 {
0% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
80% { -webkit-transform: translate(-2em); -moz-transform: translate(-2em); -ms-transform: translate(-2em); -o-transform: translate(-2em); transform: translate(-2em);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes translate-btn-fromright-1 {
0% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
80% { -webkit-transform: translate(-2em); -moz-transform: translate(-2em); -ms-transform: translate(-2em); -o-transform: translate(-2em); transform: translate(-2em);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@keyframes translate-btn-fromright-1-rev {
0% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
30% { -webkit-transform: translate(-2em); -moz-transform: translate(-2em); -ms-transform: translate(-2em); -o-transform: translate(-2em); transform: translate(-2em);}
100% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
}
@-webkit-keyframes translate-btn-fromright-1-rev {
0% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
30% { -webkit-transform: translate(-2em); -moz-transform: translate(-2em); -ms-transform: translate(-2em); -o-transform: translate(-2em); transform: translate(-2em);}
100% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
}
@keyframes translate-btn-fromright-2 {
0% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
80% { -webkit-transform: translate(-1em); -moz-transform: translate(-1em); -ms-transform: translate(-1em); -o-transform: translate(-1em); transform: translate(-1em);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes translate-btn-fromright-2 {
0% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
80% { -webkit-transform: translate(-1em); -moz-transform: translate(-1em); -ms-transform: translate(-1em); -o-transform: translate(-1em); transform: translate(-1em);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@keyframes translate-btn-fromright-2-rev {
0% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
40% { -webkit-transform: translate(-1em); -moz-transform: translate(-1em); -ms-transform: translate(-1em); -o-transform: translate(-1em); transform: translate(-1em);}
100% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
}
@-webkit-keyframes translate-btn-fromright-2-rev {
0% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
40% { -webkit-transform: translate(-1em); -moz-transform: translate(-1em); -ms-transform: translate(-1em); -o-transform: translate(-1em); transform: translate(-1em);}
100% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
}
@keyframes translate-btn-fromright-3 {
0% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
80% { -webkit-transform: translate(-0.25em); -moz-transform: translate(-0.25em); -ms-transform: translate(-0.25em); -o-transform: translate(-0.25em); transform: translate(-0.25em);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes translate-btn-fromright-3 {
0% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
80% { -webkit-transform: translate(-0.25em); -moz-transform: translate(-0.25em); -ms-transform: translate(-0.25em); -o-transform: translate(-0.25em); transform: translate(-0.25em);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@keyframes translate-btn-fromright-3-rev {
0% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
50% { -webkit-transform: translate(-0.25em); -moz-transform: translate(-0.25em); -ms-transform: translate(-0.25em); -o-transform: translate(-0.25em); transform: translate(-0.25em);}
100% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
}
@-webkit-keyframes translate-btn-fromright-3-rev {
0% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
50% { -webkit-transform: translate(-0.25em); -moz-transform: translate(-0.25em); -ms-transform: translate(-0.25em); -o-transform: translate(-0.25em); transform: translate(-0.25em);}
100% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
}
@keyframes translate-btn-fromright-4 {
0% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@-webkit-keyframes translate-btn-fromright-4 {
0% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
100% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
}
@keyframes translate-btn-fromright-4-rev {
0% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
100% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
}
@-webkit-keyframes translate-btn-fromright-4-rev {
0% { -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0);}
100% { -webkit-transform: translate(10em); -moz-transform: translate(10em); -ms-transform: translate(10em); -o-transform: translate(10em); transform: translate(10em);}
}
/* ------------------------------------------------------------------------- SPECIFIQUE Evmt */
/* ============================================================================
SECTIONS SOMBRES — noir en desktop, prune (#68002E) en mobile (cf. maquette).
========================================================================= */
.evmt-dark { background-color: var(--color-black); }
@media screen and (max-width: 900px) {
/* .evmt-dark { background-color: var(--color-accent-deep); } */
}
/* ============================================================================
HEADER — transparent au-dessus du hero (contenu blanc), passe en "verre dépoli"
clair (contenu sombre) au scroll via .is-scrolled (ajouté par js/functions.js).
========================================================================= */
.evmt-header { top: 0; left: 0; padding-top: 1.25em; padding-bottom: 1.25em; background-color: transparent; transition: background-color 0.3s, padding 0.3s, box-shadow 0.3s; }
/* Logo : 89×20 au gabarit Figma, soit le SVG (90×21 intrinsèques) à l'échelle 1.
Il était rendu à 2,5em, c'est-à-dire le double. Comme le logo du footer, la cote
est en rem — elle suit l'échelle du thème (16px mobile / 18px desktop / 30px en 4K)
sans dépendre du corps courant de l'en-tête. Seule la hauteur pilote : la largeur
suit le ratio du SVG. */
.evmt-header__logo img { height: 1.1111rem; width: auto; transition: filter 0.3s; }
/* Conteneur propre à l'en-tête : le gabarit pose le logo à 32px du bord gauche et le
toggle FR/EN à 32px du bord droit, alors que .centered-grid est bridé à 90 % de la
page (soit 72px de marge à 1440) et les rentrait trop (retour client du 2026-08-20).
Le plafond passe de 90 % à 96 % : à 1440 c'est le calc() en rem qui l'emporte, donc
32px pile ; au-delà la marge continue de croître doucement, au lieu de rester figée. */
.evmt-header .centered-grid { max-width: 96%; }
.evmt-header__link,
.evmt-header .evmt-btn--outline { color: var(--color-white); }
.evmt-header__link { position: relative; }
/* Souligné en currentColor (blanc au-dessus du hero, noir une fois scrollé) : le
fushia du survol a été refusé au retour client du 2026-08-07.
Le :hover est redéclaré parce que la règle générique `a:hover { color: inherit }`
(cf. reset, plus haut) l'emporte en spécificité sur `.evmt-header__link` : sans
ça le lien reprend la couleur du parent au survol. */
.evmt-header__link:hover,
.evmt-header__link:focus-visible { color: var(--color-white); }
.evmt-header__link:after { content: ""; position: absolute; left: 0; bottom: -0.35em; width: 0; height: 2px; background-color: currentColor; transition: width 0.25s; }
.evmt-header__link:hover:after,
.evmt-header__link.is-active:after { width: 100%; }
/* État "scrollé" : fond BLANC OPAQUE + contenu sombre + logo inversé (le SVG est blanc).
L'effet verre dépoli (fond translucide + flou) a été refusé au retour client du
2026-08-20 : le fond doit être blanc à 100 %. */
.evmt-header.is-scrolled { background-color: var(--color-white); box-shadow: var(--shadow-1); padding-top: 0.75em; padding-bottom: 0.75em; }
.evmt-header.is-scrolled .evmt-header__logo img { filter: invert(1); }
.evmt-header.is-scrolled .evmt-header__link,
.evmt-header.is-scrolled .evmt-header__link:hover,
.evmt-header.is-scrolled .evmt-header__link:focus-visible,
.evmt-header.is-scrolled .evmt-btn--outline { color: var(--color-black); }
.evmt-header.is-scrolled .evmt-btn--outline { border-color: var(--color-black); }
.evmt-header.is-scrolled .burger-btn span { background-color: var(--color-black); }
.evmt-header .burger-btn span { background-color: var(--color-white); }
/* ============================================================================
SÉLECTEUR DE LANGUE — toggle FR/EN : filet en dégradé, pastille pleine qui
glisse sur la langue active. Gabarit Figma : boîte 79×25, pastille active
44×25, donc la langue au repos occupe les 35px restants — colonnes inégales.
Les 3 largeurs sont en em sur .t-cta (14px en base 18px) : 79×25 exact au
gabarit, et le toggle suit l'échelle typo du thème sur mobile et 4K.
Le thème clair/sombre passe par les 3 variables ci-dessous, pilotées par
.is-scrolled : aucune règle de couleur à dupliquer plus bas.
========================================================================= */
.evmt-lang {
--lang-active: 0; /* index de la langue courante (posé en inline par le template) */
--lang-h: 1.7857em; /* 25px */
--lang-item-w: 2.5em; /* 35px — langue au repos */
--lang-thumb-w: 3.1429em; /* 44px — pastille active ; 44 + 35 = 79px de boîte */
--lang-thumb: var(--color-white);
--lang-fg: var(--color-white);
--lang-fg-active: var(--color-black);
--lang-filet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 79 25' preserveAspectRatio='none'%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='12.07' y1='-3.66' x2='76.56' y2='34.35'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect x='.5' y='.5' width='78' height='24' rx='12' fill='none' stroke='url(%23g)'/%3E%3C/svg%3E");
position: relative;
display: inline-flex;
height: var(--lang-h);
border-radius: 5em;
isolation: isolate;
}
/* Filet 1px en dégradé, dessiné en SVG et non par le montage de deux masques
(`mask-composite: exclude`) : sur iOS le xor ne s'applique pas, l'anneau se
remplissait et le toggle disparaissait sous un aplat blanc (retour client
du 2026-08-13). Le tracé reprend le dégradé du gabarit (120,55° ; blanc opaque
à 10,58 %, transparent à 103,28 %), converti en coordonnées de la boîte 79×25.
Le SVG s'étire avec la boîte : ce ratio tient tant que le sélecteur ne porte
que deux langues — à reprendre si une troisième est ajoutée. */
.evmt-lang:after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--lang-filet) center / 100% 100% no-repeat;
pointer-events: none;
}
/* Toutes les langues qui précèdent l'active sont au repos : le décalage de la
pastille vaut donc exactement --lang-item-w × index, sans calcul de %.
Empilement à z-index positifs (pastille 0 < filet < langues 1) : le z-index:-1
d'origine sortait la pastille — transformée, donc composée à part — de son
conteneur sur iOS, où elle repassait AU-DESSUS des libellés. */
.evmt-lang__thumb {
position: absolute;
top: 0; bottom: 0; left: 0;
width: var(--lang-thumb-w);
border-radius: 5em;
background-color: var(--lang-thumb);
-webkit-transform: translateX(calc(var(--lang-item-w) * var(--lang-active)));
transform: translateX(calc(var(--lang-item-w) * var(--lang-active)));
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
z-index: 0;
}
.evmt-lang__item {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 var(--lang-item-w);
border-radius: 5em;
color: var(--lang-fg);
white-space: nowrap;
transition: color 0.3s;
z-index: 1;
}
.evmt-lang__item.is-active { flex-basis: var(--lang-thumb-w); color: var(--lang-fg-active); }
/* Survol : la pastille se déplace en avant-première sur la langue pointée. */
.evmt-lang:has(.evmt-lang__item[data-pos="0"]:hover) .evmt-lang__thumb { transform: translateX(0); }
.evmt-lang:has(.evmt-lang__item[data-pos="1"]:hover) .evmt-lang__thumb { transform: translateX(var(--lang-item-w)); }
.evmt-lang:has(.evmt-lang__item:hover) .evmt-lang__item { color: var(--lang-fg); }
.evmt-lang:has(.evmt-lang__item:hover) .evmt-lang__item:hover { color: var(--lang-fg-active); }
/* Header scrollé (fond clair) : le toggle s'inverse. */
.evmt-header.is-scrolled .evmt-lang {
--lang-thumb: var(--color-black);
--lang-fg: var(--color-black);
--lang-fg-active: var(--color-white);
--lang-filet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 79 25' preserveAspectRatio='none'%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='12.07' y1='-3.66' x2='76.56' y2='34.35'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect x='.5' y='.5' width='78' height='24' rx='12' fill='none' stroke='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
.evmt-lang__thumb { transition: background-color 0.3s; }
}
/* ============================================================================
BOUTONS — pilule à filet (styleguide §4), flèche animée.
========================================================================= */
.evmt-btn { display: inline-flex; align-items: center; gap: 1.75em; padding: 0.85em 1.4em; border-radius: 5em; border: 1px solid transparent; cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
/* Flèche en masque SVG (.evmt-icon-mask) et non en ![]()
: sa couleur suit le texte
du bouton, donc un seul fichier pour tous les fonds. Hauteur explicite (ratio 28:8
du SVG) car un masque n'a pas de contenu pour calculer un height:auto.
Le tracé est celui du Figma (fushia_line.svg) : trait de 1px, pointe fine —
l'ancienne flèche 24×16 à 1,5px était trop épaisse (retour client). */
.evmt-btn__arrow { width: 1.5556em; height: 0.4444em; transition: transform 0.25s, background-color 0.25s; }
/* Au survol : la flèche avance et passe en fuchsia, quel que soit le fond du bouton. */
.evmt-btn:hover .evmt-btn__arrow { transform: translateX(0.35em); background-color: var(--color-accent); }
.evmt-btn--outline { background-color: transparent; border-color: currentColor; color: var(--color-black); }
.evmt-btn--outline:hover { background-color: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.evmt-btn--light { border-color: var(--color-white); color: var(--color-white); }
.evmt-btn--light:hover { background-color: var(--color-white); color: var(--color-black); }
.evmt-btn--filled { background-color: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }
.evmt-btn--filled:hover { background-color: var(--color-white); color: var(--color-black); border-color: var(--color-white); }
/* La variante « main » du CTA Ambition (filet fushia + curseur blanc) a été retirée
le 2026-08-07 : le client ne veut plus la main, le bouton reprend la flèche commune.
Les assets img/white_hand.svg et img/fushia_line.svg restent en place — ce dernier
fournit le tracé de .evmt-btn__arrow. */
/* Lien « Retour » d'une réalisation : même flèche que les boutons (miroir), donc
même ratio 28:8 — sans quoi le masque carré de .evmt-icon-mask la réduirait. */
.evmt-single-rea__back .evmt-icon-mask { width: 1.5556em; height: 0.4444em; }
/* ============================================================================
BLOC CTA + FOOTER
========================================================================= */
.evmt-cta-block { padding-top: 4.5em; padding-bottom: 4.5em; }
.evmt-cta-block__title { max-width: 12em; }
.evmt-footer { padding-top: 4.5em; padding-bottom: 2em; }
/* ---- Échelle du footer ----
Relevé maquette @1440 : liens à 12px, libellés de colonne et mentions à 10-11px,
logo 80×19. Le footer était rendu au corps courant (16px / 14px), d'où le « tout
est beaucoup trop gros » du retour client. Les classes .t-* étant exprimées en
POURCENTAGE de la taille héritée, il suffit de baisser la base du bloc : .t-s
descend à 12px, .t-cta et .t-tag à 10,5px, et tous les espacements en em suivent
dans la même proportion. Les paddings du bloc passent en rem pour ne pas rétrécir
avec — ce sont des cotes de page, pas de texte.
Le gabarit mobile applique la même réduction (adresse et e-mail à 12px) : la base
est donc posée ici, sans média-requête, et non plus au seul desktop. */
.evmt-footer { font-size: 0.75em; }
@media screen and (min-width: 901px) {
.evmt-footer { padding-top: 4.5rem; padding-bottom: 1.8333rem; }
}
/* Logo : 80×19 à la maquette, en desktop comme en mobile. En rem (et non en em) pour
ne pas suivre la réduction typo du footer, tout en restant sur l'échelle du thème.
width:auto explicite (le .width-fit du gabarit a été retiré du template) : sur une
image, `width:fit-content` vaut la largeur INTRINSÈQUE du fichier sous WebKit —
90px ici — au lieu de la largeur déduite du ratio. Le SVG, qui garde son
preserveAspectRatio, se centrait alors dans une boîte trop large et le logo
partait ~9px à droite de l'adresse en dessous (retour client iPhone du 2026-08-13). */
.evmt-footer__logo { height: 1.0556rem; width: auto; }
/* Colonnes : la maquette ne les répartit pas également — la colonne de marque tient
la moitié gauche (0 → 46,3 % du conteneur) et les trois colonnes de liens se
partagent la droite. Un grid-4 régulier les remontait trop à gauche.
Les deux premières positions (46,3 / 71,4 %) sont des cotes du gabarit ; la
dernière colonne, elle, est calée sur le BORD DROIT du conteneur (au gabarit son
titre finit pile à la fin du contenu) et n'a que la largeur de son texte. On la
dimensionne donc en max-content et on laisse le reliquat à la 3e piste, au lieu
de figer sa position à 95,7 % : avec un titre de deux mots (« Nous suivre » ici,
« Suivre » au gabarit) une piste `auto` de 4,3 % se calait sur le mot le plus
long et le titre passait sur deux lignes. */
@media screen and (min-width: 901px) {
/* column-gap: 0 — les pourcentages ci-dessus SONT les positions du gabarit, une
gouttière en plus les décalerait toutes vers la droite. */
.evmt-footer .evmt-footer__grid { grid-template-columns: 46.3% 25.1% auto max-content; column-gap: 0; }
}
/* Pictos réseaux du footer (mobile) : même bouton que sur la page Contact, en négatif.
Le picto est un masque (.evmt-icon-mask), donc blanc par défaut sur le fond sombre
puis noir au survol — les fichiers SVG sont dessinés en noir pour la page Contact. */
.evmt-footer__social { display: inline-flex; align-items: center; justify-content: center; width: 2.75em; height: 2.75em; border: 1px solid var(--color-white); border-radius: 0.5em; color: var(--color-white); transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.evmt-footer__social:hover, .evmt-footer__social:focus-visible { background-color: var(--color-white); color: var(--color-black); }
.evmt-footer__social .evmt-icon-mask { width: 1.1em; height: 1.1em; }
@media screen and (max-width: 900px) {
.evmt-footer { padding-top: 3.5em; padding-bottom: 1em; }
/* Empilement à 900px, le même palier que .hide-mobile / .only-mobile : sous
cette largeur il ne reste que la marque et la rangée de réseaux. */
.evmt-footer__grid { display: flex; flex-direction: column; row-gap: 2.5em; }
.evmt-footer__brand { margin-bottom: 1em; }
.evmt-cta-block { padding-top: 3em; padding-bottom: 3em; }
/* Mentions légales : 10,5px au gabarit, comme en desktop. Sous 900px les .t-*
repartent toutes à 100 % (cf. échelle mobile), .t-tag ne réduit donc plus rien
et la ligne du bas sortait au corps du footer, sur deux lignes — trop grosse
(retour client). Deux sélecteurs pour passer devant .t-tag. */
.evmt-footer .evmt-footer__bottom { font-size: 0.875em; }
/* Boutons réseaux : 40×40 au gabarit mobile (44 auparavant). En rem — ce sont des
cotes de page, elles ne doivent pas suivre la réduction typo du bloc. */
.evmt-footer__social { width: 2.5rem; height: 2.5rem; }
.evmt-footer__social .evmt-icon-mask { width: 1rem; height: 1rem; }
/* Logo : 18px de haut au gabarit mobile. La cote commune (1.0556rem = 19px)
est calée sur la base desktop 18px et retombait à 17px sur la base 16px. */
.evmt-footer__logo { height: 1.125rem; }
}
/* ============================================================================
MENU MOBILE — croix de fermeture (2 spans en X).
========================================================================= */
.mobile-menu-close { background: none; border: none; width: 2em; height: 2em; position: relative; cursor: pointer; }
.mobile-menu-close span { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background-color: currentColor; }
.mobile-menu-close span:nth-child(1) { transform: rotate(45deg); }
.mobile-menu-close span:nth-child(2) { transform: rotate(-45deg); }
.mobile-nav a.is-active { color: var(--color-accent); }
/* Drawer du menu mobile — caché hors écran par défaut, glisse à l'ouverture (.open). */
#mobile-menu { position: fixed; top: 0; right: 0; z-index: 100; width: 86%; max-width: 24em; height: 100%; height: 100dvh; padding: 1.75em; box-sizing: border-box; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); transition: transform 0.35s ease; }
#mobile-menu.open { transform: translateX(0); }
#mobile-menu .mobile-nav { display: flex; flex-direction: column; gap: 0.75em; }
#mobile-menu-overlay { position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
#mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }
/* ============================================================================
HOME — SECTIONS
Rythme vertical : gouttière 82px du styleguide ≈ 4.5em à la base 18px.
========================================================================= */
.evmt-section { padding-top: 4.5em; padding-bottom: 4.5em; }
@media screen and (max-width: 900px) { .evmt-section { padding-top: 2.5em; padding-bottom: 2.5em; } }
/* Puce / label d'accent (fushia). Le picto est petit face au texte du label
(14px pour un titre de 42px sur la maquette) et l'écart picto→texte est large. */
.evmt-label { gap: 1.6em; }
.evmt-label__dot { display: inline-block; width: 0.9em; height: auto; flex: 0 0 auto; }
.evmt-label > .evmt-label__dot { width: 0.33em; }
.evmt-tag { display: inline-flex; align-items: center; }
.evmt-tag__dot { display: inline-block; width: 0.43em; height: auto; flex: 0 0 auto; }
/* ---- HERO ---- */
.evmt-hero { height: 100vh; min-height: 40em; }
.evmt-hero__media video { display: block; }
.evmt-hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.35) 100%); pointer-events: none; }
.evmt-hero__sound { position: absolute; right: 2em; bottom: 2em; z-index: 3; width: 2em; height: 2em; border-radius: 50%; border: 1px solid black; background: black; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.25s; }
.evmt-hero__sound:hover { background: rgba(0,0,0,0.5); }
.evmt-hero__sound img { width: 1.25em; height: auto; }
@media screen and (max-width: 900px) {
.evmt-hero { height: 90vh; }
.evmt-hero__sound { background-color: black; border-color: black; }
}
/* ---- INTRO ---- */
/* Maquette : le paragraphe ne s'aligne ni en haut ni en bas du titre, il DÉMARRE
sous lui (2e rangée de la grille, sans gouttière verticale). */
.evmt-intro__head { row-gap: 0; }
.evmt-intro__title { grid-row: 1; }
.evmt-intro__text { grid-row: 2; }
/* « Une idée n'a de valeur que si elle tient dans le réel. » part à la ligne, précédée
d'un demi interligne (retour client du 2026-08-20). La coupe est portée par le CSS
et non par un
saisi en back-office : elle survit à toute réécriture du chapo,
tant que la phrase à détacher reste la première en Medium (). */
.evmt-intro__text p > strong:first-of-type { display: block; margin-top: 0.5em; }
@media screen and (max-width: 900px) {
.evmt-intro__title { grid-column: 1 / -1; }
.evmt-intro__text { grid-column: 1 / -1; margin-top: 1.5em; }
}
/* ---- EXPERTISES ---- */
/* Bloc calé à droite sur 60% de la grille (maquette), filet en bas de chaque ligne
uniquement — pas de filet au-dessus de "Corporate". */
.evmt-expertises { width: 60%; margin-left: auto; }
/* Décalage du nom : sur la maquette il ne démarre pas au bord du filet mais 65px plus
à droite (612 → 677 @1440) ; on porte l'écart à 90px pour dégager la place du picto
de survol. En rem, pour rester indépendant de la taille du titre. */
.evmt-expertise__name { padding-left: 5rem; }
/* Survol de la ligne : le nom ne bouge pas, le filet passe au noir et le picto de la
charte apparaît tout à gauche. La ligne n'est pas cliquable (pas de lien sur
l'accueil), l'effet reste donc purement visuel. */
.evmt-expertise { position: relative; transition: border-color 0.35s ease; }
.evmt-expertise:hover { border-color: var(--color-black); }
/* Picto de survol (img/fushia_picto.svg) : 2 calques superposés du même masque, parce
qu'une transition ne peut pas enchaîner 3 couleurs sur une seule propriété.
:before = le picto qui apparaît en blanc puis vire au noir
:after = le picto fushia, opaque, qui vient recouvrir le noir en fin de course
Les deux tournent de 90° sur eux-mêmes (0,9 s), mais l'enchaînement de couleurs est
bien plus rapide (~0,35 s au total) : le picto est fushia bien avant la fin de la
rotation. Aller : les délais du bloc :hover ; retour : ceux de l'état de repos, posés
dans l'ordre inverse (fushia → noir → blanc → disparition), ce qui rejoue l'animation
à l'envers sans JS ni keyframes.
Taille 15px = le gabarit natif du SVG, cohérent avec les autres pictos de la charte
face à un titre de 42px (cf. .evmt-label__dot). */
.evmt-expertise:before, .evmt-expertise:after {
content: ""; position: absolute; left: 0; top: 50%; width: 0.8333rem; height: 0.8333rem; margin-top: -0.4166rem;
pointer-events: none; opacity: 0; transform: rotate(0deg);
-webkit-mask: url("img/fushia_picto.svg") no-repeat center / contain; mask: url("img/fushia_picto.svg") no-repeat center / contain;
}
.evmt-expertise:before { background-color: var(--color-white);
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.12s ease 0.15s, opacity 0.1s ease 0.27s; }
.evmt-expertise:after { background-color: var(--color-accent);
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease; }
.evmt-expertise:hover:before { opacity: 1; background-color: var(--color-black); transform: rotate(90deg);
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.1s ease, background-color 0.12s ease 0.08s; }
.evmt-expertise:hover:after { opacity: 1; transform: rotate(90deg);
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease 0.2s; }
@media (prefers-reduced-motion: reduce) {
.evmt-expertise:before { display: none; }
.evmt-expertise:after, .evmt-expertise:hover:after { transform: none; transition: opacity 0.2s ease; }
}
/* Largeur des tags : la maquette coupe après « Séminaire » (ligne 1 : 203px, ligne 2 :
277px). Toute valeur entre ces deux bornes donne le même découpage — 20em (280px)
est au milieu, avec de la marge des deux côtés si la police rend un peu différemment. */
.evmt-expertise__tags { max-width: 25em; }
.evmt-expertise__tags li { display: inline-flex; align-items: center; }
/* Séparateur : petit carré fushia (le picto de la charte, illisible en rond à 5px). */
.evmt-expertise__tags li:not(:last-child):after { content: ""; display: inline-block; width: 0.36em; height: 0.36em; background-color: var(--color-accent); margin-left: 0.75em; }
@media screen and (max-width: 900px) {
.evmt-expertises { width: 100%; }
.evmt-expertise { flex-direction: column !important; align-items: flex-start !important; gap: 1.5em !important; }
/* Pleine largeur : le décalage du nom n'a plus de filet de référence, et le picto
de survol n'a plus ni place ni survol (tactile) — on le retire. */
.evmt-expertise__name { padding-left: 0; }
.evmt-expertise:before, .evmt-expertise:after { display: none; }
.evmt-expertise__tags { justify-content: flex-start !important; text-align: left; max-width: none; }
}
/* ---- RÉALISATIONS ---- */
/* Le tag « Créatifs & exigeants… » s'aligne sur la 2e ligne du titre : on le décale
d'un interligne de t-h1 (68px), indépendamment de sa propre taille de police. */
.evmt-rea__head .evmt-tag { margin-top: 3.7778rem; }
/* ---- CARTES RÉALISATIONS ---- */
.evmt-rea-card { display: block; }
/* Ratios maquette : 377×496 (portrait, cartes de grille) et 1376×590 (mise en avant).
Le ratio est porté par le conteneur pour que l'image soit recadrée (cover) et non
déformée / affichée à son ratio intrinsèque. */
.evmt-rea-card__media { aspect-ratio: 377 / 496; }
.evmt-rea-card--featured .evmt-rea-card__media { aspect-ratio: 1376 / 590; }
.evmt-rea-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform 0.5s ease; }
.evmt-rea-card:hover .evmt-rea-card__media img { transform: scale(1.03); }
/* Titre de carte : niveau t-h3 (22px Medium) mais sans le crénage -2px du styleguide,
que la maquette n'applique pas à ce niveau. */
.evmt-rea-card__title { letter-spacing: 0; }
/* Survol de la carte : seul le tiret séparateur du titre passe à l'accent (retour client). */
.evmt-rea-card__sep { transition: color 0.25s; }
.evmt-rea-card:hover .evmt-rea-card__sep { color: var(--color-accent); }
.evmt-tag-box { border: 1px solid var(--color-muted); border-radius: 0.15em; padding: 0.5em 1em; white-space: nowrap; }
@media screen and (max-width: 900px) {
.evmt-rea__grid { grid-template-columns: 1fr; }
.evmt-rea-card__media { aspect-ratio: 3 / 2; }
.evmt-rea-card--featured .evmt-rea-card__media { aspect-ratio: 3 / 2; }
.evmt-rea-card__foot { flex-direction: column !important; align-items: flex-start !important; gap: 0.5em !important; }
}
/* ---- AMBITION ---- */
@media screen and (max-width: 900px) {
/* Les grands blancs de la maquette desktop (~150px) étouffent le mobile. */
.evmt-ambition__label { margin-bottom: 1.5em !important; }
.evmt-ambition__title { margin-bottom: 1em !important; }
.evmt-label { gap: 1em; }
.evmt-ambition__points, .evmt-ambition__text, .evmt-ambition__cta { grid-column: 1 / -1; }
.evmt-ambition__text { margin-top: 1.5em; }
.evmt-ambition__cta { justify-content: flex-start; margin-top: 2em; }
}
/* ---- RÉFÉRENCES ---- */
/* Maquette : 7 logos par ligne, hauteur de boîte commune (les logos n'ont pas le même
ratio), en noir plein — pas de désaturation.
Les lignes défilent en bandeaux pleine largeur : chaque bandeau contient deux pistes
identiques et se translate de -50%… — REMPLACÉ le 2026-08-07 : le client veut une
planche de logos FIXE, pas un bandeau qui défile. Reste une grille de 7 colonnes,
chaque logo centré dans une boîte de hauteur commune (les logos n'ont pas le même
ratio) : 7 × 182px et 84px de haut sur la maquette @1440. */
.evmt-refs { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; row-gap: 1.75em; }
.evmt-refs__item { box-sizing: border-box; padding: 0 1em; display: flex; align-items: center; justify-content: center; height: 4.7em; }
.evmt-refs__item img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
@media screen and (max-width: 900px) {
/* Six colonnes rendraient les logos illisibles : trois sur mobile. */
.evmt-refs { grid-template-columns: repeat(3, 1fr); row-gap: 2em; column-gap: 2em; }
.evmt-refs__item { padding: 0 0.75em; height: 3.5em; }
}
/* ---- STATS ---- */
/* Bandeau pleine largeur : les filets verticaux touchent le haut et le bas de la bande
et courent d'un bord à l'autre de l'écran. Chaque cellule reprend la marge de grille
à gauche pour que "500+" s'aligne sur le reste de la page. */
/* Le padding vertical est porté par les cellules (et non par la section) pour que les
filets verticaux courent sur toute la hauteur de la bande. */
.evmt-stats { padding: 0; }
.evmt-stats__grid { list-style: none; gap: 0; }
.evmt-stats__item { padding: 4.5em 0 4em var(--page-gutter); border-left: 1px solid var(--color-muted); }
.evmt-stats__item:first-child { border-left: none; }
.evmt-stats__value { line-height: 1; }
/* Suffixe fushia : plus petit que le chiffre. Une unité (M€, K…) passe en exposant,
un simple symbole (+, .) reste sur la ligne de base — cf. maquette. */
.evmt-stats__suffix { font-size: 0.66em; }
.evmt-stats__suffix--unit { font-size: 0.62em; vertical-align: 0.35em; font-weight:500; }
/* Le « point » du chiffre 20 est la pastille de la charte, posée sur la ligne de base
du nombre (maquette : 7px pour un chiffre de 47px). L'écart au chiffre reprend
l'approche typographique d'un point.
vertical-align : le reset pose `img { vertical-align: bottom }`, qui collerait la
pastille au bas de la ligne (donc sous le chiffre) — il faut la baseline. */
.evmt-stats__dot { display: inline-block; width: 0.095em; height: auto; margin-left: 0.06em; vertical-align: baseline; }
/* Mobile — maquette : un chiffre par ligne, valeur et libellé COTE A COTE (et non
empilés), séparés par un filet horizontal. Les filets verticaux disparaissent.
Colonnes fixes en em (et non en %) : les libellés doivent démarrer au même x
d'une ligne à l'autre, or chaque est sa propre grille. Valeurs relevées sur
la maquette 390px : valeur calée à 116px de la marge, libellé à 68px de plus. */
@media screen and (max-width: 900px) {
.evmt-stats__grid { grid-template-columns: 1fr; }
.evmt-stats__item {
display: grid;
grid-template-columns: minmax(7.25em, min-content) minmax(0, 1fr);
column-gap: min(4.25em, 17vw);
align-items: center;
padding: 1.8em var(--page-gutter);
border-left: none;
}
/* Le filet du haut est porté par la section (border-top-1) : ici, uniquement
les séparations entre lignes — rien sous la dernière, la section suivante
(fond sombre) fait la coupure. */
.evmt-stats__item + .evmt-stats__item { border-top: 1px solid var(--color-muted); }
.evmt-stats__value { text-align: right; }
.evmt-stats__label { margin-top: 0; }
}
/* ============================================================================
PAGES INTERNES — Agence / Réalisations / Détail / Contact / 404
========================================================================= */
/* Utilitaires align-self manquants */
.align-self-start { align-self: flex-start; }
.align-self-center { align-self: center; }
.align-self-end { align-self: flex-end; }
.align-stretch { align-items: stretch; }
/* ---- HERO INTERNE ---- */
.evmt-inner-hero { padding-top: 10em; padding-bottom: 5em; }
.evmt-inner-hero__scrim { background: rgba(0,0,0,0.45); }
/* Même taille que la pastille du chapo (.evmt-label__dot) : les deux faisaient 15px
au gabarit, elles ne devaient pas diverger (retour client). */
.evmt-inner-hero__mark { display: block; width: 0.9em; height: auto; }
.evmt-inner-hero__title { max-width: 16em; }
/* ---- CONTACT ---- */
@media screen and (max-width: 900px) {
.evmt-contact__info, .evmt-contact__form { grid-column: 1 / -1; }
.evmt-contact__form { margin-top: 3em; }
}
/* Coordonnées : email, téléphone et adresse passent en fushia au survol. */
.evmt-contact__block a:not(.evmt-contact__social) { transition: color 0.25s; }
.evmt-contact__block a:not(.evmt-contact__social):hover,
.evmt-contact__block a:not(.evmt-contact__social):focus-visible { color: var(--color-accent); }
.evmt-contact__social { display: inline-flex; align-items: center; justify-content: center; width: 2.75em; height: 2.75em; border: 1px solid var(--color-black); border-radius: 0.5em; color: var(--color-black); transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
/* Survol en corail (et non en noir) : il fallait comprendre au premier coup d'œil que
le picto est cliquable (retour client du 2026-08-20). */
.evmt-contact__social:hover, .evmt-contact__social:focus-visible { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.evmt-contact__social img, .evmt-contact__social svg { width: 1.1em; height: auto; }
/* SVG inline : les fill sont en currentColor, le picto suit donc la couleur du lien. */
.evmt-contact__social svg { display: block; fill: currentColor; transition: fill 0.25s; }
/* ---- FORMULAIRE (WPCF7 en thème clair) ---- */
.evmt-form .wpcf7 { color: var(--color-black); }
.evmt-form p { margin: 0; }
.evmt-form .evmt-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em 1.25em; }
.evmt-form label { display: block; font-size: 88.8889%; margin-bottom: 1.25em; }
.evmt-form .evmt-form__label { display: block; margin-bottom: 0.5em; font-weight:500; }
.evmt-form input[type="text"],
.evmt-form input[type="email"],
.evmt-form input[type="tel"],
.evmt-form textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 1em; color: var(--color-black); background: var(--color-white); border: 1px solid var(--color-muted); border-radius: 0.6em; padding: 0.9em 1em; transition: border-color 0.2s; }
.evmt-form input:focus, .evmt-form textarea:focus { outline: none; border-color: var(--color-black); }
.evmt-form textarea { min-height: 9em; resize: vertical; }
.evmt-form .wpcf7-not-valid-tip { color: var(--color-accent); font-size: 85%; margin-top: 0.35em; }
.evmt-form .wpcf7-not-valid { border-color: var(--color-accent); }
/* Consentement RGPD : la case est repeinte à la main, `appearance:none` étant appliqué à tous les input. */
.evmt-form .wpcf7-acceptance { display: block; font-size: 85%; color: var(--color-black); }
.evmt-form .wpcf7-acceptance .wpcf7-list-item { display: block; margin: 0; }
.evmt-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 0.75em; font-size: 1em; margin-bottom: 0; cursor: pointer; }
.evmt-form .wpcf7-acceptance input[type="checkbox"] { width: 1.1em; height: 1.1em; flex: 0 0 auto; margin-top: 0.15em; border: 1px solid var(--color-black); border-radius: 0.2em; background: var(--color-white); cursor: pointer; transition: background-color 0.2s; }
/* Cochée : aplat corail plutôt que noir (retour client du 2026-08-20). */
.evmt-form .wpcf7-acceptance input[type="checkbox"]:checked { background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8em no-repeat; border-color: var(--color-accent); }
.evmt-form .wpcf7-acceptance input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
.evmt-form .wpcf7-acceptance .wpcf7-list-item-label { display: block; line-height: 1.4em; }
.evmt-form__required { font-weight:500; margin-top: 1.25em !important; }
.evmt-form .wpcf7-submit { width: fit-content; text-transform: uppercase; font-family: inherit; font-size: 77.7778%; letter-spacing: 0; padding: 1em 2.5em; color: var(--color-black); background: transparent; border: 1px solid var(--color-black); border-radius: 5em; cursor: pointer; transition: background-color 0.25s, color 0.25s, opacity 0.25s; }
.evmt-form .wpcf7-submit:hover { background: var(--color-black); color: var(--color-white); }
/* Tant que le consentement n'est pas coché, CF7 désactive le bouton : on le rend visible. */
.evmt-form .wpcf7-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.evmt-form .wpcf7-submit:disabled:hover { background: transparent; color: var(--color-black); }
.evmt-form .wpcf7-response-output { border-color: var(--color-muted) !important; border-radius: 0.5em; margin: 1.5em 0 0 !important; padding: 0.9em 1.2em !important; font-size: 88%; }
@media screen and (max-width: 640px) {
.evmt-form .evmt-form__row { grid-template-columns: 1fr; }
}
/* ---- CHAPÔ (Agence) ----
Mobile : la pastille passe sur sa propre rangée de grille, la gouttière (16px)
la collait au premier paragraphe. Le gabarit en laisse ~40px — le complément
est posé ici, en rem (cote de page, pas de texte). */
@media screen and (max-width: 900px) {
.evmt-agence-intro__mark { margin-bottom: 1.5rem; }
}
/* Mobile : la pastille disparaît et les chapos reprennent le corps du premier petit
texte de la home (t-s, 16px) — le corps M les rendait trop gros et empilait les
bandeaux (retour client du 2026-08-20). Desktop inchangé. */
@media screen and (max-width: 900px) {
.evmt-agence-intro__mark { display: none; }
.evmt-chapo.t-m { font-size: 120%; line-height: 1.5em; }
}
/* ---- BANDEAU MÉTHODE (Agence) ---- */
.evmt-method { padding-top: 5em; padding-bottom: 5em; }
.evmt-method__item { white-space: nowrap; }
@media screen and (max-width: 900px) {
.evmt-method .centered-grid { flex-direction: column; align-items: flex-start; gap: 1em; }
.evmt-method { padding-top: 3em; padding-bottom: 3em; }
.evmt-method__item { white-space: normal; width: 90%; }
}
/* ---- ACCORDÉON EXPERTISES (Agence) ----
Maquette « Agence déplié » @1440 : filet noir pleine largeur, puis une ligne de grille
où le bloc coloré part du bord gauche de l'écran et s'arrête à la moitié du conteneur
(720px), le texte démarre col 8 (844px) et le chevron s'aligne à 80px du bord droit.
L'inset interne du bloc (48px) s'ajoute à la marge de grille (32px) → texte à 80px. */
.expertise-block { border-top: 1px solid var(--color-black); }
.expertise-rule { display: block; }
/* NB : pas de `font: inherit` ici — le raccourci écraserait la taille posée par .t-h2
(cette règle est plus bas dans la feuille). La famille suffit, .t-h2 fait le reste. */
.evmt-accordion__toggle { background: none; border: none; cursor: pointer; text-align: left; color: inherit; font-family: inherit; padding: 0; }
.evmt-accordion__chevron { display: block; width: 1.1em; height: auto; transition: transform 0.35s, filter 0.35s; }
.expertise-block.is-open .evmt-accordion__chevron { transform: rotate(180deg); }
/* Survol de la ligne fermée : le chevron descend d'un cran pour signaler qu'il ouvre
(retour client). Ouvert, il a déjà pivoté — on ne le déplace plus. */
.expertise-block:not(.is-open) .expertise-main:hover .evmt-accordion__chevron { transform: translateY(0.25em); }
@media (prefers-reduced-motion: reduce) {
.expertise-block:not(.is-open) .expertise-main:hover .evmt-accordion__chevron { transform: none; }
}
/* Ligne d'en-tête : toute la ligne est cliquable (cf. js/home.js).
`start` et non `center` : ouvert, le titre du panneau et la première ligne du texte
de droite doivent partir du même haut (retour client). Fermé, la ligne ne contient
qu'un élément visible, l'alignement n'y change donc rien. */
.expertise-main {
align-items: start;
cursor: pointer;
padding-top: 2.2222rem; /* 40px fermé */
padding-bottom: 2.2222rem;
transition: padding 0.45s ease;
}
.expertise-block.is-open .expertise-main {
padding-top: 4.6667rem; /* 84px ouvert (maquette) */
padding-bottom: 4.6667rem;
}
/* Aplat coloré : déborde jusqu'au bord gauche de l'écran (rogné par main.overflow-hidden)
et s'arrête au milieu du conteneur. Posé en ::before pour rester indépendant du DOM. */
.expertise-main::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -100vw;
right: 50%;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.expertise-block.is-open .expertise-main::before { opacity: 1; }
/* Survol d'un bloc fermé : l'aplat se pose en avant-première, comme à l'ouverture. Sans
lui, rien n'indiquait que la ligne était cliquable (retour client du 2026-08-20). */
.expertise-block:not(.is-open) .expertise-main:hover::before { opacity: 1; }
.expertise-block[data-accent="prune"]:not(.is-open) .expertise-main:hover .expertise-panel { color: var(--color-white); }
.expertise-block[data-accent="mint"]:not(.is-open) .expertise-main:hover .expertise-panel { color: var(--color-black); }
.expertise-block[data-accent="prune"] .expertise-main::before { background-color: var(--color-accent-deep); }
.expertise-block[data-accent="mint"] .expertise-main::before { background-color: var(--color-accent-2); }
/* Colonne gauche (dans l'aplat) */
.expertise-panel { padding-left: 2.6667rem; padding-right: 1.7778rem; transition: color 0.35s ease; }
.expertise-panel__title { display: block; }
/* Justification courte (~400px @1440) : c'est elle qui donne les retours de ligne
de la maquette (« Rassembler n’est / jamais anodin. »). */
.expertise-panel__tagline { margin-top: 2.3333rem; max-width: 9.5em; }
.expertise-block[data-accent="prune"].is-open .expertise-panel { color: var(--color-white); }
.expertise-block[data-accent="mint"].is-open .expertise-panel { color: var(--color-black); }
/* Chevron : aligné à 48px à l'intérieur de la marge de grille (80px du bord d'écran).
Hors flux : .expertise-main est relatif (reset ligne 133) et, pour un enfant absolu
d'une grille, le bloc conteneur horizontal reste la colonne placée (ici la 12) —
d'où `right` au lieu de justify-self + padding. Le chevron ne suit donc plus le
centre de la ligne : à l'ouverture il ne bouge pas et se retrouve en haut à droite.
`top` = padding-top fermé et hauteur = ligne du titre (.t-h2, line-height 1em) :
fermé, le centrage vertical est identique à l'ancien align-items:center. */
.expertise-chevron {
position: absolute;
top: 2.2222rem; /* 40px = padding-top de .expertise-main fermé */
right: 2.6667rem; /* 48px à l'intérieur de la colonne 12 */
display: flex;
align-items: center;
height: 2.3333rem; /* 42px = hauteur de ligne de .t-h2 */
cursor: pointer;
}
/* .t-h2 tombe à 36px sous 1200px (cf. règle ligne ~2370) */
@media screen and (min-width: 901px) and (max-width: 1200px) {
.expertise-chevron { height: 2rem; }
}
/* Zone révélée : max-height (robuste, pas de calcul JS) */
.expertise-reveal {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.expertise-block.is-open .expertise-reveal { max-height: 4000px; }
/* Colonne droite : mise en page reprise de la présentation client (retour du
2026-08-20) — premier et dernier paragraphe en Medium, demi interligne entre les
blocs (ils étaient collés). L'écart après la liste reste plus large, comme au
document source. */
.expertise-text * + p { margin-top: 0.5em; }
.expertise-text p + ul { margin-top: 0.5em; }
.expertise-text ul + p { margin-top: 1.5em; }
.expertise-text ul li + li { margin-top: 0; }
/* .expertise-text > p:first-child, */
/* .expertise-text > p:last-child { font-weight: 500; } */
/* Cartes réalisations liées */
.expertise-cards { margin-top: 2.2222rem; margin-bottom: 4.4444rem; }
/* Mobile : une seule colonne. L'aplat ne couvre plus la moitié de la ligne mais
uniquement le bloc titre + accroche, débordé jusqu'aux deux bords de l'écran.
Le débord vaut --page-gutter et non 1rem : sous 900px .centered-grid est bridé
par son max-width:90%, donc la marge réelle est max(1rem, 5vw) — 19,5px sur un
iPhone 390. Avec -1rem il restait un liseré blanc de chaque côté (retour client). */
@media screen and (max-width: 900px) {
.expertise-main { padding-top: 0; padding-bottom: 0; }
.expertise-block.is-open .expertise-main { padding-top: 0; padding-bottom: 0; }
/* Fermée, la ligne ne contient que l'aplat titre : la gouttière de ligne qui la
sépare de la colonne texte repliée (hauteur 0) se voyait sous le titre et
décalait tout le bloc vers le haut (retour client). Gouttière annulée, l'écart
à l'ouverture est repris par le padding de .expertise-text. */
.expertise-block .expertise-main.grid { row-gap: 0; }
.expertise-main::before { content: none; }
.expertise-panel {
grid-column: 1 / -1;
margin-left: calc(var(--page-gutter) * -1);
margin-right: calc(var(--page-gutter) * -1);
padding: 1.5rem var(--page-gutter);
transition: background-color 0.35s ease, color 0.35s ease;
}
.expertise-block[data-accent="prune"].is-open .expertise-panel { background-color: var(--color-accent-deep); }
.expertise-block[data-accent="mint"].is-open .expertise-panel { background-color: var(--color-accent-2); }
.expertise-panel__title { padding-right: 2.5rem; }
/* Accroche à 22px/33 au gabarit mobile (= l'échelon .t-h3), et non au corps du
titre : en .t-h2 elle sortait à 36px, trop grosse (retour client). */
.expertise-panel__tagline { margin-top: 1rem; max-width: none; font-size: 137.5%; line-height: 1.5em; }
.expertise-side { grid-column: 1 / -1; }
.expertise-text { padding-top: 2rem; }
/* Fermé, le chevron se centre sur l'aplat titre (retour client). Ouvert, la ligne
devient haute (accroche + texte révélés) : il reprend son calage en haut, à
hauteur du titre. height:auto → le titre peut passer sur deux lignes sans
décaler le centrage. */
.expertise-chevron { top: 50%; right: 0; height: auto; transform: translateY(-50%); }
.expertise-block.is-open .expertise-chevron { top: 1.5rem; transform: none; }
/* Ouvert, le chevron passe sur l'aplat : il suit la couleur du texte du panneau
(blanc sur prune, noir sur mint qui est un turquoise clair). Le SVG est chargé
en ![]()
— currentColor n'y arrive pas, d'où le filtre (cf. .filter-invert). */
.expertise-block[data-accent="prune"].is-open .evmt-accordion__chevron { filter: invert(1); }
.expertise-cards { grid-template-columns: 1fr; margin-top: 1.5rem; margin-bottom: 2.5rem; }
}
/* ---- ÉQUIPE (Agence) ----
Maquette @1440 : ~80px entre le filet de fin d'accordéon et le titre « L'équipe ».
Le padding-bottom de la section précédente (4.5em ≈ 81px) suffit : on annule
celui du haut, sinon les deux s'additionnent et le bloc descend trop bas. */
.evmt-team-section { padding-top: 0; }
.evmt-team { list-style: none; }
.evmt-team__photo { aspect-ratio: 3 / 4; background-color: var(--color-surface); isolation: isolate; }
/* Photos livrées sur fond blanc : multiply fait « disparaître » le blanc dans le beige. */
.evmt-team__img { mix-blend-mode: multiply; }
/* Pastille : 15px et ~16px des bords à la maquette — la même que celle du chapo,
elle était nettement trop grosse (retour client). En rem : elle ne doit pas
grossir avec le nom, qui a sa propre taille. */
.evmt-team__mark { position: absolute; top: 0.8889rem; right: 0.8889rem; width: 0.8333rem; height: auto; }
/* Nom : 20px à la maquette (t-m en donnait 24), et un cran d'air en plus avant le
poste, qui démarre 20px sous la ligne du nom (retour client). */
.evmt-team__name { font-size: 111.1111%; line-height: 1.4em; }
/* Poste collé au nom : 20px d'air à la maquette, mais le client le veut plus proche
encore (retour du 2026-08-20). */
.evmt-team__role { margin-top: 0.35em; }
@media screen and (max-width: 900px) {
.evmt-team-section { padding-top: 1.5em; }
.evmt-team { grid-template-columns: 1fr 1fr; }
}
/* ---- FILTRES (Réalisations) ----
Maquette (référence 1440) : trois pastilles de LARGEUR IDENTIQUE (232px) et
de 48px de haut, filet noir 1px, libellé à gauche / chevron collé à droite.
Ouverte, la pastille ne se détache pas de son menu : les deux ne forment
qu'une seule carte blanche bordée de noir, le libellé restant en tête,
séparé de la liste par un filet (le chevron ne pivote donc pas).
Cotes de la carte en em sur le corps courant (18px) ; le bouton et les
lignes du menu portent .t-s, leurs em valent donc 16px — d'où les valeurs
qui diffèrent d'un sélecteur à l'autre pour une même mesure en px. */
.evmt-filters { border-bottom: 1px solid var(--color-muted); padding-bottom: 1.25em; }
.evmt-filter { position: relative; width: 12.9em; /* 232px */ }
/* La carte ouverte passe au-dessus des filtres suivants (ils sont empilés sous
elle en mobile, où chaque pastille prend toute la largeur). */
.evmt-filter.open { z-index: 20; }
.evmt-filter__toggle { position: relative; z-index: 2; box-sizing: border-box; display: flex; align-items: center; gap: 0.6em; width: 100%; height: 3em; /* 48px */ padding: 0 1.375em; /* 22px */ background: var(--color-white); border: 1px solid var(--color-black); border-radius: 5em; cursor: pointer; color: inherit; text-align: left; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.evmt-filter__label { margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evmt-filter__chevron { width: 0.85em; flex: 0 0 auto; transition: transform 0.25s; }
/* Pastille active : fond noir + coche, dès qu'un terme est coché dans le groupe */
.evmt-filter__check { display: none; width: 0.95em; height: 0.95em; flex: 0 0 auto; border-radius: 50%; background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.62em no-repeat; }
/* Filtre actif : pastille corail et non noire, pour que la sélection saute aux yeux
(retour client du 2026-08-20). */
.evmt-filter.is-active > .evmt-filter__toggle { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.evmt-filter.is-active > .evmt-filter__toggle .evmt-filter__chevron { filter: invert(1); }
/* La coche est dessinée en noir dans le data-URI ; sur l'aplat corail on la repeint
en corail sur sa pastille blanche pour garder le contraste. */
.evmt-filter.is-active > .evmt-filter__toggle .evmt-filter__check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3' fill='none' stroke='%23FF004F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.evmt-filter.is-active > .evmt-filter__toggle .evmt-filter__check { display: block; }
/* Ouverte, la pastille devient la tête de la carte : elle s'efface (fond et
filet transparents) pour laisser voir le contour du menu placé dessous. */
.evmt-filter.open > .evmt-filter__toggle { background-color: transparent; border-color: transparent; color: inherit; }
.evmt-filter.open > .evmt-filter__toggle .evmt-filter__chevron { filter: none; }
/* …et la coche s'inverse pour rester lisible sur le blanc de la carte. */
.evmt-filter.is-active.open > .evmt-filter__toggle .evmt-filter__check { background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.62em no-repeat; }
/* Le menu part du haut du filtre et réserve la hauteur du bouton en padding :
contour, largeur et coins sont ainsi ceux d'une carte unique. */
.evmt-filter__menu { position: absolute; top: 0; left: 0; z-index: 1; box-sizing: border-box; width: 100%; padding: 3em 1.22em 0.95em; /* 54px 22px 17px */ background: var(--color-white); border: 1px solid var(--color-black); border-radius: 1.1em; opacity: 0; pointer-events: none;
/* Ouverture : la carte se déplie vers le bas depuis la pastille, au lieu
d'apparaître d'un coup en fondu (retour client). transform-origin en haut,
pour que la tête du menu reste calée sous le bouton pendant l'animation. */
transform: scaleY(0.9) translateY(-0.35em); transform-origin: top center;
transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.evmt-filter__menu::before { content: ""; position: absolute; top: 2.5em; left: 1.22em; right: 1.22em; border-top: 1px solid var(--color-black); }
.evmt-filter.open > .evmt-filter__menu { opacity: 1; pointer-events: auto; transform: none; }
/* Survol de la pastille fermée : le chevron descend, comme sur l'accordéon Agence. */
.evmt-filter:not(.open) > .evmt-filter__toggle:hover .evmt-filter__chevron { transform: translateY(0.15em); }
@media (prefers-reduced-motion: reduce) {
.evmt-filter__menu { transform: none; transition: opacity 0.2s ease; }
.evmt-filter:not(.open) > .evmt-filter__toggle:hover .evmt-filter__chevron { transform: none; }
}
/* Les termes sont d'un cran plus petits que leur parent (.t-cta) : c'est le
rapport de la maquette, et « Conventions et séminaires » tient alors sur
une ligne dans les 232px de la carte. */
.evmt-filter__option { box-sizing: border-box; display: flex; align-items: center; gap: 0.64em; padding: 0.05em 0.57em; margin: 0 -0.57em; line-height: 1.55em; cursor: pointer; border-radius: 0.35em; }
.evmt-filter__option:hover { background: var(--color-surface); }
/* Case à cocher (le natif est masqué au profit d'un carré tracé) */
.evmt-filter__option input[type="checkbox"] { width: 1.07em; height: 1.07em; flex: 0 0 auto; border: 1px solid var(--color-black); border-radius: 0.2em; cursor: pointer; transition: background-color 0.2s; }
.evmt-filter__option input[type="checkbox"]:checked { background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.7em no-repeat; border-color: var(--color-accent); }
/* « Voir tous » avec une partie seulement du groupe cochée : tiret, sans quoi
l'état partiel serait indiscernable d'un groupe vide (appearance:none est
global, le natif ne dessine rien). */
.evmt-filter__option input[type="checkbox"]:indeterminate { background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.7em no-repeat; border-color: var(--color-accent); }
.evmt-filter__option input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
/* Expertises hiérarchiques : le parent déplie ses enfants. Les marges
négatives gardent les textes alignés sur le filet, le fond de survol
pouvant déborder dans les marges internes de la carte. */
.evmt-filter__parent { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 1em; width: calc(100% + 1em); padding: 0.19em 0.5em; margin: 0 -0.5em; background: none; border: none; cursor: pointer; color: inherit; text-align: left; border-radius: 0.35em; }
.evmt-filter__parent:hover { background: var(--color-surface); }
.evmt-filter__parent .evmt-filter__chevron { transform: rotate(-90deg); }
.evmt-filter__group.open > .evmt-filter__parent .evmt-filter__chevron { transform: rotate(0deg); }
.evmt-filter__children { display: none; }
.evmt-filter__group.open > .evmt-filter__children { display: block; }
.evmt-filter__reset { background: none; border: none; cursor: pointer; margin-left: auto; text-decoration: underline; }
.evmt-filters__empty[hidden] { display: none; }
/* Mobile : une pastille pleine largeur par ligne (54px de haut sur la maquette). */
@media screen and (max-width: 900px) {
.evmt-filters { gap: 0.75em !important; }
.evmt-filter { width: 100%; }
.evmt-filter__toggle { height: 3.4em; }
.evmt-filter__menu { padding-top: 3.4em; }
.evmt-filter__menu::before { top: 2.9em; }
}
/* ---- ARCHIVE RÉALISATIONS ---- */
/* is-hidden : écartée par les filtres. is-clamped : au-delà du lot affiché,
dépliée par le bouton « + » (8 cartes par lot, cf. page-realisations.php). */
.evmt-rea-archive__cell.is-hidden,
.evmt-rea-archive__cell.is-clamped { display: none; }
/* Bouton « + » : une rangée entière, bouton centré. La cote est posée ici et non
par col-12, qui retombe à 4 colonnes sous 900px. */
.evmt-rea-more { grid-column: 1 / -1; }
.evmt-rea-more[hidden] { display: none; }
/* Pastille 56×56 au gabarit Figma. Cote en rem, comme le logo : elle suit
l'échelle du thème sans dépendre du corps courant de la grille. */
.evmt-rea-more__btn { display: flex; align-items: center; justify-content: center; width: 3.1111rem; height: 3.1111rem; padding: 0; background: none; border: 0; cursor: pointer; color: var(--color-black); transition: color 0.25s, transform 0.25s; }
/* Le picto est un masque en currentColor : la couleur du bouton suffit à le
passer en fushia au survol, sans second fichier. */
.evmt-rea-more__btn:hover { color: var(--color-accent); transform: scale(1.08); }
.evmt-rea-more__btn:focus-visible { outline: 2px solid var(--color-black); outline-offset: 4px; border-radius: 50%; }
.evmt-rea-more__icon { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
.evmt-rea-more__btn:hover { transform: none; }
}
/* Carte large (8 colonnes = 2/3) : son visuel doit faire la même hauteur que les
cartes 1/3 de la rangée. Une cellule 1/3 mesure (largeur de la cellule large
− une gouttière) / 2, d'où la hauteur = cette largeur au ratio 377/496.
Le container query évite une valeur d'aspect-ratio figée, fausse aux extrêmes
de largeur (la gouttière est en rem, les colonnes en fr). */
.evmt-rea-archive__cell--wide { container-type: inline-size; }
.evmt-rea-archive__cell--wide .evmt-rea-card__media { aspect-ratio: auto; height: calc((100cqw - 0.8889rem) / 2 * 496 / 377); }
@media screen and (max-width: 900px) {
/* Le texte de colonne arrivait juste sous la carte mise en avant, trop haut dans la
page (retour client du 2026-08-20) : sur mobile il descend d'un cran et s'intercale
entre le 2e et le 3e cas (mise en avant = 1er cas). `order` ne touche qu'au rendu,
l'ordre du DOM — et donc de lecture au clavier — reste celui du desktop.
Le sélecteur vise l'enfant 2 de la grille, c'est-à-dire la 1re carte : l'enfant 1
est le bloc de texte lui-même. */
.evmt-rea-archive__side { grid-column: 1 / -1; order: 2; margin-top: 1em; margin-bottom: 1em; }
.evmt-rea-archive__cell { grid-column: 1 / -1 !important; order: 3; }
.evmt-rea-archive__cell:nth-child(-n+2) { order: 1; }
.evmt-rea-more { order: 4; }
.evmt-rea-archive__cell--wide .evmt-rea-card__media { height: auto; aspect-ratio: 3 / 2; }
}
/* ---- DÉTAIL RÉALISATION ---- */
.evmt-single-rea__back { position: absolute; height: fit-content;z-index: 2;padding-top: 5em;left: 5%; }
.evmt-single-rea__hero { max-height: 80vh; }
/* La hauteur naturelle de l'image (height:auto plus bas) est plafonnée à celle du
hero : la boîte est alors contrainte, `fit-cover` recadre pour de bon et l'ancrage
se fait sur le bas de la photo. Sous 80vh de haut, rien n'est rogné. */
.evmt-single-rea__hero img { max-height: 80vh; object-position: center 70%; }
@media screen and (max-width: 900px) {
/* Mobile : une photo paysage à 100% de large ne ferait qu'un bandeau écrasé.
On impose donc au hero le format portrait de la maquette (3/4) et `fit-cover`
zoome dans la photo au lieu de la réduire. Plafond à 80vh sur écrans courts.
Sélecteur avec .fit-cover : il doit l'emporter sur le `height:auto` posé plus
bas (section « IMAGES »), qui vient après dans la feuille. */
.evmt-single-rea__hero img.fit-cover { height: min(133vw, 80vh); max-height: none; }
}
.evmt-single-rea__scrim { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); pointer-events: none; z-index: 1; }
/* Logo de la marque, centré par-dessus le hero. `pointer-events:none` : le calque
couvre toute l'image, il ne doit pas intercepter les clics du header. */
.evmt-single-rea__logo { inset: 0; width: auto; height: auto; pointer-events: none; z-index: 2; padding: 6em 5% 2em; box-sizing: border-box; }
.evmt-single-rea__logo img { max-width: min(30%, 22em); max-height: 45%; width: auto; height: auto; object-fit: contain; }
@media screen and (max-width: 900px) {
.evmt-single-rea__logo img { max-width: 60%; }
}
/* Panneau d'intro : moitié de la largeur de PAGE, à fond perdu à gauche (il part
du bord de l'écran, pas de la gouttière). D'où une grille propre à la section
plutôt qu'un .centered-grid, dont les marges empêcheraient le débord. */
.evmt-single-rea__intro { padding-top: 0em; padding-bottom: 2em; }
.evmt-single-rea__intro-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
/* 10% de la moitié de page = les 5% de marge du .centered-grid, avec le même
plancher de 1.7778rem (32px) que celui-ci sur petits écrans. */
.evmt-single-rea__panel { padding: 3em max(1.7778rem, 10%); }
.evmt-single-rea__desc { padding-left: 5em; padding-right: 5em; }
.evmt-single-rea__content { padding-bottom: 4em; }
.evmt-tag-box--dark { border-color: rgba(0,0,0,0.35); }
@media screen and (max-width: 900px) {
.evmt-single-rea__intro-inner { grid-template-columns: 1fr; }
.evmt-single-rea__panel { padding: 2.5em max(1rem, 5%); border-radius: 0; }
.evmt-single-rea__desc { margin-top: 2em; padding: 0 max(1rem, 5%); }
/* Blocs texte + image : une colonne, quelle que soit la largeur choisie en admin. */
.evmt-rea-block__media, .evmt-rea-block__text, .evmt-rea-block__inset { grid-column: 1 / -1; }
/* Sur mobile, le texte passe TOUJOURS sous le média, y compris dans les blocs
« texte + image » où il le précède dans le HTML : on lit l'image d'abord,
la légende ensuite (retour client du 2026-08-27). Les autres enfants gardent
order:0, donc leur ordre naturel (média puis vignette du bloc image+image). */
.evmt-rea-block__text { order: 1; }
}
/* ---- 404 ---- */
.evmt-404 { min-height: 100vh; } /*padding: 8em 1.5em; } */
.evmt-404__scrim { background: rgba(0,0,0,0.4); }
.evmt-404__box { max-width: 32em; padding: 3.5em; border-radius: 0.75em; }
.evmt-404__code { line-height: 1; font-weight: 500; }
/* ---- IMAGES : placeholder + fondu au chargement ---- */
/* Fond posé sous l'image le temps du téléchargement/décodage : plus de trou blanc.
La place, elle, est réservée par l'aspect-ratio du conteneur ou par les attributs
width/height que evmt_image() génère. */
.evmt-media-ph { background-color: var(--color-surface); }
.evmt-media-ph--dark { background-color: #0D0D0D; }
/* La classe .evmt-fade est posée sur par le script inline de functions.php.
Sans JS elle n'existe pas : les images s'affichent normalement, jamais masquées. */
.evmt-fade img[data-fade] { transition: opacity 0.5s ease; }
.evmt-fade img[data-fade]:not(.is-loaded) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.evmt-fade img[data-fade] { transition: none; }
}
/* Les attributs width/height générés par evmt_image() imposent la hauteur native.
Sur les images en pleine largeur sans hauteur CSS, il faut la rendre fluide. */
.evmt-single-rea__hero img,
.evmt-rea-block__media img,
.evmt-refs__item img { height: auto; }
/* Blocs image du détail réalisation */
.evmt-rea-block__media { background-color: var(--color-surface); }
.evmt-rea-block__media img { display: block; width: 100%; }
/* Bloc « Média + petite image » : en face d'un média très vertical, une vignette
centrée et cernée de blanc plutôt qu'un pavé de texte (retour client du
2026-08-20). Pas de fond ni de cadre : c'est le blanc de la page qui fait la marge. */
.evmt-rea-block__inset img { display: block; width: 100%; max-width: 60%; height: auto; margin: 0 auto; }
@media screen and (max-width: 900px) {
.evmt-rea-block__inset { margin-top: 1.5em; }
.evmt-rea-block__inset img { max-width: 55%; }
}
/* Bloc « Composition d'images » : grille éditoriale libre du détail réalisation.
La largeur et la colonne de départ passent par les utilitaires col-N / col-start-N ;
seule la LIGNE est posée en variable inline (--row), sinon l'auto-placement de CSS
Grid ferait remonter une image dans le blanc laissé par la précédente. L'écart entre
les lignes est la gouttière (gap-gutter) : c'est le vide autour des images, et non
l'espacement, qui fait la respiration de la composition. */
.evmt-rea-comp__item { grid-row: var(--row, auto); }
@media screen and (max-width: 900px) {
/* Empilement pleine largeur : plus de lignes ni de colonnes imposées.
(.evmt-rea-block__media force déjà grid-column: 1 / -1 sur mobile.) */
.evmt-rea-comp__item { grid-row: auto; }
/* Une image posée sur 3 colonnes ou moins est un détail, pas un plein cadre :
en pleine largeur sur mobile elle écraserait la composition. On la garde
petite et centrée, comme la vignette du bloc « Média + petite image ». */
.evmt-rea-comp__item--small { background-color: transparent; }
.evmt-rea-comp__item--small img { max-width: 60%; margin: 0 auto; }
}
/* Blocs vidéo : la place est réservée par le ratio choisi en admin (--video-ratio,
posé en style inline par evmt_video()) — sinon la balise ferait 300x150 tant que
la vidéo n'est pas chargée (preload="none"), d'où un saut de mise en page. */
.evmt-video { display: block; width: 100%; height: auto; aspect-ratio: var(--video-ratio, 16 / 9); object-fit: cover; background-color: #0D0D0D; }