/* =====================================================================
   The comments under an article (comments.php), dark design since 2026-10-23.
   One section between the end of the article and the related studies. The blue of the old form lives on as a glow at
   the top; the bottom ends in the colour the related studies begin with (#132744), so there is no seam between them.
   One column. Every comment is a glass card: the round sign of the reader (initials) or the author's photograph in the
   yellow ring with "Author", the name, the date, the words, "Reply". A reply hangs from its comment on a yellow thread
   that comes down from the round sign above to the round sign of the reply.
   The form is the last card and is written like a comment. "Reply" (only with nested comments on) moves it to the end of
   the conversation it answers (WordPress's comment-reply.js); the thread then goes on down to it.
   The notice after sending (.wd-comment-notice, printed by functions.php since 2026-10-06) is drawn here as well.
   Loaded by header.php on the articles and pages that show comments, after the theme's style-en.css.
   ===================================================================== */

.wd-talk{--t-y:#ffc107;--t-text:#d5dce6;--t-muted:#8d9cb0;--t-soft:#a9b8ca;--t-gut:clamp(16px,4vw,64px);--t-line:rgba(255,193,7,.7);
	position:relative;isolation:isolate;margin:0;padding:clamp(64px,6vw,104px) 0 clamp(8px,1vw,16px);
	background:radial-gradient(70% 420px at 14% 0%,rgba(12,106,136,.32) 0%,rgba(12,106,136,0) 72%),radial-gradient(50% 360px at 92% 8%,rgba(143,184,255,.07) 0%,rgba(143,184,255,0) 70%),linear-gradient(180deg,#182f4c 0,#172b45 360px,#132744 100%);
	color:var(--t-text);font-family:Transat,sans-serif;font-weight:300;font-size:16px;line-height:1.5;letter-spacing:0;text-align:left;-webkit-font-smoothing:antialiased}
.wd-talk *,.wd-talk *::before,.wd-talk *::after{box-sizing:border-box}
.wd-talk__in{width:min(780px,100% - 2 * var(--t-gut));margin:0 auto}
.wd-talk ol,.wd-talk li{margin:0;padding:0;list-style:none}
.wd-talk p{margin:0;padding:0}
.wd-talk svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wd-talk a:focus,.wd-talk button:focus{outline:0}
.wd-talk a:focus-visible,.wd-talk button:focus-visible{outline:2px solid var(--t-y);outline-offset:3px}

/* ---------- the head: the number, the title with the yellow line, the name of the article ---------- */
.wd-talk__head{margin:0 0 clamp(28px,3vw,40px)}
.wd-talk .wd-talk__count{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;color:var(--t-soft);font-weight:700;font-size:15px;line-height:1.2;letter-spacing:.01em}
.wd-talk .wd-talk__ico{width:19px;height:19px;color:var(--t-y)}
.wd-talk .wd-talk__title{margin:0;padding:0;border:0;color:#fff;font-family:Transat,sans-serif;font-weight:700;font-size:clamp(28px,1.1vw + 17px,40px);line-height:1.15;letter-spacing:-.005em;text-align:left;text-transform:none;
	text-decoration:underline;text-decoration-color:var(--t-y);text-decoration-thickness:3px;text-underline-offset:.22em}
.wd-talk .wd-talk__sub{margin:16px 0 0;color:#9fb2c8;font-family:gotic,Transat,sans-serif;font-style:italic;font-weight:300;font-size:17px;line-height:1.55;letter-spacing:.02em;text-align:left;text-transform:none}
.wd-talk .wd-talk__empty{display:flex;align-items:center;gap:14px;color:var(--t-soft);font-size:16.5px;line-height:1.5}
.wd-talk .wd-talk__empty .wd-talk__ico{width:22px;height:22px}

/* ---------- the comments ---------- */
.wd-talk__list{display:flex;flex-direction:column;gap:16px}
.wd-talk .wd-c__in{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 16px;align-items:start;margin:0;padding:22px 24px 20px;border-radius:18px;
	background:radial-gradient(80% 90% at 100% 100%,rgba(58,111,134,.22) 0%,rgba(58,111,134,0) 60%),linear-gradient(160deg,rgba(34,49,77,.92) 0%,rgba(27,40,63,.92) 55%,rgba(22,38,59,.92) 100%);
	box-shadow:0 26px 50px -36px rgba(0,0,0,.9)}
/* the thin line of light on the upper left edge, as on the panels of About */
.wd-talk .wd-c__in::before,.wd-talk .wd-respond::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
	background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 55%,rgba(143,184,255,.12));
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* the author's card: a little warmer */
.wd-talk .wd-c--author > .wd-c__in{background:radial-gradient(90% 100% at 0% 0%,rgba(255,193,7,.07) 0%,rgba(255,193,7,0) 60%),linear-gradient(160deg,rgba(38,52,78,.95) 0%,rgba(29,42,64,.95) 55%,rgba(23,38,58,.95) 100%)}
/* one's own comment before it is approved (only its writer sees it) */
.wd-talk .wd-c--pending > .wd-c__in{background:linear-gradient(160deg,rgba(34,49,77,.75) 0%,rgba(27,40,63,.75) 55%,rgba(22,38,59,.75) 100%)}
.wd-talk .wd-c--pending > .wd-c__in::before{background:linear-gradient(160deg,rgba(255,193,7,.5),rgba(255,193,7,.16) 40%,rgba(255,193,7,.06) 70%,rgba(255,193,7,.2))}
/* the round sign: the initials on a quiet colour of the name; the author's photograph in the yellow ring */
.wd-talk .wd-c__ava{grid-column:1;grid-row:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;overflow:hidden;
	background:linear-gradient(150deg,hsl(var(--h,210) 30% 36%),hsl(var(--h,210) 34% 24%));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 8px 18px -10px rgba(0,0,0,.8);
	color:#fff;font-weight:700;font-size:15.5px;line-height:1;letter-spacing:.03em;text-transform:uppercase}
.wd-talk .wd-c__ava img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.wd-talk .wd-c--author > .wd-c__in > .wd-c__ava{box-shadow:0 0 0 2px var(--t-y),0 8px 18px -10px rgba(0,0,0,.8)}
.wd-talk .wd-c__head{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:46px}
.wd-talk .wd-c__name{color:#fff;font-weight:700;font-size:16.5px;line-height:1.3;overflow-wrap:anywhere}
.wd-talk .wd-c__badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:rgba(255,193,7,.12);box-shadow:inset 0 0 0 1px rgba(255,193,7,.45);color:#ffd56a;font-weight:700;font-size:12px;letter-spacing:.03em}
.wd-talk .wd-c__date{color:var(--t-muted);font-size:14px;line-height:1.3;white-space:nowrap}
.wd-talk .wd-c__wait{grid-column:2;justify-self:start;margin:10px 0 2px;padding:6px 12px;border-radius:10px;background:rgba(255,193,7,.08);box-shadow:inset 0 0 0 1px rgba(255,193,7,.3);color:#ffe3a1;font-size:14px;line-height:1.4}
.wd-talk .wd-c__text{grid-column:2;min-width:0}
.wd-talk .wd-c__text p{margin:4px 0 0;color:var(--t-text);font-size:17px;line-height:1.62;overflow-wrap:break-word}
.wd-talk .wd-c__text p + p{margin-top:12px}
.wd-talk .wd-c__text a{color:#ffd56a;text-decoration:underline;text-decoration-color:rgba(255,213,106,.45);text-underline-offset:.18em;overflow-wrap:anywhere}
.wd-talk .wd-c__text a:hover{color:#fff;text-decoration-color:var(--t-y)}
.wd-talk .wd-c__text blockquote{margin:10px 0 0;padding:2px 0 2px 14px;border-left:2px solid rgba(255,255,255,.25);color:var(--t-soft);font-style:italic}
.wd-talk .wd-c__text code{font-size:.92em}
/* "Reply": the arrow is drawn by CSS, because js/main.js rewrites the words of every .comment-reply-link */
.wd-talk .wd-c__reply{grid-column:2;justify-self:start;margin:12px 0 0}
.wd-talk .comment-reply-link{display:inline-flex;align-items:center;gap:7px;color:var(--t-soft);font-weight:700;font-size:14.5px;line-height:1.2;text-decoration:none}
.wd-talk .comment-reply-link::before{content:"";flex:none;width:17px;height:17px;background:currentColor;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.5L4.5 11.5l5 5'/%3E%3Cpath d='M4.5 11.5H14a5.5 5.5 0 0 1 5.5 5.5v1'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.5L4.5 11.5l5 5'/%3E%3Cpath d='M4.5 11.5H14a5.5 5.5 0 0 1 5.5 5.5v1'/%3E%3C/svg%3E") center/contain no-repeat}
.wd-talk .comment-reply-link:hover,.wd-talk .comment-reply-link:focus-visible{color:var(--t-y)}

/* ---------- the replies on the yellow thread ---------- */
.wd-talk .children{display:flex;flex-direction:column;gap:12px;margin:12px 0 0 70px;padding:0;list-style:none}
.wd-talk .children > .wd-c,.wd-talk .wd-talk__list > .wd-respond,.wd-talk .children > .wd-respond{position:relative}
/* the curve into the round sign of each reply (and of the form when it answers someone) */
.wd-talk .children > .wd-c::after,.wd-talk .wd-talk__list > .wd-respond::after,.wd-talk .children > .wd-respond::after{content:"";position:absolute;left:-23px;top:-12px;width:23px;height:58px;
	border-left:2px solid var(--t-line);border-bottom:2px solid var(--t-line);border-bottom-left-radius:14px;pointer-events:none}
/* when more follows on the same conversation, the line goes on past this reply */
.wd-talk .children > .wd-c:not(:last-child)::before,.wd-talk .wd-c:has(+ .wd-respond) > .children > .wd-c:last-child::before{content:"";position:absolute;left:-23px;top:-12px;bottom:-12px;border-left:2px solid var(--t-line);pointer-events:none}

/* ---------- the notice after sending (functions.php): in the manner of the cards ---------- */
.wd-talk .wd-comment-notice{position:relative;margin:28px 0 0;padding:16px 18px 16px 62px;border:0;border-radius:14px;background:rgba(127,214,160,.08);box-shadow:inset 0 0 0 1px rgba(127,214,160,.38);
	color:#d9f3e2;font-size:15.5px;line-height:1.5;text-align:left;scroll-margin-top:110px}
.wd-talk .wd-comment-notice::before{content:"";position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:50%;
	background:#7fd6a0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310261a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/17px no-repeat;color:transparent;font-size:0;line-height:0}
.wd-talk .wd-comment-notice__title{display:block;margin:0 0 2px;color:#fff;font-weight:700;font-size:16.5px;letter-spacing:0}
.wd-talk .wd-comment-notice + .wd-respond{margin-top:12px}

/* ---------- the form: the last card, written like a comment ---------- */
.wd-talk .wd-respond{position:relative;isolation:isolate;margin:28px 0 0;padding:24px 24px 22px;border-radius:18px;
	background:radial-gradient(90% 70% at 100% 100%,rgba(58,111,134,.34) 0%,rgba(58,111,134,0) 62%),linear-gradient(160deg,#22314d 0%,#1b283f 52%,#16263b 100%);
	box-shadow:0 30px 60px -40px rgba(0,0,0,.95)}
/* answering someone: under the conversation, 12px below it (the list itself keeps 16px, the replies 12px between cards) */
.wd-talk .wd-talk__list > .wd-respond{margin:-4px 0 0 70px}
.wd-talk .children > .wd-respond{margin:0 0 0 70px}
.wd-talk .wd-respond__title{display:flex;align-items:center;gap:10px 16px;min-height:46px;margin:0 0 14px;color:#fff;font-weight:700;font-size:16.5px;line-height:1.3}
.wd-talk .wd-respond__you{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:rgba(255,193,7,.1);box-shadow:inset 0 0 0 1.5px rgba(255,193,7,.55);color:var(--t-y)}
.wd-talk .wd-respond__you svg{width:20px;height:20px}
.wd-talk .wd-respond__label{min-width:0}
.wd-talk .wd-respond__label a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,193,7,.6);text-underline-offset:.18em}
.wd-talk #cancel-comment-reply-link{display:inline-flex;align-items:center;gap:6px;flex:none;height:32px;margin-left:auto;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
	color:#fff;font-weight:700;font-size:13.5px;line-height:1;text-decoration:none;transition:background-color .2s ease,color .2s ease}
.wd-talk #cancel-comment-reply-link svg{width:12px;height:12px;stroke-width:2.2}
.wd-talk .wd-cform{position:relative;margin:0}
.wd-talk .wd-cform__logged{margin:0 0 14px;color:var(--t-soft);font-size:14.5px}
.wd-talk .wd-cform__logged a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,193,7,.6);text-underline-offset:.18em}
.wd-talk .wd-cform__field{margin:0}
.wd-talk .wd-cform textarea,.wd-talk .wd-cform input[type=text],.wd-talk .wd-cform input[type=email]{display:block;width:100%;max-width:none;height:auto;margin:0;border:0;border-radius:0;outline:0;background:transparent;box-shadow:none;
	color:#fff;font-family:Transat,sans-serif;font-weight:300;font-size:17px;line-height:1.4;letter-spacing:0;text-align:left;color-scheme:dark;-webkit-appearance:none;appearance:none;transition:box-shadow .2s ease}
.wd-talk .wd-cform textarea{min-height:156px;padding:16px 18px;border-radius:12px;background:rgba(8,13,23,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.17);resize:vertical}
.wd-talk .wd-cform input[type=text],.wd-talk .wd-cform input[type=email]{padding:20px 0 13px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.26)}
.wd-talk .wd-cform textarea:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.wd-talk .wd-cform input[type=text]:hover,.wd-talk .wd-cform input[type=email]:hover{box-shadow:inset 0 -1px 0 rgba(255,255,255,.45)}
.wd-talk .wd-cform textarea:focus{color:#fff;background:rgba(8,13,23,.34);box-shadow:inset 0 0 0 1.5px var(--t-y),0 0 0 4px rgba(255,193,7,.1)}
.wd-talk .wd-cform input[type=text]:focus,.wd-talk .wd-cform input[type=email]:focus{color:#fff;background:transparent;box-shadow:inset 0 -2px 0 var(--t-y)}
.wd-talk .wd-cform textarea::placeholder,.wd-talk .wd-cform input::placeholder{color:#8494a9;opacity:1}
.wd-talk .wd-cform input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-background-clip:text;background-clip:text;transition:box-shadow .2s ease,background-color 600000s 0s,color 600000s 0s}
/* a field left empty or a wrong email, after one has tried to send */
.wd-talk .wd-cform input[type=text]:user-invalid,.wd-talk .wd-cform input[type=email]:user-invalid{box-shadow:inset 0 -2px 0 #ff9a8b}
.wd-talk .wd-cform textarea:user-invalid{box-shadow:inset 0 0 0 1.5px #ff9a8b,0 0 0 4px rgba(255,120,100,.12)}
.wd-talk .wd-cform__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px}
/* the button on the right, the line about the email on the left */
.wd-talk .wd-cform__actions{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:22px 0 0}
.wd-talk .wd-cform__note{order:-1;margin:0;color:var(--t-muted);font-size:14px;line-height:1.5}
.wd-talk .wd-cform__send{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:52px;margin:0 0 0 auto;padding:0 32px;border:0;border-radius:999px;background:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
	color:#1a2334;font-family:Transat,sans-serif;font-weight:700;font-size:16px;line-height:1.2;letter-spacing:.01em;text-transform:none;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.wd-talk .wd-cform__send:disabled{opacity:.6;cursor:progress}
@media (hover: hover){
	.wd-talk .wd-cform__send:hover,.wd-talk #cancel-comment-reply-link:hover{background:var(--t-y);color:#1a2334}
}

/* ---------- pages of comments (only if the comments are split into pages in the settings) ---------- */
.wd-talk__pages{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:20px 0 0}
.wd-talk__pages a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.wd-talk__pages a:hover{box-shadow:inset 0 0 0 1px var(--t-y);color:#fff}

/* ---------- phones ---------- */
@media (max-width: 575.98px){
	.wd-talk .wd-c__in{gap:0 12px;padding:18px 16px 16px;border-radius:16px}
	.wd-talk .wd-c__ava{width:40px;height:40px;font-size:14px}
	.wd-talk .wd-c__head{min-height:40px}
	.wd-talk .wd-c__wait,.wd-talk .wd-c__text,.wd-talk .wd-c__reply{grid-column:1 / -1}
	.wd-talk .wd-c__text p{font-size:16.5px}
	.wd-talk .children{margin-left:52px}
	.wd-talk .children > .wd-c::after,.wd-talk .wd-talk__list > .wd-respond::after,.wd-talk .children > .wd-respond::after{left:-16px;width:16px;height:51px;border-bottom-left-radius:10px}
	.wd-talk .children > .wd-c:not(:last-child)::before,.wd-talk .wd-c:has(+ .wd-respond) > .children > .wd-c:last-child::before{left:-16px}
	/* from the third level on, no more indent on a narrow screen */
	.wd-talk .children .children .children{margin-left:0}
	.wd-talk .children .children .children > .wd-c::before,.wd-talk .children .children .children > .wd-c::after{content:none}
	.wd-talk .wd-talk__list > .wd-respond,.wd-talk .children > .wd-respond{margin-left:52px}
	.wd-talk .children .children .children > .wd-respond{margin-left:0}
	.wd-talk .children .children .children > .wd-respond::after{content:none}
	.wd-talk .wd-respond{padding:18px 16px 18px;border-radius:16px}
	.wd-talk .wd-respond__title{gap:10px 12px;min-height:40px}
	.wd-talk .wd-respond__you{width:40px;height:40px}
	.wd-talk .wd-cform__row{grid-template-columns:minmax(0,1fr)}
	.wd-talk .wd-cform__actions{flex-direction:column;flex-wrap:wrap;align-items:stretch;gap:14px}
	.wd-talk .wd-cform__note{order:0}
	.wd-talk .wd-cform__send{margin:0}
	.wd-talk .wd-comment-notice{padding:14px 14px 14px 54px;font-size:15px}
	.wd-talk .wd-comment-notice::before{left:14px;top:14px;width:28px;height:28px;background-size:16px}
	.wd-talk .wd-comment-notice__title{font-size:16px}
}
@media (prefers-reduced-motion: reduce){
	.wd-talk .wd-cform textarea,.wd-talk .wd-cform input,.wd-talk .wd-cform__send,.wd-talk #cancel-comment-reply-link{transition:none}
}