@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------
   ateliers.css — la page « Ateliers et actions culturelles » (/ateliers/) et le lien qui y mène
   depuis les fiches artiste. Brique « ateliers », JulienWeb, 03/10/2026.

   Servie sur la page et sur les fiches qui portent le lien, après style.css et commun.css du
   socle (variables --jws-*, .jws-btn, .jws-tesselle). Chaque variable porte sa valeur de repli.
   Écrite pour 320 px de large, puis élargie par min-width.

   Motifs repris du thème, rien d'inventé :
   - le titre est le cartouche indigo à cheval sur le filet (.section-row h3, comme /videos/) ;
   - le texte d'Ourida garde l'habit de l'encart « Pédagogie » des fiches (.artist-pedagogie) :
     filet orange à gauche, texte indigo, .9em ;
   - pas d'orange en texte sur fond clair, pas de gras ajouté, losange (.jws-tesselle).

   1. Titre      2. Un artiste      3. Lien posé sur les fiches
   --------------------------------------------------------------------------------------------- */

/* 22 px en haut, pas 1.5em : le cartouche à 31 px de l'en-tête, comme sur les autres pages
   (c'était 33 px, mesuré le 06/10). Mêmes valeurs que /videos/. */
.jws-ateliers {
    padding: 22px 0 3em;
}


/* -- 1. Titre ---------------------------------------------------------------------------------- */

/* 29,2 px sous le cartouche, la mesure du site (c'était 1.5em, soit 24 px). */
.jws-ateliers__bandeau {
    margin: 2em 0 0;
    padding: 0 15px 29.2px;
    border-top: 1px dashed var(--jws-orange, #f39200);
}

/* Mêmes mesures que le cartouche de /videos/ (page-videos.css). Le titre est long : sous 480 px
   il passe sur deux lignes, centré, et le cartouche grandit vers le bas. */
.jws-ateliers__h1 {
    display: table;
    margin: -24px auto 0;
    padding: 10px 15px;
    background: var(--jws-indigo, #312783);
    color: #fff;
    font-size: 18px;
    line-height: 22.8px;
    text-align: center;
    text-transform: uppercase;
}

@media (min-width: 480px) {
    .jws-ateliers__h1 {
        font-size: 22px;
    }
}


/* -- 2. Un artiste ----------------------------------------------------------------------------- */

.jws-ateliers__artiste {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5em 0 2em;
    border-bottom: 1px dashed var(--jws-trait-agenda, #aab2cc);
    /* une ancre (#atelier-…) ne passe pas sous l'en-tête collant */
    scroll-margin-top: calc(var(--jws-entete, 141px) + 16px);
}

.jws-ateliers__artiste:last-child {
    border-bottom: 0;
}

.jws-ateliers__nom {
    margin: 0 0 .4em;
    color: var(--jws-indigo, #312783);
    font-size: 20px;
    line-height: 1.3;
    text-transform: uppercase;
}

.jws-ateliers__fiche {
    display: inline-flex;
    align-items: center;
    min-height: 44px;                 /* cible tactile */
    color: inherit;
    text-decoration: none;
}

/* Le thème pose a:hover en orange (2,35:1 sur blanc) : on garde l'indigo, le survol souligne. */
.jws-ateliers__fiche:hover,
.jws-ateliers__fiche:focus-visible {
    color: var(--jws-indigo, #312783);
    text-decoration: underline;
}

/* Les liens du texte saisi : même règle, sinon le survol passe à l'orange du thème. */
.jws-ateliers__texte a:hover,
.jws-ateliers__texte a:focus-visible {
    color: var(--jws-indigo-fonce, #241d63);
    text-decoration: underline;
}

.jws-ateliers__fiche:focus-visible,
.jws-ateliers-lien__a:focus-visible {
    outline: 3px solid var(--jws-indigo, #312783);
    outline-offset: 2px;
}

.jws-ateliers__texte {
    padding: .2em 0 .2em 1.4em;
    border-left: 3px solid var(--jws-orange, #f39200);
    color: var(--jws-indigo, #312783);
    font-size: .9em;
    overflow-wrap: break-word;
}

/* Les paragraphes gardent la marge nulle du thème (style.css : div p), comme dans l'encart des
   fiches : Ourida a réglé ses espacements en regardant la fiche, la page les rend à l'identique. */
.jws-ateliers__texte > :first-child {
    margin-top: 0;
}

.jws-ateliers__texte > :last-child {
    margin-bottom: 0;
}

.jws-ateliers__texte img {
    max-width: 100%;
    height: auto;
}

.jws-ateliers__texte iframe,
.jws-ateliers__texte video,
.jws-ateliers__texte table {
    max-width: 100%;
}

.jws-ateliers__booking {
    margin: 1.2em 0 0;
}

.jws-ateliers__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 44px;                 /* cible tactile */
    margin: 0;
    padding: .5em 1.4em;
    font-size: .9em;
    line-height: 1.25;
    text-align: center;
}

@media (min-width: 768px) {
    .jws-ateliers__artiste {
        padding: 2em 0 2.5em;
    }

    .jws-ateliers__nom {
        font-size: 24px;
    }

    .jws-ateliers__texte {
        padding-left: 2em;
    }
}


/* -- 3. Lien posé sur les fiches artiste --------------------------------------------------------
   L'accroche jws_artiste_apres_bio est AVANT l'encart « Pédagogie » : le lien se lit juste
   au-dessus de lui, à droite, et l'encart remonte contre lui (sa marge d'origine est de 2em). */

.jws-ateliers-lien {
    margin: 2em 0 0;
    font-size: .9em;
    text-align: right;
}

.jws-ateliers-lien + .artist-pedagogie {
    margin-top: .4em;
}

.jws-ateliers-lien__a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;                 /* cible tactile */
    color: var(--jws-indigo, #312783);
    text-align: left;
    text-decoration: underline;
}

.jws-ateliers-lien__a:hover,
.jws-ateliers-lien__a:focus-visible {
    color: var(--jws-indigo-fonce, #241d63);
    text-decoration: none;
}