/* =========================
   03-components.css
   Brand/Nav/Buttons/Cards/Modules/Forms/Lists + shared components
========================= */

/* Brand */
.brand{
    display:flex;
    align-items:center;
    gap: 12px;
    text-decoration:none;
    color: var(--text);
  }
  
  .brand__logo{
    width:100px;
    height:56px;
    object-fit: contain;
    padding: 4px;
    border-radius: 10px;
    background-color: black;
  }
  
  .brand__name{
    font-weight: 600;
    letter-spacing: -.2px;
    font-size: 18px;
  }
  
  .brand__meta{
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px;
    font-weight: 200;
  }
  
  /* Nav */
  .nav{ display:flex; align-items:center; gap: 10px; }
  
  .nav__toggle{
    display:none;
    width:44px; height:44px;
    border-radius: 14px;
    border:1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow2);
    cursor:pointer;
  }
  
  .nav__menu{
    display:flex;
    align-items:center;
    gap: 8px;
  }
  
  .nav__menu a{
    text-decoration:none;
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  
  .nav__menu a i{ margin-right: 8px; color: rgba(15,23,42,.62); }
  .nav__menu a:hover{ background: rgba(15,23,42,.06); }
  
  /* Flag icon */
  .flag-img{
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 4px;
    margin-left: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
  }
  
  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    text-decoration:none;
    font-weight: 600;
    cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  
  .btn:active{ transform: translateY(1px); }
  
  .btn--primary{
    background: linear-gradient(135deg, rgba(53,200,74,.96), rgba(255,230,0,.92));
    color: #0b0f12;
    box-shadow: 0 18px 30px rgba(53,200,74,.20);
    float: right;
    margin-top: 30px;
  }
  
  .btn--outline{
    background: rgba(255,255,255,.92);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow2);
  }
  
  .btn--dark{
    background: linear-gradient(135deg, rgba(255, 252, 47, 0.96), rgba(94, 207, 70, 0.87));
    color:#fff;
  }
  
  .btn--accent{
    background: rgba(255,230,0,.28);
    border-color: rgba(255,230,0,.30);
    color: var(--text);
  }
  
  /* Chip */
  .chip{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.90);
    border: 1px solid var(--border);
    box-shadow: var(--shadow2);
    color: rgba(15,23,42,.82);
    font-weight: 600;
    font-size: 13px;
  }
  
  .chip__sep{ opacity:.55; }
  
  /* KPIs */
  .kpis{
    display:flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
  }
  
  .kpi{
    display:flex;
    gap: 10px;
    align-items:center;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--border);
    box-shadow: var(--shadow2);
  }
  
  .kpi i{
    width: 38px; height: 38px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(53,200,74,.14);
    border: 1px solid rgba(53,200,74,.18);
  }
  
  .kpi__title{
    font-size: 12px;
    color: rgba(15,23,42,.62);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 600;
  }
  
  .kpi__value{ font-weight: 600; }
  
  /* Cards */
  .card{

    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 18px;
    background: radial-gradient(circle at 30% 20%, rgba(255,230,0,.28), transparent 48%), radial-gradient(circle at 85% 25%, rgba(47,230,92,.22), transparent 50%), radial-gradient(circle at 75% 85%, rgba(57,210,255,.20), transparent 55%) !important;
  opacity: .95 !important;
  }
  
  .card--soft{ background: rgba(255,255,255,.90); }
  
  .card__top{ margin-bottom: 10px; }
  .card__title{ margin:0; font-weight: 600; letter-spacing: -.2px; }
  .card__sub{ margin: 6px 0 0; color: var(--muted); }
  
  .quote{
    margin: 12px 0 0;
    color: rgba(15,23,42,.78);
    line-height: 1.8;
    font-weight: 200;
  }
  
  .card__actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
  }
  
  .quick{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
  }
  
  .quick a{
    text-decoration:none;
    color: rgba(15,23,42,.88);
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.92);
  }
  
  .quick a:hover{ background: rgba(15,23,42,.05); }
  
  /* Modules programme */
  .module{
    background: rgba(255,255,255,.96);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow2);
    padding: 18px;
    position: relative;
    overflow:hidden;
  }
  
  .module::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(460px 220px at 10% 0%, rgba(53,200,74,.14), transparent 60%),
      radial-gradient(460px 220px at 90% 10%, rgba(255,230,0,.14), transparent 60%);
    pointer-events:none;
  }
  
  .module > *{ position:relative; z-index:1; }
  
  .module__top{ display:flex; gap: 12px; align-items:flex-start; margin-bottom: 10px; }
  
  .module__icon{
    width: 46px; height: 46px;
    border-radius: 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,230,0,.26);
    border: 1px solid rgba(255,230,0,.30);
  }
  
  .module h3{ margin:0;}
  
  .module__tag{
    margin: 6px 0 0;
    color:rgb(45, 41, 30);
    font-size: 13px;
    font-weight: 600;
  }
  
  /* List */
  .list{
    list-style: none;
    padding: 0;
    margin: 19px 30px 0px;
    display: grid;
    gap: 10px;
  }
  
  .list li{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    color: rgba(15,23,42);
    line-height: 1.6;
  }
  
  .list li i{
    margin-top: 3px;
    width: 20px;
    color: rgb(6, 12, 26);
  }
  
  .module__footer{ margin-top: 14px; }
  
  .highlight{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(53,200,74,.12);
    border: 1px solid rgba(53,200,74,.20);
    color: rgba(15,23,42,.88);
  }
  
  /* Priorities card */
  .priority{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--border);
    box-shadow: var(--shadow2);
  }
  
  .priority__icon{
    width: 46px; height: 46px;
    border-radius: 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(53,200,74,.14);
    border: 1px solid rgba(53,200,74,.20);
  }
  
  .priority h3{ margin: 0; font-weight: 600; }
  .priority p{ margin: 8px 0 0; color: rgba(15,23,42,.76); line-height: 1.7; }
  
  /* News */
  .post{
    background: rgba(255,255,255,.96);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow2);
    padding: 18px;
  }
  
  .post__meta{
    color: rgba(15,23,42,.66);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 10px;
  }
  
  .post h3{ margin: 0 0 8px; font-weight: 600; }
  .post p{ margin: 0 0 12px; color: rgba(15,23,42,.76); line-height: 1.7; }
  
  .link{
    color: rgb(37, 56, 18);
    font-weight: 600;
    text-decoration:none;
    float:right;
  }
  
  .link:hover{ color: rgb(216, 167, 6); }
  
  /* Events */
  .event{
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow2);
    padding: 18px;
    display:flex;
    gap: 12px;
    align-items:stretch;
    background: radial-gradient(circle at 30% 20%, rgba(255,230,0,.28), transparent 48%), radial-gradient(circle at 85% 25%, rgba(47,230,92,.22), transparent 50%), radial-gradient(circle at 75% 85%, rgba(57,210,255,.20), transparent 55%) !important;
  opacity: .95 !important;
  }
  
  .event__date{
    width: 70px;
    border-radius: 18px;
    background: rgb(114, 192, 0);
    border: 1px solid rgba(15,23,42,.08);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: 10px 8px;
  }
  
  .event__day{ font-size: 22px; font-weight: 600; }
  
  .event__month{
    font-size: 12px;
    color: rgba(15,23,42,.66);
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
  }
  
  .event__body h3{ margin: 0 0 8px; }
  .event__body p{ margin: 0; color: rgba(15,23,42,.76); line-height: 1.7; }
  
  /* Engage mini icon */
  .card__miniIcon{
    width: 46px; height: 46px;
    border-radius: 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,230,0,.24);
    border: 1px solid rgba(255,230,0,.28);
    margin-bottom: 10px;
  }
  
  .card h3{ margin: 0 0 8px; }
  .card p{ margin: 0 0 12px; color: rgba(15,23,42,.76); line-height: 1.7; }
  
  .inlineForm{ display:flex; gap: 10px; }
  
  .inlineForm input{
    flex: 1;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    outline:none;
    font: inherit;
    font-weight: 200;
  }
  
  /* Forms */
  .form{
    background: rgba(255,255,255,.96);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow2);
    padding: 18px;
  }
  
  .row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  .field{ margin-bottom: 12px; }
  
  label{
    display:block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 13px;
    color: rgba(15,23,42,.78);
  }
  
  input, select, textarea{
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    outline:none;
    font: inherit;
    font-weight: 200;
  }
  
  input:focus, select:focus, textarea:focus{
    border-color: rgba(53,200,74,.40);
    box-shadow: var(--focus-ring);
  }
  
  /* Info box */
  .infoBox{
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow2);
    padding: 18px;
    background: radial-gradient(circle at 30% 20%, rgba(255,230,0,.28), transparent 48%), radial-gradient(circle at 85% 25%, rgba(47,230,92,.22), transparent 50%), radial-gradient(circle at 75% 85%, rgba(57,210,255,.20), transparent 55%) !important;
  opacity: .95 !important;
  }
  
  .infoBox h3{ margin: 0 0 12px; font-weight: 600; }
  
  .infoLine{
    display:flex;
    justify-content:space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15,23,42,.04);
    border: 1px solid rgba(15,23,42,.08);
    margin-bottom: 10px;
  }
  
  .infoLine span{
    color: rgba(15,23,42,.66);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
  }
  
  .infoLine b{ font-weight: 600; }
  
  .infoNote{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,230,0,.18);
    border: 1px solid rgba(255,230,0,.22);
    color: rgba(15,23,42,.82);
  }
  
  .infoNote i{ margin-top: 2px; }
  
  /* Responsive components */
  @media (max-width: 820px){
    .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; }
  
    .nav__menu{
      position:absolute;
      right: 28px;
      top: 76px;
      width: min(520px, calc(100vw - 56px));
      display:none;
      flex-direction: column;
      align-items: stretch;
      padding: 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.96);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }
  
    .nav__menu.is-open{ display:flex; }
  
    .row{ grid-template-columns: 1fr; }
    .list{ margin: 16px 14px 0px; }
  }
  
