/* =========================================================
   parent.css — Styles de l’espace Parent (scopés)
   IMPORTANT : ne touche PAS aux styles du header/footer.
   À charger APRES main.css. Tout est sous .parent-area.
   ========================================================= */

/* ---------- Variables thème (globales mais inoffensives) ---------- */
:root {
  --parent-ink:        #0f172a;
  --parent-muted:      #475569;
  --parent-border:     #e5e7eb;
  --parent-bg:         #ffffff;
  --parent-bg-subtle:  #f8fafc;
  --parent-accent:     #2563eb;
  --parent-accent-2:   #1d4ed8;
  --parent-ok:         #10b981;
  --parent-warn:       #f59e0b;
  --parent-err:        #ef4444;
  --parent-radius:     16px;
  --parent-shadow:     0 4px 10px rgba(15, 23, 42, 0.06);
  --parent-shadow-lg:  0 16px 40px rgba(37, 99, 235, 0.12);
}

/* =========================================================
   Contexte parent (scopé)
   ========================================================= */
.parent-area {
  color: var(--parent-ink);
}
.parent-area * {
  box-sizing: border-box;
}

/* Séparateur visuel sous le header (sans toucher au header) */
.parent-area::before {
  content: "";
  display: block;
  height: 10px;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.06), rgba(2, 6, 23, 0));
}

/* Wrap + en-tête */
.parent-area .wrap {
  max-width: 1100px;
  margin: 22px auto;
  padding: 0 12px;
}
.parent-area .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.parent-area .title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--parent-ink);
}
.parent-area .muted {
  color: var(--parent-muted);
}

/* Grilles & cartes */
.parent-area .grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}
@media (max-width: 920px) {
  .parent-area .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .parent-area .grid {
    grid-template-columns: 1fr;
  }
}

.parent-area .card {
  background: var(--parent-bg);
  border: 1px solid var(--parent-border);
  border-radius: var(--parent-radius);
  padding: 12px;
  box-shadow: var(--parent-shadow);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.parent-area .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--parent-shadow-lg);
  border-color: rgba(37, 99, 235, 0.22);
}

/* États & notices */
.parent-area .empty,
.parent-area .notice {
  border: 1px solid var(--parent-border);
  border-radius: var(--parent-radius);
  padding: 14px;
  background: var(--parent-bg);
}
.parent-area .notice.ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.parent-area .notice.err {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}
.parent-area .warn {
  background: #fff7e6;
  border: 1px solid #ffd9a8;
  color: #7a4b00;
  border-radius: var(--parent-radius);
  padding: 10px;
}

/* Boutons */
.parent-area .btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--parent-border);
  background: #ffffff;
  color: var(--parent-ink);
  font-weight: 700;
  font-size: 0.95rem;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;
}
.parent-area .btn:hover {
  background: #f9fafb;
}
.parent-area .btn:active {
  transform: translateY(1px);
}

.parent-area .btn.primary {
  background: var(--parent-accent);
  border-color: var(--parent-accent);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}
.parent-area .btn.primary:hover {
  background: var(--parent-accent-2);
  border-color: var(--parent-accent-2);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.32);
}

.parent-area .btn.ghost {
  background: transparent;
}

.parent-area .btn.warn {
  background: #fef3c7;
  border-color: #fde68a;
  color: #7a4b00;
}

.parent-area .btn[disabled],
.parent-area button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Focus accessible (scopé) */
.parent-area .btn:focus-visible,
.parent-area a:focus-visible,
.parent-area input:focus-visible,
.parent-area select:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.25);
  outline-offset: 2px;
}

/* Lignes & formulaires */
.parent-area .row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.parent-area .row > * {
  flex: 1 1 220px;
}

.parent-area form {
  background: var(--parent-bg);
  border: 1px solid var(--parent-border);
  border-radius: var(--parent-radius);
  padding: 14px;
}
.parent-area label {
  display: block;
  font-weight: 700;
  margin: 0.4rem 0 0.2rem;
  color: var(--parent-ink);
}
.parent-area input[type="text"],
.parent-area input[type="email"],
.parent-area input[type="password"],
.parent-area input[type="date"],
.parent-area select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--parent-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--parent-ink);
  font: inherit;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.parent-area input:focus,
