/*
Theme Name: EthiCompare
Theme URI: https://www.ethicompare.eu
Author: EthiCompare
Description: Thème éditorial de précision pour comparateur de solutions numériques éthiques et souveraines — sobre, lisible, mode sombre automatique, guide de choix avec scoring transparent.
Version: 3.6.0
Requires at least: 6.0
Tested up to: 6.7
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: ethicompare
*/

/* ============================================================
/* ============================================================
   ETHICOMPARE — Design system v4 « Éditorial de précision »
   Sobre, lisible, légèrement en avance : Instrument Serif en
   accent, filets annotés, points de score, mode sombre auto.
   Typo : Onest · Instrument Serif (italique) · IBM Plex Mono.
   ============================================================ */
:root{
  --bg:#F8F8FA;
  --card:#FFFFFF;
  --ink:#363954;
  --ink-hover:#1D2B23;
  --slate:#5E6178;
  --faint:#9EA1B0;
  --line:#EAEAEE;
  --line2:#DDDEE4;
  --accent:#00BF63;
  --accent-ink:#008445;
  --tint:#EDF7F1;
  --warn-bg:#FBF3DF;
  --warn:#8A6400;
  --panel:#212438;
  --panel-line:#1E2A23;
  --panel-text:#C9D6CD;
  --sel:#CFF4E2;
  --sans:"Familjen Grotesk",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"Fragment Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14151D;
    --card:#131B16;
    --ink:#EAEBF0;
    --ink-hover:#FFFFFF;
    --slate:#C1C3CD;
    --faint:#898C9C;
    --line:#313341;
    --line2:#2C3A31;
    --accent:#0CCF6E;
    --accent-ink:#0FD773;
    --tint:#13271C;
    --warn-bg:#2A2410;
    --warn:#E3C26B;
    --panel:#0D0E14;
    --panel-line:#1B2620;
    --panel-text:#AEC2B5;
    --sel:#1E4D36;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--sel)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important;animation:none!important}
}
body{
  font-family:var(--sans);font-size:16.5px;line-height:1.65;
  letter-spacing:-.005em;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.tn{font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:0;font-optical-sizing:auto}
.dot-accent{color:var(--accent)}
.hidden{display:none!important}

/* ---------- Révélation au chargement ---------- */
.reveal{opacity:0;transform:translateY(14px);animation:rise .75s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- Labels & filets annotés ---------- */
.lbl{
  font-family:var(--mono);font-size:.68rem;font-weight:400;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  display:inline-flex;align-items:center;gap:10px;
}
.lbl::before{content:"";width:16px;height:1px;background:var(--faint);flex:none}
.ruler{position:relative;height:1px;background:var(--line);margin-bottom:30px}
.ruler span{
  position:absolute;right:0;top:-8px;background:var(--bg);padding-left:12px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--faint);
}

/* ---------- Wordmark ---------- */
.wordmark{
  font-family:var(--sans);font-weight:700;font-size:1.12rem;
  letter-spacing:-.03em;text-decoration:none;
  display:inline-flex;align-items:center;gap:0;line-height:1;
}
.wordmark .mark{flex:none;margin-right:9px;transition:transform .25s ease}

.mark .lf-ink{fill:var(--ink)}
.mark .lf-acc{fill:var(--accent)}
.lf-pass{transition:transform .3s ease}
.wordmark:hover .lf-pass{transform:translateY(120px)}
.wm-vec{display:block}
.wm-vec .lf-ink{fill:var(--ink)}
.wm-vec .lf-acc{fill:var(--accent)}
.foot-grid .lf-ink{fill:#EAEBF0}
.foot-grid .wm-vec{height:28px;width:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.has-lines{position:relative;overflow:hidden}
.has-lines > *{position:relative;z-index:1}
.has-lines > .hero-lines{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-lines svg{position:absolute;left:50%;top:50%;width:max(165vw,165vh);height:max(165vw,165vh);transform:translate(-50%,-50%);animation:hl-rot 220s linear infinite}
.hero-lines path{fill:none;stroke:var(--ink);stroke-width:1;opacity:.04}
.hero-lines path.hl-acc{stroke:var(--accent);stroke-width:1.4;opacity:.13}
@keyframes hl-rot{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.hero-lines svg{animation:none}}
.wordmark .gaz{color:var(--ink)}
.wordmark .elec{color:var(--accent)}
.slogan{
  font-family:var(--mono);font-size:.64rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:10px;
}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid transparent;transition:border-color .25s;
}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{
  text-decoration:none;font-weight:500;font-size:.92rem;color:var(--slate);
  transition:color .15s;
}
.nav-links a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:5px}
.burger{display:none;background:none;border:1px solid var(--line2);border-radius:9px;
  width:40px;height:40px;cursor:pointer;align-items:center;justify-content:center}
.burger svg{stroke:var(--ink)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:-.005em;
  padding:13px 23px;border-radius:9px;border:none;cursor:pointer;
  text-decoration:none;transition:background .15s,transform .12s,border-color .15s;
}
.btn-volt{background:var(--ink);color:var(--bg)}
.btn-volt:hover{background:var(--ink-hover);transform:translateY(-1px)}
.btn-volt:active{transform:translateY(0)}
.btn-sm{padding:9px 16px;font-size:.88rem;border-radius:8px}

/* ---------- Hero ---------- */
.hero{padding:84px 0 76px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.hero .lbl{margin-bottom:22px}
.hero h1{
  font-weight:700;letter-spacing:-.032em;
  font-size:clamp(2.05rem,4.4vw,3.25rem);line-height:1.07;margin-bottom:20px;
}
.hero .lede{font-size:1.12rem;color:var(--slate);max-width:50ch;margin-bottom:28px}
.hero .lede strong{color:var(--ink);font-weight:600}
.trust-row{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px}
.trust-item{
  font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.12em;
  color:var(--slate);display:inline-flex;align-items:center;gap:8px;
}
.trust-item svg{flex:none;color:var(--accent)}

/* ---------- Guide de choix ---------- */
.sim-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,20,.04);overflow:hidden;
}
.sim-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 24px;border-bottom:1px solid var(--line);
}
.sim-head .lbl{color:var(--slate)}
.sim-head .free{
  font-family:var(--mono);font-size:.64rem;font-weight:400;letter-spacing:.12em;
  color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:3px 11px;
}
.sim-body{padding:24px}
.field{margin-bottom:15px}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:7px}
.field select{
  width:100%;padding:12px 14px;font:inherit;font-size:.96rem;color:var(--ink);
  border:1px solid var(--line2);border-radius:10px;background:var(--bg);
  appearance:none;cursor:pointer;transition:border-color .15s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' fill='none'%3E%3Cpath d='M1 1l5.5 5.5L12 1' stroke='%2393A399' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field select:hover{border-color:var(--faint)}
.field select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--tint)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check-line{
  display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:500;
  padding:11px 14px;border:1px solid var(--line2);border-radius:10px;
  background:var(--bg);cursor:pointer;user-select:none;transition:border-color .15s;
}
.check-line:hover{border-color:var(--faint)}
.check-line input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.sim-body .btn{width:100%;margin-top:8px}
.sim-note{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;
  color:var(--faint);text-align:center;margin-top:13px;
}

