/* ═══════════════════════════════════════════════════════════════
   DIFÉA™ — Glossaire & Fondements — CSS v10.1
   Navigation par famille · Sobre · Responsive
   ═══════════════════════════════════════════════════════════════ */

:root {
  --marine:      #1B3557;
  --turquoise:   #2A9D8F;
  --sable:       #F4F1EB;
  --gris-clair:  #F3F4F6;
  --gris:        #6B7280;
  --bordure:     #E5E7EB;
  --texte:       #1F2937;
  --blanc:       #FFFFFF;
  --focus:       #2A9D8F33;
  --radius:      8px;
  --radius-sm:   4px;
  --ombre:       0 1px 4px rgba(0,0,0,.08);
  --ombre-md:    0 4px 14px rgba(0,0,0,.10);
  --transition:  .18s ease;
}

/* ── Conteneur ─────────────────────────────────────────────────── */
.difea-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1rem;
  font-family: 'Lato', 'Segoe UI', Arial, sans-serif;
  color: var(--texte);
  line-height: 1.65;
  box-sizing: border-box;
}
.difea-page * { box-sizing: border-box; }

/* ── Accroche ──────────────────────────────────────────────────── */
.difea-accroche {
  background: var(--sable);
  border-left: 4px solid var(--turquoise);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  font-size: .9375rem;
  color: var(--marine);
  line-height: 1.6;
}
.difea-accroche strong {
  display: block;
  font-size: 1rem;
  margin-bottom: .2rem;
}

/* ── Bloc sélecteur ────────────────────────────────────────────── */
.difea-search-block {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--ombre);
  margin-bottom: 1.25rem;
}

.difea-search-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris);
  margin-bottom: .6rem;
}

.difea-select-row {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Select natif — fiable tous supports */
.difea-select {
  flex: 1 1 240px;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--gris-clair)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right .85rem center;
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: .55rem 2.5rem .55rem .85rem;
  font-size: .9375rem;
  color: var(--texte);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.difea-select:focus {
  outline: none;
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px var(--focus);
}

/* Bouton Voir */
.difea-btn-voir {
  flex: 0 0 auto;
  background: var(--turquoise);
  color: var(--blanc);
  border: none;
  border-radius: var(--radius-sm);
  padding: .55rem 1.4rem;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}
.difea-btn-voir:hover:not(:disabled) {
  background: var(--marine);
  transform: translateY(-1px);
}
.difea-btn-voir:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

/* ── Compteur ──────────────────────────────────────────────────── */
.difea-compteur {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--gris);
  margin-bottom: 1rem;
  min-height: 1.5rem;
  flex-wrap: wrap;
}
.difea-compteur em {
  color: var(--marine);
  font-style: normal;
  font-weight: 600;
}
.difea-badge {
  background: var(--turquoise);
  color: var(--blanc);
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 12px;
  line-height: 1.4;
}

/* ── Cartes ────────────────────────────────────────────────────── */
.difea-results { margin-bottom: .5rem; }

.difea-card {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--ombre);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.difea-card:hover {
  box-shadow: var(--ombre-md);
  border-color: var(--turquoise);
}

/* En-tête carte */
.difea-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}

.difea-card-terme {
  font-size: 1rem;
  font-weight: 700;
  color: var(--marine);
  line-height: 1.3;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.difea-card-famille {
  flex-shrink: 0;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--turquoise);
  background: rgba(42,157,143,.1);
  padding: .2rem .6rem;
  border-radius: 12px;
  white-space: nowrap;
  align-self: flex-start;
}

/* Définition courte */
.difea-card-def-courte {
  font-size: .875rem;
  color: var(--texte);
  margin: 0 0 .75rem;
  line-height: 1.65;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Bouton toggle */
.difea-card-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: .3rem .75rem;
  font-size: .78rem;
  color: var(--gris);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
  margin-bottom: 0;
}
.difea-card-toggle:hover {
  border-color: var(--turquoise);
  color: var(--turquoise);
}
.difea-card-toggle[aria-expanded="true"] {
  border-color: var(--marine);
  color: var(--marine);
}

/* Détail complet */
.difea-card-detail {
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px solid var(--bordure);
}
.difea-card-detail[hidden] { display: none; }

.difea-card-def-complete {
  font-size: .85rem;
  line-height: 1.75;
  color: var(--texte);
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Références APA */
.difea-card-refs {
  margin-top: .875rem;
  padding: .75rem 1rem;
  background: var(--sable);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  color: var(--gris);
  line-height: 1.7;
  word-break: break-word;
  overflow-wrap: break-word;
}
.difea-card-refs-titre {
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--marine);
  margin: 0 0 .35rem;
}
.difea-card-refs p { margin: 0; }

/* Renvois */
.difea-card-renvois {
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--gris);
}

/* ── Navigation 2 par 2 ────────────────────────────────────────── */
.difea-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .5rem;
  margin-bottom: 1.5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--bordure);
}

.difea-nav-info {
  font-size: .78rem;
  color: var(--gris);
}

.difea-nav-btns {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.difea-btn-nav {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: .45rem 1rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--marine);
  cursor: pointer;
  transition: background var(--transition),
              border-color var(--transition),
              transform var(--transition);
}
.difea-btn-nav:hover {
  background: var(--sable);
  border-color: var(--turquoise);
  transform: translateY(-1px);
}
.difea-btn-nav--next {
  background: var(--marine);
  color: var(--blanc);
  border-color: var(--marine);
}
.difea-btn-nav--next:hover {
  background: var(--turquoise);
  border-color: var(--turquoise);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

  .difea-page { padding: 0 .75rem; }

  .difea-search-block { padding: 1rem; }

  .difea-select-row {
    flex-direction: column;
    align-items: stretch;
  }

  .difea-select {
    width: 100%;
    font-size: 1rem; /* évite zoom iOS */
  }

  .difea-btn-voir {
    width: 100%;
    text-align: center;
    padding: .65rem 1rem;
    font-size: 1rem;
  }

  .difea-card { padding: 1rem 1.125rem; }

  .difea-card-header {
    flex-direction: column;
    gap: .4rem;
    align-items: flex-start;
  }

  .difea-card-terme { font-size: .9375rem; }

  .difea-card-def-courte,
  .difea-card-def-complete {
    font-size: .8125rem;
  }

  .difea-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .difea-btn-nav {
    font-size: 1rem;
    padding: .6rem 1rem;
    width: 100%;
    text-align: center;
  }
}

/* ── Grand écran ───────────────────────────────────────────────── */
@media (min-width: 900px) {
  .difea-page { padding: 0; }
}

/* ── Mode sombre ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --blanc:      #1F2937;
    --gris-clair: #374151;
    --bordure:    #4B5563;
    --texte:      #F9FAFB;
    --sable:      #374151;
  }
  .difea-card-famille { background: rgba(42,157,143,.2); }
}

/* ── Accessibilité ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}