/* --- Page « Confrérie du Canelé de Bordeaux » ------------------------------ */
.confrerie { background: var(--fond); }

/* Bandeau d'en-tete : bordeaux sombre dans les deux themes, comme l'annuaire et les actualites. */
.confrerie-hero { position: relative; overflow: hidden; padding: 104px 28px 70px; color: #fff;
  background: radial-gradient(circle at 78% 40%, rgba(195,155,100,.22), transparent 42%),
              linear-gradient(120deg, #2c0a13 0%, #4d1322 55%, #681a2d 100%); }
.confrerie-hero-contenu { max-width: 1084px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 48px; }
.confrerie-hero .eyebrow { color: #f0d7b7; }
.confrerie-hero h1 { font-size: clamp(40px, 5.6vw, 66px); line-height: 1.04; margin: 8px 0 18px; color: #fff; }
.confrerie-hero h1 em { display: block; color: #f0d7b7; }
.confrerie-hero .lead { max-width: 560px; margin: 0; font-size: 18px; line-height: 1.65; color: #fff8f0; }
/* L'embleme est dessine pour un fond blanc : il garde sa pastille claire dans les deux themes. */
.confrerie-embleme { width: 260px; height: 260px; padding: 10px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 6px rgba(240,215,183,.28), 0 18px 40px rgba(0,0,0,.35); }
.confrerie-embleme img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* Presentation et encadre « En bref ». */
.confrerie-presentation { max-width: 1140px; margin: 0 auto; padding: 84px 28px 40px; display: grid;
  grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
/* Sans encadre « En bref », le texte garde une largeur de lecture confortable. */
.confrerie-presentation.sans-bref { grid-template-columns: minmax(0, 760px); }
.confrerie-texte h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; margin: 8px 0 26px; }
.confrerie-riche { line-height: 1.75; color: var(--encre); }
.confrerie-riche p { margin: 0 0 16px; }
.confrerie-riche h2, .confrerie-riche h3 { font: 500 26px/1.2 'Playfair Display', serif; color: var(--vin-texte); margin: 34px 0 12px; }
.confrerie-riche h2:first-child, .confrerie-riche h3:first-child { margin-top: 0; }
.confrerie-riche ul, .confrerie-riche ol { margin: 0 0 16px; padding-left: 22px; }
.confrerie-riche li { margin-bottom: 6px; }
.confrerie-riche blockquote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); color: var(--texte-2); }
.confrerie-bref { position: sticky; top: 24px; padding: 28px 28px 10px; background: var(--surface); border: 1px solid var(--ligne);
  border-top: 3px solid var(--gold); }
.confrerie-bref h2 { font-size: 28px; margin: 0 0 14px; }
.confrerie-bref dl { margin: 0; }
.confrerie-bref dl > div { padding: 14px 0; border-top: 1px solid var(--ligne); }
.confrerie-bref dt { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--vin-texte); }
.confrerie-bref dd { margin: 5px 0 0; line-height: 1.55; }

/* Galerie : mosaique de quatre colonnes ; un portrait occupe deux rangees, une photo
   « large » deux colonnes et deux rangees. Rangees au format 3:2 d'une colonne,
   calculees sur la largeur de la section (100cqi : sa boite de contenu). */
.confrerie-galerie { container-type: inline-size; max-width: 1140px; margin: 0 auto; padding: 56px 28px 40px; }
.confrerie-galerie h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; margin: 8px 0 28px; }
.confrerie-mosaique { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: calc((100cqi - 3 * 14px) / 4 / 1.5); grid-auto-flow: dense; gap: 14px; }
.confrerie-photo { position: relative; margin: 0; overflow: hidden; background: var(--teinte); }
.confrerie-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.confrerie-photo:hover img { transform: scale(1.03); }
.confrerie-photo-portrait { grid-row: span 2; }
.confrerie-photo-large { grid-column: span 2; grid-row: span 2; }
.confrerie-photo-large img { object-position: center 40%; }
.confrerie-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px; color: #fff;
  font-size: 12px; font-weight: 700; background: linear-gradient(transparent, rgba(20,8,12,.78)); }

/* Informations pratiques. */
.confrerie-infos { max-width: 1140px; margin: 0 auto; padding: 40px 28px 96px; }
.confrerie-infos-carte { max-width: 760px; padding: 32px 34px 18px; background: var(--teinte-vin); border-left: 4px solid var(--wine); }
.confrerie-infos h2 { font-size: 32px; margin: 6px 0 16px; }

/* Couleurs saisies dans l'editeur pour un fond clair : en sombre, celle du texte. */
:where(:root[data-theme="dark"]) .confrerie-riche [style*="color"] { color: inherit !important; }
:where(:root[data-theme="dark"]) .confrerie-riche [style*="background"] { background: none !important; }
.confrerie-hero :focus-visible { outline-color: #f3d5b4; }

/* En-tete compact (jusqu'a 1350 px) : pas de decoupe du logo a degager. */
@media (max-width: 1350px) { .confrerie-hero { padding-top: 64px; } }
@media (max-width: 1024px) {
  .confrerie-presentation { grid-template-columns: 1fr; gap: 36px; }
  .confrerie-bref { position: static; }
  .confrerie-mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqi - 14px) / 2 / 1.5); }
}
@media (max-width: 720px) {
  .confrerie-hero { padding: 54px 18px 46px; }
  .confrerie-hero-contenu { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
  .confrerie-hero-texte { order: 2; }
  .confrerie-hero .lead { margin: 0 auto; font-size: 17px; }
  .confrerie-embleme { width: 168px; height: 168px; padding: 7px; }
  .confrerie-presentation { padding: 54px 18px 24px; }
  .confrerie-galerie { padding: 40px 18px 24px; }
  .confrerie-infos { padding: 32px 18px 72px; }
  .confrerie-infos-carte { padding: 26px 20px 12px; }
  .confrerie-bref { padding: 24px 20px 6px; }
}
@media (max-width: 560px) {
  .confrerie-mosaique { grid-template-columns: 1fr; grid-auto-rows: calc(100cqi / 1.5); gap: 10px; }
  .confrerie-photo-large { grid-column: auto; grid-row: span 1; }
  .confrerie-photo-portrait { grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) { .confrerie-photo img { transition: none; } .confrerie-photo:hover img { transform: none; } }

/* Actualites de la Confrerie : cartes comme celles de la page des actualites. */
.confrerie-actus { max-width: 1140px; margin: 0 auto; padding: 48px 28px 40px; }
.confrerie-actus h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; margin: 8px 0 28px; }
.confrerie-actus-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.confrerie-actu { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--ligne);
  border-top: 3px solid var(--gold); }
