/* ==================================================================
   Atelier — styles publics (v1.4)
   ================================================================== */

:root{
	--atok-fond:#FAF8F5; --atok-fond-secondaire:#E8DED3; --atok-ton-moyen:#B8A08C;
	--atok-accent:#8C5A4A; --atok-texte:#3D3835;
	--atok-expo-fond:#0E0D0C; --atok-expo-texte:#F2ECE6; --atok-or:#E8DED3;
}

/* ==================================================================
   1. Écran d'entrée AVANT le code
   (titre, extrait du poème, description, note d'intention,
   avertissement, puis le champ de code)
   ================================================================== */
.atok-porte-expo{
	position:relative; isolation:isolate; width:100%; max-width:1080px; margin:2rem auto; overflow:hidden;
	border-radius:22px; color:var(--atok-expo-texte); text-align:center;
	background:radial-gradient(900px 480px at 50% -10%, #3a2a24, #0E0D0C 72%);
	box-shadow:0 30px 80px rgba(0,0,0,.35); box-sizing:border-box;
}
.atok-porte-expo *{ box-sizing:border-box; }
.atok-porte-fond{ position:absolute; inset:0; z-index:-1; }
.atok-porte-fond img{ width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; display:block !important; margin:0 !important; }
.atok-porte-fond:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,13,12,.5), rgba(14,13,12,.9)); }
.atok-porte-carte{ display:flex; flex-direction:column; align-items:center; gap:1.3rem; padding:clamp(1.6rem, 5vw, 4rem); }

.atok-surtitre{ margin:0; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(242,236,230,.65); }
.atok-porte-titre, .atok-entree-titre, .atok-cloture-titre{
	margin:0; font-family:Georgia,'Times New Roman',serif; font-weight:400; line-height:1.15; color:var(--atok-expo-texte);
	font-size:clamp(1.9rem, 5.5vw, 3.4rem); letter-spacing:.005em;
}
.atok-porte-extrait{
	position:relative; margin:.2rem 0; padding:1.6rem 1rem 0; max-width:36ch; border:0;
	font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:clamp(1.05rem, 2.2vw, 1.4rem); line-height:1.7; color:rgba(242,236,230,.92);
}
.atok-porte-extrait:before{ content:"“"; position:absolute; top:-.5rem; left:50%; transform:translateX(-50%); font-size:4rem; line-height:1; color:var(--atok-or); opacity:.8; font-style:normal; }

.atok-porte-sections{ display:grid; gap:1rem; width:100%; text-align:left; margin-top:.4rem; }
@media (min-width:820px){ .atok-porte-sections.deux-colonnes{ grid-template-columns:1fr 1fr; } }
.atok-porte-section{ padding:1.3rem 1.4rem; border-radius:16px; background:rgba(255,255,255,.055); border:1px solid rgba(242,236,230,.1); }
.atok-porte-section h3{ margin:0 0 .6rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--atok-or); }
.atok-porte-section p{ margin:0 0 .8em; font-size:.98rem; line-height:1.75; color:rgba(242,236,230,.9); }
.atok-porte-section p:last-child{ margin-bottom:0; }

.atok-avertissement{ width:100%; max-width:760px; text-align:left; padding:1rem 1.2rem; border-radius:14px; border:1px solid rgba(232,222,211,.4); background:rgba(232,222,211,.08); }
.atok-avertissement-titre{ display:block; margin-bottom:.35rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--atok-or); }
.atok-avertissement p{ margin:0; font-size:.92rem; line-height:1.65; color:rgba(242,236,230,.9); }

#atok-form-code{ width:100%; max-width:480px; margin-top:.6rem; }
#atok-form-code label{ display:block; margin-bottom:.55rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(242,236,230,.7); }
.atok-code-ligne{ display:flex; gap:.6rem; }
#atok-form-code input[type="text"]{
	flex:1; min-width:0; width:auto; margin:0; padding:.9rem 1rem; font-size:1.05rem; letter-spacing:.12em; text-align:center;
	color:var(--atok-expo-texte) !important; background:rgba(255,255,255,.08) !important; border:1px solid rgba(242,236,230,.3) !important; border-radius:12px; box-shadow:none !important;
}
#atok-form-code input[type="text"]::placeholder{ color:rgba(242,236,230,.4); letter-spacing:.04em; }
#atok-form-code input[type="text"]:focus{ border-color:var(--atok-or) !important; outline:2px solid rgba(232,222,211,.45) !important; outline-offset:2px; }
#atok-form-code button{
	padding:.9rem 1.7rem; border:0 !important; border-radius:12px; cursor:pointer; font-size:.95rem; font-weight:600; letter-spacing:.03em; box-shadow:none !important;
	background:var(--atok-expo-texte) !important; color:var(--atok-expo-fond) !important; transition:transform .15s ease, box-shadow .15s ease;
}
#atok-form-code button:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(242,236,230,.2) !important; }
#atok-form-code button:focus-visible{ outline:2px solid var(--atok-or) !important; outline-offset:3px; }
.atok-message-erreur{ color:#FF9E97; min-height:1.3em; margin:.7rem 0 0; font-size:.9rem; }
.atok-pas-de-code{ margin:0; font-size:.85rem; color:rgba(242,236,230,.7); }
.atok-pas-de-code a{ color:var(--atok-or); }
.atok-porte-expo input:-webkit-autofill{
	-webkit-text-fill-color:var(--atok-expo-texte) !important; -webkit-box-shadow:0 0 0 1000px #2a211d inset !important; box-shadow:0 0 0 1000px #2a211d inset !important;
}
@media (max-width:520px){
	.atok-code-ligne{ flex-direction:column; }
	.atok-porte-expo{ border-radius:16px; margin:1rem auto; }
}

/* ==================================================================
   2. Le parcours (immersif)
   ================================================================== */
.atok-parcours{
	position:relative; width:100%; min-height:max(560px, 88vh); min-height:max(560px, 88dvh);
	background:var(--atok-expo-fond); color:var(--atok-expo-texte); overflow:hidden; box-sizing:border-box;
	-webkit-text-size-adjust:100%;
}
.atok-parcours *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.atok-parcours [hidden]{ display:none !important; }
.atok-parcours-vide{ display:flex; align-items:center; justify-content:center; padding:2rem; text-align:center; min-height:40vh; }

/* Une fois « Entrer » cliqué : le parcours recouvre toute la page, comme une vraie salle. */
.atok-parcours.atok-immersif{
	position:fixed; inset:0; z-index:2147483000; width:100vw; height:100vh; height:100dvh; min-height:0; max-width:none; margin:0;
	background:#000; overscroll-behavior:contain;
}
html.atok-verrou, html.atok-verrou body{ overflow:hidden !important; }
.atok-parcours:fullscreen{ width:100%; height:100%; }
.atok-parcours:-webkit-full-screen{ width:100%; height:100%; }

/* États : seuil → visite → clôture */
.atok-etat-seuil .atok-tableau, .atok-etat-seuil .atok-nav-parcours, .atok-etat-seuil .atok-quitter, .atok-etat-seuil .atok-hud-droite,
.atok-etat-seuil .atok-progression, .atok-etat-seuil .atok-cloture, .atok-etat-seuil .atok-vignettage{ display:none !important; }
.atok-etat-visite .atok-entree, .atok-etat-visite .atok-cloture,
.atok-etat-cloture .atok-entree, .atok-etat-cloture .atok-tableau, .atok-etat-cloture .atok-nav-parcours, .atok-etat-cloture .atok-progression, .atok-etat-cloture .atok-vignettage{ display:none !important; }

/* --- Le seuil (écran d'accueil du parcours) --- */
.atok-entree{
	position:relative; isolation:isolate; min-height:inherit; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
	padding:clamp(1.5rem, 5vw, 4rem); background:radial-gradient(900px 520px at 50% -10%, #3a2a24, #0E0D0C 72%);
}
.atok-entree-fond{ position:absolute; inset:0; z-index:-1; }
.atok-entree-fond img{ width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; display:block !important; margin:0 !important; }
.atok-entree-fond:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,13,12,.5), rgba(14,13,12,.9)); }
.atok-entree-contenu{ max-width:720px; display:flex; flex-direction:column; align-items:center; gap:1.1rem; animation:atokMonte 1.1s cubic-bezier(.2,.8,.2,1) both; }
.atok-entree-logo{ width:60px !important; height:auto !important; opacity:.9; margin:0 0 .2rem !important; }
.atok-conseils{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.55rem; font-size:.9rem; color:rgba(242,236,230,.78); text-align:left; }
.atok-conseils li{ display:flex; align-items:center; gap:.65rem; margin:0; }
.atok-conseils svg{ flex:0 0 18px; width:18px; height:18px; fill:var(--atok-or); }
.atok-entree-actions{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-top:.9rem; }
.atok-entree-actions button{
	-webkit-appearance:none; appearance:none; cursor:pointer; border-radius:999px; font-size:1rem; letter-spacing:.03em; box-shadow:none !important;
	transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.atok-entrer{ padding:1rem 2.4rem; border:0 !important; background:var(--atok-expo-texte) !important; color:var(--atok-expo-fond) !important; font-weight:700; }
.atok-entrer:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(242,236,230,.25) !important; }
.atok-entrer-pleinecran{ padding:1rem 1.8rem; background:transparent !important; color:var(--atok-expo-texte) !important; border:1px solid rgba(242,236,230,.45) !important; }
.atok-entrer-pleinecran:hover{ background:rgba(242,236,230,.1) !important; }
.atok-entree-actions button:focus-visible{ outline:2px solid var(--atok-or) !important; outline-offset:3px; }
@keyframes atokMonte{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* --- Passage par le noir : entrée dans la salle, « couloir » entre deux tableaux --- */
.atok-seuil-noir{
	position:absolute; inset:0; z-index:50; background:#000; opacity:0; pointer-events:none;
	display:flex; align-items:center; justify-content:center;
}
.atok-seuil-logo{ width:min(120px, 24vw) !important; height:auto !important; opacity:0; transition:opacity 1s ease; pointer-events:none; margin:0 !important; }
.atok-seuil-noir.avec-logo .atok-seuil-logo{ opacity:.95; }
/* Léger assombrissement des coins : l'effet d'une salle éclairée au centre. */
.atok-vignettage{ position:absolute; inset:0; z-index:40; pointer-events:none; background:radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.32) 100%); }

/* --- Les tableaux --- */
.atok-tableau{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; background:#000; }
.atok-tableau-image{ position:absolute; inset:0; margin:0 !important; padding:0 !important; overflow:hidden; background:#000; animation:atokRespire 18s ease-out both; transform-origin:50% 50%; }
/* Netteté : la photo est affichée à sa taille d'origine (srcset), jamais étirée ni recadrée en la
   dégradant. Le zoom lent est volontairement très faible pour ne pas rééchantillonner l'image. */
.atok-tableau-image img, .atok-tableau-image .atok-photo{
	position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important;
	object-fit:cover !important; object-position:50% 36% !important; display:block !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
	image-rendering:auto; user-select:none; -webkit-user-drag:none; backface-visibility:hidden;
	transform:translate3d(var(--atok-px,0px), var(--atok-py,0px), 0) scale(1.02); transition:transform .4s ease-out;
}
@keyframes atokRespire{ from{ transform:scale(1); } to{ transform:scale(1.03); } }

/* Voile derrière le texte pour qu'il reste lisible sur n'importe quelle photo. */
.atok-tableau:before{
	content:""; position:absolute; inset:auto 0 0 0; height:42vh; z-index:2; pointer-events:none;
	background:linear-gradient(to top, rgba(14,13,12,.8), rgba(14,13,12,.32) 55%, transparent);
}
.atok-tableau-texte{
	position:relative; z-index:3; width:100%; max-width:min(54ch, 94vw); margin:0 auto; padding:0 1.25rem clamp(5rem, 12vh, 7.5rem);
	text-align:center; opacity:0;
}
.atok-texte-defile{
	max-height:40vh; max-height:40dvh; overflow-y:auto; padding:0 .5rem; scrollbar-width:thin; scrollbar-color:rgba(242,236,230,.3) transparent; -webkit-overflow-scrolling:touch;
	font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.02rem, .55rem + 1.35vw, 1.32rem); line-height:1.85; color:var(--atok-expo-texte);
	text-shadow:0 1px 14px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.6);
}
.atok-texte-defile p{ margin:0 0 1em; }
.atok-texte-defile p:last-child{ margin-bottom:0; }
.atok-tableau.atok-actif .atok-tableau-texte{ animation:atokApparition 1.2s ease .6s forwards; }
@keyframes atokApparition{ to{ opacity:1; } }

