@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;700&display=swap');

/* ============================================================================
   Bet Yossef Haim — feuille de style unique.
   Palette tirée du logo : bleu roi du rouleau de Torah.
   ========================================================================== */

:root {
  --bleu:        #1f4796;
  --bleu-fonce:  #16326b;
  --bleu-pale:   #edf1fa;
  --or:          #a8762a;
  --or-pale:     #fbf4e6;
  --encre:       #1b1d24;
  --gris:        #5b6274;
  --fond:        #f7f8fa;
  --carte:       #ffffff;
  --bordure:     #e2e6ef;
  --ombre:       0 1px 2px rgba(22, 50, 107, .05), 0 8px 24px rgba(22, 50, 107, .06);
  --rayon:       12px;
  --serif:       'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --sans:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bleu:       #7ea2e8;
    --bleu-fonce: #b9cdf5;
    --bleu-pale:  #1a2334;
    --or:         #d8ac62;
    --or-pale:    #2a2317;
    --encre:      #e8eaf0;
    --gris:       #a2aabd;
    --fond:       #121620;
    --carte:      #1a1f2b;
    --bordure:    #2b3242;
    --ombre:      0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: var(--bleu); }

.he { font-family: var(--serif); }

.enveloppe {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- En-tête ------------------------------------------------------------ */

.entete {
  background: var(--carte);
  border-bottom: 1px solid var(--bordure);
  padding: 40px 0 32px;
  text-align: center;
}

.logo { width: 92px; margin: 0 auto 18px; display: block; }

@media (prefers-color-scheme: dark) {
  /* Le logo est un JPEG sur fond blanc : on lui rend un socle clair. */
  .logo { background: #fff; border-radius: 10px; padding: 8px; }
}

.entete h1 {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--bleu-fonce);
  margin: 0 0 2px;
  letter-spacing: -.01em;
}

#nom-he {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--bleu);
  direction: rtl;
  margin-bottom: 10px;
}

#sous-titre { margin: 0 0 6px; color: var(--gris); }

#adresse { margin: 0; color: var(--gris); font-size: .94rem; }
#adresse .he { margin-left: 6px; }

/* --- Navigation --------------------------------------------------------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 18px 20px;
}

.nav a {
  font-size: .86rem;
  text-decoration: none;
  color: var(--bleu-fonce);
  background: var(--bleu-pale);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

.nav a:hover { background: var(--bleu); color: #fff; }

/* --- Bandeau des fêtes -------------------------------------------------- */

#fetes { margin: 8px 0 34px; }

.fetes-inner {
  background: var(--or-pale);
  border: 1px solid rgba(168, 118, 42, .3);
  border-radius: var(--rayon);
  padding: 26px 24px;
}

.fetes-surtitre {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--or);
  text-align: center;
}

.fete-carte + .fete-carte {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(168, 118, 42, .25);
}

.fete-carte h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 0 0 4px;
  color: var(--encre);
}

.fete-dates { margin: 0 0 2px; font-weight: 600; font-size: .95rem; }
.fete-allumage,
.fete-note { color: var(--gris); font-size: .9rem; }
.fete-carte p { margin: 0 0 8px; }

.formules { list-style: none; margin: 14px 0; padding: 0; }

.formules li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(168, 118, 42, .2);
}

/* --- Bloc des kapparot ---------------------------------------------------
   Volontairement BLEU là où le bandeau des fêtes est doré : les deux blocs
   se suivent sur l'accueil et parlent tous les deux de Kippour. Sans cette
   rupture de couleur, on lit un seul pavé au lieu de deux annonces.      */

#kapparot { margin: 0 0 34px; }

.kapparot-inner {
  background: var(--bleu-pale);
  border: 1px solid rgba(31, 71, 150, .28);
  border-radius: var(--rayon);
  padding: 26px 24px;
}

@media (prefers-color-scheme: dark) {
  .kapparot-inner { border-color: rgba(126, 162, 232, .3); }
}

