/* Venaki · page « Bientôt disponible » · version du 2026-09-15 (bloc inscription e-mail)
   Portée : uniquement les éléments préfixés vk-cs. Aucun effet sur le reste du thème. */
:root{
  --vert:#1E3A2F; --vert2:#2F5647;
  --ivoire:#F5F1E8; --sable:#EFEADC; --ecru:#D9CBB3; --blanc:#FFFDF9;
  --ambre:#C79A4E; --ambre2:#8A6420;
  --cuir:#4A3B2A; --encre:#2A2115; --terra:#8C4A3C;
}
body.vk-cs-body{margin:0}

/* Fond vert dominant (variante non retenue) */
.vk-cs{
  --cs-font-title:"Marcellus",Georgia,serif;
  --cs-font-body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cs-bg:var(--vert); --cs-fg:var(--ivoire); --cs-title:var(--ivoire);
  --cs-kicker:var(--ambre); --cs-line:var(--vert2);
  --cs-btn-bd:var(--ambre); --cs-btn-fg:var(--ivoire);
  --cs-btn-bg-h:var(--ambre); --cs-btn-fg-h:var(--vert);
  --cs-link-ul:var(--ambre); --cs-focus:var(--ivoire);
  --cs-sign:var(--ambre); --cs-foot:var(--ecru);
  box-sizing:border-box;
  min-height:100vh; min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;
  grid-template-areas:"head" "photo" "main" "foot";
  background:var(--cs-bg); color:var(--cs-fg);
  font-family:var(--cs-font-body);
  font-weight:300; font-size:1rem; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* Fond ivoire dominant (retenu par le dirigeant : classe vk-cs--ivoire) */
.vk-cs--ivoire{
  --cs-bg:var(--ivoire); --cs-fg:var(--encre); --cs-title:var(--vert);
  --cs-kicker:var(--ambre2); --cs-line:var(--ecru);
  --cs-btn-bd:var(--vert); --cs-btn-fg:var(--vert);
  --cs-btn-bg-h:var(--vert); --cs-btn-fg-h:var(--ivoire);
  --cs-link-ul:var(--ambre); --cs-focus:var(--vert);
  --cs-sign:var(--vert); --cs-foot:var(--encre);
}
.vk-cs *,.vk-cs *::before,.vk-cs *::after{box-sizing:border-box}

.vk-cs-head{grid-area:head;padding:24px 24px 16px}
.vk-cs-logo{display:block;height:48px;width:auto;max-width:none}

.vk-cs-photo{grid-area:photo;margin:0;aspect-ratio:4 / 3;overflow:hidden;background:var(--cuir)}
.vk-cs-photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:72% 34%}

.vk-cs-main{grid-area:main;padding:32px 24px 0;display:flex;flex-direction:column;gap:32px}
.vk-cs-intro{display:grid;gap:16px;max-width:760px}
.vk-cs-title{margin:0;font-family:var(--cs-font-title);font-weight:400;font-size:2.125rem;line-height:1.12;letter-spacing:0;color:var(--cs-title);text-wrap:balance}
.vk-cs-lede{margin:0;font-size:1.125rem;line-height:1.5;max-width:58ch}

.vk-cs-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 48px;max-width:760px}
.vk-cs-block{border-top:1px solid var(--cs-line);padding-top:16px;display:grid;gap:8px;align-content:start}
.vk-cs-block p{margin:0}
.vk-cs-kicker{margin:0;font-family:var(--cs-font-title);font-weight:400;font-size:.875rem;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-kicker)}
.vk-cs-block--arrive{grid-area:arrive}
.vk-cs-block--kylian{grid-area:kylian}
.vk-cs-block--reseaux{grid-area:reseaux}
.vk-cs-block--contact{grid-area:contact}
.vk-cs-grid .vk-cs-sign{grid-area:sign}