.parent-area select:focus {
  border-color: var(--parent-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Bandeau “mode enfant” */
.parent-area .acting-banner {
  background: #fff7e6;
  border: 1px solid #ffd9a8;
  color: #7a4b00;
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 12px;
  border-radius: 10px;
  font-size: 0.95rem;
}
.parent-area .acting-banner a {
  color: #7a4b00;
  text-decoration: underline;
}

/* KPIs (child_stats) */
.parent-area .kpi .v {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--parent-ink);
}
.parent-area .kpi .l {
  font-size: 0.95rem;
  color: var(--parent-muted);
}

/* Mini chart 14 jours (CSS only) */
.parent-area .chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding: 10px;
  border: 1px solid var(--parent-border);
  border-radius: var(--parent-radius);
  background: #ffffff;
}
.parent-area .bar {
  flex: 1;
  background: rgba(37, 99, 235, 0.13);
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 6px;
  position: relative;
}
.parent-area .bar span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  font-size: 0.78rem;
  color: var(--parent-muted);
}
.parent-area .days {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--parent-muted);
  margin-top: 6px;
}

/* Tableaux & Pills */
.parent-area table {
  width: 100%;
  border-collapse: collapse;
}
.parent-area th,
.parent-area td {
  padding: 10px;
  border-bottom: 1px solid var(--parent-border);
  text-align: left;
  font-size: 0.95rem;
}
.parent-area th {
  font-size: 0.92rem;
  color: var(--parent-muted);
  font-weight: 700;
}
.parent-area tr:hover td {
  background: #fcfdff;
}

.parent-area .pill {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--parent-border);
  font-size: 0.82rem;
  color: var(--parent-ink);
  background: #ffffff;
}
.parent-area .pill.ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.parent-area .pill.err {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}
.parent-area .pill.warn {
  background: #fef3c7;
  border-color: #fde68a;
  color: #7a4b00;
}

/* Cartes enfant (listing) */
.parent-area .child-card__name {
  font-weight: 800;
  color: var(--parent-ink);
}
.parent-area .child-card__meta {
  color: var(--parent-muted);
  font-size: 0.95rem;
}

/* Pages d’état (accept_invite) */
.parent-area .state-card {
  max-width: 820px;
  margin: 32px auto;
}
.parent-area .state-card h1 {
  margin: 0 0 8px;
  font-size: 1.3rem;
}
.parent-area .state-card .cta {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Utilitaires */
.parent-area .space-top {
  margin-top: 12px;
}
.parent-area .space-bottom {
  margin-bottom: 12px;
}
.parent-area .center {
  text-align: center;
}

/* Responsive fin */
@media (max-width: 420px) {
  .parent-area .btn {
    width: 100%;
    text-align: center;
  }
  .parent-area .row {
    gap: 6px;
  }
  .parent-area .card {
    padding: 10px;
  }
}

























.parent-page{
  background:#fff;
}

/* ===== Header ===== */
.parent-header{
  position:relative;
  overflow:hidden;
}

.parent-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.4rem .9rem;
  margin-bottom:1rem;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
  font-size:.85rem;
  font-weight:700;
}

.parent-hero-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:1.5rem;
}

.parent-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  padding:.7rem 1.4rem;
  border-radius:999px;
  font-size:.95rem;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid #cbd5e1;
  background:#ffffff;
  color:#0f172a;
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}

.parent-btn-secondary:hover{
  background:#eff6ff;
  border-color:#93c5fd;
  color:#1d4ed8;
  transform:translateY(-1px);
  box-shadow:0 16px 40px rgba(37,99,235,.10);
}

.parent-quick-points{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:2rem;
}

.parent-quick-point{
  background:rgba(255,255,255,.92);
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:.9rem 1rem;
  font-weight:600;
  color:#1f2937;
  box-shadow:0 10px 25px rgba(15,23,42,.04);
}

/* ===== Sections ===== */
.parent-section{
  padding:72px 0;
}

.parent-section-alt{
  background:#f8fbff;
  border-top:1px solid #eef2f7;
  border-bottom:1px solid #eef2f7;
}

.parent-section-heading{
  max-width:800px;
  margin:0 auto 2.5rem;
  text-align:center;
}

.parent-kicker{
  display:inline-block;
  margin-bottom:.65rem;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#2563eb;
}

.parent-section-heading h2{
  font-size:clamp(1.7rem, 2.6vw, 2.4rem);
  line-height:1.2;
  color:#020617;
  margin-bottom:.8rem;
}

.parent-section-heading p{
  font-size:1rem;
  color:#64748b;
}

/* ===== Intro ===== */
.parent-intro-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.parent-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:1.4rem;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.parent-card-icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#eff6ff;
  font-size:1.4rem;
  margin-bottom:1rem;
}

.parent-card h3{
  font-size:1.1rem;
  color:#0f172a;
  margin-bottom:.45rem;
}

.parent-card p{
  color:#64748b;
  font-size:.96rem;
}

/* ===== Bloc famille ===== */
.parent-family-highlight{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
  background:linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
  border:1px solid #dbeafe;
  border-radius:24px;
  padding:1.5rem;
  box-shadow:0 18px 40px rgba(37,99,235,.08);
}