/* Vidéo (dernière étape) : plein écran, nette, lancée automatiquement. */
.atok-tableau-video{ position:absolute; inset:0; margin:0; background:#000; }
.atok-tableau-video video{ width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; display:block !important; background:#000; }
.atok-tableau.atok-etape-video:before{ display:none; }
@media (orientation:portrait){ .atok-tableau-video video{ object-fit:contain !important; } }

/* --- Transitions « on avance dans l'exposition » ---
   Sortie : on s'approche du tableau (léger zoom) pendant que la salle s'assombrit.
   Entrée : on pénètre dans la salle suivante, qui s'éclaire peu à peu. */
.atok-t-sortie-avant{ animation:atokSortieAvant .85s cubic-bezier(.5,0,.9,.5) forwards; }
.atok-t-sortie-arriere{ animation:atokSortieArriere .85s cubic-bezier(.5,0,.9,.5) forwards; }
.atok-t-entree-avant{ animation:atokEntreeAvant 1.7s cubic-bezier(.16,.8,.3,1) both; }
.atok-t-entree-arriere{ animation:atokEntreeArriere 1.7s cubic-bezier(.16,.8,.3,1) both; }
@keyframes atokSortieAvant{ 0%{ transform:scale(1); opacity:1; } 85%{ opacity:1; } 100%{ transform:scale(1.15); opacity:0; } }
@keyframes atokSortieArriere{ 0%{ transform:scale(1); opacity:1; } 85%{ opacity:1; } 100%{ transform:scale(.93); opacity:0; } }
@keyframes atokEntreeAvant{ 0%{ transform:scale(1.11); opacity:0; } 22%{ opacity:1; } 100%{ transform:scale(1); opacity:1; } }
@keyframes atokEntreeArriere{ 0%{ transform:scale(.92); opacity:0; } 22%{ opacity:1; } 100%{ transform:scale(1); opacity:1; } }
.atok-t-sortie-avant .atok-tableau-texte, .atok-t-sortie-arriere .atok-tableau-texte{ animation:none; opacity:0; transition:opacity .3s ease; }

/* Halo de lumière qui suit le curseur (éclairage de salle), tactile exclu. */
.atok-halo{
	position:absolute; top:0; left:0; width:200px; height:200px; border-radius:50%; pointer-events:none; z-index:5; will-change:transform; mix-blend-mode:soft-light;
	background:radial-gradient(circle, rgba(242,236,230,.16), rgba(242,236,230,.05) 40%, transparent 65%);
}

/* --- Commandes pendant la visite --- */
.atok-quitter, .atok-hud-droite button, .atok-nav-parcours button{
	-webkit-appearance:none; appearance:none; cursor:pointer; display:grid; place-items:center; padding:0; line-height:1;
	width:44px; height:44px; border-radius:50%; color:var(--atok-expo-texte) !important;
	background:rgba(14,13,12,.55) !important; border:1px solid rgba(242,236,230,.35) !important; box-shadow:none !important;
	transition:background .15s ease, transform .15s ease, opacity .2s ease;
}
.atok-quitter:hover, .atok-hud-droite button:hover, .atok-nav-parcours button:hover{ background:rgba(14,13,12,.9) !important; transform:scale(1.06); }
.atok-quitter{ position:absolute; z-index:60; top:max(1rem, env(safe-area-inset-top)); left:max(1rem, env(safe-area-inset-left)); font-size:1.05rem; opacity:.7; }
.atok-quitter:hover{ opacity:1; }
.atok-hud-droite{ position:absolute; z-index:60; top:max(1rem, env(safe-area-inset-top)); right:max(1rem, env(safe-area-inset-right)); display:flex; gap:.6rem; transition:opacity .5s ease; }
.atok-hud-droite svg{ width:20px; height:20px; fill:currentColor; pointer-events:none; }
.atok-ico-muet, .atok-ico-reduire{ display:none; }
.atok-parcours.est-muet .atok-ico-son{ display:none; }
.atok-parcours.est-muet .atok-ico-muet{ display:block; }
.atok-parcours.atok-plein-ecran .atok-ico-agrandir{ display:none; }
.atok-parcours.atok-plein-ecran .atok-ico-reduire{ display:block; }
.atok-parcours.sans-plein-ecran .atok-bouton-pleinecran{ display:none; }
.atok-progression{ position:absolute; z-index:30; top:0; left:0; right:0; height:3px; background:rgba(242,236,230,.14); }
.atok-progression span{ display:block; height:100%; width:0; background:var(--atok-expo-texte); transition:width .9s cubic-bezier(.2,.8,.2,1); }

.atok-nav-parcours{
	position:absolute; z-index:60; left:50%; bottom:max(1.25rem, calc(env(safe-area-inset-bottom) + .75rem)); transform:translateX(-50%);
	display:flex; align-items:center; gap:1.25rem; transition:opacity .5s ease;
}
.atok-position{ min-width:3.6em; text-align:center; font-size:.82rem; letter-spacing:.1em; color:rgba(242,236,230,.85); text-shadow:0 1px 8px rgba(0,0,0,.8); font-variant-numeric:tabular-nums; }
.atok-nav-parcours button[disabled]{ opacity:.3; cursor:default; transform:none; }
.atok-nav-parcours .atok-suivant.est-final{ width:auto; padding:0 1.3rem; border-radius:999px; font-size:.9rem; font-weight:600; letter-spacing:.04em; background:var(--atok-expo-texte) !important; color:var(--atok-expo-fond) !important; }
.atok-nav-parcours .atok-suivant.pulse{ animation:atokPoulsNav 1.6s ease-out infinite; box-shadow:none; }
@keyframes atokPoulsNav{ 0%{ box-shadow:0 0 0 0 rgba(242,236,230,.5); } 100%{ box-shadow:0 0 0 16px rgba(242,236,230,0); } }
/* Sur une étape vidéo, la barre native occupe le bas : on remonte la navigation. */
.atok-sur-video .atok-nav-parcours{ bottom:auto; top:max(1rem, env(safe-area-inset-top)); }
.atok-sur-video .atok-quitter{ display:none; }
.atok-sur-video .atok-hud-droite{ right:auto; left:max(1rem, env(safe-area-inset-left)); }

/* Sur ordinateur, les commandes se font discrètes quand la souris ne bouge pas. */
@media (hover:hover) and (pointer:fine){
	.atok-parcours.atok-ui-cachee .atok-nav-parcours, .atok-parcours.atok-ui-cachee .atok-hud-droite{ opacity:0; pointer-events:none; }
	.atok-parcours.atok-ui-cachee{ cursor:none; }
}

/* Contour de focus clavier : jamais le bleu par défaut, toujours la palette du parcours. */
.atok-parcours button:focus-visible, .atok-parcours a:focus-visible, .atok-parcours input:focus-visible, .atok-parcours textarea:focus-visible{
	outline:2px solid var(--atok-or) !important; outline-offset:2px; box-shadow:none !important;
}

/* ==================================================================
   3. Fin de visite : avis, puis invitation à soutenir le projet
   ================================================================== */
.atok-cloture{
	position:absolute; inset:0; z-index:35; display:flex; overflow-y:auto; -webkit-overflow-scrolling:touch;
	background:radial-gradient(900px 520px at 50% -10%, #3a2a24, #0E0D0C 72%); animation:atokApparitionTotale 1.2s ease both;
}
@keyframes atokApparitionTotale{ from{ opacity:0; } to{ opacity:1; } }
.atok-cloture-interieur{
	margin:auto; width:100%; max-width:580px; padding:clamp(4.5rem, 10vh, 6.5rem) 1.25rem 3rem;
	display:flex; flex-direction:column; align-items:center; gap:1.15rem; text-align:center;
}
.atok-cloture-titre{ font-size:clamp(1.7rem, 4.6vw, 2.5rem); }
.atok-cloture-texte{ margin:0; max-width:42ch; font-family:Georgia,'Times New Roman',serif; font-size:1.1rem; line-height:1.7; color:rgba(242,236,230,.88); }
.atok-cloture form{ width:100%; display:flex; flex-direction:column; gap:1rem; margin-top:.5rem; padding:1.4rem; border-radius:18px; background:rgba(255,255,255,.055); border:1px solid rgba(242,236,230,.1); }
.atok-cloture .atok-champ{ text-align:left; margin:0; }
.atok-cloture .atok-champ label{ display:block; margin-bottom:.4rem; font-size:.78rem; letter-spacing:.05em; color:rgba(242,236,230,.7); }
.atok-cloture input[type="text"], .atok-cloture textarea{
	width:100%; padding:.8rem .9rem; font-family:inherit; font-size:1rem; border-radius:12px; color:var(--atok-expo-texte) !important;
	background:rgba(255,255,255,.07) !important; border:1px solid rgba(242,236,230,.28) !important; box-shadow:none !important; caret-color:var(--atok-expo-texte);
}
.atok-cloture textarea{ resize:vertical; min-height:110px; }
.atok-cloture input[type="text"]:focus, .atok-cloture textarea:focus{ border-color:var(--atok-or) !important; outline:2px solid rgba(232,222,211,.4) !important; outline-offset:2px; }
.atok-cloture input:-webkit-autofill, .atok-cloture textarea:-webkit-autofill{
	-webkit-text-fill-color:var(--atok-expo-texte) !important; -webkit-box-shadow:0 0 0 1000px #2a211d inset !important; box-shadow:0 0 0 1000px #2a211d inset !important; transition:background-color 5000s ease-in-out 0s;
}
.atok-cloture form button[type="submit"]{
	align-self:center; padding:.9rem 2rem; border:0 !important; border-radius:999px; cursor:pointer; font-size:.98rem; font-weight:700; letter-spacing:.02em;
	background:var(--atok-expo-texte) !important; color:var(--atok-expo-fond) !important; box-shadow:none !important; transition:transform .15s ease, box-shadow .15s ease;
}
.atok-cloture form button[type="submit"]:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(242,236,230,.22) !important; }
.atok-cloture form button[type="submit"][disabled]{ opacity:.6; cursor:default; transform:none; box-shadow:none !important; }
.atok-message-confirmation{ min-height:1.3em; margin:0; font-size:.92rem; color:var(--atok-or); }
.atok-message-confirmation.erreur{ color:#FF9E97; }

/* Étoiles (de droite à gauche dans le code, pour que le survol colore les précédentes). */
.atok-etoiles{ border:0; margin:0; padding:0; text-align:center; min-width:0; }
.atok-etoiles legend{ margin:0 auto .3rem; padding:0; font-size:.8rem; letter-spacing:.05em; color:rgba(242,236,230,.7); }
.atok-etoiles legend span{ opacity:.7; }
.atok-etoiles-rang{ display:inline-flex; flex-direction:row-reverse; gap:.1rem; }
.atok-etoiles-rang input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.atok-etoiles-rang label{ margin:0; padding:0 .12rem; font-size:2.3rem; line-height:1.1; color:rgba(242,236,230,.25); cursor:pointer; transition:color .15s ease, transform .15s ease; }
.atok-etoiles-rang label:hover, .atok-etoiles-rang label:hover ~ label, .atok-etoiles-rang input:checked ~ label{ color:var(--atok-or); }
.atok-etoiles-rang label:hover{ transform:scale(1.18); }
.atok-etoiles-rang input:focus-visible + label{ outline:2px solid var(--atok-or); outline-offset:2px; border-radius:6px; }

/* Invitation à soutenir le projet. */
.atok-soutien{ width:100%; padding:1.25rem 1.3rem; border-radius:18px; border:1px solid rgba(232,222,211,.38); background:rgba(232,222,211,.07); }
.atok-soutien-question{ margin:0; font-family:Georgia,'Times New Roman',serif; font-size:1.05rem; line-height:1.6; color:var(--atok-expo-texte); }
.atok-bouton-soutien{
	display:inline-block; margin-top:.9rem; padding:.9rem 1.7rem; border-radius:999px; text-decoration:none !important; font-weight:700; font-size:.98rem;
	background:var(--atok-or); color:#1a1410 !important; transition:transform .15s ease, box-shadow .15s ease;
}
.atok-bouton-soutien:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(232,222,211,.35); }
.atok-soutien.est-mis-en-avant{ animation:atokMiseEnAvant 1.5s ease 2; }
@keyframes atokMiseEnAvant{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,222,211,0); } 50%{ box-shadow:0 0 0 10px rgba(232,222,211,.22); } }
.atok-retour-site{ color:rgba(242,236,230,.65); text-decoration:none; font-size:.88rem; }
.atok-retour-site:hover{ color:var(--atok-expo-texte); }
.atok-signature{ margin:.2rem 0 0; font-size:.74rem; letter-spacing:.06em; color:rgba(242,236,230,.5); }
.atok-signature a{ color:rgba(242,236,230,.8); text-decoration:underline; text-underline-offset:3px; }

/* ==================================================================
   4. Adaptation à tous les appareils
   ================================================================== */
@media (max-width:640px){
	.atok-quitter, .atok-hud-droite button, .atok-nav-parcours button{ width:46px; height:46px; }
	.atok-nav-parcours{ gap:1rem; }
	.atok-tableau-texte{ padding-bottom:clamp(5.5rem, 14vh, 7rem); }
	.atok-texte-defile{ font-size:1.02rem; line-height:1.75; max-height:38dvh; }
	.atok-entree-actions{ flex-direction:column; width:100%; }
	.atok-entree-actions button{ width:100%; }
	.atok-cloture form{ padding:1.1rem; }
	.atok-etoiles-rang label{ font-size:2.6rem; }
}
/* Téléphone tenu en largeur : on garde la place pour l'image. */
@media (max-height:520px) and (orientation:landscape){
	.atok-conseils{ display:none; }
	.atok-tableau-texte{ padding-bottom:3.8rem; }
	.atok-texte-defile{ max-height:34vh; font-size:.95rem; line-height:1.6; }
	.atok-tableau:before{ height:55vh; }
	.atok-nav-parcours{ bottom:.6rem; }
	.atok-entree{ padding:1rem; }
	.atok-entree-contenu{ gap:.6rem; }
	.atok-entree-titre{ font-size:1.6rem; }
	.atok-cloture-interieur{ padding-top:3.5rem; }
}
/* Très grands écrans : texte un peu plus généreux. */
@media (min-width:1600px){ .atok-texte-defile{ font-size:1.45rem; } }

/* Mouvement réduit : aucune animation de zoom, simple fondu. */
@media (prefers-reduced-motion:reduce){
	.atok-tableau-image, .atok-t-sortie-avant, .atok-t-sortie-arriere, .atok-t-entree-avant, .atok-t-entree-arriere{ animation:none !important; }
	.atok-tableau-image img{ transition:none; transform:none !important; }
	.atok-tableau.atok-actif .atok-tableau-texte{ animation:none; opacity:1; }
	.atok-halo{ display:none !important; }
	.atok-entree-contenu, .atok-cloture{ animation:none; }
	.atok-nav-parcours .atok-suivant.pulse{ animation:none; }
}

/* ---------- Demande d'accès ---------- */
.atok-demande-acces{ max-width:460px; margin:2.5rem auto; padding:2rem; background:var(--atok-fond-secondaire); }
.atok-demande-acces .atok-champ{ text-align:left; margin:0 0 1rem; }
.atok-demande-acces .atok-champ label{ display:block; font-size:0.8rem; color:var(--atok-ton-moyen); margin-bottom:0.3rem; }
.atok-demande-acces input, .atok-demande-acces select{ width:100%; padding:0.6rem; border:1px solid var(--atok-ton-moyen); background:var(--atok-fond); font-family:inherit; box-sizing:border-box; }
.atok-demande-acces button{ padding:0.65rem 1.6rem; background:var(--atok-accent); color:#fff; border:none; cursor:pointer; }
.atok-demande-acces .atok-message-confirmation{ color:var(--atok-texte); margin-top:0.8rem; font-size:0.85rem; }
.atok-demande-acces input:focus, .atok-demande-acces select:focus, .atok-demande-acces button:focus{
	outline:2px solid var(--atok-accent) !important; outline-offset:2px;
}
.atok-demande-acces input:-webkit-autofill{
	-webkit-text-fill-color:var(--atok-texte) !important;
	-webkit-box-shadow:0 0 0px 1000px var(--atok-fond) inset !important;
	box-shadow:0 0 0px 1000px var(--atok-fond) inset !important;
}

/* ---------- Newsletter ---------- */
.atok-newsletter{ max-width:420px; margin:2rem auto; padding:1.75rem; background:var(--atok-fond-secondaire); text-align:left; }
.atok-newsletter .atok-champ{ margin:0 0 1rem; }
.atok-newsletter .atok-champ label{ display:block; font-size:0.8rem; color:var(--atok-ton-moyen); margin-bottom:0.3rem; }
.atok-newsletter input[type="email"]{ width:100%; padding:0.65rem; border:1px solid var(--atok-ton-moyen); background:var(--atok-fond); font-family:inherit; box-sizing:border-box; }
.atok-newsletter input[type="email"]:focus{ outline:2px solid var(--atok-accent) !important; outline-offset:2px; }
.atok-newsletter input[type="email"]:-webkit-autofill{
	-webkit-text-fill-color:var(--atok-texte) !important;
	-webkit-box-shadow:0 0 0px 1000px var(--atok-fond) inset !important;
	box-shadow:0 0 0px 1000px var(--atok-fond) inset !important;
}
.atok-newsletter button{ padding:0.65rem 1.6rem; background:var(--atok-accent); color:#fff; border:none; cursor:pointer; }
.atok-newsletter .atok-message-confirmation{ color:var(--atok-texte); margin-top:0.8rem; font-size:0.85rem; }

/* ---------- Vidéo de présentation ---------- */
.atok-video-presentation{ max-width:800px; margin:0 auto; }
.atok-video-presentation video{ width:100%; height:auto; }

/* ---------- Projets récents (liste filtrable par catégorie) ---------- */
.atok-projets{ background:var(--atok-expo-fond); color:var(--atok-expo-texte); padding:4rem 6vw; }
.atok-projets-entete{ text-align:center; max-width:640px; margin:0 auto 2.5rem; }
.atok-projets-entete h2{ font-family:Georgia,'Times New Roman',serif; font-size:2rem; margin:0 0 0.75rem; color:var(--atok-expo-texte); }
.atok-projets-sous-titre{ color:rgba(242,236,230,0.65); font-size:0.95rem; line-height:1.6; margin:0 0 1.5rem; }
.atok-projets-filtres{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem; }
.atok-projets-filtres button{
	background:transparent !important; border:1px solid rgba(242,236,230,0.3) !important; color:var(--atok-expo-texte) !important;
	padding:0.5rem 1.3rem; font-size:0.85rem; cursor:pointer; border-radius:2px;
	transition:background 0.25s ease, border-color 0.25s ease; box-shadow:none !important;
}
.atok-projets-filtres button:hover{ border-color:var(--atok-accent) !important; }
.atok-projets-filtres button.atok-filtre-actif{ background:var(--atok-accent) !important; border-color:var(--atok-accent) !important; color:#fff !important; }
.atok-projets-filtres button:focus{ outline:2px solid var(--atok-ton-moyen) !important; outline-offset:2px; }

/* Grille régulière, aérée, chaque vignette garde le même format
   (ratio 3/4) et est TOUJOURS entièrement remplie par la photo —
   pas de hauteurs variables façon masonry, qui laissaient des vides
   dès que l'image ne remplissait pas sa cellule. Le "!important" sur
   l'image est nécessaire : sans lui, les styles d'image génériques
   du thème (souvent "img{height:auto}") reprennent le dessus et
   l'image garde sa hauteur naturelle au lieu de remplir la vignette
   — c'est précisément ce qui causait les grands vides noirs. */
.atok-projets-grille{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
	gap:1.75rem; margin-top:2.5rem;
}
.atok-projet-item{
	position:relative; display:block; aspect-ratio:3/4; overflow:hidden; text-decoration:none;
	border-radius:6px; background:rgba(242,236,230,0.04);
	box-shadow:0 10px 26px rgba(0,0,0,0.22);
	transition:box-shadow 0.35s ease, transform 0.35s ease;
}
.atok-projet-item img{
	width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important;
	display:block !important; max-width:none !important; margin:0 !important; border:0 !important;
	transition:transform 0.6s cubic-bezier(0.25,0.8,0.25,1);
}
.atok-projet-item:hover{ box-shadow:0 16px 36px rgba(0,0,0,0.32); transform:translateY(-3px); }
.atok-projet-item:hover img{ transform:scale(1.06); }
.atok-projet-titre{
	position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1.2rem 1.1rem;
	background:linear-gradient(to top, rgba(14,13,12,0.92), rgba(14,13,12,0.4) 65%, transparent);
	color:#fff; font-family:Georgia,'Times New Roman',serif; font-size:1.02rem; letter-spacing:0.01em;
}
.atok-projet-item[hidden]{ display:none; }

@media (max-width:640px){
	.atok-projets{ padding:3rem 5vw; }
	.atok-projets-entete h2{ font-size:1.5rem; }
	.atok-projets-grille{ grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:1rem; }
}

/* ---------- Le Carnet ---------- */
.atok-liste-carnet{ list-style:none; margin:0; padding:0; max-width:650px; }
.atok-carnet-entree{ padding:1.5rem 0; border-bottom:1px solid var(--atok-fond-secondaire); }
.atok-carnet-entree time{ font-size:0.75rem; color:var(--atok-ton-moyen); }
.atok-carnet-entree h3{ font-family:Georgia,serif; margin:0.3rem 0; }
.atok-carnet-entree h3 a{ color:var(--atok-texte); text-decoration:none; }
.atok-etiquette{ font-size:0.7rem; letter-spacing:0.05em; color:var(--atok-accent); }

/* ---------- Cartes de pensées ---------- */
.atok-grille-cartes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1.5rem; }
.atok-carte{ margin:0; text-align:center; cursor:pointer; }
.atok-carte img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.atok-carte figcaption{ font-size:0.8rem; margin-top:0.4rem; color:var(--atok-texte); }
.atok-telecharger-carte{ display:inline-block; font-size:0.7rem; margin-top:0.3rem; color:var(--atok-accent); }
.atok-lightbox{ position:fixed; inset:0; background:rgba(14,13,12,0.92); display:flex; align-items:center; justify-content:center; z-index:100; }
.atok-lightbox img{ max-width:88vw; max-height:88vh; }
.atok-fermer-lightbox{ position:absolute; top:1.5rem; right:2rem; background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; }

/* ---------- Soutenir ---------- */
.atok-soutenir{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.atok-bouton-soutien{ flex:1 1 220px; padding:1.5rem; background:var(--atok-fond-secondaire); text-decoration:none; color:var(--atok-texte); text-align:center; display:flex; flex-direction:column; gap:0.4rem; }
.atok-bouton-soutien span{ font-family:Georgia,serif; font-size:1.05rem; }
.atok-bouton-soutien small{ color:var(--atok-ton-moyen); }


/* ==================================================================
   1.4.1 — Vimeo privé et verrouillage anti-téléchargement
   ================================================================== */
.atok-tableau-video iframe.atok-vimeo{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0 !important; background:#000; display:block; }

/* Les photos ne se laissent ni saisir, ni enregistrer, ni sélectionner (un « bouclier » transparent recouvre l'image). */
.atok-parcours, .atok-parcours *{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.atok-parcours textarea, .atok-parcours input{ -webkit-user-select:text; user-select:text; }
.atok-parcours .atok-photo, .atok-parcours .atok-entree-fond img{ pointer-events:none; -webkit-user-drag:none; }
.atok-tableau-image::after{ content:""; position:absolute; inset:0; z-index:1; background:transparent; }

@media print{
	.atok-parcours, .atok-video-presentation{ display:none !important; }
	body::before{ content:"L'impression de cette exposition n'est pas autorisée."; display:block; padding:2rem; font:16px/1.5 sans-serif; }
}


/* ==================================================================
   1.4.2 — Cadrage des photos (portrait / paysage), bouton « Soutenir » compact, palette sobre
   ================================================================== */
.atok-tableau-image .atok-photo[data-cadrage="contain"]{ object-fit:contain !important; object-position:50% 42% !important; transform:translate3d(var(--atok-px,0px), var(--atok-py,0px), 0) !important; }
.atok-tableau-image[data-cadrage="contain"]::before{
	content:""; position:absolute; inset:-8%; z-index:0; background:var(--atok-fond-flou) center / cover no-repeat;
	filter:blur(34px) brightness(.45) saturate(1.1); transform:translateZ(0);
}
.atok-tableau-image .atok-photo{ z-index:1; }
.atok-tableau-image::after{ z-index:2; }

.atok-cloture .atok-soutien{ padding:1rem 1.1rem; border-radius:14px; }
.atok-cloture .atok-soutien-question{ font-size:.95rem; line-height:1.55; }
.atok-cloture .atok-bouton-soutien{
	display:inline-flex !important; flex:none !important; flex-direction:row !important; align-items:center; justify-content:center; width:auto !important; max-width:100%;
	margin:.75rem 0 0 !important; padding:.55rem 1.2rem !important; border-radius:999px !important; font-family:inherit; font-size:.85rem !important; font-weight:600; line-height:1.3; letter-spacing:.01em;
	background:var(--atok-or) !important; color:#161413 !important; text-align:center;
}
.atok-cloture .atok-bouton-soutien:hover{ box-shadow:0 8px 20px rgba(232,222,211,.22); }


/* ==================================================================
   1.4.3 — Boutons aux couleurs de la charte (terre / crème), plus compacts
   ================================================================== */
.atok-cloture form button[type="submit"]{
	padding:.65rem 1.7rem !important; font-size:.92rem !important; font-weight:600 !important; letter-spacing:.02em;
	background:#8C5A4A !important; color:#FAF8F5 !important; border:1px solid #8C5A4A !important; border-radius:999px !important;
}
.atok-cloture form button[type="submit"]:hover{ background:#A06A58 !important; border-color:#A06A58 !important; transform:translateY(-1px); box-shadow:0 8px 22px rgba(140,90,74,.45) !important; }
.atok-cloture form button[type="submit"]:focus-visible{ outline:2px solid #E8DED3 !important; outline-offset:3px; }
.atok-cloture .atok-bouton-soutien{
	background:#FAF8F5 !important; color:#8C5A4A !important; border:1px solid #FAF8F5; font-weight:600 !important; padding:.55rem 1.3rem !important; font-size:.88rem !important;
}
.atok-cloture .atok-bouton-soutien:hover{ background:#E8DED3 !important; border-color:#E8DED3; box-shadow:0 8px 20px rgba(232,222,211,.2); }
.atok-cloture textarea.est-invalide{ border-color:#FF9E97 !important; box-shadow:0 0 0 2px rgba(255,158,151,.25) !important; }

/* ==================================================================
   1.4.4 — Plus aucune couleur du thème (bleu au survol…) : tous les états
   (survol, focus, clic, visité) sont fixés aux couleurs de la charte.
   Terre #8C5A4A · terre clair #C08A76 · sable #E8DED3 · crème #FAF8F5
   ================================================================== */
.atok-parcours a, .atok-parcours a:visited, .atok-porte-expo a, .atok-porte-expo a:visited{ color:#C08A76 !important; text-decoration-color:rgba(192,138,118,.6); transition:color .15s ease; }
.atok-parcours a:hover, .atok-parcours a:focus, .atok-parcours a:active, .atok-porte-expo a:hover, .atok-porte-expo a:focus, .atok-porte-expo a:active{ color:#E0AE9B !important; background:transparent; }
.atok-parcours a.atok-retour-site, .atok-parcours a.atok-retour-site:visited{ color:rgba(242,236,230,.7) !important; }
.atok-parcours a.atok-retour-site:hover, .atok-parcours a.atok-retour-site:focus{ color:#FAF8F5 !important; }
.atok-signature a, .atok-signature a:visited{ color:#C08A76 !important; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.atok-signature a:hover, .atok-signature a:focus, .atok-signature a:active{ color:#E0AE9B !important; }
.atok-parcours a.atok-bouton-soutien, .atok-parcours a.atok-bouton-soutien:visited{ color:#8C5A4A !important; text-decoration:none !important; }
.atok-parcours a.atok-bouton-soutien:hover, .atok-parcours a.atok-bouton-soutien:focus, .atok-parcours a.atok-bouton-soutien:active{ color:#6F4337 !important; background:#E8DED3 !important; }

/* Boutons de commande (quitter, son, plein écran, précédent/suivant) : survol sobre. */
.atok-parcours button:not([type="submit"]):not(.atok-entrer):not(.atok-entrer-pleinecran):not(.est-final):hover,
.atok-parcours button:not([type="submit"]):not(.atok-entrer):not(.atok-entrer-pleinecran):not(.est-final):focus,
.atok-parcours button:not([type="submit"]):not(.atok-entrer):not(.atok-entrer-pleinecran):not(.est-final):active{
	background-color:rgba(250,248,245,.2) !important; color:#FAF8F5 !important; border-color:rgba(250,248,245,.5) !important; box-shadow:none;
}
.atok-parcours .atok-entrer:hover, .atok-parcours .atok-entrer:focus, .atok-parcours .atok-entrer:active,
.atok-parcours .atok-suivant.est-final:hover, .atok-parcours .atok-suivant.est-final:focus, .atok-parcours .atok-suivant.est-final:active{
	background:#E8DED3 !important; color:#161413 !important; border-color:#E8DED3 !important;
}
.atok-parcours .atok-entrer-pleinecran:hover, .atok-parcours .atok-entrer-pleinecran:focus, .atok-parcours .atok-entrer-pleinecran:active{
	background:rgba(250,248,245,.14) !important; color:#FAF8F5 !important; border-color:rgba(250,248,245,.7) !important;
}
.atok-porte-expo #atok-form-code button:hover, .atok-porte-expo #atok-form-code button:focus, .atok-porte-expo #atok-form-code button:active{
	background:#E8DED3 !important; color:#161413 !important;
}
.atok-parcours :focus-visible, .atok-porte-expo :focus-visible{ outline-color:#C08A76 !important; }
.atok-parcours ::selection{ background:rgba(140,90,74,.5); color:#FAF8F5; }
.atok-etoiles-rang label:hover, .atok-etoiles-rang label:hover ~ label, .atok-etoiles-rang input:checked ~ label{ color:#C08A76 !important; }