/*
 * TicTacODoc - feuille de style du site public (Bootstrap 5).
 * Couleurs reprises de l'identité d'origine (bleu, corail, bleu nuit)
 * et du logo (turquoise, jaune, pêche).
 */

:root {
    --tt-bleu: #46bae2;
    --tt-bleu-fonce: #2b9cc6;
    --tt-corail: #f2745f;
    --tt-corail-fonce: #e05a44;
    --tt-nuit: #363e50;
    --tt-vert: #33cc00;
    --tt-vert-fonce: #2aa800;
    --tt-vert-clair: #e3f9d6;
    --tt-turquoise: #7ed1cc;
    --tt-jaune: #ffee93;
    --tt-peche: #ffc09f;
    --tt-fond: #f4f6f9;
    --tt-texte: #2b2f38;
    --tt-texte-doux: #6b7280;
    --tt-rayon: 1rem;
    --tt-ombre: 0 .5rem 1.5rem rgba(54, 62, 80, .08);
    --tt-ombre-forte: 0 .75rem 2rem rgba(54, 62, 80, .16);
    --tt-hauteur-menu: 76px;

    --bs-body-font-family: 'Open Sans Variable', system-ui, sans-serif;
    --bs-body-color: var(--tt-texte);
    --bs-link-color-rgb: 43, 156, 198;
    --bs-link-hover-color-rgb: 242, 116, 95;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--tt-hauteur-menu);
}

body {
    overflow-x: hidden;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, .navbar, .btn, .titre-section {
    font-family: 'Nunito Variable', system-ui, sans-serif;
}

.text-sm { font-size: .8rem; }
.none { display: none !important; }

/* ---------- Boutons ---------- */

.btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .75rem;
    --bs-btn-font-weight: 800;
    --bs-btn-border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9rem;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--tt-ombre); }

.btn-bleu {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tt-bleu);
    --bs-btn-border-color: var(--tt-bleu);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tt-bleu-fonce);
    --bs-btn-hover-border-color: var(--tt-bleu-fonce);
    --bs-btn-active-bg: var(--tt-bleu-fonce);
    --bs-btn-active-color: #fff;
}

.btn-corail {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tt-corail);
    --bs-btn-border-color: var(--tt-corail);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tt-corail-fonce);
    --bs-btn-hover-border-color: var(--tt-corail-fonce);
    --bs-btn-active-bg: var(--tt-corail-fonce);
    --bs-btn-active-color: #fff;
}

.btn-vert {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tt-vert);
    --bs-btn-border-color: var(--tt-vert);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tt-vert-fonce);
    --bs-btn-hover-border-color: var(--tt-vert-fonce);
    --bs-btn-active-bg: var(--tt-vert-fonce);
    --bs-btn-active-color: #fff;
}

.btn-contour-blanc {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--tt-nuit);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

/* ---------- Menu ---------- */

.site-header .navbar {
    min-height: var(--tt-hauteur-menu);
    background-color: rgba(255, 255, 255, .97);
    transition: box-shadow .2s ease;
}

.site-header .navbar.scrolled { box-shadow: var(--tt-ombre); }

#logoComplet { height: 48px; width: auto; }

.site-header .nav-link {
    color: var(--tt-texte-doux);
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .5rem 1rem !important;
    border-radius: 2rem;
    transition: color .2s ease, background-color .2s ease;
}

.site-header .nav-link:hover { color: var(--tt-corail); }

.site-header .nav-link.active {
    color: #fff;
    background-color: var(--tt-corail);
}

.site-header .navbar-toggler {
    border: none;
    background-color: var(--tt-corail);
    border-radius: .75rem;
    padding: .5rem .65rem;
}

.site-header .navbar-toggler-icon { filter: invert(1); }
.site-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(242, 116, 95, .35); }

/* ---------- Sections ---------- */

section { padding: 5rem 0; }

.titre-section {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: .75rem;
}

.titre-section::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: .75rem auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--tt-turquoise), var(--tt-jaune), var(--tt-peche));
}

.intro-section {
    color: var(--tt-texte-doux);
    max-width: 860px;
    margin: 0 auto 3rem;
}

.carte {
    background-color: #fff;
    border-radius: var(--tt-rayon);
    box-shadow: var(--tt-ombre);
    padding: 1.75rem;
}

/* Bandeau d'accueil */

.banner {
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding: calc(var(--tt-hauteur-menu) + 3rem) 0 4rem;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(54, 62, 80, .85), rgba(70, 186, 226, .55)),
        url(../img/High-temperature.jpg) center / cover no-repeat;
}

.banner .surtitre {
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: .95rem;
    color: var(--tt-jaune);
}

.banner h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.15;
    margin: 1rem 0 1.5rem;
}

.banner .lead { font-weight: 600; max-width: 720px; }

/* Avertissement et Diffusion */

#avertissement, #diffusion {
    background: linear-gradient(135deg, var(--tt-bleu), var(--tt-bleu-fonce));
    color: #fff;
}

#avertissement .titre-section, #diffusion .titre-section { color: #fff; }

#avertissement .encadre, #diffusion .encadre {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    border-radius: var(--tt-rayon);
    background-color: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    font-weight: 600;
}

#avertissement a, #diffusion .encadre a:not(.btn) { color: var(--tt-jaune); font-weight: 800; }
#avertissement .these { color: var(--tt-nuit); background-color: var(--tt-jaune); padding: 0 .35rem; border-radius: .3rem; }

/* ---------- Questionnaire ---------- */

#questionnaire { background-color: var(--tt-fond); }

#chat {
    list-style: none;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
}

#chat li.question {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

#chat .chat-avatar {
    flex: 0 0 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.4rem;
    background-color: var(--tt-turquoise);
    box-shadow: var(--tt-ombre);
}

#chat .chat-bulle {
    flex: 1;
    background-color: #fff;
    border-radius: 0 var(--tt-rayon) var(--tt-rayon) var(--tt-rayon);
    box-shadow: var(--tt-ombre);
    padding: 1.25rem 1.5rem;
}

#chat .chat-bulle h4 { font-size: 1.15rem; font-weight: 800; margin: 0; }
#chat .chat-bulle i { color: var(--tt-texte-doux); }
#chat .chat-bulle p { margin: .5rem 0 0; }

#chat li.answers { margin: 0 0 2rem 68px; }

#chat .liste-reponses {
    display: grid;
    gap: .75rem;
}

#chat li.answers .answer {
    background-color: #fff;
    border: 2px solid transparent;
    border-left: 5px solid var(--tt-jaune);
    border-radius: .75rem;
    box-shadow: var(--tt-ombre);
    padding: .85rem 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}

#chat li.answers .answer p { margin: 0; }

/* Les mots très longs (liens, termes médicaux) passent à la ligne au lieu de déborder */
#chat .chat-bulle, #chat li.answers .answer, #conclusions > li, .directConclusion { overflow-wrap: anywhere; }
#chat li.answers .answer:hover { transform: translateX(4px); border-color: var(--tt-turquoise); }

#chat li.answers .answer.selected {
    background-color: var(--tt-vert-clair);
    border-color: var(--tt-vert);
}

#chat li.answers .answer.selected::after {
    content: "\f00c";
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    float: right;
    color: var(--tt-vert);
}

#startQuestionnaire { display: flex; justify-content: center; margin: 1rem 0 2rem; }

@media (max-width: 575.98px) {
    #chat li.answers { margin-left: 0; }
    #chat .chat-avatar { flex-basis: 40px; height: 40px; font-size: 1.1rem; }
}

/* ---------- Conclusion ---------- */

#sectionConclusion {
    padding: 3rem 0 4rem;
    background:
        linear-gradient(rgba(54, 62, 80, .88), rgba(54, 62, 80, .88)),
        url(../img/stethoscope.jpg) center / cover no-repeat;
}

#sectionConclusion .titre-section { color: var(--tt-corail); }

#conclusions { list-style: none; padding: 0; margin-top: 2rem; }

#conclusions > li, .directConclusion {
    background-color: #fff;
    color: var(--tt-texte);
    border-radius: var(--tt-rayon);
    box-shadow: var(--tt-ombre-forte);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

#conclusions li li, .directConclusion li { margin-left: 2rem; }

