@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------
   commun.css — ce que les briques du « site idéal » partagent (JulienWeb, 03/10/2026).

   Mise en file par le socle (julienweb-site/socle.php, jws_ouvrir_file) APRÈS toutes les
   feuilles du thème et AVANT celles des briques, dès qu'une brique au moins est chargée.
   filemtime() en version.

   Rien ici ne touche un élément du thème, sauf le § 7 (repères de focus) : des variables, et quatre
   utilitaires préfixés jws-.
   Les valeurs viennent de la charte (design.md, relevée dans deli-one le 03/09/2026).

   1. Variables
   2. .jws-sr        texte réservé aux lecteurs d'écran
   3. .jws-btn       bouton, aligné sur .is-btn-jelly du thème
   4. .jws-tesselle  le losange orange (grammaire « Alhambra »)
   5. Mouvement      prefers-reduced-motion pour tout ce qui est préfixé jws-
   7. Clavier        repères de focus manquants sur des éléments du thème et du carrousel, lien d'évitement
   --------------------------------------------------------------------------------------------- */


/* -- 1. Variables ----------------------------------------------------------------------------- */

:root {
    /* Marque */
    --jws-indigo: #312783;          /* titres, noms, liens, cartouches — 12,01:1 sur blanc */
    --jws-indigo-fonce: #241d63;
    --jws-orange: #f39200;          /* fond de bouton, filet, bordure, survol. JAMAIS en texte
                                       courant sur fond clair : 2,35:1 */
    --jws-orange-texte: #a86400;    /* l'orange qui passe en texte sur blanc (4,68:1), si un
                                       texte doit vraiment être orange */
    --jws-sur-orange: #312783;      /* texte posé sur l'orange : indigo, 5,10:1 */
    --jws-sur-indigo: #ffffff;

    /* Texte */
    --jws-encre: #262830;           /* corps */
    --jws-encre-2: #333333;
    --jws-encre-3: #555555;
    --jws-gris: #666666;            /* le plus clair qui passe en texte courant : 5,74:1 */

    /* Surfaces et traits */
    --jws-fond: #ffffff;
    --jws-fond-doux: #f5f5f5;
    --jws-fond-sombre: #121212;
    --jws-trait: #cccccc;
    --jws-trait-clair: #eeeeee;
    --jws-trait-agenda: #aab2cc;

    /* Typographie : les deux familles déjà chargées par le thème, rien de plus */
    --jws-police: 'Open Sans', sans-serif;
    --jws-police-titre: 'Poppins', 'Open Sans', sans-serif;

    /* Rayons */
    --jws-rayon: 3px;
    --jws-rayon-moyen: 10px;
    --jws-rayon-pilule: 20px;

    /* Pas (le thème travaille en em sur une base de 16 px) */
    --jws-pas-petit: 10px;
    --jws-pas: 16px;
    --jws-pas-grand: 32px;

    /* Hauteur de l'en-tête collant, tenue à jour par assets/chrome.js du thème.
       Pour tout ce qui se colle dessous (position: sticky, scroll-margin-top) :
       jamais une hauteur en dur. Sans JavaScript, 141 px. */
    --jws-entete: var(--jw-hdr-h, 141px);
}


/* -- 2. Texte réservé aux lecteurs d'écran --------------------------------------------------- */

.jws-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* -- 3. Bouton --------------------------------------------------------------------------------
   Même gabarit que .is-btn-jelly (style.css) : pilule 20 px, fond orange, texte indigo, .8em,
   marge 7px 0. Sans le disque qui s'étale au survol : le survol inverse simplement le fond.
   .is-btn-jelly n'est pas redéfinie ; une brique qui veut l'effet d'origine l'utilise telle quelle.
   .jws-btn--contour est la variante .is-btn : fond blanc, bordure orange. */

