/* =========================================================
   CONTENT-PAGES.CSS — blog, mentions légales, notifications, 404
   Ce sont des pages "simples" regroupées dans un seul fichier
   pour éviter d'avoir trop de micro-fichiers CSS quasi vides.
   ========================================================= */

/* ---- 404 ---- */
.p404 { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: var(--gray-50); }
.p404-inner { max-width: 480px; }
.p404-num { font-family: 'DM Sans', sans-serif; font-size: 120px; font-weight: 900; color: var(--gray-100); line-height: 1; margin-bottom: -1rem; }
.p404-icon { font-size: 56px; margin-bottom: 1rem; }
.p404-title { font-family: 'DM Sans', sans-serif; font-size: 26px; font-weight: 900; margin-bottom: .75rem; }
.p404-text { font-size: 15px; color: var(--gray-400); line-height: 1.6; margin-bottom: 2rem; }
.p404-btns { display: flex; gap: 12px; justify-content: center; }

/* Ces pages (blog, notifications, légal) utilisent surtout des styles
   inline dans le HTML d'origine. On garde ici uniquement les règles
   génériques réutilisables ; le reste est resté volontairement en
   style inline dans les gabarits tpl-blog, tpl-legal et tpl-notifications
   (à migrer vers des classes CSS dans un
   futur nettoyage si vous voulez aller plus loin). */

@media (max-width: 768px) {
  .p404-btns { flex-direction: column; }
}

/* ── LA CORBEILLE D'UNE NOTIFICATION ──────────────────────────────────
   Son survol était décrit par deux attributs onmouseover/onmouseout qui
   écrivaient directement dans element.style. Deux raisons de le faire en
   CSS plutôt qu'en JavaScript :

   — un style écrit en ligne l'emporte sur toute règle :hover, donc tant
     que background et color restaient dans l'attribut style, aucune
     feuille de style ne pouvait les reprendre ;
   — un effet de survol posé en JavaScript ne se déclenche jamais au
     clavier. La règle :focus-visible ci-dessous donne le même retour
     visuel à qui navigue avec Tab, ce que les deux attributs ne
     faisaient pas.

   L'apparence au repos et au survol est celle d'avant, à l'identique. */
.notif-suppr {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gray-300);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  font-family: inherit;
  transition: all .12s;
}

.notif-suppr:hover,
.notif-suppr:focus-visible {
  background: #fee2e2;
  color: #dc2626;
}

.notif-suppr:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ── Écran public d'acceptation d'un devis (tpl-devispublic) ──────────────
   Rappel affiché avant les boutons Accepter / Refuser : assurance
   décennale du professionnel, à vérifier par le client. */
.dpub-conseil { margin-top: 1.5rem; padding: 12px 14px; border-left: 3px solid var(--orange); background: var(--gray-50); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.55; color: var(--gray-600); }

/* ── DEVIS PUBLIC : rattachement au compte client (consentement) ─────── */
.dpub-rattache { margin-top: 1.25rem; padding: 10px 14px; border-radius: 8px; background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #15803d; font-size: 13px; font-weight: 600; }
.dpub-rattacher { margin-top: 1.25rem; padding: 12px 14px; border-radius: 8px; background: var(--gray-50); border: 1.5px solid var(--gray-200); font-size: 13px; line-height: 1.5; color: var(--gray-600); }
.dpub-rattacher p { margin: 0 0 10px; }
.dpub-rattacher-btn { min-height: 40px; padding: 8px 16px; border: none; border-radius: 9px; background: var(--navy); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.dpub-rattacher-btn:disabled { opacity: .6; cursor: default; }
.dpub-rattacher-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }