/* ARUL - site 10186 - CSS personnalise (onglet Avancee)
   Version : 1.9
   Historique :
   1.0  CSS en place sur le site au 24 septembre 2026, avant modification
   1.1  24 septembre 2026 : nouvelles avec image (.itemImage) mises dans la
        meme grille que les evenements, image a largeur fixe (colonne 33 %,
        ratio 2/1)
   1.2  24 septembre 2026 : bandeaux de section en accordeon (classes posees
        par site-10186.js v1.0) ; boite grise des evenements ramenee a la
        largeur des bandeaux, contenu des trois sections decale de 28px pour
        s'aligner sur le texte des bandeaux
   1.3  24 septembre 2026 : bandeaux rapproches (paragraphe vide et marge du
        tableau retires, par site-10186.js v1.1), espace avant le pied de
        page, bandeau gris soude a sa boite a l'ouverture ; police Source
        Sans 3 (successeur de Source Sans Pro) partout, textes en noir,
        tailles agrandies pour la lisibilite
   1.3+ modifie directement sur le site le 24 septembre 2026 (grille des
        cartes reservee aux ecrans de 768px et plus, marge sous la vignette
        vide sur telephone) : repris ici
   1.4  24 septembre 2026 : menu actif et survole remis en blanc sur noir,
        bouton Details (btn-default) en vert sur blanc, liens en vert partout
        (le bleu #569AB8 venait de l'onglet Basique), telephone et tablette ;
        la regle .itemImage ~ * remise dans son @media
   1.5  24 septembre 2026 : proportions des cartes (vignette a 40 % en 4/3,
        titres de carte a 22px sur ordinateur), courte description des
        evenements coupee a 4 lignes (par site-10186.js v1.2), contact plus
        discret
   1.6  24 septembre 2026 : vignettes remises comme avant la v1.5 (33 %,
        2/1) ; plus de points de suspension, sauf la courte description d'un
        evenement vraiment longue (au-dela de 8 lignes) ; cartes d'evenements
        resserrees par les tailles (dates, contact, description, marges) ;
        retrait de 28px sous les bandeaux applique a tout le site (modules des
        pages Activites a venir et Nouvelles, articles), titre d'article en
        bandeau blanc sur vert comme les autres
   1.7  24 septembre 2026 : photo de groupe du haut de page recadree sur
        tablette et telephone (hauteur fixe, cotes coupes)
   1.8  24 septembre 2026 : bloc Connexion centre (page se-connecter-intranet
        et partout ou le module de connexion est pose)
   1.9  24 septembre 2026 : page Nouvelles (module Espace nouvelles) mise en
        cartes comme les nouvelles de l'accueil ; bouton Lire la suite pose
        par site-10186.js v1.3 */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

body.new {
font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
}

body.new p {
font-size: 18px;
font-weight: 400;
}

.line-cards .item:has(> h3:first-child)::before {
content:'';
aspect-ratio: 2/1;
display:block;
background: #eaf5ec; /*var(--secondary);*/
}
.line-cards .item:has(> a:first-child > img) >a>img{
width:100%;
}

@media (max-width: 767px) {
    .line-cards .item:has(> h3:first-child)::before {
        margin-bottom:30px;
    }
}

