/* =========================================================
   Savoir-faire de Julien Jimenez
   Direction artistique : artisanale et organique
   Beige, taupe, accent vert olive, papier discret
   ========================================================= */

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

:root {
  /* Palette imposée */
  --taupe: #7A6E5D;
  --taupe-fonce: #5F5648;
  --beige: #EDE6D9;
  --beige-clair: #F7F3EA;
  --olive: #6B7B3A;
  --olive-fonce: #4A5626;
  --olive-clair: #A8BC63;
  --encre: #2E2A24;
  --filet: #D9CFBD;

  /* Rôles */
  --fond: var(--beige-clair);
  --fond-alterne: var(--beige);
  --fond-sombre: var(--encre);
  --texte: var(--encre);
  --texte-doux: var(--taupe-fonce);
  --texte-clair: #F4EFE4;
  --texte-clair-doux: #DCD3C1;
  --accent: var(--olive-fonce);
  --accent-vif: var(--olive);

  /* Typographie */
  --police-titre: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --police-texte: "Segoe UI", Candara, "Gill Sans", "Gill Sans MT", Optima, "Trebuchet MS", system-ui, sans-serif;
  --taille-h1: clamp(2.1rem, 1.3rem + 3.2vw, 3.75rem);
  --taille-h2: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  --taille-h3: clamp(1.18rem, 1.02rem + 0.62vw, 1.5rem);
  --taille-h4: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
  --taille-texte: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --interligne: 1.72;

  /* Espacements */
  --esp-3xs: 0.25rem;
  --esp-2xs: 0.5rem;
  --esp-xs: 0.75rem;
  --esp-s: 1rem;
  --esp-m: 1.5rem;
  --esp-l: 2.25rem;
  --esp-xl: 3.25rem;
  --esp-2xl: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --largeur: 1180px;
  --largeur-etroite: 820px;

  /* Rayons organiques */
  --rayon-s: 10px;
  --rayon-m: 18px;
  --rayon-l: 26px;
  --rayon-organique: 26px 22px 30px 20px;
  --rayon-rond: 999px;

  /* Ombres douces */
  --ombre-s: 0 1px 2px rgba(46, 42, 36, 0.06), 0 2px 6px rgba(46, 42, 36, 0.05);
  --ombre-m: 0 2px 4px rgba(46, 42, 36, 0.06), 0 10px 24px rgba(46, 42, 36, 0.08);
  --ombre-l: 0 4px 10px rgba(46, 42, 36, 0.07), 0 22px 48px rgba(46, 42, 36, 0.12);

  /* Transitions */
  --duree: 240ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Texture papier */
  --papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- 2. Remise à plat ---------- */

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

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

body {
  margin: 0;
  background-color: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: var(--interligne);
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--papier);
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

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

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  color: var(--texte);
  line-height: 1.2;
  margin: 0 0 var(--esp-s);
  letter-spacing: 0.005em;
}

h1 { font-size: var(--taille-h1); letter-spacing: -0.012em; }
h2 { font-size: var(--taille-h2); letter-spacing: -0.008em; }
h3 { font-size: var(--taille-h3); }
h4 { font-size: var(--taille-h4); font-family: var(--police-texte); font-weight: 700; }

p { margin: 0 0 var(--esp-s); }
p:last-child { margin-bottom: 0; }

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--encre); }

button { font: inherit; color: inherit; }

::selection { background: var(--olive-clair); color: var(--encre); }

:focus-visible {
  outline: 3px solid var(--olive-fonce);
  outline-offset: 3px;
  border-radius: 4px;
}

.section--sombre :focus-visible,
.pied :focus-visible { outline-color: var(--olive-clair); }

/* ---------- 3. Utilitaires ---------- */

.conteneur {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.conteneur--etroit { width: min(100% - 2.5rem, var(--largeur-etroite)); }

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--olive-fonce);
  color: #FFFFFF;
  padding: var(--esp-xs) var(--esp-m);
  border-radius: 0 0 var(--rayon-m) 0;
  z-index: 60;
  font-weight: 600;
  text-decoration: none;
}

.lien-evitement:focus {
  left: 0;
  color: #FFFFFF;
}

.surtitre {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--olive-fonce);
  margin-bottom: var(--esp-2xs);
  display: flex;
  align-items: center;
  gap: var(--esp-2xs);
}

.surtitre::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--olive);
  border-radius: var(--rayon-rond);
  display: inline-block;
}

.surtitre--clair { color: var(--olive-clair); }
.surtitre--clair::before { background: var(--olive-clair); }

.intro-section {
  max-width: 62ch;
  color: var(--texte-doux);
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);
  margin-bottom: var(--esp-l);
}

.intro-section--clair { color: var(--texte-clair-doux); }

.titre-secondaire {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  margin-top: var(--esp-xl);
}

.titre-secondaire--sobre { color: var(--taupe-fonce); font-family: var(--police-texte); font-weight: 600; }

.deux-colonnes {
  display: grid;
  gap: var(--esp-m);
  margin-bottom: var(--esp-l);
  color: var(--texte-doux);
}

.deux-colonnes p { max-width: 62ch; }
.deux-colonnes--serre { margin-top: var(--esp-xl); margin-bottom: 0; }

/* ---------- 4. Sections ---------- */

.section {
  padding-block: var(--esp-2xl);
  position: relative;
}

.section--beige { background: var(--fond-alterne); }

.section--sombre {
  background: var(--fond-sombre);
  color: var(--texte-clair);
}

.section--sombre h2,
.section--sombre h3,
.section--sombre h4 { color: var(--texte-clair); }

.section--sombre p { color: var(--texte-clair-doux); }

.section--sombre a { color: var(--olive-clair); }
.section--sombre a:hover { color: #FFFFFF; }

.section--ouverture { padding-top: clamp(6.5rem, 5rem + 7vw, 9.5rem); }

/* ---------- 5. En-tête et navigation ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 234, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
  transition: box-shadow var(--duree) var(--courbe), background var(--duree) var(--courbe);
}

.entete.est-defile {
  box-shadow: var(--ombre-m);
  background: rgba(247, 243, 234, 0.98);
}

.entete__grille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-s);
  padding-block: var(--esp-xs);
}

.marque {
  display: flex;
  align-items: center;
  gap: var(--esp-2xs);
  text-decoration: none;
  color: var(--encre);
}

.marque__sigle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  background: var(--olive-fonce);
  color: #FFFFFF;
  font-family: var(--police-titre);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  border-radius: 16px 13px 18px 12px;
  box-shadow: var(--ombre-s);
}

.marque__texte { display: flex; flex-direction: column; line-height: 1.25; }
.marque__texte strong { font-family: var(--police-titre); font-size: 1.02rem; }
.marque__texte span { font-size: 0.72rem; color: var(--taupe-fonce); letter-spacing: 0.02em; }

.bouton-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2xs);
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-rond);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  color: var(--encre);
  font-size: 0.9rem;
  font-weight: 600;
}

.bouton-menu__barres { display: grid; gap: 4px; }
.bouton-menu__barres span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--olive-fonce);
  border-radius: var(--rayon-rond);
  transition: transform var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}

.bouton-menu[aria-expanded="true"] .bouton-menu__barres span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .bouton-menu__barres span:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded="true"] .bouton-menu__barres span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.navigation {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--beige-clair);
  border-bottom: 1px solid var(--filet);
  box-shadow: var(--ombre-m);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--duree) var(--courbe), visibility 0s linear var(--duree);
}

.navigation.est-ouverte {
  max-height: 32rem;
  visibility: visible;
  transition: max-height var(--duree) var(--courbe), visibility 0s;
}

.navigation ul {
  display: flex;
  flex-direction: column;
  padding: var(--esp-s) 1.25rem var(--esp-m);
  gap: 2px;
}

.navigation a {
  display: block;
  padding: 0.6rem 0.7rem;
  text-decoration: none;
  color: var(--taupe-fonce);
  font-weight: 600;
  border-radius: var(--rayon-s);
  border-left: 3px solid transparent;
  transition: color var(--duree) var(--courbe), background var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.navigation a:hover,
.navigation a.est-actif {
  color: var(--olive-fonce);
  background: rgba(107, 123, 58, 0.1);
  border-left-color: var(--olive);
}

.navigation__contact {
  background: var(--olive-fonce);
  color: #FFFFFF !important;
  text-align: center;
  border-left-color: transparent !important;
  margin-top: var(--esp-2xs);
}

.navigation__contact:hover { background: var(--encre); }

/* ---------- 6. Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2xs);
  padding: 0.82rem 1.5rem;
  border-radius: var(--rayon-rond);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duree) var(--courbe), background var(--duree) var(--courbe),
              color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}

.bouton--principal {
  background: var(--olive-fonce);
  color: #FFFFFF;
  box-shadow: var(--ombre-s);
}

.bouton--principal:hover {
  background: var(--encre);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--ombre-m);
}

.bouton--secondaire {
  background: transparent;
  color: var(--olive-fonce);
  border-color: var(--taupe);
}

.bouton--secondaire:hover {
  background: var(--beige);
  color: var(--encre);
  border-color: var(--olive-fonce);
  transform: translateY(-2px);
}

.bouton--copier {
  background: transparent;
  border-color: var(--olive-clair);
  color: var(--texte-clair);
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
}

.bouton--copier:hover {
  background: var(--olive-clair);
  color: var(--encre);
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--olive-fonce);
  border-bottom: 1px solid var(--filet);
  padding-bottom: 2px;
  transition: gap var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.lien-fleche::after { content: ">"; font-weight: 700; }
.lien-fleche:hover { gap: 0.7rem; border-color: var(--olive); color: var(--encre); }

/* ---------- 7. Ouverture ---------- */

.ouverture__grille {
  display: grid;
  gap: var(--esp-xl);
  align-items: center;
}

.ouverture__texte h1 { margin-bottom: var(--esp-m); }

.chapeau {
  font-size: clamp(1.03rem, 0.98rem + 0.35vw, 1.2rem);
  color: var(--texte-doux);
  max-width: 60ch;
}

.chapeau--second {
  border-left: 3px solid var(--olive);
  padding-left: var(--esp-s);
  font-style: italic;
  color: var(--taupe-fonce);
}

.ouverture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-xs);
  margin-top: var(--esp-l);
}

.portrait {
  margin: 0;
  position: relative;
  max-width: 400px;
}

.portrait img {
  width: 100%;
  border-radius: 46px 38px 52px 40px;
  border: 3px solid var(--olive);
  padding: 8px;
  background: var(--beige-clair);
  box-shadow: var(--ombre-l);
}

.portrait::after {
  content: "";
  position: absolute;
  inset: -14px -14px 24px -14px;
  border: 1px dashed var(--filet);
  border-radius: 56px 48px 62px 50px;
  z-index: -1;
}

.portrait figcaption {
  margin-top: var(--esp-s);
  font-size: 0.88rem;
  color: var(--taupe-fonce);
  line-height: 1.6;
  max-width: 38ch;
}

.cartes-avant {
  display: grid;
  gap: var(--esp-m);
  margin-top: var(--esp-m);
}

.carte-avant {
  background: #FFFFFF;
  color: var(--texte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-organique);
  padding: var(--esp-m);
  position: relative;
  box-shadow: var(--ombre-s);
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.carte-avant:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-m);
  border-color: var(--olive);
}

.carte-avant__numero {
  font-family: var(--police-titre);
  font-size: 2.2rem;
  color: var(--filet);
  line-height: 1;
  display: block;
  margin-bottom: var(--esp-2xs);
}

.carte-avant h3 { margin-bottom: var(--esp-2xs); }
.carte-avant p { color: var(--texte-doux); margin-bottom: var(--esp-s); }

/* ---------- 8. Séparateurs dessinés ---------- */

.separateur {
  width: 100%;
  margin-top: var(--esp-2xl);
  line-height: 0;
}

.separateur svg { width: 100%; height: 26px; display: block; }

.separateur .trace {
  fill: none;
  stroke: var(--filet);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.separateur--clair .trace { stroke: var(--taupe); opacity: 0.55; }

.separateur .trace.est-anime {
  transition: stroke-dashoffset 1600ms var(--courbe);
  stroke-dashoffset: 0 !important;
}

/* ---------- 9. Filtres et grille des disciplines ---------- */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2xs);
  margin-bottom: var(--esp-xs);
}

.filtre {
  background: transparent;
  border: 1px solid var(--taupe);
  color: var(--taupe-fonce);
  border-radius: var(--rayon-rond);
  padding: 0.5rem 1.05rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.filtre:hover { border-color: var(--olive-fonce); color: var(--olive-fonce); background: rgba(107, 123, 58, 0.09); }

.filtre.est-actif {
  background: var(--olive-fonce);
  border-color: var(--olive-fonce);
  color: #FFFFFF;
}

.filtres__etat {
  font-size: 0.85rem;
  color: var(--taupe-fonce);
  margin-bottom: var(--esp-m);
}

.grille-disciplines {
  display: grid;
  gap: var(--esp-s);
}

.discipline {
  background: var(--beige-clair);
  color: var(--texte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-organique);
  padding: var(--esp-m);
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}

.section--beige .discipline { background: #FFFFFF; }

.discipline:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); }

.discipline h3 { font-size: 1.16rem; margin: var(--esp-2xs) 0 var(--esp-3xs); }
.discipline p { color: var(--texte-doux); font-size: 0.96rem; }

.discipline.est-masquee { display: none; }

.etiquette {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--rayon-rond);
  color: #FFFFFF;
  background: var(--taupe-fonce);
}

.etiquette--technique { background: var(--olive-fonce); }
.etiquette--editorial { background: var(--taupe-fonce); }
.etiquette--autorite { background: var(--encre); }
.etiquette--conversion { background: #5A5F3B; }

/* ---------- 10. Compteurs ---------- */

.compteurs {
  display: grid;
  gap: var(--esp-s);
  margin-top: var(--esp-xl);
  border-top: 1px solid var(--filet);
  padding-top: var(--esp-m);
}

.compteur { display: flex; flex-direction: column; gap: 2px; }

.compteur__valeur {
  font-family: var(--police-titre);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem);
  line-height: 1.05;
  color: var(--olive-fonce);
  font-variant-numeric: tabular-nums;
}

.compteur__libelle {
  font-size: 0.88rem;
  color: var(--taupe-fonce);
  line-height: 1.45;
}

.compteurs--sombre { border-top-color: rgba(217, 207, 189, 0.28); }
.compteurs--sombre .compteur__valeur { color: var(--olive-clair); }
.compteurs--sombre .compteur__libelle { color: var(--texte-clair-doux); }

/* ---------- 11. Fiches de discipline ---------- */

.fiches {
  display: grid;
  gap: var(--esp-m);
}

.fiche {
  background: #FFFFFF;
  color: var(--texte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-organique);
  padding: var(--esp-m);
  box-shadow: var(--ombre-s);
  transition: box-shadow var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.fiche:hover { box-shadow: var(--ombre-m); border-color: var(--taupe); }

.fiche__entete {
  display: flex;
  align-items: baseline;
  gap: var(--esp-xs);
  padding-bottom: var(--esp-xs);
  border-bottom: 1px solid var(--filet);
  margin-bottom: var(--esp-s);
}

.fiche__index {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  color: var(--olive);
  line-height: 1;
}

.fiche__entete h3 { margin: 0; }

.fiche__corps { display: grid; gap: var(--esp-s); }

.fiche__bloc h4 {
  color: var(--olive-fonce);
  margin-bottom: var(--esp-3xs);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.fiche__bloc p { color: var(--texte-doux); }

/* Fiches posées dans une section sombre : couleurs explicites */
.fiche--sombre {
  background: #F4EFE4;
  color: var(--encre);
  border-color: rgba(217, 207, 189, 0.5);
}

.fiche--sombre h3,
.fiche--sombre h4 { color: var(--encre); }
.fiche--sombre .fiche__bloc h4 { color: var(--olive-fonce); }
.fiche--sombre p { color: var(--taupe-fonce); }
.fiche--sombre .fiche__index { color: var(--olive-fonce); }

.encadre-preuve {
  background: rgba(244, 239, 228, 0.07);
  border: 1px solid rgba(217, 207, 189, 0.3);
  border-radius: var(--rayon-organique);
  padding: var(--esp-m);
}

.encadre-preuve h3 { color: var(--texte-clair); margin-bottom: var(--esp-2xs); }
.encadre-preuve p { color: var(--texte-clair-doux); }
.encadre-preuve .compteurs { margin-top: var(--esp-m); }

/* ---------- 12. Visuels larges ---------- */

.visuel-large {
  margin: 0 0 var(--esp-xl);
  position: relative;
}

.visuel-large img {
  width: 100%;
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-m);
}

.visuel-large--bordure img {
  border: 8px solid #FFFFFF;
  outline: 1px solid var(--filet);
}

.visuel-large figcaption {
  margin-top: var(--esp-xs);
  font-size: 0.9rem;
  color: var(--taupe-fonce);
  max-width: 62ch;
}

/* ---------- 13. Schéma des combinaisons ---------- */

.combinaisons { display: grid; gap: var(--esp-m); }

.combinaisons__choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2xs);
}