/* ---------- Sections ---------- */
section{padding:74px 0}
.sec-head{max-width:660px;margin-bottom:40px}
.sec-head .lbl{margin-bottom:14px}
.sec-head h2{
  font-weight:650;letter-spacing:-.025em;
  font-size:clamp(1.5rem,2.8vw,1.95rem);line-height:1.15;margin-bottom:11px;
}
.sec-head p{color:var(--slate);font-size:1.03rem}

/* ---------- Résultats ---------- */
.readout{
  display:none;align-items:center;gap:10px 22px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px 18px;margin-bottom:24px;
}
.readout.visible{display:flex}
.readout .val{font-family:var(--mono);font-size:.74rem;font-weight:400;letter-spacing:.06em;color:var(--ink)}
.readout .pill{
  font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.1em;
  color:var(--accent-ink);background:var(--tint);border-radius:99px;padding:4px 11px;
}
.eco-note{
  display:none;font-family:var(--mono);font-size:.72rem;font-weight:400;
  letter-spacing:.03em;color:var(--ink);background:var(--tint);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;padding:12px 16px;margin:-6px 0 26px;
}
.eco-note.warn{background:var(--warn-bg);border-left-color:var(--warn)}
.eco-note.visible{display:block}
.offers-head,.offer{
  display:grid;grid-template-columns:1.5fr 1.05fr 1fr auto;
  gap:22px;align-items:center;
}
.offers-head{
  font-family:var(--mono);font-size:.62rem;font-weight:400;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  padding:0 2px 12px;border-bottom:1px solid var(--line2);
}
.offer{padding:26px 2px;border-bottom:1px solid var(--line);transition:background .15s}
.offer:hover{background:var(--card)}
.offer.best{
  border-left:2px solid var(--accent);
  padding-left:20px;margin-left:-22px;
}
.reco{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  color:var(--accent);display:block;margin-bottom:5px;
}
.offer-id h3{font-weight:650;font-size:1.07rem;letter-spacing:-.015em;margin-bottom:7px}
.offer-tags{display:flex;gap:7px;flex-wrap:wrap}
.tag{
  font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.05em;
  border:1px solid var(--line2);border-radius:6px;padding:3px 8px;
  background:var(--card);color:var(--slate);
}
.tag.green{background:var(--tint);border-color:transparent;color:var(--accent-ink)}
.tag.demo{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.offer-rates{font-family:var(--mono);font-size:.75rem;color:var(--slate);display:grid;gap:5px}
.offer-rates b{font-weight:400;color:var(--ink)}
.offer-price .amount{font-weight:700;font-size:1.85rem;letter-spacing:-.03em}
.offer-price .amount span{font-family:var(--mono);font-size:.62rem;font-weight:400;color:var(--faint);letter-spacing:.08em}
.dots{display:flex;gap:5px;margin:8px 0 9px}
.dots .d{width:9px;height:9px;border-radius:99px;background:var(--line2)}
.dots .d.on{background:var(--accent)}
.offer-price .permonth{font-family:var(--mono);font-size:.68rem;color:var(--faint);letter-spacing:.04em;margin-top:3px}
.offer-cta a{
  font-weight:600;font-size:.92rem;color:var(--accent);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;transition:gap .15s,color .15s;
}
.offer-cta a:hover{color:var(--accent-ink);gap:10px;text-decoration:underline;text-underline-offset:4px}
.results-note{
  margin-top:28px;font-size:.85rem;color:var(--slate);
  border-left:2px solid var(--line2);padding:2px 0 2px 16px;max-width:74ch;
}
.results-note strong{color:var(--ink)}
.results-empty{padding:28px 2px;color:var(--slate);font-size:.95rem;border-bottom:1px solid var(--line)}
.offer .why{grid-column:1/-1;margin-top:2px}
.offer .why summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink)}
.offer .why summary::-webkit-details-marker{display:none}
.offer .why summary::before{content:"+";font-size:.95rem;line-height:1}
.offer .why[open] summary::before{content:"−"}
.offer .why p{font-size:.89rem;color:var(--slate);max-width:78ch;padding:8px 0 4px}

