/* ============================================================
   Glossaire v2 — Direction A polie
   Stack typo : Crimson Pro (titres) + Source Serif 4 (corps) + Amiri (AR) + Inter (UI)
   ============================================================ */

:root {
    /* Palette */
    --c-teal:           #0F4C4C;
    --c-teal-700:       #0c3f3f;
    --c-teal-50:        #eef5f5;
    --c-ink:            #111827;
    --c-ink-soft:       #374151;
    --c-ink-mute:       #6b7280;
    --c-line:           #e5e7eb;
    --c-line-soft:      #f1f0eb;
    --c-paper:          #faf8f3;
    --c-paper-deep:     #f3efe5;
    --c-white:          #ffffff;
    --c-gold:           #b08545;
    --c-gold-soft:      #e9dfc8;

    /* Typo */
    --f-title: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --f-body:  'Source Serif 4', 'Source Serif Pro', Georgia, serif;
    --f-ar:    'Amiri', 'Scheherazade New', 'Times New Roman', serif;
    --f-ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Métriques */
    --w-read:      680px;
    --w-content:   880px;
    --w-container: 1080px;

    /* Spacing */
    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: .75rem;
    --s-4: 1rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-24: 6rem;

    /* Radius */
    --r-1: 4px;
    --r-2: 6px;
    --r-3: 8px;
    --r-full: 999px;

    /* Shadow */
    --sh-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --sh-md: 0 4px 12px rgba(15, 23, 42, .06);
    --sh-lg: 0 12px 32px rgba(15, 23, 42, .10);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
}
body.gl-body {
    margin: 0;
    background: var(--c-paper);
    color: var(--c-ink);
    font-family: var(--f-body);
    font-size: 1rem;             /* 16px base */
    line-height: 1.6;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gl-body img { max-width: 100%; height: auto; display: block; }
.gl-body a {
    color: var(--c-teal);
    text-decoration: none;
    transition: color .15s;
}
.gl-body a:hover { color: var(--c-teal-700); }

[lang="ar"], .gl-ar, .aga-font {
    font-family: var(--f-ar);
    font-size: 1.05em;
    line-height: 1.5;
}
/* Honorifiques Allah ﷻ ﷲ ﷺ injectés depuis l'ex-classe aga-font :
   leur taille est légèrement bumpée pour qu'ils ne soient pas écrasés à côté du texte latin */
.gl-overlay__content .gl-fiche__content .aga-font {
    font-size: 1.4em;
    vertical-align: -0.1em;
    margin: 0 0.05em;
}

/* ===========================================================
   Header
   =========================================================== */
.gl-header {
    background: var(--c-white);
    border-bottom: 1px solid var(--c-line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.gl-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 14px 24px;
    max-width: var(--w-container);
    margin: 0 auto;
}
.gl-header__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--c-ink);
}
img.gl-header__logo {
    height: 30px;
    width: auto;
}
.gl-header__title {
    font-family: var(--f-ui);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--c-teal);
}
.gl-header__title small {
    display: block;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 12.5px;
    color: var(--c-ink-mute);
    max-width: 36ch;
    margin-top: 2px;
}
.gl-header__nav {
    display: flex;
    gap: 28px;
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 500;
}
.gl-header__nav a {
    color: var(--c-ink-soft);
    padding: 6px 2px;
    position: relative;
    text-decoration: none;
    transition: color .18s;
}
.gl-header__nav a:hover,
.gl-header__nav a:focus,
.gl-header__nav a:focus-visible {
    color: var(--c-teal);
    text-decoration: none;
}
.gl-header__nav a::after {
    content: '';
    position: absolute;
    left: 2px; right: 2px;
    bottom: 2px;
    height: 2px;
    background: var(--c-teal);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.gl-header__nav a:hover::after,
.gl-header__nav a:focus::after,
.gl-header__nav a:focus-visible::after { transform: scaleX(1); }

/* Lien brand (logo + titre) — pas de soulignement, hover doux. */
/* !important nécessaire pour battre la règle a:hover du thème softeam. */
.gl-header__brand,
.gl-header__brand:hover,
.gl-header__brand:focus,
.gl-header__brand:focus-visible,
.gl-header__brand:active,
.gl-header__brand *,
.gl-header__brand:hover * { text-decoration: none !important; }
.gl-header__brand:hover .gl-header__title { color: var(--c-teal-700); }

/* ===========================================================
   Hero
   =========================================================== */
.gl-hero {
    padding: 72px 24px 56px;
    text-align: center;
    border-bottom: 1px solid var(--c-line-soft);
}
.gl-hero__title {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: clamp(2.2rem, 4vw, 3rem);   /* 35-48px */
    line-height: 1.1;
    color: var(--c-ink);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.gl-hero__subtitle {
    font-family: var(--f-title);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--c-ink-soft);
    margin: 0 auto 28px;
    max-width: 580px;
    line-height: 1.45;
}
.gl-hero__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    font-family: var(--f-ui);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-ink-soft);
    box-shadow: var(--sh-sm);
}
.gl-hero__meta strong { color: var(--c-teal); font-weight: 600; }
.gl-hero__meta-sep { color: var(--c-line); user-select: none; }

/* ===========================================================
   Intro éditoriale (3 paragraphes, état collapsé + bouton "Lire")
   =========================================================== */
