/* ==========================================================================
   horizon a — feuille de style du site
   Charte : crème #FFFEE3 · rouille #AC562C · orange #ED5909
   Typo  : Neutraface Text Demi (titres, logo, menu) · Figtree (texte courant)
   Pas de framework, pas de mode sombre : le site garde toujours ses couleurs claires.
   ========================================================================== */

/* ---------- polices ---------- */
/* Les deux polices du site Wix (fichiers du client) : Neutraface 2 Text Demi pour les titres, Book pour le texte */
@font-face {
  font-family: "Neutraface 2 Text";
  src: url("../fonts/neutraface-2-text-book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neutraface 2 Text";
  src: url("../fonts/neutraface-2-text-demi.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neutraface Text";
  src: url("../fonts/neutraface-text-demi.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-normal-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-normal-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-italic-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-italic-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- variables ---------- */
:root {
  --cream: #fffee3;
  --rust: #ac562c;
  --orange: #ed5909;
  --ink: #31302c;
  --cream-rgb: 255 254 227;
  --rust-rgb: 172 86 44;
  --orange-rgb: 237 89 9;

  --font-display: "Neutraface 2 Text", "Neutraface Text", "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Neutraface 2 Text", "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --header-h: 4.25rem;
  --gutter: 1rem;
  --panel-max: 66rem;
  --panel-pad: clamp(1.4rem, 4.5vw, 4rem);
  --gap: 1.25rem;

  --veil-color: #fffee3;
  --veil-opacity: 0.8;
  --veil-progress: 1; /* home : passe de 0 à 1 en défilant */

  --fast: 0.22s;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light only;
}
@media (min-width: 640px) {
  :root {
    --header-h: 5.25rem;
    --gutter: 1.5rem;
    --gap: 1.5rem;
  }
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--rust);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-h);
  overflow-x: clip;
}
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.005em;
}
p {
  margin: 0;
}
p + p {
  margin-top: 0.85em;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--fast) var(--ease);
}
a:hover {
  color: var(--orange);
}
.panel--rust a:hover {
  color: var(--cream);
  text-decoration-color: var(--orange);
}
strong {
  font-weight: 600;
}
sup {
  font-size: 0.7em;
  line-height: 0;
}
::selection {
  background: var(--orange);
  color: var(--cream);
}
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.panel--rust :focus-visible {
  outline-color: var(--cream);
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
ul {
  margin: 0;
  padding-left: 1.25em;
}
[hidden] {
  display: none !important;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--rust);
  color: var(--cream);
  font-family: var(--font-display);
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}

/* ---------- fond : l'illustration voilée ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #c9a882; /* kraft, en attendant l'image */
  pointer-events: none;
}
.bg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg .veil {
  position: absolute;
  inset: 0;
  background: var(--veil-color);
  opacity: calc(var(--veil-opacity) * var(--veil-progress));
}
.bg--inner {
  top: var(--header-h);
}

