/*
 Theme Name:   ISM Primaire Child
 Theme URI:    https://ismprimaire.be
 Description:  Thème enfant GeneratePress — Écoles Primaires Sainte-Marie, La Louvière
 Author:       ISM Sainte-Marie
 Author URI:   https://ismprimaire.be
 Template:     generatepress
 Version:      6.4.1
 Text Domain:  ism-primaire-child
*/

/* ==========================================================================
   POLICES — auto-hébergées (RGPD : aucune requête vers Google)
   Nunito porte les titres : une grotesque géométrique aux terminaisons
   arrondies, lisible par un enfant de sept ans comme par sa grand-mère.
   Roboto porte le texte courant. 77 Ko à deux, sous-ensemble latin.
   ========================================================================== */
@font-face {
    font-family: 'Nunito';
    src: url('assets/fonts/Nunito.woff2') format('woff2-variations'),
         url('assets/fonts/Nunito.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('assets/fonts/Roboto.woff2') format('woff2-variations'),
         url('assets/fonts/Roboto.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   RESET — Neutraliser GP et partir de zéro
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.site-header, .site-content, .site-footer,
.inside-article, .entry-header, .entry-content,
.site-main, #page, .site, .hfeed,
.separate-containers .inside-article,
.separate-containers .site-main > *,
.one-container .site-content { all: unset; display: block; }

/* ==========================================================================
   NOTE — grilles auto-fit
   Toutes les grilles utilisent minmax(min(100%, Npx), 1fr) et non
   minmax(Npx, 1fr) : sous 360 px, une piste de 300 px plus les 2×2rem de
   marge dépasse la fenêtre et fait défiler la page horizontalement.
   ========================================================================== */

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
    /* ======================================================================
       PALETTE — la joie, tenue par le contraste
       Le vert menthe domine, le jaune signale l'action, corail et bleu
       ponctuent. Deux tons par teinte : le vif ne porte que des aplats et
       des formes ; le fort dès qu'un texte se pose dessus.
       Chaque couple a été calculé, pas estimé (WCAG AA).
       ====================================================================== */
    --encre:          #3A4A6B;   /* titres et texte — 8.85:1 sur blanc */
    --encre-douce:    #5E6E8C;   /* texte secondaire — 5.14:1 sur blanc */

    --turquoise:      #49AF8B;   /* LE vert de la maison : blobs, aplats
                                    décoratifs. Jamais de texte dessus. */
    --turquoise-fort: #1E7358;   /* les grandes bandes vertes — blanc 5.76:1 */
    --turquoise-pale: #E8F5F0;

    --jaune:          #F6B407;   /* l'action : boutons, soulignés, puces.
                                    Encre dessus 4.83:1, jamais de blanc. */
    --jaune-pale:     #FFF3D6;

    --corail:         #E47364;   /* aplats et bandeaux de carte */
    --corail-fort:    #C9432F;   /* dès qu'un texte s'y pose — blanc 4.85:1 */
    --corail-pale:    #FDEEEB;
    --corail-encre:   #A8331F;   /* le corail assez sombre pour du petit
                                    texte sur corail pâle — 5.89:1 */

    --bleu:           #5B8AD9;   /* la quatrième voix, pour les séries de 4 */
    --bleu-fort:      #3E6BB8;   /* blanc 5.25:1 */
    --bleu-pale:      #EAF1FB;

    --blanc:          #FFFFFF;
    --ivoire:         #FFFFFF;   /* le fond de page est blanc : la couleur
                                    vient des formes, pas du papier. */
    --creme:          #FFF8EC;
    --gris-fond:      #F4F5FA;   /* les sections qui doivent juste respirer */
    --trait:          #E3E7F0;

    /* ---- Formes : c'est le rayon qui porte le « vivant », pas la couleur --- */
    --r-xs: 8px;
    --r-sm: 14px;
    --r-md: 22px;
    --r-lg: 34px;
    --r-xl: 48px;
    --r-pilule: 999px;
    /* Rayon dissymétrique : la signature de forme du site. */
    --r-organique: 42px 42px 42px 8px;
    /* La tache : une ellipse déformée, la vraie signature de forme. */
    --blob-1: 58% 42% 47% 53% / 44% 51% 49% 56%;
    --blob-2: 42% 58% 62% 38% / 55% 40% 60% 45%;

    --ombre-douce: 0 2px 10px rgba(31, 46, 61, .05);
    --ombre-carte: 0 10px 30px rgba(31, 46, 61, .08);

    /* ---- Typographie ---------------------------------------------------- */
    /* --serif garde son nom pour ne pas réécrire 800 lignes, mais il ne
       désigne plus une serif : les titres sont désormais en Nunito. */
    --serif: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
    --sans:  'Roboto', 'Segoe UI', system-ui, sans-serif;

    /* Hauteur du header fixe : les sections qui commencent en haut de page
       doivent la dégager, sinon le titre passe dessous. */
    --header-h: 66px;

    --max: 1200px;
    --ease: cubic-bezier(.33, 1, .68, 1);

    /* ======================================================================
       ALIAS HÉRITÉS — l'ancienne charte navy/rouge/or pointe désormais vers
       les nouveaux rôles. Ça repeint d'un coup les sections non réécrites.
       À ne plus utiliser dans du code neuf : préférer les noms ci-dessus.
       ====================================================================== */
    --navy:       var(--encre);
    --navy-light: var(--turquoise-fort);
    --red:        var(--corail-fort);
    --red-light:  var(--corail);
    --gold:       var(--jaune);
    --blue:       var(--bleu-fort);
    --warm:       var(--ivoire);
    --white:      var(--blanc);
    --gray:       var(--encre-douce);
    --gray-light: var(--trait);
    --green:      var(--turquoise-fort);
}

/* ==========================================================================
   BASE
   ========================================================================== */
html { scroll-behavior: smooth; }

body.ism-page {
    font-family: var(--sans);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--navy);
    background: var(--warm);
    -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.15;
    color: var(--navy);
}

a { color: var(--navy-light); text-decoration: none; transition: color .2s; }
a:hover { color: var(--red); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.ism-dot { color: var(--red); }

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
.ism-wrap { max-width: var(--max); margin: 0 auto; padding: 0 2rem; }
.ism-section { padding: 7rem 2rem; }
.ism-bg-white { background: var(--white); }
.ism-bg-warm { background: var(--warm); }
.ism-bg-navy { background: var(--navy); color: rgba(255,255,255,.85); }
.ism-center { text-align: center; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.ism-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: var(--white);
    border-bottom: 1px solid rgba(8,22,51,.06);
    transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.ism-header__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: .9rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo textuel charte */
.ism-logo { text-decoration: none; font-size: 1.5rem; display: inline-flex; }
.ism-logo__ism { font-family: var(--sans); font-weight: 800; color: var(--navy); }
.ism-logo__primaire { font-family: var(--serif); font-weight: 400; color: var(--navy); }
.ism-logo__dot { color: var(--red); font-weight: 700; }
.ism-logo--white .ism-logo__ism,
.ism-logo--white .ism-logo__primaire { color: var(--white); }

/* Nav */
.ism-nav__list {
    display: flex; flex-wrap: wrap; gap: 0; list-style: none;
    margin: 0; padding: 0;
}
.ism-nav__list li a {
    display: block;
    font-family: var(--sans);
    font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--navy); padding: .5rem .8rem;
    position: relative; transition: color .2s;
}
.ism-nav__list li a::after {
    content: ''; position: absolute;
    bottom: 2px; left: .8rem; right: .8rem;
    height: 2px; background: var(--red);
    transform: scaleX(0); transition: transform .35s var(--ease);
}
.ism-nav__list li a:hover { color: var(--red); }
.ism-nav__list li a:hover::after,
.ism-nav__list li.current-menu-item a::after { transform: scaleX(1); }

/* Boutons en pause — activés plus tard. Retirer la classe "ism-nav-disabled"
   sur l'item de menu (Apparence > Menus) pour réactiver. */
.ism-nav__list li.ism-nav-disabled a {
    pointer-events: none;
    cursor: default;
    opacity: .4;
}
.ism-nav__list li.ism-nav-disabled a:hover { color: var(--navy); }
.ism-nav__list li.ism-nav-disabled a:hover::after { transform: scaleX(0); }

/* Burger */
.ism-burger {
    display: none; background: none; border: none; cursor: pointer;
    width: 28px; height: 20px; position: relative; flex-shrink: 0;
}
.ism-burger span {
    display: block; position: absolute; left: 0; right: 0;
    height: 2px; background: var(--navy);
    transition: transform .3s, opacity .3s;
}
.ism-burger span:nth-child(1) { top: 0; }
.ism-burger span:nth-child(2) { top: 9px; }
.ism-burger span:nth-child(3) { top: 18px; }
.ism-burger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.ism-burger.open span:nth-child(2) { opacity: 0; }
.ism-burger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ==========================================================================
   HERO — Plein écran
   ========================================================================== */
.ism-hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: flex-end; justify-content: center;
    text-align: center;
    background-size: cover; background-position: center;
    background-color: var(--navy);
    padding-bottom: 5rem;
    overflow: hidden;
}
.ism-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
        rgba(8,22,51,.35) 0%,
        rgba(8,22,51,.55) 40%,
        rgba(8,22,51,.85) 100%);
}

/* Hero vidéo */
.ism-hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    z-index: 0;
}
.ism-hero__content {
    position: relative; z-index: 2;
    max-width: 850px; padding: 2rem;
    animation: fadeUp 1s ease-out;
}
.ism-hero__label {
    font-family: var(--sans); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .22em;
    color: var(--gold); margin-bottom: 1.5rem;
}
.ism-hero__title {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: var(--white); margin-bottom: 1.5rem;
    line-height: 1.05; letter-spacing: -.02em;
}
.ism-hero__tagline {
    font-size: clamp(.95rem, 1.5vw, 1.15rem);
    color: var(--gold); font-style: italic; font-weight: 300;
    border-left: 3px solid var(--red);
    padding-left: 1.2rem; display: inline-block;
    margin-bottom: 1.2rem;
}
.ism-hero__sub {
    font-size: .85rem; text-transform: uppercase;
    letter-spacing: .12em; color: rgba(255,255,255,.6);
    margin-bottom: 2.5rem;
}
.ism-hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.ism-hero__scroll {
    position: absolute; bottom: 1.5rem; left: 50%;
    transform: translateX(-50%);
    width: 1px; height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.4));
    animation: pulse 2s ease-in-out infinite;
    z-index: 2;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.ism-btn {
    display: inline-block; font-family: var(--sans);
    font-size: .82rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    padding: 14px 36px; border: 2px solid transparent;
    cursor: pointer; transition: all .35s var(--ease);
    text-decoration: none; line-height: 1;
}
.ism-btn:hover { transform: translateY(-2px); }

