/*
Theme Name: Alexioba
Theme URI: https://alexioba.example
Author: Alexioba
Description: Thème Alexioba — pots à fleurs et objets de décoration en plâtre et gypse. Style épuré, boutons Liquid Glass réglables, polices au choix, mode clair/sombre, FR/EN, blog, formations et galerie photo.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: alexioba
*/

:root{
  --bg:#faf6f1; --bg2:#f2e9df; --ink:#332b24; --ink-soft:#6b5f53;
  --terracotta:#c16a45; --terracotta-dark:#a4522f; --line:#e2d5c6; --card:#ffffff;
  --header-bg:rgba(250,246,241,.72);
  --bg-rgb:250,246,241; --bg2-rgb:242,233,223; --bg-veil:.45;

  /* Réglages injectés par le Customizer (voir functions.php) */
  --font-heading:"Cormorant Garamond",Georgia,serif;
  --font-body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --glass-blur:16px;
  --glass-tint:.65;
  --glass-tint-soft:.16;
  --glass-highlight:.35;
  --glass-border:.55;
  --btn-primary-rgb:193,106,69;
  --btn-outline-rgb:193,106,69;
  --btn-icon-rgb:51,43,36;
  --btn-text-rgb:255,255,255;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1e1a16; --bg2:#26201b; --ink:#f2e9df; --ink-soft:#c9bba9;
    --terracotta:#d97e55; --terracotta-dark:#e89572; --line:#3a3229; --card:#26201b;
    --header-bg:rgba(30,26,22,.72);
    --bg-rgb:30,26,22; --bg2-rgb:38,32,27;
  }
}
:root[data-theme="dark"]{
  --bg:#1e1a16; --bg2:#26201b; --ink:#f2e9df; --ink-soft:#c9bba9;
  --terracotta:#d97e55; --terracotta-dark:#e89572; --line:#3a3229; --card:#26201b;
  --header-bg:rgba(30,26,22,.72);
  --bg-rgb:30,26,22; --bg2-rgb:38,32,27;
}

html{scroll-behavior:smooth; scroll-padding-top:90px;}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-weight:400; line-height:1.65; overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--font-heading); font-weight:500; line-height:1.2; letter-spacing:.01em;}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.screen-reader-text{position:absolute; left:-9999px;}
.skip-link:focus{left:12px; top:12px; z-index:100; background:var(--card); padding:8px 14px; border-radius:8px;}
:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px;}

/* ===== Boutons Liquid Glass =====
   Blur, opacité de la teinte, reflet et couleurs : Apparence > Personnaliser > Alexioba – Style */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 30px; border-radius:999px;
  border:1px solid rgba(255,255,255,var(--glass-border));
  background:
    linear-gradient(160deg, rgba(255,255,255,var(--glass-highlight)) 0%, rgba(255,255,255,0) 55%),
    rgba(var(--btn-primary-rgb), var(--glass-tint));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  box-shadow:0 8px 24px rgba(var(--btn-primary-rgb),.22), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.15);
  color:rgb(var(--btn-text-rgb)); text-shadow:0 1px 2px rgba(0,0,0,.18);
  font-family:var(--font-body); font-size:.95rem; font-weight:500; letter-spacing:.03em;
  text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 12px 30px rgba(var(--btn-primary-rgb),.3), inset 0 1px 0 rgba(255,255,255,.75);}
.btn:active{transform:translateY(0);}
.btn-outline{
  background:
    linear-gradient(160deg, rgba(255,255,255,var(--glass-highlight)) 0%, rgba(255,255,255,0) 55%),
    rgba(var(--btn-outline-rgb), var(--glass-tint-soft));
  border-color:rgba(var(--btn-outline-rgb),.55);
  color:rgb(var(--btn-outline-rgb)); text-shadow:none;
  box-shadow:0 6px 18px rgba(var(--btn-outline-rgb),.12), inset 0 1px 0 rgba(255,255,255,.6);
}
.icon-btn{
  width:40px; height:40px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,var(--glass-border));
  background:
    linear-gradient(160deg, rgba(255,255,255,var(--glass-highlight)) 0%, rgba(255,255,255,0) 55%),
    rgba(var(--btn-icon-rgb), var(--glass-tint-soft));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  box-shadow:0 4px 12px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.6);
  color:rgb(var(--btn-icon-rgb)); font-family:var(--font-body); font-size:.85rem; font-weight:500;
  cursor:pointer; transition:transform .15s;
}
.icon-btn:hover{transform:translateY(-1px);}