.kapparot-surtitre {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--bleu-fonce);
  text-align: center;
}

.kapparot-dates {
  margin: 0 0 18px;
  text-align: center;
  color: var(--gris);
  font-size: .92rem;
}

.kapparot-photo {
  margin: 0 0 18px;
  border-radius: var(--rayon);
  overflow: hidden;
}

.kapparot-photo img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  object-position: center 40%;
}

.kapparot-inner > p { margin: 0 0 12px; }

/* L'emploi des fonds : c'est la phrase qui décide du don, elle se détache. */
.kapparot-emploi {
  padding-left: 14px;
  border-left: 3px solid var(--or);
  font-weight: 600;
}

.kapparot-montant {
  margin: 18px 0 4px !important;
  text-align: center;
}

.kapparot-prix {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--or);
}

.kapparot-unite {
  margin-left: 8px;
  color: var(--gris);
  font-size: .92rem;
}

.kapparot-titre {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 20px 0 8px;
  color: var(--encre);
}

.kapparot-etapes { margin: 0 0 4px; padding-left: 20px; }
.kapparot-etapes li { margin: 0 0 7px; }

.kapparot-texte {
  margin: 18px 0 4px;
  padding: 16px 18px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

.kapparot-texte .kapparot-titre { margin-top: 0; }

.kapparot-he {
  margin: 0 0 10px;
  font-size: 1.3rem;
  line-height: 1.95;
  text-align: right;
  color: var(--encre);
}

.kapparot-translit {
  margin: 0 0 8px;
  font-style: italic;
  font-size: .95rem;
}

.kapparot-note {
  margin: 0 0 8px;
  color: var(--gris);
  font-size: .9rem;
}

.kapparot-inner .bouton-don { margin-top: 18px; }

/* --- Halakha sourcée (page kapparot.html) --------------------------------
   Regle posee par David le 16/09/2026 : une halakha rapportee traine sa
   source avec elle. La source est donc un element de la mise en page, pas
   une note de bas de page qu'on pourrait oublier d'afficher.            */

.kapparot-point { margin: 0 0 18px; }

.kapparot-point h3 {
  font-family: var(--serif);
  font-size: 1.08rem;
  margin: 0 0 6px;
  color: var(--bleu-fonce);
}

.kapparot-point p { margin: 0 0 6px; }

.kapparot-source {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--bordure);
  color: var(--gris);
  font-size: .83rem;
}

/* Sur la page envoyée, le bloc du texte à dire n'est plus dans une carte
   bleue : il lui faut son propre fond pour rester un encadré. */
.page .kapparot-texte { background: var(--bleu-pale); }

@media (max-width: 560px) {
  .kapparot-inner { padding: 20px 16px; }
  .kapparot-he { font-size: 1.15rem; }
}

.formule-nom     { flex: 1 1 auto; font-weight: 600; }
.formule-montant { font-family: var(--serif); font-size: 1.1rem; color: var(--or); font-weight: 700; }
.formule-places  { flex: 1 0 100%; color: var(--gris); font-size: .87rem; }

.bouton {
  display: block;
  margin-top: 18px;
  padding: 14px 20px;
  background: var(--bleu);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--rayon);
}

.bouton:hover { background: var(--bleu-fonce); }

