/* ==========================================================================
   HABILLAGE PARTAGÉ — en-tête, navigation, crédits
   DRANE Académie de Grenoble — Renaud HENNINO

   Cette feuille contient UNIQUEMENT ce qui encadre une page : les jetons de
   couleur, la bannière de titre, le bouton de retour et le pied de page.
   Elle ne contient aucun sélecteur d'élément susceptible de perturber le
   contenu (pas de p, ul, table, div…).

   Qui la charge :
     - style-commun.css, par @import  -> toutes les fiches en héritent
     - les pages autonomes (applications interactives) la chargent SEULES,
       pour partager l'habillage sans importer la mise en forme des fiches.
   ========================================================================== */

/* --- Jetons ------------------------------------------------------------- */
:root {
  /* Couleurs d'identité */
  --primary-color: #4f46e5; /* Indigo */
  --secondary-color: #818cf8;
  --accent-color: #f59e0b; /* Ambre */

  /* Texte */
  --text-main: #1f2937;
  --text-light: #6b7280; /* UNIQUE gris secondaire : remplace #666, #555, #888 */

  /* Fonds & surfaces */
  --bg-color: #f3f4f6;
  --card-bg: #ffffff;
  --surface-muted: #f9fafb; /* bandeau meta, footer */
  --surface-sunken: #f1f5f9; /* encarts neutres, badges */
  --surface-soft: #f8fafc; /* cartes internes, blocs technique */
  --surface-accent: #eef2ff; /* encarts liés au prompt */

  /* Bordures */
  --border-color: #e5e7eb; /* UNIQUE filet : remplace #eee, #e2e8f0 */
  --border-strong: #cbd5e1;

  /* Code */
  --code-bg: #1e293b;
  --code-text: #e2e8f0;

  /* Sémantique des encadrés */
  --info-bg: #eff6ff;
  --info-text: #1e40af;
  --tip-bg: #f5f3ff;
  --tip-text: #5b21b6;
  --warning-bg: #fffbeb;
  --warning-text: #92400e;
  --danger-bg: #fef2f2;
  --danger-text: #991b1b;
  --success-bg: #d1fae5;
  --success-text: #065f46;
  --deepdive-bg: #ecfeff;
  --deepdive-text: #155e75;
  --setup-bg: #f8fafc;
  --setup-text: #334155;

  /* Échelle typographique (en rem UNIQUEMENT, jamais em) */
  --fs-xs: 0.8rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.9rem;
  --fs-lg: 0.95rem;
  --fs-xl: 1.1rem;

  /* Rythme vertical */
  --gap-block: 20px;
  --gap-section: 30px;

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* --- Bannière de titre --------------------------------------------------- */
header {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 40px 40px 30px 40px;
  text-align: center;
  position: relative;
}

header h1 {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: inherit;
}

/* Quand la bannière porte un bouton de retour flottant, on réserve sa place :
   un titre long passe à la ligne au lieu de glisser sous le bouton.
   Sans effet sur les titres courts, ni sur index.html qui n'a pas de bouton. */
header:has(.nav-home-float) h1 {
  padding-inline: 140px;
}

.subtitle {
  margin-top: 10px;
  font-size: var(--fs-xl);
  opacity: 0.95;
  font-weight: 300;
}

/* Ligne secondaire sous le sous-titre (source, crédit d'activité) */
.subtitle-sm {
  margin-top: 6px;
  font-size: var(--fs-md);
  opacity: 0.8;
  font-weight: 300;
}

/* Bannière utilisée hors .container (page autonome) : coins arrondis propres */
.header-standalone {
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* --- Navigation ---------------------------------------------------------- */
.nav-home-float {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 15px;
  border-radius: 30px;
  text-decoration: none;
  color: white;
  font-weight: 600;
  font-size: var(--fs-sm);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background 0.2s;
  z-index: 10;
}
.nav-home-float:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Gros bouton de retour, en bas des pages longues */
.btn-retour {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--primary-color);
  color: white;
  font-weight: bold;
  font-size: 1.125rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-retour:hover {
  background-color: #3730a3;
  transform: translateY(-2px);
}
.btn-retour .arrow {
  transition: transform 0.3s ease;
}
.btn-retour:hover .arrow {
  transform: translateX(-4px);
}

/* --- Pied de page : crédits + licence ------------------------------------ */
.footer-credits {
  margin-top: 60px;
  padding: 30px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-light);
}

.footer-credits strong {
  color: var(--text-main);
}

.credits-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted;
}

.credits-licence {
  margin-top: 15px;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
  font-size: var(--fs-xs);
}
.credits-licence a {
  text-decoration: none;
  color: inherit;
}
.credits-licence img {
  border-width: 0;
  margin-bottom: 5px;
}

.logo-drane {
  font-weight: 800;
  letter-spacing: 1px;
  color: #ef4444;
  margin-bottom: 10px;
  display: block;
}

/* --- Responsive & impression de l'habillage ------------------------------ */
@media (max-width: 650px) {
  header {
    padding: 30px 20px;
  }
  header:has(.nav-home-float) h1 {
    padding-inline: 0; /* le bouton repasse dans le flux, la place n'est plus à réserver */
  }
  .nav-home-float {
    position: relative;
    display: inline-block;
    top: auto;
    left: auto;
    margin: 15px 0 10px 15px;
    color: var(--primary-color);
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    backdrop-filter: none;
  }
  .nav-home-float:hover {
    background: #e2e8f0;
  }
}

@media print {
  .nav-home-float,
  .btn-retour,
  .no-print {
    display: none !important;
  }
}