/* =========================================================
   ECRAN THEME — sections de la home (pattern Gutenberg)
   Classes préfixées eth- ; s'appuie sur les tokens :root
   définis dans style.css du thème.
   ========================================================= */

/* Masquer le titre de page WordPress sur la page d'accueil statique
   (le hero du pattern porte son propre H1). */
.home.page .entry-header{display:none}

/* ---------- hero ---------- */
.eth-hero{position:relative;padding:76px 0 40px;text-align:center;overflow:hidden}
.eth-hero::before{content:"";position:absolute;inset:-30% 0 auto 0;height:620px;
  background:radial-gradient(60% 70% at 50% 0%,rgba(55,229,220,.18),transparent 60%),
             radial-gradient(50% 60% at 72% 15%,rgba(139,123,255,.16),transparent 60%);
  filter:blur(6px);pointer-events:none}
.eth-eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:22px}
.eth-eyebrow span{color:var(--muted-2)}
.eth-hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  line-height:1.02;font-size:clamp(44px,8vw,84px);position:relative;display:inline-block;
  margin:0;padding:0 0 26px}
/* arc incurvé rendu en CSS (le bloc heading natif ne porte pas de SVG inline) */
.eth-hero h1::after{content:"";position:absolute;left:-4%;bottom:0;width:108%;height:40px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M4 30 Q200 4 396 30' stroke='%2337E5DC' stroke-width='9' stroke-linecap='round' opacity='0.18'/%3E%3Cpath d='M4 30 Q200 4 396 30' stroke='%2337E5DC' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  pointer-events:none}
/* compat : si un SVG .eth-arc est déjà présent dans le H1 (ancien pattern), pas de doublon */
.eth-hero h1:has(.eth-arc)::after{content:none}
.eth-hero .eth-arc{position:absolute;left:-4%;right:-4%;bottom:-18px;height:40px;
  width:108%;overflow:visible;pointer-events:none}
.eth-lead{max-width:560px;margin:38px auto 0;color:var(--muted);font-size:18px}
.eth-lead b,.eth-lead strong{color:var(--text);font-weight:600}

/* routeur par diagonale */
.eth-router{margin:52px auto 8px;max-width:760px}
.eth-router-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:20px}
.eth-sizes{display:flex;justify-content:center;align-items:flex-end;gap:10px;flex-wrap:wrap}
.eth-size{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 8px 12px;min-width:104px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--ink-2));transition:.25s;color:var(--text)}
.eth-size:nth-child(1),.eth-size:nth-child(5){transform:translateY(16px)}
.eth-size:nth-child(2),.eth-size:nth-child(4){transform:translateY(5px)}
.eth-size:hover{border-color:var(--cyan);transform:translateY(-2px);
  box-shadow:0 12px 30px -12px rgba(55,229,220,.4);color:var(--text)}
.eth-size .eth-glyph{color:var(--muted)}
.eth-size:hover .eth-glyph{color:var(--cyan)}
.eth-size .eth-n{font-family:var(--font-display);font-weight:600;font-size:19px}
.eth-size .eth-fmt{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.04em}
@media(max-width:680px){.eth-sizes{gap:8px}.eth-size{min-width:0;flex:1 1 28%;transform:none!important}}

/* ---------- coquille de section ---------- */
.eth-section{padding:70px 0}
.eth-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px}
.eth-sec-head .eth-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan-dim)}
.eth-sec-head h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(26px,4vw,36px);margin:10px 0 0;padding:0;border:0}
.eth-sec-head h2::before{content:none}     /* pas du "//" du thème ici, le .eth-k s'en charge */
.eth-sec-head p{color:var(--muted);max-width:420px;font-size:15px;margin:0}
@media(max-width:680px){.eth-sec-head{flex-direction:column;align-items:flex-start}}

/* ---------- produits vedettes ---------- */
.eth-stars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.eth-stars{grid-template-columns:1fr}}
.eth-card{position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);padding:24px;display:flex;flex-direction:column;transition:.3s}
.eth-card:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--shadow)}
.eth-card.eth-feature{border-color:rgba(245,197,91,.35)}
.eth-card.eth-feature:hover{border-color:var(--gold)}
.eth-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:99px;margin-bottom:20px}
.eth-badge.eth-top{background:rgba(245,197,91,.14);color:var(--gold);border:1px solid rgba(245,197,91,.3)}
.eth-badge.eth-value{background:rgba(55,229,220,.12);color:var(--cyan);border:1px solid rgba(55,229,220,.28)}
.eth-badge.eth-budget{background:rgba(139,123,255,.14);color:var(--violet);border:1px solid rgba(139,123,255,.3)}
.eth-screen{width:100%;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.eth-card h3{font-family:var(--font-display);font-weight:600;font-size:20px;
  letter-spacing:-.01em;margin:0 0 4px;padding:0}
.eth-card .eth-sub{color:var(--muted);font-size:14px;margin-bottom:18px}
.eth-specs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.eth-spec{font-family:var(--font-mono);font-size:11.5px;color:var(--text);background:var(--ink-2);
  border:1px solid var(--line);border-radius:7px;padding:5px 9px}
.eth-card .eth-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
.eth-score{display:flex;align-items:baseline;gap:5px;font-family:var(--font-display)}
.eth-score .eth-v{font-size:26px;font-weight:700}
.eth-score .eth-m{font-size:13px;color:var(--muted-2)}
.eth-score .eth-lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);display:block;margin-top:-2px}
.eth-cta{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
  padding:11px 17px;border-radius:11px;background:var(--cyan);color:#04211F!important;
  transition:.2s;white-space:nowrap}