@media (min-width: 768px) {
.line-cards .item:has(> a:first-child > img),
.line-cards .item:has(> h3:first-child) {
display: grid;
grid-template-columns: 33% 66%;
column-gap:15px;
}

.line-cards .item:has(> a:first-child > img)  > :first-child ,
.line-cards .item:has(> h3:first-child)::before {
grid-column: 1;
grid-row: 1 / span 3; /* spans down through however many rows the rest create */
}
.line-cards .item:has(> a:first-child > img)  > :first-child ~ *,
.line-cards .item:has(> h3:first-child)  > :first-child ~ *{
grid-column: 2;
}

/* v1.1 : une nouvelle avec image porte son image dans div.itemImage,
   pas dans un a direct ; sans ces regles elle sortait de la grille */
.line-cards .item:has(> .itemImage:first-child) {
display: grid;
grid-template-columns: 33% 66%;
column-gap:15px;
}
.line-cards .item:has(> .itemImage:first-child) > .itemImage {
grid-column: 1;
grid-row: 1 / span 3;
margin:0;
}
.line-cards .item:has(> .itemImage:first-child) > .itemImage ~ * {
grid-column: 2;
}
}
.line-cards .item > .itemImage a {
display:block;
}
.line-cards .item > .itemImage img {
width:100%;
display:block;
}
.line-cards .item .actions{
margin:0;
}
.line-cards .item p{
margin-left:0 !important;
text-align: left !important;
font-size:18px;
font-weight:400;
}
.line-cards .item {
margin-bottom:30px;
}

.line-cards .item .intro{
max-height: 6em;
}

.line-cards .item hr,
.line-cards .item p:has(>img){
display:none;
}

.line-cards h2 {
background:none;
color:#000;
font-weight:bold;
}
.line-cards h3 {
text-transform:none;
font-size:24px;
font-weight:600;
}
.line-cards .item img {
aspect-ratio: 2/1;
object-fit: cover;

}
.line-cards.line-cards-events {
margin:50px 0;
}
.line-cards.line-cards-events .viewAll {
font-weight:bold;
color:var(--secondary);
display:block;
text-align: center;
}
.line-cards.line-cards-events h2::after {
background:#666;
}
.line-cards.line-cards-events .zone-event_flash {
position: relative;
}
.line-cards.line-cards-events .zone-event_flash>.content {
position: relative;
z-index: 2;
}
.line-cards.line-cards-events .zone-event_flash::before {
content:'';
position: absolute;
top:-15px;
bottom:-15px;
left:0;
right:0;
display:block;
background:#E6E6E6;
z-index: 1;
}
@media (min-width: 768px) {
.line-cards.line-cards-events .zone-event_flash::before {
left:-15px;
right:-15px;
}
}

.line-cards h2::after {
content:'';
background:var(--secondary);
width:40px;
height:4px;
display:block;
margin: 15px 0;
}

.line-cards .intro {
overflow: hidden;
text-overflow: ellipsis;

}

.line-menu-alt #mainMenu >ul>li>a{
padding-left:10px;
padding-right:10px;
color:#000;
}
.line-menu-alt #mainMenu >ul>li:hover >a.child-link,
.line-menu-alt #mainMenu >ul>li>a.child-link:hover{
color:#fff !important;
}
@media (max-width: 991px) {
.line-menu-alt #mainMenu .caret{
position: absolute;
right:0 !important;
}
.line-menu-alt .navbar-header {
position: absolute;
right: 0;
top: -80px;
}
.line-menu-alt .zone-header,
.line-menu-alt .zone-menu {
width:100%;
}
.line-menu-alt .mod-header-logo {
max-width:150px;
}
.line-menu-alt #mainMenu >ul{
margin-left:0;
margin-right:0;
}
}
@media (min-width: 992px) {
.line-menu-alt #mainMenu >ul{
height:140px;
width:100%;
display:flex;
align-items: center;
justify-content: flex-end;
}
.line-menu-alt #mainMenu >ul::before, .line-menu-alt #mainMenu >ul::after{
display:none;
}
.line-menu-alt #mainMenu >ul>li{
display:flex;
align-items: center;
}
.line-menu-alt #mainMenu >ul>li:first-child .child-link{
min-width:100px;
}
.line-menu-alt #mainMenu >ul>li:last-child .dropdown-menu {
left:auto;
right:0;
}
}
div.line.site_line__item.line-footer {
color: #ffffff;
}

div.line.site_line__item.line-footer a{
color: #ffffff;
}
div.line.site_line__item.line-footer {
background-color: #93c491;
}

.line-bg {
background-color: #b9cbb3;
}

