/*
Theme Name: Une Miséricorde Pour Tous
Theme URI: https://frunemisericordepourtous.com
Author: Une Miséricorde Pour Tous
Author URI: https://frunemisericordepourtous.com
Description: Thème WordPress dynamique pour l'association humanitaire "Une Miséricorde Pour Tous". Contenus modifiables via le Customizer (textes, liens, statistiques) et via des types de contenus personnalisés pour les Actions et les Vidéos.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: misericorde
*/

:root{
  --ink:#0B2620;
  --forest:#14463A;
  --forest-2:#1C5A4A;
  --gold:#C99A3B;
  --gold-light:#E7C778;
  --sand:#F6F0E4;
  --sand-2:#EFE6D4;
  --card:#FBF7EF;
  --text:#21342E;
  --muted:#5C6A63;
  --line:rgba(11,38,32,.13);
  --line-gold:rgba(201,154,59,.45);
  --maxw:1140px;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%}
body{
  font-family:"Mulish",system-ui,sans-serif;
  color:var(--text);
  background:var(--sand);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
/* Garde-fous anti-débordement horizontal : aucun média, tableau ou formulaire
   ne doit pouvoir être plus large que son conteneur, sur aucun écran. */
img,svg,video,iframe,embed,object,table{max-width:100%;height:auto}
iframe{height:100%}
table{display:block;overflow-x:auto;height:auto}
input,textarea,select,button{max-width:100%;font-family:inherit}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.12;letter-spacing:-.01em;overflow-wrap:break-word}
p{overflow-wrap:break-word}
a{color:inherit;text-decoration:none;overflow-wrap:break-word}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:"Mulish";font-weight:700;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;font-family:"Mulish";font-weight:700;
  font-size:.95rem;padding:.85rem 1.5rem;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease;
}
.btn-gold{background:var(--gold);color:#23190a;box-shadow:0 8px 24px rgba(201,154,59,.32)}
.btn-ghost{background:transparent;color:var(--sand);border-color:rgba(231,199,120,.45)}
.btn-dark{background:var(--ink);color:var(--sand)}
.btn svg{width:17px;height:17px;transition:transform .25s ease}
.btn:active{transform:translateY(0) scale(.97)}
.btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,154,59,.45)}
  .btn-ghost:hover{background:rgba(231,199,120,.12);border-color:var(--gold-light)}
  .btn-dark:hover{transform:translateY(-2px);background:var(--forest)}
  .btn:hover svg{transform:translateX(3px)}
}

/* ---------- HEADER ---------- */
#masthead{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:rgba(11,38,32,.86);border-bottom:1px solid rgba(231,199,120,.16);transition:padding .3s}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:.8rem}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--sand);min-width:0;flex:1 1 auto;overflow:hidden}
.brand-mark{width:34px;height:34px;flex:none}
.brand-name{font-family:"Fraunces";font-size:1.04rem;line-height:1.05;font-weight:600;
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}
.brand-name small{display:block;font-family:"Mulish";font-weight:600;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);opacity:.85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu{display:flex;align-items:center;gap:2rem;list-style:none}
.menu li{display:flex}
.menu a{color:var(--sand);font-weight:600;font-size:.92rem;opacity:.82;transition:opacity .2s,color .2s;
  position:relative;padding-bottom:3px}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold-light);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.menu a:focus-visible{opacity:1;color:var(--gold-light)}
@media(hover:hover) and (pointer:fine){
  .menu a:hover{opacity:1;color:var(--gold-light)}
  .menu a:hover::after{transform:scaleX(1)}
}
.menu a.current-menu-item,.menu li.current-menu-item>a{opacity:1;color:var(--gold-light)}
.menu a.current-menu-item::after,.menu li.current-menu-item>a::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:.7rem;flex:none}
.burger{display:none;background:none;border:0;color:var(--sand);cursor:pointer;width:38px;height:38px;
  align-items:center;justify-content:center;border-radius:10px;transition:background .2s}
.burger:focus-visible{background:rgba(231,199,120,.14)}
@media(hover:hover) and (pointer:fine){ .burger:hover{background:rgba(231,199,120,.14)} }

/* ---------- DONATE BUTTON (header) ---------- */
.btn-donate{padding:.7rem 1.3rem}
.btn-donate svg{width:16px;height:16px}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--ink);color:var(--sand);overflow:hidden;
  padding:clamp(70px,11vw,130px) 0 clamp(90px,13vw,150px);text-align:center}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% -10%,rgba(201,154,59,.20),transparent 55%),
             radial-gradient(80% 60% at 50% 120%,rgba(28,90,74,.5),transparent 60%)}
