/* ==========================================================================
   Modèle 6 — Rouge deux colonnes — feuille de style propre au modèle
   Design relevé sur les sites réalisés avec le modèle 6 d'origine (Cézac, Lentillac-Saint-Blaise,
   Saint-Chels) : en-tête blanc haut avec loupe « pilule », fond de page gris très clair, carrousel
   encadré avec l'agenda (fil d'info) dans la colonne de droite, titres en capitales avec un trait
   de couleur, mot du maire en pleine largeur, cartes d'actualités sur un aplat décalé, pied de page
   clair (logos partenaires, coordonnées centrées, plan d'accès).
   Chargée après base.css, uniquement sur les sites qui utilisent ce modèle.
   Les couleurs et polices restent dans les réglages du site (variables --c-*, --f-*).
   ========================================================================== */

.modele-06 {
  --c-pied: #f1f1f1;
  --c-sur-pied: var(--c-texte);
  --ombre-carte: 0 6px 12px rgb(0 0 0 / 0.25);
  --entete-boite: 6rem;
  /* Carrousel encadré : hauteur bornée quelle que soit la hauteur de fenêtre */
  --h-carrousel: clamp(16rem, 45vh, 26rem);
  background: var(--c-surface);
  overflow-x: clip;
}
.modele-06 :is([id], a, button, input) {
  scroll-margin-top: calc(var(--entete-boite) + 1rem);
}

/* Titres de section : capitales, gras, trait vertical de la couleur primaire */
.modele-06 .frame > header h2,
.modele-06 .accueil .frame > header h2 {
  display: inline-block;
  margin: 0;
  padding-left: 0.6rem;
  border-left: 6px solid var(--c-primaire);
  font-family: var(--f-titres);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-texte);
}
.modele-06 .accueil .frame > header {
  margin-bottom: 1rem;
  text-align: left;
}
.modele-06 .frame > header h2 a {
  color: inherit;
  text-decoration: none;
}
.modele-06 .frame > header h2 a:hover {
  text-decoration: underline;
}

/* Boutons « Tout voir » : contour fin, petits */
.modele-06 .liste__tout .bouton {
  min-height: 2.4rem;
  padding: 0.3rem 0.8rem;
  font-weight: 400;
  font-size: 0.95rem;
  background: #fff;
  color: var(--c-primaire);
  border: 1px solid var(--c-primaire);
  border-radius: 0.3rem;
}
.modele-06 .liste__tout .bouton:hover {
  background: var(--c-primaire);
  color: var(--c-sur-primaire);
}
.modele-06 .liste__vide {
  font-style: italic;
  color: var(--c-primaire);
  text-align: left;
}

/* ==========================================================================
   En-tête : blanc, haut, collant, menu sobre, loupe en forme de pilule
   ========================================================================== */
.modele-06 .entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--c-bordure);
}
.modele-06 .entete__barre {
  min-height: var(--entete-boite);
}
.modele-06 .logo__surtitre {
  font-size: 0.8rem;
  letter-spacing: 0;
}
.modele-06 .logo__nom {
  font-weight: 400;
  font-size: 1.7rem;
}
.modele-06 .logo__blason-image {
  height: 5rem;
}
.modele-06 .navigation__liste {
  gap: 0.1rem 0.15rem;
}
.modele-06 .navigation__lien {
  font-weight: 400;
  font-size: 1rem;
}
.modele-06 .navigation__lien:hover {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.modele-06 .recherche {
  margin-left: 1rem;
}
.modele-06 .recherche__bouton {
  width: 5.5rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--c-primaire);
  color: var(--c-sur-primaire);
}
.modele-06 .recherche__bouton:hover,
.modele-06 .recherche__bouton[aria-expanded="true"] {
  background: var(--c-secondaire);
  color: var(--c-sur-secondaire);
}
.modele-06 .recherche__bouton .icone {
  width: 1.15rem;
  height: 1.15rem;
}
@media (max-width: 1100px) {
  .modele-06 {
    --entete-boite: 3.5rem;
  }
  .modele-06 .recherche {
    margin-left: auto;
  }
  .modele-06 .logo__blason-image {
    height: 2.75rem;
  }
  .modele-06 .navigation.est-ouverte {
    max-height: calc(100vh - var(--entete-boite));
    overflow-y: auto;
  }
}

/* ==========================================================================
   Accueil : carrousel encadré à gauche, colonne latérale (agenda) à droite,
   puis les autres blocs sur toute la largeur.
   Le conteneur de la colonne principale est « transparent » pour la grille (display: contents).
   ========================================================================== */
