/* COULEURS DE RÉFÉRENCE de PharmAgenda : c'est ICI, et nulle part ailleurs, qu'on change une couleur.
   Chaque couleur a un nom (--c-…) utilisé partout dans l'application. Voir LISEZ-MOI.txt. */
:root {
    /* Bleus (couleur principale de l'application) */
    --bleu: #1D4D93;
    --bleu-fonce: #143a6e;
    --c-bleu-bord: #C5D6F0;
    --c-bleu-fond: #EEF4FC;
    --c-bleu-fond-2: #E8F0FE;
    --c-bleu-fond-3: #EEF3FA;
    --c-bleu-fond-4: #F4F7FB;
    --c-bleu-vif: #2F80ED;

    /* Encadrés bleus de mode d'emploi (« Comment ça marche… ») : fond, bord et couleur du texte, pour toutes les pages */
    --c-aide-fond: var(--c-bleu-fond);
    --c-aide-bord: var(--c-bleu-bord);
    --c-aide-texte: var(--bleu-fonce);

    /* Textes */
    --c-encre: #1B2433;
    --c-texte: #444444;
    --c-texte-attenue: #172033;  /* texte des barres et des noms en couleur atténuée */
    --c-texte-absent: #8A95AD;   /* nom d'un salarié qui ne travaille pas ce jour-là (plus clair que ceux qui travaillent) */
    --c-texte-2: #555555;
    --c-texte-3: #777777;
    --c-texte-4: #888888;
    --c-texte-bleute-1: #444455;
    --c-texte-bleute-2: #555566;
    --c-texte-bleute-3: #666677;
    --c-texte-bleute-4: #777788;
    --c-texte-discret: #999999;
    --c-texte-doux: #666666;
    --c-texte-fort: #222222;

    /* Traits et bordures */
    --c-trait: #DDDDDD;
    --c-trait-2: #E2E2E2;
    --c-trait-3: #BBBBBB;
    --c-trait-bleu: #DDE3EC;
    --c-trait-bleu-2: #BEC4D5;
    --c-trait-fort: #CCCCCC;
    --c-trait-leger: #EEEEEE;

    /* Fonds et blanc */
    --c-blanc: #FFFFFF;
    --c-fond-1: #FAFAFA;
    --c-fond-2: #F4F4F4;
    --c-fond-page: #F5F6F8;
    --gris: #B0B0B0;

    /* Rouges : annuler, supprimer, erreurs */
    --c-rouge: #C00000;
    --c-rouge-fonce: #8B0000;
    --c-rouge-fond: #FDECEA;
    --c-rouge-vif: #E53935;

    /* Verts : enregistrer, validé, succès */
    --c-vert: #2E7D32;
    --c-vert-clair: #43A047;
    --c-vert-fonce: #245E28;
    --c-vert-fond: #E6F4EA;
    --c-vert-fond-2: #E6F4E7;
    --c-vert-ok: #0F9D58;
    --c-vert-texte: #0B5B32;

    /* Violets : offre « pointeuse » */
    --c-violet: #6A1B9A;
    --c-violet-clair: #AB47BC;

    /* Teintes des tranches de salariés (calendrier du suivi d'équipe) */
    --c-tranche-1: #E3F2FD;
    --c-tranche-2: #E8F5E9;
    --c-tranche-3: #FFF8E1;
    --c-tranche-4: #FCE4EC;
    --c-tranche-5: #EDE7F6;
    --c-tranche-6: #E0F2F1;
    --c-tranche-7: #FBE9E7;

    /* Oranges et jaune : alertes, rappels, en attente */
    --c-jaune: #FFC107;
    --c-orange: #F5A623;
    --c-orange-brun: #C05A00;
    --c-orange-fond: #FFF4E5;
    --c-orange-texte: #7A4B00;
    --c-orange-vif: #FB8C00;
}

