/* Styles communs à toutes les pages */

/* Police D-DIN (Datto, licence SIL OFL 1.1 — voir fonts/FONTLOG.txt), la même que l'ancien site */
@font-face { font-family: "D-DIN"; src: url(fonts/D-DIN.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "D-DIN"; src: url(fonts/D-DIN-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "D-DIN Condensed"; src: url(fonts/D-DINCondensed-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "D-DIN", Arial, sans-serif; font-size: 14px; color: #111; background: #fff; }
a { color: inherit; text-decoration: none; }
/* Menu et titres en D-DIN Condensed Bold, comme sur l'ancien site */
nav, .filtres label, .titre, footer { font-family: "D-DIN Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 16px; }

/* En-tête : tout aligné à gauche — logo, rubriques (cachées), puis le « + » à leur droite */
header { display: flex; align-items: center; flex-wrap: wrap; padding: 24px 20px; }
.logo img { height: 56px; display: block; }
nav { order: 1; } .plus { order: 2; } .filtres { order: 3; }
nav { display: flex; overflow: hidden; white-space: nowrap; max-width: 0; transition: max-width .5s cubic-bezier(.6, 0, .2, 1); font-size: clamp(22px, 2.4vw, 34px); letter-spacing: .02em; }
/* logo, menu et « + » calés sur le logo (pas sur la ligne entière, que les filtres rendent plus haute) ; menu en bas, sur la ligne de « ATELIER NUA » */
.logo { align-self: flex-start; }
nav { align-self: flex-start; height: 56px; align-items: flex-end; line-height: 1; margin-top: .12em; }
nav a { margin-left: 32px;opacity: 0; transform: translateX(-12px); transition: opacity .25s, transform .25s; }
nav a:hover { color: #888; }
/* rubrique active soulignée par un trait (élément à part : c'est lui seul qui glisse d'une rubrique à l'autre au changement de page) */
nav a.actif { position: relative; }
nav .trait { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #111; view-transition-name: trait; }
.menu-ouvert nav { max-width: 900px; }
.menu-ouvert nav a { opacity: 1; transform: none; }
nav a:first-child { margin-left: 64px; }
.menu-ouvert nav a:nth-child(2) { transition-delay: .06s; }
.menu-ouvert nav a:nth-child(3) { transition-delay: .12s; }
.menu-ouvert nav a:nth-child(4) { transition-delay: .18s; }

/* Bouton « + » (inspiré de NP2F) : pivote en « × » et déplie les rubriques */
.plus { position: relative; flex: none; width: 56px; height: 56px; margin-left: 24px; background: none; border: 0; cursor: pointer; transition: transform .4s cubic-bezier(.6, 0, .2, 1); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 42px; height: 4px; background: #111; transform: translate(-50%, -50%); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.plus { align-self: flex-start; margin-top: 7px; } /* bas de la branche verticale sur le bas du logo */
.plus:hover { transform: rotate(90deg); }
.menu-ouvert .plus { transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce) { .plus, nav, nav a { transition: none; } }

/* Filtres (page Projets) : poussés à droite du bandeau */
.filtres { margin-left: auto; width: min(320px, 100%); display: flex; flex-direction: column; gap: 6px; }
.filtres label { text-align: right; letter-spacing: .03em; }
select { font: inherit; border: 1px solid #111; background: #fff; padding: 4px 6px; width: 100%; cursor: pointer; }

/* Écran façon KGDVS : photo à gauche, plan à droite */
.projet { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; }
.projet img { width: 100%; height: 100%; display: block; }
.projet .photo { object-fit: cover; }
.projet .plan { object-fit: contain; padding: 8vh 6vw; }
.projet .titre { display: flex; align-items: center; justify-content: center; font-size: clamp(24px, 3vw, 44px); letter-spacing: .03em; }
.legende { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 8px 110px; letter-spacing: .03em; }
.legende span + span { padding-left: 8px; }

/* Transitions entre pages (voir transition.js) : la page projet monte, puis redescend sur la grille */
@view-transition { navigation: auto; }
/* Entre les autres pages (accueil → projets…) : fondu enchaîné lent */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .9s; animation-timing-function: ease-in-out; }
html.vt-ouvrir::view-transition-old(root) { animation: none; }
html.vt-ouvrir::view-transition-new(root) { animation: vt-monte .55s cubic-bezier(.6, 0, .2, 1) both; }
html.vt-fermer::view-transition-new(root) { animation: none; }
html.vt-fermer::view-transition-old(root) { animation: vt-descend .45s cubic-bezier(.6, 0, .2, 1) both; z-index: 1; }
@keyframes vt-monte { from { transform: translateY(100vh); } }
@keyframes vt-descend { to { transform: translateY(100vh); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Accueil : curseur « cadran » blanc (le même que le bouton du menu) qui tourne lentement sur lui-même ; au clic il tourne vite (voir curseur.js) */
.curseur { position: fixed; left: -28px; top: -28px; z-index: 3; width: 56px; height: 56px; pointer-events: none; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 8px rgba(0, 0, 0, .35)); }
.curseur.visible { opacity: 1; }
.curseur i { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='27.5' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Crect x='27.2' y='3' width='5.6' height='27' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; animation: tourne 6s linear infinite; } /* tourne sur lui-même, comme le « + » d'avant */
.curseur.clic i { animation: tourne .5s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
/* Grille des projets : « + » noir qui tourne lentement */
.sans-pointeur, .sans-pointeur * { cursor: none !important; } /* le « + » remplace le pointeur sur toutes les pages sauf l'accueil */
.sans-pointeur :is(header, .ecran > .barre:first-child), .sans-pointeur :is(header, .ecran > .barre:first-child) * { cursor: auto !important; } /* bandeau du haut : pointeur normal */
.sans-pointeur :is(header, .ecran > .barre:first-child) :is(a, button, select) { cursor: pointer !important; }
.curseur.plus-noir { z-index: 20; }
.curseur.plus-noir { filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); } /* liseré blanc net de 1 px autour du « + » */
.curseur.plus-noir i { background: none; animation: tourne 6s linear infinite; }
.curseur.plus-noir i::before, .curseur.plus-noir i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 42px; height: 4px; background: #111; transform: translate(-50%, -50%); }
.curseur.plus-noir i::after { transform: translate(-50%, -50%) rotate(90deg); }
/* Pages projet, sur une image : flèche vers l'image suivante, ou la précédente sur le quart gauche */
.curseur.fleche i { animation: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M20 10l18 18-18 18' fill='none' stroke='%23111' stroke-width='4'/%3E%3C/svg%3E") center / contain no-repeat; }
.curseur.fleche i::before, .curseur.fleche i::after { display: none; }
.curseur.fleche.gauche i { transform: scaleX(-1); }
/* fondu de sortie de l'accueil : un voile blanc monte par-dessus (fondre la page elle-même saccade la vidéo) */
body.depart::after { content: ""; position: fixed; inset: 0; z-index: 10; background: #fff; animation: voile .6s ease-in-out both; }
@keyframes voile { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .curseur i { animation: none; } }

footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 48px 8px 24px; color: #777; letter-spacing: .03em; }

@media (max-width: 800px) {
  /* Téléphone : le + passe à droite du logo, les rubriques se déplient en dessous */
  .plus { margin-left: auto; }
  .logo img { height: 40px; } /* logo et « + » sur la même ligne */
  .plus { margin-top: 0; margin-right: 16px; align-self: center; } /* un peu décalé vers la gauche */
  /* rubriques en colonne sous le « + », alignées sur lui, en plus petit ; chaque ligne reste assez haute pour le doigt */
  nav { order: 3; flex-basis: 100%; height: auto; margin-top: 0; flex-direction: column; align-items: flex-end; padding-right: 16px; font-size: 18px; max-width: none; max-height: 0; transition: max-height .4s ease; }
  .menu-ouvert nav { max-height: 240px; }
  nav a, nav a:first-child { margin: 0; padding: 10px 0; }
  .filtres { order: 4; margin: 16px 0 0; width: 100%; }
  .projet { grid-template-columns: 1fr; height: auto; }
  .projet .photo { height: 70vh; }
  .projet .plan { height: 50vh; padding: 24px; }
  .projet .titre { padding: 24px; }
  .legende { padding-bottom: 56px; }
}

/* ——— Cadran du menu (remplace le « + ») : à droite, il oscille comme une boussole ——— */
/* Bouton du menu : cadran (cercle + aiguille vers le nord) à la place du « + » */
.plus { width: 50px; height: 50px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='27.5' fill='none' stroke='%23111' stroke-width='3'/%3E%3Crect x='27.2' y='3' width='5.6' height='27' fill='%23111'/%3E%3C/svg%3E") center / contain no-repeat; transform-origin: 50% 50%;
  transition: transform .6s cubic-bezier(.6, 0, .2, 1); animation: boussole 4s ease-in-out infinite; }
.plus::before, .plus::after { display: none; }
/* à droite de la page, après les filtres (au lieu d'être collé au logo) */
.plus { order: 4; margin-left: 28px; align-self: center; margin-top: 0; }
/* centre du cadran sur le milieu des capitales du menu (menu calé en bas de la ligne du logo, 56 px) */
@media (min-width: 801px) { .plus { align-self: flex-start; font-size: clamp(22px, 2.4vw, 34px); margin-top: calc(31px - .38em); } }
/* pages sans filtres (Atelier, Contact) : on garde la place des filtres (28 + 200 px), pour que menu et cadran restent au même endroit sur toutes les pages */
@media (min-width: 801px) { header:not(:has(.filtres)) .plus { margin-right: 228px; } }
nav { order: 3; margin-left: auto; } /* le menu se déplie vers la gauche, depuis le cadran */
/* tout sur une seule ligne (bandeau pas plus haut) : logo … menu, cadran, puis filtres à droite */
.filtres { order: 5; margin-left: 28px; width: 240px; }
/* les deux listes de part et d'autre du centre du cadran : intitulé 17 px + 6 + liste 28 + moitié de l'écart 3 = 54 px jusqu'au milieu */
@media (min-width: 801px) { .filtres { align-self: flex-start; margin-top: calc(31px - .38 * clamp(22px, 2.4vw, 34px) + 25px - 54px); } }
@media (min-width: 801px) {  } /* menu ouvert : les filtres s'effacent, le bandeau garde sa hauteur */
@media (min-width: 801px) { nav { flex-shrink: 0; font-size: clamp(18px, 1.9vw, 32px); } .menu-ouvert nav { max-width: 640px; } .menu-ouvert nav a { margin-left: 24px; } .filtres { flex-shrink: 0; width: 200px; } }
@media (max-width: 800px) { nav { margin-left: 0; } }
/* boussole : l'aiguille oscille puis se stabilise, et recommence toutes les 4 s, pour attirer l'œil */
@keyframes boussole {
  0%, 70%, 100% { transform: rotate(0); }
  8% { transform: rotate(-35deg); }
  20% { transform: rotate(26deg); }
  32% { transform: rotate(-16deg); }
  44% { transform: rotate(9deg); }
  56% { transform: rotate(-4deg); }
}
.plus:hover { animation-duration: 1.5s; }
.menu-ouvert .plus { animation: none; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .plus { animation: none; } }
@media (max-width: 800px) { .plus { width: 38px; height: 38px; } }
@media (max-width: 800px) { .plus { order: 2; margin-left: auto; } } /* téléphone : cadran à droite du logo, rubriques dessous */

/* Changement de page : le bandeau du haut reste immobile, et la rubrique soulignée glisse vers sa nouvelle place */
header { view-transition-name: entete; }
::view-transition-group(entete) { animation: none; }
/* pas de fondu entre l'ancien et le nouveau bandeau : sinon deux aiguilles du cadran se superposent */
::view-transition-old(entete) { animation: none; opacity: 0; }
::view-transition-new(entete) { animation: none; opacity: 1; }
::view-transition-group(trait) { animation-duration: .5s; animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
/* menu rouvert d'office en arrivant depuis le menu : sans animation de dépliement */
.instant nav, .instant nav a, .instant .plus { transition: none !important; }
@media (max-width: 800px) { nav .trait { bottom: 6px; } } /* téléphone : rubriques plus hautes (zone de doigt), trait remonté sous le mot */
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* lu par Google et les lecteurs d'écran, invisible à l'écran */