/* ============================================================
   AFFICHE OFFICIELLE — Mairie de Natitingou
   ------------------------------------------------------------
   Reproduction en HTML/CSS de la charte des communiqués.
   Aucun montage graphique, aucune police externe : l'affiche se
   régénère instantanément quand l'agent corrige une ligne, et
   reste nette à n'importe quelle taille.

   Format : 1024 × 1536 px (ratio 2:3), celui des visuels
   diffusés sur les réseaux. L'échelle est pilotée par une seule
   variable, --cq-u, pour que l'aperçu à l'écran, le
   téléchargement en image et l'impression partagent exactement
   la même mise en page.
   ============================================================ */

.cq-affiche{
  --cq-u:1px;              /* unité d'échelle */
  --cq-vert:#14532B;
  --cq-vert-clair:#1B6B37;
  --cq-or:#C9A227;
  --cq-or-clair:#E4C558;
  --cq-encre:#1A1A1A;

  position:relative;
  width:calc(1024 * var(--cq-u));
  height:calc(1536 * var(--cq-u));
  margin:0 auto;
  overflow:hidden;
  background:#FDFDFB;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  color:var(--cq-encre);
  box-shadow:0 10px 44px rgba(16,40,30,.18);
}

/* Paysage de l'Atacora en filigrane très pâle */
.cq-affiche::before{
  content:"";position:absolute;inset:0;
  background-image:var(--cq-fond,none);
  background-size:cover;background-position:center 65%;
  opacity:.17;
}
/* Voile blanc : le texte doit primer sur l'image, toujours */
.cq-affiche::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 55%,rgba(255,255,255,.62) 100%);
}
.cq-affiche > *{position:relative;z-index:2}

/* ============================================================
   ANGLES DÉCORATIFS
   Chevrons vert et or dans les deux angles supérieurs.
   ============================================================ */
