/*
 * Page d'accueil.
 * Reprend les cartes de lieu de l'annuaire : une adresse s'affiche pareil
 * partout sur le site, c'est ce qui fait qu'on la reconnaît.
 */

/* Les sections du thème de 2020 portent margin: 60px 0 90px. Sur la home
   refondue, la respiration vient des sections elles-mêmes. */
.home .home-reperes,
.home .home-lieux,
.home .home-annuaire,
.home .home-actus,
.home .home-edito { margin: 0; }

/* SEPARER LES SECTIONS.
   Elles s'enchainaient sur le meme fond blanc, sans rien pour dire ou l'une
   finit et ou l'autre commence : on lisait un seul document de six mille
   pixels. Un fond sur une section sur deux, et un filet, suffisent. */
.home-lieux,
.home-annuaire,
.home-actus,
.home-edito {
  padding-block: var(--section);
}

.home-annuaire {
  background: var(--surface-2);
  border-block: 1px solid var(--rule-soft);
}
.home-lieux .container,
.home-annuaire .container,
.home-actus .container { max-width: var(--wrap); }

/* Les ancres tombaient sous l'en-tete fixe : il mesure 89px et ne bouge pas. */
.home-lieux,
.home-annuaire,
.home-edito { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* --- reperes --- */

/* Rien, au-dessus de la ligne de flottaison, ne disait que le site avait cesse
   d'etre une page sur un lac pour devenir un annuaire national. Trois nombres
   le disent, et chacun est une porte. */
.home-reperes {
  background: var(--accent);
  color: var(--on-accent);
  padding-block: 1.5rem;
}
.home-reperes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 3.5rem;
}
/* La mise en colonne etait portee par le <a>. Les reperes sont devenus des
   chiffres, pas des liens : elle passe sur le <li>. */
.home-reperes li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .4rem .6rem;
}
.repere-nombre {
  font-family: var(--font-data);
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  /* En francais le separateur de milliers est une espace. Dans une chasse fixe
     elle vaut un caractere plein : « 1 914 » s'ecartait en « 1   914 ». */
  word-spacing: -.3em;
}
.repere-mot {
  font-size: var(--step--1);
  opacity: .85;
}

/* --- editorial de 2020 --- */

/* Le texte s'etalait sur les 1 230 px du conteneur : des lignes de deux cents
   caracteres, que l'oeil ne sait pas suivre d'une fin de ligne au debut de la
   suivante. On revient a une mesure de lecture. */
.home-edito {
  background: var(--surface-2);
  border-top: 1px solid var(--rule-soft);
}
/* La MEME largeur que les autres sections. Le bloc avait ete resserre a 52 rem
   pour la mesure de lecture ; il sortait alors du gabarit de la page, seul bloc
   plus etroit que tout le reste. La coherence de la page passe devant : le
   conteneur commun, comme les adresses et l'annuaire.

   Le texte respire par autre chose que sa largeur -- interlignage a 1,75 et
   paragraphes courts. */
.home-edito .container {
  max-width: var(--wrap);
}

/* Le vrai coupable n'etait pas la largeur mais l'alignement : le texte est
   justifie SANS cesure, dans des colonnes de 350 px. Justifier sans couper les
   mots, c'est demander au navigateur d'etirer les espaces -- d'ou les rivieres
   blanches qui traversent le paragraphe et que l'oeil suit au lieu de lire les
   lignes. On revient au drapeau, et on autorise la cesure la ou elle aide. */
.home-edito.post-content p,
.home-edito.post-content li {
  font-size: var(--step-0);
  line-height: 1.75;
  hyphens: auto;
}

/* Le theme de 2020 met TOUS les h1 et h2 en capitales. L'annuaire ne le fait
   plus, et la page d'accueil se retrouvait a parler de deux voix : « OU MANGER
   DES HUITRES A HOSSEGOR ? » trois blocs sous « Ou deguster des huitres a
   Hossegor ». Le contenu editorial s'aligne sur le reste du site. */
.home-edito.post-content h2 {
  font-size: var(--step-2);
  margin: 2.5rem 0 .75rem;
  text-transform: none;
  line-height: 1.2;
}
.home-edito.post-content h2:first-child { margin-top: 0; }

/* Les h3 sortaient a la meme taille que les h2 : trois niveaux de titre pour
   deux tailles, donc aucune hierarchie lisible. */
.home-edito.post-content h3 {
  margin: 1.75rem 0 .4rem;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-transform: none;
}
/* Le texte de 2020 porte vingt <strong> pour dix paragraphes : du gras de
   mot-cle, pas du gras de sens. Il reste du texte, il cesse de crier. */
.home-edito strong {
  font-weight: 600;
  color: inherit;
}
.home-edito img {
  height: auto;
  border-radius: var(--radius);
}

.home-annuaire { background: var(--surface-2); }

.home-section-entete { margin: 0 0 1.75rem; }
.home-section-entete h2 {
  font-family: var(--font-titre);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  text-transform: none;
  text-align: left;
  margin: 0 0 .5rem;
}
.home-section-intro {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.home-section-intro strong { color: var(--ink); }

/* l'accroche du hero remplace l'ancien h2, qui doublonnait le h1 */
.home-accroche {
  font-size: var(--step-1);
  line-height: 1.35;
  margin: .35rem 0 0;
}

/* ---- la carte de France et ses régions ---- */

.home-annuaire-corps {
  /* La carte prend toute la largeur : les trois axes sont passes en dessous,
     cote a cote. Elle n'a plus de liste a son flanc. */
  display: block;
}

.carte-accueil {
  aspect-ratio: 4 / 3;
  min-height: 340px;
}
.carte-accueil .leaflet-tile-pane {
  filter: grayscale(.72) saturate(.5) brightness(1.09) contrast(.86);
}
.carte-region-disque { cursor: pointer; transition: fill-opacity .15s ease; }
.carte-region-disque:hover { fill-opacity: 1; }

.carte-infobulle.leaflet-tooltip {
  font-family: var(--font-texte);
  font-size: var(--step--1);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .35rem .6rem;
}
.carte-infobulle.leaflet-tooltip-top::before { border-top-color: var(--rule); }

.home-regions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.home-regions a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-2);
  font-size: var(--step--1);
  background: var(--ground);
  border: 1px solid var(--rule-soft);
}
.home-regions a:hover { border-color: var(--accent); color: var(--accent); }
.home-region-nom { font-size: var(--step-0); }
/* « 127 » se coupait en « 12 / 7 » sous Provence-Alpes-Cote d'Azur :
   le nom pousse, le nombre cede. Un nombre ne se coupe jamais. */
.home-region-nombre {
  font-family: var(--font-data);
  color: var(--ink-3);
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.home-regions a:hover .home-region-nombre { color: var(--accent); }

/* --- l'axe « type », a cote de l'axe « region » --- */

.home-types {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}
.home-types-titre {
  margin: 0 0 .75rem;
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.home-types ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .5rem;
}
.home-types a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .9rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--ink-2);
  text-decoration: none;
}
.home-types a:hover,
.home-types a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.home-type-nom { font-size: var(--step-0); }
.home-type-nombre {
  flex: 0 0 auto;
  font-family: var(--font-data);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-3);
}
.home-types a:hover .home-type-nombre { color: var(--accent); }

.home-annuaire-action { margin: 1.75rem 0 0; }

/* ---- les titres de carte sont des h3 sur la home, h2 dans l'annuaire ---- */

.lieu-carte h3 {
  font-family: var(--font-titre);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 .3rem;
  text-transform: none;
  text-align: left;
  text-indent: 0;
  overflow-wrap: anywhere;
}
.lieu-carte:hover h3 { color: var(--accent); }

@media (max-width: 860px) {
  /* La regle de bascule en une colonne n'a plus d'objet : le corps de la
     section est en `display: block` a toutes les largeurs depuis que les trois
     axes sont passes SOUS la carte. */
  .home-axes {
    gap: 1.25rem;
  }
}

/* La carte du pied de page : le lac, pas un plan de ville. */
.carte-container { max-width: var(--wrap); margin: 0 auto; padding: 0 15px var(--section); }
.carte-pied { aspect-ratio: 21 / 9; min-height: 260px; }
.carte-pied .leaflet-tile-pane {
  filter: grayscale(.70) saturate(.55) brightness(1.08) contrast(.88);
}



/* --- les trois axes de l'annuaire --- */

/* Les regions sortaient en liste a cote de la carte, les bassins et les types
   en grilles de boites en dessous : trois presentations pour trois choses de
   meme nature, empilees, qui se ressemblaient assez pour qu'on ne sache pas
   laquelle regarder. Meme forme, cote a cote, et le choix se fait d'un coup. */
.home-axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
}
.home-axe-titre {
  margin: 0 0 .15rem;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
}
.home-axe-aide {
  margin: 0 0 .75rem;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.home-axe ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.home-axe a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .75rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--ink-2);
  font-size: var(--step--1);
  text-decoration: none;
}
.home-axe a:hover,
.home-axe a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.home-axe-nombre {
  flex: 0 0 auto;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-3);
}
.home-axe a:hover .home-axe-nombre { color: var(--accent); }
.home-axe-tout a {
  border-style: dashed;
  justify-content: center;
  color: var(--accent-2);
}