/* Charte de Marion : carnet imprimé, fond blanc, aplats pastel, filets fins, aucun arrondi ni ombre.
   Mise en page : une colonne éditoriale large, les schémas de grains au centre de chaque page. */
@font-face{font-family:"Lora";src:url("fonts/lora.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Adventor";src:url("fonts/adventor.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --encre:#1e2528; --discret:#5e686c; --filet:#e3e4e4; --fond:#ffffff; --panneau:#f6f7f6;
  --violet:#5e4e8c; --ocre:#8a6a1f; --vert:#2f6b4f; --petrole:#2f5a66;
  --lavande:#ece8f4; --bleugris:#e1ecee; --creme:#f5eedc; --menthe:#e2f0e7;
  --titre:"Lora",Georgia,"Times New Roman",serif;
  --texte:"Adventor","Century Gothic",Futura,"Avenir Next",sans-serif;
  --mono:"IBM Plex Mono","DejaVu Sans Mono",Menlo,monospace;
  --c:var(--violet); --a:var(--lavande);
}
.s-joyeux{--c:var(--violet);--a:var(--lavande)}
.s-lumineux{--c:var(--ocre);--a:var(--creme)}
.s-douloureux{--c:var(--vert);--a:var(--menthe)}
.s-glorieux{--c:var(--petrole);--a:var(--bleugris)}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--texte);font-size:1rem;line-height:1.6}
a{color:var(--violet);text-underline-offset:.18em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
img,svg{max-width:100%}
p{margin:0}
.enveloppe{max-width:62rem;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}

/* En-tête */
.entete{border-bottom:1px solid var(--filet)}
.entete .enveloppe{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-block:1.1rem}
.marque{font-family:var(--titre);font-size:1.35rem;color:var(--violet);text-decoration:none;margin-right:auto;display:flex;align-items:center;gap:.6rem}
.marque svg{width:22px;height:22px}
.nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.nav a{color:var(--encre);text-decoration:none;font-size:.9rem;padding-block:.2rem;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--violet);color:var(--violet)}
.langue{font-family:var(--texte);font-size:.8rem;border:1px solid var(--filet);background:var(--fond);color:var(--encre);padding:.3rem .5rem;border-radius:0}

/* Typographie */
.sur{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--discret)}
h1,h2,h3{font-family:var(--titre);font-weight:400;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.08;color:var(--violet)}
h2{font-size:clamp(1.45rem,3vw,1.85rem);line-height:1.15}
h3{font-size:1.15rem;line-height:1.25}
.chapeau{font-family:var(--titre);font-style:italic;font-size:1.15rem;color:var(--discret);max-width:38rem;line-height:1.5}
.corps{max-width:38rem}
.corps p+p{margin-top:.9rem}
.petit{font-size:.82rem;color:var(--discret)}
.citation{font-family:var(--titre);font-style:italic;font-size:1.15rem;line-height:1.5}
.source{font-family:var(--mono);font-size:.72rem;color:var(--discret);margin-top:.4rem}

/* Blocs */
main{padding-block:2.5rem 4rem}
.tete{display:grid;gap:.9rem;margin-bottom:2.5rem}
.section{margin-top:3.2rem;border-top:1.5px solid var(--c);padding-top:1.1rem}
.section>.sur{color:var(--c);margin-bottom:.8rem}
.titre-num{display:flex;gap:1rem;align-items:baseline;margin-bottom:1rem}
.titre-num .n{font-family:var(--titre);font-size:2rem;color:var(--c);line-height:1}
.panneau{background:var(--panneau);padding:1.2rem 1.4rem}

