/* ==========================================================================
   Modèle 11 — Sobre institutionnel — feuille de style propre au modèle
   Design relevé sur demotypo11.cdg46.fr : en-tête blanc (nom, recherche toujours visible, bouton
   Contact) puis barre de menu bleu nuit, carrousel avec texte à gauche et bandeau de commandes
   (pause libellée, pages numérotées), accès directs en tuiles blanches sur fond gris, actualités en
   cartes encadrées, agenda en lignes avec bloc date, présentation avec photo à bord perdu, infos
   pratiques en trois cartes, pied de page bleu nuit en colonnes.
   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-11 {
  --c-texte-second: #374151;
  --c-pied: var(--c-primaire);
  --c-sur-pied: var(--c-sur-primaire);
  --entete-boite: 7.25rem;
  --h-carrousel: clamp(20rem, 52vh, 32rem);
  --barre-carrousel: 3.75rem;
  /* Marge latérale qui aligne un contenu à bord perdu sur le conteneur */
  --gouttiere: max(clamp(1rem, 4vw, 2rem), calc((100% - var(--l-conteneur)) / 2 + clamp(1rem, 4vw, 2rem)));
  font-size: 0.95rem;
  overflow-x: clip;
}
.modele-11 :is([id], a, button, input) {
  scroll-margin-top: calc(var(--entete-boite) + 1rem);
}

/* Titres de section : sobres, alignés à gauche */
.modele-11 .accueil .frame > header {
  margin-bottom: 1.5rem;
  text-align: left;
}
.modele-11 .frame > header h2,
.modele-11 .ce-bodytext > header h2 {
  margin: 0;
  font-family: var(--f-titres);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--c-texte);
}
.modele-11 .frame > header h2 a,
.modele-11 .ce-bodytext > header h2 a {
  color: inherit;
  text-decoration: none;
}
.modele-11 .frame > header h2 a:hover,
.modele-11 .ce-bodytext > header h2 a:hover {
  text-decoration: underline;
}

/* Boutons : petits, rectangulaires */
.modele-11 .bouton {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  border-radius: var(--r-carte);
}

/* Lien « Tout voir » : à droite du titre de la section */
.modele-11 .accueil > .frame-type-news_pi1 {
  position: relative;
}
.modele-11 .accueil .frame-type-news_pi1 .liste__tout {
  position: absolute;
  top: calc(var(--e-section) + 0.3rem);
  right: var(--gouttiere);
  margin: 0;
}
.modele-11 .accueil .frame-type-news_pi1 .liste__tout .bouton {
  min-height: 1.5rem;
  padding: 0;
  font-weight: 700;
  text-decoration: underline;
  background: none;
  color: var(--c-texte);
  border: 0;
}
.modele-11 .accueil .frame-type-news_pi1 .liste__tout .bouton:hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   En-tête blanc collant : nom, recherche toujours visible, bouton Contact ; menu en barre bleu nuit
   ========================================================================== */
