/*
 * Carnet d'artiste — livre feuilletable (blocs odtr/carnet + odtr/carnet-page).
 * Trois couches :
 *   1. .carnet-papier — le papier et sa typographie, PARTAGÉS avec l'éditeur
 *      (les pages s'éditent telles qu'elles s'affichent) ;
 *   2. l'écrin sombre et l'empilement accessible (sans JavaScript,
 *      les pages se lisent en colonne — moteurs et lecteurs d'écran aussi) ;
 *   3. le livre 3D (carnet.js pose .carnet-actif, et .carnet-solo sur mobile).
 * Tout est scopé .odtr-carnet / .carnet-papier : retirer le module ne casse rien.
 */

/* ---------- 1. Le papier (partagé site / éditeur) ---------- */
.carnet-papier{
	background:
		radial-gradient(120% 80% at 30% 12%, #fffdf4 0%, transparent 55%),
		#f7f1e3;
	color:#221f3a;
	padding:40px 42px;
	font-family:'Montserrat',system-ui,sans-serif;
	font-size:14.5px;
	line-height:1.7;
	box-sizing:border-box;
}
.carnet-papier > *{margin-top:0;margin-bottom:0}
.carnet-papier > * + *{margin-top:12px}
.carnet-papier h2{
	font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:26px;line-height:1.15;
	color:#020071;
}
.carnet-papier h2::after{
	content:'';display:block;width:46px;height:2px;margin-top:9px;
	background:linear-gradient(90deg,#D8B46A,transparent);
}
.carnet-papier h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:18px;color:#020071}
.carnet-papier a{color:#020071}
.carnet-papier .carnet-intro{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#524d70}
.carnet-papier .carnet-intro + *{margin-top:18px}
.carnet-papier .has-drop-cap:not(:focus)::first-letter{
	font-family:'Fraunces',Georgia,serif;color:#020071;padding-right:8px;
}
/* Page de garde : une citation seule, en belle place. */
.carnet-papier .carnet-citation{
	font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:22px;line-height:1.55;
	color:#020071;text-align:center;padding:64px 8px 0;
}
.carnet-papier .carnet-citation::before{
	content:'«';display:block;font-size:74px;line-height:.6;color:#D8B46A;
	font-style:normal;margin-bottom:26px;
}
.carnet-papier .carnet-citation + .carnet-intro{text-align:center;margin-top:22px}
/* Listes : filets pointillés du carnet (frises, rôles, agenda…). */
.carnet-papier ul{list-style:none;padding-left:0}
.carnet-papier li{padding:10px 0;border-bottom:1px dashed rgba(2,0,113,.16)}
.carnet-papier li strong{font-family:'Fraunces',Georgia,serif;font-weight:600;color:#a9822e}
.carnet-papier li em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:17px;color:#020071}
/* Citations de presse. */
.carnet-papier blockquote{border-left:2px solid #D8B46A;padding:2px 0 2px 16px;margin:0}
.carnet-papier blockquote p{
	font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:16px;line-height:1.6;color:#020071;
}
.carnet-papier blockquote cite{
	display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
	color:#524d70;font-style:normal;margin-top:6px;
}
/* Images : encadrées d'or, à la manière des tirages du carnet. */
.carnet-papier figure{margin:0}
.carnet-papier img{
	display:block;width:100%;height:auto;max-height:230px;object-fit:cover;
	border-radius:6px;border:1px solid rgba(216,180,106,.5);
}
.carnet-papier img:not([src]),.carnet-papier img[src='']{display:none}
.carnet-papier figcaption{
	font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#524d70;
	text-align:center;margin-top:6px;
}
.carnet-papier .wp-block-columns{gap:14px}
/* Boutons : liserés d'or sur papier. */
.carnet-papier .wp-block-buttons{gap:10px}
.carnet-papier .wp-block-button{width:100%}
.carnet-papier .wp-block-button__link{
	display:block;background:transparent;border:1.5px solid #D8B46A;border-radius:999px;
	color:#020071;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
	padding:11px 18px;text-align:center;text-decoration:none;
}
.carnet-papier .wp-block-button__link:hover{background:#D8B46A;color:#01003c}

/* ---------- 2. L'écrin et l'empilement (sans JavaScript) ---------- */
.odtr-carnet{
	position:relative;padding:44px 16px 54px;overflow:hidden;
	background:
		radial-gradient(60% 46% at 50% 52%, rgba(216,180,106,.10), transparent 70%),
		radial-gradient(120% 100% at 50% 0%, #0a0950 0%, #04033a 55%, #010020 100%);
}
.odtr-carnet::before{ /* ciel étoilé discret */
	content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 26% 64%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 38% 30%, #ffe9c0 50%, transparent 51%),
		radial-gradient(1px 1px at 55% 12%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 64% 76%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 78% 24%, #ffe9c0 50%, transparent 51%),
		radial-gradient(1px 1px at 88% 58%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 7% 82%, #fff 50%, transparent 51%);
}
.carnet-cadre{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-start}
.carnet-scene{width:100%;max-width:520px}
.carnet-face{
	position:relative;margin:16px 0 0;border-radius:8px;overflow:hidden;
	box-shadow:0 18px 40px rgba(0,0,0,.45);
	background:
		radial-gradient(120% 80% at 30% 12%, #fffdf4 0%, transparent 55%),
		#f7f1e3;
}
.carnet-feuille:first-child .carnet-recto{margin-top:0}
.carnet-blanche{display:none}
.carnet-controles,.carnet-astuce{display:none}
.odtr-carnet:not(.carnet-actif) .carnet-couverture,
.odtr-carnet:not(.carnet-actif) .carnet-dos{aspect-ratio:460/620}

/* ---------- Couverture et quatrième ---------- */
.carnet-couverture,.carnet-dos{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;padding:46px 40px;color:#f7f1e3;
	font-family:'Montserrat',system-ui,sans-serif;
	background:
		radial-gradient(110% 70% at 50% 0%, #0d0c63 0%, transparent 60%),
		linear-gradient(165deg, #04038a, #01003c 70%);
}
.carnet-filet{position:absolute;inset:14px;border:1px solid rgba(216,180,106,.75);border-radius:4px;pointer-events:none}
.carnet-filet::before{content:'';position:absolute;inset:5px;border:1px solid rgba(216,180,106,.35);border-radius:3px}
.carnet-rayons{color:#D8B46A;opacity:.9;margin-bottom:16px}
.carnet-surtitre{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:#ecd7a4;margin:0 0 24px}
.carnet-vignette{
	display:block;width:190px;height:238px;border-radius:50%/42%;
	border:1.5px solid #D8B46A;padding:7px;margin-bottom:24px;box-sizing:border-box;
	background-origin:content-box;background-clip:content-box;
	background-size:cover;background-position:center 20%;background-repeat:no-repeat;
}
.carnet-vignette-vide{
	display:flex;align-items:center;justify-content:center;
	background-image:linear-gradient(160deg,#262465,#0a0940);
}
.carnet-vignette-vide span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#ecd7a4}
.carnet-nom{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:38px;line-height:1.1;margin:0;color:#f7f1e3}
.carnet-voix{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:19px;color:#D8B46A;margin:8px 0 0}
.carnet-pied-couv{
	position:absolute;bottom:30px;left:0;right:0;margin:0;
	font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(247,241,227,.65);
}
.carnet-monogramme{font-family:'Fraunces',Georgia,serif;font-size:34px;color:#D8B46A;margin:0}
.carnet-devise{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#ecd7a4;margin:10px 0 0}
.carnet-site{margin:28px 0 0;font-size:12px;color:rgba(247,241,227,.7)}

/* ---------- 3. Le livre (carnet.js pose .carnet-actif) ---------- */
.carnet-actif .carnet-cadre{overflow:hidden}
.carnet-actif .carnet-scene{width:920px;max-width:none;height:620px;flex:none;position:relative;transform-origin:top center}
.carnet-actif .carnet-livre{
	position:absolute;inset:0;perspective:2600px;cursor:pointer;
	touch-action:pan-y;user-select:none;-webkit-user-select:none;
	transition:transform .9s cubic-bezier(.25,.1,.25,1);
}
.carnet-actif .carnet-livre::before{ /* ombre portée sous le livre */
	content:'';position:absolute;inset:4% 2%;z-index:0;border-radius:8px;
	box-shadow:0 40px 80px rgba(0,0,0,.6);
}
.carnet-actif .carnet-feuille{
	position:absolute;top:0;left:50%;width:50%;height:100%;
	transform-origin:left center;transform-style:preserve-3d;
	transition:transform .9s cubic-bezier(.25,.1,.25,1);
}
.carnet-actif .carnet-feuille.carnet-tournee{transform:rotateY(-180deg)}
.carnet-actif .carnet-feuille.carnet-en-vol{z-index:60 !important}
.carnet-actif .carnet-face{
	position:absolute;inset:0;margin:0;overflow:hidden;border-radius:0 8px 8px 0;
	backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:none;
}
.carnet-actif .carnet-verso{transform:rotateY(180deg);border-radius:8px 0 0 8px}
/* Ombre de reliure, côté charnière de chaque page. */
.carnet-actif .carnet-recto::before,
.carnet-actif .carnet-verso::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:3}
.carnet-actif .carnet-recto::before{background:linear-gradient(90deg, rgba(2,0,60,.16), transparent 12%)}
.carnet-actif .carnet-verso::before{background:linear-gradient(270deg, rgba(2,0,60,.16), transparent 12%)}
/* Assombrissement de la feuille pendant son vol. */
.carnet-actif .carnet-face::after{
	content:'';position:absolute;inset:0;pointer-events:none;z-index:4;
	background:rgba(1,0,40,.28);opacity:0;transition:opacity .45s;
}
.carnet-actif .carnet-en-vol .carnet-face::after{opacity:1}
.carnet-actif .carnet-face .carnet-papier{height:100%;overflow:hidden}
.carnet-actif .carnet-blanche{display:flex;align-items:center;justify-content:center;color:#D8B46A;font-size:18px}

/* ---------- Commandes ---------- */
.carnet-actif .carnet-controles{
	display:flex;align-items:center;justify-content:center;gap:20px;
	padding:18px 0 0;position:relative;z-index:2;
}
.carnet-fleche{
	font-family:'Fraunces',Georgia,serif;font-size:24px;line-height:1;color:#D8B46A;
	background:transparent;border:1px solid rgba(216,180,106,.5);border-radius:999px;
	width:44px;height:44px;padding:0;cursor:pointer;
	transition:background .25s,color .25s,opacity .25s;
}
.carnet-fleche:hover:not(:disabled){background:#D8B46A;color:#01003c}
.carnet-fleche:disabled{opacity:.25;cursor:default}
.carnet-indicateur{
	font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#ecd7a4;
	margin:0;min-width:200px;text-align:center;
}
.carnet-actif .carnet-astuce{
	display:block;text-align:center;font-size:12px;color:rgba(247,241,227,.45);
	padding:8px 16px 0;margin:0;position:relative;z-index:2;
}
.carnet-astuce-mobile{display:none}

/* ---------- Mobile : une page à la fois (carnet.js pose .carnet-solo) ---------- */
.carnet-solo .carnet-papier{font-size:15.5px}
.carnet-solo .carnet-indicateur{min-width:0}
.carnet-solo .carnet-astuce-bureau{display:none}
.carnet-solo .carnet-astuce-mobile{display:inline}

@media (prefers-reduced-motion: reduce){
	.carnet-actif .carnet-livre,
	.carnet-actif .carnet-feuille{transition-duration:.01s}
	.carnet-actif .carnet-face::after{transition:none}
}