/* Face publique. Reprend les jetons de l'application (systeme « Foyer »)
   mais sa propre mise en page : un visiteur n'a pas de barre laterale, il
   lit une page. */
.site-public {
  background:var(--bg); color:var(--text); font-family:var(--ui);
  margin:0; line-height:1.65;
}
.bandeau-brouillon {
  background:#FBF0DC; color:#96631A; font-size:13px; padding:9px 22px;
  border-bottom:1px solid #EEDFC0;
}

.entete-pub {
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:16px 30px; border-bottom:1px solid var(--border);
  background:var(--panel); position:sticky; top:0; z-index:30;
}
.marque-pub { display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.marque-pub img { width:40px; height:auto; }
.marque-pub span { display:flex; flex-direction:column; line-height:1.25; }
.marque-pub b { font-family:var(--display); font-size:19px; font-weight:500; }
.marque-pub i { font-style:normal; font-size:12px; color:var(--muted); }
.menu-pub { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.menu-pub a {
  padding:9px 13px; border-radius:10px; text-decoration:none;
  color:var(--muted); font-size:14px; font-weight:500;
}
.menu-pub a:hover { color:var(--text); background:var(--soft); }
.menu-pub .btn-pub {
  background:var(--primary); color:var(--on-primary); font-weight:600;
}
.menu-pub .btn-pub:hover { background:var(--primary-press); color:var(--on-primary); }

.corps-pub { max-width:1040px; margin:0 auto; padding:0 24px 80px; }
.bande { padding:64px 0 8px; }
.bande + .bande { padding-top:52px; }
.bande h2 {
  font-family:var(--display); font-size:29px; font-weight:500; margin:0 0 14px;
}
.lire-pub { max-width:64ch; }
.lire-pub p { margin:0 0 15px; font-size:16.5px; }

.heros {
  padding:72px 0 46px; display:grid; grid-template-columns:1.25fr .75fr;
  gap:40px; align-items:center;
}
.heros h1 {
  font-family:var(--display); font-size:clamp(34px,5vw,52px); font-weight:500;
  line-height:1.1; margin:0 0 18px; text-wrap:balance;
}
.heros .chapo { font-size:19px; color:var(--muted); max-width:52ch; }
.heros .actions { display:flex; gap:11px; flex-wrap:wrap; margin-top:26px; }
.heros img { width:100%; max-width:260px; margin:0 auto; display:block; }

.piliers { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.pilier {
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:22px 20px;
}
.pilier b { font-family:var(--display); font-size:18px; font-weight:500; display:block; margin-bottom:7px; }
.pilier span { font-size:14.5px; color:var(--muted); line-height:1.6; }

.villes-pub { display:flex; flex-wrap:wrap; gap:9px; }
.ville-pub {
  padding:9px 15px; border:1px solid var(--border); border-radius:99px;
  background:var(--panel); font-size:14.5px;
}
.carte-ville {
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:22px 22px; margin-bottom:14px;
}
.carte-ville h3 { font-family:var(--display); font-size:21px; font-weight:500; margin:0 0 4px; }
.carte-ville .cellules { display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.carte-ville .cel {
  border-left:2px solid var(--primary); padding:2px 0 2px 13px; font-size:14.5px;
}
.carte-ville .cel i { font-style:normal; color:var(--muted); font-size:13px; display:block; }

.appel {
  background:var(--soft); border:1px solid var(--border); border-radius:16px;
  padding:30px 28px; margin-top:44px;
}
.appel h2 { margin-top:0; }

.formulaire-pub { max-width:560px; }
.formulaire-pub .field { margin-bottom:14px; }
.formulaire-pub textarea {
  width:100%; min-height:150px; resize:vertical; font-family:var(--ui);
  font-size:15px; padding:12px 14px; border:1px solid var(--border);
  border-radius:12px; background:var(--panel); color:var(--text);
}
.piege { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.pied-pub { border-top:1px solid var(--border); background:var(--panel); margin-top:40px; }
.pied-inner {
  max-width:1040px; margin:0 auto; padding:26px 24px; display:flex;
  gap:24px; flex-wrap:wrap; align-items:flex-start;
}
.pied-inner > div { display:flex; flex-direction:column; gap:4px; }
.pied-inner b { font-family:var(--display); font-size:17px; font-weight:500; }
.pied-inner span { font-size:13px; color:var(--muted); max-width:44ch; }
.pied-inner nav { margin-left:auto; display:flex; flex-wrap:wrap; gap:16px; }
.pied-inner nav a { font-size:13.5px; color:var(--muted); text-decoration:none; }
.pied-inner nav a:hover { color:var(--primary-press); text-decoration:underline; }

@media (max-width:820px) {
  .heros { grid-template-columns:1fr; padding-top:44px; gap:26px; }
  .heros img { max-width:180px; }
  .entete-pub { padding:14px 18px; gap:14px; }
  .menu-pub { margin-left:0; width:100%; }
  .menu-pub a { padding:8px 11px; font-size:13.5px; }
  .corps-pub { padding:0 18px 60px; }
  .bande { padding-top:44px; }
  .pied-inner nav { margin-left:0; }
}

/* Trombinoscope du Secrétariat National. */
.equipe { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
          gap:18px; margin-top:8px; }
.membre { text-align:center; display:flex; flex-direction:column; gap:3px; }
.membre .portrait {
  width:104px; height:104px; margin:0 auto 8px; border-radius:50%;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:32px;
}
.membre .portrait img { width:100%; height:100%; object-fit:cover; display:block; }
.membre b { font-size:14.5px; font-weight:600; }
.membre span { font-size:12.5px; color:var(--muted); }
@media (max-width:640px) { .membre .portrait { width:88px; height:88px; font-size:26px; } }

/* Mosaïque de photos : carrés réguliers, quelle que soit l'orientation. */
.mosaique { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
            gap:9px; margin-top:20px; }
.tuile { display:block; aspect-ratio:1; border-radius:9px; overflow:hidden;
         background:var(--panel2); }
.tuile img { width:100%; height:100%; object-fit:cover; display:block;
             transition:transform .3s ease; }
.tuile:hover img { transform:scale(1.05); }
@media (max-width:620px) {
  .mosaique { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:7px; }
}

/* La vision du mouvement, dans ses propres mots. */
.citation {
  margin:22px 0 24px; padding:24px 28px; border-left:3px solid var(--primary);
  background:var(--panel); border-radius:0 14px 14px 0;
  font-family:var(--display); font-size:20px; line-height:1.62;
  max-width:60ch;
}
.citation cite { display:block; margin-top:14px; font-style:normal;
  font-family:var(--ui); font-size:14px; color:var(--primary-press);
  font-weight:600; letter-spacing:.02em; }
@media (max-width:620px) { .citation { font-size:17.5px; padding:18px 20px; } }


/* --- Heros : le bloc de faits remplace le logo etire ------------------- */
.heros-faits {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 20px; padding: 26px 28px;
  box-shadow: 0 14px 40px rgba(42, 33, 27, .07);
}
.heros-faits .heros-logo {
  height: 46px; width: auto; display: block; margin-bottom: 22px;
}
.heros-faits dl { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.heros-faits dl > div { display: flex; align-items: baseline; gap: 14px; }
.heros-faits dt {
  font-family: var(--display); font-size: 30px; line-height: 1;
  color: var(--primary); font-variant-numeric: tabular-nums;
  min-width: 68px; text-align: right; flex: none;
}
.heros-faits dd {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.heros-devise {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border);
  font-family: var(--display); font-size: 15px; color: var(--text);
  font-style: italic;
}
@media (max-width: 820px) {
  .heros-faits { padding: 20px; }
  .heros-faits dt { font-size: 25px; min-width: 56px; }
}

/* --- Les deux moities de la devise ---------------------------------- */
.devise-volets {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; margin-top: 20px;
}
.devise-volets .volet {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 24px 26px;
  border-top: 3px solid var(--primary);
}
.devise-volets .volet h3 {
  font-family: var(--display); font-size: 21px; margin: 0 0 10px;
}
.devise-volets .volet p {
  margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--muted);
}
@media (max-width: 780px) {
  .devise-volets { grid-template-columns: 1fr; gap: 16px; }
}

/* --- La base doctrinale, en dix points ------------------------------ */
.base-doctrinale {
  margin: 22px 0 0; padding: 0; list-style: none;
  counter-reset: point;
}
.base-doctrinale li {
  counter-increment: point;
  position: relative; padding: 0 0 0 52px; margin-bottom: 20px;
  font-size: 15px; line-height: 1.8; max-width: 68ch;
}
.base-doctrinale li::before {
  content: counter(point);
  position: absolute; left: 0; top: 1px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border);
  font-family: var(--display); font-size: 16px; color: var(--primary);
}
@media (max-width: 560px) {
  .base-doctrinale li { padding-left: 44px; font-size: 14.5px; }
  .base-doctrinale li::before { width: 30px; height: 30px; font-size: 14px; }
}