/* css/style.css */

/* --- Print (A4) --- */
@page{
  size: A4 landscape;
  margin: 16mm;
}

:root{
  --chill-dark:#263366;
  --chill-dark-nav:#1B264F;
  --chill-bg:#212E6D;
  --chill-blue:#4fa1e2;
  --chill-accent:#3A7DE2;
  --bg:#ffffff;
  --card:#ffffff;
  --line:#EEF1F7;
  --muted:#6B7280;
  --text-gray:#333333;
  --shadow: 0 4px 20px rgba(38,51,102,0.08);
  --shadow-card: 0 2px 12px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }

html{ scroll-behavior: smooth; }

/* Ancre automatique : décalage 100px sous le header fixe */
[id]{ scroll-margin-top: 100px; }

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#0F172A;
}

/* --- Header / Navigation (design: fond blanc, liens bleu foncé) --- */
.site-header{
  background: #fff;
  padding: 20px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(38,51,102,.08);
}
.header-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.logo-link{ display: block; }
.logo-img{
  height: 48px;
  width: auto;
  display: block;
}
.site-header .logo-img{ filter: none; }
.site-footer .logo-img{ filter: brightness(0) invert(1); opacity: .9; }
.nav{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}
.nav a{
  color: var(--chill-dark);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.nav a:hover,
.nav a:focus{
  color: var(--chill-blue);
  border-bottom-color: var(--chill-blue);
}

/* --- Hero (design: fond blanc, logo + tagline + croissant + headline) --- */
.hero{
  background: #fff;
  color: var(--chill-dark);
  padding: 40px 24px 56px;
  text-align: center;
}
.hero-inner{ max-width: 820px; margin: 0 auto; }
.hero-croissant{
  display: block;
  width: 100px;
  height: auto;
  margin: 0 auto 24px;
}
.hero-croissant .cls-1{ fill: var(--chill-blue); }
.hero-title{
  margin: 0 0 8px;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--chill-dark);
}
.hero-title .accent{ color: var(--chill-blue); }
.hero-email{ margin: 0 0 24px; font-size: 16px; }
.hero-email a{ color: var(--chill-blue); font-weight: 600; }
.hero-email a:hover{ text-decoration: underline; }
.hero-headline{
  margin: 0 0 8px;
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 700;
  color: var(--chill-dark);
}
.hero-subtitle{
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  color: var(--chill-blue);
  line-height: 1.4;
}
.hero-place{
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Sections communes --- */
.section-title{
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  color: var(--chill-dark);
}
.section-title--light{ color: #fff; }

/* --- Section Membres --- */
.section-membres{
  padding: 0 0 100px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}
.section-membres .section-title{ padding-top: 16px; margin-bottom: 20px; }
.section-membres .directory{ padding: 0; }

.directory{
  max-width: 100%;
  margin: 0 auto;
}

/* Grille : 5 cartes par ligne, 13 cartes même taille */
.grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

/* Card (section membres : taille réduite) */
.section-membres .card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 12px;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* En-tête fiche : photo + logo */
.card-header{
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.section-membres .card-photo-wrap{
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--line);
  overflow: hidden;
}

.section-membres .card-header .logo-wrap{
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 6px;
}

.section-membres .card-header .logo{
  max-height: 44px;
  max-width: 100%;
}

.card-photo-wrap{
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-header .logo-wrap{
  flex: 1;
  min-width: 0;
  height: 100px;
  padding: 10px;
}

.card-header .logo{
  max-height: 80px;
  max-width: 100%;
}

/* Logo focus (sans card-header) */
.logo-wrap{
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  padding:12px;
  height: 92px;             /* gives logo room */
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo{
  max-height:80px;          /* requested */
  max-width:240px;          /* requested */
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* Title + sector */
.meta{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.section-membres .meta{ margin-top: 6px; gap: 2px; }
.section-membres .sector{ margin-top: 4px; }

.member-name{
  font-weight:800;
  font-size:22px;
  line-height:1.2;
  letter-spacing:0.02em;
  text-align: left;
  color: var(--chill-dark);
}

.section-membres .member-name{ font-size: 12px; }
.section-membres .company-name{ font-size: 11px; }
.section-membres .badge{ font-size: 11px; padding: 4px 10px; background: var(--chill-blue); color: #fff; }
.section-membres .footer{ margin-top: 6px; padding-top: 6px; gap: 4px; }
.section-membres .row{ font-size: 10px; gap: 6px; }
.section-membres .ico{ width: 16px; height: 16px; font-size: 9px; }

.company-name{
  font-weight:700;
  font-size:15px;
  line-height:1.2;
  letter-spacing:0.1px;
  text-align: left;
  color: var(--muted);
}

.sector{
  margin-top:6px;
  display:flex;
  justify-content: flex-start;
}


.badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(79,161,226,.35);
  color: var(--chill-dark);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Footer infos (contact + web) */
.footer{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  min-width:0;
}

.ico{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background: rgba(79,163,209,.12);
  color: var(--chill-blue);
  font-size:15px;
  flex:0 0 auto;
}

a{
  color:var(--chill-dark);
  text-decoration:none;
  font-weight:650;
}

a:hover{ color:var(--chill-blue); }

.url{
  display:inline-block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Make long blocks not explode */
.truncate{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- Section Valeurs (fond bleu) --- */
.section-valeurs{
  background: var(--chill-bg);
  color: #fff;
  padding: 56px 24px 64px;
}
.valeurs-inner{ max-width: 1400px; margin: 0 auto; }
.valeurs-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  margin-top: 32px;
}
.valeur-card{
  text-align: center;
  padding: 24px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.valeur-icon{
  width: 64px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}
.valeur-icon .cls-1{ fill: #36a8e0; }
.valeur-title{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.2;
}
.valeur-desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: .9;
}

/* --- Hero Invité (design: fond blanc, titre bleu, texte gris) --- */
.hero-invite{
  background: #fff;
  color: var(--text-gray);
  padding: 48px 24px 32px;
  text-align: center;
}
.hero-invite-inner{ max-width: 640px; margin: 0 auto; }
.hero-invite-title{
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 700;
  color: var(--chill-accent);
}
.hero-invite-text{
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-gray);
}
.hero-invite-badges{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
}
.hero-invite-badges li{
  padding: 8px 16px;
  background: rgba(58,125,226,.08);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

/* --- Section Calendly (design: fond blanc, iframe arrondi 20px, infos en bas) --- */
.section-calendly{
  padding: 0 24px 56px;
  background: #fff;
}
.calendly-inner{ max-width: 900px; margin: 0 auto; }
.calendly-embed{
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}
.calendly-embed iframe{ display: block; border: 0; }

/* --- Section Contact (design: fond blanc, bleu marine, email souligné, logo) --- */
.section-contact{
  background: #fff;
  color: var(--chill-dark-nav);
  padding: 56px 24px 64px;
  text-align: center;
}
.contact-inner{ max-width: 480px; margin: 0 auto; }
.contact-title{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--chill-dark-nav);
}
.contact-cta{ margin: 0 0 24px; font-size: 18px; color: var(--chill-dark-nav); }
.contact-email{
  display: inline-block;
  color: var(--chill-accent);
  font-weight: 600;
  font-size: 20px;
  text-decoration: underline;
}
.contact-email:hover{ opacity: .9; }
.contact-logo{
  display: block;
  margin: 32px auto 0;
  width: 80px;
  height: auto;
}

/* Responsive section membres : 5 → 3 → 2 → 1 cartes par ligne */
/* Mobile : nav sous le logo, onglets sur une ligne */
@media screen and (max-width: 768px){
  .header-inner{
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .nav{
    flex: none;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px 20px;
  }
  .nav a{ font-size: 11px; padding: 6px 0; }
}

@media screen and (max-width: 1000px){
  .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 640px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-membres{ margin-left: 8px; margin-right: 8px; padding-left: 12px; padding-right: 12px; }
}
@media screen and (max-width: 400px){
  .grid{ grid-template-columns: 1fr; }
}

/* Responsive Valeurs : 5 colonnes en desktop, puis repli */
@media screen and (max-width: 900px){
  .valeurs-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* Print: annuaire uniquement */
@media print{
  .site-header, .hero, .section-membres .section-title,
  .section-valeurs, .hero-invite, .section-calendly, .section-contact{ display: none !important; }
  .directory{ padding: 0; }
  .section-membres{ padding: 0; margin: 0; }

  .grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .section-membres .card{
    box-shadow: none;
    border-radius: 10px;
    padding: 8px;
    min-height: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .section-membres .card-photo-wrap{ width: 48px; height: 48px; }
  .section-membres .card-header .logo-wrap{ height: 48px; padding: 4px; }
  .section-membres .card-header .logo{ max-height: 40px; }
  .section-membres .member-name{ font-size: 10px; }
  .section-membres .company-name{ font-size: 9px; }
  .section-membres .badge{ font-size: 9px; padding: 3px 8px; }
  .section-membres .row{ font-size: 8px; }
  .section-membres .ico{ width: 12px; height: 12px; font-size: 8px; }
}