/* Vauzel Paris. White, ink, one signature colour for the logo and the seal.
   Serif only, like a publishing house. 1 px rules, square corners, nothing else. */

@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* system fonts tuned to the same room, so nothing jumps when the real ones arrive */
@font-face{font-family:"Bodoni Fallback";src:local("Georgia");size-adjust:103%;ascent-override:109.2%;descent-override:38.8%;line-gap-override:0%}
@font-face{font-family:"Garamond Fallback";src:local("Times New Roman"),local("Times");size-adjust:94.5%;ascent-override:106.6%;descent-override:31.6%;line-gap-override:0%}

:root{
  --blanc:#fff;--encre:#111;--sceau:#4A1520;
  --titre:"Bodoni Moda","Bodoni Fallback",Didot,"Bodoni MT",serif;
  --texte:"EB Garamond","Garamond Fallback",Garamond,serif;
  --filet:1px solid var(--encre);
  --marge:clamp(24px,5.5vw,96px);
  --haut:76px;
  --retrait:calc(var(--marge) + 9vw);
}
@media (min-width:900px){:root{--haut:104px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-bottom:120px}
body{margin:0;background:var(--blanc);color:var(--encre);font:400 1.25rem/1.5 var(--texte);font-variant-numeric:oldstyle-nums proportional-nums;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,p,ul,dl,dd,figure{margin:0;padding:0;font-weight:400}
ul{list-style:none}
a{color:inherit;text-decoration:underline 1px;text-underline-offset:.22em}
a:hover{text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;left:-999px;top:0;background:var(--encre);color:var(--blanc);padding:12px 18px;z-index:60}
.skip:focus{left:8px;top:8px}
.hp{position:absolute!important;left:-9999px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ph{text-decoration:underline dotted 1px;text-underline-offset:.2em}

/* ---------- type ---------- */
p{text-wrap:pretty}
/* Bodoni's hairlines vanish on an ordinary screen at their true optical size: every setting below is held lower, for eyes of fifty and more */
.enonce{font-family:var(--titre);font-variation-settings:"opsz" 20;font-size:1.625rem;line-height:1.24;letter-spacing:.004em;font-variant-numeric:lining-nums proportional-nums;text-wrap:balance}
.intitule,.nav-main .nav-side a,.menu-btn,.lien,.field label,.lignes dt,.dx-progress,.intro-passer{font-family:var(--texte);font-weight:500;font-size:.8125rem;line-height:1.4;letter-spacing:.24em;text-transform:uppercase}
.intitule{border-top:var(--filet);padding-top:14px;margin-bottom:28px}
.intitule a{text-decoration:none}
.legende{font-style:italic;font-size:1rem;line-height:1.4;text-wrap:pretty}

/* ---------- logo ---------- */
.wm-name{position:relative}
.wm-name::after,.intro-nom::after{content:"\2122";position:absolute;left:100%;top:0;letter-spacing:0;font-family:var(--texte);font-variation-settings:normal}
.wm-name::after{font-size:.42em;margin-left:-.5em}
.wordmark{display:inline-flex;flex-direction:column;align-items:center;color:var(--sceau);font-family:var(--titre);line-height:1;text-decoration:none;white-space:nowrap}
.wm-name{font-variation-settings:"opsz" 16;font-size:1.3125rem;letter-spacing:.42em;margin-right:-.42em}
.wm-city{font-variation-settings:"opsz" 11;font-size:.625rem;letter-spacing:.56em;margin-right:-.56em;margin-top:.7em;text-transform:uppercase}

/* ---------- header ---------- */
.top{position:relative;z-index:50;display:flex;align-items:center;justify-content:center;height:var(--haut);background:var(--blanc);border-bottom:var(--filet)}
.nav-side{display:none}
.menu-btn{position:absolute;left:var(--marge);top:50%;transform:translateY(-50%);background:none;border:0;padding:14px 14px 14px 0;cursor:pointer}
.when-open,[aria-expanded="true"] .when-closed,details[open] .when-closed{display:none}
[aria-expanded="true"] .when-open,details[open] .when-open{display:inline}
.menu{position:fixed;inset:0;z-index:49;background:var(--blanc);padding:calc(var(--haut) + 28px) var(--marge) 32px;overflow:auto}
.menu li{border-bottom:var(--filet)}
.menu a{display:block;padding:20px 0;font-family:var(--titre);font-variation-settings:"opsz" 18;font-size:1.5rem;line-height:1.2;text-decoration:none}
body.menu-open{overflow:hidden}
html:not(.js) .menu-btn{display:none}
html:not(.js) .top{height:auto;padding:16px var(--marge)}
html:not(.js) .nav-main{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px}
html:not(.js) .nav-side{display:flex;gap:20px}
html:not(.js) .wordmark{order:-1;flex-basis:100%}

/* the home page opens on black: the header lies over the entrance frame, in white */
body.accueil:not(.menu-open) .top{position:absolute;left:0;right:0;top:0;background:transparent;border-bottom:0;color:var(--blanc)}
body.accueil:not(.menu-open) .top .wordmark{color:var(--blanc)}
html:not(.js) body.accueil .nav-main{color:var(--blanc)}

/* ---------- images ---------- */
.cadre{position:relative;overflow:hidden;background:var(--encre);color:var(--blanc)}
/* out of the flow: an image fills its frame and never changes the height of the page */
.cadre picture{position:absolute;inset:0;display:block}
.cadre img{display:block;width:100%;height:100%;object-fit:cover}
.planche .legende{padding:12px var(--marge) 0}
/* where each mood image holds its subject when its frame crops it */
.pos-goutte img{object-position:50% 62%}
.pos-creme img{object-position:50% 52%}
.pos-cheminee img{object-position:70% 56%}
.pos-coule img{object-position:50% 55%}
.pos-lettre img{object-position:50% 61%}
.pos-ecrin img{object-position:50% 70%}

/* ---------- home: the entrance frame ---------- */
.ouverture{position:relative;display:flex;flex-direction:column;height:100vh;height:100svh;min-height:480px;background:var(--encre);color:var(--blanc)}
.ouverture-image{position:relative;flex:1;min-height:0;overflow:hidden;margin-top:var(--haut)}
.ouverture-media{position:absolute;inset:0}
.ouverture-media picture,.ouverture-film{position:absolute;inset:0;display:block;width:100%;height:100%}
.ouverture-media img{display:block;width:100%;height:100%;object-fit:cover}
.ouverture-film{object-fit:cover}
.ouverture-bande{padding:16px var(--marge) 20px}
.ouverture-date{font-family:var(--titre);font-variation-settings:"opsz" 20;font-size:1.75rem;line-height:1.2;letter-spacing:.01em;font-variant-numeric:lining-nums proportional-nums}

/* ---------- the opening: 6.9 seconds, once per visit. The whole timeline is here, so that it ends by itself. ---------- */
#intro{display:none}
html.intro #intro{display:block;position:fixed;inset:0;z-index:100;cursor:pointer;color:var(--blanc);animation:intro-fin 0s linear 6.9s forwards}
.intro-panneau{position:absolute;left:0;right:0;height:50.5%;background:var(--encre)}
.intro-haut{top:0;animation:ouvre-haut 1.5s cubic-bezier(.65,0,.25,1) 3.9s forwards}
.intro-bas{bottom:0;animation:ouvre-bas 1.5s cubic-bezier(.65,0,.25,1) 3.9s forwards}
.intro-logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--titre);line-height:1;animation:efface .7s ease 3.4s forwards}
.intro-nom{display:flex;font-variation-settings:"opsz" 18;font-size:clamp(1.75rem,4.4vw,3.25rem)}
/* letter by letter, each drawing slowly away from its neighbours */
.intro-nom span{display:block;margin:0 .25em;opacity:0;transform:translateX(calc(var(--d,0) * -.2em));animation:nait .9s ease 1.85s forwards,ecart 3.1s cubic-bezier(.25,.1,.25,1) .35s forwards}
.intro-nom span:nth-child(1){--d:-2.5;animation-delay:.35s,.35s}
.intro-nom span:nth-child(2){--d:-1.5;animation-delay:.6s,.35s}
.intro-nom span:nth-child(3){--d:-.5;animation-delay:.85s,.35s}
.intro-nom span:nth-child(4){--d:.5;animation-delay:1.1s,.35s}
.intro-nom span:nth-child(5){--d:1.5;animation-delay:1.35s,.35s}
.intro-nom span:nth-child(6){--d:2.5;animation-delay:1.6s,.35s}
.intro-ville{font-variation-settings:"opsz" 11;font-size:clamp(.625rem,1.3vw,.9375rem);letter-spacing:.6em;margin:1.5em -.6em 0 0;text-transform:uppercase;opacity:0;animation:nait 1s ease 2.35s forwards}
.intro-passer{position:absolute;right:var(--marge);bottom:clamp(16px,3.5vh,32px);padding:12px 0 12px 12px;background:none;border:0;color:var(--blanc);cursor:pointer;font-size:.75rem;opacity:0;animation:nait .8s ease .8s forwards,efface .5s ease 5.1s forwards}
html.intro .ouverture-media{opacity:0;transform:scale(1.05);will-change:opacity,transform;animation:sort-de-l-ombre 3.4s ease-in-out 3.5s forwards}
html.intro .ouverture-date{opacity:0;animation:nait 1.1s ease 5.5s forwards}
html.intro body.accueil .top{opacity:0;animation:nait 1.1s ease 5.7s forwards}
@keyframes nait{to{opacity:1}}
@keyframes efface{to{opacity:0}}
@keyframes ecart{to{transform:none}}
@keyframes ouvre-haut{to{transform:translateY(-101%)}}
@keyframes ouvre-bas{to{transform:translateY(101%)}}
@keyframes sort-de-l-ombre{to{opacity:1;transform:none}}
@keyframes intro-fin{to{visibility:hidden}}

/* ---------- home: the one line ---------- */
.promesse{display:flex;align-items:center;min-height:38vh;min-height:38svh;padding:36px var(--marge) 36px var(--retrait)}

/* ---------- home: a drop, a texture, never the whole ---------- */
.fragments{display:grid;gap:24px;padding-bottom:32px}
.fragments .cadre{aspect-ratio:4 / 5;max-height:50vh;max-height:50svh;width:100%}
.fragments .planche + .planche .cadre{max-height:42vh;max-height:42svh}
.fragments .planche + .planche{margin-left:var(--retrait)}

/* ---------- home: the Ecrin, far from any price or button ---------- */
.ecrin .cadre{height:40vh;height:40svh}
.ecrin-texte{padding:28px var(--marge) 36px var(--retrait)}

/* ---------- home: the house, in short ---------- */
.resume-maison{padding:16px var(--marge) 48px var(--retrait)}
.resume-maison .enonce + p{margin-top:16px}
.resume-maison p + p{margin-top:12px}

/* ---------- the house ---------- */
.maison .cadre{height:48vh;height:48svh}
.maison-texte{padding:32px var(--marge) 56px var(--retrait)}
.maison-texte .enonce + .enonce{margin-top:14px}

/* ---------- Le Rituel ---------- */
.rituel .cadre{height:36vh;height:36svh}
.rituel-texte{padding:32px var(--marge) 56px}
.rituel-tete{margin-bottom:36px}
.geste + .geste{margin-top:32px}
.geste{margin-left:calc(var(--retrait) - var(--marge))}
.geste h3{font-family:var(--titre);font-variation-settings:"opsz" 14;font-size:1.25rem;line-height:1.2;border-top:var(--filet);padding-top:14px;margin-bottom:10px}

/* ---------- the last screen ---------- */
.appel{display:grid;gap:24px;padding:40px var(--marge) 48px}
.sceau{display:block;width:72px;height:72px;color:var(--sceau)}
.sceau-v{font-family:var(--titre);font-variation-settings:"opsz" 20;font-size:36px;fill:currentColor}
.sceau-cercle{font-family:var(--titre);font-variation-settings:"opsz" 11;font-size:8.5px;fill:currentColor}
.appel-texte .enonce + p{margin-top:12px}
.appel-texte p + p{margin-top:10px}
.appel-lettre .cadre{height:25vh;height:25svh}
.invitation{margin-top:28px}
.bouton{display:inline-block;background:var(--encre);color:var(--blanc);border:var(--filet);border-radius:0;font-family:var(--texte);font-weight:500;font-size:.8125rem;line-height:1.3;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;text-align:center;text-decoration:none;padding:18px 28px;cursor:pointer;transition:background-color .3s,color .3s}
.bouton:hover{background:var(--blanc);color:var(--encre)}
.bouton:focus-visible{outline-color:var(--encre)}
.bouton-note{font-size:1rem;line-height:1.4;margin-top:14px;text-wrap:balance}

/* ---------- the product pages ---------- */
/* on a phone the image takes what the text leaves, so that the button stays on the first screen */
.fiche-tete{display:flex;flex-direction:column;min-height:calc(100vh - var(--haut));min-height:calc(100svh - var(--haut))}
.fiche-tete .planche{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.fiche-tete .cadre{flex:1 1 auto;min-height:clamp(120px,24vh,520px)}
.fiche-tete-texte{flex:none;padding:18px var(--marge) 22px}
.fiche-tete-texte .intitule{display:none}
.fiche-tete-texte .enonce{margin-bottom:10px}
.fiche-tete-texte .invitation{margin-top:18px}
.choix{display:flex;flex-wrap:wrap;gap:0 24px;border:0;margin:12px 0 0;padding:0}
.choix label{display:inline-flex;align-items:baseline;gap:10px;padding:6px 0;cursor:pointer;white-space:nowrap}
.choix + .invitation{margin-top:12px}
input[type=radio],input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:13px;height:13px;margin:0;border:var(--filet);border-radius:0;background:var(--blanc);cursor:pointer}
input[type=radio]:checked,input[type=checkbox]:checked{background:var(--encre)}
.matiere{padding:48px var(--marge) 8px var(--retrait)}
.matiere-texte{font-size:1.3125rem;line-height:1.32}
.matiere-image{padding-top:clamp(64px,10vh,120px)}
.matiere-image .planche{margin-top:28px}
.matiere-image .cadre{aspect-ratio:4 / 5;max-height:62vh;max-height:62svh;width:100%}
.produits{padding-top:40px}
.produit .cadre{height:62vh;height:62svh}
.produit-texte{padding:28px var(--marge) 64px}
.produit-texte .enonce{margin-bottom:4px}
.produit-texte .enonce a{text-decoration:none}
.produit-format{font-size:1rem;margin-bottom:16px}
.produit-texte p + p:not(.produit-format){margin-top:12px}
.details{padding:32px var(--marge) 56px}
.details-chapo{margin-bottom:28px}
.details-chapo p + p{margin-top:12px}
.detail{border-top:var(--filet)}
.detail:last-child{border-bottom:var(--filet)}
.detail summary{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:15px 0;cursor:pointer;list-style:none}
.detail summary::-webkit-details-marker{display:none}
.detail-e{flex:none;font-style:italic;font-size:1rem}
.detail-c{padding:0 0 24px}
.detail-c p + p,.detail-c .compo + p{margin-top:12px}
.detail-c h3{font-family:var(--titre);font-variation-settings:"opsz" 14;font-size:1.125rem;line-height:1.3;margin:16px 0 6px}
.detail-c h3:first-child{margin-top:0}
.compo li{display:flex;justify-content:space-between;gap:20px}
.compo-pct{white-space:nowrap}
.inci li{display:grid;gap:2px;border-top:var(--filet);padding:10px 0}
.inci li:first-child{border-top:0;padding-top:0}
.inci-nom{font-style:italic}

/* ---------- the pages of text ---------- */
.page{padding:44px var(--marge) 64px}
.page-tete{margin-bottom:32px}
.page-tete .enonce + p{margin-top:14px}
.page-tete .planche{margin-top:28px}
.page-tete .cadre{aspect-ratio:3 / 2}
.fondateur-tete .maison-texte{padding:28px var(--marge) 0}
.page-corps > * + *{margin-top:.8em}
.page-corps > h2,.faq-groupe > h2,.fiche h2,.articles h2{font-family:var(--titre);font-variation-settings:"opsz" 11;line-height:1.25}
.page-corps > h2{font-size:1.375rem;margin-top:2em}
.page-corps > h2:first-child{margin-top:0}
.page-corps > h3{font-family:var(--titre);font-variation-settings:"opsz" 11;font-size:1.0625rem;line-height:1.3;margin-top:1.5em}
.page-corps > h2 + h3{margin-top:.9em}
.page-corps > h3 + p{margin-top:.35em}
.page-corps > h2 + .enonce{margin-top:.6em}
.page-corps > ul > li{border-top:var(--filet);padding:10px 0}
.page-corps > ul > li:last-child{border-bottom:var(--filet)}
.page-corps > .details-liste{margin-top:32px}
.page-corps .planche .legende{padding:10px 0 0}
.page-corps .cadre{aspect-ratio:3 / 2}
.status{font-style:italic;font-size:1rem;line-height:1.4}
.page-corps > .lien-discret{margin-top:2em}
.lignes > div{display:grid;gap:2px;border-top:var(--filet);padding:12px 0}
.lignes > div:last-child{border-bottom:var(--filet)}
.lignes dt{font-size:.75rem}
.sources li{padding:3px 0}
.page-corps > ul.sources > li,.page-corps > ul.sources > li:last-child{border:0}
.fiche-produit{font-style:italic;font-size:1rem}
.numero{margin-top:10px}
.sources-page{margin-top:40px;font-size:.9375rem;line-height:1.4}
.sources-page .intitule{margin-bottom:10px}
.signature{margin-top:1.6em}
.signature span{display:block}
.faq-groupe + .faq-groupe{margin-top:44px}
.faq-groupe > h2{font-size:1.375rem;margin-bottom:14px}
.fiche{border-top:var(--filet);padding:16px 0 26px}
.fiche-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.fiche h2{font-size:1.375rem}
.fiche-precision{font-style:italic;font-size:1rem;margin-top:2px}
.fiche > p + p{margin-top:8px}
.fiche .detail{margin-top:14px;border-bottom:var(--filet)}
.articles li{border-top:var(--filet);padding:20px 0 24px}
.articles li:last-child{border-bottom:var(--filet)}
.articles h2{font-size:1.5rem;margin-bottom:6px}
.articles h2 a{text-decoration:none}
.articles h2 a:hover{text-decoration:underline 1px}
.options{border:0;margin:clamp(28px,5vh,48px) 0 0;padding:0}
.options legend{padding-bottom:14px}
.options label{display:flex;align-items:baseline;gap:14px;border-top:var(--filet);padding:13px 0;line-height:1.35;cursor:pointer}
.options label:last-child{border-bottom:var(--filet)}
.dx-q .enonce{margin-top:14px}
.dx-why{font-style:italic;margin-top:10px}
.dx-reply{font-style:italic;min-height:1.5em;margin-top:14px}
.dx-nav{display:flex;align-items:center;gap:24px;margin-top:14px}
.dx-sheet h3{font-family:var(--titre);font-variation-settings:"opsz" 14;font-size:1.25rem;line-height:1.25;margin:1.4em 0 .3em}
.dx-sheet h3:first-child{margin-top:0}
.dx-rec{border-top:var(--filet);margin-top:32px;padding-top:22px}
.dx-rec .enonce{margin-bottom:10px}
.dx-rec p + a,.dx-rec p + p{display:inline-block;margin-top:10px}
.cocher{display:flex;align-items:baseline;gap:14px;margin-top:22px;font-size:1.0625rem;line-height:1.35;cursor:pointer}

/* ---------- footer ---------- */
.pied{border-top:var(--filet);padding:48px var(--marge) 24px}
.proof-strip{font-style:italic;font-size:1rem;margin-bottom:32px}
.pied-haut{display:grid;gap:36px}
.pied-marque{display:grid;justify-items:start;gap:16px}
.pied-contact a{display:block;padding:5px 0;font-size:1.0625rem;line-height:1.3;text-decoration:none}
.pied-contact a:hover{text-decoration:underline 1px}
.pied-nav{display:grid;gap:20px}
.pied-nav a{display:inline-block;padding:5px 0;font-size:1.0625rem;line-height:1.3;text-decoration:none}
.pied-nav a:hover{text-decoration:underline 1px}
/* the one place a sans-serif is allowed, very small */
.legal{margin-top:40px;border-top:var(--filet);padding-top:14px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.75rem;line-height:1.5;font-variant-numeric:normal}
.legal ul{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:8px}
.legal a,.lien-legal{display:inline-block;padding:7px 0;font:inherit;color:inherit;text-decoration:underline 1px;text-underline-offset:.22em;background:none;border:0;cursor:pointer}
.legal ul a{font-family:var(--texte);font-size:.9375rem;line-height:1.2;font-variant-caps:all-small-caps;letter-spacing:.08em}

/* ---------- the list, and every form ---------- */
.wl-dialog{border:var(--filet);border-radius:0;background:var(--blanc);color:var(--encre);padding:28px 24px;width:min(100% - 32px,30rem);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto}
.wl-dialog::backdrop{background:rgba(17,17,17,.62)}
.wl-close{position:absolute;right:20px;top:18px;margin:0}
.lien{background:none;border:0;padding:8px 0;font-size:.75rem;cursor:pointer;text-decoration:underline 1px;text-underline-offset:.3em}
.field{margin-top:22px}
.field label{display:block;font-size:.75rem;margin-bottom:6px}
.field input{display:block;width:100%;height:44px;padding:0 8px;border:0;border-bottom:var(--filet);border-radius:0;background:transparent;color:var(--encre);font:inherit}
.field input:focus-visible{outline-offset:0}
.field-error{display:block;font-style:italic;font-size:1rem;margin-top:6px}
.liste-form .bouton,.page-corps form > .bouton{margin-top:22px}
.wl-dialog .bouton{width:100%;padding-inline:12px}
.form-status{font-style:italic;font-size:1rem;margin-top:10px}
.form-status:empty{display:none}
.form-note{font-size:1rem;line-height:1.4;margin-top:14px}

/* ---------- the case to tick, and the other small forms ---------- */
.cocher input{flex:none;width:18px;height:18px;margin:0;position:relative;top:.18em;accent-color:var(--encre)}
.field-case .field-error{margin-left:32px}
.case-note{font-size:.875rem;line-height:1.4;margin:8px 0 0 32px}
.case-note a{white-space:nowrap}
.field label .facultatif{display:block;margin-top:2px;font-size:.875rem;font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}
.sms .cocher{font-size:.9375rem;line-height:1.4}
.page-tete .sous-titre{font-style:italic}
.liste-form .cocher{margin-top:20px}
.abonnement{margin-top:14px;font-size:1.0625rem;line-height:1.35}
.abonnement .cocher{margin-top:12px}
.apercu-lien{font-style:italic;font-size:1rem;border-top:var(--filet);padding-top:12px}
/* the four questions on price: each question read as a sentence, the answer in dollars beneath it */
.field-prix{margin-top:30px}
.field-prix label{font-weight:400;font-size:1.25rem;line-height:1.4;letter-spacing:0;text-transform:none;margin-bottom:4px}
.prix-saisie{display:flex;align-items:baseline;gap:8px;max-width:12rem}
.prix-saisie input{flex:1;min-width:0}
.film-pause{position:absolute;right:var(--marge);bottom:12px;z-index:3;background:none;border:0;color:var(--blanc);padding:8px 0 8px 12px;font-family:var(--texte);font-size:1rem;text-decoration:underline 1px;text-underline-offset:.22em;cursor:pointer}

/* ---------- the booklets: the legal pages, set like a printed booklet of the house. Garamond only ---------- */
.avis-educatif{font-style:italic;font-size:1rem;line-height:1.4;margin-top:14px}
.livret .enonce{font-family:var(--texte);font-variation-settings:normal;font-size:1.75rem;line-height:1.2;letter-spacing:0}
.livret .page-corps > .enonce{font-size:1.5rem;line-height:1.25}
.maj{font-style:italic;font-size:1rem;line-height:1.4;margin-top:10px}
.sommaire{margin-top:22px;font-size:1rem;line-height:1.35}
.sommaire-titre{font-weight:500;font-size:.8125rem;line-height:1.4;letter-spacing:.24em;text-transform:uppercase;margin-bottom:6px}
.sommaire ol{list-style:none;margin:0;padding:0}
.sommaire a{display:grid;grid-template-columns:1.9em 1fr;padding:3px 0;text-decoration:none}
.sommaire a:hover{text-decoration:underline 1px}
.livret .page-corps > h2{display:grid;grid-template-columns:1.6em 1fr;font-family:var(--texte);font-variation-settings:normal;font-weight:500;font-size:1.25rem;line-height:1.3;margin-top:2.2em;padding-top:14px;border-top:var(--filet)}
.livret .page-corps > h2:first-of-type{margin-top:1.4em}
.livret .page-corps > h2:first-child{margin-top:0}
.livret .page-corps > h3{font-family:var(--texte);font-variation-settings:normal;font-style:italic;font-size:1.1875rem;margin-top:1.3em}
.livret .page-corps > h3 + .lignes{margin-top:.35em}
.livret .lignes dt{letter-spacing:.14em}
.art-num{font-variant-numeric:oldstyle-nums proportional-nums}
.pub-etat{font-style:italic}
.choix-pub{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bouton[disabled]{background:var(--blanc);color:var(--encre);cursor:default}

/* ---------- cookie choices ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:46;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;background:var(--blanc);border-top:var(--filet);padding:12px var(--marge);font-size:1rem;line-height:1.3}
.cookie-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px}
.cookie-reglages{display:inline-block;padding:9px 2px 9px 8px;font-size:1rem}
.bouton.bouton-petit{padding:11px 0;width:8.5em;font-size:.75rem}

@media (max-width:359px){.bouton:not(.bouton-petit){padding-inline:12px;letter-spacing:.16em;text-indent:.16em}}

/* ---------- from 900 px: the page opens up, off-centre ---------- */
@media (min-width:900px){
  body{font-size:1.3125rem;line-height:1.48}
  .enonce{font-size:clamp(1.75rem,2.35vw,2.375rem);line-height:1.22}
  .wm-name{font-size:1.5rem}
  .wm-city{font-size:.6875rem}

  .menu-btn,.menu{display:none}
  .nav-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;padding:0 var(--marge)}
  .nav-side{display:flex;gap:clamp(24px,3vw,48px)}
  .nav-side:last-child{justify-content:flex-end}
  .nav-main .nav-side a{padding:12px 0;text-decoration:none}
  .nav-main .nav-side a:hover,.nav-main .nav-side a[aria-current="page"]{text-decoration:underline 1px;text-underline-offset:.5em}

  .ouverture-image{margin-top:0}
  .ouverture-bande{padding:clamp(14px,2.6vh,26px) var(--marge)}
  .ouverture-date{font-size:clamp(1.75rem,2.35vw,2.375rem)}

  .promesse{min-height:66vh;min-height:66svh;padding:64px var(--marge) 64px 41.666vw}

  .fragments{grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start;gap:0 24px;padding-bottom:18px}
  .fragments .planche:first-child{grid-column:1 / span 6}
  .fragments .planche + .planche{grid-column:8 / span 4;margin:clamp(96px,28vh,300px) 0 0}
  .fragments .cadre,.fragments .planche + .planche .cadre{aspect-ratio:auto;max-height:none}
  .fragments .cadre{height:min(92vh,56vw);height:min(92svh,56vw)}
  .fragments .planche + .planche .cadre{height:min(62vh,38vw);height:min(62svh,38vw)}
  .ecrin{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;margin-top:clamp(40px,8vh,110px)}
  .ecrin .planche{grid-column:1 / span 8}
  .ecrin .cadre{height:min(84vh,50vw);height:min(84svh,50vw)}
  .ecrin-texte{grid-column:9 / span 4;padding:0 var(--marge) 0 0}
  .resume-maison{padding:clamp(56px,12vh,150px) var(--marge) clamp(24px,5vh,56px) 41.666vw}
  .resume-maison .enonce{max-width:18em}

  .maison{display:grid;grid-template-columns:7fr 5fr;min-height:calc(100vh - var(--haut));min-height:calc(100svh - var(--haut))}
  .maison .planche{display:flex;flex-direction:column}
  .maison .cadre{flex:1;height:auto;min-height:420px}
  .maison .legende{padding-bottom:14px}
  .maison-texte{align-self:end;padding:32px var(--marge) calc(44px + clamp(16px,6vh,64px)) clamp(32px,5vw,88px)}
  .fondateur-tete{grid-template-columns:calc(var(--marge) + 5 * (100% - 2 * var(--marge) - 264px) / 12 + 120px) 1fr;min-height:76vh;min-height:76svh}
  .fondateur-tete .planche{order:2}
  .fondateur-tete .maison-texte{padding:32px clamp(32px,5vw,88px) clamp(16px,6vh,64px) var(--marge)}

  .rituel .cadre{height:54vh;height:54svh}
  /* one rule above the whole row, and the two gestures off the same line: text set in columns, never three boxes */
  .rituel-texte{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;margin:clamp(24px,5vh,56px) var(--marge) 0;padding:14px 0 clamp(40px,8vh,96px);border-top:var(--filet)}
  .rituel-tete{grid-column:1 / span 4;margin:0}
  .rituel-tete .intitule{border-top:0;padding-top:0}
  .rituel-texte .geste{grid-column:6 / span 3;margin:clamp(40px,7vh,64px) 0 0}
  .rituel-texte .geste + .geste{grid-column:9 / span 4;margin:clamp(72px,14vh,128px) 0 0}
  .rituel-texte .geste h3{border-top:0;padding-top:0}

  .appel{grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;padding:clamp(40px,8vh,110px) var(--marge)}
  .accueil .appel{min-height:calc(100vh - 220px);min-height:calc(100svh - 220px)}
  .sceau{grid-column:2 / span 3;width:120px;height:120px}
  .appel-texte{grid-column:6 / span 7}
  .appel-lettre{grid-template-rows:1fr auto;row-gap:0;align-items:stretch}
  .appel-lettre .planche{grid-column:1 / span 5;grid-row:1 / span 2}
  .appel-lettre .cadre{height:min(64vh,46vw);height:min(64svh,46vw)}
  .appel-lettre .appel-texte{grid-column:7 / span 6;grid-row:1;align-self:end}
  .appel-lettres{grid-column:7 / span 6;grid-row:2;margin-top:10px}

  .fiche-tete{display:grid;grid-template-columns:7fr 5fr}
  .fiche-tete .cadre{min-height:380px}
  .fiche-tete .legende{padding-bottom:14px}
  .fiche-tete-texte{align-self:end;padding:32px var(--marge) calc(44px + clamp(16px,6vh,64px)) clamp(32px,5vw,88px)}
  .fiche-tete-texte .intitule{display:block}
  .fiche-tete-texte .enonce{margin-bottom:16px}
  .fiche-tete-texte .invitation{margin-top:28px}
  .choix{margin-top:18px}
  .choix + .invitation,.fiche-tete-texte .choix + .invitation{margin-top:18px}

  .matiere{padding:clamp(56px,12vh,140px) var(--marge) clamp(24px,5vh,56px) 41.666vw}
  .matiere-texte{font-size:clamp(1.375rem,1.8vw,1.75rem)}
  .matiere-image{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;padding:clamp(72px,16vh,180px) var(--marge) clamp(24px,5vh,56px)}
  .matiere-image .planche{grid-column:1 / span 5;grid-row:1;margin:0}
  .matiere-image .cadre{height:min(84vh,48vw);height:min(84svh,48vw);aspect-ratio:auto;max-height:none}
  .matiere-image .matiere-texte{grid-column:7 / span 6;grid-row:1}

  .produits{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start;padding-top:clamp(48px,11vh,120px)}
  .produit{grid-column:1 / span 6}
  .produit + .produit{grid-column:8 / span 5;margin-top:clamp(64px,20vh,200px)}
  .produit-seul .produit-texte{border-top:var(--filet);padding-top:20px!important}
  .produit .cadre{height:min(76vh,48vw);height:min(76svh,48vw)}
  .produit-texte{padding:32px 0 clamp(48px,10vh,110px) var(--marge);max-width:calc(30em + var(--marge))}
  .produit + .produit .planche .legende{padding-left:0}
  .produit + .produit .produit-texte{margin-right:var(--marge);padding:32px 0 clamp(48px,10vh,110px) 0}

  .details{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:clamp(40px,8vh,96px) var(--marge)}
  .details > .intitule{grid-column:1 / span 4;align-self:start;margin:0}
  .details-liste,.details-droite{grid-column:6 / span 7}
  .details-chapo{margin-bottom:32px}

  .page{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:clamp(48px,9vh,110px) var(--marge)}
  .page-tete{grid-column:1 / span 4;margin:0}
  .page-corps{grid-column:6 / span 6}
  .page-tete .cadre{aspect-ratio:4 / 5;max-height:62vh;max-height:62svh;width:100%}
  .lignes > div{grid-template-columns:11em 1fr;gap:16px;align-items:baseline}
  .livret .lignes dt{overflow-wrap:anywhere}

  .pied-haut{grid-template-columns:repeat(12,1fr);column-gap:24px;gap:24px;align-items:start}
  .pied-marque{grid-column:1 / span 4}
  .pied-nav{grid-column:6 / span 7;grid-template-columns:repeat(3,1fr);column-gap:24px}
  .legal ul{margin-top:6px}

  .bouton{padding-block:19px}
  .wl-dialog{padding:36px}
}
@media (min-width:1100px){.bouton{padding-inline:40px}}

/* short screens: the home stays within five screens. The images give way, the text keeps its size. */
@media (max-width:899px) and (max-height:680px){
  .promesse{min-height:30vh;min-height:30svh;padding-block:24px}
  .fragments{gap:16px;padding-bottom:24px}
  .fragments .cadre{max-height:44vh;max-height:44svh}
  .fragments .planche + .planche .cadre{max-height:36vh;max-height:36svh}
  .ecrin .cadre{height:34vh;height:34svh}
  .ecrin-texte{padding-block:20px 28px}
  .resume-maison{padding-bottom:32px}
  .appel{gap:18px;padding-block:32px 36px}
  .appel-lettre .cadre{height:20vh;height:20svh}
}
@media (max-width:359px){:root{--retrait:calc(var(--marge) + 4vw)}}
@media (max-width:899px) and (max-height:480px){.ouverture{min-height:420px}}
@media (min-width:900px) and (max-height:660px){.promesse{min-height:54vh;min-height:54svh}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bouton{transition:none}
  html.intro #intro{display:none}
  html.intro .ouverture-media,html.intro .ouverture-date,html.intro body.accueil .top{opacity:1;transform:none;animation:none}
}

/* the mark appears with the name, in the same slow time */
.intro-nom{position:relative}
.intro-nom::after{font-size:.22em;margin-left:.2em;opacity:0;animation:nait 1.1s ease 2.6s forwards}

@media print{
  .top,.menu,.pied,.cookie,.wl-dialog,.no-print,#dx-intro,#dx-stage{display:none!important}
  body{font-size:12pt}
}