/*
 * Feuille de style du site public.
 *
 * Elle réunit ce qui vivait dans les composants du générateur : l'habillage, les
 * gabarits de page, les galeries, la visionneuse et le formulaire.
 *
 * Les couleurs restent celles relevées sur l'ancien site. Ce qui change, et qui
 * est demandé : les polices, l'occupation de la largeur, et un en-tête qui donne
 * enfin sa place à la photo.
 */

/* ===============================================================
   Réglages communs.
   =============================================================== */

:root {
  --blue: #1e73bf;
  /*
   * Les liens du corps des pages. Le violet du site d'origine se confondait
   * avec le bleu du texte tant qu'on ne l'avait pas suivi, puis virait au
   * violet visité des navigateurs.
   *
   * Ils portent maintenant une pastille : ces liens ouvrent tous une photo,
   * autant qu'ils s'annoncent comme des boutons. C'est le bleu du menu, pour
   * n'ajouter aucune couleur à la palette ; le texte y est blanc et l'orange
   * réservé à l'icône. En texte, l'orange n'y tenait pas — 2,8 contre 1, en
   * deçà de ce qui se lit confortablement.
   */
  --link-bg: var(--blue);
  --link-fg: #fff;
  --link-bg-hover: var(--blue-deep);

  /*
   * Le bleu profond : ce qu'on voit derrière une photo, sous une pastille
   * survolée, et le temps que l'en-tête charge. Trois valeurs voisines
   * traînaient pour ces trois usages — celle-ci les remplace.
   */
  --blue-deep: #14416b;

  /* Le petit appareil photo posé au bout des liens qui ouvrent une image. */
  --icone-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9.2 3h5.6l1.5 2H20a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3.7l1.5-2Zm2.8 5.2a5.3 5.3 0 1 0 0 10.6 5.3 5.3 0 0 0 0-10.6Zm0 2a3.3 3.3 0 1 1 0 6.6 3.3 3.3 0 0 1 0-6.6Z'/%3E%3C/svg%3E");
  --panel: #e9e9e9;
  --text: #4a4a4a;
  --heading: #333;
  --line: #f1f1f1;
  /*
   * La couleur d'accent : un jaune doré, chaud, qui tient sur le vert de la
   * lande comme sur le gris du ciel. Elle est née du repère de l'en-tête, puis
   * a remplacé le jaune vif du thème d'origine, qui jurait à côté.
   */
  --accent: #ffb43c;

  /*
   * Les titres portent une serif à empattements doux, le texte une sans ronde et
   * ouverte : chaleureuses toutes les deux, sans l'air d'écriture scolaire que
   * donnait Comic Sans. Les substituts locaux sont choisis dans le même esprit,
   * pour que l'attente du chargement ne déforme pas la page.
   */
  --font-title: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /*
   * Deux largeurs, et non une seule : l'en-tête, les bandeaux et le pied de page
   * vont d'un bord à l'autre de l'écran, tandis que le texte s'arrête à une
   * longueur de ligne lisible. C'est ce qui remplace le cadre de 1300 px, qui
   * laissait 300 px vides de chaque côté sur un grand écran sans jamais élargir
   * le contenu pour autant.
   */
  --page: 1280px;
  --gutter: clamp(16px, 3.2vw, 44px);

  /*
   * Le format de la photo d'en-tête, écrit deux fois parce qu'il sert à deux
   * choses : en rapport pour `aspect-ratio`, en nombre pour les calculs du
   * recadrage. Changer de photo, c'est changer ces trois valeurs — la largeur
   * au-delà de laquelle la photo n'est plus élargie étant celle où elle tient
   * en entier, ici 1600 px sur 444 px de haut.
   */
  --banner-nombre: 2.8444;

  /*
   * Où se tient le regard quand la photo doit être recadrée. Les deux réglages
   * ne jouent jamais ensemble : un écran large recadre en hauteur, un écran
   * étroit en largeur.
   *
   * En hauteur comme en largeur, le point retenu est celui du gîte : son pignon
   * blanc est à 76 % de la largeur de la photo et à 45 % de sa hauteur. Cadré
   * au centre, il tombait hors champ sur un téléphone — or c'est lui que
   * l'en-tête est censé désigner.
   */
  --banner-focus-x: 76%;
  --banner-focus-y: 45%;
}

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

