/* =========================================================
   Habillage Rendrya — cadres, ornements, panneaux

   Les images viennent de assets/ui/, découpées dans la planche d'assets. Elles
   portent déjà leur transparence : rien n'est détouré ici.

   Principe de construction : chaque cadre est posé en `border-image` avec une
   découpe en neuf zones. Les quatre angles ornés gardent leur taille, les
   quatre bords s'étirent, le centre est rempli par la texture. C'est ce qui
   permet à un panneau de s'adapter à son contenu — une image de fond simple se
   déformerait aux angles dès que la hauteur change.
========================================================= */

:root {
  /* Relevés directement sur la planche, pour que le CSS et les images
     s'accordent au pixel près. */
  --ui-nuit: #033982;
  --ui-nuit-fonce: #012a63;
  --ui-bleu-clair: #2f86e8;
  --ui-bleu: #0754c1;
  --ui-bleu-fonce: #023a8e;
  --ui-or-clair: #f0cd7a;
  --ui-or: #c68a1a;
  --ui-or-fonce: #8c5c10;
  --ui-creme: #f6eddf;
  --ui-creme-fonce: #e8dcc6;
  --ui-gemme: #0b68dc;

  /* Épaisseur des angles ornés dans chaque image de cadre. Regroupées ici :
     ajuster une découpe se fait à un seul endroit. */
  --coupe-creme: 52;
  --coupe-nuit: 46;
}

/* ---------- Cadres ---------- */

/*
  `fill` conserve la zone centrale de l'image comme fond du bloc : sans lui, le
  centre serait transparent et le parchemin disparaîtrait.
*/
.cadre {
  position: relative;
  border-style: solid;
  /*
    `round` plutôt que `stretch` : le bord de l'image porte une gemme en son
    milieu. Étirée, elle se réduit à une bavure ; répétée, elle donne une file
    de gemmes régulière qui se lit comme un motif voulu.
  */
  border-image-repeat: round;
  background-clip: padding-box;
}

.cadre-creme {
  border-width: 34px;
  border-image-source: url('/assets/ui/cadre-creme.png');
  border-image-slice: var(--coupe-creme) fill;
  color: #3b2f21;
}

/*
  Le panneau sombre est dessiné en CSS et non découpé : la tranche de l'image
  d'origine contient un morceau de paysage, qui réapparaissait le long du bord
  droit. Quatre gemmes posées en fond aux angles suffisent à retrouver
  l'ornementation, sans aucun résidu et à n'importe quelle taille.
*/
.cadre-nuit {
  --gemme-angle: 26px;
  border: 2px solid var(--ui-or);
  border-radius: 10px;
  padding: 22px 24px;
  background:
    url('/assets/ui/gemme-m.png') left    top    / var(--gemme-angle) no-repeat,
    url('/assets/ui/gemme-m.png') right   top    / var(--gemme-angle) no-repeat,
    url('/assets/ui/gemme-m.png') left    bottom / var(--gemme-angle) no-repeat,
    url('/assets/ui/gemme-m.png') right   bottom / var(--gemme-angle) no-repeat,
    linear-gradient(180deg, var(--ui-nuit) 0%, var(--ui-nuit-fonce) 100%);
  /* Les gemmes débordent sur la bordure : sans origin border-box elles
     seraient rognées à l'intérieur du cadre. */
  background-origin: border-box;
  background-clip: border-box;
  color: #eaf3ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 22px rgba(3, 30, 70, 0.3);
}

/* Cadre pour une image : le centre est laissé au contenu, pas rempli. */
.cadre-image {
  border-width: 26px;
  border-image-source: url('/assets/ui/cadre-paysage.png');
  border-image-slice: 34;
  border-style: solid;
  border-image-repeat: stretch;
}

/* ---------- Ornements ---------- */

/* Éléments purement décoratifs : retirés de l'arbre d'accessibilité, ils n'ont
   rien à annoncer à un lecteur d'écran. */
.orn { display: block; pointer-events: none; user-select: none; }

.orn-filet,
.orn-ailes,
.orn-separateur {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-inline: auto;
}
.orn-filet { width: 262px; height: 44px; background-image: url('/assets/ui/ornement-filet.png'); }
.orn-ailes { width: 198px; height: 44px; background-image: url('/assets/ui/ornement-ailes.png'); }
.orn-separateur { width: min(296px, 80%); height: 26px; background-image: url('/assets/ui/separateur.png'); }

.gemme {
  display: inline-block;
  background: url('/assets/ui/gemme-m.png') center/contain no-repeat;
  width: 22px; height: 22px;
  vertical-align: -4px;
}
.gemme.xl { background-image: url('/assets/ui/gemme-xl.png'); width: 42px; height: 42px; }
.gemme.s { background-image: url('/assets/ui/gemme-s.png'); width: 16px; height: 16px; }

/* ---------- Boutons encadrés ---------- */

/*
  Les boutons sont refaits en CSS plutôt que découpés en images : un bouton doit
  s'étirer avec son libellé, garder ses états (survol, focus, désactivé) et
  rester net sur écran à forte densité. Les couleurs sont celles relevées sur
  la planche, le liseré doré reprend celui des cadres.
*/
.btn-rendrya {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 30px;
  border-radius: 8px;
  border: 2px solid var(--ui-or);
  background: linear-gradient(180deg, var(--ui-bleu-clair) 0%, var(--ui-bleu) 52%, var(--ui-bleu-fonce) 100%);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 20, 60, 0.55);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(0, 20, 60, 0.4),
    0 3px 0 var(--ui-or-fonce),
    0 8px 18px rgba(3, 30, 70, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-rendrya:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-rendrya:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 6px rgba(0, 20, 60, 0.5), 0 1px 0 var(--ui-or-fonce);
}
.btn-rendrya:focus-visible { outline: 3px solid var(--ui-or-clair); outline-offset: 3px; }

