/* La Poterne Ardente · Q-III · La Frappe */

#fr-poterne{--nuit:#070410;--clair:#EEE8F3;--voile:rgba(238,232,243,.68);
 --voile2:rgba(238,232,243,.40);--trait:rgba(238,232,243,.12);
 --or:#C9A04A;--orc:#E5C77A;--ardent:#C17D5C;--ardentc:#E09A72;
 --serif:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
 --titre:ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
 position:relative;background:var(--nuit);border:1px solid var(--trait);
 color:var(--clair);font-family:var(--serif);overflow:hidden}
#fr-poterne *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#fr-poterne .fr-tete{padding:20px 20px 0}
#fr-poterne .fr-scene{display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:10px 12px 22px;min-height:min(70svh,560px)}
#fr-poterne #fr-rempart{width:min(100%,54svh);aspect-ratio:1;position:relative;overflow:hidden}
#fr-poterne .fr-refus{position:absolute;inset:0;z-index:9;background:var(--nuit);display:none;
 place-items:center;padding:30px}
#fr-poterne .fr-refus.on{display:grid}
#fr-poterne .fr-releve{padding:0 20px 30px;max-width:620px;margin:0 auto;width:100%}

#fr-poterne .fr-sur{font-family:var(--titre);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
 color:var(--ardent);display:flex;align-items:center;gap:11px}
#fr-poterne .fr-sur::before{content:"";width:22px;height:1px;background:var(--ardent);flex:none}
#fr-poterne .fr-tete{padding:calc(16px + env(safe-area-inset-top,0px)) 20px 0;flex:none}
#fr-poterne .fr-tete h1{font-weight:300;font-size:clamp(22px,5.4vw,32px);line-height:1.05;margin:10px 0 0}
#fr-poterne .fr-tete h1 em{font-style:italic;color:var(--ardentc)}
#fr-poterne .fr-pas{display:flex;gap:6px;margin:14px 0 0}
#fr-poterne .fr-pas i{flex:1;height:2px;background:var(--trait);position:relative;overflow:hidden}
#fr-poterne .fr-pas i b{position:absolute;inset:0 100% 0 0;background:var(--ardent);transition:right .5s}
#fr-poterne .fr-pas i.ok b{right:0}
#fr-poterne /* ── la scène ── */
.fr-scene{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:4px 12px calc(14px + env(safe-area-inset-bottom,0px));min-height:0;transition:opacity .6s}
#fr-poterne .fr-scene.retire{opacity:0;pointer-events:none}
#fr-poterne #fr-rempart{width:min(100%,62svh);aspect-ratio:1;flex:0 1 auto;position:relative;overflow:hidden}
#fr-poterne .fr-dit{text-align:center;padding:14px 10px 0;max-width:34ch;pointer-events:none;flex:none}
#fr-poterne .fr-dit s{text-decoration:none;display:block;font-family:var(--titre);font-size:9px;letter-spacing:.22em;
 text-transform:uppercase;color:var(--ardent);margin-bottom:9px}
#fr-poterne .fr-dit b{display:block;font-weight:400;font-size:clamp(18px,4.6vw,24px);line-height:1.25}
#fr-poterne .fr-dit u{text-decoration:none;display:block;font-size:14.5px;color:var(--voile2);margin-top:8px;
 font-style:italic;line-height:1.5;min-height:1.3em}
#fr-poterne .fr-scene.tenu .fr-dit b{color:var(--orc)}
#fr-poterne /* ── le refus ── */
.fr-refus{position:fixed;inset:0;z-index:99;background:var(--nuit);display:none;place-items:center;padding:30px}
#fr-poterne .fr-refus.on{display:grid}
#fr-poterne .fr-refus div{max-width:30ch;text-align:center}
#fr-poterne .fr-refus b{display:block;font-weight:400;font-size:clamp(21px,5.4vw,28px);line-height:1.25;margin:16px 0 0}
#fr-poterne .fr-refus p{color:var(--voile);font-size:15.5px;line-height:1.6;margin:14px 0 0}
#fr-poterne /* ── le relevé ── */
.fr-releve{display:none;padding:0 20px calc(30px + env(safe-area-inset-bottom,0px));max-width:620px;
 margin:0 auto;width:100%}