body {
  margin: 0;
  background: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  overflow-wrap: break-word;
  /* Une bande blanche apparaissait à droite dès qu'un élément dépassait d'un
     pixel ; la page n'a aucune raison de défiler latéralement. */
  overflow-x: hidden;
}

/*
 * Le site occupe toute la largeur de la fenêtre. Les marges vivent dans
 * `.container`, une seule fois, et de façon symétrique : c'est ce qui met fin
 * aux bandes blanches inégales d'un côté et de l'autre.
 *
 * En hauteur, la page remplit au moins l'écran et c'est le contenu qui prend
 * le surplus : le pied de page se tient donc toujours en bas. Sur une page
 * courte vue d'un écran haut — l'accueil sur un 1600 × 1400 — il remontait
 * jusqu'à laisser deux cents pixels de blanc sous lui.
 *
 * `dvh` plutôt que `vh` : sur un téléphone, `vh` compte la fenêtre barres
 * d'adresse rétractées, et la page dépasse alors d'autant.
 */
#wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
}

/* C'est le contenu qui s'étire, jamais l'en-tête ni le pied de page. */
#main {
  flex: 1 0 auto;
}

#site-header,
#footer {
  flex: none;
}

.container {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===============================================================
   En-tête : la photo, le nom du gîte, le menu.
   =============================================================== */

/* Le bleu de nuit ne se voit qu'au chargement, derrière la photo : la barre du
   menu, elle, garde le bleu du site. */
#site-header {
  background: var(--blue-deep);
}

/*
 * La sentinelle du script : sans boîte à observer, elle ne franchirait jamais
 * le bord de l'écran, et la barre ne saurait pas qu'elle s'est posée. Son
 * pixel de hauteur se lisait comme un filet blanc entre la photo et le menu :
 * la marge négative le fait recouvrir par la barre, sans le supprimer.
 */
#avant-menu {
  display: block;
  height: 1px;
  margin-bottom: -1px;
}

/*
 * La barre du menu suit le lecteur : elle se fige en haut de l'écran dès que la
 * photo est passée. Sans cela, revenir à la navigation demandait de remonter
 * toute la page — c'est le seul endroit du site où l'on change de page.
 */
#site-navigation {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--blue);
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Une fois détachée de l'en-tête, elle se pose sur le contenu : une ombre l'en
   sépare, et le bleu se fonce d'un rien pour marquer qu'elle flotte. */
#site-navigation.collee {
  background: #1a66ab;
  box-shadow: 0 2px 14px rgb(10 35 60 / 28%);
}

/*
 * La photo respire enfin en hauteur : 86 px sur grand écran, c'était une frise,
 * et 26 px sur téléphone rendaient le nom illisible.
 *
 * Elle garde toute la largeur de la fenêtre. Passé une certaine taille d'écran,
 * sa hauteur ne peut plus suivre sans occuper la page entière : elle est donc
 * recadrée, et c'est `--banner-focus-y` qui décide de ce qu'on garde — la
 * plage, la côte et la maison plutôt que le ciel.
 */
.banner {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(210px, 23vw, 444px);
  overflow: hidden;
  text-decoration: none;
  background: var(--blue-deep);
}

/*
 * `object-fit: cover` recadrerait la photo sans que le dessin du repère le
 * sache : la flèche désignerait un point de la lande, et non la maison. La
 * scène reproduit donc elle-même ce recadrage — elle garde le format de la
 * photo et déborde du cadre du plus petit côté — et porte le dessin avec elle,
 * dans le même système de coordonnées.
 *
 * `--focus` dit quel point de la photo reste au centre quand l'écran se
 * resserre : le gîte est sur la droite, c'est lui qu'on garde.
 */
.banner {
  container-type: size;
}

