/* =========================================================================
   CONSEILLERE EN IMAGE, feuille de style unique.

   PARTI PRIS : « Moderne net ». Plus Jakarta Sans partout, papier chaud, deux
   cercles qui se recouvrent en signe. Colonne de lecture etroite
   et filets fins : un site de guides longs se juge au confort de lecture, pas
   au nombre de vignettes visibles au premier ecran.

   LES POLICES SONT SERVIES PAR NOUS, jamais par Google Fonts. Une police
   distante, c'est un aller-retour de plus sur le chemin critique et un saut de
   rendu ; et Google Fonts, servi depuis les Etats-Unis, expose une adresse IP
   europeenne a chaque visite, ce qu'un tribunal allemand a deja juge contraire
   au RGPD. Les trois graisses ci-dessous font 36 ko a elles trois.
   ========================================================================= */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/jakarta-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  /* `swap` : le texte s'affiche tout de suite dans la police de secours et
     bascule a l'arrivee. Le contraire, c'est trois cents millisecondes de page
     blanche et un score de performance qui s'effondre. */
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/jakarta-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/jakarta-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   LES JETONS, DEFINIS DEUX FOIS ET PAS UNE DE MOINS.

   1. `:root` nu porte le theme clair. C'est la definition de repli : aucune
      couleur ne doit avoir sa SEULE definition dans un bloc conditionnel,
      sinon elle disparait dans les cas que le bloc ne couvre pas.
   2. `@media (prefers-color-scheme: dark)` porte le sombre.

   LE THEME SUIT LE REGLAGE DU SYSTEME, ET RIEN D'AUTRE. Pas de bouton, donc
   pas d'attribut a respecter, pas de memorisation, et surtout pas une ligne de
   JavaScript sur tout le site : le lecteur a deja choisi une fois pour toutes
   dans ses reglages, lui redemander sur chaque site est une question de trop.
   ------------------------------------------------------------------------- */

:root {
  /* LA CHARTE INSTITUTIONNELLE.
     Fond blanc, encre presque noire, et un bleu marine profond qui porte
     l'ensemble. Le tricolore intervient en filets et en accents, jamais en
     aplats : trois bandes de couleur vive sur une page d'annuaire feraient
     drapeau, pas administration.

     CE SITE N'EST PAS UN SERVICE PUBLIC ET NE DOIT PAS EN AVOIR L'AIR.
     D'ou l'ecart delibere avec les codes de l'Etat : ni le bleu `#000091` du
     Systeme de design de l'Etat, ni son rouge `#E1000F`, ni Marianne, ni le
     bloc tricolore officiel. Un annuaire prive qui emprunte ces signes laisse
     croire a une caution publique qu'il n'a pas, et ces elements sont
     reserves aux services de l'Etat. Serieux et francais, oui ; officiel,
     non. */
  --papier: #FFFFFF;
  --papier-creux: #F2F5FA;
  --encre: #131A24;
  --encre-douce: #4A5568;
  --filet: #DEE4EE;
  --filet-fort: #C2CCDC;

  /* LE BLEU, EN DEUX VALEURS, ET CE N'EST PAS UN CAPRICE.
     `#12326B` est la couleur de marque : sur blanc elle donne 10,9:1, donc
     elle porte du texte sans reserve. Sur fond noir elle tombe a 2,1:1 et
     devient illisible, d'ou une seconde valeur eclaircie que le theme sombre
     substitue. Meme famille, meme lecture, et personne ne bute sur un lien
     qu'il ne distingue pas du texte. */
  --bleu: #12326B;
  --bleu-lien: #12326B;
  --bleu-survol: #0B2049;

  /* LE ROUGE, en accent et en couleur de LIEN. `#B01B2E` tient 6,4:1 sur
     blanc, `#9A1728` monte a 8,3:1 et sert donc au texte des liens, qui est
     petit et lu longtemps. */
  --rouge: #B01B2E;
  --rouge-lien: #9A1728;

  /* LA COULEUR D'UN LIEN, DISTINCTE DU BLEU DE STRUCTURE.
     Le bleu reste celui des anneaux de focus, des libelles de section et des
     filets ; le rouge est celui des liens. Deux jetons plutot qu'un seul : le
     meme jeton servait aux liens ET au filet tricolore ET aux anneaux de
     focus, donc teindre les liens en rouge aurait teint les trois. */
  --lien: var(--rouge-lien);
  --lien-survol: var(--rouge);

  /* LE PAVE INVERSE, ET IL NE DOIT PAS BASCULER AVEC LE THEME.
     Ces deux jetons vont PAR PAIRE, fond et encre ensemble, et restent
     clair-sur-sombre dans les deux themes : un encart dont le fond suivrait le
     theme mais pas le texte disparaitrait entierement en sombre. */
  --inverse-fond: #12326B;
  --inverse-encre: #FFFFFF;

  /* L'APPEL A L'ACTION, EN ROUGE.
     Une seule couleur pour tout ce sur quoi on veut qu'on clique : le bouton
     de rendez-vous, celui de l'entete et celui qui flotte sur mobile. Le blanc
     dessus tient 6,9:1. */
  --action: #B01B2E;
  --action-survol: #8E1526;

  /* UNE SEULE FAMILLE, TROIS GRAISSES. Les deux variables restent distinctes
     parce que les tailles et l'interlettrage different entre un titre et un
     paragraphe, pas la police. */
  --titre: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texte: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Des angles presque droits. L'arrondi genereux fait application grand
     public ; l'angle vif fait document. */
  --rayon: 2px;
  --rayon-bloc: 3px;

  --rang: 72rem;
  --mesure: 38rem;
  --pas: clamp(1rem, 3vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Fond noir franc, comme demande. Les panneaux sont legerement releves
       pour rester distincts du fond sans virer au gris. */
    --papier: #000000;
    --papier-creux: #0E131C;
    --encre: #F2F5FA;
    --encre-douce: #A8B3C4;
    --filet: #1C2430;
    --filet-fort: #2B3542;
    /* Le bleu de marque est illisible sur noir : on eclaircit ce qui porte du
       texte, on garde la couleur pleine pour les aplats. */
    --bleu-lien: #8AB0EC;
    --bleu-survol: #A9C6F4;
    --rouge: #E4576B;
    --rouge-lien: #F08A9B;
    --lien: #F08A9B;
    --lien-survol: #F7B3BF;
    /* Le bouton porte son propre fond : il ne suit pas le theme, mais il
       s'eclaircit un peu sur noir pour ne pas paraitre terne. */
    --action: #C42038;
    --action-survol: #D93650;
    --inverse-fond: #12326B;
    --inverse-encre: #FFFFFF;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  /* Un peu plus genereux que le reglage d'origine de tips-airbnb, 1 rem et
     1,6 : ce site sert des guides de dix minutes et non des fiches, et deux
     dixiemes d'interligne changent le confort au troisieme ecran. */
  font-size: 1.0625rem;
  line-height: 1.7;
  /* Le crenage optique change vraiment quelque chose sur une old-style en
     grande taille : sans lui, « Ta » et « Vo » s'ecartent. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

/* Le rang : la colonne unique qui tient toute la page. Une seule definition
   de la largeur et des marges laterales, partout. */
.rang {
  width: 100%;
  max-width: var(--rang);
  margin-inline: auto;
  padding-inline: var(--pas);
}

/* Le lien d'evitement. Invisible tant qu'on ne l'atteint pas au clavier, et
   parfaitement visible des qu'on y arrive : un lien cache en permanence est
   un lien inutile. */
.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--inverse-fond);
  color: var(--inverse-encre);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--rayon) 0;
  font-family: var(--texte);
}
.saut:focus {
  left: 0;
}

/* ------------------------------------------------------------------ entete */

/* LE FILET TRICOLORE, EN TETE DE PAGE.
   Trois centimes de hauteur, sur toute la largeur. C'est le signe francais le
   plus economique qui soit : il se lit en un coup d'oeil, il ne coute aucune
   image, et il n'imite aucun embleme officiel. Trois bandes plus epaisses
   feraient drapeau plante sur la page, ce qui est exactement l'effet a eviter.

   `aria-hidden` cote gabarit : c'est une decoration, elle n'a rien a annoncer. */
/* LE BANDEAU FIXE : le filet et l'entete voyagent ENSEMBLE.
   Deux `sticky` separes se decalent au defilement, le filet restant colle en
   haut pendant que l'entete glisse dessous. Un seul conteneur colle, et les
   deux restent solidaires. */
.bandeau {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--papier);
}

.tricolore {
  height: 3px;
  /* La bande centrale n'est PAS `--papier` : sur fond blanc elle disparaitrait
     et le filet se lirait comme deux barres separees sans rapport. Un gris tres
     clair la rend presente sans la faire ressortir. */
  background: linear-gradient(
    to right,
    var(--bleu) 0 33.333%,
    #DDE3EC 33.333% 66.666%,
    var(--rouge) 66.666% 100%
  );
}

/* En theme sombre, la bande blanche disparaitrait dans le fond noir et le
   filet se lirait bleu-trou-rouge. On la remonte au gris clair. */
@media (prefers-color-scheme: dark) {
  .tricolore {
    background: linear-gradient(
      to right,
      var(--bleu-lien) 0 33.333%,
      #E8ECF3 33.333% 66.666%,
      var(--rouge) 66.666% 100%
    );
  }
}

.entete {
  border-bottom: 1px solid var(--filet-fort);
  /* Une ombre a peine perceptible : elle ne se voit qu'une fois le contenu
     passe DESSOUS, ce qui est exactement le moment ou il faut distinguer la
     barre du texte qui defile. */
  box-shadow: 0 1px 0 rgba(19, 26, 36, 0.04), 0 6px 16px -12px rgba(19, 26, 36, 0.5);
}

/* L'ancre de defilement passe SOUS la barre.
   Sans ce decalage, cliquer une entree du sommaire d'un guide amene le titre
   vise juste derriere la barre fixe, ou il est invisible : le lecteur croit
   que le lien n'a pas marche. */
:target {
  scroll-margin-top: 6.5rem;
}
html {
  scroll-padding-top: 6.5rem;
}