.gl-intro {
    padding: 36px 24px 0;
    will-change: opacity, transform;
    transition: opacity .25s ease-out;
    position: relative;
}
.gl-intro__inner {
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.16, 1, .3, 1);
    position: relative;
}
.gl-intro--collapsed .gl-intro__inner {
    max-height: 150px;
}
.gl-intro--collapsed .gl-intro__inner::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(250, 248, 243, 0), var(--c-paper) 85%);
    pointer-events: none;
}
.gl-intro p {
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--c-ink-soft);
    margin: 0 0 18px;
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
}
.gl-intro p:last-child { margin-bottom: 0; }
.gl-intro__lead {
    font-family: var(--f-title);
    font-style: italic;
    font-size: 19px !important;
    line-height: 1.55 !important;
    color: var(--c-ink) !important;
    text-align: center !important;
    margin: 0 0 14px !important;
    letter-spacing: -0.005em;
}
.gl-intro__expand {
    display: block;
    margin: 14px auto 0;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    color: var(--c-teal);
    font-family: var(--f-ui);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    position: relative;
    z-index: 2;
}
.gl-intro__expand:hover { background: var(--c-teal); color: var(--c-white); border-color: var(--c-teal); }
.gl-intro--expanded .gl-intro__expand { display: none; }

/* ===========================================================
   Search
   =========================================================== */
.gl-search {
    position: sticky;
    top: 78px;
    z-index: 45;
    background: var(--c-paper);
    padding: 16px 0 12px;
    margin: 24px 0 0;
}
.gl-search__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}
.gl-search__input {
    width: 100%;
    padding: 14px 18px 14px 48px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    background: var(--c-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16' y2='16'/></svg>") no-repeat 16px center / 18px;
    font-family: var(--f-ui);
    font-size: 15px;
    color: var(--c-ink);
    transition: border-color .15s, box-shadow .15s;
    box-shadow: var(--sh-sm);
}
.gl-search__input:focus {
    outline: none;
    border-color: var(--c-teal);
    box-shadow: 0 0 0 3px var(--c-teal-50), var(--sh-sm);
}
.gl-search__input::placeholder { color: var(--c-ink-mute); }
.gl-search__results-count {
    margin-top: 8px;
    font-family: var(--f-ui);
    font-size: 12.5px;
    color: var(--c-ink-mute);
    text-align: right;
}

/* ===========================================================
   Alphanav
   =========================================================== */
.gl-alphanav {
    position: sticky;
    top: 166px;
    z-index: 40;
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-line-soft);
    padding: 18px 0 14px;
    margin-top: 16px;
    margin-bottom: 40px;
}
.gl-alphanav__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    font-family: var(--f-ui);
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 0 24px;
}
.gl-alphanav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--r-2);
    color: var(--c-ink-soft);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.gl-alphanav a:hover,
.gl-alphanav a:focus,
.gl-alphanav a:focus-visible {
    background: var(--c-line-soft);
    color: var(--c-teal);
    text-decoration: none;
}
.gl-alphanav a.active {
    background: var(--c-teal);
    color: var(--c-white);
}

/* ===========================================================
   Index
   =========================================================== */
.gl-index { padding: 0 0 80px; }
.gl-index > .gl-container {
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 24px;
}

.gl-index__section { scroll-margin-top: 250px; }

.gl-index__featured {
    margin: 0 0 24px;
}
.gl-index__featured-label {
    font-family: var(--f-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c-gold);
    margin: 0 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.gl-index__featured-label::before {
    content: '★';
    color: var(--c-gold);
    font-size: 14px;
}
.gl-index__item--featured {
    border: 1.5px solid var(--c-teal) !important;
    box-shadow: 0 4px 16px rgba(15, 76, 76, .12);
    background: linear-gradient(180deg, #fffefb, #fffdf8);
}
.gl-index__section + .gl-index__section { margin-top: 32px; }

.gl-index__letter {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: 26px;
    color: var(--c-ink);
    margin: 72px 0 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-line);
    letter-spacing: -0.01em;
    position: relative;
}
.gl-index__letter::before {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 48px; height: 2px;
    background: var(--c-teal);
}

.gl-index__section:first-child .gl-index__letter { margin-top: 12px; }

.gl-index__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

button.gl-index__item {
    width: 100%;
    text-align: left;
    font: inherit;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    padding: 18px 22px;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
button.gl-index__item:hover {
    border-color: var(--c-teal);
    transform: translateY(-1px);
    box-shadow: var(--sh-md);
}
button.gl-index__item:focus-visible {
    outline: 2px solid var(--c-teal);
    outline-offset: 2px;
}

.gl-index__title {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    color: var(--c-ink);
    margin: 0 0 6px;
}
.gl-index__title .gl-translit {
    font-style: italic;
    font-weight: 400;
    color: var(--c-ink-mute);
    font-size: 16px;
}
.gl-index__title .gl-ar {
    font-family: var(--f-ar);
    font-weight: 400;
    color: var(--c-ink-soft);
    font-size: 18px;
    margin-left: 6px;
}

.gl-index__excerpt {
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--c-ink-soft);
    margin: 0;
    /* truncate à 2 lignes propre */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gl-index__item mark {
    background: var(--c-gold-soft);
    color: var(--c-ink);
    padding: 0 2px;
    border-radius: 2px;
}

.gl-index__item[hidden], .gl-index__section[hidden] { display: none !important; }

/* ===========================================================
   Overlay fiche (page individuelle en slide-in)
   =========================================================== */
.gl-overlay { position: fixed; inset: 0; z-index: 100; }
.gl-overlay[hidden] { display: none !important; }

.gl-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: glFade .25s ease-out;
}

.gl-overlay__panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 66.6667vw;
    min-width: 560px;
    max-width: 100%;
    background: var(--c-white);
    overflow-y: auto;
    box-shadow: 10px 0 40px rgba(0, 0, 0, .12);
    animation: glSlideIn .3s cubic-bezier(.16, 1, .3, 1);
}