.scene {
  position: absolute;
  top: var(--banner-focus-y);
  left: var(--banner-focus-x);
  transform: translate(calc(var(--banner-focus-x) * -1), calc(var(--banner-focus-y) * -1));
  width: max(100cqw, calc(100cqh * var(--banner-nombre)));
  height: max(100cqh, calc(100cqw / var(--banner-nombre)));
}

.scene img {
  width: 100%;
  height: 100%;
  display: block;
}

/*
 * Le repère du gîte : il était peint dans la photo, en orange, avec un second
 * nom du gîte qui doublait celui de l'en-tête. Il est redessiné ici — donc net
 * à toutes les tailles, et modifiable sans retoucher l'image.
 *
 * Le bloc n'a pas de dimensions propres : il marque un point, celui du pignon
 * blanc de la maison, et tout ce qu'il contient se place autour de ce point en
 * `em`. Un seul corps, plafonné, commande donc l'ensemble — rayons compris.
 * Tant que les rayons suivaient l'échelle de la photo et les mots la leur, les
 * deux moitiés du repère glissaient l'une contre l'autre d'un écran à l'autre.
 *
 * L'ombre portée le décolle du paysage : sans elle, le trait se perd dès qu'il
 * passe sur un ciel clair.
 */
.scene .repere {
  position: absolute;
  left: 75.8%;
  top: 45%;
  width: 0;
  height: 0;
  font-size: clamp(15px, 2.1vw, 30px);
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgb(20 40 20 / 45%));
}

/* Les rayons cernent le point, donc se centrent dessus. */
.scene .rayons {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.5em;
  height: 3.5em;
  transform: translate(-50%, -50%);
  display: block;
  overflow: visible;
}

/*
 * Les mots et la flèche viennent d'en bas à gauche. Le groupe est accroché par
 * son coin haut-droit, où se trouve la pointe : ancré par son centre, la pointe
 * remontait ou descendait avec la taille du groupe — trop courte sur un grand
 * écran, débordant sur la maison sur un petit.
 */
.scene .dit-ou {
  position: absolute;
  right: 0.62em;
  top: 0.3em;
  display: flex;
  align-items: center;
  gap: 0.2em;
}

.scene .ici {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 600;
  white-space: nowrap;
  color: var(--accent);
  /* Les mots se posent un peu plus bas que l'axe de la flèche : centrés
     dessus, ils la serraient de trop près. */
  transform: translateY(0.34em);
}

.scene .fleche {
  width: 4.7em;
  height: 2.1em;
  flex: none;
  display: block;
  overflow: visible;
}

/*
 * Sur un téléphone, la photo est resserrée sur le gîte et le nom occupe le bas
 * de l'image : la flèche et les mots passaient dessous, trop petits pour être
 * lus de toute façon. Les rayons suffisent alors à désigner la maison.
 */
@media (max-width: 700px) {
  .scene .dit-ou {
    display: none;
  }
}


/*
 * Un voile sombre, plus dense à gauche qu'à droite : le nom s'y détache sans
 * qu'on ait à assombrir la photo entière, et la vue reste lisible à droite.
 */
.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(8 28 46 / 62%) 0%, rgb(8 28 46 / 34%) 42%, rgb(8 28 46 / 8%) 78%),
    linear-gradient(to top, rgb(8 28 46 / 34%) 0%, rgb(8 28 46 / 0%) 45%);
}

.wordmark {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: clamp(20px, 3.4vw, 48px);
  /* Le nom ne court pas sous toute la photo : il garde la colonne de gauche. */
  max-width: min(680px, 78%);
  color: #fff;
  text-shadow: 0 2px 16px rgb(0 20 40 / 55%);
}

/* Le conteneur du site étant centré, le nom se cale sur sa marge de gauche
   plutôt que sur le bord de l'écran dès que la fenêtre dépasse cette largeur. */
@media (min-width: 1280px) {
  .wordmark {
    left: calc((100vw - var(--page)) / 2 + var(--gutter));
  }
}

.wordmark .nom {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(27px, 3.9vw, 54px);
  line-height: 1.1;
}

