/* =========================================================================
   theme-v3.css — REFONTE VISUELLE RADICALE (10 juillet 2026)
   -------------------------------------------------------------------------
   Mission : prompts/PROMPT-REFONTE-RADICALE-COPILOT.md
   Direction : docs/inspiration-design/07-maquette-visuelle-site-orthodoxe.png
   Calque chargé APRÈS theme-v2.css sur toutes les pages (inject_all.py).
   Il ne remplace rien : il transfigure. Rollback = retirer la ligne
   theme-v3.css d'inject_all.py (HEAD_STYLES) et relancer publish_safe.py.

   Sommaire :
     0. Polices locales (Cormorant Garamond, SIL OFL — assets/fonts/)
     1. Jetons --v3-*
     2. Typographie (titres serif, eyebrow, liens à flèche)
     3. En-tête + pied de page
     4. Boutons
     5. Héros de l'accueil (photo immersive)
     6. Mosaïque éditoriale (accueil)
     7. Carte parchemin (citation)
     8. Cartes générales (élévation, zoom image au survol)
     9. Micro-animations (motion-v3.js)
     10. Réduction de mouvement / impression
   ========================================================================= */

/* ---- 0. Polices locales -------------------------------------------------- */
/* Cormorant Garamond (variable, SIL OFL) — licence : assets/fonts/cormorant-garamond/OFL.txt
   Sous-ensembles latin + latin-ext (couvre ș/ț) fournis par Google Fonts,
   téléchargés une fois et servis localement — aucune requête externe. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-ext-500-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-500-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-ext-500italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-500italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 1. Jetons v3 --------------------------------------------------------- */
:root {
  --v3-serif: "Cormorant Garamond", var(--font-display);
  --v3-radius: 20px;
  --v3-gold-mat: #b6862f;
  --v3-overlay: linear-gradient(180deg, rgba(12, 9, 6, .32) 0%, rgba(13, 10, 7, .5) 55%, rgba(9, 6, 4, .9) 100%);
  --v3-overlay-soft: linear-gradient(180deg, rgba(16, 12, 8, 0) 45%, rgba(10, 7, 5, .72) 100%);
  --v3-parchment: #f8f1e0;
  --v3-parchment-line: #e4d6b4;
}

/* ---- 2. Typographie ------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--v3-serif);
  font-weight: 600;
  letter-spacing: -.01em;
}
h1 { font-weight: 700; }
.brand__text { font-family: var(--v3-serif); font-weight: 600; font-size: 1.28rem; letter-spacing: 0; }
.brand__text em { font-style: italic; font-weight: 500; }

.eyebrow {
  letter-spacing: .22em;
  font-size: .78rem;
}

/* Flèche-signature réutilisable (tuiles, cartes partenaires, mosaïque). */
.tile__arrow, .partner-card__arrow, .mosaic__arrow, .saint-card__more .arrow {
  transition: transform .3s cubic-bezier(.2, .8, .25, 1);
}

/* ---- 3. En-tête + pied de page -------------------------------------------- */
.site-header {
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.mainnav__summary { position: relative; }
.mainnav__summary::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -.3rem; height: 2px;
  background: var(--v3-gold-mat);
  transition: right .28s cubic-bezier(.2, .8, .25, 1);
}
.mainnav__group:hover .mainnav__summary::after,
.mainnav__summary:focus-visible::after { right: 0; }

.site-footer__brand b { font-family: var(--v3-serif); font-weight: 600; font-size: 1.2rem; }

/* ---- 4. Boutons : or mat, capitales espacées ------------------------------ */
.btn {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 999px;
}
.hero .btn--primary,
.mosaic .btn--primary {
  background: var(--v3-gold-mat);
  background-image: none;
  color: #1c1508;
  box-shadow: 0 8px 22px -8px rgba(182, 134, 47, .55);
}
.hero .btn--primary:hover,
.mosaic .btn--primary:hover {
  background: color-mix(in srgb, var(--v3-gold-mat) 88%, #fff);
  box-shadow: 0 12px 28px -8px rgba(182, 134, 47, .65);
}

/* ---- 5. Héros de l'accueil : photo immersive ------------------------------ */
/* .hero n'existe QUE sur les 3 accueils (ro/fr/en index.html) — safe.
   Le sélecteur inclut [data-theme="dark"] .hero pour battre la règle
   « FIX HERO CROSS STABLE » de theme-v2.css (même spécificité en clair,
   mais plus spécifique qu'un simple .hero en sombre). */
.hero,
[data-theme="dark"] .hero {
  background-color: var(--night);
  background-image:
    var(--v3-overlay),
    url("../images/design/hero.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* Le halo doré de theme-v2 reste, discret, par-dessus la photo. */
.hero::before { mix-blend-mode: screen; }

/* ---- 6. Mosaïque éditoriale (accueil) -------------------------------------- */
.mosaic { padding-block: clamp(2.4rem, 5vw, 4rem); }
.mosaic__intro { max-width: 42rem; margin: 0 auto 2.2rem; text-align: center; }
.mosaic__intro .eyebrow { display: inline-block; margin-bottom: .6rem; }
.mosaic__intro h2 { margin-top: 0; }

.mosaic__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.mosaic__card, .mosaic__parchment {
  border-radius: var(--v3-radius);
}

/* Cartes photo : image en fond (pseudo-élément, zoome seule au survol). */
.mosaic__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem 1.5rem;
  color: #f5efe0;
  text-decoration: none;
}
.mosaic__card::before {
  content: "";
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.001); /* évite un filet transparent au repos sur certains GPU */
  transition: transform 1.1s cubic-bezier(.2, .8, .25, 1);
  z-index: 0;
}
.mosaic__card::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--v3-overlay);
  z-index: 1;
}
.mosaic__card:hover::before, .mosaic__card:focus-visible::before { transform: scale(1.05); }
.mosaic__card > * { position: relative; z-index: 2; }

.mosaic__card--about::before    { background-image: url("../images/design/about.webp"); }
.mosaic__card--faith::before    { background-image: url("../images/design/faith.webp"); }
.mosaic__card--spiritual::before{ background-image: url("../images/design/spiritual-life.webp"); }
.mosaic__card--quote::before    { background-image: url("../images/design/quote-mountain.webp"); }
.mosaic__card--articles::before { background-image: url("../images/design/articles.webp"); }
.mosaic__card--saints::before   { background-image: url("../images/design/saints.webp"); }
.mosaic__card--prayer::before   { background-image: url("../images/design/prayer.webp"); }

.mosaic__eyebrow {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  color: #e8c477;
}
.mosaic__title {
  display: block;
  font-family: var(--v3-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
  margin-top: .3rem;
}
.mosaic__label {
  display: block;
  font-family: var(--v3-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 600;
}
.mosaic__desc { display: block; margin-top: .35rem; font-size: .95rem; color: #dcd2bd; max-width: 32ch; }
.mosaic__go {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .7rem; font-size: .85rem; font-weight: 600;
  color: #f2e6c4;
}
.mosaic__arrow { transition: transform .3s cubic-bezier(.2, .8, .25, 1); }
.mosaic__card:hover .mosaic__arrow { transform: translateX(4px); }

/* Carte "citation vivante" (photo de montagne + parole d'un Père) */
.mosaic__card--quote {
  align-items: center;
  text-align: center;
  min-height: 16rem;
}
/* Ciel de montagne trop clair pour l'incrustation « bas de carte » générique :
   voile uniforme et plus soutenu, pour que la citation reste lisible partout. */
.mosaic__card--quote::after {
  background: linear-gradient(180deg, rgba(10, 8, 5, .48) 0%, rgba(8, 6, 4, .38) 45%, rgba(7, 5, 3, .7) 100%);
}
.mosaic__card--quote blockquote {
  font-family: var(--v3-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  max-width: 26ch;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.mosaic__card--quote cite {
  display: block; margin-top: .8rem; font-style: normal;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #e8c477;
}

/* ---- 7. Carte parchemin : citation d'Écriture ------------------------------ */
.mosaic__parchment {
  position: relative;
  background: var(--v3-parchment);
  border: 1px solid var(--v3-parchment-line);
  color: #3a2f1c;
  padding: 2rem 1.6rem;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
.mosaic__parchment .mosaic__cross {
  width: 1.6rem; height: 2.1rem;
  color: var(--v3-gold-mat);
}
.mosaic__parchment blockquote {
  font-family: var(--v3-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  max-width: 22ch;
}
.mosaic__parchment cite {
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .06em;
  color: #6b5c3c;
}
[data-theme="dark"] .mosaic__parchment {
  background: #211d16;
  border-color: rgba(230, 200, 130, .18);
  color: #ece3cd;
}
[data-theme="dark"] .mosaic__parchment cite { color: #b9ab84; }

/* Mise en page bento à partir de 900 px (en dessous : pile simple, ordre du DOM). */
@media (min-width: 900px) {
  .mosaic__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "about about faith    spiritual"
      "about about quote    quote"
      "articles saints prayer parchment";
  }
  .mosaic__card--about     { grid-area: about; }
  .mosaic__card--faith     { grid-area: faith; }
  .mosaic__card--spiritual { grid-area: spiritual; }
  .mosaic__card--quote     { grid-area: quote; }
  .mosaic__card--articles  { grid-area: articles; }
  .mosaic__card--saints    { grid-area: saints; }
  .mosaic__card--prayer    { grid-area: prayer; }
  .mosaic__parchment       { grid-area: parchment; }
  .mosaic__card--about { min-height: 100%; }
}

/* ---- 8. Cartes générales : légère élévation « photo » --------------------- */
.mosaic__card, .mosaic__parchment {
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2, .8, .25, 1), box-shadow .35s cubic-bezier(.2, .8, .25, 1);
}
.mosaic__card:hover, .mosaic__parchment:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---- 9. Micro-animations (motion-v3.js) ----------------------------------- */
.v3-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .25, 1); }
.v3-reveal.v3-in { opacity: 1; transform: none; }
.v3-reveal[data-v3-delay="1"] { transition-delay: .08s; }
.v3-reveal[data-v3-delay="2"] { transition-delay: .16s; }
.v3-reveal[data-v3-delay="3"] { transition-delay: .24s; }
.v3-reveal[data-v3-delay="4"] { transition-delay: .32s; }
.v3-reveal[data-v3-delay="5"] { transition-delay: .4s; }
.v3-reveal[data-v3-delay="6"] { transition-delay: .48s; }
.v3-reveal[data-v3-delay="7"] { transition-delay: .56s; }

/* ---- 10. Réduction de mouvement / impression ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mosaic__card::before { transition: none; }
  .mosaic__card:hover::before { transform: none; }
  .v3-reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .mosaic__card::before { display: none; }
}