/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* =====================================================================
   AI PUSH — Landing "Aurora nuit"  ·  à coller dans le style.css du thème enfant
   ---------------------------------------------------------------------
   Identité : fond nuit profond + signature aurora cyan→indigo→magenta,
   un seul accent (cyan), typo Space Grotesk / Inter, cartes verre,
   animations "poussées mais discrètes". Tout est scopé sous .aip-page
   pour ne PAS entrer en conflit avec Blocksy.
   Les polices sont chargées via functions.php (voir le snippet fourni).
   ===================================================================== */

/* ---- Houdini : angles animables (bordure conique de la carte Pro) ---- */
@property --aip-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* =========================== TOKENS =========================== */
.aip-page{
  /* couleurs */
  --bg:        #080B14;
  --bg-2:      #0B0F1D;
  --ink:       #EAF0F6;
  --muted:     #9AA7BC;
  --faint:     #808BA1;   /* éclairci pour le contraste AA sur petit texte */
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.14);

  /* signature aurora */
  --cyan:      #35E4FF;
  --teal:      #22E3C8;
  --indigo:    #6D6CFF;
  --magenta:   #E85CB0;
  --accent:    var(--cyan);

  /* surfaces verre */
  --glass:     linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  --glass-2:   linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));

  /* rythme */
  --wrap: 1120px;
  --radius: 20px;
  --pad-y: clamp(64px, 10vh, 132px);
  --pad-x: clamp(20px, 5vw, 48px);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ===================== BREAKOUT PLEINE LARGEUR ===================== */
/* Sort le bloc HTML de la largeur de contenu du thème et pose sa propre toile. */
.aip-page{
  position: relative;
  /* !important : bat la mise en page "constrained" de WordPress (is-layout-constrained > *)
     qui recentrerait le bloc avec margin:auto et le priverait de pleine largeur. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(109,108,255,.16), transparent 60%),
    radial-gradient(1000px 620px at 8% 4%, rgba(34,227,200,.12), transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 30%, var(--bg));
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.aip-page *{ box-sizing: border-box; }
.aip-page ::selection{ background: rgba(53,228,255,.28); color:#fff; }

/* ======================= AURORA + GRAIN (fond) ======================= */
.aip-aurora{
  position: absolute; inset: -20% -10% auto -10%;
  height: 130vh; z-index: 0; pointer-events: none;
  filter: blur(48px) saturate(1.15);
  opacity: .9;
}
.aip-aurora__ribbon{
  position: absolute; left: -20%; right: -20%; height: 42vh;
  mix-blend-mode: screen; opacity: .55; border-radius: 50%;
  transform: skewY(-8deg);
  will-change: transform;
}
.aip-aurora__ribbon.r1{ top: 2vh;  background: radial-gradient(60% 100% at 30% 50%, var(--teal), transparent 70%);  animation: aip-drift1 20s ease-in-out infinite; }
.aip-aurora__ribbon.r2{ top: 16vh; background: radial-gradient(60% 100% at 60% 50%, var(--indigo), transparent 70%); animation: aip-drift2 26s ease-in-out infinite; }
.aip-aurora__ribbon.r3{ top: 30vh; background: radial-gradient(55% 100% at 45% 50%, var(--magenta), transparent 72%); animation: aip-drift3 32s ease-in-out infinite; }

@keyframes aip-drift1{ 0%,100%{ transform: skewY(-8deg) translate3d(-4%,0,0) } 50%{ transform: skewY(-8deg) translate3d(6%,-3%,0) } }
@keyframes aip-drift2{ 0%,100%{ transform: skewY(-8deg) translate3d(4%,0,0) }  50%{ transform: skewY(-8deg) translate3d(-6%,3%,0) } }
@keyframes aip-drift3{ 0%,100%{ transform: skewY(-8deg) translate3d(0,0,0) }    50%{ transform: skewY(-8deg) translate3d(-5%,-2%,0) } }

/* grain fin */
.aip-grain{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .05; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Orbes de couleur en fond (peps discret) — CSS pur, pseudo-éléments, aucun HTML à changer.
   position:fixed → dérivent doucement derrière chaque section au scroll. ===== */
.aip-page::before, .aip-page::after{
  content:""; position:fixed; z-index:0; pointer-events:none;
  width:46vw; height:46vw; border-radius:50%; filter:blur(90px);
  mix-blend-mode:screen; opacity:.36;
}
.aip-page::before{ background: radial-gradient(circle, var(--teal), transparent 60%);   top:-6vh;  left:-6vw;  animation: aip-orb1 38s ease-in-out infinite; }
.aip-page::after{  background: radial-gradient(circle, var(--indigo), transparent 60%); bottom:-10vh; right:-8vw; animation: aip-orb2 46s ease-in-out infinite; }
@keyframes aip-orb1{ 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(28vw,34vh) } }
@keyframes aip-orb2{ 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(-26vw,-28vh) } }

