/* =====================================================================
   CERCLE MAGUS – Page publique : L'Observatoire des Maisons
   ===================================================================== */

.hall{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}

/* En-tête */
.hall__entete{text-align:center;padding:clamp(2.4rem,6vw,4rem) 1rem .4rem}
.hall__sur-titre{margin:0;font-family:var(--ui);font-size:.92rem;font-weight:500;letter-spacing:.5em;text-transform:uppercase;color:var(--muted-2);padding-left:.5em}
.hall__titre{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,6.2vw,3.9rem);letter-spacing:-.01em;margin:.12em 0;color:var(--ivory)}
/* Assez large pour que les trois phrases tiennent chacune sur une ligne
   sur un écran d'ordinateur ; elles se replient naturellement en dessous. */
.hall__devise{margin:.2rem auto 0;max-width:54rem;color:var(--muted);font-size:1.02rem;line-height:1.7}
.hall__question{color:var(--ivory)}
.hall__filet{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:1.2rem 0 .2rem}
.hall__filet span{height:1px;width:min(130px,24vw);background:linear-gradient(90deg,transparent,var(--line))}
.hall__filet span:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.hall__filet i{color:var(--gilt);font-size:.7rem;font-style:normal}

/* Grille des cadrans */
.hall__cadrans{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,2vw,1.6rem);max-width:1200px;margin:0 auto;padding:clamp(1rem,3vw,2.2rem) clamp(1rem,4vw,2.4rem) 1rem;width:100%;flex:1}

.maison{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.maison__couronne{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:30px;height:auto;fill:var(--gilt);opacity:0;transition:opacity .4s;pointer-events:none;filter:drop-shadow(0 0 7px rgba(232,192,122,.55))}
.maison--tete .maison__couronne{opacity:1}

.maison__cadran{width:100%;max-width:250px}
.cadran__svg{width:100%;height:auto;display:block;overflow:visible}
.cadran__arc{filter:drop-shadow(0 0 5px var(--house));transition:stroke-dasharray .2s linear}
/* Le logo de la Maison, au centre du cadran. Le halo à sa couleur le
   détache du fond nuit : sans lui, les traits sombres des dessins (la
   Faucheuse est presque entièrement noire) se perdraient dans la page. */
.cadran__logo{filter:drop-shadow(0 0 5px var(--house))}
/* Le blason mène à l'histoire du Fondateur de la Maison. Au survol (ou au
   clavier), il grossit un peu et sa lueur s'étend : il se donne à cliquer
   sans qu'il faille l'écrire. Le second halo est déjà là au repos, éteint,
   pour que les navigateurs passent de l'un à l'autre en douceur. */
.cadran__blason .cadran__logo,.cadran__blason .cadran__medaillon{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.3,1.4,.5,1),filter .35s ease;filter:drop-shadow(0 0 5px var(--house)) drop-shadow(0 0 0 transparent)}
.cadran__blason:hover .cadran__logo,.cadran__blason:focus-visible .cadran__logo,
.cadran__blason:hover .cadran__medaillon,.cadran__blason:focus-visible .cadran__medaillon{transform:scale(1.1);filter:drop-shadow(0 0 7px var(--house)) drop-shadow(0 0 20px var(--house))}
.cadran__blason:focus-visible{outline:none}
.cadran__arc.pulse{animation:cadran-pulse .9s ease}
@keyframes cadran-pulse{0%,100%{filter:drop-shadow(0 0 5px var(--house))}40%{filter:drop-shadow(0 0 13px var(--house))}}

.maison__nom{font-family:var(--ui);font-size:.82rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:.55rem 0 .15rem}
.maison__score{margin:0;line-height:1}
.maison__points{font-family:var(--ui);font-weight:600;font-size:clamp(2.1rem,4.4vw,3rem);color:var(--ivory);font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:inline-block}
.maison__points.scintille{animation:score-eclat .9s ease}
@keyframes score-eclat{0%{transform:scale(1)}38%{transform:scale(1.12)}100%{transform:scale(1)}}
.maison__unite{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);margin-top:.25rem}

/* Lien vers le registre – contraste soigné */
.maison__lien{margin-top:1rem;display:inline-block;font-family:var(--ui);font-size:.83rem;letter-spacing:.02em;color:var(--ivory);text-decoration:none;padding:.45em .95em;border-radius:7px;border:1px solid transparent;border-bottom:1.5px solid var(--house,var(--line));transition:background .2s,border-color .2s}
.maison__lien:hover{background:color-mix(in srgb,var(--house) 16%,transparent);border-color:var(--house)}
.maison__lien span{color:var(--house);margin-left:.35em}

/* Pied */
.hall__pied{text-align:center;padding:2.4rem 1rem 2.8rem;color:var(--muted-2);font-size:.9rem}
.hall__pied p{margin:.35rem 0}
.hall__citation{margin:0 auto 1.4rem;max-width:34rem;color:var(--muted);font-size:1rem;line-height:1.5}
.hall__citation cite{display:block;margin-top:.4rem;font-style:normal;font-size:.8rem;letter-spacing:.04em;color:var(--muted-2)}
.hall__citation cite i{font-style:italic}
.hall__pied a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.hall__pied a:hover{color:var(--ivory);border-color:var(--muted)}

@media (max-width:880px){.hall__cadrans{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}}
@media (max-width:480px){.hall__cadrans{grid-template-columns:1fr;max-width:340px}}

/* Écran tactile : les liens du pied de page et « Consulter le registre »
   deviennent assez hauts pour être visés au doigt. */
@media (pointer:coarse){
  .maison__lien,.hall__pied a{display:inline-flex;align-items:center;min-height:44px}
}