/* Vitrine publique PharmAgenda */
:root {
    --bleu: #1D4D93; --bleu-fonce: #143a6e; --bleu-pale: #eaf1fb;
    --vert: #2E7D32; --vert-fonce: #245e28;
    --encre: #1b2433; --gris: #5b6577; --trait: #dde3ec; --fond: #f4f7fb;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: system-ui, sans-serif; color: var(--encre); background: var(--fond); line-height: 1.55; }
a { color: var(--bleu); }
.enveloppe { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 1.2rem; }
h1, h2, h3 { font-family: "Baloo 2", system-ui, sans-serif; line-height: 1.15; text-wrap: balance; margin: 0; }

.entete { background: white; border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 10; }
.entete .enveloppe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; }
.entete img { height: 44px; width: auto; display: block; }
.entete nav { display: flex; align-items: center; gap: 1.2rem; font-size: 0.92rem; }
.entete nav a.lien { color: var(--encre); text-decoration: none; }
.entete nav a.lien:hover { color: var(--bleu); }

.bouton { display: inline-block; padding: 0.7rem 1.4rem; border-radius: 8px; font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 1rem; text-decoration: none; border: 2px solid var(--bleu); }
.bouton.plein { background: var(--bleu); color: white; }
.bouton.plein:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.bouton.vide { background: white; color: var(--bleu); }
.bouton.vide:hover { background: var(--bleu-pale); }
.bouton.petit { padding: 0.4rem 1rem; font-size: 0.92rem; }

.heros { background: white; border-bottom: 1px solid var(--trait); }
.heros .enveloppe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; align-items: center; padding-block: 3.5rem; }
.etiquette { display: inline-block; background: var(--bleu-pale); color: var(--bleu); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 999px; }
.heros h1 { font-size: clamp(2rem, 4.4vw, 3rem); color: var(--bleu); margin: 0.9rem 0 1rem; }
.heros p.accroche { font-size: 1.08rem; color: var(--gris); margin: 0 0 1.6rem; max-width: 46ch; }
.heros .actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.heros .garantie { font-size: 0.85rem; color: var(--gris); margin: 0.9rem 0 0; }