.ism-btn--red { background: var(--red); color: var(--white); border-color: var(--red); }
.ism-btn--red:hover { background: transparent; color: var(--white); border-color: var(--white); }

.ism-btn--navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.ism-btn--navy:hover { background: var(--navy-light); border-color: var(--navy-light); color: var(--white); }

.ism-btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.ism-btn--ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.ism-btn--sm { font-size: .75rem; padding: 10px 28px; }

/* ==========================================================================
   STORYTELLING SECTIONS (Actes II & III)
   ========================================================================== */
.ism-act {
    display: flex; align-items: center; justify-content: center;
    min-height: 70vh; padding: 8rem 2rem; text-align: center;
}
.ism-act--dark { background: var(--navy); color: var(--white); }
.ism-act--light { background: var(--white); }

.ism-act .ism-wrap { max-width: 700px; }
.ism-act__label {
    font-family: var(--sans); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .22em;
    color: var(--gold); margin-bottom: 1.5rem;
}
.ism-act__title {
    font-family: var(--serif);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    margin-bottom: 1.5rem; line-height: 1.1;
}
.ism-act--dark .ism-act__title { color: var(--white); }

.ism-act__text {
    font-size: 1.15rem; line-height: 1.85; max-width: 600px;
    margin: 0 auto 2rem;
}
.ism-act--dark .ism-act__text { color: rgba(255,255,255,.7); }
.ism-act--light .ism-act__text { color: var(--gray); }

/* ==========================================================================
   PILLARS (Respect, Travail, Dépassement)
   ========================================================================== */
.ism-pillars { display: grid; grid-template-columns: repeat(3, 1fr); }

.ism-pillar {
    text-align: center;
    padding: 5rem 2rem;
    transition: background .5s var(--ease);
}
.ism-pillar:nth-child(1) { background: var(--navy); }
.ism-pillar:nth-child(2) { background: var(--navy-light); }
.ism-pillar:nth-child(3) { background: #0d2240; }
.ism-pillar:hover { background: var(--red) !important; }

.ism-pillar__title {
    font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--white); margin-bottom: 1rem;
}
.ism-pillar__text {
    font-size: .95rem; color: rgba(255,255,255,.7);
    max-width: 300px; margin: 0 auto; line-height: 1.7;
}

/* ==========================================================================
   GRID 4 — Accès rapide / Services
   ========================================================================== */
.ism-grid4 {
    display: grid; grid-template-columns: repeat(4, 1fr);
}
.ism-grid4--bordered { border: 1px solid var(--gray-light); }

.ism-grid4__item {
    display: block; padding: 3rem 2rem; text-align: center;
    text-decoration: none; color: var(--navy);
    border-right: 1px solid var(--gray-light);
    position: relative; transition: background .3s;
}
.ism-grid4__item:last-child { border-right: none; }
.ism-grid4__item::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: var(--red);
    transform: scaleX(0); transition: transform .4s var(--ease);
}
.ism-grid4__item:hover { background: var(--warm); color: var(--navy); }
.ism-grid4__item:hover::after { transform: scaleX(1); }
.ism-grid4__icon { font-size: 2rem; display: block; margin-bottom: .8rem; }
.ism-grid4__item h3 {
    font-family: var(--serif); font-size: 1.1rem; margin-bottom: .4rem;
}
.ism-grid4__item p { font-size: .85rem; color: var(--gray); }

/* ==========================================================================
   SECTION HEADING
   ========================================================================== */
.ism-heading { text-align: center; max-width: 650px; margin: 0 auto 3.5rem; }
.ism-heading__label {
    font-family: var(--sans); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .18em;
    color: var(--red); display: block; margin-bottom: .8rem;
}
.ism-heading__label--gold { color: var(--gold); }
.ism-heading h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: .6rem;
}
.ism-heading__desc { font-size: 1.1rem; color: var(--gray); line-height: 1.7; }

/* ==========================================================================
   DIRECTORS — Messages personnels
   ========================================================================== */
.ism-directors {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 2.5rem;
}
.ism-director {
    background: var(--white); padding: 2.5rem;
    border-left: 3px solid var(--red);
}
.ism-director__top {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 1.5rem;
}
.ism-director h3 {
    font-family: var(--serif); font-size: 1.25rem; margin-bottom: 2px;
}
.ism-director__role {
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--red);
}
.ism-director__date {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--gray); white-space: nowrap;
}
.ism-director blockquote {
    font-family: var(--serif); font-style: italic;
    font-size: 1.05rem; line-height: 1.75; color: var(--navy);
    margin: 0 0 1.5rem; padding: 0; border: none;
}
.ism-director footer {
    font-size: .82rem; color: var(--gray); line-height: 1.6;
    border-top: 1px solid var(--gray-light); padding-top: 1rem;
}

/* ==========================================================================
   TABS — Onglets
   ========================================================================== */
.ism-tabs { max-width: 850px; margin: 0 auto; }
.ism-tabs__bar {
    display: flex; flex-wrap: wrap; gap: 0;
    border-bottom: 2px solid var(--gray-light); margin-bottom: 2.5rem;
}
.ism-tabs__btn {
    background: none; border: none; cursor: pointer;
    font-family: var(--sans); font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--gray); padding: .8rem 1.2rem;
    position: relative; transition: color .2s;
}
.ism-tabs__btn::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
    height: 2px; background: var(--red);
    transform: scaleX(0); transition: transform .35s var(--ease);
}
.ism-tabs__btn:hover { color: var(--navy); }
.ism-tabs__btn.active { color: var(--navy); }
.ism-tabs__btn.active::after { transform: scaleX(1); }

.ism-tabs__panel { display: none; animation: fadeUp .4s ease; }
.ism-tabs__panel.active { display: block; }
.ism-tabs__panel h3 {
    font-family: var(--serif); font-size: 1.5rem;
    margin-bottom: 1rem; color: var(--navy);
}
.ism-tabs__panel p {
    font-size: 1.05rem; color: var(--gray); line-height: 1.85;
    max-width: 620px;
}

/* ==========================================================================
   CAMPUSES — Implantations
   ========================================================================== */
.ism-campuses {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 2.5rem;
}
.ism-campus {
    background: rgba(255,255,255,.06); padding: 2.5rem;
    border-left: 3px solid var(--red);
    transition: background .3s;
}
.ism-campus:nth-child(2) { border-left-color: var(--gold); }
.ism-campus:hover { background: rgba(255,255,255,.1); }
.ism-campus h3 {
    font-family: var(--serif); font-size: 1.5rem; color: var(--white);
    margin-bottom: .6rem;
}
.ism-campus__dir {
    font-size: .8rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--gold); margin-bottom: 1rem;
}
.ism-campus p { color: rgba(255,255,255,.75); line-height: 1.6; }
.ism-campus__contact {
    margin-top: 1rem; font-size: .9rem; color: rgba(255,255,255,.55);
}

/* ==========================================================================
   CARDS — Actualités (shortcode)
   ========================================================================== */
.ism-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 2rem;
}
.ism-card {
    background: var(--white); overflow: hidden;
    box-shadow: 0 2px 8px rgba(8,22,51,.05);
    transition: all .4s var(--ease);
}
.ism-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(8,22,51,.12); }
/* display:block : un <a> en ligne ignore aspect-ratio, et une affiche
   portrait fait une carte de 1000 px de haut. */
.ism-card__image { display: block; aspect-ratio: 3/2; overflow: hidden; }
.ism-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ism-card:hover .ism-card__image img { transform: scale(1.06); }
.ism-card__body { padding: 1.8rem; }
.ism-card__tag {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--red); margin-bottom: .6rem; display: inline-block;
}
.ism-card__title { font-family: var(--serif); font-size: 1.2rem; margin-bottom: .5rem; }
.ism-card__title a { color: var(--navy); }
.ism-card__title a:hover { color: var(--red); }
.ism-card__excerpt { font-size: .9rem; color: var(--gray); margin-bottom: .8rem; line-height: 1.6; }
.ism-card__date { font-size: .72rem; color: var(--gray); text-transform: uppercase; letter-spacing: .05em; }

/* ==========================================================================
   EVENTS (shortcode)
   ========================================================================== */
.ism-events-list { display: flex; flex-direction: column; gap: .8rem; max-width: 700px; margin: 0 auto; }
.ism-event-item {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--white); padding: 1.2rem 1.5rem;
    border-left: 3px solid transparent;
    transition: all .3s;
}
.ism-event-item:hover { border-left-color: var(--red); transform: translateX(4px); }
.ism-event-date {
    flex-shrink: 0; width: 56px; height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ism-event-day { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--navy); line-height: 1; }
.ism-event-month { font-size: .65rem; font-weight: 700; text-transform: uppercase; color: var(--red); letter-spacing: .05em; }
.ism-event-title { font-family: var(--serif); font-size: 1rem; margin: 0 0 2px; }
.ism-event-title a { color: var(--navy); }
.ism-event-title a:hover { color: var(--red); }
.ism-event-lieu { font-size: .78rem; color: var(--gray); }
.ism-event-excerpt { font-size: .82rem; color: var(--gray); margin-top: 4px; }
.ism-no-events { text-align: center; color: var(--gray); font-style: italic; padding: 3rem; }

/* ==========================================================================
   QUOTES — Témoignages
   ========================================================================== */
.ism-quotes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 2rem;
}
.ism-quote {
    background: var(--white); padding: 2.5rem;
    border-left: 3px solid var(--red); margin: 0;
}
.ism-quote p {
    font-family: var(--serif); font-style: italic;
    font-size: 1.05rem; line-height: 1.7; color: var(--navy);
    margin-bottom: 1.2rem;
}
.ism-quote cite {
    font-style: normal; font-size: .82rem; color: var(--gray);
}
.ism-quote cite strong { color: var(--navy); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ism-footer { background: var(--navy); color: rgba(255,255,255,.65); }
.ism-footer__inner {
    max-width: var(--max); margin: 0 auto;
    padding: 5rem 2rem 3rem;
    display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 3rem;
}
.ism-footer__brand p { margin-top: 1rem; font-size: .9rem; line-height: 1.6; }
.ism-footer__col h4 {
    font-family: var(--serif); color: var(--white);
    font-size: 1rem; margin-bottom: .8rem;
}
.ism-footer__col p { font-size: .85rem; line-height: 1.7; }
.ism-footer__links { list-style: none; margin: 0; padding: 0; }
.ism-footer__links li { margin-bottom: .4rem; }
/* .55 donnait 3.96:1 sur l'encre du footer, pour du 13,6 px normal. */
.ism-footer__links a { color: rgba(255,255,255,.78); font-size: .85rem; transition: color .2s; }
.ism-footer__links a:hover { color: var(--gold); }
.ism-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.5rem 2rem; text-align: center;
    font-size: .78rem; letter-spacing: .03em;
    max-width: var(--max); margin: 0 auto;
}

/* ==========================================================================
   FAQ (pour sous-pages)
   ========================================================================== */
.ism-faq__item { border-bottom: 1px solid var(--gray-light); }
.ism-faq__question {
    width: 100%; background: none; border: none;
    padding: 1.2rem 0; font-family: var(--sans);
    font-size: 1rem; font-weight: 600; color: var(--navy);
    text-align: left; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
}
.ism-faq__question:hover { color: var(--red); }
.ism-faq__question::after { content: '+'; font-size: 1.4rem; font-weight: 300; color: var(--red); }
.ism-faq__item.active .ism-faq__question::after { content: '\2212'; }
.ism-faq__answer { padding: 0 0 1.2rem; color: var(--gray); display: none; }
.ism-faq__item.active .ism-faq__answer { display: block; }

/* ==========================================================================
   PAGE HERO — Bandeau titre pour pages intérieures
   ========================================================================== */
.ism-page-hero {
    background: var(--navy);
    padding: 8rem 2rem 4rem;
    text-align: center;
}
.ism-page-hero__label {
    font-family: var(--sans); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .18em;
    /* Jaune, pas corail : le corail sur encre fait 1,82:1, illisible. Jaune 4,83:1. */
    color: var(--jaune); display: block; margin-bottom: .8rem;
}
.ism-page-hero__title {
    font-family: var(--serif);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    color: var(--white); line-height: 1.15;
}
.ism-page-hero__meta {
    font-size: .85rem; color: rgba(255,255,255,.5);
    margin-top: .8rem; text-transform: uppercase; letter-spacing: .06em;
}

/* ==========================================================================
   MAIN — Contenu des pages intérieures
   ========================================================================== */
.ism-main {
    padding: 4rem 2rem 6rem;
    background: var(--white);
}
.ism-main .ism-wrap {
    max-width: 900px;
}

/* Article content — typographie riche */
.ism-article__hero {
    margin-bottom: 2.5rem;
}
.ism-article__hero img {
    width: 100%; height: auto;
}
.ism-article__content h2 {
    font-size: 1.8rem; margin: 2.5rem 0 1rem;
}
.ism-article__content h3 {
    font-size: 1.35rem; margin: 2rem 0 .8rem;
}
.ism-article__content p {
    font-size: 1.05rem; line-height: 1.85; color: var(--gray);
    margin-bottom: 1.2rem; max-width: none;
}
.ism-article__content ul,
.ism-article__content ol {
    margin: 1rem 0 1.5rem 1.5rem; color: var(--gray);
    line-height: 1.8;
}
.ism-article__content li { margin-bottom: .4rem; }
.ism-article__content a { color: var(--red); text-decoration: underline; }
.ism-article__content a:hover { color: var(--navy); }
.ism-article__content hr {
    border: none; border-top: 2px solid var(--gray-light);
    margin: 2.5rem 0;
}
.ism-article__content blockquote {
    border-left: 3px solid var(--red);
    padding: 1rem 0 1rem 1.5rem;
    margin: 1.5rem 0;
    font-family: var(--serif); font-style: italic;
    font-size: 1.1rem; color: var(--navy);
}
.ism-article__content img {
    margin: 1.5rem 0; border-radius: 0;
}
.ism-article__content strong { color: var(--navy); }

/* ==========================================================================
   CATEGORY NAV — Filtres d'articles
   ========================================================================== */
.ism-cat-nav {
    display: flex; flex-wrap: wrap; gap: 0;
    border-bottom: 2px solid var(--gray-light);
    margin-bottom: 3rem;
}
.ism-cat-nav__item {
    font-family: var(--sans); font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--gray); padding: .7rem 1.2rem;
    text-decoration: none; position: relative;
    transition: color .2s;
}
.ism-cat-nav__item::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
    height: 2px; background: var(--red);
    transform: scaleX(0); transition: transform .35s var(--ease);
}
.ism-cat-nav__item:hover { color: var(--navy); }
.ism-cat-nav__item.active { color: var(--navy); }
.ism-cat-nav__item.active::after { transform: scaleX(1); }

/* Blog listing — wider cards */
.ism-main .ism-cards {
    max-width: 100%;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.ism-pagination {
    margin-top: 3rem; text-align: center;
}
.ism-pagination .page-numbers {
    display: inline-block; padding: .5rem 1rem;
    font-family: var(--sans); font-size: .85rem; font-weight: 600;
    color: var(--gray); text-decoration: none;
    transition: color .2s, border-color .2s;
    border-bottom: 2px solid transparent;
}
.ism-pagination .page-numbers:hover { color: var(--navy); }
.ism-pagination .page-numbers.current {
    color: var(--navy); border-bottom-color: var(--red);
}
.ism-pagination .prev,
.ism-pagination .next {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
}

/* ==========================================================================
   POST NAV — Navigation entre articles
   ========================================================================== */
.ism-post-nav {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2rem; margin-top: 4rem; padding-top: 2.5rem;
    border-top: 1px solid var(--gray-light);
}
.ism-post-nav__link {
    text-decoration: none; padding: 1.5rem;
    transition: background .3s;
}
.ism-post-nav__link:hover { background: var(--warm); }
.ism-post-nav__link--next { text-align: right; }
.ism-post-nav__label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--red); display: block;
    margin-bottom: .5rem;
}
.ism-post-nav__title {
    font-family: var(--serif); font-size: 1.1rem; color: var(--navy);
    display: block;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.ism-empty {
    text-align: center; color: var(--gray);
    font-style: italic; padding: 4rem 0;
}

/* ==========================================================================
   RESPONSIVE — Pages intérieures
   ========================================================================== */
@media (max-width: 768px) {
    .ism-page-hero { padding: 6rem 1.2rem 3rem; }
    .ism-main { padding: 2.5rem 1.2rem 4rem; }
    .ism-post-nav { grid-template-columns: 1fr; }
    .ism-post-nav__link--next { text-align: left; }
    .ism-cat-nav { overflow-x: auto; flex-wrap: nowrap; }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0%,100% { opacity: .3; } 50% { opacity: 1; }
}

/* Amélioration progressive. Le contenu est VISIBLE par défaut : il ne doit
   jamais dépendre de JavaScript pour s'afficher. Le script pose la classe
   « js-anim » sur <html>, et c'est seulement à ce moment que les blocs
   partent d'un état masqué pour être révélés au scroll.
   Avant ce correctif, tout le site était à opacity 0 en attendant
   l'observateur : un script lent, une erreur JS ou un robot pressé, et la
   page était blanche. */
.anim,
.ism-animate {
    transition: opacity .7s ease, transform .7s ease;
}
html.js-anim .anim,
html.js-anim .ism-animate {
    opacity: 0;
    transform: translateY(22px);
}
html.js-anim .anim.visible,
html.js-anim .ism-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .ism-grid4 { grid-template-columns: repeat(2, 1fr); }
    .ism-grid4__item:nth-child(2) { border-right: none; }
    .ism-grid4__item:nth-child(1),
    .ism-grid4__item:nth-child(2) { border-bottom: 1px solid var(--gray-light); }
    .ism-act { min-height: 0; padding: 6rem 2rem; }
    .ism-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* Le menu passe au burger dès 1199 px, et pas à 768 : la barre compte neuf
   entrées, qui demandent ~950 px. Entre les deux, elle se cassait en deux
   lignes et doublait la hauteur du header. */
@media (max-width: 1199px) {
    /* Burger visible */
    .ism-burger { display: block; }
    .ism-nav {
        display: none; position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--white);
        border-bottom: 1px solid var(--gray-light);
        padding: 1rem 0;
    }
    .ism-nav.open { display: block; }
    .ism-nav__list { flex-direction: column; }
    .ism-nav__list li a {
        padding: .8rem 2rem; font-size: .9rem;
        border-bottom: 1px solid rgba(0,0,0,.04);
    }
    .ism-nav__list li a::after { display: none; }
}