/* =========================
   NAV DROPDOWN PRO (desktop + mobile)
========================= */

/* les items top-level */
.navItem{
  position: relative;              /* 🔥 indispensable : ancre le dropdown */
  display: inline-flex;
  align-items: center;
}

/* dropdown sous-menu : hors flux => ne s'affiche plus inline */
.navSub{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
  display: none;                   /* caché par défaut */
  flex-direction: column;
  gap: 6px;
  z-index: 9999;
}

/* items du sous-menu */
.navSub__link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  background: transparent;
}

/* hover sur sous-liens */
.navSub__link:hover{
  background: rgba(15,23,42,.06);
}

/* desktop : hover/focus = ouvre */
@media (hover: hover) and (pointer: fine){
  .navItem--hasSub:hover > .navSub,
  .navItem--hasSub:focus-within > .navSub{
    display: flex;
  }
}

/* mobile/touch : ouverture par classe JS */
.navItem.is-open > .navSub{
  display: flex;
}


/* =========================================================
   NAV 2026 (futuriste, sobre, pas trop vert)
   - active + hover : glass + neon soft
   - Contact : même style que les autres liens
========================================================= */

/* Base links nav */
.nav__menu a.navLink{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  text-decoration: none;
  color: var(--text);
  font-weight: 650;
  font-size: 14px;

  padding: 10px 12px;
  border-radius: 12px;

  border: 1px solid transparent;
  background: transparent;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .14s ease,
    color .18s ease;
}