.cq-angle{
  position:absolute;top:0;width:calc(190 * var(--cq-u));height:calc(190 * var(--cq-u));
  z-index:3;pointer-events:none;
}
.cq-angle::before,.cq-angle::after{content:"";position:absolute;inset:0}
.cq-angle-hg{left:0}
.cq-angle-hd{right:0;transform:scaleX(-1)}
.cq-angle::before{
  background:var(--cq-vert);
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.cq-angle::after{
  background:var(--cq-or);
  clip-path:polygon(0 0, 62% 0, 0 62%, 0 34%, 34% 0, 0 0);
  opacity:.95;
}

/* Semis de points, comme sur le modèle */
.cq-pois{
  position:absolute;top:calc(48 * var(--cq-u));
  width:calc(120 * var(--cq-u));height:calc(60 * var(--cq-u));z-index:3;
  background-image:radial-gradient(var(--cq-or) 1.6px, transparent 1.7px);
  background-size:calc(13 * var(--cq-u)) calc(13 * var(--cq-u));
  opacity:.55;
}
.cq-pois-g{left:calc(46 * var(--cq-u))}
.cq-pois-d{right:calc(46 * var(--cq-u))}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.cq-tete{
  padding:calc(40 * var(--cq-u)) 0 0;
  text-align:center;
}
.cq-commune{
  margin:0 0 calc(8 * var(--cq-u));
  font-family:Georgia,"Times New Roman",serif;
  font-size:calc(27 * var(--cq-u));
  font-weight:700;line-height:1.16;
  letter-spacing:calc(1.4 * var(--cq-u));
  text-transform:uppercase;
  color:#7A5B12;
}
.cq-blason{
  display:block;margin:0 auto;
  /* Resserré : chaque millimètre repris au blason est un millimètre
     rendu au texte. L'affiche doit rester lisible même chargée. */
  width:calc(165 * var(--cq-u));height:auto;
  max-height:calc(190 * var(--cq-u));object-fit:contain;
}

/* ============================================================
   BANDEAU HEXAGONAL
   ============================================================ */
.cq-bandeau-zone{
  display:flex;align-items:center;justify-content:center;
  gap:calc(10 * var(--cq-u));
  margin:calc(24 * var(--cq-u)) calc(46 * var(--cq-u)) calc(22 * var(--cq-u));
}
.cq-trait{
  flex:1;height:calc(3 * var(--cq-u));background:var(--cq-or);
  position:relative;border-radius:calc(2 * var(--cq-u));
}
.cq-trait::after{
  content:"";position:absolute;top:50%;
  width:calc(15 * var(--cq-u));height:calc(15 * var(--cq-u));
  border-radius:50%;background:var(--cq-vert);
  transform:translateY(-50%);
}
.cq-trait-g::after{left:0}
.cq-trait-d::after{right:0}

.cq-bandeau{
  flex-shrink:0;
  background:var(--cq-vert);
  padding:calc(19 * var(--cq-u)) calc(74 * var(--cq-u));
  clip-path:polygon(calc(42 * var(--cq-u)) 0, 100% 0, calc(100% - 42 * var(--cq-u)) 100%, 0 100%,
                    0 50%, calc(42 * var(--cq-u)) 0);
  border:calc(3 * var(--cq-u)) solid var(--cq-or);
}
/* Le clip-path emporte la bordure : on la recrée par un liseré interne */
.cq-bandeau{
  clip-path:polygon(6% 0%, 94% 0%, 100% 50%, 94% 100%, 6% 100%, 0% 50%);
  border:0;
  box-shadow:inset 0 0 0 calc(3 * var(--cq-u)) var(--cq-or-clair);
}
.cq-bandeau span{
  display:block;
  font-size:calc(62 * var(--cq-u));
  font-weight:800;line-height:1;
  letter-spacing:calc(2.5 * var(--cq-u));
  color:#fff;text-transform:uppercase;
  white-space:nowrap;
}

/* ============================================================
   CADRE DE CONTENU
   ============================================================ */
.cq-cadre{
  /* Marges latérales réduites : ~40 caractères de plus par ligne */
  margin:0 calc(50 * var(--cq-u));
  border:calc(2.5 * var(--cq-u)) solid var(--cq-vert);
  border-radius:calc(18 * var(--cq-u));
  background:rgba(255,255,255,.82);
  padding:calc(36 * var(--cq-u)) calc(38 * var(--cq-u));
  min-height:calc(895 * var(--cq-u));
}
.cq-corps{
  font-size:calc(26.5 * var(--cq-u));
  line-height:1.72;
  text-align:justify;
  hyphens:auto;
  overflow-wrap:break-word;
}

/* ------------------------------------------------------------
   Densité progressive selon la longueur réelle du texte.

   L'ancien réglage se fondait sur le NOMBRE DE PARAGRAPHES : trois
   paragraphes de dix lignes débordaient alors que six paragraphes
   d'une ligne tenaient largement. C'est le nombre de caractères qui
   compte, pas le nombre de blocs.
   ------------------------------------------------------------ */
.cq-corps-d1{font-size:calc(24 * var(--cq-u));line-height:1.62}
.cq-corps-d2{font-size:calc(21.5 * var(--cq-u));line-height:1.54}
.cq-corps-d3{font-size:calc(19.5 * var(--cq-u));line-height:1.46}
.cq-corps-d1 p{margin-bottom:calc(20 * var(--cq-u))}
.cq-corps-d2 p{margin-bottom:calc(16 * var(--cq-u))}
.cq-corps-d3 p{margin-bottom:calc(13 * var(--cq-u))}

/* Compatibilité avec l'ancienne classe */
.cq-corps-dense{font-size:calc(23.5 * var(--cq-u));line-height:1.62}
.cq-corps p{margin:0 0 calc(26 * var(--cq-u))}
.cq-corps p:last-of-type{margin-bottom:0}

.cq-ref{
  font-size:calc(20 * var(--cq-u))!important;
  color:#5B6661;text-align:left;font-style:italic;
  margin-bottom:calc(20 * var(--cq-u))!important;
}

/* Mise en valeur : **texte** dans la saisie */
.cq-fort{color:var(--cq-vert-clair);font-weight:700}

/* Ornement de séparation */
.cq-ornement{
  display:flex;align-items:center;justify-content:center;
  gap:calc(9 * var(--cq-u));
  margin:calc(34 * var(--cq-u)) auto calc(24 * var(--cq-u));
  width:70%;
}
.cq-orn-trait{flex:1;height:calc(1.6 * var(--cq-u));background:var(--cq-or);opacity:.75}
.cq-orn-losange{
  width:calc(9 * var(--cq-u));height:calc(9 * var(--cq-u));
  background:var(--cq-or);transform:rotate(45deg);
}
.cq-orn-grand{width:calc(14 * var(--cq-u));height:calc(14 * var(--cq-u))}

.cq-mention{
  text-align:center!important;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:calc(25 * var(--cq-u))!important;
  color:var(--cq-vert);
  margin:0 0 calc(28 * var(--cq-u))!important;
}

.cq-signature{text-align:center;line-height:1.42}
.cq-sign-titre{
  margin:0!important;font-weight:700;color:var(--cq-vert);
  font-size:calc(27 * var(--cq-u))!important;
}
.cq-sign-nom{
  margin:0!important;font-weight:700;
  font-size:calc(29 * var(--cq-u))!important;color:var(--cq-encre);
}
.cq-sign-fonction{
  margin:calc(3 * var(--cq-u)) 0 0!important;
  font-size:calc(21 * var(--cq-u))!important;color:#3A4A43;
}

/* ============================================================
   PIED : VAGUE ET CONTACTS
   ============================================================ */
/* Le pied occupait 250 unités : la vague montait si haut qu'elle
   recouvrait les dernières lignes d'un texte un peu long. Ramené à
   185, il garde son allure et rend 65 unités au contenu — soit deux
   à trois lignes de texte. */
.cq-pied{
  position:absolute;left:0;right:0;bottom:0;
  height:calc(185 * var(--cq-u));
}
.cq-vague{
  position:absolute;left:0;right:0;bottom:0;
  width:100%;height:calc(185 * var(--cq-u));display:block;
}
.cq-fleuron{
  position:absolute;left:50%;bottom:calc(84 * var(--cq-u));
  transform:translateX(-50%) scale(calc(1.25 * (var(--cq-u) / 1px)));
  transform-origin:center;z-index:2;
}
.cq-contacts{
  position:absolute;left:0;right:0;bottom:calc(22 * var(--cq-u));
  display:flex;align-items:center;justify-content:space-around;
  gap:calc(16 * var(--cq-u));
  padding:0 calc(42 * var(--cq-u));
  color:#fff;font-size:calc(19 * var(--cq-u));
  z-index:2;
}
.cq-contact{display:inline-flex;align-items:center;gap:calc(8 * var(--cq-u));white-space:nowrap}
.cq-c-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:calc(26 * var(--cq-u));height:calc(26 * var(--cq-u));
  border-radius:50%;border:calc(1.5 * var(--cq-u)) solid rgba(255,255,255,.85);
  color:#fff;flex-shrink:0;
}

/* ============================================================
   APERÇU À L'ÉCRAN
   L'affiche fait 1024 px de large : on la réduit pour qu'elle
   tienne dans la fenêtre, sans jamais changer sa mise en page.
   ============================================================ */
.cq-scene{
  display:flex;justify-content:center;
  padding:calc(10px) 0 30px;
}
.cq-scene .cq-affiche{--cq-u:0.72px}
@media(max-width:1100px){.cq-scene .cq-affiche{--cq-u:0.60px}}
@media(max-width:860px) {.cq-scene .cq-affiche{--cq-u:0.46px}}
@media(max-width:620px) {.cq-scene .cq-affiche{--cq-u:0.34px}}
@media(max-width:460px) {.cq-scene .cq-affiche{--cq-u:0.26px}}

/* ============================================================
   IMPRESSION — l'affiche seule, pleine page, rien d'autre
   ============================================================ */
@media print{
  @page{size:A4 portrait;margin:0}
  body{background:#fff!important;margin:0}
  body *{visibility:hidden!important}
  .cq-scene,.cq-scene *,.cq-affiche,.cq-affiche *{visibility:visible!important}
  .cq-scene{position:absolute;top:0;left:0;width:100%;padding:0;display:block}
  .cq-affiche{
    --cq-u:0.7280px;          /* 1024 u → 210 mm de large */
    margin:0 auto;box-shadow:none;
  }
  .sans-impression,.barre-actions{display:none!important}
}