.wordmark .lieu {
  display: block;
  margin-top: 8px;
  font-size: clamp(12px, 1.1vw, 17px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}

/*
 * Sur un téléphone, le nom tenait sur deux lignes et le lieu sur deux autres :
 * quatre lignes de texte venaient buter contre le repère du gîte. Le bloc
 * gagne en largeur et le lieu resserre son interlettrage, pour tenir d'un trait.
 */
@media (max-width: 560px) {
  .wordmark {
    max-width: 88%;
  }

  .wordmark .lieu {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.07em;
  }
}

/*
 * Au-delà de 860 px, le menu est déployé et le bouton masqué. La règle est
 * verrouillée : les styles repris de l'ancien site redonnaient sinon une
 * largeur au bouton, qui réapparaissait sur le bandeau.
 */
#site-navigation .menu-toggle {
  display: none !important;
}

/* Le menu suit la colonne du site plutôt que le bord de l'écran ; le retrait
   compense le rembourrage propre aux liens, pour que le premier s'aligne sur le
   texte des pages. */
#site-navigation .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 calc(var(--gutter) - 16px);
}

#site-navigation ul {
  flex: 1;
}

#site-navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

#site-navigation a {
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  padding: 16px 18px;
  text-decoration: none;
  transition: color 0.18s ease;
}

/*
 * Le trait se déploie sous l'entrée survolée, et reste posé sous celle de la
 * page courante. La couleur seule ne disait pas grand-chose : elle se remarque
 * une fois qu'on la cherche, ce trait se voit avant.
 */
#site-navigation a::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 9px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}

#site-navigation a:hover,
#site-navigation a:focus-visible,
#site-navigation a.current {
  color: var(--accent);
}

#site-navigation a:hover::after,
#site-navigation a:focus-visible::after,
#site-navigation a.current::after {
  transform: scaleX(1);
}

/*
 * La réservation n'est pas une page de plus : c'est ce que le visiteur est venu
 * faire, et elle quitte le site. D'où un bouton, et non un onglet.
 */
#site-navigation a.action {
  margin: 7px 0 7px 10px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #40260a;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

#site-navigation a.action:hover,
#site-navigation a.action:focus-visible {
  background: #fff;
  color: #14416b;
  transform: translateY(-1px);
}

/* Le trait n'a rien à souligner sous un bouton. */
#site-navigation a.action::after {
  content: none;
}

/* Un site qui bouge moins pour qui le demande. */
@media (prefers-reduced-motion: reduce) {
  #site-navigation,
  #site-navigation a,
  #site-navigation a::after {
    transition: none;
  }
}

/* ===============================================================
   Contenu.
   =============================================================== */

#main {
  padding: clamp(28px, 3.6vw, 56px) 0 clamp(40px, 4.5vw, 72px);
}

/*
 * L'ancien gabarit réservait une colonne latérale — d'où un filet à droite et
 * trente pixels de retrait, qui décalaient toute la page vers la gauche. Cette
 * colonne n'existe plus : le contenu occupe sa largeur, et rien ne le dépare.
 */
.entry-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-title);
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--heading);
  line-height: 1.3;
}

.entry-content h1 {
  font-size: 26px;
}

.entry-content p {
  margin: 0 0 20px;
}

.entry-content a {
  color: var(--blue);
}

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

/* Les cartes intégrées portent une largeur fixe en attribut, qui déborde de
   leur colonne sur les écrans étroits. */
.entry-content iframe,
.entry-content embed,
.entry-content object {
  max-width: 100%;
}

/* ===============================================================
   Pied de page.
   =============================================================== */

#footer-bottom {
  background: #1e73be;
  padding: 18px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
}

#footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
}

#footer-bottom p {
  margin: 0;
}

.footer-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu li {
  display: flex;
}

.footer-menu li + li::before {
  content: '|';
  padding: 0 8px;
  color: #cfe2f3;
}

.footer-menu a {
  color: #fff;
  text-decoration: none;
}

.footer-menu a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===============================================================
   Petits écrans.
   =============================================================== */