.directConclusion { list-style: none; }
.directConclusion > div + div { margin-top: .75rem; }

.integratedPhoto { width: 100%; border-radius: .75rem; }

.weightParacetamol {
    color: var(--tt-corail);
    border: 2px solid var(--tt-corail);
    border-radius: .75rem;
    padding: .5rem .75rem;
    cursor: pointer;
    font-weight: 700;
}

.dosagesParacetamol { display: inline-block; padding-left: 2.5rem; list-style: disc; }

/* ---------- Fiches conseils / FAQ ---------- */

#fichesConseils { background-color: var(--tt-fond); }

.liste-fiches {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.liste-fiches a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-radius: .75rem;
    background-color: #fff;
    box-shadow: var(--tt-ombre);
    color: var(--tt-texte);
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.liste-fiches a::before {
    content: "\f1c1";
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    color: var(--tt-corail);
    font-size: 1.2rem;
}

.liste-fiches a:hover { transform: translateX(4px); }
.liste-fiches a.active { background-color: var(--tt-bleu); color: #fff; }
.liste-fiches a.active::before { color: #fff; }

.tabgroup > div { display: none; }

.tabgroup .text-content {
    background-color: #fff;
    border-radius: var(--tt-rayon);
    box-shadow: var(--tt-ombre);
    overflow: hidden;
}

.tabgroup .text-content h4 {
    font-size: 1.1rem;
    font-weight: 800;
    padding: 1.25rem 1.5rem .5rem;
    margin: 0;
}

.tabgroup iframe { display: block; width: 100%; height: 520px; border: none; }

.fiches-vide {
    display: grid;
    place-items: center;
    min-height: 200px;
    border: 2px dashed #cfd6df;
    border-radius: var(--tt-rayon);
    color: var(--tt-texte-doux);
    text-align: center;
    padding: 2rem;
}

.liens-ameli a {
    display: flex;
    align-items: center;
    height: 100%;
    gap: .5rem;
    padding: .9rem 1.1rem;
    border-radius: .75rem;
    background-color: #fff;
    box-shadow: var(--tt-ombre);
    color: var(--tt-texte-doux);
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
}

.liens-ameli a::after {
    content: "\f08e";
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: .75rem;
}

.liens-ameli a:hover { color: var(--tt-bleu-fonce); transform: translateY(-2px); }

/* ---------- À propos ---------- */

#apropos {
    background: linear-gradient(135deg, var(--tt-corail), #f08a6b);
    color: #fff;
}

#apropos .titre-section { color: #fff; }

#apropos .carte { color: var(--tt-texte); height: 100%; }

#apropos .carte h4 {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--tt-corail);
    margin-bottom: 1rem;
}

#apropos .carte h4 i { margin-right: .5rem; }

.mot-auteure {
    font-size: 1.05rem;
    border-left: 5px solid var(--tt-turquoise);
}

.generalTerms dt { color: var(--tt-corail); }
.generalTerms dd { padding-bottom: 1rem; }

/* ---------- Contact ---------- */

#contact .form-control {
    border: 2px solid transparent;
    background-color: var(--tt-fond);
    border-radius: .75rem;
}

#contact .form-control:focus {
    border-color: var(--tt-bleu);
    box-shadow: 0 0 0 .2rem rgba(70, 186, 226, .2);
    background-color: #fff;
}

#contact .form-floating > label { color: var(--tt-texte-doux); }

/* ---------- Diffusion / Remerciements / Pied de page ---------- */

#acknowledgements {
    background-color: var(--tt-nuit);
    color: #fff;
    padding: 3rem 0;
}

footer { background-color: var(--tt-nuit); }

footer .back-to-top {
    display: block;
    text-align: center;
    padding: 1rem 0;
    color: #fff;
    background-color: var(--tt-bleu);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

footer .back-to-top i { display: block; font-size: 1.75rem; }
footer .back-to-top:hover { background-color: var(--tt-bleu-fonce); color: #fff; }

/* ---------- Notifications ---------- */

.swal2-popup.swal2-toast .swal2-title { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .liste-fiches a, #chat li.answers .answer, .liens-ameli a { transition: none; }
}