/* EUCALEX — fin d'article commune (26/09/2026) : Related articles · Project CTA · Newsletter.
   Utilise les variables et boutons du site (--ink, --teal, --grad, .btn, .btn-amber…). Même rendu dans le lecteur /news/ et sur /news/<id>/. */
.ae{margin-top:34px; display:flex; flex-direction:column; gap:22px}
.ae h2{margin:0; font-family:var(--display); font-weight:400; font-synthesis:none; letter-spacing:0}
.ae p{margin:0}
.ae-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---- 0. Encadré auteur (26/09/2026) ---- */
.ae-au{display:grid; grid-template-columns:112px minmax(0,1fr); gap:20px; align-items:start;
  padding:20px 22px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface-2, #F6F9FA)}
.ae-au-ph{width:112px; height:112px; border-radius:50%; object-fit:cover; display:block; background:var(--surface-2)}
.ae-au-txt{display:flex; flex-direction:column; gap:6px; min-width:0}
.ae-au-k{font-family:var(--ui); font-size:10.8px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal)}
.ae-au-n{font-family:var(--ui); font-size:18px; font-weight:600; line-height:1.25; color:var(--ink)}
.ae-au-b{font-size:14.4px; line-height:1.6; color:var(--muted)}
.ae-au-li{display:inline-flex; align-items:center; gap:7px; margin-top:2px; font-family:var(--ui); font-size:13px; font-weight:600; color:var(--teal); text-decoration:none}
.ae-au-li svg{width:15px; height:15px; fill:currentColor}
.ae-au-li:hover{text-decoration:underline}
@media (max-width:560px){
  .ae-au{grid-template-columns:1fr; gap:14px; text-align:left}
  .ae-au-ph{width:84px; height:84px}
}

/* ---- 1. Related articles ---- */
.ae-rel{padding-top:28px; border-top:1px solid var(--line)}
.ae-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:16px}
.ae-h{font-size:clamp(22px,2.5vw,27px); line-height:1.2; color:var(--ink)}
.ae-all{display:inline-flex; align-items:center; gap:6px; flex:none; padding-bottom:3px; font-family:var(--ui); font-size:13px; font-weight:600; color:var(--teal); text-decoration:none; transition:gap .3s}
.ae-all:hover{gap:10px}
.ae-all svg{width:14px; height:14px}
.ae-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ae-list li{margin:0; padding:0}
.ae-list li::before{content:none; display:none}
.ae-item{display:grid; grid-template-columns:138px minmax(0,1fr) auto; align-items:center; gap:18px; padding:10px 16px 10px 10px;
  border:1px solid var(--line); border-radius:var(--r-m); background:#fff; color:inherit; text-decoration:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s}
.ae-item:hover{transform:translateY(-2px); border-color:rgba(53,179,182,.35); box-shadow:var(--shadow-m)}
.ae-item:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
.ae-thumb{width:138px; height:86px; border-radius:12px; background:var(--surface-2) center/cover no-repeat}
.ae-txt{display:flex; flex-direction:column; gap:5px; min-width:0}
.ae-meta{font-family:var(--ui); font-size:10.8px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal)}
.ae-name{font-family:var(--ui); font-size:15.4px; font-weight:600; line-height:1.36; color:var(--ink)}
.ae-exc{font-size:13.4px; line-height:1.55; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ae-go{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); color:var(--teal); transition:background .3s, color .3s, border-color .3s}
.ae-go svg{width:15px; height:15px}
.ae-item:hover .ae-go{background:var(--teal); border-color:var(--teal); color:#fff}

/* ---- 2. Project CTA ---- */
.ae-cta{position:relative; overflow:hidden; padding:30px 30px 32px; border-radius:var(--r-l);
  background:radial-gradient(120% 140% at 100% 0%,rgba(53,179,182,.34),transparent 55%),linear-gradient(135deg,var(--ink),var(--term-bg) 60%,var(--ink-2));
  box-shadow:var(--shadow-m)}
.ae-cta::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--grad)}
.ae-kick{margin-bottom:8px !important; font-family:var(--ui); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--lime)}
.ae .ae-cta-h{margin-bottom:12px; font-size:clamp(22px,2.7vw,28px); line-height:1.25;
  background:linear-gradient(100deg,#fff 25%,var(--cyan-lt)); -webkit-background-clip:text; background-clip:text; color:transparent}
.ae-cta-p{margin-bottom:22px !important; max-width:62ch; color:rgba(234,245,246,.84); font-size:15.2px; line-height:1.68}
.ae-cta-btn{text-decoration:none}

/* ---- 3. Newsletter ---- */
.ae-nl{position:relative; display:grid; gap:16px; padding:26px 28px 24px; border-radius:var(--r-l);
  background:linear-gradient(180deg,var(--surface),#fff); border:1px solid var(--line)}
.ae-nl-p{margin-top:8px !important; max-width:64ch; color:var(--muted); font-size:14.8px; line-height:1.62}
.ae-nl-form{display:grid; gap:12px; margin:0}
.ae-nl-row{display:flex; gap:10px}
.ae-nl-in{flex:1 1 auto; min-width:0; height:48px; padding:0 20px; border-radius:100px; border:1px solid var(--line-2); background:#fff;
  font-family:var(--ui); font-size:14.5px; font-weight:500; color:var(--ink); transition:border-color .25s, box-shadow .25s}
.ae-nl-in::placeholder{color:var(--soft); opacity:1}
.ae-nl-in:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(27,127,166,.14)}
.ae-nl-in[aria-invalid="true"]{border-color:#D0455B; box-shadow:0 0 0 4px rgba(208,69,91,.12)}
.ae-nl-btn{flex:none}
.ae-nl-btn[disabled]{opacity:.7; cursor:progress; transform:none}
.ae-nl-ok{display:flex; align-items:flex-start; gap:10px; font-size:12.8px; line-height:1.55; color:var(--muted); cursor:pointer}
.ae-nl-ok input{flex:none; width:17px; height:17px; margin:1px 0 0; accent-color:var(--teal); cursor:pointer}
.ae-nl-ok a{color:var(--teal); text-decoration:underline; text-underline-offset:2px}
.ae-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none}
.ae-nl-msg{font-family:var(--ui); font-size:13px; line-height:1.5; min-height:0}
.ae-nl-msg:empty{display:none}
.ae-nl-msg.err{color:#A3263A}
.ae-nl-thanks{display:flex; flex-direction:column; gap:4px; padding:14px 18px; border-radius:var(--r-m);
  background:rgba(159,190,63,.12); border:1px solid rgba(159,190,63,.5); color:#3F5510; font-size:14.2px; line-height:1.55; outline:none}
.ae-nl-thanks strong{font-family:var(--ui); color:#2F4209}

@media (max-width:640px){
  .ae{gap:18px}
  .ae-head{flex-wrap:wrap; align-items:baseline}
  .ae-item{grid-template-columns:92px minmax(0,1fr); gap:12px; padding:8px 12px 8px 8px}
  .ae-thumb{width:92px; height:62px; border-radius:10px}
  .ae-exc,.ae-go,.ae-rt{display:none}
  .ae-meta{letter-spacing:.1em}
  .ae-name{font-size:14.6px}
  .ae-cta,.ae-nl{padding:24px 20px}
  .ae-nl-row{flex-direction:column}
  .ae-nl-btn{width:100%}
}
@media print{ .ae-cta,.ae-nl{display:none} }