@media (max-width: 860px) {
  #site-navigation .menu-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
  }

  /* Replié par défaut dès que le script a pris la main. */
  #site-navigation.collapsible ul {
    display: none;
  }

  #site-navigation.collapsible ul.open {
    display: flex;
  }

  #site-navigation .burger {
    font-size: 17px;
    line-height: 1;
  }

  #site-navigation ul {
    flex-basis: 100%;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 0 8px;
    border-top: 1px solid rgb(255 255 255 / 25%);
  }

  #site-navigation a {
    padding: 11px 16px;
    line-height: 1.5;
  }

  #site-navigation a::after {
    left: 16px;
    right: auto;
    width: 26px;
    bottom: 6px;
  }

  #site-navigation a.action {
    margin: 8px 16px 6px;
    text-align: center;
  }

  /*
   * Les colonnes Gutenberg gardent leur largeur en pourcentage sur petit
   * écran : elles s'empilent, et la colonne d'espacement disparaît.
   */
  .entry-content .wp-block-columns {
    flex-wrap: wrap;
    /* Les blocs héritent d'une largeur calculée pour l'écran large. */
    width: 100%;
    max-width: 100%;
  }

  .entry-content .wp-block-column {
    flex-basis: 100% !important;
    min-width: 0;
  }

  .entry-content .wp-block-column:empty {
    display: none;
  }

  #footer-bottom .container {
    justify-content: center;
    text-align: center;
  }
}

/* ===============================================================
   Gabarit nu, sans en-tête ni menu.

   Ces règles ne valaient que pour lui, mais elles étaient écrites sans garde :
   déclarées après les autres, elles reprenaient la main sur toutes les pages —
   c'est ainsi que le fond du site était devenu blanc. Elles sont désormais
   tenues par la classe que porte ce gabarit, et lui seul.
   =============================================================== */

body.bare {
  background: #fff;
}

#bare-main {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 48px) var(--gutter);
}

/* ===============================================================
   Corps des pages, selon leur gabarit.
   =============================================================== */

/* Titres : bandeau bleu centré, comme sur le site d'origine.
   Les sélecteurs sont préfixés par .entry-content : le gabarit y donne une
   couleur à tous les titres, et elle l'emporterait sinon sur celle-ci — le texte
   du bandeau passait au gris sur fond bleu. */
.entry-content .section-heading {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  background: var(--blue);
  padding: 20px 24px;
  margin: 0 0 26px;
}

/* Chapô : bleu, centré et aéré, sous le bandeau. */
.entry-content .section-lead {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--blue);
  background: none;
  padding: 0;
  margin: 0 0 20px;
}

/*
 * Intertitre d'une partie. Il annonce un espace du logement — « Au
 * rez-de-chaussée », « À l'étage » — et non une parenthèse : il se tient donc
 * au bord gauche, comme le texte qu'il introduit, et a la taille d'un titre.
 * Centré et petit, il flottait au-dessus de son bloc sans lui appartenir.
 *
 * Le filet rappelle l'accent de l'en-tête et marque le début d'une partie sans
 * ajouter de ligne.
 */
.entry-content .section-minor {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--heading);
  background: none;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--accent);
  margin: 36px 0 16px;
}

/* Le premier n'a rien au-dessus dont il faille se détacher. */
.entry-content .section-minor:first-child {
  margin-top: 0;
}

/*
 * Dans une colonne de la page Contact, il coiffe un renseignement court : le
 * filet et l'espace d'une partie y seraient hors de propos.
 */
.entry-content .section-column .section-minor {
  font-size: 19px;
  padding-left: 0;
  border-left: 0;
  margin: 0 0 12px;
}

/*
 * Le corps des pages est bleu, comme sur le site d'origine : le contenu n'en
 * porte plus la trace depuis qu'il s'édite sans style, c'est donc ici qu'elle
 * vit. Les liens y tranchent en violet, et le gras ne force pas le trait.
 */
.entry-content .section-text,
.entry-content .section-text p,
.entry-content .section-text li {
  color: var(--blue);
}