.line-ef {
background-color: #93c491;
}
.mod-header .header-ext{
font-size: 1.2rem;
}
.header-ext-custom a {
font-style: normal;
font-weight: 400;
font-size: 1.2rem;
letter-spacing: .03em;
div.line.site_line__item.line-footer {
color: #ffffff;
}

div.line.site_line__item.line-footer a{
color: #ffffff;
}
div.line.site_line__item.line-footer {
background-color: #93c491;
}

.line-bg {
background-color: #b9cbb3;
}

.line-ef {
background-color: #93c491;
}
.mod-header .header-ext{
font-size: 1.2rem;
}
.header-ext-custom a {
font-style: normal;
font-weight: 400;
font-size: 1.2rem;
letter-spacing: .03em;
text-transform: uppercase;
color: #4f4f4f;
}

.navbar-default .navbar-nav .dropdown-menu li a, .navbar-default .navbar-nav li a{
font-size:1.5rem;
}

.breadcrumb{
font-size:16px;
}
.breadcrumb > .active{
color:#ffffff;
}

.line-main, .line-secondary{
padding:3rem 0 ;
}
color: #4f4f4f;
}

.navbar-default .navbar-nav .dropdown-menu li a, .navbar-default .navbar-nav li a{
font-size:1.5rem;
}

.breadcrumb{
font-size:16px;
}
.breadcrumb > .active{
color:#ffffff;
}

.line-main, .line-secondary{
padding:3rem 0 ;
}

/* ===== v1.2 : alignement des sections sur les bandeaux =====
   Les bandeaux (tableau a une cellule, padding 20px 28px) ont la largeur du
   contenu de la zone. La boite grise des evenements debordait de 30px de
   chaque cote (::before a -15px, pose sur la zone et non sur son contenu).
   On la ramene au contenu de la zone, et on decale le contenu des trois
   sections de 28px, la marge du texte des bandeaux. */
.line-cards.line-cards-events .zone-event_flash::before {
left:15px;
right:15px;
top:0;
bottom:0;
}
@media (min-width: 768px) {
.line-cards.line-cards-events .zone-event_flash::before {
left:15px;
right:15px;
}
}
/* v1.6 : le retrait est porte par la zone (15px de colonne + 28px), pour
   TOUS les modules sous un bandeau, plus seulement nouvelles et evenements
   en vedette (voir la section v1.6 en fin de fichier) */
.line-cards .zone-event_flash > .content {
padding-top:28px;
padding-bottom:28px;
}

/* ===== v1.2 : accordeon des bandeaux (classes posees par le JS) ===== */
.arul-acc-entete td[role="button"] {
cursor:pointer;
position:relative;
padding-right:80px !important;
user-select:none;
}
.arul-acc-entete td[role="button"]::after {
content:'';
position:absolute;
right:32px;
top:50%;
width:14px;
height:14px;
border-right:3px solid currentColor;
border-bottom:3px solid currentColor;
transform:translateY(-75%) rotate(45deg);
transition:transform .3s ease;
}
.arul-acc-entete.is-open td[role="button"]::after {
transform:translateY(-25%) rotate(-135deg);
}
.arul-acc-entete td[role="button"]:focus-visible {
outline:3px solid #2F9F49;
outline-offset:3px;
}
.arul-acc-panneau {
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .4s ease, margin .4s ease;
}
.arul-acc-panneau.is-open {
grid-template-rows:1fr;
}
.arul-acc-panneau > .container {
overflow:hidden;
min-height:0;
}
/* la ligne des evenements a une marge de 50px : on retire celle du haut sous
   son bandeau, pour le meme ecart de 25px que les autres sections */
.line-cards.line-cards-events.arul-acc-panneau {
margin-top:0;
}
.line-cards.line-cards-events.arul-acc-panneau:not(.is-open) {
margin-top:0;
margin-bottom:0;
}
@media (prefers-reduced-motion: reduce) {
.arul-acc-panneau,
.arul-acc-entete td[role="button"]::after {
transition:none;
}
}

