/* ─────────────────────────────────────────────────────────────────────────────
   Gabipicture — page d'attente.

   Un seul thème : celui de l'univers PARTICULIERS du site, la gamme « terre ».
   Les valeurs sont reprises telles quelles de site/src/styles/tokens/, mais
   figées ici : cette page ne bascule pas d'univers, elle n'a donc pas besoin de
   la cascade `[data-profil]` qui fait vivre le site.

   Aucun JavaScript — le diaporama est une animation CSS. Un seul fichier de
   style, deux polices Google, cinq images.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Gamme terre ────────────────────────────────────────────────────────── */
  --terre-25: #fdfaf7;
  --terre-50: #fff8f0; /* le lavis : le fond de la page et le voile */
  --terre-100: #f9f0e7;
  --terre-200: #f2e3d4;
  --terre-300: #deba9c;
  --terre-400: #c08552;
  --terre-500: #ab6f44; /* les filets sur fond clair */
  --terre-600: #8c5a3c; /* l'accent : boutons, diaphragme du logo */
  --terre-700: #6b4233; /* survol */
  --terre-800: #4b2e2b; /* le texte courant */
  --terre-900: #2e1c1a; /* les titres, l'encre du mot */
  --sable-600: #66554d; /* le seul ton désaturé : le texte secondaire */
  --blanc: #ffffff;

  /* Le crème en composantes nues, pour composer les voiles du diaporama sans
     réécrire le triplet à chaque arrêt de dégradé. */
  --creme-rvb: 255 248 240;

  /* ── Rôles ──────────────────────────────────────────────────────────────── */
  --fond: var(--terre-50);
  --texte-fort: var(--terre-900);
  --texte: var(--terre-800);
  --texte-attenue: var(--sable-600);
  --bordure: var(--terre-200);
  --accent: var(--terre-600);
  --accent-survol: var(--terre-700);
  --sur-accent: var(--blanc);
  --focus: var(--terre-700);
  --ombre: 74 46 43; /* triplet nu : l'ombre est brune, jamais gris bleu */

  /* ── Typographie ────────────────────────────────────────────────────────── */
  --police: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --police-titrage: 'Fraunces', Georgia, serif;

  --txt-2xs: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
  --txt-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --txt-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --txt-md: clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem);
  --txt-2xl: clamp(2rem, 1.66rem + 1.7vw, 3.25rem);

  /* ── La colonne de texte ────────────────────────────────────────────────────
     `--colonne` est l'abscisse où le bloc se termine : la gouttière de gauche
     plus sa largeur. Le voile s'en sert pour placer ses arrêts, au lieu de les
     poser en pourcentages de la fenêtre.

     C'est ce qui permet au dégradé d'être ÉTROIT : la colonne finit à 58 % de
     la largeur sur un écran de 1000 px, mais à 33 % sur un 1920. Un arrêt en
     pourcentage doit couvrir le pire des deux cas, et laisse donc sur grand
     écran une large bande de crème inutile devant la photo. Un arrêt calé sur
     `--colonne` se resserre tout seul dès que la fenêtre s'élargit. */
  --gouttiere: clamp(1.5rem, 6vw, 6rem);
  --colonne-large: min(34rem, 52vw);
  --colonne: calc(var(--gouttiere) + var(--colonne-large));

  /* ── Diaporama ──────────────────────────────────────────────────────────────
     Une seule durée à régler. Le cycle complet vaut cinq fois ce temps ; les
     `animation-delay` plus bas sont écrits en multiples de `--vue`. */
  --vue: 7s;
  --cycle: 35s; /* 5 × --vue — à tenir à la main : calc() est interdit ici */
}

/* ── Reset minimal ──────────────────────────────────────────────────────────*/

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

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

