@charset "utf-8";
/* ===========================================================================
   cap-sizun.com — socle graphique commun
   ---------------------------------------------------------------------------
   Cette feuille est chargée par les neuf sites du réseau (www, agenda,
   annonces, articles, cartes-postales, documents, photos, services, sites),
   juste après styles_general.css dont elle reprend la mise en page.

   Elle ne change AUCUN identifiant ni classe : le HTML produit par les
   fichiers PHP reste identique. Tout se joue ici. Pour revenir en arrière, il
   suffit de retirer la ligne <link> qui l'appelle dans index.php.

   La palette garde le jaune historique du site, mais assombri pour rester
   lisible sur blanc, et l'associe à un gris ardoise (le granit) et à un bleu
   marine (la mer) pour les liens.
   =========================================================================== */

:root {
  /* Couleurs reprises du site : le jaune #e6e300 et le gris #414141. */
  --jaune:        #f2ce00;   /* accent principal : soulignés, états actifs */
  --jaune-vif:    #ffe23d;   /* survol */
  --jaune-pale:   #fffbe4;   /* fonds discrets */
  --ardoise:      #262c33;   /* barre du haut, pied de page */
  --ardoise-clair:#39424c;
  --mer:          #0e6b86;   /* liens */
  --mer-vive:     #128aab;
  --texte:        #1c232a;
  --texte-doux:   #5d6b78;
  --bord:         #dfe5ea;
  --fond:         #f4f6f8;
  --carte:        #ffffff;
  --alerte:       #c0392b;
  --rayon:        10px;
  --ombre:        0 1px 2px rgba(38, 44, 51, .06), 0 6px 18px rgba(38, 44, 51, .07);
  --largeur:      1240px;    /* le site tenait dans 960 px : on respire davantage */
}

/* ----------------------------------------------------------- fondations */

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--mer); text-decoration: none; }
a:hover { color: var(--mer-vive); text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.2px; margin: 0 0 .5em; }

/* ------------------------------------------------------------- en-tête */

header#header {
  background: var(--ardoise);
  color: #e8eef3;
  border-bottom: 3px solid var(--jaune);
  padding: 0;
  margin: 0;
  width: 100%;
}

div#titres {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 18px 20px 12px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
div#titres h1, div#titres .titre {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.4px;
}
div#titres a { color: #fff; }
div#titres a:hover { color: var(--jaune); text-decoration: none; }
div#titres .soustitre {
  color: #9fb3c2;
  font-size: 14px;
  font-weight: 400;
}

/* ---------------------------------------------------------- navigation */

ul#menu_general {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 12px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
ul#menu_general li { margin: 0; padding: 0; }
ul#menu_general li a {
  display: block;
  padding: 11px 14px;
  color: #cfdae3;
  font-size: 14.5px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;   /* la bordure recouvre celle de l'en-tête */
}
ul#menu_general li a:hover {
  color: #fff;
  background: var(--ardoise-clair);
  text-decoration: none;
}
ul#menu_general li a.actif,
ul#menu_general li.actif a {
  color: #fff;
  border-bottom-color: var(--jaune);
}

/* Recherche et connexion, dans la barre du haut. */
div#recherche, div#barre_login, div#login {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 20px;
  font-size: 13.5px;
  color: #9fb3c2;
}
div#recherche input[type=text], div#recherche input[type=search], input#query {
  padding: 7px 10px;
  border: 1px solid #4a5560;
  border-radius: 6px;
  background: #1d2229;
  color: #e8eef3;
  font: inherit;
}
div#barre_login a, div#login a { color: #cfdae3; }
div#barre_login a:hover, div#login a:hover { color: var(--jaune); }

/* En-tête réduit au défilement : la règle existait déjà, on l'adoucit. */
#header.fixedtop {
  position: fixed;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
#header.fixedtop div#titres { display: none; }
header#header.fixedtop + div { margin-top: 64px; }

/* --------------------------------------------------------- fil d'Ariane */

div#breadcrumbs {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 14px 20px 0;
}
div#breadcrumbs ol {
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--texte-doux);
}
div#breadcrumbs ol li { display: inline; }

/* ------------------------------------------------------------- colonnes */

div#conteneur_milieu {
  max-width: var(--largeur);
  width: auto;
  margin: 0 auto;
  padding: 18px 20px 48px;
}

/*
 * Les colonnes flottaient (45 % / 34 % / 18 %), ce qui imposait des .clear et
 * empêchait toute adaptation aux petits écrans. Une grille fait le même travail
 * en trois lignes, se réorganise seule, et rend les .clear inoffensifs.
 */
div#contenu {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-auto-flow: row dense;   /* même raison : l'ordre du HTML n'est pas celui de l'affichage */
  gap: 22px;
  align-items: start;
  float: none;
  width: auto;
}
div#colonne_principale, div#colonne_secondaire, div#colonne_tertiaire, .colonne {
  float: none;
  width: auto;
  margin: 0;
}
.clear { clear: none; height: 0; }