.confrerie-actu > img { display: block; width: 100%; height: 190px; object-fit: cover; }
.confrerie-actu > div { padding: 22px 23px 24px; }
.confrerie-actu small { font-size: 12px; color: var(--sourdine); }
.confrerie-actu h3 { margin: 10px 0; font: 500 24px/1.2 'Playfair Display', serif; color: var(--vin-texte); }
.confrerie-actu p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--texte-2); }
.confrerie-actus-toutes { margin: 26px 0 0; }
.confrerie-actus-toutes a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 14px;
  color: var(--vin-texte); text-underline-offset: 4px; }
@media (max-width: 1024px) { .confrerie-actus-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .confrerie-actus { padding: 36px 18px 24px; }
  .confrerie-actus-grille { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .confrerie-actu > img { height: 200px; }
}

/* --- Page « L'association » : memes blocs que la Confrerie, plus un logo et des liens. ------- */
/* Le logo est dessine pour un fond blanc : il garde son cadre clair dans les deux themes. */
.association-logo { width: 280px; padding: 18px 22px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 6px rgba(240,215,183,.28), 0 18px 40px rgba(0,0,0,.35); }
.association-logo img { display: block; width: 100%; height: auto; }
.association-liens { max-width: 1140px; margin: 0 auto; padding: 40px 28px; }
.association-liens h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; margin: 8px 0 28px; }
.association-liens-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.association-liens-grille a { display: grid; gap: 8px; align-content: start; padding: 24px 22px; text-decoration: none;
  color: var(--encre); background: var(--surface); border: 1px solid var(--ligne); border-top: 3px solid var(--gold);
  transition: border-color .2s ease; }
.association-liens-grille a:hover { border-color: var(--vin-texte); }
.association-liens-grille b { font: 500 24px/1.2 'Playfair Display', serif; color: var(--vin-texte); }
.association-liens-grille span { font-size: 14px; line-height: 1.55; color: var(--texte-2); }
.association-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.association-galerie .confrerie-photo { aspect-ratio: 3 / 2; }
.association-galerie .association-photo-large { grid-column: 1 / -1; aspect-ratio: 1905 / 825; }
@media (max-width: 1024px) { .association-liens-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .association-logo { width: 200px; padding: 12px 16px; }
  .association-liens { padding: 32px 18px; }
}
@media (max-width: 560px) {
  .association-liens-grille, .association-galerie { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .association-liens-grille a { transition: none; } }