/* ============================================================================
   LA BIO — L'ATELIER
   ----------------------------------------------------------------------------
   Le reste du site est une galerie : nuit, silence, les planches éclairées une
   par une. Cette page est son ENVERS. On passe derrière, dans l'atelier : le
   bois de l'établi, le papier millimétré, le métal de la règle, le graphite.
   C'est le seul endroit du site où l'on voit le brouillon plutôt que l'œuvre.

   Toutes les matières — bois, papier, métal, ruban adhésif — sont dessinées EN
   CSS. Aucune texture n'est une image générée : ce serait contredire la page
   même qui affirme que tout est fait à la main.
   ========================================================================== */

/* Le grain du papier (--grain-papier) est défini dans style.css : il sert aussi
   au bandeau de la règle, sur l'accueil. */


@font-face {
  font-family: 'Architecte'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/architectsdaughter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
/* Une seule écriture manuscrite : Caveat (« Note ») est retirée, 12/09/2026. */

.atelier-page {
  /* Les matières ne sont plus dessinées en CSS : ce sont quatre PHOTOGRAPHIES
     de papier Canson (kraft, gris, blanc cassé, noir grainé). Des dégradés
     empilés peuvent imiter du bois de loin, mais jamais le grain, les fibres
     et les petites impuretés d'une feuille — et ça se voit tout de suite. */
  --kraft:       #c3a984;
  --papier:      #ded9cb;
  --papier-gris: #c5c7c6;
  --encre-noire: #191919;
  --graphite:    #262529;
  --graphite-2:  #3a3841;
  --plan:        #22364d;   /* le bleu des tirages de plan, assombri pour tenir
                               le seuil AA sur le kraft (4,06:1 auparavant) */
  --metal:       #b3b8bf;
  --metal-2:     #7d838b;
  --scotch:      rgba(228, 214, 168, .52);

  background-color: #2b2319;
  color: var(--graphite);
  position: relative;
}

/* LA TABLE À DESSIN : une grande feuille de kraft, posée une seule fois et
   jamais répétée. Une texture qu'on carrelle finit toujours par montrer sa
   maille ; en « cover », il n'y a aucun raccord à voir. */
.atelier-page::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: url('medias/atelier/etabli-1.webp');
  background-size: cover; background-position: center;
  /* L'établi est riche et clair : laissé tel quel, aucun texte ne tient
     par-dessus. On l'assombrit et on le recule légèrement — il doit se lire
     comme le DÉCOR sur lequel les feuilles sont posées, pas comme le contenu. */
  filter: saturate(.82) brightness(.42) contrast(1.06) blur(1.5px);
  scale: 1.04;
}
/* La lumière de l'atelier : une seule source, en haut à gauche, et le coin
   opposé qui tombe dans l'ombre. C'est elle qui donne le relief. */
.atelier-page::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(78% 62% at 20% -6%, rgba(255,246,224,.34), transparent 62%),
    radial-gradient(120% 95% at 84% 108%, rgba(48,30,14,.52), transparent 60%);
}

/* Plus bas dans la page, la table change : la seconde photo prend le relais.
   Un fond unique tenu sur 4 000 px de défilement finit par se remarquer. */
.atelier-bis {
  position: relative;
}
.atelier-bis::before {
  content: ''; position: absolute; inset: -6% 0;
  z-index: -1; pointer-events: none;
  background-image: url('medias/atelier/etabli-2.webp');
  background-size: cover; background-position: center;
  filter: saturate(.8) brightness(.40) contrast(1.05) blur(1.5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

/* ------------------------------------------------------------- LES FEUILLES */
.feuille {
  position: relative;
  background: var(--papier) var(--grain-papier) 0 0 / 260px 260px;
  color: var(--graphite);
  padding: clamp(24px, 3.6vw, 58px);
  border-radius: 1px;
  /* L'ÉPAISSEUR. Une feuille posée sur une table donne trois choses : un
     liseré clair sur la tranche du haut, une ombre courte et dense juste
     dessous, et une ombre longue et diffuse plus loin. Les trois ensemble,
     sinon l'objet flotte. */
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 -1px 0 rgba(0,0,0,.10) inset,
    0 2px 3px rgba(40,26,12,.30),
    0 16px 28px -12px rgba(40,26,12,.48),
    0 44px 80px -44px rgba(30,18,6,.70);
}
/* Le papier prend la lumière de la pièce, comme tout le reste. */
.feuille::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,252,244,.42), transparent 46%,
              rgba(70,50,26,.10));
  border-radius: inherit;
}
.feuille > * { position: relative; }