.maquette { background: var(--fond); border: 1px solid var(--trait); border-radius: 12px; padding: 0.9rem; box-shadow: 0 10px 30px rgba(29, 77, 147, 0.10); }
.maquette .barre { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; color: var(--gris); margin-bottom: 0.6rem; }
.maquette .barre strong { color: var(--encre); font-family: "Baloo 2", sans-serif; font-size: 0.95rem; }
.defile { overflow-x: auto; }
.planning { width: 100%; min-width: 440px; border-collapse: separate; border-spacing: 3px; font-size: 0.72rem; text-align: center; }
.planning th { color: var(--gris); font-weight: 600; padding-bottom: 0.2rem; }
.planning th.nom { text-align: left; }
.planning td.nom { text-align: left; font-weight: 600; white-space: nowrap; padding-right: 0.5rem; font-size: 0.78rem; }
.planning td.nom small { display: block; font-weight: 400; color: var(--gris); font-size: 0.68rem; }
.planning td.c { border-radius: 5px; padding: 0.42rem 0.15rem; font-weight: 600; white-space: nowrap; }
.planning td.vide { background: repeating-linear-gradient(45deg, #eef1f6, #eef1f6 4px, #e6eaf1 4px, #e6eaf1 8px); color: #9aa3b2; font-weight: 400; }
.planning td.conge { background: #fff4e5; color: #7a4b00; border: 1px dashed #f5a623; }
.planning td.alerte { outline: 2px solid #c00000; outline-offset: -2px; }
.maquette .legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.72rem; color: var(--gris); margin-top: 0.7rem; }
.maquette .legende span::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-right: 0.3rem; vertical-align: -1px; }
.legende .l-conge::before { background: #fff4e5; border: 1px dashed #f5a623; }
.legende .l-alerte::before { border: 2px solid #c00000; }
.maquette .exemple { font-size: 0.7rem; color: #8b94a5; margin: 0.5rem 0 0; }

section { padding-block: 3.5rem; }
.titre-section { text-align: center; margin-bottom: 2rem; }
.titre-section h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--bleu); }
.titre-section p { color: var(--gris); margin: 0.6rem auto 0; max-width: 56ch; }

.fonctions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.fonction { background: white; border: 1px solid var(--trait); border-radius: 10px; padding: 1.1rem 1.2rem; }
.fonction .pastille { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; background: var(--bleu-pale); color: var(--bleu); font-family: "Baloo 2", sans-serif; font-weight: 700; margin-bottom: 0.6rem; }
.fonction h3 { font-size: 1.08rem; margin-bottom: 0.3rem; }
.fonction p { margin: 0; font-size: 0.92rem; color: var(--gris); }

.bande { background: white; border-block: 1px solid var(--trait); }
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; counter-reset: etape; }
.etape { counter-increment: etape; }
.etape::before { content: counter(etape); display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--bleu); color: white; font-family: "Baloo 2", sans-serif; font-weight: 700; margin-bottom: 0.7rem; }
.etape h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.etape p { margin: 0; color: var(--gris); font-size: 0.94rem; }

.tarifs { max-width: 620px; margin: 0 auto; background: white; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.tarifs .ligne { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.3rem; border-bottom: 1px solid var(--trait); }
.tarifs .ligne:last-child { border-bottom: none; }
.tarifs .ligne .prix { font-family: "Baloo 2", sans-serif; font-weight: 600; color: var(--bleu); white-space: nowrap; }
.tarifs .option { background: var(--fond); font-size: 0.92rem; }
.tarifs .option small { display: block; color: var(--gris); }
.note-tarifs { text-align: center; color: var(--gris); font-size: 0.85rem; margin: 0.9rem 0 0; }

.roi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 1.4rem; align-items: start; }
.roi .panneau { background: white; border: 1px solid var(--trait); border-radius: 12px; padding: 1.3rem 1.4rem; }
.roi h3 { font-size: 1.1rem; color: var(--bleu); margin-bottom: 0.8rem; }
.roi label { display: block; font-size: 0.86rem; font-weight: 600; }
.roi input, .roi select { font: inherit; height: 2.6rem; width: 100%; padding: 0.5rem 0.6rem; border: 1px solid #bec4d5; border-radius: 8px; margin-top: 0.3rem; background: white; color: var(--encre); }
.roi input:focus, .roi select:focus { outline: 3px solid var(--bleu-pale); border-color: var(--bleu); }
.roi .champs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr) minmax(0, 0.75fr); gap: 0.9rem; align-items: end; }
.roi .champs label { display: flex; flex-direction: column; gap: 0.3rem; white-space: nowrap; }
.roi .champs input, .roi .champs select { margin-top: 0; }
.roi .case { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-weight: 600; }
.roi .case input { width: auto; margin: 0; accent-color: var(--bleu); }
.roi .tache { padding: 0.8rem 0; border-top: 1px solid var(--trait); display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 6.5rem; gap: 0.3rem 0.8rem; align-items: end; }
.roi .tache strong { display: block; font-size: 0.94rem; }
.roi .tache small { color: var(--gris); font-size: 0.8rem; }
.roi .tache.inactive { opacity: 0.45; }
.roi .tache .valeurs { grid-column: 1 / -1; white-space: nowrap; overflow-x: auto; font-size: 0.84rem; color: var(--gris); background: var(--fond); border-radius: 6px; padding: 0.35rem 0.6rem; margin-top: 0.2rem; }
.roi .tache .valeurs b { color: var(--encre); }
.roi .tache .valeurs span { color: var(--vert); font-weight: 600; }
.roi .tache .valeurs:empty { display: none; }
.roi .resultat { position: sticky; top: 4.5rem; border-top: 5px solid var(--bleu); }
.roi .gros { font-family: "Baloo 2", sans-serif; font-size: 2.3rem; font-weight: 700; color: var(--bleu); line-height: 1.1; margin: 0.2rem 0; }
.roi .ligne-roi { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--trait); font-size: 0.92rem; }
.roi .ligne-roi span:last-child { font-weight: 700; text-align: right; white-space: nowrap; }
.roi .negatif { color: #a13342; }
.roi .avertissement { font-size: 0.8rem; color: var(--gris); margin: 0.9rem 0 0; }

.appel { background: var(--bleu); color: white; text-align: center; }
.appel h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.appel p { margin: 0.7rem auto 1.5rem; max-width: 50ch; opacity: 0.92; }
.appel .bouton { background: white; color: var(--bleu); border-color: white; }
.appel .bouton:hover { background: var(--bleu-pale); }

footer { background: white; border-top: 1px solid var(--trait); padding-block: 1.5rem; font-size: 0.85rem; color: var(--gris); }
footer .enveloppe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem; }