/* ---------- en-tête ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--rust);
  padding-top: env(safe-area-inset-top, 0);
}
.site-header__bar {
  height: var(--header-h);
  max-width: var(--panel-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 0.3em 0;
}
.brand:hover {
  color: var(--orange);
}
@media (min-width: 640px) {
  .brand {
    font-size: 2.4rem;
  }
}
.nav {
  display: none;
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
}
.nav a,
.nav__more {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.98rem;
  color: var(--rust);
  text-decoration: none;
  padding: 0.6rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.nav a:hover,
.nav a[aria-current="page"],
.nav li.is-active > a {
  color: var(--orange);
}
.nav__item {
  position: relative;
}
.nav__more {
  padding: 0.6rem 0.2rem;
  line-height: 0;
}
.nav__more svg {
  width: 0.65rem;
  height: 0.65rem;
  transition: transform var(--fast) var(--ease);
}
.nav__item:hover .nav__more svg {
  transform: rotate(180deg);
}
.nav__sub {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: -1rem;
  min-width: 13rem;
  background: var(--cream);
  border: 1px solid var(--rust);
  padding: 0.5rem 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast);
}
.nav__sub li {
  display: block;
}
.nav__sub a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.burger {
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  display: grid;
  place-items: center;
  color: var(--rust);
}
.burger span {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: transform var(--fast) var(--ease), background var(--fast);
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--fast) var(--ease);
}
.burger span::before {
  top: -7px;
}
.burger span::after {
  top: 7px;
}
.menu-open .burger span {
  background: transparent;
}
.menu-open .burger span::before {
  transform: translateY(7px) rotate(45deg);
}
.menu-open .burger span::after {
  transform: translateY(-7px) rotate(-45deg);
}
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  background: var(--cream);
  padding: 1.5rem var(--gutter) 3rem;
  overflow-y: auto;
  display: none;
}
.menu-open .mobile-nav {
  display: block;
}
.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-nav a {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.5rem;
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--rust-rgb) / 0.25);
}
.mobile-nav a[aria-current="page"],
.mobile-nav li.is-active > a {
  color: var(--orange);
}
.mobile-nav ul ul {
  margin: 0 0 0.5rem 1.25rem;
}
.mobile-nav ul ul a {
  font-size: 1.1rem;
  padding: 0.55rem 0;
  border: 0;
}
.mobile-nav__tagline {
  margin-top: 2rem;
  font-style: italic;
  opacity: 0.8;
}
@media (min-width: 900px) {
  .nav {
    display: block;
  }
  .burger,
  .mobile-nav {
    display: none !important;
  }
}

/* ---------- blocs (la signature du site) ---------- */
main {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap) 0 3rem;
}
.panel {
  width: min(100% - 2 * var(--gutter), var(--panel-max));
  margin-inline: auto;
  padding: var(--panel-pad);
  position: relative;
}
.panel--rust {
  background: var(--rust);
  color: var(--cream);
}
.panel--cream {
  background: var(--cream);
  color: var(--rust);
}
.frame {
  border: 1.5px solid currentColor;
  padding: clamp(1.1rem, 3vw, 1.9rem);
}
.panel--cream h2 {
  color: var(--orange);
}
.subtitle {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

/* ---------- boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1.2;
  border: 1.5px solid transparent;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast);
  cursor: pointer;
}
.panel--rust .btn {
  background: var(--cream);
  color: var(--rust);
}
.btn:hover {
  background: var(--orange);
  color: var(--cream);
}
.btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---------- dessins au trait (masques recolorés) ---------- */
.drawing {
  display: block;
  background: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}

/* ---------- accueil : splash ---------- */
.splash {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  margin-top: calc(-1 * var(--gap));
  display: flex;
  align-items: flex-end;
  padding: 1.5rem var(--gutter) clamp(1.5rem, 5vh, 3.5rem);
}

/* ---------- les 3 axes (blocs) ---------- */

/* ---------- cadres qui se chevauchent (page Projets) ---------- */

/* ---------- cartes de projets ---------- */

/* ---------- fiche projet ---------- */

/* ---------- équipe ---------- */

/* ---------- association ---------- */

/* ---------- prestations ---------- */

/* ---------- formulaire de contact ---------- */
.contact-head {
  display: grid;
  gap: 1rem;
  align-items: end;
}
@media (min-width: 720px) {
  .contact-head {
    grid-template-columns: 1fr auto;
  }
}
.form {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 720px) {
  .form {
    grid-template-columns: 1fr 1.7fr;
    gap: 1.25rem;
  }
  .form__full {
    grid-column: 1 / -1;
  }
}
.form__col {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.field {
  display: block;
}
.field span {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  opacity: 0.9;
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--rust);
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 0.35rem;
  padding: 0.75rem 0.9rem;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgb(var(--rust-rgb) / 0.7);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
}
.field textarea {
  min-height: 14rem;
  height: 100%;
  resize: vertical;
}
.field--full {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.field--full textarea {
  flex: 1;
}
.field__error {
  font-size: 0.88rem;
  margin-top: 0.35rem;
  color: #ffd28f;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__status {
  font-size: 0.95rem;
}
.notice {
  border: 1.5px solid currentColor;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}
.notice h2 {
  font-size: 1.5rem;
}
.impressum ul {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}
.impressum li + li {
  margin-top: 0.25rem;
}

/* ---------- pied de page ---------- */
.site-footer {
  width: min(100% - 2 * var(--gutter), var(--panel-max));
  margin: 0 auto 2rem;
  background: var(--cream);
  color: var(--rust);
  padding: 1.25rem var(--panel-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}
.site-footer .brand {
  font-size: 1.3rem;
  margin-right: 0.5rem;
}

/* ---------- apparitions rapides au défilement ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.js .reveal.is-in,
.js .reveal.no-anim {
  opacity: 1;
  transform: none;
}

/* ---------- accessibilité : moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- impression ---------- */
@media print {
  .site-header,
.bg,
.skip,
.splash,
.site-footer nav,
.btn {
    display: none !important;
  }
  body {
    padding-top: 0;
    color: #000;
  }
  .panel {
    color: #000 !important;
    background: none !important;
    border: 1px solid #999;
    break-inside: avoid;
  }
}

/* ==========================================================================
   Ajouts (deuxième passe de retours)
   ========================================================================== */

/* sous-menu Projets : les rubriques l'une sous l'autre */
.nav ul.nav__sub {
  display: block;
}

/* le logo : le « a » s'envole doucement au survol */
.brand__a {
  display: inline-block;
  /* pivot on the visual centre of the lowercase a (x-height), not on the box */
  transform-origin: 50% 63%;
  line-height: 1;
}

/* cadres de la page Projets : chacun flotte dans le vent, avec sa propre parallaxe (site.js) */

/* dessins animés (vidéo teintée par WebGL, voir anim-drawings.js) */
.drawing {
  position: relative;
}

/* accueil « illustration seule » : pas de contenu sous le splash */
.home--splash main {
  padding-bottom: 0;
  gap: 0;
}
.home--splash .site-footer {
  margin-top: 0;
}

/* ==========================================================================
   Troisième passe de retours
   ========================================================================== */

/* accueil « illustration seule » : rien sous le splash, pas de défilement */
.home--splash {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}
.home--splash main {
  padding: 0;
  gap: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
}
.home--splash .splash {
  min-height: 0;
  height: 100%;
}
.home--splash .site-footer {
  display: none;
}

/* le « a » du logo tourne lentement, sans fin */
@keyframes turn {
  to {
    rotate: 360deg;
  }
}
.js .brand__a {
  animation: turn 14s linear infinite;
}

/* splash : les textes montent l'un après l'autre au chargement */

/* insectes : petite vie en stop motion (4 poses par seconde) tant qu'ils n'ont pas de vidéo */

@media (prefers-reduced-motion: reduce) {
  .js .brand__a {
    animation: none;
  }
}

/* ---------- quatrième passe : cadres de même taille, air sous les introductions ---------- */

/* accueil : un clic n'importe où sur l'illustration passe au titre suivant (site.js) */
.js .page-home .splash {
  cursor: pointer;
}

/* ---------- pied de page : lien vers l'atelier, identique aux autres liens (caché à l'impression) ---------- */

/* ---------- pages projet : de l'air entre le texte et les photos ---------- */

/* ---------- accueil : petites lettres pour comparer les styles du splash (provisoire) ---------- */
@media print {
  .site-footer__login {
    display: none;
  }
}

/* ---------- lecteur de musique minimaliste, en bas à gauche de toutes les pages ---------- */

/* ---------- accueil G : illustration seule ---------- */

/* ---------- fond : pendant le chargement de l'animation, la photo plate est un flou de couleur ---------- */

/* ---------- écran de chargement : le « a » du logo tourne sur le crème jusqu'à ce que tout soit prêt ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--cream);
  display: grid;
  place-items: center;
  /* without JavaScript the screen still goes away */
  animation: loader-fade 0.5s ease 8s forwards;
}
.loader__a {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--orange);
  font-size: clamp(7rem, 34vmin, 18rem);
  line-height: 1;
  display: inline-block;
  transform-origin: 50% 63%;
  opacity: 0; /* shown once the real font is there: no flash of another "a" */
  transition: opacity 0.25s;
  /* one full turn per cycle, slow in, fast through, slow out — a keyframed feel, never linear */
  animation: loader-turn 1.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
.loader.has-font .loader__a {
  opacity: 1;
}
.loader.is-done {
  animation: loader-fade 0.45s ease forwards;
  pointer-events: none;
}
.loader.is-done .loader__a {
  animation-play-state: paused;
}
@keyframes loader-turn {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}
@keyframes loader-fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .loader__a {
    animation: none;
  }
  .loader {
    animation-delay: 1s;
  }
}

/* ---------- aperçu de l'atelier : projets non publiés (jamais dans le site publié) ---------- */

/* menu de Silène (style d'accueil I) : « Projets » ouvre le sous-menu sans être un lien */
.nav__more--label {
  line-height: inherit;
  padding: 0.6rem 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__item--sub .nav__sub a {
  white-space: nowrap;
}
.mobile-nav__label {
  display: block;
  padding: 0.75rem 0 0.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.5rem;
  color: var(--rust);
}

/* page Contact de Silène (/contact-i/) : deux phrases d'accroche, quatre adresses côte à côte */
.contact-head--silene {
  display: block;
}
.contact-intro {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.4;
}
.contact-intro p {
  margin: 0 0 0.4rem;
}
.addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2.5rem;
  line-height: 1.5;
}
.addresses p {
  margin: 0;
}
.addresses strong {
  font-family: var(--font-display);
  font-weight: 600;
}

/* adresse e-mail anti-robots : écrite à l'envers dans la page, remise à l'endroit à l'écran, non sélectionnable */
.email-protege {
  unicode-bidi: bidi-override;
  direction: rtl;
  display: inline-block;
  user-select: none;
  -webkit-user-select: none;
}
.contact-head--silene .contact-intro {
  margin-top: 0;
}
.email-protege {
  cursor: pointer;
  transition: opacity var(--fast) var(--ease);
}
.email-protege:hover,
.email-protege:focus-visible {
  opacity: 0.7;
}
@keyframes questions-fade {
  from {
    opacity: 0;
  }
}

/* pages Projets de Silène (/apercu/recherche-i/ …) : comme l'ancien site, l'illustration très pâle derrière,
   les projets en photos carrées, le titre apparaît au survol */
body.page-blanc {
  --veil-color: #fbfbf8;
  --veil-opacity: 0.93;
}
body.page-blanc .bg img {
  filter: grayscale(0.7);
}
.tiles-page {
  /* un cadre invisible de la taille du grand cadre brun (.panel) : les photos s'alignent sur ses bords,
     et la 1re rangée commence à la hauteur des carrés du haut de la page Présentation */
  min-height: calc(100vh - var(--header-h) - 12rem);
  min-height: calc(100svh - var(--header-h) - 12rem);
  padding-block: 1rem;
}
.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
}
@media (min-width: 720px) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  text-decoration: none;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile__title {
  position: absolute;
  inset: 0;
  padding: 0.6rem 0.75rem;
  background: rgb(var(--cream-rgb) / 0.55);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.tile:hover .tile__title,
.tile:focus-visible .tile__title {
  opacity: 1;
}
@media (hover: none) {
  /* téléphone : pas de survol, le titre reste visible en bas de la photo */
  .tile__title {
    opacity: 1;
    inset: auto 0 0 0;
    background: rgb(var(--cream-rgb) / 0.85);
    font-size: 0.85rem;
  }
}

/* style I (Silène) : le « a » du logo ne tourne pas ; « Un collectif pour l'environnement » en orange sous
   le logo (en-tête plus haut), le menu centré verticalement à côté (modèle de Silène, 28.09.2026) */
body.style-i {
  --header-h: 5.25rem;
}
@media (min-width: 640px) {
  body.style-i {
    --header-h: 6.5rem;
  }
}
.style-i .brand__a,
.js .style-i .brand__a {
  animation: none;
}
.brand--tagline {
  padding: 0;
}
.brand__tagline {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--orange);
}
@media (min-width: 640px) {
  .brand__tagline {
    font-size: 1.2rem;
  }
}
/* le logo et le menu alignés sur les bords du grand cadre brun */
.style-i .site-header__bar {
  max-width: calc(var(--panel-max) + 2 * var(--gutter));
}
/* page Contact de Silène : les liens de l'Impressum ne sont pas soulignés */
.style-i .impressum a {
  text-decoration: none;
}

