/*
Theme Name: Oléron Photo Club
Template: astra
Author: Marc / Claude
Description: Thème enfant d'Astra pour l'Oléron Photo Club — menu latéral, identité du club, accueil sur mesure.
Version: 0.1.0
*/

/* ---------- Police du site : Recursive (variable, axe wght) ---------- */
@font-face{
  font-family:'Recursive'; font-style:oblique 0deg 15deg; font-weight:300 1000; font-display:swap;
  src:url(assets/fonts/recursive-latin.woff2?v=casl2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Recursive'; font-style:oblique 0deg 15deg; font-weight:300 1000; font-display:swap;
  src:url(assets/fonts/recursive-latinext.woff2?v=casl2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Police des textes courants : Outfit (variable) ---------- */
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(assets/fonts/outfit-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(assets/fonts/outfit-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Couleurs du club ---------- */
:root{
  --opc-sea:#2f9fd6; --opc-deep:#37639f; --opc-leaf:#7cbe4e; --opc-pine:#2e8659;
  --opc-ink:#233039; --opc-muted:#5d6b73; --opc-line:#e3ddd0;
  --opc-side:248px;
  --opc-sec-accent:#37639f; --opc-sec-bot:#5182b0;   /* défauts hors section (ex. accueil) */
  --opc-sans:'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* couleur de la barre par défaut = accueil : beige/ivoire soutenu (neutre chaud, ne concurrence pas les photos du diaporama) */
  --opc-sec-bot:#dccda8; --opc-sec-accent:#8a7444;
  --opc-casl:1;   /* Recursive : axe Casual (arrondi) appliqué aux graisses bold — 1 = arrondi, 0 = net */
}
/* couleur de la barre par section (dégradé blanc en haut -> --opc-sec-bot en bas) */
body.opc-sec-club{     --opc-sec-bot:#b8543c; --opc-sec-accent:#9a4229; }  /* terracotta */
body.opc-sec-galeries{ --opc-sec-bot:#c07d1e; --opc-sec-accent:#9a6014; }  /* ambre */
body.opc-sec-infos{    --opc-sec-bot:#8a9a30; --opc-sec-accent:#67741f; }  /* anis */
body.opc-sec-contact{  --opc-sec-bot:#2f9161; --opc-sec-accent:#1f6f47; }  /* émeraude */
body.opc-sec-liens{    --opc-sec-bot:#2f6f9f; --opc-sec-accent:#20567c; }  /* bleu */
body.opc-sec-membres{  --opc-sec-bot:#6a4b93; --opc-sec-accent:#503876; }  /* violet */

/* Textes courants en Outfit (les titres/menu restent en Recursive) */
body{ font-family:var(--opc-sans) !important; }

/* ---------- Transition de page ---------- */
/* Entrée : le contenu apparaît via le slide-up « .opc-reveal » (fiable sur toutes les pages,
   c'est ce que fait déjà le formulaire de contact). Sortie : léger fondu-flou de la zone
   de contenu avant de charger la page suivante. Pas de View Transition inter-documents. */
@media (prefers-reduced-motion: no-preference){
  html.opc-nav-fx.is-leaving #content{ animation: opc-page-out .32s ease both; }
  @keyframes opc-page-out{ from{ opacity:1; filter:blur(0); } to{ opacity:0; filter:blur(9px); } }
}

/* ---------- Révélation « slide-up » à l'apparition (toutes les pages) ---------- */
.opc-reveal{ opacity:0; transform:translateY(30px);
  transition:opacity 1.15s cubic-bezier(.2,.7,.2,1), transform 1.15s cubic-bezier(.2,.7,.2,1); }
.opc-reveal.in{ opacity:1; transform:none; }
.opc-reveal.d1{ transition-delay:.12s; } .opc-reveal.d2{ transition-delay:.24s; } .opc-reveal.d3{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){ .opc-reveal{ transition:none; opacity:1; transform:none; } }

/* Firefox : le filtre SVG de la bille de verre (filter:url(#lens)) est mal rendu (carré noir/vide)
   → repli en loupe « plate » (image agrandie sans distorsion). Cible Firefox via @supports -moz-. */
@supports (-moz-appearance:none){
  .gball-base{ filter:none !important; }
}

/* ---------- Fond sombre « galerie » partagé (Infos + Galeries + albums) ----------
   Teinté par la couleur de la section (--opc-sec-accent) pour rester raccord avec la barre. */
body.opc-imm{
  background-color:#1a232c; /* repli si color-mix indisponible */
  background:
    radial-gradient(60% 46% at 11% 5%, color-mix(in srgb, var(--opc-sec-accent) 42%, transparent), transparent 62%),
    radial-gradient(55% 46% at 93% 92%, color-mix(in srgb, var(--opc-sec-accent) 26%, transparent), transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--opc-sec-accent) 15%, #161d25) 0%,
      color-mix(in srgb, var(--opc-sec-accent) 28%, #1d2831) 100%) !important;
  background-attachment:fixed !important;
}
/* En-tête clair de la page album (qui utilise l'ossature .opc-page sur fond sombre) */
body.opc-imm .opc-page-title{ color:#f3f8fb; }
body.opc-imm .opc-page-lead{ color:color-mix(in srgb, var(--opc-sec-accent) 46%, #ffffff); font-weight:500; }
body.opc-imm .opc-album-meta{ color:#9fb0bb; }
/* Accents immersifs raccord avec la couleur de section (version éclaircie pour le fond sombre) */
body.opc-imm .opc-infos-eyebrow{ color:color-mix(in srgb, var(--opc-sec-accent) 42%, #ffffff); }
body.opc-imm .opc-infos-eyebrow::before{ background:color-mix(in srgb, var(--opc-sec-accent) 42%, #ffffff); }
body.opc-imm .opc-tab.on{ background:color-mix(in srgb, var(--opc-sec-accent) 72%, #ffffff); color:#16202a; border-color:transparent; }
body.opc-imm .opc-tab:hover{ border-color:color-mix(in srgb, var(--opc-sec-accent) 55%, #ffffff); color:color-mix(in srgb, var(--opc-sec-accent) 42%, #ffffff); }
body.opc-imm .opc-album-back{ color:color-mix(in srgb, var(--opc-sec-accent) 45%, #ffffff); }

/* ---------- On masque l'en-tête ET le pied de page Astra (remplacés par la barre latérale) ---------- */
.site-header, #masthead{ display:none !important; }
.site-footer, #colophon{ display:none !important; }

/* Bouton « remonter en haut » d'Astra : en noir (au lieu du bleu du thème) */
#ast-scroll-top{ background-color:#16181b !important; color:#fff !important; border:0 !important; border-radius:9px !important; }
#ast-scroll-top:hover{ background-color:#000 !important; }
#ast-scroll-top svg, #ast-scroll-top .ast-icon svg, #ast-scroll-top path{ fill:#fff !important; color:#fff !important; }

/* ---------- Contenu décalé à droite de la barre latérale ---------- */
#page{ padding-left:var(--opc-side); }
.ast-container, .site-content .ast-container{ max-width:none; }

/* ---------- Barre latérale ---------- */
.opc-side{
  position:fixed; left:0; top:0; height:100vh; height:100dvh; width:var(--opc-side); z-index:100;
  display:flex; flex-direction:column; padding:26px 22px;
  box-sizing:border-box; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; isolation:isolate;
}
/* calques de fond : dégradé de section (base) + fondu à la navigation + texture sable */
.opc-side-bg{ position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,#fff 0px,#fff 188px,var(--opc-sec-bot) 100%); }
.opc-side-fade{ position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; transition:opacity 4s ease; }
.opc-side-tex{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.55; mix-blend-mode:screen;
  background:url(assets/sand-texture.jpg) center/cover no-repeat; filter:invert(1);
  -webkit-mask:linear-gradient(180deg,transparent 0,transparent 188px,#000 340px);
          mask:linear-gradient(180deg,transparent 0,transparent 188px,#000 340px); }
.opc-brand, .opc-nav, .opc-side-foot{ position:relative; z-index:3; }

.opc-brand{ display:flex; justify-content:flex-end; padding-right:10px; }  /* aligné à droite comme le menu */
.opc-brand img{ width:156px; height:auto; }

.opc-nav{ margin-top:52px; }
.opc-menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.opc-menu li{ margin:0; width:auto; }
.opc-menu a{
  display:block; text-align:right; font-family:'Recursive', system-ui, sans-serif; font-weight:400;
  font-variation-settings:'wght' 540, 'CASL' 0;      /* au repos — mêmes axes (wght+CASL) qu'au survol pour permettre l'interpolation fluide */
  font-size:1.28rem; letter-spacing:.01em; line-height:1.25;
  text-decoration:none; padding:11px 10px; border-radius:9px; position:relative;
  color:#33404a; transform-origin:right center;
  transition:font-variation-settings 6s cubic-bezier(.2,.7,.2,1), color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}
/* survol : graisse + dégradé « arc-en-ciel marin » animé sur le texte + halo lumineux + léger grossissement */
.opc-menu a:hover{
  font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl); transform:scale(1.05);
  background-image:linear-gradient(90deg,var(--opc-sea),var(--opc-leaf),var(--opc-pine),var(--opc-deep),var(--opc-sea));  /* arc-en-ciel marin au départ */
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:opc-sheen 2.4s linear infinite;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,1)) drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 6px rgba(255,255,255,.9));  /* halo blanc net et intense */
}
@keyframes opc-sheen{ to{ background-position:200% center; } }
/* copie du libellé en teinte de rubrique, qui se fond par-dessus l'arc-en-ciel au survol */
.opc-menu a::after{
  content:attr(data-txt);
  position:absolute; inset:0; padding:11px 10px; text-align:right;
  font-family:'Recursive', system-ui, sans-serif; font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl);
  font-size:1.28rem; letter-spacing:.01em; line-height:1.25;
  background-image:linear-gradient(90deg,
    var(--opc-sec-accent),
    color-mix(in srgb, var(--opc-sec-bot) 72%, #fff),
    var(--opc-sec-bot),
    color-mix(in srgb, var(--opc-sec-bot) 72%, #fff),
    var(--opc-sec-accent));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  opacity:0; pointer-events:none; transition:opacity 6s cubic-bezier(.2,.7,.2,1);
}
.opc-menu a:hover::after{ opacity:1; animation:opc-sheen 2.4s linear infinite; }
.opc-menu .current-menu-item > a,
.opc-menu .current_page_item > a{ font-variation-settings:'wght' 900, 'CASL' var(--opc-casl); color:var(--opc-sec-accent); }
.opc-menu .current-menu-item > a::before,
.opc-menu .current_page_item > a::before{
  content:""; position:absolute; right:-22px; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:4px 0 0 4px; background:var(--opc-sec-accent);
}

.opc-side-foot{ margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:24px; }
.opc-socials{ display:flex; justify-content:center; gap:12px; }
/* Pictos réseaux : rond en couleur de section, icône « découpée » (masque XOR) qui laisse voir le fond */
.opc-socials a{ width:40px; height:40px; border:0; background:var(--opc-sec-accent);
  transition:filter .2s, background .3s;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-composite:xor; mask-composite:exclude; }
.opc-socials a:hover{ filter:brightness(1.12); }
.opc-socials a svg{ display:none; }
.opc-socials a.opc-fb{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 22v-8h3l1-4h-4V7.5C13 6.6 13.3 6 14.7 6H17V2.4C16.6 2.3 15.3 2.2 13.9 2.2 10.9 2.2 9 4 9 7.1V10H6v4h3v8z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 22v-8h3l1-4h-4V7.5C13 6.6 13.3 6 14.7 6H17V2.4C16.6 2.3 15.3 2.2 13.9 2.2 10.9 2.2 9 4 9 7.1V10H6v4h3v8z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%,50% 50%; mask-size:100% 100%,50% 50%; }
.opc-socials a.opc-ig{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.8.1 3.3.1 4.8 1.7 4.9 4.9.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.7 4.8-4.9 4.9-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-3.2-.1-4.8-1.7-4.9-4.9C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8C2.4 4 4 2.4 7.2 2.3 8.4 2.2 8.8 2.2 12 2.2zm0 3.2A6.6 6.6 0 1 0 18.6 12 6.6 6.6 0 0 0 12 5.4zm0 10.9A4.3 4.3 0 1 1 16.3 12 4.3 4.3 0 0 1 12 16.3zm6.9-11.1a1.5 1.5 0 1 0 1.5 1.5 1.5 1.5 0 0 0-1.5-1.5z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.8.1 3.3.1 4.8 1.7 4.9 4.9.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 3.2-1.7 4.8-4.9 4.9-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-3.2-.1-4.8-1.7-4.9-4.9C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8C2.4 4 4 2.4 7.2 2.3 8.4 2.2 8.8 2.2 12 2.2zm0 3.2A6.6 6.6 0 1 0 18.6 12 6.6 6.6 0 0 0 12 5.4zm0 10.9A4.3 4.3 0 1 1 16.3 12 4.3 4.3 0 0 1 12 16.3zm6.9-11.1a1.5 1.5 0 1 0 1.5 1.5 1.5 1.5 0 0 0-1.5-1.5z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%,56% 56%; mask-size:100% 100%,56% 56%; }
.opc-side-foot small{ color:#000; font-size:.86rem; line-height:1.45; text-align:center; font-weight:500; }
.opc-side-foot .opc-credit{ font-weight:400; }
.opc-foot-legal{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
/* « Site réalisé par » + logo SVG « marc massé » sur la même ligne, cliquable vers son site pro */
.opc-credit-line{ display:flex; align-items:flex-end; justify-content:center; gap:6px; }
.opc-credit-logo-link{ display:inline-block; line-height:0; transition:opacity .2s; }
.opc-credit-logo-link:hover{ opacity:.75; }
.opc-credit-logo{ height:26px; width:auto; display:block; }
.opc-legal-links{ display:flex; flex-direction:column; align-items:center; gap:0; line-height:1.35; }
.opc-legal-sub{ display:inline-flex; align-items:center; gap:7px; }
.opc-legal-sub .sep{ color:#000; opacity:.45; font-size:.86rem; }
.opc-legal-links a{ color:#000; font-size:.86rem; text-decoration:none; opacity:.75; }
.opc-legal-links a:hover{ opacity:1; text-decoration:underline; }

/* ---------- Titres du site en Recursive ---------- */
.entry-title, .ast-single-post .entry-title{ font-family:'Recursive', system-ui, sans-serif; font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl); letter-spacing:0; }

/* ---------- Barre du haut (téléphone portrait & paysage) : logo à gauche, hamburger à droite ---------- */
:root{ --opc-topbar-h:116px; --opc-topbar-logo-h:84px; }
.opc-topbar{ display:none; }
.opc-burger{ display:none; }
.opc-scrim{ display:none; }

/* Téléphone = portrait étroit (≤600px) OU paysage court (≤500px de haut, écran ≤950px).
   Les tablettes et grands écrans gardent la barre latérale. */
@media (max-width:600px), (max-height:500px) and (max-width:950px){
  #page{ padding-left:0; padding-top:var(--opc-topbar-h); }
  /* barre blanche fixe */
  .opc-topbar{ display:flex; align-items:center; justify-content:space-between;
    position:fixed; top:0; left:0; right:0; z-index:140; height:var(--opc-topbar-h); padding:0 18px 0 26px;
    background:#fff; border-bottom:1px solid var(--opc-line); box-shadow:0 2px 12px rgba(10,20,28,.06); }
  .opc-topbar-logo{ display:flex; align-items:center; }
  .opc-topbar-logo img{ height:var(--opc-topbar-logo-h); width:auto; display:block; }
  /* hamburger : juste l'icône, sans cadre */
  .opc-burger{ display:grid; place-items:center; position:static;
    width:48px; height:48px; border:0; background:transparent; border-radius:0; cursor:pointer; }
  .opc-burger span, .opc-burger span::before, .opc-burger span::after{
    content:""; display:block; width:28px; height:2.5px; background:var(--opc-ink); border-radius:2px; position:relative; }
  .opc-burger span::before{ position:absolute; top:-8px; } .opc-burger span::after{ position:absolute; top:8px; }
  /* menu (panneau) : glisse sous la barre, défilable si besoin */
  .opc-side{ transform:translateX(-100%); transition:transform .3s ease; box-shadow:0 0 40px rgba(0,0,0,.2);
    top:var(--opc-topbar-h); height:calc(100vh - var(--opc-topbar-h)); height:calc(100dvh - var(--opc-topbar-h));
    z-index:130; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  body.opc-menu-open .opc-side{ transform:none; }
  .opc-side .opc-brand{ display:none; }              /* logo déjà dans la barre du haut */
  .opc-nav{ padding-top:18px; }
  .opc-scrim{ display:block; position:fixed; inset:var(--opc-topbar-h) 0 0 0; background:rgba(10,20,28,.4);
    opacity:0; pointer-events:none; transition:.3s; z-index:120; }
  body.opc-menu-open .opc-scrim{ opacity:1; pointer-events:auto; }
}

/* Paysage court (téléphone) : barre + logo compacts (peu de hauteur) et menu à fond uni blanc */
@media (max-height:500px) and (orientation:landscape) and (max-width:950px){
  :root{ --opc-topbar-h:58px; --opc-topbar-logo-h:40px; }
  .opc-side{ background:#fff; }
  .opc-side-bg, .opc-side-fade, .opc-side-tex{ display:none; }
}

/* iOS Safari n'honore pas background-attachment:fixed → repasser en scroll sur tactile
   (sinon fond décalé/agrandi et saccades au défilement, très visible sur les pages immersives) */
@media (max-width:600px), (max-height:500px) and (max-width:950px){
  body.opc-imm{ background-attachment:scroll !important; }
}