/* SKB-CONTACT.CSS v3 — Hero (inchangé) + Formulaire simplifié v3
   Requiert : skb-shared.css chargé en premier.
   Le formulaire est wrappé dans .skb-page[data-theme] → il hérite des tokens v3. */


/* ─────────────────────────────────────────────────────────
   VARIABLES — pour le HERO qui vit hors .skb-page (toujours sombre)
───────────────────────────────────────────────────────── */
:root{
  --bg:#0a0c10; --surface:#10131a; --text:#e8eaed; --muted:#7f8794;
  --faint:rgba(255,255,255,.28); --border:rgba(255,255,255,.08);
  --accent:#2563eb; --accent-light:#60a5fa;
}

.skb-section-bg{ background:var(--bg) !important; }

/* ─────────────────────────────────────────────────────────
   HERO — logo + typewriter (repris à l'identique de la v2)
───────────────────────────────────────────────────────── */
.skb-hero-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:50px 20px; position:relative; }
.skb-logo-block{ opacity:0; transform:translateY(28px);
  transition:opacity 1.8s cubic-bezier(.19,1,.22,1), transform 1.8s cubic-bezier(.19,1,.22,1); }
.skb-logo-block.show{ opacity:1; transform:translateY(0); }
.skb-logo-block img{ width:100px; height:auto; display:block; }
.skb-tw-text{ margin-top:28px; opacity:0; transform:translateY(14px);
  transition:opacity 1s ease .1s, transform 1s ease .1s;
  font-size:clamp(20px,2.8vw,28px); font-weight:600; color:var(--text); line-height:1.55;
  max-width:680px; min-height:3em; font-family:'Instrument Serif',Georgia,serif; }
.skb-tw-text.show{ opacity:1; transform:translateY(0); }
.skb-cursor{ display:inline-block; width:2px; height:1em; background:var(--accent);
  vertical-align:middle; margin-left:4px; animation:skbCursorBlink 1s step-end infinite; }
@keyframes skbCursorBlink{ 0%,100%{opacity:1} 50%{opacity:0} }
.skb-scroll-hint{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; transition:opacity 1s ease; cursor:pointer; }
.skb-scroll-hint.show{ opacity:1; } .skb-scroll-hint:hover{ opacity:.6; }
.skb-scroll-label{ font-size:10px; letter-spacing:.18em; color:var(--faint); text-transform:uppercase; }
.skb-scroll-line{ width:1px; height:32px; background:linear-gradient(to bottom,transparent,var(--accent));
  animation:skbScrollPulse 2s ease-in-out infinite; }
@keyframes skbScrollPulse{ 0%,100%{opacity:.4} 50%{opacity:1} }
.skb-hero-divider{ height:1px; background:var(--border); border:none; margin:0; }
@media(max-width:768px){
  .skb-tw-text{ font-size:clamp(18px,5vw,24px); margin-top:36px; }
  .skb-logo-block img{ width:130px; }
  .skb-scroll-hint{ bottom:16px; }
}
@media(max-width:480px){
  .skb-hero-inner{ padding:48px 20px 64px; }
  .skb-tw-text{ font-size:18px; }
}

/* ═════════════════════════════════════════════════════════
   FORMULAIRE v3 (simplifié) — wrappé dans .skb-page → tokens v3
═════════════════════════════════════════════════════════ */
/* ⚠️ CETTE REGLE VALAIT `background:transparent` — corrige le 05/08/2026.
   Heritage de WordPress : le formulaire etait colle dans un conteneur Elementor
   qui peignait deja le fond, et `transparent` evitait de le peindre deux fois.
   Sous Astro il n'y a plus rien derriere. Comme `.skb-page{background:var(--bg)}`
   etait ainsi annule, on voyait le blanc par defaut du navigateur : invisible en
   theme clair, franche bande blanche en theme sombre (signale par David).
   Mesure : `data-theme` basculait bien et `--surface` suivait (255,255,255 ->
   19,23,31), mais AUCUN ancetre ne peignait quoi que ce soit.

   ⚠️ Et c'est un PADDING, pas un margin. Une marge exterieure ne recevrait pas
   `background` : la bande blanche reapparaitrait exactement dans l'espace ajoute
   pour aerer. */
.skb-cf-host{
  background:var(--bg);
  padding-block:clamp(40px,6vw,72px);
}
/* ⚠️ Toutes les règles du formulaire sont préfixées par .skb-cf-host → spécificité
   (0,2,0), supérieure au reset global « .skb-page *{margin:0;padding:0} » de
   skb-shared.css (0,1,0) qui se charge APRÈS (via le <link> dans le widget).
   Sans ce préfixe, le reset écrasait padding/marges du formulaire.
   Largeur : pilotée par la colonne/section Elementor (pas de max-width ici). */
.skb-cf-host .cf{ width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:36px; box-shadow:var(--sh-2); }
@media(max-width:640px){ .skb-cf-host .cf{ padding:24px; } }

.skb-cf-host .cf-lbl{ font:700 12.5px var(--font-body); letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:12px; }
.skb-cf-host .cf-title{ font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.2vw,36px);
  line-height:1.08; color:var(--text); }