.feuille--millimetre {
  background: var(--kraft) var(--grain-papier) 0 0 / 260px 260px;
  background-position: 40% 55%;
}
.feuille--millimetre .bio-texte { color: #33302c; }
.feuille--millimetre .crayon,
.feuille--millimetre .bio-titre { color: #262320; }
/* Le quadrillage millimétré était dessiné en CSS : quatre dégradés répétés,
   d'une régularité que n'a aucun papier réel. Remplacé par le kraft
   photographié — la feuille du « double geste » se distingue désormais par sa
   MATIÈRE, pas par une trame imprimée. */

/* Le RUBAN ADHÉSIF : deux bouts, en travers des coins. Il tient la feuille. */
.scotch { position: relative; }
.scotch::after, .scotch::before {
  content: ''; position: absolute; z-index: 3;
  width: clamp(58px, 7vw, 104px); height: clamp(20px, 2.2vw, 30px);
  background:
    linear-gradient(105deg, transparent 0 4%, var(--scotch) 4% 96%, transparent 96%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.20) 0 2px, transparent 2px 7px);
  box-shadow: 0 2px 5px rgba(0,0,0,.30);
  pointer-events: none;
}
.scotch::before { top: -12px; left: -16px; rotate: -28deg; }
.scotch::after  { bottom: -12px; right: -16px; rotate: -28deg; }

/* La PUNAISE : pour ce qui est épinglé plutôt que scotché. */
.punaise::after {
  content: ''; position: absolute; z-index: 4;
  top: 10px; left: 50%; translate: -50% 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8b6b, #c0392b 62%, #7d2419);
  box-shadow: 0 4px 7px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.4) inset;
}

/* ---------------------------------------------------------------- L'ÉCRITURE */
.crayon {
  font-family: 'Architecte', cursive;
  color: var(--graphite);
}
.note {
  font-family: 'Architecte', cursive;
  font-size: clamp(16px, 1.1vw + 12px, 24px);
  line-height: 1.35;
  color: var(--plan);
}
/* Sur le BOIS, l'encre bleue des notes tombe sous 2:1 — elle disparaît.
   Toute note posée hors d'une feuille doit passer à la craie claire. */
.note--bois, .etabli .note, section > .colonne > .note {
  color: #fdf6e6;
  /* Posé sur une photo d'établi, un texte clair a besoin de son propre fond :
     l'ombre portée large fait office de voile local et le décolle du décor. */
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.85),
               0 0 34px rgba(0,0,0,.7);
}
/* Les grands titres posés hors feuille : même traitement. */
.atelier-bis .bio-titre, section > .colonne > .bio-titre,
.atelier-page .colonne > .crayon {
  color: #fdf6e6;
  text-shadow: 0 2px 3px rgba(0,0,0,.92), 0 4px 22px rgba(0,0,0,.85),
               0 0 44px rgba(0,0,0,.7);
}
.bio-titre {
  font-family: 'Architecte', cursive;
  font-size: clamp(38px, 7.4vw, 104px);
  line-height: 1.02; letter-spacing: -.01em;
  margin: 0; color: var(--graphite);
}
.bio-soustitre {
  font-family: 'Architecte', cursive;
  font-size: clamp(17px, 1.2vw + 13px, 25px);
  color: var(--graphite-2); margin: 10px 0 0;
}
.bio-texte { color: var(--graphite); max-width: 62ch; font-size: 16.5px; line-height: 1.68; }
.bio-texte strong { font-weight: 700; }
/* L'annotation en marge, comme ajoutée après coup */
.marge {
  font-family: 'Architecte', cursive; color: var(--plan);
  font-size: clamp(15px, .8vw + 12px, 20px);
  line-height: 1.3;
}

/* Le trait de crayon qui souligne, jamais parfaitement droit */
.souligne {
  position: relative; display: inline;
  background-image: linear-gradient(92deg,
      transparent 0 2%, rgba(174,204,48,.55) 2% 98%, transparent 98%);
  background-size: 100% .42em; background-position: 0 88%;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ L'ÉTAGE */
.etabli { padding-block: clamp(96px, 13vh, 170px) clamp(50px, 8vh, 100px); }
.etabli__grille {
  display: grid; gap: clamp(22px, 3vw, 46px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) { .etabli__grille { grid-template-columns: 1.08fr .92fr; } }

/* Les règles métalliques dessinées en CSS ont été retirées : un dégradé gris
   entre deux blocs ne lit pas comme de l'acier, il lit comme une barre grise.
   L'air entre les sections suffit à les séparer. */
.regle { display: none; }

/* ------------------------------------------------------------- LES CROQUIS */
.croquis-mur {
  display: grid; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  margin-top: clamp(30px, 5vh, 56px);
}
.croquis {
  position: relative;
  /* Du vrai papier, et pas toujours le même : trois feuilles posées côte à
     côte n'ont jamais rigoureusement la même teinte ni le même grain. */
  background: var(--papier) var(--grain-papier) 0 0 / 260px 260px;
  padding: 14px 14px 46px;
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.65), 0 36px 70px -40px rgba(0,0,0,.85);
  border-radius: 2px;
  /* Posés en vrac : chaque croquis a son propre angle. */
  rotate: var(--angle, -1.4deg);
  transition: rotate var(--t-moyen) var(--sortie),
              translate var(--t-moyen) var(--sortie),
              box-shadow var(--t-moyen) var(--sortie);
}
@media (hover: hover) {
  .croquis:hover { rotate: 0deg; translate: 0 -7px;
                   box-shadow: 0 26px 50px -18px rgba(0,0,0,.7), 0 60px 100px -50px rgba(0,0,0,.9); }
}
.croquis img { width: 100%; height: auto; border-radius: 1px; }
.croquis figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 13px;
  font-family: 'Architecte', cursive;
  font-size: 15px; color: var(--graphite-2);
}

/* ------------------------------------------------------------ LE CARNET */
.etabli-carnet {
  display: grid; gap: clamp(26px, 4vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) { .etabli-carnet { grid-template-columns: 1.05fr .95fr; } }
.carnet-objet {
  position: relative; justify-self: center;
  width: min(100%, 560px);
  border-radius: 12px; overflow: hidden;
  rotate: -2.2deg;
  box-shadow: 0 26px 50px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.35);
}
.carnet-objet video { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------- LA MÉTHODE */
.methode { display: grid; gap: clamp(14px, 1.8vw, 22px); counter-reset: etape;
           grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
           margin-top: clamp(28px, 4vh, 50px); }
.methode__pas {
  counter-increment: etape; position: relative;
  background: var(--kraft) var(--grain-papier) 0 0 / 260px 260px;
  border-radius: 2px; padding: clamp(18px, 2vw, 26px);
  box-shadow: 0 14px 26px -12px rgba(0,0,0,.6);
  rotate: var(--angle, .5deg);
  display: grid; gap: 8px; align-content: start;
}
.methode__pas::before {
  content: counter(etape);
  font-family: 'Architecte', cursive; font-size: 30px; line-height: 1;
  color: var(--plan); opacity: .75;
}
.methode__pas h3 { margin: 0; font-family: 'Architecte', cursive;
                   font-size: clamp(18px, 1.2vw + 14px, 23px); color: var(--graphite); }
.methode__pas p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--graphite-2); }

/* ------------------------------------------------------------- LES REPÈRES */
.releve { display: grid; margin: 0; }
.releve__ligne {
  display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 8px 22px;
  padding: 13px 0; border-bottom: 1px dashed rgba(43,43,49,.32);
  align-items: baseline;
}
.releve__ligne dt { font-family: 'Architecte', cursive; color: var(--plan); font-size: 15px; }
.releve__ligne dd { margin: 0; color: var(--graphite); }
.releve__ligne a { color: var(--graphite); text-decoration: underline;
                   text-underline-offset: 3px; text-decoration-color: rgba(174,204,48,.9);
                   min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 560px) { .releve__ligne { grid-template-columns: 1fr; gap: 2px; } }

/* Le bouton de retour, sur bois */
.bouton--atelier {
  background: var(--graphite); color: var(--papier);
  border-color: var(--graphite);
}
.bouton--atelier:hover { background: #17171b; }

/* ------------------------------------------------------- MOUVEMENT RÉDUIT */
@media (prefers-reduced-motion: reduce) {
  .croquis, .methode__pas, .regle, .carnet-objet { rotate: 0deg !important; }
  .croquis:hover { translate: none !important; }
}

/* La craie sur le bois et le papier : le jaune pâle du site s'y noie.
   On lui donne ici une teinte plus dense, qui tient sur les deux fonds. */
.atelier-page { --wax: #d8c54e; }

/* Le pied de l'atelier est posé sur un voile translucide, lui-même sur le bois :
   le gris --texte-3 n'y mesurait plus que 4,34:1, sous le seuil AA de 4,5.
   On rend le voile franc et on éclaircit l'encre. */
.atelier-page .pied { background: rgba(8,6,4,.90) !important; }
.atelier-page .pied__bas { color: #c8c3ba; }
.atelier-page .pied a:not(.pied__achat) { color: #ddd8ce; }
.atelier-page .pied a:not(.pied__achat):hover { color: var(--accent); }

/* Le menu est translucide par construction : sur la nuit du site il se pose
   très bien, mais sur le bois clair de l'atelier le brun remonte à travers et
   les intitulés tombent sous le seuil de lisibilité. Ici, il devient franc. */
.atelier-page .menu {
  background: linear-gradient(to bottom, rgba(26,18,11,.97), rgba(26,18,11,.92));
  border-bottom-color: rgba(255,255,255,.16);
}
.atelier-page .menu__lien { color: #cfc8bd; }
.atelier-page .menu__lien:hover,
.atelier-page .menu__lien[aria-current='true'] { color: #fff; }
.atelier-page .menu__titre { color: #f2ece2; }
@media (max-width: 860px) { .atelier-page .menu__nav { background: #1a120b; } }

/* Dans l'atelier, la barre suit le bois, pas la nuit. */
.atelier-page, html:has(.atelier-page) {
  --barre-piste: #2e2013;
  --barre-pouce: #6b4a2c;
  --barre-pouce-survol: #8a6238;
}

.atelier-page .menu__langue a:not([aria-current]) { color: #cfc7bb; }
.atelier-page .menu__langue a:not([aria-current]):hover { color: #fff; }

/* ==========================================================================
   VARIER LES PAPIERS
   Une seule texture répétée sur dix surfaces, ça se voit : l'œil reconnaît le
   même grain et tout retombe à plat. On alterne donc les quatre feuilles
   photographiées, et on décale leur cadrage pour que deux voisines ne montrent
   jamais la même zone du papier.
   ========================================================================== */
.croquis:nth-child(3n+2) {
  background-color: #d8d6d0; background-image: var(--grain-papier);
  background-position: 30% 60%;
}
.croquis:nth-child(3n)   { background-position: 70% 20%; }
.methode__pas:nth-child(2n) {
  background-color: var(--papier); background-image: var(--grain-papier);
  background-position: 20% 70%;
}
.methode__pas:nth-child(3n) { background-position: 80% 35%; }
.feuille:nth-of-type(2n)    { background-position: 65% 40%; }

/* Le grain des cartes : il doit se MULTIPLIER avec l'encre, pas flotter au-dessus. */
.croquis::before, .methode__pas::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255,253,246,.34), transparent 48%,
              rgba(60,42,20,.12));
}
.croquis > *, .methode__pas > * { position: relative; z-index: 1; }

/* Le relief des petites cartes : même grammaire que les feuilles — arête
   claire, ombre courte et dense, ombre longue et diffuse. */
.croquis, .methode__pas {
  box-shadow:
    0 1px 0 rgba(255,255,255,.66) inset,
    0 -1px 0 rgba(0,0,0,.10) inset,
    0 2px 3px rgba(40,26,12,.28),
    0 14px 24px -10px rgba(40,26,12,.45),
    0 36px 66px -38px rgba(30,18,6,.66);
}
.methode__pas h3 { color: var(--graphite); }
.methode__pas p  { color: var(--graphite-2); }

/* ==========================================================================
   LE PIED DE L'ATELIER — du papier noir, pas un aplat
   ========================================================================== */
.atelier-page .pied {
  background: #14120f var(--grain-papier-noir) 0 0 / 260px 260px !important;
  border-top: 1px solid rgba(255,255,255,.14);
  position: relative;
}
.atelier-page .pied::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.78));
}
.atelier-page .pied > * { position: relative; z-index: 1; }

/* ==========================================================================
   LES BOUTONS DE L'ATELIER
   Un bouton posé sur un établi n'est pas une pilule flottante : c'est une
   étiquette de papier fort, avec sa tranche et son ombre.
   ========================================================================== */
.atelier-page .bouton {
  border-radius: 3px;
  font-family: 'Architecte', cursive;
  font-size: 17px; letter-spacing: .01em;
  padding: 14px 26px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 3px rgba(40,26,12,.3),
    0 12px 22px -10px rgba(40,26,12,.55);
}
.bouton--atelier {
  background: #23212a var(--grain-papier-noir) 0 0 / 260px 260px;
  color: #f2ece0; border-color: #23212a;
}
.bouton--atelier:hover { background-color: #16151b; color: #fff; }
.atelier-page .bouton--creux {
  background: var(--papier) var(--grain-papier) 0 0 / 260px 260px;
  border-color: rgba(38,37,41,.35) !important; color: var(--graphite) !important;
}
.atelier-page .bouton--creux:hover { border-color: var(--graphite) !important; }

/* Sur téléphone, le scotch dépassait de 16 px du bord de la feuille — et la
   feuille touche presque le bord de l'écran : la page gagnait 1 px de largeur
   et glissait sous le doigt (mesuré à 360 px, 12/09/2026). */
@media (max-width: 520px) {
  .scotch::before { left: -6px; }
  .scotch::after  { right: -6px; }
}