/**
 * Éditeur de jeu de cartes.
 *
 * On reprend la mise en page du prototype — panneau de réglages à gauche,
 * carte au centre — en l'habillant des couleurs du site. La pellicule des
 * cartes est en bas : c'est elle qui remplace la notion de page de
 * production, que le client n'a pas à connaître.
 */

.ccc-editeur {
	max-width: 1200px;
	margin: 0 auto;
}

.ccc-editeur__entete h2,
.ccc-ed__entete h2 {
	margin: 0 0 4px;
}

.ccc-ed__resume {
	color: #687b76;
	margin: 0 0 18px;
}

.ccc-ed__avis {
	background: #fdf6ec;
	border-left: 3px solid #c26747;
	padding: 12px 16px;
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
}

.ccc-ed__grille {
	display: grid;
	/*
	 * minmax( 0, 1fr ) et non 1fr : une colonne « 1fr » ne descend pas sous
	 * la largeur maximale de son contenu. Le thème donne aux boutons une
	 * largeur de 100 %, ce qui gonflait la colonne à plus de 4 500 px — le
	 * canevas, centré dedans, partait hors de l'écran et la carte semblait
	 * ne pas s'afficher du tout.
	 */
	grid-template-columns: 320px minmax( 0, 1fr );
	gap: 28px;
	align-items: start;
}

.ccc-ed__panneau,
.ccc-ed__scene,
.ccc-ed__pellicule {
	min-width: 0;
}

/*
 * Les boutons du thème sont en largeur pleine. Dans nos barres, qui sont
 * des rangées souples, ils doivent reprendre leur largeur naturelle.
 */
.ccc-ed__pied .ccc-btn,
.ccc-ed__pied .ccc-btn-sec,
.ccc-ed__outils .ccc-btn,
.ccc-ed__outils .ccc-btn-sec,
.ccc-ed__question .ccc-btn,
.ccc-ed__question .ccc-btn-sec,
.ccc-ed__nav .ccc-btn-sec {
	width: auto;
	flex: 0 0 auto;
	display: inline-block;
}

.ccc-ed__panneau,
.ccc-ed__scene {
	background: #fff;
	border: 1px solid #e1e6e0;
	border-radius: 18px;
	padding: 22px;
}

.ccc-ed__panneau label {
	display: block;
	margin: 16px 0 6px;
	font-weight: 600;
}

.ccc-ed__panneau input,
.ccc-ed__panneau textarea,
.ccc-ed__panneau select,
.ccc-editeur .ccc-select {
	width: 100%;
	padding: 10px;
	border: 1px solid #cbd5ce;
	border-radius: 8px;
	font: inherit;
}

.ccc-ed__panneau input[type="color"] {
	height: 42px;
	padding: 3px;
}

.ccc-ed__panneau input[type="checkbox"] {
	width: auto;
	margin-right: 6px;
}

.ccc-ed__panneau input[type="range"] {
	padding: 0;
}

/*
 * Les trois onglets et les deux boutons d'ajout forment une même grille :
 * cinq pavés de même hauteur, alignés sur la même colonne de gauche. Avant,
 * « Dos des cartes » se repliait sur deux lignes et grandissait tout seul,
 * tandis que le libellé « Ajouter une photo » héritait d'une marge haute
 * réservée aux étiquettes de formulaire — les cinq boutons ne tombaient
 * jamais au même endroit.
 */
