:root{
  /* Palette “Made in Gabon” (or) */
  --brand:#D0AE5D;                 /* or moyen */
  --brand-600:#BB964A;             /* or foncé (hover/active) */
  --ring:rgba(208,174,93,.22);     /* halo focus basé sur --brand */

  /* Neutres chauds tirés du logo */
  --bg:#FDFDFD;                    /* blanc du logo */
  --ink:#1f1f1f;                   /* texte principal */
  --muted:#6b6b6b;                 /* texte secondaire */
  --line:#EDE3CF;                  /* lignes/beiges clairs */
  --card:#ffffff;
  --card-soft:#FFFDF7;             /* blanc cassé très léger */

  /* Tokens UI */
  --radius-lg:18px; --radius-md:12px;
  --shadow-1:0 1px 1px rgba(10,30,20,.03),0 8px 24px rgba(10,30,20,.06);
  --step--1: clamp(12px, .78vw, 14px);
  --step-0: clamp(14px, .9vw + 8px, 16px);
  --step-1: clamp(16px, 1.1vw + 10px, 18px);
  --step-2: clamp(18px, 1.4vw + 10px, 22px);
  --step-4: clamp(28px, 2.3vw + 12px, 36px);
  --left-scrim: rgba(0,0,0,.38);
  --pad-lg: 22px; --pad-md: 16px; --pad-sm: 12px;

  /* Déclinaisons utilitaires or (pour fonds doux) */
  --gold-50:#FFF9E8;
  --gold-100:#FBEFD1;
  --gold-150:#F4E4B8;
  --gold-200:#EBDCA3;
}

*{box-sizing:border-box}
html,body{height:100%} 
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--step-0); line-height:1.55; letter-spacing:.01em;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga","clig","calt"; font-variant-numeric:tabular-nums; -webkit-tap-highlight-color:transparent;
}
a{color:var(--brand);text-decoration:none} 
a:hover{text-decoration:underline}

/* ====== LAYOUT ====== */
.shell{min-height:100svh;display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr)}
@supports (min-height: 100dvh){
  .shell{min-height:100dvh} /* dvh plus stable sur mobile */
}
@media (max-width:1200px){.shell{grid-template-columns:minmax(0,420px) minmax(0,1fr)}}
@media (max-width:1060px){.shell{grid-template-columns:1fr}}

/* ====== GAUCHE (HERO/VIDÉO) ====== */
.left{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:stretch; justify-content:center;
  padding:calc(var(--pad-lg) + env(safe-area-inset-top)) var(--pad-lg) var(--pad-lg) calc(var(--pad-lg) + env(safe-area-inset-left));
  color:#fff; border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg,#2A1F08 0%, #181208 100%);
}
.bgvideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; filter:saturate(1.03) contrast(1.04); z-index:0; opacity:.9;
  pointer-events:none; /* évite les “touch” fantômes */
}
.left::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--left-scrim),var(--left-scrim))}

.panel{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:12px;
  align-items:center; text-align:center;
  width:min(620px,92%);
  min-height:100%;
  animation:rise .5s cubic-bezier(.2,.8,.2,1) both .05s;
}

.page-title{margin:6px 0;font-family:'Chakra Petch',system-ui;font-weight:800;font-size:var(--step-4);letter-spacing:.2px}
.hint{opacity:.95;max-width:62ch;font-size:var(--step--1);margin:0 auto}
.left-footer{margin-top:auto;font-size:12px;line-height:1.4;color:#fff6d6b3;text-align:center;width:100%}
.left-footer a{color:#fff2bf;text-decoration:underline}

/* ✅ Ajustements anti-“coupe” en mobile (passage 1 colonne) */
@media (max-width:1060px){
  .left{
    position:relative;
    height:auto;                                   /* ne force plus 100vh */
    min-height: clamp(300px, 48svh, 520px);        /* hauteur douce */
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
    overflow:visible;                               /* évite le clipping */
    padding-bottom: calc(var(--pad-lg) + env(safe-area-inset-bottom));
  }
  @supports (min-height: 48dvh){
    .left{ min-height: clamp(300px, 48dvh, 520px); } /* dvh si dispo */
  }
  .panel{
    min-height:unset;
    padding-bottom:6px;                             /* petit coussin bas */
  }
}

 /* Logo centré */
.hero-logo{display:grid;place-items:center;margin:4px 0 12px}
.hero-logo img{
  width:min(120px,40vw);height:auto;display:block;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.25)) drop-shadow(0 1px 0 rgba(255,255,255,.25));
}
@media (max-width:1060px){.hero-logo img{width:96px}}

/* ====== DROITE ====== */
.right{
  min-height:100%;
  display:grid;align-items:start;justify-items:center;padding:var(--pad-lg);
  padding-left:calc(var(--pad-lg) + env(safe-area-inset-left)); 
  padding-right:calc(var(--pad-lg) + env(safe-area-inset-right));
}
.wrap{width:min(980px,100%);padding:var(--pad-md);display:grid;gap:16px}