/* ===== En-tête ===== */
.site-header{
  position:sticky; top:0; z-index:20;
  padding:calc(14px + env(safe-area-inset-top,0px)) 0 14px;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px;}
.brand a{text-decoration:none;}
.brand img.custom-logo{max-height:44px; width:auto;}
.logo-txt{font-family:var(--font-heading); font-size:1.6rem; letter-spacing:.14em; font-weight:600;}
.logo-txt span{color:var(--terracotta);}
.main-nav{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.main-nav a{text-decoration:none; color:var(--ink-soft); font-size:.9rem; letter-spacing:.04em;}
.main-nav a:hover{color:var(--terracotta);}
.controls{display:flex; gap:8px; align-items:center;}

/* ===== Hero & bandeaux (formes floues derrière le verre) ===== */
.hero,.page-hero{position:relative; overflow:hidden; isolation:isolate; text-align:center;}
.hero::before,.hero::after,.page-hero::before,.page-hero::after{content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(46px); opacity:.6;}
.hero::before,.page-hero::before{width:380px; height:380px; left:12%; top:30%; background:rgba(var(--btn-primary-rgb),.5);}
.hero::after,.page-hero::after{width:320px; height:320px; right:10%; top:-10%; background:rgba(214,190,160,.75);}
.hero{padding:84px 0 68px;}
.hero h1{font-size:clamp(2.4rem,6vw,4rem); margin:0 0 16px;}
.hero p{color:var(--ink-soft); max-width:540px; margin:0 auto 30px; font-size:1.08rem;}
.page-hero{padding:56px 0 44px;}
.page-hero h1{font-size:clamp(2rem,5vw,3rem); margin:0 0 8px;}
.page-hero p{color:var(--ink-soft); margin:0 auto; max-width:520px;}

section{padding:56px 0;}
.section-title{text-align:center; margin:0 0 6px; font-size:2rem;}
.section-sub{text-align:center; color:var(--ink-soft); margin:0 0 40px;}
.section-more{text-align:center; margin-top:36px;}

/* ===== Cartes produits ===== */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px 20px; text-align:center;}
.card .thumb{width:84px; height:84px; margin:0 auto 16px; border-radius:12px; overflow:hidden; background:var(--bg2);}
.card .thumb img{width:100%; height:100%; object-fit:cover;}
.card h3{font-size:1.25rem; margin:0 0 6px;}
.card p{color:var(--ink-soft); font-size:.9rem; margin:0 0 12px;}
.price{color:var(--terracotta); font-weight:500;}

/* ===== Atelier ===== */
.about{background:var(--bg2);}
.about .wrap{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center;}
.about-visual{aspect-ratio:1; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,var(--terracotta),var(--bg2));}
.about-visual img{width:100%; height:100%; object-fit:cover;}
.about h2{font-size:2rem; margin:0 0 14px;}
.about p{color:var(--ink-soft); margin:0 0 12px;}
@media (max-width:720px){.about .wrap{grid-template-columns:1fr;} .about-visual{order:-1; max-width:280px; margin:0 auto;}}