@media (max-width: 768px) {
    .ism-hero { min-height: 80vh; }
    .ism-hero__cta { flex-direction: column; align-items: center; }
    .ism-btn { width: 100%; max-width: 280px; text-align: center; }
    .ism-pillars { grid-template-columns: 1fr; }
    .ism-grid4 { grid-template-columns: 1fr; }
    .ism-grid4__item { border-right: none; border-bottom: 1px solid var(--gray-light); }
    .ism-grid4__item:last-child { border-bottom: none; }
    .ism-directors { grid-template-columns: 1fr; }
    .ism-director__top { flex-direction: column; gap: .3rem; }
    .ism-tabs__bar { flex-direction: column; border-bottom: none; }
    .ism-tabs__btn { text-align: left; border-bottom: 1px solid var(--gray-light); padding: .8rem 0; }
    .ism-tabs__btn::after { display: none; }
    .ism-tabs__btn.active { color: var(--red); }
    .ism-cards { grid-template-columns: 1fr; }
    .ism-quotes { grid-template-columns: 1fr; }
    .ism-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
    .ism-section { padding: 4rem 1.2rem; }
    .ism-event-item { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .ism-hero__title { font-size: 2.2rem; }
}

/* Accessibilité : désactiver la vidéo hero si l'utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    html.js-anim .anim,
    html.js-anim .ism-animate { opacity: 1 !important; transform: none !important; }
    .anim, .ism-animate { transition: none !important; }
    .ism-hero__video { display: none; }
}

/* ==========================================================================
   FORMS — Inscriptions (Microsoft Forms embed)
   ========================================================================== */
.ism-form-intro {
    text-align: center; font-size: 1.05rem; color: var(--gray);
    margin-bottom: 2.5rem; line-height: 1.7;
}

.ism-tabs--forms { max-width: 100%; }
.ism-tabs--forms .ism-tabs__btn {
    display: inline-flex; align-items: center; gap: .4rem;
}
.ism-tabs__icon { font-size: 1.1rem; }

.ism-form-header {
    margin-bottom: 2rem;
}
.ism-form-header h2 {
    font-family: var(--serif); font-size: 1.6rem;
    margin-bottom: .6rem;
}
.ism-form-header p {
    font-size: 1rem; color: var(--gray); line-height: 1.7;
}

.ism-form-embed {
    position: relative;
    width: 100%;
    background: var(--warm);
    border: 1px solid var(--gray-light);
    margin-bottom: 2rem;
}
.ism-form-embed__iframe {
    display: block;
    width: 100%;
    min-height: 800px;
    border: none;
}

.ism-form-placeholder {
    text-align: center; padding: 4rem 2rem;
    background: var(--warm);
    border: 2px dashed var(--gray-light);
    color: var(--gray);
}
.ism-form-placeholder p { margin-bottom: .5rem; }
.ism-form-placeholder p:first-child {
    font-family: var(--serif); font-size: 1.2rem;
    color: var(--navy); margin-bottom: .8rem;
}

.ism-form-info {
    margin-top: 4rem; padding: 2.5rem;
    background: var(--warm);
    border-left: 3px solid var(--gold);
}
.ism-form-info h3 {
    font-family: var(--serif); font-size: 1.25rem;
    margin-bottom: .6rem;
}
.ism-form-info > p {
    font-size: .95rem; color: var(--gray); margin-bottom: 1.5rem;
}
.ism-form-info__contacts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.ism-form-info__contacts div {
    font-size: .9rem; line-height: 1.7; color: var(--navy);
}

@media (max-width: 768px) {
    .ism-form-embed__iframe { min-height: 600px; }
    .ism-form-info__contacts { grid-template-columns: 1fr; }
    .ism-tabs--forms .ism-tabs__btn { font-size: .72rem; }
}


/* ==========================================================================
   PEAU — « la cour de récré »
   Couche de finition posée après tout le reste. Direction assumée : une
   école primaire, pas un pensionnat. Ce qui porte le ton, ce sont les
   formes (taches, pilules, tuiles arrondies) et le rythme des couleurs.
   Le blanc reste le papier ; la couleur vient des objets posés dessus.
   ========================================================================== */

/* ---- Palette interne des illustrations -------------------------------------
   Les SVG ne connaissent que ces variables : changer la charte les repeint
   toutes, sans toucher à un seul chemin. */
.ism-illu {
    --i-ciel: var(--turquoise-pale);
    --i-blanc: var(--blanc);
    --i-encre: var(--encre);
    --i-corail: var(--corail);
    --i-corail-pale: var(--corail-pale);
    --i-turquoise: var(--turquoise);
    --i-turquoise-fonce: var(--turquoise-fort);
    --i-turquoise-pale: var(--turquoise-pale);
    --i-jaune: var(--jaune);
    --i-jaune-pale: var(--jaune-pale);
    width: 100%;
    height: 100%;
}
.ism-illu svg { width: 100%; height: 100%; display: block; }

/* ---- Slot visuel : illustration aujourd'hui, photo demain ---------------- */
.ism-visuel {
    margin: 0;
    aspect-ratio: var(--ratio, 16 / 9);
    border-radius: var(--r-organique);
    overflow: hidden;
    background: var(--turquoise-pale);
}
.ism-visuel__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ism-visuel--illu { background: transparent; }

/* ==========================================================================
   TYPOGRAPHIE — Nunito, gras et généreux
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    font-weight: 800;
    letter-spacing: -.01em;
    text-wrap: balance;
    color: var(--encre);
}
body { font-family: var(--sans); color: var(--encre-douce); }

/* Le titre bicolore : l'accroche est verte, la retombée en encre. C'est le
   tic typographique de la maison — utilisé partout, jamais autrement. */
.ism-t2 { color: var(--turquoise-fort); }

.ism-dot { color: var(--jaune); }
a { color: var(--turquoise-fort); }
a:hover { color: var(--corail-fort); }
:focus-visible { outline: 3px solid var(--bleu-fort); outline-offset: 3px; }

/* ---- Le séparateur maison : deux points et un tiret jaune ---------------- */
.ism-sep {
    display: flex; align-items: center; justify-content: center;
    gap: 7px; margin: 1rem 0 1.6rem;
}
.ism-sep::before, .ism-sep::after {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--trait);
}
.ism-sep i { display: block; width: 26px; height: 5px; border-radius: 3px; background: var(--jaune); }
.ism-sep--left { justify-content: flex-start; margin-left: 0; }

/* ==========================================================================
   BOUTONS — pilules pleines. Le jaune est l'action principale.
   ========================================================================== */
.ism-btn {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: 15px 34px;
    border-radius: var(--r-pilule);
    border-width: 2px;
    line-height: 1.2;
    box-shadow: 0 6px 16px rgba(58, 74, 107, .10);
}
.ism-btn--sm { font-size: .92rem; padding: 11px 26px; }
.ism-btn:hover { transform: translateY(-2px); }

/* Le jaune ne supporte pas de blanc dessus (2.0:1). Encre obligatoire. */
.ism-btn--red,
.ism-btn--jaune {
    background: var(--jaune); border-color: var(--jaune); color: var(--encre);
}
.ism-btn--red:hover,
.ism-btn--jaune:hover {
    background: var(--encre); border-color: var(--encre); color: var(--blanc);
}
.ism-btn--navy {
    background: var(--turquoise-fort); border-color: var(--turquoise-fort); color: var(--blanc);
}
.ism-btn--navy:hover { background: var(--encre); border-color: var(--encre); }
/* Pas transparent : en mobile la tache verte du hero remonte derrière les
   boutons, et un fantôme vert sur vert disparaissait. Le blanc garantit la
   lisibilité quel que soit ce qui passe dessous. */
.ism-btn--ghost {
    background: var(--blanc); color: var(--turquoise-fort); border-color: var(--turquoise-fort);
    box-shadow: none;
}
.ism-btn--ghost:hover { background: var(--turquoise-fort); color: var(--blanc); }
/* Sur fond vert, le fantôme doit rester lisible : il passe en blanc.
   Attention : pas dans le hero — là, la tache verte est à droite et le
   bouton reste sur du blanc. Un fantôme blanc y disparaissait. */
.ism-bg-vert .ism-btn--ghost,
.ism-duo__texte .ism-btn--ghost { color: var(--blanc); border-color: rgba(255,255,255,.75); }
.ism-bg-vert .ism-btn--ghost:hover,
.ism-duo__texte .ism-btn--ghost:hover { background: var(--blanc); color: var(--turquoise-fort); }

/* ==========================================================================
   NAVIGATION — 8 rubriques, casse normale
   ========================================================================== */
.ism-nav__list li a {
    font-family: var(--serif);
    font-size: .95rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: .5rem .6rem;
    color: var(--encre);
}
.ism-nav__list li a::after { left: .6rem; right: .6rem; background: var(--jaune); height: 3px; border-radius: 2px; }
.ism-nav__list li a:hover { color: var(--turquoise-fort); }
.ism-logo__primaire { color: var(--turquoise-fort); }
.ism-logo__dot { color: var(--jaune); }

/* ==========================================================================
   HERO — la vidéo de l'école, découpée dans une tache verte
   La vidéo n'est pas un fond sombre derrière du texte : elle est l'objet
   de droite, posée dans une forme. Le texte garde son propre fond blanc,
   donc sa lisibilité ne dépend pas d'une image en mouvement.
   ========================================================================== */
.ism-hero--illu, .ism-hero--video {
    position: relative;
    min-height: 0;
    display: block;
    /* Le header est fixe : sans ce dégagement, il recouvre le titre. */
    padding: calc(var(--header-h) + 3rem) 2rem 5rem;
    background: var(--blanc);
    text-align: left;
    overflow: hidden;
}
.ism-hero--illu::before, .ism-hero--video::before { content: none; }

/* La grande tache verte : elle mord sur la droite de l'écran et donne au
   hero sa silhouette. Purement décorative, aucun texte ne se pose dessus. */
.ism-hero__tache {
    position: absolute; z-index: 0; pointer-events: none;
    top: -14%; right: -18%; width: 74%; height: 128%;
    background: var(--turquoise);
    border-radius: var(--blob-1);
}
@media (max-width: 61.99rem) {
        /* En colonne unique, une tache calée sur la section remonte forcément
       derrière le texte : selon la longueur du titre, elle passait sous les
       boutons puis sous la ligne de contact, en gris sur vert. On la
       raccroche donc au média, dont elle ne bougera plus. */
    .ism-hero__tache { display: none; }
    .ism-hero__media::before {
        content: ''; position: absolute; z-index: 0;
        inset: -12% -30% -10% -30%;
        background: var(--turquoise);
        border-radius: var(--blob-1);
    }
    .ism-hero__media .ism-hero__cadre, .ism-hero__media .ism-hero__cercle { position: relative; z-index: 1; }
    .ism-hero__media .ism-pastille { z-index: 2; }
}

.ism-hero__grille {
    position: relative; z-index: 1;
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 62rem) {
    .ism-hero__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4rem; }
}
.ism-hero--illu .ism-hero__content,
.ism-hero--video .ism-hero__content {
    position: static; max-width: none; padding: 0; animation: none;
}
.ism-hero__label {
    display: inline-block;
    font-family: var(--serif); font-weight: 700;
    font-size: .82rem; letter-spacing: .06em; text-transform: none;
    color: var(--corail-encre);
    background: var(--corail-pale);
    padding: .45rem 1rem; border-radius: var(--r-pilule);
    margin-bottom: 1.2rem;
}
.ism-hero--illu .ism-hero__title,
.ism-hero--video .ism-hero__title {
    color: var(--encre);
    font-family: var(--serif); font-weight: 900;
    font-size: clamp(2.4rem, 5.6vw, 4.1rem);
    line-height: 1.04;
    margin-bottom: .4rem;
}
.ism-hero--illu .ism-hero__tagline,
.ism-hero--video .ism-hero__tagline {
    color: var(--encre-douce);
    font-style: normal; font-weight: 400; border-left: none;
    font-size: 1.1rem; line-height: 1.65;
    max-width: 40ch; margin: 0 0 1.8rem; padding: 0;
}
.ism-hero__sub { display: none; }
.ism-hero--illu .ism-hero__cta,
.ism-hero--video .ism-hero__cta { justify-content: flex-start; gap: 1rem; flex-wrap: wrap; }
.ism-hero__scroll { display: none; }
/* Sous les boutons : de quoi agir tout de suite, avec des numéros réels.
   Un CTA seul laisse le parent sans porte de sortie s'il ne veut pas
   remplir un formulaire. */
.ism-hero__rassurance {
    margin-top: 1.4rem; font-size: .92rem; line-height: 1.6;
    color: var(--encre-douce); max-width: 40ch;
}
.ism-hero__rassurance a { font-weight: 700; white-space: nowrap; }