#fr-poterne .fr-releve.on{display:block}
#fr-poterne .fr-maison{border:1px solid var(--t,var(--ardent));padding:22px 20px;text-align:center;margin:10px 0 0;
 background:radial-gradient(120% 100% at 50% 0%,rgba(193,125,92,.13),transparent 72%),#0A0714}
#fr-poterne .fr-maison s{text-decoration:none;display:block;font-family:var(--titre);font-size:9px;letter-spacing:.22em;
 text-transform:uppercase;color:var(--ardent)}
#fr-poterne .fr-maison b{display:block;font-weight:400;font-size:clamp(30px,8vw,44px);line-height:1;margin:10px 0 0;
 color:var(--t,var(--ardentc))}
#fr-poterne .fr-maison b i{font-style:italic;font-size:.44em;color:var(--voile2);display:block;margin-top:6px;letter-spacing:.04em}
#fr-poterne .fr-maison u{text-decoration:none;display:block;font-size:15.5px;color:var(--voile);margin-top:12px;
 font-style:italic;line-height:1.5}
#fr-poterne .fr-lab{font-family:var(--titre);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--or);
 margin:30px 0 12px;display:flex;align-items:center;gap:12px}
#fr-poterne .fr-lab::after{content:"";flex:1;height:1px;background:var(--trait)}
#fr-poterne .fr-trait{border-left:2px solid var(--trait);padding:2px 0 2px 16px;margin:0 0 22px}
#fr-poterne .fr-trait.vif{border-left-color:var(--ardentc)}
#fr-poterne .fr-trait s{text-decoration:none;display:block;font-family:var(--titre);font-size:9px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--or);margin-bottom:9px}
#fr-poterne .fr-trait p{margin:0 0 5px;font-size:15.5px;line-height:1.5}
#fr-poterne .fr-trait p b{font-weight:400;color:var(--voile2);font-family:var(--titre);font-size:10px;
 letter-spacing:.1em;text-transform:uppercase;margin-right:6px}
#fr-poterne .fr-trait p i{font-style:italic;color:var(--voile2);font-size:14px}
#fr-poterne .fr-trait p span{display:block;font-size:14.5px;margin-top:3px}
#fr-poterne .fr-trait p span i{display:inline;color:var(--voile2)}
#fr-poterne .fr-dire{margin-top:10px !important;color:var(--clair);font-style:italic;font-size:15.5px;line-height:1.55}
#fr-poterne .fr-trait p.fr-dire b{font-family:var(--serif);font-size:inherit;letter-spacing:0;text-transform:none;
 color:var(--orc);margin:0;font-weight:400;font-style:italic}
#fr-poterne .fr-tri{margin-top:14px !important}
#fr-poterne .fr-tri > b{display:block;margin-bottom:6px}
#fr-poterne .fr-trait.vif .fr-dire{color:var(--orc)}
#fr-poterne table.fr-tb{width:100%;border-collapse:collapse;font-size:14.5px;margin:2px 0 0}
#fr-poterne table.fr-tb th{font-family:var(--titre);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--voile2);font-weight:400;text-align:left;padding:0 8px 6px 0}
#fr-poterne table.fr-tb td{padding:7px 8px 7px 0;border-top:1px solid var(--trait);vertical-align:top}
#fr-poterne table.fr-tb td:first-child{font-family:var(--titre);font-size:10px;color:var(--or);letter-spacing:.1em;width:1.6em}
#fr-poterne table.fr-tb td i{display:block;font-style:italic;color:var(--voile2);font-size:13px;margin-top:2px}
#fr-poterne table.fr-tb td.ok{color:var(--orc)}
#fr-poterne table.fr-tb td.pres{color:var(--voile)}
#fr-poterne table.fr-tb td.loin{color:var(--voile2)}
#fr-poterne .fr-deux{display:grid;gap:14px}
#fr-poterne .fr-penta{border:1px solid var(--trait);border-top:2px solid var(--t,var(--or));padding:16px 18px;background:#0A0714}
#fr-poterne .fr-penta s{text-decoration:none;display:block;font-family:var(--titre);font-size:9px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--t,var(--or))}
#fr-poterne .fr-penta em{display:block;font-style:italic;color:var(--voile2);font-size:14px;margin:4px 0 12px}
#fr-poterne .fr-penta dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:0;font-size:15px}
#fr-poterne .fr-penta dt{color:var(--voile2);font-family:var(--titre);font-size:9.5px;letter-spacing:.1em;
 text-transform:uppercase;padding-top:3px;white-space:nowrap}