.entete .rang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
  flex-wrap: wrap;
}

.marque {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* L'ACCROCHE SOUS LE NOM, pas a cote.
   Alignees sur une seule ligne, les deux se lisaient comme deux elements de
   navigation de meme rang. Empilees, le nom devient le logotype et l'accroche
   ce qu'elle est : une ligne de service, plus petite et plus discrete. */
.marque-texte {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.marque-nom {
  font-family: var(--titre);
  font-size: 1.2rem;
  /* Capitales largement espacees : c'est ce qui fait lire « CONSEILLERE EN
     IMAGE » comme un logotype et non comme un titre de paragraphe. */
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
}

/* Le marque-page, aligne sur la ligne de base du nom. */
.marque-signe {
  color: var(--encre);
  flex: none;
}

.marque-baseline {
  font-size: 0.72rem;
  color: var(--encre-douce);
  letter-spacing: 0.06em;
  line-height: 1.2;
}

@media (max-width: 26rem) {
  .marque-baseline {
    display: none;
  }
}

.nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a:focus-visible {
  border-bottom-color: var(--bleu-lien);
  color: var(--bleu-lien);
}

.nav-lang {
  color: var(--encre-douce);
}

/* -------------------------------------------------------------------- hero */

.hero {
  border-bottom: 1px solid var(--filet);
}

.hero .rang {
  padding-block: clamp(3rem, 9vw, 7rem);
  /* CENTRE, et c'est un parti pris d'accueil et non une regle de site : c'est
     la seule page ou l'on n'a rien a lire, seulement une promesse a poser. Les
     pages de lecture, elles, restent alignees a gauche, parce qu'un paragraphe
     centre se lit mal des la troisieme ligne. */
  text-align: center;
}

.hero .rang::before {
  content: '';
  display: block;
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--bleu);
  margin: 0 auto 1.75rem;
}

.hero-titre {
  font-family: var(--titre);
  /* Volontairement enorme. C'est le seul endroit du site ou la typographie
     parle avant le texte, et c'est ce qui distingue une revue d'un blog. */
  font-size: clamp(2.75rem, 9vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 auto;
  max-width: 18ch;
}

.hero-intro {
  font-family: var(--titre);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.5;
  font-weight: 600;
  /* En encre pleine et non en encre douce : centree et en gras, une intro
     grisee donnerait l'impression d'un texte desactive. */
  color: var(--encre);
  max-width: 52ch;
  margin: 1.75rem auto 0;
}

/* ------------------------------------------------------- listes de guides */

.section-guides {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.section-titre {
  font-family: var(--texte);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bleu-lien);
  font-weight: 600;
  margin: 0 0 1.5rem;
}

.section-index .section-titre-h1::before {
  content: '';
  display: block;
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--bleu);
  margin-bottom: 1.5rem;
}

.section-titre-h1 {
  font-family: var(--titre);
  font-size: clamp(2rem, 5vw, 3.25rem);
  text-transform: none;
  letter-spacing: -0.025em;
  color: var(--encre);
  line-height: 1.05;
  margin-bottom: 2.5rem;
}

.guides {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet);
}

.guide {
  border-bottom: 1px solid var(--filet);
}

.guide-lien {
  display: grid;
  /* La vignette d'abord, le texte ensuite. Sur telephone elle se reduit sans
     disparaitre : c'est elle qui donne envie d'ouvrir, la supprimer au premier
     manque de place reviendrait a la juger accessoire. */
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.5rem;
  text-decoration: none;
  align-items: start;
}

@media (min-width: 48rem) {
  .guide-lien {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2rem;
    padding-block: 2rem;
  }
}

.guide-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rayon-bloc);
  background: var(--papier-creux);
  transition: transform 0.25s ease;
}

/* Un article sans couverture ne laisse pas un trou : la place est tenue, en
   gris de fond. Une grille dont une ligne saute est plus laide qu'une
   vignette vide. */
.guide-image-vide {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--rayon-bloc);
  background: var(--papier-creux);
}

.guide-titre {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--titre);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.guide-resume {
  display: block;
  margin-top: 0.5rem;
  color: var(--encre-douce);
  max-width: 62ch;
  font-size: 0.98rem;
}

.guide-meta {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--encre-douce);
}

/* Au survol, la vignette avance imperceptiblement. C'est le seul mouvement de
   la liste : si chaque ligne se soulevait, la page ferait sapin de Noel. */
.guide-lien:hover .guide-image,
.guide-lien:focus-visible .guide-image {
  transform: scale(1.02);
}

.guide-lien:hover .guide-titre,
.guide-lien:focus-visible .guide-titre {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--bleu-lien);
}

.plus {
  margin-top: 2rem;
}

.plus a {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid var(--lien);
  padding-bottom: 3px;
  color: var(--lien);
}

/* ----------------------------------------------------------------- article */

.article-tete {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem;
}

.fil {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--encre-douce);
  margin: 0 0 1.5rem;
}

/* SUR PETIT ECRAN, LE FIL PREND TROP DE PLACE.
   En capitales espacees, quatre niveaux passent sur trois lignes et le fil
   pese autant que le titre qu'il precede. Il n'est pourtant qu'un repere de
   navigation : il se lit quand on le cherche. */
@media (max-width: 40rem) {
  .fil {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    margin-bottom: 1.1rem;
  }
}

.fil a {
  text-decoration: none;
}

.fil a:hover,
.fil a:focus-visible {
  color: var(--bleu-lien);
}

/* LE TITRE D'ARTICLE.
   `max-width` SANS marges automatiques : le texte se centrait a l'interieur
   d'une boite de vingt caracteres calee a gauche, donc le titre paraissait
   decale par rapport au chapeau. Les marges auto centrent la boite elle-meme. */
.article-titre {
  overflow-wrap: anywhere;
  font-family: var(--titre);
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.028em;
  font-weight: 700;
  /* `auto` sur les cotes, et PAS un `margin-inline` pose plus haut : le
     `margin: 0` de cette meme regle l'ecrasait, et le titre restait cale a
     gauche dans sa boite de vingt caracteres pendant que son texte se
     centrait dedans. */
  margin: 0 auto;
  max-width: 20ch;
}

.chapeau {
  font-family: var(--titre);
  font-size: clamp(1.1rem, 2.1vw, 1.35rem);
  line-height: 1.5;
  color: var(--encre-douce);
  max-width: 52ch;
  margin: 1.5rem 0 0;
}

/* LA SIGNATURE. Le portrait porte `alt=""` : le nom est ecrit juste a cote,
   une alternative le ferait annoncer deux fois. */
.signature {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2rem;
}

.signature-portrait {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--papier-creux);
}

.signature-texte {
  margin: 0;
  line-height: 1.35;
}

.signature-nom {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
}

.signature-role {
  display: block;
  font-size: 0.85rem;
  color: var(--encre-douce);
}

.article-meta {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--encre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.sep {
  color: var(--filet);
}

.couverture {
  width: 100%;
  max-width: var(--rang);
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  padding-inline: var(--pas);
}

.couverture img {
  display: block;
  width: 100%;
  /* Un format panoramique impose : les images de la source ont des ratios
     varies, et une couverture qui change de hauteur d'un article a l'autre
     casse le rythme de la collection. */
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--rayon-bloc);
}

/* Deux colonnes a partir du grand format : le sommaire a gauche, colle, et la
   prose a droite. En dessous, une seule colonne et le sommaire redevient un
   bloc ordinaire en tete d'article. */
/* `minmax(0, 1fr)` ET PAS LA COLONNE IMPLICITE PAR DEFAUT.
   Une piste de grille non declaree vaut `auto`, et une piste `auto` se
   dimensionne sur le contenu le plus large qu'elle contient, sans jamais
   descendre en dessous. Le corps des articles porte des tableaux en
   `white-space: nowrap` dont la largeur naturelle depasse les six cents
   pixels : la grille prenait cette largeur, et toute la page avec elle. Sur un
   telephone de 375 px, le document defilait jusqu'a 624. `minmax(0, 1fr)`
   autorise la piste a descendre sous son contenu, et le tableau redevient ce
   qu'il devait etre, un bloc qui defile dans son propre cadre. */
.article-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 60rem) {
  .article-colonnes {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

.sommaire {
  font-size: 0.9rem;
}

@media (min-width: 60rem) {
  .sommaire {
    position: sticky;
    /* SOUS LA BARRE FIXE, PAS DERRIERE ELLE.
       `2rem` etait juste tant que rien ne flottait en haut : depuis que
       l'entete est collee, le sommaire s'arretait DERRIERE elle et ses
       premieres entrees devenaient invisibles. */
    top: 7.5rem;
    align-self: start;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}

.sommaire-titre {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bleu-lien);
  font-weight: 600;
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--filet);
}

.sommaire ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: som;
}

.sommaire li {
  counter-increment: som;
  margin-bottom: 0.7rem;
  line-height: 1.35;
}

.sommaire a {
  text-decoration: none;
  color: var(--encre-douce);
  display: block;
}

.sommaire a::before {
  content: counter(som) '. ';
  color: var(--filet);
  font-variant-numeric: tabular-nums;
}

.sommaire a:hover,
.sommaire a:focus-visible {
  color: var(--bleu-lien);
}

/* ------------------------------------------------------------------- prose */

/* Tout ce qui suit habille du HTML qu'on ne genere pas nous-memes : il vient
   de la source, on ne peut donc pas y poser de classes. D'ou le style par
   BALISE, entierement contenu dans `.prose` pour ne rien deborder ailleurs. */
.prose {
  font-family: var(--titre);
  font-size: 1.15rem;
  line-height: 1.72;
  max-width: var(--mesure);
  min-width: 0;
  /* Une adresse longue collee dans un lien, un nom de fichier, une reference :
     sans ca, un seul mot insecable de quatre cents pixels ressort du cadre sur
     un telephone. */
  overflow-wrap: anywhere;
}

.prose > *:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0 0 1.4em;
}

/* La lettrine du premier paragraphe. Le detail typographique qui dit
   « revue » avant meme qu'on ait lu un mot. Elle ne s'applique qu'au premier
   paragraphe reel, jamais a une liste ou un tableau qui ouvrirait l'article. */