/* La vidéo dans sa tache : forme organique, pas de rectangle.
   C'est le cadre qui porte la forme, la taille et le rognage. La vidéo
   n'utilise PAS object-fit: cover : Firefox le rend faux dans un ancêtre
   tourné (image décalée, fond vert à gauche — reproduit sur une page de
   test, 2026-10-05). Elle prend la hauteur du cadre, garde son 16:9 et
   se centre à la main ; le cadre rogne les bords. */
.ism-hero__media { position: relative; }
.ism-hero__cadre {
    position: relative; overflow: hidden;
    width: 100%; aspect-ratio: 4 / 3;
    border-radius: var(--blob-2);
    box-shadow: 0 24px 60px rgba(30, 115, 88, .28);
    background: var(--turquoise-fort);
}
.ism-hero__video {
    /* inset: auto et object-fit: fill neutralisent la règle du vieux hero
       plein écran (inset: 0 + cover), qui sinon survit et réactive le bug. */
    position: absolute; inset: auto; top: 0; left: 50%;
    width: auto; height: 100%; max-width: none;
    object-fit: fill;
    transform: translateX(-50%);
    display: block;
}
@media (min-width: 62rem) { .ism-hero__cadre { aspect-ratio: 1 / 1; } }
/* Le médaillon est volontairement de travers : parfaitement centré, il
   ramenait la mise en page brochure que le client a rejetée. */
.ism-hero__media { transform: rotate(-2.5deg); }
.ism-hero__media .ism-pastille { transform: rotate(2.5deg); }

/* Le cercle en tirets qui tourne autour du sujet — le clin d'œil enfantin. */
.ism-hero__cercle {
    position: absolute; inset: -7%;
    border: 2px dashed rgba(255, 255, 255, .65);
    border-radius: 50%;
    pointer-events: none;
}

/* Les pastilles flottantes : elles sortent du cadre et cassent la grille. */
.ism-pastille {
    position: absolute; z-index: 2;
    width: 62px; height: 62px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--blanc);
    box-shadow: 0 10px 24px rgba(58, 74, 107, .22);
}
.ism-pastille svg { width: 28px; height: 28px; }
.ism-pastille--jaune { background: var(--jaune); color: var(--encre); }
.ism-pastille--corail { background: var(--corail-fort); }
.ism-pastille--bleu { background: var(--bleu-fort); }
.ism-pastille--a { top: 8%; right: -4%; }
.ism-pastille--b { bottom: 12%; left: -5%; }
@media (max-width: 47.99rem) { .ism-pastille { width: 48px; height: 48px; } .ism-pastille svg { width: 22px; height: 22px; } }

/* L'agenda à droite du médaillon : les trois prochaines dates sont la
   première question des parents, elles n'ont pas à attendre le bas de page.
   Carte blanche posée sur la tache verte — le contraste ne dépend donc pas
   de la vidéo. Sous 75rem la grille repasse à deux colonnes et la carte se
   met en pleine largeur : à trois colonnes le médaillon devenait un timbre. */
.ism-hero__agenda {
    background: var(--blanc);
    border-radius: var(--r-organique);
    box-shadow: 0 26px 64px rgba(30, 115, 88, .26);
    padding: 1.4rem 1.4rem 1.2rem;
}
.ism-hero__agenda-titre {
    font-family: var(--serif); font-weight: 900;
    font-size: 1.05rem; line-height: 1.25;
    color: var(--encre); margin: 0 0 1rem;
}
.ism-hero__agenda .ism-events-list { max-width: none; gap: .4rem; }
.ism-hero__agenda .ism-event-item {
    padding: .6rem .2rem; gap: .9rem;
    background: transparent;
    border-left: none; border-top: 1px solid rgba(58, 74, 107, .12);
}
.ism-hero__agenda .ism-event-item:first-child { border-top: none; }
.ism-hero__agenda .ism-event-item:hover { transform: none; }
.ism-hero__agenda .ism-event-date { width: 46px; height: 46px; }
.ism-hero__agenda .ism-event-day { font-size: 1.3rem; }
.ism-hero__agenda .ism-event-title { font-size: .92rem; }
.ism-hero__agenda .ism-event-title a { display: inline-block; text-wrap: balance; }
.ism-hero__agenda .ism-event-excerpt { display: none; }
.ism-hero__agenda-lien {
    display: inline-block; margin-top: .9rem;
    font-weight: 700; font-size: .88rem;
    color: var(--corail-encre);
}
.ism-hero__agenda-lien:hover { text-decoration: underline; }

@media (min-width: 62rem) and (max-width: 74.99rem) {
    .ism-hero__agenda { grid-column: 1 / -1; }
}
@media (min-width: 75rem) {
    .ism-hero__grille {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.27fr) minmax(268px, .6fr);
        gap: 2.2rem;
    }
    /* Le hero déborde la largeur commune : à 1200px, élargir l'agenda se
       payait sur le médaillon. Les dates cassaient en deux lignes
       (« Fancy-/fair »), ce qui les rendait illisibles en diagonale. */
    .ism-hero__grille { max-width: 1340px; }
    /* La carte respire loin du médaillon et penche dans l'autre sens : sans
       ça elle collait à la pastille jaune et lisait comme une colonne de
       gabarit, pas comme un objet posé sur la tache. */
    .ism-hero__agenda {
        margin-left: 1.4rem;
        transform: rotate(1.8deg) translateY(-1.2rem);
    }
}

/* ==========================================================================
   BLOBS DÉCORATIFS — de petites taches qui flottent dans les sections
   ========================================================================== */
.ism-blob {
    position: absolute; pointer-events: none; z-index: 0;
    border-radius: var(--blob-1);
}
.ism-blob--jaune { background: var(--jaune); }
.ism-blob--corail { background: var(--corail); }
.ism-blob--bleu { background: var(--bleu); }
.ism-blob--vert { background: var(--turquoise); }
.ism-section { position: relative; }
.ism-section > .ism-wrap { position: relative; z-index: 1; }

/* ==========================================================================
   LES TROIS PILIERS — cartes à bandeau coloré
   La photo (ou l'illustration) occupe le haut, le bandeau de couleur porte
   le titre et le texte. Une couleur par pilier, comme la référence.
   ========================================================================== */
.ism-pillars {
    display: grid; gap: 1.6rem;
    max-width: var(--max); margin: 0 auto; padding: 0 2rem 5.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .ism-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ism-pillar {
    padding: 0; background: none; overflow: hidden;
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-carte);
    display: flex; flex-direction: column;
    transition: transform .25s var(--ease);
}
.ism-pillar:hover { transform: translateY(-6px); background: none !important; }
.ism-pillar__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--turquoise-pale); }
.ism-pillar__media .ism-visuel { border-radius: 0; height: 100%; aspect-ratio: auto; }
.ism-pillar__corps { padding: 1.6rem 1.5rem 1.9rem; flex: 1; }
.ism-pillar__title {
    font-family: var(--serif); font-weight: 800;
    font-size: 1.3rem; margin-bottom: .5rem; color: var(--blanc);
}
.ism-pillar__text { font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.ism-pillar:nth-child(1) .ism-pillar__corps { background: var(--bleu-fort); }
.ism-pillar:nth-child(2) .ism-pillar__corps { background: var(--corail-fort); }
.ism-pillar:nth-child(3) .ism-pillar__corps { background: var(--jaune); }
/* Le jaune n'accepte pas de blanc dessus : 2.0:1. Encre obligatoire. */
.ism-pillar:nth-child(3) .ism-pillar__title { color: var(--encre); }
.ism-pillar:nth-child(3) .ism-pillar__text { color: rgba(58, 74, 107, .92); }

/* ==========================================================================
   ACCÈS RAPIDE — tuiles à picto carré arrondi
   ========================================================================== */
.ism-grid4 { gap: 1.4rem; }
.ism-grid4--bordered { border: none; }
.ism-grid4__item {
    border: none; border-right: none;
    background: var(--blanc);
    border-radius: var(--r-lg);
    padding: 2.2rem 1.6rem;
    text-align: left;
    box-shadow: var(--ombre-carte);
    transition: transform .2s var(--ease);
}
.ism-grid4__item:hover { background: var(--blanc); transform: translateY(-5px); }
.ism-grid4__item::after { display: none; }
.ism-grid4__item h3 {
    font-family: var(--serif); font-weight: 800; font-size: 1.12rem;
    color: var(--encre); margin-bottom: .35rem;
}
.ism-grid4__item p { font-size: .92rem; line-height: 1.55; color: var(--encre-douce); }

/* La tuile du picto : carré arrondi coloré, icône blanche. Chaque tuile
   d'une série de quatre prend une couleur différente — vert, bleu, corail,
   jaune, dans cet ordre, toujours. */
.ism-grid4__icon {
    font-size: 0; margin-bottom: 1.1rem;
    width: 58px; height: 58px; border-radius: 18px;
    display: grid; place-items: center;
    background: var(--turquoise-fort); color: var(--blanc);
}
.ism-grid4__item:nth-child(2) .ism-grid4__icon { background: var(--bleu-fort); }
.ism-grid4__item:nth-child(3) .ism-grid4__icon { background: var(--corail-fort); }
.ism-grid4__item:nth-child(4) .ism-grid4__icon { background: var(--jaune); color: var(--encre); }
.ism-picto { width: 28px; height: 28px; display: block; color: inherit; }
.ism-grid4__item:hover .ism-picto { color: inherit; }

/* Une barre de couleur sous le titre, comme dans la référence. */
.ism-grid4__item h3::after {
    content: ''; display: block; width: 28px; height: 4px; border-radius: 2px;
    background: var(--jaune); margin: .6rem 0 .1rem;
}

/* ==========================================================================
   SECTION « NOS ESPACES » — onglets + visuel
   ========================================================================== */
.ism-espaces { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 62rem) {
    .ism-espaces { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3.5rem; }
    .ism-espaces__visuel { order: 2; }
}
.ism-espaces > * { min-width: 0; }
.ism-tabs__bar { border-bottom: none; gap: .4rem; margin-bottom: 2rem; }
.ism-tabs__btn {
    font-family: var(--serif); font-weight: 700; text-transform: none;
    font-size: .9rem; letter-spacing: 0;
    border-radius: var(--r-pilule);
    padding: .58rem 1.1rem;
    background: var(--gris-fond); color: var(--encre-douce);
}
/* Le soulignement hérité de l'ancienne barre n'a plus de sens sur des
   pilules : il laissait un tiret rouge sous l'onglet actif. */
.ism-tabs__btn::after { content: none; }
.ism-tabs__btn:hover { background: var(--turquoise-pale); color: var(--turquoise-fort); }
.ism-tabs__btn.active { background: var(--turquoise-fort); color: var(--blanc); }

/* ==========================================================================
   CARTES ET BLOCS
   ========================================================================== */
.ism-card, .ism-event, .ism-campus, .ism-director, .ism-quote, .ism-faq__item {
    border-radius: var(--r-lg);
}
.ism-card__media, .ism-card__thumb { border-radius: var(--r-md); overflow: hidden; }

/* ---- En-têtes de section ------------------------------------------------- */
.ism-heading { text-align: center; }
.ism-heading__label {
    display: inline-block;
    font-family: var(--serif); font-weight: 700;
    color: var(--turquoise-fort); letter-spacing: .04em; text-transform: none;
    font-size: .88rem;
}
.ism-heading__label--gold { color: var(--jaune); }
.ism-heading h2 {
    font-family: var(--serif); font-weight: 900;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
}
.ism-heading__desc { color: var(--encre-douce); max-width: 56ch; margin: .4rem auto 0; }

/* ---- Bandeaux ------------------------------------------------------------ */
.ism-bg-navy, .ism-bg-vert { background: var(--turquoise-fort); color: rgba(255, 255, 255, .92); }
.ism-bg-navy h2, .ism-bg-vert h2, .ism-bg-navy h3, .ism-bg-vert h3 { color: var(--blanc); }
.ism-bg-warm { background: var(--gris-fond); }
.ism-bg-creme { background: var(--creme); }
.ism-act--dark { background: var(--turquoise-fort); }
.ism-act--dark .ism-act__title { color: var(--blanc); }
.ism-act { min-height: 0; padding: 6rem 2rem; }

/* ---- Rythme -------------------------------------------------------------- */
.ism-section { padding: 5rem 2rem; }
@media (min-width: 62rem) { .ism-section { padding: 6.5rem 2rem; } }
/* Un en-tête seul, suivi d'un bloc pleine largeur : sinon l'espace est
   compté deux fois et le titre flotte loin de ce qu'il annonce. */
.ism-section--titre { padding-bottom: 2.5rem; }
@media (min-width: 62rem) { .ism-section--titre { padding-bottom: 3rem; } }

/* ---- Vague organique entre deux sections -------------------------------- */
.ism-vague { display: block; width: 100%; height: 64px; }
.ism-vague path { fill: currentColor; }

/* ==========================================================================
   SECTION VIDÉO — la moitié image, la moitié aplat vert (motif de la réf.)
   ========================================================================== */
.ism-duo { display: grid; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .ism-duo { grid-template-columns: 1fr 1fr; } }
.ism-duo__media { position: relative; min-height: 320px; background: var(--turquoise-pale); }
.ism-duo__media video, .ism-duo__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ism-duo__texte {
    background: var(--turquoise-fort); color: rgba(255, 255, 255, .92);
    padding: 4rem 2.5rem;
    display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 62rem) { .ism-duo__texte { padding: 5rem 4rem; } }
.ism-duo__texte h2 { color: var(--blanc); font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.ism-duo__texte p { margin-bottom: 1.6rem; line-height: 1.7; }
.ism-duo__texte .ism-sep { justify-content: flex-start; }
.ism-duo__texte .ism-sep::before, .ism-duo__texte .ism-sep::after { background: rgba(255,255,255,.4); }

/* Liste à coches, sur fond clair comme sur fond vert. */
.ism-coches { list-style: none; display: grid; gap: .8rem; margin: 0; padding: 0; }
.ism-coches li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.55; }
.ism-coches li::before {
    content: '✓'; flex: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--jaune); color: var(--encre);
    display: grid; place-items: center;
    font-size: .78rem; font-weight: 700; margin-top: .12rem;
}