/* Variante dorée : bouton secondaire de la planche. */
.btn-rendrya.or {
  background: linear-gradient(180deg, #e9be4e 0%, var(--ui-or) 52%, var(--ui-or-fonce) 100%);
  border-color: var(--ui-or-clair);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(70, 40, 0, 0.35),
    0 3px 0 #6d4708,
    0 8px 18px rgba(3, 30, 70, 0.3);
}

.btn-rendrya[disabled],
.btn-rendrya.desactive {
  background: linear-gradient(180deg, #8b97a5 0%, #6b7887 55%, #4e5e71 100%);
  border-color: #7d8795;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 0 #3f4b5a;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* Chevron de fin, comme sur la planche. */
.btn-rendrya .fleche { font-size: 0.8em; opacity: 0.85; }

/* ---------- Panneaux de contenu ---------- */

.panneau { margin: 0 0 26px; }
.panneau-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-nuit);
  margin: 0 0 14px;
}
.cadre-nuit .panneau-titre { color: #f0d89a; }

/* ---------- Badges de catégorie ---------- */

.badge-rendrya {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.badge-rendrya.annonce     { background: #043da6; }
.badge-rendrya.evenement   { background: #0d5f1f; }
.badge-rendrya.maj         { background: #6222ad; }
.badge-rendrya.maintenance { background: #9a061a; }

/* ---------- Décor de fond ---------- */

/* Bande de nuages posée en bas de page, reprise de la planche. */
.bande-nuages {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: url('/assets/ui/nuages.png') repeat-x bottom center;
  background-size: auto 120px;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

/* Le dirigeable dérive lentement au-dessus du héros. */
.dirigeable {
  position: absolute;
  width: 172px; height: 114px;
  background: url('/assets/ui/dirigeable.png') center/contain no-repeat;
  opacity: 0.9;
  animation: derive 38s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes derive {
  from { transform: translate(0, 0); }
  to   { transform: translate(60px, -18px); }
}

@media (prefers-reduced-motion: reduce) {
  .dirigeable { animation: none; }
}

@media (max-width: 700px) {
  .cadre-creme { border-width: 24px; }
  .cadre-nuit { border-width: 22px; }
  .dirigeable { display: none; }
}

/* ---------- Boutons du site ---------- */

/*
  .cta-button existait avec un dégradé vert. On le repeint en bleu à liseré
  doré, conforme à la planche. Les états (survol, appui, focus, désactivé) sont
  conservés — c'est précisément ce qu'une image découpée aurait fait perdre.
*/
.cta-button {
  background: linear-gradient(180deg, var(--ui-bleu-clair) 0%, var(--ui-bleu) 52%, var(--ui-bleu-fonce) 100%);
  border: 2px solid var(--ui-or);
  border-radius: 8px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 20, 60, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(0, 20, 60, 0.4),
    0 3px 0 var(--ui-or-fonce),
    0 8px 18px rgba(3, 30, 70, 0.35);
}
.cta-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cta-button:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 6px rgba(0, 20, 60, 0.5), 0 1px 0 var(--ui-or-fonce);
}
.cta-button:focus-visible { outline: 3px solid var(--ui-or-clair); outline-offset: 3px; }

/* Le bouton secondaire devient le doré de la planche. */
.cta-button.ghost {
  background: linear-gradient(180deg, #e9be4e 0%, var(--ui-or) 52%, var(--ui-or-fonce) 100%);
  border-color: var(--ui-or-clair);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(70, 40, 0, 0.35),
    0 3px 0 #6d4708,
    0 8px 18px rgba(3, 30, 70, 0.3);
}

.cta-button[disabled] {
  background: linear-gradient(180deg, #8b97a5 0%, #6b7887 55%, #4e5e71 100%);
  border-color: #7d8795;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 0 #3f4b5a;
  transform: none;
  filter: none;
}

/* ---------- Héros ---------- */

/*
  Composition en couches, en attendant l'illustration définitive : le paysage de
  la planche en bande de fond, les nuages par-dessus pour fondre sa base dans le
  ciel du site, et le dirigeable qui dérive au-dessus. Quand la vraie image
  arrivera, seule la couche `.hero-paysage` sera à remplacer.
*/
.site-hero { position: relative; }

/*
  Les deux couches débordent la largeur du héros, qui est borné par une
  max-width. Sans ce débordement pleine largeur, le paysage se lisait comme un
  rectangle collé au milieu de la page, avec deux arêtes verticales franches.

  Le masque agit dans les DEUX sens : en hauteur pour fondre la base dans le
  ciel, en largeur pour que les bords gauche et droit s'effacent au lieu de se
  couper net.
*/
.hero-paysage,
.hero-nuages {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  pointer-events: none;
  z-index: 0;
}

.hero-paysage {
  top: 0;
  height: 380px;
  background: url('/assets/ui/paysage-large.png') center top / cover no-repeat;
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 48%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(180deg, #000 0%, #000 48%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  /* Les deux masques se multiplient : un pixel n'est visible que s'il l'est
     dans les deux, ce qui produit un fondu sur les quatre côtés. */
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0.5;
}

/*
  Une seule occurrence étirée à la largeur de l'écran, et non une répétition :
  l'image de nuages n'est pas raccordable, ses bords produisaient une couture
  visible tous les 560 px.
*/
.hero-nuages {
  top: 236px;
  height: 120px;
  background: url('/assets/ui/nuages.png') center bottom / 100% auto no-repeat;
  /* Fondu sur les quatre côtés, comme le paysage : sans le fondu vertical, la
     bande se lisait comme un rectangle plus clair posé en travers du héros. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0.6;
}

/*
  Surtout PAS d'overflow:hidden sur .site-hero : il découperait les couches
  pleine largeur à la largeur du héros, et le paysage redeviendrait le
  rectangle collé au milieu de la page qu'on cherche à éviter. Le débordement
  horizontal est déjà bloqué plus haut, par .home-body.
*/

.site-hero > *:not(.hero-paysage):not(.hero-nuages):not(.dirigeable) {
  position: relative;
  z-index: 1;
}

.hero-dirigeable { top: 60px; right: 6%; z-index: 0; }

/* ---------- Cartes en parchemin ---------- */

/*
  Les cartes d'aperçu de l'accueil passent au cadre de parchemin. Les
  formulaires et les tableaux gardent leur fond clair : un cadre orné autour
  d'un champ de saisie gênerait la lecture plus qu'il n'apporterait.
*/
.apercu {
  border-style: solid;
  border-image-repeat: round;
  border-width: 30px;
  border-image-source: url('/assets/ui/cadre-creme.png');
  border-image-slice: 52 fill;
  background: none;
  box-shadow: none;
  color: #3b2f21;
}
.apercu h3 { color: var(--ui-nuit); }
.apercu p { color: #4a3c2b; }
.apercu-lien { color: var(--ui-or-fonce); font-weight: 700; }
.apercu-lien:hover { color: var(--ui-nuit); }

/* Le cadre porte déjà tout l'ornement : une élévation au survol le ferait
   flotter au-dessus de sa propre bordure. On se contente d'un éclat. */
.apercu:hover { transform: none; filter: brightness(1.02); }

/* ---------- Titres ---------- */

.section-title,
.hero-titre {
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 24px rgba(255, 255, 255, 0.35);
}

/* ---------- Héros ---------- */

.hero-rendrya {
  position: relative;
  min-height: 470px;
  padding: 54px 0 40px;
  display: flex;
  align-items: center;
}
.hero-rendrya .dedans {
  position: relative;
  z-index: 2;
  width: min(1180px, 100% - 48px);
  margin: 0 auto;
}
.hero-texte { max-width: 460px; }

.hero-titre {
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.05;
  margin: 0;
  color: var(--ui-nuit);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.5);
}
.hero-accroche {
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-nuit);
  margin: 10px 0 22px;
  opacity: 0.85;
}
.hero-texte .description { margin: 0 0 26px; color: #16395e; font-size: 1rem; line-height: 1.7; }
.hero-texte .actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-signature {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-style: italic;
  color: var(--ui-or-fonce);
  font-size: 0.92rem;
}
.hero-signature::before,
.hero-signature::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ui-or), transparent);
}

/* ---------- Grille de l'accueil ---------- */

.grille-accueil {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 22px;
  align-items: start;
  width: min(1180px, 100% - 48px);
  margin: 0 auto 26px;
}
.colonne-milieu { display: grid; gap: 22px; }

@media (max-width: 1040px) {
  .grille-accueil { grid-template-columns: 1fr; }
}

/* Titre de panneau avec sa gemme, comme sur la maquette. */
.bloc-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ui-nuit);
}
.bloc-titre .lien-suite {
  margin-left: auto;
  font-family: Quicksand, system-ui, sans-serif;
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ui-or-fonce);
  text-decoration: none;
  font-weight: 700;
}
.cadre-nuit .bloc-titre { color: #f2dca6; justify-content: center; }

/* ---------- Actualités ---------- */

.actu { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(90, 60, 20, 0.16); }
.actu:first-of-type { border-top: 0; padding-top: 0; }
.actu-vignette {
  flex: none;
  width: 104px; height: 76px;
  border-radius: 6px;
  border: 2px solid var(--ui-or);
  object-fit: cover;
  background: #cfe4ff;
}
.actu-entete { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; flex-wrap: wrap; }
.actu-date { font-size: 0.76rem; color: #7a6647; }
.actu-titre { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--ui-nuit); }
.actu a { text-decoration: none; }
.actu a:hover .actu-titre { color: var(--ui-or-fonce); }
.actu p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #4a3c2b; }

/* ---------- État des serveurs ---------- */

.serveurs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.serveurs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(90, 60, 20, 0.2);
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.92rem;
  color: #3b2f21;
}
.serveurs .pastille {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  box-shadow: 0 0 7px currentColor;
}
.serveurs .en-ligne { color: #23a13c; }
.serveurs .hors-ligne { color: #c4342a; }
.serveurs .etat { margin-left: auto; font-size: 0.84rem; font-weight: 700; }

/* ---------- Communauté ---------- */

.communaute-liens { display: flex; justify-content: center; gap: 14px; }
.communaute-liens a {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ui-bleu-clair), var(--ui-bleu));
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(3, 30, 70, 0.4);
  transition: transform 0.15s ease;
}
.communaute-liens a:hover { transform: translateY(-2px); }
.communaute-liens svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- Accès rapide ---------- */

.acces-rapide { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.acces-rapide a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid rgba(90, 60, 20, 0.25);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ui-nuit);
  text-decoration: none;
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}
.acces-rapide a:hover { background: #fff; border-color: var(--ui-or); }
.acces-rapide .icone { font-size: 1.15rem; line-height: 1; }
.acces-rapide .chevron { margin-left: auto; color: var(--ui-or-fonce); }

/* ---------- Explorez ---------- */

.explorer-bloc {
  position: relative;
  z-index: 2;
  width: min(1180px, 100% - 48px);
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  align-items: center;
}
.explorer-titre {
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 1.7rem;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #fff;
}
.explorer-bloc p { color: #cfe0f5; font-size: 0.9rem; line-height: 1.6; margin: 0 0 18px; }
.explorer-vignettes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.explorer-vignette {
  border: 2px solid var(--ui-or);
  border-radius: 8px;
  overflow: hidden;
  background: #0b2b52;
  text-decoration: none;
  display: block;
}
.explorer-vignette img { display: block; width: 100%; height: 118px; object-fit: cover; }
.explorer-vignette span {
  display: block;
  padding: 8px 6px;
  text-align: center;
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 0.82rem;
  color: #f2dca6;
  background: rgba(1, 30, 70, 0.85);
}
.explorer-vignette:hover img { filter: brightness(1.12); }

@media (max-width: 900px) {
  .explorer-bloc { grid-template-columns: 1fr; }
  .explorer-vignettes { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Correctifs de mise en page
========================================================= */

/*
  home.css applique aux <section> la mise en page des grandes sections de
  l'accueil : max-width 1080 et padding 70px. Les panneaux encadrés sont des
  <section> eux aussi et héritaient donc de 70 px de vide intérieur, d'où des
  cartes bien plus hautes que leur contenu. On annule pour eux seuls.
*/
.grille-accueil > section,
.grille-accueil section,
section.cadre-creme,
section.cadre-nuit,
section.explorer-bloc {
  max-width: none;
  padding: 0;
}
section.cadre-creme { padding: 0; border-width: 32px; }
section.cadre-nuit { padding: 22px 24px; }
section.explorer-bloc { padding: 24px 26px; }

/* Le héros porte lui aussi ses propres marges. */
.hero-rendrya { max-width: none; padding: 54px 0 30px; }

/* Le contenu s'écarte des montants pour ne pas passer dessous. */
@media (min-width: 1281px) {
  .grille-accueil,
  .explorer-bloc,
  .hero-rendrya .dedans { width: min(1180px, 100% - 190px); }
}

/* ---------- Héros ---------- */

/* Le paysage était trop effacé pour se lire ; on le remonte et on l'assombrit
   légèrement côté texte pour garder le titre lisible. */
.hero-paysage { opacity: 0.72; height: 440px; }
.hero-nuages { top: 300px; }
.hero-rendrya .dedans::before {
  content: '';
  position: absolute;
  inset: -40px -30px;
  background: radial-gradient(60% 70% at 22% 50%, rgba(255, 255, 255, 0.72), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.hero-texte { max-width: 480px; }
.hero-titre { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.hero-texte .actions { flex-direction: row; }
.hero-signature { max-width: 420px; }

/* ---------- Vignettes de régions ---------- */

.explorer-vignette img { height: 108px; }

/* ---------- Boutons du héros côte à côte ---------- */

/*
  Les deux boutons dépassaient de quelques pixels la largeur du bloc de texte et
  passaient donc l'un sous l'autre. On élargit la colonne et on resserre un peu
  les boutons : ils tiennent alors sur une ligne, comme sur la maquette.
*/
.hero-texte { max-width: 540px; }
.hero-texte .actions { flex-wrap: nowrap; }
.hero-texte .actions .cta-button { padding: 13px 24px; font-size: 0.86rem; white-space: nowrap; }

@media (max-width: 620px) {
  .hero-texte .actions { flex-wrap: wrap; }
}

/*
  HÉROS — plus aucune image de fond.
  Les couches paysage / nuages / dirigeable sont retirées du gabarit ; les
  règles qui les mettaient en forme n'ont plus d'objet.
*/
.hero-paysage,
.hero-nuages,
.hero-dirigeable { display: none; }

.hero-rendrya { min-height: 0; padding: 64px 0 44px; }
.hero-rendrya .dedans::before { content: none; }

/* ---------- Cadres : découpes calées sur les images réelles ---------- */

/* cadre-creme : 433 x 246, angles ornés de 50 px. */
.cadre-creme,
section.cadre-creme,
.apercu {
  border-width: 30px;
  border-image-source: url('/assets/ui/cadre-creme.png');
  border-image-slice: 50 fill;
  border-image-repeat: round;
  border-style: solid;
}

/* ---------- Vignettes de régions en attente ---------- */

/*
  Emplacement réservé : la section a déjà sa taille définitive, il n'y aura
  qu'à fournir les visuels. Le damier discret dit que la place est tenue, sans
  faire croire à une image manquante.
*/
.vignette-attente {
  display: block;
  height: 108px;
  background-color: #0b2e5c;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.05) 0 8px,
      rgba(255, 255, 255, 0.09) 8px 16px);
}
.vignette-nom {
  display: block;
  padding: 8px 6px;
  text-align: center;
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: 0.82rem;
  color: #f2dca6;
  background: rgba(1, 30, 70, 0.85);
}

/* ---------- Cadres : découpes par îlot ---------- */

/*
  Les cadres sont désormais extraits par APPARTENANCE À L'ÎLOT : tout pixel
  n'appartenant pas au cadre est transparent. Les petites pointes qui
  apparaissaient au-dessus venaient de l'ornement placé juste au-dessus dans la
  planche, emporté par une découpe rectangulaire.

  cadre-creme mesure 433 x 257, angles ornés d'environ 52 px.
*/
.cadre-creme,
section.cadre-creme,
.apercu {
  border-width: 30px;
  border-image-source: url('/assets/ui/cadre-creme.png');
  border-image-slice: 52 fill;
  border-image-repeat: round;
  border-style: solid;
}

/* ---------- Héros ---------- */

/*
  L'illustration fournie (1672 x 940) remplace le montage provisoire. Elle est
  cadrée par la droite : la composition y place le château et le ciel ouvert,
  tandis que le texte occupe le tiers gauche.
*/
.hero-rendrya { position: relative; min-height: 520px; padding: 0; display: flex; align-items: center; }

.hero-fond {
  position: absolute;
  inset: 0;
  background: url('/assets/hero.png') center right / cover no-repeat;
  z-index: 0;
}

/* Voile clair côté texte : sans lui, le titre bleu nuit se perdrait dans les
   nuages de l'illustration. Il s'efface vers la droite pour laisser le château
   entièrement visible. */
.hero-fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(232, 244, 253, 0.92) 0%,
    rgba(232, 244, 253, 0.72) 26%,
    rgba(232, 244, 253, 0.18) 52%,
    rgba(232, 244, 253, 0) 72%);
}

/* Raccord avec le ciel du site : l'image se fond en bas au lieu de s'arrêter net. */
.hero-fond::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(196, 231, 250, 0), rgba(196, 231, 250, 1));
  z-index: 1;
}

.hero-rendrya .dedans { position: relative; z-index: 2; padding: 40px 0; }

/* =========================================================
   HÉROS EN FOND DE SITE

   L'illustration ne se limite plus au haut de la page : elle est posée en fond
   fixe de tout le site. `fixed` la fait rester en place pendant le défilement —
   le contenu glisse au-dessus du paysage au lieu de l'emmener avec lui.
========================================================= */

.home-body .background {
  background: url('/assets/hero.png') center center / cover no-repeat fixed;
}
/* Les couches de nuages, halo et grain de l'ancien fond feraient double emploi
   par-dessus une illustration. */
.home-body .background::before,
.home-body .background::after,
.home-body .glade-glow { display: none; }

/* Voile clair : sans lui, les textes bleu nuit se perdraient dans les nuages de
   l'illustration. Assez léger pour laisser le paysage lisible. */
.home-body .background .particles::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(226, 241, 252, 0.30) 0%,
    rgba(226, 241, 252, 0.52) 45%,
    rgba(226, 241, 252, 0.72) 100%);
}

/* La section du héros n'a plus son propre fond : il est derrière toute la page. */
.hero-fond { display: none; }
.hero-rendrya { min-height: 460px; }
/* Voile local plus marqué côté texte, pour le titre. */
.hero-rendrya .dedans::before {
  content: '';
  position: absolute;
  inset: -30px -40px;
  background: radial-gradient(58% 62% at 26% 50%, rgba(240, 248, 255, 0.82), transparent 72%);
  z-index: -1;
  pointer-events: none;
}

/* =========================================================
   BARRE DE NAVIGATION — dessinée en CSS

   Seule définition de la barre dans ce fichier. Les précédentes, accumulées au
   fil d'une douzaine de tentatives, se contredisaient et ont été supprimées.

   Pourquoi en CSS : partir d'une image de barre obligeait à l'étirer, donc à en
   sortir l'emblème, donc à recoller le fond — et ce raccord finissait toujours
   par se voir. Dessinée, la barre s'adapte à n'importe quelle largeur et
   n'importe quelle hauteur : aucun raccord, aucun étirement, aucune découpe.

   Seuls le logo et les icônes restent des images, posées telles quelles.
   Couleurs relevées sur la planche d'assets.
========================================================= */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 84px;
  padding: 0 clamp(14px, 2.4vw, 44px);
  border: 0;
  overflow: visible;
  background:
    /* assombrissement des extrémités, comme le reflet du bandeau d'origine */
    linear-gradient(90deg,
      rgba(3, 40, 92, 0.92) 0%, rgba(11, 71, 160, 0) 20%,
      rgba(11, 71, 160, 0) 80%, rgba(3, 40, 92, 0.92) 100%),
    linear-gradient(180deg, #1157b8 0%, #0b47a0 46%, #063073 100%);
  box-shadow: 0 6px 22px rgba(3, 26, 60, 0.45);
}

/* Rails dorés. Dégradé horizontal pour l'éclat au centre, ombre portée pour
   le relief du métal. */
.nav-rail {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  pointer-events: none;
  background: linear-gradient(90deg,
    #8c5c10 0%, #f0cd7a 18%, #fff3cf 50%, #f0cd7a 82%, #8c5c10 100%);
}
.nav-rail.haut { top: 0; box-shadow: 0 2px 0 rgba(255, 240, 200, 0.22); }
.nav-rail.bas  { bottom: 0; box-shadow: 0 -2px 0 rgba(255, 240, 200, 0.18); }

/* Gemme d'extrémité : ornement de la planche, posé tel quel. */
.nav-gemme {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 46px;
  transform: translateY(-50%);
  background: url('/assets/ui/gemme-m.png') center / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 20, 60, 0.5));
}
.nav-gemme.gauche { left: 8px; }
.nav-gemme.droite { right: 8px; }

/* ---------- Groupes d'icônes ---------- */

/*
  Les deux groupes prennent chacun la moitié de l'espace restant : le logo, en
  `flex: none` entre eux, tombe donc au centre quel que soit le nombre
  d'icônes de part et d'autre.
*/
.nav-groupe {
  display: flex;
  align-items: center;
  /*
    Cet écart sépare deux ZONES, celui de `.nav-zone` deux libellés d'une même
    zone : il doit donc être le plus grand des deux, sinon les groupes se
    lisent à l'envers — c'était le cas sous 1101 px, où « Accueil Wiki » se
    collaient pendant que « Support » flottait à part. Au-dessus, les zones
    sont posées en absolu par skin.css et cet écart ne sert plus.
  */
  gap: clamp(16px, 2vw, 34px);
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.nav-groupe.gauche { justify-content: flex-start; padding-left: 30px; }
.nav-groupe.droite { justify-content: flex-end; padding-right: 30px; }

/*
  L'onglet, dessiné en CSS.

  Ni fond ni cadre : le bandeau est déjà peint dessous, un plein y ferait une
  pastille posée sur une bannière. C'est la lettre qui porte l'état — dorée au
  repos, blanche au survol, soulignée d'un filet quand c'est la page courante.
*/
.nav-bouton {
  display: block;
  padding: 6px 2px 5px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ui-or-clair, #f2dca6);
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(1, 14, 40, 0.95);
  transition: color 0.18s ease, transform 0.18s ease, text-shadow 0.18s ease;
}
.nav-bouton:hover,
.nav-bouton:focus-visible {
  color: #fff6dd;
  transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(240, 205, 122, 0.75), 0 1px 3px rgba(1, 14, 40, 0.95);
}
.nav-bouton:focus-visible { outline: 2px solid var(--ui-or-clair); outline-offset: 3px; }

/*
  La page courante : un filet doré sous le libellé.

  En `::after` et non en `border-bottom` : le filet doit faire la largeur du
  texte, pas celle de la boîte, et apparaître sans décaler ses voisins.
*/
.nav-bouton.actif { color: #fff6dd; }
.nav-bouton.actif::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(240, 205, 122, 0) 0%,
    rgba(240, 205, 122, 0.95) 50%,
    rgba(240, 205, 122, 0) 100%);
}
.nav-bouton:hover img { filter: brightness(1.18) drop-shadow(0 0 7px rgba(240, 205, 122, 0.85)); }
.nav-bouton.actif img { filter: brightness(1.22) drop-shadow(0 0 8px rgba(240, 205, 122, 1)); }
.nav-bouton:focus-visible { outline: 3px solid var(--ui-or-clair); outline-offset: 3px; }

/* ---------- Logo central ---------- */

/* Il déborde volontairement de la barre, comme sur toutes les maquettes.
   `flex: none` l'empêche d'être comprimé par les deux groupes. */
.nav-logo {
  position: relative;
  z-index: 3;
  flex: none;
  display: block;
  line-height: 0;
  margin: 0 clamp(6px, 1.2vw, 24px);
}
.nav-logo img {
  display: block;
  height: clamp(72px, 6vw, 116px);
  width: auto;
  filter: drop-shadow(0 5px 14px rgba(3, 26, 60, 0.55));
}

/*
  LE LIBELLÉ EST L'ONGLET.

  Il était masqué : la barre n'affichait que des pictogrammes, et le texte ne
  servait qu'aux lecteurs d'écran. Rien ne disait où menait un bouton avant de
  le survoler. Il est maintenant le contenu visible, dessiné en CSS — les
  fichiers d'icônes restent sur le disque, prêts à resservir.
*/
.nav-libelle {
  display: block;
  white-space: nowrap;
  font-family: "Cinzel Decorative", "Trebuchet MS", serif;
  font-size: clamp(0.62rem, 0.78vw, 0.84rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}

/* Les zones : de simples rangées. Au-dessus de 1101 px, skin.css les pose
   chacune sur une partie nue du bandeau dessiné. */
.nav-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.1vw, 22px);
}
/* Une zone sans onglet ne doit pas garder de gouttière dans la rangée. */
.nav-zone:empty { display: none; }

/* Bannières ornées des deux bords de la page. */
.bordure-page {
  position: fixed;
  top: 92px;
  width: 78px;
  height: 211px;
  background: url('/assets/ui/banniere-large.png') center top / 78px 211px no-repeat;
  pointer-events: none;
  z-index: 5;
}
.bordure-page.gauche { left: 0; }
.bordure-page.droite { right: 0; transform: scaleX(-1); }
@media (max-width: 1280px) { .bordure-page { display: none; } }

@media (max-width: 860px) {
  .site-nav { height: auto; flex-wrap: wrap; justify-content: center; padding: 10px 12px 12px; }
  .nav-groupe { flex: 0 0 auto; padding: 0; justify-content: center; }
  .nav-logo { order: -1; flex-basis: 100%; margin: 0 0 8px; }
  .nav-logo img { height: 58px; margin: 0 auto; }
  .nav-gemme { display: none; }
}

/* =========================================================
   Barre : largeur ajustée au contenu, et descendue
========================================================= */

/*
  Étirée sur tout l'écran, la barre laissait une vaste étendue bleue vide entre
  les icônes, rejetées à ses deux extrémités. Elle prend maintenant la largeur
  de son contenu — logo et icônes — et se centre.

  `width: fit-content` laisse les enfants décider, à condition qu'aucun ne
  réclame d'espace : les groupes passent donc en `flex: 0 0 auto`, sinon ils
  regonfleraient la barre à la largeur de la fenêtre.

  La marge du haut dégage la couronne du logo, qui déborde de la barre et se
  faisait couper par le bord de la fenêtre.
*/
.site-nav {
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 26px auto 0;
  border-radius: 14px;
  padding: 0 clamp(18px, 2vw, 34px);
  gap: clamp(10px, 1.4vw, 22px);
}

.nav-groupe { flex: 0 0 auto; }
.nav-groupe.gauche { padding-left: 22px; }
.nav-groupe.droite { padding-right: 22px; }

/* Les rails et les gemmes suivent les coins arrondis. */
.nav-rail.haut { border-radius: 14px 14px 0 0; }
.nav-rail.bas  { border-radius: 0 0 14px 14px; }

/* La barre flotte : le contenu de la page démarre plus bas. */
.bordure-page { top: 132px; }

@media (max-width: 860px) {
  .site-nav { width: auto; margin: 14px 10px 0; max-width: none; }
  .nav-groupe.gauche, .nav-groupe.droite { padding: 0; }
}

/* =========================================================
   Barre : plus basse, logo plus grand, plus large
========================================================= */

/*
  Trois réglages, à partir des dimensions mesurées : la barre faisait 986 px de
  large sur 84 de haut.

  Hauteur ramenée à 62 px. Les icônes sont donc réduites en conséquence,
  sinon elles toucheraient les rails dorés.

  Largeur portée à 1281 px, soit +15 % de chaque côté. L'ajout passe par le
  rembourrage horizontal (148 px de plus par côté) : la barre s'ajustant à son
  contenu, c'est le seul moyen de l'élargir sans lui imposer une largeur fixe
  qui casserait sur un écran étroit.
*/
.site-nav {
  height: 62px;
  padding-left: clamp(18px, 8.4vw, 166px);
  padding-right: clamp(18px, 8.4vw, 166px);
  margin-top: 30px;
}

.nav-bouton img { width: clamp(26px, 1.9vw, 34px); }

/* Le logo grossit et déborde davantage : c'est lui qui porte l'identité, la
   barre n'est qu'un support. */
.nav-logo img { height: clamp(92px, 7.8vw, 150px); }
.nav-logo { margin: 0 clamp(10px, 1.6vw, 30px); }

.bordure-page { top: 130px; }

@media (max-width: 860px) {
  .site-nav { height: auto; padding-left: 14px; padding-right: 14px; }
  .nav-logo img { height: 68px; }
}

/* =========================================================
   Barre élargie, bannières accrochées à ses extrémités
========================================================= */

/*
  La barre s'étend presque d'un bord à l'autre, en laissant juste la place aux
  bannières. Elle n'est plus dimensionnée par son contenu mais par la fenêtre :
  `fit-content` la resserrait autour des icônes, ce qui empêchait d'atteindre
  les bords.
*/
.site-nav {
  width: calc(100% - 44px);
  max-width: none;
  margin: 26px auto 0;
  padding-left: clamp(20px, 4vw, 74px);
  padding-right: clamp(20px, 4vw, 74px);
  justify-content: space-between;
  overflow: visible;
}

/* Les groupes se répartissent à nouveau l'espace : la barre étant large, ils
   doivent s'écarter vers ses extrémités plutôt que se serrer au centre. */
.nav-groupe { flex: 1 1 0; }
.nav-groupe.gauche { justify-content: flex-start; }
.nav-groupe.droite { justify-content: flex-end; }

/*
  BANNIÈRES ACCROCHÉES

  Elles pendent des deux extrémités de la barre. Posées en absolu DANS
  l'en-tête, elles suivent sa largeur : quand la barre se resserre, elles
  restent à ses bouts au lieu de flotter contre la fenêtre.

  Le léger recouvrement vers le haut (-8 px) glisse leur attache sous le rail
  doré, ce qui donne l'impression qu'elles y sont suspendues plutôt que
  simplement posées en dessous.
*/
.nav-banniere {
  position: absolute;
  top: calc(100% - 8px);
  width: 84px;
  height: 227px;                /* 84 x 246 / 91, rapport de l'image respecté */
  background: url('/assets/ui/banniere-large.png') center top / 84px 227px no-repeat;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 6px 12px rgba(3, 26, 60, 0.35));
}
.nav-banniere.gauche { left: 6px; }
.nav-banniere.droite { right: 6px; transform: scaleX(-1); }

/* L'ancienne décoration de page n'a plus lieu d'être. */
.bordure-page { display: none; }

@media (max-width: 1100px) {
  /* Sous cette largeur, les bannières mordraient sur le contenu. */
  .nav-banniere { display: none; }
}
@media (max-width: 860px) {
  .site-nav { width: auto; margin: 14px 10px 0; }
}

/* =========================================================
   Bannières posées sur les extrémités, boutons resserrés
========================================================= */

/*
  Les bannières prennent la place des cristaux : elles sont posées SUR la barre,
  à chaque bout, et retombent en dessous — comme un fanion accroché par-dessus.
  Elles passent donc au-dessus du bandeau (z-index) au lieu de pendre derrière.

  Les cristaux disparaissent : ils occupaient exactement cet emplacement, les
  garder aurait fait doublon sous la bannière.
*/
.nav-gemme { display: none; }

.nav-banniere {
  position: absolute;
  top: -12px;                    /* déborde au-dessus du rail : effet d'accroche */
  width: 112px;
  height: 303px;                 /* 112 x 246 / 91, rapport de l'image respecté */
  background: url('/assets/ui/banniere-large.png') center top / 112px 303px no-repeat;
  pointer-events: none;
  z-index: 4;                    /* au-dessus de la barre, pas derrière */
  filter: drop-shadow(0 8px 16px rgba(3, 26, 60, 0.45));
}
.nav-banniere.gauche { left: -8px; }
.nav-banniere.droite { right: -8px; transform: scaleX(-1); }

/*
  Boutons ramenés vers le centre.

  Collés aux extrémités, ils passaient sous les bannières et la barre paraissait
  vide en son milieu. Le rembourrage est en pourcentage : l'écart reste
  proportionnel quelle que soit la largeur de l'écran.
*/
.nav-groupe.gauche { padding-left: 11%; }
.nav-groupe.droite { padding-right: 11%; }

@media (max-width: 1400px) {
  .nav-banniere { width: 92px; height: 249px; background-size: 92px 249px; }
  .nav-groupe.gauche { padding-left: 9%; }
  .nav-groupe.droite { padding-right: 9%; }
}
@media (max-width: 1100px) {
  .nav-banniere { display: none; }
  .nav-groupe.gauche { padding-left: 0; }
  .nav-groupe.droite { padding-right: 0; }
}

/* =========================================================
   Barre plus basse, bouts rentrés sous les bannières
========================================================= */

/*
  Le bout de la barre dépassait de la bannière alors que leurs BOÎTES se
  recouvraient. La cause : à la hauteur de la barre, la partie opaque de la
  bannière ne couvre que 13 % à 89 % de sa largeur — le reste est transparent.
  Mesuré sur l'image, pas supposé.

  On resserre donc la barre de 44 px de chaque côté : ses extrémités tombent
  franchement dans la zone pleine de la bannière, qui les masque.
*/
.site-nav {
  width: calc(100% - 88px);
  height: 52px;
}

/* Bannières remontées, taille inchangée. */
.nav-banniere { top: -20px; }
.nav-banniere.gauche { left: -30px; }
.nav-banniere.droite { right: -30px; }

/* Le logo redescend d'un cran : il dominait trop la barre amincie. */
.nav-logo img { height: clamp(78px, 6.3vw, 122px); }

/* À 52 px de haut, les icônes doivent laisser respirer les rails dorés. */
.nav-bouton img { width: clamp(24px, 1.65vw, 30px); }

@media (max-width: 1400px) {
  .site-nav { width: calc(100% - 64px); }
  .nav-banniere.gauche { left: -22px; }
  .nav-banniere.droite { right: -22px; }
}
@media (max-width: 1100px) {
  .site-nav { width: calc(100% - 32px); }
}
@media (max-width: 860px) {
  .site-nav { width: auto; height: auto; }
  .nav-logo img { height: 66px; }
}

/* =========================================================
   ACCUEIL — répartition des blocs en trois colonnes

   Seul le PLACEMENT change ici. Aucune carte n'est redessinée : ni fond, ni
   bordure, ni couleur, ni contenu. Les quatre blocs deviennent quatre zones
   nommées d'une même grille :

       .            présentation   accès rapide
       actualités   serveurs       .

   Les zones nommées plutôt que des marges : la position ne dépend d'aucune
   coordonnée en pixels, donc rien ne se décale quand la résolution change.
   L'ordre du HTML (présentation, actualités, serveurs, accès) reste l'ordre de
   lecture en une colonne sur mobile.
========================================================= */

/*
  La grille commence maintenant tout en haut de la page, là où le héros
  ménageait auparavant son propre espace. Sans cette marge, le titre passerait
  sous l'emblème de la barre, qui déborde sous le bandeau.
*/
.grille-accueil { margin-top: clamp(34px, 5vw, 74px); }

/*
  Largeur : les colonnes latérales viennent chercher les bannières.

  La bannière fait 112 px et pend à `left: -30px` d'une barre large de
  `100% - 88px`, donc centrée à 44 px du bord : son bord intérieur tombe à
  44 - 30 + 112 = 126 px. On laisse une dizaine de pixels d'air et le contenu
  commence là. En dessous de 1401 px la bannière rétrécit à 92 px, la marge
  suit ; en dessous de 1101 px elle disparaît et la largeur d'origine reprend.
*/
@media (min-width: 1401px) {
  .grille-accueil { width: calc(100% - 274px); }
}
@media (min-width: 1101px) and (max-width: 1400px) {
  .grille-accueil { width: calc(100% - 230px); }
}

@media (min-width: 1041px) {
  .grille-accueil {
    /* La colonne centrale est la plus large : elle porte la présentation, dont
       les deux boutons doivent tenir côte à côte. */
    grid-template-columns: 1fr 1.35fr 1fr;
    grid-template-areas:
      "serveurs presentation acces"
      "actus    explorer     communaute";
  }

  .zone-presentation { grid-area: presentation; }
  .zone-serveurs     { grid-area: serveurs; }
  .zone-acces        { grid-area: acces; }
  .zone-actus        { grid-area: actus; }
  .zone-communaute   { grid-area: communaute; }
  .zone-explorer     { grid-area: explorer; }

  /*
    La composition occupe l'écran au lieu de se tasser en haut.

    La grille réclame la hauteur qui reste sous la barre, et `space-between`
    écarte ses deux lignes : la première demeure en haut, la seconde descend
    au bas de la fenêtre. Les 250 px retranchés sont ce que prennent la barre,
    la marge haute de la grille et le pied de page — la ligne du bas s'arrête
    donc juste au-dessus de celui-ci, sans provoquer de défilement.

    C'est un `min-height` : sur un écran court, ou quand les vignettes passent
    en 2 x 2 et allongent la ligne, la règle ne s'applique tout simplement pas
    et la page reprend sa hauteur naturelle.
  */
  .grille-accueil {
    min-height: calc(100vh - 250px);
    align-content: space-between;
  }
}

/*
  Les deux panneaux latéraux vont chercher le bord, au plus près des bannières.

  Ils se centraient dans leur colonne : `margin: 0 auto`, hérité de home.css,
  l'emporte sur l'étirement par défaut de la grille. On l'annule et on les
  ancre chacun de son côté. Leur largeur ne bouge pas — `justify-self` les
  laisse à la taille de leur contenu, celle qu'ils avaient déjà.
*/
@media (min-width: 861px) {
  .grille-accueil .zone-serveurs { margin-inline: 0; justify-self: start; }
  .grille-accueil .zone-acces    { margin-inline: 0; justify-self: end; }
}

/*
  Ligne du bas : les deux cartes latérales s'alignent sur celle qui les
  surplombe — actualités sous l'état des serveurs, communauté sous l'accès
  rapide — et laissent le milieu à « Explorez Rendrya ».

  Les actualités sont plafonnées : sans cela elles remplissent toute leur
  colonne et pèsent autant que la carte centrale, qui doit dominer.
*/
@media (min-width: 1041px) {
  .grille-accueil .zone-actus {
    margin-inline: 0;
    justify-self: start;
    /* Juste assez pour que le titre et « Voir toutes » tiennent sur une même
       ligne : en dessous, l'en-tête se replie et la flèche part seule. */
    max-width: 420px;
  }
  .grille-accueil .zone-actus .lien-suite { white-space: nowrap; }
  .grille-accueil .zone-communaute { margin-inline: 0; justify-self: end; }

  /*
    Les trois cartes du bas prennent toute la hauteur de leur ligne, donc la
    même : celle de la plus haute. La grille est en `align-items: start`, ce
    qui les laissait chacune à la taille de son contenu — on ne lève la règle
    que pour cette ligne, la ligne du haut restant calée en haut.
  */
  .grille-accueil .zone-actus,
  .grille-accueil .zone-explorer,
  .grille-accueil .zone-communaute { align-self: stretch; }

  /* Étirées, elles gardaient leur contenu tassé en haut. Il se répartit dans
     la hauteur disponible : titre en tête, contenu au centre. */
  .grille-accueil .zone-communaute {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .grille-accueil .zone-explorer { align-content: center; }
}

/*
  Le héros occupait toute la largeur de la page ; il tient maintenant dans une
  colonne. On lui retire les réglages qui n'avaient de sens qu'en pleine
  largeur — hauteur minimale, centrage horizontal de son contenu, largeur
  maximale du texte — sans toucher à sa typographie ni à ses boutons.
*/
.grille-accueil .hero-rendrya {
  min-height: 0;
  padding: 0;
  display: block;
  /* home.css centre tout <section> avec `margin: 0 auto`. Sur les cartes c'est
     voulu — elles gardent leur largeur propre —, mais le héros est du texte :
     il doit s'aligner sur le bord de sa colonne. */
  margin-inline: 0;
}
.grille-accueil .hero-rendrya .dedans {
  width: auto;
  margin: 0;
  padding: 0;
}
.grille-accueil .hero-texte,
.grille-accueil .hero-signature { max-width: none; }

/*
  Le texte se calait sur le bord gauche de sa colonne : dans une composition
  qui a désormais un panneau de chaque côté, il paraissait décalé. Il se centre
  donc dans sa colonne, laquelle est centrée sur la page.
*/
@media (min-width: 1041px) {
  .grille-accueil .hero-texte { text-align: center; }
  .grille-accueil .hero-texte .actions { justify-content: center; }
}

/* Deux boutons côte à côte ne tiennent plus dans une colonne : ils passent
   l'un sous l'autre plutôt que de déborder. */
.grille-accueil .hero-texte .actions { flex-wrap: wrap; }

/*
  Tablette.

  Cette largeur repliait la composition sur DEUX colonnes, six cartes rangées
  en zones nommées. Quatre d'entre elles — serveurs, communauté, accès,
  explorer — ont été retirées de l'accueil : la grille n'avait plus que le
  héros et les actualités à placer, et les actualités atterrissaient dans la
  colonne de gauche d'une ligne devenue à moitié vide, larges de 406 px pour
  une grille de 834.

  Une seule colonne, donc, comme en mobile. Les deux blocs restants ne
  gagneraient rien à être mis côte à côte : le héros est une illustration
  pleine largeur.
*/
@media (min-width: 861px) and (max-width: 1040px) {
  .grille-accueil {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "presentation"
      "actus";
  }

  .zone-presentation { grid-area: presentation; }
  .zone-actus        { grid-area: actus; }
}

/* =========================================================
   « Explorez Rendrya » ramené dans la grille

   Il valait pour lui-même sa propre largeur de page et ses propres marges,
   puisqu'il vivait hors de la grille. Devenu une cellule parmi les autres,
   c'est la colonne qui décide.
========================================================= */

/*
  Il n'a plus à se dimensionner ni à se centrer lui-même, quelle que soit la
  largeur : c'est désormais une cellule de la grille. Et il n'a plus qu'une
  colonne : les 260 px réservés à l'accroche n'ont plus d'objet, celle-ci
  ayant disparu. Le titre porte déjà sa marge basse, d'où le `gap` nul.
*/
.grille-accueil .zone-explorer {
  width: auto;
  margin: 0;
  grid-template-columns: 1fr;
  gap: 0;
}

/*
  Au centre de la ligne du bas, dans la colonne la plus large : c'est la carte
  qui domine, les deux autres l'encadrent. En tablette et en mobile elle
  reprend toute la largeur et garde sa présentation d'origine.
*/
@media (min-width: 1041px) {
  .grille-accueil .zone-explorer {
    align-items: start;
    padding: 22px 24px;
  }

  /*
    Deux vignettes de front par défaut, quatre quand la colonne est assez
    large. Pas d'`auto-fit` ici : entre les deux, il donnerait trois de front
    et une orpheline à la ligne suivante.
  */
  .grille-accueil .zone-explorer .explorer-vignettes {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .grille-accueil .zone-explorer .explorer-vignette img,
  .grille-accueil .zone-explorer .vignette-attente { height: 62px; }
  .grille-accueil .zone-explorer .explorer-vignette span { font-size: 0.72rem; }

  /*
    Hauteur de la ligne du bas, resserrée.

    Les trois cartes partagent la hauteur de la plus haute : on rabote donc
    chacune, sinon celle qui reste dominerait toujours. Rien d'autre ne bouge —
    ni les cadres, ni les polices, ni les couleurs.
  */
  .grille-accueil .zone-explorer { padding: 14px 20px; }
  .grille-accueil .zone-communaute { padding: 14px 24px; }
  .grille-accueil .zone-actus .bloc-titre,
  .grille-accueil .zone-explorer .bloc-titre,
  .grille-accueil .zone-communaute .bloc-titre { margin-bottom: 10px; }
  .grille-accueil .zone-actus .wiki-vide { padding: 12px 16px; }
}

/*
  Seuil du quatre-de-front : mesuré sur le libellé le plus long, « Saint City »,
  qui réclame 88 px de vignette pour tenir sur une ligne. La colonne centrale
  les offre à partir de 1360 px. En dessous on repasse en 2 x 2 — et comme les
  trois cartes du bas partagent leur hauteur, c'est toute la ligne qui
  s'allonge alors, d'où l'intérêt de tenir sur un seul rang au plus loin.
*/
@media (min-width: 1360px) {
  .grille-accueil .zone-explorer .explorer-vignettes {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* En dessous de 861 px, aucune zone n'est déclarée : la grille retombe sur une
   colonne unique et suit l'ordre du HTML. */


/* ---------- Bouton de deconnexion de la barre ---------- */

/*
  La deconnexion est un formulaire, pas un lien : detruire une session doit
  passer par un POST. Le formulaire ne sert que d'enveloppe et ne doit rien
  peser dans la mise en page de la barre.
*/
.nav-deco { display: flex; margin: 0; padding: 0; }

/* Le bouton reprend l'apparence des autres boutons de la barre. Il faut
   neutraliser ce qu'un <button> apporte de lui-meme et que les <a> voisins
   n'ont pas : fond, bordure, rembourrage, police. */
.nav-deco .nav-bouton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}