/* creche.liha.fr : ajouts à site/styles.css (copie du CSS de liha.fr, 30/10/2026) pour la page des crèches.
   Mêmes couleurs, même police, mêmes composants : on ne redéfinit ici que ce qui est propre à la page. */

/* ---------- 1. Hero : le titre tient sur deux lignes, la conversation à droite ---------- */
.hero-creche .hero-titre {
    font-size: clamp(36px, 5vw, 60px);
}

/* Le surtitre sur deux lignes : la marque, puis pour qui (commentaire de Bok, 30/10/2026). */
.surtitre-double span {
    display: block;
}

.surtitre-double .surtitre-marque {
    margin-bottom: 4px;
    font-size: 17px;
    letter-spacing: 0.04em;
    color: var(--encre);
}

.hero-creche .hero-grille {
    margin-top: 0;
}

.hero-creche .hero-sous {
    margin-top: 20px;
}

.hero-creche .boutons {
    gap: 14px 24px;
}

/* « Vu dans LIHA » : une conversation, dans la fenêtre de la démo. */
.vu-liha {
    margin: 0;
}

.vu-fil {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.vu-mention {
    font-size: 13.5px;
    font-style: italic;
    color: var(--discret);
}

/* Le texte préparé par LIHA : une lettre, pas une citation. */
.lettre {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--encre);
}

.lettre ol {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 22px;
}

.lettre-courte {
    padding-left: 14px;
    border-left: 2px solid var(--signal);
}

/* ---------- Liens « être rappelée par Baudouin » : un lien vers le téléphone, qui ouvre la fenêtre de rappel ---------- */
.lien-rappel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: var(--signal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lien-rappel:hover {
    color: var(--encre);
}

.hero-rappel {
    margin-top: 2px;
    font-size: 15.5px;
}

/* ---------- 2. Démo : cinq situations ---------- */
.situations {
    max-width: 960px;
    margin: 32px auto 0;
}

/* Les cinq onglets sur une seule ligne (commentaire de Bok, 30/10/2026) : ils tiennent en 960 px ;
   plus étroit, la bande défile à l'horizontale. position: relative sert de repère à creche.js. */
.situations-onglets {
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.situations-onglets::-webkit-scrollbar {
    display: none;
}

.situations-onglets [role="tab"] {
    flex: none;
    white-space: nowrap;
}

.situations-onglets[hidden] {
    display: none;
}

/* Sans JavaScript, les quatre situations s'empilent, chacune avec son titre. */
.situation + .situation {
    border-top: 1px solid var(--trait);
}

.situation-titre {
    font-size: 18px;
}

.situations.est-active .situation-titre {
    display: none;
}

.situations.est-active .situation + .situation {
    border-top: 0;
}

.situation[hidden] {
    display: none;
}

/* La réponse s'affiche en entier, sans défilement dans la carte. */
.situation.demo-panneau {
    min-height: 0;
}

.situation .msg {
    max-width: 100%;
}

.situation .msg-agent {
    max-width: 88%;
}

.situation-etiquette {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--discret);
}

.situation-etiquette:nth-of-type(1) {
    align-self: flex-end;
}

.situations .sources {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.situations .sources .ico,
.vu-liha .sources .ico {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    color: var(--signal);
}

.vu-liha .sources {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sources-aucune {
    font-size: 13.5px;
    color: var(--discret);
}

.situations-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

.situations-pied p {
    flex: 1 1 320px;
    font-size: 15px;
    color: var(--discret);
}

/* ---------- 3. Ce que vous pouvez lui confier : les grandes cartes qui s'empilent ----------
   Reprend .pile de site/styles.css (version B). Les cartes sont assez grandes pour que les textes et les
   animations gardent leur taille normale : la carte lue est toujours à 100 %, seule celle du dessous recule. */
.pile-creche {
    margin-top: 40px;
}

.pile-creche .pile-carte {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    padding: 48px;
}

.pile-creche .pile-texte h3 {
    font-size: clamp(28px, 3.2vw, 40px);
}

.pile-creche .pile-texte p {
    font-size: 19px;
}

.pile-creche .pile-visuel {
    margin: 0;
    min-height: 400px;
}

@media (min-width: 861px) and (min-height: 640px) {
    .pile-creche .pile-carte {
        min-height: min(600px, calc(100vh - 160px));
    }
}

/* Une carte de la démo, posée dans le visuel. */
.carte-fenetre {
    width: 100%;
    max-width: 520px;
}

.carte-parent .lettre {
    min-height: 7.5em;
}

/* Carte 02 : la note de service, les consignes arrivent l'une après l'autre. */
.note-service {
    width: 100%;
    max-width: 480px;
    padding: 28px;
    border-radius: 16px;
    background: var(--blanc);
    box-shadow: 0 24px 48px -32px rgba(18, 20, 43, 0.35);
}

.note-service-tete {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--trait);
    font-size: 18px;
    font-weight: 600;
    color: var(--encre);
}

.note-service-tete span {
    font-size: 14px;
    font-weight: 400;
    color: var(--discret);
}

.note-service-liste {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.note-service-liste li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--encre);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.note-service-liste .ico {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 3px;
    color: var(--signal);
}

.note-service-pret {
    display: inline-block;
    margin-top: 20px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--signal-pale);
    color: #3A2BC7;
    font-size: 13.5px;
    font-weight: 600;
    transition: opacity 0.5s ease;
}

.carte-equipe.est-attente .note-service-liste li {
    opacity: 0;
    transform: translateY(8px);
}

.carte-equipe.est-attente .note-service-pret {
    opacity: 0;
}

.carte-equipe .note-service-liste li:nth-child(2) { transition-delay: 0.5s; }
.carte-equipe .note-service-liste li:nth-child(3) { transition-delay: 1s; }
.carte-equipe .note-service-pret { transition-delay: 1.6s; }

/* Carte 03 : les notes en vrac, puis le document propre. */
.carte-admin {
    flex-direction: column;
    gap: 10px;
}

.vrac,
.propre {
    width: 100%;
    max-width: 480px;
    padding: 16px 22px;
    border-radius: 16px;
    background: var(--blanc);
}

.vrac {
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px dashed var(--trait);
}

.vrac-titre,
.propre-titre {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--discret);
}

