/* ============================================================================
   FAMILLE.CSS — Module « Parentalité & famille » d'ÉQUILIBRE
   Styles dédiés, sur le pattern déjà validé pour Intelligence artificielle
   et Écrans & réseaux sociaux. Réutilise les variables CSS globales définies
   dans equilibre.html (--teal, --ink, --paper, etc.).
   ========================================================================== */

/* --- Justification typographique opt-in (prose explicative uniquement) ---
   hyphens:none volontaire : pas de césure automatique. max-width/line-height
   limités à .fam-justify, jamais à .fam-main ni aux grilles/cartes. */
.fam-justify,.fam-opening p.fam-justify,.fam-sections p.fam-justify{text-align:justify;text-justify:inter-word;-webkit-hyphens:none;hyphens:none;word-break:normal;overflow-wrap:normal;max-width:70ch;line-height:1.75;}
@media (max-width:650px){.fam-justify,.fam-opening p.fam-justify,.fam-sections p.fam-justify{text-align:left;text-justify:auto;}}

/* --- Mise en page générale --- */
.fam-main{max-width:760px;}
.fam-global-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.fam-global-nav .eq-back{margin:0;min-height:44px;}
.fam-global-nav .eq-back:hover,.fam-global-nav .eq-back:focus-visible{border-color:var(--teal-deep);outline:3px solid rgba(63,110,122,.22);outline-offset:2px;}
.fam-opening{margin:18px 0 26px;}
.fam-opening p,.fam-sections p{margin:0 0 16px;line-height:1.65;}
.fam-opening h1,.fam-sections h1{font-size:26px;margin:32px 0 14px;}
.fam-opening h2,.fam-sections h2{font-size:21px;margin:34px 0 14px;color:var(--ink);}
.fam-opening h3,.fam-sections h3{font-size:17px;margin:28px 0 12px;color:var(--teal-deep);}
.fam-opening h4,.fam-sections h4{font-size:15px;margin:22px 0 10px;}
.fam-opening h2:first-child,.fam-sections h2:first-child,
.fam-opening h3:first-child,.fam-sections h3:first-child,
.fam-opening h4:first-child,.fam-sections h4:first-child{margin-top:0;}
.fam-opening blockquote,.fam-sections blockquote{margin:16px 0;padding:14px 18px;border-left:4px solid var(--teal);background:#f3f7f6;border-radius:0 12px 12px 0;font-weight:600;}
.fam-opening hr,.fam-sections hr{border:none;border-top:1px solid var(--line);margin:26px 0;}
.fam-list{margin:0 0 14px;padding-left:20px;}
.fam-list li{margin-bottom:6px;line-height:1.55;}
.fam-section-title{font-size:22px;margin:30px 0 14px;}

/* --- Callouts (au cas où) --- */
.fam-callout{display:flex;gap:12px;align-items:flex-start;margin:16px 0;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:#f6f5f0;}
.fam-callout-icon{font-size:20px;line-height:1;flex:0 0 auto;}
.fam-callout-body p:last-child{margin-bottom:0;}
.fam-callout--green_bg{background:#eaf5ee;border-color:#bfe0cc;}
.fam-callout--blue_bg{background:#eaf2f7;border-color:#bcd6e6;}
.fam-callout--gray_bg{background:#f1f1ee;border-color:#dcdcd4;}

/* --- Portes d'entrée (accueil du module) : cartes claires, un seul accent sobre par porte --- */
.fam-door-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 30px;}
.fam-door{position:relative;text-align:left;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:16px;padding:20px 46px 20px 20px;min-height:100px;display:flex;flex-direction:column;gap:3px;background:#fff;color:var(--ink);transition:transform .2s,box-shadow .2s;}
.fam-door:hover,.fam-door:focus-visible{transform:translateY(-2px);box-shadow:0 16px 32px -26px rgba(28,42,46,.45);outline:3px solid rgba(63,110,122,.2);outline-offset:2px;}
.fam-door-icon{font-size:19px;line-height:1;margin-bottom:2px;}
.fam-door-title{font-size:16px;line-height:1.25;}
.fam-door-desc{font-size:13px;line-height:1.4;color:var(--ink-soft,#5b6d72);}
.fam-door-arrow{position:absolute;right:18px;bottom:18px;font-size:18px;color:var(--teal-deep);}

/* --- Accordéons (sections des portes, ressources, sources) --- */
.fam-sections{display:flex;flex-direction:column;gap:12px;margin:20px 0;}
.fam-detail{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;}
.fam-detail h3{margin:0;}
.fam-detail-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:none;border:none;text-align:left;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;min-height:54px;}
.fam-detail-toggle:hover,.fam-detail-toggle:focus-visible{background:#f6f5f0;}
.fam-detail-toggle:focus-visible{outline:3px solid rgba(63,110,122,.3);outline-offset:-3px;}
.fam-detail-arrow{transition:transform .2s;color:var(--teal-deep);}
.fam-detail-toggle[aria-expanded="true"] .fam-detail-arrow{transform:rotate(180deg);}
.fam-detail-panel{padding:6px 18px 22px;}
.fam-sources{margin-top:8px;background:#f6f5f0;}

/* --- Repères visuels légers (opt-in, jamais un aplat dominant) ---
   Icône posée en CSS ::before par type, fond très léger + fin liseré. */
.fam-note{position:relative;margin:18px 0;padding:14px 16px 14px 42px;border-radius:12px;border:1px solid var(--line);background:#f6f5f0;}
.fam-note::before{position:absolute;left:14px;top:14px;font-size:15px;line-height:1;}
.fam-note>*:first-child{margin-top:0;}
.fam-note>*:last-child{margin-bottom:0;}
.fam-note--repere{background:#eaf2f2;border-color:#c9dcdc;}
.fam-note--repere::before{content:"🧭";}
.fam-note--exemple{background:#f6f5f0;border-color:var(--line);}
.fam-note--exemple::before{content:"💬";}
.fam-note--pistes{background:#eaf5ee;border-color:#bfe0cc;}
.fam-note--pistes::before{content:"✅";}
.fam-note--vigilance{background:#fbf3d9;border-color:#e9d488;}
.fam-note--vigilance::before{content:"⚠️";}
.fam-note--aide{background:#fbefec;border-color:#e0b3a8;}
.fam-note--aide::before{content:"🆘";}
.fam-note--juridique{background:#eef0f5;border-color:#c6cbdb;}
.fam-note--juridique::before{content:"⚖️";}
.fam-note--sources{padding:10px 14px 10px 38px;font-size:.92em;color:var(--ink-soft,#5b6d72);}
.fam-note--sources::before{left:12px;top:11px;font-size:13px;content:"📚";}

/* --- Passerelles vers les autres univers --- */
.fam-bridge-out{margin-top:14px;}

/* --- Navigation entre portes --- */
.fam-porte-nav{display:flex;justify-content:space-between;gap:14px;margin:28px 0;}
.fam-route--primary{margin-left:auto;}

/* --- Liens / boutons de navigation --- */
.fam-route{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:13px;cursor:pointer;}
.fam-route:hover,.fam-route:focus-visible{background:#f6f5f0;border-color:var(--teal);}
.fam-route.bridge{border-style:dashed;color:var(--teal-deep);}
.fam-route.bridge.urgent{border-style:solid;border-color:#a94338;background:#fbefec;color:#7c2c24;}
.fam-context{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);}

/* --- Responsive --- */
@media (max-width:760px){
  .fam-door-grid{grid-template-columns:1fr;}
}
@media (max-width:650px){
  .fam-global-nav{display:grid;grid-template-columns:1fr;}
  .fam-global-nav .eq-back{width:100%;text-align:left;}
  .fam-porte-nav{display:grid;}
  .fam-route--primary{margin-left:0;}
}
@media (max-width:480px){
  .fam-detail-toggle{font-size:14px;padding:14px;}
  .fam-door{padding:18px;min-height:100px;}
}
@media(prefers-reduced-motion:reduce){.fam-door,.fam-detail-arrow{transition:none;}}

/* --- Six accents sobres, un par porte (repris de la palette ÉQUILIBRE de l'accueil) --- */
.fam-door--porte1{border-left-color:#3f6e7a;}.fam-door--porte1 .fam-door-icon{color:#3f6e7a;}
.fam-door--porte2{border-left-color:#6f8f5e;}.fam-door--porte2 .fam-door-icon{color:#6f8f5e;}
.fam-door--porte3{border-left-color:#b8863a;}.fam-door--porte3 .fam-door-icon{color:#b8863a;}
.fam-door--porte4{border-left-color:#a9694f;}.fam-door--porte4 .fam-door-icon{color:#a9694f;}
.fam-door--porte5{border-left-color:#7d67a0;}.fam-door--porte5 .fam-door-icon{color:#7d67a0;}
.fam-door--porte6{border-left-color:#4a7896;}.fam-door--porte6 .fam-door-icon{color:#4a7896;}