/* Variantes calculées : une couleur de base par famille. Les valeurs ci-dessus servent de secours pour les très vieux navigateurs. */
@supports (color: oklch(from red l c h)) {
  :root {
    /* Famille --bleu : change --bleu et toute la famille suit */
    --bleu-fonce: oklch(from var(--bleu) 0.3524 0.0999 calc(h - 1.0));
    --c-bleu-vif: oklch(from var(--bleu) 0.6093 0.1819 calc(h - 1.0));
    --c-bleu-fond: oklch(from var(--bleu) 0.9649 0.0125 calc(h - 2.8));
    --c-bleu-fond-2: oklch(from var(--bleu) 0.9532 0.0207 calc(h + 3.5));
    --c-bleu-fond-3: oklch(from var(--bleu) 0.9624 0.0108 calc(h - 1.6));
    --c-bleu-fond-4: oklch(from var(--bleu) 0.975 0.0062 calc(h - 2.8));
    --c-bleu-bord: oklch(from var(--bleu) 0.8715 0.0405 calc(h + 0.5));
    /* Famille --c-rouge : change --c-rouge et toute la famille suit */
    --c-rouge-vif: oklch(from var(--c-rouge) 0.6083 0.209 calc(h - 2.2));
    --c-rouge-fonce: oklch(from var(--c-rouge) 0.3999 0.1641 h);
    --c-rouge-fond: oklch(from var(--c-rouge) 0.956 0.0187 calc(h - 3.6));
    /* Famille --c-vert : change --c-vert et toute la famille suit */
    --c-vert-clair: oklch(from var(--c-vert) 0.6291 0.1543 h);
    --c-vert-fonce: oklch(from var(--c-vert) 0.4297 0.1043 calc(h + 0.5));
    --c-vert-texte: oklch(from var(--c-vert) 0.4157 0.0991 calc(h + 10.1));
    --c-vert-ok: oklch(from var(--c-vert) 0.6122 0.1507 calc(h + 9.9));
    --c-vert-fond: oklch(from var(--c-vert) 0.954 0.0199 calc(h + 10.7));
    --c-vert-fond-2: oklch(from var(--c-vert) 0.9531 0.0227 calc(h + 3.3));
    /* Famille --c-orange : change --c-orange et toute la famille suit */
    --c-orange-texte: oklch(from var(--c-orange) 0.4564 0.0994 calc(h - 3.8));
    --c-orange-fond: oklch(from var(--c-orange) 0.9717 0.0231 calc(h + 2.9));
    --c-orange-vif: oklch(from var(--c-orange) 0.7453 0.1759 calc(h - 13.6));
    --c-orange-brun: oklch(from var(--c-orange) 0.5838 0.1533 calc(h - 22.5));
    --c-jaune: oklch(from var(--c-orange) 0.8442 0.1722 calc(h + 11.9));
  }
}

/* POLICES ET TAILLES DE TEXTE DE RÉFÉRENCE. Les fichiers des polices sont dans le dossier polices/. Voir LISEZ-MOI.txt. */
:root {
    --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --police-titre: "Baloo 2", "Inter", system-ui, sans-serif;
    --t-xs: 0.72rem;
    --t-sm: 0.8rem;
    --t-md: 0.85rem;
    --t-base: 0.9rem;
    --t-aide: var(--t-base);   /* texte des encadrés bleus de mode d'emploi */
    --t-lg: 1rem;
    --t-xl: 1.1rem;
    --t-2xl: 1.3rem;
    --t-3xl: 1.7rem;
    --t-4xl: 2.2rem;

    /* Graisses : trois seulement. Inter existe jusqu'au 600 ; le 700 sert aux titres en Baloo 2. */
    --poids-normal: 400;
    --poids-semi: 600;
    --poids-gras: 700;
}

/* FORMES DE RÉFÉRENCE : angles arrondis et ombres. C'est ICI qu'on rend toute l'application plus carrée, plus ronde ou plus plate. */
:root {
    /* Angles arrondis */
    --r-sm: 4px;      /* petits éléments : cases, pastilles carrées */
    --r-aide: var(--r-md);   /* encadrés bleus de mode d'emploi */
    --r-md: 6px;      /* boutons, champs, encadrés (le plus courant) */
    --r-lg: 8px;      /* cartes, fenêtres */
    --r-xl: 12px;     /* grandes cartes, blocs de titre */
    --r-pill: 999px;  /* boutons et étiquettes en forme de pilule */

    /* Commandes de la barre de l'Emploi du temps (onglets, tailles, filtres, Publier, Imprimer) : même hauteur, même police, mêmes angles */
    --r-bouton: 8px;  /* RÈGLE : boutons, étiquettes, badges et bulles de l'application ont tous la même forme (rectangle arrondi), quelle que soit la page */
    --r-bulle: var(--r-bouton);  /* étiquettes, badges, pastilles de statut : même forme que les boutons et les badges des salariés */
    --r-commande: var(--r-bouton);
    --h-commande: 38px;
    --fs-commande: 0.86rem;
    --pad-commande: 0.8rem;

    /* Barres d'heures de l'Emploi du temps : coins arrondis ; teinte atténuée de la couleur du salarié avec un bord gauche plus foncé */
    --r-barre: 10px;
    --r-pause: 7px;
    --liseret-barre: 5px;  /* bord gauche en couleur pleine (plus foncé) des barres d'heures et des noms, le reste étant atténué */

    /* Ombres */
    --ombre-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --ombre-md: 0 2px 10px rgba(0, 0, 0, 0.12);
    --ombre-lg: 0 8px 30px rgba(0, 0, 0, 0.3);
    --ombre-primaire: 0 2px 5px color-mix(in srgb, var(--bleu) 35%, transparent);
    --ombre-primaire-fort: 0 4px 10px color-mix(in srgb, var(--bleu) 45%, transparent);
}

