/*
Theme Name: Calvary Chapel Bali
Theme URI: https://calvarychapelbali.com
Author: Refonte 2026
Author URI: https://calvarychapelbali.com
Description: Thème épuré et chaleureux pour Calvary Chapel Bali. Blanc cassé doux, encre brune, accent terracotta discret, titres en serif élégant, beaucoup d'espace. Reprend fidèlement la structure et le contenu du site d'origine.
Version: 2.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: calvary-chapel-bali
*/

/* =========================================================
   1. TOKENS — épuré chaleureux
   ========================================================= */
:root{
  --paper:   #FBF9F5;   /* fond principal, blanc cassé doux */
  --panel:   #F2ECE2;   /* panneau chaud discret */
  --ink:     #2A2521;   /* encre brune (texte) */
  --muted:   #6E665C;   /* texte secondaire */
  --accent:  #B0592F;   /* terracotta discret */
  --accent-2:#9A4E29;
  --line:    #E7DFD2;   /* filet clair */
  --white:   #FFFFFF;

  --radius:  8px;
  --maxw:    1080px;
  --measure: 68ch;

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* =========================================================
   2. BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.75;
  font-size:clamp(1rem, .97rem + .18vw, 1.09rem);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--accent-2); }
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--ink); font-weight:600; line-height:1.18; margin:0 0 .5em; text-wrap:balance; letter-spacing:-.01em; }
h1{ font-size:clamp(2.2rem, 1.6rem + 2.9vw, 3.4rem); font-weight:500; }
h2{ font-size:clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); font-weight:500; }
h3{ font-size:clamp(1.2rem, 1.05rem + .7vw, 1.45rem); }
p{ margin:0 0 1.15em; color:var(--ink); }
.muted,p.muted{ color:var(--muted); }

/* =========================================================
   3. LAYOUT
   ========================================================= */
.container{ width:min(100% - 2.6rem, var(--maxw)); margin-inline:auto; }
.section{ padding:clamp(3.5rem, 6.5vw, 7rem) 0; }
.section--panel{ background:var(--panel); }
.section + .section{ border-top:1px solid var(--line); }
.center{ text-align:center; }
.eyebrow{
  display:inline-block; font-family:var(--font-body); font-weight:600;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.1rem;
}
.eyebrow::before{ content:""; display:inline-block; width:26px; height:1px; background:var(--accent); vertical-align:middle; margin-right:.7rem; opacity:.7; }
.center .eyebrow::after{ content:""; display:inline-block; width:26px; height:1px; background:var(--accent); vertical-align:middle; margin-left:.7rem; opacity:.7; }
.lead{ font-size:clamp(1.08rem, 1rem + .4vw, 1.3rem); color:var(--muted); max-width:56ch; line-height:1.7; }
.center .lead{ margin-inline:auto; }

/* =========================================================
   4. BUTTONS — sobres
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  padding:.72rem 1.5rem; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; transition:.18s ease;
  line-height:1;
}
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-2); color:#fff; }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn--light{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--light:hover{ border-color:var(--ink); }
/* lien fléché discret */
.arrow{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; }
.arrow::after{ content:"→"; transition:transform .18s ease; }
.arrow:hover::after{ transform:translateX(4px); }

/* =========================================================
   5. HEADER
   ========================================================= */
/* NB : pas de backdrop-filter/filter/transform ici — cela « piégerait » le menu mobile
   (position:fixed) dans l'en-tête et l'empêcherait de couvrir l'écran. */