/* ==========================================================================
   RESPECT DU MOUVEMENT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* Seule la boucle décorative disparaît. Le film reste : il a des
       contrôles, donc c'est l'utilisateur qui décide de le lancer. */
    .ism-hero__video { display: none; }
}

/* Le film n'est pas un décor de fond : il garde ses proportions et sa
   barre de contrôles, il ne se fait pas rogner par object-fit: cover. */
.ism-duo__media--film {
    display: grid; place-items: center;
    background: var(--turquoise-fort); padding: 2rem;
}
.ism-duo__media--film video {
    position: static; inset: auto;
    width: 100%; height: auto; max-height: 100%;
    object-fit: contain;
    border-radius: var(--r-md);
}


/* ==========================================================================
   DOCUMENTS À TÉLÉCHARGER
   Une carte par document : pastille PDF, titre, ce que le document contient,
   et le poids du fichier — un parent en 4G doit savoir avant de cliquer.
   ========================================================================== */
.ism-docs {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
@media (min-width: 48rem) {
    .ism-docs { grid-template-columns: 1fr 1fr; }
}

/* Le contenu de page souligne et colore ses liens (.ism-article__content a) :
   une carte entière cliquable n'est pas un lien de texte, on l'en sort. */
.ism-article__content a.ism-doc {
    color: var(--encre);
    text-decoration: none;
}
.ism-doc {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    background: var(--blanc);
    border: 2px solid var(--trait);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: var(--encre);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ism-doc:hover,
.ism-doc:focus-visible {
    border-color: var(--turquoise-fort);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(30, 115, 88, .14);
}

.ism-doc__type {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: var(--turquoise-fort);
    color: var(--blanc);
    font-family: var(--serif);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .06em;
}
.ism-docs li:nth-child(2) .ism-doc__type { background: var(--bleu-fort); }
.ism-docs li:nth-child(3) .ism-doc__type { background: var(--corail-fort); }
.ism-docs li:nth-child(4) .ism-doc__type { background: var(--jaune); color: var(--encre); }
.ism-docs li:nth-child(5) .ism-doc__type { background: var(--turquoise-fort); }

.ism-doc__titre {
    display: block;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: .3rem;
}
.ism-doc__desc {
    display: block;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--encre-douce);
}
.ism-doc__poids {
    display: block;
    margin-top: .5rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--turquoise-fort);
}

@media (prefers-reduced-motion: reduce) {
    .ism-doc { transition: none; }
    .ism-doc:hover, .ism-doc:focus-visible { transform: none; }
}


/* ==========================================================================
   CARTES — « Nous situer », page de contact
   Le cadre garde son ratio avant et après le clic : pas de saut de page
   quand l'iframe remplace le bouton.
   ========================================================================== */
.ism-cartes {
    padding: 4rem 0 5rem;
    background: var(--gris-fond);
}
.ism-cartes__titre {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    color: var(--encre);
    margin-bottom: 2rem;
}
.ism-cartes__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 2rem;
}
.ism-carte {
    background: var(--blanc);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--ombre-carte);
}
.ism-carte__cadre {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--turquoise-pale);
}
.ism-carte__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.ism-carte__charger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    height: 100%;
    border: 0;
    cursor: pointer;
    font-family: var(--sans);
    background: var(--turquoise-pale);
    transition: background .3s var(--ease);
}
.ism-carte__charger:hover,
.ism-carte__charger:focus-visible { background: var(--creme); }
.ism-carte__pin { color: var(--turquoise-fort); }
.ism-carte__pin .ism-picto { width: 32px; height: 32px; }
.ism-carte__label {
    font-weight: 700;
    color: var(--encre);
}
.ism-carte__note {
    font-size: .8rem;
    color: var(--encre-douce);
}
.ism-carte__legende { padding: 1.4rem 1.6rem 1.6rem; }
.ism-carte__legende h3 {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--encre);
    margin-bottom: .3rem;
}
.ism-carte__legende p {
    font-size: .92rem;
    color: var(--encre-douce);
    margin-bottom: .8rem;
}
.ism-carte__entree span {
    display: block;
    margin-top: .15rem;
    font-weight: 400;
    font-size: .82rem;
}
.ism-carte__entree {
    font-size: .88rem;
    font-weight: 700;
    color: var(--corail-encre);
    background: var(--corail-pale);
    border-radius: var(--r-xs);
    padding: .45rem .7rem;
    margin-bottom: .8rem;
}
.ism-carte__osm {
    width: 100%;
    height: 100%;
}
/* Leaflet se pose au-dessus du contenu par défaut : on le garde sous le
   header fixe, sinon la carte passe devant le menu au défilement. */
.ism-carte__osm .leaflet-pane,
.ism-carte__osm .leaflet-control { z-index: 1; }
.ism-carte__osm .leaflet-container { font-family: var(--sans); background: var(--turquoise-pale); }

.ism-carte__marcheur svg { width: 28px; height: 46px; overflow: visible; }
.ism-carte__marcheur .ism-trajet__jambes {
    transform-box: view-box;
    transform-origin: 0 50px;
    animation: ismPas .5s steps(1, end) infinite;
}
@keyframes ismPas {
    0%   { transform: rotate(-9deg); }
    50%  { transform: rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ism-carte__marcheur .ism-trajet__jambes { animation: none; }
}

.ism-carte__lien {
    display: inline-block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--turquoise-fort);
    border-bottom: 2px solid var(--jaune);
}
.ism-carte__lien:hover { color: var(--encre); }

@media (prefers-reduced-motion: reduce) {
    .ism-carte__charger { transition: none; }
}


/* ==========================================================================
   NOTRE ORGANISATION — la présentation institutionnelle

   Une page qui explique une structure administrative risque le mur de texte.
   Chaque bloc du support a donc sa forme propre : deux fiches côte à côte pour
   les implantations, une liste de niveaux pour le site partagé, une bande
   colorée pour les chiffres.
   ========================================================================== */
.ism-orga .ism-heading { margin-bottom: 2.6rem; }

/* ---- Les deux implantations, reliées par le « + » ----------------------- */
.ism-orga__duo {
    position: relative;
    display: grid;
    gap: 1.4rem;
    grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
    .ism-orga__duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem; }
}
.ism-orga__ecole {
    background: var(--blanc);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-carte);
    padding: 2rem 1.8rem 1.9rem;
}
.ism-orga__ecole-icone {
    display: grid; place-items: center;
    width: 54px; height: 54px; border-radius: 18px;
    margin-bottom: 1.1rem;
    background: var(--turquoise-fort); color: var(--blanc);
}
/* Deux écoles, deux couleurs : on lit du premier coup qu'il y en a bien deux. */
.ism-orga__ecole:nth-child(2) .ism-orga__ecole-icone { background: var(--bleu-fort); }
.ism-orga__ecole h3 {
    font-family: var(--serif); font-weight: 800; font-size: 1.35rem;
    color: var(--encre); margin-bottom: .25rem;
}
.ism-orga__ecole-type {
    font-size: .88rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--encre-douce);
    margin-bottom: 1.2rem;
}
.ism-orga__fiche { display: grid; gap: .1rem; margin: 0; }
.ism-orga__fiche dt {
    font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--turquoise-fort);
    margin-top: .9rem;
}
.ism-orga__fiche dd { margin: 0; font-size: .98rem; color: var(--encre); }

