/* ============================================================
   GROUPE ZULU — Landing CONTACT (nous-contacter)
   Page autonome SANS nav ni footer (voir page-nous-contacter.php).
   Chargee uniquement sur cette page. Variables/reset/curseur de base
   viennent aussi du theme ; ce fichier ajoute les vars custom + le layout.
   ============================================================ */
:root{
  --white:#ffffff;
  --cyan:#00A2D9;
  --teal:#00779F;
  --marine:#00394B;
  --orange:#F26D33;
  --dorange:#DD571C;
  --mist:#F2F8FB;
  --ink-soft:#42606D;
  --fh:'Barlow',sans-serif;
  --ft:'Inter',sans-serif;
  --r-card:22px;
  --r-panel:38px;
  /* ↓↓↓ MARGES DE LA PAGE EN DESKTOP — modifiez ces deux valeurs vous-même ↓↓↓
     --page-margin-x : marge gauche/droite (axe X) autour des encadrés
     --page-margin-y : marge haut/bas (axe Y) autour des encadrés            */
  --page-margin-x:80px;
  --page-margin-y:75px;
  /* Hauteur du logo sous le slogan — modifiez cette seule valeur (en px).
     Valeur simple (pas de clamp/vw) : le changement s'applique toujours. */
  --logo-slogan-size:55px;
  /* Espace vertical entre le slogan et le logo — modifiez cette valeur.
     Peut être NÉGATIF (ex: -20px) pour resserrer et compenser le vide
     transparent contenu dans le fichier PNG du logo. */
  --logo-slogan-gap:40px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ft);background:var(--white);color:var(--marine);overflow:hidden;cursor:none}
img{max-width:100%}

/* ============ CURSEUR CUSTOM ============ */
#cursor{position:fixed;width:9px;height:9px;background:var(--cyan);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s;box-shadow:0 0 0 1px rgba(255,255,255,.45)}
#cursor-ring{position:fixed;width:38px;height:38px;border:1.5px solid rgba(0,162,217,.65);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s}
body:has(a:hover,button:hover,input:hover,textarea:hover,select:hover,label:hover) #cursor{width:18px;height:18px}
body:has(a:hover,button:hover,input:hover,textarea:hover,select:hover,label:hover) #cursor-ring{width:54px;height:54px;border-color:var(--cyan)}
@media (hover:none){#cursor,#cursor-ring{display:none}body{cursor:auto}}

/* ============ BOUTONS (repris intacts) ============ */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:999px;font-family:var(--ft);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:none;cursor:none;overflow:hidden;transition:color .3s,border-color .25s,background .25s}
.btn>*{position:relative;z-index:1}
.btn-icon{display:inline-block;transition:transform .3s}
.btn:hover .btn-icon{transform:rotate(-45deg)}
.btn-accent{background:var(--marine);color:var(--white)}
.btn-accent::before{content:'';position:absolute;inset:0;background:var(--cyan);transform:translateX(-101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0}
.btn-accent:hover::before{transform:translateX(0)}

/* ============ CADRES (panels) — marges de page très réduites (desktop) ============ */
.landing{height:100svh;height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--page-margin-y) var(--page-margin-x)}
.landing-grid{width:100%;height:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(16px,1.5vw,24px)}
.panel{position:relative;overflow:hidden;border-radius:var(--r-panel);height:100%;display:flex;flex-direction:column}

/* ---- Cadre FORMULAIRE (gauche) : CERCLE PLEIN décalé (jamais de dégradé) ---- */
.panel--form{background:var(--mist);border:1px solid rgba(0,162,217,.14)}
.bigfill{position:absolute;width:120vh;height:120vh;border-radius:50%;pointer-events:none;transition:transform 1.1s cubic-bezier(.22,.61,.36,1);will-change:transform;z-index:0}
.bigfill--cyan{background:var(--cyan);opacity:.08;left:-52vh;bottom:-52vh}
.panel--form:hover .bigfill--cyan{transform:translate(46px,-40px)}

/* ---- Cadre MÉDIA (droite) : DÉGRADÉ (jamais de cercle plein) ---- */
.panel--grad{background:linear-gradient(140deg,var(--marine) 0%,var(--teal) 145%)}
.grad-deco{position:absolute;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none;z-index:0;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.grad-deco.g1{width:460px;height:460px;top:-160px;right:-150px}
.grad-deco.g2{width:340px;height:340px;bottom:-150px;left:-120px;background:rgba(0,162,217,.14)}
.panel--grad:hover .grad-deco.g1{transform:translate(-34px,26px) scale(1.12)}
.panel--grad:hover .grad-deco.g2{transform:translate(30px,-24px) scale(1.16)}
.pg-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px}

/* ============ CONTENU — CADRE FORMULAIRE (gauche) ============ */
/* justify-content: SAFE center → centré quand ça rentre, mais si le contenu
   dépasse la hauteur du panneau, il s'aligne en haut (au lieu d'être coupé
   en haut de façon inatteignable) et reste accessible via le scroll interne. */