@media (prefers-color-scheme: dark) {
  .bouton { color: #101423; }
}

.bouton-clair {
  display: inline-block;
  margin: 6px 6px 0 0;
  background: var(--bleu-pale);
  color: var(--bleu-fonce);
}

.bouton-clair:hover { background: var(--bleu); color: #fff; }

.bouton-whatsapp { background: #1f9d55; color: #fff; margin-top: 4px; }
.bouton-whatsapp:hover { background: #197f45; }

@media (prefers-color-scheme: dark) {
  .bouton-whatsapp { background: #25a35a; color: #fff; }
}

.contact-note {
  margin: 8px 0 0;
  color: var(--gris);
  font-size: .89rem;
  text-align: center;
}

/* --- Bloc Chabbat -------------------------------------------------------- */

.horaires {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 24px;
  margin-bottom: 34px;
}

.horaires-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 14px;
}

.horaires h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  margin: 0;
  color: var(--bleu-fonce);
}

#horaires-parasha { color: var(--or); font-weight: 600; font-size: .95rem; }

#horaires-contenu { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

@media (max-width: 560px) {
  #horaires-contenu { grid-template-columns: 1fr; gap: 18px; }
}

.jour h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gris);
  margin: 0 0 8px;
  font-weight: 600;
}

.horaires-liste { list-style: none; margin: 0; padding: 0; }

.horaires-liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--bordure);
}

.horaires-liste li:last-child { border-bottom: 0; }

.h-libelle { color: var(--encre); font-size: .95rem; }
.h-heure   { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--bleu); }

.horaires-message { grid-column: 1 / -1; margin: 0 0 8px; color: var(--gris); font-size: .95rem; }

/* --- Sections FAQ -------------------------------------------------------- */

.section { margin-bottom: 34px; }

.section h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--bleu-fonce);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bleu-pale);
}

.qr {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  margin-bottom: 8px;
  overflow: hidden;
}

.qr[open] { box-shadow: var(--ombre); }

.qr summary {
  cursor: pointer;
  padding: 14px 44px 14px 18px;
  font-weight: 600;
  list-style: none;
  position: relative;
}

.qr summary::-webkit-details-marker { display: none; }

.qr summary::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--bleu);
  border-bottom: 2px solid var(--bleu);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.qr[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.qr summary:hover { color: var(--bleu); }

.reponse { padding: 0 18px 16px; color: var(--encre); }
.reponse p { margin: 0 0 10px; }

/* --- Bloc RIB ------------------------------------------------------------ */

.rib {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 14px 0;
  padding: 14px 16px;
  background: var(--bleu-pale);
  border-radius: 10px;
  font-size: .95rem;
}

.rib dt { color: var(--gris); font-size: .85rem; }
.rib dd { margin: 0; font-weight: 600; }
.mono   { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .01em; }

.alerte {
  border-left: 3px solid var(--or);
  background: var(--or-pale);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: .92rem;
  margin: 12px 0;
}

.alerte-fraude { border-left-color: #c0392b; background: rgba(192, 57, 43, .07); }

@media (prefers-color-scheme: dark) {
  .alerte-fraude { background: rgba(192, 57, 43, .16); }
}

/* --- Contact et pied de page --------------------------------------------- */

.contact {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 22px 24px;
  margin-bottom: 34px;
}

.contact h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 0 0 8px;
  color: var(--bleu-fonce);
}

.contact p { margin: 0 0 10px; }
.contact-defaut { color: var(--gris); }

.pied {
  border-top: 1px solid var(--bordure);
  padding: 26px 0 40px;
  text-align: center;
  color: var(--gris);
  font-size: .84rem;
  line-height: 1.7;
}

.pied strong { color: var(--encre); font-weight: 600; }

/* --- Vidéos ---------------------------------------------------------- */

.section-intro { margin: 0 0 14px; color: var(--gris); }

.video-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

.video-carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.video-vignette,
.video-lecteur {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.video-vignette {
  position: relative;
  padding: 0;
  cursor: pointer;
}

.video-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pastille de lecture dessinée en CSS : aucune image à charger. */
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(22, 50, 107, .82);
  transition: background .15s ease, transform .15s ease;
}

.video-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  margin: -9px 0 0 -5px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}

.video-vignette:hover .video-play { background: var(--bleu); transform: scale(1.08); }
.video-vignette:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

.video-titre {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.35;
  margin: 12px 14px 4px;
  color: var(--encre);
}

.video-meta { margin: 0 14px 14px; color: var(--gris); font-size: .84rem; }

