/* =================================================================
   Youen Frémont — Bloc « Travaillons ensemble », carrousel, pied de page
   Feuille 5 sur 8. La feuille unique a été découpée le 2026-09-19 aux
   frontières de ses sections, sans qu'une règle ne change de place : les huit
   fichiers se chargent dans l'ordre de base.njk, et cet ordre EST la cascade.
   Les tokens et les surfaces vivent dans style.css, chargée en premier.
   ================================================================= */

/* -----------------------------------------------------------------
   12. Section contact
   ----------------------------------------------------------------- */
.section-contact {
  padding: var(--pas-8) var(--marge-page);
}

/* Sur un grand écran, la marge de page seule laissait le bloc d'appel courir
   d'un bord à l'autre du panneau : la liste de contact et le visuel s'étalaient
   sans respiration. Demandé le 2026-08-21. */
@media (min-width: 64em) {
  .section-contact {
    padding-inline: calc(var(--marge-page) + var(--pas-8));
  }
}

.section-contact__titre {
  display: grid;
  margin-bottom: var(--pas-7);
  color: var(--titre);
  font-size: var(--texte-l);
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre);
  text-align: center;
  text-transform: uppercase;
}

/* Les deux colonnes descendent jusqu'au même point : pas d'align-items ici, les
   éléments s'étirent sur la hauteur de la ligne. */
.section-contact__corps {
  display: grid;
  gap: var(--pas-6);
}

/* La liste occupe donc toute la hauteur, et ses quatre lignes se la partagent :
   le dernier filet tombe au ras du bas du visuel. Sur une seule colonne, il n'y
   a pas de hauteur en trop à répartir et les lignes gardent la leur. */
.section-contact__corps .liste-contact {
  display: flex;
  flex-direction: column;
}

.section-contact__corps .liste-contact__ligne {
  flex: 1;
  /* Libellé et valeur sont au même corps : les centrer sur une ligne étirée les
     laisse alignés, là où la ligne de base les collerait en haut. */
  align-items: center;
}

.liste-contact__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pas-4);
  padding: var(--pas-4) 0;
  /* Les filets prennent la couleur de la page, décision du 2026-08-19 : c'est le
     bloc le plus coloré du panneau blanc, sans qu'aucun texte n'y change. Les
     trois pages qui le portent sont sur violet, bleu et vert. */
  border-bottom: 1px solid var(--remplissage);
}

.liste-contact dt {
  font-size: var(--texte-xs);
  letter-spacing: var(--approche-libelle);
  text-transform: uppercase;
}

.liste-contact dd {
  margin: 0;
  font-size: var(--texte-xs);
  letter-spacing: var(--approche-libelle);
  text-align: right;
  text-transform: uppercase;
}

.section-contact__visuel {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--rayon-s);
  background-color: var(--emplacement);
}

.section-contact__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le carrousel qui occupe ce cadre quand aucune image n'est choisie. Tous les
   plans sont empilés dans la même case de grille ; un seul porte `data-actif`,
   et c'est lui qu'on voit. Les autres sont transparents ET `visibility:
   hidden` : sans le second, leurs liens resteraient dans l'ordre de tabulation
   et un clavier s'arrêterait sept fois sur une image invisible. La transition
   de `visibility` est retardée d'un fondu à la disparition, immédiate à
   l'apparition, pour que les deux images se croisent au lieu de se succéder. */
.carrousel {
  display: grid;
  /* Une seule rangée, à la hauteur du cadre. Sans elle, la rangée prenait la
     hauteur de la plus haute image — 852 px pour une verticale dans un cadre
     de 320 — et le cadre n'en montrait que le haut. Signalé le 2026-09-19. */
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carrousel__plan {
  grid-area: 1 / 1;
  /* Le minimum automatique d'un élément de grille est son contenu : il
     rouvrirait la rangée à la hauteur de l'image. */
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duree-carrousel-fondu) ease,
    visibility 0s linear var(--duree-carrousel-fondu);
}

.carrousel__plan[data-actif] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.carrousel__lien {
  position: relative;
  display: block;
  height: 100%;
}

.carrousel__lien picture,
.carrousel__lien img {
  display: block;
  width: 100%;
  height: 100%;
}

/* La photo remplit le cadre, recadrée comme sur sa carte — même ancrage, même
   zoom. Le carrousel ne tire que des horizontales (eleventy.config.js) : dans
   un cadre 16/9, une 3/2 ne perd qu'un liseré en haut et en bas, là où une
   verticale n'en laissait qu'une bande. Tranché le 2026-09-19. */
.carrousel__lien img {
  object-fit: cover;
}