.prose > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.9;
  font-weight: 800;
  padding-right: 0.08em;
  padding-top: 0.06em;
  color: var(--bleu);
  font-weight: 600;
}

.prose h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 2.4em 0 0.7em;
  /* Le filet au-dessus du titre separe les sections plus surement qu'un
     grand blanc, et il tient meme quand deux sections sont courtes. */
  padding-top: 0.9em;
  border-top: 1px solid var(--filet);
}

.prose h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  line-height: 1.25;
  font-weight: 600;
  margin: 2em 0 0.6em;
}

.prose a {
  color: var(--lien);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--lien) 45%, transparent);
}

.prose a:hover,
.prose a:focus-visible {
  text-decoration-color: var(--lien);
}

.prose ul,
.prose ol {
  margin: 0 0 1.4em;
  padding-left: 1.3em;
}

.prose li {
  margin-bottom: 0.55em;
}

.prose li::marker {
  color: var(--bleu);
}

.prose blockquote {
  margin: 2em 0;
  padding-left: 1.4em;
  border-left: 3px solid var(--bleu-lien);
  font-style: italic;
  color: var(--encre-douce);
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose img {
  display: block;
  width: 100%;
  margin: 2em 0;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-bloc);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 2.5em 0;
}

/* Les tableaux de la source ont jusqu'a cinq colonnes : sur telephone ils
   defilent dans leur propre cadre, ils ne poussent jamais la page. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--texte);
  font-size: 0.92rem;
  margin: 2em 0;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .prose table {
    display: table;
    white-space: normal;
  }
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.7em 1em 0.7em 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}

.prose th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--encre-douce);
  font-weight: 600;
}

.prose strong {
  font-weight: 600;
}

/* ------------------------------------------------------------------ encart */

/* Le bloc qui renvoie vers CleanClac. Inverse, plein cadre : c'est le seul
   endroit du site qui vend quelque chose, il doit se voir comme une page de
   publicite dans une revue, et pas se deguiser en contenu. */
.encart {
  background: var(--inverse-fond);
  color: var(--inverse-encre);
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--rayon-bloc);
  margin-block: clamp(3rem, 7vw, 5rem);
}

/* LE TITRE DE L'ENCART TIENT SUR UNE LIGNE.
   `18ch` cassait « Vous etes conseillere en image ? », qui en fait 32 : la
   question se lisait en deux morceaux, ce qui lui otait son effet d'adresse
   directe. La largeur suit desormais la question la plus longue, et
   `text-wrap: balance` repartit proprement quand l'ecran force le retour. */
.encart-titre {
  font-family: var(--titre);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 0.9rem;
  max-width: 34ch;
  text-wrap: balance;
}

.encart-texte {
  margin: 0 0 1.75rem;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.82);
}

/* Le bouton porte le rouge d'action en aplat. Blanc sur `#B01B2E` donne 6,9:1,
   donc le libelle passe a n'importe quelle taille ; il reste en gras parce
   qu'un bouton se repere a sa masse autant qu'a sa couleur.

   Le commentaire precedent parlait de « rose » et de « Rausch » : un reste de
   tips-airbnb, dont ce projet est issu, qui decrivait une couleur disparue
   depuis deux chartes. */
/* `.bouton` habille aussi bien un lien qu'un vrai <button>. L'element natif
   apporte une bordure et une police qui lui sont propres : sans ces trois
   lignes, le bouton de publication portait un liseré gris que le lien voisin
   n'avait pas. */
.bouton {
  display: inline-block;
  border: 0;
  font: inherit;
  cursor: pointer;
  background: var(--action);
  color: #fff;
  text-decoration: none;
  padding: 0.9rem 1.75rem;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  border-radius: var(--rayon);
  transition: background 0.18s ease, transform 0.18s ease;
}

.bouton:hover,
.bouton:focus-visible {
  background: var(--action-survol);
  transform: translateY(-1px);
}

/* -------------------------------------------------------------- vide, pied */

.vide {
  padding-block: clamp(4rem, 12vw, 8rem);
  max-width: 44ch;
}

.vide h1 {
  font-family: var(--titre);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}

.vide p {
  color: var(--encre-douce);
  font-family: var(--titre);
  font-size: 1.1rem;
  margin: 0 0 1rem;
}

.pied {
  border-top: 1px solid var(--filet);
  margin-top: auto;
}

.pied .rang {
  padding-block: 2.5rem;
}

.pied-marque {
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

.pied-marque {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pied-mentions {
  margin: 0;
  font-size: 0.82rem;
  color: var(--encre-douce);
  max-width: 62ch;
}

/* La mention de non-affiliation : lisible, jamais en avant. Elle doit se
   trouver quand on la cherche, pas concurrencer le contenu. */
.pied-avertissement {
  margin-top: 0.6rem;
  font-size: 0.76rem;
}

/* ------------------------------------------------------------------ divers */

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

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
}

/* Une ancre atteinte ne doit pas se coller au bord haut de la fenetre. */
:target {
  scroll-margin-top: 2rem;
}

/* L'IMPRESSION. Un guide de vingt minutes se sort parfois sur papier pour le
   suivre en logement, un chiffon dans l'autre main. Le chrome part, la prose
   reprend toute la largeur, et les adresses des liens s'ecrivent en clair
   puisqu'on ne peut plus cliquer. */
@media print {
  .entete,
  .pied,
  .sommaire,
  .encart,
  .section-suite,
  .saut {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .prose {
    max-width: none;
    font-size: 11pt;
  }

  .prose a::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }

  .prose h2,
  .prose h3 {
    break-after: avoid;
  }

  .prose img,
  .prose table,
  .prose blockquote {
    break-inside: avoid;
  }
}

/* ============================================================ ce que
   tips-airbnb n'a pas : la reponse directe, le bouton de theme, la fiche
   d'autrice et le bloc de fin de lecture vers Anael.
   ========================================================================= */

/* -------------------------------------------------------------------------
   LA REPONSE DIRECTE.

   Deux a trois phrases qui repondent au titre, juste sous la couverture. C'est
   le passage qu'un modele de langage extrait et cite, et celui que lit le
   visiteur presse. Visuellement distinct sans etre un encart publicitaire :
   un filet de terre cuite a gauche, et rien d'autre.
   ------------------------------------------------------------------------- */
.reponse {
  max-width: var(--mesure);
  margin: 2rem auto 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--bleu);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--encre);
}

.reponse-titre {
  display: block;
  font-family: var(--texte);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--encre-douce);
  margin-bottom: 0.35rem;
}

/* -------------------------------------------------------------------------
   LA FICHE D'AUTRICE, et son bloc d'avis.
   ------------------------------------------------------------------------- */
.section-autrice {
  padding-block: clamp(2rem, 6vw, 4rem);
}

.autrice {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  max-width: var(--mesure);
  margin-inline: auto;
}

/* LE BLOC DE PORTRAIT, qui porte la photo ET son credit d'auteur.
   Sans `flex: 0 0 auto` ici, le conteneur flex ecrase le bloc entier et la
   photo se reduit a une bande verticale : la regle etait posee sur l'image,
   qui n'est plus l'enfant direct depuis l'ajout du credit. */
.autrice-photo {
  flex: 0 0 auto;
  width: 96px;
}

.autrice-portrait {
  display: block;
  width: 96px;
  height: 96px;
  /* Presque carre plutot que rond : une fiche d'annuaire se lit comme un
     document, et l'angle vif y contribue plus qu'on ne croit. */
  border-radius: var(--rayon-bloc);
  object-fit: cover;
  border: 1px solid var(--filet-fort);
}

.autrice-nom {
  font-family: var(--titre);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.autrice-role {
  color: var(--encre-douce);
  font-size: 0.9375rem;
  margin: 0.15rem 0 0.6rem;
}

/* La note est AFFICHEE avec sa source, jamais declaree en `AggregateRating` :
   un balisage d'avis auto-attribue que le site n'heberge pas est ce que les
   regles de donnees structurees sanctionnent par une action manuelle. */
.avis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  margin: 0 0 1rem;
}

.avis-etoiles {
  color: var(--bleu);
  letter-spacing: 0.1em;
}

.avis-vide {
  font-style: italic;
}

.avis a {
  color: var(--lien);
}

/* -------------------------------------------------------------------------
   POUR ALLER PLUS LOIN.

   Deux ou trois articles d'Anael sur le meme theme, en fin de lecture. Sobre
   par choix : ce bloc doit ressembler a une suite de lecture, pas a un pave
   publicitaire, sinon il se fait ignorer comme tel.
   ------------------------------------------------------------------------- */
.plus-loin {
  max-width: var(--mesure);
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
}

.plus-loin-titre {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--encre-douce);
  margin: 0 0 0.6rem;
}

.plus-loin ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plus-loin li + li {
  margin-top: 0.4rem;
}

.plus-loin a {
  color: var(--lien);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   LES PAGES DE TEXTE : a propos, mentions legales.
   ------------------------------------------------------------------------- */
.page-texte {
  max-width: var(--mesure);
  padding-block: clamp(2rem, 6vw, 4rem);
}

.page-texte h1 {
  font-family: var(--titre);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  margin: 0 0 1.5rem;
}

.page-texte h2 {
  font-family: var(--titre);
  font-size: 1.4rem;
  font-weight: 400;
  margin: 2rem 0 0.5rem;
}

.page-texte a {
  color: var(--lien);
}

/* -------------------------------------------------------------------------
   LES RUBRIQUES.

   Cinq liens, toujours les memes. Dessines comme des jalons et non comme des
   boutons : ce sont des reperes de lecture, pas des appels a l'action, et un
   pave de cinq boutons colores en haut de page ferait concurrence au titre.
   ------------------------------------------------------------------------- */
.rubriques {
  /* La barre a besoin d'air AU-DESSUS, sinon elle colle au chapeau et parait
     flotter entre deux blocs sans appartenir a aucun. Le filet du haut ne
     suffit pas : un filet trop pres d'un paragraphe se lit comme un
     soulignement de ce paragraphe. */
  margin-block: clamp(2.5rem, 5vw, 3.5rem) 0;
}

.rubriques ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  /* UN SEUL FILET, EN BAS. Encadree en haut et en bas, la barre se lisait comme
     une bande posee entre deux blocs sans appartenir a aucun des deux. Avec le
     seul filet du bas, elle appartient a ce qui la precede et separe de ce qui
     la suit, ce qui est exactement son role. */
  border-bottom: 1px solid var(--filet);
  padding-block: 0 1.1rem;
}

