/* =========================================================================
   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 {
  --papier: #FBF8F5;
  --papier-creux: #F1ECE5;
  --encre: #2A211D;
  --encre-douce: #6B5F58;
  --filet: #E7DFD6;
  --filet-fort: #D8CCC0;

  /* LA TERRE CUITE, EN DEUX VALEURS, ET CE N'EST PAS UN CAPRICE.
     `#B4552B` est la couleur de la planche. Sur papier elle donne 4,67:1 :
     tout juste conforme pour un lien en corps de texte, et elle tombe a
     3,82:1 sur fond sombre, sous la norme. On garde donc la couleur de marque
     partout ou elle est grosse ou decorative, et une variante calibree la ou
     elle porte du texte a lire. Meme famille, meme lecture, et personne ne
     bute sur un lien qu'il ne distingue pas du texte. */
  --terre: #B4552B;
  --terre-lien: #A54D24;
  /* Le survol d'un bouton plein : la meme famille, assombrie. Une seule
     valeur pour les deux themes, puisque le bouton porte son propre fond et
     ne depend donc pas du papier. Le blanc dessus tient 6,4:1. */
  --terre-survol: #9C4622;
  --taupe: #BFA795;


  /* LE PAVE INVERSE, ET IL NE DOIT PAS BASCULER AVEC LE THEME.
     tips-airbnb posait un gris fonce fixe en fond d'encart, avec du blanc
     dessus. En remappant ce gris sur `--encre`, l'encart devenait clair en
     theme sombre alors que son texte restait blanc : le bloc entier
     disparaissait. Ces deux jetons vont donc PAR PAIRE, fond et encre
     ensemble, et restent sombre-sur-clair dans les deux themes. */
  --inverse-fond: #2A211D;
  --inverse-encre: #FBF8F5;

  /* 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;

  --rayon: 8px;
  --rayon-bloc: 12px;

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

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #17120F;
    --papier-creux: #201A16;
    --encre: #F5F0EA;
    --encre-douce: #B3A79D;
    --filet: #2C2521;
    --filet-fort: #3A312B;
    --terre-lien: #D98150;
    --taupe: #8C7A6C;
    --inverse-fond: #2A211D;
    --inverse-encre: #F5F0EA;
  }
}

*,
*::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 */

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

.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(--terre-lien);
  color: var(--terre-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(--terre);
  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(--terre-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(--terre);
  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(--terre-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(--terre-lien);
  padding-bottom: 3px;
  color: var(--terre-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;
}

.fil a {
  text-decoration: none;
}

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

.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;
  margin: 0;
  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;
    top: 2rem;
    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(--terre-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(--terre-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(--terre);
  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(--terre-lien);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--terre-lien) 45%, transparent);
}

.prose a:hover,
.prose a:focus-visible {
  text-decoration-color: var(--terre-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(--terre);
}

.prose blockquote {
  margin: 2em 0;
  padding-left: 1.4em;
  border-left: 3px solid var(--terre-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);
}

.encart-titre {
  font-family: var(--titre);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 0.9rem;
  max-width: 18ch;
}

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

/* Le bouton porte le rose de la marque en aplat. Blanc sur Rausch donne
   3,05:1 : conforme a partir de 18,66 px en gras, d'ou le libelle en 1,05 rem
   700. Un libelle plus petit aurait oblige a foncer le fond, et le bouton
   aurait perdu la couleur qu'on venait y chercher. */
.bouton {
  display: inline-block;
  background: var(--terre);
  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(--terre-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(--terre-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(--terre);
  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;
}

.autrice-portrait {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  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(--terre);
  letter-spacing: 0.1em;
}

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

.avis a {
  color: var(--terre-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(--terre-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(--terre-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 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding-block: 0.9rem;
}

.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(--terre-lien);
  border-color: var(--terre-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(--terre);
  border-color: var(--terre);
  color: #fff;
}

/* L'etiquette de rubrique, dans le fil d'Ariane d'un guide. */
.etiquette {
  color: var(--terre-lien);
  text-decoration: none;
  font-weight: 600;
}

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

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

.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(--terre-lien);
  text-decoration: underline;
}