/* ===== v1.3 : espacement des bandeaux (classes posees par le JS v1.1) =====
   Chaque bandeau portait un paragraphe vide au-dessus et 25px de marge sous le
   tableau (style en ligne, d'ou le !important). On les retire et on regle
   l'ecart ici, en un seul endroit. */
.arul-acc-entete .content > p.arul-vide {
display:none;
}
.arul-acc-entete table {
margin-bottom:0 !important;
}
.arul-acc-entete {
padding-top:14px;
}
.arul-acc-entete.arul-acc-premier {
padding-top:40px;
}
/* espace entre le bandeau et le contenu blanc, a l'interieur du panneau */
.arul-acc-panneau .zone-news_flash > .content {
padding-top:28px;
}
/* le bandeau gris se soude a sa boite grise : aucun ecart */
.line-cards.line-cards-events.arul-acc-panneau,
.line-cards.line-cards-events.arul-acc-panneau:not(.is-open) {
margin-top:0;
margin-bottom:0;
}
.line-cards.line-cards-events.arul-acc-panneau.is-open {
margin-bottom:16px;
}
/* la derniere section respire avant le pied de page, ouverte ou fermee */
.arul-acc-panneau.arul-acc-dernier {
padding-bottom:64px;
}

/* ===== v1.3 : typographie, Source Sans 3 partout, en noir, lisible =====
   Public age : corps a 20px, titres des cartes a 26px, informations a 18px.
   Restent blancs les textes poses sur un fond de couleur : boutons, sous-menus,
   bandeaux (couleur en ligne dans le bloc HTML). */
body, body.new,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body li, body a, body .btn, body #mainMenu a,
body input, body select, body textarea, body button {
font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
}
body, body.new {
color:#000;
font-size:20px;
line-height:1.5;
}
body :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, span, strong, em, small, blockquote, .itemInfos) {
color:#000;
}
/* v1.4 : les liens sont verts (voir plus bas) ; restent noirs le menu, les
   titres et le pied de page */
body a:not(.btn) {
color:#000;
}
body .content :is(p, li) a:not(.btn) {
text-decoration:underline;
}
body.new p, body p,
.line-cards .item p {
font-size:20px;
line-height:1.55;
font-weight:400;
}
body h1 { font-size:44px; line-height:1.2; }
body h2 { font-size:36px; line-height:1.25; }
body h4 { font-size:24px; }
.line-cards h3,
.line-cards h3 a {
font-size:26px;
line-height:1.25;
font-weight:700;
color:#000;
}
.line-cards .item .intro {
font-size:20px;
line-height:1.55;
max-height:calc(1.55em * 4);
}
.line-cards .itemInfos,
.line-cards .itemInfos span,
.line-cards .e-date {
font-size:18px;
line-height:1.4;
}
body .btn,
.line-cards .item .btn {
font-size:17px;
font-weight:700;
letter-spacing:.03em;
padding:10px 20px;
}
body .btn-primary, body .btn-primary *,
body #mainMenu .dropdown-menu a {
color:#fff;
}
body #mainMenu > ul > li > a,
.navbar-default .navbar-nav li a {
font-size:17px;
}
.navbar-default .navbar-nav .dropdown-menu li a {
font-size:18px;
}
.arul-acc-entete td[role="button"] {
font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
font-size:34px !important;
}
/* le pied de page porte ses tailles en style en ligne (16px, 14px) : !important */
div.line.site_line__item.line-footer p {
font-size:18px !important;
line-height:1.5;
}
div.line.site_line__item.line-footer p[style*="bold"] {
font-size:22px !important;
}
div.line.site_line__item.line-footer p[style*="italic"] {
font-size:17px !important;
}