.rubriques a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  color: var(--encre-douce);
}

.rubriques a:hover,
.rubriques a:focus-visible {
  color: var(--bleu-lien);
  border-color: var(--bleu-lien);
}

/* La rubrique ou l'on se trouve : pleine, pour qu'on sache ou l'on est sans
   avoir a relire l'adresse. */
.rubriques a[aria-current='page'] {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #fff;
}

/* L'etiquette de rubrique, dans le fil d'Ariane d'un guide. */
/* L'ETIQUETTE DE RUBRIQUE EST UN LIEN, ET DOIT SE VOIR COMME TEL.
   Sans soulignement, elle ne se distingue du texte que par sa couleur : le
   rouge et l'encre ne sont separes que de 2,1:1, sous le seuil de 3:1 que
   demande le critere « utilisation de la couleur ». Une personne qui distingue
   mal le rouge ne verrait plus qu'il y a un lien. */
.etiquette {
  color: var(--lien);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}

.etiquette:hover,
.etiquette:focus-visible {
  text-decoration: underline;
}

.section-rubrique {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) 0;
}

/* LA FICHE DEMARRE A LA MEME HAUTEUR QUE LES PAGES D'ANNUAIRE.
   Elle empruntait le calage de l'encart d'autrice, plus haut de quelques
   dizaines de pixels : en passant d'une ville a une fiche, le fil d'Ariane
   sautait. */
.section-fiche {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem);
}

.rubrique-titre {
  font-family: var(--titre);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 800;
  margin: 0.6rem 0 0;
  max-width: 22ch;
}

.rubrique-chapeau {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--encre-douce);
  max-width: 58ch;
  margin: 1rem 0 0;
}

/* Les rubriques au pied de page : c'est ce qui garantit que les cinq hubs sont
   lies depuis CHAQUE page du site, y compris depuis un guide. */
.pied-rubriques {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.9rem;
}

.pied-rubriques a {
  color: var(--encre-douce);
  text-decoration: none;
}

.pied-rubriques a:hover,
.pied-rubriques a:focus-visible {
  color: var(--bleu-lien);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   LE FORMULAIRE DE PROPOSITION.

   Sans JavaScript : la validation qui compte est celle du serveur, les
   attributs HTML ne font qu'eviter un aller-retour quand le navigateur les
   honore. Les libelles sont au-dessus des champs et jamais dedans : un libelle
   en texte de remplacement disparait des qu'on commence a taper, au moment
   precis ou l'on en a besoin.
   ------------------------------------------------------------------------- */
.formulaire {
  max-width: var(--mesure);
  margin-top: 2rem;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 1.75rem;
}

.champ label {
  font-weight: 600;
  font-size: 0.95rem;
}

.champ .option {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--encre-douce);
  letter-spacing: 0.04em;
}

.champ input[type='text'],
.champ input[type='url'],
.champ input[type='email'],
.champ textarea {
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  padding: 0.7rem 0.85rem;
  width: 100%;
}

.champ textarea {
  resize: vertical;
  line-height: 1.6;
}

.champ input:focus-visible,
.champ textarea:focus-visible {
  outline: 2px solid var(--bleu-lien);
  outline-offset: 1px;
  border-color: var(--bleu-lien);
}

.champ input[type='file'] {
  font-family: var(--texte);
  font-size: 0.95rem;
}

.champ .aide {
  font-size: 0.85rem;
  color: var(--encre-douce);
  line-height: 1.5;
}

.champ-case {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7rem;
}

.champ-case label {
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.5;
}

.champ-case input {
  margin-top: 0.3rem;
  flex: none;
  accent-color: var(--bleu);
}

/* LE CHAMP PIEGE. Hors flux et hors ecran, mais PAS `display: none` : certains
   robots ignorent les champs masques de cette facon, et c'est justement eux
   qu'on veut attraper. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.erreurs {
  border-left: 3px solid var(--bleu);
  background: var(--papier-creux);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  margin: 1.5rem 0;
}

.erreurs-titre {
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.erreurs ul {
  margin: 0;
  padding-left: 1.1rem;
}

.erreurs li + li {
  margin-top: 0.25rem;
}

.page-texte code {
  font-size: 0.9em;
  background: var(--papier-creux);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   L'ANNUAIRE.
   ------------------------------------------------------------------------- */
.villes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.villes a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
}

.villes a:hover,
.villes a:focus-visible {
  color: var(--bleu-lien);
  border-color: var(--bleu-lien);
}

.villes-compte {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--encre-douce);
}

.fiches {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.fiche-ligne + .fiche-ligne {
  border-top: 1px solid var(--filet);
}

.fiche-lien {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-decoration: none;
  padding-block: 1rem;
}

.fiche-portrait {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--filet-fort);
}

.fiche-portrait-vide {
  display: block;
  background: var(--papier-creux);
}

.fiche-corps {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.fiche-nom {
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.fiche-lien:hover .fiche-nom,
.fiche-lien:focus-visible .fiche-nom {
  text-decoration: underline;
  text-decoration-color: var(--bleu-lien);
  text-underline-offset: 3px;
}

.fiche-ville,
.fiche-note {
  font-size: 0.9rem;
  color: var(--encre-douce);
}

.fiche-note {
  color: var(--bleu-lien);
}

.fiche-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: 0.95rem;
}

.fiche-liens a {
  color: var(--lien);
}

.fiche-verifiee {
  font-size: 0.85rem;
  color: var(--encre-douce);
  margin-top: 1.25rem;
}

.fiche-verifiee a {
  color: var(--encre-douce);
}

/* -------------------------------------------------------------------------
   L'ANNUAIRE SUR L'ACCUEIL, et le decoupage par region.
   ------------------------------------------------------------------------- */
.bloc-annuaire {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--filet);
}

.bloc-annuaire-intro {
  color: var(--encre-douce);
  margin: 0 0 1.25rem;
  max-width: 52ch;
}

.compteur {
  margin: 1.25rem 0 0;
  color: var(--encre-douce);
  font-size: 0.95rem;
}

.region + .region {
  margin-top: 1.75rem;
}

.region-nom {
  font-family: var(--texte);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--encre-douce);
  margin: 0 0 0.7rem;
}

/* L'INSCRIPTION ASSISTEE PAR LA FICHE GOOGLE.
   Le seul endroit du site ou du JavaScript s'execute. Tout ce qui suit ne sert
   qu'a la page « proposer sa fiche ». */

.recherche-fiche {
  margin: 1.5rem 0 2.5rem;
}

.recherche-fiche label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.recherche-fiche input[type='search'] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet-fort);
  border-radius: 6px;
}

.recherche-fiche input[type='search']:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 1px;
}

/* La liste des suggestions. Elle pousse le contenu plutot que de le recouvrir :
   une liste en surimpression demande une gestion du clic exterieur, du defilement
   et du clavier, pour un gain nul sur un formulaire qu'on remplit une fois. */
#suggestions {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 6px;
  overflow: hidden;
}

#suggestions li + li {
  border-top: 1px solid var(--filet);
}

.suggestion {
  display: block;
  width: 100%;
  padding: 0.6rem 0.9rem;
  text-align: left;
  font: inherit;
  color: var(--encre);
  background: var(--papier-creux);
  border: 0;
  cursor: pointer;
}

.suggestion:hover,
.suggestion:focus-visible {
  background: var(--filet);
}

.suggestion span {
  display: block;
  font-size: 0.85rem;
  color: var(--encre-douce);
}

.photos-google {
  margin: 0.6rem 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.photos-google .aide {
  flex-basis: 100%;
  margin: 0;
}

.photo-google {
  padding: 0.45rem 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--encre);
  background: var(--papier-creux);
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  cursor: pointer;
}

.photo-google[aria-pressed='true'] {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #fff;
}

/* L'attribution d'auteur sous une photo venue de Google.
   Les regles de Places l'imposent : la photo n'est affichable qu'a cote du nom
   de qui l'a prise, avec un chemin vers la fiche d'origine. */
.attribution-photo {
  font-size: 0.78rem;
  color: var(--encre-douce);
  margin-top: 0.4rem;
}

/* L'avis sur la presentation proposee. Il n'apparait qu'apres une reecriture,
   et il dit l'essentiel : ce texte est une proposition, pas une publication. */
.aide-propose {
  display: block;
  margin-top: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: var(--papier-creux);
  border-left: 3px solid var(--bleu);
  border-radius: 0 4px 4px 0;
}


/* ================================================================ entete v2 */

/* LE SIGNE A GAUCHE, A LA HAUTEUR DES DEUX LIGNES.
   Le nom et l'accroche forment un bloc ; le signe doit faire la hauteur de ce
   bloc, sans quoi il flotte a cote comme une puce. */
.marque-signe {
  width: auto;
  height: 3rem;
  flex: 0 0 auto;
}

.marque {
  gap: 0.85rem;
  align-items: center;
}

/* L'accroche SERREE sous le nom : espacees, les deux lignes se lisaient comme
   deux elements distincts au lieu d'un logotype. */
.marque-texte {
  gap: 0;
  line-height: 1.15;
}

.marque-baseline {
  margin-top: 0.1rem;
}

/* L'APPEL A L'ACTION DE L'ENTETE, a la place du menu.
   Le menu a disparu de l'entete : les rubriques restent atteignables par la
   barre sous le chapeau et par le pied de page, et l'entete ne porte plus
   qu'une seule chose a faire. */
.entete-action {
  display: inline-block;
  background: var(--action);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 1.2rem;
  border-radius: var(--rayon);
  white-space: nowrap;
  transition: background 0.18s ease;
}

.entete-action:hover,
.entete-action:focus-visible {
  background: var(--action-survol);
}

/* LE BOUTON FLOTTANT, SUR MOBILE SEULEMENT.
   Sur un petit ecran l'entete n'a la place que du logo, centre. L'appel a
   l'action descend donc en bas de l'ecran, ou le pouce l'atteint sans
   remonter. */
.action-flottante {
  display: none;
}

@media (max-width: 47.99rem) {
  .entete .rang {
    justify-content: center;
    text-align: center;
  }

  .entete-action {
    display: none;
  }

  .action-flottante {
    display: block;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    z-index: 30;
    background: var(--action);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.45);
  }

  .action-flottante:hover,
  .action-flottante:focus-visible {
    background: var(--action-survol);
  }

  /* Le bouton flotte AU-DESSUS du pied de page : sans cette reserve, il
     recouvre les dernieres lignes, dont les mentions legales. */
  .pied {
    padding-bottom: 5rem;
  }
}

/* ============================================================== article v2 */

/* L'EN-TETE D'ARTICLE, CENTRE.
   Le fil, le titre, le chapeau, la signature et les dates forment un seul
   bloc d'ouverture ; centre, il se lit comme une page de titre. */
.article-tete {
  text-align: center;
}

.article-tete .fil,
.article-tete .article-meta {
  justify-content: center;
}

.article-tete .chapeau {
  margin-inline: auto;
}

.article-tete .signature {
  justify-content: center;
}

.article-tete .signature-texte {
  text-align: left;
}

/* Le bloc « en bref » respirait mal : il touchait presque le premier
   paragraphe, ce qui le faisait lire comme son chapeau plutot que comme un
   encart autonome. */
.reponse {
  margin-bottom: 3.5rem;
}

/* ======================================================= encart redactrice */

/* L'ENCART DE FIN D'ARTICLE.
   Un vrai cadre, une grande photo, et le lien vers son site. Il ferme la
   lecture sur une personne plutot que sur un pied de page. */
.autrice-encart {
  max-width: var(--mesure);
  margin: 3.5rem auto;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-bloc);
  background: var(--papier-creux);
  display: flex;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: flex-start;
}

.autrice-encart-portrait {
  flex: 0 0 auto;
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--rayon-bloc);
  border: 1px solid var(--filet-fort);
}

.autrice-encart-texte {
  min-width: 0;
}

.autrice-encart-sur {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu-lien);
  font-weight: 700;
  margin: 0 0 0.3rem;
}

.autrice-encart-nom {
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.autrice-encart-nom a {
  color: var(--encre);
  text-decoration: none;
}

.autrice-encart-nom a:hover,
.autrice-encart-nom a:focus-visible {
  text-decoration: underline;
}

.autrice-encart-role {
  color: var(--encre-douce);
  margin: 0.15rem 0 0.75rem;
  font-size: 0.95rem;
}

.autrice-encart-bio {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--encre);
}

.autrice-encart-lien {
  margin: 0.9rem 0 0;
  font-weight: 700;
}

.autrice-encart-lien a {
  color: var(--lien);
}

/* Sous 40rem, la photo passe au-dessus et l'ensemble se centre : cote a cote,
   il ne resterait pas dix caracteres par ligne pour la bio. */
@media (max-width: 39.99rem) {
  .autrice-encart {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================================== magazine v1 */

/* LA UNE.
   Une image large, un titre qui occupe vraiment la place d'un titre de une, et
   le texte posé sous l'image plutôt qu'à côté : sur une largeur de rang
   entière, un texte à droite d'une image donne des lignes trop longues. */
.une {
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.une-lien {
  display: block;
  text-decoration: none;
  color: inherit;
}

.une-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 560;
  object-fit: cover;
  border-radius: var(--rayon-bloc);
  border: 1px solid var(--filet);
  display: block;
}

.une-texte {
  max-width: 46rem;
  margin-top: 1.25rem;
}

.une-titre {
  font-family: var(--titre);
  /* Le gros titre du magazine. Il descend a 1,9rem sur telephone, ou il
     occuperait sinon la moitie de l'ecran a lui seul. */
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0.5rem 0 0;
  color: var(--encre);
}

.une-lien:hover .une-titre,
.une-lien:focus-visible .une-titre {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.une-resume {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--encre-douce);
  margin: 0.7rem 0 0;
}

.une-meta,
.carte-meta {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0.6rem 0 0;
}

/* DEUX EN VIS-A-VIS, PUIS TROIS EN GRILLE.
   Deux tailles de bloc differentes pour la meme carte : c'est la grille qui
   change, pas le composant. */
.duo,
.trio {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 48rem) {
  .duo {
    grid-template-columns: repeat(2, 1fr);
  }
  .trio {
    grid-template-columns: repeat(3, 1fr);
  }
}

.carte-lien {
  display: block;
  text-decoration: none;
  color: inherit;
}

.carte-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--rayon-bloc);
  border: 1px solid var(--filet);
  display: block;
  margin-bottom: 0.9rem;
}

.carte-titre {
  font-family: var(--titre);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0.4rem 0 0;
  color: var(--encre);
}

.carte-lien:hover .carte-titre,
.carte-lien:focus-visible .carte-titre {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.carte-resume {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--encre-douce);
  margin: 0.45rem 0 0;
}

/* LA BANDE DE MAILLAGE.
   Fond creux et filets haut et bas : elle doit se lire comme une coupure dans
   la sequence, pas comme une section de plus. */
.maille {
  margin-block: clamp(2.5rem, 6vw, 4rem);
  padding-block: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--filet-fort);
  border-bottom: 1px solid var(--filet-fort);
}

.maille-grille {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.maille-titre {
  font-family: var(--titre);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--rouge);
}

.maille-titre a {
  color: var(--encre);
  text-decoration: none;
}

.maille-titre a:hover,
.maille-titre a:focus-visible {
  text-decoration: underline;
}

.maille-colonne ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.maille-colonne li + li {
  margin-top: 0.5rem;
}

.maille-colonne a {
  color: var(--encre);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
  display: block;
}

.maille-colonne li a:hover,
.maille-colonne li a:focus-visible {
  color: var(--lien);
  text-decoration: underline;
}

/* LE SOMMAIRE DE FIN, sans vignette.
   Arrive la, on parcourt des titres : les images n'apportent plus rien et
   allongent la page pour rien. */
.section-sommaire {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.liste-titres {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet);
}

.liste-titres li {
  border-bottom: 1px solid var(--filet);
}

.liste-titres a {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.95rem 0;
  text-decoration: none;
  color: inherit;
}

.liste-titre {
  font-family: var(--titre);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--encre);
}

.liste-titres a:hover .liste-titre,
.liste-titres a:focus-visible .liste-titre {
  color: var(--lien);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.liste-meta {
  flex: 0 0 auto;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  white-space: nowrap;
}

/* ================================================== la duree, sur le visuel */

/* LA DUREE DE LECTURE, POSEE SUR LA VIGNETTE.
   Sous le resume, elle terminait chaque bloc par une ligne administrative qui
   cassait le rythme. Sur l'image, elle se lit au moment ou l'oeil regarde
   l'article, et elle rend sa derniere ligne au texte.

   Le conteneur porte le rayon et `overflow: hidden` : sans lui, l'etiquette
   depasserait des angles arrondis de l'image. */
.visuel {
  position: relative;
  display: block;
  border-radius: var(--rayon-bloc);
  overflow: hidden;
}

.duree {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  /* Fond sombre fixe et texte blanc, dans LES DEUX themes : l'etiquette est
     posee sur une photo, pas sur le papier de la page. La faire suivre le
     theme la rendrait illisible sur une image claire en mode sombre. */
  background: rgba(11, 16, 24, 0.82);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(2px);
}

/* Les images perdent leur propre rayon et leur bordure : c'est le conteneur
   qui les porte desormais, sans quoi on verrait deux arrondis concentriques. */
.visuel .une-image,
.visuel .carte-image,
.visuel .guide-image {
  border-radius: 0;
  border: 0;
  margin-bottom: 0;
  display: block;
}

.visuel:has(.carte-image) {
  margin-bottom: 0.9rem;
}

/* La vignette des index garde sa largeur fixe : le conteneur la reprend, sinon
   il s'etale sur toute la ligne et pousse le texte hors de vue. */
.guide-lien .visuel {
  flex: 0 0 auto;
}

/* ============================== liens de cartes, apres le decoupage en deux */

/* Le lien de l'image ne porte plus le texte : il ne doit occuper que la place
   de l'image, sans quoi il capte des clics dans le vide autour d'elle. */
.media-lien {
  display: block;
  text-decoration: none;
}

/* Les titres portent desormais leur propre lien. Il herite de la couleur du
   titre plutot que du rouge des liens : un gros titre entierement rouge
   ferait bandeau publicitaire, et le soulignement au survol suffit a dire
   qu'on peut cliquer. */
.une-titre a,
.carte-titre a {
  color: inherit;
  text-decoration: none;
}

.une-titre a:hover,
.une-titre a:focus-visible,
.carte-titre a:hover,
.carte-titre a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* L'ancien survol visait le lien englobant, qui n'existe plus. */
.une-lien:hover .une-titre,
.une-lien:focus-visible .une-titre,
.carte-lien:hover .carte-titre,
.carte-lien:focus-visible .carte-titre {
  text-decoration: none;
}

.carte .etiquette {
  display: inline-block;
  margin-top: 0.9rem;
}

/* ============================================ l inscription en trois ecrans */

.etape {
  margin-block: 2rem 3rem;
}

.etape-numero {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu-lien);
  font-weight: 700;
  margin: 0 0 0.6rem;
}

/* LE CHAMP UNIQUE, EN GRAND.
   C'est la seule chose a faire sur cet ecran : il doit occuper la place que
   cela merite, sinon on le cherche. */
.etape-label {
  display: block;
  font-family: var(--titre);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}

#recherche {
  width: 100%;
  padding: 1rem 1.15rem;
  font: inherit;
  font-size: 1.1rem;
  color: var(--encre);
  background: var(--papier);
  border: 2px solid var(--filet-fort);
  border-radius: var(--rayon);
}

#recherche:focus-visible {
  outline: 2px solid var(--bleu-lien);
  outline-offset: 1px;
  border-color: var(--bleu-lien);
}