/*
 * Titres écrits dans le corps du texte.
 *
 * Ils viennent de la liste de format de l'éditeur et n'ont pas le même rôle que
 * le titre de la page : celui-là l'annonce, ceux-ci articulent un texte. D'où
 * une échelle plus sobre, sans bandeau ni centrage.
 */
.entry-content .section-text :is(h1, h2, h3, h4, h5, h6) {
  color: var(--heading);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  margin: 28px 0 12px;
}

.entry-content .section-text > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

.entry-content .section-text h1 {
  font-size: 24px;
}

.entry-content .section-text h2 {
  font-size: 21px;
}

.entry-content .section-text h3 {
  font-size: 18px;
}

.entry-content .section-text :is(h4, h5, h6) {
  font-size: 16px;
}

.entry-content .section-text strong,
.entry-content .section-text b {
  font-weight: 700;
}

.entry-content .section-text em,
.entry-content .section-text i {
  font-style: italic;
}

/*
 * Tous les liens du site mènent à une photo, qu'ils ouvrent sur place. Ils le
 * disent : la couleur seule se remarque une fois qu'on la cherche.
 */
.entry-content .section-text a,
.entry-content .section-text a:visited {
  color: var(--link-fg);
  background: var(--link-bg);
  border-radius: 4px;
  padding: 1px 7px;
  text-decoration: none;
  /* Un lien qui passe à la ligne garde sa pastille des deux côtés, au lieu
     d'une moitié ouverte. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 0.16s ease, color 0.16s ease;
}

/* Au survol, la pastille s'enfonce : le texte reste blanc, ce qui tient la
   lisibilité là où une inversion l'aurait perdue. */
.entry-content .section-text a:hover,
.entry-content .section-text a:focus-visible {
  background: var(--link-bg-hover);
}

/*
 * L'icône vit ici, et non dans le texte enregistré : elle suivrait sinon chaque
 * lien dans la base, à recopier à chaque ajout et à retirer partout le jour où
 * elle changerait. Le sélecteur la pose sur ce qui mène à une image, ce qui
 * reste vrai des liens à venir.
 *
 * `mask` plutôt qu'une image de fond : le dessin prend la couleur du lien, donc
 * change avec lui au survol.
 */
.entry-content .section-text a[href$='.webp']::after,
.entry-content .section-text a[href$='.jpg']::after,
.entry-content .section-text a[href$='.jpeg']::after,
.entry-content .section-text a[href$='.png']::after {
  content: '';
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.32em;
  vertical-align: -0.16em;
  background-color: var(--accent);
  mask: var(--icone-photo) center / contain no-repeat;
  -webkit-mask: var(--icone-photo) center / contain no-repeat;
}

.section-text {
  margin: 0 0 20px;
}

.section-text p {
  margin: 0 0 16px;
}

.section-text :is(ul, ol) {
  margin: 0 0 16px;
  padding-left: 22px;
}

/*
 * Une liste qui suit un paragraphe lui appartient : c'est presque toujours son
 * intertitre — « Dans l'entrée : » et ce qu'on y trouve. L'écart plein les
 * séparait comme deux idées distinctes ; il est resserré pour qu'on lise un
 * bloc, et non deux.
 */
.section-text p + :is(ul, ol) {
  margin-top: -9px;
}

/* L'éditeur place un paragraphe dans chaque élément de liste : il ne doit pas
   en écarter les puces. */
.section-text li > p {
  margin: 0;
}

/* Texte et image côte à côte, sur fond gris. */
.section-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  /* La photo tient toute la hauteur de la partie, texte compris : centrée,
     elle laissait deux bandes de fond gris au-dessus et au-dessous. */
  align-items: stretch;
  background: var(--panel);
  margin: 0 0 28px;
}

.section-media .section-text {
  margin: 0;
  padding: clamp(24px, 2.6vw, 40px);
}

/* Une partie sans photo garde le même encadré, sur toute la largeur. */
.section-plain {
  background: var(--panel);
  margin: 0 0 28px;
}

.section-plain .section-text {
  margin: 0;
  padding: clamp(24px, 2.6vw, 40px);
}

/*
 * Sans photo à côté, le texte tiendrait sur toute la largeur de la page : une
 * ligne de 150 caractères se perd d'un bout à l'autre. Il s'arrête donc à une
 * longueur de lecture confortable — mais commence au même bord que les autres.
 * Centré, une partie sans photo se décalait de deux cents pixels par rapport à
 * celles qui l'encadrent, et la page paraissait désalignée.
 */
.section-plain .section-text {
  max-width: 78ch;
  margin-inline: 0;
}

.section-media > figure {
  margin: 0;
  height: 100%;
}

.section-media > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Galerie : grille souple, légende en surimpression comme à l'origine. */
.section-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  margin: 0 0 28px;
}

.section-gallery figure {
  position: relative;
  margin: 0;
  min-width: 0;
  /* Toutes les vignettes au même format : sans cela, une photo plus courte que
     ses voisines laisse une bande vide sous elle. */
  aspect-ratio: 4 / 3;
}

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

.section-gallery figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 12px 10px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background: linear-gradient(transparent, rgb(0 0 0 / 55%));
}

/*
 * Contact : téléphone, adresse et carte d'un côté, formulaire de l'autre, sur le
 * fond gris du site d'origine. Sur un écran étroit, les deux colonnes s'empilent
 * dans l'ordre de lecture.
 */
.section-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0;
  background: var(--panel);
  margin: 0 0 28px;
}

.section-column {
  padding: clamp(22px, 2.4vw, 36px);
  min-width: 0;
}

.section-column > *:last-child {
  margin-bottom: 0;
}

/* Le renseignement se range sous son intertitre, au même bord. */
.entry-content .section-column .section-text p {
  text-align: left;
}

.section-map {
  margin: 0 0 24px;
}

.section-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
}

@media (max-width: 860px) {
  .entry-content .section-heading {
    font-size: 21px;
    padding: 14px 16px;
  }

  .entry-content .section-lead {
    font-size: 18px;
  }

  .section-media {
    grid-template-columns: 1fr;
  }
}

/* ===============================================================
   Galerie d'une partie de page.
   =============================================================== */

/*
 * Hauteur fixe : une partie très décrite et une autre expédiée en deux lignes
 * donnaient des photos de tailles différentes, et la page paraissait bancale.
 * Le cadre ne bouge plus, quel que soit le format des photos.
 */
.block-gallery {
  position: relative;
  /*
   * Le cadre prend le format des photos horizontales, qui sont toutes en 4:3 :
   * elles le remplissent alors au pixel près, sans rien perdre sur les côtés.
   * Réglé sur la hauteur du texte voisin, il leur mangeait un cinquième de la
   * largeur — le cadrage du photographe passait à la trappe.
   *
   * Les verticales, elles, entrent en entier : c'est là, et là seulement, que
   * les deux bandes de couleur se voient.
   */
  aspect-ratio: 4 / 3;
  align-self: center;
  /*
   * Ce qui se voit derrière une photo verticale, qui n'occupe pas toute la
   * largeur du cadre : deux bandes de bleu profond, plutôt que le noir d'une
   * salle de projection. L'accent doré y était trop vif — il s'imposait plus
   * que la photo qu'il encadre. Une photo horizontale, elle, remplit le
   * cadre : on n'en voit donc jamais rien.
   */
  background: var(--blue-deep);
}

/*
 * Les vues sont superposées et sorties du flux : le cadre garde ainsi la même
 * hauteur d'une photo à l'autre. Sans cela il se réglait sur la photo affichée
 * et sautait de deux cents pixels au passage d'une horizontale à une verticale,
 * emportant le texte d'à côté avec lui.
 */
.block-gallery .slide {
  position: absolute;
  inset: 0;
}



.block-gallery .slide {
  margin: 0;
}

.block-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* Prise à la verticale : elle entre en entier, entre deux bandes noires. Le
   classement se fait au chargement, la page ne connaît pas les dimensions. */
.block-gallery img.portrait {
  object-fit: contain;
}

.block-gallery figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background: linear-gradient(transparent, rgb(0 0 0 / 55%));
}

