/* Police hébergée sur Joomla. Chemin à conserver lors du téléversement. */
@font-face {
  font-family: "ChanonatConseilLobster";
  src: url("/images/conseil-municipal/fonts/Lobster-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* MODIFICATIONS RAPIDES : couleurs, dimensions et typographie. */
#chanonat-conseil {
  --couleur-maire: #ff6940;
  --couleur-adjoints: #a6c832;
  --couleur-delegues: #b193df;
  --couleur-municipaux: #93258f;
  --couleur-texte: #707070;
  --fond: #ffffff;
  --largeur-organigramme: 1000px;
  --taille-portrait: 155px;
  --epaisseur-cercle: 7px;
  --police-texte: Arial, Helvetica, sans-serif;
  --police-titres: "ChanonatConseilLobster", "Brush Script MT", cursive;
}

#chanonat-conseil, #chanonat-conseil * { box-sizing: border-box; }

#chanonat-conseil {
  margin: 0;
  background: var(--fond);
  color: var(--couleur-texte);
  font-family: var(--police-texte);
}

#chanonat-conseil h2, #chanonat-conseil h3, #chanonat-conseil h4, #chanonat-conseil p { margin: 0; }

#chanonat-conseil .organigramme {
  width: 100%;
  max-width: var(--largeur-organigramme);
  margin-inline: auto;
  padding: 50px 0 34px;
}
/* Chaque groupe transmet sa couleur à son titre et aux portraits. */
#chanonat-conseil .groupe--maire { --couleur-groupe: var(--couleur-maire); }

#chanonat-conseil .groupe--adjoints { --couleur-groupe: var(--couleur-adjoints); }

#chanonat-conseil .groupe--delegues { --couleur-groupe: var(--couleur-delegues); }

#chanonat-conseil .groupe--municipaux { --couleur-groupe: var(--couleur-municipaux); }

#chanonat-conseil .titre-maire, #chanonat-conseil .titre-groupe {
  color: var(--couleur-groupe);
  font-family: var(--police-titres);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
}

#chanonat-conseil .titre-maire { margin-bottom: 20px; text-align: center; font-size: 26px; }

#chanonat-conseil .groupe--maire .nom { margin-top: 10px; }

#chanonat-conseil .groupe--maire .fonction { font-size: 18px; }
/* Les lignes et leurs points sont dessinés en CSS, jamais en image. */
#chanonat-conseil .titre-groupe {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 45px 15px;
}

#chanonat-conseil .titre-groupe::after {
  content: "";
  flex: 1;
  min-width: 24px;
  height: 10px;
  background:
    radial-gradient(circle at 5px 5px, var(--couleur-groupe) 0 5px, transparent 5.1px),
    linear-gradient(var(--couleur-groupe), var(--couleur-groupe));
  background-size: 10px 10px, calc(100% - 5px) 3px;
  background-position: left center, right center;
  background-repeat: no-repeat;
}

#chanonat-conseil .personnes { display: flex; flex-wrap: wrap; justify-content: center; }

#chanonat-conseil .personne { min-width: 0; text-align: center; }

#chanonat-conseil .personnes--deux > .personne { flex: 0 0 50%; }

#chanonat-conseil .personnes--quatre > .personne, #chanonat-conseil .personnes--municipaux > .personne { flex: 0 0 25%; }

#chanonat-conseil .portrait {
  display: block;
  width: var(--taille-portrait);
  height: var(--taille-portrait);
  margin-inline: auto;
  border: var(--epaisseur-cercle) solid var(--couleur-groupe);
  border-radius: 50%;
  object-fit: cover;
  background: #eeeeee;
}

#chanonat-conseil .nom { margin-top: 8px; font-size: 18px; font-weight: 700; line-height: 21px; }

#chanonat-conseil .fonction { font-size: 17px; font-weight: 400; line-height: 20px; }

#chanonat-conseil .groupe--adjoints { margin: 40px auto 0; }

#chanonat-conseil .groupe--adjoints .titre-groupe { margin-bottom: 13px; }

#chanonat-conseil .groupe--adjoints .nom { min-height: 42px; padding-inline: 8px; }

#chanonat-conseil .groupe--adjoints .fonction { max-width: 240px; margin-inline: auto; }

#chanonat-conseil .groupe--delegues { max-width: 750px; margin: 53px auto 0; }

#chanonat-conseil .groupe--municipaux { margin-top: 38px; }

#chanonat-conseil .groupe--municipaux .titre-groupe { margin-right: 15px; margin-bottom: 11px; }

#chanonat-conseil .personnes--municipaux { row-gap: 53px; }

/* Tablette : deux colonnes et une dernière ligne centrée. */
@container chanonat-conseil (max-width: 900px) {

#chanonat-conseil .organigramme { padding: 36px 20px; }

#chanonat-conseil .titre-groupe, #chanonat-conseil .groupe--adjoints .titre-groupe { margin-inline: 0; }

#chanonat-conseil .groupe--adjoints .nom { min-height: 0; }

#chanonat-conseil .groupe--municipaux .titre-groupe { margin-right: 0; }

#chanonat-conseil .personnes { column-gap: 20px; row-gap: 34px; }

#chanonat-conseil .personnes--deux > .personne, #chanonat-conseil .personnes--quatre > .personne, #chanonat-conseil .personnes--municipaux > .personne { flex-basis: calc(50% - 10px); }

#chanonat-conseil .groupe--adjoints, #chanonat-conseil .groupe--delegues, #chanonat-conseil .groupe--municipaux { margin-top: 44px; }

#chanonat-conseil .retour-desktop { display: none; }

#chanonat-conseil .fonction { max-width: 260px; margin-inline: auto; }
}

/* Mobile : une personne par ligne pour conserver des noms lisibles. */
@container chanonat-conseil (max-width: 480px) {

#chanonat-conseil .organigramme { padding-inline: 22px; }

#chanonat-conseil .titre-maire, #chanonat-conseil .titre-groupe { font-size: 24px; }

#chanonat-conseil .titre-groupe, #chanonat-conseil .groupe--adjoints .titre-groupe, #chanonat-conseil .groupe--municipaux .titre-groupe { gap: 12px; margin-bottom: 24px; }

#chanonat-conseil .personnes--deux > .personne, #chanonat-conseil .personnes--quatre > .personne, #chanonat-conseil .personnes--municipaux > .personne { flex-basis: 100%; }
}

/* Impression : garder les photos, les noms et chaque titre avec son groupe. */
@media print {

#chanonat-conseil { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

#chanonat-conseil .organigramme { padding-top: 0; }

#chanonat-conseil .personne { break-inside: avoid; }

#chanonat-conseil .titre-maire, #chanonat-conseil .titre-groupe { break-after: avoid; }
}

/* Isolation des styles du thème de la mairie. */
#chanonat-conseil {
  container: chanonat-conseil / inline-size;
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  text-align: left;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
}
#chanonat-conseil .groupe,
#chanonat-conseil .personnes,
#chanonat-conseil .personne {
  padding: 0;
  border: 0;
  background: none;
  float: none;
}
#chanonat-conseil h2,
#chanonat-conseil h3,
#chanonat-conseil h4,
#chanonat-conseil p {
  padding: 0;
  border: 0;
  background: none;
  letter-spacing: normal;
  text-transform: none;
  font-style: normal;
  text-shadow: none;
}
#chanonat-conseil .portrait {
  float: none;
  padding: 0;
  max-width: 100%;
  box-shadow: none;
}
#chanonat-conseil .nom,
#chanonat-conseil .fonction {
  font-family: var(--police-texte);
  color: var(--couleur-texte);
}
/* TinyMCE peut entourer une image d’un paragraphe. */
#chanonat-conseil .photo { margin: 0; padding: 0; line-height: 0; }