/* ===== Blog / Formations : cartes d'articles ===== */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:26px;}
.post-card{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column;}
.post-card-media{display:block; aspect-ratio:4/3; background:var(--bg2); overflow:hidden;}
.post-card-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.post-card:hover .post-card-media img{transform:scale(1.04);}
.post-card-ph{display:block; width:100%; height:100%; background:linear-gradient(135deg,rgba(var(--btn-primary-rgb),.35),var(--bg2));}
.post-card-body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.post-card h3{font-size:1.4rem; margin:0;}
.post-card h3 a{text-decoration:none;}
.post-card p{margin:0; color:var(--ink-soft); font-size:.93rem;}
.post-meta{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--terracotta);}
.post-card .more{margin-top:auto; font-size:.88rem; color:var(--terracotta); text-decoration:none; font-weight:500;}
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 34px;}
.chips a{
  padding:8px 18px; border-radius:999px; text-decoration:none; font-size:.85rem; color:var(--ink-soft);
  border:1px solid rgba(255,255,255,var(--glass-border));
  background:linear-gradient(160deg,rgba(255,255,255,var(--glass-highlight)),rgba(255,255,255,0) 60%),rgba(var(--btn-outline-rgb),var(--glass-tint-soft));
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.chips a.current,.chips a:hover{color:rgb(var(--btn-outline-rgb)); border-color:rgba(var(--btn-outline-rgb),.55);}

/* ===== Galerie photo ===== */
.gallery{column-count:3; column-gap:16px;}
@media (max-width:900px){.gallery{column-count:2;}}
@media (max-width:520px){.gallery{column-count:1;}}
.gallery-item{break-inside:avoid; margin:0 0 16px; position:relative; border-radius:12px; overflow:hidden; background:var(--bg2);}
.gallery-item a{display:block; cursor:zoom-in;}
.gallery-item img{width:100%; transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.04);}
.gallery-item figcaption{
  position:absolute; left:10px; right:10px; bottom:10px; padding:8px 14px; border-radius:999px; font-size:.82rem; text-align:center;
  color:#fff; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  opacity:0; transform:translateY(6px); transition:.25s;
}
.gallery-item:hover figcaption{opacity:1; transform:none;}
.lightbox{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,16,12,.55); -webkit-backdrop-filter:blur(calc(var(--glass-blur) * 1.2)); backdrop-filter:blur(calc(var(--glass-blur) * 1.2));}
.lightbox.open{display:flex;}
.lightbox figure{margin:0; max-width:min(1000px,92vw); text-align:center;}
.lightbox img{max-height:78vh; width:auto; margin:0 auto; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.4);}
.lightbox figcaption{color:#fff; margin-top:14px; font-size:.95rem;}
.lightbox button{position:absolute; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.18); color:#fff; font-size:1.2rem; cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.lightbox .lb-close{top:20px; right:20px;} .lightbox .lb-prev{left:20px; top:50%;} .lightbox .lb-next{right:20px; top:50%;}

/* ===== Article / formation ===== */
.entry{max-width:740px; margin:0 auto; padding:56px 24px 72px;}
.entry-header{text-align:center; margin-bottom:28px;}
.entry-header h1{font-size:clamp(2rem,5vw,3rem); margin:8px 0 0;}
.entry-media{margin:0 0 30px; border-radius:14px; overflow:hidden;}
.entry-media img{width:100%;}
.entry-content{font-size:1.05rem;}
.entry-content h2,.entry-content h3{margin:1.6em 0 .5em;}
.entry-content a{color:var(--terracotta);}
.entry-content img{border-radius:10px;}
.entry-nav{margin-top:48px; padding-top:24px; border-top:1px solid var(--line);}
.entry-nav .nav-links{display:flex; justify-content:space-between; gap:20px; font-size:.92rem;}
.entry-nav a{text-decoration:none; color:var(--terracotta);}
.formation-box{
  margin:0 0 30px; padding:22px 26px; border-radius:16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px;
  border:1px solid rgba(255,255,255,var(--glass-border));
  background:linear-gradient(160deg,rgba(255,255,255,var(--glass-highlight)),rgba(255,255,255,0) 60%),rgba(var(--btn-primary-rgb),var(--glass-tint-soft));
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
}
.formation-box dt{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.formation-box dd{margin:2px 0 0; font-family:var(--font-heading); font-size:1.35rem;}
.formation-cta{text-align:center; margin-top:34px;}
.navigation.pagination{margin-top:40px;}
.nav-links.pagination-links,.pagination .nav-links{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
.page-numbers{padding:8px 16px; border-radius:999px; border:1px solid var(--line); text-decoration:none; font-size:.9rem;}
.page-numbers.current{background:rgba(var(--btn-primary-rgb),var(--glass-tint)); color:rgb(var(--btn-text-rgb)); border-color:transparent;}
.empty-note{text-align:center; color:var(--ink-soft); padding:30px 0;}

/* ===== Contact ===== */
.contact .wrap{max-width:540px;}
.field{margin-bottom:16px;}
label{display:block; font-size:.82rem; color:var(--ink-soft); margin-bottom:6px; letter-spacing:.03em;}
input,textarea,select{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font-family:var(--font-body); font-size:.95rem;}
textarea{resize:vertical; min-height:100px;}
.form-note{font-size:.82rem; color:var(--ink-soft); margin-top:12px;}
.status{margin-top:12px; font-size:.9rem; display:none; color:var(--terracotta);}
.status.show{display:block;}

/* ===== Pied de page ===== */
.site-footer{border-top:1px solid var(--line); padding:32px 0 calc(32px + env(safe-area-inset-bottom,0px)); text-align:center; color:var(--ink-soft); font-size:.85rem;}
.site-footer .logo-txt{display:block; margin-bottom:6px; color:var(--ink);}
.site-footer p{margin:0;}