/* Le signe qui relie les deux fiches. Sur mobile il se glisse entre elles,
   sur deux colonnes il se pose au centre de la gouttière. */
.ism-orga__plus {
    justify-self: center;
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--jaune); color: var(--encre);
    font-family: var(--serif); font-weight: 800; font-size: 1.5rem; line-height: 1;
    margin: -.3rem 0;
    order: 2;
}
/* Sur une colonne, le « + » se place entre les deux fiches : il est dernier
   dans le DOM (donc jamais lu avant elles), l'ordre visuel le remet au milieu. */
.ism-orga__ecole:nth-of-type(1) { order: 1; }
.ism-orga__ecole:nth-of-type(2) { order: 3; }
@media (min-width: 48rem) {
    .ism-orga__ecole:nth-of-type(1),
    .ism-orga__ecole:nth-of-type(2) { order: 0; }
    .ism-orga__plus {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        order: 0; margin: 0;
        /* Le halo mange la gouttière pour que le « + » ne touche pas les fiches. */
        box-shadow: 0 0 0 10px var(--gris-fond);
    }
}

.ism-orga__chute {
    text-align: center;
    max-width: 58ch; margin: 2.4rem auto 0;
    font-size: 1.02rem; font-weight: 700; color: var(--encre);
}

/* ---- Le site partagé : les quatre écoles de la grille ------------------- */
.ism-orga__site {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .ism-orga__site { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .ism-orga__site { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ism-orga__site-item {
    background: var(--gris-fond);
    border-radius: var(--r-md);
    border-top: 5px solid var(--trait);
    padding: 1.3rem 1.3rem 1.5rem;
    box-shadow: var(--ombre-douce);
}
.ism-orga__site-niveau {
    display: block;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--encre-douce);
    margin-bottom: .35rem;
}
.ism-orga__site-nom {
    display: block;
    font-family: var(--serif); font-weight: 800; font-size: 1.02rem;
    color: var(--encre); line-height: 1.35;
}
/* Notre case, mise en avant : c'est le repère du lecteur dans le schéma. */
.ism-orga__site-item--nous {
    border-top-color: var(--jaune);
    background: var(--jaune-pale);
    box-shadow: var(--ombre-carte);
}
.ism-orga__site-item--nous .ism-orga__site-niveau { color: var(--corail-encre); }

/* ---- Le réseau ---------------------------------------------------------- */
.ism-orga__reseau {
    background: var(--turquoise-pale);
    border-radius: var(--r-lg);
    padding: 2.4rem 1.8rem;
    text-align: center;
}
.ism-orga__citation {
    font-family: var(--serif); font-weight: 800;
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    color: var(--encre); margin-bottom: 1.8rem;
}
.ism-orga__reseau-liste {
    list-style: none; margin: 0 0 1.6rem; padding: 0;
    display: grid; gap: 1.2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .ism-orga__reseau-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ism-orga__reseau-liste li { font-size: .95rem; color: var(--encre-douce); line-height: 1.5; }
.ism-orga__reseau-liste strong {
    display: block;
    font-family: var(--serif); font-weight: 800;
    font-size: 2.1rem; color: var(--turquoise-fort);
}
.ism-orga__reseau-lien a { font-weight: 700; border-bottom: 2px solid var(--jaune); }

/* ---- Les chiffres : une bande pleine ----------------------------------- */
/* Fond --turquoise-fort et pas --turquoise : le blanc n'est lisible que sur
   le premier (5,76:1 contre 2,70:1). */
.ism-orga__chiffres {
    background: var(--turquoise-fort);
    color: var(--blanc);
    padding: 4rem 0;
    text-align: center;
}
.ism-orga__chiffres-titre {
    font-family: var(--serif); font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--blanc); margin-bottom: 2.4rem;
}
.ism-orga__compteurs {
    list-style: none; margin: 0 0 2rem; padding: 0;
    display: grid; gap: 1.8rem;
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .ism-orga__compteurs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ism-orga__compteurs strong {
    display: block;
    font-family: var(--serif); font-weight: 800;
    font-size: clamp(2.6rem, 7vw, 3.4rem); line-height: 1;
    color: var(--jaune);
}
.ism-orga__compteurs span {
    display: block; margin-top: .5rem;
    font-size: .98rem; color: rgba(255, 255, 255, .9);
}
.ism-orga__chiffres-note {
    max-width: 56ch; margin: 0 auto;
    font-size: .98rem; color: rgba(255, 255, 255, .88); line-height: 1.6;
}


/* ==========================================================================
   HARCÈLEMENT — la fiche parents mise en page
   Une info que le parent lit en diagonale, souvent inquiet : trois critères
   numérotés, un tableau à deux colonnes qui oppose, deux listes qui tranchent.
   ========================================================================== */
.ism-chapo {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--encre-douce);
    max-width: 65ch;
    margin: 0 auto;
}

/* ---- Les trois critères ------------------------------------------------- */
.ism-criteres {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1.4rem;
}
.ism-critere {
    background: var(--blanc);
    border-radius: var(--r-lg);
    padding: 2rem 1.7rem;
    box-shadow: var(--ombre-carte);
}
.ism-critere__num {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--jaune);
    color: var(--encre);
    font-family: var(--serif);
    font-weight: 800;
    margin-bottom: 1rem;
}
.ism-critere h3 {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--encre);
    margin-bottom: .5rem;
}
.ism-critere p { color: var(--encre-douce); line-height: 1.65; font-size: .95rem; }

/* ---- L'encadré qui nuance ----------------------------------------------- */
.ism-note {
    margin-top: 2rem;
    padding: 1.2rem 1.4rem;
    border-left: 4px solid var(--turquoise-fort);
    border-radius: var(--r-xs);
    background: var(--turquoise-pale);
    color: var(--encre);
    line-height: 1.7;
    font-size: .95rem;
}
.ism-note--alerte {
    border-left-color: var(--corail-fort);
    background: var(--corail-pale);
    color: var(--corail-encre);
}

/* ---- Le tableau conflit / harcèlement -----------------------------------
   Sur mobile il se replie en fiches : un tableau à trois colonnes ne se lit
   pas sur 360 px, et le scroll horizontal fait rater une colonne sur deux. */
.ism-compare { overflow-x: auto; }
.ism-compare table {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanc);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--ombre-carte);
}
.ism-compare th,
.ism-compare td {
    padding: 1rem 1.1rem;
    text-align: left;
    vertical-align: top;
    font-size: .93rem;
    line-height: 1.6;
    border-bottom: 1px solid var(--trait);
}
.ism-compare thead th {
    background: var(--turquoise-fort);
    color: var(--blanc);
    font-family: var(--serif);
    font-size: .95rem;
}
.ism-compare thead th.ism-compare__alerte { background: var(--corail-fort); }
.ism-compare tbody th {
    font-family: var(--serif);
    color: var(--encre);
    white-space: nowrap;
}
.ism-compare tbody td { color: var(--encre-douce); }
.ism-compare tbody td.ism-compare__alerte { background: var(--corail-pale); color: var(--corail-encre); }
.ism-compare tbody tr:last-child th,
.ism-compare tbody tr:last-child td { border-bottom: 0; }

/* ---- À faire / à éviter -------------------------------------------------- */
.ism-conseils {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.6rem;
}
.ism-conseils__col {
    background: var(--blanc);
    border-radius: var(--r-lg);
    padding: 1.8rem;
    box-shadow: var(--ombre-carte);
}
.ism-conseils__col h3 {
    font-family: var(--serif);
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
.ism-conseils__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ism-conseils__col li {
    display: flex; gap: .7rem; align-items: flex-start;
    line-height: 1.6; font-size: .95rem; color: var(--encre-douce);
}
.ism-conseils__col li::before {
    flex: none;
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .8rem; font-weight: 700;
    margin-top: .1rem;
}
.ism-conseils__col--oui h3 { color: var(--turquoise-fort); }
.ism-conseils__col--oui li::before { content: '✓'; background: var(--turquoise-fort); color: var(--blanc); }
.ism-conseils__col--non h3 { color: var(--corail-fort); }
.ism-conseils__col--non li::before { content: '✕'; background: var(--corail-fort); color: var(--blanc); }

/* ---- Le signalement ------------------------------------------------------ */
.ism-signalement {
    background: var(--blanc);
    border: 3px solid var(--jaune);
    border-radius: var(--r-lg);
    padding: 1.8rem;
    text-align: center;
    margin-bottom: 2rem;
}
.ism-signalement__adresse {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 3.4vw, 1.6rem);
    font-weight: 800;
    word-break: break-word;
}
.ism-signalement__adresse a { color: var(--encre); border-bottom: 3px solid var(--jaune); }
.ism-signalement__adresse a:hover { color: var(--turquoise-fort); }
.ism-signalement__note { margin-top: .6rem; font-size: .9rem; color: var(--encre-douce); }

.ism-mentions {
    margin-top: 2rem;
    font-size: .82rem;
    color: var(--encre-douce);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .ism-compare thead { display: none; }
    .ism-compare table, .ism-compare tbody, .ism-compare tr, .ism-compare th, .ism-compare td { display: block; }
    .ism-compare tbody tr {
        background: var(--blanc);
        border-radius: var(--r-md);
        box-shadow: var(--ombre-carte);
        margin-bottom: 1rem;
        overflow: hidden;
    }
    .ism-compare tbody th {
        background: var(--turquoise-fort);
        color: var(--blanc);
        white-space: normal;
    }
    .ism-compare tbody td::before {
        content: attr(data-col);
        display: block;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--encre);
        margin-bottom: .25rem;
    }
}


/* ==========================================================================
   CALENDRIER DE L'ANNÉE
   Une année scolaire tient en une page : un titre par mois, une ligne par
   date. Ce qui est passé reste visible mais s'efface — on cherche autant
   « c'était quand ? » que « c'est quand ? ».
   ========================================================================== */
.ism-annee {
    margin-top: 2.5rem;
    display: grid;
    gap: 2.5rem;
}
.ism-mois__titre {
    font-family: var(--serif);
    font-size: 1.35rem;
    color: var(--encre);
    text-transform: capitalize;
    padding-bottom: .6rem;
    margin-bottom: 1.2rem;
    border-bottom: 3px solid var(--jaune);
}
.ism-mois__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ism-date {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--blanc);
    border: 2px solid var(--trait);
    border-radius: var(--r-md);
    padding: 1rem 1.2rem;
    transition: border-color .2s ease, transform .2s ease;
}
.ism-date:hover { border-color: var(--turquoise-fort); transform: translateY(-2px); }
.ism-date__jour {
    flex: 0 0 auto;
    width: 54px;
    text-align: center;
    line-height: 1.1;
}
.ism-date__nombre {
    display: block;
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--turquoise-fort);
}
.ism-date__semaine {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--encre-douce);
}
.ism-date__corps { display: block; }
.ism-date__titre {
    display: block;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--encre);
    line-height: 1.35;
}
.ism-date__titre:hover { color: var(--turquoise-fort); }
.ism-date__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin-top: .35rem;
    font-size: .85rem;
    color: var(--encre-douce);
}
.ism-date__type a { color: var(--corail-encre); }