/* 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: "Inter", 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.65rem; }
.entete img { height: 60px; width: auto; display: block; }
.entete .marque { display: flex; align-items: center; text-decoration: none; }
.entete .marque-logo { height: 56px; 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: var(--r-bouton); 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: var(--r-bulle); }
.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, var(--c-bleu-fond-3), var(--c-bleu-fond-3) 4px, var(--c-trait-leger) 4px, var(--c-trait-leger) 8px); color: var(--c-texte-discret); font-weight: 400; }
.planning td.conge { background: var(--c-orange-fond); color: var(--c-orange-texte); border: 1px dashed var(--c-orange); }
.planning td.alerte { outline: 2px solid var(--c-rouge); 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: var(--c-orange-fond); border: 1px dashed var(--c-orange); }
.legende .l-alerte::before { border: 2px solid var(--c-rouge); }
.maquette .exemple { font-size: 0.7rem; color: var(--c-texte-discret); margin: 0.5rem 0 0; }

section { padding-block: 3.5rem; }
.titre-section { text-align: center; margin-bottom: 2rem; }
.titre-section h1, .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; }
.enveloppe-large { max-width: 1360px; }
.fonctions-cinq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.fonctions-cinq .fonction { padding: 0; }
.fonctions-cinq summary { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; cursor: pointer; list-style: none; }
.fonctions-cinq summary::-webkit-details-marker { display: none; }
.fonctions-cinq summary::after { content: "▾"; margin-left: auto; color: var(--bleu); font-size: 1rem; transition: transform 0.15s; }
.fonctions-cinq details[open] > summary::after { transform: rotate(180deg); }
.fonctions-cinq summary:hover { background: var(--bleu-pale); border-radius: 10px; }
.fonctions-cinq .pastille { flex: none; margin: 0; }
.fonctions-cinq summary h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.fonctions-cinq details[open] > summary { border-bottom: 1px solid var(--trait); border-radius: 10px 10px 0 0; }
.fonctions-cinq .fonction p { padding: 0.8rem 1rem 1rem; }
@media (max-width: 559px) { .fonctions-cinq { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 820px) { .fonctions-cinq { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fonctions-cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.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 { 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 var(--c-trait-bleu-2); 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: var(--c-rouge); }
.roi .roi-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.roi .roi-table th { text-align: right; font-weight: 700; color: var(--bleu); padding: 0.4rem 0 0.5rem 1rem; border-bottom: 2px solid var(--trait); white-space: nowrap; }
.roi .roi-table td { padding: 0.5rem 0 0.5rem 1rem; border-bottom: 1px solid var(--trait); text-align: right; font-weight: 700; white-space: nowrap; }
.roi .roi-table td:first-child, .roi .roi-table th:first-child { text-align: left; padding-left: 0; font-weight: 400; white-space: normal; }
.roi .roi-table tr.fort td { font-size: 1rem; }
.roi .roi-table tr.fort td:first-child { font-weight: 700; }
.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 .pied-liens { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding-bottom: 0.9rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--trait); }
footer .pied-liens a { color: var(--bleu); font-weight: 600; }
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: var(--c-texte-discret); 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: var(--r-bulle); font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.badge.attente { background: var(--c-orange-fond); color: var(--c-orange-texte); }
.badge.valide { background: var(--c-vert-fond-2); color: var(--c-vert-fonce); }
.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: var(--c-fond-1); }
.ecran tr:last-child td { border-bottom: none; }
.ecran .positif { color: var(--c-vert-fonce); font-weight: 600; }
.ecran .negatif { color: var(--c-rouge); 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: var(--c-bleu-fond-3); border-bottom: 1px solid var(--trait); padding: 0.55rem 0.8rem; }
.cadre-barre i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--c-bleu-bord); 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: var(--c-texte-discret); 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; }
}

/* Visite : onglets titulaire / salarié, téléphone du salarié */
.visite[hidden], .visite-vue [hidden] { display: none; }
.visite-profils { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin: 0 0 1.4rem; }
.visite-profil { font: inherit; font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 1rem; background: white; color: var(--bleu); border: 2px solid var(--bleu); border-radius: var(--r-bulle); padding: 0.45rem 1.3rem; cursor: pointer; }
.visite-profil:hover { background: var(--bleu-pale); }
.visite-profil.actif { background: var(--bleu); color: white; }
.visite-scene { background: linear-gradient(160deg, var(--c-blanc) 0%, var(--bleu-pale) 100%); border: 1px solid var(--trait); border-radius: 12px; padding: 1.4rem 1rem; display: flex; justify-content: center; }
.telephone { width: min(300px, 100%); background: var(--c-texte-fort); border-radius: 40px; padding: 10px; box-shadow: 0 18px 40px rgba(29, 77, 147, 0.25); }
.telephone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.schema { width: 100%; }
.schema img { display: block; width: 100%; height: auto; border-radius: 8px; }
.note-ics { margin: 1rem 0 0; padding: 0.8rem 1rem; background: var(--bleu-pale); border: 1px solid var(--c-bleu-bord); border-radius: 10px; font-size: 0.9rem; color: var(--encre); text-align: left; }