.video-message { color: var(--gris); margin: 0 0 10px; }

.video-chaine {
  display: inline-block;
  margin-top: 16px;
  color: var(--bleu);
  font-weight: 600;
  font-size: .93rem;
}

/* --- Appel a l'action d'une rubrique (don par carte) --------------------- */

.bouton-don {
  margin: 4px 0 0;
  background: var(--or);
  color: #fff;
}

.bouton-don:hover { background: #8d6222; }

@media (prefers-color-scheme: dark) {
  .bouton-don       { background: var(--or); color: #241c0c; }
  .bouton-don:hover { background: #e6bd7c; }
}

.cta-note {
  margin: 8px 0 16px;
  color: var(--gris);
  font-size: .88rem;
  text-align: center;
}

/* --- Page interieure (Issachar) ----------------------------------------- */

.nav a.nav-page {
  background: var(--or-pale);
  color: var(--or);
  border: 1px solid rgba(168, 118, 42, .35);
}

.nav a.nav-page:hover { background: var(--or); color: #fff; }

.page {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 28px 26px;
  margin: 28px 0 0;
}

.page p { margin: 0 0 14px; }
.page .intro { font-size: 1.06rem; }
.page .rib { margin: 16px 0; }

.page .signature {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--or);
  text-align: center;
  margin: 22px 0 4px;
}

.retour-ligne { margin: 22px 0 8px; text-align: center; }
.retour-ligne a { color: var(--gris); text-decoration: none; font-size: .9rem; }
.retour-ligne a:hover { color: var(--bleu); text-decoration: underline; }

/* --- Photo d'accueil ------------------------------------------------------
   Hauteur bornee et object-fit: cover : une photo tres haute ou tres large
   ne repousse jamais les onglets sous la ligne de flottaison. */

.photo-une {
  margin: 0;
  background: var(--carte);
  border-bottom: 1px solid var(--bordure);
}

.photo-une img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  object-position: center 40%;
}

.photo-une figcaption {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 20px 12px;
  color: var(--gris);
  font-size: .86rem;
  text-align: center;
}

@media (max-width: 560px) {
  .photo-une img { max-height: 220px; }
}

/* --- Page de dons : bandeau France / CERFA -------------------------------- */

.bandeau-fr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 0 0 16px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--bordure);
}

.bandeau-pays {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: var(--bleu-fonce);
}

/* Le cadre n'est pas decoratif : sans lui, la bande blanche du drapeau
   se fond dans la carte et il ne reste qu'un bleu et un rouge. */
.drapeau {
  width: 30px;
  height: 20px;
  border: 1px solid var(--bordure);
  border-radius: 3px;
  flex: none;
}

.bandeau-cerfa {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-left: auto;
  padding: 6px 12px;
  background: var(--or-pale);
  border: 1px solid rgba(168, 118, 42, .35);
  border-radius: 999px;
  color: var(--or);
  font-size: .92rem;
}

.bandeau-note { font-size: .82rem; opacity: .85; }

@media (max-width: 560px) {
  .bandeau-cerfa { margin-left: 0; }
}

/* --- Page de dons : accroche, copie de l'IBAN, apercu du message --------- */

.page .accroche {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--bleu-fonce);
  margin: 0 0 16px;
}

.bouton-copie {
  display: inline-block;
  margin: 0 0 18px;
  font-size: .9rem;
  padding: 9px 16px;
  border: 1px solid var(--bordure);
  cursor: pointer;
  font-family: inherit;
}

/* Specificite doublee : sans cela, .bouton-clair:hover reprend la main et le
   donateur ne voit pas la confirmation tant que sa souris reste sur le bouton. */
.bouton.bouton-copie-fait,
.bouton.bouton-copie-fait:hover {
  background: var(--or-pale);
  color: var(--or);
  border-color: var(--or);
}

/* --- Champ obligatoire : motif du don ------------------------------------ */