/* ---------- Méthode ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step{border-top:1px solid var(--line);padding-top:22px}
.step .num{
  font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.15em;
  color:var(--accent);margin-bottom:14px;display:block;
}
.step h3{font-weight:650;font-size:1.06rem;letter-spacing:-.015em;margin-bottom:9px}
.step p{font-size:.94rem;color:var(--slate)}

/* ---------- Transparence ---------- */
.transp{
  background:var(--panel);color:#fff;border:1px solid var(--panel-line);
  border-radius:18px;padding:46px 48px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;
}
.transp .lbl{color:var(--panel-text)}
.transp .lbl::before{background:var(--panel-text)}
.transp h2{font-weight:650;font-size:1.5rem;letter-spacing:-.02em;margin:13px 0 13px;line-height:1.2;color:#fff}
.transp p{color:var(--panel-text);font-size:.97rem;margin-bottom:13px}
.transp p strong{color:#fff;font-weight:600}
.transp-points{list-style:none;display:grid;gap:15px}
.transp-points li{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;color:#E2EDE6}
.transp-points svg{flex:none;margin-top:3px;color:var(--accent)}

/* ---------- Guides ---------- */
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.guide{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px;text-decoration:none;display:flex;flex-direction:column;gap:11px;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.guide:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 10px 28px rgba(16,24,20,.07)}
.guide .cat{font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.guide h3{font-weight:650;font-size:1.04rem;line-height:1.34;letter-spacing:-.015em}
.guide p{font-size:.91rem;color:var(--slate);flex:1}
.guide .read{font-weight:600;font-size:.89rem;color:var(--ink)}
.guide:hover .read{color:var(--accent-ink)}

/* ---------- FAQ ---------- */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 2px;
  font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--mono);font-weight:400;font-size:1.3rem;
  color:var(--accent);transition:transform .2s;line-height:1;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 2px 22px;color:var(--slate);font-size:.95rem;max-width:66ch}

/* ---------- CTA final ---------- */
.cta-final{text-align:center;padding:86px 0 94px}
.cta-final h2{
  font-weight:650;letter-spacing:-.028em;
  font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.12;margin-bottom:13px;
}
.cta-final h2 .serif{font-size:1.05em}
.cta-final p{color:var(--slate);font-size:1.05rem;margin-bottom:28px}

/* ---------- Footer ---------- */
footer{background:var(--panel);color:var(--panel-text);padding:56px 0 32px;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
.foot-grid .wordmark .gaz{color:#fff}
.foot-grid .wordmark .elec{color:var(--accent)}
.mark-foot .mi{stroke:#EAEBF0}
.foot-grid h4{
  font-family:var(--mono);font-size:.64rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:#6E8A7B;margin-bottom:16px;
}
.foot-grid ul{list-style:none;display:grid;gap:9px}
.foot-grid a{color:var(--panel-text);text-decoration:none}
.foot-grid a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.aff-disclosure{
  border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line);
  padding:18px 0;font-size:.81rem;line-height:1.6;color:#7E977F;color:#7E9789;
}
.aff-disclosure strong{color:var(--panel-text)}
.foot-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:.81rem}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .steps{grid-template-columns:1fr;gap:26px}
  .guides{grid-template-columns:1fr 1fr}
  .transp{grid-template-columns:1fr;padding:34px 28px}
  .offers-head{display:none}
  .offer{grid-template-columns:1fr 1fr}
  .offer-cta{grid-column:1/-1}
  .offer.best{margin-left:0;padding-left:16px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav-links{
    display:none;position:absolute;top:66px;left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 24px 14px;
  }
  .nav-links.open{display:flex}
  .nav-links li{padding:11px 0;border-bottom:1px solid var(--line)}
  .nav-links li:last-child{border:none}
  .burger{display:flex}
  .nav .btn{display:none}
  section{padding:54px 0}
  .hero{padding:52px 0 58px}
  .guides{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr;gap:14px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
}

/* ---------- Articles & pages (WordPress) ---------- */
.article{max-width:760px;margin:0 auto;padding:64px 24px 84px}
.article h1{font-weight:700;letter-spacing:-.026em;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.12;margin:14px 0 10px}
.article .meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:32px}
.article .content p{margin:0 0 18px}
.article .content h2{font-weight:650;font-size:1.4rem;letter-spacing:-.02em;margin:36px 0 12px}
.article .content h3{font-weight:650;font-size:1.12rem;margin:28px 0 10px}
.article .content ul,.article .content ol{margin:0 0 18px 22px}
.article .content li{margin-bottom:8px}
.article .content a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.article .content blockquote{font-family:var(--serif);font-style:italic;font-optical-sizing:auto;font-size:1.14rem;border-left:2px solid var(--accent);padding-left:18px;color:var(--slate);margin:0 0 20px}
.article .content img{border-radius:12px;border:1px solid var(--line);margin:8px 0 20px}
.archive-list{padding:64px 0 84px}

/* ---------- Logo personnalisé (Personnaliser → Identité du site) ---------- */
.wordmark-custom .custom-logo-link{display:flex;align-items:center}
.wordmark-custom img.custom-logo{height:28px;width:auto;display:block}