body {
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--police);
  font-size: var(--txt-base);
  line-height: 1.62;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--accent);
  color: var(--sur-accent);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LE DIAPORAMA

   Cinq images empilées au même endroit, toutes à `opacity: 0`, toutes animées
   par le même cycle — et décalées d'un cinquième de cycle chacune. À tout
   instant une seule est visible, sauf pendant la seconde et demie de
   chevauchement où l'une s'efface pendant que l'autre apparaît : c'est ce
   chevauchement qui fait le fondu enchaîné, et c'est pour ça que les vues ne
   peuvent pas être des `background-image` d'un même élément.

   `position: fixed` et non `absolute` : sur un téléphone la barre d'adresse se
   rétracte au défilement et une image en `absolute` se recadre à chaque fois.

   ── Pourquoi les délais sont écrits en dur ────────────────────────────────
   `animation-delay: calc(var(--vue) * 2)` fonctionne, mais oblige à relire
   quatre lignes pour vérifier l'ordre. Les multiplicateurs sont donc explicites
   et `--vue` reste le seul réglage : changer 7s en 5s accélère tout le
   diaporama, à condition de reporter le produit dans `--cycle`.
   ───────────────────────────────────────────────────────────────────────────── */

.diapo {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--terre-100); /* ce qu'on voit avant le premier décodage */
  overflow: hidden;
}

.diapo__vue {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: diapo var(--cycle) linear infinite;
}

.diapo__vue:nth-child(2) {
  animation-delay: 7s;
}
.diapo__vue:nth-child(3) {
  animation-delay: 14s;
}
.diapo__vue:nth-child(4) {
  animation-delay: 21s;
}
.diapo__vue:nth-child(5) {
  animation-delay: 28s;
}

/* Sur 35 s : 1,4 s de montée (0 → 4 %), 4,2 s de plein (4 → 16 %), 1,4 s de
   descente (16 → 20 %), puis 28 s d'attente. Le très lent agrandissement ne
   court QUE sur la fenêtre visible, et se réarme d'un coup à 20,01 % pendant que
   la vue est déjà transparente : sans ce réarmement, l'image continuerait de
   grossir dans le vide et repartirait de trop loin au tour suivant. */
@keyframes diapo {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  4% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  20% {
    opacity: 0;
    transform: scale(1.1);
  }
  20.01% {
    transform: scale(1.04);
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

/* ── Le voile ───────────────────────────────────────────────────────────────
   Le bloc de texte est posé à même la photo : sans voile, le brun du corps de
   texte passerait sur un ciel surexposé comme sur une robe blanche, et la
   lisibilité dépendrait de la vue affichée.

   Le voile est donc dense là où le texte se trouve — 0,90 de crème, soit au
   pire 9,2:1 pour `--texte` et 5,4:1 pour `--texte-attenue` au-dessus d'une
   zone noire — puis s'ouvre vers la droite pour rendre la photo à l'image. À
   0,90 la matière de la photo reste lisible derrière la colonne de texte, ce
   qu'un voile à 0,96 écrasait en aplat crème.

   Les arrêts sont posés en LONGUEURS, relativement à `--colonne`, et non plus
   en pourcentages : le crème reste plein jusqu'à 5 rem avant la fin du texte,
   puis s'ouvre sur 17 rem. La bande de crème ne dépend donc plus de la largeur
   de la fenêtre — sur un grand écran elle ne s'étale pas, c'est la photo qui
   prend la place gagnée.

   Le dégradé est incliné de 100° : à la verticale il coupait le cadre en deux
   comme un store. L'inclinaison allonge la ligne du dégradé par rapport à la
   largeur du cadre, donc les arrêts glissent un peu vers la gauche — d'où les
   5 rem d'avance sur `--colonne` plutôt qu'un arrêt pile dessus. Les valeurs
   sont réglées à la capture, pas au calcul. */
.diapo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgb(var(--creme-rvb) / 0.9) 0,
    rgb(var(--creme-rvb) / 0.9) calc(var(--colonne) - 5rem),
    rgb(var(--creme-rvb) / 0.86) var(--colonne),
    rgb(var(--creme-rvb) / 0.3) calc(var(--colonne) + 9rem),
    rgb(var(--creme-rvb) / 0.04) calc(var(--colonne) + 17rem)
  );
}