/* style I : pas de pied de page (l'encadré crème « horizon a · Contact · Nous soutenir… »), sur toutes les pages,
   y compris celles de Léo vues « en mode I » */
.style-i .site-footer {
  display: none;
}

/* LinkedIn (page Contact de Silène) : un petit logo en haut à droite du cadre brun */
.contact-linkedin {
  position: absolute;
  top: calc(var(--panel-pad) * 0.6);
  right: calc(var(--panel-pad) * 0.6);
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: opacity var(--fast) var(--ease);
}
.contact-linkedin svg {
  width: 1.5rem;
  height: 1.5rem;
}
.contact-linkedin:hover {
  opacity: 0.75;
}

/* ==========================================================================
   VERSION J (proposition de Claude, 28.09.2026, d'après Camille Ory et le PV de Silène)
   « tout en rond » : des disques crème cerclés d'encre comme les cercles du dessin ; « bloc de trois » partout
   ========================================================================== */
/* --- accueil : un grand disque « horizon a » au centre, trois disques en triangle, qui flottent doucement --- */

/* téléphone : les disques les uns sous les autres, la page défile */
@media (max-width: 719px) {
  body.style-j.home--splash {
    overflow: auto;
    height: auto;
  }
  body.style-j.home--splash main {
    height: auto;
  }
}

/* --- pages intérieures --- */
.style-j .panel--j {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.puces-j {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.45;
}
.puces-j li + li {
  margin-top: 0.4rem;
}
.lien-j {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--rust);
  text-decoration: none;
}
.lien-j:hover {
  color: var(--orange);
}
.btn-j {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--rust);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--fast) var(--ease);
}
.btn-j:hover {
  transform: translateX(4px);
}
.btn-j--rust {
  background: var(--rust);
  color: var(--cream);
}
.panel--appel-j {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.appel-j {
  margin: 0;
  max-width: 34rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.3;
}
.panel--appel-j .btn-j {
  margin-top: 0;
}
.cv-j {
  display: none; /* retiré et pas transparent (Safari) */
  grid-area: 1 / 1;
  max-height: 100%;
  overflow: auto;
}
.cv-j.is-on {
  display: block;
  animation: questions-fade var(--fast) var(--ease);
}
.cv-j h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--orange);
}
.cv-j__role {
  margin: 0.2rem 0 0.5rem;
  color: var(--rust);
  font-size: 0.95rem;
}
.cv-j ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.8rem, 1.1vw, 0.92rem);
  line-height: 1.35;
  color: var(--ink);
}
.cv-j li + li {
  margin-top: 0.25rem;
}
.cv-j--defaut {
  color: var(--rust);
  font-family: var(--font-display);
  font-weight: 600;
}

/* version I : pages de projet, comme sur l'ancien site (Wix) — sur le fond d'illustration pâle, une colonne :
   titre, deux colonnes de rubriques, une grande photo, le texte, les autres photos deux par deux */
.projet-i {
  /* mesures relevées sur l'ancien site (Wix) : colonne ~ 980 px sur un écran de 1440 px */
  width: min(100% - 2 * var(--gutter), 61rem);
  margin: clamp(1.5rem, 4vw, 3rem) auto 4rem;
  color: #b8602f;
}
.projet-i h1 {
  margin: 0 0 2.5rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.3vw, 2.05rem);
  color: var(--rust);
}
.fiche-i {
  display: grid;
  gap: 0 3.5rem;
}
@media (min-width: 720px) {
  .fiche-i {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}
.fiche-i__champ {
  margin-bottom: 1.9rem;
}
.fiche-i__champ h2 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  color: var(--rust);
  -webkit-text-stroke: 0.25px currentColor; /* un poil plus appuyé que le texte, comme sur l'ancien site */
}
.fiche-i__champ p {
  margin: 0.15rem 0 0;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.45;
}
.projet-i__grande {
  margin: 2.5rem 0 2rem;
}
/* photos exactly like the old Wix site: large one 979×736, row photos with their own Wix proportions */
.projet-i__grande img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 979 / 736;
  object-fit: cover;
}
.projet-i figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.projet-i figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.projet-i figcaption { /* written on the photo, bottom left, as on Wix */
  position: absolute;
  left: 0.7rem;
  bottom: 0.55rem;
  font-size: 0.72rem;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}
.projet-i__texte {
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.55;
}
.projet-i__texte a {
  color: inherit;
}
.projet-i__photos {
  display: grid;
  gap: 1.6rem; /* columns set per project in the page, from the Wix widths */
  margin-top: 2.5rem;
  align-items: start;
}

/* ==========================================================================
   VERSIONS K ET L (Silène, 30.09.2026) — K = copie de I, L = copie de J, avec ses retouches
   ========================================================================== */
/* --- accueil K et L : le dessin original, les noms des domaines seulement au survol de leur cercle --- */
body.style-l.home--splash .bg {
  display: none;
}
/* le dessin en entier, sur toute la largeur : la page défile jusqu'en bas (Silène, 01.10.2026) ; sur un écran en
   hauteur (téléphone), il remplit au moins l'écran */
body.style-l.home--splash {
  overflow: auto;
  height: auto;
}
body.style-l.home--splash main {
  height: auto;
}
/* K : comme sur l'ancien site (Wix) — le dessin remplit tout l'écran, centré, sans défiler ; rien ne bouge */
.scene-k.scene-k--fixe {
  position: fixed;
  inset: 0;
  height: auto;
  z-index: 0;
}
.home--splash .splash--k {
  position: relative;
  height: auto;
  padding: 0;
}
.scene-k {
  position: relative;
  flex: none;
  width: 100%;
  height: max(71.4vw, calc(100vh - var(--header-h)));
  height: max(71.4vw, calc(100svh - var(--header-h))); /* 71,4vw = la hauteur du dessin (1920 × 1371) en pleine largeur */
  overflow: hidden;
  background: #a58f76;
}
.scene-k__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.scene-k__svg image {
  pointer-events: none;
}