/* Le titre reprend la plaque de la carte projet, en bas à gauche, et ne paraît
   qu'au survol et au focus : ici la photo passe avant le nom. Il prend la
   couleur de la page, comme le titre d'une carte survolée. */
.carrousel__titre {
  position: absolute;
  inset-inline-start: var(--pas-3);
  inset-block-end: var(--pas-3);
  max-width: calc(100% - 2 * var(--pas-3));
  padding: var(--pas-2) var(--pas-3);
  border-radius: var(--rayon-s);
  background-color: color-mix(in srgb, var(--fond) var(--voile-titre-carte), transparent);
  backdrop-filter: blur(var(--flou-titre-carte));
  color: var(--titre);
  font-family: var(--police-titre);
  font-size: var(--texte-s);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--approche-titre);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--duree-page) ease;
}

.carrousel__lien:hover .carrousel__titre,
.carrousel__lien:focus-visible .carrousel__titre {
  opacity: 1;
}

/* L'anneau de focus passe à l'intérieur du cadre : posé dehors, il serait rogné
   par l'`overflow: hidden` du cadre arrondi. Il reste dans l'encre, jamais dans
   la couleur. */
.carrousel__lien:focus-visible {
  outline-color: var(--encre);
  outline-offset: -4px;
}

/* Le fondu est un mouvement automatique : refusé, le carrousel s'arrête sur son
   premier plan (le script ne tourne pas) et une bascule éventuelle se fait sans
   transition. */
@media (prefers-reduced-motion: reduce) {
  .carrousel__plan,
  .carrousel__titre {
    transition: none;
  }
}

/* -----------------------------------------------------------------
   13. Pied de page
   ----------------------------------------------------------------- */
/* Le pied n'est pas au bout de la page : il est dessous. Il reste collé au bas
   de la fenêtre pendant tout le défilement, caché derrière le corps qui passe
   par-dessus, et se découvre à mesure que celui-ci remonte en fin de course.
   Rien ne bouge de soi-même et pas une ligne de script : c'est le collage natif
   qui fait le mouvement, et le pied qui creuse sa propre place dans la page.
   Deux conditions à tenir si on y retouche : le corps doit rester opaque et
   au-dessus (.corps, z-index 1), et le pied doit être le dernier élément du
   flux, sans quoi il resterait collé au milieu de la page. */
.pied {
  position: sticky;
  bottom: 0;
  z-index: 0;
  padding: var(--pas-7) var(--marge-page) var(--pas-5);
}

/* La signature est le logotype, pas du texte courant : comme le nom du hero,
   elle prend la couleur de sa surface. Le hero ouvre et le pied ferme sur le
   même accord, le panneau blanc glisse entre les deux. */
/* La signature est le logotype, tracé fourni le 2026-08-20. Il prend toute la
   largeur disponible et l'encre de la surface : plus de composition en Fractul,
   plus de lettres espacées à la main. */
.signature {
  color: var(--titre);
}

.logo {
  display: block;
  /* Pleine largeur, mais jamais plus haut que le tiers de l'écran : le tracé
     fait un peu plus de deux fois plus large que haut, et à pleine largeur il
     mangeait 570 px de hauteur sur un écran de 1 400. Le rapport est celui du
     fichier source — 796,532 × 372,901 depuis le logotype du 2026-09-02, contre
     569,923 × 233,792 auparavant. À reprendre si le tracé change. */
  width: min(100%, calc(var(--hauteur-logo) * 2.136));
  height: auto;
  margin-inline: auto;
}

/* Le logo en écran de veille, posé par pied-rebond.js le 2026-09-24 : un clic
   le lance, il se déplace et rapetisse depuis son coin haut gauche. La couleur
   ne se règle pas ici : le script pose data-aplat sur le pied, qui change de
   couple entier à chaque choc. */
.pied[data-rebond-pret] .logo {
  cursor: pointer;
}

.pied[data-rebond-pret]:has(.signature[data-rebond]) {
  cursor: pointer;
}

.signature[data-rebond] .logo {
  position: relative;
  z-index: 1;
  transform-origin: 0 0;
  translate: var(--rebond-x, 0px) var(--rebond-y, 0px);
  scale: var(--rebond-echelle, 1);
}

.pied__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-4);
  padding-top: var(--pas-5);
}

/* Le pied ne s'anime pas, mais il se tient immobile pendant que la page file
   par-dessus : c'est un mouvement découplé, du même ordre qu'un parallaxe, et
   c'est ce que vise la demande de mouvement réduit. Il reprend alors sa place
   au bout de la page, sans rien perdre de son contenu. */
@media (prefers-reduced-motion: reduce) {
  .pied {
    position: static;
  }
}