/* ===== v1.4 : couleurs des liens, du menu et des boutons =====
   Vert du site #2F9F49, fonce en #1E7A35 pour le texte des liens : sur fond
   blanc, #2F9F49 n'a qu'un contraste de 3,3 pour 1, trop faible pour un
   public age ; #1E7A35 atteint 5,6 pour 1. Les boutons gardent #2F9F49. */
body a:not(.btn),
body a:not(.btn):visited,
body a:not(.btn):hover,
body a:not(.btn):focus {
color:#1E7A35;
}
body a:not(.btn):hover,
body a:not(.btn):focus {
text-decoration:underline;
}
body :is(h1, h2, h3, h4, h5, h6) a:not(.btn),
body :is(h1, h2, h3, h4, h5, h6) a:not(.btn):hover,
body .line-footer a:not(.btn),
body #mainMenu a {
color:#000;
}
/* menu : l'element actif ou survole a un fond noir (gabarit) : texte blanc */
body #mainMenu > ul > li.active > a,
body #mainMenu > ul > li:hover > a,
body #mainMenu > ul > li.open > a,
body #mainMenu > ul > li > a:focus,
body #mainMenu .dropdown-menu a {
color:#fff;
}
/* menu : la fleche du sous-menu (dropdown-toggle) a une marge de -15px et
   recouvrait la fin du libelle a 18px ; sa pointe (span.caret) suit la couleur
   du texte au lieu du noir force plus haut */
body #mainMenu > ul > li > a.child-link {
padding-left:8px;
padding-right:8px;
}
body #mainMenu > ul > li > a.child-link + .dropdown-toggle {
margin-left:-6px;
padding-left:6px;
padding-right:8px;
width:auto;
}
body #mainMenu span.caret {
color:inherit;
}
/* bouton secondaire (Details) : vert sur blanc, plein au survol */
body .btn-default {
color:#1E7A35;
background:#fff;
border:2px solid #2F9F49;
}
body .btn-default:hover,
body .btn-default:focus {
color:#fff;
background:#2F9F49;
border-color:#2F9F49;
}

/* ===== v1.4 : tablette (768 a 991px) et telephone (767px et moins) ===== */
@media (max-width: 991px) {
/* une carte par ligne : a deux colonnes, la vignette et le texte etouffent */
.line-cards .col-sm-12 {
width:100%;
float:none;
}
}
@media (max-width: 767px) {
.arul-acc-entete.arul-acc-premier {
padding-top:24px;
}
.arul-acc-entete {
padding-top:10px;
}
.arul-acc-entete td[role="button"] {
font-size:26px !important;
padding:16px 56px 16px 18px !important;
}
.arul-acc-entete td[role="button"]::after {
right:22px;
width:12px;
height:12px;
}
.line-cards .zone-event_flash > .content {
padding-top:20px;
padding-bottom:20px;
}
.arul-acc-panneau .zone-news_flash > .content {
padding-top:20px;
}
.arul-acc-panneau.arul-acc-dernier {
padding-bottom:40px;
}
body h1 { font-size:32px; }
body h2 { font-size:28px; }
.line-cards h3,
.line-cards h3 a {
font-size:22px;
}
body p, body.new p,
.line-cards .item p,
.line-cards .item .intro {
font-size:19px;
}
/* vignettes pleine largeur, meme ecart que la vignette vide */
.line-cards .item > .itemImage,
.line-cards .item:has(> a:first-child > img) > a:first-child {
display:block;
margin-bottom:30px;
}
/* cible tactile d'au moins 44px */
.line-cards .btn,
body .btn {
min-height:44px;
display:inline-flex;
align-items:center;
}
}

/* ===== v1.5 : cartes d'evenements et de nouvelles =====
   Titre de carte a 22px sur ordinateur ; la vignette couvre toutes les lignes
   du texte. (La vignette 40 % en 4/3 de la v1.5 a ete retiree en v1.6.) */