/* Passé : lisible, mais visiblement derrière nous. */
.ism-date--passe { background: var(--gris-fond); border-color: transparent; }
.ism-date--passe .ism-date__nombre { color: var(--encre-douce); }
.ism-date--passe .ism-date__titre { color: var(--encre-douce); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .ism-date { transition: none; }
    .ism-date:hover { transform: none; }
}


/* ==========================================================================
   ALBUMS PHOTO — un carrousel par album
   Le défilement est natif : scroll-snap horizontal, qui se manipule au doigt
   sur mobile sans une ligne de JavaScript. Les flèches sont un confort de
   souris et de clavier, masquées quand tout tient à l'écran.
   ========================================================================== */
.ism-album { margin-bottom: 3.5rem; }
.ism-album__entete { margin-bottom: 1rem; }
.ism-album__titre {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--encre);
}
.ism-album__compte {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--turquoise-fort);
    margin-top: .2rem;
}
.ism-album__legende {
    margin-top: .5rem;
    color: var(--encre-douce);
    font-size: .95rem;
    line-height: 1.6;
}

.ism-carrousel { position: relative; }
.ism-carrousel__piste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.ism-carrousel__piste:focus-visible {
    outline: 3px solid var(--jaune);
    outline-offset: 4px;
}
.ism-carrousel__vue {
    flex: 0 0 min(92%, 640px);
    scroll-snap-align: center;
}
.ism-carrousel__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-lg);
    background: var(--turquoise-pale);
}
.ism-carrousel__cap {
    margin-top: .6rem;
    font-size: .85rem;
    color: var(--encre-douce);
    line-height: 1.5;
}

.ism-carrousel__fleche {
    position: absolute;
    top: calc(50% - 24px);
    z-index: 2;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--encre);
    box-shadow: var(--ombre-carte);
    cursor: pointer;
    transition: transform .2s var(--ease), opacity .2s ease;
}
.ism-carrousel__fleche svg { width: 22px; height: 22px; }
.ism-carrousel__fleche--prec { left: -8px; }
.ism-carrousel__fleche--suiv { right: -8px; }
.ism-carrousel__fleche:hover { transform: scale(1.06); }
.ism-carrousel__fleche:disabled { opacity: .35; cursor: default; transform: none; }

/* Le doigt suffit sur mobile : les flèches y mangeraient la photo. */
@media (max-width: 768px) {
    .ism-carrousel__fleche { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ism-carrousel__piste { scroll-behavior: auto; }
    .ism-carrousel__fleche { transition: none; }
    .ism-carrousel__fleche:hover { transform: none; }
}

/* ==========================================================================
   DÉBORDEMENT HORIZONTAL — les adresses e-mail
   « direction.saintemarieb@ismprimaire.be » est un mot de 37 caractères.
   Une piste de grille ne descend jamais sous la largeur minimale de son
   contenu : sans ces deux règles, cette seule adresse élargit la carte,
   qui élargit la page, qui défile latéralement sous 390 px.
   `anywhere` et non `break-word` : seul le premier compte dans le calcul
   de cette largeur minimale.
   ========================================================================== */
p, li, td, th, blockquote, figcaption, footer, address, .ism-doc {
    overflow-wrap: anywhere;
}
.ism-directors > *, .ism-campuses > *, .ism-conseils > *, .ism-criteres > *,
.ism-cartes__grille > *, .ism-grid4 > *, .ism-cards > *, .ism-form-info__contacts > * {
    min-width: 0;
}


/* ==========================================================================
   VIDÉOS — façade HTML, lecteur YouTube au clic (cf. ism_facade_youtube)
   ========================================================================== */
.ism-video {
    margin: 1.6rem 0 2.2rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--turquoise-fort);
    box-shadow: var(--ombre-carte);
}
.ism-video__charger {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .5rem;
    width: 100%; height: 100%;
    border: 0; cursor: pointer;
    padding: 1.5rem;
    font-family: var(--sans);
    color: var(--blanc);
    text-align: center;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.14), transparent 55%),
        var(--turquoise-fort);
    transition: background-color .3s var(--ease);
}
.ism-video__charger:hover,
.ism-video__charger:focus-visible { background-color: var(--bleu-fort); }
.ism-video__play {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--jaune);
    color: var(--encre);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    transition: transform .3s var(--ease);
}
.ism-video__play .ism-picto { width: 34px; height: 34px; }
.ism-video__charger:hover .ism-video__play { transform: scale(1.08); }
.ism-video__titre {
    font-family: var(--serif); font-weight: 800;
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    line-height: 1.25;
    max-width: 28ch;
}
.ism-video__note { font-size: .82rem; color: rgba(255,255,255,.82); }
.ism-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.ism-article__content .ism-video__titre,
.ism-article__content .ism-video__note { color: inherit; }

/* ==========================================================================
   L'ÉQUIPE — un groupe par fonction, une pastille par personne
   ========================================================================== */
.ism-equipe { display: grid; gap: 2rem; }
.ism-equipe__groupe { border-top: 2px solid var(--trait); padding-top: 1.3rem; }
.ism-equipe__fonction {
    font-family: var(--serif); font-weight: 800; font-size: 1.1rem;
    color: var(--turquoise-fort);
    margin: 0 0 .9rem;
    display: flex; align-items: baseline; gap: .6rem;
}
.ism-equipe__nb {
    font-family: var(--sans); font-weight: 700; font-size: .78rem;
    color: var(--encre-douce);
}
.ism-equipe__liste {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .6rem;
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .ism-equipe__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .ism-equipe__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ism-equipe__membre {
    display: flex; align-items: center; gap: .8rem;
    background: var(--blanc);
    border: 2px solid var(--trait);
    border-radius: var(--r-md);
    padding: .65rem .9rem;
    font-size: .95rem; color: var(--encre);
}
.ism-equipe__classe {
    flex: 0 0 auto;
    min-width: 44px; padding: .2rem .5rem;
    border-radius: 999px;
    text-align: center;
    font-family: var(--sans); font-weight: 800; font-size: .78rem;
    letter-spacing: .04em;
    background: var(--jaune); color: var(--encre);
}
.ism-equipe__groupe:nth-child(4n+2) .ism-equipe__classe { background: var(--bleu-pale); color: var(--bleu-fort); }
.ism-equipe__groupe:nth-child(4n+3) .ism-equipe__classe { background: var(--corail-pale); color: var(--corail-encre); }
.ism-equipe__groupe:nth-child(4n)   .ism-equipe__classe { background: var(--turquoise-pale); color: var(--turquoise-fort); }
.ism-equipe__note { margin-top: 1.6rem; font-size: .88rem; color: var(--encre-douce); }


/* ==========================================================================
   ANNONCE — fenêtre à l'ouverture (inc/popup.php)
   Une carte, pas une bannière : même langage que le reste du site (coins
   ronds, pastille jaune, bouton jaune). Fermeture évidente en haut à droite.
   ========================================================================== */
html.ism-popup-ouverte { overflow: hidden; }
.ism-popup {
    position: fixed; inset: 0; z-index: 9000;
    display: grid; place-items: center;
    padding: 1rem;
}
.ism-popup[hidden] { display: none; }
.ism-popup__voile {
    position: absolute; inset: 0;
    background: rgba(58, 74, 107, .62);
    opacity: 0;
    transition: opacity .35s var(--ease);
}
.ism-popup__carte {
    position: relative; z-index: 1;
    width: min(100%, 520px);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--blanc);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 80px rgba(30, 115, 88, .30);
    opacity: 0;
    transform: translateY(18px) scale(.97);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.ism-popup--ouvert .ism-popup__voile { opacity: 1; }
.ism-popup--ouvert .ism-popup__carte { opacity: 1; transform: none; }

.ism-popup__fermer {
    position: absolute; top: .8rem; right: .8rem; z-index: 2;
    width: 42px; height: 42px;
    border: 0; border-radius: 50%;
    background: var(--blanc); color: var(--encre);
    box-shadow: 0 6px 18px rgba(0,0,0,.14);
    display: grid; place-items: center;
    cursor: pointer;
    transition: transform .2s var(--ease), background .2s var(--ease);
}
.ism-popup__fermer:hover, .ism-popup__fermer:focus-visible { background: var(--jaune); transform: rotate(90deg); }
.ism-popup__fermer:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }

.ism-popup__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--turquoise-pale); }
.ism-popup__media img,
.ism-popup__media video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--encre); }
.ism-popup__media--video { background: var(--encre); }

.ism-popup__corps { padding: 1.6rem 1.6rem 1.7rem; }
@media (min-width: 40rem) { .ism-popup__corps { padding: 2rem 2.2rem 2.2rem; } }
.ism-popup__surtitre {
    display: inline-block;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--corail-encre); background: var(--corail-pale);
    padding: .3rem .7rem; border-radius: 999px;
    margin-bottom: .8rem;
}
.ism-popup__titre {
    font-family: var(--serif); font-weight: 800;
    font-size: clamp(1.45rem, 4vw, 1.9rem); line-height: 1.15;
    color: var(--encre); margin: 0 0 .7rem;
}
.ism-popup__texte { color: var(--encre-douce); font-size: .98rem; line-height: 1.6; }
.ism-popup__texte p { margin: 0 0 .7rem; }
.ism-popup__texte p:last-child { margin-bottom: 0; }
.ism-popup__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem;
    margin-top: 1.4rem;
}
.ism-popup__plus-tard {
    border: 0; background: none; padding: .4rem 0;
    font-family: var(--sans); font-weight: 700; font-size: .92rem;
    color: var(--encre-douce); cursor: pointer;
    border-bottom: 2px solid var(--trait);
}
.ism-popup__plus-tard:hover, .ism-popup__plus-tard:focus-visible { color: var(--encre); border-color: var(--jaune); }

@media (prefers-reduced-motion: reduce) {
    .ism-popup__voile, .ism-popup__carte, .ism-popup__fermer { transition: none; }
    .ism-popup__carte { transform: none; }
}


/* ==========================================================================
   UTILITY
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }