/* Ateliers Després — direction « Papier gaufré » (docs/references/0*-*.md).
   Fond papier, encre presque noire, un seul accent par affiche (orange, ou sarcelle), une seule famille : Archivo.
   Trois tailles : le mot géant, le titre d'appui, le texte. Coins carrés, filets de 1 px, pas de cartes ni de pilules.
   Le relief (néomorphisme) est réservé à ce qui est « imprimé » : les mots et chiffres géants. */

:root {
  --papier: #e9e4da;
  --papier-clair: #f1ece3;
  --lumiere: #fbf8f2;
  --ombre: #c7beaf;
  --encre: #221f1b;
  --encre-douce: #5c5446;
  --orange: #ee7438;
  --orange-brule: #d65a22;
  --orange-texte: #a2461a; /* orange pour les PETITS textes : contraste 4,8 : 1 sur le papier (le #d65a22 n'en a que 3,1) */
  --lac: #0f5552;
  --g: clamp(18px, 3.2vw, 48px);
  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font: 400 1rem/1.5 var(--f); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* Grain de papier, sur toute la page */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.13  0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* ------------------------------------------------------------ les trois tailles */

.mention {
  font: 600 0.72rem/1.3 var(--f); letter-spacing: 0.16em; text-transform: uppercase;
}
.titre { font: 700 clamp(1.4rem, 2.1vw, 1.75rem)/1.15 var(--f); letter-spacing: -0.015em; max-width: 24ch; text-wrap: balance; }
.texte { font-size: 1rem; line-height: 1.55; max-width: 38ch; color: var(--encre-douce); text-wrap: pretty; }

.bouton {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px;
  background: var(--encre); color: var(--papier-clair); text-decoration: none; border: 0; border-radius: 0;
  font: 700 0.95rem/1 var(--f); letter-spacing: 0.01em; cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.bouton:hover { background: var(--orange); color: var(--encre); }
.lien { font-weight: 700; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------ en-tête (logo + MENU) */

.entete {
  position: absolute; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--g);
}
.entete a, .entete button { text-decoration: none; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--encre); }
.entete nav { display: flex; gap: clamp(18px, 3vw, 40px); }
.entete .actif { text-decoration: underline; text-underline-offset: 0.4em; }

/* ------------------------------------------------------------ mot géant : gaufré puis encré */

.mot-geant {
  margin: 0; position: absolute; left: 0; right: 0; z-index: 2; text-align: center; white-space: nowrap;
  font-family: var(--f); font-weight: 900; text-transform: uppercase; line-height: 0.74; letter-spacing: -0.035em;
  pointer-events: none; user-select: none;
}
.mot-geant span { display: block; }
.mot-geant .encre { position: absolute; inset: 0; padding: inherit; } /* même retrait que la couche gaufrée */
.gaufre {
  color: rgba(241, 236, 227, 0.92);
  text-shadow: -0.008em -0.008em 0.012em rgba(255, 255, 255, 0.85), 0.012em 0.016em 0.024em rgba(70, 58, 42, 0.38);
}
.encre { mix-blend-mode: multiply; }
@media (prefers-reduced-motion: no-preference) {
  .anime .encre { animation: encrer 1.4s 0.7s var(--ease) both; }
  .anime .gaufre { animation: gaufrer 0.9s var(--ease) both; }
}
@keyframes gaufrer { from { opacity: 0; } }
@keyframes encrer { from { opacity: 0; transform: translate(0.018em, -0.012em); } 60% { opacity: 1; } }

/* ------------------------------------------------------------ une affiche = une scène + un pied */

.affiche { position: relative; }
.scene { position: relative; overflow: hidden; isolation: isolate; }
.scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) var(--horizon); }
.scene .avant { z-index: 3; }

/* Scènes photo : le mot géant est placé PAR RAPPORT À LA PHOTO, pas à l'écran.
   La photo est recadrée (object-fit: cover) différemment selon la forme de l'écran ; on refait ici le même calcul
   pour poser la ligne de base du mot à une hauteur fixe de la photo (--ligne, de 0 = haut à 1 = bas).
   --ratio = largeur ÷ hauteur de la photo ; --py = cadrage vertical (le même que --horizon, en fraction). */
