/*
Theme Name: Cause Perdue
Theme URI: https://editionscauseperdue.fr
Description: Thème enfant de Divi pour editionscauseperdue.fr. Regroupe les styles front du site : pages de formulaire, bloc newsletter, panier et fiches livre.
Author: Mantys Media
Template: Divi
Version: 1.0.0
Text Domain: causeperdue-child
*/

/* ==========================================================================
   1. Pages de formulaire (contact, newsletter)
   Colonne de 800px, un champ par ligne, contrôles en noir et blanc.
   L'id du wrapper est repris dans le sélecteur : le thème « orbital » de
   Gravity Forms scope le sien avec un id et deux attributs.
   ========================================================================== */

.cp-form-page { max-width: 800px; margin: 34px auto 8px; }

.cp-form-page #gform_wrapper_1,
.cp-form-page #gform_wrapper_2 {
	--gf-color-primary: #000;
	--gf-color-primary-rgb: 0, 0, 0;
	--gf-color-primary-darker: #000;
	--gf-color-primary-lighter: #000;
	--gf-color-primary-contrast: #fff;
	--gf-color-primary-contrast-rgb: 255, 255, 255;
	--gf-color-in-ctrl-primary: #000;
	--gf-color-in-ctrl-primary-contrast: #fff;
	--gf-radius: 0px;
	max-width: 800px;
	margin: 0 auto;
}

/* Le rythme vertical est porté par la grille, pas par des marges empilées. */
.cp-form-page #gform_wrapper_1 .gform_fields,
.cp-form-page #gform_wrapper_2 .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 24px;
}

.cp-form-page #gform_wrapper_1 .gfield,
.cp-form-page #gform_wrapper_2 .gfield { padding: 0; }

.cp-form-page #gform_wrapper_1 .gfield--type-honeypot,
.cp-form-page #gform_wrapper_2 .gfield--type-honeypot { display: none !important; }

.cp-form-page #gform_wrapper_1 .gfield_label,
.cp-form-page #gform_wrapper_2 .gfield_label {
	display: block;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .01em;
	color: #000;
}

.cp-form-page #gform_wrapper_1 .gfield_required,
.cp-form-page #gform_wrapper_2 .gfield_required {
	margin-left: 3px;
	color: #6b6b6b;
	font-weight: 400;
}

.cp-form-page #gform_wrapper_1 input[type=text],
.cp-form-page #gform_wrapper_1 input[type=email],
.cp-form-page #gform_wrapper_1 select,
.cp-form-page #gform_wrapper_1 textarea,
.cp-form-page #gform_wrapper_2 input[type=text],
.cp-form-page #gform_wrapper_2 input[type=email],
.cp-form-page #gform_wrapper_2 select,
.cp-form-page #gform_wrapper_2 textarea {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #000;
	border-radius: 0;
	background: #fff;
	color: #000;
	padding: .72em .85em;
	font-size: 16px;
	line-height: 1.4;
	font-family: inherit;
}

.cp-form-page #gform_wrapper_1 textarea,
.cp-form-page #gform_wrapper_2 textarea {
	min-height: 180px;
	resize: vertical;
	display: block;
}

/* Flèche redessinée : le thème de Gravity ramène un bleu qui jure ici. */
.cp-form-page #gform_wrapper_1 select,
.cp-form-page #gform_wrapper_2 select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.6em;
	cursor: pointer;
	background-image:
		linear-gradient(45deg, transparent 50%, #000 50%),
		linear-gradient(135deg, #000 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 13px) 55%;
	background-size: 7px 7px, 7px 7px;
	background-repeat: no-repeat;
}

.cp-form-page #gform_wrapper_1 input:focus,
.cp-form-page #gform_wrapper_1 select:focus,
.cp-form-page #gform_wrapper_1 textarea:focus,
.cp-form-page #gform_wrapper_2 input:focus,
.cp-form-page #gform_wrapper_2 select:focus,
.cp-form-page #gform_wrapper_2 textarea:focus {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.cp-form-page #gform_wrapper_1 input::placeholder,
.cp-form-page #gform_wrapper_1 textarea::placeholder,
.cp-form-page #gform_wrapper_2 input::placeholder,
.cp-form-page #gform_wrapper_2 textarea::placeholder { color: #6b6b6b; opacity: 1; }

/* Ligne de consentement, utilisée par le formulaire newsletter. */
.cp-form-page #gform_wrapper_1 .ginput_container_consent,
.cp-form-page #gform_wrapper_2 .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.cp-form-page #gform_wrapper_1 .ginput_container_consent label,
.cp-form-page #gform_wrapper_2 .ginput_container_consent label {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #3a3a3a;
	font-weight: 400;
}