.champ-motif { margin: 16px 0 14px; }

.champ-etiquette {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--encre);
}

.champ-requis {
  font-weight: 400;
  font-size: .8rem;
  color: #c0392b;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Le rouge du mode clair tombe a 3,3:1 sur le fond sombre : illisible pour
   une petite capitale. On l'eclaircit uniquement la. */
@media (prefers-color-scheme: dark) {
  .champ-requis { color: #f0887a; }
}

.champ-saisie {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font: inherit;
  font-size: 1rem; /* < 16px ferait zoomer iOS a la mise au point */
  color: var(--encre);
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

.champ-saisie::placeholder { color: var(--gris); opacity: .8; }

.champ-saisie:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(31, 71, 150, .15);
}

.champ-manquant {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .18);
}

.champ-aide {
  margin: 6px 0 0 !important;
  color: var(--gris);
  font-size: .85rem;
}

/* Bouton ferme tant que le motif manque. Il reste lisible : un bouton
   fantome laisserait croire a une panne. */
.bouton.bouton-ferme,
.bouton.bouton-ferme:hover {
  background: var(--bordure);
  color: var(--gris);
  cursor: not-allowed;
}

.apercu { margin: 14px 0 18px; }

.apercu-titre {
  margin: 0 0 6px !important;
  color: var(--gris);
  font-size: .88rem;
}

/* L'apercu montre au donateur ce qu'il aura a completer avant d'ouvrir
   WhatsApp. pre + pre-wrap : le texte garde ses retours a la ligne sans
   deborder sur un telephone. */
.apercu-message {
  margin: 0;
  padding: 14px 16px;
  background: var(--bleu-pale);
  border-left: 3px solid var(--bleu);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--encre);
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Bandeau WhatsApp ----------------------------------------------------
   Le groupe WhatsApp est le seul moyen de contact de la communauté : il est
   mis en avant sous l'en-tête et reste visible quel que soit l'onglet. */

.bandeau-whatsapp {
  background: var(--carte);
  border-bottom: 1px solid var(--bordure);
  padding: 20px 0 24px;
}

.bandeau-inner { text-align: center; }

.bandeau-intro {
  margin: 0 auto;
  max-width: 48ch;
  color: var(--gris);
  font-size: .95rem;
}

.bandeau-whatsapp .bouton {
  max-width: 420px;
  margin: 14px auto 0;
}

.bandeau-whatsapp .contact-note { margin-top: 8px; }

/* --- Onglets -------------------------------------------------------------
   La barre colle en haut de l'écran : sur téléphone, on change d'onglet
   sans avoir à remonter toute la page. Elle défile horizontalement si les
   libellés ne tiennent pas, plutôt que de passer à la ligne. */

.onglets-barre {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
}

.onglets {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.onglets::-webkit-scrollbar { display: none; }

.onglet {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--bleu-fonce);
  background: var(--bleu-pale);
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
}

/* Le survol ne doit PAS ressembler a l onglet ouvert, sinon on ne sait
   plus lequel est ouvert des que la souris passe sur un autre. Survol =
   un simple cerne, onglet ouvert = aplat de couleur. */
.onglet:hover { box-shadow: inset 0 0 0 2px var(--bleu); }

.onglet-actif,
.onglet-actif:hover {
  background: var(--bleu);
  color: #fff;
  box-shadow: none;
}

@media (prefers-color-scheme: dark) {
  .onglet-actif,
  .onglet-actif:hover { color: #101423; }
}

.onglet:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

.panneau { padding-top: 26px; }

.liens-pages {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 20px 12px;
}

.liens-pages a {
  font-size: .86rem;
  text-decoration: none;
  color: var(--bleu-fonce);
  background: var(--or-pale);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

/* --- Formulaire d'inscription ---------------------------------------- */

.formulaire { margin: 22px 0 0; }

.champ { display: block; margin: 0 0 18px; font-weight: 600; color: var(--encre); }
.champ small { display: block; margin-top: 5px; font-weight: 400; color: var(--gris); font-size: .85rem; }

.champ input[type="text"],
.champ input[type="tel"],
.champ select,
.champ textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  font: inherit;
  font-weight: 400;
  color: var(--encre);
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-sizing: border-box;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }

.champ select:disabled { color: var(--gris); background: var(--fond); }

fieldset.champ { border: 0; padding: 0; margin: 0 0 18px; }
fieldset.champ legend { padding: 0; margin-bottom: 8px; font-weight: 600; }

.choix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-weight: 400;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  cursor: pointer;
}

.choix:has(input:checked) { border-color: var(--bleu); background: var(--bleu-pale); }
.choix:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 1px; }

