/* ==========================================================================
   L'atelier de Julien Jimenez
   Direction artistique : brutalisme elegant.
   Noir et blanc franc, un seul accent vermillon, bordures epaisses,
   typographie condensee en capitales, aucune ombre douce.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */

:root {
  /* Palette imposee */
  --noir: #101010;
  --blanc: #ffffff;
  --vermillon: #e4321b;
  --papier: #f2f0ec;
  --gris: #5c5c5c;
  --bordure: #101010;

  /* Variantes accessibles du vermillon.
     Le vermillon pur plafonne autour de 4,3 pour 1 : il est reserve aux
     grands caracteres, aux filets et aux aplats. Ces deux variantes servent
     au texte courant. */
  --vermillon-fonce: #b32410;   /* texte sur fond clair, 6,6 pour 1 sur blanc */
  --vermillon-clair: #f5563b;   /* texte sur fond noir, 5,7 pour 1 */

  /* Gris utilisables */
  --gris-sur-noir: #c9c9c9;     /* 11,5 pour 1 sur le noir */
  --gris-bordure-claire: #d8d4cc;

  /* Espacements */
  --pas-1: 0.25rem;
  --pas-2: 0.5rem;
  --pas-3: 0.75rem;
  --pas-4: 1rem;
  --pas-5: 1.5rem;
  --pas-6: 2rem;
  --pas-7: 3rem;
  --pas-8: 4rem;
  --pas-9: 6rem;

  /* Rayons : le brutalisme n'en veut presque pas */
  --rayon-0: 0;
  --rayon-1: 2px;
  --rayon-2: 3px;

  /* Traits */
  --trait-fin: 2px;
  --trait-epais: 3px;

  /* Ombres dures uniquement, jamais de flou */
  --ombre-dure: 6px 6px 0 var(--noir);
  --ombre-dure-courte: 4px 4px 0 var(--noir);
  --ombre-dure-accent: 6px 6px 0 var(--vermillon);
  --ombre-dure-claire: 6px 6px 0 var(--blanc);

  /* Typographie */
  --police-titre: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Echelle fluide */
  --t-h1: clamp(2.75rem, 9vw, 6.5rem);
  --t-h2: clamp(1.9rem, 5vw, 3.4rem);
  --t-h3: clamp(1.15rem, 2.2vw, 1.45rem);
  --t-chapo: clamp(1.05rem, 1.9vw, 1.3rem);
  --t-texte: clamp(1rem, 1.15vw, 1.075rem);
  --t-petit: 0.85rem;

  /* Mesures */
  --largeur-max: 1240px;
  --duree: 180ms;
  --courbe: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Remise a zero et bases
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--police-texte);
  font-size: var(--t-texte);
  line-height: 1.68;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

p {
  margin: 0 0 var(--pas-4);
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

strong {
  font-weight: 700;
}

:focus-visible {
  outline: var(--trait-epais) solid var(--vermillon);
  outline-offset: 3px;
}

::selection {
  background: var(--vermillon-fonce);
  color: var(--blanc);
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--vermillon-fonce);
  color: var(--blanc);
  padding: var(--pas-3) var(--pas-5);
  font-family: var(--police-titre);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-decoration: none;
  border: var(--trait-epais) solid var(--noir);
}

.lien-evitement:focus {
  left: var(--pas-4);
  top: var(--pas-4);
}

.conteneur {
  width: min(100% - 2.5rem, var(--largeur-max));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3. Jauge de progression et en-tete
   -------------------------------------------------------------------------- */

.jauge {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  z-index: 120;
  pointer-events: none;
}

.jauge__barre {
  display: block;
  height: 100%;
  width: 0;
  background: var(--vermillon);
}

.entete {
  position: sticky;
  top: 0;
  z-index: 110;
  background: var(--blanc);
  border-bottom: var(--trait-epais) solid var(--bordure);
}

.entete.est-reduite {
  background: var(--noir);
  color: var(--blanc);
  border-bottom-color: var(--vermillon);
}

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-4);
  min-height: 76px;
  padding-block: var(--pas-3);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--pas-3);
  text-decoration: none;
  color: inherit;
}

.marque__sigle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--vermillon);
  color: var(--blanc);
  border: var(--trait-fin) solid var(--noir);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.entete.est-reduite .marque__sigle {
  border-color: var(--blanc);
}

