/* =========================================================================
   BIZ-connect - feuille de style unique
   Direction retenue : CHALEUREUX. Fond creme, grandes cartes arrondies,
   ombres douces, photo sous voile chaud.
   Charte nd-creation-visuelle : palette et typographie verrouillees.
   Ne jamais introduire de couleur hors palette, ni de texte en gris.
   ========================================================================= */

/* --- Polices ------------------------------------------------------------ */

@font-face { font-family:'Syncopate'; src:url('../fonts/Syncopate-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Syncopate'; src:url('../fonts/Syncopate-Bold.ttf')    format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/Quicksand-Light.ttf')    format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/Quicksand-Regular.ttf')  format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/Quicksand-Medium.ttf')   format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/Quicksand-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Quicksand'; src:url('../fonts/Quicksand-Bold.ttf')     format('truetype'); font-weight:700; font-display:swap; }

/* --- Variables de charte ------------------------------------------------ */

:root {
  /* Les cinq couleurs de la palette, plus le blanc. Aucune autre. */
  --orange-vif: #E94E1B;
  --orange:     #F0821E;
  --corail:     #E56371;
  --rose:       #F2A1BE;
  --noir:       #000000;
  --blanc:      #FFFFFF;

  /* Fond d'encadre autorise par la charte (section 4.5) */
  --fond-chaud: #FFF6F2;

  /* Degrade de signature : ordre impose, jamais inverse */
  --degrade: linear-gradient(135deg,
              var(--orange-vif) 0%, var(--orange) 34%,
              var(--corail) 68%, var(--rose) 100%);

  --titre: 'Syncopate', 'Arial Black', sans-serif;
  --corps: 'Quicksand', 'Trebuchet MS', sans-serif;

  --marge: clamp(1.1rem, 5vw, 3.5rem);
  --large: 1180px;

  /* Le vocabulaire chaleureux : arrondis genereux, ombres douces. */
  --r-petit:  10px;
  --r-moyen:  18px;
  --r-grand:  30px;
  --ombre-douce: 0 6px 26px rgba(0,0,0,.06);
  --ombre-carte: 0 10px 34px rgba(0,0,0,.07);
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; color-scheme: light; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond-chaud);
  color: var(--noir);
  font-family: var(--corps);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* --- Typographie -------------------------------------------------------- */
/* Syncopate ne compose JAMAIS de texte long : titres et surtitres seulement. */

.surtitre {
  font-family: var(--titre); font-weight: 400;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: clamp(.6rem, 1.4vw, .72rem); line-height: 1.4;
  margin: 0 0 1.1rem;
}

h1, h2 {
  font-family: var(--titre); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.08; margin: 0 0 1.25rem; text-wrap: balance;
}
h1 { font-size: clamp(1.45rem, 4.2vw, 2.7rem); }
h2 { font-size: clamp(1.1rem, 2.6vw, 1.7rem); }

/* h3 porte des questions et des intitules longs : Quicksand, pas Syncopate. */
h3 {
  font-family: var(--corps); font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.18rem); line-height: 1.35; margin: 0 0 .6rem;
}

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--noir); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--orange-vif); }
strong { font-weight: 700; }

/* --- Structure ---------------------------------------------------------- */

.bloc { padding: clamp(2.8rem, 6vw, 4.8rem) var(--marge); scroll-margin-top: 100px; }
.bloc--blanc { background: var(--blanc); }
/* Aplat de section en corail : role prevu par la charte pour cette teinte.
   Le texte y reste noir, le blanc etant reserve a l'orange vif. */
.bloc--corail { background: var(--corail); }

.contenu { max-width: var(--large); margin-inline: auto; }
/* Un nom qui ne se coupe pas a son trait d'union (« BIZ- / connect » sur telephone). */
.insecable { white-space: nowrap; }
.etroit  { max-width: 780px; }

.intro { font-size: clamp(1rem, 1.8vw, 1.16rem); font-weight: 500; max-width: 60ch; }

/* --- En-tete : une pilule blanche qui flotte ---------------------------- */

.entete { position: sticky; top: 0; z-index: 60; padding: .9rem var(--marge) 0; }

/* Charte 4.1 : un filet degrade de 4 a 6 px peut souligner l'en-tete.
   Il amene l'orange clair en haut de page, la ou rien ne le portait. */