.site-header{ position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--line); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; min-height:66px; flex-wrap:nowrap; }
.site-brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:500; color:var(--ink); font-size:1.25rem; letter-spacing:-.01em; }
.site-brand:hover{ color:var(--ink); }
.site-brand img{ max-height:44px; width:auto; }
.site-brand__mark{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-family:var(--font-head); font-weight:600; font-size:1rem; background:var(--accent); }
.site-brand__name small{ display:block; font-family:var(--font-body); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

.main-nav{ display:flex; align-items:center; gap:.3rem; }
.main-nav ul{ list-style:none; display:flex; align-items:center; gap:0; margin:0; padding:0; }
.main-nav a{ display:block; font-family:var(--font-body); font-weight:500; font-size:.92rem; color:var(--ink); padding:.5rem .62rem; border-radius:6px; position:relative; white-space:nowrap; }
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a{ color:var(--accent); }
.header-cta{ margin-left:.5rem; }

/* Sélecteur de langue — menu déroulant personnalisé (drapeau toujours à gauche du texte) */
.lang-switch{ position:relative; display:flex; align-items:center; }
.lang-current{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-body); font-weight:600; font-size:.9rem; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:6px;
  padding:.45rem .7rem; cursor:pointer; line-height:1;
}
.lang-current:hover{ border-color:var(--accent); color:var(--accent); }
.lang-current .flag{ font-size:1.05rem; line-height:1; }
.lang-current .chev{ width:12px; height:12px; margin-left:.1rem; color:var(--muted); }
.lang-switch .lang-menu{
  position:absolute; top:calc(100% + .4rem); right:0; z-index:130;
  list-style:none; margin:0; padding:.3rem; min-width:118px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 10px 30px rgba(42,37,33,.12); display:none; flex-direction:column;
}
.lang-switch.open .lang-menu{ display:block; }
.lang-menu li{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem;
  border-radius:6px; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:.92rem; color:var(--ink);
}
.lang-menu li:hover{ background:var(--panel); color:var(--accent); }
.lang-menu .flag{ font-size:1.1rem; line-height:1; }

/* Masquer l'habillage par défaut de Google Translate */
.goog-te-banner-frame, .skiptranslate > iframe{ display:none !important; }
body{ top:0 !important; position:static !important; }
.goog-te-gadget{ font-size:0 !important; }
#goog-gt-tt, .goog-tooltip, .goog-tooltip *, .goog-te-balloon-frame{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }

.nav-toggle{ display:none; width:44px; height:44px; border:1px solid var(--line); background:transparent; border-radius:8px; cursor:pointer; padding:0; align-items:center; justify-content:center; }
.nav-toggle span{ position:relative; width:20px; height:1.5px; background:var(--ink); transition:.2s; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--ink); transition:.2s; }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.nav-open .nav-toggle span{ background:transparent; }
.nav-open .nav-toggle span::before{ top:0; transform:rotate(45deg); }
.nav-open .nav-toggle span::after{ top:0; transform:rotate(-45deg); }

/* =========================================================
   6. HERO — sobre
   ========================================================= */
