/*
 * Acionna — outils du thème (1.5.0), chargés sur tout le site :
 *  1. bouton mode jour / mode nuit ;
 *  2. bandeau « Prochaine sortie » avec compte à rebours ;
 *  3. visionneuse de photos (zoom, diaporama plein écran) ;
 *  4. carte de membre chromée de l'annuaire (recto / verso).
 * Les mouvements sont dans @media (prefers-reduced-motion: no-preference) : sans eux, tout
 * reste utilisable, simplement sans animation.
 */

/* ======================= 1. Mode jour / nuit ======================= */
.acn-theme{
  position:relative; flex: 0 0 auto;
  width: 42px; height: 42px; padding:0;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink); cursor:pointer;
  display:grid; place-items:center;
}
.acn-theme:hover, .acn-theme:focus-visible{ border-color: var(--accent); }
.acn-theme:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
/* l'astre : soleil orange en mode jour, lune croissant en mode nuit */
.acn-theme-astre{
  position:relative; width: 18px; height: 18px; border-radius:50%;
  background: var(--accent);
  overflow: visible;
}
.acn-theme-astre::after{ /* l'ombre qui croque la lune */
  content:""; position:absolute; width: 16px; height: 16px; border-radius:50%;
  top: -5px; right: -6px;
  background: var(--bg);
  transform: scale(0); transform-origin: 70% 30%;
}
.acn-theme-rayons, .acn-theme-rayons::before{
  position:absolute; inset:0; border-radius:50%;
}
.acn-theme-rayons{
  box-shadow:
    0 -12px 0 -7px var(--accent), 0 12px 0 -7px var(--accent),
    12px 0 0 -7px var(--accent), -12px 0 0 -7px var(--accent);
}
.acn-theme-rayons::before{
  content:"";
  transform: rotate(45deg);
  box-shadow:
    0 -12px 0 -7px var(--accent), 0 12px 0 -7px var(--accent),
    12px 0 0 -7px var(--accent), -12px 0 0 -7px var(--accent);
}
:root[data-theme="dark"] .acn-theme-astre{ background: #e9e3d6; box-shadow: 0 0 12px rgba(255,240,210,.35); }
:root[data-theme="dark"] .acn-theme-astre::after{ transform: scale(1); }
:root[data-theme="dark"] .acn-theme-rayons{ transform: scale(.4) rotate(-90deg); opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .acn-theme-astre{ transition: background-color .5s, box-shadow .5s, transform .6s cubic-bezier(.34,1.56,.64,1); }
  .acn-theme-astre::after{ transition: transform .5s cubic-bezier(.22,1,.36,1), background-color .5s; }
  .acn-theme-rayons{ transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .4s; }
  .acn-theme:hover .acn-theme-astre{ transform: rotate(-20deg) scale(1.08); }
  /* bascule : la nouvelle ambiance s'étend en cercle depuis le bouton (animations.js) */
  .acn-bascule::view-transition-old(root),
  .acn-bascule::view-transition-new(root){ animation: none; mix-blend-mode: normal; }
  .acn-bascule header, .acn-bascule #wpadminbar{ view-transition-name: none !important; }
}
@media (max-width: 860px){
  .acn-theme{ margin-left: auto; margin-right: 10px; }
}
/* le bouton prend un peu de place dans le menu : liens sur une seule ligne, espacement souple */
.navlinks{ gap: clamp(12px, 1.7vw, 28px); }
.navlinks a{ white-space: nowrap; }

/* ======================= 2. Prochaine sortie ======================= */
.acn-prochaine{ padding-block: clamp(28px, 6vh, 56px); border-bottom: 1px solid var(--line); }
.acn-prochaine-carte{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns: 1.2fr auto auto; align-items:center; gap: 24px 36px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line); border-radius: 10px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card) 55%);
  box-shadow: var(--shadow);
}
.acn-prochaine-carte::before{ /* liseré orange à gauche */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--accent);
}
.acn-prochaine h2{ font-size: clamp(1.4rem, 3vw, 2rem); margin-top: 8px; }
.acn-prochaine h2 a{ text-decoration:none; }
.acn-prochaine h2 a:hover{ color: var(--accent); }
.acn-prochaine-date{ margin: 6px 0 0; font-size: .95rem; }
.acn-prochaine-date::first-letter{ text-transform: uppercase; }
.acn-compte-rebours{ display:flex; gap: 10px; }
.acn-cr-bloc{
  min-width: 64px; padding: 10px 8px 8px; text-align:center;
  border-radius: 6px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, var(--card));
}
.acn-cr-val{
  display:block; font-family:'Oswald', sans-serif; font-size: 1.9rem; line-height:1.05;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.acn-cr-nom{ display:block; font-size: .66rem; letter-spacing:.14em; text-transform: uppercase; color: var(--ink-dim); margin-top: 4px; }
.acn-compte-rebours.acn-parti .acn-cr-val{ color: var(--ink); }
/* Version compacte dans la carte « Prochaine sortie » de l'accueil adhérents */
.acn-cr-mini{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.acn-cr-mini .acn-cr-bloc{ display:block; min-width:0; max-width:none; padding: 7px 4px 6px; }
.acn-cr-mini .acn-cr-val{ font-size: 1.35rem; }
.acn-cr-mini .acn-cr-nom{ font-size: .58rem; letter-spacing: .08em; margin-top: 2px; }
@media (max-width: 860px){
  .acn-prochaine-carte{ grid-template-columns: 1fr; text-align:center; }
  .acn-prochaine .eyebrow{ justify-content:center; }
  .acn-compte-rebours{ justify-content:center; }
  .acn-cr-bloc{ min-width: 0; flex: 1 1 0; max-width: 78px; }
  .acn-prochaine-lien{ justify-self:center; }
  .acn-cr-nom{ font-size: .58rem; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: no-preference){
  @keyframes acn-cr-tombe{
    from{ transform: translate3d(0, -60%, 0) rotateX(70deg); opacity:0; }
    to  { transform: none; opacity:1; }
  }
  @keyframes acn-cr-pouls{
    0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
    50%     { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
  }
  .acionna-anim .acn-cr-val.acn-change{ animation: acn-cr-tombe .45s cubic-bezier(.22,1,.36,1); }
  .acionna-anim .acn-cr-bloc:last-child{ animation: acn-cr-pouls 1s ease-in-out infinite; }
  .acionna-anim .acn-prochaine-carte::after{ /* reflet chromé qui balaie la carte toutes les 6 s */
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%);
    background-size: 250% 100%; background-repeat:no-repeat;
    animation: acn-balaye 6s ease-in-out 1.5s infinite;
  }
  @keyframes acn-balaye{
    0%  { background-position: 150% 0; }
    30% { background-position: -50% 0; }
    100%{ background-position: -50% 0; }
  }
  .acionna-anim .acn-prochaine.acn-hors .acn-prochaine-carte::after,
  .acionna-anim .acn-prochaine.acn-hors .acn-cr-bloc{ animation-play-state: paused; }
}

/* ======================= 3. Visionneuse de photos ======================= */
.acn-zoomable{ cursor: zoom-in; }
.acn-visionneuse{
  position: fixed; inset:0; z-index: 100000;
  display:flex; flex-direction:column;
  background: rgba(8, 7, 6, .97);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #f2ece1;
  touch-action: none;
}
.acn-visionneuse[hidden]{ display:none !important; }
.acn-vis-scene{ position:relative; flex: 1 1 auto; overflow:hidden; display:grid; place-items:center; }
.acn-vis-img{
  max-width: 94vw; max-height: calc(100dvh - 130px);
  width:auto; height:auto; object-fit: contain;
  border-radius: 4px; box-shadow: 0 30px 80px -30px #000;
  user-select:none; -webkit-user-drag: none;
  cursor: zoom-in;
  transform-origin: 50% 50%;
}
.acn-visionneuse.acn-zoome .acn-vis-img{ cursor: grab; }
.acn-vis-barre{
  display:flex; align-items:center; gap: 10px;
  padding: 12px calc(16px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.acn-vis-legende{ flex: 1 1 auto; font-size: .92rem; color: #d8d0c3; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acn-vis-barre .acn-vis-btn{ flex: 0 0 auto; }
.acn-vis-plein[hidden]{ display:none; }
.acn-vis-compteur{ font-family:'Oswald', sans-serif; letter-spacing:.1em; color: #ff8a3d; font-size:.9rem; }
.acn-vis-btn{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(20,18,16,.75); color:#f2ece1;
  font-size: 1.05rem; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.acn-vis-btn:hover, .acn-vis-btn:focus-visible{ border-color:#ff6a13; color:#ff8a3d; }
.acn-vis-btn:focus-visible{ outline:2px solid #ff6a13; outline-offset:2px; }
.acn-vis-btn[aria-pressed="true"]{ background:#ff6a13; color:#100b06; border-color:#ff6a13; }
.acn-vis-prec, .acn-vis-suiv{ position:absolute; top:50%; transform: translateY(-50%); z-index:2; }
.acn-vis-prec{ left: calc(12px + env(safe-area-inset-left, 0px)); }
.acn-vis-suiv{ right: calc(12px + env(safe-area-inset-right, 0px)); }
.acn-vis-fermer{ position:absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); z-index:3; }
.acn-visionneuse.acn-seule .acn-vis-prec,
.acn-visionneuse.acn-seule .acn-vis-suiv,
.acn-visionneuse.acn-seule .acn-vis-lecture{ display:none; }
.acn-vis-progression{ position:absolute; left:0; right:0; top:0; height:3px; background: transparent; z-index:3; }
.acn-vis-progression span{ display:block; height:100%; width:100%; background:#ff6a13; transform-origin:0 50%; transform: scaleX(0); }
@media (prefers-reduced-motion: no-preference){
  @keyframes acn-vis-avance{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
  @keyframes acn-vis-ken{ from{ transform: scale(1); } to{ transform: scale(1.06); } }
  .acn-visionneuse{ transition: background-color .3s; }
  .acn-visionneuse.acn-ouvre{ background: rgba(8,7,6,0); }
  .acn-visionneuse.acn-ouvre .acn-vis-barre,
  .acn-visionneuse.acn-ouvre .acn-vis-btn{ opacity:0; }
  .acn-vis-barre, .acn-vis-btn{ transition: opacity .3s .1s, border-color .2s, color .2s, background-color .2s; }
  .acn-vis-img{ transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s; }
  .acn-visionneuse.acn-glisse .acn-vis-img{ transition: none; }
  .acn-visionneuse.acn-lecture .acn-vis-progression span{ animation: acn-vis-avance var(--acn-duree, 4s) linear forwards; }
  .acn-visionneuse.acn-lecture:not(.acn-zoome) .acn-vis-img.acn-ken{ animation: acn-vis-ken var(--acn-duree, 4s) ease-out forwards; }
}

/* ======================= 4. Carte de membre (annuaire) ======================= */
.acn-carte{ perspective: 1200px; cursor:pointer; position:relative; }
.acn-carte:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.acn-carte-int{ display:grid; height:100%; transform-style: preserve-3d; }
.acn-face{
  grid-area: 1 / 1; min-width:0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap: .2em;
}
.acn-verso{ transform: rotateY(180deg); justify-content:center; }
.acn-carte.acn-retournee .acn-carte-int{ transform: rotateY(180deg); }
.acn-carte-marque{
  font-family:'Oswald', sans-serif; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--accent); margin-bottom: .6em;
}
.acn-carte-indice{
  margin-top:auto; padding-top:.6em; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-dim);
}
.acn-carte-indice::before{ content:"\21BB  "; color: var(--accent); }
/* habillage chromé : liseré métallisé, fond sombre, bande orange */
.acionna-annuaire .acionna-carte-membre.acn-carte{
  padding: 3px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, #f4f4f6, #8b8b92 22%, #ffffff 40%, #5e5e66 60%, #e8e8ec 78%, #9a9aa2);
  box-shadow: 0 18px 34px -22px rgba(0,0,0,.8);
}
.acn-carte .acn-face{
  padding: 1.1em .9em 1em; border-radius: 9px;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 80%, #000));
  position:relative; overflow:hidden;
}
.acn-carte .acn-face::before{ /* bande orange en haut, comme un écusson brodé */
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background: var(--accent);
}
.acn-carte .acn-verso{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 85%, #000), var(--card));
}
.acn-carte .acn-verso .acionna-carte-moto{ width:100%; }
.acn-carte h3{ color: var(--ink); font-size: 1.05rem; margin: .3em 0 .1em; }
.acn-carte .acionna-adhesion-depuis{ margin: 0; font-size: .85rem; color: var(--accent); }
.acn-carte :is(.acionna-ville, .acionna-moto){ margin: .15em 0; color: var(--ink); }
.acn-carte .acn-verso .acn-carte-marque{ font-size: .75rem; letter-spacing: .14em; }
@media (prefers-reduced-motion: no-preference){
  .acn-carte-int{ transition: transform .75s cubic-bezier(.3, 1.35, .5, 1); }
  .acn-carte .acn-face::after{ /* reflet holographique */
    content:""; position:absolute; inset:-40%; pointer-events:none;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
    transform: translateX(-60%); transition: transform .9s cubic-bezier(.22,1,.36,1);
  }
  .acn-carte:hover .acn-face::after{ transform: translateX(60%); }
}

/* Entre 861 et 1120 px (petits portables, tablettes à l'horizontale) les liens du menu
 * débordaient de l'écran une fois connecté : on passe au menu « burger » plus tôt. */
@media (max-width: 1120px){
  .navlinks, .nav-ctas{ display:none; }
  .burger{ display:block; }
  #mobilemenu.open{ display:flex; }
  .acn-theme{ margin-left: auto; margin-right: 10px; }
}

/* ======================= Mode sombre : titres des pages adhérents =======================
 * Le plugin colore ses titres h2/h3 en bleu marine (--acionna-bleu), illisible sur fond sombre.
 * On ne change la variable que sur les titres : boutons et badges bleus restent tels quels,
 * et les titres déjà colorés autrement (orange…) gardent leur couleur. */
:root[data-theme="dark"] .acionna :is(h2, h3){ --acionna-bleu: var(--ink); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .acionna :is(h2, h3){ --acionna-bleu: var(--ink); }
}