.modele-06 .accueil--deux-colonnes {
  max-width: 76rem;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: 0 2rem;
  padding-top: 2rem;
}
.modele-06 .accueil--deux-colonnes .accueil__principal {
  display: contents;
}
.modele-06 .accueil--deux-colonnes .accueil__principal > * {
  grid-column: 1 / -1;
}
.modele-06 .accueil--deux-colonnes .accueil__principal > .carrousel {
  grid-column: 1;
  grid-row: 1;
  margin-inline: 0;
}
.modele-06 .accueil--deux-colonnes .accueil__lateral {
  grid-column: 2;
  grid-row: 1;
  padding-block: 0;
}
.modele-06 .accueil--deux-colonnes .accueil__principal > .frame {
  padding-block: 2rem 1rem;
}
@media (max-width: 960px) {
  .modele-06 .accueil--deux-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }
  .modele-06 .accueil--deux-colonnes .accueil__lateral {
    grid-column: 1;
    grid-row: 2;
    padding-top: 2rem;
  }
}

/* Carrousel : photo seule, traits blancs, bouton pause rond */
.modele-06 .carrousel__diapo::after {
  background: none;
}
.modele-06 .carrousel__commandes {
  inset: 0;
  pointer-events: none;
}
.modele-06 .carrousel__bouton {
  position: absolute;
  pointer-events: auto;
  border: 0;
  background: none;
}
.modele-06 .carrousel__bouton[data-action="pause"] {
  right: 1rem;
  bottom: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--c-primaire);
  color: var(--c-sur-primaire);
}
.modele-06 .carrousel__bouton[data-action="precedent"] {
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
}
.modele-06 .carrousel__bouton[data-action="suivant"] {
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Colonne latérale : agenda en fil d'info (date, titre en capitales, filet) */
.modele-06 .accueil__lateral .frame {
  margin-bottom: 0;
}
.modele-06 .accueil__lateral .frame > header {
  margin-bottom: 1rem;
}
.modele-06 .accueil__lateral .frame > header h2 {
  font-size: 1.6rem;
}
.modele-06 .accueil__lateral .agenda {
  gap: 0;
  max-height: calc(var(--h-carrousel) - 7.5rem);
  overflow-y: auto;
  padding-left: 1.25rem;
}
.modele-06 .accueil__lateral .agenda__item {
  display: block;
  padding: 0.6rem 0.5rem;
  border: 0;
  border-bottom: 2px solid #666;
  background: none;
}
/* La date est déjà écrite en toutes lettres : pastille masquée */
.modele-06 .accueil__lateral .agenda__date,
.modele-06 .accueil__lateral .agenda__resume {
  display: none;
}
.modele-06 .accueil__lateral .agenda__item > div:not(.agenda__media) {
  display: flex;
  flex-direction: column;
}
.modele-06 .accueil__lateral .agenda__quand {
  order: -1;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-texte);
}
.modele-06 .accueil__lateral .agenda__titre {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
.modele-06 .accueil__lateral .agenda__titre a {
  color: var(--c-primaire);
  text-decoration: none;
}
.modele-06 .accueil__lateral .agenda__item:hover .agenda__titre a {
  text-decoration: underline;
}
.modele-06 .accueil__lateral .liste__tout {
  margin-top: 1rem;
  text-align: right;
}

/* Mot du maire / texte de bienvenue : pleine largeur */
.modele-06 .accueil--deux-colonnes .accueil__principal > :is(.frame-type-text, .frame-type-textmedia) > * {
  max-width: none;
}
.modele-06 .accueil :is(.frame-type-text, .frame-type-textmedia) {
  font-size: 1rem;
}
.modele-06 .accueil :is(.frame-type-text, .frame-type-textmedia) > :not(header) {
  padding-left: 1rem;
}

/* ==========================================================================
   Actualités : cartes blanches ombrées posées sur un aplat de couleur décalé à droite
   ========================================================================== */
.modele-06 .accueil .actualites {
  position: relative;
  isolation: isolate;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 17rem));
  justify-content: center;
  gap: 3rem;
  margin-top: -1rem;
  padding-block: 2.5rem 2rem;
}
.modele-06 .accueil .actualites::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1.75rem;
  bottom: 0;
  left: 50%;
  right: -1.5rem;
  background: var(--c-primaire);
}
.modele-06 .carte-actu {
  min-height: 21rem;
  border-radius: 0;
  box-shadow: var(--ombre-carte);
}
.modele-06 .carte-actu__media img,
.modele-06 .carte-actu__vide {
  aspect-ratio: auto;
  height: 12.5rem;
}
.modele-06 .carte-actu__corps {
  flex: 1;
  padding: 0.9rem 0.9rem 0.5rem;
}
.modele-06 .carte-actu__date {
  margin-bottom: 0.1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-texte);
}
.modele-06 .carte-actu__titre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}
.modele-06 .carte-actu__titre a,
.modele-06 .carte-actu:hover .carte-actu__titre a {
  color: var(--c-primaire);
  text-decoration: none;
}
.modele-06 .carte-actu:hover .carte-actu__titre a {
  text-decoration: underline;
}
.modele-06 .carte-actu__resume {
  display: none;
}
.modele-06 .carte-actu .lire-la-suite {
  display: block;
  padding-bottom: 0.3rem;
  text-align: center;
  font-size: 0.95rem;
  text-decoration: underline;
  color: var(--c-primaire);
}
.modele-06 .accueil .frame-type-news_pi1.frame-layout-0 .liste__tout {
  margin-top: 3.5rem;
  padding-bottom: 1rem;
}
@media (max-width: 700px) {
  .modele-06 .accueil .actualites::before {
    display: none;
  }
}

/* ==========================================================================
   Pied de page clair : logos partenaires, coordonnées et horaires centrés, plan d'accès
   ========================================================================== */
.modele-06 .pied__grille {
  max-width: 62rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "contact carte" "horaires carte";
  gap: 0 3rem;
  padding-block: 2.5rem 2rem;
  font-size: 0.95rem;
}
.modele-06 .pied__grille:has(.pied__bloc--partenaires) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
  grid-template-areas: "partenaires contact carte" "partenaires horaires carte";
}
.modele-06 .pied__grille:not(:has(.pied__bloc--carte)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "contact" "horaires";
}
.modele-06 .pied__grille:has(.pied__bloc--partenaires):not(:has(.pied__bloc--carte)) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  grid-template-areas: "partenaires contact" "partenaires horaires";
}
.modele-06 .pied__bloc {
  grid-area: contact;
  text-align: center;
}
.modele-06 .pied__bloc[aria-labelledby="pied-horaires"] {
  grid-area: horaires;
  align-self: start;
  margin-top: 0.75rem;
}
.modele-06 .pied__bloc--carte {
  grid-area: carte;
  text-align: left;
}
.modele-06 .pied__bloc--partenaires {
  grid-area: partenaires;
}
@media (max-width: 900px) {
  .modele-06 .pied__grille,
  .modele-06 .pied__grille:has(.pied__bloc--partenaires),
  .modele-06 .pied__grille:has(.pied__bloc--partenaires):not(:has(.pied__bloc--carte)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "contact" "horaires" "carte" "partenaires";
    row-gap: 1.5rem;
  }
}
.modele-06 .pied__titre {
  margin-bottom: 0.6rem;
  font-family: var(--f-texte);
  font-size: 0.95rem;
  font-weight: 700;
}
/* Le bloc commence par « Commune de … » en gras : titres « Coordonnées », « Plan d'accès »
   et « Nos partenaires » réservés aux lecteurs d'écran */
.modele-06 #pied-contact,
.modele-06 #pied-partenaires,
.modele-06 .pied__bloc--carte .frame > header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.modele-06 .pied__mairie {
  font-weight: 700;
}
.modele-06 .pied__bloc p {
  margin-bottom: 0.7rem;
}
.modele-06 .pied a {
  color: var(--c-primaire);
}
.modele-06 .pied address a {
  color: inherit;
}
.modele-06 .pied .bouton--petit {
  min-height: 2.25rem;
  padding: 0.25rem 0.8rem;
  color: var(--c-sur-primaire);
  border-radius: 0.3rem;
}
.modele-06 .pied .bouton--petit:hover {
  color: var(--c-primaire);
}
.modele-06 .pied__partenaires {
  grid-template-columns: repeat(2, minmax(0, 7rem));
  justify-content: center;
  gap: 0.75rem 2.5rem;
}
.modele-06 .pied__bloc--liens {
  display: none;
}
.modele-06 .pied__bloc--carte .frame {
  margin: 0;
  padding: 0;
}
.modele-06 .pied__bloc--carte .maps2 {
  width: 100% !important;
  height: 16rem !important;
  border: 1px solid #333;
}
.modele-06 .pied__bloc--carte [id^="maps2-"]:not(.maps2) {
  padding: 1rem;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid #333;
}
.modele-06 .pied__bloc--carte [id^="maps2-"]:not(.maps2) h3 {
  font-size: 1rem;
}
.modele-06 .pied__bloc--carte [id^="maps2-"]:not(.maps2) p:last-child {
  margin: 0;
}
.modele-06 .pied__carte-lien {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.modele-06 .pied__meta {
  border: 0;
  text-align: center;
}
.modele-06 .pied__meta p {
  padding-block: 0.75rem 1.75rem;
}
.modele-06 .pied__legal {
  display: block;
  padding-top: 0.5rem;
}
.modele-06 .pied__legal .pied__liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
}
.modele-06 .pied__legal li {
  margin: 0;
}
.modele-06 .pied__legal a {
  color: inherit;
  text-decoration: none;
}
.modele-06 .pied__legal a:hover {
  text-decoration: underline;
}

/* Mobile : le nom de la commune reprend la taille fluide du socle (un nom long ne se coupe pas au milieu d'un mot) */
@media (max-width: 1100px) {
  .modele-06 .logo__nom {
    font-size: clamp(1.05rem, 4.5vw, 1.45rem);
  }
}

/* En-tête plus large que le contenu : le menu tient sur une ligne */
.modele-06 .entete__barre {
  max-width: 96rem;
}