/* Site public : thème autonome (aucune dépendance à jQuery ni à Bootstrap).
 * Couleurs reprises de l'existant : bleu #107ACA, orange #FD8F01. Pour changer l'allure du site, modifiez d'abord les variables ci-dessous. */
:root {
  --blue:#107ACA; --blue-d:#0b5a9c; --blue-dd:#0b2540; --blue-l:#eaf3fb;
  --orange:#FD8F01; --orange-d:#c86a00; --ink:#1d2733; --muted:#5a6b7b; --line:#dbe4ec; --bg:#f4f8fb;
  --radius:12px; --shadow:0 2px 14px rgba(11,37,64,.09);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body.sx { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.sx a { color:var(--blue-d); }
.sx img { max-width:100%; height:auto; }
.sx :focus-visible { outline:3px solid var(--orange); outline-offset:2px; }
.sx-skip { position:absolute; left:-999px; top:0; background:#fff; color:var(--ink); padding:.6rem 1rem; z-index:200; border-radius:0 0 8px 0; }
.sx-skip:focus { left:0; }
.sx-wrap { max-width:1040px; margin:0 auto; padding:0 1rem; }

/* ---- en-tête ---- */
.sx-header { position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 1px 0 var(--line), 0 4px 16px rgba(11,37,64,.06); }
.sx-bar { max-width:1040px; margin:0 auto; padding:.55rem 1rem; display:flex; align-items:center; gap:.5rem 1rem; flex-wrap:wrap; }
.sx-brand { font-weight:800; font-size:1.15rem; color:var(--blue-dd) !important; text-decoration:none; margin-right:auto; letter-spacing:.2px; }
.sx-brand::before { content:"✚"; color:var(--blue); margin-right:.45rem; }
.sx-nav { order:10; width:100%; border-top:1px solid var(--line); margin-top:.2rem; padding-top:.2rem; }
.sx-nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; }
.sx-nav a, .sx-nav button { display:block; font:inherit; font-size:.97rem; font-weight:600; color:var(--ink); background:none; border:0; padding:.55rem .8rem; border-radius:8px; cursor:pointer; text-decoration:none; }
.sx-nav a:hover, .sx-nav button:hover { background:var(--blue-l); color:var(--blue-d); }
.sx-nav a[aria-current="page"] { color:var(--blue-d); box-shadow:inset 0 -3px 0 var(--orange); border-radius:8px 8px 0 0; }
.sx-nav > ul > li { display:flex; align-items:center; }
.sx-dd { position:relative; }
.sx-dd > button::after { content:"▾"; margin-left:.3rem; font-size:.8em; }
.sx-dd > ul { display:none; position:absolute; left:0; top:100%; min-width:230px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:.35rem; flex-direction:column; align-items:stretch; gap:0; z-index:150; }
.sx-dd.is-open > ul { display:flex; }
@media (hover:hover) and (min-width:861px) { .sx-dd:hover > ul { display:flex; } }
.sx-dd > ul a { padding:.5rem .8rem; font-weight:500; }
.sx-cta { display:inline-block; background:var(--orange); color:#1a1100 !important; font-weight:800; text-decoration:none; padding:.6rem 1.15rem; border-radius:999px; box-shadow:0 2px 0 var(--orange-d); white-space:nowrap; }
.sx-cta:hover { background:#ffa11f; }
.sx-burger { display:none; font:inherit; font-weight:700; background:var(--blue-l); color:var(--blue-d); border:0; padding:.55rem 1rem; border-radius:8px; cursor:pointer; }
@media (max-width:860px) {
  .sx-burger { display:inline-block; }
  .sx-nav { display:none; }
  .sx-nav.is-open { display:block; }
  .sx-nav ul { flex-direction:column; align-items:stretch; padding:.3rem 0 .6rem; }
  .sx-nav a, .sx-nav button { width:100%; text-align:left; padding:.8rem .6rem; }
  .sx-dd > ul { position:static; display:none; box-shadow:none; border:0; border-left:3px solid var(--blue-l); border-radius:0; margin-left:.6rem; }
  .sx-dd.is-open > ul { display:flex; }
}

/* ---- titre de page ---- */
.sx-hero { background:linear-gradient(135deg, var(--blue-d), var(--blue)); color:#fff; padding:2.2rem 0 4.2rem; }
.sx-hero h1 { margin:0; font-size:2rem; font-size:clamp(1.7rem, 4.5vw, 2.5rem); line-height:1.15; font-weight:800; }

/* ---- contenu ---- */
.sx-main { max-width:1040px; margin:-2.8rem auto 3rem; padding:0 1rem; }
.sx-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.6rem 1.5rem 2rem; min-height:320px; }
@media (min-width:700px) { .sx-card { padding:2rem 2.4rem 2.4rem; } }
.sx-card h2 { margin:0 0 1rem; font-size:1.35rem; line-height:1.35; color:var(--blue-dd); }
.sx-card h3 { margin:1.6rem 0 .7rem; font-size:1.15rem; color:var(--blue-d); }

/* liste de conseils */
.sx-links { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:.9rem; }
.sx-links a { display:flex; align-items:center; min-height:72px; padding:1rem 1.2rem; background:var(--blue-l); border:1px solid #cfe2f3; border-left:6px solid var(--blue); border-radius:10px; font-weight:700; font-size:1.05rem; color:var(--blue-dd); text-decoration:none; }
.sx-links a:hover { background:#dcecfa; transform:translateY(-2px); box-shadow:var(--shadow); }
@media (prefers-reduced-motion:no-preference) { .sx-links a { transition:transform .15s, box-shadow .15s, background .15s; } }
.sx-empty { color:var(--muted); font-style:italic; }

/* ---- pied de page ---- */
.sx-footer { background:var(--blue-dd); color:#cfe0f1; padding:1.6rem 0; font-size:.93rem; }
.sx-footer a { color:#fff; }
.sx-footer p { margin:.2rem 0; }
/* OPTION (désactivée) : pour que « Consultez un médecin. » (vomissements, diarrhée) s'affiche en orange comme « Consultation du jour »
   et non en vert, supprimez la ligne « début » et la ligne « fin » qui entourent la règle ci-dessous.
-- début --
#frequence1, #deshydrat1, #facteurs1, #contexte1, #arret1 { --rc:#f77f00 !important; --rbg:#fff0e0 !important; }
-- fin -- */

@media print { .sx-header, .sx-footer, .sx-hero { display:none; } .sx-main { margin:0; } .sx-card { box-shadow:none; } }

/* ==========================================================
   ACCUEIL : BLOCS ET CARTES RESPONSIVES
   ========================================================== */

.sx-home-intro {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-left: 5px solid var(--orange);
    border-radius: var(--radius);
    background: var(--blue-l);
}

.sx-home-intro p {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

.sx-home-section {
    margin: 2rem 0;
}

.sx-home-section > h2 {
    margin: 0 0 1rem;
    color: var(--blue-dd);
    font-size: 1.4rem;
}

.sx-home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.sx-home-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.sx-home-tile h3 {
    margin: .5rem 0;
    color: var(--blue-dd);
    font-size: 1.1rem;
}

.sx-home-tile p {
    margin: .25rem 0 1rem;
    color: var(--muted);
}

.sx-home-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--blue-l);
    color: var(--blue-d);
    font-size: 1.5rem;
}

.sx-home-tile-orange {
    border-top: 4px solid var(--orange);
}

.sx-home-tile-orange .sx-home-icon {
    background: #fff0dc;
    color: var(--orange-d);
}

.sx-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    margin-top: auto;
    padding: .65rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--blue-d);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    overflow-wrap: anywhere;
}

.sx-home-button:hover {
    background: var(--blue-l);
}

.sx-home-button-primary {
    border-color: var(--orange);
    background: var(--orange);
    color: #1a1100;
}

.sx-home-button-primary:hover {
    background: #ffa11f;
    color: #1a1100;
}

.sx-home-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    overflow-wrap: anywhere;
}

.sx-home-panel iframe {
    display: block;
    max-width: 100%;
}

.sx-contact-content > *:first-child {
    margin-top: 0;
}

.sx-contact-content > *:last-child {
    margin-bottom: 0;
}

.sx-contact-content img {
    max-width: 100%;
    height: auto;
}

.sx-contact-content table {
    max-width: 100%;
}

.sx-home-video {
    min-height: 190px;
}

@media (max-width: 800px) {
    .sx-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .sx-home-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sx-home-intro {
        padding: 1rem;
    }

    .sx-home-tile {
        padding: 1rem;
    }

    .sx-home-button {
        width: 100%;
    }

    .sx-home-panel {
        padding: .65rem;
    }
}

.sx-video-button {
    display: block;
    padding: 12px 16px;
	border-color: var(--orange);
    background: var(--orange);
    border-radius: 10px;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
    transition: background .2s, border-color .2s;
}

.sx-video-button:hover,
.sx-video-button:focus-visible {
    background: var(--blue-l);
    border-color: var(--blue);
    color: #000000 !important;

}

.sx-video-button:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

/* =========================================
   Coordonnées : cartes et carte Google Maps
   ========================================= */

.coord-page {
    color: var(--ink);
    min-width: 0;
}

.coord-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
    margin: 8px 0 24px;
}

.coord-card {
    min-width: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-wrap: anywhere;
}

.coord-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--blue-l);
    font-size: 23px;
}

.coord-card h2 {
    margin: 0 0 14px;
    color: var(--blue-dd);
    font-size: 1.2rem;
    line-height: 1.4;
}

.coord-card p {
    margin: 0 0 12px;
    line-height: 1.7;
}

.coord-card p:last-child {
    margin-bottom: 0;
}

.coord-link {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--blue);
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    transition: background .2s ease;
}