.gl-overlay__close {
    position: sticky;
    top: 16px;
    margin-left: auto;
    margin-right: 16px;
    margin-bottom: -32px;
    z-index: 5;
    display: block;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    font-size: 18px;
    line-height: 1;
    color: var(--c-ink-soft);
    cursor: pointer;
    box-shadow: var(--sh-sm);
    transition: background .15s, color .15s, border-color .15s;
}
.gl-overlay__close:hover {
    background: var(--c-teal);
    color: var(--c-white);
    border-color: var(--c-teal);
}

.gl-overlay__content {
    max-width: var(--w-read);
    margin: 0 auto;
    padding: 56px 32px 80px;
}
.gl-overlay__loading {
    color: var(--c-ink-mute);
    text-align: center;
    padding: 80px 0;
    font-style: italic;
    font-family: var(--f-body);
}

.gl-overlay__content header {
    border-bottom: 1px solid var(--c-line);
    padding-bottom: 24px;
    margin-bottom: 32px;
}
.gl-overlay__content .gl-fiche__title {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);   /* 29-38px */
    color: var(--c-ink);
    margin: 0 0 8px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.gl-overlay__content .gl-fiche__subtitle {
    font-family: var(--f-title);
    font-style: italic;
    font-size: 18px;
    color: var(--c-ink-soft);
    margin: 0 0 16px;
    line-height: 1.4;
}
.gl-overlay__content .gl-fiche__subtitle .gl-ar {
    font-family: var(--f-ar);
    font-style: normal;
    font-size: 20px;
    margin-left: 8px;
    color: var(--c-ink);
}
.gl-overlay__content .gl-fiche__meta {
    font-family: var(--f-ui);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-ink-mute);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
}

.gl-overlay__content .gl-fiche__content {
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--c-ink);
}
.gl-overlay__content .gl-fiche__content > p:first-of-type::first-letter {
    font-family: var(--f-title);
    font-weight: 600;
    color: var(--c-teal);
    font-size: 3.6em;
    float: left;
    line-height: .85;
    margin: 6px 8px -2px 0;
}
/* Fiches "renvoi" (juste « Voir Autre Terme. ») : pas de lettrine, texte mis en valeur */
.gl-overlay__content .gl-fiche__content--renvoi > p:first-of-type::first-letter {
    font-family: var(--f-body);
    font-weight: inherit;
    color: inherit;
    font-size: 1em;
    float: none;
    line-height: inherit;
    margin: 0;
}
.gl-overlay__content .gl-fiche__content--renvoi > p:first-of-type {
    font-family: var(--f-title);
    font-style: italic;
    font-size: 22px;
    line-height: 1.4;
    color: var(--c-ink);
    margin: 12px 0 0;
}
.gl-overlay__content .gl-fiche__content--renvoi a.terme-crosslink {
    font-style: normal;
    font-weight: 600;
    border-bottom-width: 2px;
}
.gl-overlay__content .gl-fiche__content h2 {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: 24px;
    color: var(--c-ink);
    margin: 40px 0 12px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.gl-overlay__content .gl-fiche__content h3 {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: 19px;
    color: var(--c-ink);
    margin: 28px 0 10px;
    line-height: 1.3;
}
.gl-overlay__content .gl-fiche__content p {
    margin: 0 0 18px;
}
.gl-overlay__content .gl-fiche__content ul,
.gl-overlay__content .gl-fiche__content ol {
    margin: 0 0 20px;
    padding-left: 24px;
}
.gl-overlay__content .gl-fiche__content li { margin-bottom: 8px; }
.gl-overlay__content .gl-fiche__content strong { font-weight: 600; color: var(--c-ink); }
.gl-overlay__content .gl-fiche__content em { font-style: italic; }

.gl-overlay__content .gl-fiche__content blockquote {
    background: var(--c-paper);
    border-left: 3px solid var(--c-teal);
    margin: 24px 0;
    padding: 18px 24px;
    font-family: var(--f-title);
    font-style: italic;
    font-size: 17px;
    color: var(--c-ink-soft);
    border-radius: 0 var(--r-2) var(--r-2) 0;
}
.gl-overlay__content .gl-fiche__content blockquote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-family: var(--f-ui);
    font-size: 13px;
    color: var(--c-ink-mute);
    text-align: right;
}

.gl-overlay__content .gl-fiche__content a.terme-crosslink {
    color: var(--c-teal);
    text-decoration: none;
    border-bottom: 1px dotted var(--c-teal);
    padding-bottom: 1px;
    transition: background .12s, border-bottom-style .12s;
}
.gl-overlay__content .gl-fiche__content a.terme-crosslink:hover {
    background: var(--c-teal-50);
    border-bottom-style: solid;
}

/* Termes liés */
.gl-overlay__content .gl-related {
    margin-top: 48px;
    padding: 24px;
    background: var(--c-paper);
    border-radius: var(--r-3);
    border: 1px solid var(--c-line);
}
.gl-overlay__content .gl-related__title {
    font-family: var(--f-ui);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-ink-mute);
    margin: 0 0 14px;
}
.gl-overlay__content .gl-related__list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 16px;
}
.gl-overlay__content .gl-related__list a {
    color: var(--c-ink);
    text-decoration: none;
    display: block;
    padding: 6px 0;
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.4;
    border-radius: var(--r-1);
    transition: color .12s, padding-left .15s;
}
.gl-overlay__content .gl-related__list a:hover {
    color: var(--c-teal);
    padding-left: 6px;
}
.gl-overlay__content .gl-related__list a::before {
    content: '→ ';
    color: var(--c-gold);
    font-weight: 600;
}
.gl-overlay__content .gl-related__list em {
    font-style: italic;
    color: var(--c-ink-mute);
    font-size: 13.5px;
}