.vrac-texte {
    font-size: 16px;
    font-style: italic;
    color: var(--texte);
}

.propre {
    box-shadow: 0 24px 48px -32px rgba(18, 20, 43, 0.35);
}

.propre-titre {
    font-size: 18px;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--encre);
}

.propre-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-left: 22px;
    color: var(--encre);
}

.propre-liste li {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.propre-liste b {
    font-weight: 600;
}

.carte-admin .avant-apres-fleche {
    transform: rotate(90deg);
}

.carte-admin.est-attente .propre-liste li {
    opacity: 0;
    transform: translateY(8px);
}

.carte-admin .propre-liste li:nth-child(1) { transition-delay: 0.6s; }
.carte-admin .propre-liste li:nth-child(2) { transition-delay: 1.1s; }
.carte-admin .propre-liste li:nth-child(3) { transition-delay: 1.6s; }

@media (max-width: 860px) {
    .pile-creche .pile-carte {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px;
        gap: 24px;
    }
    .pile-creche .pile-texte p {
        font-size: 17px;
    }
    .pile-creche .pile-visuel {
        min-height: 0;
    }
}

/* ---------- 4. Comment ça marche : l'aide au démarrage ---------- */
.comment-etape {
    background: var(--blanc);
}

.demarrage {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    margin-top: 24px;
    padding: 28px 32px;
    border-radius: var(--rayon);
    background: var(--blanc);
    border: 1.5px solid var(--signal);
}

.demarrage h3 {
    font-size: 21px;
}

.demarrage-chapo {
    margin-top: 8px;
    font-weight: 500;
    color: var(--encre);
}

.demarrage-liste {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.demarrage-liste li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.demarrage-liste .ico {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 2px;
    color: var(--signal);
}

/* La bulle de Baudouin : ce qu'elle n'aura pas chez ChatGPT (commentaire de Bok, 30/10/2026). */
.bulle-equipe {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.bulle-equipe-texte {
    position: relative;
    margin: 0;
    padding: 18px 20px;
    border-radius: 18px 18px 18px 4px;
    background: var(--brume);
    color: var(--encre);
    font-size: 16px;
    line-height: 1.5;
}

.bulle-equipe-qui {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--discret);
}

.bulle-equipe-qui img {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
}

.bulle-equipe-qui strong {
    display: block;
    font-size: 15px;
    color: var(--encre);
}

/* ---------- 5. LIHA connaît votre crèche ---------- */
/* Titres des blocs en deux colonnes : même taille que ceux de .bloc-tete. */
.documents h2 {
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.documents {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: center;
}

.documents-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.documents-pastilles li {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--signal-pale);
    color: #3A2BC7;
    font-size: 14.5px;
    font-weight: 600;
}

/* ---------- 6. ChatGPT : quatre lignes seulement ---------- */
#chatgpt .comparatif-cadre {
    background: var(--blanc);
}

#chatgpt .comparatif-phrase {
    font-size: clamp(18px, 2vw, 22px);
}

