/* =========================================================
   Page d'accueil : campagne anglaise, engrenages, sommaire étagé
   ========================================================= */

body.accueil {
  height: 100vh; min-height: 600px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.campagne {
  position: relative; flex: 1;
  overflow: hidden;
  /* le ciel : bleu en haut, plus clair vers l'horizon (en bas de l'écran) */
  background: linear-gradient(var(--ciel-haut), var(--ciel-milieu) 76%, var(--ciel-bas) 94%);
  --u: min(1vw, 1.42vh);          /* unité qui suit la plus petite dimension */
}

/* ---------- décor ---------- */
.paysage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.paysage .c0 { fill: #a9c29a; }
.paysage .c1 { fill: #8db46a; }
.paysage .c2 { fill: #6f9d4a; }
.paysage .c3 { fill: #5a8a36; }

.nuage { animation: derive 70s ease-in-out infinite alternate; }
.nuage.n2 { animation-duration: 95s; animation-delay: -40s; }
.nuage.n3 { animation-duration: 120s; animation-delay: -70s; }
@keyframes derive {             /* va-et-vient lent, sans entrer sous le texte */
  from { transform: translateX(-140px); }
  to   { transform: translateX(160px); }
}
/* soleil : toujours entier, en haut à droite (le paysage, lui, se rogne par le haut sur écran large) */
.soleil {
  position: absolute; pointer-events: none;
  width: min(calc(var(--u) * 40), 44vh);       /* halo compris ; disque ≈ 1/5 */
  aspect-ratio: 1;
  right: calc(var(--u) * 1); top: calc(var(--u) * -3);
}
.soleil .rayons { transform-box: fill-box; transform-origin: center; animation: tourne 240s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

.fumee .bouffee { opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: fumee 8s linear infinite; }
.fumee .t1 { fill: #f3f0ea; } .fumee .t2 { fill: #dcd7cf; } .fumee .t3 { fill: #c8c2b9; }
.fumee .v2 { animation-name: fumee2; animation-duration: 9.5s; }
@keyframes fumee {                 /* monte, s'élargit et se couche dans le vent */
  0%   { opacity: .7;  transform: translate(0, 0) scale(.6); }
  8%   { opacity: .9; transform: translate(1px, -6px) scale(.85); }
  35%  { opacity: .75; transform: translate(9px, -34px) scale(1.5); }
  70%  { opacity: .4;  transform: translate(48px, -62px) scale(2.6); }
  100% { opacity: 0;   transform: translate(105px, -78px) scale(3.6); }
}
@keyframes fumee2 {
  0%   { opacity: .7;  transform: translate(0, 0) scale(.55); }
  10%  { opacity: .85; }
  40%  { opacity: .65; transform: translate(5px, -40px) scale(1.7); }
  75%  { opacity: .3;  transform: translate(56px, -70px) scale(2.9); }
  100% { opacity: 0;   transform: translate(120px, -84px) scale(4); }
}

/* ---------- engrenages ---------- */
.mecanisme {
  position: absolute;
  right: calc(var(--u) * 15); top: 15%;
  height: 56%;
  aspect-ratio: 394 / 356;       /* = viewBox du SVG */
  pointer-events: none;
}
.mecanisme { transition: opacity .4s ease; }
.mecanisme.en-retrait { opacity: .28; }      /* posé par accueil.js quand les roues passent sous le texte */
.engrenages { width: 100%; height: 100%; display: block; overflow: visible;
  filter: drop-shadow(5px 9px 7px rgba(50, 35, 10, .35)); }
.engrenages .metal { fill: url(#acier); }       /* url(#laiton) pour du laiton */
.engrenages .contour { fill: none; stroke: #50565c; stroke-width: 1.1; }
.engrenages .jante { fill: none; stroke: rgba(30, 35, 40, .25); stroke-width: 1.4; }
.engrenages .axe { fill: #3a3f44; stroke: #e3e6e9; stroke-width: 1.5; }
.engrenages .clavette { fill: #e3e6e9; }

/* ---------- titre ---------- */
.titre {
  position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 2.6);
  margin: 0;
}
.titre h1 {
  margin: 0;
  font-family: var(--titre); font-weight: 400;
  font-size: calc(var(--u) * 5.6); line-height: 1;
  color: var(--encre);
  text-shadow: 0 0 calc(var(--u) * 1.6) rgba(255, 252, 238, .95), 0 0 2px rgba(255, 252, 238, .8);
}
.titre .retrait { display: inline-block; margin-left: calc(var(--u) * 18); }
.sous-titre {
  margin: calc(var(--u) * .4) 0 0 calc(var(--u) * 19);
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: calc(var(--u) * 2.3);
  color: var(--laiton-sombre);
  text-shadow: 0 0 10px rgba(255, 252, 238, .95);
}
.sous-titre::before, .sous-titre::after { content: "⁂"; font-style: normal; font-size: .7em; margin: 0 .6em; color: var(--laiton); }

/* ---------- sommaire étagé ---------- */
.chapitres {
  position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 19.5);
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: calc(var(--u) * .9);
}
.chapitres li:nth-child(2) { margin-left: calc(var(--u) * 4); }
.chapitres li:nth-child(3) { margin-left: calc(var(--u) * 8); }
.chapitres li:nth-child(4) { margin-left: calc(var(--u) * 12); }
.chapitres li:nth-child(5) { margin-left: calc(var(--u) * 16); }
.chapitres a {
  display: flex; align-items: center; gap: calc(var(--u) * 1.4);
  color: var(--encre);
}
.numero {
  flex: none;
  display: grid; place-items: center;
  width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4);
  border-radius: 50%;
  font-family: var(--titre-sc); font-size: calc(var(--u) * 1.9); line-height: 1;
  color: #fff8e6;
  background: radial-gradient(circle at 35% 30%, #f1d38a, #b8862f 60%, #7a5420);
  box-shadow: 0 0 0 calc(var(--u) * .35) rgba(122, 84, 32, .55), 0 3px 6px rgba(50, 35, 10, .3);
  text-shadow: 0 1px 1px rgba(60, 35, 5, .6);
  position: relative;
}
/* couronne dentée autour du numéro (tourne au survol) */
.numero::before {
  content: ""; position: absolute; inset: calc(var(--u) * -.75);
  border-radius: 50%;
  background: repeating-conic-gradient(var(--laiton-sombre) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
          mask: radial-gradient(circle, transparent 62%, #000 63%);
  opacity: .75; z-index: -1;
  transition: transform .9s ease;
}
.libelle { display: flex; flex-direction: column; text-shadow: 0 0 calc(var(--u) * 1.2) rgba(255, 252, 238, .95), 0 0 3px rgba(255, 252, 238, .9); }
.libelle strong {
  font-family: var(--titre); font-weight: 400;
  font-size: calc(var(--u) * 3.1); line-height: 1.08;
}
.libelle em {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: calc(var(--u) * 2.05); line-height: 1.15;
  color: var(--encre-douce);
}
.chapitres a:hover strong, .chapitres a:focus-visible strong { color: #7a3f12; }
.chapitres a:hover .numero::before, .chapitres a:focus-visible .numero::before { transform: rotate(120deg); }

/* ---------- poteau indicateur (compléments) ---------- */
.poteau {
  position: absolute; right: calc(var(--u) * 3); bottom: 6%;
  width: calc(var(--u) * 23);
  padding-top: calc(var(--u) * 1);
}
.poteau::before {             /* le poteau */
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: calc(var(--u) * -8);
  width: calc(var(--u) * 1.6); transform: translateX(-50%);
  background: linear-gradient(90deg, #5a3d22, #a77b4f 40%, #7d5634 75%, #4e341c);
  border-radius: 3px 3px 0 0;
  box-shadow: 3px 0 6px rgba(40, 25, 10, .3);
}
.poteau::after {              /* chapeau du poteau */
  content: ""; position: absolute; left: 50%; top: calc(var(--u) * -.6);
  width: calc(var(--u) * 2.4); height: calc(var(--u) * 1.2); transform: translateX(-50%);
  background: #4e341c; border-radius: 3px;
}
.poteau ul { position: relative; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); }
.poteau li { position: relative; z-index: 1; }
.poteau li:nth-child(2) { transform: rotate(2.5deg) translateX(calc(var(--u) * -1.2)); }
.poteau li:nth-child(3) { transform: rotate(-1.5deg) translateX(calc(var(--u) * .8)); }
.poteau a {
  display: block;
  padding: calc(var(--u) * .7) calc(var(--u) * 3.2) calc(var(--u) * .7) calc(var(--u) * 1.4);
  font-family: var(--titre-sc); font-size: calc(var(--u) * 1.85); line-height: 1.1;
  color: #2a1a0b;
  background:
    repeating-linear-gradient(178deg, rgba(90, 55, 25, .0) 0 5px, rgba(90, 55, 25, .13) 5px 6px, rgba(90, 55, 25, 0) 6px 11px),
    linear-gradient(#d6a978, #b98a59 55%, #9c6f43);
  clip-path: polygon(0 0, calc(100% - var(--u) * 2.2) 0, 100% 50%, calc(100% - var(--u) * 2.2) 100%, 0 100%);
  text-shadow: 0 1px 0 rgba(255, 230, 190, .5);
  transition: transform .25s ease, filter .25s;
}
.poteau li:nth-child(2) a { clip-path: polygon(calc(var(--u) * 2.2) 0, 100% 0, 100% 100%, calc(var(--u) * 2.2) 100%, 0 50%);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.4) calc(var(--u) * .7) calc(var(--u) * 3.2); text-align: right; }
.poteau a:hover, .poteau a:focus-visible { filter: brightness(1.12); transform: translateX(calc(var(--u) * .6)); }
.poteau li:nth-child(2) a:hover { transform: translateX(calc(var(--u) * -.6)); }

/* ---------- animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
  .nuage, .soleil .rayons, .fumee .bouffee { animation: none; }
  .fumee .bouffee { opacity: .5; }
}

/* ---------- téléphone : on empile et on défile ---------- */
@media (max-width: 760px), (max-height: 480px) {
  body.accueil { height: auto; overflow: auto; }
  .campagne { --u: 2.6vw; min-height: 100vh; padding: 0 0 40vw; display: flex; flex-direction: column; }
  .titre { order: 1; } .chapitres { order: 2; } .mecanisme { order: 3; } .poteau { order: 4; }
  .titre, .chapitres { position: relative; left: auto; top: auto; }
  .titre { padding: 6vw 5vw 2vw; }
  .titre .retrait { margin-left: 18vw; }
  .sous-titre { margin-left: 4vw; }
  .chapitres { padding: 4vw 5vw; gap: 3vw; }
  .chapitres li:nth-child(n) { margin-left: 0; }
  .libelle strong { font-size: 5.6vw; } .libelle em { font-size: 4vw; }
  .numero { width: 10vw; height: 10vw; font-size: 4.4vw; }
  .mecanisme { position: relative; right: auto; top: auto; height: 60vw; margin: 0 auto 4vw; }
  .poteau { position: relative; right: auto; bottom: auto; margin: 4vw auto 0; width: 60vw; }
  .poteau a { font-size: 4.4vw; }
}