:root{
  --ring:0 8px 30px rgba(180,83,9,.18);
  --bg-sand:#FFF7ED; --terra:#B45309; --mandarine:#F97316; --leaf:#65A30D; --trust:#2563EB; --muted:#6B7280;
}
body{background:var(--bg-sand)}
.hero{background:linear-gradient(180deg,#fff1e5 0%, transparent 80%)}
.card{box-shadow:var(--ring)}
blockquote{border-left:4px solid var(--terra);padding:10px 14px;background:#fff3e8}
a{color:var(--trust)} a:hover{color:var(--mandarine)}
/* === Pastilles par type (palette verts, subtil) === */
:root{
  --c-leaf:#b8d384;     /* vert clair */
  --c-deep:#385226;     /* vert foncé */
  --c-yellow:#ffd66b;   /* jaune */
  --c-orange:#f1ae41;   /* orange */
  --c-ivory:#f6f6e9;    /* blanc chaud */
  --c-brown:#5b4f47;    /* brun foncé */
}

/* Helpers */
.bg-leaf{ background-color:var(--c-leaf); }
.text-leaf{ color:var(--c-deep); }
.text-ink{ color:var(--c-brown); }
.text-muted{ color: color-mix(in srgb, var(--c-brown) 60%, white 40%); }

/* Bouton principal (CTA) */
.btn-primary{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.2rem; border-radius:999px;
  background:linear-gradient(135deg, var(--c-orange), var(--c-yellow));
  color:#1b1b1b; font-weight:700; box-shadow:0 8px 22px rgba(241,174,65,.25);
  transition:transform .18s ease, box-shadow .18s ease, opacity .2s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(241,174,65,.35); }

/* Hero */
.hero-faq{
  position:relative; overflow:hidden;
  background: radial-gradient(1200px 500px at 10% 0%, rgba(255,214,107,.35), transparent 60%),
              radial-gradient(900px 450px at 90% 10%, rgba(248,239,210,.6), transparent 65%),
              linear-gradient(180deg, var(--c-ivory), #ffffff);
}
.hero-faq .halo{
  position:absolute; inset:-10% -10% auto auto; width:60vw; height:60vw;
  background:radial-gradient(circle, rgba(241,174,65,.25) 0, transparent 60%);
  filter: blur(30px);
}

/* FAQ */
.faq-list{ max-width: 56rem; margin: 0 auto; }
.faq-item{ border:1px solid rgba(0,0,0,.06); border-radius:16px; background:#fff; }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:1rem 1.1rem; text-align:left; cursor:pointer; font-weight:600; color:var(--c-brown);
}
.faq-left{ display:flex; align-items:center; gap:.6rem; }
.faq-chip{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700;
  padding:.25rem .55rem; border-radius:999px; color:#1f2a1f; background: color-mix(in srgb, var(--c-leaf) 25%, white 75%);
}
.faq-answer{
  padding:0 1.1rem 1rem; color: color-mix(in srgb, var(--c-brown) 75%, white 25%);
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.faq-toggle{ width:20px; height:20px; transition: transform .2s ease; color:var(--c-deep); }
.faq-item[open] .faq-toggle{ transform:rotate(45deg); }

/* Section CTA bas de page */
.cta-floor{
  border:1px solid rgba(0,0,0,.06);
  background: linear-gradient(135deg, rgba(184,211,132,.25), rgba(255,214,107,.25));
  border-radius:20px; padding:1.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; justify-content:space-between;
}
/* Wrapper ratio 16:9, compatible partout */
.aspect-16-9 {
  position: relative;
  width: 100%;
  /* Fallback padding-top */
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 0.75rem; /* = rounded-xl */
  background: #f6f6e9;
}
.aspect-16-9 > img, 
.aspect-16-9 > picture > img,
.aspect-16-9 > source + img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Si tu as Tailwind 3.3+ tu peux aussi faire .aspect-[16/9] à la place,
   mais ce fallback marche partout, y compris iOS anciens. */


.type-card{ border-color: rgba(101,163,13,.18); }           /* liseré vert doux */
.type-card:hover{ box-shadow: 0 10px 30px rgba(101,163,13,.12); }

.type-dot{
  display:inline-block; width:10px; height:10px; border-radius:999px;
  margin-right:8px; transform:translateY(-1px);
}
.type-1{ background:var(--type1); } .type-2{ background:var(--type2); }
.type-3{ background:var(--type3); } .type-4{ background:var(--type4); }
.type-5{ background:var(--type5); } .type-6{ background:var(--type6); }
.type-7{ background:var(--type7); } .type-8{ background:var(--type8); }
.type-9{ background:var(--type9); }

/* Barre de saison (mandarine → terra) */
.season-bar{
  height:4px; border-radius:999px;
  background: linear-gradient(90deg, var(--mandarine), var(--terra));
  margin-bottom:14px;
}
/* Liens de nav avec soulignement fluide */
.navlink{position:relative;transition:color .2s ease;}
.navlink::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0%;
  background:linear-gradient(90deg,#65A30D,#B45309);transition:width .25s ease;
  border-radius:999px;
}
.navlink:hover::after{width:100%;}

/* Bouton pilule plus doux */
.btn-pill{box-shadow:0 6px 20px rgba(180,83,9,.18);}

/* Icône burger lignes */
.burger span{display:block;height:2px;width:22px;background:#0f172a;margin:5px 0;transition:transform .2s ease,opacity .2s ease;}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Badges "type" en dégradé (lisibles, compacts) */
.type-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px; border-radius:999px;
  font-weight:600; font-size:12px; line-height:1;
  color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.12);
  letter-spacing:.2px; white-space:nowrap;
}
.type-chip .dot{width:6px; height:6px; border-radius:999px; background:#fff; opacity:.9}

/* Dégradés par type (dominante "vert" nuancé pour cohérence) */
.grad-1{background:linear-gradient(90deg,#166534,#22C55E)}   /* pin → frais   */
.grad-2{background:linear-gradient(90deg,#15803D,#4ADE80)}   /* forêt → lime  */
.grad-3{background:linear-gradient(90deg,#16A34A,#A3E635)}   /* prairie → citron */
.grad-4{background:linear-gradient(90deg,#22C55E,#86EFAC)}   /* frais → menthe */
.grad-5{background:linear-gradient(90deg,#65A30D,#A3E635)}   /* olive → citron */
.grad-6{background:linear-gradient(90deg,#4D7C0F,#84CC16)}   /* mousse → lime */
.grad-7{background:linear-gradient(90deg,#047857,#34D399)}   /* émeraude → jade */
.grad-8{background:linear-gradient(90deg,#065F46,#10B981)}   /* sapin → vert mer */
.grad-9{background:linear-gradient(90deg,#0E7490,#14B8A6)}   /* teal profond → aqua */

/* Cartes types : léger relief + micro-hover */
.type-card{ border-color: rgba(101,163,13,.20); transition:transform .18s ease, box-shadow .18s ease }
.type-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(20,184,166,.12) }

/* Sous-titres des cartes pour mieux respirer */
.type-sub{ color:var(--muted); font-size:13px }
/* Section cozy : fond chaleureux subtilement texturé */
.section-cozy{
  background:
    radial-gradient(1200px 300px at 20% -40%, rgba(249,115,22,.10), transparent 50%),
    radial-gradient(900px 260px at 80% -30%, rgba(180,83,9,.10), transparent 50%),
    var(--bg-sand);
  border-radius: 24px;
  border: 1px solid rgba(101,163,13,.18);
  box-shadow: 0 12px 30px rgba(20,184,166,.08);
}

/* Carte offre : bandeau dégradé fin + hover doux */
.offer-card{
  background:#fff; border:1px solid rgba(101,163,13,.18); border-radius:20px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.offer-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(20,184,166,.12);
  border-color: rgba(101,163,13,.3);
}
.offer-head{
  height:6px; border-radius:20px 20px 0 0;
  background:linear-gradient(90deg, var(--leaf), var(--mandarine), var(--terra));
}
.offer-icon{
  width:42px; height:42px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(101,163,13,.15), rgba(249,115,22,.15));
  color:var(--terra);
}
.offer-chip{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background:rgba(101,163,13,.12); color:#065f46;
}
.offer-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:.6rem 1rem; border-radius:999px;
  background:linear-gradient(90deg, var(--terra), var(--mandarine));
  color:#fff; box-shadow:0 8px 22px rgba(180,83,9,.22);
}
.offer-cta:hover{ filter:brightness(1.03); }
/* Variantes de fond par offre */
.offer-bilan {
  background: linear-gradient(135deg, #ecfdf5, #f0fdfa); /* vert menthe doux */
}
.offer-orientation {
  background: linear-gradient(135deg, #fefce8, #fef9c3); /* jaune clair ensoleillé */
}
.offer-reconversion {
  background: linear-gradient(135deg, #fdf2f8, #fae8ff); /* rose/lilas doux */
}

/* Ajuste bordure et ombre */
.offer-card{
  border-radius:20px;
  border:1px solid rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.offer-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.08);
}
/* Offres colorées par icône */
.offer-bilan {
  background: linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 100%); /* vert tendre */
}
.offer-orientation {
  background: linear-gradient(135deg, #eff6ff 0%, #bae6fd 100%); /* bleu clair */
}
.offer-reconversion {
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fce7f3 100%); /* mandarine -> rose */
}

/* Ajuste lisibilité */
.offer-card {
  border-radius:20px;
  padding:1px; /* bordure "frame" dégradée */
  overflow:hidden;
}
.offer-inner {
  background:#fff;
  border-radius:18px;
  height:100%;
  display:flex; flex-direction:column;
  justify-content:space-between;
  transition:transform .18s ease, box-shadow .18s ease;
}
.offer-inner:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.08);
}
.faq-item{
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  background:#fff;
  transition:box-shadow .2s ease;
}
.faq-item:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.faq-icon{
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#ecfdf5,#bbf7d0);
  color:var(--leaf);
}
.faq-question{
  cursor:pointer; font-weight:600;
}
.faq-answer{ display:none; }
.faq-item.active .faq-answer{ display:block; }

.return-balloon {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px; font-weight:600;
  background:linear-gradient(135deg,#facc15,#fcd34d); /* sunflower */
  color:#78350f;
  box-shadow:0 4px 10px rgba(250,204,21,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.return-balloon:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(250,204,21,.5);
}
.return-balloon svg {
  animation:float 2s ease-in-out infinite;
}
@keyframes float {
  0%{ transform:translateY(0) }
  50%{ transform:translateY(-4px) }
  100%{ transform:translateY(0) }
}
/* Conteneur pleine largeur/hauteur */
.balloon-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* ne bloque pas les clics */
  z-index: -1; /* derrière le contenu */
}

/* Style d’un ballon */
.balloon {
  position: absolute;
  bottom: -100px;
  width: 30px;
  height: 40px;
  border-radius: 50% 50% 45% 55% / 60% 60% 40% 40%;
  opacity: 0.8;
  animation: float-up linear infinite;
}

/* Ficelle du ballon */
.balloon::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 2px;
  height: 20px;
  background: rgba(0,0,0,.2);
  transform: translateX(-50%);
}

/* Animation vers le haut */
@keyframes float-up {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: .9; }
  100% { transform: translateY(-120vh) rotate(10deg); opacity: 0; }
}
/* Wrapper responsive pour Google Forms */
.form-wrap { position: relative; width:100%; }
.form-wrap iframe{
  width:100%;
  min-height: 1100px;          /* ajuste si besoin selon la longueur du form */
  display:block;
  background:#fff;
}
@media (max-width: 480px){
  .form-wrap iframe{ min-height: 1350px; } /* sur mobile, le form est plus long */
}
.form-wrap iframe {
  width: 100%;
  height: 1600px; /* Ajuste selon la longueur réelle du formulaire */
  overflow: hidden;
  border: none;
}
@media(max-width:768px){
  .form-wrap iframe{ height: 2000px; }
}
/* Dropdown minimal, thèmes du site */
.dropdown-panel{
  position:absolute; left:0; top:calc(100% + 8px);
  min-width:260px; background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12);
  padding:8px; z-index:50;
  opacity:0; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease;
}
.dropdown.open .dropdown-panel{ opacity:1; transform:translateY(0); }
.dropdown-item{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .75rem; border-radius:10px; color:#5b4f47; text-decoration:none;
}
.dropdown-item:hover{ background:#fff7e0; } /* jaune doux */
.navbar{ overflow:visible; } /* au cas où un overflow:hidden bloquerait le panel */
/* Bandeau promo */
:root { --promo-h: 36px; } /* hauteur ajustée */

.promo-banner{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(90deg,#ffd66b,#f1ae41);
  color: #385226;
  font-weight: 600;
  font-size: 14px;
  height: var(--promo-h);

  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.promo-banner:hover{
  filter: brightness(1.05);
}

/* décale la nav et le contenu pour ne pas que ça se superpose */
header.site{
  position: sticky;
  top: var(--promo-h);
  z-index: 999;
}

body{
  padding-top: var(--promo-h);
}


/* Nav calée sous le bandeau + contenu décalé */
header.site{ position: sticky; top: var(--promo-h); z-index: 999; }
body{ padding-top: var(--promo-h); }

/* Mobile: empilement vertical si ça passe sur 2 lignes */
@media (max-width:640px){
  :root{ --promo-h: 52px; }
  .promo-inner{ flex-direction: column; align-items: center; gap: 8px; }
  .promo-text{ text-align: center; }
}
/* ===== Footer pro ===== */
.site-footer{
  background:
    radial-gradient(900px 240px at 85% 0%, rgba(249,115,22,.06), transparent 60%),
    radial-gradient(800px 200px at 0% 0%, rgba(184,211,132,.10), transparent 55%),
    linear-gradient(to top, #fafaf7, #ffffff);
  border-top:1px solid rgba(0,0,0,.06);
}

.footer-wrap{
  max-width: 1100px; margin: 0 auto; padding: 40px 16px;
  display: grid; gap: 28px;
  grid-template-columns: 1.2fr .8fr .8fr .9fr;
}
@media (max-width: 980px){
  .footer-wrap{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-wrap{ grid-template-columns: 1fr; }
}

.brand{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.brand-mark{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--c-yellow), var(--c-orange));
  box-shadow:0 6px 18px rgba(241,174,65,.25);
}
.brand-name{ font-weight:800; color:var(--c-brown); }
.brand-tag{ font-size:.9rem; color: color-mix(in srgb, var(--c-brown) 65%, white 35%); }
.brand-blurb{ color: color-mix(in srgb, var(--c-brown) 75%, white 25%); margin: 8px 0 14px; }

.col-title{ font-weight:700; color:var(--c-brown); margin-bottom:8px; }
.col-links{ list-style:none; padding:0; margin:0; }
.col-links li{ margin:6px 0; }
.col-links a{ color: color-mix(in srgb, var(--c-brown) 70%, white 30%); text-decoration:none; }
.col-links a:hover{ color: var(--c-deep); text-decoration: underline; }

.contact{ list-style:none; padding:0; margin:0; }
.contact li{ display:flex; align-items:center; gap:8px; margin:6px 0; color: var(--c-brown); }
.contact a{ color: color-mix(in srgb, var(--c-brown) 70%, white 30%); }
.contact a:hover{ color: var(--c-deep); text-decoration: underline; }

.footer-legal{
  border-top:1px dashed rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px; max-width:1100px; margin:0 auto;
  color: color-mix(in srgb, var(--c-brown) 65%, white 35%);
  font-size:.9rem;
}
.footer-legal .links a{ color: inherit; text-decoration:none; }
.footer-legal .links a:hover{ color: var(--c-deep); text-decoration: underline; }
.footer-legal .dot{ opacity:.45; margin: 0 6px; }

/* Harmonise la pilule CTA dans le footer */
.btn-pill{ padding:.7rem 1.05rem; font-weight:700; }
.media-block{ max-width: 860px; margin: 0 auto; padding: 12px 16px; position: relative; z-index: 1; }
.media-block h2{ text-align:center; margin: 0 0 12px; color: var(--c-brown,#333); }

/* Empêche les halos/gradients de recouvrir la vidéo */
.hero, .hero-faq { position: relative; z-index: 0; }
.hero::after, .hero-faq .halo { z-index: 0; pointer-events: none; }

/* La section vidéo crée sa propre pile et passe au-dessus */
.media-block.stack-fix { position: relative; z-index: 10; isolation: isolate; }

/* Habillage simple de la vidéo */
.media-block h2 { text-align:center; margin: 0 0 12px; color: var(--c-brown, #333); }
.video-wrap{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.video-wrap video{
  display:block; width:100%; height:auto; background:#000;
  /* annule tout masque hérité */
  -webkit-mask:none; mask:none; filter:none !important; mix-blend-mode:normal !important;
  pointer-events:auto;
}