.etape-titre {
  font-family: var(--titre);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

/* LE RECAPITULATIF EST EN LECTURE SEULE, ET DOIT SE VOIR COMME TEL.
   Des lignes de definition, pas des champs : rien ici n'invite a corriger,
   parce que rien n'est corrigeable a cette etape. */
.recap-corps {
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-bloc);
  background: var(--papier-creux);
  padding: 0.4rem 1.1rem;
  margin: 1.2rem 0;
}

.recap-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  padding: 0.7rem 0;
}

.recap-ligne + .recap-ligne {
  border-top: 1px solid var(--filet);
}

.recap-cle {
  flex: 0 0 9rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--encre-douce);
  padding-top: 0.15rem;
}

.recap-valeur {
  flex: 1 1 12rem;
  overflow-wrap: anywhere;
}

.etape-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* « Ce n'est pas la bonne » est une action secondaire : un lien, pas un
   second bouton qui rivaliserait avec celui qui publie. */
.lien-bouton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--lien);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.etape-fait {
  border: 1px solid var(--filet-fort);
  border-left: 4px solid var(--rouge);
  border-radius: var(--rayon-bloc);
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--papier-creux);
}

/* L'attente pendant la recuperation de la fiche. Un libelle visible plutot
   qu'un simple `aria-busy`, qui ne montre rien a l'ecran. */
.attente {
  font-weight: 700;
  color: var(--bleu-lien);
}

/* LA MENTION SOUS UNE PRESENTATION COMPOSEE.
   Elle n'est pas une precaution juridique mais une information utile : la
   lectrice sait qu'elle lit une notice d'annuaire et non les mots de la
   personne, et la personne concernee voit comment reprendre la main. */
.bio-composee {
  font-size: 0.82rem;
  color: var(--encre-douce);
  margin-top: 0.6rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--filet-fort);
}

/* Les photos de la fiche Google, dans le recapitulatif. */
.recap-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.8rem;
}

/* La photo cliquable du recapitulatif : c'est un bouton, il doit s'en voir. */
.recap-photo {
  padding: 0;
  border: 3px solid transparent;
  background: none;
  border-radius: var(--rayon-bloc);
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}

.recap-photo img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  display: block;
}

.recap-photo-retenue {
  border-color: var(--rouge);
}

.recap-photo:focus-visible {
  outline: 2px solid var(--bleu-lien);
  outline-offset: 2px;
}

/* LA GALERIE DE LA FICHE.
   Sous le portrait plutot qu'a cote : ces photos illustrent l'activite, elles
   ne sont pas le sujet de la page. La couverture y est signalee pour que la
   personne comprenne laquelle sert de portrait. */
.fiche-galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: var(--mesure);
  margin: 0 auto 1.5rem;
}

.fiche-galerie-photo {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--rayon-bloc);
  border: 1px solid var(--filet-fort);
}

.fiche-galerie-couverture {
  border: 2px solid var(--rouge);
}

/* ================================================= le moteur de l accueil */

.moteur {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  max-width: 40rem;
  margin: 2rem auto 0;
  position: relative;
}

/* L'epingle vit DANS le champ, pas a cote : c'est ce qui fait lire l'ensemble
   comme une barre de recherche de lieu et non comme un champ texte ordinaire. */
.moteur-champ {
  position: relative;
  flex: 1 1 16rem;
  display: flex;
  align-items: center;
}

/* L'EPINGLE ET « AUTOUR DE MOI » SONT BLEUS, PAS ROUGES.
   Le rouge du site marque l'action : le bouton « Rechercher », le bouton
   « Proposer ma fiche ». L'epingle ne demande rien, elle designe un lieu, et
   « Autour de moi » est un reperage avant d'etre un clic. En rouge, les deux
   entraient en concurrence avec le bouton qui, lui, attend vraiment qu'on
   appuie dessus. */
.moteur-epingle {
  position: absolute;
  left: 0.9rem;
  color: var(--bleu-lien);
  pointer-events: none;
}

#ou {
  width: 100%;
  padding: 1rem 1.1rem 1rem 2.9rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--encre);
  background: var(--papier);
  border: 2px solid var(--filet-fort);
  border-radius: var(--rayon);
}

#ou:focus-visible {
  outline: 2px solid var(--bleu-lien);
  outline-offset: 1px;
  border-color: var(--bleu-lien);
}

.moteur-bouton {
  flex: 0 0 auto;
  padding-inline: 1.6rem;
}

/* La liste des propositions se pose SOUS la barre, en surimpression : elle est
   ephemere, et pousser le contenu de la page a chaque frappe donnerait un
   sautillement desagreable. */
#ou-suggestions {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 15;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--papier);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-bloc);
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  text-align: left;
}

.ou-titre {
  padding: 0.6rem 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  background: var(--papier-creux);
}

.ou-choix {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  text-align: left;
  color: var(--encre);
  background: none;
  border: 0;
  border-top: 1px solid var(--filet);
  text-decoration: none;
  cursor: pointer;
}

#ou-suggestions li:first-child .ou-choix {
  border-top: 0;
}

.ou-choix:hover,
.ou-choix:focus-visible {
  background: var(--papier-creux);
}

.ou-choix span {
  font-size: 0.82rem;
  color: var(--encre-douce);
  white-space: nowrap;
}

/* « Autour de moi » se distingue : c'est la seule entree qui n'est pas un lieu
   deja nomme, et c'est celle qu'on veut voir en premier. */
.ou-autour {
  font-weight: 700;
  color: var(--bleu-lien);
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ========================================= l accueil en pleine hauteur (v2) */

/* LE CHAPEAU SUR TOUTE LA LARGEUR.
   Le rang cadre les pages de lecture, ou une ligne trop longue se lit mal.
   Une barre de navigation n'a pas ce probleme : elle porte deux objets, un a
   chaque bout, et les enfermer dans une colonne les fait flotter au milieu. */
.entete .rang {
  max-width: none;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* LE FILET DECORATIF AU-DESSUS DU TITRE, RETIRE.
   Il annoncait une section, ce que la page d'accueil n'a plus besoin de faire
   depuis que le titre occupe tout l'ecran. */
.hero .rang::before {
  display: none;
}

/* L'ACCUEIL TIENT L'ECRAN, ET LA SUITE PASSE PAR-DESSUS.
   Le chapeau colle en haut, le contenu suivant defile AU-DESSUS de lui : c'est
   l'effet demande. Il tient a trois choses et pas une de moins : le hero est
   `sticky`, il reste au fond de l'empilement, et tout ce qui suit porte un
   fond opaque. Sans le fond opaque, on verrait le titre par transparence. */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  border-bottom: 0;
}

.hero .rang {
  width: 100%;
  /* De quoi degager la barre fixe, qui recouvre le haut du hero. */
  padding-block: clamp(6rem, 14vh, 9rem) clamp(3rem, 8vh, 5rem);
}

/* Le titre tient sur deux lignes : a 6rem il en prenait trois et poussait le
   moteur de recherche hors de l'ecran, ce qui est exactement ce qu'on ne veut
   pas sur une page dont le moteur est la raison d'etre. */
.hero-titre {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  max-width: 22ch;
  margin-inline: auto;
}

/* TOUT CE QUI SUIT LE HERO DEFILE AU-DESSUS DE LUI.
   UN SEUL conteneur opaque, et non chaque section separement : traitees une
   par une, les marges qui les separent laissaient voir le moteur de recherche
   reapparaitre entre deux blocs. */
.apres-hero {
  position: relative;
  z-index: 1;
  background: var(--papier);
}

/* Le pied de page aussi, sinon il laisse voir le hero par-dessous. */
.pied {
  position: relative;
  z-index: 1;
  background: var(--papier);
}

/* ================================= le calage vertical de l accueil (v3) */

/* LE MOTEUR EN PLEIN CENTRE, LE TITRE CENTRE AU-DESSUS.
   Trois rangees, `1fr auto 1fr` : les deux rangees souples se partagent
   l'espace restant a parts egales, donc la rangee du milieu, le moteur, tombe
   au centre exact de l'ecran quoi qu'il arrive. Le titre occupe la premiere et
   s'y centre a son tour, entre la barre du haut et le moteur.

   Un simple `align-items: center` sur un bloc unique ne suffisait pas : il
   centrait l'ENSEMBLE titre plus moteur, ce qui placait le moteur nettement
   sous le centre et poussait tout vers le bas. */
.hero .rang.hero-grille {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  min-height: 100svh;
  padding-block: 0;
  align-items: center;
  justify-items: center;
}

.hero-grille .hero-titre {
  align-self: center;
  /* De quoi passer sous la barre fixe : sans cette reserve, le titre remonte
     derriere elle sur les ecrans courts. */
  padding-top: 5.5rem;
}

.hero-grille .moteur {
  margin: 0;
  width: 100%;
}

/* L'icone de « Autour de moi » s'aligne sur son libelle.
   `justify-content: flex-start` annule le `space-between` des autres entrees :
   herite tel quel, il envoyait la cible a gauche et le libelle contre le bord
   droit, alors que les deux ne font qu'un. */
.ou-autour {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

.ou-autour svg {
  flex: 0 0 auto;
}

/* ====================================== le calage exact du hero collant (v4) */

/* LE HERO FAIT EXACTEMENT UN ECRAN, PAS UN PIXEL DE PLUS.
   `min-height` le laissait grandir avec son contenu : plus haut que l'ecran, un
   element colle commence par DEFILER jusqu'a ce que son bas arrive, et c'est ce
   mouvement du moteur en debut de defilement qu'on voyait. Une hauteur fixe
   supprime la course. */
.hero {
  height: 100svh;
  min-height: 0;
  overflow: hidden;
}

.hero .rang.hero-grille {
  min-height: 0;
  height: 100%;
}

/* LE FILET EN TETE DE CE QUI MONTE.
   Il marque la limite entre l'ecran d'accueil et le contenu qui passe
   par-dessus. Sans lui, la premiere section semble flotter sur le titre. */
.apres-hero {
  border-top: 1px solid var(--filet-fort);
}

/* ================================ le calage exact du hero collant (v5) */

/* DES RANGEES QUI NE PEUVENT PAS DEBORDER.
   `1fr` ne descend pas sous la taille de son contenu : la reserve posee sur le
   titre pour degager la barre du haut faisait donc grandir la premiere rangee,
   la grille depassait l'ecran de 87 px, et ces 87 px se voyaient deux fois. En
   decalage du moteur sous le centre, et en course du hero avant qu'il ne se
   colle. `minmax(0, 1fr)` autorise la rangee a se compresser, la grille tient
   l'ecran, et le moteur retombe au centre exact. */
.hero .rang.hero-grille {
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
}

/* ============================================= les cartes de conseillieres */

/* TROIS COLONNES SUR GRAND ECRAN, UNE SUR TELEPHONE.
   Rien entre les deux : a deux colonnes, la photo devient trop petite pour
   qu'on reconnaisse un visage, ce qui est pourtant tout l'objet de la carte. */
.cartes-fiches {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 60rem) {
  .cartes-fiches {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cf-visuel {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--rayon-bloc);
  overflow: hidden;
  text-decoration: none;
}

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

.cf-photo-vide {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--papier-creux);
  border: 1px solid var(--filet-fort);
}

/* LE VOILE SOUS LE NOM.
   Le nom est en blanc sur une photographie dont on ne maitrise rien : sans ce
   degrade, il devient illisible des qu'une image est claire a cet endroit. */
.cf-voile {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.35) 45%, transparent);
  pointer-events: none;
}

.cf-identite {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  color: #fff;
  display: block;
}

/* Un `h3` depuis qu'il porte le titre de la carte : il faut donc lui retirer
   la marge et la graisse par defaut du navigateur. */
.cf-nom {
  display: block;
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cf-lieu {
  display: block;
  font-size: 0.95rem;
  opacity: 0.92;
  margin-top: 0.15rem;
}

.cf-pied {
  padding-top: 0.75rem;
}

.cf-note {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.98rem;
}

.cf-etoile {
  color: #F2B01E;
  font-size: 1.05rem;
}

.cf-avis {
  color: var(--encre-douce);
  font-size: 0.9rem;
}

.cf-note-vide {
  color: var(--encre-douce);
  font-size: 0.9rem;
}

.cf-titre {
  font-family: var(--titre);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.5rem 0 0;
}

.cf-titre a {
  color: var(--encre);
  text-decoration: none;
}

.cf-titre a:hover,
.cf-titre a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le resume tient sur deux lignes et se coupe proprement : des cartes de
   hauteurs differentes cassent l'alignement de la grille. */
.cf-resume {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--encre-douce);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ======================================= le recours par lien Google Maps */

/* TOUJOURS VISIBLE SOUS LES RESULTATS, et pas seulement quand la recherche
   echoue : quelqu'un qui voit trois fiches dont aucune n'est la sienne est
   exactement dans le cas ou il en a besoin. */
.secours {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--papier-creux);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-bloc);
}

.secours-titre {
  font-weight: 700;
  margin: 0 0 0.2rem;
}

.secours-champ {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

#lien-google {
  flex: 1 1 16rem;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
}

#lien-google:focus-visible {
  outline: 2px solid var(--bleu-lien);
  outline-offset: 1px;
}

.secours-champ .bouton {
  flex: 0 0 auto;
  padding: 0.75rem 1.3rem;
  font-size: 0.98rem;
}

/* ============================================ le maillage de l annuaire */

/* TOUTES LES VILLES, PAR DEPARTEMENT.
   C'est la page qui distribue l'autorite vers les pages de departement et de
   ville. Elle doit donc les lier TOUTES, sans repli ni pagination : un lien
   qu'on ne rend pas est un lien qui n'existe pas. */
.maillage-dept {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
}

.maillage-dept-titre {
  font-family: var(--titre);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.maillage-dept-titre a {
  color: var(--encre);
  text-decoration: none;
  border-bottom: 2px solid var(--rouge);
  padding-bottom: 0.15rem;
}

.maillage-dept-titre a:hover,
.maillage-dept-titre a:focus-visible {
  color: var(--lien);
}

/* ================================== l en-tete des pages d annuaire (v2) */

/* LE MEME TRAITEMENT QUE L'ACCUEIL.
   Fil, titre, chapeau et moteur centres, avec de l'air autour. La page
   d'annuaire empilait quatre blocs alignes a gauche de largeurs differentes,
   ce qui ne se lisait ni comme un titre ni comme une recherche. */
.tete-annuaire {
  text-align: center;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem);
}

.tete-annuaire .fil {
  justify-content: center;
}

.tete-annuaire h1,
.tete-annuaire .rubrique-titre {
  max-width: 22ch;
  margin: 0.6rem auto 0;
  /* LA MEME TAILLE QUE LE TITRE DE L'ACCUEIL, au dixieme pres : annuaire,
     departement et ville sont le meme objet a trois echelles, et une taille
     de titre qui varie d'un niveau a l'autre se lit comme trois sites. */
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.tete-annuaire .rubrique-chapeau,
.tete-annuaire .compteur {
  max-width: 46rem;
  margin-inline: auto;
}

.tete-annuaire .rubrique-chapeau {
  margin-top: 1rem;
}

.tete-annuaire .compteur {
  margin-top: 1.1rem;
}

/* Le moteur reprend la largeur qu'il a sur l'accueil, centre sous le compteur. */
.tete-annuaire .moteur {
  margin: 1.75rem auto 0;
}

/* Les sections qui suivent restent alignees a gauche : une liste de villes
   centree se lit mal, l'oeil perdant le bord sur lequel s'appuyer. */
.tete-annuaire + section,
.tete-annuaire ~ section {
  text-align: left;
}

/* LE BOUTON GARDE SON TEXTE BLANC, OU QU'IL SOIT POSE.
   `.page-texte a` et `.prose a` teignent les liens en rouge et ont la meme
   specificite que `.bouton` : places apres lui, ils gagnaient, et un bouton
   pose dans un bloc de texte devenait rouge sur rouge. Cette regle vient en
   dernier et nomme l'element, elle tranche donc partout. */
.page-texte a.bouton,
.prose a.bouton,
.etape-fait a.bouton,
.encart a.bouton,
a.bouton,
button.bouton {
  color: #fff;
  text-decoration: none;
}

/* ================================================= la fiche, en trois blocs */

/* LE FIL D'ARIANE CENTRE, comme sur les pages d'annuaire.

   EN `text-align`, PAS EN `justify-content`. Le fil est un paragraphe, donc
   une boite en flux : `justify-content` ne s'applique qu'a un conteneur flex
   ou grid et ne faisait donc rien du tout. Sur les pages d'annuaire le fil
   parait centre parce qu'il herite du `text-align: center` de `.tete-annuaire`
   au-dessus de lui ; sur la fiche, ce parent n'existe pas et le fil restait a
   gauche sous un titre centre. */
.fil-centre {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* TROIS COLONNES : le portrait, ce qu'elle fait, comment la joindre.
   C'est l'ordre dans lequel on lit une fiche. Empilees, il fallait defiler
   pour trouver un numero de telephone. */
.fp {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .fp {
    grid-template-columns: 22rem minmax(0, 1fr) 15rem;
  }
}

@media (min-width: 44rem) and (max-width: 61.99rem) {
  .fp {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
  .fp-contacter {
    grid-column: 1 / -1;
  }
}

.fp-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--rayon-bloc);
  border: 1px solid var(--filet-fort);
  display: block;
}

.fp-photo-vide {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  background: var(--papier-creux);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-bloc);
}

.fp-galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-top: 0.5rem;
}

/* LES VIGNETTES COMMUTENT LA GRANDE PHOTO.

   Chaque vignette est l'etiquette d'un bouton radio cache. Le bouton reste
   focusable, il n'est pas en `display: none` : sinon la galerie disparaitrait
   du clavier, alors qu'un groupe de radios est precisement ce qui se parcourt
   le mieux aux fleches. */
.fp-choix {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fp-vue {
  display: none;
  margin: 0;
}

.fp-choix:nth-of-type(1):checked ~ .fp-scene .fp-vue-0,
.fp-choix:nth-of-type(2):checked ~ .fp-scene .fp-vue-1,
.fp-choix:nth-of-type(3):checked ~ .fp-scene .fp-vue-2,
.fp-choix:nth-of-type(4):checked ~ .fp-scene .fp-vue-3,
.fp-choix:nth-of-type(5):checked ~ .fp-scene .fp-vue-4,
.fp-choix:nth-of-type(6):checked ~ .fp-scene .fp-vue-5 {
  display: block;
}

.fp-vignette {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  border: 1px solid var(--filet);
  overflow: hidden;
  cursor: pointer;
}

.fp-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La vignette affichee porte le liseré rouge, comme avant, mais elle suit
   maintenant le choix au lieu d'etre figee sur la couverture. */
.fp-choix:nth-of-type(1):checked ~ .fp-galerie [for="fp-vue-0"],
.fp-choix:nth-of-type(2):checked ~ .fp-galerie [for="fp-vue-1"],
.fp-choix:nth-of-type(3):checked ~ .fp-galerie [for="fp-vue-2"],
.fp-choix:nth-of-type(4):checked ~ .fp-galerie [for="fp-vue-3"],
.fp-choix:nth-of-type(5):checked ~ .fp-galerie [for="fp-vue-4"],
.fp-choix:nth-of-type(6):checked ~ .fp-galerie [for="fp-vue-5"] {
  border: 2px solid var(--rouge);
}

/* LE BOUTON EST CACHE, SON FOCUS NE DOIT PAS L'ETRE.
   Sans ces regles, parcourir la galerie au clavier ne montrerait rien. */
.fp-choix:nth-of-type(1):focus-visible ~ .fp-galerie [for="fp-vue-0"],
.fp-choix:nth-of-type(2):focus-visible ~ .fp-galerie [for="fp-vue-1"],
.fp-choix:nth-of-type(3):focus-visible ~ .fp-galerie [for="fp-vue-2"],
.fp-choix:nth-of-type(4):focus-visible ~ .fp-galerie [for="fp-vue-3"],
.fp-choix:nth-of-type(5):focus-visible ~ .fp-galerie [for="fp-vue-4"],
.fp-choix:nth-of-type(6):focus-visible ~ .fp-galerie [for="fp-vue-5"] {
  outline: 2px solid var(--bleu-lien);
  outline-offset: 2px;
}

.fp-nom {
  font-family: var(--titre);
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}

.fp-role {
  color: var(--encre-douce);
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
}

.fp-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.9rem 0 0;
  font-size: 1rem;
}

