/* L'Écho de Lamarre — site public */
:root{
  --fond:#fbf8f1; --fond-2:#f3eee2; --carte:#ffffff;
  --encre:#13241a; --texte:#2c3a31; --doux:#5f6d64; --trait:#e4dccb;
  --vert:#1b7a3a; --vert-fonce:#0f4d24; --jaune:#f2b705; --rouge:#c8102e; --orange:#e0661b;
  --rayon:14px; --ombre:0 1px 2px rgba(19,36,26,.06),0 8px 24px rgba(19,36,26,.06);
  --titre:"Bricolage Grotesque",system-ui,sans-serif; --corps:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--texte);font:16px/1.6 var(--corps);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--vert-fonce)}
h1,h2,h3,h4{font-family:var(--titre);color:var(--encre);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700}
h3{font-size:1.2rem;font-weight:650}
p{margin:0 0 1em}
.conteneur{width:min(1160px,100% - 32px);margin-inline:auto}
.ico{flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Madras : clin d'œil au tissu du quadrille */
.madras{height:8px;background:
  repeating-linear-gradient(90deg,var(--rouge) 0 22px,var(--jaune) 22px 30px,var(--rouge) 30px 52px,var(--vert) 52px 58px,var(--jaune) 58px 70px,var(--orange) 70px 78px),
  var(--rouge);}

/* En-tête */
.entete{position:sticky;top:0;z-index:20;background:rgba(251,248,241,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.entete .conteneur{display:flex;align-items:center;gap:20px;min-height:72px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre)}
.marque img{width:48px;height:48px;border-radius:50%}
.marque strong{font-family:var(--titre);font-size:1.15rem;display:block;line-height:1.1}
.marque span{font-size:.78rem;color:var(--doux)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--texte);font-weight:500;font-size:.95rem}
.nav a:hover,.nav a.actif{background:var(--fond-2);color:var(--encre)}
.nav .btn{margin-left:8px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--trait);border-radius:8px;padding:8px;color:var(--encre);cursor:pointer}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;border:1px solid var(--trait);
  background:var(--carte);color:var(--encre);font:500 .95rem var(--corps);text-decoration:none;cursor:pointer;transition:.15s}