.combi {
  background: #FFFFFF;
  border: 1px solid var(--filet);
  color: var(--taupe-fonce);
  border-radius: var(--rayon-rond);
  padding: 0.55rem 1.15rem;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.combi:hover { border-color: var(--olive); color: var(--olive-fonce); }

.combi.est-actif {
  background: var(--olive-fonce);
  border-color: var(--olive-fonce);
  color: #FFFFFF;
}

.schema {
  background: var(--beige-clair);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-l);
  padding: var(--esp-s);
  overflow-x: auto;
}

.schema svg { width: 100%; min-width: 620px; height: auto; display: block; }

.schema__liens .lien {
  stroke: var(--filet);
  stroke-width: 2;
  opacity: 0.75;
  transition: stroke var(--duree) var(--courbe), stroke-width var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}

.schema__liens .lien.est-actif {
  stroke: var(--olive);
  stroke-width: 3;
  opacity: 1;
}

.noeud rect {
  fill: #FFFFFF;
  stroke: var(--taupe);
  stroke-width: 1.6;
  transition: fill var(--duree) var(--courbe), stroke var(--duree) var(--courbe), opacity var(--duree) var(--courbe);
}

.noeud text {
  font-family: var(--police-texte);
  font-size: 13px;
  fill: var(--encre);
  text-anchor: middle;
  transition: fill var(--duree) var(--courbe);
}

.noeud--technique rect { stroke: var(--olive-fonce); }
.noeud--editorial rect { stroke: var(--taupe); }
.noeud--autorite rect { stroke: var(--encre); }
.noeud--conversion rect { stroke: #5A5F3B; }

.noeud.est-attenue rect { opacity: 0.4; }
.noeud.est-attenue text { fill: var(--taupe-fonce); opacity: 0.75; }

.noeud.est-actif rect {
  fill: var(--olive-fonce);
  stroke: var(--olive-fonce);
}

.noeud.est-actif text { fill: #FFFFFF; }

.noeud--socle rect { fill: var(--encre); stroke: var(--encre); }
.noeud--socle text { fill: #FFFFFF; font-size: 17px; font-family: var(--police-titre); }

.combinaisons__detail {
  background: #FFFFFF;
  border: 1px solid var(--filet);
  border-left: 4px solid var(--olive);
  border-radius: var(--rayon-m);
  padding: var(--esp-m);
  color: var(--texte);
}

.combinaisons__detail h3 { margin-bottom: var(--esp-3xs); }
.combinaisons__detail p { color: var(--texte-doux); }

.combinaisons__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3xs);
  margin-top: var(--esp-s);
}

.combinaisons__liste li {
  background: var(--beige);
  color: var(--taupe-fonce);
  border-radius: var(--rayon-rond);
  padding: 0.28rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- 14. Tableau des livrables ---------- */

.tableau-enveloppe {
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-m);
  background: #FFFFFF;
  margin-bottom: var(--esp-xl);
}

.tableau {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.tableau__legende {
  caption-side: top;
  text-align: left;
  padding: var(--esp-s) var(--esp-m) 0;
  font-size: 0.86rem;
  color: var(--taupe-fonce);
}

.tableau th,
.tableau td {
  padding: 0.85rem var(--esp-s);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--filet);
}

.tableau thead th {
  background: var(--encre);
  color: var(--texte-clair);
  font-family: var(--police-texte);
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: none;
}

.tableau thead th:first-child { border-top-left-radius: var(--rayon-m); }
.tableau thead th:last-child { border-top-right-radius: var(--rayon-m); }

.tableau tbody th {
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 600;
  color: var(--encre);
  width: 22%;
}

.tableau tbody td { color: var(--texte-doux); }
.tableau tbody tr:nth-child(even) { background: rgba(237, 230, 217, 0.4); }
.tableau tbody tr:hover { background: rgba(107, 123, 58, 0.09); }
.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td { border-bottom: none; }

/* ---------- 15. Outils ---------- */

.grille-outils {
  display: grid;
  gap: var(--esp-m);
}

.bloc-outils {
  background: #FFFFFF;
  color: var(--texte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-organique);
  padding: var(--esp-m);
  box-shadow: var(--ombre-s);
}

.bloc-outils h3 {
  font-size: 1.1rem;
  margin-bottom: var(--esp-2xs);
  color: var(--olive-fonce);
}

.bloc-outils p { color: var(--texte-doux); font-size: 0.93rem; }

.liste-outils {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3xs);
  margin-bottom: var(--esp-s);
}