/* Les pages intérieures n'ont qu'une colonne : la grille s'efface d'elle-même. */
div#contenu > .colonne:only-child { grid-column: 1 / -1; }

/* --------------------------------------------------------------- blocs */

.module, .bloc {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 16px 18px;
  margin: 0 0 20px;
}
.module > :first-child, .bloc > :first-child { margin-top: 0; }
.module > :last-child, .bloc > :last-child { margin-bottom: 0; }

.module h1, .bloc h1 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texte-doux);
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--jaune);
}
.module h1 a, .bloc h1 a { color: inherit; }
.module h2, .bloc h2 { font-size: 16px; font-weight: 600; margin: 14px 0 4px; }

.module ul, .bloc ul { margin: 0; padding: 0; list-style: none; }
.module ul li, .bloc ul li {
  padding: 7px 0;
  border-bottom: 1px solid #eef2f5;
  font-size: 14.5px;
}
.module ul li:last-child, .bloc ul li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------- vignettes */

/*
 * Les listes de photos et de cartes postales s'alignaient à coups de float et
 * de largeurs fixes. Une grille automatique les répartit quel que soit l'écran.
 */
.last_photos, .group_photos, ul.last_photos, ul.group_photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.last_photos li, .group_photos li { border: 0; padding: 0; }
.thumb, .apercu, .last_photos img, .group_photos img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #eef2f5;
  transition: transform .15s ease, box-shadow .15s ease;
}
a:hover .thumb, a:hover .apercu,
.last_photos a:hover img, .group_photos a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(38, 44, 51, .18);
}

/* L'infobulle de description au survol : conservée, mais posée proprement. */
.module div a p.description { display: none; }
.module div a:hover p.description {
  display: block;
  position: absolute;
  z-index: 20;
  max-width: 260px;
  margin: 4px 0 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 8px;
  box-shadow: var(--ombre);
  font-size: 13px;
  color: var(--texte);
}

/* ------------------------------------------------------------- agenda */

.date_agenda, .date_jour {
  display: inline-block;
  min-width: 46px;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--jaune-pale);
  border: 1px solid #f0e4a8;
  color: #7a6400;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}
.infos, .infos_top { color: var(--texte-doux); font-size: 13.5px; }
.place { color: var(--texte-doux); font-size: 13.5px; }
.lu { opacity: .62; }

/* -------------------------------------------------------- formulaires */

input[type=text], input[type=search], input[type=email], input[type=url],
input[type=password], input[type=number], input[type=date], select, textarea {
  padding: 9px 11px;
  border: 1px solid #c8d2db;
  border-radius: 7px;
  background: #fff;
  color: var(--texte);
  font: inherit;
  font-size: 15px;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--mer);
  box-shadow: 0 0 0 3px rgba(14, 107, 134, .15);
}
textarea { min-height: 140px; line-height: 1.55; }

input[type=submit], button, .bouton_submit, .submit, a.bouton {
  display: inline-block;
  padding: 10px 18px;
  border: 0;
  border-radius: 7px;
  background: var(--mer);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
input[type=submit]:hover, button:hover, .bouton_submit:hover, .submit:hover, a.bouton:hover {
  background: var(--mer-vive);
  color: #fff;
  text-decoration: none;
}

/* ------------------------------------------------------------ tableaux */

table.tableau, .module table, .bloc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
table.tableau th, .module table th {
  text-align: left;
  padding: 8px 10px;
  background: #f4f7f9;
  border-bottom: 1px solid var(--bord);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-doux);
}
table.tableau td, .module table td { padding: 8px 10px; border-bottom: 1px solid #eef2f5; }

/* --------------------------------------------------------------- divers */

.schema { display: none; }
.bloc iframe.iframe_video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; }
.incat { font-size: 13.5px; color: var(--texte-doux); }
.identifiant { font-weight: 600; }

/* ------------------------------------------------------------- mobile */



@media (max-width: 760px) {
  div#contenu { grid-template-columns: 1fr; }
  div#colonne_tertiaire { grid-column: auto; }
  div#titres { padding: 14px 16px 10px; }
  div#titres h1, div#titres .titre { font-size: 21px; }
  div#conteneur_milieu { padding: 14px 14px 40px; }
  ul#menu_general { overflow-x: auto; flex-wrap: nowrap; }
  ul#menu_general li a { white-space: nowrap; padding: 10px 12px; }
  header#header.fixedtop + div { margin-top: 56px; }
}

/* ===========================================================================
   Ajustements après première mise en ligne
   ---------------------------------------------------------------------------
   Les règles ci-dessous corrigent ce que les feuilles historiques imposaient
   encore : bandeaux de titre pleins, barre de connexion flottante, colonnes
   aux proportions figées. Elles emploient la même spécificité que les règles
   d'origine (sélecteur d'identifiant) plutôt que !important, pour rester
   lisibles et prévisibles.
   =========================================================================== */