.vk-cs-links{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.vk-cs-links li{margin:0}
.vk-cs-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--cs-btn-bd);border-radius:2px;background:transparent;color:var(--cs-btn-fg);font-family:var(--cs-font-body);font-weight:400;font-size:.9375rem;line-height:1.2;letter-spacing:.01em;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.vk-cs-btn svg{width:11px;height:11px;flex:none}
.vk-cs-btn:hover{background:var(--cs-btn-bg-h);color:var(--cs-btn-fg-h)}

.vk-cs-mail{color:inherit;font-weight:400;text-decoration:underline;text-decoration-color:var(--cs-link-ul);text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap}
.vk-cs-mail:hover{text-decoration-thickness:2px}

.vk-cs-sign{margin:0;font-family:var(--cs-font-title);font-weight:400;font-size:1.375rem;line-height:1.2;letter-spacing:.04em;color:var(--cs-sign);align-self:end}

.vk-cs-foot{grid-area:foot;padding:32px 24px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;font-size:.8125rem;font-weight:400;color:var(--cs-foot)}
.vk-cs-legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.vk-cs-legal li{margin:0}
.vk-cs-legal a,.vk-cs-legal button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.vk-cs-legal a:hover,.vk-cs-legal button:hover{text-decoration-thickness:2px}
.vk-cs-copy{margin:0;min-height:44px;display:inline-flex;align-items:center}

.vk-cs a:focus-visible,.vk-cs button:focus-visible{outline:2px solid var(--cs-focus);outline-offset:3px}

/* ---------- Inscription e-mail ----------
   Carte blanc cassé : couleurs fixées dans la carte, valables sur fond ivoire comme sur fond vert. */
