/* Carpe Librum : le site public du club.
 *
 * Meme palette que l'application, meme parti pris : le papier et l'encre.
 * Tout passe par des proprietes logiques (inline-start, inline-end) pour
 * que la page se retourne d'elle meme quand l'arabe la met en dir="rtl".
 */

:root {
  --encre: #241f1a;
  --encre-douce: #5f584f;
  --encre-legere: #8d857b;
  --papier: #fbf8f3;
  --papier-carte: #ffffff;
  --papier-creux: #f3eee5;
  --or: #7a5c2e;
  --or-clair: #a8823f;
  --or-voile: #f5ecda;
  --vert: #4a7c59;
  --bord: #e7dfd2;
  --nuit: #201a13;
  /* Le texte pose SUR l'accent, et les trois encres du pied de page
     sombre. Ils sont recalcules avec le theme du club : sans eux, un
     theme violet garderait un pied de page brun. */
  --sur-accent: #ffffff;
  --nuit-encre: #f0e9dd;
  --nuit-encre-douce: #b6ac9c;
  --nuit-accent: #e8c887;
  --ombre: 0 1px 2px rgba(36,31,26,.05), 0 10px 30px rgba(36,31,26,.07);
  --ombre-forte: 0 24px 60px rgba(36,31,26,.20);
  --rayon: 18px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Noto Naskh Arabic", "Amiri", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic",
          "Helvetica Neue", sans-serif;
  --large: 1180px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
html[dir="rtl"] body { font-size: 17.5px }
img { max-width: 100%; display: block }
a { color: inherit }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.16;
             margin: 0; letter-spacing: -.01em }
p { margin: 0 }

.enveloppe { width: 100%; max-width: var(--large); margin: 0 auto;
             padding-inline: 22px }

/* ---------------------------------------------------------- en-tete */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,248,243,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.entete.posee { border-bottom-color: var(--bord);
                box-shadow: 0 6px 24px rgba(36,31,26,.05) }
.entete .enveloppe { display: flex; align-items: center; gap: 18px;
                     height: 68px }
.marque { display: flex; align-items: center; gap: 11px;
          text-decoration: none; flex: none }
.marque img { width: 36px; height: 36px; border-radius: 10px }
.marque b { font-family: var(--serif); font-size: 21px; letter-spacing: -.2px }
.nav { display: flex; gap: 26px; margin-inline-start: auto; align-items: center }
.nav a { text-decoration: none; color: var(--encre-douce); font-size: 15px;
         font-weight: 500; padding: 6px 0; position: relative }
.nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0;
                height: 2px; background: var(--or); transform: scaleX(0);
                transition: transform .22s }
.nav a:hover { color: var(--encre) }
.nav a:hover::after { transform: scaleX(1) }

.langues { display: flex; background: var(--papier-creux); border-radius: 999px;
           padding: 3px; gap: 2px; flex: none }
.langues button {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px;
  font-weight: 700; color: var(--encre-douce); padding: 5px 11px;
  border-radius: 999px; transition: background .2s, color .2s;
}
.langues button.actif { background: var(--or); color: var(--sur-accent) }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; cursor: pointer; text-decoration: none; font: inherit;
  font-weight: 700; font-size: 15.5px; padding: 13px 24px; border-radius: 13px;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.bouton:hover { transform: translateY(-2px) }
.bouton-or { background: var(--or); color: var(--sur-accent);
             box-shadow: var(--ombre) }
/* L'assombrissement au survol se fait par un filtre et non par une
   seconde couleur : il suit alors n'importe quel accent. */
.bouton-or:hover { filter: brightness(.92);
                   box-shadow: var(--ombre-forte) }
.bouton-clair { background: var(--papier-carte); color: var(--or);
                border: 1.5px solid var(--bord) }
.bouton-clair:hover { border-color: var(--or-clair) }
.bouton-lien { background: none; color: var(--or); padding-inline: 8px }
.bouton-lien:hover { text-decoration: underline; transform: none }
.bouton-fantome { background: rgba(255,255,255,.12); color: #fff;
                  border: 1.5px solid rgba(255,255,255,.4) }