.marque__texte {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.marque__texte strong {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.marque__texte span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gris);
  white-space: nowrap;
}

.entete.est-reduite .marque__texte span {
  color: var(--gris-sur-noir);
}

/* Navigation */

.navigation ul {
  display: flex;
  align-items: center;
  gap: var(--pas-1);
}

.navigation a {
  display: inline-block;
  padding: var(--pas-2) var(--pas-3);
  font-family: var(--police-titre);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-decoration: none;
  border: var(--trait-fin) solid transparent;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe),
    border-color var(--duree) var(--courbe);
}

.navigation a:hover {
  border-color: var(--bordure);
  background: var(--vermillon-fonce);
  color: var(--blanc);
}

.entete.est-reduite .navigation a:hover {
  border-color: var(--blanc);
}

.navigation a.est-active {
  border-color: currentColor;
}

.navigation__cta {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir) !important;
}

.entete.est-reduite .navigation__cta {
  background: var(--vermillon-fonce);
  color: var(--blanc);
  border-color: var(--blanc) !important;
}

.navigation__cta:hover {
  background: var(--vermillon-fonce);
  color: var(--blanc);
}

.burger {
  display: none;
  align-items: center;
  gap: var(--pas-2);
  background: var(--noir);
  color: var(--blanc);
  border: var(--trait-fin) solid var(--noir);
  padding: var(--pas-2) var(--pas-4);
  font-family: var(--police-titre);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  cursor: pointer;
}

.entete.est-reduite .burger {
  border-color: var(--blanc);
}

.burger__traits {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 18px;
}

.burger__traits i {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}

.burger[aria-expanded="true"] .burger__traits i:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__traits i:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__traits i:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   4. Blocs de section, titres communs
   -------------------------------------------------------------------------- */

.bloc {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-bottom: var(--trait-epais) solid var(--bordure);
  position: relative;
}

.bloc--blanc {
  background: var(--blanc);
  color: var(--noir);
}

.bloc--papier {
  background: var(--papier);
  color: var(--noir);
}

.bloc--sombre {
  background: var(--noir);
  color: var(--blanc);
  border-bottom-color: var(--vermillon);
}

.bloc--tete {
  background: var(--blanc);
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.numero-section {
  font-family: var(--police-mono);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  color: var(--vermillon-fonce);
  margin: 0 0 var(--pas-2);
  font-weight: 700;
}

.numero-section--clair {
  color: var(--vermillon-clair);
}

.titre-section {
  font-size: var(--t-h2);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 var(--pas-5);
  max-width: 22ch;
  position: relative;
  padding-bottom: var(--pas-4);
}

.titre-section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: var(--trait-epais);
  background: var(--vermillon);
}

.titre-section--clair {
  color: var(--blanc);
}

.intro-section {
  max-width: 62ch;
  font-size: var(--t-chapo);
  color: var(--gris);
  margin-bottom: var(--pas-7);
}

.intro-section--clair {
  color: var(--gris-sur-noir);
}

/* --------------------------------------------------------------------------
   5. En-tete d'atelier
   -------------------------------------------------------------------------- */

.tete {
  display: grid;
  gap: var(--pas-7);
  align-items: start;
}

.surtitre {
  font-family: var(--police-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--vermillon-fonce);
  font-weight: 700;
  margin-bottom: var(--pas-4);
  padding-left: var(--pas-4);
  border-left: var(--trait-epais) solid var(--vermillon);
}

h1 {
  font-size: var(--t-h1);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--pas-5);
}

h1 .accentue {
  color: var(--vermillon);
  display: inline-block;
}

.chapo {
  font-size: var(--t-chapo);
  max-width: 58ch;
  border-left: var(--trait-epais) solid var(--noir);
  padding-left: var(--pas-5);
  margin-bottom: var(--pas-5);
}

.tete__complement {
  max-width: 58ch;
  color: var(--gris);
  margin-bottom: var(--pas-6);
}

.tete__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-4);
}

.bouton {
  display: inline-block;
  padding: var(--pas-4) var(--pas-6);
  font-family: var(--police-titre);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-decoration: none;
  border: var(--trait-epais) solid var(--noir);
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe),
    background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}

.bouton--plein {
  background: var(--vermillon-fonce);
  color: var(--blanc);
  box-shadow: var(--ombre-dure);
}

.bouton--plein:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--noir);
}

.bouton--ligne {
  background: var(--blanc);
  color: var(--noir);
  box-shadow: var(--ombre-dure-accent);
}

.bouton--ligne:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--vermillon);
}

/* Cadre photo */

.cadre {
  margin: 0;
  border: var(--trait-epais) solid var(--noir);
  background: var(--noir);
  box-shadow: var(--ombre-dure-accent);
  max-width: 460px;
  justify-self: start;
}

.cadre img {
  width: 100%;
  filter: grayscale(100%) contrast(1.08);
  transition: filter 300ms var(--courbe);
}

.cadre:hover img {
  filter: grayscale(0%) contrast(1);
}

.cadre__legende {
  padding: var(--pas-4);
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--police-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  border-top: var(--trait-fin) solid var(--vermillon);
}

.cadre__ref {
  display: inline-block;
  color: var(--vermillon-clair);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: var(--pas-2);
}

/* Fiches d'atelier */

.fiches-atelier {
  display: grid;
  gap: 0;
  margin-top: var(--pas-8);
  border: var(--trait-epais) solid var(--noir);
}

.fiche-atelier {
  padding: var(--pas-6);
  background: var(--blanc);
  color: var(--noir);
  border-bottom: var(--trait-fin) solid var(--noir);
}

.fiche-atelier:last-child {
  border-bottom: 0;
}

.fiche-atelier__cle {
  display: block;
  font-family: var(--police-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--vermillon-fonce);
  font-weight: 700;
  margin-bottom: var(--pas-2);
}

.fiche-atelier__valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--pas-3);
}

.fiche-atelier p {
  color: var(--gris);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   6. L'etabli
   -------------------------------------------------------------------------- */

.grille-etabli {
  display: grid;
  gap: var(--pas-6);
}

.carte-etabli {
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-epais) solid var(--noir);
  padding: var(--pas-6);
  position: relative;
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}

.carte-etabli:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--ombre-dure-accent);
}

.carte-etabli h3 {
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--pas-4);
  padding-bottom: var(--pas-3);
  border-bottom: var(--trait-fin) solid var(--vermillon);
}

.carte-etabli p {
  color: var(--gris);
}

.encart-regle {
  margin-top: var(--pas-7);
  border: var(--trait-epais) solid var(--noir);
  background: var(--vermillon-fonce);
  color: var(--blanc);
  padding: var(--pas-6);
  box-shadow: var(--ombre-dure);
}

.encart-regle__cle {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 700;
  margin-bottom: var(--pas-3);
  color: var(--blanc);
}

.encart-regle__texte {
  font-family: var(--police-titre);
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--blanc);
  max-width: 40ch;
}

/* --------------------------------------------------------------------------
   7. Grille d'outils
   -------------------------------------------------------------------------- */

.grille-outils {
  display: grid;
  gap: var(--pas-5);
}

.carte-outil {
  position: relative;
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-epais) solid var(--blanc);
  padding: var(--pas-6);
  padding-top: var(--pas-7);
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe),
    border-color var(--duree) var(--courbe);
}

.carte-outil:hover,
.carte-outil:focus-within {
  transform: translate(-6px, -6px);
  border-color: var(--vermillon);
  box-shadow: 6px 6px 0 var(--vermillon);
}

.carte-outil__num {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--police-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 4px 10px;
}

.carte-outil h3 {
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--noir);
  margin-bottom: var(--pas-1);
}

.carte-outil__role {
  font-family: var(--police-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--vermillon-fonce);
  margin-bottom: var(--pas-4);
  padding-bottom: var(--pas-3);
  border-bottom: var(--trait-fin) solid var(--noir);
}

.carte-outil p {
  color: var(--gris);
  font-size: 0.95rem;
}