/* Navigation prev/next */
.gl-overlay__content .gl-nav-prevnext {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--c-line);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--f-ui);
    font-size: 14px;
}
.gl-overlay__content .gl-nav-prevnext > div {
    max-width: 48%;
    display: flex;
    flex-direction: column;
}
.gl-overlay__content .gl-nav-prevnext .label {
    color: var(--c-ink-mute);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
    font-weight: 600;
}
.gl-overlay__content .gl-nav-prevnext a {
    color: var(--c-teal);
    font-weight: 600;
    line-height: 1.3;
}
.gl-overlay__content .gl-nav-prevnext a:hover { color: var(--c-teal-700); text-decoration: underline; }
.gl-overlay__content .gl-nav-prevnext .next { text-align: right; align-items: flex-end; }

/* ===========================================================
   Modal Contribuer (réutilise les endpoints AJAX du thème)
   =========================================================== */
.gl-contrib { position: fixed; inset: 0; z-index: 200; }
.gl-contrib[hidden] { display: none !important; }
.gl-contrib__backdrop {
    position: absolute; inset: 0;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: glFade .2s ease-out;
}
.gl-contrib__panel {
    position: relative;
    max-width: 640px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 48px);
    margin: 24px auto;
    background: var(--c-white);
    border-radius: var(--r-3);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
    overflow-y: auto;
    animation: glPop .2s cubic-bezier(.16, 1, .3, 1);
}
.gl-contrib__close {
    position: sticky;
    top: 12px;
    margin-left: auto;
    margin-right: 12px;
    z-index: 5;
    display: block;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    width: 32px; height: 32px;
    border-radius: var(--r-full);
    font-size: 18px; line-height: 1;
    color: var(--c-ink-soft);
    cursor: pointer;
    box-shadow: var(--sh-sm);
}
.gl-contrib__close:hover { background: var(--c-teal); color: var(--c-white); border-color: var(--c-teal); }
.gl-contrib__body { padding: 8px 32px 32px; font-family: var(--f-body); color: var(--c-ink); }
.gl-contrib__loading { padding: 60px 0; text-align: center; color: var(--c-ink-mute); font-style: italic; }

.gl-contrib__body .comments-modal-title {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    color: var(--c-ink);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.gl-contrib__body .comments-modal-title strong { font-weight: 600; }
.gl-contrib__body .comments-count {
    font-size: 14px;
    color: var(--c-ink-mute);
    font-family: var(--f-ui);
    font-weight: 500;
}
.gl-contrib__body .suggestion-form-info {
    background: var(--c-paper);
    border-left: 3px solid var(--c-teal);
    border-radius: 0 var(--r-2) var(--r-2) 0;
    padding: 14px 18px;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-ink-soft);
}
.gl-contrib__body .suggestion-form-info p { margin: 0; }
.gl-contrib__body .suggestion-form-info strong { color: var(--c-ink); }

.gl-contrib__body .suggestions {
    margin: 0 0 16px;
    list-style: none;
    padding: 0;
}
.gl-contrib__body .suggestions:empty { display: none; }
.gl-contrib__body .suggestions li {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    padding: 12px 14px;
    margin-bottom: 8px;
    font-size: 14px;
}

.gl-contrib__body .comments-message {
    padding: 14px 18px;
    border-radius: var(--r-2);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-family: var(--f-ui);
    font-size: 14px;
    margin-bottom: 16px;
}

.gl-contrib__body .suggestion-form { display: grid; gap: 14px; }
.gl-contrib__body .form-row { display: flex; flex-direction: column; gap: 6px; }
.gl-contrib__body .form-row label {
    font-family: var(--f-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-soft);
}
.gl-contrib__body .form-row label .required { color: #b91c1c; margin-left: 2px; }
.gl-contrib__body .form-row .field-help {
    font-size: 12.5px;
    color: var(--c-ink-mute);
    font-family: var(--f-ui);
    margin-top: -2px;
}
.gl-contrib__body input[type="text"],
.gl-contrib__body input[type="email"],
.gl-contrib__body textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-2);
    font-family: var(--f-body);
    font-size: 14.5px;
    color: var(--c-ink);
    background: var(--c-white);
    box-shadow: var(--sh-sm);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.gl-contrib__body textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.gl-contrib__body input[type="text"]:focus,
.gl-contrib__body input[type="email"]:focus,
.gl-contrib__body textarea:focus {
    outline: none;
    border-color: var(--c-teal);
    box-shadow: 0 0 0 3px var(--c-teal-50);
}
.gl-contrib__body .radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 12px;
}
.gl-contrib__body .radio-group label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--f-ui);
    font-size: 14px;
    color: var(--c-ink);
}
.gl-contrib__body .radio-group input[type="radio"] { accent-color: var(--c-teal); }
.gl-contrib__body .honeypot,
.gl-contrib__body .hp-field { position: absolute !important; left: -9999px !important; opacity: 0; pointer-events: none; height: 1px; width: 1px; }
.gl-contrib__body button[type="submit"],
.gl-contrib__body .btn-submit {
    background: var(--c-teal);
    color: var(--c-white);
    border: 0;
    border-radius: var(--r-2);
    padding: 12px 22px;
    font-family: var(--f-ui);
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    transition: background .15s;
    justify-self: start;
}
.gl-contrib__body button[type="submit"]:hover { background: var(--c-teal-700); }