@media (max-width: 820px) {
    .heros .enveloppe { grid-template-columns: minmax(0, 1fr); padding-block: 2.2rem; gap: 2rem; }
    .roi { grid-template-columns: minmax(0, 1fr); }
    .roi .resultat { position: static; }
    .roi .tache .valeurs { white-space: normal; }
    .roi .champs { grid-template-columns: minmax(0, 1fr); }
    .roi .champs label { white-space: normal; }
    .roi .tache { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .roi .tache > div:first-child { grid-column: 1 / -1; }
    section { padding-block: 2.5rem; }
    .entete nav a.lien { display: none; }
}

.entete nav a.lien.actif { color: var(--bleu); font-weight: 600; }

/* Fonctionnalités : visuels */
.vitrine-bloc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; align-items: center; padding-block: 1.6rem; }
.vitrine-bloc.inverse .texte { order: 2; }
.vitrine-bloc h3 { font-size: 1.5rem; color: var(--bleu); margin-bottom: 0.6rem; }
.vitrine-bloc p { color: var(--gris); margin: 0 0 0.7rem; }
.vitrine-bloc ul { margin: 0; padding-left: 1.1rem; color: var(--gris); font-size: 0.94rem; }
.vitrine-bloc li { margin-bottom: 0.25rem; }
.ecran { background: var(--fond); border: 1px solid var(--trait); border-radius: 12px; padding: 0.9rem; box-shadow: 0 10px 30px rgba(29, 77, 147, 0.10); font-size: 0.82rem; }
.ecran .barre { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; color: var(--gris); margin-bottom: 0.6rem; }
.ecran .barre strong { color: var(--encre); font-family: "Baloo 2", sans-serif; font-size: 0.95rem; }
.ecran .exemple { font-size: 0.7rem; color: #8b94a5; margin: 0.6rem 0 0; }
.ecran .rang { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; background: white; border: 1px solid var(--trait); border-radius: 8px; padding: 0.5rem 0.7rem; margin-bottom: 0.4rem; }
.ecran .rang small { display: block; color: var(--gris); font-size: 0.72rem; }
.ecran .badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.badge.attente { background: #fff4e5; color: #7a4b00; }
.badge.valide { background: #e6f4e7; color: #245e28; }
.badge.envoye { background: var(--bleu-pale); color: var(--bleu); }
.ecran table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; }
.ecran th, .ecran td { padding: 0.45rem 0.6rem; text-align: right; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.ecran th:first-child, .ecran td:first-child { text-align: left; }
.ecran th { color: var(--gris); font-weight: 600; font-size: 0.74rem; background: #f8fafd; }
.ecran tr:last-child td { border-bottom: none; }
.ecran .positif { color: #245e28; font-weight: 600; }
.ecran .negatif { color: #a13342; font-weight: 600; }
.ecran .boutons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.ecran .b { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 6px; background: var(--bleu); color: white; font-weight: 600; font-size: 0.76rem; }
.ecran .b.clair { background: white; color: var(--bleu); border: 1px solid var(--bleu); }
@media (max-width: 820px) {
    .vitrine-bloc { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
    .vitrine-bloc.inverse .texte { order: 0; }
}

/* Visite de l'application (captures des pages du titulaire) */
.visite { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.visite-menu { position: sticky; top: 4.5rem; }
.visite-groupe { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); margin: 1rem 0 0.4rem; }
.visite-groupe:first-child { margin-top: 0; }
.visite-liens { display: flex; flex-direction: column; gap: 0.3rem; }
.visite-lien { font: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; background: white; color: var(--bleu); border: 1px solid var(--trait); border-radius: 8px; padding: 0.5rem 0.8rem; cursor: pointer; }
.visite-lien:hover { border-color: var(--bleu); }
.visite-lien.actif { background: var(--bleu); color: white; border-color: var(--bleu); }
.visite-vue .cadre { background: white; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(29, 77, 147, 0.12); }
.cadre-barre { display: flex; align-items: center; gap: 0.35rem; background: #eef2f8; border-bottom: 1px solid var(--trait); padding: 0.55rem 0.8rem; }
.cadre-barre i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #c8d1e0; display: block; }
.cadre-barre span { margin-left: 0.6rem; font-size: 0.78rem; color: var(--gris); background: white; border-radius: 6px; padding: 0.15rem 0.7rem; }
.visite-vue img { display: block; width: 100%; height: auto; }
.visite-texte { margin: 0.9rem 0 0; color: var(--gris); }
.visite-texte strong { display: block; color: var(--encre); font-family: "Baloo 2", sans-serif; font-size: 1.15rem; }
.visite-vue .exemple { font-size: 0.72rem; color: #8b94a5; margin: 0.4rem 0 0; }
@media (max-width: 820px) {
    .visite { grid-template-columns: minmax(0, 1fr); }
    .visite-menu { position: static; }
    .visite-liens { flex-direction: row; flex-wrap: wrap; }
}

/* Accueil : texte centré, puis la capture du planning */
.heros .enveloppe { grid-template-columns: minmax(0, 1fr); text-align: center; padding-block: 3rem 3.2rem; gap: 2.2rem; }
.heros p.accroche { margin-inline: auto; }
.heros .actions { justify-content: center; }
.capture-accueil .cadre { background: white; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(29, 77, 147, 0.16); text-align: left; }
.capture-accueil img { display: block; width: 100%; height: auto; }
.capture-accueil .exemple { font-size: 0.78rem; color: #8b94a5; margin: 0.7rem 0 0; text-align: center; }
.cadre-barre { display: flex; align-items: center; gap: 0.35rem; background: #eef2f8; border-bottom: 1px solid var(--trait); padding: 0.55rem 0.8rem; }
.cadre-barre i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #c8d1e0; display: block; }
.cadre-barre span { margin-left: 0.6rem; font-size: 0.78rem; color: var(--gris); background: white; border-radius: 6px; padding: 0.15rem 0.7rem; }