/* ── Mise en page ───────────────────────────────────────────────────────────
   Le bloc est au fer à gauche et centré verticalement ; le pied reste en bas.
   Une grille à deux rangées fait les deux d'un coup, là où un `margin-top: auto`
   sur le pied aurait annulé le centrage du bloc. */

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: start;
  gap: 2rem;
  padding: clamp(1.75rem, 5vw, 4.5rem) var(--gouttiere);
}

/* `52vw` en plus des 34 rem : sans lui, entre 900 et 1100 px de large le bloc
   garde ses 34 rem pleins et sa dernière ligne dépasse dans la partie du voile
   qui s'ouvre — le texte atténué y tombait à 3,2:1 sur une photo sombre.

   La largeur vient de `--colonne-large`, que le voile lit lui aussi : les deux
   ne peuvent pas se désynchroniser. */
.bloc {
  width: 100%;
  max-width: var(--colonne-large);
  text-align: left;
}

/* ── Logo ───────────────────────────────────────────────────────────────────
   Le mot porte l'encre, le diaphragme porte la couleur d'action. La géométrie
   est celle du composant du site ; seules les couleurs sont figées. */

.logo {
  width: min(100%, 21rem);
  height: auto;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.logo__mot {
  fill: var(--terre-900);
}

.logo__marque {
  stroke: var(--terre-600);
}

/* ── Contenu ────────────────────────────────────────────────────────────────*/

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  font-size: var(--txt-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.etiquette::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

h1 {
  font-family: var(--police-titrage);
  font-size: var(--txt-2xl);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--texte-fort);
  text-wrap: balance;
}

.lead {
  max-width: 42ch;
  margin-top: 1.25rem;
  font-size: var(--txt-md);
  line-height: 1.74;
  color: var(--texte-attenue);
  text-wrap: pretty;
}

/* ── Le bouton — le seul aplat d'accent de la page ──────────────────────────*/

/* La marge vit sur la rangée et non sur les boutons : quand ils passent l'un
   sous l'autre sur un écran étroit, une marge portée par chacun rouvrirait
   entre eux l'écart prévu pour les séparer du paragraphe. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.75rem;
  font-weight: 600;
  color: var(--sur-accent);
  background: var(--accent);
  /* Bordure transparente et non `border: 0` : le bouton secondaire en porte une
     vraie, et sans cette contrepartie il mesurait 2 px de plus que le primaire —
     visible dès qu'ils sont côte à côte. */
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: 0 12px 26px -14px rgb(var(--ombre) / 0.55);
  transition:
    background 260ms cubic-bezier(0.2, 0.9, 0.25, 1),
    transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
  /* `break-word` et non `anywhere` : `anywhere` autorise la coupure DANS le
     calcul de largeur intrinsèque, et le bouton se rétrécissait alors jusqu'à
     couper l'adresse en deux (« gabipicturepro@gmail. » / « com ») alors qu'il
     avait la place de tenir sur une ligne. `break-word` ne coupe qu'en dernier
     recours, sans peser sur la largeur choisie. */
  overflow-wrap: break-word;
}

.bouton:hover {
  background: var(--accent-survol);
  transform: translateY(-2px);
}