.scene-k__disque {
  /* le cercle se remplit de crème, en fondu (accueil-k.js règle display et opacity image par image) */
  display: none;
  fill: var(--cream);
  fill-opacity: 0.93;
  pointer-events: none;
}
.scene-k__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene-k__label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: calc(var(--d, 300px) * 0.8);
  margin: 0;
  display: none;
  text-align: center;
  color: var(--ink);
}
.scene-k__nom {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.45vw, 1.45rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.scene-k__phrase {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(0.85rem, 1.15vw, 1.15rem);
  line-height: 1.3;
}

/* --- K et L, tous les onglets : le dessin original sous un voile gris chaud, mesuré sur la capture de Silène
   (le même rendu que l'ancien site) ; les pages de projet gardent leur fond pâle --- */
body.style-l:not(.page-blanc) {
  --veil-color: #929183;
  --veil-opacity: 0.6;
}

/* --- K, Présentation et Prestations : des carrés plus petits, dans un cadre brun de la même taille sur tous les
   ordinateurs (il ne dépend plus de la hauteur de l'écran), les carrés centrés dedans --- */

/* --- K et L, Équipe : les bêtes en grand, en rangée, chacune avec le nom de sa personne ; celle sous la souris
   devient orange et sa personne s'affiche (site.js, [data-cercle-equipe]) --- */

/* ==========================================================================
   VERSION L — règles communes (Silène, 01.10.2026 : uniformiser les couleurs et les tailles)
   - les cadres alternent : brun, crème, brun…
   - un titre = .titre-l : majuscules, orange sur crème, crème sur brun, toujours la même taille
   - un texte = .texte-l : italique, la couleur du cadre (brun sur crème, crème sur brun), toujours la même taille
   - les listes et les petits textes : droits, même couleur que le texte du cadre
   ========================================================================== */
.titre-l {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}
.panel--rust .titre-l {
  color: var(--cream);
}
.style-l .puces-j,
.style-l .lien-j {
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
}
/* la phrase d'appel, en bas de page : droite, dans la police des titres (pas en italique) */
.style-l .appel-j {
  max-width: 36rem;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
}
/* Prestations : les trois domaines l'un sous l'autre (place pour de plus longues listes) */
.domaine-l {
  display: grid;
  gap: 0.75rem 2.5rem;
  padding-block: 1.6rem;
}
.domaine-l + .domaine-l {
  border-top: 1.5px solid rgb(var(--rust-rgb) / 0.3);
}
@media (min-width: 720px) {
  .domaine-l {
    grid-template-columns: 17rem minmax(0, 1fr) auto;
    align-items: center;
  }
}
.domaine-l .titre-l {
  margin: 0;
}
.domaine-l__puces {
  margin: 0;
  columns: 2 16rem;
  column-gap: 2.5rem;
}
.domaine-l__puces li {
  break-inside: avoid;
}
.domaine-l__lien {
  white-space: nowrap;
}
/* la personne affichée (K et L) : son nom comme un titre, le reste de la couleur du cadre */
.style-l .cv-j h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
}
.style-l .cv-j ul {
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.4;
}
.style-l .cv-j ul,
.style-l .cv-j__role,
.style-l .cv-j--defaut {
  color: var(--rust);
}
.style-l .cv-j--defaut {
  font-family: var(--font-body);
  font-weight: 400;
}
/* K, L (et M) : le parcours de la personne en liste à puces */
.style-l .cv-j ul {
  padding-left: 1.2rem;
  list-style: disc;
  text-align: left;
}

/* versions de Silène (I, J, K, L) : pas de « Un collectif pour l'environnement » dans le menu des petits écrans
   (il est déjà sous le logo) */
.style-i .mobile-nav__tagline {
  display: none;
}

/* ==========================================================================
   VERSION M (Silène, 01.10.2026) — la J, avec une autre page Équipe : comme sur l'ancien site, la photo de l'équipe
   au milieu du cadre brun, les bêtes tout autour ; au survol d'une bête, la photo pâlit et le parcours de la
   personne s'écrit dessus, les autres bêtes s'estompent
   ========================================================================== */
.scene-m {
  position: relative;
  width: min(100%, 52rem);
  margin: 0 auto;
  padding: 13% 20% 19%;
}
.scene-m__photo {
  position: relative;
  margin: 0;
}
.scene-m__photo img {
  display: block;
  width: 100%;
  height: auto;
}
.scene-m__cvs .cv-j {
  position: absolute;
  inset: 0;
  max-height: none;
  padding: clamp(0.8rem, 2.5vw, 1.6rem);
  overflow: auto;
  background: rgb(var(--cream-rgb) / 0.86);
  color: var(--ink);
  text-align: left;
}
.scene-m__cvs .cv-j--defaut {
  display: none !important; /* rien de survolé : la photo seule */
}
.scene-m__cvs .cv-j h2 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  color: var(--ink);
}
.scene-m__cvs .cv-j ul {
  margin: 0;
  padding-left: 1.3rem;
  list-style: disc;
  font-size: clamp(0.82rem, 1.4vw, 1.05rem);
  line-height: 1.35;
  color: var(--ink);
}
.insecte-m {
  position: absolute;
  z-index: 1;
  width: 21%;
  aspect-ratio: 1;
  padding: 0;
  background: none;
  border: 0;
  color: var(--rust); /* sur le cadre crème */
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.insecte-m .drawing {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important; /* chaque dessin tient dans son carré */
}
.scene-m.a-survol .insecte-m {
  opacity: 0.3;
}
.scene-m.a-survol .insecte-m.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}

/* ==========================================================================
   VERSION N (Silène, 07.10.2026) — l'accueil de la K en plus grand, les pages de la L sans cadre brun d'en-tête,
   l'équipe de la M dans un cadre brun sur fond blanc
   ========================================================================== */
/* accueil : le dessin plein écran, sans défiler (comme la K) */
body.style-n.home--splash {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}
body.style-n.home--splash main {
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
}
body.style-n.home--splash .bg {
  display: none;
}
/* tout l'en-tête un peu plus grand : le nom, la phrase dessous, les onglets ; et les noms des domaines sur l'accueil */
.style-n .brand {
  font-size: 2.1rem;
}
@media (min-width: 640px) {
  .style-n .brand {
    font-size: 2.8rem;
  }
}
.style-n .brand__tagline {
  font-size: 1.05rem;
}
@media (min-width: 640px) {
  body.style-n {
    --header-h: 7.75rem;
  }
  .style-n .brand__tagline {
    font-size: 1.35rem;
  }
}
.style-n .nav a,
.style-n .nav__more {
  font-size: 1.12rem;
}
.style-n .scene-k__nom {
  font-size: clamp(1.1rem, 1.75vw, 1.75rem);
}
.style-n .scene-k__phrase {
  font-size: clamp(0.98rem, 1.35vw, 1.35rem);
}
.scene-m__cvs .cv-j__role {
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-size: clamp(0.85rem, 1.45vw, 1.1rem);
}

/* ==========================================================================
   VERSION O (07.10.2026) — la synthèse des retours des collègues (voir templates.js)
   ========================================================================== */
/* un grand titre clair, en tête de Prestations et de chaque catégorie de Projets */
.grand-titre-o {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  color: var(--rust);
}
/* Prestations sur cadre brun : les traits et les liens en crème */
.panel--rust .domaine-l + .domaine-l {
  border-top-color: rgb(var(--cream-rgb) / 0.4);
}
.panel--rust .lien-j {
  color: var(--cream);
}
.panel--rust .lien-j:hover {
  color: var(--cream);
  text-decoration: underline;
}

.tile--texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: clamp(0.8rem, 1.8vw, 1.4rem);
  border: 1.5px solid currentColor;
  color: inherit;
  font-size: clamp(0.85rem, 1.15vw, 1.02rem);
  line-height: 1.4;
}
.tile--texte strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08em;
  line-height: 1.25;
}
.tile--texte em {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92em;
}

/* N (07.10.2026, suite) */
/* le dessin de fond des onglets au même endroit que sur l'accueil plein écran (il commence tout en haut de
   l'écran, sous l'en-tête, et non plus sous lui) : K, N et O */