.ccc-ed__onglets {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.ccc-ed__onglets button {
	flex: 1 1 0;
	min-width: 0;
	/* Même hauteur pour les trois, qu'un libellé tienne sur une ligne ou
	   sur deux : c'est la rangée qui donne la hauteur, pas le texte. */
	min-height: 52px;
	/* Bordure comprise dans la hauteur : sans cela les deux boutons d'ajout,
	   qui en portent une, dépassaient les onglets de deux pixels — assez
	   pour que les deux rangées ne se répondent pas. */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Bordure transparente de même épaisseur que celle des boutons d'ajout :
	   sans elle, les deux rangées se construisent sur des boîtes
	   différentes et finissent à deux pixels l'une de l'autre. */
	border: 1.5px solid transparent;
	border-radius: 9px;
	padding: 10px 8px;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	background: #eaf0eb;
	color: #194e42;
}

.ccc-ed__onglets button.actif {
	background: #194e42;
	color: #fff;
}

.ccc-ed__note {
	font-size: 13px;
	line-height: 1.55;
	color: #687b76;
	margin: 8px 0 0;
}

.ccc-ed__ok {
	color: #1f7a4d;
}

.ccc-ed__ko {
	color: #a8321c;
}

.ccc-ed__avertissement {
	color: #9b4b15;
}

/* --- la carte --- */

.ccc-ed__barre {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.ccc-ed__barre h3 {
	margin: 0;
}

.ccc-ed__nav {
	display: flex;
	gap: 8px;
}

.ccc-ed__plateau {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e8ede6;
	border-radius: 12px;
	padding: 30px;
	margin: 18px 0 10px;
	min-height: 420px;
}

.ccc-ed__plateau canvas {
	width: min(100%, 320px);
	height: auto;
	box-shadow: 0 15px 35px rgba( 25, 59, 54, 0.15 );
	touch-action: none;
	cursor: grab;
	background: #fff;
}

/*
 * Le développé de l'étui prend toute la largeur disponible. Les 320 px
 * ci-dessus sont la bonne taille pour une carte et un contresens pour un
 * développé de 180 mm : le panneau de face avant y tomberait à 110 px, soit
 * un timbre-poste pour composer la plus grande surface du jeu.
 */
.ccc-ed__plateau canvas.ccc-ed__toile--large {
	width: 100%;
}

/*
 * Faces fournies par l'atelier : le mot qui remplace les boutons d'ajout.
 * Un encadré calme, pas un avertissement — il n'y a rien à corriger, il y a
 * seulement moins de travail que prévu.
 */
.ccc-ed__modele {
	border: 1px solid #cfdac9;
	border-left: 3px solid #6f8f63;
	background: #f3f7f2;
	border-radius: 4px;
	padding: 12px 14px;
	margin: 0 0 14px;
}

.ccc-ed__modele strong {
	display: block;
	margin: 0 0 4px;
	font-size: 14px;
	color: #2f4a2a;
}

.ccc-ed__modele p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: #4a5a46;
}

/*
 * L'étui monté, en volume.
 *
 * Six faces, des transformations CSS, aucune bibliothèque. Le fond est plus
 * sombre que le plateau du développé : on quitte le plan de travail pour
 * regarder un objet, et l'œil doit le sentir sans qu'on l'écrive.
 */
.ccc-ed__3d {
	background: #1d2320;
	border-radius: 12px;
	padding: 16px 18px 14px;
	margin: 0 0 14px;
	color: #e7eae6;
}

.ccc-ed__3d-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 6px;
	font-size: 15px;
}

.ccc-ed__3d-vue {
	/* La perspective vit sur le parent de la scène : posée sur la boîte
	   elle-même, elle tournerait avec elle. */
	perspective: 1100px;
	height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
	cursor: grab;
	overflow: hidden;
}

.ccc-ed__3d-vue:active {
	cursor: grabbing;
}

.ccc-3d__scene {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccc-3d__boite {
	position: relative;
	width: 0;
	height: 0;
	transform-style: preserve-3d;
	transition: transform .08s linear;
}

/*
 * « backface-visibility » cache la face qu'on regarde par l'envers : sans
 * elle, le dos s'imprimerait en miroir par-dessus la face avant.
 */
.ccc-3d__face {
	position: absolute;
	left: 0;
	top: 0;
	backface-visibility: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .18 );
}

.ccc-3d__face canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.ccc-ed__3d-note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #9fb0a6;
}

.ccc-ed__3d .ccc-btn-sec {
	background: transparent;
	color: #e7eae6;
	border: 1px solid rgba( 231, 234, 230, .45 );
	border-radius: 4px;
	padding: 5px 12px;
	font-size: 13px;
	cursor: pointer;
}

.ccc-ed__etat {
	min-height: 20px;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 12px;
}

.ccc-ed__etat--ko {
	color: #a8321c;
}

.ccc-ed__etat--ok {
	color: #1f7a4d;
}

/* --- outils du jeu --- */

/*
 * La barre d'outils, en tête de la scène.
 *
 * justify-content à flex-start et aucun bouton en largeur pleine : les cinq
 * actions se rangent à gauche, dans l'ordre, et le repli se fait à droite
 * quand la place manque — jamais un bouton isolé au milieu d'une ligne.
 */
.ccc-ed__outils {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	align-items: center;
	margin-bottom: 4px;
	padding: 0 0 16px;
	border-bottom: 1px solid #eef1ec;
}

.ccc-ed__outils .ccc-btn,
.ccc-ed__outils .ccc-btn-sec,
.ccc-ed__outils .ccc-ed__import {
	width: auto;
	flex: 0 0 auto;
	margin: 0;
}

/* Le bon à tirer garde son habillage plein : c'est la seule action de la
   rangée qui engage l'impression. */
.ccc-ed__outils .ccc-btn {
	padding: 11px 18px;
	font-size: 14px;
}

.ccc-ed__import {
	border: 0;
	border-radius: 9px;
	padding: 12px 18px;
	font: inherit;
	cursor: pointer;
	background: #eaf0eb;
	color: #194e42;
	display: inline-block;
}

.ccc-ed__import:hover {
	background: #dfe8e0;
}

/* --- questions posées en place, sans boîte du navigateur --- */

.ccc-ed__question {
	background: #f6f4ee;
	border: 1px solid #e1e6e0;
	border-radius: 12px;
	padding: 18px;
	margin: 6px 0 16px;
}

.ccc-ed__question p {
	margin: 0 0 12px;
	line-height: 1.6;
}

.ccc-ed__question-choix {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

/* --- pied : sauvegarde et validation --- */

/* Le pied ne porte plus que l'état d'enregistrement : il se range à gauche,
   sous la carte, là où le regard revient. Aligné à droite, il flottait seul
   au bout d'une ligne vide. */
.ccc-ed__pied {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: flex-start;
	padding-top: 14px;
	border-top: 1px solid #eef1ec;
}

.ccc-ed__sauvegarde {
	margin-right: auto;
	font-size: 13px;
	color: #687b76;
}

.ccc-ed__sauvegarde--cours {
	color: #9b4b15;
}

.ccc-ed__sauvegarde--ko {
	color: #a8321c;
}

/* --- rapport de vérification --- */

.ccc-ed__rapport {
	margin-top: 18px;
	padding: 18px;
	background: #f6f4ee;
	border-radius: 12px;
}

.ccc-ed__faits {
	list-style: none;
	padding: 0;
	margin: 10px 0 16px;
	columns: 2;
	column-gap: 28px;
	font-size: 14px;
	line-height: 1.8;
}

.ccc-ed__bloc-t {
	font-weight: 600;
	margin: 16px 0 6px;
}

.ccc-ed__liste {
	margin: 0;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.7;
}

.ccc-ed__liste .ccc-lien {
	text-align: left;
}

/* --- pellicule des cartes --- */

.ccc-ed__galerie {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid #eef1ec;
}

.ccc-ed__pellicule {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 12px 2px 6px;
}

.ccc-ed__vignette {
	flex: 0 0 auto;
	border: 2px solid transparent;
	border-radius: 8px;
	background: #f1f4ef;
	padding: 5px;
	cursor: pointer;
	display: grid;
	justify-items: center;
	gap: 3px;
	font-size: 11px;
	color: #687b76;
}

.ccc-ed__vignette canvas {
	border-radius: 3px;
	background: #fff;
	display: block;
}

.ccc-ed__vignette.actif {
	border-color: #c26747;
	color: #193b36;
}

/* --- création validée : plus de modification --- */

.ccc-ed--figee .ccc-ed__panneau,
.ccc-ed--figee .ccc-ed__outils {
	opacity: 0.55;
	pointer-events: none;
}

.ccc-ed__etat--ko,
.ccc-ed__etat--ok {
	/*
	 * Sur un téléphone, une ligne de texte fine sous la carte passe
	 * inaperçue. Un message qui explique pourquoi une photo n'est pas
	 * arrivée doit se voir, sinon le client conclut que l'éditeur ne marche
	 * pas.
	 */
	padding: 12px 14px;
	border-radius: 10px;
	border-left: 3px solid currentColor;
	background: #fdf1ee;
	margin-bottom: 14px;
}

.ccc-ed__etat--ok {
	background: #eef6f0;
}

@media ( max-width: 860px ) {
	.ccc-ed__grille {
		grid-template-columns: 1fr;
	}

	/*
	 * La carte d'abord, les réglages ensuite. En colonne unique, le panneau
	 * de réglages fait près de deux écrans : la carte se retrouvait tout en
	 * bas, et le client qui venait de choisir une photo ne voyait rien
	 * bouger. On regarde ce qu'on fabrique, puis on règle.
	 */
	.ccc-ed__scene {
		order: -1;
	}

	.ccc-ed__plateau {
		min-height: 320px;
		padding: 18px;
	}

	.ccc-ed__faits {
		columns: 1;
	}

	.ccc-ed__pied {
		justify-content: stretch;
	}
}

/*
 * Lien de reprise d'une création non commandée : il doit se voir, et se
 * copier facilement. Un jeu de 52 cartes perdu faute d'avoir gardé son
 * adresse serait le pire défaut de cet éditeur.
 */
.ccc-ed__reprise a {
	word-break: break-all;
}

.ccc-ed__reprise .ccc-ed__note {
	display: block;
	margin-top: 6px;
}

/* ------------------------------------------------ Bon à tirer client */

.ccc-bat-client {
	max-width: 900px;
	margin: 0 auto;
}

.ccc-bat-client__vue {
	display: block;
	width: 100%;
	height: 70vh;
	min-height: 420px;
	border: 1px solid #e1e6e0;
	border-radius: 12px;
	background: #e8ede6;
	margin: 18px 0 8px;
}

.ccc-bat-client__lien {
	font-size: 13px;
	margin: 0 0 20px;
}

.ccc-bat-client__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: start;
	background: #fff;
	border: 1px solid #e1e6e0;
	border-radius: 18px;
	padding: 22px;
}

.ccc-bat-client__bloc label {
	display: block;
	margin-bottom: 6px;
}

.ccc-bat-client__bloc .ccc-select {
	margin-bottom: 12px;
}

.ccc-bat-client__actions .ccc-btn,
.ccc-bat-client__actions .ccc-btn-sec {
	width: auto;
	display: inline-block;
}

.ccc-bat-client__actions .ccc-ed__question {
	grid-column: 1 / -1;
}

@media ( max-width: 760px ) {
	.ccc-bat-client__actions {
		grid-template-columns: 1fr;
	}

	.ccc-bat-client__vue {
		height: 55vh;
	}
}

/* ---------------------------- Le bon à tirer, dans l'éditeur ---------- */

.ccc-ed__planche {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 110px, 1fr ) );
	gap: 16px;
	margin: 16px 0 6px;
}

.ccc-ed__bat-carte {
	margin: 0;
	cursor: pointer;
	display: grid;
	justify-items: center;
	gap: 6px;
}

.ccc-ed__bat-carte canvas {
	width: 100%;
	height: auto;
	/*
	 * Une ombre portée, et surtout AUCUN fond : les coins arrondis sont
	 * découpés dans le dessin lui-même, un fond blanc carré derrière
	 * les remplirait et annulerait tout l'intérêt.
	 */
	filter: drop-shadow( 0 6px 14px rgba( 25, 59, 54, 0.18 ) );
}

/*
 * L'étui prend toute la rangée du bon à tirer. C'est la seule pièce du jeu
 * qui ne soit pas au format d'une carte, et un développé rangé dans une case
 * de 110 px ne se vérifie pas : or c'est bien pour être vérifié qu'il est là.
 */
.ccc-ed__bat-carte--etui {
	grid-column: 1 / -1;
	justify-items: center;
}

.ccc-ed__bat-carte--etui canvas {
	max-width: 560px;
}

.ccc-ed__bat-carte figcaption {
	font-size: 12px;
	color: #687b76;
	text-align: center;
}

.ccc-ed__bat-carte:hover figcaption {
	color: #c26747;
}

.ccc-ed__bat-pied {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #e1e6e0;
	display: grid;
	gap: 12px;
	justify-items: start;
}

/* ------------------------------------------- Passerelle téléphone ---- */

.ccc-ed__qr {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 14px 0;
}

.ccc-ed__qr canvas {
	/*
	 * Rendu net : un QR lissé par le navigateur se lit mal, et le client
	 * croit que c'est son téléphone qui ne marche pas.
	 */
	image-rendering: pixelated;
	background: #fff;
	border: 1px solid #e1e6e0;
	border-radius: 8px;
}

.ccc-ed__qr-cote {
	flex: 1 1 220px;
	min-width: 0;
	display: grid;
	gap: 10px;
	justify-items: start;
}

.ccc-ed__qr-lien {
	word-break: break-all;
	font-size: 12px;
}

