@charset "UTF-8";
/* ==========================================================================
   Bien Commun pour Gentilly — habillage
   Charte : bleu #3155a6, cyan #00c0f3, rouge #cc2222, Arial gras, diagonales
   ========================================================================== */

:root{
	--bleu:#3155a6;
	--bleu-fonce:#223d78;
	--bleu-clair:#eef2fa;
	--cyan:#00c0f3;
	--rouge:#cc2222;
	--blanc:#fff;
	--encre:#16233d;
	--gris:#5b6478;
	--trait:#d9e0ee;

	--police:Arial,"Helvetica Neue",Helvetica,sans-serif;
	--largeur:1180px;
	--gouttiere:32px;
}

*,*::before,*::after{box-sizing:border-box}

body{
	margin:0;
	font-family:var(--police);
	font-size:17px;
	line-height:1.6;
	color:var(--encre);
	background:var(--blanc);
	-webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

h1,h2,h3,h4{font-weight:bold;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}

.conteneur{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}

.evite-nav{
	position:absolute;left:-9999px;
	background:var(--cyan);color:var(--bleu);font-weight:bold;
	padding:12px 20px;z-index:100;
}
.evite-nav:focus{left:12px;top:12px}

/* ---------- En-tête ---------------------------------------------------- */

.entete{position:relative;background:var(--bleu);color:var(--blanc);overflow:hidden}

.entete__interne{
	position:relative;z-index:2;
	display:flex;align-items:center;flex-wrap:wrap;gap:20px;
	padding-top:26px;padding-bottom:22px;
}

.logo{display:inline-block;text-decoration:none}
.logo:hover{text-decoration:none}

.logo__l1,.logo__l2{display:block;font-weight:bold;line-height:1;padding:9px 16px}
.logo__l1{background:var(--blanc);color:var(--bleu);font-size:28px}
.logo__l2{background:var(--rouge);color:var(--blanc);font-size:21px}

.entete__slogan{
	margin:0;font-weight:bold;font-size:14px;
	letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
}

/* Diagonale d'angle, motif signature de la charte */
.entete::after{
	content:"";position:absolute;top:-60%;right:-6%;
	width:16%;height:220%;background:var(--cyan);
	transform:rotate(18deg);opacity:.85;z-index:1;
}

.bande-diago{
	position:absolute;top:-60%;right:10%;
	width:4px;height:220%;background:var(--rouge);
	transform:rotate(18deg);z-index:1;
}

/* ---------- Navigation ------------------------------------------------- */

.nav{position:relative;z-index:2;background:var(--bleu-fonce)}

.nav__liste{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}

.nav__lien{
	display:block;padding:15px 20px;
	color:var(--blanc);font-weight:bold;font-size:15px;
	border-bottom:4px solid transparent;
	transition:border-color .15s ease,background .15s ease;
}
.nav__lien:hover{text-decoration:none;background:rgba(255,255,255,.08)}
.nav__lien:hover,.nav__lien.est-actif{border-bottom-color:var(--cyan)}

/* ---------- Accroche d'accueil ----------------------------------------- */

.accroche{background:var(--bleu-clair);padding:56px 0;border-bottom:1px solid var(--trait)}

.accroche__surtitre{
	margin:0 0 12px;font-weight:bold;font-size:14px;
	letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);
}
.accroche__titre{font-size:clamp(30px,4.6vw,52px);max-width:20ch;margin:0;color:var(--bleu)}

/* ---------- Bandeau de titre (rubrique, article) ----------------------- */

.bandeau-titre{background:var(--bleu);color:var(--blanc);padding:38px 0 42px}
.bandeau-titre__h1{font-size:clamp(26px,3.8vw,42px);max-width:24ch;margin:0}
.bandeau-titre__intro{margin-top:14px;max-width:60ch;font-size:18px}
.bandeau-titre__meta{margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.75)}

.fil-ariane{font-size:13px;margin-bottom:14px;color:rgba(255,255,255,.7)}
.fil-ariane a{color:var(--cyan)}

/* ---------- Grille principale ------------------------------------------ */

.grille-principale{
	display:grid;grid-template-columns:minmax(0,1fr) 300px;
	gap:52px;padding-top:48px;padding-bottom:64px;align-items:start;
}

.titre-section{
	font-size:15px;letter-spacing:.16em;text-transform:uppercase;
	color:var(--bleu);padding-bottom:10px;margin-bottom:26px;
	border-bottom:3px solid var(--cyan);
}