/* Les flèches se posent sur la photo, assez grandes pour être visées sans
   effort — y compris au doigt. */
.block-gallery .gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  border: 0;
  background: rgb(0 0 0 / 35%);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

.block-gallery .gallery-nav:hover {
  background: rgb(0 0 0 / 55%);
  opacity: 1;
}

.block-gallery .prev {
  left: 0;
  border-radius: 0 4px 4px 0;
}

.block-gallery .next {
  right: 0;
  border-radius: 4px 0 0 4px;
}

.block-gallery .gallery-counter {
  position: absolute;
  top: 10px;
  right: 12px;
  margin: 0;
  padding: 3px 9px;
  border-radius: 12px;
  background: rgb(0 0 0 / 45%);
  color: #fff;
  font-size: 13px;
}

/* ===============================================================
   Visionneuse plein écran.
   =============================================================== */

#lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: rgb(12 18 22 / 94%);
  color: #fff;
  display: none;
  place-items: center;
  grid-template-columns: auto 1fr auto;
}

#lightbox[open] {
  display: grid;
}

#lightbox::backdrop {
  background: rgb(12 18 22 / 80%);
}

#lightbox figure {
  grid-column: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-height: 92vh;
}

#lightbox img {
  max-width: min(92vw, 1400px);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
}

#lightbox figcaption {
  font: 400 16px/1.5 var(--font-body);
  text-align: center;
  max-width: 44rem;
  padding-inline: 16px;
}

#lightbox .nav,
#lightbox .close {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  line-height: 1;
  opacity: 0.75;
}

#lightbox .nav {
  font-size: 54px;
  padding: 24px 22px;
}

#lightbox .prev {
  grid-column: 1;
}

#lightbox .next {
  grid-column: 3;
}

#lightbox .close {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 40px;
  padding: 6px 14px;
}

#lightbox .nav:hover,
#lightbox .close:hover {
  opacity: 1;
}

#lightbox .counter {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font: 400 14px/1 var(--font-body);
  opacity: 0.7;
}

/* Les photos cliquables s'annoncent comme telles. */
.section-gallery img,
.block-gallery img,
a[href$='.webp'],
a[href$='.jpg'] {
  cursor: zoom-in;
}

@media (max-width: 720px) {
  #lightbox .nav {
    font-size: 38px;
    padding: 16px 10px;
  }

  #lightbox img {
    max-height: 68vh;
  }
}

/* ===============================================================
   Formulaire de contact.
   =============================================================== */

.contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
}

.contact .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact label {
  font-size: 14px;
  color: inherit;
}

/*
 * Les champs de l'ancien formulaire faisaient 21 px de haut : on y visait mal au
 * doigt. Ils prennent la hauteur d'une cible tactile, et la largeur de leur
 * colonne plutôt qu'une valeur en dur.
 */
.contact input,
.contact textarea {
  font: inherit;
  color: #333;
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 4px;
  padding: 9px 11px;
  width: 100%;
}

.contact textarea {
  height: 170px;
  resize: vertical;
}

.contact input:focus,
.contact textarea:focus {
  border-color: var(--blue);
  outline: 2px solid rgb(30 115 191 / 35%);
  outline-offset: 1px;
}

/*
 * Le pot de miel doit rester hors de vue en toutes circonstances : une règle
 * héritée des styles repris lui redonnait sinon une taille visible. Les
 * déclarations sont donc verrouillées, et le champ sorti du flux plutôt que
 * masqué par display:none, que certains robots repèrent.
 */
.contact .trap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.contact .trap input {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  min-width: 0 !important;
}

.contact button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  border: 0;
  border-radius: 4px;
  padding: 11px 24px;
  background: var(--blue);
  color: #fff;
}

.contact button:hover:not(:disabled) {
  background: #195f9e;
}

.contact button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.contact .feedback {
  margin: 0;
  font-size: 15px;
  min-height: 1.4em;
}

.contact .feedback:empty {
  min-height: 0;
}

.contact .feedback.ok {
  color: #1f7a4d;
}

.contact .feedback.error {
  color: #b4453a;
}