.cp-form-page #gform_wrapper_1 .ginput_container_consent input[type=checkbox],
.cp-form-page #gform_wrapper_2 .ginput_container_consent input[type=checkbox] {
	margin: 2px 0 0;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: #000;
}

.cp-form-page #gform_wrapper_1 .gfield--type-consent .gfield_label,
.cp-form-page #gform_wrapper_2 .gfield--type-consent .gfield_label { display: none; }

.cp-form-page #gform_wrapper_1 .gform_footer,
.cp-form-page #gform_wrapper_2 .gform_footer {
	margin: 28px 0 0 !important;
	padding: 0 !important;
	display: flex;
	justify-content: flex-start;
}

.cp-form-page #gform_wrapper_1 .gform_button,
.cp-form-page #gform_wrapper_2 .gform_button {
	width: auto;
	border: 2px solid #000;
	border-radius: 0;
	background: transparent;
	color: #000;
	padding: .72em 2.4em;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.cp-form-page #gform_wrapper_1 .gform_button:hover,
.cp-form-page #gform_wrapper_1 .gform_button:focus,
.cp-form-page #gform_wrapper_2 .gform_button:hover,
.cp-form-page #gform_wrapper_2 .gform_button:focus { background: #000; color: #fff; }

.cp-form-page #gform_wrapper_1 .gform_validation_errors,
.cp-form-page #gform_wrapper_2 .gform_validation_errors {
	border-radius: 0;
	border: 2px solid #000;
	background: #fff;
	padding: 14px 16px;
	margin: 0 0 22px;
	font-size: 14px;
}

.cp-form-page #gform_wrapper_1 .gfield_validation_message,
.cp-form-page #gform_wrapper_2 .gfield_validation_message {
	border-radius: 0;
	background: transparent;
	border: 0;
	padding: 6px 0 0;
	font-size: 13px;
	color: #8c2f2a;
}

.cp-form-page #gform_wrapper_1 .gform_confirmation_message,
.cp-form-page #gform_wrapper_2 .gform_confirmation_message {
	border: 2px solid #000;
	padding: 20px 22px;
	font-size: 16px;
	line-height: 1.55;
}

@media (max-width: 767px) {
	.cp-form-page #gform_wrapper_1 .gform_fields,
	.cp-form-page #gform_wrapper_2 .gform_fields { row-gap: 18px; }

	.cp-form-page #gform_wrapper_1 textarea,
	.cp-form-page #gform_wrapper_2 textarea { min-height: 150px; }

	.cp-form-page #gform_wrapper_1 .gform_footer,
	.cp-form-page #gform_wrapper_2 .gform_footer { margin-top: 22px !important; }

	.cp-form-page #gform_wrapper_1 .gform_button,
	.cp-form-page #gform_wrapper_2 .gform_button { width: 100%; text-align: center; }
}

/* ==========================================================================
   2. Bloc newsletter embarqué (accueil, boutique, presse, rencontres)
   Carte noire portant le titre et le formulaire. Scopé à .cp-nl-card :
   le même formulaire s'affiche aussi sur sa page dédiée, en blanc.
   ========================================================================== */

.cp-nl-card {
	box-sizing: border-box;
	max-width: 800px;
	margin: 24px auto;
	padding: 38px 40px 34px;
	background: #000;
	color: #fff;
	text-align: left;
}