.coord-link:hover {
    background: var(--blue-d);
    color: #fff;
}

.coord-link:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
}

.coord-map {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.coord-map iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}

@media (max-width: 900px) {
    .coord-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coord-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .coord-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .coord-card:last-child {
        grid-column: auto;
    }

    .coord-card {
        padding: 20px;
    }

    .coord-map iframe {
        height: 300px;
    }
}

/* ==========================================================================
   QUESTIONNAIRES « DOIS-JE CONSULTER ? » (fièvre, vomissements, diarrhée) — début
   Un seul système, commun aux 3 pages : .sx-consulter > .sx-intro / .sx-etape / .sx-resultat
   ========================================================================== */
.sx-consulter { max-width:780px; margin:0 auto; }
.sx-consulter *, .sx-consulter *::before, .sx-consulter *::after { box-sizing:border-box; }

/* introduction + choix du symptôme */
.sx-consulter .sx-intro { text-align:center; margin:0 0 1.6rem; }
.sx-consulter .sx-intro h2 { margin:0 0 1.2rem; font-size:1.25rem; font-size:clamp(1.2rem, 3vw, 1.65rem); line-height:1.4; color:var(--blue-dd); }
.sx-consulter .sx-intro h3 { margin:1.5rem 0 0; font-size:1.45rem; color:var(--blue-d); }
.sx-consulter .sx-symptomes { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.sx-consulter .sx-symptomes a { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.6rem 1.4rem; border:2px solid var(--orange); border-radius:999px; background:#fff; color:var(--ink); font-weight:700; text-decoration:none; }
.sx-consulter .sx-symptomes a:hover { background:#fff3e0; }
.sx-consulter .sx-symptomes a[aria-current="page"] { background:var(--orange); border-color:var(--orange-d); color:#1a1100; }

/* une étape = une carte */
.sx-consulter .sx-etape { margin:1.2rem 0; padding:1.1rem 1.2rem 1.4rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 1px 6px rgba(11,37,64,.06); }
.sx-consulter .sx-etape-titre { margin:0 0 1rem; padding:.7rem 1rem; background:var(--blue-l); color:var(--blue-dd); border-left:6px solid var(--blue); border-radius:8px; font-size:1.05rem; font-weight:700; line-height:1.35; text-align:left; }
.sx-consulter .sx-question { text-align:center; }
.sx-consulter .sx-question p { margin:.4rem 0 1rem; line-height:1.6; }
.sx-consulter ul { display:inline-block; max-width:100%; margin:.4rem auto 1rem; padding-left:1.4rem; text-align:left; }
.sx-consulter li { margin:.4rem 0; line-height:1.55; }

/* réponses */
.sx-consulter .sx-choix { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin:.8rem 0 .4rem; }
.sx-consulter .sx-choix-btn { appearance:none; -webkit-appearance:none; min-height:48px; max-width:100%; padding:.65rem 1.4rem; border:2px solid var(--blue); border-radius:999px; background:#fff; color:var(--blue-d); font:inherit; font-weight:700; line-height:1.3; text-align:center; cursor:pointer; }
.sx-consulter .sx-choix-btn:hover { background:var(--blue-l); }
.sx-consulter .sx-choix-btn:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }
.sx-consulter .sx-choix-btn.selectionne { background:var(--blue); border-color:var(--blue-d); color:#fff; }
.sx-consulter .sx-choix-btn.selectionne::before { content:"✓ "; }       /* l'état « choisi » ne repose pas que sur la couleur */

/* résultats : l'échelle de couleurs du Dr (rouge = 15, saumon = urgences, orange = consultation du jour, vert = conseils / consultation) */
.sx-consulter .sx-resultat { margin:1rem 0 .2rem; padding:1rem 1.2rem; border-left:8px solid var(--rc, #2d9f4f); border-radius:10px; background:var(--rbg, #e6f6ea); color:var(--ink); font-size:1.08rem; font-weight:700; line-height:1.5; text-align:left; }
.sx-consulter .sx-resultat a { color:inherit; text-decoration:underline; }
.sx-consulter .sx-r-15       { --rc:#d90429; --rbg:#ffe1e4; }
.sx-consulter .sx-r-urgence  { --rc:#e5383b; --rbg:#ffeaea; }
.sx-consulter .sx-r-jour     { --rc:#f77f00; --rbg:#fff0e0; }
.sx-consulter .sx-r-domicile { --rc:#2d9f4f; --rbg:#e6f6ea; }
/* OPTION (désactivée) : pour que « Consultez un médecin. » (vomissements, diarrhée) soit orange et non vert,
   supprimez la ligne « début » et la ligne « fin » qui entourent la règle ci-dessous.
-- début --
#frequence1, #deshydrat1, #facteurs1, #contexte1, #arret1 { --rc:#f77f00; --rbg:#fff0e0; }
-- fin -- */

/* conseils à domicile, rappel, vidéo, arrêt de travail */
.sx-consulter .sx-rappel { margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--line); text-align:center; }
.sx-consulter .sx-rappel h4 { margin:0 0 .5rem; font-size:1.05rem; color:var(--blue-d); }
.sx-consulter .sx-video { display:block; width:fit-content; max-width:100%; margin:.9rem auto 0; }
.sx-consulter .sx-video img { max-width:100%; height:auto; border-radius:10px; }
.sx-consulter .sx-arret { margin-top:1.6rem; padding-top:1.2rem; border-top:1px dashed var(--line); }

/* fièvre : signes de gravité */
.sx-consulter .sx-signes { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:.8rem; margin:.6rem 0 1rem; }
.sx-consulter .sx-signe { position:relative; }
.sx-consulter .sx-signe .sx-choix-btn { display:block; width:100%; min-height:72px; border-radius:14px; text-align:left; }
.sx-consulter .sx-signe--photo .sx-choix-btn { padding-right:5.2rem; }
.sx-consulter .sx-note { display:block; margin-top:.2rem; font-weight:400; font-style:italic; }
.sx-consulter .sx-miniature { position:absolute; right:.8rem; top:50%; width:45px; height:auto; transform:translateY(-50%); border:2px solid #d90429; border-radius:6px; cursor:help; }
.sx-consulter .sx-pupura { grid-column:1 / -1; text-align:center; margin:.2rem 0 .6rem; }
.sx-consulter .sx-pupura img { width:250px; max-width:100%; height:auto; border-radius:10px; }
.sx-consulter .sx-pupura em { display:block; margin-top:.4rem; color:var(--muted); }

@media (max-width:520px) {
  .sx-consulter .sx-etape { padding:1rem .9rem 1.2rem; }
  .sx-consulter .sx-choix { flex-direction:column; align-items:stretch; }
  .sx-consulter .sx-choix-btn { width:100%; }
}
@media (prefers-reduced-motion:no-preference) { .sx-consulter .sx-choix-btn, .sx-consulter .sx-symptomes a { transition:background .15s, color .15s; } }
/* QUESTIONNAIRES — fin */



            .sx-video-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 16px;
                margin: 20px 0;
                padding: 6px;
                min-height: 55px;
                border: 1px dashed #9bbce9;
                background: #fbfdff;
            }

            .sx-video-item {
                position: relative;
                display: block;
                width: 100%;
                min-width: 0;
                aspect-ratio: 16 / 9;
                overflow: hidden;
                background: #edf1f6;
                border: 1px solid #d8e3f0;
                border-radius: 8px;
                box-sizing: border-box;
            }

            .sx-video-item iframe {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 0;
            }

            .sx-video-placeholder {
                grid-column: 1 / -1;
                padding: 20px;
                border: 2px dashed #9bbce9;
                border-radius: 8px;
                color: #0051d2;
                text-align: center;
                background: #f4f8ff;
            }

            .sx-video-classic iframe {
                max-width: 100%;
            }

            @media (max-width: 800px) {
                .sx-video-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }
            }

            @media (max-width: 520px) {
                .sx-video-grid {
                    grid-template-columns: 1fr;
                }
            }