.nav__menu a.navLink i{
  margin-right: 0;
  color: rgba(15,23,42,.65);
  transition: color .18s ease;
}

/* Hover (desktop) */
@media (hover:hover) and (pointer:fine){
  .nav__menu a.navLink:hover{
    background: linear-gradient(135deg, rgba(255, 252, 47, 0.96), rgba(94, 207, 70, 0.87));
    border-color: rgba(15,23,42,.08);
  }
}

/* =========================
   ACTIVE futuriste (2026)
   -> classe .is-active (tu l’as déjà)
========================= */
.nav__menu a.navLink.is-active{
  color: rgba(7, 15, 20, .98);
  border-color: rgba(120, 240, 210, .35);
  background: linear-gradient(135deg, rgba(255, 252, 47, 0.96), rgba(94, 207, 70, 0.87));

  /* glassy */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 10px 30px rgba(15,23,42,.10),
    0 0 0 1px rgba(120,240,210,.18) inset;
}

.nav__menu a.navLink.is-active i{
  color: rgba(7, 25, 30, .85);
}

/* petit glow animé seulement sur "is-open" ou active (option) */
@keyframes navNeonPulse {
  0%   { box-shadow: 0 10px 30px rgba(15,23,42,.10), 0 0 0 rgba(120,240,210,0); }
  50%  { box-shadow: 0 14px 34px rgba(15,23,42,.12), 0 0 26px rgba(120,240,210,.35); }
  100% { box-shadow: 0 10px 30px rgba(15,23,42,.10), 0 0 0 rgba(120,240,210,0); }
}

/* Quand un dropdown est ouvert : futuriste + stable */
.navItem.is-open > a.navLink{
  border-color: rgba(120, 240, 210, .42);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(120,240,210,.22), transparent 60%),
    radial-gradient(120% 160% at 100% 0%, rgba(255,210,120,.18), transparent 60%),
    rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: navNeonPulse .85s ease-out;
}