@media (min-width: 768px) {
.line-cards .item:has(> a:first-child > img),
.line-cards .item:has(> h3:first-child),
.line-cards .item:has(> .itemImage:first-child) {
align-content:start;
align-items:start;
}
/* la vignette couvre toutes les lignes du texte : sinon, plus haute que
   trois lignes, elle etire l'ecart entre titre, date et description */
.line-cards .item:has(> a:first-child > img) > :first-child,
.line-cards .item:has(> h3:first-child)::before,
.line-cards .item:has(> .itemImage:first-child) > .itemImage {
grid-row: 1 / span 20;
}
.line-cards h3,
.line-cards h3 a {
font-size:22px;
}
}
/* v1.6 : aucune coupe des intros de nouvelles ; la courte description d'un
   evenement n'est coupee (points de suspension, par le JS) qu'au-dela de
   8 lignes, le texte entier restant sur la page Details */
.line-cards .item .intro {
max-height:none;
}
.line-cards .item .mod-eventflash__item-intro,
.line-cards .events-mosaic__short-description {
max-height:calc(1.5em * 8);
overflow:hidden;
margin-bottom:12px;
}
.line-cards .events-mosaic__short-description p {
margin:0;
}
/* bloc contact (comite, telephone, courriel) : plus discret que la description */
.line-cards .item p.contact,
.line-cards .item p.contact a {
font-size:17px;
line-height:1.4;
color:#3f403f;
}

/* ===== v1.6 : le meme retrait sous tous les bandeaux, sur tout le site =====
   Regle : le texte d'un bandeau et le contenu dessous commencent a 28px du
   bord du bandeau. Bandeaux en bloc HTML (accueil, Activites a venir,
   Nouvelles) : la zone du module qui suit prend 15 + 28px de marge interieure.
   Articles : le titre h2 est le bandeau (fond de l'onglet Basique). */
.line-cards .row-fluid > [class*="zone-"]:not(.zone-html) {
padding-left:43px;
padding-right:43px;
}
.zone-article > h2 {
padding:20px 28px;
color:#fff;
font-size:32px;
font-weight:700;
line-height:1.2;
margin-bottom:25px;
}
.zone-article > :not(h2) {
padding-left:28px;
padding-right:28px;
}

/* ===== v1.6 : cartes d'evenements resserrees par les tailles =====
   Le texte reste lisible (18px minimum pour la description), mais les
   informations secondaires prennent moins de place. */
.line-cards .mod-eventflash__item h3,
.line-cards .zone-event .item h3 {
margin-bottom:6px;
}
.line-cards .mod-eventflash__item .itemInfos,
.line-cards .zone-event .item .e-date {
margin:0 0 8px;
}
.line-cards .itemInfos,
.line-cards .itemInfos span,
.line-cards .e-date {
font-size:16px;
line-height:1.35;
}
.line-cards .item p.contact,
.line-cards .item p.contact a {
font-size:16px;
line-height:1.35;
margin-bottom:8px;
}
.line-cards .item .mod-eventflash__item-intro,
.line-cards .item .mod-eventflash__item-intro p,
.line-cards .events-mosaic__short-description,
.line-cards .events-mosaic__short-description p {
font-size:18px;
line-height:1.5;
}

/* v1.6, telephone : retrait sous les bandeaux ramene a 18px, bandeaux en
   bloc HTML compris (leur marge de 28px est en style en ligne) */
@media (max-width: 767px) {
.zone-html td[style*="padding:20px 28px"] {
padding:16px 18px !important;
font-size:26px !important;
}
.arul-acc-entete td[role="button"][style*="padding:20px 28px"] {
padding-right:56px !important;
}
.line-cards .row-fluid > [class*="zone-"]:not(.zone-html) {
padding-left:33px;
padding-right:33px;
}
.zone-article > h2 {
padding:16px 18px;
font-size:26px;
}
.zone-article > :not(h2) {
padding-left:18px;
padding-right:18px;
}
}

