/* The three blocks under the cards of the English home page (index.php, 2026-10-22): places, books, documentaries.
   One dark section (.wd-blocks) of three bands across the whole width, after the cards and before the block about the author:
   1. the map under the cards goes on under the first band and turns blue; the empty screen of the laptop in the drawing shows it;
   2. the books on the green of the old block, a yellow bookmark ribbon hanging from the top edge;
   3. the projector in the dark of the old block, its light crossing the band over the words.
   Only the first band has hidden words (the copies of them in the other two were taken out, 2026-10-22): "I want to know more" opens them
   (js/main.js sets their height and aria-expanded on the button) in three columns on computers, two on tablets, one paragraph at a time on phones.
   Loaded by header-home_eng.php. The theme's old rules for .scroll-block (style-en.css) are undone here, not deleted. */

/* the dots at the left side of the window: the blocks are no longer a screen high each, the dots have nothing to show */
#scroll-dots{display:none!important}

.wd-blocks{--b-yellow:#ffc107;--b-soft:#c9d2de;--b-gut:clamp(16px,4vw,64px);
	position:relative;isolation:isolate;display:flow-root;margin:0;padding:0;background:#08090c;color:#d5dce6;font-family:Transat,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
.wd-blocks *,.wd-blocks *::before,.wd-blocks *::after{box-sizing:border-box}

/* a band: the words and the drawing side by side in a column of 1200px; the drawing on the left, in the second band on the right */
.wd-blocks .scroll-block{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;column-gap:clamp(32px,5vw,96px);
	min-height:0;margin:0;padding:clamp(60px,5vw + 8px,96px) max(var(--b-gut),(100% - 1200px) / 2);overflow:hidden;overflow:clip;background:none}
.wd-blocks .scroll-block .scroll-block__image{grid-column:1;grid-row:1;position:relative;min-width:0;margin:0;padding:0;transform:none;flex:none}
.wd-blocks .scroll-block .scroll-block__content{grid-column:2;grid-row:1;display:block;flex:none;min-width:0}
.wd-blocks .scroll-block .scroll-block__container{display:block;width:auto;max-width:none;margin:0;padding:0}
.wd-blocks .scroll-block .scroll-block__body{display:block;width:auto}
.wd-blocks .scroll-block-2{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.wd-blocks .scroll-block-2 .scroll-block__image{grid-column:2}
.wd-blocks .scroll-block-2 .scroll-block__content{grid-column:1}

/* the drawing, in a box as large as the drawing itself (the light of the projector is placed by it) */
.wd-blocks .wd-draw{position:relative;display:block;margin:0 auto}
.wd-blocks .wd-draw__img{position:relative;z-index:1;display:block;width:100%;max-width:none;height:auto}
/* the ink drawings were white paper on the white block: a little less white on the dark */
.wd-blocks .scroll-block-1 .wd-draw__img,.wd-blocks .scroll-block-2 .wd-draw__img{filter:brightness(.92)}
.wd-blocks .scroll-block-3 .wd-draw__img{opacity:.94}
.wd-blocks .scroll-block-1 .wd-draw{width:min(100%,470px)}
.wd-blocks .scroll-block-2 .wd-draw{width:min(100%,350px)}
.wd-blocks .scroll-block-3 .wd-draw{width:min(100%,360px)}

/* the words: the titles white with the yellow line, as on About; the text in the italic of the cards */
.wd-blocks .scroll-block .scroll-block__title{margin:0;color:#fff;font-family:Transat,sans-serif;font-weight:700;font-size:clamp(25px,.8vw + 18px,33px);line-height:1.2;letter-spacing:-.005em;text-transform:none;text-wrap:balance;
	text-decoration:underline;text-decoration-color:var(--b-yellow);text-decoration-thickness:3px;text-underline-offset:.22em}
.wd-blocks .scroll-block .scroll-block__text,.wd-blocks .scroll-block .scroll-block__subtext{max-width:64ch;margin:0;color:var(--b-soft);font-family:gotic,Transat,sans-serif;font-style:italic;font-weight:300;font-size:16.5px;line-height:1.7;letter-spacing:.02em}
.wd-blocks .scroll-block .scroll-block__text{margin-top:22px}
.wd-blocks .scroll-block .scroll-block__subtext{padding-top:16px;color:#b8c3d1;font-size:15.5px}
.wd-blocks .scroll-block .scroll-block__paragraph{overflow:hidden;transition:height .5s cubic-bezier(.3,.7,.2,1)}

/* "I want to know more": a light outline button, as "Facebook Messenger" in the block about the author; a plus in a small yellow ring, a minus when open */
.wd-blocks .scroll-block .scroll-block__btn,.wd-blocks .scroll-block .scroll-block__btn:hover,.wd-blocks .scroll-block .scroll-block__btn:focus{display:inline-flex;align-items:center;gap:12px;height:48px;margin:28px 0 0;padding:0 22px 0 13px;
	border:1px solid rgba(255,255,255,.34);border-radius:999px;background:transparent;color:#fff;font-family:Transat,sans-serif;font-weight:700;font-size:15px;line-height:1;letter-spacing:.01em;text-align:left;text-transform:none;white-space:nowrap;
	cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;outline:0;transition:border-color .2s ease,background-color .2s ease}
.wd-blocks .scroll-block .scroll-block__btn:focus-visible{outline:2px solid var(--b-yellow);outline-offset:3px}
.wd-blocks .scroll-block .scroll-block__btn::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;
	background:linear-gradient(var(--b-yellow),var(--b-yellow)) center/10px 2px no-repeat,linear-gradient(var(--b-yellow),var(--b-yellow)) center/2px 10px no-repeat;
	box-shadow:inset 0 0 0 1px rgba(255,193,7,.55);transition:background-size .25s ease}
.wd-blocks .scroll-block .scroll-block__btn[aria-expanded="true"]::before{background-size:10px 2px,2px 0}
@media (hover: hover){
	.wd-blocks .scroll-block .scroll-block__btn:hover{border-color:#fff;background:rgba(255,255,255,.06)}
}

/* the opened words of the first band (.scroll-block--more). Computers: under the drawing and the intro, across the whole band, three columns,
   one paragraph each; the button stays right under the intro. Tablets: two columns, the third paragraph across both.
   Phones: one paragraph at a time on a card, turned by a finger or by the arrows of its bar (1 / 3; js/main.js) */
.wd-blocks .wd-more__bar{display:none}
@media (min-width: 768px){
	/* the words of the band become boxes of its grid: a spring, the title, the intro, the button, a spring, the opened words
	   (the springs keep the words in the middle beside the drawing) */
	.wd-blocks .scroll-block--more .scroll-block__content,.wd-blocks .scroll-block--more .scroll-block__container,.wd-blocks .scroll-block--more .scroll-block__body{display:contents}
	.wd-blocks .scroll-block--more{grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr) auto;align-items:start}
	.wd-blocks .scroll-block--more .scroll-block__image{grid-row:1/6;align-self:center}
	.wd-blocks .scroll-block--more .scroll-block__title{grid-column:2;grid-row:2}
	.wd-blocks .scroll-block--more .scroll-block__text{grid-column:2;grid-row:3}
	.wd-blocks .scroll-block--more .scroll-block__btn{grid-column:2;grid-row:4;justify-self:start}
	.wd-blocks .scroll-block-2.scroll-block--more .scroll-block__title,.wd-blocks .scroll-block-2.scroll-block--more .scroll-block__text,.wd-blocks .scroll-block-2.scroll-block--more .scroll-block__btn{grid-column:1}
	.wd-blocks .scroll-block--more .scroll-block__paragraph{grid-column:1/-1;grid-row:6}
	.wd-blocks .scroll-block--more .wd-more__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3vw,52px);align-items:start}
	/* each paragraph under a hairline with a short yellow mark, as the lines under the titles */
	.wd-blocks .scroll-block--more .scroll-block__subtext{position:relative;max-width:none;margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);line-height:1.68}
	.wd-blocks .scroll-block--more .scroll-block__subtext::before{content:"";position:absolute;left:0;top:-2px;width:36px;height:3px;background:var(--b-yellow)}
}
@media (min-width: 768px) and (max-width: 1023.98px){
	.wd-blocks .scroll-block--more .wd-more__track{grid-template-columns:repeat(2,minmax(0,1fr))}
	.wd-blocks .scroll-block--more .scroll-block__subtext:nth-child(3){grid-column:1/-1;margin-top:34px}
}
@media (max-width: 767.98px){
	.wd-blocks .wd-more{margin-top:22px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
	.wd-blocks .wd-more__track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
	.wd-blocks .wd-more__track::-webkit-scrollbar{display:none}
	.wd-blocks .scroll-block .wd-more__track .scroll-block__subtext{flex:0 0 100%;max-width:none;scroll-snap-align:start;padding:20px 20px 4px;font-size:15px;line-height:1.62}
	.wd-blocks .wd-more__bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:6px 12px 12px 20px}
	.wd-blocks .wd-more__count{margin-right:auto;color:#9fb2c8;font-family:Transat,sans-serif;font-weight:700;font-size:13px;line-height:1;letter-spacing:.04em}
	.wd-blocks .wd-more__count b{color:#fff;font-weight:700}
	.wd-blocks .wd-more__arrow{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;
		background:transparent;color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;outline:0}
	.wd-blocks .wd-more__arrow:focus-visible{outline:2px solid var(--b-yellow);outline-offset:2px}
	.wd-blocks .wd-more__arrow:disabled{opacity:.35;cursor:default}
	.wd-blocks .wd-more__arrow svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}

/* 1. the places: the map under the cards goes on under the first band and turns blue (fixed to the window, as under the cards) */
.wd-blocks .scroll-block-1{background:linear-gradient(180deg,rgba(24,40,66,0) 0,rgba(24,40,66,.74) 150px,rgba(22,36,60,.8) 100%),
	url(../img/background.jpg) center top/cover fixed,#08090c}
/* Safari on iPhone and iPad does not fix a background to the window: there the map lies still under the band, its top edge dark,
   so it does not meet the map under the cards, which is drawn at another scale there */
@supports (-webkit-touch-callout: none){
	.wd-blocks .scroll-block-1{background:linear-gradient(180deg,#0b0d10 0,rgba(24,40,66,.8) 160px,rgba(22,36,60,.82) 100%),url(../img/background.jpg) center/cover no-repeat,#0b0d10}
}

/* 2. the books: the green of the old block; a yellow bookmark ribbon hangs from the top edge of the band, above the books */
.wd-blocks .scroll-block-2{background:radial-gradient(40% 70% at 78% 55%,rgba(0,137,123,.32) 0%,rgba(0,137,123,0) 72%),linear-gradient(160deg,#14323d 0%,#142b3c 48%,#13253a 100%)}
.wd-blocks .scroll-block-2::after{content:"";position:absolute;z-index:4;top:0;right:calc(max(var(--b-gut),(100% - 1200px) / 2) + clamp(24px,4vw,64px));width:26px;height:86px;pointer-events:none;
	background:linear-gradient(180deg,rgba(0,0,0,.3) 0,rgba(0,0,0,0) 10px),linear-gradient(90deg,#d29a00 0%,#ffc61a 36%,#ffd451 54%,#f2b400 100%);
	-webkit-clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}

/* 3. the documentaries: the dark of the old block; the light of the projector, from its lens (60% across and 71% down the drawing)
   to the right, crosses the band over the words */
.wd-blocks .scroll-block-3{background:linear-gradient(180deg,#15181d 0%,#111318 100%)}
.wd-blocks .scroll-block-3 .wd-draw::before{content:"";position:absolute;z-index:-1;left:0;top:-120%;width:420%;height:340%;pointer-events:none;
	background:conic-gradient(from 0deg at 14.31% 56.12%,rgba(255,234,190,0) 0deg 24deg,rgba(255,234,190,.1) 36deg,rgba(255,234,190,.2) 62deg,rgba(255,234,190,.12) 94deg,rgba(255,234,190,0) 110deg 360deg);
	-webkit-mask:radial-gradient(circle at 14.31% 56.12%,#000 0,rgba(0,0,0,.78) 18%,rgba(0,0,0,.34) 46%,rgba(0,0,0,0) 72%);mask:radial-gradient(circle at 14.31% 56.12%,#000 0,rgba(0,0,0,.78) 18%,rgba(0,0,0,.34) 46%,rgba(0,0,0,0) 72%)}

/* tablets */
@media (max-width: 1023.98px){
	.wd-blocks .scroll-block{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
	.wd-blocks .scroll-block-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
}
/* phones: the drawing above the words */
@media (max-width: 767.98px){
	.wd-blocks .scroll-block,.wd-blocks .scroll-block-2{grid-template-columns:minmax(0,1fr);row-gap:24px;padding:52px 20px 48px}
	.wd-blocks .scroll-block .scroll-block__image{grid-column:1;grid-row:1;position:relative;top:auto;align-self:auto}
	.wd-blocks .scroll-block .scroll-block__content{grid-column:1;grid-row:2}
	.wd-blocks .scroll-block-1 .wd-draw{width:min(100%,320px)}
	.wd-blocks .scroll-block-2 .wd-draw{width:min(78%,230px)}
	.wd-blocks .scroll-block-3 .wd-draw{width:min(72%,220px);margin-left:4%}
	.wd-blocks .scroll-block-2::after{right:22px;width:22px;height:64px}
	.wd-blocks .scroll-block .scroll-block__title{font-size:23px;line-height:1.24}
	.wd-blocks .scroll-block .scroll-block__text{margin-top:16px;font-size:16px;line-height:1.66;letter-spacing:.015em}
	.wd-blocks .scroll-block .scroll-block__subtext{font-size:15px}
	.wd-blocks .scroll-block .scroll-block__btn{margin-top:22px}
}
@media (prefers-reduced-motion: reduce){
	.wd-blocks .scroll-block .scroll-block__paragraph,.wd-blocks .scroll-block .scroll-block__btn::before{transition:none}
}