.bouton-fantome:hover { background: rgba(255,255,255,.2) }
.entete .bouton { padding: 10px 18px; font-size: 14.5px; flex: none }

.menu-poche { display: none; border: 0; background: none; cursor: pointer;
              padding: 8px; margin-inline-start: auto; color: var(--encre) }

/* ---------------------------------------------------------- heros */
.heros { position: relative; overflow: hidden; padding: 74px 0 0 }
.heros::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 460px at 78% -8%, var(--or-voile), transparent 62%),
    radial-gradient(700px 420px at 6% 12%, var(--or-voile), transparent 60%);
  pointer-events: none;
}
.heros .enveloppe { position: relative; display: grid;
                    grid-template-columns: 1.05fr .95fr; gap: 46px;
                    align-items: center }
.surtitre {
  display: inline-flex; align-items: center; gap: 9px; font-size: 13px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--or); background: var(--or-voile); border-radius: 999px;
  padding: 7px 15px; margin-bottom: 20px;
}
.surtitre span { width: 6px; height: 6px; border-radius: 50%;
                 background: var(--vert);
                 box-shadow: 0 0 0 4px rgba(74,124,89,.18) }
.heros h1 { font-size: clamp(44px, 6.4vw, 76px); letter-spacing: -.025em }
.devise { font-family: var(--serif); font-style: italic; font-size: 21px;
          color: var(--or); margin-top: 8px }
.heros p.chapeau { font-size: 18.5px; color: var(--encre-douce);
                   margin-top: 22px; max-width: 34em }
.actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px }
.sous-actions { margin-top: 16px; font-size: 14px; color: var(--encre-legere) }

.eventail { position: relative; height: 560px }
.eventail img {
  position: absolute; width: 232px; border-radius: 26px;
  border: 1px solid var(--bord); box-shadow: var(--ombre-forte);
  background: #fff;
}
.eventail img:nth-child(1) { inset-inline-start: 0; top: 58px;
                             transform: rotate(-7deg); z-index: 1 }
.eventail img:nth-child(2) { inset-inline-start: 50%; top: 0;
                             transform: translateX(-50%); z-index: 3 }
.eventail img:nth-child(3) { inset-inline-end: 0; top: 58px;
                             transform: rotate(7deg); z-index: 2 }
html[dir="rtl"] .eventail img:nth-child(1) { transform: rotate(7deg) }
html[dir="rtl"] .eventail img:nth-child(3) { transform: rotate(-7deg) }
html[dir="rtl"] .eventail img:nth-child(2) { transform: translateX(50%) }

/* ---------------------------------------------------------- bandeau */
.bandeau { margin-top: 66px; background: var(--nuit);
           color: var(--nuit-encre) }
.bandeau .enveloppe { display: grid; grid-template-columns: repeat(3, 1fr);
                      gap: 26px; padding-block: 34px }
.bandeau b { display: block; font-family: var(--serif); font-size: 27px;
             color: var(--nuit-accent) }
.bandeau span { font-size: 14.5px; color: var(--nuit-encre-douce) }

/* ---------------------------------------------------------- sections */
section.bloc { padding: 92px 0 }
section.bloc.creux { background: var(--papier-creux) }
.titre-bloc { max-width: 46em; margin-bottom: 46px }
.titre-bloc .oeil { font-size: 13px; font-weight: 800; letter-spacing: .09em;
                    text-transform: uppercase; color: var(--or-clair);
                    margin-bottom: 12px }
.titre-bloc h2 { font-size: clamp(29px, 3.6vw, 42px) }
.titre-bloc p { margin-top: 16px; font-size: 18px; color: var(--encre-douce) }

.cartes { display: grid; gap: 22px }
.c3 { grid-template-columns: repeat(3, 1fr) }
.c4 { grid-template-columns: repeat(4, 1fr) }
.c2 { grid-template-columns: repeat(2, 1fr) }

.carte {
  background: var(--papier-carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 26px; box-shadow: var(--ombre);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.carte:hover { transform: translateY(-4px); border-color: var(--or-clair);
               box-shadow: 0 18px 44px rgba(36,31,26,.11) }
.carte .icone { width: 46px; height: 46px; border-radius: 13px;
                background: var(--or-voile); color: var(--or);
                display: grid; place-items: center; margin-bottom: 17px }
.carte h3 { font-size: 19.5px }
.carte p { margin-top: 9px; color: var(--encre-douce); font-size: 15.5px }

.etapes { counter-reset: pas; display: grid; gap: 20px;
          grid-template-columns: repeat(4, 1fr) }
.etape { position: relative; padding-top: 22px }
.etape::before {
  counter-increment: pas; content: counter(pas);
  font-family: var(--serif); font-size: 54px; font-weight: 700;
  color: var(--or); opacity: .22; line-height: 1; display: block;
  margin-bottom: 8px;
}
.etape h3 { font-size: 19px }
.etape p { margin-top: 8px; color: var(--encre-douce); font-size: 15.5px }

/* ------------------------------------------------- duo texte + image */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
       align-items: center }
.duo.inverse .duo-texte { order: 2 }
.duo-texte h2 { font-size: clamp(27px, 3.2vw, 38px) }
.duo-texte p.intro { margin-top: 18px; font-size: 17.5px;
                     color: var(--encre-douce) }
.liste-puces { margin: 26px 0 0; padding: 0; list-style: none; display: grid;
               gap: 14px }
.liste-puces li { display: flex; gap: 13px; align-items: flex-start;
                  font-size: 16px }
.liste-puces svg { flex: none; margin-top: 3px; color: var(--vert) }
.liste-puces b { display: block }
.liste-puces span { color: var(--encre-douce); font-size: 15px }

.paire-tel { display: flex; gap: 22px; justify-content: center }
.paire-tel img { width: 246px; border-radius: 26px; border: 1px solid var(--bord);
                 box-shadow: var(--ombre-forte); background: #fff }
.paire-tel img:nth-child(2) { margin-top: 42px }
.cadre-bureau img { border-radius: 16px; border: 1px solid var(--bord);
                    box-shadow: var(--ombre-forte) }

/* ---------------------------------------------------------- galerie */
/* La galerie defile toute seule, en boucle : la piste contient deux fois
   la serie d'ecrans et glisse d'une moitie, ce qui donne un defilement
   sans couture. Elle s'arrete sous la souris, pour qu'on puisse regarder
   un ecran. En arabe, la page est retournee et la piste glisse dans
   l'autre sens. */
.galerie { overflow: hidden; padding: 6px 0 26px;
           mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
           -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent) }
.galerie-piste { display: flex; gap: 20px; width: max-content;
                 animation: defiler 70s linear infinite; will-change: transform }
.galerie:hover .galerie-piste { animation-play-state: paused }
html[dir="rtl"] .galerie-piste { animation-name: defiler-rtl }
@keyframes defiler { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes defiler-rtl { from { transform: translateX(0) } to { transform: translateX(50%) } }
@media (prefers-reduced-motion: reduce) {
  .galerie { overflow-x: auto }
  .galerie-piste { animation: none }
}
.galerie figure { margin: 0; flex: none; width: 236px }
.galerie img { border-radius: 22px; border: 1px solid var(--bord);
               box-shadow: var(--ombre) }
.galerie figcaption { margin-top: 12px; font-size: 14px;
                      color: var(--encre-douce); text-align: center }
.galerie figcaption b { display: block; color: var(--encre); font-size: 15px }

/* ---------------------------------------------------------- questions */
.questions { max-width: 820px; margin: 0 auto }
.question { border-bottom: 1px solid var(--bord) }
.question button {
  width: 100%; text-align: start; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 650; font-size: 17.5px; color: var(--encre);
  padding: 22px 44px 22px 0; position: relative;
}
html[dir="rtl"] .question button { padding: 22px 0 22px 44px }
.question button::after {
  content: "+"; position: absolute; inset-inline-end: 6px; top: 18px;
  font-size: 26px; font-weight: 400; color: var(--or); transition: transform .22s;
}
.question.ouverte button::after { transform: rotate(45deg) }
.question .reponse { max-height: 0; overflow: hidden;
                     transition: max-height .3s ease }
.question .reponse p { padding-bottom: 22px; color: var(--encre-douce);
                       font-size: 16px }

/* ---------------------------------------------------------- appel */
.appel { background: linear-gradient(135deg, var(--or), var(--or-clair));
         color: var(--sur-accent); text-align: center; padding: 88px 0 }
.appel h2 { font-size: clamp(30px, 4vw, 46px) }
.appel p { margin-top: 18px; font-size: 19px; color: var(--sur-accent);
           opacity: .92;
           max-width: 40em; margin-inline: auto }
.appel .actions { justify-content: center }
.appel .bouton-or { background: #fff; color: var(--or);
                    box-shadow: 0 14px 34px rgba(0,0,0,.18) }
.appel .bouton-or:hover { background: #fff }

/* ---------------------------------------------------------- pied */
.pied { background: var(--nuit); color: var(--nuit-encre-douce);
        padding: 56px 0 30px;
        font-size: 15px }
.pied .enveloppe { display: grid; grid-template-columns: 1.6fr 1fr 1fr;
                   gap: 34px }
.pied h4 { color: var(--nuit-encre); font-size: 15px; margin: 0 0 14px;
           font-family: var(--sans); font-weight: 700 }
.pied a { color: var(--nuit-encre-douce); text-decoration: none;
          display: block; padding: 4px 0 }
.pied a:hover { color: var(--nuit-accent) }
.pied .marque b { color: var(--nuit-encre) }
.pied .bas { border-top: 1px solid rgba(255,255,255,.09); margin-top: 40px;
             padding-top: 22px; text-align: center; font-size: 13.5px;
             color: #8b8378 }

/* ------------------------------------------------ apparition douce */
.monte { opacity: 0; transform: translateY(22px);
         transition: opacity .6s ease, transform .6s ease }
.monte.vu { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .monte { opacity: 1; transform: none; transition: none }
}

/* ---------------------------------------------------------- ecrans */
@media (max-width: 1040px) {
  .c4 { grid-template-columns: repeat(2, 1fr) }
  .etapes { grid-template-columns: repeat(2, 1fr) }
  .heros .enveloppe { grid-template-columns: 1fr; gap: 30px }
  .eventail { height: 420px; max-width: 560px; margin-inline: auto }
  .eventail img { width: 186px }
  .duo { grid-template-columns: 1fr; gap: 34px }
  .duo.inverse .duo-texte { order: 0 }
  .bandeau .enveloppe { grid-template-columns: repeat(2, 1fr) }
  .pied .enveloppe { grid-template-columns: 1fr 1fr }
}
@media (max-width: 720px) {
  body { font-size: 16px }
  .nav { display: none }
  .nav.ouvert {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; inset-inline: 0; top: 68px; background: var(--papier);
    border-bottom: 1px solid var(--bord); padding: 10px 22px 18px;
    box-shadow: var(--ombre);
  }
  .nav.ouvert a { padding: 13px 0; border-bottom: 1px solid var(--bord) }
  .menu-poche { display: block }
  .entete .bouton { display: none }
  section.bloc { padding: 62px 0 }
  .c3, .c2, .c4, .etapes { grid-template-columns: 1fr }
  .heros { padding-top: 46px }
  .eventail { height: 340px }
  .eventail img { width: 148px }
  .paire-tel img { width: 46vw }
  .bandeau .enveloppe { grid-template-columns: 1fr; gap: 18px }
}

/* ------------------------------------------------------------ nuit */
@media (prefers-color-scheme: dark) {
  :root {
    --encre: #ece6dd; --encre-douce: #b3aca2; --encre-legere: #837c73;
    --papier: #16130e; --papier-carte: #201c16; --papier-creux: #1c1813;
    --or: #d2a85c; --or-clair: #e0bd7c; --or-voile: #2f2718;
    --bord: #35302a; --nuit: #100d09;
    --ombre: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35);
    --ombre-forte: 0 24px 60px rgba(0,0,0,.6);
  }
  .entete { background: rgba(22,19,14,.85) }
  .appel { background: linear-gradient(135deg, var(--or-voile), var(--or)) }
  .appel .bouton-or { background: var(--papier); color: var(--or) }
}