.scene.photo { container-type: size; }
.scene.photo .mot-geant {
  --H: max(100cqh, calc(100cqw / var(--ratio)));   /* hauteur affichée de la photo */
  --W: max(100cqw, calc(100cqh * var(--ratio)));   /* largeur affichée de la photo */
  bottom: calc(100cqh - (100cqh - var(--H)) * var(--py) - var(--ligne) * var(--H));
  font-size: min(calc(var(--W) * var(--taille)), calc(100cqw * var(--taille-max)));
}
.pied {
  display: grid; gap: 22px 48px; padding: clamp(28px, 4vw, 56px) var(--g) clamp(56px, 8vw, 110px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .pied { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: end; } }
.pied .gauche { display: grid; gap: 14px; }
.notes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 14px var(--g); border-top: 1px solid var(--encre); }

/* Affiche 1 — RELIEF sur l'horizon du lac */
.heros .scene { height: clamp(540px, 88svh, 1040px); --horizon: 66.5%; --py: 0.665; --x: 64%; --ratio: 1.7674; --ligne: 0.545; --taille: 0.19; --taille-max: 0.19; }
.heros .scene::before { /* le ciel se fond dans le papier, sous l'en-tête */
  content: ""; position: absolute; inset: 0 0 auto; height: 34%; z-index: 1;
  background: linear-gradient(var(--papier), rgba(233, 228, 218, 0));
}
.heros .mot-geant { font-stretch: 112%; transform: translateY(0.035em); }
.heros .encre { color: var(--orange-brule); }
.coupure { display: none; }
@media (max-width: 700px) {
  /* Sur téléphone, le ciel est haut : le mot passe sur deux lignes, la dernière posée sur l'horizon. */
  .coupure { display: inline; }
  .heros .mot-geant { line-height: 0.76; font-stretch: 100%; text-align: left; padding-left: 4vw; }
  .heros .scene { --x: 68%; --taille: 0.37; --taille-max: 0.37; --ligne: 0.6; }
}

/* Affiche « TEXTURE » — le mot est gaufré dans le papier (même couleur que le fond, visible par ses ombres),
   puis une comparaison à glisser : la même image à plat (ailleurs) et en relief (ici). */
.texture { padding-top: clamp(72px, 10vw, 140px); }
.gaufrage {
  margin: 0; padding: 0 var(--g); text-align: center; white-space: nowrap; user-select: none;
  font: 900 clamp(4rem, 19.5vw, 24rem)/0.8 var(--f); font-stretch: 112%; letter-spacing: -0.035em; text-transform: uppercase;
  color: var(--papier);
  text-shadow: -0.006em -0.006em 0.01em var(--lumiere), 0.009em 0.012em 0.016em rgba(120, 104, 80, 0.7), 0.003em 0.004em 0.002em rgba(100, 86, 66, 0.45);
}
/* Chaque lettre de TEXTURE dans une matière différente, en relief (ombre et reflet comme un gaufrage). */
.gaufrage.matieres { text-shadow: none; font-size: clamp(3.4rem, 16.2vw, 20rem); }
.matieres span {
  display: inline-block; color: transparent;
  background: var(--tex) center / cover; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(-0.006em -0.006em 0.006em rgba(255, 255, 255, 0.75)) drop-shadow(0.01em 0.014em 0.012em rgba(55, 42, 28, 0.5));
}
.matieres:not(.charge) span { background-image: none; background-color: var(--ombre); }
.matieres-legende { padding: 14px var(--g) 0; text-align: center; color: var(--encre-douce); }
.texture-tete { display: grid; gap: 14px 48px; padding: clamp(24px, 3.5vw, 44px) var(--g) clamp(24px, 3.5vw, 44px); }
@media (min-width: 900px) { .texture-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.texture-corps { display: grid; gap: 6px; padding: 0 var(--g); }
@media (min-width: 900px) { .texture-corps { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.comparer { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; --pos: 50%; touch-action: pan-y; }
.comparer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparer .plat { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparer .trait { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--papier-clair); pointer-events: none; }
.comparer .trait::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; translate: -50% -50%;
  background: var(--papier-clair); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  clip-path: polygon(0 50%, 28% 22%, 28% 40%, 72% 40%, 72% 22%, 100% 50%, 72% 78%, 72% 60%, 28% 60%, 28% 78%);
}
.comparer input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparer input:focus-visible ~ .trait { background: var(--orange); }
.comparer .etiquette-g, .comparer .etiquette-d {
  position: absolute; bottom: 14px; padding: 7px 10px; background: rgba(233, 228, 218, 0.92); pointer-events: none;
}
.comparer .etiquette-g { left: 14px; }
.comparer .etiquette-d { right: 14px; }
.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.paire figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.paire img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.paire figcaption { display: grid; gap: 4px; padding-bottom: 12px; }
.paire figure:last-child .mention { color: var(--orange-texte); }
.textures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 900px) { .textures { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); } }
.textures figure { margin: 0; position: relative; overflow: hidden; }
.textures img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
@media (min-width: 900px) { .textures img { aspect-ratio: auto; } }
.textures figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 9px; background: rgba(233, 228, 218, 0.92); }
.texture .notes { margin-top: clamp(20px, 3vw, 36px); }