.form-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3vw,52px);min-height:0}
.form-eyebrow{font-family:var(--ft);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.form-title{font-family:var(--fh);font-size:clamp(28px,3vw,80px);font-weight:900;text-transform:uppercase;color:var(--marine);line-height:1;margin-bottom:10px}
.form-title em{font-style:normal;color:var(--teal)}
.form-lead{font-family:var(--ft);font-size:clamp(15px,16.67px - 0.139vw,16px);color:var(--ink-soft);line-height:1.7;max-width:720px;margin-bottom:30px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--ft);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--marine);margin-bottom:8px}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{width:100%;font-family:var(--ft);font-size:15px;color:var(--marine);background:var(--white);border:1.5px solid rgba(0,57,75,.12);border-radius:14px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;cursor:none}
.field textarea{min-height:130px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:rgba(0,57,75,.38)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,162,217,.12)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300394B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.form-submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-submit .btn{white-space:nowrap}
.form-note{font-family:var(--ft);font-size:12px;color:rgba(0,57,75,.5);line-height:1.5;flex:1;min-width:200px}
/* Confirmation : centrée dans l'encadré, apparition (translation Y vers le haut +
   opacité). fs-badge à gauche du h3 ; <p> dessous. L'encadré garde sa taille. */
.form-success{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:clamp(20px,4vw,40px);opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none;transition:opacity .55s ease,transform .55s ease,visibility 0s .55s}
.form-success.show{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .55s ease,transform .55s ease}
.fs-head{display:flex;align-items:center;justify-content:center;gap:16px}
.fs-badge{width:54px;height:54px;border-radius:50%;background:linear-gradient(150deg,var(--teal),var(--cyan));display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(0,162,217,.28);flex-shrink:0}
.fs-badge svg{width:26px;height:26px;stroke:#fff;stroke-width:3;fill:none}
.form-success h3{font-family:var(--fh);font-size:30px;font-weight:900;text-transform:uppercase;color:var(--marine);line-height:1}
.form-success p{font-family:var(--ft);font-size:15px;color:var(--ink-soft);line-height:1.7;max-width:440px;margin:0 auto}
/* Confirmation active : seul le form-success reste visible ; l'encadré garde sa taille */
.form-inner.show-success #contact-form,
.form-inner.show-success .form-eyebrow,
.form-inner.show-success .form-title,
.form-inner.show-success .form-lead{visibility:hidden}

/* ============ CONTENU — CADRE MÉDIA (droite) : vidéo plein fond + slogan centré ============ */
/* La vidéo occupe tout le fond du panel. Elle joue déjà en boucle (loop),
   muette (muted) et démarre seule (autoplay/playsinline). Tant qu'aucune
   source n'est fournie, le dégradé du panel sert de placeholder. */
.media-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Teinte bleue de la vidéo (couleurs de marque). `multiply` colore la vidéo
   en marine→teal→cyan et l'assombrit assez pour garder le slogan lisible.
   Pour ajuster l'intensité : montez/baissez les alphas (les .xx en fin de rgba). */
/* Teinte bleue de la vidéo (couleurs de marque), en opacité NORMALE : la vidéo
   reste pleinement opaque — l'overlay ne fait qu'ajouter la couleur par-dessus.
   Pas de mix-blend-mode ici (le mode `color`/`multiply` délavait la vidéo et la
   faisait paraître à moitié transparente). Ajustez l'intensité avec les alphas
   (.62 / .50 / .42) : plus haut = plus teinté, plus bas = vidéo plus visible. */
.media-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--marine);mix-blend-mode:hue;}
.media-overlay-2{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,57,75,.6);mix-blend-mode:hard-light;}
/* Léger voile pour renforcer la lisibilité du texte, par-dessus la teinte. */
.media-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,57,75,.28),rgba(0,57,75,.10) 45%,rgba(0,57,75,.32))}
.media-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:clamp(30px,3.2vw,54px);text-align:center}
.media-slogan{font-family:var(--fh);font-size:clamp(30px,3.4vw,45px);font-weight:900;text-transform:uppercase;letter-spacing:.01em;color:#fff;line-height:.98;max-width:18ch;text-shadow:0 2px 30px rgba(0,57,75,.35)}
/* Logo sous le slogan : complète la phrase, ~même taille que le texte, centré. */
/* Le logo suit la même échelle que le slogan (≈1,78× sa taille) : il plafonne à
   --logo-slogan-size sur desktop et rétrécit proportionnellement quand la fenêtre
   se réduit — mêmes points de bascule que .media-slogan (clamp 30/3.4vw/45). */
.media-logo-slogan{height:clamp(33px,6vw,var(--logo-slogan-size));width:auto;max-width:100%;margin-top:var(--logo-slogan-gap);object-fit:contain;filter:drop-shadow(0 2px 30px rgba(0,57,75,.35))}

/* Apparition à l'ouverture */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ============ RESPONSIVE ============ */
/* Sous 960px : deux colonnes + formulaire complet ne tiennent pas dans une
   seule fenêtre → on empile et on autorise le défilement (dégradation gracieuse). */
@media (max-width:960px){
  body{overflow:auto}
  .landing{height:auto;min-height:100svh;padding:24px}
  .landing-grid{grid-template-columns:1fr;height:auto;max-width:760px;gap:20px}
  .panel{height:auto}
  .form-inner{overflow:visible}
  .field textarea{min-height:110px;resize:vertical}
  .panel--media{min-height:clamp(280px,58vw,420px)}
}
/* À 720px et moins : marges de la page = 20px, contenu accoté sur ces marges (pleine largeur). */
@media (max-width:720px){
  .landing{padding:20px}
  .landing-grid{max-width:none}
}
@media (max-width:520px){
  :root{--r-panel:28px}
  .field-row{grid-template-columns:1fr;gap:0}
  .form-inner{padding:28px 22px}
  .media-inner{padding:28px 22px}
}
/* À 320px et moins : padding interne des cadres sur l'axe X = 20px. */
@media (max-width:320px){
  .form-inner{padding-left:20px;padding-right:20px}
  .media-inner{padding-left:20px;padding-right:20px}
}