.note-sombre {
  margin-top: var(--pas-7);
  border-left: var(--trait-epais) solid var(--vermillon);
  padding-left: var(--pas-5);
  color: var(--gris-sur-noir);
  max-width: 78ch;
  font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   8. Semaine type, onglets
   -------------------------------------------------------------------------- */

.semaine {
  border: var(--trait-epais) solid var(--noir);
  background: var(--blanc);
}

.semaine__onglets {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: var(--trait-epais) solid var(--noir);
}

.onglet {
  appearance: none;
  background: var(--blanc);
  color: var(--noir);
  border: 0;
  border-bottom: var(--trait-fin) solid var(--noir);
  padding: var(--pas-4) var(--pas-5);
  text-align: left;
  cursor: pointer;
  font-family: var(--police-titre);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}

.onglet:last-child {
  border-bottom: 0;
}

.onglet__jour {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.onglet__theme {
  font-family: var(--police-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gris);
}

.onglet:hover {
  background: var(--papier);
}

.onglet.est-actif {
  background: var(--noir);
  color: var(--blanc);
}

.onglet.est-actif .onglet__theme {
  color: var(--vermillon-clair);
}

.semaine__corps {
  display: grid;
}

.semaine__panneaux {
  padding: var(--pas-6);
}

.panneau {
  animation: apparition-franche 220ms var(--courbe);
}

.panneau[hidden] {
  display: none;
}

.panneau h3 {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--pas-2);
}

.panneau__heure {
  font-family: var(--police-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--vermillon-fonce);
  font-weight: 700;
  margin-bottom: var(--pas-5);
  padding-bottom: var(--pas-3);
  border-bottom: var(--trait-fin) solid var(--noir);
}

.panneau p {
  color: var(--gris);
}

.panneau p.panneau__heure {
  color: var(--vermillon-fonce);
}

.visuel-semaine {
  margin: 0;
  border-top: var(--trait-epais) solid var(--noir);
}

.visuel-semaine img {
  width: 100%;
  filter: grayscale(100%) contrast(1.05);
}

.visuel-semaine figcaption,
.visuel-liens figcaption {
  background: var(--noir);
  color: var(--blanc);
  padding: var(--pas-4);
  font-family: var(--police-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  border-top: var(--trait-fin) solid var(--vermillon);
}

@keyframes apparition-franche {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   9. Etapes de fabrication
   -------------------------------------------------------------------------- */

.etapes {
  counter-reset: etape;
  border-top: var(--trait-epais) solid var(--noir);
}

.etape {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pas-3);
  padding: var(--pas-6) 0;
  border-bottom: var(--trait-fin) solid var(--noir);
  transition: background var(--duree) var(--courbe), padding-left var(--duree) var(--courbe);
}

.etape:hover {
  background: var(--papier);
  padding-left: var(--pas-4);
}

.etape__num {
  font-family: var(--police-titre);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 0.9;
  color: var(--vermillon);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.etape__corps h3 {
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--pas-3);
}

.etape__corps p {
  color: var(--gris);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   10. Coulisses d'un audit
   -------------------------------------------------------------------------- */

.grille-coulisses {
  display: grid;
  gap: var(--pas-5);
}

.carte-coulisse {
  background: var(--papier);
  color: var(--noir);
  border: var(--trait-epais) solid var(--papier);
  padding: var(--pas-6);
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}

.carte-coulisse:hover {
  transform: translate(-5px, -5px);
  box-shadow: 5px 5px 0 var(--vermillon);
}

.carte-coulisse h3 {
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--noir);
  margin-bottom: var(--pas-3);
  padding-bottom: var(--pas-3);
  border-bottom: var(--trait-fin) solid var(--vermillon);
}

.carte-coulisse p {
  color: var(--gris);
  font-size: 0.97rem;
}

.bandeau-preuve {
  margin-top: var(--pas-7);
  border: var(--trait-epais) solid var(--blanc);
  padding: var(--pas-6);
  background: var(--noir);
  color: var(--blanc);
}

.bandeau-preuve p {
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   11. Campagne de liens
   -------------------------------------------------------------------------- */

.liens-corps {
  display: grid;
  gap: var(--pas-7);
  align-items: start;
}

.liens-etapes {
  border-top: var(--trait-epais) solid var(--noir);
}

.liens-etape {
  padding: var(--pas-5) 0;
  border-bottom: var(--trait-fin) solid var(--noir);
  position: relative;
  padding-left: 0;
  transition: padding-left var(--duree) var(--courbe);
}

.liens-etape:hover {
  padding-left: var(--pas-4);
}

.liens-etape__cle {
  display: inline-block;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--police-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  padding: 3px 10px;
  margin-bottom: var(--pas-3);
}

.liens-etape h3 {
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--pas-3);
}

.liens-etape p {
  color: var(--gris);
  max-width: 62ch;
}

.visuel-liens {
  margin: 0;
  border: var(--trait-epais) solid var(--noir);
  box-shadow: var(--ombre-dure-accent);
  background: var(--noir);
}

.visuel-liens img {
  width: 100%;
  filter: grayscale(100%) contrast(1.06);
}

/* --------------------------------------------------------------------------
   12. La corbeille
   -------------------------------------------------------------------------- */

.grille-corbeille {
  display: grid;
  gap: var(--pas-5);
}

.carte-corbeille {
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-epais) solid var(--noir);
  padding: var(--pas-6);
  position: relative;
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}

.carte-corbeille:hover {
  transform: translate(-4px, 4px);
  box-shadow: 4px -4px 0 var(--noir);
}

/* Selecteur porte a deux classes pour passer devant .carte-corbeille p */
.carte-corbeille .carte-corbeille__etiquette {
  display: inline-block;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--police-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  padding: 3px 10px;
  margin-bottom: var(--pas-4);
}

.carte-corbeille__etiquette--garde {
  background: var(--vermillon-fonce);
  color: var(--blanc);
}

.carte-corbeille h3 {
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--pas-3);
  text-decoration: line-through;
  text-decoration-color: var(--vermillon);
  text-decoration-thickness: 3px;
}

.carte-corbeille--garde {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--vermillon);
}

.carte-corbeille--garde h3 {
  color: var(--blanc);
  text-decoration: none;
}

.carte-corbeille p {
  color: var(--gris);
  font-size: 0.97rem;
}

.carte-corbeille--garde p {
  color: var(--gris-sur-noir);
}

.carte-corbeille--garde .carte-corbeille__etiquette--garde {
  color: var(--blanc);
}

/* --------------------------------------------------------------------------
   13. Compteurs
   -------------------------------------------------------------------------- */

.bloc--chiffres {
  background: var(--noir);
}

.compteurs {
  display: grid;
  gap: 0;
  border: var(--trait-epais) solid var(--blanc);
}

.compteur {
  padding: var(--pas-6);
  border-bottom: var(--trait-fin) solid var(--blanc);
  text-align: left;
}

.compteur:last-child {
  border-bottom: 0;
}

.compteur__valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(2.4rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--vermillon-clair);
  font-variant-numeric: tabular-nums;
}

.compteur__libelle {
  display: block;
  margin-top: var(--pas-3);
  font-family: var(--police-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blanc);
  line-height: 1.5;
}

.chiffres-notes {
  display: grid;
  gap: var(--pas-4);
  margin-top: var(--pas-6);
}

.chiffres-notes p {
  color: var(--gris-sur-noir);
  margin: 0;
  padding-left: var(--pas-4);
  border-left: var(--trait-fin) solid var(--vermillon);
  font-size: 0.97rem;
}

.chiffres-notes strong {
  color: var(--blanc);
  font-family: var(--police-titre);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   14. Accordeon
   -------------------------------------------------------------------------- */

.accordeon {
  border-top: var(--trait-epais) solid var(--noir);
  border-bottom: var(--trait-epais) solid var(--noir);
}

.accordeon__item {
  border-bottom: var(--trait-fin) solid var(--noir);
}

.accordeon__item:last-child {
  border-bottom: 0;
}

.accordeon h3 {
  margin: 0;
}

.accordeon__declencheur {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-4);
  background: transparent;
  color: var(--noir);
  border: 0;
  padding: var(--pas-5) var(--pas-3) var(--pas-5) 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--police-titre);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  transition: color var(--duree) var(--courbe), padding-left var(--duree) var(--courbe);
}

.accordeon__declencheur:hover {
  color: var(--vermillon-fonce);
  padding-left: var(--pas-3);
}

.accordeon__declencheur[aria-expanded="true"] {
  color: var(--vermillon-fonce);
}

.accordeon__signe {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: var(--trait-fin) solid var(--noir);
}

.accordeon__signe::before,
.accordeon__signe::after {
  content: "";
  position: absolute;
  background: var(--noir);
}

.accordeon__signe::before {
  top: 50%;
  left: 5px;
  right: 5px;
  height: 2px;
  transform: translateY(-1px);
}

.accordeon__signe::after {
  left: 50%;
  top: 5px;
  bottom: 5px;
  width: 2px;
  transform: translateX(-1px);
  transition: opacity var(--duree) var(--courbe);
}

.accordeon__declencheur[aria-expanded="true"] .accordeon__signe {
  background: var(--vermillon);
  border-color: var(--vermillon);
}

.accordeon__declencheur[aria-expanded="true"] .accordeon__signe::before {
  background: var(--blanc);
}

.accordeon__declencheur[aria-expanded="true"] .accordeon__signe::after {
  opacity: 0;
}

.accordeon__reponse {
  padding: 0 var(--pas-5) var(--pas-6) var(--pas-5);
  border-left: var(--trait-epais) solid var(--vermillon);
  margin-bottom: var(--pas-4);
}

.accordeon__reponse[hidden] {
  display: none;
}

.accordeon__reponse p {
  color: var(--gris);
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */

.bloc--contact {
  background: var(--noir);
  color: var(--blanc);
  border-bottom-color: var(--vermillon);
}

.contact {
  display: grid;
  gap: var(--pas-7);
  align-items: start;
}

.contact__accroche {
  font-size: var(--t-chapo);
  color: var(--gris-sur-noir);
  max-width: 58ch;
  border-left: var(--trait-epais) solid var(--vermillon);
  padding-left: var(--pas-5);
  margin-bottom: var(--pas-6);
}

.contact__adresse {
  margin-bottom: var(--pas-6);
}

.contact__adresse a {
  display: inline-block;
  font-family: var(--police-titre);
  font-size: clamp(1.25rem, 4vw, 2.4rem);
  text-transform: lowercase;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--blanc);
  text-decoration: none;
  border: var(--trait-epais) solid var(--blanc);
  padding: var(--pas-4) var(--pas-5);
  word-break: break-word;
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe),
    background var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.contact__adresse a:hover {
  background: var(--vermillon);
  border-color: var(--vermillon);
  color: var(--blanc);
  transform: translate(-4px, -4px);
  box-shadow: var(--ombre-dure-claire);
}

.contact__infos {
  display: grid;
  gap: 0;
  border-top: var(--trait-fin) solid var(--blanc);
}

.contact__infos li {
  display: grid;
  gap: var(--pas-1);
  padding: var(--pas-4) 0;
  border-bottom: var(--trait-fin) solid var(--blanc);
}

.contact__infos span {
  font-family: var(--police-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--vermillon-clair);
  font-weight: 700;
}

.contact__infos strong {
  color: var(--blanc);
  font-size: 1rem;
}

.contact__portrait {
  margin: 0;
  border: var(--trait-epais) solid var(--blanc);
  background: var(--noir);
  max-width: 360px;
  justify-self: start;
}

.contact__portrait img {
  width: 100%;
  filter: grayscale(100%) contrast(1.08);
}

.contact__portrait figcaption {
  padding: var(--pas-4);
  font-family: var(--police-mono);
  font-size: 0.74rem;
  color: var(--blanc);
  border-top: var(--trait-fin) solid var(--vermillon);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */

.pied {
  background: var(--noir);
  color: var(--blanc);
  padding-block: var(--pas-8) var(--pas-6);
  border-top: var(--trait-epais) solid var(--vermillon);
}

.pied__grille {
  display: grid;
  gap: var(--pas-6);
}

.pied__colonne {
  min-width: 0;
}

.marque__sigle--pied {
  margin-bottom: var(--pas-4);
}

.pied__nom {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: var(--pas-3);
  color: var(--blanc);
}

.pied__desc {
  color: var(--gris-sur-noir);
  font-size: 0.94rem;
  max-width: 42ch;
}

.pied__titre {
  font-family: var(--police-titre);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--blanc);
  margin-bottom: var(--pas-4);
  padding-bottom: var(--pas-3);
  border-bottom: var(--trait-fin) solid var(--vermillon);
}

.pied__liste {
  display: grid;
  gap: var(--pas-2);
}

.pied__liste a {
  color: var(--blanc);
  text-decoration: none;
  font-size: 0.94rem;
  border-bottom: 1px solid transparent;
  transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
  word-break: break-word;
}

.pied__liste a:hover {
  color: var(--vermillon-clair);
  border-bottom-color: var(--vermillon-clair);
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pas-4);
  margin-top: var(--pas-7);
  padding-top: var(--pas-5);
  border-top: var(--trait-fin) solid var(--blanc);
  font-family: var(--police-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blanc);
}

.pied__haut {
  color: var(--blanc);
  text-decoration: none;
  border-bottom: var(--trait-fin) solid var(--vermillon);
  padding-bottom: 2px;
  transition: color var(--duree) var(--courbe);
}

.pied__haut:hover {
  color: var(--vermillon-clair);
}

/* --------------------------------------------------------------------------
   17. Page 404
   -------------------------------------------------------------------------- */

.erreur {
  min-height: 72vh;
  display: grid;
  align-content: center;
  padding-block: var(--pas-9);
}

.erreur__code {
  font-family: var(--police-titre);
  font-size: clamp(5rem, 22vw, 13rem);
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--vermillon);
  margin-bottom: var(--pas-5);
}

.erreur h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin-bottom: var(--pas-5);
}

.erreur p {
  max-width: 56ch;
  color: var(--gris);
  margin-bottom: var(--pas-6);
}

.erreur__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-4);
}

/* --------------------------------------------------------------------------
   18. Revelation au defilement
   -------------------------------------------------------------------------- */

.revelation {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 420ms var(--courbe), transform 420ms var(--courbe);
}

.revelation.est-visible {
  opacity: 1;
  transform: none;
}

.revelation--gauche {
  transform: translateX(-26px);
}

.revelation--gauche.est-visible {
  transform: none;
}

.corps-verrouille {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   19. Points de rupture, 640 pixels
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .burger {
    display: inline-flex;
  }

  .navigation {
    position: fixed;
    inset: 76px 0 auto 0;
    background: var(--noir);
    border-bottom: var(--trait-epais) solid var(--vermillon);
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms var(--courbe);
  }

  .navigation.est-ouverte {
    max-height: 82vh;
    overflow-y: auto;
  }

  .navigation ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--pas-3);
  }

  .navigation a {
    color: var(--blanc);
    padding: var(--pas-4);
    border-bottom: var(--trait-fin) solid var(--gris);
    font-size: 1rem;
  }

  .navigation a:hover {
    border-color: var(--vermillon);
  }

  .navigation a.est-active {
    color: var(--vermillon-clair);
  }

  .navigation__cta {
    margin-top: var(--pas-3);
    text-align: center;
    background: var(--vermillon-fonce);
    border-color: var(--vermillon-fonce) !important;
  }
}

@media (min-width: 640px) {
  .conteneur {
    width: min(100% - 3.5rem, var(--largeur-max));
  }

  .fiches-atelier {
    grid-template-columns: repeat(2, 1fr);
  }

  .fiche-atelier {
    border-bottom: var(--trait-fin) solid var(--noir);
    border-right: var(--trait-fin) solid var(--noir);
  }

  .fiche-atelier:nth-child(2n) {
    border-right: 0;
  }

  .fiche-atelier:last-child {
    border-bottom: 0;
    grid-column: 1 / -1;
    border-right: 0;
  }

  .grille-etabli {
    grid-template-columns: repeat(2, 1fr);
  }

  .grille-outils {
    grid-template-columns: repeat(2, 1fr);
  }

  .grille-coulisses {
    grid-template-columns: repeat(2, 1fr);
  }

  .grille-corbeille {
    grid-template-columns: repeat(2, 1fr);
  }

  .compteurs {
    grid-template-columns: repeat(2, 1fr);
  }

  .compteur {
    border-right: var(--trait-fin) solid var(--blanc);
  }

  .compteur:nth-child(2n) {
    border-right: 0;
  }

  .compteur:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .etape {
    grid-template-columns: 96px 1fr;
    gap: var(--pas-5);
    align-items: start;
  }

  .chiffres-notes {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact__infos li {
    grid-template-columns: 160px 1fr;
    align-items: baseline;
    gap: var(--pas-4);
  }

  .pied__grille {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pas-7) var(--pas-6);
  }
}

/* --------------------------------------------------------------------------
   20. Point de rupture 900 pixels
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  html {
    scroll-padding-top: 100px;
  }

  .tete {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
    gap: var(--pas-8);
    align-items: start;
  }

  .cadre {
    justify-self: end;
    margin-top: var(--pas-6);
  }

  .fiches-atelier {
    grid-template-columns: repeat(3, 1fr);
  }

  .fiche-atelier,
  .fiche-atelier:last-child {
    border-bottom: 0;
    border-right: var(--trait-fin) solid var(--noir);
    grid-column: auto;
  }

  .fiche-atelier:last-child {
    border-right: 0;
  }

  .fiche-atelier:nth-child(2n) {
    border-right: var(--trait-fin) solid var(--noir);
  }

  .semaine__onglets {
    grid-template-columns: repeat(5, 1fr);
  }

  .onglet {
    border-bottom: 0;
    border-right: var(--trait-fin) solid var(--noir);
    text-align: center;
    align-items: center;
  }

  .onglet:last-child {
    border-right: 0;
  }

  .semaine__corps {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .semaine__panneaux {
    padding: var(--pas-7);
  }

  .visuel-semaine {
    border-top: 0;
    border-left: var(--trait-epais) solid var(--noir);
    display: grid;
    grid-template-rows: 1fr auto;
  }

  .visuel-semaine img {
    height: 100%;
    object-fit: cover;
  }

  .liens-corps {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: var(--pas-8);
  }

  .visuel-liens {
    position: sticky;
    top: 120px;
  }

  .grille-outils {
    grid-template-columns: repeat(3, 1fr);
  }

  .grille-coulisses {
    grid-template-columns: repeat(3, 1fr);
  }

  .grille-corbeille {
    grid-template-columns: repeat(3, 1fr);
  }

  .compteurs {
    grid-template-columns: repeat(3, 1fr);
  }

  .compteur:nth-child(2n) {
    border-right: var(--trait-fin) solid var(--blanc);
  }

  .compteur:nth-child(3n) {
    border-right: 0;
  }

  .compteur:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  .contact {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: var(--pas-8);
  }

  .contact__portrait {
    justify-self: end;
  }

  .chiffres-notes {
    grid-template-columns: repeat(4, 1fr);
  }

  .pied__grille {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  }
}

/* --------------------------------------------------------------------------
   21. Point de rupture 1200 pixels
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .bloc {
    padding-block: clamp(5rem, 7vw, 7.5rem);
  }

  .titre-section {
    font-size: clamp(2.6rem, 4vw, 3.6rem);
  }

  .grille-etabli {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pas-6);
  }

  .grille-outils {
    grid-template-columns: repeat(5, 1fr);
  }

  .carte-outil {
    padding: var(--pas-5);
    padding-top: var(--pas-6);
  }

  .carte-outil h3 {
    font-size: 1.15rem;
  }

  .etape {
    grid-template-columns: 140px 1fr;
  }

  .etape__corps h3 {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   22. Impression
   -------------------------------------------------------------------------- */

@media print {
  .entete,
  .jauge,
  .lien-evitement,
  .burger,
  .navigation {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .bloc {
    padding-block: 1.5rem;
    border-bottom: 1px solid #000000;
  }

  .bloc--sombre,
  .bloc--contact,
  .pied {
    background: #ffffff;
    color: #000000;
  }

  .panneau[hidden],
  .accordeon__reponse[hidden] {
    display: block !important;
  }
}

/* --------------------------------------------------------------------------
   23. Mouvement reduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .revelation {
    opacity: 1;
    transform: none;
  }

  .carte-outil:hover,
  .carte-etabli:hover,
  .carte-coulisse:hover,
  .carte-corbeille:hover,
  .bouton:hover,
  .contact__adresse a:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   24. Bloc de maillage du pied de page
   Ajoute en fin de feuille, avec les variables du site.
   Contraste : blanc sur noir, 18,9 pour 1. Survol vermillon clair, 5,7 pour 1.
   -------------------------------------------------------------------------- */

.pied__reseau {
  position: relative;
}

.pied__reseau .pied__titre {
  color: var(--blanc);
  border-bottom-color: var(--vermillon);
}

.pied__liste--reseau {
  display: grid;
  gap: var(--pas-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pied__liste--reseau li {
  border-left: var(--trait-epais) solid var(--vermillon);
}

.pied__liste--reseau a {
  display: block;
  padding: var(--pas-3) var(--pas-4);
  background: transparent;
  color: var(--blanc);
  font-family: var(--police-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  border-bottom: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe),
    transform var(--duree) var(--courbe);
}

.pied__liste--reseau a:hover {
  background: var(--vermillon-fonce);
  color: var(--blanc);
  transform: translateX(4px);
  border-bottom-color: transparent;
}

.pied__liste--reseau a:focus-visible {
  outline: var(--trait-epais) solid var(--vermillon-clair);
  outline-offset: 2px;
  background: transparent;
  color: var(--blanc);
}

@media (max-width: 639px) {
  .pied__reseau {
    margin-top: var(--pas-2);
  }

  .pied__liste--reseau a {
    padding: var(--pas-3);
    font-size: 0.82rem;
  }

  .pied__liste--reseau a:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pied__liste--reseau a:hover {
    transform: none;
  }
}