/* ============================================================================
   Page « Autres services » (services.html) : une petite scène illustrée au-dessus
   de chaque offre (08/10/2026, demande du fondateur : décorer la page sans logos
   ni icônes génériques).

   Même vocabulaire que les cartes de l'accueil (.offre-* / .vis-* de style.css) :
   mêmes jetons de couleur, mêmes polices (Newsreader + Public Sans), mêmes pastilles
   .statut. Écrit en HTML + CSS seulement : aucune image à charger, aucun JavaScript,
   aucune animation (rendu identique avec « moins d'animations » et sans script).
   Règle 7ter : ni dégradé, ni verre dépoli, ni ombre portée, ni émoji, ni bande
   colorée sur le bord. Toutes les couleurs viennent des jetons de style.css, donc
   le mode sombre suit tout seul. Les scènes sont décoratives (aria-hidden dans la
   page) : le texte de la carte dit déjà tout.
   ========================================================================== */

/* Grille de la page : les scènes sont dessinées pour environ 340 px de large. Plutôt que de fixer
   3, 2 ou 1 colonnes selon la largeur d'écran (scènes de 255 px sur tablette ou téléphone couché,
   texte coupé), on garantit une largeur minimale de scène : 3 colonnes quand il y a la place
   (6 offres = 3 x 2), puis 2, puis 1. */
.grille-plans.grille-scenes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); margin-top: 20px; }
@media (max-width: 600px) { .grille-plans.grille-scenes { gap: 32px; } }
.scenes-note { margin: 0; font-size: .86rem; color: var(--encre-douce); }

.scene {
  --scene-h: 196px;
  position: relative; height: var(--scene-h); margin: 0 0 20px; overflow: hidden;
  border: 1px solid var(--filet); border-radius: 12px; background: var(--surface-2); color: var(--encre);
  font-size: .86rem; line-height: 1.35;
  pointer-events: none; user-select: none;
}
.scene * { margin: 0; }
.scene-nuit { background: var(--nuit); color: var(--sur-nuit); }
.scene-pale { background: var(--marque-pale); }
.scene-grise { background: var(--surface-2); }
.scene-claire { background: var(--surface); border: 1px solid var(--filet); }

/* Fenêtre claire posée sur le fond de la scène, qui sort par le bas comme sur l'accueil */
.sc-fenetre {
  position: absolute; left: 16px; right: 16px; top: 18px; bottom: 0;
  padding: 12px 14px 0; background: var(--surface); color: var(--encre);
  border: 1px solid var(--filet); border-bottom: 0; border-radius: 10px 10px 0 0;
}
.scene-nuit .sc-fenetre { border-color: transparent; }
.sc-titre {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--encre-douce); padding-bottom: 8px;
}

/* Lignes de tableau (devis, journal) */
.sc-ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--filet);
}
.sc-ligne > span:last-child { white-space: nowrap; }
.sc-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 0 0; border-top: 2px solid var(--encre); font-weight: 700;
}
.sc-total span:last-child { font-family: var(--serif); font-size: 1.25rem; color: var(--marque-texte); }

/* Chatbot : bulles directement sur le fond nuit */
.sc-chat { position: absolute; inset: 0; padding: 22px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.sc-chat p { padding: 10px 13px; border-radius: 12px; font-size: .92rem; line-height: 1.4; max-width: 86%; }
.sc-bulle-v { align-self: flex-end; background: var(--vif); color: var(--nuit); border-bottom-right-radius: 3px; }
.sc-bulle-r { align-self: flex-start; background: var(--nuit-2); color: var(--sur-nuit); border-bottom-left-radius: 3px; }
.sc-chat .sc-saisie {
  margin-top: auto; margin-bottom: 14px; max-width: none; align-self: stretch;
  border: 1px solid var(--nuit-2); border-radius: 999px; background: transparent;
  color: var(--sur-nuit-doux); font-size: .84rem; padding: 8px 14px;
}

/* Visibilité : champ de recherche puis résultats */
.sc-recherche {
  padding: 7px 12px; margin-bottom: 10px; border: 1px solid var(--filet-fort); border-radius: 999px;
  background: var(--surface); font-size: .84rem; color: var(--encre);
}
.sc-recherche small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-douce); line-height: 1.2; }
.sc-resultat { padding: 9px 12px; background: var(--surface); border: 1px solid var(--filet-fort); border-radius: 8px; }
.sc-resultat b { display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--marque-texte); line-height: 1.2; }
.sc-resultat span { display: block; font-size: .8rem; color: var(--encre-douce); margin-top: 2px; }
.sc-resultat-2 { margin-top: 8px; padding: 8px 12px; }
.sc-resultat-2 b { color: var(--encre-douce); font-size: .98rem; }
.scene-pale .sc-resultat-2 span { color: var(--encre-douce); }