#fr-poterne .fr-penta dd{margin:0}
#fr-poterne .fr-penta dd i{font-style:italic;color:var(--voile2);font-size:13.5px;display:block;margin-top:2px}
#fr-poterne .fr-note{font-size:13.5px;color:var(--voile2);font-style:italic;margin:18px 0 0;line-height:1.6}
#fr-poterne .fr-note.essai{border-top:1px solid var(--trait);padding-top:14px;margin-top:26px}
#fr-poterne .fr-act{display:flex;gap:10px;margin:24px 0 0}
#fr-poterne .fr-btn{appearance:none;cursor:pointer;font-family:var(--titre);font-size:10px;letter-spacing:.18em;
 text-transform:uppercase;padding:14px 20px;border:1px solid var(--ardent);background:rgba(224,154,114,.08);
 color:var(--ardentc)}

/* ═══ La Poterne Ardente — ce que la page ajoute à l'habillage ═══ */
.fr-apres{scroll-margin-top:84px}

/* ── le relevé de la main : trois lignes, rien de plus ───────────── */
.fr-main{max-width:720px;margin:34px auto 0;display:flex;flex-direction:column;gap:14px}
.fr-main .l{position:relative;padding:20px 22px 20px 26px;border:1px solid rgba(238,232,243,.12);
 background:rgba(238,232,243,.025)}
.fr-main .l:before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--t,#C9A04A);opacity:.75}
.fr-main .l > s{display:block;text-decoration:none;font-family:var(--titre,ui-sans-serif,system-ui,sans-serif);
 font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,232,243,.42);margin-bottom:11px}