.hero-arch{position:absolute;top:6%;left:50%;transform:translateX(-50%);
  width:min(560px,82vw);height:118%;opacity:.5;pointer-events:none}
.hero-arch path{fill:none;stroke:var(--gold);stroke-width:1;
  stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 2.6s ease forwards .25s}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.salam{font-family:"Fraunces";font-style:italic;color:var(--gold-light);font-size:1.05rem;margin-bottom:1.4rem}
.hero h1{font-size:clamp(2.6rem,6.6vw,4.5rem);font-weight:500}
.hero h1 em{font-style:italic;color:var(--gold-light)}
.hero p.lead{font-size:clamp(1.05rem,2.2vw,1.25rem);color:#D8E2DA;max-width:620px;
  margin:1.6rem auto 2.4rem;font-weight:400}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.scrolltip{margin-top:3.4rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(231,199,120,.7);font-weight:600}

/* ---------- STATS STRIP ---------- */
.stats{background:var(--forest);color:var(--sand);border-top:1px solid rgba(231,199,120,.18)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(231,199,120,.18)}
.stat{background:var(--forest);padding:1.9rem 1rem;text-align:center;min-width:0}
.stat b{display:block;font-family:"Fraunces";font-size:clamp(1.3rem,5vw,2rem);color:var(--gold-light);font-weight:600;
  overflow-wrap:break-word}
.stat span{font-size:clamp(.68rem,2.6vw,.82rem);letter-spacing:.02em;color:#C9D5CD;
  display:block;overflow-wrap:break-word;line-height:1.35}

/* ---------- SECTION BASE ---------- */
section.block{padding:clamp(64px,9vw,108px) 0}
.sec-head{max-width:620px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,2.9rem);margin:.9rem 0 1rem}
.sec-head p{color:var(--muted);font-size:1.05rem}

/* ---------- MISSION ---------- */
#mission{background:var(--sand)}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.mission-grid>*{min-width:0}
.mission-text p{margin-bottom:1.1rem;color:#3a4a43}
.mission-text .sign{font-family:"Fraunces";font-style:italic;color:var(--forest);margin-top:1.4rem;font-size:1.1rem}
.quote-card{position:relative;background:var(--ink);color:var(--sand);border-radius:var(--r);
  padding:clamp(2rem,4vw,3rem);overflow:hidden}
.quote-card::before{content:"";position:absolute;inset:0;
  background:radial-gradient(100% 70% at 100% 0,rgba(201,154,59,.22),transparent 60%)}
.quote-card .q{position:relative;font-family:"Fraunces";font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.4}
.quote-card .q .gold{color:var(--gold-light)}
.quote-card .who{position:relative;margin-top:1.6rem;font-size:.85rem;letter-spacing:.04em;color:#C9D5CD}

/* ---------- ACTIONS / CARDS ---------- */
#actions{background:var(--sand-2)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.cards>*{min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:2rem 1.6rem;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
@media(hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,38,32,.12);border-color:var(--line-gold)}
}
.niche{width:64px;height:78px;margin:0 auto 1.3rem;border:1.5px solid var(--gold);
  border-radius:32px 32px 8px 8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(201,154,59,.10),transparent)}
.niche svg{width:30px;height:30px;stroke:var(--forest);fill:none;stroke-width:1.6}
.card h3{font-size:1.25rem;text-align:center;margin-bottom:.55rem}
.card p{text-align:center;color:var(--muted);font-size:.95rem}

/* ---------- PARRAINAGE STEPS ---------- */
#parrainage{background:var(--ink);color:var(--sand)}
#parrainage .sec-head p{color:#C2CEC6}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}
.steps>*{min-width:0}
.step{position:relative;padding-top:1.2rem}
.step .num{font-family:"Fraunces";font-size:2.4rem;color:var(--gold);line-height:1;display:block;margin-bottom:.6rem}
.step h3{font-size:1.2rem;color:var(--gold-light);margin-bottom:.5rem}
.step p{color:#C2CEC6;font-size:.95rem}
.step::before{content:"";position:absolute;top:0;left:0;width:46px;height:1px;background:var(--gold)}

/* ---------- VIDEOS ---------- */
#videos{background:var(--sand)}
.vid-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:3rem}
.vid-grid>*{min-width:0}
.vid{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
@media(hover:hover) and (pointer:fine){
  .vid:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,38,32,.12);border-color:var(--line-gold)}
}
.vid .frame{position:relative;aspect-ratio:16/9;background:#000}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .cap{padding:1rem 1.3rem;display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:.95rem}
.vid .cap span.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}