.hero{ background:var(--paper); }
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; padding:clamp(3.5rem,7vw,7rem) 0; }
.hero__verse{ font-family:var(--font-head); font-style:italic; font-weight:400; font-size:clamp(1.1rem,1rem + .5vw,1.35rem); color:var(--ink); line-height:1.5; margin:1.5rem 0 2rem; padding-left:1.2rem; border-left:2px solid var(--accent); }
.hero__verse cite{ display:block; margin-top:.7rem; font-style:normal; font-family:var(--font-body); font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.hero__media img{ border-radius:var(--radius); width:100%; aspect-ratio:4/3; object-fit:cover; }
.figure-note{ margin-top:.7rem; font-size:.82rem; color:var(--muted); text-align:center; }

/* =========================================================
   7. SPLIT (Siapa aku, Profil…)
   ========================================================= */
.split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--reverse .split__media{ order:2; }
.split__media img{ border-radius:var(--radius); width:100%; object-fit:cover; }
.split__media--round img{ border-radius:50%; aspect-ratio:1; max-width:320px; margin-inline:auto; }
.stats{ display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.stat b{ display:block; font-family:var(--font-head); font-weight:500; font-size:1.9rem; color:var(--accent); line-height:1; }
.stat span{ font-size:.86rem; color:var(--muted); }

/* =========================================================
   8. CARDS / GRIDS — hairline, sans ombre
   ========================================================= */
.grid{ display:grid; gap:var(--gap); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{ background:transparent; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; transition:border-color .2s ease, background .2s ease; height:100%; }
.card:hover{ border-color:var(--accent); }
.card h3{ margin-bottom:.35rem; }
.card p{ margin-bottom:0; color:var(--muted); font-size:.97rem; }

/* icône fine terracotta */
.ic{ width:38px; height:38px; color:var(--accent); margin-bottom:1rem; }
.ic svg{ width:100%; height:100%; }

/* module (Sekolah Minggu) : ligne sobre */
.mod-list{ border-top:1px solid var(--line); }
.mod{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem .4rem; border-bottom:1px solid var(--line); color:var(--ink); font-weight:500; }
.mod:hover{ color:var(--accent); }
.mod .mod__name{ font-family:var(--font-head); font-weight:500; font-size:1.1rem; }
.mod .mod__dl{ font-family:var(--font-body); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:.4rem; }
.mod:hover .mod__dl{ color:var(--accent); }
.mod-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(1.5rem,4vw,3.5rem); }

/* =========================================================
   9. BLOG / POSTS
   ========================================================= */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.post-card{ display:flex; flex-direction:column; }
.post-card__thumb{ aspect-ratio:16/11; overflow:hidden; border-radius:var(--radius); background:var(--panel); margin-bottom:1.1rem; }
.post-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.post-card:hover .post-card__thumb img{ transform:scale(1.04); }
.post-card__meta{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.post-card h3{ font-size:1.28rem; margin-bottom:.5rem; }
.post-card h3 a{ color:var(--ink); }
.post-card h3 a:hover{ color:var(--accent); }
.post-card p{ color:var(--muted); font-size:.97rem; }
.post-card .arrow{ margin-top:auto; color:var(--accent); font-size:.92rem; }

/* article / page content */
.entry{ max-width:var(--measure); margin-inline:auto; }
.entry-content{ font-size:1.1rem; line-height:1.85; }
.entry-content > p{ color:var(--ink); }
.entry-content h2,.entry-content h3{ margin-top:1.9em; }
.entry-content img{ border-radius:var(--radius); margin:1.8rem 0; }
.entry-content a{ text-decoration:underline; text-underline-offset:3px; }
.entry-content blockquote{ margin:1.8rem 0; padding:.4rem 0 .4rem 1.4rem; border-left:2px solid var(--accent); font-family:var(--font-head); font-style:italic; font-size:1.25rem; color:var(--ink); }
.entry-content ul,.entry-content ol{ padding-left:1.3rem; color:var(--ink); }
.entry-content li{ margin-bottom:.5rem; }
.entry__thumb{ border-radius:var(--radius); overflow:hidden; margin-bottom:2.5rem; }
.entry__header{ text-align:center; max-width:var(--measure); margin:0 auto 2.5rem; }
.entry__meta{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.entry__header h1{ margin-top:.6rem; }

/* bloc d'info sobre (coordonnées bancaires…) */
.info-block{ border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; max-width:440px; margin-inline:auto; text-align:center; }
.info-block h3{ margin-bottom:.6rem; }
.info-block p{ margin:0; color:var(--ink); }

/* pagination */
.pagination{ display:flex; justify-content:center; gap:.4rem; margin-top:3.5rem; flex-wrap:wrap; align-items:center; }
.pagination .nav-links{ display:flex; justify-content:center; align-items:center; gap:.4rem; flex-wrap:wrap; width:100%; }
.pagination .page-numbers{ display:grid; place-items:center; min-width:42px; height:42px; padding:0 .6rem; border-radius:6px; border:1px solid var(--line); font-weight:500; color:var(--ink); }
.pagination .current{ background:var(--accent); color:#fff; border-color:var(--accent); }
.pagination a.page-numbers:hover{ border-color:var(--accent); color:var(--accent); }

/* =========================================================
   10. CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact-item{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.contact-item:first-child{ border-top:1px solid var(--line); }
.contact-item .ic{ margin:0; flex:0 0 auto; width:26px; height:26px; }
.contact-item h4{ margin:0 0 .1rem; font-family:var(--font-body); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.contact-item p,.contact-item a{ margin:0; color:var(--ink); font-size:1.05rem; }
.contact-card{ border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.2rem); background:#fff; }
.contact-card input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.contact-card textarea,
.contact-card .wpcf7 input,.contact-card .wpcf7 textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:6px;
  font-family:var(--font-body); font-size:1rem; margin-bottom:1rem; background:var(--paper); color:var(--ink);
}
.contact-card input:focus,.contact-card textarea:focus{ outline:none; border-color:var(--accent); background:#fff; }

/* Formulaire de commentaire (page Profil) — même design que le formulaire de contact */
.contact-card #respond,.contact-card .comment-respond{ margin:0; }
.contact-card #reply-title,.contact-card .comment-reply-title{ font-family:var(--font-head); font-weight:500; font-size:1.4rem; margin:0 0 .4rem; }
.contact-card #reply-title small{ font-weight:400; font-size:.9rem; margin-left:.5rem; }
.contact-card .comment-notes,.contact-card .logged-in-as{ font-size:.9rem; color:var(--muted); margin-bottom:1.3rem; }
.contact-card .comment-form label{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }
.contact-card .comment-form-cookies-consent{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.1rem; }
.contact-card .comment-form-cookies-consent label{ margin:0; font-size:.85rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); }
.contact-card input[type=checkbox]{ width:auto; margin:0; }
.contact-card .form-submit{ margin:0; }
.contact-card .form-submit .submit{ width:auto; }

/* Liste des commentaires + réponses (fil de discussion) */
.comments-area{ max-width:var(--measure); margin-inline:auto; }
.comments-area > h3{ font-family:var(--font-head); font-weight:500; font-size:1.5rem; margin-bottom:1.5rem; }
.comment-list{ list-style:none; margin:0 0 2rem; padding:0; }
.comment-list ol.children{ list-style:none; margin:1.2rem 0 0; padding:0 0 0 clamp(1rem,4vw,2.4rem); border-left:2px solid var(--line); }
.comment-list li.comment{ margin-bottom:1.3rem; }
.comment-body{ padding:1.2rem 1.3rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.comment-meta{ display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.comment-author.vcard{ display:flex; align-items:center; gap:.6rem; }
.comment-author.vcard img.avatar{ border-radius:50%; width:40px; height:40px; }
.comment-author .fn{ font-family:var(--font-head); font-weight:600; font-style:normal; color:var(--ink); }
.comment-author .says{ display:none; }
.comment-metadata{ margin-left:auto; font-size:.8rem; }
.comment-metadata a{ color:var(--muted); }
.comment-content{ color:var(--ink); }
.comment-content p:last-child{ margin-bottom:0; }
.reply{ margin-top:.7rem; }
.comment-reply-link,.comment-list .comment-reply-link{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--line); border-radius:999px; padding:.35rem .85rem;
}
.comment-reply-link:hover{ border-color:var(--accent); background:var(--accent); color:#fff; }
.bypostauthor > .comment-body{ border-color:var(--accent); }

/* Pagination des commentaires */
.comment-navigation .nav-links{ display:flex; justify-content:center; gap:.4rem; margin:1.5rem 0 2rem; flex-wrap:wrap; }
.comment-navigation .page-numbers{ display:grid; place-items:center; min-width:40px; height:40px; padding:0 .6rem; border-radius:6px; border:1px solid var(--line); font-weight:600; color:var(--ink); }
.comment-navigation .current{ background:var(--accent); color:#fff; border-color:var(--accent); }
.comment-navigation a.page-numbers:hover{ border-color:var(--accent); color:var(--accent); }

/* =========================================================
   11. FOOTER
   ========================================================= */
.site-footer{ background:var(--panel); border-top:1px solid var(--line); padding-top:clamp(3rem,5vw,4.5rem); color:var(--muted); }
.site-footer h4{ font-family:var(--font-body); color:var(--ink); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:1rem; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.2rem; padding-bottom:2.5rem; }
.site-footer a{ color:var(--muted); }
.site-footer a:hover{ color:var(--accent); }
.footer-brand{ display:flex; align-items:center; gap:.55rem; font-family:var(--font-head); font-weight:500; color:var(--ink); font-size:1.3rem; margin-bottom:1rem; }
.footer-menu{ list-style:none; padding:0; margin:0; }
.footer-menu li{ margin-bottom:.6rem; }
.footer-social{ display:flex; gap:.6rem; margin-top:1.1rem; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); }
.footer-social a:hover{ border-color:var(--accent); color:var(--accent); }
.footer-social svg{ width:18px; height:18px; }
.site-footer__bottom{ border-top:1px solid var(--line); padding:1.4rem 0; text-align:center; font-size:.85rem; letter-spacing:.02em; }

/* =========================================================
   12. UTILITIES & WP CORE
   ========================================================= */
.screen-reader-text{ position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:.7rem 1rem; z-index:1000; }
.skip-link:focus{ left:0; }
.aligncenter{ margin-inline:auto; }
.wp-caption-text,.entry-content figcaption{ font-size:.85rem; color:var(--muted); text-align:center; margin-top:.5rem; }
.mt-2{ margin-top:2rem; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* =========================================================
   12b. SÉCURITÉ MOBILE DU CONTENU (articles importés)
   ========================================================= */
.entry-content, .comment-content{ overflow-wrap:break-word; word-wrap:break-word; }
.entry-content img, .entry-content figure, .comment-content img{ max-width:100%; height:auto; }
.entry-content figure{ margin-inline:0; }
.entry-content iframe, .entry-content video, .entry-content embed, .entry-content object{ max-width:100%; }
.entry-content pre{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.entry-content table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.entry-content .alignfull, .entry-content .alignwide{ max-width:100%; margin-left:0; margin-right:0; }
.entry-content iframe[src*="youtube"], .entry-content iframe[src*="youtu.be"], .entry-content iframe[src*="vimeo"]{ width:100%; aspect-ratio:16/9; height:auto; }

/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .grid--4,.mod-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
/* Navigation : bascule en menu hamburger dès 1024px (barre chargée : 6 liens + langue + CTA) */
@media (max-width:1024px){
  .nav-toggle{ display:inline-flex; order:3; position:relative; z-index:130; }
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,330px);
    background:var(--paper); flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:5.5rem 1.6rem 2rem; gap:.2rem;
    transform:translateX(105%); transition:transform .28s ease;
    border-left:1px solid var(--line); overflow-y:auto; z-index:120;
  }
  .nav-open .main-nav{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .main-nav li{ border-bottom:1px solid var(--line); }
  .main-nav a{ padding:1rem .4rem; font-size:1.1rem; font-family:var(--font-head); font-weight:500; white-space:normal; }
  .lang-switch{ order:2; margin-top:1.3rem; display:block; }
  .lang-current{ width:100%; justify-content:flex-start; padding-block:.7rem; }
  .lang-switch .lang-menu{ position:static; box-shadow:none; margin-top:.5rem; min-width:0; width:100%; }
  .header-cta{ order:3; margin:1rem 0 0; }
  .header-cta .btn{ width:100%; justify-content:center; }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(42,37,33,.4); opacity:0; visibility:hidden; transition:.25s; z-index:110; }
  .nav-open .nav-backdrop{ opacity:1; visibility:visible; }
}
@media (max-width:820px){
  .hero__inner,.split,.contact-grid{ grid-template-columns:1fr; }
  .hero__media,.split--reverse .split__media{ order:-1; max-width:520px; margin-inline:auto; }
  .grid--3,.grid--2,.post-grid{ grid-template-columns:1fr; }
  .mod-grid{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .grid--4{ grid-template-columns:1fr; }
  .stats{ gap:1.6rem; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  /* en-tête compact */
  .site-brand{ font-size:1.05rem; }
  .site-brand__name small{ display:none; }
  .site-brand img{ max-height:38px; }
  /* commentaires : la date passe sous l'auteur, cartes moins larges */
  .comment-meta{ flex-wrap:wrap; }
  .comment-metadata{ margin-left:0; width:100%; }
  .comment-body{ padding:1rem; }
  .comment-list ol.children{ padding-left:.9rem; }
  /* cibles tactiles plus confortables */
  .comment-reply-link{ padding:.5rem .95rem; }
  .mod{ padding-block:1.15rem; }
  /* pagination : plus aérée et boutons plus grands au doigt */
  .pagination{ margin-top:2.5rem; }
  .pagination .nav-links{ gap:.5rem; }
  .pagination .page-numbers,
  .comment-navigation .page-numbers{ min-width:46px; height:46px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}