.cp-nl-title {
	margin: 0 0 22px;
	font-family: 'Noto Serif', Georgia, serif;
	font-size: 30px;
	line-height: 1.25;
	font-weight: 700;
	text-align: center;
	color: #fff;
}

.cp-nl-card #gform_wrapper_1 {
	--gf-color-primary: #fff;
	--gf-color-primary-rgb: 255, 255, 255;
	--gf-color-primary-darker: #fff;
	--gf-color-primary-lighter: #fff;
	--gf-color-primary-contrast: #000;
	--gf-color-primary-contrast-rgb: 0, 0, 0;
	--gf-color-in-ctrl: transparent;
	--gf-color-in-ctrl-contrast: #fff;
	--gf-color-in-ctrl-primary: #fff;
	--gf-color-in-ctrl-primary-contrast: #000;
	--gf-radius: 0px;
	margin: 0;
}

/* Les trois champs d'identité sur une ligne ; consentement et bouton pleine largeur. */
.cp-nl-card #gform_wrapper_1 .gform_fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 10px;
	row-gap: 0;
}

.cp-nl-card #gform_wrapper_1 .gfield { grid-column: span 1; padding: 0; }
.cp-nl-card #gform_wrapper_1 .gfield--type-consent { grid-column: 1 / -1; margin-top: 16px; }

/* Les intitulés passent dans les placeholders, ils ne restent que pour les lecteurs d'écran. */
.cp-nl-card #gform_wrapper_1 .gfield_label,
.cp-nl-card #gform_wrapper_1 .gfield_required {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cp-nl-card #gform_wrapper_1 input[type=text],
.cp-nl-card #gform_wrapper_1 input[type=email] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 0;
	background: transparent;
	color: #fff;
	padding: .7em .8em;
	font-size: 15px;
	line-height: 1.3;
}

.cp-nl-card #gform_wrapper_1 input[type=text]:focus,
.cp-nl-card #gform_wrapper_1 input[type=email]:focus { border-color: #fff; outline: none; }

.cp-nl-card #gform_wrapper_1 input::placeholder { color: rgba(255, 255, 255, .55); opacity: 1; }

.cp-nl-card #gform_wrapper_1 .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.cp-nl-card #gform_wrapper_1 .ginput_container_consent label {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .8);
}

.cp-nl-card #gform_wrapper_1 .ginput_container_consent input[type=checkbox] {
	margin: 1px 0 0;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	accent-color: #fff;
}

.cp-nl-card #gform_wrapper_1 .gform_footer {
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

.cp-nl-card #gform_wrapper_1 .gform_button {
	width: auto;
	border: 1px solid #fff;
	border-radius: 0;
	background: #fff;
	color: #000;
	padding: .7em 2.2em;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.cp-nl-card #gform_wrapper_1 .gform_button:hover,
.cp-nl-card #gform_wrapper_1 .gform_button:focus { background: transparent; color: #fff; }

.cp-nl-card #gform_wrapper_1 .gform_validation_errors,
.cp-nl-card #gform_wrapper_1 .gfield_validation_message {
	border-radius: 0;
	font-size: 12.5px;
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.cp-nl-card #gform_wrapper_1 .gform_confirmation_message { color: #fff; }

@media (max-width: 767px) {
	/* La carte sort des gouttières de la ligne Divi pour occuper toute la largeur. */
	.cp-nl-card {
		max-width: none;
		width: auto;
		margin: 20px calc(50% - 50vw);
		padding: 28px 22px 26px;
	}

	.cp-nl-title { margin: 0 0 18px; font-size: 24px; }

	.cp-nl-card #gform_wrapper_1 .gform_fields { grid-template-columns: 1fr; row-gap: 8px; }
	.cp-nl-card #gform_wrapper_1 .gfield { grid-column: 1 / -1; }
	.cp-nl-card #gform_wrapper_1 .gfield--type-consent { margin-top: 12px; }
	.cp-nl-card #gform_wrapper_1 .gform_footer { margin-top: 18px; }
	.cp-nl-card #gform_wrapper_1 .gform_button { width: 100%; }
}