/* barre de progression scroll (scroll-driven, sinon masquée) */
.aip-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0); z-index: 60;
  background: linear-gradient(90deg, var(--teal), var(--indigo) 55%, var(--magenta));
  box-shadow: 0 0 18px rgba(53,228,255,.55);
}
@supports (animation-timeline: scroll()){
  .aip-progress{ animation: aip-grow linear both; animation-timeline: scroll(root); }
  @keyframes aip-grow{ to{ transform: scaleX(1) } }
}

/* ========================= SECTIONS ========================= */
.aip-section{ position: relative; z-index: 2; padding: var(--pad-y) var(--pad-x); }
.aip-wrap{ max-width: var(--wrap); margin-inline: auto; }
.aip-wrap--narrow{ max-width: 760px; }
.aip-section + .aip-section{ padding-top: 0; }
.aip-divider{ height:1px; border:0; margin:0 auto; max-width: var(--wrap);
  background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

/* ========================= TYPO ========================= */
.aip-page h1,.aip-page h2,.aip-page h3,.aip-page h4{
  font-family: var(--font-display); font-weight: 600;
  line-height: 1.04; letter-spacing: -.02em; margin: 0;
  text-wrap: balance;
}
/* Blocksy force une couleur de titre sombre → on impose la couleur claire (sinon titres illisibles). */
.aip-page h1,.aip-page h2,.aip-page h3,.aip-page h4,.aip-page h5,.aip-page h6{ color: var(--ink) !important; }
/* protège le texte en dégradé (background-clip) contre toute couleur imposée par le thème */
.aip-page .aip-grad{ -webkit-text-fill-color: transparent; color: transparent !important; }
.aip-eyebrow{
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display); font-weight: 600;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 18px;
}
.aip-eyebrow::before{ content:""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
.aip-h1{ font-size: clamp(2.5rem, 5.6vw, 4.7rem); font-weight: 700; }
.aip-section h2{ font-size: clamp(1.9rem, 3.6vw, 3rem); }
.aip-lead{ color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.28rem); max-width: 60ch; text-wrap: pretty; }
.aip-section > .aip-wrap > .aip-lead{ margin-top: 14px; }
.aip-grad{
  background: linear-gradient(100deg, #5EEAD4 0%, #7DD3FC 42%, #A5B4FC 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: aip-shimmer 8s ease-in-out infinite;
}
@keyframes aip-shimmer{ 0%,100%{ background-position: 0% 50% } 50%{ background-position: 100% 50% } }
.aip-fine{ color: var(--faint); font-size: .92rem; }
.aip-src{ color: var(--faint); font-size: .8rem; letter-spacing:.01em; }

/* ========================= BOUTONS ========================= */
.aip-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 32px; }
.aip-page .aip-btn{
  --gap: 0;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 15px 26px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s, background .25s;
  will-change: transform;
}
.aip-page .aip-btn--primary{
  color:#04121A;
  background: linear-gradient(135deg, var(--cyan), var(--indigo) 92%);
  box-shadow: 0 8px 30px rgba(53,228,255,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.aip-page .aip-btn--primary:hover{ box-shadow: 0 12px 44px rgba(53,228,255,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.aip-page .aip-btn--ghost{
  color: var(--ink);
  background: rgba(255,255,255,.03);
  border-color: var(--line-2);
  backdrop-filter: blur(6px);
}
.aip-page .aip-btn--ghost:hover{ border-color: var(--teal); color:#fff; background: rgba(53,228,255,.06); }
.aip-page .aip-btn:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; }
/* Focus visible global (liens, switch tarifs, FAQ) */
.aip-page a:focus-visible,
.aip-page button:focus-visible,
.aip-page summary:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }

/* ========================= HERO ========================= */
.aip-hero{ padding-top: clamp(84px, 13vh, 168px); }
.aip-hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,64px); align-items:center; }
/* Garde-fou wpautop : WordPress peut injecter des <p> vides entre les blocs.
   Idéalement neutralisé côté PHP (voir functions.php), mais on sécurise aussi la grille hero. */
.aip-hero-grid > p{ display:none !important; }
/* placement explicite (garde-fou wpautop) UNIQUEMENT en desktop —
   sinon il force une 2e colonne sur mobile et provoque un débordement. */
@media (min-width: 941px){
  .aip-hero-grid > .aip-hero-copy{ grid-column:1; grid-row:1; }
  .aip-hero-grid > .aip-hero-visual{ grid-column:2; grid-row:1; }
}
.aip-page p:empty{ display:none; }
.aip-badge{
  display:inline-flex; align-items:center; gap:.55em;
  padding: 7px 14px; border-radius:999px; font-size:.82rem; font-weight:500;
  color: var(--ink); background: rgba(255,255,255,.045);
  border:1px solid var(--line-2); backdrop-filter: blur(6px);
}
.aip-badge::before{ content:""; width:7px; height:7px; border-radius:50%;
  background: var(--teal); box-shadow:0 0 0 0 rgba(34,227,200,.6); animation: aip-pulse 2.4s infinite; }
@keyframes aip-pulse{ 0%{box-shadow:0 0 0 0 rgba(34,227,200,.55)} 70%{box-shadow:0 0 0 9px rgba(34,227,200,0)} 100%{box-shadow:0 0 0 0 rgba(34,227,200,0)} }
.aip-hero .aip-h1{ margin: 20px 0 0; }
.aip-hero .aip-lead{ margin: 22px 0 0; }
.aip-hero .aip-fine{ margin-top: 18px; }

/* Mock produit "verre" dans le hero */
.aip-hero-visual{
  position: relative; border-radius: 22px; padding: 18px;
  background: var(--glass-2); border:1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(16px) saturate(1.2);
}
.aip-hero-visual::before{
  content:""; position:absolute; inset:0; border-radius:22px; padding:1px;
  background: linear-gradient(135deg, rgba(53,228,255,.5), transparent 40%, rgba(232,92,176,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.aip-mock-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.aip-mock-dot{ width:10px;height:10px;border-radius:50%; background: var(--line-2); }
.aip-mock-title{ margin-left:6px; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--muted); }
.aip-mock-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 10px;
  background: rgba(255,255,255,.035); border:1px solid var(--line);
}
.aip-mock-q{ font-size:.92rem; color: var(--ink); }
.aip-chip{ font-family:var(--font-display); font-weight:600; font-size:.74rem; letter-spacing:.02em;
  padding: 4px 10px; border-radius:999px; white-space:nowrap; }
.aip-chip--yes{ color:#04121A; background: linear-gradient(135deg,var(--teal),var(--cyan)); }
.aip-chip--no{ color: var(--muted); background: rgba(255,255,255,.06); border:1px solid var(--line); }
.aip-mock-bar{ height:6px; border-radius:999px; background: rgba(255,255,255,.07); overflow:hidden; margin-top:2px; }
.aip-mock-bar > i{ display:block; height:100%; border-radius:999px;
  background: linear-gradient(90deg,var(--teal),var(--indigo)); }

/* ========================= STATS (pourquoi) ========================= */
.aip-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; }
.aip-stat{
  padding: 30px 26px; border-radius: var(--radius);
  background: var(--glass); border:1px solid var(--line);
  backdrop-filter: blur(12px); position:relative; overflow:hidden;
}
.aip-stat__num{ font-family:var(--font-display); font-weight:700; font-size: clamp(2.6rem,4.6vw,3.6rem); line-height:1; }
.aip-stat p{ margin:.5em 0 0; color: var(--muted); }
.aip-stat .aip-src{ margin-top: 12px; }

/* ========================= PILIERS (produit) ========================= */
.aip-pillars{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.aip-pillar{
  padding: 32px; border-radius: var(--radius);
  background: var(--glass); border:1px solid var(--line);
  backdrop-filter: blur(12px); position:relative; overflow:hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.aip-pillar:hover{ transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.aip-pillar--pro{ background: var(--glass-2); }
.aip-pillar--pro::after{
  content:""; position:absolute; inset:0; border-radius: var(--radius); padding:1px;
  background: linear-gradient(135deg, rgba(53,228,255,.55), rgba(109,108,255,.2) 60%, rgba(232,92,176,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.aip-tag{
  display:inline-block; font-family:var(--font-display); font-weight:600;
  font-size:.78rem; letter-spacing:.06em; padding:5px 12px; border-radius:999px;
  color: var(--teal); background: rgba(34,227,200,.1); border:1px solid rgba(34,227,200,.28);
  margin-bottom:16px;
}
.aip-pillar--pro .aip-tag{ color: var(--cyan); background: rgba(53,228,255,.12); border-color: rgba(53,228,255,.32); }
.aip-pillar h3{ font-size: 1.35rem; margin-bottom: 16px; }
.aip-list{ list-style:none; margin:0; padding:0; }
.aip-list li{ position:relative; padding: 11px 0 11px 30px; border-top:1px solid var(--line); color: var(--muted); }
.aip-list li:first-child{ border-top:0; }
.aip-list li strong{ color: var(--ink); font-weight:600; }
.aip-list li::before{
  content:""; position:absolute; left:2px; top:16px; width:15px; height:15px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335E4FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ========================= MIROIR (gratuit → pro) ========================= */
.aip-mirror{ }
.aip-qs{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; }
.aip-q{
  padding: 30px 26px; border-radius: var(--radius);
  background: var(--glass); border:1px solid var(--line); backdrop-filter: blur(12px);
  transition: transform .3s, border-color .3s;
}
.aip-q:hover{ transform: translateY(-4px); border-color: var(--line-2); }
.aip-q__n{ font-family:var(--font-display); font-weight:700; font-size: 1rem;
  color: var(--teal); letter-spacing:.1em; margin:0 0 14px; }
.aip-q h4{ font-size: 1.2rem; margin-bottom: 10px; }
.aip-q p{ margin:0; color: var(--muted); }

/* ========================= TARIFS ========================= */
/* En-tête tarifs centré */
.aip-pricing > .aip-wrap{ text-align: center; }
.aip-pricing .aip-lead{ margin-left: auto; margin-right: auto; }

/* Switch mensuel / annuel — 100 % CSS (radios + :has), fonctionne sans JS */
.aip-billing-row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin-top: 28px; }
.aip-billing{
  position:relative; display:inline-flex; align-items:center; padding:5px; border-radius:999px;
  background: rgba(255,255,255,.045); border:1px solid var(--line-2);
}
.aip-billing__in{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.aip-billing label{
  position:relative; z-index:2; cursor:pointer; margin:0 !important;   /* reset la marge que Blocksy met sur les <label> (décalait le texte) */
  flex:1 1 0; min-width:104px;                                /* demi-largeurs égales → la pilule s'aligne pile */
  display:inline-flex; align-items:center; justify-content:center; line-height:1;  /* centrage vertical parfait */
  font-family:var(--font-display); font-weight:600; font-size:.95rem; color: var(--muted);
  padding: 11px 20px; border-radius:999px; transition: color .25s; user-select:none;
}
.aip-billing__pill{
  position:absolute; z-index:1; top:5px; bottom:5px; left:5px; width:calc(50% - 5px);
  border-radius:999px; background: linear-gradient(135deg,var(--cyan),var(--indigo));
  box-shadow:0 6px 18px rgba(53,228,255,.35);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.aip-billing:has(#aip-bill-annual:checked)  .aip-billing__pill{ transform: translateX(100%); }
.aip-billing:has(#aip-bill-monthly:checked) .aip-billing__pill{ transform: none; }
#aip-bill-monthly:checked ~ label[for="aip-bill-monthly"],
#aip-bill-annual:checked  ~ label[for="aip-bill-annual"]{ color:#04121A; }
.aip-billing__in:focus-visible ~ label[for="aip-bill-monthly"],
.aip-billing__in:focus-visible ~ label[for="aip-bill-annual"]{ outline:2px solid var(--cyan); outline-offset:3px; }
.aip-save{
  display:none; align-items:center; gap:.4em;
  font-size:.85rem; font-weight:600; color: var(--teal);
  padding:6px 12px; border-radius:999px; background: rgba(34,227,200,.1); border:1px solid rgba(34,227,200,.28);
}
/* n'affiche « ~4 mois offerts » QUE sur l'annuel (là où c'est vrai) */
.aip-billing-row:has(#aip-bill-annual:checked) .aip-save{ display:inline-flex; }
.aip-plans{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 36px; align-items:stretch; text-align:left; }
.aip-plan{
  display:flex; flex-direction:column; padding: 32px 28px; border-radius: var(--radius);
  background: var(--glass); border:1px solid var(--line); backdrop-filter: blur(12px);
}
.aip-plan--featured{
  background: var(--glass-2); position:relative; overflow:hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.aip-plan--featured::before{
  content:""; position:absolute; inset:0; border-radius: var(--radius); padding:1.5px;
  background: conic-gradient(from var(--aip-angle), var(--teal), var(--indigo), var(--magenta), var(--teal));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
  animation: aip-rotate 6s linear infinite;
}
@keyframes aip-rotate{ to{ --aip-angle: 360deg; } }
.aip-plan__badge{
  position:absolute; top:16px; right:16px; font-family:var(--font-display); font-weight:600;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#04121A;
  padding:5px 11px; border-radius:999px; background: linear-gradient(135deg,var(--teal),var(--cyan));
}
.aip-plan__name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color: var(--muted); margin:0; }
.aip-price{ font-family:var(--font-display); font-weight:700; font-size: 2.6rem; line-height:1.05; margin:12px 0 2px; }
.aip-price small{ font-size: .95rem; font-weight:500; color: var(--muted); }
.aip-price--monthly{ display:none; }
.aip-pricing:has(#aip-bill-monthly:checked) .aip-price--annual{ display:none; }
.aip-pricing:has(#aip-bill-monthly:checked) .aip-price--monthly{ display:block; }
.aip-plan__desc{ color: var(--muted); font-size:.98rem; margin: 6px 0 20px; }
.aip-plan .aip-list{ margin-bottom: 24px; }
.aip-plan .aip-btn{ margin-top:auto; width:100%; }

/* ========================= PREUVES ========================= */
.aip-proof{ display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top:44px; }
.aip-pf{
  padding: 28px; border-radius: var(--radius);
  background: var(--glass); border:1px solid var(--line); backdrop-filter: blur(12px);
}
.aip-pf p{ margin:0; }
.aip-pf p strong{ color:#fff; }
.aip-pf .aip-src{ margin-top: 14px; display:block; }

/* ========================= FAQ ========================= */
.aip-faq .aip-acc{
  border:1px solid var(--line); border-radius: 14px; margin-top: 12px; overflow:hidden;
  background: rgba(255,255,255,.02); transition: border-color .25s, background .25s;
}
.aip-faq .aip-acc[open]{ border-color: var(--line-2); background: rgba(255,255,255,.035); }
.aip-faq summary{
  cursor:pointer; list-style:none; padding: 18px 22px; font-family:var(--font-display);
  font-weight:600; font-size:1.06rem; color: var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.aip-faq summary::-webkit-details-marker{ display:none; }
.aip-faq summary::after{ content:"+"; font-weight:400; font-size:1.5rem; color: var(--teal); transition: transform .3s; }
.aip-faq .aip-acc[open] summary::after{ transform: rotate(45deg); }
.aip-faq .aip-acc p{ margin:0; padding: 0 22px 20px; color: var(--muted); }

/* ========================= CTA FINAL ========================= */
.aip-final .aip-wrap{ text-align:center; }
.aip-final h2{ font-size: clamp(2rem,4vw,3.2rem); }
.aip-final .aip-lead{ margin: 18px auto 0; }
.aip-final .aip-cta-row{ justify-content:center; }
.aip-disc{
  margin: 40px auto 0; max-width: 720px; font-size:.9rem; color: var(--faint);
  padding: 20px 24px; border-radius:16px; background: rgba(255,255,255,.025); border:1px solid var(--line);
  text-align:left; line-height:1.6;
}
.aip-disc strong{ color: var(--muted); }

/* ========================= REVEAL (entrée au chargement, CSS pur) =========================
   Le contenu est VISIBLE par défaut. On ajoute une entrée en fondu montant AU CHARGEMENT
   (time-based). On n'utilise PAS animation-timeline: view() : les timelines de scroll
   laissent le contenu situé au-dessus de la ligne de flottaison bloqué en état caché.
   Aucune dépendance JS ; neutralisé si "réduire les animations". */
@media (prefers-reduced-motion: no-preference){
  .aip-reveal{ animation: aip-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes aip-rise{
    from{ opacity:0; transform: translateY(22px); filter: blur(6px); }
    to{   opacity:1; transform: none;            filter: none; }
  }
  .aip-reveal[data-d="1"]{ animation-delay:.10s }
  .aip-reveal[data-d="2"]{ animation-delay:.18s }
  .aip-reveal[data-d="3"]{ animation-delay:.26s }
  .aip-reveal[data-d="4"]{ animation-delay:.34s }
}

/* ========================= RESPONSIVE ========================= */
@media (max-width: 940px){
  .aip-hero-grid{ grid-template-columns: 1fr; }
  .aip-pillars{ grid-template-columns: 1fr; }
  .aip-stats,.aip-qs,.aip-plans,.aip-proof{ grid-template-columns: 1fr; }
  .aip-plan--featured{ transform:none; }
}
@media (max-width: 560px){
  .aip-page{ font-size: 16px; }
  .aip-section{ padding-left: 20px; padding-right: 20px; }
  .aip-cta-row .aip-btn{ width:100%; }
  .aip-save{ margin: 10px 0 0; }
}

/* ========================= REDUCED MOTION ========================= */
@media (prefers-reduced-motion: reduce){
  .aip-page *{ animation: none !important; transition: none !important; }
  .aip-page::before, .aip-page::after{ animation: none !important; }
  .aip-reveal{ opacity:1; transform:none; filter:none; }
  .aip-aurora{ opacity:.6; }
}

/* ============ FALLBACK PLEINE LARGEUR (thème Blocksy) ============
   MEILLEURE MÉTHODE : régler la page en « Pleine largeur / Content — Fullwidth »
   dans les options Blocksy de la page (voir le guide). Ce bloc est un filet de
   sécurité qui neutralise le conteneur du thème UNIQUEMENT autour de notre bloc. */
.entry-content:has(.aip-page),
.ct-container:has(.aip-page),
.entry-content-wrapper:has(.aip-page){
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}