.fr-main .l > b{display:block;font-size:22px;line-height:1.26;letter-spacing:.005em}
.fr-main .l > b em{font-style:italic;color:var(--t,#C9A04A)}
.fr-main .l > u{display:block;text-decoration:none;margin-top:7px;font-size:14.5px;
 color:rgba(238,232,243,.56);line-height:1.5}
.fr-main .l > u i{font-style:normal;color:rgba(238,232,243,.34)}

/* les trois Filaments en tableau serré */
.fr-main table{width:100%;border-collapse:collapse;margin-top:12px}
.fr-main table td{padding:8px 0;border-top:1px solid rgba(238,232,243,.08);vertical-align:baseline;font-size:15.5px}
.fr-main table tr:first-child td{border-top:0}
.fr-main table td:first-child{width:34px;font-family:var(--titre,ui-sans-serif,system-ui,sans-serif);
 font-size:10px;letter-spacing:.14em;color:rgba(238,232,243,.34);padding-right:10px}
.fr-main table td.q{text-align:right;font-size:12.5px;color:rgba(238,232,243,.46);white-space:nowrap;padding-left:12px}
.fr-main table td.q i{font-style:normal;display:inline-block;width:7px;height:7px;border-radius:50%;
 margin-right:7px;vertical-align:middle;background:var(--c,#C9A04A)}
.fr-main table td b{font-weight:400;letter-spacing:.02em}
.fr-main table td s{display:block;text-decoration:none;font-size:12.5px;
 color:rgba(238,232,243,.40);margin-top:2px;font-style:italic}

/* ── un bloc à deux colonnes : le texte à gauche, l'image à droite ── */
.fr-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
 gap:clamp(30px,4vw,56px);align-items:center}
.fr-duo > .pp-tete{max-width:none;margin-bottom:0}
.fr-duo > .fr-ill{margin-top:0}
@media (max-width:900px){
 .fr-duo{grid-template-columns:minmax(0,1fr);gap:0}
 .fr-duo > .pp-tete{margin-bottom:clamp(22px,3vw,32px)}
}

/* ── l'illustration d'un bloc : pleine largeur, jamais recadrée à l'aveugle ── */
.fr-ill{margin:34px 0 0;overflow:hidden;border:1px solid rgba(238,232,243,.10);
 background:#070410;position:relative}
.fr-ill:after{content:'';position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(7,4,16,.30) 0%,rgba(7,4,16,0) 22%,rgba(7,4,16,0) 74%,rgba(7,4,16,.46) 100%)}
.fr-ill img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
 object-position:center center;
 /* tant que l'image n'est pas là, le cadre reste une nuit calme :
    jamais un texte de remplacement posé de travers dans le vide */
 font-size:0;color:transparent;background:rgba(238,232,243,.03)}
@media (max-width:700px){ .fr-ill img{aspect-ratio:3/2} }

/* ── les quatre nombres de la preuve : pleine largeur, et qui portent ── */
.fr-preuve{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px}
.fr-preuve div{border:1px solid rgba(238,232,243,.14);background:rgba(238,232,243,.03);
 padding:34px 16px 28px;text-align:center;position:relative}
.fr-preuve div:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
 background:linear-gradient(90deg,transparent,#C9A04A,transparent);opacity:.55}
.fr-preuve b{display:block;font-family:var(--serif);font-weight:300;
 font-size:clamp(34px,4.4vw,58px);line-height:1;letter-spacing:-.01em;color:#E5C77A}
.fr-preuve span{display:block;font-family:var(--titre);font-size:10.5px;letter-spacing:.17em;
 text-transform:uppercase;color:rgba(238,232,243,.52);margin-top:16px;line-height:1.7}
@media (max-width:860px){
 .fr-preuve{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .fr-preuve div{padding:26px 12px 22px}
 .fr-preuve span{font-size:9.5px;letter-spacing:.13em;margin-top:12px}
}

/* ── le bouton de reprise, sous le formulaire ────────────────────── */
.fr-refrapper{margin-top:22px;font-size:13.5px;color:rgba(238,232,243,.46);line-height:1.62}
.fr-refrapper button{appearance:none;cursor:pointer;font-family:var(--titre,ui-sans-serif,system-ui,sans-serif);
 font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding:11px 17px;margin-right:10px;
 border:1px solid rgba(238,232,243,.2);background:transparent;color:rgba(238,232,243,.72)}
.fr-refrapper button:hover{border-color:rgba(238,232,243,.42);color:#EEE8F3}
.fr-refrapper i{font-style:normal}

@media (max-width:560px){
 .fr-main .l{padding:17px 17px 17px 21px}
 .fr-main .l > b{font-size:19px}
 .fr-main table td.q{font-size:11.5px;padding-left:8px}
}


/* ═══════════════════════════════════════════════════════════════════
   12.10.2026 · LE REMPART À GAUCHE, LA PAROLE À DROITE
   En desktop la scène tenait 456 px au milieu de 1130 : deux tiers de
   vide. Le diagramme prend la gauche et grandit, la parole et le mode
   d'emploi prennent la droite.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1000px){
  #fr-poterne .fr-scene{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(290px,370px);
    grid-template-rows:auto auto;
    align-items:center;
    align-content:center;
    justify-content:start;
    gap:clamp(26px,3vw,48px);
    padding:18px 30px 24px;
  }
  #fr-poterne #fr-rempart{
    width:min(100%,520px);height:auto;aspect-ratio:1/1;margin:0;
    grid-column:1;grid-row:1 / span 2;align-self:center;justify-self:start;
  }
  #fr-poterne #fr-rempart svg{width:100%;height:100%;display:block}
  #fr-poterne .fr-dit{
    grid-column:2;grid-row:1;align-self:end;
    max-width:none;text-align:left;padding:0;
  }
  #fr-poterne .fr-dit s{display:block}
  #fr-poterne .fr-dit b{display:block;margin-top:12px;font-size:clamp(21px,1.8vw,27px);line-height:1.18}
  #fr-poterne .fr-dit u{display:block;margin-top:14px;font-size:16.5px;line-height:1.72}
  #fr-poterne .fr-guide{grid-column:2;grid-row:2;align-self:start;margin-top:24px}
  #fr-poterne .fr-refus{grid-column:2;grid-row:1 / span 2;align-self:center}
}

/* ─── le mode d'emploi, sous la parole ─── */
#fr-poterne .fr-guide{list-style:none;margin:0;padding:0;border-top:1px solid rgba(229,199,122,.16);display:none}
#fr-poterne .fr-guide li{
  display:grid;grid-template-columns:30px 1fr;gap:0 12px;align-items:baseline;
  padding:13px 0 12px;border-bottom:1px solid rgba(229,199,122,.10);
  opacity:.42;transition:opacity .4s;
}
#fr-poterne .fr-guide li s{
  grid-row:1 / span 2;text-decoration:none;
  font-family:"Cinzel",Georgia,serif;font-size:12px;letter-spacing:.1em;
  color:#B8924A;text-align:right;line-height:1.5;
}
#fr-poterne .fr-guide li b{
  font-weight:400;font-family:"Cinzel",Georgia,serif;
  font-size:14.5px;letter-spacing:.02em;color:#EEE8F3;line-height:1.4;
}
#fr-poterne .fr-guide li u{
  text-decoration:none;font-size:14.5px;line-height:1.55;
  color:rgba(238,232,243,.52);font-style:italic;padding-top:3px;
}
#fr-poterne .fr-guide li.ici{opacity:1}
#fr-poterne .fr-guide li.ici s{color:#F3E2AE}
#fr-poterne .fr-guide li.fait{opacity:.62}
#fr-poterne .fr-guide li.fait s::after{content:" \2713";color:#C9A04A}
#fr-poterne .fr-guide li.fait b{color:rgba(238,232,243,.72)}
@media (min-width:1000px){ #fr-poterne .fr-guide{display:block} }

/* ═══ le ciel brille et scintille ═══
   Les 216 étoiles battaient toutes ensemble : un clignotement, pas un
   ciel. On décale chacune et on monte la pointe de lumière. */
svg#rp-svg #rp-zoom.jeu-ciel circle.et{animation:ank-sc 3.2s ease-in-out infinite}
@keyframes ank-sc{
  0%,100%{fill-opacity:.14}
  42%{fill-opacity:1}
  58%{fill-opacity:.88}
  74%{fill-opacity:.30}
}
svg#rp-svg #rp-zoom.jeu-ciel circle.et:nth-child(9n+1){animation-delay:-.1s;animation-duration:2.6s}
svg#rp-svg #rp-zoom.jeu-ciel circle.et:nth-child(9n+2){animation-delay:-.7s;animation-duration:3.7s}
svg#rp-svg #rp-zoom.jeu-ciel circle.et:nth-child(9n+3){animation-delay:-1.4s;animation-duration:2.9s}
svg#rp-svg #rp-zoom.jeu-ciel circle.et:nth-child(9n+4){animation-delay:-2.1s;animation-duration:4.1s}
svg#rp-svg #rp-zoom.jeu-ciel circle.et:nth-child(9n+5){animation-delay:-.4s;animation-duration:3.3s}
svg#rp-svg #rp-zoom.jeu-ciel circle.et:nth-child(9n+6){animation-delay:-2.8s;animation-duration:2.4s}
svg#rp-svg #rp-zoom.jeu-ciel circle.et:nth-child(9n+7){animation-delay:-1.1s;animation-duration:3.9s}
svg#rp-svg #rp-zoom.jeu-ciel circle.et:nth-child(9n+8){animation-delay:-1.9s;animation-duration:3.0s}
svg#rp-svg #rp-zoom.jeu-ciel circle.et:nth-child(9n+9){animation-delay:-.25s;animation-duration:4.4s}
@media (min-width:1000px){
  svg#rp-svg #rp-zoom.jeu-ciel circle.et{filter:drop-shadow(0 0 1.2px rgba(243,226,174,.8))}
}
@media (prefers-reduced-motion:reduce){
  svg#rp-svg #rp-zoom.jeu-ciel circle.et{animation:none;fill-opacity:.6;filter:none}
}


/* ═══════════════════════════════════════════════════════════════════
   12.10.2026 · LE RELEVÉ PREND TOUTE LA LARGEUR
   Le relevé tenait 620 px au milieu de 1132, et son dernier cadre
   touchait la couronne du formulaire. Trois colonnes, et de l'air
   entre les deux cadres.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1000px){

  /* ── le relevé posé au-dessus du formulaire ── */
  .fr-main{
    max-width:none;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    align-items:stretch;
    margin:36px 0 46px;
  }
  .fr-main .l{display:flex;flex-direction:column}
  .fr-main .l > b{font-size:20px}
  .fr-main table{margin-top:14px}
  .fr-main table td{font-size:14.5px;padding:7px 0}
  .fr-main table td.q{font-size:11.5px}

  /* ── le relevé d'essai, dans la poterne ── */
  #fr-poterne .fr-releve.on{
    max-width:none;
    padding:0 30px 34px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:20px;
    align-items:start;
  }
  #fr-poterne .fr-releve.on > .fr-maison,
  #fr-poterne .fr-releve.on > .fr-lab,
  #fr-poterne .fr-releve.on > .fr-deux,
  #fr-poterne .fr-releve.on > .fr-note,
  #fr-poterne .fr-releve.on > .fr-act{grid-column:1 / -1}
  #fr-poterne .fr-releve.on > .fr-trait{margin-bottom:0}
  #fr-poterne .fr-deux{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  #fr-poterne .fr-maison{padding:26px 28px}
}

/* ═══ les médaillons du relevé ═══
   Même rendu que les deux autres Poternes : un disque de 72 px,
   cerné d'or, posé en tête de chaque trait. */
.fr-med{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;padding:4px;
  border:1px solid rgba(229,199,122,.32);
  background:rgba(14,10,27,.55);
  overflow:hidden;font-size:0;flex:0 0 auto;
  margin:0 0 14px;
}
.fr-med img{
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:block;opacity:.95;
  border:1px solid rgba(229,199,122,.16);
}
#fr-poterne .fr-trait > .fr-med{margin:2px 0 14px}
#fr-poterne .fr-maison > .fr-med{margin:0 auto 14px}
@media (max-width:999px){
  .fr-main .l > .fr-med{width:56px;height:56px;margin-bottom:12px}
}

/* le trait des trois Veilleurs porte un tableau : on lui donne plus d'air */
@media (min-width:1000px){
  #fr-poterne .fr-releve.on{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}
  #fr-poterne table.fr-tb td,
  #fr-poterne .fr-trait table td{white-space:normal}
  .fr-main .l table td.q{white-space:normal}
}


/* ═══════════════════════════════════════════════════════════════════
   12.10.2026 · LE RELEVÉ DANS UN CADRE, LA POTERNE À DROITE
   Même grammaire que les deux autres Poternes : un cadre, le texte à
   gauche, le grand médaillon qui saigne sur la droite.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1000px){
  .fr-main{
    position:relative;overflow:hidden;
    border:1px solid rgba(229,199,122,.18);
    background:#0E0A1B;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);
    grid-template-rows:auto auto;
    column-gap:34px;row-gap:26px;
    padding:clamp(22px,3vw,38px);
    padding-right:clamp(330px,34%,400px);
    margin:36px 0 46px;
    align-items:start;
  }
  .fr-main > *{position:relative;z-index:1}
  .fr-main .l{border:0;background:transparent;padding:2px 0 2px 22px}
  .fr-main .l:nth-child(1){grid-column:1;grid-row:1}
  .fr-main .l:nth-child(3){grid-column:1;grid-row:2}
  .fr-main .l:nth-child(2){grid-column:2;grid-row:1 / span 2}
  .fr-main::after{
    content:"";position:absolute;right:0;top:0;bottom:0;
    width:clamp(300px,31%,370px);
    background:url(/visuels/poternes/poterne-frappe.webp) center/cover;
    opacity:.9;z-index:0;
    -webkit-mask-image:linear-gradient(to left,#000 70%,transparent);
    mask-image:linear-gradient(to left,#000 70%,transparent);
  }
}
@media (max-width:999px){
  .fr-main{border:1px solid rgba(229,199,122,.18);background:#0E0A1B;padding:20px;margin:30px 0 36px}
  .fr-main .l{border:0;background:transparent;padding-left:18px}
}

/* ═══ on voit que c'est scellé ═══ */
#fr-poterne .fr-tete{position:relative}
#fr-poterne .fr-sceau{display:none}
#fr-poterne.scelle .fr-sceau{
  display:inline-flex;align-items:center;gap:9px;
  position:absolute;right:20px;top:14px;
  font-family:"Cinzel",Georgia,serif;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#F3E2AE;
}
#fr-poterne.scelle .fr-sceau i{
  font-style:normal;font-size:12px;color:#E5C77A;line-height:1;
}
#fr-poterne.scelle{
  box-shadow:0 0 0 1px rgba(229,199,122,.34), 0 0 52px rgba(229,199,122,.09);
}
#fr-poterne.scelle .fr-pas i b{background:#E5C77A !important;opacity:1}
#fr-poterne.scelle .fr-guide li{opacity:.6}
#fr-poterne.scelle .fr-guide li s::after{content:" \2713";color:#C9A04A}
@media (max-width:760px){
  #fr-poterne.scelle .fr-sceau{position:static;display:flex;margin-top:10px;right:auto;top:auto}
}

/* la colonne du chiffre doit tenir « III ✓ » sur une ligne */
#fr-poterne .fr-guide li{grid-template-columns:42px 1fr}
#fr-poterne .fr-guide li s{white-space:nowrap}

/* le sceau ne doit pas toucher le cadre */
#fr-poterne.scelle .fr-tete{padding-bottom:18px}
@media (max-width:760px){
  #fr-poterne .fr-tete{padding:18px 18px 0}
  #fr-poterne.scelle .fr-tete{padding-bottom:18px}
  #fr-poterne.scelle .fr-sceau{position:static;display:flex;margin-top:16px;right:auto;top:auto;letter-spacing:.18em}
  #fr-poterne .fr-pas{margin-top:16px}
}

/* ─── en mobile : trois blocs distincts, pas un seul cadre ─── */
@media (max-width:999px){
  .fr-main{
    border:0 !important;background:none !important;padding:0 !important;
    display:flex !important;flex-direction:column;gap:16px;
    margin:30px 0 36px !important;
  }
  .fr-main::after{display:none !important}
  .fr-main .l{
    border:1px solid rgba(238,232,243,.12) !important;
    background:rgba(238,232,243,.024) !important;
    padding:20px 22px 20px 26px !important;
  }
  .fr-main .l > .fr-med{width:60px;height:60px;margin-bottom:14px}
}

/* trois blocs simples : pas de trait d'or à gauche en mobile */
@media (max-width:999px){
  .fr-main .l{padding:20px 22px !important}
  .fr-main .l::before{display:none !important}
}