:root { --u: calc(min(100vw, 1920px) / 1920); --c-black: #000;
--c-ink: #1d1d1b;
--c-white: #fff;
--c-blue: #7d97a1;
--c-blue-dark: #82939d;
--c-blue-ghost: #e7ecee; --c-blue-ghost-survol: #dce4e7; --c-sand: #f0ece9; --c-grey: #808080;
--c-grey-light: #898989;
--c-line: #707070;
--c-overlay: #cecece; --c-focus: #7d97a1;
--c-erreur: #b3261e; --c-placeholder: #6f6f6f; --c-trait-doux: rgb(0 0 0 / 0.14);  --ff-sans: "Gotham", "Helvetica Neue", Arial, sans-serif;
--ff-serif: "freight-big-pro", Georgia, "Times New Roman", serif;
--ff-condensed: "Bebas Neue", "Arial Narrow", sans-serif;
--fw-book: 400;
--fw-medium: 500;
--fw-bold: 700; --fs-display: clamp(3.5rem, calc(120 * var(--u)), 7.5rem); --fs-display-store: clamp(2.75rem, calc(101 * var(--u)), 6.3125rem); --fs-store-list: clamp(2.25rem, calc(70 * var(--u)), 4.375rem); --fs-accroche: clamp(1.625rem, calc(48 * var(--u)), 3rem); --fs-titre-section: clamp(1.5rem, calc(42 * var(--u)), 2.625rem); --fs-body: clamp(1.0625rem, calc(20 * var(--u)), 1.25rem); --fs-nav: 1.25rem; --fs-cta: 0.875rem; --fs-legende-titre: 0.875rem; --fs-legende: 0.75rem; --fs-footer: 0.8125rem;  --lh-display: 0.9167; --lh-display-store: 0.901; --lh-store-list: 1; --lh-accroche: 1.0417; --lh-titre-section: 1.19; --lh-body: 1.4; --lh-timeline: 2.3; --lh-nav: 2.8; --lh-nav-empilee: 1.9; --lh-cta: 1.4286; --lh-legende: 1.25; --lh-footer: 1.3077; --lh-legende-titre: 1.25; --lh-nom-vertical: 1.357;  --ls-display: -0.03em; --ls-display-store: -0.021em; --container-max: 1556px;
--page-margin: max(1rem, calc(182 * var(--u)));
--container: min(100% - 2 * var(--page-margin), var(--container-max));
--gutter: max(0.75rem, calc(16 * var(--u)));
--columns: 12; --space-3xs: 0.25rem; --space-xs: 0.5rem; --space-s: 1rem; --space-m: 1.25rem; --space-l: 2.5rem; --space-xl: 4rem;  --radius-media: max(0.375rem, calc(10 * var(--u))); --radius-panel: max(1rem, calc(30 * var(--u)));
--line-width: 1px;
--store-rule: 3px; --t-hover: 0.3s ease-out;
--t-header: 0.35s ease-out; --courbe-rideau: cubic-bezier(0.77, 0, 0.18, 1); --t-menu: 0.7s;
--t-menu-pas: 0.07s; --courbe-apparition: cubic-bezier(0.2, 0.65, 0.25, 1);
--t-apparition: 0.9s;
--t-apparition-pas: 0.12s; --apparition-decalage: 2rem; --apparition-zoom: 1.06; --apparition-rotation: -25deg; --apparition-tampon: 0.8;
--hover-decalage-fleche: 18px; --hover-glissement: 12px; --cta-gap: 1.0625rem; --cta-zone: 0.75rem; --fleche-long: 22px;
--fleche-larg: 15px; --z-base: 1;
--z-header: 10;
--z-menu: 100;
--z-dessus: 2; --header-pad-top: calc(46 * var(--u));
--header-pad-bas: calc(20 * var(--u));  --header-inset: max(1rem, calc((100% - var(--container)) / 2 - 86 * var(--u)));
--logo-w: max(2rem, calc(48 * var(--u)));
--nav-gap: calc(104 * var(--u));
--nav-haut: calc(61 * var(--u)); --logo-ratio: 47.33 / 90.14;
--logo-survol-echelle: 2.586; --logo-w-compact: max(1.5rem, calc(30 * var(--u))); --header-compact-pad: 0.875rem;
--ombre-header: 0 1px 0 rgb(0 0 0 / 0.06);
--header-h: calc(var(--header-pad-top) + var(--logo-w) / (var(--logo-ratio)) + var(--header-pad-bas)); --burger-zone: 2.75rem; --burger-w: 1.625rem; --burger-h: 0.625rem; --burger-trait: 1.5px; --burger-court: 60%; --menu-icone-w: 1.75rem; --hero-pad-top: calc(19 * var(--u)); --hero-titre-decalage: calc(78 * var(--u)); --hero-titre-haut: calc(88 * var(--u)); --hero-titre-w: calc(707 * var(--u));
--hero-accroche-decalage: calc(8 * var(--u)); --hero-accroche-haut: calc(16 * var(--u));
--hero-accroche-w: calc(770 * var(--u));
--hero-retourne-decalage: calc(-30 * var(--u)); --hero-retourne-haut: calc(38 * var(--u));
--hero-photo-ratio: 638 / 819;
--hero-tampon-w: calc(193 * var(--u));
--hero-tampon-x: calc(-119 * var(--u)); --hero-tampon-y: calc(547 * var(--u)); --hero-nom-x: calc(19 * var(--u)); --hero-cta-haut: calc(21 * var(--u));
--hero-texte-haut: calc(93 * var(--u)); --hero-cta-decalage-texte: calc(-30 * var(--u)); --hero-mobile-display: min(19vw, 9svh); --hero-mobile-accroche: min(8vw, 3.9svh);
--hero-mobile-photo-w: 62%; --sep-h: max(5rem, calc(197 * var(--u)));
--sep-avant: calc(55 * var(--u));
--sep-chevauche-suivante: calc(52 * var(--u));
--sep-chevauche-precedente: calc(67 * var(--u));
--sep-cta-x: calc(40 * var(--u)); --univers-pad-top: calc(98 * var(--u));
--univers-scene-haut: calc(246 * var(--u)); --univers-debut: calc((100% - var(--container)) / 2 - 14 * var(--u)); --univers-fin: calc(411 * var(--u)); --univers-gap: calc(81 * var(--u));
--univers-scene-marge: calc(100 * var(--u)); --univers-scene-natif: clamp(22rem, calc(834 * var(--u)), 52.125rem);  --selection-pad-top: calc(125 * var(--u));
--themes-haut: calc(53 * var(--u));
--themes-decalage: calc(75 * var(--u)); --themes-gap-ligne: calc(9 * var(--u));
--themes-gap: calc(6 * var(--u));
--selection-bas: calc(296 * var(--u));  --fiche-fond-h: 120vh; --fiche-pad-top: calc(7 * var(--u)); --fiche-texte-haut: calc(100 * var(--u)); --fiche-titre-haut: calc(-44 * var(--u)); --fiche-caracs-haut: calc(10 * var(--u));
--fiche-desc-haut: calc(45 * var(--u));
--fiche-cta-bas: 0px;
--fiche-contenu-haut: calc(133 * var(--u)); --fiche-gap: calc(105 * var(--u));
--fiche-gap-colonnes: calc(106 * var(--u));
--fiche-ratio-demi: 725 / 920; --video-bouton: 2.75rem; --video-lecture-l: 11px; --video-lecture-h: 7px;
--video-lecture-optique: 3px; --video-pause-w: 10px; --video-pause-h: 12px;
--video-pause-barre: 3px;
--fiche-nav-haut: calc(103 * var(--u));
--fiche-nav-bas: calc(176 * var(--u));
--fiche-nav-ecart: calc(78 * var(--u));
--fiche-nav-decalage: calc(-7 * var(--u));  --parcours-liste-haut: calc(200 * var(--u)); --parcours-col-annee: max(8rem, calc(198 * var(--u))); --parcours-illu-w: calc(480 * var(--u));
--parcours-illu-haut: calc(136 * var(--u)); --parcours-illu-mobile: min(70%, 20rem);
--parcours-pad-bas: calc(213 * var(--u));  --image-pleine-haut: calc(65 * var(--u));
--image-pleine-bas: calc(11 * var(--u));
--image-pleine-max: 1200px;  --page-404-bas: calc(200 * var(--u));
--page-404-motif-w: max(10rem, calc(380 * var(--u)));
--page-404-motif-mobile: 5rem; --contact-pad-top: calc(88 * var(--u));
--contact-pad-bas: calc(140 * var(--u));
--contact-marge-bas: max(var(--space-xl), var(--citation-bas)); --contact-ecart: max(2rem, calc(64 * var(--u)));
--lh-phrase: 1.55; --fs-contact-message: clamp(1.25rem, calc(32 * var(--u)), 2rem);
--lh-contact-message: 1.6;
--contact-champ-min: 8ch;
--contact-trait-focus: 2px;
--contact-mention-w: 28rem;
--contact-tampon-pose-w: max(9rem, calc(260 * var(--u)));
--contact-tampon-mobile: 6.5rem;
--t-tampon: 0.9s;
--courbe-tampon: cubic-bezier(0.2, 0.9, 0.3, 1.2); --tampon-depart-echelle: 2.4;
--tampon-depart-rotation: -40deg;
--tampon-rebond: 0.94; --citation-w: calc(1294 * var(--u));
--citation-haut: calc(110 * var(--u));
--citation-haut-trait: calc(71 * var(--u)); --citation-bas: calc(170 * var(--u)); --store-h: calc(492 * var(--u));
--store-pad-x: calc(93 * var(--u));
--store-pad-top: calc(52 * var(--u));
--store-titre-x: calc(90 * var(--u));
--store-gap-trait: calc(62 * var(--u));
--store-gap-liste: calc(34 * var(--u));
--store-trait-h: calc(263 * var(--u));
--store-tampon-w: calc(295 * var(--u));
--store-tampon-droite: calc(72 * var(--u));
--store-pad-bas: calc(52 * var(--u));
--store-titre-decalage: calc(-8 * var(--u)); --store-texte-bas: calc(17 * var(--u)); --store-tampon-tablette: 7.5rem;
--store-tampon-mobile: 6.75rem; --store-trait-mobile: 3.75rem;
--store-trait-survol: 1.12; --store-tampon-survol: 25deg;  --footer-haut: calc(238 * var(--u));
--footer-bas: calc(48 * var(--u));
--footer-col-w: max(26rem, calc(655 * var(--u)));
--footer-icone-w: max(2.5rem, calc(53 * var(--u)));
--footer-swiss-w: max(2.5rem, calc(50 * var(--u)));
--footer-texte-haut: calc(31 * var(--u));
--footer-icone-haut: 0px;
--footer-rangee: calc(50 * var(--u));
} @media (max-width: 1023.98px) {
:root {
--page-margin: 2.5rem;
--gutter: 1rem;
--header-inset: var(--page-margin);
}
} @media (max-width: 767.98px) {
:root {
--page-margin: 1rem;
--header-pad-top: var(--space-s);
--header-pad-bas: var(--space-s);
--header-compact-pad: var(--space-xs);
}
}@font-face {
font-family: "Gotham";
src: url(//www.denisherisson.com/wp-content/themes/denis_herisson/assets/fonts/gotham-book.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gotham";
src: url(//www.denisherisson.com/wp-content/themes/denis_herisson/assets/fonts/gotham-medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gotham";
src: url(//www.denisherisson.com/wp-content/themes/denis_herisson/assets/fonts/gotham-bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
} @font-face {
font-family: "Bebas Neue";
src: url(//www.denisherisson.com/wp-content/themes/denis_herisson/assets/fonts/bebas-neue.woff2) format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
margin: 0;
} :where(ul[class], ol[class]) {
padding: 0;
list-style: none;
}
img,
svg,
video,
picture {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: 0;
padding: 0;
} body {
background: var(--c-white);
color: var(--c-black);
font-family: var(--ff-sans);
font-weight: var(--fw-book);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
a {
color: inherit;
text-decoration: none;
}
strong,
b {
font-weight: var(--fw-bold);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
line-height: inherit;
} :focus-visible {
outline: 2px solid var(--c-focus);
outline-offset: 4px;
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: fixed;
top: 1rem;
left: 1rem;
z-index: var(--z-menu);
width: auto;
height: auto;
padding: 1rem 1.5rem;
clip: auto;
background: var(--c-white);
color: var(--c-black);
font-size: var(--fs-cta);
font-weight: var(--fw-medium);
text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}.site {
overflow-x: clip; } .conteneur {
width: var(--container);
margin-inline: auto;
} .grille {
display: grid;
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
column-gap: var(--gutter);
} .section {
position: relative;
}
.section--sable {
background: var(--c-sand);
} .titre-section {
font-family: var(--ff-serif);
font-style: italic;
font-weight: var(--fw-medium);
font-size: var(--fs-titre-section);
line-height: var(--lh-titre-section);
} .titre-display {
font-family: var(--ff-sans);
font-weight: var(--fw-bold);
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
}
.titre-display--fantome {
color: var(--c-blue-ghost);
}
.titre-display--blanc {
color: var(--c-white);
} .media-vide {
background: var(--c-blue-ghost);
}.js [data-apparition] {
transition:
opacity var(--t-apparition) var(--courbe-apparition),
translate var(--t-apparition) var(--courbe-apparition),
scale var(--t-apparition) var(--courbe-apparition),
rotate var(--t-apparition) var(--courbe-apparition),
clip-path var(--t-apparition) var(--courbe-apparition);
transition-delay: calc(var(--ordre, 0) * var(--t-apparition-pas));
} .js [data-apparition="image"] > :first-child {
clip-path: inset(calc(-1 * var(--space-s)));
transition:
clip-path var(--t-apparition) var(--courbe-apparition),
scale var(--t-apparition) var(--courbe-apparition);
transition-delay: calc(var(--ordre, 0) * var(--t-apparition-pas));
}
.js:not(.apparition-secours) {
& [data-apparition="texte"]:not(.est-visible) {
opacity: 0;
translate: 0 var(--apparition-decalage);
}
& [data-apparition="image"]:not(.est-visible) > :first-child {
clip-path: inset(100% 0 0 0);
scale: var(--apparition-zoom);
}
& [data-apparition="tampon"]:not(.est-visible) {
opacity: 0;
rotate: var(--apparition-rotation);
scale: var(--apparition-tampon);
}
& [data-apparition="trait"]:not(.est-visible) {
scale: 1 0;
}
& [data-apparition="fondu"]:not(.est-visible) {
opacity: 0;
}
}
.js [data-apparition="trait"] {
transform-origin: top;
} [data-apparition-chargement] {
animation: var(--t-apparition) var(--courbe-apparition) calc(var(--ordre, 0) * var(--t-apparition-pas)) both;
}
[data-apparition-chargement="texte"] {
animation-name: apparition-texte;
}
[data-apparition-chargement="tampon"] {
animation-name: apparition-tampon;
}
[data-apparition-chargement="fondu"] {
animation-name: apparition-fondu;
} [data-apparition-chargement="image"] {
animation: none;
& > :first-child {
clip-path: inset(calc(-1 * var(--space-s)));
animation: apparition-image var(--t-apparition) var(--courbe-apparition) calc(var(--ordre, 0) * var(--t-apparition-pas)) both;
}
}
@keyframes apparition-texte {
from {
opacity: 0;
translate: 0 var(--apparition-decalage);
}
}
@keyframes apparition-tampon {
from {
opacity: 0;
rotate: var(--apparition-rotation);
scale: var(--apparition-tampon);
}
}
@keyframes apparition-fondu {
from {
opacity: 0;
}
}
@keyframes apparition-image {
from {
clip-path: inset(100% 0 0 0);
scale: var(--apparition-zoom);
}
} .filtre-apparait {
animation: filtre-apparition var(--t-apparition) var(--courbe-apparition) both;
}
@keyframes filtre-apparition {
from {
opacity: 0;
translate: 0 var(--apparition-decalage);
}
}
@media (prefers-reduced-motion: reduce) {
.js [data-apparition],
.js [data-apparition] > :first-child {
opacity: 1 !important;
translate: none !important;
scale: none !important;
rotate: none !important;
clip-path: none !important;
}
[data-apparition-chargement],
[data-apparition-chargement] > :first-child {
animation: none !important;
}
}.lien-fleche {
--fleche-rotation: 0deg;
display: inline-flex;
align-items: center;
gap: var(--cta-gap);
padding-block: var(--cta-zone);
margin-block: calc(-1 * var(--cta-zone));
font-family: var(--ff-sans);
font-weight: var(--fw-medium);
font-size: var(--fs-cta);
line-height: var(--lh-cta);
text-transform: uppercase;
white-space: nowrap; color: inherit;
}
.lien-fleche--gauche {
--fleche-rotation: 180deg;
}
.lien-fleche--bas {
--fleche-rotation: 90deg;
}
.lien-fleche--haut {
--fleche-rotation: -90deg;
} .lien-fleche__fleche {
position: relative;
flex: none;
width: var(--fleche-long);
height: var(--fleche-larg);
color: var(--c-ink);
}
.lien-fleche--bas .lien-fleche__fleche,
.lien-fleche--haut .lien-fleche__fleche {
width: var(--fleche-larg);
height: var(--fleche-long);
}
.lien-fleche__fleche .fleche__svg {
position: absolute;
top: 50%;
left: 50%;
width: var(--fleche-long);
max-width: none;
height: var(--fleche-larg);
transform: translate(-50%, -50%) rotate(var(--fleche-rotation));
transition: opacity var(--t-hover), transform var(--t-hover);
} .lien-fleche__fleche .fleche__svg + .fleche__svg {
opacity: 0;
}
.lien-fleche:hover .fleche__svg + .fleche__svg,
.lien-fleche:focus-visible .fleche__svg + .fleche__svg {
opacity: 1;
transform: translate(-50%, -50%) rotate(var(--fleche-rotation)) translateX(var(--hover-decalage-fleche));
}.header {
position: relative;
z-index: var(--z-header);
height: var(--header-h);
}
.header__barre {
position: fixed;
inset: 0 0 auto;
padding-top: var(--header-pad-top);
padding-bottom: var(--header-pad-bas);
background: var(--c-white);
transition:
transform var(--t-header),
padding var(--t-header),
box-shadow var(--t-header);
}
.header__logo {
display: block;
width: var(--logo-w);
margin-left: var(--header-inset);
transition: width var(--t-header);
}
.header__logo-img {
width: 100%;
height: auto;
aspect-ratio: var(--logo-ratio);
} .header__logo--survol {
position: relative;
}
.header__logo-img,
.header__logo-survol {
transition: opacity var(--t-hover);
}
.header__logo-survol {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% * var(--logo-survol-echelle));
max-width: none;
height: auto;
opacity: 0;
pointer-events: none;
translate: -50% -50%;
}
.header__logo--survol:hover,
.header__logo--survol:focus-visible {
& .header__logo-img {
opacity: 0;
}
& .header__logo-survol {
opacity: 1;
}
}
.header__logo-texte {
font-weight: var(--fw-bold);
font-size: var(--fs-nav);
white-space: nowrap;
} .header__nav {
position: absolute;
top: var(--nav-haut);
left: calc((100% - var(--container)) / 2 + 2 * ((var(--container) - (var(--columns) - 1) * var(--gutter)) / var(--columns) + var(--gutter)));
transition: top var(--t-header), transform var(--t-header);
}
.header__menu {
display: flex;
gap: var(--nav-gap);
}
.header__lien {
display: block;
font-weight: var(--fw-medium);
font-size: var(--fs-nav);
line-height: var(--lh-nav);
text-transform: uppercase;
white-space: nowrap;
transition: color var(--t-hover);
&:hover,
&[aria-current] {
color: var(--c-blue);
}
} .header__burger {
display: none;
} .header--compact {
& .header__barre {
padding-block: var(--header-compact-pad);
box-shadow: var(--ombre-header);
}
& .header__logo {
width: var(--logo-w-compact);
}
& .header__nav {
top: 50%;
transform: translateY(-50%);
}
}
.header--cache .header__barre {
transform: translateY(-100%);
box-shadow: none;
} @media (max-width: 1023.98px) {
.header__nav {
left: auto;
right: var(--page-margin);
}
.header__menu {
gap: var(--space-l);
}
} @media (max-width: 767.98px) {
.header__barre {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--page-margin);
}
.header__logo {
margin-left: 0;
}
.header__nav,
.header--compact .header__nav {
position: static;
transform: none;
}
.header__menu {
flex-wrap: wrap;
justify-content: flex-end;
column-gap: var(--space-m);
}
.header__lien {
font-size: var(--fs-cta);
line-height: var(--lh-nav);
}
.js .header__nav {
display: none;
}
.js .header__burger {
display: grid;
}
}.burger {
place-items: center;
width: var(--burger-zone);
height: var(--burger-zone);
margin-right: calc((var(--burger-zone) - var(--burger-w)) / -2);
color: var(--c-black);
}
.burger--croix {
display: grid;
}
.burger__icone {
position: relative;
display: block;
width: var(--burger-w);
height: var(--burger-h);
}
.burger__trait {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: var(--burger-trait);
border-radius: var(--burger-trait);
background: currentColor;
transition:
top var(--t-menu) var(--courbe-rideau),
width var(--t-hover),
transform var(--t-menu) var(--courbe-rideau);
& + & {
top: calc(100% - var(--burger-trait));
width: var(--burger-court);
}
}
.burger:hover .burger__trait + .burger__trait,
.burger:focus-visible .burger__trait + .burger__trait {
width: 100%;
} .menu-mobile {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
margin: 0;
padding: 0 var(--page-margin) var(--space-l);
border: 0;
background: var(--c-white);
color: var(--c-black);
clip-path: inset(0 0 100% 0);
transition: clip-path var(--t-menu) var(--courbe-rideau) var(--t-menu-pas);
&::backdrop {
background: transparent;
}
&[open] {
display: flex;
flex-direction: column;
}
&.est-ouvert {
clip-path: inset(0);
transition-delay: 0s;
}
} .menu-mobile__haut {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--space-s);
}
.menu-mobile--compact .menu-mobile__haut {
padding-block: var(--space-xs);
}
.menu-mobile__logo {
display: block;
width: var(--logo-w);
transition: width var(--t-header);
}
.menu-mobile--compact .menu-mobile__logo {
width: var(--logo-w-compact);
}
.menu-mobile__logo-img {
width: 100%;
height: auto;
aspect-ratio: var(--logo-ratio);
} .menu-mobile.est-ouvert .burger--croix .burger__trait {
top: calc(50% - var(--burger-trait) / 2);
width: 100%;
transform: rotate(45deg);
transition-delay: calc(var(--t-menu-pas) * 3);
& + .burger__trait {
transform: rotate(-45deg);
}
} .menu-mobile__nav {
margin-block: auto;
}
.menu-mobile__item {
overflow: hidden; }
.menu-mobile__lien {
display: block;
font-weight: var(--fw-bold);
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
text-transform: uppercase;
padding-block: var(--space-xs);
transition: color var(--t-hover);
&:hover,
&[aria-current] {
color: var(--c-blue);
}
}
.menu-mobile__texte {
display: block;
transform: translateY(110%);
transition: transform var(--t-menu) var(--courbe-rideau);
}
.menu-mobile.est-ouvert {
& .menu-mobile__texte {
transform: none;
transition-delay: calc(var(--t-menu-pas) * (var(--i, 1) + 2));
}
} .menu-mobile__logo,
.menu-mobile__pied {
opacity: 0;
transform: translateY(var(--space-xs));
transition:
opacity var(--t-hover),
transform var(--t-hover),
width var(--t-header);
}
.menu-mobile.est-ouvert {
& .menu-mobile__logo,
& .menu-mobile__pied {
opacity: 1;
transform: none;
transition-delay: calc(var(--t-menu-pas) * 4);
}
& .menu-mobile__pied {
transition-delay: calc(var(--t-menu-pas) * 7);
}
}
.menu-mobile__pied {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
padding-top: var(--space-m);
border-top: var(--line-width) solid var(--c-blue-ghost);
}
.menu-mobile__store {
color: var(--c-blue);
& .lien-fleche__fleche {
color: var(--c-blue);
}
}
.menu-mobile__reseaux {
display: flex;
gap: var(--space-s);
}
.menu-mobile__reseau-icone {
width: var(--menu-icone-w);
height: auto;
} html:has(.menu-mobile[open]) {
overflow: hidden;
} @media (min-width: 768px) {
.menu-mobile {
display: none !important;
}
}.separateur {
position: relative;
z-index: var(--z-base);
display: flex;
justify-content: center;
height: var(--sep-h);
margin-top: var(--sep-avant);
}
.separateur__trait {
width: var(--line-width);
height: 100%;
background: var(--c-line);
}
.separateur--suivante {
margin-bottom: calc(-1 * var(--sep-chevauche-suivante));
}
.separateur--precedente {
margin-top: calc(-1 * var(--sep-chevauche-precedente));
}
.separateur__cta {
position: absolute;
top: 50%;
left: calc(50% + var(--sep-cta-x));
transform: translateY(-50%);
white-space: nowrap;
}.bandeau-store {
position: relative;
display: flex;
flex-direction: column;
min-height: var(--store-h);
padding: var(--store-pad-top) var(--store-tampon-droite) var(--store-pad-bas) var(--store-pad-x);
border-radius: var(--radius-media);
background: var(--c-blue-ghost);
color: var(--c-blue-dark);
transition: background var(--t-hover);
} .bandeau-store--lien {
cursor: pointer;
& .bandeau-store__lien::after {
content: "";
position: absolute;
inset: 0;
z-index: var(--z-dessus); border-radius: inherit;
} & .bandeau-store__lien:focus-visible {
outline: none;
}
&:has(.bandeau-store__lien:focus-visible) {
outline: 2px solid var(--c-focus);
outline-offset: 4px;
}
}
.bandeau-store__lien {
align-self: flex-start;
color: var(--c-blue);
& .lien-fleche__fleche {
color: var(--c-blue);
}
}
.bandeau-store__contenu {
display: flex;
align-items: center;
flex: 1;
margin-left: var(--store-titre-decalage);
}
.bandeau-store__titre,
.bandeau-store__liste {
position: relative;
top: var(--store-texte-bas);
}
.bandeau-store__titre {
font-weight: var(--fw-bold);
font-size: var(--fs-display-store);
line-height: var(--lh-display-store);
letter-spacing: var(--ls-display-store);
text-transform: uppercase;
}
.bandeau-store__liste {
margin-left: var(--store-gap-trait);
padding-left: var(--store-gap-liste);
font-family: var(--ff-condensed);
font-size: var(--fs-store-list);
line-height: var(--lh-store-list);
text-transform: uppercase; &::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: var(--store-rule);
height: var(--store-trait-h);
background: var(--c-blue);
transform: translateY(-50%);
}
}
.bandeau-store__tampon {
flex: none;
width: var(--store-tampon-w);
height: auto;
margin-left: auto;
} @media (hover: hover) and (min-width: 768px) {
.bandeau-store--lien {
&:hover,
&:has(.bandeau-store__lien:focus-visible) {
background: var(--c-blue-ghost-survol); & .fleche__svg + .fleche__svg {
opacity: 1;
transform: translate(-50%, -50%) rotate(var(--fleche-rotation)) translateX(var(--hover-decalage-fleche));
}
& .bandeau-store__liste::before {
transform: translateY(-50%) scaleY(var(--store-trait-survol));
}
& .bandeau-store__tampon {
rotate: var(--store-tampon-survol);
}
}
}
.bandeau-store__liste::before {
transition: transform var(--t-apparition) var(--courbe-apparition);
} .bandeau-store--lien .bandeau-store__tampon.est-visible {
transition-delay: 0s;
}
} @media (max-width: 1023.98px) {
.bandeau-store {
position: relative;
padding: var(--space-l);
}
.bandeau-store__contenu {
margin: var(--space-l) 0 0;
}
.bandeau-store__tampon {
position: absolute;
top: var(--space-m);
right: var(--space-m);
width: var(--store-tampon-tablette);
}
} @media (max-width: 767.98px) {
.bandeau-store {
width: calc(100% - 2 * var(--page-margin));
min-height: 0;
padding: var(--space-l) var(--space-m);
}
.bandeau-store__titre,
.bandeau-store__liste {
top: 0;
}
.bandeau-store__contenu {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"titre titre"
"liste tampon";
align-items: end;
column-gap: var(--space-s);
}
.bandeau-store__titre {
grid-area: titre;
}
.bandeau-store__liste {
grid-area: liste;
margin: var(--space-m) 0 0;
padding: var(--space-m) 0 0;
&::before {
top: 0;
width: var(--store-trait-mobile);
height: var(--store-rule);
transform: none;
}
}
.bandeau-store__tampon {
grid-area: tampon;
position: static;
width: var(--store-tampon-mobile);
margin: 0;
}
}.footer {
padding-top: var(--footer-haut);
padding-bottom: var(--footer-bas);
}
.footer__inner {
display: grid; grid-template-columns: 1fr minmax(var(--footer-col-w), max-content);
grid-template-areas:
"reseaux infos"
"haut swiss";
row-gap: var(--footer-rangee);
}
.footer__reseaux {
grid-area: reseaux;
display: flex;
gap: var(--space-m);
align-self: start;
margin-top: var(--footer-icone-haut);
}
.footer__reseau-lien {
display: block;
transition: opacity var(--t-hover);
&:hover {
opacity: 0.6;
}
}
.footer__reseau-icone {
width: var(--footer-icone-w);
height: auto;
}
.footer__infos {
grid-area: infos;
}
.footer__menu {
display: flex;
justify-content: space-between;
}
.footer__lien {
display: block;
font-weight: var(--fw-medium);
font-size: var(--fs-nav);
line-height: var(--lh-nav);
text-transform: uppercase;
transition: color var(--t-hover);
&:hover,
&[aria-current] {
color: var(--c-blue);
}
}
.footer__texte {
margin-top: var(--footer-texte-haut);
font-size: var(--fs-footer);
line-height: var(--lh-footer);
color: var(--c-grey-light);
text-align: right;
& p + p {
margin-top: 1lh; }
} @media (min-width: 1024px) {
.footer__texte {
white-space: nowrap;
}
}
.footer__haut {
grid-area: haut;
align-self: start;
justify-self: start;
}
.footer__swiss {
grid-area: swiss;
justify-self: end;
width: var(--footer-swiss-w);
}
.footer__swiss-img {
width: 100%;
height: auto;
} @media (max-width: 767.98px) {
.footer__inner {
grid-template-columns: 1fr auto;
grid-template-areas:
"reseaux reseaux"
"infos infos"
"haut swiss";
row-gap: var(--space-l);
}
.footer__reseaux {
margin-top: 0;
}
.footer__menu {
flex-direction: column;
}
.footer__lien {
line-height: var(--lh-nav-empilee);
}
.footer__texte {
text-align: left;
}
.footer__haut {
align-self: center;
}
}.single-oeuvre .header:not(.header--compact) .header__barre {
background: transparent;
}
.fiche-sombre .header:not(.header--compact) {
color: var(--c-white);
& .header__logo-img,
& .header__logo-survol {
filter: invert(1);
}
& .burger {
color: var(--c-white);
}
}  .fiche__fond {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
height: var(--fiche-fond-h);
border-radius: var(--radius-panel);
background: var(--fiche-fond);
} .fiche__corps {
min-height: calc(var(--fiche-fond-h) - var(--header-h));
} .fiche__intro {
padding-top: var(--fiche-pad-top);
}
.fiche__texte {
display: flex;
flex-direction: column;
align-items: flex-start;
grid-column: 1 / 8;
grid-row: 1;
padding-top: var(--fiche-texte-haut);
} .fiche__theme {
margin-left: var(--hero-titre-decalage);
color: var(--c-white);
transition: opacity var(--t-hover);
&:hover {
opacity: 0.7;
}
}
.fiche__titre {
position: relative;
margin-top: var(--fiche-titre-haut);
font-family: var(--ff-serif);
font-style: italic;
font-weight: var(--fw-medium);
font-size: var(--fs-accroche);
line-height: var(--lh-accroche);
}
.fiche__caracs {
margin-top: var(--fiche-caracs-haut);
font-size: var(--fs-legende);
line-height: var(--lh-legende);
color: var(--c-grey);
}
.fiche__description {
max-width: var(--hero-accroche-w);
margin-top: var(--fiche-desc-haut);
& p + p {
margin-top: 1lh;
}
} .fiche__cta {
margin-top: auto;
padding-top: var(--space-l);
margin-bottom: var(--fiche-cta-bas);
}
.fiche__image {
grid-column: 8 / -1;
grid-row: 1;
align-self: start;
}
.fiche__image-img {
width: 100%;
height: auto;
} .fiche--sombre {
& .fiche__titre,
& .fiche__description,
& .fiche__cta {
color: var(--c-white);
}
& .fiche__cta .lien-fleche__fleche {
color: var(--c-white);
}
& .fiche__caracs {
color: var(--c-grey-light);
}
}  .fiche__contenu {
display: flex;
flex-direction: column;
gap: var(--fiche-gap);
margin-top: var(--fiche-contenu-haut);
scroll-margin-top: var(--space-l);
& > *,
& .wp-block-column > * {
margin-block: 0;
}
& .wp-block-columns {
gap: var(--fiche-gap-colonnes);
margin-bottom: 0;
}
& .wp-block-column {
display: flex;
flex-direction: column;
gap: var(--fiche-gap);
}
& .wp-block-image,
& .wp-block-video,
& .wp-block-embed {
margin: 0;
}
& .wp-block-image img,
& .wp-block-video video {
display: block;
width: 100%;
height: auto;
}
& .wp-block-video {
position: relative;
} & .is-hauteurs-egales {
& .wp-block-image img {
aspect-ratio: var(--fiche-ratio-demi) !important;
object-fit: cover;
}
& .wp-block-video:not(:has(figcaption)) {
aspect-ratio: var(--fiche-ratio-demi);
overflow: hidden;
& video {
position: absolute;
inset: 0;
height: 100%;
aspect-ratio: auto !important;
object-fit: cover;
}
}
}
& .wp-block-embed__wrapper iframe {
width: 100%;
}
& .wp-block-image figcaption,
& .wp-block-video figcaption {
margin-top: var(--space-xs);
font-size: var(--fs-legende);
line-height: var(--lh-legende);
color: var(--c-grey);
} & > p,
& > h2,
& > h3,
& > ul,
& > ol {
max-width: var(--hero-accroche-w);
}
& > h2,
& > h3 {
font-family: var(--ff-serif);
font-style: italic;
font-weight: var(--fw-medium);
font-size: var(--fs-titre-section);
line-height: var(--lh-titre-section);
} & .is-style-citation,
& .wp-block-quote {
max-width: var(--citation-w);
margin-inline: auto;
padding: 0;
border: 0;
font-family: var(--ff-serif);
font-style: italic;
font-weight: var(--fw-medium);
font-size: var(--fs-accroche);
line-height: var(--lh-accroche);
text-align: center;
}
& .wp-block-quote cite {
display: block;
margin-top: var(--space-s);
font-family: var(--ff-sans);
font-style: normal;
font-size: var(--fs-cta);
text-transform: uppercase;
}
} .nav-oeuvres {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: var(--sep-h);
margin-top: var(--fiche-nav-haut);
margin-bottom: var(--fiche-nav-bas);
}
.nav-oeuvres__trait {
height: 100%;
}
.nav-oeuvres__lien {
display: flex; position: relative;
top: var(--fiche-nav-decalage);
}
.nav-oeuvres__lien--precedent {
justify-self: end;
margin-right: var(--fiche-nav-ecart);
}
.nav-oeuvres__lien--suivant {
justify-self: start;
margin-left: var(--fiche-nav-ecart);
} @media (max-width: 767.98px) {
.fiche__intro {
display: flex;
flex-direction: column;
}
.fiche__texte {
display: contents;
}
.fiche__theme {
margin-left: 0;
}
.fiche__description {
max-width: none;
}
.fiche__image {
order: 1;
margin-top: var(--space-l);
}
.fiche__cta {
order: 2;
margin: var(--space-l) 0 0;
padding-top: 0;
}
.fiche__contenu {
gap: var(--space-l);
margin-top: var(--space-xl);
& .wp-block-columns,
& .wp-block-column {
gap: var(--space-l);
}
}
.nav-oeuvres {
margin-block: var(--space-xl);
}
.nav-oeuvres__lien--precedent {
margin-right: var(--space-m);
}
.nav-oeuvres__lien--suivant {
margin-left: var(--space-m);
}
}