@keyframes glPop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===========================================================
   Bouton flottant Contribuer
   Co-existe avec la bulle Dify (Abdelkader) : Dify reste bas-droite (1rem),
   le FAB Contribuer se positionne au-dessus avec un gap visuel cohérent.
   =========================================================== */
.gl-fab-contrib {
    position: fixed;
    right: 20px;
    bottom: 96px; /* 20 (bas) + 58 (bouton Dify) + 18 (gap) */
    z-index: 110;
    background: var(--c-teal);
    color: var(--c-white);
    border: 0;
    border-radius: var(--r-full);
    padding: 12px 22px 12px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-ui);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(15, 76, 76, .35);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .25s, transform .25s, background .15s;
}
.gl-fab-contrib.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.gl-fab-contrib:hover { background: var(--c-teal-700); }
.gl-fab-contrib svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ===========================================================
   Personnalisation bulle Dify (Abdelkader)
   Variables CSS officielles + surcharges ID — palette GMP
   =========================================================== */
:root {
    --dify-chatbot-bubble-button-bg-color: #0F4C4C; /* teal GMP */
    --dify-chatbot-bubble-button-bottom: 20px;
    --dify-chatbot-bubble-button-right: 20px;
    --dify-chatbot-bubble-button-width: 58px;
    --dify-chatbot-bubble-button-height: 58px;
    --dify-chatbot-bubble-button-border-radius: 29px;
}
#dify-chatbot-bubble-button {
    background-color: var(--c-teal) !important;
    box-shadow: 0 10px 28px rgba(15, 76, 76, .32), 0 2px 6px rgba(15, 76, 76, .18) !important;
    transition: background-color .2s, transform .2s, box-shadow .25s !important;
}
/* Sprint 1 (2026-09-09) : évite le flash de l'icône « smiley » Dify par défaut avant swap JS.
   Le SVG est masqué en visibility jusqu'à ce que le script pose la classe .gl-icon-swapped. */
#dify-chatbot-bubble-button:not(.gl-icon-swapped) svg {
    visibility: hidden;
}
#dify-chatbot-bubble-button:hover {
    background-color: var(--c-teal-700) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 36px rgba(15, 76, 76, .42), 0 3px 8px rgba(15, 76, 76, .22) !important;
}
#dify-chatbot-bubble-button:active {
    transform: translateY(0) !important;
}
#dify-chatbot-bubble-button svg {
    transition: transform .2s ease-out;
}
#dify-chatbot-bubble-button:hover svg {
    transform: scale(1.06);
}

/* Fenêtre conversation : taille desktop + ombre + arrondi
   ⚠ pixels absolus car le thème softeam force `html { font-size: 62.5% }` (root 10 px),
   donc les rem de Dify (24rem = 240 px) seraient trop petits.
   La fenêtre est positionnée AU-DESSUS du bouton (et non au même `bottom`) pour qu'il n'y ait
   pas de zone vide à gauche du bouton X de fermeture. */
/* #dify-chatbot-bubble-window est l'iframe cross-origin. Pour masquer sa barre de titre
   "Abdelkader" on l'enveloppe en JS dans un .gl-dify-wrap (overflow: hidden) puis on
   pousse l'iframe vers le haut de 52 px via margin-top négatif. La hauteur de l'iframe
   est agrandie d'autant pour que l'input du chat reste visible en bas du wrap. */
/* Colonne latérale pleine hauteur ancrée à droite, slide-in depuis la droite.
   Aucun border-radius, juste une ombre douce à gauche pour détacher de la page. */
.gl-dify-wrap {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 100vw;
    /* NOTE 2026-07-07 : sur écran haut, Dify ne remplit pas 100vh (widget
       interne plafonné) et laisse un espace blanc en bas. On plafonne le
       wrap ET l'iframe à 700 px (hauteur naturelle du widget Dify observée
       empiriquement), ancrés en bas. Sur viewport plus court, on retombe
       sur `calc(100vh - 60px)`. Le fond blanc + l'ombre de la colonne sont
       retirés : plus de rectangle blanc "colonne" visible sous le contenu
       Dify — seul l'iframe Dify (avec son propre fond) apparaît. */
    height: min(calc(100vh - 60px), 700px);
    border-radius: 0 !important;
    border: 0 !important;
    overflow: hidden;
    background: transparent;
    z-index: 2147483640;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
.gl-dify-wrap.is-open {
    transform: translateX(0);
}

/* NOTE 2026-07-07 : masquer le bouton "Développer" (mobile-expand-button)
   rendu par Dify dans son header. Dify est cross-origin et n'expose pas
   d'option de configuration pour désactiver ce bouton (postMessage testés
   sans succès). Solution : clip-path sur l'iframe pour EXCLURE géométri-
   quement la zone du bouton (rendu ET clics), et fond teal sur le wrap qui
   apparaît à travers le trou pour reconstituer visuellement le header.
   Le bouton n'existe plus dans la zone visible — ce n'est pas un cache
   posé par-dessus, c'est un vrai retrait de la zone du rendu. */
.gl-dify-wrap.is-open #dify-chatbot-bubble-window {
    clip-path: polygon(
        0 0,
        calc(100% - 82px) 0,
        calc(100% - 82px) 46px,
        calc(100% - 46px) 46px,
        calc(100% - 46px) 0,
        100% 0,
        100% 100%,
        0 100%
    ) !important;
}
/* Fond teal derrière l'iframe, limité aux 52 px du haut (hauteur du header
   Dify) — visible uniquement dans le trou du clip-path top-right et dans
   les coins arrondis top-left/top-right du header. Sous 52 px on remet
   transparent pour ne pas colorer les coins arrondis du bas de l'iframe. */