/* --- Bandeaux de titre : le fond plein devient un souligné de couleur ----- */

/*
 * Chaque rubrique de la page d'accueil avait sa couleur, posée en fond du
 * titre. On garde exactement ces couleurs — c'est l'identité du site — mais en
 * trait sous le titre, ce qui allège la page sans rien perdre du repérage.
 */
/*
 * Bandeaux de titre des blocs.
 *
 * Les feuilles historiques colorent chaque bandeau par un sélecteur qui contient
 * un IDENTIFIANT, par exemple « div.module#menu h1 { background-color:#339900 } »
 * dans styles_photos.css. Un identifiant l'emporte toujours sur n'importe quel
 * nombre de classes : impossible de reprendre la main autrement qu'en écrivant
 * les vingt identifiants un par un, ou en marquant ces trois propriétés comme
 * prioritaires. La seconde solution tient en quelques lignes et reste lisible,
 * c'est celle retenue. Elle ne concerne que l'apparence du bandeau ; la couleur
 * de repérage de chaque rubrique est rétablie juste en dessous.
 */
.module h1, .bloc h1 {
  background: none !important;
  background-image: none !important;
  color: var(--texte-doux) !important;
  padding: 0 0 9px;
  margin: 0 0 12px;
  border: 0;
  border-bottom: 2px solid var(--jaune);
  font-size: 15px;
  font-weight: 700;
  font-variant: normal;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.35;
}
.module h1 a, .bloc h1 a,
.module h1 a:link, .module h1 a:visited, .module h1 a:active,
.bloc h1 a:link, .bloc h1 a:visited, .bloc h1 a:active {
  color: var(--texte-doux) !important;
  text-decoration: none;
}
.module h1 a:hover, .bloc h1 a:hover { color: var(--mer) !important; }

/*
 * Le menu horizontal des rubriques (« Index / Ajouter une photo ») était lui
 * aussi un bandeau jaune plein.
 */
.module ul.menu_top {
  background: none !important;
  background-color: transparent !important;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 0 10px;
  margin: 0 0 12px;
  border-bottom: 2px solid var(--jaune);
  line-height: 1.4;
}
.module ul.menu_top li { margin: 0; padding: 0; border: 0; }
.module ul.menu_top li a,
.module ul.menu_top li a:link,
.module ul.menu_top li a:visited {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--jaune-pale);
  color: var(--texte) !important;
  font-size: 14px;
  font-weight: 600;
}
.module ul.menu_top li a:hover {
  background: var(--jaune);
  color: var(--ardoise) !important;
  text-decoration: none;
}

/* Les couleurs de repérage passent du fond plein au trait sous le titre. */
.module#alerte h1, .module#form_confirm h1     { border-bottom-color: #d93025; }
.module#prochains_evenements h1,
.module#toutelannee h1, .module#annonce h1     { border-bottom-color: #ffcc33; }
.module#derniers_commentaires h1,
.module#dernieres_discussions h1,
.module#selection h1                            { border-bottom-color: #339900; }
.module#visiteurs h1                            { border-bottom-color: #c3cbd2; }

/* Les blocs eux-mêmes n'ont plus de bordure de couleur : elle doublait le titre. */
/* Même raison : les bordures de couleur sont posées par identifiant. */
.module, .bloc { border-color: var(--bord) !important; }

/* --- Barre de connexion et recherche ------------------------------------- */

/*
 * Les deux blocs flottaient l'un sur l'autre et se chevauchaient dès que la
 * fenêtre changeait de largeur. Une seule rangée souple les aligne à droite.
 */
body > header div#barre_login {
  max-width: var(--largeur);
  width: auto;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: transparent;
}
body > header div#recherche { float: none; margin: 0; padding: 0; }
div#login {
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
div#barre_login input.identifiant,
div#barre_login input[type=password] { width: 130px; }
div#recherche input.query { width: 180px; margin: 0; vertical-align: baseline; }
div#barre_login input.submit, div#barre_login input[type=submit] {
  width: auto;
  padding: 8px 14px;
  font-size: 14px;
}
div#barre_login img { vertical-align: middle; }

/* --- Colonnes de la page d'accueil --------------------------------------- */

/*
 * #contenu contient le message d'accueil puis deux colonnes. Le message
 * concerne tout le site : il occupe la largeur entière, et les deux colonnes se
 * partagent l'espace en dessous, la plus fournie à gauche.
 */
div#contenu { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }


/* --- Cartes postales et photos en grille --------------------------------- */

section#dernieres_photos,
section#dernieres_cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 9px;
  align-content: start;
}
section#dernieres_photos > h1,
section#dernieres_cartes > h1 { grid-column: 1 / -1; }
section#dernieres_photos > a,
section#dernieres_cartes > a { display: block; line-height: 0; }
section#dernieres_photos img,
section#dernieres_cartes img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border: 0;
  border-radius: 8px;
}

/*
 * Le titre des blocs est un lien : sa couleur venait des feuilles historiques
 * (blanc, pour se détacher du bandeau plein) et le rendait invisible une fois
 * le bandeau retiré. On la reprend ici, au même niveau de spécificité.
 */
section.module h1 a,
section#annonce h1 a, section#alerte h1 a, section#pratique h1 a,
section#visiteurs h1 a, section#dernieres_photos h1 a, section#derniers_documents h1 a,
section#dernieres_cartes h1 a, section#prochains_evenements h1 a, section#toutelannee h1 a,
section#derniers_commentaires h1 a, section#dernieres_discussions h1 a,
section#derniers_articles h1 a, section#dernieres_annonces h1 a, section#derniers_sites h1 a {
  color: var(--texte-doux);
  text-decoration: none;
}
section.module h1 a:hover { color: var(--mer); }

@media (max-width: 760px) {
  div#contenu { grid-template-columns: 1fr; }
  div#contenu > section#annonce,
  div#contenu > div#colonne_tertiaire,
  div#contenu > div#colonne_secondaire { grid-column: auto; }
}

/* --- Bloc d'alerte et formulaire de connexion ----------------------------- */

/*
 * Le bloc « Aujourd'hui dans le Cap » est ciblé dans les feuilles historiques
 * par « .module#alerte » : classe + identifiant, plus spécifique que le
 * « section#alerte » employé plus haut. On reprend donc exactement le même
 * sélecteur pour que la dernière déclaration l'emporte.
 */
.module#alerte, .module#form_confirm {
  border-color: var(--bord);
}
.module#alerte h1, .module#form_confirm h1 {
  background: none;
  background-color: transparent;
  color: var(--texte-doux);
  border-bottom: 2px solid #d93025;
}
.module#alerte h1 a, .module#form_confirm h1 a { color: var(--texte-doux); }
.module#alerte li, .module#form_confirm li { list-style: none; margin-left: 0; }

/*
 * Le formulaire de connexion aligne un champ, un mot de passe, un bouton et un
 * lien. Les feuilles historiques leur imposaient des hauteurs fixes (20 px)
 * différentes de celle du lien « S'inscrire », d'où le chevauchement. On les
 * met sur une même rangée et on laisse la hauteur se calculer.
 */
div#barre_login form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}
div#barre_login label { display: none; }
div#barre_login input.identifiant,
div#barre_login input[type=text],
div#barre_login input[type=password] {
  height: auto;
  width: 140px;
  padding: 7px 10px;
  line-height: normal;
  border-radius: 6px;
}
div#barre_login input.submit,
div#barre_login input[type=submit] {
  height: auto;
  width: auto;
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--mer);
  color: #fff;
  border: 0;
  font-size: 14px;
  font-weight: 600;
}
div#barre_login .bouton_submit {
  padding: 7px 14px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid #8a97a3;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}
div#barre_login .bouton_submit:hover {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--ardoise);
  text-decoration: none;
}

/* ===========================================================================
   Deuxième passe : distinguer les titres des en-têtes de bloc
   ---------------------------------------------------------------------------
   Le HTML emploie deux conteneurs différents, et je les avais traités
   pareillement — d'où des titres d'articles réduits à de petites étiquettes :

     div.bloc   > h1  : le TITRE de la page (article, photo, fiche…)
     div.module > h1  : l'en-tête d'un bloc latéral (« Dans la même catégorie »)

   Le premier redevient un vrai titre, le second garde l'étiquette.
   =========================================================================== */

.bloc h1,
div.bloc h1 {
  font-size: 30px !important;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.4px;
  color: var(--texte) !important;
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  line-height: 1.2;
}
.bloc h1 a, div.bloc h1 a,
.bloc h1 a:link, .bloc h1 a:visited, .bloc h1 a:active {
  color: var(--texte) !important;
}
.bloc h1 a:hover { color: var(--mer) !important; }

.bloc h2, div.bloc h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--texte);
  margin: 26px 0 8px;
}
.bloc h2 a, .bloc h2 a:link, .bloc h2 a:visited { color: var(--texte); }

/* Le corps d'un article : une colonne de lecture confortable. */
.bloc p { font-size: 16.5px; line-height: 1.7; margin: 0 0 1em; }
.bloc img { border-radius: 8px; }
.bloc hr { margin: 28px 0; border: 0; height: 1px; background: var(--bord); }
.infos, p.infos { color: var(--texte-doux); font-size: 14px; margin-bottom: 20px; }

/* --- Barre de connexion : la hauteur figée coupait le bouton ------------- */

/*
 * « div#barre_login { height: 25px } » venait des feuilles historiques et
 * rognait la rangée dès qu'elle dépassait cette hauteur : le bouton
 * « S'inscrire » se retrouvait tronqué. On laisse la hauteur se calculer.
 */
body > header div#barre_login, div#barre_login {
  height: auto !important;
  min-height: 0;
  overflow: visible;
}
div#login { height: auto !important; }

/* --- Bandeau d'introduction des rubriques -------------------------------- */

/*
 * Le bloc « Index / Ajouter une photo » ouvrait chaque page sur un grand aplat
 * jaune, avant même le contenu. On le ramène à une barre d'outils discrète.
 */
.module#accueil {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
}
.module#accueil p {
  font-size: 14px;
  color: var(--texte-doux);
  margin: 8px 0 0;
}
.module#accueil ul.menu_top { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* --- Listes de catégories et de communes ---------------------------------- */

/*
 * Ces listes étaient de simples suites de liens séparés par des virgules. Elles
 * deviennent des pastilles, plus faciles à viser et à parcourir.
 */
.module#categories, .module#communes, .module#incat, .incat {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  font-size: 14px;
  color: var(--texte-doux);
  line-height: 2.1;
}
.incat a, .module#categories a, .module#communes a {
  display: inline-block;
  padding: 3px 10px;
  margin: 0 3px 3px 0;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--bord);
  color: var(--texte);
  font-size: 13.5px;
}
.incat a:hover, .module#categories a:hover, .module#communes a:hover {
  background: var(--jaune-pale);
  border-color: var(--jaune);
  text-decoration: none;
}

/* ===========================================================================
   Troisième passe : mise en page tolérante aux deux structures
   ---------------------------------------------------------------------------
   Les sites n'ont pas tous le même emboîtement :

     www       : #conteneur_milieu > #contenu > (#annonce, .colonne, .colonne)
     articles  : #conteneur_milieu > (#accueil, #menu, .colonne, .colonne)

   et l'ordre des colonnes dans le HTML n'est pas celui de l'affichage : sur
   articles, la colonne secondaire est écrite avant la principale. La grille
   règle les deux cas : le conteneur est une grille, tout ce qui n'est pas une
   colonne occupe la largeur entière, et chaque colonne est placée explicitement
   — l'ordre visuel ne dépend donc plus de l'ordre du HTML.
   =========================================================================== */

div#conteneur_milieu {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  /*
   * « dense » est indispensable ici : la colonne secondaire est écrite AVANT la
   * principale dans le HTML. Sans lui, la grille place la secondaire en haut à
   * droite puis renvoie la principale à la ligne suivante — la liste d'articles
   * se retrouvait sous le bloc des commentaires. Avec « dense », la grille
   * comble la case restée libre à gauche sur la même ligne.
   */
  grid-auto-flow: row dense;
  gap: 22px;
  align-items: start;
}


/* --- Champ de recherche --------------------------------------------------- */

/*
 * La recherche était simplement masquée (display:none) dans les feuilles
 * historiques. Elle reprend sa place, à droite de la barre du haut, à côté du
 * formulaire de connexion.
 */
body > header div#recherche {
  display: block;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 8px 20px 0;
  text-align: right;
}
body > header div#recherche form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body > header div#recherche input.query,
body > header div#recherche input[type=text] {
  width: 220px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #4a5560;
  background: #1d2229;
  color: #e8eef3;
}
body > header div#recherche input.query::placeholder { color: #7f8f9d; }
body > header div#recherche input.submit,
body > header div#recherche input[type=submit] {
  padding: 7px 14px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid #8a97a3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  width: auto;
}
body > header div#recherche input.submit:hover {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--ardoise);
}

/* --- Listes de catégories et de communes en pastilles --------------------- */

/*
 * Sur articles et photos, ces listes vivent dans « <div id="menu"><p>…</p> ».
 * Les séparateurs ont été retirés côté PHP : l'espacement vient d'ici.
 */
div#menu > p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--texte-doux);
  line-height: 2.2;
}
div#menu > p > a,
div#menu > p > a:link,
div#menu > p > a:visited {
  display: inline-block;
  padding: 3px 11px;
  margin: 0 4px 4px 0;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--bord);
  color: var(--texte);
  font-size: 13.5px;
  text-decoration: none;
}
div#menu > p > a:hover {
  background: var(--jaune-pale);
  border-color: var(--jaune);
  color: var(--texte);
}

@media (max-width: 900px) {
  div#conteneur_milieu { grid-template-columns: 1fr; }
  div#conteneur_milieu > * { grid-column: 1 !important; }
  body > header div#recherche { text-align: left; }
}

/* --- Barre d'état : boutons profil et déconnexion ------------------------- */

/*
 * Les deux actions étaient de simples images PNG de 16 pixels, sans libellé :
 * on devait deviner leur rôle. Elles deviennent des boutons avec icône
 * vectorielle et texte, alignés sur le formulaire de connexion.
 */
div#barre_login .bienvenue {
  color: #cfdae3;
  font-size: 14px;
  margin-right: 6px;
}
div#barre_login .bienvenue strong { color: #fff; font-weight: 600; }

div#barre_login .bouton-barre {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 6px;
  border: 1px solid #57636e;
  background: transparent;
  color: #e2e9ef;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
div#barre_login .bouton-barre:hover {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--ardoise);
  text-decoration: none;
}
div#barre_login .bouton-barre svg { flex: 0 0 auto; }

/* Les anciennes images d'icônes ne sont plus employées dans cette barre. */
div#barre_login img.icone { display: none; }

@media (max-width: 620px) {
  /* Sur petit écran, on garde l'icône seule pour ne pas déborder. */
  div#barre_login .bouton-barre span { display: none; }
  div#barre_login .bouton-barre { padding: 8px 10px; }
}

/* --- Carte OpenStreetMap des services ------------------------------------- */

/*
 * Leaflet dessine la carte dans un conteneur qui doit avoir une hauteur
 * explicite, faute de quoi elle ne s'affiche pas du tout. Cette hauteur venait
 * de styles_services.css, qui n'est plus chargée. On la reprend ici, un peu plus
 * généreuse : la carte est le cœur de la rubrique.
 */
div#map {
  margin: 0;
  padding: 0;
  height: 460px;
  border-radius: 8px;
  overflow: hidden;
  background: #e8eef2;
}
div#map.small { height: 220px; }
div#map.big { height: 460px; }

/* Leaflet pose ses propres styles : on ne contrarie pas ses calques. */
div#map .leaflet-container { height: 100%; width: 100%; }
div.module#carte { padding: 16px 18px; }

@media (max-width: 760px) {
  div#map, div#map.big { height: 320px; }
}

/* --- Marqueurs « déjà consulté » ------------------------------------------ */

/*
 * Une petite coche verte s'affichait devant chaque lien déjà visité. L'effet
 * était discret à l'origine (uniquement sur :visited) mais alourdit les listes.
 * On les retire partout ; les images restent dans le HTML, simplement masquées.
 */
.module ul li a img.lu,
.module ul li a:visited img.lu,
img.lu { display: none !important; }


/* ===========================================================================
   Placement des colonnes — règle unique
   ---------------------------------------------------------------------------
   Deux conteneurs peuvent porter la grille selon les sites : #conteneur_milieu
   directement (articles), ou un #contenu intermédiaire (www, services). Les
   règles qui suivent valent pour les deux, ce qui évite qu'une colonne échappe
   au placement et se retrouve renvoyée à la ligne suivante — c'est ce qui
   faisait disparaître la carte des services sous la liste des catégories.
   =========================================================================== */

/* Tout ce qui n'est pas une colonne occupe la largeur entière. */
div#conteneur_milieu > *:not(.colonne):not(#contenu),
div#contenu > *:not(.colonne) { grid-column: 1 / -1; }

/* #contenu porte sa propre grille : il prend toute la largeur du parent. */
div#conteneur_milieu > div#contenu { grid-column: 1 / -1; }

/* La colonne de contenu à gauche, les colonnes d'appoint à droite. */
div#conteneur_milieu > div#colonne_principale,
div#contenu > div#colonne_principale,
div#contenu > div#colonne_tertiaire { grid-column: 1; }

div#conteneur_milieu > div#colonne_secondaire,
div#conteneur_milieu > div#colonne_tertiaire,
div#contenu > div#colonne_secondaire { grid-column: 2; }

@media (max-width: 900px) {
  div#contenu > * { grid-column: 1 !important; }
}

/* ===========================================================================
   Quatrième passe : en-tête compact, agenda en deux colonnes
   =========================================================================== */

/* --- Ligne de titre : nom du site à gauche, recherche à droite ------------ */

div#titres {
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 12px;
  gap: 20px;
}
div#titres > a { margin-right: -6px; }
form.recherche_entete { margin-left: auto; }
form.recherche_entete #recherche {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  max-width: none;
}
form.recherche_entete .query {
  width: 230px;
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid #46515c;
  background: #1d2229;
  color: #e8eef3;
  font-size: 14px;
}
form.recherche_entete .query::placeholder { color: #7f8f9d; }
form.recherche_entete .submit {
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid #8a97a3;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
form.recherche_entete .submit:hover {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--ardoise);
}

/* --- Bandeau sombre resserré --------------------------------------------- */

/*
 * La recherche occupait une rangée à elle seule sous le menu. Elle est
 * remontée dans la ligne de titre : il ne reste que le menu, dont on réduit la
 * hauteur, et la barre d'état.
 */
header#header > nav {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 12px;
}
ul#menu_general li a { padding: 9px 13px; }
body > header div#barre_login { padding: 6px 20px 8px; }
body > header div#recherche { padding: 0; }

/* --- Agenda : la date à gauche de l'évènement ----------------------------- */

/*
 * La liste de définitions rendait déjà cette forme (dt flottant à 14 %). Le
 * flottement imposait une hauteur minimale de 150 px par ligne et ne s'adaptait
 * pas aux petits écrans. Une grille à deux colonnes donne le même résultat, sans
 * hauteur imposée, et repasse en pleine largeur sur mobile.
 */
dl.agenda {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 4px 20px;
  margin: 0;
  align-items: start;
}
dl.agenda dt.date_agenda {
  grid-column: 1;
  float: none;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 10px 0 0;
  text-align: right;
  color: var(--texte-doux);
  font-size: 13.5px;
  line-height: 1.3;
  border-top: 2px solid var(--jaune);
}
dl.agenda dt.date_agenda span.date_jour {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: var(--texte);
  margin: 2px 0;
  line-height: 1;
}
dl.agenda dd {
  grid-column: 2;
  margin: 0;
  padding: 10px 0 22px;
  border-top: 1px solid var(--bord);
}
dl.agenda dd article.agenda_index h2 { margin: 0 0 4px; font-size: 18px; }

@media (max-width: 640px) {
  dl.agenda { grid-template-columns: 1fr; gap: 0; }
  dl.agenda dt.date_agenda { text-align: left; border-top: 2px solid var(--jaune); padding-top: 12px; }
  dl.agenda dt.date_agenda span.date_jour { display: inline; font-size: 20px; margin: 0 4px; }
  dl.agenda dd { border-top: 0; padding-top: 4px; }
}

/* --- Accueil : les derniers articles en tête ------------------------------ */

/*
 * Dans le HTML, la colonne des articles est écrite en dernier. « order » la
 * remonte à l'affichage sans toucher au PHP.
 */
div#contenu > section#annonce        { order: 1; }
div#contenu > div#colonne_principale { order: 2; grid-column: 1; }
div#contenu > div#colonne_tertiaire  { order: 3; grid-column: 1; }
div#contenu > div#colonne_secondaire { order: 4; grid-column: 2; }

/* --- Captures d'écran de l'annuaire de sites ------------------------------ */

/*
 * Les vignettes venaient d'un service extérieur en 160x120, floues et souvent
 * absentes. Elles sont désormais prises sur le serveur en 640x400 : on peut les
 * afficher franchement plus grand sans qu'elles se dégradent.
 */
img.capture-site {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;   /* le haut de la page porte l'identité du site */
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: #eef2f5;
  transition: transform .15s ease, box-shadow .15s ease;
}
img.capture-site:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(38, 44, 51, .18);
}
img.capture-site.grande { max-width: 640px; margin: 0 0 18px; }

/* Dans la liste, la capture se place à côté du texte. */
div.site {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--bord);
}
div.site h2 { grid-column: 2; margin: 0 0 6px; font-size: 19px; }
div.site a:has(> img.capture-site) { grid-column: 1; grid-row: 1 / span 3; }
div.site p { grid-column: 2; margin: 0 0 6px; }

@media (max-width: 700px) {
  div.site { grid-template-columns: 1fr; }
  div.site h2, div.site p, div.site a:has(> img.capture-site) { grid-column: 1; grid-row: auto; }
  img.capture-site { max-width: 100%; }
}

/* --- Compteurs des pastilles ---------------------------------------------- */

/*
 * Le nombre d'éléments était écrit entre parenthèses, collé au libellé :
 * « Animaux (12) ». Il est désormais dans son propre élément, ce qui permet de
 * le poser à droite du nom, en plus petit et sur un fond discret — la pastille
 * se lit d'un coup d'œil sans que le chiffre encombre le mot.
 */
.nb {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--jaune-pale);
  border: 1px solid #f0e4a8;
  color: #7a6400;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  vertical-align: 1px;
}
/* Un compteur à zéro s'efface : la rubrique est vide, inutile d'attirer l'œil. */
a:has(> .nb) { position: relative; }

/* Dans les listes verticales (photos, services, agenda), le nombre part à droite. */
.module ul li a .nb, .bloc ul li a .nb {
  float: right;
  margin-left: 10px;
  background: #eef2f5;
  border-color: var(--bord);
  color: var(--texte-doux);
}

/* --- Bloc-marque : nom du site et baseline ------------------------------- */

/*
 * Le nom et la baseline se suivaient sur une même ligne, en deux tailles
 * proches : rien ne ressortait. Ils sont désormais empilés, le nom en fort
 * caractère avec l'extension « .com » en accent jaune, la baseline en dessous,
 * en petites capitales espacées. L'ensemble reste un seul lien vers l'accueil.
 */
a.marque {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  line-height: 1.05;
}
a.marque:hover { text-decoration: none; }

#titre {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -.7px;
  color: #fff;
}
#titre .ext { color: var(--jaune); font-weight: 700; }
a.marque:hover #titre { color: #fff; }
a.marque:hover #titre .ext { color: var(--jaune-vif); }

#soustitre {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8fa5b6;
}
a.marque:hover #soustitre { color: var(--jaune); }

@media (max-width: 760px) {
  #titre { font-size: 34px; }
  #soustitre { font-size: 10px; letter-spacing: .14em; }
}

/* Fil d'Ariane : le séparateur « > » vient du PHP, on se contente de l'adoucir. */
div#breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
div#breadcrumbs ol li { display: inline; }
div#breadcrumbs ol { color: #9aa7b2; }
div#breadcrumbs ol a { color: var(--texte-doux); }
div#breadcrumbs ol a:hover { color: var(--mer); }
div#breadcrumbs ol li:last-child span[itemprop="name"] { color: var(--texte); font-weight: 600; }

/* L'icône d'accueil suit la couleur du menu, comme les libellés voisins. */
ul#menu_general li a .icone-accueil { display: block; }
ul#menu_general li a:has(.icone-accueil) { padding: 9px 14px; }

/* Texte réservé aux lecteurs d'écran : présent dans le HTML, invisible à l'œil. */
.lecteur-ecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Alignements de l'en-tête -------------------------------------------- */

/*
 * Le bloc-marque et le menu partent du même bord gauche que le contenu de la
 * page. On décale l'ensemble d'un cran vers la droite, comme demandé, en
 * gardant les deux alignés entre eux.
 */
div#titres { padding-left: 34px; }
/*
 * Le premier libelle du menu doit tomber exactement sous le nom du site.
 * Le bloc-marque commence a 34 px ; le menu ajoute 12 px de retrait a la
 * liste et 13 px de retrait a chaque entree, il faut donc partir de 9 px.
 */
header#header > nav { padding-left: 9px; }
body > header div#barre_login { padding-left: 34px; }
div#breadcrumbs, div#conteneur_milieu { padding-left: 34px; }

/*
 * L'icône d'accueil est une image dans une ligne de texte : sans alignement
 * explicite, elle se posait sur la ligne de base et remontait par rapport aux
 * libellés voisins. On centre le contenu de chaque entrée de menu.
 */
ul#menu_general li a {
  display: flex;
  align-items: center;
  min-height: 38px;
}
ul#menu_general li a .icone-accueil { display: block; margin: 0; }

@media (max-width: 760px) {
  div#titres, body > header div#barre_login,
  div#breadcrumbs, div#conteneur_milieu { padding-left: 16px; }
  header#header > nav { padding-left: 10px; }
}

/* --- Bloc-marque agrandi -------------------------------------------------- */

/*
 * Le nom du site devient l'élément dominant de l'en-tête. On resserre son
 * interligne pour que la baseline reste collée dessous, et on donne un peu
 * d'air au-dessus et en dessous.
 */
div#titres { padding-top: 18px; padding-bottom: 16px; }
a.marque { line-height: .95; gap: 4px; }
#titre { letter-spacing: -1.4px; }
#soustitre { letter-spacing: .22em; }

/* La recherche reste alignée sur le bas du bloc-marque. */
div#titres { align-items: flex-end; }
form.recherche_entete { padding-bottom: 6px; }

@media (max-width: 900px) {
  div#titres { align-items: flex-start; flex-direction: column; gap: 12px; }
  form.recherche_entete { margin-left: 0; padding-bottom: 0; }
  form.recherche_entete .query { width: 100%; }
  form.recherche_entete #recherche { width: 100%; }
}

/* --- Baseline étirée sous le nom ----------------------------------------- */

/*
 * « L'actualité du Cap » se cale exactement sur la largeur du nom au-dessus :
 * la ligne est justifiée sur les deux bords, y compris la dernière (et unique)
 * ligne, ce qui répartit l'espacement entre les lettres tout seul, quelle que
 * soit la taille du titre.
 */
/*
 * La justification ecartait les MOTS et laissait de grands trous entre eux.
 * On ecarte les LETTRES : l'espacement est reparti regulierement sur toute la
 * ligne, qui court alors sous le nom sans creer de vides.
 */
a.marque { display: inline-block; }
#titre { display: block; }
#soustitre {
  display: block;
  font-size: 16px;
  letter-spacing: .40em;
  padding-top: 4px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  #soustitre { font-size: 11px; letter-spacing: .2em; }
}

/* --- Photos et cartes postales en grand ----------------------------------- */

/*
 * Les fiches affichent desormais la declinaison « -l » de 1400 px (voir
 * meilleur_apercu() dans include_fonctions.php). On la laisse occuper toute la
 * largeur disponible, sans jamais depasser sa taille reelle : au-dela elle
 * deviendrait floue. Le clic ouvre l'original.
 */
img#big_h, img#big_v, .bloc img#big_h, .bloc img#big_v {
  display: block;
  width: 100%;
  max-width: 1400px;
  height: auto;
  border-radius: 10px;
  background: #eef2f5;
  margin: 0 0 16px;
}
img#big_v { max-width: 1000px; }   /* une image en hauteur n'a pas besoin d'autant */

/* La vignette de l'accueil passe de 75 a 155 px : on peut la montrer plus grande. */
section#dernieres_photos img,
section#dernieres_cartes img { height: 112px; }