/* Accueil et fonctionnalités : « Vos salariés ont tout dans leur poche » */
.poche { padding-block: 2.6rem; background: white; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.poche .enveloppe { max-width: 980px; text-align: center; }
.poche-image { display: block; width: 100%; max-width: 900px; height: auto; margin: 1.4rem auto 0; border-radius: 12px; }
.poche .exemple { font-size: 0.78rem; color: var(--c-texte-discret); margin: 0.6rem 0 0; }
.poche .note-ics { max-width: 760px; margin: 1.2rem auto 0; }
.poche-lien { margin: 1.4rem 0 0; }

/* 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: var(--c-texte-discret); margin: 0.7rem 0 0; text-align: center; }
.cadre-barre { display: flex; align-items: center; gap: 0.35rem; background: var(--c-bleu-fond-3); border-bottom: 1px solid var(--trait); padding: 0.55rem 0.8rem; }
.cadre-barre i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--c-bleu-bord); 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; }

/* Guide de mise en route en ligne (/guide) */
.guide-accueil, .guide-lecture { padding-block: 2.2rem 3rem; }
.guide-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.guide-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.9rem; }
.guide-carte { display: flex; gap: 0.9rem; align-items: flex-start; background: white; border: 1px solid var(--trait); border-radius: 10px; padding: 1rem 1.1rem; text-decoration: none; color: var(--encre); }
.guide-carte:hover { border-color: var(--bleu); box-shadow: 0 2px 10px rgba(29, 77, 147, 0.12); }
.guide-carte-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--bleu-pale); color: var(--bleu); font-family: "Baloo 2", sans-serif; font-weight: 700; }
.guide-carte-corps { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.guide-carte-corps small { color: var(--gris); font-size: 0.85rem; line-height: 1.4; }
.guide-grille { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; }
.guide-sommaire { position: sticky; top: 1rem; background: white; border: 1px solid var(--trait); border-radius: 10px; padding: 0.8rem; font-size: 0.88rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.guide-sommaire ol { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.guide-sommaire a { display: block; padding: 0.3rem 0.5rem; border-radius: 6px; text-decoration: none; color: var(--encre); }
.guide-sommaire a:hover { background: var(--bleu-pale); }
.guide-sommaire a.actif { background: var(--bleu); color: white; font-weight: 600; }
.guide-sommaire a.guide-retour { font-weight: 700; color: var(--bleu); }
.guide-article { background: white; border: 1px solid var(--trait); border-radius: 10px; padding: 1.6rem 2rem; min-width: 0; }
.guide-article h1 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--bleu); border-bottom: 3px solid var(--c-orange); padding-bottom: 0.5rem; margin-bottom: 1.2rem; }
.guide-article h2 { font-size: 1.3rem; color: var(--c-bleu-vif); margin: 1.6rem 0 0.5rem; }
.guide-article h3 { font-size: 1.1rem; color: var(--bleu); margin: 1.2rem 0 0.4rem; }
.guide-article p, .guide-article li { max-width: 72ch; }
.guide-article ul, .guide-article ol { padding-left: 1.4rem; }
.guide-article li { margin-bottom: 0.3rem; }
.guide-etapes li::marker { font-weight: 700; color: var(--bleu); }
.guide-figure { margin: 1.2rem 0; text-align: center; }
.guide-figure img { max-width: 100%; height: auto; border: 1px solid var(--trait); border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); }
.guide-figure figcaption { font-size: 0.82rem; color: var(--gris); font-style: italic; margin-top: 0.4rem; }
.guide-encadre { margin: 1.1rem 0; padding: 0.8rem 1rem; border-left: 6px solid var(--bleu); border-radius: 6px; background: var(--c-bleu-fond-2); }
.guide-encadre p { margin: 0.3rem 0 0; }
.guide-encadre-titre { display: block; color: var(--bleu); }
.guide-retenir { background: var(--c-orange-fond); border-color: var(--c-orange); } .guide-retenir .guide-encadre-titre { color: var(--c-orange-brun); }
.guide-attention { background: var(--c-rouge-fond); border-color: var(--c-rouge-vif); } .guide-attention .guide-encadre-titre { color: var(--c-rouge); }
.guide-exemple { background: var(--c-vert-fond); border-color: var(--c-vert-ok); } .guide-exemple .guide-encadre-titre { color: var(--c-vert-texte); }
.guide-tableau { overflow-x: auto; margin: 1.1rem 0; }
.guide-tableau table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.guide-tableau th { background: var(--bleu); color: white; text-align: left; }
.guide-tableau th, .guide-tableau td { border: 1px solid var(--c-bleu-bord); padding: 0.45rem 0.7rem; vertical-align: top; }
.guide-tableau tbody tr:nth-child(even) { background: var(--c-bleu-fond-4); }
.guide-pied { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--trait); }
.guide-aide-contact { color: var(--gris); font-size: 0.9rem; margin-top: 1.2rem; }
@media (max-width: 820px) {
    .guide-grille { grid-template-columns: minmax(0, 1fr); }
    .guide-sommaire { position: static; max-height: none; }
    .guide-article { padding: 1.1rem 1rem; }
}

/* Pages de contenu (gardes, absences, équipe) : FAQ et liens vers les autres pages */
.faq { max-width: 780px; }
.faq details { background: white; border: 1px solid var(--trait); border-radius: 10px; margin-bottom: 0.6rem; padding: 0.2rem 1.1rem; }
.faq summary { cursor: pointer; font-weight: 600; padding-block: 0.8rem; color: var(--encre); }
.faq details[open] summary { color: var(--bleu); }
.faq details p { margin: 0 0 1rem; color: var(--gris); }
.faq .faq-guide { text-align: center; margin-top: 1.4rem; }
.voir-aussi { padding-block: 1rem 3rem; }
.actions-centre { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }

/* Téléphone : l'en-tête passe sur deux lignes au lieu de déborder de l'écran */
@media (max-width: 700px) {
    .entete .enveloppe { flex-wrap: wrap; justify-content: center; }
    .entete nav { flex-wrap: wrap; justify-content: center; gap: 0.3rem 1rem; }
}

/* Demande de démonstration */
.enveloppe-etroite { max-width: 640px; }
.formulaire-demo { display: grid; gap: 1rem; background: white; border: 1px solid var(--trait); border-radius: 12px; padding: 1.4rem; }
.formulaire-demo label { display: grid; gap: 0.3rem; font-weight: 600; color: var(--bleu-fonce); font-size: 0.95rem; }
.formulaire-demo .facultatif { font-weight: 400; color: var(--gris); }
.formulaire-demo input, .formulaire-demo select, .formulaire-demo textarea { font: inherit; font-weight: 400; padding: 0.6rem 0.75rem; border: 1px solid var(--trait); border-radius: 8px; background: white; color: inherit; width: 100%; box-sizing: border-box; }
.formulaire-demo input:focus, .formulaire-demo select:focus, .formulaire-demo textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }
.formulaire-demo .bouton { justify-self: start; cursor: pointer; }
.formulaire-demo .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.demo-note { font-size: 0.82rem; color: var(--gris); margin: 0; }
.demo-suite { text-align: center; margin: 1.2rem 0 0; color: var(--gris); }
.demo-confirmation { background: var(--vert-pale, #e9f6ec); border: 1px solid #b9dfc1; border-radius: 12px; padding: 1.2rem 1.4rem; color: #1d5a2a; display: grid; gap: 0.3rem; }
.demo-erreurs { background: #fdeeee; border: 1px solid #f0c0c0; border-radius: 12px; padding: 0.8rem 1.2rem; color: #8a1f1f; margin-bottom: 1rem; }
.demo-erreurs ul { margin: 0; padding-left: 1.1rem; }
.tarifs-demo { text-align: center; color: var(--gris); margin: 1rem 0 0; }