/* Aller plus loin (lot 4c) : lectures, tableau des couches, premier contact, liste. */

/* « Le seuil » est lumineux jusqu'en bas, là où tombent le titre et le lead : voile plus
   dense que le gabarit (brief 4c §3), en haut pour la nav et derrière le bloc titre. */
.seuil::before{height:34%;background:linear-gradient(180deg, rgba(9,10,32,.72), rgba(9,10,32,0))}
.seuil::after{height:60%;background:linear-gradient(0deg, var(--bg) 4%, rgba(14,18,48,.62) 45%, rgba(14,18,48,0))}
.seuil .page-head::before{inset:-40% -30%;background:radial-gradient(closest-side, rgba(9,10,32,.8), rgba(9,10,32,0))}
.seuil .lead{text-shadow:0 0 12px rgba(9,10,32,1), 0 0 3px rgba(9,10,32,.9)}

.lectures{display:grid;gap:var(--s6)}
.lectures article{display:grid;gap:var(--s3);border-top:1px solid var(--brass-dim);padding-top:var(--s4)}
.lectures p,.contact .intro{color:var(--ink-soft);max-width:65ch;margin:0}

/* Tableau des couches : filets fins, pas de fond (02 §5.3). */
.couches{border-collapse:collapse;width:100%;margin-top:var(--s3);font-size:.95rem}
.couches thead th{font:500 .72rem/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--brass);text-align:left;padding:0 var(--s3) var(--s2)}
.couches tbody tr{border-top:1px solid var(--line)}
.couches tbody th,.couches td{padding:var(--s3);vertical-align:top;text-align:left}
.couches tbody th{font:500 1.3rem/1.25 var(--serif);color:var(--ink);width:26%;padding-left:0}
.couches td{color:var(--ink-soft)}
.couches td:last-child{width:28%}
.tag{display:block;margin-top:var(--s1);font:500 .7rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.couches .col{display:none}

/* Premier contact : le formulaire d'abord, franchement ; l'adresse en dessous, plus petite. */
.contact{display:grid;gap:var(--s4);padding-top:0}
/* Aligné à gauche sur la colonne des lectures ; le formulaire garde une largeur de lecture. */
.contact > :not(h2){max-width:760px}
.contact h2{border-top:1px solid var(--brass-dim);padding-top:var(--s4)}
.formulaire{display:grid;gap:var(--s4);margin-top:var(--s3)}
.champ{display:grid;gap:var(--s2)}
.champ label,.naissance legend,.nouvelles .etiquette{font-size:.78rem;color:var(--ink-soft);letter-spacing:.02em}
.formulaire input,.formulaire textarea,.nouvelles input{width:100%;background:var(--bg-2);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;font:300 1rem/1.5 var(--sans)}
.formulaire input:focus,.formulaire textarea:focus,.nouvelles input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.formulaire [aria-invalid="true"]{border-color:#C98A7A}
.champ .aide{font-size:.75rem;line-height:1.4;color:var(--ink-dim)}
.formulaire textarea{resize:vertical;min-height:10em;padding-right:60px}
.naissance{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr 2fr;gap:var(--s3)}
.naissance legend{padding:0;margin-bottom:var(--s2)}
.naissance .champ{align-content:start}
.formulaire .btn{justify-self:start;border:0;cursor:pointer}
/* Lot 21 : pendant l'envoi, le bouton se voit désactivé (avant, rien ne changeait). */
form button[type=submit]:disabled{opacity:.55;cursor:progress}

/* Micro de dictée : rond, trait fin, posé dans le coin du champ (02 §5.5). */
.dictee{position:relative}
.micro{position:absolute;right:10px;bottom:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--brass-dim);
  background:var(--bg-deep);color:var(--brass);display:grid;place-items:center;cursor:pointer;padding:0}
.micro[hidden]{display:none}
.micro svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.micro:hover{border-color:var(--brass)}
.micro[aria-pressed="true"]{border-color:var(--brass-hi);color:var(--brass-hi);box-shadow:0 0 0 4px rgba(194,161,90,.18)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Piège à robots : hors écran plutôt que display:none, que certains robots savent lire. */
.piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Retours : cachés, affichés par :target (sans JS, après la redirection du service)
   ou par la classe .visible (avec JS). */
.retour{display:none;margin:0;padding:var(--s3) 0 0;border-top:1px solid var(--brass-dim);color:var(--ink);max-width:65ch}
.retour.erreur{border-top-color:#C98A7A}
.retour:target,.retour.visible{display:block}
.retour:focus{outline:none}
/* Après le bouton d'un lien reçu par mail (confirmée, désinscrite) : une suite vers l'accueil (lot 6). */
.retour-suite{display:none;margin:0}
#nouvelles-confirmee:target ~ .retour-suite,#nouvelles-desinscrite:target ~ .retour-suite{display:block}

/* La phrase de Ben introduit l'adresse, posée en dessous et plus petite (arbitrages 4c §3). */
.direct{font-size:.95rem;color:var(--ink-soft);max-width:65ch;margin:0;display:grid;gap:var(--s2);justify-items:start}
.direct a{font-size:.85rem;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.direct a:hover,.direct a:focus-visible{color:var(--brass-hi);border-bottom-color:var(--brass)}

/* Liste de diffusion : un libellé, un champ, un bouton. Aucune case, aucune urgence. */
.nouvelles{display:grid;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);scroll-margin-top:90px}
.nouvelles label{display:grid;gap:var(--s3)}
.nouvelles .libelle{font:500 1.35rem/1.3 var(--serif);color:var(--ink)}
.nouvelles .ligne{display:flex;gap:var(--s4);align-items:center}
.nouvelles .ligne input{flex:1;min-width:0}
.nouvelles .calm{background:none;border:0;border-bottom:1px solid var(--brass);border-radius:0;padding:0 0 2px;font:300 .92rem/1.4 var(--sans);cursor:pointer;flex:none}
.contact :target,.contact .retour{scroll-margin-top:110px}

@media (max-width:720px){
  .couches thead{display:none}
  .couches,.couches tbody,.couches tr,.couches th,.couches td{display:block;width:auto}
  .couches tbody tr{padding:var(--s3) 0}
  .couches tbody th,.couches td,.couches td:last-child{padding:var(--s1) 0;width:auto}
  .couches .col{display:block;font:500 .68rem/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--brass-dim);margin-top:var(--s2)}
  .naissance{grid-template-columns:1fr 1fr}
  .naissance .lieu{grid-column:1 / -1}
}
@media (max-width:640px){
  .seuil::after{height:78%}
}