/* Le book — l'annuaire des entreprises, alimenté par la Google Sheet.
   Une grille de cartes ; un clic ouvre la fiche complète dans la modale.
   Le bloc .company-* en bas est partagé avec le plan du campus. */

.directory{padding:3.2rem 0 2rem}
/* le book occupe toute la page : il dégage lui-même la nav fixe */
main > .directory:first-child{padding-top:calc(var(--nav-h) + 2.2rem)}

.directory-head{max-width:46rem;margin-bottom:1.3rem}

.directory-intro{margin:.7rem 0 0;color:var(--muted);font-size:.95rem;line-height:1.55;max-width:52ch}

/* recherche et compteur sur une même ligne, la recherche en tête */
.directory-tools{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.directory-search{position:relative;display:flex;align-items:center;flex:1 1 22rem;max-width:34rem}
.directory-search svg{position:absolute;left:1.05rem;width:19px;height:19px;color:var(--moss);pointer-events:none}
.directory-search input{width:100%;padding:.8rem 1.1rem .8rem 2.85rem;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;
  box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.directory-search input::placeholder{color:var(--muted)}
.directory-search input:focus{outline:none;border-color:var(--moss);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--moss) 18%,transparent)}
.directory-count{margin:0;flex:0 0 auto;color:var(--moss-deep);font-size:.85rem;
  background:color-mix(in oklab,var(--lime) 18%,var(--paper));
  border:1px solid color-mix(in oklab,var(--lime) 38%,var(--line));
  padding:.42rem .85rem;border-radius:999px}
.directory-count b{font-family:var(--font-display);font-size:.95rem}
.directory-empty{color:var(--muted);text-align:center;padding:2rem .5rem;font-size:.95rem}

/* Filtres par secteur : des cases à cocher déguisées en pastilles, qui
   reprennent la couleur du secteur (var --tone-*, posée en data-tone). La case
   elle-même reste dans le DOM pour le clavier et les lecteurs d'écran. */
.directory-filters{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:-.6rem 0 1.4rem}
.directory-filters[hidden]{display:none}
.directory-filters-lbl{color:var(--muted);font-size:.8rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
.sector-filters{display:flex;gap:.45rem;flex-wrap:wrap}
.sector-filter{position:relative;display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .8rem .34rem .62rem;border-radius:999px;cursor:pointer;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tone-fg,var(--teal-deep));
  background:var(--paper);border:1px solid var(--line);
  transition:background .18s,border-color .18s,box-shadow .18s}
.sector-filter:hover{border-color:color-mix(in oklab,var(--tone-fg,var(--teal-deep)) 34%,var(--line))}
/* la puce : vide au repos, cochée elle se remplit de la couleur du secteur —
   pas de coche dessinée, l’aplat de couleur suffit à lire l’état */
.sector-filter input{appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
  width:14px;height:14px;border-radius:4px;cursor:pointer;
  border:1.5px solid color-mix(in oklab,var(--tone-fg,var(--teal-deep)) 40%,var(--line));
  background:var(--paper);transition:background .18s,border-color .18s}
.sector-filter input:checked{background:var(--tone-fg,var(--teal-deep));
  border-color:var(--tone-fg,var(--teal-deep))}
.sector-filter:has(input:checked){background:var(--tone-bg,color-mix(in oklab,var(--teal) 14%,var(--paper)));
  border-color:color-mix(in oklab,var(--tone-fg,var(--teal-deep)) 45%,transparent)}
.sector-filter input:focus-visible{outline:2px solid var(--moss);outline-offset:2px}
.sector-filters-clear{border:0;background:none;cursor:pointer;font:inherit;font-size:.78rem;
  color:var(--moss-deep);text-decoration:underline;text-underline-offset:3px;padding:.2rem}
.sector-filters-clear[hidden]{display:none}

/* ---------- la grille de cartes ----------
   Les cartes se suivent côte à côte ; un clic ouvre la fiche complète dans la
   modale partagée, pour qu'une description longue n'ait pas à tenir dans une
   tuile. */
.directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:1rem;align-content:start}

.company-card{display:flex;flex-direction:column;gap:.75rem;width:100%;text-align:left;
  font:inherit;color:inherit;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:1.15rem 1.25rem 1rem;box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.company-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);
  border-color:color-mix(in oklab,var(--teal) 40%,var(--line))}
.company-card:hover .company-card-more{color:var(--clay)}

/* Le logo passe au-dessus du nom : dans la même rangée, une boîte de logo lisible
   ne laissait plus au nom que la moitié de la carte. */
.company-card-top{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
/* Même boîte pour tous les logos, fond blanc pour que les logos sombres comme
   colorés restent lisibles. La taille exacte de l'image est posée par
   companies.js, qui égalise les surfaces ; max-* n'est qu'un garde-fou. */
.company-card-logo{flex:0 0 auto;width:96px;height:56px;border-radius:12px;overflow:hidden;
  display:grid;place-items:center;background:#fff;border:1px solid var(--line);
  color:var(--moss-deep);font-family:var(--font-display);font-size:.9rem}
.company-card-logo img{display:block;max-width:88px;max-height:48px;object-fit:contain}
.company-card-id{min-width:0}
.company-card-name{display:block;font-family:var(--font-display);font-size:1rem;
  color:var(--bark);line-height:1.25;letter-spacing:0;overflow-wrap:anywhere}
.company-card-meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:.78rem;padding-top:.7rem;border-top:1px solid var(--line)}
.company-card-stand{color:var(--muted);font-weight:600}
.company-card-more{color:var(--moss);font-weight:700;white-space:nowrap;transition:color .2s}
.company-card-sector,.company-sector{display:inline-block;padding:.16rem .6rem;border-radius:999px;
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--tone-bg,color-mix(in oklab,var(--teal) 14%,var(--paper)));color:var(--tone-fg,var(--teal-deep))}
/* secteur et provenance sur une meme rangee, qui passe a la ligne d'elle-meme
   quand la carte est trop etroite */
.company-card-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:-.15rem}
/* signale une entreprise hors France, d'apres la colonne Pays */
/* rose plutôt qu'orange : l'orange se confondait avec l'étiquette de secteur */
.company-card-intl,.company-intl{display:inline-flex;align-items:center;gap:.28rem;
  padding:.16rem .45rem;border-radius:999px;font-size:.62rem;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;
  background:#fbdce8;color:#8d2352;border:1px solid #f2b8ce}
.company-card-intl svg,.company-intl svg{width:11px;height:11px;flex:0 0 auto}
.company-intl{margin-top:.35rem}

/* trois lignes, pour que les cartes d'une rangée s'alignent */
.company-card-desc{margin:0;font-size:.86rem;color:var(--muted);line-height:1.5;flex:1 1 auto;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- la fiche entreprise, partagée avec le plan ---------- */
/* logo au-dessus du nom, comme sur les cartes : côte à côte, une boîte de logo
   lisible ne laissait au nom qu’une colonne et il se coupait au milieu des mots */
.company-top{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;
  margin-bottom:1.1rem;padding-right:1.5rem}
.company-logo{flex:0 0 auto;width:132px;height:72px;border-radius:14px;overflow:hidden;
  display:grid;place-items:center;background:#fff;border:1px solid var(--line);
  color:var(--moss-deep);font-family:var(--font-display);font-size:1.1rem}
.company-logo img{display:block;max-width:120px;max-height:60px;object-fit:contain}
.company-top h3{font-family:var(--font-display);text-transform:uppercase;
  font-size:1.2rem;color:var(--bark);margin:0;line-height:1.15;overflow-wrap:anywhere}
.company-sector{margin-top:.35rem}
/* offres de stage : le même jaune que la vidéo, les deux signalent une
   opportunité ; en minuscules pour se lire d'un coup d'œil */
.company-card-stage,.company-stage{display:inline-flex;align-items:center;
  padding:.18rem .55rem;border-radius:999px;font-size:.7rem;font-weight:800;
  background:#fbeec6;color:#5c4509;border:1px solid #eed99a}
.company-stages{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .9rem}
.company-stages[hidden]{display:none}

/* une rubrique de la fiche : un titre court, puis un texte ou des étiquettes */
.company-block{margin:0 0 .9rem;max-width:70ch}
.company-block[hidden]{display:none}
.company-block h4{margin:0 0 .25rem;font-family:var(--font-display);text-transform:uppercase;
  font-size:.74rem;letter-spacing:.04em;color:var(--teal-deep)}
.company-text{margin:0;color:var(--ink);font-size:.9rem;line-height:1.55;white-space:pre-line}
.company-text[hidden],.company-more[hidden]{display:none}
.company-more{display:inline-block;margin-top:.45rem;font-weight:700;font-size:.88rem;color:var(--moss-deep)}
.company-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.company-tags li{padding:.18rem .55rem;border-radius:999px;font-size:.78rem;
  background:var(--cream);border:1px solid var(--line);color:var(--bark)}

/* Téléphone : la carte doit se lire d'un coup d'œil. Deux lignes de
   description suffisent, la fiche complète est à un clic. */
@media (max-width:560px){
  .company-card-desc{-webkit-line-clamp:2}
  .company-card{gap:.6rem}
  .company-top{margin-bottom:.8rem}
  .company-top h3{font-size:1.05rem}
}
.company-facts{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0 0 1.2rem;
  padding-top:.9rem;border-top:1px solid var(--line);font-size:.88rem;max-width:38rem}
.company-facts dt{color:var(--muted);font-weight:600}
.company-facts dd{margin:0;color:var(--bark);overflow-wrap:anywhere}
/* Lecteur video des entreprises "pack communication". Le 16/9 est impose
   par le conteneur : le lecteur suit la largeur de la modale sans deformer. */
.company-video{margin:0 0 1.1rem;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9}
.company-video iframe{width:100%;height:100%;border:0;display:block}
/* Ces elements portent un display explicite, qui l emporte sur la regle par
   defaut du navigateur pour [hidden]. Sans cette ligne, le badge International
   s affichait sur toutes les fiches, meme francaises. */
.company-sector[hidden],.company-intl[hidden],
.company-card-sector[hidden],.company-card-intl[hidden]{display:none}
/* badge des entreprises mises en avant : dore, distinct du rose international */
.company-card-pack{display:inline-flex;align-items:center;gap:.28rem;
  padding:.16rem .45rem;border-radius:999px;font-size:.62rem;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;
  background:#fbeec6;color:#6b5310;border:1px solid #eed99a}
.company-card-pack svg{width:11px;height:11px;flex:0 0 auto}
.company-link{display:inline-flex}
/* la modale garde le bouton pleine largeur pour lequel elle a été dessinée */
.modal--company .modal-panel{width:min(100%,540px);max-height:82vh;overflow-y:auto}
.modal--company .company-link{width:100%}

/* ---------- une seule colonne ---------- */
@media (max-width:600px){
  .directory{padding-top:2.2rem}
  .directory-tools{gap:.7rem}
  .directory-search{flex:1 1 100%;max-width:none}

}