/* Pascaline de Montjoye — CSS sur-mesure (v0.1)
   Les sections portent leurs styles en inline (fidélité maquette).
   Ce fichier ne gère que le cadre + quelques réglages globaux. */

html { scroll-behavior: smooth; }

.psc-site {
  max-width: 1180px;
  margin: 0 auto;
  background: #fff;
  font-family: 'Karla', system-ui, sans-serif;
}
.psc-site p { margin: 0; }
.psc-site a { text-decoration: none; }

/* Neutralise d'éventuelles marges par défaut du parent autour du contenu d'accueil */
.wp-site-blocks :where(.psc-site) { margin-block: 0; }

/* ============ Section Contact (blocs natifs + WPForms) ============ */
.psc-contact{
  padding:80px 64px;
  background:#faf7f2;
  border-top:1px solid rgba(14,42,85,.08);
}
.psc-contact .psc-contact__cols{
  gap:56px;
  align-items:start;
  margin:0;
}
/* WPForms accordé au design */
.psc-contact .wpforms-container{ margin:0; }
.psc-contact .wpforms-field{ padding:0 0 12px; }
.psc-contact .wpforms-field-label{
  font:600 12px/1.2 'Karla',system-ui,sans-serif;
  color:#3a4a6b; margin:0 0 6px; display:block;
}
.psc-contact .wpforms-form input[type=text],
.psc-contact .wpforms-form input[type=email],
.psc-contact .wpforms-form input[type=tel],
.psc-contact .wpforms-form textarea{
  width:100%;
  background:#fff;
  border:1px solid rgba(14,42,85,.14);
  border-radius:10px;
  padding:13px 15px;
  font:400 14px 'Karla',system-ui,sans-serif;
  color:#0e2a55;
}
.psc-contact .wpforms-form textarea{ min-height:96px; resize:vertical; }
.psc-contact .wpforms-form input:focus,
.psc-contact .wpforms-form textarea:focus{
  outline:none;
  border-color:#f1a175;
  box-shadow:0 0 0 3px rgba(241,161,117,.25);
}
.psc-contact .wpforms-submit{
  background:#f1a175;
  color:#0e2a55;
  border:none;
  border-radius:32px;
  padding:15px 28px;
  font:700 13px 'Karla',system-ui,sans-serif;
  letter-spacing:.03em;
  cursor:pointer;
  transition:background .15s;
}
.psc-contact .wpforms-submit:hover{ background:#ec8f5c; }
.psc-contact .wpforms-required-label{ color:#a8542c; }

/* Empilement mobile propre : on retire le trait de séparation */
@media (max-width:781px){
  .psc-contact [style*="border-left"]{ border-left:0 !important; padding-left:0 !important; }
}

/* WPForms « moderne » : on redéfinit ses variables CSS (voie native) */
.psc-contact .wpforms-container{
  --wpforms-button-background-color:#f1a175;
  --wpforms-button-background-color-alt:#ec8f5c;   /* hover */
  --wpforms-button-text-color:#0e2a55;
  --wpforms-button-border-radius:32px;
  --wpforms-button-size-padding-h:28px;
  --wpforms-button-size-padding-v:15px;
  --wpforms-field-border-radius:10px;
  --wpforms-field-border-color:rgba(14,42,85,.14);
  --wpforms-field-background-color:#ffffff;
  --wpforms-label-color:#3a4a6b;
  --wpforms-label-error-color:#a8542c;
}

/* ============================================================
   RESPONSIVE
   Les sections gardent leurs styles inline (desktop) ; on
   surcharge ici les propriétés critiques au reflow. Le !important
   est requis pour l'emporter sur les styles inline de la maquette.
   ============================================================ */
/* Anti-scroll horizontal : on clippe au niveau racine (html) plutôt que sur
   .psc-site, pour que les sections plein-page (hero, contact) puissent déborder
   la colonne 1180 sans être rognées. Voir la section « Plein-page » plus bas. */
html { overflow-x: hidden; }

/* ---------- Tablette (≤ 900px) ---------- */
@media (max-width: 900px) {
  .psc-hero__name { font-size: 72px !important; }
}

/* ---------- Mobile (≤ 600px) ---------- */
@media (max-width: 600px) {
  /* Nav : passage en pile centrée, sans JS */
  .psc-nav        { flex-wrap: wrap !important; justify-content: center !important;
                    gap: 12px 16px !important; padding: 16px 20px !important; text-align: center; }

  /* Hero */
  .psc-hero       { height: auto !important; min-height: 74vh !important; }
  .psc-hero__inner{ padding: 84px 22px !important; }
  .psc-hero__name { font-size: 44px !important; }
  .psc-hero__tag  { font-size: 18px !important; }
  .psc-hero__cta  { flex-wrap: wrap !important; }

  /* Titres de section */
  .psc-h2         { font-size: 32px !important; }

  /* Footer empilé */
  .psc-footer     { flex-direction: column !important; gap: 6px !important;
                    text-align: center !important; padding: 20px !important; }
}

/* ============ Fondation styles de blocs (conversion Gutenberg) ============ */
.wp-block-image.is-style-psc-circle img{ border-radius:50%; aspect-ratio:1; object-fit:cover; border:5px solid #fff; box-shadow:0 12px 28px rgba(14,42,85,.18); }
.wp-block-image.psc-portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px; }
.is-style-psc-eyebrow{ font:700 11px/1 'Karla'; letter-spacing:.24em; text-transform:uppercase; color:#a8542c; }
.is-style-psc-dropcap-terra:first-letter{ font-family:'Cormorant Garamond',serif; font-weight:600; float:left; font-size:60px; line-height:.8; padding:6px 12px 0 0; color:#a8542c; }
.psc-section{ padding:80px 64px; }
.psc-h2{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:44px; color:#0e2a55; line-height:1.05; }
@media(max-width:900px){ .psc-section{ padding:64px 40px; } }
@media(max-width:600px){ .psc-section{ padding:56px 20px; } .psc-h2{ font-size:32px; } }

/* ============================================================
   TASK 2 — En-tête (bloc Navigation natif) + pied, en template parts
   Habille parts/header.html et parts/footer.html. Le hamburger mobile
   (overlay) est fourni nativement par core/navigation ("overlayMenu":
   "mobile") — pas de CSS/JS custom requis pour son fonctionnement.
   ============================================================ */

/* En-tête sticky (reste collé en haut au défilement).
   Le sticky est porté par le WRAPPER template-part (<header class="wp-block-
   template-part"> qui enveloppe .psc-nav), pas par .psc-nav : un élément sticky
   ne colle que dans les limites de son bloc conteneur, et le parent direct de
   .psc-nav fait juste sa hauteur. Le wrapper, lui, a pour conteneur toute la
   page (.wp-site-blocks) → il colle sur toute la hauteur. */
.wp-block-template-part:has(> .psc-nav){
	position:sticky;
	top:0;
	z-index:100;
}
/* Sous la barre d'admin WordPress quand on est connecté (fixe, 32px). */
.admin-bar .wp-block-template-part:has(> .psc-nav){ top:32px; }
/* En mobile, la barre d'admin défile avec la page → on recolle en haut. */
@media screen and (max-width:782px){ .admin-bar .wp-block-template-part:has(> .psc-nav){ top:0; } }

.psc-nav{
	padding:20px 44px;
	background:#fffdf9;
	border-bottom:1px solid rgba(14,42,85,.09);
	box-shadow:0 2px 16px rgba(14,42,85,.06);
}

.psc-brand,
.psc-brand a{
	font-family:'Dynalight',cursive;
	font-size:26px;
	line-height:1;
	color:#0e2a55;
	text-decoration:none;
	margin:0;
}
.psc-brand a:hover{ color:#a8542c; }

/* Liens du menu (desktop + panneau overlay mobile) */
.psc-menu .wp-block-navigation-item__content{
	font:600 12px/1 'Karla',sans-serif;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:#3a4a6b;
	text-decoration:none;
	padding:.5em 1em;
}
.psc-menu li:first-child > .wp-block-navigation-item__content{ color:#0e2a55; }
.psc-menu .wp-block-navigation-item__content:hover{ color:#a8542c; }

/* Bouton pill terracotta (CTA « Contacter ») */
.psc-menu .psc-nav-cta .wp-block-navigation-item__content{
	display:inline-block;
	font:700 12px/1.5 'Karla',sans-serif;   /* line-height 1.5 : ne rogne plus les jambages */
	letter-spacing:.04em;
	text-transform:none;
	color:#fff;
	background:#a8542c;
	padding:10px 22px;
	border-radius:30px;
	white-space:nowrap;
}
.psc-menu .psc-nav-cta .wp-block-navigation-item__content:hover{
	background:#ab5a30;
	color:#fff;
}

/* Icône hamburger / fermeture (overlay mobile) */
.psc-menu .wp-block-navigation__responsive-container-open,
.psc-menu .wp-block-navigation__responsive-container-close{
	color:#0e2a55;
}

/* Bascule en hamburger dès 900px : le menu horizontal (brand ~168 + menu ~566
   + marges) passe sur 2 lignes autour de 850px. On force donc l'overlay mobile
   jusqu'à 900px (le hamburger est déjà à droite via l'en-tête en space-between),
   en surchargeant les règles cœur >600px. Au-delà de 900px : menu horizontal. */
@media (max-width:900px){
	.psc-menu .wp-block-navigation__responsive-container-open{ display:flex !important; }
	.psc-menu .wp-block-navigation__responsive-container:not(.is-menu-open){ display:none !important; }
}

/* CTA « Contacter » dans l'overlay mobile : le cœur agrandit les items ; on met
   le pill au diapason (plus grand et aéré) pour qu'il ne soit ni riquiqui ni rogné. */
.psc-menu .wp-block-navigation__responsive-container.is-menu-open .psc-nav-cta .wp-block-navigation-item__content{
	display:inline-block;
	font-size:15px;
	line-height:1.6;
	padding:12px 30px;
	margin-top:8px;
}

/* Pied */
.psc-footer{
	padding:22px 64px;
	background:#efe7db;
	color:#6b6354; /* taupe foncé — AA 4.84 sur sable (#8a8172 échouait à 3.13) */
	font-size:12px;
	border-top:1px solid rgba(14,42,85,.06);
}
.psc-footer p{ margin:0; }

/* ============================================================
   TASK 4 — Hero (bloc natif core/cover)
   Le bloc gère lui-même l'image, l'overlay dégradé et la mise en
   page ; ce fichier ne fixe que ce que les attributs de bloc ne
   couvrent pas nativement : la taille de base du nom (Dynalight,
   auparavant en style inline) et l'espacement du CTA. Les paliers
   responsive (72px / 44px, etc.) sont déjà définis plus haut.
   ============================================================ */
.psc-hero__name{
	margin:0;
	line-height:.95;
	text-shadow:0 2px 30px rgba(14,42,85,.4);
}
.psc-hero__cta{
	gap:16px;
	justify-content:center;
	margin-top:34px;
}

/* ============================================================
   TASK 5 — Prestations (bloc natif core/columns)
   "isStackedOnMobile":false (voir prestations.php) applique la classe
   core .is-not-stacked-on-mobile, qui force ".wp-block-columns { flex-wrap:
   nowrap !important }" à TOUTES les largeurs (pas de media query native).
   On doit donc réaffirmer flex-wrap en !important dans nos propres media
   queries pour piloter nous-mêmes le passage 4 → 2 → 2 colonnes.
   ============================================================ */
.psc-prestations{
	display:grid !important;                       /* bat le display:flex (non-important) du cœur */
	grid-template-columns:repeat(4,1fr) !important;/* grid ignore flex-wrap / is-not-stacked-on-mobile */
	gap:26px !important;
}

@media (max-width:900px){
	.psc-prestations{ grid-template-columns:repeat(2,1fr) !important; gap:30px !important; }
}

@media (max-width:600px){
	.psc-prestations{ grid-template-columns:repeat(2,1fr) !important; gap:18px 16px !important; }
}

/* ============================================================
   TASK 6 — Écouter (colonnes 1.2fr/1fr : core/embed + core/audio)
   Aucun média réel n'est fourni : la cliente branchera l'URL vidéo
   dans le bloc core/embed (laissé vide, donc non rendu côté front
   tant qu'il n'a pas d'URL — comportement natif attendu) et
   téléversera ses fichiers dans les 3 blocs core/audio. Le bloc
   core/columns garde son empilement mobile natif (≤782px) : pas de
   media query custom nécessaire ici.
   ============================================================ */
.psc-ecouter-cols{
	gap:26px;
}

/* Emplacement vidéo : boîte dégradée + icône lecture tant qu'aucune
   URL n'est renseignée dans le bloc core/embed (celui-ci ne rend
   alors rien — la boîte CSS sert de repère visuel à la cliente). */
.psc-ecouter__video{
	position:relative;
	aspect-ratio:16/10;
	border-radius:12px;
	overflow:hidden;
	background:linear-gradient(135deg,#0e2a55,#26406b);
	display:flex;
	align-items:center;
	justify-content:center;
}
.psc-ecouter__video::before{
	content:"▶";
	display:flex;
	align-items:center;
	justify-content:center;
	width:70px;
	height:70px;
	border-radius:50%;
	background:rgba(255,255,255,.92);
	color:#0e2a55;
	font-size:24px;
	padding-left:5px;
}
/* Une fois l'URL renseignée, l'embed rendu (iframe) prend le dessus visuellement. */
.psc-ecouter__video:has(iframe)::before{ display:none; }
.psc-ecouter__video-caption{
	position:absolute;
	left:18px;
	bottom:16px;
	margin:0;
	color:#f4ece2;
	font:600 13px/1 'Karla',sans-serif;
	letter-spacing:.05em;
}

/* Cartes des 3 extraits audio */
.psc-ecouter__tracks{
	display:flex;
	flex-direction:column;
	gap:12px;
}
.psc-ecouter__track{
	border:1px solid rgba(14,42,85,.1);
	border-radius:12px;
	padding:16px 18px;
}
.psc-ecouter__track audio{ width:100%; margin-top:4px; }
.psc-ecouter__note{ padding-left:4px; }
/* Contraste AA — filet pour la page « Accueil » déjà en base : ses labels
   Contact (« TÉLÉPHONE / EMAIL / ZONE ») portent color:#c2673a en style inline
   (ratio 3.7). Le pattern source est corrigé (#a8542c), mais le contenu déjà
   déplié en base ne bouge pas au redéploiement du thème : cette règle le rattrape
   côté rendu (un !important en feuille externe l'emporte sur l'inline). */
.psc-contact [style*="color:#c2673a"]{ color:#a8542c !important; }

@media (max-width:900px){
	.psc-ecouter-cols{ gap:30px; }
	.psc-ecouter__video{ aspect-ratio:16/9; }
}

/* ============================================================
   Prestations — briques cliquables (liens vers les pages dédiées)
   Chaque brique pointe vers /slug/. On garde le titre en bleu nuit
   (le lien ne doit pas ressembler à un lien texte bleu par défaut)
   et on colore l'accroche « En savoir plus → » en terracotta.
   ============================================================ */
.psc-prestations__item h3 a{ color:#0e2a55; }
.psc-prestations__item h3 a:hover{ color:#a8542c; }
.psc-prestations__item .has-small-font-size a{ color:#a8542c; }
.psc-prestations__item .has-small-font-size a:hover{ color:#ab5a30; }
.psc-prestations__item .is-style-psc-circle img{ transition:transform .18s, box-shadow .18s; }
.psc-prestations__item a:hover .is-style-psc-circle img,
.psc-prestations__item .is-style-psc-circle a:hover img{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(14,42,85,.24); }

/* ============================================================
   Pages « événement » (template page-evenement + pattern evenement)
   Bandeau plein cadre (core/cover) + corps en colonne de lecture
   étroite (760px, réglé via le layout du groupe). La charte globale
   (Karla, boutons accent/ghost, .psc-h2, .is-style-psc-eyebrow) est
   déjà fournie ailleurs ; ici on n'ajoute que le spécifique.
   ============================================================ */
.psc-event-main{ margin-top:0; }

.psc-event__band .wp-block-cover__inner-container{ padding:0 22px; }
.psc-event__title{ margin:0; line-height:1.05; text-shadow:0 2px 24px rgba(14,42,85,.4); }

.psc-event .psc-h2{ font-size:34px; }

/* Listes (En pratique / répertoire) : puce ronde terracotta, filet fin. */
.psc-event__list{ list-style:none; margin:0; padding:0; }
.psc-event__list li{
	position:relative;
	padding:11px 0 11px 26px;
	border-bottom:1px solid rgba(14,42,85,.08);
	color:#3a4a6b;
	line-height:1.5;
}
.psc-event__list li::before{
	content:"";
	position:absolute;
	left:2px;
	top:1.05em;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#f1a175;
}
.psc-event__list li:last-child{ border-bottom:0; }

/* Liens texte du corps (retour accueil) en terracotta. */
.psc-event a:not(.wp-block-button__link){ color:#a8542c; }
.psc-event a:not(.wp-block-button__link):hover{ color:#ab5a30; }

@media (max-width:600px){
	.psc-event__band{ min-height:280px !important; }
	.psc-event__title{ font-size:32px !important; }
	.psc-event .psc-h2{ font-size:28px; }
}

/* ============================================================
   Carte « Œuvre du répertoire » (pattern pascaline/oeuvre)
   + section « Répertoire » (pattern pascaline/repertoire).
   Blocs 100 % natifs (heading + paragraphes + core/audio + lien) ;
   le style vit ici, le contenu reste éditable par la cliente.
   ============================================================ */
.psc-oeuvre{
	background:#fff;
	border:1px solid rgba(14,42,85,.1);
	border-radius:14px;
	padding:22px 24px;
	box-shadow:0 8px 24px rgba(14,42,85,.05);
}
/* Espacement entre cartes empilées (section Répertoire ou insertions successives). */
.psc-oeuvre + .psc-oeuvre{ margin-top:18px; }

.psc-oeuvre__title{ font-size:24px; color:#0e2a55; line-height:1.15; }
.psc-oeuvre__author{
	margin:3px 0 0;
	font-family:'Cormorant Garamond',serif;
	font-style:italic;
	font-size:18px;
	color:#a8542c;
}
.psc-oeuvre__desc{ margin:12px 0 0; line-height:1.6; }
.psc-oeuvre .wp-block-audio{ margin:16px 0 0; }
.psc-oeuvre .wp-block-audio audio{ width:100%; }
.psc-oeuvre__link{ margin:14px 0 0; }
.psc-oeuvre__link a{ color:#a8542c; }
.psc-oeuvre__link a:hover{ color:#ab5a30; }

/* ============================================================
   Plein-page : hero + contact débordent en pleine largeur (fond
   edge-to-edge), le contenu reste centré à 1180. Le clip anti-scroll
   horizontal est sur html (voir plus haut), ce qui permet ce débordement.
   Validé : hero/contact = 100vw, contenu 1180 centré, 0 scroll H, sticky OK.
   ============================================================ */
.psc-hero,
.psc-contact{
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}
/* Le fond du contact est pleine largeur ; ses colonnes restent à 1180, centrées. */
.psc-contact > .psc-contact__cols{
	max-width:1180px;
	margin-left:auto;
	margin-right:auto;
}

/* ============================================================
   Sous-menu déroulant « Prestations » (core/navigation-submenu).
   Le parent « PRESTATIONS » reste un lien (scroll vers #prestations) et
   ouvre au survol un menu avec chaque prestation → sa page dédiée.
   ============================================================ */
.psc-menu .wp-block-navigation__submenu-container{
	background:#fffdf9;
	border:1px solid rgba(14,42,85,.1);
	border-radius:10px;
	box-shadow:0 14px 30px rgba(14,42,85,.14);
	padding:8px 0;
	min-width:220px;
}
.psc-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
	font:600 13px/1.3 'Karla',sans-serif;
	letter-spacing:.02em;
	text-transform:none;
	color:#3a4a6b;
	padding:9px 20px;
}
.psc-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
	color:#a8542c;
}
/* Chevron discret à côté de « Prestations » */
.psc-menu .wp-block-navigation__submenu-icon{ padding:0 0 0 4px; }