.entete::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 5px;
  background: var(--degrade); z-index: 70;
}

.entete__interieur {
  max-width: var(--large); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  background: var(--blanc); border-radius: 999px;
  padding: .7rem .7rem .7rem 1.6rem;
  box-shadow: var(--ombre-douce);
}

/* Logo cale a gauche, jamais recompose en texte, jamais recolore. */
.logo img { width: clamp(78px, 8.5vw, 96px); }

.nav { display: flex; gap: clamp(.8rem, 1.8vw, 1.7rem); align-items: center; font-weight: 600; font-size: .9rem; }
.nav a { text-decoration: none; }
.nav__lien:hover { color: var(--orange-vif); }
@media (max-width: 900px) { .nav__lien { display: none; } }

/* --- Boutons ------------------------------------------------------------ */
/* Un seul appel a l'action dominant par ecran. */

.bouton {
  display: inline-block;
  background: var(--orange-vif); color: var(--blanc);
  font-family: var(--corps); font-weight: 600; font-size: .93rem;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  padding: .85rem 1.9rem; border: 2px solid var(--orange-vif);
  border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(233,78,27,.26);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.bouton:hover { transform: translateY(-2px); background: var(--orange); border-color: var(--orange); box-shadow: 0 10px 24px rgba(240,130,30,.3); }

.bouton--large { padding: 1.05rem 2.4rem; font-size: 1rem; }

.bouton--creux { background: transparent; color: var(--noir); box-shadow: none; }
.bouton--creux:hover { background: var(--orange-vif); border-color: var(--orange-vif); color: var(--blanc); }

/* --- Accroche : une grande carte photo sous voile chaud ------------------ */

.hero { padding: clamp(1.2rem, 2.5vw, 1.8rem) var(--marge) 0; }

.hero__carte {
  position: relative; overflow: hidden;
  max-width: var(--large); margin-inline: auto;
  border-radius: var(--r-grand);
  min-height: clamp(420px, 56vw, 560px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(2rem, 5vw, 4.2rem);
  color: var(--blanc);
  background: var(--fond-chaud) url('../img/photos/hero.jpg') center 42% / cover;
}

/* Deux couches : une teinte d'ensemble, puis un renfort en bas ou va le texte. */
.hero__carte::before {
  content: ''; position: absolute; inset: 0;
  background: var(--degrade); opacity: .48;
}
.hero__carte::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--orange-vif) 0%,
              rgba(233,78,27,.55) 42%, transparent 78%);
  opacity: .8;
}
.hero__carte > * { position: relative; z-index: 1; }

.hero .surtitre { color: var(--blanc); }
.hero h1 { color: var(--blanc); max-width: 17ch; }

/* La ligne longue du H1 reste lisible : Quicksand, pas Syncopate. */
.hero__amorce {
  display: block; font-family: var(--corps); font-weight: 500;
  text-transform: none; letter-spacing: 0;
  font-size: clamp(.95rem, 1.9vw, 1.18rem); line-height: 1.45;
  margin-bottom: .8rem; max-width: 33ch;
}

/* L'accroche suit le bouton : la marge passe donc au-dessus. */
.hero__accroche {
  font-size: clamp(1rem, 1.9vw, 1.14rem); font-weight: 500;
  max-width: 48ch; margin: 1.7rem 0 0;
}

.hero .bouton { background: var(--blanc); color: var(--orange-vif); border-color: var(--blanc); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.hero .bouton:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }

/* --- Signature de marque ------------------------------------------------ */
/* Le noir de la charte est une couleur de TEXTE, pas d'aplat. */

.signature {
  font-family: var(--titre); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: clamp(.68rem, 1.5vw, .95rem);
  text-align: center; margin: 0;
  padding: clamp(1.8rem, 3.5vw, 2.6rem) var(--marge);
}

/* --- Chiffres cles ------------------------------------------------------ */

.chiffres {
  max-width: var(--large); margin-inline: auto;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 var(--marge);
}
@media (max-width: 760px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }

.chiffre {
  background: var(--blanc); border-radius: var(--r-moyen);
  padding: clamp(1.3rem, 2.5vw, 1.9rem) 1.2rem; text-align: center;
  box-shadow: var(--ombre-douce);
  transition: transform .25s ease, box-shadow .25s ease;
}
.chiffre:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); }

.chiffre__picto {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--fond-chaud); color: var(--orange-vif);
  margin-bottom: .8rem;
}
/* Une seule couleur, l'orange vif, sur le fond chaud (proposition C retenue le
   11.10.2026 : « l'orange et le rose ne se marient pas »). */
.chiffre__picto svg { width: 1.5rem; height: 1.5rem; }

.chiffre b {
  display: block; font-family: var(--titre); font-weight: 700;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem); line-height: 1;
  color: var(--orange-vif); margin-bottom: .45rem;
}
.chiffre span { font-size: .86rem; line-height: 1.4; }

/* --- Agenda ------------------------------------------------------------- */

.agenda { display: grid; gap: .8rem; margin-top: 2rem; }

.evenement {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(1rem, 2.5vw, 1.9rem); align-items: center;
  background: var(--blanc); border-radius: var(--r-moyen);
  border-left: 5px solid var(--orange-vif);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.4vw, 2rem);
  box-shadow: var(--ombre-douce);
  transition: transform .25s ease, box-shadow .25s ease;
}
.evenement:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }

.evenement__date {
  background: var(--fond-chaud); color: var(--orange-vif);
  border-radius: var(--r-petit); padding: .8rem 1rem; text-align: center;
  font-family: var(--titre); font-weight: 700; line-height: 1; margin: 0;
  min-width: 74px;
}
/* Une seule couleur, l'orange vif (proposition C retenue le 11.10.2026) :
   trait a gauche de la carte, date en orange vif sur le fond chaud. Le fond
   clair distingue la pastille du bouton orange vif place sur la meme ligne. */
.evenement__jour { display: block; font-size: 1.7rem; }
.evenement__mois { display: block; font-size: .58rem; letter-spacing: .14em; margin-top: .35rem; text-transform: uppercase; }

.evenement__meta { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; font-size: .88rem; font-weight: 600; }
.evenement__picto { color: var(--orange-vif); display: inline-flex; }
.evenement__picto svg { width: 1.05rem; height: 1.05rem; }

.evenement__titre { font-family: var(--corps); font-weight: 700; font-size: 1.05rem; margin: 0; line-height: 1.3; }
.evenement__sujet { margin: .4rem 0 0; font-size: .92rem; line-height: 1.5; max-width: 62ch; }
.evenement__complet { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 780px) {
  .evenement { grid-template-columns: auto 1fr; row-gap: .9rem; }
  .evenement__action { grid-column: 1 / -1; }
  .evenement__action .bouton { display: block; text-align: center; }
}

/* Familles d'evenements (20.10.2026) : un pictogramme plus grand dans une
   pastille et le nom de la famille sur chaque carte ; des boutons de filtre
   au-dessus de la liste. Le BIZ-cafe, rendez-vous phare, est le seul mis en
   avant : cadre et date en orange vif (une seule couleur, decision du 11.10). */