.style-n .bg--inner {
  top: 0;
}
/* Prestations : la question en grand, en crème sur le cadre brun */
.panel--rust .grand-titre-o {
  color: var(--cream);
}
/* Projets : le carré de texte d'un projet phare, sur le fond blanc */
.page-blanc .tile--texte {
  color: var(--rust);
}
/* Projets : un projet encore en cours n'a pas de photo — un carré de texte, sur lequel on ne clique pas */
.tile--encours {
  cursor: default;
}
.tile--encours em {
  opacity: 0.75;
}
/* N : sur ces mêmes pages, le dessin revient, très pâle, comme sur l'ancien site (capture de Silène du
   07.10.2026 : un voile presque blanc, légèrement chaud, les couleurs encore à peine visibles) ; il est posé
   exactement comme sur l'accueil (voir .style-n .bg--inner) */
body.style-n:not(.style-o).page-blanc {
  /* mesuré sur la capture de Silène (21.webp) : un voile blanc pur à 97 %, le dessin en gris, à peine visible */
  --veil-color: #ffffff;
  --veil-opacity: 0.97;
}
body.style-n:not(.style-o).page-blanc .bg img {
  filter: grayscale(1);
}

/* N, Présentation : la mise en page de Prestations — un titre à gauche, son texte à droite */
@media (min-width: 720px) {
  .domaine-l--texte {
    grid-template-columns: 17rem minmax(0, 1fr);
    align-items: start;
  }
}
.domaine-l__texte {
  margin: 0;
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.domaine-l__texte em {
  font-style: normal;
}
/* N, Équipe « sans cadre » : le texte et les bêtes en brun sur le dessin très pâle ; les bêtes sont pleines et
   celle que l'on survole devient orange */
.panel--nue {
  background: none;
  color: var(--rust);
}
.panel--nue .scene-m .insecte-m,
.panel--nue .scene-m.a-survol .insecte-m {
  opacity: 1;
  color: var(--rust);
}
.panel--nue .scene-m .insecte-m.is-on {
  color: var(--orange);
}

/* la phrase d'invitation, au-dessus de la photo */
.scene-m__invite {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%; /* au-dessus de la scène, donc au-dessus des bêtes du haut */
  margin: 0;
  padding: 0 4% 0.3rem;
  text-align: center;
  line-height: 1.25;
  color: var(--cream);
  font-size: clamp(0.8rem, 1.3vw, 1.15rem);
}

/* N (08.10.2026) — les mêmes écritures sur tous les onglets (demande de Silène). Trois tailles seulement, en plus
   du grand titre : les titres (majuscules, gras), les phrases d'accroche (gras) et le texte courant. Plus
   d'italique, plus d'orange vif : tout est brun, crème ou noir. */
body.style-n:not(.style-o) {
  --n-titre: clamp(1.05rem, 1.45vw, 1.25rem);
  --n-accroche: clamp(1.2rem, 1.6vw, 1.4rem);
  --n-texte: clamp(1rem, 1.25vw, 1.1rem);
}
body.style-n:not(.style-o) .titre-l,
body.style-n:not(.style-o) .scene-m__cvs .cv-j h2,
body.style-n:not(.style-o) .notice h2,
body.style-n:not(.style-o) .frame .subtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--n-titre);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}
body.style-n:not(.style-o) .frame .subtitle {
  color: var(--rust);
}
body.style-n:not(.style-o) .appel-j {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--n-accroche);
  line-height: 1.3;
}
body.style-n:not(.style-o) .domaine-l__texte,
body.style-n:not(.style-o) .puces-j li,
body.style-n:not(.style-o) .lien-j,
body.style-n:not(.style-o) .scene-m__cvs .cv-j li,
body.style-n:not(.style-o) .scene-m__cvs .cv-j__role,
body.style-n:not(.style-o) .notice p,
body.style-n:not(.style-o) .addresses p,
body.style-n:not(.style-o) .frame li,
body.style-n:not(.style-o) .btn-j,
body.style-n:not(.style-o) .btn,
body.style-n:not(.style-o) .tile__title {
  font-size: var(--n-texte);
  letter-spacing: 0;
}
body.style-n:not(.style-o) .field span {
  font-size: var(--n-texte);
}
body.style-n:not(.style-o) main em {
  font-style: normal;
}
/* Contact et phrase « Survolez un insecte… » (Silène, 08.10.2026) : écrites comme la phrase d'appel du bas des
   pages (« Recherche, aménagements, sensibilisation : découvrez… »), mais en crème sur le brun */
body.style-n:not(.style-o) .contact-intro,
body.style-n:not(.style-o) .contact-intro p,
body.style-n:not(.style-o) .contact-intro .email-protege,
body.style-n:not(.style-o) .scene-m__invite {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--n-accroche);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--cream);
}
/* Présentation : chaque titre (« Qui sommes-nous ? »…) au milieu de sa rangée, en hauteur, comme dans Prestations */
body.style-n:not(.style-o) .domaine-l--texte {
  align-items: center;
}
@media (max-width: 640px) {
  body.style-n:not(.style-o) .contact-intro {
    padding-right: 2.4rem; /* la place du logo LinkedIn */
  }
}
/* Contact : le nom de chaque case n'est écrit qu'une fois, dans la case beige (il reste lu par les lecteurs d'écran) */
body.style-n:not(.style-o) .form .field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body.style-n:not(.style-o) .form .field {
  position: relative;
}
body.style-n:not(.style-o) .field input,
body.style-n:not(.style-o) .field textarea {
  font-size: var(--n-texte);
}
/* Projets : les carrés de texte — même texte courant (plus petit seulement sur téléphone, pour tenir dans le carré) */
body.style-n:not(.style-o) .tile--texte {
  font-size: clamp(0.85rem, 1.25vw, 1.1rem);
}
body.style-n:not(.style-o) .tile--texte strong,
body.style-n:not(.style-o) .tile--texte em {
  font-size: 1em;
}
/* sur téléphone, un carré de texte serait trop petit pour son texte : il prend toute la largeur et la hauteur
   qu'il lui faut */
@media (max-width: 640px) {
  body.style-n:not(.style-o) .tiles:not(.tiles--ronds) {
    grid-auto-flow: dense; /* les photos se rangent deux par deux, sans trou */
  }
  body.style-n:not(.style-o) .tiles:not(.tiles--ronds) li.li-texte {
    grid-column: 1 / -1;
  }
  body.style-n:not(.style-o) .tiles:not(.tiles--ronds) .tile--texte {
    aspect-ratio: auto;
    height: auto;
    padding: 1rem;
    font-size: var(--n-texte);
  }
}
/* Projets, pour comparer (Silène, 08.10.2026) : dans « Recherche & innovation » les cadres et l'écriture en noir ;
   dans « Conception & aménagements » du même brun que les grands cadres */
/* 08.10.2026 : Silène a choisi le brun (celui de « Conception & aménagements ») pour tous les projets ; le titre
   qui apparaît sur une photo est en gras */
body.style-n:not(.style-o) .tile--texte,
body.style-n:not(.style-o) .tile__title {
  color: var(--rust);
}
body.style-n:not(.style-o) .tile__title {
  font-family: var(--font-display);
  font-weight: 600;
}
/* Équipe (la variante « sans cadre », la seule gardée) : la phrase en brun au-dessus des bêtes ; le parcours de la
   personne s'écrit en crème sur un voile brun (et non plus crème) posé sur la photo */
/* dix bêtes AUTOUR de la photo, jamais dessus : trois au-dessus, trois au-dessous, deux de chaque côté (AUTOUR_N10
   dans templates.js) ; la photo fait 56 % de la largeur, les bêtes 15 % */