/* Bandeau de flux */
.flux{display:flex;align-items:stretch;gap:.5rem;flex-wrap:wrap;margin-block:1.5rem}
.flux>div,.flux>a{flex:1 1 8.5rem;padding:.9rem 1rem;min-width:0;color:var(--encre);text-decoration:none}
.flux>a:hover b{text-decoration:underline;text-underline-offset:.18em}
.flux>a.fin{color:#fff}
.flux b{display:block;font-family:var(--titre);font-weight:400;font-size:1.05rem}
.flux span{font-size:.8rem}
.flux .fl{flex:0 0 auto;align-self:center;color:#9aa3a6;padding:0}
.flux .fin{background:var(--violet);color:#fff}
.a1{background:var(--lavande)}.a2{background:var(--bleugris)}.a3{background:var(--creme)}.a4{background:var(--menthe)}.a0{background:var(--panneau)}

/* Liste numérotée */
.liste{list-style:none;margin:0;padding:0}
.liste>li{display:grid;grid-template-columns:2.6rem minmax(0,14rem) minmax(0,1fr);gap:.4rem 1rem;padding:.9rem 0;border-bottom:1px solid var(--filet);align-items:baseline}
.liste .n{font-family:var(--titre);font-size:1.35rem;color:var(--c);line-height:1}
.liste .t{font-family:var(--titre);font-size:1.08rem}
.liste .d{font-size:.92rem;min-width:0}
@media (max-width:640px){.liste>li{grid-template-columns:2.2rem minmax(0,1fr)}.liste .d{grid-column:2}}

/* Portes de l'accueil */
.portes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2.5rem}
.porte{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 1.3rem 1.2rem;text-decoration:none;color:var(--encre);min-height:10rem}
.porte h2{font-size:1.35rem;color:var(--c)}
.porte .petit{color:var(--encre);opacity:.8}
.porte .aller{margin-top:auto;font-size:.85rem;color:var(--c)}
.porte:hover .aller{text-decoration:underline}
@media (max-width:760px){.portes{grid-template-columns:1fr}.porte{min-height:0}}

/* Accueil */
.une{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.5rem;align-items:center}
.une .schema{justify-self:center;width:100%;max-width:26rem}
@media (max-width:760px){.une{grid-template-columns:1fr}.une .schema{max-width:20rem}}

/* Prières */
.priere{padding:1.4rem 0;border-bottom:1px solid var(--filet);display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:1rem 2rem}
.priere h3{color:var(--violet)}
.priere .texte{font-family:var(--titre);font-size:1.08rem;line-height:1.65;max-width:38rem}
.priere .trad{font-size:.92rem;color:var(--discret);margin-top:.8rem;max-width:38rem}
.priere .ou{font-size:.8rem;color:var(--discret);margin-top:.3rem}
@media (max-width:640px){.priere{grid-template-columns:1fr}}

/* Mystères */
.onglets{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.5rem}
.onglets button{font-family:var(--titre);font-size:1rem;padding:.55rem 1rem;border:1px solid var(--filet);background:var(--fond);color:var(--encre);cursor:pointer;border-radius:0}
.onglets button[aria-pressed="true"]{background:var(--a);border-color:var(--a);color:var(--c)}
.mystere{display:grid;grid-template-columns:2.6rem minmax(0,15rem) minmax(0,1fr);gap:.4rem 1.2rem;padding:1.2rem 0;border-bottom:1px solid var(--filet);align-items:baseline}
.mystere .n{font-family:var(--titre);font-size:1.5rem;color:var(--c);line-height:1}
.mystere h3{font-size:1.12rem}
.mystere .fruit{font-size:.82rem;color:var(--discret);margin-top:.25rem}
.mystere .verset{font-family:var(--titre);font-style:italic;line-height:1.6}
.mystere .ref{font-family:var(--mono);font-size:.72rem;color:var(--discret);margin-top:.35rem;font-style:normal}
@media (max-width:640px){.mystere{grid-template-columns:2.2rem minmax(0,1fr)}.mystere .verset-bloc{grid-column:2}}

/* Semaine */
.semaine{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem}
.jour{padding:.6rem .6rem;background:var(--a);color:var(--c);min-height:4.2rem;display:flex;flex-direction:column;gap:.3rem;text-decoration:none}
.jour .j{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.jour b{font-family:var(--titre);font-weight:400;font-size:1rem;line-height:1.2}
.jour.auj{outline:1.5px solid var(--c);outline-offset:-1.5px}
.jour.auj .j::after{content:" · aujourd'hui"}
@media (max-width:700px){.semaine{grid-template-columns:1fr}.jour{min-height:0;flex-direction:row;align-items:baseline;gap:1rem}.jour .j{min-width:6.5rem}}

/* Chapelet guidé */
.guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem;align-items:start}
.guide .schema{position:sticky;top:1rem}
@media (max-width:820px){.guide{grid-template-columns:1fr}.guide .schema{position:static;width:100%;max-width:12rem;justify-self:center}
 .guide .commandes{position:sticky;bottom:0;z-index:2;background:var(--fond);padding-block:.7rem calc(.7rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--filet);order:9}
 .guide .commandes .bouton{flex:1;padding-block:.95rem;font-size:1rem}
 .guide .commandes .petit{display:none}}
.guide .commandes{display:flex}
.carte{border-top:1.5px solid var(--c);padding-top:1rem;display:grid;gap:1rem}
.carte .ou{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.carte .ou .sur{color:var(--c)}
.compteur{font-family:var(--mono);font-size:.78rem;color:var(--discret)}
.myst-encart{background:var(--a);padding:1rem 1.2rem;display:grid;gap:.5rem}
.myst-encart .sur{color:var(--c)}
.myst-encart h3{color:var(--c)}
.myst-encart .verset{font-family:var(--titre);font-style:italic;line-height:1.55}
.myst-encart .ref{font-family:var(--mono);font-size:.72rem;color:var(--discret)}
.priere-courante h3{color:var(--violet);margin-bottom:.4rem}
.priere-courante .texte{font-family:var(--titre);font-size:1.12rem;line-height:1.65}
.priere-courante+.priere-courante{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--filet)}
.commandes{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.bouton{font-family:var(--texte);font-size:.9rem;padding:.7rem 1.3rem;border:1px solid var(--violet);background:var(--fond);color:var(--violet);cursor:pointer;border-radius:0;text-decoration:none;display:inline-block}
.bouton.plein{background:var(--violet);color:#fff}
.bouton:disabled{opacity:.4;cursor:default}
.bouton:not(:disabled):hover{background:var(--violet);color:#fff}
.barre{height:3px;background:var(--filet);position:relative}
.barre i{position:absolute;inset:0 auto 0 0;background:var(--c);transition:width .25s}
.choix-serie{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.choix-serie select{font-family:var(--titre);font-size:1rem;padding:.45rem .6rem;border:1px solid var(--filet);background:var(--fond);color:var(--encre);border-radius:0}

/* Schéma du chapelet */
.grain{fill:var(--fond);stroke:var(--discret);stroke-width:1}
.grain.grand{fill:var(--panneau)}
.grain.fait{fill:var(--a);stroke:var(--c)}
.grain.ici{fill:var(--c);stroke:var(--c)}
.cordon{fill:none;stroke:#c9cdce;stroke-width:1}
.croix{fill:none;stroke:var(--encre);stroke-width:1.6;stroke-linecap:square}
.medaille{fill:var(--fond);stroke:var(--encre);stroke-width:1}
.medaille.ici{fill:var(--c);stroke:var(--c)}
.croix.ici{stroke:var(--c);stroke-width:2.6}
.etiq{font-family:var(--texte);font-size:11px;fill:var(--discret)}
.etiq-n{font-family:var(--titre);font-size:15px;fill:var(--violet)}
.cliquable{cursor:pointer}
@media (prefers-reduced-motion:reduce){.barre i{transition:none}}

/* Boutique */
.produit{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:2rem;align-items:start}
@media (max-width:700px){.produit{grid-template-columns:1fr}}
.couverture{aspect-ratio:210/297;max-width:100%;background:var(--fond);border:1px solid var(--filet);padding:1.2rem 1rem;display:flex;flex-direction:column;gap:.6rem}
.couverture .sur{font-size:.55rem}
.couverture b{font-family:var(--titre);font-weight:400;color:var(--violet);font-size:1.6rem;line-height:1.05}
.couverture i{font-family:var(--titre);font-size:.8rem;color:var(--discret)}
.couverture .bandes{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;height:.6rem}
.prix{font-family:var(--titre);font-size:1.6rem;color:var(--violet)}
.attente{border:1px dashed #b9bebf;padding:1rem 1.2rem;color:var(--discret)}

/* Pied de page */
.pied{border-top:1px solid var(--filet);margin-top:2rem}
.pied .enveloppe{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.4rem;font-family:var(--mono);font-size:.74rem;color:var(--discret)}
.pied nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.pied a{color:var(--discret)}
.suite{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--filet);font-size:.9rem}

.liste.etroite>li{grid-template-columns:2.4rem minmax(0,1fr)}
.liste.etroite .d{grid-column:2}
.noms-mysteres{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.25rem;font-size:.88rem}
.noms-mysteres .sur{color:var(--c);margin-bottom:.3rem}
.noms-mysteres span{display:inline-block;width:2.2rem;font-family:var(--titre);color:var(--c)}

/* Actualité du jour */
.actu{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding-block:.8rem;margin-bottom:2.5rem;display:grid;gap:.3rem}
.actu .sur{color:var(--c)}
.phrase-jour{font-family:var(--titre);font-size:1.15rem;line-height:1.4;color:var(--c)}

.fatima{margin:.4rem 0 .6rem;padding-left:1rem;border-left:1.5px solid var(--c)}
.fatima .citation{font-size:1.3rem}

/* Méditation adressée au Seigneur */
.medit{font-family:var(--titre);font-size:1.02rem;line-height:1.65;color:var(--encre);margin-top:.7rem;padding-left:.9rem;border-left:1.5px solid var(--c)}

/* Citation de Fatima en tête */
.fatima-haut{padding-block:.2rem 1.1rem;text-align:center;display:grid;gap:.5rem;justify-items:center}
.fatima-haut .citation{font-size:1.15rem;color:var(--violet);line-height:1.4;text-wrap:balance;max-width:46rem}
/* Rubrique dévotionnelle */
.devot h2{margin-bottom:1.4rem}
.temoins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2.2rem}
.temoins figure{margin:0;padding-top:.9rem;border-top:1px solid var(--filet);display:grid;gap:.5rem;align-content:start}
.temoins blockquote{margin:0;font-size:1.08rem}
@media (max-width:700px){.temoins{grid-template-columns:1fr}}

/* Récitation guidée mise en avant */
.nav a.etoile{background:var(--violet);color:#fff;padding:.35rem .8rem;border-bottom:0}
.nav a.etoile:hover,.nav a.etoile[aria-current="page"]{background:#4a3d70;color:#fff;border-bottom:0}
.bouton.grand{font-size:1rem;padding:.95rem 1.6rem}
.vedette{display:grid;gap:.6rem;margin-top:2.5rem;padding:1.8rem 2rem;background:var(--violet);color:#fff;text-decoration:none}
.vedette .sur{color:#d9d3ea}
.vedette h2{font-size:clamp(1.7rem,3.5vw,2.3rem);color:#fff}
.vedette p{max-width:40rem;line-height:1.6}
.vedette .aller{font-size:.95rem;margin-top:.3rem}
.vedette:hover .aller{text-decoration:underline}

/* Témoignages */
.temoins-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.4rem 2rem;margin-top:.6rem}
.temoins-liste figure{margin:0;padding-top:.9rem;border-top:1px solid var(--filet);display:grid;gap:.5rem;align-content:start}
.temoins-liste blockquote{margin:0}
.formulaire{display:grid;gap:.5rem;max-width:36rem}
.formulaire label{font-size:.9rem;margin-top:.5rem}
.formulaire input:not([type=checkbox]),.formulaire textarea{font:inherit;font-family:var(--titre);font-size:1rem;padding:.6rem .7rem;border:1px solid #c9cdce;background:var(--fond);color:var(--encre);border-radius:0;width:100%}
.formulaire textarea{resize:vertical}
.formulaire .case-ligne{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem}
.formulaire .case-ligne input{margin-top:.25rem}
.formulaire button{justify-self:start;margin-top:.8rem}