/* ------------------------------------------------ Page téléphone ----- */

.ccc-photos-tel {
	max-width: 560px;
	margin: 0 auto;
	padding: 0 4px;
}

.ccc-tel__intro,
.ccc-tel__note {
	line-height: 1.6;
	color: #687b76;
}

.ccc-tel__note {
	font-size: 13px;
	margin-top: 24px;
}

.ccc-tel__bouton {
	/* Cible large : on vise au pouce, souvent d'une seule main. */
	display: block;
	width: 100%;
	padding: 20px;
	font-size: 17px;
	margin: 20px 0 12px;
}

.ccc-tel__etat {
	min-height: 22px;
	line-height: 1.55;
	margin: 0 0 12px;
}

.ccc-tel__etat--ok {
	color: #1f7a4d;
}

.ccc-tel__etat--ko {
	color: #a8321c;
}

.ccc-tel__liste {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 86px, 1fr ) );
	gap: 10px;
}

.ccc-tel__liste img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* ------------------------------------------- Boutons secondaires ----- */

/*
 * « .ccc-btn-sec » n'est définie que dans la feuille de la page de dépôt,
 * qui n'est pas chargée ici. Sans ces règles, trois des quatre outils de
 * l'éditeur — dont « Photos depuis mon téléphone » — s'affichaient en texte
 * nu : présents dans la page, invisibles pour l'œil.
 */
.ccc-editeur .ccc-btn-sec,
.ccc-editeur .ccc-ed__import,
.ccc-bat-client .ccc-btn-sec {
	display: inline-block;
	width: auto;
	flex: 0 0 auto;
	padding: 11px 16px;
	border: 1px solid #cbd5ce;
	border-radius: 9px;
	background: #fff;
	color: #194e42;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
}

.ccc-editeur .ccc-btn-sec:hover,
.ccc-editeur .ccc-ed__import:hover,
.ccc-bat-client .ccc-btn-sec:hover {
	background: #eaf0eb;
	border-color: #194e42;
}

.ccc-editeur .ccc-btn-sec:disabled {
	opacity: 0.5;
	cursor: default;
}

/* L'entrée vers le téléphone se distingue : c'est celle qu'on cherche. */
/*
 * Le téléphone, en plein.
 *
 * C'est le chemin le plus utile de la page et le moins attendu : personne ne
 * pense qu'un site d'imprimeur sait recevoir les photos directement de son
 * appareil. En filaire parmi quatre autres boutons filaires, il ne se
 * distinguait pas de « Copier cette mise en page ».
 */
#ccc-ed-tel {
	border-color: #c26747;
	background: #c26747;
	color: #fff;
	font-weight: 700;
}

#ccc-ed-tel:hover {
	background: #a9553a;
	border-color: #a9553a;
	color: #fff;
}

/* --------------------------------------------- Réserve de photos ----- */

/*
 * Les deux boutons d'ajout, côte à côte et toujours visibles. Ce sont les
 * seules actions qui ne dépendent pas d'une sélection : tout le reste du
 * panneau parle de l'objet qu'on vient de toucher.
 */
.ccc-ed__ajouts {
	display: flex;
	gap: 8px;
	align-items: stretch;
	margin: 8px 0 10px;
}

/*
 * Sélecteur à deux classes, et c'est nécessaire : « Ajouter une photo » est
 * une étiquette, et « .ccc-ed__panneau label » lui impose une marge haute de
 * 16 px. À classe unique, cette règle l'emportait et le bouton de gauche
 * descendait de 16 px tout seul.
 */
.ccc-ed__ajouts .ccc-ed__ajout {
	flex: 1 1 0;
	min-width: 0;
	min-height: 52px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px 8px;
	border: 1.5px solid #193b36;
	border-radius: 9px;
	background: #193b36;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.ccc-ed__ajouts .ccc-ed__ajout:hover {
	background: transparent;
	color: #193b36;
}

/* Titre du bloc contextuel : il dit ce qu'on est en train de modifier. */
.ccc-ed__objet {
	margin: 16px 0 2px;
	padding-top: 14px;
	border-top: 1px solid #eef1ec;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #c26747;
}

/* Deux boutons sur une ligne : « Redresser » et « Retirer ». */
.ccc-ed__rangee {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.ccc-ed__rangee .ccc-btn-sec {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

/* Réglage fin, replié : la position se fait au doigt, les curseurs ne
   servent qu'à viser juste. */
.ccc-ed__fin {
	margin-top: 12px;
}

.ccc-ed__fin summary {
	font-size: 13px;
	color: #687b76;
	cursor: pointer;
}

.ccc-ed__biblio {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #eef1ec;
}

.ccc-ed__biblio[hidden] {
	display: none;
}

.ccc-ed__biblio-grille {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 58px, 1fr ) );
	gap: 8px;
	margin: 10px 0 12px;
}

.ccc-ed__biblio-item {
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	background: none;
	cursor: pointer;
	line-height: 0;
	overflow: hidden;
}

.ccc-ed__biblio-item img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}

.ccc-ed__biblio-item:hover {
	border-color: #c26747;
}

/* Une photo déjà posée reste cliquable — on peut vouloir la remettre
   ailleurs — mais elle se distingue de celles qui attendent. */
.ccc-ed__biblio-item.posee img {
	opacity: 0.45;
}

.ccc-ed__biblio-item.posee {
	border-color: #cbd5ce;
}



/* --------------------------------------------- Choix de la police ---- */

/*
 * Une liste de pavés plutôt qu'un menu déroulant : chaque ligne doit se lire
 * dans sa propre police, et Safari comme l'iPhone ignorent la mise en forme
 * des options d'un <select>. Ici l'aperçu existe partout.
 */
.ccc-ed__police {
	position: relative;
}

.ccc-ed__police-choix {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid #cbd5ce;
	border-radius: 9px;
	background: #fff;
	color: #194e42;
	text-align: left;
	cursor: pointer;
}

.ccc-ed__police-choix:hover {
	border-color: #194e42;
}

.ccc-ed__police-liste {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: calc( 100% + 4px );
	max-height: 320px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid #cbd5ce;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 18px 40px rgba( 25, 59, 54, 0.16 );
}

.ccc-ed__police-liste[hidden] {
	display: none;
}

.ccc-ed__police-ligne {
	display: block;
	width: 100%;
	padding: 9px 11px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.ccc-ed__police-ligne:hover {
	background: #eaf0eb;
}

.ccc-ed__police-ligne.actif {
	background: #194e42;
}

.ccc-ed__police-ligne.actif .ccc-ed__police-apercu,
.ccc-ed__police-ligne.actif .ccc-ed__police-nom,
.ccc-ed__police-ligne.actif .ccc-ed__police-coupe {
	color: #fff;
}

.ccc-ed__police-apercu {
	display: block;
	color: #16211e;
	line-height: 1.25;
}

/* Le nom et la coupe restent dans la police de la page : une police très
   étroite rendrait son propre nom illisible, et c'est le nom qu'on cherche
   du regard. */
.ccc-ed__police-nom {
	display: inline;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #687b76;
}

.ccc-ed__police-coupe {
	display: inline;
	margin-left: 6px;
	font-size: 11px;
	color: #96a6a1;
}

/*
 * Le dos choisi au catalogue : son aperçu et sa note.
 *
 * L'image est petite — c'est un rappel de ce qui est posé, pas la
 * visualisation : celle-ci est sur la carte, à côté, en grand.
 */
.ccc-ed__verso {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 10px;
}

.ccc-ed__verso-vu {
	flex: 0 0 auto;
	width: 108px;
	height: auto;
	border: 1px solid #e3e7e0;
	border-radius: 4px;
}

.ccc-ed__verso .ccc-ed__note {
	margin: 0;
}

/* Le bouton de copie du lien de reprise, dans son encart. */
.ccc-ed__copier{margin-left:10px;vertical-align:baseline;}

/*
 * Position d'un objet, en millimètres.
 *
 * Deux champs de saisie plutôt que deux curseurs : le curseur sert à
 * chercher, le chiffre à poser. Un client qui veut son logo à 8 mm du bord
 * ne va pas l'y amener au pouce.
 */
.ccc-ed__pos{margin-top:12px;}
.ccc-ed__nb{width:100%;padding:7px 9px;border:1px solid var(--ccc-line);border-radius:3px;
  font:inherit;font-size:15px;background:#fff;color:var(--ccc-fg);}
.ccc-ed__nb:disabled{background:#f3f3f3;color:var(--ccc-muted);}
.ccc-ed__pos .ccc-ed__note{margin-top:6px;}