/* La Birkat n'est pas une formule : elle se detache du groupe des cotisations. */
.choix-option { margin: 0 0 18px; border-style: dashed; }
.choix-option:has(input:checked) { border-style: solid; border-color: var(--or); background: var(--or-pale); }

.choix-nom     { flex: 1 1 auto; font-weight: 600; }
.choix-montant { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--or); }
.choix-places  { flex: 1 0 100%; color: var(--gris); font-size: .87rem; }

.total {
  margin: 0 0 18px;
  padding: 12px 14px;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--bleu);
  background: var(--bleu-pale);
  border-radius: var(--rayon);
}
.total span { font-family: var(--sans); font-size: .87rem; font-weight: 400; color: var(--gris); }

/* Le champ piege ne doit etre vu ni d'un humain, ni d'un lecteur d'ecran —
   mais rester dans le DOM et remplissable par un robot. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.erreur {
  margin: 0 0 14px;
  padding: 12px 14px;
  color: #c0392b;
  background: rgba(192, 57, 43, .07);
  border-left: 3px solid #c0392b;
  border-radius: var(--rayon);
}

#envoyer[disabled] { opacity: .6; cursor: progress; }

#confirmation h2 { margin-top: 0; }
#confirmation .bouton { display: block; text-align: center; }

/* --- Places : hommes et femmes cote a cote, total calcule ------------- */

.places-groupe { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 14px; background: var(--carte); }
.places-groupe legend { padding: 0 6px; }

.places-duo { display: flex; gap: 14px; }
.places-duo label { flex: 1 1 0; font-weight: 600; }

.places-total {
  margin: 12px 0 0;
  font-weight: 600;
  color: var(--gris);
}
.places-total.depasse { color: #c0392b; }

/* --- Page autonome des dons (dons.html) -----------------------------------
   Meme habillage que les titres de rubrique du site : la page envoyee par
   WhatsApp doit ressembler a la page d'accueil, pas a un document etranger. */

.page h2 {
  font-family: var(--serif);
  font-size: 1.28rem;
  color: var(--bleu-fonce);
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bleu-pale);
}

.page .bouton-don { display: block; text-align: center; }
.page > .qr:first-of-type { margin-top: 18px; }

/* Onglet-lien : l'onglet Dons emmene sur dons.html. Il doit etre INDISCERNABLE
   des autres onglets — c'est un onglet pour le visiteur, une page pour le
   navigateur. Seul le soulignement par defaut du lien est a retirer. */
.onglet-lien {
  text-decoration: none;
  display: inline-block;
  line-height: normal;
}

/* --- Bloc "Envoyer cette page" (dons.html) --------------------------------
   L'adresse est affichee en clair au-dessus des boutons : c'est le repli de
   tous les replis, celui ou le lecteur la recopie a l'oeil. */

.partage-lien {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--bleu-pale);
  border-radius: var(--rayon);
  font-size: .9rem;
  word-break: break-all;
  text-align: center;
}

.partage-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.partage-actions .bouton { margin: 0; flex: 1 1 200px; text-align: center; }
.partage-actions .bouton-copie { margin: 0; }