/* =====================================================================
   jOOy — UI partagée : méga menu à icônes + menu accessibilité/langue
   + thème clair/sombre/auto + confort de lecture + typo dyslexie
   Injecté sur toutes les pages via une ligne d'include.
   v2.0 — 2026-06-03
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. POLICE DYSLEXIE — OpenDyslexic (auto-hébergée, licence SIL OFL)
   --------------------------------------------------------------------- */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('fonts/OpenDyslexic-Regular.woff') format('woff');
    font-weight: 300 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('fonts/OpenDyslexic-Bold.woff') format('woff');
    font-weight: 600 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('fonts/OpenDyslexic-Italic.woff') format('woff');
    font-weight: 300 500; font-style: italic; font-display: swap;
}
html.jooy-dyslexic body,
html.jooy-dyslexic body * {
    font-family: 'OpenDyslexic', 'Inter', sans-serif !important;
}
html.jooy-dyslexic body {
    letter-spacing: .015em; word-spacing: .1em; line-height: 1.85;
}

/* ---------------------------------------------------------------------
   1. MODE CONFORT DE LECTURE — agrandit le texte proportionnellement
   --------------------------------------------------------------------- */
html.jooy-comfort { font-size: 112.5%; }              /* ~16px -> 18px */
html.jooy-comfort body { line-height: 1.85; }
@media (max-width: 768px) { html.jooy-comfort { font-size: 109%; } }

/* ---------------------------------------------------------------------
   2. THÈME SOMBRE v2 — charbon neutre, accents de marque préservés
   --------------------------------------------------------------------- */
/* --surface : fond des cartes (les pages ont été transformées pour
   utiliser var(--surface) en background à la place de var(--white) ;
   var(--white) reste BLANC partout, y compris en sombre, car il sert
   aussi de couleur de texte sur les bandeaux foncés). */
/* Variables « fond » : les pages ont été transformées pour que les
   déclarations background utilisent ces variables-ci. Les variables
   d'origine (--white, --forest, --leaf, --forest-dark, --sky…) restent
   des couleurs de TEXTE/accent et basculent différemment en sombre. */
:root {
    --surface: #FFFFFF;          /* ex var(--white) en fond            */
    --deep: #1E3D2A;             /* ex var(--forest-dark) en fond      */
    --brand-a: #2D5A3D;          /* ex var(--forest) en fond           */
    --brand-b: #4A8C5C;          /* ex var(--leaf) en fond             */
    --brand-c: #6BAF7E;          /* ex var(--leaf-light) en fond       */
    --brand-sky: #87CEEB;        /* ex var(--sky) en fond              */
    --brand-sky-light: #B8E2F8;  /* ex var(--sky-light) en fond        */
}

:root[data-theme="dark"] {
    /* fonds */
    --surface: #1A201C;          /* surfaces / cartes                  */
    --deep: #121C16;             /* fonds profonds : footer            */
    --brand-a: #21503A;          /* dégradés et boutons verts profonds */
    --brand-b: #2E6B47;
    --brand-c: #3A7D54;
    --brand-sky: #2C5666;
    --brand-sky-light: #24414E;
    --cream: #111513;            /* fond de page — neutre              */
    --sand: #1A211C;
    --sky-pale: #1C2823;         /* survol menus                       */
    /* texte / accents */
    --forest: #74BD8C;           /* vert accent : titres, liens, icônes */
    --forest-dark: #A3CFB2;      /* texte "vert foncé" devient clair   */
    --leaf: #5FA877;
    --leaf-light: #7FC79A;
    --sky: #8FC4DE;
    --gold: #D9BC66;
    --gold-light: #E4CE85;
    --text: #E8EDE9;
    --text-light: #9DACA1;
    color-scheme: dark;
    /* --white et --sky-light restent volontairement clairs (texte). */
}
:root[data-theme="dark"] body { background: var(--cream); color: var(--text); }

/* Nav (fond codé en dur dans les pages) */
:root[data-theme="dark"] nav,
:root[data-theme="dark"] nav#navbar {
    background: rgba(15, 19, 17, 0.93) !important;
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}
:root[data-theme="dark"] nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.5) !important; }
:root[data-theme="dark"] .menu-toggle span { background: var(--forest); }

