/* web/styles.css */
:root{
  --cream:#FDFBF6; --cream2:#FBFBFA; --ink:#272521; --ink2:#333333;
  --olive:#4C5F44; --olive-d:#3c4d36; --sage:#D3DFD8; --gray:#5B5C5E;
  /* Doré du CRM : équivalent hex de oklch(0.78 0.045 92), de son survol et de
     son texte, pour que le CTA de la landing soit exactement la couleur des
     boutons du back-office. Écrit en hex et non en oklch() : la landing
     s'adresse au grand public, donc à un parc de navigateurs plus large. */
  --gold:#C2B797; --gold-d:#AFA485; --gold-fg:#1B1605;
  --radius:14px; --maxform:480px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Hanken Grotesk',system-ui,Arial,sans-serif;color:var(--ink);background:var(--ink)}
img{max-width:100%;display:block}

/* FOND VIDÉO PLEIN ÉCRAN (derrière toute la page) */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.bg__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Alternative YouTube (iframe, même classe `.bg__video` que la vidéo mp4) :
   `object-fit` ne s'applique pas à un `<iframe>` (ce n'est pas un élément
   remplacé au sens de la spec CSS), donc la règle ci-dessus ne suffit pas à
   le faire couvrir tout l'écran sans bandes noires. Technique standard :
   surdimensionner l'iframe en 16:9 puis le recentrer par transform ;
   `overflow:hidden` sur `.bg` (ci-dessus) rogne proprement le débordement. */
iframe.bg__video{width:177.78vh;height:56.25vw;min-width:100vw;min-height:100vh;top:50%;left:50%;transform:translate(-50%,-50%);border:0}
.bg__overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(39,37,33,.85) 0%,rgba(39,37,33,.55) 48%,rgba(39,37,33,.62) 100%)}

/* Desktop : colonne de contenu (gauche) plus large que le formulaire (55/45),
   pour laisser la zone de contenu occuper ~45 % de la page (voir .hero__content).
   Le response (< 1024px) repasse en une seule colonne via le media query plus bas
   — inchangé. */
.split{position:relative;z-index:1;display:grid;grid-template-columns:55% 45%;min-height:100vh;align-items:center}

/* HERO (texte par-dessus la vidéo) */
.hero{display:flex;align-items:center;justify-content:center;padding:48px;color:#fff}
.hero__content{max-width:520px}
/* Desktop uniquement : la zone de contenu s'élargit à 45 % de la largeur de
   page. En responsive (< 1024px) on garde le plafond 520px (une colonne). */
@media (min-width:1024px){.hero__content{max-width:45vw}}
.hero__logo{margin-bottom:28px;margin-left:-28px;width:min(380px,72%)}
.hero__title{font-size:clamp(28px,3.2vw,44px);line-height:1.08;font-weight:700;margin:0 0 14px;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.hero__subtitle{font-size:clamp(16px,1.4vw,20px);line-height:1.5;color:#f0ece3;margin:0 0 24px}
/* Marge basse (et non un bricolage sur .hero__texte) : sépare visuellement la
   liste de puces du texte libre qui la suit, quand les deux sont présents. */
.hero__points{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:12px}
/* Puce positionnée, li en bloc normal — et NON en flex : en flex, chaque
   fragment de texte devient un élément flex anonyme, si bien que le `gap`
   s'insérait aussi entre « les » et <span class="nowrap">Bouches-du-Rhône</span>
   (blanc parasite au milieu de la phrase), tandis que le supprimer aurait collé
   les deux mots (le flex rogne l'espace de fin d'un fragment). En bloc, le texte
   se compose normalement, quel que soit le balisage inline qu'il contient. */
.hero__points li{position:relative;padding-left:28px;font-size:16px;line-height:1.4;color:#f4f1ea}
.hero__points li::before{content:"🔔";position:absolute;left:0;top:0;font-size:18px;line-height:1.4}
/* Paragraphes de texte libre (contenu.texte), entre les puces et le CTA :
   même famille que .hero__subtitle mais un ton plus discret, pour ne pas
   concurrencer le sous-titre. */
.hero__texte{font-size:15px;line-height:1.6;color:#f0ece3;margin:0 0 14px}
.hero__cta{display:inline-block;margin-top:24px;padding:12px 22px;border:1.5px solid rgba(255,255,255,.7);border-radius:10px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.hero__cta:hover{background:#fff;color:var(--ink);border-color:#fff}
.nowrap{white-space:nowrap}

/* FORM (carte translucide posée sur la vidéo) */
.formside{display:flex;align-items:center;justify-content:center;padding:24px 32px}
.card{width:100%;max-width:var(--maxform);background:rgba(255,255,255,.90);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:24px 28px;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.40);border:1px solid rgba(255,255,255,.5)}
.card__title{font-size:26px;font-weight:700;margin:0 0 4px}
.card__lead{color:var(--gray);font-size:14px;margin:0 0 14px}
form{display:grid;gap:11px}
/* Conteneur des champs de formulaire : flex-wrap plutôt qu'une grille à
   colonnes fixes (l'ancienne `.row`, deux colonnes rigides) — un `flex-basis`
   par champ (voir `.field--*` ci-dessous) permet de mélanger 33/50/100 % sur
   une même ligne, ce qu'une grille à deux colonnes ne sait pas faire (elle ne
   gère qu'un split 50/50 uniforme). */
.champs{display:flex;flex-wrap:wrap;gap:11px 14px}
.field{display:grid;gap:4px;flex:1 1 100%;min-width:0}
.field--33{flex-basis:calc(33.333% - 10px)}
.field--50{flex-basis:calc(50% - 7px)}
.field--100{flex-basis:100%}
label{font-size:13px;font-weight:500}
input,select{font:inherit;padding:9px 12px;border:1px solid #ddd6c8;border-radius:10px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus{outline:3px solid rgba(76,95,68,.25);border-color:var(--olive)}
.check label{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:13px;color:var(--ink2)}
.check input{width:auto;margin-top:2px}
/* Civilité en boutons radio (pas un menu déroulant) : les deux options en
   ligne, cases agrandies pour rester atteignables du pouce sur mobile (même
   logique que `.date-option input` plus bas). */
.civilite-group{display:flex;flex-wrap:wrap;gap:8px 20px}
.civilite-group label{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--ink2);cursor:pointer}
.civilite-group input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:var(--olive)}
.btn{background:var(--gold);color:var(--gold-fg);border:0;border-radius:10px;padding:13px 18px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--gold-d)}
.btn[disabled]{opacity:.6;cursor:progress}
.legal{font-size:11.5px;color:var(--gray);margin:0;line-height:1.4}
.legal a{color:var(--olive)}
.status{font-size:14px;padding:0;margin:0}
.status.ok{color:var(--olive);font-weight:600}
.status.err{color:#b3261e;font-weight:600}
.field input:invalid.touched,.field select:invalid.touched{border-color:#b3261e}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.turnstile{min-height:0}

/* BLOC DE DATES (fieldset posé sur la carte du formulaire) : mêmes couleurs
   de bordure que les champs (#ddd6c8) et --radius (variable déjà déclarée
   pour la famille de rayons, jusqu'ici inutilisée), pour qu'il se fonde dans
   la carte au lieu de trancher avec elle. Le menu déroulant lui-même
   (`#date_souhaitee`) réutilise les styles génériques `.field`/`select`
   ci-dessus : aucune règle dédiée n'est nécessaire ici.*/
.dates{border:1px solid #ddd6c8;border-radius:var(--radius);margin:0;padding:12px 14px 14px}
.dates legend{padding:0 6px;font-size:13px;font-weight:600;color:var(--ink2)}

/* PAGE MERCI (contenu centré blanc par-dessus la vidéo) */
.merci{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;text-align:center;color:#fff}
.merci__inner{max-width:560px}
.merci__logo{width:min(320px,72%);margin:0 auto 28px}
.merci__title{font-size:clamp(26px,3.4vw,40px);font-weight:700;margin:0 0 14px;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.merci__text{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:#f0ece3;margin:0 0 30px}
.merci__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.merci__btn{display:inline-block;text-decoration:none;padding:13px 24px;border-radius:10px;font-size:16px;font-weight:600;transition:background .2s,opacity .2s}
.merci__btn--linkedin{background:#0A66C2;color:#fff}
.merci__btn--linkedin:hover{opacity:.9}
.merci__btn--concept{background:#fff;color:var(--ink)}
.merci__btn--concept:hover{background:#f0ece3}
.merci__home{display:inline-block;margin-top:26px;color:#d8d2c6;font-size:13px;text-decoration:none}
.merci__home:hover{text-decoration:underline;color:#fff}

/* PARTAGE (page merci) : boucle de croissance — reprend l'esprit visuel de
   `.merci__actions`/`.merci__btn` ci-dessus (mêmes gaps, mêmes rayons), avec
   ses propres classes car ce ne sont pas les mêmes liens (destination et
   comportement différents : partage de l'accueil vs suivi/CTA éditorial). */
.merci__partage{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.merci__partage-titre{font-size:14px;font-weight:600;color:#f0ece3;margin:0 0 14px}
.merci__partage-boutons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.merci__share-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:10px 18px;border-radius:10px;font:inherit;font-size:14px;font-weight:600;border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;transition:background .2s,opacity .2s}
.merci__share-btn:hover{background:rgba(255,255,255,.24)}
.merci__share-btn--linkedin{background:#0A66C2}
.merci__share-btn--linkedin:hover{background:#0A66C2;opacity:.9}
.merci__share-btn--whatsapp{background:#25D366;color:#123524}
.merci__share-btn--whatsapp:hover{background:#25D366;opacity:.9}
.merci__share-btn--email{background:#fff;color:var(--ink)}
.merci__share-btn--email:hover{background:#f0ece3}
.merci__share-btn--copier{background:var(--gold);color:var(--gold-fg)}
.merci__share-btn--copier:hover{background:var(--gold-d)}
.merci__partage-statut{min-height:18px;font-size:13px;color:var(--sage);margin:10px 0 0}

/* BANDEAU CONSENTEMENT COOKIES */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 24px;padding:16px 24px;background:rgba(39,37,33,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 -8px 30px rgba(0,0,0,.35)}
.cookie-banner__text{margin:0;color:#f4f1ea;font-size:13.5px;line-height:1.5;max-width:720px}
.cookie-banner__text a{color:#cdd8cf;text-decoration:underline}
.cookie-banner__actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-btn{padding:10px 20px;border-radius:9px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:0;transition:background .2s,opacity .2s}
.cookie-btn--primary{background:var(--olive);color:#fff}
.cookie-btn--primary:hover{background:var(--olive-d)}
.cookie-btn--ghost{background:transparent;color:#f4f1ea;border:1.5px solid rgba(255,255,255,.5)}
.cookie-btn--ghost:hover{background:rgba(255,255,255,.12)}

/* RESPONSIVE */
@media (max-width:1023px){
  .split{grid-template-columns:1fr;align-items:stretch}
  .hero{padding:40px 24px 16px}
  .formside{padding:8px 18px 32px}
}
@media (max-width:560px){
  /* Sous 560px, tout champ repasse en pleine largeur : une landing se lit
     d'abord au téléphone, où un champ à un tiers ou une moitié de ligne
     deviendrait trop étroit pour être saisi confortablement. */
  .field--33,.field--50{flex-basis:100%}
  .card__title{font-size:23px}
  .card{padding:20px}
  .hero__logo{margin-left:-25px}
}
@media (prefers-reduced-motion:reduce){
  .bg__video{display:none}
}