/* ---------- ZAKAT ---------- */
#zakat{background:var(--sand-2)}
.zak-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.8rem}
.zak-grid>*{min-width:0}
.zak{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:2rem}
.zak h3{font-size:1.4rem;color:var(--forest);margin-bottom:.6rem}
.zak p{color:var(--muted);font-size:.97rem}
.zak .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line-gold);border-radius:999px;padding:.25rem .8rem;margin-bottom:1rem}

/* ---------- DONATE CTA ---------- */
#don{background:var(--forest);color:var(--sand);text-align:center;position:relative;overflow:hidden}
#don::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 100% at 50% 0,rgba(201,154,59,.2),transparent 65%)}
.don-inner{position:relative;max-width:680px;margin:0 auto}
#don h2{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:1rem}
#don h2 em{font-style:italic;color:var(--gold-light)}
#don p{color:#D5E0D8;font-size:1.08rem;margin-bottom:2.2rem}
.don-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.don-note{margin-top:1.8rem;font-size:.85rem;color:rgba(213,224,216,.75)}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:#C2CEC6;padding:clamp(54px,7vw,80px) 0 2.4rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.foot-grid>*{min-width:0}
.foot-brand .brand{margin-bottom:1.1rem}
.foot-brand p{font-size:.92rem;max-width:330px}
.foot h4{font-family:"Mulish";color:var(--gold-light);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:1.1rem;font-weight:800}
.foot ul{list-style:none}
.foot li{margin-bottom:.6rem}
.foot a{font-size:.92rem;opacity:.85;transition:opacity .2s,color .2s}
@media(hover:hover) and (pointer:fine){ .foot a:hover{opacity:1;color:var(--gold-light)} }
.socials{display:flex;gap:.7rem;margin-top:.4rem}
.socials a{width:38px;height:38px;border:1px solid rgba(231,199,120,.3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
@media(hover:hover) and (pointer:fine){ .socials a:hover{background:rgba(231,199,120,.14);border-color:var(--gold)} }
.socials svg{width:17px;height:17px;fill:var(--sand)}
.foot-bottom{border-top:1px solid rgba(231,199,120,.16);margin-top:3rem;padding-top:1.6rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.82rem;opacity:.7}

/* ---------- LIVRE ---------- */
#livre{background:var(--sand)}
.book-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.book-grid>*{min-width:0}
.book-cover{display:flex;justify-content:center}
.book-arch{width:min(280px,80vw);aspect-ratio:3/4.2;background:linear-gradient(160deg,var(--forest),var(--ink));
  border:1.5px solid var(--gold);border-radius:140px 140px 14px 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  box-shadow:0 24px 50px rgba(11,38,32,.28);padding:2rem 1.5rem;text-align:center;
  position:relative;transition:transform .4s ease}
@media(hover:hover) and (pointer:fine){ .book-cover:hover .book-arch{transform:translateY(-6px) rotate(-1deg)} }
.book-arch::after{content:"";position:absolute;inset:10px;border:1px solid rgba(231,199,120,.4);
  border-radius:130px 130px 8px 8px;pointer-events:none}
.book-kicker{font-family:"Mulish";font-weight:700;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-light)}
.book-title{font-family:"Fraunces";font-style:italic;font-size:1.85rem;line-height:1.1;color:var(--sand)}
.book-author{font-family:"Mulish";font-weight:600;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.book-text p{color:#3a4a43;margin-bottom:1rem}
@media(max-width:880px){.book-grid{grid-template-columns:1fr;text-align:center}.book-cover{order:-1}.book-text .eyebrow{justify-content:center}}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:880px){
  .menu{display:none}
  .burger{display:flex}
  .menu.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;
    gap:1.3rem;background:var(--ink);padding:1.6rem 24px;border-bottom:1px solid rgba(231,199,120,.18);
    max-height:calc(100vh - 70px);overflow-y:auto}
  .mission-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .vid-grid{grid-template-columns:1fr}
  .zak-grid{grid-template-columns:1fr}
  .stats .grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  /* Le bouton "Faire un don" reste visible mais devient compact (icône seule) */
  .btn-donate{padding:.65rem;border-radius:50%}
  .btn-donate .btn-label{display:none}
  .btn-donate svg{width:19px;height:19px}
  .lang-btn .lang-label{display:none}
  .lang-btn{padding:.6rem}
  .lang-panel{right:auto;left:50%;transform:translate(-50%,-8px)}
  .lang-panel.open{transform:translate(-50%,0)}
}
@media(max-width:768px){
  .stat{padding:1.3rem .6rem}
}
@media(max-width:640px){
  .nav{height:64px}
  .brand-name{font-size:.92rem}
  .cards{grid-template-columns:1fr}
  .hero-actions .btn{width:100%;justify-content:center}
  .don-actions .btn{width:100%;justify-content:center}
  section.block{padding:48px 0}
  .wrap{padding:0 18px}
}
@media(max-width:400px){
  .stats .grid{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .hero-arch path{stroke-dashoffset:0}
}

/* ---------- WP EXTRAS (pagination, comments, entry content) ---------- */
.entry-content{max-width:var(--maxw);margin:0 auto;padding:80px 24px}
.entry-content h1{font-size:2.4rem;margin-bottom:1.2rem}
.entry-content h2{font-size:1.8rem;margin:2rem 0 1rem}
.entry-content h3{font-size:1.4rem;margin:1.6rem 0 .8rem}
.entry-content p{margin-bottom:1.1rem;color:#3a4a43}
.entry-content ul,.entry-content ol{margin:0 0 1.1rem 1.4rem;color:#3a4a43}
.entry-content li{margin-bottom:.4rem}
.entry-content blockquote{border-left:3px solid var(--gold);padding:.4rem 0 .4rem 1.4rem;margin:1.4rem 0;
  font-family:"Fraunces";font-style:italic;color:var(--forest)}
.entry-content a{color:var(--forest-2);text-decoration:underline;text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){ .entry-content a:hover{color:var(--gold)} }
.entry-content img{border-radius:var(--r)}
.wp-pagination{display:flex;gap:.6rem;justify-content:center;margin:2rem 0;flex-wrap:wrap}
.wp-pagination a,.wp-pagination span{padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:.9rem}
.wp-pagination .current{background:var(--ink);color:var(--sand)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--sand);padding:.8rem 1.2rem;z-index:9999}
.skip-link:focus{left:10px;top:10px}

/* ---------- FORMULAIRES : commentaires WordPress + Contact Form 7 ---------- */
/* Styles communs à tout champ de formulaire du site, pour remplacer
   l'apparence par défaut du navigateur ("carré blanc" + bouton gris). */
.comments-area,
.wpcf7-form,
.comment-respond{
  max-width:720px;
}
.comments-area{margin:0 auto;padding-top:2rem}
.comments-area h2{font-size:1.6rem;margin-bottom:1.6rem;color:var(--forest)}
.comment-respond{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.4rem,4vw,2.2rem);margin-top:2rem}
.comment-reply-title{font-family:"Fraunces";font-size:1.35rem;margin-bottom:1.2rem;color:var(--forest);display:block}
.comment-list{margin:0 0 1rem}
.comment-list .comment{list-style:none;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:1.4rem 1.6rem;margin-bottom:1rem}
/* Neutralise tout style hérité (ex : une balise <header> ou <footer> utilisée
   par WordPress en interne pour l'auteur/la date) afin que la carte du
   commentaire garde toujours le même fond clair et la même couleur de texte. */
.comment-list .comment-body,
.comment-list .comment-meta,
.comment-list .comment-author{
  background:transparent!important;color:var(--text)!important;
  position:static!important;backdrop-filter:none!important;border:0!important;
}
.comment-list .comment-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.8rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)!important}
.comment-list .comment .avatar{border-radius:50%;flex:none;width:44px;height:44px}
.comment-list .comment-author{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;min-width:0}
.comment-list .comment-author .fn{font-weight:700;color:var(--forest)!important;font-style:normal;
  min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.comment-list .comment-author .fn a{overflow-wrap:anywhere;word-break:break-word}
@media (max-width:480px){
  .comment-list .comment-author .fn{font-size:clamp(.82rem,3.6vw,1rem)}
}
.comment-list .comment-author .says{color:var(--muted)!important;font-size:.88rem}
.comment-list .comment-metadata{font-size:.8rem;color:var(--muted)!important;margin:0}
.comment-list .comment-metadata a{color:var(--muted)!important}
.comment-list .comment-content{clear:both}
.comment-list .comment-content p{margin-bottom:.6rem;color:#3a4a43}
.comment-list .reply a{font-size:.82rem;font-weight:700;color:var(--gold);text-decoration:none;
  border:1px solid var(--line-gold);border-radius:999px;padding:.3rem .9rem;display:inline-block;margin-top:.4rem;transition:background .2s}
@media(hover:hover) and (pointer:fine){
  .comment-list .reply a:hover{background:rgba(201,154,59,.12)}
}
.comment-list ol.children{list-style:none;margin-left:clamp(1rem,4vw,2.4rem)}

/* Champs de formulaire (commentaires + Contact Form 7) */
.comment-form p,.wpcf7-form p,.wpcf7-form-control-wrap{margin-bottom:1.1rem}
.comment-form label,.wpcf7-form label{display:block;font-weight:700;font-size:.88rem;color:var(--forest);margin-bottom:.4rem}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select{
  width:100%;
  font-family:"Mulish";
  font-size:.95rem;
  color:var(--text);
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:.75rem 1rem;
  transition:border-color .2s,box-shadow .2s;
}
.comment-form textarea,.wpcf7-form textarea{min-height:130px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus,
.wpcf7-form input:focus,.wpcf7-form textarea:focus,.wpcf7-form select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,154,59,.18)
}
.comment-form input[type="submit"],
.form-submit input[type="submit"],
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit{
  display:inline-flex;align-items:center;gap:.55rem;font-family:"Mulish";font-weight:700;
  font-size:.95rem;padding:.85rem 1.7rem;border-radius:999px;cursor:pointer;
  background:var(--gold);color:#23190a;border:1px solid transparent;
  box-shadow:0 8px 24px rgba(201,154,59,.32);transition:transform .25s ease,box-shadow .25s ease;
}
@media(hover:hover) and (pointer:fine){
  .comment-form input[type="submit"]:hover,
  .form-submit input[type="submit"]:hover,
  .wpcf7-form input[type="submit"]:hover,
  .wpcf7-form .wpcf7-submit:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,154,59,.45)}
}

/* Messages de statut et erreurs Contact Form 7 */
.wpcf7-not-valid-tip{color:#a5372a;font-size:.82rem;margin-top:.3rem}
.wpcf7-response-output{border-radius:12px;padding:.9rem 1.2rem;margin-top:1.2rem;font-size:.92rem}
.wpcf7-mail-sent-ok{background:rgba(28,90,74,.12);border:1px solid var(--forest-2);color:var(--forest)}
.wpcf7-validation-errors,.wpcf7-mail-sent-ng,.wpcf7-spam-blocked{background:rgba(165,55,42,.1);border:1px solid #a5372a;color:#a5372a}
.wpcf7-form.sent .wpcf7-response-output{margin-bottom:0}
.wpcf7 form.invalid .wpcf7-response-output{border-color:#a5372a}
/* Le widget reCAPTCHA de Contact Form 7 peut être plus large que l'écran sur mobile */
.grecaptcha-badge{transform:scale(.9);transform-origin:right bottom}
@media(max-width:640px){
  .comment-list .comment{padding:1.1rem 1.2rem}
  .comment-respond{padding:1.4rem}
}
.skip-link:focus{left:10px;top:10px}

/* ---------- EFFETS / MICRO-INTERACTIONS ---------- */

/* Halo doré qui suit la souris (uniquement sur ordinateur avec souris ;
   ne remplace jamais le curseur natif, purement décoratif et sans clic). */
#cursor-glow{
  position:fixed;top:0;left:0;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,154,59,.55),rgba(201,154,59,0) 70%);
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .25s ease,width .25s ease,height .25s ease;
}
#cursor-glow.is-visible{opacity:1}
#cursor-glow.is-grown{width:56px;height:56px}

/* Barre de progression de lecture, en haut de l'écran */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  z-index:9997;pointer-events:none;
}

/* Bouton "retour en haut" */
#back-to-top{
  position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:var(--sand);border:1px solid rgba(231,199,120,.35);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 26px rgba(11,38,32,.25);z-index:9996;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
#back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
#back-to-top svg{width:19px;height:19px}
@media(hover:hover) and (pointer:fine){
  #back-to-top:hover{background:var(--forest)}
}
#back-to-top:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}

/* Grain très subtil sur toute la page, purement esthétique et sans interaction */
body::before{
  content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sur mobile/tactile : pas de halo curseur (pas de souris) */
@media not all and (hover:hover) and (pointer:fine){
  #cursor-glow{display:none}
}

@media(prefers-reduced-motion:reduce){
  #cursor-glow{display:none}
  body::before{display:none}
}