.gl-dify-wrap.is-open {
    /* #0F7380 = couleur exacte du header Dify, samplée depuis un pixel du rendu */
    background: linear-gradient(to bottom, #0F7380 52px, transparent 52px);
}

/* Grands écrans : colonne un peu plus large pour le confort */
@media (min-width: 1500px) {
    .gl-dify-wrap { width: 480px; }
}
@media (min-width: 1900px) {
    .gl-dify-wrap { width: 520px; }
}

/* L'iframe Dify dans la colonne — rendu natif sans scale ni crop (pour un rendu propre,
   pas de chevauchements). La barre de titre Dify reste visible avec avatar + bouton reset.
   Un overlay blanc subtil sur le haut crée une marge visuelle au-dessus de la barre de titre. */
.gl-dify-wrap {
    padding: 0;
    box-sizing: border-box;
}
.gl-dify-wrap #dify-chatbot-bubble-window {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    /* iframe suit la hauteur du wrap (qui est plafonné à 700 px sur écran haut) */
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    /* NOTE 2026-07-07 : coins arrondis pour clipper l'iframe et éviter que
       son fond ne dépasse en dehors des coins arrondis du widget Dify.
       Fond transparent : Dify a son propre fond, on ne veut pas rajouter
       un rectangle blanc iframe autour. */
    border-radius: 16px !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
    transition: none !important;
}

/* Grands écrans : on élargit pour plus de confort de lecture.
   La hauteur et l'ancrage bottom sont désormais gérés dans la règle de base
   `.gl-dify-wrap` — inutile de les répéter ici. */
@media (min-width: 1500px) {
    .gl-dify-wrap {
        width: 480px;
    }
}

/* Bouton bulle : pixels absolus pour la même raison */
#dify-chatbot-bubble-button {
    width: 58px !important;
    height: 58px !important;
    border-radius: 29px !important;
    bottom: 20px !important;
    right: 20px !important;
    transition: bottom .35s cubic-bezier(.16, 1, .3, 1),
                right  .35s cubic-bezier(.16, 1, .3, 1),
                top    .35s cubic-bezier(.16, 1, .3, 1),
                width  .25s, height .25s, background-color .2s, box-shadow .25s !important;
}

/* Quand la colonne est ouverte, le bouton X bascule à l'EXTÉRIEUR de la colonne, juste à
   gauche du bord, pour ne pas masquer l'avatar / le titre / le bouton refresh natif Dify
   ni le bouton d'envoi en bas. Sur mobile (colonne pleine largeur), on le repositionne
   en haut à gauche dans la colonne avec un fond opaque.
   NOTE 2026-07-07 : le chatbot est ancré en bas (bottom:0) et fait 700 px
   de haut sur écran haut. On aligne le bouton X avec le haut de la colonne
   Dify (au niveau du header teal) au lieu du top de la viewport. */
body.gl-dify-open #dify-chatbot-bubble-button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 20px !important;
    top: auto !important;
    bottom: calc(min(calc(100vh - 60px), 700px) - 46px) !important;
    right: calc(440px + 14px) !important;
    background-color: var(--c-white) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12) !important;
    color: var(--c-ink-soft) !important;
}
body.gl-dify-open #dify-chatbot-bubble-button:hover {
    background-color: var(--c-paper-deep) !important;
    transform: none !important;
}
body.gl-dify-open #dify-chatbot-bubble-button #closeIcon path {
    stroke: var(--c-ink-soft) !important;
}
@media (min-width: 1500px) {
    body.gl-dify-open #dify-chatbot-bubble-button {
        right: calc(480px + 14px) !important;
    }
}
@media (min-width: 1900px) {
    body.gl-dify-open #dify-chatbot-bubble-button {
        right: calc(520px + 14px) !important;
    }
}
/* Mobile : le bouton X reste en haut à droite à l'intérieur de la colonne */
@media (max-width: 720px) {
    body.gl-dify-open #dify-chatbot-bubble-button {
        right: 18px !important;
        background-color: rgba(255, 255, 255, .92) !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* (Le bouton refresh custom #gl-dify-reset a été retiré : le natif Dify ↻ dans sa
   barre de titre fait office de bouton de réinitialisation.) */

/* Sur tablette / mobile : colonne pleine largeur (et toujours pleine hauteur) */
@media (max-width: 720px) {
    .gl-dify-wrap {
        width: 100vw;
        max-width: 100vw;
    }
    #dify-chatbot-bubble-button {
        width: 54px !important;
        height: 54px !important;
        border-radius: 27px !important;
        bottom: 16px !important;
        right: 16px !important;
    }
}

/* Sur écrans étroits (≤ 720 px) : pleine largeur — embed.min.js bascule automatiquement,
   on s'assure seulement de garder le FAB Contribuer au-dessus de la bulle */
@media (max-width: 720px) {
    :root {
        --dify-chatbot-bubble-button-bottom: 16px;
        --dify-chatbot-bubble-button-right: 16px;
        --dify-chatbot-bubble-button-width: 54px;
        --dify-chatbot-bubble-button-height: 54px;
        --dify-chatbot-bubble-button-border-radius: 27px;
    }
    .gl-fab-contrib { bottom: 84px; right: 14px; padding: 10px 18px 10px 14px; font-size: 13px; }
    .gl-fab-contrib svg { width: 14px; height: 14px; }
}

/* Très petits écrans (≤ 380 px iPhone SE) : on serre encore un peu */
@media (max-width: 380px) {
    .gl-fab-contrib { bottom: 70px; padding: 9px 14px 9px 12px; font-size: 12.5px; }
    .gl-fab-contrib svg { width: 13px; height: 13px; }
}

/* ===========================================================
   Footer
   =========================================================== */
.gl-footer {
    background: var(--c-white);
    border-top: 1px solid var(--c-line);
    padding: 56px 0 32px;
    margin-top: 0;
    font-family: var(--f-ui);
    font-size: 14px;
    color: var(--c-ink-soft);
}
.gl-footer .gl-container {
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 0 24px;
}
.gl-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}
.gl-footer h4 {
    font-family: var(--f-ui);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 16px;
    color: var(--c-ink-mute);
    font-weight: 600;
}
.gl-footer ul { list-style: none; padding: 0; margin: 0; }
.gl-footer li { margin-bottom: 8px; }
.gl-footer a {
    color: var(--c-ink-soft);
    text-decoration: none;
}
.gl-footer a:hover { color: var(--c-teal); }
.gl-footer__bottom {
    border-top: 1px solid var(--c-line);
    padding-top: 24px;
    text-align: center;
    font-size: 12.5px;
    color: var(--c-ink-mute);
    line-height: 1.6;
}

/* ===========================================================
   Pages WP (À propos, Modération)
   =========================================================== */
.gl-fiche {
    background: var(--c-white);
    padding: 56px 0 80px;
}
.gl-fiche__inner {
    max-width: var(--w-read);
    margin: 0 auto;
    padding: 0 24px;
}
.gl-fiche__inner .gl-fiche__title {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.6rem);
    color: var(--c-ink);
    margin: 0 0 24px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.gl-fiche__inner .gl-fiche__content {
    font-size: 17px;
    line-height: 1.7;
    color: var(--c-ink);
}
.gl-fiche__inner .gl-fiche__content h2 {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: 24px;
    color: var(--c-ink);
    margin: 40px 0 12px;
}
.gl-fiche__inner .gl-fiche__content h3 {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: 19px;
    color: var(--c-ink);
    margin: 24px 0 8px;
}
.gl-fiche__inner .gl-fiche__content p { margin: 0 0 18px; }
.gl-fiche__inner .gl-fiche__content ul, .gl-fiche__inner .gl-fiche__content ol { margin: 0 0 18px; padding-left: 24px; }
.gl-fiche__inner .gl-fiche__content li { margin-bottom: 8px; }

/* ===========================================================
   Encart « Ouvrage imprimé » (page À propos)
   =========================================================== */
.gl-book-feature {
    margin: 48px 0 24px;
    padding: 0;
    background: transparent;
}
.gl-book-feature__heading {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: 24px;
    color: var(--c-ink);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.gl-book-feature__card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    padding: 28px;
    box-shadow: var(--sh-md);
    position: relative;
    overflow: hidden;
}
.gl-book-feature__card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--c-teal), var(--c-gold));
}
.gl-book-feature__cover-link {
    display: block;
    align-self: start;
    border-radius: var(--r-2);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s;
}
.gl-book-feature__cover-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .20);
}
.gl-book-feature__cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 200 / 290;
    object-fit: cover;
    background: var(--c-paper);
}
.gl-book-feature__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gl-book-feature__overline {
    font-family: var(--f-ui);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c-gold);
    margin: 0 0 8px;
}
.gl-book-feature__title {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.2;
    color: var(--c-ink);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.gl-book-feature__subtitle {
    font-family: var(--f-title);
    font-size: 17px;
    color: var(--c-ink-soft);
    margin: 0 0 14px;
    line-height: 1.35;
}
.gl-book-feature__desc {
    font-family: var(--f-body);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--c-ink-soft);
    margin: 0 0 18px;
}
.gl-book-feature__desc strong { color: var(--c-ink); font-weight: 600; }
.gl-book-feature__cta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: center;
}
.gl-book-feature__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-teal);
    color: var(--c-white) !important;
    border: 0;
    border-radius: var(--r-2);
    padding: 11px 20px;
    font-family: var(--f-ui);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: background .15s, transform .15s;
    box-shadow: 0 4px 14px rgba(15, 76, 76, .25);
}
.gl-book-feature__btn:hover {
    background: var(--c-teal-700);
    transform: translateY(-1px);
}
.gl-book-feature__btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.gl-book-feature__url {
    font-family: var(--f-ui);
    font-size: 12.5px;
    color: var(--c-ink-mute) !important;
    text-decoration: none !important;
    word-break: break-all;
}
.gl-book-feature__url:hover { color: var(--c-teal) !important; text-decoration: underline !important; }

@media (max-width: 720px) {
    .gl-book-feature__card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px;
    }
    .gl-book-feature__cover-link {
        max-width: 180px;
        margin: 0 auto;
    }
    .gl-book-feature__heading { font-size: 21px; }
    .gl-book-feature__title { font-size: 22px; }
    .gl-book-feature__subtitle { font-size: 15px; }
    .gl-book-feature__desc { font-size: 15px; }
    .gl-book-feature__cta { flex-direction: column; align-items: stretch; }
    .gl-book-feature__btn { justify-content: center; }
    .gl-book-feature__url { text-align: center; }
}

/* ===========================================================
   Animations
   =========================================================== */
@keyframes glFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes glSlideIn {
    from { transform: translateX(-40px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 720px) {
    .gl-header__inner { padding: 12px 16px; gap: 12px; }
    img.gl-header__logo { height: 26px; }
    .gl-header__title { font-size: 12px; }
    .gl-header__title small { display: none; }
    .gl-header__nav { gap: 16px; font-size: 13px; }

    .gl-hero { padding: 48px 16px 40px; }
    .gl-hero__meta {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 14px 18px;
        gap: 6px;
        text-align: center;
    }
    .gl-hero__meta-sep { display: none; }

    .gl-intro { padding: 28px 18px 0; }
    .gl-intro p { font-size: 15.5px; line-height: 1.6; margin-bottom: 14px; }
    .gl-intro__lead { font-size: 16.5px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
    .gl-intro--collapsed .gl-intro__inner { max-height: 130px; }

    .gl-search { padding: 8px 16px; top: 58px; }
    .gl-alphanav { top: 128px; padding: 16px 0 12px; margin-top: 16px; margin-bottom: 28px; }
    .gl-alphanav__inner { padding: 0 12px; }
    .gl-alphanav a { min-width: 28px; height: 28px; font-size: 12.5px; padding: 0 6px; }

    .gl-index > .gl-container { padding: 0 16px; }
    .gl-index__letter { font-size: 22px; margin: 32px 0 12px; }
    button.gl-index__item { padding: 14px 16px; }
    .gl-index__title { font-size: 17px; }
    .gl-index__title .gl-translit { font-size: 14.5px; }
    .gl-index__title .gl-ar { font-size: 16px; }
    .gl-index__excerpt { font-size: 14px; -webkit-line-clamp: 3; }

    .gl-overlay__panel { width: 100%; min-width: 0; max-width: 100%; }
    .gl-overlay__close { top: 12px; margin-right: 12px; }
    .gl-overlay__content { padding: 40px 18px 60px; }
    .gl-overlay__content .gl-fiche__content { font-size: 16px; }
    .gl-overlay__content .gl-fiche__content > p:first-of-type::first-letter { font-size: 3em; }

    /* Override mobile pour .gl-fab-contrib : déjà géré plus haut dans le bloc Dify */

    .gl-footer { padding: 40px 0 24px; }
    .gl-footer__cols { gap: 24px; margin-bottom: 24px; }
}

/* ===========================================================
   Masque les éléments du thème softeam
   =========================================================== */
.lgmp-intro, .lgmp-monthly, .bk-accordion, .lgmp-terms,
.site-footer, .glossaire-meta-bar, .glossaire-footer-rich,
.btn-back-to-top { display: none !important; }

/* ===========================================================
   Charte de Paris — Encart d'accueil (home)
   Bloc mis en avant, entre l'intro éditoriale et la recherche.
   =========================================================== */
.gl-charte-teaser {
    max-width: var(--w-container);
    margin: var(--s-8) auto var(--s-12);
    padding: 0 var(--s-6);
}
.gl-charte-teaser__link {
    display: block;
    max-width: var(--w-content);
    margin: 0 auto;
    color: inherit !important;
    text-decoration: none !important;
    border-radius: var(--r-3);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.gl-charte-teaser__link:focus-visible {
    box-shadow: 0 0 0 3px rgba(15, 76, 76, .35);
}
.gl-charte-teaser__inner {
    background: linear-gradient(180deg, var(--c-paper-deep) 0%, var(--c-paper) 100%);
    border-left: 4px solid var(--c-teal);
    border-radius: var(--r-3);
    padding: var(--s-8) var(--s-8);
    box-shadow: var(--sh-md);
    position: relative;
    overflow: hidden;
    transition:
        transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 260ms cubic-bezier(0.4, 0, 0.2, 1),
        border-left-color 260ms cubic-bezier(0.4, 0, 0.2, 1),
        border-left-width 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gl-charte-teaser__link:hover .gl-charte-teaser__inner {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 76, 76, .18);
    border-left-color: var(--c-gold);
}
.gl-charte-teaser__arrow {
    position: absolute;
    top: var(--s-6);
    right: var(--s-6);
    width: 22px;
    height: 22px;
    color: var(--c-teal);
    opacity: .35;
    transition:
        opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gl-charte-teaser__link:hover .gl-charte-teaser__arrow {
    opacity: 1;
    transform: translateX(4px);
}
.gl-charte-teaser__title {
    font-family: var(--f-title);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--c-teal);
    margin: 0 0 var(--s-4);
    padding-right: var(--s-8);
}
.gl-charte-teaser__desc {
    font-family: var(--f-body);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--c-ink-soft);
    margin: 0 0 var(--s-5);
    max-width: 62ch;
}
.gl-charte-teaser__desc em {
    color: var(--c-ink);
}
.gl-charte-teaser__more {
    display: inline-block;
    font-family: var(--f-ui);
    font-weight: 600;
    font-size: .95rem;
    color: var(--c-teal);
    letter-spacing: .01em;
    position: relative;
    transition: color 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gl-charte-teaser__more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(.35);
    transform-origin: left center;
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gl-charte-teaser__link:hover .gl-charte-teaser__more { color: var(--c-teal-700); }
.gl-charte-teaser__link:hover .gl-charte-teaser__more::after { transform: scaleX(1); }

@media (max-width: 720px) {
    .gl-charte-teaser { padding: 0 var(--s-4); margin: var(--s-6) auto var(--s-8); }
    .gl-charte-teaser__inner { padding: var(--s-6); }
    .gl-charte-teaser__title { font-size: 1.6rem; padding-right: var(--s-6); }
    .gl-charte-teaser__desc { font-size: 1rem; }
    .gl-charte-teaser__arrow { top: var(--s-5); right: var(--s-5); width: 18px; height: 18px; }
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .gl-charte-teaser__inner,
    .gl-charte-teaser__arrow,
    .gl-charte-teaser__more,
    .gl-charte-teaser__more::after {
        transition: none;
    }
    .gl-charte-teaser__link:hover .gl-charte-teaser__inner {
        transform: none;
    }
}