.vk-cs-sub{
  --sub-fg:var(--encre); --sub-title:var(--vert); --sub-meta:var(--cuir);
  --sub-error:var(--terra); --sub-link-ul:var(--ambre2); --sub-focus:var(--vert);
  position:relative; max-width:760px; margin:0; padding:24px 16px;
  display:grid; gap:16px;
  background:var(--blanc); color:var(--sub-fg);
  border:1px solid var(--ecru); border-top:2px solid var(--ambre); border-radius:2px;
}
.vk-cs-sub p{margin:0}
.vk-cs-sub-title{margin:0;font-family:var(--cs-font-title);font-weight:400;font-size:1.5rem;line-height:1.2;letter-spacing:0;color:var(--sub-title)}
.vk-cs-sub-title:focus{outline:none}
.vk-cs-sub-body{display:grid;gap:16px}
.vk-cs [hidden]{display:none !important}
.vk-cs-sub-lede{font-size:1rem;line-height:1.55}
.vk-cs-form{display:grid;gap:8px;margin:0}
.vk-cs-label{font-weight:400;font-size:.9375rem;line-height:1.3}
.vk-cs-row{display:flex;flex-direction:column;gap:8px}
.vk-cs-input{display:block;width:100%;min-width:0;min-height:52px;margin:0;padding:0 16px;border:1px solid var(--cuir);border-radius:2px;background:var(--blanc);color:var(--encre);font-family:var(--cs-font-body);font-weight:400;font-size:1rem;line-height:1.3;-webkit-appearance:none;appearance:none;transition:border-color .15s ease}
.vk-cs-input::placeholder{color:var(--cuir);opacity:.8}
.vk-cs-input:hover{border-color:var(--vert)}
.vk-cs-input:focus{outline:2px solid var(--sub-focus);outline-offset:2px;border-color:var(--vert)}
.vk-cs-input[aria-invalid="true"]{border-color:var(--sub-error);box-shadow:inset 0 0 0 1px var(--sub-error)}
.vk-cs-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;margin:0;padding:8px 24px;border:1px solid var(--vert);border-radius:2px;background:var(--vert);color:var(--ivoire);font-family:var(--cs-font-body);font-weight:400;font-size:1rem;line-height:1.2;letter-spacing:.01em;text-align:center;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.vk-cs-submit:hover{background:var(--vert2);border-color:var(--vert2)}
.vk-cs-submit[aria-disabled="true"]{background:var(--vert2);border-color:var(--vert2);cursor:progress}
.vk-cs-spin{display:none;width:16px;height:16px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
.vk-cs-form.is-busy .vk-cs-spin{display:inline-block;animation:vk-cs-spin .8s linear infinite}
@keyframes vk-cs-spin{to{transform:rotate(360deg)}}
.vk-cs-msg{display:flex;gap:8px;align-items:flex-start;margin:0;font-weight:400;font-size:.875rem;line-height:1.45;color:var(--sub-error)}
.vk-cs-msg:empty{display:none}
.vk-cs-msg svg{width:16px;height:16px;flex:none;margin-top:2px}
.vk-cs-done{display:flex;gap:16px;align-items:flex-start;font-size:1rem;line-height:1.55}
.vk-cs-done:empty{display:none}
.vk-cs-done svg{width:24px;height:24px;flex:none;color:var(--vert)}
.vk-cs-sub-legal{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--ecru)}
.vk-cs-cond{font-size:.875rem;line-height:1.5}
.vk-cs-rgpd{font-size:.8125rem;line-height:1.55;color:var(--sub-meta)}
.vk-cs-sub a{color:inherit;font-weight:400;text-decoration:underline;text-decoration-color:var(--sub-link-ul);text-decoration-thickness:1px;text-underline-offset:3px}
.vk-cs-sub a:hover{text-decoration-thickness:2px}
.vk-cs-sub a:focus-visible,.vk-cs-sub button:focus-visible{outline:2px solid var(--sub-focus);outline-offset:3px}
.vk-cs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.vk-cs-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Tablette : 768 à 1199 px */
@media (min-width:768px){
  .vk-cs-head{padding:32px 48px 24px}
  .vk-cs-logo{height:60px}
  .vk-cs-photo{aspect-ratio:auto;height:min(44vh,420px)}
  .vk-cs-main{padding:40px 48px 0;gap:32px}
  .vk-cs-title{font-size:2.75rem;line-height:1.1}
  .vk-cs-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"arrive kylian" "reseaux contact" "sign sign"}
  .vk-cs-foot{padding:40px 48px 24px}
  .vk-cs-sub{padding:24px}
  .vk-cs-row{flex-direction:row}
  .vk-cs-input{flex:1 1 auto}
  .vk-cs-submit{flex:none;white-space:nowrap}
}
/* Ordinateur : 1200 px et plus */
@media (min-width:1200px){
  .vk-cs{grid-template-columns:minmax(0,1fr) minmax(0,40%);grid-template-rows:auto 1fr auto;grid-template-areas:"head photo" "main photo" "foot photo"}
  .vk-cs-head{padding:32px 72px 0}
  .vk-cs-logo{height:72px}
  .vk-cs-photo{grid-row:1 / -1;position:sticky;top:0;align-self:start;height:100vh;height:100dvh}
  .vk-cs-main{padding:24px 72px 0;gap:24px;justify-content:center}
  .vk-cs-title{font-size:2.75rem;line-height:1.09}
  .vk-cs-grid{grid-template-areas:"arrive kylian" "reseaux contact" "reseaux sign"}
  .vk-cs-foot{padding:24px 72px 16px}
  .vk-cs-sub{padding:24px 32px}
  .vk-cs-sub-title{font-size:1.75rem}
}
@media (min-width:1200px) and (min-height:900px){
  .vk-cs-title{font-size:3rem}
  .vk-cs-main{gap:32px}
}
/* Mobile : moins de 768 px */
@media (max-width:767px){
  .vk-cs-grid{grid-template-areas:none}
  .vk-cs-block,.vk-cs-grid .vk-cs-sign{grid-area:auto}
}
@media (prefers-reduced-motion:reduce){
  .vk-cs-btn,.vk-cs-submit,.vk-cs-input{transition:none}
  .vk-cs-form.is-busy .vk-cs-spin{display:none;animation:none}
}