/* Affiche 2 — un seul objet : trois exemples réels */
.unite { padding-top: clamp(72px, 10vw, 140px); }
.unite-tete { display: grid; gap: 14px 48px; padding: 0 var(--g) clamp(24px, 3.5vw, 44px); }
@media (min-width: 900px) { .unite-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.trio { display: grid; gap: 6px; padding: 0 var(--g); }
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trio figure { margin: 0; display: grid; gap: 12px; align-content: start; }
.trio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.trio figcaption { display: grid; gap: 6px; padding-bottom: 22px; }
.trio figcaption .texte { max-width: 30ch; }
.unite .notes { margin-top: clamp(20px, 3vw, 36px); }

/* Affiche 3 — vos photos, mot vertical */
.photos { display: grid; gap: 0; }
@media (min-width: 900px) { .photos { grid-template-columns: auto minmax(0, 1fr); } }
.vertical {
  margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); align-self: stretch; text-align: right;
  font: 900 clamp(5.5rem, 15vw, 15rem)/0.78 var(--f); font-stretch: 75%; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--lac); padding: var(--g) 0 var(--g) clamp(6px, 1vw, 14px);
}
@media (max-width: 899px) { .vertical { writing-mode: horizontal-tb; transform: none; text-align: left; padding: 72px var(--g) 0; font-size: 22vw; } }
.photos-images { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 72px var(--g) 0 0; align-content: start; }
@media (max-width: 899px) { .photos-images { padding: 18px var(--g) 0; } }
.photos-images figure { margin: 0; }
.photos-images .grande { grid-column: 1 / -1; }
.photos-images img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.photos-images .grande img { aspect-ratio: 16 / 10; }
.photos-images figcaption { padding-top: 8px; }