/* Les IA du marché en option : leurs logos, et à quoi elles serviront (commentaire de Bok, 30/10/2026). */
.ia-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    text-align: center;
}

.ia-option .comparatif-phrase {
    margin: 0;
}

.ia-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ia-logos li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--blanc);
    border: 1px solid var(--trait);
    font-size: 15px;
    font-weight: 600;
    color: var(--encre);
}

.ia-option-texte {
    max-width: 560px;
    color: var(--discret);
}

/* ---------- 9. Prix : une seule carte, centrée ---------- */
.offre-creche {
    max-width: 560px;
    margin: 32px auto 0;
}

.offre-creche .offre-sous {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--texte);
}

.offre-creche .offre-corps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.offre-option {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--brume);
    font-size: 15px;
}

.offre-creche .btn {
    align-self: stretch;
    justify-content: center;
}

.offre-creche .note,
.offre-rappel {
    text-align: center;
}

.offre-ttc {
    margin-top: 2px;
    font-size: 15px;
    color: var(--discret);
}

.offre-rappel {
    margin-top: -6px;
}

/* Direction et gestionnaires, sous la carte prix. */
.decideurs {
    display: grid;
    gap: 12px;
    max-width: 760px;
    margin: 32px auto 0;
    padding: 0;
    list-style: none;
}

.decideur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 20px 24px;
    border-radius: var(--rayon);
    background: var(--brume);
}

.decideur p {
    flex: 1 1 320px;
    color: var(--texte);
}

.decideur strong {
    color: var(--encre);
}

.decideur-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Fenêtre de rappel : la photo de Baudouin à côté du titre. */
.rappel-titre {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rappel-titre img {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
}

/* ---------- 10. Questions : la FAQ et le mini chat « Posez vos questions » (même grille que liha.fr) ---------- */
.questions-creche .faq-creche {
    margin: 0;
}

/* ---------- Téléphone ---------- */
@media (max-width: 960px) {
    .documents {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 720px) {
    /* Les onglets deviennent des pastilles qui défilent à l'horizontale. */
    .situations-onglets {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -16px 12px;
        padding: 0 16px 4px;
        scrollbar-width: none;
    }
    .situations-onglets::-webkit-scrollbar {
        display: none;
    }
    .situations-onglets [role="tab"] {
        flex: none;
        white-space: nowrap;
    }
    .demarrage {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px;
    }
    .situation .msg-agent {
        max-width: 100%;
    }
    .situations-pied .btn {
        width: 100%;
        justify-content: center;
    }
}