body.style-n:not(.style-o) .panel--nue .scene-m {
  width: 100%;
  margin-top: 2.6rem; /* la place de la phrase */
  padding: 16% 22%;
}
body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m {
  width: 15%; /* le plus grand possible sans toucher la photo */
}
body.style-n:not(.style-o) .panel--nue .scene-m__invite {
  color: var(--rust);
}
body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j {
  background: rgb(172 86 44 / 0.88);
}
body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j,
body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j h2,
body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j ul,
body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j__role {
  color: var(--cream);
}
@media (max-width: 640px) {
  body.style-n:not(.style-o) .panel--nue .scene-m {
    margin-top: 0;
    padding: 0;
  }
  /* téléphone : la première moitié des bêtes au-dessus de la photo, les autres au-dessous (classe haut-tel) */
  body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m {
    order: 3;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m.haut-tel {
    order: 1;
  }
}

/* ==========================================================================
   N SUR TÉLÉPHONE (Silène, 08.10.2026) — mêmes pages, mêmes adresses : seule la mise en page change quand
   l'écran est étroit (640 px et moins). Sur un téléphone on ne survole rien : tout se touche.
   ========================================================================== */
.scene-m__invite .doigt {
  display: none;
}
@media (hover: none) {
  .scene-m__invite .souris {
    display: none;
  }
  .scene-m__invite .doigt {
    display: inline;
  }
}
@media (max-width: 640px) {
  /* Accueil : rien de particulier — le dessin remplit l'écran comme sur l'ordinateur ; on touche un cercle du
     dessin pour voir son nom, on le touche encore pour ouvrir la page (Silène ne veut pas de ronds crème affichés
     en permanence) */
  /* Textes : alignés à gauche (justifiés, ils laissent de grands trous sur un écran étroit) */
  body.style-n:not(.style-o) .domaine-l__texte {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
  /* Équipe, comme sur l'ordinateur (Silène, 08.10.2026) : les bêtes autour de la photo — quatre au-dessus, trois
     au-dessous, faute de place sur les côtés — et le parcours de la personne s'écrit SUR la photo. La photo prend
     toute la largeur ; si le parcours est plus long qu'elle, elle s'allonge juste ce qu'il faut. */
  body.style-n:not(.style-o) .scene-m {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    padding: 0;
  }
  body.style-n:not(.style-o) .scene-m__invite {
    display: block;
    position: static;
    order: 0;
    width: 100%;
    padding: 0 0 0.5rem;
  }
  body.style-n:not(.style-o) .scene-m .insecte-m {
    position: static;
    order: 3;
    width: 24%;
    transform: none;
  }
  body.style-n:not(.style-o) .scene-m .insecte-m:nth-of-type(-n + 4) {
    order: 1;
  }
  body.style-n:not(.style-o) .scene-m__photo {
    order: 2;
    display: grid;
    width: 100%;
    margin: 0.5rem 0;
  }
  body.style-n:not(.style-o) .scene-m__cvs {
    grid-area: 1 / 1;
    min-width: 0;
  }
  body.style-n:not(.style-o) .scene-m__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.style-n:not(.style-o) .scene-m__cvs {
    display: grid;
  }
  body.style-n:not(.style-o) .scene-m__cvs .cv-j {
    position: static;
    grid-area: 1 / 1;
    padding: 0.9rem 1rem;
    overflow: visible;
  }
  body.style-n:not(.style-o) .scene-m__cvs .cv-j h2 {
    font-size: 1rem;
  }
  body.style-n:not(.style-o) .scene-m__cvs .cv-j li,
  body.style-n:not(.style-o) .scene-m__cvs .cv-j__role {
    font-size: 0.9rem;
    line-height: 1.3;
  }
  body.style-n:not(.style-o) .scene-m__cvs .cv-j__role {
    margin-bottom: 0.5rem;
  }
}

/* body.style-n:not(.style-o) (Silène, 08.10.2026, « juste pour voir ») : sur ordinateur, les projets et l'équipe prennent toute la largeur du
   grand cadre brun — leurs bords s'alignent sur « horizon a » à gauche et sur l'onglet Contact à droite */
@media (min-width: 641px) {
  body.style-n:not(.style-o) .tiles-page,
  body.style-n:not(.style-o) .panel--nue {
    padding-inline: 0;
  }
}

/* N : le pied de page est caché dans les versions de Silène ; le lien « Connexion » vers l'atelier est donc posé,
   discret, en bas de la page Contact, dans l'encadré de l'impressum (Silène, 08.10.2026) */
/* (08.10.2026, suite) le lien est À L'INTÉRIEUR de l'encadré de l'impressum, en bas à droite : une ligne lui est
   réservée sous la liste, il s'y pose */
#impressum {
  position: relative;
}
/* (09.10.2026) sur ordinateur le mot est sur la dernière ligne de l'impressum, à droite : l'encadré s'arrête juste
   dessous, avec le même espace qu'au-dessus du titre ; sur téléphone, où les lignes sont longues, il garde sa ligne */
@media (max-width: 640px) {
  #impressum .impressum ul {
    padding-bottom: 1.5rem;
  }
}
.connexion-n {
  position: absolute;
  right: calc(var(--panel-pad) + clamp(1.1rem, 3vw, 1.9rem));
  bottom: calc(var(--panel-pad) + clamp(1.1rem, 3vw, 1.9rem) + 0.15rem);
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.2;
}
.connexion-n a,
.style-i .connexion-n a {
  color: inherit;
  opacity: 0.75;
  text-decoration: none; /* pas de trait dessous (Silène, 09.10.2026) */
}
.connexion-n a:hover {
  opacity: 1;
}
/* N sur téléphone, Projets (Silène, 08.10.2026) : une seule colonne, tous les carrés de la même taille, l'un après
   l'autre — photos et textes */
