/*
Theme Name: IZNA Child
Theme URI: https://izna.group/
Description: Thème enfant Astra pour izna.group — design system IZNA Group, sections plein écran, révélation au scroll.
Author: Code-Bastion
Template: astra
Version: 1.0.0
Text Domain: izna-child
*/

/* ============================================================
   1. POLICES AUTO-HÉBERGÉES (aucun appel réseau externe)
   ============================================================ */
@font-face{font-family:'Montserrat';src:url('assets/fonts/montserrat-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('assets/fonts/montserrat-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('assets/fonts/montserrat-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Carlito';src:url('assets/fonts/carlito-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Carlito';src:url('assets/fonts/carlito-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ============================================================
   2. DESIGN TOKENS — charte IZNA Group (source GED)
   ============================================================ */
:root{
  --color-primary:#C8102E;
  --color-accent:#BC7C19;
  --color-ink:#14171A;
  --color-ink-soft:#4A5158;
  --color-surface:#FFFFFF;
  --color-surface-alt:#F5F6F7;
  --color-inverse:#0B0D0F;

  --font-display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Carlito','Calibri',system-ui,-apple-system,sans-serif;

  --step-hero:clamp(2.75rem,7.2vw,6rem);      /* 44 -> 96px */
  --step-h2:clamp(2rem,4.6vw,3.5rem);         /* 32 -> 56px */
  --step-h3:clamp(1.25rem,1.9vw,1.6rem);
  --step-body:clamp(1.0625rem,1.15vw,1.1875rem);

  --space-section:clamp(4rem,9vh,7rem);
  --measure:62ch;

  --ease:cubic-bezier(0.4,0,0.2,1);
  --dur:300ms;
  --header-h:74px;
}

/* ============================================================
   3. BASE
   ============================================================ */
body.home{font-family:var(--font-body);color:var(--color-ink);background:var(--color-surface)}
body.home .entry-content>*{margin-block:0}
body.home .site-content .ast-container{max-width:none;padding:0}
body.home .entry-header,body.home .ast-single-entry-banner{display:none}

.izna-h1,.izna-h2{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.04;margin:0}
.izna-h1{font-weight:900;font-size:var(--step-hero)}
.izna-h2{font-weight:700;font-size:var(--step-h2)}
.izna-lead{font-size:var(--step-body);line-height:1.65;color:var(--color-ink-soft);max-width:var(--measure);margin:1.5rem 0 0}
.izna-eyebrow{font-family:var(--font-display);font-weight:700;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent);margin:0 0 1.25rem}


/* Filet de sécurité : un titre ne doit jamais pouvoir déborder de son conteneur,
   quelle que soit la largeur du viewport ou la longueur du mot. */
.izna-h1,.izna-h2,.izna-card h3,.izna-eyebrow,.izna-lead{overflow-wrap:break-word;word-break:normal;hyphens:auto}
.izna-section__inner{min-width:0}
.izna-section{overflow-x:clip}

/* ============================================================
   4. SECTIONS PLEIN ÉCRAN — une idée par écran
   ============================================================ */
.izna-section{
  min-height:100svh;
  display:flex;align-items:center;
  padding:var(--space-section) clamp(1.5rem,6vw,6rem);
  position:relative;overflow:hidden;
}
.izna-section__inner{width:100%;max-width:1180px;margin:0 auto;position:relative;z-index:1}
.izna-section--alt{background:var(--color-surface-alt)}
.izna-section--dark{background:var(--color-inverse);color:#fff}
.izna-section--dark .izna-lead{color:#B9C0C7}
.izna-section--dark .izna-eyebrow{color:var(--color-accent)}

/* Hero : passe sous le header transparent */
.izna-hero{min-height:100svh;padding-top:calc(var(--header-h) + 2rem);
  background:radial-gradient(120% 90% at 12% 0%,#FFF 0%,#FCF7F2 55%,#F7EEE4 100%)}
.izna-hero__title .izna-accent{color:var(--color-primary)}
.izna-hero__rule{width:96px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));margin:2rem 0 0}

/* Visuel géométrique — CSS pur, 0 Ko réseau, aucune photo d'illustration */
.izna-glyph{position:absolute;inset:auto -10% -18% auto;width:min(52vw,620px);aspect-ratio:1;
  background:conic-gradient(from 210deg at 50% 50%,var(--color-primary) 0deg,var(--color-accent) 130deg,transparent 131deg);
  border-radius:36% 64% 58% 42%/44% 38% 62% 56%;opacity:.13;filter:blur(2px);pointer-events:none}
.izna-section--dark .izna-glyph{opacity:.3}

/* ============================================================
   5. GRILLE DES PILIERS
   ============================================================ */
.izna-grid{display:grid;gap:clamp(1.5rem,3vw,2.75rem);margin-top:clamp(2.5rem,5vh,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.izna-card{padding:clamp(1.5rem,2.4vw,2rem);background:var(--color-surface);border:1px solid rgba(20,23,26,.09);
  border-radius:14px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.izna-section--dark .izna-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
.izna-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px -22px rgba(20,23,26,.42);border-color:rgba(200,16,46,.32)}
.izna-card__n{font-family:var(--font-display);font-weight:900;font-size:1.5rem;color:var(--color-accent);display:block;margin-bottom:.85rem}
.izna-card h3{font-family:var(--font-display);font-weight:700;font-size:var(--step-h3);margin:0 0 .6rem;line-height:1.25}
.izna-card p{margin:0;font-size:1rem;line-height:1.6;color:var(--color-ink-soft)}
.izna-section--dark .izna-card p{color:#B9C0C7}

/* ============================================================
   6. BOUTON — micro-interaction
   ============================================================ */
.izna-btn{display:inline-flex;align-items:center;gap:.6rem;margin-top:2.5rem;padding:.95rem 1.9rem;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.02em;text-decoration:none;
  color:#fff;background:var(--color-primary);border-radius:999px;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.izna-btn:hover,.izna-btn:focus-visible{color:#fff;background:#A50D26;transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(200,16,46,.75)}
.izna-btn__arrow{transition:transform var(--dur) var(--ease)}
.izna-btn:hover .izna-btn__arrow{transform:translateX(4px)}
.izna-btn:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}

/* ============================================================
   7. RÉVÉLATION AU SCROLL
   Sans JS : tout est visible. Le JS ajoute .js-reveal sur <html>,
   ce qui seulement alors masque les éléments jusqu'à .is-visible.
   ============================================================ */
.js-reveal .reveal{opacity:0;transform:translateY(26px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.js-reveal .reveal.is-visible{opacity:1;transform:none}
.js-reveal .reveal-d1{transition-delay:90ms}
.js-reveal .reveal-d2{transition-delay:180ms}
.js-reveal .reveal-d3{transition-delay:270ms}

/* ============================================================
   8. HEADER — transparent en haut, opaque et flouté au scroll
   ============================================================ */
body.home #masthead{position:fixed;top:0;left:0;right:0;z-index:99;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),backdrop-filter var(--dur) var(--ease)}
body.home.izna-scrolled #masthead{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:rgba(20,23,26,.09);box-shadow:0 6px 24px -18px rgba(20,23,26,.5)}
body.home #masthead .site-title a{font-family:var(--font-display);font-weight:900;letter-spacing:-.01em;transition:color var(--dur) var(--ease)}
body.home #masthead .main-header-menu a{font-family:var(--font-display);font-weight:700;font-size:.9rem;transition:color var(--dur) var(--ease)}
/* Repli si backdrop-filter non supporté : fond opaque */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.home.izna-scrolled #masthead{background:rgba(255,255,255,.97)}
}

/* ============================================================
   9. ACCESSIBILITÉ — respect de prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
  .izna-card,.izna-btn,.izna-btn__arrow,#masthead{transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   10. MOBILE
   ============================================================ */
@media (max-width:782px){
  :root{
    --header-h:60px;
    /* Tailles recalees pour que chaque ligne composee tienne dans 390px :
       mesure faite sur les fichiers de police reels, pas estimee. */
    --step-hero:clamp(2rem,9vw,2.75rem);
    --step-h2:clamp(1.5rem,6.6vw,2rem);
  }
  .izna-section{min-height:auto;padding-block:clamp(3.5rem,12vh,5rem)}
  .izna-hero{min-height:92svh}
  .izna-glyph{width:78vw;inset:auto -28% -12% auto;opacity:.11}
  /* Les sauts de ligne sont une composition desktop. Sur mobile ils forcent des
     lignes trop longues : on laisse le texte couler naturellement. */
  .izna-h1 br,.izna-h2 br{display:none}
  .izna-eyebrow{font-size:.75rem;letter-spacing:.1em}
  .izna-card{padding:1.25rem}
}