/* =====================================================================
   CERCLE MAGUS – L'histoire d'un Fondateur
   Blason, nom, portrait dans son arche, puis le récit des élèves.
   ===================================================================== */

/* « --lecture » : la police du récit. Spectral est dessinée pour la lecture
   à l'écran, et son empattement donne au texte un air de livre ancien
   qu'une police d'interface n'aurait pas. */
.page-fondateur{--house:var(--gilt);--lecture:'Spectral',Georgia,'Times New Roman',serif}

.fondateur{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:2rem 1.25rem 4rem}
.fondateur__retour{font-family:var(--ui);font-size:.85rem;letter-spacing:.03em;text-decoration:none;color:var(--muted)}
.fondateur__retour:hover{color:var(--ivory)}
.fondateur__nom{font-family:var(--display);font-size:clamp(1.9rem,6vw,2.6rem);margin:1.4rem 0 .8rem}

/* ---------- En-tête : le blason, le titre, le nom ---------- */
.recit__entete{text-align:center;margin-top:1rem}
/* Le même blason que sur le cadran : on arrive ici en cliquant dessus. */
.recit__blason{display:block;width:84px;height:84px;margin:0 auto .8rem;color:var(--house);filter:drop-shadow(0 0 6px var(--house))}
.recit__sur-titre{margin:0;padding-left:.28em;font-family:var(--ui);font-size:.8rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--house);color:color-mix(in srgb,var(--house) 70%,var(--ivory))}
.recit__maison{white-space:nowrap}
.recit__nom{margin:.18em 0 0;font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,7vw,3.5rem);color:var(--ivory);text-shadow:0 0 30px color-mix(in srgb,var(--house) 35%,transparent)}
.recit__filet{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1rem}
.recit__filet span{height:1px;width:min(110px,22vw);background:linear-gradient(90deg,transparent,var(--line))}
.recit__filet span:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.recit__filet i{color:var(--gilt);font-size:.7rem;font-style:normal}

/* ---------- Le portrait, dans une arche ----------
   Cadre au format 4 sur 5 (portrait), coiffé d'un demi-cercle : 50 % de la
   largeur sur 40 % de la hauteur donnent un arc parfait. Le cadre garde ses
   proportions quelle que soit l'image ; elle s'y ajuste en le remplissant,
   cadrée un peu au-dessus du centre, là où se trouve d'ordinaire le visage.
   La hauteur vient de « padding-top » plutôt que d'« aspect-ratio », que
   les tablettes anciennes ne connaissent pas. */
.portrait{width:min(300px,76vw);margin:1.9rem auto 0}
.portrait__cadre{position:relative;padding-top:125%;overflow:hidden;border-radius:50% 50% 14px 14px / 40% 40% 14px 14px;background:radial-gradient(110% 80% at 50% 18%,color-mix(in srgb,var(--house) 22%,var(--ground-2)) 0%,var(--ground) 72%);border:1px solid color-mix(in srgb,var(--house) 55%,var(--line));box-shadow:0 0 0 6px rgba(15,17,40,.85),0 0 0 7px color-mix(in srgb,var(--gilt) 42%,transparent),0 0 48px color-mix(in srgb,var(--house) 28%,transparent),var(--ombre)}
.portrait__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* En attendant le portrait : un buste en ombre chinoise, à la couleur de la
   Maison, et la mention qui dit qu'il viendra. */