.eth-cta:hover{box-shadow:0 8px 24px -8px rgba(55,229,220,.6);transform:translateY(-1px)}
.eth-cta.eth-ghost{background:transparent;color:var(--cyan)!important;border:1px solid var(--line-2)}
.eth-cta.eth-ghost:hover{border-color:var(--cyan);box-shadow:none}

/* ---------- piliers par taille ---------- */
.eth-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.eth-pillars{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.eth-pillars{grid-template-columns:1fr}}
.eth-pill{border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  padding:22px;display:flex;flex-direction:column;gap:14px;transition:.28s;
  position:relative;overflow:hidden;color:var(--text)}
.eth-pill::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;
  border-radius:50%;background:radial-gradient(circle,rgba(55,229,220,.10),transparent 70%);
  opacity:0;transition:.3s}
.eth-pill:hover{border-color:var(--cyan);transform:translateY(-3px);color:var(--text)}
.eth-pill:hover::after{opacity:1}
.eth-pill .eth-top-row{display:flex;align-items:center;justify-content:space-between}
.eth-pill .eth-size-n{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.02em}
.eth-pill .eth-size-n em{font-style:normal;font-size:15px;color:var(--muted);font-weight:500}
.eth-pill .eth-glyph{color:var(--muted-2);transition:.28s}
.eth-pill:hover .eth-glyph{color:var(--cyan)}
.eth-pill .eth-role{font-family:var(--font-display);font-weight:600;font-size:16px}
.eth-pill .eth-def{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--cyan);text-transform:uppercase}
.eth-pill .eth-who{color:var(--muted);font-size:13.5px;flex:1;margin:0}
.eth-pill .eth-go{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text)}
.eth-pill:hover .eth-go{color:var(--cyan)}
.eth-pill .eth-go svg{transition:.28s}
.eth-pill:hover .eth-go svg{transform:translateX(4px)}
.eth-pill.eth-pill-help{justify-content:center;align-items:center;text-align:center;border-style:dashed}
.eth-pill.eth-pill-help .eth-who{flex:none}

/* ---------- bandeau repères ---------- */
.eth-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2)}
.eth-strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:44px 0}
@media(max-width:760px){.eth-strip-grid{grid-template-columns:1fr;gap:26px}}
.eth-fact h4{font-family:var(--font-display);font-weight:600;font-size:16px;
  margin:0 0 7px;padding:0;display:flex;align-items:center;gap:9px}
.eth-fact h4 .eth-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none}
.eth-fact p{color:var(--muted);font-size:14px;margin:0}

/* =========================================================
   ADAPTATIONS BLOCS GUTENBERG NATIFS
   (les sections sont composées de core/group, heading,
   paragraph, buttons — quelques wp:html pour les SVG)
   ========================================================= */
/* Marges : reprendre la main sur .entry-content p du thème */
.entry-content .eth-eyebrow{margin:0 0 22px}
.entry-content .eth-lead{margin:38px auto 0}
.entry-content .eth-sec-head p{margin:0}
.entry-content .eth-badge{margin:0 0 20px}
.entry-content .eth-sub{margin:0 0 18px}
.entry-content .eth-who{margin:0}
.entry-content .eth-fact p{margin:0}

/* Pastille des repères en ::before (plus de span décoratif à maintenir) */
.eth-fact h4::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--cyan);flex:none}
.eth-fact h4 .eth-dot{display:none}        /* compat ancien markup */

/* Boutons natifs (core/button) dans le pied des cartes */
.eth-foot .wp-block-buttons,.eth-foot .wp-block-button{margin:0}
.eth-foot .wp-block-button__link{padding:11px 17px;font-size:14px;white-space:nowrap}

/* fox-blocks/link-cards « eth-linkcards » — routage par taille aux
   couleurs du thème. Sélecteurs souples : ajuster au markup réel
   du plugin si besoin. */
.entry-content .eth-linkcards{background:transparent;border:0;padding:0;margin:1.4em 0 0}
.eth-linkcards a{color:var(--text);text-decoration:none}
.eth-linkcards a:hover{color:var(--cyan)}
.eth-linkcards h3,.eth-linkcards h4{font-family:var(--font-display);font-weight:600;
  font-size:17px;letter-spacing:-.01em;margin:0 0 6px;padding:0;border:0}
.eth-linkcards h3::before,.eth-linkcards h4::before{content:none}
.eth-linkcards p{color:var(--muted);font-size:13.5px;margin:0 0 10px}
.eth-linkcards [class*="card"],
.eth-linkcards li,
.eth-linkcards article{
  background:linear-gradient(180deg,var(--panel),var(--ink-2));
  border:1px solid var(--line);border-radius:var(--r);
  padding:22px;transition:border-color .28s,transform .28s;
}
.eth-linkcards [class*="card"]:hover,
.eth-linkcards li:hover,
.eth-linkcards article:hover{border-color:var(--cyan);transform:translateY(-3px)}
/* cible en attente (requireExisting) : texte simple discret */
.eth-linkcards .fxb-smartlink--inline:not([href]){color:var(--muted)}

/* ---------- reveal au scroll ---------- */
.eth-reveal{opacity:0;transform:translateY(18px)}
.eth-reveal.eth-in{opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  .eth-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .eth-size,.eth-card,.eth-pill,.eth-cta{transition:none!important}
}
/* Sans JS (ou dans l'éditeur), tout reste visible */
.no-js .eth-reveal,.block-editor-block-list__layout .eth-reveal{opacity:1;transform:none}