.fp-note .ic {
  color: #F2B01E;
}

.fp-avis {
  color: var(--encre-douce);
}

.fp-note-vide {
  color: var(--encre-douce);
}

.fp-bio {
  /* Cale sur le haut du portrait, a sa gauche. Une marge ici faisait demarrer
     la presentation plus bas que l'image, et les deux colonnes ne partaient
     pas de la meme ligne. */
  margin: 0 0 0;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* LE BLOC DE CONTACT, COLLE EN DEFILANT.
   C'est la seule chose qu'on revient chercher apres avoir lu la presentation. */
.fp-contacter {
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-bloc);
  background: var(--papier-creux);
  padding: 1.1rem;
}

@media (min-width: 62rem) {
  .fp-contacter {
    position: sticky;
    top: 7.5rem;
  }
}

/* CHAQUE MOYEN DE LA JOINDRE EST UN PLI.
   Le titre « La contacter » a disparu : cinq lignes a icones sous un portrait
   n'ont pas besoin qu'on annonce ce qu'elles sont. */
.fp-contact {
  border-top: 1px solid var(--filet);
}

.fp-contacter > .fp-contact:first-child {
  border-top: 0;
}

.fp-contact-tete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0;
  cursor: pointer;
  color: var(--encre);
  /* Le marqueur par defaut du navigateur ferait doublon avec le chevron. */
  list-style: none;
}

.fp-contact-tete::-webkit-details-marker {
  display: none;
}

.fp-contact-tete .ic {
  flex: 0 0 auto;
  color: var(--rouge);
}

.fp-contact-tete strong {
  font-size: 0.98rem;
  flex: 1 1 auto;
}

/* Le chevron pivote a l'ouverture : c'est le seul indice que la ligne cache
   quelque chose, il doit donc dire dans quel sens elle va. */
.fp-contact-tete .ic:last-child {
  color: var(--encre-douce);
  transition: transform 0.2s ease;
}

.fp-contact[open] .fp-contact-tete .ic:last-child {
  transform: rotate(180deg);
}

.fp-contact-tete:hover strong,
.fp-contact-tete:focus-visible strong {
  color: var(--lien);
}

.fp-contact-detail {
  display: block;
  margin: 0 0 0.75rem;
  padding-left: 1.85rem;
  font-size: 0.85rem;
  color: var(--encre-douce);
  overflow-wrap: anywhere;
}

.fp-contact-detail a {
  color: var(--lien);
}

@media (prefers-reduced-motion: reduce) {
  .fp-contact-tete .ic:last-child {
    transition: none;
  }
}

/* ============================================ le survol des vignettes (v1) */

/* L'IMAGE GRANDIT DANS SON CADRE, LE CADRE NE BOUGE PAS.
   Un agrandissement du bloc entier decalerait ses voisins et ferait sauter la
   grille. C'est l'image qui grandit, a l'interieur, et le `overflow: hidden`
   du conteneur la recadre : le mouvement se lit, la mise en page tient.
   Le conteneur doit donc porter le rognage, ce que font deja `.visuel`,
   `.cf-visuel` et `.fp-visuel`. */
.visuel img,
.cf-visuel img,
.fp-vignette img,
.recap-photo img,
.fiche-galerie-photo {
  transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform;
}

.visuel:hover img,
.media-lien:hover .visuel img,
.media-lien:focus-visible .visuel img,
.cf:hover .cf-visuel img,
.cf-visuel:focus-visible img,
.guide-lien:hover .visuel img,
.guide-lien:focus-visible .visuel img,
.recap-photo:hover img,
.recap-photo:focus-visible img {
  transform: scale(1.06);
}

/* Les vignettes de galerie rognent elles-memes : elles ont besoin de leur
   propre cadre pour que l'agrandissement ne deborde pas.

   C'EST L'IMAGE QUI GRANDIT, PAS L'ETIQUETTE. Depuis que la vignette est le
   `label` d'un bouton radio, agrandir le cadre deplacerait la grille des
   quatre vignettes a chaque survol. */
.fiche-galerie-photo {
  overflow: hidden;
}

.fp-vignette:hover img,
.fp-vignette:focus-visible img,
.fiche-galerie-photo:hover {
  transform: scale(1.06);
}

/* QUI DEMANDE MOINS DE MOUVEMENT N'EN A PAS.
   Le reglage systeme existe pour les personnes que l'animation gene
   physiquement, vertiges et migraines : l'ignorer n'est pas un detail. */
@media (prefers-reduced-motion: reduce) {
  .visuel img,
  .cf-visuel img,
  .fp-vignette img,
  .recap-photo img,
  .fiche-galerie-photo {
    transition: none;
  }
  .visuel:hover img,
  .cf:hover .cf-visuel img,
  .guide-lien:hover .visuel img,
  .recap-photo:hover img,
  .fp-vignette:hover,
  .fiche-galerie-photo:hover {
    transform: none;
  }
}

/* ============================== l en-tete de fiche, centree sous le fil (v2) */

/* LE NOM ET LES AVIS EN TETE, CENTRES.
   Places dans la colonne du milieu, ils entraient en concurrence avec la
   presentation et le portrait : trois choses commencaient a la meme hauteur.
   En tete, le nom annonce la page et les avis la qualifient, avant que l oeil
   ne descende dans le detail. La ligne « Conseillere en image · Ville »
   disparait : le fil d Ariane juste au-dessus dit deja les deux. */
.fp-tete {
  text-align: center;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* LE NOM PORTE LA PAGE.
   C'est la seule chose que la visiteuse cherche en arrivant, et la fiche
   n'a pas d'autre titre a lui disputer la place. Il monte donc bien au-dessus
   de la taille d'un titre de rubrique. */
.fp-tete .fp-nom {
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(2.6rem, 7.5vw, 5rem);
  letter-spacing: -0.035em;
}

.fp-tete .fp-note {
  justify-content: center;
  margin-top: 0.7rem;
}


/* ==================================== les fiches groupees par ville ou dept */

/* UN GROUPE : son nom, son compte, trois fiches, et de quoi voir la suite.
   Une page de departement qui alignait toutes ses fiches ne disait pas ou
   chercher ; groupee, elle montre la repartition avant le detail. */
.groupe + .groupe {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
}

.groupe-tete {
  display: flex;
  /* `baseline` calait le bas du texte de la pastille sur celui du nom, donc
     la pastille elle-meme, qui a une bordure et du rembourrage, se retrouvait
     plus basse que la ligne du nom. */
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.7rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--filet);
}

/* Un `h2` : le groupe EST la section de la page, et sauter de `h1` a `h3`
   laissait un niveau vide dans le plan du document. */
.groupe-nom {
  font-family: var(--titre);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.groupe-nom a {
  text-decoration: none;
  color: inherit;
}

.groupe-nom a:hover,
.groupe-nom a:focus-visible {
  color: var(--lien);
}

.groupe-compte {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--encre-douce);
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

.groupe-plus {
  margin: 1rem 0 0;
  font-size: 0.92rem;
}

.groupe-plus a {
  font-weight: 600;
}

.groupe-plus-reste {
  color: var(--encre-douce);
  font-weight: 400;
}

/* ===================================== « voir plus » sur une page de ville */

/* LE RESTE EST DANS LA PAGE, SEULEMENT REPLIE.
   Aller le chercher ailleurs le cacherait aux moteurs, ce qui serait le
   contraire du but d'un annuaire. La case est cachee mais focusable, comme
   celles de la galerie d'une fiche. */
.cartes-suite {
  display: none;
}

.voir-plus-case:checked ~ .cartes-suite {
  display: grid;
}

.voir-plus-case:checked ~ .voir-plus {
  display: none;
}

.voir-plus {
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  text-align: center;
}

.voir-plus .bouton {
  cursor: pointer;
}

.voir-plus-case:focus-visible ~ .voir-plus .bouton {
  outline: 2px solid var(--bleu-lien);
  outline-offset: 3px;
}

.voir-plus-reste {
  font-weight: 400;
  opacity: 0.75;
}

/* La liste repliee porte AUSSI la classe `.cartes-fiches` : colonnes et
   gouttiere viennent donc de la, il n'y a rien a redire ici. Seule sa marge
   haute se remet a zero, pour que les deux listes se lisent comme une seule. */
.voir-plus-case:checked ~ .cartes-suite {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}


/* ================================== les listes de villes, en pleine largeur */

/* ELLES ETAIENT DANS UNE COLONNE DE LECTURE.
   `.page-texte` borne a la mesure d'un paragraphe, ce qui convient a de la
   prose et pas a une liste de pastilles : les villes tenaient sur un tiers de
   la page, alignees a gauche sous un titre centre, et flottaient sans rien
   pour les caler. En pleine largeur et centrees, elles se lisent comme le
   maillage qu'elles sont. */
.section-villes {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.section-villes .section-titre,
.section-villes .maillage-dept-titre {
  text-align: center;
}

.section-villes .villes {
  justify-content: center;
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
}

.section-villes .maillage-dept + .maillage-dept {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}


/* ============================================ ce qu'est le conseil en image */

/* LE SEUL BLOC DE PROSE DE L'ACCUEIL.
   Il remplace une liste de villes qui n'apprenait rien a qui ne connait pas
   le metier. Sa mesure est celle d'un texte suivi, pas celle de la grille :
   une ligne de mille pixels ne se lit pas. */
.section-definition {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--filet);
}

.definition-titre {
  font-family: var(--titre);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 auto clamp(1rem, 2.5vw, 1.5rem);
  max-width: var(--mesure);
  text-align: center;
}

.definition-corps {
  max-width: var(--mesure);
  margin-inline: auto;
}

.definition-corps p {
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  line-height: 1.75;
}

.definition-corps p:last-child {
  margin-bottom: 0;
}

.definition-corps strong {
  font-weight: 700;
}