/* =========================
   CONTACT : plus "comme tout le monde"
   (pas un gros bouton jaune, même gabarit)
========================= */
.nav__menu a.btn--contact{
  /* on annule le style "btn--dark" trop différent */
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

/* hover contact (même hover que les autres) */
@media (hover:hover) and (pointer:fine){
  .nav__menu a.btn--contact:hover{
    background: linear-gradient(135deg, rgba(255, 252, 47, 0.96), rgba(94, 207, 70, 0.87));
    border-color: rgba(15,23,42,.08) !important;
  }
}

/* contact actif -> même futuriste 2026 */
.nav__menu a.btn--contact.is-active{

  border-color: rgba(120, 240, 210, .35) !important;
  box-shadow:
    0 10px 30px rgba(15,23,42,.10),
    0 0 0 1px rgba(120,240,210,.18) inset !important;
}

/* =========================================================
   NAV DROPDOWN PRO (desktop + mobile)
   (ta base, avec quelques finitions)
========================================================= */

/* top-level item */
.navItem{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* dropdown */
.navSub{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  min-width: 240px;
  padding: 10px;

  border-radius: 16px;
  border: 1px solid rgba(120,240,210,.28);

  background:
    radial-gradient(140% 160% at 10% 0%, rgba(120,240,210,.18), transparent 55%),
    radial-gradient(140% 160% at 90% 0%, rgba(255,210,120,.14), transparent 55%),
    rgba(255,255,255,.92);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 18px 50px rgba(15,23,42,.16),
    0 0 0 1px rgba(255,255,255,.55) inset;

  display: none;
  flex-direction: column;
  gap: 6px;

  z-index: 9999;
}

/* sous-liens */
.navSub__link{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;

  font-weight: 700;
  color: var(--text);
  text-decoration: none;

  border: 1px solid transparent;
  background: transparent;

  transition: background .18s ease, border-color .18s ease, transform .14s ease;
}

.navSub__link:hover{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.08);
}

/* Desktop : hover/focus ouvre */
@media (hover:hover) and (pointer:fine){
  .navItem--hasSub:hover > .navSub,
  .navItem--hasSub:focus-within > .navSub{
    display: flex;
  }
}

/* Mobile/touch + sticky click : classe JS */
.navItem.is-open > .navSub{
  display: flex;
}

/* =========================
   Mobile layout : dropdown devient dans le flux
   (plus simple, pas d’overlay bizarre)
========================= */
@media (max-width: 820px){
  .navItem{ width: 100%; justify-content: stretch; }
  .nav__menu a.navLink{ width: 100%; justify-content: flex-start; }

  .navSub{
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    margin-top: 8px;
  }
}

i.fa-solid.fa-bars {
  color: #0b4a18;
}

/* Noptin inside card */
.noptinWrap form {
  margin-top: 10px;
}

.noptinWrap input[type="email"],
.noptinWrap input[type="text"],
.noptinWrap input[type="name"] {
  width: 100%;
  max-width: 100%;
  border-radius: 999px;
}

.noptinWrap button,
.noptinWrap input[type="submit"] {
  border-radius: 999px;
}


/* CONTACT split: gauche coordonnées / droite partenaires */
.contactSplit{
  align-items: start;
}

.infoActions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Partenaires */
.partnersBox .partnersGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.partnerCard{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}

.partnerCard img{
  display: block;
  width: 100%;
  height: 180px;       /* ajuste si tu veux */
  object-fit: cover;
  object-position: center;
}

/* Responsive: en mobile, les deux partenaires passent l'un sous l'autre */
@media (max-width: 680px){
  .partnersBox .partnersGrid{
    grid-template-columns: 1fr;
  }
  .partnerCard img{
    height: 200px;
  }
}
/* CONTACT split: gauche coordonnées / droite partenaires */
.contactSplit{
  align-items: start;
}

.infoActions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Partenaires */
.partnersBox .partnersGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.partnerCard{
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}

.partnerCard img{
  display: block;
  width: 100%;
  height: 180px;       /* ajuste si tu veux */
  object-fit: cover;
  object-position: center;
}

/* Responsive: en mobile, les deux partenaires passent l'un sous l'autre */
@media (max-width: 680px){
  .partnersBox .partnersGrid{
    grid-template-columns: 1fr;
  }
  .partnerCard img{
    height: 200px;
  }
}

/* PARTENAIRES — montrer le logo en entier (pas de rognage) */
.partnersGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* le "card" donne un cadre stable */
.partnerCard{
  margin: 0;
  padding: 10px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;              /* ok car image en contain */
  display: grid;
  place-items: center;           /* centre le logo */
  min-height: 120px;             /* ajuste selon rendu */
}

/* IMPORTANT : pas de rognage */
.partnerCard img{
  display: block;
  width: 100%;
  height: auto;                  /* <-- clé */
  max-height: 140px;             /* limite la hauteur */
  object-fit: contain;           /* <-- clé */
  object-position: center;
}

/* mobile : 1 colonne si tu veux */
@media (max-width: 520px){
  .partnersGrid{ grid-template-columns: 1fr; }
  .partnerCard img{ max-height: 160px; }
}