.parent-family-content h3{
  font-size:1.35rem;
  color:#020617;
  margin-bottom:.75rem;
}

.parent-family-content p{
  color:#64748b;
  margin-bottom:.9rem;
}

.parent-family-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:1rem;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
  text-align:center;
}

.parent-family-count{
  font-size:1.05rem;
  font-weight:800;
  color:#0f172a;
}

.parent-family-arrow{
  font-size:1.4rem;
  color:#2563eb;
  margin:.5rem 0;
}

.parent-family-children{
  display:grid;
  grid-template-columns:1fr;
  gap:.45rem;
}

.parent-family-children span{
  display:block;
  padding:.55rem .7rem;
  border-radius:12px;
  background:#eff6ff;
  color:#1d4ed8;
  font-weight:700;
  border:1px solid #dbeafe;
}

/* ===== Values ===== */
.parent-values-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.parent-value-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:1.2rem;
}

.parent-value-card h3{
  color:#0f172a;
  margin-bottom:.45rem;
}

.parent-value-card p{
  color:#64748b;
}

/* ===== Features ===== */
.parent-features-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.parent-feature-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:1.2rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.parent-feature-card:hover{
  transform:translateY(-3px);
  border-color:#93c5fd;
  box-shadow:0 18px 35px rgba(37,99,235,.10);
}

.parent-feature-card h3{
  font-size:1rem;
  color:#0f172a;
  margin-bottom:.45rem;
}

.parent-feature-card p{
  color:#64748b;
  font-size:.94rem;
}

/* ===== Audience ===== */
.parent-audience-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.parent-audience-card{
  background:#ffffff;
  border:1px solid #dbeafe;
  border-radius:20px;
  padding:1.4rem;
  box-shadow:0 10px 30px rgba(37,99,235,.06);
}

.parent-audience-card h3{
  color:#1d4ed8;
  margin-bottom:.5rem;
  font-size:1.08rem;
}

.parent-audience-card p{
  color:#475569;
}

/* ===== Highlight ===== */
.parent-highlight{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
  background:linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
  border:1px solid #dbeafe;
  border-radius:24px;
  padding:1.5rem;
  box-shadow:0 18px 40px rgba(37,99,235,.08);
}

.parent-highlight-content h2{
  font-size:clamp(1.5rem, 2.3vw, 2.1rem);
  color:#020617;
  margin-bottom:.8rem;
}

.parent-highlight-content p{
  color:#64748b;
  margin-bottom:.9rem;
}

.parent-highlight-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:1rem;
}

.parent-status-box{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:1rem;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.parent-status-label{
  font-size:.8rem;
  font-weight:800;
  color:#2563eb;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.45rem;
}

.parent-status-value{
  font-size:1.1rem;
  font-weight:800;
  color:#0f172a;
  line-height:1.3;
  margin-bottom:.8rem;
}

.parent-status-note{
  color:#64748b;
  font-size:.92rem;
  margin:0;
}

/* ===== CTA ===== */
.parent-final-cta{
  max-width:820px;
  margin:0 auto;
  text-align:center;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:24px;
  padding:2rem 1.3rem;
  box-shadow:0 16px 36px rgba(15,23,42,.05);
}

.parent-final-cta h2{
  color:#020617;
  font-size:clamp(1.6rem, 2.5vw, 2.2rem);
  margin-bottom:.8rem;
}

.parent-final-cta p{
  color:#64748b;
  max-width:640px;
  margin:0 auto 1.3rem;
}

.parent-final-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.parent-scroll-top{
  margin-top:1rem;
  border:none;
  background:transparent;
  color:#2563eb;
  font-weight:700;
  cursor:pointer;
  padding:.4rem .8rem;
}

.parent-scroll-top:hover{
  color:#1d4ed8;
  text-decoration:underline;
}

/* ===== Reveal ===== */
.parent-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
}

.parent-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .parent-values-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .parent-family-highlight,
  .parent-highlight{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .parent-intro-grid,
  .parent-features-grid,
  .parent-audience-grid,
  .parent-quick-points{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .parent-section{
    padding:56px 0;
  }

  .parent-values-grid{
    grid-template-columns:1fr;
  }

  .parent-card,
  .parent-feature-card,
  .parent-value-card,
  .parent-audience-card,
  .parent-family-box,
  .parent-status-box,
  .parent-final-cta{
    border-radius:18px;
  }

  .parent-hero-actions,
  .parent-highlight-actions,
  .parent-final-actions{
    flex-direction:column;
  }

  .parent-hero-actions a,
  .parent-highlight-actions a,
  .parent-final-actions a,
  .parent-btn-secondary,
  .parent-page .btn{
    width:100%;
  }
}