.btn:hover{border-color:#cfc4ad;background:#fffdf8}
.btn-primaire{background:var(--encre);border-color:var(--encre);color:#fff}
.btn-primaire:hover{background:#24392b;border-color:#24392b;color:#fff}
.btn-grand{padding:14px 22px;font-size:1rem}

/* Héros */
.heros{padding:64px 0 56px;position:relative;overflow:hidden}
.heros .conteneur{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.surtitre{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--vert-fonce);
  background:#e6f1e8;padding:6px 12px;border-radius:999px;margin-bottom:18px}
.heros h1 em{font-style:normal;color:var(--vert)}
.heros p.intro{font-size:1.15rem;color:var(--doux);max-width:56ch}
.heros .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.medaillon{position:relative;justify-self:center;width:min(340px,80vw);aspect-ratio:1}
.medaillon::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  background:conic-gradient(from 20deg,var(--rouge),var(--jaune),var(--vert),var(--orange),var(--rouge));opacity:.9}
.medaillon img{position:relative;width:100%;height:100%;border-radius:50%;border:8px solid var(--fond);background:#fff}
.chiffres{display:flex;gap:28px;margin-top:32px;flex-wrap:wrap}
.chiffres div{font-size:.85rem;color:var(--doux)}
.chiffres strong{display:block;font-family:var(--titre);font-size:1.8rem;color:var(--encre)}

/* Sections */
.section{padding:64px 0}
.section-alt{background:var(--fond-2)}
.section-tete{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.section-tete p{color:var(--doux);margin:0;max-width:60ch}
.lien-fleche{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none}

/* Cartes activités */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.carte-act{--c:var(--vert);position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--rayon);text-decoration:none;color:inherit;transition:.18s;overflow:hidden}
.carte-act::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c);transform:scaleX(.18);transform-origin:left;transition:.25s}
.carte-act:hover{box-shadow:var(--ombre);transform:translateY(-2px)}
.carte-act:hover::after{transform:scaleX(1)}
.pastille{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:var(--c);
  background:color-mix(in srgb,var(--c) 12%,#fff)}
.carte-act h3{margin:4px 0 0}
.carte-act p{margin:0;color:var(--doux);font-size:.95rem}
.carte-act .horaire{margin-top:auto;padding-top:10px;display:flex;gap:8px;align-items:flex-start;font-size:.88rem;color:var(--texte);border-top:1px dashed var(--trait)}

/* Agenda */
.liste-evts{display:grid;gap:12px}
.evt{display:flex;gap:18px;align-items:center;padding:16px 18px;background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);text-decoration:none;color:inherit}
.evt:hover{box-shadow:var(--ombre)}
.date-bloc{flex:none;width:64px;text-align:center;border-radius:10px;background:var(--encre);color:#fff;padding:8px 0;line-height:1.1}
.date-bloc b{display:block;font-family:var(--titre);font-size:1.6rem}
.date-bloc span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.evt h3{margin:0 0 2px;font-size:1.08rem}
.evt .meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--doux);font-size:.88rem}
.evt .meta span{display:inline-flex;align-items:center;gap:5px}
.etiquette{display:inline-block;font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:999px;color:var(--c,var(--vert));background:color-mix(in srgb,var(--c,var(--vert)) 12%,#fff)}

/* Actualités */
.carte-actu{display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);overflow:hidden;text-decoration:none;color:inherit}
.carte-actu:hover{box-shadow:var(--ombre)}
.carte-actu .vignette{aspect-ratio:16/10;background:var(--fond-2) center/cover}
.carte-actu .vignette.vide{display:grid;place-items:center}
.carte-actu .vignette.vide img{width:72px;opacity:.5}
.carte-actu div.corps{padding:18px}
.carte-actu time{font-size:.82rem;color:var(--doux)}
.carte-actu h3{margin:6px 0}
.carte-actu p{color:var(--doux);font-size:.93rem;margin:0}

/* Bandeau rejoindre */
.rejoindre{background:var(--encre);color:#e8efe9;border-radius:22px;padding:44px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;overflow:hidden}
.rejoindre h2{color:#fff}
.rejoindre p{margin:0;color:#b9c7bd}
.rejoindre .btn-primaire{background:var(--jaune);border-color:var(--jaune);color:var(--encre)}
.rejoindre .btn-primaire:hover{background:#ffc928}

/* Pages intérieures */
.page-tete{padding:48px 0 28px;border-bottom:1px solid var(--trait);background:linear-gradient(180deg,var(--fond-2),var(--fond))}
.page-tete p{color:var(--doux);font-size:1.08rem;max-width:62ch;margin:0}
.fil{font-size:.85rem;color:var(--doux);margin-bottom:14px}
.fil a{color:var(--doux)}
.contenu{padding:40px 0 64px}
.colonnes{display:grid;grid-template-columns:1fr 340px;gap:36px;align-items:start}
.prose{font-size:1.04rem;max-width:70ch}
.prose p{margin-bottom:1.1em}
.encart{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:22px;position:sticky;top:96px}
.encart h3{font-size:1rem;margin-bottom:14px}
.ligne-info{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--fond-2);font-size:.95rem}
.ligne-info:first-of-type{border-top:0}
.ligne-info .ico{color:var(--c,var(--vert));margin-top:2px}
.ligne-info small{display:block;color:var(--doux);font-size:.78rem}
.encart .btn{width:100%;justify-content:center;margin-top:10px}
.illustration{border-radius:var(--rayon);margin-bottom:24px;aspect-ratio:16/9;object-fit:cover;width:100%}
.titre-act{display:flex;gap:16px;align-items:center}
.titre-act .pastille{width:58px;height:58px;border-radius:16px}

/* Formulaires */
.formulaire{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:28px}
fieldset{border:0;padding:0;margin:0 0 26px}
legend{font-family:var(--titre);font-weight:650;font-size:1.15rem;color:var(--encre);margin-bottom:14px;padding:0}
.champs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ.large{grid-column:1/-1}
label{font-weight:500;font-size:.92rem;color:var(--encre)}
label .opt{font-weight:400;color:var(--doux)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea{
  width:100%;padding:11px 13px;border:1px solid #d9d0bd;border-radius:10px;background:#fff;font:inherit;color:var(--encre)}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--vert) 35%,transparent);border-color:var(--vert)}
textarea{min-height:130px;resize:vertical}
.erreur-champ{color:var(--rouge);font-size:.85rem}
.champ.invalide input,.champ.invalide select,.champ.invalide textarea{border-color:var(--rouge)}
.choix-act{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.choix-act label{--c:var(--vert);display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid #d9d0bd;border-radius:12px;cursor:pointer;font-weight:500}
.choix-act label:has(input:checked){border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,#fff);box-shadow:inset 0 0 0 1px var(--c)}
.choix-act input{accent-color:var(--c);width:18px;height:18px}
.choix-act small{display:block;font-weight:400;color:var(--doux);font-size:.8rem}
.case{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.93rem;color:var(--texte);margin-bottom:10px}
.case input{margin-top:4px;width:17px;height:17px;accent-color:var(--vert)}
.radio-ligne{display:flex;gap:18px;flex-wrap:wrap}
.radio-ligne label{display:flex;gap:6px;align-items:center;font-weight:400}
.bloc-mineur{display:none;background:#fff8e4;border:1px solid #f1dfa6;border-radius:12px;padding:18px;margin-top:6px}
.bloc-mineur.visible{display:block}
.note{font-size:.85rem;color:var(--doux)}
.pot{position:absolute;left:-5000px}
.alerte{padding:14px 16px;border-radius:12px;margin-bottom:18px;font-size:.95rem}
.alerte.succes{background:#e6f1e8;color:#0f4d24;border:1px solid #c6e0cc}
.alerte.erreur{background:#fdecee;color:#8a0f22;border:1px solid #f5c8cf}
.alerte.info{background:#eef4fb;color:#1d4f86;border:1px solid #cfe0f3}

/* Pied de page */
.pied{background:#0f1d15;color:#aebcb2;padding:48px 0 24px;margin-top:0}
.pied .conteneur{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.pied h4{color:#fff;font-size:.95rem;margin-bottom:12px}
.pied a{color:#d7e2da;text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:.93rem}
.pied .bas{grid-column:1/-1;border-top:1px solid #23362a;padding-top:18px;margin-top:8px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem}
.pied .marque{color:#fff}
.pied .marque span{color:#aebcb2}

.vide{padding:36px;text-align:center;color:var(--doux);border:1px dashed var(--trait);border-radius:var(--rayon);background:var(--carte)}

@media (max-width:900px){
  .heros .conteneur,.colonnes,.rejoindre,.pied .conteneur{grid-template-columns:1fr}
  .medaillon{width:min(240px,70vw);order:-1}
  .encart{position:static}
  .burger{display:inline-flex}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--fond);border-bottom:1px solid var(--trait);padding:12px 16px 18px}
  .nav.ouvert{display:flex}
  .nav .btn{margin:8px 0 0;justify-content:center}
  .rejoindre{padding:30px}
}
@media (max-width:600px){
  .champs{grid-template-columns:1fr}
  .heros{padding:36px 0}
  .section{padding:44px 0}
  .formulaire{padding:20px}
  .evt{align-items:flex-start}
}
.nav a.btn-primaire,.nav a.btn-primaire:hover{color:#fff;background:var(--encre)}