.skb-cf-host .cf-sub{ margin-top:12px; font-size:15.5px; color:var(--muted); line-height:1.6; }

.skb-cf-host .cf-field{ margin-top:18px; }
.skb-cf-host .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
@media(max-width:520px){ .skb-cf-host .cf-row{ grid-template-columns:1fr; } }

.skb-cf-host .cf-fl{ display:block; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:7px; }
.skb-cf-host .cf-fl span{ color:var(--accent-2); }

.skb-cf-host .cf-input,.skb-cf-host .cf-select,.skb-cf-host .cf-textarea{ width:100%; font:inherit; font-size:15px; color:var(--text);
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-md); padding:12px 14px;
  transition:border-color var(--dur), box-shadow var(--dur); }
/* Pas d'outline:none → l'anneau de focus global (.skb-page :focus-visible) s'applique.
   Le halo + la bordure accent restent en signal complémentaire. */
.skb-cf-host .cf-input:focus,.skb-cf-host .cf-select:focus,.skb-cf-host .cf-textarea:focus{ border-color:var(--accent);
  box-shadow:0 0 0 3px oklch(.48 .158 254/.28); }
.skb-cf-host .cf-input::placeholder,.skb-cf-host .cf-textarea::placeholder{ color:var(--muted-2); }
.skb-cf-host .cf-textarea{ min-height:120px; resize:vertical; line-height:1.55; }
.skb-cf-host .cf-select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:42px; }
.skb-cf-host .cf-select option,.skb-cf-host .cf-select optgroup{ background:var(--surface); color:var(--text); }

.skb-cf-host .cf-rgpd{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--muted);
  line-height:1.5; margin-top:18px; cursor:pointer; }
.skb-cf-host .cf-rgpd input{ margin-top:3px; width:17px; height:17px; flex:none; accent-color:var(--accent); }
.skb-cf-host .cf-rgpd a{ color:var(--accent-ink); font-weight:600; }
.skb-cf-host .cf-rgpd a:hover{ text-decoration:underline; }

.skb-cf-host .cf-err{ display:none; margin-top:14px; padding:11px 14px; border-radius:var(--r-md);
  font-size:13.5px; font-weight:600;
  background:oklch(0.55 0.205 27 / .10); border:1px solid oklch(0.55 0.205 27 / .3); color:var(--accent-2); }
.skb-cf-host .cf-err.show{ display:block; }

.skb-cf-host .cf-submit{ margin-top:22px; }
.skb-cf-host .cf-submit .btn-primary{ width:100%; justify-content:center; padding:15px 24px; font-size:15px; }
/* Le formulaire vit dans son propre .skb-page, HORS du conteneur .rf : les regles .rf .btn-primary
   ne l'atteignent pas et l'encre du bouton retombait sur var(--text) (2,48:1 sur le fond accent). */
.skb-cf-host .cf-submit .btn-primary{ color:#fff; }
.skb-cf-host[data-theme="dark"] .cf-submit .btn-primary{ color:#0b1220; }
.skb-cf-host .cf-hint{ margin-top:14px; text-align:center; font-size:12.5px; color:var(--muted); }

.skb-cf-host .cf-ok{ display:none; text-align:center; padding:20px; }
.skb-cf-host .cf-ok.show{ display:block; }
.skb-cf-host .cf-ok-ic{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  background:oklch(0.55 0.13 150 / .12); color:var(--green); }
.skb-cf-host .cf-ok-ic svg{ width:28px; height:28px; }
.skb-cf-host .cf-ok-t{ font-family:var(--font-display); font-weight:400; font-size:26px; color:var(--text); }
.skb-cf-host .cf-ok-s{ margin-top:10px; font-size:15px; color:var(--muted); line-height:1.6; }

/* ═══ LARGEUR DE L'HOTE DU FORMULAIRE — ajoute le 04/08/2026 ══════════════════
   Le formulaire etait le seul bloc pleine largeur du site : bouton d'envoi a
   1 190 px, champs « Nom complet » et « Email » a ~600 px chacun, alors que le
   hero de la meme page est contraint a 780 px et que les grilles des autres pages
   s'arretent vers 1 100 px. Un champ de 600 px pour saisir « Marie Dupont » donne
   au dernier ecran avant conversion un air de formulaire administratif.

   Origine : /contact/ porte DEUX conteneurs .skb-page freres (le bloc .rf et
   l'hote du formulaire) ; le second n'heritait d'aucune contrainte de largeur. */
.skb-cf-host .cf{max-width:900px;margin-inline:auto}
.skb-cf-host .cf-submit{justify-content:center}
.skb-cf-host .cf-submit .btn-primary{max-width:340px;width:100%;justify-content:center}

/* Hero de /contact/ moins haut sur un ecran court : le champ « Nom complet » doit
   etre atteignable sans defiler en 1280x720, la resolution d'un portable courant. */
@media (min-width:900px) and (max-height:820px){
  #skbContact .hero{padding-top:44px;padding-bottom:32px}
}