@media (max-width: 640px) {
  body.style-n:not(.style-o) .tiles:not(.tiles--ronds) {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  body.style-n:not(.style-o) .tiles:not(.tiles--ronds) li.li-texte {
    grid-column: auto;
  }
  body.style-n:not(.style-o) .tiles:not(.tiles--ronds) .tile--texte {
    aspect-ratio: 1;
    padding: 1.4rem;
  }
}

/* N (Silène, 09.10.2026) */
/* téléphone, Projets : le titre d'un projet en haut de sa photo (comme dans les carrés de texte), plus en bas */
@media (max-width: 640px) {
  body.style-n:not(.style-o) .tiles:not(.tiles--ronds) .tile__title {
    inset: 0 0 auto 0;
  }
}
/* Contact : l'impressum sans filet a été essayé le 09.10.2026 ; Silène préfère l'encadré, il est revenu */
/* Équipe : moins de vide sous la phrase « Survolez un insecte… » — la scène remonte, la phrase reste à sa place
   (elle vient dans le blanc qui entoure les dessins du haut) */
@media (min-width: 641px) {
  /* (suite) toute la page remonte aussi : moins de vide entre le menu et la phrase */
  body.style-n:not(.style-o) .panel--nue {
    padding-top: 0.75rem;
  }
  /* (suite 2) un peu plus d'air entre la phrase et les insectes du haut : la phrase ne bouge pas, la scène descend */
  body.style-n:not(.style-o) .panel--nue .scene-m {
    margin-top: 2rem;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__invite {
    bottom: calc(100% - 0.6rem);
  }
}

/* (09.10.2026) « Connexion » plus bas : tout près du bord du bas de l'encadré, dans son coin */
@media (min-width: 641px) {
  .connexion-n {
    bottom: calc(var(--panel-pad) + 0.6rem);
    right: calc(var(--panel-pad) + 0.7rem); /* et plus à droite : à la même distance du bord de droite que du bas */
  }
}

/* N, Projets (Silène, 09.10.2026) : le titre d'un projet est au même endroit dans tous les carrés — en haut à gauche,
   à la même distance du bord — qu'il soit écrit sur une photo ou dans un carré de texte (avant, le texte d'un
   carré était centré en hauteur, donc son titre plus bas) */
body.style-n:not(.style-o) .tiles:not(.tiles--ronds) {
  --n-marge-carre: clamp(0.8rem, 1.8vw, 1.4rem);
}
body.style-n:not(.style-o) .tiles:not(.tiles--ronds) .tile--texte {
  justify-content: flex-start;
  padding: calc(var(--n-marge-carre) - 1.5px); /* le filet compte dans la marge */
}
body.style-n:not(.style-o) .tiles:not(.tiles--ronds) .tile__title {
  padding: var(--n-marge-carre);
  line-height: 1.25;
}
@media (max-width: 640px) {
  body.style-n:not(.style-o) .tiles:not(.tiles--ronds) {
    --n-marge-carre: 1rem;
  }
}

/* N, Projets sur téléphone (16.10.2026), comme sur le site officiel (Wix, horizon-a.ch/recherche) : la photo seule ;
   quand on la touche, un voile clair la couvre, le titre apparaît en haut et le projet s'ouvre aussitôt
   (site.js ajoute .titre-montre ; un seul toucher, comme sur Wix) */
@media (max-width: 640px) {
  body.style-n:not(.style-o) .tiles:not(.tiles--ronds) a.tile:not(.tile--texte) .tile__title {
    inset: 0;
    opacity: 0;
    background: rgb(var(--cream-rgb) / 0.7);
    transition: opacity 0.25s var(--ease);
  }
  body.style-n:not(.style-o) .tiles:not(.tiles--ronds) a.tile.titre-montre .tile__title {
    opacity: 1;
  }
  /* Accueil : plus de ronds crème quand on touche le dessin — le dessin seul, le menu sert à naviguer */
  body.style-n:not(.style-o) .scene-k {
    pointer-events: none;
  }
  body.style-n:not(.style-o) .scene-k__labels,
  body.style-n:not(.style-o) .scene-k__disque {
    display: none !important;
  }
}

/* N, Équipe (Silène, 16.10.2026) : l'essai 2 est choisi, en un ton plus clair — la photo tirée vers le brun, sur
   ordinateur et sur téléphone */
body.style-n:not(.style-o) .panel--nue .scene-m__photo img {
  /* 16.10.2026 (suite) : plus clair, plus proche des couleurs d'origine — juste une touche chaude */
  filter: sepia(0.28) saturate(1.05) hue-rotate(-6deg) brightness(1.16) contrast(0.94);
}

/* N, Équipe sur téléphone (16.10.2026) : les insectes croquent aussi la photo — la rangée du haut et celle du bas
   mordent dans ses bords, où de petits crocs sont mangés ; le parcours de la personne commence sous les bêtes */
@media (max-width: 640px) {
  body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m {
    z-index: 3; /* (19.10.2026 : les places, tailles et inclinaisons de l'ordinateur comptent aussi ici, voir plus bas) */
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__photo {
    margin: -5.5vw 0;
    -webkit-mask-image: var(--crocs-tel);
    mask-image: var(--crocs-tel);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  /* la photo colorée (filter) passe devant ce qui la suit : le parcours doit donc être remis au-dessus */
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs {
    position: relative;
    z-index: 1;
  }
  /* (16.10.2026) la photo garde toujours la même taille, quelle que soit la bête touchée : un format fixe, un peu
     plus haut que large pour que les parcours y tiennent ; un parcours plus long défile à l'intérieur */
  body.style-n:not(.style-o) .panel--nue .scene-m__photo {
    aspect-ratio: 4 / 5;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs,
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j {
    min-height: 0;
    height: 100%;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(5.5vw + 0.9rem);
    padding-bottom: calc(5.5vw + 0.9rem);
  }
}

/* ==========================================================================
   N — document « 2026.08_MàJ_site_internet_Version_3 » et commentaires de l'équipe (19.10.2026)
   ========================================================================== */
/* Loïc et Antoine : les phrases « storytelling » en italique */
body.style-n:not(.style-o) .recit {
  font-style: italic; /* (19.10.2026, Silène) seulement les grands titres de Présentation et de Prestations */
}
/* Loïc : « Un collectif pour l'environnement » un peu plus petit et la barre du menu moins haute, pour laisser plus de
   place au dessin */
body.style-n:not(.style-o) .brand__tagline {
  font-size: 0.9rem;
  margin-top: 0.3rem;
}
@media (min-width: 641px) {
  body.style-n:not(.style-o) {
    --header-h: 6.6rem; /* avant 7,75rem */
  }
  body.style-n:not(.style-o) .brand__tagline {
    font-size: 1.08rem; /* avant 1,35rem */
  }
}

/* N, Équipe (19.10.2026) : la photo de groupe se choisit dans l'atelier ; sur ordinateur elle garde le format 4:3 de la
   mise en page (recadrée au besoin), sur téléphone le format 4:5 déjà fixé plus haut */
@media (min-width: 641px) {
  body.style-n:not(.style-o) .panel--nue .scene-m__photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

/* N, Équipe (19.10.2026) : les places des insectes sont calculées par le site selon leur nombre (templates.js,
   placesN) ; ceux qui croquent les coins de la photo passent devant elle */
@media (min-width: 641px) {
  body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m.croque {
    z-index: 3;
  }
  /* (19.10.2026) l'insecte tourne autour de son propre centre : le décalage se fait avec « translate » et non plus
     avec « transform » (sinon un dessin incliné glissait de côté et sa tête manquait la photo) */
  body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m {
    transform: none;
    translate: -50% -50%;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m.a-survol .insecte-m.is-on {
    transform: none;
    scale: 1.12;
  }
  /* les morsures, calculées par le site à l'endroit où mordent les insectes (templates.js, crocsN) */
  /* (29.10.2026) le masque sur l'enveloppe de la photo (.scene-m__masque) et non sur son cadre : il ne rogne plus le CV
     posé dessus ; pas sur l'image elle-même non plus, Safari ne l'y affichait pas */
  body.style-n:not(.style-o) .panel--nue:not([class*='essai-equipe-']) .scene-m__photo {
    -webkit-mask-image: var(--crocs);
    mask-image: var(--crocs);
    -webkit-mask-size: 100% 100%; /* (20.10.2026) les morsures sont une image à la taille de la photo */
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

/* N, Équipe (19.10.2026, Silène : l'orange se voyait mal sur le brun) : au survol, l'insecte survolé reste brun, plus
   foncé, et grandit un peu ; les autres pâlissent, pour qu'on voie tout de suite lequel est choisi */
body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m {
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease), scale 0.25s var(--ease);
}
body.style-n:not(.style-o) .panel--nue .scene-m.a-survol .insecte-m {
  opacity: 0.28;
}
body.style-n:not(.style-o) .panel--nue .scene-m.a-survol .insecte-m.is-on,
body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m.is-on {
  opacity: 1;
  color: #7a3416; /* le brun du site, en plus foncé */
}

/* N, Présentation et Prestations : autant de brun sous la dernière rangée qu'au-dessus du titre */
.style-n .panel--rust .domaines-l > .domaine-l:last-child {
  padding-bottom: 0;
}

/* N, Équipe (19.10.2026, Silène) : moins d'espace entre « Survolez un insecte… » et la photo — la phrase descend
   dans le blanc au-dessus des insectes du haut, la scène remonte d'autant */
body.style-n:not(.style-o) .panel--nue .scene-m {
  margin-top: calc(2rem - 7.5%); /* (19.10.2026 : un peu plus d'air que -9 %, moins que -6 %) */
}
body.style-n:not(.style-o) .panel--nue .scene-m__invite {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 0.6rem - 10%); /* (19.10.2026 : au-dessus des insectes du haut, avec un peu d'air) */
}
/* N, Équipe sur téléphone (19.10.2026, Silène : « oublie le grignotage, mets juste les insectes de façon qu'on les
   voie ») : la phrase, la photo sur toute la largeur, puis les insectes bien visibles, quatre par rangée (de la place
   pour les trois personnes à venir) ; le parcours de la personne touchée couvre la photo et les insectes, on le
   touche pour revenir */
@media (max-width: 640px) {
  body.style-n:not(.style-o) .panel--nue .scene-m {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4vw 2vw;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 4.4rem 0 1rem; /* en haut : la place de la phrase (deux lignes) */
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__invite {
    position: absolute;
    top: 0.6rem;
    bottom: auto;
    left: 0;
    right: 0;
    margin: 0;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__photo {
    order: 0;
    flex: 0 0 100%;
    position: relative; /* le parcours se pose sur la photo, à sa taille */
    margin: 0;
    aspect-ratio: auto;
    display: block;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: min(23%, calc(var(--lt, 25%) - 2.5vw)) !important; /* (une rangée au-dessus de la photo, une au-dessous) */
    rotate: none !important;
    transform: none;
    translate: none;
    order: 1;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m.haut-tel {
    order: -1;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m.a-survol .insecte-m.is-on {
    scale: 1.08;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs {
    position: static;
    height: auto;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j {
    position: absolute;
    inset: 0; /* (19.10.2026, Silène) exactement la taille de la photo ; un long parcours défile à l'intérieur */
    z-index: 5;
    height: auto;
    overflow: auto;
    padding: 0.8rem 0.9rem;
    font-size: 0.8rem;
    line-height: 1.35;
  }
}
/* N, Équipe (19.10.2026, Silène) : moins de vide en bas de la page, sous les insectes du bas */
@media (min-width: 641px) {
  body.style-n:not(.style-o) .panel--nue .scene-m {
    margin-bottom: -4%;
  }
}
body.style-n:not(.style-o) .panel--nue {
  padding-bottom: 0.75rem;
}
body.style-n.page-equipe-n:not(.style-o) main {
  padding-bottom: 0.5rem;
}

/* (20.10.2026) le tour du « a » du logo à l'arrivée sur chaque page a été essayé puis retiré : Silène parlait du grand
   « a » de l'écran de chargement (voir templates.js, shell : il est maintenant sur toutes les pages N) */
/* Pages projet (22.10.2026, Silène) : le crédit d'une photo écrit sur la photo, en bas à gauche, en blanc — comme les
   crédits déjà écrits en légende (« © Andy Murray… ») */
.projet-i__grande {
  position: relative;
}
.projet-i .credit-photo {
  position: absolute;
  left: 0.7rem;
  bottom: 0.55rem;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}
/* N, pages projet (29.10.2026, Silène) : la colonne a la largeur de l'en-tête — le titre commence sous « horizon a »,
   les photos finissent sous « Contact » */
body.style-n:not(.style-o) .projet-i {
  width: min(100% - 2 * var(--gutter), 66rem);
}
/* (essai) tout le texte des projets justifié, avec césure */
body.style-n:not(.style-o) .projet-i .fiche-i__champ p,
body.style-n:not(.style-o) .projet-i__texte {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* N, Équipe sur ordinateur (29.10.2026 : un collègue ne voyait pas tout le CV sur un écran plus petit) : la taille du
   texte du CV suit la largeur de la photo (unités cqw = % de la largeur de la photo), il tient donc toujours dedans ;
   un navigateur trop ancien pour cqw garde simplement la taille d'avant */
@media (min-width: 641px) {
  body.style-n:not(.style-o) .panel--nue .scene-m__photo {
    /* (29.10.2026) plus de « container-type » ici : Safari n'affichait plus les morsures ; tailles en vw à la place */
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j {
    padding: clamp(0.6rem, 1.5vw, 1.4rem);
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j h2 {
    font-size: clamp(0.9rem, 1.66vw, 1.25rem); /* (29.10.2026 : un peu plus grand, Silène trouvait trop petit) */
    margin-bottom: 0.4em;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j li,
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j__role {
    font-size: clamp(0.8rem, 1.47vw, 1.1rem);
    line-height: 1.35;
  }
}

/* (29.10.2026, revue des tailles d'écran) en-tête entre 900 et 1100 px : menu un peu plus petit pour ne rien serrer ;
   très petits téléphones : la phrase sous le logo tient sur une ligne */
@media (min-width: 900px) and (max-width: 1100px) {
  body.style-n:not(.style-o) .brand__tagline {
    font-size: 0.95rem;
  }
  body.style-n:not(.style-o) .nav a,
  body.style-n:not(.style-o) .nav__more {
    font-size: 1rem;
  }
}
@media (max-width: 360px) {
  body.style-n:not(.style-o) .brand__tagline {
    font-size: 0.82rem;
  }
}

/* N, Équipe : l'enveloppe de la photo (elle porte les morsures sur ordinateur) */
.scene-m__masque {
  display: block;
  line-height: 0;
}
/* N, Équipe sur téléphone (29.10.2026, Silène : idée 1 « cadre ») : les insectes tout autour de la photo, comme sur
   l'ordinateur ; la scène est un carré, la photo un carré plus petit au milieu ; places calculées par le site
   (templates.js, placesTelCadreN : --xt, --yt, --lt, --rt) ; le CV couvre toute la scène */
@media (max-width: 640px) {
  body.style-n:not(.style-o) .panel--nue .scene-m {
    display: block;
    position: relative;
    width: 100vw; /* toute la largeur de l'écran */
    aspect-ratio: 1;
    margin: 4.6rem 0 0.5rem calc(50% - 50vw);
    padding: 0;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__invite {
    top: -4rem;
    padding: 0 1.5rem;
  }
  body.style-n:not(.style-o) .panel--nue {
    overflow-x: clip; /* (un insecte du bord ne fait pas défiler la page de côté) */
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__photo {
    position: absolute;
    left: 17%;
    top: 17%;
    width: 66%;
    margin: 0;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__photo img {
    aspect-ratio: 1;
    object-fit: cover;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m .insecte-m {
    position: absolute;
    left: var(--xt) !important;
    top: var(--yt) !important;
    width: var(--lt) !important;
    rotate: var(--rt, 0deg) !important;
    translate: -50% -50%;
    margin: 0;
    z-index: 3;
  }
  /* (29.10.2026, Silène : « trop grand ») le CV à la taille de la photo, comme avant ; un long CV défile dedans */
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j {
    inset: 0;
    padding: 0.7rem 0.8rem;
    overflow: auto;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j h2 {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
  }
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j li,
  body.style-n:not(.style-o) .panel--nue .scene-m__cvs .cv-j__role {
    font-size: 0.78rem;
    line-height: 1.3;
  }
}
/* N, Équipe sur téléphone (29.10.2026, Silène) : les insectes grignotent aussi la photo — les mêmes morsures que sur
   l'ordinateur (les insectes sont aux mêmes endroits autour de la photo), étirées à la photo carrée */
@media (max-width: 640px) {
  body.style-n:not(.style-o) .panel--nue:not([class*='essai-equipe-']) .scene-m__photo {
    -webkit-mask-image: var(--crocs);
    mask-image: var(--crocs);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

/* (29.10.2026) Safari n'affichait les morsures que posées sur le cadre de la photo (.scene-m__photo), comme au début :
   elles y reviennent, sur ordinateur et sur téléphone (le coin d'un CV très long peut être un peu grignoté) */
@media (max-width: 640px) {
  body.style-n:not(.style-o) .panel--nue .scene-m__photo img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* (29.10.2026) les morsures, ordinateur et téléphone : une seule couche (l'image des morsures), SANS « mask-composite » —
   c'est ce réglage qui empêchait Safari sur Mac de les afficher (sur iPhone, où il n'y était pas, elles s'affichaient) */
body.style-n:not(.style-o) .panel--nue:not([class*='essai-equipe-']) .scene-m__photo {
  -webkit-mask-image: var(--crocs);
  mask-image: var(--crocs);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}