/* ===== v1.7 : photo de groupe du haut de page, tablette et telephone =====
   L'image fait 3112 x 332px (9,4 pour 1) : a 390px de large elle ne faisait
   plus que 38px de haut. On lui donne une hauteur fixe et on coupe les cotes
   (object-fit: cover), centre du groupe garde. La source a 332px de haut :
   jusqu'a 220px, l'image reste nette. Visee par son nom de fichier, pour
   valoir sur toutes les pages qui la portent et nulle part ailleurs.
   !important : une feuille de la Plateforme force la hauteur de toutes les
   images du site (mesure le 24 septembre 2026). */
@media (max-width: 991px) {
.zone-image .content img[src*="bandeau-serres"] {
display:block;
width:100%;
max-width:100%;
height:220px !important;
object-fit:cover;
object-position:50% 40%;
}
}
@media (max-width: 767px) {
.zone-image .content img[src*="bandeau-serres"] {
height:170px !important;
}
}
@media (max-width: 480px) {
.zone-image .content img[src*="bandeau-serres"] {
height:150px !important;
}
}

/* ===== v1.8 : bloc Connexion centre =====
   Sur se-connecter-intranet, la ligne du module est en pleine largeur
   (container-fluid, reglage de la ligne) : le bloc partait du bord gauche de
   la fenetre. On le centre a 480px, champs sur toute sa largeur (ils etaient
   dans une demi-colonne col-md-12). */
.zone-login .login-wrapper__login {
max-width:480px;
margin-left:auto;
margin-right:auto;
}
.zone-login .login-wrapper__login .form-group > [class*="col-"] {
width:100%;
float:none;
}
.zone-login .login-wrapper__login input:not([type=hidden]):not([type=submit]):not([type=checkbox]) {
width:100%;
max-width:none;
}

/* ===== v1.9 : page Nouvelles, memes cartes que l'accueil =====
   Le module Espace nouvelles (page /nouvelles) ne produit pas le balisage des
   Articles en vedette de l'accueil : colonne [data-article-id], puis
   a > img.news-thumbnail, h3.news-title, .news-intro, sans bouton. On lui
   donne la meme grille : vignette 33 % en 2/1 (ou la vignette vide verte),
   texte a droite. Le bouton En savoir plus est ajoute par le JS. */
.line-cards .news-mosaic [data-article-id] {
margin-bottom:30px;
}
.line-cards .news-mosaic [data-article-id]:has(> h3:first-child)::before {
content:'';
aspect-ratio: 2/1;
display:block;
background: #eaf5ec;
}
.line-cards .news-mosaic img.news-thumbnail {
display:block;
width:100%;
aspect-ratio: 2/1;
object-fit: cover;
}
.line-cards .news-mosaic [data-article-id] > a:first-child {
display:block;
}
.line-cards .news-mosaic .news-intro p {
margin-left:0 !important;
text-align:left !important;
}
.line-cards .news-mosaic .actions {
margin:0;
}
.line-cards .news-mosaic h3.news-title {
margin-bottom:10px;
}
/* un titre de carte deja visite restait vert (regle :visited des liens) */
body :is(h1, h2, h3, h4, h5, h6) a:not(.btn):visited {
color:#000;
}
@media (min-width: 768px) {
.line-cards .news-mosaic [data-article-id] {
display:grid;
grid-template-columns: 33% 66%;
column-gap:15px;
align-content:start;
align-items:start;
}
.line-cards .news-mosaic [data-article-id] > a:first-child,
.line-cards .news-mosaic [data-article-id]:has(> h3:first-child)::before {
grid-column: 1;
grid-row: 1 / span 20;
}
.line-cards .news-mosaic [data-article-id] > :not(a:first-child) {
grid-column: 2;
}
}
@media (max-width: 767px) {
.line-cards .news-mosaic [data-article-id]:has(> h3:first-child)::before,
.line-cards .news-mosaic [data-article-id] > a:first-child {
margin-bottom:30px;
}
}