:root{--wine:#681a2d;--ink:#261b1d;--cream:#faf6f0;--gold:#c39b64;--line:#e6dcd2;--sourdine:#76686a}*{box-sizing:border-box}body{margin:0;background:var(--fond);color:var(--encre);font:16px 'DM Sans',sans-serif}.top-banner{text-align:center;background:var(--wine);color:#fff;padding:10px 20px;font-size:14px;position:sticky;top:0;z-index:5}header{height:91px;display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:auto;padding:0 28px}.wordmark{font:700 16px 'DM Sans',sans-serif;letter-spacing:2px;color:var(--vin-texte);text-decoration:none}.wordmark small{display:block;font-size:9px;letter-spacing:3.5px;margin-top:3px}nav{display:flex;gap:32px}nav a{color:var(--encre);text-decoration:none;font-size:14px}.account{position:relative;color:var(--vin-texte);font-size:33px;text-decoration:none;width:37px}.account span{font-size:17px;position:absolute;left:10px;top:7px}.hero{min-height:610px;text-align:center;padding:50px 20px 90px;background:radial-gradient(circle at center,var(--surface-2) 0,var(--teinte) 100%)}.logo{width:120px;max-height:105px;object-fit:contain;margin-bottom:14px}.eyebrow{font-size:11px;letter-spacing:2.4px;font-weight:700;color:var(--vin-texte);margin:15px 0}.hero h1,h1,h2{font-family:'Playfair Display',serif;font-weight:500}.hero h1{font-size:clamp(48px,7vw,86px);line-height:.98;margin:12px}.hero em{color:var(--vin-texte)}.lead{max-width:570px;margin:25px auto 32px;line-height:1.7;color:var(--texte-2)}.button,button{background:var(--wine);color:white;border:0;padding:14px 23px;text-decoration:none;font:700 13px 'DM Sans',sans-serif;letter-spacing:.4px;cursor:pointer}.section,.dash{max-width:1140px;margin:auto;padding:90px 28px}.intro{max-width:970px;text-align:center}.section h2,.dash h1{font-size:46px;line-height:1.08;margin:8px 0 22px}.intro>p:not(.eyebrow){line-height:1.8;max-width:650px;margin:0 auto}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px;text-align:left}.cards article,.news{padding:25px;background:var(--surface);border:1px solid var(--ligne)}.cards b{display:block;font:500 24px 'Playfair Display',serif;color:var(--vin-texte);margin-bottom:9px}.cards span{line-height:1.5;font-size:14px}.region{min-height:500px;background:linear-gradient(90deg,rgba(44,10,19,.86),rgba(44,10,19,.23)),url('/static/images/bordeaux.webp') center/cover;display:flex;align-items:center;color:white}.region div{max-width:1140px;width:100%;margin:auto;padding:70px 28px}.region .eyebrow{color:#f3d5b4}.region h2{font-size:48px;margin:10px 0}.region p:not(.eyebrow){max-width:460px;line-height:1.7}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.news h3{font:500 24px 'Playfair Display',serif;margin:9px 0}.news p{line-height:1.6;font-size:14px}.news small,.news i,.muted{font-size:12px;color:var(--sourdine)}.news i{display:block;margin-top:14px}.auth{max-width:470px;margin:35px auto 100px;padding:45px 30px;background:var(--surface);border:1px solid var(--ligne)}.auth.wide{max-width:610px}.auth h1{font-size:45px;margin:5px 0}.auth>p{line-height:1.65}.auth a{color:var(--vin-texte);font-size:14px}.auth>a:not(.button){display:inline-block;padding:12px 0}form{display:grid;gap:14px;margin-top:25px}label{display:grid;gap:6px;font-weight:700;font-size:13px}label small{font-weight:500;color:var(--texte-2)}input,textarea,select{border:1px solid var(--ligne-forte);padding:12px;background:var(--surface);font:16px 'DM Sans',sans-serif;width:100%}textarea{min-height:85px;resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}.flash{max-width:900px;margin:10px auto;padding:13px 18px;background:var(--ok-fond);color:var(--ok-texte)}.flash.error{background:var(--danger-fond);color:var(--danger-texte)}.dash{padding-top:55px}.dashboard-grid,.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.dashboard-grid>section,.admin-grid>section,.dash>section{background:var(--surface);border:1px solid var(--ligne);padding:25px}.dashboard-grid>section:last-child{grid-column:span 2}.dash h2{font-size:28px;margin-top:0}.conversation{max-height:350px;overflow:auto;border:1px solid var(--ligne);padding:13px;background:var(--surface-2)}.bubble{background:var(--bulle);padding:12px;margin:8px 0;max-width:85%;font-size:14px;line-height:1.5}.bubble.mine{background:var(--bulle-moi);margin-left:auto}.bubble small{display:block;margin-top:5px;color:var(--sourdine)}.table>div{border-top:1px solid var(--ligne);padding:14px 4px;display:flex;justify-content:space-between;gap:15px}.table small{display:block;color:var(--sourdine);margin-top:4px}.actions{display:flex;gap:6px}.actions form{margin:0}.subtle{background:#745e54}.danger{background:#962d32}footer{background:var(--pied);color:#f8f0e9;padding:36px max(28px,calc((100% - 1140px)/2));display:flex;justify-content:space-between;font-size:14px}footer b{color:#e8c99f}@media(max-width:720px){header{height:auto;padding:18px;gap:13px}nav{display:none}.hero{min-height:530px}.cards,.news-grid,.dashboard-grid,.admin-grid{grid-template-columns:1fr}.dashboard-grid>section:last-child{grid-column:auto}.section h2,.dash h1,.region h2{font-size:38px}.table>div,footer{display:block}.actions{margin-top:12px}.top-banner{position:static}}

/* --- Couleurs : palette claire par defaut, sombre sur demande --------------
   Le reglage du systeme n'est pas suivi : le sombre ne s'applique que si le
   visiteur l'a choisi (bouton de l'en-tete, cookie « theme » lu par le serveur,
   qui pose data-theme="dark" sur <html>). :where() garde aux regles sombres
   la specificite qu'elles avaient dans leur ancienne media query.
   --wine reste le bordeaux des fonds pleins (boutons, bandeau) ; --vin-texte
   est le bordeaux des textes, liens et contours, eclairci en mode sombre.
   Les ilots clairs (en-tete et ses logos, carte d'adherent, actualite
   ouverte, editeur, logos des partenaires) gardent la palette claire : leurs
   images et les couleurs saisies dans l'editeur sont faites pour un fond clair. */
:root, header, .carte-adherent, .news-detail-card, .news-rich-editor, .partenaire-logo {
  --fond: #faf6f0; --surface: #fff; --surface-2: #fbf7f3; --teinte: #f6eee8; --teinte-vin: #f7ecee;
  --encre: #261b1d; --texte-2: #5d5051; --texte-3: #6a5a5c; --sourdine: #76686a; --inactif-texte: #8a7c7d;
  --vin-texte: #681a2d; --ligne: #e6dcd2; --ligne-forte: #d8cbc4; --pied: #261b1d;
  --bulle: #f1e4df; --bulle-moi: #ead2d6;
  --ok-texte: #285024; --ok-fond: #e8f0e5;
  --attention-texte: #7a5a1d; --attention-fond: #f6efe2; --attention-bord: #e3d3b8;
  --avis-fond: #fdf1dc; --avis-accent: #b8892f; --exemple-fond: #fff3cd; --exemple-bord: #e8d38a;
  --danger-texte: #7a1d17; --danger-vif: #962d32; --danger-fond: #fbeae8; --danger-bord: #e8b9b4;
  --controle-bord: #b9a79f; --controle-bord-survol: #8c7169; --controle-fond-inactif: #f4efea;
  color-scheme: light;
}
:root[data-theme="dark"], :where(:root[data-theme="dark"]) header nav.is-open {
  --wine: #8a2840;
  --fond: #161112; --surface: #211a1c; --surface-2: #1b1517; --teinte: #2b2225; --teinte-vin: #3b2229;
  --encre: #f2ebe7; --texte-2: #d6cac6; --texte-3: #c2b4b1; --sourdine: #ada09e; --inactif-texte: #8f8385;
  --vin-texte: #eba3b5; --ligne: #3a2f32; --ligne-forte: #574a4d; --pied: #0f0b0c;
  --bulle: #2b2225; --bulle-moi: #43252d;
  --ok-texte: #a9d89d; --ok-fond: #1b2a19;
  --attention-texte: #ebc87f; --attention-fond: #2d2515; --attention-bord: #6d5627;
  --avis-fond: #2d2515; --avis-accent: #c99a45; --exemple-fond: #33290f; --exemple-bord: #6d5a1f;
  --danger-texte: #f5a79e; --danger-vif: #f5a79e; --danger-fond: #3a1c1a; --danger-bord: #7c3b36;
  --controle-bord: #7d6d70; --controle-bord-survol: #a8989a; --controle-fond-inactif: #2b2225;
  color-scheme: dark;
}
/* L'en-tete reste une bande claire, legerement attenuee : les deux logos
   (bordeaux et violet, fond blanc) n'existent qu'en version pour fond clair. */
:where(:root[data-theme="dark"]) header { --surface: #f3ece6; }

/* --- En-tete, accueil, galerie, pied de page et navigation ---------------- */
.wordmark { display: flex; align-items: center; height: 72px; }
.wordmark img { width: 138px; max-height: 68px; object-fit: contain; object-position: left center; }

/* Bandeau d'accueil : logo central et découpe blanche sur l'image. */
header {
  max-width: none;
  height: 98px;
  padding: 0 42px;
  background: var(--surface);
  position: relative;
  z-index: 4;
  margin-bottom: -28px;
  border-radius: 0 0 42px 42px;
  box-shadow: 0 9px 22px rgba(59, 22, 28, .12);
}
.wordmark {
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
}
.wordmark img { width: 150px; max-height: 76px; object-position: center; }
header nav { margin-left: auto; margin-right: 42px; gap: 38px; }
header .account { flex: 0 0 auto; }

@media (max-width: 720px) {
  header { height: 82px; padding: 0 18px; margin-bottom: -20px; border-radius: 0 0 28px 28px; }
  .wordmark { top: 8px; }
  .wordmark img { width: 116px; max-height: 62px; }
}

/* La découpe ne concerne que le centre : le reste du bandeau demeure droit. */
header {
  height: 88px;
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}
header::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 302px;
  height: 86px;
  left: 50%;
  bottom: -56px;
  transform: translateX(-50%);
  background: var(--surface);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
header > * { position: relative; z-index: 1; }
.wordmark { top: 1px; height: 148px; }
.wordmark img { width: 278px; max-height: 146px; }
.brand-logos { position: absolute; z-index: 2; left: 50%; top: 3px; transform: translateX(-50%); height: 128px; display: flex; align-items: center; gap: 12px; }
.brand-logos .wordmark { position: static; top: auto; left: auto; transform: none; height: 128px; }
.brand-logos .wordmark img { width: 194px; max-height: 122px; }
.gironde-logo { width: 150px; max-height: 82px; object-fit: contain; }
.left-gironde-logo { position: absolute; z-index: 2; left: 34px; top: 16px; width: 142px; max-height: 58px; object-fit: contain; object-position: left center; }
.region { position: relative; overflow: hidden; background: #2c0a13; }
/* Bordeaux, dune du Pilat, vignoble : trois panneaux sous le voile qui garde le texte lisible. */
.region .region-triptyque { position: absolute; inset: 0; max-width: none; width: auto; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.region-triptyque img { width: 100%; height: 100%; object-fit: cover; }
.region-triptyque::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(44,10,19,.88), rgba(44,10,19,.5) 55%, rgba(44,10,19,.3)); }
.region > div:not(.region-triptyque) { position: relative; z-index: 1; }
/* En mobile le texte couvre les trois panneaux : voile uniforme, plus dense. */
@media (max-width: 720px) { .region-triptyque::after { background: rgba(44,10,19,.74); } }

.hero { padding-top: 96px; }

@media (max-width: 720px) {
  header { height: 76px; }
  header::after { width: 236px; height: 70px; bottom: -45px; }
  .wordmark { top: 0; height: 112px; }
  .wordmark img { width: 194px; max-height: 108px; }
  .brand-logos { top: 4px; height: 98px; gap: 6px; }
  .brand-logos .wordmark { height: 98px; }
  .brand-logos .wordmark img { width: 126px; max-height: 84px; }
  .gironde-logo { width: 94px; max-height: 54px; }
  .left-gironde-logo { left: 14px; top: 22px; width: 74px; max-height: 32px; }
  .hero { padding-top: 82px; }
}

/* Navigation symétrique autour du logo. */
header nav { display: block; margin: 0; }
header nav a {
  position: absolute;
  top: 34px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-groupe { display: contents; }
header nav a.nav-metiers { right: calc(50% + 178px); }
header nav a.nav-actualites { left: calc(50% + 178px); }

@media (max-width: 1350px) {
  header nav { display: none; }
}

/* Les deux liens restent dans le bandeau blanc, de part et d'autre du logo. */
header nav {
  position: absolute;
  /* 33 px moins le rembourrage vertical des liens : le texte reste a sa place. */
  top: 21px;
  left: 50%;
  width: 620px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Zone cliquable de 44 px de haut, sans changer la place du texte. */
header nav a { position: static; font-size: 16px; display: inline-block; padding: 12px 4px; }
/* Deux liens a gauche du logo, un a droite : le groupe garde son propre espacement. */
.nav-groupe { display: flex; gap: 38px; }
header .account {
  margin-left: auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid var(--ligne-forte);
  border-radius: 22px;
  font-size: 20px;
  line-height: 1;
}
header .account b { font: 700 13px 'DM Sans', sans-serif; white-space: nowrap; }
.user-symbol { width: 18px; height: 18px; position: relative; display: inline-block; }
.user-symbol::before { content: ''; position: absolute; width: 7px; height: 7px; border: 1.8px solid var(--wine); border-radius: 50%; top: 0; left: 5px; }
.user-symbol::after { content: ''; position: absolute; width: 14px; height: 8px; border: 1.8px solid var(--wine); border-bottom: 0; border-radius: 9px 9px 0 0; bottom: 0; left: 1.5px; }

@media (max-width: 1350px) {
  header nav { display: none; }
}

/* Accueil : mettre l'artisanat au premier plan dès l'arrivée sur le site. */
.hero { position: relative; overflow: hidden; background: var(--wine); color: #fff; }
.hero-triptych { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.hero-triptych::after { content: ''; position: absolute; inset: 0; background: rgba(12, 10, 11, .24); }
.hero-triptych img { width: 100%; height: 100%; object-fit: cover; filter: blur(0); transition: opacity 1.15s cubic-bezier(.4,0,.2,1), transform 1.15s cubic-bezier(.4,0,.2,1), filter 1.15s cubic-bezier(.4,0,.2,1); }
.hero-triptych img.is-changing { opacity: 1; filter: blur(14px); transform: scale(1.06); }
.hero-triptych img:nth-child(1) { object-position: 53% center; }
.hero-triptych img:nth-child(2) { object-position: 50% center; }
.hero-triptych img:nth-child(3) { object-position: 48% center; }
.hero-content { position: relative; z-index: 1; }
/* Voile flou sous le texte seulement : le blanc garde un contraste d'au moins
   4,5:1 meme sur un fond de studio clair, et les photos restent nettes autour. */
.hero-content::before { content: ''; position: absolute; z-index: -1; top: -64px; bottom: -64px; left: 50%;
  width: min(820px, calc(100% + 180px)); transform: translateX(-50%);
  background: rgba(26, 10, 15, .64); border-radius: 50%; filter: blur(38px); pointer-events: none; }
@media (max-width: 720px) { .hero-content::before { top: -120px; } }
.hero .eyebrow { color: #f0d7b7; }
.hero h1, .hero em { color: #fff; }
.hero .lead { color: #fff8f0; }
.hero .button { background: #fff8ef; color: var(--wine); }
.hero h1, .hero .lead, .hero .eyebrow { text-shadow: 0 2px 12px rgba(0, 0, 0, .62); }
.hero h1, .hero h1 em { color: #fff; background: none; -webkit-text-fill-color: #fff; text-shadow: 0 3px 10px rgba(0, 0, 0, .72); }

.official-gallery { max-width: 1140px; margin: 0 auto; padding: 92px 28px; display: grid; grid-template-columns: .9fr 1.55fr; gap: 22px; align-items: center; }
.gallery-copy h2 { font-size: 42px; line-height: 1.08; margin: 8px 0 18px; }
.gallery-copy > p:not(.eyebrow) { max-width: 340px; line-height: 1.7; }
.official-gallery figure { margin: 0; overflow: hidden; background: var(--teinte); }
.official-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.official-gallery figure:hover img { transform: scale(1.035); }
.gallery-main { height: 345px; }
.gallery-main img { object-position: center; }
.official-gallery figcaption { padding: 10px 12px; color: var(--vin-texte); background: var(--surface); font-size: 12px; font-weight: 700; }
.gallery-details { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: -4px; }
.gallery-details figure { height: 225px; }
.gallery-details img { height: 184px; }
@media (max-width: 720px) { .official-gallery { padding: 68px 20px; display: block; } .gallery-copy { margin-bottom: 25px; } .gallery-main { height: 245px; } .gallery-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .gallery-details figure { height: 175px; } .gallery-details img { height: 135px; } .hero-triptych { gap: 2px; } }
footer { position: relative; }
/* Mentions sous le pied de page, sur leur propre ligne : texte a 13 px et liens
   hauts de 44 px, faciles a toucher. */
footer { flex-wrap: wrap; row-gap: 6px; padding-bottom: 14px; }
.site-credit { flex: 1 0 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 4px;
  margin-top: 10px; color: #b3aaab; font-size: 13px; font-weight: 400; text-align: center; }
.site-credit a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
/* Liens du pied de page a la couleur du texte, au lieu du bleu du navigateur. */
.site-credit a { color: inherit; }
@media (max-width: 720px) { .site-credit { margin-top: 18px; } footer > span { display: block; margin-top: 6px; } }

/* Menu mobile : sous 720px la navigation du bandeau est masquee, un bouton
   ouvre a la place un panneau plein ecran. Le panneau est independant de la
   mise en page de l'en-tete, dont le logo deborde volontairement vers le bas. */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 11px; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--wine, #681a2d);
  transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Menu ouvert en mode sombre : la croix repose sur le panneau sombre, pas sur l'en-tete clair. */
:where(:root[data-theme="dark"]) .nav-toggle[aria-expanded="true"] span { background: #eba3b5; }

@media (max-width: 1350px) {
  /* L'ordre du flux ne suit pas le DOM : on le fixe pour que le bouton reste
     a droite, apres le lien de compte, et ne recouvre pas le logo Gironde. */
  header .left-gironde-logo { order: 1; }
  header .wordmark { order: 2; }
  header .account { order: 3; }
  .nav-toggle { display: flex; order: 4; margin-left: 6px; z-index: 60; }
  header nav { display: none; }
  header nav.is-open {
    display: flex; flex-direction: column; gap: 0;
    justify-content: flex-start; align-items: stretch;
    position: fixed; inset: 0; z-index: 50;
    transform: none; margin: 0; width: auto; max-width: none;
    padding: 116px 24px 32px;
    background: var(--fond);
    overflow-y: auto;
  }
  header nav.is-open .nav-groupe { display: contents; }
  header nav.is-open a {
    position: static; display: block; width: auto; transform: none;
    padding: 20px 2px; font-size: 20px; text-align: left;
    border-bottom: 1px solid var(--ligne);
  }
  /* Empeche le defilement de la page derriere le panneau ouvert. */
  body.menu-ouvert { overflow: hidden; }
}

/* Appel a l'action « Adherer ». Sur grand ecran il vit dans le bandeau, a cote
   du lien de compte ; sous 720px il rejoint le panneau de navigation, ou la
   place ne manque pas. */
/* Le logo Gironde et la navigation sont en positionnement absolu : sans marge
   automatique le bouton se retrouverait a l'extreme gauche, sous le logo. Le
   lien de compte porte deja margin-left:auto, on le neutralise ici pour que
   tout l'espace libre revienne au bouton et que les deux restent accoles. */
.cta-adhesion { flex: 0 0 auto; margin-left: auto;
  padding: 11px 18px; background: var(--wine, #681a2d);
  color: #fff; font: 700 13px 'DM Sans', sans-serif; letter-spacing: .4px;
  text-decoration: none; white-space: nowrap; }
.cta-adhesion:hover, .cta-adhesion:focus-visible { background: #7d2338; }
header .cta-adhesion + .account { margin-left: 14px; }
header nav a.nav-adhesion { display: none; }

@media (max-width: 1350px) {
  .cta-adhesion { display: none; }
  header nav.is-open a.nav-adhesion { display: block; color: var(--vin-texte); font-weight: 700; }
}


/* En-tête compact avec menu, jusqu'a 1350 px : au-dela seulement, logo, liens et
   boutons tiennent cote a cote sans se chevaucher (mesure pour visiteur,
   adherent en attente, adherent a jour et administrateur). */
@media (max-width:1350px){
  header{height:70px;padding:0 10px;display:block}
  header::after{display:none}
  header .left-gironde-logo{position:absolute;left:10px;top:19px;width:66px;max-height:30px;object-fit:contain}
  header .wordmark{position:absolute;left:50%;top:5px;transform:translateX(-50%);height:60px;margin:0}
  header .wordmark img{width:112px;max-height:60px;display:block}
  header .account{position:absolute;right:54px;top:14px;width:40px;height:40px;margin:0;padding:9px;border-radius:50%;justify-content:center}
  header .account b{display:none}
  header .nav-toggle{position:absolute;right:5px;top:13px;margin:0}
  header nav.is-open{padding-top:92px}
}

/* Alertes : sur ordinateur, le logo et sa découpe débordent de 61 px sous le
   bandeau ; la première alerte se place en dessous au lieu d'être recouverte.
   Sur mobile, l'en-tête compact ne déborde pas. */
header + .flash { position: relative; margin-top: 76px; }
@media (max-width:1350px){
  header + .flash { margin-top: 12px; }
}

/* Deconnexion en fin de menu mobile. Pas dans le bandeau, deja plein a cote de la navigation. */
header nav .nav-deconnexion { display: none; margin: 0; }
@media (max-width:1350px){
  header nav.is-open .nav-deconnexion { display: block; }
  header nav.is-open .nav-deconnexion button {
    display: block; width: 100%; text-align: left; padding: 20px 2px; font: 500 20px 'DM Sans', sans-serif; cursor: pointer;
    color: var(--encre); border: 0; border-bottom: 1px solid var(--ligne); border-radius: 0; background: none; }
}

/* Entre 1101 et 1279 px, les liens se rapprochent du logo pour laisser la place
   aux boutons de droite (« Mon adhésion » + « Mon compte » au plus large). */
@media (min-width:1351px){
  /* Quatre liens et un logo central : la navigation occupe la largeur disponible
     et se partage en trois zones — deux liens a gauche, le logo au milieu, deux a
     droite —, plutot que de laisser les bords vides. Elle laisse 380 px de
     chaque cote : a droite, le bouton le plus large (« Espace annonceur »), la
     bascule clair/sombre et le lien de compte. */
  header nav { width: clamp(800px, calc(100vw - 760px), 1400px); display: grid;
    /* minmax(0, 1fr) : le groupe de gauche, plus large que sa colonne, ne la fait pas
       grandir (ce qui decentrerait la colonne du logo). */
    grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr); align-items: center; justify-content: initial;
    /* Sans ecart entre les zones : la colonne du logo reste centree et les liens
       de droite ne debordent pas vers les boutons. */
    column-gap: 0; }
  .nav-groupe { display: flex; justify-content: space-evenly; gap: 32px; }
  .nav-groupe-droite { grid-column: 3; }
  /* Trois liens a gauche (« Nos artisans », « Nos métiers », « L'association ») : quand sa
     colonne est trop etroite, le groupe deborde vers la gauche, dans l'espace libre
     a droite du logo Gironde, au lieu de rogner sur le logo central. */
  .nav-groupe:not(.nav-groupe-droite) { gap: 16px; margin-left: min(0px, calc(100% - 320px)); }
  /* Trois liens a droite aussi (« Confrérie du canelé », « Avantages », « Actualités ») : meme
     espacement serre, cales contre le logo pour laisser la place au bouton d'action a droite. */
  .nav-groupe-droite { gap: 16px; justify-content: flex-start; }
}
@media (min-width:1351px) and (max-width:2159px){
  /* Libelle court « Avantages » tant que la place manque (trois liens de chaque cote du logo,
     et le bouton « Espace annonceur » a droite) ; le nom accessible reste complet (aria-label).
     « Confrérie du canelé » reste toujours en entier, a la demande du proprietaire du site. */
  header nav .nav-partenaires .nav-libelle-suite { display: none; }
}
@media (min-width:1351px) and (max-width:1520px){
  /* Place la plus serree : « Confrérie du canelé » passe sur deux lignes plutot que d'etre
     abrege ou de pousser « Actualités » sous le bouton d'action. */
  header nav a.nav-confrerie { white-space: normal; text-align: center; line-height: 1.15; }
  header nav a.nav-confrerie .nav-libelle-suite { display: block; white-space: nowrap; }
}
/* Bouton d'action de l'en-tete : libelle court la ou le long empieterait sur « Actualités » ;
   le nom accessible reste le libelle long (aria-label). */
header .cta-court { display: none; }
@media (min-width:1351px) and (max-width:1860px){
  header .cta-annonceur .cta-long { display: none; }
  header .cta-annonceur .cta-court { display: inline; }
}
@media (min-width:1351px) and (max-width:1400px){
  header .cta-suivi .cta-long { display: none; }
  header .cta-suivi .cta-court { display: inline; }
}
@media (min-width:1701px){
  .nav-groupe:not(.nav-groupe-droite) { margin-left: min(0px, calc(100% - 400px)); }
}
/* Page en cours : soulignement dore, sans changer la largeur du lien. */
header nav a[aria-current="page"] { color: var(--vin-texte); text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 2px; text-underline-offset: 7px; }
@media (min-width:1351px) and (max-width:1700px){
  /* Tant que la place manque a droite, le lien de compte se reduit a son icone. */
  header .account { width: 40px; height: 40px; padding: 9px; border-radius: 50%; justify-content: center; }
  header .account b { display: none; }
}

/* --- Bascule clair/sombre ------------------------------------------------ */
/* Pastille ronde a cote du lien de compte, sur la bande claire de l'en-tete
   dans les deux themes. Lune en clair, soleil en sombre : l'icone montre le
   theme obtenu au clic. */
header .theme-bascule { display: block; flex: 0 0 auto; margin: 0; }
.theme-bouton { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 1px solid var(--ligne-forte); border-radius: 50%;
  background: transparent; color: var(--vin-texte); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease; }
/* Cible tactile de 46 px sans agrandir la pastille. */
.theme-bouton::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
.theme-bouton:hover { background: var(--teinte-vin); border-color: var(--vin-texte); }
.theme-icone { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icone-soleil { display: none; }
:root[data-theme="dark"] .theme-icone-soleil { display: block; }
:root[data-theme="dark"] .theme-icone-lune { display: none; }
@media (min-width:1351px){
  header .theme-bascule { margin-left: auto; }
  header .cta-adhesion + .theme-bascule { margin-left: 14px; }
  header .theme-bascule + .account { margin-left: 10px; }
}
@media (max-width:1350px){
  header .theme-bascule { position: absolute; right: 98px; top: 14px; }
}
/* Petits ecrans : le logo central se decale vers la gauche pour laisser la
   place aux trois boutons de droite. */
@media (max-width:420px){
  header .wordmark { left: calc(50% - 22px); }
}
@media (max-width:359px){
  header .wordmark img { width: 100px; }
}
/* Juste au-dessus du menu compact, l'appel a l'action se resserre pour ne pas
   toucher le dernier lien de la navigation. */
@media (min-width:1351px) and (max-width:1450px){
  header { padding-right: 28px; }
  header .cta-adhesion { padding: 11px 10px; }
}
@media (prefers-reduced-motion: reduce) { .theme-bouton { transition: none; } }

/* --- Accessibilite ------------------------------------------------------- */
/* Lien d'evitement : hors ecran, il apparait au premier appui sur Tab. */
.lien-evitement { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px;
  background: var(--wine); color: #fff; font: 700 14px 'DM Sans', sans-serif; text-decoration: none; }
.lien-evitement:focus { top: 12px; }
#contenu:focus { outline: none; }
/* Focus clavier visible partout, aux couleurs du site (clair sur fond sombre). */
:focus-visible { outline: 2px solid var(--vin-texte); outline-offset: 2px; }
.lien-evitement:focus-visible, .top-banner :focus-visible, footer :focus-visible, .hero :focus-visible,
.annuaire-hero :focus-visible, .actualites-hero :focus-visible, .region :focus-visible { outline-color: #f3d5b4; }

/* --- Bandeau du haut ---------------------------------------------------------- */
/* Couleur choisie au back-office (attribut style : --bandeau-fond et --bandeau-texte, texte
   calcule pour un contraste d'au moins 4,5:1) ; sans choix, le vin du site, ajuste en sombre.
   La couleur choisie s'applique telle quelle dans les deux themes. */
.top-banner { background: var(--bandeau-fond, var(--wine)); color: var(--bandeau-texte, #fff);
  padding: 17px 24px; font-size: 16px; font-weight: 500; line-height: 1.45;
  /* Filet discret : une teinte proche du fond ou de l'en-tete reste distincte. */
  box-shadow: inset 0 -1px 0 var(--ligne-forte); }
.top-banner :focus-visible { outline-color: currentColor; }
/* Bandeau colle en haut a l'ecran : une ancre ne doit pas finir dessous. --hauteur-bandeau suit
   sa hauteur reelle (nav.js) ; sans script, celle d'une ligne. */
html:has(.top-banner) { scroll-padding-top: calc(var(--hauteur-bandeau, 57px) + 15px); }
@media (max-width: 720px) {
  .top-banner { padding: 14px 18px; font-size: 15px; }
  html:has(.top-banner) { scroll-padding-top: 0; }
}

/* --- Mode sombre : complements ------------------------------------------- */
/* La couleur du texte se transmet deja calculee : chaque ilot clair la
   redemande a sa propre palette. */
header, .carte-adherent, .news-detail-card, .news-rich-editor, .partenaire-logo { color: var(--encre); }
input, textarea, select { color: var(--encre); }
/* Liens sans style propre : bordeaux du site plutot que le bleu du navigateur (illisible en sombre). */
a { color: var(--vin-texte); }
/* Extraits d'actualites dans les listes : les couleurs choisies dans
   l'editeur (pour un fond clair) cedent la place a celle du texte. */
:where(:root[data-theme="dark"]) .news [style*="color"], :where(:root[data-theme="dark"]) .actualite-card [style*="color"] { color: inherit !important; }
/* Le logo Gironde (JPEG sur fond blanc) se fond dans la bande claire attenuee. */
:where(:root[data-theme="dark"]) header .left-gironde-logo { mix-blend-mode: multiply; }
:where(:root[data-theme="dark"]) .news [style*="background"], :where(:root[data-theme="dark"]) .actualite-card [style*="background"] { background: none !important; }
.flash.attention { background: var(--attention-fond); color: var(--attention-texte); }

/* Galeries : photo cliquable, ouverte en grand par visionneuse.js */
.agrandir { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.agrandir:focus-visible { outline: 3px solid var(--vin-texte); outline-offset: -3px; }
.visionneuse { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(16, 11, 12, .94); color: #f8f0e9; overflow: hidden; touch-action: pan-y; }
.visionneuse::backdrop { background: rgba(16, 11, 12, .6); }
.visionneuse figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 100%; margin: 0; padding: 56px 72px; box-sizing: border-box; }
.visionneuse img { max-width: 100%; max-height: calc(100% - 40px); object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); user-select: none; -webkit-user-drag: none; }
.visionneuse figcaption { max-width: 760px; text-align: center; font-size: 14px; line-height: 1.5; }
.visionneuse-compteur { position: absolute; top: 18px; left: 22px; margin: 0; font-size: 14px; letter-spacing: 1px; }
.visionneuse button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 400 32px/1 'DM Sans', sans-serif; letter-spacing: 0; }
.visionneuse button:hover, .visionneuse button:focus-visible { background: rgba(255, 255, 255, .28); }
.visionneuse button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visionneuse-fermer { top: 12px; right: 14px; }
.visionneuse-precedente, .visionneuse-suivante { top: 50%; transform: translateY(-50%); font-size: 40px; }
.visionneuse-precedente { left: 12px; }
.visionneuse-suivante { right: 12px; }
.visionneuse.seule .visionneuse-precedente, .visionneuse.seule .visionneuse-suivante { display: none; }
@media (max-width: 720px) {
  .visionneuse figure { padding: 64px 12px 84px; }
  .visionneuse-precedente, .visionneuse-suivante { top: auto; bottom: 18px; transform: none; }
  .visionneuse-precedente { left: calc(50% - 64px); }
  .visionneuse-suivante { right: calc(50% - 64px); }
}

/* --- Ajustements responsive (audit du 07/10/2026) ---------------------------- */
/* Boutons d'une ligne (adherents, administrateurs, invitations) : passent a la ligne
   au lieu de sortir de l'ecran. */
.actions { flex-wrap: wrap; }
/* En-tete compact sur tablette et petit ordinateur : le bouton d'action reste visible,
   a gauche du bouton de theme (il ne chevauche le logo central qu'en dessous de 721 px). */
@media (min-width:721px) and (max-width:1350px){
  header .cta-adhesion { display: flex; align-items: center; min-height: 44px; position: absolute; right: 146px; top: 13px; margin: 0; }
}
@media (min-width:721px) and (max-width:820px){
  header .cta-annonceur .cta-long { display: none; }
  header .cta-annonceur .cta-court { display: inline; }
}
/* Tres petits ecrans : le logo central s'ecarte du bouton de theme. */
@media (max-width:359px){
  header .wordmark { left: calc(50% - 32px); }
}