/* Les 30 rencontres (20/10/2026) : l'arcade de la serre du Château Sénéjac, reprise de la proposition que Nadège « adore » (version 6, 15/10).
 * Chaque jour est une arche : fermée (la porte vitrée et son heure), du jour (entrouverte, la lumière sur le seuil), passée (ouverte).
 * Les couleurs de pierre et d'or vivent sous .renc, la page des rencontres seule ; le reste suit site.css. */
.renc{--stone:#efe6dc;--stone-ink:#8b7a6a;--pierre:#f9f4ec;--pierre-ombre:#e9dccb;--joint:#d3c1aa;--violet:#5d4a9c;--violet-soft:#ebe6f7;
  --or:#b8884a;--or-doux:#d9c29a;--pierre-clair:#fdfaf3;--ombre:rgba(84,58,30,.24);--lueur:rgba(255,255,255,.66);--chaud:#ffc979;--chaud-clair:#fff1d6;--chaud-coeur:#fffbf1;--halo:rgba(236,168,74,.46)}
/* une arche est un lien : rien de souligné, la couleur de l'encre */
.arcade > [role=listitem]{min-width:0}
.arcade .arch{display:block;width:100%;text-decoration:none}
.arch.closed{cursor:default}
@property --ring{syntax:"<color>";inherits:true;initial-value:transparent}
.arcade{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 0;padding:26px 14px 18px;border-radius:22px;background:
  radial-gradient(42% 60% at 12% 78%,color-mix(in srgb,var(--pierre-ombre) 40%,transparent),transparent 72%),
  radial-gradient(38% 55% at 88% 22%,color-mix(in srgb,var(--pierre-ombre) 32%,transparent),transparent 72%),
  radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--pierre-clair) 60%,transparent),transparent 65%),
  var(--stone);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pierre-clair) 80%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--joint) 45%,transparent)}