/* ---------- Cartes d'article ------------------------------------------- */

.liste-articles{display:grid;gap:26px}

.carte{
	display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;
	border:1px solid var(--trait);border-left:5px solid var(--cyan);
	background:var(--blanc);transition:box-shadow .18s ease,transform .18s ease;
}
.carte:hover{box-shadow:0 8px 26px rgba(22,35,61,.13);transform:translateY(-2px)}
.carte:only-child,.carte:not(:has(.carte__visuel)){grid-template-columns:1fr}

.carte__visuel{display:block;overflow:hidden;align-self:stretch}
.carte__visuel img{width:100%;height:100%;object-fit:cover}

.carte__corps{padding:22px 24px 24px}

.carte__rubrique{margin:0 0 8px;font-size:12px;font-weight:bold;letter-spacing:.14em;text-transform:uppercase}
.carte__rubrique a{color:var(--rouge)}

.carte__titre{font-size:22px;margin:0 0 6px}
.carte__titre a{color:var(--encre)}
.carte__titre a:hover{color:var(--bleu);text-decoration:none}

.carte__date{margin:0 0 10px;font-size:13px;color:var(--gris)}
.carte__chapo{margin:0;color:var(--gris);font-size:16px}

/* ---------- Corps d'article -------------------------------------------- */

.article{max-width:74ch}
.article__logo{margin-bottom:28px}

.article__chapo{
	font-size:20px;font-weight:bold;line-height:1.45;
	color:var(--bleu);border-left:5px solid var(--cyan);
	padding-left:20px;margin-bottom:30px;
}

.article__texte h2{font-size:27px;color:var(--bleu);margin-top:1.8em}
.article__texte h3{font-size:21px;margin-top:1.6em}
.article__texte p{margin:0 0 1.15em}
.article__texte ul,.article__texte ol{margin:0 0 1.15em;padding-left:1.4em}
.article__texte li{margin-bottom:.4em}
.article__texte blockquote{
	margin:1.6em 0;padding:16px 22px;
	background:var(--bleu-clair);border-left:5px solid var(--rouge);
	font-style:normal;
}
.article__texte img{margin:1.4em 0}
.article__texte table{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:15px}
.article__texte th,.article__texte td{border:1px solid var(--trait);padding:9px 12px;text-align:left}
.article__texte th{background:var(--bleu-clair);font-weight:bold}

.article__ps{margin-top:34px;padding-top:22px;border-top:1px solid var(--trait);font-size:16px;color:var(--gris)}

/* ---------- Documents joints ------------------------------------------- */

.documents{margin-top:36px;padding:22px 24px;background:var(--bleu-clair);border-left:5px solid var(--bleu)}
.documents h2{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);margin-bottom:14px}
.documents ul{list-style:none;margin:0;padding:0}
.documents li{padding:9px 0;border-bottom:1px solid var(--trait)}
.documents li:last-child{border-bottom:0}
.documents__meta{font-size:12px;color:var(--gris);margin-left:8px;text-transform:uppercase}

/* ---------- Mots-clés, voisins, pagination ----------------------------- */

.mots-cles{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px}
.mots-cles a{
	display:inline-block;padding:6px 13px;font-size:13px;font-weight:bold;
	background:var(--bleu-clair);color:var(--bleu);
}
.mots-cles a:hover{background:var(--cyan);color:var(--bleu-fonce);text-decoration:none}

.voisins{margin-top:48px;padding-top:26px;border-top:3px solid var(--cyan)}
.voisins ul{list-style:none;margin:0;padding:0}
.voisins li{padding:11px 0;border-bottom:1px solid var(--trait)}
.voisins__date{color:var(--gris);font-size:13px;margin-left:8px}

.liste-sous-rubriques{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:2px}
.liste-sous-rubriques li{background:var(--bleu-clair)}
.liste-sous-rubriques a{display:block;padding:13px 18px;font-weight:bold}
.liste-sous-rubriques a:hover{background:var(--cyan);color:var(--bleu-fonce);text-decoration:none}

.pagination{margin-top:32px;font-size:15px}
.pagination a,.pagination .on{display:inline-block;padding:7px 13px;margin-right:4px;font-weight:bold}
.pagination .on{background:var(--bleu);color:var(--blanc)}
.pagination a{background:var(--bleu-clair)}

.vide{padding:26px;background:var(--bleu-clair);color:var(--gris)}

/* ---------- Colonne latérale ------------------------------------------- */

.encart{margin-bottom:26px;border:1px solid var(--trait);padding:22px}
.encart--action{background:var(--bleu);border-color:var(--bleu);color:var(--blanc)}
.encart--action .encart__titre{color:var(--cyan)}

.encart__titre{
	margin:0 0 14px;font-size:13px;font-weight:bold;
	letter-spacing:.16em;text-transform:uppercase;color:var(--bleu);
}
.encart__texte{margin:0 0 16px;font-size:15px}

.encart__liste{list-style:none;margin:0;padding:0}
.encart__liste li{border-bottom:1px solid var(--trait)}
.encart__liste li:last-child{border-bottom:0}
.encart__liste a{display:block;padding:10px 0;font-weight:bold;font-size:15px}

.bouton{
	display:inline-block;padding:13px 24px;
	background:var(--cyan);color:var(--bleu-fonce);
	font-weight:bold;font-size:15px;border:0;cursor:pointer;
	transition:background .15s ease;
}
.bouton:hover{background:var(--blanc);text-decoration:none}

/* Formulaire de recherche de SPIP */
.formulaire_recherche input[type=text],
.formulaire_recherche input[type=search]{
	width:100%;padding:11px 13px;border:2px solid var(--trait);
	font-family:var(--police);font-size:15px;margin-bottom:9px;
}
.formulaire_recherche input[type=submit]{
	padding:11px 20px;background:var(--bleu);color:var(--blanc);
	border:0;font-family:var(--police);font-weight:bold;cursor:pointer;
}
.formulaire_recherche input[type=submit]:hover{background:var(--cyan);color:var(--bleu-fonce)}

/* ---------- Pied de page ----------------------------------------------- */

.pied{background:var(--bleu-fonce);color:rgba(255,255,255,.8);margin-top:auto;padding:48px 0 0}

.pied__interne{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:38px}

.pied__titre{margin:0 0 14px;font-weight:bold;color:var(--blanc);font-size:16px}
.pied__texte{margin:0;font-size:15px;line-height:1.7}

.pied__liens{list-style:none;margin:0;padding:0;font-size:15px}
.pied__liens li{margin-bottom:9px}
.pied__liens a{color:var(--cyan)}

.pied__bas{
	border-top:1px solid rgba(255,255,255,.15);
	padding-top:20px;padding-bottom:24px;font-size:13px;color:rgba(255,255,255,.55);
}
.pied__bas a{color:rgba(255,255,255,.75)}

/* ---------- Adaptatif --------------------------------------------------- */

@media (max-width:960px){
	.grille-principale{grid-template-columns:1fr;gap:40px}
	.pied__interne{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
	:root{--gouttiere:20px}
	body{font-size:16px}
	.carte{grid-template-columns:1fr}
	.carte__visuel img{max-height:210px}
	.nav__lien{padding:12px 15px;font-size:14px}
	.pied__interne{grid-template-columns:1fr;gap:30px}
	.entete::after{width:34%;right:-14%}
	.bande-diago{right:18%}
	.article__chapo{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
	*{animation:none !important;transition:none !important}
}

/* ---------- Page de fréquentation (spip.php?page=stats) ---------------- */

.stats-cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:48px}

.stat-bloc{padding:24px;background:var(--bleu-clair);border-left:5px solid var(--cyan)}
.stat-bloc__chiffre{margin:0;font-size:42px;font-weight:bold;line-height:1;color:var(--bleu)}
.stat-bloc__libelle{margin:8px 0 0;font-size:14px;color:var(--gris)}

.tableau-stats{width:100%;border-collapse:collapse;font-size:15px}
.tableau-stats th{
	background:var(--bleu);color:var(--blanc);text-align:left;
	padding:11px 14px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
}
.tableau-stats td{padding:10px 14px;border-bottom:1px solid var(--trait)}
.tableau-stats tr:hover td{background:var(--bleu-clair)}
.tableau-stats .col-nombre{text-align:right;white-space:nowrap;width:1%}
.tableau-stats .col-barre{width:38%}

.barre{display:block;height:11px;background:var(--cyan);min-width:2px}

.note-rgpd{
	margin-top:44px;padding:18px 22px;font-size:14px;color:var(--gris);
	background:var(--bleu-clair);border-left:5px solid var(--rouge);
}

.compteur-pied{margin-top:10px;font-size:13px;color:rgba(255,255,255,.55)}