.jws-btn {
    display: inline-block;
    margin: 7px 0;
    padding: .5em 1em;
    border: 1px solid var(--jws-orange);
    border-radius: var(--jws-rayon-pilule);
    background-color: var(--jws-orange);
    color: var(--jws-sur-orange);
    font-family: inherit;
    font-size: .8em;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.jws-btn:hover,
.jws-btn:focus-visible {
    background-color: var(--jws-fond);
    color: var(--jws-sur-orange);     /* le thème pose a:hover en orange : on garde l'indigo */
    text-decoration: none;
}

.jws-btn:focus-visible {
    outline: 3px solid var(--jws-indigo);
    outline-offset: 2px;
}

.jws-btn--contour {
    background-color: var(--jws-fond);
}

.jws-btn--contour:hover,
.jws-btn--contour:focus-visible {
    background-color: var(--jws-orange);
}

/* Sur fond indigo ou sombre, l'anneau de focus passe au blanc */
.jws-sur-sombre .jws-btn:focus-visible {
    outline-color: var(--jws-sur-indigo);
}


/* -- 4. Tesselle ------------------------------------------------------------------------------
   Le losange orange déjà servi par le thème : en-têtes de mois de l'agenda d'accueil
   (assets/agenda-home.css), puces et coche de la newsletter (assets/nl-form.css), points du
   carrousel. Un carré tourné de 45°, par la propriété rotate (pas transform).
   Décoratif : <span class="jws-tesselle" aria-hidden="true"></span>. */

.jws-tesselle {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: 0 .6em 0 2px;
    vertical-align: .1em;
    rotate: 45deg;
    background-color: var(--jws-orange);
}

.jws-tesselle--indigo {
    background-color: var(--jws-indigo);
}

.jws-tesselle--vide {
    border: 2px solid var(--jws-orange);
    background-color: transparent;
}


/* -- 6. Le titre de section ---------------------------------------------------------------------
   Le SEUL titre de section du site : le cartouche indigo à cheval sur le filet pointillé orange
   (design.md § Hiérarchie ; .section-row h3 du thème). Rendu par jws_titre_section() du socle,
   jamais écrit à la main dans une brique.

   Le dessin est celui de .section-row h3, à la lettre, porté sur h1, h2 ou h3. Sous 576 px le
   cartouche est ancré par le BAS sur le filet (même position au pixel pour un titre d'une ligne :
   19,8 px sous le filet) : un titre long passe à la ligne et grandit vers le haut au lieu de
   sortir de l'écran. Règles reprises de titres-seo.css (06/10/2026, 78 mesures).

   Mesures du site (outils/mesurer_cartouches.sh) : filet à 23 px du haut et 19,8 px du bas du
   cartouche ; 29,2 px d'air dessous (donnés par .section-row : ne rien ajouter) ; 41 px d'air
   dessus en cours de page, 31 px sous l'en-tête. */

.jws-titre-section .jws-titre-section__titre {
    position: absolute;
    top: auto;
    bottom: 100%;
    display: inline-block;
    box-sizing: border-box;
    max-width: calc(100% - 20px);
    margin: 0 0 -19.8px;
    padding: 10px 15px;
    background: var(--jws-indigo, #312783);
    color: var(--jws-sur-indigo, #fff);
    font-family: 'Poppins', serif;
    font-size: 22px;
    font-weight: 800;              /* pas de line-height ici : il s'hérite de .section-row (22,8 px), sinon le cartouche fait 51,3 px au lieu de 42,8 */
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

@media (min-width: 576px) {
    .jws-titre-section .jws-titre-section__titre {
        top: -45px;
        bottom: auto;
        max-width: none;
        margin: 22px 0;
        text-align: inherit;
        overflow-wrap: normal;
    }
}

/* L'air au-dessus : 41 px en cours de page, 31 px en tête. Le cartouche dépasse de 23 px au-dessus
   du filet, et le filet est le bord haut de .section-row-content. */
.jws-titre-section--milieu {
    margin-top: 64px;
}

.jws-titre-section--tete {
    margin-top: 54px;
}


/* -- 5. Mouvement -----------------------------------------------------------------------------
   Filet commun : tout élément dont une classe contient « jws- » perd ses transitions et ses
   animations quand le visiteur a demandé moins de mouvement. Une brique qui anime en
   JavaScript doit lire la même préférence de son côté (matchMedia). */

@media (prefers-reduced-motion: reduce) {
    [class*="jws-"],
    [class*="jws-"]::before,
    [class*="jws-"]::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* -- 7. Clavier (11/10/2026) -------------------------------------------------------------------
   Recette au clavier du 11/10 : ces éléments prenaient le focus sans rien montrer. Seule feuille
   servie sur toutes les pages, d'où leur place ici. :focus-visible seulement : rien ne change à la
   souris ni au doigt. */

/* Boutons d'origine du thème (« Toutes les dates », « Plus de news »…) : le repère de .jws-btn. */
.is-btn-jelly:focus-visible {
    outline: 3px solid var(--jws-indigo);
    outline-offset: 2px;
}

/* Carrousel de l'accueil : la diapo et son bloc de texte (rôle bouton), puis leurs liens. Sur une
   photo, un anneau blanc doublé d'un liseré sombre se lit sur le clair comme sur le foncé. La diapo
   occupe tout le bandeau : son anneau est rentré. Classe intercalée, comme pour tout CSS du carrousel. */
div#n2-ss-4 .n2-ss-slide.n2-ow:focus-visible,
div#n2-ss-4 .n2-ss-slide .n2-ss-layer:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
    box-shadow: inset 0 0 0 3px #121212;
}

/* smartslider.min.css pose « outline: 0 !important » sur ses liens, focus compris : seul cas de la feuille où
   un !important répond à un autre. Anneau blanc, doublé d'un liseré sombre pour les photos claires. */
div#n2-ss-4 .n2-ss-slide a.n2-ow:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #121212;
}

/* Les losanges des cartes ont déjà leur repère : carte-osm.css le pose sur .co-pt, l'enfant du marqueur. */

/* Lien d'évitement (brique correctifs) : hors écran, il descend en haut à gauche quand il prend le focus. */
.jws-evitement {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    padding: 10px 16px;
    border-radius: var(--jws-rayon, 3px);
    background: var(--jws-indigo);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
}

.jws-evitement:focus {
    color: #fff;
    text-decoration: none;
    outline: 3px solid var(--jws-orange);
    outline-offset: 2px;
    transform: none;
}