/* ===========================================================================
   L'ANNUAIRE DES ÉTABLISSEMENTS — /hotels-recrutement-essai
   Écrit le 25/10/2026.

   **UNE LISTE, PAS UNE VITRINE.** L'ancienne page posait des cartes à photo
   pleine largeur : belles, lourdes, et impossibles à parcourir. Celui qui
   vient ici cherche un nom, une ville et un nombre — on les lui donne sur une
   ligne, et la ligne tient à l'œil.

   Charte : marine #132032, or foncé #996515, crème #F9F5F0, bord #E3DACB,
   gris de texte #5C6672. **Aucun fond noir**, aucune animation depuis
   l'opacité zéro.
   =========================================================================== */

.annuaireMain {
  max-width: 1160px;
  margin: 0 auto;
  /* **LES 80 px DE L'EN-TÊTE FIXE** (header.css) : chaque page les réserve
     elle-même. Sans eux, le titre passait sous le bandeau — vu sur capture
     le 25/10/2026. */
  padding: calc(80px + 2.5rem) 1.5rem 4rem;
}

/* --- la porte : sans compte, ou compte sans droit ----------------------- */

.annuairePorte {
  max-width: 34rem;
  margin: 2rem auto;
  padding: 2.5rem;
  background: #FFFFFF;
  border: 1px solid #E3DACB;
  border-radius: 10px;
  text-align: center;
}

.annuaireSur {
  margin: 0 0 1rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #996515;
}

.annuairePorte h1 {
  margin: 0 0 1.2rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  color: #132032;
}

.annuairePorteTexte {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #5C6672;
}

.annuaireAvis {
  margin: 1.4rem 0 0;
  padding: .9rem 1.1rem;
  font-size: .92rem;
  line-height: 1.55;
  color: #132032;
  background: #F9F5F0;
  border: 1px solid #E3DACB;
  border-radius: 8px;
}

.annuaireBoutons {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  margin-top: 1.6rem;
}

/* --- les boutons -------------------------------------------------------- */

.annuaireBtn,
.annuaireBtnPlat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.4rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
}

.annuaireBtn {
  color: #FFFFFF;
  background: #996515;
  border: 1px solid #996515;
}

.annuaireBtn:hover { background: #7A5011; border-color: #7A5011; }

.annuaireBtnPlat {
  color: #132032;
  background: #FFFFFF;
  border: 1px solid #E3DACB;
}

.annuaireBtnPlat:hover { border-color: #996515; }

.annuaireBtn:focus-visible,
.annuaireBtnPlat:focus-visible { outline: 3px solid #B8860B; outline-offset: 2px; }

/* --- l'en-tête de la liste ---------------------------------------------- */

.annuaireTete { margin-bottom: 1.8rem; }

.annuaireTete h1 {
  margin: 0 0 .5rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: #132032;
}

.annuaireSous {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #5C6672;
}

/* --- la recherche -------------------------------------------------------- */

.annuaireForm {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8rem;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  background: #F9F5F0;
  border: 1px solid #E3DACB;
  border-radius: 10px;
}

.annuaireChamp { flex: 1 1 15rem; }

.annuaireChamp span {
  display: block;
  margin-bottom: .35rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5C6672;
}

.annuaireChamp input {
  width: 100%;
  min-height: 44px;
  padding: 0 .9rem;
  font: inherit;
  font-size: .95rem;
  color: #132032;
  background: #FFFFFF;
  border: 1px solid #E3DACB;
  border-radius: 8px;
}

.annuaireChamp input:focus-visible { outline: 3px solid #B8860B; outline-offset: 1px; }

/* **CE QUE LA PAGE DIT QUAND ON N'A RIEN CHERCHÉ.** Elle n'a pas de liste à
   montrer : elle explique ce qu'on peut lui demander, et combien elle sait. */
.annuaireInvite {
  max-width: 38rem;
  margin: 2.5rem auto;
  padding: 1.6rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #5C6672;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E3DACB;
  border-radius: 10px;
}

.annuaireAide {
  align-self: center;
  font-size: .82rem;
  color: #5C6672;
}

.annuaireEffacer {
  align-self: center;
  font-size: .88rem;
  color: #996515;
  text-decoration: underline;
}

/* --- la barre de réglages ------------------------------------------------ */

.annuaireBarre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding-bottom: .8rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid #E3DACB;
}

.annuaireCompte { margin: 0; font-size: 1.05rem; color: #132032; }
.annuaireCompte strong { color: #996515; }

.annuaireReglages {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0;
  font-size: .9rem;
  color: #5C6672;
}

.annuaireTri a,
.annuairePar a { margin-left: .4rem; color: #996515; }
.annuaireTri b,
.annuairePar b { margin-left: .4rem; color: #132032; }

/* --- la liste ------------------------------------------------------------ */

.annuaireListe { margin: 0; padding: 0; list-style: none; }

/* **QUATRE COLONNES, ET LE NOM PREND LA PLACE QUI RESTE.** */
.annuaireLigne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem 11rem 7rem;
  align-items: center;
  gap: 1rem;
  padding: 1rem .25rem;
  border-bottom: 1px solid #E3DACB;
}

.annuaireLigne:hover { background: #F9F5F0; }

.annuaireNom {
  font-size: 1.02rem;
  font-weight: 600;
  color: #132032;
  overflow-wrap: anywhere;
}

.annuaireLieu { font-size: .92rem; color: #5C6672; }

.annuairePostes { font-size: .9rem; color: #5C6672; }
.annuairePostesOui { font-weight: 600; color: #996515; }

.annuaireFiche { text-align: right; }
.annuaireFiche a { font-size: .9rem; font-weight: 600; color: #996515; text-decoration: underline; }

.annuaireAucun {
  padding: 2.5rem 0;
  font-size: 1rem;
  color: #5C6672;
  text-align: center;
}

/* --- la pagination -------------------------------------------------------- */

.annuairePages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.6rem;
  font-size: .92rem;
}

.annuairePageSur { margin-right: .6rem; color: #5C6672; }

.annuairePages a,
.annuairePages b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 .5rem;
  border: 1px solid #E3DACB;
  border-radius: 8px;
  text-decoration: none;
}

.annuairePages a { color: #996515; background: #FFFFFF; }
.annuairePages a:hover { border-color: #996515; }
.annuairePages b { color: #FFFFFF; background: #132032; border-color: #132032; }

/* --- le téléphone --------------------------------------------------------- */

@media (max-width: 760px) {
  .annuaireMain { padding: calc(80px + 1.5rem) 1rem 3rem; }
  .annuaireTete h1 { font-size: 1.55rem; }
  .annuairePorte { padding: 1.6rem; }
  .annuairePorte h1 { font-size: 1.35rem; }

  /* **LA LIGNE DEVIENT UN BLOC.** Quatre colonnes de 375 px donneraient
     quatre colonnes illisibles ; on empile, et le lien passe en dessous. */
  .annuaireLigne {
    grid-template-columns: 1fr;
    gap: .3rem;
    padding: 1rem .25rem 1.1rem;
  }

  .annuaireFiche { text-align: left; margin-top: .3rem; }
  .annuaireBarre { flex-direction: column; align-items: flex-start; }

  /* **UN CHAMP NE DOIT PAS GRANDIR EN HAUTEUR.** Empilés, les `flex: 1 1 15rem`
     se partageaient la hauteur du bloc et laissaient de grands vides entre le
     libellé et la case suivante. */
  .annuaireForm { flex-direction: column; align-items: stretch; }
  .annuaireChamp { flex: 0 0 auto; }
  .annuaireBoutons { flex-direction: column; }
}