.agenda__filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.agenda__filtres + .agenda { margin-top: 1.1rem; }
.agenda__filtre {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 700 .84rem/1 var(--corps); color: var(--noir);
  background: var(--blanc); border: 1.5px solid var(--orange-vif); border-radius: 999px;
  padding: .55rem .95rem; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.agenda__filtre:hover { background: var(--fond-chaud); }
.agenda__filtre[aria-pressed="true"] { background: var(--orange-vif); color: var(--blanc); }
.agenda__filtre:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.agenda__filtre-picto { display: inline-flex; color: var(--orange-vif); }
.agenda__filtre[aria-pressed="true"] .agenda__filtre-picto { color: var(--blanc); }
.agenda__filtre-picto svg { width: 1.1rem; height: 1.1rem; }
.agenda__filtre-nombre { font-size: .74rem; opacity: .85; }

.evenement__meta { flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .45rem; }
.evenement__genre {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.evenement__genre .evenement__picto {
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--fond-chaud); display: inline-grid; place-items: center;
}
.evenement__genre .evenement__picto svg { width: 1.35rem; height: 1.35rem; }

/* Le BIZ-cafe se reconnait d'un coup d'oeil. */
.evenement--biz-cafe { border: 2px solid var(--orange-vif); border-left-width: 6px; }
.evenement--biz-cafe .evenement__date { background: var(--orange-vif); color: var(--blanc); }
.evenement--biz-cafe .evenement__genre .evenement__picto { background: var(--orange-vif); color: var(--blanc); }

/* Les cinq prochaines dates sont affichees ; la suite se deplie. */
.agenda__suite > summary {
  cursor: pointer; list-style: none;
  background: var(--blanc); border-radius: var(--r-moyen);
  padding: 1.05rem 3.2rem 1.05rem 1.4rem;
  font-weight: 700; font-size: .95rem; line-height: 1.4; position: relative;
  box-shadow: var(--ombre-douce);
}
.agenda__suite > summary::-webkit-details-marker { display: none; }
.agenda__suite > summary::after {
  content: '+'; position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 700; color: var(--orange-vif); line-height: 1;
}
.agenda__suite[open] > summary::after { content: '-'; }
.agenda__suite[open] > summary { margin-bottom: .8rem; }
.agenda__suite-liste { display: grid; gap: .8rem; }

.agenda__vide { background: var(--blanc); border-radius: var(--r-moyen); padding: 2rem; text-align: center; font-weight: 500; }

/* --- Duo texte + photo -------------------------------------------------- */

.duo {
  display: grid; gap: clamp(1.6rem, 4vw, 3.2rem);
  grid-template-columns: 1fr 1fr; align-items: center;
}
@media (max-width: 880px) { .duo { grid-template-columns: 1fr; } }

.duo__photo {
  border-radius: var(--r-grand); overflow: hidden;
  box-shadow: var(--ombre-carte);
  aspect-ratio: 4 / 3;
}
.duo__photo img { width: 100%; height: 100%; object-fit: cover; }
.duo__photo--haute { aspect-ratio: 3 / 4; }

/* --- Deroule d'un BIZ-cafe ---------------------------------------------- */

.deroule { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .7rem; counter-reset: etape; }

.deroule li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  background: var(--blanc); border-radius: var(--r-moyen);
  border-left: 4px solid var(--orange);
  padding: 1.1rem 1.3rem; counter-increment: etape;
  box-shadow: var(--ombre-douce);
}
.deroule li::before {
  content: counter(etape);
  font-family: var(--titre); font-weight: 700; font-size: .78rem;
  color: var(--blanc); background: var(--degrade);
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; margin-top: .1rem;
}
.deroule__heure { font-weight: 700; }
.deroule__point { margin: .55rem 0 0; }

/* --- Temoignages -------------------------------------------------------- */

.note { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.8rem; font-weight: 600; }
.note__chiffre { font-family: var(--titre); font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.2rem); color: var(--orange-vif); line-height: 1; }
.note__etoiles { color: var(--orange-vif); display: inline-flex; }
.note__etoiles svg { width: 5.6rem; height: 1rem; }

.temoignages { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.temoignage {
  background: var(--blanc); border-radius: var(--r-moyen); padding: 1.5rem;
  margin: 0; display: flex; flex-direction: column;
  box-shadow: var(--ombre-douce);
  transition: transform .25s ease, box-shadow .25s ease;
}
.temoignage { border-left: 4px solid var(--rose); }
.temoignage:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }
.temoignage blockquote { margin: 0 0 1rem; font-size: .95rem; }
.temoignage figcaption { margin-top: auto; font-weight: 700; font-size: .9rem; }
.temoignage__source { display: block; font-weight: 500; font-size: .8rem; margin-top: .15rem; }
.lire-plus.temoignages__suite { margin: 1.3rem 0 0; }

/* Video des temoignages (15.10.2026) : sous le titre, avant la note Google.
   Bouton de lecture orange vif (le blanc y est lisible), pose par app.js ;
   sans JavaScript, les commandes du navigateur suffisent. */
.video-temoignages { margin: 0 auto 2.2rem; max-width: 880px; }
.video-temoignages__cadre {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-moyen); background: var(--noir); box-shadow: var(--ombre-carte);
}
.video-temoignages video { display: block; width: 100%; height: 100%; }
.video-temoignages__lecture {
  position: absolute; inset: 0; margin: auto;
  width: 4.6rem; height: 4.6rem; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--orange-vif); color: var(--blanc);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease;
}
.video-temoignages__lecture[hidden] { display: none; }
.video-temoignages__lecture:hover { background: var(--orange); transform: scale(1.06); }
.video-temoignages__lecture:focus-visible { outline: 3px solid var(--blanc); outline-offset: 3px; }
.video-temoignages__lecture svg { width: 1.8rem; height: 1.8rem; margin-left: .25rem; }
.video-temoignages figcaption { margin-top: .8rem; font-weight: 600; font-size: .95rem; text-align: center; }
.lire-plus.faq__plus { margin: 1.2rem 0 0; }
.faq__plus > .faq { margin-top: 0; }

/* --- Lire plus ------------------------------------------------------------ */
/* 11.10.2026 : textes longs et avis replies, a deplier au clic. Le texte reste
   dans la page (lu par Google) ; sans JavaScript, le depliage marche aussi. */
.lire-plus { margin: 0 0 1em; }
.lire-plus > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: .95rem;
  text-decoration: underline; text-decoration-color: var(--orange-vif);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.lire-plus > summary::-webkit-details-marker { display: none; }
.lire-plus > summary::after {
  content: '+'; display: inline-block; text-decoration: none;
  font-size: 1.35rem; font-weight: 700; color: var(--orange-vif); line-height: 1;
}
.lire-plus[open] > summary { margin-bottom: 1em; }
.lire-plus[open] > summary::after { content: '\2013'; }
.lire-plus__fermer, .lire-plus[open] .lire-plus__ouvrir { display: none; }
.lire-plus[open] .lire-plus__fermer { display: inline; }
.lire-plus > summary:focus-visible { outline: 2px solid var(--orange-vif); outline-offset: 4px; border-radius: 4px; }

/* --- Membres : annuaire par domaine ------------------------------------- */
/* 16.10.2026, proposition validee par Helene (« la proposition des membres
   me plait »), inspiree de la Landscape du Salon RH. Ordinateur : colonne des
   domaines avec compteurs (filtre) + fiches. Telephone : un volet par
   domaine. Rempli par app.js depuis assets/data/membres.json. Charte : pas
   une couleur par domaine ; orange vif pour les compteurs actifs, degrade en
   filets (comme les anciennes cases de logos). */

.annuaire { display: grid; grid-template-columns: 290px 1fr; gap: 1.6rem; align-items: start; margin-top: 2.2rem; }

.annuaire__panneau {
  position: sticky; top: 110px;
  background: var(--blanc); border-radius: var(--r-moyen); box-shadow: var(--ombre-douce);
  overflow: hidden;
}
.annuaire__panneau::before, .annuaire__volets::before { content: ''; display: block; height: 5px; background: var(--degrade); }
.annuaire__domaine {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%; padding: .78rem 1.15rem .78rem calc(1.15rem - 4px);
  background: none; border: 0; border-top: 1px solid rgba(242,161,190,.45); border-left: 4px solid transparent;
  font: 700 .76rem/1.35 var(--corps); letter-spacing: .07em; text-transform: uppercase; text-align: left;
  color: var(--noir); cursor: pointer; transition: background .2s ease;
}
.annuaire__domaine--tous { border-top: 0; font-size: .72rem; letter-spacing: .14em; padding-block: 1rem .9rem; }
.annuaire__domaine:hover { background: var(--fond-chaud); }
.annuaire__domaine[aria-pressed="true"] { background: var(--fond-chaud); border-left-color: var(--orange-vif); }
.annuaire__domaine:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.annuaire__compte {
  flex-shrink: 0; min-width: 1.75rem; height: 1.75rem; padding: 0 .5rem; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--fond-chaud); font-size: .76rem; font-weight: 700; letter-spacing: 0;
}
.annuaire__domaine[aria-pressed="true"] .annuaire__compte,
.annuaire__tete .annuaire__compte,
.membre-volet[open] .annuaire__compte { background: var(--orange-vif); color: var(--blanc); }

.annuaire__fiches {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
}
.membre-fiche {
  position: relative; overflow: hidden;
  background: var(--blanc); border-radius: var(--r-moyen); box-shadow: var(--ombre-douce);
  padding: 1.25rem 1.3rem 1.35rem; display: flex; flex-direction: column; gap: .55rem;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: membre-apparait .35s ease both;
}
.membre-fiche[hidden] { display: none; }
.membre-fiche:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }
.membre-fiche::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--degrade); }
@keyframes membre-apparait { from { opacity: 0; transform: translateY(8px); } }

.membre-fiche__marque { height: 60px; display: flex; align-items: center; }
.membre-fiche__marque img { width: auto; height: auto; max-height: 46px; max-width: 75%; object-fit: contain; }
/* Pas encore de logo : les initiales, dans un cadre au filet degrade. */
.membre-sigle {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: grid; place-items: center; border: 2px solid transparent;
  background: linear-gradient(var(--blanc), var(--blanc)) padding-box, var(--degrade) border-box;
  font: 700 .74rem/1 var(--titre); letter-spacing: .04em; color: var(--noir);
}
.membre-fiche__nom { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.membre-fiche__domaine {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.45;
}
.membre-fiche__domaine::before {
  content: ''; flex-shrink: 0; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--degrade); transform: translateY(.05rem);
}
.membre-fiche__expertise { margin: 0; font-size: .92rem; line-height: 1.5; }
.membre-fiche__lien {
  margin-top: auto; padding-top: .4rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--noir); text-decoration: none;
}
.membre-fiche__lien span { border-bottom: 2px solid var(--orange); }
.membre-fiche__lien:hover span { border-color: var(--orange-vif); }
.membre-fiche__lien svg { width: 1.05rem; height: 1.05rem; }

.annuaire__rejoindre {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  background: var(--blanc); border-radius: var(--r-moyen); box-shadow: var(--ombre-douce);
  border-left: 5px solid var(--orange-vif); padding: 1.3rem 1.6rem;
}
.annuaire__rejoindre p { margin: 0; max-width: 58ch; }

/* Telephone : les domaines deviennent des volets. */
.annuaire__volets { display: none; }
@media (max-width: 900px) {
  .annuaire { grid-template-columns: 1fr; }
  .annuaire__panneau, .annuaire__fiches { display: none; }
  .annuaire__volets {
    display: block; background: var(--blanc); border-radius: var(--r-moyen);
    box-shadow: var(--ombre-douce); overflow: hidden;
  }
}
.annuaire__tete {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin: 0; padding: 1rem 1.1rem .9rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.membre-volet { border-top: 1px solid rgba(242,161,190,.45); }
.membre-volet summary {
  display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem; cursor: pointer; list-style: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.35;
}
.membre-volet summary::-webkit-details-marker { display: none; }
.membre-volet__nom { flex: 1; }
.membre-volet summary svg { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform .25s ease; }
.membre-volet[open] summary { background: var(--fond-chaud); }
.membre-volet[open] summary svg { transform: rotate(180deg); }
.membre-volet summary:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.membre-volet ul { list-style: none; margin: 0; padding: .3rem .6rem .7rem; background: var(--fond-chaud); }
.membre-ligne {
  display: flex; align-items: center; gap: .85rem; padding: .7rem .6rem;
  border-radius: var(--r-petit); color: var(--noir); text-decoration: none;
}
a.membre-ligne:hover { background: var(--blanc); }
li + li > .membre-ligne { border-top: 1px solid rgba(242,161,190,.45); }
.membre-ligne .membre-sigle, .membre-ligne__logo { width: 44px; height: 44px; border-radius: 12px; font-size: .58rem; }
.membre-ligne__logo { display: grid; place-items: center; background: var(--blanc); flex-shrink: 0; }
.membre-ligne__logo img { max-width: 36px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
.membre-ligne__texte { flex: 1; min-width: 0; line-height: 1.35; }
.membre-ligne__texte b { display: block; font-size: .95rem; }
.membre-ligne__texte small { display: block; font-size: .84rem; font-weight: 500; }
.membre-ligne > svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* --- 15 raisons de reseauter -------------------------------------------- */

.raisons {
  list-style: none; margin: 2.8rem 0 0; padding: 0;
  display: grid; gap: .9rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  counter-reset: raison;
}

/* 11.10.2026 : chaque raison montre son numero et son titre ; le detail se
   deplie au clic (la carte voisine ne s'etire pas : align-items: start). */
.raison {
  background: var(--fond-chaud); border-radius: var(--r-moyen);
  /* Charte 4.5 : un encadre d'avantages porte un filet gauche.
     L'orange clair est la teinte que la palette assigne aux filets. */
  border-left: 4px solid var(--orange);
  padding: .95rem 1.2rem; counter-increment: raison;
  display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: start;
  transition: transform .25s ease, box-shadow .25s ease;
}
.raison:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }
.raison::before {
  content: counter(raison, decimal-leading-zero);
  font-family: var(--titre); font-weight: 700; font-size: .72rem;
  color: var(--blanc); background: var(--degrade);
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center;
}
.raison summary {
  cursor: pointer; list-style: none; min-height: 2.7rem; /* deux lignes de titre */
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.raison summary::-webkit-details-marker { display: none; }
.raison summary::after {
  content: '+'; flex: none; font-size: 1.35rem; font-weight: 700;
  color: var(--orange-vif); line-height: 1;
}
.raison details[open] summary::after { content: '\2013'; }
.raison summary:focus-visible { outline: 2px solid var(--orange-vif); outline-offset: 3px; border-radius: 4px; }
.raison h3 { margin: 0; font-size: 1rem; }
.raison p { margin: .55rem 0 .2rem; font-size: .94rem; line-height: 1.6; }
/* Second titre de la section (10.10.2026) : le premier pose la question
   « pourquoi un reseau dans la vraie vie », celui-ci ouvre la liste. */
.raisons__titre { margin-top: clamp(2.6rem, 6vw, 4rem); }
.raisons__titre + .intro + .raisons { margin-top: 1.8rem; }

/* --- Avantages des membres (section documentation, 10.10.2026) ---------- */
/* Une carte blanche, deux colonnes sur ordinateur ; pastille au degrade de
   marque. La note sous l'asterisque reste en noir (aucun texte gris). */

.avantages {
  list-style: none; margin: 1.2rem 0 0; padding: 1.4rem 1.6rem;
  background: var(--blanc); border-radius: var(--r-moyen); box-shadow: var(--ombre-douce);
  display: grid; gap: .6rem 1.8rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.avantages li { position: relative; padding-left: 1.35rem; font-weight: 500; line-height: 1.45; }
.avantages li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--degrade);
}
.avantages sup, .avantages__note sup { color: var(--orange-vif); font-weight: 700; }
.avantages__note { font-size: .86rem; line-height: 1.6; margin: .9rem 0 0; }
.avantages__suite { margin-top: 1.8rem; }

/* --- Questions frequentes ----------------------------------------------- */
/* Remises le 10.10.2026 (styles de la version du 15.09). Un clic deplie la
   reponse ; sans JavaScript. */

.faq { margin-top: 1.8rem; display: grid; gap: .6rem; }
.faq details {
  background: var(--blanc); border-radius: var(--r-moyen);
  padding: .2rem 1.3rem; box-shadow: var(--ombre-douce);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem 2.2rem 1.05rem 0;
  font-weight: 600; font-size: .99rem; line-height: 1.4; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
/* Chaque question est un H3, comme chez Ichibani (11.10.2026) : meme apparence qu'avant. */
.faq summary h3 { font: inherit; margin: 0; display: inline; }
.faq__suite { margin: 1.6rem 0 0; }
.faq__suite a { color: var(--noir); text-decoration-color: var(--orange-vif); text-underline-offset: 3px; font-weight: 600; }
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 700; color: var(--orange-vif); line-height: 1;
}
.faq details[open] summary::after { content: '\2013'; }
.faq__reponse { padding: 0 1.5rem 1.2rem 0; }
.faq__reponse p { margin: 0 0 .7rem; }
.faq__reponse ol { padding-left: 1.2rem; margin: 0; }
.faq__reponse li { margin-bottom: .5rem; }
.faq__reponse a { color: var(--noir); text-decoration-color: var(--orange-vif); text-underline-offset: 3px; }

/* --- Formulaire --------------------------------------------------------- */

.formulaire {
  margin-top: 1.8rem; background: var(--blanc);
  border-radius: var(--r-grand); padding: clamp(1.4rem, 3.5vw, 2.6rem);
  box-shadow: var(--ombre-carte);
}

.champs { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.champ--large { grid-column: 1 / -1; }

.champ label, .groupe legend {
  display: block; font-weight: 700; font-size: .87rem; margin-bottom: .4rem; padding: 0;
}

.champ input, .champ select, .champ textarea {
  width: 100%; font-family: var(--corps); font-size: 1rem; font-weight: 500;
  color: var(--noir); background: var(--fond-chaud);
  border: 2px solid var(--fond-chaud); border-radius: var(--r-petit);
  padding: .78rem .95rem; transition: border-color .15s, background .15s;
}
.champ textarea { min-height: 108px; resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--rose); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; background: var(--blanc); border-color: var(--orange-vif);
  box-shadow: 0 0 0 3px rgba(242,161,190,.5);
}
.champ__aide { font-size: .84rem; margin: .35rem 0 0; }

/* Le detail d'un BIZ-event : intervenant, tarif et conditions d'annulation,
   remplis depuis agenda.json des que la date est choisie. Filet gauche orange,
   le motif que la charte prevoit pour un encadre. */
.evenement-detail {
  background: var(--fond-chaud); border-radius: var(--r-moyen);
  border-left: 4px solid var(--orange);
  padding: 1rem 1.2rem; font-size: .9rem; line-height: 1.55;
}
.evenement-detail p { margin: 0 0 .4rem; }
.evenement-detail p:last-child { margin-bottom: 0; }

.groupe {
  border: 2px solid var(--fond-chaud); border-radius: var(--r-moyen);
  padding: 1rem 1.15rem; margin: 0; grid-column: 1 / -1;
}
.groupe legend { padding-inline: .4rem; }

.option { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; margin-bottom: .5rem; cursor: pointer; }
.option:last-child { margin-bottom: 0; }
.option input { margin-top: .28rem; accent-color: var(--orange-vif); flex-shrink: 0; }

/* Piege a robots : invisible pour l'humain, rempli par les automates. */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulaire__envoi { margin-top: 1.6rem; }

.message {
  margin-top: 1.2rem; padding: 1rem 1.25rem; border-radius: var(--r-petit);
  font-weight: 600; background: var(--fond-chaud); border-left: 4px solid var(--orange-vif);
}
.message[hidden] { display: none; }

/* --- Pied de page ------------------------------------------------------- */

.pied {
  background: var(--blanc); color: var(--noir);
  margin: clamp(1.2rem, 2.5vw, 2rem) var(--marge);
  border-radius: var(--r-grand);
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.4rem, 4vw, 3rem) 1.8rem;
  box-shadow: var(--ombre-douce);
}
.pied__grille {
  max-width: var(--large); margin-inline: auto;
  display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 900px) { .pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }

.pied h2 { font-size: .68rem; letter-spacing: .14em; margin-bottom: .9rem; }
.pied p, .pied ul { font-size: .92rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .45rem; }
.pied__logo { width: 138px; margin-bottom: 1rem; }

/* Dans le pied de page, le lien se signale par la couleur et non par le trait.
   L'orange marque le lien, l'orange vif le survol : roles prevus par la charte. */
.pied a { color: var(--orange-vif); text-decoration: none; font-weight: 600; }
.pied a:hover { color: var(--orange); }

.social { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; text-decoration: none; }
.social svg { width: 24px; height: 24px; flex-shrink: 0; fill: var(--noir); transition: fill .18s ease; }
.social span { text-decoration: none; }
.social svg { fill: var(--orange-vif); }
.social:hover svg { fill: var(--orange); }

.pied__bas {
  max-width: var(--large); margin: 2.2rem auto 0; padding-top: 1.4rem;
  border-top: 1px solid var(--fond-chaud);
  font-size: .84rem; display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; justify-content: space-between;
}

/* --- Accessibilite ------------------------------------------------------ */

.saut { position: absolute; left: -9999px; background: var(--noir); color: var(--blanc); padding: .75rem 1.25rem; z-index: 100; }
.saut:focus { left: 0; top: 0; }

:focus-visible { outline: 3px solid var(--orange-vif); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .entete, .nav, .formulaire, .bouton { display: none; }
  body { background: #fff; font-size: 11pt; }
  .pied, .chiffre, .evenement, .temoignage, .faq details { box-shadow: none; }
}