.liste-outils li {
  border: 1px dashed var(--taupe);
  color: var(--taupe-fonce);
  border-radius: var(--rayon-rond);
  padding: 0.22rem 0.72rem;
  font-size: 0.85rem;
  background: var(--beige-clair);
}

/* ---------- 16. Accordéon ---------- */

.accordeon {
  border-top: 1px solid var(--filet);
}

.accordeon__element { border-bottom: 1px solid var(--filet); }

.accordeon__element h3 { margin: 0; }

.accordeon__bouton {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--esp-s) 2.6rem var(--esp-s) 0;
  font-family: var(--police-titre);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
  color: var(--encre);
  cursor: pointer;
  position: relative;
  transition: color var(--duree) var(--courbe);
}

.accordeon__bouton:hover { color: var(--olive-fonce); }

.accordeon__bouton::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--olive-fonce);
  border-bottom: 2px solid var(--olive-fonce);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--duree) var(--courbe);
}

.accordeon__bouton[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }

.accordeon__panneau {
  padding: 0 2.6rem var(--esp-m) 0;
  color: var(--texte-doux);
  max-width: 68ch;
}

.accordeon__panneau[hidden] { display: none; }

.accordeon__panneau.est-ouvert { animation: apparition-douce 320ms var(--courbe); }

@keyframes apparition-douce {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 17. Contact ---------- */

.section--contact { padding-block: var(--esp-2xl); }

.contact__grille {
  display: grid;
  gap: var(--esp-xl);
  align-items: start;
}

.contact__adresse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-xs);
  margin-top: var(--esp-m);
}

.contact__mail {
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem);
  color: var(--olive-clair);
  text-decoration: none;
  border-bottom: 2px solid rgba(168, 188, 99, 0.5);
  transition: border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}

.contact__mail:hover { color: #FFFFFF; border-color: #FFFFFF; }

.contact__note {
  font-size: 0.87rem;
  color: var(--olive-clair);
  min-height: 1.3rem;
  margin-top: var(--esp-3xs);
}

.contact__reperes {
  display: grid;
  gap: var(--esp-2xs);
  margin-top: var(--esp-m);
  border-top: 1px solid rgba(217, 207, 189, 0.28);
  padding-top: var(--esp-s);
}

.contact__reperes li {
  color: var(--texte-clair-doux);
  font-size: 0.94rem;
  padding-left: var(--esp-s);
  position: relative;
}

.contact__reperes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  background: var(--olive-clair);
  border-radius: var(--rayon-rond);
}

.contact__reperes strong { color: var(--texte-clair); }

.contact__carte {
  background: #F4EFE4;
  color: var(--encre);
  border-radius: var(--rayon-organique);
  padding: var(--esp-m);
  box-shadow: var(--ombre-l);
  display: grid;
  gap: var(--esp-s);
  justify-items: center;
  text-align: center;
}