/* Affiche 4 — la liste de ce qui sort de l'atelier */
.liste { padding: clamp(72px, 10vw, 140px) 0 0; }
.liste-tete { padding: 0 var(--g) 28px; display: flex; flex-wrap: wrap; gap: 14px 48px; justify-content: space-between; align-items: end; }
.liste details { border-top: 1px solid var(--encre); }
.liste details:last-child { border-bottom: 1px solid var(--encre); }
.liste summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 18px;
  padding: 10px var(--g) 6px;
}
.liste summary::after { content: "+"; font: 300 clamp(1.8rem, 4vw, 3.4rem)/1 var(--f); width: 1ch; text-align: center; }
.liste details[open] summary::after { content: "−"; }
.liste summary::-webkit-details-marker { display: none; }
.liste summary strong {
  font: 800 clamp(2.2rem, 7vw, 7.4rem)/0.92 var(--f); font-stretch: 62%; letter-spacing: -0.01em; text-transform: uppercase;
  transition: color 0.25s var(--ease);
}
.liste summary:hover strong, .liste details[open] summary strong { color: var(--orange-brule); }
.liste summary .mention { text-align: right; flex: none; max-width: 22ch; }
@media (max-width: 640px) {
  .liste summary { grid-template-columns: minmax(0, 1fr) auto; }
  .liste summary .mention { grid-column: 1 / -1; grid-row: 2; text-align: left; max-width: none; padding-bottom: 6px; }
}
.ouvert { display: grid; gap: 18px 48px; padding: 10px var(--g) 40px; }
@media (min-width: 900px) { .ouvert { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; } }
.ouvert img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ouvert > div:last-child { display: grid; gap: 16px; align-content: end; }
.vignettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 900px) { .vignettes:not(.deux) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vignettes.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vignettes figure { margin: 0; display: grid; gap: 8px; align-content: start; }
.ouvert .vignettes img { aspect-ratio: 1; }
.ouvert .vignettes.deux img { aspect-ratio: 4 / 5; }

/* Affiche 5 — SHAWINIGAN posé sur l'horizon (papier en haut, lac en bas), avec son reflet. Aucune photo :
   on ne présente jamais une image inventée comme un lieu réel. */
.atelier { margin-top: clamp(72px, 10vw, 140px); }
.atelier .horizon { position: relative; height: clamp(300px, 46vw, 600px); overflow: hidden;
  background: linear-gradient(var(--papier) 0 62%, var(--lac) 62%); }
.atelier .mot-geant { bottom: 38%; font-size: 16.4vw; font-stretch: 78%; transform: translateY(0.02em); }
.atelier .encre { color: var(--encre); }
.atelier .horizon::after { /* le reflet dans l'eau */
  content: "Shawinigan"; position: absolute; left: 0; right: 0; top: 62%; text-align: center; white-space: nowrap;
  font: 900 16.4vw/0.74 var(--f); font-stretch: 78%; letter-spacing: -0.035em; text-transform: uppercase;
  color: rgba(233, 228, 218, 0.16); transform: scaleY(-1) translateY(0.02em); transform-origin: top;
  filter: blur(1.5px); mask-image: linear-gradient(rgba(0,0,0,0.9), transparent 70%);
  -webkit-mask-image: linear-gradient(rgba(0,0,0,0.9), transparent 70%); pointer-events: none;
}
/* Affiche « Votre projet » */
.projet-affiche { padding-top: clamp(80px, 12vw, 170px); }
.projet-affiche .gaufrage { overflow: hidden; padding-top: 0.16em; } /* sinon l'accent du É est coupé */
.projet-depart { display: grid; gap: 22px 48px; padding: clamp(24px, 3.5vw, 44px) var(--g) clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .projet-depart { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.projet-depart .gauche { display: grid; gap: 14px; max-width: 640px; }
.projet-depart input {
  font: 700 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--f); color: var(--encre); background: transparent;
  border: 0; border-bottom: 2px solid var(--encre); border-radius: 0; padding: 10px 0; width: 100%;
}
.projet-depart input::placeholder { color: rgba(34, 31, 27, 0.35); }
.projet-depart input:focus { outline: none; border-bottom-color: var(--orange-brule); }
.atelier-mot { padding: 18px var(--g) clamp(56px, 8vw, 100px); border-top: 1px solid var(--encre); }
.atelier-mot .texte { max-width: 70ch; }
.atelier-mot strong { color: var(--encre); }

/* ------------------------------------------------------------ lien d'évitement, menu plein écran */

.saut { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--encre); color: var(--papier-clair); text-decoration: none; }
.saut:focus { top: 12px; }
.entete [aria-current="page"] { text-decoration: underline; text-underline-offset: 0.4em; }

.menu {
  margin: 0; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; padding: 22px var(--g) 28px;
  background: var(--papier); color: var(--encre); display: none; flex-direction: column; justify-content: space-between;
  transition: opacity 0.3s var(--ease), display 0.3s allow-discrete, overlay 0.3s allow-discrete; opacity: 0;
}
.menu:popover-open { display: flex; opacity: 1; }
@starting-style { .menu:popover-open { opacity: 0; } }
.menu-haut, .menu-bas { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.menu-haut a, .menu-haut button { text-decoration: none; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--encre); }
.menu-liens { display: grid; border-top: 1px solid var(--encre); }
.menu-liens a {
  display: block; padding: 6px 0 2px; border-bottom: 1px solid var(--encre); text-decoration: none; text-transform: uppercase;
  font: 800 clamp(2.2rem, 7.4vw, 6.6rem)/0.95 var(--f); font-stretch: 62%; transition: color 0.2s var(--ease);
}
.menu-liens a:hover, .menu-liens a:focus-visible { color: var(--orange-brule); }
.menu-bas a { text-decoration: none; }

/* ------------------------------------------------------------ pied de page */

.bas { border-top: 1px solid var(--encre); }
.bas-haut { display: grid; gap: 18px 48px; padding: clamp(36px, 6vw, 72px) var(--g) clamp(24px, 4vw, 40px); }
@media (min-width: 900px) { .bas-haut { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.bas-mot { font: 900 clamp(2.6rem, 9vw, 9rem)/0.85 var(--f); font-stretch: 75%; letter-spacing: -0.02em; text-transform: uppercase; }
.bas-liens { display: grid; gap: 8px; }
.bas-liens a { font-weight: 700; text-decoration: none; }
.bas-liens a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.bas-ligne { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; padding: 16px var(--g); border-top: 1px solid var(--encre); }
.bas-contact { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.bas a.mention { text-decoration: none; }
.bas-note { padding: 0 var(--g) 24px; font-size: 0.82rem; color: var(--encre-douce); max-width: 90ch; }

/* ------------------------------------------------------------ boutiques sœurs */

.boutiques { padding-top: clamp(72px, 10vw, 140px); }
.boutiques-tete { padding: 0 var(--g) clamp(20px, 3vw, 32px); display: grid; gap: 12px; }
.boutique { display: grid; border-top: 1px solid var(--encre); text-decoration: none; color: inherit; }
.boutique:last-child { border-bottom: 1px solid var(--encre); }
@media (min-width: 900px) { .boutique { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.boutique img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; aspect-ratio: 16 / 10; }
.boutique-texte { display: grid; gap: 14px; align-content: center; padding: clamp(22px, 3vw, 40px) var(--g); }
.boutique-texte strong {
  font: 800 clamp(2.4rem, 6vw, 6rem)/0.92 var(--f); font-stretch: 62%; text-transform: uppercase; transition: color 0.25s var(--ease);
}
.boutique:hover strong { color: var(--orange-brule); }
.boutique .lien { justify-self: start; }

/* ------------------------------------------------------------ pages intérieures (confidentialité, 404) */

.page-simple { padding: clamp(120px, 16vw, 200px) var(--g) clamp(56px, 8vw, 100px); }
.page-simple .gaufrage { padding: 0; text-align: left; font-size: clamp(3.4rem, 13vw, 13rem); }
.page-simple .gaufrage.long { font-size: clamp(2.4rem, 9vw, 10.5rem); }
.prose { max-width: 70ch; margin-top: clamp(24px, 4vw, 48px); }
.prose h2 { font: 700 clamp(1.25rem, 1.8vw, 1.5rem)/1.2 var(--f); margin: 2em 0 0.5em; }
.prose p, .prose li { color: var(--encre-douce); line-height: 1.6; }
.prose p { margin: 0 0 1em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose strong { color: var(--encre); }

/* ------------------------------------------------------------ « Démarrer un projet » */

[hidden] { display: none !important; }

/* PROJET, derrière les épinettes du camp */
.heros-projet .scene { height: clamp(460px, 74svh, 880px); --horizon: 60%; --py: 0.6; --x: 50%; --ratio: 1.7684; --ligne: 0.655; --taille: 0.175; --taille-max: 0.175; }
.heros-projet .mot-geant { font-stretch: 112%; }
@media (min-width: 900px) { .heros-projet .pied { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
@media (max-width: 700px) {
  .heros-projet .mot-geant { line-height: 0.76; font-stretch: 100%; text-align: left; padding-left: 4vw; }
  .heros-projet .scene { --x: 28%; --taille: 0.36; --taille-max: 0.36; --ligne: 0.585; }
}
.promesses { list-style: none; margin: 0; padding: 0; display: grid; }
.promesses li { padding: 11px 0; border-top: 1px solid var(--encre); font-weight: 600; }
.promesses li:last-child { border-bottom: 1px solid var(--encre); }

/* Les trois étapes */
.formulaire { border-top: 1px solid var(--encre); }
.progression { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--encre); }
.progression li + li { border-left: 1px solid var(--encre); }
.progression button {
  width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 16px var(--g); text-align: left;
  background: none; border: 0; cursor: pointer; color: var(--encre-douce);
  font: 600 0.72rem/1.3 var(--f); letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.2s var(--ease);
}
.progression button span { font: 900 clamp(1.8rem, 3.4vw, 3rem)/0.9 var(--f); font-stretch: 62%; letter-spacing: 0; }
.progression [aria-current] { color: var(--encre); box-shadow: inset 0 -4px 0 var(--orange-brule); }
.progression [aria-current] span { color: var(--orange-brule); }
.progression .faite { color: var(--encre); }
.progression button:hover { color: var(--encre); }

.formulaire-corps { display: grid; gap: 48px; padding: clamp(36px, 5vw, 72px) var(--g) clamp(72px, 10vw, 140px); }
@media (min-width: 980px) { .formulaire-corps { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; } }
.etape { display: grid; gap: 36px; }
.etape > .titre { max-width: none; font-size: clamp(1.7rem, 3vw, 2.4rem); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 14px; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Les types de projet : une photo par catégorie, comme sur la page d'accueil */
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 44%), 1fr)); gap: 18px 6px; }
.type { position: relative; display: grid; gap: 10px; align-content: start; cursor: pointer; }
.type input, .puces input, .depot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.type img, .type-gaufre { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: filter 0.25s var(--ease), outline-color 0.2s var(--ease); outline: 4px solid transparent; outline-offset: -4px; }
.type strong { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.type:hover img { filter: brightness(1.05) saturate(1.1); }
.type:has(input:checked) img, .type:has(input:checked) .type-gaufre { outline-color: var(--orange-brule); }
.type:has(input:checked) strong { color: var(--orange-texte); }
.type:has(input:checked)::after {
  content: "✓"; position: absolute; top: 0; right: 0; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--orange-brule); color: var(--papier-clair); font-weight: 800;
}
.types:has(input:checked) .type:not(:has(input:checked)) img { filter: grayscale(0.7) opacity(0.6); }
.type:has(input:focus-visible) img, .type:has(input:focus-visible) .type-gaufre { outline-color: var(--encre); }
.type-gaufre {
  display: grid; place-items: center; border: 1px solid var(--encre); background: var(--papier);
  font: 900 clamp(5rem, 9vw, 8rem)/1 var(--f); color: var(--papier); user-select: none;
  text-shadow: -0.006em -0.006em 0.01em var(--lumiere), 0.009em 0.012em 0.016em rgba(120, 104, 80, 0.7), 0.003em 0.004em 0.002em rgba(100, 86, 66, 0.45);
}

/* Choix courts : pastilles carrées, encrées quand choisies */
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puces label { position: relative; cursor: pointer; }
.puces span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--encre);
  font-weight: 600; font-size: 0.95rem; transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.puces label:hover span { background: var(--papier-clair); }
.puces input:checked + span { background: var(--encre); color: var(--papier-clair); }
.puces input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 3px; }
.puces + .aide { margin-top: 12px; }

/* Champs : un trait d'encre, comme une ligne à remplir */
.champ { display: grid; gap: 8px; align-content: start; }
.champ > label, .etiquette-champ { font-weight: 700; font-size: 0.95rem; }
.facultatif { font-weight: 400; color: var(--encre-douce); }
.champs-deux { display: grid; gap: 30px 40px; }
@media (min-width: 700px) { .champs-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.formulaire input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="date"]), .formulaire select, .formulaire textarea {
  width: 100%; margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--encre); border-radius: 0;
  background: transparent; color: var(--encre); font: 400 1.1rem/1.4 var(--f);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.formulaire textarea { padding: 12px 14px; border: 1px solid var(--encre); background: rgba(251, 248, 242, 0.5); resize: vertical; min-height: 7.5em; }
.formulaire #texte_exact { min-height: 4.5em; }
.formulaire select {
  appearance: none; padding-right: 28px; cursor: pointer;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23221f1b' stroke-width='1.6'/></svg>") right 4px center / 12px no-repeat;
}
.formulaire :is(input, select, textarea)::placeholder { color: rgba(34, 31, 27, 0.4); }
.formulaire :is(input, select, textarea):focus { outline: none; border-color: var(--orange-brule); box-shadow: 0 1px 0 var(--orange-brule); }
.formulaire [aria-invalid="true"] { border-color: #a8321a; }
.aide { font-size: 0.88rem; line-height: 1.5; color: var(--encre-douce); max-width: 62ch; }
details.aide summary { cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
details.aide p { margin-top: 8px; }
.erreur { color: #a8321a; font-weight: 600; font-size: 0.9rem; }
.case { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.45; max-width: 70ch; }
.case input {
  appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1px solid var(--encre); background: transparent; cursor: pointer;
}
.case input:checked {
  background: var(--encre) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='11'><path d='M1 5.5l4 4L13 1' fill='none' stroke='%23f1ece3' stroke-width='2'/></svg>") center / 14px no-repeat;
}
.case input:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

.bon-a-savoir { display: grid; gap: 6px; padding: 16px 18px; border-left: 4px solid var(--lac); background: rgba(15, 85, 82, 0.06); line-height: 1.5; }
.bon-a-savoir .mention { color: var(--lac); }

/* Dépôt de fichiers */
.depot {
  position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 36px 20px; cursor: pointer;
  border: 1px dashed var(--encre); background: rgba(251, 248, 242, 0.45); transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.depot:hover, .depot.survol { background: var(--papier-clair); border-style: solid; border-color: var(--orange-brule); }
.depot:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 3px; }
.fichiers { list-style: none; margin: 0; padding: 0; display: grid; }
.fichiers li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(34, 31, 27, 0.2); }
.fichiers img, .fichier-ext { width: 48px; height: 48px; object-fit: cover; }
.fichier-ext { display: grid; place-items: center; border: 1px solid var(--encre); font: 700 0.65rem/1 var(--f); letter-spacing: 0.08em; }
.fichier-nom { display: grid; overflow-wrap: anywhere; font-size: 0.95rem; }
.fichier-nom small { color: var(--encre-douce); }
.fichier-retirer { width: 40px; height: 40px; border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--encre); }
.fichier-retirer:hover { color: #a8321a; }

/* Boutons et navigation entre les étapes */
.navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 24px; border-top: 1px solid var(--encre); }
.bouton { gap: 10px; }
.bouton.contour { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.bouton.contour:hover { background: var(--papier-clair); }
.bouton.accent { background: var(--orange); color: var(--encre); }
.bouton.accent:hover { background: var(--encre); color: var(--papier-clair); }
.bouton:disabled { opacity: 0.55; cursor: progress; }
.envoi-barre { display: none; height: 4px; background: var(--orange-brule); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 0.2s linear; }
form.envoi .envoi-barre { display: block; }
.etat-envoi { padding: 14px 16px; border: 1px solid #a8321a; color: #a8321a; line-height: 1.5; }

/* Le résumé, à côté */
.cote { display: grid; gap: 20px; align-content: start; }
@media (min-width: 980px) { .cote { position: sticky; top: 24px; align-self: start; } }
.resume { padding: 22px 24px 14px; background: var(--papier-clair); border: 1px solid var(--encre); }
.resume dl { margin: 12px 0 0; }
.resume dl div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid rgba(34, 31, 27, 0.15); }
.resume dt { font: 600 0.68rem/1.6 var(--f); letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-douce); }
.resume dd { margin: 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.resume-vide { padding: 10px 0; color: var(--encre-douce); font-size: 0.95rem; }

/* Merci : le mot gaufré dans le papier, le numéro encré */
.merci { display: grid; gap: 18px; justify-items: start; }
.merci .gaufrage { padding: 0; text-align: left; font-size: clamp(4.4rem, 15vw, 13rem); }
.numero { font: 900 clamp(2.4rem, 6vw, 4.6rem)/1 var(--f); font-stretch: 75%; letter-spacing: 0.02em; color: var(--orange-brule); }
.merci .texte { max-width: 60ch; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }