/*
Theme Name:   Camille Penchinat
Theme URI:    https://www.camillepenchinat.fr
Description:  Thème enfant GeneratePress pour le site de Camille Penchinat, illustratrice. Papier crème, Cormorant Garamond et Jost, accent ocre. Couleurs, typographie et pied de page réglables dans Mon site › Apparence (extension CP Atelier).
Author:       CIRKUS
Author URI:   https://www.cirkus.fr
Template:     generatepress
Version:      1.2.0
Text Domain:  camille-penchinat
*/

/* ==================================================================
   1. Variables — valeurs par défaut.
      L'extension CP Atelier (Mon site › Apparence) les remplace par
      les réglages enregistrés : ne pas modifier les couleurs ici.
   ================================================================== */
:root {
	/* Couleurs générales */
	--cpc-paper: #fbf8f2;        /* fond général */
	--cpc-paper-2: #f4efe6;      /* fond secondaire (vignettes, survols) */
	--cpc-ink: #3a3430;          /* texte */
	--cpc-title-ink: #3a3430;    /* titres */
	--cpc-soft: #7d746b;         /* texte secondaire, légendes */
	--cpc-line: #e5ddd0;         /* filets et bordures */
	--cpc-ochre: #b8873a;        /* accent : soulignés, boutons, filets du cartel */
	--cpc-link: #8f6420;         /* liens (contraste AA sur le papier) */
	/* En-tête */
	--cpc-header-bg: #fbf8f2;
	--cpc-site-ink: #3a3430;     /* nom du site */
	--cpc-tagline-ink: #7d746b;  /* « Illustration » */
	--cpc-nav-ink: #3a3430;      /* menu */
	/* Pied de page */
	--cpc-footer-bg: #fbf8f2;
	--cpc-footer-ink: #7d746b;
	--cpc-footer-link: #7d746b;

	/* Typographie */
	--cpc-font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--cpc-font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--cpc-font-ui: "Jost", "Helvetica Neue", Arial, sans-serif;
	--cpc-fs-body: 20px;
	--cpc-fw-body: 500;
	--cpc-lh-body: 1.6;
	--cpc-p-space: 1.2em;        /* espace après un paragraphe */
	--cpc-fs-h1: 50px;
	--cpc-fs-h2: 35px;
	--cpc-fs-h3: 22px;
	--cpc-fs-h4: 18px;
	--cpc-fw-head: 400;
	--cpc-h3-style: italic;
	--cpc-list-type: disc;       /* disc | square | "– " */
	--cpc-list-marker: #b8873a;
	--cpc-fs-site: 34px;         /* nom du site dans l'en-tête */
	--cpc-fs-nav: 12px;
	--cpc-ls-nav: .16em;
	--cpc-tt-nav: uppercase;

	/* En-tête : comportement */
	--cpc-header-position: sticky;
	--cpc-tagline-display: block;

	/* Alias conservés pour compatibilité */
	--cpc-serif: var(--cpc-font-body);
	--cpc-sans: var(--cpc-font-ui);
	--cpc-ochre-text: var(--cpc-link);

	/* Variables GeneratePress */
	--contrast: var(--cpc-ink);
	--contrast-2: var(--cpc-soft);
	--contrast-3: #b9b0a5;
	--base: var(--cpc-line);
	--base-2: var(--cpc-paper-2);
	--base-3: var(--cpc-paper);
	--accent: var(--cpc-link);
}

/* ==================================================================
   2. Base
   ================================================================== */
body {
	background: var(--cpc-paper);
	color: var(--cpc-ink);
	font-family: var(--cpc-font-body);
	font-weight: var(--cpc-fw-body);
	font-size: var(--cpc-fs-body);
	line-height: var(--cpc-lh-body);
	-webkit-font-smoothing: antialiased;
}
.site, .inside-article, .one-container .site-content, .separate-containers .inside-article {
	background-color: var(--cpc-paper);
}
a { color: var(--cpc-link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover, a:focus { color: var(--cpc-ink); }
::selection { background: color-mix(in srgb, var(--cpc-ochre) 30%, transparent); }

p, .entry-content ul, .entry-content ol { margin-bottom: var(--cpc-p-space); }
.entry-content ul, .cp-texte ul { list-style-type: var(--cpc-list-type); }
.entry-content li::marker, .cp-texte li::marker { color: var(--cpc-list-marker); }
.entry-content li, .cp-texte li { margin-bottom: .35em; }

h1, h2, h3, h4, h5, h6, .entry-title {
	font-family: var(--cpc-font-head);
	font-weight: var(--cpc-fw-head);
	color: var(--cpc-title-ink);
	line-height: 1.15;
	letter-spacing: .005em;
}
h1, .entry-title { font-size: clamp(calc(var(--cpc-fs-h1) * .7), 5vw, var(--cpc-fs-h1)); }
h2 { font-size: clamp(calc(var(--cpc-fs-h2) * .78), 3.4vw, var(--cpc-fs-h2)); }
h3 { font-size: var(--cpc-fs-h3); font-style: var(--cpc-h3-style); }
h4 { font-size: var(--cpc-fs-h4); }
blockquote {
	border-left: 1px solid var(--cpc-ochre);
	padding: .2em 0 .2em 1.2em;
	margin: 1.6em 0;
	font-style: italic;
	color: var(--cpc-ink);
	font-size: 1.1em;
}
hr { background: var(--cpc-line); height: 1px; border: 0; }

/* Petits textes, boutons, formulaires */
button, input, select, textarea, .button, .wp-block-button__link,
.wp-caption-text, figcaption, .entry-meta, label {
	font-family: var(--cpc-font-ui);
	font-weight: 400;
}
input[type=text], input[type=email], input[type=url], input[type=tel], textarea, select {
	background: #fff;
	border: 1px solid var(--cpc-line);
	color: var(--cpc-ink);
	border-radius: 2px;
}
input:focus, textarea:focus, select:focus { border-color: var(--cpc-ochre); outline: none; }
button, .button, input[type=submit], .wp-block-button__link {
	background: transparent;
	color: var(--cpc-ink);
	border: 1px solid var(--cpc-ochre);
	border-radius: 2px;
	padding: .65em 1.4em;
	font-size: .9rem;
	letter-spacing: .06em;
}
button:hover, .button:hover, input[type=submit]:hover, .wp-block-button__link:hover {
	background: var(--cpc-ochre);
	color: #fff;
}

/* ==================================================================
   3. En-tête : nom à gauche, menu à droite, collé en haut au défilement
   ================================================================== */
html { scroll-padding-top: 110px; }
.site-header {
	position: var(--cpc-header-position);
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--cpc-header-bg) 96%, transparent);
	-webkit-backdrop-filter: saturate(1.2) blur(6px);
	backdrop-filter: saturate(1.2) blur(6px);
	border-bottom: 1px solid var(--cpc-line);
	transition: box-shadow .3s ease;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } } /* barre d'admin non fixe */

.site-header .inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 20px;
	transition: padding .3s ease;
}
.main-title { font-family: var(--cpc-font-head); font-size: clamp(calc(var(--cpc-fs-site) * .75), 3vw, var(--cpc-fs-site)); font-weight: var(--cpc-fw-head); line-height: 1.05; margin: 0; transition: font-size .3s ease; }
.main-title a, .main-title a:hover { color: var(--cpc-site-ink); text-decoration: none; letter-spacing: .02em; }
.site-description {
	display: var(--cpc-tagline-display);
	font-family: var(--cpc-font-ui);
	font-weight: 300;
	font-size: .66rem;
	text-transform: uppercase;
	letter-spacing: .42em;
	color: var(--cpc-tagline-ink);
	margin: .45em 0 0;
	line-height: 1;
	max-height: 2em;
	overflow: hidden;
	transition: opacity .25s ease, max-height .3s ease, margin .3s ease;
}

/* Resserré au défilement (classe posée par assets/header.js) */
.cpc-scrolled .site-header { box-shadow: 0 6px 22px rgba(58, 52, 48, .07); }
.cpc-scrolled .site-header .inside-header { padding-top: 10px; padding-bottom: 10px; }
.cpc-scrolled .main-title { font-size: clamp(calc(var(--cpc-fs-site) * .65), 2.4vw, calc(var(--cpc-fs-site) * .8)); }
.cpc-scrolled .site-description { opacity: 0; max-height: 0; margin-top: 0; }

/* Menu */
.site-header .main-navigation,
.main-navigation, .main-navigation .inside-navigation { background: transparent; border: 0; }
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	font-family: var(--cpc-font-ui);
	font-weight: 400;
	font-size: var(--cpc-fs-nav);
	text-transform: var(--cpc-tt-nav);
	letter-spacing: var(--cpc-ls-nav);
	color: var(--cpc-nav-ink);
	line-height: 48px;
}
.main-navigation .main-nav ul li a { padding-left: 14px; padding-right: 14px; position: relative; }
.main-navigation .main-nav > ul > li:last-child > a { padding-right: 0; }
.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 12px;
	height: 1px;
	background: var(--cpc-ochre);
	transform: scaleX(0);
	transition: transform .25s ease;
}
.main-navigation .main-nav > ul > li:last-child > a::after { right: 0; }
.main-navigation .main-nav > ul > li:hover > a::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after,
.main-navigation .main-nav > ul > li.current-menu-parent > a::after { transform: scaleX(1); }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a { color: var(--cpc-nav-ink); background: transparent; }

/* Sous-menus (Carnets, Livres) */
.main-navigation ul ul {
	background: var(--cpc-header-bg);
	border: 1px solid var(--cpc-line);
	box-shadow: 0 10px 24px rgba(58, 52, 48, .08);
	width: 230px;
}
.main-navigation .main-nav ul ul li a { line-height: 1.4; padding: 13px 20px; font-size: calc(var(--cpc-fs-nav) * .95); }
.main-navigation .main-nav ul ul li a::after { display: none; }
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li.current-menu-item > a { color: var(--cpc-link); background: var(--cpc-paper-2); }
.main-navigation .dropdown-menu-toggle { padding-left: 4px; }

/* Mobile : nom à gauche, bouton Menu à droite, menu déplié sous l'en-tête */
@media (max-width: 768px) {
	html { scroll-padding-top: 80px; }
	.site-header .inside-header { padding: 14px 16px; flex-wrap: wrap; }
	.site-description { display: none; }
	.main-navigation .menu-toggle { padding: 0 0 0 12px; line-height: 40px; }
	.main-navigation.toggled { flex-basis: 100%; }
	.main-navigation.toggled .main-nav ul li a { line-height: 46px; padding-left: 0; }
	.main-navigation .main-nav > ul > li > a::after { display: none; }
	.main-navigation.toggled .main-nav ul ul { border: 0; box-shadow: none; background: transparent; padding-left: 14px; }
}

/* ==================================================================
   4. Contenu des pages
   ================================================================== */
.one-container .site-content { padding: clamp(28px, 5vw, 64px) 20px; }
.entry-content { max-width: 46em; }
.home .entry-content, .page-template-default.full-width-content .entry-content { max-width: none; }
.entry-header { margin-bottom: 1.4em; }
.entry-content > p:first-child { font-size: 1.12em; }
.entry-content img { height: auto; }
.wp-block-image figcaption, .wp-caption-text { color: var(--cpc-soft); font-size: .82rem; font-style: italic; }

/* Pages du plugin CP Atelier : il gère sa propre largeur et ses marges */
.cp-page .site-content { padding: 0; display: block; }
.site-content > .cp { width: 100%; min-width: 0; }
.cp {
	--cp-accent: var(--cpc-ochre);
	--cp-soft: var(--cpc-soft);
	--cp-line: var(--cpc-line);
	--cp-paper: var(--cpc-paper-2);
	padding-left: 20px;
	padding-right: 20px;
}
.cp-title { font-weight: var(--cpc-fw-head); color: var(--cpc-title-ink); }
.cp-side { top: 110px; } /* sous l'en-tête collant */
.cp-planche-titre, .cp-card-title { font-family: var(--cpc-font-head); color: var(--cpc-title-ink); }
.cp-ligne { font-family: var(--cpc-font-body); }
.cp-card-title { font-size: 1.35rem; }
.cp-card-ligne, .cp-ariane, .cp-subnav, .cp-cartel, .cp-btn, .cp-main-img figcaption, .cp-galerie figcaption, .cp-lb figcaption {
	font-family: var(--cpc-font-ui);
}
.cp-cartel { font-size: .9rem; }
.cp-cartel dd { font-weight: 400; }
.cp-texte { font-size: 1.3em; line-height: var(--cpc-lh-body); }
.cp-texte, .cp-planche-texte { font-family: var(--cpc-font-body); font-weight: var(--cpc-fw-body); }
.cp-planche-texte { font-size: 1.22em; line-height: var(--cpc-lh-body); }
.cp-planche-titre { font-size: 1.55rem; }
.cp-btn { color: var(--cpc-ink); letter-spacing: .05em; font-size: .82rem; }
.cp-btn:hover { color: #fff; }

/* Bloc « Actualités » de l'accueil */
.cp-derniers { margin-top: 3em; padding-top: 2.2em; border-top: 1px solid var(--cpc-line); }
.cp-derniers-titre {
	font-family: var(--cpc-font-ui);
	font-size: .78rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .3em;
	color: var(--cpc-soft);
	margin-bottom: 1.6em;
}

/* ==================================================================
   5. Pied de page
   ================================================================== */
.site-footer, .site-info { background-color: var(--cpc-footer-bg); }
.site-info { border-top: 1px solid var(--cpc-line); color: var(--cpc-footer-ink); }
.site-info .inside-site-info { padding: 26px 20px 34px; }
.copyright-bar {
	font-family: var(--cpc-font-ui);
	font-weight: 300;
	font-size: .78rem;
	letter-spacing: .05em;
	color: var(--cpc-footer-ink);
}
.copyright-bar a { color: var(--cpc-footer-link); text-decoration: none; }
.copyright-bar a:hover { color: var(--cpc-link); text-decoration: underline; }
.cpc-sep { margin: 0 .7em; opacity: .6; }
@media (max-width: 600px) {
	.copyright-bar { line-height: 2; }
}

/* ==================================================================
   6. Page Contact (formulaire à gauche, image à droite)
   ================================================================== */
.entry-content:has(.cpc-contact) { max-width: none; }
.cpc-contact-intro { font-size: 1.3rem; max-width: 34em; margin-bottom: 2.4em; }
.wp-block-columns.cpc-contact { gap: clamp(28px, 5vw, 72px); align-items: flex-start; }
.cpc-contact-visuel { position: sticky; top: 110px; }
.cpc-contact-photo { margin: 0; }
.cpc-contact-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--cpc-paper-2);
	box-shadow: 0 18px 40px rgba(58, 52, 48, .12);
}
.cpc-contact-photo figcaption { text-align: left; margin-top: .8em; }
.cpc-contact-rgpd { font-family: var(--cpc-font-ui); font-size: .78rem; color: var(--cpc-soft); margin-top: 1.2em; }
.cpc-contact-rgpd a { color: var(--cpc-soft); }
@media (max-width: 781px) {
	.cpc-contact-visuel { position: static; order: -1; }
	.cpc-contact-photo img { aspect-ratio: 3 / 2; }
}

/* Forminator — à utiliser avec le style de formulaire « Aucun » (Apparence du formulaire) */
.forminator-ui.forminator-custom-form { font-family: var(--cpc-font-ui); }
.forminator-ui .forminator-row { margin-bottom: 1.3em !important; }
.forminator-ui .forminator-label {
	display: block;
	font-family: var(--cpc-font-ui);
	font-size: .72rem !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--cpc-soft) !important;
	margin-bottom: .55em;
}
.forminator-ui .forminator-required { color: var(--cpc-link); }
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui select,
.forminator-ui .forminator-select2 + .select2 .select2-selection {
	width: 100%;
	background: #fff !important;
	border: 1px solid var(--cpc-line) !important;
	border-radius: 2px !important;
	padding: .8em 1em !important;
	font-family: var(--cpc-font-ui);
	font-size: 1rem !important;
	color: var(--cpc-ink) !important;
	box-shadow: none !important;
	transition: border-color .15s;
}
.forminator-ui .forminator-textarea { min-height: 180px; }
.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus { border-color: var(--cpc-ochre) !important; outline: none; }
.forminator-ui .forminator-button-submit {
	background: transparent !important;
	color: var(--cpc-ink) !important;
	border: 1px solid var(--cpc-ochre) !important;
	border-radius: 2px !important;
	padding: .85em 2.2em !important;
	font-family: var(--cpc-font-ui);
	font-size: .8rem !important;
	text-transform: uppercase;
	letter-spacing: .16em;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.forminator-ui .forminator-button-submit:hover { background: var(--cpc-ochre) !important; color: #fff !important; }
.forminator-ui .forminator-error-message { font-size: .8rem; color: #a3412f; }
.forminator-ui .forminator-response-message { font-family: var(--cpc-font-ui); border-left: 2px solid var(--cpc-ochre); padding: .8em 1em; background: var(--cpc-paper-2); }