.contact__carte img {
  width: 150px;
  height: 150px;
  border-radius: var(--rayon-rond);
  border: 3px solid var(--olive);
  padding: 5px;
  background: #FFFFFF;
}

.contact__carte p { color: var(--taupe-fonce); font-size: 0.95rem; }

.contact__nom {
  font-family: var(--police-titre);
  font-size: 1.35rem;
  color: var(--encre) !important;
  margin-bottom: var(--esp-3xs);
}

/* ---------- 18. Pied de page ---------- */

.pied {
  background: var(--encre);
  color: var(--texte-clair);
  padding-top: var(--esp-xl);
  padding-bottom: var(--esp-m);
  border-top: 4px solid var(--olive-fonce);
}

.pied__grille {
  display: grid;
  gap: var(--esp-l);
  padding-bottom: var(--esp-l);
}

.pied h2 {
  color: var(--texte-clair);
  font-size: 1.45rem;
  margin-bottom: var(--esp-2xs);
}

.pied h3 {
  color: var(--olive-clair);
  font-family: var(--police-texte);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--esp-xs);
}

.pied p { color: var(--texte-clair-doux); font-size: 0.94rem; max-width: 46ch; }

.pied__bloc--plan ul,
.pied__bloc--reseau ul { display: grid; gap: 0.42rem; }

.pied__bloc--plan a {
  color: var(--texte-clair-doux);
  text-decoration: none;
  font-size: 0.93rem;
  transition: color var(--duree) var(--courbe);
}

.pied__bloc--plan a:hover { color: var(--olive-clair); text-decoration: underline; }

.pied__mail {
  color: var(--olive-clair);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 188, 99, 0.45);
}

.pied__mail:hover { color: #FFFFFF; border-color: #FFFFFF; }

.pied__bas {
  border-top: 1px solid rgba(217, 207, 189, 0.22);
  padding-top: var(--esp-s);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2xs) var(--esp-m);
  justify-content: space-between;
}

.pied__bas p { font-size: 0.85rem; color: var(--texte-clair-doux); margin: 0; }

/* ---------- 19. Survol dans le schéma ---------- */

.schema__liens .lien.est-survole {
  stroke: var(--olive-fonce);
  stroke-width: 3.4;
  opacity: 1;
}

/* ---------- 20. Apparition au défilement ---------- */

.a-reveler {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--courbe), transform 620ms var(--courbe);
}

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

.a-reveler:nth-child(2) { transition-delay: 70ms; }
.a-reveler:nth-child(3) { transition-delay: 140ms; }
.a-reveler:nth-child(4) { transition-delay: 210ms; }

/* ---------- 21. Points de rupture ---------- */

@media (min-width: 640px) {
  .conteneur { width: min(100% - 3rem, var(--largeur)); }
  .cartes-avant { grid-template-columns: repeat(2, 1fr); }
  .grille-disciplines { grid-template-columns: repeat(2, 1fr); }
  .compteurs { grid-template-columns: repeat(2, 1fr); gap: var(--esp-m); }
  .grille-outils { grid-template-columns: repeat(2, 1fr); }
  .contact__carte { grid-template-columns: 150px 1fr; text-align: left; justify-items: start; align-items: center; }
  .pied__grille { grid-template-columns: repeat(2, 1fr); }
  .fiche { padding: var(--esp-l); }
}

