/* =========================================================================
   AGRO CMAG 1996 – 30 ans de la promotion
   Feuille de style unique du site (aucun style en ligne dans les pages)
   Couleurs reprises du logo de la faculté AGRO Louvain
   ========================================================================= */

:root{
  --teal:#147a8f;  --teal-d:#0f6273;
  --green:#7aae1c; --green-d:#5f9418;
  --ink:#233038;   --dark:#173b1f;
  --bg:#f6f7f0;    --card:#ffffff;  --line:#e3e7d6;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Work Sans',sans-serif; color:var(--ink); background:var(--bg); overflow-x:hidden; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--green); }
::selection{ background:#c9e08a; color:var(--dark); }

/* ---------- Titres ---------- */
.title{ font-family:'Playfair Display',serif; font-weight:600; color:var(--dark); line-height:1.15; margin:0; }
.title--xl{ font-size:clamp(30px,4.4vw,46px); line-height:1.12; }
.title--lg{ font-size:clamp(28px,4vw,42px); }
.title--md{ font-size:clamp(26px,3.6vw,38px); }
.title--pay{ font-size:clamp(26px,3.4vw,36px); }
.title--sm{ font-size:24px; margin-bottom:6px; }
.title--white{ color:#fff; }

/* ---------- Textes ---------- */
.eyebrow{ font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--green); font-weight:700; }
.eyebrow--teal{ color:var(--teal); }
.eyebrow--light{ color:#a8cf5f; }
.lead{ font-size:18px; line-height:1.75; color:#42535c; }
.lead--sm{ font-size:16px; }
.note{ font-size:13px; color:#7a8a80; }
.note--center{ text-align:center; }
.rule{ display:inline-block; width:26px; height:1px; background:var(--teal); vertical-align:middle; }
.ic-green{ color:var(--green); }

/* ---------- Conteneurs de section ---------- */
.section{ padding:84px 24px; }
.section--top{ padding-top:48px; }
.section-tight{ padding:0 24px 84px; }
.container-760{ max-width:760px; margin:0 auto; }
.container-1040{ max-width:1040px; margin:0 auto; }

/* ---------- Barre du haut ---------- */
.topbar{ position:sticky; top:0; z-index:40; background:rgba(246,247,240,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; }
.topbar__brand{ display:flex; align-items:center; gap:12px; }
.topbar__logo{ height:40px; width:auto; display:block; }
.topbar__name{ font-weight:600; letter-spacing:.02em; color:var(--teal); font-size:15px; }
.btn-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--green); color:#fff!important; padding:10px 18px; border-radius:999px; font-weight:600; font-size:14px; }
.btn-cta:hover{ background:var(--green-d); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:76px 24px 88px; text-align:center; background:radial-gradient(1200px 600px at 50% -10%,#e9f2d6 0%,var(--bg) 60%); overflow:hidden; }
.hero__inner{ max-width:840px; margin:0 auto; position:relative; animation:floatUp .8s ease both; }
.hero__logo{ height:96px; width:auto; margin:0 auto 26px; display:block; }
.hero__eyebrow{ margin-bottom:18px; }
.hero h1{ font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(44px,7vw,84px); line-height:1.02; margin:0; color:var(--dark); }
.hero__accent{ color:var(--green); }
.hero__dot{ color:var(--teal); }
.hero__tagline{ font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(19px,2.5vw,26px); color:#41525b; margin:20px 0 0; }
.hero__meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px; margin-top:34px; font-size:16px; color:#3a4a53; font-weight:500; }

/* Feuilles décoratives */
.deco{ position:absolute; pointer-events:none; transform-origin:bottom center; }
.float{ opacity:.08; color:var(--green); animation:leafSway 7s ease-in-out infinite; }
.float--leaf{ top:40px; left:8%; font-size:120px; }
.float--wheat{ bottom:30px; right:9%; font-size:90px; color:var(--teal); opacity:.07; animation-duration:9s; }

@keyframes leafSway{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }
@keyframes floatUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(122,174,28,.5); } 70%{ box-shadow:0 0 0 18px rgba(122,174,28,0); } 100%{ box-shadow:0 0 0 0 rgba(122,174,28,0); } }

/* ---------- Compte à rebours ---------- */
.cd{ display:flex; justify-content:center; gap:12px; margin-top:44px; flex-wrap:wrap; }
.cd__cell{ min-width:92px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 10px; box-shadow:0 10px 30px -18px rgba(20,122,143,.4); }
.cd__num{ font-family:'Playfair Display',serif; font-weight:700; font-size:38px; line-height:1; color:var(--teal); }
.cd__lab{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#7a8a80; margin-top:8px; }

/* ---------- Intro ---------- */
.intro__title{ margin:0 0 26px; }
.intro__p{ margin:0 0 20px; }
.intro__p:last-child{ margin:0; }

/* ---------- Panneau « soirée en bref » ---------- */
.panel{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--teal) 0%,var(--teal-d) 100%); border-radius:28px; padding:clamp(30px,5vw,56px); color:#eaf6f0; }
.panel__deco{ top:-30px; right:-20px; font-size:200px; color:#fff; opacity:.05; }
.panel__sub{ color:#bfe0d8; margin:0 0 34px; font-size:16px; }
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
.fact{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:22px; }
.fact__ic{ width:44px; height:44px; border-radius:12px; background:var(--green); display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; margin-bottom:14px; }
.fact__k{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#9fd0c8; margin-bottom:6px; }
.fact__v{ font-size:18px; font-weight:600; color:#fff; line-height:1.3; }
.fact__n{ font-size:13px; color:#bfe0d8; margin-top:4px; }
.notice{ display:flex; align-items:flex-start; gap:14px; margin-top:26px; background:rgba(122,174,28,.16); border:1px solid rgba(122,174,28,.4); border-radius:16px; padding:18px 20px; }
.notice__ic{ color:#c6e88a; font-size:18px; margin-top:2px; }
.notice__p{ margin:0; font-size:15px; line-height:1.6; color:#eaf6f0; }

/* ---------- Bloc paiement ---------- */
.pay{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; align-items:center; padding:clamp(26px,4vw,44px); }
.pay__title{ margin:0 0 16px; }
.pay__p{ margin:0 0 14px; }
.pay__p:last-child{ margin:0; }
.pay__aside{ text-align:center; }
.qr-badge{ display:inline-flex; align-items:center; justify-content:center; width:150px; height:150px; border-radius:24px; background:#f0f5e2; border:2px dashed #b6cf7d; color:var(--green); font-size:58px; animation:pulseRing 2.4s infinite; }
.qr-badge__note{ font-size:13px; color:#7a8a80; margin:16px 0 0; }

/* ---------- Cartes ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:24px; }
.shadow-soft{ box-shadow:0 30px 60px -40px rgba(20,122,143,.5); }

/* ---------- Formulaire ---------- */
.formcard{ max-width:720px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:26px; overflow:hidden; box-shadow:0 40px 80px -50px rgba(20,122,143,.55); }
.formcard--merci{ max-width:760px; }
.formcard__head{ background:linear-gradient(135deg,var(--green),var(--green-d)); padding:30px clamp(24px,4vw,42px); color:#fff; }
.formcard__eyebrow{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; opacity:.85; margin-bottom:8px; }
.formcard__hint{ margin:10px 0 0; font-size:14px; color:#eaf6d9; }
.formcard__hint strong{ color:#fff; font-weight:700; }
.formcard__body{ padding:clamp(24px,4vw,42px); }
.form-label{ font-size:13px; font-weight:600; color:#33434c; margin-bottom:7px; }
.req{ color:#cf3b3b; }
.form-control{ border:1px solid #d7ddc9; border-radius:12px; padding:13px 14px; font-size:15px; color:var(--ink); background:#fbfcf7; }
.form-control:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(122,174,28,.18); background:#fff; }
.is-invalid.form-control{ border-color:#cf3b3b; box-shadow:0 0 0 3px rgba(207,59,59,.12); }
.consent{ display:flex; align-items:flex-start; gap:11px; margin-top:24px; cursor:pointer; font-size:14px; color:#42535c; line-height:1.5; }
.consent__box{ margin-top:3px; width:18px; height:18px; accent-color:var(--green); flex:none; }
.btn-submit{ width:100%; border:none; cursor:pointer; background:var(--teal); color:#fff; font-size:17px; font-weight:600; padding:17px; border-radius:14px; margin-top:26px; display:inline-flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 16px 30px -16px rgba(20,122,143,.8); transition:transform .15s,background .2s; }
.btn-submit:hover{ background:var(--teal-d); transform:translateY(-2px); color:#fff; }

/* ---------- Plan & accès ---------- */
.plan__head{ text-align:center; margin-bottom:30px; }
.plan__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.map-frame{ border-radius:22px; overflow:hidden; border:1px solid var(--line); min-height:320px; box-shadow:0 24px 50px -34px rgba(20,122,143,.5); }
.map-frame iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }
.access-list{ display:flex; flex-direction:column; gap:16px; }
.access-item{ display:flex; gap:16px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; }
.access-item__ic{ width:44px; height:44px; flex:none; border-radius:12px; background:#eaf2d8; color:var(--green-d); display:flex; align-items:center; justify-content:center; font-size:18px; }
.access-item__title{ font-weight:600; color:var(--dark); margin-bottom:4px; }
.access-item__text{ font-size:14px; color:#5a6a63; line-height:1.55; }

/* ---------- Contact ---------- */
.contact{ position:relative; overflow:hidden; max-width:720px; margin:0 auto; text-align:center; background:var(--dark); border-radius:26px; padding:clamp(34px,5vw,56px); color:#eaf6d9; }
.contact__deco{ bottom:-30px; left:-10px; font-size:150px; color:var(--green); opacity:.1; }
.contact__inner{ position:relative; }
.contact__p{ font-size:16px; line-height:1.7; color:#cfe3b7; margin:0 auto 26px; max-width:480px; }
.contact__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.pill{ display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:999px; font-weight:600; }
.pill--green{ background:var(--green); color:#fff!important; }
.pill--ghost{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff!important; }
.pill--home{ border:1px solid #cdd6bd; color:#5a6a63; margin-top:22px; }

/* ---------- Pied de page ---------- */
.foot{ background:#0f2c17; color:#9db98a; padding:40px 24px; text-align:center; }
.foot__logo{ height:44px; background:#fff; padding:8px 12px; border-radius:10px; margin-bottom:16px; }
.foot__p1{ margin:0 0 6px; font-size:15px; color:#cfe3b7; }
.foot__p2{ margin:0; font-size:13px; color:#7d9a6c; }

/* ---------- Remerciement / QR-code ---------- */
.merci-head{ background:linear-gradient(135deg,var(--teal),var(--teal-d)); padding:40px clamp(24px,4vw,42px); color:#fff; text-align:center; }
.merci-head__p{ margin:12px 0 0; font-size:16px; color:#cfeae3; line-height:1.6; }
.check{ width:70px; height:70px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 18px; box-shadow:0 0 0 8px rgba(122,174,28,.25); color:#fff; }
.merci-body{ padding:clamp(26px,4vw,44px); text-align:center; }
.merci-body__lead{ font-size:15px; color:#5a6a63; margin:0 auto 24px; max-width:440px; line-height:1.6; }
.merci-body__thanks{ font-size:14px; color:#5a6a63; margin:24px auto 0; max-width:460px; line-height:1.65; }
.qr-frame{ display:inline-block; padding:18px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 20px 40px -28px rgba(20,122,143,.6); }
.qr-frame__box{ width:220px; height:220px; display:flex; align-items:center; justify-content:center; }
.qr-frame__box svg{ width:220px; height:220px; }
.paytable{ max-width:440px; margin:26px auto 0; text-align:left; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:20px; }
.paytable__row{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid #e8ebdd; font-size:14px; }
.paytable__row:last-child{ border-bottom:none; }
.paytable__k{ color:#7a8a80; }
.paytable__v{ font-weight:600; }