/* Menus déroulants et panneaux */
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .jooy-panel { background: #161C18; border-color: rgba(255,255,255,0.09); box-shadow: 0 16px 48px rgba(0,0,0,0.6); }
:root[data-theme="dark"] .nav-links.open { background: #131815 !important; }

/* Bandeaux à dégradé de marque : en sombre, ils doivent rester SOMBRES
   (subtile identité verte, nettement plus foncés que les boutons). */
:root[data-theme="dark"] .entreprises-inner,
:root[data-theme="dark"] .intro-highlight,
:root[data-theme="dark"] .intro-v2-right,
:root[data-theme="dark"] .key-info,
:root[data-theme="dark"] .stats-bar,
:root[data-theme="dark"] .cause-section,
:root[data-theme="dark"] .quote-break,
:root[data-theme="dark"] .event-banner,
:root[data-theme="dark"] .ha-card-head.adhesion,
:root[data-theme="dark"] .related-img,
:root[data-theme="dark"] .news-img {
    background: linear-gradient(135deg, #151E18 0%, #1B2E22 60%, #16282E 100%) !important;
    border: 1px solid rgba(255,255,255,0.06);
}
:root[data-theme="dark"] .entreprises-feature { background: rgba(255,255,255,0.05); }

/* Variantes or : fond doré, texte sombre lisible */
:root[data-theme="dark"] .btn-gold,
:root[data-theme="dark"] .cta-banner .btn,
:root[data-theme="dark"] .support-card.featured .btn,
:root[data-theme="dark"] .btn-helloasso-gold,
:root[data-theme="dark"] .entreprises-cta { background: var(--gold) !important; color: #1C1606 !important; }

/* Bordures des cartes adoucies */
:root[data-theme="dark"] .public-card,
:root[data-theme="dark"] .preuve-card,
:root[data-theme="dark"] .benefice,
:root[data-theme="dark"] .roadmap-step,
:root[data-theme="dark"] .chip { border-color: rgba(255,255,255,0.07); }

/* ---------------------------------------------------------------------
   3. ICÔNES dans les menus déroulants
   --------------------------------------------------------------------- */
.dropdown-menu a.jooy-has-icon { display: flex; align-items: center; gap: .6rem; }
.jooy-ico {
    flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex;
    align-items: center; justify-content: center; color: var(--leaf);
}
.jooy-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dropdown-menu a:hover .jooy-ico { color: var(--forest); }

/* ---------------------------------------------------------------------
   4. MÉGA MENU — ancré à la barre de navigation, colonnes équilibrées
   --------------------------------------------------------------------- */
/* Le parent devient static : le menu se positionne par rapport au navbar
   (position fixed) → toujours centré, jamais coupé par le bord d'écran. */
@media (min-width: 769px) {
    .nav-links .has-dropdown.jooy-mega-host { position: static; height: 72px; display: inline-flex; align-items: center; }
    .dropdown-menu.jooy-mega {
        left: 50%; right: auto; top: 100%;
        transform: translateX(-50%) translateY(-6px);
        width: max-content; max-width: min(940px, 95vw);
        display: flex; align-items: stretch; gap: 0; padding: 1rem .6rem;
        border-radius: 0 0 18px 18px; border-top: none;
        margin-top: 0;
    }
    .has-dropdown:hover .dropdown-menu.jooy-mega,
    .has-dropdown:focus-within .dropdown-menu.jooy-mega,
    .has-dropdown.open .dropdown-menu.jooy-mega { transform: translateX(-50%) translateY(0); }
}
.jooy-mega-col { flex: 1 1 auto; min-width: 165px; max-width: 230px;
    display: flex; flex-direction: column; align-items: flex-start; padding: 0 .55rem; }
.jooy-mega-col + .jooy-mega-col { border-left: 1px solid rgba(45,90,61,0.10); }
:root[data-theme="dark"] .jooy-mega-col + .jooy-mega-col { border-left-color: rgba(255,255,255,0.08); }
.jooy-mega .dd-group { border-top: none !important; margin: 0 0 .15rem; padding: .2rem .5rem .3rem; }
.jooy-mega .dd-group + .dd-group,
.jooy-mega a + .dd-group { margin-top: .8rem; }      /* groupes empilés dans une même colonne */
.jooy-mega .dd-label { white-space: normal; line-height: 1.4; }
.jooy-mega a { white-space: normal !important; line-height: 1.35; width: 100%; }

/* ---------------------------------------------------------------------
   5. MENU ACCESSIBILITÉ & LANGUE
   --------------------------------------------------------------------- */
.jooy-tools { position: relative; margin-left: .25rem; list-style: none; }
.jooy-tools-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    width: auto; min-width: 42px; height: 38px; padding: 0 .7rem;
    background: transparent; border: 1px solid rgba(45,90,61,0.18);
    border-radius: 50px; color: var(--forest); cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.jooy-tools-btn:hover { background: var(--sky-pale); border-color: var(--leaf); }
.jooy-tools-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jooy-tools-btn .jooy-flag { font-size: 1rem; line-height: 1; }
:root[data-theme="dark"] .jooy-tools-btn { border-color: rgba(255,255,255,0.18); }
:root[data-theme="dark"] .jooy-tools-btn:hover { background: #1C2823; }

.jooy-panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 1002;
    width: 292px; background: var(--surface);
    border: 1px solid rgba(45,90,61,0.10); border-radius: 16px;
    box-shadow: 0 16px 48px rgba(45,90,61,0.16); padding: .9rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.jooy-tools.open .jooy-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.jooy-panel-label { font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.1px; color: var(--gold); margin: .2rem .15rem .5rem; display: block; }
.jooy-panel-sep { height: 1px; background: rgba(45,90,61,0.10); margin: .9rem 0 .6rem; border: none; }
:root[data-theme="dark"] .jooy-panel-sep { background: rgba(255,255,255,0.10); }

/* Segments (thème, typographie) */
.jooy-seg { display: grid; gap: .3rem; background: var(--sand); border-radius: 12px; padding: .3rem; }
.jooy-seg.seg-3 { grid-template-columns: repeat(3, 1fr); }
.jooy-seg.seg-2 { grid-template-columns: repeat(2, 1fr); }
:root[data-theme="dark"] .jooy-seg { background: #121814; }
.jooy-seg button {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .5rem .2rem; border: none; background: transparent; border-radius: 9px;
    color: var(--text-light); font-size: .72rem; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: background .18s, color .18s, box-shadow .18s;
}
.jooy-seg button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jooy-seg button:hover { color: var(--forest); }
.jooy-seg button[aria-pressed="true"] { background: var(--surface); color: var(--forest);
    box-shadow: 0 2px 8px rgba(45,90,61,0.12); }
:root[data-theme="dark"] .jooy-seg button[aria-pressed="true"] { background: #243029; }

/* Bascule confort */
.jooy-toggle-row { display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .5rem .15rem .2rem; }
.jooy-toggle-row .lbl { display: flex; align-items: center; gap: .5rem; font-size: .85rem;
    font-weight: 600; color: var(--text); }
.jooy-toggle-row .lbl svg { width: 18px; height: 18px; stroke: var(--leaf); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jooy-panel .sub { font-size: .72rem; color: var(--text-light); font-weight: 500; display: block; margin: .1rem 0 0 .15rem; }
.jooy-switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px;
    border-radius: 50px; background: rgba(45,90,61,0.22); border: none; cursor: pointer;
    transition: background .2s; }
.jooy-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.jooy-switch[aria-pressed="true"] { background: var(--leaf); }
.jooy-switch[aria-pressed="true"]::after { transform: translateX(18px); }

/* Langues */
.jooy-langs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.jooy-langs button {
    display: flex; align-items: center; gap: .5rem; padding: .5rem .55rem;
    border: 1px solid transparent; background: transparent; border-radius: 10px;
    color: var(--text); font-size: .83rem; font-weight: 500; cursor: pointer;
    font-family: inherit; text-align: left; transition: background .18s, border-color .18s; }
.jooy-langs button .jooy-flag { font-size: 1.05rem; line-height: 1; }
.jooy-langs button:hover { background: var(--sky-pale); }
.jooy-langs button[aria-pressed="true"] { border-color: var(--leaf); background: var(--sky-pale); color: var(--forest); font-weight: 600; }

/* ---------------------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .nav-links.open li.jooy-tools { width: 100%; margin-left: 0; }
    .nav-links.open .jooy-tools-btn { width: 100%; justify-content: flex-start; height: 44px; }
    .nav-links.open .jooy-panel { position: static; width: 100%; opacity: 1; visibility: visible;
        transform: none; box-shadow: none; border: 1px solid rgba(45,90,61,0.12); margin-top: .5rem; }
    /* Le méga menu ne devient inline (et ne prend de la place) QUE déplié */
    .nav-links.open .has-dropdown.open .dropdown-menu.jooy-mega {
        position: static; transform: none !important; flex-direction: column;
        min-width: 0; width: 100%; max-width: none; box-shadow: none; padding: .4rem .2rem; }
    .nav-links.open .has-dropdown.open .jooy-mega-col { max-width: none; padding: 0; }
    .nav-links.open .has-dropdown.open .jooy-mega-col + .jooy-mega-col { border-left: none; }
}

/* Google Translate : jamais de bandeau ni de décalage */
.goog-te-banner-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* Focus clavier */
.jooy-tools-btn:focus-visible, .jooy-seg button:focus-visible,
.jooy-langs button:focus-visible, .jooy-switch:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }