/* ══════════════════════════════════════════════════════════════════════
   css2026/revisions_dnb.css
   Plan de révision du brevet en 30 jours (revisions_dnb.php).

   Reprend le vocabulaire visuel de css2026/jeux.css — cartes à 14 px de
   rayon, titres #1a3a6a, accent #c0392b, fonds blancs translucides — pour
   que la page ne détonne pas au milieu du reste du site.

   La feuille est chargée par une seule page : tout y est préfixé .rev-
   pour ne rien pouvoir casser ailleurs.
══════════════════════════════════════════════════════════════════════ */

/* ── Chapô ───────────────────────────────────────────────────────── */
.rev-chapo {
  max-width: 820px;
  margin: 1.4rem auto 2rem;
  padding: 1.4rem 1.2rem;
  background: #fffefc;
  border-left: 4px solid #c0392b;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.7;
  color: #2f2f2f;
  text-align: left;
}
.rev-chapo p { margin: 0 0 0.8rem; }
.rev-chapo p:last-child { margin-bottom: 0; }
.rev-chapo a { color: #a5311f; }
@media screen and (min-width: 768px) {
  .rev-chapo { padding: 1.8rem 2rem; font-size: 1.03rem; }
}

/* ── Barre de progression ────────────────────────────────────────── */
.rev-suivi {
  max-width: 820px;
  margin: 0 auto 2rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.6);
}
.rev-suivi-haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 0.7rem;
}
.rev-suivi-compte {
  font-weight: 700;
  color: #1a3a6a;
  font-size: 1.05rem;
  flex: 1 1 auto;
}
.rev-suivi-compte strong { color: #c0392b; font-size: 1.3rem; }
.rev-jauge {
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}
.rev-jauge-barre {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #1a3a6a, #2f7a4d);
  transition: width 0.35s ease;
}
.rev-btn {
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
  color: #1a3a6a;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.rev-btn:hover { background: #fff; transform: translateY(-1px); }
.rev-suivi-aide { font-size: 0.85rem; color: #5c5c5c; margin: 0.6rem 0 0; }

/* ── Blocs de semaine ────────────────────────────────────────────── */
.rev-bloc { margin: 0 0 2.6rem; }
.rev-bloc-titre {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  color: #1a3a6a;
  border-bottom: 2px solid rgba(192,57,43,0.25);
  padding-bottom: 0.3rem;
}
.rev-bloc-intro {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a4a4a;
  max-width: 62em;
}

/* ── Grille des journées ─────────────────────────────────────────── */
.rev-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 800px) {
  .rev-grille { grid-template-columns: repeat(2, 1fr); }
}

/* ── Carte d'une journée ─────────────────────────────────────────── */
.rev-jour {
  display: flex;
  flex-direction: column;
  border: 1.5px solid rgba(0,0,0,0.09);
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  overflow: hidden;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.rev-jour:hover { box-shadow: 0 5px 14px rgba(0,0,0,0.10); background: rgba(255,255,255,0.8); }

.rev-jour-tete {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem 0.6rem;
  background: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.rev-num {
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 10px;
  background: #1a3a6a;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.rev-num span { font-size: 0.55rem; font-weight: 600; opacity: 0.75; letter-spacing: 0.05em; }
.rev-jour-titre { flex: 1 1 auto; margin: 0; font-size: 1.02rem; color: #1a3a6a; line-height: 1.3; }
.rev-duree { display: block; font-size: 0.78rem; font-weight: 600; color: #6b6b6b; margin-top: 0.2rem; }

/* Case « c'est fait » */
.rev-fait-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #2f7a4d;
  cursor: pointer;
  user-select: none;
}
.rev-fait-label input { width: 1.05rem; height: 1.05rem; accent-color: #2f7a4d; cursor: pointer; }

.rev-jour-corps { padding: 0.8rem 0.9rem 0.9rem; flex: 1 1 auto; }
.rev-objectif { margin: 0 0 0.7rem; font-size: 0.94rem; line-height: 1.55; color: #333; }

.rev-piege {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid #d68910;
  border-radius: 0 6px 6px 0;
  background: rgba(241,196,15,0.10);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #5a4310;
}
.rev-piege b { color: #8a5c0a; }

/* ── Liens de la journée ─────────────────────────────────────────── */
.rev-liens { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.rev-liens li { margin-bottom: 0.3rem; }
.rev-liens a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2b2b2b;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.rev-liens a:hover {
  background: #fff;
  transform: translateX(4px);
  color: #c0392b;
}
.rev-liens .rev-ico { flex-shrink: 0; font-size: 0.95rem; }
.rev-liens .rev-quoi {
  flex-shrink: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: #555;
}

/* ── Bouton de session ───────────────────────────────────────────── */
.rev-session { margin: 0; }
.rev-session button {
  width: 100%;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  border: none;
  background: #1a3a6a;
  color: #fff;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.rev-session button:hover { background: #c0392b; transform: translateY(-2px); }
.rev-session-note { display: block; margin-top: 0.35rem; font-size: 0.76rem; color: #6b6b6b; text-align: center; }

/* ── Journées bilan ──────────────────────────────────────────────── */
.rev-jour.est-bilan { border-color: rgba(192,57,43,0.35); background: rgba(255,248,246,0.75); }
.rev-jour.est-bilan .rev-num { background: #c0392b; }
.rev-jour.est-bilan .rev-jour-tete { background: rgba(255,255,255,0.7); }

/* ── États pilotés par le navigateur (localStorage) ──────────────── */
.rev-jour.est-fait { opacity: 0.62; }
.rev-jour.est-fait .rev-num { background: #2f7a4d; }
.rev-jour.est-aujourdhui {
  border-color: #d68910;
  border-width: 2.5px;
  box-shadow: 0 0 0 4px rgba(214,137,16,0.13);
}
.rev-drapeau {
  display: none;
  margin: 0 0 0.6rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: #d68910;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.rev-jour.est-aujourdhui .rev-drapeau { display: block; }

/* ── Impression : le plan sur papier, sans les boutons ───────────── */
@media print {
  /* Tout ce qui ne se clique pas sur papier disparaît. #consent-banner est le
     bandeau RGPD de lesscripts.txt : en position fixe, il se réimprime sur
     chaque page si on ne le masque pas. */
  .rev-suivi, .rev-session, .rev-fait-label, #social-share-container,
  .rev-drapeau, #consent-banner, .consent-banner { display: none !important; }

  /* Deux colonnes à l'impression, en multi-colonnes et NON en grille : une
     grille CSS imprimée par Chrome place une seule rangée par page et laisse
     une demi-page blanche sous chaque paire de cartes. */
  .rev-grille { display: block; column-count: 2; column-gap: 0.6rem; }
  .rev-bloc { break-before: auto; }
  .rev-jour {
    display: block;
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #999;
    margin-bottom: 0.4rem;
    background: none;
    font-size: 0.82em;
  }
  .rev-jour:hover { box-shadow: none; }
  .rev-jour-tete { padding: 0.4rem 0.5rem 0.3rem; }
  .rev-jour-corps { padding: 0.4rem 0.5rem 0.5rem; }
  .rev-objectif, .rev-piege { margin-bottom: 0.45rem; }
  /* En colonne étroite, un lien en flex tronque son URL : on repasse en bloc,
     l'adresse va simplement à la ligne. */
  .rev-liens a { display: block; border: none; background: none; padding: 0.05rem 0;
                 overflow-wrap: anywhere; }
  .rev-liens .rev-ico { margin-right: 0.2rem; }
  .rev-liens a::after { content: " " attr(href); font-weight: 400; font-size: 0.72em; color: #555; }
  .rev-liens .rev-quoi { background: none; padding: 0; }
}

/* ── Sommaire des semaines, dans le bloc de suivi ────────────────── */
.rev-sommaire {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0.8rem 0 0;
}
.rev-sommaire a {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: #1a3a6a;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.08);
}
.rev-sommaire a:hover { background: #1a3a6a; color: #fff; }
@media print { .rev-sommaire { display: none; } }

/* ── Avertissement « même poste » ────────────────────────────────── */
/* Le suivi vit dans le localStorage : c'est un choix (ni compte, ni cookie,
   ni bandeau de consentement), mais il a une contrepartie que le visiteur
   doit lire AVANT de cocher trente cases. Bloc statique : le JS ne réécrit
   que #rev-aide, jamais celui-ci. */
.rev-avertissement {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid #1a3a6a;
  border-radius: 0 6px 6px 0;
  background: rgba(26,58,106,0.06);
  font-size: 0.85rem;
  line-height: 1.55;
  color: #33415c;
}
.rev-avertissement strong { color: #1a3a6a; }

/* ── Marqueur « nouvel onglet » ──────────────────────────────────── */
/* Les liens d'une journée s'ouvrent à côté pour que le plan reste sous la
   main. Un lien qui change de fenêtre sans le dire est une mauvaise surprise :
   la flèche le signale à l'œil, l'attribut title au survol et aux lecteurs
   d'écran. Le bouton de session, lui, reste dans la page. */
.rev-liens a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.75em;
  color: #8a8a8a;
  flex-shrink: 0;
}
.rev-liens a[target="_blank"]:hover::after { color: #c0392b; }
@media print { .rev-liens a[target="_blank"]::after { content: ""; } }