.modele-11 .entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 0;
}
.modele-11 .logo__texte {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4ch;
}
.modele-11 .logo__surtitre,
.modele-11 .logo__nom {
  font-family: var(--f-titres);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.modele-11 .logo__mention {
  flex-basis: 100%;
  font-size: 0.8rem;
}
.modele-11 .logo__blason-image,
.modele-11 .logo__image {
  height: 3.5rem;
}
@media (min-width: 1101px) {
  .modele-11 .entete__barre {
    flex-wrap: wrap;
    gap: 0 0.75rem;
    min-height: 0;
  }
  .modele-11 .logo {
    order: 1;
    min-height: 4.5rem;
    margin-right: auto;
  }
  /* Recherche : le formulaire reste affiché, la loupe qui le déplie est inutile */
  .modele-11 .recherche {
    order: 2;
  }
  .modele-11 .recherche__bouton {
    display: none;
  }
  .modele-11 .recherche__formulaire,
  .modele-11 .recherche__formulaire[hidden] {
    position: static;
    display: flex;
    width: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .modele-11 .recherche__formulaire input {
    width: 14rem;
    min-height: 2.5rem;
    font-size: 0.85rem;
  }
  .modele-11 .recherche__formulaire .bouton {
    background: #fff;
    color: var(--c-primaire);
  }
  .modele-11 .recherche__formulaire .bouton:hover {
    background: var(--c-primaire);
    color: var(--c-sur-primaire);
  }
  .modele-11 .entete__contact {
    display: inline-flex;
    order: 3;
  }
  /* Barre de menu : pleine largeur, sur toute la fenêtre (le fond déborde du conteneur) */
  .modele-11 .navigation {
    order: 4;
    flex-basis: 100%;
    margin: 0;
    background: var(--c-primaire);
    box-shadow: 0 0 0 100vmax var(--c-primaire);
    clip-path: inset(0 -100vmax);
  }
  .modele-11 .navigation__liste {
    justify-content: flex-start;
    gap: 0 1.5rem;
    margin-left: -0.8rem;
  }
  .modele-11 .navigation__lien,
  .modele-11 .navigation__lien:hover,
  .modele-11 .navigation__lien.actif {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-sur-primaire);
  }
  .modele-11 .navigation__lien:hover {
    text-decoration: underline;
    text-underline-offset: 0.35em;
  }
}
@media (max-width: 1100px) {
  .modele-11 {
    --entete-boite: 4rem;
  }
  .modele-11 .entete {
    border-bottom: 1px solid var(--c-bordure);
  }
  .modele-11 .navigation.est-ouverte {
    max-height: calc(100vh - var(--entete-boite));
    overflow-y: auto;
  }
}

/* ==========================================================================
   Carrousel : texte à gauche, bandeau de commandes bleu nuit (pause libellée, pages numérotées)
   ========================================================================== */
.modele-11 .carrousel {
  padding-bottom: var(--barre-carrousel);
  background: var(--c-primaire);
}
.modele-11 .carrousel__diapo::after {
  background: linear-gradient(to right, rgb(0 0 0 / 0.5), transparent 60%);
}
.modele-11 .carrousel__texte {
  padding-block: 2rem;
}
.modele-11 .carrousel__titre {
  max-width: 14ch;
  margin-bottom: 0.4em;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.2;
}
.modele-11 .carrousel__accroche {
  max-width: 28ch;
  margin-bottom: 1.25rem;
  font-family: var(--f-texte);
  font-size: 1.05rem;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.7);
}
.modele-11 .carrousel__texte .bouton {
  background: var(--c-primaire);
  color: var(--c-sur-primaire);
  border-color: var(--c-primaire);
}
.modele-11 .carrousel__texte .bouton:hover {
  background: #fff;
  color: var(--c-primaire);
}
.modele-11 .carrousel__credit {
  left: auto;
  right: 0.75rem;
  bottom: calc(var(--barre-carrousel) + 0.4rem);
  max-width: 45%;
  text-align: right;
}
.modele-11 .carrousel__barre {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--barre-carrousel);
  padding-inline: 0.5rem;
  counter-reset: page;
}
/* Les deux groupes de boutons sont fondus dans la barre pour pouvoir les ordonner :
   pause, précédent, pages, suivant */
.modele-11 .carrousel__indicateurs,
.modele-11 .carrousel__commandes {
  display: contents;
}
.modele-11 .carrousel__bouton,
.modele-11 .carrousel__indicateur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: none;
  border: 1px solid rgb(255 255 255 / 0.75);
  border-radius: var(--r-carte);
}
.modele-11 .carrousel__bouton:hover,
.modele-11 .carrousel__indicateur:hover {
  background: rgb(255 255 255 / 0.15);
}
.modele-11 .carrousel__bouton .icone {
  width: 1.1rem;
  height: 1.1rem;
}
.modele-11 .carrousel__bouton[data-action="pause"] {
  order: 1;
  margin-right: 0.75rem;
  padding-inline: 0.9rem;
}
.modele-11 .carrousel__bouton[data-action="pause"]::after {
  content: "Arrêter le défilement";
}
.modele-11 .carrousel__bouton[data-action="pause"][data-etat="arret"]::after {
  content: "Relancer le défilement";
}
.modele-11 .carrousel__bouton[data-action="precedent"] {
  order: 2;
}
.modele-11 .carrousel__indicateur {
  order: 3;
  counter-increment: page;
}
.modele-11 .carrousel__indicateur::before {
  content: counter(page);
  height: auto;
  background: none;
}
.modele-11 .carrousel__indicateur[aria-current] {
  background: #fff;
  color: var(--c-primaire);
}
.modele-11 .carrousel__indicateur[aria-current]::before {
  height: auto;
  background: none;
}
.modele-11 .carrousel__bouton[data-action="suivant"] {
  order: 4;
}
/* Petit écran : la pause garde son icône seule (son nom reste lu par les lecteurs d'écran) */
@media (max-width: 520px) {
  .modele-11 .carrousel__bouton[data-action="pause"]::after,
  .modele-11 .carrousel__bouton[data-action="pause"][data-etat="arret"]::after {
    content: none;
  }
  .modele-11 .carrousel__bouton[data-action="pause"] {
    margin-right: 0.25rem;
    padding-inline: 0.5rem;
  }
}

/* ==========================================================================
   Accès directs : tuiles blanches sur fond gris
   ========================================================================== */
.modele-11 .accueil > .frame-type-cdg46_cartes {
  padding-block: 2.75rem 3rem;
}
.modele-11 .cartes--0 {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.9rem;
}
.modele-11 .cartes--0 .cartes__lien {
  gap: 0.75rem;
  min-height: 6rem;
  padding: 1rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-texte);
  border-color: var(--c-bordure);
  border-radius: var(--r-carte);
}
.modele-11 .cartes--0 .cartes__lien:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--c-primaire);
  text-decoration: underline;
}
.modele-11 .cartes--0 .cartes__icone .icone {
  width: 1.9rem;
  height: 1.9rem;
}

/* ==========================================================================
   Actualités : cartes encadrées sans ombre
   ========================================================================== */
.modele-11 .accueil .actualites {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .modele-11 .accueil .actualites {
    grid-template-columns: minmax(0, 1fr);
  }
}
.modele-11 .carte-actu {
  border: 1px solid var(--c-bordure);
  border-radius: var(--r-carte);
  box-shadow: none;
}
.modele-11 .carte-actu:hover {
  border-color: var(--c-primaire);
}
.modele-11 .carte-actu__corps {
  padding: 1.25rem 1.4rem 1.5rem;
}
.modele-11 .carte-actu__date {
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
}
.modele-11 .carte-actu__titre {
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}
.modele-11 .carte-actu__resume {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ==========================================================================
   Agenda : lignes séparées par un filet, bloc date (mois, jour) à gauche
   ========================================================================== */
.modele-11 .accueil > .frame-type-news_pi1.frame-layout-1 {
  border-top: 1px solid var(--c-bordure);
}
.modele-11 .accueil .agenda {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-bordure);
}
.modele-11 .accueil .agenda__item {
  gap: 1.25rem;
  align-items: center;
  padding: 0.9rem 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--c-bordure);
  border-radius: 0;
}
.modele-11 .accueil .agenda__item:hover {
  background: var(--c-surface);
}
.modele-11 .accueil .agenda__date {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  width: 5.5rem;
  padding: 0.6rem 0;
  background: var(--c-surface);
  color: var(--c-texte);
  border-radius: var(--r-carte);
}
.modele-11 .accueil .agenda__jour {
  font-size: 1.4rem;
  color: var(--c-accent);
}
.modele-11 .accueil .agenda__mois {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: none;
}
.modele-11 .accueil .agenda__titre {
  font-size: 1.05rem;
}
.modele-11 .accueil .agenda__titre a {
  text-decoration: none;
}
.modele-11 .accueil .agenda__item:hover .agenda__titre a {
  text-decoration: underline;
}
.modele-11 .accueil .agenda__item p {
  font-size: 0.85rem;
}

/* ==========================================================================
   Présentation : photo à bord perdu sur la moitié gauche, texte et bouton à droite
   ========================================================================== */
.modele-11 .accueil > .frame-type-textmedia {
  padding: 0;
  font-size: 0.95rem;
  border-block: 1px solid var(--c-bordure);
}
.modele-11 .accueil > .frame-type-textmedia > * {
  max-width: none;
  padding: 0;
}
.modele-11 .accueil > .frame-type-textmedia .ce-textpic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.modele-11 .accueil > .frame-type-textmedia .ce-textpic.ce-right .ce-gallery {
  order: 2;
}
.modele-11 .accueil > .frame-type-textmedia .ce-gallery {
  position: relative;
  float: none;
  align-self: stretch;
  margin: 0;
  max-width: none;
}
.modele-11
  .accueil
  > .frame-type-textmedia
  .ce-gallery
  :is(.ce-row, .ce-column, .ce-outer, .ce-inner, figure) {
  float: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  right: auto;
}
.modele-11 .accueil > .frame-type-textmedia .ce-gallery img {
  width: 100%;
  height: 100%;
  min-height: 24rem;
  object-fit: cover;
}
.modele-11 .accueil > .frame-type-textmedia .image-caption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.5rem;
  font-size: 0.75rem;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.9);
}
.modele-11 .accueil > .frame-type-textmedia .ce-bodytext {
  max-width: 30rem;
  padding: 2.5rem clamp(1rem, 4vw, 3.5rem);
  line-height: 1.7;
}
.modele-11 .ce-bodytext > header {
  margin-bottom: 1rem;
}
/* Le dernier lien du texte prend la forme d'un bouton */
.modele-11 .accueil > .frame-type-textmedia .ce-bodytext > p:last-child > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  margin-top: 0.5rem;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--c-primaire);
  color: var(--c-sur-primaire);
  border: 2px solid var(--c-primaire);
  border-radius: var(--r-carte);
}
.modele-11 .accueil > .frame-type-textmedia .ce-bodytext > p:last-child > a:only-child:hover {
  background: #fff;
  color: var(--c-primaire);
}
@media (max-width: 800px) {
  .modele-11 .accueil > .frame-type-textmedia .ce-textpic {
    grid-template-columns: minmax(0, 1fr);
  }
  .modele-11 .accueil > .frame-type-textmedia .ce-textpic.ce-right .ce-gallery {
    order: 0;
  }
  .modele-11 .accueil > .frame-type-textmedia .ce-gallery img {
    min-height: 14rem;
  }
}

/* ==========================================================================
   Infos pratiques : une carte blanche par intertitre, en colonnes
   ========================================================================== */
.modele-11 .accueil .frame-type-text:has(> h3) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0 1.5rem;
  padding-inline: var(--gouttiere);
}
.modele-11 .accueil .frame-type-text:has(> h3) > * {
  max-width: none;
  margin: 0;
  padding-inline: 0;
}
.modele-11 .accueil .frame-type-text:has(> h3) > header {
  grid-column: 1 / -1;
  margin-bottom: 1.5rem;
}
/* Chaque intertitre ouvre une carte ; le texte qui le suit en forme le bas */
.modele-11 .accueil .frame-type-text:has(> h3) > h3 {
  grid-row: 2;
  padding: 1.25rem 1.4rem 0.9rem;
  font-size: 1.05rem;
  background: #fff;
  border: 1px solid var(--c-bordure);
  border-bottom: 0;
  border-radius: var(--r-carte) var(--r-carte) 0 0;
}
.modele-11 .accueil .frame-type-text:has(> h3) > h3 + * {
  grid-row: 3;
  padding: 0.9rem 1.4rem 1.4rem;
  font-size: 0.9rem;
  background: linear-gradient(var(--c-bordure), var(--c-bordure)) 1.4rem 0 / calc(100% - 2.8rem) 1px no-repeat #fff;
  border: 1px solid var(--c-bordure);
  border-top: 0;
  border-radius: 0 0 var(--r-carte) var(--r-carte);
}
.modele-11 .accueil .frame-type-text:has(> h3) > ul {
  list-style: none;
}
.modele-11 .accueil .frame-type-text:has(> h3) > ul li {
  padding-block: 0.45rem;
  font-weight: 700;
  border-bottom: 1px solid var(--c-bordure);
}
.modele-11 .accueil .frame-type-text:has(> h3) > ul li:last-child {
  border-bottom: 0;
}
@media (max-width: 900px) {
  .modele-11 .accueil .frame-type-text:has(> h3) {
    display: block;
  }
  .modele-11 .accueil .frame-type-text:has(> h3) > h3 {
    margin-top: 1.25rem;
  }
}

/* ==========================================================================
   Pied de page bleu nuit : coordonnées, horaires, liens ; mention légale en bas
   ========================================================================== */
.modele-11 .pied__grille {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3rem;
  padding-block: 3rem 2.5rem;
  font-size: 0.85rem;
}
@media (max-width: 900px) {
  .modele-11 .pied__grille {
    grid-template-columns: minmax(0, 1fr);
  }
}
.modele-11 .pied__titre {
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
}
.modele-11 #pied-contact {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.modele-11 .pied__mairie {
  margin-bottom: 0.9rem;
  font-size: 1rem;
  font-weight: 700;
}
.modele-11 .pied__bloc p,
.modele-11 .pied__liens li {
  margin-bottom: 0.6rem;
}
.modele-11 .pied .bouton--petit {
  margin-top: 0.5rem;
  background: #fff;
  color: var(--c-primaire);
  border-color: #fff;
}
.modele-11 .pied .bouton--petit:hover {
  background: transparent;
  color: #fff;
}
.modele-11 .pied__meta p {
  padding-block: 1rem;
  font-size: 0.8rem;
}