.portrait__attente{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.5rem}
.portrait__silhouette{position:absolute;left:11%;bottom:0;width:78%;height:auto;fill:var(--house);opacity:.17}
.portrait__mention{position:relative;font-family:var(--ui);font-size:.72rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
/* ---------- Les commandes du portrait ----------
   Visibles du seul Maître de la Maison connecté (et du webmestre). Les
   boutons et messages viennent d'admin.css, chargé pour lui seul.
   Sans JavaScript : le champ de fichier et « Envoyer » s'affichent.
   Avec : admin.js pose « envoi-auto » sur le formulaire, et le bouton
   « Changer le portrait » ouvre directement le choix de l'image, qui part
   aussitôt choisie. Le champ, masqué à l'œil, reste atteignable au clavier :
   c'est alors le bouton qui montre le focus. */
.gestion{width:min(26rem,100%);margin:1.3rem auto 0;font-family:var(--ui)}
.gestion__commandes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem}
.gestion__commandes form{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem}
.gestion__fichier{max-width:100%;font-family:var(--ui);font-size:.85rem;color:var(--muted)}
.gestion__choisir{display:none}
.envoi-auto .gestion__fichier{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
.envoi-auto .gestion__choisir{display:inline-flex;align-items:center;cursor:pointer}
.envoi-auto .gestion__valider{display:none}
.envoi-auto .gestion__fichier:focus-visible + .gestion__choisir{outline:2px solid var(--azur);outline-offset:3px}
.envoi-en-cours .gestion__choisir{opacity:.6;pointer-events:none}
.gestion__retirer:hover{color:var(--perte);border-color:var(--perte);background:rgba(255,106,125,.12)}
.gestion__etat{min-height:0;margin:.6rem 0 0;font-size:.86rem;color:var(--ivory);text-align:center}
.gestion__etat:empty{display:none}
.gestion__alerte{margin:.8rem 0 0;font-size:.9rem;text-align:left}

/* ---------- Le récit ---------- */
/* Texte justifié, comme dans un livre. La césure (la langue de la page est
   le français) évite les grands blancs entre les mots, surtout sur la
   colonne étroite d'un téléphone ; elle ne coupe pas les mots trop courts. */
.recit__texte{max-width:36rem;margin:2.8rem auto 0;font-family:var(--lecture);font-weight:500;font-size:1.13rem;line-height:1.8;color:#dde1f7}
.recit__texte p{margin:0 0 1.05em;text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3}
/* Les paroles des personnages, à la couleur de la Maison mêlée au ton du
   texte : on les distingue d'un coup d'œil, sans qu'elles crient. L'incise
   (« dit-il », « répond Takedo »), voix du narrateur, garde le ton neutre.
   Repli en ivoire pour les navigateurs qui ignorent color-mix. */
.recit__parole{color:var(--ivory);color:color-mix(in srgb,var(--house) 40%,#dde1f7)}
/* Lettrine : la première lettre du récit, dans la police des titres et à
   la couleur de la Maison, comme au seuil d'un chapitre. */
.recit__texte > p:first-child::first-letter{float:left;margin:.07em .14em 0 0;font-family:var(--display);font-weight:600;font-size:3.5em;line-height:.8;color:var(--house);color:color-mix(in srgb,var(--house) 80%,var(--ivory));text-shadow:0 0 18px color-mix(in srgb,var(--house) 50%,transparent)}
/* Une pause dans le récit (un bloc « ✦ » en base) : un filet orné. */
.recit__pause{position:relative;height:1px;width:min(240px,60%);margin:2.5rem auto;border:0;overflow:visible;background:linear-gradient(90deg,transparent,var(--line) 32%,transparent 44%,transparent 56%,var(--line) 68%,transparent)}
.recit__pause::after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.72rem;line-height:1;color:var(--gilt)}
/* La dernière phrase, mise en exergue. Les quatre récits s'achèvent sur la
   même : « … de cette rencontre naîtra le Cercle Magus. » */
.recit__texte > p:last-child{margin:2.4rem 0 0;text-align:center;font-family:var(--display);font-weight:600;font-size:1.22rem;line-height:1.5;color:var(--ivory)}

/* ---------- Les autres Fondateurs ---------- */
.autres{margin-top:3.6rem;padding-top:2rem;border-top:1px solid var(--line);text-align:center}
.autres__titre{margin:0 0 1.2rem;font-family:var(--ui);font-weight:500;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
.autres__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.autres__lien{height:100%;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1.1rem .7rem 1rem;border:1px solid color-mix(in srgb,var(--house) 28%,var(--line));border-radius:var(--rayon);background:linear-gradient(180deg,rgba(28,34,80,.55),rgba(20,23,51,.35));color:var(--ivory);text-decoration:none;transition:border-color .25s,background .25s,transform .25s}
.autres__lien:hover,.autres__lien:focus-visible{border-color:var(--house);background:color-mix(in srgb,var(--house) 10%,rgba(20,23,51,.5));transform:translateY(-2px)}
.autres__logo{width:64px;height:64px;color:var(--house);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--house) 70%,transparent));transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.autres__lien:hover .autres__logo,.autres__lien:focus-visible .autres__logo{transform:scale(1.08)}
.autres__textes{display:flex;flex-direction:column;gap:.15rem;line-height:1.25}
.autres__nom{font-family:var(--display);font-weight:600;font-size:1.02rem}
.autres__maison{font-size:.78rem;color:var(--muted);color:color-mix(in srgb,var(--house) 40%,var(--muted))}

/* Vers le registre de la Maison – même allure qu'à l'Observatoire */
.fondateur__registre{margin:2.4rem 0 0;text-align:center}
.fondateur__registre a{display:inline-block;padding:.5em 1em;font-family:var(--ui);font-size:.88rem;color:var(--ivory);text-decoration:none;border-radius:8px;border:1px solid transparent;border-bottom:1.5px solid var(--house);transition:background .2s,border-color .2s}
.fondateur__registre a:hover{background:color-mix(in srgb,var(--house) 16%,transparent);border-color:var(--house)}
.fondateur__fleche{margin-left:.2em;color:var(--house)}

/* ---------- Téléphone ---------- */
@media (max-width:560px){
  .recit__sur-titre{font-size:.74rem;letter-spacing:.2em;padding-left:.2em}
  .recit__texte{font-size:1.06rem;line-height:1.75}
  .autres__liste{grid-template-columns:1fr;gap:.6rem}
  .autres__lien{flex-direction:row;gap:.9rem;padding:.7rem .9rem;text-align:left}
  .autres__logo{width:52px;height:52px;flex:none}
}
/* Écran tactile : cibles au doigt (44 px recommandés). */
/* Le lien du registre peut tenir sur deux lignes : il grandit par ses marges
   plutôt qu'en « flex », qui détacherait la flèche du texte. */
@media (pointer:coarse){
  .fondateur__retour{display:inline-flex;align-items:center;min-height:44px}
  .fondateur__registre a{padding:.75em 1em}
}