.bouton__fleche {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.bouton:hover .bouton__fleche {
  transform: translateX(3px);
}

.bouton__image {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le bouton du client. Il reprend la surface translucide des pastilles de
   réseaux plutôt qu'un contour posé à même le voile, et ce n'est pas qu'une
   affaire de style : l'accent brun sur le voile seul ne fait que 4,37:1
   au-dessus d'une zone noire de la photo — sous le seuil. Les 0,55 de blanc le
   remontent à 5,12:1. Mesuré, pas estimé. */
.bouton--secondaire {
  color: var(--accent);
  background: rgb(255 255 255 / 0.55);
  border-color: var(--terre-300);
  box-shadow: none;
}

.bouton--secondaire:hover {
  color: var(--accent-survol);
  background: var(--blanc);
  border-color: var(--terre-500);
}

.mention {
  margin-top: 0.9rem;
  font-size: var(--txt-sm);
  color: var(--texte-attenue);
}

/* ── Les réseaux ────────────────────────────────────────────────────────────
   Le filet est en caramel assombri : c'est là que la gamme respire, entre le
   crème du voile et le brun de l'accent. */

.filet {
  width: 3.5rem;
  height: 2px;
  margin: clamp(2rem, 5vw, 3rem) 0 clamp(1.5rem, 4vw, 2rem);
  background: var(--terre-500);
  border-radius: 999px;
  opacity: 0.5;
}

.suivre {
  font-size: var(--txt-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

.reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

/* Les pastilles sont posées sur le voile, pas sur un aplat : le fond est donc
   translucide et non `--terre-25`, sinon elles découperaient deux rectangles
   plus clairs sur la photo au moindre changement de vue. */
.reseau {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.35rem;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texte-fort);
  background: rgb(255 255 255 / 0.55);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  transition:
    color 260ms cubic-bezier(0.2, 0.9, 0.25, 1),
    border-color 260ms cubic-bezier(0.2, 0.9, 0.25, 1),
    background 260ms cubic-bezier(0.2, 0.9, 0.25, 1),
    transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.reseau:hover {
  color: var(--accent);
  background: var(--blanc);
  border-color: var(--terre-300);
  transform: translateY(-2px);
}

.reseau__icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Pied ───────────────────────────────────────────────────────────────────*/

.pied {
  font-size: var(--txt-sm);
  color: var(--texte-attenue);
}

/* ── Écrans étroits ─────────────────────────────────────────────────────────
   Le voile incliné suppose une colonne de texte à gauche et de la photo à
   droite. Sous 56 rem le texte occupe toute la largeur : le dégradé passe à la
   verticale et ne s'ouvre qu'en bas, sous le pied de page, là où il ne reste
   rien à lire. La photo continue de vivre, simplement plus discrètement. */

@media (max-width: 56rem) {
  /* Le plancher est mesuré, pas choisi à l'œil : sous une opacité de 0,86 le
     crème laisse passer assez de photo pour que `--texte-attenue` (#66554D)
     tombe sous 4,5:1 au-dessus d'une zone noire — et il y en a, dans un costume
     ou un contre-jour. Le voile est donc posé AU plancher, 0,86 au point le plus
     ouvert : 4,85:1 dans ce pire cas, 7,1:1 dans le cas normal. Il n'y a plus
     de marge — descendre encore ferait passer le texte atténué sous le seuil.
     La photo reste donc une texture chaude qui bouge plutôt qu'une image : sur
     un téléphone, le texte occupe toute la largeur et il n'y a aucun côté libre
     à lui laisser. */
  .diapo::after {
    background: linear-gradient(
      175deg,
      rgb(var(--creme-rvb) / 0.9) 0%,
      rgb(var(--creme-rvb) / 0.88) 55%,
      rgb(var(--creme-rvb) / 0.86) 100%
    );
  }

  .bloc {
    max-width: 34rem;
  }

  /* 809 px de contenu pour 800 px de fenêtre sur un 360 × 800 : neuf pixels de
     défilement pour rien. La gouttière entre le bloc et le pied les rend. */
  .page {
    gap: 1.25rem;
  }
}

/* ── La rangée de réseaux se resserre en deux temps ──────────────────────────
   Trois pastilles étiquetées — Facebook, Instagram, Google — réclament 375 px
   à leur padding resserré, et 444 px au padding plein. Sur la gouttière de 6vw,
   ça donne deux seuils :

     · au-dessus de 34 rem, le padding plein tient déjà ;
     · entre 27 et 34 rem, il faut le padding resserré ;
     · en dessous de 27 rem, aucune combinaison ne les fait tenir sur une ligne.
       Elles se cassaient alors en 2 + 1, Google seul sur sa ligne — ce qui se
       lit comme un défaut plutôt que comme une adaptation. Les libellés
       passent donc en retrait : la rangée devient trois pastilles rondes.

   Les deux seuils se recouvrent volontairement : sans le palier à 34 rem, il
   restait une bande entre 432 et 505 px où les libellés revenaient mais où le
   padding plein les faisait déborder. */

@media (max-width: 34rem) {
  /* 0,8 rem et non 1,35 rem. La marge gagnée sert aussi de coussin si les
     polices Google ne se chargent pas : le repli système est plus large, et
     sans ce coussin la rangée se casse une pastille plus tôt. */
  .reseau {
    padding: 0.65rem 0.8rem;
  }

  .reseaux {
    gap: 0.5rem;
  }
}

@media (max-width: 27rem) {
  /* Le bouton passe pleine largeur : l'adresse a une occasion de coupure après
     le point de « gmail. », et sur 253 px le navigateur la saisissait. Sur les
     270 px disponibles elle tient sur une ligne. */
  .bouton {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.15rem;
    gap: 0.5rem;
    font-size: var(--txt-sm);
  }

  /* Les deux boutons sont déjà pleine largeur : la gouttière de la rangée n'a
     plus qu'un rôle vertical, et 0,75 rem y creusent trop. */
  .actions {
    gap: 0.6rem;
  }

  /* Pastilles rondes, 45,6 px de côté — au-dessus des 44 px recommandés pour
     une cible tactile. Le libellé n'est pas supprimé mais mis en retrait
     visuel : une icône seule n'est pas un nom pour un lecteur d'écran, et
     `aria-hidden` est déjà posé sur le dessin. */
  .reseau {
    gap: 0;
    padding: 0.8rem;
  }

  .reseau span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ── Accessibilité ──────────────────────────────────────────────────────────
   Le diaporama ne se contente pas de ralentir : il s'arrête. Réduire sa durée à
   0,01 ms comme pour une transition ferait défiler les cinq vues en un
   clignotement — exactement ce que le réglage cherche à éviter. La première vue
   reste affichée, fixe. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .diapo__vue {
    animation: none;
    opacity: 0;
  }

  .diapo__vue:first-child {
    opacity: 1;
  }
}

@media (prefers-contrast: more) {
  :root {
    --bordure: var(--terre-300);
    --texte-attenue: var(--terre-800);
  }

  /* Plus de dégradé du tout : le voile devient un aplat plein. La photo
     disparaît, et c'est le sens même du réglage. */
  .diapo::after {
    background: rgb(var(--creme-rvb) / 0.99);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LA PAGE GALERIES — galeries.html

   Elle partage cette feuille avec la page d'attente : mêmes couleurs, même
   logo, mêmes boutons. Elle n'a en revanche ni diaporama ni voile — des
   vignettes de galeries derrière d'autres vignettes ne donneraient rien de
   lisible, et le client qui arrive ici cherche ses photos, pas une ambiance.

   Le cadre occupe toute la hauteur restante et le widget défile à l'intérieur.
   Le site, lui, mesure la hauteur du document embarqué en JavaScript pour que
   la page défile d'un seul tenant : c'est mieux, mais ça introduit un mode de
   panne sur une page qui n'a par ailleurs aucun script. Ici, un seul
   ascenseur — celui du cadre — et rien à exécuter.
   ───────────────────────────────────────────────────────────────────────────── */

.galeries {
  min-height: 100vh;
  min-height: 100svh;
}

/* ── L'en-tête est centré, et c'est la grille de Lumys qui l'impose ──────────
   Le widget pose ses vignettes à taille fixe — 390 px, relevé dans sa classe
   `lumys-size-390` — et CENTRE la rangée dans la largeur qu'on lui donne. Le
   nombre de colonnes change donc par paliers (1 en dessous de 860 px, 2 jusqu'à
   1290, 3 jusqu'à 1700, 4 au-delà), et la marge qu'il se réserve à gauche varie
   de 25 à 225 px selon l'endroit où l'on tombe entre deux paliers.

   Un en-tête au fer à gauche, comme sur la page d'attente, se retrouvait donc
   décalé de 227 px par rapport à la première vignette — deux blocs qui ne se
   parlent pas. Caler le cadre sur les paliers du widget aurait marché jusqu'au
   jour où Lumys change la taille de ses vignettes. Partager son axe, en
   revanche, tient à toutes les largeurs et ne dépend d'aucune de ses valeurs.

   Le lien de retour, lui, reste à gauche : c'est du mobilier, pas du contenu. */
.galeries__entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gouttiere) clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}

.galeries__entete .etiquette {
  margin-bottom: 0.75rem;
}

.galeries__entete .lead {
  max-width: 58ch;
  margin-inline: auto;
}

/* Le lien est une boîte pleine largeur qui centre son SVG, et non une boîte
   `fit-content` centrée par ses marges. La nuance compte : `fit-content` prend
   la largeur INTRINSÈQUE du SVG — 430 px, l'attribut `width` du fichier — alors
   que la règle ci-dessous n'en rend que 240. Le lien était donc bien centré,
   mais le logo se calait à gauche dans ses 430 px et paraissait décalé de 95 px.
   Mesuré : centre du lien à 720 px sur une page de 1440, centre du logo à 625. */
.galeries__logo {
  display: flex;
  justify-content: center;
  margin: clamp(1rem, 2.5vw, 1.75rem) 0 clamp(1.25rem, 3vw, 2rem);
}

/* La marge basse vient de la règle `.logo` de la page d'attente, où le logo
   ouvre le bloc et doit respirer. Ici l'espacement est porté par le lien
   lui-même : sans cette remise à zéro, les deux s'additionnaient et l'en-tête
   gagnait 43 px de vide. */
.galeries__logo .logo {
  width: min(100%, 15rem);
  height: auto;
  margin-bottom: 0;
}

/* ── Le lien de retour ──────────────────────────────────────────────────────*/

/* `align-self` et non `float`. Le float rognait la largeur disponible des
   blocs qui le suivaient : à 390 px le logo s'en trouvait poussé de 36 px vers
   la droite — la moitié de la largeur du lien — alors qu'il se croyait centré.
   Mesuré : centre du logo à 231 px pour un axe de page à 195. */
.retour {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texte-attenue);
  transition: color 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.retour:hover {
  color: var(--accent);
}

.retour__fleche {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.retour:hover .retour__fleche {
  transform: translateX(-3px);
}

/* ── Le cadre du widget ─────────────────────────────────────────────────────
   Le cadre prend la hauteur EXACTE de son contenu, mesurée par le script en bas
   de galeries.html. La page défile alors d'un seul tenant : l'en-tête s'en va,
   la liste continue, et il n'y a qu'un ascenseur.

   La version précédente donnait au cadre la hauteur restante de la fenêtre et
   laissait le widget défiler à l'intérieur. C'était sans JavaScript, mais ça
   plafonnait la liste à ~420 px sur un écran de 900 — une rangée de vignettes
   et demie, la grille de Lumys ayant un pas de 320 px.

   Les 900 px ci-dessous ne sont donc PAS la hauteur du cadre : c'est sa hauteur
   avant la première mesure, et celle qu'il garde si le script ne s'exécute pas.
   Dans ce cas le widget retrouve son ascenseur interne : la liste est amputée,
   jamais perdue. Elle est calée sur la hauteur d'attente du document embarqué
   (`#lumys-widget:empty` dans lumys.html) pour que rien ne saute au chargement. */

.cadre {
  --hauteur-cadre: 900px;
  padding-inline: var(--gouttiere);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.cadre iframe {
  display: block;
  width: 100%;
  height: var(--hauteur-cadre);
  border: 0;
  /* Le widget est peint pour un fond clair ; sans cette ligne, un navigateur en
     thème sombre lui donne un fond sombre par défaut et sa grille disparaît. */
  color-scheme: light;
}