/* Header sticky (onglets) */
.form-header{
  position:sticky; top:env(safe-area-inset-top,0); z-index:5; 
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-1); padding:14px; 
  backdrop-filter:saturate(1.05) blur(2px)
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.segmented{display:flex;gap:6px;background:var(--gold-50);border:1px solid var(--gold-150);border-radius:999px;padding:4px;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.segmented .tab{appearance:none;border:0;background:transparent;border-radius:999px;padding:10px 14px;font-weight:700;color:#5C471C;cursor:pointer;white-space:nowrap;transition:background .2s, box-shadow .2s, color .2s}
.segmented .tab[aria-selected="true"]{background:var(--card);border:1px solid var(--gold-200);box-shadow:0 4px 12px rgba(208,174,93,.12);color:#3E2F12}
.helper{font-size:var(--step--1);color:var(--muted);max-width:48ch}

/* Cartes */
.group{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-1);animation:rise .5s cubic-bezier(.2,.8,.2,1) both .05s}
.group-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(180deg,#FFFCF3,#fff);border-bottom:1px solid var(--line)}
.group-title{margin:0;font-weight:800;color:var(--ink);font-family:'Chakra Petch',system-ui;font-size:var(--step-1);letter-spacing:.2px}
.group-body{padding:16px}

/* Formulaire */
form{display:grid;gap:18px}
.row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.row{grid-template-columns:1fr}}

label{font-size:12.5px;font-weight:700;display:block;margin-bottom:6px;color:#2a2a2a;text-transform:uppercase;letter-spacing:.06em}
.req{color:#ef4444}

input,select,textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 12px 12px 44px;
  font-size:16px;background:linear-gradient(#FFFEFB,#ffffff);color:var(--ink);
  transition:border-color .15s,box-shadow .15s,background .2s,transform .12s; caret-color:var(--brand);
}
input:hover,select:hover,textarea:hover{background:var(--card-soft)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring);outline:none;transform:translateY(-1px)}
input::placeholder,textarea::placeholder{color:#9aa6b2}
textarea{min-height:120px;resize:vertical}
.divider{height:1px;background:var(--line);margin:2px 0}

.select{position:relative}
select{
  -webkit-appearance:none;appearance:none;padding:12px 40px 12px 44px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D0AE5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px
}

.input-wrap{position:relative}
.input-wrap .icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:.9;color:#6b5a35;
  transition:color .2s,opacity .2s,transform .2s;pointer-events:none
}
.input-wrap:focus-within .icon{color:var(--brand);opacity:1;transform:translateY(-50%) scale(1.06)}
.icon-mail path,.icon-phone path{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* États d'erreur visibles après tentative */
form.submitted input:invalid, 
form.submitted select:invalid, 
form.submitted textarea:invalid{
  border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15);
  animation:shake .18s ease;
}

/* Actions + bouton animé */
.actions{
  display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:12px;
  border-top:1px dashed var(--gold-150);background:var(--card-soft);
  border-radius:0 0 var(--radius-lg) var(--radius-lg)
}
.btn{
  appearance:none;border:1px solid var(--line);background:var(--card);color:#122033;border-radius:12px;
  padding:12px 16px;font-weight:700;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .04s ease, box-shadow .2s, border-color .2s
}
.btn:hover{border-color:#E6D6B8} 
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{box-shadow:0 10px 22px rgba(208,174,93,.22)}
.btn.primary.loading{pointer-events:none;opacity:.95}
.btn.primary.loading .btn-label{visibility:hidden}
.btn.primary.loading::after{
  content:"";position:absolute;inset:auto;top:50%;left:50%;width:18px;height:18px;border-radius:50%;
  border:2px solid #fff;border-right-color:transparent;transform:translate(-50%,-50%);animation:spin .8s linear infinite
}

@media (max-width:560px){
  .actions{flex-wrap:wrap;justify-content:stretch}
  .btn{flex:1 1 100%}
}

/* Callout & Avantages */
.benefits ul{margin:10px 0 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.benefits li{display:flex;gap:10px;align-items:flex-start;background:var(--gold-50);border:1px solid var(--line);padding:12px;border-radius:12px;color:#1e2a36}
@media (max-width:760px){.benefits ul{grid-template-columns:1fr}}
.callout{display:flex;gap:10px;align-items:flex-start;background:#FFFCED;border:1px dashed var(--gold-150);padding:12px;border-radius:12px;color:#1e2a36;font-size:14px}

/* Toast */
#toastRoot{position:fixed;inset:auto 16px 16px auto;display:grid;gap:8px;z-index:9999}
.toast{min-width:260px;max-width:420px;background:#ffffff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-1);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;animation:slideIn .35s ease-out both}
.toast.success{border-color:var(--gold-150);background:linear-gradient(#FFF9E8,#ffffff)}
.toast.error{border-color:#f3d1d1;background:linear-gradient(#fff6f6,#ffffff)}
.toast .icon{flex:0 0 auto;margin-top:2px}
.toast .title{font-weight:700;margin:0 0 2px}
.toast .text{margin:0;color:#374151}
.toast .close{margin-left:auto;border:0;background:transparent;cursor:pointer;font-weight:700;color:#4b5563}

/* Animations */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ripple{to{transform:scale(12);opacity:0}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{20%{transform:translateX(-2px)} 40%{transform:translateX(2px)} 60%{transform:translateX(-1px)} 80%{transform:translateX(1px)}}

/* Accessibilité / mouvement réduit */
@media (prefers-reduced-motion: reduce){
  .bgvideo{display:none}
  .left{background:#1F160B}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}
}

/* ===== Checkbox native, juste or ===== */
.checkbox{display:flex;align-items:center;gap:10px;padding:12px 14px}
.checkbox input[type="checkbox"]{
  appearance:auto;-webkit-appearance:auto;accent-color:var(--brand);
  width:auto;height:auto;border:none;box-shadow:none;
}
.checkbox input[type="checkbox"]:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.checkbox label{margin:0;cursor:pointer;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.25}
form.submitted .checkbox input[type="checkbox"]:invalid{outline:2px solid rgba(239,68,68,.5);outline-offset:2px}
form.submitted .checkbox input[type="checkbox"]:invalid + label{color:#b91c1c}

/* Mobile only: bords arrondis sur tout le bloc gauche */
@media (max-width:1060px){
  .left{
    border-radius: var(--radius-lg);  /* au lieu de 0 0 var(--radius-lg) var(--radius-lg) */
    overflow: hidden;                  /* évite les débords vidéo/voile */
  }
}