/* Styles communs des pages « mot » gratuites (site/mots/). Pages fabriquées par outils/mots-gratuits.mjs. */
/* Une page « mot » : les mêmes blocs que la page du livre (mot, sens, verset),
   aux mesures du livre sur un écran de téléphone, posés dans le site. */
.rang { text-align: center; }
h1 { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 30px; line-height: 1.2; text-align: center; color: var(--texte); margin-top: 10px; }
h1 em { font-style: italic; color: var(--bordeaux); }

.mot { text-align: center; }
.arabe { font-family: 'KFGQPC', serif; font-size: 110px; line-height: 1.2; direction: rtl; color: var(--texte); }
.phon { display: inline-block; margin-top: 8px; font-size: 20px; font-weight: 500; letter-spacing: .18em; color: var(--bordeaux); }

.sens { text-align: center; }
.veut { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--discret); }
.titre { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 42px; letter-spacing: .08em; text-transform: uppercase;
         color: var(--bordeaux); line-height: 1.1; margin-top: 2px; }
.compte { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--doux); }
.compte b { font-family: 'EB Garamond', serif; font-size: 20px; font-weight: 600; color: var(--texte); }
.formes { display: flex; justify-content: center; gap: 9px; margin-top: 14px; }
.formes > span { flex: 1; max-width: 190px; border-radius: 20px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9);
                 box-shadow: 0 4px 12px -6px var(--verre-ombre); padding: 6px 12px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.formes i { font-family: 'KFGQPC', serif; font-style: normal; font-size: 36px; color: var(--texte); line-height: 1.35; }
.formes .txt { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.formes .txt b { font-size: 15px; font-weight: 600; color: var(--bordeaux); letter-spacing: .04em; }
.formes .txt span { font-family: 'EB Garamond', serif; font-size: 18px; color: var(--texte); }

.verset { text-align: center; }
.verset .ar { font-family: 'KFGQPC', serif; font-size: 34px; line-height: 1.75; direction: rtl; margin-top: 6px; }
.verset .ar em, .verset .fr em { font-style: normal; color: var(--bordeaux); }
.verset .fr { font-family: 'EB Garamond', serif; font-size: 21px; line-height: 1.4; margin-top: 2px; }
.verset .fr em { font-weight: 600; }
.verset .ref { font-size: 12px; color: var(--discret); margin-top: 8px; }

.bref .para { text-align: left; margin-top: 14px; }
.arTexte { font-family: 'KFGQPC', serif; font-size: 1.25em; }

/* Le lien vers le livre */
.livre { display: flex; gap: 16px; align-items: center; }
.livre img { width: 96px; border-radius: 6px; box-shadow: 0 14px 24px -12px rgba(70,20,20,.5); flex: 0 0 auto; }
.livre p { font-family: 'EB Garamond', serif; font-size: 18px; line-height: 1.35; }
.livre p b { color: var(--bordeaux); font-weight: 600; }
.livre + .bouton { margin-top: 18px; }


/* Formes trop longues pour tenir côte à côte : empilées, comme dans le livre */
.formes.empile > span { flex-direction: column; gap: 0; padding: 5px 9px 7px; }
.formes.empile .txt { text-align: center; }