:root{
  --toile:#C8C7C1; --papier:#F4F1EA; --encre:#141414; --encre-douce:#2B2B2B;
  --mine:#3A3936;
  --sceau:#FF5B23; --sceau-vif:#FF7A45;
  --alerte:#9A2400;

  --bien:#1A5C33;
  --trait:rgba(20,20,20,.35); --trait-fin:rgba(20,20,20,.14);
  --ombre-papier:0 18px 40px -24px rgba(20,20,20,.45);

  --fenetre:linear-gradient(118deg,rgba(20,20,20,.10) 0 30%,transparent 48%);

  --fond:var(--toile); --surface:var(--papier); --surface2:#EAE6DC; --survol:#E1DCD0;
  --ligne:var(--trait-fin); --ligne2:var(--trait);
  --texte:var(--encre); --lecture:var(--encre-douce); --doux:var(--encre-douce); --pale:var(--mine);
  --accent:var(--sceau); --accent-vif:var(--sceau-vif); --accent-sombre:#D23F0E; --accent-clair:var(--encre);
  --accent-fond:color-mix(in srgb,var(--sceau) 22%,var(--papier));

  --chrome:linear-gradient(176deg,#fff 4%,#c8ccd6 28%,#7f8592 44%,#f2f4f8 56%,#9aa0ad 70%,#e6e9ef 88%);
  --rayon:16px;
  --titre:var(--umm-police); --corps:var(--umm-police);
  --marge:clamp(16px,2.2vw,32px);
}

html[data-charte="blanc"]{
  --toile:#FFFFFF; --papier:#FFFFFF; --surface2:#F3F3F3; --survol:#EBEBEB;
  --trait-fin:rgba(20,20,20,.1); --fenetre:none;
  --ombre-papier:0 0 0 1px rgba(20,20,20,.1), 0 18px 40px -28px rgba(20,20,20,.35);
}
html[data-charte="blanc"] body::before{display:none}

html[data-charte="blanc"] header{background:#FFFFFF;border-bottom:1px solid var(--encre);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-charte="blanc"] .liens a{color:var(--encre-douce)}
html[data-charte="blanc"] .liens a:hover,html[data-charte="blanc"] .liens a.actif{color:var(--encre);background:var(--surface2)}

html[data-charte="blanc"] .chapitres a{background:#FFFFFF;color:var(--encre);border:1px solid var(--encre)}
html[data-charte="blanc"] .chapitres a.actif{background:var(--encre);color:#FFFFFF}
html[data-charte="blanc"] .lecteur__segment i{background:#FFFFFF}
html[data-charte="blanc"] .lecteur__segment{background:rgba(255,255,255,.28)}
html[data-charte="blanc"] .etape .num{background:var(--encre);color:#FFFFFF}
html[data-charte="blanc"] .panneau .pastille,html[data-charte="blanc"] .badge{border-color:var(--encre)}

html[data-charte="blanc"] .scene--toile .scene__cadre{background:#FFFFFF}
html[data-charte="blanc"] .scene--toile:not(.scene--porte) .scene__cadre::before{display:none}
html[data-charte="blanc"] .porte__affiche{display:none}
html[data-charte="blanc"] .porte__titre{display:none}
html[data-charte="blanc"] .porte__vingtneuf{display:block}

html[data-charte="blanc"] :is(.porte__accroche:not(.porte__accroche--blanc),.porte__dit,.porte__preuves,.porte__question,.porte__formulaire,.porte__liens){display:none}
html[data-charte="blanc"] .porte__webs,html[data-charte="blanc"] .porte__accroche--blanc{display:block}
html[data-charte="blanc"] .porte__actions{display:flex}

html[data-charte="blanc"] .porte{gap:10px;transform:translateY(-9vh);width:min(1120px,100%)}
html[data-charte="blanc"] .porte__webs{margin-bottom:26px}

html[data-charte="blanc"] :is(.btn--sceau,.bouton--sceau,.btn--encre,.bouton--encre){background:var(--encre);color:#FFFFFF;border-color:var(--encre)}
html[data-charte="blanc"] :is(.btn--sceau,.bouton--sceau,.btn--encre,.bouton--encre):hover{background:#2B2B2B}
html[data-charte="blanc"] :is(.btn--sceau,.bouton--sceau) .encre-survol{background:#FFFFFF}
html[data-charte="blanc"] :is(.btn--sceau,.bouton--sceau).encre{color:var(--encre)}
html[data-charte="blanc"] .btn--pinceau{background-color:transparent !important;border:0 !important;background-size:100% 100% !important;background-repeat:no-repeat;padding-left:26px;padding-right:26px}
html[data-charte="blanc"] .btn--pinceau .encre-survol{display:none}
html[data-charte="blanc"] .btn--pinceau.encre{color:#FFFFFF}

html[data-charte="blanc"] .envoyer{background-color:var(--encre);color:#FFFFFF}
html[data-charte="blanc"] .onglets{background:#FFFFFF;border-color:var(--encre)}
html[data-charte="blanc"] .google{border-color:var(--encre)}
html[data-charte="blanc"] .porte__preuves li,html[data-charte="blanc"] .porte__suggestion{background:#FFFFFF;border-color:rgba(20,20,20,.22)}
html[data-charte="blanc"] .porte__champ{border-color:rgba(20,20,20,.22)}
html[data-charte="blanc"] .devis{box-shadow:0 0 0 1px rgba(20,20,20,.12),0 24px 60px -30px rgba(0,0,0,.35)}

.barre__traits{position:absolute;left:0;top:0;width:100%;height:14px;pointer-events:none;display:none}
html[data-charte="blanc"] .barre__traits{display:block}

html[data-charte="noir"]{
  --toile:#000000; --papier:#000000; --encre:#FFFFFF; --encre-douce:#D6D6D6;
  --mine:#BDBDBD;
  --surface2:#141414; --survol:#1F1F1F;
  --alerte:#FF8A6A;
  --bien:#7FD79A;
  --trait:rgba(255,255,255,.35); --trait-fin:rgba(255,255,255,.12); --fenetre:none;
  --ombre-papier:0 0 0 1px rgba(255,255,255,.12), 0 18px 40px -28px rgba(0,0,0,.9);
  color-scheme:dark;
}
html[data-charte="noir"] body::before{display:none}

html[data-charte="noir"] .logo__mot img{filter:invert(1)}

html[data-charte="noir"] :is(.btn--sceau,.bouton--sceau,.btn--encre,.bouton--encre){background:var(--encre);color:var(--toile);border-color:var(--encre)}
html[data-charte="noir"] :is(.btn--sceau,.bouton--sceau,.btn--encre,.bouton--encre):hover{background:var(--encre-douce)}
html[data-charte="noir"] .btn--pinceau{background-color:transparent !important;border:0 !important;background-size:100% 100% !important;background-repeat:no-repeat;padding-left:26px;padding-right:26px}
html[data-charte="noir"] .btn--pinceau .encre-survol{display:none}
html[data-charte="noir"] .btn--pinceau,html[data-charte="noir"] .btn--pinceau.encre{color:var(--toile)}
html[data-charte="noir"] .btn--pinceau[disabled]{opacity:.4}
html[data-charte="noir"] .barre__traits{display:block}
html[data-charte="noir"] ::placeholder{color:#8A8A8A}

.recit{
  --fond:#0C0C0E; --surface:#151518; --surface2:#1C1C20; --survol:#25252A;
  --ligne:rgba(255,255,255,.06); --ligne2:rgba(255,255,255,.12);
  --texte:#F7F7F8; --doux:#A8A8A8; --pale:#898A8B; --accent-clair:#FFB396;
  --accent-fond:color-mix(in srgb,var(--sceau) 15%,transparent);
  color:var(--texte);
}

:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .08 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E")}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:var(--grain)}

.section--fenetre{position:relative;isolation:isolate}
.section--fenetre::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:-64px calc(-1 * var(--marge)) -32px;
  background:var(--fenetre);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 160px,#000 calc(100% - 160px),transparent);
          mask-image:linear-gradient(180deg,transparent,#000 160px,#000 calc(100% - 160px),transparent)}

:is(.btn,.bouton){position:relative;isolation:isolate;overflow:hidden}
:is(.btn--sceau,.bouton--sceau){background:var(--sceau);color:var(--encre);border:1.5px solid var(--encre)}
:is(.btn--sceau,.bouton--sceau):hover{background:var(--sceau-vif)}
:is(.btn--encre,.bouton--encre){background:var(--encre);color:var(--papier);border:1.5px solid var(--encre)}
:is(.btn--trait,.bouton--trait){background:transparent;color:var(--encre);border:1.5px solid var(--trait)}
:is(.btn--trait,.bouton--trait):hover{border-color:var(--encre)}
:is(.btn,.bouton):focus-visible{outline:2px solid var(--encre);outline-offset:3px}

.encre-survol{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--encre);transform:scale(0);z-index:-1;pointer-events:none}
:is(.btn--encre,.bouton--encre) .encre-survol{background:var(--papier)}
:is(.btn,.bouton).encre{color:var(--papier)}
:is(.btn--encre,.bouton--encre).encre{color:var(--encre)}

.badge{color:var(--encre);background:transparent;border:1px solid var(--trait)}

:is(input,textarea,select):where(:not([type=checkbox]):not([type=radio]):not([type=range])){
  background:var(--papier);color:var(--encre);border:1px solid var(--trait)}
::placeholder{color:#5C5B57}

:is(.etape,.tuile,.pack,.carte-prix,.exemple,.livree,.carte):not(.monte):not(.recit *){
  --pente:1deg;transform:rotate(var(--pente));
  &:nth-of-type(4n+1){--pente:-1.2deg}
  &:nth-of-type(4n+2){--pente:.8deg}
  &:nth-of-type(4n+3){--pente:-.6deg}
}

:is(.liens a,.entete__liens a){position:relative}
:is(.liens a.actif,.entete__liens a[aria-current]){color:var(--encre);font-weight:700;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

:is(.liens a.actif,.entete__liens a[aria-current]):has(> .souligne){text-decoration:none}
.souligne{position:absolute;left:6px;bottom:0;width:calc(100% - 12px);height:8px;overflow:visible;pointer-events:none}

.souligne path{fill:none;stroke:var(--encre);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:1 2;stroke-dashoffset:1.02;transition:stroke-dashoffset .45s cubic-bezier(.3,.7,.2,1)}
:is(.liens a,.entete__liens a):is(:hover,:focus-visible,.actif,[aria-current]) .souligne path{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  .souligne path{transition:none}
}

:where(.peint,.pinceau-hote){position:relative}
:root .peint{color:transparent}
.peint img{opacity:0}
.pinceau{position:absolute;pointer-events:none;mix-blend-mode:multiply}
@media (forced-colors:active){
  .pinceau{display:none}
  :root .peint{color:CanvasText}
  .peint img{opacity:1}
}

@media (forced-colors:active) and (prefers-color-scheme:dark){
  .logo__mot img{filter:invert(1)}
}

.travelling .etapes{display:flex;gap:clamp(48px,6vw,110px);padding:48px clamp(24px,6vw,120px);
  isolation:isolate;position:relative}
.travelling .etape{width:min(460px,38vw);flex:none;position:relative}
.travelling__trait{position:absolute;left:0;top:0;pointer-events:none;z-index:-2}
.encre-diffuse{position:absolute;z-index:-1;pointer-events:none}

.galerie-3d :is(#mosaique,.points,.legende-tourbillon){display:none}
.galerie{position:relative;height:calc(100vh - 220px);min-height:300px;border-radius:var(--rayon);overflow:hidden;
  background:var(--toile);box-shadow:inset 0 0 0 1px var(--trait-fin)}
.galerie__toile{display:block;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.galerie.prete .galerie__toile{opacity:1}
.galerie__legende{position:absolute;left:0;top:0;margin:0;padding:7px 12px 8px;border-radius:2px;
  background:var(--papier);color:var(--encre);font:var(--umm-texte-poids) 13px/1.35 var(--corps);
  box-shadow:0 6px 14px -8px rgba(20,20,20,.5);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.galerie.prete .galerie__legende{opacity:1}
.galerie__legende b{display:block;font-size:11px;font-weight:var(--umm-etiquette-poids);text-transform:uppercase;
  letter-spacing:var(--umm-etiquette-interlettrage)}

.galerie__choix{list-style:none;margin:0;padding:0}
.galerie__choix button{position:absolute;left:16px;bottom:16px;width:1px;height:1px;margin:0;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.galerie__choix button:focus{width:auto;height:auto;padding:8px 14px;overflow:visible;clip-path:none;cursor:pointer;
  border-radius:2px;background:var(--papier);color:var(--encre);font:var(--umm-texte-poids) 14px/1.3 var(--corps);
  box-shadow:0 6px 14px -8px rgba(20,20,20,.5);outline:2px solid var(--encre);outline-offset:3px}

.curseur-encre{position:fixed;inset:0;width:100vw;height:100vh;z-index:40;pointer-events:none;mix-blend-mode:multiply}

.curseur-encre.curseur-encre--blanc{mix-blend-mode:screen}
.curseur-encre.vide{visibility:hidden}

.passage{position:fixed;inset:0;width:100vw;height:100vh;z-index:45;pointer-events:none;overflow:visible}

section[tabindex="-1"]:focus{outline:none}