@media (max-width:760px){.arcade{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:480px){.arcade{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 0;padding:22px 8px 14px}}
.arch{--pier:10px;--top:8px;--sill:13px;--spring:calc((100cqw - 2 * var(--pier)) / 2);--ring:color-mix(in srgb,var(--or) 55%,var(--joint));container-type:inline-size;position:relative;aspect-ratio:3/4.4;max-width:100%;border:0;padding:0;cursor:pointer;color:var(--ink);font:inherit;text-align:center;background:
  repeating-linear-gradient(180deg,transparent 0 23px,color-mix(in srgb,var(--joint) 20%,transparent) 23px 24px),
  linear-gradient(180deg,var(--pierre-clair),var(--pierre) 46%,color-mix(in srgb,var(--pierre) 78%,var(--pierre-ombre)))}
@media (max-width:760px){.arch{aspect-ratio:3/5.3}}
@media (max-width:480px){.arch{--pier:7px;--sill:11px;aspect-ratio:3/5.1}}
/* l'imposte : un bandeau qui court d'une baie à l'autre à la naissance des cintres */
.arch::before{content:"";position:absolute;left:0;right:0;top:calc(var(--top) + var(--spring) - 3px);height:6px;background:linear-gradient(180deg,var(--pierre-clair),var(--pierre-ombre));border-block:1px solid var(--joint)}
/* le seuil : une marche continue sous toute la rangée, et l'ombre douce qu'elle porte */
.arch::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sill);background:linear-gradient(180deg,var(--pierre-clair),var(--pierre-ombre) 40%);border-top:1px solid var(--joint);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--joint) 55%,transparent),0 7px 10px -6px var(--ombre)}
.arch .frame{--line:color-mix(in srgb,var(--teal) 30%,transparent);position:absolute;z-index:0;top:var(--top);left:var(--pier);right:var(--pier);bottom:var(--sill);border-radius:999px 999px 0 0;border:1.5px solid var(--joint);border-bottom:0;box-shadow:inset 0 12px 18px -14px var(--ombre),0 0 0 3px var(--pierre),0 0 0 4px var(--ring);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:10px 6px 10px;gap:4px;transition:--ring .35s ease,filter .35s ease}
/* la clé de voûte, cerclée d'or */
.arch .frame > .cle{position:absolute;z-index:2;top:-10px;left:50%;width:18px;height:14px;transform:translateX(-50%);overflow:visible}
.cle path{fill:var(--pierre-clair);stroke:var(--ring);stroke-width:1;stroke-linejoin:round;transition:stroke .35s ease}
.arch .frame > *{position:relative;z-index:1}
.arch:hover{--ring:var(--or)}
.arch:hover .frame{filter:brightness(1.025)}
.arch:hover .m{transform:translateY(-1px)}
.arch:focus-visible{outline:none}
.arch:focus-visible .frame{outline:2px solid var(--teal);outline-offset:-7px}
.arch[aria-pressed="true"] .frame{outline:1.5px solid var(--ink);outline-offset:-7px}
.arch[aria-pressed="true"]::after{background:color-mix(in srgb,var(--ink) 82%,var(--pierre));border-top-color:var(--or)}
.arch .n{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--display);font-size:clamp(22px,3vw,31px);font-weight:500;line-height:1;font-optical-sizing:none;font-variation-settings:"opsz" 48;font-variant-numeric:lining-nums;color:var(--ink)}
.arch .n::after{content:"";width:14px;height:1px;background:var(--ring)}
.arch .d{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.arch .t{font-size:12px;line-height:1.2;font-weight:600;min-height:2.4em}
@media (max-width:760px){.arch .d{font-size:10px;letter-spacing:.02em}.arch .t{font-size:11.5px}.arch .frame{padding:8px 4px 8px;gap:3px}}
/* les médaillons : le visage de l'exposant et son binôme, ou l'icône du petit plus */
.arch .duo,.medaillons .duo,.duo-detail .duo{display:flex;justify-content:center}
.arch .duo{margin-bottom:3px}
.m{--m:clamp(25px,23cqw,40px);position:relative;flex:none;width:var(--m);height:var(--m);border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--paper);border:1px solid var(--or);box-shadow:0 0 0 1.5px var(--paper),0 3px 7px -3px var(--ombre);transition:transform .35s ease}
.m:first-child{z-index:1}
.m + .m{margin-left:calc(var(--m) * -.24)}
.m img{width:100%;height:100%;object-fit:cover;display:block}
.m.q{background:radial-gradient(circle at 35% 30%,var(--pierre-clair),var(--pierre) 75%);font-family:var(--display);font-style:italic;font-weight:500;font-size:calc(var(--m) * .62);line-height:1;color:var(--or)}
.m.ic{color:var(--k);background:radial-gradient(circle at 35% 30%,var(--paper),color-mix(in srgb,var(--ks) 70%,var(--paper)))}
.m.ic svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.duo-detail{display:flex;align-items:center;gap:12px}
.duo-detail .m{--m:46px}
/* à venir : la porte vitrée fermée, ses deux vantaux, l'éventail du tympan, un reflet sur le verre, la serrure qui dit l'heure */
.arch.closed .frame{color:var(--muted);background:
  repeating-conic-gradient(from -90deg at 50% 100%,transparent 0 29deg,var(--line) 29deg 30deg) top / 100% var(--spring) no-repeat,
  linear-gradient(var(--line),var(--line)) 0 var(--spring) / 100% 1.5px no-repeat,
  linear-gradient(90deg,transparent calc(50% - .75px),var(--line) calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px)) 0 var(--spring) / 100% 100% no-repeat,
  linear-gradient(118deg,transparent 28%,var(--lueur) 36%,transparent 46%),
  linear-gradient(180deg,var(--teal-soft),var(--paper) 92%)}
.arch.closed .frame::after{content:"8 h";order:-1;position:relative;z-index:1;margin-bottom:2px;text-shadow:none;font-size:10px;font-weight:800;letter-spacing:.04em;line-height:1;padding:4px 7px;border-radius:999px;background:var(--paper);color:var(--teal-deep);border:1px solid var(--ring)}
.arch.closed .n{color:color-mix(in srgb,var(--teal) 70%,var(--ink))}
.arch.closed .frame > *{text-shadow:0 0 3px var(--paper),0 0 3px var(--paper),0 0 2px var(--paper)}
/* passée : les vantaux repliés contre les pieds droits, l'intérieur éclairé dans la couleur du jour */
.arch.open{--ring:var(--or)}
.arch.open .frame{--line:color-mix(in srgb,var(--k) 20%,transparent);border-color:color-mix(in srgb,var(--k) 62%,var(--joint));background:
  repeating-conic-gradient(from -90deg at 50% 100%,transparent 0 29deg,var(--line) 29deg 30deg) top / 100% var(--spring) no-repeat,
  linear-gradient(90deg,var(--paper) 0 7%,var(--line) 7% calc(7% + 1.5px),transparent calc(7% + 1.5px) calc(93% - 1.5px),var(--line) calc(93% - 1.5px) 93%,var(--paper) 93%) 0 var(--spring) / 100% 100% no-repeat,
  radial-gradient(75% 55% at 50% 80%,var(--lueur),transparent 75%),
  linear-gradient(180deg,color-mix(in srgb,var(--ks) 82%,var(--paper)),var(--ks))}
.arch.open .n{color:color-mix(in srgb,var(--k) 78%,var(--ink))}
/* du jour : la porte entrouverte, une lumière chaude qui sort et se pose sur le seuil, son nom au-dessus de la clé */
.arch.today .frame{border-color:var(--or);background:
  repeating-conic-gradient(from -90deg at 50% 100%,transparent 0 29deg,color-mix(in srgb,var(--or) 26%,transparent) 29deg 30deg) top / 100% var(--spring) no-repeat,
  linear-gradient(var(--or-doux),var(--or-doux)) 29% var(--spring) / 1px 100% no-repeat,
  linear-gradient(var(--or-doux),var(--or-doux)) 71% var(--spring) / 1px 100% no-repeat,
  linear-gradient(90deg,var(--paper),color-mix(in srgb,var(--paper) 68%,var(--pierre-ombre))) 0 var(--spring) / 29% 100% no-repeat,
  linear-gradient(270deg,var(--paper),color-mix(in srgb,var(--paper) 68%,var(--pierre-ombre))) 100% var(--spring) / 29% 100% no-repeat,
  radial-gradient(20% 62% at 50% 100%,var(--chaud-coeur),transparent 85%),
  radial-gradient(60% 78% at 50% 100%,var(--chaud),transparent 80%),
  linear-gradient(180deg,var(--chaud-clair),color-mix(in srgb,var(--chaud) 45%,var(--chaud-clair)));
  box-shadow:inset 0 12px 18px -14px var(--ombre),0 0 0 3px var(--pierre),0 0 0 4px var(--ring),0 0 34px 10px var(--halo)}
.arch.today::after{background:radial-gradient(45% 160% at 50% 0%,var(--halo),transparent 75%),linear-gradient(180deg,var(--pierre-clair),var(--pierre-ombre) 40%)}
.arch.today .frame::after{content:"aujourd'hui";position:absolute;z-index:3;top:-23px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:4px 9px;border-radius:999px;background:var(--pink);color:#fff;box-shadow:0 0 0 1px var(--or),0 3px 8px -3px var(--ombre)}
.k-accueil{--k:var(--teal);--ks:var(--teal-soft)} .k-veille{--k:var(--teal-deep);--ks:var(--teal-soft)}
.k-short{--k:var(--pink);--ks:var(--pink-soft)} .k-geste{--k:var(--amber);--ks:var(--amber-soft)}
.k-coulisse{--k:var(--violet);--ks:var(--violet-soft)} .k-cadeau{--k:var(--pink);--ks:var(--amber-soft)}

/* l'en-tête et une rencontre ouverte */
.renc-tete{text-align:center;display:grid;gap:8px;justify-items:center;padding:8px 0 4px}
.renc-tete .lead{max-width:62ch}
.renc-cpt{font-weight:700;color:var(--teal-deep)}
.renc-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:8px}
.renc-pro{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:10px;align-content:start}
.renc-pro .qui{display:flex;gap:12px;align-items:center}
.renc-pro .qui img,.renc-pro .qui .ini{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;background:var(--teal-soft);font-family:var(--display);font-size:26px}
.renc-pro h2{font-size:22px;margin:0}
.renc-pro .spec{color:var(--muted);font-size:14px;margin:0}
.renc-q{font-family:var(--display);font-style:italic;font-size:18px;margin:0}
.renc-rep{white-space:pre-line;margin:0}
.renc-mot{border-left:3px solid var(--or,#b8884a);padding:2px 0 2px 12px;margin:0}
.renc-mot b{display:block;font-family:var(--hand);font-size:22px;color:var(--pink);font-weight:400}
.renc-plus{background:var(--amber-soft);border-radius:16px;padding:14px 18px;white-space:pre-line}
.renc-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.renc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.renc-apercu{background:var(--amber-soft);border:1px dashed var(--amber-line);border-radius:12px;padding:8px 12px;font-size:14px}