@media (min-width: 900px) {
  html { scroll-padding-top: 96px; }
  .bouton-menu { display: none; }

  .navigation {
    position: static;
    max-height: none;
    overflow: visible;
    visibility: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .navigation ul {
    flex-direction: row;
    padding: 0;
    gap: 0.1rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .navigation a {
    padding: 0.45rem 0.6rem;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--rayon-s);
    font-size: 0.9rem;
  }

  .navigation a:hover,
  .navigation a.est-actif {
    border-left: 0;
    border-bottom-color: var(--olive);
    background: transparent;
  }

  .navigation__contact { margin-top: 0; padding: 0.45rem 1rem !important; border-radius: var(--rayon-rond); }

  .ouverture__grille { grid-template-columns: 1.35fr 0.9fr; }
  .cartes-avant { grid-template-columns: repeat(3, 1fr); }
  .grille-disciplines { grid-template-columns: repeat(3, 1fr); }
  .compteurs { grid-template-columns: repeat(4, 1fr); }
  .compteurs--sombre { grid-template-columns: repeat(3, 1fr); }
  .deux-colonnes { grid-template-columns: repeat(2, 1fr); gap: var(--esp-l); }
  .fiches--paire { grid-template-columns: repeat(2, 1fr); }
  .fiches--sombre { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .grille-outils { grid-template-columns: repeat(3, 1fr); }
  .contact__grille { grid-template-columns: 1.4fr 0.85fr; }
  .contact__carte { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pied__grille { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--esp-xl); }
  .visuel-large img { max-height: 460px; object-fit: cover; }
}

@media (min-width: 1200px) {
  .fiche__corps { grid-template-columns: repeat(3, 1fr); gap: var(--esp-m); }
  .fiches--paire .fiche__corps { grid-template-columns: 1fr; }
  .fiche--sombre .fiche__corps { grid-template-columns: 1fr; }
  .ouverture__grille { gap: var(--esp-2xl); }
  .portrait { max-width: 400px; margin-left: auto; }
  .combinaisons { grid-template-columns: 1fr; }
  .schema svg { min-width: 0; }
}

@media (max-width: 639px) {
  .ouverture__actions .bouton { width: 100%; }
  .portrait { margin-inline: auto; }
  .portrait figcaption { max-width: none; }
  .contact__adresse { flex-direction: column; align-items: flex-start; }
  .contact__mail { font-size: 1.08rem; overflow-wrap: anywhere; }
  .liens-reseau a { width: 100%; font-size: 0.9rem; }
  .pied__bas { flex-direction: column; }
  .filtre, .combi { font-size: 0.85rem; padding: 0.45rem 0.85rem; }
  .fiche__entete { flex-direction: column; gap: var(--esp-3xs); align-items: flex-start; }
}

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

@media print {
  .entete, .bouton-menu, .navigation, .separateur, .filtres, .combinaisons__choix { display: none; }
  body { background: #FFFFFF; color: #000000; }
  .section--sombre { background: #FFFFFF; color: #000000; }
  .section--sombre h2, .section--sombre h3, .section--sombre p { color: #000000; }
  .accordeon__panneau[hidden] { display: block; }
}

/* ---------- 23. Mouvement réduit ---------- */

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

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

  .a-reveler { opacity: 1; transform: none; }
  .separateur .trace { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .carte-avant:hover, .discipline:hover, .bouton:hover { transform: none; }
}

/* =========================================================
   24. Bloc de maillage du réseau, dans le pied de page
   Ajouté en fin de feuille, avec les variables du site.
   Contraste vérifié sur le fond du pied de page (encre).
   ========================================================= */

.pied__bloc--reseau {
  min-width: 0;
}

.pied__bloc--reseau .liens-reseau {
  display: grid;
  gap: 0.5rem;
}

.liens-reseau li {
  margin: 0;
  list-style: none;
}

.liens-reseau a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--texte-clair);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(217, 207, 189, 0.32);
  border-radius: var(--rayon-s);
  background: rgba(244, 239, 228, 0.05);
  overflow-wrap: anywhere;
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe),
              color var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}

.liens-reseau a::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: var(--olive-clair);
  border-radius: var(--rayon-rond);
  transition: background var(--duree) var(--courbe);
}

.liens-reseau a:hover {
  background: rgba(168, 188, 99, 0.2);
  border-color: var(--olive-clair);
  color: #FFFFFF;
  transform: translateX(3px);
}

.liens-reseau a:hover::before { background: #FFFFFF; }

.liens-reseau a:focus-visible {
  outline: 3px solid var(--olive-clair);
  outline-offset: 2px;
  background: rgba(168, 188, 99, 0.2);
  color: #FFFFFF;
}

@media (max-width: 639px) {
  .pied__bloc--reseau .liens-reseau { gap: 0.45rem; }

  .liens-reseau a {
    width: 100%;
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
  }

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