/* ==========================================================================
   3. Panier : quantité vive
   Divi rend le champ nombre sans bordure visible, ce qui le fait passer pour
   désactivé. Les déclarations sont forcées, ses règles WooCommerce sont
   émises après celles-ci et portent des sélecteurs plus lourds.
   ========================================================================== */

.woocommerce-cart-form td.product-quantity .quantity { display: inline-block; }

.woocommerce-cart-form td.product-quantity input.qty {
	width: 78px;
	box-sizing: border-box;
	border: 2px solid #000 !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #000 !important;
	padding: .45em .3em;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
	opacity: 1 !important;
}

.woocommerce-cart-form td.product-quantity input.qty:focus {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.woocommerce-cart-form .actions button[name=update_cart] {
	border: 2px solid #000;
	border-radius: 0;
	background: transparent;
	color: #000;
	padding: .5em 1.5em;
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.woocommerce-cart-form .actions button[name=update_cart]:hover:not(:disabled),
.woocommerce-cart-form .actions button[name=update_cart]:focus:not(:disabled) { background: #000; color: #fff; }

.woocommerce-cart-form .actions button[name=update_cart]:disabled { opacity: .3; cursor: default; }

/* Avec la mise à jour vive, le bouton est redondant. La classe est posée par
   le script, il reste donc disponible sans JavaScript. */
.woocommerce-cart-form.cp-live .actions button[name=update_cart] { display: none; }

.cp-cart-busy { opacity: .45; pointer-events: none; transition: opacity .12s ease; }

/* ==========================================================================
   4. Panier vide : grille des livres
   ========================================================================== */

/* Divi peint les avis WooCommerce avec sa couleur d'accent, ici blanche, ce
   qui rendait le message invisible sur fond blanc. */
.wc-empty-cart-message .woocommerce-info {
	background: transparent !important;
	color: #000 !important;
	padding: 0 !important;
	margin: 0 0 .5em;
	border: 0 !important;
	text-align: center;
	font-size: 1.2em;
}

.wc-empty-cart-message .woocommerce-info::before { display: none !important; }

.cp-empty-cart-books { margin-top: 2.5em; }
.cp-empty-cart-books h2 { text-align: center; margin-bottom: 1.2em; }

.cp-empty-cart-books ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
	gap: 28px 24px;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

.cp-empty-cart-books ul.products::before,
.cp-empty-cart-books ul.products::after { display: none; }

.cp-empty-cart-books ul.products li.product {
	float: none !important;
	width: auto !important;
	max-width: 300px;
	margin: 0 auto !important;
	text-align: center;
}

.cp-empty-cart-books ul.products li.product img { width: 100%; height: auto; margin: 0 0 12px; }
.cp-empty-cart-books ul.products li.product .button { margin-top: 10px; display: inline-block; }

/* ==========================================================================
   5. Page Livres : quantité et ajout au panier sous chaque bouton Commander
   ========================================================================== */

/* Flex en bloc plutôt qu'en ligne : le formulaire est frère du bouton, qui
   centre son propre contenu, le centrage ne doit donc pas dépendre d'un
   text-align hérité de la colonne. */
.cp-qty-add {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 10px;
	margin: 14px 0 0;
}

/* Sur trois fiches, le module qui suit le bouton remonte de 14px et
   chevaucherait le formulaire. La garde n'est utile que s'il est suivi. */
.cp-qty-add:not(:last-child) { margin-bottom: 24px; }

.cp-qty-add input[type=number] {
	width: 64px;
	padding: .3em .2em;
	border: 2px solid #000;
	border-radius: 0;
	text-align: center;
	font-size: 18px;
	background: #fff;
}

.cp-qty-add button {
	border: 2px solid #000;
	border-radius: 0;
	background: transparent;
	padding: .3em 1em;
	font-size: 18px;
	cursor: pointer;
}

.cp-qty-add button:hover { background: #000; color: #fff; }