@font-face{
font-family:'Caveat Brush';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/caveat-brush-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Caveat Brush';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('../fonts/caveat-brush-400-latin.woff2') format('woff2');
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;
}
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:400 800;
font-display:swap;
src:url('../fonts/inter-400800-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:400 800;
font-display:swap;
src:url('../fonts/inter-400800-latin.woff2') format('woff2');
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;
}
:root{
--fond:#F7F3EF;
--fond-clair:#FFFDFB;
--fond-fonce:#EFE8E1;
--blanc:#FFFFFF;
--encre:#1D1614;
--violet:#883C90;
--violet-fonce:#6E3075;
--jaune:#FCF8BC;
--sable:#EDDFD2;
--chocolat:#4D2F29;
--sombre:var(--chocolat);
--affiche-haut:linear-gradient(to right,#C4B5A5,#E5D8C8 50%,#D0C2B6);
--affiche-haut-paysage:#D9C8B8;
--texte:var(--encre);
--texte-2:#453C38;
--texte-3:#5C514C;
--bord:#8B7F78;
--filet:#DED4CB;
--opacite-2:0.86;
--voile-clair:rgb(255 255 255 / 0.14);
--trait-clair:rgb(255 255 255 / 0.3);
--bord-clair:rgb(255 255 255 / 0.55);
--piste:rgb(77 47 41 / 0.14);
--ombre-douce:0 2px 14px rgb(77 47 41 / 0.08);
--ombre-bouton:0 6px 18px rgb(77 47 41 / 0.28);
--ombre-forte:0 18px 44px -14px rgb(77 47 41 / 0.45);
--f-texte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--f-display:var(--f-texte);
--f-script:'Caveat Brush','Bradley Hand',cursive;
--fs-s:0.875rem;
--fs-m:1.125rem;
--fs-l:clamp(1.375rem,1.05rem + 1.35vw,2rem);
--fs-2xl:clamp(2rem,1.50rem + 2.4vw,3rem);
--fs-3xl:clamp(2.75rem,1.80rem + 4.6vw,5rem);
--fw-texte:400;
--fw-gras:700;
--fw-titre:800;
--lh-titre:1.05;
--lh-dense:1.35;
--lh-texte:1.6;
--ls-titre:-0.02em;
--ls-libelle:0.1em;
--police-titre-l:var(--fw-titre) var(--fs-l)/var(--lh-titre) var(--f-display);
--police-titre-2xl:var(--fw-titre) var(--fs-2xl)/var(--lh-titre) var(--f-display);
--police-titre-3xl:var(--fw-titre) var(--fs-3xl)/var(--lh-titre) var(--f-display);
--police-libelle:var(--fw-gras) var(--fs-s)/var(--lh-titre) var(--f-texte);
--police-carte:var(--fw-gras) var(--fs-m)/var(--lh-dense) var(--f-texte);
--sp-1:0.25rem;--sp-2:0.5rem;--sp-3:0.75rem;--sp-4:1rem;
--sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:4rem;
--sp-9:6rem;--sp-10:8rem;
--espace-ligne:var(--sp-1);
--espace-lie:var(--sp-2);
--espace-texte:var(--sp-4);
--espace-action:var(--sp-5);
--espace-grille:clamp(1rem,0.7rem + 0.9vw,1.5rem);
--espace-bloc:clamp(2rem,1.2rem + 2vw,3rem);
--espace-partie:clamp(3rem,2rem + 2.8vw,4.5rem);
--section-y:clamp(4rem,1.8rem + 6vw,6rem);
--gouttiere:clamp(1rem,4vw,2.5rem);
--largeur-max:76rem;
--largeur-texte:38rem;
--r-0:0;
--r-pastille:999px;
--duree-appui:0.12s;
--duree-hover:0.22s;
--duree-etat:0.42s;
--ease:cubic-bezier(0.22,0.61,0.36,1);
--ease-piece:cubic-bezier(0.34,1.30,0.64,1);
--h-entete:56px;
--amorce:clamp(28px,5svh,80px);
--tenon:clamp(34px,8.5vw,66px);
--band:calc(var(--tenon) * 1.1);
--largeur-tenon:calc(var(--tenon) * 3.3);
--degagement-tenon:var(--sp-4);
--filet-jointure:2px;
--bosse:clamp(16px,3.2vw,26px);
--ombre-piece:0 1px 2px rgb(77 47 41 / 0.08),0 14px 28px -16px rgb(77 47 41 / 0.32);
--bord-bosse:rgb(77 47 41 / 0.16);
--tuile-tenon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none'%3E%3Cpath d='M22 20C8-4 52-4 38 20z' fill='%23000'/%3E%3C/svg%3E");
--tuile-tenon-filet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none'%3E%3Cpath d='M22 20C8-4 52-4 38 20z' fill='%23DED4CB'/%3E%3C/svg%3E");
--tuile-tenon-ombre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -5 60 31' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Cpath d='M22 26V20C8-4 52-4 38 20V26z' filter='url(%23f)'/%3E%3C/svg%3E");
--tuile-tenon-reflet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none'%3E%3Cpath d='M22 20C8-4 52-4 38 20' fill='none' stroke='%23fff' stroke-opacity='.26' stroke-width='1.5'/%3E%3C/svg%3E");
--relief-couleur:45 26 23;
--reflet-jointure:rgb(255 255 255 / 0.26);
}
@media (min-width:768px){:root{--h-entete:72px}}
*,*::before,*::after{box-sizing:border-box}
html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
background:var(--fond);
color:var(--texte);
font:var(--fw-texte) var(--fs-m)/var(--lh-texte) var(--f-texte);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}
h1,h2,h3,h4,.titre-page{text-wrap:balance}
p,li{text-wrap:pretty}
ol,ul{padding:0;list-style:none}
img,picture,svg,video{display:block;max-inline-size:100%}
img,video{block-size:auto}
a{color:inherit}
button{font-family:inherit}
:target{scroll-margin-block-start:calc(var(--h-entete) + var(--sp-5))}
::selection{background:var(--jaune);color:var(--encre)}
[hidden]{display:none !important}
.visually-hidden{
position:absolute !important;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
clip-path:inset(50%);
white-space:nowrap;
border:0;
}
.saut-contenu{
position:absolute;
inset-block-start:-100%;
inset-inline-start:var(--sp-3);
z-index:200;
padding:var(--sp-3) var(--sp-5);
background:var(--encre);
color:var(--fond);
font-weight:var(--fw-gras);
text-decoration:none;
}
.saut-contenu:focus{inset-block-start:var(--sp-3)}
.enveloppe{
inline-size:100%;
max-inline-size:var(--largeur-max);
margin-inline:auto;
padding-inline:var(--gouttiere);
}
.mesure{max-inline-size:var(--largeur-texte)}
.surtitre{
font:var(--police-libelle);
letter-spacing:var(--ls-libelle);
text-transform:uppercase;
color:var(--texte-3);
margin-inline-end:calc(var(--ls-libelle) * -1);
}
.titre-duo{display:grid;gap:0}
.titre-duo__script{
font:var(--fw-texte) var(--fs-l)/var(--lh-titre) var(--f-script);
color:var(--violet);
margin-block-end:-0.12em;
margin-inline-start:0.06em;
}
.titre-duo__fort{
font:var(--police-titre-2xl);
letter-spacing:var(--ls-titre);
text-transform:uppercase;
padding-block-start:0.06em;
color:var(--encre);
}
.macaron{
display:flex;align-items:center;justify-content:center;text-align:center;
inline-size:clamp(9.5rem,8rem + 3vw,12rem);aspect-ratio:1;border-radius:50%;
margin-inline:auto;padding:var(--espace-texte);
background:var(--jaune);color:var(--encre);
font-size:var(--fs-s);line-height:var(--lh-dense);
text-wrap:balance;
}
.fiche{
display:grid;
gap:var(--espace-texte);
grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
margin-block:var(--espace-bloc) 0;
padding-block-start:var(--espace-action);
border-block-start:1px solid var(--filet);
}
.fiche dt{
font:var(--police-libelle);
letter-spacing:var(--ls-libelle);
text-transform:uppercase;
color:var(--texte-3);
margin-block-end:var(--espace-ligne);
}
.fiche dd{margin:0;font-size:var(--fs-s);font-weight:var(--fw-gras)}
.reference-livre{font-variant-numeric:tabular-nums;font-weight:var(--fw-gras)}
.reference-livre__cle{
font:var(--police-libelle);
letter-spacing:var(--ls-libelle);
text-transform:uppercase;
color:var(--texte-3);
margin-inline-end:var(--espace-lie);
}
.note{font-size:var(--fs-s);color:var(--texte-3)}
.sur-sombre .note,.section--encre .note,.pied .note{
color:currentColor;opacity:var(--opacite-2);
}
.titre-duo--page .titre-duo__script{font-size:var(--fs-2xl)}
.titre-duo--page .titre-duo__fort{font-size:var(--fs-3xl)}
.section--encre .titre-duo__script,
.pied .titre-duo__script{color:var(--jaune)}
.section--encre .titre-duo__fort,
.pied .titre-duo__fort{color:currentColor}
.titre-bloc{
font:var(--police-titre-l);
letter-spacing:var(--ls-titre);
text-transform:uppercase;
padding-block-start:0.06em;
color:var(--encre);
}
.titre-page{
font:var(--police-titre-3xl);
letter-spacing:var(--ls-titre);
text-transform:uppercase;
padding-block-start:0.06em;
color:var(--encre);
}
.btn{
--btn-fond:var(--violet);
--btn-texte:var(--blanc);
--btn-fond-survol:var(--violet-fonce);
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--sp-2);
min-block-size:48px;
padding:var(--sp-3) var(--sp-6);
border:2px solid transparent;
border-radius:var(--r-0);
background:var(--btn-fond);
color:var(--btn-texte);
font:var(--police-libelle);
letter-spacing:var(--ls-libelle);
text-transform:uppercase;
text-decoration:none;
text-align:center;
cursor:pointer;
transition:background-color var(--duree-hover) var(--ease),
transform var(--duree-appui) var(--ease);
}
.btn:hover{background:var(--btn-fond-survol)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.sur-sombre .btn:focus-visible{outline-color:var(--jaune)}
.btn--soleil{
--btn-fond:var(--jaune);
--btn-texte:var(--encre);
--btn-fond-survol:var(--blanc);
}
.btn--soleil:focus-visible{outline-color:var(--blanc)}
.btn--contour{
--btn-fond:transparent;
--btn-texte:var(--encre);
--btn-fond-survol:var(--fond-fonce);
border-color:var(--bord);
}
.sur-sombre .btn--contour{--btn-texte:var(--fond);--btn-fond-survol:var(--voile-clair);border-color:var(--bord-clair)}
.btn--lien{
--btn-fond:transparent;
--btn-texte:var(--violet);
--btn-fond-survol:transparent;
min-block-size:0;
padding:var(--sp-1) 0;
letter-spacing:0;
text-transform:none;
text-decoration:underline;
text-underline-offset:0.22em;
text-decoration-thickness:2px;
}
.btn--lien:hover{--btn-texte:var(--violet-fonce)}
.section--foncee .btn--lien{--btn-texte:var(--violet-fonce)}
.section--encre .btn:not(.btn--lien),
.pied .btn:not(.btn--lien){
--btn-fond:var(--jaune);
--btn-texte:var(--encre);
--btn-fond-survol:var(--blanc);
}
.section--encre .btn:not(.btn--lien):focus-visible,
.pied .btn:not(.btn--lien):focus-visible{outline-color:var(--blanc)}
.pied .btn--lien{--btn-texte:var(--blanc)}
.pied .btn--lien:hover{--btn-texte:var(--jaune)}
.pied .btn:focus-visible{outline-color:var(--jaune)}
.contacts{
display:grid;
gap:var(--espace-grille);
grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.contact-pole{
display:grid;
gap:var(--espace-lie);
color:var(--texte);
align-content:start;
padding:var(--espace-texte);
background:var(--fond-clair);
border-block-start:3px solid var(--violet);
}
.contact-pole__pole{
font:var(--police-libelle);
letter-spacing:var(--ls-libelle);
text-transform:uppercase;
color:var(--texte-3);
}
.contact-pole__detail{font-size:var(--fs-s);color:var(--texte-2)}
.contact-pole .btn--lien{
justify-content:start;
min-block-size:44px;
padding-block:0;
}
.btn--compact{min-block-size:44px;padding:var(--espace-lie) var(--espace-texte)}
.btn[aria-disabled='true']{
--btn-fond:var(--fond-fonce);
--btn-texte:var(--texte-2);
--btn-fond-survol:var(--fond-fonce);
cursor:not-allowed;
}
.btn[aria-disabled='true']:active{transform:none}
@media not all and (min-width:768px){
.btn{min-block-size:52px;inline-size:100%}
.btn--compact,.btn--lien{inline-size:auto}
.btn--compact{min-block-size:44px}
}
.pastille{
display:inline-flex;
align-items:center;
gap:var(--espace-ligne);
padding:0.4em 0.85em;
border-radius:var(--r-pastille);
background:var(--jaune);
color:var(--encre);
font:var(--police-libelle);
letter-spacing:var(--ls-libelle);
text-transform:uppercase;
white-space:nowrap;
}
.pastille--neutre{background:var(--fond-fonce);color:var(--texte-2)}
.pastille--sombre{background:var(--sombre);color:var(--fond)}
.piece{position:relative}
@supports (mask-image:radial-gradient(circle 10px at 50% 0,#000 100%)){
.piece.piece--creux{
padding-block-start:calc(var(--tenon) + var(--section-y));
-webkit-mask-image:radial-gradient(circle var(--tenon) at 50% 0,transparent 98%,#000 100%);
mask-image:radial-gradient(circle var(--tenon) at 50% 0,transparent 98%,#000 100%);
}
main>section{--tenon-x:50%}
main>section:nth-of-type(3n + 1){--tenon-x:32%}
main>section:nth-of-type(3n + 2){--tenon-x:50%}
main>section:nth-of-type(3n){--tenon-x:68%}
.piece.piece--tenon{
--relief-force:0.34;
--relief-trait:var(--tuile-tenon-filet);
--relief-reflet:none;
position:relative;
border-block-start:var(--filet-jointure) solid var(--filet);
box-shadow:0 0 calc((var(--band) + var(--filet-jointure) + 1px) * 0.22) rgb(var(--relief-couleur) / var(--relief-force));
}
@supports selector(:has(*)){
*:has(+ .piece.piece--tenon):not(.hero):not(main){
padding-block-end:max(var(--section-y),calc(var(--band) + var(--degagement-tenon)));
}
main:has(+ .piece.piece--tenon)>:last-child{
padding-block-end:max(var(--section-y),calc(var(--band) + var(--degagement-tenon)));
}
}
.piece.piece--tenon::before,
.piece.piece--tenon::after{
content:'';
position:absolute;
inset-inline-start:var(--tenon-x,50%);
translate:-50% 0;
-webkit-mask-image:var(--tuile-tenon);
-webkit-mask-size:100% 100%;
-webkit-mask-repeat:no-repeat;
mask-image:var(--tuile-tenon);
mask-size:100% 100%;
mask-repeat:no-repeat;
pointer-events:none;
}
.piece.piece--tenon::before{
--haut-tenon:calc(var(--band) + var(--filet-jointure) + 1px);
--taille-filet:calc(var(--largeur-tenon) + var(--filet-jointure) * 5.6) calc(var(--haut-tenon) + var(--filet-jointure) * 1.1);
--place-filet:50% calc(var(--haut-tenon) * 0.25 - var(--filet-jointure) * 1.1);
inset-block-start:calc(var(--band) * -1 - var(--haut-tenon) * 0.25);
inline-size:calc(var(--largeur-tenon) + var(--filet-jointure) * 6);
block-size:calc(var(--band) - var(--filet-jointure) + var(--haut-tenon) * 0.25);
background:var(--relief-trait) var(--place-filet) / var(--taille-filet) no-repeat rgb(var(--relief-couleur) / var(--relief-force));
-webkit-mask-image:var(--tuile-tenon-ombre),var(--relief-trait);
-webkit-mask-size:var(--largeur-tenon) calc(var(--haut-tenon) * 1.55),var(--taille-filet);
-webkit-mask-position:50% 0,var(--place-filet);
mask-image:var(--tuile-tenon-ombre),var(--relief-trait);
mask-size:var(--largeur-tenon) calc(var(--haut-tenon) * 1.55),var(--taille-filet);
mask-position:50% 0,var(--place-filet);
}
.piece.piece--tenon::after{
inset-block-start:calc(var(--band) * -1);
inline-size:var(--largeur-tenon);
block-size:calc(var(--band) + var(--filet-jointure) + 1px);
padding-block-end:calc(var(--filet-jointure) + 1px);
background-color:inherit;
background-image:var(--relief-reflet),none;
background-size:100% 100%;
background-repeat:no-repeat;
background-origin:border-box;
background-clip:content-box,border-box;
}
.section--encre.piece--tenon,
.pied.piece--tenon,
.pied__bande--infos.piece--tenon{
--relief-trait:none;
--relief-reflet:var(--tuile-tenon-reflet);
border-block-start-color:var(--reflet-jointure);
}
.section--encre + .piece.piece--tenon,
main:has(>.section--encre:last-child) + .pied.piece--tenon,
.pied__bande--action + .pied__bande--infos.piece--tenon{--relief-force:0.62}
.carte-piece,
.reel__lien,
.residence,
.revue__vignette{--bosse-x:50%;position:relative;box-shadow:var(--ombre-piece)}
.residence{--bosse-x:18%}
.residence--evenement{--bosse-x:72%}
.revue>:nth-child(3n + 1) .revue__vignette{--bosse-x:38%}
.revue>:nth-child(3n + 2) .revue__vignette{--bosse-x:60%}
.revue>:nth-child(3n) .revue__vignette{--bosse-x:46%}
.univers>:nth-child(4n + 1),
.reels__rail>:nth-child(4n + 1)>.reel__lien,
.reels__liste>:nth-child(4n + 1)>.reel__lien{--bosse-x:34%}
.univers>:nth-child(4n + 2),
.reels__rail>:nth-child(4n + 2)>.reel__lien,
.reels__liste>:nth-child(4n + 2)>.reel__lien{--bosse-x:62%}
.univers>:nth-child(4n + 3),
.reels__rail>:nth-child(4n + 3)>.reel__lien,
.reels__liste>:nth-child(4n + 3)>.reel__lien{--bosse-x:44%}
.univers>:nth-child(4n + 4),
.reels__rail>:nth-child(4n + 4)>.reel__lien,
.reels__liste>:nth-child(4n + 4)>.reel__lien{--bosse-x:57%}
.carte-piece::before,
.reel__lien::before,
.revue__vignette::before{
content:'';
position:absolute;
inset-block-start:calc(100% - 1px);
inset-inline-start:var(--bosse-x);
translate:-50% 2px;
inline-size:calc(var(--bosse) * 3.3 + 4px);
block-size:calc(var(--bosse) * 1.1 + 2px);
background:var(--bord-bosse);
-webkit-mask:var(--tuile-tenon) center / 100% 100% no-repeat;
mask:var(--tuile-tenon) center / 100% 100% no-repeat;
rotate:180deg;
pointer-events:none;
}
.carte-piece::after,
.reel__lien::after,
.residence::after,
.revue__vignette::after{
content:'';
position:absolute;
inset-block-start:calc(100% - 1px);
inset-inline-start:var(--bosse-x);
translate:-50% 0;
inline-size:calc(var(--bosse) * 3.3);
block-size:calc(var(--bosse) * 1.1);
background:inherit;
-webkit-mask:var(--tuile-tenon) center / 100% 100% no-repeat;
mask:var(--tuile-tenon) center / 100% 100% no-repeat;
rotate:180deg;
pointer-events:none;
}
}
@supports (mask-image:radial-gradient(circle 10px at 50% 0,#000 100%)){
@media (min-width:768px){
.date{position:relative;box-shadow:var(--ombre-piece)}
.date::before{
content:'';
position:absolute;
inset-block-start:50%;
inset-inline-end:calc(100% + 1px);
inline-size:calc(var(--bosse) * 3);
block-size:calc(var(--bosse) * 1);
rotate:-90deg;
translate:var(--bosse) -50%;
background:var(--violet);
-webkit-mask:var(--tuile-tenon) center / 100% 100% no-repeat;
mask:var(--tuile-tenon) center / 100% 100% no-repeat;
pointer-events:none;
}
.date--indispo::before{background:var(--bord)}
.date--annule::before{background:var(--encre)}
}
}
.carte-piece{
position:relative;
display:block;
background:var(--fond-clair);
color:inherit;
text-decoration:none;
transition:box-shadow var(--duree-etat) var(--ease);
}
@media (prefers-reduced-motion:no-preference){
.carte-piece,
.reel__lien{transition:translate var(--duree-etat) var(--ease)}
a.carte-piece:hover,
a.carte-piece:focus-within,
.reel__lien:hover,
.reel__lien:focus-visible{translate:0 -4px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:1ms !important;
animation-iteration-count:1 !important;
transition-duration:1ms !important;
scroll-behavior:auto !important;
}
}
.entete{
position:sticky;
inset-block-start:0;
z-index:100;
background:var(--fond);
border-block-end:1px solid transparent;
transition:background-color var(--duree-etat) var(--ease),
border-color var(--duree-etat) var(--ease),
box-shadow var(--duree-etat) var(--ease);
}
html:has(.hero) .entete{background:var(--fond)}
html:has(.hero) .entete::before{
content:'';
position:absolute;
inset:0 0 -1px;
z-index:-1;
background:var(--affiche-haut);
pointer-events:none;
transition:opacity var(--duree-etat) var(--ease);
}
html:has(.hero) .entete.est-defile::before,
html:has(.hero) .nav-ouverte .entete::before,
.nav-ouverte .entete::before{opacity:0}
@media (min-aspect-ratio:1001 / 1000){
html:has(.hero) .entete:not(.est-defile){background:transparent}
html:has(.hero) .entete::before{
inset-block-end:-0.5rem;
background:linear-gradient(to bottom,
color-mix(in srgb,var(--affiche-haut-paysage) 90%,transparent) 0,
color-mix(in srgb,var(--affiche-haut-paysage) 78%,transparent) 72%,
transparent 100%);
}
}
@media (min-width:1024px) and (min-aspect-ratio:1001 / 1000){
html:has(.hero) .entete::before{
-webkit-mask-image:linear-gradient(to right,#000 0,#000 46%,transparent 64%);
mask-image:linear-gradient(to right,#000 0,#000 46%,transparent 64%);
}
}
.entete.est-defile{
border-block-end-color:var(--filet);
box-shadow:var(--ombre-douce);
}
.entete__barre{
display:flex;
align-items:center;
justify-content:flex-start;
gap:var(--espace-texte);
block-size:var(--h-entete);
}
.nav__liste{display:flex;align-items:center;gap:clamp(var(--sp-3),1.6vw,var(--sp-6))}
.entete__action{display:none}
@media (min-width:768px){
.entete__action{
display:flex;
align-items:center;
gap:var(--espace-texte);
margin-inline-start:auto;
transition:opacity var(--duree-etat) var(--ease),translate var(--duree-etat) var(--ease),visibility 0s;
}
html:has(.hero) .entete:not(.est-defile) .entete__action{
visibility:hidden;
opacity:0;
translate:0 calc(var(--espace-lie) * -1);
transition:opacity var(--duree-etat) var(--ease),translate var(--duree-etat) var(--ease),visibility 0s var(--duree-etat);
}
}
.entete__prochaine{
display:none;
margin:0;
text-align:end;
}
@media (min-width:1100px){
.entete__prochaine{display:grid;gap:var(--espace-ligne)}
}
.entete__quand{
font:var(--police-libelle);
color:var(--encre);
white-space:nowrap;
}
.nav__lien{
position:relative;
display:inline-flex;
align-items:center;
min-block-size:44px;
padding-block:var(--sp-2);
font:var(--fw-texte) var(--fs-s)/var(--lh-titre) var(--f-texte);
text-decoration:none;
color:var(--texte-2);
transition:color var(--duree-hover) var(--ease);
}
.nav__lien:hover{color:var(--encre)}
.nav__lien[aria-current='page']{color:var(--encre);font-weight:var(--fw-gras)}
.nav__lien[aria-current='page']::after{
content:'';
position:absolute;
inset-inline:0;
inset-block-end:0;
block-size:2px;
background:var(--violet);
}
.nav__lien:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.nav__pied{display:none}
.burger{
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
inline-size:44px;block-size:44px;
margin-inline-start:calc(var(--espace-lie) * -1);
padding:0;
border:0;
background:none;
color:var(--encre);
cursor:pointer;
}
.burger:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.burger__trait{
display:block;
inline-size:22px;block-size:2px;
background:currentColor;
transition:translate var(--duree-etat) var(--ease),rotate var(--duree-etat) var(--ease),opacity var(--duree-hover) var(--ease);
}
.burger__trait + .burger__trait{margin-block-start:5px}
.burger[aria-expanded='true'] .burger__trait:nth-of-type(2){translate:0 7px;rotate:45deg}
.burger[aria-expanded='true'] .burger__trait:nth-of-type(3){opacity:0}
.burger[aria-expanded='true'] .burger__trait:nth-of-type(4){translate:0 -7px;rotate:-45deg}
@media not all and (min-width:768px){
.burger{display:flex}
.nav{
position:absolute;
inset-block-start:100%;
inset-inline:0;
z-index:90;
background:var(--fond);
color:var(--encre);
box-shadow:var(--ombre-forte);
padding:var(--espace-lie) var(--gouttiere) calc(var(--espace-texte) + env(safe-area-inset-bottom));
block-size:auto;
max-block-size:min(72svh,calc(100svh - var(--h-entete)));
display:flex;
flex-direction:column;
overflow-y:auto;
overscroll-behavior:contain;
visibility:hidden;
opacity:0;
translate:0 -8px;
transition:opacity var(--duree-etat) var(--ease),
translate var(--duree-etat) var(--ease),
visibility 0s linear var(--duree-etat);
}
.nav.est-ouvert{visibility:visible;opacity:1;translate:0 0;transition-delay:0s}
.nav{background:var(--fond)}
.nav__liste{flex-direction:column;align-items:stretch;gap:0;flex:0 0 auto}
.nav__liste li{display:flex}
.nav__liste li>.nav__lien{flex:1 1 auto}
.nav__pied{
display:grid;
margin-block-start:auto;
padding-block-start:var(--espace-texte);
gap:var(--espace-lie);
justify-items:center;
color:var(--texte-2);
}
.nav__pied .surtitre{color:var(--texte-3);opacity:1}
.nav__pied .pied__reseau{color:var(--encre);border-color:var(--bord)}
.nav__pied .pied__reseau:hover{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.nav__pied .pied__reseau:focus-visible{outline-color:var(--violet)}
.nav__liste li{
--piece-fond:var(--fond-clair);
--tenon-r:14px;
position:relative;
}
.nav__liste li:nth-child(even){--piece-fond:var(--fond)}
.nav__liste li:nth-child(1){--tenon-x:32%}
.nav__liste li:nth-child(2){--tenon-x:66%}
.nav__liste li:nth-child(3){--tenon-x:44%}
.nav__liste li:nth-child(4){--tenon-x:74%}
.nav__liste li:nth-child(5){--tenon-x:38%}
.nav__liste li:nth-child(6){--tenon-x:60%}
.nav__liste li:nth-child(7){--tenon-x:46%}
.nav__lien{
display:flex;
align-items:center;
min-block-size:48px;
padding:var(--espace-lie) var(--espace-action);
border-block-end:0;
background:var(--piece-fond);
font-size:var(--fs-m);
color:var(--encre);
}
.nav__lien[aria-current='page']{
color:var(--violet);
font-weight:var(--fw-gras);
box-shadow:inset 3px 0 0 var(--violet);
}
.nav__lien[aria-current='page']::after{display:none}
@supports (mask-image:radial-gradient(circle 10px at 50% 0,#000 100%)){
.nav__liste li + li .nav__lien{
-webkit-mask-image:radial-gradient(circle var(--tenon-r) at var(--tenon-x) 0,
transparent 98%,#000 100%);
mask-image:radial-gradient(circle var(--tenon-r) at var(--tenon-x) 0,
transparent 98%,#000 100%);
}
.nav__liste li + li .nav__lien{
border-block-start:var(--filet-jointure) solid var(--filet);
}
.nav__liste li:not(:last-child)::before{
content:'';
position:absolute;
z-index:3;
inset-block-end:calc(var(--tenon-r) * -1 + 1px);
inset-inline-start:var(--tenon-suivant,50%);
translate:-50% 0;
inline-size:calc(var(--tenon-r) * 2);
block-size:calc(var(--tenon-r) * 2);
border-radius:var(--r-pastille);
box-shadow:0 0 0 var(--filet-jointure) var(--filet);
clip-path:inset(50% -6px -6px -6px);
pointer-events:none;
}
.nav__liste li:not(:last-child)::after{
content:'';
position:absolute;
z-index:2;
inset-block-end:calc(var(--tenon-r) * -1 + 1px);
inset-inline-start:var(--tenon-suivant,50%);
translate:-50% 0;
inline-size:calc(var(--tenon-r) * 2);
block-size:calc(var(--tenon-r) * 2);
border-radius:var(--r-pastille);
background:var(--piece-fond);
pointer-events:none;
}
.nav__liste li:nth-child(1){--tenon-suivant:66%}
.nav__liste li:nth-child(2){--tenon-suivant:44%}
.nav__liste li:nth-child(3){--tenon-suivant:74%}
.nav__liste li:nth-child(4){--tenon-suivant:38%}
.nav__liste li:nth-child(5){--tenon-suivant:60%}
.nav__liste li:nth-child(6){--tenon-suivant:46%}
}
@media (prefers-reduced-motion:no-preference){
.nav__liste li{
opacity:0;
translate:var(--depart,-14px) 0;
transition:opacity var(--duree-etat) var(--ease),
translate var(--duree-etat) var(--ease-piece);
}
.nav__liste li:nth-child(even){--depart:14px}
.nav.est-ouvert .nav__liste li{opacity:1;translate:0 0}
.nav.est-ouvert .nav__liste li:nth-child(1){transition-delay:40ms}
.nav.est-ouvert .nav__liste li:nth-child(2){transition-delay:80ms}
.nav.est-ouvert .nav__liste li:nth-child(3){transition-delay:120ms}
.nav.est-ouvert .nav__liste li:nth-child(4){transition-delay:160ms}
.nav.est-ouvert .nav__liste li:nth-child(5){transition-delay:200ms}
.nav.est-ouvert .nav__liste li:nth-child(6){transition-delay:240ms}
}
body.nav-ouverte{overflow:hidden}
.nav-ouverte main,
.nav-ouverte .pied{pointer-events:none}
}
.hero{
--h-bandeau:var(--h-bandeau-mesure,16rem);
--affiche-min:82.5vw;
--affiche-max:165vw;
display:grid;
grid-template-columns:minmax(0,1fr);
grid-template-rows:minmax(var(--affiche-min),1fr) auto;
block-size:min(
calc(100svh - var(--h-chrome,var(--h-entete))),
calc(var(--affiche-max) + var(--h-bandeau))
);
min-block-size:calc(var(--affiche-min) + var(--h-bandeau));
background:var(--sable);
}
@media (min-width:320px){
.hero{--h-bandeau:var(--h-bandeau-mesure,11rem)}
}
@media (min-aspect-ratio:1001 / 1000){
.hero{
--h-bandeau:var(--h-bandeau-mesure,9.5rem);
--affiche-min:max(9rem,min(41vw,calc(100svh - var(--h-bandeau))));
--affiche-max:calc(56.25vw - 9px);
margin-block-start:calc(var(--h-chrome,var(--h-entete)) * -1);
block-size:min(100svh,calc(var(--affiche-max) + var(--h-bandeau)));
}
}
@media (min-aspect-ratio:1001 / 1000) and (min-width:1024px){
.hero{
position:relative;
grid-template-rows:minmax(0,1fr);
block-size:min(100svh,calc(56.25vw - 9px));
min-block-size:41vw;
}
}
.hero__affiche{
min-block-size:0;
overflow:hidden;
}
.hero__affiche picture{
display:block;
block-size:100%;
}
.hero__affiche img{
display:block;
inline-size:100%;
block-size:100%;
object-fit:cover;
object-position:50% 35%;
}
@media (max-aspect-ratio:1 / 1){
.hero__affiche--portrait img{object-position:50% 0}
}
.hero__bandeau{
position:relative;
z-index:20;
background:var(--chocolat);
color:var(--blanc);
padding-block:var(--espace-texte);
}
.hero__bandeau-grille{display:grid;gap:var(--espace-texte)}
.hero__promo--vedette{
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:var(--espace-texte);
}
.hero__promo--vedette .btn{grid-column:1 / -1;inline-size:100%}
.hero__quantieme{
display:grid;
justify-items:center;
min-inline-size:3rem;
font:var(--police-titre-l);
letter-spacing:var(--ls-titre);
color:var(--jaune);
}
.hero__mois{
font:var(--police-libelle);
letter-spacing:var(--ls-libelle);
text-transform:uppercase;
color:var(--blanc);
opacity:var(--opacite-2);
margin-inline-end:calc(var(--ls-libelle) * -1);
}
.hero__lieu{display:grid;gap:var(--espace-ligne);min-inline-size:0}
.hero__ville{font:var(--police-titre-l);letter-spacing:var(--ls-titre)}
.hero__salle{font-size:var(--fs-s);opacity:var(--opacite-2)}
.hero__resume{
font-size:var(--fs-s);
line-height:var(--lh-dense);
text-align:center;
text-wrap:balance;
}
.hero__resume strong{color:var(--jaune);font-weight:var(--fw-gras)}
.hero__suite{text-align:center}
.hero__suite .btn--lien{--btn-texte:var(--jaune);font-size:var(--fs-s)}
@media (min-width:320px) and (max-width:767px){
.hero__promo--vedette{grid-template-columns:auto minmax(0,1fr) auto}
.hero__promo--vedette .btn{grid-column:auto;inline-size:auto;padding-inline:var(--espace-texte)}
}
@media (min-width:320px) and (max-width:359px){
.hero__promo--vedette{column-gap:var(--espace-lie)}
.hero__promo--vedette .btn{padding-inline:calc(var(--espace-texte) * 0.75)}
}
@media not all and (min-width:768px){
.hero__suite .btn--lien{min-block-size:44px}
}
@media (min-aspect-ratio:1001 / 1000) and (max-height:359px) and (max-width:1023px){
.hero__resume{display:none}
}
@media (min-width:768px),(min-width:520px) and (min-aspect-ratio:1001 / 1000){
.hero__promo--vedette{grid-template-columns:auto minmax(0,1fr) auto}
.hero__promo--vedette .btn{grid-column:auto;inline-size:auto}
.hero__resume,
.hero__suite{text-align:start}
}
@media (min-width:1024px) and (max-aspect-ratio:1 / 1){
.hero__bandeau-grille{
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
align-items:center;
column-gap:var(--espace-bloc);
}
.hero__resume{max-inline-size:24ch}
.hero__promo--vedette{
column-gap:var(--espace-action);
padding-inline:var(--espace-bloc);
border-inline:1px solid var(--trait-clair);
}
.hero__suite{justify-self:end;text-align:end}
}
@media (min-width:1024px) and (min-aspect-ratio:1001 / 1000){
.hero__bandeau{
position:absolute;
inset-inline-start:76%;
inset-block-end:clamp(1rem,4svh,2.5rem);
translate:-50% 0;
inline-size:23.5rem;
padding:var(--espace-texte) var(--espace-action);
box-shadow:var(--ombre-forte);
}
.hero__bandeau-grille{
padding-inline:0;
max-inline-size:none;
}
.hero__resume,
.hero__suite{text-align:center}
.hero__promo--vedette{grid-template-columns:auto minmax(0,1fr)}
.hero__promo--vedette .btn{grid-column:1 / -1;inline-size:100%}
}
.hero-page{
display:grid;
grid-template-columns:minmax(0,1fr);
align-content:center;
padding-block:var(--espace-action) var(--section-y);
}
@media not all and (min-width:768px){
.hero-page{
min-block-size:calc(100svh - var(--h-chrome,var(--h-entete)) - var(--amorce));
}
}
.hero-page__grille{
display:grid;
gap:var(--espace-action);
}
.hero-page__visuel img{max-block-size:38svh}
.hero-page__visuel{min-block-size:0;display:block;overflow:hidden}
.hero-page__visuel picture{display:block;block-size:100%}
.hero-page__visuel img{
inline-size:100%;
block-size:100%;
object-fit:contain;
background:var(--fond);
}
.hero-page__texte{display:grid;gap:var(--espace-texte);align-content:start}
.hero-page__texte>.surtitre{margin-block-end:calc(var(--espace-lie) - var(--espace-texte))}
.hero-page__texte>.btn{justify-self:start;margin-block-start:calc(var(--espace-action) - var(--espace-texte))}
.hero-page__meta{
display:flex;flex-wrap:wrap;gap:var(--espace-lie) var(--espace-texte);
font-size:var(--fs-s);color:var(--texte-3);
max-inline-size:60ch;
}
.hero-page__meta span{max-inline-size:60ch}
.hero-page--texte .hero-page__grille{grid-template-rows:1fr;align-content:center}
.hero-page--texte .hero-page__texte{align-content:center;max-inline-size:46rem}
@media not all and (min-width:768px){
.hero-page__visuel:not(.hero-page__visuel--oeuvre) img{
object-fit:cover;
object-position:50% var(--cadrage,20%);
}
.hero-page:not(.hero-page--texte){
grid-template-rows:minmax(41svh,1fr) auto;
row-gap:var(--espace-action);
padding-block-start:var(--espace-texte);
}
.hero-page:not(.hero-page--texte)>.hero-page__grille{display:contents}
.hero-page__visuel{position:relative}
.hero-page__visuel picture{position:absolute;inset:0}
.hero-page__visuel img{max-block-size:none}
}
@media (min-width:768px){
.hero-page--texte{
block-size:calc(100svh - var(--h-chrome,var(--h-entete)) - var(--amorce));
min-block-size:26rem;
}
}
@media (min-width:768px){
.hero-page{
block-size:calc(100svh - var(--h-chrome,var(--h-entete)) - var(--amorce));
min-block-size:30rem;
padding-block:var(--espace-bloc);
grid-template-rows:minmax(0,1fr);
align-content:stretch;
}
.hero-page__grille{
grid-template-columns:minmax(200px,42%) minmax(0,1fr);
grid-template-rows:minmax(0,1fr);
align-items:stretch;
block-size:100%;
gap:var(--espace-partie);
}
.hero-page__visuel{block-size:100%}
.hero-page__visuel img{
max-block-size:none;
inline-size:auto;
max-inline-size:100%;
block-size:100%;
}
.hero-page--inverse .hero-page__visuel{order:2}
.hero-page__visuel img{object-position:left center}
.hero-page--inverse .hero-page__visuel img{object-position:right center}
.hero-page__texte{align-content:center}
.hero-page--texte .hero-page__grille{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:768px) and (max-width:859px){
.hero-page:not(.hero-page--texte){
block-size:min(calc(100svh - var(--h-chrome,var(--h-entete)) - var(--amorce)),44rem);
}
main>.hero-page:not(.hero-page--texte):last-child{
block-size:calc(100svh - var(--h-chrome,var(--h-entete)));
}
}
@media (min-width:768px){
main:has(+ .piece.piece--tenon)>.hero-page:not(.hero-page--texte):last-child{padding-block-end:0}
}
.hero-page__texte{container-type:inline-size}
.hero-page__texte .titre-duo--page .titre-duo__fort{font-size:min(var(--fs-3xl),16cqi)}
.hero-page.hero-page--compact{
block-size:auto;
min-block-size:0;
padding-block:calc(var(--section-y) * 1.4) var(--section-y);
}
@media (min-width:768px){
.hero-page:not(.hero-page--texte){
max-inline-size:none;
padding:0;
}
*:has(+ .piece.piece--tenon).hero-page:not(.hero-page--texte){padding-block-end:0}
.hero-page:not(.hero-page--texte) .hero-page__grille{
grid-template-columns:
minmax(var(--gouttiere),1fr)
minmax(0,calc(var(--largeur-max) / 2 - var(--gouttiere)))
minmax(0,calc(var(--largeur-max) / 2 - var(--gouttiere)))
minmax(var(--gouttiere),1fr);
gap:0;
}
.hero-page:not(.hero-page--texte) .hero-page__visuel{grid-column:1 / 3;grid-row:1}
.hero-page:not(.hero-page--texte) .hero-page__texte{
grid-column:3;
grid-row:1;
padding-block:var(--espace-bloc);
padding-inline-start:var(--espace-partie);
}
.hero-page--inverse:not(.hero-page--texte) .hero-page__visuel{grid-column:3 / 5}
.hero-page--inverse:not(.hero-page--texte) .hero-page__texte{
grid-column:2;
padding-inline:0 var(--espace-partie);
}
.hero-page:not(.hero-page--texte) .hero-page__visuel img{
inline-size:100%;
max-inline-size:none;
block-size:100%;
object-fit:cover;
object-position:50% var(--cadrage,20%);
background:var(--fond-fonce);
}
.hero-page__visuel--oeuvre{
display:grid;
padding:var(--espace-bloc);
background:var(--fond-fonce);
}
.hero-page__visuel--oeuvre picture{
display:flex;
justify-content:center;
align-items:center;
block-size:100%;
min-block-size:0;
}
.hero-page:not(.hero-page--texte) .hero-page__visuel--oeuvre img{
inline-size:auto;
max-inline-size:100%;
block-size:auto;
max-block-size:100%;
object-fit:contain;
box-shadow:var(--ombre-piece);
}
}
.dates{display:grid;gap:var(--espace-lie)}
.date{
display:grid;
grid-template-columns:auto 1fr;
grid-template-areas:'jour lieu' 'action action';
align-items:center;
gap:var(--espace-lie) var(--espace-texte);
padding:var(--espace-texte);
background:var(--fond-clair);
border-inline-start:3px solid var(--violet);
}
.date--indispo{border-inline-start-color:var(--bord)}
.date--annule{border-inline-start-color:var(--encre)}
.date__jour{
grid-area:jour;
display:grid;
justify-items:center;
min-inline-size:3.25rem;
line-height:var(--lh-titre);
}
.date__quantieme{font:var(--police-titre-l);letter-spacing:var(--ls-titre)}
.date__mois,
.date__annee{
font:var(--police-libelle);
letter-spacing:var(--ls-libelle);
margin-inline-end:calc(var(--ls-libelle) * -1);
}
.date__mois{text-transform:uppercase;color:var(--texte-2)}
.date__annee{color:var(--texte-3)}
.date__lieu{grid-area:lieu;display:grid;gap:var(--espace-ligne);min-inline-size:0;justify-items:start}
.date__lieu .pastille{margin-block-start:var(--espace-ligne)}
.date__ville{font-weight:var(--fw-gras);line-height:var(--lh-dense)}
.date__dept{font-weight:var(--fw-texte);color:var(--texte-3)}
.date__salle{font-size:var(--fs-s);color:var(--texte-2);line-height:var(--lh-dense)}
.date__note{grid-area:action;font-size:var(--fs-s);color:var(--texte-2)}
.date__action{grid-area:action;display:flex;flex-wrap:wrap;align-items:center;gap:var(--espace-lie)}
.date--annule .date__ville,.date--annule .date__salle{text-decoration:line-through}
@media (min-width:560px){
.date{
grid-template-columns:auto minmax(0,1fr) auto;
grid-template-areas:'jour lieu action' 'jour note note';
}
.date__action{justify-content:flex-end}
.date__note{grid-area:note}
}
.dates-vide{
padding:var(--espace-action);
background:var(--fond-clair);
border-inline-start:3px solid var(--jaune);
display:grid;gap:var(--espace-lie);
justify-items:start;
}
.dates-vide>*{max-inline-size:60ch}
.section{padding-block:var(--section-y)}
.section--claire{background:var(--fond-clair)}
.cadrage-18{--cadrage:18%}
.cadrage-20{--cadrage:20%}
.espace-avant{margin-block-start:var(--espace-bloc)}
.espace-apres{margin-block-end:var(--espace-texte)}
.note-fine{color:var(--texte-2);font-size:var(--fs-s)}
.liens-en-ligne{display:flex;flex-wrap:wrap;gap:var(--espace-texte)}
@media not all and (min-width:768px){
.entete{background:var(--blanc)}
.section.ouverture-blanche{background:var(--fond)}
main>section:nth-child(even of section:has(.section__entete)) .section__entete{
text-align:right;
}
main>section:nth-child(even of section:has(.section__entete)) .section__intro{
margin-inline:auto 0;
}
main>section:nth-child(even of section:has(.section__entete)) .titre-duo__script{
margin-inline:0 0.06em;
}
}
.piece.piece--tenon.ouverture-blanche{border-block-start-color:transparent;box-shadow:none}
.piece.piece--tenon.ouverture-blanche::before,
.piece.piece--tenon.ouverture-blanche::after{display:none}
.section--ouverture{padding-block-start:calc(var(--section-y) * 1.4)}
@media (min-width:860px){
.enveloppe:has(>.section__entete + .btn:last-child){
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:end;
column-gap:var(--espace-partie);
}
.enveloppe:has(>.section__entete + .btn:last-child)>.section__entete{margin-block-end:0}
}
.librairies{
display:grid;
gap:var(--espace-action);
margin-block-end:var(--espace-bloc);
padding:var(--espace-texte);
background:var(--fond-clair);
border-block-start:3px solid var(--violet);
}
@media (min-width:860px){
.librairies{
grid-template-columns:minmax(0,5fr) minmax(0,7fr);
gap:var(--espace-partie);
padding:var(--espace-action);
}
}
.librairies__panneau{display:grid;gap:var(--espace-texte);align-content:start}
.librairies__titre{font:var(--police-titre-l);letter-spacing:var(--ls-titre)}
.librairies__intro{max-inline-size:var(--largeur-texte);color:var(--texte-2)}
.librairies__ean{font-weight:var(--fw-gras);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--texte)}
.librairies__recherche{display:grid;gap:var(--espace-lie)}
.librairies__ligne{display:flex;gap:var(--espace-lie)}
.librairies__ligne .champ__input{flex:1 1 auto;min-inline-size:0}
.librairies__ligne .btn{flex:none;inline-size:auto}
.librairies__position{justify-self:start}
.librairies__etat{font-size:var(--fs-s);font-weight:var(--fw-gras);color:var(--texte-2)}
.librairies__etat:empty{position:absolute}
.librairies__liste{display:grid;margin:0;padding:0;list-style:none}
.librairie{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:var(--espace-texte);
align-items:start;
padding-block:var(--espace-texte);
border-block-start:1px solid var(--filet);
}
.librairie:first-child{padding-block-start:0;border-block-start:0}
.librairie:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.librairie__num,
.librairies__point{
display:grid;
place-items:center;
inline-size:1.75rem;
block-size:1.75rem;
border-radius:var(--r-pastille);
background:var(--violet);
color:var(--blanc);
font:var(--police-libelle);
font-variant-numeric:tabular-nums;
}
.librairie.est-active .librairie__num,
.librairies__point.est-active{background:var(--sombre)}
.librairie__corps{display:grid;gap:var(--espace-ligne);min-inline-size:0}
.librairie__nom{font:var(--police-carte)}
.librairie__adresse{font-size:var(--fs-s);color:var(--texte-2)}
.librairie__liens{display:flex;flex-wrap:wrap;gap:var(--espace-lie) var(--espace-texte);font-size:var(--fs-s);font-weight:var(--fw-gras)}
.librairie__liens a{color:var(--violet)}
.librairie__liens a:hover{color:var(--violet-fonce)}
.librairies__source{max-inline-size:60ch;color:var(--texte-3)}
.librairies__source a{color:inherit}
.librairies__panneau>.btn--lien{justify-self:start}
.librairies__carte{
position:relative;
overflow:hidden;
aspect-ratio:1;
background:var(--fond-fonce);
isolation:isolate;
}
@media (min-width:860px){
.librairies__carte{
aspect-ratio:auto;
align-self:start;
position:sticky;
inset-block-start:calc(var(--h-chrome,var(--h-entete)) + var(--espace-texte));
block-size:min(34rem,calc(100svh - var(--h-chrome,var(--h-entete)) - var(--espace-bloc)));
min-block-size:24rem;
}
}
@media not all and (min-width:860px){
.librairies{gap:var(--espace-texte)}
.librairies__panneau{display:contents}
.librairies__carte{order:1;margin-block:var(--espace-lie)}
.librairies__liste,
.librairies__source,
.librairies__panneau>.btn--lien{order:2}
}
.librairies__silhouette{position:absolute;inset:7% 7% 14%;inline-size:auto;block-size:auto;margin:auto}
.librairies__france{fill:var(--sable);stroke:var(--filet);stroke-width:4;stroke-linejoin:round}
.librairies__villes{fill:var(--violet);opacity:var(--opacite-2)}
.librairies__invite{
position:absolute;
inset-inline:var(--espace-texte);
inset-block-end:var(--espace-texte);
text-align:center;
font-size:var(--fs-s);
font-weight:var(--fw-gras);
color:var(--texte-2);
}
.librairies__carte.est-active .librairies__silhouette,
.librairies__carte.est-active .librairies__invite{display:none}
.librairies__fond{position:absolute;inset:0;cursor:grab}
.librairies__fond.est-deplace{cursor:grabbing}
.librairies__tuiles,
.librairies__points{position:absolute;inset:0}
.librairies__tuiles img{
position:absolute;
inline-size:256px;
block-size:256px;
max-inline-size:none;
user-select:none;
-webkit-user-drag:none;
}
.librairies__voile{
position:absolute;
inset:0;
background:color-mix(in srgb,var(--fond) 22%,transparent);
pointer-events:none;
}
.librairies__point{
position:absolute;
translate:-50% -50%;
padding:0;
border:2px solid var(--blanc);
box-shadow:var(--ombre-bouton);
cursor:pointer;
}
.librairies__point.est-active{z-index:2;scale:1.2}
.librairies__point:focus-visible{outline:3px solid var(--encre);outline-offset:2px}
.librairies__origine{
position:absolute;
inline-size:1rem;
block-size:1rem;
translate:-50% -50%;
border:3px solid var(--blanc);
border-radius:var(--r-pastille);
background:var(--sombre);
box-shadow:0 0 0 6px color-mix(in srgb,var(--sombre) 25%,transparent);
}
.librairies__zoom{
position:absolute;
z-index:3;
inset-block-start:var(--espace-lie);
inset-inline-end:var(--espace-lie);
display:grid;
gap:2px;
}
.librairies__zoom button{
inline-size:44px;
block-size:44px;
padding:0;
border:0;
background:var(--fond-clair);
color:var(--encre);
font:var(--police-carte);
box-shadow:var(--ombre-douce);
cursor:pointer;
}
.librairies__zoom button:hover{background:var(--blanc)}
.librairies__zoom button:focus-visible{outline:3px solid var(--encre);outline-offset:2px}
.librairies__attribution{
position:absolute;
z-index:3;
inset-inline-end:0;
inset-block-end:0;
padding:2px var(--espace-lie);
background:color-mix(in srgb,var(--fond-clair) 85%,transparent);
font-size:var(--fs-s);
color:var(--texte-2);
}
.librairies__attribution a{color:inherit}
.mentions{display:grid;gap:var(--espace-bloc)}
.mention{display:grid;gap:var(--espace-texte);align-items:start}
.mention__texte{display:grid;gap:var(--espace-texte)}
.mention__texte p{max-inline-size:var(--largeur-texte);color:var(--texte-2)}
@media (min-width:860px){
.mentions{gap:0}
.mention{
grid-template-columns:minmax(0,5fr) minmax(0,7fr);
column-gap:var(--espace-partie);
padding-block:var(--espace-bloc);
border-block-start:1px solid var(--filet);
}
.mention:first-child{padding-block-start:0;border-block-start:0}
.mention:last-child{padding-block-end:0}
}
@media (min-width:620px) and (max-width:1023px){
.contacts{grid-template-columns:repeat(2,minmax(0,1fr))}
.contacts>:nth-child(3):last-child{grid-column:1 / -1}
}
.section--ouverture .enveloppe>.surtitre{margin-block-end:var(--espace-lie)}
.section--ouverture .enveloppe>.titre-duo{margin-block-end:var(--espace-texte)}
.section--ouverture .enveloppe>.section__intro{margin-block-end:var(--espace-bloc)}
.section--foncee{background:var(--fond-fonce)}
.section--encre{
background:var(--sombre);
color:var(--blanc);
}
.section--encre .titre-bloc{color:currentColor}
.section--encre .section__intro{color:currentColor;opacity:var(--opacite-2)}
.section--encre .surtitre{color:currentColor;opacity:var(--opacite-2)}
.section--encre .btn--lien{--btn-texte:var(--jaune)}
.section--encre .contact-pole .btn--lien{--btn-texte:var(--violet)}
.section--encre .btn--contour{
--btn-texte:var(--blanc);
--btn-fond-survol:var(--voile-clair);
border-color:var(--bord-clair);
}
.section--encre .btn:focus-visible{outline-color:var(--jaune)}
.section__entete{display:grid;gap:var(--espace-texte);margin-block-end:var(--espace-bloc)}
.section__intro{color:var(--texte-2);font-size:var(--fs-m)}
.sur-sombre .section__intro{color:currentColor;opacity:var(--opacite-2)}
.univers{
display:grid;
gap:calc(var(--espace-grille) + var(--bosse) * 1.1) var(--espace-grille);
grid-template-columns:1fr;
padding-block-end:calc(var(--bosse) * 1.1);
}
@media (min-width:620px){.univers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.univers{grid-template-columns:repeat(4,1fr)}}
@media (min-width:620px){
.univers>.carte-piece{
display:grid;
grid-row:span 4;
grid-template-rows:subgrid;
row-gap:0;
}
.univers>.carte-piece>.carte-piece__corps{
grid-row:span 3;
grid-template-rows:subgrid;
align-items:start;
}
}
.carte-piece__visuel{
aspect-ratio:2 / 3;
display:grid;
grid-template-rows:minmax(0,1fr);
min-block-size:0;
place-items:center;
padding:0;
background:var(--fond);
border-block-end:1px solid var(--filet);
}
.carte-piece--livre .carte-piece__visuel{background:var(--fond-fonce)}
.carte-piece__visuel{overflow:hidden}
.carte-piece__visuel img{
inline-size:100%;
aspect-ratio:2 / 3;
object-fit:contain;
}
.section__suite{margin-block-start:var(--espace-bloc);display:flex;justify-content:center}
.carte-piece--photo .carte-piece__visuel{padding:0}
.carte-piece--photo .carte-piece__visuel img{
inline-size:100%;aspect-ratio:2 / 3;
object-fit:cover;object-position:50% 32%;
}
.carte-piece--reel .carte-piece__visuel{
position:relative;
background:var(--sombre);
border-block-end-color:var(--sombre);
}
.carte-piece--reel .carte-piece__visuel img{object-position:50% 42%}
.carte-piece--reel .video__jouer{
position:absolute;inset-block-start:50%;inset-inline-start:50%;
translate:-50% -50%;
inline-size:3.25rem;block-size:3.25rem;
}
@media (prefers-reduced-motion:no-preference){
.carte-piece--reel:hover .video__jouer{scale:1.08}
}
.carte-piece--reel:hover .video__jouer{background:var(--jaune)}
.carte-piece__corps{display:grid;gap:var(--espace-lie);padding:var(--espace-texte)}
.carte-piece__titre{
font:var(--police-titre-l);
letter-spacing:var(--ls-titre);
text-transform:uppercase;
}
.carte-piece__texte{font-size:var(--fs-s);color:var(--texte-2)}
.carte-piece__fleche{font-weight:var(--fw-gras);color:var(--violet);font-size:var(--fs-s)}
.carte-piece:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.residence{
margin-block-end:var(--espace-bloc);
display:grid;
gap:var(--espace-texte);
padding:var(--espace-action);
background:var(--sombre);
color:var(--fond);
}
.residence>div{display:grid;gap:var(--espace-lie)}
.residence .surtitre,
.sur-sombre .surtitre{color:currentColor;opacity:var(--opacite-2)}
.residence__ville{font:var(--police-titre-2xl);letter-spacing:var(--ls-titre);text-transform:uppercase}
.residence__salle{font:var(--police-titre-l);letter-spacing:var(--ls-titre)}
.residence__periode{max-inline-size:var(--largeur-texte);color:var(--fond);opacity:var(--opacite-2)}
.residence--evenement{background:var(--violet)}
.residence--evenement .residence__periode{color:var(--blanc)}
.residence--evenement .btn{
--btn-fond:var(--fond);
--btn-texte:var(--encre);
--btn-fond-survol:var(--blanc);
}
.residence--evenement .btn:focus-visible{outline-color:var(--jaune)}
@media (min-width:768px){
.residence{
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
padding:var(--espace-action) var(--espace-bloc);
gap:var(--espace-action);
}
}
.filtres{display:flex;flex-wrap:wrap;gap:var(--espace-lie);margin-block-end:var(--espace-texte)}
@media not all and (min-width:620px){
.filtres{
flex-wrap:nowrap;
margin-inline:calc(var(--gouttiere) * -1);
padding-inline:var(--gouttiere);
scroll-padding-inline:var(--gouttiere);
overflow-x:auto;
overscroll-behavior-x:contain;
scrollbar-width:none;
}
.filtres::-webkit-scrollbar{display:none}
.filtre{flex:none}
}
.filtre{
padding:var(--espace-lie) var(--espace-texte);
border:2px solid var(--bord);
border-radius:var(--r-0);
background:transparent;
color:var(--texte-2);
font:var(--police-libelle);
letter-spacing:var(--ls-libelle);
text-transform:uppercase;
cursor:pointer;
min-block-size:44px;
transition:background-color var(--duree-hover) var(--ease),color var(--duree-hover) var(--ease);
}
.filtre:hover{background:var(--fond-fonce);color:var(--encre)}
.filtre[aria-pressed='true']{background:var(--sombre);border-color:var(--sombre);color:var(--fond)}
.filtre:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--espace-action);align-items:start}
@media (min-width:768px){
.duo.duo--contact{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--espace-partie)}
}
@media (min-width:860px){
.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--espace-partie)}
.duo--inverse{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}
.duo--inverse>:first-child{order:2}
@supports selector(:has(*)){
.enveloppe:has(>.duo--inverse){
display:grid;
grid-template-columns:minmax(0,7fr) minmax(0,5fr);
grid-template-rows:auto auto;
column-gap:var(--espace-partie);
row-gap:0;
align-items:start;
}
.enveloppe:has(>.duo--inverse)>.section__entete{grid-column:1;grid-row:1}
.enveloppe:has(>.duo--inverse)>.duo--inverse{display:contents}
.enveloppe:has(>.duo--inverse) .duo__texte,
.enveloppe:has(>.duo--inverse)>.duo--inverse>:not(.duo__visuel){
grid-column:1;grid-row:2;
}
.enveloppe:has(>.duo--inverse) .duo__visuel{
grid-column:2;
grid-row:1 / -1;
align-self:stretch;
min-block-size:0;
}
}
.duo--inverse>:not(.duo__visuel){align-content:start;align-self:start}
.duo--inverse .duo__visuel{
max-inline-size:none;
justify-self:end;
inline-size:100%;
position:relative;
min-block-size:26rem;
}
.duo--inverse .duo__visuel img,
.duo--inverse .duo__visuel img[width="620"],
.duo--inverse .duo__visuel img[width="760"]{
position:absolute;
inset-block:0;
inset-inline-end:0;
aspect-ratio:4 / 5;
inline-size:auto;
max-inline-size:100%;
block-size:100%;
object-fit:cover;
object-position:50% var(--cadrage,28%);
}
}
.duo__visuel{max-inline-size:26rem}
@media (min-width:620px){
.duo.duo--macaron{
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:var(--espace-bloc);
}
}
@media (min-width:860px){
.duo.duo--macaron{gap:var(--espace-partie)}
}
.duo__visuel img[width="620"],
.duo__visuel img[width="760"]{max-inline-size:min(22rem,100%)}
@media not all and (min-width:620px){
.duo__visuel{max-inline-size:none}
.duo__visuel img[width="620"],
.duo__visuel img[width="760"]{max-inline-size:100%}
}
.duo__texte{display:grid;gap:var(--espace-texte)}
.duo__texte>.btn{justify-self:start}
.duo__texte p{max-inline-size:var(--largeur-texte);color:var(--texte-2)}
.duo__texte .mesure{color:var(--texte-2)}
.section--encre .duo__texte p{color:currentColor;opacity:var(--opacite-2)}
.video__jouer{
position:relative;
inline-size:4rem;block-size:4rem;
border-radius:50%;
background:var(--blanc);
box-shadow:var(--ombre-bouton);
transition:scale var(--duree-hover) var(--ease),background-color var(--duree-hover) var(--ease);
}
.video__jouer::before{
content:'';
position:absolute;inset-block-start:50%;inset-inline-start:54%;
translate:-50% -50%;
border-block:0.7rem solid transparent;
border-inline-start:1.15rem solid var(--encre);
}
.formulaire{display:grid;gap:var(--espace-texte);max-inline-size:30rem}
.formulaire>.newsletter__retour:empty{position:absolute}
.formulaire .btn{justify-self:start}
.formulaire>.btn{margin-block-start:calc(var(--espace-action) - var(--espace-texte))}
.champ__input--zone{min-block-size:9rem;resize:vertical;line-height:var(--lh-texte)}
select.champ__input{appearance:none;padding-inline-end:var(--sp-7);
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 22px) center,calc(100% - 16px) center;
background-size:6px 6px,6px 6px;
background-repeat:no-repeat}
.liens-liste{display:grid;gap:var(--espace-lie)}
@media (min-width:860px){
.liens-liste--colonnes{grid-template-columns:1fr 1fr}
}
.lien-carte{
display:grid;gap:var(--espace-ligne);
padding:var(--espace-texte);
background:var(--fond-clair);
border-inline-start:3px solid var(--violet);
text-decoration:none;
transition:background-color var(--duree-hover) var(--ease);
}
.lien-carte:hover{background:var(--fond-fonce)}
.lien-carte:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.lien-carte__titre{font:var(--police-carte)}
.lien-carte__detail{font-size:var(--fs-s);color:var(--texte-2)}
.newsletter{display:grid;gap:var(--espace-texte)}
.newsletter__form{display:grid;gap:var(--espace-lie)}
@media (min-width:620px){
.newsletter__form{
grid-template-columns:minmax(0,1fr) auto;
gap:var(--espace-lie);
align-items:start;
}
.newsletter__form .champ{display:contents}
.newsletter__form .champ__label,
.newsletter__form .champ__input,
.newsletter__form .champ__aide,
.newsletter__form .champ__erreur{grid-column:1}
.newsletter__form>.btn{grid-column:2;grid-row:2}
.newsletter__retour{grid-column:1 / -1}
}
.champ{display:grid;gap:var(--espace-lie)}
.champ__label{font:var(--police-libelle);letter-spacing:var(--ls-libelle);text-transform:uppercase}
.champ__input{
min-block-size:48px;
inline-size:100%;
padding:var(--sp-3) var(--sp-4);
border:2px solid var(--bord);
border-radius:var(--r-0);
background:var(--fond-clair);
color:var(--encre);
font:var(--fw-texte) var(--fs-m)/var(--lh-dense) var(--f-texte);
}
.champ__input:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-color:var(--encre)}
.champ__aide{font-size:var(--fs-s);color:var(--texte-2)}
.pied .champ__aide,
.pied .champ__erreur,
.pied .champ__label{color:var(--blanc);opacity:var(--opacite-2)}
.champ__erreur{font-size:var(--fs-s);font-weight:var(--fw-gras);color:var(--violet-fonce)}
.newsletter__retour{font-size:var(--fs-s);font-weight:var(--fw-gras)}
.pied{
background:var(--violet);
color:var(--blanc);
--tenon-x:24%;
}
.pied .titre-bloc{color:currentColor}
.pied__bande{padding-block:var(--section-y)}
.pied__bande--infos{padding-block-end:calc(var(--espace-bloc) + env(safe-area-inset-bottom))}
@media not all and (min-width:860px){
.pied__bande--action{background:var(--violet)}
.pied__bande--infos{background:var(--sombre);--tenon-x:72%}
}
@media (min-width:860px){
.pied__grille{
display:grid;
grid-template-columns:1.1fr 1fr;
column-gap:var(--espace-partie);
row-gap:var(--espace-bloc);
inline-size:100%;
max-inline-size:var(--largeur-max);
margin-inline:auto;
padding-inline:var(--gouttiere);
padding-block:var(--section-y) calc(var(--espace-bloc) + env(safe-area-inset-bottom));
}
.pied__bande,.pied__bande>.enveloppe{display:contents}
.pied__bande.piece--tenon::before,
.pied__bande.piece--tenon::after{display:none}
.pied .pied__bas{
grid-column:1 / -1;
margin-block-start:0;
justify-content:space-between;
text-align:start;
}
.pied .pied__signature{
inline-size:auto;
margin-block-start:0;
margin-inline-start:auto;
}
}
.pied__titre{
font:var(--police-titre-l);
letter-spacing:var(--ls-titre);
text-transform:uppercase;
padding-block-start:0.06em;
margin-block-end:var(--espace-texte);
}
.pied__intro{color:currentColor;opacity:var(--opacite-2);margin-block-end:var(--espace-action)}
.pied__liens{display:flex;flex-wrap:wrap;gap:var(--espace-texte) var(--espace-action)}
.pied__liens a{
font-size:var(--fs-s);
color:var(--texte);
text-decoration:none;
border-block-end:1px solid var(--bord);
padding-block-end:2px;
}
.pied__liens a:hover{color:var(--violet);border-block-end-color:var(--violet)}
.pied__liens a:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.pied .pied__liens a{color:var(--blanc);border-block-end-color:var(--bord-clair)}
.pied .pied__liens a:hover{color:var(--jaune);border-block-end-color:var(--jaune)}
.pied .pied__liens a:focus-visible{outline-color:var(--jaune)}
.pied__reseaux{display:flex;flex-wrap:wrap;gap:var(--espace-lie)}
.pied__reseau{
display:inline-flex;align-items:center;justify-content:center;
inline-size:44px;block-size:44px;
border:2px solid var(--bord-clair);
color:var(--blanc);
transition:background-color var(--duree-hover) var(--ease),
color var(--duree-hover) var(--ease),
border-color var(--duree-hover) var(--ease);
}
.pied__reseau svg{inline-size:20px;block-size:20px;fill:currentColor}
.pied__reseau:hover{background:var(--jaune);border-color:var(--jaune);color:var(--encre)}
.pied__reseau:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
@media not all and (min-width:860px){.pied__reseaux{justify-content:center}}
@media not all and (min-width:860px){
.pied{text-align:center}
.pied__grille{justify-items:center}
.pied .newsletter,
.pied__nav{inline-size:100%;max-inline-size:26rem}
.pied__intro{margin-inline:auto}
.pied__liens{justify-content:center}
.pied .champ{justify-items:stretch}
.pied .champ__label{text-align:center}
.pied__bas{justify-content:center;text-align:center}
.pied__signature{text-align:center}
}
.pied__bas{
display:flex;flex-wrap:wrap;gap:var(--espace-lie) var(--espace-action);
align-items:center;justify-content:center;text-align:center;
margin-block-start:var(--espace-bloc);
padding-block-start:var(--espace-action);
border-block-start:1px solid var(--trait-clair);
font-size:var(--fs-s);
color:var(--blanc);
opacity:var(--opacite-2);
}
.pied__signature{
inline-size:100%;
margin-block-start:var(--espace-lie);
font-size:var(--fs-s);
color:var(--blanc);
opacity:var(--opacite-2);
text-align:center;
}
.pied__signature a{
color:var(--blanc);
text-decoration:underline;
text-underline-offset:0.2em;
}
.pied__signature a:hover{color:var(--jaune)}
.avertissement{
background:var(--jaune);
color:var(--encre);
font-size:var(--fs-s);
font-weight:var(--fw-gras);
text-align:center;
padding:var(--espace-lie) var(--gouttiere);
}
@media print{
.entete,.burger,.nav,.pied__liens,.newsletter,.avertissement,.hero__affiche{display:none !important}
body{background:#fff;color:#141414}
.date{border:1px solid #999;break-inside:avoid}
a[href^='http']::after{content:' (' attr(href) ')';font-size:0.75em}
}
@media (max-width:767.98px) and (max-height:720px){
.nav{max-block-size:min(80svh,calc(100svh - var(--h-entete)));
padding-block:var(--espace-lie) calc(var(--espace-lie) + env(safe-area-inset-bottom))}
.nav__lien{min-block-size:44px;padding-block:var(--espace-ligne);font-size:var(--fs-s)}
.nav__liste li{--tenon-r:12px}
.nav__pied{padding-block-start:var(--espace-lie)}
}
@media not all and (min-width:768px){
.hero-page--texte{
min-block-size:calc(100svh - var(--h-chrome,var(--h-entete)) - var(--amorce));
align-content:center;
}
}
@media not all and (min-width:768px){
.piece.piece--tenon::before{z-index:21}
.piece.piece--tenon::after{z-index:22}
}
.reels{margin-block-start:var(--espace-partie)}
.section:has(.reels){overflow-x:clip}
.reels__tete{
display:flex;
align-items:end;
justify-content:space-between;
gap:var(--espace-texte);
margin-block-end:var(--espace-action);
}
.reels__fleches{display:flex;flex:none;gap:var(--espace-lie)}
.reels__fleche{
display:inline-grid;
place-items:center;
inline-size:44px;
block-size:44px;
padding:0;
border:2px solid var(--encre);
border-radius:var(--r-pastille);
background:transparent;
color:var(--encre);
cursor:pointer;
transition:background-color var(--duree-etat) var(--ease),color var(--duree-etat) var(--ease);
}
.reels__fleche svg{inline-size:20px;block-size:20px}
.reels__fleche:hover:not(:disabled){background:var(--encre);color:var(--blanc)}
.reels__fleche:disabled{opacity:0.3;cursor:default}
.reels__fleche:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.reels__rail{
--col-reel:82%;
--gap-reel:var(--espace-grille);
display:grid;
grid-auto-flow:column;
grid-auto-columns:var(--col-reel);
gap:var(--gap-reel);
margin:0 calc(var(--gouttiere) * -1);
padding:var(--espace-lie) var(--gouttiere) calc(var(--bosse) * 1.1 + var(--espace-texte));
scroll-padding-inline:var(--gouttiere);
overflow-x:auto;
overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scrollbar-width:none;
list-style:none;
}
.reels__rail::-webkit-scrollbar{display:none}
@media (min-width:620px){
.reels__rail{--col-reel:calc((100% - var(--espace-grille)) / 2 * 0.9)}
}
@media (min-width:1024px){
.reels__rail{
--col-reel:calc((100% - 3 * var(--espace-grille)) / 4);
margin-inline:0 calc((100% - 100vw) / 2);
padding-inline:0 calc((100vw - 100%) / 2);
scroll-padding-inline:0;
}
}
.reel{min-inline-size:0;scroll-snap-align:start}
.reel__lien{
display:grid;
grid-template-rows:auto 1fr;
block-size:100%;
background:var(--fond-clair);
color:inherit;
text-decoration:none;
}
.reel__cadre{
position:relative;
display:block;
aspect-ratio:2 / 3;
overflow:hidden;
background:var(--sombre);
}
.reel__cadre picture,
.reel__image{display:block;inline-size:100%;block-size:100%}
.reel__image{object-fit:cover}
.reel__jouer{
position:absolute;
inset-block-start:50%;
inset-inline-start:50%;
translate:-50% -50%;
inline-size:3.5rem;
block-size:3.5rem;
border-radius:var(--r-pastille);
background:rgb(255 255 255 / 0.9);
box-shadow:var(--ombre-bouton);
transition:background-color var(--duree-etat) var(--ease);
}
.reel__jouer::before{
content:'';
position:absolute;
inset:0;
margin:auto;
inline-size:1rem;
block-size:1.15rem;
translate:2px 0;
background:var(--encre);
clip-path:polygon(0 0,100% 50%,0 100%);
}
.reel__lien:hover .reel__jouer{background:var(--jaune)}
.reel__corps{display:grid;grid-template-rows:1fr auto;gap:var(--espace-lie);padding:var(--espace-texte)}
.reel__titre{
align-self:start;
display:-webkit-box;
overflow:hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
font:var(--police-carte);
}
.reel__vues{
display:inline-flex;
align-items:center;
gap:var(--espace-lie);
font-size:var(--fs-s);
font-weight:var(--fw-gras);
color:var(--violet);
}
.reel__vues::before{
content:'';
inline-size:0.65em;
block-size:0.75em;
background:currentColor;
clip-path:polygon(0 0,100% 50%,0 100%);
}
.reel__lien:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
.reel__image{transition:scale var(--duree-etat) var(--ease)}
.reel__lien:hover .reel__image{scale:1.04}
}
.reels__progres{
position:relative;
block-size:4px;
margin-block-start:0;
overflow:hidden;
border-radius:var(--r-pastille);
background:var(--piste);
}
.reels__progres-barre{
position:absolute;
inset-block:0;
inset-inline-start:0;
inline-size:calc(var(--taille,0.5) * 100%);
translate:calc(var(--debut,0) / var(--taille,0.5) * 100%) 0;
border-radius:inherit;
background:var(--encre);
}
.reels__suite{margin-block-start:var(--espace-action)}
.reels__liste{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:calc(var(--espace-grille) + var(--bosse) * 1.1) var(--espace-grille);
margin:0;
padding:0 0 calc(var(--bosse) * 1.1);
list-style:none;
}
@media (min-width:620px){
.reels__liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
.reels__liste{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.revue{
display:grid;
gap:var(--espace-grille);
grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
list-style:none;
margin:0;
padding:0;
}
.revue__carte{display:grid}
.revue__lien{
display:grid;
gap:calc(var(--espace-lie) + var(--bosse) * 1.1);
align-content:start;
color:inherit;
text-decoration:none;
transition:translate var(--duree-etat) var(--ease);
}
.revue__lien:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
.revue__lien:hover{translate:0 -4px}
}
.revue__vignette{
position:relative;
aspect-ratio:4 / 3;
background:var(--fond-logo,var(--blanc));
border:1px solid transparent;
transition:border-color var(--duree-hover) var(--ease);
}
.revue__lien:hover .revue__vignette{border-color:var(--encre)}
.revue__vignette picture{display:contents}
.revue__logo{
position:absolute;
inset:var(--espace-action);
inline-size:calc(100% - 2 * var(--espace-action));
block-size:calc(100% - 2 * var(--espace-action));
object-fit:contain;
}
.revue__media{
font:var(--police-titre-l);
letter-spacing:var(--ls-titre);
text-wrap:balance;
}
.revue__genre{
font:var(--police-libelle);
letter-spacing:var(--ls-libelle);
text-transform:uppercase;
color:var(--texte-3);
}
.revue__texte{display:grid;gap:var(--espace-ligne)}
.revue__titre{
font:var(--police-carte);
text-wrap:pretty;
}
.revue__lien:hover .revue__titre{color:var(--violet)}
.revue__meta{font-size:var(--fs-s);color:var(--texte-2)}
.revue__progres{display:none}
@media (max-width:1023.98px){
.section:has(.revue--carrousel){overflow-x:clip}
.revue.revue--carrousel{
grid-template-columns:none;
grid-auto-flow:column;
grid-auto-columns:82%;
gap:var(--espace-grille);
margin-inline:calc(var(--gouttiere) * -1);
padding:var(--espace-lie) var(--gouttiere) var(--espace-action);
scroll-padding-inline:var(--gouttiere);
overflow-x:auto;
overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.revue.revue--carrousel::-webkit-scrollbar{display:none}
.revue--carrousel>li{scroll-snap-align:start}
.revue__progres{display:block}
}
@media (min-width:620px) and (max-width:1023.98px){
.revue.revue--carrousel{grid-auto-columns:calc((100% - var(--espace-grille)) / 2 * 0.9)}
}
@media (min-width:768px) and (max-width:1023.98px){
.nav__liste{gap:var(--sp-3)}
}