/* Réseaux sociaux : trois vignettes de posts */
.sc-posts { position: absolute; left: 14px; right: 14px; top: 18px; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sc-post {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 9px 0;
  background: var(--surface); border: 1px solid var(--filet); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.sc-jour { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.08rem; color: var(--marque-texte); line-height: 1.1; }
.sc-heure-post { white-space: nowrap; font-size: .74rem; color: var(--encre-douce); margin-top: -4px; }
.sc-legende { font-size: .8rem; line-height: 1.3; color: var(--encre); }
.sc-post .statut { align-self: flex-start; font-size: .64rem; padding: 3px 6px; margin-top: auto; margin-bottom: 14px; }

/* Automatisation : journal de tâches */
.sc-tache { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--filet); }
.sc-tache > span:nth-child(2) { font-size: .82rem; white-space: nowrap; }
@media (max-width: 600px) { .sc-tache > span:nth-child(2) { white-space: normal; line-height: 1.25; } }
.sc-heure { white-space: nowrap; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.02rem; color: var(--marque-texte); }
.sc-tache .statut { font-size: .66rem; padding: 3px 7px; }
.sc-suite { padding: 8px 0 0; border-top: 1px solid var(--filet); color: var(--encre-douce); font-size: .8rem; }

/* Formation : extrait de livret avec une demande prête à copier */
.sc-demande {
  padding: 10px 12px; margin-bottom: 9px; border: 1px solid var(--filet-fort); border-radius: 6px;
  background: var(--marque-pale); font-family: var(--serif); font-style: italic; font-size: 1.04rem; line-height: 1.3; color: var(--encre);
}
.sc-copie { display: inline-block; font-size: .66rem; padding: 3px 7px; }

/* Téléphone : scènes plus compactes pour ne pas allonger la page */
@media (max-width: 600px) {
  .scene { --scene-h: 154px; margin-bottom: 14px; font-size: .82rem; }
  .sc-fenetre { top: 12px; left: 12px; right: 12px; padding: 9px 12px 0; }
  .sc-titre { padding-bottom: 5px; font-size: .68rem; }
  .sc-ligne { padding: 6px 0; }
  .sc-total { padding-top: 7px; }
  .sc-chat { padding: 14px 14px 0; gap: 7px; }
  .sc-chat .sc-saisie { margin-bottom: 10px; padding: 6px 12px; font-size: .8rem; }
  .sc-chat p { padding: 8px 11px; font-size: .88rem; }
  .sc-recherche { padding: 5px 11px; margin-bottom: 8px; }
  .sc-resultat { padding: 7px 11px; }
  .sc-resultat b { font-size: 1rem; }
  .sc-resultat span { font-size: .78rem; }
  .sc-posts { top: 12px; left: 12px; right: 12px; gap: 6px; }
  .sc-post { padding: 8px 7px 0; gap: 4px; }
  .sc-legende { font-size: .76rem; }
  .sc-post .statut { margin-bottom: 10px; }
  .sc-tache { padding: 7px 0; }
  .sc-resultat-2, .sc-suite { display: none; }
  .sc-demande { padding: 8px 11px; margin-bottom: 7px; font-size: .98rem; }
}

/* Très petits téléphones (320 à 340 px) : les trois vignettes et le journal se resserrent encore */
@media (max-width: 340px) {
  .scene { font-size: .8rem; }
  .sc-posts { left: 8px; right: 8px; gap: 4px; }
  .sc-post { padding: 7px 5px 0; }
  .sc-jour { font-size: .9rem; }
  .sc-heure-post { font-size: .68rem; }
  .sc-legende { font-size: .7rem; }
  .sc-post .statut { font-size: .56rem; letter-spacing: 0; padding: 3px 4px; }
  .sc-tache { gap: 6px; }
  .sc-tache > span:nth-child(2) { font-size: .76rem; }
  .sc-tache .statut { font-size: .6rem; letter-spacing: .02em; padding: 3px 5px; }
  .sc-resultat span { font-size: .72rem; }
}

/* Impression : les scènes décoratives ne servent à rien sur papier */
@media print { .scene { display: none; } }