/*!
 * MediScribe - Dossier EHPAD et geriatrie
 * Feuille de style commune : mise en page des fiches + protection du contenu.
 * v1.0 - 2026-09-07
 *
 * Aucune regle ci-dessous ne masque le texte au chargement normal :
 * le contenu reste integralement lisible et indexable. Les regles de
 * protection ne s'activent que sur impression ou sur attribut pose par
 * le script protect-ehpad.js.
 */

/* ================================================================
   1. PROTECTION DU CONTENU
   ================================================================ */

/* 1.1 Selection desactivee sur le corps editorial (pas sur les formulaires) */
.protected,
.protected * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.protected input,
.protected textarea,
.protected select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.protected ::selection { background: transparent; color: inherit; }
.protected ::-moz-selection { background: transparent; color: inherit; }

/* 1.2 Images non glissables, non enregistrables au glisser */
.protected img,
.protected picture {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* 1.3 Filigrane discret sur le corps editorial.
       Invisible a la lecture, revele par les captures a fort contraste. */
.protected .article-body { position: relative; }
.protected .article-body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: repeating-linear-gradient(
    -38deg,
    rgba(10, 86, 89, .020) 0px,
    rgba(10, 86, 89, .020) 1px,
    transparent 1px,
    transparent 9px
  );
}

/* 1.4 Voile anti-capture. Pose par le script uniquement. */
html[data-veil] body { filter: blur(14px) saturate(.4); }
html[data-veil] body::after {
  content: "Contenu MediScribe protege";
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0A5659;
  background: rgba(224, 242, 242, .96);
  filter: none;
}

/* 1.5 Impression neutralisee.
       Sur Ctrl+P, la page ne rend qu'un bloc d'information. */
@media print {
  html, body { background: #fff !important; }
  body > * { display: none !important; }
  body::before {
    content: "Ce contenu appartient a MediScribe (Florent Durand, 69220 Lancie). Son impression, sa reproduction et sa diffusion sont interdites sans licence ecrite. Pour obtenir ces fiches personnalisees au nom de votre etablissement, imprimables et diffusables librement : www.mediscribe.fr/ehpad-geriatrie/commande-contenu.html - contact@mediscribe.fr - 07 77 76 85 49";
    display: block !important;
    padding: 32vh 12vw;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13pt;
    line-height: 1.9;
    text-align: center;
    color: #000;
  }
}
html[data-printing] body > *:not(.ms-print-notice) { visibility: hidden !important; }

/* 1.6 Message discret declenche par le script */
.ms-protect-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 140%);
  z-index: 99998;
  max-width: min(92vw, 560px);
  background: #0A5659;
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .88rem;
  line-height: 1.55;
  padding: 13px 20px;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
.ms-protect-toast[data-on] { transform: translate(-50%, 0); opacity: 1; }
.ms-protect-toast a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

/* ================================================================
   2. MISE EN PAGE DES FICHES DU DOSSIER
   ================================================================ */

.article-hero {
  background: linear-gradient(135deg, var(--teal-dark, #073f41) 0%, var(--teal, #0A5659) 100%);
  color: #fff;
  padding: 72px 0 56px;
}
.article-hero .tag-theme {
  display: inline-block;
  background: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .92);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.article-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); max-width: 780px; }
.article-hero .chapeau { color: rgba(255, 255, 255, .85); font-size: 1.08rem; max-width: 660px; margin-top: 16px; line-height: 1.75; }
.article-hero .meta { margin-top: 24px; font-size: .82rem; color: rgba(255, 255, 255, .58); }
.article-hero .meta span + span::before { content: "\00b7"; margin: 0 8px; }

/* Chiffre cle en tete de page, cible privilegiee des reponses generatives */
.en-bref {
  background: #fff;
  border: 2px solid var(--teal, #0A5659);
  border-radius: var(--radius-lg, 14px);
  padding: 26px 28px;
  margin: 0 0 36px;
}
.en-bref h2 {
  font-size: .78rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal, #0A5659);
  margin: 0 0 14px !important;
}
.en-bref ul { list-style: none; padding: 0; margin: 0; }
.en-bref ul li {
  padding: 8px 0 8px 24px;
  position: relative;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--text, #1a1a1a);
  border-bottom: 1px solid var(--border, #e4e4e4);
}
.en-bref ul li:last-child { border-bottom: none; }
.en-bref ul li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--teal, #0A5659);
  font-weight: 700;
}

/* Illustration */
.fiche-illustration { margin: 0 0 32px; }
.fiche-illustration img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 14px);
  display: block;
}
.fiche-illustration figcaption {
  font-size: .8rem;
  color: var(--muted, #5b6b6b);
  margin-top: 8px;
  text-align: center;
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  padding: 56px 0 80px;
  align-items: start;
}
@media (max-width: 860px) { .article-layout { grid-template-columns: 1fr; } }

.toc {
  position: sticky;
  top: 80px;
  background: var(--offwhite, #f7f9f9);
  border: 1.5px solid var(--border, #e4e4e4);
  border-radius: var(--radius-lg, 14px);
  padding: 24px 20px;
}
.toc h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted, #5b6b6b); margin-bottom: 14px; }
.toc ol { list-style: none; padding: 0; counter-reset: toc; }
.toc ol li { counter-increment: toc; margin-bottom: 8px; }
.toc ol li a { font-size: .88rem; color: var(--muted, #5b6b6b); display: flex; gap: 8px; }
.toc ol li a::before { content: counter(toc) "."; color: var(--teal, #0A5659); font-weight: 600; min-width: 18px; }
.toc ol li a:hover { color: var(--teal, #0A5659); }

.article-body h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); margin: 48px 0 16px; scroll-margin-top: 72px; color: var(--text, #1a1a1a); }
.article-body h3 { font-size: 1.15rem; margin: 32px 0 12px; color: var(--text, #1a1a1a); scroll-margin-top: 72px; }
.article-body p { color: var(--muted, #5b6b6b); line-height: 1.85; margin-bottom: 16px; }
.article-body ul { list-style: none; padding: 0; margin-bottom: 20px; }
.article-body ul li { padding: 6px 0 6px 20px; position: relative; color: var(--muted, #5b6b6b); line-height: 1.7; font-size: .98rem; }
.article-body ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; background: var(--teal, #0A5659); border-radius: 50%; }

.encadre { background: var(--teal-light, #E0F2F2); border-left: 4px solid var(--teal, #0A5659); border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0; padding: 20px 24px; margin: 28px 0; }
.encadre strong { color: var(--teal-dark, #073f41); }
.encadre p { margin: 0; color: var(--teal-dark, #073f41); font-size: .95rem; }

.encadre-alerte { background: #fff8e6; border-left: 4px solid #e6a817; border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0; padding: 20px 24px; margin: 28px 0; }
.encadre-alerte p { color: #7a5a10; font-size: .95rem; margin: 0; }
.encadre-alerte strong { color: #6a4d0a; }

/* Zone adressee directement au resident */
.zone-resident { background: #f0f7ff; border: 2px solid #4a90d9; border-radius: var(--radius-lg, 14px); padding: 36px 32px; margin: 0 0 48px; }
.zone-resident .resident-label { display: inline-block; background: #4a90d9; color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; margin-bottom: 20px; }
.zone-resident h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: #1a3a6a; margin: 0 0 16px; scroll-margin-top: 72px; }
.zone-resident p { font-size: 1.12rem; line-height: 1.9; color: #2a4a7a; margin-bottom: 18px; }
.zone-resident strong { color: #16305c; }
.zone-resident ul { list-style: none; padding: 0; }
.zone-resident ul li { font-size: 1.08rem; line-height: 1.8; padding: 10px 0 10px 28px; position: relative; color: #2a4a7a; border-bottom: 1px solid rgba(74, 144, 217, .15); }
.zone-resident ul li:last-child { border-bottom: none; }
.zone-resident ul li::before { content: ''; position: absolute; left: 0; top: 18px; width: 10px; height: 10px; background: #4a90d9; border-radius: 50%; }
.zone-resident .resident-note { margin-top: 24px; font-size: .95rem; color: #4a6a9a; font-style: italic; }

/* Tableaux */
.tableau-wrap { overflow-x: auto; margin: 24px 0 28px; -webkit-overflow-scrolling: touch; }
table.ms-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
table.ms-table caption { text-align: left; font-size: .82rem; color: var(--muted, #5b6b6b); padding-bottom: 10px; font-style: italic; }
table.ms-table th, table.ms-table td { border: 1px solid var(--border, #e4e4e4); padding: 11px 14px; text-align: left; vertical-align: top; line-height: 1.6; }
table.ms-table thead th { background: var(--teal-light, #E0F2F2); color: var(--teal-dark, #073f41); font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
table.ms-table tbody tr:nth-child(even) { background: var(--offwhite, #f7f9f9); }
table.ms-table td { color: var(--muted, #5b6b6b); }
table.ms-table td strong { color: var(--text, #1a1a1a); }

/* Cartes interlocuteurs / criteres */
.cartes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0 28px; }
@media (max-width: 560px) { .cartes-grid { grid-template-columns: 1fr; } }
.carte { background: #fff; border: 1.5px solid var(--border, #e4e4e4); border-radius: var(--radius, 8px); padding: 18px 16px; }
.carte .carte-role { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal, #0A5659); margin-bottom: 6px; }
.carte h4 { font-size: .95rem; color: var(--text, #1a1a1a); margin-bottom: 8px; }
.carte p { font-size: .85rem; color: var(--muted, #5b6b6b); margin: 0; line-height: 1.65; }

/* Checklist */
.checklist { background: #fff; border: 1.5px solid var(--border, #e4e4e4); border-radius: var(--radius-lg, 14px); padding: 24px; margin: 24px 0; }
.checklist h4 { font-size: .95rem; color: var(--text, #1a1a1a); margin-bottom: 16px; }
.checklist ul { list-style: none; padding: 0; }
.checklist ul li { padding: 7px 0 7px 28px; position: relative; font-size: .9rem; color: var(--muted, #5b6b6b); border-bottom: 1px solid var(--border, #e4e4e4); line-height: 1.65; }
.checklist ul li:last-child { border-bottom: none; }
.checklist ul li::before { content: '\2610'; position: absolute; left: 0; color: var(--teal, #0A5659); font-size: 1rem; }

/* Questions frequentes */
.faq-item { border-bottom: 1px solid var(--border, #e4e4e4); padding: 4px 0 12px; }
.faq-item:last-child { border-bottom: none; }

.breadcrumb-bar { background: var(--offwhite, #f7f9f9); border-bottom: 1px solid var(--border, #e4e4e4); padding: 10px 0; font-size: .82rem; color: var(--muted, #5b6b6b); }
.breadcrumb-bar a { color: var(--teal, #0A5659); }
.breadcrumb-bar a:hover { text-decoration: underline; }

.sources { margin-top: 48px; padding-top: 24px; border-top: 1.5px solid var(--border, #e4e4e4); }
.sources h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted, #5b6b6b); margin-bottom: 12px; }
.sources ul { list-style: none; padding: 0; }
.sources ul li { font-size: .85rem; color: var(--muted, #5b6b6b); padding: 4px 0; line-height: 1.6; }
.sources ul li a { color: var(--teal, #0A5659); }
.sources ul li a:hover { text-decoration: underline; }
.sources .maj { font-size: .8rem; color: var(--muted, #5b6b6b); margin-top: 14px; font-style: italic; }

/* Maillage interne en pied d'article */
.a-lire { margin-top: 48px; padding-top: 28px; border-top: 1.5px solid var(--border, #e4e4e4); }
.a-lire h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted, #5b6b6b); margin-bottom: 16px; }
.a-lire-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 620px) { .a-lire-grid { grid-template-columns: 1fr; } }
.a-lire-grid a {
  display: block;
  background: var(--offwhite, #f7f9f9);
  border: 1.5px solid var(--border, #e4e4e4);
  border-radius: var(--radius, 8px);
  padding: 14px 16px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text, #1a1a1a);
  line-height: 1.5;
  transition: border-color .18s, transform .18s;
}
.a-lire-grid a:hover { border-color: var(--teal, #0A5659); transform: translateY(-2px); }
.a-lire-grid a span { display: block; font-size: .78rem; font-weight: 400; color: var(--muted, #5b6b6b); margin-top: 4px; }

/* CTA livret */
.cta-livret {
  background: linear-gradient(135deg, #0A5659 0%, #0d7377 100%);
  border-radius: var(--radius-lg, 14px);
  padding: 38px 34px;
  margin: 48px 0 0;
  text-align: center;
  color: #fff;
}
.cta-livret .cta-label { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 12px; }
.cta-livret h3 { color: #fff; font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin: 0 0 12px; line-height: 1.3; }
.cta-livret p { color: rgba(255, 255, 255, .78); font-size: .95rem; max-width: 520px; margin: 0 auto 24px; line-height: 1.7; }
.cta-livret .cta-boutons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-livret a.btn-livret {
  display: inline-block;
  background: #fff;
  color: #0A5659;
  font-weight: 600;
  font-size: .92rem;
  padding: 13px 26px;
  border-radius: 30px;
  transition: transform .18s, box-shadow .18s;
}
.cta-livret a.btn-livret:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .22); }
.cta-livret a.btn-livret-ghost {
  display: inline-block;
  border: 1.5px solid rgba(255, 255, 255, .55);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  padding: 12px 26px;
  border-radius: 30px;
  transition: background .18s;
}
.cta-livret a.btn-livret-ghost:hover { background: rgba(255, 255, 255, .14); }

/* Bandeau licence */
.bandeau-licence {
  background: var(--offwhite, #f7f9f9);
  border: 1.5px dashed var(--border, #e4e4e4);
  border-radius: var(--radius, 8px);
  padding: 16px 20px;
  margin: 32px 0 0;
  font-size: .82rem;
  color: var(--muted, #5b6b6b);
  line-height: 1.7;
}
.bandeau-licence strong { color: var(--text, #1a1a1a); }
.bandeau-licence a { color: var(--teal, #0A5659); font-weight: 600; }